/* ============================================================
   EXPERT RIYADH LAW FIRM — "Najd Grid" Design System
   Stone / Emerald / Copper, sadu-weave motif, bilingual RTL+LTR
   Uses CSS logical properties so one stylesheet serves AR (rtl)
   and EN (ltr) without duplication.
   ============================================================ */

:root{
  --stone:#EDE8DC;
  --stone-2:#E2DBC9;
  --stone-3:#D6CCB2;
  --ink:#20241F;
  --ink-soft:#4A4A3E;
  --emerald:#0F5132;
  --emerald-2:#0B3D26;
  --copper:#A3572E;
  --copper-light:#C97C4F;
  --line:#C8BC98;
  --white:#FFFFFF;

  --display: 'Bricolage Grotesque', 'Cairo', sans-serif;
  --body: 'Source Serif 4', 'Noto Naskh Arabic', serif;
  --mono: 'JetBrains Mono', monospace;

  --radius-sm: 4px;
  --radius-md: 12px;
  --container: 1180px;
}

/* Arabic pages get proper Arabic-first font stacks */
[lang="ar"]{
  --display: 'Cairo', 'Bricolage Grotesque', sans-serif;
  --body: 'Noto Naskh Arabic', 'Source Serif 4', serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--stone);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
.content-block a, .direct-answer a, .faq-item a, .p-card p a{ color:var(--emerald); text-decoration:underline; text-decoration-color:rgba(15,81,50,.35); text-underline-offset:2px; }
.content-block a:hover, .direct-answer a:hover, .faq-item a:hover{ color:var(--copper); text-decoration-color:currentColor; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }

.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:32px; }

