:root {
  --ink: #111713;
  --cream: #f4ecdf;
  --cream-2: #fbf5ea;
  --navy: #071d4a;
  --pink: #e89b9b;
  --header-h: 82px;
  --edge: clamp(22px, 3.2vw, 62px);
  --body-font: "Nunito Sans", "Avenir Next", Avenir, Arimo, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hand-font: "Gaegu", "Comic Neue", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--navy); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--ink);
  background: var(--navy);
  font-family: var(--body-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.site-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  padding: 0 var(--edge);
  color: #fff;
  pointer-events: none;
  transition: color .35s ease, background-color .35s ease, backdrop-filter .35s ease;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(to bottom, rgba(4, 12, 28, .32), rgba(4, 12, 28, 0));
  transition: opacity .35s ease;
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header[data-theme="dark"] { color: var(--ink); }
.site-header[data-theme="dark"]::before {
  background: linear-gradient(to bottom, rgba(244, 236, 223, .9), rgba(244, 236, 223, 0));
}
.site-header > * { pointer-events: auto; }

.brand {
  position: relative;
  justify-self: start;
  width: clamp(118px, 9.2vw, 170px);
  height: 42px;
}
.brand-logo {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  max-height: 38px;
  object-fit: contain;
  object-position: left center;
  transform: translateY(-50%);
  transition: opacity .3s ease;
}
.brand-logo--light { opacity: 1; }
.brand-logo--dark { opacity: 0; }
.site-header[data-theme="dark"] .brand-logo--light { opacity: 0; }
.site-header[data-theme="dark"] .brand-logo--dark { opacity: 1; }

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.35vw, 44px);
  justify-self: center;
}
.main-nav a {
  position: relative;
  padding: 9px 0;
  font-size: clamp(11px, .82vw, 14px);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: .86;
  transition: opacity .2s ease;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.main-nav a:hover,
.main-nav a.is-active { opacity: 1; }
.main-nav a:hover::after,
.main-nav a.is-active::after { transform: scaleX(1); }

.shop-button {
  justify-self: end;
  min-width: 112px;
  height: 38px;
  padding: 0 13px 0 17px;
  border: 1px solid currentColor;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--ink);
  background: rgba(249, 241, 225, .94);
  font-size: 12px;
  font-weight: 800;
  transition: transform .2s ease, background-color .25s ease, color .25s ease;
}
.shop-button svg { width: 16px; height: 16px; fill: currentColor; }
.shop-button:hover { transform: translateY(-2px); }
.site-header[data-theme="dark"] .shop-button { color: #fff; background: var(--ink); border-color: var(--ink); }

.menu-toggle { display: none; }

.experience { position: relative; width: 100%; }
.stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 580px;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
}
.scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.scene-bg {
  position: absolute;
  inset: -2%;
  z-index: 0;
  width: 104%;
  height: 104%;
  object-fit: cover;
  object-position: center;
}
.cream-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.5), transparent 34%),
    linear-gradient(112deg, #f7f0e4, #efe5d6 63%, #f8f2e8);
}
.motion {
  --x: 0vw;
  --y: 0vh;
  --s: 1;
  --r: 0deg;
  --o: 1;
  --b: 0px;
  position: absolute;
  opacity: var(--o);
  transform: translate3d(var(--x), var(--y), 0) scale(var(--s)) rotate(var(--r));
  transform-origin: center;
  filter: blur(var(--b));
  will-change: transform, opacity, filter;
}
.motion.centered {
  transform: translate3d(calc(-50% + var(--x)), calc(-50% + var(--y)), 0) scale(var(--s)) rotate(var(--r));
}
.asset-inner { width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }

@keyframes floatSlow {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}
@keyframes floatSlower {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -4px, 0); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}
@keyframes breatheSoft {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.006); }
}
@keyframes starDrift {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .9; }
  50% { transform: translate3d(8px, -5px, 0); opacity: 1; }
}
@keyframes sunPulse {
  0%, 100% { transform: scale(1); opacity: .95; }
  50% { transform: scale(1.018); opacity: 1; }
}
@keyframes portalBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
.float-slow { animation: floatSlow 5.6s ease-in-out infinite; }
.float-slower { animation: floatSlower 7.2s ease-in-out infinite; }
.breathe { animation: breathe 4.8s ease-in-out infinite; }
.breathe-soft { animation: breatheSoft 5.4s ease-in-out infinite; }
.drift-stars { animation: starDrift 11s ease-in-out infinite; }
.sun-pulse { animation: sunPulse 6.5s ease-in-out infinite; }
.portal-breathe { animation: portalBreathe 4.6s ease-in-out infinite; }

