/* =========================================================================
   عيادة الدكتورة سحر إلهام — نسخة ثابتة (HTML/CSS/JS فقط)
   Dr. Sahar Elham Clinic — static version

   ملف واحد يخدم الاتجاهين: العربية من اليمين والإنجليزية من اليسار،
   بالاعتماد على الخصائص المنطقية (margin-inline / inset-inline …).
   One stylesheet serves both RTL and LTR via CSS logical properties.
   ========================================================================= */

:root{
  --b900:#06312f; --b800:#0a4b48; --b700:#0d6e6a; --b600:#12857f;
  --b500:#17a39b; --b300:#7fd4ce; --b100:#dff3f1; --b50:#f2faf9;
  --acc:#f0a13c; --acc7:#b8681c;
  --ink:#0e1b23; --soft:#3d525c; --mut:#6b8189; --line:#e2ecee;
  --bg:#fff; --surf:#f4f9f9; --wa:#25d366; --wa-d:#1da851; --warn:#c2410c;

  --r:16px; --r-s:10px; --r-l:24px; --pill:999px;
  --sh-s:0 1px 2px rgba(14,27,35,.05),0 2px 8px rgba(14,27,35,.04);
  --sh:0 4px 14px rgba(14,27,35,.06),0 12px 32px rgba(14,27,35,.06);
  --sh-l:0 18px 50px rgba(6,49,47,.16);
  --pad:clamp(56px,7vw,92px);
  --font:"Tajawal","Segoe UI",system-ui,sans-serif;
}
html[lang="en"]{ --font:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif; }

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-block-start:88px;
  /* القائمة الجانبية تنزلق من خارج الشاشة؛ القصّ يمنع التمرير الأفقي.
     clip لا hidden، لأن hidden على الجذر يُعطّل الرأس اللاصق. */
  overflow-x:hidden; overflow-x:clip;
}

body{
  margin:0; font-family:var(--font); font-size:17px; line-height:1.75;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
  overflow-x:hidden; overflow-x:clip;
}
html[lang="en"] body{ font-size:16.5px; line-height:1.7; }

h1,h2,h3{ margin:0 0 .5em; line-height:1.28; font-weight:800; color:var(--b900); letter-spacing:-.01em; }
h1{ font-size:clamp(2rem,1.4rem + 2.4vw,3rem); }
h2{ font-size:clamp(1.5rem,1.15rem + 1.4vw,2.15rem); }
h3{ font-size:clamp(1.1rem,1rem + .5vw,1.28rem); }
p{ margin:0 0 1rem; } p:last-child{ margin-bottom:0; }
a{ color:var(--b700); text-decoration:none; transition:color .18s; }
a:hover{ color:var(--b500); }
ul,ol{ margin:0; padding:0; list-style:none; }
img,iframe{ max-width:100%; }
:focus-visible{ outline:3px solid var(--b500); outline-offset:3px; border-radius:6px; }