h1,h2,h3,h4{ font-family:var(--display); font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
h1{ font-size:52px; line-height:1.08; }
h2{ font-size:34px; line-height:1.15; }
h3{ font-size:20px; line-height:1.3; }
p{ color:var(--ink-soft); }

/* ---------- image placeholder (swap for real <img> at completion) ---------- */
.ph{
  background: repeating-linear-gradient(45deg,#DCD4BC,#DCD4BC 12px,#D2C9AC 12px,#D2C9AC 24px);
  border:1px solid #C8BC98;
  display:flex; align-items:center; justify-content:center;
  color:#6B6248; font-family:var(--mono); font-size:11px; letter-spacing:.02em;
  text-align:center; padding:10px; border-radius:var(--radius-sm);
  min-height:120px;
}

/* ---------- sadu weave divider (direction-agnostic, symmetric) ---------- */
.weave{
  height:14px; width:100%;
  background:
    linear-gradient(45deg, var(--copper) 25%, transparent 25%) 0 0/14px 14px,
    linear-gradient(-45deg, var(--copper) 25%, transparent 25%) 0 0/14px 14px,
    linear-gradient(45deg, transparent 75%, var(--emerald) 75%) 0 0/14px 14px,
    linear-gradient(-45deg, transparent 75%, var(--emerald) 75%) 0 0/14px 14px;
  background-color:var(--stone-2);
}

/* ---------- header ---------- */
header{ padding:22px 0; border-block-end:2px solid var(--ink); background:var(--stone); position:sticky; top:0; z-index:50; }
.nav{ display:flex; justify-content:space-between; align-items:center; gap:20px; position:relative; }
.brand{ font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.01em; white-space:nowrap; display:flex; align-items:center; gap:10px; }
.brand-mark{ height:34px; width:auto; display:block; }
.brand span{ color:var(--emerald); }
.nav-links{ display:flex; gap:26px; font-family:var(--display); font-weight:500; font-size:13px; flex-wrap:wrap; }
.nav-links a{ transition:color .2s ease; }
.nav-links a:hover{ color:var(--copper); }
.lang-toggle{ background:var(--ink); color:var(--stone); padding:6px 14px; font-family:var(--mono); font-size:11px; border-radius:20px; white-space:nowrap; }
.header-whatsapp-btn{ display:flex; align-items:center; gap:7px; background:#25D366; color:#fff; padding:9px 16px; border-radius:24px; font-size:13px; font-weight:700; white-space:nowrap; transition:background .15s, transform .15s; }
.header-whatsapp-btn:hover{ background:#1EBE57; transform:translateY(-1px); }
.header-whatsapp-btn svg{ width:17px; height:17px; flex-shrink:0; }
.mobile-toggle{ display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink); }

/* ---------- mega menu ---------- */
.nav-item{ position:relative; }
.nav-trigger{ display:inline-flex; align-items:center; gap:4px; }
.nav-trigger .caret{ font-size:9px; transition:transform .2s; }
.nav-item:hover .nav-trigger .caret{ transform:rotate(180deg); }
.mega-panel{
  display:none; position:absolute; top:100%; inset-inline-start:0; padding-top:14px;
  z-index:200; min-width:280px;
}
.mega-panel-inner{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:0 18px 40px rgba(32,36,31,.16); padding:20px;
}
.mega-panel-wide{ min-width:640px; }
.nav-item:hover .mega-panel, .nav-item:focus-within .mega-panel{ display:block; }
.mega-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:4px 24px; max-height:60vh; overflow-y:auto; }
.mega-grid-3col{ grid-template-columns:repeat(3,1fr); }
.mega-grid a{
  font-family:var(--body); font-size:13.5px; font-weight:400; color:var(--ink-soft);
  padding:7px 8px; border-radius:var(--radius-sm); white-space:normal; line-height:1.35;
  transition:background .15s, color .15s; display:block;
}
.mega-grid a:hover{ background:var(--stone-2); color:var(--emerald); }

@media (max-width: 900px){
  .mega-panel{ display:none !important; position:static; padding:0; margin:0; min-width:0; }
  .mega-panel-inner{ box-shadow:none; border:none; padding:8px 0 8px 18px; background:transparent; }
  .nav-item.mobile-mega-open .mega-panel{ display:block !important; }
  .mega-grid, .mega-grid-3col{ grid-template-columns:1fr; max-height:none; overflow:visible; gap:2px; }
  .nav-trigger{ width:100%; justify-content:space-between; }
}

/* ---------- breadcrumb ---------- */
.breadcrumb{ padding-block:16px; font-size:12px; color:var(--ink-soft); }
.breadcrumb a:hover{ color:var(--copper); }
.breadcrumb .sep{ margin-inline:6px; color:var(--line); }

/* ---------- hero ---------- */
.hero{ padding-block:48px 40px; }
.hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.hero.hero-narrow .hero-grid{ grid-template-columns:1fr; max-width:820px; }
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--copper); margin-block-end:20px; }
[lang="ar"] .eyebrow{ font-family:var(--display); letter-spacing:0; font-weight:600; }
.lead{ font-size:17px; line-height:1.65; color:var(--ink-soft); max-width:480px; margin-block:16px 22px; }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{ padding:15px 24px; font-family:var(--display); font-weight:700; font-size:13px; border-radius:var(--radius-sm); display:inline-flex; align-items:center; gap:8px; transition:transform .2s ease, background .2s ease; }
.btn-primary{ background:var(--emerald); color:var(--stone); }
.btn-primary:hover{ background:var(--emerald-2); transform:translateY(-2px); }
.btn-ghost{ border:2px solid var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--stone); transform:translateY(-2px); }
.hero-visual .ph{ height:420px; border-radius:var(--radius-md); }
.hero-visual-img{ width:100%; height:420px; object-fit:cover; border-radius:var(--radius-md); display:block; }
@media (max-width: 900px){ .hero-visual-img{ height:280px; } }
.stat-line{ display:flex; gap:22px; font-family:var(--mono); font-size:11px; color:#6B6248; text-transform:uppercase; margin-block-start:20px; flex-wrap:wrap; }

/* ---------- authority strip ---------- */
.authority-strip{ background:var(--emerald-2); padding:16px 0; }
.authority-strip .wrap{ display:flex; gap:36px; flex-wrap:wrap; justify-content:center; }
.authority-strip span{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#A9C4B4; }
[lang="ar"] .authority-strip span{ font-family:var(--display); letter-spacing:0; font-weight:500; }

/* ---------- generic sections ---------- */
section{ padding-block:52px; }
.section-head{ margin-block-end:46px; max-width:680px; }
.section-head.split{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; max-width:none; flex-wrap:wrap; }
.tag{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--copper); margin-block-end:14px; }
[lang="ar"] .tag{ font-family:var(--display); letter-spacing:0; font-weight:600; }
.section-head p{ color:var(--ink-soft); font-size:15px; margin-block-start:14px; line-height:1.7; }

/* ---------- direct-answer / AEO block ---------- */
.direct-answer{ background:var(--white); border-inline-start:4px solid var(--emerald); padding:22px 26px; border-radius:var(--radius-sm); font-size:16px; line-height:1.7; color:var(--ink); margin-block-end:24px; }
.toc-box{ background:var(--stone-2); border-radius:var(--radius-sm); padding:22px 26px; margin-block-end:28px; }
.toc-box .toc-title{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--copper); margin-block-end:12px; }
.toc-box ol{ list-style:none; padding:0; margin:0; counter-reset:toc; }
.toc-box li{ counter-increment:toc; margin-block-end:8px; font-size:14.5px; }
.toc-box li::before{ content:counter(toc) "."; color:var(--copper); font-weight:600; margin-inline-end:8px; font-family:var(--mono); font-size:12.5px; }
.toc-box a{ color:var(--ink); text-decoration:none; }
.toc-box a:hover{ color:var(--emerald); text-decoration:underline; }
.content-block h2[id]{ scroll-margin-top:96px; }
.direct-answer strong{ color:var(--emerald); }

