:root{
  --espresso:#2B1A12;
  --espresso-2:#3A2519;
  --roast:#5A4234;
  --muted:#8A6B58;
  --cream:#F5EDE1;
  --paper:#FBF6EE;
  --sand:#EADBC6;
  --accent:#C8572D;
  --accent-2:#E9733F;
  --line:rgba(43,26,18,.12);
  --serif:"Fraunces", Georgia, serif;
  --sans:"DM Sans", system-ui, sans-serif;
  --r:24px;
  --shadow:0 1px 2px rgba(43,26,18,.06), 0 12px 32px -12px rgba(43,26,18,.18);
  --gutter:clamp(20px, 6.667vw, 96px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--cream)}
img,svg{max-width:100%}
body{font-family:var(--sans);color:var(--espresso);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;min-width:320px}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
em{font-style:italic;color:var(--accent);font-weight:400}
.wrap{width:100%;max-width:calc(1248px + 2 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter);margin:0 auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;border-radius:999px;white-space:nowrap;transition:.2s}
.btn svg{width:20px;height:20px}
.btn--sm{height:44px;padding:0 22px;font-size:15px}
.btn--lg{height:60px;padding:0 30px;font-size:17px}
.btn--block{width:100%;height:56px;font-size:16px}
.btn--dark{background:var(--espresso);color:var(--cream)}
.btn--accent{background:var(--accent);color:#fff;box-shadow:0 10px 24px -10px rgba(200,87,45,.7)}
.btn--ghost{border:1.5px solid var(--espresso);color:var(--espresso)}
.btn--line{border:1.5px solid rgba(245,237,225,.35);color:var(--cream)}

.chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);font-size:14px;font-weight:500;color:var(--roast);background:transparent}
.chip.is-on{background:var(--espresso);border-color:var(--espresso);color:var(--cream)}

.kicker{font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:28px;height:2px;background:currentColor}
.kicker--light{color:var(--accent-2)}
.h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px, 3.75vw, 54px);line-height:1.04;letter-spacing:-.025em;font-variation-settings:"opsz" 144}
.h2--light{color:var(--cream)}
.h2--light em{color:var(--accent-2)}

.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:40px}
.sec-head__p{max-width:400px;color:var(--roast);font-size:17px}

.stars{display:flex;align-items:center;gap:3px;color:var(--accent)}
.stars svg{width:17px;height:17px}
.stars b{margin-left:8px;font-size:15px;color:var(--espresso)}
.stars--lg svg{width:22px;height:22px}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:20;background:rgba(245,237,225,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav__in{height:80px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px}
.logo__word{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:-.02em;font-variation-settings:"opsz" 144}
.nav__links{display:flex;gap:36px;font-size:16px;font-weight:500;color:var(--roast)}
.nav__links a.is-active{color:var(--espresso);position:relative}
.nav__links a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:var(--accent)}
.nav__right{display:flex;align-items:center;gap:24px}
.nav__sign{font-size:16px;font-weight:500}
.cart{position:relative;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center}
.cart__badge{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;border-radius:11px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;border:2px solid var(--cream)}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(900px 600px at 85% 30%, rgba(233,115,63,.12), transparent 60%),
  var(--cream)}
