:root{
  color-scheme:light;
  /* KreemiK brand tokens — Mishri / Gulab / Pista / Haldi / Neel.
     Baseline colors are deepened/saturated a notch beyond the "flat" hex a
     color-managed screen would otherwise show. */
  --gulab:#B6274E; --gulab-tint:#EB7588; --gulab-tone:#891834;
  --pista:#628965; --pista-tint:#A7C6AA;
  --mishri:#FBF3E4;
  --haldi:#D58F06; --haldi-tint:#F5BD5B;
  --neel:#243369; --neel-tint:#596CA5; --neel-deep:#162148;
  --ink:#243369;
  --body:rgba(36,51,105,.78);
  --ease:cubic-bezier(.22,.8,.24,1);
  --neel-bg:#1A2B68; --neel-bg-mid:#233777; --neel-bg-deep:#0D1A46;
}
@supports (color:color(display-p3 1 1 1)){
  @media (color-gamut:p3){
    :root{
      --gulab:color(display-p3 .675 .210 .328);
      --gulab-tone:color(display-p3 .512 .141 .224);
      --haldi:color(display-p3 .822 .591 .149);
      --neel:color(display-p3 .170 .220 .439);
      --neel-deep:color(display-p3 .119 .159 .327);
      --pista:color(display-p3 .446 .561 .439);
      --neel-bg:color(display-p3 .102 .159 .399);
      --neel-bg-mid:color(display-p3 .139 .206 .457);
      --neel-bg-deep:color(display-p3 .051 .095 .268);
    }
  }
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--mishri);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--gulab);color:var(--mishri)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--gulab);outline-offset:3px;border-radius:3px}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;line-height:1.06;letter-spacing:-.005em}
.serif{font-family:'Cormorant',serif;font-style:italic;font-weight:500}
.eyebrow{
  font-weight:700;font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gulab);display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:'';width:34px;height:2px;background:var(--haldi);border-radius:2px}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.12s}.rv-d2{transition-delay:.24s}.rv-d3{transition-delay:.36s}.rv-d4{transition-delay:.48s}

.skip{position:fixed;left:-999px;top:12px;z-index:300;background:var(--gulab);color:var(--mishri);padding:11px 20px;border-radius:100px;font-weight:600;font-size:.8rem}
.skip:focus{left:12px}

/* melt progress bar */
#melt{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--gulab),var(--haldi));z-index:200;border-radius:0 4px 4px 0}

/* ---------- nav (cream site: ink links at rest, glass pill on scroll) ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(22px,6vw,72px);
  transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease);
}
nav.scrolled{
  background:rgba(251,243,228,.85);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:13px clamp(22px,6vw,72px);
  box-shadow:0 1px 0 rgba(182,39,78,.18),inset 0 1px 0 rgba(255,255,255,.5);
}
.nav-logo{display:flex;align-items:center;gap:12px}
.nav-wordmark{height:27px;width:auto;display:block;transition:height .5s var(--ease)}
nav.scrolled .nav-wordmark{height:24px}
@media(max-width:560px){.nav-wordmark{height:23px}}
.nav-links{display:flex;gap:clamp(14px,2.2vw,32px);align-items:center}
.nav-links a{
  font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(36,51,105,.72);transition:color .3s;position:relative;padding:4px 0;
}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--haldi);border-radius:2px;transition:width .4s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--gulab)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{background:var(--gulab);color:var(--mishri) !important;padding:10px 24px !important;border-radius:100px;transition:background .35s,transform .35s !important}
.nav-cta:hover{background:var(--gulab-tone);transform:translateY(-1px)}
.nav-cta::after{display:none}
.burger{display:none;background:none;border:none;cursor:pointer;z-index:110}
.burger span{display:block;width:26px;height:2.5px;border-radius:3px;background:var(--gulab);margin:5.5px 0;transition:.4s var(--ease)}
@media(max-width:900px){
  .burger{display:block}
  .nav-links{
    position:fixed;inset:0;background:var(--mishri);
    flex-direction:column;justify-content:center;gap:32px;
    opacity:0;pointer-events:none;transition:opacity .45s var(--ease);
  }
  .nav-links.open{opacity:1;pointer-events:auto}
  .nav-links a{font-size:1.05rem}
  body.menu-locked{overflow:hidden}
  .burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

/* ---------- hero (index) ---------- */
.hero{
  min-height:100svh;position:relative;display:flex;flex-direction:column;
  justify-content:center;padding:130px clamp(22px,6vw,72px) 150px;overflow:hidden;
}
.hero-scoop{position:absolute;top:-22vw;right:-18vw;width:62vw;min-width:420px;pointer-events:none;will-change:transform}
.hero-scoop .disc{fill:var(--gulab)}
.hero-scoop .arc{fill:none;stroke:var(--haldi);stroke-width:3;stroke-dasharray:.5 22;stroke-linecap:round}
.hero-scoop .arc2{fill:none;stroke:var(--pista);stroke-width:2.5;stroke-dasharray:.5 26;stroke-linecap:round;opacity:.7}
.hero .eyebrow{animation:fadeUp 1s var(--ease) .15s both}
.hero h1{margin:26px 0 10px;animation:fadeUp 1.1s var(--ease) .35s both;position:relative;z-index:2}
.hero h1 .wm{width:clamp(300px,68vw,840px);height:auto;display:block}
.hero h1 .wm path{will-change:stroke-dashoffset}
.hero .tagline{
  font-size:clamp(1.6rem,3.6vw,2.8rem);color:var(--pista);
  animation:fadeUp 1.1s var(--ease) .55s both;position:relative;z-index:2;
}
.hero .lede{
  max-width:520px;margin-top:30px;color:var(--body);font-weight:400;
  font-size:clamp(.98rem,1.4vw,1.1rem);
  animation:fadeUp 1.1s var(--ease) .75s both;position:relative;z-index:2;
}
.hero-actions{display:flex;gap:14px;margin-top:42px;flex-wrap:wrap;animation:fadeUp 1.1s var(--ease) .95s both;position:relative;z-index:2}
.hero-foot{
  position:absolute;bottom:30px;left:clamp(22px,6vw,72px);
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(36,51,105,.5);
  animation:fadeUp 1s var(--ease) 1.3s both;
}
@media(max-width:700px){
  .hero-scoop{width:clamp(240px,58vw,330px);min-width:0;top:-110px;right:-85px}
}

