:root {
  --red: #e32219;
  --dark-red: #9e110c;
  --cream: #f5efe3;
  --paper: #fffaf1;
  --ink: #171512;
  --pink: #f2b8b3;
  --green: #b8d46a;
  --yellow: #f6ca45;
  --blue: #91c8db;
  --line: rgba(23, 21, 18, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: "DM Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 76px;
  padding: 0 3vw;
  background: rgba(245, 239, 227, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 11px; font: 800 20px "Figtree", sans-serif; }
.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: white;
  background: var(--red);
  border-radius: 50%;
  font: 900 22px "Figtree", sans-serif;
}
.main-nav { display: flex; gap: 34px; font-size: 14px; font-weight: 600; }
.main-nav a, .footer-links a { transition: opacity .2s; }
.main-nav a:hover, .footer-links a:hover { opacity: .55; }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.location-button, .bag-button, .menu-toggle {
  border: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.location-button { display: flex; gap: 16px; padding: 12px 16px; background: transparent; }
.bag-button { padding: 12px 16px; color: white; background: var(--ink); border-radius: 99px; }
.bag-count { display: inline-grid; min-width: 18px; height: 18px; margin-left: 4px; place-items: center; color: var(--ink); background: white; border-radius: 50%; font-size: 10px; }
.menu-toggle { display: none; background: transparent; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 44% 56%;
  min-height: calc(100vh - 76px);
  overflow: hidden;
  background: var(--red);
  color: white;
}
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 6vw 3vw 9vw 5vw; }
.eyebrow { margin: 0 0 24px; text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 800; }
h1, h2, h3 { margin: 0; font-family: "Figtree", sans-serif; letter-spacing: -.055em; }
h1 { font-size: clamp(62px, 8.3vw, 142px); line-height: .78; font-weight: 900; }
h1 em, h2 em { color: var(--yellow); font-style: normal; }
.hero-cta { display: flex; align-items: center; gap: 28px; margin-top: 55px; }
.hero-cta p { margin: 0; font-size: 13px; line-height: 1.45; font-weight: 600; }
.button { display: inline-flex; width: fit-content; align-items: center; justify-content: center; padding: 17px 24px; border-radius: 999px; font-size: 14px; font-weight: 800; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.16); }
.button-dark { background: var(--ink); color: white; }
.button-light { background: var(--paper); color: var(--ink); }
.hero-visual { position: relative; min-height: 100%; overflow: hidden; }
.hero-visual::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(227,34,25,.82), transparent 35%); pointer-events: none; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-sticker {
  position: absolute;
  z-index: 2;
  top: 10%;
  right: 8%;
  display: grid;
  width: 118px;
  aspect-ratio: 1;
  place-items: center;
  text-align: center;
  color: var(--ink);
  background: var(--yellow);
  border-radius: 50%;
  transform: rotate(9deg);
  font: 900 15px/1.05 "Figtree", sans-serif;
  text-transform: uppercase;
}
.hero-marquee { position: absolute; z-index: 3; bottom: 0; display: flex; width: max-content; padding: 15px 0; color: var(--ink); background: var(--yellow); font: 800 18px "Figtree", sans-serif; text-transform: uppercase; animation: marquee 18s linear infinite; }
.hero-marquee span { white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

.menu-section { padding: 120px 5vw 140px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 58px; }
.section-heading h2, .moment-copy h2, .rewards-section h2 { font-size: clamp(54px, 7vw, 108px); line-height: .88; font-weight: 900; }
.menu-count { margin: 0; padding-bottom: 9px; font-size: 14px; font-weight: 700; }
.filter-wrap { position: sticky; z-index: 10; top: 75px; padding: 12px 0; background: var(--cream); overflow-x: auto; scrollbar-width: none; }
.filters { display: flex; gap: 8px; min-width: max-content; }
.filter {
  padding: 13px 21px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: .2s;
}
.filter:hover, .filter.active { color: white; background: var(--ink); }
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.menu-card { display: flex; min-height: 430px; flex-direction: column; background: var(--paper); overflow: hidden; border-radius: 6px; animation: card-in .45s ease both; }
.menu-card[hidden] { display: none; }
.menu-card.feature-card { grid-column: span 2; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px); } }
.card-art { position: relative; flex: 1; min-height: 260px; overflow: hidden; background-color: var(--pink); }
.card-art::before, .card-art::after { position: absolute; content: ""; }
.card-art::before { width: 54%; aspect-ratio: 1; top: 54%; left: 50%; background: var(--ink); border-radius: 48% 48% 42% 42%; transform: translate(-50%, -50%) rotate(-7deg); box-shadow: inset 0 24px 0 #d18342, inset 0 46px 0 #f0d13d, inset 0 67px 0 #7caf54, inset 0 82px 0 #d94331; }
.card-art::after { width: 62%; height: 18%; top: 28%; left: 50%; background: #d58a48; border-radius: 70% 70% 38% 38%; transform: translateX(-50%); box-shadow: inset 0 -8px 0 rgba(91,43,15,.15); }
.card-art span { position: absolute; z-index: 2; top: 22px; left: 24px; padding: 11px; border: 2px solid var(--ink); border-radius: 50%; transform: rotate(-9deg); font: 900 12px/1 "Figtree", sans-serif; text-align: center; text-transform: uppercase; }
.feature-card .card-art::before { width: 34%; }
.feature-card .card-art::after { width: 39%; }
.art-salad { background: var(--green); }
.art-salad::before { width: 52% !important; background: radial-gradient(circle at 25% 35%, #c9412f 0 5%, transparent 6%), radial-gradient(circle at 65% 38%, #f1c659 0 8%, transparent 9%), radial-gradient(circle at 45% 68%, #f2ede0 0 7%, transparent 8%), repeating-radial-gradient(ellipse at center, #568337 0 11%, #86a849 12% 19%); border-radius: 50%; box-shadow: 0 18px 0 #eee4d2, 0 26px 0 #cfc3ac; transform: translate(-50%,-48%) rotate(-7deg) scaleY(.66); }
.art-salad::after { display: none; }
.art-avocado { background: #d8dfb7; }
.art-wrap { background: #e9b768; }
.art-wrap::before { width: 32%; height: 73%; top: 54%; background: #e7c98f; border-radius: 80% 20% 70% 30%; box-shadow: inset 18px 0 #6f993d, inset 34px 0 #dfd7bd, inset 50px 0 #c74c35; transform: translate(-50%,-50%) rotate(22deg); }
.art-wrap::after { display: none; }
.art-chili { background: #d57252; }
.art-chili::before { width: 55%; top: 48%; background: radial-gradient(circle, #9d311d 0 7%, transparent 8%), #7f231c; box-shadow: 0 25px 0 #eee8df; transform: translate(-50%,-50%) scaleY(.65); }
.art-chili::after { display: none; }
.art-potato { background: #c9d5de; }
.art-potato::before { width: 58%; background: #9d6b3c; box-shadow: inset 0 25px 0 #efe2b7, inset 0 35px 0 #f3f0dc; transform: translate(-50%,-50%) rotate(-12deg) scaleY(.64); }
.art-potato::after, .art-bites::after { display: none; }
.art-bites { background: #bdd080; }
.art-bites::before { width: 57%; background: radial-gradient(circle at 20% 30%, #e7b85c 0 12%, transparent 13%), radial-gradient(circle at 55% 30%, #d89b43 0 13%, transparent 14%), radial-gradient(circle at 38% 72%, #efc76f 0 14%, transparent 15%), radial-gradient(circle at 80% 66%, #c78735 0 12%, transparent 13%); box-shadow: none; }
.art-dave { background: #efb24d; }
.art-baconator { background: #d58d73; }
.art-chicken { background: #c7db9e; }
.art-nuggets { background: #f2c569; }
.art-nuggets::before { background: radial-gradient(ellipse at 15% 40%, #c87e2d 0 13%, transparent 14%), radial-gradient(ellipse at 48% 60%, #e2a143 0 15%, transparent 16%), radial-gradient(ellipse at 80% 36%, #bd7125 0 14%, transparent 15%); box-shadow: none; }
.art-nuggets::after { display: none; }
.art-breakfast { background: #9ac5da; }
.art-pretzel { background: #c39970; }
.art-frosty { background: #9d6a54; }
.art-frosty::before, .art-vanilla::before, .art-coldbrew::before, .art-tea::before, .art-lemonade::before, .art-strawberry::before { width: 35%; height: 65%; top: 48%; background: #563323; border-radius: 8px 8px 30px 30px; box-shadow: none; transform: translate(-50%,-50%); }
.art-frosty::after, .art-vanilla::after, .art-coldbrew::after, .art-tea::after, .art-lemonade::after, .art-strawberry::after { width: 39%; height: 12%; top: 21%; background: #8b5b43; border-radius: 50%; }
.art-vanilla { background: #f0dcb2; }
.art-vanilla::before { background: #efe3c3; }
.art-vanilla::after { background: #fff6df; }
.art-banana-frosty { background: #f0c468; }
.art-banana-frosty::before, .art-fusion::before { width: 35%; height: 65%; top: 48%; background: #e2a932; border-radius: 8px 8px 30px 30px; box-shadow: none; transform: translate(-50%,-50%); }
.art-banana-frosty::after, .art-fusion::after { width: 39%; height: 12%; top: 21%; background: #f3cf70; border-radius: 50%; }
.art-fusion { background: #c9947c; }
.art-fusion::before { background: repeating-radial-gradient(circle, #e7b879 0 4%, #5e3928 5% 9%, #70432d 10% 18%); }
.art-fusion::after { background: #9b6750; }
.art-cookie { background: #e4a863; }
.art-cookie::before { background: radial-gradient(circle at 25% 20%, #503226 0 4%, transparent 5%), radial-gradient(circle at 64% 28%, #503226 0 5%, transparent 6%), radial-gradient(circle at 38% 67%, #503226 0 5%, transparent 6%), #bb7337; box-shadow: none; border-radius: 50%; transform: translate(-50%,-50%); }
.art-cookie::after { display: none; }
.art-brownie { background: #d49a7e; }
.art-brownie::before { width: 52%; height: 52%; background: repeating-radial-gradient(circle, #f1d5a5 0 5%, #a5683e 6% 12%); border-radius: 25%; box-shadow: none; }
.art-brownie::after { display: none; }
.art-fries { background: var(--yellow); }
.art-fries::before, .art-bacon-fries::before, .art-cheese-fries::before { width: 45%; height: 54%; background: repeating-linear-gradient(82deg, #dda32e 0 9px, #f5ce53 10px 20px); border-radius: 2px 2px 35px 35px; box-shadow: inset 0 -95px 0 var(--red); transform: translate(-50%,-45%); }
.art-fries::after, .art-bacon-fries::after, .art-cheese-fries::after { display: none; }
.art-bacon-fries { background: #e2b58c; }
.art-cheese-fries { background: #d5c784; }
.art-onion { background: #a8c5a3; }
.art-onion::before { background: repeating-radial-gradient(circle, transparent 0 14%, #d9912e 15% 24%, transparent 25% 36%); box-shadow: none; border-radius: 50%; transform: translate(-50%,-50%); }
.art-onion::after { display: none; }
.art-lemonade { background: #efd35e; }
.art-lemonade::before { background: #f5dfa0; }
.art-lemonade::after { background: #fff3bd; }
.art-strawberry { background: #e79094; }
.art-strawberry::before { background: #e6616b; }
.art-strawberry::after { background: #f49ca2; }
.art-coldbrew { background: #9ab9be; }
.art-coldbrew::before { background: linear-gradient(#e8d1aa 0 28%, #603821 29%); }
.art-coldbrew::after { background: #efe2c5; }
.art-tea { background: #b9ca96; }
.art-tea::before { background: #a9582f; }
.art-tea::after { background: #d68754; }
.card-copy { position: relative; padding: 22px 24px 24px; }
.card-kicker { margin: 0 0 8px; color: #736d64; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 800; }
.card-copy h3 { max-width: 80%; font-size: 25px; line-height: .98; font-weight: 800; }
.add-button { position: absolute; right: 21px; bottom: 21px; display: flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 12px; font-weight: 800; }
.add-button span { display: grid; width: 29px; height: 29px; place-items: center; color: white; background: var(--ink); border-radius: 50%; font-size: 17px; transition: transform .2s; }
.add-button:hover span { transform: rotate(90deg) scale(1.08); }

.brand-statement {
  padding: 140px 5vw;
  color: white;
  background: var(--red);
  text-align: center;
}
.brand-statement p { margin: 0 0 24px; font-size: clamp(16px, 2vw, 24px); font-weight: 700; }
.brand-statement h2 { font-size: clamp(60px, 9vw, 142px); line-height: .84; font-weight: 900; }
.brand-statement h2 em { color: var(--yellow); }

.moment-section { display: grid; grid-template-columns: 1.1fr .8fr .65fr; min-height: 700px; background: var(--pink); }
.moment-copy { align-self: center; padding: 7vw 5vw; }
.moment-copy h2 em { color: var(--red); }
.moment-card { display: flex; align-self: center; width: 92%; aspect-ratio: .82; flex-direction: column; justify-content: space-between; padding: 35px; color: white; background: var(--red); transform: rotate(4deg); box-shadow: 18px 18px 0 var(--yellow); }
.moment-card p { margin: 0; font: 900 clamp(44px,5vw,80px)/.85 "Figtree", sans-serif; letter-spacing: -.06em; }
.moment-card span { font-size: 13px; font-weight: 800; }
.moment-note { align-self: end; padding: 0 5vw 6vw 0; font: 800 20px "Figtree", sans-serif; transform: rotate(-7deg); }
.rewards-section { display: flex; min-height: 640px; flex-direction: column; justify-content: center; align-items: center; padding: 100px 5vw; color: white; background: var(--ink); text-align: center; }
.rewards-section h2 { max-width: 1000px; }
.rewards-section .button { margin-top: 42px; }

footer { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 70px 5vw 38px; color: white; background: var(--red); }
.footer-brand { font: 900 clamp(70px,14vw,220px)/.7 "Figtree", sans-serif; letter-spacing: -.08em; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 18px; font-weight: 700; }
footer p { grid-column: 1 / -1; margin: 50px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.35); font-size: 12px; }
.toast { position: fixed; z-index: 50; right: 24px; bottom: 24px; padding: 15px 22px; color: white; background: var(--ink); border-radius: 99px; font-size: 13px; font-weight: 700; opacity: 0; transform: translateY(15px); pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: translateY(0); }

.nav-current { text-decoration: underline; text-underline-offset: 5px; }
.app-page { background: var(--ink); }
.app-page .site-header { background: rgba(23,21,18,.94); border-color: rgba(255,255,255,.16); color: white; }
.app-page .brand-mark { background: var(--red); }
.app-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 850px;
  padding: 95px 7vw 0;
  color: white;
  background: var(--ink);
  overflow: hidden;
}
.app-hero-copy { align-self: center; padding-bottom: 110px; }
.app-hero h1 { font-size: clamp(70px, 9vw, 146px); line-height: .8; }
.app-hero h1 em { color: var(--yellow); }
.app-intro { max-width: 540px; margin: 38px 0 34px; font-size: clamp(19px,2vw,27px); line-height: 1.2; font-weight: 700; }
.app-hero-phone { align-self: end; justify-self: center; width: min(390px, 82%); padding: 14px 12px 0; background: #080807; border: 1px solid #504d48; border-radius: 58px 58px 0 0; box-shadow: 0 0 0 7px #2e2d2a, 0 35px 80px rgba(0,0,0,.45); }
.app-hero-phone img { display: block; width: 100%; border-radius: 46px 46px 0 0; }
.app-gallery { padding: 140px 5vw; background: var(--cream); }
.app-gallery-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 70px; }
.app-gallery-heading h2 { font-size: clamp(60px,8vw,125px); line-height: .85; }
.phone-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3vw; }
.phone-grid figure { margin: 0; }
.phone-grid img { display: block; width: 100%; border: 9px solid var(--ink); border-radius: 44px; box-shadow: 0 25px 55px rgba(23,21,18,.17); }
.phone-grid figure:nth-child(2) { transform: translateY(70px); }
.phone-grid figcaption { margin-top: 20px; font: 800 20px "Figtree", sans-serif; }
.app-benefits { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--red); color: white; }
.app-benefits article { min-height: 360px; padding: 45px 4vw; border-right: 1px solid rgba(255,255,255,.35); }
.app-benefits span { display: block; margin-bottom: 100px; font: 800 13px "Figtree", sans-serif; }
.app-benefits h3 { font-size: clamp(32px,4vw,60px); line-height: .92; }
.app-benefits p { max-width: 280px; font-size: 16px; font-weight: 600; }
.app-download { display: flex; min-height: 700px; flex-direction: column; justify-content: center; align-items: center; padding: 100px 5vw; background: var(--yellow); text-align: center; }
.app-download h2 { font-size: clamp(75px,12vw,180px); line-height: .75; }
.download-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 55px; }
.app-store-badge { display: flex; min-width: 192px; align-items: center; gap: 12px; padding: 11px 22px; color: white; background: var(--ink); border-radius: 12px; text-align: left; font: 700 20px/1 "Figtree", sans-serif; }
.app-store-badge > span:first-child { font-size: 34px; }
.app-store-badge small { display: block; margin-bottom: 3px; font: 500 10px "DM Sans", sans-serif; }
.google-play-badge .play-mark { color: var(--green); font-size: 29px; }

.new-page { background: var(--cream); }
.new-hero { display: grid; grid-template-columns: .8fr 1.2fr; min-height: calc(100vh - 76px); background: var(--red); color: white; }
.new-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 7vw 4vw 7vw 5vw; }
.new-hero h1 { font-size: clamp(64px, 8vw, 132px); line-height: .79; }
.new-hero h1 em { color: var(--yellow); }
.new-hero-image { position: relative; min-height: 700px; overflow: hidden; }
.new-hero-image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, var(--red), transparent 33%); }
.new-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.commitment-stamp { position: absolute; z-index: 2; right: 7%; bottom: 9%; display: grid; width: 125px; aspect-ratio: 1; place-items: center; background: var(--yellow); color: var(--ink); border-radius: 50%; transform: rotate(8deg); text-align: center; text-transform: uppercase; font: 900 18px/.9 "Figtree", sans-serif; }
.first-section { display: grid; grid-template-columns: .25fr 1fr; gap: 4vw; padding: 140px 7vw; }
.first-number { margin: 0; font: 800 14px "Figtree", sans-serif; }
.first-section h2 { font-size: clamp(65px, 9.5vw, 150px); line-height: .79; }
.first-section h2 span:first-of-type { color: #528530; }
.first-section h2 span:nth-of-type(2) { color: var(--red); }
.first-section h2 em { color: #a06a45; }
.new-manifesto { display: grid; grid-template-columns: .85fr 1.15fr; min-height: 760px; background: var(--ink); color: white; }
.manifesto-copy { display: flex; flex-direction: column; justify-content: center; padding: 7vw 5vw; }
.manifesto-copy h2 { max-width: 700px; font-size: clamp(58px, 7vw, 112px); line-height: .86; }
.manifesto-copy > p:last-child { max-width: 560px; margin: 36px 0 0; color: var(--yellow); font: 700 clamp(22px, 2.2vw, 34px)/1.15 "Figtree", sans-serif; }
.new-manifesto img { width: 100%; height: 100%; object-fit: cover; }
.new-values { display: grid; grid-template-columns: repeat(3, 1fr); }
.value-card { display: flex; min-height: 450px; flex-direction: column; justify-content: space-between; padding: 38px 3.5vw; }
.value-card span { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 900; }
.value-card h3 { max-width: 430px; font-size: clamp(34px, 3.8vw, 60px); line-height: .9; }
.value-red { background: var(--red); color: white; }
.value-yellow { background: var(--yellow); }
.value-green { background: var(--green); }
.everyday-section { position: relative; min-height: 760px; overflow: hidden; }
.everyday-section img { width: 100%; height: 100%; min-height: 760px; object-fit: cover; }
.everyday-banner { position: absolute; right: 4vw; bottom: 4vw; width: min(650px, 52vw); padding: 45px; background: var(--paper); box-shadow: 16px 16px 0 var(--red); }
.everyday-banner h2 { font-size: clamp(52px, 6vw, 96px); line-height: .84; }
.everyone-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 900px; background: var(--paper); }
.everyone-image { min-height: 760px; overflow: hidden; }
.everyone-image img { width: 100%; height: 100%; object-fit: cover; }
.everyone-copy { display: flex; flex-direction: column; justify-content: center; padding: 8vw 6vw; }
.everyone-copy h2 { font-size: clamp(68px, 8vw, 130px); line-height: .8; }
.everyone-copy > p:last-of-type { max-width: 560px; margin: 36px 0; font-size: clamp(19px, 2vw, 27px); line-height: 1.25; font-weight: 600; }
.new-close { display: flex; min-height: 700px; flex-direction: column; align-items: center; justify-content: center; padding: 100px 5vw; background: var(--pink); text-align: center; }
.new-close p { margin: 0 0 25px; font-size: clamp(17px,2vw,25px); font-weight: 700; }
.new-close h2 { display: flex; flex-direction: column; align-items: center; gap: .13em; font-size: clamp(65px, 10vw, 155px); line-height: .76; }
.new-close h2 > span { display: block; }
.new-close h2 em { color: var(--red); }
.new-close span { margin-top: 50px; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; font-weight: 900; }
.packaging-section { display: grid; grid-template-columns: .7fr 1.3fr; min-height: 760px; background: var(--paper); }
.packaging-copy { display: flex; flex-direction: column; justify-content: center; padding: 7vw 5vw; }
.packaging-copy h2 { font-size: clamp(62px, 7.5vw, 120px); line-height: .8; }
.packaging-copy > p:last-of-type { max-width: 520px; margin: 34px 0 26px; font-size: clamp(18px, 1.8vw, 25px); line-height: 1.25; font-weight: 600; }
.packaging-copy > span { max-width: 420px; padding-top: 20px; border-top: 1px solid var(--line); color: #726a5f; font-size: 12px; line-height: 1.45; font-weight: 700; }
.packaging-image { min-height: 680px; overflow: hidden; }
.packaging-image img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .main-nav, .location-button { display: none; }
  .menu-toggle { display: block; padding: 10px; }
  .main-nav.open { position: fixed; inset: 76px 0 auto; display: flex; flex-direction: column; gap: 0; background: var(--cream); border-bottom: 1px solid var(--line); }
  .main-nav.open a { padding: 18px 5vw; border-top: 1px solid var(--line); }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { min-height: 560px; padding: 80px 7vw; }
  .hero-visual { height: 60vw; min-height: 430px; }
  .hero-visual::after { background: linear-gradient(180deg, rgba(227,34,25,.7), transparent 36%); }
  .menu-grid { grid-template-columns: 1fr 1fr; }
  .menu-card.feature-card { grid-column: span 1; }
  .feature-card .card-art::before { width: 54%; }
  .feature-card .card-art::after { width: 62%; }
  .moment-section { grid-template-columns: 1fr 1fr; padding-bottom: 70px; }
  .moment-copy { grid-column: 1 / -1; }
  .moment-card { width: 80%; justify-self: center; }
  .moment-note { align-self: center; }
  .app-hero { grid-template-columns: 1fr; padding-top: 100px; }
  .app-hero-copy { padding-bottom: 80px; }
  .app-hero-phone { width: min(390px, 75%); }
  .phone-grid { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .app-benefits { grid-template-columns: 1fr; }
  .app-benefits article { min-height: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.35); }
  .app-benefits span { margin-bottom: 55px; }
  .new-hero { grid-template-columns: 1fr; }
  .new-hero-copy { min-height: 540px; }
  .new-hero-image { min-height: 65vw; }
  .new-hero-image::after { background: linear-gradient(180deg, var(--red), transparent 33%); }
  .new-manifesto { grid-template-columns: 1fr; }
  .manifesto-copy { min-height: 600px; }
  .new-manifesto img { min-height: 65vw; }
  .new-values { grid-template-columns: 1fr; }
  .value-card { min-height: 330px; }
  .everyday-banner { width: min(650px, 76vw); }
  .everyone-section { grid-template-columns: 1fr; }
  .packaging-section { grid-template-columns: 1fr; }
  .packaging-copy { min-height: 550px; }
}

@media (max-width: 600px) {
  .site-header { min-height: 66px; padding: 0 18px; }
  .brand span:last-child { display: none; }
  .brand-mark { width: 38px; height: 38px; }
  .bag-button { padding: 10px 13px; }
  .main-nav.open { inset: 66px 0 auto; }
  .hero-copy { min-height: 500px; padding: 70px 24px 75px; }
  h1 { font-size: 66px; }
  .hero-cta { align-items: flex-start; flex-direction: column; margin-top: 40px; }
  .hero-visual { height: 92vw; min-height: 380px; }
  .hero-sticker { width: 92px; top: 7%; }
  .menu-section { padding: 85px 18px 100px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 20px; margin-bottom: 35px; }
  .section-heading h2, .moment-copy h2, .rewards-section h2 { font-size: 58px; }
  .filter-wrap { top: 65px; }
  .menu-grid { grid-template-columns: 1fr; }
  .menu-card { min-height: 400px; }
  .brand-statement { padding: 95px 24px; }
  .moment-section { grid-template-columns: 1fr; padding-bottom: 100px; }
  .moment-copy { padding: 90px 24px 40px; }
  .moment-card { width: 72%; }
  .moment-note { justify-self: center; padding: 70px 0 0; }
  .rewards-section { min-height: 560px; padding: 80px 24px; }
  footer { grid-template-columns: 1fr; padding: 70px 24px 35px; }
  .footer-brand { font-size: 86px; }
  footer p { grid-column: auto; }
  .app-hero { min-height: auto; padding: 80px 24px 0; }
  .app-hero h1 { font-size: 68px; }
  .app-hero-phone { width: 88%; }
  .app-gallery { padding: 95px 24px 150px; }
  .app-gallery-heading { align-items: flex-start; flex-direction: column; gap: 20px; }
  .phone-grid { grid-template-columns: 1fr; gap: 55px; padding: 0 8vw; }
  .phone-grid figure:nth-child(2) { transform: none; }
  .app-benefits article { padding: 42px 24px; }
  .app-download { min-height: 570px; padding: 80px 24px; }
  .download-badges { flex-direction: column; width: 100%; align-items: center; }
  .new-hero-copy { min-height: 510px; padding: 80px 24px; }
  .new-hero h1 { font-size: 66px; }
  .new-hero-image { min-height: 470px; }
  .commitment-stamp { width: 95px; font-size: 14px; }
  .first-section { grid-template-columns: 1fr; padding: 95px 24px; }
  .first-section h2 { font-size: 62px; }
  .manifesto-copy { min-height: 540px; padding: 90px 24px; }
  .manifesto-copy h2 { font-size: 58px; }
  .new-manifesto img { min-height: 500px; }
  .value-card { padding: 35px 24px; }
  .everyday-section, .everyday-section img { min-height: 620px; }
  .everyday-banner { right: 18px; bottom: 18px; width: calc(100% - 36px); padding: 28px; box-shadow: 9px 9px 0 var(--red); }
  .everyday-banner h2 { font-size: 50px; }
  .everyone-image { min-height: 580px; }
  .everyone-copy { padding: 95px 24px; }
  .everyone-copy h2 { font-size: 66px; }
  .new-close { min-height: 580px; padding: 90px 24px; }
  .new-close h2 { font-size: 62px; }
  .packaging-copy { min-height: 520px; padding: 90px 24px; }
  .packaging-copy h2 { font-size: 62px; }
  .packaging-image { min-height: 430px; }
}

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