/* ============================================
   Plain Flow — shared styles
   ============================================ */

:root{
  --ink:#14120f;
  --ink-soft:#1e1b16;
  --ink-card:#191612;
  --paper:#f6f2ea;
  --brass:#c99a4b;
  --brass-lit:#dcae63;
  --brass-dim:#8a6a34;
  --sage:#6f9482;
  --line: rgba(246,242,234,0.13);
  --line-strong: rgba(246,242,234,0.27);
  --font-display: 'Zilla Slab', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--font-body); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1060px; margin:0 auto; padding:0 28px;}
.wrap-narrow{max-width:820px; margin:0 auto; padding:0 28px;}
a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid var(--brass); outline-offset:3px;}
.skip{position:absolute; left:-9999px;}
.skip:focus{left:12px; top:12px; background:var(--brass); color:var(--ink); padding:10px 16px; z-index:99; border-radius:3px;}

/* ---------- NAV ---------- */
header.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(20,18,15,0.88); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:17px 28px; max-width:1060px; margin:0 auto; gap:20px;
}
.logo{
  font-family:var(--font-display); font-size:20px; font-weight:700;
  display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--paper);
  flex:0 0 auto;
}
.logo-mark{width:9px; height:9px; border-radius:50%; background:var(--brass); box-shadow:0 0 0 3px rgba(201,154,75,0.17);}
.nav-links{display:flex; gap:26px; font-size:14px; color:rgba(246,242,234,0.7);}
.nav-links a{text-decoration:none; transition:color .15s; white-space:nowrap;}
.nav-links a:hover, .nav-links a:focus-visible{color:var(--paper);}
.nav-links a[aria-current="page"]{color:var(--brass);}
.nav-cta{
  font-size:14px; font-weight:600; padding:9px 18px;
  border:1px solid var(--brass-dim); border-radius:3px;
  text-decoration:none; color:var(--brass); white-space:nowrap;
  transition:background .15s, color .15s;
}
.nav-cta:hover, .nav-cta:focus-visible{background:var(--brass); color:var(--ink);}

/* ---------- LANGUAGE SWITCHER ---------- */
.lang-switch{
  display:flex; align-items:center; gap:2px; flex:0 0 auto;
  font-family:var(--font-mono); font-size:12px;
  border:1px solid var(--line-strong); border-radius:20px; padding:3px;
}
.lang-switch a{
  padding:5px 12px; border-radius:16px; text-decoration:none;
  color:rgba(246,242,234,0.55); transition:background .15s, color .15s;
}
.lang-switch a:not(.is-active):hover, .lang-switch a:not(.is-active):focus-visible{color:var(--paper);}
.lang-switch a.is-active{background:var(--brass); color:var(--ink); font-weight:700;}

/* ---------- BUTTONS ---------- */
.btn-primary{
  background:var(--brass); color:var(--ink); font-weight:700; font-size:15px;
  padding:14px 26px; border-radius:3px; text-decoration:none; display:inline-block;
  transition:transform .15s, background .15s;
}
.btn-primary:hover, .btn-primary:focus-visible{background:var(--brass-lit); transform:translateY(-1px);}
.btn-ghost{
  color:var(--paper); font-weight:600; font-size:15px; padding:14px 20px;
  border:1px solid var(--line-strong); border-radius:3px; text-decoration:none;
  display:inline-block;
  transition:border-color .15s, background .15s;
}
.btn-ghost:hover, .btn-ghost:focus-visible{border-color:var(--paper); background:rgba(246,242,234,0.04);}

