/* ==========================================================
   KRATOVIX — visual language: Indian print & hoarding
   Paper #E9E3D6 (oat, not cream) · Ink #16130F (warm black)
   Indigo #1B2A6B (structure) · Rani #E01E5A (the one loud accent)
   Turmeric #E8A312 (highlight, used sparingly)
   Display: Anton (poster) · Body: Archivo · Quote: Instrument Serif
   ========================================================== */

:root{
  /* TWO-COLOUR SYSTEM — off-white + near-black, with one accent.
     Everything else is a tint of these. */
  --paper:#FAF8F5;          /* off-white, the dominant surface */
  --paper2:#F1EEE9;         /* one step down, for alternating sections */
  --ink:#17171A;            /* near-black, the second dominant */
  --ink2:#232329;           /* slightly lifted dark, for section variety */
  --ink-70:rgba(23,23,26,.68);
  --ink-45:rgba(23,23,26,.45);
  --accent:#F0603E;         /* coral for DARK surfaces (5.49:1 on ink, 4.80:1 on ink2) */
  --accent-text:#BE3B20;    /* deeper coral for LIGHT surfaces (5.16:1 on paper, 4.73:1 on paper2, white 5.47:1 on it) */
  --line:rgba(23,23,26,.13);

  /* legacy names re-pointed at the new system */
  --indigo:var(--ink2); --rani:var(--accent); --rani-text:var(--accent-text); --turmeric:var(--accent);

  /* ONE typeface. Plus Jakarta Sans — modern, highly readable, good at
     small sizes and on mobile. No condensed display face, no serif. */
  --d:'Plus Jakarta Sans',system-ui,sans-serif;
  --b:'Plus Jakarta Sans',system-ui,sans-serif;
  --s:'Plus Jakarta Sans',system-ui,sans-serif;
  --wrap:1220px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:78px}
body{background:var(--paper);color:var(--ink);font-family:var(--b);font-size:17px;line-height:1.62;overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
/* subtle paper tooth */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:radial-gradient(rgba(22,19,15,.05) 1px,transparent 1px);background-size:4px 4px;mix-blend-mode:multiply}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--rani);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px;position:relative;z-index:2}
.wrap.narrow{max-width:800px}
.skip{position:absolute;left:-999px;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:200}
.skip:focus{left:10px;top:10px}

/* ---------- type ---------- */
.poster{font-family:var(--d);line-height:1.05;letter-spacing:-.025em;font-weight:800}
.dh{font-family:var(--d);font-size:clamp(1.75rem,3.6vw,2.9rem);line-height:1.12;letter-spacing:-.02em;font-weight:700}
.dh em,.poster em{font-style:normal;color:var(--accent-text);font-weight:700}
.dh.light,.poster.light{color:var(--paper2)}
.kicker{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--rani-text);margin-bottom:16px}
.kicker.light{color:var(--turmeric)}
.sec-sub{max-width:60ch;color:var(--ink-70);font-size:1.05rem;margin-top:14px}
.sec-sub.light{color:rgba(242,237,227,.72)}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.08em;font-size:.72rem;font-weight:700;text-transform:uppercase}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 24px;font-weight:700;font-size:.9rem;
  letter-spacing:.03em;text-transform:uppercase;cursor:pointer;border:1px solid var(--line);background:none;transition:.18s;border-radius:0}
.btn-ink{background:var(--ink);color:var(--paper2)}
.btn-ink:hover{background:var(--indigo);border-color:var(--indigo)}
.btn-rani{background:var(--rani);border-color:var(--rani);color:#fff}
.btn-rani:hover{background:var(--ink);border-color:var(--ink)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper2)}
.btn-lg{padding:17px 32px;font-size:.95rem}
.brief .btn-line,.local .btn-line{border-color:var(--paper2);color:var(--paper2)}
.brief .btn-line:hover,.local .btn-line:hover{background:var(--paper2);color:var(--ink)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:30px;height:66px}
.logo{font-family:var(--d);font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase}
.logo sup{font-family:var(--b);font-size:.5rem;font-weight:700;vertical-align:super}
.nav-links{display:flex;gap:24px;margin-left:auto;font-size:.85rem;font-weight:500}
.nav-links a{position:relative;padding:3px 0}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--rani);transition:.22s}
.nav-links a:hover::after{width:100%}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer;margin-left:auto;
  min-width:44px;min-height:44px;align-items:center;justify-content:center}