.hero__in{display:grid;grid-template-columns:minmax(0,648fr) minmax(0,560fr);gap:40px;align-items:center;padding-top:16px;padding-bottom:24px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:14.5px;font-weight:600;color:var(--roast);margin-bottom:24px}
.dot{width:8px;height:8px;border-radius:50%;background:#4E9A5B;box-shadow:0 0 0 4px rgba(78,154,91,.18)}
.hero__title{font-family:var(--serif);font-weight:500;font-size:clamp(44px, 6vw, 86px);line-height:.98;letter-spacing:-.035em;font-variation-settings:"opsz" 144;margin-bottom:24px}
.hero__title em{font-weight:400}
.hero__lead{font-size:clamp(17px, 1.32vw, 19px);line-height:1.6;color:var(--roast);max-width:600px;margin-bottom:32px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:36px}
.hero__proof{display:flex;align-items:center;gap:18px}
.avatars{display:flex}
.avatars span{width:44px;height:44px;border-radius:50%;border:3px solid var(--cream);margin-left:-12px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px}
.avatars span:first-child{margin-left:0}
.hero__proof-txt{font-size:15px;color:var(--roast);margin-top:2px}

.hero__art{position:relative}
.hero__photo{position:relative;width:calc(100% + var(--gutter));aspect-ratio:1312/1180;border-radius:28px 0 0 28px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(43,26,18,.45)}
.hero__photo img{display:block;width:100%;height:100%;object-fit:cover}
.label{position:absolute;display:block;box-shadow:0 1px 1px rgba(43,26,18,.18),0 2px 6px -2px rgba(43,26,18,.25)}
.label--hero{left:28.47%;top:35.76%;width:19.48%;height:30%}
.label--card{left:34.2%;top:37.2%;width:19.5%;height:27%;box-shadow:0 1px 1px rgba(43,26,18,.2)}
.badge{position:absolute;width:140px;height:140px;right:calc(12px - var(--gutter));top:3.4%;z-index:4;filter:drop-shadow(0 10px 20px rgba(43,26,18,.22))}

.float{position:absolute;z-index:5;background:var(--paper);border-radius:20px;box-shadow:0 20px 40px -16px rgba(43,26,18,.35),0 1px 2px rgba(43,26,18,.08)}
.float--roast{left:-112px;top:50.85%;display:flex;align-items:center;gap:14px;padding:16px 22px 16px 16px}
.float__ic{width:46px;height:46px;border-radius:14px;background:rgba(200,87,45,.12);display:grid;place-items:center}
.float__k{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.float__v{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:-.01em}
.float--ship{right:calc(14px - var(--gutter));top:75.6%;width:260px;padding:18px 20px}
.float__row{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.pill-ok{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:rgba(78,154,91,.14);color:#357A43;font-size:12px;font-weight:700}
.track{height:6px;border-radius:3px;background:var(--sand);margin:14px 0 8px;overflow:hidden}
.track span{display:block;height:100%;width:62%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:3px}
.track__lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:500}

.ticker{background:linear-gradient(rgba(43,26,18,.80),rgba(43,26,18,.80)),url(img/ticker-beans.jpg) center/cover;color:var(--cream);height:56px;display:flex;align-items:center;overflow:hidden}
.ticker__in{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);width:100%}
.ticker__in{display:flex;align-items:center;gap:32px;white-space:nowrap;padding-left:48px;font-family:var(--serif);font-size:clamp(16px, 1.39vw, 20px);font-style:italic;font-weight:400}
.ticker i{font-style:normal;color:var(--accent-2);font-size:18px}

/* ============ HOW ============ */
.how{padding:56px 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{display:grid;grid-template-columns:76px 1fr;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:30px 30px 30px 26px;box-shadow:var(--shadow)}
.step__n{font-family:var(--serif);font-size:60px;line-height:.85;font-weight:400;color:var(--accent);letter-spacing:-.04em;font-variation-settings:"opsz" 144}
.step h3{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.015em;line-height:1.15;margin-bottom:8px}
.step p{color:var(--roast);font-size:16px;line-height:1.55}
.step--accent{background:linear-gradient(100deg,rgba(43,26,18,.96) 0%,rgba(43,26,18,.86) 55%,rgba(43,26,18,.62) 100%),url(img/step-roast.jpg) center/cover;color:var(--cream);border-color:var(--espresso)}
.step--accent p{color:rgba(245,237,225,.72)}
.step--accent .step__n{color:var(--accent-2)}

/* ============ COFFEES ============ */
.coffees{padding:0 0 64px}
.filters{display:flex;align-items:center;gap:8px}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;margin-left:20px;color:var(--accent)}
.link svg{width:18px;height:18px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{background:var(--paper);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column}
.card__art{position:relative;aspect-ratio:1/1;overflow:hidden;background:#EADBC6}
.card__art img{display:block;width:100%;height:100%;object-fit:cover}
.tag{position:absolute;left:16px;top:16px;height:30px;padding:0 12px;border-radius:999px;background:var(--paper);font-size:12.5px;font-weight:700;display:flex;align-items:center;color:var(--accent);z-index:2}
.tag--dark{background:var(--espresso);color:var(--cream)}
.card__body{padding:20px 24px 20px;display:flex;flex-direction:column;flex:1}
.card__origin{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.card__name{font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:-.015em;line-height:1.15;margin-bottom:14px}
.notes{display:flex;flex-wrap:nowrap;gap:6px;margin-bottom:18px}
.notes span{font-size:12.5px;font-weight:500;padding:5px 10px;white-space:nowrap;border-radius:999px;background:var(--cream);color:var(--roast)}
.roast{position:absolute;left:16px;bottom:16px;z-index:2;display:flex;align-items:center;gap:10px;height:32px;padding:0 12px;border-radius:999px;background:rgba(251,246,238,.92);font-size:12.5px;backdrop-filter:blur(6px)}
.roast__bar{display:flex;gap:4px}
.roast__bar i{width:12px;height:6px;border-radius:3px;background:rgba(43,26,18,.14)}
.roast__bar i.on{background:var(--accent)}
.roast__v{font-weight:700;white-space:nowrap}
.card__foot{display:flex;align-items:center;justify-content:space-between;padding-top:14px;margin-top:auto;border-top:1px solid var(--line)}
.price{font-family:var(--serif);font-size:28px;font-weight:600;letter-spacing:-.01em}
.price small{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--muted)}
.add{width:46px;height:46px;border-radius:50%;background:var(--espresso);color:var(--cream);display:grid;place-items:center}

/* ============ PLANS ============ */
.plans{background:
  radial-gradient(700px 400px at 50% 0%, rgba(233,115,63,.16), transparent 70%),
  var(--espresso);padding:64px 0 64px;color:var(--cream)}
.plans__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px}
.plan__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.toggle{display:inline-flex;padding:5px;border-radius:999px;background:rgba(245,237,225,.08);border:1px solid rgba(245,237,225,.14)}
.toggle span{height:44px;padding:0 24px;display:flex;align-items:center;border-radius:999px;font-weight:600;font-size:15px;color:rgba(245,237,225,.7)}
.toggle span.is-on{background:var(--cream);color:var(--espresso)}
.plan-grid{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:24px;align-items:center}
.plan{position:relative;border-radius:28px;padding:28px 30px;background:rgba(245,237,225,.05);border:1px solid rgba(245,237,225,.14)}
.plan__name{font-family:var(--serif);font-size:32px;font-weight:600;letter-spacing:-.015em;line-height:1.1;margin-bottom:6px}
.plan__desc{color:rgba(245,237,225,.6);font-size:15.5px;line-height:1.4;max-width:190px}
.plan__price{font-family:var(--serif);font-size:clamp(48px, 4.45vw, 64px);font-weight:500;line-height:1;letter-spacing:-.03em;display:flex;align-items:baseline;gap:4px;font-variation-settings:"opsz" 144}
.plan__price .cur{font-size:30px;align-self:flex-start;margin-top:6px}
.plan__price small{font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:0;color:rgba(245,237,225,.6);margin-left:8px}
.plan__meta{display:flex;justify-content:space-between;align-items:center;font-size:14.5px;font-weight:600;color:var(--accent-2);padding:12px 0;border-top:1px solid rgba(245,237,225,.14);border-bottom:1px solid rgba(245,237,225,.14);margin-bottom:22px}
.plan__meta small{font-size:13px;font-weight:500;color:rgba(245,237,225,.5)}
.plan--hot .plan__meta small{color:var(--muted)}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.plan li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.4}
.plan li svg{width:22px;height:22px;flex:none;color:var(--accent-2)}
.plan--hot{background:var(--cream);color:var(--espresso);padding:34px 32px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.plan--hot .plan__desc,.plan--hot .plan__price small{color:var(--muted)}
.plan--hot .plan__meta{color:var(--accent);border-color:var(--line)}
.plan--hot li svg{color:var(--accent)}
.plan__ribbon{position:absolute;top:-16px;left:40px;height:32px;padding:0 16px;border-radius:999px;background:var(--accent);color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center}
.plans__note{text-align:center;margin-top:48px;color:rgba(245,237,225,.55);font-size:15px}

/* ============ STORY ============ */
.story{padding:64px 0}
.story__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,580px);gap:64px;align-items:center}
.story__copy .h2{margin-bottom:24px}
.story__copy p{font-size:18px;color:var(--roast);line-height:1.6;margin-bottom:36px;max-width:580px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:22px 0 20px 20px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.stat:first-child{border-left:0;padding-left:0}
.stat b{font-family:var(--serif);font-size:clamp(40px, 3.9vw, 56px);font-weight:500;line-height:.9;letter-spacing:-.04em;color:var(--espresso);font-variation-settings:"opsz" 144}
.stat b small{font-size:26px;letter-spacing:0;color:var(--accent);margin-left:2px}
.stat span{font-size:14px;color:var(--roast);line-height:1.35;font-weight:500}

.story__side{display:flex;flex-direction:column;gap:16px}
.profile{background:var(--paper);border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);padding:24px 28px 20px}
.profile__head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}
.profile__k{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.profile__t{font-family:var(--serif);font-size:22px;font-weight:600;margin-top:2px}
.profile__legend{display:flex;gap:16px;font-size:13px;color:var(--roast);font-weight:500;margin-top:4px}
.profile__legend span{display:flex;align-items:center;gap:6px}
.profile__legend i{width:12px;height:4px;border-radius:2px}
.profile__chart{width:100%;height:auto;display:block}
.profile__foot{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);padding-top:16px;margin-top:6px}
.profile__foot div{display:flex;flex-direction:column}
.profile__foot span{font-size:12.5px;color:var(--muted);font-weight:500}
.profile__foot b{font-family:var(--serif);font-size:22px;font-weight:600}

