:root{
  --bg:     #0A0A0C;
  --bg-2:   #121216;
  --bg-3:   #1A1A20;
  --line:   #26262E;
  --cream:  #F2EDE4;
  --grey:   #9A968E;
  --grey-2: #6E6A64;
  --amber:  #F5A524;
  --amber-d:#C97F10;

  --disp: "Anton", "Arial Narrow", Impact, sans-serif;
  --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --r-md: 14px;
  --ease: cubic-bezier(.2,.8,.24,1);
  --pad:  clamp(18px, 5vw, 66px);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--bg); color:var(--cream);
  font:400 16px/1.6 var(--sans); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.skip{ position:absolute; left:-9999px; background:var(--amber); color:#0A0A0C; padding:12px 16px; z-index:99; }
.skip:focus{ left:0; top:0; }

.bar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:20px;
  padding:12px var(--pad);
  background:rgba(10,10,12,.84); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.logo{
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  font-family:var(--disp); font-size:21px; letter-spacing:.02em;
  color:var(--cream); text-decoration:none; text-transform:uppercase;
}
.dot{ width:10px; height:10px; border-radius:999px; background:var(--amber); flex:none; }
.nav{ display:flex; gap:22px; margin-left:auto; }
.nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font:500 13.5px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase;
  color:var(--grey); text-decoration:none; transition:color .15s var(--ease);
}
.nav a:hover, .nav a:focus-visible{ color:var(--amber); outline:none; }
.bar-cta{
  display:inline-flex; align-items:center; min-height:44px; padding:0 17px;
  font:600 13px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase;
  color:#0A0A0C; background:var(--amber); text-decoration:none; border-radius:999px;
  transition:background .16s var(--ease);
}
.bar-cta:hover{ background:var(--amber-d); }

.hero{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px);
  align-items:center;
  padding:clamp(34px,5vw,64px) var(--pad) clamp(40px,6vw,72px);
  min-height:min(84vh, 760px);
}
.kicker{
  margin:0 0 20px; font:500 12px/1 var(--sans);
  letter-spacing:.24em; text-transform:uppercase; color:var(--amber);
}
h1{
  margin:0; font-family:var(--disp); font-weight:400;
  font-size:clamp(58px,12.5vw,148px); line-height:.86; letter-spacing:-.01em;
  text-transform:uppercase;
}
h1 span{ display:block; }
h1 .amber{ color:var(--amber); }
.lede{
  margin:26px 0 0; font-size:clamp(15.5px,1.8vw,18.5px); line-height:1.62;
  color:var(--grey); max-width:44ch;
}
.cta-row{ display:flex; flex-wrap:wrap; gap:11px; margin-top:30px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 24px;
  font:600 13.5px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; border:1.5px solid transparent; border-radius:999px;
  transition:background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.btn.solid{ background:var(--amber); color:#0A0A0C; }
.btn.solid:hover{ background:var(--amber-d); }
.btn.line{ border-color:var(--line); color:var(--cream); }
.btn.line:hover{ border-color:var(--cream); background:rgba(242,237,228,.06); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; }

.cup-stage{
  position:relative; width:100%; aspect-ratio:1/1; max-height:64vh;
  cursor:grab; touch-action:none;
  display:grid; place-items:center;
}
.cup-stage.grabbing{ cursor:grabbing; }
.cup-stage:focus-visible{ outline:3px solid var(--amber); outline-offset:6px; border-radius:var(--r-md); }
#cup{ display:block; width:100%; height:100%; }
.cup-hint{
  position:absolute; bottom:2%; left:50%; transform:translateX(-50%);
  margin:0; font:500 11.5px/1 var(--sans);
  letter-spacing:.2em; text-transform:uppercase; color:var(--grey-2);
  transition:opacity .4s var(--ease);
}
.cup-hint.gone{ opacity:0; }

.ticker{
  border-block:1px solid var(--line); background:var(--bg-2);
  overflow:hidden; padding:14px 0;
}
.track{ display:flex; gap:0; width:max-content; }
.track span{
  font-family:var(--disp); font-size:clamp(15px,2vw,22px);
  letter-spacing:.04em; text-transform:uppercase; color:var(--cream);
  white-space:nowrap;
}
.track i{ color:var(--amber); font-style:normal; padding:0 22px; }
@media (prefers-reduced-motion:no-preference){
  .track{ animation:slide 26s linear infinite; }
  @keyframes slide{ to{ transform:translateX(-50%); } }
  
  .ticker:hover .track{ animation-play-state:paused; }
}

.wrap{ padding:clamp(54px,8vw,104px) var(--pad); }
.eyebrow{
  margin:0 0 14px; font:500 12px/1 var(--sans);
  letter-spacing:.24em; text-transform:uppercase; color:var(--amber);
}
h2{
  margin:0 0 44px; font-family:var(--disp); font-weight:400;
  font-size:clamp(38px,7vw,86px); line-height:.9; letter-spacing:-.005em;
  text-transform:uppercase;
}

.cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,4vw,60px); }
.col h3{
  margin:0 0 10px; font-family:var(--disp); font-weight:400;
  font-size:26px; text-transform:uppercase; letter-spacing:.02em; color:var(--amber);
}
.items{ list-style:none; margin:0; padding:0; }
.items li{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:14px 8px; border-bottom:1px solid var(--line);
  font-size:15.5px;
}
.items b{ font-family:var(--disp); font-weight:400; font-size:19px; font-variant-numeric:tabular-nums; }
.note{ margin:16px 0 0; font-size:13.5px; color:var(--grey-2); }