.nav-toggle span{width:24px;height:2.5px;background:var(--ink);transition:.2s}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,6vw,74px) 0 clamp(44px,6vw,80px);position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;right:-8%;top:8%;width:38vw;height:38vw;max-width:460px;max-height:460px;
  border:2px solid var(--line);border-radius:50%;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:start}
h1.poster{font-size:clamp(2.3rem,5vw,4rem);font-weight:800}
h1.poster span{display:block}
h1.poster .l3{color:var(--ink-45)}
h1.poster .l4{font-size:.5em;margin-top:.16em}
.hero-lede{font-size:clamp(1.05rem,1.55vw,1.24rem);max-width:44ch;margin-top:26px;color:var(--ink-70)}
.hero-lede b{color:var(--ink);font-weight:700}
.hero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}

/* dossier stack */
.stack{display:grid;gap:14px}
.dossier{background:var(--paper2);border:1px solid var(--line);padding:18px 20px;
  transition:transform .22s,box-shadow .22s}
.dossier:hover{transform:translate(-3px,-3px);}
.dossier.t-1{}
.dossier.t-2{}
.dossier.t-3{}
.dossier:hover.t-1,.dossier:hover.t-2,.dossier:hover.t-3{transform:translate(-3px,-3px) rotate(0)}
.dossier header{display:flex;justify-content:space-between;align-items:center;border-bottom:1.5px solid var(--line);padding-bottom:8px;margin-bottom:12px}
.d-tag{font-size:.58rem;font-weight:700;letter-spacing:.15em;color:var(--rani-text)}
.d-no{font-family:var(--d);font-size:1rem;color:var(--ink-45)}
.dossier h3{font-family:var(--d);font-size:1.35rem;letter-spacing:.01em;line-height:1.05}
.d-sub{font-size:.82rem;color:var(--ink-70);margin-bottom:12px}
.dossier dl{display:grid;gap:6px;margin-bottom:12px}
.dossier dl div{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;border-bottom:1px dotted var(--line);padding-bottom:5px}
.dossier dt{color:var(--ink-70)}
.dossier dd{font-weight:700;font-variant-numeric:tabular-nums}
.dossier dd.hi{color:var(--ink)}
.dossier dd.lo{color:var(--rani-text)}
.d-note{font-size:.96rem;color:var(--ink-70);line-height:1.4}
.dossier.rejected{background:transparent;border-style:dashed;box-shadow:none;opacity:.72}
.dossier.rejected:hover{box-shadow:none;opacity:1}
.dossier.rejected .d-tag{color:var(--ink-45)}
.stack-note{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);margin-top:14px;text-align:right;font-weight:700}

/* ---------- marquee ---------- */
.marquee{background:var(--ink);color:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:11px 0;position:relative;z-index:2}
.marq-in{display:flex;gap:0;white-space:nowrap;animation:marq 34s linear infinite;width:max-content}
.marq-in span{font-family:var(--d);font-size:.95rem;letter-spacing:.06em;padding:0 22px;
  display:inline-flex;align-items:center;gap:22px}
.marq-in span::after{content:'◆';color:var(--turmeric);font-size:.55rem}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec.pad{padding:clamp(58px,7.5vw,104px) 0}
.sec.alt{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:760px;margin-bottom:44px}

