/* ══════════════════════════════════════════════════════════════════════════
   cat.css — صفحة الكتالوج وبس
   ══════════════════════════════════════════════════════════════════════════

   ⚠️ الصفحة محمّلة `/assets/svc.css` الأول، وده اللي فيه الألوان والخطوط
      والهيدر والفوتر والأزرار والوضع الليلي وقلب الاتجاه للعربي. الملف ده
      **مبيعيدش تعريف أي حاجة منهم** — بيزوّد شكل كروت الأسعار بس.
      أي لون هنا لازم يكون متغيّر من svc.css، مش رقم مكتوب بالإيد: لو اتكتب
      رقم، الوضع الليلي بيقع على الكارت ده لوحده.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── الكعب (eyebrow) اللي فوق العنوان ─────────────────────────────────── */
.eyebrow{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-ink); font-weight:800; margin-bottom:.9rem;
}
html[dir="rtl"] .eyebrow{letter-spacing:0}

/* الخط الذهبي الرفيع تحت العنوان — نفس إحساس الكتالوج المطبوع */
.rule{
  width:72px; height:3px; border-radius:99px; margin:1.3rem 0 0;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300));
}

/* ── كارت الخدمة ───────────────────────────────────────────────────────── */
.plist{display:grid; gap:1.15rem; margin-top:.4rem}

.pitem{
  display:grid; gap:0;
  grid-template-columns:1fr;
  background:var(--surface); border:1px solid var(--sand-200);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-card);
}

/* الصورة: نسبة ثابتة عشان مكانها يتحجز قبل ما تنزل، والجدول ما يرقصش */
.pshot{margin:0; position:relative; background:var(--sand-100)}
.pshot img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:16/9}
/* ⚠️ aspect-ratio مش شغّال في متصفحات قديمة — الطول جاي من الـattribute
      ساعتها، ودي مش مشكلة لأن الصورة بتفضل متناسبة. */

.pbody{padding:1.3rem var(--pad-c,1.3rem) 1.4rem}
.pbody h2{font-size:clamp(1.18rem,1.05rem + .5vw,1.45rem); margin-bottom:.55rem}
.pbody p{color:var(--ink-soft); margin:0 0 1rem; font-size:.95rem; line-height:1.66}

/* شريط الوقت وعدد الزيارات */
.pmeta{display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.9rem}
.pmeta span{
  display:inline-flex; align-items:baseline; gap:.3rem;
  background:var(--chip); color:var(--chip-fg);
  border-radius:999px; padding:.3rem .72rem; font-size:.78rem; font-weight:700;
}
.pmeta b{font-family:var(--f-display); font-size:.95rem}

/* ── خانة السعر ────────────────────────────────────────────────────────── */
.prail{
  border-top:1px solid var(--line);
  background:var(--sand-100);
  padding:1.15rem 1.3rem 1.25rem;
  display:flex; flex-direction:column; justify-content:center;
}
/* ⚠️ اليورو **أكبر حاجة في الكارت** عن قصد: هو الرقم اللي النزيل بيقارن
      بيه ببلده. والجنيه تحته أصغر — بس **مش رمادي باهت**، لأنه هو اللي
      هيتحاسب بيه فعلاً ولازم يتقرا. */
