@import "tailwindcss";

:root {
  --ink: #160c08;
  --espresso: #24120b;
  --roast: #4a2817;
  --gold: #e1a929;
  --gold-light: #f3ca67;
  --cream: #f5efe4;
  --paper: #fffaf0;
  --muted: #a79787;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Inter Variable", Inter, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--gold); color: var(--ink); }

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  height: 104px;
  padding: 0 clamp(24px, 5vw, 76px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: white;
  border-bottom: 1px solid rgba(255,255,255,.17);
}
.brand { display: inline-flex; align-items: center; gap: 13px; width: max-content; font-weight: 760; letter-spacing: -.02em; }
.brand img { width: 52px; height: 52px; object-fit: contain; border-radius: 50%; }
.brand span { display: flex; flex-direction: column; font-size: 16px; line-height: 1.05; }
.brand small { color: rgba(255,255,255,.58); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; margin-top: 7px; }
.site-header nav { display: flex; gap: 36px; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.site-header nav a { position: relative; padding: 12px 0; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 5px; height: 1px; background: var(--gold); transition: right .25s ease; }
.site-header nav a:hover::after { right: 0; }
.header-cta { justify-self: end; padding: 12px 21px; border: 1px solid rgba(255,255,255,.65); border-radius: 999px; font-size: 12px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; transition: .25s ease; }
.header-cta:hover { color: var(--ink); background: white; }

.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: white; isolation: isolate; overflow: hidden; }
.hero-photo, .visit-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo { object-position: center 48%; transform: scale(1.02); animation: heroReveal 1.5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes heroReveal { from { transform: scale(1.1); filter: brightness(.55); } to { transform: scale(1.02); filter: brightness(1); } }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,9,5,.92) 0%, rgba(18,9,5,.58) 43%, rgba(18,9,5,.18) 76%), linear-gradient(0deg, rgba(12,6,4,.88) 0%, transparent 46%); z-index: -1; }
.hero-grain { position: absolute; inset: 0; z-index: -1; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.hero-content { width: min(820px, calc(100% - 48px)); margin: 0 0 clamp(110px, 15vh, 165px) clamp(24px, 8vw, 120px); position: relative; z-index: 2; }
.eyebrow, .section-index { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 13px; color: rgba(255,255,255,.68); }
.eyebrow span { width: 31px; height: 1px; background: var(--gold); }
.hero h1 { margin: 24px 0 26px; font-family: "Cormorant Garamond Variable", "Cormorant Garamond", Georgia, serif; font-size: clamp(67px, 8.4vw, 132px); font-weight: 400; line-height: .83; letter-spacing: -.068em; }
.hero h1 em { display: block; color: var(--gold-light); font-weight: 400; }
.hero-copy { max-width: 580px; margin: 0; color: rgba(255,255,255,.74); font-size: clamp(16px, 1.35vw, 20px); line-height: 1.65; }
.hero-actions, .visit-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { min-height: 52px; padding: 0 25px; border: 1px solid transparent; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 30px; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; transition: transform .25s ease, background .25s ease, color .25s ease; }
.button:hover { transform: translateY(-2px); }
.button-gold { background: var(--gold); color: var(--ink); }
.button-gold:hover { background: var(--gold-light); }
.button-ghost { border-color: rgba(255,255,255,.4); color: white; background: rgba(255,255,255,.04); backdrop-filter: blur(10px); }
.button-ghost:hover { background: white; color: var(--ink); }
.hero-meta { position: absolute; z-index: 2; left: clamp(24px, 8vw, 120px); right: clamp(24px, 5vw, 76px); bottom: 35px; display: flex; gap: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.6); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hero-meta span:not(:last-child)::after { content: "·"; margin-left: 28px; color: var(--gold); }
.scroll-cue { position: absolute; right: clamp(24px, 5vw, 76px); bottom: 92px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.scroll-cue i { width: 1px; height: 38px; background: linear-gradient(var(--gold) 50%, rgba(255,255,255,.2) 50%); background-size: 100% 200%; animation: scrollLine 1.8s ease infinite; }
@keyframes scrollLine { from { background-position: 0 100%; } to { background-position: 0 -100%; } }

.coffee-intro { padding: clamp(90px, 13vw, 190px) clamp(24px, 8vw, 120px); display: grid; grid-template-columns: 1fr 2.2fr; gap: 50px; background: var(--cream); }
.section-index { color: #987a5e; padding-top: 13px; }
.coffee-intro > div { display: grid; grid-template-columns: 1.5fr 1fr; align-items: end; gap: clamp(30px, 7vw, 110px); }
.coffee-intro h2, .menu-heading h2, .station-content h2, .inside-copy h2, .assortment-content h2, .visit-content h2 { font-family: "Cormorant Garamond Variable", "Cormorant Garamond", Georgia, serif; font-weight: 400; letter-spacing: -.055em; line-height: .98; }
.coffee-intro h2 { margin: 0; font-size: clamp(48px, 6vw, 90px); }
.coffee-intro > div > p { margin: 0 0 7px; color: #6b594d; font-size: 16px; line-height: 1.8; }

.coffee-story {
  --story-progress: 0;
  --bean-phase: 0;
  --lift-phase: 0;
  --pressure-phase: 0;
  --coffee-phase: 0;
  --finish-phase: 0;
  height: 390vh;
  position: relative;
  background: #0c0704;
  color: white;
}
.story-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 650px;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 38%, rgba(126, 59, 22, .32), transparent 28%),
    radial-gradient(circle at 52% 120%, #3a1a0c 0%, #170b06 35%, #0a0503 70%);
}
.story-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.story-copy { position: absolute; z-index: 20; left: clamp(24px, 7vw, 110px); top: 50%; width: min(390px, 31vw); transform: translateY(-50%); }
.story-copy article { position: absolute; inset: 0 auto auto 0; opacity: 0; transform: translateY(28px); transition: opacity .38s ease, transform .55s cubic-bezier(.2,.75,.25,1); pointer-events: none; }
.coffee-story[data-step="beans"] [data-story-copy="beans"],
.coffee-story[data-step="pressure"] [data-story-copy="pressure"],
.coffee-story[data-step="crema"] [data-story-copy="crema"] { opacity: 1; transform: translateY(0); }
.story-copy span { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(228,161,69,.38); border-radius: 50%; color: #eead51; background: rgba(44,21,11,.48); font-size: 10px; }
.story-copy p { margin: 22px 0 15px; color: #e9a348; font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.story-copy h3 { margin: 0; font-family: "Cormorant Garamond Variable", "Cormorant Garamond", Georgia, serif; font-size: clamp(42px, 4.6vw, 72px); font-weight: 400; line-height: .98; letter-spacing: -.055em; }
.story-note { position: absolute; z-index: 20; left: clamp(24px, 7vw, 110px); bottom: 34px; display: flex; align-items: center; gap: 12px; margin: 0; color: rgba(255,255,255,.38); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.story-note i { width: 36px; height: 1px; background: linear-gradient(90deg, #e9a348 calc(var(--story-progress) * 100%), rgba(255,255,255,.18) 0); }
.coffee-stage { position: absolute; inset: 0 0 0 36%; isolation: isolate; overflow: hidden; }
.coffee-stage::after { content: ""; position: absolute; z-index: 30; inset: 0; box-shadow: inset 0 0 110px rgba(4,2,1,.48); pointer-events: none; }
.stage-watermark { position: absolute; z-index: -2; top: -4%; right: -8%; width: min(42vw, 540px); opacity: .027; filter: grayscale(1); }
.machine-halo { position: absolute; z-index: -1; left: 50%; top: 3%; width: 82%; height: 54%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(163,79,30,.3), transparent 66%); filter: blur(28px); }
.espresso-machine { position: absolute; z-index: 6; left: 50%; top: 8%; width: min(82%, 720px); height: 32%; min-height: 235px; transform: translateX(-50%); will-change: transform; border: 1px solid rgba(195,115,52,.18); border-radius: 46px; background: linear-gradient(145deg, #2d2923 0%, #17130f 42%, #0d0b09 100%); box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -20px 36px rgba(0,0,0,.4), 0 32px 70px rgba(0,0,0,.48); }
.machine-panel { position: absolute; inset: 10% 7% 24%; display: grid; grid-template-columns: 31% 1fr 28%; align-items: center; border-radius: 29px; background: linear-gradient(155deg, #15130f, #090806 78%); box-shadow: inset 0 1px rgba(255,255,255,.045), 0 1px rgba(255,255,255,.04); }
.machine-hopper { position: absolute; z-index: 3; left: 50%; top: -65px; width: 108px; height: 78px; transform: translateX(-50%); clip-path: polygon(10% 0, 90% 0, 78% 100%, 22% 100%); background: linear-gradient(90deg, #1b1713, #32291f 50%, #17130f); border-top: 1px solid rgba(219,145,72,.2); }
.machine-hopper i { position: absolute; inset: 13px 17px 16px; clip-path: inherit; background: linear-gradient(#63361f, #2c1710); box-shadow: inset 0 7px 18px rgba(0,0,0,.4); }
.pressure-gauge { position: relative; justify-self: center; width: clamp(106px, 10vw, 142px); aspect-ratio: 1; display: grid; place-items: center; border: 7px solid #393632; border-radius: 50%; background: radial-gradient(circle, #0c0a08 0 58%, #221c17 59% 68%, #111 69%); box-shadow: inset 0 0 0 2px rgba(234,173,91,.22), 0 10px 25px rgba(0,0,0,.3); }
.gauge-scale { position: absolute; inset: 11%; border-radius: 50%; background: repeating-conic-gradient(from -125deg, rgba(225,161,75,.7) 0 1deg, transparent 1deg 15deg); -webkit-mask: radial-gradient(circle, transparent 0 72%, #000 73%); mask: radial-gradient(circle, transparent 0 72%, #000 73%); }
.gauge-needle { position: absolute; left: 50%; bottom: 49%; width: 3px; height: 37%; transform: translateX(-50%) rotate(-118deg); transform-origin: 50% 100%; border-radius: 5px; background: linear-gradient(#f0a744, #a94c19); box-shadow: 0 0 8px rgba(233,151,57,.28); }
.gauge-needle::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 13px; height: 13px; transform: translateX(-50%); border-radius: 50%; background: #e89a38; }
.pressure-gauge b { margin-top: 28%; font-size: 17px; line-height: 1; }
.pressure-gauge span { position: absolute; bottom: 18%; color: #a79787; font-size: 8px; letter-spacing: .22em; }
.grinder-column { position: relative; justify-self: center; width: 86px; height: 112px; }
.grinder-column span { position: absolute; left: 50%; top: -5px; width: 42px; height: 52px; transform: translateX(-50%); border-radius: 9px 9px 4px 4px; background: linear-gradient(90deg, #49443f, #eee 45%, #756f69 72%, #27231f); }
.grinder-column i { position: absolute; left: 50%; top: 35px; width: 30px; height: 62px; transform: translateX(-50%); clip-path: polygon(17% 0, 83% 0, 65% 100%, 35% 100%); background: linear-gradient(90deg, #494541, #f6f3ed 45%, #79736c 75%, #312e2a); }
.grinder-column b { position: absolute; left: 50%; bottom: 0; width: 15px; height: 24px; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: linear-gradient(90deg, #393633, #c9c4bd, #47433e); }
.machine-status { justify-self: center; width: 104px; display: flex; flex-direction: column; gap: 12px; }
.machine-status i { width: 58px; height: 14px; border-radius: 99px; background: linear-gradient(90deg, #a85b20, #e29a42); box-shadow: 0 0 15px rgba(214,128,47,.12); }
.machine-status span { width: 90px; height: 8px; border-radius: 99px; background: #292724; }
.machine-status span:last-child { width: 60px; }
.brew-group { position: absolute; z-index: 2; left: 44.5%; bottom: -51px; width: 190px; height: 78px; transform: translateX(-50%); }
.brew-group > i { position: absolute; left: 50%; top: 0; width: 148px; height: 50px; transform: translateX(-50%); border-radius: 50% 50% 18px 18px; background: linear-gradient(#2c2823, #13110e); box-shadow: 0 18px 24px rgba(0,0,0,.45); }
.brew-group > span { position: absolute; left: 50%; top: 33px; width: 176px; height: 45px; transform: translateX(-50%); border-radius: 50%; border: 8px solid #6d6964; background: radial-gradient(ellipse, #090806 0 48%, #bbb6b0 50% 61%, #383530 63% 100%); box-shadow: inset 0 1px 3px white; }
.bean-origin { position: absolute; z-index: 12; left: 44.5%; top: 37%; width: 2px; height: 2px; }
.coffee-bean { position: absolute; top: 0; width: 27px; max-width: none; height: auto; margin-left: -13px; opacity: 0; will-change: transform, opacity; filter: drop-shadow(0 7px 5px rgba(0,0,0,.55)); user-select: none; }
.coffee-bean:nth-child(3n) { filter: brightness(.82) saturate(.92) drop-shadow(0 7px 5px rgba(0,0,0,.55)); }
.coffee-bean:nth-child(4n) { filter: brightness(1.12) saturate(.9) drop-shadow(0 7px 5px rgba(0,0,0,.5)); }
.portafilter-open { position: absolute; z-index: 7; left: 61.3%; top: 54%; width: min(68%, 64vh, 610px); aspect-ratio: 1099 / 540; transform-origin: 24% 8%; will-change: transform, opacity; filter: sepia(.12) saturate(.74) drop-shadow(0 26px 16px rgba(0,0,0,.58)); }
.portafilter-open-image { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.portafilter-basket-fill { position: absolute; z-index: 2; left: 6.9%; top: 23.4%; width: 33.2%; height: 20%; border-radius: 50%; overflow: hidden; background: url("./images/espresso-grounds-surface-v2.webp") center / 100% 100% no-repeat; filter: brightness(.68) saturate(.85) contrast(1.08); box-shadow: inset 0 6px 11px rgba(15,4,1,.52); opacity: var(--bean-phase); }
.portafilter-basket-fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 50% 41%, transparent 45%, rgba(20,6,2,.46) 88%, rgba(8,2,1,.72) 100%); box-shadow: inset 0 1px rgba(239,176,112,.08); }
.portafilter-open-rim { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; object-fit: contain; clip-path: polygon(0 28%, 5% 28%, 8% 34%, 13% 40%, 20% 45%, 28% 46%, 36% 42%, 42% 34%, 45% 28%, 100% 28%, 100% 100%, 0 100%); pointer-events: none; user-select: none; }
.portafilter-locked { position: absolute; z-index: 9; left: 66%; top: 35.5%; width: min(74.3%, 70vh, 666px); aspect-ratio: 1200 / 409; transform-origin: 22% 14%; opacity: 0; will-change: transform, opacity; filter: sepia(.08) saturate(.7) drop-shadow(0 20px 14px rgba(0,0,0,.52)); }
.portafilter-locked > img { width: 100%; height: 100%; max-width: none; object-fit: contain; user-select: none; }
.espresso-jets { position: absolute; z-index: -1; left: 13.35%; top: 94%; width: 18.35%; height: clamp(95px, 17vh, 165px); pointer-events: none; }
.espresso-jet { position: absolute; top: 0; width: 5px; height: 100%; transform-origin: top; border-radius: 35% 35% 58% 58%; background: linear-gradient(90deg, #431509, #a84d19 32%, #f0a24b 51%, #8b3511 72%, #351005); box-shadow: 0 0 11px rgba(209,100,27,.25), inset 1px 0 rgba(255,221,159,.4); filter: blur(.15px); opacity: 0; }
.espresso-jet::before { content: ""; position: absolute; inset: 0 auto 4% 45%; width: 1px; background: rgba(255,226,173,.42); filter: blur(.4px); }
.espresso-jet::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 10px; transform: translateX(-50%); border-radius: 50%; background: #7a2d0d; }
.jet-left { left: 0; }.jet-right { right: 0; }
.espresso-drip { position: absolute; top: calc(100% + 5px); width: 7px; height: 10px; border-radius: 50%; background: #6b250a; opacity: 0; }
.drip-left { left: 0; }.drip-right { right: 0; }
.glass-cup { position: absolute; z-index: 10; left: 46%; bottom: 4.5%; width: clamp(170px, 20vh, 220px); height: clamp(215px, 27vh, 285px); opacity: 0; will-change: transform, opacity; }
.glass-saucer { position: absolute; z-index: 0; left: -13%; right: -15%; bottom: 0; height: 13%; border-radius: 50%; background: linear-gradient(#403a36, #171310); border: 1px solid rgba(255,255,255,.11); box-shadow: 0 22px 25px rgba(0,0,0,.52); }
.glass-handle { position: absolute; z-index: 1; right: -7%; top: 29%; width: 45%; height: 44%; border: clamp(8px, 1.1vw, 13px) solid rgba(223,217,208,.55); border-left: 0; border-radius: 0 55% 55% 0; box-shadow: inset -3px 0 rgba(255,255,255,.25); }
.glass-body { position: absolute; z-index: 2; left: 6%; top: 12%; width: 72%; height: 76%; overflow: hidden; border: 3px solid rgba(231,227,220,.58); border-top-width: 5px; border-radius: 17% 17% 42% 42% / 8% 8% 28% 28%; background: linear-gradient(100deg, rgba(255,255,255,.14), rgba(255,255,255,.025) 28% 70%, rgba(255,255,255,.12)); box-shadow: inset 0 0 24px rgba(255,255,255,.07), 0 14px 30px rgba(0,0,0,.32); }
.glass-body::before { content: ""; position: absolute; z-index: 8; left: -3px; right: -3px; top: -5px; height: 15px; border: 3px solid rgba(245,240,233,.55); border-radius: 50%; background: rgba(31,20,15,.18); }
.glass-body > img { position: absolute; z-index: 7; left: 50%; top: 48%; width: 54px; height: 54px; transform: translate(-50%, -50%); border-radius: 50%; filter: drop-shadow(0 4px 7px rgba(0,0,0,.34)); }
.glass-liquid { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 0; overflow: visible; opacity: 0; background: linear-gradient(180deg, #c87831 0%, #7a2d0f 24%, #4c1808 100%); box-shadow: inset 12px 0 rgba(255,177,91,.12), inset -10px 0 rgba(33,8,2,.26); }
.glass-liquid::before { content: ""; position: absolute; left: -1%; right: -1%; top: -10px; height: 20px; border-radius: 50%; background: url("./images/espresso-crema-surface-v2.webp") center / 100% 100% no-repeat; filter: brightness(.88) saturate(.9); }
.glass-liquid i { position: absolute; left: 0; right: 0; top: 7px; height: 12px; background: linear-gradient(rgba(245,183,100,.42), transparent); }
.glass-shine { position: absolute; z-index: 9; left: 12%; top: 13%; width: 10%; height: 60%; border-radius: 50%; background: linear-gradient(rgba(255,255,255,.44), rgba(255,255,255,.02)); filter: blur(1px); transform: rotate(4deg); }
.glass-steam { position: absolute; z-index: 12; top: -22%; width: 4px; height: 29%; border-left: 3px solid rgba(255,255,255,.38); border-radius: 50%; filter: blur(1.3px); opacity: var(--finish-phase); animation: steam 2.2s ease-in-out infinite; }
.glass-steam.steam-one { left: 34%; }.glass-steam.steam-two { left: 55%; height: 23%; animation-delay: -.9s; }
@keyframes steam { 0%,100% { transform: translateY(12px) skewX(-9deg); opacity: 0; } 45% { opacity: calc(var(--finish-phase) * .65); } 100% { transform: translateY(-17px) skewX(12deg); } }
.story-chip { position: absolute; z-index: 18; right: 5%; min-width: 225px; min-height: 82px; padding: 13px 22px 13px 13px; display: flex; align-items: center; gap: 15px; border: 1px solid rgba(231,170,100,.2); border-radius: 999px; background: rgba(15,10,7,.78); box-shadow: 0 18px 35px rgba(0,0,0,.28); backdrop-filter: blur(14px); opacity: 0; transform: translateX(24px); transition: opacity .35s ease, transform .45s ease; }
.story-chip > i { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffc16f, #b85d1d 58%, #5a210b 100%); box-shadow: inset -6px -8px 15px rgba(51,15,3,.28), 0 7px 16px rgba(0,0,0,.28); }
.story-chip span { display: flex; flex-direction: column; gap: 4px; }
.story-chip strong { font-size: 14px; white-space: nowrap; }
.story-chip small { color: #81766d; font-size: 11px; }
.chip-beans { top: 16%; }
.chip-crema { right: 4%; bottom: 5%; }
.coffee-story[data-step="beans"] .chip-beans,
.coffee-story[data-step="crema"] .chip-crema { opacity: 1; transform: translateX(0); }
.stage-floor { position: absolute; z-index: 1; left: 6%; right: 5%; bottom: 3%; height: 12%; border-radius: 50%; background: rgba(0,0,0,.52); filter: blur(18px); }

.menu-section { padding: clamp(100px, 11vw, 165px) clamp(24px, 4vw, 66px); background: #f7f0e5; overflow: hidden; }
.menu-heading { display: grid; grid-template-columns: .65fr 1.5fr .8fr; gap: 42px; align-items: end; margin-bottom: 62px; opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.menu-heading[data-visible="true"] { opacity: 1; transform: translateY(0); }
.menu-heading h2 { margin: 0; font-size: clamp(52px, 6.3vw, 92px); }
.menu-heading > p:last-child { margin: 0 0 8px; color: #6b594d; font-size: 15px; line-height: 1.7; }
.coffee-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.coffee-card { position: relative; min-width: 0; padding: 14px 14px 25px; overflow: hidden; border: 1px solid rgba(79,47,27,.07); border-radius: 31px; background: rgba(255,255,255,.92); box-shadow: 0 18px 55px rgba(67,44,27,.08); opacity: 0; transform: translateY(38px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.75,.25,1), box-shadow .35s ease; }
.coffee-card[data-visible="true"] { opacity: 1; transform: translateY(0); }
.coffee-card:hover { transform: translateY(-9px); box-shadow: 0 28px 70px rgba(67,44,27,.15); }
.coffee-card-image { position: relative; aspect-ratio: 1 / 1.08; overflow: hidden; border-radius: 23px; background: #2a160d; }
.coffee-card-image::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); border-radius: inherit; pointer-events: none; }
.coffee-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .45s ease; }
.coffee-card:hover .coffee-card-image img { transform: scale(1.045); filter: saturate(1.08); }
.coffee-card-image > span { position: absolute; z-index: 2; left: 16px; top: 16px; padding: 10px 16px; border-radius: 999px; background: rgba(24,14,9,.82); color: white; backdrop-filter: blur(10px); font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.coffee-card-copy { padding: 23px 12px 0; }
.coffee-kicker { margin: 0 0 12px; color: #a3694f; font-size: 9px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.coffee-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.coffee-title-row h3 { margin: 0; font-family: "Cormorant Garamond Variable", "Cormorant Garamond", Georgia, serif; font-size: clamp(28px, 2.1vw, 35px); font-weight: 600; line-height: 1; letter-spacing: -.045em; }
.coffee-title-row a { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #e3a13f; color: #1a0e08; font-size: 19px; transition: transform .3s ease, background .3s ease; }
.coffee-title-row a:hover { transform: rotate(45deg); background: #f0ba68; }
.coffee-description { min-height: 61px; margin: 18px 0 0; color: #6d5c50; font-size: 13px; line-height: 1.6; }
.menu-footnote { margin: 28px 4px 0; color: #8e7866; font-size: 12px; }

.station-section { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 820px; background: #21110b; color: white; }
.station-image-wrap { position: relative; min-height: 680px; overflow: hidden; }
.station-image-wrap > img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.station-section:hover .station-image-wrap > img { transform: scale(1.025); }
.station-badge { position: absolute; right: 0; bottom: 0; width: 220px; height: 150px; padding: 28px; display: flex; align-items: center; gap: 20px; background: var(--gold); color: var(--ink); }
.station-badge strong { font-family: "Cormorant Garamond Variable", "Cormorant Garamond", Georgia, serif; font-size: 41px; font-weight: 400; }
.station-badge span { font-size: 9px; font-weight: 850; line-height: 1.55; letter-spacing: .12em; text-transform: uppercase; }
.station-content { padding: clamp(70px, 9vw, 135px) clamp(40px, 8vw, 120px); display: flex; flex-direction: column; justify-content: center; }
.station-content .section-index, .inside-copy .section-index { color: var(--gold); }
.station-content h2 { margin: 33px 0 35px; font-size: clamp(52px, 5.7vw, 84px); }
.station-content > p:not(.section-index) { max-width: 570px; margin: 0; color: #c2b5ab; line-height: 1.8; }
.fact-row { margin: 50px 0 38px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.fact-row div { padding: 24px 0; display: flex; flex-direction: column; gap: 7px; }
.fact-row div:first-child { border-right: 1px solid rgba(255,255,255,.14); }
.fact-row div:last-child { padding-left: 28px; }
.fact-row span { color: #8f7e72; font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.fact-row strong { font-family: "Cormorant Garamond Variable", "Cormorant Garamond", Georgia, serif; font-size: 23px; font-weight: 400; }
.text-link { width: max-content; padding-bottom: 8px; border-bottom: 1px solid var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.text-link span { color: var(--gold); margin-left: 35px; }

.inside-section { padding: clamp(90px, 11vw, 160px) clamp(24px, 8vw, 120px); background: #0f0805; color: white; }
.inside-copy { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 60px; }
.inside-copy h2 { margin: 0; max-width: 850px; font-size: clamp(50px, 6.2vw, 92px); }
.inside-media { position: relative; overflow: hidden; border-radius: 2px; background: #2b160d; box-shadow: 0 40px 90px rgba(0,0,0,.35); }
.inside-media video { width: 100%; max-height: 74vh; min-height: 430px; object-fit: cover; }
.video-label { position: absolute; left: 20px; bottom: 20px; padding: 10px 14px; background: rgba(17,8,4,.72); backdrop-filter: blur(12px); color: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.15); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; pointer-events: none; }

.assortment-section { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 780px; background: var(--cream); }
.assortment-photo { min-height: 600px; overflow: hidden; }
.assortment-photo img { width: 100%; height: 100%; object-fit: cover; }
.assortment-content { padding: clamp(70px, 9vw, 125px) clamp(35px, 7vw, 100px); }
.assortment-content h2 { margin: 30px 0 55px; font-size: clamp(50px, 5.8vw, 86px); }
.assortment-list { border-top: 1px solid #cfbfac; }
.assortment-list article { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 26px 0; border-bottom: 1px solid #cfbfac; }
.assortment-list article > span { color: #9b7b5e; font-size: 10px; padding-top: 5px; }
.assortment-list h3 { margin: 0 0 8px; font-family: "Cormorant Garamond Variable", "Cormorant Garamond", Georgia, serif; font-size: 25px; font-weight: 400; }
.assortment-list p { margin: 0; color: #756355; font-size: 13px; line-height: 1.55; }
.assortment-list b { position: absolute; right: 0; top: 28px; display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #9d8166; border-radius: 50%; color: #7c5e43; font-size: 9px; }

.visit-section { position: relative; min-height: 850px; display: grid; place-items: center; padding: 120px 24px; color: white; text-align: center; overflow: hidden; }
.visit-background { filter: saturate(.78); transform: scale(1.02); }
.visit-overlay { position: absolute; inset: 0; background: rgba(20,9,4,.82); }
.visit-content { position: relative; z-index: 2; width: min(1000px, 100%); display: flex; flex-direction: column; align-items: center; }
.visit-content > img { width: 94px; height: 94px; border-radius: 50%; object-fit: contain; margin-bottom: 26px; box-shadow: 0 12px 35px rgba(0,0,0,.3); }
.visit-content .eyebrow { justify-content: center; }
.visit-content h2 { margin: 24px 0 50px; color: var(--gold-light); font-size: clamp(70px, 9vw, 128px); line-height: .83; }
.visit-details { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); text-align: left; }
.visit-details > * { min-height: 125px; padding: 25px 32px; display: flex; flex-direction: column; gap: 13px; font-style: normal; }
.visit-details > *:not(:last-child) { border-right: 1px solid rgba(255,255,255,.16); }
.visit-details span { color: #9e8e81; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.visit-details strong, .visit-details a { font-family: "Cormorant Garamond Variable", "Cormorant Garamond", Georgia, serif; font-size: 19px; font-weight: 400; line-height: 1.45; }
.visit-actions { justify-content: center; }

footer { min-height: 160px; padding: 38px clamp(24px, 6vw, 90px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: #0a0503; color: #8b7c71; font-size: 11px; }
.footer-brand { display: flex; align-items: center; gap: 13px; color: white; }
.footer-brand img { width: 44px; height: 44px; border-radius: 50%; }
.footer-brand strong { font-size: 15px; }
footer p { text-align: center; } footer > a { justify-self: end; color: var(--gold); font-weight: 750; text-transform: uppercase; letter-spacing: .1em; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero h1 { font-size: clamp(62px, 12vw, 104px); }
  .coffee-intro { grid-template-columns: 1fr; }
  .coffee-intro > div { grid-template-columns: 1.35fr .8fr; }
  .story-copy { left: 35px; width: 295px; }
  .coffee-stage { inset: 0 0 0 31%; }
  .espresso-machine { width: 88%; }
  .story-chip { right: 2%; min-width: 205px; }
  .menu-heading { grid-template-columns: 1fr 2fr; }
  .menu-heading > p:last-child { grid-column: 2; }
  .coffee-grid { grid-template-columns: repeat(2, 1fr); }
  .station-section, .assortment-section { grid-template-columns: 1fr; }
  .station-image-wrap, .assortment-photo { min-height: 600px; }
  .inside-copy { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 700px) {
  .site-header { height: 82px; padding: 0 18px; }
  .brand img { width: 44px; height: 44px; }
  .brand span { font-size: 14px; }
  .header-cta { padding: 10px 15px; font-size: 10px; }
  .hero { min-height: 780px; }
  .hero-photo { object-position: 62% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(15,7,4,.94) 0%, rgba(15,7,4,.55) 58%, rgba(15,7,4,.32)); }
  .hero-content { margin: 0 20px 150px; width: calc(100% - 40px); }
  .hero h1 { margin-top: 20px; font-size: clamp(56px, 18vw, 78px); line-height: .89; }
  .hero-copy { font-size: 15px; line-height: 1.55; }
  .hero-actions { align-items: stretch; }
  .button { min-height: 50px; padding: 0 20px; }
  .hero-meta { left: 20px; right: 20px; bottom: 25px; gap: 8px; flex-wrap: wrap; font-size: 8px; }
  .hero-meta span:not(:last-child)::after { margin-left: 8px; }
  .scroll-cue { display: none; }
  .coffee-intro { padding: 80px 20px; gap: 36px; }
  .coffee-intro > div { grid-template-columns: 1fr; gap: 28px; }
  .coffee-intro h2 { font-size: 49px; }
  .coffee-story { height: 360vh; }
  .story-sticky { min-height: 700px; }
  .story-copy { left: 20px; top: 4.5%; width: calc(100% - 40px); text-align: left; transform: none; }
  .story-copy article { left: 0; right: 0; }
  .story-copy span { width: 32px; height: 32px; font-size: 8px; }
  .story-copy p { margin: 12px 0 8px; font-size: 8px; }
  .story-copy h3 { font-size: clamp(30px, 9.5vw, 39px); line-height: .92; }
  .coffee-stage { inset: 25% 0 0; }
  .stage-watermark { top: 2%; right: -17%; width: 78vw; }
  .machine-halo { top: 0; width: 100%; height: 50%; }
  .espresso-machine { top: 6%; width: 92%; height: 29%; min-height: 158px; border-radius: 27px; }
  .machine-panel { inset: 9% 5% 23%; grid-template-columns: 30% 1fr 25%; border-radius: 20px; }
  .machine-hopper { top: -42px; width: 72px; height: 53px; }
  .machine-hopper i { inset: 8px 12px 11px; }
  .pressure-gauge { width: 84px; border-width: 5px; }
  .pressure-gauge b { font-size: 13px; }
  .pressure-gauge span { font-size: 6px; }
  .grinder-column { width: 62px; height: 78px; }
  .grinder-column span { width: 30px; height: 37px; }
  .grinder-column i { top: 25px; width: 22px; height: 43px; }
  .grinder-column b { width: 10px; height: 17px; }
  .machine-status { width: 64px; gap: 8px; }
  .machine-status i { width: 42px; height: 10px; }
  .machine-status span { width: 62px; height: 5px; }
  .machine-status span:last-child { width: 42px; }
  .brew-group { left: 44%; bottom: -42px; transform: translateX(-50%) scale(.72); transform-origin: center top; }
  .bean-origin { left: 44%; top: 36%; }
  .coffee-bean { width: 20px; margin-left: -10px; }
  .portafilter-open { left: 65%; top: 49%; width: 330px; }
  .portafilter-locked { left: 67.5%; top: 34%; width: 360px; }
  .espresso-jets { height: 82px; }
  .espresso-jet { width: 3px; }
  .glass-cup { left: 44%; bottom: 1.5%; width: 145px; height: 184px; }
  .glass-body > img { width: 42px; height: 42px; }
  .story-chip { min-width: 172px; min-height: 59px; padding: 9px 14px 9px 9px; gap: 10px; }
  .story-chip > i { width: 40px; height: 40px; }
  .story-chip strong { font-size: 11px; }
  .story-chip small { font-size: 8px; }
  .chip-beans { top: 8%; right: 3%; }
  .chip-crema { right: 2%; bottom: 3%; }
  .story-note { left: 20px; right: 20px; bottom: 12px; justify-content: center; font-size: 7px; }
  .menu-section { padding: 82px 0; }
  .menu-heading { grid-template-columns: 1fr; gap: 23px; margin: 0 20px 42px; }
  .menu-heading > p:last-child { grid-column: 1; }
  .menu-heading h2 { font-size: 50px; }
  .coffee-grid { display: flex; gap: 15px; padding: 0 20px 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .coffee-grid::-webkit-scrollbar { display: none; }
  .coffee-card { flex: 0 0 min(84vw, 345px); scroll-snap-align: center; border-radius: 27px; }
  .coffee-card-image { aspect-ratio: 1 / 1.04; }
  .coffee-title-row h3 { font-size: 31px; }
  .coffee-description { min-height: 0; }
  .menu-footnote { margin: 8px 20px 0; }
  .station-section { min-height: 0; }
  .station-image-wrap, .assortment-photo { min-height: 430px; }
  .station-badge { width: 182px; height: 122px; padding: 20px; }
  .station-badge strong { font-size: 33px; }
  .station-content, .assortment-content { padding: 75px 20px; }
  .station-content h2, .assortment-content h2 { font-size: 52px; }
  .inside-section { padding: 80px 20px; }
  .inside-copy h2 { font-size: 49px; }
  .inside-media video { min-height: 360px; }
  .assortment-list p { padding-right: 20px; }
  .visit-section { min-height: 900px; padding: 90px 20px; }
  .visit-content h2 { font-size: 68px; }
  .visit-details { grid-template-columns: 1fr; }
  .visit-details > * { min-height: 0; padding: 22px 0; }
  .visit-details > *:not(:last-child) { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .visit-details strong, .visit-details a { font-size: 18px; }
  footer { grid-template-columns: 1fr auto; gap: 25px; }
  footer p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .coffee-story { height: 140vh; }
}
/* Hintergrundbild und Überschrift korrigieren */
.hero-photo {
  z-index: 0;
}

.hero-shade,
.hero-grain {
  z-index: 1;
  pointer-events: none;
}

.hero h1 {
  width: fit-content;
  max-width: 100%;
  padding: 14px 20px 18px;
  background: rgba(12, 6, 4, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

@media (max-width: 680px) {
  .hero h1 {
    padding: 10px 13px 14px;
  }
}