:root {
  --navy: #031037;
  --blue: #015AEB;
  --blue-dark: #0047bd;
  --yellow: #FFBE33;
  --red: #E62322;
  --burgundy: #49001D;
  --burgundy-2: #5c0526;
  --pink: #FF78A0;
  --paper: #F3F2F1;
  --white: #fff;
  --bbc-grey: #434343;

  --bag-silver: #c8c3b6;
  --bag-brown: #2c221e;
  --bag-red: #d23b2c;

  --font: "Figtree", "roobert-vrt", "Museo Sans", Helvetica, Arial, sans-serif;
  --font-print: "Bungee", "Figtree", sans-serif;

  --radius: 10px;
  --ease-out: cubic-bezier(.2, .9, .3, 1);
  --ease-boing: cubic-bezier(.34, 1.56, .64, 1);

  --bag-w: clamp(150px, 16.5vw, 228px);
  --bag-h: calc(var(--bag-w) * 3.04);
  --bag-d: calc(var(--bag-w) * 0.56);

  --hl-size: clamp(24px, 3vw, 38px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--navy);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.btn {
  --btn-bg: var(--blue);
  --btn-fg: var(--white);
  --btn-shadow: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 15px 24px;
  border: 0; border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 800 15px/1.1 var(--font);
  letter-spacing: .5px; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--btn-shadow);
  transition: transform .18s var(--ease-boing), box-shadow .18s var(--ease-out), background-color .2s;
}
.btn:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 7px 0 var(--btn-shadow); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-shadow); }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.btn--blue { --btn-bg: var(--blue); }
.btn--yellow { --btn-bg: var(--yellow); --btn-fg: var(--navy); --btn-shadow: #b97c00; }
.btn--ghost {
  --btn-bg: transparent; --btn-shadow: transparent;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.45);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--white); }
.btn--small-red { --btn-bg: var(--red); --btn-shadow: #8d1010; padding: 11px 18px; font-size: 13px; }
.btn--sm { padding: 10px 16px; font-size: 13px; }
.btn--block { width: 100%; }
.btn--big { padding: 19px 24px; font-size: 17px; }

.title-stack {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 0 auto 56px;
  position: relative; z-index: 2;
}
.hl {
  display: inline-block;
  padding: .32em .5em .28em;
  border-radius: var(--radius);
  font-size: var(--hl-size);
  font-weight: 800; line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: scale(.3) rotate(-14deg);
}
.hl--blue { background: var(--blue); color: var(--white); --tilt: -2deg; }
.hl--yellow { background: var(--yellow); color: var(--navy); --tilt: 1.8deg; }
.title-stack.in .hl {
  animation: hlPop .7s var(--ease-boing) both;
  animation-delay: var(--d, 0s);
}
.title-stack.in .hl + .hl { animation-delay: calc(var(--d, 0s) + .14s); }

.title-stack .hl { transition: scale .3s var(--ease-boing), rotate .3s var(--ease-boing); }
.title-stack .hl:hover { scale: 1.06; rotate: 3deg; }

@keyframes hlPop {
  0%   { opacity: 0; transform: scale(.3) rotate(-14deg); }
  60%  { opacity: 1; transform: scale(1.12) rotate(calc(var(--tilt) * -2)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--tilt)); }
}
@keyframes hlWiggle {
  0%,100% { transform: rotate(var(--tilt)); }
  25% { transform: rotate(calc(var(--tilt) + 5deg)) scale(1.05); }
  75% { transform: rotate(calc(var(--tilt) - 5deg)) scale(1.05); }
}

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 48px);
  background: var(--red); color: var(--white);
  transform: translateY(calc(-100% - 48px));
  transition: transform .45s var(--ease-out);
}
.topbar.show { transform: none; }
.topbar__brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .3px; text-decoration: none;
}
.topbar__logo {
  width: 62px; height: 65px;
  margin-top: 26px;
  filter: drop-shadow(0 4px 6px rgba(3,16,55,.25));
  transition: transform .3s var(--ease-boing);
}
.topbar__brand:hover .topbar__logo { transform: rotate(-8deg) scale(1.08); }
.topbar__nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); }
.topbar__nav a:not(.btn) { font-weight: 700; text-decoration: none; }
.topbar__nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }

.hero {
  position: relative;
  min-height: clamp(560px, 84svh, 820px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(36px, 6vh, 64px);
  padding: 56px 16px 96px;
  background: var(--paper);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; left: 50%; top: 42%;
  width: min(720px, 120vw); aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.2);
  background: radial-gradient(closest-side, rgba(255,190,51,.38), rgba(255,190,51,0));
  opacity: 0;
  animation: glowIn 1.6s var(--ease-out) .5s forwards, glowPulse 4s ease-in-out 2.1s infinite;
  pointer-events: none;
}
@keyframes glowIn { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes glowPulse {
  0%,100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.08); }
}

.dww-logo {
  position: relative;
  width: clamp(180px, 19vw, 250px); height: auto;
  overflow: visible;
  animation: logoBoing .6s var(--ease-boing) 1.35s both;
}
.dww-logo g { transform-box: fill-box; }
.dww-logo__flame {
  transform-origin: 50% 100%;
  animation: flameIn .85s var(--ease-boing) .15s both, flicker 2.6s ease-in-out 1.4s infinite;
}
.dww-logo__de      { transform-origin: 50% 50%; animation: deIn .6s var(--ease-boing) .62s both; }
.dww-logo__warmste { transform-origin: 50% 50%; animation: warmsteIn .55s var(--ease-out) .82s both; }
.dww-logo__week    { transform-origin: 50% 50%; animation: weekIn .6s var(--ease-boing) 1.04s both; }

