/* Toasty · concept coffee bar by @hamzahbuilds (called Velvet Rush until v6; the folder keeps that name)
   The look follows the AyzZ "LOUNGE" coffee site: one warm family (cream, off-white, dark brown) and one orange,
   cups printed all over in their flavour colours, a bold tight grotesk for headlines (Inter Tight 800) and a heavy
   condensed display face for the big words (Archivo, condensed black). Key words get an orange highlighter sweep on
   light ground and turn light orange on dark ground. */

@font-face { font-family: "Archivo"; src: url(fonts/archivo-var.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url(fonts/inter-tight-var.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #F3E6D3;
  --bg-2: #FBF6EE;
  --ink: #3A1A0C;
  --accent: #E8732A;
  --accent-2: #F4A762;
  --dark: #2A140A;
  --dark-2: #3A1D10;
  --ink-2: rgba(58, 26, 12, .66);
  --ink-3: rgba(58, 26, 12, .14);
  --on-dark: #FBEFE2;
  --on-dark-2: rgba(251, 239, 226, .7);
  --on-dark-3: rgba(251, 239, 226, .16);
  --head: "Inter Tight", system-ui, sans-serif;
  --display: "Archivo", "Inter Tight", sans-serif;
  --sans: "Inter Tight", system-ui, sans-serif;
  --gut: clamp(20px, 3.4vw, 60px);
  --ring-y: 3vh;
  --cw: 420px;
  --ch: 560px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--bg-2); }

/* a faint paper grain (no blend mode: a full-screen blend repaints the whole page on every scroll frame) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- type ---------- */
.display { margin: 0; font-family: var(--head); font-weight: 800; letter-spacing: -.05em; line-height: .9; }
.hl { position: relative; z-index: 0; white-space: nowrap; }
.hl::before { content: ""; position: absolute; z-index: -1; left: -.06em; right: -.06em; top: .46em; bottom: .02em; border-radius: .06em; background: var(--accent); transform: scaleX(var(--hl, 0)); transform-origin: left center; }
.hl.is-on { --hl: 1; }
.dark .hl { color: var(--accent-2); }
.dark .hl::before { display: none; }
.kicker { margin: 0 0 20px; font: 700 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 32ch; }
.dark { color: var(--on-dark); }
.dark .note { color: var(--on-dark-2); }
.big { font-family: var(--display); font-weight: 900; font-stretch: 62%; text-transform: uppercase; letter-spacing: -.01em; }

.pill { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px; border-radius: 999px; background: var(--ink); color: var(--bg-2); font: 700 13px/1 var(--sans); letter-spacing: .01em; text-decoration: none; transition: transform .5s var(--ease), background-color .3s; }
.pill:hover { transform: translateY(-2px); }
.pill--orange { background: var(--accent); color: var(--bg-2); padding: 6px 6px 6px 22px; }
.pill__arrow { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: var(--bg-2); color: var(--ink); font: 700 20px/1 var(--sans); transition: transform .5s var(--ease); }
.pill:hover .pill__arrow { transform: translateX(3px); }
.pill:focus-visible, .film-btn:focus-visible, .nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.split-line { overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }

/* ---------- loader: the bean on silk, torn in two ---------- */
.loader { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.tear { position: absolute; inset: 0; will-change: transform; }
.tear--r { z-index: 2; }
.tear__rim { position: absolute; inset: 0; background: #F6E9D6; opacity: 0; }
.tear__face { position: absolute; inset: 0; opacity: .999; } /* (not 1: each half is flattened first and then cut along the tear, else the cup's own layers each show a faint seam there) */
.lface { position: absolute; inset: 0; overflow: hidden; background: var(--dark); color: var(--on-dark); }
.lface__silk { position: absolute; inset: -4%; background: url(img/loader-silk.webp) center / cover; will-change: transform; }
.lface::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 46%, rgba(42, 20, 10, 0) 18%, rgba(42, 20, 10, .55) 62%, rgba(42, 20, 10, .92) 100%); }
.lface__center { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.6vh; }
/* the cup: a glass outline that fills with latte; when full, its orange lid snaps on */
/* the cup comes up and fills from the first frame, all in CSS on its own layers, so the busy page under it can't make
   it stutter. The fill: most of the way in 1.6 s, then a slow creep while the page finishes; main.js takes it from
   there (the last of the coffee, the lid, the tear). ?capture steps these same animations frame by frame. */
.lcup { position: relative; width: clamp(130px, 12vw, 240px); aspect-ratio: 200 / 270; animation: lcupIn .8s cubic-bezier(.16, 1, .3, 1) .05s both; }
.lcup > svg, .lcup__in { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* the inside of the cup (its outline path, in % of the 200 × 270 drawing) */
.lcup__in { clip-path: polygon(11% 21.48%, 89% 21.48%, 79% 87.41%, 78.75% 90%, 77% 92.04%, 71% 92.59%, 29% 92.59%, 23% 92.04%, 21.25% 90%, 21% 87.41%); }
/* the coffee's surface: 254 (empty) to 66 (full) of the cup's 270, as a share of its height */
.lcup__coffee { position: absolute; inset: 0; transform: translateY(94.074%); will-change: transform; animation: lcupFill 5.75s .15s both; }
.lcup__wave { position: absolute; left: -100%; top: -3.7037%; width: 300%; height: 125.926%; will-change: transform; animation: lcupWave 1.3s linear infinite; }
.lcup__wave svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes lcupIn { from { opacity: 0; transform: translateY(24px); } }
@keyframes lcupFill {
  0% { transform: translateY(94.074%); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  27.83% { transform: translateY(34.889%); animation-timing-function: cubic-bezier(.33, 1, .68, 1); } /* 85% full at 1.6 s */
  100% { transform: translateY(29.319%); } /* 93% */
}
@keyframes lcupWave { to { transform: translateX(-16.6667%); } } /* one wave (100 of the 600 drawn) */
.lface__silk { animation: lfaceSilk 3s cubic-bezier(.33, 1, .68, 1) both; }
@keyframes lfaceSilk { from { transform: scale(1.12); } }
/* the name rises letter by letter out of a mask */
.lch { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em 0 .02em; margin: -.08em 0 -.02em; }
.lch > span { display: inline-block; animation: lchIn .9s cubic-bezier(.16, 1, .3, 1) calc(.25s + var(--i) * .04s) both; }
@keyframes lchIn { from { transform: translateY(110%); } }
.lcup__glass { fill: rgba(251, 239, 226, .07); }
.lcup__line { fill: none; stroke: var(--on-dark); stroke-width: 5; stroke-linejoin: round; }
.lcup__rim { fill: none; stroke: var(--on-dark); stroke-width: 7; stroke-linecap: round; }
.lcup__liquid { fill: #9C5526; }
.lcup__crema { fill: none; stroke: #E8B07A; stroke-width: 9; }
.lcup__lid { opacity: 0; }
.lcup__skirt { fill: #C95D1C; }
.lcup__dome { fill: var(--accent); }
.lcup__slot { fill: var(--dark); }
.lface__name { margin: 0; font: 900 clamp(54px, 6.6vw, 130px)/.86 var(--display); font-stretch: 62%; text-transform: uppercase; letter-spacing: -.005em; white-space: nowrap; }
.lface__b { color: var(--accent); }

/* ---------- nav: a floating pill; an orange highlight slides to the link you point at ---------- */
.nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; padding: 0 var(--gut); pointer-events: none; }
.nav__bar {
  pointer-events: auto;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 7px 7px 7px 10px;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(251, 246, 238, .74);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 14px 34px -18px rgba(58, 26, 12, .35), inset 0 0 0 1px rgba(58, 26, 12, .07);
  transition: transform .6s var(--ease), background-color .45s, color .45s, box-shadow .45s;
}
.nav.is-light .nav__bar { color: var(--on-dark); background: rgba(42, 20, 10, .62); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(251, 239, 226, .1); }
.nav.is-hidden .nav__bar { transform: translateY(-220%); } /* far enough that its soft shadow goes too */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__cup { width: 34px; height: 44px; object-fit: contain; }
.brand__name { display: flex; flex-direction: column; font: 900 27px/.86 var(--display); font-stretch: 62%; text-transform: uppercase; }
.brand__name b { color: var(--accent); font-weight: 900; }
.brand__name small { margin-top: 3px; font: 700 8px/1 var(--sans); letter-spacing: .3em; opacity: .7; }
.nav__links { position: relative; display: flex; gap: 2px; }
.nav__links a { position: relative; z-index: 1; padding: 11px 16px; border-radius: 999px; text-decoration: none; font: 600 13px/1 var(--sans); transition: color .35s; }
.nav__links a.is-hot { color: var(--bg-2); }
.nav__pill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 999px; background: var(--accent); opacity: 0; transition: transform .5s var(--ease), width .5s var(--ease), opacity .3s; }
.nav__cta { padding: 5px 5px 5px 20px; }
.nav__cta .pill__arrow { width: 34px; height: 34px; }
/* the right end: an "open" chip with a soft orange pulse (placeholder hours, like the footer's), then the button */
.nav__end { display: flex; align-items: center; gap: 16px; }
.nav__open { display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--sans); white-space: nowrap; opacity: .78; }
.nav__open i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: openPulse 2.4s ease-out infinite; }
@keyframes openPulse { 0% { box-shadow: 0 0 0 0 rgba(232, 115, 42, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(232, 115, 42, 0); } }
/* placeholder pages ("Our story", "Gift cards"): a small note drops in under the link */
.nav__bar { position: relative; }
.nav__soon { position: absolute; top: calc(100% + 10px); left: 0; padding: 9px 14px; border-radius: 999px; font: 600 12px/1 var(--sans); white-space: nowrap; color: var(--bg-2); background: var(--ink); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .3s, transform .3s var(--ease); }
.nav__soon.is-on { opacity: 1; transform: none; }

/* ---------- scene: hero → ring → the cup in its beans and the dive ---------- */
.scene { position: relative; z-index: 1; }
.stage { position: relative; height: calc(var(--vh, 1vh) * 100); overflow: hidden; background: var(--bg); }
/* the wash: two soft glows, each centred just inside a corner and stretched along the screen's diagonal, so colour comes
   in from the top-left and the bottom-right and the middle stays cream. Each corner holds one glow per colour; the scene
   cross-fades them (opacity only, each on its own layer) and the drift runs on the GPU. */
.wash { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0; }
.wash__corner { position: absolute; width: 100vw; height: 80vh; will-change: transform; }
.wash__corner--tl { left: -37vw; top: -29vh; }
.wash__corner--br { right: -37vw; bottom: -29vh; }
.wash__drift { position: absolute; inset: 0; animation: washDrift 11s ease-in-out infinite alternate; }
.wash__corner--br .wash__drift { animation-duration: 13s; animation-delay: -6s; }
@keyframes washDrift { from { transform: rotate(23deg) scale(1); } to { transform: rotate(30deg) scale(1.12) translateX(4%); } }
.wash__glow { position: absolute; inset: 0; border-radius: 50%; opacity: 0; will-change: opacity; background: radial-gradient(closest-side, var(--g1), var(--g2) 42%, var(--g3) 72%, rgba(243, 230, 211, 0) 100%); }
.wash__glow--orange { --g1: rgba(236, 122, 48, .46); --g2: rgba(244, 160, 92, .3); --g3: rgba(246, 190, 140, .12); }
.wash__glow--rose { --g1: rgba(228, 110, 84, .42); --g2: rgba(238, 152, 130, .28); --g3: rgba(242, 192, 174, .11); }
.wash__glow--gold { --g1: rgba(234, 172, 52, .5); --g2: rgba(244, 200, 110, .32); --g3: rgba(246, 220, 160, .12); }
.wash__corner--tl .wash__glow--orange, .wash__corner--br .wash__glow--rose { opacity: 1; } /* the hero: orange top left, rose bottom right */
@media (prefers-reduced-motion: reduce) { .wash__drift { animation: none; transform: rotate(26deg); } }
.marquee { position: absolute; left: 0; top: calc(50% + var(--ring-y)); width: 100%; z-index: 1; pointer-events: none; opacity: 0; }
.marquee__track { display: flex; align-items: center; width: max-content; white-space: nowrap; font: 900 clamp(120px, 17vw, 340px)/.86 var(--display); font-stretch: 62%; text-transform: uppercase; color: var(--ink); will-change: transform; }
.marquee__track .alt { color: var(--accent); }
.marquee__track span { padding: 0 .12em; }
.marquee__track i { width: .1em; height: .1em; border-radius: 50%; background: var(--accent); flex: none; }

/* the hero, as Hamzah placed it in the ?place editor (2026-11-02, on a 2560×1313 screen): the pumpkin cup (main.js,
   HERO) with Cinnamon Dolce behind it on the left, Maple Pecan big on the right, House Roast high on the left above the
   headline. Each cup has a centre (--cx in vw, --cy in vh) and a height (--hh in vh). On screens narrower than 16:9 the
   height is capped at what it would be at 16:9 (× .5625vw), so the group shrinks evenly instead of crowding together. */
.hcups { position: absolute; inset: 0; pointer-events: none; } /* no z-index of its own: a cup can sit behind the pumpkin cup (3) or in front of it (6) */
.hcup { --h: min(var(--hh) * 1vh, var(--hh) * .5625vw); position: absolute; z-index: 3; left: calc(var(--cx) * 1vw - var(--h) * .375); top: calc(var(--cy) * 1vh - var(--h) / 2); height: var(--h); aspect-ratio: 3 / 4; will-change: transform, opacity; }
.hcup img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 34px 34px rgba(58, 26, 12, .26)); will-change: transform; }
.hcup--1 { --cx: 35.4; --cy: 39.8; --hh: 53; }
.hcup--3 { --cx: 83; --cy: 48.5; --hh: 58; }
.hcup--4 { --cx: 15.3; --cy: 28.9; --hh: 45; }
.hero-copy { position: absolute; left: 7.7vw; top: 53.5vh; z-index: 4; }
.hero-title { font-size: clamp(56px, 7.4vw, 210px); }

.ring-wrap { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; perspective: 1900px; pointer-events: none; }
.ring { position: relative; width: var(--cw); height: var(--ch); transform-style: preserve-3d; } /* its --ring-y drop is set by GSAP */
.card { position: absolute; inset: 0; transform: rotateY(calc(var(--i) * 90deg)) translateZ(calc(var(--cw) * .5)); backface-visibility: hidden; -webkit-backface-visibility: hidden; color: var(--ink); }
.card__bg { position: absolute; inset: 0; transform-origin: 50% 85%; border-radius: 26px; background: var(--c); box-shadow: 0 40px 80px -40px rgba(58, 26, 12, .55); }
.card--0 { --c: #FBDDBF; }
.card--1 { --c: #F0CBBE; }
.card--2 { --c: #F5E1BF; }
.card--3 { --c: var(--dark); color: var(--on-dark); }
.card__text { position: absolute; left: 0; right: 0; top: 0; padding: clamp(18px, 2.2vw, 30px); }
.card__label { margin: 0 0 12px; font: 700 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
.card__name { margin: 0; font: 900 clamp(46px, calc(var(--cw) * .16), 84px)/.86 var(--display); font-stretch: 62%; text-transform: uppercase; }
.card__line { margin: 10px 0 0; font-size: 13px; line-height: 1.45; opacity: .8; max-width: 26ch; }
.cardcup { position: absolute; left: 50%; bottom: 3%; height: 56%; aspect-ratio: 3 / 4; translate: -50% 0; }
.cardcup__c { display: block; width: 100%; height: 100%; }
.mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; color: var(--on-dark); font-family: var(--display); font-weight: 900; font-stretch: 62%; text-transform: uppercase; line-height: .84; white-space: nowrap; }
.mark__a, .mark__b { display: block; font-size: calc(var(--cw) * .26); }
.mark__b { color: var(--accent); }
.glasswrap { position: absolute; left: 50%; bottom: 3%; height: 56%; aspect-ratio: 3 / 4; transform-origin: 50% 100%; will-change: transform; }
.glass { position: relative; display: block; width: 100%; height: 100%; transform-origin: 50% 100%; }
.glass-shadow { position: absolute; left: 18%; right: 18%; bottom: 1%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(58, 26, 12, .34), rgba(58, 26, 12, 0)); }
.hero-ui { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.hero-ui > * { pointer-events: auto; }
.hero-cta { position: absolute; left: 7.9vw; top: 86.6vh; z-index: 8; }
.hero-note { position: absolute; right: var(--gut); top: 88.5vh; z-index: 8; text-align: right; color: var(--ink); }
.scene-note { position: absolute; right: var(--gut); top: 16vh; z-index: 8; opacity: 0; text-align: right; }

/* the dive: the cup in its beans fills the screen, then the Maelstrom clip plays with the scroll (drawn on the canvas) */
/* the layer the dark card opens onto: it starts as the card (the shade and the name copy the card) */
.plunge { position: absolute; inset: 0; z-index: 9; visibility: hidden; overflow: hidden; background: var(--dark); }
.plunge__shade { position: absolute; inset: 0; background: var(--dark); }
.plunge__mark { transform: none; translate: -50% calc(-50% + var(--ring-y)); }
.dive { position: absolute; inset: 0; will-change: transform; }
.dive img { width: 100%; height: 100%; object-fit: cover; }
.dive__seq { position: absolute; inset: 0; width: 100%; height: 100%; }
.dive__shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(42, 20, 10, 0) 22%, rgba(42, 20, 10, .55) 100%); pointer-events: none; }
.dive-word { position: absolute; top: 50%; z-index: 3; font: 900 clamp(110px, 15vw, 320px)/.86 var(--display); font-stretch: 62%; text-transform: uppercase; text-shadow: 0 20px 60px rgba(0, 0, 0, .6); will-change: transform; }
.dive-word--l { right: calc(50% + max(17vw, 30.2vh) + 1.5vw); } /* just outside the cup: its rim is 17% of the clip's width */
.dive-word--r { left: calc(50% + max(17vw, 30.2vh) + 1.5vw); color: var(--accent); }
/* ---------- the visit, over the café glide: a big cup that changes flavour ---------- */
.visit { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
/* the café darkens behind it (more at the edges and the top), so the cup, the orange pour and the words stand clear */
.visit__shade { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 70% 75% at 50% 58%, rgba(24, 12, 5, .42) 0%, rgba(24, 12, 5, .7) 70%, rgba(24, 12, 5, .82) 100%), linear-gradient(180deg, rgba(24, 12, 5, .5) 0%, rgba(24, 12, 5, 0) 32%); }
/* over the café: no dotted guide ahead of the pour, a soft dark edge in place of the cream one (it still keeps the pour
   clear of the cup's print), and dark dots ringed in orange: no white lines */
.visit .how__guide { display: none; }
.visit .how__case { stroke: rgba(24, 12, 5, .5); stroke-width: 13; }
.visit .how__dot { fill: #2A140A; }
/* the pour: two layers, one behind the cup and one in front, so it really wraps round it */
.how__svg { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.how__svg--front { z-index: 4; }
.how__guide { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 1 10; stroke-linecap: round; }
.how__case { fill: none; stroke: var(--bg-2); stroke-width: 15; stroke-linecap: butt; stroke-linejoin: round; }
.how__pour { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.how__pour--back { stroke: #B4561C; stroke-width: 6; }
.how__dot { fill: var(--bg-2); stroke: var(--accent); stroke-width: 4; }
.how__tip { fill: var(--accent); }
.how__halo { opacity: .22; }
.how__head { position: absolute; z-index: 4; left: var(--gut); right: var(--gut); top: 14vh; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; pointer-events: none; }
.how__title { font-size: clamp(56px, 6.4vw, 140px); }
.how__cupwrap { position: absolute; z-index: 3; left: 50%; top: 58%; height: min(64vh, 640px); aspect-ratio: 3 / 4; }
.how__cup { position: relative; display: block; width: 100%; height: 100%; }
.how__tint { position: absolute; left: 50%; top: 48%; width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, var(--tint, #F6C59A) 0%, var(--tint, #F6C59A) 22%, rgba(243, 230, 211, 0) 70%); opacity: .85; }
.how__cupwrap .glass-shadow { left: 20%; right: 20%; bottom: 2%; }
.hsteps { list-style: none; margin: 0; padding: 0; }
.hstep { position: absolute; z-index: 4; width: min(26vw, 380px); }
.hstep__name { margin: 0 0 10px; font: 800 clamp(34px, 3.4vw, 70px)/.95 var(--head); letter-spacing: -.045em; } /* the step's headline: no numbers */
/* every step leans toward the cup, so its number sits beside its dot on the pour */
.hstep { text-align: right; }
.hstep .note { margin-left: auto; }
.hstep.is-right { text-align: left; }
.hstep.is-right .note { margin-left: 0; }
.visit .bean { position: absolute; z-index: 2; width: clamp(48px, 5vw, 96px); height: auto; pointer-events: none; filter: drop-shadow(0 18px 18px rgba(58, 26, 12, .3)); will-change: transform; } /* kept on their own layers: when their drift stops, folding them back into the stage repainted it all in one frame */
.visit .b1 { left: 3vw; top: 52%; rotate: -24deg; }
.visit .b2 { right: 4vw; top: 30%; rotate: 38deg; width: clamp(40px, 3.6vw, 70px); }
.visit .b3 { right: 30vw; top: 86%; rotate: 70deg; width: clamp(36px, 3vw, 60px); }
.visit .b4 { left: 30vw; top: 84%; rotate: -50deg; width: clamp(36px, 3vw, 60px); }

/* ---------- reviews: three flavour cards, each a marked sample; the section rides up over the café ---------- */
.word { position: relative; z-index: 28; margin-top: calc(var(--vh, 1vh) * -100); min-height: calc(var(--vh, 1vh) * 100); padding: 14vh var(--gut) 16vh; background: var(--bg); border-radius: 28px 28px 0 0; box-shadow: 0 -40px 80px -20px rgba(0, 0, 0, .45); }
.word__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.word__title { font-size: clamp(56px, 6.4vw, 140px); }
.rcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 2.6vw, 48px); margin-top: 12vh; padding: 0 4vw; }
.rcard { position: relative; height: clamp(380px, 56vh, 600px); will-change: transform; }
.rcard__in { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(26px, 2.4vw, 44px); border-radius: 28px; background: var(--c); color: var(--t); box-shadow: 0 40px 70px -36px rgba(58, 26, 12, .55); transition: transform .6s var(--ease); }
.rcard:hover .rcard__in { transform: translateY(-16px) rotate(-1deg); }
.rcard--pumpkin { --c: #E8732A; --t: #FFF4E6; }
.rcard--maple { --c: #D99A48; --t: #2B1A10; }
.rcard--cinnamon { --c: #7A2E1A; --t: #FBEFE2; }
.rcard__flavour { margin: 0; font: 900 clamp(44px, 3.9vw, 82px)/.86 var(--display); font-stretch: 62%; text-transform: uppercase; }
.rcard__quote { margin: auto 0 0; font: 800 clamp(24px, 2.05vw, 40px)/1.08 var(--head); letter-spacing: -.035em; }
.rcard__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 26px 0 0; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--t) 30%, transparent); font: 600 12px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.rcard__tag { flex: none; padding: 6px 10px; border: 1px solid currentColor; border-radius: 999px; font: 700 10px/1 var(--sans); letter-spacing: .2em; }
/* each card's cup leans out of its top corner and bobs */
.rcard__cup { position: absolute; top: -13%; right: -8%; height: 50%; width: auto; aspect-ratio: 3 / 4; rotate: 12deg; filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .35)); animation: rcupBob 4.5s ease-in-out infinite; pointer-events: none; }
.rcard:nth-child(2) .rcard__cup { rotate: -10deg; animation-delay: -1.5s; }
.rcard:nth-child(3) .rcard__cup { right: -3%; animation-delay: -3s; }
@keyframes rcupBob { 50% { translate: 0 -12px; } }

/* ---------- footer ---------- */
.foot { position: relative; z-index: 2; overflow: hidden; padding: 16vh var(--gut) 0; background: var(--dark); border-radius: 28px 28px 0 0; }
.foot__top, .foot__cols, .foot__concept { position: relative; z-index: 2; }
.foot__top { z-index: 3; } /* over the cups' lids */
.foot__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.foot__title { font-size: clamp(64px, 9.4vw, 210px); }
.foot__ask { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-bottom: 1vh; }
.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--on-dark-3); }
.foot__cols p { margin: 0; font-size: 15px; line-height: 1.5; }
.foot__cols .kicker { margin-bottom: 14px; color: var(--on-dark-2); }
.foot__cols small { color: var(--on-dark-2); font-size: 12px; }
.foot__cols a { text-decoration: none; }
.foot__concept { margin: 18px 0 10vh; font-size: 12px; color: var(--on-dark-2); }
.foot__concept b { color: var(--on-dark); font-weight: 700; }
/* the four fall cups stand along the bottom edge, cut off by it, the middle two in front */
.foot__cups { position: relative; z-index: 2; height: 50vh; margin: -2vh calc(var(--gut) * -1) 0; pointer-events: none; }
.fcup { position: absolute; bottom: -3vh; left: calc(var(--x) - var(--h) * .375); height: var(--h); aspect-ratio: 3 / 4; transform-origin: 50% 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); will-change: transform; }
.foot__glow { position: absolute; left: 50%; bottom: -34vh; width: 130vh; height: 130vh; margin-left: -65vh; z-index: 0; opacity: 0; pointer-events: none; }
.foot__glow::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 115, 42, .6), rgba(232, 115, 42, .2) 45%, rgba(232, 115, 42, 0) 72%); animation: glowPulse 3.4s ease-in-out infinite; }
@keyframes glowPulse { 50% { transform: scale(1.08); opacity: .82; } }
.fcup--1 { --x: 32vw; --h: 40vh; z-index: 2; }
.fcup--2 { --x: 47vw; --h: 52vh; z-index: 3; }
.fcup--3 { --x: 62vw; --h: 42vh; z-index: 2; }
.fcup--4 { --x: 75vw; --h: 29vh; z-index: 1; bottom: 4vh; }
/* beans at different depths: small and sharp far back, big and soft up front */
.foot .bean { position: absolute; z-index: 1; width: clamp(48px, 5vw, 96px); height: auto; pointer-events: none; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .4)); }
.foot .fb1 { left: 19vw; bottom: 30vh; rotate: 30deg; }
.foot .fb2 { left: 84vw; bottom: 40vh; rotate: -40deg; width: clamp(40px, 3.6vw, 70px); }
.foot .fb3 { left: 58vw; bottom: 47vh; rotate: 80deg; width: clamp(36px, 3vw, 58px); }
.foot .fb4 { left: 5vw; bottom: 12vh; rotate: -20deg; width: clamp(70px, 7vw, 130px); filter: blur(3px) drop-shadow(0 18px 18px rgba(0, 0, 0, .4)); }
.foot .fb5 { left: 69vw; bottom: 54vh; rotate: 50deg; width: clamp(30px, 2.4vw, 46px); }
.foot .fb6 { left: 87vw; bottom: 8vh; z-index: 3; rotate: 15deg; width: clamp(90px, 9vw, 170px); filter: blur(4px) drop-shadow(0 18px 18px rgba(0, 0, 0, .4)); }
.foot .fb7 { left: 12vw; bottom: 42vh; rotate: -60deg; width: clamp(28px, 2.2vw, 42px); }

