/* ==========================================================================
   TEMERALDS — الطبقة العربية فوق نظام التصميم
   --------------------------------------------------------------------------
   تُحمَّل بعد tem.css ولا تُعدّله إطلاقًا. السبب: tem.css نسخة حرفية من
   main.css في قالب temeralds.com، فأي تحديث هناك يُنسخ هنا بلا دمج يدوي،
   وكل ما تحتاجه العربية يعيش في هذا الملفّ وحده.

   ثلاث مشكلات تُعالَج هنا:
   1. Playfair وMarcellus وJost بلا حروف عربية → Cairo للعناوين، Tajawal للجسم.
   2. تباعد الحروف .24em يفكّ اتّصال الحرف العربي → يُلغى في كل موضع.
   3. text-transform:uppercase لا معنى له في العربية → يُلغى، ويُعوَّض
      التمييز بالوزن واللون لا بالشكل.
   ========================================================================== */

:root{
  /* الخطوط: Cairo للعناوين بكل مقاساتها — لا فصل بين خطّ بطل وخطّ عناوين
     كما في الإنجليزي، لأن Cairo يحمل المقاسين معًا. */
  --tem-display:   'Cairo', system-ui, sans-serif;
  --tem-hero-face: 'Cairo', system-ui, sans-serif;
  --tem-body:      'Tajawal', system-ui, sans-serif;
  --tem-label:     'Cairo', system-ui, sans-serif;

  /* التباعد يُصفَّر عند الجذر، فيسري على كل صنف يقرأ المتغيّر. */
  --tem-track-label: 0;

  /* Cairo أعرض وأثقل من Playfair عند المقاس نفسه، فالعنوان الرئيسي
     يُخفَّض درجة حتى لا يكسر السطر على الجوّال. */
  --tem-h1: clamp(1.95rem, 4vw, 3.35rem);
  --tem-h2: clamp(1.7rem, 3.4vw, 2.9rem);
  --tem-h3: clamp(1.12rem, 1.7vw, 1.45rem);

  /* العربية تحتاج فراغًا رأسيًّا أكبر بسبب التشكيل والنقاط تحت السطر. */
  --tem-lh-display: 1.3;
  --tem-lh-body: 1.9;
}

/* --------------------------------------------------------------------------
   1) إلغاء التحويل إلى حروف كبيرة
   القائمة مأخوذة من tem.css نفسه لا من التخمين — كل صنف فيه
   text-transform:uppercase مذكور هنا.
   -------------------------------------------------------------------------- */
.tem-label,
.tem-pill,
.tem-ulink,
.tem-arrowlink,
.tem-logo__partner,
.tem-nav > ul > li > a,
.tem-rail__cta-text,
.tem-showcase__stat,
.tem-method__fig sup,
.tem-post__cat,
.tem-post__meta,
.tem-offer__tag,
.tem-breadcrumbs,
.tem-tag,
.tem-work__meta,
.tem-work__metric small,
.tem-footer__h,
.tem-deliver__when,
.tem-figure__label,
.tem-proofbar__head,
.tem-field__label{
  text-transform: none;
  letter-spacing: 0;
}

/* العنوان التمهيدي كان يعتمد على الحروف الكبيرة والتباعد ليقرأ كتسمية.
   في العربية يُعوَّض ذلك بالوزن وبالخطّ القصير قبله. */
.tem-label{
  font-weight: 700;
  font-size: .8rem;
}
.tem-footer__h{
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   2) وزن Cairo مقابل Playfair
   Playfair عند 500 يبدو رفيعًا أنيقًا؛ Cairo عند 500 يبدو باهتًا،
   وعند 900 يبدو صارخًا. 700 هو ما يقابل حضور الأصل.
   -------------------------------------------------------------------------- */
.tem-hero h1,
.tem-pagehero h1,
.tem-sechead h2,
h1, h2, h3{
  font-weight: 700;
}
.tem-hero h1,
.tem-pagehero h1{
  font-weight: 700;
  letter-spacing: -.01em;   /* Cairo يتنفّس أكثر من اللازم في المقاس الكبير */
}

/* --------------------------------------------------------------------------
   3) الاتجاه
   tem.css خالٍ من left/right الفيزيائية (صفر موضع)، فلا حاجة لعكس شيء.
   ما يلي استثناءات ثلاثة فقط: الأرقام والمقاطع اللاتينية تبقى LTR.
   -------------------------------------------------------------------------- */
.tem-num,
.tem-work__metric b,
.tem-proofbar__fig,
.tem-method__fig{
  direction: ltr;
  unicode-bidi: isolate;
}

/* السهم في الأزرار يشير يسارًا في العربية — أي إلى الأمام. */
[dir="rtl"] .tem-btn svg,
[dir="rtl"] .tem-arrowlink svg,
[dir="rtl"] .tem-rail__cta svg{
  transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   4) الزاوية المقطوعة
   clip-path في tem.css يقطع الزاوية العليا البادئة والسفلى النهائية.
   في RTL تنعكس الزاوية بصريًّا فتبدو مقلوبة — تُعاد بالقيمة المرآتية.
   -------------------------------------------------------------------------- */
[dir="rtl"] .tem-btn{
  clip-path: polygon(
    0 0,
    calc(100% - var(--tem-bevel)) 0,
    100% var(--tem-bevel),
    100% 100%,
    var(--tem-bevel) 100%,
    0 calc(100% - var(--tem-bevel))
  );
}


/* ==========================================================================
   5) الأرضيات الفاتحة — درجتان
   --------------------------------------------------------------------------
   الصفحة الداخلية في الموقع الحيّ تتناوب بين درجتين فاتحتين لا واحدة:
   كريمي للأقسام الأساسية، ورملي أغمق قليلًا للأقسام الفاصلة (الأرقام).
   الفرق بينهما صغير عمدًا — يكفي ليُقرأ كحدّ بين قسمين دون أن يُقرأ كلون ثانٍ.

   الأرضية في صنف، والنصّ في صنف آخر (.tem-light). هكذا لا تتكرّر
   السبعة عشر تجاوزًا مرّتين، وإضافة درجة ثالثة لاحقًا سطر واحد.

   ملاحظة: القالب المرفوع (1.6.1) لا يحوي شيئًا من هذا — أقصى ما فيه
   .tem-method__cream وهو نصف لوح. فكل ما تحت هذا السطر إضافة، لا تعديل
   على tem.css. عند وصول نسخة أحدث من القالب الإنجليزي تُقارن الأسماء.
   ========================================================================== */
:root{
  --tem-sand: #EAE1D8;      /* الدرجة الفاتحة الثانية — أقسام الأرقام */
  --tem-light-ink: rgba(15,42,30,.82);
  --tem-light-mute: rgba(15,42,30,.62);
  --tem-light-line: rgba(15,42,30,.14);
  --tem-gold-deep: #6E4A05; /* الذهبي لا يُقرأ على الفاتح — هذه نسخته الداكنة */
}

.tem-ground-cream{ background: var(--tem-cream); }
.tem-ground-sand { background: var(--tem-sand); }

/* --- ما يسري على أي أرضية فاتحة ------------------------------------------ */
.tem-light{ color: var(--tem-cream-ink); }
.tem-light h1,
.tem-light h2,
.tem-light h3,
.tem-light .tem-h2{ color: var(--tem-cream-ink); }
.tem-light .tem-lead{ color: var(--tem-light-ink); }
.tem-light .tem-eyebrow{ color: var(--tem-gold-deep); }
.tem-light .tem-eyebrow::before{ background: var(--tem-gold-deep); }
.tem-light .tem-glow{ display: none; }   /* الوهج مصمَّم للداكن، ويترك بقعة رمادية */