/* ledger */
.ledger{list-style:none;counter-reset:l;border-top:1px solid var(--line)}
.ledger li{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.ledger .lno{font-size:1.7rem;color:var(--rani);line-height:1}
.ledger h3{font-family:var(--d);font-size:1.28rem;letter-spacing:.01em;margin-bottom:6px}
.ledger p{color:var(--ink-70);max-width:70ch;font-size:.98rem}

/* ---------- SIGNATURE: FILTER ---------- */
.filter{background:var(--ink);color:var(--paper2);padding:clamp(58px,7.5vw,100px) 0;border-bottom:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.f-sticky{position:sticky;top:92px}
.f-count{margin-bottom:22px}
.f-num{display:block;font-family:var(--d);font-size:clamp(2.6rem,6vw,4.6rem);line-height:.9;color:var(--turmeric);
  font-variant-numeric:tabular-nums;transition:color .3s}
.f-lab{display:block;font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(242,237,227,.6);margin-top:8px}
.dots{display:grid;grid-template-columns:repeat(30,1fr);gap:4px;margin-bottom:18px}
.dots i{aspect-ratio:1;background:var(--turmeric);border-radius:50%;transition:background .45s,opacity .45s,transform .45s}
.dots i.out{background:rgba(242,237,227,.14);transform:scale(.62)}
.f-legend{font-size:.72rem;color:rgba(242,237,227,.6);display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.sw{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px}
.sw.on{background:var(--turmeric)}
.sw.off{background:rgba(242,237,227,.2)}
.f-samp{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(242,237,227,.38);margin-top:16px;font-weight:700}
.f-steps{display:grid;gap:0}
.f-step{padding:min(13vh,105px) 0;opacity:.28;transition:opacity .45s}
.f-step.on{opacity:1}
.f-step:first-child{padding-top:0}
.f-step:last-child{padding-bottom:min(8vh,60px)}
.f-step h3{font-family:var(--d);font-size:clamp(1.4rem,2.4vw,2.05rem);line-height:1.02;margin-bottom:12px}
.f-step.on h3{color:var(--turmeric)}
.f-step p{color:rgba(242,237,227,.76);max-width:46ch}
.f-step p b{color:var(--paper2)}

/* ---------- vs ---------- */
.vs{display:grid;grid-template-columns:1fr 1.25fr;gap:0;border:1px solid var(--line)}
.vs-col{padding:30px 28px}
.vs-bad{background:var(--paper);border-right:1px solid var(--line)}
.vs-good{background:var(--ink);color:var(--paper2)}
.vs-col h3{font-family:var(--d);font-size:1.3rem;margin-bottom:18px;letter-spacing:.02em}
.vs-bad h3{color:var(--ink-45)}
.vs-good h3{color:var(--turmeric)}
.vs-col ol{list-style:none;counter-reset:v;display:grid;gap:9px}
.vs-col li{counter-increment:v;display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:.95rem}
.vs-col li::before{content:counter(v,decimal-leading-zero);font-weight:700;font-size:.7rem;padding-top:5px;opacity:.55}
.vs-bad li{color:var(--ink-70)}
.vs-good li{color:rgba(242,237,227,.9)}
.vs-out{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:1.02rem}
.vs-good .vs-out{border-color:rgba(242,237,227,.22);color:var(--turmeric)}

/* ---------- signals ---------- */
.signals{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.signals article{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 24px;transition:.2s}
.signals article:hover{background:var(--indigo);color:var(--paper2)}
.s-no{font-family:var(--d);font-size:2.1rem;color:var(--rani);display:block;line-height:1;margin-bottom:12px}
.signals article:hover .s-no{color:var(--turmeric)}
.signals h3{font-family:var(--d);font-size:1.14rem;margin-bottom:8px;letter-spacing:.01em}
.signals p{font-size:.93rem;color:var(--ink-70)}
.signals article:hover p{color:rgba(242,237,227,.82)}
.frame-note{margin-top:30px;border-left:5px solid var(--turmeric);background:var(--paper2);padding:20px 24px}
.frame-note p{font-size:.96rem;color:var(--ink-70);max-width:88ch}
.frame-note i{color:var(--ink)}

/* ---------- hyperlocal ---------- */
.local{background:var(--indigo);color:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.loc{display:grid;grid-template-columns:.8fr 1.2fr;gap:34px;align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--paper2);color:var(--ink);padding:8px 15px;font-size:.82rem;
  font-weight:600;cursor:pointer;transition:.16s}
.chip:hover{background:var(--turmeric)}
.chip.on{background:var(--rani);border-color:var(--rani);color:#fff}
.local .chip{border-color:rgba(242,237,227,.35);background:transparent;color:var(--paper2)}
.local .chip:hover{background:rgba(242,237,227,.14)}
.local .chip.on{background:var(--turmeric);border-color:var(--turmeric);color:var(--ink)}
.loc-brief{margin-top:22px;border-top:1px solid rgba(242,237,227,.24);padding-top:18px;display:grid;gap:9px}
.loc-brief .r{display:flex;justify-content:space-between;gap:14px;font-size:.88rem}
.loc-brief .r span:first-child{color:rgba(242,237,227,.62)}
.loc-brief .r span:last-child{font-weight:600;color:var(--paper);text-align:right}
.loc-out{display:grid;gap:12px}
.lc{background:var(--paper2);color:var(--ink);border:1px solid var(--line);padding:18px 20px;}
.lc.no{background:transparent;color:var(--paper2);border-style:dashed;border-color:rgba(242,237,227,.4);box-shadow:none}
.lc h3{font-family:var(--d);font-size:1.2rem;margin-bottom:3px}
.lc .m{font-size:.78rem;color:var(--ink-70);margin-bottom:9px}
.lc.no .m{color:rgba(242,237,227,.6)}
.lc .w{font-size:.92rem}
.lc .w b{color:var(--ink)}
.lc.no .w b{color:var(--turmeric)}
.loc-line{font-family:var(--d);font-size:clamp(1.4rem,3.4vw,2.5rem);margin-top:44px;text-align:center;
  color:rgba(242,237,227,.35)}
.loc-line em{font-style:normal;color:var(--accent);font-weight:700}

/* ---------- campaigns ---------- */
.camps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.camp{background:var(--paper);border:1px solid var(--line);padding:22px;text-align:left;cursor:pointer;width:100%;transition:.2s}
.camp:hover{}
.camp.open{}
.camp h3{font-family:var(--d);font-size:1.16rem;margin-bottom:7px}
.camp .ob{font-size:.9rem;color:var(--ink-70)}
.camp-more{max-height:0;overflow:hidden;transition:max-height .34s,opacity .28s;opacity:0}
.camp.open .camp-more{max-height:360px;opacity:1;margin-top:16px;border-top:1.5px solid var(--line);padding-top:14px}
.cr{display:grid;grid-template-columns:84px 1fr;gap:10px;padding:5px 0;font-size:.86rem}
.cr b{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rani-text);padding-top:3px}
.cr span{color:var(--ink-70)}

/* ---------- industries ---------- */
.chips.ind{margin-bottom:26px}
.ind-out{border:1px solid var(--line);background:var(--paper2);padding:28px;min-height:190px}
.ind-out h3{font-family:var(--d);font-size:1.5rem;margin-bottom:18px}
.ind-cols{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.ind-cols h4{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--rani-text);margin-bottom:8px}
.ind-cols p{font-size:.96rem;color:var(--ink-70)}

/* ---------- steps ---------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-left:1px solid var(--line);border-top:1px solid var(--line)}
.steps li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 22px}
.steps span{font-family:var(--d);font-size:1.7rem;color:var(--rani);display:block;line-height:1;margin-bottom:10px}
.steps h3{font-family:var(--d);font-size:1.12rem;margin-bottom:7px}
.steps p{font-size:.9rem;color:var(--ink-70)}

/* ---------- knowledge (AI/SEO-readable, static) ---------- */
.glance{border-left:5px solid var(--rani);background:var(--paper2);padding:20px 26px;margin-bottom:34px}
.glance p{font-size:.97rem;color:var(--ink-70);max-width:96ch}
.glance p b{color:var(--ink);font-family:var(--b);font-weight:700}
.kg{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.kg article{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 22px}
.kg h3{font-family:var(--d);font-size:1.02rem;letter-spacing:.005em;line-height:1.15;margin-bottom:10px}
.kg p{font-size:.88rem;color:var(--ink-70)}
.kg p b{color:var(--ink);font-family:var(--b);font-weight:700}

/* ---------- proof (continued) ---------- */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:34px}
.proof article{border-top:4px solid var(--ink);padding-top:16px}
.proof h3{font-family:var(--d);font-size:1.06rem;margin-bottom:7px}
.proof p{font-size:.92rem;color:var(--ink-70)}
.cs{border:2.5px dashed var(--ink);padding:30px;position:relative;background:var(--paper2)}
.cs-stamp{display:inline-block;font-family:var(--d);font-size:.86rem;letter-spacing:.1em;
  border:2.5px solid var(--rani-text);color:var(--rani-text);padding:6px 14px;margin-bottom:16px}
.cs p{max-width:78ch;color:var(--ink-70);margin-bottom:10px}
.cs .cs-strong{color:var(--ink);font-size:1.06rem;margin-bottom:0}

/* ---------- Q&A ---------- */
.qa-chips{margin-bottom:26px}
.qa-out{display:grid;gap:0;border-top:1px solid var(--line)}
.qi{border-bottom:1px solid var(--line)}
.qi button{width:100%;display:flex;justify-content:space-between;gap:18px;align-items:center;background:none;border:0;
  padding:18px 0;cursor:pointer;text-align:left;font-family:var(--d);font-size:1.02rem;letter-spacing:.01em}
.qi button:hover{color:var(--rani-text)}
.qi .pm{font-family:var(--b);font-size:1.3rem;color:var(--rani-text);flex-shrink:0;line-height:1}
.qi .a{max-height:0;overflow:hidden;transition:max-height .32s,opacity .26s;opacity:0}
.qi.open .a{max-height:340px;opacity:1;padding-bottom:20px}
.qi .a p{color:var(--ink-70);max-width:76ch;font-size:.98rem}

/* ---------- brief ---------- */
.brief{background:var(--ink);color:var(--paper2);border-top:1px solid var(--line)}
.bf{border:2px solid rgba(242,237,227,.3);padding:28px;margin-top:26px;background:rgba(242,237,227,.03)}
.bf-top{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.bf-step{color:var(--turmeric);flex-shrink:0}
.bf-bar{flex:1;height:3px;background:rgba(242,237,227,.18)}
.bf-bar i{display:block;height:100%;background:var(--turmeric);width:14%;transition:width .34s}
.bf h3{font-family:var(--d);font-size:clamp(1.3rem,2.6vw,1.9rem);margin-bottom:8px;line-height:1.04}
.bf .qs{color:rgba(242,237,227,.66);font-size:.94rem;margin-bottom:20px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.opt{background:transparent;border:2px solid rgba(242,237,227,.28);color:var(--paper2);padding:14px 16px;
  text-align:left;cursor:pointer;font-size:.93rem;transition:.16s}
.opt:hover{border-color:var(--turmeric)}
.opt.on{background:var(--turmeric);border-color:var(--turmeric);color:var(--ink);font-weight:600}
.fields{display:grid;gap:13px}
.fields label{display:block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:rgba(242,237,227,.6);margin-bottom:6px}
.fields input,.fields textarea{width:100%;background:transparent;border:0;border-bottom:2px solid rgba(242,237,227,.3);
  padding:9px 0;font-size:1rem;color:var(--paper2)}
.fields input:focus,.fields textarea:focus{border-bottom-color:var(--turmeric);outline:none}
.fields textarea{min-height:74px;resize:vertical;font-family:var(--b)}
.bf-nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px}
.done{padding:8px 0}
.done .st{display:inline-block;font-family:var(--d);border:2.5px solid var(--turmeric);
  color:var(--turmeric);padding:7px 15px;margin-bottom:20px;font-size:.9rem;letter-spacing:.08em}
.done p{color:rgba(242,237,227,.76);max-width:52ch;margin-bottom:10px}
.recap{margin-top:22px;border-top:1px solid rgba(242,237,227,.24)}
.recap .rr{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid rgba(242,237,227,.12);font-size:.88rem}
.recap .rr span:first-child{color:rgba(242,237,227,.6)}
.recap .rr span:last-child{font-weight:700;color:var(--turmeric);text-align:right}
.dnote{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,237,227,.4);margin-top:18px;font-weight:700}

.bf-error{background:rgba(224,30,90,.14);border:2px solid var(--rani);color:var(--paper2);padding:13px 16px;margin-top:16px;font-size:.92rem;font-weight:600}
.bf-error:focus{outline:2.5px solid var(--turmeric);outline-offset:2px}
.fields input[aria-invalid="true"]{border-bottom-color:var(--rani)}
.f-err{color:#FF8FAE;font-size:.8rem;margin-top:6px}

/* toast — brief, non-blocking notice; replaces native alert() */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);
  background:var(--ink);color:var(--paper2);border:2px solid var(--turmeric);padding:13px 20px;
  font-size:.9rem;font-weight:600;max-width:88vw;text-align:center;opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s;z-index:300}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- footer ---------- */
.foot{background:var(--paper);border-top:1px solid var(--line);padding:clamp(50px,6vw,80px) 0 34px}
.foot-cta{text-align:center;padding-bottom:52px;border-bottom:1px solid var(--line);margin-bottom:44px}
.fc{font-size:clamp(2.3rem,8vw,5.4rem);margin-bottom:30px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:38px;margin-bottom:34px}
.foot-grid p{font-size:.92rem;color:var(--ink-70);margin-top:12px;max-width:44ch}
.foot-grid h4{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;margin-bottom:13px;color:var(--ink-45)}
.foot-grid ul{list-style:none;display:grid;gap:8px}
.foot-grid ul a{font-size:.92rem;color:var(--ink-70)}
.foot-grid ul a:hover{color:var(--rani-text)}
.legal{font-size:.72rem;color:var(--ink-45);border-top:1px solid var(--line);padding-top:20px;max-width:96ch}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .hero-grid,.f-grid,.loc{grid-template-columns:1fr}
  /* keep the counter pinned so the number visibly changes while reading the steps */
  .f-sticky{position:sticky;top:66px;z-index:4;background:var(--ink);
    padding:14px 0 12px;margin-bottom:6px;box-shadow:0 14px 18px -8px var(--ink)}
  .dots{grid-template-columns:repeat(40,1fr);gap:2.5px;margin-bottom:12px}
  .f-num{font-size:clamp(2.2rem,10vw,3.2rem)}
  .f-count{margin-bottom:14px}
  .f-samp{display:none}
  .f-step{padding:min(9vh,64px) 0}
  .f-step:first-child{padding-top:12px}
  .signals,.camps{grid-template-columns:1fr 1fr}
  .steps,.proof,.kg{grid-template-columns:1fr 1fr}
  .hero::after{display:none}
}
@media(max-width:700px){
  .chip{padding:11px 16px;min-height:44px;display:inline-flex;align-items:center}
  body{font-size:16px}
  .nav-links{display:none;position:absolute;top:66px;left:0;right:0;background:var(--paper);flex-direction:column;
    gap:0;padding:10px 26px 18px;border-bottom:1px solid var(--line)}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav-cta{display:none}
  .nav-toggle{display:flex}
  .nav.open .nav-toggle span:first-child{transform:translateY(3.7px) rotate(45deg)}
  .nav.open .nav-toggle span:last-child{transform:translateY(-3.7px) rotate(-45deg)}
  .signals,.camps,.steps,.proof,.vs,.ind-cols,.opts,.foot-grid,.kg{grid-template-columns:1fr}
  .vs-bad{border-right:0;border-bottom:1px solid var(--line)}
  .ledger li{grid-template-columns:40px 1fr;gap:12px}
  .hero-cta .btn{width:100%}
  .stack-note{text-align:left}
  .steps li,.signals article{padding:20px 18px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .marq-in{animation:none}
  .f-step{opacity:1}
}

/* ==========================================================
   MULTI-PAGE ADDITIONS
   ========================================================== */

/* ---------- dropdown nav ---------- */
.nav-links{position:relative}
.nav-item{position:relative}
.nav-item>a{display:inline-flex;align-items:center;gap:6px}
.nav-item>a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--rani);transition:.22s}
.nav-item>a:hover::after,.nav-item.is-current>a::after{width:100%}
.nav-item.is-current>a{font-weight:700}
.caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s;flex-shrink:0;opacity:.5}
.nav-item:hover .caret,.nav-item:focus-within .caret{transform:rotate(-135deg) translateY(-2px);opacity:1}
.drop{position:absolute;top:100%;left:-16px;min-width:250px;background:var(--paper);border:1px solid var(--line);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;z-index:120}
.nav-item:hover .drop,.nav-item:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:10px 12px;font-size:.88rem;border-bottom:1px solid var(--line)}
.drop a:last-child{border-bottom:0}
.drop a:hover{background:var(--ink);color:var(--paper2)}
.drop a b{display:block;font-weight:700}
.drop a span{display:block;font-size:.76rem;color:var(--ink-45);margin-top:2px}
.drop a:hover span{color:rgba(242,237,227,.7)}