@keyframes flameIn {
  0%   { transform: translateY(18%) scale(0, 0); opacity: 0; }
  55%  { transform: translateY(0) scale(.9, 1.15); opacity: 1; }
  75%  { transform: scale(1.06, .94); }
  100% { transform: none; opacity: 1; }
}
@keyframes flicker {
  0%,100% { transform: none; }
  20% { transform: scale(1.015, 1.035) skewX(-1.4deg); }
  45% { transform: scale(.995, 1.01) skewX(1deg); }
  70% { transform: scale(1.01, 1.045) skewX(-.6deg); }
}
@keyframes deIn {
  0%   { transform: translate(-160%, -40%) rotate(-30deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes warmsteIn {
  0%   { transform: scale(2.6) rotate(14deg); opacity: 0; }
  60%  { transform: scale(.9, 1.08) rotate(-2deg); opacity: 1; }
  80%  { transform: scale(1.05, .96); }
  100% { transform: none; opacity: 1; }
}
@keyframes weekIn {
  0%   { transform: translate(120%, 60%) rotate(24deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes logoBoing {
  0%,100% { transform: none; }
  40% { transform: scale(1.07) rotate(-2deg); }
  70% { transform: scale(.98) rotate(1deg); }
}

.hero__sparks { position: absolute; inset: 0; pointer-events: none; }
.spark {
  position: absolute; width: 10px; height: 14px;
  background: var(--c, var(--yellow));
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity: 0;
  animation: spark 1.1s var(--ease-out) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes spark {
  0% { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); }
}

.supported {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 15px clamp(20px, 2.4vw, 30px) 17px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 6px 0 rgba(3,16,55,.12), 0 18px 36px rgba(3,16,55,.1);
  --tilt: -2.5deg;
  animation: cardIn .8s var(--ease-boing) 1.6s both, cardFloat 6s ease-in-out 2.6s infinite;
}
.supported { transition: scale .3s var(--ease-boing), rotate .3s var(--ease-boing); }
.supported:hover { scale: 1.04; rotate: 2deg; }
@keyframes cardIn {
  0%   { opacity: 0; transform: translateY(30px) scale(.5) rotate(10deg); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.06) rotate(-5deg); }
  100% { opacity: 1; transform: rotate(var(--tilt)); }
}
@keyframes cardFloat {
  0%,100% { transform: rotate(var(--tilt)); }
  50% { transform: translateY(-5px) rotate(calc(var(--tilt) + 1deg)); }
}
.supported__label {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 18px); font-weight: 800; line-height: 1.1;
  color: var(--navy);
  white-space: nowrap;
  animation: fadeUp .6s var(--ease-out) 1.8s both;
}
.supported__warm {
  position: relative; display: inline-block;
  color: var(--red);
}
.supported__warm::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: 1px; height: 38%;
  z-index: -1;
  border-radius: 3px;
  background: var(--yellow);
  transform: scaleX(0) rotate(-2deg); transform-origin: left center;
  animation: marker .5s var(--ease-out) 2.15s forwards;
}
@keyframes marker { to { transform: scaleX(1) rotate(-2deg); } }
.supported__stamp {
  position: absolute; right: -16px; top: -19px;
  width: 36px; height: 38px;
  overflow: visible;
  transform-origin: 50% 100%;
  animation: stampIn .55s var(--ease-boing) 2.7s both, flicker 2.2s ease-in-out 3.3s infinite;
  filter: drop-shadow(0 3px 3px rgba(3,16,55,.2));
}
@keyframes stampIn {
  0% { opacity: 0; transform: scale(2.4) rotate(40deg); }
  100% { opacity: 1; transform: rotate(14deg); }
}
.bbc-logo { width: clamp(92px, 8.5vw, 118px); height: auto; overflow: visible; }
.bbc-logo__chevrons { transform-box: fill-box; transform-origin: 100% 50%; animation: beat 3.6s ease-in-out 3.2s infinite; }
@keyframes beat {
  0%, 30%, 100% { transform: none; }
  8% { transform: scale(1.14); }
  16% { transform: scale(.96); }
  22% { transform: scale(1.08); }
}

.hero__float { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
@keyframes fadeIn { to { opacity: var(--o, .9); } }
.hero > :not(.hero__float):not(.hero__sparks) { position: relative; z-index: 1; }

.bbc-logo .chev { animation: chevIn .5s var(--ease-boing) both; }
.bbc-logo .chev--1 { animation-delay: 1.95s; }
.bbc-logo .chev--2 { animation-delay: 2.03s; }
.bbc-logo .chev--3 { animation-delay: 2.11s; }
.bbc-logo .chev--4 { animation-delay: 2.19s; }
.bbc-logo__letters { animation: lettersIn .6s var(--ease-out) 2.3s both; }
@keyframes chevIn {
  0% { opacity: 0; transform: translateX(-26px); }
  100% { opacity: 1; transform: none; }
}
@keyframes lettersIn {
  0% { opacity: 0; transform: translateX(10px); clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.scroll-cue {
  margin-top: clamp(-20px, -2vh, 0px);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 700; color: var(--navy); text-decoration: none;
  opacity: .75;
  animation: fadeUp .6s var(--ease-out) 2.8s both;
}
.scroll-cue svg { width: 22px; height: 22px; animation: nudge 1.6s ease-in-out 3.4s infinite; }
@keyframes nudge { 0%,100% { transform: none; } 50% { transform: translateY(6px); } }

.coffee {
  position: relative;
  display: flow-root;
  padding: 0 clamp(16px, 4vw, 64px) 72px;
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(255,120,60,.16), transparent 70%),
    var(--burgundy);
  color: var(--white);
}
.title-stack--hero {
  margin-top: calc(var(--hl-size) * -.82);
  margin-bottom: 24px;
  --d: 2.45s;
}

.coffee__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  max-width: 1180px; margin: 0 auto;
}
.coffee__copy { max-width: 36ch; font-size: 18px; }
.coffee__copy--left { justify-self: end; align-self: start; margin-top: clamp(40px, 16vh, 170px); }
.coffee__copy--right { justify-self: start; align-self: end; margin-bottom: clamp(30px, 10vh, 120px); }
.coffee strong { color: var(--yellow); }
.eyebrow {
  font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--yellow);
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.bag-stage {
  position: relative;
  width: calc(var(--bag-w) * 1.7);
  height: calc(var(--bag-h) + 110px);
  display: grid; place-items: center;
  perspective: 1500px;
  perspective-origin: 50% 40%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.bag-stage.dragging { cursor: grabbing; }
.bag-stage:focus-visible { outline: 3px dashed var(--yellow); outline-offset: 6px; border-radius: 20px; }

.bag-float {
  transform-style: preserve-3d;
  animation: float 5.5s ease-in-out infinite;
}
.bag-stage .bag-float { transition: opacity .6s var(--ease-out), translate 1s var(--ease-boing), scale 1s var(--ease-boing); }
.bag-stage:not(.entered) .bag-float { opacity: 0; translate: 0 -140px; scale: .7; }
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

.bag {
  position: relative;
  width: var(--bag-w); height: var(--bag-h);
  transform-style: preserve-3d;
  will-change: transform;
}

.face {
  position: absolute;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}

.face--front, .face--back { inset: 0; transform-style: preserve-3d; backface-visibility: visible; }
.face--back  { transform: rotateY(180deg); }
.face--front { --tex: url("assets/zak-voor.webp"); }
.face--back  { --tex: url("assets/zak-achter.webp"); }

.panel {
  position: absolute; left: 0; width: 100%;
  overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--tex) 0 var(--ty) / var(--bag-w) var(--th) no-repeat;
}
.panel--fin {
  top: 0; height: calc(var(--bag-h) * .34);
  --ty: 0px; --th: var(--bag-h);
  transform: translateZ(.5px);
}
.panel--shoulder {
  top: calc(var(--bag-h) * .34); height: calc(var(--bag-w) * .4598);
  --ty: calc(var(--bag-h) * -.34 * 1.2604); --th: calc(var(--bag-h) * 1.2604);
  transform-origin: 50% 0;
  transform: translateZ(.5px) rotateX(37.5deg);
}

.panel--shoulder::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,0) 70%, rgba(40,20,10,.10));
}
.panel--body {
  top: calc(var(--bag-h) * .46); bottom: 0;
  --ty: calc(var(--bag-h) * -.46); --th: var(--bag-h);
  transform: translateZ(calc(var(--bag-d) / 2));
}
.panel .face__light, .panel .face__sheen { position: absolute; inset: 0; }

.face__light {
  background: #120604;
  opacity: var(--shade, 0);
  pointer-events: none;
}
.face__sheen {
  pointer-events: none;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(40% 26% at var(--gx, 30%) var(--gy, 30%), rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
    linear-gradient(100deg, transparent 0 32%, rgba(255,255,255,.75) 44%, transparent 56% 100%);
  background-size: 100% 100%, 320% 100%;
  background-position: 0 0, var(--sx, 50%) 0;
}

.face--side {
  top: calc(var(--bag-h) * .34);
  left: calc((var(--bag-w) - var(--bag-d)) / 2);
  width: var(--bag-d);
  height: calc(var(--bag-h) * .66);
  overflow: hidden;
  clip-path: polygon(50% 0, 100% 18.18%, 100% 100%, 0 100%, 0 18.18%);
}
.face--side img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.face--left  { transform: rotateY(-90deg) translateZ(calc(var(--bag-w) / 2 - .5px)); }
.face--right { transform: rotateY(90deg)  translateZ(calc(var(--bag-w) / 2 - .5px)); }
.face--side .face__light { position: absolute; inset: 0; }
.face--bottom {
  left: 0;
  width: var(--bag-w);
  height: var(--bag-d);
  top: calc(var(--bag-h) - var(--bag-d) / 2);
  transform: rotateX(-90deg);
  background: linear-gradient(90deg, #a8261c, #d8443a 50%, #a8261c);
}

.bag-shadow {
  position: absolute; left: 50%; bottom: 18px;
  width: calc(var(--bag-w) * 1.25); height: 38px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,0));
  animation: shadowPulse 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shadowPulse {
  0%,100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(.82); opacity: .7; }
}

.steam {
  position: absolute; left: 50%; top: -6px;
  width: calc(var(--bag-w) * .55); height: auto;
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
  filter: blur(5px);
}
.steam path {
  fill: none; stroke: rgba(255,240,225,.55); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 40 160;
  animation: steam 3.6s linear infinite;
  opacity: 0;
}
.steam path:nth-child(2) { animation-delay: 1.1s; }
.steam path:nth-child(3) { animation-delay: 2.2s; }
@keyframes steam {
  0%   { stroke-dashoffset: 0; opacity: 0; }
  20%  { opacity: 1; }
  100% { stroke-dashoffset: -160; opacity: 0; }
}

.bag-controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px;
  margin-top: 8px;
  font-size: 14px;
}
.bag-hint { margin: 0; display: flex; align-items: center; gap: 8px; opacity: .8; font-weight: 600; }
.bag-hint__icon { display: inline-block; font-size: 18px; animation: spinHint 2.4s var(--ease-out) infinite; }
@keyframes spinHint { 0%, 40% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

.marquee-wrap {
  position: relative; z-index: 3;
  overflow-x: clip;
  margin: -56px 0;
  padding: 56px 0;

  background: linear-gradient(178.4deg, var(--burgundy) 50%, var(--paper) 50%);
}
.marquee {
  position: relative; z-index: 3;
  margin: 0 -5vw;
  padding: 16px 0;
  background: var(--blue);
  color: var(--yellow);
  transform: rotate(-1.6deg);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(3,16,55,.18);
}
.marquee__track {
  display: flex; align-items: center; gap: 28px;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee span {
  font-size: clamp(18px, 2.2vw, 26px); font-weight: 900; text-transform: uppercase; white-space: nowrap;
}
.marquee i {
  width: 16px; height: 20px; flex: none;
  background: var(--yellow);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  clip-path: polygon(50% 0, 66% 24%, 80% 12%, 92% 40%, 100% 66%, 84% 96%, 50% 100%, 16% 96%, 0 66%, 10% 36%, 26% 18%, 36% 30%);
}
@keyframes marquee { to { transform: translateX(-50%); } }

.steps {
  padding: clamp(80px, 11vw, 140px) clamp(16px, 4vw, 64px) clamp(70px, 9vw, 120px);
  background: var(--paper);
}
.steps__list {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1120px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.step {
  position: relative;
  padding: 34px 28px 30px;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 8px 0 rgba(3,16,55,.07);
  transition: transform .35s var(--ease-boing), box-shadow .3s;
}
.step:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 14px 0 rgba(3,16,55,.08); }
.step:nth-child(2):hover { transform: translateY(-6px) rotate(1deg); }
.step__num {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: var(--yellow);
  font-size: 30px; font-weight: 900;
  transform: rotate(-6deg);
  transition: transform .5s var(--ease-boing);
}
.step:nth-child(2) .step__num { background: var(--pink); transform: rotate(5deg); }
.step:nth-child(3) .step__num { background: var(--blue); color: var(--white); }
.step:hover .step__num { transform: rotate(360deg) scale(1.08); }
.step h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; text-transform: uppercase; line-height: 1.15; }
.step p { margin: 0; color: rgba(3,16,55,.78); }

.why {
  padding: clamp(70px, 9vw, 120px) clamp(16px, 4vw, 64px);
  background: var(--burgundy);
  color: var(--white);
}
.why__inner {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center;
}
.why__title {
  margin: 0;
  font-size: clamp(32px, 4.6vw, 58px); line-height: 1.08; font-weight: 800; text-transform: uppercase;
}
.why__title mark {
  display: inline-block;
  padding: 0 .18em;
  border-radius: 10px;
  background: var(--pink); color: var(--navy);
  transform: rotate(-2deg);
}
.why__copy { font-size: 18px; }
.why__copy .btn { margin-top: 10px; }

.meter {
  max-width: 1120px; margin: clamp(48px, 7vw, 84px) auto 0;
  padding: 28px clamp(20px, 3vw, 36px) 26px;
  border-radius: 22px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.meter__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; margin-bottom: 26px; }
.meter__title { margin: 0; font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; text-transform: uppercase; }
.meter__count { margin: 0; font-weight: 700; color: var(--yellow); font-size: 18px; font-variant-numeric: tabular-nums; }
.meter__bar {
  position: relative; height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}
.meter__fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--yellow), #ff9600 60%, var(--red));
  transition: width 2.2s var(--ease-out);
}
.meter__flame {
  position: absolute; right: -20px; top: -26px;
  width: 40px; height: 42px;
  overflow: visible;
  transform-origin: 50% 100%;
  animation: flicker 1.8s ease-in-out infinite;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.3));
}
.meter__note { margin: 16px 0 0; font-size: 15px; opacity: .8; }

