/* ============================================================
   RASAM by Avinash Mohan — Design System
   Palette: deep evergreen, aged brass, ivory, kanthari red
   Type: Fraunces (display) + Sora (body)
   ============================================================ */

:root{
  --ink:        #0A1512;
  --forest:     #0F1F1A;
  --moss:       #163027;
  --moss-soft:  #1D3A30;
  --line:       rgba(198,161,91,.18);
  --line-soft:  rgba(242,235,221,.08);
  --gold:       #C6A15B;
  --gold-hi:    #E7CC8B;
  --cream:      #F2EBDD;
  --cream-dim:  rgba(242,235,221,.62);
  --cream-mute: rgba(242,235,221,.38);
  --chili:      #C8502F;
  --leaf:       #6FA184;

  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Sora", "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-exp: cubic-bezier(.87,0,.13,1);

  --pad: clamp(1.25rem, 4vw, 4rem);
  --radius: 4px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:auto; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--gold); color:var(--ink); }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; }

h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:420;
  line-height:1.02;
  letter-spacing:.005em;
}

/* ---------- grain + vignette atmosphere ---------- */
.grain{
  position:fixed; inset:-50%;
  width:200%; height:200%;
  pointer-events:none;
  z-index:2000;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 9s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-4%,3%); }
  40%{ transform:translate(3%,-5%); }
  60%{ transform:translate(-5%,-2%); }
  80%{ transform:translate(4%,4%); }
}

/* ---------- preloader ---------- */
.loader{
  position:fixed; inset:0; z-index:5000;
  background:var(--ink);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:2rem;
}
.loader__kolam{ width:92px; height:92px; }
.loader__kolam path{
  fill:none; stroke:var(--gold); stroke-width:2.4;
  stroke-dasharray:600; stroke-dashoffset:600;
  animation:draw 1.7s var(--ease-exp) forwards;
}
.loader__kolam circle{
  fill:var(--gold); opacity:0;
  animation:dotIn .5s .9s var(--ease-out) forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes dotIn{ to{ opacity:1; } }
.loader__word{
  font-family:var(--font-display);
  letter-spacing:.55em; text-indent:.55em;
  font-size:.85rem; color:var(--cream-dim);
  text-transform:uppercase;
}
.loader__count{
  position:absolute; bottom:var(--pad); right:var(--pad);
  font-family:var(--font-display); font-size:clamp(3rem,8vw,6rem);
  color:var(--gold); font-variant-numeric:tabular-nums;
}

/* ---------- page transition veil ---------- */
.veil{
  position:fixed; inset:0; z-index:4000;
  background:var(--moss);
  transform:scaleY(0); transform-origin:top;
  pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.veil svg{ width:70px; opacity:0; }

/* ---------- custom cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:6000;
  width:34px; height:34px;
  color:#FFFFFF;
  pointer-events:none;
  transform:translate(-40%,-40%);
  transition:width .25s, height .25s, opacity .25s;
  animation:cursorGlow 3.2s ease-in-out infinite;
}
.cursor svg{ width:100%; height:100%; display:block; }
.cursor svg path{ stroke:currentColor; fill:none; stroke-linecap:round; }
.cursor .cup-steam{
  stroke-dasharray:22 34;
  animation:steamFlow 1.9s linear infinite;
  opacity:.85;
}
.cursor .cup-steam:last-of-type{ animation-delay:-.9s; }
.cursor--hover{ width:48px; height:48px; }
@keyframes cursorGlow{
  0%, 100%{
    filter: drop-shadow(0 0 3px rgba(231,204,139,.55))
            drop-shadow(0 0 7px rgba(231,204,139,.30))
            drop-shadow(0 1px 4px rgba(0,0,0,.45));
  }
  50%{
    filter: drop-shadow(0 0 6px rgba(231,204,139,.85))
            drop-shadow(0 0 14px rgba(231,204,139,.50))
            drop-shadow(0 1px 4px rgba(0,0,0,.45));
  }
}
@keyframes steamFlow{ to{ stroke-dashoffset:-56; } }
@media (hover:hover) and (min-width:821px){
  html, body, a, button, .card3d, .chip{ cursor:none; }
}
@media (hover:none), (max-width:820px){ .cursor{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .cursor{ animation:none; filter:drop-shadow(0 0 5px rgba(231,204,139,.6)) drop-shadow(0 1px 4px rgba(0,0,0,.45)); }
  .cursor .cup-steam{ animation:none; }
}

/* ---------- header ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad);
  transition:background .4s, backdrop-filter .4s, padding .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.header.is-scrolled{
  background:rgba(10,21,18,.82);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
  padding-block:.7rem;
}
.header__brand{ display:flex; align-items:center; gap:.9rem; }
.header__brand img{ height:44px; width:auto; }
.header__nav{ display:flex; gap:2.2rem; align-items:center; }
.header__link{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream-dim); position:relative; padding-block:.4rem;
  transition:color .3s;
}
.header__link::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-exp);
}
.header__link:hover, .header__link[aria-current="page"]{ color:var(--cream); }
.header__link:hover::after, .header__link[aria-current="page"]::after{
  transform:scaleX(1); transform-origin:left;
}
.btn{
  display:inline-flex; align-items:center; gap:.8rem;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); background:var(--gold);
  padding:.95rem 1.8rem; border-radius:var(--radius);
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .35s;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--cream);
  transform:translateY(101%);
  transition:transform .5s var(--ease-exp);
}
.btn:hover::before{ transform:translateY(0); }
.btn--ghost{
  background:transparent; color:var(--cream);
  border:1px solid var(--line);
}
.btn--ghost::before{ background:var(--gold); }
.btn--ghost:hover{ color:var(--ink); }
.btn .arrow{ transition:transform .35s var(--ease-out); }
.btn:hover .arrow{ transform:translateX(6px); }

.burger{ display:none; flex-direction:column; gap:6px; padding:.6rem; z-index:1001; }
.burger span{ width:26px; height:1.6px; background:var(--cream); transition:transform .4s var(--ease-exp), opacity .3s; }
.burger.is-open span:nth-child(1){ transform:translateY(7.6px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7.6px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:950;
  background:var(--forest);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--pad); gap:.4rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .65s var(--ease-exp);
}
.mobile-nav.is-open{ clip-path:inset(0 0 0% 0); }
.mobile-nav a{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,9vw,4rem);
  color:var(--cream-dim); padding-block:.35rem;
  transition:color .3s, padding-left .3s;
}
.mobile-nav a:hover, .mobile-nav a[aria-current="page"]{ color:var(--gold); padding-left:.6rem; }
.mobile-nav__meta{ margin-top:2.5rem; font-size:.8rem; color:var(--cream-mute); letter-spacing:.12em; }

@media (max-width:960px){
  .header__nav{ display:none; }
  .burger{ display:flex; }
}

/* ---------- shared section scaffolding ---------- */
.section{ position:relative; padding:clamp(5rem,12vh,9rem) var(--pad); }
.wrap{ max-width:1320px; margin-inline:auto; }
.label{
  display:inline-flex; align-items:center; gap:.9rem;
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.6rem;
}
.label::before{ content:""; width:34px; height:1px; background:var(--gold); }
.title{ font-size:clamp(2.4rem,5.2vw,4.6rem); max-width:16ch; }
.title em{ font-style:italic; color:var(--gold-hi); }
.lede{ color:var(--cream-dim); max-width:56ch; font-size:1.02rem; font-weight:300; }

.reveal-line{ overflow:hidden; display:block; }
.reveal-line > span{ display:block; will-change:transform; }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  padding:0 var(--pad) clamp(3rem,8vh,6rem);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.85) brightness(.7);
  transform:scale(1.12);
}
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, var(--ink) 4%, rgba(10,21,18,.35) 45%, rgba(10,21,18,.55) 100%);
}
.hero__inner{ width:100%; max-width:1320px; margin-inline:auto; }
.hero__eyebrow{
  font-size:.75rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.4rem;
}
.hero h1{
  font-size:clamp(3.2rem,9.5vw,8.6rem);
  line-height:.98; letter-spacing:-.01em;
  max-width:12ch;
}
.hero h1 em{ font-style:italic; color:var(--gold-hi); }
.hero__row{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:2rem; margin-top:2.6rem;
}
.hero__sub{ max-width:44ch; color:var(--cream-dim); font-weight:300; }
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero__rating{
  position:absolute; top:calc(1.1rem + 76px); right:var(--pad);
  display:flex; flex-direction:column; align-items:flex-end; gap:.2rem;
  font-size:.72rem; letter-spacing:.14em; color:var(--cream-dim);
  text-transform:uppercase;
}
.hero__rating strong{
  font-family:var(--font-display); font-size:2rem; letter-spacing:0;
  color:var(--gold); font-weight:400;
}
.hero__scroll{
  position:absolute; bottom:2.4rem; right:var(--pad);
  writing-mode:vertical-rl;
  font-size:.66rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--cream-mute);
  display:flex; align-items:center; gap:1rem;
}
.hero__scroll::after{
  content:""; width:1px; height:56px; background:var(--gold);
  animation:drop 2.2s var(--ease-exp) infinite;
}
@keyframes drop{
  0%{ transform:scaleY(0); transform-origin:top; }
  45%{ transform:scaleY(1); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}
@media (max-width:820px){ .hero__scroll, .hero__rating{ display:none; } }

/* ---------- marquee ---------- */
.marquee{
  border-block:1px solid var(--line);
  padding-block:1.2rem;
  overflow:hidden; white-space:nowrap;
  background:var(--forest);
}
.marquee__track{ display:inline-flex; gap:3.4rem; will-change:transform; }
.marquee__track span{
  font-family:var(--font-display);
  font-size:clamp(1.2rem,2.4vw,1.8rem);
  color:var(--cream-dim);
  display:inline-flex; align-items:center; gap:3.4rem;
}
.marquee__track i{
  width:7px; height:7px; border-radius:50%;
  background:var(--gold); display:inline-block; flex:none;
}

/* ---------- story ---------- */
.story{ background:var(--ink); }
.story__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2.5rem,6vw,6rem); align-items:center;
}
.story__media{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/5;
}
.story__media img{
  width:110%; height:110%; object-fit:cover;
  filter:saturate(.9);
}
.story__media::after{
  content:""; position:absolute; inset:0;
  border:1px solid var(--line);
  transform:translate(14px,14px);
  pointer-events:none;
}
.story__word{
  position:absolute; z-index:2;
  bottom:clamp(.8rem,2.5vw,2rem); left:clamp(1rem,3vw,2.4rem);
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(2.8rem,6.5vw,5.6rem);
  color:var(--gold-hi); opacity:.96;
  pointer-events:none; line-height:1;
  text-shadow:0 10px 40px rgba(0,0,0,.65);
}
.story p + p{ margin-top:1.2rem; }

/* ---------- chef ---------- */
.chef{ background:var(--forest); overflow:hidden; }
.chef__grid{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(2.5rem,6vw,6rem);
}
.chef__media{
  position:sticky; top:14vh; align-self:start;
  border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4;
}
.chef__media img{ width:100%; height:112%; object-fit:cover; }
.chef__roles{ margin-top:2.6rem; border-top:1px solid var(--line-soft); }
.chef__roles li{
  display:flex; gap:1.6rem; align-items:baseline;
  padding:1.15rem 0; border-bottom:1px solid var(--line-soft);
}
.chef__roles .num{
  font-family:var(--font-display); color:var(--gold);
  font-size:.95rem; min-width:2.4rem;
}
.chef__roles .role{ font-size:.98rem; color:var(--cream); }
.chef__roles .org{ display:block; font-size:.8rem; color:var(--cream-mute); margin-top:.15rem; letter-spacing:.06em; }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2rem; margin-top:clamp(3rem,7vh,5rem);
  border-top:1px solid var(--line); padding-top:2.6rem;
}
.stat strong{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.6rem,5vw,4.2rem); color:var(--cream);
  display:flex; align-items:baseline; gap:.15em;
}
.stat strong sup{ font-size:.45em; color:var(--gold); }
/* Direct child only. `.stat span` also matched the number span inside
   <strong>, shrinking a 67px figure to 11.5px — the counter was running
   the whole time, just far too small to read. */
.stat > span{
  display:block; margin-top:.4rem;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream-mute);
}
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* ---------- signatures: 3D cards ---------- */
.signatures{ background:var(--ink); }
.sig-head{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:1.5rem; margin-bottom:3.4rem;
}
.cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,2.5vw,2rem);
  perspective:1400px;
}
.card3d{
  position:relative; border-radius:var(--radius);
  background:var(--moss);
  transform-style:preserve-3d;
  transition:transform .18s ease-out;
  border:1px solid var(--line-soft);
  overflow:hidden;
}
.card3d::before{
  content:""; position:absolute; inset:0; z-index:3;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(231,204,139,.16), transparent 45%);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.card3d:hover::before{ opacity:1; }
.card3d__media{ aspect-ratio:4/3.4; overflow:hidden; }
.card3d__media img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.85);
  transition:transform .8s var(--ease-out), filter .5s;
}
.card3d:hover .card3d__media img{ transform:scale(1.06); filter:saturate(1.05); }
.card3d__body{ padding:1.5rem 1.5rem 1.7rem; transform:translateZ(34px); }
.card3d__tag{
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); display:block; margin-bottom:.6rem;
}
.card3d__body h3{ font-size:1.5rem; margin-bottom:.5rem; }
.card3d__body p{ font-size:.88rem; color:var(--cream-dim); font-weight:300; }
.card3d__price{
  position:absolute; top:1.1rem; right:1.1rem; z-index:4;
  font-family:var(--font-display);
  background:rgba(10,21,18,.72); backdrop-filter:blur(6px);
  border:1px solid var(--line);
  color:var(--gold-hi); padding:.4rem .8rem; border-radius:2rem;
  font-size:.88rem;
}
@media (max-width:960px){ .cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .cards{ grid-template-columns:1fr; } }

/* ---------- big outline marquee strip (continuous) ---------- */
.exp{ background:var(--moss); position:relative; overflow:hidden; padding-block:clamp(2.4rem,7vh,4.5rem); }
.exp .marquee__track span{
  font-family:var(--font-display);
  font-size:clamp(3rem,10vw,9rem);
  line-height:1.1;
  color:transparent;
  -webkit-text-stroke:1px rgba(231,204,139,.5);
}
.exp .marquee__track em{ color:var(--gold); -webkit-text-stroke:0; font-style:italic; }
.exp .marquee__track i{ width:12px; height:12px; background:var(--chili); }

/* ---------- amenities ---------- */
.amenities{ background:var(--forest); }
.amen-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
.amen{
  background:var(--forest); padding:2.4rem 1.8rem;
  transition:background .4s;
  position:relative; overflow:hidden;
}
.amen:hover{ background:var(--moss); }
.amen svg{ width:36px; height:36px; stroke:var(--gold); fill:none; stroke-width:1.4; margin-bottom:1.3rem; }
.amen h3{ font-size:1.15rem; margin-bottom:.45rem; }
.amen p{ font-size:.85rem; color:var(--cream-dim); font-weight:300; }
@media (max-width:960px){ .amen-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .amen-grid{ grid-template-columns:1fr; } }

