/* Chai Theory · concept by Brand Evolution */
:root{
  --green-950:#111B15;
  --green-900:#16231B;
  --green-800:#1F3226;
  --green-600:#3E5E45;
  --cardamom:#8FAE7E;
  --cardamom-soft:#C9D8BC;
  --cream:#F5EDDF;
  --cream-2:#EADFCB;
  --terracotta:#C2583A;
  --terra-dark:#9C3F27;
  --chai:#C98B57;
  --saffron:#E6A43A;
  --ink:#1D1813;
  --ink-soft:#4A4036;
  --display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gutter:clamp(16px, 4vw, 56px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.55;font-variation-settings:"wdth" 100;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.025em;line-height:.98}
h2{font-size:clamp(40px,6.4vw,92px)}
h2 em{color:var(--terracotta)}
p{margin:0}
:focus-visible{outline:3px solid var(--saffron);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:var(--cream);padding:10px 14px;border-radius:8px}
.skip:focus{left:8px}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cardamom-soft)}
.eyebrow.dark{color:var(--green-600)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--cardamom);box-shadow:0 0 0 0 rgba(143,174,126,.6);animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(143,174,126,.6)}80%,100%{box-shadow:0 0 0 10px rgba(143,174,126,0)}}

.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;transition:transform .35s var(--ease),background .3s,color .3s;will-change:transform}
.btn-solid{background:var(--terracotta);color:#FFF6EA}
.btn-solid:hover{background:#D0653F;transform:translateY(-2px)}
.btn-solid.dark{background:var(--green-900);color:var(--cream)}
.btn-solid.dark:hover{background:var(--green-800)}
.btn-ghost{color:var(--cream);box-shadow:inset 0 0 0 1.5px rgba(245,237,223,.45)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--cream);transform:translateY(-2px)}
.btn-ghost.dark{color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(29,24,19,.3)}
.btn-ghost.dark:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}

/* NAV */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);color:var(--cream);mix-blend-mode:normal;transition:background .4s,color .4s,padding .4s}
.nav.solid{background:rgba(245,237,223,.86);color:var(--ink);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:20px;letter-spacing:-.02em}
.brand svg{width:30px;height:30px}
.brand em{font-size:1.12em}
.nav nav{display:flex;gap:26px;align-items:center;font-size:15px;font-weight:500}
.nav nav a{text-decoration:none;opacity:.85}
.nav nav a:hover{opacity:1}
.nav-cta{padding:9px 16px;border-radius:999px;box-shadow:inset 0 0 0 1.5px currentColor;opacity:1!important}
@media (max-width:720px){.nav nav a:not(.nav-cta){display:none}}

