/* build: 2026-08-24 */
/* =====================================================================
   style.css — Vikram Bhargava
   Single page · light (ivory) theme · koi black background nahi
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
/* scrollbar-gutter: intro ke waqt overflow:hidden lagta hai, jisse scrollbar
   gayab ho jaati hai aur intro khatam hone par poora page khisak jaata hai.
   Ye line scrollbar ki jagah hamesha rok deti hai -- page nahi hilta.
   Google isko CLS kehta hai aur ranking mein ginta hai.                  */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px;
     scrollbar-gutter:stable}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:root{
  --mono:ui-monospace,"Cascadia Mono","Consolas","DejaVu Sans Mono",monospace;
  --sans:"Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  --serif:"Didot","Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif;

  --paper:#f7f3ec;
  --paper-2:#efe9dd;
  --card:#fffdf8;
  --ink:#221e19;
  --body:#635c51;
  --muted:#8f8779;
  --gold:#9d7618;
  --gold-soft:rgba(157,118,24,.26);
  --champagne:#b08d3e;

  --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* scrollbar-gutter YAHAN chahiye, html par nahi — overflow-x:hidden ki
   wajah se scroll body karti hai. Intro ke waqt scrollbar gayab hoti
   hai aur wapas aate hi page 15px khisak jaata tha.                  */
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
     overflow-x:hidden;scrollbar-gutter:stable}

/* =====================================================================
   SWORD SLASH INTRO
   ===================================================================== */
body.intro-on{overflow:hidden}
.intro{position:fixed;inset:0;z-index:9999;cursor:pointer}
.intro.gone{pointer-events:none}
.intro-half{
  position:absolute;inset:0;
  /* page se thoda gehra — tabhi "kat kar khulna" dikhta hai */
  background:radial-gradient(ellipse at 50% 42%,#efe6d1 0%,#e2d7bd 62%,#d8cbad 100%);
  transition:transform .8s cubic-bezier(.7,0,.3,1),opacity .8s ease;
}
.intro-half.a{clip-path:polygon(0 0,100% 0,100% 12%,0 90%)}
.intro-half.b{clip-path:polygon(0 90%,100% 12%,100% 100%,0 100%)}
.intro.gone .intro-half.a{transform:translate(-6%,-112%) rotate(-2deg);opacity:.15}
.intro.gone .intro-half.b{transform:translate(6%,112%) rotate(-2deg);opacity:.15}

.intro-stage{
  position:absolute;inset:0;display:grid;place-items:center;
  transition:opacity .4s ease;
}
.intro.gone .intro-stage{opacity:0}

/* ---- chalti hui aakruti ---- */
.walk-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%)}
.walker{width:auto;height:min(46vh,340px);display:block;color:#5c4718}
/* poora logo — width se size hota hai, kuch bhi kata nahi */
.walker-img{
  width:min(84vw,920px);height:auto;max-height:74vh;object-fit:contain;
  position:relative;z-index:2;
  /* title card jaisa frame — gold hairline aur parchment ka mount */
  border-radius:16px;
  box-shadow:
    0 0 0 1px rgba(157,118,24,.6),
    0 0 0 10px rgba(247,243,236,.7),
    0 0 0 11px rgba(157,118,24,.28),
    0 30px 70px rgba(60,46,18,.34);
}
/* asli character wali PNG ho to vaar ke waqt aage jhatka */
.intro.run.has-char .walker-img{animation:lunge .55s cubic-bezier(.4,0,.2,1) 1.28s both}
@keyframes lunge{0%{transform:none}42%{transform:translateX(18px) scale(1.06)}100%{transform:none}}

/* baayein se chal kar beech tak aati hai */
.walk-wrap{transform:translate(-190%,-46%)}
.intro.run .walk-wrap{animation:walkIn 1.15s cubic-bezier(.32,.02,.28,1) .1s forwards}
@keyframes walkIn{to{transform:translate(-50%,-46%)}}

/* chalte waqt halka uthna-baithna */
.intro.run .body{animation:bob .34s ease-in-out 3.4 both}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* pair — do frame badal-badal kar (walk cycle) */
.walk-b{opacity:0}
.intro.run .walk-a{animation:stepA .34s steps(1) 0s 4 both}
.intro.run .walk-b{animation:stepB .34s steps(1) 0s 4 both}
@keyframes stepA{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes stepB{0%,49%{opacity:0}50%,100%{opacity:1}}

/* coat ki pooch lehrati hai */
.intro.run .tail{animation:tail .7s ease-in-out 2 both;transform-origin:80px 190px}
@keyframes tail{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg)}}

/* talwar — peeche uthti hai, phir tez vaar */
.katana{transform-origin:70px 200px}
.intro.run .katana{animation:strike .8s cubic-bezier(.5,0,.25,1) 1.25s forwards}
@keyframes strike{
  0%   {transform:rotate(0)}
  38%  {transform:rotate(-58deg)}
  46%  {transform:rotate(-62deg)}
  72%  {transform:rotate(128deg)}
  100% {transform:rotate(122deg)}
}

