/* ===========================================================
   KHIMS. SALEM — shared design system (Carbon · Cream · Gold)
   =========================================================== */
:root{
  /* dark */
  --ink:#0a0b0e; --ink2:#101218; --panel:#13151b; --card:#161922;
  /* light / paper */
  --paper:#f5f1e8; --paper2:#ece7da; --paper-card:#fffdf8;
  --ink-text:#16181d; --ink-muted:#5b5d66;
  /* gold */
  --g1:#f8e9b0; --g2:#e3c069; --g3:#b9842f; --g-deep:#8a5e1d;
  --gold:linear-gradient(135deg,#f8e9b0 0%,#e3c069 42%,#b9842f 100%);
  --gold-soft:linear-gradient(135deg,#e3c069,#b9842f);
  /* text on dark */
  --text:#ecebe6; --muted:#9b9ca1; --faint:#6b6e76;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --line-d:rgba(20,22,28,.12); --line-d2:rgba(20,22,28,.2);
  --maxw:1280px;
  --header-h:104px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--text);font-family:"Barlow",sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.disp{font-family:"Saira Condensed",sans-serif;font-weight:700;line-height:1.04;letter-spacing:.005em;text-transform:uppercase}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.gold-text{background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-family:"Saira Condensed",sans-serif;text-transform:uppercase;letter-spacing:.32em;font-size:13px;font-weight:600;color:var(--g3);display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--gold-soft)}
.eyebrow.on-dark{color:var(--g2)}
.eyebrow.center{justify-content:center}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:"Saira Condensed";text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:15px;padding:14px 26px;border-radius:3px;cursor:pointer;border:1px solid transparent;transition:.22s;white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn-gold{background:var(--gold);color:#1a1407;box-shadow:0 6px 24px rgba(201,162,75,.26)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(201,162,75,.4)}
.btn-dark{background:var(--ink);color:var(--text);border-color:var(--ink)}
.btn-dark:hover{background:var(--ink2)}
.btn-ghost{border-color:var(--line2);color:var(--text)}
.btn-ghost:hover{border-color:var(--g2);color:var(--g1)}
.btn-ghost-d{border-color:var(--line-d2);color:var(--ink-text)}
.btn-ghost-d:hover{border-color:var(--g3);color:var(--g-deep)}

/* ---------- HEADER (always dark) ---------- */
header.site{position:fixed;inset:0 0 auto;z-index:80;transition:.3s;border-bottom:1px solid transparent}
header.site.scrolled{background:rgba(10,11,14,.9);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.brand{display:flex;align-items:center}
.brand img{height:78px;width:auto}
.nav-links{display:flex;gap:34px;list-style:none}
.nav-links a{font-family:"Saira Condensed";text-transform:uppercase;letter-spacing:.12em;font-size:15px;font-weight:600;color:var(--text);opacity:.82;transition:.2s;position:relative;padding:8px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold-soft);transition:.25s}
.nav-links a:hover,.nav-links a.active{opacity:1}
.nav-links a:hover::after,.nav-links a.active::after{right:0}
.nav-cta{display:flex;align-items:center;gap:12px}
.menu-btn{display:none;background:none;border:1px solid var(--line2);color:var(--text);width:46px;height:46px;border-radius:4px;font-size:20px;cursor:pointer}
.mobile-menu{position:fixed;inset:var(--header-h) 0 auto;background:rgba(10,11,14,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);z-index:79;display:none;padding:18px 0 26px}
.mobile-menu.open{display:block;animation:mmDrop .3s ease}
@keyframes mmDrop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.mobile-menu a{display:block;padding:14px clamp(20px,5vw,56px);font-family:"Saira Condensed";text-transform:uppercase;letter-spacing:.1em;font-size:18px;border-bottom:1px solid var(--line)}
.mobile-menu .mm-cta{display:flex;gap:12px;padding:18px clamp(20px,5vw,56px) 0}

/* ---------- SECTION SHELL & THEMES ---------- */
.sec{padding:clamp(72px,10vw,138px) 0;position:relative}
.sec--dark{background:var(--ink);color:var(--text)}
.sec--dark2{background:var(--ink2);color:var(--text)}
.sec--paper{background:var(--paper);color:var(--ink-text)}
.sec--paper2{background:var(--paper2);color:var(--ink-text)}
.sec--gold{background:var(--gold);color:#1a1407}
.sec--paper .muted,.sec--paper2 .muted{color:var(--ink-muted)}
.sec--dark .muted,.sec--dark2 .muted{color:var(--muted)}
.lead{color:inherit;opacity:.72;max-width:50ch}

.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:54px;flex-wrap:wrap}
.sec-head>.sh-l{flex:1 1 460px;min-width:0}
.sec-head h2{font-size:clamp(36px,5vw,66px);font-weight:800;margin-top:16px}
.sec-head .lead{flex:0 1 380px}
.sec-head.center{flex-direction:column;align-items:center;text-align:center}
.sec-head.center .lead{margin:18px auto 0}

/* gold divider rule used on paper */
.rule-gold{width:64px;height:3px;background:var(--gold-soft);border:0;margin:0}

/* ---------- PARALLAX BANDS ---------- */
.parallax{position:relative;min-height:clamp(360px,52vw,560px);display:flex;align-items:center;background:#000;overflow:hidden}
.parallax .pbg{position:absolute;inset:0;background-size:cover;background-position:center;background-attachment:fixed;will-change:transform}
.parallax::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,9,12,.86) 0%,rgba(8,9,12,.55) 55%,rgba(8,9,12,.3) 100%)}
.parallax .wrap{position:relative;z-index:2}
.parallax .cap{max-width:700px;color:var(--text)}
.parallax .cap h3{font-size:clamp(28px,4vw,48px);font-weight:800;margin:16px 0 12px}
.parallax .cap p{color:#d7d6d0;max-width:46ch}
@media(hover:none){.parallax .pbg{background-attachment:scroll}}

/* ---------- SERVICE CARDS (paper) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc-card{display:block;background:var(--paper-card);border:1px solid var(--line-d);padding:34px 30px 30px;position:relative;overflow:hidden;transition:.3s;color:var(--ink-text)}
.svc-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--gold);transition:.35s}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(20,20,25,.13)}
.svc-card:hover::before{width:100%}
.svc-card .ic{width:48px;height:48px;color:var(--g3);margin-bottom:20px}
.svc-card .ic svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.svc-card .no{position:absolute;top:26px;right:28px;font-family:"Saira Condensed";font-size:15px;color:var(--line-d2);letter-spacing:.1em}
.svc-card h3{font-size:24px;margin-bottom:9px}
.svc-card p{font-size:14.5px;color:var(--ink-muted);line-height:1.55}
.svc-card .more{margin-top:16px;font-family:"Saira Condensed";text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:600;color:var(--g-deep);display:inline-flex;gap:8px;align-items:center}
.svc-card:hover .more{gap:13px}

/* dark variant of svc card */
.svc-card.dark{background:var(--card);border-color:var(--line);color:var(--text)}
.svc-card.dark .ic{color:var(--g2)}
.svc-card.dark p{color:var(--muted)}
.svc-card.dark .no{color:var(--faint)}
.svc-card.dark .more{color:var(--g2)}

/* ---------- FEATURE LIST (checks) ---------- */
.feat{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--line-d)}
.feat:first-of-type{border-top:1px solid var(--line-d)}
.sec--dark .feat,.sec--dark2 .feat{border-color:var(--line)}
.feat .fic{flex:none;width:42px;height:42px;color:var(--g3)}
.sec--dark .feat .fic,.sec--dark2 .feat .fic{color:var(--g2)}
.feat .fic svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.feat h4{font-size:21px;margin-bottom:4px}
.feat p{font-size:15px;opacity:.72}