.order {
  padding: clamp(80px, 10vw, 130px) clamp(16px, 4vw, 64px);
  background: var(--paper);
}
.order__card {
  max-width: 980px; margin: 0 auto;
  display: grid; grid-template-columns: .9fr 1.1fr;
  border-radius: 26px; overflow: hidden;
  background: var(--white);
  box-shadow: 0 12px 0 rgba(3,16,55,.07), 0 30px 60px rgba(3,16,55,.08);
}
.order__visual {
  position: relative;
  display: grid; place-items: center;
  padding: 40px 20px;
  background:
    repeating-conic-gradient(from 0deg at 50% 60%, rgba(255,190,51,.13) 0 6deg, transparent 6deg 18deg),
    var(--burgundy);
  overflow: hidden;
}
.order__visual img {
  width: auto; height: min(360px, 74vw); max-width: 46%; object-fit: contain;
  filter: drop-shadow(0 20px 22px rgba(0,0,0,.45));
  animation: orderBag 6s ease-in-out infinite;
}
@keyframes orderBag {
  0%,100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(-10px); }
}
.order__price-tag {
  position: absolute; right: 12%; top: 16%;
  display: grid; place-content: center; text-align: center;
  width: 104px; height: 104px;
  border-radius: 50%;
  background: var(--yellow); color: var(--navy);
  font-size: 18px; font-weight: 800; line-height: 1;
  transform: rotate(12deg);
  box-shadow: 0 6px 0 #b97c00;
  animation: tagSwing 3.2s ease-in-out infinite;
}
.order__price-tag b { font-size: 34px; }
.order__price-tag small { display: block; font-size: 12px; font-weight: 700; margin-top: 4px; text-transform: uppercase; }
@keyframes tagSwing { 0%,100% { transform: rotate(12deg); } 50% { transform: rotate(4deg) scale(1.04); } }

.order__form { padding: clamp(28px, 4vw, 48px); }
.order__form h3 { margin: 0; font-size: 30px; font-weight: 900; text-transform: uppercase; line-height: 1.05; }
.order__sub { margin: 6px 0 26px; color: rgba(3,16,55,.7); }

.choice,  { border: 0; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.choice legend, .hsform .hs_type_of_coffee > label { padding: 0; margin-bottom: 10px; font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .5px; }
.choice label, .hsform .hs-form-radio-display { position: relative; cursor: pointer; }
.choice input, .hsform .hs-form-radio-display input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span, .hsform .hs-form-radio-display > span {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: inset 0 0 0 2px rgba(3,16,55,.18);
  transition: background-color .2s, color .2s, transform .25s var(--ease-boing), box-shadow .2s;
}
.choice label:hover span, .hsform .hs-form-radio-display:hover span { transform: translateY(-2px); }
.choice input:checked + span, .hsform .hs-form-radio-display input:checked + span { background: var(--navy); color: var(--white); box-shadow: none; transform: rotate(-2deg); }
.choice input:focus-visible + span, .hsform .hs-form-radio-display input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }

.qty { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.qty__label { font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .5px; }
.qty__ctrl { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 14px; background: var(--paper); }
.qty__btn {
  width: 44px; height: 44px; border: 0; border-radius: 10px;
  background: var(--white); color: var(--navy);
  font: 800 22px/1 var(--font);
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(3,16,55,.12);
  transition: transform .2s var(--ease-boing);
}
.qty__btn:hover { transform: translateY(-2px); }
.qty__btn:active { transform: translateY(2px); }
.qty__btn:focus-visible { outline: 3px solid var(--blue); }
.qty__val { min-width: 42px; text-align: center; font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.qty__quip { margin: 10px 0 24px; min-height: 1.5em; font-weight: 600; color: var(--blue); text-align: right; }
.bump { animation: bump .4s var(--ease-boing); }
@keyframes bump { 40% { transform: scale(1.3) rotate(-4deg); } }

.order__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 0; margin-bottom: 20px;
  border-top: 2px dashed rgba(3,16,55,.15);
  font-weight: 800; text-transform: uppercase;
}
.order__total strong { display: inline-block; font-size: 32px; font-weight: 900; font-variant-numeric: tabular-nums; }
.order__small { margin: 14px 0 0; text-align: center; font-size: 14px; color: rgba(3,16,55,.6); }

.footer {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 64px 16px 48px;
  background: var(--navy); color: var(--white);
  text-align: center;
}
.footer__logo { width: 110px; height: 115px; transition: transform .4s var(--ease-boing); }
.footer__logo:hover { transform: rotate(-8deg) scale(1.06); }
.footer__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 0; font-weight: 700; font-size: 18px; }
.footer__bbc { width: 70px; height: 21px; color: var(--white); }
.footer__small { margin: 0; font-size: 14px; opacity: .65; }

.fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 70;
  max-width: calc(100vw - 32px);
  padding: 14px 20px;
  border-radius: 14px;
  background: var(--navy); color: var(--white);
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(3,16,55,.3);
  transform: translate(-50%, calc(100% + 40px));
  visibility: hidden;
  transition: transform .45s var(--ease-boing), visibility 0s .45s;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; transition: transform .45s var(--ease-boing), visibility 0s; }
.toast:has(.toast__title) { font-weight: 400; }
.toast__title { display: block; margin-bottom: 2px; font-weight: 700; }

[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
.steps__list .step:nth-child(2) { transition-delay: .1s; }
.steps__list .step:nth-child(3) { transition-delay: .2s; }
.steps__list .step.in:hover { transition-delay: 0s; }

@media (max-width: 900px) {
  .coffee__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; }
  .coffee__copy { justify-self: center !important; margin: 0 !important; }
  .coffee__copy--left { order: 1; }
  .bag-stage { order: 2; }
  .coffee__copy--right { order: 3; }
  .cta-row { justify-content: center; }
  .steps__list { grid-template-columns: 1fr; max-width: 520px; }
  .why__inner { grid-template-columns: 1fr; }
  .order__card { grid-template-columns: 1fr; }
  .order__visual { min-height: 280px; }
  .topbar__nav a:not(.btn) { display: none; }
}
@media (max-width: 700px) {
  :root { --bag-w: min(44vw, 180px); }
  body { font-size: 16px; }
  .hero { min-height: 74svh; gap: 34px; padding-bottom: 100px; }
  .coffee__copy { font-size: 17px; }
  .topbar__brand span { display: none; }
  .topbar__logo { width: 54px; height: 57px; }
}

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

:root {
  --ink: #141414;
  --char: #434343;
  --coral: #E94A44;
  --coral-2: #EF6B51;
  --lav: #B59DF9;
  --lav-2: #CDBBFC;
  --lav-3: #ECE5FE;
  --line: #D6D6D6;

  --navy: var(--ink);
  --blue: var(--coral);
  --yellow: var(--lav);
  --red: var(--coral-2);
  --pink: var(--lav);
  --paper: #F3F2F1;

  --font: "Work Sans", Helvetica, Arial, sans-serif;
  --font-head: "Space Grotesk", "Work Sans", sans-serif;
  --radius: 999px;
}

body { color: var(--char); }

h1, h2, h3, .hl, .why__title, .meter__title, .order__form h3, .topbar__brand,
.step__num, .order__total strong, .qty__val, .marquee span, .supported__label, .eyebrow {
  font-family: var(--font-head);
}

