/* Mori Matcha: a little matcha, a lot of happiness */
:root{
  --canvas:#FFF7E9;--panel:#FFFBF4;--ink:#344A30;--ink-2:#5B6B52;
  --accent:#56742F;--accent-hover:#4A6527;--accent-muted:#879D6C;
  --mint:#DCEFD9;--blush:#FAD4DB;--butter:#FFE6A7;--beige:#DCC9B3;
  --line:#E8DCC6;--line-strong:#8E8068;
  --rose:#ECB0AC;--hero-cream:#FBE8CF;
  --ease:cubic-bezier(.22,.8,.24,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --f-display:'Nunito',system-ui,sans-serif;--f-label:'Quicksand','Nunito',sans-serif;
  --f-ar:'Tajawal','Nunito',sans-serif;--f-kr:'Jua','Nunito',sans-serif;
  --glow:0 1px 1px rgba(255,248,238,.9),0 2px 18px rgba(255,248,238,.85);
  --gutter:clamp(16px,4.5vw,64px);
  --sh:min(calc(100vw / .796),56svh);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--ink);font:400 17px/1.6 var(--f-display);-webkit-font-smoothing:antialiased;animation:pageIn .9s var(--ease) both}
@keyframes pageIn{from{opacity:0}}
[lang=ar] body,[lang=ar] button,[lang=ar] input,[lang=ar] select{font-family:var(--f-ar)}
img,svg,video,canvas{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--accent);color:#FFF7E9;padding:10px 16px;border-radius:99px;text-decoration:none;font-weight:800;transition:top .3s var(--ease)}
.skip:focus{top:12px}
main:focus{outline:none}
.label{font:600 12px/1.3 var(--f-label);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2)}
[lang=ar] .label{font-family:var(--f-ar);letter-spacing:0;font-size:14px;font-weight:700}
.kr{font-family:var(--f-kr)!important;letter-spacing:0!important}