/* ---------- STATS (gold band) ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.stats .stat b{font-family:"Saira Condensed";font-size:clamp(44px,6vw,74px);font-weight:800;line-height:.85;display:block}
.stats .stat span{font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-top:10px;display:block;opacity:.8}

/* ---------- PROCESS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{padding:32px 26px;border:1px solid var(--line);background:var(--card);color:var(--text)}
.step .n{font-family:"Saira Condensed";font-size:60px;font-weight:800;line-height:.8;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.step h4{font-size:21px;margin:14px 0 8px}
.step p{font-size:14.5px;color:var(--muted)}

/* ---------- TESTIMONIALS (paper) ---------- */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{background:var(--paper-card);border:1px solid var(--line-d);padding:32px 28px}
.quote .stars{color:var(--g3);letter-spacing:3px;font-size:15px;margin-bottom:14px}
.quote p{font-size:16px;line-height:1.6;margin-bottom:20px;color:var(--ink-text)}
.quote .who{display:flex;align-items:center;gap:12px}
.quote .av{width:42px;height:42px;border-radius:50%;background:var(--gold);color:#1a1407;display:grid;place-items:center;font-family:"Saira Condensed";font-weight:800;font-size:18px}
.quote .who b{font-size:15px;display:block}
.quote .who span{font-size:13px;color:var(--ink-muted)}

/* ---------- PAGE HEADER (inner pages) ---------- */
.page-head{position:relative;padding:calc(var(--header-h) + 70px) 0 64px;background:var(--ink2);overflow:hidden;border-bottom:1px solid var(--line)}
.page-head .phbg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.22}
.page-head::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,14,.4),var(--ink2))}
.page-head .wrap{position:relative;z-index:2}
.page-head h1{font-size:clamp(42px,6vw,86px);font-weight:800;margin-top:14px}
.page-head .crumb{font-family:"Saira Condensed";text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--muted);margin-top:16px}
.page-head .crumb a:hover{color:var(--g2)}
.page-head .crumb .sep{color:var(--g3);margin:0 8px}