/* vaar ki lakeer — ivory par gehri, beech mein chamak */
.slash{
  position:absolute;left:-12vw;top:50%;
  width:135vw;height:4px;border-radius:4px;
  background:linear-gradient(90deg,transparent,#7a5f14 12%,#fffdf4 48%,#7a5f14 86%,transparent);
  box-shadow:0 0 18px 5px rgba(200,164,92,.75),0 0 52px 16px rgba(122,95,20,.28);
  transform:rotate(-38deg) scaleX(0);transform-origin:left center;opacity:0;
}
.intro.run .slash{animation:slash .5s cubic-bezier(.2,.9,.1,1) 1.62s forwards}
@keyframes slash{
  0%   {transform:rotate(-38deg) scaleX(0);opacity:0}
  18%  {opacity:1}
  64%  {transform:rotate(-38deg) scaleX(1);opacity:1}
  100% {transform:rotate(-38deg) scaleX(1);opacity:0}
}

.intro-skip{
  position:absolute;right:22px;bottom:22px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;color:var(--muted);
  border:1px solid var(--gold-soft);padding:9px 15px;background:rgba(255,253,248,.7);
}
.intro-skip:hover{color:var(--gold);border-color:var(--gold)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--gold);color:#fff;padding:10px 16px}

/* =====================================================================
   HEADER
   ===================================================================== */
/* min-height isliye: logo load hone se pehle text wala brand chhota hota
   hai, aur logo aate hi header lamba ho kar poora page neeche khisak
   jaata tha. Ab jagah pehle se ruki hui hai. (46px logo + 14px x2)   */
.nav{
  position:sticky;top:0;z-index:100;min-height:74px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px var(--pad);
  background:rgba(247,243,236,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.nav.stuck{border-bottom-color:var(--gold-soft);box-shadow:0 6px 24px rgba(80,64,30,.06)}
.nav-brand{display:flex;align-items:center;gap:11px}
.nav-brand span{
  width:32px;height:32px;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid var(--gold);color:var(--gold);
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;font-weight:700;
}
.nav-brand span.is-logo{border:0;width:auto;height:auto}
.nav-brand .logo{display:block;transition:transform .5s var(--ease)}
.nav-brand:hover .logo{transform:rotate(-6deg) scale(1.06)}
.nav-brand b{font-family:var(--serif);font-weight:400;font-size:17px;letter-spacing:.01em;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);padding:10px 13px;transition:color .25s var(--ease);white-space:nowrap;
}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
.nav-links a.cta{
  color:var(--gold);border:1px solid var(--gold);margin-left:10px;padding:10px 16px;
}
.nav-links a.cta:hover{background:var(--gold);color:#fff}
.nav-toggle{display:none;width:38px;height:32px;padding:6px;flex-direction:column;justify-content:space-between}
.nav-toggle span{display:block;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media (max-width:840px){
  .nav-toggle{display:flex}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--card);border-bottom:1px solid var(--gold-soft);
    padding:8px var(--pad) 18px;
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 0;font-size:12px;border-bottom:1px solid rgba(157,118,24,.12)}
  .nav-links a.cta{margin:14px 0 0;text-align:center;border-bottom-width:1px}
}

/* =====================================================================
   HOME
   ===================================================================== */
/* home ka container baaki sections ke barabar — left edge ek line par */
.home{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(24px,5vw,72px);align-items:center;
  padding:clamp(40px,6vw,80px) var(--pad) clamp(52px,7vw,92px);
  max-width:calc(1180px + 2 * var(--pad));margin:0 auto;
}
/* Ek column hone par bhi baayein kinara wahi rahe jo baaki page ka hai.
   Pehle ye center tha, isliye tablet par art beech mein latak jaata tha. */
@media (max-width:900px){
  .home{grid-template-columns:1fr;text-align:left;justify-items:start;gap:30px}
  .home .home-art{width:min(100%,420px)}   /* neeche wale rule se upar rehne ke liye */
}

.home-art{position:relative;width:min(100%,480px);aspect-ratio:440/520;display:grid;place-items:center}
.deity-wrap{
  position:absolute;inset:0;display:grid;place-items:center;
  color:#8a6a2f;                 /* silhouette ka rang — black nahi, gehra bronze */
  pointer-events:none;
}
.deity{width:100%;height:100%;animation:float 11s ease-in-out infinite}
.deity-img{object-fit:contain}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.deity{animation:none}}
.portrait{
  position:absolute;left:-2%;bottom:4%;z-index:4;
  width:40%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--paper-2);
  box-shadow:0 0 0 1px rgba(157,118,24,.8),0 0 0 9px var(--paper),
             0 0 0 10px rgba(157,118,24,.32),0 18px 44px rgba(80,64,30,.24);
}
@media (max-width:900px){.portrait{left:2%;bottom:2%;width:36%}}

/* deity band ho to — portrait beech mein, peeche do patli sonahri chhalle */
.home-art.plain{aspect-ratio:1}
.home-art.plain .portrait{position:relative;left:auto;bottom:auto;width:62%}
@media (max-width:900px){.home-art.plain .portrait{width:66%}}
.home-art.plain::before,.home-art.plain::after{
  content:"";position:absolute;border-radius:50%;aspect-ratio:1;pointer-events:none;
}
.home-art.plain::before{width:78%;border:1px solid rgba(157,118,24,.3)}
.home-art.plain::after{
  width:94%;border:1px solid rgba(157,118,24,.14);
  background:radial-gradient(circle,rgba(200,164,92,.16) 0%,transparent 62%);
}
.portrait canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait-ring{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 30px 8px rgba(247,243,236,.5);
}