/* HERO */
.hero{position:relative;height:260vh;background:radial-gradient(120% 80% at 75% 70%,#24392B 0%,var(--green-900) 55%,var(--green-950) 100%);color:var(--cream)}
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;align-items:center;padding:0 var(--gutter)}
.hero-stage::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;background-image:radial-gradient(rgba(245,237,223,.07) 1px,transparent 1.2px);background-size:22px 22px}
.cup-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.cup-fallback{position:absolute;right:12%;bottom:12%;width:min(30vw,340px);z-index:1}
.js-ready .cup-fallback{display:none}
.chai-photos{position:absolute;top:0;bottom:0;right:0;width:58%;z-index:1;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 48% 50% at 50% 55%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 48% 50% at 50% 55%,#000 60%,transparent 100%)}
.cp-in{position:absolute;left:50%;top:50%;height:100%;aspect-ratio:640/768;max-width:none;transform:translate(-50%,-50%)}
.cp-in img{position:absolute;inset:0;width:100%;height:100%;display:block}
.cp-full{-webkit-mask-image:linear-gradient(180deg,transparent calc(var(--lm,70%) - .3%),#000 calc(var(--lm,70%) + .6%));mask-image:linear-gradient(180deg,transparent calc(var(--lm,70%) - .3%),#000 calc(var(--lm,70%) + .6%))}
.cp-surf{position:absolute;left:var(--sx,30%);width:var(--sw,40%);top:var(--ly,70%);aspect-ratio:5/1;transform:translateY(-50%);border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .75 0 0 0 1.6 -.85'/%3E%3C/filter%3E%3Crect width='120' height='40' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/60px 20px,radial-gradient(ellipse at 48% 45%,rgb(216,162,94),rgb(198,142,80) 55%,rgb(172,118,64) 84%,rgba(150,100,54,.9) 94%,rgba(140,92,50,0) 100%);box-shadow:inset 0 -2px 4px rgba(120,80,40,.35);opacity:var(--surf,0)}
.cp-stream{position:absolute;left:51.6%;top:0;height:calc(var(--ly,70%) + .8%);width:calc(2.4% + var(--pour,0) * 1.9%);transform:translateX(-50%);opacity:var(--pour,0);border-radius:0 0 50% 50%/0 0 6px 6px;background:linear-gradient(90deg,rgba(120,76,42,0),rgba(164,112,66,.82) 18%,rgba(186,134,86,.8) 34%,rgba(246,214,170,.9) 41%,rgba(190,138,90,.8) 48%,rgba(160,108,64,.82) 78%,rgba(120,76,42,0));clip-path:polygon(10% 0,90% 0,66% 100%,34% 100%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%);mask-image:linear-gradient(180deg,transparent,#000 14%);animation:wob .22s ease-in-out infinite alternate}
.cp-splash{position:absolute;left:51.6%;top:var(--ly,70%);width:10%;aspect-ratio:4/1;transform:translate(-50%,-50%);border-radius:50%;opacity:var(--pour,0);background:radial-gradient(ellipse at 50% 50%,rgba(232,196,150,.85),rgba(200,152,104,.55) 35%,rgba(180,130,86,0) 70%);animation:splash .5s ease-out infinite}
@keyframes wob{to{transform:translateX(-50%) skewX(.6deg) scaleX(.92)}}
@keyframes splash{50%{transform:translate(-50%,-50%) scale(1.15,1.05)}}
.hero-stage.photo .cup-canvas,.hero-stage.photo .cup-fallback{display:none}
.hero-copy{position:relative;z-index:2;max-width:640px;transform:translate3d(0,calc(var(--p,0) * 40px),0);opacity:calc(1 - var(--p,0) * .25)}
.kinetic{font-size:clamp(56px,10.5vw,156px);line-height:.88;letter-spacing:-.045em;margin:22px 0 26px;font-weight:800;font-variation-settings:"wdth" 88,"opsz" 96}
.kinetic .line{display:block;overflow:hidden;padding-bottom:.06em}
.kinetic .w{display:inline-block}
.kinetic em{color:var(--saffron);font-size:1.12em;letter-spacing:-.01em;display:inline-block;transform:skewX(calc(var(--skew,0) * 1deg));transition:transform .2s linear}
.split .ch{display:inline-block;transform:translate3d(0,105%,0) rotate(6deg);animation:rise 1s var(--ease) forwards;animation-delay:calc(var(--i) * 32ms + 150ms)}
@keyframes rise{to{transform:none}}
.split-done .ch{animation:none!important;transform:none}
.kinetic .ch:hover{animation:none;transform:translateY(-.06em);color:var(--cardamom-soft);transition:transform .25s var(--ease),color .25s}
.hero-sub{font-size:clamp(17px,1.5vw,20px);max-width:470px;color:rgba(245,237,223,.82)}
.rot-wrap{display:block;margin-top:10px;color:var(--cream)}
.rot{display:inline-block;vertical-align:bottom;overflow:hidden;height:1.5em}
.rot-in{display:inline-block;font-family:var(--serif);font-style:italic;font-size:1.25em;color:var(--saffron);line-height:1.2}
.rot-in.out{animation:rotOut .45s var(--ease) forwards}
.rot-in.in{animation:rotIn .55s var(--ease) forwards}
@keyframes rotOut{to{transform:translateY(-110%);opacity:0}}
@keyframes rotIn{from{transform:translateY(110%);opacity:0}to{transform:none;opacity:1}}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.pour-meter{position:absolute;z-index:3;left:var(--gutter);bottom:60px;display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.06em;color:rgba(245,237,223,.75)}
.pm-track{width:120px;height:4px;border-radius:4px;background:rgba(245,237,223,.15);overflow:hidden}
.pm-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--chai),var(--saffron));transform-origin:left;transform:scaleX(var(--lvl,.08))}
.pm-num{font-variant-numeric:tabular-nums;color:var(--cream);font-weight:600}
.pour-meter.done .pm-hint{color:var(--saffron)}

@media (max-width:760px){
  .hero{height:220vh}
  .hero-stage{align-items:start;padding-top:96px}
  .kinetic{font-size:clamp(50px,15vw,84px);margin:16px 0 18px}
  .hero-sub{font-size:16px}
  .hero-actions{margin-top:20px}
  .hero-actions .btn{padding:13px 18px;font-size:15px}
  .cup-fallback{right:50%;transform:translateX(50%);bottom:6%;width:46vw}
  .chai-photos{top:auto;height:56%;width:100%}
  .pour-meter{bottom:18px;right:var(--gutter);left:auto;flex-direction:column;align-items:flex-end;gap:6px;font-size:12px}
  .pm-track{width:80px}
}
@media (max-width:760px) and (max-height:700px){.hero-sub .rot-wrap{display:none}}

/* TICKER */
.ticker{background:var(--terracotta);color:#FFF4E6;overflow:hidden;padding:16px 0;font-weight:600;font-size:clamp(18px,2.2vw,28px);letter-spacing:-.01em}
.ticker-in{display:flex;gap:28px;width:max-content;animation:tick 38s linear infinite}
.ticker i{font-style:normal;color:var(--saffron)}
@keyframes tick{to{transform:translateX(-50%)}}

/* MENU */
.menu{position:relative;background:var(--cream)}
.menu-pin{padding:110px 0 60px}
.pin-mode .menu-pin{position:sticky;top:0;height:100vh;height:100svh;padding:0;display:grid;grid-template-rows:auto 1fr auto;align-content:center;overflow:hidden}
.menu-head{padding:0 var(--gutter);display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 40px}
.pin-mode .menu-head{padding-top:96px}
.menu-head .eyebrow{grid-column:1/-1}
.menu-head h2{font-size:clamp(40px,5.4vw,80px)}
.menu-note{max-width:280px;font-size:14px;color:var(--ink-soft)}
.menu-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:36px 0 30px;scrollbar-width:thin}
.pin-mode .menu-viewport{overflow:visible;padding:4vh 0 3vh;align-self:center}
.menu-track{list-style:none;margin:0;padding:0 var(--gutter);display:flex;gap:22px;width:max-content;will-change:transform}
.mcard{position:relative;scroll-snap-align:start;width:min(320px,78vw);min-height:min(440px,58vh);border-radius:26px;padding:24px 24px 22px;display:flex;flex-direction:column;transform:rotate(var(--r,0deg));transition:transform .5s var(--ease)}
.mcard:hover{transform:translateY(-6px) rotate(0deg)}
.mcard:nth-child(odd){--r:-1.2deg}.mcard:nth-child(even){--r:1deg}
.m-no{font-size:13px;font-weight:600;letter-spacing:.1em;opacity:.7}
.mcard .ill{width:62%;margin:6px auto 14px;flex:0 0 auto}
.mcard .ill--photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px;margin:12px 0 14px}
.mcard h3{font-size:32px;letter-spacing:-.03em}
.mcard p{font-size:15px;line-height:1.45;margin-top:8px}
.price{margin-top:auto!important;padding-top:16px;font-size:44px!important;font-weight:700;letter-spacing:-.04em;line-height:1!important}
.price span{font-size:.55em;vertical-align:.5em;margin-right:2px;font-weight:600}
.c-cream{background:var(--cream-2);color:var(--ink)}
.c-green{background:var(--green-800);color:var(--cream)}
.c-terra{background:var(--terracotta);color:#FFF6EA}
.c-saffron{background:var(--saffron);color:var(--ink)}
.c-end{background:var(--ink);color:var(--cream);justify-content:center}
.end-big{font-size:46px!important;font-weight:800;letter-spacing:-.04em;line-height:.95!important}
.menu-progress{margin:0 var(--gutter);height:3px;background:rgba(29,24,19,.1);border-radius:3px;overflow:hidden}
.menu-progress span{display:block;height:100%;background:var(--terracotta);transform-origin:left;transform:scaleX(var(--mp,0))}
.menu-progress{display:none}.pin-mode .menu-progress{display:block;margin-bottom:28px}
@media (max-width:760px){.menu-head{grid-template-columns:1fr}.menu-head h2{font-size:40px}.mcard h3{font-size:28px}.price{font-size:38px!important}
  .pin-mode .menu-head{padding-top:76px}.js .menu-head.reveal{opacity:1;transform:none}.mcard{min-height:min(400px,50vh)}.pin-mode .menu-viewport{padding:2vh 0}}

/* illustrations */
.ill .sh{fill:rgba(0,0,0,.12)}
.ill .gl{fill:rgba(255,255,255,.35)}
.ill .ln{fill:none;stroke:currentColor;stroke-width:3;stroke-linejoin:round}
.ill .tea{fill:#C98B57}
.ill .froth{fill:#EED2AC}
.ill .facet{stroke:rgba(29,24,19,.18);stroke-width:2}
.ill .hi{stroke:rgba(255,255,255,.75);stroke-width:4;stroke-linecap:round}
.ill .clay{fill:#B9532F}.ill .clay-rim{fill:#D06A42}.ill .clay-line{fill:none;stroke:#8E3A1F;stroke-width:2}
.ill .pod{fill:var(--cardamom)}
.ill .amber{fill:#D9892A;opacity:.92}
.ill .lemon{fill:#F2D34B}.ill .lemon-in{fill:#FBEA9A}.ill .lemon-seg{stroke:#F2D34B;stroke-width:1.5}
.ill .mint{fill:none;stroke:#5E8C4E;stroke-width:5;stroke-linecap:round}
.ill .saucer{fill:#FFF6EA}.ill .saucer-in{fill:#EADFCB}
.ill .cup{fill:#FFF6EA;stroke:var(--ink);stroke-width:2.5}
.ill .handle{fill:none;stroke:#FFF6EA;stroke-width:8;stroke-linecap:round}
.ill .cup-rim{fill:#FFF6EA;stroke:var(--ink);stroke-width:2.5}
.ill .zaf{fill:#F0B44A}
.ill .thread{stroke:#B3122E;stroke-width:2;stroke-linecap:round}
.ill .bisc ellipse{fill:#D9A35E;stroke:#A9713A;stroke-width:2}
.ill .bisc-top{fill:#E8B873;stroke:#A9713A;stroke-width:2}
.ill .bisc-top.tilt{transform-origin:92px 58px;transform:rotate(-14deg)}
.ill .dots circle{fill:#A9713A}
.ill .bun{fill:#D99A52}.ill .bun-base{fill:#C07F3C}.ill .butter{fill:#FFF1C4}.ill .bun-shine{fill:none;stroke:#F0C27E;stroke-width:4;stroke-linecap:round}
.ill .lukhmi{fill:#F3C37A}.ill .lukhmi-s{fill:#D99A52}.ill .lukhmi-s2{fill:#C07F3C}.ill .lukhmi-in{fill:#F7D598}.ill .crimp{fill:none;stroke:#B9772F;stroke-width:2}

/* BREW */
.brew{background:var(--cream);padding:120px 0 40px}
.brew-intro{padding:0 var(--gutter);max-width:1100px}
.brew-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 6vw;padding:0 var(--gutter)}
.brew-visual{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pot{width:min(100%,460px)}
.pot .pan{fill:#3A3A36}
.pot .pan-shade{fill:url(#flameG);opacity:0}
.pot .pan-rim{fill:#55554F}
.pot .pan-handle{fill:none;stroke:#2B2B28;stroke-width:12;stroke-linecap:round}
.pot .burner{fill:#2B2B28}
.pot .liquid{fill:#8DB2AF;transition:fill 1.2s var(--ease)}
.brew-visual.s2 .liquid{fill:#7A4426}
.brew-visual.s3 .liquid{fill:#6E3A1F}
.brew-visual.s4 .liquid{fill:#C68D5A}
.pot .bubbles circle{fill:rgba(255,255,255,.55);transform-box:fill-box;transform-origin:center;animation:bub 1.6s ease-in-out infinite}
.pot .bubbles circle:nth-child(2n){animation-delay:.5s}.pot .bubbles circle:nth-child(3n){animation-delay:.9s}
@keyframes bub{0%,100%{transform:scale(.4);opacity:0}50%{transform:scale(1);opacity:1}}
.pot .leaves path{fill:#2E1B10;opacity:0;transform:translateY(-30px);transition:opacity .8s,transform .9s var(--ease)}
.brew-visual.s2 .leaves path{opacity:.9;transform:none}
.pot .leaves path:nth-child(2n){transition-delay:.1s}.pot .leaves path:nth-child(3n){transition-delay:.2s}
.pot .spice > *{opacity:0;transform:translateY(-40px);transition:opacity .7s,transform 1s var(--ease)}
.brew-visual.s3 .spice > *{opacity:1;transform:none}
.pot .cardamom{fill:var(--cardamom);stroke:#5E7A50;stroke-width:1.5}
.pot .cinnamon{fill:#8A4B2A}
.pot .ginger{fill:#E3C089}
.pot .milk{fill:none;stroke:#FFF3DF;stroke-width:6;stroke-linecap:round;opacity:0;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 2.2s var(--ease),opacity .4s}
.brew-visual.s4 .milk{opacity:.85;stroke-dashoffset:0}
.brew-visual.s4 .spice > *{opacity:.35}
.pot .steam-svg path{fill:none;stroke:rgba(29,24,19,.22);stroke-width:5;stroke-linecap:round;stroke-dasharray:120;stroke-dashoffset:120;opacity:0;transition:opacity .6s}
.brew-visual.s1 .steam-svg path{opacity:1;animation:steamDraw 3.2s ease-in-out infinite}
.pot .steam-svg path:nth-child(2){animation-delay:.8s}.pot .steam-svg path:nth-child(3){animation-delay:1.6s}
@keyframes steamDraw{0%{stroke-dashoffset:120;opacity:0}30%{opacity:1}100%{stroke-dashoffset:-120;opacity:0}}
.flames path{transform-box:fill-box;transform-origin:50% 100%;animation:flick .5s ease-in-out infinite alternate}
.flames path:nth-child(2){animation-duration:.42s}.flames path:nth-child(3){animation-duration:.6s}
@keyframes flick{to{transform:scaleY(.82) scaleX(1.06)}}
.brew-visual.s4 .flames{opacity:.55}
.brew-clock{margin-top:18px;font-size:44px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.brew-clock small{font-size:14px;font-weight:500;letter-spacing:.06em;color:var(--ink-soft);margin-left:6px}
.steps{list-style:none;margin:0;padding:20vh 0 30vh}
.step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transform:translateY(20px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.step.active{opacity:1;transform:none}
.s-no{font-size:clamp(80px,10vw,150px);font-weight:800;letter-spacing:-.06em;line-height:.8;color:transparent;-webkit-text-stroke:2px var(--terracotta)}
.step.active .s-no{color:var(--terracotta);transition:color .8s}
.step h3{font-size:clamp(36px,4.2vw,60px);margin:18px 0 16px}
.step h3 em{color:var(--green-600)}
.step p{max-width:440px;font-size:18px;color:var(--ink-soft)}
html:not(.js) .step{opacity:1;transform:none}
@media (max-width:760px){
  .brew{padding-top:90px}
  .brew-grid{grid-template-columns:1fr}
  .brew-visual{height:auto;top:56px;padding:10px 0 8px;background:var(--cream);box-shadow:0 22px 16px -4px var(--cream);z-index:2}
  .pot{width:min(52vw,220px)}
  .brew-clock{font-size:28px;margin-top:6px}
  .steps{padding:6vh 0 20vh}
  .step{min-height:62vh}
  .step p{font-size:16px}
}

/* THEORIES */
.theories{background:var(--green-900);color:var(--cream);padding:130px var(--gutter);position:relative;overflow:hidden}
.th-head h2{margin-top:16px}
.th-head h2 em{color:var(--saffron)}
.th-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px;perspective:1100px}
.tcard{position:relative;border-radius:26px;padding:30px 28px 34px;min-height:400px;display:flex;flex-direction:column;overflow:hidden;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease),box-shadow .6s;will-change:transform;outline-offset:4px}
.tcard.tilting{transition:transform .08s linear,box-shadow .6s}
.tcard:hover,.tcard:focus-visible{box-shadow:0 40px 80px -30px rgba(0,0,0,.55)}
.t1{background:linear-gradient(160deg,#C2583A,#9C3F27)}
.t2{background:linear-gradient(160deg,#E6A43A,#C98B57);color:var(--ink)}
.t3{background:linear-gradient(160deg,#3E5E45,#24392B);box-shadow:inset 0 0 0 1.5px rgba(201,216,188,.25)}
.t-art{width:120px;height:120px;margin-bottom:auto;transform:translateZ(50px)}
.t-art svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.5;opacity:.85}
.t-no{display:block;margin-top:40px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.8;transform:translateZ(30px)}
.tcard h3{font-size:clamp(30px,2.8vw,40px);margin:10px 0 12px;transform:translateZ(40px)}
.tcard p{font-size:16px;opacity:.9;transform:translateZ(24px)}
.glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.28),transparent 45%);opacity:0;transition:opacity .4s;mix-blend-mode:soft-light}
.tcard:hover .glare{opacity:1}
@media (max-width:900px){.th-grid{grid-template-columns:1fr}.tcard{min-height:300px}}
@media (max-width:760px){.theories{padding:96px var(--gutter)}}

/* FIND */
.find{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center;padding:130px var(--gutter);background:var(--cream)}
.find h2 em{color:var(--terracotta)}
.open-now{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:8px 14px;border-radius:999px;background:var(--cream-2);font-weight:600;font-size:15px}
.open-now .pulse{width:9px;height:9px;border-radius:50%;background:var(--ink-soft)}
.open-now.is-open .pulse{background:#3F8A4A;animation:ping 2s infinite}
.open-now.is-closed .pulse{background:var(--terra-dark)}
.hours{margin:28px 0 22px;display:grid;gap:0}
.hours div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid rgba(29,24,19,.14)}
.hours dt{font-weight:600}
.hours dd{margin:0;color:var(--ink-soft);text-align:right}
address{font-style:normal;color:var(--ink-soft);line-height:1.6}
.map svg{width:100%;height:auto;border-radius:28px}
.m-bg{fill:var(--green-900)}
.m-park{fill:#2D4734}
.m-road{fill:none;stroke:#3C5544;stroke-width:9;stroke-linecap:round}
.m-road.big{stroke:#4F6B57;stroke-width:16}
.m-road.thin{stroke-width:5}
.m-label{fill:var(--cardamom-soft);font:600 13px var(--display);letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.m-route{fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;stroke-dasharray:10 12;stroke-dashoffset:0}
.js .m-route{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 2.4s var(--ease)}
.js .map.in .m-route{stroke-dashoffset:0}
.m-drop{fill:var(--terracotta)}
.m-cup{fill:var(--cream)}
.m-pulse{fill:none;stroke:var(--terracotta);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:mp 2.6s ease-out infinite;opacity:0}
.m-pulse.p2{animation-delay:1.3s}
@keyframes mp{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1.8);opacity:0}}
@media (max-width:860px){.find{grid-template-columns:1fr;padding:96px var(--gutter)}}

/* FOOTER */
.foot{background:var(--ink);color:var(--cream);padding:90px var(--gutter) 110px;overflow:hidden}
.foot-big{font-size:clamp(64px,17vw,280px);font-weight:800;letter-spacing:-.06em;line-height:.85;color:var(--terracotta)}
.foot-big em{color:var(--saffron)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;margin-top:50px;font-size:15px;color:rgba(245,237,223,.75)}
.foot-row nav{display:flex;flex-wrap:wrap;gap:22px}
.foot-row a{text-decoration:none}
.foot-row a:hover{color:var(--cream);text-decoration:underline}

/* reveal */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* concept badge */
.concept-badge{position:fixed;left:14px;bottom:14px;z-index:60;font-size:12px;font-weight:600;letter-spacing:.02em;text-decoration:none;background:rgba(29,24,19,.86);color:var(--cream);padding:8px 12px;border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(0,0,0,.18)}
.concept-badge:hover{background:var(--terracotta)}
@media (max-width:760px){.pour-meter{bottom:56px}}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .split .ch{transform:none}
  .ticker-in{animation:none}
  .hero-copy{transform:none;opacity:1}
  .hero{height:auto}
  .hero-stage{position:relative;min-height:100vh}
  .js .reveal{opacity:1;transform:none}
  .step{opacity:1;transform:none}
  .js .m-route{stroke-dashoffset:0}
}

/* photo versions of the brew pot and theory art (drawings stay as the fallback if an image fails) */
.brew-photos{position:relative;width:min(100%,460px);aspect-ratio:640/704;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 54%,#000 48%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 54%,#000 48%,transparent 100%)}
.brew-photos + .pot{display:none}
.bf{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease)}
.bf-0,.brew-visual.s2 .bf-1,.brew-visual.s3 .bf-2,.brew-visual.s4 .bf-3{opacity:1}
.brew-visual.s1:not(.s2) .bf-0b{animation:boil 1.4s ease-in-out infinite}
@keyframes boil{50%{opacity:1}}
.t-art img{width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px rgba(255,255,255,.22),0 18px 30px -12px rgba(0,0,0,.5)}
.t-art img + svg{display:none}
.t-art:has(img){width:150px;height:150px}
@media (max-width:760px){.brew-photos{width:min(56vw,240px)}}
@media (prefers-reduced-motion:reduce){.bf{transition:none}.brew-visual .bf-0b{animation:none}}