/* ---------- practice / content grid cards ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.p-card{ background:var(--stone-2); padding:30px 26px; border-radius:var(--radius-md); min-height:150px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .25s ease, background .25s ease; }
.p-card:hover{ transform:translateY(-4px); background:#D9D0B8; }
.p-card h3{ margin-block-start:12px; }
.p-card p{ font-size:13px; margin-block-start:8px; }
.p-card .idx{ font-family:var(--mono); font-size:11px; color:var(--copper); }
.p-card.flagship{ background:var(--emerald-2); color:var(--stone); }
.p-card.flagship h3{ color:var(--stone); }
.p-card.flagship p{ color:#A9C4B4; }
.p-card.flagship .idx{ color:#9FD8B8; }
.p-card.view-all{ background:transparent; border:2px dashed var(--copper); display:flex; align-items:center; justify-content:center; text-align:center; }
.p-card.view-all h3{ color:var(--copper); margin:0; }

/* ---------- long-form content sections on service pages ---------- */
.content-block{ max-width:820px; }
.content-block h2{ margin-block:26px 12px; }
.content-block h2:first-child{ margin-block-start:0; }
.content-block p{ margin-block-end:12px; font-size:16px; }
.content-block ul{ margin-block-end:18px; padding-inline-start:0; }
.content-block ul li{ position:relative; padding-inline-start:24px; margin-block-end:10px; font-size:15px; color:var(--ink-soft); }
.content-block ul li::before{ content:'—'; position:absolute; inset-inline-start:0; color:var(--copper); }
[lang="ar"] .content-block ul li::before{ content:'◆'; font-size:9px; top:6px; }

/* ---------- FAQ ---------- */
.faq-item{ border-block-start:1px solid var(--line); padding-block:18px; }
.faq-item h4{ font-family:var(--display); font-weight:700; font-size:18px; margin-block-end:10px; }
.faq-item p{ font-size:14px; line-height:1.75; max-width:720px; }