.beans{ background:var(--bg-2); border-block:1px solid var(--line); }
.bean-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.bean{
  background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 24px 28px;
  transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.b-role{
  margin:0 0 14px; font:600 11px/1 var(--sans);
  letter-spacing:.18em; text-transform:uppercase; color:var(--amber);
}
.bean h3{ margin:0; font-family:var(--disp); font-weight:400; font-size:30px; text-transform:uppercase; letter-spacing:.01em; }
.b-org{ margin:6px 0 0 !important; font-size:13px; color:var(--grey-2); }
.bean p{ margin:14px 0 0; font-size:14.5px; line-height:1.62; color:var(--grey); }

.v-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.v-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 20px 24px;
}
.v-card b{
  display:block; font:600 11px/1 var(--sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--grey-2);
}
.v-card span{
  display:block; margin-top:10px; font-family:var(--disp); font-weight:400;
  font-size:clamp(19px,2.3vw,26px); letter-spacing:.01em;
}
.v-note{ margin:26px 0 0; font-size:15.5px; color:var(--grey); }

.foot{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:24px var(--pad) 32px; border-top:1px solid var(--line);
}
.foot p{ margin:0; font-size:12.5px; color:var(--grey-2); }
.foot b{ color:var(--grey); }

@media (max-width:940px){
  .hero{ grid-template-columns:1fr; min-height:0; }
  .cup-stage{ order:-1; max-height:46vh; }
  .cols{ grid-template-columns:1fr; }
  .bean-grid{ grid-template-columns:1fr; }
  .v-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .nav{ display:none; }
  .bar-cta{ margin-left:auto; }
}

@media (prefers-contrast:more){
  :root{ --grey:#C6C2BA; --grey-2:#9C978F; --line:#3E3E48; }
}

.motion [data-enter], .motion [data-rise]{ opacity:0; transform:translateY(20px); }
.motion [data-enter].in, .motion [data-rise].in{
  opacity:1; transform:none;
  transition:opacity .6s var(--ease) var(--d,0ms), transform .6s var(--ease) var(--d,0ms);
}
.motion h1[data-enter] span{ opacity:0; transform:translateY(26px); }
.motion h1[data-enter].in span{
  opacity:1; transform:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.motion h1[data-enter].in span:nth-child(2){ transition-delay:.09s; }
.motion h1[data-enter].in span:nth-child(3){ transition-delay:.18s; }

@media (prefers-reduced-motion:reduce){
  .motion [data-enter], .motion [data-rise],
  .motion h1[data-enter] span{ opacity:1 !important; transform:none !important; }
}

@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .bean:hover{ transform:translateY(-5px); border-color:var(--amber); }
  .items li{ transition:background .16s var(--ease), padding-left .16s var(--ease); }
  .items li:hover{ background:var(--bg-2); padding-left:16px; }
  .items li:hover b{ color:var(--amber); }
  .v-card{ transition:transform .18s var(--ease), border-color .18s var(--ease); }
  .v-card:hover{ transform:translateY(-3px); border-color:var(--amber); }
  .btn.solid{ position:relative; overflow:hidden; }
  .btn.solid::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.4) 50%,transparent 68%);
    transform:translateX(-100%);
  }
  .btn.solid:hover::after{ transform:translateX(100%); transition:transform .6s var(--ease); }
}