/* the one environment behind everything: slow pastel light and fine grain */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--canvas)}
.env i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.env .g1{width:55vmax;height:55vmax;left:-15vmax;top:10vh;background:var(--mint);animation:envA 80s ease-in-out -20s infinite alternate}
.env .g2{width:45vmax;height:45vmax;right:-12vmax;top:40vh;background:var(--blush);animation:envB 95s ease-in-out -35s infinite alternate}
.env .g3{width:35vmax;height:35vmax;left:30vw;bottom:-14vmax;background:var(--butter);animation:envA 110s ease-in-out -50s infinite alternate}
.env::after{content:"";position:absolute;inset:0;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .22 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes envA{to{transform:translate(10vw,-8vh) scale(1.12)}}
@keyframes envB{to{transform:translate(-8vw,10vh) scale(.92)}}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:flex-start;gap:16px;padding:18px var(--gutter);transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease)}
.nav.solid{background:rgba(255,247,233,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding-top:12px;padding-bottom:12px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.logo b{display:block;font:900 22px/1 var(--f-display);letter-spacing:.03em}
.logo small{display:block;font:600 8.5px/1 var(--f-label);letter-spacing:.46em;margin-top:4px}
/* links sit right, so the pour from the top center never crosses them */
.links{display:flex;gap:28px;margin-inline-start:auto;margin-inline-end:14px}
.navR{margin-inline-start:auto}
.links+.navR{margin-inline-start:0}
.links a{text-decoration:none;font-weight:700;font-size:15px;position:relative;padding:6px 0}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--accent-muted);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.links a:hover::after{transform:scaleX(1)}
.navR{display:flex;align-items:center;gap:10px}
.langBtn{border:1.5px solid rgba(52,74,48,.35);background:rgba(255,251,244,.6);border-radius:99px;padding:8px 14px;font-weight:700;font-size:14px;cursor:pointer;transition:background .3s var(--ease),border-color .3s var(--ease)}
.langBtn:hover{background:#fff;border-color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:99px;background:var(--accent);color:#FFF7E9;font-weight:800;font-size:16px;line-height:1;padding:15px 26px;text-decoration:none;cursor:pointer;box-shadow:0 14px 30px -14px rgba(86,116,47,.85);transition:transform .35s var(--spring),background .3s var(--ease),box-shadow .35s var(--ease);text-shadow:none}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 20px 36px -16px rgba(86,116,47,.9)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.sm{padding:11px 18px;font-size:14px}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong);box-shadow:none}
.btn.ghost:hover{background:var(--panel)}
.btn .count[hidden]{display:none}
.btn .count{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:99px;background:#FFF7E9;color:var(--accent);font-size:12px;padding:0 6px}
@media (pointer:coarse){.btn,.langBtn,.pill,.seg label,.qty button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ========== hero ========== */
.hero{position:relative;height:520vh}
.hero .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage{position:absolute;inset:0;background:linear-gradient(180deg,#EDB2AD 0%,#F1BFB3 38%,#F8DCC3 70%,#FBE8CF 86%,var(--canvas) 100%)}
.scene{position:absolute;inset:0}
.scene .poster,.scene video,.scene canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.scene video{opacity:0;transition:opacity .6s var(--ease);will-change:transform;transform:translateZ(0)}
.scene .pour.ready{opacity:1}
.scene .turn{transition:opacity .45s var(--ease)}
.scene .turn.on{opacity:1}
.scene canvas{display:none}
.hero[data-mode=frames] .scene canvas{display:block}
.hero[data-mode=frames] .scene video.pour{display:none}
/* as the hero lets go, its floor melts into the page so the pour flows straight into the next section */
.hero .fadeOut{position:absolute;left:0;right:0;bottom:0;height:24vh;background:linear-gradient(180deg,rgba(255,247,233,0),rgba(255,247,233,.75) 55%,var(--canvas));pointer-events:none;z-index:3;opacity:var(--fo,0)}
.ring{position:absolute;right:var(--gutter);bottom:28px;z-index:6;width:44px;height:44px;color:var(--accent);transition:opacity .6s var(--ease)}
.ring.done{opacity:0}
.cue{display:inline-flex;align-items:center;gap:12px;font:600 12px/1 var(--f-label);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2)}
[lang=ar] .cue{font-family:var(--f-ar);letter-spacing:0;font-size:14px;font-weight:700}
.drop{width:11px;height:15px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--accent);animation:drip 2.4s var(--ease) -1s infinite}
@keyframes drip{0%{transform:translateY(-8px);opacity:0}30%{opacity:1}80%{transform:translateY(12px);opacity:0}100%{opacity:0}}
.sticker{display:inline-block;font:400 clamp(15px,1.4vw,20px)/1 var(--f-kr);color:var(--accent);background:#fff;border:2px solid var(--accent-muted);border-radius:99px;padding:.5em 1em;transform:rotate(-4deg);box-shadow:0 10px 24px -14px rgba(52,74,48,.5)}

.band{position:absolute;z-index:5;opacity:0;pointer-events:none;color:var(--ink)}
.band.live{pointer-events:auto}
.band::before{content:"";position:absolute;inset:-45% -24%;z-index:-1;pointer-events:none;opacity:calc(.3 + .7*var(--k,1));background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(255,244,234,.42) 0%,rgba(255,244,234,.2) 52%,rgba(255,244,234,0) 78%)}
.band.b1R::before{display:none}
.band .tx{text-shadow:var(--glow)}
.kick{font:600 12px/1.3 var(--f-label);letter-spacing:.32em;text-transform:uppercase;color:var(--ink-2)}
[lang=ar] .kick{font-family:var(--f-ar);letter-spacing:0;font-size:15px;font-weight:700}
.big{font:900 clamp(40px,4.2vw,72px)/1.02 var(--f-display);letter-spacing:-.012em;margin:0}
.mid{font:700 clamp(17px,1.35vw,22px)/1.45 var(--f-display);color:#46573F;margin:0}
.huge{font:900 clamp(48px,5.4vw,104px)/.98 var(--f-display);letter-spacing:-.016em;margin:0}
[lang=ar] .big,[lang=ar] .huge{font-family:var(--f-ar);font-weight:800;line-height:1.22;letter-spacing:0}
[lang=ar] .mid{font-family:var(--f-ar)}
.w,.c{display:inline-block}
.rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*.55em))}
.drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-.9em))}
.blur{display:grid}
.blur>*{grid-area:1/1}
.blur .soft{filter:blur(9px);opacity:calc(1 - var(--k,0))}
.blur .sharp{opacity:var(--k,0)}
.jelly .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - .14)*2.4,1);opacity:var(--kc);transform-origin:50% 100%;
  transform:translateY(calc((1 - var(--kc))*.9em)) scale(calc(.65 + .53*var(--kc) - .18*var(--ks)),calc(1.4 - .54*var(--kc) + .14*var(--ks)))}
