/* Layout: dark earth hero with a stage of Deshaj packs → gold marquee → ivory/paper bands alternating with night bands; one 1240px column, 4-up card grids that fold to 2 and 1. Single committed brand look (not theme-switched). */
:root{
  color-scheme: light;
  --ivory:#FAF4E8; --paper:#F2E8D5; --sand:#E6D8BC; --line:#CDB78E;
  --earth:#3B2316; --night:#22140C; --deep:#170D07; --night-line:#4A301B; --night-soft:#2D1A0F;
  --gold:#E0AD52; --gold-deep:#9A6B1C; --gold-text:#7A5313;
  --wa:#1F8F4E;
  --muted:#5A3D2A; --cream:#F3E8D4; --cream-muted:#D9C7A3; --cream-dim:#BFAE90;
  --kumkum:#7A2E1F;
  --f-display:"Cinzel", "Times New Roman", Georgia, serif;
  --f-hindi:"Tiro Devanagari Hindi", "Mukta", "Noto Serif Devanagari", serif;
  --f-body:"Mukta", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.22,.61,.24,1);
  --r-lg: 24px;
  --intro: 1.7s;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ivory); color:var(--earth); font-family:var(--f-body); font-size:17px; line-height:1.6; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--night)}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display); font-weight:600; margin:0; text-wrap:balance; letter-spacing:.02em}
p{margin:0}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}
.wrap{max-width:1240px; margin:0 auto; padding-left:max(24px, env(safe-area-inset-left,0px)); padding-right:max(24px, env(safe-area-inset-right,0px))}
@media (max-width:560px){ .wrap{padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))} }
.hi{font-family:var(--f-hindi); font-weight:400; letter-spacing:0}
.eyebrow{display:flex; align-items:center; gap:14px; font-family:var(--f-hindi); font-size:21px; color:var(--gold-text)}
.eyebrow svg{flex:none}
.center{text-align:center; justify-content:center}
.section-head{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center}
.section-head h2{font-size:clamp(32px,3.6vw,48px); line-height:1.12}
.ornament{display:block}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 30px; border-radius:999px; font-size:14px; font-weight:600; letter-spacing:.14em; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .35s var(--ease), translate .45s var(--ease), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease)}
.btn svg{transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--gold{background:var(--gold); color:var(--night)}
.btn--gold:hover{background:#E0B55F; transform:translateY(-2px); box-shadow:0 10px 30px -10px rgba(212,162,76,.6)}
.btn--ghost-light{border-color:#A88A5C; color:var(--cream); background:transparent}
.btn--ghost-light:hover{border-color:var(--gold); color:var(--gold)}
.btn--dark{background:var(--earth); color:var(--ivory)}
.btn--dark:hover{background:var(--night); transform:translateY(-2px); box-shadow:0 12px 28px -12px rgba(36,22,16,.55)}
.btn--ghost-dark{border-color:var(--earth); color:var(--earth); background:transparent}
.btn--ghost-dark:hover{background:var(--earth); color:var(--ivory)}

/* Strip + header */
.strip{background:var(--earth); color:#E6D7BE; font-size:13.5px; letter-spacing:.06em; text-align:center; padding-block:9px}
.header{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:var(--night); color:var(--cream); transition:box-shadow .4s var(--ease), background-color .4s var(--ease)}
.header.scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.7); background:rgba(36,22,16,.97)}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:16px; border-bottom:1px solid var(--night-line)}
.header.scrolled .header-row{border-bottom-color:transparent}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--cream)}
.brand svg{width:54px; height:54px; flex:none; transition:transform .8s var(--ease)}
.brand:hover svg{transform:rotate(-12deg)}
.brand-en{font-family:var(--f-display); font-size:23px; font-weight:600; letter-spacing:.15em; line-height:1}
.brand-hi{font-family:var(--f-hindi); font-size:16px; line-height:1.3; color:var(--gold)}
.nav{display:flex; align-items:center; gap:34px}
.nav a{position:relative; color:#E6D7BE; text-decoration:none; font-size:13.5px; font-weight:500; letter-spacing:.16em; padding-block:12px}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:6px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease)}
.nav a:hover{color:var(--gold)}
.nav a:hover::after{transform:scaleX(1)}
.actions{display:flex; align-items:center; gap:10px}
.icon-btn{width:46px; height:46px; border-radius:999px; border:1px solid #6B4A22; background:transparent; color:var(--cream); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .3s, color .3s}
.icon-btn:hover{border-color:var(--gold); color:var(--gold)}
.cart-btn{display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:0 18px; border:1px solid var(--gold); border-radius:999px; background:transparent; color:var(--gold); font-size:13px; font-weight:600; letter-spacing:.14em; cursor:pointer; transition:background-color .3s, color .3s}
.cart-btn:hover{background:var(--gold); color:var(--night)}
.badge{min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--gold); color:var(--night); font-size:12px; font-weight:700; letter-spacing:0; display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums}
.cart-btn:hover .badge{background:var(--night); color:var(--gold)}
.badge.bump{animation:bump .6s var(--ease)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}
.menu-btn{display:none}
.mobile-nav{display:none}
@media (max-width:980px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .mobile-nav{display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease)}
  .mobile-nav > div{overflow:hidden}
  .mobile-nav.open{grid-template-rows:1fr}
  .mobile-nav a{display:block; padding:14px 0; border-bottom:1px solid var(--night-line); color:#E6D7BE; text-decoration:none; letter-spacing:.16em; font-size:14px}
  .cart-label{display:none}
}

/* Hero */
.hero{background:radial-gradient(900px 620px at 78% 42%, #3E2616 0%, rgba(62,38,22,0) 70%), radial-gradient(700px 500px at 0% 100%, #2B190E 0%, rgba(43,25,14,0) 70%), var(--night); color:var(--cream); position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; inset:auto 0 0; height:1px; background:linear-gradient(90deg, transparent, var(--gold-deep), transparent)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:56px; align-items:center; padding-block:72px 96px}
.hero-copy{display:flex; flex-direction:column; gap:26px; min-width:0}
.hero .eyebrow{color:var(--gold)}
.hero h1{font-size:clamp(42px,5.6vw,78px); line-height:1.06; color:var(--cream)}
.hero h1 .m{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em}
.hero h1 .w{display:inline-block; animation:wordUp 1.2s var(--ease) both; animation-delay:calc(var(--i) * 90ms + 150ms + var(--intro))}
.hero h1 .gold{color:var(--gold)}
@keyframes wordUp{from{transform:translateY(108%)} to{transform:none}}
.hero-lede{font-size:19px; line-height:1.7; color:var(--cream-muted); max-width:30em}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px}
.pillars{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--night-line); padding-top:24px; margin-top:12px}
.pillar{display:flex; flex-direction:column; gap:2px; padding-inline:18px; border-left:1px solid var(--night-line)}
.pillar:first-child{padding-left:0; border-left:none}
.pillar b{font-family:var(--f-display); font-weight:600; font-size:17px; color:var(--cream); letter-spacing:.03em}
.pillar span{font-family:var(--f-hindi); font-size:15px; color:var(--cream-dim)}
.load{animation:rise 1s var(--ease) both; animation-delay:calc(var(--d,0ms) + var(--intro))}
@keyframes rise{from{opacity:0; transform:translateY(28px)} to{opacity:1; transform:none}}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}