/* ---------- stats / credibility ---------- */
.stats-row{ display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line); }
.stat{ padding:34px 24px; text-align:center; border-inline-start:1px solid var(--line); }
.stat:first-child{ border-inline-start:none; }
.stat-icon{ width:26px; height:26px; color:var(--copper); margin-block-end:12px; margin-inline:auto; display:block; }
.stat .figure{ font-family:var(--display); font-weight:700; font-size:40px; color:var(--emerald); }
.stat .label{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#6B6248; margin-block-start:8px; }
[lang="ar"] .stat .label{ font-family:var(--display); letter-spacing:0; font-weight:500; }

/* ---------- team / attorneys ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.team-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px; transition:transform .25s ease, box-shadow .25s ease; }
.team-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(32,36,31,.10); }
.team-card .ph{ height:230px; margin-block-end:14px; }
.team-photo{ width:100%; height:230px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--line); margin-block-end:14px; display:block; }
.team-card h4{ font-family:var(--display); font-weight:700; font-size:16px; }
.team-card span{ font-size:12px; color:var(--copper); font-family:var(--mono); }
[lang="ar"] .team-card span{ font-family:var(--display); font-weight:500; }

/* ---------- districts / locations ---------- */
.district-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.district-card{ background:var(--stone-2); padding:18px; text-align:center; border-radius:var(--radius-sm); transition:transform .2s ease; }
.district-card:hover{ transform:translateY(-3px); }
.district-card .ph{ height:90px; margin-block-end:12px; }
.district-photo{ width:100%; height:90px; object-fit:cover; border-radius:var(--radius-sm); margin-block-end:12px; display:block; }
.district-card h4{ font-size:14px; }
.district-note{ font-size:12px; color:var(--ink-soft); margin-block-start:18px; font-family:var(--mono); }
[lang="ar"] .district-note{ font-family:var(--display); }

/* ---------- industries / chips ---------- */
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ border:1px solid var(--line); padding:9px 17px; font-size:12px; border-radius:20px; transition:border-color .2s, color .2s; background:var(--white); }
.chip:hover{ border-color:var(--copper); color:var(--copper); }
.chip.more{ color:var(--ink-soft); background:transparent; border-style:dashed; }

/* ---------- tools ---------- */
.tools-strip{ display:flex; gap:12px; flex-wrap:wrap; }
.tool-chip{ background:var(--white); border:1px solid var(--line); padding:13px 18px; font-size:12px; font-weight:600; border-radius:var(--radius-sm); display:flex; align-items:center; gap:8px; transition:border-color .2s; }
.tool-chip:hover{ border-color:var(--emerald); }
.tool-chip .dot{ width:6px; height:6px; background:var(--copper); border-radius:50%; }