.home-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.42em;color:var(--gold);font-weight:600}
.home-txt h1{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(40px,6.6vw,78px);line-height:1;letter-spacing:-.015em;margin-top:18px;
}
.home-line{
  font-family:var(--mono);font-size:clamp(11px,1.4vw,13px);letter-spacing:.22em;
  color:var(--champagne);text-transform:uppercase;margin-top:20px;font-weight:600;
}
.home-sub{font-size:clamp(15px,1.7vw,18px);line-height:1.75;color:var(--body);margin-top:20px;max-width:42ch}
@media (max-width:900px){.home-sub{margin-left:auto;margin-right:auto}}
.home-ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
@media (max-width:900px){.home-ctas{justify-content:center}}

.btn{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--gold);background:var(--gold);color:#fff;
  padding:15px 28px;transition:background .3s var(--ease),color .3s var(--ease);
}
.btn:hover{background:#7f5f12;border-color:#7f5f12}
.btn.ghost{background:none;color:var(--gold)}
.btn.ghost:hover{background:var(--gold);color:#fff}

/* =====================================================================
   SECTION shell
   ===================================================================== */
.sec{padding:clamp(56px,7vw,104px) var(--pad)}
.sec.alt{background:var(--paper-2)}
.sec-in{max-width:1180px;margin:0 auto}
.kicker{font-family:var(--mono);font-size:10px;letter-spacing:.42em;color:var(--gold);font-weight:600;margin-bottom:14px}
.sec h2{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:clamp(28px,4vw,46px);line-height:1.08}
.sec-intro{color:var(--body);font-size:15px;line-height:1.75;margin-top:14px;max-width:56ch}
.sec-head{margin-bottom:clamp(30px,4vw,48px)}

/* =====================================================================
   TRANSITION — ek screen, chaar zamane
   ===================================================================== */
.stage{display:grid;gap:20px}
.screen{
  border:1px solid var(--gold-soft);overflow:hidden;
  background:var(--card);
  box-shadow:0 18px 46px rgba(80,64,30,.10);
  transition:background .6s var(--ease),border-color .6s var(--ease);
}
.screen-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 16px;font-family:var(--mono);font-size:10px;letter-spacing:.28em;font-weight:600;
  transition:background .6s var(--ease),color .6s var(--ease);
}
.screen-body{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,4vw,48px);align-items:center;
  padding:clamp(22px,3.4vw,40px);
}
@media (max-width:760px){.screen-body{grid-template-columns:1fr;justify-items:center;text-align:center}}
/* era ki chhoti screen -- ratio se jagah pakki (vikram-hero.jpg 760x760) */
.screen-art{
  width:clamp(150px,20vw,215px);aspect-ratio:1;
  display:grid;place-items:center;min-height:180px;
}
.screen-art canvas{width:100%;height:auto}
.screen-art pre{
  font-family:var(--mono);white-space:pre;font-size:clamp(3.4px,.62vw,4.6px);line-height:1;
  letter-spacing:0;
}
.screen-art .fallback{width:100%;border-radius:2px}
.screen-txt h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.7vw,32px);line-height:1.18;transition:color .6s var(--ease)}
.screen-txt p{font-size:14.5px;line-height:1.8;margin-top:12px;max-width:44ch;transition:color .6s var(--ease)}
@media (max-width:760px){.screen-txt p{margin-left:auto;margin-right:auto}}