/* ---------- TYPE ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--sage); margin-bottom:22px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:24px; height:1px; background:var(--sage); flex:0 0 auto;}
h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(34px,5.2vw,56px); line-height:1.06;
  letter-spacing:-0.01em; margin:0 0 24px; max-width:800px;
}
h1 em{font-style:normal; color:var(--brass);}
.lede{font-size:19px; color:rgba(246,242,234,0.75); max-width:580px; margin:0 0 38px;}
h2{font-family:var(--font-display); font-size:clamp(27px,3.5vw,37px); line-height:1.14; margin:0 0 14px; font-weight:700;}
.section-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--sage); margin-bottom:14px;
}
.section-sub{color:rgba(246,242,234,0.67); font-size:16.5px; margin:0;}
.section-head{max-width:620px; margin-bottom:52px;}

/* ---------- SECTIONS ---------- */
section{padding:86px 0;}
section.alt{background:var(--ink-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.hero{padding:88px 0 76px; border-bottom:1px solid var(--line);}
.hero-ctas{display:flex; gap:15px; flex-wrap:wrap;}

/* ---------- LEDGER (before/after) ---------- */
.ledger{
  margin-top:70px; border:1px solid var(--line); border-radius:8px;
  background:var(--ink-soft); overflow:hidden;
}
.ledger-head{
  display:grid; grid-template-columns:1fr 1fr;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.12em;
  text-transform:uppercase; border-bottom:1px solid var(--line);
}
.ledger-head div{padding:13px 24px; color:rgba(246,242,234,0.45);}
.ledger-head div:first-child{border-right:1px solid var(--line);}
.ledger-head .lh-after{color:var(--sage);}
.ledger-row{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line);}
.ledger-row:last-child{border-bottom:none;}
.ledger-row > div{padding:20px 24px; font-size:15px;}
.lr-before{border-right:1px solid var(--line); color:rgba(246,242,234,0.5);}
.lr-after{color:rgba(246,242,234,0.9);}
.lr-after strong{color:var(--brass); font-weight:600;}

/* ---------- SERVICE CARDS (home) ---------- */
.services{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px;}
.svc{
  background:var(--ink-card); border:1px solid var(--line);
  border-radius:8px; padding:30px 26px 28px;
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  transition:border-color .15s, transform .15s;
}
.svc:hover, .svc:focus-visible{border-color:var(--brass-dim); transform:translateY(-2px);}
.svc-num{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.1em;
  color:var(--brass-dim); margin-bottom:16px;
}
.svc h3{font-family:var(--font-display); font-size:21px; margin:0 0 10px; font-weight:700;}
.svc p{font-size:15px; color:rgba(246,242,234,0.68); margin:0 0 18px;}
.svc ul{margin:0 0 20px; padding:0; list-style:none; border-top:1px solid var(--line); padding-top:16px;}
.svc li{font-size:13.5px; color:rgba(246,242,234,0.58); padding:5px 0 5px 16px; position:relative;}
.svc li::before{content:''; position:absolute; left:0; top:12px; width:5px; height:5px; border-radius:50%; background:var(--sage);}
.svc-more{
  margin-top:auto; font-size:13.5px; font-weight:600; color:var(--brass);
  display:flex; align-items:center; gap:7px;
}
.svc:hover .svc-more{gap:11px;}
.svc-more span{transition:transform .15s;}

/* ---------- STEPS ---------- */
.steps{display:flex; flex-direction:column;}
.step-row{display:grid; grid-template-columns:72px 1fr; gap:22px; padding:26px 0; border-top:1px solid var(--line);}
.step-row:last-child{border-bottom:1px solid var(--line);}
.step-idx{font-family:var(--font-mono); font-size:13px; color:var(--brass); padding-top:3px;}
.step-title{font-size:19px; font-weight:700; margin:0 0 7px; font-family:var(--font-display);}
.step-desc{color:rgba(246,242,234,0.67); margin:0; font-size:15.5px; max-width:530px;}

/* ---------- CHECKLIST GRID ---------- */
.check-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.check-item{background:var(--ink); padding:26px 24px;}
.check-item h3{font-family:var(--font-display); font-size:17.5px; margin:0 0 9px; font-weight:700;}
.check-item p{font-size:14.5px; color:rgba(246,242,234,0.64); margin:0;}
.check-mark{
  font-family:var(--font-mono); font-size:12px; color:var(--sage);
  margin-bottom:14px; letter-spacing:0.08em;
}

/* ---------- REQUIREMENTS STRIP ---------- */
.reqs{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px;}
.req-chip{
  font-family:var(--font-mono); font-size:13px; padding:9px 16px;
  border:1px solid var(--line-strong); border-radius:20px;
  color:rgba(246,242,234,0.78);
}

/* ---------- FAQ (functional accordion) ---------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  padding:22px 40px 22px 0; cursor:pointer; position:relative;
  font-family:var(--font-display); font-size:18px; font-weight:700;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:'+'; position:absolute; right:6px; top:20px;
  font-family:var(--font-mono); font-size:20px; color:var(--brass);
  transition:transform .18s;
}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq summary:hover{color:var(--brass);}
.faq .faq-body{padding:0 40px 24px 0; color:rgba(246,242,234,0.68); font-size:15.5px; margin:0;}

/* ---------- ARABIC SAMPLE ---------- */
.lang-band{display:grid; grid-template-columns:1.1fr 1fr; gap:52px; align-items:center;}
.lang-sample{background:var(--ink-card); border:1px solid var(--line); border-radius:8px; padding:26px 28px;}
.ls-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:rgba(246,242,234,0.42); margin-bottom:14px;
}
.lang-ar{
  direction:rtl; text-align:right; font-size:17px; line-height:1.85;
  color:rgba(246,242,234,0.9); margin:0 0 20px;
  padding-bottom:20px; border-bottom:1px solid var(--line);
}
.lang-en{font-size:15.5px; color:rgba(246,242,234,0.66); margin:0;}

