:root {
  --ink: #210008;
  --cocoa: #36030f;
  --plum: #72043f;
  --raspberry: #e22363;
  --coral: #e15f3f;
  --gold: #f0b727;
  --orange: #ef5b12;
  --citron: #d8d73b;
  --cream: #ffedc5;
  --paper: #fff8e9;
  --white: #fffdfa;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 17px; line-height: 1.6; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-kerning: normal; }
img { display: block; width: 100%; }
a { color: inherit; }
button { font: inherit; }
.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; }
.skip-link { position: fixed; z-index: 100; left: 1rem; top: -5rem; background: var(--white); padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }

.site-header { position: absolute; z-index: 20; inset: 0 0 auto; min-height: 94px; padding: 0 clamp(1.25rem,5vw,5rem); display: flex; align-items: center; justify-content: space-between; color: var(--white); border-bottom: 1px solid rgba(255,255,255,.34); background: linear-gradient(180deg,rgba(30,0,8,.72),rgba(30,0,8,.08)); }
.wordmark { text-decoration: none; font-weight: 900; letter-spacing: .18em; font-size: 1.34rem; }
.wordmark span { color: var(--gold); font-size: .42em; vertical-align: top; margin-left: .25rem; }
nav { display: flex; align-items: center; gap: clamp(1.1rem,2.6vw,2.75rem); }
nav a { font-size: .8rem; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; font-weight: 800; }
.nav-cta { color: var(--ink); background: var(--gold); border: 1px solid var(--gold); border-radius: 0; padding: .72rem 1.15rem; }
.menu-button { display: none; border: 0; background: transparent; color: inherit; padding: .4rem; }