/* ---------- inner page hero (cream) ---------- */
.page-hero{
  position:relative;overflow:hidden;
  padding:clamp(150px,20vh,200px) clamp(22px,6vw,72px) clamp(60px,8vw,90px);
}
.page-hero .eyebrow{animation:fadeUp 1s var(--ease) .1s both}
.page-hero h1{
  font-size:clamp(2.4rem,5.6vw,4.2rem);max-width:16ch;margin-top:22px;color:var(--ink);
  animation:fadeUp 1.1s var(--ease) .25s both;
}
.page-hero h1 em{font-style:normal;color:var(--gulab)}
.page-hero .lede{
  max-width:580px;margin-top:22px;color:var(--body);font-weight:400;
  font-size:clamp(.98rem,1.4vw,1.12rem);animation:fadeUp 1.1s var(--ease) .4s both;
}
.page-hero .hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;animation:fadeUp 1.1s var(--ease) .55s both}

/* ---------- buttons ---------- */
.btn{
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:.82rem;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  padding:17px 34px;border-radius:100px;transition:all .4s var(--ease);
  display:inline-block;border:2px solid transparent;
}
.btn:active{transform:scale(.96)}
.btn-gulab{background:var(--gulab);color:var(--mishri)}
.btn-gulab:hover{background:var(--gulab-tone);transform:translateY(-3px);box-shadow:0 16px 34px rgba(182,39,78,.3)}
.btn-line{border-color:var(--neel);color:var(--neel)}
.btn-line:hover{background:var(--neel);color:var(--mishri);transform:translateY(-3px)}
.btn-neel{background:var(--neel);color:var(--mishri)}
.btn-neel:hover{background:var(--neel-deep);transform:translateY(-3px);box-shadow:0 14px 30px rgba(36,51,105,.3)}
.btn-brass{background:var(--haldi);color:var(--neel-deep)}
.btn-brass:hover{background:var(--haldi-tint);transform:translateY(-3px);box-shadow:0 16px 34px rgba(213,143,6,.3)}
.btn-linecream{border-color:rgba(251,243,228,.4);color:var(--mishri)}
.btn-linecream:hover{border-color:var(--haldi-tint);color:var(--haldi-tint);transform:translateY(-3px)}
@keyframes fadeUp{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}

/* corner orbital arcs — shared brand device */
.corner-arc{position:absolute;pointer-events:none}
.corner-arc circle{fill:none;stroke-dasharray:.5 18;stroke-linecap:round;stroke-width:2.5}
.orbital{position:absolute;left:-220px;bottom:-220px;width:640px;height:640px;pointer-events:none;opacity:.6}
.orbital circle{fill:none;stroke:var(--gulab);stroke-dasharray:.5 18;stroke-linecap:round;stroke-width:2}
@keyframes ringspin{to{transform:rotate(360deg)}}
@keyframes ringspinrev{to{transform:rotate(-360deg)}}
.hero-scoop .arc,.hero-scoop .arc2,.corner-arc circle,.orbital circle{transform-box:fill-box;transform-origin:center;will-change:transform}
.hero-scoop .arc{animation:ringspin 34s linear infinite}
.hero-scoop .arc2{animation:ringspinrev 48s linear infinite}
.corner-arc circle:nth-of-type(1){animation:ringspin 40s linear infinite}
.corner-arc circle:nth-of-type(2){animation:ringspinrev 54s linear infinite}
.orbital circle:nth-of-type(1){animation:ringspin 38s linear infinite}
.orbital circle:nth-of-type(2){animation:ringspinrev 50s linear infinite}
.orbital circle:nth-of-type(3){animation:ringspin 64s linear infinite}
@media(prefers-reduced-motion:reduce){
  .hero-scoop .arc,.hero-scoop .arc2,.corner-arc circle,.orbital circle{animation:none !important}
}