.peur{
  font-family:var(--f-display); font-weight:600; line-height:1;
  font-size:clamp(2rem,1.6rem + 1.9vw,2.7rem); color:var(--link);
  letter-spacing:-.02em; display:flex; align-items:baseline; gap:.2rem;
}
.peur i{font-style:normal; font-size:.5em; opacity:.75; font-family:var(--f-body); font-weight:700}
.pegp{
  margin-top:.3rem; font-weight:800; font-size:1.02rem; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.pegp small{font-weight:700; font-size:.72em; color:var(--ink-soft); margin-inline-start:.3rem}
.pnote{margin-top:.5rem; font-size:.69rem; line-height:1.55; color:var(--ink-soft)}

.pbtns{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem}
.pbtns .btn{flex:1 1 auto; justify-content:center}
.pmore{
  display:inline-block; margin-top:.75rem; font-size:.82rem; font-weight:700;
  color:var(--link); text-decoration:none; border-bottom:1px solid var(--line);
}
.pmore:hover{border-bottom-color:currentColor}

/* زرار الواتساب بلون الواتساب — الناس بتعرفه من اللون قبل ما تقرا */
.btn-wa{background:#1fab54; color:#fff; border:1px solid #1fab54}
.btn-wa:hover{background:#19913f; border-color:#19913f; color:#fff}

/* ── من 760 وفوق: صورة | نص | سعر ─────────────────────────────────────── */
@media (min-width:760px){
  .pitem{grid-template-columns:clamp(190px,24%,260px) 1fr clamp(190px,24%,240px)}
  .pshot img{aspect-ratio:auto; min-height:100%}
  .prail{
    border-top:0; border-inline-start:1px solid var(--line);
    text-align:center; align-items:center;
  }
  .peur{justify-content:center}
  .pnote{max-width:22ch}
}

/* ── شريط «داخل في كل سعر» ─────────────────────────────────────────────── */
.inc{
  display:grid; gap:.9rem; grid-template-columns:1fr;
  background:var(--surface-warn); border:1px solid var(--sand-200);
  border-radius:var(--r-md); padding:1.25rem 1.3rem; margin-top:1.6rem;
}
.inc h2{font-size:1.1rem; grid-column:1/-1}
.inc ul{margin:0; padding:0; list-style:none; display:grid; gap:.6rem; grid-column:1/-1}
.inc li{display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--ink-soft)}
.inc li svg{width:17px; height:17px; flex:0 0 auto; margin-top:.28rem; color:var(--gold-ink)}
@media (min-width:700px){ .inc ul{grid-template-columns:repeat(3,1fr)} }

/* شاشة اللغات في الهيدر بتستعمل كلاسات svc.css زي ما هي — مفيش حاجة هنا */

/* ══════════════════════════════════════════════════════════════════════════
   أقسام «مين إحنا» — الدكتور · الكلمات التلاتة · المكان
   (نفس فكرة الكتالوج المطبوع: السعر الأول، وبعده اللي بيطمّن)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── الكلمات التلاتة ──────────────────────────────────────────────────────
   ⚠️ دي أكبر خط في الصفحة بعد العنوان عن قصد — دي الجملة اللي بتخلّي
      اللي خايف من دكتور الأسنان يكمّل قراية. */
.claims{
  background:var(--ocean-900); color:#fff;
  border-radius:var(--r-lg); padding:2rem var(--pad) 2.1rem; margin-top:1.6rem;
}
.claims .eyebrow{color:var(--gold-400)}
.claims .words{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin:.2rem 0 1.1rem;
  font-family:var(--f-display); font-weight:600; line-height:1.1;
  font-size:clamp(1.5rem,1.1rem + 2.1vw,2.4rem); letter-spacing:-.02em;
}
html[dir="rtl"] .claims .words{letter-spacing:0}
.claims .words span{display:inline-block}
.claims p{color:rgba(255,255,255,.82); margin:0 0 .7rem; max-width:62ch}
.claims p:last-child{margin:0}
.claims .seal{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:.5rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:999px; padding:.45rem .95rem; font-size:.84rem; font-weight:700;
}
.claims .seal svg{width:16px; height:16px; color:var(--gold-400); flex:0 0 auto}

/* ── الدكتور ───────────────────────────────────────────────────────────── */
.doc{display:grid; gap:1.4rem; align-items:start; margin-top:2.2rem}
.doc figure{margin:0}
.doc img{
  width:100%; border-radius:var(--r-lg); display:block;
  box-shadow:var(--shadow-card); object-fit:cover; aspect-ratio:4/5;
}
.doc h2{font-size:clamp(1.4rem,1.15rem + 1.1vw,2rem); margin-bottom:.8rem; max-width:18ch}
.doc p{color:var(--ink-soft)}
.doc ul{margin:1rem 0 0; padding:0; list-style:none; display:grid; gap:.65rem}
.doc li{display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--ink-soft)}
.doc li svg{width:16px; height:16px; flex:0 0 auto; margin-top:.3rem; color:var(--gold-ink)}
@media (min-width:760px){ .doc{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr); gap:2rem} }

