:root{
  color-scheme:light;
  /* VSFoods corporate identity: institutional navy, precious brass, cool porcelain.
     Deliberately distinct from the KreemiK consumer palette. The legacy token
     names are kept, but every value now serves the VSF corporate system. */
  --navy:#1A2740; --navy-tint:#4E5F86; --navy-deep:#111B30;
  --brass:#B08D4C; --brass-tint:#CBA968; --brass-tone:#8A6A33;
  --porcelain:#EEF1F5;
  /* legacy aliases mapped onto the corporate palette */
  --gulab:var(--brass); --gulab-tint:var(--brass-tint); --gulab-tone:var(--brass-tone);
  --pista:var(--navy-tint); --pista-tint:#8393B5;
  --mishri:var(--porcelain);
  --haldi:var(--brass); --haldi-tint:var(--brass-tint);
  --neel:var(--navy); --neel-tint:var(--navy-tint); --neel-deep:var(--navy-deep);
  --ink:var(--navy);
  --body:rgba(26,39,64,.80);
  --ease:cubic-bezier(.22,.8,.24,1);
  /* large flat-navy section backgrounds */
  --neel-bg:#1B2A47; --neel-bg-mid:#243A5E; --neel-bg-deep:#0F1830;
}
*{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(--haldi);color:var(--neel-deep)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--haldi);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(--haldi);display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:'';width:34px;height:2px;background:var(--brass);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(--neel);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(--haldi),var(--gulab));z-index:200;border-radius:0 4px 4px 0}

/* ---------- nav ---------- */
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(238,241,245,.85);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:13px clamp(22px,6vw,72px);
  box-shadow:0 1px 0 rgba(36,51,105,.18),inset 0 1px 0 rgba(255,255,255,.5);
}
.nav-logo{display:flex;align-items:center;gap:12px}
.kmark{
  width:38px;height:38px;border-radius:50%;background:var(--neel);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;
}
.kmark::after{content:'';position:absolute;inset:3px;border-radius:50%;border:1px dashed rgba(238,241,245,.55)}
.kmark span{font-family:'Fraunces',serif;font-weight:800;color:var(--mishri);font-size:1.05rem}
.vsf-nav-word{font-family:'Fraunces',serif;font-weight:600;font-size:1.32rem;letter-spacing:.04em;color:var(--neel)}
.vsf-nav-word b{color:var(--gulab);font-weight:600}
.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;
}
/* At the top the nav sits over the dark navy page hero, so logo + links
   must be light to stay legible; .scrolled (cream pill) restores dark ink. */
nav:not(.scrolled) .vsf-nav-word{color:var(--mishri)}
nav:not(.scrolled) .vsf-nav-word b{color:var(--haldi-tint)}
nav:not(.scrolled) .nav-links a:not(.nav-cta){color:rgba(238,241,245,.86)}
nav:not(.scrolled) .nav-links a:not(.nav-cta):hover,
nav:not(.scrolled) .nav-links a.active:not(.nav-cta){color:var(--haldi-tint)}
nav:not(.scrolled) .nav-links a:not(.nav-cta)::after{background:var(--haldi-tint)}
nav:not(.scrolled) .kmark{background:rgba(238,241,245,.14) !important;box-shadow:inset 0 0 0 1.5px rgba(176,141,76,.6)}
@media(max-width:900px){
  nav:not(.scrolled) .nav-links.open a:not(.nav-cta){color:rgba(36,51,105,.82)}
}
.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(--neel)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{background:var(--haldi);color:var(--neel-deep) !important;padding:10px 24px !important;border-radius:100px;transition:background .35s,transform .35s !important}
.nav-cta:hover{background:var(--haldi-tint);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(--haldi);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)}
}