/* ---------- testimonials ---------- */
.voices{ background:var(--ink); }
.voices__rail{
  display:flex; gap:clamp(1.2rem,2.5vw,2rem);
  margin-top:3rem;
  will-change:transform;
}
.voice{
  flex:0 0 clamp(300px,38vw,480px);
  background:var(--forest); border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:2.2rem;
  display:flex; flex-direction:column; gap:1.4rem;
}
.voice__stars{ color:var(--gold); letter-spacing:.25em; font-size:.8rem; }
.voice p{ font-size:.95rem; color:var(--cream-dim); font-weight:300; flex:1; }
.voice footer{
  display:flex; align-items:center; gap:.9rem;
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
}
.voice footer i{
  width:34px; height:34px; border-radius:50%;
  background:var(--moss); border:1px solid var(--line);
  display:grid; place-items:center;
  font-family:var(--font-display); font-style:normal; color:var(--gold);
}

/* ---------- platforms ---------- */
.platforms{ background:var(--forest); }
.plat-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1rem; margin-top:3rem;
}
.plat{
  display:flex; align-items:center; gap:1rem;
  padding:1.4rem 1.5rem;
  border:1px solid var(--line-soft); border-radius:var(--radius);
  background:var(--ink);
  transition:transform .35s var(--ease-out), border-color .35s, background .35s;
}
.plat:hover{ transform:translateY(-5px); border-color:var(--line); background:var(--moss); }
.plat__logo{
  width:44px; height:44px; flex:none; border-radius:12px;
  display:grid; place-items:center;
  font-weight:700; font-size:1.15rem; color:#fff;
  font-family:var(--font-body);
}
.plat__name{ font-size:.92rem; }
.plat__meta{ display:block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-mute); margin-top:.15rem; }
.plat__go{ margin-left:auto; color:var(--gold); transition:transform .3s; }
.plat:hover .plat__go{ transform:translate(4px,-4px); }
@media (max-width:1100px){ .plat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .plat-grid{ grid-template-columns:1fr; } }

/* ---------- CTA / visit ---------- */
.visit{
  background:var(--moss);
  text-align:center;
  position:relative; overflow:hidden;
}
.visit .title{ margin-inline:auto; }
.visit__actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.6rem; }
.visit__kolam{
  position:absolute; width:520px; opacity:.05; z-index:0;
  left:50%; top:50%; transform:translate(-50%,-50%);
  pointer-events:none;
}
.visit > *{ position:relative; z-index:1; }

/* ---------- footer ---------- */
.footer{
  background:var(--ink);
  border-top:1px solid var(--line-soft);
  padding:clamp(3.5rem,8vh,6rem) var(--pad) 2rem;
}
.footer__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr;
  gap:clamp(2rem,4vw,4rem);
  max-width:1320px; margin-inline:auto;
}
.footer h4{
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.4rem; font-weight:500;
}
.footer p, .footer li, .footer a{ font-size:.9rem; color:var(--cream-dim); font-weight:300; }
.footer li{ padding-block:.32rem; }
.footer a{ transition:color .3s; }
.footer a:hover{ color:var(--gold-hi); }
.footer__brand img{ height:52px; margin-bottom:1.4rem; }
.footer__social{ display:flex; gap:.8rem; margin-top:1.6rem; }
.footer__social a{
  width:40px; height:40px; border:1px solid var(--line-soft); border-radius:50%;
  display:grid; place-items:center;
  transition:border-color .3s, background .3s, transform .3s;
}
.footer__social a:hover{ border-color:var(--gold); background:var(--moss); transform:translateY(-3px); }
.footer__social svg{ width:16px; height:16px; fill:var(--cream-dim); }
.hours{ width:100%; }
.hours li{ display:flex; justify-content:space-between; border-bottom:1px solid var(--line-soft); }
.footer__bottom{
  max-width:1320px; margin:3.5rem auto 0;
  padding-top:1.6rem; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  font-size:.75rem; color:var(--cream-mute); letter-spacing:.06em;
}
@media (max-width:960px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } }

/* ============================================================
   MENU PAGE
   ============================================================ */
.menu-hero{
  min-height:62svh; display:flex; align-items:flex-end;
  padding:9rem var(--pad) 3.5rem; position:relative; overflow:hidden;
  background:var(--forest);
}
.menu-hero__word{
  position:absolute; right:-2vw; bottom:-4vh;
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(8rem,26vw,24rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(198,161,91,.22);
  pointer-events:none; white-space:nowrap;
}
.menu-nav{
  position:sticky; top:70px; z-index:800;
  background:rgba(10,21,18,.9); backdrop-filter:blur(14px);
  border-block:1px solid var(--line-soft);
  overflow-x:auto; scrollbar-width:none;
}
.menu-nav::-webkit-scrollbar{ display:none; }
.menu-nav__inner{
  display:flex; gap:.4rem; padding:.8rem var(--pad);
  min-width:max-content;
}
.chip{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.62rem 1.2rem; border-radius:2rem;
  border:1px solid var(--line-soft); color:var(--cream-dim);
  transition:all .3s; white-space:nowrap;
}
.chip:hover{ border-color:var(--gold); color:var(--cream); }
.chip.is-active{ background:var(--gold); color:var(--ink); border-color:var(--gold); }

.menu-section{ padding:clamp(3.5rem,8vh,6rem) var(--pad); }
.menu-section:nth-of-type(even){ background:var(--forest); }
.menu-section__head{
  display:flex; align-items:baseline; gap:1.6rem;
  margin-bottom:2.6rem;
}
.menu-section__head .idx{
  font-family:var(--font-display); font-style:italic;
  color:var(--gold); font-size:1.1rem;
}
.menu-section__head h2{ font-size:clamp(1.8rem,3.4vw,2.8rem); }
.menu-section__head .rule{ flex:1; height:1px; background:var(--line-soft); }
.dishes{
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(2.5rem,6vw,6rem); row-gap:.4rem;
}
.dish{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:baseline; column-gap:1rem;
  padding:1.05rem 0; border-bottom:1px solid var(--line-soft);
  transition:padding-left .3s var(--ease-out);
}
.dish:hover{ padding-left:.5rem; }
.dish__dot{
  width:9px; height:9px; border:1.4px solid var(--leaf); border-radius:2px;
  position:relative; top:1px;
}
.dish__dot::after{ content:""; position:absolute; inset:2px; border-radius:50%; background:var(--leaf); }
.dish--nv .dish__dot{ border-color:var(--chili); }
.dish--nv .dish__dot::after{ background:var(--chili); }
.dish__name{
  font-family:var(--font-display); font-size:1.12rem; font-weight:450;
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
}
.dish__desc{
  grid-column:2 / 4; font-size:.83rem; color:var(--cream-mute);
  font-weight:300; margin-top:.25rem;
}
.dish__price{
  font-family:var(--font-display); color:var(--gold-hi);
  font-size:1rem; white-space:nowrap;
}
.dish__price small{ font-size:.68em; color:var(--cream-mute); letter-spacing:.08em; }
.spice{ display:inline-flex; gap:2px; }
.spice svg{ width:12px; height:12px; fill:var(--chili); }
@media (max-width:900px){ .dishes{ grid-template-columns:1fr; } }

.feature-dish{
  margin-top:3rem;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(120deg, var(--moss), var(--forest));
  padding:clamp(1.8rem,4vw,3rem);
  display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center;
}
.feature-dish h3{ font-size:clamp(1.6rem,3vw,2.4rem); margin-bottom:1rem; }
.feature-dish p{ color:var(--cream-dim); font-weight:300; font-size:.95rem; }
.feature-dish__prices{ display:flex; flex-direction:column; gap:.7rem; }
.feature-dish__prices div{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid var(--line-soft); padding-bottom:.6rem;
  font-size:.9rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-dim);
}
.feature-dish__prices strong{
  font-family:var(--font-display); font-size:1.5rem; color:var(--gold-hi); font-weight:400;
  letter-spacing:0;
}
@media (max-width:820px){ .feature-dish{ grid-template-columns:1fr; } }

.legend{
  display:flex; gap:1.8rem; flex-wrap:wrap; margin-top:1.6rem;
  font-size:.75rem; color:var(--cream-mute); letter-spacing:.1em;
}
.legend span{ display:inline-flex; align-items:center; gap:.5rem; }

/* ============================================================
   CHEF PAGE
   ============================================================ */
.chefhero{
  min-height:88svh; display:grid; grid-template-columns:1fr 1fr;
  align-items:end; gap:3rem;
  padding:8rem var(--pad) 4rem; background:var(--forest);
  position:relative; overflow:hidden;
}
.chefhero__media{
  border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4;
  max-height:70vh;
}
.chefhero__media img{ width:100%; height:100%; object-fit:cover; }
.chefhero h1{ font-size:clamp(3rem,7vw,6.4rem); }
@media (max-width:900px){ .chefhero{ grid-template-columns:1fr; } }

.timeline{ background:var(--ink); }
.timeline__list{ max-width:840px; margin-top:3rem; }
.tl{
  display:grid; grid-template-columns:120px 1fr; gap:2rem;
  padding:2rem 0; border-bottom:1px solid var(--line-soft);
}
.tl__era{
  font-family:var(--font-display); font-style:italic;
  color:var(--gold); font-size:1.05rem;
}
.tl h3{ font-size:1.4rem; margin-bottom:.4rem; }
.tl p{ color:var(--cream-dim); font-weight:300; font-size:.92rem; }
@media (max-width:640px){ .tl{ grid-template-columns:1fr; gap:.4rem; } }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .grain{ display:none; }
}

/* inline SVG logo */
.header__brand .logo{ height:40px; width:auto; }
.footer__brand .logo{ height:48px; width:auto; margin-bottom:1.4rem; }

/* ============================================================
   v2 additions: brand mark animation, kolam pattern, light zone,
   real platform logos
   ============================================================ */

/* ---------- the Rasam mark (accurate recreation) ---------- */
.mark{ display:block; }
.mark path{ fill:none; stroke:var(--gold); stroke-width:3.2; }
.mark circle{ fill:var(--gold); }
.mark--animate .mark__frame{
  stroke-dasharray:240; stroke-dashoffset:240;
  animation:markDraw 1.05s .1s var(--ease-exp) forwards;
}
.mark--animate .mark__d{
  stroke-dasharray:150; stroke-dashoffset:150;
  animation:markDraw .85s .75s var(--ease-exp) forwards;
}
.mark--animate circle{
  opacity:0; transform:scale(0);
  transform-origin:center; transform-box:fill-box;
  animation:markDot .5s var(--ease-out) forwards;
}
.mark--animate .mark__dot1{ animation-delay:1.35s; }
.mark--animate .mark__dot2{ animation-delay:1.5s; }
@keyframes markDraw{ to{ stroke-dashoffset:0; } }
@keyframes markDot{ to{ opacity:1; transform:scale(1); } }
.mark--loop .mark__frame{ animation:markDraw 1.05s .1s var(--ease-exp) forwards; }

/* loader uses the mark */
.loader .mark{ width:104px; height:104px; }

/* hero decorative mark */
.hero__mark{
  position:absolute; z-index:0;
  right:clamp(2rem,6vw,7rem); top:50%;
  translate:0 -52%;
  width:min(30vw,420px); opacity:.6;
  pointer-events:none;
}
.hero__mark path{ stroke:rgba(231,204,139,.34); stroke-width:2.2; }
.hero__mark circle{ fill:rgba(231,204,139,.5); }
.hero__inner{ position:relative; z-index:1; }
@media (max-width:960px){ .hero__mark{ display:none; } }