/* --- era ke roop --- */
.screen[data-style="e1"]{background:#ece3d0;border-color:#c9bb9c}
.screen[data-style="e1"] .screen-bar{background:#dccfb3;color:#5b4a2c}
.screen[data-style="e1"] .screen-art pre{color:#4a4034}
.screen[data-style="e1"] .screen-txt h3{color:#3b342a}
.screen[data-style="e1"] .screen-txt p{color:#6c6151}

.screen[data-style="e2"]{background:#d4d0c8;border-color:#8f949a}
.screen[data-style="e2"] .screen-bar{background:linear-gradient(90deg,#1d3f96,#5386cf);color:#fff}
.screen[data-style="e2"] .screen-art canvas{image-rendering:pixelated;border:2px solid #7d8288;background:#fff}
.screen[data-style="e2"] .screen-txt h3{color:#1b2330}
.screen[data-style="e2"] .screen-txt p{color:#3f4653}

.screen[data-style="e3"]{background:#fff;border-color:#d6dbe0}
.screen[data-style="e3"] .screen-bar{background:#f1f4f7;color:#57606a}
.screen[data-style="e3"] .screen-txt h3{color:#1f2328}
.screen[data-style="e3"] .screen-txt p{color:#57606a}

.screen[data-style="e4"]{background:linear-gradient(150deg,#fdf9f0,#f2ead9);border-color:var(--gold)}
.screen[data-style="e4"] .screen-bar{background:var(--gold);color:#fff}
.screen[data-style="e4"] .screen-art canvas{border-radius:50%;box-shadow:0 0 0 1px rgba(157,118,24,.6),0 10px 28px rgba(80,64,30,.2)}
.screen[data-style="e4"] .screen-txt h3{color:var(--ink)}
.screen[data-style="e4"] .screen-txt p{color:var(--body)}

/* --- year tabs --- */
.years{display:flex;gap:0;border-top:1px solid var(--gold-soft)}
.years button{
  flex:1;padding:16px 8px 14px;position:relative;
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;font-weight:600;
  color:var(--muted);transition:color .3s var(--ease);
}
.years button:hover{color:var(--ink)}
.years button.on{color:var(--gold)}
.years button::after{
  content:"";position:absolute;top:-1px;left:0;right:0;height:2px;
  background:var(--gold);transform:scaleX(0);transition:transform .5s var(--ease);
}
.years button.on::after{transform:scaleX(1)}
.years button small{display:block;font-size:8.5px;letter-spacing:.28em;opacity:.7;margin-top:4px}

/* =====================================================================
   ABOUT — timeline
   ===================================================================== */
.tl{display:grid;gap:0}
.tl-item{
  display:grid;grid-template-columns:88px 1px minmax(0,1fr);
  gap:clamp(16px,3vw,36px);align-items:start;padding:22px 0;
}
@media (max-width:700px){.tl-item{grid-template-columns:58px 1px minmax(0,1fr);gap:14px}}
.tl-year{font-family:var(--mono);font-size:15px;color:var(--champagne);font-weight:600;padding-top:2px}
.tl-spine{background:var(--gold-soft);position:relative;align-self:stretch}
.tl-dot{position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1px var(--gold)}
.tl-item.live .tl-dot{background:var(--gold);box-shadow:0 0 0 4px rgba(157,118,24,.16)}
.tl-item.live .tl-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--gold);animation:ripple 2.6s ease-out infinite}
@keyframes ripple{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.tl-h{font-size:17px;color:var(--ink);font-weight:600}
.tl-b{font-size:14px;line-height:1.75;color:var(--body);margin-top:7px;max-width:58ch}
.tl-tag{display:inline-block;margin-top:11px;font-family:var(--mono);font-size:9px;
  letter-spacing:.26em;color:var(--gold);font-weight:600;border:1px solid var(--gold-soft);padding:4px 9px}

.quote{
  margin-top:clamp(34px,5vw,56px);padding:clamp(24px,3.4vw,40px) clamp(22px,3.4vw,48px);
  border-left:2px solid var(--gold);background:linear-gradient(100deg,rgba(157,118,24,.08),transparent 70%);
}
.quote blockquote{font-family:var(--serif);font-size:clamp(18px,2.3vw,27px);line-height:1.5;
  color:var(--ink);max-width:36ch;font-style:italic}
.quote cite{display:block;margin-top:18px;font-family:var(--mono);font-style:normal;
  font-size:9.5px;letter-spacing:.34em;color:var(--gold);font-weight:600}

/* =====================================================================
   VIKLIFE
   ===================================================================== */
/* glimpse — teen barabar cards, images ek hi naap ki */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.6vw,28px)}
@media (max-width:900px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.posts{grid-template-columns:1fr}}
.post{
  background:var(--card);border:1px solid var(--gold-soft);
  padding:clamp(12px,1.6vw,16px);display:flex;flex-direction:column;gap:14px;
}
.post-txt{padding:0 4px 4px}
/* sab images ek hi aspect par — teeno card barabar align hote hain */
.post-art{
  position:relative;overflow:hidden;border:1px solid var(--gold-soft);
  aspect-ratio:4/5;display:grid;place-items:center;background:var(--paper-2);
}
.post-art canvas,.post-art img{
  width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;
}
.post-badge{
  position:absolute;left:12px;bottom:12px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.3em;color:var(--gold);font-weight:600;
  border:1px solid rgba(157,118,24,.45);background:rgba(255,253,248,.92);padding:5px 10px;
}
.post-d{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;color:var(--gold);font-weight:600}
.post-t{font-family:var(--serif);font-weight:400;font-size:clamp(19px,2.2vw,24px);line-height:1.16;color:var(--ink)}
.post-b{font-size:14px;line-height:1.7;color:var(--body);margin-top:8px}
.post-note{margin-top:22px;font-size:12.5px;color:var(--muted);font-style:italic}

/* portfolio group headings */
.work-group{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:clamp(30px,4vw,44px) 0 16px;
}
.work-group:first-of-type{margin-top:clamp(16px,2vw,24px)}
.work-group-l{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.34em;font-weight:700;
  color:var(--gold);border-bottom:2px solid var(--gold);padding-bottom:6px;
}
.work-group-n{font-size:13px;color:var(--muted)}

/* =====================================================================
   PORTFOLIO
   ===================================================================== */
.work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:transparent}
@media (max-width:980px){.work{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.work{grid-template-columns:1fr}}
.work-item{
  background:var(--paper);padding:clamp(24px,3vw,34px);
  display:flex;flex-direction:column;gap:12px;transition:background .35s var(--ease);
  box-shadow:0 0 0 1px var(--gold-soft);
}
.work-item:hover{background:var(--card)}
.work-logo{
  width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--gold-soft);background:var(--card);border-radius:4px;
}
.work-logo{position:relative}
.work-logo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .3s var(--ease);
}
.work-logo img.ok{opacity:1}
.work-logo span{
  font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--gold);
}
.work-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.work-n{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.5vw,28px);color:var(--ink)}
.work-y{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--muted);white-space:nowrap}
.work-r{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--champagne);font-weight:600}
.work-b{font-size:14px;line-height:1.75;color:var(--body);flex:1}
.work-tags{display:flex;flex-wrap:wrap;gap:6px}
.work-tags span{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--muted);
  border:1px solid var(--gold-soft);padding:4px 8px}
.work-status{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.22em;color:var(--gold);font-weight:600;
}
.work-status i{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 auto}
.work-item.live .work-status i{box-shadow:0 0 0 3px rgba(157,118,24,.2);animation:ripple2 2.4s ease-out infinite}
@keyframes ripple2{0%{box-shadow:0 0 0 0 rgba(157,118,24,.45)}100%{box-shadow:0 0 0 9px rgba(157,118,24,0)}}
.work-link{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--gold);font-weight:600}
.work-link:hover{text-decoration:underline;text-underline-offset:4px}

/* =====================================================================
   SERVICES
   ===================================================================== */
.svc-promise{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;line-height:1.9;
  color:var(--gold);margin-top:18px;max-width:60ch;
  border-left:2px solid var(--gold);padding-left:16px;
}
/* gap ki jagah har card par 1px outline — isse khaali khaane nahi dikhte */
.svc{
  display:grid;gap:0;background:transparent;
  grid-template-columns:repeat(var(--per-row,3),minmax(0,1fr));
  margin-top:clamp(30px,4vw,44px);
}
@media (max-width:980px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.svc{grid-template-columns:1fr}}
.svc-card{
  background:var(--paper);display:flex;flex-direction:column;
  transition:background .35s var(--ease);overflow:hidden;
  box-shadow:0 0 0 1px var(--gold-soft);
}
.sec.alt .svc-card{background:var(--paper-2)}
.svc-card:hover{background:var(--card)}
.svc-img{position:relative;aspect-ratio:16/8;overflow:hidden;background:var(--paper-2)}
.svc-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* photos ko site ke rang mein dhal diya — texture, content nahi */
  filter:sepia(.78) saturate(.55) contrast(1.12) brightness(1.05) blur(1.2px);
  opacity:.5;transform:scale(1.04);
  transition:opacity .4s var(--ease),transform .6s var(--ease);
}
.svc-card:hover .svc-img img{opacity:.68;transform:scale(1.09)}
.svc-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(155deg,rgba(157,118,24,.34),rgba(247,243,236,.62));
}
.svc-txt{padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;gap:10px;flex:1}
.svc-card svg{width:24px;height:24px;color:var(--gold)}
.svc-card h3{font-size:16.5px;font-weight:600;color:var(--ink)}
.svc-card p{font-size:13.5px;line-height:1.72;color:var(--body)}
.svc-cta{margin-top:clamp(26px,3.4vw,40px)}

/* --- VikLife: the things I love --- */
.loves-t{
  font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.6vw,30px);
  color:var(--ink);margin-bottom:clamp(20px,2.6vw,28px);
}
.loves{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
  gap:clamp(18px,2.6vw,30px)}
.love{display:flex;gap:15px;align-items:flex-start}
.love svg{width:22px;height:22px;color:var(--gold);flex:0 0 auto;margin-top:2px}
.love h4{font-size:15.5px;font-weight:600;color:var(--ink)}
.love p{font-size:13.5px;line-height:1.75;color:var(--body);margin-top:6px}

/* header ka asli logo */
/* logo apni kaali plate ke saath aata hai — ivory par badge jaisa lagta hai */
/* photo + wordmark ka horizontal lockup */
.nav-brand .brand-logo{
  height:46px;width:auto;display:block;border-radius:6px;
  box-shadow:0 0 0 1px rgba(157,118,24,.5),0 4px 14px rgba(80,64,30,.18);
}
.nav-brand.has-logo #brand-mark,
.nav-brand.has-logo #brand-name{display:none}
@media (max-width:520px){
  .nav-brand .brand-logo{height:32px}
  .nav{min-height:60px}
}

/* =====================================================================
   EXPERTISE
   ===================================================================== */
.xp-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);
  align-items:center;margin-bottom:clamp(30px,4vw,46px)}
@media (max-width:820px){.xp-head{grid-template-columns:1fr}}
/* aspect-ratio photo ke naap se hai (vikram-shades.jpg 620x413).
   Isse canvas banne se PEHLE hi jagah ruk jaati hai aur page nahi hilta.
   Photo badlo to ye ratio bhi badalna.                                    */
.xp-art{width:clamp(200px,24vw,300px);aspect-ratio:620/413;
  border:1px solid var(--gold-soft);overflow:hidden;
  box-shadow:0 16px 40px rgba(80,64,30,.16)}
.xp-art canvas{width:100%;height:auto;display:block}
@media (max-width:820px){.xp-art{display:none}}
.xp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:transparent}
@media (max-width:980px){.xp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.xp-grid{grid-template-columns:1fr}}
.xp-card{background:var(--paper-2);padding:clamp(22px,2.8vw,30px);display:flex;flex-direction:column;gap:11px;
  transition:background .35s var(--ease);box-shadow:0 0 0 1px var(--gold-soft)}
.sec:not(.alt) .xp-card{background:var(--paper)}
.xp-card:hover{background:var(--card)}
.xp-card svg{width:24px;height:24px;color:var(--gold)}
.xp-card h3{font-size:16.5px;font-weight:600;color:var(--ink)}
.xp-card p{font-size:13.5px;line-height:1.72;color:var(--body);flex:1}
.xp-proof{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--gold);
  font-weight:600;border-top:1px solid var(--gold-soft);padding-top:11px}

