/* ============================================================
   SHRI BHUPENDER NOTNA — Design System  ·  "Karan Vihar"
   ------------------------------------------------------------
   Ink-navy canvas · saffron as a true accent, never a flood ·
   deep green reserved for action · warm paper · gold hairlines.

   Display : Eczar, bold (700) by default, 800 on the biggest headlines
   Body    : Hind

   v3.1 (2026-07-20): swapped the display face from Tiro Devanagari Hindi
   (serif, ONE weight only — 400) to Eczar, which ships real drawn weights
   400/500/600/700/800 with full Devanagari coverage at each. Requested by
   the operator ("bolder", "change font style"). The old Single-Weight Rule
   ("never request 600+, browsers fake-bold and it smears") applied to Tiro
   specifically — it does NOT apply to Eczar; its bold/extrabold are real,
   not synthesized. Don't resurrect that rule if the font changes again
   without re-checking the new family's weight axis first.

   TYPOGRAPHY LAW — Devanagari needs vertical room. Matras sit above
   AND below the baseline, so Latin line-heights (1.0–1.2) collide or
   read as ragged gaps. Nothing here goes below 1.25 on display type
   or 1.6 on body text. Do not "tighten" these. Still true after the
   font swap — verified against Eczar's own metrics, not just Tiro's.
   ============================================================ */

:root{
  /* ---- accent: saffron. Used for marks, rules, small type, one CTA.
         Never for large flat fills — that is what made v1 look cheap. */
  --saffron:#F26C1B;
  --saffron-600:#D2570D;
  --saffron-700:#A34209;
  --saffron-100:#FDEDE0;

  /* ---- action: deep green. Buttons, links-in-action, confirmations. */
  --green:#0E5C3A;
  --green-600:#0A4A2E;
  --green-700:#06301E;
  --green-100:#E2EFE8;

  /* ---- canvas */
  --ink:#12161F;              /* ink-navy, cool and deep */
  --ink-2:#1C2430;
  --ink-soft:#5A6472;
  --ink-faint:#8A94A2;
  --paper:#FBF9F5;            /* warm off-white */
  --paper-2:#F4F1EA;
  --paper-3:#E9E4D9;
  --white:#FFFFFF;

  --gold:#D8AE3E;             /* hairlines, and now also glow accents */
  --gold-soft:rgba(216,174,62,.4);
  --gold-glow:rgba(242,108,27,.22);
  --green-glow:rgba(14,92,58,.38);

  --line:rgba(18,22,31,.13);
  --line-2:rgba(18,22,31,.07);
  --on-ink:#EDEAE3;
  --on-ink-soft:#9BA3AE;

  /* ---- type */
  --f-display:"Eczar",Georgia,serif;
  --f-body:"Hind",system-ui,sans-serif;

  /* ---- rhythm */
  --sp-section:clamp(72px,9vw,140px);
  --radius:4px;
  --radius-lg:8px;
  --shadow-sm:0 1px 2px rgba(18,22,31,.06);
  --shadow:0 20px 50px -26px rgba(18,22,31,.45);
  --shadow-lg:0 46px 100px -38px rgba(18,22,31,.62);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);

  --z-sticky:100; --z-header:200; --z-backdrop:300; --z-modal:400; --z-toast:500;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.72;          /* Devanagari body: generous, never below 1.6 */
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---- display type. Bold (700) is the default display weight; H1s step
       up to 800 (Eczar's heaviest) so the single biggest headline on any
       page carries real, drawn — not synthesized — weight. ---- */
h1,h2,h3,h4,.display{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.28;
  letter-spacing:-0.005em;
  text-wrap:balance;
}
h1{font-weight:800}
h3,h4{line-height:1.35}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--saffron);color:#fff}
[id]{scroll-margin-top:100px}

/* small-caps label — the workhorse for eyebrows, field labels, footer heads */
.label{
  font-family:var(--f-body);font-weight:600;font-size:11.5px;
  letter-spacing:.19em;text-transform:uppercase;color:var(--saffron-600);
  line-height:1.5;display:block;
}
.on-ink .label,.on-green .label{color:var(--saffron)}

/* ---------- bilingual (हिं / EN) ----------
   The [data-lang] variants exist to out-specify page-level rules like
   `.hero-facts span{display:block}`, which would otherwise un-hide the
   inactive language. Keep the plain .l-en rule too — it covers the moment
   before site.js stamps data-lang on <html>. */
