/* =============================================================
   ANDALOUS — 03. Sections
   كل قسم له بادئة صنف خاصة به لمنع تعارض الـSpecificity.
   ============================================================= */

.and-main {
  display: block;
}

/* شريط داكن — يُصرف بحساب في ثلاثة مواضع فقط */
.and-dark {
  background: var(--c-ink);
  color: var(--fg-on-dark);
}

.and-dusk {
  background: var(--c-dusk-deep);
  color: var(--fg-on-dark);
}

.and-band {
  padding-block: var(--band-y);
}

.and-band--lg {
  padding-block: var(--band-y-lg);
}

/* -------------------------------------------------------------
   طيّ المسافة بين قسمين متتاليين بالخلفية نفسها.
   بدون هذه القاعدة يجتمع هامش أسفل القسم الأول مع هامش أعلى
   الثاني فتتضاعف المسافة ويظهر فراغ كبير بلا سبب.
   الحدّ الفاصل بين فاتح وداكن يحتفظ بهامشه كاملًا لأنه
   يقرأ كانتقال مقصود.
   ------------------------------------------------------------- */
[data-tone='light'] + [data-tone='light'],
[data-tone='dark'] + [data-tone='dark'],
.and-band + .and-band {
  padding-block-start: 0;
}

/* ترويسة فصل: رقم اللوحة + الاسم */
.and-chap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s4) var(--s6);
  padding-block-end: var(--s5);
  margin-block-end: var(--s7);
  border-block-end: 1px solid var(--rule);
}

.and-on-dark .and-chap,
.and-dark .and-chap,
.and-dusk .and-chap {
  border-block-end-color: var(--rule-on-dark);
}

/* ‏.and-chap يرسم خطًّا في أسفله، فلا يبدأ العنصر التالي بخطّ ثانٍ
   موازٍ له على بعد سنتيمتر — يقرأ كخطأ طباعي لا كتقسيم. */
.and-chap + .and-svc__group,
.and-chap + .and-idx,
.and-chap + .and-meth__list > .and-meth__step:first-child,
.and-chap + .and-phil > .and-phil__i:first-child {
  border-block-start: 0;
}

.and-chap + .and-svc__group {
  padding-block-start: 0;
}

@media (min-width: 780px) {
  /* الشبكة عمودان: أوّل عنصرين في الصف نفسه */
  .and-chap + .and-phil > .and-phil__i:nth-child(2) {
    border-block-start: 0;
  }
}

.and-chap__title {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: var(--lh-snug);
  margin: 0;
}

.and-chap__note {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  max-inline-size: 40ch;
  margin-inline-start: auto;
}

.and-dark .and-chap__note,
.and-dusk .and-chap__note {
  color: var(--fg-on-dark-muted);
}

/* =============================================================
   A-01  الهيرو
   ============================================================= */

.and-hero {
  position: relative;
  min-block-size: min(76svh, 660px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-ink);
  color: var(--fg-on-dark);
  isolation: isolate;
}

@media (min-width: 768px) {
  .and-hero {
    min-block-size: min(90svh, 900px);
  }
}

.and-hero__media,
.and-hero__media img,
.and-hero__media video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
}

/* حجاب اتجاهي — لا طبقة سوداء ثقيلة تخفي المشروع */
.and-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to left, rgba(20, 23, 26, 0.92) 0%, rgba(20, 23, 26, 0.78) 22%,
      rgba(20, 23, 26, 0.42) 48%, rgba(20, 23, 26, 0.08) 74%,
      rgba(20, 23, 26, 0) 100%),
    linear-gradient(to top, rgba(20, 23, 26, 0.7) 0%, rgba(20, 23, 26, 0) 46%);
}

/* على الهاتف يشغل النص معظم ارتفاع الهيرو، فالحجاب رأسي وأقوى —
   يبقى المشروع ظاهرًا خلفه لكن لا يُقرأ النص فوق جدار أبيض ساطع. */
@media (max-width: 767px) {
  .and-hero::before {
    background: linear-gradient(to top, rgba(20, 23, 26, 0.94) 0%,
      rgba(20, 23, 26, 0.84) 28%, rgba(20, 23, 26, 0.66) 58%,
      rgba(20, 23, 26, 0.46) 100%);
  }
}