/* Narrative cards */
.story-card,
.product-card {
  z-index: 35;
  width: min(31vw, 470px);
  padding: clamp(24px, 2.25vw, 40px);
  border: 1px solid rgba(67, 49, 29, .09);
  border-radius: clamp(20px, 1.7vw, 28px);
  color: var(--ink);
  background: rgba(249, 242, 229, .96);
  box-shadow: 0 18px 54px rgba(31, 21, 11, .16), inset 0 0 0 1px rgba(255,255,255,.42);
  backdrop-filter: blur(8px);
}
.product-card { display: flex; flex-direction: column; }
.story-card::before,
.product-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(74, 52, 28, .035);
  border-radius: inherit;
  pointer-events: none;
}
.card-kicker {
  margin: 0 0 5px;
  font-size: clamp(10px, .68vw, 12px);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.story-card h1,
.story-card h2,
.product-card h2 {
  margin: 0 0 clamp(14px, 1.1vw, 20px);
  font-family: var(--hand-font);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: .89;
}
.story-card h1 { font-size: clamp(44px, 4.15vw, 72px); }
.story-card h1 span { font-size: .58em; font-weight: 400; }
.story-card h2,
.product-card h2 { font-size: clamp(52px, 4.35vw, 78px); }
.story-card p,
.product-card p {
  margin: 0 0 11px;
  font-size: clamp(13px, .95vw, 16px);
  line-height: 1.48;
}
.story-card strong { font-weight: 800; }
.card-cta {
  margin-top: 16px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.card-cta:hover { color: #fff; background: var(--ink); transform: translateY(-2px); }
.card-cta-dark { color: #fff; background: var(--ink); }
.card-cta-dark:hover { color: var(--ink); background: transparent; }
.text-link {
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: inherit;
  background: none;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.text-link span { display: inline-block; transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }
.badge-list {
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
}
.badge-list li {
  padding: 7px 10px;
  border: 1px solid rgba(17,23,19,.18);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

/* Scene 1 */
.night-stars { z-index: 2; left: -4vw; top: -8vh; width: 66vw; height: 76vh; }
.night-moon { z-index: 5; left: 86%; top: 18%; width: clamp(78px, 8.5vw, 150px); }
.night-city { z-index: 7; left: -7vw; bottom: -1.5vh; width: 116vw; }
.night-small-cloud { z-index: 8; left: 15%; top: 53%; width: 24vw; }
.night-cloud { z-index: 10; left: 59%; top: 59%; width: min(47vw, 800px); }
.night-sobber { z-index: 11; left: 59%; top: 48.5%; width: min(24vw, 410px); }
.intro-card { left: 5.2vw; top: 18vh; }
.scroll-cue {
  position: absolute;
  z-index: 60;
  left: 50%;
  bottom: 17px;
  padding: 0;
  border: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: rgba(255,255,255,.82);
  background: none;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transform: translateX(-50%);
}
.mouse { width: 17px; height: 27px; border: 1.2px solid currentColor; border-radius: 10px; position: relative; }
.mouse i { position: absolute; left: 50%; top: 5px; width: 2px; height: 5px; border-radius: 3px; background: currentColor; transform: translateX(-50%); animation: scrollDot 1.5s ease-in-out infinite; }
@keyframes scrollDot { 0% { opacity: 0; transform: translate(-50%,0); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,8px); } }

/* Scene 2 */
.dawn-city { z-index: 5; left: 0; bottom: -4vh; width: 100vw; }
.dawn-sun { z-index: 4; left: 85%; top: 82%; width: min(52vw, 900px); }
.dawn-small-cloud { z-index: 6; left: 15%; top: 52%; width: 22vw; }
.dawn-cloud { z-index: 9; left: 55%; top: 60%; width: min(39vw, 665px); }
.dawn-sobber { z-index: 12; left: 55%; top: 48%; width: min(16.5vw, 285px); }
.thought { z-index: 14; }
.thought-banana { left: 38%; top: 27%; width: min(10vw, 160px); }
.thought-mango { left: 65%; top: 24%; width: min(11.5vw, 185px); }
.thought-strawberry { left: 37%; top: 47%; width: min(10.5vw, 170px); }
.thought-coconut { left: 72%; top: 47%; width: min(11vw, 178px); }

/* Scene 3 */
.fall-horizon { z-index: 4; inset: 0; width: 100%; height: 100%; }
.fall-horizon .asset-inner { object-fit: cover; }
.falling-sobber { z-index: 18; left: 59%; top: 43%; width: min(15vw, 245px); }
#whoCard { left: 5.2vw; top: 17vh; }

/* Scene 4 */
.portal-vortex { z-index: 10; left: 50%; top: 39%; width: min(49vw, 820px); }
.portal-beam { z-index: 9; left: 50%; top: 64%; width: min(25vw, 420px); mix-blend-mode: screen; }
.portal-sobber-2d { z-index: 14; left: 50%; top: 27%; width: min(13vw, 215px); }
.portal-sobber-3d { z-index: 13; left: 50%; top: 73%; width: min(16vw, 270px); }
.portal-foliage { z-index: 30; top: -8vh; height: 116vh; }
.portal-foliage-left { left: -4vw; width: 36vw; }
.portal-foliage-right { right: -4vw; width: 38vw; }
.portal-foliage .asset-inner { object-fit: contain; }
.floating-leaves { z-index: 25; left: 50%; top: 51%; width: 61vw; }
.loose-leaf { z-index: 28; width: 7vw; }
.loose-leaf-1 { left: 25%; top: 36%; }
.loose-leaf-2 { left: 76%; top: 31%; }
.loose-leaf-3 { left: 68%; top: 72%; }

/* Scene 5 */
.scene-fruit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11,37,13,.12), transparent 25%, transparent 72%, rgba(11,37,13,.08));
}
.fruit-vignette { z-index: 16; }
.fruit-mango { left: 57%; top: 54%; width: min(45vw, 760px); }
.fruit-banana { left: 56%; top: 55%; width: min(38vw, 640px); }
.fruit-coconut { left: 57%; top: 53%; width: min(40vw, 680px); }
.fruit-strawberry { left: 64%; top: 62%; width: min(51vw, 860px); }
#howCard { left: 5.2vw; top: 17vh; }

/* Scene 6 */
.process-flow {
  position: absolute;
  z-index: 12;
  left: 9vw;
  right: 9vw;
  top: calc(var(--header-h) + 2.5vh);
  height: 34vh;
  display: grid;
  grid-template-columns: 1fr .2fr 1fr .2fr 1fr .2fr 1fr;
  align-items: start;
  gap: 1vw;
}
.process-step {
  opacity: 0;
  transform: translateY(24px) scale(.96);
  will-change: opacity, transform;
  text-align: center;
}
.process-step span {
  display: block;
  min-height: 24px;
  margin-bottom: 2px;
  font-size: clamp(12px, .9vw, 16px);
  font-weight: 700;
}
.process-step img { width: 100%; height: 25vh; object-fit: contain; }
.process-arrow {
  padding-top: 4px;
  opacity: 0;
  color: rgba(17,23,19,.72);
  font-family: var(--hand-font);
  font-size: clamp(25px, 2.2vw, 40px);
  text-align: center;
  will-change: opacity;
}
.process-lab { position: absolute; z-index: 10; inset: 37vh 0 0; }
.scientist { z-index: 18; left: 5vw; bottom: 3.2vh; width: min(18vw, 300px); }
.process-board { z-index: 14; left: 25vw; bottom: 6.2vh; width: min(19vw, 320px); }
.freeze-dryer { z-index: 13; left: 49vw; bottom: 6vh; width: min(38vw, 650px); }
.freeze-dryer::after {
  content: "";
  position: absolute;
  left: 14%; top: 12%; width: 61%; height: 62%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 63%);
  pointer-events: none;
}
.process-plant { z-index: 15; right: 2vw; bottom: 5.7vh; width: min(8vw, 128px); }

/* Scenes 7 + 8 */
.product-card {
  left: 4.4vw;
  top: 13.5vh;
  min-height: 72vh;
  width: min(32vw, 490px);
}
.product-card-intro { max-width: 28ch; }
.process-list,
.flavor-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.process-list { display: grid; flex: 1; align-content: space-evenly; gap: clamp(11px, 1.5vh, 18px); }
.process-list li { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; }
.process-list strong { display: block; font-size: clamp(13px, .98vw, 16px); }
.process-list small { display: block; margin-top: 2px; font-size: clamp(10px, .72vw, 12px); line-height: 1.35; }
.line-icon { width: 38px; height: 38px; display: grid; place-items: center; }
.line-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.flavor-list { display: grid; flex: 1; align-content: center; gap: 16px; }
.flavor-list li { padding-left: 21px; position: relative; font-size: clamp(12px, .9vw, 15px); line-height: 1.35; }
.flavor-list li::before { content: "○"; position: absolute; left: 0; top: -1px; font-family: var(--hand-font); font-size: 21px; }
.flavor-list span { font-weight: 800; }
.product-card-dipped .text-link { margin-top: 24px; }

.product-grid {
  z-index: 16;
  left: 39vw;
  top: 12vh;
  width: 58vw;
  height: 80vh;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  column-gap: 1.4vw;
  row-gap: 0;
}
.product-slot { position: relative; min-width: 0; min-height: 0; }
.product-pack {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center bottom;
  filter: drop-shadow(0 17px 16px rgba(37,25,13,.13));
  will-change: opacity, transform, filter;
}
.dipped-pack { opacity: 0; }

/* Scene 9 */
.scene-return .scene-bg { object-position: center top; }
.return-side-cloud { z-index: 5; left: 14%; top: 25%; width: 27vw; }
.return-purple-cloud { z-index: 5; left: 92%; top: 62%; width: 38vw; }
.return-cloud { z-index: 10; left: 64%; top: 42%; width: min(45vw, 760px); }
.return-sobber { z-index: 14; left: 57%; top: 32%; width: min(16vw, 270px); }
.return-pack { z-index: 15; top: 35%; width: min(9.2vw, 155px); }
.return-pack-banana { left: 69%; }
.return-pack-strawberry { left: 78%; }
.final-card { left: 5.2vw; top: 14vh; width: min(29vw, 440px); }
.final-card h2 { font-size: clamp(58px, 5.2vw, 92px); }
.hand-line { display: block; width: 66px; height: 3px; margin: 13px 0 19px; border-radius: 3px; background: var(--ink); }

.contact-footer {
  z-index: 60;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(250px, 34vh, 330px);
  padding: 26px var(--edge) 16px;
  display: grid;
  grid-template-columns: 1fr minmax(250px, 29vw);
  grid-template-rows: 1fr auto;
  column-gap: 34px;
  color: var(--ink);
  background: rgba(245, 234, 216, .985);
  border-top: 1px solid rgba(38,27,16,.11);
  box-shadow: 0 -18px 60px rgba(5,13,26,.18);
}
.footer-main { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(200px, 1fr); grid-template-rows: auto 1fr; column-gap: 38px; }
.footer-brand img { width: clamp(130px, 11vw, 180px); max-height: 42px; object-fit: contain; object-position: left; }
.footer-brand p { margin: 5px 0 0; font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.footer-statement { align-self: start; display: flex; gap: 9px; align-items: center; padding-top: 4px; font-size: clamp(13px, 1vw, 17px); letter-spacing: .04em; }
.footer-statement span { font-size: 18px; }
.footer-benefits { grid-column: 1 / -1; align-self: end; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding-top: 17px; border-top: 1px solid rgba(17,23,19,.12); }
.footer-benefits div { text-align: center; }
.footer-benefits i { display: block; margin-bottom: 5px; font-family: var(--hand-font); font-size: 25px; font-style: normal; line-height: 1; }
.footer-benefits span { font-size: 8px; line-height: 1.25; font-weight: 800; text-transform: uppercase; }
.footer-contact { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: start; padding-left: 24px; border-left: 1px solid rgba(17,23,19,.12); overflow: visible; }
.footer-contact nav { display: grid; gap: 9px; padding-top: 2px; }
.footer-contact nav a,
.footer-contact nav button { width: max-content; padding: 0; border: 0; display: flex; gap: 8px; align-items: center; background: none; font-size: 11px; font-weight: 700; cursor: pointer; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-yellow { background: #dba62d; }
.dot-red { background: #b75642; }
.dot-green { background: #456d3a; }
.social-links { z-index: 3; display: flex; gap: 6px; }
.social-links a { width: 27px; height: 27px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: 8px; font-weight: 900; }
.footer-character { position: absolute; right: -1vw; bottom: -6px; width: min(12vw, 190px); max-height: 215px; object-fit: contain; object-position: bottom; }
.copyright { grid-column: 1 / -1; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid rgba(17,23,19,.08); text-align: center; font-size: 7px; letter-spacing: .02em; }

.edge-vignette {
  position: absolute;
  z-index: 80;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 90px rgba(4,9,18,.12);
  opacity: .35;
}
.chapter-indicator {
  position: absolute;
  z-index: 90;
  right: 13px;
  top: 50%;
  width: 2px;
  height: 84px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,.22);
  transform: translateY(-50%);
  transition: background-color .3s ease;
}
.chapter-indicator span { display: block; width: 100%; height: 100%; transform-origin: top; background: currentColor; transform: scaleY(0); }
.site-header[data-theme="dark"] ~ .experience .chapter-indicator { background: rgba(17,23,19,.14); }

@media (max-width: 1100px) {
  :root { --header-h: 72px; }
  .site-header { grid-template-columns: 145px 1fr 120px; }
  .main-nav { gap: 18px; }
  .main-nav a { font-size: 10.5px; }
  .story-card, .product-card { width: min(34vw, 420px); padding: 25px; }
  .product-grid { left: 41vw; width: 57vw; }
  .process-flow { left: 5vw; right: 5vw; }
  .freeze-dryer { left: 47vw; width: 40vw; }
}

@media (max-width: 820px) {
  :root { --header-h: 66px; --edge: 18px; }
  .stage { min-height: 520px; }
  .site-header { grid-template-columns: 1fr auto auto; gap: 10px; }
  .brand { width: 112px; height: 36px; }
  .shop-button { min-width: 96px; height: 34px; padding: 0 11px 0 14px; font-size: 10px; }
  .shop-button svg { width: 14px; }
  .menu-toggle {
    position: relative;
    display: block;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    cursor: pointer;
  }
  .menu-toggle span { position: absolute; left: 10px; width: 16px; height: 1.5px; background: currentColor; transition: transform .25s ease, top .25s ease; }
  .menu-toggle span:first-child { top: 14px; }
  .menu-toggle span:last-child { top: 21px; }
  .menu-toggle[aria-expanded="true"] span:first-child { top: 18px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { top: 18px; transform: rotate(-45deg); }
  .main-nav {
    position: fixed;
    top: 58px;
    right: 14px;
    width: min(280px, calc(100vw - 28px));
    padding: 18px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    display: grid;
    gap: 2px;
    color: var(--ink);
    background: rgba(249,242,229,.98);
    box-shadow: 0 16px 50px rgba(5,12,25,.28);
    transform: translateY(-12px) scale(.98);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
  .main-nav a { padding: 11px 8px; font-size: 13px; }
  .main-nav a::after { left: 8px; right: auto; width: 36px; }

  .story-card,
  .product-card {
    width: min(88vw, 440px);
    padding: 21px 22px;
    border-radius: 20px;
  }
  .story-card h1 { font-size: clamp(43px, 12vw, 61px); }
  .story-card h2, .product-card h2 { font-size: clamp(48px, 13vw, 66px); }
  .story-card p, .product-card p { font-size: 12px; line-height: 1.42; }
  .card-cta { min-height: 40px; margin-top: 11px; font-size: 11px; }

  .night-stars { width: 110vw; height: 70vh; left: -18vw; }
  .night-moon { left: 82%; top: 17%; width: 18vw; }
  .night-city { left: -22vw; width: 150vw; bottom: 0; }
  .night-small-cloud { left: 12%; top: 48%; width: 40vw; }
  .night-cloud { left: 56%; top: 49%; width: min(82vw, 620px); }
  .night-sobber { left: 56%; top: 40%; width: min(43vw, 325px); }
  .intro-card { left: 6vw; top: auto; bottom: 6vh; width: min(62vw, 330px); padding: 18px; }
  .intro-card h1 { font-size: clamp(34px, 8.8vw, 48px); }
  .scroll-cue { display: none; }

  .dawn-city { width: 130vw; left: -15vw; bottom: -1vh; }
  .dawn-sun { left: 85%; top: 81%; width: 86vw; }
  .dawn-small-cloud { left: 12%; top: 48%; width: 42vw; }
  .dawn-cloud { left: 52%; top: 57%; width: 76vw; }
  .dawn-sobber { left: 52%; top: 43%; width: 32vw; }
  .thought-banana { left: 28%; top: 23%; width: 19vw; }
  .thought-mango { left: 67%; top: 21%; width: 22vw; }
  .thought-strawberry { left: 25%; top: 40%; width: 20vw; }
  .thought-coconut { left: 77%; top: 41%; width: 21vw; }

  .falling-sobber { left: 63%; top: 40%; width: 27vw; }
  #whoCard, #howCard { left: 6vw; top: auto; bottom: 5vh; width: min(72vw, 370px); }

  .portal-vortex { top: 39%; width: 88vw; }
  .portal-beam { top: 64%; width: 48vw; }
  .portal-sobber-2d { top: 26%; width: 25vw; }
  .portal-sobber-3d { top: 72%; width: 30vw; }
  .portal-foliage-left { left: -18vw; width: 61vw; }
  .portal-foliage-right { right: -19vw; width: 63vw; }
  .floating-leaves { width: 102vw; }
  .loose-leaf { width: 13vw; }

  .fruit-mango { left: 56%; top: 46%; width: 83vw; }
  .fruit-banana { left: 55%; top: 46%; width: 72vw; }
  .fruit-coconut { left: 57%; top: 43%; width: 74vw; }
  .fruit-strawberry { left: 62%; top: 52%; width: 100vw; }
  #howCard { width: min(73vw, 360px); }
  #howCard .badge-list { gap: 4px; margin-top: 11px; }
  #howCard .badge-list li { padding: 5px 8px; font-size: 8px; }

  .process-flow { left: 2vw; right: 2vw; top: 74px; height: 31vh; gap: 0; }
  .process-step span { min-height: 18px; font-size: 9px; }
  .process-step img { height: 23vh; }
  .process-arrow { padding-top: 0; font-size: 22px; }
  .process-lab { inset: 31vh 0 0; }
  .scientist { left: -2vw; bottom: 10vh; width: 39vw; }
  .process-board { left: 24vw; bottom: 22vh; width: 42vw; }
  .freeze-dryer { left: 25vw; bottom: 9vh; width: 76vw; }
  .process-plant { right: -3vw; bottom: 9vh; width: 16vw; }

  .product-card { left: 5vw; top: 10vh; width: 90vw; min-height: 37vh; padding: 18px 20px; }
  .product-card h2 { margin-bottom: 7px; font-size: 50px; }
  .product-card-intro { margin-bottom: 6px !important; }
  .process-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px 10px; margin-top: 8px; }
  .process-list li { grid-template-columns: 28px 1fr; gap: 6px; }
  .line-icon { width: 26px; height: 26px; }
  .line-icon svg { width: 24px; height: 24px; }
  .process-list strong { font-size: 10px; }
  .process-list small { display: none; }
  .product-card-dipped { min-height: 34vh; }
  .flavor-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px 11px; margin-top: 8px; }
  .flavor-list li { padding-left: 14px; font-size: 9.5px; }
  .flavor-list li::before { font-size: 15px; }
  .product-card-dipped .text-link { margin-top: 11px; font-size: 10px; }
  .product-grid { left: 2vw; top: 45vh; width: 96vw; height: 53vh; column-gap: 0; row-gap: -2vh; }
  .product-pack { filter: drop-shadow(0 10px 10px rgba(37,25,13,.12)); }

  .return-side-cloud { left: 12%; top: 21%; width: 49vw; }
  .return-purple-cloud { left: 92%; top: 55%; width: 65vw; }
  .return-cloud { left: 61%; top: 34%; width: 83vw; }
  .return-sobber { left: 52%; top: 23%; width: 31vw; }
  .return-pack { top: 26%; width: 18vw; }
  .return-pack-banana { left: 68%; }
  .return-pack-strawberry { left: 84%; }
  .final-card { left: 5vw; top: auto; bottom: 7vh; width: min(68vw, 340px); padding: 18px; }
  .final-card h2 { font-size: clamp(46px, 12vw, 62px); }
  .final-card p { max-width: 29ch; }

  .contact-footer {
    height: 56vh;
    min-height: 390px;
    padding: 20px 18px 12px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px;
    overflow: hidden;
  }
  .footer-main { grid-template-columns: .78fr 1.22fr; column-gap: 15px; }
  .footer-brand img { width: 112px; }
  .footer-brand p { font-size: 7px; }
  .footer-statement { font-size: 11px; }
  .footer-benefits { gap: 4px; padding-top: 10px; }
  .footer-benefits i { font-size: 19px; margin-bottom: 2px; }
  .footer-benefits span { font-size: 6px; }
  .footer-contact { min-height: 80px; padding: 10px 120px 0 0; border-left: 0; border-top: 1px solid rgba(17,23,19,.1); grid-template-columns: 1fr auto; }
  .footer-contact nav { grid-template-columns: repeat(3, auto); gap: 12px; }
  .footer-contact nav a, .footer-contact nav button { font-size: 9px; }
  .footer-character { right: -8px; bottom: -17px; width: 128px; }
  .social-links { position: absolute; left: 0; bottom: 1px; }
  .copyright { margin: 0; padding-top: 6px; font-size: 6px; }
  .chapter-indicator { display: none; }
}

@media (max-width: 520px) {
  .shop-button span { display: none; }
  .shop-button { min-width: 36px; width: 36px; padding: 0; }
  .site-header { grid-template-columns: 1fr auto auto; }
  .intro-card { width: 74vw; }
  #whoCard, #howCard { width: 82vw; }
  #whoCard p { margin-bottom: 7px; }
  .product-card { left: 4vw; width: 92vw; }
  .product-grid { top: 44vh; height: 54vh; }
  .final-card { width: 78vw; }
  .footer-benefits span { font-size: 5.5px; }
}

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

.story-card button,
.story-card a,
.product-card button,
.product-card a,
.contact-footer button,
.contact-footer a { pointer-events: auto; }

.contact-details {
  position: absolute;
  left: 24px;
  bottom: 38px;
  display: grid;
  gap: 2px;
  font-size: 8px;
  font-weight: 700;
}
.contact-details a:hover { text-decoration: underline; }
@media (max-width: 820px) {
  .contact-details { left: 0; bottom: 32px; font-size: 7px; }
}

/* Desktop correction pass — preserves the existing responsive rules. */
@media (min-width: 821px) {
  .site-header {
    grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
  }
  .brand {
    width: clamp(170px, 11.8vw, 220px);
    height: 54px;
  }
  .brand-logo { max-height: 49px; }
  .main-nav { gap: clamp(28px, 3vw, 56px); }
  .main-nav a {
    font-family: var(--hand-font);
    font-size: clamp(16px, 1.25vw, 21px);
    font-weight: 700;
    letter-spacing: 0;
    opacity: .94;
  }
  .shop-button {
    min-width: 154px;
    height: 48px;
    padding: 0 18px 0 23px;
    gap: 11px;
    font-family: var(--hand-font);
    font-size: 18px;
    font-weight: 700;
  }
  .shop-button svg { width: 19px; height: 19px; }

  .site-header.is-panel::before {
    opacity: 1;
    background: rgba(249, 244, 235, .975);
    border-bottom: 1px solid rgba(17,23,19,.08);
    box-shadow: 0 5px 18px rgba(33,24,15,.06);
  }
  .site-header.is-final {
    top: 18px;
    left: 20px;
    width: calc(100% - 40px);
    height: 70px;
    padding-inline: 34px;
  }
  .site-header.is-final::before {
    opacity: 1;
    border: 1px solid rgba(17,23,19,.07);
    border-radius: 24px;
    background: rgba(246, 224, 191, .97);
    box-shadow: 0 12px 28px rgba(4,11,25,.14);
  }

  .story-card,
  .product-card {
    font-family: var(--hand-font);
    background: rgba(249, 242, 229, .985);
  }
  .story-card h1,
  .story-card h2,
  .product-card h2 { font-weight: 700; }
  .story-card p,
  .product-card p {
    font-size: clamp(18px, 1.28vw, 23px);
    line-height: 1.28;
  }
  .story-card strong { font-size: clamp(18px, 1.28vw, 23px); }
  .story-card .text-link,
  .story-card .card-cta,
  .product-card .text-link {
    font-family: var(--hand-font);
    font-size: clamp(17px, 1.2vw, 21px);
  }
  .story-card .hand-line { margin: 14px 0 20px; }

  /* 1. Cleaner night composition: no foreground cloud or detached star overlay. */
  .night-stars,
  .night-small-cloud { display: none; }
  .night-moon { left: 87%; top: 19%; width: clamp(90px, 8vw, 145px); }
  .night-city { left: -4vw; width: 108vw; bottom: -1vh; }
  .night-cloud { left: 63%; top: 59%; width: min(51vw, 865px); }
  .night-sobber { left: 63%; top: 47.5%; width: min(26vw, 430px); }
  .intro-card {
    left: 5.2vw;
    top: 17vh;
    width: min(31.5vw, 505px);
    padding: clamp(30px, 2.45vw, 43px);
  }
  .intro-card h1 { font-size: clamp(60px, 5vw, 88px); }
  .intro-card h1 span { display: inline-block; margin-top: 9px; font-size: .53em; }
  .intro-card .card-cta {
    min-width: 195px;
    min-height: 52px;
    margin-top: 20px;
    color: #fff;
    background: var(--ink);
  }

  /* 3. Dream bubbles balanced around the meditating Sobber. */
  .dawn-small-cloud { display: none; }
  .dawn-city { left: -2vw; width: 104vw; bottom: -2vh; }
  .dawn-cloud { left: 56%; top: 61%; width: min(43vw, 715px); }
  .dawn-sobber { left: 56%; top: 48%; width: min(17.5vw, 300px); }
  .thought-banana { left: 41%; top: 27%; width: min(10.5vw, 176px); }
  .thought-mango { left: 65%; top: 25%; width: min(11vw, 184px); }
  .thought-strawberry { left: 39%; top: 47%; width: min(10.5vw, 176px); }
  .thought-coconut { left: 71%; top: 47%; width: min(11vw, 184px); }

  /* 4. The fall reads as one continuous city-to-jungle descent. */
  .scene-fall .scene-bg,
  .fall-horizon {
    inset: -7%;
    width: 114%;
    height: 114%;
  }
  .falling-sobber { left: 61%; top: 41%; width: min(16vw, 260px); }
  #whoCard {
    left: 5.2vw;
    top: 17vh;
    width: min(31vw, 500px);
    padding: clamp(30px, 2.35vw, 42px);
  }
  #whoCard h2 { font-size: clamp(66px, 5.35vw, 92px); }

  /* 5–6. The portal has a back and front lip, so it can swallow the 2D figure. */
  .portal-vortex { left: 50%; top: 36%; width: min(52vw, 875px); }
  .portal-vortex-back { z-index: 10; }
  .portal-vortex-front { z-index: 18; pointer-events: none; }
  .portal-beam { z-index: 8; left: 50%; top: 61%; width: min(28vw, 470px); }
  .portal-sobber-2d { z-index: 14; left: 50%; top: 25%; width: min(14vw, 230px); }
  .portal-sobber-3d { z-index: 14; left: 50%; top: 42%; width: min(17vw, 285px); }

  /* 7. All four fruit moments coexist; the dotted line makes the single journey legible. */
  .fruit-route {
    z-index: 8;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .42;
    pointer-events: none;
  }
  .fruit-route path {
    fill: none;
    stroke: rgba(248,239,212,.92);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 4 17;
    filter: drop-shadow(0 1px 1px rgba(37,48,25,.24));
  }
  .fruit-mango { left: 18%; top: 55%; width: min(26vw, 430px); }
  .fruit-banana { left: 41%; top: 58%; width: min(22vw, 365px); }
  .fruit-coconut { left: 65%; top: 52%; width: min(23vw, 390px); }
  .fruit-strawberry { left: 86%; top: 63%; width: min(30vw, 505px); }

  /* 8. How we make it moves to the process scene; laboratory props are intentionally gone. */
  .scene-process .how-card {
    left: 4.8vw;
    top: 14.5vh;
    width: min(31vw, 500px);
    min-height: 72vh;
    padding: clamp(31px, 2.5vw, 44px);
  }
  .scene-process .how-card h2 { font-size: clamp(67px, 5.4vw, 94px); }
  .how-icons {
    margin: auto 0 0;
    padding: 20px 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
    list-style: none;
  }
  .how-icons li { text-align: center; }
  .how-icons i {
    display: block;
    min-height: 39px;
    font-family: var(--hand-font);
    font-size: 39px;
    font-style: normal;
    line-height: 1;
  }
  .how-icons span { font-size: clamp(12px, .88vw, 15px); line-height: 1.05; }
  .process-flow {
    left: 39vw;
    right: 4vw;
    top: 19vh;
    height: 62vh;
    align-items: center;
    gap: .6vw;
  }
  .process-step span {
    min-height: 34px;
    font-family: var(--hand-font);
    font-size: clamp(17px, 1.3vw, 22px);
  }
  .process-step img { height: 38vh; }
  .process-arrow { padding-top: 0; font-size: clamp(30px, 2.8vw, 48px); }

  /* 9. Product scenes recover the stronger approved card/menu balance. */
  .product-card {
    left: 4.8vw;
    top: 13.5vh;
    width: min(34vw, 535px);
    min-height: 73vh;
    padding: clamp(30px, 2.35vw, 42px);
  }
  .product-card h2 { font-size: clamp(72px, 5.8vw, 102px); }
  .product-card-intro { max-width: 24ch; }
  .process-list { gap: clamp(13px, 1.6vh, 20px); }
  .process-list li { grid-template-columns: 54px 1fr; gap: 15px; }
  .line-icon { width: 49px; height: 49px; }
  .line-icon svg { width: 43px; height: 43px; }
  .process-list strong { font-family: var(--hand-font); font-size: clamp(19px, 1.38vw, 24px); }
  .process-list small { font-family: var(--hand-font); font-size: clamp(15px, 1.04vw, 18px); line-height: 1.18; }
  .flavor-list { gap: clamp(17px, 2vh, 25px); }
  .flavor-list li { padding-left: 38px; font-family: var(--hand-font); font-size: clamp(19px, 1.43vw, 25px); line-height: 1.18; }
  .flavor-list li::before { font-size: 30px; }
  .product-grid { left: 41.5vw; top: 12.5vh; width: 55vw; height: 80vh; }

  /* Final section: centered hero and the cream floating navigation from the approved mockup. */
  .return-side-cloud { display: none; }
  .return-purple-cloud { left: 94%; top: 58%; width: 30vw; opacity: .72; }
  .return-cloud { left: 61%; top: 41%; width: min(50vw, 835px); }
  .return-sobber { left: 52%; top: 31%; width: min(18vw, 300px); }
  .return-pack { top: 35%; width: min(9.7vw, 162px); }
  .return-pack-banana { left: 68%; }
  .return-pack-strawberry { left: 78%; }
  .final-card {
    left: 5.2vw;
    top: 15vh;
    width: min(31vw, 500px);
    padding: clamp(30px, 2.4vw, 43px);
  }
  .final-card h2 { font-size: clamp(68px, 5.55vw, 96px); }
  .final-card .card-cta { min-width: 155px; min-height: 50px; }
  .contact-footer {
    height: clamp(270px, 36vh, 350px);
    padding-top: 28px;
  }
  .footer-brand img { width: clamp(155px, 12.5vw, 205px); max-height: 52px; }
  .footer-brand p { font-size: 10px; }
  .footer-statement { font-family: var(--hand-font); font-size: clamp(18px, 1.35vw, 23px); }
  .footer-benefits span { font-size: 9px; }
  .footer-contact nav a,
  .footer-contact nav button { font-family: var(--hand-font); font-size: 16px; }
  .contact-details { font-size: 10px; }
  .footer-character { width: min(14vw, 220px); max-height: 245px; }
}

@media (min-width: 821px) {
  .brand { height: 62px; }
  .brand-logo { max-height: 58px; }
  .scene-fall .scene-bg,
  .fall-horizon {
    inset: -20% -15%;
    width: 130%;
    height: 140%;
  }
}

@media (min-width: 821px) {
  .fall-horizon { display: none; }
}

@media (min-width: 821px) {
  .scene-fall .scene-bg {
    top: -20%;
    left: -20%;
    right: auto;
    bottom: auto;
    width: 140%;
    height: 140%;
  }
}

@media (min-width: 821px) {
  .scene-fall .scene-bg {
    max-width: none;
    width: 140vw;
    height: 140vh;
  }
}

/* Desktop refinement pass — July 28 feedback only. */
.global-scroll-cue { display: none; }

@media (min-width: 821px) {
  .scene .scene-bg {
    top: -10vh;
    left: -10vw;
    right: auto;
    bottom: auto;
    width: 120vw;
    height: 120vh;
    max-width: none;
  }
  .scene-night .scene-bg,
  .scene-dawn .scene-bg,
  .scene-portal .scene-bg,
  .scene-fruit .scene-bg,
  .scene-return .scene-bg { object-position: center; }

  .scroll-cue { display: none; }
  .global-scroll-cue {
    position: absolute;
    z-index: 96;
    left: 50%;
    bottom: 13px;
    display: grid;
    justify-items: center;
    gap: 4px;
    color: rgba(255,255,255,.84);
    font-family: var(--body-font);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    pointer-events: none;
    transform: translateX(-50%);
    transition: color .25s ease, opacity .25s ease;
  }
  .global-scroll-cue.is-dark { color: rgba(17,23,19,.72); }
  .global-scroll-cue.is-ending { opacity: 0; }

  .night-city { left: -6vw; bottom: -8vh; width: 112vw; }
  .dawn-city { left: -5vw; bottom: -9vh; width: 110vw; }

  .intro-card { width: min(28.5vw, 455px); padding: clamp(28px, 2.1vw, 38px); }
  .intro-card strong { display: block; }
  .intro-card .card-cta { display: flex; width: max-content; margin-top: 22px; }
  #whoCard { width: min(27.5vw, 440px); padding: clamp(27px, 2.05vw, 37px); }
  #whoCard h2 { font-size: clamp(61px, 4.8vw, 82px); }
  #whoCard p { margin-bottom: 9px; }

  .dawn-cloud { left: 50%; top: 61%; width: min(43vw, 715px); }
  .dawn-sobber { left: 50%; top: 48%; width: min(17.5vw, 300px); }
  .thought-banana { left: 40.5%; top: 28%; width: min(10.5vw, 176px); }
  .thought-mango { left: 59.5%; top: 27%; width: min(10.7vw, 180px); }
  .thought-strawberry { left: 39.5%; top: 46.5%; width: min(10.2vw, 172px); }
  .thought-coconut { left: 61%; top: 47%; width: min(10.8vw, 182px); }

  .falling-sobber { left: 57%; top: 42%; width: min(16vw, 260px); }
  .portal-sobber-3d { left: 50%; top: 60%; width: min(17vw, 285px); }
  .portal-beam { top: 63%; }

  .fruit-vignette .asset-inner { filter: drop-shadow(0 12px 16px rgba(18,35,15,.14)); }
  .fruit-mango { left: 18%; top: 57%; width: min(25vw, 415px); }
  .fruit-banana { left: 41%; top: 59%; width: min(21vw, 350px); }
  .fruit-coconut { left: 65%; top: 54%; width: min(22vw, 372px); }
  .fruit-strawberry { left: 86%; top: 64%; width: min(29vw, 490px); }

  .scene-process .how-card {
    left: 4.8vw;
    top: 15vh;
    width: min(28vw, 450px);
    min-height: 69vh;
    padding: clamp(27px, 2.05vw, 37px);
  }
  .scene-process .how-card h2 { font-size: clamp(62px, 4.9vw, 84px); }
  .scene-process .how-card .card-kicker { margin-bottom: 9px; }
  .how-icons { gap: 8px; padding-top: 16px; }
  .how-icons i { min-height: 43px; display: grid; place-items: center; }
  .how-icons i svg {
    width: 39px;
    height: 39px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .how-icons span {
    display: block;
    max-width: 8.5ch;
    margin: 4px auto 0;
    font-size: clamp(11px, .78vw, 13px);
    line-height: 1.05;
  }
  .process-flow { left: 36vw; right: 3.5vw; top: 19vh; height: 62vh; }

  .product-card {
    width: min(30vw, 475px);
    min-height: 70vh;
    padding: clamp(27px, 2.05vw, 37px);
  }
  .product-card h2 { font-size: clamp(66px, 5.15vw, 90px); }
  .product-grid { left: 38.5vw; width: 58vw; }
  .flavor-list {
    display: grid;
    align-content: center;
    gap: clamp(13px, 1.55vh, 19px);
    margin-top: 16px;
  }
  .flavor-list li {
    position: relative;
    padding-left: 0;
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 13px;
    align-items: center;
    font-family: var(--hand-font);
    font-size: inherit;
  }
  .flavor-list li::before { content: none; }
  .flavor-list .flavor-icon { width: 43px; height: 43px; display: grid; place-items: center; }
  .flavor-list .flavor-icon svg {
    width: 39px;
    height: 39px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .flavor-list strong { display: block; font-size: clamp(19px, 1.35vw, 23px); line-height: 1; }
  .flavor-list small { display: block; margin-top: 3px; font-size: clamp(14px, .98vw, 17px); line-height: 1.13; }
  .flavor-list--crunchy { gap: clamp(12px, 1.4vh, 17px); }
  .flavor-list--crunchy small { max-width: 26ch; }
  .flavor-list--dipped { gap: clamp(17px, 2vh, 24px); }

  .final-card { width: min(28.5vw, 455px); padding: clamp(28px, 2.1vw, 38px); }
  .final-card h2 { font-size: clamp(64px, 5.05vw, 88px); }
}

@media (min-width: 821px) {
  .scene-fall .scene-bg {
    top: -25vh;
    left: -15vw;
    width: 130vw;
    height: 150vh;
  }
  .scene-return .scene-bg { object-position: center top; }
  .contact-footer { height: clamp(250px, 31vh, 310px); }
}