/* ── المكان ────────────────────────────────────────────────────────────── */
.visit{margin-top:2.2rem}
.visit h2{font-size:clamp(1.4rem,1.15rem + 1.1vw,2rem); margin-bottom:.8rem; max-width:20ch}
.visit p{color:var(--ink-soft); max-width:62ch}
.vgrid{display:grid; gap:.8rem; margin-top:1.2rem}
.vcard{
  background:var(--surface); border:1px solid var(--sand-200);
  border-radius:var(--r-md); padding:1rem 1.15rem;
}
.vcard b{
  display:block; font-size:.7rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--gold-ink); margin-bottom:.35rem;
}
html[dir="rtl"] .vcard b{letter-spacing:0}
.vcard span{font-size:.95rem; line-height:1.6}
@media (min-width:700px){ .vgrid{grid-template-columns:repeat(3,1fr)} }

.shots{display:grid; gap:.8rem; margin-top:1.1rem; grid-template-columns:1fr 1fr}
.shots figure{margin:0; position:relative}
.shots img{width:100%; display:block; border-radius:var(--r-md); object-fit:cover; aspect-ratio:4/3}
.shots figcaption{
  margin-top:.45rem; font-size:.78rem; color:var(--ink-soft); font-weight:700;
}

/* ── صورة المقدمة ──────────────────────────────────────────────────────── */
.hero-shot{margin:0}
.hero-shot img{
  width:100%; display:block; border-radius:var(--r-lg);
  object-fit:cover; aspect-ratio:21/9; box-shadow:var(--shadow-soft);
}
.hero-shot figcaption{
  margin-top:.55rem; font-size:.8rem; color:var(--ink-soft); font-weight:700;
}
/* ⚠️ الكلمة المميّزة في العنوان — نفس الشكل الذهبي اللي في الرئيسية
      بالظبط، عشان العنوان الواحد ما يبانش بشكلين. */
.top h1 em{font-style:normal; color:var(--gold-ink)}
.price-h{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem)}
@media (min-width:700px){ .shots{grid-template-columns:repeat(4,1fr)} }

/* ══════════════════════════════════════════════════════════════════════════
   أقسام البروشور: لغتك · الخمس خدمات · الخطوات · الختام
   ══════════════════════════════════════════════════════════════════════════ */

/* ── صف اللغات ─────────────────────────────────────────────────────────── */
.langrow{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:1.1rem 0 1.2rem; margin-top:1.6rem;
}
.lrow{display:flex; flex-wrap:wrap; gap:.5rem}
.lrow a{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  background:var(--surface); border:1px solid var(--sand-200); border-radius:999px;
  padding:.45rem .9rem; font-size:.88rem; font-weight:700; color:var(--ink);
  transition:border-color .2s, color .2s;
}
.lrow a:hover{border-color:var(--gold-ink); color:var(--gold-ink)}
.lrow a.on{background:var(--ocean-800); border-color:var(--ocean-800); color:#fff}
.lrow .fsvg{border-radius:2px; display:block}

/* ── شريط الخمس خدمات ──────────────────────────────────────────────────── */
.ovr{
  display:grid; gap:.7rem; margin-top:1.3rem;
  grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
}
.ov{
  background:var(--surface); border:1px solid var(--sand-200);
  border-radius:var(--r-md); padding:1rem .9rem 1.05rem; text-align:center;
}
.ov b{
  display:block; font-family:var(--f-display); font-weight:600; line-height:1;
  font-size:2.1rem; color:var(--link); font-variant-numeric:tabular-nums;
}
.ov i{
  display:block; font-style:normal; font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-ink); margin:.3rem 0 .55rem; font-weight:800;
}
html[dir="rtl"] .ov i{letter-spacing:0}
.ov span{display:block; font-size:.84rem; font-weight:700; line-height:1.4; color:var(--ink-soft)}

/* ── رقم الخدمة على الكارت ─────────────────────────────────────────────────
   ⚠️ الترقيم ده مش زينة: البروشور المطبوع مكتوب عليه TREATMENT 01…05،
      والنزيل ماسك الورقة وبيقارن. فالترتيب هنا هو نفس ترتيب الورق. */
.pitem{position:relative}
.pnum{
  position:absolute; inset-block-start:.6rem; inset-inline-end:.75rem; z-index:2;
  font-family:var(--f-display); font-size:.82rem; font-weight:600; letter-spacing:.08em;
  color:#fff; background:rgba(6,25,26,.55); backdrop-filter:blur(4px);
  border-radius:999px; padding:.18rem .6rem;
}
@media (min-width:760px){ .pnum{inset-inline-end:auto; inset-inline-start:.75rem} }