/* =====================================================================
   ABOUT layout
   ===================================================================== */
.ab{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:start}
@media (max-width:900px){.ab{grid-template-columns:1fr}.ab-side{max-width:280px}}
/* wahi baat yahan bhi (vikram-mono.jpg 520x576) */
.ab-art{aspect-ratio:520/576;border:1px solid var(--gold-soft);overflow:hidden;
  box-shadow:0 18px 44px rgba(80,64,30,.16);position:sticky;top:96px}
@media (max-width:900px){.ab-art{position:static}}
.ab-art canvas{width:100%;height:auto;display:block}

.work-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;
  border-top:1px solid var(--gold-soft);padding-top:14px;margin-top:2px}

/* =====================================================================
   DISCOVERY — 1990 terminal
   ===================================================================== */
.term{
  --t-bg:#ece3d0; --t-fg:#3b342a; --t-dim:#8b7f66; --t-acc:#9a4f14; --t-line:#c9bb9c;
  border:1px solid var(--t-line);background:var(--t-bg);color:var(--t-fg);
  font-family:var(--mono);overflow:hidden;position:relative;
  box-shadow:0 20px 50px rgba(80,64,30,.14);
}
.term[data-theme="dark"]{--t-bg:#17140f;--t-fg:#cfd8b8;--t-dim:#7d8a66;--t-acc:#c9a227;--t-line:#3b372c}
.term::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(60,44,18,.05) 0 1px,transparent 1px 3px);
}
.term-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 14px;background:var(--t-line);color:var(--t-bg);
  font-size:10px;letter-spacing:.28em;font-weight:700;
}
.term[data-theme="dark"] .term-bar{color:#d8d2c0}
.term-dots{display:flex;gap:5px}
.term-dots i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.55;display:block}
.term-body{padding:clamp(20px,3vw,34px)}
.term-boot{
  font-size:12px;line-height:1.75;color:var(--t-acc);white-space:pre-wrap;
  min-height:5.4em;margin-bottom:22px;
}
.term-boot.typing::after{
  content:"";display:inline-block;width:.6em;height:1.05em;background:var(--t-acc);
  vertical-align:-.16em;animation:blink 1s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.term-form{display:grid;gap:16px;max-width:720px}
.tf{opacity:0;transform:translateX(-8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.tf.in{opacity:1;transform:none}
.tf label{display:block;font-size:11px;letter-spacing:.2em;color:var(--t-dim);margin-bottom:7px}
.tf label b{color:var(--t-acc)}
.tf label i{color:var(--t-acc);font-style:normal}
.tf input,.tf textarea,.tf select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--t-line);
  color:var(--t-fg);font-family:var(--mono);font-size:14px;padding:9px 2px;
  border-radius:0;transition:border-color .25s var(--ease);
}
.tf textarea{resize:vertical;line-height:1.7;min-height:76px}
.tf select{cursor:pointer}
.tf input:focus,.tf textarea:focus,.tf select:focus{outline:0;border-bottom-color:var(--t-acc)}
.tf input::placeholder{color:var(--t-dim)}

.term-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.term-actions.in{opacity:1;transform:none}
.tbtn{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;font-weight:700;
  border:1px solid var(--t-acc);background:var(--t-acc);color:var(--t-bg);
  padding:14px 26px;transition:background .25s var(--ease),color .25s var(--ease);
}
.tbtn:hover{background:transparent;color:var(--t-acc)}
.tbtn.ghost{background:transparent;color:var(--t-acc)}
.tbtn.ghost:hover{background:var(--t-acc);color:var(--t-bg)}
.term-status{min-height:1.4em;font-size:11.5px;letter-spacing:.16em;color:var(--t-dim);margin-top:4px}
.term-status.err{color:#b3401f}
.term-status.ok{color:var(--t-acc)}
.term-foot{
  display:flex;gap:20px;flex-wrap:wrap;padding:11px 14px;
  border-top:1px solid var(--t-line);font-size:10px;letter-spacing:.18em;color:var(--t-dim);
}

/* =====================================================================
   FOOTER
   ===================================================================== */
footer{
  padding:28px var(--pad);border-top:1px solid var(--gold-soft);background:var(--card);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--muted);
}
.foot-links{display:flex;gap:22px}
.foot-links a{color:var(--champagne);font-weight:600}
.foot-links a:hover{color:var(--gold)}

/* --- reveal --- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .tl-item.live .tl-dot::after,.work-item.live .work-status i{animation:none}
}

/* =====================================================================
   CLIENT PORTAL (portal.html)
   ===================================================================== */
body.portal{background:var(--paper);color:var(--ink)}
.p-top{
  padding:18px var(--pad);border-bottom:1px solid var(--gold-soft);background:var(--card);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.p-brand{font-family:var(--serif);font-size:18px;color:var(--ink);display:flex;align-items:center;gap:12px}
.p-brand small{display:block;font-family:var(--mono);font-size:8.5px;font-weight:600;
  letter-spacing:.34em;color:var(--gold);margin-top:4px}
.p-brand .brand-logo{height:44px;width:auto;display:block;border-radius:6px;
  box-shadow:0 0 0 1px rgba(157,118,24,.5)}
.p-brand.has-logo{font-size:0}
.p-brand.has-logo small{font-size:8.5px;margin:0}
.p-out{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--muted)}
.p-out:hover{color:var(--gold)}

.gate{min-height:70svh;display:grid;place-items:center;padding:48px var(--pad)}
.gate-box{width:100%;max-width:420px;text-align:center}
.gate h1{font-family:var(--serif);font-weight:400;font-size:clamp(28px,5vw,40px)}
.gate p{color:var(--body);font-size:14.5px;line-height:1.7;margin-top:12px}
.gate form{margin-top:30px;display:flex;gap:1px;background:var(--gold)}
.gate input{
  flex:1;background:#fff;border:0;color:var(--ink);padding:16px 18px;
  font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
}
.gate input:focus{outline:2px solid var(--gold);outline-offset:-2px}
.gate input::placeholder{color:#b3aa9b;letter-spacing:.16em}
.gate-err{color:#b3401f;font-family:var(--mono);font-size:11px;letter-spacing:.14em;margin-top:14px;min-height:1.2em}
.gate-help{margin-top:26px;font-size:12.5px;color:var(--muted)}
.gate-help a{color:var(--gold);border-bottom:1px solid var(--gold-soft)}

.dash{padding:clamp(28px,4vw,52px) var(--pad) 80px;max-width:1080px;margin:0 auto}
.d-head{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-end}
.d-client{font-family:var(--mono);font-size:10px;letter-spacing:.34em;color:var(--gold);font-weight:600}
.d-project{font-family:var(--serif);font-weight:400;font-size:clamp(25px,4vw,40px);margin-top:10px;line-height:1.1}
.pill{font-family:var(--mono);font-size:10px;letter-spacing:.22em;font-weight:600;
  padding:7px 14px;border:1px solid currentColor;white-space:nowrap}
.d-summary{font-size:15px;line-height:1.75;color:var(--body);margin-top:16px;max-width:62ch}
.d-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.dash code{font-family:var(--mono);font-size:12.5px;background:rgba(157,118,24,.1);padding:2px 6px}
.meter{margin-top:30px}
.meter-top{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:10px;letter-spacing:.24em;color:var(--muted);margin-bottom:8px}
.meter-bar{height:3px;background:rgba(157,118,24,.2)}
.meter-bar i{display:block;height:100%;background:var(--gold);width:0;transition:width 1.1s var(--ease)}
.d-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(26px,4vw,52px);margin-top:clamp(34px,4vw,54px)}
@media (max-width:840px){.d-grid{grid-template-columns:1fr}}
.d-block h3{font-family:var(--mono);font-size:10px;letter-spacing:.32em;color:var(--gold);font-weight:600;
  padding-bottom:11px;border-bottom:1px solid var(--gold-soft);margin-bottom:6px}
.d-block + .d-block{margin-top:40px}
.ms{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid rgba(34,30,25,.08);align-items:flex-start}
.ms:last-child{border-bottom:0}
.ms-i{flex:0 0 auto;width:15px;height:15px;border-radius:50%;margin-top:2px;
  border:1px solid rgba(34,30,25,.28);position:relative;background:#fff}
.ms.done .ms-i{border-color:var(--gold);background:var(--gold)}
.ms.done .ms-i::after{content:"";position:absolute;left:4px;top:1.5px;width:4px;height:8px;
  border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(42deg)}
.ms.cur .ms-i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--gold)}
.ms.cur .ms-i{border-color:var(--gold)}
.ms-n{font-size:14.5px;color:#4d4740}
.ms.done .ms-n{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(157,118,24,.45)}
.ms.cur .ms-n{color:var(--ink);font-weight:600}
.up{padding:20px 0;border-bottom:1px solid rgba(34,30,25,.08)}
.up:last-child{border-bottom:0}
.up-d{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--gold);font-weight:600}
.up-t{font-size:16px;margin-top:8px;font-weight:600}
.up-b{font-size:14px;line-height:1.75;color:var(--body);margin-top:7px}
.fact{display:flex;justify-content:space-between;gap:14px;padding:12px 0;
  border-bottom:1px solid rgba(34,30,25,.08);font-size:13.5px}
.fact:last-child{border-bottom:0}
.fact b{color:var(--muted);font-weight:400;font-family:var(--mono);font-size:10px;letter-spacing:.2em}
.step{display:flex;gap:11px;padding:10px 0;font-size:14px;color:var(--body);line-height:1.6}
.step::before{content:"→";color:var(--gold);flex:0 0 auto}
.linkrow{display:flex;flex-wrap:wrap;gap:1px;background:var(--gold-soft);margin-top:14px}
.linkrow a{flex:1 1 150px;background:var(--paper);padding:18px 20px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--champagne);font-weight:600;
  display:flex;justify-content:space-between;align-items:center}