/* ---------- VSF house hero (index) ---------- */
.vsfhero{
  min-height:100svh;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
  padding:120px clamp(22px,6vw,72px) 110px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% -10%, var(--neel-bg-mid) 0%, var(--neel-bg) 45%, var(--neel-bg-deep) 100%);
  color:var(--mishri);
}
.vsfhero .vsf-seal{position:absolute;top:50%;left:50%;width:min(62vw,700px);transform:translate(-50%,-54%);pointer-events:none;opacity:.9}
.vsfhero .vsf-orb{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.vsfhero.orb-on .vsf-orb{display:block}
.vsfhero.orb-on .vsf-seal{opacity:.22;transition:opacity 1.2s ease}
@media(max-width:700px){
  .vsfhero .vsf-seal{width:min(92vw,420px)}
}
.vsfhero .eyebrow{color:var(--haldi-tint);justify-content:center;animation:fadeUp 1s var(--ease) .15s both}
.vsfhero .eyebrow::before{background:var(--brass)}
.vsfhero .eyebrow::after{content:'';width:34px;height:2px;background:var(--brass);border-radius:2px}
.vsf-mark{
  font-size:clamp(5.2rem,16vw,12.5rem);line-height:.92;letter-spacing:.02em;
  margin:14px 0 0;position:relative;z-index:2;color:var(--mishri);
  animation:fadeUp 1.1s var(--ease) .3s both;
}
.vsf-mark b{color:var(--haldi-tint);font-weight:600}
.vsf-tag{
  font-family:'Fraunces',serif;font-weight:600;line-height:1.18;
  font-size:clamp(1.35rem,3vw,2.15rem);color:var(--mishri);
  max-width:22ch;margin:24px auto 0;position:relative;z-index:2;
  animation:fadeUp 1.1s var(--ease) .5s both;
}
.vsf-tag em{font-style:normal;color:var(--haldi-tint)}
.vsfhero .lede{
  max-width:560px;margin:24px auto 0;color:rgba(238,241,245,.82);font-weight:300;
  font-size:clamp(1rem,1.5vw,1.18rem);animation:fadeUp 1.1s var(--ease) .65s both;position:relative;z-index:2;
}
.vsfhero-actions{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap;justify-content:center;animation:fadeUp 1.1s var(--ease) .85s both;position:relative;z-index:2}
.vsfhero-foot{position:absolute;bottom:30px;left:0;right:0;text-align:center;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(238,241,245,.5);animation:fadeUp 1s var(--ease) 1.2s both}

/* ---------- inner page hero ---------- */
.page-hero{
  position:relative;overflow:hidden;text-align:left;color:var(--mishri);
  padding:clamp(150px,20vh,210px) clamp(22px,6vw,72px) clamp(70px,9vw,110px);
  background:radial-gradient(120% 90% at 50% -10%, var(--neel-bg-mid) 0%, var(--neel-bg) 45%, var(--neel-bg-deep) 100%);
}
.page-hero .eyebrow{color:var(--haldi-tint);animation:fadeUp 1s var(--ease) .1s both}
.page-hero .eyebrow::before{background:var(--brass)}
.page-hero h1{
  font-size:clamp(2.4rem,5.6vw,4.2rem);max-width:16ch;margin-top:22px;
  animation:fadeUp 1.1s var(--ease) .25s both;
}
.page-hero h1 em{font-style:normal;color:var(--haldi-tint)}
.page-hero .lede{
  max-width:600px;margin-top:22px;color:rgba(238,241,245,.82);font-weight:300;
  font-size:clamp(1rem,1.5vw,1.15rem);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-brass{background:var(--haldi);color:var(--neel-deep)}
.btn-brass:hover{background:var(--haldi-tint);transform:translateY(-3px);box-shadow:0 16px 34px rgba(176,141,76,.3)}
.btn-linecream{border-color:rgba(238,241,245,.4);color:var(--mishri)}
.btn-linecream:hover{border-color:var(--haldi-tint);color:var(--haldi-tint);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-line{border-color:var(--neel);color:var(--neel)}
.btn-line:hover{background:var(--neel);color:var(--mishri);transform:translateY(-3px)}
.btn-gulab{background:var(--gulab);color:var(--mishri)}
.btn-gulab:hover{background:var(--gulab-tone);transform:translateY(-3px);box-shadow:0 16px 34px rgba(176,141,76,.3)}
@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}
@keyframes ringspin{to{transform:rotate(360deg)}}
@keyframes ringspinrev{to{transform:rotate(-360deg)}}
.vsf-seal circle:nth-of-type(2),.corner-arc circle{transform-box:fill-box;transform-origin:center;will-change:transform}
.vsf-seal circle:nth-of-type(2){animation:ringspin 46s 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}
@media(prefers-reduced-motion:reduce){
  .vsf-seal circle,.corner-arc circle{animation:none !important}
}

/* ---------- marquee ---------- */
.marquee{background:var(--neel-deep);overflow:hidden;padding:20px 0;white-space:nowrap;border-top:1px solid rgba(176,141,76,.2);border-bottom:1px solid rgba(176,141,76,.2)}
.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(--haldi)}
.sec-head p{margin-top:20px;color:var(--body);max-width:580px}

/* ---------- pillars (navy band) ---------- */
.pillars{background:var(--neel-deep);border-top:1px solid rgba(176,141,76,.2);border-bottom:1px solid rgba(176,141,76,.2)}
.pillars .shell{padding-top:80px;padding-bottom:80px}
.pillars .sec-head h2{color:var(--mishri)}
.pillars .sec-head h2 em{font-style:normal;color:var(--haldi-tint)}
.pillars .sec-head p{color:rgba(238,241,245,.75)}
.pillars .eyebrow{color:var(--haldi-tint)}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pillar{position:relative;z-index:0;padding:34px 30px;border-radius:20px;
  background:linear-gradient(#222e59,#222e59) padding-box, var(--pg) border-box;
  border:1.5px solid transparent;transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  --pg:linear-gradient(137deg,var(--gulab),var(--haldi-tint))}
.pillar::before{content:'';position:absolute;inset:-1px;border-radius:21px;z-index:-1;
  background:var(--pg);filter:blur(30px);opacity:.3;transition:opacity .5s}
.pillar:hover{transform:translateY(-6px)}
.pillar:hover::before{opacity:.48}
.pillar:nth-child(2){--pg:linear-gradient(137deg,var(--pista-tint),var(--pista))}
.pillar:nth-child(3){--pg:linear-gradient(137deg,var(--haldi),var(--neel-tint))}
.pillar svg{width:40px;height:40px;stroke:var(--haldi-tint);fill:none;stroke-width:1.5;margin-bottom:20px}
.pillar h3{color:var(--mishri);font-size:1.2rem;margin-bottom:10px}
.pillar p{color:rgba(238,241,245,.72);font-size:.92rem;font-weight:300}
@media(max-width:820px){.pillars-grid{grid-template-columns:1fr}}

/* ---------- story (navy narrative) ---------- */
.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(238,241,245,.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(238,241,245,.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}
.cred-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:48px}
.cred{border-top:2px solid var(--haldi);padding-top:16px}
.cred b{font-family:'Fraunces',serif;font-weight:600;font-size:1.5rem;color:var(--mishri);display:block;line-height:1}
.cred span{font-size:.78rem;color:rgba(238,241,245,.7);display:block;margin-top:8px}
.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(238,241,245,.6)}
.maker-strip{margin-top:54px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.maker-strip .pill{
  border:1.5px solid rgba(238,241,245,.25);border-radius:100px;padding:10px 22px;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(238,241,245,.8);
}
@media(max-width:820px){.cred-row{grid-template-columns:1fr 1fr}}

/* ---------- 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(238,241,245,.75);display:block;margin-top:10px}
@media(max-width:760px){.stats .shell{grid-template-columns:repeat(2,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:#f7f9fb;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(--haldi)}
.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}}

/* numbered process steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
.step{background:#f7f9fb;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(--haldi);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}}

/* ---------- claims (gold-rule trio) ---------- */
.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)}