.l-en{display:none}
html[data-lang] .l-en{display:none}
html[data-lang="en"] .l-hi{display:none}
html[data-lang="en"] .l-en{display:inline}
.lang-toggle{display:inline-flex;border:1px solid currentColor;border-radius:var(--radius);overflow:hidden;flex:none;opacity:.75}
.lang-toggle:hover{opacity:1}
.lang-toggle button{font-family:var(--f-body);font-weight:600;font-size:12px;padding:5px 10px;background:transparent;border:0;color:inherit;cursor:pointer;line-height:1.5;transition:background .2s,color .2s}
.lang-toggle button[aria-pressed="true"]{background:currentColor;color:var(--paper)}
.lang-toggle button[aria-pressed="true"]{mix-blend-mode:normal}
.site-header.on-light .lang-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.site-header.over-dark:not(.solid) .lang-toggle button[aria-pressed="true"]{background:#fff;color:var(--ink)}

.wrap{width:min(1200px,90vw);margin-inline:auto}
.wrap-narrow{width:min(720px,90vw);margin-inline:auto}

/* ---------- tricolour hairline — the signature, kept thin ---------- */
.tiranga{display:flex;height:2px;width:64px;margin-bottom:14px}
.tiranga i{flex:1;display:block}
.tiranga i:nth-child(1){background:var(--saffron)}
.tiranga i:nth-child(2){background:var(--gold-soft)}
.tiranga i:nth-child(3){background:var(--green)}
.on-ink .tiranga i:nth-child(2),.on-green .tiranga i:nth-child(2){background:rgba(255,255,255,.4)}
.on-green .tiranga i:nth-child(3){background:#fff}
.tiranga-bar{display:flex;height:3px;width:100%}
.tiranga-bar i{flex:1}
.tiranga-bar i:nth-child(1){background:var(--saffron)}
.tiranga-bar i:nth-child(2){background:var(--gold)}
.tiranga-bar i:nth-child(3){background:var(--green)}

/* kicker = rule + eyebrow, one cadence across the site.
   Letter-spacing is kept modest (.1em) because heavy tracking pulls
   Devanagari conjuncts apart — .19em is for the Latin-only .label. */
.kicker{
  display:block;margin-bottom:16px;
  font-family:var(--f-body);font-weight:600;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--saffron-600);line-height:1.6;
}
.on-ink .kicker,.on-green .kicker{color:var(--saffron)}
.kicker .label{margin-top:0}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--green);--fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-body);font-weight:600;font-size:15.5px;letter-spacing:.005em;
  padding:14px 26px;border-radius:var(--radius);border:1px solid transparent;
  background:var(--bg);color:var(--fg);cursor:pointer;line-height:1.5;
  transition:transform .3s var(--ease),background .22s,box-shadow .22s,color .22s,border-color .22s;
}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover{background:var(--green-600);transform:translateY(-1px);box-shadow:0 10px 22px -14px rgba(14,92,58,.85)}
.btn:active{transform:translateY(0)}
.btn-primary{--bg:var(--green);--fg:#fff}
.btn-saffron{--bg:var(--saffron);--fg:#fff}
.btn-saffron:hover{background:var(--saffron-600);box-shadow:0 10px 22px -14px rgba(242,108,27,.85)}
.btn-wa{--bg:#1FA855;--fg:#fff}
.btn-wa:hover{background:#17803f;box-shadow:0 10px 22px -14px rgba(31,168,85,.85)}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.on-ink .btn-outline,.on-green .btn-outline{color:#fff;border-color:rgba(255,255,255,.35)}
.on-ink .btn-outline:hover{background:#fff;color:var(--ink);border-color:#fff}
.on-green .btn-outline:hover{background:#fff;color:var(--green-700);border-color:#fff}
.btn-lg{padding:16px 30px;font-size:16px}

/* text link with a saffron underline that draws in */
.tlink{font-weight:600;color:var(--ink);position:relative;padding-bottom:2px}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--saffron);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.tlink:hover::after{transform:scaleX(1)}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-header);
  transition:background .35s var(--ease),box-shadow .35s,color .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.site-header .strip{height:2px;display:flex}
.site-header .strip i{flex:1}
.site-header .strip i:nth-child(1){background:var(--saffron)}
.site-header .strip i:nth-child(2){background:var(--gold)}
.site-header .strip i:nth-child(3){background:var(--green)}
.site-header .bar{display:flex;align-items:center;gap:18px;padding:14px 0}
.site-header.solid{background:rgba(251,249,245,.93);backdrop-filter:blur(12px);border-bottom-color:var(--line-2);box-shadow:0 2px 20px -18px rgba(18,22,31,.7)}
.site-header.on-light{color:var(--ink);background:rgba(251,249,245,.93);border-bottom-color:var(--line-2)}
.site-header.over-dark{color:#fff}
.site-header.over-dark.solid{color:var(--ink)}

.brand{display:flex;align-items:center;gap:13px}
/* The mark is the full namaste portrait, not a face crop — head AND joined
   hands must both stay visible, so it is zoomed out and centred. */
.brand .mark{
  width:50px;height:50px;border-radius:50%;overflow:hidden;flex:none;
  background:#fff;box-shadow:0 0 0 1px var(--gold-soft),0 0 0 4px rgba(242,108,27,.10);
}
.brand .mark img{width:100%;height:100%;object-fit:contain;object-position:center}
.brand .b-name{font-family:var(--f-display);font-weight:700;font-size:19px;line-height:1.35;display:block;letter-spacing:-0.005em}
.brand .b-role{font-family:var(--f-body);font-weight:400;font-size:11.5px;opacity:.72;line-height:1.5;display:block}
.site-header .spacer{flex:1}
.nav{display:flex;gap:2px}
.nav a{
  font-family:var(--f-body);font-weight:500;font-size:15px;padding:9px 13px;border-radius:var(--radius);
  position:relative;transition:color .2s,opacity .2s;display:inline-flex;align-items:center;gap:7px;opacity:.82;
}
.nav a:hover{opacity:1}
.nav .nav-ico{width:15px;height:15px;flex:none;opacity:.6}
.mini-ico{width:14px;height:14px;vertical-align:-2px;margin-right:8px;flex:none;color:var(--saffron)}
.nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1.5px;background:var(--saffron);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{opacity:1}
.header-cta{display:inline-flex}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:9px;color:inherit}
.burger span{width:23px;height:1.5px;background:currentColor;transition:.3s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- sections ---------- */
.section{padding:var(--sp-section) 0}
.section.tint{background:var(--paper-2)}
.section.on-ink{background:var(--ink);color:var(--on-ink)}
.section.on-green{background:linear-gradient(155deg,var(--green-700) 0%,var(--green-600) 100%);color:#fff}

/* ---------- reusable glow + texture — the "premium dark band" pattern,
   used on the hero, the vision band, the connect band, and every page-hero.
   Two-tone glow (warm saffron + cool green) is the site's signature depth cue. */
.glow{position:relative;overflow:hidden}
.glow::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(85% 70% at 88% -6%,var(--gold-glow),transparent 60%),
             radial-gradient(75% 65% at 2% 108%,var(--green-glow),transparent 62%)}
.glow::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:24px 24px;opacity:.55}
.glow>*{position:relative;z-index:1}
.sec-head{max-width:62ch;margin-bottom:clamp(34px,4.5vw,58px)}
.sec-title{font-size:clamp(30px,4vw,50px);line-height:1.24}
.on-ink .sec-title,.on-green .sec-title{color:#fff}
.sec-lede{font-size:clamp(16.5px,1.6vw,18.5px);color:var(--ink-soft);margin-top:16px;max-width:58ch;line-height:1.75}
.on-ink .sec-lede{color:var(--on-ink-soft)}
.on-green .sec-lede{color:rgba(255,255,255,.84)}

/* ---------- page hero (inner pages) ---------- */
.page-hero{
  background:linear-gradient(165deg,var(--ink) 0%,#1A2130 100%);color:var(--on-ink);
  padding:150px 0 82px;position:relative;overflow:hidden;
  border-bottom:2px solid transparent;
  background-image:linear-gradient(165deg,var(--ink) 0%,#1A2130 100%),
    linear-gradient(90deg,var(--saffron),var(--gold) 45%,var(--green) 100%);
  background-origin:border-box;background-clip:padding-box,border-box;
}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(85% 70% at 88% -6%,var(--gold-glow),transparent 58%),
             radial-gradient(75% 65% at 2% 108%,var(--green-glow),transparent 62%)}
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:24px 24px;opacity:.55}
.page-hero .inner{position:relative}
.page-hero .crumb{font-size:13.5px;color:var(--on-ink-soft);margin-bottom:16px;letter-spacing:.02em}
.page-hero .crumb a:hover{color:var(--saffron)}
.page-hero h1{font-size:clamp(34px,4.8vw,58px);color:#fff;line-height:1.26}
.page-hero .sub{color:var(--on-ink-soft);font-size:clamp(16px,1.7vw,19px);margin-top:18px;max-width:54ch;line-height:1.75}

/* ---------- cards ---------- */
.card-plain{background:var(--paper);border:1px solid var(--line);padding:26px 28px;border-radius:var(--radius);position:relative;
  transition:border-color .25s,transform .35s var(--ease),box-shadow .35s var(--ease);}
.card-plain::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--saffron)}
.card-plain.g::before{background:var(--green)}
.card-plain:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card-plain h3{font-size:20px;margin-bottom:8px;display:flex;align-items:center;gap:13px}
.card-plain p{color:var(--ink-soft);font-size:15.5px}

/* icon roundel — used on office cards, work cells, wherever a section needs
   a graphic focal point in place of a photo we don't have yet */
.ico-badge{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--saffron-100);color:var(--saffron-700)}
.ico-badge.g{background:var(--green-100);color:var(--green-700)}
.ico-badge svg{width:20px;height:20px}
.on-ink .ico-badge{background:rgba(242,108,27,.16);color:var(--saffron)}
.on-ink .ico-badge.g{background:rgba(14,92,58,.28);color:#6FCF9A}

/* ---------- reveal motion (progressive: visible by default, gated under .js) ---------- */
.reveal{transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo)}
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.nav a::after,.tlink::after{transition:none}
}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--on-ink);padding:0 0 28px}
.site-footer .tiranga-bar{margin-bottom:70px}
.site-footer a{color:var(--on-ink)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px}
.foot-brand .f-name{font-family:var(--f-display);font-weight:700;font-size:25px;color:#fff;line-height:1.35}
.foot-brand p{color:var(--on-ink-soft);margin-top:14px;max-width:38ch;font-size:14.5px;line-height:1.8}
.foot-col h4{font-family:var(--f-body);font-weight:600;font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--saffron);margin-bottom:16px}
.foot-col a{display:block;color:var(--on-ink-soft);padding:5px 0;font-size:14.5px;transition:color .2s,padding-left .2s}
.foot-col a:hover{color:#fff;padding-left:5px}
.foot-base{border-top:1px solid rgba(237,234,227,.12);margin-top:52px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--on-ink-soft);font-size:13.5px}

