/* سُدرة — The Weave. Flat colour, thick ink lines, hard shadows. One accent family: wool red / orange. */
:root {
  --red:#B3262A; --org:#E8702A; --ind:#1F2A5A; --ivory:#F3EBDD; --blk:#171414; --must:#E3A92B; --sand:#E6DAC4;
  --t2:#3b3631; --t3:#625b53; --line:rgba(23,20,20,.18);
  --f-d:"Kufam",sans-serif; --f-b:"Almarai",system-ui,sans-serif; --f-m:"Space Mono",monospace;
  --gut:clamp(16px,4.5vw,56px); --sec:clamp(56px,8vw,112px); --bw:3px; --sh:8px;
  --ease:cubic-bezier(.2,.7,.2,1); --tap:48px;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:76px; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--ivory); color:var(--blk); font:400 17px/1.85 var(--f-b); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3,h4,p,dl,dd,ul { margin:0; padding:0; } ul { list-style:none; }
a { color:inherit; text-decoration:none; } button,input,select,textarea { font:inherit; color:inherit; } button { cursor:pointer; background:none; border:0; }
svg { display:block; max-width:100%; } bdi { unicode-bidi:isolate; }
:focus-visible { outline:3px solid var(--org); outline-offset:3px; }
.wrap { width:100%; max-width:1280px; margin-inline:auto; padding-inline:var(--gut); }
.skip { position:absolute; inset-inline-start:8px; top:-60px; background:var(--blk); color:var(--ivory); padding:10px 16px; z-index:100; } .skip:focus { top:8px; }
.kf { font-family:var(--f-d); font-weight:900; line-height:1.08; letter-spacing:-.01em; }
.n { font-family:var(--f-m); direction:ltr; unicode-bidi:isolate; }
.muted { color:var(--t3); font-weight:400; }
.tab { display:inline-block; background:var(--blk); color:var(--ivory); padding:2px 12px; font-size:13px; font-weight:700; }
.tab--org { background:var(--org); color:var(--blk); }
.badge-demo { font:700 11px/1.7 var(--f-b); border:1px dashed currentColor; padding:0 7px; border-radius:99px; margin-inline-start:6px; vertical-align:middle; color:var(--t3); letter-spacing:0; }
.reveal { opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); } .reveal.in { opacity:1; transform:none; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:var(--tap); padding:0 28px; font-weight:800; font-size:16px; border:var(--bw) solid var(--blk); background:var(--blk); color:var(--ivory); transition:transform .15s, box-shadow .15s, background .15s; white-space:nowrap; position:relative; }
.btn:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--blk); } .btn:active { transform:none; box-shadow:none; }
.btn--red { background:var(--red); } .btn--line { background:transparent; color:var(--blk); } .btn--ivory { background:var(--ivory); color:var(--blk); } .btn--ink { background:var(--blk); }
.btn--sm { min-height:44px; padding:0 18px; font-size:14px; } .btn--block { width:100%; }
.btn[disabled] { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.btn.is-loading { pointer-events:none; color:transparent !important; } .btn.is-loading::after { content:""; position:absolute; width:20px; height:20px; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
.btn--ivory.is-loading::after, .btn--line.is-loading::after { border-color:rgba(0,0,0,.2); border-top-color:#000; }
.btn.is-done { background:#2F5D46 !important; color:#fff !important; border-color:#2F5D46; }
@keyframes spin { to { transform:rotate(360deg); } }
.chips { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:4px var(--gut) 8px; margin-inline:calc(var(--gut) * -1); } .chips::-webkit-scrollbar { display:none; }
.chip { flex:none; min-height:var(--tap); padding:0 18px; border:var(--bw) solid var(--blk); background:var(--ivory); font-weight:800; font-size:15px; display:inline-flex; align-items:center; gap:8px; transition:background .15s,color .15s; }
.chip small { font-weight:400; font-size:13px; color:var(--t3); } .chip:hover { background:var(--sand); }
.chip[aria-checked="true"] { background:var(--blk); color:var(--ivory); } .chip[aria-checked="true"] small { color:#cfc7b8; }

/* header */
.site-header { position:sticky; top:0; z-index:40; background:var(--ivory); border-bottom:var(--bw) solid var(--blk); }
.hdr { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:60px; }
.brand { font:900 30px/1 var(--f-d); } .nav { display:none; gap:30px; font-weight:800; font-size:15px; }
.nav a { padding:10px 2px; border-bottom:3px solid transparent; } .nav a:hover, .nav a.on { border-color:var(--red); }
.cart-btn { position:relative; width:var(--tap); height:var(--tap); display:grid; place-items:center; border:var(--bw) solid var(--blk); background:var(--ivory); } .cart-btn:hover { background:var(--sand); }
.cart-count { position:absolute; top:-9px; inset-inline-start:-9px; min-width:22px; height:22px; padding:0 5px; background:var(--red); color:#fff; font:700 12px/22px var(--f-m); text-align:center; border:2px solid var(--blk); }
.cart-count.bump { animation:bump .4s var(--ease); } @keyframes bump { 40% { transform:scale(1.3); } }

/* hero */
.hero { display:grid; }
.tapestry { position:relative; height:270px; overflow:hidden; direction:ltr; background:var(--red); }
.trow { overflow:hidden; line-height:0; } .trow > div { display:flex; width:max-content; animation:drift var(--dur,90s) linear infinite; } .trow.r > div { animation-direction:reverse; }
@keyframes drift { to { transform:translateX(calc(var(--per) * -1)); } }
.hero-labels { position:absolute; left:0; right:0; top:0; height:270px; pointer-events:none; direction:ltr; }
.hl { position:absolute; width:176px; background:var(--ivory); border:var(--bw) solid var(--blk); box-shadow:6px 6px 0 var(--blk); direction:rtl; } .hl .w { height:30px; line-height:0; overflow:hidden; } .hl .t { padding:6px 12px 8px; } .hl b { display:block; font:800 16px/1.3 var(--f-d); } .hl span { font-size:12px; color:var(--t2); display:block; line-height:1.5; } .hl .p { display:flex; justify-content:space-between; font-size:11px; margin-top:2px; }
.hl.a { left:6%; top:118px; transform:rotate(-3deg); } .hl.b, .hl.c { display:none; }
.hero-copy { padding:28px var(--gut) 0; max-width:720px; }
.hero h1 { font-size:clamp(64px,19vw,112px); margin-top:14px; } .hero h1 em { font-style:normal; color:var(--red); }
.lead { font-size:17px; margin-top:16px; max-width:34ch; }
.cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; } .cta .btn { flex:1 1 auto; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); margin:30px calc(var(--gut) * -1) 0; background:var(--blk); color:var(--ivory); }
.stats div { padding:12px var(--gut) 12px 14px; border-inline-start:1px solid #444; } .stats div:first-child { border-inline-start:0; padding-inline-start:var(--gut); }
.stats dt { font:700 28px/1.1 var(--f-m); } .stats dd { font-size:12px; line-height:1.5; margin-top:4px; }

/* sections */
.section { padding-block:var(--sec); } .sec-head { display:grid; gap:12px; max-width:640px; margin-bottom:clamp(24px,4vw,44px); justify-items:start; }
.sec-head h2 { font-size:clamp(40px,8vw,76px); } .sec-head h2 em { font-style:normal; color:var(--red); } .sec-head p { color:var(--t2); }

/* finder */
.finder { background:var(--ivory); border-bottom:var(--bw) solid var(--blk); }
.finder-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
.ctl { display:grid; grid-template-columns:minmax(0,1fr); gap:22px; min-width:0; } .ctl-block { min-width:0; } .ctl-l { font-weight:800; margin-bottom:8px; font-size:16px; }
.threads { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.thread { display:grid; grid-template-columns:44px 1fr; align-items:center; border:var(--bw) solid var(--blk); background:var(--ivory); min-height:60px; text-align:start; position:relative; transition:transform .15s, box-shadow .15s; }
.thread .sw { height:100%; line-height:0; overflow:hidden; position:relative; } .thread .sw svg { width:100%; height:100%; }
.thread b { font:800 15px/1.3 var(--f-d); padding:6px 12px; } .thread b small { display:block; font:400 12px var(--f-b); color:var(--t3); }
.thread:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--blk); }
.thread[aria-pressed="true"] { background:var(--blk); color:var(--ivory); box-shadow:var(--sh) var(--sh) 0 var(--red); } .thread[aria-pressed="true"] b small { color:#cfc7b8; }
.thread[aria-pressed="true"]::after { content:"✓"; position:absolute; top:-3px; inset-inline-start:-3px; width:24px; height:24px; background:var(--red); color:#fff; display:grid; place-items:center; font-weight:900; font-size:14px; }
.thread[disabled] { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.loom { min-width:0; } .loom-frame { position:relative; border:6px solid var(--blk); background:var(--sand); height:132px; padding:12px; } .warp { position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(23,20,20,.16) 7px 8px); }
.swatch { position:relative; height:100%; box-shadow:0 0 0 3px var(--blk), 8px 8px 0 3px var(--red); overflow:hidden; line-height:0; background:var(--ivory); } .swatch svg { width:100%; height:100%; } .swatch .hint { position:absolute; inset:0; display:grid; place-items:center; font:800 15px var(--f-b); line-height:1.5; text-align:center; padding:0 16px; background:repeating-linear-gradient(45deg,var(--ivory) 0 10px,var(--sand) 10px 20px); }
.swatch.pop svg { animation:weave .55s var(--ease); } @keyframes weave { from { clip-path:inset(0 0 100% 0); } to { clip-path:inset(0); } }
.loom-cap { font:700 12px var(--f-m); letter-spacing:.08em; margin-top:12px; text-align:start; color:var(--t3); text-transform:uppercase; direction:ltr; }
.result { border:var(--bw) solid var(--blk); background:var(--ivory); box-shadow:var(--sh) var(--sh) 0 var(--blk); min-width:0; } .result .t1 { background:var(--red); color:var(--ivory); padding:8px 18px; font-weight:800; font-size:14px; }
.res-main { display:grid; grid-template-columns:116px 1fr; gap:14px; padding:18px; align-items:start; } .res-main .pack { width:100%; height:auto; }
.res-main h3 { font-size:30px; } .notes { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.note { min-height:40px; padding:0 12px; border:2px solid var(--blk); background:var(--sand); font-weight:700; font-size:13px; } .note[aria-expanded="true"] { background:var(--blk); color:var(--ivory); }
.tip { font-size:14px; color:var(--t2); margin-top:6px; min-height:0; } .tip:empty { display:none; }
.res-why { margin:0 18px; padding-inline-start:12px; border-inline-start:5px solid var(--red); font-size:15px; line-height:1.8; }
.res-buy { padding:16px 18px 18px; display:grid; gap:10px; }
.price-l { display:flex; justify-content:space-between; align-items:baseline; } .price { font:700 22px var(--f-m); } .price .u { font:700 14px var(--f-b); } .cup { font-size:13px; color:var(--t3); }
.hint-s { font-size:13px; color:var(--t3); line-height:1.6; } .linkb { font-weight:800; font-size:14px; min-height:44px; display:inline-flex; align-items:center; border-bottom:3px solid var(--red); width:fit-content; }
.alt { display:grid; grid-template-columns:48px 1fr auto; gap:12px; align-items:center; padding:10px 18px; border-top:var(--bw) solid var(--blk); width:100%; text-align:start; min-height:64px; background:var(--ivory); } .alt:hover { background:var(--sand); }
.alt .mini { height:48px; line-height:0; overflow:hidden; border:2px solid var(--blk); } .alt .mini svg { width:100%; height:100%; } .alt b { font:800 15px var(--f-d); display:block; } .alt span { font-size:12px; color:var(--t3); } .alt .price { font-size:15px; }

/* patterns */
.patterns { background:var(--sand); border-bottom:var(--bw) solid var(--blk); }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px; }
.tile { position:relative; background:var(--ivory); border:var(--bw) solid var(--blk); box-shadow:6px 6px 0 var(--blk); transition:transform .15s, box-shadow .15s; display:flex; flex-direction:column; }
.tile:hover { transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--blk); }
.tile .w { line-height:0; padding:16px 18px 0; background:var(--tint,var(--sand)); border-bottom:var(--bw) solid var(--blk); } .tile .w .pack { width:100%; max-width:132px; margin-inline:auto; }
.tile .strip { line-height:0; border-bottom:var(--bw) solid var(--blk); overflow:hidden; } .tile .strip svg { width:100%; height:auto; }
.tile .b { padding:10px 12px 12px; display:grid; gap:4px; flex:1; align-content:start; }
.tile h3 { font:800 18px/1.3 var(--f-d); } .tile .nt { font-size:13px; color:var(--t2); line-height:1.5; }
.tile .row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; padding-top:8px; border-top:2px solid var(--blk); } .tile .row .price { font-size:15px; }
.tile .open { all:unset; cursor:pointer; } .tile .open::after { content:""; position:absolute; inset:0; z-index:1; } .tile .open:focus-visible::after { outline:3px solid var(--org); outline-offset:4px; }
.tile .flag { position:absolute; top:8px; inset-inline-start:8px; z-index:2; background:var(--blk); color:var(--ivory); font:800 11px/1.8 var(--f-b); padding:0 8px; } .tile .flag.o { background:var(--org); color:var(--blk); }

/* gifts */
.gifts { background:var(--blk); color:var(--ivory); border-bottom:var(--bw) solid var(--ivory); } .gifts .sec-head p { color:#cfc7b8; } .gifts .sec-head h2 em { color:var(--org); }
.sets { display:grid; gap:18px; align-items:start; }
.set { background:var(--ivory); color:var(--blk); border:var(--bw) solid var(--ivory); box-shadow:var(--sh) var(--sh) 0 var(--red); }
.set .w { height:110px; line-height:0; overflow:hidden; border-bottom:var(--bw) solid var(--blk); } .set .w svg { width:100%; height:100%; }
.set .b { padding:16px 18px 18px; display:grid; gap:8px; } .set h3 { font-size:26px; } .set .d { font-size:14px; color:var(--t2); }
.set .f { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; }
.cfg { display:grid; gap:10px; border-top:2px solid var(--blk); padding-top:14px; margin-top:6px; } .field { display:grid; gap:6px; } .field label,.field .lbl { font-weight:800; font-size:14px; }
select,textarea,input[type=text] { width:100%; min-height:var(--tap); padding:10px 14px; border:var(--bw) solid var(--blk); background:#fff9ee; border-radius:0; } textarea { resize:vertical; line-height:1.7; }
select { appearance:none; padding-inline-end:38px; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-size:5px 5px; background-position:20px 52%,15px 52%; background-repeat:no-repeat; }
.preview { background:var(--sand); border:2px dashed var(--blk); padding:12px 14px; font-size:15px; line-height:1.8; overflow-wrap:anywhere; } .preview small { display:block; color:var(--t3); margin-top:4px; }

/* service */
.service { background:var(--ivory); }
.trust-grid { display:grid; gap:12px; margin-bottom:clamp(32px,5vw,56px); }
.trust-row { display:grid; grid-template-columns:36px 1fr; gap:12px; padding:14px; border:var(--bw) solid var(--blk); background:#fbf6ec; } .trust-row.is-compact { border:0; border-bottom:2px solid var(--line); background:none; padding:10px 0; }
.trust-ico { width:36px; height:36px; display:grid; place-items:center; background:var(--blk); color:var(--ivory); font-size:16px; } .trust-label { font-weight:800; line-height:1.5; } .trust-text { font-size:13.5px; color:var(--t3); line-height:1.6; }
.pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .pill { border:2px dashed var(--blk); padding:0 10px; font-size:12px; color:var(--t3); min-height:28px; display:inline-flex; align-items:center; }
.faq h3 { font-size:30px; margin-bottom:10px; } .faq details { border-bottom:var(--bw) solid var(--blk); } .faq details:first-of-type { border-top:var(--bw) solid var(--blk); }
.faq summary { list-style:none; cursor:pointer; padding:16px 0; font-weight:800; display:flex; justify-content:space-between; gap:16px; align-items:center; min-height:58px; } .faq summary::-webkit-details-marker { display:none; } .faq summary::after { content:"+"; font:700 26px var(--f-m); transition:transform .2s; } .faq details[open] summary::after { transform:rotate(45deg); } .faq details p { padding-bottom:16px; color:var(--t2); max-width:60ch; }

.site-footer { background:var(--blk); color:var(--ivory); padding-bottom:calc(56px + 64px); } .weave-edge { line-height:0; overflow:hidden; } .weave-edge svg { width:100%; height:auto; }
.foot { display:grid; gap:10px; padding-top:36px; justify-items:start; } .brand-big { font-size:56px; } .foot p { max-width:60ch; color:#d9d0be; } .foot .small { font-size:13px; color:#a9a095; } .up { font-weight:800; border-bottom:3px solid var(--org); }

/* dock (one floating layer) */
.dock { position:fixed; z-index:60; inset-inline:12px; bottom:calc(12px + env(safe-area-inset-bottom)); max-width:560px; margin-inline:auto; min-height:60px; padding:8px 10px 8px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--blk); color:var(--ivory); border:var(--bw) solid var(--ivory); box-shadow:6px 6px 0 var(--red); transition:transform .3s var(--ease), opacity .3s, visibility .3s; }
.dock[data-mode="off"] { transform:translateY(140%); opacity:0; visibility:hidden; } .dock[data-mode="msg"] { background:#2F5D46; }
.dock-t { display:grid; line-height:1.4; min-width:0; } .dock-t b { font-weight:800; } .dock-t span { font-size:13px; color:#d9d0be; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dock .btn { background:var(--ivory); color:var(--blk); border-color:var(--ivory); flex:none; }

/* sheets */
dialog { border:0; padding:0; color:var(--blk); background:var(--ivory); } dialog::backdrop { background:rgba(23,20,20,.62); }
.sheet { position:fixed; inset:auto 0 0 0; margin:0; width:100%; max-width:100%; max-height:92dvh; border-top:var(--bw) solid var(--blk); overflow:hidden; } .sheet[open] { animation:up .3s var(--ease); } @keyframes up { from { transform:translateY(32px); opacity:0; } }
.sheet-in { display:flex; flex-direction:column; max-height:92dvh; } .sheet-head { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; border-bottom:var(--bw) solid var(--blk); } .sheet-head h2 { font-size:26px; }
.x { width:44px; height:44px; border:var(--bw) solid var(--blk); font-size:18px; background:var(--ivory); } .x:hover { background:var(--blk); color:var(--ivory); }
.sheet-body { flex:1; overflow:auto; padding:8px 20px; } .sheet-foot { padding:14px 20px calc(14px + env(safe-area-inset-bottom)); border-top:var(--bw) solid var(--blk); display:grid; gap:10px; background:var(--sand); }
.modal { margin:auto; width:min(440px,calc(100% - 32px)); border:var(--bw) solid var(--blk); box-shadow:10px 10px 0 var(--red); } .modal-in { padding:28px; display:grid; gap:14px; } .modal-in h2 { font-size:30px; }
.qv-top { position:relative; flex:none; height:120px; overflow:hidden; line-height:0; border-bottom:var(--bw) solid var(--blk); } .qv-top svg { width:100%; height:100%; } .qv-top .x { position:absolute; top:10px; inset-inline-end:10px; z-index:2; }
.qv-body { flex:1; overflow:auto; padding:18px 20px; display:grid; gap:20px; align-content:start; } .qv-id { display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:start; } .qv-id .pack { width:100%; margin-top:-48px; position:relative; z-index:1; } .qv-id h2 { font-size:30px; } .qv-id .sub { font-size:13px; color:var(--t3); line-height:1.6; margin-top:4px; }
.blk > h3 { font:800 16px/1.4 var(--f-b); margin-bottom:8px; } .seg { display:flex; gap:8px; flex-wrap:wrap; } .seg button { min-height:46px; padding:0 16px; border:var(--bw) solid var(--blk); background:var(--ivory); font-weight:800; font-size:14px; } .seg button[aria-checked="true"] { background:var(--blk); color:var(--ivory); }
.bars { display:grid; gap:10px; } .bar { display:grid; grid-template-columns:60px 1fr; gap:12px; align-items:center; font-size:14px; font-weight:700; } .bar-t { height:14px; border:2px solid var(--blk); background:var(--ivory); } .bar-t i { display:block; height:100%; width:calc(var(--v) * 20%); background:var(--red); }
.warn { font-size:14px; background:#f6d4cf; border:2px solid var(--red); padding:8px 12px; } .hint { font-size:14px; color:var(--t3); } .tipbox { font-size:14px; background:var(--sand); padding:10px 12px; border:2px solid var(--blk); }
.qv-foot { flex:none; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); border-top:var(--bw) solid var(--blk); background:var(--sand); display:grid; gap:6px; } .qv-foot .row { display:flex; align-items:center; justify-content:space-between; gap:14px; } .qv-foot .btn { flex:1; max-width:300px; }
.cart-line { display:grid; grid-template-columns:64px 1fr auto; gap:12px; padding:14px 0; border-bottom:2px solid var(--line); align-items:start; } .cart-th { height:64px; border:2px solid var(--blk); overflow:hidden; line-height:0; } .cart-th svg { width:100%; height:100%; }
.cart-line h3 { font:800 17px/1.3 var(--f-d); } .cart-meta { font-size:13px; color:var(--t3); line-height:1.6; }
.qty { display:inline-flex; align-items:center; border:2px solid var(--blk); margin-top:8px; } .qty button { width:44px; height:44px; font-size:20px; } .qty button:hover { background:var(--sand); } .qty output { min-width:26px; text-align:center; font:700 15px var(--f-m); }
.row-b { display:flex; justify-content:space-between; align-items:baseline; gap:12px; } .empty { text-align:center; padding:56px 12px; display:grid; gap:16px; justify-items:center; }
.cart-info summary { cursor:pointer; font-weight:800; font-size:14px; min-height:44px; display:flex; align-items:center; } .tx { font-size:13px; color:var(--t3); background:none; border:0; text-decoration:underline; min-height:44px; }

/* desktop */
@media (min-width:640px) { .grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .sets { grid-template-columns:repeat(2,1fr); } .trust-grid { grid-template-columns:repeat(2,1fr); } .chips { flex-wrap:wrap; overflow:visible; margin-inline:0; padding-inline:0; } }
@media (min-width:900px) {
  .sheet { inset:0 auto 0 0; width:min(520px,100%); height:100dvh; max-height:100dvh; border-top:0; border-right:var(--bw) solid var(--blk); } .sheet-in { height:100dvh; max-height:100dvh; }
  .sheet[open] { animation:side .3s var(--ease); } @keyframes side { from { transform:translateX(-28px); opacity:0; } }
  .qv-top { height:150px; }
}
@media (min-width:1024px) {
  .nav { display:flex; }
  .hero { position:relative; display:block; min-height:clamp(660px,calc(100vh - 64px),900px); overflow:hidden; border-bottom:var(--bw) solid var(--blk); }
  .tapestry { position:absolute; top:0; bottom:0; left:0; right:auto; width:50%; height:auto; border-right:var(--bw) solid var(--blk); } .hero-labels { position:absolute; top:0; bottom:0; left:0; right:auto; width:50%; height:auto; }
  .hl { width:230px; } .hl .w { height:44px; } .hl b { font-size:21px; } .hl .t { padding:10px 16px 12px; } .hl span { font-size:13px; } .hl.b, .hl.c { display:block; }
  .hl.a { left:7%; top:12%; } .hl.b { left:36%; top:42%; transform:rotate(2deg); } .hl.c { left:10%; top:70%; transform:rotate(-1.5deg); }
  .hero-copy { position:relative; width:50%; max-width:none; padding:clamp(36px,5vw,72px) clamp(32px,4vw,64px) 0 clamp(32px,4vw,56px); }
  .hero h1 { font-size:clamp(76px,7.6vw,118px); } .lead { font-size:19px; } .cta .btn { flex:0 0 auto; }
  .stats { display:flex; gap:44px; margin:34px 0 0; padding:0 0 40px; background:none; color:var(--blk); } .stats div { padding:0 !important; border:0 !important; } .stats dt { font-size:40px; white-space:nowrap; }
  .finder-grid { grid-template-columns:.9fr .72fr 1.2fr; gap:32px; align-items:start; } .threads { grid-template-columns:1fr; } .thread { min-height:68px; grid-template-columns:64px 1fr; }
  .loom-frame { height:520px; padding:36px 32px 40px; } .res-main { grid-template-columns:140px 1fr; }
  .grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 22px; } .tile { } 
  .sets { grid-template-columns:repeat(3,1fr); } .trust-grid { grid-template-columns:repeat(3,1fr); }
  .service .wrap { display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(32px,5vw,80px); } .service .sec-head, .service .trust-grid { grid-column:1; } .service .faq { grid-column:2; grid-row:1 / span 2; align-self:start; margin-top:12px; }
  .dock:not([data-mode="msg"]) { display:none; }
}
@media (max-width:359px) { .res-main { grid-template-columns:1fr; } .res-main .pack { width:120px; } .threads { grid-template-columns:1fr; } .hl { width:150px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } html { scroll-behavior:auto; } .reveal { opacity:1; transform:none; } .trow > div { animation:none !important; } }

/* coffee-experience sections */
.tile .pr { font-size:12.5px; color:var(--t3); line-height:1.5; } .tile .rl { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; } .tile .row { flex-wrap:wrap; } .tile .row .cup { font-size:12px; color:var(--t3); }
.tadd { position:relative; z-index:2; margin-top:6px; padding:0 10px; }
.roastline { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; margin:4px 0 8px; }
.set .w { height:auto; display:flex; gap:10px; justify-content:center; padding:16px 12px 8px; background:var(--sand); line-height:0; } .set .w .pack { width:30%; max-width:96px; height:auto; }
.roast { background:var(--blk); color:var(--ivory); border-bottom:var(--bw) solid var(--ivory); } .roast .sec-head p { color:#cfc7b8; } .roast .sec-head h2 em { color:var(--org); } .roast .tab { background:var(--ivory); color:var(--blk); }
.roast-sel { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.rs { display:grid; justify-items:center; align-content:center; gap:6px; padding:10px 2px; min-height:84px; border:var(--bw) solid var(--ivory); color:var(--ivory); font-weight:800; font-size:12.5px; line-height:1.35; text-align:center; transition:background .15s; } .rs svg { height:30px; width:auto; } .rs:hover { background:#2a2523; }
.rs[aria-checked="true"] { background:var(--ivory); color:var(--blk); box-shadow:5px 5px 0 var(--red); }
.roast-panel { display:grid; gap:22px; margin-top:26px; background:var(--ivory); color:var(--blk); border:var(--bw) solid var(--ivory); box-shadow:var(--sh) var(--sh) 0 var(--red); padding:20px; }
.roast-top { display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:center; } .roast-bean { background:var(--sand); border:var(--bw) solid var(--blk); height:112px; display:grid; place-items:center; } .roast-info h3 { font-size:28px; } .roast-info p { color:var(--t2); font-size:15px; line-height:1.7; margin-top:6px; }
.suits { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:14px; margin-top:14px; } .suits .s { border:2px solid var(--blk); padding:0 10px; font-weight:800; font-size:13px; min-height:30px; display:inline-flex; align-items:center; }
.roast-list h4 { font:800 15px/1.6 var(--f-b); margin-bottom:10px; } .minis { display:grid; gap:10px; }
.mini-p { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:12px; align-items:center; text-align:start; border:2px solid var(--blk); padding:8px 12px 8px 8px; background:#fbf6ec; min-height:60px; width:100%; } .mini-p:hover { background:var(--sand); } .mini-p .mw { height:44px; overflow:hidden; line-height:0; border:2px solid var(--blk); } .mini-p b { font:800 15px/1.3 var(--f-d); display:block; } .mini-p small { font-size:12.5px; color:var(--t3); display:block; line-height:1.5; } .mini-p .price { font-size:15px; }
.notes-sec { background:var(--sand); border-bottom:var(--bw) solid var(--blk); } .chip .fs { width:26px; height:26px; overflow:hidden; line-height:0; border:2px solid var(--blk); flex:none; } .chip .fs svg { width:100%; height:100%; }
.fam-intro { font-weight:800; margin:10px 0 18px; max-width:60ch; } .ngrid { display:grid; gap:14px; }
.ncard { background:var(--ivory); border:var(--bw) solid var(--blk); padding:14px 16px; display:grid; gap:6px; box-shadow:5px 5px 0 var(--blk); align-content:start; } .ncard h4 { font:800 22px/1.3 var(--f-d); } .ncard p { font-size:14.5px; color:var(--t2); line-height:1.7; } .ncard .in { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; font-size:13px; color:var(--t3); }
.lnk { border-bottom:2px solid var(--red); font-weight:800; color:var(--blk); min-height:44px; padding:0 2px; font-size:13.5px; display:inline-flex; align-items:center; border-top:2px solid transparent; }
@media (min-width:640px) { .ngrid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px) { .ngrid { grid-template-columns:repeat(3,minmax(0,1fr)); } .roast-panel { grid-template-columns:1.1fr .9fr 1fr; gap:36px; padding:32px; align-items:start; } .roast-sel { max-width:760px; } .tile .w .pack { max-width:150px; } }

/* ===== roastery order flow ===== */
.order { background:var(--sand); border-bottom:var(--bw) solid var(--blk); }
.flow { display:grid; grid-template-columns:minmax(0,1fr); gap:22px; }
.stage-wrap { min-width:0; } .stage { background:var(--ivory); border:var(--bw) solid var(--blk); box-shadow:6px 6px 0 var(--blk); padding:10px 0 6px; } .stage svg { width:100%; max-width:300px; max-height:340px; margin-inline:auto; height:auto; overflow:visible; }
#stage { --bean:#B9AA94; --ground:#4F301C; }
#hop-fill { transform:translateY(112px); transition:transform .9s var(--ease); } #stage.has-bean #hop-fill { transform:translateY(0); }
#bag { opacity:.28; transition:opacity .5s; } #stage.bag-on #bag { opacity:1; } #bag-s { transform-box:fill-box; transform-origin:50% 100%; transition:transform .6s var(--ease); }
#bag.go { animation:bagGo .75s var(--ease) forwards; } @keyframes bagGo { 40% { transform:translateY(-8px); } 100% { transform:translateY(90px); opacity:0; } }
#needle { transform-origin:196px 219px; transform:rotate(-70deg); transition:transform .5s var(--ease); }
#grinder { transform-box:fill-box; transform-origin:50% 100%; } #stage[data-flow="grind"] #grinder { animation:shake .12s linear infinite; } @keyframes shake { 25% { transform:translateX(-1.4px); } 75% { transform:translateX(1.4px); } }
.fall { opacity:0; }
#stage[data-flow="beans"] .fb { opacity:1; animation:fall .7s linear infinite var(--dl); }
#stage[data-flow="spice"] .fs { opacity:1; animation:fall .7s linear infinite var(--dl); }
#stage[data-flow="grind"] .fg, #stage[data-flow="grind"] .fs { opacity:1; }
#stage[data-flow="grind"] .fg { animation:fallOut .6s linear infinite var(--dl); }
#stage[data-flow="whole"] .fo { opacity:1; animation:fallOut .7s linear infinite var(--dl); }
@keyframes fall { from { transform:translateY(0); } to { transform:translateY(34px); opacity:.2; } }
@keyframes fallOut { from { transform:translateY(0); } to { transform:translateY(24px); opacity:.2; } }
#stage[data-flow="grind"] .fs { animation:fall .7s linear infinite var(--dl); }
.steps-col { min-width:0; display:grid; gap:16px; align-content:start; }
.steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; list-style:none; }
.st { width:100%; display:grid; justify-items:center; gap:4px; padding:8px 2px; min-height:60px; border:var(--bw) solid var(--blk); background:var(--ivory); font-weight:800; font-size:12.5px; line-height:1.3; transition:background .15s,color .15s; } .st .no { font-size:14px; }
.st:disabled { opacity:.45; cursor:not-allowed; } .st.ok { background:var(--sand); } .st.cur { background:var(--blk); color:var(--ivory); box-shadow:4px 4px 0 var(--red); }
.step-card { background:var(--ivory); border:var(--bw) solid var(--blk); box-shadow:var(--sh) var(--sh) 0 var(--blk); padding:18px; display:grid; gap:14px; }
.step-card h3 { font-size:28px; } .step-card .sub { color:var(--t2); font-size:15px; line-height:1.7; }
.bins { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.bin { display:grid; gap:4px; align-content:start; text-align:start; border:var(--bw) solid var(--blk); background:#fbf6ec; padding:10px 12px; min-height:128px; transition:transform .15s, background .15s; } .bin:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--blk); }
.bin-top { display:flex; justify-content:space-between; gap:6px; align-items:baseline; } .bin-top b { font:800 16px/1.3 var(--f-d); } .bin .pr { font-size:13px; flex:none; }
.bin-m { font-size:12px; color:var(--t3); line-height:1.5; } .bin-n { font-size:13px; color:var(--t2); line-height:1.5; } .bin-r { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; flex-wrap:wrap; } .bin-t { font-size:12.5px; line-height:1.6; border-top:2px solid currentColor; padding-top:6px; margin-top:4px; }
.bin[aria-checked="true"] { background:var(--blk); color:var(--ivory); box-shadow:5px 5px 0 var(--red); } .bin[aria-checked="true"] .bin-m, .bin[aria-checked="true"] .bin-n { color:#d9d0be; }
.spices, .grinds { display:grid; gap:10px; }
.spice, .gopt { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; text-align:start; border:var(--bw) solid var(--blk); background:#fbf6ec; padding:10px 14px; min-height:64px; }
.gopt { grid-template-columns:minmax(0,1fr) auto; } .spice b, .gopt b { font:800 16px/1.3 var(--f-d); display:block; } .spice small, .gopt small { display:block; font-size:12.5px; color:var(--t3); line-height:1.5; }
.spice .dot { width:30px; height:30px; border:3px solid var(--blk); border-radius:50%; } .spice .pl { font-size:13px; font-weight:700; }
.spice[aria-pressed="true"], .gopt[aria-checked="true"] { background:var(--blk); color:var(--ivory); box-shadow:5px 5px 0 var(--red); } .spice[aria-pressed="true"] small, .gopt[aria-checked="true"] small { color:#d9d0be; }
.gopt[disabled] { opacity:.45; cursor:not-allowed; }
.fine { display:flex; gap:3px; align-items:flex-end; } .fine i { width:6px; height:10px; border:2px solid currentColor; opacity:.35; } .fine i:nth-child(2) { height:13px; } .fine i:nth-child(3) { height:16px; } .fine i:nth-child(4) { height:19px; } .fine i:nth-child(5) { height:22px; } .fine i.on { background:currentColor; opacity:1; }
.weights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.wopt { display:grid; gap:4px; justify-items:center; text-align:center; border:var(--bw) solid var(--blk); background:#fbf6ec; padding:14px 6px; min-height:120px; } .wopt b { font-size:26px; line-height:1.1; } .wopt b small { font-size:13px; } .wopt span { font-size:12.5px; color:var(--t3); }
.wopt .price { color:inherit; font-size:15px; font-weight:800; }
.wopt[aria-checked="true"] { background:var(--blk); color:var(--ivory); box-shadow:5px 5px 0 var(--red); } .wopt[aria-checked="true"] span { color:#d9d0be; }
.step-card .hint, .step-card .warn { margin-top:-2px; }
.step-nav { display:flex; justify-content:space-between; gap:10px; margin-top:6px; flex-wrap:wrap; } .step-nav .btn:not(.btn--line) { flex:1; min-width:180px; }
.sum { display:grid; border-top:var(--bw) solid var(--blk); } .sum > div { display:grid; grid-template-columns:70px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 0; border-bottom:2px solid var(--line); } .sum dt { font-weight:800; font-size:14px; } .sum dd { font-size:14.5px; line-height:1.6; }
.done { display:grid; gap:12px; text-align:center; justify-items:center; padding:12px 0; } .done h3 { font-size:32px; } .done .cta .btn { flex:1 1 140px; }
@media (min-width:640px) { .bins { grid-template-columns:repeat(2,minmax(0,1fr)); } .st { font-size:14px; } }
@media (min-width:1024px) {
  .flow { grid-template-columns:minmax(300px,.8fr) minmax(0,1.3fr); gap:40px; align-items:start; }
  .stage-wrap { position:sticky; top:84px; } .stage svg { max-width:none; max-height:none; }
  .step-card { padding:26px; } .bins { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ===== v3 overrides: real-bean stage, 6 steps, roast + flavour cards ===== */
#hop-beans { transform:translateY(130px); transition:transform .9s var(--ease); } #stage.has-bean #hop-beans { transform:translateY(0); }
#needle { transform-origin:222px 265px; } .stage svg { max-width:310px; max-height:430px; }
.jar { opacity:.5; transition:opacity .3s; } .jar.on { opacity:1; } .jar.on > rect:nth-of-type(2) { fill:#E3A92B; fill-opacity:.9; }
#bag-s { transform-origin:50% 100%; } .rdot { transition:opacity .3s; }
.steps { grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; } .st { font-size:11.5px; padding:8px 0; min-height:58px; } .st .no { font-size:13px; }
.bin-top { display:flex; align-items:center; gap:10px; } .bin-top .beani { flex:none; } .bin-h { display:grid; min-width:0; } .bin-h b { font:800 15px/1.3 var(--f-d); } .bin-top .pr { display:none; }
.bin-r { justify-content:space-between; } .bin-r .pr small { font-size:11px; }
.ropts { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.ropt { display:grid; justify-items:center; align-content:center; gap:4px; border:var(--bw) solid var(--blk); background:#fbf6ec; padding:10px 2px 8px; min-height:92px; text-align:center; font-size:12px; line-height:1.35; position:relative; } .ropt b { font-weight:800; }
.ropt .rec { font-size:10.5px; color:var(--red); font-weight:800; } .ropt[aria-checked="true"] { background:var(--blk); color:var(--ivory); box-shadow:4px 4px 0 var(--red); } .ropt[aria-checked="true"] .rec { color:var(--must); }
.rscale { height:14px; border:var(--bw) solid var(--blk); background:linear-gradient(90deg,#C9A06A,#A87445,#7C4D2B,#4F301C,#25160D); position:relative; margin-top:6px; } .rscale i { position:absolute; top:-9px; width:6px; height:30px; background:var(--red); border:2px solid var(--blk); inset-inline-start:calc(var(--p) * .94); transition:inset-inline-start .4s var(--ease); }
.rlab { display:flex; justify-content:space-between; font-size:12px; font-weight:800; margin-top:-4px; }
.rinfo { display:grid; gap:12px; } .rinfo > p { color:var(--t2); font-size:15px; line-height:1.7; } .rinfo .suits { margin-top:0; }
.spices { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.spice { grid-template-columns:1fr; justify-items:center; text-align:center; gap:4px; padding:14px 10px 12px; align-content:start; position:relative; } .spice b { font:800 17px/1.3 var(--f-d); } .spice small { min-height:40px; }
.spice .si { width:76px; height:76px; border-radius:50%; background:var(--sand); border:var(--bw) solid var(--blk); display:grid; place-items:center; margin-bottom:4px; } .spice[aria-pressed="true"] .si { background:var(--ivory); border-color:var(--ivory); }
.spice[aria-pressed="true"]::after { content:"✓"; position:absolute; top:6px; inset-inline-start:8px; width:24px; height:24px; background:var(--red); color:#fff; font-weight:800; display:grid; place-items:center; border:2px solid var(--ivory); }
.cart-th { display:grid; place-items:center; background:var(--sand); }
@media (min-width:1024px) { .stage svg { max-width:360px; } .ropt { font-size:13px; min-height:104px; } .bin-top { gap:12px; } }

/* ===== v4: mobile = sticky stage that frames the current step; sticky next bar ===== */
#needle { transform-origin:220px 272px; } #stage[data-flow="grind"] .led { fill:#58E06B; }
@media (max-width:1023px) {
  .flow { display:block; }
  .stage-wrap { position:sticky; top:63px; z-index:30; margin-inline:calc(var(--gut) * -1); }
  .stage { border-inline:0; box-shadow:0 5px 0 var(--blk); padding:0; }
  .stage svg { width:100%; max-width:none; max-height:232px; height:auto; aspect-ratio:3/2; }
  .steps-col { margin-top:20px; }
  .step-nav { position:sticky; bottom:0; margin:6px -18px -18px; padding:10px 18px calc(10px + env(safe-area-inset-bottom)); background:var(--ivory); border-top:var(--bw) solid var(--blk); z-index:5; }
  .step-card { gap:12px; } .step-card h3 { font-size:24px; }
  .order .sec-head p { display:none; }
}
.stage { overflow:hidden; } .stage svg { overflow:hidden !important; }

/* ===== v5: fill animation, advice notes, calmer mobile chrome ===== */
.ff { opacity:0; } #bag-mouth { opacity:0; transition:opacity .3s; } #stage.filling #bag-mouth { opacity:1; }
#bag-heap { transform-box:fill-box; transform-origin:50% 100%; transform:scaleY(0); } #stage.filling #bag-heap { transform:scaleY(1); transition:transform 2s linear; }
#stage.filling[data-gm="ground"] .ffcol { opacity:.9; } #stage.filling[data-gm="ground"] .ffg { opacity:1; animation:ffall .42s linear infinite var(--dl); } #stage.filling[data-gm="whole"] .ffb { opacity:1; animation:ffall .5s linear infinite var(--dl); }
@keyframes ffall { from { transform:translateY(0); } to { transform:translateY(26px); opacity:.35; } }
#stage.filling #grinder { animation:shake .12s linear infinite; } #stage.filling .led { fill:#58E06B; } #stage.filling #hop-beans { transform:translateY(26px); transition:transform 2s linear; }
.advice { display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; align-items:start; padding:12px 14px; border:var(--bw) solid var(--blk); background:#fbf6ec; animation:stepIn .3s var(--ease); }
.advice .ai { width:30px; height:30px; display:grid; place-items:center; font:900 16px/1 var(--f-d); border:2px solid var(--blk); background:var(--must); }
.advice b { font:800 15px/1.4 var(--f-d); display:block; } .advice p { font-size:14px; line-height:1.7; color:var(--t2); margin-top:2px; }
.advice.good { background:#e3efdc; } .advice.good .ai { background:#2F5D46; color:#fff; border-color:#2F5D46; }
.advice.tip { background:#faf0d4; } .advice.warn { background:#f6d9d3; border-color:var(--red); } .advice.warn .ai { background:var(--red); color:#fff; border-color:var(--red); }
@keyframes stepIn { from { opacity:0; transform:translateY(8px); } }
.step-card > h3, .step-card > .sub, .bins, .ropts, .spices, .grinds, .weights, .sum { animation:stepIn .3s var(--ease); }
.mini-cart { display:none; }
.step-nav .np { display:grid; line-height:1.2; text-align:center; align-content:center; font-size:12px; color:var(--t3); } .step-nav .np b { font-size:20px; color:var(--blk); } .step-nav .np small { font-size:11px; }
.step-nav .btn { white-space:normal; }
@media (max-width:1023px) {
  .site-header { position:static; }
  .stage-wrap { top:0; } .stage svg { max-height:212px; }
  .mini-cart { display:grid; place-items:center; position:absolute; z-index:6; top:10px; inset-inline-start:calc(var(--gut) + 0px); width:44px; height:44px; background:var(--ivory); border:var(--bw) solid var(--blk); } .mini-cart .cart-count { top:-9px; inset-inline-start:-9px; }
  .bin-m { display:none; } .bin { min-height:112px; }
  .step-nav { gap:8px; align-items:stretch; flex-wrap:nowrap; } .step-nav .btn { min-width:0 !important; padding:0 14px; font-size:15px; } .step-nav .btn:not(.btn--line) { flex:1; }
  .step-nav .btn--line { padding:0 16px; } .st .lb { font-size:11px; }
}
@media (max-width:359px) { .step-nav .np small { display:none; } }

/* ===== round 1: origin flags, advice dock (next to the visual), touch polish ===== */
button, a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.step-card > h3, .step-card > .sub, .bins, .ropts, .spices, .grinds, .weights, .sum { animation:none; }
.step-card[data-anim="1"] > h3, .step-card[data-anim="1"] > .sub, .step-card[data-anim="1"] .bins, .step-card[data-anim="1"] .ropts, .step-card[data-anim="1"] .spices, .step-card[data-anim="1"] .grinds, .step-card[data-anim="1"] .weights, .step-card[data-anim="1"] .sum { animation:stepIn .32s var(--ease) both; }
.flag { flex:none; display:inline-block; vertical-align:middle; border-radius:2px; } .hl b .flag { margin-inline-end:4px; }
.bin-o { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--t2); line-height:1.4; font-weight:700; } .bin-o i { font-style:normal; font-weight:400; color:var(--t3); } .bin[aria-checked="true"] .bin-o, .bin[aria-checked="true"] .bin-o i { color:#d9d0be; }
.sum dd.orig { display:flex; align-items:center; gap:8px; }
.advice-dock { background:#faf0d4; border:var(--bw) solid var(--blk); border-top-width:2px; position:relative; }
.advice-dock.good { background:#e3efdc; } .advice-dock.warn { background:#f6d9d3; border-color:var(--blk); box-shadow:inset 0 -4px 0 var(--red); }
.advice-dock .ad-main { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 12px; }
.advice-dock .ai, .ad-i .ai { width:30px; height:30px; display:grid; place-items:center; font:900 16px/1 var(--f-d); border:2px solid var(--blk); background:var(--must); }
.advice-dock.good .ai, .ad-i.good .ai { background:#2F5D46; color:#fff; border-color:#2F5D46; } .advice-dock.warn .ai, .ad-i.warn .ai { background:var(--red); color:#fff; border-color:var(--red); }
.ad-t b { font:800 15px/1.35 var(--f-d); display:block; } .ad-t p { font-size:13.5px; line-height:1.55; color:var(--t2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .advice-dock.open .ad-t p { -webkit-line-clamp:unset; }
.ad-more { display:grid; justify-items:center; min-width:52px; min-height:44px; padding:2px 8px; border:2px solid var(--blk); background:var(--ivory); font-size:15px; line-height:1.1; } .ad-more small { font-size:10.5px; font-weight:800; }
.ad-rest { display:grid; gap:0; border-top:2px solid var(--blk); max-height:32vh; overflow:auto; } .ad-i { display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; padding:9px 12px; border-bottom:1px solid var(--line); } .ad-i b { font:800 14px/1.35 var(--f-d); display:block; } .ad-i p { font-size:13px; line-height:1.55; color:var(--t2); }
.advice-dock.flash { animation:dockIn .35s var(--ease); } .advice-dock.warn.flash { animation:dockIn .35s var(--ease), nudge .5s .35s; }
@keyframes dockIn { from { transform:translateY(-10px); opacity:0; } } @keyframes nudge { 20%,60% { transform:translateX(-5px); } 40%,80% { transform:translateX(5px); } }
@media (hover:none) { .bin:not([aria-checked="true"]):hover, .ropt:not([aria-checked="true"]):hover, .spice:not([aria-pressed="true"]):hover, .gopt:not([aria-checked="true"]):hover, .wopt:not([aria-checked="true"]):hover, .btn:hover { transform:none; box-shadow:none; } }
.bin:active, .ropt:active, .spice:active, .gopt:active, .wopt:active, .step-card .btn:active { transform:scale(.98); }
@media (max-width:1023px) { .stage svg { max-height:196px; } .advice-dock .ad-main { padding:8px 10px; } .stage-wrap { box-shadow:0 5px 0 var(--blk); } .stage { box-shadow:none; } }

/* ===== round 2: pouch realism + filling choreography (open → pour → bulge → heat-seal → stamp → hand-off) ===== */
#bag-bulge { transform-box:fill-box; transform-origin:50% 100%; transition:transform .5s var(--ease); } #stage.full #bag-bulge { transform:scale(1.045,1.035); transition:transform 2s ease-in; }
#stage.filling #bag, #stage.filling #bag-s { animation:none; } #stage.filling #bag-bulge { animation:bagShake .09s linear infinite; } @keyframes bagShake { 25% { transform:translateX(-.7px) scale(1.02,1.02); } 75% { transform:translateX(.7px) scale(1.02,1.02); } }
.puff { opacity:0; } #stage.filling .puff { animation:puff 1s ease-out infinite var(--dl); } @keyframes puff { 0% { opacity:.0; transform:translateY(4px) scale(.6); } 30% { opacity:.5; } 100% { opacity:0; transform:translateY(-20px) scale(1.8); } }
#stage.filling[data-gm="whole"] .ffcol, #stage.filling[data-gm="whole"] .puff { opacity:0; animation:none; }
#sealer { transform:translateY(-44px); opacity:0; } #seal-glow { opacity:0; }
#stage.sealing #sealer { opacity:1; animation:seal 1s var(--ease) forwards; } @keyframes seal { 0% { transform:translateY(-44px); } 35%,72% { transform:translateY(14px); } 100% { transform:translateY(-44px); opacity:1; } }
#stage.sealing #seal-glow { animation:glow 1s ease forwards; } @keyframes glow { 0%,30% { opacity:0; } 40%,70% { opacity:1; } 100% { opacity:0; } }
#stamp { transform-box:fill-box; transform-origin:50% 50%; opacity:0; transform:scale(2) rotate(-18deg); } #stage.stamped #stamp { opacity:1; transform:scale(1) rotate(-10deg); transition:transform .35s cubic-bezier(.3,1.6,.5,1), opacity .15s; }
#bag.go { animation:bagGo .6s var(--ease) forwards; } @keyframes bagGo { 30% { transform:translateY(-12px); } 100% { transform:translateY(80px); opacity:0; } }
#bag-mouth { transition:opacity .25s; } #stage.sealing #bag-mouth, #stage.sealing #bag-heap { opacity:0; }

/* ===== round 3: ambience + calmer motion ===== */
.steam { animation:steam 3.2s ease-in-out infinite; } @keyframes steam { 0%,100% { opacity:.2; transform:translateY(3px); } 50% { opacity:.7; transform:translateY(-4px); } }
@media (prefers-reduced-motion:reduce) { .steam { animation:none; } .advice-dock.flash, .advice-dock.warn.flash { animation:none; } }
@media (max-width:1023px) { .mini-cart { inset-inline-start:auto; inset-inline-end:calc(var(--gut) + 0px); } .mini-cart .cart-count { inset-inline-start:auto; inset-inline-end:-9px; } }
@media (max-width:1023px) and (max-height:720px) { .stage svg { max-height:150px; } .ad-t p { -webkit-line-clamp:2; } }

/* ===== round 4: slim warnings only, richer steps, finale (bag + animation only) ===== */
.advice-dock .ad-main { grid-template-columns:20px minmax(0,1fr) auto; gap:8px; padding:4px 8px; } .advice-dock .ai { width:20px; height:20px; font-size:11px; border-width:1.5px; }
.advice-dock .ad-t { font-size:12px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .advice-dock.open .ad-t { -webkit-line-clamp:unset; }
.advice-dock .ad-t b, .advice-dock .ad-t p { display:inline; font-size:12px; line-height:1.45; font-family:var(--f-b); } .advice-dock .ad-t b { font-weight:800; color:var(--blk); margin-inline-end:4px; } .advice-dock .ad-t p { color:var(--t2); }
.advice-dock .ad-more { min-width:36px; min-height:30px; padding:0 6px; font-size:12px; flex-direction:row; gap:3px; display:flex; align-items:center; } .advice-dock .ad-more small { font-size:10px; display:none; }
.ad-i { padding:5px 8px; grid-template-columns:20px minmax(0,1fr); gap:8px; } .ad-i .ai { width:20px; height:20px; font-size:11px; } .ad-i b { font:800 12px/1.45 var(--f-b); display:inline; margin-inline-end:4px; } .ad-i p { font-size:12px; display:inline; }
.chips-n { display:flex; flex-wrap:wrap; gap:4px; } .chips-n i { font-style:normal; font-size:11.5px; font-weight:700; border:1.5px solid currentColor; border-radius:99px; padding:0 8px; line-height:1.7; opacity:.85; } .chips-n.c { justify-content:center; }
.dots { display:inline-flex; gap:2px; vertical-align:middle; } .dots i { width:6px; height:6px; border:1.5px solid currentColor; border-radius:50%; opacity:.4; } .dots i.on { background:currentColor; opacity:1; }
.bin { position:relative; } .bin-mt { display:flex; gap:10px; flex-wrap:wrap; font-size:10.5px; color:var(--t3); } .bin-mt span { display:inline-flex; align-items:center; gap:4px; } .bin-mt small { font-size:10.5px; font-weight:700; }
.bin-b { position:absolute; top:-3px; inset-inline-end:-3px; background:var(--blk); color:var(--ivory); font:800 10.5px/1.8 var(--f-b); padding:0 8px; } .bin-b.loc { background:var(--org); color:var(--blk); }
.bin[aria-checked="true"] .bin-b { background:var(--must); color:var(--blk); } .bin[aria-checked="true"] .bin-mt { color:#d9d0be; } .bin-r .pr small { font-size:10.5px; }
.gsub { font-style:normal; font-weight:400; font-size:12px; color:var(--t3); } .gopt[aria-checked="true"] .gsub { color:#d9d0be; } .gs-w { display:grid; justify-items:end; gap:4px; } .gopt[aria-checked="true"] .gs circle { fill:#d9b88a; }
.wopt .pc { font-size:11px; color:var(--t3); } .wopt[aria-checked="true"] .pc { color:#d9d0be; } .wopt .bagi { margin-bottom:2px; }
.sum dd small { display:block; font-size:12px; color:var(--t3); } .sum dd .okt { display:inline; color:#2F5D46; font-weight:800; }
.recp { border:2px dashed var(--blk); padding:10px 14px; display:grid; gap:4px; background:#fbf6ec; } .recp div { display:flex; justify-content:space-between; font-size:14px; } .recp b { font-size:15px; } .recp .tot { border-top:2px solid var(--blk); padding-top:6px; margin-top:4px; font:800 17px var(--f-d); } .recp small { font-size:11px; font-weight:400; }
.done-t { font:800 17px/1.5 var(--f-d); }
.spark { opacity:0; transform-box:fill-box; transform-origin:center; } #stage.tada .spark { animation:spark 1.1s ease-out var(--dl) both; } @keyframes spark { 0% { opacity:0; transform:scale(0) rotate(0); } 40% { opacity:1; transform:scale(1.5) rotate(40deg); } 100% { opacity:0; transform:scale(.8) rotate(90deg); } }
#stage.tada #bag { transform-box:fill-box; transform-origin:50% 100%; animation:tada .9s ease; } @keyframes tada { 0% { transform:scale(1); } 20% { transform:scale(.96) rotate(-2deg); } 40%,60% { transform:scale(1.05) rotate(2deg); } 100% { transform:scale(1); } }
.order.finale-on .sec-head, .flow.finale .steps, .flow.finale #advice { display:none !important; } .flow.finale .step-card:not(.is-done) { display:none; }
.flow.finale .step-card.is-done { border:0; box-shadow:none; background:transparent; padding:0; animation:stepIn .4s var(--ease); } .flow.finale .done { padding:6px 0 0; }
@media (max-width:1023px) { .flow.finale .stage-wrap { position:static; margin-inline:0; box-shadow:none; } .flow.finale .stage { border:var(--bw) solid var(--blk); box-shadow:6px 6px 0 var(--blk); } .flow.finale .stage svg { max-height:min(56vh,430px); aspect-ratio:auto; } .flow.finale .steps-col { margin-top:20px; } }
@media (min-width:1024px) { .flow.finale { grid-template-columns:minmax(0,520px); justify-content:center; } .flow.finale .stage-wrap { position:static; } }
@media (max-width:639px) { .bins { grid-template-columns:minmax(0,1fr); } .bin { min-height:0; padding:12px 14px; gap:6px; } .bin-b { top:-3px; inset-inline-end:auto; inset-inline-start:-3px; } .bin-mt { gap:14px; } .bin-top .bin-h b { font-size:17px; } }

/* ===== desktop: bigger stage, stays in place while filling ===== */
.fill-note { font:800 17px/1.6 var(--f-d); color:var(--t2); text-align:center; padding:40px 0; animation:pulseT 1.2s ease-in-out infinite; } @keyframes pulseT { 50% { opacity:.45; } }
@media (min-width:1024px) {
  .flow, .flow.finale { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); justify-content:stretch; gap:48px; align-items:start; }
  .stage-wrap, .flow.finale .stage-wrap { position:sticky; top:84px; align-self:start; }
  .stage { display:grid; place-items:center; padding:12px; }
  .stage svg { aspect-ratio:360/568; height:min(calc(100vh - 150px),840px); width:auto; max-width:100%; max-height:none; }
  .flow.finale .step-card.is-filling { display:grid; border:var(--bw) solid var(--blk); box-shadow:var(--sh) var(--sh) 0 var(--blk); background:var(--ivory); padding:26px; }
}
@media (min-width:1024px) { .order.finale-on .sec-head { display:grid !important; } .flow.finale .steps { display:grid !important; visibility:hidden; } }

/* ===== QA fixes: stable stage geometry, a11y helpers ===== */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.step-card h3:focus { outline:none; }
#bag-heap { transition:opacity .3s; } #stage.filling #bag-heap { transition:transform 2s linear, opacity .3s; }
.order.finale-on .sec-head { display:grid !important; }
@media (max-width:1023px) { .flow.finale .stage-wrap { position:sticky; top:0; margin-inline:calc(var(--gut) * -1); box-shadow:0 5px 0 var(--blk); } .flow.finale .stage { border:0; box-shadow:none; } .flow.finale .stage svg { aspect-ratio:3/2; max-height:196px; } }
@media (min-width:640px) and (max-width:1023px) { .stage svg, .flow.finale .stage svg { max-height:290px; } }
@media (max-width:1023px) { .flow.finale .step-card:not(.is-done) { display:grid; visibility:hidden; } .flow.finale .steps { display:none !important; } }
#sack, #cup, #decor { transition:opacity .4s; } #stage.inspect #sack, #stage.inspect #cup, #stage.inspect #decor { opacity:0; }

/* ===== round 5: opening sequence, hero choreography, origins band, bean journey, details ===== */
::selection { background:var(--org); color:var(--blk); }
html.intro-on, html.intro-on body { overflow:hidden; }
.intro-on .hero-copy > *, .intro-on .trow, .intro-on .hl, .intro-on .hero-badge, .intro-on .band { opacity:0; }
.hero-copy > :nth-child(1) { --i:0; } .hero-copy > :nth-child(2) { --i:1; } .hero-copy > :nth-child(3) { --i:2; } .hero-copy > :nth-child(4) { --i:3; } .hero-copy > :nth-child(5) { --i:4; }
.hero-in .hero-copy > * { animation:heroUp .85s var(--ease) both; animation-delay:calc(var(--i,0) * 110ms + 120ms); }
.hero-in .trow { animation:rowIn 1s var(--ease) both; animation-delay:calc(var(--ri,0) * 45ms); }
.hero-in .hl { animation:fadeIn .9s ease .9s both; } .hero-in .hero-badge { animation:fadeIn .9s ease 1.1s both; } .hero-in .band { animation:fadeIn .8s ease 1.2s both; }
@keyframes heroUp { from { opacity:0; transform:translateY(28px); } } @keyframes rowIn { from { opacity:0; transform:translateX(-46px); } } @keyframes fadeIn { from { opacity:0; } }
.hero-beans { position:absolute; left:0; right:0; top:0; height:270px; pointer-events:none; overflow:hidden; z-index:1; }
.hb { position:absolute; line-height:0; animation:floaty var(--d,6s) ease-in-out var(--dl,0s) infinite alternate; filter:drop-shadow(2px 3px 0 rgba(0,0,0,.28)); } @keyframes floaty { from { transform:translateY(-9px) rotate(var(--r,0deg)); } to { transform:translateY(11px) rotate(calc(var(--r,0deg) + 28deg)); } }
.hero-badge { position:absolute; z-index:3; width:92px; height:92px; right:var(--gut); top:168px; filter:drop-shadow(4px 4px 0 rgba(0,0,0,.35)); } .bring { transform-origin:60px 60px; animation:spin 24s linear infinite; }
.band { background:var(--blk); color:var(--ivory); border-block:var(--bw) solid var(--blk); overflow:hidden; direction:ltr; position:relative; }
.band-track { display:flex; align-items:center; width:max-content; padding-block:12px; animation:band 60s linear infinite; } .band:hover .band-track { animation-play-state:paused; }
.bi { display:inline-flex; align-items:center; gap:10px; padding-inline:22px; direction:rtl; white-space:nowrap; } .bi b { font:800 17px var(--f-d); } .bi i { font-style:normal; color:#cfc7b8; font-size:13px; } .bs { color:var(--must); font-size:12px; }
@keyframes band { from { transform:translateX(-50%); } to { transform:translateX(0); } }
.wdiv { line-height:0; overflow:hidden; background:var(--ivory); } .wdiv svg { width:100%; height:auto; }
.journey { background:var(--blk); color:var(--ivory); border-bottom:var(--bw) solid var(--ivory); } .journey .sec-head p { color:#cfc7b8; } .journey .sec-head h2 em { color:var(--org); } .journey .tab { background:var(--ivory); color:var(--blk); }
.jr { --p:0; position:relative; list-style:none; display:grid; gap:40px; padding-inline-start:86px; margin-top:8px; }
.jline { position:absolute; top:0; bottom:0; inset-inline-start:30px; width:6px; background:#3a3432; border-radius:3px; } .jfill { position:absolute; top:0; inset-inline:0; height:calc(var(--p) * 100%); background:linear-gradient(var(--org), var(--red)); border-radius:3px; }
.jbean { position:absolute; inset-inline-start:33px; margin-inline-start:-17px; top:calc(var(--p) * 100%); transform:translateY(-50%) rotate(calc(var(--p) * 540deg)); z-index:3; line-height:0; filter:drop-shadow(0 3px 0 #000); }
.jst { position:relative; display:grid; gap:6px; opacity:.32; transition:opacity .5s; } .jst.on { opacity:1; }
.ji { position:absolute; inset-inline-start:-86px; top:0; width:66px; height:66px; background:#2a2523; border:var(--bw) solid #3a3432; border-radius:50%; display:grid; place-items:center; transform:scale(.72); transition:transform .55s cubic-bezier(.3,1.6,.5,1), background .4s, border-color .4s; } .ji svg { width:42px; height:42px; }
.jst.on .ji { transform:scale(1); background:var(--ivory); border-color:var(--must); box-shadow:0 0 0 6px rgba(227,169,43,.18); }
.jt h3 { font-size:24px; } .jt p { color:#d9d0be; max-width:56ch; font-size:15.5px; line-height:1.85; } .jn { color:var(--must); font-size:13px; letter-spacing:.1em; }
@media (min-width:900px) {
  .jr { padding-inline-start:0; gap:64px; } .jline { inset-inline-start:50%; margin-inline-start:-3px; } .jbean { inset-inline-start:50%; margin-inline-start:-17px; }
  .jst { grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr); align-items:start; } .jst .ji { position:relative; inset:auto; grid-column:2; grid-row:1; justify-self:center; width:78px; height:78px; } .jst .ji svg { width:50px; height:50px; }
  .jst .jt { grid-column:1; grid-row:1; padding-inline-end:28px; } .jst:nth-child(even) .jt { grid-column:3; padding-inline:28px 0; }
  .hero-badge { width:124px; height:124px; right:auto; top:auto; left:calc(50% - 170px); bottom:44px; } .hero-beans { bottom:0; height:auto; right:auto; width:50%; }
}
#sp { position:fixed; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--org), var(--red)); transform-origin:100% 50%; transform:scaleX(var(--sp,0)); z-index:250; pointer-events:none; }
.btn--red { overflow:hidden; } .btn--red::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.3) 50%, transparent 65%); transform:translateX(-130%); transition:transform .7s; pointer-events:none; } @media (hover:hover) { .btn--red:hover::before { transform:translateX(130%); } }
.trust-row { transition:transform .2s, box-shadow .2s; } .trust-ico { transition:transform .35s cubic-bezier(.3,1.6,.5,1); } @media (hover:hover) { .trust-row:not(.is-compact):hover { transform:translate(-3px,-3px); box-shadow:5px 5px 0 var(--blk); } .trust-row:hover .trust-ico { transform:rotate(-10deg) scale(1.12); } }
.faq details[open] > p { animation:faqIn .3s var(--ease); } @keyframes faqIn { from { opacity:0; transform:translateY(-6px); } } .faq summary:hover { color:var(--red); }
.site-footer { position:relative; overflow:hidden; } .scatter { position:absolute; left:0; right:0; bottom:0; height:110px; z-index:0; } .site-footer .foot { position:relative; z-index:1; }
.sb { position:absolute; line-height:0; opacity:.85; transition:transform .4s cubic-bezier(.3,1.6,.5,1); } @media (hover:hover) { .sb:hover { transform:translateY(-10px) rotate(40deg) !important; } }
.up { display:inline-flex; align-items:center; gap:10px; } .upb { line-height:0; display:inline-block; } @media (hover:hover) { .up:hover .upb { animation:roll .9s ease; } } @keyframes roll { to { transform:translateX(-40px) rotate(-360deg); } }
@media (prefers-reduced-motion:reduce) { .band { overflow-x:auto; } .hb, .bring { animation:none; } #intro { display:none !important; } }
.hero-labels { z-index:2; }
.hb { translate:calc(var(--mx,0) * -1 * var(--k,14px)) calc(var(--my,0) * -1 * var(--k,14px)); transition:translate .35s ease-out; } .hb:nth-child(odd) { --k:22px; } .hb:nth-child(3n) { --k:32px; }
.fly { position:fixed; left:0; top:0; z-index:400; pointer-events:none; line-height:0; filter:drop-shadow(0 4px 0 rgba(0,0,0,.3)); }
.hero { position:relative; }


/* ===== intro v2 ===== */
#intro { display:none; position:fixed; inset:0; z-index:300; overflow:hidden; cursor:pointer; }
.intro-run #intro { display:block; } #intro[hidden] { display:none !important; }
.intro-curtain { position:absolute; inset:0; background:radial-gradient(circle at 50% 45%, #C73136, #B3262A 55%, #8E1A1E); will-change:transform; }
.intro-stage { position:absolute; inset:0; display:grid; place-items:center; z-index:2; pointer-events:none; }
.intro-heat { position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, rgba(255,150,40,.9), rgba(232,112,42,.35) 55%, rgba(232,112,42,0) 80%); opacity:0; }
.intro-glow { position:absolute; width:min(110vmin,860px); height:min(110vmin,860px); border-radius:50%; background:radial-gradient(circle, rgba(255,226,150,.9), rgba(255,226,150,0) 62%); opacity:0; }
.intro-rays { position:absolute; width:max(150vmax,1400px); height:max(150vmax,1400px); background:repeating-conic-gradient(from 0deg, rgba(255,230,160,.5) 0 5deg, rgba(255,230,160,0) 5deg 15deg); -webkit-mask-image:radial-gradient(circle, #000 0, rgba(0,0,0,.6) 28%, transparent 62%); mask-image:radial-gradient(circle, #000 0, rgba(0,0,0,.6) 28%, transparent 62%); opacity:0; }
#intro-bean { position:relative; width:min(44vw,240px); height:auto; overflow:visible; transform-origin:50% 70%; filter:drop-shadow(0 12px 0 rgba(0,0,0,.28)); }
.intro-ring { position:absolute; left:50%; top:50%; width:34vmin; height:34vmin; margin:-17vmin 0 0 -17vmin; border-radius:50%; border:6px solid #FFE9A8; opacity:0; z-index:3; pointer-events:none; }
.intro-flash { position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, #fff, rgba(255,240,200,.7) 40%, rgba(255,240,200,0) 75%); opacity:0; z-index:3; pointer-events:none; }
#intro-fx { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.intro-word { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; z-index:4; opacity:0; pointer-events:none; text-align:center; color:#F3EBDD; text-shadow:0 6px 0 rgba(0,0,0,.25); }
.intro-word b { font-size:clamp(76px,16vw,170px); line-height:1.05; } .intro-word span { font:800 clamp(14px,2.2vw,20px) var(--f-b); letter-spacing:.04em; }
#intro-skip { position:absolute; bottom:max(22px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:5; background:rgba(0,0,0,.18); color:#F3EBDD; border:2px solid #F3EBDD; padding:6px 20px; font:800 14px var(--f-b); min-height:44px; }
.replay { font:800 14px var(--f-b); border:2px solid #cfc7b8; padding:6px 14px; color:#F3EBDD; } .replay:hover { background:#F3EBDD; color:#171414; }
.bmark { display:inline-block; width:22px; height:15px; margin-inline-end:8px; vertical-align:middle; background:#B3262A; border:2px solid #171414; border-radius:50%; position:relative; transform:rotate(-20deg); transition:transform .5s cubic-bezier(.3,1.6,.5,1); } .bmark::after { content:""; position:absolute; inset:2px 8px 2px 8px; border-left:2px solid #171414; border-radius:50%; } @media (hover:hover) { .brand:hover .bmark { transform:rotate(340deg); } }
@media (prefers-reduced-motion:reduce) { #intro { display:none !important; } }

/* ===== round 6 details ===== */
.mote { opacity:0; animation:mote var(--d,6s) ease-in-out infinite; } @keyframes mote { 0%,100% { opacity:0; transform:translate(0,0); } 30% { opacity:.75; } 60% { opacity:.4; transform:translate(-9px,14px); } }
.site-header { transition:box-shadow .25s; } .site-header.scrolled { box-shadow:0 5px 0 rgba(23,20,20,.9); }
.band { -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.sec-head h2::after { content:""; display:block; width:96px; height:12px; margin-top:12px; background:conic-gradient(from 135deg at 50% 100%, var(--red) 0 90deg, transparent 90deg) 0 0/16px 12px repeat-x; } .journey .sec-head h2::after { background:conic-gradient(from 135deg at 50% 100%, var(--org) 0 90deg, transparent 90deg) 0 0/16px 12px repeat-x; }
.jst.on .ji svg { animation:bob 3.2s ease-in-out infinite; } @keyframes bob { 50% { transform:translateY(-3px) rotate(-3deg); } }
.nav a { position:relative; transition:color .2s; } .nav a::after { content:""; position:absolute; inset-inline:0; bottom:2px; height:3px; background:var(--red); transform:scaleX(0); transform-origin:100% 50%; transition:transform .3s var(--ease); } @media (hover:hover) { .nav a:hover::after { transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce) { .mote, .jst.on .ji svg { animation:none; } }

/* ===== bagging: sealed pouch goes into a kraft shopping bag ===== */
#bag { transform-box:fill-box; transform-origin:50% 100%; }
#pbag-back, #pbag-front { opacity:0; transform-box:fill-box; transform-origin:50% 100%; } #stage.bagging #pbag-back, #stage.bagging #pbag-front { opacity:1; }
#sack { transition:opacity .35s; } #stage.bagging #sack { opacity:0; }
#stage.packed #bag { transform:translate(123px,-4px) scale(.62); }
#stage.sparkle .spark { animation:spark 1.1s ease-out var(--dl) both; } #stage.sparkle #sparks { transform:translate(120px,-20px); }
#stage.tada #bag { animation:none; }
.cart-th .pth { display:block; filter:drop-shadow(2px 2px 0 rgba(0,0,0,.18)); }