/* ---------- page hero (interior pages) ---------- */
.phero{padding:clamp(40px,5.5vw,74px) 0 clamp(30px,4vw,50px);border-bottom:1px solid var(--line);position:relative}
.phero.on-ink{background:var(--ink);color:var(--paper2)}
.phero.on-indigo{background:var(--indigo);color:var(--paper2)}
.crumb{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);margin-bottom:16px}
.crumb a{color:var(--rani-text)}
.crumb a:hover{text-decoration:underline}
.phero.on-ink .crumb,.phero.on-indigo .crumb{color:rgba(242,237,227,.5)}
.phero.on-ink .crumb a,.phero.on-indigo .crumb a{color:var(--turmeric)}
.phero h1{font-family:var(--d);font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.12;letter-spacing:-.02em;max-width:22ch;font-weight:800}
.phero h1 em{font-style:normal;color:var(--accent-text);font-weight:700}
.phero.on-ink h1 em,.phero.on-indigo h1 em{color:var(--turmeric)}
.phero .lede{font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:56ch;margin-top:20px;color:var(--ink-70)}
.phero.on-ink .lede,.phero.on-indigo .lede{color:rgba(242,237,227,.78)}

/* ---------- teaser cards (home → deeper pages) ---------- */
.teasers{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.teaser{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 24px;display:flex;
  flex-direction:column;gap:10px;transition:.2s;background:var(--paper)}
.teaser:hover{background:var(--ink);color:var(--paper2)}
.teaser .tno{font-family:var(--d);font-size:1.5rem;color:var(--rani-text);line-height:1}
.teaser:hover .tno{color:var(--turmeric)}
.teaser h3{font-family:var(--d);font-size:1.16rem;line-height:1.1}
.teaser p{font-size:.92rem;color:var(--ink-70);flex:1}
.teaser:hover p{color:rgba(242,237,227,.8)}
.teaser .go{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rani-text)}
.teaser:hover .go{color:var(--turmeric)}