/* ---------- CTA BAND ---------- */
.cta-band{text-align:center; padding:94px 0;}
.cta-band h2{max-width:620px; margin:0 auto 14px;}
.cta-band .section-sub{max-width:470px; margin:0 auto 34px;}
.cta-band .section-eyebrow{display:flex; justify-content:center;}

/* ---------- SERVICE PAGE BACK LINK ---------- */
.crumb{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.06em;
  color:rgba(246,242,234,0.5); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; margin-bottom:28px;
  transition:color .15s;
}
.crumb:hover, .crumb:focus-visible{color:var(--brass);}

/* ---------- OTHER SERVICES (cross-links) ---------- */
.other-svcs{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px;}
.other-card{
  background:var(--ink-card); border:1px solid var(--line); border-radius:8px;
  padding:22px 22px; text-decoration:none; color:inherit;
  transition:border-color .15s, transform .15s;
}
.other-card:hover, .other-card:focus-visible{border-color:var(--brass-dim); transform:translateY(-2px);}
.other-card .oc-num{font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; color:var(--brass-dim); margin-bottom:10px;}
.other-card h3{font-family:var(--font-display); font-size:17px; margin:0 0 7px; font-weight:700;}
.other-card p{font-size:13.5px; color:rgba(246,242,234,0.58); margin:0;}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:42px 0 58px; font-size:13.5px; color:rgba(246,242,234,0.5);}
.footer-inner{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:28px;}
.footer-nav{display:flex; gap:44px; flex-wrap:wrap;}
.footer-col h4{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(246,242,234,0.4); margin:0 0 12px; font-weight:400;
}
.footer-col a{display:block; text-decoration:none; color:rgba(246,242,234,0.62); margin-bottom:7px; transition:color .15s;}
.footer-col a:hover, .footer-col a:focus-visible{color:var(--paper);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:820px){
  .lang-band{grid-template-columns:1fr; gap:32px;}
}
@media (max-width:700px){
  .nav-links{display:none;}
  section{padding:62px 0;}
  .hero{padding:60px 0 56px;}
  .step-row{grid-template-columns:1fr;}
  .step-idx{padding-top:0;}
  .ledger-head, .ledger-row{grid-template-columns:1fr;}
  .lr-before{border-right:none; border-bottom:1px solid var(--line);}
  .ledger-head div:first-child{border-right:none; border-bottom:1px solid var(--line);}
  .footer-nav{gap:28px;}
}

/* ============================================
   RTL (Arabic) support
   ============================================ */
[dir="rtl"]{
  --font-display: 'Cairo', 'Tajawal', Tahoma, Arial, sans-serif;
  --font-body: 'Tajawal', Tahoma, Arial, sans-serif;
  --font-mono: 'Tajawal', Tahoma, Arial, sans-serif;
}
[dir="rtl"] body{direction:rtl;}

/* ledger dividers sit between columns regardless of reading direction */
[dir="rtl"] .ledger-head div:first-child{border-right:none; border-left:1px solid var(--line);}
[dir="rtl"] .lr-before{border-right:none; border-left:1px solid var(--line);}
@media (max-width:700px){
  [dir="rtl"] .lr-before{border-left:none; border-bottom:1px solid var(--line);}
  [dir="rtl"] .ledger-head div:first-child{border-left:none; border-bottom:1px solid var(--line);}
}

/* service card bullet dots */
[dir="rtl"] .svc li{padding:5px 16px 5px 0;}
[dir="rtl"] .svc li::before{left:auto; right:0;}

/* FAQ expand icon sits on the leading (right) side in RTL */
[dir="rtl"] .faq summary{padding:22px 0 22px 40px;}
[dir="rtl"] .faq summary::after{right:auto; left:6px;}
[dir="rtl"] .faq .faq-body{padding:0 0 24px 40px;}

/* the Arabic sample stays visually LTR-styled even inside an RTL page */
[dir="rtl"] .lang-ar{direction:rtl; text-align:right;}

@media (max-width:700px){
  [dir="rtl"] .nav-links{display:none;}
}