.and-hero__in {
  inline-size: 100%;
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding: var(--gutter);
  padding-block-start: calc(var(--header-h) + var(--s7));
  /* الحدّ الأدنى يترك مساحة لوحدة التحكّم بالفيديو أسفل اليسار
     (إزاحة var(--s5) + ارتفاع 3rem + فاصل var(--s4)) */
  padding-block-end: clamp(calc(var(--s5) + 3rem + var(--s4)), 8vh, var(--s9));
  padding-inline-start: max(var(--gutter), var(--rail));
}

.and-hero__id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-block-end: var(--s6);
  color: var(--c-sand);
}

.and-hero__id b {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.3em;
  color: var(--fg-on-dark);
}

.and-hero__id span {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}

.and-hero__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-4xl);
  line-height: 1.06;
  max-inline-size: 14ch;
  margin: 0;
  text-wrap: balance;
}

.and-hero__sub {
  margin-block-start: var(--s5);
  font-size: var(--fs-lg);
  line-height: 1.65;
  max-inline-size: 40ch;
  color: #ded7cc;
}

.and-hero__acts {
  margin-block-start: var(--s7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

/* لا زرّان ضيّقان جنبًا إلى جنب عند ضيق المساحة */
@media (max-width: 400px) {
  .and-hero__acts {
    flex-direction: column;
    align-items: stretch;
  }
  .and-hero__acts .and-btn {
    inline-size: 100%;
  }
}

/* إشارة بصرية مرتبطة بعنصر التوقيع.
   الحاوية بكتابة أفقية عادية حتى تُحسب مواضعها المنطقية كما هو متوقّع؛
   النص وحده رأسي. */
.and-hero__cue {
  position: absolute;
  inset-block-end: var(--s6);
  inset-inline: 0;
  margin-inline: auto;
  inline-size: max-content;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  color: var(--c-sand);
}

@media (min-width: 900px) {
  .and-hero__cue {
    display: flex;
  }
}

.and-hero__cue b {
  writing-mode: vertical-rl;
  direction: ltr;
  font-family: var(--ff-mono);
  font-weight: 400;
  font-size: var(--fs-mono);
  letter-spacing: 0.2em;
}

.and-hero__cue::after {
  content: '';
  inline-size: 1px;
  block-size: 3.5rem;
  background: linear-gradient(to bottom, var(--c-gold), transparent);
  animation: and-cue 2.6s var(--e-inout) infinite;
}

@keyframes and-cue {
  0%,
  100% {
    opacity: 0.25;
    transform: scaleY(0.55);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* =============================================================
   عناصر التحكّم بالفيديو — زرّ صوت وتشغيل احترافيان
   ============================================================= */

.and-vc {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(20, 23, 26, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(243, 238, 230, 0.22);
  padding: 3px;
}

.and-vc__btn {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  display: grid;
  place-items: center;
  color: var(--fg-on-dark);
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}

.and-vc__btn:hover {
  background: rgba(243, 238, 230, 0.14);
  color: var(--c-light-soft);
}

.and-vc__btn svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
}

/* تُخفى الأيقونة غير الفعّالة حسب الحالة */
.and-vc__btn [data-when] {
  display: none;
}

.and-vc__btn[data-state='playing'] [data-when='playing'],
.and-vc__btn[data-state='paused'] [data-when='paused'],
.and-vc__btn[data-state='muted'] [data-when='muted'],
.and-vc__btn[data-state='unmuted'] [data-when='unmuted'] {
  display: block;
}

/* مؤشّر صوت صغير يوضّح أن الصوت شغّال */
.and-vc__eq {
  display: none;
  align-items: flex-end;
  gap: 2px;
  block-size: 0.85rem;
  padding-inline: var(--s2);
}

.and-vc__btn[data-state='unmuted'] ~ .and-vc__eq {
  display: flex;
}

.and-vc__eq i {
  inline-size: 2px;
  background: var(--c-light-soft);
  animation: and-eq 900ms var(--e-inout) infinite;
}

/* لا ينبض المؤشّر إلا والفيديو يعمل فعلًا */
.and-vc:not(.is-playing) .and-vc__eq i {
  animation-play-state: paused;
}

.and-vc__eq i:nth-child(1) { block-size: 40%; animation-delay: 0ms; }
.and-vc__eq i:nth-child(2) { block-size: 90%; animation-delay: 160ms; }
.and-vc__eq i:nth-child(3) { block-size: 60%; animation-delay: 320ms; }

@keyframes and-eq {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .and-vc__eq i { animation: none; }
  .and-hero__cue::after { animation: none; opacity: 0.7; }
}

/* وحدة التحكّم على الحافة المقابلة لعمود النص (اليسار في RTL)
   حتى لا تزاحم أزرار الهيرو */
.and-hero__vc {
  position: absolute;
  inset-block-end: var(--s5);
  inset-inline-end: var(--gutter);
  z-index: 2;
}

/* =============================================================
   A-02  مدخل إلى المكتب
   ============================================================= */

.and-entry {
  padding-block: var(--band-y-lg);
  position: relative;
}

.and-entry__grid {
  display: grid;
  gap: var(--s7);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 860px) {
  .and-entry__grid {
    grid-template-columns: auto 1fr;
    gap: clamp(var(--s7), 6vw, var(--s10));
  }
}

.and-entry__side {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

@media (min-width: 860px) {
  .and-entry__side {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--s6));
  }
}

.and-entry__text {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 0.95rem + 1.35vw, 2.1rem);
  line-height: 1.55;
  max-inline-size: 26ch;
  margin: 0;
}

/* الجملة الأولى بلون الحبر الكامل والبقية أهدأ — تدرّج قراءة */
.and-entry__text em {
  font-style: normal;
  color: var(--fg-muted);
}

.and-entry__meta {
  margin-block-start: var(--s7);
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding-block-start: var(--s6);
  border-block-start: 1px solid var(--rule);
}

.and-entry__cell dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-sand-deep);
  margin-block-end: var(--s2);
}