.tem-light .tem-ulink{ color: var(--tem-cream-ink); border-color: rgba(15,42,30,.3); }
.tem-light .tem-ulink:hover{ color:#8A5C04; border-color:#8A5C04; }
.tem-light .tem-btn--outline{ color: var(--tem-cream-ink); border-color: rgba(15,42,30,.32); }
.tem-light .tem-btn--outline:hover{ color:#8A5C04; border-color:#8A5C04; }
.tem-light .tem-tag{ color: var(--tem-light-mute); border-color: rgba(15,42,30,.18); }
.tem-light .tem-divider{ background: var(--tem-light-line); }

.tem-light .tem-faq,
.tem-light .tem-faq__item{ border-color: var(--tem-light-line); }
.tem-light .tem-faq__item summary{ color: var(--tem-cream-ink); }
.tem-light .tem-faq__item summary:hover{ color:#8A5C04; }
.tem-light .tem-faq__sign::before,
.tem-light .tem-faq__sign::after{ background: var(--tem-cream-ink); }
.tem-light .tem-faq__answer p{ color: var(--tem-light-ink); }

/* ==========================================================================
   6) مكوّنات الصفحة الداخلية
   ========================================================================== */

/* --- صفّ البطاقات: إطار واحد وفواصل رفيعة ------------------------------- */
/* في tem.css كل بطاقة صندوق قائم بذاته بخلفية وحدّ. الصفحة الداخلية في
   الموقع الحيّ تفعل العكس: إطار واحد يحيط الصفّ كلّه، والفصل بخطّ شعرة. */
.tem-cardrow{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--tem-light-line);
}
.tem-cardrow--3{ grid-template-columns:repeat(3,1fr); }
.tem-cardrow > *{
  display:flex; flex-direction:column;
  padding:clamp(1.4rem,2.4vw,2rem);
  text-decoration:none; color:inherit;
  transition:background .35s var(--tem-ease);
}
.tem-cardrow > * + *{ border-inline-start:1px solid var(--tem-light-line); }
.tem-cardrow > a:hover{ background:rgba(255,255,255,.55); }
.tem-cardrow__no{
  font-family:var(--tem-label); font-size:.7rem; font-weight:600;
  color:var(--tem-light-mute); margin-bottom:1.2rem;
  direction:ltr; unicode-bidi:isolate;
}
.tem-cardrow h3{ font-size:1.1rem; font-weight:700; margin:0 0 .7rem; line-height:1.5; }
.tem-cardrow p{ font-size:.9rem; line-height:1.85; color:var(--tem-light-ink); margin:0; }
.tem-cardrow__go{
  margin-top:auto; padding-top:1.4rem;
  font-size:.78rem; font-weight:700; color:var(--tem-gold-deep);
  display:inline-flex; align-items:center; gap:.5rem;
}
.tem-cardrow__go svg{ transform:scaleX(-1); }   /* السهم إلى الأمام في RTL */
@media (max-width:900px){
  .tem-cardrow,.tem-cardrow--3{ grid-template-columns:1fr 1fr; }
  .tem-cardrow > *:nth-child(3){ border-inline-start:0; }
  .tem-cardrow > *:nth-child(n+3){ border-top:1px solid var(--tem-light-line); }
}
@media (max-width:560px){
  .tem-cardrow,.tem-cardrow--3{ grid-template-columns:1fr; }
  .tem-cardrow > * + *{ border-inline-start:0; border-top:1px solid var(--tem-light-line); }
}

/* --- صندوق الأرقام ------------------------------------------------------- */
.tem-figurebox{
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--tem-light-line); margin-top:clamp(1.8rem,3vw,2.6rem);
}
.tem-figurebox > div{ padding:clamp(1.5rem,3vw,2.3rem); }
.tem-figurebox > div + div{ border-inline-start:1px solid var(--tem-light-line); }
.tem-figurebox b{
  display:block; font-weight:700; line-height:1;
  font-size:clamp(1.9rem,4vw,2.9rem); color:var(--tem-cream-ink);
  direction:ltr; unicode-bidi:isolate;
}
.tem-figurebox span{ display:block; margin-top:.7rem; font-size:.8rem; color:var(--tem-light-mute); }
@media (max-width:560px){
  .tem-figurebox{ grid-template-columns:1fr; }
  .tem-figurebox > div + div{ border-inline-start:0; border-top:1px solid var(--tem-light-line); }
}

/* --- الفقرة الافتتاحية: تسمية جانبية ونصّ كبير --------------------------- */
.tem-statement{
  display:grid; grid-template-columns:minmax(120px,1fr) 3.2fr;
  gap:clamp(1.2rem,3vw,3rem); align-items:start;
}
.tem-statement .tem-eyebrow{ margin:0; padding-top:.5rem; }
.tem-statement p{
  font-size:clamp(1.05rem,1.9vw,1.45rem); line-height:1.95;
  color:var(--tem-cream-ink); max-width:none; margin:0 0 1.2rem; font-weight:400;
}
.tem-statement p:last-child{ margin-bottom:0; }
@media (max-width:760px){ .tem-statement{ grid-template-columns:1fr; } }

/* --- صفّ روابط وصفّ وسوم ------------------------------------------------- */
.tem-linkrow{ display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:1.8rem; }
.tem-tagrow{ display:flex; flex-wrap:wrap; gap:.55rem; }

/* --- روابط التحقّق أسفل الأرقام ------------------------------------------ */
.tem-verify{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:1.4rem; font-size:.85rem; }
.tem-verify a{ color:var(--tem-gold-deep); text-decoration:none; border-bottom:1px solid rgba(110,74,5,.35); padding-bottom:2px; }
.tem-verify a:hover{ border-color:var(--tem-gold-deep); }

/* صفّ بطاقات بأكثر من سطر (ثماني بطاقات في أربعة أعمدة مثلًا):
   البطاقة الأولى في كل سطر لا حدّ بادئًا لها، والسطور التالية تُفصل بحدّ علوي.
   وقاعدة الأعمدة الثلاثة تُعاد بعدها لأنها تحمل الصنفين معًا. */
@media (min-width:901px){
  .tem-cardrow > :nth-child(4n+1){ border-inline-start:0; }
  .tem-cardrow > :nth-child(n+5){ border-top:1px solid var(--tem-light-line); }

  .tem-cardrow--3 > *{ border-inline-start:1px solid var(--tem-light-line); }
  .tem-cardrow--3 > :nth-child(3n+1){ border-inline-start:0; }
  .tem-cardrow--3 > :nth-child(-n+3){ border-top:0; }
  .tem-cardrow--3 > :nth-child(n+4){ border-top:1px solid var(--tem-light-line); }
}

/* ==========================================================================
   7) بنود التعاقد — لمسات خاصّة فوق المكوّنات القائمة
   لا مكوّن جديد: الدفتر هو tem-moves، واللوح هو tem-method. ما يلي
   ثلاث لمسات تجعل القسم يُقرأ كوثيقة لا كقسم تسويقي.
   ========================================================================== */

/* البند: الرقم ذهبي كبير، والعنوان يسبق النصّ في سطر مستقلّ. */
.tem-legalbook .tem-moves b{ font-size:.8rem; color:var(--tem-gold-lit); }
.tem-legalbook .tem-moves strong{ font-size:1.05rem; margin-bottom:.45rem; }
.tem-legalbook .tem-moves span{ line-height:1.95; }
.tem-legalbook .tem-moves li{ padding-block:1.35rem; }

/* قائمة الشروط داخل اللوح الداكن: علامة صحّ ذهبية بدل النقطة. */
.tem-legallist{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.tem-legallist li{
  position:relative; padding-inline-start:1.6rem;
  font-size:.96rem; line-height:1.9; color:var(--tem-lead-ink);
}
.tem-legallist li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.72em;
  width:9px; height:5px; border-inline-start:1.5px solid var(--tem-gold);
  border-block-end:1.5px solid var(--tem-gold); transform:rotate(-45deg);
}

/* الختم: سطر واحد بإطار رفيع، يُقرأ كتوقيع في أسفل وثيقة. */
.tem-legalseal{
  margin:clamp(1.8rem,3vw,2.6rem) 0 0;
  padding:1.1rem 1.4rem;
  border:1px solid var(--tem-light-line);
  border-inline-start:3px solid var(--tem-gold-deep);
  font-size:.92rem; color:var(--tem-cream-ink); background:rgba(255,255,255,.45);
}

/* ==========================================================================
   8) المقالات — شبكة وصفحة قراءة
   tem.css فيه .tem-post للبطاقة و.tem-prose للمتن، ولا شبكة تجمعهما
   لأن الموقع الإنجليزي يعرضها بمكوّن Insights المرتبط بنوع منشور خاصّ.
   ========================================================================== */
.tem-postgrid{
  display:grid; gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:900px){ .tem-postgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .tem-postgrid{ grid-template-columns:1fr; } }

.tem-light .tem-post{
  background:#FFFDFB; border:1px solid var(--tem-light-line);
  padding:clamp(1.3rem,2.2vw,1.9rem); text-decoration:none; display:block;
  transition:border-color .35s var(--tem-ease), transform .35s var(--tem-ease);
}
.tem-light .tem-post:hover{ border-color:var(--tem-gold); transform:translateY(-3px); }
.tem-light .tem-post h2{ font-size:1.12rem; font-weight:700; margin:.6rem 0 .6rem; line-height:1.55; }
.tem-light .tem-post p{ font-size:.92rem; line-height:1.9; color:var(--tem-light-ink); margin:0 0 1rem; }
.tem-light .tem-post__cat{ color:var(--tem-gold-deep); font-size:.76rem; font-weight:700; }
.tem-light .tem-post__meta{ color:var(--tem-light-mute); font-size:.8rem; }

/* متن المقال: عرض قراءة مريح وتنسيق للعناصر القادمة من المحرّر. */
.tem-prose{ max-width:70ch; }
.tem-prose h2{ font-size:clamp(1.4rem,2.6vw,1.9rem); margin:2.2rem 0 .9rem; }
.tem-prose h3{ font-size:clamp(1.15rem,2vw,1.4rem); margin:1.8rem 0 .7rem; }
.tem-prose p, .tem-prose li{ font-size:1rem; line-height:2; color:var(--tem-light-ink); }
.tem-prose ul, .tem-prose ol{ padding-inline-start:1.4rem; margin:1rem 0; }
.tem-prose a{ color:var(--tem-gold-deep); }
.tem-prose img{ max-width:100%; height:auto; }
.tem-prose blockquote{
  margin:1.6rem 0; padding:1rem 1.4rem;
  border-inline-start:3px solid var(--tem-gold); background:rgba(255,255,255,.5);
}

/* ترقيم الصفحات */
.tem-light .pagination, .tem-light .nav-links{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:2.4rem; }
.tem-light .nav-links .page-numbers{
  padding:.55rem 1rem; border:1px solid var(--tem-light-line);
  color:var(--tem-cream-ink); text-decoration:none; font-size:.9rem;
}
.tem-light .nav-links .page-numbers.current,
.tem-light .nav-links .page-numbers:hover{ border-color:var(--tem-gold); color:var(--tem-gold-deep); }
.tem-linkpages{ margin-top:1.6rem; font-size:.9rem; }

/* ==========================================================================
   9) شريط الضمانات — النسخة المكثّفة من بنود التعاقد
   أربع خانات بخطّ شعرة بينها، ورقم ذهبي صغير فوق كل التزام. صُمّم ليُقرأ
   في ثانيتين: العين تلتقط الأرقام، ثم الأسطر العريضة، ثم التفصيل إن شاءت.
   ========================================================================== */
.tem-seals{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--tem-light-line);
  border-block-start:2px solid var(--tem-gold);
  background:rgba(255,255,255,.42);
}
.tem-seal{ padding:clamp(1.3rem,2.2vw,1.9rem); }
.tem-seal + .tem-seal{ border-inline-start:1px solid var(--tem-light-line); }
.tem-seal__no{
  display:block; font-size:.68rem; font-weight:700; color:var(--tem-gold-deep);
  margin-bottom:.9rem; direction:ltr; unicode-bidi:isolate;
}
.tem-seal b{
  display:block; font-family:var(--tem-display); font-weight:700;
  font-size:1.02rem; color:var(--tem-cream-ink); line-height:1.5; margin-bottom:.45rem;
}
.tem-seal span:not(.tem-seal__no){
  display:block; font-size:.88rem; line-height:1.85; color:var(--tem-light-ink);
}
@media (max-width:900px){
  .tem-seals{ grid-template-columns:1fr 1fr; }
  .tem-seal:nth-child(3){ border-inline-start:0; }
  .tem-seal:nth-child(n+3){ border-block-start:1px solid var(--tem-light-line); }
}
@media (max-width:560px){
  .tem-seals{ grid-template-columns:1fr; }
  .tem-seal + .tem-seal{ border-inline-start:0; border-block-start:1px solid var(--tem-light-line); }
}