/* ---------- marquee ---------- */
.marquee{background:var(--gulab);overflow:hidden;padding:20px 0;white-space:nowrap}
.marquee-track{display:inline-flex;animation:slide 30s linear infinite;will-change:transform}
.marquee span{
  font-family:'Fraunces',serif;font-weight:700;font-size:.88rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--mishri);
  display:inline-flex;align-items:center;gap:60px;padding-right:60px;
}
.marquee span i{font-style:normal;color:var(--haldi-tint);font-size:.8rem}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- shells ---------- */
section{position:relative}
.shell{margin:0 auto;padding:clamp(90px,11vw,140px) clamp(22px,6vw,72px)}
.shell-tight{padding-top:clamp(70px,8vw,100px);padding-bottom:clamp(70px,8vw,100px)}
.sec-head{max-width:740px;margin-bottom:clamp(40px,6vw,68px)}
.sec-head h2{font-size:clamp(2.2rem,5vw,3.8rem);margin-top:22px;color:var(--ink)}
.sec-head h2 em{font-style:normal;color:var(--gulab)}
.sec-head p{margin-top:20px;color:var(--body);max-width:580px}

/* ---------- difference (why-kreemik) ---------- */
.diff{background:var(--mishri)}
.diff-head{text-align:center;max-width:760px;margin:0 auto}
.diff-head .eyebrow{display:inline-flex}
.diff-head h2{font-size:clamp(2.2rem,4.6vw,3.5rem);margin-top:22px}
.diff-head h2 em{font-style:italic;color:var(--gulab)}
.diff-head p{margin-top:20px;color:var(--body)}
.diff-tri{display:grid;grid-template-columns:1fr clamp(220px,26vw,310px) 1fr;gap:clamp(16px,2.4vw,30px);align-items:center;margin-top:clamp(36px,5vw,56px)}
.diff-col{display:flex;flex-direction:column;gap:14px}
.dcard{background:#fffdf8;border:1.5px solid rgba(36,51,105,.1);border-radius:16px;padding:18px 20px;box-shadow:0 3px 9px rgba(36,51,105,.05),0 1px 24px rgba(36,51,105,.07);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.dcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(36,51,105,.12)}
.dcard .label{font-size:.6rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;display:block;margin-bottom:8px}
.dcard p{font-size:.9rem;line-height:1.5}
.dcard.them{opacity:.9}
.dcard.them .label{color:rgba(36,51,105,.52)}
.dcard.them p{color:rgba(36,51,105,.7)}
.dcard.us .label{color:var(--gulab)}
.dcard.us p{color:var(--ink);font-weight:600}
.diff-focus{display:flex;flex-direction:column;align-items:center;gap:16px}
.focus-frame{position:relative;width:clamp(200px,24vw,290px);aspect-ratio:1;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 120% at 35% 22%,var(--gulab-tint),var(--gulab) 58%,var(--gulab-tone));box-shadow:0 30px 60px rgba(137,24,52,.28),inset 0 1px 0 rgba(251,243,228,.22)}
.focus-frame img{width:100%;height:100%;object-fit:cover}
.focus-frame .ring{position:absolute;border-radius:50%;border:1.5px solid rgba(251,243,228,.28);pointer-events:none}
.focus-frame .ring.r1{inset:16px}
.focus-frame .ring.r2{inset:38px;border-color:rgba(242,188,94,.42)}
.diff-focus .tag{background:var(--mishri);color:var(--gulab);font-family:'Cormorant',serif;font-style:italic;font-size:1.05rem;padding:8px 18px;border-radius:100px;box-shadow:0 8px 20px rgba(36,51,105,.12)}
@media(max-width:920px){
  .diff-tri{grid-template-columns:1fr;gap:16px}
  .diff-focus{order:-1;margin-bottom:6px}
}

/* ---------- stats (navy) ---------- */
.stats{background:var(--neel)}
.stats .shell{padding-top:78px;padding-bottom:78px;display:grid;grid-template-columns:repeat(4,1fr);gap:34px;text-align:center}
.stat b{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.8rem,3.6vw,3rem);color:var(--haldi-tint);display:block;white-space:nowrap}
.stat span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,243,228,.75);display:block;margin-top:10px}
@media(max-width:760px){.stats .shell{grid-template-columns:repeat(2,1fr)}}

