/* PRAVAHA INTERNATIONAL — corporate saffron-export site, built to the client's mockup.
   Light ivory ground, deep-navy bands, gold accents. */
:root{
  --navy:#10193A;--navy2:#1A2454;--navy3:#0B1230;--gold:#E2661C;--gold2:#F58A2E;--gold3:#FDE3CF;
  --ivory:#F7F5F0;--white:#fff;--ink:#111111;--muted:#1C1C1C;--line:#E6E2D8;--purple:#7C5CC4;--red:#D8331F;
  /* 🔴 THE CLIENT'S FONT PAIRING (21 Sep 2026): a calligraphic script + Inter. Headings are Inter
     now, not Cormorant Garamond — --serif keeps its name so every existing rule follows along.
     --script is the accent face, used ONLY for the word "Saffron" (see .sc and sc() in build.mjs).
     Pinyon Script is the closest free match to the "Tempting" sample the client sent. */
  --serif:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --script:'Inter',system-ui,sans-serif;--saf:#E2661C;--saf2:#F58A2E;
  --gutter:clamp(18px,4vw,48px);--r:12px;--sh:0 18px 40px -24px rgba(16,25,58,.35);
}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
/* 🔴 overflow-x:CLIP, not hidden. "hidden" on body quietly turns overflow-y into auto, which makes
   body a scroll container that never scrolls — and every position:sticky inside it (the header, the
   process heading) stops sticking. clip crops the same way without that side effect; "hidden" stays
   first only as the fallback for a browser that does not know clip. */
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.65;overflow-x:hidden;overflow-x:clip}
body.locked{overflow:hidden}
img{max-width:100%;display:block}a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:800;letter-spacing:-.018em;line-height:1.12;margin:0;color:var(--navy)}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.h2{font-size:clamp(28px,3.2vw,40px)}
.h2 em{font-style:normal;color:var(--gold)}
.lead{color:var(--muted);font-size:15px;line-height:1.75;max-width:60ch}
.btn{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 22px;border-radius:6px;font-size:12.5px;font-weight:700;letter-spacing:.02em;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-family:var(--sans);transition:transform .25s,box-shadow .25s,background .25s,color .25s,border-color .25s;white-space:nowrap}
.btn svg{width:15px;height:15px;transition:transform .25s}.btn:hover svg{transform:translateX(4px)}
.btn.gold{background:var(--gold);color:var(--navy)}.btn.gold:hover{background:var(--gold2);transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(201,162,74,.8)}
.btn.line{border-color:rgba(255,255,255,.55);color:#fff}.btn.line:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn.navy{background:var(--navy);color:#fff}.btn.navy:hover{background:var(--navy2);transform:translateY(-2px)}
.btn.linei{border-color:var(--navy);color:var(--navy)}.btn.linei:hover{background:var(--navy);color:#fff}
.btn.sm{height:38px;padding:0 16px;font-size:12px}
.ic{display:inline-grid;place-items:center}.ic svg{width:100%;height:100%}

/* reveal + motion */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.l{transform:translateX(-36px)}.rv.r{transform:translateX(36px)}.rv.z{transform:scale(.92)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s}.d6{transition-delay:.6s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dash{to{stroke-dashoffset:0}}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(3);opacity:0}}
@keyframes hero-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes hero-img{from{opacity:0;transform:translateX(40px) scale(.96)}to{opacity:1;transform:none}}

/* top bar + header */
.tb{background:var(--navy3);color:rgba(255,255,255,.93);font-size:12px;position:relative;z-index:91}
.tb .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px}
.tb .tbl,.tb .tbr{display:flex;align-items:center;gap:22px;min-width:0}
.tb a,.tb span{display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:none;font-weight:500;white-space:nowrap}
.tb a:hover{color:#fff}
.tb svg{width:13px;height:13px;color:var(--gold2);flex:0 0 auto}
.tb .clk{color:#fff;font-weight:700;padding-left:18px;border-left:1px solid rgba(255,255,255,.18);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:760px){.tb .tbr{display:none}.tb .wrap{justify-content:center}}
@media(max-width:480px){.tb .tbl{gap:16px}.tb .tbl a+a span{display:none}}
.hd{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.hd.scrolled{box-shadow:0 8px 30px -18px rgba(16,25,58,.35)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.hd .logo{flex:0 0 auto;display:block}.hd .logo img{height:44px;width:auto;max-width:none}
.hd nav{display:flex;gap:26px;align-items:center}
.hd nav a{font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;position:relative;padding:8px 0;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.hd nav a svg{width:12px;height:12px}
.hd nav a::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:0;background:var(--gold);transition:width .3s}
.hd nav a:hover::after,.hd nav a.on::after{width:100%}.hd nav a.on{color:var(--gold)}
.hd nav .dd{position:relative}
.hd nav .dd .menu{position:absolute;top:100%;left:-14px;min-width:220px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh);padding:8px;display:grid;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s}
.hd nav .dd:hover .menu{opacity:1;visibility:visible;transform:none}
.hd nav .dd .menu a{padding:9px 12px;border-radius:6px;font-weight:500}.hd nav .dd .menu a::after{display:none}.hd nav .dd .menu a:hover{background:var(--ivory);color:var(--gold)}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--navy);cursor:pointer;place-items:center}
.burger svg{width:22px;height:22px}
.drawer{position:fixed;inset:0;z-index:95;background:var(--navy);color:#fff;padding:20px var(--gutter);transform:translateX(100%);visibility:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s .4s;display:flex;flex-direction:column;overflow:auto}
.drawer.open{transform:none;visibility:visible;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.drawer .top{display:flex;justify-content:space-between;align-items:center}.drawer .top img{height:36px;width:auto;max-width:none}
.drawer .burger{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.drawer nav{display:flex;flex-direction:column;margin-top:26px}
.drawer nav a{font-family:var(--serif);font-size:26px;font-weight:600;text-decoration:none;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.drawer nav a.sub{font-family:var(--sans);font-size:14px;font-weight:500;padding:8px 0 8px 16px;color:rgba(255,255,255,.93)}
.drawer .foot{margin-top:auto;padding-top:20px;font-size:13px;color:rgba(255,255,255,.93);display:grid;gap:8px}

/* hero */
.hero{background:radial-gradient(900px 500px at 85% 30%,rgba(124,92,196,.35),transparent 60%),radial-gradient(700px 400px at 10% 100%,rgba(201,162,74,.15),transparent 60%),linear-gradient(120deg,var(--navy3),var(--navy) 55%,#1B1E4A);color:#fff;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;min-height:560px;padding-top:40px;padding-bottom:70px}
.hero h1{color:#fff;font-size:clamp(38px,4.8vw,60px);line-height:1.05;margin:8px 0 18px}
.hero h1 em{font-style:normal;color:var(--gold2)}
.hero p{color:rgba(255,255,255,.93);max-width:52ch;font-size:15px}
.hero .eyebrow{color:var(--gold2)}
.hero .tx>*{animation:hero-in .8s cubic-bezier(.2,.7,.2,1) both}
.hero .tx>*:nth-child(2){animation-delay:.1s}.hero .tx>*:nth-child(3){animation-delay:.2s}.hero .tx>*:nth-child(4){animation-delay:.3s}.hero .tx>*:nth-child(5){animation-delay:.4s}
.hfeat{display:flex;gap:22px;flex-wrap:wrap;margin:26px 0 30px}
.hfeat div{display:flex;align-items:center;gap:10px}
.hfeat i{width:38px;height:38px;border-radius:50%;border:1px solid rgba(225,194,122,.6);display:grid;place-items:center;color:var(--gold2);flex:0 0 auto}
.hfeat i svg{width:18px;height:18px}
.hfeat b{display:block;font-size:12.5px;font-weight:700}.hfeat small{font-size:11px;color:rgba(255,255,255,.93)}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap}
.hero .ph{position:relative;margin-top:14px;animation:hero-img 1s .2s cubic-bezier(.2,.7,.2,1) both}
.hero .ph img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;mask:radial-gradient(circle at 50% 50%,#000 62%,transparent 74%);-webkit-mask:radial-gradient(circle at 50% 50%,#000 62%,transparent 74%);animation:floaty 7s ease-in-out infinite}
.hero .ph::before{content:"";position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle,rgba(201,162,74,.28),transparent 62%);z-index:0}
.hero .ph picture{position:relative;z-index:1;display:block}
/* 🔴 SIZED FOR INTER, NOT FOR CORMORANT. "Kashmir" at 27px in the old narrow serif fitted a 108px
   circle; in Inter 800 it is half as wide again and pushed straight through the gold ring. The disc
   is bigger, the word is smaller, and the text block is inset so nothing can touch the border. */
.badge{position:absolute;right:-2%;top:-6%;z-index:3;width:128px;height:128px;border-radius:50%;background:rgba(16,25,58,.78);border:1px solid rgba(225,194,122,.7);display:grid;place-items:center;text-align:center;box-shadow:0 0 0 8px rgba(225,194,122,.08)}
.badge>div{padding:0 16px;max-width:100%}
.badge::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px dashed rgba(225,194,122,.6);animation:spin 26s linear infinite}
.badge b{font-family:var(--serif);font-weight:800;letter-spacing:-.02em;font-size:20px;color:var(--gold2);line-height:1.05;display:block}
.badge small{font-size:8px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.93);line-height:1.35;display:block;margin-top:5px}
.hero .fl{position:absolute;left:-8%;bottom:4%;width:30%;opacity:.95;z-index:2;animation:floaty 9s ease-in-out infinite reverse;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.hero .fl img{border-radius:50%;mask:radial-gradient(circle,#000 45%,transparent 70%);-webkit-mask:radial-gradient(circle,#000 45%,transparent 70%)}

/* stats bar */
.stats{margin-top:-44px;position:relative;z-index:3}
.stats .box{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh)}
.stats .box>div{background:#fff;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:26px 12px 22px;transition:background .3s}
.stats .box>div:hover{background:var(--ivory)}
.stats i{width:46px;height:46px;border-radius:12px;background:rgba(201,162,74,.14);color:var(--gold);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(201,162,74,.28)}
.stats i svg{width:22px;height:22px}
.stats b{font-family:var(--serif);font-size:clamp(28px,2.6vw,36px);font-weight:700;color:var(--navy);display:block;line-height:1;font-variant-numeric:tabular-nums;background:linear-gradient(120deg,var(--navy),#3b2f7a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stats small{font-size:12px;color:var(--muted);line-height:1.35}

/* sections */
.sec{padding:clamp(56px,7vw,90px) 0;position:relative;overflow:hidden;overflow:clip}   /* clip: see body */
.sec>.wrap{position:relative;z-index:1}
.sec.ivory{background:var(--ivory)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.link{font-size:12.5px;font-weight:700;color:var(--gold);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.link svg{width:14px;height:14px;transition:transform .25s}.link:hover svg{transform:translateX(4px)}
/* products */
.pgrid{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 4px;padding:6px 4px 22px;margin:0 -4px;scrollbar-width:thin;scrollbar-color:var(--gold) transparent;overscroll-behavior-x:contain}
.pgrid::-webkit-scrollbar{height:5px}.pgrid::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}
.pgrid .pcard{flex:0 0 min(86vw,540px);scroll-snap-align:start}
.arrows{display:flex;gap:8px}.arrows button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;display:grid;place-items:center;transition:.25s}.arrows button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}.arrows button svg{width:18px;height:18px}
.pcard{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:transform .35s,box-shadow .35s}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.pcard .ph{aspect-ratio:1;overflow:hidden}.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s}
.pcard:hover .ph img{transform:scale(1.07)}
.pcard .tx{padding:26px 24px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.pcard h3{font-size:24px}.pcard p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.65}
.pcard .btn{align-self:flex-start;margin-top:6px}
.pgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pmini{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;text-decoration:none;transition:transform .35s,box-shadow .35s;display:flex;flex-direction:column}
.pmini:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.pmini .ph{aspect-ratio:4/3;overflow:hidden}.pmini .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s}
.pmini:hover .ph img{transform:scale(1.06)}
.pmini .tx{padding:18px 20px 20px;display:grid;gap:6px}
.pmini h3{font-size:22px}.pmini p{margin:0;color:var(--muted);font-size:13.5px}
.pmini .tag{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
/* feature band */
/* 🔴 FOUR CARDS, NOT ONE SLAB (client, 21 Sep 2026: "sahi se isko card banao"). This used to be a
   single navy panel with hairline dividers, pulled up so it touched the hero. It is now four real
   cards on the light ground — the same tile language as the NiskuTech site: rounded white card,
   gold-tinted icon square, title, supporting line, and a lift on hover. */
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* Navy, because that is the theme these four tiles have always carried — just as four separate
   cards now instead of one segmented slab (client, 21 Sep 2026). */
.band>div{background:linear-gradient(158deg,var(--navy2),var(--navy3));border:1px solid rgba(201,162,74,.3);
  border-radius:16px;padding:24px 22px 22px;color:#fff;text-align:left;
  box-shadow:0 20px 40px -26px rgba(11,18,48,.75);
  transition:transform .35s,box-shadow .35s,border-color .35s}
.band>div:hover{transform:translateY(-6px);border-color:rgba(225,194,122,.75);box-shadow:0 30px 52px -24px rgba(11,18,48,.7)}
.band i{width:46px;height:46px;border-radius:13px;margin:0 0 14px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(225,194,122,.22),rgba(225,194,122,.07));color:var(--gold2);
  box-shadow:inset 0 0 0 1px rgba(225,194,122,.32);transition:transform .35s}
.band>div:hover i{transform:translateY(-3px) scale(1.06)}
.band i svg{width:23px;height:23px}
.band b{display:block;font-family:var(--serif);font-weight:800;letter-spacing:-.015em;font-size:16px;
  line-height:1.25;color:#fff;margin-bottom:7px}
.band small{font-size:12.5px;color:rgba(255,255,255,.93);line-height:1.6;display:block}
/* why */
.two{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center}
.two.two-a{grid-template-columns:.8fr 1.2fr}.two.two-b{grid-template-columns:1.2fr .8fr}
.checks{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:10px}
.checks li{display:flex;gap:10px;align-items:center;font-size:14px}
.checks li i{width:20px;height:20px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.checks li i svg{width:12px;height:12px}
.vid{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh)}
.vid img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.vid:hover img{transform:scale(1.04)}
.vid .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--navy);border:0;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.vid .play::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.8);animation:pulse 2s ease-out infinite}
.vid .play svg{width:26px;height:26px;margin-left:4px}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(11,18,48,.92);display:none;place-items:center;padding:20px}
.lightbox.open{display:grid}
.lightbox video{width:min(92vw,960px);border-radius:12px;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox button{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center}
.lightbox button svg{width:20px;height:20px}
/* global reach */
.map{position:relative;border-radius:16px;overflow:hidden;background:var(--navy3);aspect-ratio:16/8;box-shadow:var(--sh)}
.map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.6)}
.map::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 60% 50%,transparent 40%,rgba(11,18,48,.9))}
.map svg{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.map .rt{fill:none;stroke:var(--gold2);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 3px rgba(225,194,122,.9))}
.map.in .rt{animation:dash 2.4s cubic-bezier(.4,0,.2,1) forwards}
.map .rt:nth-of-type(2){animation-delay:.2s}.map .rt:nth-of-type(3){animation-delay:.4s}.map .rt:nth-of-type(4){animation-delay:.6s}.map .rt:nth-of-type(5){animation-delay:.8s}.map .rt:nth-of-type(6){animation-delay:1s}
.map .pt{fill:var(--gold2);filter:drop-shadow(0 0 4px rgba(225,194,122,1))}
.map .og{fill:var(--gold2);transform-box:fill-box;transform-origin:center;animation:pulse 2s ease-out infinite}
/* certs */
.certs{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.two .certs{grid-template-columns:repeat(3,1fr)}
.cert{border:1px solid var(--line);border-radius:12px;background:#fff;aspect-ratio:1.15;display:grid;place-items:center;text-align:center;padding:12px;transition:transform .3s,box-shadow .3s}
.cert:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.cert b{font-family:var(--serif);font-size:22px;color:var(--navy);display:block;line-height:1.1}
.cert small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-top:4px}
.cert i{width:36px;height:36px;color:var(--gold);margin:0 auto 6px;display:grid;place-items:center}.cert i svg{width:100%;height:100%}
/* testimonials */
.tgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.tcard{border:1px solid var(--line);border-radius:14px;padding:26px 24px;background:#fff;display:flex;flex-direction:column;gap:14px;transition:transform .35s,box-shadow .35s}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.tcard .q{font-family:var(--serif);font-size:44px;line-height:.6;color:var(--gold);height:20px}
.tcard p{margin:0;font-size:14px;color:var(--ink);line-height:1.7}
.tcard .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.tcard .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--navy));color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
.tcard b{display:block;font-size:13.5px}.tcard small{color:var(--muted);font-size:12px}
.stars{color:var(--gold);display:flex;gap:2px}.stars svg{width:14px;height:14px;fill:currentColor}
.dots{display:flex;justify-content:center;gap:8px;margin-top:24px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.3s}.dots i.on{background:var(--gold);width:24px;border-radius:4px}
/* cta band */
.ctab{background:linear-gradient(120deg,var(--navy3),var(--navy) 60%,#1B1E4A);border-radius:18px;color:#fff;display:grid;grid-template-columns:.9fr 1.1fr;overflow:hidden;box-shadow:var(--sh)}
.ctab .ph{position:relative;min-height:300px}.ctab .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ctab .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,var(--navy))}
.ctab .tx{padding:36px 36px 36px 10px}
.ctab h2{color:#fff;font-size:clamp(26px,3vw,36px);margin-bottom:8px}
.ctab p{color:rgba(255,255,255,.93);margin:0 0 20px;font-size:14px}
.form{display:grid;gap:12px}
.form .g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.form .g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form input,.form select,.form textarea{height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:13.5px;border-radius:6px;width:100%}
.form textarea{height:96px;padding:12px 14px;resize:vertical}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.form select option{color:var(--ink)}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.55)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold2);background:rgba(255,255,255,.12)}
.form .ok{display:none;padding:10px 14px;border-radius:6px;border:1px solid rgba(127,176,105,.6);background:rgba(127,176,105,.15);font-size:13px}
.form.light input,.form.light select,.form.light textarea{background:#fff;border-color:var(--line);color:var(--ink)}
.form.light input::placeholder,.form.light textarea::placeholder{color:#9aa0ad}
.form.light select{background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.form.light .ok{color:#2f5a2a}
/* footer */
.ft{background:var(--navy3);color:rgba(255,255,255,.93);padding:60px 0 24px;font-size:13px}
.ft .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.5fr;gap:34px}
.ft h4{color:#fff;font-family:var(--sans);font-size:13px;font-weight:700;margin-bottom:14px}
.ft a{display:block;text-decoration:none;padding:4px 0;color:rgba(255,255,255,.93)}.ft a:hover{color:var(--gold2)}
.ft .brand img{height:46px;width:auto;max-width:100%;object-fit:contain;object-position:left;margin-bottom:14px}.ft .brand p{margin:0 0 16px;max-width:30ch;line-height:1.7}
.ft .soc{display:flex;gap:8px}.ft .soc a{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;padding:0}
.ft .soc a svg{width:13px;height:13px}
.ft .ct div{display:flex;gap:10px;align-items:flex-start;padding:5px 0;line-height:1.6}
.ft .ct svg{width:15px;height:15px;color:var(--gold2);flex:0 0 auto;margin-top:3px}
.ft .base{margin-top:40px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px}
.ft .base span a{display:inline;padding:0 0 0 14px}
.wa{position:fixed;right:18px;bottom:18px;z-index:80;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(37,211,102,.8);transition:transform .3s}
.wa:hover{transform:scale(1.08)}.wa svg{width:28px;height:28px}
/* inner pages */
.pband{background:radial-gradient(800px 400px at 80% 20%,rgba(124,92,196,.35),transparent 60%),linear-gradient(120deg,var(--navy3),var(--navy));color:#fff;padding:64px 0 60px;position:relative;overflow:hidden}
.pband .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.pband h1{color:#fff;font-size:clamp(32px,4.4vw,52px);margin:8px 0 12px}
.pband p{color:rgba(255,255,255,.93);max-width:56ch;margin:0}
.pband .eyebrow{color:var(--gold2)}
.pband .ph{border-radius:14px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh);animation:hero-img 1s .15s cubic-bezier(.2,.7,.2,1) both}.pband .ph img{width:100%;height:100%;object-fit:cover}
.pband .tx>*{animation:hero-in .8s cubic-bezier(.2,.7,.2,1) both}.pband .tx>*:nth-child(2){animation-delay:.1s}.pband .tx>*:nth-child(3){animation-delay:.2s}.pband .tx>*:nth-child(4){animation-delay:.3s}
.crumb{font-size:12px;color:rgba(255,255,255,.93);margin-top:18px}.crumb a{color:var(--gold2);text-decoration:none}
.prose{max-width:760px;color:var(--ink);font-size:15.5px;line-height:1.85}
.prose h2{font-size:clamp(26px,2.8vw,34px);margin:36px 0 12px}.prose h3{font-size:22px;margin:26px 0 8px}
.prose p{margin:0 0 14px;color:var(--muted)}.prose ul{padding-left:20px;color:var(--muted)}.prose li{margin:6px 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{border:1px solid var(--line);border-radius:14px;padding:26px 24px;background:#fff;transition:transform .35s,box-shadow .35s}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.card i.big{width:48px;height:48px;border-radius:12px;background:var(--ivory);color:var(--gold);display:grid;place-items:center;margin-bottom:16px}.card i.big svg{width:24px;height:24px}
.card h3{font-size:22px;margin-bottom:8px}.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.card .n{font-family:var(--serif);font-size:44px;color:var(--gold3);line-height:1;margin-bottom:8px;font-weight:600}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step{position:relative;padding:26px 22px 24px;border:1px solid var(--line);border-radius:14px;background:#fff}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--serif);font-size:40px;color:var(--gold);font-weight:600;line-height:1;display:block;margin-bottom:12px}
.step h3{font-size:20px;margin-bottom:6px}.step p{margin:0;color:var(--muted);font-size:13.5px}
.spec{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.spec th,.spec td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec th{width:34%;background:var(--ivory);font-weight:700;color:var(--navy);font-size:13px}
.spec tr:last-child td,.spec tr:last-child th{border-bottom:0}
.faq details{border:1px solid var(--line);border-radius:10px;padding:16px 20px;background:#fff;margin-bottom:10px}
.faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:15px;display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-size:22px;color:var(--gold);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.7}
.kv{display:grid;gap:14px}
.kv>div{display:flex;gap:12px;align-items:flex-start}.kv i{width:42px;height:42px;border-radius:10px;background:var(--ivory);color:var(--gold);display:grid;place-items:center;flex:0 0 auto}.kv i svg{width:20px;height:20px}
.kv b{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.kv a,.kv span{text-decoration:none;color:var(--ink);font-size:14.5px;line-height:1.55}
.post{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;text-decoration:none;display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s}
.post:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.post .ph{aspect-ratio:16/10;overflow:hidden}.post .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s}.post:hover .ph img{transform:scale(1.06)}
.post .tx{padding:20px 22px 22px;display:grid;gap:8px}.post .meta{font-size:11.5px;color:var(--muted)}.post h3{font-size:22px}.post p{margin:0;color:var(--muted);font-size:13.5px}
.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{padding:7px 12px;border:1px solid var(--line);border-radius:999px;font-size:12px;background:#fff;color:var(--navy);font-weight:600}
.pk .card ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:14px}
.cta-line{background:var(--ivory);border:1px solid var(--line);border-radius:14px;padding:26px 28px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cta-line h3{font-size:24px}.cta-line p{margin:4px 0 0;color:var(--muted);font-size:14px}
.art{max-width:760px;margin:0 auto}.art .hero-img{border-radius:14px;overflow:hidden;aspect-ratio:16/9;margin-bottom:30px}.art .hero-img img{width:100%;height:100%;object-fit:cover}

/* responsive */
@media(max-width:1100px){.hd nav{display:none}.burger{display:grid}.stats .box{grid-template-columns:repeat(4,1fr)}.band{grid-template-columns:repeat(2,1fr)}.certs{grid-template-columns:repeat(3,1fr)}.ft .cols{grid-template-columns:1fr 1fr 1fr}.ft .cols .brand,.ft .cols .ct{grid-column:span 3}.steps{grid-template-columns:1fr 1fr}.grid4{grid-template-columns:1fr 1fr}}
@media(max-width:860px){
  .rv.l,.rv.r{transform:translateY(24px)}.rv.z{transform:translateY(24px) scale(.96)}
  main,.sec,.hero,.stats{overflow-x:clip}
  .hd .wrap{height:64px;gap:10px}.hd .logo img{height:36px}.hd .btn.sm{height:36px;padding:0 12px;font-size:11px}.burger{width:38px;height:38px}
  .hero .wrap{grid-template-columns:1fr;min-height:0;padding-top:34px;padding-bottom:64px}
  .hero .ph{max-width:400px;margin:22px auto 0;width:100%}.hero .fl{display:none}.badge{width:104px;height:104px;top:-4%;right:0}.badge b{font-size:17px}.badge small{font-size:7px}.badge>div{padding:0 12px}
  .hero h1{font-size:clamp(34px,9vw,46px)}
  .stats{margin-top:-30px}.stats .box{grid-template-columns:1fr 1fr}.stats .box>div{padding:18px 8px 16px}
  .pgrid3,.two,.two.two-a,.two.two-b,.tgrid,.grid3,.grid2,.pband .wrap,.ctab{grid-template-columns:1fr}
  .pcard{grid-template-columns:1fr}.pcard .ph{aspect-ratio:4/3}.pgrid .pcard{flex-basis:78vw}
  .band{grid-template-columns:1fr 1fr;gap:12px}
  .band>div{padding:18px 16px 16px}
  .band i{width:40px;height:40px;border-radius:11px;margin-bottom:11px}.band i svg{width:20px;height:20px}
  .band b{font-size:14px}.band small{font-size:11.5px}
  .hfeat small{display:none}.hfeat{gap:12px 18px;margin:22px 0 26px}.hfeat i{width:34px;height:34px}
  .certs{grid-template-columns:repeat(3,1fr)}
  .ctab .tx{padding:26px 22px 28px}.form .g3{grid-template-columns:1fr}.form .g2{grid-template-columns:1fr}
  .ft .cols{grid-template-columns:1fr 1fr}.ft .cols .brand,.ft .cols .ct{grid-column:span 2}
  .steps{grid-template-columns:1fr}.grid4{grid-template-columns:1fr}
  .pband .ph{display:none}
  .map{aspect-ratio:16/10}
}
@media(max-width:480px){.hd .logo img{height:32px}.hd .btn.sm{padding:0 10px}.hd .btn.sm svg{display:none}.certs,.two .certs{grid-template-columns:1fr 1fr}.hfeat{gap:14px}.hfeat div{flex:1 1 44%}.ft .cols{grid-template-columns:1fr}.ft .cols .brand,.ft .cols .ct{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hero .tx>*,.hero .ph,.hero .ph img,.badge::before,.vid .play::before,.map .og,.pband .tx>*,.pband .ph{animation:none}}

/* mobile bottom menu */
.mbot{display:none;position:fixed;left:0;right:0;bottom:0;z-index:85;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -12px 34px -18px rgba(16,25,58,.35);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.mbot ul{list-style:none;margin:0;padding:0;display:flex;align-items:flex-end}
.mbot li{flex:1}
.mbot a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px 4px;font-size:10.5px;font-weight:600;color:var(--muted);text-decoration:none;position:relative}
.mbot a svg{width:22px;height:22px}
.mbot a.on{color:var(--gold)}
.mbot a.on::before{content:"";position:absolute;top:-7px;width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--gold)}
.mbot .fab a{margin-top:-30px}
.mbot .fab span{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#34D399,#25D366);color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(37,211,102,.7);border:4px solid #fff}
.mbot .fab span svg{width:28px;height:28px}
@media(max-width:860px){.mbot{display:block}.wa{display:none}body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}}

/* ambient saffron backdrop on light sections */
.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.fx .orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:orb var(--t,22s) ease-in-out infinite alternate}
.fx .orb.g{background:radial-gradient(circle,rgba(225,194,122,.55),rgba(225,194,122,0) 70%)}
.fx .orb.p{background:radial-gradient(circle,rgba(124,92,196,.35),rgba(124,92,196,0) 70%)}
.fx .orb.r{background:radial-gradient(circle,rgba(216,51,31,.22),rgba(216,51,31,0) 70%)}
@keyframes orb{from{transform:translate(0,0) scale(1)}to{transform:translate(var(--dx,40px),var(--dy,-30px)) scale(1.12)}}
.fx .st{position:absolute;width:64px;height:64px;opacity:.5;animation:drift var(--t,18s) ease-in-out infinite alternate;animation-delay:var(--d,0s);will-change:transform}
.fx .st svg{width:100%;height:100%;overflow:visible}
.fx .pt{position:absolute;width:26px;height:26px;opacity:.45;animation:drift var(--t,20s) ease-in-out infinite alternate;animation-delay:var(--d,0s);will-change:transform}
.fx .pt svg{width:100%;height:100%}
@keyframes drift{0%{transform:translate(0,0) rotate(var(--r,0deg))}100%{transform:translate(var(--dx,20px),var(--dy,-40px)) rotate(calc(var(--r,0deg) + 24deg))}}
.fx .mote{position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:0;animation:rise var(--t,12s) linear infinite;animation-delay:var(--d,0s)}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.55}85%{opacity:.35}100%{transform:translateY(-110vh) scale(1.1);opacity:0}}
.sec.ivory .fx .orb{opacity:.45}
@media(max-width:860px){.fx .st:nth-child(n+7),.fx .pt:nth-child(n+7),.fx .mote:nth-child(n+8){display:none}.fx .orb{filter:blur(40px)}}
@media(prefers-reduced-motion:reduce){.fx *{animation:none!important}}

/* ══ 20 Sept: the export brief ══════════════════════════════════════════════════════════════════
   A procurement enquiry form, a numbered "how to check it yourself" list, marketplace buttons and
   the small print that keeps a claim honest. */

/* LABELLED FIELDS. The old form was placeholder-only — the label vanished the moment somebody
   started typing, which on a nine-field business form means re-reading your own answers to work
   out which box is which. */
.form .fl{display:grid;gap:6px}
.form .fl>span{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.93)}
.form.light .fl>span{color:#1C1C1C}
.form .fine{font-size:11.5px;line-height:1.55;color:rgba(255,255,255,.9);margin:2px 0 0}
.form.light .fine{color:#1C1C1C}
.fine{font-size:12.5px;line-height:1.6;color:#1C1C1C}
.fine code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;background:rgba(16,25,58,.07);padding:1px 5px;border-radius:4px}

/* the six checks, as a numbered list with a gold numeral */
.numlist{list-style:none;counter-reset:n;display:grid;gap:14px;margin:0;padding:0}
.numlist li{counter-increment:n;display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.numlist li::before{content:counter(n);grid-row:span 2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,var(--gold),var(--gold2));color:#fff;font-weight:800;font-size:14px}
.numlist li b{font-size:15px;color:var(--ink)}
.numlist li span{grid-column:2;font-size:13.5px;line-height:1.65;color:var(--mut)}

/* marketplace buttons; a storefront with no link yet is shown as unavailable, never as a dead link */
.mk{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.btn.off{opacity:.5;cursor:not-allowed;pointer-events:none}

/* the brand film, offered from the hero itself */
.hero .ph .play.hero-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--navy);border:0;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.hero .ph .play.hero-play::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.8);animation:pulse 2s ease-out infinite}
.hero .ph .play.hero-play svg{width:26px;height:26px;margin-left:4px}
@media(max-width:600px){.hero .ph .play.hero-play{width:56px;height:56px}.hero .ph .play.hero-play svg{width:21px;height:21px}}

/* founder block — the photograph slot stays sized while the real portrait is awaited */
.founder .fph{border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--bg2,#f2efe9)}
.founder .fph img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:860px){
  .form .g3,.form .g2{grid-template-columns:1fr}
  .numlist li{grid-template-columns:28px 1fr;gap:11px}
  .numlist li::before{width:28px;height:28px;font-size:13px}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   ROUND 8 — client review, 21 Sep 2026
   The accent word · the intro film · the client's own photography as a marquee · the marketplace
   strip · and the components their own articles are built from.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the word "Saffron" ──────────────────────────────────────────────────────────────────────
   A script face has almost no x-height next to Inter, so it is set larger and nudged onto the
   baseline rather than left floating above it. */
.sc{font-family:var(--script);font-weight:400;font-style:normal;color:var(--saf);
  font-size:1.34em;line-height:.9;letter-spacing:.01em;padding:0 .04em;display:inline-block;transform:translateY(.055em)}
.pband .sc,.hero .sc{color:var(--saf2)}
h1 .sc{font-size:1.24em}

/* ── the intro (rebuilt 26 Sep 2026 — see intro() in build.mjs) ────────────────────────────────
   Shown from the first paint by `html.pv-in` (set in <head>); three layers inside one fixed overlay:
   the film, the static logo (fallback), and the loader that covers the film until it is playing.
   Every background is the film's own cream (#FEFAF3), so the loader → film hand-over is invisible. */
.intro{position:fixed;inset:0;z-index:3000;background:#FEFAF3;opacity:1;transition:opacity .7s ease;
  touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
.intro.out{opacity:0;pointer-events:none}
/* Sized to the film itself (16:9, as large as fits — never cropped, it is a LOGO film), and its edges
   feathered: the film's cream has a faint grain the flat page colour does not, which on a phone read
   as a band across the screen. */
.intro video{position:absolute;left:50%;top:50%;width:min(100vw,177.78vh);height:auto;aspect-ratio:16/9;
  transform:translate(-50%,-50%);object-fit:contain;background:transparent;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 13%,#000 87%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 13%,#000 87%,transparent);
  mask-composite:intersect}
.intro .il{position:absolute;inset:0;background:#FEFAF3;display:grid;place-items:center;transition:opacity .25s ease}
.intro .il i{display:block;position:relative;width:150px;height:3px;border-radius:3px;background:rgba(16,25,58,.1);overflow:hidden}
.intro .il b{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:var(--saf);transition:width .18s linear}
.intro .il.ind b{width:38%;animation:pvIl 1.1s ease-in-out infinite}
@keyframes pvIl{from{transform:translateX(-100%)}to{transform:translateX(270%)}}
.intro[data-s=film] .il,.intro[data-s=logo] .il{opacity:0;pointer-events:none}
.intro .lg{position:absolute;left:50%;top:50%;width:min(58vw,440px);height:auto;opacity:0;
  transform:translate(-50%,-50%) scale(.94);transition:opacity .6s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.intro[data-s=logo] .lg{opacity:1;transform:translate(-50%,-50%) scale(1)}
.intro .skip{position:absolute;right:clamp(14px,3vw,28px);bottom:max(clamp(14px,3vw,28px),env(safe-area-inset-bottom));
  height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(16,25,58,.18);
  background:rgba(255,255,255,.72);color:var(--navy);font:700 12px/1 var(--sans);letter-spacing:.02em;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;animation:pvSk .4s ease 1s forwards}
@keyframes pvSk{to{opacity:1}}
.intro .skip:hover{background:#fff;border-color:var(--gold)}

/* ── the photo marquee (the client's design, 22 Sep 2026) ─────────────────────────────────────
   320×380 portrait cards drifting left in one unbroken loop, paused under the pointer, faded out at
   both edges. The caption sits ON the photograph over a fade — never on a box ("background for text
   mat rakhna"). 🔴 Spacing is a margin on each card, NOT flex gap: the track slides by exactly half
   its own width, and with gap that half lands half a gap short, so the loop visibly jumps. */
.gal .marquee{position:relative;z-index:1;margin-top:clamp(6px,1.6vw,16px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee .track{display:flex;width:max-content;animation:marq var(--dur,80s) linear infinite}
.marquee:hover .track,.marquee:focus-within .track,.marquee.hold .track,.marquee.off .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee .ph{margin:0 20px 0 0;width:clamp(230px,24vw,320px);aspect-ratio:320/380;flex:0 0 auto;position:relative;
  border-radius:18px;overflow:hidden;background:linear-gradient(160deg,#5B1C0E,#B8430F 55%,#E9A23B);
  box-shadow:0 18px 36px -24px rgba(16,25,58,.55)}
.marquee .ph img{width:100%;height:100%;object-fit:cover;display:block}
.marquee .ph figcaption{position:absolute;inset:auto 0 0 0;padding:48px 18px 15px;color:#fff;font-size:14px;
  font-weight:600;line-height:1.35;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6));text-shadow:0 1px 3px rgba(0,0,0,.45)}
@media (max-width:560px){.marquee .ph{margin-right:14px}.marquee .ph figcaption{font-size:13px;padding:40px 15px 13px}}
@media (prefers-reduced-motion:reduce){
  .marquee .track{animation:none}.marquee [aria-hidden="true"]{display:none}
  .gal .marquee{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none;padding:0 var(--gutter)}
  .marquee .ph{scroll-snap-align:start}}

/* ── marketplace strip ───────────────────────────────────────────────────────────────────────── */
.mkrow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
@media (max-width:560px){.mkrow{grid-template-columns:1fr}}
.mkt{--b:#111;display:flex;flex-direction:column;gap:9px;padding:16px 16px 14px;border-radius:14px;
  background:var(--b);color:#fff;text-decoration:none;box-shadow:0 14px 30px -20px rgba(0,0,0,.6);
  transition:transform .3s,box-shadow .3s}
a.mkt:hover{transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(0,0,0,.7)}
.mkt .mk-art{display:block}
.mkt .mk-art svg{width:auto;height:34px;display:block}
.mkt small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.93);
  display:inline-flex;align-items:center;gap:6px}
.mkt small svg{width:13px;height:13px}
.mkt.off{opacity:.82;cursor:default}

/* ── components the client's own articles are built from ─────────────────────────────────────── */
.prose .sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:22px 0}
.prose .scard{background:var(--ivory);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:10px;padding:14px 16px}
.prose .scard.up{border-left-color:#1E8E4A}
.prose .scard.hl{border-left-color:var(--saf);background:linear-gradient(180deg,#FFF6EE,var(--ivory))}
.prose .sv{font-family:var(--serif);font-weight:800;font-size:clamp(20px,2.4vw,26px);color:var(--navy);line-height:1.1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.prose .scard.up .sv{color:#186B39}.prose .scard.hl .sv{color:var(--saf)}
.prose .sl{display:block;margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.prose .ibox{display:flex;gap:14px;align-items:flex-start;margin:22px 0;padding:16px 18px;border-radius:12px;
  background:var(--ivory);border:1px solid var(--line);border-left:4px solid var(--gold)}
.prose .ibox.ok{border-left-color:#1E8E4A;background:#F1FAF3}
.prose .ibox.warn{border-left-color:var(--saf);background:#FFF6EE}
.prose .ibox .ic{font-size:14px;line-height:1.6}
.prose .ibox .ic strong{display:block;margin-bottom:4px;color:var(--navy)}
.prose .tw{overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch}
.prose .dt{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.prose .dt th{background:var(--navy);color:#fff;text-align:left;padding:11px 14px;font-weight:700;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.prose .dt td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top}
.prose .dt tr:nth-child(even) td{background:rgba(247,245,240,.7)}
.prose .tc{margin:-6px 0 22px;font-size:12px;color:var(--muted)}
.prose .bdg{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.02em}
.prose .bdg.up{background:#E6F5EC;color:#186B39}
.prose .bdg.dn{background:#FDECEA;color:#B02012}
.prose .bdg.na{background:#F1F0EC;color:var(--muted)}
.prose .cl{list-style:none;padding:0;margin:18px 0;display:grid;gap:9px}
.prose .cl li{position:relative;padding-left:28px;line-height:1.6}
.prose .cl li::before{content:"";position:absolute;left:4px;top:.55em;width:11px;height:6px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.prose .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:22px 0}
.prose .fcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--sh)}
.prose .fcard h4{font-size:15px;margin-bottom:6px}

/* ── the enquiry form on the home page ───────────────────────────────────────────────────────── */
.quote-home{background:linear-gradient(180deg,var(--ivory),#fff)}
.quote-home .card{background:#fff}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   THE CLIENT'S CARD + ANIMATION SYSTEM (22 Sep 2026)
   They sent their design as one HTML page (pravaha_international_website(1).html). Their palette is
   blue and orange; the site stays navy and gold (the owner's call), so each piece below is theirs in
   shape and motion and ours in colour: their orange → --saf, their blue → --navy, accents → --gold.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
html{scroll-padding-top:88px}

/* scroll progress — a hairline across the very top of the window */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--saf),var(--gold2))}

/* header: shrinks and frosts once the page moves.
   🔴 The header is sticky, i.e. IN the flow, so shrinking it pulls everything below it up by the
   difference; scroll anchoring then drops scrollY back under the threshold, the header grows again,
   and it flickers forever at that one spot. The bottom margin hands the lost height straight back,
   on the same curve, so the page below never moves. */
.hd{transition:box-shadow .3s,background .35s,margin .35s cubic-bezier(.2,.7,.2,1)}
.hd .wrap,.hd .logo img{transition:height .35s cubic-bezier(.2,.7,.2,1)}
.hd.scrolled{background:rgba(255,255,255,.84);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);margin-bottom:12px}
.hd.scrolled .wrap{height:60px}.hd.scrolled .logo img{height:37px}
@media(max-width:860px){.hd.scrolled{margin-bottom:8px}.hd.scrolled .wrap{height:56px}.hd.scrolled .logo img{height:31px}}
@media(max-width:480px){.hd.scrolled .logo img{height:28px}}

/* hero: each word of the headline rises in on its own beat, and "Saffron" carries a moving sheen */
.hero .tx>h1.split{animation:none}
.split .w{display:inline-block;opacity:0;transform:translateY(40%) rotate(2deg);
  animation:wordrise .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.08s + var(--i,0) * .1s)}
@keyframes wordrise{to{opacity:1;transform:none}}
/* The sheen is a background clipped to the letters. A script face's swashes reach well outside its
   own box, and anything outside the box has no background to show — so the box is padded out to
   cover them and the padding is taken back with negative margins, leaving the layout untouched. */
.hero .sc{background:linear-gradient(100deg,var(--saf2) 20%,#FFE2B8 40%,var(--saf2) 60%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  padding:.3em .22em .34em;margin:-.3em -.18em -.34em;animation:shine 4.5s linear 1.6s infinite}
@keyframes shine{from{background-position:120% 0}to{background-position:-130% 0}}
/* and as the page scrolls away, the hero content sinks, shrinks a touch and fades (wide screens —
   on a phone the bowl sits BELOW the text and would fade before anyone saw it) */
@media(min-width:861px){.hero .wrap{transform:translateY(calc(var(--hp,0) * 60px)) scale(calc(1 - var(--hp,0) * .05));
  opacity:calc(1 - var(--hp,0) * 1.2);transform-origin:left center}}

/* two-tone headings: the first half quiet, the second in a navy → crocus → saffron sweep */
.duo{color:var(--muted)}
.duo b{font-weight:inherit;background:linear-gradient(90deg,var(--navy),#4B3A9E 55%,var(--saf));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* the scroll-lit line: its words darken one by one as it rises up the screen (site.js adds .wd) */
.about-lead{font-family:var(--serif);font-weight:700;letter-spacing:-.012em;font-size:clamp(19px,2vw,24px);
  line-height:1.4;color:var(--ink);margin:16px 0 4px;max-width:32ch}
.about-lead .sf{color:var(--saf)}
.lit .wd{color:rgba(27,31,46,.16);transition:color .25s}
.lit .wd.on{color:var(--ink)}.lit .wd.sf.on{color:var(--saf)}

/* the split card — a photograph beside a navy panel (home: Our Product, In India) */
.ctab{grid-template-columns:1fr 1.25fr;border-radius:24px;background:linear-gradient(120deg,#0A1233,var(--navy) 55%,#1B1E4A);
  box-shadow:0 30px 60px -30px rgba(11,18,48,.55)}
.ctab .ph{min-height:360px}.ctab .ph::after{display:none}
.ctab .tx{padding:clamp(28px,4vw,52px)}
.split .bot{margin:0 0 10px;color:rgba(255,255,255,.93);font-size:14px}.split .bot em{color:var(--gold2)}
.chips.dk .chip{background:rgba(255,255,255,.06);border-color:rgba(225,194,122,.38);color:var(--gold2)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 24px}
.tile{border-radius:16px;padding:18px 18px 16px;min-height:132px;display:flex;flex-direction:column;justify-content:space-between;
  color:#fff;text-decoration:none;box-shadow:0 14px 28px -18px rgba(0,0,0,.6);transition:transform .25s,box-shadow .25s}
.tile:hover{transform:translateY(-3px);box-shadow:0 22px 36px -20px rgba(0,0,0,.7)}
.tile b{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.tile span{font-size:13px;line-height:1.45;opacity:.92;margin-top:12px}
/* the client's charcoal / blue / orange, in the flower's own colours: charcoal, crocus, stigma */
.t-bulk{background:#131A22}.t-retail{background:#1F4FB8}.t-pl{background:#C2500F}   /* the client's palette: black · blue · orange */
.split .btns{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:860px){.ctab{grid-template-columns:1fr}.ctab .ph{min-height:260px}.ctab .tx{padding:28px 22px 30px}}
@media(max-width:560px){.tiles{grid-template-columns:1fr}.tile{min-height:0}.tile span{margin-top:6px}}

/* the staggered cards — centred, white, lifted, with alternate cards dropped (home: Why) */
.sec-head.c{justify-content:center;text-align:center}
.stag{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:start}
.stag>div:nth-child(odd){margin-top:64px}
.wc{background:#fff;border-radius:16px;padding:32px 24px 30px;text-align:center;
  box-shadow:0 10px 30px -12px rgba(16,25,58,.2);transition:transform .25s,box-shadow .25s}
.wc:hover{transform:translateY(-6px);box-shadow:0 18px 40px -14px rgba(16,25,58,.3)}
.wc i{display:block;width:34px;height:34px;margin:0 auto 16px;color:var(--gold)}.wc i svg{width:100%;height:100%}
.wc h3{font-size:18px;margin-bottom:8px}.wc p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
@media(max-width:1100px){.stag{grid-template-columns:1fr 1fr}.stag>div:nth-child(odd){margin-top:0}}
@media(max-width:560px){.stag{grid-template-columns:1fr}}

/* cards draw a saffron line across their top as they arrive (the client's quality cards) */
.card,.wc{position:relative;overflow:hidden}
.card::after,.wc::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;pointer-events:none;
  background:linear-gradient(90deg,var(--saf),var(--gold2));transition:width .9s cubic-bezier(.2,.7,.2,1) .25s}
.card.rv.in::after,.rv.in>.wc::after{width:100%}

/* the sticky process (home): the heading holds still on the left while the steps scroll past on the
   right (wide screens only), and at EVERY width the step nearest the middle of the screen lights up —
   its number turns gold, the others dim. (Phones first got a plain list; owner wanted the same
   lighting there, 23 Sep 2026.) */
.proc{display:grid;gap:26px}
.psteps{list-style:none;margin:0;padding:0}
.psteps li{display:grid;grid-template-columns:56px 1fr;gap:22px;padding-bottom:30px;position:relative}
.psteps li:last-child{padding-bottom:0}
.psteps li::before{content:"";position:absolute;left:27px;top:62px;bottom:6px;width:2px;background:linear-gradient(var(--gold3),var(--line))}
.psteps li:last-child::before{display:none}
.psteps .num{width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:18px;font-variant-numeric:tabular-nums;box-shadow:0 10px 20px -12px rgba(16,25,58,.6);
  transition:background .45s,color .45s,transform .45s}
.psteps h3{font-size:20px;margin:13px 0 4px}.psteps p{margin:0;color:var(--muted);font-size:14.5px;max-width:48ch}
.proc .psteps li{opacity:.38;transform:none;transition:opacity .45s}
.proc .psteps li.active{opacity:1}
.proc .psteps li.active .num{background:var(--gold);color:var(--navy);transform:scale(1.12)}
@media(min-width:900px){
  .proc{grid-template-columns:1fr 1.15fr;gap:72px;align-items:start}
  .proc-h{position:sticky;top:120px}
  .proc .psteps li{padding:34px 0 48px}
  .proc .psteps li:last-child{padding-bottom:10px}
  .proc .psteps li::before{top:96px}
  .proc .psteps h3{font-size:24px}
}

/* filled region pills, and the call-to-action button's slow pulse */
.chip.hl{background:var(--navy);border-color:var(--navy);color:#fff;padding:9px 16px;font-size:12.5px}
.btn.glow{animation:glow 2.8s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(201,162,74,.55)}50%{box-shadow:0 0 0 12px rgba(201,162,74,0)}}

/* typed labels (home trust strip). site.js hides the real text (still read by screen readers) and
   types a copy over it in the same box, so the card never changes size while it types. */
[data-type]{position:relative}
[data-type].typing{color:transparent!important}
[data-type] .ty{position:absolute;left:0;top:0;right:0}
[data-type] .ty::after{content:"";display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-2px;
  background:var(--saf);animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

@media(prefers-reduced-motion:reduce){
  .split .w{animation:none;opacity:1;transform:none}
  .hero .sc{animation:none;-webkit-text-fill-color:currentColor;background:none;color:var(--saf2)}
  .hero .wrap{transform:none!important;opacity:1!important}
  .progress{display:none}.btn.glow{animation:none}
  .lit .wd{color:inherit}.proc .psteps li{opacity:1}
  .card::after,.wc::after{transition:none}
}


/* ══ 26 Sep 2026 — the client's hero, fixed top bar and the target-markets map ═══════════════════ */
/* hero slider: the five banner photos full width, cross-fading (site.js moves .on every 1.5 s) */
.hero.hs{background:var(--navy3)}
.hs .slides{position:absolute;inset:0;z-index:0}
.hs .sl{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.hs .sl.on{opacity:1}
.hs .sl img{width:100%;height:100%;object-fit:cover;transform:scale(1.07);transition:transform 2.6s linear}
.hs .sl.on img{transform:scale(1)}
.hs::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,18,48,.93) 0%,rgba(11,18,48,.8) 38%,rgba(11,18,48,.38) 70%,rgba(11,18,48,.2) 100%),linear-gradient(0deg,rgba(11,18,48,.55),transparent 35%)}
.hs .wrap{display:flex;align-items:center;position:relative;z-index:2;min-height:clamp(540px,80vh,740px);padding-top:56px;padding-bottom:64px}
.hs .tx{max-width:660px}
.hs .btns{margin-top:26px}
.hs .hfeat{margin:30px 0 0}
/* "Saffron" in the hero is set in the headline's own face (client, 26 Sep 2026) — saffron-coloured,
   with the moving sheen, but no script. */
.hs h1 .sc{font-family:inherit;font-weight:inherit;font-size:1em;line-height:inherit;letter-spacing:inherit;transform:none;
  padding:0;margin:0;display:inline;color:var(--saf2);-webkit-text-fill-color:transparent}
@media(max-width:860px){
  .hs::before{background:linear-gradient(180deg,rgba(11,18,48,.72) 0%,rgba(11,18,48,.82) 55%,rgba(11,18,48,.92) 100%)}
  .hs .wrap{min-height:clamp(560px,86vh,700px);padding-top:40px;padding-bottom:48px}
}
@media(prefers-reduced-motion:reduce){.hs .sl img{transform:none;transition:none}}

/* India's retail card sits right under Our Product — one band, two cards */
.sec.pair{padding-top:clamp(6px,1.4vw,14px)}

/* the target-markets map: dotted land, India lit, routes to one city per region */
.map.wm{aspect-ratio:1000/455.56;margin-top:clamp(22px,3vw,34px);background:radial-gradient(ellipse at 68% 45%,#17215A,var(--navy3) 70%)}
.map.wm img{opacity:1;filter:none;object-fit:fill}
.map.wm::after{background:radial-gradient(ellipse at 68% 45%,transparent 50%,rgba(11,18,48,.55))}
.map.wm .india{filter:drop-shadow(0 0 3px rgba(242,160,74,.95)) drop-shadow(0 0 14px rgba(226,102,28,.65));animation:inglow 3.2s ease-in-out infinite}
@keyframes inglow{50%{filter:drop-shadow(0 0 5px rgba(255,190,110,1)) drop-shadow(0 0 26px rgba(226,102,28,.85))}}
.map.wm .rt{stroke-width:1.6}
.map.wm .pt.o{fill:#fff}
.map.wm .lbl{fill:#E1C27A;font:700 11px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;paint-order:stroke;stroke:rgba(11,18,48,.85);stroke-width:3px}
.map.wm .zm{position:absolute;inset:0}
.map.wm .inlbl{position:absolute;z-index:3;left:var(--lx);top:var(--ly);transform:translate(-100%,-50%);text-align:right;pointer-events:none;
  padding:6px 10px;border-radius:10px;background:rgba(11,18,48,.72);border:1px solid rgba(226,102,28,.55);box-shadow:0 0 22px rgba(226,102,28,.35)}
.map.wm .inlbl b{display:block;color:#fff;font-size:clamp(12px,1.5vw,18px);font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1.1}
.map.wm .inlbl small{display:block;color:var(--gold2);font-size:clamp(8.5px,.9vw,11px);font-weight:600;margin-top:2px;white-space:nowrap}
/* phones: the whole world at 350 px is a strip of dust — zoom in on India (the frame is 1.75× the card,
   India centred), keep the other markets as dots and routes running off the edges */
@media(max-width:700px){
  .map.wm{aspect-ratio:1000/620}
  .map.wm .zm{inset:auto;left:50%;top:50%;width:175%;aspect-ratio:1000/455.56;transform:translate(-68%,-44%)}
  .map.wm .lbl{display:none}
  .map.wm .inlbl{left:var(--mx);top:var(--my);transform:translate(-50%,0);text-align:center;padding:4px 9px;border-radius:8px}
}
@media(prefers-reduced-motion:reduce){.map.wm .india{animation:none}}


/* ══ 26 Sep 2026 (round 10) — the client's rules: Inter only · headings orange, blue, white or black ·
   body text black or white · buttons in their orange ═══════════════════════════════════════════════ */
.sc{font-family:inherit;font-weight:inherit;font-style:normal;font-size:1em;line-height:inherit;letter-spacing:inherit;
  transform:none;padding:0;margin:0;display:inline;color:var(--saf)}
h1 .sc{font-size:1em}
.pband .sc,.hero .sc{color:var(--saf2)}
.duo{color:var(--navy)}
.duo b{background:none;-webkit-text-fill-color:currentColor;color:var(--saf)}
.stats b{background:none;-webkit-text-fill-color:currentColor;color:var(--navy)}
.hero h1 em{color:#fff}
.btn.gold{color:#fff}
.btn.gold:hover{background:#C9540F;box-shadow:0 12px 24px -12px rgba(226,102,28,.85)}
.hd nav a.on,.hd nav a:hover{color:var(--saf)}

/* marketplace icons (the client's own artwork) — shown as they are; a link once the store URL exists */
.mkrow{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:560px){.mkrow{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
.mki{display:block;border-radius:14px;overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;
  box-shadow:0 14px 30px -18px rgba(0,0,0,.6)}
.mki img{width:100%;height:auto;display:block}
a.mki:hover{transform:translateY(-4px);box-shadow:0 22px 40px -20px rgba(0,0,0,.7)}

/* language switcher (top bar) + Google's own bar hidden — the page is translated in place */
.tb .tbx{display:flex;align-items:center;gap:22px}
.lang{position:relative}
.lang>button{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  background:transparent;color:#fff;font:600 12px var(--sans);cursor:pointer}
.lang>button svg{width:13px;height:13px;color:var(--gold2)}
.lang>button .chev{width:11px;height:11px;color:#fff}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);z-index:200;list-style:none;margin:0;padding:6px;min-width:190px;max-height:min(60vh,420px);overflow:auto;
  background:#fff;border-radius:12px;box-shadow:0 24px 50px -20px rgba(11,18,48,.55);border:1px solid var(--line)}
.lang ul[hidden]{display:none}
.lang li button{display:flex;width:100%;justify-content:space-between;gap:10px;padding:8px 10px;border:0;border-radius:8px;background:none;
  color:#111;font:500 13px var(--sans);text-align:left;cursor:pointer}
.lang li button:hover,.lang li button[aria-current="true"]{background:var(--ivory);color:var(--saf)}
.lang li button small{color:#555;font-size:11px}
.ft .langs{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px}
.ft .langs button{background:none;border:0;padding:0;color:rgba(255,255,255,.93);font:500 13px var(--sans);cursor:pointer}
.ft .langs button:hover{color:var(--gold2)}
#gt,.goog-te-banner-frame,iframe.skiptranslate,.skiptranslate>iframe,#goog-gt-tt,.goog-te-balloon-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,.VIpgJd-yAWNEb-L7lbkb{display:none!important}
body{top:0!important;position:static!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}
font{background:none!important;box-shadow:none!important}
@media(max-width:760px){.tb .tbx{gap:0}}

/* cookie notice */
.ck{position:fixed;left:16px;bottom:16px;z-index:1500;max-width:420px;background:#fff;color:#111;border-radius:16px;padding:16px 16px 14px;
  box-shadow:0 30px 70px -24px rgba(11,18,48,.6);border:1px solid var(--line);font-size:13px;line-height:1.55;animation:hero-in .45s ease both}
.ck[hidden]{display:none}
.ck b{display:block;font-size:14px;margin-bottom:4px;color:var(--navy)}
.ck p{margin:0}
.ck a{color:var(--saf);font-weight:700}
.ck .row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.ck .btn{height:38px;padding:0 14px;font-size:12px}
@media(max-width:860px){.ck{left:10px;right:10px;bottom:84px;max-width:none}}
.ft .base button.cklink{background:none;border:0;padding:0;margin-left:18px;color:inherit;font:inherit;cursor:pointer;text-decoration:underline}

/* Google Maps on /contact/ waits for consent (or a click) */
.mapc{position:relative;min-height:360px;background:var(--ivory);display:grid;place-items:center;text-align:center}
.mapc iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapc .mapask{display:grid;gap:10px;justify-items:center;padding:24px;color:#111}
.mapc.on .mapask{display:none}

/* ══ 26 Sep 2026 (round 12) ═══════════════════════════════════════════════════════════════════════ */
/* header menu: larger (it now matches the logo), a saffron bar that slides to whatever you point at
   and rests under the page you are on, and a tinted pill for the active item */
.hd nav{gap:2px;position:relative}
.hd nav>a,.hd nav>.dd>a{font-size:15px;font-weight:600;letter-spacing:-.005em;color:#111;padding:10px 12px;border-radius:999px;
  transition:color .25s,background-color .25s,transform .25s}
.hd nav>a::after,.hd nav>.dd>a::after{display:none}
.hd nav>a:hover,.hd nav>.dd>a:hover{color:var(--saf);transform:translateY(-1px)}
.hd nav>a.on,.hd nav>.dd>a.on{color:var(--saf);background:rgba(226,102,28,.09)}
.hd nav .ink{position:absolute;left:0;bottom:1px;height:3px;width:0;border-radius:3px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,var(--saf),#F7A34C);box-shadow:0 0 12px rgba(226,102,28,.55);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
@media(max-width:1240px){.hd nav>a,.hd nav>.dd>a{font-size:14px;padding:9px 9px}}
@media(prefers-reduced-motion:reduce){.hd nav .ink{transition:none}}

/* supply tiles flip over to their photograph (hover; on touch the first tap flips, the second opens) */
.tile.flip{position:relative;display:block;min-height:132px;padding:0;background:none;perspective:900px;box-shadow:none}
.tile.flip:hover{box-shadow:none}
.tile.flip .tf,.tile.flip .tb2{position:absolute;inset:0;border-radius:16px;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);box-shadow:0 18px 32px -22px rgba(0,0,0,.7)}
.tile.flip .tf{display:flex;flex-direction:column;justify-content:space-between;padding:18px 18px 16px}
.tile.flip .tf b{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.tile.flip .tf span{font-size:13px;line-height:1.45;margin-top:12px}
.tile.flip .tb2{transform:rotateY(180deg);overflow:hidden;background:#111}
.tile.flip .tb2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile.flip .tb2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.7))}
.tile.flip .tb2 b{position:absolute;left:14px;bottom:12px;z-index:1;color:#fff;font-size:17px;font-weight:800}
.tile.flip:hover .tf,.tile.flip:focus-visible .tf,.tile.flip.on .tf{transform:rotateY(-180deg)}
.tile.flip:hover .tb2,.tile.flip:focus-visible .tb2,.tile.flip.on .tb2{transform:rotateY(0)}
.t-bulk .tf{background:#F5EEDC;color:#111}                       /* the client: cream, black text */
.t-retail .tf{background:#1F4FB8;color:#fff}
.t-pl .tf{background:#C2500F;color:#fff}
.tile.flip.t-bulk,.tile.flip.t-retail,.tile.flip.t-pl{background:none}
@media(max-width:560px){.tile.flip{min-height:112px}}
@media(prefers-reduced-motion:reduce){.tile.flip .tf,.tile.flip .tb2{transition:none}}

/* …and the card's big photograph turns to the same picture */
.ctab .ph.flipbox{perspective:1600px;overflow:hidden}
.flip3d{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.2,.8,.2,1)}
.flip3d.turned{transform:rotateY(180deg)}
.flip3d .face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.flip3d .face.f1{transform:rotateY(180deg)}
@media(prefers-reduced-motion:reduce){.flip3d{transition:opacity .2s}}

/* registrations strip */
.marquee.regs{position:relative;overflow:hidden;margin-top:clamp(16px,2.2vw,26px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee.regs .track{padding:10px 0 18px}
.regs .rc{display:flex;align-items:center;gap:14px;margin-right:16px;flex:0 0 auto;width:clamp(250px,24vw,300px);padding:18px;
  border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px -24px rgba(16,25,58,.5)}
.regs .rc i{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:rgba(226,102,28,.1);color:var(--saf);flex:0 0 auto}
.regs .rc i svg{width:26px;height:26px}
.regs .rc b{display:block;font-size:16px;font-weight:800;color:var(--navy);line-height:1.2}
.regs .rc span{display:block;font-size:12.5px;color:#1C1C1C;margin-top:3px;line-height:1.35}
.regnote{text-align:center;margin:14px 0 0;font-size:13.5px;color:#1C1C1C;font-weight:600}

/* who we work with */
.inds{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
.ind{flex:0 1 calc(25% - 9px);min-width:200px;display:flex;align-items:center;gap:14px;padding:18px;border-radius:16px;background:#fff;
  border:1px solid var(--line);transition:transform .3s,box-shadow .3s,border-color .3s}
.ind:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:rgba(226,102,28,.45)}
.ind i{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--navy);color:#fff;flex:0 0 auto;transition:background .3s}
.ind:hover i{background:var(--saf)}
.ind i svg{width:22px;height:22px}
.ind b{font-size:15px;color:#111;line-height:1.3}
@media(max-width:560px){.ind{flex:1 1 calc(50% - 6px);min-width:0;flex-direction:column;align-items:flex-start;padding:16px}.ind b{font-size:14px}}

/* five steps: every step up to the one you have reached stays lit, and the line fills behind it */
.proc .psteps li.active{opacity:1}
.proc .psteps li.active .num{background:var(--saf);color:#fff;transform:scale(1.08);box-shadow:0 10px 24px -10px rgba(226,102,28,.8)}
.proc .psteps li.current .num{transform:scale(1.16)}
.proc .psteps li.active::before{background:linear-gradient(var(--saf),#F7A34C)}

.wrap.narrow{max-width:880px}
.cta-line .eyebrow{margin-bottom:6px}
#contact .card{background:#fff}

/* ══ 26 Sep 2026 (round 13) ═══════════════════════════════════════════════════════════════════════ */
/* menu a size larger again */
.hd nav>a,.hd nav>.dd>a{font-size:16px;padding:10px 13px}
@media(max-width:1280px){.hd nav>a,.hd nav>.dd>a{font-size:15px;padding:9px 10px}}
@media(max-width:1180px){.hd nav>a,.hd nav>.dd>a{font-size:14px;padding:9px 8px}}

/* "Why Pravaha" cards: on hover the card floods with navy from the bottom, a saffron edge runs round
   it, the icon turns into a saffron badge and the words go white */
.wc{isolation:isolate;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,color .35s}
.wc::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(160deg,#1B2A6B 0%,var(--navy) 55%,#0B1230 100%);transform:scaleY(0);transform-origin:bottom;
  transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.wc:hover::before{transform:scaleY(1)}
.wc:hover{transform:translateY(-8px);box-shadow:0 28px 50px -22px rgba(16,25,58,.6),0 0 0 2px rgba(226,102,28,.55)}
.wc i{transition:color .35s,background-color .35s,transform .45s cubic-bezier(.2,.8,.2,1);border-radius:14px}
.wc:hover i{color:#fff;background:var(--saf);padding:8px;width:52px;height:52px;transform:translateY(-4px) rotate(-6deg);box-shadow:0 12px 24px -10px rgba(226,102,28,.9)}
.wc h3,.wc p{transition:color .35s}
.wc:hover h3{color:#fff}.wc:hover p{color:rgba(255,255,255,.93)}
.wc:hover::after{width:100%;background:linear-gradient(90deg,var(--saf),#F7A34C)}
@media(prefers-reduced-motion:reduce){.wc::before,.wc,.wc i{transition:none}}

/* where we serve: the India supply story beside a larger India */
.isup{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,4vw,56px);align-items:center}
.flow{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0;counter-reset:f}
.flow li{display:grid;grid-template-columns:46px 1fr;gap:14px;position:relative;padding-bottom:18px}
.flow li:not(:last-child)::after{content:"";position:absolute;left:22px;top:48px;bottom:2px;width:2px;background:linear-gradient(var(--saf),rgba(226,102,28,.15))}
.flow i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--navy);color:#fff}
.flow li:nth-child(1) i{background:var(--saf)}.flow li:nth-child(2) i{background:#1F4FB8}
.flow i svg{width:22px;height:22px}
.flow b{display:block;font-size:16px;color:var(--navy);margin-top:3px}.flow span{display:block;font-size:14px;color:#1C1C1C;line-height:1.5}
.imap{position:relative;border-radius:20px;padding:clamp(14px,2vw,22px);background:radial-gradient(ellipse at 40% 45%,#1A2560,var(--navy3) 72%);box-shadow:var(--sh);overflow:hidden}
.imap svg{display:block;width:100%;height:auto;max-height:560px}
.imap .land{stroke:rgba(247,163,76,.55);stroke-width:.7;filter:drop-shadow(0 0 10px rgba(226,102,28,.25))}
.imap .rt{fill:none;stroke:rgba(247,163,76,.55);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1}
.imap.in .rt{animation:dash 1.4s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(1.1s + var(--i) * .09s)}
.imap .fl{fill:none;stroke:#FFD08A;stroke-width:1.3;stroke-linecap:round;stroke-dasharray:2 9;opacity:0}
.imap.in .fl{animation:flow 2.4s linear infinite,flin .6s ease forwards;animation-delay:calc(2.4s + var(--i) * .09s),calc(2.4s + var(--i) * .09s)}
.imap .src{fill:none;stroke:var(--saf);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 5px rgba(226,102,28,.9))}
.imap.in .src{animation:dash 1.1s cubic-bezier(.4,0,.2,1) .2s forwards}
.imap .srcfl{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:3 10;opacity:0}
.imap.in .srcfl{animation:flow 1.6s linear infinite,flin .5s ease forwards;animation-delay:1.3s,1.3s}
@keyframes flow{to{stroke-dashoffset:-22}}
@keyframes flin{to{opacity:.9}}
.imap .ct{fill:#FFD08A;filter:drop-shadow(0 0 3px rgba(255,208,138,.9))}
.imap .cl{fill:#fff;font:600 8.6px Inter,sans-serif;paint-order:stroke;stroke:rgba(11,18,48,.8);stroke-width:2.2px}
.imap .nd.s{fill:#fff;stroke:var(--saf);stroke-width:2}.imap .nd.h{fill:var(--saf);stroke:#fff;stroke-width:1.6}
.imap .og{fill:var(--saf);transform-box:fill-box;transform-origin:center;animation:pulse 2.2s ease-out infinite}
.imap .nl{fill:#fff;font:800 10.5px Inter,sans-serif;paint-order:stroke;stroke:rgba(11,18,48,.85);stroke-width:2.6px}
.imap .ns{fill:#F7A34C;font:600 7.6px Inter,sans-serif;paint-order:stroke;stroke:rgba(11,18,48,.85);stroke-width:2.2px}
.ilg{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;color:#fff;font-size:12.5px;font-weight:600}
.ilg li{display:flex;align-items:center;gap:7px}
.ilg i{width:12px;height:12px;border-radius:50%;display:inline-block}
.ilg i.s{background:#fff;box-shadow:0 0 0 2px var(--saf)}.ilg i.h{background:var(--saf)}.ilg i.c{background:#FFD08A}
#regions .map.wm{margin-top:clamp(28px,4vw,44px)}
.map.wm .src{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:3 4;opacity:.9}
.map.wm .pt.s{fill:#fff}
@media(max-width:900px){.isup{grid-template-columns:1fr}.imap{max-width:520px;margin:0 auto;width:100%}}
@media(prefers-reduced-motion:reduce){.imap .rt,.imap .src{stroke-dashoffset:0;animation:none}.imap .fl,.imap .srcfl{animation:none;opacity:0}.imap .og{animation:none}}

/* the three marketplace tiles are one identical box (26 Sep 2026: Amazon looked bigger) */
.mki{aspect-ratio:480/312}
.mki img{width:100%;height:100%;object-fit:cover}

/* ══ 26 Sep 2026 (round 15) ═══════════════════════════════════════════════════════════════════════ */
/* the closing CTA band (the client's design): navy, centred, pill buttons — quote + WhatsApp */
.sec.ctaband{background:radial-gradient(900px 420px at 50% 0%,#1B2E7A 0%,transparent 70%),linear-gradient(180deg,#0E1A52 0%,#060D2E 100%);
  color:#fff;text-align:center;padding:clamp(64px,8vw,104px) 0}
.ctaband .eyebrow{color:#F7A34C;letter-spacing:.04em;text-transform:none;font-size:14px;font-weight:700}
.ctaband h2{color:#fff;font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.02em;max-width:16ch;margin:6px auto 0}
.ctaband .sf,.ctaband .sc{color:var(--saf)}
.ctaband p{color:rgba(255,255,255,.93);font-size:16px;margin:16px auto 0;max-width:52ch}
.ctaband .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.btn.pill{border-radius:999px;height:48px;padding:0 24px;font-size:14px}
.btn.gold.pill{box-shadow:0 0 0 3px rgba(226,102,28,.25),0 16px 30px -14px rgba(226,102,28,.9)}
/* NOT ".wa" — that is the floating WhatsApp bubble (position:fixed), and the button went with it */
.btn.wapp{background:#1FAA52;color:#fff}.btn.wapp:hover{background:#18924A;transform:translateY(-2px)}
.btn.wapp svg{width:18px;height:18px}.btn.wapp:hover svg{transform:none}

/* the world map now also shows the spread inside India */
.map.wm .dr{fill:none;stroke:#FFD08A;stroke-width:1;stroke-linecap:round;stroke-dasharray:1.5 3.5;opacity:.95;animation:flow 2.2s linear infinite}
.map.wm .ct{fill:#FFD08A;filter:drop-shadow(0 0 2px rgba(255,208,138,.9))}
.ilg.dk{color:#111;margin-top:14px;justify-content:center}
.ilg i.x{background:linear-gradient(90deg,var(--saf),#F7A34C);width:22px;height:4px;border-radius:3px}
#regions .chips{margin-bottom:4px}
@media(prefers-reduced-motion:reduce){.map.wm .dr{animation:none}}

/* a map in every footer, at the client's pin — behind the same consent as the contact page */
.ft .fmap{margin-top:30px;border-radius:16px;overflow:hidden;min-height:280px;background:radial-gradient(ellipse at 50% 40%,#18245E,#0B1230 75%);
  border:1px solid rgba(255,255,255,.1)}
.ft .fmap .mapask{color:#fff}
.ft .fmap .mapask b{font-size:17px}
.ft .fmap .mapask span{color:rgba(255,255,255,.93);font-size:13px;max-width:52ch}
.ft .fmap .mapask small{color:rgba(255,255,255,.75);font-size:11.5px}
.ft .fmap .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
@media(max-width:560px){.ft .fmap{min-height:240px}}
/* 🔴 the empty map frame sat ON TOP of the "Show the map" button and swallowed the click — it now stays
   hidden until the map is actually loaded, and the prompt sits above it */
.mapc iframe{visibility:hidden}
.mapc.on iframe{visibility:visible}
.mapc .mapask{position:relative;z-index:1}

/* registrations as the client's design has them: 280×370 cards, certificate area on top */
.regs .cert{width:280px;height:370px;margin-right:18px;flex:0 0 auto;border-radius:14px;background:#fff;border:1px solid var(--line);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 36px -28px rgba(16,25,58,.5);transition:transform .35s,box-shadow .35s}
.regs .cert:hover{transform:translateY(-6px);box-shadow:0 26px 44px -24px rgba(16,25,58,.55)}
.regs .cert .img{flex:1;background:#FBF6EC;display:grid;place-items:center;overflow:hidden}
.regs .cert .img img{width:100%;height:100%;object-fit:contain;background:#fff}
.regs .cert .ph0{display:grid;justify-items:center;gap:12px;text-align:center;padding:44px 34px;border:1.5px dashed #D8CCB4;border-radius:12px;color:#1C1C1C;font-size:12.5px;line-height:1.45}
.regs .cert .ph0 i{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:rgba(226,102,28,.1);color:var(--saf)}
.regs .cert .ph0 i svg{width:28px;height:28px}
.regs .cert .t{padding:16px 18px;border-top:1px solid var(--line)}
.regs .cert .t b{display:block;font-size:16px;font-weight:800;color:#1F4FB8;line-height:1.25}
.regs .cert .t span{display:block;font-size:13px;color:#1C1C1C;margin-top:3px}
@media(max-width:560px){.regs .cert{width:230px;height:310px;margin-right:14px}.regs .cert .ph0{padding:30px 22px}}
/* the old credential tiles (.cert, grid + padding + aspect-ratio) must not reach the registration cards */
.regs .cert{padding:0;aspect-ratio:auto;place-items:stretch;text-align:left}
.regs .cert .img{width:100%}
.regs .cert .ph0 i{margin:0}
/* accreditation logos in the certificate cards: white panel, logo contained with breathing room */
.regs .cert.acc{height:320px}
.regs .cert.acc .img{background:#fff;padding:28px 30px}
.regs .cert.acc .img img{width:100%;height:100%;max-height:170px;object-fit:contain;background:none;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.regs .cert.acc:hover .img img{transform:scale(1.06)}
.regs .cert.acc .t{background:#FBF6EC}
@media(max-width:560px){.regs .cert.acc{height:270px}.regs .cert.acc .img{padding:22px}}
@media(max-width:560px){.regs .cert.acc{height:300px}.regs .cert.acc .img{padding:18px;min-height:0}.regs .cert.acc .img img{max-height:150px}}