:root {
  --cream: #FAF3E7;
  --warm: #F4E8D6;
  --ink: #1A1A1A;
  --green: #7C8B4F;
  --yellow: #F5C518;
  --red: #E23B2A;
  --purple: #8E6FE0;
  --pink: #F2A6C0;
  --blue: #5B8FD9;
  --orange: #F07050;
  --line: #E5D9C3;
  --display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --body: "Nunito", Inter, sans-serif;
  --hand: "Caveat", "Comic Sans MS", cursive;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body); overflow-x: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.section-shell { padding-left: max(28px, calc((100vw - 1380px) / 2)); padding-right: max(28px, calc((100vw - 1380px) / 2)); }
.eyebrow, .micro-label { font-size: 11px; font-weight: 900; letter-spacing: .14em; }

.site-header {
  position: sticky; top: 0; z-index: 50; height: 84px; display: grid; grid-template-columns: 180px 1fr 180px;
  align-items: center; padding: 0 max(28px, calc((100vw - 1380px) / 2)); background: rgba(250,243,231,.96);
  border-bottom: 1px solid rgba(26,26,26,.15); backdrop-filter: blur(12px);
}
.brand { display: inline-flex; width: max-content; flex-direction: column; line-height: .8; }
.brand strong { font-family: var(--display); font-style: italic; font-size: 34px; letter-spacing: -2.5px; }
.brand span { margin-top: 8px; font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.main-nav { display: flex; justify-content: center; gap: clamp(24px, 3.2vw, 55px); }
.main-nav a, .site-footer nav a { position: relative; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.main-nav a:hover { color: var(--green); }
.main-nav .nav-mix::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: -9px; height: 7px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='8' viewBox='0 0 100 8'%3E%3Cpath d='M1 5c14-7 19 5 32 0s20 4 32 0 20 3 34-2' fill='none' stroke='%23F5C518' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.nav-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.face-button, .bag-button, .nav-toggle { border: 0; cursor: pointer; }
.face-button { position: relative; width: 37px; height: 37px; padding: 0; border-radius: 50%; background: var(--ink); }
.face-button::before, .face-button::after { content: ""; position: absolute; top: 10px; width: 4px; height: 5px; border-radius: 50%; background: white; }
.face-button::before { left: 10px; }.face-button::after { right: 10px; }
.face-button span { position: absolute; left: 9px; right: 9px; bottom: 8px; height: 9px; border-bottom: 2px solid white; border-radius: 50%; }
.bag-button { position: relative; width: 32px; height: 36px; background: transparent; padding: 0; }
.bag-button i { position: absolute; left: 5px; top: 11px; width: 23px; height: 22px; background: var(--ink); border-radius: 3px; }
.bag-handle { position: absolute; left: 10px; top: 5px; width: 13px; height: 13px; border: 3px solid var(--ink); border-radius: 9px 9px 0 0; }
.bag-button::after { content: ""; position: absolute; right: -1px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--cream); }
.nav-toggle { display: none; background: none; padding: 8px; }

.hero { min-height: 700px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 40px; padding-top: 58px; padding-bottom: 75px; }
.hero-copy { position: relative; z-index: 2; padding-left: clamp(0px, 3vw, 45px); }
.hero-stickers { display: flex; align-items: center; gap: 20px; height: 50px; margin: 0 0 8px 10px; }
.purple-face { position: relative; display: block; width: 49px; height: 49px; border-radius: 48% 52% 44% 56%; background: var(--purple); transform: rotate(-9deg); box-shadow: 2px 3px 0 var(--ink); }
.purple-face::before, .purple-face::after { content:""; position:absolute; top:13px; width:5px; height:7px; border-radius:50%; background:#fff; }
.purple-face::before { left:13px; }.purple-face::after { right:13px; }
.purple-face i { position:absolute; left:11px; right:10px; bottom:10px; height:12px; border-bottom:3px solid #fff; border-radius:50%; }
.bangs { color: var(--yellow); font: 700 53px/1 var(--hand); transform: rotate(14deg); text-shadow: 2px 2px 0 var(--ink); }
.hero h1, h2 { margin: 0; font-family: var(--display); font-style: italic; font-stretch: condensed; font-weight: 800; letter-spacing: -.055em; line-height: .86; }
.hero h1 { font-size: clamp(62px, 6.7vw, 105px); }
.hero h1 span { position: relative; color: var(--green); white-space: nowrap; }
.hero h1 span::after { content:""; position:absolute; left:3%; right:0; bottom:-13px; height:13px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 18'%3E%3Cpath d='M3 11c49-11 87 7 129-1 52-10 90 7 135-1 40-7 73 0 130-6' fill='none' stroke='%23F5C518' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.hero-kicker { margin: 37px 0 4px; font-weight: 900; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.hero-text { margin: 0; font-size: 18px; font-weight: 600; }
.hero-text strong { position: relative; z-index: 0; font-weight: 900; }
.hero-text strong::before { content:""; position:absolute; z-index:-1; left:-4px; right:-5px; top:5px; bottom:-1px; background:#C9B8F0; transform:rotate(-2deg); }
.hero-badges { position: relative; display:flex; gap: 75px; align-items:center; margin-top:31px; }
.mood-badge { padding: 8px 13px; border-radius: 5px; background: var(--green); color: white; font-size: 10px; font-weight: 900; letter-spacing: .12em; transform: rotate(-3deg); }
.vibes-badge, .slaps-sticker { display:grid; place-items:center; width:105px; aspect-ratio:1; color:#fff; background:var(--red); font-size:11px; font-weight:900; line-height:1.05; text-align:center; clip-path:polygon(50% 0,59% 12%,73% 5%,77% 20%,94% 18%,89% 35%,100% 46%,87% 56%,94% 73%,77% 75%,72% 94%,57% 86%,45% 100%,36% 86%,19% 93%,18% 76%,1% 72%,12% 56%,0 44%,14% 35%,7% 19%,25% 18%,29% 3%,43% 13%); transform:rotate(8deg); }

.hero-products { position:relative; min-height: 520px; display:flex; align-items:center; justify-content:center; }
.bag-lineup { position:relative; z-index:2; display:flex; align-items:flex-end; gap: clamp(6px, 1vw, 15px); transform: rotate(1deg); }
coffee-bag { display:block; width:clamp(105px, 10.3vw, 155px); filter:drop-shadow(7px 13px 5px rgba(54,40,23,.2)); transition:transform .2s ease; }
.bag-lineup > coffee-bag:nth-child(1), .bag-lineup > coffee-bag:nth-child(4) { transform:translateY(20px) rotate(-3deg); }
.bag-lineup > coffee-bag:nth-child(2) { transform:rotate(2deg); }
.bag-lineup > coffee-bag:nth-child(3) { transform:translateY(10px) rotate(-1deg); }
.bag-lineup > coffee-bag:hover, .product-bag:hover { transform:translateY(-7px) rotate(0deg); }
.coffee-bag { position:relative; width:100%; aspect-ratio:.60; border-radius:12px 12px 17px 17px; overflow:hidden; background:var(--bag); border:2px solid var(--ink); box-shadow:inset 0 -7px rgba(0,0,0,.07); }
.coffee-bag::before { content:""; display:block; height:13%; background:color-mix(in srgb, var(--bag) 64%, white); border-bottom:2px solid var(--ink); }
.coffee-bag::after { content:""; position:absolute; inset:5px 8px auto; height:3px; background:rgba(255,255,255,.45); border-radius:50%; }
.coffee-bag .bag-logo { display:block; margin:14% 0 13%; text-align:center; font:italic 800 clamp(20px,2vw,30px)/1 var(--display); letter-spacing:-2px; }
.coffee-bag .bag-name { display:block; width:max-content; max-width:88%; margin:auto; padding:6px 7px; background:var(--cream); border:1.5px solid var(--ink); transform:rotate(-2deg); text-align:center; font:800 clamp(12px,1.2vw,17px)/1 var(--display); }
.coffee-bag .bag-notes { display:block; padding:11% 5% 0; min-height:39px; text-align:center; font-size:clamp(6px,.63vw,9px); font-weight:900; line-height:1.3; }
.coffee-bag .strength { position:absolute; left:0; right:0; bottom:8%; display:flex; justify-content:center; gap:4px; }
.coffee-bag .strength i { width:6px; height:6px; border:1px solid var(--ink); border-radius:50%; background:transparent; }
.coffee-bag .strength i.filled { background:var(--ink); }
.coffee-bag .bag-sticker { position:absolute; top:24%; right:5%; width:27px; height:27px; border-radius:50%; border:1px solid var(--ink); background:var(--sticker); transform:rotate(12deg); }
.coffee-bag .bag-sticker::before, .coffee-bag .bag-sticker::after { content:""; position:absolute; top:7px; width:3px; height:4px; border-radius:50%; background:white; }
.coffee-bag .bag-sticker::before { left:7px; }.coffee-bag .bag-sticker::after { right:7px; }
.coffee-bag .bag-sticker i { position:absolute; left:6px; right:6px; bottom:5px; height:7px; border-bottom:1.5px solid white; border-radius:50%; }
.yellow-shadow { position:absolute; z-index:0; bottom:48px; left:4%; right:1%; height:104px; background:var(--yellow); border-radius:50%; transform:rotate(-3deg); }
.sparkle { position:absolute; z-index:3; width:42px; fill:var(--ink); }
.sparkle-one { top:65px; right:5%; transform:rotate(8deg); }.sparkle-two { bottom:100px; left:2%; width:26px; }
.orbit-doodle { position:absolute; z-index:3; right:2%; bottom:48px; width:145px; fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:round; }
.note-fresh { position:absolute; z-index:3; top:48px; left:7%; color:var(--red); transform:rotate(-13deg); }
.hand-note, .handwritten { font-family:var(--hand); font-weight:700; font-size:28px; }

.builder { padding-top:90px; padding-bottom:105px; background:var(--warm); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-heading { display:flex; align-items:flex-end; justify-content:center; gap:22px; margin-bottom:41px; text-align:center; }
.section-heading h2, .inspo h2 { font-size:clamp(45px,5vw,74px); }
.section-heading .eyebrow { display:block; margin-bottom:9px; color:var(--green); }
.pill-note { margin-bottom:4px; padding:9px 17px; border-radius:99px; background:var(--purple); color:white; font:700 19px/1 var(--hand); transform:rotate(3deg); }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step-card { position:relative; min-width:0; padding:25px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 24px rgba(69,50,22,.08); overflow:hidden; }
.step-title { display:flex; align-items:center; gap:13px; padding-bottom:19px; border-bottom:1px dashed #d8ccb9; }
.step-number { display:grid; flex:0 0 37px; height:37px; place-items:center; border-radius:50%; background:var(--ink); color:#fff; font:800 17px var(--display); }
.step-title h3 { margin:0; font:800 17px/1 var(--display); font-style:italic; letter-spacing:-.03em; }
.step-title p { margin:5px 0 0; color:#766e62; font-size:11px; font-weight:700; }
.coffee-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:12px 10px; padding-top:19px; }
.coffee-choice { position:relative; min-width:0; padding:8px 4px 6px; border:2px solid transparent; border-radius:12px; background:#f8f4ec; cursor:pointer; transition:.18s ease; }
.coffee-choice coffee-bag { width:50px; margin:auto; filter:drop-shadow(2px 4px 2px rgba(0,0,0,.13)); }
.coffee-choice .coffee-bag { border-width:1px; border-radius:5px; }
.coffee-choice .coffee-bag .bag-logo { font-size:10px; margin:14% 0 11%; letter-spacing:-1px; }
.coffee-choice .coffee-bag .bag-name { padding:2px 3px; font-size:6px; border-width:1px; }
.coffee-choice .coffee-bag .bag-notes, .coffee-choice .coffee-bag .strength { display:none; }
.coffee-choice > span { display:block; margin-top:7px; font-size:9px; font-weight:900; }
.coffee-choice > i { display:none; position:absolute; top:3px; right:3px; width:17px; height:17px; border-radius:50%; background:var(--ink); color:#fff; font:normal 800 10px/17px var(--body); }
.coffee-choice.is-selected { border-color:var(--ink); background:#fff; transform:translateY(-2px); }
.coffee-choice.is-selected > i { display:block; }
.coffee-choice:focus-visible, .inspo-card:focus-visible { outline:3px solid var(--purple); outline-offset:2px; }
.selection-status { margin:18px 0 0; padding:9px; border-radius:7px; background:#eef1e5; color:var(--green); text-align:center; font-size:10px; font-weight:800; }
.sliders { display:grid; gap:22px; padding:23px 2px 18px; }
.slider-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:7px; font-size:12px; font-weight:900; }
.slider-row output { min-width:37px; padding:2px 5px; border-radius:4px; background:color-mix(in srgb,var(--coffee) 24%,white); text-align:center; font-size:11px; }
input[type="range"] { grid-column:1/-1; width:100%; height:7px; margin:0; border-radius:99px; appearance:none; background:linear-gradient(to right,var(--coffee) 0 var(--fill),#e6dfd2 var(--fill) 100%); cursor:pointer; }
input[type="range"]::-webkit-slider-thumb { width:20px; height:20px; appearance:none; border:3px solid #fff; border-radius:50%; background:var(--coffee); box-shadow:0 0 0 1.5px var(--ink); }
input[type="range"]::-moz-range-thumb { width:15px; height:15px; border:3px solid #fff; border-radius:50%; background:var(--coffee); box-shadow:0 0 0 1.5px var(--ink); }
.total-row { display:flex; align-items:center; gap:7px; padding-top:14px; border-top:1px dashed #d8ccb9; font-size:12px; font-weight:900; }
.total-row strong { margin-left:auto; font-size:22px; }
.total-row i { padding:3px 6px; border-radius:4px; background:var(--green); color:white; font-size:8px; font-style:normal; }
.blend-name { display:flex; margin:19px 0 14px; padding:10px 12px 8px; border:2px solid var(--ink); border-radius:7px; background:#faf7f1; }
.blend-name input { width:100%; border:0; outline:0; background:transparent; font:800 17px var(--display); letter-spacing:.04em; }
.blend-name > span:last-child { font-size:20px; }
.preview-bar, .ratio-bar { display:flex; width:100%; height:11px; overflow:hidden; border-radius:99px; background:#eee4d7; }
.preview-bar i { height:100%; transition:width .2s ease; }
.taste-notes { min-height:30px; margin:10px 0 14px; color:#645e54; font-size:10px; font-weight:700; }
.attributes { display:grid; gap:8px; width:58%; }
.attributes div { display:grid; grid-template-columns:63px repeat(5,8px); align-items:center; gap:4px; }
.attributes span { font-size:9px; font-weight:900; }
.attributes i { width:7px; height:7px; border:1px solid var(--ink); border-radius:50%; }
.attributes i.filled { background:var(--ink); }
.preview-doodles { position:absolute; right:16px; bottom:10px; width:130px; height:137px; }
.slaps-sticker { position:absolute; right:0; top:0; width:76px; font-size:9px; background:var(--yellow); color:var(--ink); transform:rotate(8deg); }
.peace-hand { position:absolute; bottom:-6px; left:0; width:88px; fill:none; stroke:var(--ink); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; transform:rotate(-8deg); }

.inspo { padding-top:95px; padding-bottom:105px; }
.inspo-heading { display:flex; justify-content:center; align-items:center; gap:14px; margin-bottom:43px; }
.inspo-heading svg { width:42px; fill:var(--yellow); stroke:var(--ink); stroke-width:2; transform:rotate(-7deg); }
.inspo-heading h2 span { color:var(--green); }
.inspo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:17px; }
.inspo-card { position:relative; display:block; min-height:255px; padding:23px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 8px 18px rgba(69,50,22,.07); text-align:left; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; }
.inspo-card:hover { transform:translateY(-6px) rotate(-.5deg); box-shadow:0 14px 25px rgba(69,50,22,.12); }
.inspo-card h3 { margin:0 0 4px; padding-right:40px; font:italic 800 18px var(--display); }
.inspo-card p { margin:0 0 14px; color:#776e63; font-size:10px; font-weight:700; text-transform:uppercase; }
.ratio-bar { height:8px; }
.ratio-bar i:first-child { width:var(--ratio); }.ratio-bar i:last-child { flex:1; }.ratio-bar i { display:block; background:var(--c); }
.mini-pair { position:absolute; left:50%; bottom:12px; display:flex; align-items:flex-end; gap:7px; transform:translateX(-50%); }
.mini-pair coffee-bag { width:63px; filter:drop-shadow(3px 5px 2px rgba(0,0,0,.13)); transform:rotate(-4deg); }
.mini-pair coffee-bag + coffee-bag { transform:translateY(2px) rotate(4deg); }
.mini-pair .coffee-bag { border-width:1px; border-radius:6px; }
.mini-pair .bag-logo { font-size:12px; margin:12% 0; letter-spacing:-1px; }
.mini-pair .bag-name { padding:3px 4px; font-size:7px; border-width:1px; }
.mini-pair .bag-notes,.mini-pair .strength { display:none; }
.inspo-icon { position:absolute; z-index:3; top:17px; right:17px; }
.face-green { width:32px; height:32px; border-radius:50%; background:var(--green); border:1px solid var(--ink); }
.face-green::before,.face-green::after { content:""; position:absolute; top:8px; width:3px; height:4px; border-radius:50%; background:#fff; }.face-green::before{left:8px}.face-green::after{right:8px}
.face-green i { position:absolute; left:7px; right:7px; bottom:6px; height:8px; border-bottom:2px solid #fff; border-radius:50%; }
.black-star { font-size:32px; line-height:1; transform:rotate(12deg); }.lee { color:var(--purple); font:700 27px var(--hand); transform:rotate(-9deg); }
.tap-note { margin:20px 0 0; text-align:center; color:var(--purple); font:700 19px var(--hand); transform:rotate(-1deg); }

.product-banner { min-height:590px; display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:45px; margin:0 max(20px,calc((100vw - 1440px)/2)); padding-top:58px; padding-bottom:58px; border-radius:32px; background:var(--purple); overflow:hidden; }
.banner-copy { position:relative; align-self:stretch; display:flex; align-items:center; }
.banner-copy h2 { position:relative; z-index:2; color:white; font-size:clamp(52px,5.3vw,78px); line-height:.9; }
.banner-copy h2 span { position:relative; z-index:0; padding:0 11px; white-space:nowrap; }
.banner-copy h2 span::before { content:""; position:absolute; z-index:-1; inset:8% -2%; border-radius:50%; background:var(--orange); transform:rotate(-5deg); }
.banner-copy .hand-note { position:absolute; top:10px; left:8px; color:white; transform:rotate(-12deg); }
.banner-hand { position:absolute; z-index:1; right:4%; bottom:-18px; width:125px; fill:none; stroke:#fff; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; transform:rotate(10deg); }
.banner-sparkle { position:absolute; top:8%; right:4%; width:49px; fill:#fff; }
.product-card { display:grid; grid-template-columns:1fr 1fr; min-height:450px; padding:30px; border:2px solid var(--ink); border-radius:22px; background:#fff; box-shadow:9px 10px 0 rgba(26,26,26,.3); }
.product-config { position:relative; border-right:1px dashed #cfc5b5; text-align:center; }
.product-config .eyebrow { color:var(--green); }
.product-config h3 { margin:6px 0 15px; font:italic 800 25px var(--display); }
.grind-toggle { display:flex; justify-content:center; gap:5px; }
.grind-toggle button { padding:7px 10px; border:1px solid var(--ink); border-radius:99px; background:#fff; font-size:8px; font-weight:900; cursor:pointer; }
.grind-toggle button.is-active { background:var(--ink); color:#fff; }
.product-bag { width:122px; margin:25px auto 0; }
.purchase-panel { display:flex; flex-direction:column; justify-content:center; padding:15px 0 5px 29px; }
.handwritten { margin:0 0 22px; color:var(--purple); font-size:22px; line-height:1; transform:rotate(-4deg); }
.weight-pills { display:flex; gap:7px; margin:9px 0 15px; }
.weight-pills button { flex:1; padding:8px 5px; border:1px solid #c8beb0; border-radius:99px; background:#fff; font-size:9px; font-weight:900; cursor:pointer; }
.weight-pills button.is-active { background:#dedbd6; border-color:var(--ink); }
.price { margin:0 0 14px; font:800 30px var(--display); }
.add-button,.save-button { width:100%; padding:13px; border:2px solid var(--ink); border-radius:8px; font-size:11px; font-weight:900; cursor:pointer; transition:.15s ease; }
.add-button { display:flex; justify-content:space-between; background:var(--ink); color:white; }.add-button:hover{background:var(--green)}
.save-button { margin-top:8px; background:white; }.save-button:hover{background:var(--yellow)}

.site-footer { display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; min-height:175px; gap:20px; }
.site-footer nav { display:flex; justify-content:center; flex-wrap:wrap; gap:15px 25px; }
.site-footer p { margin:0; text-align:right; color:#71695f; font-size:8px; font-weight:800; }
.install-button { position:fixed; z-index:80; right:20px; bottom:20px; padding:11px 17px; border:2px solid white; border-radius:99px; background:var(--ink); color:white; box-shadow:0 6px 20px rgba(0,0,0,.22); font-size:10px; font-weight:900; cursor:pointer; }
.toast { position:fixed; z-index:90; left:50%; bottom:24px; padding:10px 17px; border-radius:99px; background:var(--ink); color:white; opacity:0; pointer-events:none; transform:translate(-50%,20px); transition:.25s ease; font-size:11px; font-weight:800; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }

@media (max-width: 1100px) {
  .hero { grid-template-columns:.85fr 1.15fr; }
  .steps-grid { gap:13px; }
  .step-card { padding:19px; }
  .product-banner { grid-template-columns:.7fr 1.3fr; }
}

@media (max-width: 900px) {
  .site-header { grid-template-columns:1fr auto auto; height:72px; }
  .nav-toggle { display:flex; grid-column:2; width:43px; height:43px; flex-direction:column; justify-content:center; gap:5px; }
  .nav-toggle span { display:block; width:24px; height:2px; background:var(--ink); transition:.2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .main-nav { position:absolute; top:72px; left:0; right:0; display:none; flex-direction:column; align-items:center; gap:25px; padding:30px; background:var(--cream); border-bottom:1px solid var(--ink); box-shadow:0 10px 20px rgba(0,0,0,.08); }
  .main-nav.is-open { display:flex; }
  .nav-actions { margin-left:5px; }.face-button{display:none}
  .hero { min-height:auto; grid-template-columns:1fr; padding-top:50px; }
  .hero-copy { text-align:center; }.hero-stickers,.hero-badges{justify-content:center}.hero-badges{gap:40px}
  .hero h1 { font-size:clamp(65px,12vw,100px); }
  .hero-products { min-height:520px; max-width:700px; width:100%; margin:auto; }
  coffee-bag { width:clamp(110px,18vw,150px); }
  .steps-grid { grid-template-columns:1fr 1fr; }
  .preview-card { grid-column:1/-1; min-height:345px; }
  .inspo-grid { grid-template-columns:1fr 1fr; }
  .product-banner { grid-template-columns:1fr; gap:25px; }
  .banner-copy { min-height:360px; justify-content:center; text-align:center; }
  .product-card { max-width:650px; width:100%; margin:auto; }
  .site-footer { grid-template-columns:1fr; padding-top:55px; padding-bottom:55px; text-align:center; }
  .site-footer .brand { margin:auto; }.site-footer p{text-align:center}
}

@media (max-width: 620px) {
  .section-shell { padding-left:18px; padding-right:18px; }
  .site-header { padding:0 16px; }
  .brand strong { font-size:29px; }
  .hero { padding-top:35px; padding-bottom:60px; grid-template-columns:minmax(0,1fr); gap:26px; }
  .hero h1 span { white-space:normal; }
  .hero-copy, .hero-products { min-width:0; }
  .bag-lineup coffee-bag { flex:1 1 0; width:auto; }
  .hero-copy { padding-left:0; }
  .hero h1 { font-size:clamp(53px,17vw,78px); }
  .hero-kicker,.hero-text { font-size:15px; }
  .hero-products { min-height:355px; }
  .bag-lineup { gap:4px; width:100%; }
  .bag-lineup coffee-bag { flex:1; min-width:0; }
  .yellow-shadow { bottom:25px; height:70px; }
  .sparkle-one { top:30px; }.sparkle-two{bottom:65px}.note-fresh{top:18px}.orbit-doodle{bottom:15px;width:100px}
  .builder,.inspo { padding-top:65px; padding-bottom:70px; }
  .section-heading { flex-direction:column; align-items:center; gap:14px; }
  .section-heading h2,.inspo h2 { font-size:42px; }
  .pill-note { margin:0; }
  .steps-grid,.inspo-grid { grid-template-columns:1fr; }
  .preview-card { grid-column:auto; min-height:390px; }
  .inspo-heading { align-items:flex-start; }.inspo-heading svg{flex:0 0 35px}.inspo-heading h2 span{display:block}
  .inspo-card { min-height:250px; }
  .product-banner { margin:0 10px; padding:30px 16px; border-radius:22px; }
  .banner-copy { min-height:315px; }
  .banner-copy h2 { font-size:50px; }
  .product-card { grid-template-columns:1fr; padding:22px; }
  .product-config { padding-bottom:24px; border-right:0; border-bottom:1px dashed #cfc5b5; }
  .purchase-panel { padding:27px 0 0; }
  .site-footer nav { gap:15px; }
}

/* ===== bag PNG lineup (hero) ===== */
.bag-lineup .bag-img {
  width: clamp(105px, 10.3vw, 155px);
  height: auto;
  filter: drop-shadow(7px 13px 5px rgba(54,40,23,.2));
  transform: rotate(-2deg);
  transition: transform .25s ease;
  cursor: pointer;
}
.bag-lineup .bag-img:nth-child(1) { transform: rotate(3deg) translateY(14px); }
.bag-lineup .bag-img:nth-child(2) { transform: rotate(-1.5deg) translateY(2px); }
.bag-lineup .bag-img:nth-child(3) { transform: rotate(1.5deg) translateY(2px); }
.bag-lineup .bag-img:nth-child(4) { transform: rotate(-3deg) translateY(12px); }
.bag-lineup .bag-img:hover { transform: rotate(0deg) translateY(-8px); }

/* ===== grain overlay ===== */
.grain {
  position: fixed; inset: 0; z-index: 2000; pointer-events: none;
  background: url(assets/textures/grain.png) repeat;
  opacity: .06; mix-blend-mode: multiply;
}

/* ===== roastery band ===== */
.roastery {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(30px, 6vw, 90px); align-items: center;
  padding-top: 90px; padding-bottom: 100px;
}
.roastery-photo { position: relative; transform: rotate(-2deg); }
.roastery-photo > img:first-child {
  width: 100%; border: 3px solid var(--ink); border-radius: 20px;
  background: var(--warm); padding: 12px;
  box-shadow: 8px 14px 0 rgba(54,40,23,.14);
}
.roastery-beans {
  position: absolute; right: -26px; bottom: -30px; width: 42%;
  border: 3px solid var(--ink); border-radius: 50%; aspect-ratio: 1;
  object-fit: cover; transform: rotate(6deg);
  box-shadow: 6px 10px 0 rgba(54,40,23,.16);
}
.roastery-copy { position: relative; }
.roastery-copy .eyebrow { color: var(--green); }
.roastery-copy h2 {
  font-family: var(--display); font-size: clamp(44px, 5.2vw, 74px);
  line-height: .98; letter-spacing: -.02em; margin: 16px 0 18px;
}
.roastery-copy h2 span { color: var(--orange); }
.roastery-copy p {
  font-size: 17px; line-height: 1.6; max-width: 44ch;
  color: #4a4034; margin: 0 0 26px;
}
.roastery-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 800; font-size: 15px;
  letter-spacing: .04em; color: var(--cream); background: var(--ink);
  padding: 15px 26px; border-radius: 999px; border: 2px solid var(--ink);
  transition: .2s;
}
.roastery-cta:hover { background: var(--green); border-color: var(--green); }
.roastery-cta::after { content: " →"; }
.roastery-note {
  position: absolute; top: -46px; right: 0;
  font-family: var(--hand); font-size: 36px; color: var(--purple);
  transform: rotate(5deg); line-height: 1;
}

/* ===== brew points strip ===== */
.brew-strip {
  display: flex; align-items: center; gap: 26px;
  margin: 0 max(28px, calc((100vw - 1380px) / 2)) 70px;
  padding: 20px 30px; background: var(--ink); color: var(--cream);
  border-radius: 26px; position: relative; overflow: hidden; flex-wrap: wrap;
}
.brew-strip::before {
  content: ""; position: absolute; inset: 0;
  background: url(assets/textures/grain.png) repeat;
  opacity: .07; pointer-events: none;
}
.brew-mascot {
  width: 96px; height: 96px; object-fit: contain;
  filter: drop-shadow(3px 5px 0 rgba(0,0,0,.25));
}
.brew-copy { min-width: 220px; flex: 1; }
.brew-tag {
  display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: .18em;
  color: var(--yellow); background: rgba(245,197,24,.14);
  border: 1px solid rgba(245,197,24,.5); border-radius: 999px;
  padding: 4px 10px; margin-bottom: 8px;
}
.brew-copy strong {
  display: block; font-family: var(--display);
  font-size: clamp(17px, 2vw, 24px); letter-spacing: .02em; line-height: 1.15;
}
.brew-copy p { margin: 6px 0 0; font-size: 13.5px; color: #d8cfc0; }
.brew-cta {
  position: relative; font-family: var(--display); font-weight: 800; font-size: 14px;
  letter-spacing: .04em; color: var(--ink); background: var(--yellow);
  border: 2px solid var(--yellow); border-radius: 999px; padding: 13px 24px;
  cursor: pointer; transition: .2s; white-space: nowrap;
}
.brew-cta:hover { background: transparent; color: var(--yellow); }

@media (max-width: 620px) {
  .bag-lineup .bag-img { flex: 1; min-width: 0; width: auto; height: auto; }
  .roastery { grid-template-columns: 1fr; gap: 34px; padding-top: 60px; padding-bottom: 70px; }
  .roastery-photo { transform: none; }
  .roastery-copy h2 { font-size: 46px; }
  .roastery-note { top: -38px; right: 4px; font-size: 30px; }
  .brew-strip { margin: 0 14px 55px; padding: 22px 20px; gap: 16px; }
  .brew-mascot { width: 72px; height: 72px; }
  .brew-cta { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}