:root{
  --green:#24432A; --green-deep:#18301D; --leaf:#4E7A3A; --sage:#E3ECD6; --cream:#F7F0E1; --paper:#FFFBF2;
  --brass:#B8873A; --gold:#E2BE6E; --spice:#7A3E1D; --chilli:#A33A22;
  --bg:var(--cream); --surface:#FFFDF7; --surface-2:#EFE5D0; --ink:#22281F; --ink-soft:#5B5A4C;
  --line:#E2D6BD; --on-green:#F7F0E1; --wa:#25D366; --wa-ink:#0B3D1E; --wa-deep:#128C7E;
  --serif:"Young Serif", Georgia, "Times New Roman", serif;
  --sans:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hand:"Caveat", "Segoe Print", cursive;
  --r:20px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141C14; --surface:#1C261C; --surface-2:#223022; --ink:#EFE8D8; --ink-soft:#B9B3A2;
    --line:#2F3C2E; --green:#2E5735; --spice:#D9905E; --brass:#D2A65A; --sage:#223022; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#141C14; --surface:#1C261C; --surface-2:#223022; --ink:#EFE8D8; --ink-soft:#B9B3A2;
  --line:#2F3C2E; --green:#2E5735; --spice:#D9905E; --brass:#D2A65A; --sage:#223022; color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px); -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
body{margin:0; background:var(--bg); color:var(--ink); font:400 1rem/1.6 var(--sans); overflow-x:hidden; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
svg{display:block}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer; touch-action:manipulation}
:focus-visible{outline:3px solid var(--brass); outline-offset:3px; border-radius:6px}
.wrap{width:min(1200px, 100% - 2.5rem); margin-inline:auto}
@media (max-width:600px){.wrap{width:calc(100% - 2rem)}}
h1,h2,h3{font-family:var(--serif); font-weight:400; line-height:1.15; margin:0}
h2{font-size:clamp(1.75rem, 3.4vw, 2.5rem); color:var(--green)}
:root[data-theme="dark"] h2{color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) h2{color:var(--ink)}}
p{margin:0}
.hand{font-family:var(--hand); font-weight:700}
.kicker{font-size:.9rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); margin-bottom:.7rem}
.lead{font-size:1.1rem; color:var(--ink-soft); max-width:40rem; margin-top:.9rem}
.sec{padding:clamp(3.5rem,7vw,5.5rem) 0}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem; border:0; border-radius:999px; padding:.8rem 1.35rem; font-weight:700; text-decoration:none; font-size:1rem; line-height:1.2; transition:transform .15s, background .2s, box-shadow .2s, color .2s}
.btn svg{width:20px; height:20px; flex:none}
.btn:active{transform:scale(.97)}
.btn-lg{padding:1rem 1.6rem; font-size:1.05rem}
.btn-sm{padding:.55rem 1rem; font-size:.92rem}
.btn-sm svg{width:18px; height:18px}
.btn-block{width:100%}
.btn-wa{background:var(--wa); color:var(--wa-ink); box-shadow:0 6px 18px -6px rgba(18,140,126,.55)}
.btn-wa:hover{background:var(--wa-deep); color:#fff; transform:translateY(-2px)}
.btn-green{background:#24432A; color:#F7F0E1; box-shadow:0 8px 20px -10px rgba(24,48,29,.7)}
.btn-green:hover{background:#18301D; transform:translateY(-2px)}
.btn-outline{background:transparent; border:1.5px solid var(--green); color:var(--green)}

/* ---------- header ---------- */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
@media (max-width:1023px),(hover:none){.top{background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none}}
.top .wrap{display:flex; align-items:center; gap:1.25rem; height:68px}
.logo{display:inline-flex; align-items:flex-end; text-decoration:none; color:var(--green); font-family:var(--serif); font-size:1.75rem; line-height:1}
:root[data-theme="dark"] .logo{color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo{color:var(--ink)}}
.logo .t{position:relative}
.logo .t svg{position:absolute; width:20px; height:17px; left:-4px; top:-13px; max-width:none}
.nav{display:flex; gap:1.4rem; margin-left:auto; font-weight:500; font-size:.95rem}
.nav a{text-decoration:none; color:var(--ink-soft)}
.nav a:hover{color:var(--ink)}
.top-actions{display:flex; align-items:center; gap:.6rem}
.pill-tel{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-weight:700; font-size:.92rem; color:var(--green); border:1.5px solid var(--line); background:var(--surface); padding:.5rem .95rem; border-radius:999px; transition:border-color .2s, background .2s, color .2s}
.pill-tel:hover{border-color:var(--green)}
.pill-tel svg{width:17px; height:17px}
.cart-btn{position:relative; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); color:var(--green)}
.cart-btn:hover{border-color:var(--green)}
.cart-btn svg{width:21px; height:21px}
.cart-btn .count{position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:var(--brass); color:#24160A; font-size:.72rem; font-weight:800; display:grid; place-items:center; box-shadow:0 0 0 2px var(--bg)}
.cart-btn .count:empty,.cart-btn .count[data-n="0"]{display:none}
.cart-btn.bump{animation:bump .4s ease}
@keyframes bump{40%{transform:scale(1.12)}}
.menu-btn{display:none; place-items:center; width:44px; height:44px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface)}
.menu-btn svg{width:22px; height:22px}
:root[data-theme="dark"] .pill-tel,:root[data-theme="dark"] .cart-btn{color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pill-tel,:root:not([data-theme="light"]) .cart-btn{color:var(--ink)}}
@media (max-width:1100px){ .pill-tel span{display:none} .top .pill-tel{padding:.6rem} }
@media (max-width:960px){ .nav{display:none} .top-actions{margin-left:auto} .menu-btn{display:inline-grid} }
@media (max-width:420px){ .top .pill-tel{display:none} .top-wa span{display:none} .top-wa{padding:.6rem} .top .wrap{gap:.6rem} }
.mobile-menu{display:none; flex-direction:column; position:fixed; inset:0; z-index:35; overflow-y:auto; padding:calc(68px + env(safe-area-inset-top,0px) + 12px) 1.25rem calc(1.5rem + env(safe-area-inset-bottom,0px)); background:var(--bg)}
.mobile-menu.open{display:flex}
.mobile-menu > a:not(.btn){padding:.9rem .25rem; text-decoration:none; font-family:var(--serif); font-size:1.35rem; border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:1rem}
@media (min-width:961px){.mobile-menu{display:none!important}}

/* ---------- product pack (built in CSS so the label scales with the pack) ---------- */
.pack{position:relative; container-type:inline-size; aspect-ratio:.72; width:100%;
  border-radius:5% 5% 9% 9% / 3.5% 3.5% 5% 5%; overflow:hidden; isolation:isolate;
  filter:drop-shadow(0 16px 14px rgba(40,28,12,.32)) drop-shadow(0 3px 3px rgba(40,28,12,.2))}
.pack::before{content:""; position:absolute; inset:0; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.22; mix-blend-mode:multiply}
.pack::after{content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.26) 0%, rgba(255,255,255,.16) 7%, rgba(255,255,255,0) 22%, rgba(0,0,0,0) 74%, rgba(255,255,255,.1) 86%, rgba(0,0,0,.3) 100%),
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, transparent 14%, transparent 80%, rgba(0,0,0,.22) 100%),
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.2) 38%, transparent 46%)}
.pk-seal{position:absolute; left:0; right:0; top:0; height:9%; z-index:2;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px); border-bottom:1px solid rgba(0,0,0,.12)}
.pk-seal::after{content:""; position:absolute; left:0; right:0; bottom:-36%; height:2px; background:rgba(0,0,0,.14); box-shadow:0 1px 0 rgba(255,255,255,.25)}
.pk-body{position:absolute; inset:15% 7% 6%; z-index:3; display:flex; flex-direction:column; align-items:center; text-align:center}
.pk-logo{font-family:var(--serif); font-size:13cqw; line-height:1}
.pk-sub{font-size:3.6cqw; font-weight:800; letter-spacing:.14em; margin-top:1.5cqw; opacity:.8}
.pk-name{font-family:var(--serif); font-size:10.5cqw; line-height:1.02; margin:4.5cqw 0 4cqw}
.pk-win{position:relative; width:84cqw; flex:1; min-height:0; border-radius:7cqw; overflow:hidden}
.pk-win img{width:100%; height:100%; object-fit:cover}
.pk-foot{display:flex; justify-content:space-between; align-items:center; width:100%; margin-top:4cqw; font-size:4.6cqw; font-weight:800; letter-spacing:.04em; text-transform:uppercase}
.pk-wt{padding:1cqw 3cqw; border-radius:99px}