.and-entry__cell dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* صورة مقرّ المكتب — شريط عريض يغلق فصل التعريف بمكان حقيقي */
.and-entry__place {
  grid-column: 1 / -1;
  margin-block-start: var(--s8);
  margin: 0;
}

.and-entry__place img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1109 / 828;
  object-fit: cover;
  background: var(--c-stone-2);
}

@media (min-width: 700px) {
  .and-entry__place img {
    aspect-ratio: 21 / 9;
    object-position: 50% 62%;
  }
}

.and-entry__place figcaption {
  margin-block-start: var(--s3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  align-items: baseline;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  color: var(--c-sand-deep);
}

/* =============================================================
   A-03  المشاريع الرئيسية — حضور غير متماثل
   ============================================================= */

.and-feat {
  padding-block: var(--band-y-lg);
}

/* --- المشروع الأول: شريط عريض كامل --- */
.and-feat__lead {
  position: relative;
  display: block;
  margin-block-end: var(--s9);
  isolation: isolate;
}

.and-feat__frame {
  position: relative;
  overflow: hidden;
  background: var(--c-ink-2);
  aspect-ratio: 16 / 11;
}

@media (min-width: 768px) {
  .and-feat__frame {
    aspect-ratio: 2.05 / 1;
  }
}

.and-feat__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 900ms var(--e-out), filter 900ms var(--e-out);
}

.and-feat__lead:hover .and-feat__img {
  transform: scale(1.055);
}

.and-feat__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 23, 26, 0.82) 0%,
    rgba(20, 23, 26, 0.28) 38%, rgba(20, 23, 26, 0) 68%);
}

.and-feat__cap {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 1;
  padding: clamp(var(--s5), 3.5vw, var(--s8));
  color: var(--fg-on-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s4) var(--s6);
}

.and-feat__names {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.and-feat__ar {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: 1.15;
}

.and-feat__en {
  font-size: var(--fs-xs);
  letter-spacing: 0.28em;
  color: var(--c-sand);
  text-transform: uppercase;
}

.and-feat__go {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--fs-sm);
  border-block-end: 1px solid rgba(243, 238, 230, 0.45);
  padding-block-end: var(--s2);
  transition: border-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}

.and-feat__lead:hover .and-feat__go,
.and-feat__pair:hover .and-feat__go {
  color: var(--c-light-soft);
  border-block-end-color: var(--c-light-soft);
}

.and-feat__go svg {
  inline-size: 1.05em;
  block-size: 1.05em;
  transition: transform var(--t-base) var(--e-out);
}

.and-feat__lead:hover .and-feat__go svg {
  transform: translateX(-0.3em);
}