.hero { position: relative; min-height: min(980px,100svh); color: var(--white); background: var(--ink); display: grid; align-items: center; isolation: isolate; overflow: hidden; border-bottom: 10px solid var(--orange); }
.hero-image,.hero-wash { position: absolute; inset: 0; }
.hero-image { z-index: -3; background-image: url("hero-v6.webp"),radial-gradient(circle at 77% 55%,#b93b65 0,#6e1747 36%,#24000e 72%); background-size: cover; background-position: center; transform: scale(1.01); filter: saturate(.94) contrast(1.05); }
.hero-wash { z-index: -2; background: linear-gradient(90deg,rgba(26,0,7,.98) 0%,rgba(30,0,8,.89) 32%,rgba(30,0,8,.34) 59%,rgba(30,0,8,.04) 100%),linear-gradient(0deg,rgba(25,1,9,.38),transparent 48%); }
.hero-content { width: min(730px,88vw); margin-left: clamp(1.25rem,8.5vw,8.5rem); padding: 9.5rem 0 6.8rem; }
.eyebrow,.section-kicker { margin: 0 0 1.25rem; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; line-height: 1.4; font-weight: 850; }
.eyebrow { color: var(--gold); }
.eyebrow sup { color: var(--white); font-size: .72em; margin-left: .12rem; }
h1,h2 { font-family: var(--display); font-weight: 900; letter-spacing: -.042em; line-height: .92; margin: 0; }
h1 { font-size: clamp(4rem,8.2vw,8.5rem); }
h1 em,h2 em { color: var(--gold); font-family: var(--serif); font-weight: 700; text-shadow: none; }
.hero-copy { max-width: 590px; font-size: clamp(1.05rem,1.4vw,1.22rem); line-height: 1.65; color: rgba(255,255,255,.92); margin: 2rem 0 1.65rem; }
.hero-signature { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem; color: var(--gold); text-transform: uppercase; letter-spacing: .13em; font-size: .7rem; line-height: 1.4; font-weight: 900; }
.hero-signature i { width: 18px; height: 2px; background: var(--orange); }
.hero-stats { display: flex; width: fit-content; margin-bottom: 2rem; overflow: hidden; border: 1px solid rgba(255,255,255,.45); border-radius: 0; background: rgba(30,0,8,.86); box-shadow: 9px 9px 0 var(--raspberry); }
.hero-stats div { display: flex; align-items: center; gap: .8rem; padding: .72rem 1.05rem; }
.hero-stats div + div { border-left: 1px solid rgba(255,255,255,.22); }
.hero-stats strong { font: 900 clamp(1.8rem,3vw,2.8rem)/.95 var(--display); color: var(--gold); letter-spacing: -.035em; }
.hero-stats span { font-size: .72rem; line-height: 1.35; text-transform: uppercase; letter-spacing: .07em; font-weight: 850; }
.hero-actions { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; border-radius: 0; padding: .9rem 1.45rem; text-transform: uppercase; text-decoration: none; letter-spacing: .08em; font-weight: 850; font-size: .8rem; transition: transform .25s ease,box-shadow .25s ease; }
.button:hover,.button:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 35px rgba(25,1,9,.18); }
.button-light { background: var(--gold); color: var(--ink); }
.button-dark { background: var(--ink); color: var(--white); }
.text-link,.inline-link { text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 850; }
.text-link span,.inline-link span { color: var(--gold); margin-left: .4rem; }
.first-note { position: absolute; left: clamp(1.25rem,8.5vw,8.5rem); bottom: 1.1rem; max-width: 760px; margin: 0; color: rgba(255,255,255,.78); font-size: .74rem; line-height: 1.45; font-weight: 550; }

.marquee { background: var(--orange); color: var(--white); overflow: hidden; padding: 1.05rem 0; }
.marquee-track { display: flex; gap: 2.15rem; width: max-content; animation: marquee 26s linear infinite; text-transform: uppercase; letter-spacing: .09em; font-size: .8rem; font-weight: 850; }
.marquee-track i { font-style: normal; color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

.section-kicker { color: var(--raspberry); }
.difference { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(3rem,8vw,9rem); align-items: center; padding: clamp(5rem,10vw,10rem) clamp(1.25rem,7vw,7rem); background: var(--paper); overflow: hidden; }
.difference h2,.protein h2,.flavor-intro h2,.making h2,.story h2,.promise h2,.contact h2 { font-size: clamp(3.15rem,6.5vw,7rem); }
.difference h2 em { color: var(--raspberry); }
.difference-copy .lede { margin-top: 2.1rem; font-size: clamp(1.08rem,1.5vw,1.3rem); color: var(--ink); }
.difference-copy > p:not(.section-kicker):not(.lede) { color: #65454f; }
.inline-link { display: inline-block; margin-top: 1.3rem; border-bottom: 1px solid rgba(37,2,14,.3); padding-bottom: .35rem; }
.difference-visual { position: relative; min-height: 620px; overflow: hidden; border-radius: 0; color: var(--white); background: linear-gradient(180deg,rgba(33,0,8,0),rgba(33,0,8,.48)),url("crave-creamy-center-v2.webp") center/cover no-repeat; box-shadow: 18px 18px 0 var(--gold); border: 0; }
.difference-visual::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.24); pointer-events: none; }
.bite-orbit { position: absolute; right: 0; top: 0; z-index: 1; display: flex; align-items: flex-end; gap: .65rem; padding: 1.2rem 1.4rem 1.3rem 1.25rem; color: var(--ink); background: var(--gold); }
.bite-orbit span { font: 900 clamp(3.7rem,7vw,6.5rem)/.78 var(--display); letter-spacing: -.09em; }
.bite-orbit small { font-size: .7rem; line-height: 1.25; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; }
.bite-caption { position: absolute; left: 0; bottom: 0; padding: 1.3rem 1.5rem 1.45rem; background: var(--ink); }
.bite-caption span { color: var(--gold); font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 850; }
.bite-caption p { margin: .45rem 0 0; font: 500 1.45rem/1.08 var(--serif); }

.protein { padding: clamp(5rem,10vw,10rem) clamp(1.25rem,7vw,7rem); background: linear-gradient(135deg,#f0b727 0%,#e77724 52%,#d83a62 100%); }
.protein-intro { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.65fr); column-gap: clamp(3rem,6vw,7rem); align-items: end; max-width: 1400px; margin: 0 auto clamp(2.75rem,4.5vw,4.5rem); }
.protein-intro .section-kicker { grid-column: 1/-1; color: var(--plum); }
.protein-intro h2 em { color: var(--plum); }
.protein h2 { font-size: clamp(3.1rem,5.7vw,6.15rem); line-height: .94; }
.protein-intro > p:last-child { max-width: 440px; margin: 0 0 .35rem; font-size: 1.08rem; line-height: 1.65; }
.protein-proof { display: grid; grid-template-columns: .9fr 1.1fr; max-width: 1400px; margin: auto; border-top: 2px solid rgba(36,0,14,.62); border-bottom: 2px solid rgba(36,0,14,.62); }
.protein-metrics { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; padding: clamp(2rem,3vw,3.25rem) clamp(2rem,4vw,4.5rem) clamp(2rem,3vw,3.25rem) 0; border-right: 1px solid rgba(36,0,14,.3); }
.protein-metric { display: flex; flex-direction: column; min-width: 0; }
.protein-metric + .protein-metric { margin-left: clamp(1.4rem,3vw,3.5rem); padding-left: clamp(1.4rem,3vw,3.5rem); border-left: 1px solid rgba(36,0,14,.3); }
.protein-metric > span,.protein-why-label { margin: 0; color: var(--plum); text-transform: uppercase; letter-spacing: .09em; font-size: .78rem; line-height: 1.4; font-weight: 850; }
.protein-metric strong { display: block; margin: 1.1rem 0 .45rem; color: var(--ink); font: 900 clamp(4.6rem,7vw,7.6rem)/.82 var(--display); letter-spacing: -.07em; }
.protein-metric p { max-width: 260px; margin: auto 0 0; line-height: 1.48; }
.protein-why { padding: clamp(2rem,3vw,3.25rem) 0 clamp(2rem,3vw,3.25rem) clamp(2rem,4vw,4.5rem); }
.protein-why-label { margin-bottom: 1.15rem; }
.protein-reason { display: grid; grid-template-columns: 42px 1fr; gap: 1.1rem; padding: 1.25rem 0; border-top: 1px solid rgba(36,0,14,.3); }
.protein-reason > span { color: var(--plum); font-size: .78rem; font-weight: 850; }
.protein-reason h3 { margin: 0; font: 900 clamp(1.55rem,2.2vw,2.25rem)/1.04 var(--display); letter-spacing: -.035em; }
.protein-reason p { max-width: 540px; margin: .7rem 0 0; line-height: 1.52; }
.nutrition-note { max-width: 1400px; margin: 1.35rem auto 0; font-size: .78rem; line-height: 1.5; color: rgba(37,2,14,.78); }

.crave { color: var(--white); background: var(--ink); padding: clamp(5rem,9vw,9rem) clamp(1.25rem,5vw,5rem); }
.crave-heading { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 3rem; max-width: 1400px; margin: 0 auto clamp(3rem,6vw,6rem); }
.crave-heading .section-kicker { grid-column: 1/-1; }
.crave-heading h2 { font-size: clamp(3.2rem,6.5vw,7rem); }
.crave-heading h2 em { color: var(--raspberry); }
.crave-heading > p:last-child { margin: 0 0 .6rem; color: var(--citron); font: italic 700 clamp(1.4rem,2.4vw,2.3rem) var(--serif); }
.crave-grid { display: grid; grid-template-columns: minmax(320px,.82fr) minmax(0,1.18fr); grid-template-rows: 1fr 1fr; gap: 1rem; max-width: 1400px; min-height: 920px; margin: auto; }
.crave-shot { position: relative; min-height: 0; margin: 0; overflow: hidden; border-radius: 0; background: var(--cocoa); }
.crave-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.crave-shot:hover img { transform: scale(1.025); }
.crave-shot figcaption { position: absolute; left: 1.15rem; right: 1.15rem; bottom: 1.15rem; display: flex; align-items: center; gap: .7rem; width: fit-content; max-width: calc(100% - 2.3rem); padding: .72rem 1rem; border: 1px solid rgba(255,255,255,.38); border-radius: 999px; color: var(--white); background: rgba(36,0,14,.86); backdrop-filter: blur(12px); font-size: .82rem; letter-spacing: .025em; font-weight: 750; }
.crave-shot figcaption span { color: var(--citron); font-size: .74rem; letter-spacing: .08em; font-weight: 850; }
.crave-pour { grid-row: 1/3; }
.crave-center,.crave-flavors { min-height: 0; }

.flavors { color: var(--white); background: var(--cocoa); padding: clamp(5rem,9vw,9rem) clamp(1.25rem,5vw,5rem); }
.flavor-intro { display: grid; grid-template-columns: 1fr minmax(260px,440px); gap: 4rem; align-items: end; max-width: 1400px; margin: 0 auto clamp(4rem,7vw,7rem); }
.flavor-intro > p { color: rgba(255,255,255,.88); font-size: 1.08rem; }
.flavor-grid { display: grid; gap: clamp(4rem,8vw,9rem); max-width: 1400px; margin: auto; }
.flavor-card { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); min-height: 680px; border-radius: 0; overflow: hidden; box-shadow: 18px 18px 0 rgba(239,91,18,.7); }
.flavor-card:nth-child(even) { grid-template-columns: minmax(300px,.75fr) minmax(0,1.25fr); }
.flavor-card:nth-child(even) .flavor-photo { order: 2; }
.flavor-photo { min-height: 600px; overflow: hidden; }
.flavor-photo img { height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.flavor-card:hover .flavor-photo img { transform: scale(1.025); }
.flavor-details { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(2rem,5vw,5rem); }
.flavor-number { margin-bottom: 1.2rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 850; }
.flavor-details h3 { margin: 0; font: 900 clamp(2.8rem,5vw,5.8rem)/.92 var(--display); letter-spacing: -.042em; }
.flavor-card.flavor-watermelon { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.flavor-watermelon .flavor-details h3 { font-size: clamp(2.8rem,5vw,4.6rem); }
.flavor-details p { max-width: 410px; margin: 1.6rem 0; font-size: 1.04rem; }
.protein-pill { display: inline-block; border: 1px solid currentColor; border-radius: 999px; padding: .65rem .95rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 850; }
.flavor-brownie { background: #591026; }
.flavor-peanut { color: var(--ink); background: var(--gold); }
.flavor-strawberry { background: #d92862; }
.flavor-watermelon { color: var(--ink); background: #c7d92f; }

.making { display: grid; grid-template-columns: 1.25fr .75fr; min-height: 760px; background: var(--cream); }
.making-media { min-height: 620px; overflow: hidden; }
.making-media img { height: 100%; object-fit: cover; }
.making-copy { align-self: center; padding: clamp(4rem,6vw,7rem); }
.making-copy h2 em { color: var(--raspberry); }
.making-copy > p:not(.section-kicker):not(.making-note) { font-size: 1.08rem; }
.making-note { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid rgba(37,2,14,.22); font: italic 700 1.5rem var(--serif); color: var(--raspberry); }

.story { display: block; margin-top: clamp(3.5rem,7vw,7rem); background: linear-gradient(135deg,var(--gold),#e5b58e); }
.story-layout { display: grid; grid-template-columns: minmax(180px,240px) minmax(0,62ch); align-items: start; gap: clamp(2rem,5vw,4rem); }
.story-image { width: 100%; max-width: 240px; margin: .4rem 0 0; }
.story-text { min-width: 0; }
.story-portrait { position: relative; width: 100%; margin: 0; padding: 8px 8px 10px; color: var(--ink); background: var(--paper); box-shadow: 8px 10px 0 rgba(226,35,99,.75); transform: rotate(-1deg); }
.story-portrait img { width: 100%; height: auto; aspect-ratio: 905/1738; object-fit: cover; }
.story-portrait figcaption { padding: .65rem .1rem .05rem; text-align: center; text-transform: uppercase; letter-spacing: .045em; font-size: .75rem; line-height: 1.4; font-weight: 850; }
.story-portrait figcaption span { display: block; white-space: nowrap; }
.story-content { max-width: 1200px; margin: 0 auto; padding: clamp(2.5rem,4.5vw,5rem); }
.story-content .section-kicker { color: var(--plum); }
.story h2 { max-width: 1000px; font-size: clamp(2.5rem,4vw,4rem); text-wrap: balance; }
.story-subhead { max-width: 650px; margin: .8rem 0 1.8rem; color: var(--plum); font: italic 700 clamp(1.75rem,2.5vw,2.6rem)/1.1 var(--serif); letter-spacing: -.025em; }
.story-opening { max-width: 630px; margin: 0 0 1.25rem; font: 800 clamp(1.08rem,1.25vw,1.18rem)/1.5 var(--sans); }
.story-content .story-copy { max-width: none; font-family: var(--sans); font-size: clamp(1.06rem,1.25vw,1.15rem); line-height: 1.72; font-weight: 475; }
.story-byline { margin: 1.8rem 0 0; color: var(--plum); font: 800 1rem/1.4 var(--sans); }
.signature { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(37,2,14,.25); text-transform: uppercase; font-size: .78rem; letter-spacing: .09em; font-weight: 850; }

.promise { position: relative; overflow: hidden; color: white; background: var(--ink); padding: clamp(5rem,10vw,10rem) clamp(1.25rem,8vw,8rem); display: grid; grid-template-columns: 1fr .8fr; gap: 8vw; }
.promise::before { content: ""; position: absolute; width: 45vw; aspect-ratio: 1; border-radius: 50%; left: -14vw; top: -12vw; background: radial-gradient(circle,rgba(184,60,100,.14),transparent 64%); border: 1px solid rgba(221,179,71,.16); box-shadow: 0 0 0 9vw rgba(184,60,100,.02),0 0 0 18vw rgba(221,179,71,.018); }
.promise-copy,.promise-list { position: relative; z-index: 1; }
.promise-copy > p:last-child { max-width: 570px; color: rgba(255,255,255,.86); font-size: 1.08rem; }
.promise-list { align-self: end; }
.promise-list div { display: grid; grid-template-columns: 48px 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.promise-list span { color: #c9607d; font-size: .8rem; font-weight: 800; }
.promise-list strong { font: 800 1.25rem var(--display); letter-spacing: -.03em; }

.contact { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: clamp(6rem,13vw,13rem) 1.25rem; background: linear-gradient(130deg,#d92862,#e15f3f 52%,#f0b727); }
.contact::before,.contact::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(1px); }
.contact::before { width: 34vw; aspect-ratio: 1; background: rgba(199,189,109,.52); left: -10vw; top: -12vw; }
.contact::after { width: 26vw; aspect-ratio: 1; background: rgba(100,17,62,.28); right: -5vw; bottom: -12vw; }
.contact .section-kicker { color: var(--ink); }
.contact h2 em { color: var(--plum); }
.contact-copy { max-width: 610px; margin: 2rem auto; font-size: 1.08rem; }

footer { background: var(--paper); padding: 3rem clamp(1.25rem,5vw,5rem); display: grid; grid-template-columns: .8fr 1.4fr .8fr; gap: 3rem; align-items: end; border-top: 1px solid rgba(37,2,14,.14); }
.footer-copy p { margin: .2rem 0; color: #654a53; font-size: .85rem; }
.footer-links { display: flex; justify-content: flex-end; gap: 1.5rem; }
.footer-links a { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 850; text-decoration: none; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1050px) {
  .protein-proof { grid-template-columns: 1fr; }
  .protein-metrics { padding-right: 0; border-right: 0; border-bottom: 1px solid rgba(36,0,14,.3); }
  .protein-why { padding-left: 0; }
  .flavor-card,.flavor-card:nth-child(even) { grid-template-columns: 1.1fr .9fr; }
}

@media (max-width: 820px) {
  .site-header { min-height: 76px; }
  .menu-button { display: grid; gap: 4px; }
  .menu-button span:not(.sr-only) { display: block; width: 25px; height: 2px; background: currentColor; }
  nav { display: none; position: absolute; top: 76px; left: 0; right: 0; background: rgba(37,2,14,.98); padding: 1.5rem; flex-direction: column; align-items: flex-start; }
  nav.open { display: flex; }
  .hero { min-height: 880px; align-items: end; }
  .hero-image { background-position: 61% center; }
  .hero-wash { background: linear-gradient(0deg,rgba(25,1,9,.97) 0%,rgba(25,1,9,.78) 53%,rgba(25,1,9,.12) 86%); }
  .hero-content { margin-left: 1.25rem; padding: 22rem 0 5.5rem; width: calc(100% - 2.5rem); }
  h1 { font-size: clamp(3.7rem,15vw,6.4rem); }
  .first-note { left: 1.25rem; right: 1.25rem; bottom: .8rem; }
  .difference,.protein-intro,.flavor-intro,.making,.story,.promise,footer { grid-template-columns: 1fr; }
  .difference { gap: 4rem; }
  .difference-visual { min-height: 540px; }
  .protein-intro { gap: 2rem; }
  .protein-intro .section-kicker { grid-column: auto; }
  .crave-heading { grid-template-columns: 1fr; gap: 1.25rem; }
  .crave-heading .section-kicker { grid-column: auto; }
  .crave-grid { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  .crave-pour { grid-row: auto; min-height: 680px; }
  .crave-center,.crave-flavors { min-height: 430px; }
  .flavor-intro { gap: 2rem; }
  .flavor-card,.flavor-card:nth-child(even) { grid-template-columns: 1fr; min-height: 0; }
  .flavor-card:nth-child(even) .flavor-photo { order: 0; }
  .flavor-photo { min-height: 630px; }
  .flavor-details { min-height: 420px; }
  .making-media { min-height: 560px; }
  .story-layout { grid-template-columns: minmax(0,1fr); gap: 2.5rem; }
  .story-image { width: min(100%,240px); margin: 0 auto; }
  .story-text { width: 100%; max-width: 62ch; margin-inline: auto; }
  .story-portrait { width: 100%; }
  .story-content { padding: 3rem 1.25rem; }
  .story-content .story-copy { font-size: 1.1rem; line-height: 1.74; font-weight: 500; }
  .promise { gap: 3rem; }
  footer { gap: 1.5rem; }
  .footer-links { justify-content: flex-start; }
}

@media (max-width: 540px) {
  .hero { min-height: 900px; }
  .hero-content { padding-top: 20rem; }
  .hero-copy { font-size: .98rem; margin-top: 1.5rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 1.15rem; }
  .hero-stats div { padding: .65rem .78rem; }
  .difference,.protein,.crave,.flavors { padding-left: 1rem; padding-right: 1rem; }
  .difference-visual { min-height: 460px; border-radius: 0; box-shadow: 9px 9px 0 var(--gold); }
  .bite-caption { left: 1.25rem; bottom: 1.25rem; }
  .protein-metrics { grid-template-columns: 1fr; }
  .protein-metric + .protein-metric { margin: 2rem 0 0; padding: 2rem 0 0; border-left: 0; border-top: 1px solid rgba(36,0,14,.3); }
  .protein-metric p { max-width: 330px; }
  .protein-reason { grid-template-columns: 34px 1fr; gap: .8rem; }
  .crave-pour { min-height: 560px; }
  .crave-center,.crave-flavors { min-height: 310px; }
  .crave-shot { border-radius: 0; }
  .flavor-card { border-radius: 0; box-shadow: 9px 9px 0 rgba(239,91,18,.7); }
  .flavor-photo { min-height: 480px; }
  .flavor-details { min-height: 370px; padding: 2rem 1.4rem; }
  .making-media { min-height: 440px; }
  .making-copy { padding: 4rem 1.25rem; }
  .story-portrait { width: 100%; box-shadow: 7px 8px 0 rgba(226,35,99,.75); }
  .story h2 { font-size: clamp(2.3rem,10vw,3rem); }
  .story-subhead { font-size: clamp(1.7rem,7.5vw,2.15rem); }
}

/* Keep the complete four-flavor composition visible on phones. */
@media (max-width: 767px) {
  .crave-flavors { min-height: 0; aspect-ratio: 1672 / 941; }
}