/* powders: kraft pouch with a printed cream label */
.pack.kraft{background:#C79F70}
.pack.kraft .pk-body{background:#FFF8EA; color:#2A2117; border-radius:5cqw; padding:7cqw 6cqw 5cqw; inset:16% 9% 8%; box-shadow:0 0 0 .8cqw rgba(0,0,0,.04)}
.pack.kraft .pk-logo{color:#24432A}
.pack.kraft .pk-sub{color:#7A5A3E}
.pack.kraft .pk-name{color:var(--ac,#7A3E1D)}
.pack.kraft .pk-win{border-radius:50% 50% 6cqw 6cqw / 40% 40% 6cqw 6cqw}
.pack.kraft .pk-foot{color:#5B4A35}
.pack.kraft .pk-wt{background:var(--ac,#7A3E1D); color:#fff}

/* bakes: matte green pouch with a clear window */
.pack.matte{background:#24432A}
.pack.matte::before{opacity:.12}
.pack.matte .pk-body{color:#F7F0E1}
.pack.matte .pk-sub{color:#D9B66E; opacity:1}
.pack.matte .pk-name{color:#FFF8EA}
.pack.matte .pk-win{border:1cqw solid rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.pack.matte .pk-win::after{content:""; position:absolute; inset:0; background:linear-gradient(125deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 68%, rgba(255,255,255,.16) 100%)}
.pack.matte .pk-foot{color:#D9B66E}
.pack.matte .pk-wt{background:#D9B66E; color:#24160A}

/* ---------- hero: always exactly one screen tall (minus the header) ---------- */
.hero{--hh:calc(100vh - 68px - env(safe-area-inset-top,0px)); position:relative; overflow:hidden; display:flex; align-items:center;
  min-height:var(--hh); padding:clamp(1rem,3.2vh,2.5rem) 0;
  background:radial-gradient(60% 80% at 85% 30%, color-mix(in srgb, var(--sage) 90%, transparent), transparent 70%), linear-gradient(180deg, var(--sage), var(--bg) 85%)}
@supports (height:100svh){ .hero{--hh:calc(100svh - 68px - env(safe-area-inset-top,0px))} }
.hero > .wrap{width:min(1280px, 100% - 2.5rem)}
.hero-grid{display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:.55rem; background:var(--surface); border:1px solid var(--line); padding:.4rem .9rem; border-radius:999px; font-size:.88rem; font-weight:600; color:var(--ink-soft)}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 4px color-mix(in srgb, var(--wa) 25%, transparent); animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb, var(--wa) 8%, transparent)}}
.hero h1{font-size:clamp(2rem, min(3.7vw, 6.4vh), 4rem); color:var(--green); margin:clamp(.6rem,1.8vh,1.2rem) 0 0; letter-spacing:-.01em}
.hero h1 em{font-style:normal; color:var(--spice)}
:root[data-theme="dark"] .hero h1{color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero h1{color:var(--ink)}}
.hero .lead{font-size:clamp(1rem, 2.3vh, 1.15rem); margin-top:clamp(.5rem,1.7vh,1.1rem); max-width:34rem}
.ctas{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:clamp(.9rem,3vh,1.8rem)}
.trust{list-style:none; padding:0; margin:clamp(.8rem,2.6vh,1.5rem) 0 0; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem}
.trust li{display:flex; align-items:center; gap:.45rem; font-weight:600; font-size:.92rem}
.trust svg{width:18px; height:18px; flex:none; color:var(--leaf)}
.quick{display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:clamp(.9rem,3vh,1.8rem); max-width:34rem}
@media (min-width:901px) and (max-height:640px){ .quick{display:none} }
.qk{display:flex; align-items:center; gap:.75rem; padding:.55rem .8rem .55rem .55rem; border-radius:16px; background:var(--surface); border:1px solid var(--line); text-decoration:none; transition:border-color .2s, transform .15s, box-shadow .2s}
.qk:hover{border-color:var(--green); transform:translateY(-2px); box-shadow:0 12px 24px -16px rgba(35,38,31,.35)}
.qk img{width:52px; height:52px; border-radius:12px; object-fit:cover; flex:none}
.qk span{display:flex; flex-direction:column; flex:1; min-width:0; line-height:1.3}
.qk b{font-size:.95rem}
.qk small{color:var(--ink-soft); font-size:.8rem}
.qk > svg{width:18px; height:18px; color:var(--green); flex:none}

.stage{position:relative; height:min(700px, calc(var(--hh) - clamp(2rem,6.4vh,5rem)), 46vw)}
.ph{position:absolute; margin:0; border-radius:22px; overflow:hidden; border:6px solid #FFFBF2; box-shadow:0 30px 50px -26px rgba(40,30,20,.6)}
.ph img{width:100%; height:100%; object-fit:cover}
.ph-a{left:0; top:2%; width:66%; height:58%; transform:rotate(-3deg)}
.ph-b{right:0; top:26%; width:50%; height:44%; transform:rotate(3.5deg)}
.badge-spin{position:absolute; z-index:6; top:-2%; right:4%; width:118px; height:118px; filter:drop-shadow(0 10px 14px rgba(0,0,0,.25))}
.badge-spin .ring{animation:spin 28s linear infinite; transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
.fan{position:absolute; left:0; right:0; bottom:0; height:62%; z-index:4}
.fan .pack{position:absolute; bottom:0; width:25%; transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.fan .pack:nth-child(1){left:2%;  bottom:2%;  transform:rotate(-12deg); z-index:1}
.fan .pack:nth-child(2){left:20%; bottom:7%;  transform:rotate(-6deg);  z-index:2}
.fan .pack:nth-child(3){left:37.5%; bottom:10%; transform:rotate(0deg) scale(1.08); z-index:4}
.fan .pack:nth-child(4){left:55%; bottom:7%;  transform:rotate(6deg);   z-index:3}
.fan .pack:nth-child(5){left:73%; bottom:2%;  transform:rotate(12deg);  z-index:2}
@media (hover:hover){
  .stage:hover .fan .pack:nth-child(1){transform:rotate(-16deg) translate(-10px,-6px)}
  .stage:hover .fan .pack:nth-child(2){transform:rotate(-8deg) translateY(-10px)}
  .stage:hover .fan .pack:nth-child(3){transform:scale(1.12) translateY(-14px)}
  .stage:hover .fan .pack:nth-child(4){transform:rotate(8deg) translateY(-10px)}
  .stage:hover .fan .pack:nth-child(5){transform:rotate(16deg) translate(10px,-6px)}
}
.fan-in .pack{animation:drop .8s cubic-bezier(.2,.75,.25,1) both}
.fan-in .pack:nth-child(2){animation-delay:.07s} .fan-in .pack:nth-child(3){animation-delay:.14s} .fan-in .pack:nth-child(4){animation-delay:.21s} .fan-in .pack:nth-child(5){animation-delay:.28s}
@keyframes drop{from{opacity:0; translate:0 -30px}}
.float-note{position:absolute; z-index:6; left:-3%; top:30%; background:#FFFBF2; color:#22281F; padding:.6rem .9rem .7rem; border-radius:14px; transform:rotate(-4deg); box-shadow:0 16px 30px -16px rgba(40,30,20,.55); max-width:180px; line-height:1.25}
.float-note .hand{display:block; font-size:1.55rem; color:#7A3E1D; line-height:1}
.float-note small{font-size:.8rem; color:#5B5A4C}
/* phones & tablets: copy on top, the pack display fills whatever height is left */
@media (max-width:900px){
  .hero{align-items:stretch; padding:clamp(.9rem,2.4vh,1.6rem) 0 clamp(.8rem,2vh,1.4rem)}
  .hero > .wrap{width:calc(100% - 2rem)}
  .hero-grid{display:flex; flex-direction:column; align-items:stretch; gap:clamp(.8rem,2.4vh,1.4rem); min-height:calc(var(--hh) - clamp(1.7rem,4.4vh,3rem))}
  .eyebrow{font-size:.8rem; padding:.3rem .75rem}
  .hero h1{font-size:clamp(1.85rem, min(8.4vw, 5.2vh), 2.8rem)}
  .hero .lead{font-size:clamp(.95rem, 2.1vh, 1.05rem)}
  .ctas{gap:.6rem}
  .ctas .btn{flex:1; padding:.85rem .7rem; font-size:.98rem; white-space:nowrap}
  .trust,.quick{display:none}
  .stage{flex:1; height:auto; min-height:150px; max-height:min(460px, 62vw)}
  .ph-a{left:3%; right:3%; width:auto; top:0; height:64%; transform:rotate(-1.5deg)}
  .ph-b{display:none}
  .fan{height:84%}
  .fan .pack{width:24%}
  .fan .pack:nth-child(1){left:2%} .fan .pack:nth-child(2){left:19.5%} .fan .pack:nth-child(3){left:38%} .fan .pack:nth-child(4){left:56.5%} .fan .pack:nth-child(5){left:74%}
  .badge-spin{width:76px; height:76px; top:-6px; right:0}
  .float-note{display:none}
}
@media (max-width:440px){ .ctas .wa-long{display:none} }
@media (max-width:370px){ .ctas .btn{font-size:.92rem; gap:.4rem} }

/* ---------- marquee strip ---------- */
.strip{background:#24432A; color:#F7F0E1; overflow:hidden}
.marquee{display:flex; width:max-content; animation:marq 38s linear infinite}
.strip:hover .marquee{animation-play-state:paused}
.marquee ul{list-style:none; margin:0; padding:1rem 0; display:flex; gap:2.6rem; padding-right:2.6rem}
.marquee li{display:flex; align-items:center; gap:.55rem; font-weight:600; font-size:.95rem; white-space:nowrap}
.marquee svg{width:22px; height:22px; color:#D9B66E}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- categories ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:1rem; margin-top:2rem}
.cat{position:relative; border-radius:var(--r); overflow:hidden; text-decoration:none; color:#fff; isolation:isolate}
.cat-lg{grid-column:span 2}
.cat img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.cat::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,14,8,0) 30%, rgba(10,14,8,.78))}
.cat:hover img{transform:scale(1.06)}
.cat-in{position:absolute; left:1.2rem; right:1.2rem; bottom:1.1rem; display:flex; flex-direction:column; gap:.15rem}
.cat-in small{font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#E2BE6E}
.cat-in b{font-family:var(--serif); font-weight:400; font-size:1.45rem; line-height:1.15}
.cat-in i{font-style:normal; display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.92rem; margin-top:.35rem; opacity:.92}
.cat-in i svg{width:16px; height:16px; transition:transform .2s}
.cat:hover .cat-in i svg{transform:translateX(4px)}
@media (max-width:860px){ .cat-grid{grid-template-columns:1fr 1fr; grid-auto-rows:180px} }
@media (max-width:520px){ .cat-grid{grid-template-columns:1fr; grid-auto-rows:170px} .cat-lg{grid-column:auto} }

/* ---------- shop ---------- */
.shop.alt{background:var(--surface-2)}
.shop-head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1rem 2rem}
.note-hand{font-size:1.6rem; color:var(--spice); transform:rotate(-3deg)}
.chips{display:flex; gap:.5rem; overflow-x:auto; margin:1.6rem 0 1.4rem; padding-bottom:.25rem; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none; border:1.5px solid var(--line); background:var(--surface); border-radius:999px; padding:.5rem 1rem; font-weight:600; font-size:.9rem; color:var(--ink-soft); transition:all .2s}
.chips button:hover{border-color:var(--green); color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--green); border-color:var(--green); color:var(--on-green)}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,232px),1fr)); gap:1.25rem}
@media (min-width:1180px){ .grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:560px){ .grid{grid-template-columns:1fr 1fr; gap:.7rem} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .25s, transform .2s, border-color .2s}
.card[hidden]{display:none}
@media (hover:hover){ .card:hover{box-shadow:0 18px 34px -22px rgba(35,38,31,.45); transform:translateY(-3px)} }
.card.in-cart{border-color:var(--green)}
.card .art{position:relative; aspect-ratio:1/1.02; display:grid; place-items:center; overflow:hidden; isolation:isolate; background:#3a2a1a}
.card .art .bg{position:absolute; inset:-6%; width:112%; height:112%; object-fit:cover; z-index:-1; filter:blur(2px) saturate(1.1) brightness(.88); transition:filter .4s, transform .6s}
.card .art::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 55% at 50% 55%, rgba(0,0,0,0), rgba(0,0,0,.28))}
.card .art .pack{width:52%; transform:rotate(var(--tilt,0deg)) translateY(4%); transition:transform .45s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .card:hover .art .pack{transform:rotate(0deg) translateY(-1%) scale(1.04)}
  .card:hover .art .bg{filter:blur(0) saturate(1.15) brightness(.95); transform:scale(1.03)}
}
.bdg{position:absolute; z-index:6; top:.7rem; left:.7rem; background:#FFFBF2; color:#7A3E1D; font-size:.72rem; font-weight:800; letter-spacing:.02em; padding:.28rem .65rem; border-radius:999px; box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.qty-tag{position:absolute; z-index:6; top:.7rem; right:.7rem; min-width:26px; height:26px; padding:0 6px; border-radius:13px; background:var(--wa); color:var(--wa-ink); font-weight:800; font-size:.8rem; display:none; place-items:center}
.card.in-cart .qty-tag{display:grid}
.card .body{padding:.95rem 1rem 1.05rem; display:flex; flex-direction:column; gap:.45rem; flex:1}
.card h3{font-size:1.12rem; color:var(--ink)}
.card .desc{font-size:.9rem; color:var(--ink-soft); line-height:1.5}
.sizes{display:flex; gap:.4rem; margin-top:.2rem}
.sizes button{flex:1; border:1.5px solid var(--line); background:transparent; border-radius:10px; padding:.4rem .4rem; font-size:.83rem; font-weight:700; color:var(--ink-soft); display:flex; flex-direction:column; line-height:1.2; align-items:center}
.sizes button small{font-weight:600; font-size:.74rem; opacity:.8}
.sizes button[aria-pressed="true"]{border-color:var(--green); background:color-mix(in srgb, var(--green) 9%, transparent); color:var(--ink)}
.buy{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:auto; padding-top:.55rem}
.price{font-weight:800; font-size:1.2rem}
.add{border:1.5px solid var(--green); background:var(--green); color:var(--on-green); border-radius:999px; padding:.5rem 1.05rem; font-weight:700; font-size:.92rem}
.add:hover{background:var(--green-deep)}
.step{display:inline-flex; align-items:center; background:var(--green); color:var(--on-green); border-radius:999px; padding:.18rem}
.step button{width:2rem; height:2rem; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:inherit; font-size:1.1rem; font-weight:700; display:grid; place-items:center}
.step button:hover{background:rgba(255,255,255,.28)}
.step output{min-width:1.8rem; text-align:center; font-weight:800}
@media (max-width:560px){
  .card .body{padding:.7rem .7rem .8rem; gap:.35rem}
  .card h3{font-size:.98rem}
  .card .desc{display:none}
  .sizes button{font-size:.75rem; padding:.3rem .2rem}
  .sizes button small{font-size:.68rem}
  .buy{flex-direction:column; align-items:stretch; gap:.45rem}
  .price{font-size:1.05rem}
  .add{padding:.5rem .6rem}
  .step{justify-content:space-between}
  .bdg{font-size:.64rem; top:.5rem; left:.5rem}
}
.disclaimer{font-size:.85rem; color:var(--ink-soft); margin-top:1.4rem}

/* ---------- ways to enjoy ---------- */
.enjoy-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; margin-top:2rem}
.enj{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column}
.enj img{aspect-ratio:4/3; width:100%; object-fit:cover}
.enj .in{padding:1rem 1.1rem 1.15rem; display:flex; flex-direction:column; gap:.4rem; flex:1}
.enj h3{font-size:1.15rem}
.enj p{color:var(--ink-soft); font-size:.92rem}
.pair{display:flex; align-items:center; gap:.6rem; margin-top:auto; padding-top:.7rem; border-top:1px dashed var(--line)}
.pair img{width:38px; height:38px; aspect-ratio:1; border-radius:10px}
.pair span{flex:1; font-size:.82rem; color:var(--ink-soft); line-height:1.25}
.pair span b{display:block; color:var(--ink); font-size:.9rem}
.pair button{border:1.5px solid var(--green); background:transparent; color:var(--green); border-radius:999px; padding:.35rem .8rem; font-weight:700; font-size:.85rem; white-space:nowrap}
.pair button:hover{background:var(--green); color:var(--on-green)}
:root[data-theme="dark"] .pair button{color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pair button{color:var(--ink)}}
@media (max-width:1000px){ .enjoy-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .enjoy-grid{grid-template-columns:1fr} }

/* ---------- gifting ---------- */
.gifting{background:var(--sage)}
.gift-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.gift-photo{position:relative; border-radius:28px; overflow:hidden; aspect-ratio:4/4.2; box-shadow:0 30px 50px -30px rgba(40,30,20,.6)}
.gift-photo img{width:100%; height:100%; object-fit:cover}
.gift-tag{position:absolute; left:1rem; bottom:1rem; display:inline-flex; align-items:center; gap:.5rem; background:#FFFBF2; color:#24432A; padding:.55rem .95rem; border-radius:999px; font-weight:700; font-size:.9rem}
.gift-tag svg{width:20px; height:20px}
.hampers{display:grid; gap:.75rem; margin:1.6rem 0 1.8rem}
.hamper{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1rem 1.15rem; border-left:4px solid var(--brass)}
.hamper h3{font-size:1.12rem; margin-bottom:.2rem}
.hamper p{color:var(--ink-soft); font-size:.93rem}
@media (max-width:860px){ .gift-grid{grid-template-columns:1fr} .gift-photo{aspect-ratio:16/11} }

/* ---------- story ---------- */
.story-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.story p:not(.kicker){color:var(--ink-soft); margin-top:1rem; max-width:36rem}
.story h2{margin-bottom:.2rem}
.collage{position:relative; height:clamp(420px, 40vw, 520px)}
.collage img{position:absolute; object-fit:cover; border-radius:20px; border:6px solid #FFFBF2; box-shadow:0 24px 40px -24px rgba(40,30,20,.55)}
.collage .c1{left:0; top:0; width:72%; height:60%; transform:rotate(-2deg)}
.collage .c2{right:0; bottom:4%; width:58%; height:50%; transform:rotate(2.5deg)}
.recipe{position:absolute; left:2%; bottom:0; width:min(260px, 52%); background:#FFFBF2; color:#3b2a1a; border-radius:6px; padding:1.1rem 1rem 1rem 1.6rem; transform:rotate(-3deg); box-shadow:0 20px 34px -20px rgba(60,40,10,.6);
  background-image:repeating-linear-gradient(180deg, transparent 0 27px, rgba(122,62,29,.13) 27px 28px)}
.recipe::before{content:""; position:absolute; top:0; bottom:0; left:1rem; width:1px; background:rgba(163,58,34,.35)}
.recipe .hand{font-size:1.45rem; color:#7A3E1D; line-height:1.1}
.recipe ul{list-style:none; padding:0; margin:.4rem 0 0; font-family:var(--hand); font-size:1.2rem; line-height:28px; font-weight:500}
.chef{display:flex; gap:1.1rem; align-items:center; margin:1.6rem 0 0; padding:1.1rem 1.2rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); max-width:36rem}
.chef-ph{flex:none; width:76px; height:76px; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:#24432A; color:#F7F0E1; font-family:var(--serif); font-size:2rem; box-shadow:0 0 0 3px var(--surface), 0 0 0 5px #D9B66E}
.chef figcaption{min-width:0}
.chef blockquote{margin:0; font-size:1rem; line-height:1.5; color:var(--ink)}
.chef .hand{display:inline-block; font-size:1.7rem; color:var(--spice); line-height:1; margin-top:.4rem; margin-right:.6rem}
.chef small{color:var(--ink-soft); font-size:.85rem}
.stats{display:flex; flex-wrap:wrap; gap:1rem 2.2rem; margin-top:1.6rem}
.stats div{display:flex; align-items:baseline; gap:.6rem}
.stats b{font-family:var(--serif); font-weight:400; font-size:2.8rem; color:var(--brass); line-height:1}
.stats span{font-size:.85rem; color:var(--ink-soft); line-height:1.3}
.grains{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem}
.grains span{padding:.4rem .9rem; border-radius:999px; background:var(--sage); color:var(--green); font-weight:600; font-size:.88rem}
:root[data-theme="dark"] .grains span{color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .grains span{color:var(--ink)}}
@media (max-width:860px){ .story-grid{grid-template-columns:1fr} .collage{height:min(90vw,440px)} .recipe{left:0; bottom:-4%; transform:rotate(-3deg) scale(.78); transform-origin:bottom left} }

/* ---------- compare ---------- */
.compare{background:var(--surface-2)}
.cmp{margin-top:2rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; max-width:860px}
.cmp-row{display:grid; grid-template-columns:1.6fr 1fr 1fr; align-items:center; border-top:1px solid var(--line)}
.cmp-row > span{padding:.95rem 1.1rem; font-size:.95rem}
.cmp-row > span:not(:first-child){text-align:center; display:flex; justify-content:center; color:var(--ink-soft)}
.cmp-head{border-top:0; font-weight:800; font-size:.9rem}
.cmp-row .us{background:color-mix(in srgb, var(--green) 8%, transparent); color:var(--ink)!important; font-weight:700}
.cmp-head .us{background:var(--green); color:var(--on-green)!important}
.cmp svg{width:22px; height:22px; color:var(--leaf)}
.cmp svg.no{color:var(--chilli); opacity:.75}
@media (max-width:560px){ .cmp-row{grid-template-columns:1.3fr .9fr .9fr} .cmp-row > span{padding:.75rem .6rem; font-size:.85rem} }

/* ---------- how ---------- */
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; margin-top:2.2rem}
.flow-step{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.6rem 1.35rem; transition:box-shadow .2s, transform .15s}
@media (hover:hover){.flow-step:hover{box-shadow:0 12px 26px -16px rgba(35,38,31,.3); transform:translateY(-2px)}}
@media (min-width:1024px){.flow-step:not(:last-child)::after{content:""; position:absolute; top:2.9rem; right:-1.3rem; width:1.3rem; height:2px; background:repeating-linear-gradient(90deg,var(--brass) 0 5px,transparent 5px 9px)}}
.step-ic{position:relative; width:62px; height:62px; border-radius:50%; background:var(--sage); display:grid; place-items:center; margin-bottom:1rem}
.step-ic svg{width:28px; height:28px; color:var(--green)}
:root[data-theme="dark"] .step-ic svg{color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .step-ic svg{color:var(--ink)}}
.step-n{position:absolute; top:-5px; right:-5px; width:24px; height:24px; border-radius:50%; background:var(--brass); color:#24160A; font-size:.78rem; font-weight:800; display:grid; place-items:center}
.flow-step h3{font-size:1.2rem; margin-bottom:.35rem}
.flow-step p{color:var(--ink-soft); font-size:.94rem}
@media (max-width:1023px){ .flow{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .flow{grid-template-columns:1fr} }

/* ---------- delivery ---------- */
.delivery{padding-top:0}
.del-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2rem}
.del{border:1.5px solid var(--line); border-radius:var(--r); padding:1.5rem; background:var(--surface)}
.del:first-child{border-color:var(--green)}
.del svg{width:36px; height:36px; color:var(--leaf); margin-bottom:.9rem}
.del h3{font-size:1.2rem; margin-bottom:.4rem}
.del p{color:var(--ink-soft); font-size:.95rem}
.del .meta{margin-top:.9rem; font-weight:700; font-size:.9rem; color:var(--spice)}
@media (max-width:860px){ .del-grid{grid-template-columns:1fr} }

/* ---------- reviews ---------- */
.reviews{background:#24432A; color:#F7F0E1}
.reviews h2{color:#F7F0E1!important}
.reviews .kicker{color:#E2BE6E}
.rv-head{display:flex; justify-content:space-between; align-items:end; gap:1rem}
.rv-row{display:grid; grid-auto-flow:column; grid-auto-columns:min(340px, 84%); gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:2rem 0 1rem; scrollbar-width:thin}
.rv{scroll-snap-align:start; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:1.5rem; display:flex; flex-direction:column; gap:1rem}
.rv .stars{color:#E2BE6E; letter-spacing:.15em}
.rv blockquote{margin:0; font-size:1.02rem; line-height:1.55}
.rv footer{margin-top:auto; display:flex; align-items:center; gap:.7rem; font-size:.9rem; opacity:.9}
.rv .av{width:38px; height:38px; border-radius:50%; background:#E2BE6E; color:#24160A; display:grid; place-items:center; font-weight:800}
.rv footer b{display:block; font-weight:700}
.rv-nav{display:flex; gap:.5rem}
.rv-nav button{width:2.7rem; height:2.7rem; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:transparent; color:#F7F0E1; font-size:1.1rem}
.rv-nav button:hover{background:rgba(255,255,255,.1)}

/* ---------- faq ---------- */
.faq-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.faq-img{margin-top:1.6rem; border-radius:var(--r); aspect-ratio:4/3; object-fit:cover; width:100%}
details{border-bottom:1px solid var(--line); padding:1.1rem 0}
summary{cursor:pointer; font-weight:700; font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-size:1.4rem; line-height:1; color:var(--brass)}
details[open] summary::after{content:"–"}
details p{color:var(--ink-soft); margin-top:.6rem}
@media (max-width:860px){ .faq-grid{grid-template-columns:1fr} .faq-img{display:none} }

/* ---------- order ---------- */
.order{background:#18301D; color:#EEF3E6}
.order h2,.order h3{color:#fff!important}
.order .kicker{color:#E2BE6E}
.order .lead{color:#C9D5BE}
.order-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; margin-top:2.2rem; align-items:start}
.checklist{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:.65rem 1.2rem}
.checklist li{padding-left:1.6rem; position:relative}
.checklist li::before{content:""; position:absolute; left:0; top:.45rem; width:12px; height:12px; border-radius:50%; border:2px solid #E2BE6E}
.contact-rows{display:flex; flex-direction:column; gap:.6rem; margin:1.8rem 0 0}
.contact-rows .row{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.contact-rows .row span{color:#C9D5BE; min-width:6.5rem}
.pill-tel.light{color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.06)}
.pill-tel.light:hover{background:#fff; color:#18301D}
.deliv{margin-top:1.4rem; font-size:.92rem; color:#9FB092}
.basket{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:1.5rem}
.basket h3{font-size:1.5rem; margin-bottom:.8rem}
.basket ul{list-style:none; padding:0; margin:0 0 1rem}
.basket li{display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; border-bottom:1px dashed rgba(255,255,255,.18); font-size:.95rem}
.basket .b-tot{display:flex; justify-content:space-between; font-weight:800; font-size:1.1rem; margin-bottom:1rem}
.basket .b-empty{text-align:center; color:#C9D5BE; padding:1.2rem .5rem 1.4rem}
.basket .b-empty svg{width:38px; height:38px; color:#E2BE6E; margin:0 auto .7rem}
.basket .btn{width:100%}
@media (max-width:860px){ .order-grid{grid-template-columns:1fr; gap:2rem} }
@media (max-width:420px){ .checklist{grid-template-columns:1fr} }

/* ---------- footer ---------- */
footer.site{background:#18301D; color:#C9D5BE; border-top:1px solid rgba(255,255,255,.1); padding:3rem 0 7rem; font-size:.92rem}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem}
footer.site .logo{color:#F7F0E1; font-size:1.6rem; margin-bottom:.6rem}
footer.site p{max-width:22rem}
footer.site nav,footer.site .foot-grid > div:last-child{display:flex; flex-direction:column; gap:.4rem}
footer.site b{color:#fff; margin-bottom:.3rem}
footer.site a{text-decoration:none}
footer.site a:hover{color:#fff}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.12); font-size:.85rem; color:#9FB092}
.credits{border:0; padding:0; max-width:100%}
.credits summary{font-weight:600; font-size:.85rem; color:#C9D5BE; justify-content:flex-start}
.credits summary::after{content:"▾"; font-size:.9rem; color:inherit}
.credits ul{list-style:none; padding:0; margin:.8rem 0 0; columns:2 280px; column-gap:2rem; font-size:.78rem; line-height:1.5}
.credits li{break-inside:avoid; margin-bottom:.3rem}
.credits a{text-decoration:underline!important}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-grid > div:first-child{grid-column:1/-1} }

/* ---------- floating ---------- */
.fab{position:fixed; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom,0px)); z-index:45; width:56px; height:56px; border-radius:50%; background:var(--wa); color:#fff; display:grid; place-items:center; box-shadow:0 10px 24px -8px rgba(0,0,0,.45); transition:transform .25s, opacity .25s}
.fab svg{width:28px; height:28px}
.fab.hide{transform:scale(.6); opacity:0; pointer-events:none}
.cartbar{position:fixed; left:0; right:0; bottom:0; z-index:44; background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -10px 28px -14px rgba(20,28,16,.35); padding-bottom:env(safe-area-inset-bottom,0px); transform:translateY(110%); transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cartbar.show{transform:none}
.cartbar-in{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0}
.cartbar-info{display:flex; align-items:center; gap:.75rem; background:none; border:0; padding:0; text-align:left}
.cartbar-count{display:grid; place-items:center; min-width:34px; height:34px; padding:0 8px; border-radius:17px; background:var(--sage); color:var(--green); font-weight:800}
.cartbar-text{display:flex; flex-direction:column; line-height:1.25}
.cartbar-text b{font-size:.95rem}
.cartbar-text i{font-style:normal; font-size:.85rem; color:var(--ink-soft)}

/* ---------- drawer & modal ---------- */
.scrim{position:fixed; inset:0; background:rgba(15,20,12,.55); z-index:60; opacity:0; pointer-events:none; transition:opacity .25s}
.scrim.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(440px,100%); background:var(--surface); z-index:61; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.open{transform:none}
.dh{display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.4rem; border-bottom:1px solid var(--line)}
.dh h2{font-size:1.5rem}
.x{width:2.5rem; height:2.5rem; border-radius:50%; border:1px solid var(--line); background:transparent; font-size:1.3rem; line-height:1}
.x:hover{background:var(--surface-2)}
.dbody{flex:1; overflow:auto; padding:.6rem 1.4rem}
.line{display:grid; grid-template-columns:60px 1fr auto; gap:.85rem; align-items:center; padding:.85rem 0; border-bottom:1px dashed var(--line)}
.line img{width:60px; height:60px; border-radius:12px; object-fit:cover}
.line b{display:block; font-weight:700; font-size:.95rem; line-height:1.3}
.line small{color:var(--ink-soft)}
.line .r{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:.35rem}
.line .step button{width:1.75rem; height:1.75rem; font-size:.95rem}
.empty{text-align:center; padding:3rem 1rem; color:var(--ink-soft)}
.empty .hand{font-size:1.7rem; color:var(--spice); display:block; margin-bottom:.4rem}
.empty .btn{margin-top:1.2rem}
.dfoot{border-top:1px solid var(--line); padding:1.1rem 1.4rem 1.3rem}
.prog{font-size:.88rem; color:var(--ink-soft); margin-bottom:.9rem}
.prog .bar{height:6px; border-radius:6px; background:var(--surface-2); margin-top:.4rem; overflow:hidden}
.prog .bar i{display:block; height:100%; background:var(--leaf); transition:width .3s}
.tot{display:flex; justify-content:space-between; font-weight:800; font-size:1.15rem; margin-bottom:1rem}
.dfoot .btn{width:100%}
.modal{position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:1rem; pointer-events:none; opacity:0; transition:opacity .2s}
.modal.open{opacity:1; pointer-events:auto}
/* checkout form (Cyra-style sheet) */
.sheet{position:relative; background:var(--surface); color:var(--ink); border-radius:18px; width:min(520px,100%); max-height:92vh; overflow:auto; padding:1.75rem 1.6rem 1.5rem; box-shadow:0 30px 60px -20px rgba(0,0,0,.5); transform:translateY(16px); transition:transform .22s ease}
.modal.open .sheet{transform:none}
.sheet > .x{position:absolute; top:.9rem; right:.9rem; background:var(--surface)}
.sheet h2{font-size:clamp(1.6rem,4.5vw,1.8rem); color:#3A2415; padding-right:3rem}
:root[data-theme="dark"] .sheet h2{color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sheet h2{color:var(--ink)}}
.sheet .sub{color:var(--ink-soft); font-size:.95rem; margin:.3rem 0 1.1rem}
.summary{background:var(--sage); border-radius:10px; padding:.8rem .9rem; margin-bottom:1.1rem; font-size:.9rem}
.summary b{display:block; font-size:.85rem; color:var(--green); margin-bottom:.3rem}
:root[data-theme="dark"] .summary b{color:var(--gold)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .summary b{color:var(--gold)}}
.summary ul{list-style:none; margin:0; padding:0}
.summary li{padding:.15rem 0}
.summary .s-tot{font-weight:800; margin-top:.5rem}
.summary .s-hint{color:var(--ink-soft); font-size:.85rem; margin-top:.2rem}
.summary a{color:var(--green); font-weight:700}
.fsec{font-size:.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#7A5A3E; margin:1rem 0 .1rem}
:root[data-theme="dark"] .fsec{color:var(--brass)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fsec{color:var(--brass)}}
.f{display:flex; flex-direction:column; gap:.3rem; margin-bottom:.9rem}
.f[hidden]{display:none}
.f label{font-size:.9rem; font-weight:700}
.f label i{font-style:normal; font-weight:400; color:var(--ink-soft)}
.f input,.f textarea{font:inherit; font-size:16px; color:var(--ink); background:#F5F6EE; border:1.5px solid #DCE2CF; border-radius:10px; padding:.75rem .85rem; width:100%; transition:border-color .2s, box-shadow .2s}
:root[data-theme="dark"] .f input,:root[data-theme="dark"] .f textarea{background:var(--bg); border-color:var(--line)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .f input,:root:not([data-theme="light"]) .f textarea{background:var(--bg); border-color:var(--line)}}
.f textarea{resize:vertical; min-height:4.6rem}
.f input:focus,.f textarea:focus{border-color:var(--green); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--leaf) 22%, transparent)}
.f .err{color:#C0392B; font-size:.82rem; display:none}
.f.bad input,.f.bad textarea{border-color:#C0392B}
.f.bad .err{display:block}
.two{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
@media (max-width:420px){ .two{grid-template-columns:1fr} .sheet{padding:1.5rem 1.1rem 1.25rem} }
.btn-send{width:100%; margin-top:.4rem; padding:1.05rem 1.5rem; font-size:1.1rem; box-shadow:0 10px 24px -10px rgba(18,140,126,.65)}
.btn-send svg{width:24px; height:24px}
.sheet .fine{font-size:.85rem; color:var(--ink-soft); margin-top:.8rem; text-align:center}
.toast{position:fixed; left:50%; bottom:calc(5.5rem + env(safe-area-inset-bottom,0px)); transform:translate(-50%,20px); background:var(--ink); color:var(--bg); padding:.7rem 1.1rem; border-radius:999px; font-weight:700; font-size:.92rem; z-index:75; opacity:0; transition:.25s; pointer-events:none; white-space:nowrap}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* reveal on scroll */
.rv-in{opacity:0; translate:0 18px; transition:opacity .6s ease, translate .6s ease}
.rv-in.seen{opacity:1; translate:0 0}