/* ==========================================================================
   9) الميثاق المكثّف — أربعة بنود في شريط واحد
   يظهر في أربعين صفحة، فيجب أن يُقرأ في ثانيتين ولا يزاحم محتوى الصفحة.
   الشكل: عمود عنوان على اليمين، وشبكة بنود بخطوط شعرة على اليسار.
   ========================================================================== */
.tem-pactband{ border-block:1px solid var(--tem-line); }

.tem-pact{
  display:grid; grid-template-columns:minmax(220px,.85fr) 2.15fr;
  gap:clamp(1.6rem,4vw,4rem); align-items:start;
}
.tem-pact__head .tem-eyebrow{ margin-bottom:.7rem; }
.tem-pact__head .tem-h2{ font-size:clamp(1.25rem,2.2vw,1.7rem); margin-bottom:1rem; }

.tem-pact__list{
  margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--tem-line);
  border-inline-start:1px solid var(--tem-line);
}
.tem-pact__list > div{
  padding:1.05rem 1.3rem;
  border-bottom:1px solid var(--tem-line);
  border-inline-end:1px solid var(--tem-line);
}
.tem-pact__list dt{
  font-family:var(--tem-label); font-weight:700; font-size:.78rem;
  color:var(--tem-gold-lit); margin-bottom:.45rem;
}
.tem-pact__list dd{
  margin:0; font-size:.94rem; line-height:1.85; color:var(--tem-lead-ink);
}

@media (max-width:860px){
  .tem-pact{ grid-template-columns:1fr; gap:1.4rem; }
  .tem-pact__list{ grid-template-columns:1fr; }
}

/* ==========================================================================
   10) أكورديون الخدمات
   يقوم على .tem-faq__sign الموجود في tem.css (علامة + / −)، ويضيف
   رقمًا ذهبيًّا وشبكة روابط فرعية داخل الصفّ المفتوح.
   ========================================================================== */
.tem-acc{ border-top:1px solid var(--tem-light-line); }
.tem-acc__item{ border-bottom:1px solid var(--tem-light-line); }
.tem-acc__item > summary{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem;
  padding:1.15rem .2rem; cursor:pointer; list-style:none;
  transition:color .3s var(--tem-ease);
}
.tem-acc__item > summary::-webkit-details-marker{ display:none; }
.tem-acc__item > summary:hover{ color:#8A5C04; }
.tem-acc__no{
  font-family:var(--tem-label); font-size:.75rem; font-weight:700;
  color:var(--tem-gold-deep); direction:ltr; unicode-bidi:isolate;
}
.tem-acc__t{ font-family:var(--tem-display); font-weight:700; font-size:clamp(1.02rem,1.7vw,1.25rem); }
.tem-acc__body{ padding:0 0 1.6rem; max-width:78ch; }
.tem-acc__body > p{ font-size:.96rem; line-height:1.95; color:var(--tem-light-ink); margin:0 0 1rem; }
.tem-acc__subs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.1rem; }
.tem-acc__subs a, .tem-acc__subs span{
  font-size:.85rem; padding:.4rem .85rem; text-decoration:none;
  border:1px solid var(--tem-light-line); color:var(--tem-light-ink);
  transition:border-color .3s var(--tem-ease), color .3s var(--tem-ease);
}
.tem-acc__subs a:hover{ border-color:var(--tem-gold); color:var(--tem-gold-deep); }
@media (max-width:560px){
  .tem-acc__item > summary{ grid-template-columns:auto 1fr; gap:.7rem; }
  .tem-acc__item > summary .tem-faq__sign{ grid-column:2; justify-self:end; margin-top:-1.6rem; }
}

/* ==========================================================================
   11) صفحة الخدمات — شريط النظام، القفزات، ترقيم المجموعات
   ========================================================================== */

/* شريط النظام: ستّ محطّات بخطّ يصلها، يُقرأ كخريطة لا كقائمة. */
.tem-flow{
  list-style:none; margin:clamp(1.6rem,3vw,2.4rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--tem-line);
}
.tem-flow li{
  position:relative; padding:1.1rem .9rem 0;
  border-inline-end:1px solid var(--tem-line);
}
.tem-flow li:last-child{ border-inline-end:0; }
.tem-flow li::before{
  content:""; position:absolute; inset-block-start:-4px; inset-inline-start:.9rem;
  width:7px; height:7px; background:var(--tem-gold); transform:rotate(45deg);
}
.tem-flow b{
  display:block; font-family:var(--tem-label); font-size:.7rem; font-weight:700;
  color:var(--tem-gold-lit); margin-bottom:.4rem; direction:ltr; unicode-bidi:isolate;
}
.tem-flow span{ font-size:.92rem; line-height:1.6; color:var(--tem-lead-ink); }
@media (max-width:900px){ .tem-flow{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .tem-flow{ grid-template-columns:1fr 1fr; } }

/* قفزات سريعة إلى المجموعات */
.tem-jump{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem; }
.tem-jump a{
  font-size:.85rem; padding:.5rem 1rem; text-decoration:none;
  border:1px solid var(--tem-line); color:var(--tem-ivory);
  transition:border-color .3s var(--tem-ease), color .3s var(--tem-ease);
}
.tem-jump a:hover{ border-color:var(--tem-gold); color:var(--tem-gold-lit); }

/* رقم المجموعة: كبير وخافت خلف العنوان، كترقيم فصل في كتاب. */
.tem-acc__group{
  display:block; font-family:var(--tem-label); font-weight:700;
  font-size:clamp(2.2rem,5vw,3.4rem); line-height:1;
  color:var(--tem-gold); opacity:.28; margin-bottom:.2rem;
  direction:ltr; unicode-bidi:isolate;
}
.tem-light .tem-acc__group{ color:var(--tem-gold-deep); opacity:.3; }

/* عدّاد الخدمات الفرعية في الصفّ المطويّ */
.tem-acc__count{
  font-size:.76rem; color:var(--tem-muted-ink, rgba(239,240,234,.55));
  white-space:nowrap; margin-inline-start:.6rem;
}
.tem-light .tem-acc__count{ color:var(--tem-light-mute); }
.tem-acc__item > summary{ grid-template-columns:auto 1fr auto auto; }

/* الأكورديون على الأرضية الداكنة */
.tem-section--deep .tem-acc,
.tem-section--deep .tem-acc__item{ border-color:var(--tem-line); }
.tem-section--deep .tem-acc__no{ color:var(--tem-gold-lit); }
.tem-section--deep .tem-acc__item > summary:hover{ color:var(--tem-gold-lit); }
.tem-section--deep .tem-acc__body > p{ color:var(--tem-lead-ink); }
.tem-section--deep .tem-acc__subs a,
.tem-section--deep .tem-acc__subs span{ border-color:var(--tem-line); color:var(--tem-lead-ink); }
.tem-section--deep .tem-acc__subs a:hover{ border-color:var(--tem-gold); color:var(--tem-gold-lit); }
@media (max-width:560px){
  .tem-acc__item > summary{ grid-template-columns:auto 1fr; }
  .tem-acc__count{ display:none; }
}

/* ==========================================================================
   12) قسم المنظومة — إعادة تصميم
   الصفّ الأفقي بستّة أعمدة كان يضيق بالنصّ العربي، وآخر عمود يصطدم
   بالشريط الجانبي اللاصق فيُقصّ الرقم. البديل: عمودان — بيان على جانب،
   وسلسلة رأسية على الآخر. لا اصطدام، ولكل حلقة سطر يشرحها.
   ========================================================================== */
.tem-system__grid{
  display:grid; grid-template-columns:minmax(280px,.9fr) 1.25fr;
  gap:clamp(2rem,5vw,5rem); align-items:start;
}
.tem-system__head .tem-h2{ max-width:16ch; }
.tem-system__head .tem-lead{ max-width:38ch; }

/* السلسلة: خطّ رأسي يصل الحلقات، وكل حلقة معلَّمة بمعيّن ذهبي. */
.tem-chain{
  list-style:none; margin:0; padding:0; position:relative;
  border-inline-start:1px solid var(--tem-line);
}
.tem-chain li{
  position:relative; display:grid; grid-template-columns:auto 1fr;
  gap:1.1rem; padding:1.05rem 0 1.05rem 1.6rem;
}
.tem-chain li + li{ border-top:1px solid var(--tem-line); }
.tem-chain li::before{
  content:""; position:absolute; inset-inline-start:-4px; inset-block-start:1.55rem;
  width:7px; height:7px; background:var(--tem-gold); transform:rotate(45deg);
  transition:background .3s var(--tem-ease);
}
.tem-chain li:hover::before{ background:var(--tem-gold-lit); }
.tem-chain b{
  font-family:var(--tem-label); font-size:.72rem; font-weight:700; line-height:2;
  color:var(--tem-gold); direction:ltr; unicode-bidi:isolate;
}
.tem-chain strong{
  display:block; font-family:var(--tem-display); font-weight:700;
  font-size:1.05rem; color:var(--tem-ivory); margin-bottom:.25rem;
}
.tem-chain span{ font-size:.92rem; line-height:1.85; color:var(--tem-lead-ink); }

@media (max-width:860px){
  .tem-system__grid{ grid-template-columns:1fr; gap:2rem; }
  .tem-system__head .tem-h2{ max-width:none; }
}

/* الشريط الجانبي اللاصق كان يغطّي حافّة المحتوى على الشاشات المتوسّطة.
   نترك له مساحته بدل أن يقتطعها من النصّ. */
@media (min-width:1024px) and (max-width:1440px){
  .tem-wrap{ padding-inline-end:max(var(--tem-gutter), 5.2rem); }
}

/* ==========================================================================
   13) الأكورديون البطاقي — قسم خدمات الرئيسية
   صفوف منفصلة لا قائمة متّصلة: لكل صفّ إطار وأيقونة وتسمية صغيرة فوق
   العنوان وعدّاد وعلامة زائد. مصمَّم ليُمسح بالعين في ثوانٍ.
   ========================================================================== */
.tem-acc--cards{ border-top:0; display:grid; gap:.7rem; }
.tem-acc--cards .tem-acc__item{
  border:1px solid var(--tem-light-line); border-radius:2px;
  background:#FFFDFB;
  transition:border-color .3s var(--tem-ease), transform .3s var(--tem-ease);
}
.tem-acc--cards .tem-acc__item:hover{ border-color:var(--tem-gold); }
.tem-acc--cards .tem-acc__item[open]{ border-color:var(--tem-gold); }
.tem-acc--cards .tem-acc__item > summary{
  grid-template-columns:auto 1fr auto auto;
  gap:1rem; padding:1.15rem 1.3rem;
}

/* الأيقونة: مربّع بحدّ رفيع، لا دائرة مصمتة — أقرب إلى هوية الموقع. */
.tem-acc__icon{
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--tem-light-line); color:var(--tem-gold-deep);
  transition:border-color .3s var(--tem-ease), background .3s var(--tem-ease);
}
.tem-acc__icon svg{ width:20px; height:20px; }
.tem-acc--cards .tem-acc__item:hover .tem-acc__icon,
.tem-acc--cards .tem-acc__item[open] .tem-acc__icon{
  border-color:var(--tem-gold); background:rgba(203,133,9,.07);
}