.btn {
  gap: 9px;
  padding: 12px 16px;
  border: 1px solid var(--char);
  border-radius: 0;
  background: var(--paper);
  color: var(--char);
  box-shadow: none;
  font: 700 16px/1.2 var(--font-head);
  letter-spacing: -.01em;
  text-transform: uppercase;
  transition: background-color .375s, border-color .375s, color .375s;
}
.btn:hover, .btn:active { transform: none; box-shadow: none; background: var(--char); border-color: var(--char); color: #fff; }
.btn::after {
  content: "";
  flex: none;
  width: 18px; height: 13px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'><path d='M7.61913 8.55919L6.45113 7.39119L8.21113 5.63119L8.83513 5.24719L8.75513 4.99119L8.00313 5.10319H0.00312501V3.45519H8.00313L8.75513 3.56719L8.83513 3.31119L8.21113 2.92719L6.45113 1.16719L7.61913 -0.000812531L11.2991 3.67919V4.87919L7.61913 8.55919Z' fill='%23000'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'><path d='M7.61913 8.55919L6.45113 7.39119L8.21113 5.63119L8.83513 5.24719L8.75513 4.99119L8.00313 5.10319H0.00312501V3.45519H8.00313L8.75513 3.56719L8.83513 3.31119L8.21113 2.92719L6.45113 1.16719L7.61913 -0.000812531L11.2991 3.67919V4.87919L7.61913 8.55919Z' fill='%23000'/></svg>") center / contain no-repeat;
  transition: transform .25s, background-color .25s;
}
.btn:hover::after { transform: translateX(4px); }
.btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.btn--fill { background: var(--coral); border-color: var(--coral); color: #fff; }
.btn--fill:hover { background: var(--char); border-color: var(--char); }

.btn--link { padding: 0; border: 0; background: none; color: var(--coral); font-size: 18px; }
.btn--link:hover { background: none; color: var(--char); }
.btn--link-white, .btn--link-white:hover { color: #fff; }

.btn--sm { padding: 10px 14px; font-size: 14px; }
.btn--big { padding: 18px 20px; font-size: 18px; }

.choice span, .hsform .hs-form-radio-display > span { border-radius: 0; box-shadow: inset 0 0 0 1px var(--char); font-family: var(--font-head); text-transform: uppercase; font-size: 14px; }
.choice input:checked + span, .hsform .hs-form-radio-display input:checked + span { background: var(--char); color: #fff; transform: none; }
.qty__ctrl { border-radius: 0; background: none; box-shadow: inset 0 0 0 1px var(--char); }
.qty__btn { border-radius: 0; box-shadow: none; background: none; transition: background-color .25s, color .25s; }
.qty__btn:hover { transform: none; background: var(--char); color: #fff; }
.cta-row { align-items: center; gap: 24px; }

.hl { font-weight: 700; letter-spacing: 0; border-radius: 10px; }
.hl--blue { background: var(--coral); color: #fff; }
.hl--yellow { background: var(--lav); color: var(--ink); }

.topbar {
  background: rgba(243,242,241,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}
.topbar__brand { font-weight: 700; }
.topbar__nav a:not(.btn) { font-weight: 500; }

.hero::before { content: none; }
.supported__label { color: var(--ink); font-weight: 700; letter-spacing: -.3px; }
.supported__warm { color: var(--coral); }
.supported__warm::after { background: var(--lav); }
.supported { box-shadow: 0 6px 0 rgba(20,20,20,.9), 0 18px 36px rgba(20,20,20,.08); }
.scroll-cue { color: var(--ink); }

.coffee {
  background:
    radial-gradient(55% 45% at 50% 48%, rgba(255,255,255,.75), transparent 70%),
    linear-gradient(180deg, var(--lav-2) 0%, var(--lav-3) 100%);
  color: var(--ink);
}
.coffee strong { color: var(--coral); }
.eyebrow { color: var(--coral); letter-spacing: .8px; font-weight: 700; }
.bag-shadow { background: radial-gradient(closest-side, rgba(40,20,80,.35), rgba(40,20,80,0)); }
.steam path { stroke: rgba(255,255,255,.9); }

.marquee-wrap { background: linear-gradient(178.4deg, var(--lav-3) 50%, var(--paper) 50%); }
.marquee { background: var(--coral); color: #fff; box-shadow: 0 10px 30px rgba(233,74,68,.25); }
.marquee span { font-weight: 700; letter-spacing: -.3px; }
.marquee i {
  width: 26px; height: 18px;
  background: var(--ink);
  border-radius: 0; clip-path: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 18'%3E%3Cpath d='M0 0c0 0 3 .6 7 4.4 4.3 4.1 7.6 4.6 7.6 4.6-.6 1.1-3.8 2.8-7 3.6C2 14 .4 15.6 0 16.3Z M17 0c0 0 3 .6 7 4.4 4.3 4.1 7.6 4.6 7.6 4.6-.6 1.1-3.8 2.8-7 3.6C19 14 17.4 15.6 17 16.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 18'%3E%3Cpath d='M0 0c0 0 3 .6 7 4.4 4.3 4.1 7.6 4.6 7.6 4.6-.6 1.1-3.8 2.8-7 3.6C2 14 .4 15.6 0 16.3Z M17 0c0 0 3 .6 7 4.4 4.3 4.1 7.6 4.6 7.6 4.6-.6 1.1-3.8 2.8-7 3.6C19 14 17.4 15.6 17 16.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.step h3 { font-weight: 700; color: var(--ink); }
.step p { color: var(--char); }
.step:nth-child(1) .step__num { background: var(--coral); color: #fff; }
.step:nth-child(2) .step__num { background: var(--lav); color: var(--ink); }
.step:nth-child(3) .step__num { background: var(--ink); color: #fff; }

.why { background: var(--coral); }
.why__title { font-weight: 700; }
.why__title mark { background: var(--lav); color: var(--ink); }
.meter { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.meter__title { font-weight: 700; }
.meter__count { color: #fff; }
.meter__bar { background: rgba(20,20,20,.18); }
.meter__fill { background: linear-gradient(90deg, var(--lav), #fff); }

.order__visual {
  background:
    repeating-conic-gradient(from 0deg at 50% 60%, rgba(255,255,255,.35) 0 6deg, transparent 6deg 18deg),
    linear-gradient(160deg, var(--lav) 0%, var(--lav-3) 100%);
}
.order__visual img { filter: drop-shadow(0 20px 22px rgba(40,20,80,.35)); }
.order__price-tag { background: var(--coral); color: #fff; box-shadow: 0 6px 0 var(--ink); font-family: var(--font-head); }
.order__form h3 { font-weight: 700; }
.choice legend, .qty__label, .hsform .hs_type_of_coffee > label { font-family: var(--font-head); letter-spacing: .6px; color: var(--ink); }
.choice input:checked + span, .hsform .hs-form-radio-display input:checked + span { background: var(--ink); }
.qty__quip { color: var(--coral); }
.order__total { font-family: var(--font-head); border-top-color: var(--line); color: var(--ink); }

.footer { background: var(--ink); }
.footer__line { font-family: var(--font-head); font-weight: 500; letter-spacing: -.3px; }
.footer__bbc { width: 92px; height: 28px; }
.supported__warm::after { background: var(--lav-2); height: 30%; bottom: 0; }

.title-stack--hero { margin-bottom: clamp(48px, 7vw, 88px); }

.hero__float--front { z-index: 3; }
.dof {
  --k: 1;
  position: absolute; left: var(--x); top: var(--y);
  width: calc(var(--s) * var(--k));
  transform: translate(-50%, -50%)
             translate(calc(var(--px, 0) * var(--z) * 40px), calc(var(--py, 0) * var(--z) * 40px));
  transition: transform 1s var(--ease-out);
  opacity: 0;
  animation: fadeIn 1.8s var(--ease-out) var(--in) forwards;
}
.dof img {
  display: block; width: 100%; height: auto;
  rotate: var(--r0);
  animation:
    dofSpin var(--spin) linear infinite,
    dofDrift var(--drift) ease-in-out var(--delay) infinite alternate;
  user-select: none;
}
@keyframes dofSpin   { to { rotate: calc(var(--r0) + var(--dir) * 360deg); } }
@keyframes dofDrift  { to { translate: var(--dx) var(--dy); } }
@media (max-width: 700px) { .dof { --k: .6; } }

.field { display: grid; gap: 8px; margin: 2px 0 22px; }
.delivery {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 10px;
  padding: 14px 16px;
  background: var(--lav-3);
  color: var(--ink);
  font-size: 15px; line-height: 1.45;
}
.delivery strong { font-family: var(--font-head); }
.delivery__icon { flex: none; width: 18px; height: 20px; margin-top: 2px; color: var(--coral); }
.field__label {
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  letter-spacing: .6px; text-transform: uppercase; color: var(--ink);
}
.field__req { color: var(--coral); }
.field__error { margin: 0; color: var(--coral); font-size: 14px; font-weight: 600; }

.combo { position: relative; }
.combo__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--char); border-radius: 0;
  background: #fff; color: var(--char);
  font: 500 16px/1.2 var(--font);
  text-align: left; cursor: pointer;
  transition: border-color .25s, box-shadow .25s;
}
.combo.has-value .combo__btn { color: var(--ink); font-weight: 600; }
.combo__btn:hover { border-color: var(--ink); }
.combo__btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.combo.is-open .combo__btn { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.combo.is-invalid .combo__btn { border-color: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); }
.combo__chev { flex: none; width: 12px; height: 8px; transition: transform .25s; }
.combo.is-open .combo__chev { transform: rotate(180deg); }
.combo__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  background: #fff;
  border: 1px solid var(--ink);
  box-shadow: 0 16px 40px rgba(20,20,20,.14);
}
.combo__search {
  display: block; width: 100%;
  padding: 12px 14px;
  border: 0; border-bottom: 1px solid var(--line);
  font: 500 15px/1.2 var(--font); color: var(--ink);
  background: var(--paper);
}
.combo__search:focus { outline: none; background: #fff; }
.combo__list { list-style: none; margin: 0; padding: 6px 0; max-height: 248px; overflow-y: auto; overscroll-behavior: contain; }
.combo__opt { padding: 9px 14px; cursor: pointer; color: var(--char); }
.combo__opt.is-active { background: var(--lav-3); color: var(--ink); }
.combo__opt[aria-selected="true"] { font-weight: 700; color: var(--ink); }
.combo__opt[aria-selected="true"]::after { content: "✓"; float: right; color: var(--coral); }
.combo__empty { margin: 0; padding: 12px 14px 14px; color: var(--char); font-size: 14px; }

.order__card { overflow: visible; }
.order__visual { border-radius: 26px 0 0 26px; }
@media (max-width: 900px) { .order__visual { border-radius: 26px 26px 0 0; } }

.title-stack {
  align-items: flex-start;
  gap: 0;
  width: max-content; max-width: 100%;
  margin-left: auto; margin-right: auto;
}
.hl {
  --tilt: 0deg;
  padding: .36em;
  line-height: 1.63;
  transform: none;
}
.title-stack .hl + .hl { margin-left: clamp(20px, 2.2vw, 32px); }
.title-stack .hl:hover { scale: none; rotate: none; }
@keyframes hlPop {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: none; }
}

.title-stack--hero { margin-top: calc(var(--hl-size) * -1.18); }

.supported, .step, .step:hover, .marquee, .order__card, .order__price-tag,
.toast, .combo__panel { box-shadow: none; }
.topbar__logo, .supported__stamp, .order__visual img { filter: none; }

.steps__list { gap: 0 clamp(20px, 3vw, 40px); }
.step {
  position: relative; isolation: isolate;
  padding: 40px 24px 44px;
  background: none;
  border-radius: 0;
  border-top: 1px solid var(--lav);
  border-bottom: 1px solid var(--lav);
  box-shadow: none;
  transition: opacity .7s var(--ease-out), transform .8s var(--ease-out);
}
.step::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(91deg, var(--paper) 0%, var(--lav) 182.85%);
  opacity: 0;
  transition: opacity .25s;
}
.step:hover, .step:nth-child(2):hover { transform: none; box-shadow: none; }
.step:hover::before { opacity: 1; }
.step__num,
.step:nth-child(1) .step__num, .step:nth-child(2) .step__num, .step:nth-child(3) .step__num {
  display: block;
  width: auto; height: auto;
  margin: 0 0 12px;
  border-radius: 0;
  background: none; box-shadow: none;
  color: var(--coral);
  font: 500 12px/1 var(--font);
  letter-spacing: .8px; text-transform: uppercase;
  transform: none;
}
.step:hover .step__num { transform: none; }
.step h3 {
  margin: 0 0 12px;
  font-family: var(--font-head); font-weight: 500;
  font-size: clamp(24px, 1.4vw + 6px, 28px); line-height: 1.05;
  text-transform: none; letter-spacing: -.3px;
  color: var(--char);
}
.step p { color: var(--char); }
@media (max-width: 900px) { .step + .step { border-top: 0; } }

.topbar__brand, .eyebrow, .why__title, .order__form h3 { text-transform: none; }
.eyebrow { font-size: 16px; letter-spacing: 0; }
.why__title { letter-spacing: -1px; }

.why__title mark {
  display: inline; padding: 0; border-radius: 0;
  background: none; color: inherit;
  transform: none; text-transform: none; letter-spacing: inherit;
}
.order__form h3 { letter-spacing: -.5px; }

.coffee .eyebrow {
  margin-bottom: 16px;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(24px, 1.6vw + 8px, 32px); line-height: 1.1;
  letter-spacing: -.5px; text-transform: none;
  color: var(--ink);
  text-wrap: balance;
}

.hero.hero--bbc {
  display: block; min-height: 0; gap: 0;
  padding: 0 0 clamp(96px, 9vw, 140px);
  text-align: left;
}
.hnav {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px clamp(16px, 4vw, 64px);
}
.hnav__bbc svg { width: 92px; height: 28px; color: var(--char); }
.hnav__links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); font-weight: 500; }
.hnav__links a:not(.btn) { color: var(--char); text-decoration: none; }
.hnav__links a:not(.btn):hover { color: var(--coral); }

.hgrid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  align-items: center; gap: clamp(24px, 4vw, 64px);
  max-width: 1320px; margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 64px);
  min-height: clamp(560px, calc(100svh - 120px), 760px);
}
.hcopy { display: flex; flex-direction: column; gap: 22px; max-width: 560px; }
.hcopy__eyebrow { font: 500 13px/1.2 var(--font); letter-spacing: .8px; text-transform: uppercase; color: var(--char); }
.hcopy__title {
  margin: 0;
  font: 500 clamp(38px, 4.2vw, 64px)/1.02 var(--font-head);
  letter-spacing: -.03em; color: var(--char);
}
.hline { display: block; overflow: hidden; padding-bottom: .08em; }
.hline > span { display: block; animation: lineUp .9s var(--ease-out) both; animation-delay: calc(.25s + var(--i) * .12s); }
@keyframes lineUp { from { translate: 0 110%; } to { translate: 0 0; } }
.hcopy__lead { max-width: 40ch; font-size: 18px; color: var(--char); }
.hfade { animation: fadeUp .7s var(--ease-out) .6s both; }
.hcopy .cta-row { margin-top: 4px; gap: 24px; }
.hcopy .hfade:nth-of-type(n) { animation-delay: .6s; }
.hcopy .cta-row.hfade { animation-delay: .72s; }
.hcopy .support.hfade { animation-delay: .86s; }

.support {
  display: flex; align-items: center; gap: 18px;
  width: max-content; max-width: 100%;
  margin-top: 18px;
  padding: 14px 22px 14px 14px;
  background: #fff;
  border: 1px solid var(--lav);
}
.support__logo { width: 76px; height: 80px; flex: none; overflow: visible; }
.support__flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 2.6s ease-in-out infinite; }
.support__text { margin: 0; }
.support__text span { display: block; font: 500 12px/1.2 var(--font); letter-spacing: .8px; text-transform: uppercase; color: var(--char); }
.support__text strong { display: block; margin-top: 4px; font: 700 22px/1.1 var(--font-head); letter-spacing: -.3px; color: var(--ink); }
.support__text small { display: block; margin-top: 4px; max-width: 30ch; font-size: 14px; line-height: 1.4; color: var(--char); }

.hbag { position: relative; z-index: 1; display: grid; place-items: center; animation: bagDrop 1.3s cubic-bezier(.3, 1.4, .5, 1) .35s both; }
@keyframes bagDrop {
  from { translate: 0 -110vh; rotate: -12deg; }
  70%  { rotate: 3deg; }
  to   { translate: 0 0; rotate: 0deg; }
}

.dof--flame svg { display: block; width: 100%; height: auto; aspect-ratio: 261 / 273; overflow: visible;
                  rotate: var(--r0); transform-origin: 50% 100%;
                  animation: dofDrift var(--drift) ease-in-out var(--delay) infinite alternate, flicker 2.4s ease-in-out var(--delay) infinite; }
.dof--flame.dof--far svg { filter: blur(2.5px); }
.dof--flame.dof--near svg { filter: blur(9px); }

.topbar__bbc { width: 80px; height: 24px; color: var(--char); }

.coffee__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1040px; align-items: start; gap: clamp(24px, 5vw, 80px); }
.coffee__copy--left, .coffee__copy--right { justify-self: stretch; align-self: start; margin: 0 !important; max-width: 46ch; }

@media (max-width: 900px) {
  .hgrid { grid-template-columns: 1fr; min-height: 0; padding-top: 8px; }
  .hnav__links a:not(.btn) { display: none; }
  .coffee__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .support { gap: 12px; padding: 12px 14px 12px 10px; }
  .support__logo { width: 60px; height: 63px; }
  .support__text strong { font-size: 19px; }
}

.support { border: 0; }

.dof {
  transform: translate(-50%, -50%) translateY(calc(var(--scroll, 0) * var(--z) * -1.1px));
  transition: none;
}

.coffee {
  background:
    radial-gradient(55% 45% at 50% 48%, rgba(255,255,255,.75), transparent 70%),
    linear-gradient(180deg, var(--lav-2) 0%, var(--lav-3) calc(100% - 96px), var(--lav-3) 100%);
}

body { line-height: 1.4; }

.hcopy__title { line-height: 1; letter-spacing: -0.15rem; }
.why__title, .coffee .eyebrow, .order__form h3, .step h3, .support__text strong {
  font-weight: 500; line-height: 1; letter-spacing: 0;
}

.hcopy__lead { font-size: clamp(1.125rem, .97rem + .59vw, 1.5rem); line-height: 1.2; letter-spacing: -0.03rem; }
.coffee__copy p:not(.eyebrow), .why__copy p, .step p, .order__sub {
  font-size: clamp(1.125rem, 1.07rem + .2vw, 1.25rem); line-height: 1.2; letter-spacing: -0.02rem;
}
.coffee__copy p, .why__copy p { margin-bottom: clamp(1.25rem, 1rem + .6vw, 1.75rem); }
.coffee__copy p:last-child, .why__copy p:last-child { margin-bottom: 0; }

.hcopy__eyebrow { font-size: clamp(14px, .5vw + 10px, 16px); line-height: 1.2; letter-spacing: 0; }
.step__num, .support__text span, .field__label, .choice legend, .qty__label, .hsform .hs_type_of_coffee > label { letter-spacing: 0; }

.btn:not(.btn--link) { line-height: 1.4; letter-spacing: 0; }

.hcopy { max-width: 600px; }
.hcopy__title {
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1; letter-spacing: -0.15rem;
  text-wrap: balance;
  animation: titleIn .9s var(--ease-out) .25s both;
}
@keyframes titleIn { from { opacity: 0; translate: 0 .35em; } to { opacity: 1; translate: 0 0; } }
.hcopy__lead.hfade { animation-delay: .45s; }
.hcopy .cta-row.hfade { animation-delay: .55s; }
.hcopy .support.hfade { animation-delay: .7s; }

.support { margin-top: clamp(40px, 5vw, 72px); }

.coffee { padding-bottom: clamp(112px, 11vw, 176px); }
.title-stack--hero { margin-bottom: clamp(72px, 8vw, 128px); }

.mood {
  position: relative; overflow: hidden;
  height: clamp(360px, 46vw, 680px);
  background: #2a1d14;
}
.mood__img {
  position: absolute; left: 0; top: -12%;
  width: 100%; height: 124%;
  object-fit: cover; object-position: 50% 40%;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

.mood { height: clamp(320px, 36vw, 580px); }
.mood__img { object-position: 50% 18%; }

.mood__img { top: -12%; height: 220%; object-position: 48% 0%; }

.mood__img { top: -28%; height: 200%; object-position: 48% 0%; }

.mood__img { top: -15%; height: 130%; object-position: 50% 0%; }

@media (max-width: 700px) { .mood__img { object-position: 72% 0%; } }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

.dof { animation-duration: 1.1s; }

.footer { background: var(--char); }

.hbag {
  --bag-w: clamp(132px, 14vw, 194px);
  --bag-h: calc(var(--bag-w) * 3.04);
  --bag-d: calc(var(--bag-w) * 0.56);
}
@media (max-width: 700px) { .hbag { --bag-w: min(38vw, 156px); } }

.dof { animation: none; opacity: var(--o); }
.dof__in { display: block; width: 100%; }

.hscroll {
  position: absolute; left: 50%; bottom: clamp(56px, 6vw, 84px); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  translate: -50% 0;
  color: var(--char); text-decoration: none;
  opacity: calc(1 - var(--scroll, 0) / 160);
}
.hscroll > * { animation: fadeUp .7s var(--ease-out) 1.6s both; }
.hscroll__label { font: 500 13px/1 var(--font); text-transform: uppercase; }
.hscroll__line { position: relative; width: 1px; height: 56px; background: var(--lav); overflow: hidden; }
.hscroll__line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 22px;
  background: var(--coral);
  animation: scrollLine 1.8s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes scrollLine { 0% { translate: 0 -22px; } 100% { translate: 0 56px; } }
.hscroll:hover { color: var(--coral); }
.hscroll:focus-visible { outline: 2px solid var(--coral); outline-offset: 6px; }
@media (max-width: 900px) { .hscroll { display: none; } }

.hscroll { position: fixed; bottom: 24px; z-index: 40; transition: opacity .3s; }
.hscroll.is-hidden { opacity: 0; pointer-events: none; }
.hero > a.hscroll.hscroll { position: fixed; z-index: 40; }

.hscroll { gap: 8px; color: color-mix(in srgb, var(--char) 70%, transparent); }
.hscroll__label { font: 500 12px/1 var(--font); text-transform: none; letter-spacing: 0; }
.hscroll__line { height: 36px; background: color-mix(in srgb, var(--lav) 60%, transparent); overflow: visible; }
.hscroll__line::after {
  left: -2px; width: 5px; height: 7px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: #6b3f22;
  animation: drip 2.6s cubic-bezier(.55, 0, .45, 1) infinite;
}
@keyframes drip {
  0%   { translate: 0 -4px; scale: .4; opacity: 0; }
  20%  { opacity: 1; scale: 1; }
  80%  { opacity: 1; }
  100% { translate: 0 34px; opacity: 0; }
}
.hscroll:hover { color: var(--char); }

.hscroll { gap: 0; }
.hscroll__icon {
  position: relative; display: block;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--char) 35%, transparent);
  transition: border-color .25s, background-color .25s;
}
.hscroll__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 11px; margin: -5.5px 0 0 -7px;
  background: var(--char);
  -webkit-mask: var(--arrow, url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'><path d='M7.61913 8.55919L6.45113 7.39119L8.21113 5.63119L8.83513 5.24719L8.75513 4.99119L8.00313 5.10319H0.00312501V3.45519H8.00313L8.75513 3.56719L8.83513 3.31119L8.21113 2.92719L6.45113 1.16719L7.61913 -0.000812531L11.2991 3.67919V4.87919L7.61913 8.55919Z' fill='%23000'/></svg>")) center / contain no-repeat;
          mask: var(--arrow, url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'><path d='M7.61913 8.55919L6.45113 7.39119L8.21113 5.63119L8.83513 5.24719L8.75513 4.99119L8.00313 5.10319H0.00312501V3.45519H8.00313L8.75513 3.56719L8.83513 3.31119L8.21113 2.92719L6.45113 1.16719L7.61913 -0.000812531L11.2991 3.67919V4.87919L7.61913 8.55919Z' fill='%23000'/></svg>")) center / contain no-repeat;
  rotate: 90deg;
  animation: nudgeDown 2.2s ease-in-out infinite;
}
@keyframes nudgeDown { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }
.hscroll:hover .hscroll__icon { border-color: var(--coral); background: var(--coral); }
.hscroll:hover .hscroll__icon::after { background: #fff; }

.hscroll { color: color-mix(in srgb, var(--char) 75%, transparent); transition: opacity .3s, color .25s; }
.hscroll:hover { color: var(--coral); }
.hscroll__mouse { display: block; width: 22px; height: auto; overflow: visible; }
.hscroll__wheel { animation: wheel 1.8s ease-in-out infinite; }
.hscroll__chev  { animation: chev 1.8s ease-in-out infinite; }
@keyframes wheel {
  0%   { translate: 0 0;   opacity: 1; }
  60%  { translate: 0 6px; opacity: 0; }
  61%  { translate: 0 0;   opacity: 0; }
  100% { translate: 0 0;   opacity: 1; }
}
@keyframes chev { 0%, 100% { translate: 0 0; opacity: .7; } 50% { translate: 0 3px; opacity: 1; } }

.hbag { animation-delay: .9s; }

.hbag .bag-stage .bag-float { transition: none; opacity: 1; translate: none; scale: none; }

.hbag { position: relative; }
.dwwbadge {
  position: absolute; z-index: 3;

  left: calc(50% + var(--bag-w) / 2 - 22px);
  top: calc(50% + var(--bag-h) / 2 - var(--bag-h) * .07 - 34px);
  display: flex; align-items: center; gap: 12px;
  color: var(--ink); text-decoration: none;
  animation: fadeUp .8s var(--ease-out) 2.3s both;
}
.dwwbadge__dot {
  display: grid; place-items: center; flex: none;
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--lav);
  transition: scale .3s var(--ease-boing);
}
.dwwbadge__dot svg { width: 40px; height: auto; aspect-ratio: 261 / 273; overflow: visible; }
.dwwbadge__flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 2.6s ease-in-out infinite; }
.dwwbadge__cap { font: 500 12px/1.2 var(--font); color: var(--char); white-space: nowrap; }
.dwwbadge__cap b { display: block; font: 600 13px/1.15 var(--font-head); color: var(--ink); }
.dwwbadge:hover .dwwbadge__dot { scale: 1.06; }
.dwwbadge:hover .dwwbadge__cap b { color: var(--coral); }
.dwwbadge:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; border-radius: 40px; }
@media (max-width: 700px) {
  .dwwbadge__dot { width: 56px; height: 56px; }
  .dwwbadge__dot svg { width: 33px; }
}

.dwwbadge { display: none; }
.dwwtag {
  position: absolute; z-index: 3;
  width: clamp(118px, 9.5vw, 140px); aspect-ratio: 261 / 273;
  left: calc(50% + var(--bag-w) / 2 - 46px);
  top: calc(50% + var(--bag-h) / 2 - var(--bag-h) * .07 - 92px);
  color: #fff; text-decoration: none;
  transform-origin: 46% 4%;
  animation: tagIn .9s cubic-bezier(.3, 1.4, .5, 1) 2.3s both, tagSwing 5s ease-in-out 3.2s infinite;
}
.dwwtag__shape { position: absolute; inset: 0; width: 100%; height: 100%; fill: #FFC21A; overflow: visible;
                 filter: drop-shadow(0 6px 10px rgba(80, 50, 0, .18)); }
.dwwtag__text {
  position: absolute; left: 0; right: 0; top: 47%;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  translate: 0 -50%;
}
.dwwtag__line {
  padding: 2px 5px 1px;
  background: var(--ink);
  font: 700 clamp(9.5px, .78vw, 11.5px)/1.05 var(--font-head);
  text-transform: uppercase; white-space: nowrap;
}
.dwwtag small { margin-top: 6px; font: 500 clamp(7px, .55vw, 8px)/1 var(--font); color: #fff; opacity: .95; }
.dwwtag:hover { animation-play-state: running, paused; }
.dwwtag:hover .dwwtag__shape { fill: #FFB000; }
.dwwtag:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
@keyframes tagIn {
  0%   { opacity: 0; transform: translateY(-24px) rotate(-30deg) scale(.6); }
  100% { opacity: 1; transform: rotate(-8deg); }
}
@keyframes tagSwing { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-2deg); } }

.dwwtag__line { background: var(--coral); }
.dwwtag__text { top: 50%; }

.dwwtag__logo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 10px rgba(80, 50, 0, .16)); }
.dwwtag__flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 2.6s ease-in-out infinite; }

.title-stack, .title-stack--hero {
  display: block; width: auto;
  max-width: 1120px;
  margin: 0 auto clamp(48px, 6vw, 88px);
  font: 500 clamp(44px, 5.4vw, 84px)/1 var(--font-head);
  letter-spacing: -0.15rem;
  color: var(--char);
  text-align: left; text-wrap: balance;
  opacity: 0; translate: 0 24px;
}
.title-stack.in { opacity: 1; translate: 0 0; transition: opacity .8s var(--ease-out), translate .9s var(--ease-out); }
.title-stack .hl, .title-stack .hl + .hl {
  display: inline; padding: 0; margin: 0; border-radius: 0;
  background: none; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: none;
  opacity: 1; transform: none; rotate: none; scale: none; animation: none;
}
.title-stack .hl:hover { scale: none; rotate: none; }

.coffee .title-stack { max-width: 1040px; margin-top: 0; padding-top: clamp(96px, 10vw, 150px); }
.order .title-stack { max-width: 980px; }
.steps .title-stack { max-width: 1120px; }

:root { --ink: #434343; --navy: #434343; }
body { color: var(--char); }

.title-stack, .title-stack--hero { font-size: clamp(36px, 3.6vw, 56px); margin-bottom: clamp(40px, 5vw, 72px); }

.topbar { display: none !important; }

.title-stack .hl, .title-stack.in .hl, .title-stack.in .hl + .hl { animation: none !important; opacity: 1 !important; }

.steps {
  background:
    radial-gradient(55% 45% at 50% 48%, rgba(255,255,255,.75), transparent 70%),
    linear-gradient(180deg, var(--lav-2) 0%, var(--lav-3) 100%);
}

.step::before { display: none; }
.step:hover, .step:nth-child(2):hover { transform: none; box-shadow: none; }
.step:hover .step__num { transform: none; }

.why__inner { align-items: start; }
.coffee {
  padding-bottom: clamp(80px, 10vw, 130px);
  background: var(--paper);
  overflow: clip;
}
.coffee > :not(.coffee__float) { position: relative; z-index: 1; }

@media (max-width: 700px) {
  .coffee__float .dof--focus, .coffee__float .dof:first-child { display: none; }
}

@media (max-width: 900px) {
  .hcopy .cta-row { justify-content: flex-start; }
  .coffee__grid { justify-items: stretch; text-align: left; }
}

@media (max-width: 900px) {
  .hero.hero--bbc { padding-bottom: 40px; }
  .hnav { padding-top: 20px; padding-bottom: 16px; }
  .hgrid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding-top: 0; }
  .hcopy { gap: 14px; }
  .hcopy__title { font-size: clamp(26px, 7vw, 44px); letter-spacing: -0.06rem; }
  .hcopy__lead { font-size: 15px; }
  .hcopy .cta-row { margin-top: 2px; }
  .hcopy .btn { white-space: nowrap; padding-inline: 16px; }
  .hbag { --bag-w: clamp(84px, 24vw, 150px); }
  .hbag .bag-stage { width: calc(var(--bag-w) * 1.35); height: calc(var(--bag-h) + 36px); }
  .dwwtag { scale: .62; left: calc(50% + var(--bag-w) / 2 - 84px); }
}
@media (max-width: 360px) {
  .hcopy .btn { font-size: 13px; padding-inline: 12px; }
}

.details { border: 0; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.details legend { padding: 0; margin-bottom: 12px; }
.details__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
.details__row--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.input { display: grid; gap: 6px; }
.input label { font-size: 14px; font-weight: 600; color: var(--ink); }
.input input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--char); border-radius: 0;
  background: #fff; color: var(--ink);
  font: 500 16px/1.2 var(--font);
  transition: border-color .25s, box-shadow .25s;
}
.input input:hover { border-color: var(--ink); }
.input input:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.input.is-invalid input { border-color: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); }
.order__form .btn[disabled] { opacity: .6; pointer-events: none; }
@media (max-width: 420px) { .details__row { grid-template-columns: 1fr; } }