/* ---------- FOOTER ---------- */
footer.site{background:#070809;border-top:1px solid var(--line);padding:72px 0 28px;color:var(--text)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.5fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line)}
.foot-grid img{height:74px;margin-bottom:18px}
.foot-grid .fp{color:var(--muted);font-size:15px;max-width:34ch}
.foot-grid h5{font-family:"Saira Condensed";text-transform:uppercase;letter-spacing:.14em;font-size:14px;color:var(--g2);margin-bottom:16px}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:10px}
.foot-grid a{color:var(--muted);font-size:15px;transition:.2s}
.foot-grid a:hover{color:var(--g1)}
.foot-grid .ct{display:flex;gap:11px;color:var(--muted);font-size:15px;margin-bottom:13px;align-items:flex-start}
.foot-grid .ct svg{width:18px;height:18px;color:var(--g2);flex:none;margin-top:3px;stroke:currentColor;fill:none;stroke-width:1.5}
.foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:12px}
.foot-bot p{font-size:13px;color:var(--faint)}
.foot-bot .links{display:flex;gap:20px}

/* ---------- FLOAT WHATSAPP ---------- */
.float-wa{position:fixed;right:22px;bottom:22px;z-index:90;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(37,211,102,.4);animation:wapulse 2.6s infinite}
.float-wa svg{width:32px;height:32px;fill:#fff}
@keyframes wapulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ---------- REVEAL (resting state visible; animate via forwards) ---------- */
.reveal.in{animation:revealIn .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes revealIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.reveal.in{animation:none}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .svc-grid,.tst-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  :root{--header-h:84px}
  .brand img{height:60px}
  .nav-links,.nav-cta .btn{display:none}
  .menu-btn{display:grid}
  .svc-grid,.tst-grid,.steps,.stats,.foot-grid{grid-template-columns:1fr}
  .sec-head{margin-bottom:38px}
}