.tem-acc__stack{ display:grid; gap:.2rem; }
.tem-acc__label{
  font-family:var(--tem-label); font-size:.74rem; font-weight:700;
  color:var(--tem-light-mute);
}
.tem-acc--cards .tem-acc__t{ font-size:clamp(1rem,1.6vw,1.18rem); }
.tem-acc--cards .tem-acc__body{ padding:0 1.3rem 1.4rem; }

/* على الأرضية الداكنة */
.tem-section--deep .tem-acc--cards .tem-acc__item{ background:rgba(239,240,234,.03); }
.tem-section--deep .tem-acc__icon{ color:var(--tem-gold-lit); }
.tem-section--deep .tem-acc__label{ color:rgba(239,240,234,.55); }

@media (max-width:560px){
  .tem-acc--cards .tem-acc__item > summary{ grid-template-columns:auto 1fr auto; padding:1rem; }
  .tem-acc--cards .tem-acc__item > summary .tem-faq__sign{ grid-column:3; margin-top:0; }
  .tem-acc__icon{ width:38px; height:38px; }
}

/* ==========================================================================
   14) المدوّنة — شريط التصنيفات، مقال الصدارة، فهرس المقال
   ========================================================================== */

/* شريط التصنيفات */
.tem-catbar{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.tem-catbar a{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.86rem; padding:.5rem 1rem; text-decoration:none;
  border:1px solid var(--tem-light-line); color:var(--tem-light-ink);
  transition:border-color .3s var(--tem-ease), color .3s var(--tem-ease);
}
.tem-catbar a span{ font-size:.72rem; color:var(--tem-light-mute); direction:ltr; unicode-bidi:isolate; }
.tem-catbar a:hover{ border-color:var(--tem-gold); color:var(--tem-gold-deep); }
.tem-catbar a.is-on{ border-color:var(--tem-gold); background:rgba(203,133,9,.07); color:var(--tem-cream-ink); }

/* مقال الصدارة: يمتدّ على عمودين ويأخذ عنوانًا أكبر */
.tem-post--lead{ grid-column:span 2; }
.tem-light .tem-post--lead h2{ font-size:clamp(1.35rem,2.6vw,1.8rem); }
.tem-light .tem-post--lead p{ font-size:1rem; }
@media (max-width:900px){ .tem-post--lead{ grid-column:span 2; } }
@media (max-width:560px){ .tem-post--lead{ grid-column:span 1; } }
.tem-post__meta i{ margin:0 .45rem; font-style:normal; opacity:.5; }

/* صفحة المقال: فهرس على جانب والمتن على الآخر */
/* المتن أوّلًا في الترميز، فالعمود الأوّل له. كانت النسبتان مقلوبتين
   (.7fr للمتن و2fr للعمود الجانبي) لأنهما ضُبطتا لترتيب الفهرس القديم
   ثم بُدّل الترميز ولم تُصحَّح الشبكة — فظهر المتن في عمود ضيّق. */
.tem-article{ display:grid; grid-template-columns:minmax(0,2.4fr) minmax(240px,.85fr); gap:clamp(1.8rem,4vw,3.4rem); align-items:start; }
.tem-article .tem-prose{ max-width:68ch; }
.tem-toc{ position:sticky; top:6.5rem; border-inline-start:2px solid var(--tem-gold); padding-inline-start:1.1rem; }
.tem-toc .tem-label{ display:block; color:var(--tem-gold-deep); margin-bottom:.8rem; }
.tem-toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; counter-reset:toc; }
.tem-toc li{ counter-increment:toc; }
.tem-toc li a{
  display:grid; grid-template-columns:auto 1fr; gap:.6rem;
  font-size:.9rem; line-height:1.65; color:var(--tem-light-ink); text-decoration:none;
}
.tem-toc li a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--tem-label); font-size:.7rem; font-weight:700; color:var(--tem-light-mute);
  direction:ltr; unicode-bidi:isolate;
}
.tem-toc li a:hover{ color:var(--tem-gold-deep); }
@media (max-width:900px){
  .tem-article{ grid-template-columns:1fr; }
  .tem-toc{ position:static; }
}

/* ==========================================================================
   15) المدوّنة — شبكة داكنة بخطوط فاصلة، وعمود جانبي في المقال
   على نسق صفحات Insights في الموقع الإنجليزي: لا بطاقات مصمتة، بل
   شبكة تفصلها خطوط شعرة، والتصنيف فوق العنوان، والتاريخ ومدّة القراءة أسفله.
   ========================================================================== */
.tem-postgrid--rule{
  gap:0; border-top:1px solid var(--tem-line);
}
.tem-postgrid--rule .tem-post{
  background:transparent; border:0; padding:clamp(1.4rem,2.4vw,2rem);
  border-bottom:1px solid var(--tem-line);
  border-inline-end:1px solid var(--tem-line);
  display:flex; flex-direction:column;
}
.tem-postgrid--rule .tem-post:nth-child(3n){ border-inline-end:0; }
.tem-postgrid--rule .tem-post:hover{ background:rgba(239,240,234,.03); transform:none; }
.tem-postgrid--rule .tem-post__cat{
  color:var(--tem-lead-ink); font-size:.8rem; font-weight:500; margin-bottom:.7rem;
}
.tem-postgrid--rule .tem-post h2{
  font-family:var(--tem-display); font-weight:700; color:var(--tem-ivory);
  font-size:clamp(1.08rem,1.9vw,1.28rem); line-height:1.5; margin:0 0 .6rem;
}
.tem-postgrid--rule .tem-post p{ color:var(--tem-lead-ink); font-size:.92rem; line-height:1.85; margin:0 0 1.4rem; }
.tem-postgrid--rule .tem-post__meta{ margin-top:auto; color:rgba(239,240,234,.5); font-size:.82rem; }
.tem-postgrid--rule .tem-post--lead h2{ font-size:clamp(1.3rem,2.4vw,1.65rem); }
@media (max-width:900px){
  .tem-postgrid--rule .tem-post:nth-child(3n){ border-inline-end:1px solid var(--tem-line); }
  .tem-postgrid--rule .tem-post:nth-child(2n){ border-inline-end:0; }
}
@media (max-width:560px){
  .tem-postgrid--rule .tem-post{ border-inline-end:0; }
}
.tem-section--deep .tem-catbar a{ border-color:var(--tem-line); color:var(--tem-lead-ink); }
.tem-section--deep .tem-catbar a:hover,
.tem-section--deep .tem-catbar a.is-on{ border-color:var(--tem-gold); color:var(--tem-gold-lit); }
.tem-section--deep .nav-links .page-numbers{ border:1px solid var(--tem-line); color:var(--tem-ivory); padding:.55rem 1rem; text-decoration:none; }
.tem-section--deep .nav-links{ display:flex; gap:.6rem; margin-top:2.4rem; }
.tem-section--deep .nav-links .page-numbers.current,
.tem-section--deep .nav-links .page-numbers:hover{ border-color:var(--tem-gold); color:var(--tem-gold-lit); }