.pay { padding: clamp(28px, 4vw, 48px); align-self: center; }
.pay[hidden] { display: none; }
.pay__title { margin: 0; font-family: var(--font-head); font-size: 30px; font-weight: 700; line-height: 1.05; text-transform: uppercase; color: var(--ink); }
.pay__title:focus { outline: none; }
.pay__lead { margin: 12px 0 24px; }
.pay__lead strong { color: var(--ink); }
.pay__box {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center;
  padding: 18px;
  background: var(--lav-3);
}
.pay__qr { width: 148px; padding: 10px; background: #fff; line-height: 0; }
.pay__qr[hidden] { display: none; }
.pay__qr[hidden] + .pay__list { grid-column: 1 / -1; }
.pay__qr svg { width: 100%; height: auto; }
.pay__list { display: grid; gap: 12px; margin: 0; }
.pay__list dt { font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--char); }
.pay__list dd { margin: 2px 0 0; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#payAmount { font-family: var(--font-head); font-size: 24px; font-weight: 700; }
.pay__copy {
  margin-left: 6px; padding: 2px 8px;
  border: 1px solid var(--char); background: #fff; color: var(--ink);
  font: 600 12px/1.4 var(--font); cursor: pointer;
}
.pay__copy:hover { border-color: var(--ink); background: var(--paper); }
.pay__copy:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.pay__copy[hidden] { display: none; }
.pay__hint { margin: 14px 0 0; font-size: 14px; }
.pay__summary { margin: 22px 0 6px; padding-top: 18px; border-top: 1px dashed var(--line); font-size: 14px; }
.pay__again { font-size: 16px; }
@media (max-width: 520px) {
  .pay__box { grid-template-columns: 1fr; justify-items: start; }
  .pay__qr { width: 168px; }
}

.hsform__parts[hidden] { display: none; }
.hsform__status { margin: 0 0 22px; padding: 14px 16px; background: var(--lav-3); color: var(--ink); font-size: 15px; }
.hsform form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 12px; }
.hsform form > * { grid-column: 1 / -1; }
.hsform .hs_firstname, .hsform .hs_lastname { grid-column: span 3; }
.hsform .hs_zip { grid-column: span 2; }
.hsform .hs_state { grid-column: span 4; }
@media (max-width: 420px) {
  .hsform .hs_firstname, .hsform .hs_lastname, .hsform .hs_zip, .hsform .hs_state { grid-column: 1 / -1; }
}
.hsform .hs-form-field { display: grid; gap: 6px; margin: 0 0 14px; }
.hsform .hs-form-field > label { font-size: 14px; font-weight: 600; color: var(--ink); }
.hsform .hs-form-required,
.hsform :is(.hs_firstname, .hs_lastname, .hs_address, .hs_zip, .hs_state) > label::after { margin-left: 4px; color: var(--coral); }
.hsform :is(.hs_firstname, .hs_lastname, .hs_address, .hs_zip, .hs_state) > label::after { content: "*"; }
.hsform .inputs-list { list-style: none; margin: 0; padding: 0; }

