/*
Theme Name: Abdulrahman Final Theme
Theme URI: https://abdulrahman-ac.sa
Description: Premium bilingual (EN/AR) AC & Appliance Repair — Riyadh. Fade hero, marquee reviews, luxury flat aesthetic.
Author: Abdul Rahman Est.
Version: 4.0.0
Text Domain: abdulrahman
Tags: rtl-language-support, custom-colors, full-width-template
*/

/* ============================================================
   RESET & CUSTOM PROPERTIES
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;border-radius:0!important}
:root{
  --bg:#EFE9DE;
  --paper:#F9F6F0;
  --ink:#1A1613;
  --brass:#8A6A4A;
  --muted:#7C7468;
  --line:rgba(26,22,19,.13);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --ease:cubic-bezier(.19,1,.22,1)
}
html,body{margin:0;padding:0;background:var(--bg)}
#wr{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
#abar{background:var(--ink);height:34px;overflow:hidden;display:flex;align-items:center}
.abar-t{display:flex;white-space:nowrap;animation:tick 28s linear infinite;flex-shrink:0}
.abar-i{display:inline-flex;align-items:center;padding:0 2rem;font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75)}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ============================================================
   HEADER
   ============================================================ */
#hdr{position:sticky;top:0;z-index:990;padding:0 1.5rem;height:58px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:var(--bg);border-bottom:1px solid var(--line);transition:box-shadow .3s}
#hdr.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.08)}
.hn{display:flex;align-items:center;gap:1.5rem}
.hn a{font-size:10px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color .3s;border-bottom:1px solid transparent;padding-bottom:1px;text-decoration:none}
.hn a:hover,.hn a.act{color:var(--ink);border-color:var(--ink)}
.hn-r{justify-content:flex-end;gap:1rem}
.hlogo{text-align:center;cursor:pointer}
.hlogo-n{font-family:var(--serif);font-size:13px;font-weight:400;letter-spacing:.06em;color:var(--ink)}
.hlogo-s{font-size:8px;font-weight:400;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);margin-top:1px}
.lbtn{font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);background:none;border:none;cursor:pointer;font-family:var(--sans);transition:color .25s}
.lbtn:hover{color:var(--brass)}
.hbk{font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;background:var(--ink);color:#fff;border:none;padding:8px 16px;cursor:pointer;font-family:var(--sans);transition:background .4s}
.hbk:hover{background:var(--brass)}

/* ============================================================
   MOBILE NAV
   ============================================================ */
.mob-bar{display:none;align-items:center;gap:.6rem}
.mbtn{background:none;border:none;cursor:pointer;padding:4px;display:flex;flex-direction:column;gap:5px}
.mline{display:block;width:22px;height:1.5px;background:var(--ink);transition:all .4s}
.mbtn.open .mline:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.mbtn.open .mline:nth-child(2){opacity:0}
.mbtn.open .mline:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
#mob-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:980;padding:80px 2rem 2rem;flex-direction:column;gap:2rem;overflow-y:auto}
#mob-menu.open{display:flex}
.mm-link{font-family:var(--serif);font-size:2rem;font-weight:300;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--line);padding-bottom:1rem;transition:color .3s;text-decoration:none;display:block}
.mm-link:hover{color:var(--brass)}
.mm-bot{display:flex;gap:1rem;margin-top:auto;flex-wrap:wrap}
.mm-svcs{border-top:1px solid var(--line);padding-top:1.5rem;margin-top:.5rem}
.mm-svc-label{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.85rem}
.mm-svc-g{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.mm-svc-i{background:var(--paper);border:1px solid var(--line);padding:.85rem 1rem;cursor:pointer;transition:background .3s}
.mm-svc-i:hover{background:var(--bg)}
.mm-svc-icon{font-size:1.3rem;margin-bottom:.3rem}
.mm-svc-n{font-size:12px;color:var(--ink);line-height:1.3}
.mm-svc-p{font-size:10px;color:var(--muted);margin-top:.15rem}

/* ============================================================
   HERO SLIDER — FADE / OPACITY APPROACH (NO TRANSLATEX)
   Black screen bug eliminated completely.
   ============================================================ */
#hero{
  position:relative;
  height:clamp(520px,72vh,720px);
  overflow:hidden;
  background:#0a0806;
  touch-action:pan-y;
}
#hslider{
  position:absolute;
  inset:0;
}
.hslide{
  position:absolute;
  inset:0;
  opacity:0;
  z-index:1;
  transition:opacity .95s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hslide.is-active{
  opacity:1;
  z-index:2;
}
.hslide-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.0);
  transition:transform 8s linear;
  will-change:transform;
}
.hslide.is-active .hslide-bg{
  transform:scale(1.07);
}