/* العمود الجانبي في صفحة المقال: صندوق أبيض بحدّ رفيع ولاصق. */
.tem-aside{
  position:sticky; top:6.5rem;
  background:#FFFDFB; border:1px solid var(--tem-light-line);
  padding:1.4rem 1.5rem;
}
.tem-aside__h{
  display:block; font-family:var(--tem-display); font-weight:700; font-size:1.05rem;
  color:var(--tem-cream-ink); padding-bottom:.9rem; margin-bottom:.9rem;
  border-bottom:1px solid var(--tem-light-line);
}
.tem-aside ul{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.tem-aside li a{
  font-size:.92rem; line-height:1.7; color:var(--tem-light-ink); text-decoration:none;
  display:block; transition:color .3s var(--tem-ease);
}
.tem-aside li a:hover{ color:var(--tem-gold-deep); }
.tem-prose__meta{ color:var(--tem-light-mute); margin:0 0 1.8rem; }
@media (max-width:900px){ .tem-aside{ position:static; } }

/* ==========================================================================
   16) بنود التعاقد — معالجة «وثيقة»
   القسم يظهر في كل صفحة تقريبًا، فلا يكفي أن يكون مرتّبًا: يجب أن يُقرأ
   كوثيقة رسمية لا كقسم تسويقي. ثلاثة عناصر تصنع ذلك: ترويسة بمعلومات
   مرجعية، وختم خطّي في الزاوية، وبنود في عمودين بخطوط شعرة.
   ========================================================================== */
.tem-legalbook{ position:relative; overflow:hidden; }

/* الختم: ثماني مضلّع مزدوج بعلامة صحّ — خطّي كبقيّة رسوم الموقع، لا صورة. */
.tem-legalseal-mark{
  position:absolute; inset-block-start:clamp(1.5rem,4vw,3rem);
  inset-inline-start:clamp(-2rem,-2vw,0rem);
  width:clamp(120px,16vw,210px); height:auto;
  color:var(--tem-gold); opacity:.13; z-index:0; pointer-events:none;
}
.tem-legalbook > .tem-wrap{ position:relative; z-index:1; }

/* ترويسة الوثيقة */
.tem-doc__head{ max-width:64ch; }
.tem-doc__meta{
  display:grid; grid-template-columns:repeat(3,auto); gap:0;
  margin:clamp(1.6rem,3vw,2.2rem) 0 0; padding:0;
  border-block-start:1px solid var(--tem-gold);
  justify-content:start;
}
.tem-doc__meta > div{
  padding:.95rem clamp(1rem,2vw,1.8rem) .1rem 0;
  border-inline-end:1px solid var(--tem-line);
  padding-inline-end:clamp(1rem,2vw,1.8rem);
}
.tem-doc__meta > div:last-child{ border-inline-end:0; }
.tem-doc__meta > div + div{ padding-inline-start:clamp(1rem,2vw,1.8rem); }
.tem-doc__meta dt{
  font-family:var(--tem-label); font-size:.7rem; font-weight:700;
  color:var(--tem-gold-lit); margin-bottom:.4rem;
}
.tem-doc__meta dd{ margin:0; font-size:.9rem; line-height:1.6; color:var(--tem-lead-ink); }
@media (max-width:700px){
  .tem-doc__meta{ grid-template-columns:1fr; }
  .tem-doc__meta > div{ border-inline-end:0; border-block-end:1px solid var(--tem-line); padding-inline-start:0 !important; }
  .tem-doc__meta > div:last-child{ border-block-end:0; }
}

/* البنود: عمودان على الشاشة الواسعة، فلا تصير الوثيقة عمودًا طويلًا. */
@media (min-width:960px){
  .tem-doc__clauses{ grid-template-columns:1fr 1fr; column-gap:clamp(2rem,4vw,4rem); }
  .tem-doc__clauses li:nth-child(2){ border-top:1px solid var(--tem-line); }
  .tem-doc__clauses li:last-child,
  .tem-doc__clauses li:nth-last-child(2){ border-bottom:1px solid var(--tem-line); }
}

/* الختم النهائي: يصير سطرًا موقّعًا لا ملاحظة. */
.tem-legalseal{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center;
  background:rgba(255,255,255,.55);
}
.tem-legalseal::before{
  content:""; width:26px; height:26px; flex:none;
  border:1.5px solid var(--tem-gold-deep); transform:rotate(45deg);
}

/* الميثاق المكثّف: ختم صغير فوق العنوان، ورقم لكل بند. */
.tem-pact__mark{
  display:block; width:34px; height:34px; color:var(--tem-gold);
  margin-bottom:1rem; opacity:.9;
}
.tem-pact__note{
  margin:0 0 1rem; font-size:.86rem; line-height:1.7; color:var(--tem-muted);
}
.tem-pact__list > div{ position:relative; padding-block-start:1.3rem; }
.tem-pact__no{
  position:absolute; inset-block-start:.55rem; inset-inline-start:1.3rem;
  font-family:var(--tem-label); font-size:.66rem; font-weight:700;
  color:var(--tem-gold); opacity:.65; direction:ltr; unicode-bidi:isolate;
}

/* ==========================================================================
   17) وصف الفوتر — نصّ أصغر وسطر حقائق
   الوصف كان بمقاس 1.2rem وخطّ العناوين، فيُقرأ كعنوان لا كتعريف.
   صُغِّر ووُزّع: جملة تعريفية، ثم ثلاث حقائق في سطور قصيرة.
   ========================================================================== */
.tem-footer__tagline{
  font-family:var(--tem-body);
  font-size:.95rem;
  font-weight:400;
  line-height:1.85;
  max-width:42ch;
  color:var(--tem-lead-ink);
  margin:1rem 0 1.1rem;
}

.tem-footer__facts{
  list-style:none; margin:0 0 1.2rem; padding:0;
  display:grid; gap:.45rem; max-width:42ch;
}
.tem-footer__facts li{
  position:relative; padding-inline-start:.95rem;
  font-size:.84rem; line-height:1.7; color:var(--tem-muted);
}
.tem-footer__facts li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.62em;
  width:5px; height:5px; background:var(--tem-gold); transform:rotate(45deg);
}
.tem-footer__facts .tem-num{ color:var(--tem-ivory); font-weight:500; }

/* ==========================================================================
   18) شارة Google Partner الرسمية
   تُخدَم من gstatic ولا نعرف نسبتها يقينًا، فيُحجز لها صندوق ثابت
   والصورة تتمدّد داخله بـobject-fit:contain — قفزة تخطيط صفر مهما كانت
   أبعادها الحقيقية، وبلا تشويه إن اختلفت النسبة.
   ========================================================================== */
.tem-gpbadge{
  display:block; width:150px; height:74px;
  margin:0 0 1.3rem;
  background:rgba(239,240,234,.06);
  border:1px solid var(--tem-line);
  padding:.5rem .7rem;
  transition:border-color .3s var(--tem-ease), background .3s var(--tem-ease);
}
.tem-gpbadge:hover{ border-color:var(--tem-gold); background:rgba(203,133,9,.08); }
.tem-gpbadge img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  display:block;
}
@media (max-width:560px){
  .tem-gpbadge{ width:132px; height:66px; }
}

/* الشارة في سياق النصّ: صفّ واحد مع سطر توضيحي. */
.tem-gpbadge-wrap{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; margin-block-start:1.2rem; }
.tem-gpbadge-wrap .tem-gpbadge{ margin:0; flex:none; }
.tem-gpbadge__note{ margin:0; font-size:.88rem; line-height:1.8; max-width:42ch; color:var(--tem-lead-ink); }
.tem-light .tem-gpbadge{ background:#FFFDFB; border-color:var(--tem-light-line); }
.tem-light .tem-gpbadge:hover{ border-color:var(--tem-gold); background:#fff; }
.tem-light .tem-gpbadge__note{ color:var(--tem-light-ink); }
/* داخل شريط التحقّق: أصغر قليلًا لأنها بجوار قائمة روابط لا وحدها. */
.tem-proofbar__verify .tem-gpbadge-wrap{ margin-block:0 1rem; }
.tem-proofbar__verify .tem-gpbadge{ width:128px; height:64px; }

/* صندوق أرقام بأكثر من خليّتين — لدراسات الحالة. */
.tem-figurebox--4{ grid-template-columns:repeat(3,1fr); }
.tem-figurebox--4 > div{ border-inline-start:1px solid var(--tem-light-line); }
.tem-figurebox--4 > div:nth-child(3n+1){ border-inline-start:0; }
.tem-figurebox--4 > div:nth-child(n+4){ border-block-start:1px solid var(--tem-light-line); }
.tem-figurebox--4 b{ font-size:clamp(1.5rem,3vw,2.2rem); }
@media (max-width:760px){
  .tem-figurebox--4{ grid-template-columns:1fr 1fr; }
  .tem-figurebox--4 > div:nth-child(3n+1){ border-inline-start:1px solid var(--tem-light-line); }
  .tem-figurebox--4 > div:nth-child(2n+1){ border-inline-start:0; }
  .tem-figurebox--4 > div:nth-child(n+3){ border-block-start:1px solid var(--tem-light-line); }
}
@media (max-width:460px){
  .tem-figurebox--4{ grid-template-columns:1fr; }
  .tem-figurebox--4 > div{ border-inline-start:0 !important; }
  .tem-figurebox--4 > div + div{ border-block-start:1px solid var(--tem-light-line); }
}

/* ==========================================================================
   19) ضبط مقاسات العناوين الطويلة
   العربية أطول من الإنجليزية في العدّ نفسه، وعنوان من 60 حرفًا عند 2.9rem
   يملأ الشاشة. سقف المقاس يُخفَّض، وألواح النصّ تُوسَّع.
   ========================================================================== */
:root{
  --tem-h2: clamp(1.55rem, 2.9vw, 2.4rem);
}

/* اللوح الداكن في القسم المنقسم: العنوان فيه جملة شارحة لا عنوان قصير،
   وعرضه كان محصورًا في 12 حرفًا فينكسر إلى عمود من الكلمات. */
.tem-method__dark h2,
.tem-method__dark .tem-h2{
  font-size:clamp(1.2rem, 2.2vw, 1.7rem);
  line-height:1.55;
  max-width:30ch;
}
.tem-method__dark .tem-lead{ max-width:44ch; }

/* العناوين داخل الفقرة الافتتاحية: نصّ شارح لا لافتة. */
.tem-statement .tem-h2{ font-size:clamp(1.3rem, 2.4vw, 1.9rem); line-height:1.5; }

/* البطل الداخلي: العنوان الطويل يُخفَّض درجة على الشاشة الصغيرة. */
@media (max-width:620px){
  .tem-pagehero h1{ font-size:clamp(1.65rem, 6.4vw, 2.1rem); line-height:1.45; }
}

/* ==========================================================================
   20) معرض الصور — إعادة ما أسقطه التحويل
   شبكة بنسبة ثابتة: الصورة تملأ خليّتها بـobject-fit فلا تتشوّه مهما
   اختلفت أبعادها الأصلية، والنسبة محجوزة فلا قفزة عند التحميل.
   ========================================================================== */
.tem-gallery{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(.7rem,1.4vw,1.1rem);
}
.tem-gallery__item{
  margin:0; overflow:hidden; aspect-ratio:4/3;
  border:1px solid var(--tem-light-line); background:#F1E8E1;
}
.tem-gallery__item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--tem-ease);
}
.tem-gallery__item:hover img{ transform:scale(1.05); }
.tem-section--deep .tem-gallery__item{ border-color:var(--tem-line); background:var(--tem-ink-lift); }