/* --- المشروع الثاني: لوح طولي مُزاح يحترم نسبة 0.62 --- */
.and-feat__pair {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 860px) {
  .and-feat__pair {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(var(--s7), 5vw, var(--s10));
    /* النص يرتكز على قاعدة اللوح الطولي بدل أن يطفو في منتصفه،
       فتُقرأ الإزاحة كقرار تكوين لا كفراغ زائد */
    align-items: end;
  }

  .and-feat__aside {
    padding-block-end: var(--s6);
  }
}

.and-feat__plate {
  position: relative;
  overflow: hidden;
  background: var(--c-ink-2);
  aspect-ratio: 1179 / 1902;
  max-block-size: 78svh;
  order: 2;
}

@media (min-width: 860px) {
  .and-feat__plate {
    order: 0;
  }
}

.and-feat__plate img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 900ms var(--e-out);
}

.and-feat__pair:hover .and-feat__plate img {
  transform: scale(1.04);
}

.and-feat__aside {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  align-items: flex-start;
}

.and-feat__aside .and-feat__ar {
  color: var(--fg);
  font-size: var(--fs-3xl);
}

.and-feat__aside .and-feat__en {
  color: var(--c-sand);
}

.and-feat__aside .and-feat__go {
  margin-inline-start: 0;
  border-block-end-color: var(--rule);
  color: var(--fg);
}

.and-feat__pair:hover .and-feat__aside .and-feat__go {
  color: var(--c-light-soft);
  border-block-end-color: var(--c-light);
}

.and-feat__desc {
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--fg-muted);
  max-inline-size: 42ch;
}

/* =============================================================
   A-04  تسلسل التصميم المعماري
   ============================================================= */

.and-seq {
  padding-block: var(--band-y-lg);
}

.and-seq__hero {
  position: relative;
  overflow: hidden;
  background: var(--c-ink-2);
  aspect-ratio: 1500 / 896;
  margin-block-end: var(--s6);
}

.and-seq__hero img,
.and-seq__cell img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.and-seq__row {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .and-seq__row {
    grid-template-columns: 1.34fr 1fr;
    gap: var(--s5);
  }
}

.and-seq__cell {
  position: relative;
  overflow: hidden;
  background: var(--c-ink-2);
}

.and-seq__cell--wide {
  aspect-ratio: 1500 / 747;
}

.and-seq__cell--tall {
  aspect-ratio: 1200 / 836;
}

.and-seq__foot {
  margin-block-start: var(--s6);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
}

.and-seq__cap {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  max-inline-size: 52ch;
}

/* =============================================================
   A-05  فصل الفيديو — فتحتان في جدار حجري
   ============================================================= */

.and-film {
  padding-block: var(--band-y-lg);
  position: relative;
  overflow: hidden;
}

/* نسيج جدار خفيف يوحي بمداميك الحجر — لا يعتمد على صورة */
.and-film::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(243, 238, 230, 0.055) 0 1px,
    transparent 1px 74px
  );
}

.and-film__wall {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
  justify-items: center;
}

@media (min-width: 700px) {
  .and-film__wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(var(--s5), 4vw, var(--s8));
  }
}

.and-film__ap {
  inline-size: 100%;
  max-inline-size: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

@media (min-width: 700px) {
  /* إزاحة رأسية تكسر التماثل — الفتحتان ليستا على منسوب واحد */
  .and-film__ap:nth-child(2) {
    margin-block-start: clamp(var(--s6), 6vw, var(--s9));
  }
}

/* الفتحة نفسها: نسبة 9:16 الأصلية محفوظة تمامًا */
.and-film__hole {
  position: relative;
  aspect-ratio: 576 / 1024;
  overflow: hidden;
  background: #0e1114;
  /* عتبة حجرية حول الفتحة */
  box-shadow: 0 0 0 1px rgba(243, 238, 230, 0.14),
    0 30px 60px -30px rgba(0, 0, 0, 0.75);
}

.and-film__hole video,
.and-film__hole img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.and-film__vc {
  position: absolute;
  inset-block-end: var(--s3);
  inset-inline-start: var(--s3);
  z-index: 2;
}

.and-film__rail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--rule-on-dark);
}

.and-film__name {
  font-size: var(--fs-sm);
  font-weight: 500;
}

.and-film__en {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  color: var(--fg-on-dark-muted);
}

.and-film__foot {
  margin-block-start: var(--s9);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  align-items: center;
  justify-content: space-between;
}

/* =============================================================
   A-06  التصميم الداخلي — تسلسل تحريري
   ============================================================= */