/* ── الخطوات التلاتة ───────────────────────────────────────────────────── */
.steps{display:grid; gap:.8rem; margin-top:1.3rem}
.step{
  background:var(--surface); border:1px solid var(--sand-200);
  border-radius:var(--r-md); padding:1.15rem 1.2rem 1.25rem;
}
.step em{
  display:block; font-style:normal; font-family:var(--f-display); font-size:1.05rem;
  color:var(--gold-ink); letter-spacing:.1em; margin-bottom:.5rem;
}
.step b{display:block; font-size:1.05rem; margin-bottom:.35rem}
.step p{margin:0; font-size:.92rem; color:var(--ink-soft)}
@media (min-width:760px){ .steps{grid-template-columns:repeat(3,1fr)} }

/* ── التوصيل المجاني ───────────────────────────────────────────────────── */
.pickup{
  display:flex; gap:1rem; align-items:flex-start; margin-top:.9rem;
  background:var(--surface-warn); border:1px solid var(--gold-300);
  border-radius:var(--r-md); padding:1.1rem 1.2rem;
}
.pickup .free{
  flex:0 0 auto; font-family:var(--f-display); font-size:1.05rem; font-weight:600;
  color:#fff; background:var(--gold-600); border-radius:999px; padding:.3rem .85rem;
}
.pickup b{display:block; margin-bottom:.3rem}
.pickup p{margin:0; font-size:.92rem; color:var(--ink-soft)}

/* ── الختام ────────────────────────────────────────────────────────────── */
.endcard{
  background:var(--ocean-900); color:#fff; border-radius:var(--r-lg);
  padding:1.6rem var(--pad) 1.7rem;
}
.ends{display:grid; gap:.75rem; grid-template-columns:1fr}
.ends a{
  display:block; text-decoration:none; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md); padding:.85rem 1rem;
}
.ends a:hover{border-color:var(--gold-400)}
.ends b{
  display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-400); margin-bottom:.25rem;
}
html[dir="rtl"] .ends b{letter-spacing:0}
.ends span{font-size:.92rem; font-weight:700}
.endtag{margin:1.1rem 0 0; font-size:.85rem; color:rgba(255,255,255,.72)}
@media (min-width:700px){ .ends{grid-template-columns:repeat(4,1fr)} }

/* ── شرايط فاتحة وغامقة ───────────────────────────────────────────────────
   ⚠️ الصفحة كلها كانت بلون واحد، والعين بتتوه في صفحة طويلة بلون واحد.
      الشريط ده بياخد عرض الشاشة كله (مش عرض العمود) عشان الفرق يبان.
   ⚠️ واللون متغيّر من svc.css مش رقم مكتوب — في الوضع الليلي بيتقلب لوحده. */
.band{
  background:var(--sand-100);
  border-block:1px solid var(--line);
  margin-block:2rem;
}
.band > .sec{padding-block:2.4rem}

/* الصور بقت من الكتالوج المطبوع نفسه — نسبتها أعرض، فالكارت يفضل متوازن */
@media (min-width:760px){ .pshot img{aspect-ratio:auto} }

/* ══════════════════════════════════════════════════════════════════════════
   الغلاف — نفس أول صفحة في الكتالوج المطبوع
   ══════════════════════════════════════════════════════════════════════════
   ⚠️ الارتفاع بـmin-height مش 100vh: غلاف بيملا الشاشة بالظبط بيدفع باقي
      الصفحة بره أول لقطة، واللي ماسك الورقة عايز يشوف إن تحتها حاجة.
   ⚠️ والكلام فوق تدرّج أسود مش فوق الصورة على طول — الصورة فاتحة من فوق،
      وبدون التدرّج العنوان الأبيض بيختفي في السما. */