/* ==========================================================================
   21) نموذج الحجز — إعادة تنسيقه داخل نظام التصميم
   تنسيقه كان في ورقة التصميم القديم التي لم تكن تُحمَّل، فظهر النموذج
   بلا تنسيق ومعه حقل المصيدة «لا تملأ هذا الحقل» ظاهرًا للزائر.
   ========================================================================== */

/* (أ) طبقة توافق: النموذج يقرأ متغيّرات الورقة القديمة من داخل leads.php،
       فتُعرَّف هنا بقيم اللوحة الجديدة بدل تعديل ملفّ التوليد. */
.tem-design{
  --ink:   var(--tem-cream-ink);
  --muted: var(--tem-light-mute);
  --line:  var(--tem-light-line);
  --rust:  var(--tem-gold-deep);
  --tan:   var(--tem-gold);
  --surface:#FFFDFB;
}

/* (ب) المصيدة تُخفى — وجودها ظاهرًا عطل أمني وبصري معًا. */
.te-lf-hp{
  position:absolute !important; inset-inline-start:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

/* (ج) الصندوق */
.te-leadform{
  background:#FFFDFB !important;
  border:1px solid var(--tem-light-line) !important;
  border-radius:0 !important;
  padding:clamp(1.6rem,3vw,2.4rem) !important;
  color:var(--tem-cream-ink);
}
.te-leadform h3{ font-family:var(--tem-display); font-weight:700; color:var(--tem-cream-ink); }
.te-leadform ul li{ color:var(--tem-light-ink); }

/* (د) الحقول: خطّ سفلي لا صندوق — كما في بقيّة النظام */
.te-leadform input[type="text"],
.te-leadform input[type="tel"],
.te-leadform input[type="email"],
.te-leadform select,
.te-leadform textarea{
  width:100%; box-sizing:border-box;
  background:transparent;
  border:0; border-bottom:1px solid var(--tem-light-line);
  border-radius:0; -webkit-appearance:none; appearance:none;
  padding:.8rem .2rem;
  font-family:var(--tem-body); font-size:1rem; color:var(--tem-cream-ink);
  transition:border-color .3s var(--tem-ease);
}
.te-leadform ::placeholder{ color:var(--tem-light-mute); opacity:1; }
.te-leadform input:focus,
.te-leadform select:focus,
.te-leadform textarea:focus{ outline:none; border-bottom-color:var(--tem-gold); }
.te-leadform input:focus-visible,
.te-leadform select:focus-visible{ outline:2px solid var(--tem-gold); outline-offset:4px; }
.te-leadform select{
  background-image:linear-gradient(45deg,transparent 50%,var(--tem-gold-deep) 50%),
                   linear-gradient(135deg,var(--tem-gold-deep) 50%,transparent 50%);
  background-position:12px 1.25rem,17px 1.25rem;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  padding-inline-start:2rem; cursor:pointer;
}

/* (هـ) الزرّ: بالزاوية المقطوعة نفسها في كل أزرار الموقع */
.te-leadform button,
.te-leadform input[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tem-gold); color:#1a1204;
  border:0; padding:1rem 2rem; margin-top:.6rem;
  font-family:var(--tem-label); font-weight:700; font-size:.92rem; cursor:pointer;
  clip-path:polygon(0 0,calc(100% - var(--tem-bevel)) 0,100% var(--tem-bevel),100% 100%,var(--tem-bevel) 100%,0 calc(100% - var(--tem-bevel)));
  transition:background .3s var(--tem-ease);
}
.te-leadform button:hover{ background:#E09A1F; }

/* (و) رسالة النجاح */
.te-lf-ok{
  background:rgba(203,133,9,.1) !important;
  border:1px solid var(--tem-gold) !important;
  border-radius:0 !important;
  color:var(--tem-cream-ink) !important;
  padding:.9rem 1.2rem !important;
}

/* ==========================================================================
   22) ارتفاع السطر في العناوين الكبيرة
   tem.css يكتب line-height صراحةً في ثلاثة مواضع (1.06 للبطل و1.1 لبطل
   الصفحة الداخلية)، فلا يصل إليها المتغيّر الذي ضبطناه للعربية. والقيمة
   مضبوطة على Playfair اللاتيني: حروفه لا صاعد فيها فوق السطر ولا نازل
   تحته بالقدر الذي في العربية — فتتداخل الأسطر عند نقل القيمة كما هي.
   ========================================================================== */
.tem-slide h1,
.tem-slide .tem-slide__h{
  line-height:1.45;
  letter-spacing:0;
  margin-bottom:1.8rem;
  /* 35 حرفًا في ستّ كلمات: عند 18 حرفًا ينكسر إلى أربعة أسطر ويملأ
     الشاشة. عند 26 يستقرّ على سطرين، وهو ما يحتمله البطل. */
  max-width:26ch;
}
.tem-pagehero h1{
  line-height:1.38;
  letter-spacing:0;
  max-width:20ch;
}
h1, h2, h3, .tem-h2{ line-height:1.4; }
.tem-sechead h2, .tem-acc__t{ line-height:1.45; }

/* الحروف الصاعدة في Cairo تحتاج هامشًا علويًّا أوسع بين العنوان وما قبله. */
.tem-slide .tem-eyebrow{ margin-bottom:1.2rem; }
@media (max-width:620px){
  .tem-slide h1,
  .tem-slide .tem-slide__h{ line-height:1.45; max-width:none; }
}

/* البطل لا يملأ الشاشة: ارتفاعه يتبع محتواه بدل 100svh المضبوطة على
   عنوان لاتيني من سطرين. */
.tem-hero{ min-height:auto; padding-block:calc(var(--tem-header-h) + clamp(3rem,6vw,5rem)) clamp(6rem,9vw,8rem); }
@media (min-width:1200px){ .tem-hero{ min-height:min(86svh,760px); } }

/* ==========================================================================
   23) عرض الأكورديون
   الصفّ كان يمتدّ على عرض الحاوية كلّها (≈1130 بكسل)، فيبتعد العنوان عن
   علامة الزائد بفراغ لا يخدم شيئًا. الحصر عند 880 يبقيه مقروءًا ومترابطًا،
   ويُحاذى من جهة القراءة لا في المنتصف حتى يبقى على خطّ العنوان فوقه.
   ========================================================================== */
/* في المنتصف لا على جهة القراءة: الصفوف صناديق مستقلّة لا نصّ متّصل،
   فتوسيطها يقرأ أنظف من محاذاتها لحافّة واحدة. */
.tem-acc,
.tem-acc--cards{ max-width:880px; margin-inline:auto; }

.tem-acc--cards .tem-acc__item > summary{ padding:1rem 1.15rem; gap:.85rem; }
.tem-acc__icon{ width:40px; height:40px; }
.tem-acc__icon svg{ width:18px; height:18px; }
.tem-acc--cards .tem-acc__body{ padding:0 1.15rem 1.2rem; }
.tem-acc__body{ max-width:68ch; }

@media (max-width:960px){
  .tem-acc,
  .tem-acc--cards{ max-width:none; }
}

/* الشارة حين تقف وحدها في صفحة: صفّ محصور لا شريط ممتدّ. */
.tem-gpbadge-wrap--boxed{
  max-width:620px; margin-inline-end:auto;
  border:1px solid var(--tem-light-line); background:#FFFDFB;
  padding:1.1rem 1.3rem; align-items:center;
}
.tem-gpbadge-wrap--boxed .tem-gpbadge{ border:0; background:transparent; padding:0; }
.tem-gpbadge-wrap--boxed .tem-gpbadge:hover{ background:transparent; }
@media (max-width:520px){
  .tem-gpbadge-wrap--boxed{ max-width:none; }
}

/* ==========================================================================
   24) روابط التواصل في الفوتر
   كانت مذكورة في مخطّط الموقع (sameAs) ولا تظهر للزائر.
   ملاحظة: tem.css يفرض `.tem-footer ul{flex-direction:column}` وهي أخصّ من
   `.tem-social` وحدها، فتجعل الأيقونات عمودًا. ولهذا تُكتب القاعدة هنا
   بسابقة `.tem-footer` لتغلبها بالأخصّية لا بـ!important.
   ========================================================================== */
.tem-footer .tem-social{
  list-style:none; margin:.2rem 0 1.4rem; padding:0;
  display:flex; flex-direction:row; flex-wrap:wrap; gap:.5rem;
}
.tem-footer .tem-social li{ margin:0; }
.tem-footer .tem-social a{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--tem-line); color:var(--tem-lead-ink);
  transition:border-color .3s var(--tem-ease), color .3s var(--tem-ease), background .3s var(--tem-ease);
}
.tem-footer .tem-social svg{ width:17px; height:17px; }
.tem-footer .tem-social a:hover{
  border-color:var(--tem-gold); color:var(--tem-gold-lit); background:rgba(203,133,9,.08);
}
@media (max-width:480px){
  .tem-footer .tem-social a{ width:42px; height:42px; }
  .tem-footer .tem-social svg{ width:19px; height:19px; }
}
/* ==========================================================================
   25) خطّ التسعين يومًا
   مسار أفقي بأربع محطّات، يصلها خطّ ذهبي خافت. على الجوّال ينقلب رأسيًّا
   فيصير الخطّ عموديًّا على جهة البداية — بلا تغيير في الترميز.
   ========================================================================== */