/* ---------- flavours / frost-melt ---------- */
.flavours{background:var(--mishri);overflow:hidden}
.defrost-hint{
  display:inline-flex;align-items:center;gap:10px;margin:6px 0 44px;
  background:#fffdf8;border:1.5px solid rgba(36,51,105,.12);border-radius:100px;
  padding:10px 22px;font-size:.78rem;font-weight:600;letter-spacing:.08em;color:var(--neel);
}
.defrost-hint i{font-style:normal;color:var(--gulab);animation:pulseDot 2.2s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:.4}50%{opacity:1}}
.flav-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative;z-index:2}
.flav-rail::before{content:'';position:absolute;inset:-12% -6%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 44%,rgba(213,143,6,.24),rgba(182,39,78,.11) 46%,transparent 72%);
  filter:blur(10px)}
#glow{position:fixed;top:0;left:0;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;
  pointer-events:none;z-index:80;opacity:0;transition:opacity .5s var(--ease);mix-blend-mode:screen;will-change:transform;
  background:radial-gradient(circle at 50% 50%,rgba(255,208,132,.58),rgba(255,150,92,.24) 46%,transparent 70%)}
.fcard{
  position:relative;border-radius:22px;overflow:hidden;aspect-ratio:3/4.4;cursor:pointer;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
  -webkit-tap-highlight-color:transparent;
  transform:perspective(1000px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));
  will-change:transform;isolation:isolate;
}
.fcard.tilting{transition:transform .08s linear,box-shadow .55s var(--ease)}
.fcard:hover{transform:perspective(1000px) translateY(-12px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));box-shadow:0 28px 56px rgba(36,51,105,.22)}
.fcard:focus-visible{outline:3px solid var(--neel);outline-offset:4px}
.fcard .bg{position:absolute;inset:0}
.flav-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.2s var(--ease)}
.fcard:hover .flav-photo,.fcard.melted .flav-photo{transform:scale(1)}
.f1 .bg{background:linear-gradient(165deg,#E8B25C,#C9893B 55%,#8F5E1E)}
.f2 .bg{background:linear-gradient(165deg,#6B4630,#3F2A1D 58%,#241710)}
.f3 .bg{background:linear-gradient(165deg,#E9C89B,#C89B62 55%,#8A5A28)}
.f4 .bg{background:linear-gradient(165deg,#EFE0C2,#CBAE7E 55%,#7A5A34)}
.f5 .bg{background:linear-gradient(165deg,#D9BFA0,#A67B4F 55%,#5C3A20)}
.fcard .scrim{position:absolute;inset:0;background:linear-gradient(185deg,rgba(20,15,10,0) 42%,rgba(20,15,10,.66))}
.fcard .info{position:absolute;left:20px;right:20px;bottom:20px;z-index:3;color:#FBF3E4}
.fcard .lid{
  width:30px;height:8px;border-radius:4px;margin-bottom:12px;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.fcard .info h3{font-size:1.16rem;line-height:1.15}
.fcard .info p{font-size:.78rem;font-weight:400;opacity:.9;margin-top:6px}
.fcard .num{
  position:absolute;top:16px;left:18px;z-index:3;
  font-family:'Cormorant',serif;font-style:italic;font-size:1.05rem;color:rgba(251,243,228,.95);
}
/* photo placeholder slot for flavours not yet shot — keeps the 760x1114 ratio */
.fcard .ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(251,243,228,.85);
}
.fcard .ph span{
  font-family:'Cormorant',serif;font-style:italic;font-size:1.02rem;letter-spacing:.04em;
  border:1.5px dashed rgba(251,243,228,.55);border-radius:100px;padding:9px 20px;
  background:rgba(20,15,10,.18);
}
.frost{
  position:absolute;inset:0;z-index:4;border-radius:inherit;transform:translateZ(0);
  backdrop-filter:blur(16px) saturate(.8) brightness(1.12);
  -webkit-backdrop-filter:blur(16px) saturate(.8) brightness(1.12);
  background:
    radial-gradient(circle at 18% 26%, rgba(255,255,255,.55) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 72% 14%, rgba(255,255,255,.5) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 44%, rgba(255,255,255,.45) 0 3px, transparent 4px),
    radial-gradient(circle at 30% 58%, rgba(255,255,255,.5) 0 2px, transparent 3px),
    radial-gradient(circle at 56% 38%, rgba(255,255,255,.4) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 14% 78%, rgba(255,255,255,.45) 0 2px, transparent 3px),
    radial-gradient(circle at 66% 70%, rgba(255,255,255,.4) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 86%, rgba(255,255,255,.45) 0 2.5px, transparent 3.5px),
    linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,.16) 55%, rgba(255,255,255,.34));
  transition:opacity .9s var(--ease), backdrop-filter .9s var(--ease), -webkit-backdrop-filter .9s var(--ease);
}
.frost::after{
  content:'❄';position:absolute;top:14px;right:16px;font-size:1rem;color:rgba(36,51,105,.55);
  transition:opacity .4s;
}
.fcard:hover .frost,.fcard.melted .frost{
  opacity:0;
  backdrop-filter:blur(0) saturate(1) brightness(1);
  -webkit-backdrop-filter:blur(0) saturate(1) brightness(1);
}
.fcard:hover .frost::after,.fcard.melted .frost::after{opacity:0}
.flav-foot{margin-top:44px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.flav-foot p{color:var(--body);font-size:.92rem;max-width:540px}
.flav-foot .serif{color:var(--gulab);font-size:1.45rem}
@media(max-width:1020px){.flav-rail{grid-template-columns:repeat(2,1fr)}.fcard{aspect-ratio:3/3.6}}
@media(max-width:540px){.flav-rail{grid-template-columns:1fr}.fcard{aspect-ratio:4/4.4}}

/* ---------- craft ---------- */
.craft{background:#F6ECD9;overflow:hidden}
.craft-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.c-img{border-radius:20px;overflow:hidden;position:relative;min-height:300px;background:linear-gradient(160deg,var(--neel-tint),var(--neel-deep));
  transform:perspective(1000px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));transition:transform .5s var(--ease)}
.c-img.tilting{transition:transform .08s linear}
.c-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transform:scale(1.05);transition:transform 1.2s var(--ease),filter 1.2s var(--ease);filter:saturate(1.05) contrast(1.03)}
.c-img::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(160deg,rgba(36,51,105,.32) 0%,rgba(36,51,105,0) 46%);
  opacity:1;transition:opacity 1.1s var(--ease)}
.c-img:hover img{transform:scale(1);filter:saturate(1.1) contrast(1.04)}
.c-img:hover::before{opacity:.4}
.c-img::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(18,26,56,.86) 0%,rgba(18,26,56,.42) 22%,rgba(18,26,56,0) 50%)}
.c-img .cap{position:absolute;left:24px;bottom:22px;z-index:2;text-shadow:0 2px 12px rgba(12,18,40,.5)}
.c-img .cap b{font-family:'Fraunces',serif;font-weight:700;font-size:1.18rem;color:var(--mishri);display:block;margin-bottom:3px}
.c-img .cap span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--haldi-tint)}
.ca{grid-column:span 7}.cb{grid-column:span 5}.cc{grid-column:span 5}.cd{grid-column:span 7}
.craft-claims{display:flex;gap:34px;flex-wrap:wrap;margin-top:50px}
.claim{flex:1;min-width:220px;border-top:3px solid var(--haldi);padding-top:18px}
.claim b{font-family:'Fraunces',serif;font-weight:700;color:var(--ink);display:block;margin-bottom:8px;font-size:1.05rem}
.claim p{font-size:.9rem;color:var(--body)}
@media(max-width:860px){.ca,.cb,.cc,.cd{grid-column:span 12}}

/* numbered steps (our-craft) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
.step{background:#fffdf8;border:1.5px solid rgba(36,51,105,.1);border-radius:16px;padding:28px 26px;position:relative;counter-increment:step}
.step::before{content:counter(step,decimal-leading-zero);font-family:'Cormorant',serif;font-style:italic;
  font-size:1.6rem;color:var(--gulab);display:block;margin-bottom:10px}
.step h3{font-size:1.08rem;color:var(--ink);margin-bottom:8px}
.step p{font-size:.88rem;color:var(--body)}
@media(max-width:920px){.steps{grid-template-columns:1fr}}

/* generic light card grid */
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cardgrid.two{grid-template-columns:repeat(2,1fr)}
.card{background:#fffdf8;border:1.5px solid rgba(36,51,105,.1);border-radius:16px;padding:28px 26px;
  box-shadow:0 3px 9px rgba(36,51,105,.05),0 1px 24px rgba(36,51,105,.07);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(36,51,105,.12)}
.card .label{font-size:.6rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;display:block;margin-bottom:10px;color:var(--gulab)}
.card h3{font-size:1.15rem;color:var(--ink);margin-bottom:8px}
.card p{font-size:.9rem;line-height:1.55;color:var(--body)}
.card ul{list-style:none;margin-top:12px}
.card li{padding-left:22px;position:relative;font-size:.88rem;margin-bottom:8px;color:var(--body)}
.card li::before{content:'';position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--pista)}
@media(max-width:920px){.cardgrid,.cardgrid.two{grid-template-columns:1fr}}

/* ---------- story (navy narrative, our-story) ---------- */
.story{background:var(--neel-bg);overflow:hidden}
.story .sec-head h2{color:var(--mishri)}
.story .sec-head h2 em{color:var(--haldi-tint)}
.story .sec-head p{color:rgba(251,243,228,.75)}
.story .eyebrow{color:var(--haldi-tint)}
.story .eyebrow::before{background:var(--gulab-tint)}
.story-prose p{font-size:clamp(1.05rem,1.6vw,1.22rem);font-weight:300;color:rgba(251,243,228,.86);margin-bottom:22px;line-height:1.7}
.story-prose p:first-of-type{font-size:clamp(1.2rem,2vw,1.5rem);color:var(--mishri);font-weight:400}
.story-prose strong{color:var(--haldi-tint);font-weight:600}
.story-solo{max-width:760px;margin:0 auto 64px;position:relative}
.story-note{max-width:680px}
.story-note p{font-family:'Cormorant',serif;font-style:italic;font-size:clamp(1.4rem,2.4vw,1.8rem);color:var(--haldi-tint);line-height:1.45}
.story-note cite{display:block;margin-top:16px;font-style:normal;font-family:'DM Sans',sans-serif;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(251,243,228,.6)}

/* ---------- grow (dealer / where-to-buy split cards) ---------- */
.grow{background:var(--mishri)}
.g-card{--spot-x:-300px;--spot-y:-300px}
.g-card::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:4;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  background:radial-gradient(200px circle at var(--spot-x) var(--spot-y),var(--spot-color,var(--haldi)) 0%,transparent 62%)}
.g-card:hover::after{opacity:1}
.g-trade{--spot-color:var(--gulab)}
.g-store{--spot-color:var(--neel)}
.grow-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.g-card{
  border-radius:22px;padding:46px 42px;position:relative;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.g-card:hover{transform:translateY(-8px);box-shadow:0 26px 52px rgba(36,51,105,.16)}
.g-trade{background:#fffdf8;border:1.5px solid rgba(36,51,105,.12)}
.g-store{background:linear-gradient(165deg,var(--haldi-tint),var(--haldi));color:var(--neel)}
.g-card .g-eyebrow{font-size:.66rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;display:block;margin-bottom:18px}
.g-trade .g-eyebrow{color:var(--gulab)}
.g-store .g-eyebrow{color:var(--neel)}
.g-card h3{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:16px}
.g-trade h3{color:var(--ink)}
.g-card p{font-size:.93rem;margin-bottom:12px}
.g-trade p{color:var(--body)}
.g-store p{color:rgba(36,51,105,.85)}
.g-card ul{list-style:none;margin:18px 0 30px}
.g-card li{padding-left:26px;position:relative;font-size:.9rem;margin-bottom:10px}
.g-trade li{color:var(--body)}
.g-store li{color:rgba(36,51,105,.9);font-weight:500}
.g-card li::before{content:'';position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%}
.g-trade li::before{background:var(--pista)}
.g-store li::before{background:var(--gulab)}
.g-store .serif{font-size:1.3rem;color:var(--gulab-tone);display:block;margin-bottom:8px}
.g-card .cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}
@media(max-width:860px){.grow-grid{grid-template-columns:1fr}}

/* ---------- contact (gulab radial) ---------- */
.contact{background:radial-gradient(120% 120% at 50% -20%, var(--gulab-tint) 0%, var(--gulab) 45%, var(--gulab-tone) 100%);text-align:center;overflow:hidden}
/* "Next ·" hand-off eyebrow sits on the pink CTA background, so it needs cream ink */
.contact .eyebrow{color:var(--mishri)}
.contact .eyebrow::before{background:var(--haldi-tint)}
.contact h2{font-size:clamp(2.6rem,6.5vw,4.8rem);color:var(--mishri)}
.contact .serif{color:var(--haldi-tint);display:block;font-size:clamp(1.5rem,3.2vw,2.4rem);margin-top:12px}
.contact-cards{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:52px}
.c-card{
  position:relative;overflow:hidden;
  border-radius:18px;padding:28px 36px;min-width:250px;
  background:rgba(251,243,228,.12);border:1.5px solid rgba(251,243,228,.3);
  backdrop-filter:blur(8px);transition:transform .45s var(--ease),background .45s;
}
.c-card::before,.c-form::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,0) 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;}
.c-card:hover{transform:translateY(-6px);background:rgba(251,243,228,.2)}
.c-card span{font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--haldi-tint);display:block;margin-bottom:12px}
.c-card a,.c-card p{font-family:'Fraunces',serif;font-weight:700;font-size:1rem;color:var(--mishri)}
.c-card a:hover{color:var(--haldi-tint)}