.cover{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(430px,78vh,680px);
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--ocean-900);
}
.cover-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 28%; z-index:-2;
}
.cover::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom,
    rgba(6,25,26,.62) 0%, rgba(6,25,26,.34) 38%, rgba(6,25,26,.88) 100%);
}
.cover-in{padding-block:2.2rem 1.4rem}
.cover-in .eyebrow{color:var(--gold-300); margin-bottom:.7rem}
.cover-in h1{
  color:#fff; font-size:clamp(2rem,1.3rem + 3.3vw,3.4rem); max-width:16ch;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.cover-in h1 em{font-style:normal; color:var(--gold-300)}
.cover-in .rule{margin:1rem 0 0; background:linear-gradient(90deg,var(--gold-400),var(--gold-300))}
.cover-in .lead{color:rgba(255,255,255,.88); margin:1.1rem 0 0; max-width:48ch}

/* شريط أسفل الغلاف — فوتر البروشور المطبوع */
.cover-bar{
  border-top:1px solid rgba(255,255,255,.18);
  background:rgba(6,25,26,.45); backdrop-filter:blur(6px);
}
.cover-bar > .wrap{
  display:flex; flex-wrap:wrap; gap:.4rem 1rem; justify-content:space-between;
  padding-block:.7rem; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:800; color:rgba(255,255,255,.72);
}
.cover-bar a{color:var(--gold-300); text-decoration:none}
html[dir="rtl"] .cover-bar > .wrap{letter-spacing:0; font-size:.72rem}

/* ⚠️ الهيدر بيقف فوق الغلاف، فلازم يكون شفاف فوقه وإلا بيقطع الصورة بشريط */
.cover + *, .cover{margin-top:0}

/* ── الكلمات التلاتة على الغلاف ───────────────────────────────────────────
   ⚠️ **نفس كلام الفلاير المطبوع في نفس مكانه**: NO PAIN · NO DRILLING ·
      NO INJECTIONS على الوش. ودي أهم جملة عند اللي بيخاف من دكتور الأسنان،
      فمش مستنيين لحد نص الصفحة. */
.cover-no{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.2rem}
.cover-no span{
  display:inline-block; font-family:var(--f-display); font-weight:600;
  font-size:clamp(.92rem,.85rem + .45vw,1.16rem); line-height:1;
  color:#fff; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.3); border-radius:999px;
  padding:.52rem 1rem; backdrop-filter:blur(4px);
}
@media (min-width:700px){ .ends{grid-template-columns:repeat(5,1fr)} }

/* ══════════════════════════════════════════════════════════════════════════
   سكشن «من غير ألم» — صفحة كاملة زي الكتالوج المطبوع
   ══════════════════════════════════════════════════════════════════════════
   ⚠️ بعرض الشاشة كله وبصورة خلفية — نفس صفحة الكتالوج. والتلات جمل **تحت
      بعض** بخط كبير عن قصد: كده بتتقرا واحدة واحدة، ولو اتحطوا في سطر
      واحد بيبقوا شريط كلام ومحدش بيقف عندهم.
   ⚠️ والتدرّج فوق الصورة مش زينة: من غيره الكلام الأبيض بيضيع في الجزء
      الفاتح من الصورة. */
.noband{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ocean-900); color:#fff;
  margin-block:2.4rem; padding-block:2.8rem 2.6rem;
  background-image:
    linear-gradient(to bottom, rgba(6,25,26,.90), rgba(6,25,26,.78)),
    url('/assets/cat-nopain.jpg');
  background-size:cover; background-position:center 30%;
}
.noband .claims{
  /* ⚠️ `padding:0` كان بيلغي حشوة .wrap نفسها، فالكلام كان بيخرج بره
     حافة الشاشة. الحشوة الجانبية لازم تفضل. */
  background:none; border:0; border-radius:0; margin:0;
  padding-block:0; padding-inline:var(--pad);
}
.noband .eyebrow{color:var(--gold-300)}
.noband .words{
  display:block; margin:.4rem 0 1.4rem;
  font-family:var(--f-display); font-weight:600; line-height:1.06;
  font-size:clamp(1.85rem,1.2rem + 3.4vw,3.5rem); letter-spacing:-.02em;
  text-align:end;
}
html[dir="rtl"] .noband .words{letter-spacing:0}
.noband .words span{display:block; color:#fff}
.noband .words span + span{margin-top:.12em}
.noband .claims-p{
  color:rgba(255,255,255,.84); max-width:58ch; margin:0 0 1.3rem;
  margin-inline-start:auto; text-align:end;
}
.noband .facts{
  display:flex; flex-wrap:wrap; gap:.45rem; justify-content:flex-end; margin-bottom:1rem;
}
.noband .facts span{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800;
  color:var(--gold-300); border:1px solid rgba(217,189,118,.45);
  border-radius:999px; padding:.4rem .9rem;
}
html[dir="rtl"] .noband .facts span{letter-spacing:0; font-size:.8rem}
.noband .seal{
  display:inline-flex; align-items:center; gap:.5rem; float:inline-end; clear:both;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:999px; padding:.45rem .95rem; font-size:.84rem; font-weight:700;
}
.noband .seal svg{width:16px; height:16px; color:var(--gold-400); flex:0 0 auto}

/* الكارت بقى بزرار حجز واحد — يفضل بعرض مريح مش شريط ممدود */
.pbtns .btn{flex:0 1 auto; min-width:11rem}

/* ── موزاييك صور المكان — نفس توزيع صفحة «FINDING US» ────────────────────
   ⚠️ الاسم مكتوب **على** الصورة مش تحتها، زي الورق: اللي بيقلّب بسرعة
      بيعرف بيشوف إيه من غير ما يربط بين صورة وسطر تحتها. */
.mosaic{display:grid; gap:.6rem; grid-template-columns:1fr 1fr; margin-top:1.2rem}
.mosaic figure{position:relative; margin:0; border-radius:var(--r-md); overflow:hidden}
.mosaic img{width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:4/3}
.mosaic .big{grid-column:1 / -1}
.mosaic .big img{aspect-ratio:4/3}
.mosaic figcaption{
  position:absolute; inset-inline:0; inset-block-end:0; padding:.9rem .85rem .6rem;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800;
  color:#fff; background:linear-gradient(to top, rgba(6,25,26,.78), rgba(6,25,26,0));
}
html[dir="rtl"] .mosaic figcaption{letter-spacing:0; font-size:.78rem}
@media (min-width:760px){
  .mosaic{grid-template-columns:1.25fr 1fr 1fr; grid-template-rows:1fr 1fr}
  .mosaic .big{grid-column:1; grid-row:1 / span 2}
  .mosaic .big img{aspect-ratio:auto; height:100%}
}

/* ══════════════════════════════════════════════════════════════════════════
   «حوالين الميعاد» — صفحة 11 في الكتالوج المطبوع
   ══════════════════════════════════════════════════════════════════════════ */
.care{margin-block:2.4rem 0; background:var(--sand-100); border-block:1px solid var(--line)}

.care-top{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(300px,48vh,430px); display:flex; align-items:center;
  background:var(--ocean-800);
}
.care-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 22%; z-index:-2;
}
.care-top::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg, rgba(10,45,45,.92) 0%, rgba(10,45,45,.62) 55%, rgba(10,45,45,.25) 100%);
}
html[dir="rtl"] .care-top::after{
  background:linear-gradient(240deg, rgba(10,45,45,.92) 0%, rgba(10,45,45,.62) 55%, rgba(10,45,45,.25) 100%);
}
.care-in{padding-block:2.2rem; color:#fff; max-width:var(--maxw)}
.care-in .eyebrow{color:var(--gold-300)}
.care-in h2{
  color:#fff; font-size:clamp(1.6rem,1.15rem + 2.1vw,2.6rem); max-width:17ch;
  margin-bottom:.9rem;
}
.care-in p{color:rgba(255,255,255,.86); max-width:46ch; margin:0}

/* الدايرة الدهبي — ⚠️ بتتخفي على الموبايل: فوق الكلام مباشرة مكانش فيه
   مساحة تكفيها، والمعلومة نفسها مكتوبة في «داخل في كل سعر» وفي الخطوة II. */
.care-free{display:none}
@media (min-width:860px){
  .care-free{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:.3rem;
    position:absolute; inset-inline-end:clamp(1.5rem,5vw,4rem); inset-block-start:50%;
    transform:translateY(-50%);
    width:168px; height:168px; border-radius:50%;
    border:1px solid var(--gold-400); background:rgba(6,25,26,.22);
    backdrop-filter:blur(3px);
  }
  .care-free b{font-family:var(--f-display); font-weight:600; font-size:1.5rem; color:var(--gold-300)}
  .care-free span{
    font-size:.6rem; letter-spacing:.17em; text-transform:uppercase;
    color:#fff; font-weight:800; max-width:11ch; line-height:1.5;
  }
  html[dir="rtl"] .care-free span{letter-spacing:0; font-size:.72rem}
}

.care-steps{
  display:grid; gap:1.4rem; padding-block:2.2rem 1.6rem;
  grid-template-columns:1fr;
}
@media (min-width:760px){ .care-steps{grid-template-columns:repeat(3,1fr); gap:2rem} }
.cstep em{
  display:block; font-style:normal; font-family:var(--f-display); font-size:1.6rem;
  color:var(--gold-ink); letter-spacing:.1em; line-height:1;
  padding-bottom:.6rem; border-bottom:1px solid var(--sand-200); margin-bottom:.7rem;
}
.cstep b{display:block; font-family:var(--f-display); font-weight:600; font-size:1.15rem; margin-bottom:.4rem}
.cstep p{margin:0; font-size:.93rem; color:var(--ink-soft)}

.care-foot{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  border-top:1px solid var(--sand-200); padding-block:1.3rem 2rem;
}
.care-foot p{
  margin:0; font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.1rem,1rem + .7vw,1.5rem); max-width:22ch;
}
.care-foot .btns{display:flex; flex-wrap:wrap; gap:.6rem}