/* ---------- next-step strip (bottom of interior pages) ---------- */
.nextup{border-top:1px solid var(--line);background:var(--paper2);padding:clamp(40px,5vw,64px) 0}
.nextup-in{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap}
.nextup h2{font-family:var(--d);font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.02;max-width:20ch}
.nextup h2 em{font-style:normal;color:var(--accent-text);font-weight:700}
.nextup .btn{flex-shrink:0}

/* ---------- simple prose blocks ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-left:1px solid var(--line);border-top:1px solid var(--line);margin:30px 0}
.stat-row div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px}
.stat-row b{display:block;font-family:var(--d);font-size:1.9rem;color:var(--rani-text);line-height:1;margin-bottom:8px}
.stat-row span{font-size:.9rem;color:var(--ink-70)}

/* service list */
.svc{border-top:1px solid var(--line)}
.svc details{border-bottom:1px solid var(--line)}
.svc summary{padding:20px 0;cursor:pointer;font-family:var(--d);font-size:1.12rem;
  display:flex;justify-content:space-between;align-items:center;gap:18px;list-style:none}
.svc summary::-webkit-details-marker{display:none}
.svc summary::after{content:'+';font-family:var(--b);font-size:1.3rem;color:var(--rani-text);flex-shrink:0}
.svc details[open] summary::after{content:'–'}
.svc summary:hover{color:var(--rani-text)}
.svc .body{padding-bottom:22px;display:grid;gap:12px;max-width:80ch}
.svc .body p{font-size:.96rem;color:var(--ink-70)}
.svc .body b{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--rani-text);display:block;margin-bottom:4px}