.linkrow a:hover{background:var(--card);color:var(--gold)}

/* --- portal tabs (client vs owner) --- */
.p-tabs{display:flex;gap:0;border-bottom:1px solid var(--gold-soft);margin-bottom:28px}
.p-tabs button{
  padding:13px 20px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;font-weight:600;
  color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;
}
.p-tabs button.on{color:var(--gold);border-bottom-color:var(--gold)}

/* --- VikLife composer (sirf aapke liye) --- */
.compose{display:grid;gap:16px;max-width:640px}
.compose label{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;color:var(--muted);font-weight:600}
.compose input,.compose textarea{
  width:100%;margin-top:7px;background:#fff;border:1px solid var(--gold-soft);
  padding:12px 14px;font:inherit;font-size:14px;color:var(--ink);border-radius:2px;
}
.compose textarea{min-height:120px;resize:vertical;line-height:1.7}
.compose input:focus,.compose textarea:focus{outline:2px solid var(--gold);outline-offset:-2px}
.compose-out{
  background:#fffdf8;border:1px solid var(--gold-soft);padding:16px;
  font-family:var(--mono);font-size:11.5px;line-height:1.7;white-space:pre-wrap;
  word-break:break-word;color:#3f3a33;max-height:280px;overflow:auto;
}
.compose-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.compose-hint{font-size:12.5px;color:var(--muted);line-height:1.7}
.compose-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.compose-two{grid-template-columns:1fr}}
.compose select{
  width:100%;margin-top:7px;background:#fff;border:1px solid var(--gold-soft);
  padding:12px 14px;font:inherit;font-size:14px;color:var(--ink);border-radius:2px;
}
.compose select:focus{outline:2px solid var(--gold);outline-offset:-2px}
.d-note{font-size:13px;color:var(--muted);margin-top:12px;max-width:58ch;line-height:1.7}
.own-set{border:1px solid var(--gold-soft);padding:20px 24px;background:#fffdf8}
.own-set h4{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--gold);
  font-weight:600;margin-bottom:12px}