.and-int {
  padding-block: var(--band-y-lg);
}

.and-int__seq {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 780px) {
  .and-int__seq {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--s5);
  }
}

.and-int__f {
  position: relative;
  overflow: hidden;
  background: var(--c-stone-2);
  aspect-ratio: 1174 / 1600;
}

.and-int__f img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 900ms var(--e-out);
}

.and-int__f:hover img {
  transform: scale(1.035);
}

/* البطل: أقوى صورة، بحجم مضاعف */
.and-int__f--hero {
  grid-column: span 2;
}

@media (min-width: 780px) {
  .and-int__f--hero {
    grid-column: span 3;
    grid-row: span 2;
  }
}

/* التفاصيل */
@media (min-width: 780px) {
  .and-int__f--d {
    grid-column: span 3;
    aspect-ratio: 3 / 2;
  }
}

/* المشاهد الواسعة */
@media (min-width: 780px) {
  .and-int__f--w {
    grid-column: span 2;
    aspect-ratio: 792 / 1080;
  }
}

.and-int__foot {
  margin-block-start: var(--s7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  align-items: center;
  justify-content: space-between;
}

/* =============================================================
   A-07  فهرس الخدمات — لا بطاقات متساوية ولا أيقونات جاهزة
   ============================================================= */

.and-svc {
  padding-block: var(--band-y-lg);
}

.and-svc__group {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
  padding-block: var(--s7);
  border-block-start: 1px solid var(--rule);
}

@media (min-width: 900px) {
  .and-svc__group {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(var(--s6), 4vw, var(--s9));
    align-items: start;
  }
}

/* :last-of-type وليس :last-child — الصفحة الرئيسية تُلحق فقرة رابط
   بعد آخر مجموعة داخل نفس الحاوية فيبطل :last-child */
.and-svc__group:last-of-type {
  border-block-end: 1px solid var(--rule);
}

.and-svc__head {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

@media (min-width: 900px) {
  .and-svc__head {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--s5));
  }
}

.and-svc__num {
  font-family: var(--ff-mono);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 300;
  line-height: 1;
  color: var(--c-sand-deep);
}

.and-svc__title {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-weight: 600;
}

.and-svc__en {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-sand-deep);
}

.and-svc__intro {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  max-inline-size: 34ch;
}

/* صورة مشروع حقيقي ترسو عليها كل مجموعة */
.and-svc__anchor {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--c-stone-2);
  margin-block-start: var(--s3);
}

.and-svc__anchor img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 800ms var(--e-out);
}

.and-svc__anchor:hover img {
  transform: scale(1.05);
}

.and-svc__anchor figcaption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--s3) var(--s4);
  background: linear-gradient(to top, rgba(20, 23, 26, 0.8), transparent);
  color: var(--fg-on-dark);
  font-size: var(--fs-xs);
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.and-svc__list {
  display: flex;
  flex-direction: column;
}

.and-svc__row {
  display: grid;
  gap: var(--s2) var(--s5);
  grid-template-columns: auto 1fr;
  align-items: baseline;
  padding-block: var(--s5);
  border-block-end: 1px solid var(--rule-soft);
}

.and-svc__row:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.and-svc__idx {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  color: var(--fg-muted);
  letter-spacing: 0.1em;
}

.and-svc__name {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.4;
}

.and-svc__note {
  grid-column: 2;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  max-inline-size: 56ch;
}

/* =============================================================
   A-08  المهندس — لوح صورة صغير داخل حقل طباعي واسع
   ============================================================= */

.and-arch {
  padding-block: var(--band-y-lg);
}

.and-arch__grid {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 760px) {
  .and-arch__grid {
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(var(--s6), 5vw, var(--s9));
  }
}

/* لوح صورة بعتبة حجرية — تكوين تحريري محترم، لا صورة موظّف دائرية */
.and-arch__plate {
  inline-size: clamp(190px, 25vw, 300px);
  flex: none;
  padding: var(--s3);
  background: var(--c-stone-2);
  border: 1px solid var(--rule);
}

.and-arch__plate img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.02);
}

.and-arch__plate figcaption {
  margin-block-start: var(--s3);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  color: var(--c-sand-deep);
  text-align: center;
}

.and-arch__body {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.and-arch__name {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.2;
}

.and-arch__role {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-sand-deep);
}