@media(max-width:1040px){
  .teasers{grid-template-columns:1fr 1fr}
  .two-col,.stat-row{grid-template-columns:1fr}
  .stat-row{border-left:1px solid var(--line)}
}
@media(max-width:700px){
  .teasers{grid-template-columns:1fr}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    border-left:3px solid var(--rani);margin:2px 0 8px 10px;padding:0 0 0 10px;min-width:0}
  .drop a{padding:9px 0;font-size:.9rem}
  .drop a span{display:none}
  .caret{display:none}
  .nextup-in{flex-direction:column;align-items:flex-start}
  .nextup .btn{width:100%}
}

/* first section after a page hero shouldn't double up on vertical space */
.phero + .sec.pad{padding-top:clamp(34px,4vw,54px)}
.phero + .sec.pad .svc{margin-top:0}

/* ==========================================================
   MOBILE NAV — must come last.
   The multi-page additions above set .nav-links{position:relative},
   which overrode the earlier mobile rule (later wins at equal
   specificity). Re-assert the mobile layout here.
   ========================================================== */
@media(max-width:700px){
  .nav-links{position:absolute;top:66px;left:0;right:0;width:auto;
    background:var(--paper);flex-direction:column;gap:0;
    padding:10px 26px 18px;border-bottom:1px solid var(--line);
    display:none;max-height:calc(100vh - 66px);overflow-y:auto}
  .nav.open .nav-links{display:flex}
  .nav-item{width:100%}
  .nav-item>a{display:flex;width:100%;padding:13px 0;font-size:1rem;
    border-bottom:1px solid var(--line)}
  .nav-item>a::after{display:none}
  .drop{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-left:3px solid var(--rani);
    margin:0 0 10px 8px;padding:2px 0 2px 12px;min-width:0;background:transparent}
}