/* ---------- kolam pattern backdrop ---------- */
.pattern{ position:relative; isolation:isolate; }
.pattern::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23C6A15B' stroke-width='2'%3E%3Cg transform='rotate(0 100 100)'%3E%3Cpath d='M100 34 H78 Q58 34 58 57 Q58 80 78 80 H100'/%3E%3Ccircle cx='79' cy='57' r='4' fill='%23C6A15B' stroke='none'/%3E%3C/g%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M100 34 H78 Q58 34 58 57 Q58 80 78 80 H100'/%3E%3Ccircle cx='79' cy='57' r='4' fill='%23C6A15B' stroke='none'/%3E%3C/g%3E%3Cg transform='rotate(180 100 100)'%3E%3Cpath d='M100 34 H78 Q58 34 58 57 Q58 80 78 80 H100'/%3E%3Ccircle cx='79' cy='57' r='4' fill='%23C6A15B' stroke='none'/%3E%3C/g%3E%3Cg transform='rotate(270 100 100)'%3E%3Cpath d='M100 34 H78 Q58 34 58 57 Q58 80 78 80 H100'/%3E%3Ccircle cx='79' cy='57' r='4' fill='%23C6A15B' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:230px;
  opacity:.05;
  pointer-events:none;
}
.pattern--corner::before{
  inset:auto; top:0; right:0; width:min(46vw,520px); height:min(46vw,520px);
  opacity:.09;
  -webkit-mask-image:radial-gradient(closest-side at 85% 12%, #000, transparent);
          mask-image:radial-gradient(closest-side at 85% 12%, #000, transparent);
}

/* ---------- light (cream) color zone ---------- */
.zone-light{ background:var(--cream); color:var(--ink); }
.zone-light .label{ color:#8a6c2f; }
.zone-light .label::before{ background:#8a6c2f; }
.zone-light .title em{ color:#8a6c2f; }
.zone-light.pattern::before{ opacity:.08; }
.zone-light .plat{
  background:#fff; border-color:rgba(10,21,18,.1);
  box-shadow:0 2px 14px rgba(10,21,18,.05);
}
.zone-light .plat:hover{ background:#fff; border-color:var(--gold); box-shadow:0 14px 34px rgba(10,21,18,.12); }
.zone-light .plat__meta{ color:rgba(10,21,18,.5); }
.zone-light .plat__go{ color:#8a6c2f; }

/* ---------- bigger, real platform logos ---------- */
.plat__logo{
  width:54px; height:54px; border-radius:13px;
  overflow:hidden; padding:0;
}
.plat__logo svg{ width:100%; height:100%; display:block; }

/* red accent thread */
.label i.spark{
  width:6px; height:6px; border-radius:50%;
  background:var(--chili); display:inline-block;
}

/* menu page: feature blocks */
.note-strip{
  margin-top:2.4rem; padding:1.1rem 1.4rem;
  border:1px dashed var(--line); border-radius:var(--radius);
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cream-dim); text-align:center;
}
.order-strip{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:1.1rem; margin-top:2rem;
}
.order-strip .plat__logo{ width:46px; height:46px; border-radius:11px; }


/* ============================================================
   V2 — brand mark, kolam pattern, colour zones, marquees
   ============================================================ */
:root{
  --terra:      #A8431F;
  --terra-deep: #5E2212;
  --parchment:  #EDE4D1;
  --ink-on-light: #122A22;
}

/* ---------- brand mark + lockup ---------- */
.mark{ display:block; color:#E8DFC8; }
.mark path{ stroke:currentColor; fill:none; }
.mark circle{ fill:currentColor; }
.header__brand{ color:#E8DFC8; }
.header__brand .mark{ height:36px; width:auto; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; border-left:1px solid rgba(198,161,91,.4); padding-left:.9rem; }
.brand-text small{ font-size:.5rem; letter-spacing:.5em; text-transform:uppercase; color:var(--gold); }
.brand-text strong{ font-family:var(--font-display); font-weight:400; font-size:1.28rem; letter-spacing:.38em; color:#E8DFC8; }
.brand-text em{ font-style:normal; font-size:.48rem; letter-spacing:.3em; text-transform:uppercase; color:var(--cream-mute); }
.footer__brand .mark{ height:52px; width:auto; margin-bottom:1.2rem; }
@media (max-width:480px){ .brand-text strong{ font-size:1.05rem; letter-spacing:.28em; } }

/* ---------- loader v2: mark draw ---------- */
.loader .mark{ width:118px; color:var(--gold); }
.loader .mark circle{ opacity:0; }

/* ---------- hero mark, right side ---------- */
.hero__mark{
  position:absolute; right:5vw; top:50%;
  width:clamp(280px,30vw,470px);
  transform:translateY(-56%);
  color:var(--gold-hi); opacity:.16;
  pointer-events:none; z-index:0;
}
.hero__mark circle{ opacity:0; }
.hero__inner{ position:relative; z-index:1; }
@media (max-width:1100px){ .hero__mark{ display:none; } }

/* ---------- kolam pattern backdrop ---------- */
.pattern{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20170%20170%22%3E%3Cg%20transform%3D%22translate%2885%2C85%29%20rotate%280%29%22%3E%3Cpath%20d%3D%22M10%20-18%20H32%20A18%2018%200%200%201%2032%2018%20H10%20Z%22%20fill%3D%22none%22%20stroke%3D%22rgba%28198%2C161%2C91%2C0.10%29%22%20stroke-width%3D%221.6%22/%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%220%22%20r%3D%223.4%22%20fill%3D%22none%22%20stroke%3D%22rgba%28198%2C161%2C91%2C0.10%29%22%20stroke-width%3D%221.4%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2885%2C85%29%20rotate%2890%29%22%3E%3Cpath%20d%3D%22M10%20-18%20H32%20A18%2018%200%200%201%2032%2018%20H10%20Z%22%20fill%3D%22none%22%20stroke%3D%22rgba%28198%2C161%2C91%2C0.10%29%22%20stroke-width%3D%221.6%22/%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%220%22%20r%3D%223.4%22%20fill%3D%22none%22%20stroke%3D%22rgba%28198%2C161%2C91%2C0.10%29%22%20stroke-width%3D%221.4%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2885%2C85%29%20rotate%28180%29%22%3E%3Cpath%20d%3D%22M10%20-18%20H32%20A18%2018%200%200%201%2032%2018%20H10%20Z%22%20fill%3D%22none%22%20stroke%3D%22rgba%28198%2C161%2C91%2C0.10%29%22%20stroke-width%3D%221.6%22/%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%220%22%20r%3D%223.4%22%20fill%3D%22none%22%20stroke%3D%22rgba%28198%2C161%2C91%2C0.10%29%22%20stroke-width%3D%221.4%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2885%2C85%29%20rotate%28270%29%22%3E%3Cpath%20d%3D%22M10%20-18%20H32%20A18%2018%200%200%201%2032%2018%20H10%20Z%22%20fill%3D%22none%22%20stroke%3D%22rgba%28198%2C161%2C91%2C0.10%29%22%20stroke-width%3D%221.6%22/%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%220%22%20r%3D%223.4%22%20fill%3D%22none%22%20stroke%3D%22rgba%28198%2C161%2C91%2C0.10%29%22%20stroke-width%3D%221.4%22/%3E%3C/g%3E%3Ccircle%20cx%3D%2247%22%20cy%3D%2247%22%20r%3D%222.4%22%20fill%3D%22rgba%28198%2C161%2C91%2C0.10%29%22/%3E%3Ccircle%20cx%3D%22123%22%20cy%3D%2247%22%20r%3D%222.4%22%20fill%3D%22rgba%28198%2C161%2C91%2C0.10%29%22/%3E%3Ccircle%20cx%3D%22123%22%20cy%3D%22123%22%20r%3D%222.4%22%20fill%3D%22rgba%28198%2C161%2C91%2C0.10%29%22/%3E%3Ccircle%20cx%3D%2247%22%20cy%3D%22123%22%20r%3D%222.4%22%20fill%3D%22rgba%28198%2C161%2C91%2C0.10%29%22/%3E%3C/svg%3E"); background-size:210px; }

/* ---------- spice ticker + outline marquee ---------- */
.marquee--spice{
  background:var(--terra-deep);
  border-color:rgba(231,204,139,.25);
}
.marquee--spice .marquee__track span{ color:#F2E5D2; }
.marquee--spice .marquee__track i{ background:var(--gold-hi); }

.marquee--outline{ background:var(--moss); border:0; padding-block:0; }
.marquee--outline .exp__big{
  display:inline-flex; align-items:baseline; gap:0;
  padding-block:clamp(2.6rem,7vh,4.4rem);
}

/* ---------- amenities: parchment zone ---------- */
.amenities{ background:var(--parchment); }
.amenities .label{ color:var(--terra); }
.amenities .label::before{ background:var(--terra); }
.amenities .title{ color:var(--ink-on-light); }
.amenities .title em{ color:var(--terra); }
.amenities .amen-grid{ background:rgba(18,42,34,.14); border-color:rgba(18,42,34,.14); }
.amenities .amen{ background:#F4EDDD; }
.amenities .amen:hover{ background:#FBF6EA; }
.amenities .amen svg{ stroke:var(--terra); }
.amenities .amen h3{ color:var(--ink-on-light); }
.amenities .amen p{ color:#57685F; }

/* ---------- sadya / light feature block ---------- */
.feature-dish--cream{
  background:var(--parchment); border-color:rgba(18,42,34,.18);
}
.feature-dish--cream .label{ color:var(--terra); }
.feature-dish--cream .label::before{ background:var(--terra); }
.feature-dish--cream h3{ color:var(--ink-on-light); }
.feature-dish--cream p{ color:#4E5F56; }
.feature-dish--cream .feature-dish__prices div{ color:#4E5F56; border-color:rgba(18,42,34,.16); }
.feature-dish--cream .feature-dish__prices strong{ color:var(--terra); }

/* ---------- platform badges v2 ---------- */
.plat__logo{ overflow:hidden; }
.plat__logo svg{ width:26px; height:26px; display:block; }
.plat__logo--round{ border-radius:50%; }
.plat__logo span{ font-weight:800; line-height:1; }

/* subtle section accents */
.menu-section__head .idx{ color:var(--terra); }
.dish:hover .dish__name{ color:var(--gold-hi); }
.menu-note{
  margin-top:2.4rem; font-size:.78rem; letter-spacing:.12em;
  color:var(--cream-mute); text-transform:uppercase;
}

/* ============================================================
   RASAM — AUTHENTIC BRAND PASS
   Real monogram geometry, real lockup, festive boutique,
   basket + WhatsApp ordering.  (authoritative overrides)
   ============================================================ */

/* ---------- 1. the real mark ---------- */
.mark{ display:block; color:var(--gold); overflow:visible; }
.mark path{
  fill:none; stroke:currentColor;
  stroke-width:25.5;                 /* user units - scales with the viewBox, keeps true logo weight */
  stroke-linecap:butt; stroke-linejoin:miter;
}
.mark circle, .mark .mark__dot{ fill:currentColor; stroke:none; }

/* real horizontal lockup in the header */
.header__brand{ display:flex; align-items:center; gap:0; }
.header__brand img{
  height:clamp(30px,3.6vw,42px); width:auto; display:block;
  transition:opacity .4s var(--ease-out), transform .5s var(--ease-out);
}
.header__brand:hover img{ opacity:.82; transform:translateY(-1px); }
.brand-text{ display:none; }
.footer__logo{ height:56px; width:auto; margin-bottom:1.3rem; }
@media (max-width:480px){ .header__brand img{ height:26px; } }

/* ---------- 2. preloader ---------- */
.loader{
  position:fixed; inset:0; z-index:5000;
  background:
    radial-gradient(120% 90% at 50% 40%, #12241E 0%, var(--ink) 62%);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0;
}
.loader__inner{ display:flex; flex-direction:column; align-items:center; gap:1.9rem; }
.loader .mark, .loader__mark{
  width:clamp(96px,13vw,142px); height:auto; color:var(--gold-hi);
  filter:drop-shadow(0 0 26px rgba(198,161,91,.22));
}
.loader .mark circle{ opacity:0; }
.loader__wordmark{
  width:clamp(190px,26vw,300px); height:auto; opacity:0;
  transform:translateY(14px);
}
.loader__bar{
  position:absolute; left:50%; bottom:clamp(4rem,12vh,7rem);
  transform:translateX(-50%);
  width:min(230px,42vw); height:1px; background:rgba(242,235,221,.13);
  overflow:hidden;
}
.loader__bar i{ display:block; height:100%; width:0%; background:var(--gold); }
.loader__count{
  position:absolute; bottom:var(--pad); right:var(--pad);
  font-family:var(--font-display); font-size:clamp(2.4rem,7vw,5rem);
  color:rgba(198,161,91,.5); font-variant-numeric:tabular-nums; line-height:1;
}
.loader__word{ display:none; }
.veil svg{ width:84px; opacity:0; color:var(--gold-hi); }

/* ---------- 3. hero watermark ---------- */
.hero__mark{
  position:absolute; right:var(--pad); top:22vh;
  width:clamp(120px,17vw,230px); height:auto;
  color:rgba(231,204,139,.22); z-index:0; pointer-events:none;
}
@media (max-width:900px){ .hero__mark{ display:none; } }

/* ---------- 4. header polish ---------- */
.header__link--hot{ color:var(--gold-hi) !important; }
.header__link--hot::after{ background:var(--gold-hi); }

/* ============================================================
   5. ORDER STRIP — "now available on"
   ============================================================ */
.orderstrip{
  background:linear-gradient(180deg,var(--moss) 0%,#132A22 100%);
  border-block:1px solid var(--line);
  padding:clamp(1.6rem,4vh,2.4rem) var(--pad);
  position:relative; z-index:3;
}
.orderstrip__inner{ display:flex; align-items:center; gap:clamp(1.2rem,4vw,3rem); flex-wrap:wrap; }
.orderstrip__label{
  font-size:.62rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap; display:flex; align-items:center; gap:.9rem;
}
.orderstrip__label::after{ content:""; width:30px; height:1px; background:var(--line); }
.orderstrip__rail{ display:flex; gap:.7rem; flex-wrap:wrap; flex:1; }

.pplat{
  flex:1 1 130px; min-width:120px;
  background:#FBF8F1; border-radius:6px;
  display:grid; place-items:center; height:58px;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 10px 24px -14px rgba(0,0,0,.8);
  position:relative; overflow:hidden;
}
.pplat::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);
  transform:translateX(-120%); transition:transform .8s var(--ease-out);
}
.pplat:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -18px rgba(0,0,0,.9); }
.pplat:hover::after{ transform:translateX(120%); }
.pplat__wm{ display:flex; align-items:center; gap:.34rem; font-weight:700; line-height:1; }
.pplat__wm svg{ height:1.15em; width:auto; }

.pplat--talabat .pplat__wm{ color:#FF5A00; font-size:1.32rem; letter-spacing:-.028em; }
.pplat--noon    .pplat__wm{ color:#3B3B3B; font-size:1.24rem; letter-spacing:-.03em; }
.pplat--noon{ background:#FEEE00; }
.pplat--zomato  .pplat__wm{ color:#E23744; font-size:1.24rem; letter-spacing:-.022em; }
.pplat--eazy    .pplat__wm{ color:#7B2D8B; font-size:1.03rem; letter-spacing:-.012em; }
.pplat--wa{ background:#25D366; }
.pplat--wa .pplat__wm{ color:#fff; font-size:.95rem; letter-spacing:.005em; }
@media (max-width:700px){
  .orderstrip__inner{ flex-direction:column; align-items:stretch; gap:1rem; }
  .orderstrip__label{ justify-content:center; }
  .orderstrip__label::after{ display:none; }
  .pplat{ flex:1 1 30%; min-width:96px; height:50px; }
  .pplat--talabat .pplat__wm{ font-size:1.05rem; }
  .pplat--noon .pplat__wm, .pplat--zomato .pplat__wm{ font-size:1rem; }
  .pplat--eazy .pplat__wm{ font-size:.82rem; }
  .pplat--wa .pplat__wm{ font-size:.8rem; }
}

/* ============================================================
   6. FESTIVE BOUTIQUE
   ============================================================ */
.retail{ background:var(--forest); position:relative; overflow:hidden; }
.retail__glow{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(70% 46% at 82% 6%,  rgba(198,161,91,.13), transparent 62%),
    radial-gradient(58% 40% at 6% 92%, rgba(200,80,47,.10),  transparent 60%);
}
.retail > .wrap{ position:relative; z-index:1; }

.retail__head{
  display:grid; grid-template-columns:1fr auto; gap:2rem;
  align-items:end; margin-bottom:clamp(2.6rem,6vh,4.2rem);
}
.basket-open{ white-space:nowrap; }
.basket-open__n{
  display:inline-grid; place-items:center; min-width:1.5em; height:1.5em;
  margin-left:.55rem; padding:0 .38em;
  border-radius:999px; background:var(--gold); color:var(--ink);
  font-size:.72rem; font-weight:600; font-variant-numeric:tabular-nums;
}
@media (max-width:820px){ .retail__head{ grid-template-columns:1fr; align-items:start; } }

/* --- sadya feature --- */
.sadya{
  display:grid; grid-template-columns:1.05fr 1fr;
  background:linear-gradient(150deg,var(--moss) 0%,#122620 100%);
  border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  margin-bottom:clamp(3rem,7vh,5rem);
}
.sadya__media{ position:relative; overflow:hidden; min-height:340px; }
.sadya__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease-out); transform:scale(1.02);
}
.sadya:hover .sadya__media img{ transform:scale(1.07); }
.sadya__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 45%,rgba(15,31,26,.55) 100%);
}
.sadya__ribbon{
  position:absolute; top:1.1rem; left:1.1rem; z-index:2;
  background:var(--chili); color:#fff;
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  padding:.5rem .95rem; border-radius:2px;
}
.sadya__body{ padding:clamp(1.8rem,4vw,3.2rem); display:flex; flex-direction:column; justify-content:center; }
.sadya__title{ font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.05; }
.sadya__title em{ font-style:italic; color:var(--gold-hi); }
.sadya__copy{ color:var(--cream-dim); font-size:.92rem; font-weight:300; margin-top:1rem; max-width:46ch; }

.tiers{ margin-top:2rem; display:flex; flex-direction:column; gap:.55rem; }
.tier{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:1rem; padding:.95rem 1.1rem;
  border:1px solid var(--line-soft); border-radius:3px;
  background:rgba(10,21,18,.42); position:relative;
  transition:border-color .4s var(--ease-out), background .4s var(--ease-out), transform .4s var(--ease-out);
}
.tier:hover{ border-color:var(--line); background:rgba(10,21,18,.7); transform:translateX(3px); }
.tier--best{ border-color:rgba(198,161,91,.42); }
.tier__badge{
  position:absolute; top:-.62rem; right:1rem;
  background:var(--gold); color:var(--ink);
  font-size:.52rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.24rem .55rem; border-radius:2px;
}
.tier__for{
  font-size:.58rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--line);
  padding:.36rem .5rem; border-radius:2px; white-space:nowrap;
}
.tier__name{ font-size:.94rem; }
.tier__price{ font-family:var(--font-display); font-size:1.18rem; color:var(--cream); white-space:nowrap; }
.tier__add{
  border:1px solid var(--gold); color:var(--gold);
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.5rem .9rem; border-radius:2px;
  transition:background .35s var(--ease-out), color .35s var(--ease-out);
}
.tier__add:hover, .tier__add.is-added{ background:var(--gold); color:var(--ink); }
@media (max-width:980px){ .sadya{ grid-template-columns:1fr; } .sadya__media{ min-height:260px; } }
@media (max-width:520px){
  .tier{ grid-template-columns:1fr auto; row-gap:.5rem; }
  .tier__for{ grid-column:1/-1; justify-self:start; }
  .tier__badge{ right:auto; left:1rem; }
}

/* --- sub headings --- */
.retail__sub{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--font-display); font-size:clamp(1.25rem,2.4vw,1.75rem);
  margin:0 0 1.7rem;
}
.retail__sub::after{ content:""; flex:1; height:1px; background:var(--line-soft); }
.retail__sub i{
  font-style:normal; font-family:var(--font-body);
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--cream-mute);
  order:3;
}

/* --- boutique grid --- */
.retail-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1rem;
  margin-bottom:clamp(2.6rem,6vh,4rem);
}
.retail-grid--3{ grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:1100px){ .retail-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .retail-grid, .retail-grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .retail-grid, .retail-grid--3{ grid-template-columns:1fr; } }

.ritem{
  background:var(--ink); border:1px solid var(--line-soft);
  border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .45s var(--ease-out), transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.ritem:hover{
  border-color:var(--line); transform:translateY(-5px);
  box-shadow:0 26px 46px -28px rgba(0,0,0,.95);
}
.ritem__media{ aspect-ratio:4/3; overflow:hidden; position:relative; }
.ritem__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); }
.ritem:hover .ritem__media img{ transform:scale(1.07); }
.ritem__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(10,21,18,.75) 100%);
}
.ritem__body{ padding:1.1rem 1.1rem 1.25rem; display:flex; flex-direction:column; flex:1; gap:.45rem; }
.ritem__body h4{ font-family:var(--font-display); font-size:1.02rem; font-weight:420; line-height:1.2; }
.ritem__body p{ font-size:.78rem; color:var(--cream-dim); font-weight:300; line-height:1.5; }
.ritem__unit{ font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }

.sizes{ display:flex; gap:.35rem; margin-top:.25rem; }
.size{
  flex:1; border:1px solid var(--line-soft); border-radius:2px;
  padding:.4rem .2rem; font-size:.66rem; letter-spacing:.08em;
  color:var(--cream-mute);
  transition:all .3s var(--ease-out);
}
.size:hover{ color:var(--cream); border-color:var(--line); }
.size.is-on{ background:rgba(198,161,91,.14); border-color:var(--gold); color:var(--gold-hi); }

.ritem__foot{
  margin-top:auto; padding-top:.85rem;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  border-top:1px solid var(--line-soft);
}
.ritem__price{ font-family:var(--font-display); font-size:1.05rem; color:var(--cream); font-variant-numeric:tabular-nums; }
.ritem__add{
  border:1px solid var(--gold); color:var(--gold);
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.46rem .78rem; border-radius:2px;
  transition:background .35s var(--ease-out), color .35s var(--ease-out);
}
.ritem__add:hover, .ritem__add.is-added{ background:var(--gold); color:var(--ink); }

.retail__note{
  font-size:.8rem; color:var(--cream-mute); font-weight:300;
  border-left:1px solid var(--line); padding-left:1rem; max-width:70ch;
}
.retail__note a{ color:var(--gold-hi); }

/* ============================================================
   7. BASKET DRAWER
   ============================================================ */
.basket-scrim{
  position:fixed; inset:0; z-index:5500;
  background:rgba(5,11,9,.72); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .45s var(--ease-out);
}
.basket-scrim.is-on{ opacity:1; }
.basket{
  position:fixed; top:0; right:0; z-index:5600;
  width:min(430px,100%); height:100dvh;
  background:linear-gradient(180deg,#122620 0%,var(--ink) 100%);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(102%);
  transition:transform .6s var(--ease-exp);
  visibility:hidden;
}
.basket.is-open{ transform:translateX(0); visibility:visible; }
.basket__top{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem var(--pad) 1.1rem; border-bottom:1px solid var(--line-soft);
}
.basket__top h2{ font-size:1.35rem; }
.basket__x{ font-size:1.7rem; line-height:1; color:var(--cream-mute); transition:color .3s; }
.basket__x:hover{ color:var(--gold); }
.basket__body{ flex:1; overflow-y:auto; padding:1.2rem var(--pad); }
.basket__empty{ font-size:.86rem; color:var(--cream-mute); font-weight:300; line-height:1.7; }
.basket__list{ display:flex; flex-direction:column; gap:.9rem; }
.bline{
  display:grid; grid-template-columns:1fr auto; gap:.35rem .8rem;
  padding-bottom:.9rem; border-bottom:1px solid var(--line-soft);
}
.bline__name{ font-size:.9rem; line-height:1.3; }
.bline__meta{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-top:.2rem; }
.bline__price{ font-family:var(--font-display); font-size:1rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.bline__qty{ display:flex; align-items:center; gap:.55rem; grid-column:1/-1; margin-top:.35rem; }
.bline__qty button{
  width:24px; height:24px; border:1px solid var(--line-soft); border-radius:2px;
  color:var(--cream-dim); display:grid; place-items:center; font-size:.85rem; line-height:1;
  transition:all .3s;
}
.bline__qty button:hover{ border-color:var(--gold); color:var(--gold); }
.bline__qty span{ font-size:.85rem; min-width:1.4em; text-align:center; font-variant-numeric:tabular-nums; }
.bline__rm{ margin-left:auto; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-mute); transition:color .3s; }
.bline__rm:hover{ color:var(--chili); }

.basket__foot{ padding:1.2rem var(--pad) calc(1.4rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.basket__total{ display:flex; justify-content:space-between; align-items:baseline; }
.basket__total span{ font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--cream-mute); }
.basket__total strong{ font-family:var(--font-display); font-size:1.7rem; color:var(--gold-hi); font-weight:420; font-variant-numeric:tabular-nums; }
.basket__fine{ font-size:.7rem; color:var(--cream-mute); font-weight:300; margin:.6rem 0 1rem; line-height:1.55; }
.basket__send{ width:100%; justify-content:center; display:flex; }
.basket__send[aria-disabled="true"]{ opacity:.35; pointer-events:none; }
.basket__clear{
  width:100%; margin-top:.7rem; font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cream-mute); padding:.5rem; transition:color .3s;
}
.basket__clear:hover{ color:var(--chili); }

/* ---------- 8. floating actions ---------- */
.fab{
  position:fixed; right:clamp(.9rem,2.5vw,1.6rem);
  bottom:calc(clamp(.9rem,2.5vw,1.6rem) + env(safe-area-inset-bottom));
  z-index:3500; display:flex; flex-direction:column; gap:.6rem;
}
.fab__cart, .fab__wa{
  width:50px; height:50px; border-radius:50%;
  display:grid; place-items:center; position:relative;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  box-shadow:0 12px 26px -10px rgba(0,0,0,.85);
}
.fab__cart{ background:var(--moss); border:1px solid var(--line); color:var(--gold-hi); }
.fab__cart svg{ width:21px; height:21px; }
.fab__wa{ background:#25D366; color:#fff; }
.fab__wa svg{ width:25px; height:25px; }
.fab__cart:hover, .fab__wa:hover{ transform:translateY(-3px) scale(1.05); }
.fab__n{
  position:absolute; top:-3px; right:-3px;
  min-width:19px; height:19px; padding:0 4px; border-radius:999px;
  background:var(--chili); color:#fff; font-size:.62rem; font-weight:600;
  display:grid; place-items:center; font-variant-numeric:tabular-nums;
  transform:scale(0); transition:transform .4s var(--ease-out);
}
.fab__n.is-on{ transform:scale(1); }
.fab__cart[hidden]{ display:none; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:1.6rem; z-index:6100;
  transform:translate(-50%,140%);
  background:var(--gold); color:var(--ink);
  padding:.7rem 1.3rem; border-radius:3px;
  font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  transition:transform .55s var(--ease-exp); pointer-events:none;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.9);
}
.toast.is-on{ transform:translate(-50%,0); }

/* ---------- 9. elevation details ---------- */
.card3d__media img, .story__media img, .chef__media img{ background:var(--moss); }
.plat__logo{ overflow:hidden; }
.hero__scrim{
  background:
    linear-gradient(180deg, rgba(10,21,18,.62) 0%, rgba(10,21,18,.30) 34%, rgba(10,21,18,.93) 100%),
    radial-gradient(90% 60% at 20% 82%, rgba(10,21,18,.55), transparent 70%);
}
.section .title em{ position:relative; }
body.no-scroll{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .pplat::after, .grain{ display:none; }
  /* scoped in section 27b — a blanket rule here also froze the
     marquees, the ornaments and the cursor. */
}

/* ============================================================
   10. RESOLUTION PASS — settles conflicts with the older
   .hero__mark / grid rules above and tunes the boutique layout.
   ============================================================ */

/* hero watermark: one authoritative rule (three were competing) */
.hero .hero__mark{
  position:absolute; z-index:0; pointer-events:none;
  right:clamp(1.5rem,6vw,6rem); top:50%;
  translate:0 -50%; transform:none;
  width:clamp(190px,23vw,360px); height:auto;
  color:var(--gold-hi); opacity:.2;
}
.hero .hero__mark path{ stroke:currentColor; stroke-width:25.5; }
.hero .hero__mark circle{ fill:currentColor; }
@media (max-width:1100px){ .hero .hero__mark{ display:none; } }

/* header lockup a touch larger so the micro-type reads */
.header__brand img{ height:clamp(32px,4vw,48px); }
.header.is-scrolled .header__brand img{ height:clamp(28px,3.3vw,40px); }

/* --- boutique grid breathing room --- */
.retail-grid{
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:1.05rem;
}
.retail-grid--3{
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1.2rem;
}
.retail-grid--3 .ritem__media{ aspect-ratio:16/10; }
.retail-grid--3 .ritem__body{ padding:1.25rem 1.3rem 1.4rem; }
.retail-grid--3 .ritem__body h4{ font-size:1.14rem; }
.retail-grid--3 .ritem__body p{ font-size:.83rem; }

/* keep every card's title block the same height so the row aligns */
.ritem__body h4{ min-height:2.4em; display:flex; align-items:flex-start; }
.retail-grid--3 .ritem__body h4{ min-height:0; }
.ritem__body p{ min-height:3em; }
.retail-grid--3 .ritem__body p{ min-height:0; }

.retail__sub{ margin-top:clamp(2.4rem,6vh,3.6rem); }
.retail__sub:first-of-type{ margin-top:0; }

.retail__note{ color:var(--cream-dim); font-size:.83rem; }

/* payasam size toggle: legible at narrow widths */
.size{ padding:.44rem .2rem; font-size:.68rem; }
.ritem__foot{ padding-top:.8rem; }
.ritem__price{ font-size:1.1rem; }
.ritem__add{ padding:.46rem .7rem; letter-spacing:.14em; }

/* sub-heading rhythm inside the boutique */
.retail-grid{ margin-bottom:0; }
.retail__sub{ margin-top:clamp(3rem,7vh,4.6rem); }
.retail__sub i{ color:var(--cream-dim); }
.retail__note{ margin-top:clamp(2.2rem,5vh,3.2rem); }

/* toast: hide completely when idle (an empty node was peeking above the fold) */
.toast{ opacity:0; visibility:hidden; }
.toast.is-on{ opacity:1; visibility:visible; }

/* the basket FAB only earns its place once something is in the basket */
.fab__cart{ opacity:0; visibility:hidden; transform:scale(.7); pointer-events:none; }
.fab__cart.is-live{ opacity:1; visibility:visible; transform:scale(1); pointer-events:auto; }

/* ---------- basket drawer layout corrections ---------- */
.basket__top, .basket__body, .basket__foot{
  padding-inline:clamp(1.1rem,5.5%,1.7rem);   /* --pad was far too wide for a 430px drawer */
}
.bline{ grid-template-columns:minmax(0,1fr) auto; column-gap:.9rem; }
.bline__name{ min-width:0; overflow-wrap:anywhere; }
.bline__meta{ display:block; }                 /* was inline, gluing "1 KG" to the dish name */
.bline__qty{ flex-wrap:wrap; }
.bline__rm{ flex:none; }

/* the 24px stepper sizing must not apply to the text Remove button */
.bline__qty button.bline__rm{
  width:auto; height:auto; border:0; padding:.2rem 0;
  display:inline; white-space:nowrap;
}

/* toast must clear the floating actions and the open drawer's CTA */
.toast{ bottom:5.6rem; }
body.no-scroll .toast{ bottom:auto; top:5.2rem; transform:translate(-50%,-160%); }
body.no-scroll .toast.is-on{ transform:translate(-50%,0); }
@media (min-width:900px){ .toast{ bottom:1.9rem; left:auto; right:5.4rem; transform:translate(0,160%); }
  .toast.is-on{ transform:translate(0,0); }
  body.no-scroll .toast{ top:auto; bottom:1.9rem; right:calc(min(430px,100%) + 1.4rem); transform:translate(0,160%); }
  body.no-scroll .toast.is-on{ transform:translate(0,0); }
}

/* ============================================================
   11. REFINEMENT PASS — brand ornament, Rachelya display face,
   cursor polish, ink underlines, scroll progress, atmosphere.
   ============================================================ */

/* ---------- Rachelya: the brand display face ---------- */
@font-face{
  font-family:"Rachelya";
  src:url("fonts/Rachelya.ttf") format("truetype");
  font-display:swap;
}
.story__word,
.menu-hero__word{
  font-family:"Rachelya", var(--font-display) !important;
  font-style:normal !important;
  letter-spacing:.02em;
}
.hero h1 em{
  font-family:"Rachelya", var(--font-display);
  font-style:normal;
  letter-spacing:.015em;
}
.hero .reveal-line{ padding-bottom:.08em; margin-bottom:-.08em; }

/* ---------- the brand ornament, slowly turning ---------- */
.orn{
  position:absolute; z-index:0; pointer-events:none;
  width:clamp(150px,17vw,290px); aspect-ratio:1/1; display:block;
  background:url("images/ornament-gold.png") center/contain no-repeat;
  opacity:.08;
  animation:ornSpin 90s linear infinite;
  will-change:transform;
}
.orn--rev{ animation-direction:reverse; }
@keyframes ornSpin{ to{ transform:rotate(360deg); } }

.orn--tr{ top:-70px; right:-60px; }
.orn--bl{ bottom:-80px; left:-70px; }
.orn--vl{ left:clamp(-60px,3vw,80px); top:50%; margin-top:-140px; opacity:.1; }
.orn--vr{ right:clamp(-60px,3vw,80px); top:50%; margin-top:-140px; opacity:.1; }
.orn--foot{ right:-70px; top:-90px; width:clamp(180px,20vw,320px); opacity:.05; }

.footer{ position:relative; overflow:hidden; }
.story{ overflow:hidden; }
.story .wrap, .menu-hero > .wrap{ position:relative; z-index:1; }
.menu-hero{ overflow:hidden; }
@media (max-width:820px){ .orn--vl,.orn--vr{ display:none; } .orn{ width:150px; opacity:.06; } }

/* loader ornament: behind the monogram */
.loader__orn{
  position:absolute; left:50%; top:50%;
  width:min(430px,72vw);
  margin:calc(min(430px,72vw)/-2) 0 0 calc(min(430px,72vw)/-2);
  opacity:.07;
  animation:ornSpin 46s linear infinite;
}

/* ---------- scroll progress ---------- */
.progressbar{
  position:fixed; top:0; left:0; right:0; height:2px;
  z-index:3200; pointer-events:none;
  background:rgba(198,161,91,.08);
}
.progressbar i{
  display:block; height:100%;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-hi) 100%);
  transform:scaleX(0); transform-origin:left;
  box-shadow:0 0 12px rgba(198,161,91,.55);
}

/* ---------- teacup cursor polish ---------- */
.cursor{
  margin:-17px 0 0 -17px;              /* centre the cup on the pointer */
  color:#F6EFDC;                        /* warm ivory, reads on both zones */
  opacity:0; transition:opacity .3s var(--ease-out);
}
.cursor.is-live{ opacity:1; }
.cursor--hover{ width:34px; height:34px; }          /* size change -> smooth svg scale */
.cursor svg{ transition:transform .3s var(--ease-out); }
.cursor--hover svg{ transform:scale(1.42) rotate(-8deg); }

/* ---------- title em: gold ink underline draws in ---------- */
.title em, .hero h1 em{ position:relative; display:inline-block; }
.title em::after, .hero h1 em::after{
  content:""; position:absolute; left:.02em; right:.06em; bottom:-.075em;
  height:.055em; border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-hi) 80%);
  opacity:.85;
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.05s var(--ease-exp) .25s;
}
.is-inked em::after{ transform:scaleX(1); }
/* Section titles sit on their own line with room underneath, so the ink
   drops clear of italic descenders (g, y, p) instead of striking through
   them. Hero h1 ems live inside .reveal-line masks (overflow:hidden), so
   they keep the tight offset or the rule would be clipped away. */
.title em::after{ bottom:-.2em; }

/* ---------- marquee separators become the monogram ---------- */
.marquee__track i{
  width:17px; height:14px; border-radius:0; transform:none;
  background:var(--gold-hi);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-30 -30 583 400' fill='none' stroke='%23000' stroke-width='42'%3E%3Cpath d='M135 306.5 V12.5 H502 V318.5 H380'/%3E%3Cpath d='M502 87.5 H380 A115.5 115.5 0 0 0 380 318.5'/%3E%3Ccircle cx='19' cy='212' r='30' fill='%23000' stroke='none'/%3E%3Ccircle cx='387' cy='212' r='30' fill='%23000' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-30 -30 583 400' fill='none' stroke='%23000' stroke-width='42'%3E%3Cpath d='M135 306.5 V12.5 H502 V318.5 H380'/%3E%3Cpath d='M502 87.5 H380 A115.5 115.5 0 0 0 380 318.5'/%3E%3Ccircle cx='19' cy='212' r='30' fill='%23000' stroke='none'/%3E%3Ccircle cx='387' cy='212' r='30' fill='%23000' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
.marquee--spice{
  background:linear-gradient(180deg,#A8431F 0%,#8F3617 100%);
  border-block:1px solid rgba(231,204,139,.25);
}
.marquee--spice .marquee__track i{ background:#F2D9A4; }

/* ---------- atmosphere & chrome ---------- */
body{
  background:
    radial-gradient(120% 70% at 50% -10%, #10231C 0%, var(--ink) 58%) fixed,
    var(--ink);
}
.header.is-scrolled{
  border-bottom:1px solid rgba(198,161,91,.16);
  box-shadow:0 14px 40px -22px rgba(0,0,0,.85);
}
.hero__rating{
  border:1px solid rgba(198,161,91,.35);
  background:rgba(10,21,18,.45);
  backdrop-filter:blur(6px);
  padding:.7rem 1rem; border-radius:3px;
}
.btn{ position:relative; overflow:hidden; }
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
  transform:translateX(-130%); transition:transform .75s var(--ease-out);
  pointer-events:none;
}
.btn:hover::after{ transform:translateX(130%); }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

.footer{ border-top:1px solid rgba(198,161,91,.14); }
.footer__bottom{ position:relative; z-index:1; }

/* sadya + signature card hover: gold breathing border */
.card3d:hover, .ritem:hover{ border-color:rgba(198,161,91,.4); }
.sadya:hover{ border-color:rgba(198,161,91,.42); }
.sadya{ transition:border-color .5s var(--ease-out); }

@media (prefers-reduced-motion:reduce){
  .orn, .loader__orn{ animation:none; }
  .btn::after{ display:none; }
}

/* ============================================================
   12. SHOP — The Rasam Pantry
   ============================================================ */
.shop-hero{
  position:relative; overflow:hidden;
  padding:clamp(8rem,20vh,12rem) var(--pad) clamp(3rem,7vh,4.5rem);
  background:var(--forest);
}
.shop-hero > .wrap{ position:relative; z-index:1; }
.shop-hero__word{
  position:absolute; right:-2%; bottom:-6%; z-index:0;
  font-family:"Rachelya", var(--font-display);
  font-size:clamp(6rem,20vw,17rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(198,161,91,.16);
  pointer-events:none; user-select:none;
}
.shop-nav{ top:0; }
.chip--basket{ margin-left:auto; border-color:var(--gold); color:var(--gold-hi); }
.chip--basket:hover{ background:var(--gold); color:var(--ink); }

.shop{ background:var(--ink); }
.shop-grid{ margin-bottom:clamp(3rem,7vh,4.5rem); }

/* product card entrance: staggered rise, replayed on every render/view-switch */
.shop-grid .ritem{
  animation:cardIn .7s var(--ease-out) both;
  animation-delay:calc(var(--i,0) * 60ms);
}
@keyframes cardIn{
  from{ opacity:0; transform:translateY(26px) scale(.985); }
  to{   opacity:1; transform:none; }
}

.ritem{ position:relative; }
.ritem__badge{
  position:absolute; top:.8rem; left:.8rem; z-index:2;
  background:var(--gold); color:var(--ink);
  font-size:.55rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.32rem .6rem; border-radius:2px;
}
.ritem--soon .ritem__media img{ filter:saturate(.25) brightness(.6); }
.ritem--soon:hover{ transform:none; box-shadow:none; border-color:var(--line-soft); }
.ritem__add--ghost{
  border:1px dashed var(--line); color:var(--cream-mute);
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.46rem .78rem; border-radius:2px; cursor:default;
}

/* how-it-works strip */
.shop-how{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
  margin-bottom:clamp(2.4rem,5vh,3.4rem);
}
.how{
  border:1px solid var(--line-soft); border-radius:var(--radius);
  background:var(--forest); padding:1.6rem 1.5rem;
  transition:border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.how:hover{ border-color:var(--line); transform:translateY(-4px); }
.how__n{
  font-family:var(--font-display); font-size:1rem; color:var(--gold);
  display:inline-block; border-bottom:1px solid var(--line); padding-bottom:.3rem;
  margin-bottom:.9rem;
}
.how h3{ font-size:1.05rem; margin-bottom:.4rem; }
.how p{ font-size:.82rem; color:var(--cream-dim); font-weight:300; }
@media (max-width:820px){ .shop-how{ grid-template-columns:1fr; } }

/* fly-to-basket dot + basket pulse */
.fly-dot{
  position:fixed; z-index:6200; width:16px; height:16px;
  border-radius:50%; background:var(--gold-hi);
  box-shadow:0 0 14px rgba(231,204,139,.8);
  pointer-events:none; transform:translate(-50%,-50%);
}
.fab__cart.is-pulse, [data-cart-open].is-pulse{ animation:basketPulse .45s var(--ease-out); }
@keyframes basketPulse{
  35%{ transform:scale(1.22); }
  100%{ transform:scale(1); }
}
.fab__cart.is-live.is-pulse{ animation:basketPulse .45s var(--ease-out); }

/* ============================================================
   13. MOBILE & TOUCH OPTIMISATION
   iOS Safari + Android Chrome: steady scroll, 44px touch
   targets, no tap flashes, no fixed-attachment repaints.
   ============================================================ */
html{ -webkit-text-size-adjust:100%; }
*{ -webkit-tap-highlight-color:transparent; }
a, button, .chip, .size{ touch-action:manipulation; }

/* iOS jank source: fixed background attachments repaint on scroll */
body{
  background:
    radial-gradient(120% 70% at 50% -10%, #10231C 0%, var(--ink) 58%),
    var(--ink);
}

/* momentum + contained overscroll where panels scroll internally */
.menu-nav{ -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.basket__body{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.basket{ overscroll-behavior:contain; }

@media (hover:none), (max-width:820px){
  /* every touch point >= 44px */
  .chip{ min-height:44px; padding:.65rem 1.15rem; display:inline-flex; align-items:center; }
  .size{ min-height:44px; }
  .ritem__add, .tier__add{ min-height:44px; padding:.6rem 1.05rem; display:inline-flex; align-items:center; }
  .bline__qty button{ width:40px; height:40px; }
  .bline__qty button.bline__rm{ min-height:40px; padding:.4rem .2rem; }
  .basket__x{ padding:.35rem .9rem; min-height:44px; }
  .burger{ padding:.85rem .7rem; margin:-.4rem -.3rem -.4rem 0; }
  .footer__social a{ width:44px; height:44px; }
  .plat{ min-height:56px; }
  .pplat{ min-height:52px; }
  .fab__cart, .fab__wa{ width:54px; height:54px; }

  /* calm the theatrics where fingers do the scrolling */
  .grain{ opacity:.035; animation-duration:14s; }
  .orn{ animation-duration:140s; }
  .card3d:hover .card3d__media img{ transform:none; }
  .btn::after{ display:none; }

  /* type rhythm on small screens */
  .hero h1{ font-size:clamp(2.6rem,11.5vw,4rem); }
  .hero__sub{ font-size:.95rem; }
  .section{ padding-inline:clamp(1.1rem,4.5vw,2rem); }
  .sadya__body{ padding:1.5rem 1.25rem 1.8rem; }
  .shop-hero{ padding-top:7rem; }
}

/* keyboard/soft-keyboard safety: keep the drawer CTA reachable */
@supports (height:100dvh){ .basket{ height:100dvh; } }

/* home boutique CTA pair */
.retail__cta{ display:flex; gap:.8rem; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:820px){ .retail__cta{ justify-content:flex-start; } }

/* ---------- touch-target corrections from device audit ---------- */
/* grow the hit area without moving the layout (padding + negative margin) */
.footer li a{
  display:inline-block;
  padding-block:.62rem; margin-block:-.42rem;
}
.retail__note a, .mobile-nav__meta a{
  display:inline-block;
  padding:.55rem .2rem; margin:-.55rem -.2rem;
}
.header__brand{ min-height:44px; align-items:center; display:flex; }
.basket__clear{ min-height:44px; }
@media (hover:none), (max-width:820px){
  .footer li{ padding-block:.15rem; }
}

/* final tap-size nudges */
.footer li a{ padding-inline:.35rem; margin-inline:-.35rem; }
.retail__note a{ padding-block:.65rem; margin-block:-.65rem; }

/* ============================================================
   14. MARQUEE TYPOGRAPHY FIX + INFINITE RAILS
   `.marquee__track span` was display:inline-flex, which turned the
   text and its <em> into separate flex items and ate the space
   between them ("meettechnique"). Units are now inline-block with
   self-contained padding, so one unit measures exactly one loop.
   ============================================================ */
.marquee__track{ display:flex; width:max-content; gap:0; will-change:transform; }
.marquee__track span{
  display:inline-block !important;
  align-items:initial; gap:0;
  white-space:nowrap;
  padding-right:3.2rem;
}
.marquee__track i{
  display:inline-block; vertical-align:middle;
  margin-inline:1.9rem;
}
.marquee--spice .marquee__track i{ width:20px; height:16px; }
.marquee__track em{ font-style:italic; }

.marquee{ position:relative; }
/* soft edge fade so words dissolve instead of hard-cutting */
.marquee::before, .marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(40px,7vw,110px);
  z-index:2; pointer-events:none;
}
.marquee--spice::before{ left:0;  background:linear-gradient(90deg,#A8431F,transparent); }
.marquee--spice::after { right:0; background:linear-gradient(270deg,#8F3617,transparent); }
.marquee--outline::before{ left:0;  background:linear-gradient(90deg,var(--moss),transparent); }
.marquee--outline::after { right:0; background:linear-gradient(270deg,var(--moss),transparent); }

/* the outline rail reads better slightly smaller and wider-tracked */
.marquee--outline{ background:var(--moss); padding-block:clamp(1.6rem,4vh,2.8rem); }
.marquee--outline .exp__big{
  font-family:var(--font-display);
  font-size:clamp(2.2rem,7vw,5.4rem);
  letter-spacing:.01em;
  color:transparent;
  -webkit-text-stroke:1px rgba(231,204,139,.42);
}
.marquee--outline .exp__big em{
  color:var(--gold-hi); -webkit-text-stroke:0;
  font-family:"Rachelya", var(--font-display); font-style:normal;
}

/* ============================================================
   15. KITCHEN ASSISTANT (chat)
   ============================================================ */
.chat{
  position:fixed; z-index:5800;
  right:clamp(.9rem,2.5vw,1.6rem);
  bottom:calc(clamp(.9rem,2.5vw,1.6rem) + 128px + env(safe-area-inset-bottom));
  width:min(388px, calc(100vw - 1.8rem));
  max-height:min(620px, calc(100dvh - 190px));
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#14291F 0%,var(--ink) 100%);
  border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
  box-shadow:0 34px 70px -26px rgba(0,0,0,.92);
  opacity:0; visibility:hidden;
  transform:translateY(16px) scale(.97);
  transform-origin:bottom right;
  transition:opacity .38s var(--ease-out), transform .48s var(--ease-exp), visibility .38s;
}
.chat.is-open{ opacity:1; visibility:visible; transform:none; }

.chat__top{
  display:flex; align-items:center; gap:.75rem;
  padding:.9rem 1rem; flex:none;
  background:linear-gradient(120deg,var(--moss),#16302690);
  border-bottom:1px solid var(--line);
}
.chat__mark{ width:30px; flex:none; color:var(--gold-hi); }
.chat__mark svg{ width:100%; height:auto; }
.chat__mark path{ stroke:currentColor; stroke-width:34; fill:none; }
.chat__mark circle{ fill:currentColor; }
.chat__who{ display:flex; flex-direction:column; line-height:1.25; flex:1; min-width:0; }
.chat__who strong{ font-family:var(--font-display); font-size:1rem; font-weight:420; letter-spacing:.02em; }
.chat__who em{ font-style:normal; font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-mute); display:flex; align-items:center; gap:.4rem; }
.chat__dot{ width:6px; height:6px; border-radius:50%; background:#3FD07A; box-shadow:0 0 0 0 rgba(63,208,122,.6); animation:liveDot 2.2s ease-out infinite; }
@keyframes liveDot{ 70%{ box-shadow:0 0 0 7px rgba(63,208,122,0);} 100%{ box-shadow:0 0 0 0 rgba(63,208,122,0);} }
.chat__x{ font-size:1.5rem; line-height:1; color:var(--cream-mute); padding:.2rem .4rem; transition:color .3s; }
.chat__x:hover{ color:var(--gold); }

.chat__log{
  flex:1; overflow-y:auto; padding:1rem;
  display:flex; flex-direction:column; gap:.65rem;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  background-image:url("images/ornament-gold.png");
  background-size:230px; background-position:center 30%;
  background-repeat:no-repeat;
}
.chat__log::-webkit-scrollbar{ width:5px; }
.chat__log::-webkit-scrollbar-thumb{ background:rgba(198,161,91,.3); border-radius:3px; }

.msg{
  max-width:88%; padding:.7rem .9rem; border-radius:12px;
  font-size:.86rem; line-height:1.55; font-weight:300;
  animation:msgIn .42s var(--ease-out) both;
}
@keyframes msgIn{ from{ opacity:0; transform:translateY(9px);} to{ opacity:1; transform:none;} }
.msg b{ font-weight:500; color:var(--cream); }
.msg--bot{
  align-self:flex-start; background:rgba(29,58,48,.9);
  border:1px solid var(--line-soft); border-bottom-left-radius:4px;
  color:var(--cream-dim);
}
.msg--me{
  align-self:flex-end; background:var(--gold); color:var(--ink);
  border-bottom-right-radius:4px; font-weight:400;
}
.msg--typing{ display:flex; gap:5px; padding:.85rem .9rem; }
.msg--typing i{ width:6px; height:6px; border-radius:50%; background:var(--gold); animation:typeBob 1s ease-in-out infinite; }
.msg--typing i:nth-child(2){ animation-delay:.15s; }
.msg--typing i:nth-child(3){ animation-delay:.3s; }
@keyframes typeBob{ 0%,60%,100%{ transform:translateY(0); opacity:.4;} 30%{ transform:translateY(-5px); opacity:1;} }

.msg__actions{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem; }
.msg__btn{
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--gold); color:var(--gold-hi);
  padding:.48rem .7rem; border-radius:3px;
  transition:background .3s var(--ease-out), color .3s var(--ease-out);
}
.msg__btn:hover{ background:var(--gold); color:var(--ink); }
.msg__btn--wa{ border-color:#25D366; color:#5CE79A; }
.msg__btn--wa:hover{ background:#25D366; color:#04150C; }
.vdot{ display:inline-block; width:9px; height:9px; border:1px solid #6FA184; }

.chat__chips{
  flex:none; display:flex; flex-wrap:wrap; gap:.4rem;
  padding:.7rem 1rem; border-top:1px solid var(--line-soft);
  max-height:132px; overflow-y:auto; overscroll-behavior:contain;
}
.chat__chip{
  font-size:.74rem; color:var(--cream-dim);
  border:1px solid var(--line-soft); border-radius:999px;
  padding:.48rem .8rem; text-align:left;
  transition:border-color .3s, color .3s, background .3s;
}
.chat__chip:hover{ border-color:var(--gold); color:var(--cream); background:rgba(198,161,91,.1); }
.chat__chip--more{ color:var(--gold); border-style:dashed; }

.chat__foot{ flex:none; padding:.7rem 1rem calc(.8rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line-soft); }
.chat__human{ font-size:.7rem; letter-spacing:.06em; color:#5CE79A; transition:color .3s; }
.chat__human:hover{ color:#8BF3B8; }

.fab--chatting .fab__wa{ background:var(--moss); color:var(--gold-hi); border:1px solid var(--line); }

@media (max-width:520px){
  .chat{
    right:.6rem; left:.6rem; width:auto;
    bottom:calc(.6rem + 124px + env(safe-area-inset-bottom));
    max-height:min(72dvh, calc(100dvh - 180px));
  }
  .chat__chip{ font-size:.78rem; min-height:40px; display:inline-flex; align-items:center; }
}

/* ============================================================
   16. BASKET — brand dressing
   ============================================================ */
.basket__top{
  background:linear-gradient(120deg,var(--moss),transparent);
  position:relative;
}
.basket__top::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.5;
}
.basket__top h2{ display:flex; align-items:center; gap:.6rem; }
.basket__top h2::before{
  content:""; width:22px; height:16px; flex:none;
  background:var(--gold-hi);
  -webkit-mask:url("images/mark.svg") center/contain no-repeat;
          mask:url("images/mark.svg") center/contain no-repeat;
}
.basket__body{
  background-image:url("images/ornament-gold.png");
  background-size:260px; background-position:center 42%; background-repeat:no-repeat;
}
.basket__empty{
  text-align:center; padding:2.6rem 1rem;
}
.basket__empty::before{
  content:""; display:block; width:62px; height:44px; margin:0 auto 1.1rem;
  background:var(--gold); opacity:.32;
  -webkit-mask:url("images/mark.svg") center/contain no-repeat;
          mask:url("images/mark.svg") center/contain no-repeat;
}
.bline{ position:relative; }
.bline__name{ font-family:var(--font-display); font-size:.98rem; font-weight:420; }
.basket__total strong{ text-shadow:0 0 24px rgba(231,204,139,.28); }
.basket__foot{
  background:linear-gradient(0deg,var(--moss) 0%,transparent 100%);
}
.basket__send{ letter-spacing:.14em; }

/* ============================================================
   17. TYPE + CONTROL REFINEMENT
   ============================================================ */
.btn, .chip, .tier__add, .ritem__add, .msg__btn, .basket__clear, .plat__meta, .label{
  font-family:var(--font-body);
  font-feature-settings:"ss01" 1, "cv01" 1;
}
.btn{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  padding:1rem 1.7rem;
}
.btn--ghost{ font-weight:400; }
.chip{ font-size:.7rem; letter-spacing:.17em; text-transform:uppercase; font-weight:450; }
.ritem__add, .tier__add{ font-weight:500; }
.label{ font-weight:500; }
.hero__eyebrow{ font-weight:450; }
.card3d__tag, .ritem__unit, .tier__for{ font-weight:500; }
.stat strong, .ritem__price, .tier__price, .basket__total strong{ font-variant-numeric:tabular-nums lining-nums; }

/* ============================================================
   18. SILK — animated WebGL backdrop for plain areas
   Sits behind content; falls back to a brand gradient when
   WebGL is unavailable or motion is reduced.
   ============================================================ */
.bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(120% 100% at 20% 0%, #1A382D 0%, transparent 60%),
    linear-gradient(160deg, #14291F 0%, var(--ink) 100%);
}
.bg__canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity 1.1s var(--ease-out);
}
.silk--live .bg__canvas{ opacity:.85; }
/* keep the brand's warmth over the shader and stop it fighting the type */
.bg--silk::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(90% 70% at 50% 50%, transparent 0%, rgba(10,21,18,.55) 100%),
    linear-gradient(180deg, rgba(10,21,18,.5) 0%, transparent 30%, transparent 70%, rgba(10,21,18,.6) 100%);
}
.has-bg{ position:relative; isolation:isolate; }
/* Scope carefully: a blanket `> *` rule here would override position:absolute
   on the decorative watermarks and drop them into the flex flow (that bug
   pushed the Delicacies title off-screen). Only real content gets promoted. */
.has-bg > .wrap{ position:relative; z-index:1; }
.has-bg > .orn,
.has-bg > .menu-hero__word,
.has-bg > .shop-hero__word{ z-index:1; }
.has-silk > .bg{ z-index:0; }

/* the visit CTA and shop hero read much better with movement behind them */
.visit.has-bg{ background:transparent; }
.shop-hero.has-bg{ background:transparent; }
.menu-hero.has-bg{ background:transparent; }

/* watermarks are decorative overlays — never flex items */
.menu-hero__word, .shop-hero__word{ position:absolute !important; }
.menu-hero__word{
  right:-1vw; bottom:-3vh;
  font-size:clamp(5rem,17vw,15rem);
  -webkit-text-stroke:1px rgba(198,161,91,.2);
  max-width:none;
}
@media (max-width:820px){
  .menu-hero__word, .shop-hero__word{ font-size:clamp(4rem,22vw,9rem); bottom:-2vh; }
}

/* .menu-hero is a flex container, so its .wrap must be told to fill —
   otherwise it shrink-wraps to the text and drifts to the centre. */
.menu-hero > .wrap{ width:100%; flex:1 1 100%; }

/* chat proportions: give the transcript room, keep chips compact */
.chat{ max-height:min(660px, calc(100dvh - 175px)); }
.chat__log{ min-height:190px; }
.chat__chips{ max-height:104px; }
@media (max-width:520px){ .chat__chips{ max-height:120px; } }

/* ============================================================
   19. PANTRY FRAMING
   The home retail block is a standing shop, not a festival
   campaign — the Sadya box is flagged as the seasonal item
   inside it rather than defining the whole section.
   ============================================================ */
.sadya__ribbon{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.42rem .8rem .42rem .5rem;
}
.sadya__ribbon i{
  font-style:normal;
  background:var(--gold); color:var(--ink);
  font-size:.5rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.28rem .45rem; border-radius:2px; line-height:1;
}
.sadya__title{ text-wrap:balance; }
.retail__sub i{ white-space:nowrap; }

/* ============================================================
   20. SPOTLIGHT CARDS
   One reusable interaction for every card family: a soft light
   that tracks the cursor, a hairline that warms on approach,
   and a restrained lift. Pointer devices only — touch gets the
   static state so nothing sticks after a tap.
   ============================================================ */
.sc{ position:relative; isolation:isolate; }
/* z-index:-1 inside an isolated context paints the glow ABOVE the card's own
   background but BELOW all content — so we never have to touch the children.
   (A `.sc > *{position:relative}` rule would override position:absolute on
   things like the price badge and drop them into normal flow.) */
.sc::after{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .45s var(--ease-out);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             rgba(198,161,91,.16), transparent 62%);
}
@media (hover:hover) and (pointer:fine){
  .sc:hover::after{ opacity:1; }
}
.zone-light .sc::after{
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
             rgba(168,67,31,.09), transparent 62%);
}

/* ============================================================
   21. AMENITIES — "Made for gatherings"
   Was a flat strip with hairline dividers and no life. Now real
   cards: numbered, spotlit, with the icon drawing itself in.
   ============================================================ */
.amenities{ position:relative; }
.amen-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1rem; border:0;
}
.amen{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(10,21,18,.09);
  border-radius:6px;
  padding:2rem 1.6rem 1.9rem;
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:transform .55s var(--ease-out),
             border-color .45s var(--ease-out),
             box-shadow .55s var(--ease-out),
             background .45s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .amen:hover{
    transform:translateY(-6px);
    border-color:rgba(168,67,31,.4);
    background:#fff;
    box-shadow:0 26px 44px -26px rgba(10,21,18,.4);
  }
}
.amen__n{
  position:absolute; top:1.1rem; right:1.2rem; z-index:2;
  font-family:var(--font-display); font-size:.82rem;
  color:rgba(10,21,18,.22); letter-spacing:.06em;
  transition:color .45s var(--ease-out);
}
.amen:hover .amen__n{ color:var(--chili); }

.amen__ico{
  width:46px; height:46px; display:grid; place-items:center;
  border:1px solid rgba(168,67,31,.28); border-radius:8px;
  margin-bottom:1.5rem;
  transition:background .45s var(--ease-out), border-color .45s var(--ease-out), transform .55s var(--ease-out);
}
.amen:hover .amen__ico{ background:rgba(168,67,31,.08); border-color:rgba(168,67,31,.55); transform:rotate(-4deg) scale(1.06); }
.amen__ico svg{ width:23px; height:23px; stroke:var(--chili); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.amen__ico svg circle.nodraw{ fill:var(--chili); stroke:none; }

/* icons draw themselves when the row scrolls in */
[data-icons] svg :not(.nodraw){
  stroke-dasharray:var(--len,120); stroke-dashoffset:var(--len,120);
}
[data-icons].is-in svg :not(.nodraw){
  animation:icoDraw 1.1s var(--ease-out) forwards;
  animation-delay:calc(var(--d,0) * 90ms + 120ms);
}
[data-icons] svg circle.nodraw{ opacity:0; }
[data-icons].is-in svg circle.nodraw{ animation:icoDot .4s var(--ease-out) forwards; animation-delay:calc(var(--d,0) * 90ms + 800ms); }
@keyframes icoDraw{ to{ stroke-dashoffset:0; } }
@keyframes icoDot{ to{ opacity:1; } }

.amen h3{ font-size:1.16rem; margin-bottom:.5rem; letter-spacing:.005em; }
.amen p{ font-size:.86rem; line-height:1.62; color:rgba(10,21,18,.62); font-weight:300; }
@media (max-width:960px){ .amen-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .amen-grid{ grid-template-columns:1fr; } .amen{ padding:1.6rem 1.4rem; } }

/* ============================================================
   22. TYPE + RHYTHM POLISH
   ============================================================ */
h1,h2,h3,.display{ letter-spacing:-.012em; text-wrap:balance; }
.title{ line-height:.98; }
.lede{ font-size:1.06rem; line-height:1.72; text-wrap:pretty; max-width:58ch; }
.label{
  font-size:.63rem; letter-spacing:.32em;
}
.sig-head .title, .retail__head .title{ margin-bottom:0; }

/* section seams: a hairline that fades from the centre */
.section + .section::before{
  content:""; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(198,161,91,.16),transparent);
}
.zone-light + .section::before, .section + .zone-light::before{ display:none; }

/* card families: unified easing + hairline warmth */
.plat, .ritem, .how, .voice, .card3d{
  transition:transform .5s var(--ease-out), border-color .45s var(--ease-out),
             box-shadow .5s var(--ease-out), background .45s var(--ease-out);
}
.voice{ border-radius:6px; }
.voice p{ font-size:.96rem; line-height:1.7; }
.plat{ border-radius:6px; }
.ritem{ border-radius:7px; }
.card3d{ border-radius:7px; }
.how{ border-radius:7px; }

@media (prefers-reduced-motion:reduce){
  .sc::after{ display:none; }
  [data-icons] svg :not(.nodraw){ stroke-dashoffset:0; }
  [data-icons] svg circle.nodraw{ opacity:1; }
}

/* clear the legacy grid chrome — the cards carry their own surface now */
.amenities .amen-grid,
.amen-grid{ background:none !important; border:0 !important; }
.amenities .amen{ background:rgba(255,255,255,.55); }
.amenities .amen:hover{ background:#fff; }
.amenities .amen h3{ color:var(--ink-on-light, #0A1512); }
.amenities .amen p{ color:rgba(10,21,18,.62); }
.amenities .amen svg{ width:23px; height:23px; stroke:var(--chili); margin:0; }

/* ============================================================
   23. ONE BRAND TEXTURE PER SURFACE
   Six sections were stacking two or three of: the tiled monogram
   (.pattern), a rotating ornament (.orn) and the Silk shader
   (.has-silk). Layered together they read as noise and cancel
   each other out. Priority: shader > ornament > tile.
   ============================================================ */
.pattern.has-bg::before{ display:none; }          /* shader is the texture */
.pattern:has(> .orn)::before{ display:none; }       /* ornament is the texture */
.no-tile::before{ display:none !important; }        /* explicit escape hatch */

/* ============================================================
   24. THE ORNAMENT AS A KINETIC BRAND SEAL
   Bigger, warmer and actually legible as motion. The motif has
   4-fold symmetry, so a 34s rotation reads as a fresh position
   every ~8.5s — present, never busy. A counter-rotating monogram
   sits inside it for depth.
   ============================================================ */
.orn{
  width:clamp(190px,21vw,340px);
  opacity:.13;
  animation-duration:34s;
  color:var(--gold);
}
.orn::before{
  content:""; position:absolute; inset:31%;
  background:var(--gold-hi);
  -webkit-mask:url("images/mark.svg") center/contain no-repeat;
          mask:url("images/mark.svg") center/contain no-repeat;
  opacity:.5;
  animation:ornSpin 26s linear infinite reverse;
}
.orn--rev::before{ animation-direction:normal; }

/* framing seals on the CTA — pushed outboard and faded toward the
   centre so they never fight the headline */
.orn--vl, .orn--vr{
  width:clamp(230px,27vw,430px);
  opacity:.17;
  margin-top:calc(clamp(230px,27vw,430px) / -2);
}
.orn--vl{ left:clamp(-90px,-4vw,-30px); }
.orn--vr{ right:clamp(-90px,-4vw,-30px); }
.orn--vl{ -webkit-mask-image:linear-gradient(90deg,#000 35%,transparent 92%);
                  mask-image:linear-gradient(90deg,#000 35%,transparent 92%); }
.orn--vr{ -webkit-mask-image:linear-gradient(270deg,#000 35%,transparent 92%);
                  mask-image:linear-gradient(270deg,#000 35%,transparent 92%); }
/* the mask above clips the child, so give the inner mark its own life */
.orn--vl::before, .orn--vr::before{ opacity:.42; }

/* corner seals bleed off the edge rather than floating mid-panel */
.orn--tr{ top:-14%; right:-7%; opacity:.15; }
.orn--bl{ bottom:-16%; left:-8%; opacity:.14; }
.orn--foot{
  right:-5%; top:-32%;
  width:clamp(220px,24vw,380px);
  opacity:.09; animation-duration:52s;
}

/* loader seal: the one place it should be unmistakable */
.loader__orn{
  width:min(470px,78vw);
  margin:calc(min(470px,78vw)/-2) 0 0 calc(min(470px,78vw)/-2);
  opacity:.14;
  animation-duration:30s;
}
.loader__orn::before{ display:none; }   /* the real monogram already sits here */

/* the two panels that use the ornament as wallpaper need it quieter
   than a section seal, or the content sitting on top gets busy */
.chat__log{ background-size:210px; background-position:center 34%; }
.basket__body{ background-size:240px; }

@media (max-width:820px){
  .orn{ width:clamp(150px,34vw,230px); opacity:.1; }
  .orn--tr{ top:-9%; right:-12%; }
  .orn--bl{ bottom:-9%; left:-14%; }
}
@media (prefers-reduced-motion:reduce){
  .orn::before{ animation:none; }
}

/* seals dialled up now that nothing competes with them */
.orn--vl, .orn--vr{ opacity:.23; }
.orn--vl{ -webkit-mask-image:linear-gradient(90deg,#000 52%,transparent 96%);
                  mask-image:linear-gradient(90deg,#000 52%,transparent 96%); }
.orn--vr{ -webkit-mask-image:linear-gradient(270deg,#000 52%,transparent 96%);
                  mask-image:linear-gradient(270deg,#000 52%,transparent 96%); }
.orn--tr{ opacity:.19; }
.orn--bl{ opacity:.18; }
.orn--foot{ opacity:.12; }
.orn::before{ opacity:.55; }

/* The tile ships in two forms — a ::before layer AND a background-image on
   the element itself (two generations of the same idea). Suppress both. */
.pattern.has-bg,
.pattern:has(> .orn),
.no-tile{ background-image:none !important; }

/* ============================================================
   25. REAL PLATFORM LOGOS
   The hand-drawn approximations are gone — each platform now
   ships its own artwork on its own brand plate.
   ============================================================ */

/* order strip: full-bleed brand plates */
.pplat{ background:none; padding:0; overflow:hidden; }
.pplat img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:inherit;
}
/* the plate colour now comes from the artwork, so drop the tinted cards */
.pplat--talabat, .pplat--noon, .pplat--zomato, .pplat--eazy{ background:none; }
.pplat--wa{ background:#25D366; }          /* action button, not a listing */
.pplat:hover img{ transform:none; }

/* platform grid chips */
.plat__logo--img{
  padding:0; overflow:hidden; background:none !important;
  border-radius:13px;
}
.plat__logo--img img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Google's plate is white — give it a hairline so it doesn't float on cream */
.zone-light .plat__logo--img{ box-shadow:inset 0 0 0 1px rgba(10,21,18,.1); }
.plat__logo--img{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); }

/* contain, never cover — a tall mark like talabat's "t" was getting
   clipped by the card's wider aspect. The plate colour is set on the
   card so the artwork can letterbox into it invisibly. */
.pplat img{ object-fit:contain; }
.pplat--talabat{ background:#FF5900; }
.pplat--noon{     background:#F1DE0A; }
.pplat--zomato{   background:#DE3843; }
.pplat--eazy{     background:#FA4616; }

/* ============================================================
   26. AURORA — atmospheric field for the flat sections
   Silk is a woven texture that wants to fill a hero; Aurora is a
   soft light wash for panels that were reading as dead space
   (platform grid, reviews, the chef timeline).
   ============================================================ */
.bg--aurora{
  /* no gradient fallback tint here — these sections already have
     their own surface colour and Aurora only adds light on top */
  background:none;
}
.bg--aurora .bg__canvas{ opacity:0; transition:opacity 1.4s var(--ease-out); }
.bg--live.bg--aurora .bg__canvas{ opacity:.72; }
/* a light touch only — enough to stop type sitting in a hot band,
   not so much that the wash disappears (the first pass killed it) */
.bg--aurora::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 55%, rgba(10,21,18,.42) 0%, transparent 70%),
    linear-gradient(180deg, rgba(10,21,18,.55) 0%, transparent 26%,
                    transparent 74%, rgba(10,21,18,.5) 100%);
}
.platforms.has-bg, .voices.has-bg, .timeline.has-bg{ position:relative; isolation:isolate; }
.platforms.has-bg > .wrap, .voices.has-bg > .wrap, .timeline.has-bg > .wrap{ position:relative; z-index:1; }
/* .voices has two .wrap children plus a rail — promote everything but the bg */
.voices.has-bg > *:not(.bg){ position:relative; z-index:1; }
.timeline.has-bg > *:not(.bg){ position:relative; z-index:1; }

@media (max-width:820px){
  .bg--live.bg--aurora .bg__canvas{ opacity:.5; }
}

/* ============================================================
   27. FIX PASS — stacking, motion policy, cursor safety
   ============================================================ */

/* --- 27a. shader backdrops must never paint over content ---
   `.bg` sat at z-index:0, which paints ABOVE static block children.
   On the chef hero that buried the photo, label and bio (only the
   h1 survived, because will-change gave it its own layer).
   z-index:-1 inside an isolated context paints above the section's
   own background and below EVERY child, positioned or not. */
.has-bg{ position:relative; isolation:isolate; }
.has-bg > .bg, .bg{ z-index:-1; }

/* --- 27b. motion policy ---
   The blanket `*{animation-duration:.001ms}` killed the brand's
   signature loops for anyone with Reduce Motion switched on.
   Reveals and parallax still stand down; the identity keeps living. */
@media (prefers-reduced-motion:reduce){
  .marquee__track,
  .orn, .orn::before,
  .cursor, .cursor .cup-steam,
  .chat__dot, .msg--typing i{
    animation-duration:revert !important;
    animation-iteration-count:infinite !important;
  }
  .marquee__track{ animation-duration:var(--dur,60s) !important; }
  .orn{ animation-duration:34s !important; }
  .orn::before{ animation-duration:26s !important; }
}

/* --- 27c. never leave the visitor without a cursor ---
   `cursor:none` used to apply unconditionally while the custom
   teacup was hidden until JS ran — with Reduce Motion on, JS never
   ran and the pointer vanished entirely. Now the native cursor is
   only hidden once the teacup is confirmed live. */
@media (hover:hover) and (min-width:821px){
  html, body, a, button, .card3d, .chip{ cursor:auto; }
  html.cursor-on, html.cursor-on body,
  html.cursor-on a, html.cursor-on button,
  html.cursor-on .card3d, html.cursor-on .chip{ cursor:none; }
}
.cursor{ transition:opacity .25s var(--ease-out); }

/* --- 27d. marquee rails: CSS-driven infinite loop --- */
.marquee__track{
  animation:marqueeRun var(--dur,60s) linear infinite;
  will-change:transform;
}
@keyframes marqueeRun{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(var(--shift,-50%),0,0); }
}
/* pausing on hover lets people actually read a dish name */
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* --- 27e. reviews as a looping rail ---
   Was a scroll-scrubbed track, which left the last card clipped at
   the bottom of the page. Now it loops like the other rails. */
.marquee--voices{ padding-block:0; background:none; border:0; }
.marquee--voices::before, .marquee--voices::after{
  width:clamp(30px,6vw,90px);
}
.marquee--voices::before{ background:linear-gradient(90deg,var(--ink),transparent); }
.marquee--voices::after { background:linear-gradient(270deg,var(--ink),transparent); }
.voices__rail.marquee__track{ gap:1.1rem; align-items:stretch; }
/* the generic rail typography must not reach inside a review card */
.marquee--voices .marquee__track span{
  display:inline !important; padding-right:0; white-space:normal;
  font-family:inherit; font-size:inherit; color:inherit;
}
.marquee--voices .voice__stars{
  display:block !important; color:var(--gold); letter-spacing:.25em; font-size:.8rem;
}
.marquee--voices .voice{
  flex:0 0 clamp(280px,26vw,360px);
  white-space:normal;
}
.marquee--voices .voice footer i{ display:grid !important; }
@media (max-width:640px){
  .marquee--voices .voice{ flex-basis:82vw; }
}

/* --- 27f. the chai cup --- */
.cursor{
  width:36px; height:36px; margin:-18px 0 0 -18px;
  color:#F6EFDC;
  filter:drop-shadow(0 0 6px rgba(198,161,91,.45)) drop-shadow(0 2px 5px rgba(0,0,0,.5));
}
.cursor svg{ width:100%; height:100%; display:block; overflow:visible; }
.cursor svg path, .cursor svg ellipse{
  stroke:currentColor; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}
.cursor--hover{ width:36px; height:36px; }
.cursor--hover svg{ transform:scale(1.34) rotate(-8deg); }
.cursor--hover{ color:var(--gold-hi); }
.cursor .cup-steam{
  stroke-dasharray:26; animation:steamFlow 2.4s linear infinite;
  opacity:.85;
}
.cursor .cup-steam:last-of-type{ animation-delay:-1.1s; }
@media (prefers-reduced-motion:reduce){
  .cursor .cup-steam{ animation:none; opacity:.7; }
}

/* --- 27g. anchor targets clear the sticky header + chip rail --- */
.menu-section[id], .shop-grid, #retail, #story, #voices, #platforms, #signatures{
  scroll-margin-top:calc(var(--stick, 132px));
}
:root{ --stick:132px; }
@media (max-width:820px){ :root{ --stick:112px; } }

/* --- 27h. platform logos sit dead-centre in their plate ---
   The chip is 54px and the artwork was baseline-drifting a few px low
   against the two-line labels beside it. */
.plat{ align-items:center; }
.plat__logo, .plat__logo--img{
  align-self:center; display:grid; place-items:center; flex:none;
}
.plat__logo--img img{ object-position:center center; }
.pplat{ display:grid; place-items:center; }
.pplat img{ object-position:center center; margin:0; }
.plat > span:not(.plat__logo):not(.plat__go){ align-self:center; }

/* --- 27i. chat: the question list must stay easy to see and reach ---
   The strip was 104px tall and scrolled away behind the transcript
   once a conversation started. */
.chat{ max-height:min(700px, calc(100dvh - 160px)); }
.chat__log{ min-height:150px; flex:1 1 auto; }
.chat__chips{
  flex:0 0 auto;
  max-height:196px;
  padding:.75rem 1rem .8rem;
  background:linear-gradient(180deg, rgba(18,38,30,.6), rgba(10,21,18,.9));
  border-top:1px solid var(--line);
  scrollbar-width:thin;
}
.chat__chips::-webkit-scrollbar{ width:5px; }
.chat__chips::-webkit-scrollbar-thumb{ background:rgba(198,161,91,.35); border-radius:3px; }
.chat__chip{
  font-size:.8rem; line-height:1.35;
  padding:.58rem .9rem; min-height:38px;
  display:inline-flex; align-items:center;
}
/* suggested next steps read first, the rest stay quietly available */
.chat__chip--lead{
  border-color:rgba(198,161,91,.55); color:var(--cream);
  background:rgba(198,161,91,.1);
}
.chat__chip--asked{ opacity:.42; }
.chat__chip--asked:hover{ opacity:.8; }
@media (max-width:520px){
  .chat{ max-height:min(76dvh, calc(100dvh - 150px)); }
  .chat__chips{ max-height:184px; }
  .chat__chip{ font-size:.82rem; min-height:42px; }
}

/* ============================================================
   28. PERFORMANCE PASS
   Measured: 19 promoted layers, 19 running animations and 7
   backdrop-filters on one page. Each backdrop-filter forces a
   readback of everything behind it every frame, and a full-viewport
   animated grain repaints the whole screen. Trimmed to what earns
   its keep.
   ============================================================ */

/* --- 28a. grain: was a 200%x200% fixed layer stepping every 1.5s,
   i.e. a full-viewport repaint. Static grain looks the same. --- */
.grain{
  inset:0; width:100%; height:100%;
  animation:none;
  opacity:.045;
  background-size:180px 180px;
}

/* --- 28b. backdrop-filter only where it actually reads --- */
.hero__rating{ backdrop-filter:none; background:rgba(10,21,18,.62); }
.card3d__price{ backdrop-filter:none; background:rgba(10,21,18,.82); }
.chat__top{ backdrop-filter:none; }

/* --- 28c. promote only what genuinely animates --- */
.orn, .orn::before, .bg__canvas, .story__media img, .chef__media img{ will-change:auto; }
.marquee__track{ will-change:transform; }        /* the one that must stay */

/* --- 28d. paint containment so a card hover can't invalidate the page --- */
.ritem, .card3d, .amen, .plat, .how, .voice{ contain:layout paint style; }
.section{ contain:layout style; }

/* --- 28e. reserve image space so decoding never shifts layout --- */
.ritem__media, .card3d__media, .sadya__media{ contain:paint; }
/* NOTE: content-visibility:auto on <img> was tried and removed — without an
   intrinsic size it makes the browser skip and re-layout images mid-scroll,
   which cost more frames than it saved. */

/* --- 28f. offscreen router views cost nothing --- */
.view--off{ content-visibility:hidden; }

/* --- 28g. snappier entrances: the shop grid was taking 0.7s per card
   with a 60ms cascade, so the last card landed nearly a second late --- */
.shop-grid .ritem{
  animation-duration:.45s;
  animation-delay:calc(var(--i,0) * 35ms);
}
.chat{ transition:opacity .26s var(--ease-out), transform .34s var(--ease-exp), visibility .26s; }
.basket{ transition:transform .42s var(--ease-exp); }
.basket-scrim{ transition:opacity .3s var(--ease-out); }
.msg{ animation-duration:.28s; }

/* --- 28h. reveals are CSS transitions now (see main.js) --- */
[data-reveal]{
  opacity:0;
  transition:opacity .62s var(--ease-out), transform .62s var(--ease-out), clip-path .7s var(--ease-out);
}
[data-reveal="up"]    { transform:translateY(34px); }
[data-reveal="left"]  { transform:translateX(-44px); }
[data-reveal="right"] { transform:translateX(44px); }
[data-reveal="scale"] { transform:scale(.94); }
/* NOTE: the rested state must NOT be inset(0). clip-path clips to the
   *border box*, and .title runs line-height:.98 — tighter than the ink
   of an italic serif — so inset(0) sliced the descenders off every g/y/p.
   Overshooting the box on all sides keeps the wipe but clips nothing. */
[data-reveal="clip"]  { opacity:1; clip-path:inset(-40% -40% 100% -40%); }
[data-reveal].is-shown{ opacity:1; transform:none; }
[data-reveal="clip"].is-shown{ clip-path:inset(-40% -40% -40% -40%); }

.stagger-item{
  opacity:0; transform:translateY(30px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
  transition-delay:calc(var(--si,0) * 55ms);
}
[data-stagger].is-shown .stagger-item{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  [data-reveal], .stagger-item{ opacity:1 !important; transform:none !important; clip-path:none !important; }
}

/* ============================================================
   29. STAT COUNTERS
   ============================================================ */
.stats{ position:relative; }
.stat{
  position:relative;
  padding-right:1.2rem;
}
.stat + .stat{ padding-left:1.6rem; }
.stat + .stat::before{
  content:""; position:absolute; left:0; top:.35em; bottom:.9rem;
  width:1px; background:linear-gradient(180deg,transparent,var(--line),transparent);
}
.stat strong{
  line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums lining-nums;   /* no width jitter while counting */
}
/* the number itself — must never inherit the label's small caps styling */
.stat strong [data-count]{
  display:inline-block;
  font:inherit; letter-spacing:inherit; text-transform:none;
  color:var(--gold-hi);
  margin:0;
}
.stat strong sup{
  font-size:.42em; color:var(--gold);
  align-self:flex-start; margin-top:.15em; line-height:1;
}

/* rise + settle as the number starts counting */
.stat strong{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.stat.is-counting strong{ opacity:1; transform:none; }
/* a soft gold bloom that fades as the count lands */
.stat strong [data-count]{
  text-shadow:0 0 0 rgba(231,204,139,0);
  transition:text-shadow .5s var(--ease-out);
}
.stat.is-counting strong [data-count]{ text-shadow:0 0 26px rgba(231,204,139,.32); }
.stat.is-done strong [data-count]{ text-shadow:0 0 14px rgba(231,204,139,.16); }

@media (max-width:820px){
  .stat + .stat{ padding-left:1rem; }
  .stat{ padding-right:.6rem; }
}
@media (prefers-reduced-motion:reduce){
  .stat strong{ opacity:1; transform:none; }
}

/* ============================================================
   30. ORDER STRIP — containment fix
   `.pplat{display:grid; place-items:center}` stopped the image
   stretching, so `height:100%` had no definite row to resolve
   against and the img fell back to its intrinsic ratio: a 90px
   image inside a 52px card. Logos spilled out and EazyDiner was
   scaled so far past the card it showed as a blank plate.
   max-width/max-height against a definite card height can't
   overflow, whatever the artwork's proportions.
   ============================================================ */
.pplat{
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:0;
  height:58px; flex:1 1 152px; min-width:132px;
}
.pplat img{
  width:auto; height:auto;
  max-width:100%; max-height:100%;
  object-fit:contain; display:block;
  border-radius:inherit;
}
/* the WhatsApp card is type, not artwork */
.pplat--wa .pplat__wm{ white-space:nowrap; }

@media (max-width:820px){
  .orderstrip__rail{ gap:.55rem; }
  .pplat{ height:54px; flex:1 1 calc(33.333% - .4rem); min-width:0; }
}
@media (max-width:520px){
  .pplat{ height:50px; flex:1 1 calc(50% - .3rem); }
}

/* ============================================================
   31. VERTICAL RHYTHM ON NARROW SCREENS
   12vh of section padding at both ends left ~240px of dead space
   between the order strip and the pantry heading on a tablet.
   ============================================================ */
@media (max-width:900px){
  .section{ padding-block:clamp(3.2rem,7vh,5rem); }
  .orderstrip{ padding-block:clamp(1.1rem,2.5vh,1.6rem); }
  .retail__head{ margin-bottom:clamp(1.8rem,4vh,2.6rem); }
  .title{ font-size:clamp(2.1rem,6.4vw,3.4rem); }
  .lede{ font-size:1rem; }
}

/* --- 30b. balanced rail rows ---
   flex-wrap let the two leftover cards grow to fill the last row, so
   EazyDiner ended up half again as wide as Talabat. An explicit grid
   keeps every card the same size on each breakpoint. */
.orderstrip__rail{
  display:grid; grid-template-columns:repeat(5,1fr); gap:.6rem;
  flex:1;
}
.pplat{ flex:none; min-width:0; width:auto; }

@media (max-width:900px){
  /* 6 columns lets 3 cards span 2 and the last 2 span 3 — even rows */
  .orderstrip__rail{ grid-template-columns:repeat(6,1fr); }
  .pplat{ grid-column:span 2; }
  .pplat:nth-child(4), .pplat:nth-child(5){ grid-column:span 3; }
}
@media (max-width:560px){
  .orderstrip__rail{ grid-template-columns:repeat(2,1fr); }
  /* must out-specify the nth-child spans set in the 900px block above,
     or cards 4 and 5 keep span 3 inside a 2-column grid */
  .pplat,
  .pplat:nth-child(4),
  .pplat:nth-child(5){ grid-column:span 1; }
  .orderstrip__rail .pplat:nth-child(5){ grid-column:span 2; }  /* WhatsApp gets the last row */
}

/* ============================================================
   32. CSS BACKSTOP
   Belt and braces for assets/failsafe.js. If scripts are blocked
   entirely, or the JS itself fails to parse, these keyframes still
   lift the overlay and reveal the content. The site must never be
   able to show a blank screen.
   ============================================================ */
@keyframes rasamFailsafeShow{
  to{ opacity:1; transform:none; clip-path:inset(-40% -40% -40% -40%); visibility:visible; }
}
@keyframes rasamFailsafeHide{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}
/* content appears even with zero JS */
[data-reveal]{ animation:rasamFailsafeShow .01s linear 5s forwards; }
.stagger-item{ animation:rasamFailsafeShow .01s linear 5.2s forwards; }
/* and the overlay always lifts */
.loader{ animation:rasamFailsafeHide .5s ease 5.4s forwards; }

@media (prefers-reduced-motion:reduce){
  [data-reveal], .stagger-item{ animation:none; }
}

/* ============================================================
   33. HERO WATERMARK INSET
   The word was anchored at right:-1vw, so its last letter sat
   outside the section and got clipped by overflow:hidden. It has
   plenty of room (871px inside a 1440px hero) — it just needed to
   be pulled inboard. The extra right padding gives the italic
   serif's overhang somewhere to go.
   ============================================================ */
.menu-hero__word,
.shop-hero__word{
  right:clamp(1.5rem, 3.5vw, 4.5rem);
  padding-right:.12em;
}

/* ============================================================
   34. HEADER BAR
   The nav was sitting straight on top of whatever scrolled behind
   it. Two layers now guarantee legibility:
     · a permanent top scrim, so even before the bar appears the
       logo and links always have something to sit on
     · a solid bar once past the hero
   ============================================================ */
.header-sentinel{
  position:absolute; top:0; left:0;
  width:1px; height:1px;
  pointer-events:none; opacity:0;
}

/* always-on scrim — invisible against the dark hero, essential over photos */
.header::before{
  content:""; position:absolute; inset:0 0 auto 0; height:180%;
  z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,14,11,.85) 0%, rgba(6,14,11,.45) 45%, transparent 100%);
  opacity:1; transition:opacity .4s var(--ease-out);
}
.header.is-scrolled::before{ opacity:0; }   /* the solid bar takes over */

/* the bar itself */
.header.is-scrolled{
  background:rgba(9,19,16,.92);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid rgba(198,161,91,.2);
  box-shadow:0 12px 34px -18px rgba(0,0,0,.9);
}
/* a hairline of brand gold along the bottom of the bar */
.header.is-scrolled::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(198,161,91,.55), transparent);
}
/* no backdrop-filter support: fall back to a fully opaque bar */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .header.is-scrolled{ background:#0A1512; }
}

/* ============================================================
   35. STAT COUNTERS — visible by default
   The figures used to start at opacity:0 and wait for JS to reveal
   them, so a script failure left four blank gaps above the labels.
   Now they are visible unless JS has explicitly said "I am going to
   animate this", which it only does right before observing.
   ============================================================ */
.stat strong{ opacity:1; transform:none; }
.stat.will-animate strong{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.stat.is-counting strong{ opacity:1; transform:none; }

/* failsafe: reveal even if the observer never fires */
@keyframes statFailsafe{ to{ opacity:1; transform:none; } }
.stat.will-animate strong{ animation:statFailsafe .01s linear 6.5s forwards; }

@media (prefers-reduced-motion:reduce){
  .stat.will-animate strong{ transition-duration:.25s; }
}

/* ============================================================
   36. LIGHTFALL — the chef hero
   Warm embers falling through the dark, which suits "the man
   behind the flame". Brand gold / cream / terracotta rather than
   the component's stock blue-purple, which would fight the palette.
   ============================================================ */
.bg--lightfall{
  background:
    radial-gradient(90% 70% at 62% 30%, #1C3B2F 0%, transparent 62%),
    linear-gradient(165deg, #12271F 0%, var(--ink) 100%);
}
.bg--lightfall .bg__canvas{ opacity:0; transition:opacity 1.3s var(--ease-out); }
.bg--live.bg--lightfall .bg__canvas{ opacity:.55; }
/* hold the type side darker so the streaks never wash out the name */
.bg--lightfall::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,21,18,.82) 0%, rgba(10,21,18,.45) 42%, transparent 70%),
    linear-gradient(180deg, rgba(10,21,18,.6) 0%, transparent 22%, transparent 76%, rgba(10,21,18,.75) 100%);
}
@media (max-width:820px){
  .bg--live.bg--lightfall .bg__canvas{ opacity:.42; }
  .bg--lightfall::after{
    background:linear-gradient(180deg, rgba(10,21,18,.72) 0%, rgba(10,21,18,.35) 40%, rgba(10,21,18,.85) 100%);
  }
}

/* the lightfall canvas renders below CSS size and is scaled up —
   smooth the upscale so it reads as soft light, not pixels */
.bg--lightfall .bg__canvas{ image-rendering:auto; filter:blur(.3px); }

/* ============================================================
   38. SMALL-TYPE LEGIBILITY FLOOR  (mobile audit, v22)
   ------------------------------------------------------------
   A device sweep at 320 / 390 / 430px found micro-labels
   rendering as small as 8.3px — fine on a 2x desktop mock,
   unreadable in the hand. Nothing in the UI now falls below
   ~11px on a phone. Letter-spacing eases off by roughly the
   same proportion so the extra size doesn't force new wraps.
   ============================================================ */
/* touch tablets get the same floor: an iPad is held at arm's length,
   not pressed to the nose, and 10px caps do not survive that. */
@media (max-width:820px), (hover:none){
  .label{ font-size:.72rem; letter-spacing:.24em; }
  .label::before{ width:26px; }

  .ritem__unit, .tier__for{ font-size:.7rem; letter-spacing:.13em; }
  .ritem__badge, .tier__badge{ font-size:.7rem; letter-spacing:.12em; padding:.34rem .58rem; }
  .ritem__add, .tier__add, .ritem__add--ghost{ font-size:.72rem; letter-spacing:.12em; }
  .size{ font-size:.74rem; }
  .card3d__tag{ font-size:.72rem; letter-spacing:.16em; }
  .hero__scroll{ font-size:.72rem; }
  .orderstrip__label{ font-size:.7rem; letter-spacing:.24em; }
  .bline__meta, .basket__total span, .basket__note{ font-size:.7rem; letter-spacing:.12em; }
  .chat__who em{ font-size:.7rem; }
  .footer__bottom{ font-size:.74rem; }
}

/* ============================================================
   39. TOUCH TARGETS ON LARGE TOUCH SCREENS
   ------------------------------------------------------------
   All touch sizing was keyed to (hover:none) OR max-width:820px.
   An iPad in landscape is ~1024-1366px wide and DOES report
   hover:none, so it picked the rules up — but the inline header
   nav, which is hidden below 960px, was never sized for fingers
   in the 961px-1366px band where it is both visible and touched.
   ============================================================ */
@media (hover:none) and (min-width:961px){
  .header__link{ min-height:44px; display:inline-flex; align-items:center;
                 padding-inline:.25rem; }
  .header__nav{ gap:clamp(1.2rem,2.4vw,2.2rem); }
  .btn{ min-height:46px; display:inline-flex; align-items:center; justify-content:center; }
  .footer__social a{ width:44px; height:44px; }
}
  /* the two remaining stragglers the sweep caught */
@media (max-width:820px), (hover:none){
  .sadya__ribbon i{ font-size:.7rem; letter-spacing:.12em; }
  .retail__sub i{ font-size:.7rem; letter-spacing:.1em; }
}

/* ---- tier badge: inline on phones ----------------------------------
   The badge is absolutely positioned, hanging over the card's top edge.
   That worked at 8px; once the legibility floor grew it, it collided
   with the "Serves 4" pill that goes full-width below 520px. On narrow
   screens it simply joins the grid flow instead — nothing to collide
   with, and the extra row costs less than the overlap did.
   -------------------------------------------------------------------- */
@media (max-width:520px){
  .tier{ row-gap:.45rem; }
  .tier__badge{
    position:static; grid-column:1/-1; justify-self:start;
    width:max-content; margin:0;
  }
  /* Add fell into the 1fr column and stretched half the card; park it
     under the price where the thumb already is. */
  .tier__add{ grid-column:2; justify-self:end; min-width:96px; justify-content:center; }
}

/* ---- menu watermark vs the veg legend (mobile) ----------------------
   On a phone the hero is short, so the outline word rides straight
   through the "Vegetarian / Non vegetarian" key. Dropping it lower and
   softening the stroke keeps it as texture instead of noise.
   -------------------------------------------------------------------- */
@media (max-width:820px){
  .menu-hero__word, .shop-hero__word{
    bottom:-5vh;
    -webkit-text-stroke-color:rgba(198,161,91,.13);
  }
}