/* ============ LEVL — "LEVL out" concept · Neue Haas Display ============ */
@font-face{font-family:'NH';src:url('nh-200.woff2') format('woff2');font-weight:200;font-display:swap}
@font-face{font-family:'NH';src:url('nh-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'NH';src:url('nh-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'NH';src:url('nh-500.woff2') format('woff2');font-weight:500;font-display:swap}
:root{
--paper:#F4F0E7; --paper2:#ECE6D8; --ink:#141410; --muted:#6E6A5E;
--hair:#DCD5C4; --plum:#B4185F; --teal:#12A6AE; --lime:#7FBE3F;
--acc:var(--ink);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'NH',Helvetica,Arial,sans-serif;background:var(--paper);color:var(--ink);
font-weight:400;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;word-spacing:.10em;letter-spacing:.004em;font-kerning:normal;font-feature-settings:'kern' 1}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.fe{display:inline-block;transform:scaleX(-1)}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.eyebrow{font-size:11.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;word-spacing:.10em}
.h-display{font-weight:200;letter-spacing:-.018em;word-spacing:.06em;line-height:1.02}
.h-sec{font-weight:200;font-size:clamp(34px,4.6vw,58px);letter-spacing:-.01em;word-spacing:.06em;line-height:1.05}
.sub{color:var(--muted);font-weight:300;font-size:clamp(17px,1.6vw,20px)}
.btn{display:inline-block;background:var(--ink);color:var(--paper);border:1px solid var(--ink);
padding:17px 30px;font-family:inherit;font-size:11.5px;font-weight:500;letter-spacing:.2em;word-spacing:.10em;
text-transform:uppercase;cursor:pointer;border-radius:2px;transition:background .25s,color .25s}
.btn:hover{background:transparent;color:var(--ink)}
.btn.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.light:hover{background:transparent;color:var(--paper)}
.btn.outline{background:transparent;color:var(--ink)}
.btn.outline:hover{background:var(--ink);color:var(--paper)}
.btn.outline-light{background:transparent;color:var(--paper);border-color:var(--paper)}
.btn.outline-light:hover{background:var(--paper);color:var(--ink)}
/* announcement */
.announce{background:var(--ink);color:var(--paper);text-align:center;padding:9px 16px;
font-size:11.5px;letter-spacing:.22em;font-weight:500;text-transform:uppercase;word-spacing:.1em}
/* header */
header{position:sticky;top:0;z-index:50;background:rgba(244,240,231,.92);backdrop-filter:blur(12px);
border-bottom:1px solid var(--hair)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav .logo img{height:17px;width:auto}
.nav-links{display:flex;gap:clamp(14px,2vw,30px);align-items:center}
.nav-links a{font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
padding:6px 2px;border-bottom:1px solid transparent;transition:border-color .2s}
.nav-links a:hover{border-color:var(--ink)}
.nav-right{display:flex;gap:clamp(14px,2vw,26px);align-items:center}
.bag{font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0}
.mobile-menu{display:none;background:var(--paper);border-bottom:1px solid var(--hair);padding:12px 0 22px}
.mobile-menu a{display:block;padding:11px clamp(20px,4vw,56px);font-size:12px;font-weight:500;
letter-spacing:.18em;text-transform:uppercase}
.mobile-menu.open{display:block}
@media(max-width:900px){
.nav-links.main{display:none}
.burger{display:block}
}
/* marquee */
.marquee{background:var(--ink);color:var(--paper);overflow:hidden;padding:22px 0;border-top:1px solid #2a2a24}
.marquee .track{display:flex;gap:0;white-space:nowrap;animation:mq 36s linear infinite;width:max-content}
.marquee span{font-weight:200;font-size:clamp(26px,3vw,40px);letter-spacing:.01em;padding-right:.6em}
.marquee .dot{color:var(--paper);opacity:.4}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* sections */
section{padding:clamp(70px,9vw,120px) 0}
.sec-head{max-width:640px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head .eyebrow{color:var(--muted);margin-bottom:16px}
.sec-head .sub{margin-top:16px}
/* occasions */
.occ-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.occ-card{display:block}
.occ-card .ph{overflow:hidden;border-radius:2px;aspect-ratio:3/4.6;background:var(--paper2)}
.occ-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.occ-card:hover .ph img{transform:scale(1.035)}
.occ-card .cap{padding:18px 2px 0}
.occ-card .cap .line{font-weight:300;font-size:19px;margin:4px 0 8px}
.occ-card .cap .go{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
border-bottom:1px solid var(--ink);padding-bottom:2px}
@media(max-width:820px){.occ-grid{grid-template-columns:1fr;max-width:480px}}
/* shop cards */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.pcard{background:#fff;border:1px solid var(--hair);border-radius:2px;overflow:hidden;display:flex;flex-direction:column}
.pcard .ph{display:block;aspect-ratio:1/1;overflow:hidden}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.pcard:hover .ph img{transform:scale(1.03)}
.pcard .body{padding:24px 24px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard .occ{font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.pcard h3{font-weight:300;font-size:26px;letter-spacing:-.01em}
.pcard .note{color:var(--muted);font-weight:300;font-size:14.5px;flex:1}
.pcard .row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.pcard .price{font-weight:400;font-size:15px}
.pcard .price small{color:var(--muted);font-weight:300}
.pcard .go{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:2px}
@media(max-width:820px){.shop-grid{grid-template-columns:1fr;max-width:480px}}
/* receipts split */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.split .ph{border-radius:2px;overflow:hidden}
.ing-rows{margin-top:28px;border-top:1px solid var(--hair)}
.ing-row{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair);
font-weight:300;font-size:15.5px}
.ing-row b{font-weight:500;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);align-self:center;text-align:right;white-space:nowrap}
.badge-row{display:flex;gap:22px;align-items:center;margin-top:30px;flex-wrap:wrap}
.badge-row img{height:56px;width:auto}
@media(max-width:900px){.split{grid-template-columns:1fr}}
/* ritual band */
.ritual-band{background:var(--ink);color:var(--paper);text-align:center}
.ritual-band .eyebrow{color:#9A9891;margin-bottom:18px}
.ritual-band h2{color:var(--paper)}
.ritual-band .sub{color:#B5B2AB;max-width:560px;margin:18px auto 36px}
/* story */
.story{background:var(--paper2)}
.story .split .ph{background:transparent}
.story blockquote{font-weight:200;font-size:clamp(26px,3vw,38px);line-height:1.2;letter-spacing:-.01em;word-spacing:.06em;margin:18px 0 22px}
/* reviews strip */
.rev-strip{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:34px 0;text-align:center}
.rev-strip .stars{letter-spacing:.3em;font-size:15px;margin-bottom:10px}
.rev-strip p{font-weight:300;color:var(--muted);font-size:14.5px}
.rev-strip b{color:var(--ink);font-weight:400}
/* footer */
footer{background:var(--ink);color:var(--paper);padding:clamp(56px,7vw,90px) 0 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:56px}
.foot-grid img{height:22px;width:auto;margin-bottom:18px}
.foot-grid .tag{color:#8F8D86;font-weight:300;font-size:14px;max-width:260px}
.foot-grid h5{font-size:11.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#84827C;margin-bottom:16px}
.foot-grid a{display:block;font-weight:300;font-size:14.5px;color:#D2CFC7;margin-bottom:10px}
.foot-grid a:hover{color:#fff}
.foot-base{border-top:1px solid #2a2a24;padding-top:24px;display:flex;justify-content:space-between;gap:16px;
font-size:12px;color:#797771;font-weight:300;flex-wrap:wrap}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
/* ============ PDP ============ */
.crumbs{padding:18px 0 0;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.crumbs a:hover{color:var(--ink)}
.pdp{display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(32px,4.5vw,72px);padding:clamp(28px,3.5vw,48px) 0 clamp(60px,7vw,90px)}
.gallery .main{border-radius:2px;overflow:hidden;background:#fff;border:1px solid var(--hair);aspect-ratio:1/1}
.gallery .main img{width:100%;height:100%;object-fit:cover}
.gallery .main.contain img{object-fit:contain;padding:8%}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.thumbs button{border:1px solid var(--hair);background:#fff;border-radius:2px;overflow:hidden;cursor:pointer;
aspect-ratio:1/1;padding:0}
.thumbs button.on{border-color:var(--ink)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs button.contain img{object-fit:contain;padding:12%}
.buy .eyebrow{color:var(--acc);margin-bottom:12px}
.buy h1{font-weight:200;font-size:clamp(38px,4.4vw,54px);letter-spacing:-.015em;word-spacing:.06em;line-height:1.02}
.rating{margin:14px 0 4px;font-size:13.5px;font-weight:300;color:var(--muted)}
.rating .stars{letter-spacing:.18em;color:var(--ink);margin-right:8px}
.buy .note{color:var(--muted);font-weight:300;margin:12px 0 22px;font-size:16.5px;max-width:430px}
.flavors{display:flex;gap:18px;margin:0 0 26px;padding-bottom:22px;border-bottom:1px solid var(--hair)}
.flavors .lbl{font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);align-self:center}
.flavors a{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:400;padding-bottom:2px;border-bottom:1px solid transparent}
.flavors a .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.flavors a.on{border-color:var(--ink);font-weight:500}
.opts{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.opt{border:1px solid var(--hair);border-radius:2px;padding:18px 20px;cursor:pointer;background:#fff;transition:box-shadow .2s}
.opt.on{box-shadow:inset 0 0 0 1.2px var(--ink);border-color:var(--ink)}
.opt .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.opt .name{font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.opt .save{font-size:11.5px;font-weight:500;letter-spacing:.14em;background:var(--ink);color:var(--paper);
padding:3px 8px;border-radius:2px;text-transform:uppercase}
.opt .price{font-size:15px;font-weight:400;white-space:nowrap}
.opt .price s{color:var(--muted);font-weight:300;margin-left:6px;font-size:13px}
.opt .meta{color:var(--muted);font-weight:300;font-size:13px;margin-top:6px}
.opt select{margin-top:12px;width:100%;padding:11px 12px;font-family:inherit;font-size:13px;font-weight:400;
border:1px solid var(--hair);border-radius:2px;background:var(--paper);color:var(--ink)}
.qty-atc{display:flex;gap:12px;margin:6px 0 14px}
.qty{display:flex;border:1px solid var(--hair);border-radius:2px;background:#fff}
.qty button{width:44px;border:0;background:none;font-size:17px;cursor:pointer;font-family:inherit;color:var(--ink)}
.qty input{width:40px;text-align:center;border:0;background:none;font-family:inherit;font-size:14px;color:var(--ink)}
.atc{flex:1}
.sub-cta{width:100%;text-align:center}
.ship-line{margin-top:14px;font-size:12.5px;color:var(--muted);font-weight:300;text-align:center}
.callouts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:30px;padding-top:26px;border-top:1px solid var(--hair)}
.co{text-align:center}
.co img{height:52px;width:auto;margin:0 auto 10px}
.co span{display:block;font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media(max-width:900px){.pdp{grid-template-columns:1fr}}
/* receipts cards */
.receipts{background:var(--paper2)}
.rec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rec{background:#fff;border:1px solid var(--hair);border-radius:2px;padding:26px 24px}
.rec .nm{font-weight:500;font-size:14px;letter-spacing:.04em;margin-bottom:8px}
.rec .role{font-weight:300;color:var(--muted);font-size:14px;margin-bottom:16px;min-height:44px}
.rec .facts{border-top:1px solid var(--hair);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.rec .facts div{display:flex;justify-content:space-between;font-size:12px}
.rec .facts span:first-child{color:var(--muted);font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;align-self:center}
.rec .facts span:last-child{font-weight:400}
.rec-note{margin-top:22px;font-size:12.5px;color:var(--muted);font-weight:300}
@media(max-width:900px){.rec-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.rec-grid{grid-template-columns:1fr}}
/* occasion band on PDP */
.occ-band .split .ph{aspect-ratio:auto}
.occ-band .bigline{font-weight:200;font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-.01em;margin:14px 0 18px}
/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);
padding:14px 26px;border-radius:2px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
opacity:0;pointer-events:none;transition:all .35s;z-index:99}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* ============ QUIZ ============ */
.quiz-page{min-height:100vh;display:flex;flex-direction:column;background:var(--paper)}
.quiz-shell{flex:1;display:flex;align-items:center;justify-content:center;padding:clamp(30px,5vw,60px) 20px}
.quiz-card{width:100%;max-width:760px;background:#fff;border:1px solid var(--hair);border-radius:3px;
padding:clamp(36px,5vw,64px) clamp(24px,5vw,72px);text-align:center}
.quiz-card .qlogo{height:18px;margin:0 auto 26px;width:auto}
.quiz-card h1{font-weight:200;font-size:clamp(34px,4.5vw,48px);letter-spacing:-.01em;word-spacing:.06em;margin-bottom:14px}
.quiz-card .intro{color:var(--muted);font-weight:300;max-width:480px;margin:0 auto 34px;font-size:15.5px}
.qdots{display:flex;gap:14px;justify-content:center;margin-bottom:10px}
.qdots span{width:9px;height:9px;border-radius:50%;background:var(--hair);transition:background .3s}
.qdots span.on{background:var(--plum)}
.qstep-lbl{font-size:11.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.qq{font-weight:300;font-size:clamp(24px,3vw,32px);letter-spacing:-.005em;margin-bottom:8px}
.qhint{color:var(--muted);font-weight:300;font-size:14px;margin-bottom:28px}
.qopts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:36px}
.qopt{border:1px solid var(--hair);background:var(--paper);border-radius:999px;padding:13px 24px;cursor:pointer;
font-family:inherit;font-size:14px;font-weight:400;color:var(--ink);transition:all .2s}
.qopt:hover{border-color:var(--ink)}
.qopt.on{background:var(--plum);border-color:var(--plum);color:#fff;font-weight:500}
.qnext{border-radius:999px;background:var(--plum);border-color:var(--plum);padding:16px 44px}
.qnext:hover{background:transparent;color:var(--plum)}
.qnext:disabled{opacity:.35;pointer-events:none}
.qback{display:inline-block;margin-top:18px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
font-weight:500;color:var(--muted);background:none;border:none;cursor:pointer;font-family:inherit}
/* result */
.qresult{display:grid;grid-template-columns:220px 1fr;gap:36px;align-items:center;text-align:left;margin-top:8px}
.qresult .canph{background:var(--paper2);border-radius:3px;padding:22px;display:flex;align-items:center;justify-content:center}
.qresult .canph img{max-height:300px;width:auto}
.qresult .eyebrow{color:var(--plum);margin-bottom:8px}
.qresult h2{font-weight:200;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.01em;margin-bottom:8px}
.qresult .occline{color:var(--muted);font-weight:300;margin-bottom:20px}
.routine{background:var(--paper);border:1px solid var(--hair);border-radius:3px;padding:20px 22px;margin-bottom:22px}
.routine .rl{font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.routine p{font-weight:300;font-size:15px}
.routine .pm{margin-top:10px;font-weight:400;font-size:17px}
.routine .pm small{color:var(--muted);font-weight:300;font-size:13px;margin-left:8px}
.qres-ctas{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:680px){.qresult{grid-template-columns:1fr;text-align:center}
.qresult .canph{max-width:240px;margin:0 auto}.qres-ctas{justify-content:center}}
/* ===== animated flavor hero ===== */
.fh{position:relative;height:min(92svh,880px);min-height:560px;overflow:hidden;background:var(--ink)}
.fh-plates{position:absolute;inset:0}
.fh-plate{position:absolute;inset:0;clip-path:inset(100% 0 0 0);visibility:hidden}
.fh-plate.is-on{clip-path:inset(0 0 0 0);visibility:visible}
.fh-plate.is-wipe{transition:clip-path .62s cubic-bezier(.52,.02,.24,1)}
.fh-ing{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.fh-canwrap{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);height:60%;z-index:2}
.fh-bob{height:100%;animation:fhDrift 5.1s ease-in-out infinite}
.fh-sway{height:100%;transform-origin:50% 126%;animation:fhRock 3.4s ease-in-out infinite}
.fh-can{height:100%;width:auto;filter:drop-shadow(0 26px 34px rgba(0,0,0,.30)) drop-shadow(0 6px 10px rgba(0,0,0,.18))}
@keyframes fhRock{0%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}100%{transform:rotate(-1.4deg)}}
@keyframes fhDrift{0%{transform:translateY(-.8%)}50%{transform:translateY(.8%)}100%{transform:translateY(-.8%)}}
@keyframes fhWiggle{0%{transform:rotate(0deg)}14%{transform:rotate(-3.4deg)}30%{transform:rotate(2.7deg)}
46%{transform:rotate(-1.8deg)}62%{transform:rotate(1.1deg)}78%{transform:rotate(-.5deg)}100%{transform:rotate(0deg)}}
.fh-waveline{position:absolute;left:-4%;right:-4%;top:100%;height:46px;transform:translateY(-8px);opacity:0;z-index:3;
background:radial-gradient(46px 12px at 12% 50%, rgba(255,255,255,.55), transparent 70%),
radial-gradient(60px 14px at 38% 42%, rgba(255,255,255,.45), transparent 70%),
radial-gradient(52px 12px at 64% 55%, rgba(255,255,255,.5), transparent 70%),
radial-gradient(58px 13px at 88% 45%, rgba(255,255,255,.42), transparent 70%);
filter:blur(6px)}
.fh-plate.is-wipe .fh-waveline{top:0;opacity:1;transition:top .62s cubic-bezier(.52,.02,.24,1),opacity .2s .5s}
.fh-foot{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:flex-end;justify-content:space-between;
gap:28px;padding-bottom:clamp(30px,4.5vh,54px);color:var(--fh-fg,#fff)}
.fh-copy{max-width:520px}
.fh-occ{margin-bottom:14px;color:inherit}
.fh-h{font-weight:200;letter-spacing:-.018em;word-spacing:.06em;line-height:.98;font-size:clamp(58px,7.6vw,116px);color:inherit}
.fh-note{font-weight:300;font-size:clamp(15px,1.4vw,18px);opacity:.9;margin:16px 0 26px;max-width:430px;
transition:opacity .25s,transform .25s}
.fh-note.is-out,.fh-occ.is-out{opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}
.fh-occ{transition:opacity .25s,transform .25s}
.fh-ctas{display:flex;gap:12px;flex-wrap:wrap}
.fh-btn{display:inline-block;border:1px solid currentColor;color:inherit;padding:15px 26px;font-size:11.5px;font-weight:500;
letter-spacing:.2em;word-spacing:.10em;text-transform:uppercase;border-radius:2px;transition:background .25s,color .25s,border-color .25s}
.fh-btn:hover{background:var(--fh-fg,#fff);color:var(--fh-btnfg-inv,#141410)}
.fh-btn.solid{background:var(--fh-fg,#fff);color:var(--fh-btnfg-inv,#141410)}
.fh-btn.solid:hover{background:transparent;color:inherit}
.fh-tabs{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.fh-tab{position:relative;background:none;border:0;cursor:pointer;font-family:inherit;color:inherit;opacity:.55;
font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:6px 0 9px;transition:opacity .25s}
.fh-tab:hover{opacity:.85}
.fh-tab.is-on{opacity:1}
.fh-prog{position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;opacity:.25;display:block}
.fh-tab.is-on .fh-prog{opacity:1;transform-origin:left;transform:scaleX(0)}
.fh-tab.is-on.is-run .fh-prog{animation:fhProg var(--fh-int,5s) linear forwards}
@keyframes fhProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:820px){
.fh{height:calc(100svh - 128px);min-height:600px}
.fh-canwrap{top:34%;height:44%}
.fh-ing{object-position:50% 0}
.fh-foot{flex-direction:column;align-items:flex-start;gap:18px}
.fh-tabs{flex-direction:row;gap:18px;align-items:center;order:2;flex-wrap:wrap}
.fh-copy{order:1}
.fh-h{font-size:clamp(46px,13vw,72px)}
}
@media(prefers-reduced-motion:reduce){
.fh-bob,.fh-sway{animation:none}
.fh-plate.is-wipe{transition:none}
}
/* ===== rad menu ===== */
.nav-fit{font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
padding:6px 2px;border-bottom:1px solid transparent}
.nav-fit:hover{border-color:var(--ink)}
@media(max-width:900px){.main-only{display:none}}
.shop-item{position:relative}
.shop-link{display:inline-flex;align-items:center;gap:6px}
.shop-link svg{transition:transform .25s}
header.mega-open .shop-link svg{transform:rotate(180deg)}
.menu-btn{display:inline-flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
font-family:inherit;font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding:6px 0}
.mb-lines{display:inline-flex;flex-direction:column;gap:4px;width:20px}
.mb-lines span{display:block;height:1.5px;background:var(--ink);transition:transform .3s,width .3s}
.menu-btn:hover .mb-lines span:last-child{width:70%}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--hair);
opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .28s,transform .28s,visibility .28s;z-index:49;
box-shadow:0 30px 60px rgba(20,20,16,.10)}
header.mega-open .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-top:22px;padding-bottom:26px}
.mega-tile{position:relative;display:flex;align-items:flex-end;background:var(--tile);color:var(--tilefg);
border-radius:3px;overflow:hidden;aspect-ratio:1/1.06;padding:18px}
.mega-tile img{position:absolute;left:50%;top:4%;transform:translateX(-50%);height:70%;width:auto;
filter:drop-shadow(0 14px 18px rgba(0,0,0,.28));transition:transform .45s cubic-bezier(.2,.6,.25,1)}
.mega-tile:hover img{transform:translateX(-50%) rotate(-2.4deg) translateY(-4px)}
.mt-txt{position:relative;z-index:2;display:flex;flex-direction:column;gap:5px}
.mt-occ{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.mt-name{font-weight:300;font-size:19px;letter-spacing:-.005em}
.mega-ritual{align-items:center;justify-content:center;text-align:center}
.mega-ritual .mt-name{font-size:22px;font-weight:200}
@media(max-width:900px){.mega{display:none}}
/* full screen menu */
.fsm{position:fixed;inset:0;background:var(--paper);z-index:100;display:flex;flex-direction:column;
opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.fsm.open{opacity:1;visibility:visible}
.fsm-head{border-bottom:1px solid var(--hair)}
.fsm-head .nav{height:64px}
.fsm-close{background:none;border:0;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:500;
letter-spacing:.18em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.fsm-close span{font-size:20px;font-weight:300;line-height:1}
.fsm-body{flex:1;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;width:100%;overflow:auto;padding-top:24px;padding-bottom:24px}
.fsm-links{display:flex;flex-direction:column;gap:2px}
.fsm-big{font-weight:200;font-size:clamp(34px,5.2vw,64px);letter-spacing:-.015em;word-spacing:.06em;line-height:1.18;
color:var(--ink);display:flex;align-items:baseline;gap:18px;opacity:0;transform:translateY(18px);
transition:opacity .5s,transform .5s,color .25s}
.fsm.open .fsm-big{opacity:1;transform:translateY(0)}
.fsm.open .fsm-big:nth-child(1){transition-delay:.05s}.fsm.open .fsm-big:nth-child(2){transition-delay:.11s}
.fsm.open .fsm-big:nth-child(3){transition-delay:.17s}.fsm.open .fsm-big:nth-child(4){transition-delay:.23s}
.fsm.open .fsm-big:nth-child(5){transition-delay:.29s}
.fsm-big em{font-style:normal;font-size:11.5px;font-weight:500;letter-spacing:.2em;color:var(--muted)}
.fsm-big:hover{color:var(--muted)}
.fsm-small{margin-top:26px;display:flex;gap:26px;flex-wrap:wrap;opacity:0;transition:opacity .5s .35s}
.fsm.open .fsm-small{opacity:1}
.fsm-small a{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--hair);padding-bottom:3px}
.fsm-small a:hover{border-color:var(--ink)}
.fsm-preview{display:flex;justify-content:center}
.fsm-tile{background:#A83060;border-radius:4px;width:min(320px,26vw);aspect-ratio:3/4;display:flex;
align-items:center;justify-content:center;transition:background .4s;opacity:0;transform:scale(.96);}
.fsm.open .fsm-tile{opacity:1;transform:scale(1);transition:background .4s,opacity .5s .2s,transform .5s .2s}
.fsm-tile img{height:78%;width:auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.3));transition:opacity .25s}
.fsm-foot{display:flex;justify-content:space-between;gap:14px;padding-top:16px;padding-bottom:22px;
border-top:1px solid var(--hair);font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
@media(max-width:900px){.fsm-body{grid-template-columns:1fr}.fsm-preview{display:none}}
body.no-scroll{overflow:hidden}
/* scroll reveals */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.6,.25,1),transform .7s cubic-bezier(.2,.6,.25,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* ===== PDP round 2 ===== */
.facts-strip{background:var(--ink);color:var(--paper);overflow:hidden;padding:18px 0}
.facts-strip .track{display:flex;white-space:nowrap;animation:mq 30s linear infinite;width:max-content}
.facts-strip span{font-weight:300;font-size:15px;letter-spacing:.14em;text-transform:uppercase;padding-right:.9em}
.facts-strip .dot{opacity:.4}
.timeline{background:var(--paper)}
.tl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:tl}
.tl{position:relative;border:1px solid var(--hair);background:#fff;border-radius:2px;padding:28px 26px 30px}
.tl .n{font-weight:200;font-size:44px;color:var(--acc);line-height:1;margin-bottom:14px}
.tl h4{font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.tl p{font-weight:300;color:var(--muted);font-size:14.5px}
@media(max-width:820px){.tl-grid{grid-template-columns:1fr}}
.compare table{width:100%;border-collapse:collapse}
.compare th,.compare td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--hair);font-weight:300;font-size:15px}
.compare th{font-weight:500;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase}
.compare th.lv{background:var(--ink);color:var(--paper)}
.compare td.lv{background:#fff;font-weight:400}
.compare .yes{color:var(--ink)}
.compare .no{color:var(--muted)}
.compare-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:2px}
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
padding:20px 2px;font-weight:400;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';font-weight:200;font-size:24px;color:var(--muted);transition:transform .3s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq .a{padding:0 2px 22px;color:var(--muted);font-weight:300;font-size:15px;max-width:640px}
.xsell-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
@media(max-width:820px){.xsell-grid{grid-template-columns:1fr}}
/* sticky ATC */
.satc{position:fixed;left:0;right:0;bottom:0;background:rgba(244,240,231,.96);backdrop-filter:blur(12px);
border-top:1px solid var(--hair);z-index:60;transform:translateY(110%);transition:transform .35s;padding:10px 0}
.satc.show{transform:translateY(0)}
.satc .wrap{display:flex;align-items:center;gap:16px}
.satc img{height:44px;width:auto}
.satc .t{flex:1;min-width:0}
.satc .nm{font-weight:400;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.satc .pr{font-weight:300;font-size:12.5px;color:var(--muted)}
.satc .btn{padding:13px 22px;white-space:nowrap}
@media(max-width:560px){.satc .pr{display:none}}
/* ===== round 3: deck-fidelity ===== */
/* PDP full-bleed hero */
.ph2{position:relative;min-height:calc(100svh - 105px);display:flex;align-items:center;overflow:hidden;background:var(--acc)}
.ph2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0% 50%}
.ph2-can{position:absolute;left:24%;top:50%;height:86%;width:auto;transform:translate(-50%,-50%) rotate(0deg);
filter:drop-shadow(28px 34px 44px rgba(0,0,0,.35)) drop-shadow(8px 10px 14px rgba(0,0,0,.2));z-index:2}
.ph2-info{position:relative;z-index:3;margin-left:auto;width:min(560px,46%);color:var(--phfg,#fff);padding:60px 0}
.ph2-info .eyebrow{margin-bottom:20px;color:inherit;opacity:.9}
.ph2-info h1{font-weight:300;font-size:clamp(48px,5.6vw,84px);letter-spacing:-.015em;word-spacing:.06em;line-height:1.0;margin-bottom:18px}
.ph2-rating{font-size:14px;font-weight:300;margin-bottom:22px;opacity:.95}
.ph2-rating .stars{letter-spacing:.2em;margin-right:10px}
.ph2-note{font-weight:300;font-size:clamp(16px,1.4vw,19px);line-height:1.55;opacity:.94;max-width:440px;margin-bottom:26px}
.ph2-price{font-size:15px;margin-bottom:30px;font-weight:300}
.ph2-price b{font-weight:500;font-size:26px;margin-right:10px;letter-spacing:0}
.ph2-ctas{display:flex;flex-direction:column;gap:12px;max-width:400px}
.ph2-btn{display:block;text-align:center;padding:19px 30px;font-size:12px;font-weight:500;letter-spacing:.2em;word-spacing:.10em;
text-transform:uppercase;border-radius:2px;cursor:pointer;font-family:inherit;transition:opacity .25s;border:1px solid transparent}
.ph2-btn.solid{background:var(--phfg,#fff);color:var(--phinv,#141410)}
.ph2-btn.outline{border-color:var(--phfg,#fff);color:var(--phfg,#fff);background:transparent}
.ph2-btn:hover{opacity:.85}
.ph2-flavors{display:flex;gap:16px;margin-top:30px}
.ph2-flavors a{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:inherit;opacity:.65;padding-bottom:3px;border-bottom:1px solid transparent}
.ph2-flavors a .dot{width:9px;height:9px;border-radius:50%}
.ph2-flavors a.on{opacity:1;border-color:currentColor}
@media(max-width:900px){
.ph2{display:block;min-height:auto;background:var(--paper)}
.ph2 picture{display:block;line-height:0;font-size:0}
.ph2 picture .ph2-bg,.ph2-bg{position:relative;display:block;width:100%;height:46svh;object-fit:cover;object-position:50% 30%}
.ph2-can{left:50%;top:24svh;height:40svh;transform:translate(-50%,-50%) rotate(0deg)}
.ph2-info{width:100%;padding:18px 0 40px;color:var(--ink)}
.ph2-info h1{font-size:clamp(36px,10vw,50px);margin-bottom:8px}
.ph2-note{font-size:15px;margin-bottom:14px}
.ph2-btn.solid{background:var(--ink);color:var(--paper)}
.ph2-btn.outline{border-color:var(--ink);color:var(--ink)}
.ph2-flavors a{color:var(--ink)}
}
/* subscribe section */
.sub-sec{background:var(--paper)}
.sub-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}
@media(max-width:900px){.sub-grid{grid-template-columns:1fr}}
/* dark receipts */
.receipts-dark{background:#131311;color:var(--paper)}
.rd-grid{display:grid;grid-template-columns:.8fr 1.3fr;gap:clamp(32px,4vw,64px);align-items:start}
.rd-poster{border-radius:3px;overflow:hidden;position:sticky;top:96px}
.rd-head h2{color:var(--paper)}
.rd-head .sub{color:#A6A39C}
.rd-rows{margin-top:8px}
.rd-row{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid #2c2c28}
.rd-row:first-child{border-top:1px solid #2c2c28}
.rd-ic{width:64px;height:64px;border:1px solid #2c2c28;border-radius:3px;display:flex;align-items:center;justify-content:center}
.rd-ic img{width:34px;height:34px;object-fit:contain}
.rd-nm{font-weight:500;font-size:15.5px;letter-spacing:.02em;margin-bottom:6px}
.rd-line{font-weight:300;color:#B1AEA6;font-size:14.5px;margin-bottom:14px}
.rd-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rd-meta div span{display:block}
.rd-meta .k{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#797771;margin-bottom:4px}
.rd-meta .v{font-weight:300;font-size:13.5px}
.rd-note{margin-top:22px;font-size:12.5px;color:#797771;font-weight:300}
@media(max-width:900px){.rd-grid{grid-template-columns:1fr}.rd-poster{position:static;max-width:420px}
.rd-meta{grid-template-columns:1fr 1fr}}
/* homepage hero sizing */
.fh-canwrap{left:50%;top:45%;height:66%}
@media(max-width:820px){.fh-canwrap{top:31%;height:42%}}
/* ===== deck quiz ===== */
.quiz-page{background:var(--paper)}
.quiz-shell{padding-bottom:clamp(48px,6vw,90px)}
.quiz-card{background:transparent;border:0;max-width:900px;padding:clamp(24px,4vw,48px) 20px}
.quiz-card h1{font-weight:300;font-size:clamp(40px,5.4vw,64px)}
/* The quiz shipped on its own brighter magenta (#D91A6B), which is neither the
site's ink nor the plum on the Acai can, so the one flow a visitor is asked
to complete looked like a different brand. One token puts it back on the
system; the flavour colour still lands on the result card. */
:root{--qmag:var(--ink)}
.qdots{gap:0;margin-bottom:14px;align-items:center}
.qdots span{width:11px;height:11px;background:#D8D2C2;position:relative}
.qdots span.on{background:var(--qmag)}
.qdots span + span{margin-left:74px}
.qdots span + span:before{content:'';position:absolute;right:100%;top:50%;width:74px;height:2px;background:#D8D2C2;transform:translateY(-50%)}
.qdots span.on + span.on:before,.qdots span.on:before{background:var(--qmag)}
.qq{font-weight:400;font-size:clamp(26px,3.4vw,38px)}
.qopt{background:transparent;border:1.5px solid var(--qmag);color:var(--ink);padding:15px 30px;font-size:15px}
.qopt:hover{border-color:var(--qmag);background:var(--paper2)}
.qopt.on{background:var(--qmag);border-color:var(--qmag);color:#fff;font-weight:500;padding-right:48px;position:relative}
.qopt.on:after{content:'\2713';position:absolute;right:16px;top:50%;transform:translateY(-50%);
width:22px;height:22px;border-radius:50%;background:#fff;color:var(--qmag);font-size:12px;display:flex;align-items:center;justify-content:center}
.qnext{background:var(--qmag);border-color:var(--qmag);padding:17px 52px}
.qnext:hover{background:transparent;color:var(--qmag)}
.qresult .eyebrow{color:var(--qmag)}
.qres-ctas .qnext{background:var(--qmag);border-color:var(--qmag)}
/* routine bar */
.rbar{position:fixed;left:0;right:0;bottom:0;background:var(--qmag);color:#fff;z-index:70;
transform:translateY(110%);transition:transform .4s}
.rbar.show{transform:translateY(0)}
.rbar .wrap{display:flex;align-items:center;gap:20px;padding-top:16px;padding-bottom:16px}
.rbar img{width:58px;height:58px;object-fit:cover;border-radius:4px}
.rbar .rl{font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;opacity:.8;margin-bottom:4px}
.rbar .rt{font-weight:300;font-size:14px;max-width:420px;line-height:1.35}
.rbar .rp{margin-left:auto;font-weight:500;font-size:22px;white-space:nowrap}
.rbar .rp small{font-weight:300;font-size:12px;opacity:.85;margin-left:8px}
.rbar .rgo{background:#fff;color:var(--qmag);border-radius:999px;padding:15px 30px;font-size:11.5px;
font-weight:500;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
@media(max-width:760px){.rbar .rt{display:none}.rbar .rp{font-size:16px}.rbar .rp small{display:none}}
/* ===== half-can scrollytelling ===== */
.cut{background:#131311;color:var(--paper);position:relative;height:340svh;padding:0}
.cut-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.cut-grid{display:grid;grid-template-columns:auto minmax(0,560px);gap:clamp(40px,6vw,110px);align-items:center;width:100%;justify-content:center}
.cut-canwrap{position:relative;height:min(78svh,720px);aspect-ratio:534/1500;margin-left:clamp(0px,3vw,60px)}
.cut-img{height:100%;width:auto;display:block;clip-path:inset(0 52% 0 0);transition:clip-path 1.1s cubic-bezier(.5,.05,.2,1);
filter:drop-shadow(0 30px 44px rgba(0,0,0,.5))}
.cut-canwrap.in .cut-img{clip-path:inset(0 0 0 0)}
.cut-glow{position:absolute;left:60%;top:8%;width:220px;height:220px;transform:translate(-50%,-50%);border-radius:50%;
background:radial-gradient(circle, rgba(244,240,231,.22), transparent 65%);mix-blend-mode:screen;
transition:top .5s cubic-bezier(.3,.6,.2,1);pointer-events:none;opacity:0}
.cut-canwrap.in .cut-glow{opacity:1}
.cut-dot{position:absolute;left:60%;top:var(--dy);width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);
background:var(--paper);border:0;cursor:pointer;padding:0;opacity:0;transition:opacity .4s, box-shadow .3s}
.cut-canwrap.in .cut-dot{opacity:.55}
.cut-dot:after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--paper);opacity:0;transition:opacity .3s;
animation:none}
.cut-dot.on{opacity:1}
.cut-dot.on:after{opacity:.9;animation:cutPulse 2.2s ease-out infinite}
@keyframes cutPulse{0%{transform:scale(.7);opacity:.9}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
.cut-side{max-width:560px}
.cut-panel{margin-top:34px;border-top:1px solid #2c2c28;padding-top:26px;min-height:230px}
.cut-panel.sw{animation:cutSwap .3s ease}
@keyframes cutSwap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cut-step{font-size:11.5px;font-weight:500;letter-spacing:.26em;color:#797771;margin-bottom:16px}
.cut-step span{color:var(--paper)}
.cut-ic{width:52px;height:52px;border:1px solid #2c2c28;border-radius:3px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.cut-ic img{width:28px;height:28px;object-fit:contain}
.cut-panel h3{font-weight:400;font-size:clamp(22px,2vw,28px);letter-spacing:-.005em;margin-bottom:10px}
.cut-panel p{font-weight:300;color:#B1AEA6;font-size:15.5px;max-width:440px}
.cut-meta{display:flex;gap:28px;margin-top:18px;flex-wrap:wrap}
.cut-meta div span{display:block;font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#797771;margin-bottom:4px}
.cut-meta div b{font-weight:300;font-size:14px}
.cut-rail{display:flex;gap:8px;margin-top:30px}
.cut-rail span{height:2px;flex:1;background:#2c2c28;position:relative;overflow:hidden}
.cut-rail span:before{content:'';position:absolute;inset:0;background:var(--paper);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.cut-rail span.done:before{transform:scaleX(1)}
@media(max-width:900px){
.cut{height:auto}
.cut-sticky{position:relative;height:auto;padding:70px 0 60px}
.cut-grid{grid-template-columns:1fr;gap:36px;justify-items:center}
.cut-canwrap{height:min(64svh,560px);margin-left:0}
.cut-side{max-width:100%}
.cut-panel{min-height:250px}
}
@media(prefers-reduced-motion:reduce){
.cut{height:auto}.cut-sticky{position:relative;height:auto;padding:70px 0}
.cut-img{clip-path:none;transition:none}
.cut-dot.on:after{animation:none;opacity:.9}
.cut-panel.sw{animation:none}
}
/* ===== purchase flow on the hero ===== */
.ph2-info .opts{margin:0 0 14px;gap:9px}
.ph2 .opt{background:transparent;border:1px solid rgba(255,255,255,.35);color:inherit;
padding:14px 18px;transition:background .25s,border-color .25s;box-shadow:none}
.ph2 .opt .name{display:inline-flex;align-items:center;gap:10px}
.ph2 .opt .name:before{content:'';width:13px;height:13px;border-radius:50%;border:1.5px solid currentColor;
flex:none;box-sizing:border-box;transition:border-width .2s}
.ph2 .opt.on .name:before{border-width:4.5px}
.ph2 .opt .meta{color:inherit;opacity:.7;font-size:12.5px}
.ph2 .opt .price{color:inherit}
.ph2 .opt .price s{color:inherit;opacity:.55}
.ph2 .opt .save{background:transparent;border:1px solid currentColor;color:inherit;padding:2px 8px;white-space:nowrap}
.ph2 .opt.on{background:rgba(255,255,255,.10);border-color:#E8E8E7;box-shadow:none}
.ph2 .opt select{-webkit-appearance:none;appearance:none;background:transparent;border:1px solid rgba(255,255,255,.45);color:inherit;margin-top:10px;padding:9px 34px 9px 10px;border-radius:2px;width:100%;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='white' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.ph2 .opt select option{color:#141410;background:#fff}
.ph2 .qty-atc{margin:0 0 16px}
.ph2 .qty{background:transparent;border:1px solid rgba(255,255,255,.45)}
.ph2 .qty button,.ph2 .qty input{color:inherit}
.ph2 .fit-link{display:inline-block;font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
color:inherit;opacity:.85;border-bottom:1px solid currentColor;padding-bottom:2px;margin-bottom:6px}
.ph2 .fit-link:hover{opacity:1}
.ph2-info .ph2-note{margin-bottom:18px}
.ph2-info h1{margin-bottom:12px;font-size:clamp(44px,4.8vw,68px)}
.ph2-rating{margin-bottom:14px}
.ph2-flavors{margin-top:22px}
@media(max-width:900px){
.ph2 .opt{border-color:#B1AEA6}
.ph2 .opt.on{background:rgba(20,20,16,.05);border-color:var(--ink)}
.ph2 .opt select{border-color:#9A9891;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23141410' stroke-width='1.4'/%3E%3C/svg%3E")}
.ph2 .qty{border-color:#9A9891}
.ph2 .ph2-btn.solid{background:var(--ink);color:var(--paper)}
}
/* ===== half-can v2: accordion list ===== */
.cut-list{margin-top:26px;border-top:1px solid #2c2c28}
.cut-row{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #2c2c28;
color:var(--paper);padding:0;cursor:pointer;font-family:inherit}
.cr-head{display:flex;align-items:center;gap:14px;padding:13px 0}
.cr-num{font-size:11.5px;font-weight:500;letter-spacing:.18em;color:#8F8D86;width:22px}
.cr-ic{width:52px;height:52px;border:0;flex:none;display:flex;align-items:center;justify-content:center;transition:transform .3s}
.cr-ic img{width:100%;height:100%;object-fit:contain;display:block}
.cr-nm{font-weight:300;font-size:15.5px;opacity:.7;transition:opacity .3s;letter-spacing:.01em}
.cr-tag{margin-left:auto;font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
color:#6E6C66;white-space:nowrap;padding-left:12px}
.cr-body{display:block;max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.3,.6,.2,1)}
.cr-inner{display:block;padding:2px 0 18px 80px}
.cr-inner p{font-weight:300;color:#B1AEA6;font-size:14px;max-width:420px;margin-bottom:12px}
.cut-row.on{border-bottom-color:#6E6C66}
.cut-row.on .cr-nm{opacity:1;font-weight:400}
.cut-row.on .cr-ic{transform:scale(1.06)}
.cut-row.on .cr-num{color:var(--paper)}
.cut-row.on .cr-body{max-height:180px}
.cut-row:hover .cr-nm{opacity:1}
.cut-meta{display:flex;gap:24px;flex-wrap:wrap}
.cut-meta div .k{display:block;font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#6E6C66;margin-bottom:3px}
.cut-meta div .v{display:block;font-weight:300;font-size:13px}
@media(max-width:900px){
.cr-inner{padding-left:0}
.cr-tag{display:block;margin:4px 0 0 0;width:100%;order:9}
.cut-list{margin-top:20px}
}
/* ===== round 7: photography + spacing rhythm ===== */
:root{
--s1:8px; --s2:16px; --s3:24px; --s4:36px; --s5:56px; --s6:88px; --s7:120px;
}
/* one vertical rhythm for every section */
section{padding-top:clamp(64px,8vw,var(--s7));padding-bottom:clamp(64px,8vw,var(--s7))}
.sec-head{margin-bottom:clamp(32px,4.5vw,var(--s6))}
.sec-head .eyebrow{margin-bottom:var(--s2)}
.sec-head .sub{margin-top:var(--s2)}
/* occasion cards — portrait photography, consistent gutters */
.occ-grid{gap:clamp(14px,1.8vw,26px)}
.occ-card .ph{aspect-ratio:2/3;border-radius:3px;background:var(--paper2)}
.occ-card .cap{padding-top:var(--s3)}
.occ-card .cap .line{font-size:19px;margin:0 0 10px;font-weight:300;letter-spacing:-.005em}
@media(max-width:820px){.occ-grid{max-width:420px;margin:0 auto}}
/* product cards — equal rhythm */
.pcard .body{padding:var(--s3) var(--s3) calc(var(--s3) + 4px);gap:10px}
.shop-grid{gap:clamp(14px,1.8vw,26px)}
/* ingredient band */
.ingband{position:relative;padding:0;background:#000;overflow:hidden;line-height:0}
.ingband picture{display:block}
.ingband img{display:block;width:100%;height:clamp(320px,34vw,460px);
object-fit:cover;object-position:left center}
/* copy sits in the black column built into the artwork — no scrim, pure #000 behind */
.ingband-head{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none}
.ingband-copy{pointer-events:auto;margin:0;line-height:normal;
padding-left:clamp(20px,4vw,56px);max-width:min(37vw,520px);color:var(--paper);
box-sizing:content-box}
.ingband-copy .eyebrow{color:#8F8D86;display:block;margin-bottom:18px}
.ingband-copy p{font-weight:200;font-size:clamp(25px,2.65vw,42px);line-height:1.14;
letter-spacing:-.018em;margin:0;color:var(--paper);max-width:17ch;text-wrap:balance}
@media(max-width:820px){
.ingband{padding:clamp(40px,7vw,64px) 0 0}
.ingband img{height:clamp(200px,42vw,300px);object-position:center}
.ingband-head{position:static;display:block;padding-bottom:clamp(24px,4vw,36px)}
.ingband-copy{max-width:none;padding-inline:clamp(20px,4vw,56px)}
.ingband-copy p{font-size:clamp(22px,6vw,30px);max-width:16ch}
}
/* story section — wide lineup art */
.story .split{align-items:center}
.story .split .ph img{border-radius:3px}
/* PDP occasion band now shows ingredient art */
.occ-band .split .ph img{border-radius:3px}
/* tighten repeated blocks so every section breathes the same */
.rec-grid,.tl-grid,.xsell-grid{gap:clamp(12px,1.4vw,18px)}
.compare-wrap{margin-top:0}
.faq{margin-top:0}
.rev-strip{padding:var(--s4) 0}
.foot-grid{margin-bottom:clamp(36px,5vw,var(--s5))}
/* ===== round 8: product gallery + PDP polish ===== */
.gx{background:var(--paper);padding-top:clamp(28px,3.5vw,56px);padding-bottom:clamp(40px,5vw,72px)}
.gx-main{background:#fff;border:1px solid var(--hair);border-radius:3px;overflow:hidden;
aspect-ratio:1/1;width:100%;max-width:620px;margin:0 auto;
display:flex;align-items:center;justify-content:center}
.gx-main img{width:100%;height:100%;object-fit:cover;transition:opacity .16s ease}
.gx-main.contain img{object-fit:contain;padding:5% 0}
.gx-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1vw,14px);
margin:clamp(8px,1vw,14px) auto 0;width:100%;max-width:620px}
.gx-t{border:1px solid var(--hair);background:#fff;border-radius:3px;overflow:hidden;cursor:pointer;
aspect-ratio:1/1;padding:0;transition:border-color .2s}
.gx-t img{width:100%;height:100%;object-fit:cover;display:block}
.gx-t.contain img{object-fit:contain;padding:12%}
.gx-t:hover{border-color:var(--muted)}
.gx-t.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
@media(max-width:820px){.gx-main{aspect-ratio:1/1;max-width:none}.gx-strip{max-width:none}}
/* hero: more breathing room around the can */
.ph2-can{height:78%}
@media(max-width:900px){.ph2-can{height:40svh;top:23svh}}
/* occasion band now carries the lifestyle photograph */
.occ-band .split .ph{border-radius:3px;overflow:hidden}
.occ-band .split .ph img{width:100%;display:block}
/* receipts: tighter rhythm */
.rd-row{padding:20px 0}
.rd-line{margin-bottom:10px}
.rd-meta{gap:10px}
@media(max-width:900px){
.rd-row{grid-template-columns:48px 1fr;gap:14px}
.rd-ic{width:48px;height:48px}
.rd-ic img{width:26px;height:26px}
}
/* ===== round 9: real ingredient photos, reviews, motion ===== */
.rd-rows{margin-top:6px}
.rd-row{display:grid;grid-template-columns:104px 1fr;gap:26px;align-items:start;
padding:26px 0;border-bottom:1px solid #2c2c28}
.rd-row:first-child{border-top:1px solid #2c2c28}
.rd-ph{width:104px;height:104px;flex:none;display:flex;align-items:center;justify-content:center}
.rd-ph img{width:100%;height:100%;object-fit:contain;display:block;
transition:transform .6s cubic-bezier(.2,.6,.25,1)}
.rd-row:hover .rd-ph img{transform:scale(1.07)}
.rd-nm{font-weight:500;font-size:16px;letter-spacing:.01em;margin-bottom:6px}
.rd-line{font-weight:300;color:#B1AEA6;font-size:14.5px;margin-bottom:14px;max-width:620px}
.rd-meta{display:grid;grid-template-columns:repeat(3,minmax(0,190px));gap:14px}
@media(max-width:900px){
.rd-row{grid-template-columns:78px 1fr;gap:16px;padding:20px 0}
.rd-ph{width:78px;height:78px}
.rd-meta{grid-template-columns:1fr 1fr}
}
/* reviews */
.rvw{background:var(--paper2)}
.rvw-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.rvw-nums{margin-top:26px}
.rvw-big{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.rvw-big .stars{letter-spacing:.22em;font-size:20px}
.rvw-big b{font-weight:200;font-size:clamp(46px,6vw,76px);letter-spacing:-.02em;line-height:1}
.rvw-big small{color:var(--muted);font-weight:300;font-size:15px}
.rvw-sub{margin-top:12px;color:var(--muted);font-weight:300;font-size:16px}
.rvw-sub b{color:var(--ink);font-weight:400}
.rvw-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.rvw-tags span{border:1px solid var(--hair);border-radius:999px;padding:8px 16px;font-size:12.5px;
font-weight:300;background:var(--paper)}
@media(max-width:900px){.rvw-grid{grid-template-columns:1fr;gap:28px}}
/* hero rating -> anchor link */
.ph2-rating a{color:inherit;border-bottom:1px solid currentColor;padding-bottom:1px}
/* ===== motion ===== */
.ph2-can{animation:pdpFloat 7s ease-in-out infinite}
@keyframes pdpFloat{0%{transform:translate(-50%,-50%) rotate(0deg) translateY(-6px)}
50%{transform:translate(-50%,-50%) rotate(-7deg) translateY(6px)}
100%{transform:translate(-50%,-50%) rotate(0deg) translateY(-6px)}}
@media(max-width:900px){
.ph2-can{animation:pdpFloatM 7s ease-in-out infinite}
@keyframes pdpFloatM{0%{transform:translate(-50%,-50%) rotate(0deg) translateY(-5px)}
50%{transform:translate(-50%,-50%) rotate(-7deg) translateY(5px)}
100%{transform:translate(-50%,-50%) rotate(0deg) translateY(-5px)}}
}
/* staggered reveals inside a group */
.rd-row.rv{transition-delay:var(--d,0s)}
.gx-t{transition:border-color .2s, transform .3s}
.gx-t:hover{transform:translateY(-2px)}
.gx-main img{transition:opacity .18s ease, transform .8s cubic-bezier(.2,.6,.25,1)}
.gx-main:hover img{transform:scale(1.02)}
.co img{transition:transform .5s cubic-bezier(.2,.6,.25,1)}
.co:hover img{transform:translateY(-3px) scale(1.05)}
.tl:hover{border-color:var(--muted)}
.tl{transition:border-color .3s}
.pcard{transition:transform .4s cubic-bezier(.2,.6,.25,1)}
.pcard:hover{transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){
.ph2-can{animation:none}
.rd-ph img,.gx-main img,.co img,.pcard{transition:none}
}
/* ===== round 9b: text-safe flavor accents + photo icon tiles ===== */
:root{--acc-text:var(--acc)}
.cut-ic{width:56px;height:56px;border:0;border-radius:3px;overflow:hidden;background:#0d0d0c}
.cut-ic img{width:100%;height:100%;object-fit:cover}
.tl .n{color:var(--acc-text)}
.pcard .occ{color:var(--acc-text) !important}
.ph2-flavors a .dot{box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.occ-band .eyebrow{color:var(--acc-text) !important}
/* ============ REVIEWS v2 — front and centre ============ */
.rvw2{padding:clamp(56px,7vw,104px) 0;background:var(--paper2,#F4F0E7);border-top:1px solid rgba(20,20,16,.08)}
.rvw2-head{margin-bottom:clamp(28px,3.5vw,44px)}
.rvw2-head .eyebrow{color:var(--acc)}
.rvw2-grid{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:clamp(24px,4vw,64px);align-items:start}
@media(max-width:900px){.rvw2-grid{grid-template-columns:1fr;gap:28px}}
.rvw2-score{background:#fff;border-radius:4px;padding:clamp(24px,3vw,36px);border:1px solid rgba(20,20,16,.09)}
.rvs-top{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.rvs-num{font-size:clamp(52px,7vw,76px);font-weight:200;line-height:.9;letter-spacing:-.03em;
font-variant-numeric:tabular-nums;color:var(--ink,#141410)}
.stars{letter-spacing:.06em;color:var(--acc)}
.stars.lg{font-size:20px;display:block;margin-bottom:6px}
.rvs-meta{font-size:14px;color:var(--muted,#6b6b62);line-height:1.5}
.rvs-meta b{color:var(--ink,#141410);font-weight:500}
.rvs-bars{display:flex;flex-direction:column;gap:9px;margin:22px 0 18px}
.rvb-row{display:grid;grid-template-columns:30px 1fr 42px;align-items:center;gap:12px;font-size:13px;color:var(--muted,#6b6b62)}
.rvb-n{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.rvb-track{height:6px;border-radius:99px;background:rgba(20,20,16,.09);overflow:hidden}
.rvb-track i{display:block;height:100%;width:0;border-radius:99px;background:var(--acc);
transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.rv.is-in .rvb-track i,.rvw2-score.is-in .rvb-track i{width:var(--w)}
.rvb-c{text-align:right;font-variant-numeric:tabular-nums}
.rvs-src{font-size:12px;line-height:1.55;color:var(--muted,#6b6b62);margin:0;padding-top:16px;
border-top:1px solid rgba(20,20,16,.08)}
.rvw2-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:600px){
.rvw2-list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;
overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
margin-inline:calc(var(--gut,20px)*-1);padding-inline:var(--gut,20px);
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rvw2-list::-webkit-scrollbar{display:none}
.rvc{scroll-snap-align:start}
}
.rvc{background:#fff;border:1px solid rgba(20,20,16,.09);border-radius:4px;
padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:14px;
transition:transform .3s cubic-bezier(.2,.6,.25,1),box-shadow .3s}
.rvc:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(20,20,16,.07)}
.rvc-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rvc-src{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#6b6b62)}
.rvc-body{margin:0;font-size:clamp(15px,1.5vw,17px);line-height:1.55;color:var(--ink,#141410)}
.rvc-body b{font-weight:500}
.rvc-by{margin-top:auto;font-size:13px;color:var(--muted,#6b6b62);display:flex;flex-direction:column;gap:2px}
.rvc-by b{color:var(--ink,#141410);font-weight:500}
.rvc-alt{background:var(--acc);border-color:transparent}
.rvc-alt,.rvc-alt .rvc-body,.rvc-alt .rvc-by b{color:#fff}
.rvc-alt .rvc-src,.rvc-alt .rvc-by{color:#C4C4C3}
.rvc-alt .lnk{color:#fff;text-decoration-color:#8A8A88}
.rvc-cta{background:transparent;border-style:dashed}
.lnk{color:var(--acc);text-underline-offset:3px;text-decoration-thickness:1px}
/* ============ scroll reveal ============ */
.rv{opacity:0;transform:translateY(18px);
transition:opacity .7s cubic-bezier(.2,.6,.25,1),transform .7s cubic-bezier(.2,.6,.25,1)}
.rv.is-in{opacity:1;transform:none}
.rvw2-list .rv:nth-child(2){transition-delay:.08s}
.rvw2-list .rv:nth-child(3){transition-delay:.16s}
.rvw2-list .rv:nth-child(4){transition-delay:.24s}
.rd-row.rv:nth-child(2){transition-delay:.06s}
.rd-row.rv:nth-child(3){transition-delay:.12s}
.rd-row.rv:nth-child(4){transition-delay:.18s}
.rd-row.rv:nth-child(5){transition-delay:.24s}
.rd-row.rv:nth-child(6){transition-delay:.30s}
@media(prefers-reduced-motion:reduce){
.rv{opacity:1;transform:none;transition:none}
.rvb-track i{transition:none;width:var(--w)}
.rvc:hover{transform:none}
}
/* ============ ingredient band on PDPs ============ */
.ingband + .receipts-dark{padding-top:clamp(48px,6vw,80px)}
/* ============ ingredient rows: photo scales in ============ */
.rd-ph img{transform:scale(.88);opacity:.001;
transition:transform .8s cubic-bezier(.2,.6,.25,1),opacity .6s ease}
.rd-row.is-in .rd-ph img{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){.rd-ph img{transform:none;opacity:1;transition:none}}
/* sticky ATC: iOS safe area + never overlap the buy module */
.satc{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.satc img{border-radius:2px}
@media(max-width:560px){.satc .btn{padding:14px 20px;font-size:13px}}
/* reviews: no dead cell, columns match height */
@media(min-width:601px){
.rvw2-list .rvc-cta{grid-column:1/-1;flex-direction:row;align-items:center;gap:22px}
.rvw2-list .rvc-cta .rvc-body{flex:1;margin:0}
.rvw2-list .rvc-cta .rvc-top{order:-1;flex:none}
.rvw2-list .rvc-cta .rvc-by{margin:0;flex:none}
}
@media(min-width:901px){
.rvw2-grid{align-items:stretch}
.rvw2-score{display:flex;flex-direction:column}
.rvs-bars{margin-top:auto}
}
/* PDP hero now uses real brand photography that already contains the can:
no overlay product, and the plate gets a slow ken-burns so it breathes */
@keyframes plateDrift{from{transform:scale(1.04)}to{transform:scale(1.11)}}
/* ============ INGREDIENTS PAGE ============ */
.ing-hero{position:relative;min-height:clamp(440px,62vh,660px);display:flex;align-items:flex-end;
overflow:hidden;background:#131311}
.ing-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
animation:plateDrift 30s ease-in-out infinite alternate}
.ing-hero-in{position:relative;z-index:2;padding-block:clamp(40px,6vw,84px);color:var(--paper,#F4F0E7);
max-width:min(100%,820px)}
.ing-hero::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(to top,rgba(19,19,17,.90) 0%,rgba(19,19,17,.62) 46%,rgba(19,19,17,.10) 100%)}
.ing-hero .eyebrow{color:#A6A39C}
.ing-h1{font-weight:200;font-size:clamp(38px,6.4vw,84px);line-height:1.02;letter-spacing:-.028em;
margin:.28em 0 .38em;color:var(--paper,#F4F0E7)}
.ing-lede{font-weight:300;font-size:clamp(16px,1.8vw,21px);line-height:1.6;max-width:60ch;
color:#D5D1C9;margin:0}
.ladder{background:#131311;padding:0 0 clamp(34px,4.5vw,60px)}
.ladder-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ladder-list li{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.10em;
text-transform:uppercase;color:#B5B2AB;
border:1px solid rgba(244,240,231,.22);border-radius:99px;padding:9px 16px}
.ladder-list li span{font-variant-numeric:tabular-nums;color:#BCB9B1}
.whyings{background:var(--paper,#F4F0E7);padding:clamp(56px,7vw,110px) 0}
.wi{--wi-ic:clamp(112px,13.6vw,212px);--wi-gap:clamp(24px,3.6vw,56px);
display:grid;grid-template-columns:var(--wi-ic) minmax(0,1fr);gap:var(--wi-gap);
align-items:center;padding:var(--wi-gap) 0;border-top:1px solid rgba(20,20,16,.11)}
.wi:first-child{border-top:0;padding-top:0}
.wi-ph{width:var(--wi-ic);height:var(--wi-ic);display:flex;align-items:center;justify-content:center}
.wi-ph img{width:100%;height:100%;object-fit:contain;display:block;
transition:transform .8s cubic-bezier(.2,.6,.25,1)}
.wi:hover .wi-ph img{transform:scale(1.07) rotate(-2deg)}
.wi-tag{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--plum,#B4185F);margin-bottom:10px}
.wi-nm{font-weight:300;font-size:clamp(22px,2.7vw,34px);line-height:1.15;letter-spacing:-.018em;margin:0 0 .38em}
.wi-hook{font-weight:400;font-size:clamp(16px,1.7vw,20px);line-height:1.45;margin:0 0 .6em;color:var(--ink,#141410)}
.wi-body{font-weight:300;font-size:clamp(15px,1.55vw,17px);line-height:1.62;color:var(--muted,#6b6b62);
max-width:64ch;margin:0}
@media(max-width:640px){
.wi{--wi-ic:98px;--wi-gap:22px;align-items:start}
}
.pillars{background:#131311;padding:clamp(50px,6.5vw,96px) 0;color:var(--paper,#F4F0E7)}
.pil-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
@media(max-width:760px){.pil-grid{grid-template-columns:1fr;gap:32px}}
.pil-nm{font-weight:300;font-size:clamp(21px,2.5vw,30px);line-height:1.16;letter-spacing:-.018em;
margin:0 0 .4em;color:var(--paper,#F4F0E7)}
.pil-hook{font-weight:400;font-size:clamp(15px,1.6vw,18px);line-height:1.45;margin:0 0 .55em;
color:#E2DED6}
.pil-body{font-weight:300;font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.62;
color:#9F9C95;margin:0;max-width:52ch}
.ing-close{background:var(--paper,#F4F0E7);padding:clamp(56px,7.5vw,120px) 0;text-align:center}
.ing-close-big{font-weight:200;font-size:clamp(26px,4.2vw,54px);line-height:1.12;letter-spacing:-.024em;
max-width:22ch;margin:0 auto .5em;color:var(--ink,#141410)}
.ing-close-sub{font-weight:300;font-size:clamp(15px,1.7vw,19px);line-height:1.6;color:var(--muted,#6b6b62);
max-width:56ch;margin:0 auto}
.ing-close-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:clamp(26px,3.4vw,42px)}
/* homepage ingredient module: hook line + CTA */
.cr-hook{font-weight:400;color:var(--paper,#F4F0E7);margin:0 0 .5em!important}
.cut-cta{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(22px,2.8vw,34px);
font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--paper,#F4F0E7);
border-bottom:1px solid rgba(244,240,231,.35);padding-bottom:7px;
transition:gap .3s cubic-bezier(.2,.6,.25,1),border-color .3s}
.cut-cta:hover{gap:16px;border-bottom-color:var(--paper,#F4F0E7)}
/* ingredients-page CTA on the dark PDP section */
.rd-cta{margin-bottom:26px}
/* hero band is a wide crop: keep it readable and not too tall */
.ing-hero{align-items:center}
.ing-hero-bg{object-position:50% 42%}
.ing-hero::after{background:linear-gradient(to right,rgba(19,19,17,.88) 0%,rgba(19,19,17,.72) 52%,rgba(19,19,17,.34) 100%)}
@media(max-width:760px){
.ing-hero::after{background:linear-gradient(to top,rgba(19,19,17,.92) 0%,rgba(19,19,17,.78) 50%,rgba(19,19,17,.45) 100%)}
.ing-hero{align-items:flex-end}
}
/* the benefit label is approved copy — it ships on every breakpoint */
@media(max-width:760px){
.cr-head{flex-wrap:wrap;align-items:flex-start}
.cr-nm{flex:1 1 auto}
.cr-tag{display:block!important;flex:0 0 100%;margin:6px 0 0 calc(24px + 52px + 14px);
text-align:left;font-size:11.5px;letter-spacing:.16em;opacity:.85}
}
/* Mobile hero: the can sits above the copy block so "Find Balance." always
lands on clean flavor ground — no scrim, no type over the product. */
@media(max-width:820px){
.fh-canwrap{top:23%;height:36%}
.fh-note{margin:12px 0 20px}
.fh-foot{padding-bottom:clamp(24px,3.4vh,44px)}
}
@media(max-width:820px) and (max-height:700px){
.fh-canwrap{top:21%;height:31%}
.fh-note{display:none}
}
/* ============ HOMEPAGE REVIEWS ============ */
.hrev{background:var(--paper2,#F4F0E7);padding:clamp(56px,7vw,104px) 0;
border-top:1px solid rgba(20,20,16,.08)}
.hrev-head{margin-bottom:clamp(28px,3.5vw,44px)}
.hrev-head .eyebrow{color:var(--plum,#B4185F)}
.hrev-grid{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);
gap:clamp(20px,3.5vw,56px);align-items:stretch}
@media(max-width:900px){.hrev-grid{grid-template-columns:1fr;gap:24px}}
.hrev-score{background:#fff;border:1px solid rgba(20,20,16,.09);border-radius:4px;
padding:clamp(24px,3vw,36px);display:flex;flex-direction:column}
.hrev-score .rvs-num{font-size:clamp(56px,8vw,84px);font-weight:200;line-height:.9;
letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink,#141410)}
.hrev-score .stars{color:var(--plum,#B4185F);font-size:20px;display:block;margin:12px 0 16px;letter-spacing:.06em}
.hrev-score .rvs-meta{font-size:14px;color:var(--muted,#6b6b62);line-height:1.6}
.hrev-score .rvs-meta b{color:var(--ink,#141410);font-weight:500}
.hrev-score .rvs-src{font-size:12px;line-height:1.55;color:var(--muted,#6b6b62);
margin:auto 0 0;padding-top:20px;border-top:1px solid rgba(20,20,16,.08)}
.hrev-flavs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
@media(max-width:820px){
.hrev-flavs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:74%;
overflow-x:auto;scroll-snap-type:x mandatory;
margin-inline:calc(clamp(20px,4vw,56px)*-1);padding-inline:clamp(20px,4vw,56px);
scrollbar-width:none}
.hrev-flavs::-webkit-scrollbar{display:none}
.rvs-flav{scroll-snap-align:start}
}
.rvs-flav{background:#fff;border:1px solid rgba(20,20,16,.09);border-radius:4px;
padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column;gap:9px;
text-decoration:none;color:inherit;
transition:transform .3s cubic-bezier(.2,.6,.25,1),box-shadow .3s,border-color .3s}
.rvs-flav:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(20,20,16,.08);border-color:var(--acc)}
.rvs-dot{width:9px;height:9px;border-radius:50%;background:var(--acc);display:block}
.rvs-fn{font-size:clamp(15px,1.5vw,17px);font-weight:400;line-height:1.25;color:var(--ink,#141410)}
.rvs-fr{font-size:13px;color:var(--muted,#6b6b62);font-variant-numeric:tabular-nums}
.rvs-fr b{color:var(--ink,#141410);font-weight:500;font-size:15px}
.rvs-fb{display:block;height:5px;border-radius:99px;background:rgba(20,20,16,.09);
overflow:hidden;margin-top:4px}
.rvs-fb i{display:block;height:100%;width:0;border-radius:99px;background:var(--acc);
transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.is-in .rvs-fb i,.rvs-flav:hover .rvs-fb i{width:var(--w)}
.rvs-fp{font-size:12px;color:var(--muted,#6b6b62)}
@media(prefers-reduced-motion:reduce){
.rvs-fb i{transition:none;width:var(--w)}
.rvs-flav:hover{transform:none}
}
.rvs-stars{color:var(--acc);font-size:13px;letter-spacing:.06em;line-height:1}
.rvs-go{margin-top:auto;padding-top:16px;font-size:11.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--acc);display:flex;align-items:center;gap:8px;
border-top:1px solid rgba(20,20,16,.08)}
.rvs-go em{font-style:normal;transition:transform .3s cubic-bezier(.2,.6,.25,1)}
.rvs-flav:hover .rvs-go em{transform:translateX(5px)}
@media(prefers-reduced-motion:reduce){.rvs-flav:hover .rvs-go em{transform:none}}
/* ============ RITUAL BAND — live quiz entry ============ */
.ritual-band{background:var(--ink);color:var(--paper);text-align:left;
padding:clamp(52px,6.5vw,96px) 0}
.rb-grid{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);
gap:clamp(28px,5vw,80px);align-items:center}
@media(max-width:900px){.rb-grid{grid-template-columns:1fr;gap:32px}}
.ritual-band .eyebrow{color:#8F8D86;margin-bottom:16px}
.ritual-band h2{color:var(--paper);margin:0}
.ritual-band .sub{color:#B1AEA6;max-width:46ch;margin:16px 0 0}
.rb-q{font-weight:300;font-size:clamp(17px,1.7vw,21px);line-height:1.35;
color:var(--paper);margin-bottom:clamp(16px,2vw,22px);max-width:26ch}
.rb-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(max-width:520px){.rb-opts{grid-template-columns:1fr}}
.rb-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:16px 20px;border:1px solid rgba(244,240,231,.22);border-radius:3px;
color:var(--paper);text-decoration:none;font-size:15px;font-weight:300;
transition:background .25s,border-color .25s,transform .25s cubic-bezier(.2,.6,.25,1)}
.rb-opt::after{content:"→";opacity:0;transform:translateX(-6px);
transition:opacity .25s,transform .25s cubic-bezier(.2,.6,.25,1)}
.rb-opt:hover{background:rgba(244,240,231,.07);border-color:var(--paper);transform:translateX(3px)}
.rb-opt:hover::after{opacity:.75;transform:none}
.rb-opt:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.rb-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
flex-wrap:wrap;margin-top:clamp(16px,2vw,22px);
font-size:12px;letter-spacing:.06em;color:#84827C}
.rb-skip{color:#C7C4BC;text-transform:uppercase;letter-spacing:.13em;
font-size:11.5px;display:inline-flex;align-items:center;gap:8px;
border-bottom:1px solid rgba(244,240,231,.3);padding-bottom:5px}
.rb-skip em{font-style:normal;transition:transform .3s cubic-bezier(.2,.6,.25,1)}
.rb-skip:hover{border-bottom-color:var(--paper);color:var(--paper)}
.rb-skip:hover em{transform:translateX(5px)}
@media(prefers-reduced-motion:reduce){
.rb-opt:hover,.rb-skip:hover em{transform:none}
}
/* product card: person at rest, flavor flat-lay on hover */
#shop{padding-top:clamp(56px,7vw,104px)}
.pcard .ph{position:relative}
.pcard .ph img{position:absolute;inset:0;transition:transform .6s cubic-bezier(.2,.6,.25,1),opacity .45s ease}
.pcard .ph .ph-b{opacity:0}
@media(hover:hover){
.pcard:hover .ph .ph-b{opacity:1;transform:scale(1.03)}
.pcard:hover .ph .ph-a{opacity:0;transform:scale(1.03)}
}
.pcard:focus-within .ph .ph-b{opacity:1}
.pcard:focus-within .ph .ph-a{opacity:0}
@media(prefers-reduced-motion:reduce){
.pcard .ph img{transition:opacity .2s ease}
.pcard:hover .ph img{transform:none}
}
/* product card: taller frame so the full ingredient row above each person shows,
person at rest, flavor flat-lay on hover */
#shop{padding-top:clamp(56px,7vw,104px)}
.pcard .ph{position:relative;aspect-ratio:2/3;background:var(--paper2)}
.pcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:transform .6s cubic-bezier(.2,.6,.25,1),opacity .45s ease}
.pcard .ph .ph-b{opacity:0}
@media(hover:hover){
.pcard:hover .ph .ph-b{opacity:1;transform:scale(1.03)}
.pcard:hover .ph .ph-a{opacity:0;transform:scale(1.03)}
}
.pcard:focus-within .ph .ph-b{opacity:1}
.pcard:focus-within .ph .ph-a{opacity:0}
@media(prefers-reduced-motion:reduce){
.pcard .ph img{transition:opacity .2s ease}
.pcard:hover .ph img{transform:none}
}
/* ============ COMMUNITY WALL (UGC / Instagram) ============ */
.ugc{background:var(--ink);color:var(--paper);padding:clamp(64px,8vw,120px) 0 clamp(56px,7vw,104px);overflow:hidden}
.ug-head{max-width:900px;margin-bottom:clamp(34px,4.5vw,56px)}
.ug-head .eyebrow{color:#9A9891;margin-bottom:18px}
.ug-h{font-weight:200;font-size:clamp(40px,7.4vw,104px);line-height:.98;letter-spacing:-.024em;
word-spacing:.05em;color:var(--paper)}
.ug-sub{margin-top:20px;color:#B5B2AB;font-weight:300;
font-size:clamp(16px,1.6vw,21px);max-width:44ch}
.ug-sub strong{color:var(--paper);font-weight:400}
.ug-wall{display:grid;gap:clamp(12px,1.4vw,20px)}
.ug-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ug-track{display:flex;gap:clamp(12px,1.4vw,20px);width:max-content;
animation:ugscroll 64s linear infinite;will-change:transform}
.ug-row[data-dir="b"] .ug-track{animation-duration:78s;animation-direction:reverse}
.ug-row:hover .ug-track,.ug-row:focus-within .ug-track{animation-play-state:paused}
@keyframes ugscroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.ug-tile{position:relative;flex:0 0 auto;width:clamp(200px,20vw,290px);aspect-ratio:4/5;
overflow:hidden;border-radius:3px;background:#26241e;display:block}
.ug-tile img{width:100%;height:100%;object-fit:cover;
transition:transform .7s cubic-bezier(.2,.6,.25,1),filter .5s ease}
.ug-ig{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;
display:grid;place-items:center;color:var(--paper);
background:rgba(20,20,16,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
@media(hover:hover){
.ug-tile:hover img{transform:scale(1.055)}
.ug-tile:hover .ug-ig{opacity:1;transform:translateY(0)}
}
.ug-tile:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.ug-tile:focus-visible .ug-ig{opacity:1;transform:translateY(0)}
.ug-foot{margin-top:clamp(32px,4vw,52px)}
.btn.ug-cta{border-color:#72706A;color:var(--paper);background:transparent;
min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.btn.ug-cta:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
@media(max-width:820px){
.ugc{padding:clamp(56px,10vw,80px) 0 clamp(48px,8vw,72px)}
.ug-h{font-size:clamp(38px,10.4vw,58px)}
.ug-sub{font-size:16.5px;margin-top:16px}
.ug-tile{width:min(62vw,300px)}
.ug-wall{gap:10px}
.ug-track{gap:10px}
.ug-row{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
mask-image:linear-gradient(90deg,#000 88%,transparent)}
.ug-foot .ug-cta{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
.ug-track{animation:none}
.ug-row{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ug-row::-webkit-scrollbar{display:none}
}
/* ============ STORE LOCATOR ============ */
.fl-hero{padding:clamp(56px,7vw,104px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--hair)}
.fl-hero .eyebrow{color:var(--muted);margin-bottom:18px}
.fl-h{font-weight:200;font-size:clamp(44px,8vw,104px);line-height:.98;letter-spacing:-.024em;word-spacing:.05em}
.fl-sub{margin-top:22px;max-width:56ch;color:var(--muted);font-weight:300;font-size:clamp(16.5px,1.6vw,20px)}
.fl-form{margin-top:clamp(30px,3.6vw,44px);max-width:560px}
.fl-lbl{display:block;font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
color:var(--muted);margin-bottom:10px}
.fl-inrow{display:flex;gap:10px}
.fl-inp{flex:1 1 auto;min-width:0;font-family:inherit;font-size:17px;font-weight:400;color:var(--ink);
background:#fff;border:1px solid var(--hair);border-radius:2px;padding:0 18px;height:56px;
letter-spacing:.04em;transition:border-color .2s,box-shadow .2s}
.fl-inp::placeholder{color:#A8A294}
.fl-inp:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,20,16,.09)}
.fl-inp[aria-invalid="true"]{border-color:var(--plum);box-shadow:0 0 0 3px rgba(180,24,95,.12)}
.btn.fl-go{height:56px;padding:0 26px;white-space:nowrap;flex:0 0 auto}
.fl-err{margin-top:10px;font-size:13.5px;color:var(--plum);font-weight:400}
.fl-res{padding:clamp(52px,6.5vw,96px) 0}
.fl-reshead{margin-bottom:clamp(30px,4vw,52px)}
.fl-note{margin-top:14px;color:var(--muted);font-size:15.5px;font-weight:300;opacity:0;height:0;overflow:hidden;
transition:opacity .35s ease}
.fl-res.has-zip .fl-note{opacity:1;height:auto}
.fl-note strong{color:var(--ink);font-weight:500;letter-spacing:.04em}
.fl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,1.6vw,22px)}
.fl-card{background:#fff;border:1px solid var(--hair);border-radius:3px;
padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column;
transition:border-color .25s ease,transform .35s cubic-bezier(.2,.6,.25,1),box-shadow .35s ease}
@media(hover:hover){.fl-card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 12px 34px rgba(20,20,16,.07)}}
.fl-badge{display:inline-block;font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
color:var(--muted);margin-bottom:12px}
.fl-card h3{font-weight:300;font-size:clamp(25px,2.4vw,32px);letter-spacing:-.012em;line-height:1.1}
.fl-body{margin-top:14px;color:var(--muted);font-weight:300;font-size:15.5px;line-height:1.55}
.fl-meta{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--hair);padding-top:14px}
.fl-meta li{font-size:14.5px;color:var(--muted);font-weight:300;padding:5px 0 5px 18px;position:relative}
.fl-meta li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;
background:var(--lime)}
.fl-acts{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:2px}
.fl-lnk{display:inline-flex;align-items:center;gap:8px;min-height:46px;
font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
border-bottom:1px solid transparent;align-self:flex-start}
.fl-lnk em{font-style:normal;transition:transform .3s ease;display:inline-block}
.fl-lnk:hover{border-bottom-color:currentColor}
.fl-lnk:hover em{transform:translateX(4px)}
.fl-shop{color:var(--plum)}
.fl-direct{background:var(--ink);color:var(--paper);padding:clamp(56px,7vw,104px) 0}
.fl-dgrid{display:grid;grid-template-columns:minmax(0,50fr) minmax(0,50fr);
gap:clamp(30px,5vw,72px);align-items:center}
.fl-direct .h-sec{margin-top:16px}
.fl-direct .sub{margin-top:18px;color:#B1AEA6}
.fl-direct .eyebrow{color:#9A9891}
.fl-dacts{margin-top:clamp(26px,3vw,36px);display:flex;gap:12px;flex-wrap:wrap}
.fl-dimg{border-radius:3px;overflow:hidden;background:#26241e}
.fl-dimg img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.fl-ret{padding:clamp(44px,5vw,72px) 0;border-top:1px solid var(--hair);text-align:center}
.fl-reteye{color:var(--muted);margin-bottom:14px}
.fl-retp{font-weight:300;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.01em;max-width:24ch;margin:0 auto}
.fl-retlnk{margin-top:20px}
.fl-ret .fl-lnk{align-self:center}
@media(max-width:820px){
.fl-h{font-size:clamp(42px,11.5vw,64px)}
.fl-inrow{flex-direction:column}
.btn.fl-go{width:100%;height:56px}
.fl-dgrid{grid-template-columns:1fr}
.fl-dimg{order:-1}
.fl-dacts .btn{width:100%;text-align:center}
.fl-grid{grid-template-columns:1fr}
}
/* ============ INGREDIENT BAND — stat strip extension ============ */
.ingstats{background:#000;color:var(--paper);padding:clamp(30px,3.4vw,46px) 0 clamp(38px,4.4vw,58px);
border-top:1px solid rgba(244,240,231,.10)}
.igs-row{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2vw,32px)}
.igs{display:flex;flex-direction:column;gap:10px;min-width:0}
.igs-n{font-weight:200;font-size:clamp(38px,4.4vw,64px);line-height:.9;letter-spacing:-.03em;
color:var(--paper);display:block}
.igs-n i{font-style:normal;font-size:.42em;letter-spacing:-.01em;margin-left:.05em;
vertical-align:baseline;opacity:.75}
.igs-n b{font-weight:200}
.igs-k{font-size:12.5px;font-weight:400;line-height:1.35;color:#9A9891;
letter-spacing:.03em}
.igs-badge{display:block;height:clamp(38px,4.4vw,64px)}
.igs-badge img{height:100%;width:auto;object-fit:contain;display:block}
.igs-lnk{display:inline-flex;align-items:center;gap:9px;min-height:46px;margin-top:clamp(24px,3vw,36px);
font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);
border-bottom:1px solid rgba(244,240,231,.35);padding-bottom:2px}
.igs-lnk em{font-style:normal;display:inline-block;transition:transform .3s ease}
.igs-lnk:hover{border-bottom-color:var(--paper)}
.igs-lnk:hover em{transform:translateX(4px)}
@media(max-width:820px){
.ingstats{padding:26px 0 34px}
.igs-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}
.igs-n{font-size:clamp(40px,11vw,52px)}
.igs-badge{height:clamp(40px,11vw,52px)}
.igs-k{font-size:13px}
.igs-cert{grid-column:1 / -1;flex-direction:row;align-items:center;gap:14px;
border-top:1px solid rgba(244,240,231,.12);padding-top:20px}
.igs-cert .igs-k{font-size:13.5px}
.igs-lnk{width:100%;justify-content:space-between;margin-top:26px}
}
/* the loved band deserves more room on phones */
@media(max-width:820px){
.ingband img{height:clamp(250px,56vw,360px)}
}
/* ============ MOBILE-FIRST PASS — legibility floor + tap targets ============ */
@media(max-width:820px){
/* nothing sentence-case drops below 14.5px; nothing tracked-caps below 11px */
.announce{font-size:11.5px;letter-spacing:.16em;padding:10px 16px;line-height:1.5}
.mt-occ{font-size:11.5px;letter-spacing:.16em}
.cr-num{font-size:11.5px;letter-spacing:.14em}
.cr-tag{font-size:11.5px;letter-spacing:.14em;color:#84827C}
.cr-nm{font-size:17px}
.cr-inner p{font-size:15px;line-height:1.6;color:#BEBBB3}
.cr-inner .cr-hook{font-size:16px;color:var(--paper)}
.cut-row.on .cr-body{max-height:340px}
.cut-meta div .k{font-size:11.5px;letter-spacing:.14em}
.cut-meta div .v{font-size:15px}
.rd-row .k,.rd-rows .k{font-size:11.5px!important;letter-spacing:.14em!important}
.foot-grid h5{font-size:11.5px;letter-spacing:.18em}
.foot-grid .tag{font-size:15px}
.foot-grid a{font-size:15.5px;min-height:44px;display:flex;align-items:center;margin-bottom:0}
.opt .save{font-size:11.5px;letter-spacing:.1em}
.compare th,.compare th.lv{font-size:11.5px;letter-spacing:.14em}
.pcard .occ{font-size:11.5px;letter-spacing:.16em}
.rvs-src,.hrev-score .rvs-src,.rd-note{font-size:13.5px;line-height:1.6}
.rvs-fp{font-size:13.5px}
.ph2 .opt .meta,.opt .meta{font-size:13.5px}
.rvc-src{font-size:11.5px;letter-spacing:.14em}
.toast{font-size:13px}
small{font-size:13.5px}
.go,.fit-link{font-size:12px;letter-spacing:.14em}
.lnk,.rvc .lnk{font-size:13.5px;letter-spacing:.02em}
/* every tappable control clears 44px */
.fsm-links a,.fsm-sec a,.nav-links a,.mega-tile,.qopt,
.rb-opt,.faq-sec summary,.cut-row .cr-head{min-height:46px}
.cut-row .cr-head{padding:15px 0}
.btn,.ph2-btn,.fh-btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center}
.go,.lnk,.fit-link,.igs-lnk,.fl-lnk{min-height:44px;display:inline-flex;align-items:center}
}
/* ============ MOBILE TAP-TARGET FLOOR (44px, WCAG 2.2 AA) ============ */
@media(max-width:820px){
.nav .logo{display:inline-flex;align-items:center;min-height:44px;padding-right:8px}
.menu-btn{min-height:44px;padding:0 2px 0 8px}
.nav-right > *:not(.main-only){min-height:44px;display:inline-flex;align-items:center}
.fh-tabs{gap:6px}
.fh-tab{min-height:44px;display:inline-flex;align-items:center;padding:0 2px}
/* hotspots on the cutaway can: 44px hit area, 16px visual dot */
.cut-dot{width:44px;height:44px;background:transparent}
.cut-dot::before{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;
transform:translate(-50%,-50%);border-radius:50%;background:var(--paper)}
.cut-dot:after{inset:7px}
.ph2-rating a{min-height:44px;display:inline-flex;align-items:center}
.ph2 .opt select,.opt select{min-height:46px}
.cut-cta,.rd-cta,.rb-skip,.qback{min-height:44px;display:inline-flex;align-items:center}
.xsell .pcard .pc-body a,.xs-card a{min-height:44px}
}
/* ritual page: step labels up to the legibility floor on phones */
@media(max-width:820px){
.qstep-lbl{font-size:11.5px;letter-spacing:.16em}
.mt-occ{font-size:11.5px}
}
@media(max-width:820px){
.fsm-close{min-height:46px;padding:0 4px;display:inline-flex;align-items:center;gap:8px}
.xsell .pcard a,.xsell-grid a{min-height:44px;display:flex;align-items:center}
.rl{font-size:11.5px!important;letter-spacing:.16em!important}
}
@media(max-width:820px){
.ph2-flavors a{min-height:46px;display:inline-flex;align-items:center}
}
@media(max-width:820px){
.cr-tag{margin-left:0!important;padding-left:0}
}
/* ============ NAV CLEANUP + INTERACTIVE SHOP SUBMENU ============ */
.nav{gap:clamp(20px,3vw,48px)}
.nav .logo{flex:0 0 auto;margin-right:clamp(8px,2vw,28px)}
.nav-links.main{flex:1 1 auto;gap:clamp(18px,2.4vw,38px);white-space:nowrap}
.nav-links a,.shop-link{white-space:nowrap}
.nav-right{flex:0 0 auto;gap:clamp(16px,1.8vw,24px)}
/* Shop trigger is a real button now */
.shop-link{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;color:inherit;
font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
border-bottom:1px solid transparent;transition:border-color .2s}
.shop-link:hover,header.mega-open .shop-link{border-bottom-color:var(--ink)}
.shop-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* the hamburger is a phone control only */
@media(min-width:901px){ .menu-btn{display:none} }
@media(max-width:900px){ .nav-links.main{display:none} }
/* mega panel polish */
.mega{box-shadow:0 22px 44px -26px rgba(20,20,16,.34)}
.mega-grid{align-items:stretch}
.mega-tile{border-radius:3px;overflow:hidden;min-height:210px;
transition:transform .4s cubic-bezier(.2,.6,.25,1),box-shadow .4s ease}
.mega-tile .mt-txt{position:relative;z-index:2;padding:16px 18px;width:100%}
.mt-name{display:block;font-weight:400;font-size:15.5px;letter-spacing:-.004em;line-height:1.2}
.mega-tile .mt-go{display:block;margin-top:6px;font-size:11.5px;font-weight:500;letter-spacing:.2em;
text-transform:uppercase;opacity:0;transform:translateY(4px);
transition:opacity .3s ease,transform .3s ease}
@media(hover:hover){
.mega-tile:hover{transform:translateY(-4px);box-shadow:0 18px 34px -18px rgba(20,20,16,.4)}
.mega-tile:hover .mt-go{opacity:.85;transform:translateY(0)}
}
.mega-tile:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mega-tile:focus-visible .mt-go{opacity:.85;transform:translateY(0)}
.mega-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
border-top:1px solid var(--hair);padding:14px 0 20px}
.mega-foot .mf-note{font-size:13.5px;color:var(--muted);font-weight:300}
.mega-foot .mf-links{display:flex;gap:clamp(16px,2vw,28px);flex-wrap:wrap}
.mega-foot .mf-links a{font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
border-bottom:1px solid transparent;padding-bottom:2px}
.mega-foot .mf-links a:hover{border-bottom-color:var(--ink)}
/* keep the tile caption clear of the can */
.mega-tile{isolation:isolate}
.mega-tile img{z-index:1}
.mega-tile .mt-txt{z-index:3}
.mega-tile .mt-txt::before{content:"";position:absolute;left:0;right:0;bottom:0;top:-26px;z-index:-1;
background:linear-gradient(to top,var(--tile) 42%,transparent);pointer-events:none}
/* ============ INGREDIENT BAND — cinematic desktop treatment ============ */
@media(min-width:821px){
/* source art is 3.26:1 — hold near that ratio so all six ingredients stay in frame */
/* let the band hold the artwork's own 3273:1004 ratio at every width, so the
full ingredient stream stays in frame on wide displays instead of cropping */
.ingband img{height:auto;aspect-ratio:3273/1004;max-height:min(74vh,760px);
object-position:left center;
transform:translate3d(var(--bandx,0px),0,0) scale(1.035);
transition:transform .12s linear;will-change:transform}
.ingband-copy{max-width:min(38vw,540px)}
.ingband-copy p{font-size:clamp(30px,3.05vw,47px);line-height:1.08;max-width:15ch}
.ingband-copy .eyebrow{margin-bottom:20px;color:#9F9C95}
/* a hairline that ties the band to the stat strip below */
.ingband::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,rgba(244,240,231,.18),rgba(244,240,231,0) 60%)}
/* stat strip: one full-width data row, not a floating cluster */
.ingstats{padding:0 0 clamp(44px,4.6vw,64px);border-top:0}
.igs-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.igs{position:relative;padding:clamp(28px,2.8vw,40px) clamp(16px,1.6vw,26px) 0 0;
border-top:1px solid rgba(244,240,231,.16)}
.igs + .igs{padding-left:clamp(18px,1.8vw,30px)}
.igs-n{font-size:clamp(46px,4.6vw,72px)}
.igs-k{font-size:13px;color:#96948D;max-width:16ch}
.igs-badge{height:clamp(46px,4.6vw,72px)}
.igs-lnk{margin-top:clamp(30px,3.2vw,44px)}
}
@media(prefers-reduced-motion:reduce){
.ingband img{transform:none!important}
}
/* ============ PDP GALLERY v2 — editorial mosaic ============ */
.gx2{background:var(--paper);padding-top:clamp(40px,4.6vw,72px);padding-bottom:clamp(48px,5.6vw,88px)}
.gx2-grid{display:grid;gap:clamp(10px,1.1vw,16px)}
.gx2-t{position:relative;margin:0;overflow:hidden;border-radius:3px;background:var(--paper2)}
.gx2-t img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .8s cubic-bezier(.2,.6,.25,1)}
.gx2-fit{background:var(--paper2)}
.gx2-fit img{object-fit:contain;padding:7% 6%}
.gx2-e{background:#000}
.gx2-t figcaption{position:absolute;left:0;bottom:0;padding:14px 16px;
font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
color:var(--paper);text-shadow:0 1px 14px rgba(0,0,0,.55);
opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;
pointer-events:none}
.gx2-fit figcaption{color:var(--muted);text-shadow:none}
@media(hover:hover){
.gx2-t:hover img{transform:scale(1.035)}
.gx2-t:hover figcaption{opacity:1;transform:translateY(0)}
}
/* desktop: deterministic two-row mosaic + a full-width ingredient band */
@media(min-width:821px){
/* each tile gets a slot whose proportion suits the asset in it:
can + nutrition are tall contains, flat-lay is square, lifestyle is 4:5,
the ingredient stream is the only wide one. */
.gx2-grid{grid-template-columns:repeat(12,minmax(0,1fr));
grid-template-rows:clamp(400px,36vw,520px) clamp(380px,34vw,500px)}
.gx2-a{grid-column:1 / span 5;grid-row:1}
.gx2-b{grid-column:6 / span 4;grid-row:1}
.gx2-c{grid-column:10 / span 3;grid-row:1}
.gx2-d{grid-column:1 / span 4;grid-row:2}
.gx2-e{grid-column:5 / span 8;grid-row:2}
.gx2-d img{object-position:50% 22%}
}
/* mobile: full-bleed snap gallery, one big frame per swipe */
@media(max-width:820px){
.gx2{padding-top:clamp(28px,5vw,40px);padding-bottom:clamp(34px,6vw,52px)}
.gx2-grid{grid-auto-flow:column;grid-auto-columns:86vw;
overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
gap:10px;padding-inline:clamp(20px,4vw,56px);
scroll-padding-left:clamp(20px,4vw,56px);
scrollbar-width:none;max-width:none}
.gx2-grid::-webkit-scrollbar{display:none}
.gx2-t{scroll-snap-align:start;aspect-ratio:4/5}
.gx2-e{aspect-ratio:4/5}
.gx2-e img{object-fit:cover;object-position:center}
/* captions are always on for touch — there is no hover to reveal them */
.gx2-t figcaption{opacity:1;transform:none;font-size:11.5px;
background:linear-gradient(to top,rgba(0,0,0,.55),transparent);
left:0;right:0;padding:26px 16px 14px}
.gx2-fit figcaption{background:none;color:var(--muted)}
}
.gx2-dots{display:none}
@media(max-width:820px){
.gx2-dots{display:flex;gap:7px;justify-content:center;margin-top:16px}
.gx2-dots span{width:6px;height:6px;border-radius:50%;background:var(--hair);
transition:background .25s ease,transform .25s ease}
.gx2-dots span.on{background:var(--ink);transform:scale(1.25)}
}
.mega-tile .mt-go{font-size:11.5px}
@media(max-width:900px){
.nav{gap:12px}
.nav .logo{margin-right:0}
.nav-right{gap:14px}
}
/* desktop-only nav items stay hidden on phones, whatever else sets display */
@media(max-width:900px){ .main-only{display:none!important} }
/* ============================================================
9.2026 direction doc — homepage sections
============================================================ */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);
padding:12px 18px;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.skip:focus{left:0}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.nav-acct{font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
/* hero lede (doc sub-headline) */
.fh-lede{font-weight:300;font-size:clamp(16px,1.55vw,19px);line-height:1.5;max-width:520px;
margin:18px 0 26px;color:inherit;opacity:.92}
.fh-h{font-size:clamp(40px,5.4vw,80px);line-height:1.02}
.fh-note{margin:22px 0 0;font-size:14px;opacity:.72;max-width:460px}
@media(max-width:820px){
.fh-h{font-size:clamp(34px,8.4vw,52px)}
.fh-lede{font-size:16px;margin:14px 0 20px}
.fh-note{font-size:13.5px;margin-top:16px}
}
/* 2 — brand belief */
.belief{background:var(--ink);color:var(--paper);text-align:center;
padding:clamp(72px,10vw,150px) 0}
.bl-kicker{font-size:clamp(13px,1.35vw,16px);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
color:#8F8D86;max-width:640px;margin:0 auto}
.bl-h{font-weight:200;font-size:clamp(38px,6.4vw,96px);line-height:1.02;letter-spacing:-.02em;
margin:clamp(18px,2.4vw,30px) auto 0;max-width:15ch}
.bl-sub{color:#C3C0B8;font-weight:300;font-size:clamp(16px,1.55vw,20px);
max-width:640px;margin:clamp(22px,2.8vw,34px) auto 0}
.bl-cta{margin-top:clamp(30px,3.6vw,44px)}
.sec-foot{margin-top:clamp(32px,4vw,52px)}
/* 5 — functional benefit */
.fben{position:relative;isolation:isolate;background:var(--paper2)}
.fben-bg{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:-1}
.fben .wrap{padding-top:clamp(90px,13vw,190px);padding-bottom:clamp(90px,13vw,190px)}
.fben-copy{max-width:620px}
.fben-h{font-weight:200;font-size:clamp(32px,4.6vw,62px);line-height:1.06;letter-spacing:-.015em}
.fben-h em{font-style:normal;font-weight:400}
.fben-copy .sub{margin-top:20px;color:#4A463C}
.fben-copy .btn{margin-top:clamp(26px,3vw,36px)}
@media(max-width:820px){
.fben-copy{max-width:100%;background:rgba(244,240,231,.86);padding:26px 22px;border-radius:3px}
.fben .wrap{padding-top:clamp(56px,16vw,90px);padding-bottom:clamp(56px,16vw,90px)}
}
/* 6 — ingredient story (dark) */
.cut-eye{color:#8F8D86}
.cut-h{color:var(--paper)}
.cut-sub{color:#ACAAA2}
/* 7 — clean credentials */
.creds{background:var(--paper);padding:clamp(64px,8vw,110px) 0;border-top:1px solid var(--hair)}
.creds-top{display:flex;gap:clamp(20px,3vw,40px);align-items:center;max-width:820px}
.creds-usda{width:clamp(76px,8vw,120px);height:auto;flex:none}
.creds-top .sub{margin-top:12px}
.creds-row{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,28px);
margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--hair);padding-top:clamp(28px,3.4vw,42px)}
.crd h3{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px}
.crd p{color:var(--muted);font-weight:300;font-size:14.5px;line-height:1.5}
.creds-foot{margin-top:clamp(30px,3.6vw,46px);font-size:12px;font-weight:500;letter-spacing:.24em;
text-transform:uppercase;color:var(--muted)}
@media(max-width:900px){.creds-row{grid-template-columns:repeat(2,1fr);gap:26px 20px}}
@media(max-width:480px){
.creds-top{flex-direction:column;align-items:flex-start;gap:18px}
.creds-row{grid-template-columns:1fr}
}
/* 10 — founder */
.founder{background:var(--paper2);padding:clamp(64px,8vw,120px) 0}
.fnd-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.fnd-ph img{width:100%;height:100%;object-fit:cover;border-radius:3px;aspect-ratio:4/3}
.fnd-copy .eyebrow{color:var(--muted);margin-bottom:14px}
.fnd-copy .sub{margin-top:16px;font-size:clamp(16px,1.5vw,18px)}
.fnd-punch{font-weight:200;font-size:clamp(26px,3.2vw,42px);line-height:1.1;letter-spacing:-.012em;
margin:clamp(20px,2.4vw,30px) 0 18px}
.fnd-sig{display:flex;flex-direction:column;font-size:14px;margin-bottom:26px}
.fnd-sig b{font-weight:500}
.fnd-sig span{color:var(--muted);font-weight:300}
@media(max-width:820px){.fnd-grid{grid-template-columns:1fr}.fnd-ph{order:-1}}
/* 11 — retail */
.retail{background:var(--paper);padding:clamp(56px,7vw,100px) 0;border-top:1px solid var(--hair)}
.rt-grid{display:flex;gap:clamp(24px,4vw,56px);align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.rt-grid .eyebrow{color:var(--muted);margin-bottom:14px}
.rt-grid .sub{margin-top:14px;max-width:44ch}
.rt-ctas{display:flex;gap:12px;flex-wrap:wrap}
/* 12 — final CTA */
.finalcta{background:var(--ink);color:var(--paper);padding:clamp(64px,8vw,120px) 0}
.fc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.fc-h{font-weight:200;font-size:clamp(38px,5.6vw,84px);line-height:1.02;letter-spacing:-.02em}
.finalcta .sub{color:#B5B2AB;margin:18px 0 30px;max-width:38ch}
.fc-ph img{width:100%;border-radius:3px}
@media(max-width:820px){.fc-grid{grid-template-columns:1fr}}
/* footer — doc brand statement */
.foot-brand{max-width:640px;margin-bottom:clamp(38px,5vw,60px)}
.fb-h{font-weight:200;font-size:clamp(40px,6vw,88px);line-height:1;letter-spacing:-.02em}
.fb-sub{color:#A6A39C;font-weight:300;font-size:clamp(15px,1.4vw,18px);margin-top:16px}
.foot-nav{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,34px);padding:26px 0;
border-top:1px solid #2a2a24;border-bottom:1px solid #2a2a24}
.foot-nav a{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
color:#D2CFC7;padding:6px 0}
.foot-nav a:hover{color:#fff}
.foot-soc{display:flex;gap:clamp(14px,2vw,26px)}
.foot-soc a{color:#B1AEA6}
.foot-soc a:hover{color:#fff}
footer .foot-base{border-top:0;padding-top:26px}
/* page heads + faq + contact */
.pghead{padding:clamp(56px,8vw,110px) 0 clamp(36px,5vw,60px);border-bottom:1px solid var(--hair)}
.pghead .eyebrow{color:var(--muted);margin-bottom:18px}
.pg-h{font-weight:200;font-size:clamp(38px,6vw,86px);line-height:1.02;letter-spacing:-.02em;max-width:16ch}
.pg-lede{color:var(--muted);font-weight:300;font-size:clamp(16px,1.6vw,20px);margin-top:20px;max-width:56ch}
.faqs{padding:clamp(48px,6vw,88px) 0}
.faq-list{max-width:820px;border-top:1px solid var(--hair)}
.faq-i{border-bottom:1px solid var(--hair)}
.faq-i summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
gap:20px;padding:22px 0;font-weight:300;font-size:clamp(17px,1.8vw,22px);letter-spacing:-.005em}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{content:"+";font-weight:300;font-size:24px;line-height:1;color:var(--muted);flex:none}
.faq-i[open] summary::after{content:"\2013"}
.faq-a{padding:0 0 24px;max-width:64ch}
.faq-a p{color:var(--muted);font-weight:300;font-size:16px;line-height:1.6}
.ctc{padding:clamp(48px,6vw,88px) 0}
.ctc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,28px)}
.ctc-card{background:#fff;border:1px solid var(--hair);border-radius:2px;padding:clamp(24px,3vw,34px)}
.ctc-card h2{font-weight:300;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.01em}
.ctc-card p{color:var(--muted);font-weight:300;font-size:15px;margin:10px 0 16px}
.ctc-lnk{display:inline-block;font-size:14.5px;border-bottom:1px solid var(--ink);padding-bottom:2px;margin-right:18px}
@media(max-width:760px){.ctc-grid{grid-template-columns:1fr}}
/* readability + tap-target floor (Matt: never tiny type; 44px targets) */
.eyebrow,.announce,.nav-links a,.nav-acct,.bag,.btn,.fh-btn,.foot-nav a,.crd h3{font-size:11.5px}
.foot-nav a{padding:14px 0;display:inline-block;line-height:1}
.foot-soc a{padding:12px 0;display:inline-block;line-height:1}
.ctc-lnk{padding:10px 0}
.faq-i summary{min-height:56px}
.pcard .go{padding:10px 0 4px;display:inline-block}
.creds-foot{font-size:12.5px}
footer .foot-base{font-size:12.5px;flex-wrap:wrap;row-gap:8px}
@media(max-width:820px){
.foot-nav{gap:4px 22px}
.rt-grid{align-items:flex-start}
.rt-ctas .btn{width:100%;text-align:center}
}
.foot-nav a{padding:14px 6px;margin-left:-6px}
.foot-soc a{padding:12px 6px;margin-left:-6px}
/* ---- WCAG 2.1 AA contrast fixes (ada-gate) ---- */
:root{--muted:#5F5B4B}
.cr-tag{color:#B5B2AB}
.cut-list .cr-tag{color:#B5B2AB}
@media(max-width:900px){.cr-tag{color:#B5B2AB}}
.foot-base{color:#B5B2AB}
footer .foot-base{color:#B5B2AB}
.foot-soc a{color:#CCC8C0}
.fb-sub{color:#C3C0B8}
.bl-sub{color:#D2CFC7}
.bl-kicker{color:#B5B2AB}
.finalcta .sub{color:#CCC8C0}
.cut-sub{color:#C7C4BC}
.cut-eye{color:#B5B2AB}
.cr-inner p{color:#CCC8C0}
.cr-num{color:#B1AEA6}
.ritual-band .sub{color:#D2CFC7}
.ritual-band .eyebrow{color:#BCB9B1}
.foot-grid .tag{color:#BCB9B1}
.foot-grid h5{color:#B5B2AB}
.rvs-src{color:var(--muted)}
/* second definition; see the note on the first - the quiz runs on ink now */
:root{--qmag:var(--ink)}
.rbar .rl{opacity:1;color:#fff}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ---- type floors (ada-gate: no 12px UI labels; body >= 16px) ---- */
.eyebrow,.announce,.nav-links a,.nav-acct,.bag,.btn,.fh-btn,.foot-nav a,.crd h3,
.mt-occ,.mt-go,.cr-num,.cr-tag,.pcard .go,.pcard .occ,.rvs-fp,.rl,.igs-k,.fsm-small a,
.mf-note,.mf-links a,.foot-grid h5,.foot-grid a,.creds-foot,.foot-base,.fh-tab{font-size:13px}
.fb-h,.fc-h,.bl-h,.pg-h,.h-sec,.fh-h,.fben-h,.ug-h,.fnd-punch{font-size:revert-layer}
.sub,.pcard .note,.crd p,.faq-a p,.cr-inner p,.fnd-copy .sub,.ctc-card p,.bl-sub,.fb-sub,
.pg-lede,.fh-note,.rvs-meta,.rvs-src,.foot-grid .tag,.ctc-lnk,.ug-sub{font-size:16px}
.sub{font-size:clamp(16px,1.55vw,20px)}
.pg-lede{font-size:clamp(16px,1.6vw,20px)}
.fh-lede{font-size:clamp(16px,1.55vw,19px)}
.fnd-copy .sub{font-size:clamp(16px,1.5vw,18px)}
.faq-i summary{font-size:clamp(17px,1.8vw,22px)}
.pcard h3{font-size:clamp(20px,2.2vw,26px)}
.cr-nm{font-size:16px}
.price{font-size:16px}
.creds-foot{font-size:13px;letter-spacing:.2em}
/* ---- type + target floors, pass 2 ---- */
.mega-foot a,.mf-links a,.mf-note,.mt-go,.mt-occ,.fsm-small a,.fsm-links em,
.foot-base span,.foot-soc a,.pcard .price small,.rvs-src,.toast,.skip,
.save,.meta,.ph2-btn,.fit-link,figcaption,.lnk,.go em,.cut-cta{font-size:13px}
.mega-foot a,.mf-links a{padding:12px 6px;display:inline-block;margin:-12px -6px}
.fsm-small a{padding:12px 6px;display:inline-block}
.logo{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.shop-link{min-height:44px;display:inline-flex;align-items:center;gap:6px}
.nav-links a{min-height:44px;display:inline-flex;align-items:center}
.nav-acct,.bag{min-height:44px;display:inline-flex;align-items:center}
.fsm-close{min-height:44px;display:inline-flex;align-items:center;gap:8px}
.cut-dot{width:26px;height:26px;padding:5px;background-clip:content-box}
.fh-tab{min-height:44px}
.lnk,.fit-link,.rvs-go,.cut-cta,.igs-lnk{display:inline-block;padding:11px 0}
.hrev .rvs-fr{min-height:24px;display:inline-flex;align-items:center}
/* ---- type floor, final sweep: no UI label under 13px anywhere ---- */
.mt-go,.mega-foot a,.mf-links a,.rvs-src,.rvs-go em,.go em,.cut-cta span,
.save,.meta,.fit-link,figcaption,.rvc-src,.rd-tbl .k,.rd-note,.pr,
.qback,.qstep-lbl,.rl,.rgo,.fl-lbl,.fl-badge,.wi-tag,.tl .n,
.foot-base span,.foot-soc a,.hrev .rvs-fr,thead th,.vh,.igs-k,.eyebrow{font-size:13px}
.mega-foot .mf-note{font-size:14px}
.qback{padding:12px 4px;display:inline-block}
.hrev .rvs-fr{padding:4px 0}
.rvs-flav{display:block}
.pdp-flav-tabs a,.fl-tabs a{min-height:44px;display:inline-flex;align-items:center}
/* ---- absolute type floor: nothing on the site renders below 13px ---- */
.mega a,.mega span,.mega-foot a,.mf-links a,.mf-note,.mt-go,.mt-occ,
.fsm-foot span,.fsm-small a,.fsm-links em,
.foot-base span,.foot-soc a,.foot-nav a,.foot-grid a,.foot-grid h5,.foot-grid .tag,
.rvs-src,.rvs-fp,.rvs-fr,.save,.meta,.fit-link,figcaption,.rvc-src,
.rd-tbl .k,.rd-note,.pr,.qback,.qstep-lbl,.rl,.rgo,.fl-lbl,.fl-badge,.wi-tag,.wi-num,
.igs-k,.cr-num,.cr-tag,.tl .n,.eyebrow,.announce,.bag,.nav-acct,.nav-links a,
.btn,.fh-btn,.fh-tab,.crd h3,.pcard .go,.pcard .price small,.cut-cta,.igs-lnk,
.lnk,.go,.toast,.skip,thead th,.vh,.go em,.lnk em,.rvs-go em,.igs-lnk em,.cut-cta span,small{font-size:13px !important}
.h-sec{font-size:clamp(34px,4.6vw,58px) !important}
.fh-h{font-size:clamp(38px,5.2vw,76px) !important}
.fb-h{font-size:clamp(40px,6vw,88px) !important}
.fc-h{font-size:clamp(38px,5.6vw,84px) !important}
.bl-h{font-size:clamp(36px,6vw,90px) !important}
.pg-h{font-size:clamp(38px,6vw,86px) !important}
.fben-h{font-size:clamp(32px,4.6vw,62px) !important}
.ug-h{font-size:clamp(34px,5vw,72px) !important}
.fnd-punch{font-size:clamp(26px,3.2vw,42px) !important}
.bl-kicker{font-size:clamp(13px,1.3vw,16px) !important}
blockquote{font-size:clamp(26px,3vw,38px) !important}
.sub{font-size:clamp(16px,1.55vw,20px) !important}
.pcard .note,.crd p,.faq-a p,.cr-inner p,.ctc-card p,.ctc-lnk,.rvs-meta{font-size:16px !important}
.pg-lede{font-size:clamp(16px,1.6vw,20px) !important}
.fh-lede{font-size:clamp(16px,1.55vw,19px) !important}
.fh-note{font-size:16px !important}
.bl-sub{font-size:clamp(16px,1.55vw,20px) !important}
.fb-sub{font-size:clamp(16px,1.4vw,18px) !important}
.ug-sub{font-size:16px !important}
.faq-i summary{font-size:clamp(17px,1.8vw,22px) !important}
.pcard h3{font-size:clamp(20px,2.2vw,26px) !important}
.cr-nm{font-size:16px !important}
.price{font-size:16px !important}
.rd-tbl .k,span.k,.wi-list .n,.wi-i .n,.wi-num{font-size:13px !important}
.rd-meta .k,.cut-meta div .k,li.rv > span:first-child{font-size:13px !important}
.ph2-rating a{display:inline-block;padding:5px 0}
.ph2-flavors a{min-height:36px;display:inline-flex;align-items:center;gap:8px}
li.rv > span:first-child{color:#BCB9B1 !important}
.toast{position:fixed}
.prose{padding:clamp(44px,6vw,80px) 0}
.prose .wrap{max-width:820px}
.prose h2{font-weight:300;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em;margin:36px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{font-size:16px;line-height:1.65;color:var(--muted);margin-bottom:14px}
.prose ul{margin:0 0 14px 20px}
.prose li{font-size:16px;line-height:1.65;color:var(--muted);margin-bottom:8px}
.prose a{border-bottom:1px solid currentColor}
.prose strong{color:var(--ink);font-weight:500}
.prose-date{margin-top:32px;padding-top:20px;border-top:1px solid var(--hair)}
/* hero copy must not collide with the can */
.fh-copy{max-width:min(560px,46vw)}
@media(max-width:1100px){.fh-copy{max-width:min(520px,58vw)}}
@media(max-width:820px){.fh-copy{max-width:100%}}
.fh-lede{max-width:34ch}
/* hero: sized for the doc's two-line headline, with a legibility scrim */
.fh-h{font-size:clamp(30px,3.5vw,52px) !important;line-height:1.08;letter-spacing:-.012em}
.fh-occ{margin-bottom:12px}
/* NO FADES on the hero. Legibility comes from the art: each plate is built on a
brand-deep ground with a clean colour field where the copy sits. */
.fh::after{display:none !important}
.fh-foot{color:#fff !important}
.fh-btn{border-color:#fff;color:#fff}
.fh-btn.solid{background:#fff;color:#141410}
.fh-btn:hover{background:#fff;color:#141410}
.fh-btn.solid:hover{background:transparent;color:#fff}
.fh-tab{color:#BDBDBC}
.fh-tab.is-on{color:#fff}
.fh-note,.fh-lede{color:#fff}
@media(max-width:820px){
.fh-h{font-size:clamp(28px,7.4vw,40px) !important}
.fh::after{display:none !important}
}
@media(max-width:820px){
.fh{height:auto;min-height:0}
.fh-plates{position:relative;height:56svh;min-height:340px}
.fh-foot{position:relative;background:var(--ink);padding-top:26px;padding-bottom:30px;
flex-direction:column;align-items:flex-start;gap:20px}
.fh::after{display:none}
.fh-occ{margin-bottom:10px}
.fh-h{font-size:clamp(30px,8vw,40px) !important;line-height:1.06}
.fh-lede{max-width:100%;margin:12px 0 20px}
.fh-ctas{width:100%}
.fh-ctas .fh-btn{flex:1;text-align:center}
.fh-note{margin-top:14px}
.fh-tabs{width:100%}
}
@media(max-width:820px){
.fh{padding:0 !important}
.fh-occ{letter-spacing:.16em;font-size:12px !important}
}
/* 5 — functional benefit as a split (image right, copy left) */
.fben{position:static;background:var(--paper);padding:clamp(56px,7vw,110px) 0;border-top:1px solid var(--hair)}
.fben-bg{display:none}
.fben .wrap{padding-top:0;padding-bottom:0}
.fben-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,72px);align-items:center}
.fben-copy{max-width:560px;background:none;padding:0;border-radius:0}
.fben-h{font-weight:200;line-height:1.06;letter-spacing:-.015em}
.fben-h em{font-style:normal;font-weight:400;font-size:inherit !important}
.fben-copy .sub{margin-top:18px;color:var(--muted)}
.fben-copy .btn{margin-top:clamp(24px,3vw,34px)}
.fben-ph img{width:100%;border-radius:3px;aspect-ratio:16/11;object-fit:cover}
@media(max-width:820px){
.fben-grid{grid-template-columns:1fr}
.fben-ph{order:-1}
.fben-ph img{aspect-ratio:4/3}
}
.fben-ph{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fben-ph img{width:100%;border-radius:3px;aspect-ratio:3/4;object-fit:cover}
.fben-h{font-size:clamp(30px,3.6vw,52px) !important}
@media(max-width:820px){.fben-ph img{aspect-ratio:3/4}}
/* ============================================================
Icon system + visual pass (9 Sep 2026)
============================================================ */
svg.ico{width:1em;height:1em;display:block;flex:none;overflow:visible}
/* hero: Find Balance. + trust icons */
.fh-h{font-size:clamp(48px,7vw,104px) !important;line-height:.98;letter-spacing:-.022em}
.fh-occ{font-size:13px !important;letter-spacing:.16em;text-transform:none;opacity:.95;
font-weight:500;margin-bottom:14px}
.fh-lede{max-width:42ch}
.fh-trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:24px 0 0;padding:0}
.fh-trust li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;
letter-spacing:.1em;text-transform:uppercase;color:inherit}
.fh-trust svg.ico{font-size:22px;opacity:.95}
.fh-note{opacity:.72;margin-top:18px}
/* icon stat bar */
.statbar{background:var(--ink);color:var(--paper);padding:clamp(34px,4.4vw,58px) 0}
.sb-row{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2.4vw,34px);margin:0;padding:0}
.sb{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.sb-ic{font-size:34px;color:#DEDAD2}
.sb-n{font-weight:200;font-size:clamp(38px,4.4vw,58px);line-height:1;letter-spacing:-.02em}
.sb-n i{font-style:normal;font-size:.42em;font-weight:300;margin-left:2px}
.sb-k{font-size:13px !important;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
color:#BCB9B1;line-height:1.5}
.sb-badge img{width:clamp(62px,6vw,88px);height:auto}
@media(max-width:900px){
.sb-row{grid-template-columns:repeat(2,1fr);gap:26px 20px}
.sb-cert{grid-column:1 / -1;flex-direction:row;align-items:center;gap:16px;
border-top:1px solid #2a2a24;padding-top:22px}
}
/* functional benefit: two icon columns */
.fben-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px);margin:clamp(26px,3vw,38px) 0 0}
.fbt{background:#fff;border:1px solid var(--hair);border-radius:3px;padding:clamp(18px,2vw,24px)}
.fbt-ic{font-size:30px;color:var(--ink);display:block;margin-bottom:12px}
.fbt h3{font-weight:400;font-size:15px !important;letter-spacing:.02em;margin-bottom:12px}
.fbt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fbt-list li{display:flex;align-items:center;gap:10px;font-size:14px !important;color:var(--muted);font-weight:300}
.fbt-list img{width:26px;height:26px;object-fit:contain;flex:none}
@media(max-width:560px){.fben-two{grid-template-columns:1fr}}
/* clean credentials as an icon grid */
.creds{background:var(--paper2);padding:clamp(56px,7vw,110px) 0;border-top:1px solid var(--hair)}
.creds-head{max-width:640px;margin-bottom:clamp(30px,4vw,48px)}
.creds-head .eyebrow{color:var(--muted);margin-bottom:14px}
.creds-head .sub{margin-top:14px}
.creds-grid{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:1.25fr repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.creds-grid .crd{background:#fff;border:1px solid var(--hair);border-radius:3px;
padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:10px}
.crd-ic{font-size:38px;color:var(--ink);margin-bottom:6px}
.crd-usda{width:clamp(64px,5.4vw,80px);height:auto;margin-bottom:6px}
.crd h3{font-size:13px !important;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin:0}
.crd p{font-size:15px !important;color:var(--muted);font-weight:300;line-height:1.5;margin:0}
.crd-hero{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.crd-hero p{color:#C7C4BC}
.creds-chips{list-style:none;margin:clamp(20px,2.4vw,30px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.creds-chips li{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--hair);
border-radius:999px;padding:11px 18px;font-size:13px !important;font-weight:500;
letter-spacing:.14em;text-transform:uppercase}
.creds-chips svg.ico{font-size:20px}
@media(max-width:1080px){.creds-grid{grid-template-columns:repeat(2,1fr)}.crd-hero{grid-column:1 / -1;flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap}.crd-hero h3,.crd-hero p{flex-basis:100%}}
@media(max-width:560px){.creds-grid{grid-template-columns:1fr}.crd-hero{flex-direction:column;align-items:flex-start}}
/* retail pin */
.rt-ic{font-size:34px;display:block;margin-bottom:14px;color:var(--ink)}
.fh-h{font-size:clamp(44px,5.4vw,80px) !important}
.fh-copy{max-width:min(600px,50vw)}
.fh-occ{font-size:14px !important;letter-spacing:.02em;opacity:1;font-weight:400}
.fh-trust{gap:10px 18px}
.fh-trust li{font-size:13px !important;letter-spacing:.09em}
.fh-trust svg.ico{font-size:20px}
@media(max-width:1180px){.fh-trust li{font-size:11.5px !important}}
@media(max-width:820px){
.fh-copy{max-width:100%}
.fh-h{font-size:clamp(40px,11vw,58px) !important}
.fh-occ{font-size:13px !important}
.fh-trust{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:20px}
.fh-trust li{font-size:12px !important}
}
.fh-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;max-width:440px}
/* mobile hero art: full can, ingredients around it, nothing clipped */
@media(max-width:820px){
.fh-plates{height:min(60svh,540px);min-height:380px}
.fh-ing{object-position:50% 6% !important}
.fh-canwrap{top:52% !important;height:66% !important}
.fh-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 10px;width:100%;order:2}
.fh-tab{font-size:11.5px !important;letter-spacing:.08em;text-align:left;min-height:48px;padding-right:4px}
}
.creds-grid .crd{padding:clamp(22px,2.4vw,30px);min-height:190px;justify-content:flex-start}
.creds-grid .crd-ic{font-size:46px;margin-bottom:10px}
.creds-grid .crd-hero{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.creds-grid .crd-hero h3{color:var(--paper)}
.creds-grid .crd-hero p{color:#D2CFC7 !important}
.creds-grid .crd-usda{width:clamp(70px,6vw,92px)}
.creds-chips li{padding:12px 20px}
.creds-chips svg.ico{font-size:22px}
@media(max-width:900px){
.creds-grid .crd-hero{flex-direction:column;align-items:flex-start;gap:12px}
.creds-grid .crd-hero h3,.creds-grid .crd-hero p{flex-basis:auto}
.creds-grid .crd{min-height:0}
}
.fh-trust li{font-size:13px !important}
@media(max-width:1180px){.fh-trust li{font-size:13px !important}}
@media(max-width:820px){.fh-trust li{font-size:13px !important}}
@media(max-width:820px){.fh-tab{font-size:13px !important;letter-spacing:.06em}}
.fl-lnk em,.fl-retlnk em,.prose a{font-size:inherit !important}
.prose a{display:inline-block;padding:2px 0;min-height:24px}
.fl-lnk em{font-size:13px !important}
/* ============================================================================
REFINEMENT LAYER — Vuori / Alo standard (9 Sep 2026)
Editorial rhythm, no boxes, full-bleed imagery, one clear action.
============================================================================ */
:root{
--sec:clamp(76px,9.5vw,150px); /* section rhythm */
--sec-s:clamp(52px,6vw,92px);
--gut:clamp(20px,4vw,64px);
--rule:#E3DCCB;
--muted:#5C5849;
}
.wrap{max-width:1320px;padding:0 var(--gut)}
/* --- type --- */
body{font-size:17px;line-height:1.62}
.eyebrow{font-size:13px !important;letter-spacing:.24em;font-weight:500;color:var(--muted)}
.h-sec{font-weight:200 !important;font-size:clamp(32px,4.2vw,60px) !important;
line-height:1.04;letter-spacing:-.018em}
.sub{font-size:clamp(17px,1.35vw,19px) !important;line-height:1.6;color:var(--muted);font-weight:300}
.sec-head{max-width:none;margin-bottom:clamp(34px,4.4vw,60px)}
/* --- buttons: one refined system --- */
.btn,.fh-btn{padding:19px 34px;font-size:13px !important;letter-spacing:.22em;border-radius:0;
font-weight:500;transition:background .3s,color .3s,border-color .3s}
.btn.outline{border-color:var(--ink)}
.btn.outline:hover{background:var(--ink);color:var(--paper)}
/* --- 1 · hero: full bleed, one action --- */
.fh-ctas{gap:14px;align-items:center}
.fh-btn.solid{padding:20px 40px}
.fh-btn:not(.solid){border:0;padding:20px 4px;text-decoration:none;position:relative}
.fh-btn:not(.solid)::after{content:"";position:absolute;left:4px;right:4px;bottom:14px;height:1px;
background:currentColor;opacity:.55;transition:opacity .25s}
.fh-btn:not(.solid):hover{background:transparent;color:inherit}
.fh-btn:not(.solid):hover::after{opacity:1}
.fh-trust{margin-top:30px;gap:14px 26px}
.fh-note{display:none}
/* --- 3 · product tiles: no card, no border, image leads --- */
.shop-grid{gap:clamp(18px,2.6vw,40px)}
.pcard{background:transparent !important;border:0 !important;border-radius:0;overflow:visible}
.pcard:hover{transform:none}
.pcard .ph{aspect-ratio:4/5;overflow:hidden;background:var(--paper2)}
.pcard .ph img{transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.pcard:hover .ph img{transform:scale(1.045)}
.pcard .body{padding:20px 0 0;gap:8px}
.pcard h3{font-size:clamp(19px,1.6vw,23px) !important;font-weight:300;letter-spacing:-.005em}
.pcard .note{font-size:16px !important;color:var(--muted);font-weight:300;line-height:1.55}
.pcard .row{margin-top:12px;padding-top:14px;border-top:1px solid var(--rule);align-items:center}
.pcard .price{font-weight:400}
.pcard .go{border-bottom:0;position:relative;letter-spacing:.2em}
.pcard .go::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;
transform-origin:left;transform:scaleX(1);transition:transform .3s}
.pcard:hover .go::after{transform:scaleX(0);transform-origin:right}
.sec-foot{margin-top:clamp(38px,4.6vw,64px)}
/* --- 5 · functional benefit: hairline columns, no boxes --- */
.fben{padding:var(--sec) 0}
.fben-grid{gap:clamp(32px,6vw,96px);align-items:start}
.fben-copy{max-width:none}
.fben-h{font-size:clamp(30px,3.5vw,50px) !important;line-height:1.06}
.fben-two{border-top:1px solid var(--rule);margin-top:clamp(30px,3.4vw,44px);gap:0}
.fbt{background:transparent;border:0;border-radius:0;padding:26px 26px 26px 0}
.fbt + .fbt{border-left:1px solid var(--rule);padding-left:26px;padding-right:0}
.fbt-ic{font-size:26px;margin-bottom:14px;color:var(--muted)}
.fbt h3{font-size:13px !important;letter-spacing:.2em;text-transform:uppercase;font-weight:500;margin-bottom:16px}
.fbt-list{gap:11px}
.fbt-list li{font-size:16px !important}
.fben-ph{gap:12px}
.fben-ph img{aspect-ratio:4/5;border-radius:0}
/* --- 7 · credentials: hairline icon row, no cards --- */
.creds{background:var(--paper);padding:var(--sec) 0;border-top:1px solid var(--rule)}
.creds-head{max-width:720px;margin-bottom:clamp(40px,5vw,70px)}
.creds-grid{grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule)}
.creds-grid .crd{background:transparent !important;border:0 !important;border-radius:0;
padding:clamp(28px,3vw,42px) clamp(16px,1.6vw,26px) clamp(28px,3vw,42px) 0;min-height:0;gap:12px}
.creds-grid .crd + .crd{border-left:1px solid var(--rule) !important;padding-left:clamp(16px,1.6vw,26px)}
.creds-grid .crd-hero{background:transparent !important;color:inherit !important}
.creds-grid .crd-hero h3{color:inherit}
.creds-grid .crd-hero p{color:var(--muted) !important}
.creds-grid .crd-ic{font-size:40px;color:var(--ink);margin-bottom:4px}
.creds-grid .crd-usda{width:clamp(56px,4.4vw,68px);margin-bottom:4px}
.crd h3{font-size:13px !important;letter-spacing:.2em}
.crd p{font-size:15px !important;line-height:1.55}
.creds-chips{margin-top:clamp(28px,3.2vw,44px);gap:0;border-top:1px solid var(--rule);padding-top:26px}
.creds-chips li{background:transparent;border:0;border-radius:0;padding:0 32px 0 0;font-size:13px !important;letter-spacing:.2em}
/* --- icon stat bar: calmer --- */
.statbar{padding:clamp(46px,5.4vw,84px) 0}
.sb-ic{font-size:26px;color:#BCB9B1}
.sb-n{font-size:clamp(40px,4.2vw,62px)}
.sb-k{font-size:13px !important;letter-spacing:.2em;color:#B5B2AB}
/* --- 2 · belief + 12 · final: more air --- */
.belief{padding:clamp(96px,12vw,190px) 0}
.bl-h{font-size:clamp(34px,5.6vw,86px) !important}
.bl-kicker{font-size:13px !important;letter-spacing:.24em}
.bl-sub{max-width:56ch}
.finalcta{padding:var(--sec) 0}
.fc-grid{gap:clamp(32px,6vw,96px)}
.fc-ph img{border-radius:0}
/* --- 6 · ingredient story --- */
.cut-eye{font-size:13px !important;letter-spacing:.24em}
.cr-nm{font-size:17px !important;opacity:.82}
.cut-row.on .cr-nm{opacity:1}
/* --- 9 · reviews + community --- */
.hrev{padding:var(--sec) 0}
.ugc{padding:var(--sec-s) 0 var(--sec)}
.ug-h{font-weight:200 !important;letter-spacing:-.02em}
/* --- 10 · founder --- */
.founder{padding:var(--sec) 0}
.fnd-grid{gap:clamp(32px,6vw,90px)}
.fnd-ph img{border-radius:0;aspect-ratio:4/5}
.fnd-punch{font-weight:200}
/* --- 11 · retail --- */
.retail{padding:var(--sec-s) 0;border-top:1px solid var(--rule)}
.rt-ic{font-size:28px;color:var(--muted)}
/* --- footer --- */
footer{padding:var(--sec) 0 44px}
.foot-brand{max-width:720px;margin-bottom:clamp(34px,3.6vw,48px)}
.foot-nav{padding:30px 0}
.foot-nav a{letter-spacing:.22em}
/* --- header --- */
.nav{height:74px}
.nav-links{gap:clamp(18px,2.4vw,38px)}
.nav-links a,.shop-link,.nav-acct,.bag{font-size:13px !important;letter-spacing:.2em}
.announce{padding:11px 16px;font-size:13px !important;letter-spacing:.24em}
/* --- generic section padding --- */
#shop{padding:var(--sec) 0}
.creds-grid .crd{justify-content:flex-start}
.creds-grid .crd-ic,.creds-grid .crd-usda{height:56px;display:flex;align-items:center;margin-bottom:8px}
.creds-grid .crd-usda{width:auto;height:56px;object-fit:contain}
.fben-copy .btn{margin-top:clamp(30px,3.4vw,44px)}
/* --- refinement layer: mobile + tablet --- */
@media(max-width:1080px){
.creds-grid{grid-template-columns:repeat(2,1fr)}
.creds-grid .crd:nth-child(2n+1){border-left:0 !important;padding-left:0}
.creds-grid .crd:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media(max-width:760px){
.creds-grid{grid-template-columns:repeat(2,1fr);column-gap:22px}
.creds-grid .crd{border-left:0 !important;padding:26px 0}
.creds-grid .crd + .crd{border-left:0 !important;padding-left:0}
.creds-grid .crd:nth-child(2n+1){border-left:0 !important;padding-left:0}
.creds-grid .crd:nth-child(n+3){border-top:1px solid var(--rule)}
.creds-grid .crd-ic,.creds-grid .crd-usda{height:46px}
.creds-chips{flex-wrap:wrap;gap:10px 16px}
.creds-chips li{padding:0}
.fben-two{grid-template-columns:1fr}
.fbt{padding:24px 0}
.fbt + .fbt{border-left:0;border-top:1px solid var(--rule);padding-left:0}
.fben-ph{gap:10px}
.shop-grid{grid-template-columns:1fr;max-width:none}
.pcard .ph{aspect-ratio:4/5}
.fh-trust{margin-top:24px}
.btn,.fh-btn{padding:18px 28px}
.fh-btn.solid{padding:18px 30px;flex:1;text-align:center}
.fh-ctas{width:100%;gap:8px}
.fh-waveline{display:none}
.foot-nav{gap:2px 20px}
}
/* --- refinement: reviews de-boxed --- */
.hrev{background:var(--paper2)}
.hrev-head{margin-bottom:clamp(34px,4vw,58px)}
.hrev-grid{gap:clamp(28px,4vw,64px);align-items:start}
.hrev-score{background:transparent;border:0;padding:0}
.rvs-num{font-weight:200;font-size:clamp(64px,7vw,104px);line-height:.9;letter-spacing:-.03em}
.stars.lg{margin:14px 0 18px}
.rvs-meta{font-size:16px !important;color:var(--muted)}
.rvs-src{color:var(--muted);margin-top:16px;max-width:40ch}
.hrev-flavs{gap:0;border-top:1px solid var(--rule)}
.rvs-flav{background:transparent !important;border:0 !important;border-radius:0 !important;
padding:26px 24px 26px 0 !important}
.rvs-flav + .rvs-flav{border-left:1px solid var(--rule) !important;padding-left:24px !important}
.rvs-fn{font-size:19px !important;font-weight:300;letter-spacing:-.005em}
.rvs-fr{font-size:16px !important}
.rvs-fp{font-size:13px !important;color:var(--muted)}
.rvs-go{font-size:13px !important;letter-spacing:.2em}
@media(max-width:900px){
.hrev-flavs{border-top:0}
.rvs-flav{padding:22px 0 !important;border-top:1px solid var(--rule) !important}
.rvs-flav + .rvs-flav{border-left:0 !important;padding-left:0 !important}
}
/* --- refinement: community wall --- */
.ugc{background:var(--ink)}
.ug-head{margin-bottom:clamp(30px,3.6vw,52px)}
.ug-tile{width:clamp(240px,23vw,360px) !important}
@media(max-width:820px){.ug-tile{width:min(72vw,340px) !important}}
.ug-foot{margin-top:clamp(28px,3.4vw,46px)}
/* --- refinement: founder --- */
.fnd-ph img{aspect-ratio:5/4 !important;object-position:center 55%}
@media(max-width:820px){.fnd-ph img{aspect-ratio:4/3 !important}}
/* --- refinement: retail with more presence --- */
.retail{padding:clamp(64px,7.5vw,116px) 0}
.rt-grid{align-items:center}
.rt-grid .h-sec{font-size:clamp(30px,3.6vw,50px) !important}
/* --- refinement: final CTA, cans on the dark ground --- */
.finalcta .fc-ph img{background:transparent;border-radius:0;width:100%;max-width:520px;margin-left:auto;
filter:drop-shadow(0 40px 60px rgba(0,0,0,.55))}
.fc-grid{align-items:center}
.fnd-ph img{object-position:center 42%}
.cut-sub,.cut-side .sub{color:#CCC8C0 !important}
.cut-eye{color:#B5B2AB !important}
.belief .bl-sub{color:#D2CFC7 !important}
.finalcta .sub{color:#CCC8C0 !important}
.statbar .sb-k{color:#C3C0B8 !important}
.ugc .ug-sub{color:#CCC8C0 !important}
.foot-brand .fb-sub{color:#C7C4BC !important}
/* ============================================================================
SITE SYSTEM — applied to every page (9 Sep 2026)
One typeface, one weight ladder, one scale, no synthesised bold, no boxes.
============================================================================ */
/* --- 1 · typeface + weights everywhere. NH ships 200/300/400/500 only,
so nothing may ask for 600+ or the browser fakes it. --- */
html,body,button,input,select,textarea,optgroup,summary,legend{
font-family:'NH',Helvetica,Arial,sans-serif;
font-synthesis-weight:none;-webkit-font-synthesis:none;font-synthesis:none}
h1,h2,h3,h4,h5,h6{font-weight:300}
h1,h2{font-weight:200}
strong,b,th,dt{font-weight:500}
.tl h3,.rec h4,.wi-h,.rd-h,.gx-cap,.opt .nm{font-weight:400}
/* --- 2 · one type scale, everywhere ---
micro 13 · body 16 · lead 17-20 · title 23-30 · section 32-60 · display 64-104 */
.eyebrow,.crd h3,.sb-k,.fh-trust li,.foot-nav a,.nav-links a,.nav-acct,.bag,
.btn,.fh-btn,.announce,.cr-num,.cr-tag,.rl,.k,.fl-lbl,.fl-badge,.wi-tag,.save,
.meta,.pr,.rvc-src,.rvs-go,.rvs-fp,.qstep-lbl,.tl .n,.rvw-tags span,.gx-cap,
figcaption,.foot-soc a,.foot-base span,thead th{font-size:13px !important;letter-spacing:.2em}
.eyebrow,.crd h3,.fh-trust li,.rl,.k,.wi-tag,.sb-k{text-transform:uppercase}
p,li,dd,blockquote p,.note,.sub,.rvs-meta,.fbt-list li,.cr-inner p,.faq-a p,
.ctc-card p,.crd p,.fl-card p,.rec p,.tl p,.opt .lo,.prose p,.prose li{font-size:16px !important}
.sub,.pg-lede,.fh-lede,.bl-sub{font-size:clamp(16px,1.45vw,19px) !important}
h3,.pcard h3,.ctc-card h2,.rec h4,.tl h3{font-size:clamp(19px,1.7vw,23px) !important}
.h-sec,.wi-h,.rd-h{font-size:clamp(32px,4.2vw,58px) !important}
/* --- 3 · de-box: hairlines, never cards --- */
.opt,.qty,.rec,.tl,.quiz-card,.routine,.fl-card,.ctc-card,.rvw2-score,.rvc,
.gx-main,.gx-t,.gallery .main,.thumbs button,.compare-wrap{
background:transparent !important;border-radius:0 !important;box-shadow:none !important}
.rec,.tl,.fl-card,.ctc-card,.rvc,.quiz-card,.routine{border:0 !important;
border-top:1px solid var(--rule) !important;padding-left:0 !important;padding-right:0 !important}
.gallery .main,.gx-main,.gx-t,.thumbs button{border:0 !important;background:var(--paper2) !important}
.opt{border:0 !important;border-top:1px solid var(--rule) !important;padding:20px 0 !important}
.ph2 .opt{border-top-color:#565653 !important}
.qty{border:1px solid var(--rule) !important;border-radius:0 !important}
.ph2 .qty{border-color:#7E7E7C !important}
.compare-wrap{border:0 !important;border-top:1px solid var(--rule) !important}
.rvw-tags span,.qopt{border-radius:0 !important;border-color:var(--rule) !important;background:transparent !important}
.rd-ic,.cut-ic{border-radius:0 !important}
/* --- 4 · one button system --- */
.btn,.fh-btn,.qopt,.rbar .rgo,.fl-btn,.ph2-btn{border-radius:0 !important;
font-size:13px !important;letter-spacing:.22em;font-weight:500}
.btn,.ph2-btn,.fl-btn{padding:19px 34px}
.rbar .rgo{padding:17px 30px}
/* --- 5 · inputs --- */
input,select,textarea{border-radius:0 !important;font-size:16px !important}
.fl-input,.fl-form input{border:1px solid var(--rule) !important;background:transparent !important;height:58px}
/* --- 6 · section rhythm on inner pages --- */
.pghead,.prose,.faqs,.ctc,.fl-hero,.fl-body,.rd,.gx{padding-top:var(--sec-s);padding-bottom:var(--sec-s)}
/* --- 7 · fold the stragglers into the ramp --- */
.stars,.ph2-rating,.ph2-rating a,.qhint,.rt,.rvw-meta,.hrev .rvs-fr b,
.ph2-specs span,.ph2-specs .dot,.spec span,.rd-meta .v{font-size:16px !important;letter-spacing:normal}
.qq{font-size:clamp(26px,3.2vw,40px) !important}
.qhint,.rt{color:var(--muted)}
.faq-i summary{font-size:clamp(18px,1.9vw,23px) !important;letter-spacing:-.005em}
.sb-n i,.igs-n i{font-size:.42em !important;letter-spacing:normal}
.ph2-meta,.ph2-meta span,.rd-line,.rd-line span{font-size:16px !important;letter-spacing:normal}
.facts-strip span,.marquee .track span{font-size:16px !important}
.rd-line{font-size:16px !important}
table td,table th,.compare-wrap td,.compare-wrap th{font-size:16px !important}
.compare-wrap thead th{font-size:13px !important}
details .a,.satc .nm,.satc .t .nm{font-size:16px !important}
/* ============================================================================
SPACING SYSTEM — one rhythm, every section, every page, mobile and desktop
============================================================================ */
:root{
--gut:clamp(22px,4vw,64px); /* horizontal gutter */
--sec:clamp(72px,8.5vw,150px); /* major section */
--sec-s:clamp(56px,6.5vw,104px); /* minor section */
--head:clamp(30px,4vw,56px); /* section head -> content */
--stack:clamp(16px,1.6vw,20px); /* paragraph rhythm */
--cta:clamp(26px,3.2vw,42px); /* content -> CTA */
}
.wrap{padding-left:var(--gut);padding-right:var(--gut)}
/* every section gets the same vertical rhythm */
main > section,
section#shop,.belief,.statbar,.fben,.creds,.hrev,.ugc,.founder,.retail,.finalcta,
.pghead,.prose,.faqs,.ctc,.rd,.gx,.ritual-band,.story{
padding-top:var(--sec);padding-bottom:var(--sec)}
.statbar,.retail,.pghead,.prose,.faqs,.ctc{padding-top:var(--sec-s);padding-bottom:var(--sec-s)}
.belief,.finalcta{padding-top:calc(var(--sec) * 1.12);padding-bottom:calc(var(--sec) * 1.12)}
.fh,.ugc,footer{padding-top:0}
.ugc{padding-top:var(--sec)}
footer{padding-top:var(--sec);padding-bottom:clamp(32px,3.4vw,48px)}
/* section head rhythm */
.sec-head,.creds-head,.hrev-head,.ug-head,.pghead .wrap{margin-bottom:var(--head)}
.pghead .wrap{margin-bottom:0}
.eyebrow{margin-bottom:16px;display:block}
.sec-head .sub,.creds-head .sub,.pg-lede,.rt-grid .sub,.fnd-copy .sub,.fben-copy .sub{margin-top:var(--stack)}
.fnd-copy .sub + .sub,.fben-copy .sub + .sub,.prose p + p{margin-top:var(--stack)}
.sec-foot,.fben-copy .btn,.creds-head + *,.rt-ctas{margin-top:var(--cta)}
.bl-cta,.fnd-copy .btn,.finalcta .btn{margin-top:var(--cta)}
/* grid gutters */
.shop-grid{gap:clamp(20px,2.6vw,40px)}
.fben-grid,.fnd-grid,.fc-grid,.hrev-grid{gap:clamp(32px,5vw,88px)}
.creds-grid .crd{padding-top:clamp(26px,2.8vw,40px);padding-bottom:clamp(26px,2.8vw,40px)}
.sb-row{gap:clamp(20px,2.6vw,40px)}
/* mobile: tighter but never cramped */
@media(max-width:820px){
:root{--sec:clamp(60px,13vw,84px);--sec-s:clamp(48px,10vw,68px);
--head:clamp(24px,6vw,34px);--cta:clamp(24px,6vw,32px)}
.fh{padding:0 !important}
.fh-foot{padding-top:30px;padding-bottom:34px}
.belief,.finalcta{padding-top:calc(var(--sec) * 1.1);padding-bottom:calc(var(--sec) * 1.1)}
.shop-grid{gap:44px}
.fben-grid,.fnd-grid,.fc-grid,.hrev-grid{gap:30px}
.sb-row{gap:28px 22px}
.pcard .body{padding-top:18px}
.creds-grid .crd{padding-top:26px;padding-bottom:26px}
footer{padding-bottom:34px}
}
/* snap the remaining sections onto the same ramp */
.whyings,.ing-close,.fl-direct,.rvw2,.timeline,.receipts-dark,.occ-band,.compare,
.faq-sec,.ing-hero,.ph2,.fl-res,.fl-hero,.fl-ret,.pillars,.gx2,.ladder{
padding-top:var(--sec);padding-bottom:var(--sec)}
.pillars,.fl-ret,.fl-hero,.fl-res,.gx2,.rvw2{padding-top:var(--sec-s);padding-bottom:var(--sec-s)}
.ladder{padding-top:0}
.quiz-shell{padding-top:var(--sec-s);padding-bottom:var(--sec-s)}
.rbar,.rbar *,#rb-t{color:#fff !important}
.rbar .rl{color:#DEDEDE !important}
/* visible focus on every focusable element, every page */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,details:focus-visible{
outline:2px solid var(--ink) !important;outline-offset:3px !important}
.ph2 a:focus-visible,.ph2 button:focus-visible,.ph2 select:focus-visible,
.belief a:focus-visible,.finalcta a:focus-visible,.statbar a:focus-visible,
.cut a:focus-visible,.cut button:focus-visible,.ugc a:focus-visible,
footer a:focus-visible,.rbar a:focus-visible{outline-color:#fff !important}
/* sections that own their own height must not take the global rhythm */
.cut,.fh,.marquee,.ingband,.facts-strip{padding-top:0 !important;padding-bottom:0 !important}
.ingband{margin:0}
/* ============================================================================
Real brand assets, live integrations (9 Sep 2026)
============================================================================ */
/* hero trust: the brand's own badges, knocked to white over photography */
.fh-trust li{gap:10px}
.fh-trust img{width:26px;height:26px;object-fit:contain;flex:none}
.fh-trust img.inv{filter:brightness(0) invert(1)}
.fh-trust li:first-child img{filter:none;width:30px;height:30px}
/* stat bar: numbers + the real USDA seal, no drawn glyphs */
.sb{gap:14px}
.sb-seal{width:clamp(64px,6vw,92px);height:auto}
.sb-cert{gap:16px}
/* credentials: the brand's real badges */
.creds-grid .crd-badge{width:clamp(54px,4.6vw,68px);height:auto;margin-bottom:14px}
.creds-grid .crd:not(:first-child) .crd-badge{filter:none}
.creds-grid .crd-word{display:block;font-size:13px !important;font-weight:500;letter-spacing:.2em;
text-transform:uppercase;line-height:1.5;color:var(--muted);margin-bottom:14px;
min-height:clamp(54px,4.6vw,68px);display:flex;align-items:center}
.creds-chips{display:block;border-top:1px solid var(--rule);padding-top:26px;
font-size:13px !important;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
/* functional benefit columns without glyphs */
.fbt h3{margin-bottom:16px}
/* founder: real UGC */
.fnd-ph img{aspect-ratio:4/5 !important;object-position:center 22%}
@media(max-width:820px){.fnd-ph img{aspect-ratio:1/1 !important}}
/* final CTA: full-bleed three-can set shot */
.finalcta{position:relative;isolation:isolate;padding:0;background:#0B0B0A}
.fc-bg{display:block}
.fc-bg img{width:100%;height:100%;object-fit:cover;display:block;
max-height:min(78svh,780px);min-height:420px}
.finalcta .fc-copy{position:absolute;inset:auto 0 0 0;padding-bottom:clamp(40px,6vw,88px);z-index:2}
.finalcta::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 38%,rgba(0,0,0,0) 72%)}
.fc-h{max-width:16ch}
.finalcta .sub{max-width:34ch}
@media(max-width:820px){
.fc-bg img{max-height:none;aspect-ratio:4/5;min-height:0}
.finalcta .fc-copy{padding-bottom:34px}
}
/* Okendo */
.hrev-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:var(--cta)}
.hrev-note{font-size:13px !important;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.oke-mount{margin-top:var(--sec-s)}
/* footer social icons */
.foot-soc a{display:inline-flex;align-items:center;gap:9px}
.sico{width:19px;height:19px;flex:none}
/* community wall */
.ug-wall{min-height:120px}
/* Pure Water: a real photographed droplet, blended into the dark ground */
/* final CTA: copy holds the left, cans hold the right */
.finalcta .fc-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
align-items:flex-start;padding-bottom:0}
.finalcta .fc-copy > *{max-width:min(30ch,42%)}
.finalcta::after{background:linear-gradient(to right,rgba(0,0,0,.45) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,0) 66%)}
@media(max-width:820px){
.finalcta{padding:0 0 var(--sec) 0}
.finalcta .fc-copy{position:static;padding-top:34px;align-items:flex-start}
.finalcta .fc-copy > *{max-width:100%}
.finalcta::after{display:none}
}
/* ---- footer brand mark (replaces the repeated headline) ---- */
.fb-mark{display:block;width:clamp(112px,11vw,150px);height:auto;opacity:.95;margin:0 0 14px}
.foot-brand .fb-sub{max-width:34ch}
/* ==========================================================================
CONTRAST LAYER — WCAG 2.1 AA (4.5:1 body / 3:1 large). Last layer wins.
========================================================================== */
/* 1 · the accent review card lost its fill in the de-boxing pass, which left
white type on cream. De-box it properly: ink type, accent as a rule. */
.rvc-alt{background:transparent !important;border-top:2px solid var(--acc,#B4185F) !important}
.rvc-alt,
.rvc-alt .rvc-body,
.rvc-alt .rvc-by b{color:var(--ink,#141410) !important}
.rvc-alt .rvc-src{color:var(--acc,#B4185F) !important}
.rvc-alt .rvc-by{color:var(--muted,#5C5849) !important}
.rvc-alt .lnk{color:var(--ink,#141410) !important;text-decoration-color:var(--acc,#B4185F) !important}
/* 2 · muted roles on PAPER grounds — one token, 6.3:1 */
.rvc-src,.rvc-by,.rd-note,.rd-tbl .k,.sub,.meta,.save,.pr,.fit-link,
figcaption,.gx-cap,.rvw-tags span,.qstep-lbl,.tl .n,
.pcard .note,.crd p,.faq-a p,.cr-inner p,.fnd-copy .sub,.ctc-card p{color:var(--muted,#5C5849)}
s,.was,del{color:#5C5849}
/* 3 · muted roles on DARK grounds — 6.6:1 */
.dark .rvc-src,.dark .rvc-by,.dark .rd-note,.dark .rd-tbl .k,.dark .sub,.dark .meta,
.ph2 .rd-note,.ph2 .rd-tbl .k,.ph2 .sub,.ph2 .meta,
.cr .rd-note,.cr .rd-tbl .k,.cr .sub,.cr .meta,
.crsec .sub,.crsec .rd-note,.crsec .rd-tbl .k{color:#9D9A92}
.fh-occ,.fh-hero .eyebrow{color:#FFFFFF !important}
/* 4 · contrast fixes for the remaining cases — opacity on text is never AA-safe */
.opt .price s,.opt.on .price s,.price s{opacity:1 !important;color:#5C5849 !important}
.rd-meta .k,.rd-row .k{color:#CCC8C0 !important}
.cut-list .cr-inner p,.cut-row .cr-inner p,.cut-sub{color:#9D9A92 !important}
.receipts-dark .rd-note,.receipts-dark .sub,.receipts-dark .k{color:#9D9A92 !important}
/* hero flavour tabs sit over a photograph — give the strip its own ground */
/* the hero already carries a full-bleed scrim in .fh::after — never put one on .fh-foot, it is a .wrap and paints a centred box over the photo */
.gx2-grid:focus-visible{outline:2px solid var(--ink) !important;outline-offset:3px !important}
/* ---- hero flavour switcher lives in the copy column ----
The art can never be relied on to stay clear behind it, so it sits inside the
protected left column with the rest of the copy. Opacity is never used to mute
it: opacity on text is what failed contrast. */
.fh-foot{justify-content:flex-start}
.fh-tabs{flex-direction:row !important;align-items:center !important;justify-content:flex-start;
gap:clamp(14px,2vw,28px);width:auto;order:0;flex-wrap:wrap;
margin:clamp(20px,2.4vw,30px) 0 clamp(22px,2.6vw,32px)}
.fh-tab{opacity:1 !important;color:#DEDEDE !important;
font-size:12px !important;letter-spacing:.1em;text-transform:uppercase;padding:0 0 7px;min-height:32px}
.fh-tab:hover{color:#fff !important}
.fh-tab.is-on,.fh-tab[aria-selected="true"]{color:#fff !important}
.fh-prog{opacity:.34}
.fh-tab.is-on .fh-prog{opacity:1}
@media(max-width:820px){
.fh-tabs{display:flex !important;grid-template-columns:none;width:100%;
gap:16px;margin:18px 0 20px}
.fh-tab{font-size:11.5px !important;min-height:44px;padding:0 0 6px}
}
/* ---- hero vertical rhythm ----
.fh-foot also carries .wrap, and .wrap is redefined later with the `padding`
SHORTHAND, which silently resets padding-bottom to 0 and let the trust row sit
flush on the hero's bottom edge. Restate it here, after every .wrap rule. */
.fh-foot{padding-bottom:clamp(34px,4.4vh,58px)}
/* the copy stack is bottom-anchored, so every extra pixel of hero height became
dead space above the eyebrow. Size the hero to the content instead. */
@media(min-width:821px){
.fh{height:min(84svh,752px)}
}
@media(min-width:1600px){ .fh{height:min(82svh,772px)} }
@media(max-width:820px){ .fh{height:auto !important;min-height:0 !important} }
@media(max-width:820px){ .fh-foot{padding-bottom:clamp(26px,3.4vh,40px)} }
/* ---- hero: two-line eyebrow, tighter frame ---- */
.fh-occ{line-height:1.5}
@media(min-width:821px){ .fh{height:min(84svh,720px)} }
@media(min-width:1600px){ .fh{height:min(82svh,736px)} }
/* ---- flavour cards: square, not tall ---- */
.pcard .ph{aspect-ratio:1/1 !important}
/* ---- stat bar: the USDA seal is taller than the numerals, which pushed its
label out of line with the other four. Give both the same row height. ---- */
.statbar li{display:flex;flex-direction:column}
.sb-n,.sb-seal{height:62px;display:flex;align-items:flex-end}
.sb-seal{width:auto;object-fit:contain;object-position:left bottom}
.sb-k{margin-top:14px !important}
/* ---- belief: image leads, copy sits beside it (was centred type on a black slab) ---- */
.belief{text-align:left;padding:clamp(64px,7vw,104px) 0 !important}
.bl-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(32px,5vw,80px);align-items:center}
.bl-ph{margin:0;overflow:hidden}
.bl-ph img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.bl-copy{max-width:56ch}
.belief .bl-h{margin:14px 0 0}
.belief .bl-sub{margin-top:clamp(16px,1.8vw,22px)}
.belief .bl-cta{margin-top:clamp(24px,3vw,36px)}
@media(max-width:880px){
.bl-grid{grid-template-columns:1fr;gap:clamp(24px,4vw,36px)}
.bl-ph img{aspect-ratio:3/2}
}
/* ---- functional benefit: one clean image, full column height ---- */
.fben-ph{display:block}
.fben-ph img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
/* ---- final CTA: real photography beside the copy, never under it.
White type on a sunlit towel is unreadable and a scrim is not allowed. ---- */
.finalcta .fc-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,76px);align-items:center}
/* superseded: the CTA copy is positioned in the final layer below */
.finalcta .fc-ph{margin:0;overflow:hidden;order:2}
.finalcta .fc-ph img,.finalcta .fc-ph picture{display:block;width:100%;max-width:none !important;height:auto;
aspect-ratio:4/3;object-fit:cover;margin:0 !important}
@media(max-width:880px){
.finalcta .fc-grid{grid-template-columns:1fr;gap:clamp(24px,4vw,34px)}
.finalcta .fc-ph{order:0}
.finalcta .fc-ph img{aspect-ratio:3/2}
}
/* ---- stat bar: the forced
in each label broke words at arbitrary points
("Added / sugar"). Let them wrap naturally and tighten the frame. ---- */
.statbar{padding:clamp(52px,5.5vw,84px) 0 !important}
.sb-row{align-items:start}
.sb-k{max-width:15ch;line-height:1.5;text-wrap:balance}
.sb-n{line-height:1}
.statbar .sb-seal{height:56px}
.sb-n,.statbar .sb-seal{height:58px}
@media(max-width:820px){
.statbar{padding:clamp(40px,7vw,56px) 0 !important}
.sb-k{max-width:none}
}
/* ---- final CTA: the photograph runs full width, copy sits under it on ink ---- */
.finalcta{padding:0 0 clamp(52px,6vw,88px) !important;overflow:hidden}
.finalcta .fc-grid{display:block;gap:0}
/* full-bleed: width:100vw plus symmetric negative margins. Do NOT also set
left/right — that double-counts and blows the element past the viewport. */
.finalcta .fc-ph{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
margin-top:0;margin-bottom:clamp(38px,4.4vw,64px)}
.finalcta .fc-ph img,.finalcta .fc-ph picture{display:block;width:100%;height:auto;
aspect-ratio:21/9;object-fit:cover;object-position:50% 58%;max-width:none !important}
.finalcta .fc-copy{max-width:none}
.finalcta .fc-h{max-width:20ch}
.finalcta .fc-copy .sub{max-width:44ch}
@media(max-width:820px){
.finalcta .fc-ph img{aspect-ratio:4/3}
}
/* stat bar numerals share one baseline; the inline unit must not change the line box */
.statbar .sb{display:block}
.sb-n{display:block !important;height:auto !important;line-height:1 !important;white-space:nowrap}
.sb-n i{font-style:normal;font-size:.46em;letter-spacing:0;vertical-align:baseline}
.statbar .sb-seal{display:block;height:58px;width:auto;object-fit:contain;object-position:left bottom}
.sb-k{margin-top:16px !important}
/* ---- final CTA: full-bleed photograph, copy over the grass ----
Approved exception to the no-fades rule, for this section only. Measured: sunlit
grass carries pure-white specular blowouts, so the copy column needs at least
0.60 scrim opacity to clear 4.5:1 against a blown pixel. The gradient holds .64
across the copy and is gone by 64%, so the cans stay untouched. On mobile there
is no "left side" to write into, so the copy drops to the ink below. */
.finalcta{position:relative;padding:0 0 clamp(52px,6vw,88px) !important;overflow:hidden}
.finalcta .fc-grid{display:block;position:relative}
.finalcta .fc-ph{position:relative;width:100vw;
margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:0;margin-bottom:0}
.finalcta .fc-ph img,.finalcta .fc-ph picture{display:block;width:100%;height:auto;
aspect-ratio:21/9;object-fit:cover;object-position:50% 50%;max-width:none !important}
.finalcta .fc-ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to right,
rgba(10,10,8,.82) 0%, rgba(10,10,8,.72) 22%, rgba(10,10,8,.64) 36%,
rgba(10,10,8,.30) 50%, rgba(10,10,8,0) 64%)}
.finalcta .fc-copy{position:absolute !important;left:0 !important;right:auto !important;
top:50% !important;bottom:auto !important;transform:translateY(-50%) !important;
display:block !important;z-index:3;max-width:32ch;padding:0 !important;align-items:flex-start}
.finalcta .fc-copy > *{max-width:100%}
.finalcta .fc-h{margin:0;max-width:14ch;color:#fff}
.finalcta .fc-copy .sub{max-width:34ch;color:#ECECEC !important;margin-top:clamp(14px,1.6vw,20px)}
.finalcta .fc-copy .btn{margin-top:clamp(22px,2.6vw,34px)}
@media(max-width:980px){
.finalcta{padding-bottom:clamp(44px,6vw,72px) !important}
.finalcta .fc-ph img{aspect-ratio:4/3}
.finalcta .fc-ph::after{display:none}
.finalcta .fc-ph{margin-bottom:clamp(30px,4.4vw,48px)}
.finalcta .fc-copy{position:static !important;transform:none !important;max-width:none;
top:auto !important;padding-top:0 !important}
.finalcta .fc-h{max-width:18ch}
.finalcta .fc-copy .sub{color:#D5D1C9 !important}
}
/* ---- hero geometry: the plate is 2508x1064 (2.357). The hero used to be a
fixed height, so the container ratio swung from 1.90 at 1280 to 2.99 at 2200
and object-fit:cover ate up to 35% of the plate - which is why ingredients
arrived cropped and decapitated. Lock the hero to the plate's own ratio so
nothing is ever cropped. min/max keep it sane at the extremes. ---- */
/* superseded by the contain-fit hero below */
/* superseded by the contain-fit hero below */
/* ---- HERO GEOMETRY (desktop) ----------------------------------------------
The plate is 2508x1064. It used to be object-fit:cover in a fixed-height box,
so the container ratio swung from 1.90 at 1280 to 2.99 at 2200 and cover ate
up to 35% of the art: ingredients arrived oversized, decapitated and running
off the right edge.
Two changes fix it for good:
1. The plate ground is now a single flat value (measured: stdev 0.00 across
the bare field), so the plate can be object-fit:contain over a matching
solid background and the join is invisible. Nothing is ever cropped, at
any viewport, at any height.
2. The plate is anchored to the TOP of the hero. The bare ground below it is
the colour field the copy sits on, which is how the copy stays legible
with no scrim (NO FADES on the hero) - the flavour cluster in the upper
left no longer lands behind the headline.
Height is width-led, capped by the viewport so the hero never outgrows the
screen on a short laptop. ------------------------------------------------ */
@media(min-width:821px){
/* --ph is the plate's rendered height. Everything in the hero is measured
from it: the plate is fitted (never cropped) and hung from the top, the can
floats over the plate rather than over the whole box, and the bare ground
below the plate is the colour field the copy sits on - which is what keeps
the type legible with no scrim (NO FADES on the hero). */
/* --ph is the plate's rendered height. Because the hero is always at least
42.4vw tall the contain-fit is WIDTH-bound, so the art runs edge to edge at
full size. Filling the space is the look. Capping --ph below 42.4vw shrinks
the ingredients and floats them in dead ground - do not do it again.
Hero height = max(the plate's own height, what the copy needs to clear the
flavour cluster), so the copy always lands on bare ground. */
.fh{--ph:42.4vw;
height:clamp(560px, max(42.4vw, calc(20.8vw + 462px)), 1240px) !important;min-height:0 !important}
.fh-ing{object-fit:contain !important;object-position:50% 0 !important;height:100% !important}
.fh-canwrap{top:calc(var(--ph) * .46) !important;height:calc(var(--ph) * .86) !important}
#fhp0{background:rgb(197,74,105)}
#fhp1{background:rgb(12,122,123)}
#fhp2{background:rgb(38,136,1)}
}
/* one row of four reads better beside a wide hero and buys back ~45px of copy
height, which is what clears the flavour cluster on a short laptop. */
@media(min-width:1100px){
.fh-trust{display:flex !important;flex-wrap:nowrap !important;max-width:none !important;
gap:0 clamp(16px,1.9vw,30px) !important;margin-top:20px !important}
.fh-trust li{white-space:nowrap}
}
/* ---- HERO GEOMETRY (mobile) ------------------------------------------------
90% of views are mobile, so this is the layout that matters.
What was wrong: the band was min(60svh,540px) with object-fit:cover on a 9:16
plate. The can's lid was cut off by the top edge, the whole bottom row of
ingredients was cropped away, and on a 375 or 390 phone the SHOP LEVL button
fell 40-110px below the fold. A hero that does not show the button is not
doing its job.
Now: the plate covers the hero, the image band is a fixed slice of it sized
against the viewport, and the copy sits on the same flat brand ground below
with no black slab and no seam. The can is measured off the band so it is
always whole. The five functional ingredients drop out of the mobile band on
purpose - they get a full section further down, and above the fold the space
is worth more as a clean product shot plus a visible CTA. ------------------ */
@media(max-width:820px){
.fh{--mph:clamp(232px, min(88vw, 42svh), 460px);
height:auto !important;min-height:0 !important;position:relative;padding-top:var(--mph) !important}
.fh-plates{position:absolute !important;inset:0 !important;height:auto !important;min-height:0 !important}
.fh-ing{position:absolute !important;top:0 !important;left:0 !important;width:100% !important;
height:var(--mph) !important;object-fit:cover !important;object-position:50% 8% !important}
.fh-canwrap{top:calc(var(--mph) * .50) !important;height:calc(var(--mph) * .90) !important}
/* position:relative, not static: the plates are absolutely positioned and come
first in the DOM, so a static foot paints UNDER them - the headline, the
solid button and the trust labels all vanished behind the ground. */
.fh-foot{position:relative !important;background:transparent !important;z-index:4;
padding-top:clamp(16px,3.2vw,24px) !important;padding-bottom:clamp(26px,5vw,38px) !important;
gap:16px !important}
.fh-lede{margin:10px 0 18px !important}
#fhp0{background:rgb(197,74,105)}
#fhp1{background:rgb(12,122,123)}
#fhp2{background:rgb(38,136,1)}
}
/* The can is centred and scales with the plate, so on a very wide screen the
copy column can run under it: at 2560 the lede's last characters sat on the
can body and measured 1.2-1.6:1. Cap the measure so the copy always stops
short of the can. */
@media(min-width:821px){ .fh-lede{max-width:min(420px, 40vw) !important} }
/* ---- community wall ------------------------------------------------------
The Follow button's border was resolving to the ink colour ON the ink ground,
so the section's only call to action rendered as bare text with no button
around it. Restate the border after the later .btn rules. */
.ugc .btn.ug-cta{border:1px solid rgba(244,240,231,.5) !important;color:var(--paper) !important;
background:transparent !important}
.ugc .btn.ug-cta:hover,.ugc .btn.ug-cta:focus-visible{background:var(--paper) !important;
color:var(--ink) !important;border-color:var(--paper) !important}
/* Mobile is 90% of views. At min(62vw,300px) the wall showed one huge photo per
row, which reads as a feature image, not a feed. Tighten it so two tiles plus
a peek are on screen - that reads as a wall and signals there is more to swipe. */
@media(max-width:820px){
.ug-tile{width:min(46vw,210px) !important}
.ug-wall{gap:8px}
.ug-track{gap:8px}
}
/* ---- community wall: reels play muted on hover ---------------------------
15 of the 18 posts on @drinklevl are reels, so the wall was showing stills
of video. The MP4 sits over the poster and fades in on play; the poster is
what loads on page load, the video only when someone actually hovers. */
.ug-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;pointer-events:none;transition:opacity .28s ease;background:#26241e}
.ug-tile.is-playing .ug-vid{opacity:1}
/* The still underneath stops scaling while the video is up, or the two layers
drift apart and the edges shimmer. */
.ug-tile.is-playing img{transform:none !important}
/* Reels get a play mark instead of the Instagram glyph, and unlike that glyph
it stays visible - it is telling you there is video here, which is only
useful before you hover. */
.ug-ig.ug-play{opacity:.9;transform:none;background:rgba(20,20,16,.5)}
.ug-ig.ug-play svg{margin-left:2px}
@media(hover:hover){ .ug-tile:hover .ug-ig.ug-play{opacity:1} }
.ug-tile.is-playing .ug-ig.ug-play{opacity:0}
@media(prefers-reduced-motion:reduce){
.ug-vid{display:none}
.ug-ig.ug-play{opacity:.9}
}
/* ---- orphans and widows --------------------------------------------------
A last line carrying one stray word reads as a mistake, and at 390px it
happens constantly. Headings get `balance`, which evens the line lengths of
short blocks; body copy gets `pretty`, which the browser uses to avoid
leaving a short final line. Measured on the homepage: 20 blocks with a last
line under 30% of the line above, at 390 and 1440. ------------------------ */
h1, h2, h3, h4,
.fh-h, .ug-h, .bl-h, .fc-h, .fb-h, .h-sec, .fben-h, .pg-h, .fnd-punch,
.eyebrow, .bl-kicker, .sb-k, .pcard h3, .rd-h {
text-wrap: balance;
}
p, li, .sub, .lede, .fh-lede, .ug-sub, .bl-sub, .pg-lede, .note, .rd-body {
text-wrap: pretty;
}
/* ---- mobile hero plate: nothing cropped, all six ingredients -------------
The old mobile band was object-fit:cover on a 9:16 plate, so the sides were
sliced off and only the flavour fruit and the ashwagandha survived the crop.
The plate is now 4:3 with all six ingredients and a clear centre channel for
the can, and it is CONTAINED over its own flat ground - so every ingredient
is whole at every phone width, and the letterbox is invisible. */
@media(max-width:820px){
.fh-ing{object-fit:contain !important;object-position:50% 50% !important}
.fh-canwrap{top:calc(var(--mph) * .50) !important;height:calc(var(--mph) * .84) !important}
#fhp0{background:rgb(184,61,91)}
#fhp1{background:rgb(8,118,117)}
#fhp2{background:rgb(84,97,58)}
}
/* ---- flavour tabs: contrast on the plate ground ---------------------------
The tab labels sit directly on the hero plate's solid ground, so their
contrast changes with the flavour. At 11.5px they need 4.5:1, and
rgba(255,255,255,.86) composites to 4.44 on the Acai + Berry mobile ground
and 3.76 on the desktop one - both fail AA, and axe only caught the mobile
pair because it could not resolve the painted background at desktop widths.
Solid white clears every ground with room to spare (4.61 in the worst case,
Acai + Berry at desktop). The selected tab is still marked by its rule and by
aria-selected, so nothing is carried by colour alone. */
.fh-tab,
.fh-tab:hover,
.fh-tab:focus-visible,
.fh-tab.is-on,
.fh-tab[aria-selected="true"]{ color:#fff !important; opacity:1 !important }
.fh-tab:hover .fh-prog,
.fh-tab:focus-visible .fh-prog{ opacity:.7 }
.fh-tab.is-on .fh-prog,
.fh-tab[aria-selected="true"] .fh-prog{ opacity:1 }
/* ---- hero: one ground colour, and the reviews stop scrolling sideways ------
The mobile plate is chosen by aspect ratio and the ground colour was being
set by width, so a tall narrow window could pair the mobile art with the
desktop ground and paint a seam straight across the hero. The mobile plates
are now cut from the desktop ones, so both use the same solid and the two
conditions can never disagree again. */
#fhp0{background:rgb(197,74,105) !important}
#fhp1{background:rgb(12,122,123) !important}
#fhp2{background:rgb(38,135,0) !important}
/* Nobody swipes sideways on a phone. The flavour ratings were a horizontal
snap carousel below 820px, so two of the three flavours sat off screen with
nothing to say so. Stack them. */
@media(max-width:900px){
.hrev-flavs{
display:grid !important;
grid-auto-flow:row !important;
grid-template-columns:1fr !important;
grid-auto-columns:auto !important;
overflow-x:visible !important;
scroll-snap-type:none !important;
margin-inline:0 !important;
padding-inline:0 !important;
}
.rvs-flav{scroll-snap-align:none !important}
}
/* Flavour tabs fit on one line on a phone. At 375 and 390 the three labels plus
their gaps came to more than the row, so "Pineapple + Coconut" wrapped onto its own
line and pushed the trust marks toward the fold. Tighten the tracking and the
gap rather than the type: 11.5px is already the floor. */
@media(min-width:341px) and (max-width:430px){
.fh-tabs{flex-wrap:nowrap !important; gap:0 clamp(6px,2vw,14px) !important}
.fh-tab{letter-spacing:.03em !important; white-space:nowrap; flex:0 0 auto}
}
/* With every tab label now the same white, the rule under the selected one is
the only thing marking it, so it has to be there even when the progress
animation is not running. It was parked at scaleX(0) and only the auto-rotate
animation grew it, which left the selected tab unmarked whenever rotation was
paused or reduced motion stopped the animation. */
.fh-tab.is-on .fh-prog,
.fh-tab[aria-selected="true"] .fh-prog{ transform:scaleX(1); height:2px }
.fh-tab.is-on.is-run .fh-prog{ animation:fhProg var(--fh-int,5s) linear forwards }
@media(prefers-reduced-motion:reduce){
.fh-tab.is-on .fh-prog,
.fh-tab[aria-selected="true"] .fh-prog{ animation:none; transform:scaleX(1) }
}
/* The hero lede was white at opacity .92, which composites to #faf1f3 and lands
at 4.15 on the Acai + Berry ground. It only ever passed because the phone
used a darker solid than the desktop; now that both plates share one ground
it fails at every width, and axe sees it only on the phone because it cannot
resolve the background at desktop sizes. White at full strength is 4.61 here,
which is the ceiling on this ground, so the softening has to go. */
.fh-lede{opacity:1 !important}
/* ---- phone: stop cropping the picture out of the picture -------------------
Several images were squeezed into a box of the wrong shape with object-fit:
cover, which throws away whatever does not fit. On the belief photo that took
the woman's head off the top and the can off the bottom, which is the whole
point of the shot. Give these their own proportions on a phone and let the
frame be the frame. Backgrounds that carry type over them are left cropping,
because that is what a background is for. */
@media(max-width:880px){
.bl-ph img,
.fl-dimg img{
aspect-ratio:auto !important;
height:auto !important;
object-fit:contain !important;
}
}
/* The product page hero is the same build as the home hero - plate behind, can
in front - so it needs the same treatment. It was still on cover, which ate
25% off the sides of a 4:3 flat lay: the outer ingredients gone and the can
clipped at the top. The picture takes the plate's own 4:3 so contain fills it
exactly with no letterbox, over a solid matching the plate ground so the join
is invisible either way. --plate is set per flavour on the section.
The can is sized and placed off that same 4:3 - 37.5vw is the middle of the
picture, 67.5vw is 90% of its height - because it is positioned against the
section, not the picture, and the old svh values put its lid above the top
edge the moment the plate stopped being cropped. The copy below keeps the
paper ground it is styled for; only the picture carries the flavour solid. */
@media(max-width:820px){
.ph2 picture{display:block;line-height:0;font-size:0;background:var(--plate, transparent)}
.ph2 picture .ph2-bg, .ph2-bg{
position:relative;display:block;width:100%;
height:auto !important;
aspect-ratio:4/3;
object-fit:contain !important;
object-position:50% 50% !important;
background:var(--plate, transparent);
}
/* The can is absolutely positioned against the section, whose padding box
starts above the picture, so its offset has to carry that padding. Own the
padding here as a variable rather than reading it from elsewhere, so the
two can never drift apart: 37.5vw is the middle of the 4:3 picture and
67.5vw is 90% of its height. */
.ph2{padding-top:var(--ph2pad, 60px) !important}
.ph2-can{left:50% !important;
top:calc(var(--ph2pad, 60px) + 37.5vw) !important;
height:67.5vw !important;width:auto;
transform:translate(-50%,-50%) rotate(0deg) !important}
}
@media(min-width:700px) and (max-width:820px){ .ph2{--ph2pad:84px} }
/* Only the selected flavour gets a rule. The other two were carrying a faint
one at .34, which reads as three underlines rather than one selection. */
.fh-tab .fh-prog{opacity:0 !important}
.fh-tab.is-on .fh-prog,
.fh-tab[aria-selected="true"] .fh-prog{opacity:1 !important}
@media(hover:hover){
.fh-tab:hover .fh-prog,
.fh-tab:focus-visible .fh-prog{opacity:.55 !important}
.fh-tab.is-on:hover .fh-prog{opacity:1 !important}
}
/* The rule doubles as the auto-rotate progress bar, so it starts each cycle at
zero width. With the other two tabs no longer carrying one, that left a beat
with nothing marking the selection at all. A faint full-width hairline sits
under the active tab always; the solid one grows over it. */
.fh-tab.is-on, .fh-tab[aria-selected="true"]{ box-shadow: inset 0 -1.5px 0 rgba(255,255,255,.45) }
/* ---- phone hero: size the box to the art, not the other way round ----------
--mph was min(88vw, 42svh), which at 390 is 343 while a 4:3 plate only needs
293. Contain then letterboxed 50px of ground the reader is paying for in
scroll, and the art itself stayed small. The plate is 1440x1180 now - 1.22,
the tallest the art can be with SHOP LEVL still above the fold on an SE - and
the box is set from the same ratio, so contain fills it edge to edge with
nothing wasted and the ingredients come up about 40%. The svh cap only bites
on a near-square window, where letterboxing is the right answer anyway. */
@media(max-width:820px){
.fh{--mph: clamp(232px, min(calc(100vw / 1.22), 46svh), 460px) !important}
}
/* The phone plate encodes its ground a unit off the desktop one - WebP at q88
shifts the whole flat field by exactly 1, uniformly, which is what keeps the
file at 95KB instead of 740KB. Paint the solid at the value the file actually
carries so the two can never show a join. */
@media(max-aspect-ratio: 4/5){
#fhp0{background:rgb(197,74,104) !important}
#fhp1{background:rgb(11,123,124) !important}
#fhp2{background:rgb(38,135,0) !important}
}
/* ---- final CTA: one black, not two --------------------------------------
The section painted #0B0B0A while the footer under it paints the ink at
#141410. The deliberate breathing room below the full-bleed shot therefore
landed as a band of a slightly different black between the picture and the
footer, which reads as a bar someone left in by accident. Same ink as the
footer and the two run together. */
.finalcta{background:var(--ink) !important}
/* That band was not the background, it was this scrim. .finalcta::after is
inset:0 on the SECTION, so it painted its dark left-to-right gradient over the
breathing room below the picture as well - a dark rectangle ending at 66% of
the width, sitting between the shot and the footer. The scrim the copy
actually needs lives on .fc-ph, bounded to the picture. This one is redundant.
Keeping it would mean bounding it to the picture and stacking two scrims. */
.finalcta::after{display:none !important}
/* ===== half-can section: it has to fit the window it is shown in =====
.cut-sticky is 100svh with overflow hidden and no padding, so the air above
and below the content was only ever the viewport's leftover. The column runs
about 975px tall with a row open, so on any window shorter than that the
leftover is zero: the CTA lands on the seam with the section below and the
can gets clipped at the same time. Two tiers. Tighten the row rhythm - the
icons and the padding around them, never the type - so it fits a tall window
with real air. Below the height where even that fits, stop pretending it is a
sticky scene and let it lay out normally with proper section padding. */
@media(min-width:901px){
.cut-sticky{padding-block:clamp(40px,5svh,88px);box-sizing:border-box}
}
@media(min-width:901px) and (max-height:1120px){
.cut-list .cr-ic{width:42px;height:42px}
.cut-list .cr-head{padding:9px 0}
.cut-list{margin-top:16px}
.cut-list .cr-inner{padding:2px 0 12px 70px}
.cut-cta{margin-top:20px}
.cut-canwrap{height:min(72svh,660px)}
}
@media(min-width:901px) and (max-height:980px){
.cut{height:auto}
.cut-sticky{position:relative;height:auto;overflow:visible;
padding-block:clamp(76px,9vw,124px)}
.cut-canwrap{height:min(76vh,700px)}
.cut-list .cr-ic{width:52px;height:52px}
.cut-list .cr-head{padding:13px 0}
.cut-list{margin-top:26px}
.cut-list .cr-inner{padding:2px 0 18px 80px}
.cut-cta{margin-top:34px}
}
/* ===== shop menu: the tiles ARE the shop squares =====
Each tile used to be a flat brand colour with the can floated over it and the
copy laid across the middle, so the type sat on the can, the label wrapped
mid-word, and the foot row ran into the bottom of the tiles. Show the same
photograph the shop grid shows, and put the words underneath it where they
have room. */
@media(min-width:901px){
.mega-grid{grid-template-columns:repeat(4,1fr);
gap:clamp(14px,1.7vw,24px);
padding-top:clamp(20px,2.4vw,30px);
padding-bottom:clamp(22px,2.6vw,34px);
align-items:start}
.mega-tile{display:block;min-height:0;padding:0;background:none;color:var(--ink);
border-radius:0;overflow:visible;box-shadow:none;isolation:auto;
aspect-ratio:auto}
.mt-ph{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;
border-radius:3px;background:var(--tile,var(--ink))}
.mt-ph img{position:static;left:auto;top:auto;width:100%;height:100%;
object-fit:cover;display:block;transform:none;
transition:transform .55s cubic-bezier(.2,.6,.2,1)}
.mega-tile .mt-txt{position:static;z-index:auto;display:flex;flex-direction:column;
gap:2px;padding:13px 2px 0;width:auto;color:var(--ink)}
.mega-tile .mt-txt::before{display:none}
.mega-tile .mt-name{display:block;font-weight:400;font-size:15.5px;
letter-spacing:-.004em;line-height:1.25;color:var(--ink)}
.mega-tile .mt-occ{font-size:11.5px;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted,#5C5849);opacity:1;white-space:nowrap}
.mega-tile .mt-go{display:block;margin-top:7px;font-size:11.5px;font-weight:500;
letter-spacing:.2em;text-transform:uppercase;color:var(--muted,#5C5849);opacity:1;
transform:none;transition:color .25s}
/* the fourth card reads as one of the four, so it is set the same way */
.mega-ritual{text-align:left}
@media(hover:hover){
.mega-tile:hover{transform:none;box-shadow:none}
.mega-tile:hover .mt-ph img{transform:scale(1.045)}
.mega-tile:hover .mt-go{color:var(--ink)}
.mega-tile:hover .mt-name{text-decoration:underline;text-underline-offset:3px;
text-decoration-thickness:1px}
}
.mega-tile:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.mega-tile:focus-visible .mt-go{color:var(--ink)}
/* The fourth card is the three of them together. It was three separate can
cut-outs overlapped with negative margins on flat black - forcing an overlap
the cans were never shot at, with a hard cut-out edge against a dead ground,
which is what read as fake. It is now one photograph of the three of them
on the ingredient frame, so the tile is real the way the other three are. */
.mega-ritual .mt-ph{background:var(--ink)}
.mega-ritual .mt-name{font-size:15.5px;font-weight:400}
/* The foot used to repeat three of the four links that sit in the nav bar an
inch above it, plus a fourth the tiles already cover. What is left is the
one line that is not said anywhere else: it answers "are these actually
different formulas" at the moment someone is choosing between them. */
.mega-foot{border-top:1px solid var(--hair);padding-top:14px;padding-bottom:20px;
display:block}
.mega-foot .mf-note{display:block;font-size:13.5px;color:var(--muted);font-weight:300}
}
/* =====================================================================
PRODUCT PAGES, rebuilt 11 Sep 2026
Everything below runs on the site's own spacing scale (--s1..--s7,
--head, --stack) and its type scale (.eyebrow, .h-sec, .sub), so the
product pages measure the same as the home page rather than carrying
their own numbers.
===================================================================== */
/* ---- gallery: it was a horizontal scroller of 86vw cards, so a phone saw
one contain-fitted can with a third of the section empty above it. Same
five pictures, laid out so they all show. ---- */
@media(max-width:900px){
.gx2-grid{grid-auto-flow:row !important;grid-auto-columns:auto !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
overflow:visible !important;scroll-snap-type:none !important;
margin-inline:auto !important;gap:10px 10px !important}
/* the desktop mosaic pins each tile to a 12-column track; leave those on and
the tiles run straight off the side of a phone */
.gx2-t{grid-column:auto !important;grid-row:auto !important;
scroll-snap-align:none !important;aspect-ratio:1/1}
.gx2-a{display:none} /* the hero already shows the can front */
.gx2-e{grid-column:1 / -1 !important;aspect-ratio:16/9}
.gx2-fit img{padding:6% 8%}
/* caption under the picture, not over it: white type sat on the cream
nutrition panel and vanished */
.gx2-t{overflow:visible;border-radius:0}
.gx2-t img{border-radius:3px;aspect-ratio:1/1}
.gx2-e img{aspect-ratio:16/9}
.gx2-t figcaption{position:static;padding:9px 2px 0;color:var(--muted);
background:none !important;opacity:1;transform:none;text-shadow:none;
font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.gx2-fit{background:none}
.gx2-fit img{background:var(--paper2)}
.gx2-e{background:none}
.gx2-e img{background:#000}
}
/* ---- one ritual section, not two. The old pair ran the same sentence
twice: "adaptogens work over weeks, the win is the return". ---- */
.ritual2{background:var(--paper)}
.rt2-grid{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
.rt2-ph{border-radius:3px;overflow:hidden;background:var(--paper2)}
.rt2-ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;display:block}
.rt2-side .h-sec{margin-top:var(--s2,16px)}
.rt2-side .sub{margin-top:var(--stack,18px);max-width:46ch}
.rt2-steps{list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;
border-top:1px solid var(--hair)}
.rt2-steps li{display:flex;gap:clamp(14px,1.6vw,22px);padding:clamp(16px,1.8vw,22px) 0;
border-bottom:1px solid var(--hair)}
.rt2-steps .n{flex:none;width:26px;font-size:11.5px;font-weight:500;letter-spacing:.2em;
color:var(--muted);padding-top:3px}
.rt2-steps .t{display:block;font-weight:300;font-size:15.5px;line-height:1.6;color:var(--muted)}
.rt2-steps .t b{display:block;font-weight:400;font-size:16.5px;color:var(--ink);margin-bottom:5px}
.rt2-cta{margin-top:clamp(26px,3vw,36px)}
@media(min-width:901px){
.rt2-grid{grid-template-columns:minmax(0,0.86fr) minmax(0,1fr)}
}
/* ---- the comparison. It was a bare tick-and-cross table. Now every row
carries the real badge or ingredient it is talking about, and opens to
say what is actually behind the claim. ---- */
.compare2{background:var(--paper)}
.cmp-grid{display:grid;gap:clamp(28px,4vw,64px);align-items:start}
.cmp-ph{border-radius:3px;overflow:hidden;background:var(--paper2)}
.cmp-ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;display:block}
.cmp-list{border-top:1px solid var(--hair)}
.cmp-cols{display:grid;grid-template-columns:1fr auto auto;gap:clamp(12px,2vw,26px);
padding:10px 0;font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted)}
.cmp-cols .cmp-lv,.cmp-cols .cmp-tr{text-align:right;min-width:92px}
.cmp-cols .cmp-lv{color:var(--ink)}
.cmp-row{display:block;width:100%;text-align:left;background:none;border:0;
border-top:1px solid var(--hair);color:var(--ink);padding:0;cursor:pointer;font-family:inherit}
.cmp-head{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
gap:clamp(10px,1.6vw,18px);padding:clamp(14px,1.6vw,18px) 0}
.cmp-ic{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
transition:transform .3s}
.cmp-ic img{width:100%;height:100%;object-fit:contain}
.cmp-attr{font-weight:300;font-size:15.5px;letter-spacing:.01em}
.cmp-head .cmp-lv,.cmp-head .cmp-tr{font-size:14.5px;text-align:right;min-width:92px}
.cmp-head .cmp-lv{font-weight:400;color:var(--ink)}
.cmp-head .cmp-tr{font-weight:300;color:var(--muted)}
.cmp-body{display:block;max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.3,.6,.2,1)}
.cmp-inner{display:block;padding:0 0 clamp(14px,1.6vw,20px) 48px}
.cmp-inner p{font-weight:300;font-size:15px;line-height:1.6;color:var(--muted);max-width:56ch}
.cmp-row.on{border-top-color:var(--ink)}
.cmp-row.on .cmp-attr{font-weight:400}
.cmp-row.on .cmp-ic{transform:scale(1.06)}
.cmp-row.on .cmp-body{max-height:260px}
.cmp-list .cmp-row:last-child{border-bottom:1px solid var(--hair)}
@media(hover:hover){.cmp-row:hover .cmp-attr{color:var(--ink)}}
.cmp-row:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(min-width:901px){
.cmp-grid{grid-template-columns:minmax(0,0.72fr) minmax(0,1fr)}
}
@media(max-width:560px){
.cmp-cols{grid-template-columns:1fr auto auto;gap:10px}
.cmp-cols .cmp-lv,.cmp-cols .cmp-tr{min-width:72px}
.cmp-head{grid-template-columns:auto 1fr;row-gap:2px;column-gap:12px}
.cmp-head .cmp-lv{grid-column:2;text-align:left;min-width:0;font-size:15px}
.cmp-head .cmp-tr{grid-column:2;text-align:left;min-width:0;font-size:14.5px}
.cmp-head .cmp-lv::before{content:"LEVL ";color:var(--muted);font-size:11.5px;
font-weight:500;letter-spacing:.16em}
.cmp-head .cmp-tr::before{content:"TRADITIONAL ";color:var(--muted);font-size:11.5px;
font-weight:500;letter-spacing:.16em}
.cmp-cols{display:none}
.cmp-inner{padding-left:46px}
}
/* ---- the other two flavours, shown the way the shop menu shows them ---- */
.xsell2{background:var(--paper)}
.xs-grid{display:grid;gap:clamp(16px,2.4vw,32px);grid-template-columns:repeat(2,minmax(0,1fr))}
.xs-card{display:block}
.xs-ph{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:3px;background:var(--paper2)}
.xs-ph img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .55s cubic-bezier(.2,.6,.2,1)}
.xs-txt{display:flex;flex-direction:column;gap:2px;padding:13px 2px 0}
.xs-name{font-weight:400;font-size:15.5px;line-height:1.25;color:var(--ink)}
.xs-meta{font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted)}
.xs-go{margin-top:7px;font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
color:var(--muted);transition:color .25s}
@media(hover:hover){
.xs-card:hover .xs-ph img{transform:scale(1.045)}
.xs-card:hover .xs-go{color:var(--ink)}
.xs-card:hover .xs-name{text-decoration:underline;text-underline-offset:3px;
text-decoration-thickness:1px}
}
.xs-card:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* write a review: one action in the head, one in the list, both driven by the
same Okendo hook that already exists in levl-integrations.js */
.rvw2-act{margin-top:clamp(20px,2.4vw,28px)}
.rvw2-oke{margin-top:clamp(32px,4vw,56px)}
.lnk-btn{background:none;border:0;padding:0;font-family:inherit;cursor:pointer;
font-size:inherit;color:inherit;text-align:left}
/* One rhythm. The gallery and the review block carried their own padding values
(22/48 and 48/48 on a phone) against the site's 60. Everything on the product
page now runs on --sec, the same token the home page sections use. */
.gx2,.rvw2,.ritual2,.compare2,.xsell2,.faq-sec{padding:var(--sec) 0 !important}
/* The overhead tile repeated what the "what's inside" tile already shows - same
flat-lay, same can - so the gallery said the same thing twice. Four pictures,
four different things. */
.gx2-d{display:none !important}
@media(min-width:821px){ .gx2-e{grid-column:1 / span 12 !important;aspect-ratio:21/9} }
/* ===== home page edits, 11 Sep 2026 (Ed's doc) ===== */
/* The belief statement was a small tracked-caps line над a headline. It is one
statement in two sentences now, both at headline size. */
/* The belief statement is two sentences of equal weight, the way Ed wrote it.
It was running at 80px against the 58px every other section heading uses, so
seven lines of it filled the column and dwarfed the photograph. Same scale as
the rest of the site, same colour on both sentences, separated by air. */
/* The setup sits back, the belief carries the weight. NH ships 200/300/400/500
and nothing else, so 500 IS the bold here - ask for 600 and the browser
synthesises one, which is why font-synthesis is off sitewide. */
.belief .bl-h{font-size:clamp(27px,3.6vw,45px) !important;line-height:1.12;
font-weight:200;letter-spacing:-.008em;color:var(--paper,#F4F0E7)}
.belief .bl-sub{max-width:none}
.belief .bl-h .bl-h2{display:block;margin-top:.5em;color:var(--paper,#F4F0E7);
font-size:clamp(33px,4.6vw,59px);font-weight:200;line-height:1.05;
letter-spacing:-.018em}
/* one word carries it. 500 is the top of NH's range - a would resolve to
700, find nothing, and get synthesised, which is what font-synthesis:none
exists to prevent. */
.belief .bl-em{font-weight:500}
@media(max-width:820px){
.belief .bl-h{font-size:clamp(24px,6.2vw,32px) !important}
.belief .bl-h .bl-h2{font-size:clamp(30px,7.8vw,41px);margin-top:.46em}
}
@media(max-width:820px){ .bl-h .bl-h2{margin-top:.3em} }
/* The two columns of the functional-benefit section ended at different heights,
so a cream void opened under the shorter one right before the black section
starts. Line them up and the section closes on one clean band of padding. */
@media(min-width:901px){ .fben-grid{align-items:center} }
/* The copy column was 1.02fr against the photo with an 80px gutter, so the
headline broke three words in and left a dead strip down the right of the
section. Give the words the width and they fill it. */
@media(min-width:901px){
.bl-grid{grid-template-columns:0.86fr 1.28fr;gap:clamp(32px,4.2vw,64px)}
}
/* Two things were holding the lines short of the edge: a 15ch cap on the
heading, and text-wrap:balance, which evens every line so none of them can
reach the full measure. Let it run and only the last line is short. */
.belief .bl-h{max-width:none;margin-left:0;margin-right:0;text-wrap:pretty}
.belief .bl-h .bl-h2{text-wrap:pretty}
/* ===== belief: the photograph carries the section =====
She was a floating rectangle on a black field with dead air above and below
her. Full bleed on the left, copy on the right, both running the full height
of the section. This is the Vuori/Alo pattern the site is benchmarked on:
imagery leads, no card floating inside a container.
The bleed is done by neutralising the wrap rather than escaping it with
100vw. 100vw counts the scrollbar, so at 901px the section ran 14px wider
than the document and put a horizontal scrollbar on the whole page. */
.belief .bl-grid{width:100%;max-width:none;margin-inline:0;padding-inline:0}
.belief .bl-ph{margin:0}
@media(min-width:901px){
.belief{padding:0 !important;overflow:hidden}
.belief .bl-grid{grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
min-height:min(92vh,880px)}
.belief .bl-ph{height:100%;overflow:hidden}
.belief .bl-ph img{width:100%;height:100%;object-fit:cover;
/* her face sits in the upper third, so the crop holds there */
object-position:50% 26%}
.belief .bl-copy{display:flex;flex-direction:column;justify-content:center;
align-items:flex-start; /* or the button stretches the whole column */
max-width:none;
padding-block:clamp(72px,7vw,120px);
padding-inline:clamp(44px,5.2vw,96px) clamp(40px,4.6vw,96px)}
/* generous, but a display line still needs a limit or it runs 900px on a
2560 screen */
.belief .bl-h{max-width:22ch}
/* the base rule centres these with auto side margins, which indented them
a few pixels past the headline. One left edge for the whole column. */
.belief .bl-sub{max-width:48ch;margin-left:0;margin-right:0}
.belief .bl-cta{align-self:flex-start}
}
/* phone: she runs the full width, the words sit under her on the page gutter */
@media(max-width:900px){
.belief .bl-copy{padding-inline:clamp(20px,4vw,56px)}
.belief .bl-ph img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
object-position:50% 24%}
}
/* The desktop nav switches on at 901px but needs about 920 to fit, so between
901 and 919 ACCOUNT and CART ran past the right edge and put a horizontal
scrollbar on every page. Hold the drawer until the nav actually fits. */
@media(min-width:901px) and (max-width:919px){
.nav-links.main{display:none !important}
.nav-acct.main-only{display:none !important}
.menu-btn{display:flex !important}
.mega{display:none !important}
}
/* The stacked belief layout stopped at 880 while the full-bleed one starts at
901, so 881-900 fell between them: two columns with no padding on the copy,
text against the screen edge. Stack it all the way to the handover. */
@media(max-width:900px){
.belief .bl-grid{grid-template-columns:1fr !important;gap:clamp(24px,4vw,36px)}
}
/* The belief photo was running 1226px tall on a wide screen, well past the
880 cap: aspect-ratio 4/5 was still on the image at desktop, so the picture
set the row height instead of filling it. Let the section decide. */
@media(min-width:901px){
.belief .bl-ph img{aspect-ratio:auto}
.belief .bl-grid{min-height:min(76vh,720px)}
}
/* ===== the functional-benefit section gets the same treatment, mirrored =====
Copy on the left, the can over its ingredients bleeding off the right edge,
both running the full height of the section. */
.fben .fben-grid{width:100%;max-width:none;margin-inline:0;padding-inline:0}
@media(min-width:901px){
.fben{padding:0 !important;overflow:hidden}
.fben .fben-grid{grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
min-height:min(76vh,720px)}
.fben .fben-ph{height:100%;overflow:hidden;margin:0}
.fben .fben-ph img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;
/* the can is centred in the frame and has to stay centred as the crop moves */
object-position:50% 50%}
.fben .fben-copy{display:flex;flex-direction:column;justify-content:center;
align-items:flex-start;max-width:none;
padding-block:clamp(64px,6vw,104px);
padding-inline:clamp(40px,4.6vw,88px) clamp(40px,5vw,92px)}
.fben .fben-h,.fben .fben-copy .sub,.fben .fben-two{max-width:52ch}
}
@media(max-width:900px){
.fben .fben-copy{padding-inline:clamp(20px,4vw,56px)}
}
/* The picture must not set the row height. Left in flow it does - with
aspect-ratio off it falls back to its intrinsic 2:3 and made the section
1080px tall. Take it out of flow and the section height is whatever we
asked for, with the photo filling it. */
@media(min-width:901px){
.belief .bl-ph,.fben .fben-ph{position:relative}
.belief .bl-ph img,.fben .fben-ph img{position:absolute;inset:0;
width:100%;height:100%;object-fit:cover}
}
/* --- credentials: two rows of four --- */
/* The row rules were written for a single row of four, so the fifth cell
inherited a left border that belongs to a column seam, not a row start,
and the two rows ran together with no rule between them. */
.creds-grid .crd:nth-child(4n+1){border-left:0 !important;padding-left:0}
@media(min-width:1081px){
.creds-grid .crd:nth-child(n+5){border-top:1px solid var(--rule) !important}
}
@media(max-width:1080px){
.creds-grid .crd{border-left:1px solid var(--rule) !important;
padding-left:clamp(16px,1.6vw,26px)}
.creds-grid .crd:nth-child(odd){border-left:0 !important;padding-left:0}
.creds-grid .crd:nth-child(n+3){border-top:1px solid var(--rule) !important}
}
/* Still two columns at phone width, so the row rule starts at the third
cell, not the second - the seam comes off because two 162px columns with
a rule between them read as a table rather than a list. */
@media(max-width:560px){
.creds-grid .crd{border-left:0 !important;padding-left:0}
.creds-grid .crd:nth-child(n+3){border-top:1px solid var(--rule) !important}
}
/* --- PDP gallery: one ground, equal tiles, nothing cropped --------------
The row was 5/4/3 columns, so the same can rendered huge in the first tile
and small in the third, and the square flat-lay was cover-cropped to fit a
4-column slot that is not its shape. Three equal squares fix all three at
once: the cans land at one scale and the flat-lay is shown whole.
The ground is sampled off the ingredient photograph below it, so the tiles
and the band read as one cream rather than a tan next to a warm cream. */
:root{ --gx-ground:#F5EADB }
@media(min-width:821px){
.gx2-grid{grid-template-rows:auto auto !important}
.gx2-a{grid-column:1 / span 4 !important;grid-row:1 !important}
.gx2-b{grid-column:5 / span 4 !important;grid-row:1 !important}
.gx2-c{grid-column:9 / span 4 !important;grid-row:1 !important}
/* 4:5 is the house ratio everywhere else on the site, and a 12oz can is a
tall subject - a square tile left it stranded in the middle of a field of
cream. The flat-lay is square, so 4:5 trims its sides, not its top and
bottom, and the can at its centre stays whole. */
/* 4:5 is the house ratio everywhere else on the site. The flavour shot is a
1200 square, so 4:5 trims its sides, not its top and bottom, and the can at
its centre stays whole; the cans are taller than either and sit contained
with even air. */
.gx2-a,.gx2-b,.gx2-c{aspect-ratio:4/5}
/* the band is a 16:9 photograph; crop it to 21:9 and the shadow under the
ingredients goes with it */
.gx2-e{grid-column:1 / span 12 !important;grid-row:2 !important;aspect-ratio:16/9}
.gx2-fit img{padding:7% 14%}
}
.gx2-t,.gx2-fit{background:var(--gx-ground)}
/* phone keeps the two-up grid defined further down; it only needed the new
ground. Forcing a square here crushed the wide ingredient band. */
@media(max-width:900px){
.gx2-fit img{background:var(--gx-ground) !important}
.gx2-e img{background:var(--gx-ground) !important}
.gx2-t{background:none}
/* the scroller became a grid at this width, so the snap dots point at
nothing */
.gx2-dots{display:none !important}
}
/* the band is a cream photograph now, so a white caption on a dark scrim
would sit on nothing. Put it on the same ink as the other captions. */
.gx2-e figcaption{background:none !important;color:var(--muted) !important;
text-shadow:none !important}
/* The band photograph has its subject low in the frame with a lot of dead
headroom above. Crop that off from the top rather than centre-cropping,
which would take the cast shadow with it, and the run sits with even air. */
@media(min-width:821px){
.gx2-e{aspect-ratio:900/350 !important}
.gx2-e img{object-position:50% 62%}
}
/* the flavour shot is a square that bleeds to all four edges, so it covers */
.gx2-b img{object-fit:cover;object-position:50% 50%}
/* ============================================================================
ONE HEADLINE LADDER, EVERY PAGE
The interior pages had drifted above the homepage: .pg-h rendered at 86px and
.ing-h1 at 84 while the hero's own "Find Balance." sits at 78, and the store
locator shouted at 104. A page head that is louder than the hero reads as a
different site. Interior h1s now share one size, one step below the hero and
one step above .h-sec (58).
========================================================================== */
.pg-h,.ing-h1,.fl-h,.ph2-info h1{
font-size:clamp(36px,5vw,68px) !important;
font-weight:200;line-height:1.03;letter-spacing:-.02em}
@media(max-width:820px){
/* .h-sec bottoms out at 34px on a phone, so an h1 that also lands on 34
flattens the page. Hold the interior h1 a clear step above it. */
.pg-h,.ing-h1,.fl-h,.ph2-info h1,.quiz-page h1{
font-size:clamp(38px,10.2vw,48px) !important;line-height:1.05}
}
.quiz-page h1{font-size:clamp(36px,5vw,68px) !important;font-weight:200;
line-height:1.03;letter-spacing:-.02em}
/* ============================================================================
STORE LOCATOR
List-first. Every marker on the map is a row in the list, so the list is the
accessible source of truth and the map itself is aria-hidden - no duplicate
tab stops, no keyboard trap inside a pan-zoom canvas.
========================================================================== */
.loc{padding-top:0;padding-bottom:var(--sec)}
.loc-head{border-bottom:0;padding-bottom:clamp(26px,3.4vw,44px)}
.loc-tools{padding-top:0}
.loc-form{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.loc-field{position:relative;display:flex;align-items:stretch;
flex:1 1 320px;min-width:0;max-width:460px;
border:1px solid var(--ink);border-radius:2px;background:var(--paper)}
.loc-pin{width:19px;height:19px;flex:none;align-self:center;margin-left:16px;color:var(--muted)}
.loc-inp{flex:1 1 auto;min-width:0;border:0;background:none;
font-family:inherit;font-size:16px;font-weight:300;color:var(--ink);
padding:16px 12px;letter-spacing:.01em}
/* 16px is the floor: anything smaller and iOS Safari zooms the page on focus */
.loc-inp::placeholder{color:var(--muted);opacity:1}
.loc-inp:focus{outline:none}
.loc-field:focus-within{box-shadow:0 0 0 2px var(--ink);border-color:var(--ink)}
.loc-submit{flex:none;border:0;border-left:1px solid var(--ink);background:var(--ink);color:var(--paper);
font-family:inherit;font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
padding:0 22px;min-height:54px;cursor:pointer;transition:background .25s,color .25s}
.loc-submit:hover{background:var(--paper);color:var(--ink)}
.loc-geo{display:inline-flex;align-items:center;gap:9px;min-height:44px;
background:none;border:0;padding:0;cursor:pointer;
font-family:inherit;font-size:13px;font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink);
border-bottom:1px solid var(--ink)}
.loc-geo svg{width:17px;height:17px}
.loc-geo:hover{color:var(--muted);border-bottom-color:var(--muted)}
.loc-geo.is-busy{opacity:.55;pointer-events:none}
.loc-radius{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(18px,2vw,26px)}
.loc-chip{background:none;border:1px solid var(--hair);border-radius:100px;
min-height:40px;padding:0 18px;cursor:pointer;
font-family:inherit;font-size:13px;font-weight:500;letter-spacing:.1em;color:var(--muted);
transition:border-color .2s,color .2s,background .2s}
.loc-chip:hover{border-color:var(--ink);color:var(--ink)}
.loc-chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.loc-err{margin-top:14px;color:#8A2617;font-size:15px;font-weight:400;max-width:52ch}
.loc-count{margin-top:16px;color:var(--muted);font-size:15px;font-weight:400}
.loc.is-busy .loc-count{opacity:.7}
.loc-split{margin-top:clamp(22px,2.6vw,34px);display:grid;gap:clamp(18px,2.4vw,30px)}
.loc-mapwrap{min-width:0}
.loc-map{height:clamp(260px,42svh,420px);border-radius:3px;overflow:hidden;
background:var(--paper2);border:1px solid var(--hair)}
/* Esri's tiles have to carry a credit. It sits inside the map, small and out
of the way, instead of as a line of copy under it. */
.loc-map .leaflet-control-attribution{background:rgba(244,240,231,.82);
font-size:10px;color:var(--muted);padding:2px 7px;border-radius:2px 0 0 0}
.loc-map .leaflet-control-attribution a{color:var(--muted)}
.loc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule,var(--hair))}
.loc-card{display:grid;grid-template-columns:auto 1fr auto;gap:0 16px;align-items:start;
padding:clamp(18px,2vw,24px) 0;border-bottom:1px solid var(--rule,var(--hair))}
.loc-card.is-on{background:var(--paper2)}
.loc-num{display:flex;align-items:center;justify-content:center;
width:26px;height:26px;border-radius:100px;background:var(--ink);color:var(--paper);
font-size:12px;font-weight:500;margin-top:2px}
.loc-cbody{min-width:0}
.loc-name{font-size:19px !important;font-weight:400;letter-spacing:-.005em;line-height:1.25;margin:0}
.loc-addr{margin:6px 0 0;color:var(--muted);font-size:15px;font-weight:300;line-height:1.5}
.loc-dist{font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--muted);
white-space:nowrap;margin-top:4px}
.loc-acts{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px}
.loc-act{background:none;border:0;padding:6px 0;cursor:pointer;
font-family:inherit;font-size:13px !important;font-weight:500;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink);
border-bottom:1px solid var(--ink);line-height:1.2}
.loc-act:hover{color:var(--muted);border-bottom-color:var(--muted)}
.loc-empty{display:none;padding:clamp(28px,3.4vw,44px) 0 0}
.loc-empty.is-on{display:block}
.loc-emptyh{font-size:22px;font-weight:300;margin:0}
.loc-emptyp{margin:10px 0 0;color:var(--muted);font-size:16px;font-weight:300;max-width:46ch}
.loc-emptyacts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:22px}
/* markers: the same numbered token as the list row it belongs to */
.loc-marker{background:none;border:0}
.loc-marker i{display:block;width:14px;height:14px;border-radius:100px;
background:var(--paper);border:2.5px solid var(--ink);box-sizing:border-box}
.loc-marker span{display:flex;align-items:center;justify-content:center;
width:28px;height:28px;border-radius:100px;
background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);
font-family:'NH',Helvetica,Arial,sans-serif;font-size:12px;font-weight:500}
.loc-marker.is-on{z-index:600 !important}
.leaflet-container{font-family:'NH',Helvetica,Arial,sans-serif;background:var(--paper2)}
/* Raster tiles land on fractional pixels and leave a hairline grid across the
map. Half a pixel of overlap closes it without visibly scaling the artwork.
Leaflet sets the size inline, so this has to win on !important. (The
straight lines that survive this are Esri's own state and maritime
boundaries, not seams - they move when you pan, a seam does not.) */
.loc-map .leaflet-tile{width:256.5px !important;height:256.5px !important}
.leaflet-popup-content{font-size:14px;line-height:1.5;font-weight:300;color:var(--ink)}
.leaflet-popup-content strong{font-weight:500}
.leaflet-popup-content a{color:var(--ink)}
.leaflet-popup-content-wrapper{border-radius:3px}
.loc-ns .loc-nslist{list-style:none;margin:var(--head) 0 0;padding:0}
.loc-ns .loc-nslist li{padding:16px 0;border-bottom:1px solid var(--hair);font-size:16px;font-weight:300}
/* desktop: list and map side by side, map pinned while the list scrolls */
@media(min-width:901px){
.loc-split{grid-template-columns:minmax(0,7fr) minmax(0,6fr);
gap:clamp(30px,3.4vw,56px);align-items:start}
.loc-results{order:1}
.loc-mapwrap{order:2;position:sticky;top:calc(var(--headh,96px) + 18px)}
.loc-map{height:min(66svh,620px)}
}
@media(max-width:900px){
.loc-mapwrap{order:1}
.loc-results{order:2}
.loc-form{flex-direction:column;align-items:stretch}
/* the form is a COLUMN here, so a flex-basis of 320px is 320px of HEIGHT.
That is what turned the ZIP field into a letterbox. */
.loc-field{flex:0 0 auto;max-width:none}
.loc-geo{align-self:flex-start}
}
@media(max-width:420px){
.loc-card{gap:0 12px}
.loc-num{width:24px;height:24px;font-size:11px}
}
/* ============================================================================
RITUAL QUIZ — on the site's own system
A later rule forced `background:transparent !important` on every .qopt, so a
selected answer rendered white type on the paper ground: invisible, and the
one interaction the page exists for. The selected state is restated here
with the weight it needs to win, in ink rather than the off-brand magenta.
========================================================================== */
.qopt{background:transparent !important;border:1px solid var(--rule) !important;
color:var(--ink);border-radius:0 !important;min-height:48px}
.qopt:hover{border-color:var(--ink) !important;background:var(--paper2) !important}
.qopt.on{background:var(--ink) !important;border-color:var(--ink) !important;
color:var(--paper) !important;font-weight:500}
.qopt.on:after{background:var(--paper);color:var(--ink)}
.qopt:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.qnext{padding:17px 44px}
.rbar{border-top:1px solid rgba(244,240,231,.18)}
/* `.rbar, .rbar *{color:#fff !important}` was written when the bar was magenta.
The button inside it is paper now, so its label has to come back to ink at
the same weight or it reads as an empty white slab. */
.rbar .rgo{background:var(--paper);color:var(--ink) !important;border-radius:0}
/* and the bar is fixed over the page, so the flow has to end above it */
.quiz-page .quiz-shell{padding-bottom:clamp(120px,18vw,170px)}
/* the quiz now ends in a footer like every other page, so the fixed bar has to
stop short of it instead of sitting on top of the last thing on the page */
.quiz-page footer{padding-bottom:calc(clamp(32px,3.4vw,48px) + 96px)}
/* the running price bar has an image, a label, a sentence, a price and a
button; at 390 that is three things too many and the button ran off the
edge. Keep the two that matter. */
@media(max-width:760px){
/* Five things in one row does not fit 390. Drop the picture and the label,
and give the button its own line so the words survive. */
.rbar .wrap{display:grid;grid-template-columns:1fr;gap:10px;
padding-top:12px;padding-bottom:12px}
.rbar img,.rbar .rl{display:none}
.rbar .rp{margin-left:0;font-size:18px}
.rbar .rp small{display:inline;opacity:.8}
.rbar .rgo{margin-left:0;width:100%;text-align:center;padding:14px 16px}
}
/* ============================================================================
PDP GALLERY — one strip, scrolling sideways
Stacked, this ran 1300px tall on a desktop for three pictures. As a single
row at one fixed height it costs a third of that, every image keeps its own
proportion instead of being cropped into a common tile, and the item running
off the right edge is what tells you there is more.
========================================================================== */
.gx2{padding-top:var(--sec-s) !important;padding-bottom:var(--sec-s) !important}
.gx2-grid{
--gxh:clamp(300px,34vw,460px);
display:flex !important;flex-wrap:nowrap !important;
grid-template-columns:none !important;grid-template-rows:none !important;
gap:clamp(10px,1.1vw,16px) !important;
/* an earlier mobile rule forces overflow:visible !important on this element,
so without the same weight the strip does not scroll - it just makes the
whole document 606px wider than the screen */
width:100% !important;min-width:0;
overflow-x:auto !important;overflow-y:hidden !important;
scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
scrollbar-width:none;
/* full bleed to the right so the last item is visibly cut, with the page
gutter kept on the left and repeated as end padding */
max-width:none !important;margin-inline:0 !important;
padding-left:var(--gut) !important;padding-right:var(--gut) !important;
scroll-padding-left:var(--gut)}
.gx2-grid::-webkit-scrollbar{display:none}
.gx2-grid:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.gx2-t{
flex:0 0 auto !important;
grid-column:auto !important;grid-row:auto !important;
height:var(--gxh);width:auto;
scroll-snap-align:start;
margin:0;overflow:hidden;border-radius:3px;background:var(--gx-ground)}
.gx2-a,.gx2-c{aspect-ratio:4/5 !important}
.gx2-b{aspect-ratio:1/1 !important}
.gx2-e{aspect-ratio:16/9 !important}
.gx2-t img{width:100%;height:100%;object-fit:cover;display:block}
.gx2-fit img{object-fit:contain !important;padding:7% 12% !important;background:none !important}
.gx2-b img,.gx2-e img{object-position:50% 50% !important}
/* caption sits under its own frame, so it never covers the picture */
.gx2-t{overflow:visible}
.gx2-t img{border-radius:3px}
.gx2-t figcaption{position:static !important;opacity:1 !important;transform:none !important;
background:none !important;text-shadow:none !important;
padding:10px 2px 0 !important;color:var(--muted) !important;
font-size:11.5px !important;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.gx2-t{display:flex;flex-direction:column}
.gx2-t img{flex:1 1 auto;min-height:0}
.gx2-hint{display:flex;align-items:center;gap:10px;color:var(--muted);
font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
margin-top:clamp(14px,1.6vw,20px)}
.gx2-hint span{flex:none}
.gx2-hint i{display:block;height:1px;background:var(--rule);flex:1 1 auto}
/* ============================================================================
FULL-BLEED SECTIONS: PADDING, AND WHO ACTUALLY GETS IT
Two faults, both from the homepage treatment being written as if every page
had the same structure.
1. `.belief{padding:0 !important}` and `.fben{padding:0 !important}` were
unconditional. They exist so a two-column section with a photo can run
edge to edge. On why-levl the belief has NO photo column, so it kept the
zeroed padding and nothing else: the kicker sat on the top edge of the
black band and the last line of the sub on the bottom edge. The zeroing
now applies only where there is a picture to bleed.
2. A full-bleed copy column was padded with its own clamp (about 66-75px at
1440) while every other section on the page starts at 118px, so the page
had two different left edges. --pagepad reproduces the real one: half the
leftover beside the 1320 wrap, plus the gutter.
========================================================================== */
:root{ --pagepad: calc(max(0px, (100vw - 1320px)) / 2 + var(--gut)); }
@media(min-width:901px){
/* a belief or fben with no photo is an ordinary section and gets the rhythm */
.belief:not(:has(.bl-ph)){padding-top:var(--sec) !important;padding-bottom:var(--sec) !important}
.fben:not(:has(.fben-ph)){padding-top:var(--sec) !important;padding-bottom:var(--sec) !important}
/* one left edge for the whole page, bled sections included */
.belief:has(.bl-ph) .bl-copy{padding-inline:var(--pagepad) clamp(40px,4.6vw,96px)}
.fben:has(.fben-ph) .fben-copy{padding-inline:var(--pagepad) clamp(40px,5vw,92px)}
}
/* :has() is current everywhere, but if it ever fails to parse the section must
not collapse, so restate the floor unconditionally. */
@media(min-width:901px){
.belief,.fben{min-height:0}
}
@media(max-width:900px){
.belief .bl-copy,.fben .fben-copy{padding-inline:var(--gut)}
.belief:not(:has(.bl-ph)),.fben:not(:has(.fben-ph)){
padding-top:var(--sec) !important;padding-bottom:var(--sec) !important}
}
/* ---------------------------------------------------------------------------
FINAL CTA: the copy was pinned to the viewport edge
`.fc-copy` carries .wrap, but a later rule set `left:0 !important` together
with `padding:0 !important`, which killed both the wrap's centring and its
gutter. The headline, the sub and the Shop LEVL button all started at x=0,
at every width, on why-levl and story. It gets the page's own left edge back.
------------------------------------------------------------------------ */
.finalcta .fc-copy{left:var(--pagepad) !important;right:auto !important}
@media(max-width:980px){
.finalcta .fc-copy{left:auto !important;
padding-left:var(--gut) !important;padding-right:var(--gut) !important}
}
/* ============================================================================
INGREDIENTS HERO — brighter, and nothing faded
It was a magenta flat-lay under a 90%-ink scrim: the darkest thing on the
site, on the page about clean ingredients. Putting the copy ON the cream
photograph needed a light scrim instead, which ghosted the acai and the
blueberries underneath it - faded fruit reads as fake. So the copy comes off
the picture entirely: it sits on the paper, and the photograph runs full
bleed beneath it at full strength. Brighter, real, and no scrim at all.
========================================================================== */
.ing-hero{background:var(--paper);min-height:0;display:block;overflow:visible;
padding-top:clamp(40px,4.6vw,72px);padding-bottom:0}
.ing-hero::after{display:none !important}
.ing-hero-in{position:relative;z-index:2;color:var(--ink);max-width:min(100%,760px);
padding-block:0 clamp(34px,4.4vw,60px)}
.ing-hero .eyebrow{color:var(--muted) !important}
.ing-h1{color:var(--ink) !important}
.ing-lede{color:#4F4B40 !important}
.ing-hero-bg{position:static !important;width:100% !important;height:auto !important;
/* 2.57:1 shows y188-888 of the 1004px frame. The run lives between y272 and
y866, so nothing on the plate is cut; only dead headroom comes off. */
aspect-ratio:1800/700;object-fit:cover;object-position:50% 62%;
animation:none !important;display:block}
@media(max-width:820px){
.ing-hero-bg{aspect-ratio:16/10;object-position:52% 54%}
}
/* ============================================================================
STORE LOCATOR — ours
One search box that takes a ZIP, a city or a store name and answers as you
type, because the whole list is already in the page. Retailer chips are
built from the data, so a new chain appears the moment it is in the list.
The radius row only exists once we actually know where someone is.
========================================================================== */
.loc-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
margin-top:clamp(16px,1.8vw,24px)}
.loc-chips[hidden]{display:none}
.loc-chiplbl{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted);margin-right:4px}
/* never opacity on text: .6 on --muted measured 2.63:1. Solid muted on paper,
solid light on the ink chip. */
.loc-chip em{font-style:normal;margin-left:7px;font-size:13px;color:#5C5849}
.loc-chip.is-on em{color:#C9C4B6}
.loc-more{display:block;width:100%;margin-top:18px;background:none;
border:1px solid var(--rule);border-radius:0;min-height:52px;cursor:pointer;
font-family:inherit;font-size:13px;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink);transition:border-color .2s,background .2s}
.loc-more:hover{border-color:var(--ink);background:var(--paper2)}
.loc-more[hidden]{display:none}
/* a search input is a search input: no spinner, no clear-button surprise */
.loc-inp::-webkit-search-decoration,
.loc-inp::-webkit-search-cancel-button{-webkit-appearance:none}
/* the credit sits inside the map, small, out of the way */
.loc-map .leaflet-control-attribution{background:rgba(244,240,231,.82);
font-size:10px;color:var(--muted);padding:2px 7px;border-radius:2px 0 0 0}
.loc-map .leaflet-control-attribution a{color:var(--muted)}
/* On a phone seven retailer chips stacked into seven rows and pushed the first
result off the screen. One row that scrolls sideways, same as the gallery. */
@media(max-width:900px){
.loc-chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
padding-bottom:2px}
.loc-chips::-webkit-scrollbar{display:none}
.loc-chip,.loc-chiplbl{flex:0 0 auto}
}
/* ============================================================================
MAP, ON THE SITE'S OWN SYSTEM
Out of the box Leaflet gives you a white rounded card with a drop shadow for
the popup and another one for the zoom buttons. This site has no card boxes,
no borders and no drop shadows anywhere, so the map was the one element that
looked like a different product. Popups are gone entirely - clicking a pin
selects its row in the list, which is where the address and the directions
already are - and the controls are square, hairline and on the paper.
========================================================================== */
.loc-map .leaflet-bar{border:0;box-shadow:none;border-radius:0}
.loc-map .leaflet-bar a{
width:38px;height:38px;line-height:36px;
background:var(--paper);color:var(--ink);
border:1px solid var(--rule);border-radius:0;
font-family:'NH',Helvetica,Arial,sans-serif;font-size:19px;font-weight:300}
.loc-map .leaflet-bar a:first-child{border-bottom:0}
.loc-map .leaflet-bar a:hover{background:var(--paper2);color:var(--ink)}
.loc-map .leaflet-bar a.leaflet-disabled{background:var(--paper);color:#B9B3A4}
.loc-map .leaflet-control-zoom{margin:14px 0 0 14px}
/* a resting pin is a small ink dot with a paper ring, so thirty of them
overlapping read as a cluster instead of a smudge */
.loc-marker i{display:block;width:12px;height:12px;border-radius:100px;
background:var(--ink);border:2px solid var(--paper);box-sizing:content-box;
box-shadow:0 0 0 1px rgba(20,20,16,.28)}
.loc-marker.is-on span{box-shadow:0 0 0 3px var(--paper)}
.loc-map .leaflet-marker-icon{transition:none}
/* ============================================================================
PRODUCT PHOTOS — one line, moving, hover to enlarge
The row holds the real photos twice over and travels exactly half its own
width, so the loop has no seam and nothing ever resets. Pointing at it stops
it and lifts the tile under the cursor; clicking opens the full set.
========================================================================== */
.pmq{background:var(--paper);overflow:hidden;
/* one token: the air above and below the line is the SAME as the gap between
the pictures, so the band is evenly spaced on all four sides */
--pmq-gap:clamp(10px,1.1vw,16px);
padding:var(--pmq-gap) 0}
.pmq-track{list-style:none;margin:0;padding:0;display:flex;width:max-content;
gap:var(--pmq-gap);
animation:pmq-run 54s linear infinite;will-change:transform}
@keyframes pmq-run{from{transform:translate3d(0,0,0)}
to{transform:translate3d(calc(-50% - (var(--pmq-gap) / 2)),0,0)}}
.pmq:hover .pmq-track,
.pmq:focus-within .pmq-track{animation-play-state:paused}
.pmq-item{flex:0 0 auto;margin:0;width:clamp(196px,19vw,272px)}
.pmq-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
text-align:left;color:inherit}
.pmq-fig{display:block;overflow:hidden;border-radius:3px;background:var(--paper2)}
.pmq-fig img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.pmq-item{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.pmq-btn:hover .pmq-fig img,
.pmq-btn:focus-visible .pmq-fig img{transform:scale(1.07)}
/* 1.10 on a 272px tile grows it by 13.6px a side, which is what the gap-sized
padding has room for. Any more and the lift clips against the band. */
.pmq-item:hover,.pmq-item:focus-within{transform:scale(1.10);z-index:3;position:relative}
.pmq-btn:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:3px}
/* a line that moves on its own is the first thing to stop for anyone who has
asked the OS to stop things moving */
@media(prefers-reduced-motion:reduce){
.pmq{overflow-x:auto;scrollbar-width:none}
.pmq::-webkit-scrollbar{display:none}
.pmq-track{animation:none}
.pmq-item:hover,.pmq-item:focus-within{transform:none}
}
@media(max-width:700px){
.pmq-track{animation-duration:38s}
.pmq-item{width:clamp(148px,44vw,200px)}
/* no hover on a phone, so no lift to make room for */
.pmq-item:hover,.pmq-item:focus-within{transform:none}
}
/* ---- lightbox: the full set, one at a time ---- */
html.lb-on,html.lb-on body{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
justify-content:center;gap:clamp(8px,2vw,28px);
background:rgba(14,14,11,.94);padding:clamp(52px,6vw,80px) clamp(14px,3vw,48px)}
.lb[hidden]{display:none}
.lb-fig{margin:0;max-width:min(92vw,760px);display:flex;flex-direction:column;gap:16px}
.lb-fig img{display:block;width:100%;height:auto;max-height:74svh;object-fit:contain;
border-radius:3px;background:var(--paper2)}
.lb-fig figcaption{display:flex;align-items:baseline;justify-content:space-between;
gap:20px;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
color:#CFC9BB}
.lb-count{color:#9D9A92;white-space:nowrap}
.lb-nav,.lb-close{flex:none;display:flex;align-items:center;justify-content:center;
width:46px;height:46px;background:none;border:1px solid rgba(244,240,231,.34);
border-radius:0;color:var(--paper);cursor:pointer;transition:background .2s,border-color .2s}
.lb-nav svg,.lb-close svg{width:18px;height:18px}
.lb-nav:hover,.lb-close:hover{background:rgba(244,240,231,.12);border-color:var(--paper)}
.lb-nav:focus-visible,.lb-close:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.lb-close{position:absolute;top:clamp(14px,2.4vw,28px);right:clamp(14px,3vw,36px)}
@media(max-width:700px){
.lb{padding:64px 16px 24px}
.lb-nav{position:absolute;bottom:22px}
.lb-prev{left:16px} .lb-next{right:16px}
.lb-fig figcaption{flex-direction:column;gap:6px;align-items:flex-start}
}
/* ============================================================
MATT — HOMEPAGE EDITS 9.11.26
One rule for this whole block: whatever token sets a
component's horizontal rhythm sets its vertical rhythm too,
in the same declaration.
============================================================ */
/* ---- 1 · hero: secondary line reads bigger ---- */
.fh-lede{font-size:clamp(18px,1.95vw,24px) !important;line-height:1.45}
@media(min-width:821px){ .fh-lede{max-width:min(500px,46vw) !important} }
@media(max-width:820px){ .fh-lede{font-size:18px !important;line-height:1.45} }
/* ---- 2 · credentials marquee, under the hero ----
--cmq-gap drives the space between items AND the space above
and below the band. One number, one rhythm. */
.cmq{--cmq-gap:clamp(40px,4.8vw,76px);
background:var(--paper);overflow:hidden;
padding:var(--cmq-gap) 0}
.cmq-track{list-style:none;margin:0;padding:0;display:flex;width:max-content;
gap:var(--cmq-gap);align-items:flex-start;
animation:cmq-run 52s linear infinite;will-change:transform}
@keyframes cmq-run{from{transform:translate3d(0,0,0)}
to{transform:translate3d(calc(-50% - (var(--cmq-gap) / 2)),0,0)}}
.cmq:hover .cmq-track,.cmq:focus-within .cmq-track{animation-play-state:paused}
.cmq-item{flex:0 0 auto;margin:0;padding:0;
display:flex;flex-direction:column;align-items:center;gap:14px;
text-align:center}
.cmq-item img{display:block;width:clamp(58px,5.8vw,78px);height:auto;object-fit:contain}
.cmq-item span{display:block;font-size:13px;font-weight:500;letter-spacing:.14em;
color:#5C5849;line-height:1.35;white-space:nowrap}
@media(max-width:820px){
.cmq{--cmq-gap:clamp(30px,8vw,46px)}
.cmq-track{animation-duration:36s}
.cmq-item{gap:11px}
.cmq-item img{width:clamp(50px,13.5vw,64px)}
.cmq-item span{letter-spacing:.11em}
}
@media(prefers-reduced-motion:reduce){
.cmq{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cmq::-webkit-scrollbar{display:none}
.cmq-track{animation:none}
}
/* ---- 3 · Find your LEVL: punch in so the cans read bigger ---- */
.pcard .ph img{transform:scale(var(--phz,1.12));transform-origin:50% 48%}
@media(hover:hover){
.pcard:hover .ph .ph-a,.pcard:hover .ph .ph-b{--phz:1.16}
}
.pcard:focus-within .ph .ph-a,.pcard:focus-within .ph .ph-b{--phz:1.16}
/* ---- 4 · Hydration for your body: ingredient type up, can out ---- */
.fbt-list{gap:13px}
.fbt-list li{font-size:18px !important;gap:13px;line-height:1.45}
.fbt-list img{width:32px;height:32px}
@media(min-width:901px){
.fben .fben-grid{grid-template-columns:1.12fr .88fr}
/* the whole frame, not a crop of it: contain inside a box inset from the
column on every side, so the can sits back and the scene reads whole */
/* --fbz matches .fben-copy's padding-block exactly, so the photo sits in
the same horizontal band as the copy; its right edge lands on the page
gutter, mirroring the copy's left edge. */
.fben .fben-ph{--fbz:clamp(64px,6vw,104px)}
.fben .fben-ph img{position:absolute;top:var(--fbz);left:auto;right:var(--pagepad);bottom:auto;
width:calc(100% - var(--pagepad));height:calc(100% - (var(--fbz) * 2));aspect-ratio:auto;
object-fit:contain;object-position:100% 50%}
}
/* ---- 5 · half-can section: sub copy reads on dark, dots draw the eye ---- */
.cut-list .cr-hook{font-size:18px !important;font-weight:500;line-height:1.5;
color:var(--paper) !important}
.cut-list .cr-inner p{font-size:17px !important;font-weight:400;line-height:1.62;
color:#B3AFA4 !important;max-width:46ch}
@media(min-width:821px){
.cut-dot{width:34px;height:34px;padding:7px} /* 20px visible dot */
.cut-dot:after{inset:-3px;border-width:2px}
.cut-canwrap.in .cut-dot{opacity:.78;animation:cutIdle 3.4s ease-in-out infinite}
.cut-canwrap.in .cut-dot.on{animation:none}
}
@media(max-width:820px){
.cut-dot{width:44px;height:44px;padding:0;background:transparent}
.cut-dot::before{width:20px;height:20px}
.cut-dot:after{inset:9px;border-width:2px}
.cut-canwrap.in .cut-dot{opacity:.78}
}
.cut-dot.on{opacity:1}
.cut-dot.on:after{opacity:1;animation:cutPulse 1.9s cubic-bezier(.24,.7,.3,1) infinite}
@keyframes cutPulse{0%{transform:scale(.6);opacity:1}
72%{transform:scale(2);opacity:0}100%{transform:scale(2);opacity:0}}
@keyframes cutIdle{0%,100%{box-shadow:0 0 0 0 rgba(244,240,231,0)}
50%{box-shadow:0 0 0 7px rgba(244,240,231,.16)}}
@media(prefers-reduced-motion:reduce){
.cut-canwrap.in .cut-dot{animation:none}
.cut-dot.on:after{animation:none;opacity:1}
}
/* the can says "0g", not "0G": the credential cells carry their own caps so
the unit keeps its lower-case g, same as the homepage band */
.creds-grid .crd h3{text-transform:none}
/* ============================================================
QA PASS — 15 Sep 2026, ahead of the Matt/investor review
Two standing rules were being broken in places the homepage
audit never reached: opacity (and alpha colours) used to mute
TEXT, and UI labels below the 13px floor.
============================================================ */
/* ---- no opacity on text, anywhere in the page body ---- */
/* cut list, on the ink ground */
.cut-list .cr-nm{opacity:1 !important;color:#C9C4B6 !important}
.cut-list .cut-row.on .cr-nm{color:var(--paper) !important}
.cut-list .cr-tag{opacity:1 !important;color:#9D9A92 !important;font-size:13px !important;
letter-spacing:.14em}
.cut-list .cr-num{font-size:13px !important;letter-spacing:.14em;color:#9D9A92 !important}
/* product hero, on the flavour plate */
.ph2-info .eyebrow{opacity:1 !important}
.ph2-note{opacity:1 !important}
.ph2 .opt .meta{opacity:1 !important;font-size:13px !important}
.ph2 .opt .price s{opacity:1 !important}
.ph2 .fit-link{opacity:1 !important;font-size:13px !important}
.ph2-rating .pr-vt{opacity:1}
/* ---- 13px floor on every UI label ---- */
.rt2-steps .n{font-size:13px !important;width:30px}
.xs-meta,.xs-go{font-size:13px !important}
@media(max-width:560px){
.cmp-head .cmp-lv::before,.cmp-head .cmp-tr::before{font-size:13px}
}
.cmp-cols{font-size:13px !important}
.cmp-cols .cmp-lv{color:var(--ink) !important}
/* same rendered colour the .4 alpha produced over --ink, with no alpha on text */
.facts-strip .dot{opacity:1 !important;color:#6E6C69 !important}
.marquee .dot{opacity:1 !important;color:#6E6C69 !important}
/* The facts ticker was written with 18px padding, then blanket-zeroed by the
full-bleed rule at line ~2335 that lumps it in with .cut/.fh. It rendered as
a 26px bar with 16px type flush to both edges. One token, both sides. */
.facts-strip{--fs-pad:clamp(15px,1.7vw,22px);
padding-top:var(--fs-pad) !important;padding-bottom:var(--fs-pad) !important}
/* ---- PDP hero: no dead band above a full-bleed plate on phones ----
.ph2 carried 60px of section padding while its first child is an
edge-to-edge photograph, so the plate floated 60px below the nav with
nothing in the gap. The air belongs to the copy, not the picture. */
@media(max-width:900px){
.ph2{padding-top:0 !important}
.ph2-info{padding-top:var(--sec,60px)}
}
/* ---- PDP rating: two deliberate lines on phones, one on desktop ---- */
.ph2-rating{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.ph2-rating .pr-b{font-size:inherit}
@media(max-width:640px){
.ph2-rating{gap:6px 10px}
.ph2-rating .pr-b{flex-basis:100%}
}
/* ---- reviews scroller: stays inside the page gutter ----
It bled out of .wrap and the first card sat at x=0 with its text clipped
against the screen edge. Contained, with the next card peeking so it still
reads as scrollable. */
@media(max-width:600px){
.rvw2-list{margin-inline:0 !important;padding-inline:0 !important;
grid-auto-columns:84% !important;scroll-padding-inline:0}
}
/* ---- no card boxes: Vuori/Alo, hairlines not containers ----
.rvc and .rvw2-score were still white boxes with a 1px border, a 4px
radius and a lift-and-shadow hover, on three product pages. */
.rvw2-score{background:transparent !important;border:0 !important;border-radius:0 !important;
padding:0 !important;border-top:1px solid var(--hair) !important;padding-top:clamp(22px,2.4vw,30px) !important}
.rvc{background:transparent !important;border:0 !important;border-radius:0 !important;
border-top:1px solid var(--hair) !important;box-shadow:none !important;
padding:clamp(20px,2.2vw,26px) 0 0 !important}
.rvc:hover{transform:none !important;box-shadow:none !important}
.rvc-cta{border-style:solid !important}
.rvc-alt{border-top:2px solid var(--acc,#B4185F) !important}
/* .ph2-rating carried opacity:.95 on the whole block (a container, so the
leaf-level audit missed it), and its link's underline was a border-bottom
on a box forced to 44px for the tap target, so the rule floated a line
below the text it belonged to. */
.ph2-rating{opacity:1 !important}
.ph2-rating a{border-bottom:0 !important;text-decoration:underline;
text-underline-offset:3px;text-decoration-thickness:1px}
/* Flavour switcher: the inactive links were muted with opacity:.65 on text.
Solid on both grounds: mixed into the plate colour on desktop, into the
paper on phones. Same rendered colour, no alpha. */
.ph2-flavors a{opacity:1 !important;
color:color-mix(in srgb, var(--phfg,#fff) 65%, var(--plate,#141410))}
.ph2-flavors a.on{color:var(--phfg,#fff)}
@media(max-width:900px){
.ph2-flavors a{color:#62615B}
.ph2-flavors a.on{color:var(--ink)}
}
.ph2-flavors a{font-size:13px !important;letter-spacing:.12em}
/* ---- font floor: nothing in the chrome or on a hero drops under 13px ---- */
.menu-btn{font-size:13px !important}
.fh-tab{font-size:13px !important;letter-spacing:.1em}
.loc-submit{font-size:13px !important}
.loc-num{font-size:13px !important}
.fl-lnk.fl-retlnk{font-size:13px !important}
/* ---- map: the Esri/HERE/Garmin/OSM box is off the map for good.
The licence credit lives as one quiet line under it instead. ---- */
.loc-map .leaflet-control-attribution{display:none !important}
.loc-credit{margin:12px 0 0;font-size:13px;font-weight:300;color:#5C5849}
/* Hero flavour tabs at the 13px floor no longer fit one line on a 360-390
phone at .1em tracking: the third tab ran past the gutter. Tighter tracking
and gap bring it inside at 390+, and below that the row scrolls inside the
gutter instead of bleeding off the screen. */
@media(max-width:560px){
.fh-tabs{flex-wrap:nowrap;gap:0 14px !important}
.fh-tab{white-space:nowrap;flex:0 0 auto}
.fh-tab .ft-x{display:none}
}
/* ---- back on the spacing scale ----
Two sections had been nudged to ad-hoc clamps by eye. Everything else on
the site runs on --sec / --sec-s, so these now do too. */
/* .loc-head dropped its bottom rule and tightened the bottom by hand:
93.6/44 at 1440 and 48/26 at 390, so the block sat high in its own box. */
.loc-head{padding-bottom:var(--sec-s) !important}
/* the ingredients hero ran two different ad-hoc clamps: 40px of section air
above the copy and a 34px gap from the copy down to the photo. The section
owns the top air, the inner owns the gap to the picture, both on --sec-s. */
.ing-hero{padding-top:var(--sec-s) !important;padding-bottom:0 !important}
.ing-hero .ing-hero-in{padding-block:0 var(--sec-s)}
/* Final CTA on phones: the copy stacks BELOW the photo (on desktop it is
absolutely positioned over it), and it had zero top padding, so the
headline sat about 12px under the edge of a photograph while the section
closed with 44px. One token, both ends. */
@media(max-width:900px){
.finalcta{padding-bottom:var(--sec-s) !important}
.finalcta .fc-copy{padding-top:var(--sec-s) !important}
}
/* ============================================================
CART DRAWER — a real bag, on the site's own system.
Hairlines, no boxes, ink CTA. Ports to Shopify unchanged.
============================================================ */
html.bag-on{overflow:hidden}
.bagveil{position:fixed;inset:0;background:rgba(20,20,16,.42);z-index:120;
opacity:0;transition:opacity .26s ease}
.bagveil.in{opacity:1}
.bagd{position:fixed;top:0;right:0;bottom:0;z-index:121;width:min(430px,100vw);
background:var(--paper);color:var(--ink);display:flex;flex-direction:column;
transform:translate3d(100%,0,0);transition:transform .3s cubic-bezier(.22,.61,.36,1);
box-shadow:none;border-left:1px solid var(--hair)}
.bagd.in{transform:translate3d(0,0,0)}
@media(prefers-reduced-motion:reduce){
.bagd,.bagveil{transition:none}
}
.bagd-top{display:flex;align-items:center;justify-content:space-between;
padding:22px var(--gut) 16px;border-bottom:1px solid var(--hair);flex:none}
.bagd-h{font-size:clamp(20px,2vw,24px);font-weight:300;letter-spacing:-.01em;margin:0}
.bagd-x{background:none;border:0;padding:12px 0 12px 12px;font:inherit;font-size:13px;
font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#5C5849;cursor:pointer}
.bagd-x:hover{color:var(--ink)}
.bagd-meter{padding:16px var(--gut);border-bottom:1px solid var(--hair);flex:none}
.bagd-meter-t{margin:0 0 9px;font-size:13px;font-weight:300;color:#5C5849}
.bagd-meter-t b{font-weight:500;color:var(--ink)}
.bagd-bar{display:block;height:3px;background:var(--hair);border-radius:100px;overflow:hidden}
.bagd-bar i{display:block;height:100%;background:var(--ink);border-radius:100px;
transition:width .35s cubic-bezier(.22,.61,.36,1)}
.bagd-list{flex:1 1 auto;overflow-y:auto;padding:0 var(--gut);-webkit-overflow-scrolling:touch}
.bagli{display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--hair)}
.bagli-ph{width:80px;height:80px;object-fit:cover;flex:none;background:var(--paper2)}
.bagli-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.bagli-n{margin:0;font-size:16px;font-weight:400;line-height:1.3}
.bagli-m{margin:0;font-size:13px;font-weight:300;color:#5C5849;line-height:1.4}
.bagli-r{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.bagqty{display:inline-flex;align-items:center;border:1px solid var(--hair)}
.bagqty button{width:34px;height:34px;background:none;border:0;font:inherit;font-size:15px;
line-height:1;color:var(--ink);cursor:pointer}
.bagqty button:hover{background:var(--paper2)}
.bagqty span{min-width:28px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}
.bagli-p{font-size:15px;font-variant-numeric:tabular-nums}
.bagli-rm{align-self:flex-start;background:none;border:0;padding:6px 0 0;font:inherit;
font-size:13px;color:#5C5849;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.bagli-rm:hover{color:var(--ink)}
.bagd-empty{padding:40px 0 28px}
.bagd-empty p{margin:0;font-size:17px;font-weight:300}
.bagd-empty-s{margin-top:8px !important;font-size:14px !important;color:#5C5849}
.bagup{padding:22px 0 26px}
.bagup-h{margin:0 0 14px;font-size:13px;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:#5C5849}
.bagup-i{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--hair)}
.bagup-i img{width:56px;height:56px;object-fit:cover;flex:none;background:var(--paper2)}
.bagup-n{flex:1;min-width:0;font-size:15px;font-weight:400;display:flex;flex-direction:column;gap:2px}
.bagup-n small{font-size:13px;font-weight:300;color:#5C5849}
.bagup-i button{background:none;border:1px solid var(--ink);padding:9px 16px;font:inherit;
font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink);cursor:pointer;flex:none;transition:background .2s,color .2s}
.bagup-i button:hover{background:var(--ink);color:var(--paper)}
.bagd-foot{flex:none;padding:18px var(--gut) calc(20px + env(safe-area-inset-bottom,0px));
border-top:1px solid var(--hair);background:var(--paper)}
.bagd-sum{display:flex;justify-content:space-between;align-items:baseline;
font-size:17px;font-weight:400;margin-bottom:6px}
.bagd-sum span:last-child{font-variant-numeric:tabular-nums}
.bagd-note{margin:0 0 16px;font-size:13px;font-weight:300;color:#5C5849}
.bagd-go{width:100%;justify-content:center;text-align:center}
.bagd-go[disabled]{cursor:default}
.bagd-cont{display:block;width:100%;margin-top:12px;background:none;border:0;padding:10px 0;
font:inherit;font-size:13px;color:#5C5849;text-decoration:underline;
text-underline-offset:3px;cursor:pointer}
.bagd-cont:hover{color:var(--ink)}
.bag-btn{background:none;border:0;font:inherit;cursor:pointer;color:inherit;padding:0}
.bag-btn:hover{opacity:1}
/* ---- announcement bar now carries the offer, rotating ---- */
.announce{overflow:hidden}
.ann-track{display:block}
.ann-i{display:block}
.ann-i[hidden]{display:none}
/* ---- email capture, above the footer nav ---- */
.foot-sign{border-bottom:1px solid #2C2C28;padding-bottom:clamp(30px,3.4vw,44px);
margin-bottom:clamp(30px,3.4vw,44px);max-width:520px}
.fs-h{font-size:clamp(22px,2.4vw,30px);font-weight:300;letter-spacing:-.015em;
line-height:1.15;margin:0 0 10px;color:var(--paper)}
.fs-s{margin:0 0 20px;font-size:15px;font-weight:300;color:#C7C4BC;line-height:1.5}
.fs-form{display:flex;gap:10px;flex-wrap:wrap}
.fs-inp{flex:1 1 220px;min-width:0;background:transparent;border:0;
border-bottom:1px solid #4A4A44;color:var(--paper);font:inherit;font-size:16px;
font-weight:300;padding:11px 2px;border-radius:0}
.fs-inp::placeholder{color:#8A877F}
.fs-inp:focus{outline:0;border-bottom-color:var(--paper)}
.fs-btn{flex:none;background:var(--paper);border:1px solid var(--paper);color:var(--ink);
font:inherit;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
padding:13px 24px;cursor:pointer;transition:background .2s,color .2s}
.fs-btn:hover{background:transparent;color:var(--paper)}
.fs-msg{margin:12px 0 0;font-size:14px;font-weight:300;color:#C7C4BC;min-height:1em}
.fs-msg.ok{color:var(--paper)}
@media(max-width:560px){
/* flex-basis becomes a HEIGHT once the row turns into a column, which is
what made the ZIP field 370px tall on the locator. Pin it. */
.fs-form{flex-direction:column;align-items:stretch;gap:16px}
.fs-inp{flex:0 0 auto;width:100%}
.fs-btn{width:100%;flex:0 0 auto}
}
/* ---- shop grid: four cards now, quick-add, per-can price ---- */
@media(min-width:901px){ .shop-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media(min-width:601px) and (max-width:900px){ .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.pcard{position:relative}
.pc-flag{position:absolute;top:0;left:0;z-index:2;background:var(--ink);color:var(--paper);
font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px}
.pc-add{display:block;width:100%;margin-top:14px;background:transparent;
border:1px solid var(--ink);color:var(--ink);font:inherit;font-size:13px;font-weight:500;
letter-spacing:.16em;text-transform:uppercase;padding:13px 16px;cursor:pointer;
transition:background .22s ease,color .22s ease}
.pc-add:hover{background:var(--ink);color:var(--paper)}
.pcard-mix .ph{background:var(--paper2)}
.go-static{color:var(--muted);letter-spacing:.2em;font-size:13px;
font-weight:500;text-transform:uppercase}
.go-static::after{display:none}
/* ---- rating proof under the section head ---- */
.shop-proof{margin:10px 0 0;font-size:15px;font-weight:300;color:#5C5849;
display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.shop-proof b{font-weight:500;color:var(--ink)}
.sp-stars{color:var(--plum);letter-spacing:.14em;font-size:14px}
/* ---- retailer row: typographic, no borrowed logos ---- */
.retrow{background:var(--paper2);padding:var(--sec-s) 0}
.rr-k{margin:0 0 clamp(16px,1.8vw,22px);font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#5C5849}
.rr-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
gap:clamp(14px,1.8vw,24px) clamp(20px,2.7vw,42px);align-items:baseline}
.rr-list li{font-size:clamp(24px,3.1vw,40px);font-weight:300;letter-spacing:-.018em;
color:var(--ink);white-space:nowrap;line-height:1.05}
.rr-n{margin:clamp(24px,2.8vw,36px) 0 0;font-size:clamp(16px,1.5vw,19px);
font-weight:300;color:#5C5849;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rr-n b{font-weight:400;color:var(--ink)}
.rr-n .lnk{color:var(--ink);font-size:inherit;letter-spacing:0;text-transform:none;font-weight:400}
/* The per-can price rendered as "$292 a can": NH's period disappears at the
light weight the card meta was using, so the decimal was invisible and the
number read as a nonsense price. Heavier, larger, solid ink-muted. */
.pcard .price small{font-weight:400 !important;font-size:14px !important;
color:#5C5849 !important;letter-spacing:0}
.pcard .price{font-weight:400}
/* the global body-copy floor at line ~2217 caps every at 16px, which
flattened the retailer names into body text. They are the proof, not copy. */
.rr-list li{font-size:clamp(22px,2.55vw,33px) !important;line-height:1.05 !important}
.rr-n{font-size:clamp(16px,1.5vw,19px) !important}
.rr-n .lnk{font-size:inherit !important;letter-spacing:0 !important;
text-transform:none !important;font-weight:400 !important;padding:0 !important}
/* same invisible-decimal problem inside the cart's upsell rail */
.bagup-n small{font-weight:400;font-size:13.5px;color:#5C5849}
/* ============================================================================
PHASE 6 — QA fixes
============================================================================ */
/* ---- 1 · ingredient marquee: band air was pinned to the HORIZONTAL gap, so a
78px icon sat inside 76px of padding with a 14px icon-to-label gap. The rule
is proportion, not literal equality: the band breathes off the gap token, the
item's own internal rhythm scales with the icon. ---- */
.cmq{padding:calc(var(--cmq-gap) * .6) 0}
.cmq-item{gap:clamp(13px,1.35vw,18px)}
@media(max-width:820px){
.cmq{padding:calc(var(--cmq-gap) * .85) 0}
.cmq-item{gap:clamp(10px,2.6vw,13px)}
}
/* ---- 2 · --pagepad reproduces the page's left edge, which is right at 1440
(117.6px) but unbounded above it: 364px at 1920, 684px at 2560. A half-width
copy column was floating that far into dead black. Cap it. ---- */
@media(min-width:901px){
.belief:has(.bl-ph) .bl-copy{padding-inline:min(var(--pagepad),132px) clamp(40px,4.6vw,96px)}
.fben:has(.fben-ph) .fben-copy{padding-inline:min(var(--pagepad),132px) clamp(40px,5vw,92px)}
}
/* ---- 6 · section-foot CTA: centred, and the accent rather than a second
outline that reads like the card buttons above it ---- */
.sec-foot{display:flex;justify-content:center}
.sec-foot .btn.outline{background:var(--plum,#B4185F);border-color:var(--plum,#B4185F);
color:#FFFFFF}
.sec-foot .btn.outline:hover{background:#8E1149;border-color:#8E1149;color:#FFFFFF}
/* ---- 7 · email capture: it was a 520px stack sitting in the footer's own
column at the footer's own ground, so it read as footer chrome. Its own
full-bleed band, its own ground, copy and form side by side. No box. ---- */
.foot-sign{max-width:none;border-bottom:0;
margin-inline:calc(var(--gut) * -1);
margin-bottom:clamp(40px,4.6vw,64px);
padding:clamp(40px,4.6vw,64px) var(--gut);
background:#1E1E19;
display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
gap:clamp(28px,3.6vw,64px);align-items:center}
.fs-copy{min-width:0}
.fs-act{min-width:0}
.fs-h{font-size:clamp(25px,3vw,38px);margin:0 0 10px;max-width:16ch}
.fs-s{margin:0;font-size:15.5px;color:#C7C4BC;max-width:40ch}
.fs-form{gap:12px}
.fs-inp{border-bottom-color:#5A5A52;padding:13px 2px}
@media(max-width:900px){
.foot-sign{grid-template-columns:1fr;gap:24px}
.fs-h{max-width:none}
}
/* ---- 8 · the ticker's separator was a middot at 16px in #6E6C69 on ink:
technically present, practically invisible. A middot never carries at that
size, so the separator becomes an actual round dot. ---- */
.facts-strip .dot,.marquee .dot{
font-size:0 !important;line-height:0;padding:0 !important;
flex:0 0 auto;align-self:center;
width:5px;height:5px;border-radius:50%;
background:#C7C4BC;margin:0 15px 0 1px}
.facts-strip .track,.marquee .track{align-items:center}
/* ---- 9 · comparison header row ran on a different column template and a
different gap from the rows underneath it, so LEVL and TRADITIONAL sat right
of their own columns and TRADITIONAL clipped. Same template, same gap, and a
ground behind the LEVL column so it reads as a real side-by-side. ---- */
.cmp-list{--cmp-col:clamp(112px,13vw,172px)}
@media(min-width:761px){
.cmp-cols,.cmp-head{grid-template-columns:34px minmax(0,1fr) var(--cmp-col) var(--cmp-col) !important;
gap:clamp(10px,1.6vw,18px) !important}
.cmp-cols{padding:0 0 12px !important}
.cmp-cols .cmp-lv,.cmp-cols .cmp-tr,
.cmp-head .cmp-lv,.cmp-head .cmp-tr{min-width:0;text-align:center}
}
@media(min-width:761px){
.cmp-cols .cmp-lv,.cmp-head .cmp-lv{background:#EBE5D9}
.cmp-head .cmp-lv{padding-block:clamp(14px,1.6vw,18px);
margin-block:calc(clamp(14px,1.6vw,18px) * -1)}
.cmp-cols .cmp-lv{padding-block:7px;margin-bottom:-7px}
/* TRADITIONAL carried no padding while LEVL sat in a tinted box, so the two
headings were 4px out of vertical alignment with each other. Centre both
on the same axis instead of letting the box set one and not the other. */
.cmp-cols{align-items:center}
.cmp-cols .cmp-tr{padding-block:7px;margin-bottom:-7px}
.cmp-head{align-items:center}
}
/* ---- 10 · fben photograph: the copy half bleeds to the page edge but the
picture sat as a 516x567 rectangle inside a 634x740 column, with 118px of
dead paper to its right and 87px above and below. A half-page picture fills
its half. ---- */
@media(min-width:901px){
/* only the single-picture variant: why-levl's fben carries a PAIR of
pictures in a two-column .fben-ph and must keep both. */
.fben:has(.fben-ph > img:only-child),
.fben:has(.fben-ph > picture:only-child){}
.fben:has(.fben-ph > img:only-child) .fben-grid,
.fben:has(.fben-ph > picture:only-child) .fben-grid{grid-template-columns:1fr 1fr !important;
align-items:stretch;min-height:clamp(620px,58vw,844px) !important}
.fben .fben-ph:has(> img:only-child),
.fben .fben-ph:has(> picture:only-child){position:relative;height:auto;overflow:hidden;margin:0;padding:0}
.fben .fben-ph:has(> picture:only-child) > picture{position:absolute;inset:0;display:block}
.fben .fben-ph:has(> img:only-child) > img,
.fben .fben-ph:has(> picture:only-child) > picture > img{position:absolute !important;inset:0 !important;
top:0 !important;right:0 !important;left:0 !important;bottom:0 !important;
width:100% !important;height:100% !important;
aspect-ratio:auto !important;object-fit:cover !important;object-position:50% 50% !important;
border-radius:0 !important}
}
/* ---- retailer row: the real marks, one ink, optically balanced ----
Sourced from each retailer's own public brand asset: Target's press-room
black bullseye, Casey's and Hy-Vee's own site SVGs, Down to Earth's header
logo. Each is an official one-colour lockup recoloured to a single ink, not
redrawn. Heights are per-mark because a circular bullseye and a two-line
wordmark do not read equal at the same pixel height. ---- */
.retrow{--rl-h:clamp(27px,3.1vw,40px)}
.rr-logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
align-items:center;gap:clamp(26px,3.2vw,52px) clamp(34px,4.4vw,74px)}
@media(min-width:721px){
/* four marks clustered at the left edge of a 1320px column left the whole
right half empty. They are the proof band: let them hold the width. */
.rr-logos{flex-wrap:nowrap;justify-content:space-between;gap:0;
max-width:1180px}
}
.rr-logos li{display:flex;align-items:center;margin:0}
.rl{display:block;width:auto;height:var(--rl-h)}
.rl-target{height:calc(var(--rl-h) * 1.08)}
.rl-cm{height:calc(var(--rl-h) * 1.32)}
.rl-hyvee{height:calc(var(--rl-h) * .95)}
.rl-eo{height:calc(var(--rl-h) * 1.3)}
.rl-dte{height:calc(var(--rl-h) * 1.08)}
@media(max-width:720px){
/* six marks wrapping raggedly reads like a mistake: three even rows of two */
.retrow{--rl-h:clamp(23px,6.2vw,30px)}
.rr-logos{display:grid;grid-template-columns:1fr 1fr;
gap:clamp(24px,6vw,34px) clamp(16px,4.5vw,28px);
justify-items:start;align-items:center}
}
/* ---- ingredient line icons on the ink ground ----
The .cut section runs on #131311 and was serving the same black line icons
used on paper, so six icons were drawing near-black on near-black. The art
is single-colour line work, so it recolours rather than needing a second
file: brightness(0) flattens whatever the source is, invert(1) takes it to
white. One rule covers every dark placement, now and later. ---- */
.cut .cr-ic img{filter:brightness(0) invert(1)}
/* ---- comparison dropdown: ours on the left, theirs on the right ----
The expanded row was one paragraph across the full width, so opening a row
told you about LEVL and said nothing about what it is being compared to.
The detail now sits under the columns it belongs to, same grid as the head.
The two icons that were plain line art are the real can badges, so all five
read as one set. ---- */
.cmp-ic{width:38px;height:38px}
@media(min-width:761px){
.cmp-head{grid-template-columns:38px minmax(0,1fr) var(--cmp-col) var(--cmp-col) !important}
.cmp-cols{grid-template-columns:38px minmax(0,1fr) var(--cmp-col) var(--cmp-col) !important}
.cmp-inner{padding:0 0 clamp(16px,1.8vw,22px) 0 !important;
display:grid;grid-template-columns:38px minmax(0,1fr) minmax(0,1fr);
gap:clamp(10px,1.6vw,18px) clamp(24px,3vw,48px);align-items:start}
}
.cmp-d{display:block;font-weight:300;font-size:15px;line-height:1.6;color:var(--muted);max-width:42ch}
.cmp-d b{display:block;font-weight:500;font-size:11.5px;letter-spacing:.16em;
text-transform:uppercase;color:#5C5849;margin-bottom:7px}
.cmp-d-lv{grid-column:2}
.cmp-d-tr{grid-column:3;color:#6E6B62}
.cmp-d-tr b{color:#7A766B}
@media(max-width:760px){
.cmp-inner{display:block;padding:0 0 18px 50px !important}
.cmp-d{max-width:none;font-size:15px}
.cmp-d + .cmp-d{margin-top:16px}
}
/* ---- marquee: even rhythm, one circle size, one ring weight ----
Every item was only as wide as its own label, so VEGAN took 78px and
NOTHING ARTIFICIAL took 172px and the circles landed at uneven intervals
even though the gap between items was constant. Fixing the item width to
the longest label puts every circle on the same pitch. ---- */
.cmq-item{flex:0 0 var(--cmq-w,190px)}
.cmq{--cmq-w:clamp(178px,13.2vw,196px)}
@media(max-width:820px){ .cmq{--cmq-w:clamp(168px,44vw,182px)} }
/* ---- retailer row: black band, logos running left to right ----
Matt's call. The band inverts to ink, the marks recolour to white off the
same single-colour art rather than a second set of files, and the strip runs
as a continuous marquee with a fixed item width so the pitch never varies.
Paused on hover and focus, and reduced-motion turns it into a swipe strip. */
.retrow{background:#131311;padding:var(--sec-s) 0;overflow:hidden}
.rr-k{color:#9D9A92}
.rr-n{color:#B5B2AB !important}
.rr-n b{color:var(--paper)}
.rr-n .lnk{color:var(--paper)}
.retrow .rr-marquee{overflow:hidden;margin-block:clamp(22px,2.6vw,34px)}
.retrow .rr-logos{--rr-gap:clamp(56px,6vw,104px);--rr-w:clamp(150px,15vw,210px);
display:flex !important;flex-wrap:nowrap !important;width:max-content;
gap:var(--rr-gap);align-items:center;justify-content:flex-start !important;
max-width:none !important;padding:0;margin:0;list-style:none;
animation:rr-run 44s linear infinite;will-change:transform}
.retrow .rr-logos li{flex:0 0 var(--rr-w);display:flex;align-items:center;justify-content:center;margin:0}
.retrow .rl{filter:brightness(0) invert(1)}
@keyframes rr-run{
from{transform:translate3d(calc(-50% - (var(--rr-gap) / 2)),0,0)}
to{transform:translate3d(0,0,0)}
}
.retrow .rr-marquee:hover .rr-logos,
.retrow .rr-marquee:focus-within .rr-logos{animation-play-state:paused}
@media(max-width:720px){
.retrow .rr-logos{--rr-gap:clamp(40px,11vw,64px);--rr-w:clamp(128px,34vw,168px);
animation-duration:30s}
.retrow{--rl-h:clamp(24px,6.4vw,32px)}
}
@media(prefers-reduced-motion:reduce){
.retrow .rr-marquee{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.retrow .rr-marquee::-webkit-scrollbar{display:none}
.retrow .rr-logos{animation:none}
}
/* ---- retailer band: label and CTA centred on the strip ----
The strip is a full-bleed centred element; a left-aligned label and CTA over
it were the thing reading as off. The doors count is gone: it dates itself,
and six retailer marks make the distribution claim better than a number. The
locator link stays, because it is the only action in the band. ---- */
.retrow .rr-k{text-align:center}
.retrow .rr-n{margin-top:0 !important;justify-content:center;text-align:center}
/* ---- retailer band: tighten ----
Measured: 143 to 199px of whitespace between marks that are themselves only
43 to 158px wide, and 187px of padding wrapping a 53px strip. Two causes.
The items carried a fixed width, which was right for the certification strip
where a label set each box, but wrong here where the logo IS the item: with
no labels, letting each item size to its own mark and spacing them by gap
alone makes the whitespace between marks identical every time. And the band
was on the section token when it is a ribbon, not a section, so it now
breathes off its own rhythm the way the ingredient marquee does. ---- */
.retrow{--rr-pad:clamp(30px,3.2vw,46px);padding:var(--rr-pad) 0}
.retrow .rr-marquee{margin-block:clamp(18px,1.9vw,26px)}
.retrow .rr-logos{--rr-gap:clamp(44px,4.6vw,72px)}
.retrow .rr-logos li{flex:0 0 auto}
@media(max-width:720px){
.retrow .rr-logos{--rr-gap:clamp(34px,8vw,46px)}
}
/* One set of six marks is 1113px. Every desktop viewport is wider than that,
so a two-copy track ran out of logos partway through each cycle and showed
an empty stretch at the edge. Six copies, and the loop travels exactly one
set (its width plus its trailing gap), so the strip is never short. */
.retrow .rr-logos{animation-name:rr-run6;animation-duration:52s}
@keyframes rr-run6{
from{transform:translate3d(calc((-100% - var(--rr-gap)) / 6),0,0)}
to{transform:translate3d(0,0,0)}
}
@media(max-width:720px){ .retrow .rr-logos{animation-duration:34s} }
/* CTA line out of the band: the strip and its label are the whole section now,
so the bottom margin the copy used to carry comes off with it. */
.retrow .rr-marquee{margin-bottom:0}
/* fben sauna: anchor the cover crop so her head and the can are never cut
source 2000x1666 (AR 1.200); safe content x 258-2509 / y 64-2410 of the
3860x3217 origin. x 14% keeps the safe span at the narrowest box AR (0.727),
y 5% keeps hair top and can base in frame up to a ~2750px viewport. */
@media(min-width:901px){
.fben .fben-ph:has(> picture:only-child) > picture > img{
object-position:14% 5% !important}
}
/* Edward, 9/29: the cans do not move. Not at rest, not on hover, nowhere on the
site. Every can stands vertical and stays there. This block is the single
place that decides it, and it kills BOTH the idle animations and the hover
transforms, in every state, at every breakpoint. Do not reintroduce a sway, a
bob, a wiggle or a tilt. */
.fh-bob,.fh-sway,.ph2-can,
.fh-plate:hover .fh-bob,.fh-plate:hover .fh-sway,
.fh-plate .fh-bob,.fh-plate .fh-sway{animation:none !important}
/* No transition either. A transition with nothing to transition to is dead
weight, and it is how a tilt creeps back in. */
.ph2-can,.fh-bob,.fh-sway{transition:none !important}
/* Upright, in every state, including hover and focus. */
.fh-bob,.fh-sway,
.fh-plate:hover .fh-bob,.fh-plate:hover .fh-sway,
.fh-plate:focus-within .fh-bob,.fh-plate:focus-within .fh-sway{transform:none !important}
.ph2-can,
.ph2-media:hover .ph2-can,.ph2:hover .ph2-can,
.ph2-media:focus-within .ph2-can,
.ph2:focus-within .ph2-can{transform:translate(-50%,-50%) rotate(0deg) !important}
/* The nav flavour tiles carry cans too. Keep the lift and the zoom, drop the
rotation, so nothing with a can in it tilts. */
.mega-tile:hover img,.mega-tile:hover .mt-ph img{rotate:none !important}
.mega-tile:hover img{transform:translateX(-50%) translateY(-4px)}
/* Every flavour's buy column must occupy the same height, because the hero
section is sized by that column and the can is 78% of the section. A flavour
whose rating block runs one line instead of two pulls its section shorter and
shrinks its can by the same ratio. Reserve the two-line height everywhere. */
.ph2-rating{min-height:36px;display:flex;align-items:center;flex-wrap:wrap;gap:0 10px}
/* The flavour description runs to three lines on some flavours and two on
others, worth about 24px of column height. Reserve three lines everywhere so
the section, and therefore the can, is identical. */
.ph2-note{min-height:4.65em}
@supports (height:1lh){ .ph2-note{min-height:3lh} }
/* The rating row wraps to two rows from 901px up. Reserve the height so a
flavour whose rating line happens to fit on one row still sets the same
column height, and every can renders the same size. */
@media(min-width:901px) and (max-width:1199px){ .ph2-rating{min-height:62px} }
/* PDP rating stars were tinted to the accent and washed out on the plate
(AB measured 1.41:1, LL 2.05:1). They carry the score, so they inherit from
.ph2-info: white over the plate at desktop, ink over cream at mobile.
Do not pin this to --phfg; that reads white-on-cream at mobile. */
.ph2-rating .stars{color:inherit}
/* ---- 9/25 contrast pass on the PDP buy column (pre-existing, all flavours) ----
Found by measuring rendered text against the plate, not by axe: axe resolves
the background to the plate element and passes both of these.
1. The struck-through compare-at price was a muted warm grey on every plate.
It measured as low as 1.33:1 against a 4.5 requirement. It is a price, so
it has to be readable; the line-through already marks it as the old one. */
.ph2-info s,.ph2-info del,
.ph2-info .opt .price s,.ph2-info .opt.on .price s{color:inherit !important}
/* 2. The inactive flavour links were mixed 65% toward the plate, landing at
3.22-3.90:1. Dimming cannot work here: pure white on the Acai plate is
only 4.61:1, so any mix at all drops under AA. The active link is already
marked by its underline and its colour dot, so all four now run at full
plate foreground and the state reads from the underline instead. */
@media(min-width:901px){
.ph2-flavors a{color:var(--phfg,#fff)}
.ph2-flavors a.on{color:var(--phfg,#fff);text-decoration:underline;
text-underline-offset:5px;text-decoration-thickness:1.5px}
}
/* =====================================================================
MOBILE-FIRST QA PASS, 9/29/26. Three findings, measured not guessed.
===================================================================== */
/* 1. AA FAILURE. The "TRADITIONAL" label in the comparison rows ran
#7A766B on #F4F0E7 = 3.99:1, which fails the 4.5 bar, and it sat at
11.5px, under the 12px floor. axe flagged it serious on all three
product pages. The de-emphasis belongs in the body copy, which
already measures 4.68:1, not in a label nobody can read. */
.cmp-d b{font-size:13px}
.cmp-d-tr b{color:#5C5849} /* 6.27:1, same as the LEVL-side label */
/* 2. TAP TARGETS. 90% of traffic is a thumb. Everything interactive
clears 44x44. These were 29px to 41px. */
.fh-tab{min-width:44px;min-height:44px;
display:inline-flex;align-items:center;justify-content:center}
.loc-act{min-height:44px;display:inline-flex;align-items:center}
.loc-chip{min-height:44px}
.bagd-cont{min-height:44px}
header nav a,.foot-grid a,.foot-soc a,.foot-base a{
min-height:44px;display:inline-flex;align-items:center}
.leaflet-control-zoom a{width:44px !important;height:44px !important;
line-height:44px !important}
/* 3. TWELVE greys were in use on dark grounds: #9A9891 #9D9A92 #9F9C95
#B1AEA6 #B3AFA4 #B5B2AB #C7C4BC #C9C4B6 #CCC8C0 #D2CFC7 #D5D1C9
#E2DED6. All passed AA on the number, but "uniform" is the rule and
twelve is not uniform, and the darkest sat at 6.4:1 reading as washed
out. One secondary now, #CCC8C0, 11.07:1 on #141410. White stays
white; this is only the second tier. */
:root{--on-dark-2:#CCC8C0}
.bl-sub,.bl-kicker,.cut-sub,.sub.cut-sub,.cut-eye,.cut-panel p,
.cr-tag,.cut-list .cr-tag,.cr-hook,.cr-num,.cr-inner p,
.ug-sub,.ug-head .eyebrow,.igs-k,
.fs-s,.fb-sub,.finalcta .sub,
.foot-grid a,.foot-grid h5,.foot-soc a,.foot-base,footer .foot-base,
.ritual-band .sub,.ritual-band .eyebrow,
.fl-direct .sub,.fl-direct .eyebrow,.ingband-copy .eyebrow,
.rb-skip,.rd-line,.sb-k,.rr-k,.crd-hero p,
.creds-grid .crd-hero p{color:var(--on-dark-2) !important}
/* The remap above lost to a dozen earlier scoped !important rules. Same
selectors, same weight, last word. This is the complete list, taken from
grepping every !important colour rule that used one of the twelve greys,
not from guessing which ones mattered. */
.creds-grid .crd-hero p,
.cut-sub,.cut-side .sub,.cut-eye,
.belief .bl-sub,
.finalcta .sub,.finalcta .fc-copy .sub,
.statbar .sb-k,
.ugc .ug-sub,
.foot-brand .fb-sub,
.rd-meta .k,.rd-row .k,
.cut-list .cr-inner p,.cut-row .cr-inner p,
.receipts-dark .rd-note,.receipts-dark .sub,.receipts-dark .k,
.cut-list .cr-nm,.cut-list .cr-tag,.cut-list .cr-num,
.rr-n,.rr-k,
.foot-nav a,.foot-brand a,
.cr-body .cr-inner p,.cr-body .cr-inner .cr-hook,
.cut-row .cr-head .cr-nm,
.bl-copy .bl-sub{color:var(--on-dark-2) !important}
.pil-hook,.pil-body{color:var(--on-dark-2) !important}
/* Second tap-target pass. The first one used the wrong selectors for four
controls: the footer nav is bare inside nav.foot-nav, the cart
drawer upsell button has no class at all, and the loc-act buttons were
tall enough but only 32px wide. Measured selectors this time. */
.foot-nav a{min-height:44px;display:inline-flex;align-items:center}
.bagup-i button{min-height:44px;min-width:66px}
.loc-acts .loc-act,.loc-act.loc-show{min-width:44px;justify-content:center}
.qty input{min-width:44px}
/* The product-card "DETAILS" and "12 CANS" links render 35px tall at desktop
width. Caught by running the tap-target probe at 1440 as well as 390; the
first pass only checked the phone. Applies to every homepage variant. */
.go{min-height:44px;display:inline-flex;align-items:center}
/* The six ingredient hotspots on the can cutaway were a 34px box from 821px up,
so the tap target failed the 44px floor on desktop. Caught by running the
probe at 1440 as well as 390. The box goes to 44, the padding absorbs the
difference, and background-clip:content-box keeps the VISIBLE dot at the same
20px it has always been. Nothing moves, nothing looks bigger. */
@media(min-width:821px){
.cut-dot{width:44px;height:44px;padding:12px}
.cut-dot:after{inset:2px}
}
/* ===================================================================
WHOLE-SITE QA, 10/1/26. Three real defects, found by probing the
rendered pages at 320/360/390/414/768/1024/1440. axe was already
clean on all fifteen pages, which is exactly why these survived.
=================================================================== */
/* 1. THE CLOSED CART DRAWER WAS STILL IN THE TAB ORDER, ON EVERY PAGE.
cart.js closes it with `drawer.hidden = true`, but `.bagd{display:flex}`
is a class selector and beats the browser's own `[hidden]{display:none}`.
So the attribute did nothing: the panel stayed laid out, kept five
focusable controls, and sat off-screen behind a transform. A keyboard
user tabbing the page fell into an invisible cart and a screen reader
read it out. WCAG 2.4.3 Focus Order is Level A, so this was below A on
every page of the site. axe cannot see it because the controls are
technically visible. */
.bagd[hidden],.bagveil[hidden]{display:none !important}
/* 2. TAP TARGETS UNDER 44px ON THE THREE PRODUCT PAGES.
These never showed up before because the earlier gate only ever ran
against the homepage. The worst was the Write a review button at 16px
tall. Height comes from padding so the type size and the layout do not
move; only the hit area grows. */
.ph2-flavors a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.ph2-rating a{min-height:44px;display:inline-flex;align-items:center}
.ph2-info .fit-link{min-height:44px;display:inline-flex;align-items:center}
.opt select{min-height:44px}
.rvc-by .lnk,.rvc-by .lnk-btn{min-height:46px;display:inline-flex;align-items:center;
padding-top:0;padding-bottom:0}
/* 46, not 44: at 320 the button measured 43.98 and rounded to 44 in the probe
while actually sitting a hair under the floor. Two pixels of headroom costs
nothing and removes the sub-pixel argument entirely. */
.lnk-btn{min-height:46px;display:inline-flex;align-items:center}
.a .lnk,a.lnk{min-height:44px;display:inline-flex;align-items:center}
/* 3. hero-slides.html: the review page shipped with no h1 and no main
landmark, and its three Shop LEVL buttons rendered at 10.5px in a 93x35
box. 10.5px is under the 12px floor and the box is under 44. */
.hs-demo .c a{font-size:14px !important;min-height:44px;
display:inline-flex;align-items:center;justify-content:center;
padding:0 20px;letter-spacing:.14em}
/* 4. THE REVEAL NO LONGER FADES TEXT.
`.rv` animated opacity 0->1 over 0.7s. The end state is fine, and axe with
animations frozen reports zero AA failures site-wide, but for those 0.7s the
copy sits anywhere from 1.03:1 upward, and a scrolling reader sees exactly
that. Edward's standing rule is no opacity and no rgba alpha on text, full
stop. The motion is kept: the block still slides up from 26px. It just
arrives at full opacity instead of fading in, so there is no instant at
which any text on this site is below AA. */
.rv{opacity:1;transition:transform .7s cubic-bezier(.2,.6,.25,1)}
.rv.in{opacity:1;transform:none}
/* ===================================================================
THE PHONE MENU SHOWS THE CANS. Edward, 10/2: "cans should be in
color on mobile".
The flavour preview in the full-screen menu was hover-driven, and a
phone has no hover, so on every phone the menu was three lines of
text with no product on it at all. That also breaks the standing
icons-always rule: never ship a bare text list.
Each flavour link already carries its can in data-can and its shelf
colour in data-tint. On a phone the can is injected inline, always
visible, at full colour with no filter, on a tinted chip so the pale
Acai can has something to sit against. Desktop is untouched and
keeps the hover preview.
=================================================================== */
@media(hover:none),(max-width:900px){
.fsm-big[data-can]{display:flex;align-items:center;gap:13px;
/* the chip and the number eat 90px of a 390 screen, so the flavour
names step down to keep "Pineapple + Coconut" on ONE line */
font-size:clamp(25px,6vw,44px)}
.fsm-can-m{flex:0 0 auto;width:54px;height:54px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--tint,#141410);overflow:hidden}
.fsm-can-m img{width:auto;height:46px;display:block;filter:none;opacity:1}
.fsm-big em{align-self:center}
}
/* ===================================================================
THE INSTAGRAM WALL IS ONE ROW, 9:16. Edward, 10/2.
It was two marquee rows of 4:5 tiles. One row now, and the tiles take
the shape the posts are actually shot in: the feed is reels, which
are 9:16, so a 4:5 tile was cropping the top and bottom off every
one of them.
The second row is hidden rather than removed, so the feed script is
untouched and nothing has to be re-rendered. Row A carries the NEWEST
posts, which is the half worth showing.
Tiles narrow as they get taller, or a 9:16 tile at the old width runs
516px deep and pushes the section past a phone screen.
=================================================================== */
.ug-row[data-dir="b"]{display:none !important}
.ug-tile{aspect-ratio:9/16 !important;
width:clamp(186px,16vw,248px) !important}
@media(max-width:820px){
.ug-tile{width:min(56vw,230px) !important}
}
/* ===================================================================
THE FLAVOUR SWITCHER DREW ITS MARKER TWICE. Edward, 10/2:
"Weird bottom white line still here."
Measured on the live PDP: the active link carries BOTH a
text-decoration underline at 1.5px AND a 1px border-bottom. One line
would be fine. Two is the defect, and they do not even sit together:
the tap-target rule gives the link min-height:44px with the text
centred, so the border lands at the BOTTOM of a 44px box, well under
the text and running the full width including the colour dot, while
the underline sits tight under the words only.
The underline is the one that reads as a marker, so the border goes.
The 44px tap target stays: it is a house rule and it is why the two
lines drifted apart in the first place.
=================================================================== */
.ph2-flavors a{border-bottom:0 !important}
.ph2-flavors a.on{text-decoration:underline !important;
text-decoration-thickness:1.5px !important;
text-underline-offset:5px}
.ph2-flavors a:not(.on){text-decoration:none !important}
/* ---- PDP buy box on phones: a sentence is not a label ----
.meta sits in the uppercase-label type role (13px / .2em tracking), which
is right for "FUNCTIONAL HYDRATION" and wrong for "12 cans · $2.48 a can ·
pause or cancel anytime". On the stacked phone layout it reads as a
sentence. The header row also ran out of room at 390: name, Save chip and
price in one nowrap line broke the name over two lines and collided with
the chip. Name and price hold the headline; the chip drops below only when
it has to. */
@media(max-width:900px){
.ph2 .opt .meta,
.ph2-info .opt .meta{font-size:15px !important;letter-spacing:normal !important;
line-height:1.5;margin-top:7px}
.ph2-rating .pr-b{font-size:15px !important;letter-spacing:normal !important}
.ph2 .opt .name,
.ph2-info .opt .name{font-size:14px !important}
.ph2 .opt .top,
.ph2-info .opt .top{flex-wrap:wrap;row-gap:6px;align-items:center}
.ph2 .opt .top .name,
.ph2-info .opt .top .name{order:1}
.ph2 .opt .top .price,
.ph2-info .opt .top .price{order:2;margin-left:auto}
.ph2 .opt .top .save,
.ph2-info .opt .top .save{order:3}
.ph2-flavors a:not(.on){color:#4A4842}
}
/* ---- PHONE: one button width, one button height ----
At 390 the buttons measured 144, 157, 165, 200, 213, 234, 240, 309, 311,
336 and 346 wide, with text sitting left, start and centre depending on
which rule won. On a phone that is a hunt. Every button is now the full
content column, centred, 58px minimum, so the thumb has one target shape
to learn. Two-up rows stack. The quantity stepper becomes a full-width
control of its own above Add to Cart, with 56px plus and minus keys. */
@media(max-width:600px){
.btn,.ph2-btn,.fh-btn,.fl-btn,.rgo,.qopt,.qnext{
display:flex !important;
width:100% !important;
max-width:none !important;
box-sizing:border-box;
align-items:center;
justify-content:center !important;
text-align:center !important;
min-height:58px !important;
padding:16px 18px !important;
line-height:1.25}
/* the two fixed bottom bars are compact rows, not page CTAs: thumbnail,
title and a control that must stay beside them. They keep their size. */
.satc .btn,.rbar .rgo,.rbar .btn{
display:inline-flex !important;width:auto !important;
flex:0 0 auto !important;padding:15px 22px !important;min-height:48px !important}
/* rows that held two buttons side by side */
.rt-ctas,.fl-dacts,.ing-close-cta{
display:flex !important;flex-direction:column !important;
align-items:stretch !important;gap:12px;width:100%}
/* quantity + add to cart: two full-width controls, stacked */
.qty-atc{flex-direction:column !important;align-items:stretch !important;gap:12px}
.qty-atc .qty,.ph2 .qty{width:100% !important;display:flex !important;
justify-content:space-between !important;align-items:center;min-height:58px}
.qty-atc .qty button{width:58px !important;min-height:58px;flex:0 0 auto}
.qty-atc .qty input{flex:1 1 auto;width:auto !important;text-align:center;font-size:16px;
min-height:58px;align-self:stretch}
.ph2-btn.atc{flex:none !important}
}
/* ---- PDP buy box: one divider, no chip box ----
The de-box pass put a hairline on top of EVERY .opt, so the subscribe
block carried a rule above it with nothing above the rule. One divider,
between the two options. The Save chip is a label, not a container. */
.ph2 .opt,.ph2-info .opt{border-top:0 !important;border-bottom:0 !important}
.ph2 .opt + .opt,.ph2-info .opt + .opt{border-top:1px solid #C9C3B2 !important}
@media(min-width:901px){
.ph2 .opt + .opt,.ph2-info .opt + .opt{border-top:1px solid currentColor !important}
}
.ph2 .save,.ph2-info .save{border:0 !important;padding-left:0 !important;padding-right:0 !important}
/* ============ FIND BALANCE. ALL DAY LONG. ============
Six dayparts on one sun arc: morning low, midday high, evening low. The
arc is the graphic, so the section is never a bare text list and never
needs six photographs it would have to repeat faces to fill. The SVG
scales uniformly (meet), so the dots stay round and land exactly on the
six column centres of the grid below it: 1200 * (i + 0.5) / 6.
On phones the arc becomes a vertical rail down the left. */
.day{background:var(--paper2)}
.day-head{max-width:720px}
.day-arc{display:block;width:100%;height:auto;margin:0 0 4px;overflow:visible}
.day-arc circle{fill:var(--ink)}
.day-list{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);
gap:0 clamp(14px,1.8vw,26px);margin:0;padding:0}
.day-i{text-align:center;padding:clamp(12px,1.4vw,18px) 0 0}
.day-ic{width:40px;height:40px;display:block;margin:0 auto 12px;color:var(--ink)}
.day-i h3{font-size:clamp(16px,1.3vw,17.5px) !important;font-weight:500;line-height:1.3;
letter-spacing:.005em;margin:0 0 8px;text-wrap:balance}
.day-i p{font-size:15px !important;line-height:1.55;color:var(--muted);margin:0;text-wrap:balance}
.day[data-form="short"] .day-i p{display:none}
.day[data-form="short"] .day-i{padding-bottom:4px}
@media(max-width:1079px){
.day-arc{display:none}
.day-list{display:block;position:relative;padding-left:30px}
/* the rail: one continuous line, a dot per moment */
.day-list:before{content:"";position:absolute;left:6px;top:14px;bottom:14px;
width:1px;background:#B1AAA0}
.day-i{text-align:left;padding:0 0 clamp(26px,5vw,34px);position:relative}
.day-i:last-child{padding-bottom:0}
/* on a phone the icon IS the marker: the rail runs behind it and a ring of
the section ground breaks the line so the mark sits on the thread. */
.day-i:before{display:none}
.day-ic{position:absolute;left:-39px;top:-2px;width:31px;height:31px;margin:0;
padding:3px;box-sizing:border-box;background:var(--paper2);border-radius:50%}
.day-i h3{font-size:18px !important;margin-bottom:5px}
.day-i p{font-size:16px !important;max-width:34ch}
.day-list{padding-left:48px}
.day-list:before{left:-33px;left:15px}
}
/* FAQ answers that run to more than one paragraph need air between them;
Matt's 10.2026 copy is the first on the page that does. */
.faq-a p + p{margin-top:.85em}
/* ============ LEVL vs TRADITIONAL — the compare chart ============
Matt's reference is Psilly Goose: the can holds the centre, our side on
the left reading toward it, theirs on the right reading away. The LEVL
column pops by weight and a plum check; theirs recedes to muted ink and
a cross. No boxes, no fills, hairlines only.
LAYOUT. One grid, three columns, seven rows. Each value cell declares its
COLUMN only, so grid auto-placement walks them down the rows in DOM order
and the two sides always share a row track: the hairlines line up even
when the electrolyte row runs to two lines. The can is placed explicitly
across every row. The row key is display:none here and carries the pairing
on phones, where the grid becomes one column and the can goes first. */
.cmp3{background:var(--paper)}
.cmp3-head{max-width:720px}
.cmp3-grid{display:grid;
grid-template-columns:1fr minmax(170px,300px) 1fr;
grid-template-rows:auto repeat(6,1fr);
column-gap:clamp(18px,3vw,52px);align-items:center}
.cmp3-h{grid-row:1;padding-bottom:18px}
.cmp3-h-lv{grid-column:1;text-align:right}
.cmp3-h-lv img{display:inline-block;height:26px;width:auto}
.cmp3-h-tr{grid-column:3;font-size:16px !important;font-weight:500;color:var(--ink);
letter-spacing:.01em}
.cmp3-can{grid-column:2;grid-row:1 / -1;margin:0;display:flex;align-items:center;
justify-content:center;padding:0 clamp(6px,1vw,16px)}
.cmp3-can img{width:100%;height:auto;max-height:520px;object-fit:contain}
.cmp3-k{display:none}
.cmp3-v{display:flex;align-items:center;gap:12px;padding:16px 0;
border-top:1px solid var(--hair);font-size:17px;line-height:1.35}
.cmp3-v b{display:none}
.cmp3-v .cm{flex:0 0 auto;width:17px;height:17px}
.cmp3-lv{grid-column:1;flex-direction:row-reverse;text-align:right;
color:var(--ink);font-weight:500}
.cmp3-lv .cm{color:var(--plum)}
.cmp3-tr{grid-column:3;color:#5C5849;font-weight:300}
.cmp3-tr .cm{color:#5C5849}
@media(max-width:860px){
.cmp3-grid{display:flex;flex-direction:column;align-items:stretch}
.cmp3-h{display:none}
.cmp3-can{order:-1;padding:0 0 clamp(18px,4vw,28px);justify-content:center}
.cmp3-can img{width:auto;max-height:260px}
.cmp3-k{display:block;font-size:13px !important;font-weight:500;
letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
padding:22px 0 10px;border-top:1px solid var(--hair)}
.cmp3-grid{border-bottom:1px solid var(--hair);padding-bottom:22px}
.cmp3-v{border-top:0;padding:5px 0;flex-direction:row;text-align:left;
align-items:flex-start;font-size:16px;gap:11px}
.cmp3-v .cm{margin-top:3px}
.cmp3-v b{display:inline;font-weight:500;font-size:13px;letter-spacing:.16em;
text-transform:uppercase;margin-right:9px;color:var(--muted)}
.cmp3-lv b{color:var(--plum)}
}
/* ============ BUILD YOUR RITUAL — three steps ============
The options now carry a description line, so the pill shape is gone: each
answer is a full-width hairline block, left aligned, two per row on a wide
screen and one per row on a phone.
THREE OLDER RULES HAD TO BE UNDONE HERE, and each was right for the old
one-line pill:
1. the one-button-system rule swept .qopt in with .btn, which sets 13px
and .22em tracking. A sentence is not a button label.
2. the selected state was ink ground with paper type. The ground is a
light tint now, so the type comes back to ink or the answer the page
exists for is invisible.
3. the selected state drew a tick in an :after. The tick now sits with
the title, where multi select needs it.
Step 3 is multi select, so its chosen state reads as "these are all on". */
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:12px;justify-content:stretch;
margin-bottom:clamp(26px,4vw,36px);text-align:left}
.qopt{display:flex;flex-direction:column;align-items:flex-start;gap:5px;
width:100%;min-height:72px;padding:18px 20px !important;text-align:left;
border:1px solid #B1AEA6 !important;background:transparent !important;
border-radius:0 !important;cursor:pointer;font-family:inherit;color:var(--ink);
font-size:16px !important;font-weight:400;letter-spacing:normal !important;
transition:border-color .18s,background .18s}
.qopt b{font-size:17px !important;font-weight:500;line-height:1.3;
letter-spacing:.004em !important;color:var(--ink)}
.qopt i{font-style:normal;font-size:15px !important;line-height:1.45;
letter-spacing:normal !important;color:#5C5849;font-weight:400}
.qopt:hover{border-color:var(--ink) !important;background:transparent !important}
.qopt.on{border-color:var(--ink) !important;color:var(--ink) !important;
background:rgba(20,20,16,.05) !important;box-shadow:inset 0 0 0 1px var(--ink);
padding-right:20px !important}
.qopt.on b,.qopt.on i{color:var(--ink) !important}
.qopt.on:after{content:none !important;display:none !important}
.qopt.on b:before{content:"";display:inline-block;width:15px;height:9px;margin-right:10px;
border-left:2px solid var(--plum);border-bottom:2px solid var(--plum);
transform:translateY(-3px) rotate(-45deg)}
.qres-h{font-weight:200;font-size:clamp(28px,3.4vw,42px);letter-spacing:-.01em;
line-height:1.05;margin-bottom:clamp(20px,3vw,28px);text-align:left}
.qresult h3{font-weight:200;font-size:clamp(28px,3.4vw,40px) !important;
letter-spacing:-.01em;margin-bottom:6px}
.r-qty{font-size:17px;font-weight:500;letter-spacing:.01em;margin-bottom:10px}
.qres-note{font-size:15px;color:#5C5849;margin-top:14px}
/* the running bar is fixed to the bottom; the last answer must clear it */
.quiz-shell{padding-bottom:clamp(120px,18vw,150px)}
@media(max-width:760px){
.qopts{grid-template-columns:1fr}
.qres-h{text-align:center}
}
@media(max-width:600px){
/* the site-wide phone button rule centres every .btn; a quiz answer is a
block of copy, not a label, so it keeps its own shape */
.qopt{display:flex !important;flex-direction:column !important;
align-items:flex-start !important;justify-content:center !important;
text-align:left !important;min-height:72px !important;padding:18px 20px !important}
}
/* A disabled Next was opacity:.35, which is grey type on a grey fill and the
one control a shopper is looking at when they are stuck. Solid both ways:
white on #6E6A5E is 5.48:1, and it still reads as not-yet-available. */
.qnext:disabled{opacity:1 !important;background:#6E6A5E !important;
border-color:#6E6A5E !important;color:#FFFFFF !important;cursor:not-allowed}