/* ---------- sidebar CTA (service pages) ---------- */
.service-layout{ display:grid; grid-template-columns:1fr 320px; gap:50px; align-items:start; }
.sidebar-cta{ background:var(--emerald-2); color:var(--stone); border-radius:var(--radius-md); padding:30px 26px; position:sticky; top:100px; }
.sidebar-cta h3{ color:var(--stone); font-size:19px; margin-block-end:10px; }
.sidebar-cta p{ color:#A9C4B4; font-size:13px; margin-block-end:20px; }
.sidebar-cta .btn-primary{ background:var(--copper); width:100%; justify-content:center; }
.sidebar-cta .btn-primary:hover{ background:var(--copper-light); }
.sidebar-cta .btn-ghost{ border-color:rgba(237,232,220,.35); color:var(--stone); width:100%; justify-content:center; margin-block-start:10px; }
.sidebar-hub-link{ display:flex; align-items:center; gap:8px; margin-block-start:14px; padding:10px 14px; background:rgba(237,232,220,.08); border:1px solid rgba(237,232,220,.25); border-radius:var(--radius-sm); font-size:13px; font-weight:600; color:var(--stone); transition:background .15s, border-color .15s; }
.sidebar-hub-link:hover{ background:rgba(237,232,220,.16); border-color:rgba(237,232,220,.4); color:var(--copper-light); }
.sidebar-hub-arrow{ font-family:var(--mono); flex-shrink:0; }
.sidebar-list{ margin-block-start:22px; padding-block-start:20px; border-block-start:1px solid rgba(237,232,220,.2); }
.sidebar-list li{ font-size:13px; padding-block:8px; border-block-end:1px solid rgba(237,232,220,.12); }
.sidebar-list a:hover{ color:var(--copper-light); }
.sidebar-trust{ display:flex; align-items:center; gap:8px; font-size:12px; color:#A9C4B4; margin-block-start:16px; padding-block-start:16px; border-block-start:1px solid rgba(237,232,220,.2); }
.sidebar-trust svg{ width:16px; height:16px; flex-shrink:0; color:var(--copper-light); }

/* ---------- final CTA ---------- */
.cta-final{ background:var(--ink); color:var(--stone); text-align:center; }
.cta-final h2{ color:var(--stone); max-width:640px; margin-inline:auto; margin-block-end:28px; }

/* ---------- footer ---------- */
footer{ background:var(--emerald-2); color:#A9C4B4; padding-block:50px 30px; font-size:13px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-block-end:36px; }
.footer-col h4{ color:var(--stone); font-size:13px; margin-block-end:16px; letter-spacing:.04em; text-transform:uppercase; }
.footer-col ul li{ margin-block-end:9px; }
.footer-col a:hover{ color:var(--stone); }
.footer-bottom{ border-block-start:1px solid rgba(169,196,180,.2); padding-block-start:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:var(--mono); font-size:11px; }
[lang="ar"] .footer-bottom{ font-family:var(--display); }
.social-row{ display:flex; gap:12px; margin-block-start:22px; }
[lang="ar"] .social-row{ justify-content:flex-end; }
.social-row a{ position:relative; width:40px; height:40px; border-radius:50%; border:1.5px solid rgba(169,196,180,.28); display:flex; align-items:center; justify-content:center; color:#A9C4B4; transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; }
.social-row svg{ width:18px; height:18px; position:relative; z-index:1; }
.social-row a:hover{ background:var(--copper); border-color:var(--copper); color:var(--stone); transform:translateY(-3px); box-shadow:0 8px 18px rgba(163,87,46,.35); }
.social-row a:focus-visible{ outline:2px solid var(--copper-light); outline-offset:2px; }

/* ---------- whatsapp floating button ---------- */
.wa-float{ position:fixed; inset-block-end:26px; inset-inline-end:26px; z-index:60; background:var(--emerald); color:var(--stone); width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(15,81,50,.35); font-size:26px; transition:transform .2s ease; }
.wa-float:hover{ transform:scale(1.08); }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------------------------------------------------------------- */

/* ---------- calculator / interactive tool UI ---------- */
.calc-box{ background:var(--white); border-radius:var(--radius-md); padding:34px; border:1px solid var(--line); }
.calc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-block-end:22px; }
.calc-field{ display:flex; flex-direction:column; gap:8px; }
.calc-field label{ font-family:var(--display); font-weight:700; font-size:13px; color:var(--ink); }
.calc-field .hint{ font-size:12px; color:var(--ink-soft); font-family:var(--mono); }
[lang="ar"] .calc-field .hint{ font-family:var(--display); font-weight:400; }
.calc-field input[type="number"], .calc-field input[type="text"], .calc-field select{
  padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:15px;
  font-family:var(--body); background:var(--stone); color:var(--ink); width:100%;
}
.calc-field input:focus, .calc-field select:focus{ outline:2px solid var(--emerald); outline-offset:1px; }
.calc-radio-row{ display:flex; gap:10px; flex-wrap:wrap; }
.calc-radio-row label{ display:flex; align-items:center; gap:7px; font-family:var(--body); font-weight:500; font-size:14px; background:var(--stone); border:1px solid var(--line); padding:10px 16px; border-radius:20px; cursor:pointer; transition:border-color .2s, background .2s; }
.calc-radio-row input[type="radio"], .calc-radio-row input[type="checkbox"]{ accent-color:var(--emerald); }
.calc-radio-row label:has(input:checked){ border-color:var(--emerald); background:#E4DFC9; }
.calc-stepper{ display:flex; align-items:center; gap:10px; }
.calc-stepper button{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--stone); font-size:18px; font-family:var(--display); cursor:pointer; transition:background .2s; flex-shrink:0; }
.calc-stepper button:hover{ background:#E4DFC9; }
.calc-stepper .calc-count{ font-family:var(--display); font-weight:700; font-size:18px; min-width:28px; text-align:center; }
.calc-btn{ background:var(--emerald); color:var(--stone); border:none; padding:16px 30px; font-family:var(--display); font-weight:700; font-size:14px; border-radius:var(--radius-sm); cursor:pointer; transition:background .2s, transform .2s; width:100%; }
.calc-btn:hover{ background:var(--emerald-2); transform:translateY(-1px); }
.calc-result{ margin-block-start:26px; padding-block-start:26px; border-block-start:2px dashed var(--line); display:none; }
.calc-result.show{ display:block; }
.calc-result-figure{ font-family:var(--display); font-weight:700; font-size:36px; color:var(--emerald); margin-block-end:6px; }
.calc-result-label{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#6B6248; margin-block-end:22px; }
[lang="ar"] .calc-result-label{ font-family:var(--display); letter-spacing:0; font-weight:600; }
.calc-breakdown{ width:100%; border-collapse:collapse; margin-block-end:18px; }
.calc-breakdown tr{ border-block-end:1px solid var(--line); }
.calc-breakdown td{ padding:11px 4px; font-size:14px; }
.calc-breakdown td:last-child{ text-align:end; font-family:var(--display); font-weight:700; color:var(--ink); }
.calc-note{ background:var(--stone-2); border-inline-start:3px solid var(--copper); padding:14px 18px; border-radius:var(--radius-sm); font-size:13px; color:var(--ink-soft); margin-block-end:18px; }
.calc-disclaimer{ font-size:12px; color:#8A8266; line-height:1.7; margin-block-start:18px; }
.calc-error{ background:#F5E3DB; border-inline-start:3px solid var(--copper); padding:14px 18px; border-radius:var(--radius-sm); font-size:13px; color:#7A3A1E; margin-block-end:18px; display:none; }
.calc-error.show{ display:block; }

/* ---------- page banner image (category/industry/location/blog hero photo) ---------- */
.page-banner{ height:280px; width:100%; object-fit:cover; display:block; border-radius:var(--radius-md); margin-block:28px 0; }
@media (max-width: 640px){ .page-banner{ height:180px; } }
.table-wrap{ overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--line); margin-block:24px; -webkit-overflow-scrolling:touch; }
.data-table{ width:100%; border-collapse:collapse; min-width:480px; background:var(--white); }
.data-table caption{ text-align:start; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#6B6248; padding:14px 18px 0; }
[lang="ar"] .data-table caption{ font-family:var(--display); letter-spacing:0; font-weight:600; }
.data-table th, .data-table td{ padding:14px 18px; text-align:start; font-size:14px; border-block-end:1px solid var(--line); }
.data-table thead th{ background:var(--emerald-2); color:var(--stone); font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.03em; text-transform:uppercase; }
.data-table tbody tr:nth-child(even){ background:var(--stone-2); }
.data-table tbody tr:hover{ background:#E4DFC9; }
.data-table td:first-child, .data-table th:first-child{ font-weight:600; color:var(--ink); }
.table-scroll-hint{ font-family:var(--mono); font-size:10px; color:#8A8266; text-align:end; margin-block-start:-16px; margin-block-end:20px; display:none; }
[lang="ar"] .table-scroll-hint{ font-family:var(--display); }

/* ---------- inline SVG chart (inheritance donut) ---------- */
.chart-row{ display:flex; gap:32px; align-items:center; flex-wrap:wrap; margin-block-end:22px; }
.chart-svg{ flex-shrink:0; width:180px; height:180px; }
.chart-legend{ display:flex; flex-direction:column; gap:8px; flex:1; min-width:200px; }
.chart-legend-item{ display:flex; align-items:center; gap:10px; font-size:13px; }
.chart-legend-dot{ width:12px; height:12px; border-radius:3px; flex-shrink:0; }
.chart-legend-label{ font-weight:600; }
.chart-legend-value{ margin-inline-start:auto; font-family:var(--display); font-weight:700; color:var(--emerald); }

@media (max-width: 640px){
  .table-scroll-hint{ display:block; }
  .chart-row{ flex-direction:column; align-items:flex-start; }
  .header-whatsapp-btn span{ display:none; }
  .header-whatsapp-btn{ padding:9px 11px; }
}
@media (max-width: 900px){
  .hero-grid,.card-grid,.stats-row,.team-grid,.district-row,.service-layout,.footer-grid,.calc-grid{ grid-template-columns:1fr !important; }
  .nav-links{ display:none; }
  .nav-links.mobile-open{
    display:flex; flex-direction:column; gap:0; position:absolute; top:100%;
    inset-inline-start:0; inset-inline-end:0; background:var(--stone);
    border-block-end:2px solid var(--ink); padding:8px 24px 16px;
    max-height:calc(100vh - 80px); overflow-y:auto; z-index:150;
  }
  .nav-links.mobile-open > a{ padding:13px 0; border-block-end:1px solid var(--line); }
  .nav-links.mobile-open .nav-item{ border-block-end:1px solid var(--line); }
  .nav-links.mobile-open .nav-item .nav-trigger{ padding:13px 0; }
  .mobile-toggle{ display:block; }
  h1{ font-size:36px; }
  h2{ font-size:27px; }
  .sidebar-cta{ position:static; }
}