.skip-link{
  position:absolute; inset-block-start:-100px; inset-inline-start:16px; z-index:999;
  background:var(--b700); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-s) var(--r-s);
}
.skip-link:focus{ inset-block-start:0; color:#fff; }

.wrap{ inline-size:min(100% - 40px,1160px); margin-inline:auto; }
.wrap--narrow{ inline-size:min(100% - 40px,840px); }
.sec{ padding-block:var(--pad); }
.sec--tint{ background:var(--surf); }
.sec__head{ max-inline-size:760px; margin-block-end:clamp(30px,4vw,48px); }
.sec__head--c{ margin-inline:auto; text-align:center; }
.sec__lead{ color:var(--soft); font-size:1.05rem; }
.mut{ color:var(--mut); font-size:.92em; }
.mt{ margin-block-start:1.4rem; }
.row{ display:flex; flex-wrap:wrap; gap:12px; }

.kick{
  display:inline-block; margin:0 0 .9rem; padding:7px 14px; border-radius:var(--pill);
  font-size:.82rem; font-weight:700; letter-spacing:.05em;
  color:var(--b600); background:var(--b100);
}
.kick--light{ color:#d6fffb; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); }

/* ---------------- الأزرار ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; border:1.5px solid transparent; border-radius:var(--pill);
  font:inherit; font-weight:700; font-size:.97rem; cursor:pointer; white-space:nowrap;
  transition:transform .16s,box-shadow .2s,background-color .2s,color .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--lg{ padding:15px 28px; font-size:1.02rem; }
.btn--block{ inline-size:100%; }
.btn--primary{ background:var(--b700); color:#fff; box-shadow:0 8px 20px rgba(13,110,106,.25); }
.btn--primary:hover{ background:var(--b600); color:#fff; }
.btn--outline{ color:var(--b700); border-color:var(--b300); }
.btn--outline:hover{ background:var(--b50); color:var(--b700); }
.btn--quiet{ background:var(--b100); color:var(--b800); }
.btn--quiet:hover{ background:var(--b300); color:var(--b900); }
.btn--white{ background:#fff; color:var(--b800); box-shadow:var(--sh-s); }
.btn--white:hover{ color:var(--b600); }
.btn--ghost{ color:var(--soft); border-color:var(--line); }
.btn--ghost:hover{ background:var(--surf); color:var(--b700); }
.btn--wa{ background:var(--wa); color:#04361a; }
.btn--wa:hover{ background:var(--wa-d); color:#fff; }

/* ---------------- الرأس ---------------- */
.topbar{ background:var(--b900); color:#cfeeeb; font-size:.88rem; }
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-block-size:42px; flex-wrap:wrap; }
.topbar a{ color:#cfeeeb; font-weight:500; }
.topbar a:hover{ color:#fff; }
.topbar__act{ display:flex; gap:18px; }
.topbar__lang{ border-inline-start:1px solid rgba(255,255,255,.2); padding-inline-start:18px; }

.site-head{
  position:sticky; inset-block-start:0; z-index:100;
  background:rgba(255,255,255,.93);
  border-block-end:1px solid var(--line); transition:box-shadow .2s;
  /* ملاحظة: لا تضع backdrop-filter أو filter أو transform هنا — أيٌّ منها يجعل
     الرأس "حاويًا" لعناصر position:fixed، فتنحبس قائمة الجوال داخل شريط الرأس. */
}
.site-head.is-stuck{ box-shadow:0 6px 24px rgba(14,27,35,.08); }
.site-head__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-block-size:74px; }

.brand{ display:inline-flex; align-items:center; gap:12px; color:inherit; }
.brand img{ border-radius:12px; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.3; }
.brand__txt strong{ font-size:1rem; font-weight:800; color:var(--b900); }
.brand__txt small{ font-size:.75rem; color:var(--mut); }

.nav{ display:flex; align-items:center; gap:22px; }
.nav>ul{ display:flex; align-items:center; gap:2px; }
.nav>ul a{ display:block; padding:9px 13px; border-radius:var(--pill); font-weight:600; font-size:.95rem; color:var(--soft); }
.nav>ul a:hover,.nav>ul a.is-on{ background:var(--b100); color:var(--b700); }
.nav__lang{ display:none; }

.burger{
  display:none; inline-size:46px; block-size:46px; border:1px solid var(--line);
  border-radius:12px; background:#fff; cursor:pointer; padding:12px 11px;
}
.burger span{ display:block; block-size:2px; background:var(--b800); border-radius:2px; transition:transform .25s,opacity .2s; }
.burger span+span{ margin-block-start:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------------- الواجهة ---------------- */
.hero{
  position:relative; isolation:isolate; color:#eafffd; overflow:hidden;
  background:linear-gradient(135deg,var(--b900) 0%,var(--b800) 48%,var(--b700) 100%);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(44rem 24rem at 82% 8%,rgba(23,163,155,.5),transparent 60%),
             radial-gradient(32rem 20rem at 8% 92%,rgba(240,161,60,.2),transparent 62%);
}
.hero__in{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,68px); align-items:center; padding-block:clamp(52px,7vw,90px); }
.hero h1{ color:#fff; margin-block-end:.45em; }
.lead{ font-size:1.08rem; color:#c9ebe8; max-inline-size:60ch; }

.tags{ display:flex; flex-wrap:wrap; gap:10px; margin-block:1.6rem; }
.tags li{
  padding:8px 16px; border-radius:var(--pill); font-size:.9rem; font-weight:600; color:#eafffd;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
}
.tags li::before{ content:"✓"; color:var(--acc); font-weight:800; margin-inline-end:7px; }

.hero__note{
  margin-block-start:1.7rem; padding-block-start:1.3rem;
  border-block-start:1px solid rgba(255,255,255,.16); color:#b6e0dc; font-size:.96rem;
}

.hero__card{ background:rgba(255,255,255,.97); border-radius:var(--r-l); padding:20px; box-shadow:var(--sh-l); color:var(--ink); }
.hero__card-h{ display:flex; align-items:center; gap:10px; padding-block-end:13px; border-block-end:1px solid var(--line); font-weight:800; color:var(--b900); }
.dot{ inline-size:10px; block-size:10px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 4px rgba(37,211,102,.18); }
.speclist li+li{ border-block-start:1px solid var(--line); }
.speclist a{ display:flex; align-items:center; gap:13px; padding:13px 6px; color:inherit; border-radius:var(--r-s); }
.speclist a:hover{ background:var(--b50); }
.speclist__i{ display:grid; place-items:center; inline-size:42px; block-size:42px; flex:none; border-radius:13px; background:var(--b100); font-size:20px; }
.speclist span span,.speclist a>span:last-of-type{ display:flex; flex-direction:column; line-height:1.4; }
.speclist strong{ font-size:.97rem; color:var(--b900); }
.speclist small{ color:var(--mut); font-size:.83rem; }
.hero__card-f{ margin-block-start:10px; padding-block-start:13px; border-block-start:1px solid var(--line); color:var(--mut); font-size:.9rem; }

/* ---------------- أرقام ---------------- */
.stats{ background:var(--b900); }
.stats__in{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.12);
  border-radius:var(--r); overflow:hidden; margin-block-start:-32px; position:relative; z-index:2; box-shadow:var(--sh-l);
}
.stat{ background:linear-gradient(160deg,var(--b800),var(--b900)); padding:24px 18px; text-align:center; }
.stat strong{ display:block; font-size:clamp(1.45rem,1.1rem + 1.3vw,2rem); color:var(--acc); line-height:1.2; }
.stat span{ display:block; margin-block-start:5px; font-size:.87rem; color:#b6dedb; }
.stats+.sec{ padding-block-start:calc(var(--pad) + 18px); }

/* ---------------- البطاقات ---------------- */
.grid{ display:grid; gap:22px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }

.card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:26px; box-shadow:var(--sh-s);
  transition:transform .2s,box-shadow .25s,border-color .2s; scroll-margin-block-start:96px;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh); border-color:var(--b300); }
.card p{ color:var(--soft); font-size:.97rem; }
.card__tag{ color:var(--b600)!important; font-weight:700; font-size:.9rem!important; margin-block-end:.7rem; }
.card__i{ display:grid; place-items:center; inline-size:54px; block-size:54px; border-radius:17px; margin-block-end:16px; font-size:26px; background:var(--b100); }
.card__i--1{ background:linear-gradient(140deg,var(--b600),var(--b800)); }
.card__i--2{ background:linear-gradient(140deg,#1c8fd6,#0b5aa1); }
.card__i--3{ background:linear-gradient(140deg,var(--acc),var(--acc7)); }

.ticks{ display:grid; gap:9px; margin-block-start:1rem; }
.ticks li{ position:relative; padding-inline-start:26px; font-size:.95rem; color:var(--soft); line-height:1.6; }
.ticks li::before{ content:"✓"; position:absolute; inset-inline-start:0; color:var(--b500); font-weight:800; }
.ticks--light li{ color:#d8f2f0; }
.ticks--light li::before{ color:var(--acc); }
.ticks--2{ grid-template-columns:1fr 1fr; column-gap:26px; }

.callout{
  margin-block-start:26px; padding:22px 26px; border-radius:var(--r);
  background:#fff5ed; border:1px solid #fbd9bd;
}
.callout strong{ display:block; margin-block-end:.4em; color:var(--warn); font-size:1.05rem; }
.callout p{ color:var(--soft); margin:0; }

/* ---------------- شريط الاستشارة الإلكترونية ---------------- */
.promo{
  display:grid; grid-template-columns:.32fr .68fr; gap:clamp(24px,3vw,44px); align-items:center;
  padding:clamp(28px,3.4vw,46px); border-radius:var(--r-l); color:#eafffd; position:relative; overflow:hidden;
  background:radial-gradient(30rem 18rem at 88% -10%,rgba(23,163,155,.5),transparent 62%),
             linear-gradient(140deg,var(--b900),var(--b700));
  box-shadow:var(--sh-l);
}
.promo h2{ color:#fff; margin-block-end:.35em; }
.promo__lead{ color:#c9ebe8; font-size:1.03rem; }
.promo__side{ display:flex; flex-direction:column; gap:20px; padding-inline-end:clamp(0px,2vw,26px); border-inline-end:1px solid rgba(255,255,255,.16); }
.promo__i{ display:grid; place-items:center; inline-size:72px; block-size:72px; border-radius:22px; font-size:34px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); }
.promo__meta{ display:grid; gap:12px; font-size:.92rem; font-weight:600; color:#b6dedb; }
.promo .row{ margin-block-start:1.6rem; }
.promo .ticks{ margin-block:1.2rem; }

/* ---------------- الشرائح والخطوات ---------------- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-block-end:clamp(32px,4vw,46px); }
.chips span{ padding:7px 15px; border-radius:var(--pill); background:#fff; border:1px solid var(--line); font-size:.89rem; font-weight:600; color:var(--soft); }
.chips .chip--hot{ background:#fdf1e2; border-color:var(--acc); color:var(--acc7); }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.step{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 22px; box-shadow:var(--sh-s); }
.step__n{ display:grid; place-items:center; inline-size:44px; block-size:44px; border-radius:50%; margin-block-end:14px; background:var(--b700); color:#fff; font-weight:800; font-size:1.1rem; }
.step p{ color:var(--soft); font-size:.94rem; margin:0; }

/* ---------------- عن الدكتورة ---------------- */
.about{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,4vw,52px); align-items:start; }
.about__txt p{ color:var(--soft); font-size:1.03rem; }
.about__txt .btn{ margin-block-start:1.2rem; }
.values{ display:grid; gap:14px; }
.values li{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; box-shadow:var(--sh-s); }
.values strong{ display:block; color:var(--b900); font-size:1.02rem; margin-block-end:.25em; }
.values span{ color:var(--soft); font-size:.94rem; }

/* ---------------- الأكورديون ---------------- */
.acc{ background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-s); margin-block-end:12px; overflow:hidden; }
.acc[open]{ border-color:var(--b300); }
.acc summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:17px 22px; cursor:pointer; font-weight:700; color:var(--b900); list-style:none;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ background:var(--b50); }
.acc summary i{ position:relative; inline-size:24px; block-size:24px; flex:none; border-radius:50%; background:var(--b100); }
.acc summary i::before,.acc summary i::after{
  content:""; position:absolute; inset-block-start:50%; inset-inline-start:50%; translate:-50% -50%;
  background:var(--b700); border-radius:2px; transition:opacity .2s;
}
.acc summary i::before{ inline-size:11px; block-size:2px; }
.acc summary i::after{ inline-size:2px; block-size:11px; }
.acc[open] summary i::after{ opacity:0; }
.acc p{ padding:0 22px 19px; color:var(--soft); font-size:.98rem; margin:0; }

/* ---------------- التواصل ---------------- */
.contact{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,3.5vw,44px); align-items:start; }

.formcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:clamp(22px,3vw,34px); box-shadow:var(--sh); }
.tabs{ display:flex; gap:8px; padding:5px; margin-block-end:22px; background:var(--b50); border-radius:var(--pill); }
.tab{
  flex:1; padding:11px 14px; border:0; border-radius:var(--pill); background:transparent;
  font:inherit; font-weight:700; font-size:.95rem; color:var(--soft); cursor:pointer; transition:background-color .2s,color .2s;
}
.tab.is-on{ background:var(--b700); color:#fff; box-shadow:0 6px 14px rgba(13,110,106,.25); }

.f{ margin-block-end:16px; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.f label{ display:block; margin-block-end:6px; font-weight:700; font-size:.91rem; color:var(--b900); }
.f label b{ color:var(--warn); }
.f input,.f select,.f textarea{
  inline-size:100%; padding:12px 15px; border:1.5px solid var(--line); border-radius:var(--r-s);
  background:var(--b50); font:inherit; font-size:.96rem; color:var(--ink);
  transition:border-color .18s,background-color .18s,box-shadow .18s;
}
.f input::placeholder,.f textarea::placeholder{ color:#9db3b8; }
.f input:focus,.f select:focus,.f textarea:focus{
  outline:0; border-color:var(--b500); background:#fff; box-shadow:0 0 0 4px rgba(23,163,155,.12);
}
.f textarea{ resize:vertical; min-block-size:104px; }
.f .is-bad{ border-color:var(--warn); background:#fff5ed; }
.f-err{ color:var(--warn); font-weight:600; font-size:.91rem; margin-block-end:12px; }
.f-alt{ margin-block-start:14px; font-size:.89rem; color:var(--mut); text-align:center; }

.ch{
  display:flex; align-items:center; gap:15px; padding:17px 19px; margin-block-end:13px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-s);
  color:inherit; transition:transform .18s,box-shadow .2s;
}
.ch:hover{ transform:translateY(-3px); box-shadow:var(--sh); color:inherit; }
.ch__i{ display:grid; place-items:center; inline-size:46px; block-size:46px; flex:none; border-radius:13px; background:var(--b100); font-size:20px; }
.ch--wa .ch__i{ background:rgba(37,211,102,.14); }
.ch>span:last-child{ display:flex; flex-direction:column; line-height:1.45; }
.ch strong{ color:var(--b900); }
.ch span span{ color:var(--mut); font-size:.92rem; }

.box{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--sh-s); margin-block-end:16px; }
.box--soft{ background:var(--b50); border-color:transparent; box-shadow:none; }
.box h3{ font-size:1.02rem; margin-block-end:.5em; }
.hrs{ display:flex; justify-content:space-between; gap:20px; font-size:.94rem; margin-block-end:5px; }
.hrs span:last-child{ color:var(--b700); font-weight:700; }

.map{ position:relative; block-size:220px; margin-block:14px; border-radius:var(--r-s); overflow:hidden; border:1px solid var(--line); }
.map iframe{ inline-size:100%; block-size:100%; border:0; display:block; filter:saturate(.92); }
.map__go{
  position:absolute; inset-block-end:10px; inset-inline-start:10px;
  padding:8px 14px; border-radius:var(--pill); background:rgba(255,255,255,.95);
  color:var(--b800); font-size:.85rem; font-weight:700; box-shadow:var(--sh-s);
}

/* ---------------- الذيل ---------------- */
.foot{ background:var(--b900); color:#a9cfcc; padding-block:clamp(44px,6vw,68px) 26px; font-size:.95rem; }
.foot__grid{ display:grid; grid-template-columns:1.6fr .8fr .9fr; gap:34px; }
.foot h2{ font-size:1rem; color:#fff; margin-block-end:1.1em; }
.foot a{ color:#a9cfcc; } .foot a:hover{ color:#fff; }
.foot ul{ display:grid; gap:10px; }
.brand--f .brand__txt strong{ color:#fff; }
.brand--f .brand__txt small{ color:#7fb3af; }
.foot__ab{ margin-block-start:1rem; max-inline-size:44ch; }
.foot__warn{
  margin-block-start:36px; padding:15px 19px; border-radius:var(--r);
  background:rgba(255,255,255,.05); font-size:.88rem; line-height:1.65;
}
.foot__cr{ margin-block-start:22px; padding-block-start:20px; border-block-start:1px solid rgba(255,255,255,.1); font-size:.86rem; }

.fab{
  position:fixed; inset-block-end:20px; inset-inline-end:20px; z-index:80;
  display:grid; place-items:center; inline-size:56px; block-size:56px; border-radius:50%;
  background:var(--wa); font-size:26px; box-shadow:0 10px 26px rgba(37,211,102,.38);
  transition:transform .2s;
}
.fab:hover{ transform:translateY(-3px) scale(1.04); }

/* ---------------- الحركة ---------------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s,transform .6s; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------------- الاستجابة ---------------- */
@media (max-width:1040px){
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .steps,.stats__in{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:960px){
  .hero__in,.about,.contact,.promo{ grid-template-columns:1fr; }
  .hero__card{ max-inline-size:520px; }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .promo__side{ flex-direction:row; align-items:center; border-inline-end:0; border-block-end:1px solid rgba(255,255,255,.16); padding-inline-end:0; padding-block-end:18px; }
  .promo__meta{ flex:1; }

  .burger{ display:block; position:relative; z-index:130; }
  .nav{
    position:fixed; inset-block:0; inset-inline-end:0; inline-size:min(86vw,360px);
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:8px;
    padding:92px 24px 32px; background:#fff; box-shadow:var(--sh-l);
    transform:translateX(110%); transition:transform .28s; overflow-y:auto; z-index:120;
  }
  [dir="rtl"] .nav{ transform:translateX(-110%); }
  /* الحالة المفتوحة تُكتب للاتجاهين صراحةً حتى لا تتنافس مع قاعدة RTL أعلاه */
  .nav.is-open,[dir="rtl"] .nav.is-open{ transform:translateX(0); }
  .nav>ul{ flex-direction:column; align-items:stretch; }
  .nav>ul a{ padding:13px 15px; border-radius:var(--r-s); font-size:1.02rem; }
  .nav .btn{ inline-size:100%; }
  .nav__lang{ display:inline-flex; }
  body.nav-open{ overflow:hidden; }
  /* التعتيم تحت الرأس (100) لأن القائمة تعيش داخل الرأس */
  body.nav-open::after{ content:""; position:fixed; inset:0; background:rgba(6,49,47,.45); z-index:90; }
}

@media (max-width:700px){
  body{ font-size:16px; }
  .topbar__loc{ display:none; }
  .topbar__in{ justify-content:center; }
  .grid--3,.steps,.f2,.ticks--2{ grid-template-columns:1fr; }
  .stats__in{ margin-block-start:0; }
  .stats{ padding-block:24px; }
  .foot__grid{ grid-template-columns:1fr; }
  .hero .row .btn{ flex:1 1 auto; }
}

@media print{
  .topbar,.burger,.nav,.fab,.tabs,.map{ display:none!important; }
  .hero,.stats,.foot,.promo{ background:#fff!important; color:#000!important; }
  .card,.box{ break-inside:avoid; box-shadow:none; }
}