/*
==========================================================
  NASEER KHAN — SHARED STYLESHEET
  Upload this file to the SAME folder as all HTML files.
  Every HTML page links to this file.

  IMAGE PATHS: In each HTML file, do ONE find-and-replace:
  Find:    YOUR_IMAGE_URL/
  Replace: https://www.naseerkhan.in/wp-content/uploads/2026/04/
==========================================================
*/

/* ── TOKENS ── */
:root {
  --black:   #000000;
  --dark:    #0C0C0C;
  --dark-2:  #141414;
  --dark-3:  #1E1E1E;
  --gold:    #C08828;
  --gold-hi: #E0A030;
  --white:   #FFFFFF;
  --off-w:   #F8F5F0;
  --warm:    #F0EBE2;
  --db: #C8C0B4;   /* body on dark  — 7.2:1 ✓ */
  --dm: #888880;   /* muted on dark — 4.6:1 ✓ */
  --ls: #444444;   /* body on white — 9.7:1 ✓ */
  --lm: #666666;   /* muted on white — 5.7:1 ✓ */
  --display: 'Barlow Condensed', Impact, sans-serif;
  --heading: 'Barlow', system-ui, sans-serif;
  --body:    'DM Sans', system-ui, sans-serif;
  --ease:    cubic-bezier(.16,1,.3,1);
  --max:     1240px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; overflow-x:hidden; font-size:16px; }
body {
  font-family:var(--body); background:var(--black); color:var(--db);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.65;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; object-fit:cover; }
section, header, footer, nav { overflow-x:hidden; }

/* ── LAYOUT ── */
.wrap { width:100%; max-width:var(--max); margin:0 auto; padding:0 48px; }
@media(max-width:900px){.wrap{padding:0 28px;}}
@media(max-width:480px){.wrap{padding:0 20px;}}

/* ── REVEAL ── */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.rv.in{opacity:1;transform:none;}
.d1{transition-delay:.08s}.d2{transition-delay:.18s}.d3{transition-delay:.28s}.d4{transition-delay:.38s}

/* ── LABEL ── */
.label{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-size:11px;font-weight:600;
  letter-spacing:3px;text-transform:uppercase;margin-bottom:28px;
}
.label-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.label-gold{color:var(--gold-hi);}
.label-light{color:var(--gold);}
.label-dark{color:var(--gold);}

/* ── BUTTONS ── */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--gold);color:#000;
  font-family:var(--body);font-size:15px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  padding:18px 40px;border:none;cursor:pointer;
  transition:background .2s,transform .2s;white-space:nowrap;
}
.btn-primary:hover{background:var(--gold-hi);transform:translateY(-2px);}

.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:transparent;color:var(--white);
  font-family:var(--body);font-size:15px;font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;
  padding:17px 40px;border:2px solid rgba(255,255,255,.5);cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s;white-space:nowrap;
}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.08);transform:translateY(-2px);}

.play-ico{
  width:20px;height:20px;border-radius:50%;
  border:2px solid currentColor;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.play-ico::after{
  content:'';display:block;width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:9px solid currentColor;margin-left:2px;
}

/* ── NAV ── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;height:68px;
  background:rgba(0,0,0,.93);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
@media(max-width:600px){#nav{padding:0 20px;height:60px;}}

.nav-logo{
  font-family:var(--display);font-size:20px;font-weight:900;
  letter-spacing:2px;text-transform:uppercase;color:var(--white);
}
.nav-logo span{color:var(--gold);}

.nav-links{display:flex;align-items:center;gap:24px;}
.nav-links a{
  font-family:var(--body);font-size:13px;font-weight:600;
  letter-spacing:.4px;color:rgba(255,255,255,.65);transition:color .2s;
}
.nav-links a:hover,.nav-links a.active{color:var(--white);}
@media(max-width:900px){.nav-links{display:none;}}

.nav-right{display:flex;align-items:center;gap:12px;}
.nav-cta{
  font-family:var(--body);font-size:13px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  background:var(--gold);color:#000;
  padding:10px 24px;border:none;cursor:pointer;transition:background .18s;
}
.nav-cta:hover{background:var(--gold-hi);}

.nav-ham{
  display:none;flex-direction:column;gap:5px;
  width:32px;cursor:pointer;padding:4px;background:none;border:none;
}
.nav-ham span{display:block;height:2px;background:var(--white);transition:all .3s;}
.nav-ham.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-ham.active span:nth-child(2){opacity:0;}
.nav-ham.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:900px){.nav-ham{display:flex;}}

/* ── MOBILE MENU ── */
#mob-menu{
  position:fixed;top:68px;left:0;right:0;z-index:99;
  background:#000;border-bottom:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;
  max-height:0;overflow:hidden;transition:max-height .4s var(--ease);
}
#mob-menu.open{max-height:500px;}
#mob-menu a{
  font-family:var(--body);font-size:17px;font-weight:600;color:var(--white);
  padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .2s,color .2s;
}
#mob-menu a:last-child{border-bottom:none;}
#mob-menu a:hover{background:rgba(255,255,255,.05);color:var(--gold-hi);}
@media(max-width:600px){#mob-menu{top:60px;}}

/* ── TRUST BAR ── */
#trust{
  background:var(--dark-2);
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:16px 0;overflow:hidden;
}
.marq{display:flex;width:max-content;animation:marq 30s linear infinite;}
.marq:hover{animation-play-state:paused;}
@keyframes marq{to{transform:translateX(-50%);}}
.mi{
  padding:0 32px;white-space:nowrap;
  font-family:var(--body);font-size:11px;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;color:#888880;
  transition:color .2s;display:flex;align-items:center;gap:32px;
}
.mi:hover{color:var(--db);}
.mi::after{content:'·';color:var(--gold);font-size:20px;}