.hsform .hs_type_of_coffee { gap: 0; margin-bottom: 22px; }
.hsform .hs_type_of_coffee > label { font-family: var(--font-head); font-weight: 700; }
.hsform .hs_type_of_coffee .inputs-list { display: flex; flex-wrap: wrap; gap: 10px; }
.hsform .hs-form-radio-display { display: block; }
.hsform .hs-form-radio-display input { width: 100%; height: 100%; margin: 0; padding: 0; }

.hsform .qty__quip { margin-bottom: 22px; }
.hsform .field { margin-bottom: 22px; }
.hsform .hsform__group { margin: 0 0 12px; }

.hsform .hs-input.invalid, .hsform .is-invalid .hs-input { border-color: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); }
.hsform .hs-error-msgs { list-style: none; margin: 0; padding: 0; }
.hsform .hs-error-msg { color: var(--coral); font-size: 14px; font-weight: 600; }
.hsform .field__error[hidden] { display: none; }

.hsform .legal-consent-container { margin: 0 0 20px; font-size: 14px; color: var(--char); }
.hsform .legal-consent-container .hs-form-field { margin: 0; }
.hsform .hs-form-booleancheckbox-display { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-weight: 500; line-height: 1.45; }
.hsform .hs-form-booleancheckbox-display input {
  flex: none; width: 20px; height: 20px; margin: 0; padding: 0;
  accent-color: var(--ink); cursor: pointer;
}
.hsform .legal-consent-container p { margin: 0 0 8px; }

.hsform .legal-consent-container .hs-form-booleancheckbox-display > span { margin: 0; }
.hsform .legal-consent-container .hs-error-msgs label { color: var(--coral); }

.hsform .hs_submit .actions { margin: 0; }
.hsform .order__small { margin-top: 14px; }

.hsform .hs_amount_of_coffee, .hsform .hs_bbc_colleague, .hsform .hs-button, .hsform .hs_error_rollup { display: none; }

.pay__summary:empty { display: none; }
.pay #payRetry { margin-top: 18px; }
.pay #payRetry:disabled { opacity: .6; cursor: progress; }
.pay__again[hidden], #payRetry[hidden] { display: none; }

.pay__hint + .pay__again { margin-top: 18px; }