.own-set ol{margin:0;padding-left:20px}
.own-set li{font-size:13.5px;line-height:1.9;color:var(--body)}

/* ---- client files (download) ---- */
.files-note{font-size:13px;color:var(--muted);margin:10px 0 4px;line-height:1.7}
.files{display:grid;gap:0;margin-top:8px}
.file{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:14px 4px;border-bottom:1px solid rgba(34,30,25,.08);
  transition:background .25s var(--ease);
}
.file:last-child{border-bottom:0}
.file:hover{background:#fffdf8}
.file-i{width:22px;height:22px;color:var(--gold);flex:0 0 auto}
.file-i svg{width:100%;height:100%}
.file-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.file-t b{font-size:14.5px;font-weight:600;color:var(--ink)}
.file-t i{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);font-style:normal}
.file-dl{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--gold);font-weight:600;
  border:1px solid var(--gold-soft);padding:8px 12px;white-space:nowrap;
}
.file:hover .file-dl{background:var(--gold);color:#fff;border-color:var(--gold)}

.files-empty{font-size:13.5px;color:var(--muted);padding:16px 4px;font-style:italic}
.file-x{
  font-size:18px;line-height:1;color:var(--muted);padding:4px 8px;
  border:1px solid transparent;border-radius:3px;
}
.file-x:hover{color:#b3401f;border-color:rgba(179,64,31,.35)}

/* ---- upload drop zone ---- */
.drop{
  margin-top:18px;padding:26px 20px;text-align:center;cursor:pointer;
  border:1.5px dashed var(--gold-soft);border-radius:4px;background:#fffdf8;
  display:flex;flex-direction:column;gap:7px;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.drop:hover,.drop:focus-visible,.drop.over{border-color:var(--gold);background:#fdf7e9;outline:none}
.drop-t{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--gold);font-weight:600}
.drop-h{font-size:12.5px;color:var(--muted)}

.up-list{display:grid;gap:8px;margin-top:14px}
.up-row{
  display:grid;grid-template-columns:minmax(0,1fr) 100px auto;gap:12px;align-items:center;
  font-size:12.5px;color:var(--body);
}
.up-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-bar{height:3px;background:rgba(157,118,24,.18);border-radius:3px;overflow:hidden}
.up-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .2s linear}
.up-s{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--muted);white-space:nowrap}
.up-row.ok .up-s{color:#3f7a4a}
.up-row.ok .up-bar i{background:#3f7a4a}
.up-row.bad .up-s{color:#b3401f}
.up-row.bad .up-bar i{background:#b3401f;width:100%}

/* ---- discovery ka calendly note ---- */
.term-note{
  font-size:12.5px;line-height:1.8;color:var(--t-dim);max-width:56ch;margin-top:14px;
  font-family:var(--sans);
}

/* footer ka email -- phone par tap ho jaye */
.term-mail{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;opacity:.9}
.term-mail:hover{opacity:1;color:var(--gold)}