/* ---------- contact form (Web3Forms) ---------- */
.c-form{
  position:relative;overflow:hidden;
  margin:44px auto 0;max-width:560px;text-align:left;
  background:rgba(251,243,228,.12);border:1.5px solid rgba(251,243,228,.3);
  backdrop-filter:blur(8px);border-radius:20px;padding:clamp(24px,4vw,40px);
}
.c-form h3{color:var(--mishri);font-size:1.35rem;margin-bottom:8px}
.c-form>p{color:rgba(251,243,228,.78);font-size:.88rem;margin-bottom:24px;font-weight:300}
.c-form .field{margin-bottom:18px}
.c-form label{display:block;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--haldi-tint);margin-bottom:7px}
.c-form input,.c-form select,.c-form textarea{
  width:100%;padding:13px 16px;border-radius:10px;border:1.5px solid rgba(251,243,228,.3);
  background:rgba(255,255,255,.08);color:var(--mishri);font-family:'DM Sans',sans-serif;font-size:.92rem;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.c-form input::placeholder,.c-form textarea::placeholder{color:rgba(251,243,228,.48)}
.c-form input:focus,.c-form select:focus,.c-form textarea:focus{outline:2px solid var(--haldi-tint);outline-offset:2px;border-color:transparent;background:rgba(255,255,255,.14)}
.c-form textarea{resize:vertical;min-height:110px}
.c-form select option{color:#111}
.c-form .hp{position:absolute !important;left:-9999px !important;top:-9999px !important;width:1px;height:1px;opacity:0}
.c-form button[type=submit]{width:100%;border:none;margin-top:4px}
.c-form button[type=submit][disabled]{opacity:.6;cursor:progress}
.c-form .form-msg{margin-top:14px;font-size:.85rem;display:none}
.c-form .form-msg.show{display:block}
.c-form .form-msg.ok{color:#BFE3C3}
.c-form .form-msg.err{color:#FFC2C2}
.c-form .or-mail{margin-top:18px;font-size:.8rem;color:rgba(251,243,228,.68);text-align:center}
.c-form .or-mail a{color:var(--haldi-tint);text-decoration:underline}
/* form embedded on a light section (dealer page) */
.c-form.on-light{background:#fffdf8;border-color:rgba(36,51,105,.12);backdrop-filter:none;margin-left:0}
.c-form.on-light::before{display:none}
.c-form.on-light h3{color:var(--ink)}
.c-form.on-light>p{color:var(--body)}
.c-form.on-light label{color:var(--gulab)}
.c-form.on-light input,.c-form.on-light select,.c-form.on-light textarea{
  border-color:rgba(36,51,105,.22);background:#fff;color:var(--ink)}
.c-form.on-light input::placeholder,.c-form.on-light textarea::placeholder{color:rgba(36,51,105,.4)}
.c-form.on-light input:focus,.c-form.on-light select:focus,.c-form.on-light textarea:focus{outline-color:var(--gulab);background:#fff}
.c-form.on-light .form-msg.ok{color:#3F7A46}
.c-form.on-light .form-msg.err{color:#A22}
.c-form.on-light .or-mail{color:var(--body)}
.c-form.on-light .or-mail a{color:var(--gulab)}

/* ---------- footer ---------- */
footer{background:var(--neel-deep)}
.foot{
  margin:0 auto;padding:46px clamp(22px,6vw,72px);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.foot .lockup{display:flex;align-items:center;gap:12px}
.foot-wordmark{height:26px;width:auto;display:block}
.foot small{color:rgba(251,243,228,.6);font-size:.74rem;letter-spacing:.04em;line-height:1.7}
.foot small a{text-decoration:underline}
.foot .tg{font-family:'Cormorant',serif;font-style:italic;color:var(--haldi-tint);font-size:1.05rem}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(251,243,228,.7)}
.foot-links a:hover{color:var(--haldi-tint)}

/* ============ WOW LAYER ============ */
.grain{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
.wreveal .wln{display:block;overflow:hidden}
.wreveal .wd{display:inline-block}
.wreveal .wc{display:inline-block;transform:translateY(112%);transition:transform .7s var(--ease)}
.wreveal.in .wc{transform:translateY(0)}
#dots{position:fixed;inset:0;z-index:1;pointer-events:none}
#cursorDot{
  position:fixed;top:0;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:rgba(242,188,94,.9);border:1.5px solid rgba(242,188,94,0);
  box-shadow:0 0 10px rgba(242,188,94,.45);
  pointer-events:none;z-index:9999;opacity:0;
  transition:opacity .3s ease,width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s ease,border-color .3s ease;
  will-change:transform;
}
#cursorDot.hover{
  width:40px;height:40px;margin:-20px 0 0 -20px;
  background:rgba(242,188,94,.12);border-color:rgba(242,188,94,.85);
}
.has-custom-cursor,.has-custom-cursor a,.has-custom-cursor button,.has-custom-cursor .fcard{cursor:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-delay:0s !important;transition-duration:.001s !important}
  .rv{opacity:1;transform:none}
  .wreveal .wc{transform:none !important}
  .grain{display:none}
  #dots{display:none}
  html{scroll-behavior:auto}
}

/* ---------- WhatsApp floating action button ---------- */
.wa-fab{
  position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:150;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.wa-fab svg{width:28px;height:28px;fill:#fff}
.wa-fab:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 14px 32px rgba(0,0,0,.34)}
.wa-fab:active{transform:scale(.94)}
@media(max-width:600px){.wa-fab{right:16px;width:50px;height:50px}.wa-fab svg{width:23px;height:23px}}
.wa-link{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;color:#128C4A}
.wa-link:hover{color:#0E6B39;text-decoration:underline}
.wa-link svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}
.g-store .wa-link{color:var(--neel)}
.g-store .wa-link:hover{color:var(--neel-deep)}

/* ---------- reduced transparency fallback ---------- */
@media (prefers-reduced-transparency: reduce){
  nav.scrolled{background:var(--mishri);backdrop-filter:none;-webkit-backdrop-filter:none}
  .c-card,.c-form{background:rgba(137,24,52,.94);backdrop-filter:none;-webkit-backdrop-filter:none}
  .c-form.on-light{background:#fffdf8}
  .frost{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(251,243,228,.94)}
}


/* ============================================================
   Continuous page-to-page navigation (View Transitions API)
   The persistent nav and footer stay anchored while the page
   content eases from one page to the next, so moving through the
   site feels like one continuous surface instead of hard reloads.
   Unsupported browsers simply navigate instantly.
   ============================================================ */
@view-transition{navigation:auto}
nav{view-transition-name:siteNav}
footer{view-transition-name:siteFooter}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:pageOut .26s var(--ease) both}
  ::view-transition-new(root){animation:pageIn .38s var(--ease) both}
  @keyframes pageOut{to{opacity:0;transform:translateY(-6px)}}
  @keyframes pageIn{from{opacity:0;transform:translateY(12px)}}
}

/* ============================================================
   Index hero — pinned scene: copy left, rotating cone right
   The hero is a tall scroll scene; the two columns pin to the
   viewport while the cone turns, then release into the page.
   ============================================================ */
.hero{min-height:138vh;padding:0;display:block;overflow:visible}
.hero-pin{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;
  justify-content:space-between;gap:clamp(24px,5vw,64px);
  padding:clamp(96px,12vh,140px) clamp(22px,6vw,72px) clamp(40px,7vh,90px)}
.hero-copy{flex:1 1 46%;max-width:600px;text-align:left;position:relative;z-index:3}
.hero-copy .eyebrow{justify-content:flex-start;animation:fadeUp 1s var(--ease) .1s both}
.hero-copy h1{margin:22px 0 14px;animation:fadeUp 1.1s var(--ease) .28s both}
.hero-copy h1 .wm{width:clamp(240px,32vw,430px);height:auto;display:block}
.hero-copy .tagline{animation:fadeUp 1.1s var(--ease) .5s both}
.hero-copy .hero-actions{margin-top:34px;justify-content:flex-start;animation:fadeUp 1.1s var(--ease) .7s both}
.hero-cone{flex:0 0 auto;position:relative;display:flex;align-items:center;justify-content:center;
  perspective:1400px;animation:fadeUp 1.2s var(--ease) .34s both}
.hero-glow{position:absolute;left:50%;top:50%;width:min(58vw,600px);height:min(58vw,600px);
  transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 46%, rgba(213,143,6,.22), rgba(98,137,101,.14) 42%, transparent 68%)}
.cone-orbit{position:relative;z-index:2;transform-style:preserve-3d;will-change:transform}
.cone{height:clamp(320px,66vh,600px);width:auto;display:block;
  filter:drop-shadow(0 34px 44px rgba(120,70,20,.26));
  animation:coneFloat 6s ease-in-out infinite;will-change:transform}
@keyframes coneFloat{0%,100%{transform:translateY(0) rotateY(-3deg)}50%{transform:translateY(-13px) rotateY(3deg)}}
@media(max-width:900px){
  .hero{min-height:auto}
  .hero-pin{position:static;flex-direction:column-reverse;min-height:100svh;gap:6px;text-align:center}
  .hero-copy{text-align:center;max-width:none;flex:none}
  .hero-copy .eyebrow,.hero-copy .hero-actions{justify-content:center}
  .cone{height:clamp(240px,42vh,380px)}
}
@media (prefers-reduced-motion:reduce){.cone{animation:none}.cone-orbit{transform:none !important}}