.tem-timeline{
  list-style:none; margin:clamp(2rem,4vw,3rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  position:relative;
}
.tem-timeline::before{
  content:""; position:absolute; inset-block-start:5px; inset-inline:0;
  height:1px; background:linear-gradient(to left, transparent, var(--tem-gold) 12%, var(--tem-gold) 88%, transparent);
  opacity:.45;
}
.tem-timeline__step{ position:relative; padding:2.1rem 1.2rem 0 0; padding-inline-end:1.6rem; }
.tem-timeline__step:last-child{ padding-inline-end:0; }
.tem-timeline__dot{
  position:absolute; inset-block-start:0; inset-inline-start:0;
  width:11px; height:11px; background:var(--tem-gold); transform:rotate(45deg);
  transition:transform .4s var(--tem-ease), background .3s var(--tem-ease);
}
.tem-timeline__step:hover .tem-timeline__dot{ transform:rotate(45deg) scale(1.35); background:var(--tem-gold-lit); }
.tem-timeline__when{
  display:block; font-family:var(--tem-label); font-size:.72rem; font-weight:700;
  color:var(--tem-gold-lit); margin-bottom:.55rem; direction:ltr; unicode-bidi:isolate;
}
.tem-timeline__t{
  font-family:var(--tem-display); font-weight:700; font-size:1.08rem;
  color:var(--tem-ivory); margin:0 0 .5rem; line-height:1.5;
}
.tem-timeline__step p{ font-size:.9rem; line-height:1.9; color:var(--tem-lead-ink); margin:0; }

@media (max-width:860px){
  .tem-timeline{ grid-template-columns:1fr; }
  .tem-timeline::before{
    inset-block:8px 0; inset-inline-start:5px; inset-inline-end:auto;
    width:1px; height:auto;
    background:linear-gradient(to bottom, var(--tem-gold), transparent);
  }
  .tem-timeline__step{ padding:0 0 1.8rem 0; padding-inline-start:1.9rem; }
  .tem-timeline__dot{ inset-block-start:6px; }
}

/* ==========================================================================
   26) لوح اللغتين
   نصفان متقابلان بخطّ فاصل ذهبي، وفي المنتصف علامة VS. كل نصف يحمل
   اتّجاهه الصحيح (rtl / ltr) فتظهر الأمثلة كما تُكتب فعلًا.
   ========================================================================== */
.tem-bi{
  display:grid; grid-template-columns:1fr auto 1fr;
  border:1px solid var(--tem-light-line); background:#FFFDFB;
  margin-top:clamp(1.6rem,3vw,2.4rem);
}
.tem-bi__side{ padding:clamp(1.4rem,2.6vw,2.2rem); }
.tem-bi__lang{
  display:block; font-family:var(--tem-label); font-weight:700; font-size:.74rem;
  color:var(--tem-gold-deep); margin-bottom:1.2rem;
}
.tem-bi__label{
  display:block; font-size:.72rem; color:var(--tem-light-mute);
  margin-bottom:.35rem; letter-spacing:.02em;
}
.tem-bi__q{
  margin:0 0 1.2rem; padding:.6rem .9rem;
  background:rgba(203,133,9,.07); border-inline-start:2px solid var(--tem-gold);
  font-size:.98rem; color:var(--tem-cream-ink);
}
.tem-bi__ad{
  margin:0 0 1.2rem; font-size:.95rem; line-height:1.7;
  color:#1a4d8f; text-decoration:underline; text-underline-offset:3px;
}
.tem-bi__note{ margin:0; font-size:.88rem; line-height:1.85; color:var(--tem-light-ink); }

.tem-bi__split{
  width:1px; background:var(--tem-gold); opacity:.5;
  position:relative; display:grid; place-items:center;
}
.tem-bi__split span{
  position:absolute; background:#FFFDFB; padding:.4rem 0;
  font-family:var(--tem-label); font-size:.7rem; font-weight:700;
  color:var(--tem-gold-deep); writing-mode:horizontal-tb;
}
@media (max-width:760px){
  .tem-bi{ grid-template-columns:1fr; }
  .tem-bi__split{ width:auto; height:1px; }
  .tem-bi__split span{ padding:0 .7rem; }
}

/* ==========================================================================
   27) لوح المقارنة
   عمودان: الشائع والبديل. الفرق بينهما في العلامة قبل كل بند — دائرة
   مفرّغة على جهة، ومعيّن ذهبي مصمت على الأخرى — لا في لون صارخ.
   ========================================================================== */
.tem-cmp{
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--tem-light-line); background:#FFFDFB;
}
.tem-cmp__col{ padding:clamp(1.5rem,2.8vw,2.3rem); }
.tem-cmp__col--good{ border-inline-start:1px solid var(--tem-light-line); background:rgba(203,133,9,.045); }
.tem-cmp__label{
  display:block; font-family:var(--tem-label); font-weight:700; font-size:.74rem;
  color:var(--tem-light-mute); margin-bottom:.7rem;
}
.tem-cmp__col--good .tem-cmp__label{ color:var(--tem-gold-deep); }
.tem-cmp__t{
  font-family:var(--tem-display); font-weight:700; font-size:1.12rem;
  color:var(--tem-cream-ink); margin:0 0 1.2rem; line-height:1.55;
}
.tem-cmp ul{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.tem-cmp li{
  position:relative; padding-inline-start:1.5rem;
  font-size:.94rem; line-height:1.85; color:var(--tem-light-ink);
}
.tem-cmp__col--bad li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.62em;
  width:8px; height:8px; border-radius:50%;
  border:1px solid var(--tem-light-mute);
}
.tem-cmp__col--good li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.66em;
  width:8px; height:8px; background:var(--tem-gold); transform:rotate(45deg);
}
.tem-cmp__note{
  margin:1.2rem 0 0; font-size:.88rem; line-height:1.85;
  color:var(--tem-light-mute); max-width:64ch;
}
@media (max-width:760px){
  .tem-cmp{ grid-template-columns:1fr; }
  .tem-cmp__col--good{ border-inline-start:0; border-block-start:1px solid var(--tem-light-line); }
}

/* ==========================================================================
   28) شريط العملاء — ساكن لا متحرّك
   صفّ خلايا بخطوط شعرة، كل خلية اسم وسطر تعريف. الخلية الأخيرة مدخل
   إلى الصفحة الكاملة، ولها لون الذهب لتُقرأ كإجراء لا كاسم.
   ========================================================================== */
.tem-clients__head{ margin-bottom:clamp(1.4rem,2.6vw,2rem); }
.tem-clients{
  display:grid; grid-template-columns:repeat(6,1fr);
  border:1px solid var(--tem-light-line); background:#FFFDFB;
}
.tem-clients .tem-client{
  padding:1.2rem 1rem; text-decoration:none; display:grid; gap:.35rem; align-content:center;
  border-inline-end:1px solid var(--tem-light-line);
  transition:background .3s var(--tem-ease);
}
.tem-clients .tem-client:last-child{ border-inline-end:0; }
.tem-clients .tem-client:hover{ background:rgba(203,133,9,.06); }
.tem-client__n{
  font-family:var(--tem-display); font-weight:700; font-size:.98rem;
  color:var(--tem-cream-ink); line-height:1.45;
}
.tem-client__m{ font-size:.78rem; color:var(--tem-light-mute); line-height:1.6; }
.tem-client--more .tem-client__n{ color:var(--tem-gold-deep); }
.tem-client--more .tem-client__m{ color:var(--tem-gold-deep); }

@media (max-width:1100px){ .tem-clients{ grid-template-columns:repeat(3,1fr); }
  .tem-clients .tem-client:nth-child(3n){ border-inline-end:0; }
  .tem-clients .tem-client:nth-child(n+4){ border-block-start:1px solid var(--tem-light-line); } }
@media (max-width:620px){ .tem-clients{ grid-template-columns:1fr 1fr; }
  .tem-clients .tem-client{ border-inline-end:1px solid var(--tem-light-line); }
  .tem-clients .tem-client:nth-child(2n){ border-inline-end:0; }
  .tem-clients .tem-client:nth-child(n+3){ border-block-start:1px solid var(--tem-light-line); } }