.ci{display:inline-block}
.settled .ci{animation:bob 4.8s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.17s)}
@keyframes bob{50%{transform:translateY(-.045em) rotate(-1.6deg)}}
.hi{position:relative;display:inline-block}
.hi svg{position:absolute;left:-4%;width:108%;bottom:.02em;height:.42em;z-index:-1;overflow:visible}
.hi path{transform-origin:0 50%;transform:scaleX(var(--ks2,0))}
[dir=rtl] .hi path{transform-origin:100% 50%}
.fade2{opacity:var(--k2,0);transform:translateY(calc((1 - var(--k2,0))*14px))}
.fade3{opacity:var(--k3,0);transform:translateY(calc((1 - var(--k3,0))*14px))}
.pop{display:inline-block;opacity:var(--k2,0);transform:scale(calc(.4 + .6*var(--k2,0)))}
.spk{position:absolute;z-index:5;font-size:clamp(18px,1.8vw,28px);color:#E9C45A;opacity:0;pointer-events:none}
.spk.h{color:#EF9FB0}
.spk i{display:inline-block;font-style:normal}
.settled .spk i{animation:tw 3.4s ease-in-out infinite}
@keyframes tw{50%{transform:translateY(-10px) scale(1.25);opacity:.55}}

/* desktop: words flank the glass, the center lane stays clear */
.b1L,.bL,.b4L{left:var(--gutter);top:50%;transform:translateY(-50%);width:min(34vw,560px)}
.b1R,.bR,.b4R{right:var(--gutter);top:50%;transform:translateY(-50%);width:min(32vw,520px);text-align:right}
.b1L{top:46%}.b1R{top:56%}
.b4L,.b4R{top:44%}
.b4S{margin:0 0 18px}
.b4L .mid,.b4R .mid{margin-top:16px}
.b4R .btn{margin-top:20px}
.s1{left:34%;top:26%}.s2{left:62%;top:33%}.s3{left:59%;top:19%}.s4{left:38%;top:52%}
[dir=rtl] .b1L,[dir=rtl] .bL,[dir=rtl] .b4L{left:auto;right:var(--gutter);text-align:right}
[dir=rtl] .b1R,[dir=rtl] .bR,[dir=rtl] .b4R{right:auto;left:var(--gutter);text-align:left}

/* phones and portrait tablets: the pour gets its own window, words sit above and below it */
@media (max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse){
  .hero{height:520vh}
  .stage{background:linear-gradient(180deg,#F0BBB1 0%,#EDB2AD calc(60px + (100svh - 60px - var(--sh))/2 + 2px),#F4CDBA calc(60px + (100svh - 60px - var(--sh))/2 + var(--sh)*.55),#FBE8CF calc(100svh - (100svh - 60px - var(--sh))/2),var(--canvas) 100%)}
  .scene{inset:auto;left:50%;top:calc(60px + (100svh - 60px - var(--sh))/2);height:var(--sh);aspect-ratio:.796;transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 88%,transparent 100%),linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 88%,transparent 100%),linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-composite:intersect}
  .b1L,.bL,.b4L,.b1R,.bR,.b4R{left:var(--gutter);right:var(--gutter);width:auto;transform:none;text-align:center}
  [dir=rtl] .b1L,[dir=rtl] .bL,[dir=rtl] .b4L,[dir=rtl] .b1R,[dir=rtl] .bR,[dir=rtl] .b4R{left:var(--gutter);right:var(--gutter);text-align:center}
  /* during the pour the top words stay clear of the stream; the final headline may use the air above the glass */
  .b1L,.bL,.b4L{top:auto;bottom:calc(100svh - 60px - (100svh - 60px - var(--sh))/2 + var(--sh)*.02)}
  .b4L{bottom:calc(100svh - 60px - (100svh - 60px - var(--sh))/2 - var(--sh)*.14)}
  .b1R,.bR,.b4R{top:calc(100svh - (100svh - 60px - var(--sh))/2 - var(--sh)*.05)}
  .b1L .sticker{display:none}
  .b4L .mid,.b4R .mid{display:none}
  .b1R .cue{justify-content:center}
  .big{font-size:clamp(28px,4.6svh,40px)}
  .mid{font-size:clamp(15px,2svh,17px)}
  .huge{font-size:clamp(32px,5.2svh,46px)}
  [lang=ar] .huge{font-size:clamp(30px,4.8svh,40px);line-height:1.16}
  .b4R .btn{margin-top:12px;padding:13px 22px;font-size:15px}
  .s1{left:8%;top:52%}.s2{left:86%;top:47%}.s3{left:84%;top:62%}.s4{left:9%;top:66%}
  .ring{bottom:18px}
  .links{display:none}
}
/* reduced motion and landscape phones: one composed still */
@media (prefers-reduced-motion:reduce),(orientation:landscape) and (pointer:coarse) and (max-height:560px){
  .hero{height:auto}
  .hero .pin{position:relative;height:auto;min-height:100vh;min-height:100svh}
  .scene .poster{background-image:url(img/hero-ending.jpg)}
  .band{opacity:1!important;--k:1;--k2:1;--k3:1;--ks2:1}
  .b1L,.b1R,.bL,.bR{display:none}
  .spk{opacity:1!important}
  .ring{display:none}
}

/* ========== sections ========== */
.sec{position:relative;padding:clamp(80px,12vw,160px) var(--gutter)}
.wrap{max-width:1200px;margin:0 auto}
.h2{font:900 clamp(34px,4.6vw,64px)/1.05 var(--f-display);letter-spacing:-.012em;margin:.25em 0 .35em}
[lang=ar] .h2{font-family:var(--f-ar);font-weight:800;line-height:1.25;letter-spacing:0}
.lede{max-width:52ch;color:var(--ink-2);font-size:clamp(17px,1.3vw,19px);margin:0}
.reveal .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in .rv{opacity:1;transform:none}
.reveal.in .rv:nth-child(2){transition-delay:.08s}
.reveal.in .rv:nth-child(3){transition-delay:.16s}
.reveal.in .rv:nth-child(4){transition-delay:.24s}

/* the green ribbon: pours down the page and pools into each section */
.ribbon{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:0;overflow:visible}
.ribbon path{fill:none;stroke:var(--accent-muted);stroke-width:5;stroke-linecap:round;opacity:.55}
.ribbon circle{fill:var(--accent-muted);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2);transition:opacity .8s var(--ease),transform .9s var(--spring)}
.ribbon circle.on{opacity:.5;transform:scale(1)}
main,.after{position:relative}
/* the page's soft glows fade in below the hero instead of meeting it at a line */
.after::before{content:"";position:absolute;left:0;right:0;top:0;height:36vh;background:linear-gradient(180deg,var(--canvas),rgba(255,247,233,0));pointer-events:none}

/* the orbit: the turning glass, with sift, whisk, pour poured around it */
.orbit{position:relative;height:330vh}
.opin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.ostage{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 58%}
/* one 3D scene: the glass is a plane at depth 0, the ribbons wrap around it and pass behind it */
.s3d{position:absolute;inset:0;z-index:2;transform-style:preserve-3d;pointer-events:none}
.rring,.kring{position:absolute;left:50%;top:0;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.seg,.ch{position:absolute;left:0;top:0}
.seg{transform-style:preserve-3d}
.seg b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.seg .out{background-color:#7FA83E;background-repeat:repeat-x;transition:background-image .6s var(--ease)}
.seg .in{transform:rotateY(180deg);background:linear-gradient(180deg,#3E6420,#557F2C 50%,#3E6420)}
.ch{font:900 var(--rs,22px)/1 var(--f-display);letter-spacing:0;color:#FFF7E9;white-space:nowrap;backface-visibility:hidden;-webkit-backface-visibility:hidden;text-shadow:0 1px 0 rgba(52,74,48,.35);transition:color .5s var(--ease)}
[lang=ar] .rring .ch{font-family:var(--f-ar);font-weight:800}
.ch.sep{color:#FFE6A7}
.ch.on{color:#FFE6A7;text-shadow:0 0 14px rgba(255,230,167,.7)}
.kring .ch{font:400 var(--ks,18px)/1 var(--f-kr);color:var(--accent);text-shadow:var(--glow)}
.otop{position:absolute;inset-inline-start:var(--gutter);top:clamp(96px,15vh,150px);z-index:4;max-width:min(30vw,420px)}
.olede{margin:10px 0 0;max-width:24ch;color:var(--ink-2);font-size:clamp(16px,1.2vw,19px);opacity:calc(1 - var(--st,0));transition:opacity .6s var(--ease)}
.oglow{position:absolute;left:50%;top:54%;width:min(120vh,1100px);height:min(96vh,900px);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(239,184,176,.62),rgba(246,206,196,.34) 55%,rgba(255,247,233,0));z-index:1;pointer-events:none}
.ocup{position:absolute;left:50%;top:55%;height:min(66vh,740px);aspect-ratio:860/1080;transform:translate(-50%,-50%);z-index:2;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 56%,rgba(0,0,0,.6) 74%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 56%,rgba(0,0,0,.6) 74%,transparent 100%)}
.ocup .oposter,.ocup video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:center/cover no-repeat}
.ocup video{opacity:0;transition:opacity .8s var(--ease)}
.ocup video.on{opacity:1}
.steps{position:absolute;left:0;right:0;bottom:clamp(26px,6.5vh,70px);z-index:5;display:grid;place-items:center;padding:0 var(--gutter);pointer-events:none}
.step{grid-area:1/1;max-width:46ch;text-align:center;opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.step.on{opacity:1;transform:none}
.step .sn{display:block;font:600 12px/1 var(--f-label);letter-spacing:.24em;color:var(--ink-2)}
.step b{display:block;font:900 clamp(24px,2vw,32px)/1.1 var(--f-display);margin:6px 0 6px;color:var(--accent)}
[lang=ar] .step b{font-family:var(--f-ar);font-weight:800}
.step span:last-child{color:var(--ink-2);font-size:clamp(15px,1.15vw,18px)}
@media (max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse){
  .orbit{height:300vh}
  .ocup{top:52%;height:min(50svh,118vw)}
  .oglow{top:52%;width:150vw;height:70svh}
  .otop{top:76px;inset-inline-start:0;left:0;right:0;max-width:none;text-align:center;padding:0 var(--gutter)}
  .olede{margin:8px auto 0}
  .steps{bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  .orbit{height:auto}
  .opin{position:relative;height:auto}
  .ostage{position:relative;height:100vh;height:100svh}
  .steps{position:relative;bottom:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;padding:0 var(--gutter) 60px;max-width:1100px;margin:0 auto}
  .step{grid-area:auto;opacity:1;transform:none}
}

/* menu */
.menu .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 30px}
.pill{border:1.5px solid var(--line-strong);background:transparent;border-radius:99px;padding:10px 18px;font-weight:800;font-size:15px;cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.pill[aria-pressed=true]{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.pill:hover{border-color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(14px,1.6vw,22px)}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:28px;padding:14px 14px 18px;display:flex;flex-direction:column;opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease),box-shadow .5s var(--ease)}
.card.in{opacity:1;transform:none}
.card:hover{box-shadow:0 26px 50px -32px rgba(52,74,48,.5)}
.card .ph{position:relative;aspect-ratio:4/4.3;border-radius:20px;display:grid;place-items:center;overflow:hidden;perspective:800px}
.card .ph .tilt{height:88%;display:grid;place-items:center;transition:transform .6s var(--ease)}
.card .ph img,.card .ph svg{height:100%;width:auto;filter:drop-shadow(0 16px 14px rgba(110,60,60,.18))}
.card .ph::after{content:"";position:absolute;left:28%;right:28%;bottom:5%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(120,70,70,.24),rgba(120,70,70,0))}
.card:hover .ph .tilt{transform:translateY(-6px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg))}
.t-mint{background:linear-gradient(180deg,#EEF7EA,#DFF0DA)}
.t-blush{background:linear-gradient(180deg,#FFF0F1,#FBDDE2)}
.t-butter{background:linear-gradient(180deg,#FFF6DF,#FFEBC0)}
.t-beige{background:linear-gradient(180deg,#FBF3E8,#F0E3D0)}
.card h3{font:800 19px/1.25 var(--f-display);margin:14px 4px 4px;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
[lang=ar] .card h3{font-family:var(--f-ar)}
.card h3 span{color:var(--accent);white-space:nowrap}
.card p{margin:0 4px;color:var(--ink-2);font-size:15px;line-height:1.5;flex:1}
.card .alt{margin:2px 4px 0;font-size:14px;color:var(--ink-2);opacity:.85}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 4px 14px}
.tag{font:600 11px/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;border-radius:99px;padding:6px 9px;background:var(--canvas);border:1px solid var(--line)}
[lang=ar] .tag{font-family:var(--f-ar);letter-spacing:0;font-size:12px;font-weight:700}
.tag.new{background:var(--butter);border-color:#F1D788}
.tag.sig{background:var(--blush);border-color:#F2B9C4}
.card .add{align-self:flex-start;margin:0 4px}

/* build your cup */
.build .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.cupStage{position:relative;aspect-ratio:1/1.1;border-radius:44px;background:radial-gradient(ellipse 60% 55% at 50% 45%,#F7FBF2 0%,#E3F1DD 65%,#D6EAD0 100%);display:grid;place-items:center;overflow:hidden}
.cupStage svg{position:absolute;inset:5% 0;width:100%;height:90%;overflow:visible}
.ctrl{display:grid;gap:20px;margin-top:24px}
.ctrl fieldset{border:0;padding:0;margin:0}
.ctrl legend{font:600 12px/1 var(--f-label);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
[lang=ar] .ctrl legend{font-family:var(--f-ar);letter-spacing:0;font-size:14px;font-weight:700}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{border:1.5px solid var(--line-strong);border-radius:99px;padding:9px 16px;font-weight:700;font-size:15px;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.seg input:checked+label{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.seg input:focus-visible+label{outline:3px solid var(--accent);outline-offset:2px}
.pourRow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}
.hold{position:relative;width:96px;height:96px;border-radius:50%;border:0;background:var(--accent);color:#FFF7E9;font-weight:800;font-size:14px;line-height:1.15;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 16px 34px -16px rgba(86,116,47,.9);transition:transform .3s var(--spring)}
.hold:active{transform:scale(.96)}
.hold svg{position:absolute;inset:-8px;width:112px;height:112px;transform:rotate(-90deg);pointer-events:none}
.hold circle{fill:none;stroke:var(--accent-muted);stroke-width:5;stroke-linecap:round}
.done{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.done.on{opacity:1;transform:none}
.done b{display:block;font-size:20px}

/* faq */
.faq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:start}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:0;padding:22px 2px;text-align:start;font-weight:800;font-size:clamp(18px,1.5vw,21px);cursor:pointer}
.qa button i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--mint);display:grid;place-items:center;transition:transform .5s var(--spring),background .3s var(--ease)}
.qa button i::before{content:"+";font-style:normal;font-weight:900;color:var(--ink)}
.qa.open button i{transform:rotate(45deg);background:var(--butter)}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.qa.open .ans{grid-template-rows:1fr}
.qa .ans>div{overflow:hidden}
.qa .ans p{margin:0 2px 24px;color:var(--ink-2);max-width:60ch}

/* visit */
.visit .card2{position:relative;border-radius:48px;overflow:hidden;min-height:min(78vh,720px);display:grid;align-items:end;background:#F3C6BA}
.visit .card2 .bg{position:absolute;inset:0;background:url(img/hero-ending.jpg) center/cover}
.visit .card2 .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,247,233,.92) 0%,rgba(255,247,233,.72) 38%,rgba(255,247,233,0) 62%)}
[dir=rtl] .visit .card2 .bg::after{background:linear-gradient(270deg,rgba(255,247,233,.92) 0%,rgba(255,247,233,.72) 38%,rgba(255,247,233,0) 62%)}
.visit .inner{position:relative;padding:clamp(28px,5vw,72px);max-width:620px}
.hours{display:grid;gap:6px;margin:18px 0 26px;font-weight:700}
.hours span{color:var(--ink-2);font-weight:400}

/* footer */
.foot{padding:70px var(--gutter) 28px;border-top:1px solid var(--line);background:rgba(255,251,244,.6)}
.foot .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;align-items:start}
.foot p{margin:.3em 0;color:var(--ink-2)}
.foot nav a{display:block;text-decoration:none;padding:4px 0;font-weight:700}
.made{margin-top:56px;text-align:center;font:600 11px/1.6 var(--f-label);letter-spacing:.22em;text-transform:uppercase;color:#7C8A73}
[lang=ar] .made{font-family:var(--f-ar);letter-spacing:.02em;font-size:12.5px}
.made a{text-decoration:none;color:var(--ink);border-bottom:1px solid rgba(135,157,108,.6);padding-bottom:1px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.made a:hover{color:var(--accent);border-color:var(--accent)}

/* tray, sheet */
.trayFab{position:fixed;right:var(--gutter);bottom:22px;z-index:45;opacity:0;transform:translateY(20px) scale(.9);pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--spring)}
.trayFab.on{opacity:1;transform:none;pointer-events:auto}
[dir=rtl] .trayFab{right:auto;left:var(--gutter)}
dialog{border:0;padding:0;background:transparent;color:var(--ink);max-width:none;max-height:none}
dialog::backdrop{background:rgba(52,74,48,.32);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100vw);height:100%;}
[dir=rtl] .drawer{inset:0 auto 0 0}
.drawer .in2{height:100%;background:var(--canvas);display:flex;flex-direction:column;box-shadow:-30px 0 60px -30px rgba(52,74,48,.4);animation:slideIn .5s var(--ease)}
[dir=rtl] .drawer .in2{animation-name:slideInR}
@keyframes slideIn{from{transform:translateX(100%)}}
@keyframes slideInR{from{transform:translateX(-100%)}}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}
.dhead h2{margin:0;font:900 26px/1 var(--f-display)}
[lang=ar] .dhead h2{font-family:var(--f-ar);font-weight:800}
.x{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line-strong);background:transparent;cursor:pointer;font-size:20px;line-height:1}
.dbody{flex:1;overflow:auto;padding:12px 24px}
.line{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:14px 0;border-bottom:1px solid var(--line)}
.line b{font-weight:800}
.line small{grid-column:1/-1;color:var(--ink-2)}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line-strong);background:transparent;cursor:pointer;font-weight:900}
.empty{color:var(--ink-2);padding:30px 0}
.form{display:grid;gap:14px;padding:18px 0}
.form label{display:grid;gap:6px;font-weight:700;font-size:15px}
.form input,.form select{border:1.5px solid var(--line-strong);border-radius:14px;padding:12px 14px;background:#fff;font-size:16px}
.form input:focus{outline:3px solid var(--accent);outline-offset:1px}
.err{color:#A3352D;font-size:13px;font-weight:700;min-height:1em}
.dfoot{padding:18px 24px 26px;border-top:1px solid var(--line)}
.dfoot .btn{width:100%}
.ok{text-align:center;padding:40px 10px}
.ok .big2{font:900 28px/1.2 var(--f-display);margin:14px 0 8px}
[lang=ar] .ok .big2{font-family:var(--f-ar);font-weight:800}
.sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;width:min(560px,100vw)}
.sheet .in2{background:var(--canvas);border-radius:32px 32px 0 0;padding:24px 24px 28px;animation:up .5s var(--ease);max-height:90vh;overflow:auto}
@keyframes up{from{transform:translateY(100%)}}
.sheet h2{margin:0 0 4px;font:900 24px/1.2 var(--f-display)}
[lang=ar] .sheet h2{font-family:var(--f-ar);font-weight:800}
.sheet .ctrl{margin-top:18px}
.sheet .btn{width:100%;margin-top:22px}

/* responsive */
@media (max-width:980px){
  .build .wrap,.faq .wrap{grid-template-columns:1fr}
  .foot .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr 1fr;gap:12px}
  .card{padding:10px 10px 14px;border-radius:22px}
  .card h3{font-size:16px;flex-direction:column;gap:2px}
  .card p{font-size:13.5px}
  .card .alt{display:none}
  .tags{margin:8px 4px 10px}
  .card .add{padding:10px 14px;font-size:13px}
  .foot .wrap{grid-template-columns:1fr}
  .trayFab{left:var(--gutter);right:var(--gutter)}
  .trayFab .btn{width:100%}
  .nav .btn.sm .lbl{display:none}
  .nav .btn.sm{padding:11px 14px}
}
@media (max-height:560px){.ring{display:none}}

/* pauses */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
.idle *,.idle *::before,.idle *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .reveal .rv,.card{opacity:1!important;transform:none!important}
  .ribbon circle{opacity:.5!important;transform:none!important}
}