/* Coffee Original: home page */

/* ---------- hero: pinned scroll journey ---------- */
.hero{position:relative;height:1100vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#140809}
.poster{position:absolute;inset:0;background:center/cover no-repeat}
#seq{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s var(--ease-out);transform:translateZ(0)}
.stage.video-ready #seq{opacity:1}
.stage.video-ready .scene,.stage.static-poster .scene{opacity:0}
.stage.video-failed #seq{display:none}

/* the designed stand-in journey (runs until the real video is in, and on phones) */
.scene{position:absolute;inset:0;transition:opacity 1.2s var(--ease-out);--hp:0}
.sc-glow{position:absolute;left:50%;top:50%;width:120vmin;height:120vmin;margin:-60vmin 0 0 -60vmin;border-radius:50%;background:radial-gradient(circle,rgba(122,3,5,.55) 0%,rgba(90,3,6,.28) 38%,rgba(20,8,9,0) 68%);animation:glowBreath 9s var(--ease-io) -3s infinite alternate}
@keyframes glowBreath{from{transform:scale(.94)}to{transform:scale(1.06)}}
.sc-beans,.sc-dust{position:absolute;inset:0;will-change:transform}
.bean{position:absolute;top:0;left:50%;width:var(--s,90px);margin-left:calc(var(--s,90px)/-2);will-change:transform,opacity}
.bean svg{width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.dot{position:absolute;border-radius:50%;background:#7B4A2A}
.sc-stream{position:absolute;left:50%;top:0;width:16px;height:64vh;margin-left:-8px;border-radius:0 0 10px 10px;transform-origin:50% 0;transform:scaleY(0);will-change:transform,opacity}
.sc-stream.espresso{background:linear-gradient(90deg,#2E1206,#7A4220 45%,#3A1708);box-shadow:0 0 30px rgba(201,139,85,.35)}
.sc-stream.milk{width:22px;margin-left:-11px;background:linear-gradient(90deg,#D9C3A6,#FFF4E4 45%,#D6BEA0);box-shadow:0 0 40px rgba(243,231,214,.3)}
.sc-cup{position:absolute;left:50%;top:64%;width:min(46vmin,420px);aspect-ratio:1;margin:calc(min(46vmin,420px)/-2) 0 0 calc(min(46vmin,420px)/-2);opacity:0;will-change:transform,opacity}
.sc-cup svg{width:100%;height:100%}
.cup-crema,.cup-art{transform-origin:200px 200px}
.steam{position:absolute;left:50%;top:-14%;width:40%;height:40%;margin-left:-20%;opacity:var(--steam,0)}
.steam i{position:absolute;bottom:0;width:10px;height:100%;border-radius:10px;background:linear-gradient(to top,rgba(243,231,214,.28),rgba(243,231,214,0));filter:blur(6px);animation:steamUp 5.5s var(--ease-io) infinite}
.steam i:nth-child(1){left:22%;animation-delay:-1.2s}
.steam i:nth-child(2){left:48%;animation-delay:-3.1s}
.steam i:nth-child(3){left:72%;animation-delay:-4.4s}
@keyframes steamUp{0%{transform:translateY(20%) scaleY(.6);opacity:0}40%{opacity:1}100%{transform:translateY(-30%) scaleY(1.1);opacity:0}}

/* legibility layer 1: global scrim */
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(14,5,6,0) 35%,rgba(14,5,6,.62) 100%),linear-gradient(to bottom,rgba(14,5,6,.45),rgba(14,5,6,0) 18%)}

/* caption bands */
.band{position:absolute;top:50%;width:min(540px,38vw);opacity:0;text-shadow:var(--tshadow);--k:0;--ks:clamp(0,(var(--k) - .45)*2.6,1)}
.band.left{left:var(--gutter);transform:translateY(-50%)}
.band.right{right:var(--gutter);transform:translateY(-50%);text-align:right}
.band.settle{left:var(--gutter);top:50%;transform:translateY(-50%);width:min(400px,25vw);text-align:left}
.band.dense::before{background:radial-gradient(ellipse 64% 60% at 50% 50%,rgba(14,5,6,.8) 0%,rgba(14,5,6,.58) 48%,rgba(14,5,6,0) 78%)}
/* legibility layer 2: a per-band scrim that rides the band */
.band::before{content:"";position:absolute;inset:-34% -26%;z-index:-1;pointer-events:none;opacity:calc(.25 + .75*var(--k));background:radial-gradient(ellipse 62% 58% at 50% 50%,rgba(14,5,6,.68) 0%,rgba(14,5,6,.45) 46%,rgba(14,5,6,0) 76%)}
.band h1,.band h2{font-size:clamp(2.6rem,5.2vw,5.4rem);font-weight:900;line-height:1.02;max-width:12ch}
.band.right h1,.band.right h2{margin-left:auto}
.band.settle h2{max-width:9ch;font-size:clamp(2.2rem,3.7vw,4.2rem)}
.band.settle .btn,.band.settle .btn-ghost{min-height:46px}
.band .kicker{margin-bottom:22px}
.band .mono.kicker{color:var(--text-secondary);opacity:var(--ks)}
.band .ribbon{text-shadow:none}
.band .sub{margin-top:20px;font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.5;max-width:34ch;opacity:var(--ks);transform:translate3d(0,calc((1 - var(--ks))*12px),0)}
.band.right .sub{margin-left:auto}
.band.settle .sub{max-width:30ch;--ks:clamp(0,(var(--k) - .62)*4,1)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}
.band.settle .cta-row{--kb:clamp(0,(var(--k) - .78)*5,1);opacity:var(--kb);transform:translate3d(0,calc((1 - var(--kb))*16px),0)}
.band .btn,.band .btn-ghost{text-shadow:none}
.band .btn-ghost{background:rgba(14,5,6,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.band:not(.on){pointer-events:none}

/* split text */
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}
/* (f) drift-down: beans falling */
.fx-drift .w{--kc:clamp(0,(var(--k) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translate3d(0,calc((1 - var(--kc))*-30px),0)}
/* (a) scatter: grounds gathering */
.fx-scatter .c{--kc:clamp(0,(var(--k) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translate3d(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)),0) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* invented: pour, each word streams down and stretches into place like a falling drop */
.fx-pour .w{--kc:clamp(0,(var(--k) - var(--th,0))*3,1);opacity:var(--kc);transform-origin:50% 0;transform:translate3d(0,calc((1 - var(--kc))*-56px),0) scaleY(calc(1 + (1 - var(--kc))*.35))}
/* (c) blur-to-sharp: milk foam settling */
.fx-blur [data-split]{position:relative}
.fx-blur .soft{position:absolute;inset:0;filter:blur(12px);opacity:calc(1 - var(--k));pointer-events:none}
.fx-blur .sharp{opacity:var(--k);display:inline}
.fx-blur .sharp .w{transform:scale(calc(.94 + .06*var(--k)))}
/* (e) staged rise: the cup arrives */
.fx-rise .w{--kc:clamp(0,(var(--k) - var(--th,0))*3.2,1);opacity:var(--kc);transform:translate3d(0,calc((1 - var(--kc))*34px),0)}

/* legibility layer 4: chips for small text */
.chip{background:rgba(14,5,6,.55);border:1px solid rgba(243,231,214,.16);border-radius:10px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,2,3,.85)}
.hud{position:absolute;left:var(--gutter);bottom:28px;display:flex;align-items:center;gap:12px;padding:10px 14px;font-size:.9rem}
.hud-n{color:var(--text-secondary)}
.hud-t{min-width:8.5em}
.hud-bar{position:relative;width:96px;height:2px;background:rgba(243,231,214,.2);overflow:hidden;border-radius:2px}
.hud-bar i{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--hb,0))}
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-primary);opacity:var(--cue,1);transition:opacity .5s var(--ease-out)}
.cue .ring{width:40px;height:40px;display:none}
.cue.loading .ring{display:block}
.cue.loading .chev{display:none}
.cue .chev{width:26px;height:26px;animation:chev 2.4s var(--ease-io) -.6s infinite}
.cue .mono{font-size:.7rem;color:var(--text-secondary)}
@keyframes chev{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (max-height:560px){.hud,.cue{display:none}}

.static-copy{display:none}

/* portrait screens scrub the portrait frame set; captions sit up top under a soft band */
@media (orientation: portrait){
  .hero{height:1100vh}
  .stage{height:100svh}
  .band,.band.left,.band.right,.band.settle{left:var(--gutter);right:var(--gutter);top:96px;width:auto;transform:none;text-align:left}
  .band h1,.band h2,.band.settle h2{font-size:clamp(2.1rem,9.4vw,3.4rem);max-width:13ch;margin-left:0}
  .band .sub,.band.right .sub{margin-left:0;font-size:1.02rem;max-width:30ch}
  .band.right h1,.band.right h2{margin-left:0}
  .band.settle{top:auto;bottom:40px}
  .band.settle::before{inset:-70px calc(-1*var(--gutter)) -40px;background:linear-gradient(to top,rgba(14,5,6,.88) 0%,rgba(14,5,6,.66) 62%,rgba(14,5,6,0) 100%)}
  .band .kicker{margin-bottom:14px}
  .band::before{inset:-110px calc(-1*var(--gutter)) -60px;background:linear-gradient(to bottom,rgba(14,5,6,.82) 0%,rgba(14,5,6,.6) 60%,rgba(14,5,6,0) 100%)}
  .cta-row{margin-top:22px}
  .hud{display:none}
}

/* the static-hero gates (identical strings live in home.js) */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px),(prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{position:relative;height:auto;min-height:100svh;display:flex;align-items:flex-start;justify-content:center;padding:112px var(--gutter) 0}
  .band,.hud,.cue,#seq{display:none}
  .sc-cup{top:auto;bottom:-6vmin;margin-top:0;width:min(78vw,420px);margin-left:calc(min(78vw,420px)/-2)}
  .static-copy{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:2;max-width:560px;text-shadow:var(--tshadow);padding-bottom:min(70vw,380px)}
  .static-copy::before{content:"";position:absolute;inset:-12% -20% 30%;z-index:-1;background:radial-gradient(ellipse 60% 55% at 50% 45%,rgba(14,5,6,.6),rgba(14,5,6,0) 76%)}
  .static-badge{width:104px;height:104px;border-radius:50%;margin-bottom:22px;box-shadow:0 14px 40px rgba(0,0,0,.45)}
  .static-copy h1{font-size:clamp(2.2rem,8.4vw,3.4rem);font-weight:900}
  .static-copy .sub{margin-top:16px;font-size:1.1rem;max-width:30ch}
  .static-copy .cta-row{justify-content:center}
  .static-copy .btn,.static-copy .btn-ghost{text-shadow:none}
  .static-copy .btn-ghost{background:rgba(14,5,6,.4)}
}

/* ---------- tilted marquee strips between sections ---------- */
.mq{position:relative;z-index:6;margin:-30px -4vw;padding:16px 0;overflow:hidden;rotate:var(--tilt,-2deg);background:rgba(23,6,7,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-block:1px solid rgba(243,231,214,.14);box-shadow:0 24px 50px -10px rgba(0,0,0,.6)}
.mq-track{display:flex;width:max-content;animation:mqScroll 40s linear infinite;animation-play-state:paused}
.mq.alive .mq-track{animation-play-state:running}
.mq-set{display:flex;align-items:center;gap:44px;padding-right:44px;font-family:var(--f-display);font-weight:700;font-size:.85rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap}
.mq-set b{font-weight:400;font-size:1rem;letter-spacing:0}
.mq-set .b1{color:#E3A35B}
.mq-set .b2{color:#E5373B}
@keyframes mqScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:720px){.mq{margin:-22px -6vw;padding:12px 0}.mq-set{font-size:.72rem;gap:32px;padding-right:32px}}

/* ---------- floating minis: beans, cups, desserts ---------- */
.has-deco{position:relative;isolation:isolate}
.deco{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.deco .d{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);overflow:visible;rotate:var(--r);filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.hub .deco .d{filter:drop-shadow(0 10px 14px rgba(80,35,10,.22))}
.deco.alive .d{animation:dFloat var(--dur,9s) var(--ease-io) var(--dl,-2s) infinite}
@keyframes dFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@media (max-width:720px){
  .deco .dh{display:none}
  .deco .d{width:calc(var(--s)*.72);height:calc(var(--s)*.72)}
}

/* ---------- why ---------- */
.why{position:relative;padding:150px 0 130px;overflow:hidden}
.why-head{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:70px}
.why-head .mono{color:var(--text-secondary)}
.why h2{font-size:clamp(2.2rem,4.6vw,4rem);max-width:16ch}
.why h2 .script{color:var(--text-secondary);font-size:.86em}
.why-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.why-list li{padding:34px 34px 10px 0;border-right:1px solid var(--line)}
.why-list li+li{padding-left:34px}
.why-list li:last-child{border-right:0}
.why-list .num{display:block;font-family:var(--f-display);font-weight:900;font-size:4.4rem;line-height:1;color:var(--brand);-webkit-text-stroke:1.5px rgba(243,231,214,.55);margin-bottom:22px}
.why-list h3{font-size:1.6rem;margin-bottom:12px}
.why-list p{color:var(--text-secondary);max-width:32ch}
.why-bean{position:absolute;right:-40px;top:70px;width:220px;color:rgba(243,231,214,.08)}
.why-bean.alive{animation:beanTurn 40s linear -8s infinite}
@keyframes beanTurn{to{transform:rotate(360deg)}}
@media (max-width:860px){
  .why{padding:110px 0 90px}
  .why-list{grid-template-columns:1fr}
  .why-list li,.why-list li+li{padding:28px 0;border-right:0;border-bottom:1px solid var(--line)}
}

/* ---------- menu hub: the red badge section ---------- */
.hub{position:relative;overflow:hidden;background:radial-gradient(ellipse 70% 60% at 50% 0%,#F4E7D5 0%,rgba(244,231,213,0) 70%),linear-gradient(180deg,#EAD9C3 0%,#DFC7A9 100%);color:#2B130C;padding:0}
.hub .ribbon{background:var(--brand);color:var(--accent)}
.hub :focus-visible{outline-color:var(--brand)}
.hub>.rope{position:absolute;left:0;right:0}
.hub>.rope:first-child{top:18px}
.hub>.rope:last-child{bottom:18px}
.hub .wrap{padding:130px 0 140px}
.hub-head{text-align:center;margin-bottom:64px}
.hub-head h2{margin:22px auto 0;font-size:clamp(2.2rem,4.6vw,4rem);max-width:18ch}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{--ink:#F3E7D6;--ink2:rgba(243,231,214,.78);--ico:rgba(243,231,214,.14);--foot:rgba(243,231,214,.22);position:relative;display:flex;flex-direction:column;padding:44px 32px 30px;min-height:420px;text-decoration:none;color:var(--ink);border-radius:220px 220px 22px 22px;box-shadow:0 22px 46px rgba(70,30,10,.22),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.card.c-coffee{background:linear-gradient(180deg,#5A2C17 0%,#2E140B 100%)}
.card.c-autumn{background:linear-gradient(180deg,#DE8238 0%,#A6491A 100%);--ink2:rgba(255,241,226,.86)}
.card.c-kids{background:linear-gradient(180deg,#DDF0FA 0%,#B9DBEE 100%);--ink:#3B1612;--ink2:#5E4039;--ico:rgba(122,3,5,.1);--foot:rgba(59,22,18,.18)}
.card.c-kids .card-ico{color:var(--brand)}
.card:hover{transform:translateY(-8px);box-shadow:0 34px 60px rgba(70,30,10,.3),inset 0 1px 0 rgba(255,255,255,.18)}
.card-ico{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 18px;border-radius:50%;background:var(--ico);color:var(--ink)}
.card-ico svg{width:52px;height:52px}
.card.alive .st{animation:bob 4.5s var(--ease-io) -1.4s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.card-tag{text-align:center;font-size:1.3rem;color:var(--ink2);margin-bottom:4px}
.card h3{text-align:center;font-size:2rem;margin-bottom:14px}
.card p{text-align:center;color:var(--ink2);font-size:.98rem}
.card-foot{margin-top:auto;padding-top:26px;display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--foot)}
.card-foot .arrow{font-size:1.5rem;transition:transform .5s var(--ease-out)}
.card:hover .arrow{transform:translateX(6px)}
.reveal.done .card.r{transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),opacity .9s var(--ease-out);transition-delay:0s}
@media (max-width:960px){.cards{grid-template-columns:1fr;max-width:460px;margin-inline:auto}.card{min-height:0}}

/* ---------- season ---------- */
.season{position:relative;padding:150px 0;overflow:hidden;background:radial-gradient(ellipse 60% 70% at 85% 50%,rgba(216,120,47,.14),transparent 70%)}
.season-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:center}
.season-word{font-size:clamp(4rem,9vw,8rem);line-height:1;color:#D8782F;margin-bottom:6px}
.season h2{font-size:clamp(2rem,3.8vw,3.4rem);max-width:14ch;margin-bottom:22px}
.lede{color:var(--text-secondary);font-size:1.1rem;max-width:40ch;margin-bottom:30px}
.season-list{list-style:none;margin:0;padding:0}
.season-list li{display:flex;align-items:baseline;gap:14px;padding:22px 0;border-bottom:1px dashed rgba(243,231,214,.22)}
.season-list .nm{flex:1;font-family:var(--f-display);font-weight:700;font-size:1.35rem;line-height:1.2}
.season-list small{display:block;font-family:var(--f-body);font-weight:400;font-size:.88rem;color:var(--text-secondary);margin-top:4px}
.season-list .pr{font-family:var(--f-mono);font-size:1.05rem;white-space:nowrap}
.season-list .pr::after{content:" ₸";color:var(--text-secondary)}
.leaf{position:absolute;width:38px;color:#D8782F;opacity:.5}
.leaf.l1{left:6%;top:-40px}
.leaf.l2{left:46%;top:-60px;width:26px;opacity:.35}
.season.alive .leaf.l1{animation:leafFall 16s linear -4s infinite}
.season.alive .leaf.l2{animation:leafFall 21s linear -12s infinite}
@keyframes leafFall{0%{transform:translate3d(0,0,0) rotate(0)}25%{transform:translate3d(40px,25vh,0) rotate(80deg)}50%{transform:translate3d(-20px,50vh,0) rotate(170deg)}75%{transform:translate3d(30px,75vh,0) rotate(250deg)}100%{transform:translate3d(0,110vh,0) rotate(340deg)}}
@media (max-width:860px){.season{padding:110px 0}.season-grid{grid-template-columns:1fr;gap:40px}}

/* ---------- pour: the one interactive moment ---------- */
.pour{padding:140px 0;background:var(--panel)}
.pour-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.pour-cup{position:relative;max-width:460px;margin-inline:auto;width:100%;aspect-ratio:1;border-radius:28px;overflow:hidden;box-shadow:0 30px 60px -12px rgba(0,0,0,.6),0 0 0 1px rgba(243,231,214,.12)}
.pour-cup img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc-base{filter:grayscale(1) brightness(.42) contrast(1.05)}
/* the real colour pours in from the bottom as the visitor holds */
.pc-fill{position:absolute;inset:0;overflow:hidden;transform:translate3d(0,calc((1 - var(--fill,0)) * 100%),0)}
.pc-fill img{transform:translate3d(0,calc((var(--fill,0) - 1) * 100%),0)}
.pc-fill::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;background:linear-gradient(90deg,transparent,rgba(255,226,180,.95),transparent);box-shadow:0 0 18px 4px rgba(255,200,130,.55);opacity:calc(1 - var(--done,0))}
.pc-steam{position:absolute;left:28%;top:2%;width:40%;height:34%;opacity:calc(var(--done,0) * .9);pointer-events:none}
.pc-steam i{position:absolute;bottom:0;width:12px;height:100%;border-radius:12px;background:linear-gradient(to top,rgba(255,250,240,.45),rgba(255,250,240,0));filter:blur(7px);animation:steamUp 5.5s var(--ease-io) infinite}
.pc-steam i:nth-child(1){left:18%;animation-delay:-1.2s}
.pc-steam i:nth-child(2){left:48%;animation-delay:-3.1s}
.pc-steam i:nth-child(3){left:76%;animation-delay:-4.4s}
.pc-tag{position:absolute;left:16px;bottom:14px;z-index:3;padding:6px 10px;border-radius:999px;background:rgba(14,5,6,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text-secondary);font-size:.62rem;opacity:var(--done,0);transition:opacity .6s var(--ease-out)}
.liquid,.foam{transform-box:view-box;transform:translate3d(0,calc((1 - var(--fill,0))*130px),0)}
.heart{transform-box:fill-box;transform-origin:50% 50%;opacity:var(--done,0);transform:scale(calc(.4 + .6*var(--done,0)))}
.pour-steam{opacity:calc(var(--done,0)*.6)}
.pour-copy .mono{color:var(--text-secondary);margin-bottom:14px}
.pour h2{font-size:clamp(2.2rem,4.4vw,3.8rem);margin-bottom:18px}
.hold{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 34px;border:1.5px solid var(--accent);border-radius:999px;background:transparent;color:var(--text-primary);font:600 1rem var(--f-body);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none}
.hold-fill{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--fill,0))}
.hold-label{position:relative;mix-blend-mode:difference;color:#F3E7D6}
.hold.complete{border-color:var(--accent);background:var(--accent);color:var(--brand)}
.hold.complete .hold-label{mix-blend-mode:normal;color:var(--brand)}
.tip{margin-top:30px;padding:24px 26px;border-left:3px solid var(--accent);background:rgba(243,231,214,.05);border-radius:0 14px 14px 0;opacity:0;transform:translate3d(0,14px,0);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);visibility:hidden}
.tip.show{opacity:1;transform:none;visibility:visible}
.tip-k{color:var(--text-secondary);margin-bottom:8px}
.tip-t{font-family:var(--f-display);font-weight:700;font-size:1.3rem;line-height:1.35;margin-bottom:14px;opacity:0;transition:opacity .7s var(--ease-out) .15s}
.tip-a{color:var(--text-secondary);text-underline-offset:4px;opacity:0;transition:opacity .7s var(--ease-out) .3s,color .3s}
.tip-a:hover{color:var(--text-primary)}
.tip.show .tip-t,.tip.show .tip-a{opacity:1}
@media (max-width:860px){.pour{padding:100px 0}.pour-grid{grid-template-columns:1fr;gap:28px}.pour-cup{max-width:280px}}

/* ---------- reviews: rating block + guest cards ---------- */
.reviews{padding:140px 0 130px;overflow:hidden}
.rev-head{display:grid;grid-template-columns:minmax(260px,.75fr) 1.25fr;gap:64px;align-items:center;margin-bottom:56px}
.rev-score{position:relative;padding:40px 36px 34px;border-radius:200px 200px 24px 24px;background:var(--brand);text-align:center;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.rev-score .ribbon{margin-bottom:14px}
.score-num{font-family:var(--f-display);font-weight:900;font-size:clamp(5rem,9vw,7.5rem);line-height:1;letter-spacing:-.03em}
.stars{position:relative;display:inline-block;font-size:1.9rem;letter-spacing:.12em;line-height:1;margin:10px 0 16px;color:rgba(243,231,214,.25)}
.stars .on{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;width:calc(var(--rate,1)*100%);color:#F4B740}
.score-count{font-size:1.05rem}
.score-count b{font-family:var(--f-display);font-weight:800}
.score-note{margin-top:10px;color:var(--text-secondary);font-size:.7rem}
.rev-copy .mono{color:var(--text-secondary);margin-bottom:14px}
.rev-copy h2{font-size:clamp(2.2rem,4.4vw,3.8rem);max-width:15ch;margin-bottom:28px}
.trust{display:inline-flex;align-items:center;gap:12px;padding:6px 18px 6px 6px;border-radius:999px;background:var(--accent);color:var(--brand);font-weight:500;font-size:.95rem}
.trust-faces{display:flex}
.trust-faces img,.trust-faces .ini{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--accent);object-fit:cover}
.trust-faces>*+*{margin-left:-10px}
.trust-faces .ini{display:grid;place-items:center;background:#E5373B;color:#fff;font:700 .7rem var(--f-body)}

.rev-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:6px var(--gutter) 24px;margin-inline:calc(50% - 50vw);scrollbar-width:none;-webkit-mask:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);mask:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent)}
.rev-track::-webkit-scrollbar{display:none}
.rev-track:focus-visible{outline-offset:-4px}
.rcard{flex:0 0 min(320px,82vw);scroll-snap-align:start;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .6s var(--ease-out),border-color .5s var(--ease-out)}
.rcard:hover{transform:translateY(-6px);border-color:var(--line-strong)}
.reveal.done .rcard.r{transition:transform .6s var(--ease-out),border-color .5s var(--ease-out),opacity .9s var(--ease-out);transition-delay:0s}
.rc-top{position:relative;height:150px;overflow:hidden;border-radius:18px}
.rc-bg{position:absolute;inset:-30px;background:center/cover no-repeat;filter:blur(22px) saturate(1.15) brightness(.8);transform:scale(1.05);transition:transform .9s var(--ease-out)}
.rcard:hover .rc-bg{transform:scale(1.18)}
.ini-top .rc-bg{background:radial-gradient(circle at 30% 30%,#E5373B,#7A0305 70%)}
.rc-top::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--panel) 6%,rgba(39,17,15,0) 85%)}
.rc-ava{position:absolute;left:20px;bottom:14px;z-index:2;width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--accent);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.rc-ava.ini{display:grid;place-items:center;background:#E5373B;color:#fff;font:700 1.35rem var(--f-body)}
.rc-stars{position:absolute;right:16px;top:14px;z-index:2;padding:4px 10px;border-radius:999px;background:rgba(14,5,6,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#F4B740;font-size:.8rem;letter-spacing:.1em}
.rc-body{display:flex;flex-direction:column;flex:1;padding:6px 22px 22px}
.rc-q{font-weight:500;line-height:1.55;padding-bottom:20px;border-bottom:1px solid var(--line);flex:1}
.rc-name{margin-top:16px;font-family:var(--f-display);font-weight:800;font-size:1.1rem}
.rc-src{font-size:.85rem;font-weight:500;background:linear-gradient(90deg,#F4B740,#E08A45 50%,#F3E7D6);-webkit-background-clip:text;background-clip:text;color:transparent}
.rev-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;margin-top:22px}
.rev-nav{display:flex;gap:10px}
.rev-btn{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;border:1.5px solid var(--line-strong);background:transparent;color:var(--text-primary);cursor:pointer;transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out),opacity .3s}
.rev-btn svg{width:22px;height:22px}
.rev-btn:hover:not(:disabled){border-color:var(--accent);background:var(--accent-muted)}
.rev-btn:disabled{opacity:.3;cursor:default}
@media (max-width:860px){.rev-track{align-items:flex-start}.rc-q{flex:none}.reviews{padding:100px 0 90px}.rev-head{grid-template-columns:1fr;gap:36px}.rev-score{max-width:360px;margin-inline:auto;width:100%}.rev-nav{display:none}.trust{font-size:.86rem}}

/* ---------- visit: the CTA inside a rope badge ---------- */
.visit{position:relative;background:var(--brand);padding:120px 0;overflow:hidden}
.visit>.rope{position:absolute;top:18px;left:0;right:0}
.visit-in{position:relative;display:grid;place-items:center;min-height:min(92vw,900px);width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto}
.badge-ring{position:absolute;left:50%;top:50%;width:min(92vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);color:var(--accent)}
.badge-ring svg{width:100%;height:100%}
.badge-ring ellipse{opacity:clamp(0,calc(var(--draw,1)*96 - var(--n,0)),1)}
.visit-copy{position:relative;text-align:center;max-width:560px;padding:0 12px}
.visit h2{font-size:clamp(2.2rem,5vw,4.4rem);margin:24px 0 18px}
.visit .lede{margin-inline:auto;color:var(--text-primary);opacity:.86}
.visit .cta-row{justify-content:center}
.visit .btn-ghost{border-color:rgba(243,231,214,.55)}
.visit .note{margin-top:14px;color:var(--text-secondary)}
/* WhatsApp business card */
.wa-card{display:flex;flex-direction:column;align-items:center;gap:16px;margin:26px auto 0;padding:18px 20px;max-width:460px;border-radius:22px;background:rgba(40,2,4,.42);border:1px solid rgba(243,231,214,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.wa-id{display:flex;align-items:center;gap:14px;text-align:left}
.wa-id img{width:52px;height:52px;border-radius:50%;box-shadow:0 0 0 2px rgba(243,231,214,.5)}
.wa-num{display:block;font-family:var(--f-body);font-weight:500;font-size:1.5rem;line-height:1.15;letter-spacing:.01em;text-decoration:none;color:var(--text-primary)}
.wa-num:hover{text-decoration:underline;text-underline-offset:4px}
.wa-tag{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:.92rem;color:var(--text-secondary)}
.wa-tag svg{width:16px;height:16px}
.wa-actions{display:flex;flex-wrap:nowrap;justify-content:center;gap:10px;width:100%}
.wa-btn,.wa-call{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 20px;border-radius:999px;font-weight:600;font-size:.98rem;text-decoration:none;transition:transform .35s var(--ease-out),background-color .35s var(--ease-out),border-color .35s var(--ease-out)}
.wa-btn{flex:1 1 auto;white-space:nowrap;background:#25D366;color:#0B3D20}
.wa-btn svg{width:22px;height:22px}
.wa-btn:hover{background:#2EE673;transform:translateY(-2px)}
.wa-call{border:1.5px solid rgba(243,231,214,.45);color:var(--text-primary)}
.wa-call svg{width:18px;height:18px}
.wa-call:hover{border-color:var(--accent);background:var(--accent-muted)}
.wa-call{flex:none;white-space:nowrap}
@media (max-width:420px){.wa-num{font-size:1.3rem}.wa-actions{flex-wrap:wrap}.wa-btn,.wa-call{flex:1 1 100%}}
@media (max-width:640px){.visit{padding:80px 0}.visit-in{min-height:0;padding:60px 0}.badge-ring{width:150vw;opacity:.5}}

/* ---------- addresses ---------- */
.addresses{padding:96px 0 120px}
.addr-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:34px}
.addr-head .mono{color:var(--text-secondary);margin-bottom:14px}
.addresses h2{font-size:clamp(2.2rem,4.4vw,3.8rem);max-width:14ch}
.addr-stats{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.addr-stats li{display:flex;flex-direction:column}
.addr-stats b{font-family:var(--f-display);font-weight:900;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1}
.addr-stats li:first-child b{color:#F4B740}
.addr-stats span{color:var(--text-secondary);font-size:.88rem;max-width:12ch;line-height:1.35;margin-top:6px}
.addr-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.fchip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line-strong);background:transparent;color:var(--text-secondary);font:500 .93rem var(--f-body);cursor:pointer;transition:color .3s var(--ease-out),border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
.fchip span{font-family:var(--f-mono);font-size:.75rem;opacity:.7}
.fchip:hover{color:var(--text-primary);border-color:var(--accent)}
.fchip.active{background:var(--accent);border-color:var(--accent);color:var(--brand)}
.addr-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.acard{display:flex;flex-direction:column;padding:22px 22px 18px;border-radius:18px;background:var(--panel);border:1px solid var(--line);transition:transform .5s var(--ease-out),border-color .4s var(--ease-out),opacity .35s var(--ease-out)}
.acard:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.reveal.done .acard.r{transition:transform .5s var(--ease-out),border-color .4s var(--ease-out),opacity .35s var(--ease-out);transition-delay:0s}
.acard.out{opacity:0;transform:scale(.96)}
.acard.gone{display:none}
.acard.is-soon{border-style:dashed;background:rgba(39,17,15,.55)}
.ac-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:16px}
.ac-n{color:var(--text-secondary)}
.st{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:500}
.st::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.st.on{color:#7FCB6A}
.st.soon{color:#E8A24E}
.addresses.alive .st.on::before{animation:stPulse 3.2s var(--ease-io) -1s infinite}
@keyframes stPulse{0%,100%{opacity:1}50%{opacity:.35}}
.ac-name{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}
.ac-addr{font-size:1.28rem;line-height:1.25;margin:6px 0 4px}
.ac-city{color:var(--text-secondary);font-size:.9rem}
.ac-foot{margin-top:auto;padding-top:18px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--line)}
.ac-city{margin-bottom:18px}
.ac-rate{display:flex;align-items:baseline;gap:6px;font-size:.88rem;color:var(--text-secondary)}
.ac-rate b{font-family:var(--f-display);font-weight:800;font-size:1.05rem;color:var(--text-primary)}
.ac-star{color:#F4B740}
.ac-rate.new-spot{color:#E8A24E}
.ac-go{display:inline-flex;align-items:center;gap:6px;min-height:36px;color:var(--text-primary);font-weight:500;font-size:.92rem;text-decoration:none;border-bottom:1.5px solid rgba(243,231,214,.3);transition:border-color .3s}
.ac-go:hover{border-color:var(--accent)}
.ac-go span{transition:transform .4s var(--ease-out)}
.ac-go:hover span{transform:translateX(4px)}
.addr-note{margin-top:26px;color:var(--text-secondary);font-size:.9rem}
@media (max-width:1000px){.addr-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.addresses{padding:100px 0 80px}.addr-grid{grid-template-columns:1fr}.addr-stats{gap:22px}.fchip{min-height:44px;padding:0 14px}}

/* ---------- delivery ---------- */
.delivery{position:relative;padding:110px 0;background:var(--panel)}
.delivery>.rope{position:absolute;top:-7px;left:0;right:0}
.del-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.del-copy .mono{display:flex;align-items:center;gap:10px;color:var(--text-secondary);margin-bottom:14px}
.del-ico{width:22px;height:22px;color:var(--accent)}
.delivery h2{font-size:clamp(2rem,4vw,3.4rem);max-width:13ch;margin-bottom:16px}
.delivery .lede{margin-bottom:0}
.del-cards{display:grid;gap:12px}
.dcard{display:flex;align-items:center;gap:18px;padding:16px 22px 16px 16px;border-radius:20px;background:rgba(243,231,214,.04);border:1px solid var(--line);text-decoration:none;transition:transform .5s var(--ease-out),border-color .4s var(--ease-out),background-color .4s var(--ease-out)}
.dcard:hover{transform:translateX(6px);border-color:var(--line-strong);background:rgba(243,231,214,.07)}
.reveal.done .dcard.r{transition:transform .5s var(--ease-out),border-color .4s var(--ease-out),background-color .4s var(--ease-out),opacity .9s var(--ease-out);transition-delay:0s}
.dtile{width:56px;height:56px;flex:none;border-radius:16px;box-shadow:0 8px 20px rgba(0,0,0,.35);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.dcard:hover .dtile{transform:scale(1.08) rotate(-4deg)}
.dbody{display:flex;flex-direction:column;flex:1;min-width:0}
.dbody b{font-family:var(--f-display);font-weight:800;font-size:1.3rem;line-height:1.2}
.dbody span{color:var(--text-secondary);font-size:.92rem}
.darr{font-size:1.4rem;color:var(--text-secondary);transition:transform .4s var(--ease-out),color .3s}
.dcard:hover .darr{transform:translateX(4px);color:var(--text-primary)}
@media (max-width:860px){.delivery{padding:90px 0}.del-grid{grid-template-columns:1fr;gap:30px}}

/* ---------- faq ---------- */
.faq{padding:140px 0 150px}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.faq-head{position:sticky;top:120px}
.faq-head .mono{color:var(--text-secondary);margin-bottom:14px}
.faq h2{font-size:clamp(2.2rem,4vw,3.6rem);margin-bottom:18px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:first-child{border-top:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:24px 0;font-family:var(--f-display);font-weight:700;font-size:1.25rem;line-height:1.3}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-family:var(--f-mono);font-size:1.4rem;color:var(--text-secondary);transition:transform .4s var(--ease-out)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{padding:0 0 24px;color:var(--text-secondary);max-width:56ch;animation:faqIn .5s var(--ease-out)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:860px){.faq{padding:100px 0}.faq-grid{grid-template-columns:1fr;gap:28px}.faq-head{position:static}}

@media (prefers-reduced-motion:reduce){
  .tip{opacity:1;transform:none}
}