/* ==========================================================================
   29) شريط العملاء — لوح موقَّع
   العنوان محصور بين خطّي شعرة، والأسماء يفصلها خطّ رأسي لا معيّن، وتحت
   كل اسم قطاعه بحروف صغيرة. وخطّ ذهبي متدرّج أعلى اللوح يربطه بالبطل.
   ========================================================================== */
.tem-clientrail{
  position:relative;
  background:var(--tem-ink);
  border-block-end:1px solid var(--tem-line);
  padding-block:clamp(1.7rem,3.4vw,2.6rem);
}
.tem-clientrail::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:1px;
  background:linear-gradient(to left, transparent, var(--tem-gold) 18%, var(--tem-gold) 82%, transparent);
  opacity:.5;
}

/* العنوان بين خطّين */
.tem-clientrail__k{
  display:flex; align-items:center; gap:1rem;
  margin:0 0 clamp(1.2rem,2.4vw,1.7rem);
  color:var(--tem-gold-lit);
}
.tem-clientrail__k::before,
.tem-clientrail__k::after{
  content:""; flex:1; height:1px; background:var(--tem-line);
}
.tem-clientrail__k span{
  font-family:var(--tem-label); font-size:.7rem; font-weight:700;
  letter-spacing:.14em; white-space:nowrap;
}

/* الصفّ: خلايا يفصلها خطّ رأسي */
.tem-clientrail__row{
  display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center;
}
.tem-clientrail__c{
  position:relative; text-decoration:none;
  display:grid; gap:.3rem; align-content:center; justify-items:center;
  padding:.2rem clamp(1rem,2.4vw,2.1rem);
  transition:transform .4s var(--tem-ease);
}
.tem-clientrail__c + .tem-clientrail__c::before{
  content:""; position:absolute; inset-inline-start:0; inset-block:.15rem;
  width:1px; background:var(--tem-line);
}
.tem-clientrail__c:hover{ transform:translateY(-2px); }
.tem-clientrail__n{
  font-family:var(--tem-display); font-weight:500;
  font-size:clamp(1rem,1.6vw,1.28rem); line-height:1.4;
  color:var(--tem-ivory); white-space:nowrap;
  transition:color .35s var(--tem-ease);
}
.tem-clientrail__c:hover .tem-clientrail__n{ color:var(--tem-gold-lit); }
.tem-clientrail__s{
  font-family:var(--tem-label); font-size:.64rem; font-weight:700;
  letter-spacing:.06em; color:rgba(239,240,234,.42);
  transition:color .35s var(--tem-ease);
}
.tem-clientrail__c:hover .tem-clientrail__s{ color:var(--tem-gold); }

/* الخليّة الأخيرة: مدخل لا اسم */
.tem-clientrail__c--more .tem-clientrail__n{
  font-family:var(--tem-label); font-weight:700; font-size:.88rem; color:var(--tem-gold);
}
.tem-clientrail__c--more .tem-clientrail__n::after{ content:" ←"; }

@media (max-width:820px){
  .tem-clientrail__row{ gap:.4rem 0; }
  .tem-clientrail__c{ padding-inline:clamp(.7rem,3vw,1.2rem); }
}
@media (max-width:560px){
  .tem-clientrail__k::before, .tem-clientrail__k::after{ display:none; }
  .tem-clientrail__k{ justify-content:center; }
  .tem-clientrail__c{ padding:.5rem .9rem; }
  .tem-clientrail__c + .tem-clientrail__c::before{ display:none; }
}

/* لوح تأكيد الإرسال — يحلّ محلّ التحويل إلى واتساب. */
.te-lf-done{
  border:1px solid var(--tem-gold); background:rgba(203,133,9,.07);
  padding:1.5rem 1.6rem; text-align:center;
}
.te-lf-done__m{
  width:44px; height:44px; margin:0 auto .9rem; display:grid; place-items:center;
  border:1px solid var(--tem-gold); color:var(--tem-gold-deep);
}
.te-lf-done__m svg{ width:22px; height:22px; }
.te-lf-done__t{
  font-family:var(--tem-display); font-weight:700; font-size:1.25rem;
  color:var(--tem-cream-ink); margin:0 0 .6rem;
}
.te-lf-done__d{
  font-size:.94rem; line-height:1.95; color:var(--tem-light-ink);
  margin:0 auto 1.1rem; max-width:44ch;
}
.te-lf-done__w{
  display:inline-block; font-family:var(--tem-label); font-weight:700; font-size:.86rem;
  color:var(--tem-gold-deep); text-decoration:none;
  border:1px solid var(--tem-gold); padding:.7rem 1.3rem;
  transition:background .3s var(--tem-ease);
}
.te-lf-done__w:hover{ background:rgba(203,133,9,.12); }

/* رسالة حدّ الإرسال — تظهر عند تجاوز الحدّ في الساعة. */
.te-lf-slow{
  border:1px solid #D9A93F; background:rgba(217,169,63,.1);
  padding:.95rem 1.15rem; margin:0 0 1rem;
  font-size:.9rem; line-height:1.85; color:var(--tem-cream-ink);
}


/* ==========================================================================
   30) Language switch — footer
   The pair map sends the reader to the same page in the other language, so
   the control has to look like a destination rather than a flag icon: the
   code, the language name, and what will actually happen when it is clicked.
   ========================================================================== */
.tem-langswitch{
  display:inline-flex; align-items:center; gap:.75rem;
  margin:0 0 1.6rem; padding:.6rem .9rem;
  border:1px solid var(--tem-line); text-decoration:none;
  transition:border-color .3s var(--tem-ease), background .3s var(--tem-ease);
}
.tem-langswitch:hover{ border-color:var(--tem-gold); background:rgba(203,133,9,.07); }
.tem-langswitch__code{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  border:1px solid var(--tem-gold); color:var(--tem-gold);
  font-family:var(--tem-label); font-weight:700; font-size:.76rem; line-height:1;
}
.tem-langswitch__t{
  font-family:var(--tem-label); font-size:.92rem; color:var(--tem-ivory); line-height:1.35;
}
.tem-langswitch__t em{
  display:block; font-style:normal; font-size:.74rem; color:var(--tem-muted); margin-top:.2rem;
}
.tem-langswitch:hover .tem-langswitch__t{ color:var(--tem-gold-lit); }


/* ==========================================================================
   31) Language switch — header
   The footer control was not enough: a reader arriving on an inner page
   looks for the language in the header, and finding nothing there assumes
   the other edition does not exist. It sits before the primary button so
   it reads as navigation rather than as a second call to action.
   ========================================================================== */
.tem-headlang{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .8rem; margin-inline-end:.7rem;
  border:1px solid var(--tem-line-strong);
  text-decoration:none; white-space:nowrap;
  transition:border-color .3s var(--tem-ease), color .3s var(--tem-ease);
}
.tem-headlang:hover{ border-color:var(--tem-gold); }
.tem-headlang__c{
  font-family:var(--tem-label); font-weight:500; font-size:.72rem;
  letter-spacing:.08em; color:var(--tem-gold);
}
.tem-headlang__n{
  font-family:var(--tem-label); font-size:.72rem;
  letter-spacing:var(--tem-track-label); text-transform:uppercase;
  color:var(--tem-ivory);
}
.tem-headlang:hover .tem-headlang__n{ color:var(--tem-gold); }

/* The header actions collapse on tablet, and the mobile panel carries its
   own link — a duplicate here would sit beside the burger and crowd it. */
@media (max-width:1080px){
  .tem-headlang{ display:none; }
}

/* The mobile panel's own language link — shown only where the header one is hidden. */
.tem-nav__lang{
  display:none;
  margin-block-start:1.2rem; padding:.85rem 1rem;
  border:1px solid var(--tem-line); text-align:center;
  font-family:var(--tem-label); font-size:.82rem;
  letter-spacing:var(--tem-track-label); text-transform:uppercase;
  color:var(--tem-gold-lit);
}
@media (max-width:1080px){
  .tem-nav__lang{ display:block; }
}


/* ==========================================================================
   32) Header actions row — alignment and density
   --------------------------------------------------------------------------
   .tem-header__actions carried no rules at all: its children stacked by
   default flow, which is why the language switch floated above the bar
   instead of sitting beside the button.

   The nav also outgrew the bar once the language control was added — CASE
   STUDIES wrapped to a second line. Rather than removing items, the row
   tightens: slightly smaller labels and narrower gaps between 1081px and
   1400px, returning to full size above that.
   ========================================================================== */
.tem-header__actions{
  display:flex; align-items:center; gap:.6rem; flex:none;
}
.tem-header__actions .tem-btn{ padding-block:.85rem; }

/* The nav itself: allow it to shrink before the actions do, and never wrap. */
.tem-header .tem-nav{ min-width:0; }
.tem-header .tem-nav > ul{ flex-wrap:nowrap; }
.tem-header .tem-nav > ul > li > a{ white-space:nowrap; }

@media (min-width:1081px) and (max-width:1400px){
  .tem-header .tem-nav > ul{ gap:1.35rem; }
  .tem-header .tem-nav > ul > li > a{ font-size:.66rem; letter-spacing:.16em; }
  .tem-headlang{ padding:.45rem .65rem; margin-inline-end:.45rem; }
  .tem-headlang__n{ font-size:.66rem; letter-spacing:.14em; }
  .tem-header__cta{ padding-inline:1.3rem; font-size:.68rem; letter-spacing:.14em; }
  .tem-logo__word{ font-size:1.24rem; }
}

@media (min-width:1081px) and (max-width:1240px){
  .tem-header .tem-nav > ul{ gap:1rem; }
  .tem-header .tem-nav > ul > li > a{ font-size:.62rem; letter-spacing:.12em; }
  .tem-headlang__n{ display:none; }   /* the code alone is enough at this width */
  .tem-logo__partner{ display:none; }
}