/* ---------- play the film ---------- */
.film-btn { position: fixed; left: var(--gut); bottom: 22px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px 11px 12px; border: 1px solid currentColor; border-radius: 999px; color: var(--ink); background: rgba(251, 246, 238, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; opacity: 0; pointer-events: none; transition: color .5s var(--ease), background-color .5s, opacity .5s; }
.film-btn.is-ready { opacity: 1; pointer-events: auto; }
.film-btn.is-light { color: var(--on-dark); background: rgba(42, 20, 10, .55); }
.film-btn__icon { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); position: relative; }
.film-btn__icon::after { content: ""; position: absolute; left: 7px; top: 5px; border-left: 6px solid var(--bg-2); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.film-btn.is-playing .film-btn__icon::after { left: 6px; top: 5px; width: 6px; height: 8px; border: 0; border-left: 2px solid var(--bg-2); border-right: 2px solid var(--bg-2); }
.demo .film-btn { display: none; }
.demo, .demo * { cursor: none !important; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  :root { --ring-y: 6vh; }
  .nav { top: 10px; padding: 0 12px; }
  .nav__links, .nav__open { display: none; }
  .nav__cta { font-size: 12px; }
  .hcup--1 { left: calc(12vw - 7.5vh); top: 15vh; height: 20vh; }
  .hcup--3 { left: calc(88vw - 7.5vh); top: 33vh; height: 20vh; }
  .hcup--4 { display: none; }
  .hero-copy { top: auto; left: var(--gut); bottom: calc(4vh + 80px); right: var(--gut); }
  .hero-title { font-size: clamp(56px, 17vw, 84px); }
  .hero-cta { top: auto; left: var(--gut); bottom: 4vh; }
  .hero-note { display: none; }
  .scene-note { display: none; }
  .marquee__track { font-size: 32vw; }
  .dive-word { font-size: 28vw; }
  .dive-word--l { top: 22%; right: auto; left: var(--gut); }
  .dive-word--r { top: auto; bottom: 18%; left: auto; right: var(--gut); }
  .how__head { top: 12vh; flex-direction: column; align-items: flex-start; gap: 10px; }
  .how__head .note { display: none; }
  .how__title { font-size: 13vw; }
  .how__svg { display: none; }
  .how__cupwrap { top: 50%; height: 46vh; }
  .hstep { left: var(--gut) !important; right: var(--gut) !important; top: auto !important; bottom: 4vh; width: auto; text-align: left !important; }
  .hstep__name { margin: 0 0 6px; font-size: 30px; }
  .hstep .note { margin: 0 !important; }
  .visit .b3, .visit .b4 { display: none; }
  .word__head, .foot__top { flex-direction: column; align-items: flex-start; }
  .word__title { font-size: 13vw; }
  .rcards { grid-template-columns: 1fr; gap: 26px; padding: 0; }
  .rcard { height: 360px; }
  .foot__title { font-size: 16vw; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .foot__cups { height: 26vh; }
  .fcup { bottom: -5vh; }
  .fcup--1 { --x: 16vw; --h: 22vh; } .fcup--2 { --x: 39vw; --h: 26vh; } .fcup--3 { --x: 62vw; --h: 25vh; } .fcup--4 { --x: 85vw; --h: 22vh; }
  .foot .fb1, .foot .fb3, .foot .fb5, .foot .fb7 { display: none; }
  .foot .fb2 { top: 34vh; }
  .film-btn { display: none; }
}

@media (min-width: 1800px) {
  .note { font-size: clamp(14px, .78vw, 19px); }
  .kicker { font-size: clamp(11px, .58vw, 14px); }
  .nav__links a { font-size: clamp(13px, .7vw, 17px); }
  .nav__open, .nav__soon { font-size: clamp(12px, .62vw, 15px); }
  .pill { font-size: clamp(13px, .7vw, 16px); }
  .card__line { font-size: clamp(13px, .7vw, 16px); }
  .card__label { font-size: clamp(10px, .52vw, 12px); }
  .film-btn { font-size: clamp(11px, .58vw, 13px); }
}

@media (prefers-reduced-motion: reduce) {
  .pill, .rcard__in, .nav__bar, .nav__pill { transition: none; }
  .rcard__cup, .foot__glow::before { animation: none; }
  .loader * { animation: none !important; }
  .lcup__coffee { transform: translateY(34.889%); }
}