@font-face {
  font-family: "Neogrey";
  src: url("./public/fonts/neogrey-medium.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Bowlby One";
  src: url("./public/fonts/bowlby-one-regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --cream: #f8f3eb;
  --coffee: #3b241a;
  --brown: #6f4a33;
  --display: "Bowlby One", "Neogrey", "Arial Narrow", sans-serif;
  color-scheme: dark;
  background: #24140d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.is-loading, html.is-loading body { overflow: hidden; }
body { margin: 0; min-width: 320px; background: #24140d; color: var(--cream); font-family: Arial, sans-serif; }
a { color: inherit; text-decoration: none; }

.page-loader { position: fixed; z-index: 100; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; background: #24140d; color: var(--cream); opacity: 1; transition: opacity .7s ease, visibility .7s step-end; }
.page-loader__mark { width: 52px; height: 52px; border: 2px solid rgba(248, 243, 235, .22); border-top-color: var(--cream); border-radius: 50%; animation: loader-spin 1s linear infinite; }
.page-loader p { margin: 8px 0 0; font-family: var(--display); font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 500; letter-spacing: -.035em; text-transform: uppercase; }
.page-loader span { color: rgba(248, 243, 235, .58); font-size: .58rem; font-weight: 700; letter-spacing: .25em; }
html.is-loaded .page-loader { visibility: hidden; opacity: 0; pointer-events: none; }
@keyframes loader-spin { to { transform: rotate(360deg); } }

.coffee-story { position: relative; height: 420vh; background: #24140d; }
.coffee-story__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: #24140d; }
.coffee-story__fallback, .coffee-story__video, .coffee-story__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.coffee-story__fallback, .coffee-story__video { object-fit: cover; object-position: 50% 50%; }
.coffee-story__video { z-index: 1; transform: translateZ(0); backface-visibility: hidden; }
.coffee-story__fallback { z-index: 2; transition: opacity 420ms ease; }
.coffee-story__sticky.is-video-ready .coffee-story__fallback { opacity: 0; pointer-events: none; }
.coffee-story__shade { z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(26, 12, 7, .74) 0%, rgba(26, 12, 7, .42) 36%, rgba(26, 12, 7, .05) 68%), linear-gradient(0deg, rgba(14, 7, 4, .5), transparent 48%); }

.coffee-story__header { position: absolute; z-index: 5; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 28px clamp(24px, 4.5vw, 76px); }
.coffee-story__brand { display: inline-flex; flex-direction: column; font-family: var(--display); font-size: clamp(1.35rem, 1.8vw, 2rem); letter-spacing: .06em; line-height: .8; }
.coffee-story__brand span { margin-top: 7px; font-family: Arial, sans-serif; font-size: .41em; font-weight: 600; letter-spacing: .34em; }
.coffee-story__nav { display: flex; gap: clamp(18px, 2.6vw, 44px); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.coffee-story__nav a { opacity: .82; transition: opacity .25s ease; }
.coffee-story__nav a:hover { opacity: 1; }

.coffee-story__copy { position: absolute; z-index: 4; left: clamp(24px, 8.6vw, 148px); bottom: clamp(60px, 9vh, 112px); width: min(35rem, calc(100vw - 48px)); opacity: var(--copy-opacity); transform: translate3d(0, var(--copy-shift), 0); pointer-events: none; will-change: opacity, transform; }
.coffee-story__copy > * { pointer-events: auto; }
.coffee-story__eyebrow { margin: 0 0 20px; font-size: .66rem; font-weight: 700; letter-spacing: .2em; }
.coffee-story__copy h1, .coffee-story__copy h2 { max-width: 10ch; margin: 0; font-family: var(--display); font-size: clamp(3rem, 6.4vw, 6.8rem); font-weight: 500; letter-spacing: -.055em; line-height: .82; text-transform: uppercase; }
.coffee-story__body { max-width: 25rem; margin: 28px 0 0; font-size: clamp(.96rem, 1.2vw, 1.15rem); line-height: 1.55; }
.coffee-story__link { display: inline-flex; gap: 10px; align-items: center; margin-top: 28px; padding-bottom: 7px; border-bottom: 1px solid rgba(248, 243, 235, .7); font-size: .73rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.coffee-story__link span { font-size: 1rem; transition: transform .2s ease; }
.coffee-story__link:hover span { transform: translate(3px, -3px); }
.coffee-story__progress { position: absolute; z-index: 5; left: clamp(24px, 8.6vw, 148px); bottom: 30px; width: 88px; height: 2px; overflow: hidden; background: rgba(248, 243, 235, .28); }
.coffee-story__progress span { display: block; width: 100%; height: 100%; background: var(--cream); transform: scaleX(0); transform-origin: left; }
.coffee-menu { position: relative; overflow: hidden; padding: clamp(86px, 12vw, 164px) clamp(24px, 6.4vw, 108px) clamp(78px, 9vw, 130px); background: var(--cream); color: var(--coffee); }
.coffee-menu::before { position: absolute; top: -21vw; right: -13vw; width: min(49vw, 700px); aspect-ratio: 1; border: 1px solid rgba(111, 74, 51, .18); border-radius: 50%; box-shadow: 0 0 0 55px rgba(111, 74, 51, .045), 0 0 0 115px rgba(111, 74, 51, .025); content: ""; pointer-events: none; }
.coffee-menu__intro { position: relative; z-index: 1; max-width: 650px; margin-bottom: clamp(50px, 7vw, 100px); }
.coffee-menu__eyebrow { margin: 0 0 18px; color: var(--brown); font-size: .67rem; font-weight: 700; letter-spacing: .2em; }
.coffee-menu__intro h2 { max-width: 12ch; margin: 0; font-family: var(--display); font-size: clamp(3rem, 6vw, 6.5rem); font-weight: 500; letter-spacing: -.06em; line-height: .85; text-transform: uppercase; }
.coffee-menu__intro > p:last-child { max-width: 27rem; margin: 26px 0 0; color: rgba(59, 36, 26, .76); font-size: 1rem; line-height: 1.6; }
.coffee-menu__cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); }
.coffee-card { position: relative; display: flex; min-height: clamp(390px, 37vw, 510px); flex-direction: column; justify-content: flex-end; overflow: hidden; padding: clamp(25px, 2.5vw, 39px); border-radius: 4px; isolation: isolate; color: var(--cream); background: #29150c; transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease; }
.coffee-card::after { position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg, rgba(16, 7, 3, .05) 15%, rgba(16, 7, 3, .83) 100%); content: ""; }
.coffee-card > :not(.coffee-card__orb) { position: relative; z-index: 2; }
.coffee-card__image { position: absolute !important; z-index: -1 !important; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.coffee-card:hover { box-shadow: 0 20px 38px rgba(41, 20, 11, .22); transform: translateY(-10px); }
.coffee-card--espresso { background-color: #29150c; }
.coffee-card--latte { background-color: #8f5b37; }
.coffee-card--filter { background-color: #4d3423; }
.coffee-card__number { position: absolute; top: 27px; left: 29px; color: rgba(248, 243, 235, .7); font-size: .67rem; font-weight: 700; letter-spacing: .13em; }
.coffee-card__orb { position: absolute; z-index: 1; top: 12%; right: -15%; width: 82%; aspect-ratio: 1; border: 1px solid rgba(248, 243, 235, .2); border-radius: 50%; box-shadow: inset 0 0 45px rgba(255, 220, 171, .16), 0 0 0 32px rgba(248, 243, 235, .055), 0 0 0 84px rgba(248, 243, 235, .035); transform: rotate(-18deg); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.coffee-card--latte .coffee-card__orb { top: 8%; right: -10%; width: 95%; border-color: rgba(255, 239, 212, .4); box-shadow: inset 0 0 72px rgba(255, 232, 191, .32), 0 0 0 34px rgba(255, 232, 191, .08); }
.coffee-card--filter .coffee-card__orb { right: -24%; background: radial-gradient(circle at 40% 38%, rgba(232, 186, 123, .25), transparent 30%); }
.coffee-card:hover .coffee-card__orb { transform: rotate(8deg) scale(1.1); }
.coffee-card__type { margin: 0 0 15px; color: rgba(248, 243, 235, .76); font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.coffee-card h3 { margin: 0; font-family: var(--display); font-size: clamp(2rem, 3.2vw, 3.55rem); font-weight: 500; letter-spacing: -.05em; line-height: .9; text-transform: uppercase; }
.coffee-card__description { max-width: 20rem; margin: 19px 0 24px; color: rgba(248, 243, 235, .82); font-size: .92rem; line-height: 1.5; }
.coffee-card__meta { display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid rgba(248, 243, 235, .32); font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
[data-menu-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
[data-menu-reveal].is-visible { opacity: 1; transform: translateY(0); }
.coffee-menu__cards [data-menu-reveal]:nth-child(2) { transition-delay: .1s; }
.coffee-menu__cards [data-menu-reveal]:nth-child(3) { transition-delay: .2s; }
.coffee-contact { padding: clamp(62px, 8vw, 120px) clamp(20px, 5vw, 80px); background: var(--cream); color: var(--cream); }
.coffee-contact__card { position: relative; display: flex; min-height: min(700px, 78svh); flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; padding: clamp(34px, 7vw, 112px); border-radius: clamp(26px, 3vw, 48px); isolation: isolate; background: linear-gradient(128deg, #2f190f 0%, #5d3724 56%, #28130a 100%); box-shadow: 0 28px 60px rgba(59, 36, 26, .18); }
.coffee-contact__card::before { position: absolute; z-index: -1; right: -13%; bottom: -40%; width: min(62vw, 720px); aspect-ratio: 1; border: 1px solid rgba(248, 243, 235, .28); border-radius: 50%; box-shadow: 0 0 0 46px rgba(248, 243, 235, .06), 0 0 0 122px rgba(248, 243, 235, .035); content: ""; }
.coffee-contact__glow { position: absolute; z-index: -1; top: -30%; right: 14%; width: 36%; aspect-ratio: 1; border-radius: 50%; background: #bd7b4c; filter: blur(80px); opacity: .38; }
.coffee-contact__eyebrow { margin: 0 0 20px; color: rgba(248, 243, 235, .72); font-size: .67rem; font-weight: 700; letter-spacing: .2em; }
.coffee-contact h2 { max-width: 10ch; margin: 0; font-family: var(--display); font-size: clamp(3.3rem, 7vw, 7.8rem); font-weight: 500; letter-spacing: -.065em; line-height: .82; text-transform: uppercase; }
.coffee-contact p:not(.coffee-contact__eyebrow) { max-width: 27rem; margin: 30px 0 0; color: rgba(248, 243, 235, .82); font-size: clamp(.95rem, 1.2vw, 1.1rem); line-height: 1.55; }
.coffee-contact__button { display: inline-flex; align-items: center; justify-content: space-between; min-width: min(100%, 305px); gap: 48px; margin-top: 36px; padding: 17px 19px 17px 22px; border: 1px solid rgba(248, 243, 235, .85); border-radius: 999px; background: var(--cream); color: var(--coffee); font-size: .71rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; transition: transform .3s ease, background .3s ease, color .3s ease; }
.coffee-contact__button span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--coffee); color: var(--cream); font-size: 1rem; transition: transform .3s ease; }
.coffee-contact__button:hover { background: transparent; color: var(--cream); transform: translateY(-3px); }
.coffee-contact__button:hover span { background: var(--cream); color: var(--coffee); transform: rotate(45deg); }
.coffee-contact__note { margin-top: 26px; color: rgba(248, 243, 235, .55); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.coffee-footer { display: flex; justify-content: space-between; padding: 26px clamp(24px, 4.5vw, 76px); background: var(--cream); color: var(--coffee); font-family: var(--display); font-size: .8rem; letter-spacing: .14em; }

@media (max-width: 767px) {
  .coffee-story { height: 390vh; }
  .coffee-story__header { padding-top: 23px; }
  .coffee-story__nav { display: none; }
  .coffee-story__shade { background: linear-gradient(90deg, rgba(26, 12, 7, .74), rgba(26, 12, 7, .14) 92%), linear-gradient(0deg, rgba(14, 7, 4, .58), transparent 52%); }
  .coffee-story__copy { bottom: 74px; }
  .coffee-story__copy h1, .coffee-story__copy h2 { font-size: clamp(2.8rem, 13vw, 4.3rem); }
  .coffee-story__body { max-width: 18rem; margin-top: 22px; font-size: .92rem; }
  .coffee-menu { padding-top: 88px; }
  .coffee-menu__cards { grid-template-columns: 1fr; }
  .coffee-card { min-height: 380px; }
  .coffee-menu__intro h2 { font-size: clamp(3rem, 14vw, 4.3rem); }
  .coffee-contact { padding: 28px 16px 64px; }
  .coffee-contact__card { min-height: 620px; padding: 35px 27px; border-radius: 28px; }
  .coffee-contact h2 { font-size: clamp(3.15rem, 14vw, 4.45rem); }
  .coffee-contact__button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { .coffee-story { height: 100svh; } .coffee-story__fallback, .coffee-card, .coffee-card__orb, [data-menu-reveal], .page-loader { transition: none; } .page-loader__mark { animation: none; } [data-menu-reveal] { opacity: 1; transform: none; } }