/* Distinct cinematic overlay per slide */
.hslide-0 .hov{
  background:linear-gradient(165deg,rgba(5,10,25,.15) 0%,rgba(10,8,6,.45) 45%,rgba(10,8,6,.96) 100%);
}
.hslide-1 .hov{
  background:linear-gradient(to right,rgba(10,8,6,.97) 0%,rgba(10,8,6,.6) 55%,rgba(10,8,6,.25) 100%);
}
.hslide-2 .hov{
  background:radial-gradient(ellipse at 50% 80%,rgba(10,8,6,.3) 0%,rgba(10,8,6,.97) 75%);
}

.hov{position:absolute;inset:0;}
.hc{
  position:relative;
  z-index:2;
  text-align:center;
  max-width:720px;
  padding:0 2rem;
}
.slide-badge{
  display:inline-block;
  font-size:9px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.18);
  padding:5px 16px;
  margin-bottom:1.1rem;
}
.hey{
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(255,255,255,.38);
  margin-bottom:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
}
.hline{width:36px;height:1px;background:rgba(255,255,255,.18)}
.hh1{
  font-family:var(--serif);
  font-size:clamp(2.4rem,5vw,4rem);
  font-weight:300;
  line-height:1.06;
  color:#fff;
  margin-bottom:1rem;
  letter-spacing:-.015em;
}
.hh1 em{font-style:italic;color:rgba(255,255,255,.55)}
.hsub{
  font-size:13px;
  font-weight:300;
  color:rgba(255,255,255,.5);
  line-height:1.85;
  max-width:460px;
  margin:0 auto 2rem;
}
.hctas{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* Hero nav dots */
.hdots{
  position:absolute;
  bottom:1.4rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:.55rem;
  z-index:10;
  background:rgba(0,0,0,.22);
  padding:6px 11px;
  border-radius:20px!important;
}
.hdot{
  width:9px;
  height:9px;
  background:rgba(255,255,255,.32);
  cursor:pointer;
  transition:all .5s var(--ease);
  border-radius:50%!important;
}
.hdot.act{background:#fff;width:30px;border-radius:5px!important}

/* Hero arrow buttons */
.harr{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:1.4rem;
  transition:background .3s;
}
.harr:hover{background:rgba(255,255,255,.16)}
.harr-l{left:1.25rem}
.harr-r{right:1.25rem}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-s{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;background:#fff;color:var(--ink);border:none;padding:13px 28px;cursor:pointer;font-family:var(--sans);transition:all .5s}
.btn-s:hover{background:var(--brass);color:#fff}
.btn-g{font-size:10px;font-weight:400;letter-spacing:.15em;text-transform:uppercase;background:transparent;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.3);padding:12px 22px;cursor:pointer;font-family:var(--sans);transition:all .5s}
.btn-g:hover{border-color:rgba(255,255,255,.75);color:#fff}
.btn-ink{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;background:var(--ink);color:#fff;border:none;padding:13px 28px;cursor:pointer;font-family:var(--sans);transition:all .5s}
.btn-ink:hover{background:var(--brass)}
.btn-out{font-size:10px;font-weight:400;letter-spacing:.15em;text-transform:uppercase;background:transparent;color:var(--ink);border:1px solid var(--ink);padding:12px 22px;cursor:pointer;font-family:var(--sans);transition:all .5s}
.btn-out:hover{background:var(--ink);color:#fff}

/* ============================================================
   STATS ROW
   ============================================================ */
.srow{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.scel{padding:1.75rem 1.5rem;border-right:1px solid var(--line)}
.scel:last-child{border-right:none}
.snum{font-family:var(--serif);font-size:2.2rem;font-weight:300;color:var(--ink);line-height:1}
.slbl{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:.35rem}

/* ============================================================
   STATEMENT SECTION
   ============================================================ */
#stmt{padding:5.5rem 2rem;text-align:center;background:var(--bg);border-top:1px solid var(--line)}
.stmt-eye{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:1.75rem;display:flex;align-items:center;justify-content:center;gap:1.5rem}
.stmt-ln{width:36px;height:1px;background:var(--line)}
.stmt-q{font-family:var(--serif);font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:300;line-height:1.25;color:var(--ink);max-width:720px;margin:0 auto 1.5rem;letter-spacing:-.01em}
.stmt-q em{font-style:italic;color:var(--brass)}
.stmt-sub{font-size:12px;color:var(--muted);letter-spacing:.08em;font-weight:300}

/* ============================================================
   DISCIPLINES / SERVICES CARDS
   ============================================================ */
#disc{padding:4.5rem 2rem;background:var(--paper);border-bottom:1px solid var(--line)}
.disc-h{margin-bottom:2rem;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.disc-ey{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.disc-ti{font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:300;color:var(--ink)}
.disc-ti em{font-style:italic;color:var(--brass)}
.disc-g{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.dcard{position:relative;overflow:hidden;cursor:pointer;background:var(--ink)}
.dcard-img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;transition:transform .9s var(--ease);opacity:.72}
.dcard:hover .dcard-img{transform:scale(1.04);opacity:.85}
.dcard-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,6,.95) 0%,rgba(10,8,6,.1) 55%)}
.dcard-c{position:absolute;bottom:0;left:0;right:0;padding:1.5rem 1.3rem}
.dcard-n{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:.4rem}
.dcard-t{font-family:var(--serif);font-size:1.15rem;font-weight:300;color:#fff;line-height:1.2;margin-bottom:.25rem}
.dcard-s{font-size:10px;color:rgba(255,255,255,.38);letter-spacing:.04em}
.dcard-a{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.28);margin-top:.6rem;transition:color .4s}
.dcard:hover .dcard-a{color:rgba(255,255,255,.75)}

/* ============================================================
   FAVOURITES GRID
   ============================================================ */
#favs{padding:4.5rem 2rem;background:var(--bg)}
.favs-g{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.fcard{background:var(--paper);cursor:pointer;transition:background .5s}
.fcard:hover{background:var(--bg)}
.fcard-img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;filter:grayscale(8%);transition:transform .9s}
.fcard:hover .fcard-img{transform:scale(1.03)}
.fcard-body{padding:1rem 1.1rem 1.2rem}
.fcard-n{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.fcard-t{font-family:var(--serif);font-size:.95rem;font-weight:300;color:var(--ink);margin-bottom:.25rem;line-height:1.25}
.fcard-p{font-size:11px;color:var(--muted);font-weight:300}
.fcard-bk{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-top:.5rem;opacity:0;transition:opacity .4s}
.fcard:hover .fcard-bk{opacity:1}

/* ============================================================
   REVIEWS — INFINITE HORIZONTAL MARQUEE
   ============================================================ */
#revs{
  padding:4.5rem 0;
  background:var(--paper);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.revs-hd{padding:0 2rem 2rem;display:flex;align-items:flex-end;justify-content:space-between}
.revs-sc{
  display:flex;
  gap:1.5rem;
  width:max-content;
  animation:marquee-revs 48s linear infinite;
  padding:0 1rem .5rem;
  cursor:grab;
}
.revs-sc:hover{animation-play-state:paused}
.revs-sc:active{cursor:grabbing}
@keyframes marquee-revs{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.rcard{
  flex-shrink:0;
  width:310px;
  background:var(--bg);
  border:1px solid var(--line);
  padding:1.75rem;
}
.rstars{font-size:11px;color:var(--brass);letter-spacing:.1em;margin-bottom:.75rem}
.rtxt{font-family:var(--serif);font-size:.96rem;font-weight:300;font-style:italic;color:var(--ink);line-height:1.75;margin-bottom:1rem}
.rperson{display:flex;align-items:center;gap:.7rem;border-top:1px solid var(--line);padding-top:.75rem}
.ravt{width:34px;height:34px;object-fit:cover;border:1px solid var(--line)}
.rname{font-size:11px;font-weight:500;color:var(--ink)}
.rarea{font-size:10px;color:var(--muted)}

/* ============================================================
   GUARANTEE / TRUST SECTION — 6 ITEMS, 3-COLUMN GRID
   ============================================================ */
#trust{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
}
.tbadge{
  background:var(--bg);
  padding:2rem 1.5rem;
  border-bottom:2px solid transparent;
  transition:border-color .4s;
}
.tbadge:hover{border-color:var(--brass)}
.tb-i{font-size:1.4rem;margin-bottom:.75rem;opacity:.65}
.tb-t{
  font-family:var(--serif);
  font-size:.95rem;
  font-weight:300;
  color:var(--ink);
  margin-bottom:.35rem;
  line-height:1.25;
}
.tb-d{font-size:11px;color:var(--muted);line-height:1.75;font-weight:300}

/* ============================================================
   BRANDS TICKER
   ============================================================ */
.btk{padding:1.5rem 0;overflow:hidden;background:#0a0806;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.btk-t{display:flex;white-space:nowrap;animation:tick 18s linear infinite}
.btk-i{display:inline-block;padding:0 2.2rem;font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.4)}

/* ============================================================
   EMERGENCY CTA SPLIT
   ============================================================ */
#ecta{display:grid;grid-template-columns:1fr 1fr;min-height:360px;border-top:1px solid var(--line)}
.ecta-l{padding:3.5rem 2.5rem;background:var(--ink);display:flex;flex-direction:column;justify-content:space-between}
.ecta-r{padding:3.5rem 2.5rem;background:var(--paper);display:flex;flex-direction:column;justify-content:space-between}
.ecta-ey{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:1rem}
.ecta-ey2{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.ecta-h{font-family:var(--serif);font-size:clamp(1.5rem,2.5vw,2.1rem);font-weight:300;color:#fff;line-height:1.2}
.ecta-h em{font-style:italic;color:rgba(255,255,255,.5)}
.ecta-h2{font-family:var(--serif);font-size:clamp(1.5rem,2.5vw,2.1rem);font-weight:300;color:var(--ink);line-height:1.2}
.ecta-h2 em{font-style:italic;color:var(--brass)}
.ecta-ph{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:200;letter-spacing:.07em;color:#fff;display:block;margin:1.4rem 0}
.ecta-sub{font-size:12px;color:rgba(255,255,255,.4);line-height:1.75;font-weight:300}

/* ============================================================
   CONTACT BAR
   ============================================================ */
.cbar{background:var(--ink);color:#fff;padding:13px 2rem;display:flex;align-items:center;justify-content:center;gap:.8rem;font-size:11px;flex-wrap:wrap}
.cbar strong{font-size:15px;font-weight:300;letter-spacing:.1em}
.cbar-wa{color:#25d366;font-size:10px;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(37,211,102,.35);padding:5px 14px;margin-left:.5rem;transition:background .3s;cursor:pointer;background:none;font-family:var(--sans);text-decoration:none}
.cbar-wa:hover{background:rgba(37,211,102,.12)}

/* ============================================================
   FLOATING ACTION BUTTONS
   ============================================================ */
.fab-phone{position:fixed;bottom:24px;left:24px;z-index:9000;background:var(--ink);color:#fff;width:58px;height:58px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 24px rgba(0,0,0,.35);border:none;text-decoration:none;transition:background .3s,transform .3s}
.fab-phone:hover{background:var(--brass);transform:scale(1.08)}
.fab-wa{position:fixed;bottom:24px;right:24px;z-index:9000;background:#25d366;color:#fff;width:58px;height:58px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 24px rgba(37,211,102,.4);border:none;text-decoration:none;transition:background .3s,transform .3s;animation:wap 2.5s ease-in-out infinite}
.fab-wa:hover{background:#1da855;transform:scale(1.08)}
@keyframes wap{0%,100%{box-shadow:0 4px 24px rgba(37,211,102,.4),0 0 0 0 rgba(37,211,102,.35)}50%{box-shadow:0 4px 24px rgba(37,211,102,.4),0 0 0 14px rgba(37,211,102,0)}}

/* ============================================================
   WA LINK BUTTON
   ============================================================ */
.wa-link{display:inline-flex;align-items:center;gap:.5rem;background:#25d366;color:#fff;padding:9px 18px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;margin-top:.7rem;transition:background .3s;cursor:pointer;border:none;font-family:var(--sans)}
.wa-link:hover{background:#1da855}

/* ============================================================
   PAGE TRANSITIONS
   ============================================================ */
.pg{animation:pgi .35s var(--ease) both}
@keyframes pgi{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
   INNER PAGE HEADER / BREADCRUMB
   ============================================================ */
.pghdr{padding:3rem 2rem 2.5rem;border-bottom:1px solid var(--line);background:var(--paper)}
.bc{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.4rem;margin-bottom:.8rem}
.bcl{cursor:pointer;transition:color .25s}.bcl:hover{color:var(--ink)}
.bcd{color:var(--line)}
.pgtit{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.5rem);font-weight:300;color:var(--ink);line-height:1.1}
.pgtit em{font-style:italic;color:var(--brass)}
.pg-sub{font-size:12px;color:var(--muted);margin-top:.5rem;font-weight:300}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.cl{background:var(--paper);padding:3rem 2.5rem}
.cr{background:var(--bg);padding:3rem 2.5rem}
.fg{margin-bottom:1rem}
.fl{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.4rem}
.fi{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);font-size:13px;font-family:var(--sans);padding:10px 13px;outline:none;transition:border-color .3s}
.fi:focus{border-color:var(--brass)}
textarea.fi{resize:vertical;min-height:90px}
.cinfo{display:flex;flex-direction:column;gap:1.4rem}
.ci-row{border-bottom:1px solid var(--line);padding-bottom:1.1rem}
.ci-l{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.ci-v{font-size:13px;font-weight:300;color:var(--ink)}
.ci-s{font-size:10px;color:var(--muted);margin-top:.2rem}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-g{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.about-l{padding:4rem 2.5rem;background:var(--paper)}
.about-r{background:var(--ink);padding:4rem 2.5rem;position:relative;overflow:hidden}
.about-rbg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.12}
.about-r>*{position:relative;z-index:1}
.numsq{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.ns-v{font-family:var(--serif);font-size:2.5rem;font-weight:300;color:#fff;line-height:1}
.ns-l{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-top:.25rem}
.ns-ln{width:36px;height:1px;background:rgba(255,255,255,.15);margin-top:.5rem}

/* ============================================================
   SERVICE DETAIL PAGE
   ============================================================ */
.dhero{height:380px;position:relative;overflow:hidden;display:flex;align-items:flex-end}
.dhbg{position:absolute;inset:0;background-size:cover;background-position:center}
.dhov{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,6,.96),rgba(10,8,6,.2) 55%)}
.dhc{position:relative;z-index:2;padding:2.5rem}
.dhpre{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:.4rem;border:1px solid rgba(255,255,255,.12);display:inline-block;padding:3px 10px}
.dhtit{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.5rem);font-weight:300;color:#fff;line-height:1.1}
.dhsub{font-size:12px;color:rgba(255,255,255,.38);margin-top:.3rem}
.dbbody{display:grid;grid-template-columns:1fr 280px;gap:1px;background:var(--line)}
.dbm{padding:2.5rem;background:var(--paper)}
.dbs{padding:2.5rem;background:var(--bg)}
.dst{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);padding-bottom:.5rem;border-bottom:1px solid var(--line);margin-bottom:1rem}
.ssg{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-bottom:1.5rem}
.ssi{background:var(--paper);padding:.85rem 1rem;border-left:2px solid transparent;transition:all .4s}
.ssi:hover{border-color:var(--brass);background:var(--bg)}
.ssn{font-size:12px;color:var(--ink);margin-bottom:.12rem}
.ssd{font-size:10px;color:var(--muted)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:none;padding:.9rem 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;color:var(--ink);font-family:var(--sans);font-size:12.5px;text-align:start;transition:color .25s}
.faq-q:hover{color:var(--brass)}
.farr{font-size:.75rem;color:var(--muted);transition:transform .3s}
.faq-a{display:none;padding:.2rem 0 .8rem}
.faq-a p{font-size:11.5px;color:var(--muted);line-height:1.85}
.faq-i.open .farr{transform:rotate(180deg)}
.faq-i.open .faq-q{color:var(--brass)}
.scta-box{background:var(--ink);padding:1.75rem;margin-bottom:1rem}
.scp{font-family:var(--serif);font-size:1.9rem;font-weight:300;color:#fff;line-height:1}
.scps{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin:.3rem 0 1.1rem}
.bfull{width:100%;background:#fff;color:var(--ink);font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding:12px;border:none;cursor:pointer;font-family:var(--sans);display:block;text-align:center;margin-bottom:.6rem;transition:all .4s}
.bfull:hover{background:var(--brass);color:#fff}
.bfol{width:100%;background:#25d366;color:#fff;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;padding:11px;border:none;cursor:pointer;font-family:var(--sans);transition:background .4s;display:block;text-align:center}
.bfol:hover{background:#1da855}

/* ============================================================
   AREAS PAGE
   ============================================================ */
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:2rem}
.az{background:var(--paper);padding:1.75rem 1.5rem}
.azt{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:.85rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.azl{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.azl li{font-size:11.5px;color:var(--muted);line-height:1.5}

/* ============================================================
   FOOTER
   ============================================================ */
#foot{background:var(--ink);color:rgba(255,255,255,.6)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;padding:3.5rem 2rem;border-bottom:1px solid rgba(255,255,255,.08)}
.foot-bn{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:.3rem}
.foot-bs{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:.75rem}
.foot-d{font-size:12px;line-height:1.85;font-weight:300}
.foot-ct{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:.7rem}
.foot-ul{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.foot-ul a{font-size:12px;color:rgba(255,255,255,.4);cursor:pointer;transition:color .25s;text-decoration:none;display:block}
.foot-ul a:hover{color:rgba(255,255,255,.85)}
.foot-bot{padding:1.1rem 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.4rem}
.foot-c{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.2)}

/* ============================================================
   RTL SUPPORT
   ============================================================ */
html[dir="rtl"] .hn-r{flex-direction:row-reverse}
html[dir="rtl"] .fab-phone{left:auto;right:24px}
html[dir="rtl"] .fab-wa{right:auto;left:24px}
html[dir="rtl"] .faq-q .farr{order:-1}
html[dir="rtl"] .ssi{border-left:none;border-right:2px solid transparent}
html[dir="rtl"] .ssi:hover{border-right-color:var(--brass)}
html[dir="rtl"] .hline{transform:scaleX(-1)}
html[dir="rtl"] .revs-sc{animation-direction:reverse}

/* ============================================================
   RESPONSIVE — TABLET (768px)
   ============================================================ */
@media(max-width:768px){
  .hn{display:none!important}.hbk{display:none}
  .mob-bar{display:flex!important}
  #hdr{grid-template-columns:1fr auto}.hlogo{text-align:start}
  .srow{grid-template-columns:repeat(2,1fr)}.scel:nth-child(2){border-right:none}
  .disc-g,.favs-g{grid-template-columns:repeat(2,1fr)}
  .cgrid,.about-g,#ecta,.dbbody{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .agrid{grid-template-columns:repeat(2,1fr)}
  #trust{grid-template-columns:repeat(2,1fr)}
  #hero{height:clamp(480px,65vh,620px)}
  .harr{width:36px;height:36px;font-size:1.1rem;background:rgba(0,0,0,.38)}
  .fab-phone,.fab-wa{bottom:16px;width:52px;height:52px;font-size:1.3rem}
  .cl,.cr,.about-l,.about-r,.ecta-l,.ecta-r{padding:2rem 1.5rem}
  .rcard{width:270px}
  .abar-i{font-size:10.5px}
  body,#wr{font-size:15px}
  .hh1{font-size:clamp(2rem,6vw,2.8rem)}
  .hsub{font-size:14px;max-width:90vw}
  .snum{font-size:2rem}
  .slbl{font-size:11px}
  .stmt-q{font-size:clamp(1.7rem,4vw,2.2rem)}
  .dcard-t{font-size:1.05rem}
  .dcard-s{font-size:11px}
  .dcard-a{font-size:10px}
  .fcard-t{font-size:1.05rem}
  .fcard-p{font-size:12px}
  .rtxt{font-size:1.05rem}
  .rname{font-size:12px}
  .rarea{font-size:11px}
  .tb-d{font-size:12px}
  .pgtit{font-size:clamp(1.8rem,4vw,2.4rem)}
  .pg-sub{font-size:13px}
  .ci-v{font-size:14.5px}
  .mm-link{font-size:2.2rem}
  .foot-d{font-size:13px}
  .hc{padding:0 1.25rem}
  .slide-badge{font-size:8.5px}
}

/* ============================================================
   RESPONSIVE — MOBILE (480px)
   ============================================================ */
@media(max-width:480px){
  .disc-g,.favs-g{grid-template-columns:1fr 1fr}
  .agrid{grid-template-columns:1fr 1fr}
  #trust{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .hh1{font-size:2rem}
  .hsub{font-size:13.5px}
  .hctas{flex-direction:column;align-items:center}
  .hctas .btn-s,.hctas .btn-g{width:100%;max-width:280px;text-align:center}
  .rcard{width:calc(100vw - 3rem)}
}