.stage{position:relative; width:100%; max-width:540px; aspect-ratio:1/1; margin-inline:auto; animation:fadeIn 1.4s var(--ease) both; animation-delay:calc(var(--intro) - 300ms)}
.halo{position:absolute; inset:0; width:100%; height:100%}
.halo .spin{transform-origin:240px 240px; animation:spin 90s linear infinite}
.halo .spin-rev{transform-origin:240px 240px; animation:spin 140s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.glow{position:absolute; left:20%; top:1%; width:60%; aspect-ratio:1/1; border-radius:50%; background:radial-gradient(circle, rgba(212,162,76,.22), rgba(212,162,76,0) 70%); animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.7; transform:scale(.96)} 50%{opacity:1; transform:scale(1.04)}}
.shelf{position:absolute; left:7%; right:7%; bottom:13%; display:flex; align-items:flex-end; justify-content:center; gap:1.5%}
.shelf .pk{display:block; animation:packIn 1.3s var(--ease) both; animation-delay:calc(var(--pd,0ms) + var(--intro))}
@keyframes packIn{from{opacity:0; transform:translateY(60px) scale(.9)} to{opacity:1; transform:none}}
.shelf .pk svg{display:block; width:100%; height:auto; animation:float 6s ease-in-out infinite; animation-delay:var(--fd,0s); filter:drop-shadow(0 18px 18px rgba(0,0,0,.35))}
.shelf .pk:hover svg{animation-play-state:paused}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
.plinth{position:absolute; left:10%; right:10%; bottom:10.5%; height:3.2%; border-radius:4px; background:var(--earth); border-top:1px solid #6B4A22; box-shadow:0 20px 40px -10px rgba(0,0,0,.6)}
.medal{position:absolute; top:13.2%; left:31.5%; width:37%; aspect-ratio:1/1; animation:medalIn 1.3s var(--ease) both; animation-delay:calc(.8s + var(--intro))}
@keyframes medalIn{from{opacity:0; transform:scale(.7) rotate(-20deg)} to{opacity:1; transform:none}}
.medal-ring{position:absolute; inset:0; width:100%; height:100%; animation:spin 40s linear infinite}
.medal-seal{position:absolute; left:15.5%; top:15.5%; width:69%; height:69%; filter:drop-shadow(0 0 22px rgba(212,162,76,.4)); animation:sealBreathe 5s ease-in-out infinite}
@keyframes sealBreathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.035)}}
.halo .rays{transform-origin:240px 150px; animation:spin 140s linear infinite}
.halo .arch-line{stroke-dasharray:1200; animation:archDraw 2.2s var(--ease) both; animation-delay:calc(var(--intro) - 200ms)}
@keyframes archDraw{from{stroke-dashoffset:1200}}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr); padding-block:48px 72px; gap:40px}
}
@media (max-width:520px){
  .pillars{grid-template-columns:minmax(0,1fr); gap:14px}
  .pillar{padding-inline:0; border-left:none}
  .hero-ctas .btn{flex:1 1 100%}
}

/* Marquee */
.marquee{background:var(--gold); color:var(--night); overflow:hidden; padding-block:18px; border-block:1px solid var(--gold-deep)}
.marquee-track{display:flex; width:max-content; animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-set{display:flex; align-items:center; gap:28px; padding-right:28px; font-family:var(--f-display); font-weight:700; font-size:19px; letter-spacing:.22em; white-space:nowrap}
.marquee-set .hi{font-size:22px; letter-spacing:.02em}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Categories */
.band{padding-block:108px}
.band--paper{background:var(--paper)}
.band--night{background:var(--night); color:var(--cream)}
.stack{display:flex; flex-direction:column; gap:56px}
.grid4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px}
@media (max-width:1040px){ .grid4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .grid4{grid-template-columns:minmax(0,1fr)} }
.cat{position:relative; display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--sand); border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:var(--earth); transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease)}
.cat:hover{transform:translateY(-8px); box-shadow:0 30px 50px -30px rgba(58,36,23,.45); border-color:var(--line)}
.cat-art{position:relative; background:var(--tint); padding:34px 22% 18px; display:flex; justify-content:center; overflow:hidden}
.cat-art::before{content:""; position:absolute; width:78%; aspect-ratio:1/1; left:11%; top:12%; border-radius:50%; border:1px dashed rgba(154,107,28,.35); transition:transform 1.2s var(--ease)}
.cat:hover .cat-art::before{transform:rotate(90deg) scale(1.06)}
.cat-art svg{position:relative; width:100%; max-width:170px; height:auto; transition:transform .7s var(--ease)}
.cat:hover .cat-art svg{transform:translateY(-8px) rotate(-3deg) scale(1.04)}
.cat-body{padding:24px 24px 28px; display:flex; flex-direction:column; gap:4px}
.cat-hi{font-family:var(--f-hindi); font-size:19px; color:var(--gold-text)}
.cat-en{font-family:var(--f-display); font-size:23px; font-weight:600}
.cat-desc{font-size:16px; color:var(--muted); line-height:1.55}
.more{margin-top:14px; display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.18em}
.more svg{transition:transform .4s var(--ease)}
.cat:hover .more svg{transform:translateX(6px)}

