:root{
  --ink:#171714; --cream:#f2eadc; --paper:#e3c99e; --accent:#d95b37;
  --line:rgba(23,23,20,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
.nav{height:84px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{font-weight:900;font-size:2rem;letter-spacing:-.08em;text-decoration:none;color:var(--ink)}
.brand span{color:var(--accent)}
.pill,.cta{display:inline-block;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:12px 18px;text-decoration:none;font-weight:800;font-size:.75rem;letter-spacing:.08em}
.hero{min-height:720px;padding:7vw 7vw 6vw;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:5vw}
.eyebrow{font-size:.72rem;font-weight:900;letter-spacing:.18em}
h1,h2{font-size:clamp(4rem,8vw,8.8rem);line-height:.78;letter-spacing:-.075em;margin:.18em 0;font-weight:950}
h1 em,h2 em{font-style:normal;color:var(--accent)}
.lead{font-size:1.2rem;line-height:1.5;max-width:570px;margin:32px 0}
.cta{background:var(--ink);color:var(--cream)}
.product-stage{min-height:520px;display:flex;align-items:center;justify-content:center;position:relative}
.cup{width:260px;height:390px;background:linear-gradient(90deg,#c9a977,#e4c899 45%,#c5a26e);clip-path:polygon(5% 0,95% 0,80% 100%,20% 100%);position:relative;text-align:center;padding-top:90px;filter:drop-shadow(22px 28px 18px rgba(0,0,0,.15));transform:rotate(4deg)}
.rim{position:absolute;top:-10px;left:0;width:100%;height:34px;border-radius:50%;background:#1b1b18;border:8px solid #d9ba87}
.cup-logo{font-size:4.2rem;font-weight:950;letter-spacing:-.09em}
.cup-flavour{font-weight:900;font-size:1.2rem;line-height:.95;margin-top:28px}
.cup-weight{margin-top:45px;font-size:.8rem;font-weight:800}
.note{position:absolute;bottom:30px;right:0;font-size:.65rem;letter-spacing:.13em;font-weight:900;transform:rotate(-5deg);border-bottom:3px solid var(--accent);padding-bottom:5px}
.statement{background:var(--ink);color:var(--cream);padding:9vw 8vw}
.statement h2{font-size:clamp(3.5rem,7vw,7.5rem)}
.statement p:last-child{max-width:760px;font-size:1.35rem;line-height:1.55}
.uses{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.uses article{padding:55px 32px;min-height:260px;border-right:1px solid var(--line)}
.uses article:last-child{border-right:0}
.uses span{font-size:.7rem;font-weight:900;color:var(--accent)}
.uses h3{font-size:1.1rem;margin-top:65px}
.uses p{line-height:1.5}
.flavours{padding:8vw;display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}
.flavours h2{font-size:clamp(4rem,7vw,7rem)}
.flavour-card{border:1.5px solid var(--ink);padding:45px;max-width:500px}
.mini-cup{width:105px;height:130px;background:var(--paper);clip-path:polygon(5% 0,95% 0,80% 100%,20% 100%);display:grid;place-items:center;font-weight:950;font-size:1.8rem;margin-bottom:35px}
.flavour-card h3{font-size:1.8rem;margin-bottom:10px}
.flavour-card p{line-height:1.6}
.flavour-card strong{font-size:.7rem;letter-spacing:.1em}
.coming{text-align:center;padding:10vw 5vw;background:var(--accent);color:var(--ink)}
.coming h2{font-size:clamp(5rem,11vw,11rem)}
.coming h2 em{color:var(--cream)}
.coming p{font-size:1.2rem}
.coming a{display:inline-block;margin-top:20px;color:var(--ink);font-weight:900;font-size:1.2rem}
footer{padding:35px 6vw;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line)}
footer p{font-size:.75rem;font-weight:700}
@media(max-width:800px){
 .hero,.flavours{grid-template-columns:1fr}
 .hero{padding-top:70px}
 .product-stage{min-height:460px}
 .uses{grid-template-columns:1fr 1fr}
 .uses article:nth-child(2){border-right:0}
 .uses article{border-bottom:1px solid var(--line)}
 footer{flex-direction:column;text-align:center}
}
@media(max-width:480px){
 .nav{padding:0 20px}
 .hero{padding:55px 22px}
 h1{font-size:3.7rem}
 .cup{width:220px;height:330px;padding-top:75px}
 .cup-logo{font-size:3.4rem}
 .uses{grid-template-columns:1fr}
 .uses article{border-right:0}
 .statement,.flavours{padding:80px 24px}
}