/* social row (dark surfaces) */
.socials{display:flex;gap:10px;margin-top:4px}
.socials a{width:40px;height:40px;border-radius:var(--radius);border:1px solid rgba(237,234,227,.16);display:grid;place-items:center;color:var(--on-ink);transition:.25s}
.socials a:hover{background:var(--saffron);border-color:var(--saffron);color:#fff;transform:translateY(-2px)}
.socials svg{width:19px;height:19px}

/* ---------- premium arch ring — the portrait's frame everywhere it appears.
   A crisp gold ring + deep lift shadow, applied straight to the photo box
   via box-shadow (NOT a padding "moat" — that would sit a solid colour
   between the ring and the photo, which for a mix-blend-mode:multiply photo
   against a dark moat would blacken it. box-shadow avoids the whole trap). */
.arch-ring{box-shadow:0 0 0 2px var(--gold-soft),0 0 0 5px rgba(242,108,27,.12),var(--shadow-lg)}
/* the soft blob behind — a plain positioned sibling placed BEFORE the photo
   in markup, so normal paint order puts it behind with no z-index games. */
.arch-glow{position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 38%,var(--gold-glow),transparent 68%),
             radial-gradient(50% 45% at 78% 82%,var(--green-glow),transparent 70%);
  filter:blur(14px)}

/* ---------- floating whatsapp ---------- */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:var(--z-sticky);
  width:54px;height:54px;border-radius:50%;background:#1FA855;color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 26px -10px rgba(31,168,85,.8);transition:transform .3s var(--ease);
}
.wa-float:hover{transform:scale(1.06) translateY(-2px)}
.wa-float svg{width:27px;height:27px}

/* ---------- utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

@media(max-width:920px){
  .nav,.header-cta{display:none}
  .burger{display:flex}
  .nav.open{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:2px;
    background:var(--paper);color:var(--ink);padding:12px 5vw 22px;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
  }
  .nav.open a{font-size:17px;padding:12px 8px;opacity:1}
  .nav.open a::after{display:none}
  .foot-grid{grid-template-columns:1fr;gap:34px}
  .site-footer .tiranga-bar{margin-bottom:48px}
}