/* Products */
.prod-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px}
.prod-head .eyebrow{margin-bottom:10px}
.prod-head h2{font-size:clamp(32px,3.6vw,48px); line-height:1.12}
.tabs{display:flex; flex-wrap:wrap; gap:8px}
.tab{min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--earth); font-size:13px; font-weight:600; letter-spacing:.12em; cursor:pointer; transition:background-color .3s, color .3s, border-color .3s}
.tab:hover{border-color:var(--earth)}
.tab[aria-pressed="true"]{background:var(--earth); color:var(--ivory); border-color:var(--earth)}
.products{transition:opacity .3s var(--ease)}
.products.fading{opacity:0}
.prod{position:relative; display:flex; flex-direction:column; gap:16px; background:var(--ivory); border-radius:var(--r-lg); padding:12px 12px 20px; transition:transform .5s var(--ease), box-shadow .5s var(--ease); animation:rise .7s var(--ease) backwards; animation-delay:calc(var(--i,0) * 70ms)}
.prod:hover{transform:translateY(-6px); box-shadow:0 28px 46px -30px rgba(58,36,23,.5)}
.prod-art{position:relative; background:var(--tint); border-radius:16px; padding:30px 24% 14px; display:flex; justify-content:center; overflow:hidden}
.prod-art svg{width:100%; max-width:150px; height:auto; transition:transform .7s var(--ease)}
.prod:hover .prod-art svg{transform:translateY(-6px) scale(1.05)}
.tag{position:absolute; top:12px; left:12px; background:var(--night); color:var(--gold); font-size:11px; font-weight:600; letter-spacing:.16em; padding:5px 10px; border-radius:999px}
.prod-info{padding-inline:8px; display:flex; flex-direction:column; gap:2px}
.prod-en{font-family:var(--f-display); font-weight:600; font-size:20px}
.prod-hi{font-family:var(--f-hindi); font-size:16px; color:var(--gold-text)}
.prod-foot{padding-inline:8px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto}
.price{font-size:19px; font-weight:700; font-variant-numeric:tabular-nums}
.weight{font-size:14px; color:var(--muted)}
.add{min-height:46px; padding:0 18px; border:none; border-radius:999px; background:var(--earth); color:var(--ivory); font-size:12.5px; font-weight:700; letter-spacing:.14em; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:background-color .3s, transform .3s var(--ease)}
.add:hover{background:var(--night); transform:translateY(-2px)}
.add.done{background:var(--gold-deep)}

/* Process */
.steps{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px}
.steps::before{content:""; position:absolute; top:48px; left:12.5%; right:12.5%; height:1px; background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); transform-origin:left; z-index:0}
.steps.in::before{animation:draw 1.6s var(--ease) both}
@keyframes draw{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.step{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px}
.num{width:96px; height:96px; border-radius:50%; background:var(--paper); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--f-hindi); font-size:44px; color:var(--gold-deep); transition:background-color .5s, color .5s, transform .5s var(--ease)}
.step:hover .num{background:var(--earth); color:var(--gold); transform:scale(1.06)}
.step h3{font-size:20px; margin-top:6px}
.step p{font-size:16px; color:var(--muted); line-height:1.6; max-width:24ch}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:48px} .steps::before{display:none} }
@media (max-width:480px){ .steps{grid-template-columns:minmax(0,1fr)} }

/* Story */
.story{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; align-items:center}
@media (max-width:900px){ .story{grid-template-columns:minmax(0,1fr); gap:48px} }
.frame{border:1px solid #6B4A22; border-radius:32px; padding:14px; position:relative}
.frame-in{position:relative; min-height:480px; border-radius:22px; background:var(--earth); display:flex; align-items:center; justify-content:center; padding:32px; text-align:center; color:var(--cream-muted); font-size:15px; overflow:hidden}
.frame-in .ghost{position:absolute; font-family:var(--f-hindi); font-size:clamp(120px,16vw,220px); color:var(--night-soft); line-height:1; top:50%; left:50%; transform:translate(-50%,-50%); white-space:nowrap; pointer-events:none}
.frame-in span{position:relative}
.frame .corner{position:absolute; width:14px; height:14px; background:var(--gold); transform:rotate(45deg)}
.story-copy{display:flex; flex-direction:column; gap:22px; min-width:0}
.story-copy .eyebrow{color:var(--gold)}
.story-copy h2{font-size:clamp(32px,3.6vw,48px); line-height:1.12}
.story-copy p{font-size:18px; line-height:1.75; color:var(--cream-muted); max-width:34em}
.sign{display:flex; align-items:center; gap:16px; margin-top:8px}
.sign svg{width:58px; height:58px}
.sign b{display:block; font-family:var(--f-display); font-size:21px; font-weight:600}
.sign small{font-size:12.5px; letter-spacing:.18em; color:var(--cream-dim)}

/* CTA */
.cta-outer{max-width:1100px; margin:0 auto; border:1px solid var(--line); border-radius:34px; padding:10px}
.cta{border:1px solid var(--sand); border-radius:26px; background:var(--paper); padding:72px 28px; display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; position:relative; overflow:hidden}
.cta svg.cta-seal{width:96px; height:96px; transition:transform 1.2s var(--ease)}
.cta:hover svg.cta-seal{transform:rotate(30deg)}
.cta h2{font-size:clamp(30px,3.4vw,46px)}
.cta p{font-size:18px; color:var(--muted); max-width:34em}
.cta-btns{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}

/* Footer */
.footer{background:var(--deep); color:var(--cream); overflow:hidden}
.footer-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px 64px; padding-block:84px 48px}
.footer .brand svg{width:72px; height:72px}
.footer .brand-en{font-size:28px}
.fcol{display:flex; flex-direction:column; gap:2px; min-width:150px}
.fcol h4{margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.24em; color:var(--gold)}
.fcol a{color:var(--cream-muted); text-decoration:none; padding-block:6px; font-size:16px; transition:color .3s}
.fcol a:hover{color:var(--gold)}
.fcol div{color:var(--cream-muted); font-size:16px; padding-block:5px}
.giant{font-family:var(--f-display); font-weight:600; font-size:clamp(56px,15vw,220px); letter-spacing:.12em; line-height:.9; color:var(--night-soft); text-align:center; margin-right:-.12em; user-select:none; padding-bottom:12px}
.footer-bottom{border-top:1px solid var(--earth); padding-block:24px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:14px; color:var(--cream-dim)}