/* ── زرار «الأسعار ↓» على الغلاف ──────────────────────────────────────────
   ⚠️ أول سعر على بعد ~2,850 بكسل من أول الصفحة — تلات شاشات ونص على
      الموبايل. والنزيل ماسك ورقة فيها أسعار وجاي يشوف السعر، فالزرار ده
      بيوفّر عليه اللف. وهو **رابط عادي (#prices)** مش جافاسكريبت، فشغّال
      حتى لو السكربت وقع. */
.cover-cta{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.4rem;
  text-decoration:none; font-weight:800; font-size:.95rem;
  color:var(--ocean-900); background:var(--gold-300);
  border-radius:999px; padding:.78rem 1.4rem; min-height:46px;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.6);
  transition:background .2s, transform .08s;
}
.cover-cta:hover{background:var(--gold-400)}
.cover-cta:active{transform:scale(.98)}
.cover-cta svg{width:16px; height:16px; flex:0 0 auto}

/* ⚠️ الهيدر لازق فوق، فالقفزة كانت بتخبّي العنوان تحته */
#prices{scroll-margin-top:78px}

/* ══════════════════════════════════════════════════════════════════════════
   صورة الدكتور — خلفية خضرا مدرجة بلون الهوية
   ══════════════════════════════════════════════════════════════════════════
   ⚠️ الصورة الأصلية لقطة من برنامج تليفزيوني وخلفيتها وردي، وده بياكل مع
      ألوان الموقع. ومفيش أداة هنا بتقص الشخص من الخلفية، فالحل:
      **تدرّج أخضر بيزيد كل ما نبعد عن وشّه** — يعني الأطراف والخلفية
      بتاخد لون الهوية، والدكتور نفسه يفضل بلونه الطبيعي.
   ⚠️ `mix-blend-mode:color` بيغيّر **اللون** بس ومبيلمسش الإضاءة، فالتفاصيل
      والظلال زي ما هي. لو اتعمل بـopacity عادية، الصورة كانت هتبهت.
   ⚠️ والطبقة `pointer-events:none` عشان ما تمنعش أي ضغطة. */
.doc figure{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  background:linear-gradient(150deg, var(--ocean-500), var(--ocean-100));
}
.doc figure img{
  border-radius:0; box-shadow:none; display:block;
  /* تهدية بسيطة للوردي قبل ما التدرّج يشتغل */
  filter:saturate(.5) contrast(1.04);
}
.doc figure::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  mix-blend-mode:color;
  /* ⚠️ المركز (وش الدكتور) شفاف خالص، والأخضر بيزيد بسرعة بعديه. القيم
     دي اتظبطت على الصورة دي بالذات: هو في 60% عرض و36% ارتفاع. */
  background:radial-gradient(74% 56% at 60% 36%,
             rgba(43,138,134,0) 16%,
             rgba(43,138,134,.38) 38%,
             rgba(31,110,107,.86) 62%,
             rgba(26,90,88,1) 86%);
}
/* لمسة خفيفة من فوق عشان الصورة تقعد جوّه الكارت مش عايمة */
.doc figure::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(to top, rgba(6,25,26,.14), rgba(6,25,26,0) 42%);
}