/* ---------- craft image grid (manufacturing) ---------- */
.craft{background:#E7EBEF;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}
@media(max-width:860px){.ca,.cb,.cc,.cd{grid-column:span 12}}

/* ---------- grow cards (lead-gen 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:#f7f9fb;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}}

/* ---------- brand card (brands.html) ---------- */
.brandcard{
  position:relative;overflow:hidden;border-radius:26px;max-width:860px;margin:0 auto;
  background:radial-gradient(120% 120% at 50% -20%, var(--gulab-tint) 0%, var(--gulab) 45%, var(--gulab-tone) 100%);
  color:var(--mishri);padding:clamp(40px,6vw,72px);text-align:center;
  box-shadow:0 30px 60px rgba(17,27,48,.28);
}
.brandcard .b-eyebrow{font-size:.66rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--haldi-tint);display:block;margin-bottom:20px}
.brandcard .wm{width:clamp(220px,42vw,420px);height:auto;display:block;margin:0 auto}
.brandcard .wm path{fill:var(--mishri)}
.brandcard .b-tag{font-family:'Cormorant',serif;font-style:italic;font-weight:500;font-size:clamp(1.4rem,2.8vw,2rem);color:var(--haldi-tint);margin-top:18px}
.brandcard p{max-width:520px;margin:20px auto 0;color:rgba(238,241,245,.88);font-weight:300}
.brandcard .btn{margin-top:32px}

/* ---------- contact (navy) ---------- */
.contact{background:radial-gradient(120% 120% at 50% -20%, var(--neel-bg-mid) 0%, var(--neel-bg) 45%, var(--neel-bg-deep) 100%);text-align:center;overflow:hidden}
.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(238,241,245,.1);border:1.5px solid rgba(238,241,245,.28);
  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(238,241,245,.18)}
.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(238,241,245,.1);border:1.5px solid rgba(238,241,245,.28);
  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(238,241,245,.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(238,241,245,.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(238,241,245,.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(238,241,245,.68);text-align:center}
.c-form .or-mail a{color:var(--haldi-tint);text-decoration:underline}
/* form embedded on a light section (contract-manufacturing) */
.c-form.on-light{background:#f7f9fb;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(--haldi)}
.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(--haldi);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(--haldi)}

/* ---------- 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 small{color:rgba(238,241,245,.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 nav-links{display:flex;gap:18px}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(238,241,245,.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}
#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%)}
#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{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)}

/* ---------- legal page ---------- */
.legal{background:var(--mishri);min-height:100svh;padding:140px clamp(22px,6vw,72px) 100px}
.legal .shell{max-width:760px;padding:0}
.legal h1{font-size:clamp(2rem,4.4vw,3rem);color:var(--ink);margin-bottom:8px}
.legal .updated{color:var(--body);font-size:.85rem;margin-bottom:40px}
.legal h2{font-size:1.3rem;color:var(--ink);margin:36px 0 12px}
.legal p,.legal li{color:var(--body);font-size:.98rem;margin-bottom:14px}
.legal ul{padding-left:22px;margin-bottom:14px}
.legal a{color:var(--gulab);text-decoration:underline}
.legal .back{display:inline-block;margin-bottom:36px;font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gulab)}

/* ---------- 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(22,33,72,.94);backdrop-filter:none;-webkit-backdrop-filter:none}
  .c-form.on-light{background:#f7f9fb}
}


/* ============================================================
   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)}}
}