/* Reveal on scroll: content is visible at rest; the animation plays when a block enters view */
.reveal.in{animation:rise 1s var(--ease) backwards; animation-delay:var(--d,0ms)}
.reveal.in h2{animation:unveil 1.2s var(--ease) backwards; animation-delay:calc(var(--d,0ms) + 120ms)}
@keyframes unveil{from{clip-path:inset(0 0 100% 0); transform:translateY(45%)} to{clip-path:inset(0 0 -25% 0); transform:none}}
.reveal.in .ornament line{stroke-dasharray:100; animation:dash 1.4s var(--ease) backwards .35s}
@keyframes dash{from{stroke-dashoffset:100}}
.reveal.in .ornament rect{transform-box:fill-box; transform-origin:center; animation:pop .9s var(--ease) backwards .6s}
@keyframes pop{from{transform:rotate(45deg) scale(0)} to{transform:rotate(45deg) scale(1)}}

/* Intro: the seal draws in, then the curtain lifts */
.intro{position:fixed; inset:0; z-index:200; background:var(--night); display:flex; align-items:center; justify-content:center; animation:curtain 1s cubic-bezier(.76,0,.24,1) calc(var(--intro) - .55s) forwards}
@keyframes curtain{to{clip-path:inset(0 0 100% 0); visibility:hidden}}
.intro-in{display:flex; flex-direction:column; align-items:center; gap:18px}
.intro-mark{position:relative; width:128px; height:128px}
.intro-mark .ring{position:absolute; inset:-16px; width:calc(100% + 32px); height:calc(100% + 32px); transform:rotate(-90deg)}
.intro-mark .ring circle{fill:none; stroke:var(--gold); stroke-width:1.2; stroke-dasharray:440; stroke-dashoffset:440; animation:ringDraw 1.1s var(--ease) .1s forwards}
@keyframes ringDraw{to{stroke-dashoffset:0}}
.intro-mark .s{width:100%; height:100%; animation:sealIn 1s var(--ease) .15s both}
@keyframes sealIn{from{opacity:0; transform:scale(.6) rotate(-50deg)} to{opacity:1; transform:none}}
.intro-word{font-family:var(--f-display); font-weight:600; font-size:26px; color:var(--cream); animation:spread 1.1s var(--ease) .35s both}
@keyframes spread{from{opacity:0; letter-spacing:.7em} to{opacity:1; letter-spacing:.22em}}
.intro-hi{font-family:var(--f-hindi); font-size:18px; color:var(--gold); animation:rise .8s var(--ease) .6s both}

.progress{position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; height:2px; background:linear-gradient(90deg, var(--gold-deep), var(--gold)); transform-origin:left; transform:scaleX(0); z-index:70; pointer-events:none}

.dust{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.hero-grid{position:relative; z-index:1}

/* Hover sheen that follows the pointer */
.prod::after, .cat::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%), rgba(255,236,190,.38), transparent 45%); opacity:0; transition:opacity .45s var(--ease)}
.prod:hover::after, .cat:hover::after{opacity:1}
.tilting{transition:transform .18s ease-out, box-shadow .5s var(--ease) !important}

.num{position:relative}
.num::after{content:""; position:absolute; inset:-9px; border-radius:50%; border:1px dashed var(--gold-deep); opacity:0; transition:opacity .4s}
.step:hover .num::after{opacity:1; animation:spin 9s linear infinite}

.giant span{display:inline-block; transition:color .45s var(--ease), transform .55s var(--ease)}
.giant span:hover{color:var(--gold-deep); transform:translateY(-10px)}
.giant.in span{animation:rise 1.1s var(--ease) backwards; animation-delay:calc(var(--i) * 80ms)}

.flyer{filter:drop-shadow(0 16px 20px rgba(0,0,0,.35))}

/* WhatsApp */
.btn--wa{background:var(--wa); color:#fff}
.btn--wa:hover{background:#18763F; transform:translateY(-2px); box-shadow:0 12px 28px -12px rgba(31,143,78,.6)}
.wa-float{position:fixed; right:calc(22px + env(safe-area-inset-right,0px)); bottom:calc(22px + env(safe-area-inset-bottom,0px)); z-index:75; width:62px; height:62px; border-radius:50%; background:var(--wa); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px -10px rgba(0,0,0,.45); text-decoration:none; animation:rise .9s var(--ease) backwards; animation-delay:calc(var(--intro) + 1.4s); transition:transform .35s var(--ease)}
.wa-float::before{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa); animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{transform:scale(1); opacity:.7} 100%{transform:scale(1.6); opacity:0}}
.wa-float:hover{transform:scale(1.08)}
.wa-tip{position:absolute; right:74px; white-space:nowrap; background:var(--night); color:var(--cream); font-size:14px; padding:8px 14px; border-radius:999px; opacity:0; translate:8px 0; transition:opacity .3s, translate .3s var(--ease); pointer-events:none}
.wa-float:hover .wa-tip{opacity:1; translate:0 0}
@media (max-width:560px){ .wa-tip{display:none} .wa-float{width:56px; height:56px} }

/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:240px; gap:20px}
.ph{margin:0; position:relative; border-radius:22px; overflow:hidden; background:var(--ivory); border:1px dashed var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:20px; text-align:center; color:var(--muted); font-size:14.5px}
.ph svg{width:64px; height:64px; opacity:.55; transition:transform 1s var(--ease)}
.ph:hover svg{transform:rotate(30deg) scale(1.08)}
.ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.ph:hover img{transform:scale(1.06)}
.ph--big{grid-column:span 2; grid-row:span 2}
.ph--big svg{width:96px; height:96px}
@media (max-width:900px){ .gallery{grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:200px} }
@media (max-width:480px){ .gallery{grid-template-columns:minmax(0,1fr)} .ph--big{grid-column:auto; grid-row:span 1} }