/* ── PAGE HEADER (inner pages) ── */
.page-hdr{padding:160px 0 80px;background:var(--black);border-bottom:1px solid rgba(255,255,255,.07);}
.page-hdr-tag{
  font-family:var(--body);font-size:11px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--gold-hi);
  margin-bottom:20px;display:flex;align-items:center;gap:10px;
}
.page-hdr-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0;}
.page-hdr h1{
  font-family:var(--display);font-size:clamp(48px,8vw,96px);
  font-weight:900;line-height:.9;text-transform:uppercase;letter-spacing:-2px;color:var(--white);
}
.page-hdr h1 em{font-style:italic;color:var(--gold);}
.page-hdr-sub{
  font-family:var(--body);font-size:clamp(16px,1.8vw,20px);
  color:var(--db);line-height:1.72;max-width:640px;margin-top:24px;
}

/* ── ACCORDION ── */
.acc-list{border-top:1px solid rgba(255,255,255,.08);}
.acc-row{border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer;transition:background .2s;}
.acc-row:hover,.acc-row.open{background:rgba(255,255,255,.03);}
.acc-head{display:grid;grid-template-columns:56px 1fr auto;gap:20px;padding:26px 0;align-items:start;}
.acc-num{font-family:var(--display);font-size:28px;font-weight:900;color:rgba(255,255,255,.15);line-height:1;padding-top:3px;transition:color .2s;}
.acc-row:hover .acc-num,.acc-row.open .acc-num{color:var(--gold);}
.acc-title{font-family:var(--body);font-size:clamp(16px,1.7vw,19px);font-weight:700;color:var(--white);margin-bottom:4px;}
.acc-sub{font-family:var(--body);font-size:14px;color:var(--dm);line-height:1.45;}
.acc-tag{display:inline-block;font-family:var(--body);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:3px 10px;margin-top:6px;}
.tag-corp{background:rgba(192,136,40,.15);color:var(--gold-hi);}
.tag-sales{background:rgba(255,255,255,.08);color:#C8C0B0;}
.tag-all{background:rgba(100,200,100,.1);color:#80C880;}
.acc-chev{font-size:20px;color:rgba(255,255,255,.25);transition:transform .3s,color .2s;align-self:center;}
.acc-row.open .acc-chev{transform:rotate(180deg);color:var(--gold);}
.acc-body{overflow:hidden;max-height:0;transition:max-height .4s var(--ease);}
.acc-body-in{padding:16px 0 24px 76px;font-family:var(--body);font-size:15px;color:var(--db);line-height:1.82;border-top:1px solid rgba(255,255,255,.06);}
.acc-body-in p{margin-bottom:12px;}
.acc-body-in p:last-child{margin-bottom:0;}
@media(max-width:480px){
  .acc-head{grid-template-columns:44px 1fr auto;gap:10px;}
  .acc-body-in{padding-left:54px;font-size:14px;}
}

/* ── TESTIMONIAL CARDS ── */
.tc{background:var(--off-w);padding:36px 28px;display:flex;flex-direction:column;transition:background .2s;}
.tc:hover{background:var(--warm);}
.tc.feat{background:var(--black);}
.tc.feat:hover{background:var(--dark-3);}
.tc-q{font-family:var(--display);font-size:72px;line-height:.55;color:rgba(0,0,0,.08);margin-bottom:10px;display:block;}
.tc.feat .tc-q{color:rgba(255,255,255,.08);}
.tc-body{font-family:var(--body);font-size:clamp(15px,1.4vw,18px);font-style:italic;color:#444444;flex:1;margin-bottom:20px;line-height:1.72;}
.tc.feat .tc-body{color:var(--db);}
.tc-foot{display:flex;align-items:center;gap:12px;}
.tc-av{width:36px;height:36px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--body);font-size:11px;font-weight:700;color:#000;flex-shrink:0;}
.tc-name{font-family:var(--body);font-size:14px;font-weight:700;color:#000;}
.tc.feat .tc-name{color:var(--white);}
.tc-role{font-family:var(--body);font-size:12px;color:var(--lm);margin-top:2px;}
.tc.feat .tc-role{color:var(--dm);}
.tc-yr{margin-left:auto;font-family:var(--display);font-size:18px;font-weight:700;color:var(--gold);}

/* ── GALLERY GRID ── */
.gc{position:relative;overflow:hidden;background:var(--dark-2);cursor:pointer;}
.gc img{width:100%;height:100%;object-fit:cover;opacity:.65;transition:transform .7s var(--ease),opacity .4s;}
.gc:hover img{transform:scale(1.06);opacity:.85;}
.gc::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,transparent 52%);}
.gc-info{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:12px 14px 16px;}
.gc-geo{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold-hi);margin-bottom:2px;}
.gc-ev{font-family:var(--body);font-size:11px;color:#A09888;line-height:1.3;}
.gh{aspect-ratio:4/3;}.gsq{aspect-ratio:1;}.gla{aspect-ratio:5/3;}
.gr1{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3px;margin-bottom:3px;}
.gr2{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:3px;}
.gr3{display:grid;grid-template-columns:1fr 1.4fr 1fr 1fr;gap:3px;}
@media(max-width:900px){.gr1,.gr3{grid-template-columns:1fr 1fr;}.gr2{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.gr1,.gr2,.gr3{grid-template-columns:1fr 1fr;}}

/* ── FORM ── */
.field{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  padding:16px 18px;color:var(--white);font-family:var(--body);font-size:16px;
  outline:none;width:100%;transition:border-color .2s,background .2s;
}
.field::placeholder{color:#555;}
.field:focus{border-color:rgba(192,136,40,.5);background:rgba(255,255,255,.09);}
textarea.field{resize:vertical;min-height:110px;}
.submit-btn{
  background:var(--gold);color:#000;font-family:var(--body);font-size:16px;
  font-weight:800;letter-spacing:1px;text-transform:uppercase;
  padding:20px;border:none;cursor:pointer;width:100%;margin-top:4px;
  transition:background .2s,transform .18s;
}
.submit-btn:hover{background:var(--gold-hi);transform:translateY(-2px);}

/* ── FOOTER ── */
footer{background:#000;padding:56px 0 32px;border-top:1px solid rgba(255,255,255,.05);}
.foot-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:40px;flex-wrap:wrap;padding-bottom:36px;margin-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.foot-brand{font-family:var(--display);font-size:20px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--white);margin-bottom:4px;}
.foot-brand span{color:var(--gold);}
.foot-brand-sub{font-family:var(--body);font-size:12px;color:var(--gold);letter-spacing:.5px;}
.foot-nav{display:flex;gap:20px;flex-wrap:wrap;align-items:center;}
.foot-nav a{font-family:var(--body);font-size:13px;color:#888880;transition:color .2s;}
.foot-nav a:hover{color:var(--db);}
.foot-soc{display:flex;gap:8px;}
.soc-btn{
  font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:#888880;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  padding:10px 16px;cursor:pointer;transition:color .2s,border-color .2s;
}
.soc-btn:hover{color:var(--db);border-color:rgba(255,255,255,.25);}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.foot-copy,.foot-legal a{font-family:var(--body);font-size:12px;color:#444440;}
.foot-legal a{margin-left:18px;transition:color .2s;}
.foot-legal a:hover{color:#888880;}
@media(max-width:768px){.foot-top{flex-direction:column;}}

/* ── SHARED JS BEHAVIOUR ── */
/* accordion, mobile menu, scroll reveal are in each HTML's <script> tag */