.quote{position:relative;height:252px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(0deg,rgba(28,15,9,.94) 0%,rgba(28,15,9,.7) 38%,rgba(28,15,9,.08) 72%),url(img/roastery.jpg) center 35%/cover;color:#fff;border-radius:var(--r);padding:26px 32px 24px;overflow:hidden;box-shadow:var(--shadow)}
.quote__tag{position:absolute;left:20px;top:20px;height:32px;padding:0 14px;border-radius:999px;background:rgba(251,246,238,.92);color:var(--espresso);font-size:13px;font-weight:700;display:flex;align-items:center}
.quote__mark{position:absolute;right:28px;bottom:96px;color:var(--accent-2);opacity:.9}
.quote p{font-family:var(--serif);font-size:clamp(20px, 1.74vw, 25px);line-height:1.22;font-weight:500;letter-spacing:-.01em;font-style:italic;margin-bottom:16px;padding-right:64px}
.quote footer{display:flex;align-items:center;gap:14px}
.quote__av{width:42px;height:42px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-weight:700;font-size:15px}
.quote footer b{display:block;font-size:16px}
.quote footer small{display:block;font-size:14px;opacity:.8}

/* ============ REVIEWS ============ */
.reviews{padding:0 0 64px}
.sec-head--center{flex-direction:column;align-items:center;text-align:center;gap:20px}
.rating{display:flex;align-items:center;gap:16px;padding:10px 22px 10px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.rating > b{font-family:var(--serif);font-size:30px;font-weight:600;background:var(--espresso);color:var(--cream);border-radius:999px;padding:4px 16px}
.rating > div{text-align:left}
.rating span{font-size:14px;color:var(--roast)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:30px 30px 26px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.rev footer .stars{margin-left:auto;align-self:center}
.rev footer .stars svg{width:15px;height:15px}
.rev p{font-family:var(--serif);font-size:clamp(18px, 1.39vw, 20px);line-height:1.4;letter-spacing:-.005em;margin-bottom:22px;flex:1}
.rev footer{display:flex;align-items:center;gap:14px}
.av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;flex:none}
.rev footer b{display:block;font-size:16px}
.rev footer small{display:block;font-size:14px;color:var(--muted)}
.rev--dark{background:linear-gradient(180deg,rgba(43,26,18,.72),rgba(43,26,18,.9)),url(img/review-mug.jpg) center/cover;color:var(--cream);border-color:var(--espresso)}
.rev--dark .stars{color:var(--accent-2)}
.rev--dark footer small{color:rgba(245,237,225,.6)}

/* ============ CTA ============ */
.cta{padding:0;position:relative;z-index:2;margin-bottom:-100px}
.cta__band{position:relative;overflow:hidden;border-radius:32px;background:linear-gradient(110deg,rgba(200,87,45,.97) 0%,rgba(205,92,48,.93) 45%,rgba(214,104,58,.72) 100%),url(img/cta-beans.jpg) center/cover;color:#fff;padding:44px 64px;box-shadow:0 30px 60px -30px rgba(43,26,18,.55);display:flex;align-items:center;justify-content:space-between;gap:48px}
.cta__copy{position:relative;z-index:1}
.cta__copy h2{font-family:var(--serif);font-size:clamp(32px, 3.34vw, 48px);font-weight:500;line-height:1.04;letter-spacing:-.025em;max-width:600px;font-variation-settings:"opsz" 144}
.cta__copy h2 em{color:var(--espresso)}
.cta__copy p{font-size:18px;opacity:.9;margin-top:16px}
.cta__form{position:relative;z-index:1;flex:none;display:flex;gap:10px;padding:8px;border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 20px 40px -20px rgba(43,26,18,.5)}
.cta__input{width:260px;min-width:0;display:flex;align-items:center;gap:10px;padding-left:18px;color:var(--muted);font-size:16px}

/* ============ FOOTER ============ */
.foot{background:var(--espresso);color:var(--cream);padding:136px 0 20px}
.foot__in{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-bottom:24px;border-bottom:1px solid rgba(245,237,225,.12)}
.foot__brand{display:flex;align-items:center;gap:24px;white-space:nowrap}
.foot__brand p{color:rgba(245,237,225,.6);font-size:15px;padding-left:24px;border-left:1px solid rgba(245,237,225,.18)}
.foot__links{display:flex;gap:32px;font-size:15px;color:rgba(245,237,225,.78);white-space:nowrap}
.foot__open{display:flex;align-items:center;gap:12px;font-size:14.5px;color:rgba(245,237,225,.6);white-space:nowrap}
.pill-ok--dark{background:rgba(110,190,125,.16);color:#8FD39C}
.foot__bottom{display:flex;justify-content:space-between;padding-top:18px;font-size:14px;color:rgba(245,237,225,.5)}

/* burger: static icon, visible on small screens */
.burger{display:none;width:46px;height:46px;border-radius:50%;background:var(--espresso);flex-direction:column;align-items:center;justify-content:center;gap:4px}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--cream)}

/* ================= RESPONSIVE ================= */
@media (min-width:1441px){
  .hero__photo{width:calc(100% + 96px);border-radius:28px}
  .badge{right:-84px}
  .float--ship{right:-82px}
}

@media (max-width:1200px){
  .nav__links{gap:24px;font-size:15px}
  .nav__right{gap:16px}
  .nav__sign{display:none}
}

@media (max-width:1100px){
  .nav__opt{display:none}
  .sec-head{flex-wrap:wrap;gap:16px 48px}
  /* hero */
  .hero__in{padding-top:24px;padding-bottom:40px}
  .float--roast{left:-24px;top:-18px;padding:12px 18px 12px 12px;gap:12px}
  .float__ic{width:40px;height:40px}
  .float__v{font-size:18px}
  .float--ship{top:auto;bottom:-16px;width:232px;padding:14px 16px}
  .badge{width:110px;height:110px}
  /* steps: three columns, number above text */
  .step{grid-template-columns:1fr;gap:14px;padding:26px}
  .step__n{font-size:52px}
  /* coffees 2 per row */
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* plans */
  .plan__top{flex-direction:column;gap:12px}
  .plan__meta{flex-wrap:wrap;gap:4px 12px}
  .plan-grid{align-items:stretch}
  .plan--hot{padding:30px 28px}
  /* story */
  .story__in{grid-template-columns:minmax(0,1fr);gap:40px}
  .story__copy p{max-width:none}
  .story__side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
  .quote{height:auto;min-height:280px}
  /* reviews */
  .rev footer{flex-wrap:wrap}
  .rev footer .stars{order:-1;width:100%;margin:0 0 6px}
  /* cta */
  .cta__band{flex-direction:column;align-items:flex-start;gap:28px;padding:40px 48px}
  .cta__copy h2{max-width:none}
  .cta__form{align-self:stretch;max-width:560px}
  .cta__input{flex:1;width:auto}
  /* footer */
  .foot__in{flex-wrap:wrap;gap:20px 40px}
}

@media (max-width:768px){
  .nav__in{height:68px}
  .nav__links{display:none}
  .burger{display:flex}
  .logo__word{font-size:26px}
  /* hero: single column, photo under the copy */
  .hero__in{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:24px;padding-bottom:40px}
  .hero__lead{max-width:none}
  .hero__photo{width:100%;border-radius:24px}
  .badge{right:16px;top:16px;width:104px;height:104px}
  .float--roast{left:16px;top:16px}
  .float--ship{right:16px;bottom:16px}
  .sec-head{flex-direction:column;align-items:flex-start;margin-bottom:32px}
  .sec-head__p{max-width:none}
  .filters{flex-wrap:wrap}
  .link{margin-left:8px}
  .how,.story{padding:48px 0}
  .coffees,.reviews{padding-bottom:48px}
  .plans{padding:48px 0}
  /* steps: stacked, number beside text */
  .steps{grid-template-columns:minmax(0,1fr);gap:16px}
  .step{grid-template-columns:64px 1fr;gap:12px}
  .step__n{font-size:48px}
  /* plans stacked */
  .plans__head{flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:40px}
  .plan-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .plan__top{flex-direction:row;gap:16px}
  /* story */
  .story__side{grid-template-columns:minmax(0,1fr)}
  /* reviews */
  .rev-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .rev footer{flex-wrap:nowrap}
  .rev footer .stars{order:0;width:auto;margin:0 0 0 auto}
  /* footer */
  .foot__in{flex-direction:column;align-items:flex-start}
  .foot__links{flex-wrap:wrap;gap:12px 24px}
}

@media (max-width:480px){
  .nav__cta{display:none}
  .nav__right{gap:10px}
  .eyebrow{font-size:13px;height:36px;padding:0 14px;margin-bottom:20px}
  .hero__title{letter-spacing:-.03em}
  .hero__ctas{flex-direction:column;align-items:stretch}
  .hero__ctas .btn{width:100%;height:56px}
  .hero__proof{gap:14px}
  .hero__proof-txt{font-size:14px}
  /* hero art: floats leave the photo and sit below it */
  .hero__art{display:flex;flex-direction:column;gap:12px}
  .badge{width:80px;height:80px;right:10px;top:10px}
  .float{position:static}
  .float--roast{margin:-40px 14px 0;padding:12px 16px 12px 12px}
  .float--ship{width:auto}
  .float__v{font-size:17px}
  .ticker{height:48px}
  .ticker__in{padding-left:20px;gap:20px}
  .step{padding:22px 20px;grid-template-columns:52px 1fr}
  .step__n{font-size:40px}
  .step h3{font-size:22px}
  .chip{height:32px;padding:0 12px;font-size:13px}
  .cards{grid-template-columns:minmax(0,1fr);gap:20px}
  .plan,.plan--hot{padding:26px 22px}
  .plan__ribbon{left:22px}
  .plan__meta small{display:none}
  .toggle span{padding:0 16px;font-size:14px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3){border-left:0;padding-left:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .profile{padding:18px 16px 16px}
  .profile__head{flex-direction:column;gap:6px}
  .profile__t{font-size:19px}
  .profile__foot{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 0}
  .profile__foot b{font-size:20px}
  .quote{min-height:340px;padding:22px 20px 20px}
  .quote p{padding-right:0}
  .quote__mark{top:18px;bottom:auto;right:18px;width:34px;height:28px}
  .rating{padding:8px 16px 8px 8px;gap:12px}
  .rating > b{font-size:24px;padding:2px 12px}
  .rating span{font-size:13px}
  .rev{padding:24px 22px 22px}
  .cta__band{padding:32px 22px;border-radius:24px}
  .cta__form{flex-direction:column;border-radius:20px;padding:8px}
  .cta__input{height:48px;padding-left:12px}
  .cta__form .btn{width:100%}
  .foot__brand{flex-direction:column;align-items:flex-start;gap:12px}
  .foot__brand p{border-left:0;padding-left:0}
  .foot__open{flex-wrap:wrap}
  .foot__bottom{flex-direction:column;gap:6px}
}

/* ---- pass 2 refinements ---- */
@media (max-width:1100px){
  .btn--lg{height:56px;padding:0 24px;font-size:16px}
  .profile__head{flex-direction:column;gap:6px}
}
@media (max-width:768px){
  .hero__title{font-size:clamp(40px, 8.5vw, 64px)}
}