/* Contact */
.contact{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:40px; align-items:start}
@media (max-width:900px){ .contact{grid-template-columns:minmax(0,1fr)} }
.contact-info{display:flex; flex-direction:column; gap:18px}
.cinfo{display:flex; gap:18px; align-items:flex-start; background:var(--ivory); border:1px solid var(--sand); border-radius:20px; padding:22px; transition:border-color .4s, transform .5s var(--ease)}
.cinfo:hover{border-color:var(--line); transform:translateX(6px)}
.cicon{flex:none; width:52px; height:52px; border-radius:50%; background:var(--night); color:var(--gold); display:flex; align-items:center; justify-content:center}
.cicon--wa{background:var(--wa); color:#fff}
.cbody{display:flex; flex-direction:column; gap:6px; min-width:0}
.clabel{font-size:12px; font-weight:700; letter-spacing:.22em; color:var(--gold-text)}
.cvalue{font-family:var(--f-display); font-weight:600; font-size:20px; font-style:normal; line-height:1.45; color:var(--earth); user-select:all}
address.cvalue{font-size:17px; user-select:text}
.crow{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.mini{display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--earth); font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; transition:background-color .3s, color .3s, border-color .3s}
.mini:hover{background:var(--earth); color:var(--ivory); border-color:var(--earth)}
.mini--wa{background:var(--wa); color:#fff; border-color:var(--wa)}
.mini--wa:hover{background:#18763F; border-color:#18763F}
.cform{background:var(--ivory); border:1px solid var(--sand); border-radius:24px; padding:32px; display:flex; flex-direction:column; gap:16px}
.cform h3{font-size:26px}
.cform-sub{color:var(--muted); margin-top:-8px}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px}
@media (max-width:520px){ .field-row{grid-template-columns:minmax(0,1fr)} .cform{padding:22px} }
.field label{font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--muted)}
.field input, .field select, .field textarea{font:inherit; font-size:16px; color:var(--earth); background:#fff; border:1px solid var(--sand); border-radius:12px; padding:12px 14px; min-height:48px; transition:border-color .3s, box-shadow .3s; width:100%}
.field textarea{resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--gold-deep); box-shadow:0 0 0 3px rgba(224,173,82,.25)}
.ferr{color:#9B2C1C; font-size:14px; font-weight:500}
.sendbox{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:14px 14px 14px 18px; animation:rise .5s var(--ease) both}
.sendbox-t{font-weight:600}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Product card: art is a quick-view button, size pills */
.prod-art{border:none; width:100%; cursor:pointer; font:inherit; color:inherit}
.qv-chip{position:absolute; left:50%; bottom:14px; translate:-50% 10px; opacity:0; background:var(--night); color:var(--cream); font-size:11.5px; font-weight:700; letter-spacing:.16em; padding:8px 14px; border-radius:999px; transition:opacity .35s, translate .35s var(--ease); white-space:nowrap}
.prod:hover .qv-chip, .prod-art:focus-visible .qv-chip{opacity:1; translate:-50% 0}
@media (hover:none){ .qv-chip{opacity:1; translate:-50% 0} }
.sizes{display:flex; flex-wrap:wrap; gap:6px; padding-inline:8px}
.size{min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--earth); font-size:13.5px; font-weight:600; cursor:pointer; font-variant-numeric:tabular-nums; transition:background-color .25s, color .25s, border-color .25s}
.size:hover{border-color:var(--earth)}
.size[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:var(--night)}

/* Quick view */
.qv{position:fixed; inset:0; z-index:110; display:flex; align-items:center; justify-content:center; padding:calc(env(safe-area-inset-top,0px) + 16px) max(16px, env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 16px) max(16px, env(safe-area-inset-left,0px)); visibility:hidden; pointer-events:none; transition:visibility 0s .55s}
.qv.open{visibility:visible; pointer-events:auto; transition:none}
.qv-scrim{position:absolute; inset:0; background:rgba(20,10,5,.62); opacity:0; transition:opacity .45s var(--ease)}
.qv.open .qv-scrim{opacity:1}
.qv-card{position:relative; width:min(960px,100%); max-height:100%; overflow:auto; background:var(--ivory); border-radius:28px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); opacity:0; transform:translateY(34px) scale(.97); transition:opacity .45s var(--ease), transform .6s var(--ease); box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.qv.open .qv-card{opacity:1; transform:none}
.qv-art{position:relative; background:var(--tint,#F1E2BC); display:flex; align-items:center; justify-content:center; padding:48px 16%; min-height:380px; overflow:hidden}
.qv-art .ring{position:absolute; width:84%; aspect-ratio:1/1; border-radius:50%; border:1px dashed rgba(154,107,28,.5); animation:spin 50s linear infinite}
.qv-art svg{position:relative; width:100%; max-width:250px; height:auto; filter:drop-shadow(0 24px 24px rgba(58,36,23,.25)); animation:float 6s ease-in-out infinite}
.qv-body{padding:44px 36px 36px; display:flex; flex-direction:column; gap:14px; min-width:0}
.qv-close{position:absolute; top:14px; right:14px; z-index:2; background:var(--ivory)}
.qv-tag{align-self:flex-start; background:var(--night); color:var(--gold); font-size:11px; font-weight:700; letter-spacing:.16em; padding:6px 12px; border-radius:999px}
.qv-en{font-size:clamp(28px,3vw,36px); line-height:1.1}
.qv-hi{font-family:var(--f-hindi); font-size:22px; color:var(--gold-text); margin-top:-6px}
.qv-desc{color:var(--muted); line-height:1.6}
.qv-block{display:flex; flex-direction:column; gap:6px}
.qv-label{font-size:12px; font-weight:700; letter-spacing:.2em; color:var(--gold-text)}
.qv-sizes{padding-inline:0}
.qv-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding-top:6px; border-top:1px solid var(--sand)}
.qv-price{font-size:26px; font-weight:700; font-variant-numeric:tabular-nums}
.qv-actions{display:flex; flex-wrap:wrap; gap:10px}
.qv-actions .btn{flex:1 1 180px}
.qty.big button{width:44px; height:46px}
@media (max-width:760px){ .qv-card{grid-template-columns:minmax(0,1fr)} .qv-art{min-height:250px; padding:30px 30%} .qv-body{padding:24px 20px} }

/* Search */
.search{position:fixed; inset:0; z-index:105; background:rgba(23,13,7,.97); color:var(--cream); padding:calc(env(safe-area-inset-top,0px) + 32px) max(20px, env(safe-area-inset-right,0px)) 32px max(20px, env(safe-area-inset-left,0px)); opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility 0s .4s; overflow:auto}
.search.open{opacity:1; visibility:visible; transition:opacity .4s var(--ease)}
.search-in{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:26px; transform:translateY(-24px); transition:transform .55s var(--ease)}
.search.open .search-in{transform:none}
.search-top{display:flex; align-items:center; gap:14px}
.search input{flex:1; min-width:0; background:transparent; border:none; border-bottom:1px solid var(--night-line); color:var(--cream); font-family:var(--f-display); font-size:clamp(22px,4vw,40px); padding:10px 0; outline:none; border-radius:0}
.search input:focus{border-bottom-color:var(--gold)}
.search input::placeholder{color:#8A7559}
.search .close{border-color:var(--night-line); color:var(--cream); background:transparent}
.search .close:hover{border-color:var(--gold); color:var(--gold)}
.sres{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
@media (max-width:560px){ .sres{grid-template-columns:minmax(0,1fr)} }
.sitem{display:flex; align-items:center; gap:14px; text-align:left; background:var(--night); border:1px solid var(--night-line); border-radius:16px; padding:10px 16px; color:var(--cream); cursor:pointer; font:inherit; transition:border-color .3s, transform .35s var(--ease)}
.sitem:hover{border-color:var(--gold); transform:translateY(-2px)}
.sitem svg{width:46px; height:58px; flex:none}
.sitem b{display:block; font-family:var(--f-display); font-weight:600; font-size:17px}
.sitem span{font-family:var(--f-hindi); color:var(--gold); font-size:15px}
.snone{color:var(--cream-dim)}

/* Mustard field */
.fieldband{position:relative; height:460px; overflow:hidden; background:linear-gradient(180deg, #22140C 0%, #4A2A14 42%, #A8662A 76%, #DDA243 100%); color:var(--cream)}
.field-sun{position:absolute; left:50%; bottom:60px; width:320px; height:320px; translate:-50% 0; border-radius:50%; background:radial-gradient(circle, #F8DB8A 0%, #EDB047 38%, rgba(237,176,71,0) 70%); animation:breathe 7s ease-in-out infinite}
.field-canvas{position:absolute; inset:0; width:100%; height:100%}
.field-copy{position:relative; z-index:1; padding-block:64px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center}
.field-copy h2{font-size:clamp(28px,3.4vw,46px); line-height:1.15; color:var(--cream); max-width:18em}
@media (max-width:560px){ .fieldband{height:400px} .field-sun{width:240px; height:240px} }

/* FAQ */
.faq{max-width:860px; width:100%; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.faq-item{background:var(--paper); border:1px solid var(--sand); border-radius:18px; transition:border-color .3s, background-color .3s}
.faq-item.open{border-color:var(--line); background:var(--ivory)}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; background:none; border:none; padding:20px 22px; font:inherit; font-family:var(--f-display); font-weight:600; font-size:18px; color:var(--earth); cursor:pointer; min-height:56px}
.faq-hi{display:block; font-family:var(--f-hindi); font-weight:400; font-size:15px; color:var(--gold-text); margin-top:2px}
.pm{flex:none; position:relative; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); color:var(--earth); transition:background-color .35s, color .35s, transform .5s var(--ease)}
.pm::before, .pm::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.6px; background:currentColor; translate:-50% -50%}
.pm::after{rotate:90deg; transition:rotate .45s var(--ease)}
.faq-item.open .pm{background:var(--earth); color:var(--gold); border-color:var(--earth); transform:rotate(180deg)}
.faq-item.open .pm::after{rotate:0deg}
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{padding:0 22px 22px; color:var(--muted); max-width:62ch}

/* Bilona scene */
.bilona-band{background:radial-gradient(900px 520px at 50% 25%, #3A2214 0%, rgba(58,34,20,0) 70%), var(--night); color:var(--cream)}
.bilona-band .eyebrow{color:var(--gold)}
.scene{border:1px solid #6B4A22; border-radius:32px; padding:10px}
.scene-in{border-radius:24px; overflow:hidden; background:#1A0E07}
.scene svg{display:block; width:100%; height:auto}
.steam path{animation:steam 3.6s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 100%; opacity:0}
.steam path:nth-child(2){animation-delay:1.2s}
.steam path:nth-child(3){animation-delay:2.4s}
@keyframes steam{0%{opacity:0; transform:translateY(20px) scaleY(.8)} 35%{opacity:.8} 100%{opacity:0; transform:translateY(-46px) scaleY(1.1)}}
.bsteps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media (max-width:900px){ .bsteps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .bsteps{grid-template-columns:minmax(0,1fr)} }
.bstep{display:flex; flex-direction:column; gap:4px; padding:20px 20px 22px; border:1px solid var(--night-line); border-radius:18px; transition:border-color .5s var(--ease), background-color .5s var(--ease), transform .5s var(--ease)}
.bstep.on{border-color:var(--gold); background:rgba(224,173,82,.08); transform:translateY(-4px)}
.bstep .bn{font-family:var(--f-hindi); font-size:30px; line-height:1.1; color:var(--gold)}
.bstep b{font-family:var(--f-display); font-weight:600; font-size:19px; margin-top:4px}
.bstep .bh{font-family:var(--f-hindi); font-size:16px; color:var(--gold)}
.bstep p{font-size:15.5px; line-height:1.55; color:var(--cream-muted); margin-top:4px}
@media (prefers-reduced-motion: reduce){ .steam path{opacity:.5} }


/* Film: gaay to ghee */
.film{border:1px solid #6B4A22; border-radius:32px; padding:10px}
.film-in{position:relative; border-radius:24px; overflow:hidden; background:#1A0E07}
.film svg#film{display:block; width:100%; height:auto}
.chap{opacity:0; transform-box:view-box; transform-origin:600px 280px; transition:opacity 1.1s var(--ease)}
.chap.on{opacity:1}
.film-dust{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.cap{position:absolute; left:0; right:0; top:0; display:flex; align-items:flex-start; gap:16px; padding:22px 26px 52px; background:linear-gradient(180deg, rgba(18,9,4,.82), rgba(18,9,4,0)); pointer-events:none}
.cap-n{font-family:var(--f-hindi); font-size:46px; line-height:1; color:var(--gold)}
.cap-hi{font-family:var(--f-hindi); font-size:clamp(22px,2.6vw,32px); line-height:1.25; color:var(--cream)}
.cap-en{font-size:clamp(14px,1.4vw,17px); line-height:1.5; color:var(--cream-muted); max-width:40ch}
.cap.swap .cap-n, .cap.swap .cap-hi, .cap.swap .cap-en{animation:capIn .8s var(--ease) both}
.cap.swap .cap-hi{animation-delay:.08s} .cap.swap .cap-en{animation-delay:.16s}
@keyframes capIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.film-play{position:absolute; right:16px; bottom:18px; width:46px; height:46px; border-radius:50%; border:1px solid rgba(224,173,82,.6); background:rgba(20,10,5,.65); color:var(--gold); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background-color .3s, color .3s}
.film-play:hover{background:var(--gold); color:var(--night)}
.film-bar{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(224,173,82,.15)}
.film-bar span{display:block; height:100%; background:var(--gold); transform-origin:left; transform:scaleX(0)}
.chips{display:grid; grid-template-columns:repeat(var(--n,6),minmax(0,1fr)); gap:10px}
@media (max-width:900px){ .chips{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:420px){ .chips{grid-template-columns:repeat(2,minmax(0,1fr))} }
.chip{position:relative; overflow:hidden; display:flex; flex-direction:column; gap:2px; text-align:left; padding:14px 14px 16px; border-radius:16px; border:1px solid var(--night-line); background:transparent; color:var(--cream); font:inherit; cursor:pointer; transition:border-color .4s, background-color .4s}
.chip:hover{border-color:#6B4A22}
.chip[aria-selected="true"]{border-color:var(--gold); background:rgba(224,173,82,.08)}
.chip .cn{font-family:var(--f-hindi); font-size:20px; line-height:1.1; color:var(--gold)}
.chip .chh{font-family:var(--f-hindi); font-size:17px; line-height:1.3}
.chip .ce{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-dim)}
.chip-fill{position:absolute; left:0; bottom:0; width:100%; height:3px; background:var(--gold); transform-origin:left; transform:scaleX(0)}
.film-cta{display:flex; justify-content:center}
@media (max-width:640px){ .cap{padding:12px 14px 30px; gap:10px} .cap-n{font-size:30px} .cap-en{display:none} .film-play{width:40px; height:40px; right:10px; bottom:10px} }


/* Header v2: centred seal, split navigation, slim ticker strip */
.strip{background:var(--earth); color:#E6D7BE; font-size:13px; letter-spacing:.06em; padding-block:0; border-bottom:1px solid rgba(224,173,82,.18)}
.strip-row{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; min-height:38px}
.strip-l, .strip-r{display:inline-flex; align-items:center; gap:8px; color:#E6D7BE; text-decoration:none; transition:color .3s}
.strip-l{justify-self:start; font-variant-numeric:tabular-nums}
.strip-l svg{color:var(--gold)}
.strip-r{justify-self:end; font-weight:600; color:var(--gold)}
.strip-l:hover, .strip-r:hover{color:#fff}
.strip-c{position:relative; height:20px; min-width:340px; text-align:center; overflow:hidden}
.tick{position:absolute; inset:0; white-space:nowrap; opacity:0; transform:translateY(100%); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.tick:first-child{font-family:var(--f-hindi); font-size:15px; letter-spacing:0}
.tick.on{opacity:1; transform:none}
.tick.out{opacity:0; transform:translateY(-100%)}
.header{background:var(--night); transition:background-color .5s var(--ease), box-shadow .5s var(--ease)}
.header.scrolled{background:rgba(30,17,10,.95); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 18px 40px -26px rgba(0,0,0,.9)}
.header-row{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding-block:18px; border-bottom:none; transition:padding .5s var(--ease)}
.header.scrolled .header-row{padding-block:9px}
.nav--l{justify-self:start; gap:30px}
.right{justify-self:end; display:flex; align-items:center; gap:30px}
.nav--r{gap:30px}
.brand--c{justify-self:center; gap:14px}
.brand--c svg{width:58px; height:58px; transition:width .5s var(--ease), height .5s var(--ease), transform .8s var(--ease)}
.header.scrolled .brand--c svg{width:44px; height:44px}
.brand-div{width:1px; height:38px; background:linear-gradient(180deg, transparent, rgba(224,173,82,.7), transparent)}
.brand-words{display:flex; flex-direction:column; gap:3px}
.brand--c .brand-en{font-size:25px; letter-spacing:.2em; margin-right:-.2em}
.header-orn{position:relative; height:1px; background:linear-gradient(90deg, transparent, rgba(224,173,82,.5) 30%, rgba(224,173,82,.5) 70%, transparent)}
.header-orn::after{content:""; position:absolute; left:50%; top:-4px; width:8px; height:8px; margin-left:-4px; background:var(--gold); transform:rotate(45deg); box-shadow:0 0 12px rgba(224,173,82,.7)}
.nav a.active{color:var(--gold)}
.nav a.active::after{transform:scaleX(1)}
@media (max-width:1180px){ .nav--l, .nav--r{gap:20px} .right{gap:18px} .nav a{font-size:12.5px; letter-spacing:.12em} }
@media (max-width:980px){
  .header-row{grid-template-columns:1fr auto}
  .nav--l, .nav--r{display:none}
  .brand--c{justify-self:start}
  .brand--c svg{width:48px; height:48px}
  .brand--c .brand-en{font-size:21px}
  .strip-row{grid-template-columns:1fr auto}
  .strip-c{display:none}
}
@media (max-width:420px){ .brand-div{display:none} .strip-r span{display:none} .strip{font-size:12px} }


/* Film tabs */
.ftabs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
@media (max-width:760px){ .ftabs{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ftab{display:flex; align-items:center; gap:12px; text-align:left; padding:10px 16px 10px 12px; min-height:64px; border-radius:18px; border:1px solid var(--night-line); background:rgba(255,255,255,.02); color:var(--cream); font:inherit; cursor:pointer; transition:border-color .35s, background-color .35s, transform .35s var(--ease)}
.ftab svg{width:34px; height:42px; flex:none; transition:transform .5s var(--ease)}
.ftab:hover{border-color:#6B4A22; transform:translateY(-2px)}
.ftab:hover svg{transform:rotate(-6deg) scale(1.06)}
.ftab[aria-selected="true"]{border-color:var(--gold); background:linear-gradient(135deg, rgba(224,173,82,.16), rgba(224,173,82,.04))}
.fth{display:block; font-family:var(--f-hindi); font-size:18px; line-height:1.2}
.fte{display:block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-dim)}
.ftab[aria-selected="true"] .fte{color:var(--gold)}


/* Founder showcase */
.founder{position:relative; width:100%; max-width:540px; margin-inline:auto; padding:10px 30px 46px}
.f-stage{position:relative; aspect-ratio:4/5; width:100%}
.f-arch{position:absolute; inset:0; width:100%; height:100%}
.fd-rays{transform-origin:200px 210px; animation:spin 90s linear infinite}
.f-glow{position:absolute; left:14%; right:14%; top:12%; aspect-ratio:1/1; border-radius:50%; background:radial-gradient(circle, rgba(242,190,96,.5), rgba(242,190,96,0) 68%); animation:breathe 6s ease-in-out infinite; pointer-events:none}
.f-ghost{position:absolute; top:30%; left:50%; transform:translate(-50%,-50%); font-family:var(--f-hindi); font-size:clamp(84px,11vw,150px); line-height:1; color:rgba(224,173,82,.08); white-space:nowrap; pointer-events:none}
.f-cut{position:absolute; left:50%; bottom:0; height:93%; width:auto; max-width:none; transform:translateX(-50%); filter:drop-shadow(0 0 14px rgba(242,190,110,.35)) drop-shadow(0 24px 26px rgba(0,0,0,.55))}
.founder.in .f-cut{animation:cutIn 1.4s var(--ease) backwards .2s}
@keyframes cutIn{from{opacity:0; transform:translate(-50%, 40px)} to{opacity:1; transform:translateX(-50%)}}
.f-plate{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 30px; border-radius:999px; background:rgba(22,12,6,.88); border:1px solid rgba(224,173,82,.7); box-shadow:0 18px 30px -16px rgba(0,0,0,.8); white-space:nowrap; z-index:3}
.f-name{font-family:var(--f-display); font-weight:600; font-size:22px; letter-spacing:.08em; color:var(--cream)}
.f-role{font-size:11.5px; letter-spacing:.24em; color:var(--gold)}
.pol{position:absolute; margin:0; width:clamp(104px,27%,150px); background:#F7F0E3; padding:7px 7px 28px; border-radius:4px; box-shadow:0 20px 34px -14px rgba(0,0,0,.7); z-index:2; transition:transform .6s var(--ease), z-index 0s; animation:polFloat 7s ease-in-out infinite}
.pol img{display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:2px}
.pol figcaption{position:absolute; left:0; right:0; bottom:5px; text-align:center; font-family:var(--f-hindi); font-size:14px; color:#3A2417}
.pol-1{left:0; top:20%; transform:rotate(-8deg)}
.pol-2{right:0; top:4%; transform:rotate(7deg); animation-delay:-2.3s}
.pol-3{right:2%; bottom:20%; transform:rotate(-5deg); animation-delay:-4.6s}
.pol:hover{transform:rotate(0deg) scale(1.08); z-index:5}
@keyframes polFloat{0%,100%{translate:0 0} 50%{translate:0 -9px}}
.f-avatar{width:58px; height:58px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); box-shadow:0 0 0 4px rgba(224,173,82,.15)}
@media (max-width:440px){ .actions{gap:6px} .icon-btn{width:40px; height:40px} .cart-btn{padding:0 12px; min-height:40px} .brand--c{gap:10px} .brand--c svg{width:40px; height:40px} .brand--c .brand-en{font-size:18px; letter-spacing:.14em} }
@media (max-width:520px){ .founder{padding:6px 10px 40px} .pol{width:30%; padding:5px 5px 22px} .pol figcaption{font-size:12px} .f-name{font-size:19px} }

/* Back to top */
.totop{position:fixed; right:calc(29px + env(safe-area-inset-right,0px)); bottom:calc(100px + env(safe-area-inset-bottom,0px)); z-index:74; width:48px; height:48px; border-radius:50%; border:none; background:var(--ivory); color:var(--earth); box-shadow:0 10px 24px -10px rgba(0,0,0,.45); cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; translate:0 14px; pointer-events:none; transition:opacity .4s, translate .4s var(--ease)}
.totop.show{opacity:1; translate:0 0; pointer-events:auto}
.tt-ring{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg)}
.tt-ring circle{fill:none; stroke:var(--gold-deep); stroke-width:2.5; stroke-dasharray:138.2; stroke-dashoffset:138.2}
@media (max-width:560px){ .totop{right:calc(26px + env(safe-area-inset-right,0px)); bottom:calc(90px + env(safe-area-inset-bottom,0px))} }

/* Cart drawer */
.scrim{position:fixed; inset:0; background:rgba(20,10,5,.5); opacity:0; pointer-events:none; transition:opacity .4s var(--ease); z-index:80}
.scrim.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(430px,100%); background:var(--ivory); z-index:90; transform:translateX(100%); transition:transform .55s var(--ease); display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top,0px) + 24px) max(24px, env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 24px) 24px; box-shadow:-30px 0 60px -30px rgba(0,0,0,.4)}
.drawer.open{transform:none}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--sand)}
.drawer-head h3{font-size:22px}
.close{width:44px; height:44px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--earth); display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.close:hover{border-color:var(--earth)}
.lines{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:14px; padding-block:18px}
.line{display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:14px; align-items:center; animation:rise .45s var(--ease) both}
.line-art{background:var(--tint); border-radius:12px; padding:8px 12px}
.line-art svg{width:100%; height:auto; display:block}
.line-name{font-family:var(--f-display); font-weight:600; font-size:16px; line-height:1.3}
.line-meta{font-size:13.5px; color:var(--muted)}
.qty{display:flex; align-items:center; border:1px solid var(--line); border-radius:999px}
.qty button{width:36px; height:40px; border:none; background:transparent; color:var(--earth); font-size:18px; cursor:pointer}
.qty span{min-width:22px; text-align:center; font-weight:600; font-variant-numeric:tabular-nums}
.empty{margin:auto; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; color:var(--muted)}
.empty svg{width:90px; height:90px}
.drawer-foot{border-top:1px solid var(--sand); padding-top:18px; display:flex; flex-direction:column; gap:12px}
.total{display:flex; justify-content:space-between; font-weight:600}
.note{font-size:13.5px; color:var(--muted)}
.drawer-foot .btn{width:100%}

.toast{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 24px); transform:translate(-50%, 140%); background:var(--night); color:var(--cream); padding:14px 22px; border-radius:999px; font-size:15px; display:flex; align-items:center; gap:10px; z-index:140; transition:transform .5s var(--ease); box-shadow:0 18px 40px -18px rgba(0,0,0,.6); max-width:calc(100% - 32px)}
.toast{visibility:hidden}
.toast.show{transform:translate(-50%,0); visibility:visible}
.toast svg{color:var(--gold); flex:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .intro, .dust{display:none !important}
  .wa-float::before{display:none}
}