.and-arch__bio {
  font-size: var(--fs-lg);
  line-height: 1.75;
  max-inline-size: 46ch;
  margin-block-start: var(--s3);
}

/* =============================================================
   منهجية العمل — مبنية على فكرة طبقات المخطط
   ============================================================= */

.and-meth {
  padding-block: var(--band-y-lg);
}

.and-meth__list {
  display: grid;
  gap: 0;
  counter-reset: none;
}

.and-meth__step {
  display: grid;
  gap: var(--s3) var(--s6);
  grid-template-columns: auto 1fr;
  align-items: start;
  padding-block: var(--s6);
  border-block-start: 1px solid var(--rule);
  position: relative;
}

.and-meth__step:last-child {
  border-block-end: 1px solid var(--rule);
}

.and-on-dark .and-meth__step,
.and-dark .and-meth__step,
.and-dusk .and-meth__step {
  border-color: var(--rule-on-dark);
}

.and-meth__num {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  color: var(--c-light-ink);
  padding-block-start: 0.55em;
  inline-size: 2.5rem;
}

.and-on-dark .and-meth__num,
.and-dark .and-meth__num,
.and-dusk .and-meth__num {
  color: var(--c-light-soft);
}

/* شريط الطبقة — يطول تدريجيًا مع تقدّم المرحلة كطبقات مخطط */
.and-meth__bar {
  grid-column: 1 / -1;
  block-size: 2px;
  background: var(--rule);
  margin-block-start: var(--s4);
  position: relative;
  overflow: hidden;
}

.and-on-dark .and-meth__bar,
.and-dark .and-meth__bar,
.and-dusk .and-meth__bar {
  background: var(--rule-on-dark);
}

.and-meth__bar::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--w, 20%);
  background: var(--c-light);
  opacity: 0.85;
}

.and-meth__title {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.4;
}

.and-meth__text {
  grid-column: 2;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  max-inline-size: 58ch;
}

.and-on-dark .and-meth__text,
.and-dark .and-meth__text,
.and-dusk .and-meth__text {
  color: var(--fg-on-dark-muted);
}

/* =============================================================
   التواصل
   ============================================================= */

.and-cta {
  padding-block: var(--band-y-lg);
}

.and-cta__grid {
  display: grid;
  gap: var(--s7);
  grid-template-columns: 1fr;
}

@media (min-width: 880px) {
  .and-cta__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(var(--s7), 6vw, var(--s10));
  }
}

.and-cta__title {
  font-family: var(--ff-display);
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: 1.15;
  max-inline-size: 16ch;
  text-wrap: balance;
}

.and-cta__text {
  margin-block-start: var(--s5);
  font-size: var(--fs-lg);
  line-height: 1.7;
  max-inline-size: 44ch;
  color: var(--fg-muted);
}

.and-dark .and-cta__text,
.and-dusk .and-cta__text {
  color: var(--fg-on-dark-muted);
}

.and-cta__acts {
  margin-block-start: var(--s7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

@media (max-width: 400px) {
  .and-cta__acts {
    flex-direction: column;
    align-items: stretch;
  }
  .and-cta__acts .and-btn {
    inline-size: 100%;
  }
}

.and-cta__facts {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  padding-block-start: var(--s3);
}

.and-cta__fact dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-sand-deep);
  margin-block-end: var(--s3);
}

.and-dark .and-cta__fact dt,
.and-dusk .and-cta__fact dt {
  color: var(--c-sand);
}

/* خلفية حجرية أعمق لقسم التواصل تفصله عن الفوتر الداكن */
.and-cta--stone {
  background: var(--c-stone-2);
  border-block-start: 1px solid var(--rule);
}

.and-cta__fact dd {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.9;
}

.and-cta__phone {
  font-family: var(--ff-mono);
  font-size: var(--fs-xl);
  letter-spacing: 0.05em;
  direction: ltr;
  display: inline-block;
}

/* =============================================================
   كشف العناصر أثناء التمرير
   ============================================================= */

.and-rise {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 800ms var(--e-out), transform 800ms var(--e-out);
  transition-delay: var(--d, 0ms);
}

.and-rise.is-in {
  opacity: 1;
  transform: none;
}

/* بلا جافاسكربت أو مع تقليل الحركة: كل شيء ظاهر فورًا */
.no-js .and-rise,
.and-rise.is-static {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .and-rise {
    opacity: 1;
    transform: none;
    transition: none;
  }
}