@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800;900&family=Barlow+Condensed:wght@500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&display=swap");
@import url("fontawesome.min.css");

/* =============================================================
   TABLE OF CONTENTS
   1.  Design tokens
   2.  Reset / base
   3.  Global typography
   4.  Buttons
   5.  Shared UI components (reveal, section-head, media-frame,
       frame-offset, check-list, ghost-link, slider-dots, tabs)
   6.  HEADER                 -> <header id="site-header">
   7.  HERO                   -> <section class="hero hero-slider">
   8.  FEATURE ROW             -> <section class="feature-row">
   9.  ABOUT SECTION            -> <section class="section about-section">
   10. SERVICES SECTION         -> <section class="section section-alt services-section">
   11. NUMBERS BAND             -> <section class="numbers-band">
   12. CLIENTS SECTION         -> <section class="section clients-section">
   13. WHERE WE WORK            -> <section class="section sectors-section wwork">
   14. EXECUTE SECTION          -> <section class="section section-alt execute-section">
   15. PROJECTS SHOWCASE        -> <section class="section projects-section">
   16. QUALITY SECTION          -> <section class="section quality-section">
   17. FAQ SECTION              -> <section class="section section-alt faq-section">
   18. CTA BAND                 -> <section class="cta-band">
   19. SITE FOOTER              -> <footer class="site-footer">
   20. Other-page components (not on the homepage, but shared by
       about / services / sectors / projects / delivery / quality /
       contact inner pages)
   21. QUOTE / CONTACT BAND     -> <section class="section quote-section">
   22. ABOUT PAGE COMPONENTS    -> about.html specific sections
   23. SERVICES SIGNATURE CARDS -> services.html specific sections
   24. PROJECTS PAGE UPGRADE    -> projects.html specific (hero
       collage additions + showcase-style directory cards)
   25. QA/QC CONTROLS GRID     -> quality.html "ضوابط QA/QC"
   26. QUALITY INTRO           -> quality.html "الجودة كنظام عمل"
   27. SERVICE DETAIL PAGES    -> service-*.html (generated)
   28. PROJECT DETAIL PAGES    -> project-*.html (generated)
   29. PROJECTS DIRECTORY UX   -> projects.html (hero meta + sticky
       filter toolbar with counts + empty state + notice panel)
   ============================================================= */

/* =============================================================
   1. DESIGN TOKENS
   ============================================================= */
:root {
  color-scheme: light;
  --navy: #071d49;
  --navy-deep: #04112e;
  --red: #c51528;
  --red-dark: #9d101f;
  --ink: #0a1932;
  --muted: #5b687c;
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f5f7;
  --line: #d8dee7;
  --on-dark: #f7f9fc;
  --soft-on-dark: #bdc9dc;
  --shadow: 0 24px 64px rgb(7 29 73 / 0.12);
  --max: 1240px;
  --header-height: 108px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --card-clip: polygon(43px 0,
      100% 0,
      100% calc(100% - 81px),
      calc(100% - 67px) 100%,
      0 100%,
      0 52px);
  --card-clipEn: polygon(0 0,
      calc(100% - 43px) 0,
      100% 52px,
      100% 100%,
      67px 100%,
      0 calc(100% - 81px));
}

/* =============================================================
   2. RESET / BASE
   ============================================================= */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;

  @media (prefers-reduced-motion: reduce) {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Alexandria", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  text-rendering: optimizeLegibility;

  &.menu-open {
    overflow: hidden;
  }
}

html[lang="en"] {
  body {
    font-family: "Manrope", "Segoe UI", Arial, sans-serif;
  }

  /* h1,
  h2,
  h3,
  .brand-word {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  } */
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
.button {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: min(calc(100% - 2rem), var(--max));
  margin-inline: auto;

  @media (max-width: 640px) {
    width: min(calc(100% - 1.25rem), var(--max));
  }
}

/* =============================================================
   3. GLOBAL TYPOGRAPHY
   ============================================================= */
h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: -0.035em;

  [dir="rtl"] & {
    letter-spacing: -0.015em;
    line-height: 1.28;
  }
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* =============================================================
   4. BUTTONS
   ============================================================= */
.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.72rem 1.18rem;
  border: 1px solid transparent;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 220ms var(--ease),
    background 220ms var(--ease),
    color 220ms var(--ease);

  &:hover {
    background: var(--red-dark);
    transform: translateY(-2px);
  }

  &:active {
    transform: translateY(1px) scale(0.99);
  }

  i {
    transition: transform 260ms var(--ease);
  }

  &:hover i {
    transform: translateX(-6px);
  }

  &.button-secondary {
    border-color: var(--navy);
    background: transparent;
    color: var(--navy);

    &:hover {
      background: var(--navy);
      color: #fff;
    }
  }

  @media (max-width: 640px) {
    width: 100%;
  }
}

/* ---- اتجاه الأيقونات ----
   الماركب كله مكتوب RTL-first: السهم لليسار معناه "للأمام". في
   الإنجليزية الاتجاه بينعكس فالأيقونة لازم تتقلب.
   القلب بيتعمل بخاصية scale المستقلة مش بـtransform: scale بتتركّب
   فوق أي transform على نفس العنصر بدل ما تلغيه، فحركة الـhover
   (translateX) بتتعكس معاها تلقائيًا، وما نحتاجش نكرّر قاعدة LTR
   جوّه كل مكوّن زي ما كان بيحصل قبل كده. */
.is-ltr .fa-arrow-left-long,
.is-ltr .fa-arrow-left,
.is-ltr .fa-angle-left,
.is-ltr .fa-chevron-left,
.is-ltr .fa-chevron-right {
  scale: -1 1;
}

/* =============================================================
   5. SHARED UI COMPONENTS
   (used inside more than one page-section below)
   ============================================================= */

/* Accessibility skip-link, lives inside <header> but styled globally */
.skip-link {
  position: fixed;
  inset-inline-start: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--navy);
  color: var(--on-dark);
  transform: translateY(-200%);

  &:focus {
    transform: translateY(0);
  }
}

/* Scroll-reveal utility, applied via [data-reveal] on many sections */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 700ms var(--ease),
    transform 700ms var(--ease);
  transition-delay: calc(var(--reveal-index, 0) * 90ms);

  &.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  &[data-reveal="left"] {
    transform: translateX(-38px);

    [dir="rtl"] & {
      transform: translateX(38px);
    }
  }

  &[data-reveal="right"] {
    transform: translateX(38px);

    [dir="rtl"] & {
      transform: translateX(-38px);
    }
  }

  &[data-reveal="zoom"] {
    transform: scale(0.94);
  }

  &[data-reveal="left"].is-visible,
  &[data-reveal="right"].is-visible,
  &[data-reveal="zoom"].is-visible {
    transform: none;
  }

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

/* Section heading block: eyebrow + h2 (+ optional CTA split) */
.section {
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
  /* data-reveal="left/right" بيزق العناصر 38px جنب قبل ما تظهر،
     فكان بيعمل سكرول أفقي في الموبايل. clip بيقص الأفقي بس
     من غير ما يكسر position: sticky أو ظلال الكروت الرأسية */
  overflow-x: clip;
}

.section-tight {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}

.section-alt {
  background: var(--surface-2);
}

.section-intro {
  max-width: 62ch;
  margin-bottom: clamp(2rem, 5vw, 4rem);
  color: var(--muted);
  font-size: 1.08rem;
}

.section-head {
  margin-bottom: clamp(2rem, 4vw, 3.25rem);

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
    padding: 0.42rem 0.85rem;
    background: var(--surface-2);
    color: var(--navy);

    &::before {
      content: "";
      width: 10px;
      height: 10px;
      background: var(--red);
      transform: scale(0.4);
      transition: transform 520ms var(--ease) 220ms;
    }

    .section-alt & {
      background: var(--paper);
    }
  }

  &.is-visible .eyebrow::before,
  .is-visible & .eyebrow::before {
    transform: scale(1);
  }

  h2 {
    max-width: 20ch;
    margin-bottom: 0;
    font-size: clamp(1.7rem, 2.8vw, 2.55rem);

    @media (max-width: 900px) {
      max-width: none;
    }
  }

  &.section-head-split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    flex-wrap: wrap;

    .button {
      flex: none;
    }
  }
}

/* Media frame: generic cropped image wrapper */
.media-frame {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow);

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Offset framed image with a red block behind it.
   Used in: about-section (.frame-offset) and execute-section
   (.frame-offset.frame-offset-flip) */
.frame-offset {
  position: relative;
  margin: 0;
  padding: 1.75rem 0 0 1.75rem;

  [dir="rtl"] & {
    padding: 1.75rem 1.75rem 0 0;
  }

  @media (max-width: 640px) {
    padding: 1rem 0 0 1rem;

    [dir="rtl"] & {
      padding: 1rem 1rem 0 0;
    }
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 48%;
    height: 46%;
    background: var(--red);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 760ms var(--ease) 160ms;

    [dir="rtl"] & {
      transform-origin: right;
    }

    @media (max-width: 640px) {
      width: 55%;
      height: 50%;
    }
  }

  &.is-visible::before,
  .is-visible &::before {
    transform: scaleX(1);
  }

  img {
    position: relative;
    width: 100%;
    height: auto;
    /* aspect-ratio: 4 / 3; */
    aspect-ratio: 1;
    object-fit: cover;

    @media (max-width: 640px) {
      aspect-ratio: 4 / 3;
    }
  }

  &.frame-offset-flip::before {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
}

/* Bulleted check list. Used in: about-section and execute-section tabs */
.check-list {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;

  li {
    position: relative;
    margin-bottom: 0.75rem;
    padding-inline-start: 1.95rem;
    color: var(--muted);

    i {
      position: absolute;
      inset-inline-start: 0;
      top: 0.15rem;
      color: var(--red);
      font-size: 0.85rem;
    }
  }
}

/* Outlined text link with a trailing arrow. Used in service cards etc. */
.ghost-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.55rem;
  margin-top: auto;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--line);
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    background 220ms var(--ease),
    border-color 220ms var(--ease),
    color 220ms var(--ease);

  i {
    transition: transform 260ms var(--ease);
  }

  &:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
  }
}

/* Small round dot navigation, used by any slider/carousel */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.4rem;

  button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    background: #c3cad6;
    cursor: pointer;
    transition:
      background 220ms var(--ease),
      box-shadow 220ms var(--ease);

    &:hover {
      background: var(--navy);
    }

    &[aria-current="true"] {
      background: var(--red);
      box-shadow:
        0 0 0 3px var(--surface-2),
        0 0 0 4px var(--red);
    }
  }

  .section-alt & button[aria-current="true"] {
    box-shadow:
      0 0 0 3px var(--surface-2),
      0 0 0 4px var(--red);
  }
}

/* Tabs (buttons + panels). Used in execute-section, reusable elsewhere. */
/* شريط التابات — ونفسه شريط تصفية المشروعات في projects.html.
   الاتنين كانوا مكتوبين مرتين بنفس الشيفرون ونفس المقاسات، والنسخة
   التانية كانت ناقصة ٣ حاجات: قلب الشيفرون في الإنجليزية، ترتيب
   z-index بين الأزرار المتراكبة، وحالة الاختيار اللي كانت معمولة
   بـbox-shadow والـclip-path بيقصّها فما كانتش بتبان أصلًا. */
.tab-buttons,
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.65rem;
  gap: 0.5rem;
  margin-bottom: 1.85rem;

  @media (max-width: 640px) {
    gap: 0.55rem;
    row-gap: 0.55rem;
  }
}

.tab-button,
.filter-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  margin-inline-end: -18px;
  border: 0;
  background: var(--surface-2);
  color: var(--muted);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 18px 100%, 0 50%);
  transition:
    background 220ms var(--ease),
    color 220ms var(--ease),
    transform 220ms var(--ease),
    filter 220ms var(--ease);

  &:first-child {
    clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%);
  }

  &:last-child {
    margin-inline-end: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%);
  }

  &:hover {
    z-index: 1;
    background: var(--line);
    color: var(--navy);
  }

  &[aria-selected="true"],
  &[aria-pressed="true"] {
    z-index: 2;
    background: var(--red);
    color: #fff;
    transform: translateY(-3px);
    filter: drop-shadow(0 10px 16px rgb(197 21 40 / 0.32));
  }

  /* clip-path بيقص الـoutline والـbox-shadow، فمؤشر التركيز بيتعمل
     بـdrop-shadow عشان يمشي على شكل الشيفرون نفسه. */
  &:focus-visible {
    z-index: 3;
    outline: none;
    filter:
      drop-shadow(0 0 1px var(--navy)) drop-shadow(0 0 3px var(--navy)) drop-shadow(0 0 7px rgb(7 29 73 / 0.45));
  }

  .is-ltr & {
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);

    &:first-child {
      clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
    }

    &:last-child {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 18px 50%);
    }
  }

  @media (max-width: 640px) {
    clip-path: none;
    margin-inline-end: 0;
    padding: 0.65rem 1.15rem;
    border: 1px solid var(--line);

    &:first-child,
    &:last-child {
      clip-path: none;
      margin-inline-end: 0;
    }

    &[aria-selected="true"],
    &[aria-pressed="true"] {
      border-color: var(--red);
      transform: none;
    }

    .is-ltr & {
      clip-path: none;

      &:first-child,
      &:last-child {
        clip-path: none;
      }
    }
  }
}

.tab-panel {
  p {
    margin-bottom: 1.5rem;
    color: var(--muted);
    font-size: 1.04rem;
  }

  .check-list {
    margin-bottom: 0;
  }

  &:not([hidden]) {
    animation: panel-in 420ms var(--ease) both;
  }

  @media (prefers-reduced-motion: reduce) {
    &:not([hidden]) {
      animation: none !important;
    }
  }
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.scroll-progress {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: rgb(7 29 73 / 0.08);
  z-index: 1;

  span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--red);
    transition: width 120ms linear;
  }
}

/* =============================================================
   6. HEADER  ->  <header id="site-header"><a class="skip-link">...
   <div class="site-header">...</div><aside class="social-rail">...
   ============================================================= */
#site-header {
  position: relative;
  z-index: 40;
  height: var(--header-height);

  @media (max-width: 900px) {
    height: auto;
  }

  /* ---- Inner visual bar: <div class="site-header"> ---- */
  .site-header {
    position: relative;
    height: var(--header-height);
    background: #fff;

    @media (max-width: 900px) {
      height: auto;
    }

    .topbar {
      height: var(--header-height);
      display: grid;
      grid-template-columns: 300px 1fr;
      align-items: stretch;
    }

    .brand-panel {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-inline: clamp(1rem, 2vw, 1.5rem);
      border-start-end-radius: 72px;
      /* background: var(--red); */
      color: #fff;
      text-transform: uppercase;

      small {
        /* font-family: "Barlow Condensed", "Arial Narrow", sans-serif; */
        margin-top: 0.45rem;
        font-size: 0.67rem;
        font-weight: 800;
        letter-spacing: 0.13em;
        opacity: 0.9;
      }
    }

    .brand-logo {
      display: block;
      width: 100%;
      max-width: 180px;
      height: auto;
      /* نسبة الشعار 2.07:1 — السقف ده بيمنع ارتفاعه يتخطى شريط الهيدر */
      max-height: 84px;
      object-fit: contain;
      transition: opacity 320ms var(--ease), max-height 320ms var(--ease);
    }

    .brand-logo-default {
      opacity: 1;
    }

    .brand-logo-scrolled {
      display: none;
    }

    .brand-word {
      /* font-family: "Barlow Condensed", "Arial Narrow", sans-serif; */
      font-size: clamp(1.85rem, 2.8vw, 2.65rem);
      font-weight: 950;
      letter-spacing: 0.025em;
      line-height: 0.95;
    }

    .topbar-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: center;
      padding-inline: clamp(1.25rem, 3vw, 3rem);
    }

    .meta-item {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 0.85rem;
      padding-inline: clamp(0.7rem, 2vw, 1.6rem);
      border-inline-end: 1px solid var(--line);

      &:last-child {
        border-inline-end: 0;
      }

      >span:last-child {
        min-width: 0;
        display: grid;
      }

      small {
        color: var(--muted);
        font-size: 0.68rem;
        font-weight: 800;
      }

      strong {
        overflow: hidden;
        font-size: clamp(0.75rem, 1vw, 0.9rem);
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .meta-icon {
      color: var(--red);
      font-size: 2rem;
      line-height: 1;
    }

    .main-nav-wrap {
      height: 0;
    }

    .nav-shell {
      min-height: 70px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: stretch;
      background: #111214;
      color: #fff;
      box-shadow: 0 18px 40px rgb(0 0 0 / 0.18);
    }

    .nav-links {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: clamp(0.7rem, 1.6vw, 1.6rem);
      padding-inline: clamp(1.25rem, 3vw, 2.25rem);
      white-space: nowrap;
      font-size: 0.8rem;
      font-weight: 800;

      a {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 70px;
        padding-block: 0.35rem;

        &::after {
          content: "";
          position: absolute;
          inset-inline: 0;
          bottom: 0;
          height: 2px;
          background: var(--red);
          transform: scaleX(0);
          transform-origin: right;
          transition: transform 240ms var(--ease);
        }

        &:hover::after,
        &[aria-current="page"]::after {
          transform: scaleX(1);
        }
      }
    }

    .nav-actions {
      display: flex;
      align-items: stretch;

      /* Mobile hamburger toggle, lives inside .nav-actions in the markup */
      .menu-toggle {
        display: none;
        min-width: 44px;
        min-height: 44px;
        border: 1px solid var(--line);
        background: transparent;
        color: var(--ink);
        cursor: pointer;
        font-weight: 800;

        @media (max-width: 900px) {
          display: inline-grid;
          place-items: center;
          border-color: #111214;
          background: #111214;
          color: #fff;
        }

        @media (max-width: 640px) {
          min-width: 40px;
          min-height: 40px;
        }
      }
    }

    .language-toggle {
      min-width: 86px;
      padding-inline: 0.9rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.32rem;
      border: 0;
      border-inline-start: 1px solid rgb(255 255 255 / 0.18);
      background: transparent;
      color: #fff;
      font-family: "Manrope", sans-serif;
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      cursor: pointer;
      transition: background 220ms var(--ease), color 220ms var(--ease);



      span:not(.language-divider) {
        opacity: 0.46;
        transition: opacity 180ms var(--ease), color 180ms var(--ease);
      }

      span.is-active {
        color: #fff;
        opacity: 1;
      }
    }

    .language-divider {
      color: var(--red);
    }

    .header-cta {
      min-width: 196px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.7rem;
      padding-inline: 1.3rem;
      background: var(--red);
      color: #fff;
      font-size: 0.85rem;
      font-weight: 900;

      &:hover {
        background: var(--red-dark);
      }
    }

    /* ---- Scrolled (sticky/compact) state, toggled via JS on .site-header ---- */
    &.is-scrolled {
      position: fixed;
      inset: 0 0 auto;
      height: 82px;
      background: #fff;
      box-shadow: 0 12px 36px rgb(7 29 73 / 0.13);
      animation: header-drop 320ms var(--ease) both;

      .topbar {
        position: relative;
        z-index: 2;
        height: 82px;
        grid-template-columns: 220px 1fr;
        pointer-events: none;
      }

      .topbar-meta {
        display: none;
      }

      .brand-panel {
        position: relative;
        z-index: 2;
        width: 220px;
        min-height: 82px;
        padding-inline: 1.35rem;
        border-radius: 0;
        background: #fff;
        color: var(--navy);
        pointer-events: auto;
      }

      .brand-logo {
        max-width: 140px;
        max-height: 58px;
      }

      .brand-logo-default {
        display: none;
      }

      .brand-logo-scrolled {
        display: block;
      }

      .brand-word {
        color: var(--navy);
        font-size: 2rem;
      }

      .brand-panel small {
        color: var(--red);
        opacity: 1;
      }

      .main-nav-wrap {
        position: absolute;
        z-index: 1;
        inset: 0;
        height: 82px;
      }

      .nav-shell {
        min-height: 82px;
        padding-inline-start: 220px;
        background: #fff;
        color: var(--ink);
        box-shadow: none;
      }

      .nav-links a {
        min-height: 82px;
      }

      .header-cta {
        min-height: 82px;
      }

      .language-toggle {
        border-inline-start-color: var(--line);
        color: var(--ink);

        &:hover {
          background: var(--paper);
        }

        span.is-active {
          color: var(--navy);
        }
      }
    }

    /* ---- Responsive ---- */
    @media (max-width: 1120px) {
      .topbar {
        grid-template-columns: 250px 1fr;
      }

      .brand-logo {
        max-width: 165px;
      }

      .topbar-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .meta-item:last-child {
        display: none;
      }

      .nav-shell {
        grid-template-columns: 1fr auto;
      }

      .nav-links {
        gap: 0.75rem;
        font-size: 0.75rem;
      }

      .header-cta {
        min-width: 168px;
      }
    }

    @media (max-width: 900px) {
      .topbar {
        height: 72px;
        grid-template-columns: 210px 1fr;
      }

      .brand-panel {
        width: 210px;
        border-radius: 0;
        border-start-end-radius: 58px;
        /* padding-inline: 1rem; */
        padding-inline: 0rem;
      }

      /* الشريط بقى 72px، فالشعار يتحدد بالارتفاع مش بالعرض */
      .brand-logo {
        max-width: 150px;
        max-height: 46px;
      }

      /* حالة السكرول تتبع نفس ارتفاع الشريط بدل ما تفضل 82px */
      &.is-scrolled {
        height: 72px;

        .topbar {
          height: 72px;
          grid-template-columns: 190px 1fr;
        }

        .brand-panel {
          width: 190px;
          min-height: 72px;
          padding-inline: 1rem;
        }

        .brand-logo {
          max-width: 140px;
          max-height: 44px;
        }

        .main-nav-wrap {
          height: 72px;
        }

        .nav-shell {
          min-height: 72px;
          padding-inline-start: 190px;
        }

        .nav-links a {
          min-height: 50px;
        }
      }

      .brand-word {
        font-size: 1.8rem;
      }

      .topbar-meta {
        display: none;
      }

      .main-nav-wrap {
        position: absolute;
        inset: 0;
        height: 72px;
        pointer-events: none;
      }

      .nav-shell {
        grid-template-columns: 1fr auto;
        min-height: 72px;
        background: transparent;
        box-shadow: none;
      }

      .nav-links {
        position: fixed;
        inset: var(--header-height) 0 auto;
        display: grid;
        justify-content: stretch;
        gap: 0;
        padding: 1rem;
        background: var(--paper);
        color: var(--ink);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
        transform: translateY(-130%);
        opacity: 0;
        pointer-events: none;
        transition:
          transform 300ms var(--ease),
          opacity 300ms var(--ease);

        &.is-open {
          transform: translateY(-10%);
          opacity: 1;
          pointer-events: auto;
        }

        a {
          min-height: 50px;
          padding: 0.9rem;
          border-bottom: 1px solid var(--line);
        }
      }

      .nav-actions {
        grid-column: 2;
        grid-row: 1;
        align-items: center;
        gap: 0.35rem;
        pointer-events: auto;
      }

      .header-cta {
        display: none;
      }

      .language-toggle {
        min-width: 76px;
        min-height: 44px;
        padding-inline: 0.7rem;
        border: 1px solid rgb(255 255 255 / 0.28);
        background: rgb(8 24 57 / 0.78);
        color: #fff;
        backdrop-filter: blur(12px);
      }
    }

    @media (max-width: 640px) {
      height: 64px;

      .nav-links {

        &.is-open {
          transform: translateY(-12%);
        }
      }

      .topbar {
        height: 64px;
        grid-template-columns: 180px 1fr;
      }

      .brand-panel {
        width: 180px;
        border-start-end-radius: 52px;

        small {
          font-size: 0.55rem;
        }
      }

      .brand-logo {
        max-width: 132px;
        max-height: 40px;
      }

      &.is-scrolled {
        height: 64px;

        .topbar {
          height: 64px;
          grid-template-columns: 165px 1fr;
        }

        .brand-panel {
          width: 165px;
          min-height: 64px;
          padding-inline: 0.85rem;
        }

        .brand-logo {
          max-width: 124px;
          max-height: 38px;
        }

        .main-nav-wrap {
          height: 64px;
        }

        .nav-shell {
          min-height: 64px;
          padding-inline-start: 165px;
        }
      }

      .brand-word {
        font-size: 1.55rem;
      }

      .main-nav-wrap {
        height: 64px;
      }

      .nav-shell {
        min-height: 64px;
      }

      .language-toggle {
        min-width: 68px;
        min-height: 40px;
        padding-inline: 0.55rem;
        font-size: 0.64rem;
      }
    }
  }

  /* ---- Social rail: <aside class="social-rail">, sibling of .site-header ---- */
  .social-rail {
    position: fixed;
    z-index: 34;
    inset-inline-end: 0;
    top: 50%;
    width: 54px;
    padding: 1.05rem 0.55rem;
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    border-inline-start: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    box-shadow: 0 14px 34px rgb(7 29 73 / 0.12);
    transform: translateY(-50%);

    .social-rail-label {
      /* font-family: "Barlow Condensed", "Arial Narrow", sans-serif; */
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-size: 0.62rem;
      font-weight: 900;
      letter-spacing: 0.18em;
      white-space: nowrap;
    }

    .social-rail-line {
      width: 1px;
      height: 30px;
      background: var(--red);
      transition: height 300ms var(--ease);
    }

    .social-rail-icon {
      position: relative;
      width: 29px;
      height: 29px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      color: var(--navy);
      font-size: 0.75rem;
      font-weight: 900;
      text-transform: lowercase;
      transition:
        background 240ms var(--ease),
        border-color 240ms var(--ease),
        color 240ms var(--ease),
        transform 240ms var(--ease);

      /* منطقة الضغط تتوسّع لـ40px من غير ما الشكل يكبر — الحد
         الأدنى في WCAG 2.5.8 هو 24px والأيقونة 29px بس متلاصقة
         مع جيرانها */
      &::after {
        content: "";
        position: absolute;
        inset: -5px -6px;
      }

      &:hover,
      &:focus-visible {
        border-color: var(--red);
        background: var(--red);
        color: #fff;
        transform: scale(1.08);
      }

      &:focus-visible {
        outline: 2px solid var(--navy);
        outline-offset: 3px;
      }

      &:active {
        transform: scale(0.96);
      }

      &.social-rail-icon-wide {
        font-size: 0.65rem;
      }
    }

    /* تلميح باسم المنصة بيطلع ناحية جسم الصفحة (inline-start)،
       لأن الشريط نفسه ملزوق على حافة inline-end */
    .social-rail-tip {
      position: absolute;
      inset-inline-end: calc(100% + 10px);
      top: 50%;
      padding: 0.3rem 0.6rem;
      background: var(--navy);
      color: #fff;
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-50%) scale(0.92);
      transform-origin: center;
      transition:
        opacity 220ms var(--ease),
        transform 220ms var(--ease);
    }

    .social-rail-icon:hover .social-rail-tip,
    .social-rail-icon:focus-visible .social-rail-tip {
      opacity: 1;
      transform: translateY(-50%) scale(1);
    }

    /* الخط الأحمر بيمتد شوية لما المؤشر يدخل الشريط */
    &:hover .social-rail-line {
      height: 42px;
    }


    @media (max-width: 900px) {
      display: none;
    }
  }
}

@keyframes header-drop {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================================
   7. HERO  ->  <section class="hero hero-slider">
   ============================================================= */
.hero {
  position: relative;
  min-height: calc(100dvh - var(--header-height));
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  touch-action: pan-y;

  .hero-slide {
    display: grid;
    place-items: center;

    /* .is-active اتبدل بكلاس Swiper. الشفافية نفسها بقت مسؤولية
       effect: "fade" في Swiper، فاتشالت من هنا عشان ما يتعارضوش. */
    &.swiper-slide-active {
      .hero-kicker {
        animation: hero-copy-in 720ms 120ms var(--ease) both;
      }

      h1 {
        animation: hero-title-in 860ms 210ms var(--ease) both;
      }

      .hero-tagline {
        animation: hero-copy-in 720ms 330ms var(--ease) both;
      }

      .hero-description {
        animation: hero-copy-in 720ms 420ms var(--ease) both;
      }

      .hero-actions {
        animation: hero-copy-in 720ms 510ms var(--ease) both;
      }
    }

    .hero-kicker,
    h1,
    .hero-tagline,
    .hero-description,
    .hero-actions {
      opacity: 0;
      transform: translateY(30px);
    }
  }

  .hero-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* كان linear-gradient(90deg) بيغمق الطرفين ويسيب النص (المتمركز)
     فوق أفتح جزء = 0.32 alpha. اتقلب: طبقة رأسية للحواف + طبقة
     مركزية تغمق ورا النص نفسه. */
  .hero-shade {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 70% 62% at 50% 52%,
        rgb(4 17 46 / 0.78),
        rgb(4 17 46 / 0.42) 70%,
        rgb(4 17 46 / 0.3)),
      linear-gradient(180deg,
        rgb(4 17 46 / 0.62),
        rgb(4 17 46 / 0.24) 38%,
        rgb(4 17 46 / 0.72));
  }


  .hero-content {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    /* الشريحة متمركزة أصلاً بـplace-items، فالبادينج هنا بس عشان
       يفضل مسافة للكنترولز تحت ومؤشر السكرول */
    padding-block: clamp(4rem, 9vw, 6.5rem) clamp(6rem, 10vw, 8rem);
    text-align: center;
  }

  .hero-kicker {
    margin-bottom: 1.5rem;
    font-size: clamp(0.7rem, 1.15vw, 0.95rem);
    font-weight: 850;
    letter-spacing: 0.28em;
    text-transform: uppercase;

    /* العربي حروفه متصلة — الـtracking اللاتيني الواسع بيكسر الوصلات */
    [dir="rtl"] & {
      letter-spacing: 0.07em;
    }
  }


  h1 {
    max-width: none;
    margin: 0;
    color: #fff;
    font-size: clamp(2.5rem, 5vw, 4.3rem);
    font-weight: 950;
    letter-spacing: -0.07em;
    line-height: 0.82;
    text-transform: uppercase;
    text-wrap: balance;


    [dir="rtl"] & {
      letter-spacing: -0.01em;
      line-height: 1.16;
    }
  }


  .hero-tagline {
    margin: 1.35rem 0 0;
    font-size: clamp(1.1rem, 2.1vw, 1.75rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.5;

    [dir="rtl"] & {
      letter-spacing: 0;
    }
  }

  .hero-description {
    max-width: 58ch;
    margin: 1.25rem auto 1.9rem;
    /* 0.82 كانت واطية فوق صورة متغيرة الإضاءة */
    color: rgb(255 255 255 / 0.92);
    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
    line-height: 1.85;
    text-wrap: pretty;
  }


  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;

    @media (max-width: 640px) {
      display: grid;
    }
  }

  .hero-text-link {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 1rem;
    border-bottom: 2px solid #fff;
    color: #fff;
    font-weight: 800;

    i {
      transition: transform 260ms var(--ease);
    }

    &:hover i {
      transform: translateX(-6px);
    }
  }

  /* ---- نقط الهيرو ----
     المسافات مشتقة من الهندسة مش مكتوبة بالإيد: الحلقة بتبعد
     --pg-ring عن حافة المربع وبتتكبر معاه بـ--pg-scale، يعني
     أقصى امتداد ليها بره المربع هو --pg-reach. الـgap مبني عليه،
     فلو أي قيمة اتغيرت الباقي بيمشي معاها لوحده. */
  .hero-pagination {
    --pg-dot: 13px;
    --pg-ring: 6px;
    --pg-scale: 1.2;
    --pg-reach: calc(((var(--pg-dot) + var(--pg-ring) * 2) * var(--pg-scale) - var(--pg-dot)) / 2);
    /* مساحة الضغط: 24px حد أدنى حسب WCAG 2.5.8 */
    --pg-hit: max(24px, calc(var(--pg-dot) + 12px));

    position: absolute;
    z-index: 4;
    /* Swiper بيحط على أي عنصر pagination القواعد دي:
       position:absolute; left:0; width:100%; bottom:8px
       والـwidth:100% كانت بتفرد الجريد على عرض الشاشة كله
       فالمربعات تتباعد بدل ما تفضل جنب بعض. لازم نلغيها صراحةً،
       والترتيب مهم: الفيزيائي الأول وبعدين المنطقي. */
    left: auto;
    right: auto;
    bottom: auto;
    width: max-content;
    inset-inline-start: clamp(1.15rem, 2.6vw, 2.5rem);
    top: 50%;
    display: grid;
    justify-items: center;
    gap: calc(var(--pg-reach) + 7px);
    transform: translateY(-50%);

    button {
      width: var(--pg-dot);
      height: var(--pg-dot);
      padding: 0;
      border: 2px solid #fff;
      /* مربعة زي .slider-dots — الزوايا الحادة جزء من هوية EMCON */
      border-radius: 0;
      background: transparent;
      cursor: pointer;
      transition: background 220ms var(--ease), transform 220ms var(--ease);

      &[aria-current="true"] {
        background: #fff;
        transform: scale(var(--pg-scale));
      }
    }

    @media (max-width: 900px) {
      --pg-dot: 12px;
      --pg-ring: 5px;
    }

    @media (max-width: 640px) {
      --pg-dot: 11px;
      --pg-ring: 5px;

      inset-inline-start: auto;
      inset-inline-end: auto;
      right: auto;
      left: 50%;
      top: auto;
      /* الحلقة بتنزل --pg-reach تحت المربع، والمسافة دي بتزيد
         عليها مساحة أمان الشاشات اللي ليها شريط سفلي */
      bottom: max(1.5rem, calc(env(safe-area-inset-bottom, 0px) + 0.9rem));
      /* max-content = الصف بياخد عرض محتواه بالظبط، وبعدين
         بيتمركز بـleft:50% + translateX(-50%) */
      width: max-content;
      grid-auto-flow: column;
      justify-content: center;
      transform: translateX(-50%);
    }
  }


  .hero-arrows {
    position: absolute;
    z-index: 4;
    inset-inline-end: 2.1rem;
    bottom: 2rem;
    display: flex;
    gap: 1px;

    /* .social-rail عنصر fixed عرضه 54px على نفس الحافة وبيظهر فوق
       900px بس — فالأسهم تتزح عنه في المدى ده لوحده */
    @media (min-width: 901px) {
      inset-inline-end: calc(54px + 1.6rem);
    }

    @media (max-width: 640px) {
      display: none;
    }
  }

  .hero-arrow {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 0.48);
    background: rgb(4 17 46 / 0.42);
    color: #fff;
    cursor: pointer;
    transition: background 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);

    &:hover {
      border-color: var(--red);
      background: var(--red);
    }

    &:active {
      transform: scale(0.96);
    }
  }

  @media (max-width: 900px) {
    min-height: 74dvh;

    .hero-content {
      padding-block: 3rem 6rem;
      /* النقط الرأسية على جهة البداية، فالنص ياخد مسافة منها
         بدل ما يقرب عليها في التابلت */
      padding-inline: clamp(1.5rem, 5vw, 3rem);
    }

    /* الـline-height 0.82 مظبوط للعنوان الكبير في الديسكتوب،
       لكن لما الإنجليزي يلف على سطرين في الشاشات الأصغر السطور
       كانت بتلزق في بعض */
    h1 {
      line-height: 0.95;
      letter-spacing: -0.045em;
    }
  }

  @media (max-width: 640px) {
    min-height: 77dvh;

    .hero-content {
      padding-block: 2.5rem 6.5rem;
      padding-inline: 0.5rem;
    }

    h1 {
      font-size: clamp(2.2rem, 11vw, 3.3rem);
    }

    .hero-kicker {
      max-width: 30ch;
      margin-bottom: 1.1rem;
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      line-height: 1.7;
      text-wrap: balance;
    }

    .hero-tagline {
      margin-top: 1rem;
      font-size: 1.15rem;
      letter-spacing: 0;
      line-height: 1.45;
      text-wrap: balance;
    }

    .hero-description {
      margin: 1rem auto 1.6rem;
      font-size: 0.92rem;
      line-height: 1.8;
    }

    /* الزرار واللينك كانوا بعرضين مختلفين فوق بعض؛ دلوقتي نفس
       العرض وفي النص */
    .hero-actions {
      width: min(100%, 20rem);
      grid-template-columns: 1fr;
      gap: 0.65rem;

      .button,
      .hero-text-link {
        width: 100%;
        min-height: 48px;
        justify-content: center;
      }
    }
  }

  /* موبايل بالعرض: الارتفاع قليل فالمحتوى محتاج مساحة أقل */
  @media (max-height: 520px) and (orientation: landscape) {
    min-height: 100dvh;

    .hero-content {
      padding-block: 2rem 4.5rem;
    }

    .hero-description {
      display: none;
    }
  }
}

@keyframes hero-copy-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-title-in {
  from {
    opacity: 0;
    clip-path: inset(0 0 100%);
    transform: translateY(52px);
  }

  to {
    opacity: 1;
    clip-path: inset(0);
    transform: translateY(0);
  }
}

/* =============================================================
   8. FEATURE ROW (capabilities)  ->  <section class="feature-row">
   ============================================================= */
.feature-row {
  position: relative;
  z-index: 2;
  padding-block: clamp(3rem, 5vw, 4.5rem) 0;

  .feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2.4vw, 2rem);

    .feature-cell {
      --panel-inset: clamp(2.4rem, 4vw, 3.4rem);
      --panel-lift: clamp(2rem, 3.2vw, 2.8rem);
      --cog-size: clamp(76px, 6.4vw, 94px);
      position: relative;
      display: flex;
      flex-direction: column;

      &:nth-child(1) {
        --focus: 74% 45%;
      }

      &:nth-child(2) {
        --focus: 50% 55%;
      }

      &:nth-child(3) {
        --focus: 42% 42%;
      }

      &:hover {
        .feature-media img {
          transform: scale(1.06);
          opacity: 0.66;
        }

        .feature-step {
          color: rgb(255 255 255 / 0.46);
        }

        .feature-body {
          box-shadow: 0 26px 56px rgb(7 29 73 / 0.2);
        }

        .feature-cog {
          animation-play-state: paused;
        }

        .feature-rule {
          width: 78px;
        }

        @supports (-webkit-text-stroke: 1px white) {
          .feature-step {
            color: transparent;
            -webkit-text-stroke-color: #fff;
          }
        }
      }

      h3 {
        max-width: 18ch;
        margin: 0;
        color: var(--navy);
        font-size: clamp(1.12rem, 1.45vw, 1.28rem);
      }

      p {
        margin: 0;
        color: var(--muted);
        font-size: 0.95rem;
      }

      &.is-accent {
        .feature-media {
          background: var(--red-dark);

          &::after {
            background: linear-gradient(to top,
                rgb(157 16 31 / 0.82) 6%,
                rgb(197 21 40 / 0.45) 48%,
                rgb(197 21 40 / 0.26));
          }
        }

        .feature-cog {
          fill: url(#cog-navy);
        }
      }
    }

    .feature-media {
      position: relative;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: var(--navy-deep);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: var(--focus, 50% 50%);
        opacity: 0.78;
        transition:
          transform 700ms var(--ease),
          opacity 360ms var(--ease);
      }

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,
            rgb(4 17 46 / 0.78) 6%,
            rgb(4 17 46 / 0.34) 48%,
            rgb(7 29 73 / 0.18));
      }
    }

    .feature-step {
      position: absolute;
      z-index: 2;
      inset-block-start: clamp(0.9rem, 1.6vw, 1.3rem);
      inset-inline-start: clamp(1rem, 1.8vw, 1.5rem);
      /* font-family: "Barlow Condensed", "Alexandria", sans-serif; */
      font-size: clamp(2.6rem, 4.2vw, 3.4rem);
      font-weight: 800;
      line-height: 0.9;
      letter-spacing: 0.02em;
      color: rgb(255 255 255 / 0.3);
      transition: color 360ms var(--ease);

      @supports (-webkit-text-stroke: 1px white) {
        color: transparent;
        -webkit-text-stroke: 1.5px rgb(255 255 255 / 0.6);
        transition: -webkit-text-stroke-color 360ms var(--ease);
      }
    }

    .feature-body {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 0.7rem;
      flex: 1;
      margin-block-start: calc(var(--panel-lift) * -1);
      margin-inline-start: var(--panel-inset);
      padding: calc(var(--cog-size) * 0.58) clamp(1.3rem, 2vw, 1.75rem) clamp(1.4rem, 2.2vw, 1.9rem);
      background: var(--paper);
      box-shadow: 0 20px 46px rgb(7 29 73 / 0.14);
      transition: box-shadow 320ms var(--ease);
    }

    .feature-icon {
      position: absolute;
      z-index: 2;
      inset-block-start: calc(var(--cog-size) * -0.44);
      inset-inline-start: calc(var(--cog-size) * -0.5);
      display: grid;
      place-items: center;
      width: var(--cog-size);
      aspect-ratio: 1;
      color: #fff;
      font-size: clamp(1.2rem, 1.5vw, 1.45rem);

      &::before {
        content: "";
        position: absolute;
        inset: 30%;
        border-radius: 50%;
        box-shadow:
          0 0 0 1px rgb(255 255 255 / 0.3),
          0 0 18px rgb(4 17 46 / 0.35) inset;
      }

      i {
        position: relative;
      }
    }

    .feature-cog {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      fill: url(#cog-red);
      filter: drop-shadow(0 10px 22px rgb(4 17 46 / 0.35));
      animation: cogSpin 8s linear infinite;
    }

    .feature-rule {
      order: 1;
      width: 46px;
      height: 3px;
      margin-block-start: 0.35rem;
      background: var(--red);
      transition: width 320ms var(--ease);
    }

    @media (max-width: 900px) {
      grid-template-columns: 1fr;
    }

    @media (prefers-reduced-motion: reduce) {
      .feature-cell:hover .feature-media img {
        transform: none;
      }

      .feature-cog {
        animation: none;
      }
    }
  }
}

@keyframes cogSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* =============================================================
   9. ABOUT SECTION  ->  <section class="section about-section">
   ============================================================= */
.about-section {
  position: relative;

  .about-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    z-index: 0;
    pointer-events: none;

    img {
      width: 100%;
      height: auto;
    }

    @media (max-width: 900px) {
      width: 20%;
    }
  }

  .about-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;

    @media (max-width: 900px) {
      grid-template-columns: 1fr;

      .about-visual {
        order: -1;
      }
    }
  }

  .about-visual {
    position: relative;
  }

  /* Badge overlapping the offset frame image */
  .frame-badge {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 24rem;
    margin-top: -3.25rem;
    margin-inline-start: 1.75rem;
    padding: 1.35rem 1.5rem;
    background: var(--navy-deep);
    color: var(--on-dark);
    padding-inline-start: 3.1rem;
    border-start-end-radius: 38px;

    .frame-badge-icon {
      font-size: 1.9rem;
      color: var(--red);
    }

    strong {
      font-size: 1.02rem;
      line-height: 1.45;
    }

    .frame-badge-dots {
      position: absolute;
      z-index: 2;
      inset-inline-start: 1.15rem;
      top: 50%;
      display: grid;
      gap: 0.5rem;
      transform: translateY(-50%);

      button {
        width: 10px;
        height: 10px;
        padding: 0;
        border: 0;
        cursor: pointer;
        background: rgb(255 255 255 / 0.28);
        transition:
          background 220ms var(--ease),
          box-shadow 220ms var(--ease);

        &:hover {
          background: rgb(255 255 255 / 0.6);
        }

        &[aria-current="true"] {
          background: var(--red);
          box-shadow:
            0 0 0 3px var(--navy-deep),
            0 0 0 4px var(--red);
        }
      }
    }

    .frame-badge-slides {
      position: relative;
      z-index: 1;
    }

    .frame-badge-slide {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      gap: 1rem;
      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;
      transition:
        opacity 520ms var(--ease),
        transform 520ms var(--ease);

      &.is-active {
        position: relative;
        opacity: 1;
        transform: none;
        pointer-events: auto;
      }
    }

    .frame-badge-watermark {
      position: absolute;
      inset-inline-end: -1.5rem;
      bottom: -2.5rem;
      color: rgb(255 255 255 / 0.06);
      font-size: 8rem;
      line-height: 1;

      @media (max-width: 1120px) {
        font-size: 6rem;
      }
    }

    @media (max-width: 640px) {
      max-width: none;
      margin-inline: 0;
    }
  }

  .fact-pair {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin-bottom: 2.25rem;
    background: var(--line);
    border: 1px solid var(--line);

    @media (max-width: 640px) {
      grid-template-columns: 1fr;
    }
  }

  .fact-box {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    padding: 1.25rem 1.4rem;
    background: var(--paper);

    strong {
      color: var(--red);
      font-size: 2.6rem;
      font-weight: 800;
      line-height: 1;
      transition: transform 320ms var(--ease);
    }

    span {
      color: var(--muted);
      font-size: 0.94rem;
      line-height: 1.5;
    }

    &:hover strong {
      transform: translateY(-4px);
    }
  }
}

/* Floating decoration animation, reused wherever [data-reveal]/shapes float */
.float-bob-x {
  animation: float-bob-x 4s ease-in-out infinite;

  @media (max-width: 900px) {
    animation: none !important;
  }
}

@keyframes float-bob-x {
  0% {
    transform: translateX(30px);
  }

  50% {
    transform: translateX(10px);
  }

  100% {
    transform: translateX(30px);
  }
}

/* =============================================================
   10. SERVICES SECTION  ->  <section class="section section-alt services-section">
   ============================================================= */
.services-section {
  overflow-x: clip;

  .service-slider {
    position: relative;
  }

  .service-card {
    display: flex;
    flex-direction: column;

    .service-card-media {
      overflow: hidden;
      aspect-ratio: 4 / 3;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 600ms var(--ease);
      }
    }

    &:hover .service-card-media img {
      transform: scale(1.07);
    }

    .service-card-body {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0.9rem;
      flex: 1;
      margin-top: -2.6rem;
      margin-inline-start: 2.6rem;
      padding: 3.3rem 1.5rem 1.75rem;
      background: var(--paper);
      border-end-end-radius: 44px;
      box-shadow: 0 18px 44px rgb(7 29 73 / 0.1);
      transition:
        background 300ms var(--ease),
        color 300ms var(--ease);

      @media (max-width: 640px) {
        margin-inline-start: 2rem;
      }
    }

    &:hover .service-card-body,
    &:focus-within .service-card-body {
      background: var(--navy-deep);
      color: var(--on-dark);

      h3 {
        color: #fff;
      }

      p {
        color: var(--soft-on-dark);
      }
    }

    .service-card-rule {
      position: absolute;
      inset-inline-start: -2.35rem;
      top: 3.75rem;
      width: 1.7rem;
      height: 3px;
      background: var(--red);

      @media (max-width: 640px) {
        inset-inline-start: -2rem;
      }
    }

    .service-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;

      h3 {
        margin: 0;
        font-size: clamp(1.05rem, 0.85vw + 0.78rem, 1.25rem);
        font-weight: 800;
        line-height: 1.5;
        letter-spacing: 0;
        text-wrap: balance;
        overflow-wrap: break-word;
        min-height: calc(2 * 1.5em);
        color: #000;
      }

      @media (max-width: 640px) {
        h3 {
          min-height: 0;
        }
      }
    }

    .service-card-icon {
      color: var(--navy);
      font-size: 1.7rem;
      /* opacity: 0.3; */
      transition:
        color 260ms var(--ease),
        opacity 260ms var(--ease),
        transform 320ms var(--ease);

      i {
        color: var(--surface);
      }
    }

    &:hover .service-card-icon {
      /* color: var(--red); */
      opacity: 1;
    }

    p {
      margin: 0;
      color: var(--muted);
      font-size: 0.95rem;
      /* النص العربي محتاج leading أوسع من الافتراضي 1.75 عشان النقط والتشكيل */
      line-height: 1.9;
      letter-spacing: 0;
      text-wrap: pretty;
    }

    .ghost-link {

      /* العربي حروفه متصلة، والـ tracking العام (0.1em) بيفصل "اعرف المزيد" */
      [dir="rtl"] & {
        letter-spacing: 0.015em;
        font-weight: 800;
      }
    }

    &:hover .ghost-link,
    &:focus-within .ghost-link {
      background: var(--red);
      border-color: var(--red);
      color: #fff;
    }

    &:hover .ghost-link i {
      transform: translateX(-6px);
    }
  }
}

/* =============================================================
   11. NUMBERS BAND  ->  <section class="numbers-band">
   ============================================================= */
.numbers-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background-color: var(--navy-deep);
  background-image: url("/website/assets/images/bg-shape.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: var(--on-dark);

  .container {
    position: relative;
    z-index: 2;
  }

  /* 
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
      linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
    pointer-events: none;
  } */

  .numbers-shape {
    position: absolute;
    top: 10%;
    inset-inline-end: 5%;
    width: 15%;
    z-index: 0;
    pointer-events: none;

    img {
      width: 100%;
      height: auto;
      border-radius: 50%;
    }

    @media (max-width: 900px) {
      top: 5%;
      inset-inline-end: 3%;
      width: 10%;
    }
  }

  .numbers-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: center;

    @media (max-width: 1120px) {
      grid-template-columns: 1fr;
    }
  }

  .numbers-head {
    display: block;
    margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);

    h2 {
      max-width: 30ch;
      margin: 0;
      color: #fff;
      font-size: clamp(1.6rem, 2.6vw, 2.3rem);
      line-height: 1.28;
    }
  }

  .numbers-kicker {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 1.25rem;
    color: var(--on-dark);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    .numbers-kicker-box {
      flex: none;
      width: 0.9rem;
      height: 0.9rem;
      background: var(--red);
    }
  }

  .numbers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.9rem, 1.6vw, 1.25rem);

    @media (max-width: 640px) {
      grid-template-columns: 1fr;
      row-gap: 0.85rem;
    }
  }

  .number-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 220px;
    padding: 1.5rem 1.35rem 1.4rem;
    border: 1px solid rgb(255 255 255 / 0.13);
    border-end-end-radius: 28px;
    background: linear-gradient(160deg,
        rgba(197, 21, 40, 0.15),
        rgba(27, 68, 137, 0.08));
    color: #fff;
    transition:
      transform 320ms var(--ease),
      background 320ms var(--ease),
      border-color 320ms var(--ease);

    &::before {
      content: "";
      position: absolute;
      inset-inline: -1px;
      top: -1px;
      height: 3px;
      background: var(--red);
      transform: scaleX(0.3);
      transform-origin: right;
      transition: transform 420ms var(--ease);

      [dir="ltr"] & {
        transform-origin: left;
      }
    }

    &:hover,
    &:focus-visible {
      border-color: rgb(255 255 255 / 0.28);
      background: linear-gradient(160deg,
          rgba(197, 21, 40, 0.25),
          rgba(27, 68, 137, 0.15));

      &::before {
        transform: scaleX(1);
      }

      .number-cell-more {
        color: #fff;

        i {
          transform: translateX(-6px);
        }
      }
    }

    &:focus-visible {
      outline-color: #fff;
    }

    .number-cell-icon {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      margin-bottom: 1.1rem;
      background: var(--red);
      color: #fff;
      font-size: 1.1rem;
      transition: transform 320ms var(--ease);
    }

    strong {
      display: block;
      color: #fff;
      /* font-family: "Barlow Condensed", "Arial Narrow", sans-serif; */
      font-size: clamp(2.9rem, 4.4vw, 3.75rem);
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }

    .number-label {
      display: block;
      max-width: 18ch;
      color: var(--soft-on-dark);
      font-size: clamp(0.86rem, 1vw, 0.95rem);
      font-weight: 600;
      line-height: 1.5;
      text-wrap: balance;
    }

    .number-cell-more {
      position: absolute;
      inset-block-start: 1.5rem;
      inset-inline-end: 1.25rem;
      color: rgb(255 255 255 / 0.4);
      font-size: 0.95rem;
      transition: color 260ms var(--ease);

      i {
        display: inline-block;
        transition: transform 260ms var(--ease);
      }

      /* الحركة دي كانت متعرّفة جوّه .is-ltr بس، يعني السهم مكانش
         بيتحرك خالص في النسخة العربية وهي اللغة الأساسية. */
      &:hover i {
        transform: translateX(-6px);
      }
    }

    @media (max-width: 640px) {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      column-gap: 1rem;
      row-gap: 0;
      min-height: 0;
      padding: 1.1rem 1.25rem;

      .number-cell-icon {
        grid-row: span 2;
        margin-bottom: 0;
      }

      strong {
        font-size: 2.6rem;
      }

      .number-cell-more {
        inset-block-start: 50%;
        transform: translateY(-50%);
      }
    }
  }

  /* Featured clipped number card */
  .number-card-wrap {
    position: relative;
    filter: drop-shadow(0 20px 40px rgba(197, 21, 40, 0.15)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.1));
    transition: transform 480ms cubic-bezier(0.4, 0, 0.2, 1);

    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset-inline-end: -2rem;
      bottom: -2rem;
      width: 65%;
      height: 48%;
      background-image: radial-gradient(rgb(197 21 40 / 0.12) 1.6px,
          transparent 1.7px);
      background-size: 15px 15px;
      border-radius: 20px;
    }

    &:hover {
      transform: translateY(-8px);

      .number-card-badge {
        filter: drop-shadow(0 12px 24px rgba(197, 21, 40, 0.2));
      }

      .number-card-cap {
        transform: rotate(-6deg) translateY(-6px);
        filter: drop-shadow(0 20px 28px rgba(197, 21, 40, 0.25));
      }
    }

    @media (max-width: 1120px) {
      width: 100%;
      max-width: 520px;
      margin-inline: auto;
    }
  }

  .number-card {
    position: relative;
    display: flex;
    padding-block: 6px;
    background: linear-gradient(135deg, var(--red) 0%, #9d101f 100%);
    clip-path: var(--card-clip);
    transition: transform 480ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .number-card-inner {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 628px;
    padding: 5.5rem 1.75rem 1.5rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    background-image: url("../images/card-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: var(--ink);
    clip-path: var(--card-clip);
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 200px;
      background: linear-gradient(180deg, rgba(197, 21, 40, 0.03) 0%, transparent 100%);
      pointer-events: none;
    }

    @media (max-width: 640px) {
      min-height: 560px;
      padding-inline: 1.25rem;
    }
  }

  .number-card-tag {
    position: absolute;
    inset-inline-start: 1.6rem;
    top: 5.4rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #e3e7ed;
    /* font-family: "Barlow Condensed", "Alexandria", sans-serif; */
    font-size: clamp(1.7rem, 2.3vw, 2.1rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;

    [dir="rtl"] & {
      letter-spacing: 0;
      left: 1.6rem;
      right: auto;
    }

    @supports (-webkit-text-stroke: 1px white) {
      color: transparent;
      -webkit-text-stroke: 1px #d3d9e2;
    }

    @media (max-width: 640px) {
      inset-inline-start: 1.1rem;
    }
  }

  .number-card-body {
    padding-inline-start: 20%;
  }

  .number-card-badge {
    display: block;
    width: 76px;
    height: auto;
    color: var(--ink);
    transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.1));
  }

  .number-card-count {
    display: flex;
    align-items: baseline;
    margin-top: 2.4rem;

    strong {
      color: var(--red);
      /* font-family: "Barlow Condensed", "Arial Narrow", sans-serif; */
      font-size: clamp(7rem, 12vw, 9.5rem);
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      line-height: 0.85;
      background: linear-gradient(135deg, var(--red) 0%, #9d101f 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 4px 8px rgba(197, 21, 40, 0.15));
    }
  }

  .number-card-label {
    margin: 1.35rem 0 0;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.5;

    &::before {
      content: "";
      display: block;
      width: 46px;
      height: 3px;
      margin-bottom: 0.9rem;
      background: var(--red);
    }
  }

  .number-card-foot {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
    padding-top: 2rem;
  }

  .number-card-cap {
    flex: none;
    width: 44%;
    max-width: 215px;
    height: auto;
    filter: drop-shadow(0 16px 20px rgba(4, 17, 46, 0.15));
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;

    @media (max-width: 640px) {
      width: 40%;
    }
  }

  .number-card-link {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    color: var(--ink);
    font-size: clamp(1.6rem, 2.2vw, 2rem);
    font-weight: 400;
    line-height: 1.2;
    transition: color 240ms var(--ease);

    i {
      flex: none;
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      background: linear-gradient(135deg, var(--red) 0%, #9d101f 100%);
      color: #fff;
      font-size: 1rem;
      border-radius: 12px;
      transition:
        background 240ms var(--ease),
        transform 260ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 240ms var(--ease);
      box-shadow: 0 4px 12px rgba(197, 21, 40, 0.2);
    }

    &:hover {
      color: var(--red);

      i {
        background: linear-gradient(135deg, var(--navy) 0%, #04112e 100%);
        transform: translateX(-8px);
        box-shadow: 0 6px 16px rgba(27, 68, 137, 0.3);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    &::before {
      animation: none !important;
    }
  }
}

/* =============================================================
   11.5 CLIENTS SECTION  ->  <section class="section clients-section">
   ============================================================= */

.clients-section {
  --client-gap: clamp(1rem, 2vw, 1.75rem);
  --client-w: clamp(150px, 15vw, 210px);
  position: relative;
  padding-inline: 0;
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  background: var(--paper);
  overflow: hidden;

  .section-head {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);

    .eyebrow {
      background: var(--surface-2);
      color: var(--navy);
    }

    h2 {
      max-width: none;
      margin-inline: auto;
      color: var(--navy);
    }
  }
}

.clients-marquee {
  position: relative;
  overflow: hidden;
  /* مساحة للظل والرفعة عند الـhover عشان ما تتقصش */
  padding-block: 1.25rem 1.75rem;

  /* ---- الضباب ---- */
  &::before,
  &::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset-block: 0;
    width: clamp(48px, 16vw, 260px);
    pointer-events: none;
    background: linear-gradient(to right, var(--paper) 12%, rgb(255 255 255 / 0));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-mask-image: linear-gradient(to right, #000 35%, transparent);
    mask-image: linear-gradient(to right, #000 35%, transparent);
  }

  &::before {
    left: 0;
  }

  &::after {
    right: 0;
    transform: scaleX(-1);
  }

  @media (max-width: 640px) {

    &::before,
    &::after {
      width: 14vw;
    }
  }

  /* حركة أقل: بدون أنيميشن، والشريط بيتسحب يدويًا */
  @media (prefers-reduced-motion: reduce) {
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

.clients-track {
  --marquee-shift: 0px;
  --marquee-duration: 30s;
  --marquee-dir: -1;
  display: flex;
  width: max-content;
  will-change: transform;
  animation: clients-marquee var(--marquee-duration) linear infinite;

  [dir="rtl"] & {
    --marquee-dir: 1;
  }

  .clients-marquee:hover &,
  .clients-marquee:focus-within & {
    animation-play-state: paused;
  }

  /* قبل ما الجافاسكريبت يقيس، مفيش إزاحة فمفيش حركة */
  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes clients-marquee {
  to {
    transform: translateX(calc(var(--marquee-shift) * var(--marquee-dir)));
  }
}

/* padding-inline-end = الـgap، فعرض المجموعة = مسافة الإزاحة بالظبط
   وتلف من غير قفزة */
.clients-group {
  display: flex;
  flex: none;
  gap: var(--client-gap);
  margin: 0;
  padding: 0;
  padding-inline-end: var(--client-gap);
  list-style: none;
}

.client-slide {
  flex: none;
  width: var(--client-w);
  filter: drop-shadow(0 10px 18px rgb(7 29 73 / 0.07));
  transition:
    translate 420ms var(--ease),
    filter 420ms var(--ease);

  &:hover,
  &:focus-within {
    /* translate: 0 -6px; */
    filter: drop-shadow(0 18px 26px rgb(7 29 73 / 0.16));
  }
}

.client-logo {
  --cl-clip: polygon(0 0,
      calc(100% - 18px) 0,
      100% 20px,
      100% 100%,
      26px 100%,
      0 calc(100% - 28px));
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 1;
  padding: 1.35rem 1.6rem;
  /* القشرة هي الحدود: بيكسل هيرلاين حوالين البانل الداخلي */
  background: var(--line);
  clip-path: var(--cl-clip);
  transition: background 420ms var(--ease);

  [dir="rtl"] & {
    --cl-clip: polygon(18px 0,
        100% 0,
        100% calc(100% - 28px),
        calc(100% - 26px) 100%,
        0 100%,
        0 20px);
  }

  /* البانل الداخلي */
  &::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    background: var(--paper);
    clip-path: var(--cl-clip);
  }

  /* الشريط الأحمر العلوي، بيتمدد من بداية السطر */
  /* &::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset-block-start: 1px;
    inset-inline-start: 1px;
    width: 34px;
    height: 3px;
    background: var(--red);
    transition: width 420ms var(--ease);
  } */

  img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(1) opacity(0.62);
    transition: filter 420ms var(--ease);
  }

  .client-slide:hover &,
  .client-slide:focus-within & {
    background: var(--red);

    &::after {
      width: calc(100% - 2px);
    }

    img {
      filter: none;
    }
  }

  @media (max-width: 640px) {
    padding: 1rem 1.15rem;
  }
}
/* =============================================================
   12. WHERE WE WORK  ->  <section class="section sectors-section wwork">
   ============================================================= */
.wwork {
  position: relative;
  overflow: hidden;
  padding-block-end: 0;

  .wwork-head {
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;

    h2 {
      max-width: none;
      margin-inline: auto;
    }
  }

  .wwork-stage {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3.5vw, 3.5rem);
    align-items: stretch;

    @media (max-width: 1100px) {
      grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(0, 1fr);
      column-gap: 1.5rem;
    }

    @media (max-width: 900px) {
      grid-template-columns: 1fr;
      row-gap: 0;

      .wwork-col-a {
        order: 1;
      }

      .wwork-col-b {
        order: 2;
      }

      .wwork-figure {
        order: 3;
      }
    }
  }

  .wwork-col {
    display: grid;
    align-content: center;
    gap: clamp(2rem, 4vw, 3.25rem);
    padding-block: 1rem clamp(3rem, 6vw, 5rem);

    @media (max-width: 900px) {
      padding-block: 0;
    }

    &.wwork-col-a .wwork-item {
      flex-direction: row-reverse;
      text-align: end;

      @media (max-width: 900px) {
        flex-direction: row;
        text-align: start;
      }
    }

    &.wwork-col-b {
      .wwork-item {
        text-align: start;
      }

      @media (max-width: 900px) {
        margin-top: clamp(2rem, 4vw, 3rem);
      }
    }
  }

  .wwork-figure {
    position: relative;
    align-self: end;
    margin: 0;
    line-height: 0;

    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset-inline: 4%;
      bottom: 0;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 40%,
          rgb(197 21 40 / 0.1),
          rgb(197 21 40 / 0.03) 60%,
          transparent 72%);
    }

    img {
      width: 100%;
      height: auto;
      margin-inline: auto;
    }

    @media (max-width: 900px) {
      width: min(78%, 340px);
      margin: 2.5rem auto 0;
    }
  }

  .wwork-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;

    &:hover h3 {
      color: var(--red);
    }

    @media (max-width: 1100px) {
      gap: 1rem;
    }
  }

  .wwork-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    color: var(--red);
    transition: transform 320ms var(--ease);

    @media (max-width: 1100px) {
      width: 56px;
      height: 56px;
    }

    @media (max-width: 640px) {
      width: 52px;
      height: 52px;
    }
  }

  .wwork-svg {
    width: 100%;
    height: 100%;
  }

  .wwork-icon > i {
    font-size: 2.35rem;
    line-height: 1;
  }

  .wwork-copy {
    h3 {
      max-width: none;
      margin: 0 0 0.55rem;
      color: var(--ink);
      font-size: clamp(1.3rem, 1.9vw, 1.7rem);
      line-height: 1.2;
      transition: color 240ms var(--ease);
    }

    p {
      margin: 0;
      color: var(--muted);
      font-size: 0.98rem;
      line-height: 1.75;
    }
  }

  .wwork-item-cta {
    color: inherit;
    text-decoration: none;
    position: relative;
    padding: 0.75rem;
    /* margin: 0.5rem -0.75rem; */
    border-radius: 20px;
    background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
    cursor: pointer;
    transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;

    @media (max-width: 1100px) {
      gap: 1rem;
    }

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(197, 21, 40, 0.1) 0%, transparent 100%);
      opacity: 0;
      transition: opacity 280ms ease;
      pointer-events: none;
    }

    &:hover::before {
      opacity: 1;
    }

    .wwork-icon {
      position: relative;
      z-index: 2;
      transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), color 240ms ease, filter 280ms ease;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
      flex: none;
      display: grid;
      place-items: center;
      width: 68px;
      height: 68px;

      @media (max-width: 1100px) {
        width: 56px;
        height: 56px;
      }

      &::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(197, 21, 40, 0.15) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 280ms ease;
        pointer-events: none;
      }
    }

    &:hover .wwork-icon::after {
      opacity: 1;
    }

    .wwork-svg {
      display: block;
      width: 100%;
      height: 100%;

      circle {
        fill: #fff;
        stroke: var(--red);
        stroke-width: 1.8;
        transition: fill 240ms ease, stroke 240ms ease, stroke-width 240ms ease;
      }

      path {
        stroke: var(--red);
        stroke-width: 2.2;
        transition: stroke 240ms ease, transform 240ms ease, stroke-width 240ms ease;
      }
    }

    &:hover .wwork-svg {
      circle {
        fill: var(--red);
        stroke: var(--red);
        stroke-width: 2;
      }

      path {
        stroke: #fff;
        stroke-width: 2.5;
      }
    }

    h3 {
      color: var(--red);
      font-weight: 700;
      transition: color 240ms ease;
    }

    p {
      color: var(--soft-on-dark);
      font-weight: 500;
      transition: color 240ms ease;
    }

    [dir="rtl"] & .wwork-svg {
      transform: scaleX(-1);
    }
  }

  .wwork-ruler {
    position: absolute;
    z-index: 1;
    inset-inline: 0;
    bottom: 0;
    height: 42px;
    background-image:
      linear-gradient(to right, #c9d1db 1px, transparent 1px),
      linear-gradient(to right, #dbe1e8 1px, transparent 1px);
    background-size: 98px 40px, 24.5px 16px;
    background-position: left bottom, left bottom;
    background-repeat: repeat-x;
    pointer-events: none;

    @media (max-width: 640px) {
      background-size: 70px 32px, 17.5px 12px;
      height: 34px;
    }
  }

  @media (prefers-reduced-motion: reduce) {

    .wwork-item:hover .wwork-icon,
    .wwork-item-cta:hover .wwork-icon {
      transform: none;
    }
  }
}

/* =============================================================
   13. EXECUTE SECTION  ->  <section class="section section-alt execute-section">
   ============================================================= */
.execute-section {
  .execute-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: center;

    @media (max-width: 900px) {
      grid-template-columns: 1fr;
      gap: clamp(2rem, 5vw, 3.5rem);

      .execute-visual {
        order: -1;
        max-width: 100%;
        margin: 0 auto;
      }
    }

    @media (max-width: 640px) {
      gap: 2rem;
    }
  }

  .execute-visual {
    @media (max-width: 900px) {
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
    }

    @media (max-width: 640px) {
      max-width: 100%;
    }
  }

  /* .tab-buttons / .tab-button / .tab-panel come from the shared
     "Tabs" component (see section 5) */
}

/* =============================================================
   14. PROJECTS SHOWCASE  ->  <section class="section projects-section">
   ============================================================= */
.projects-section {
  .projects-showcase {
    display: grid;
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: start;
    margin-top: clamp(2rem, 4vw, 3rem);

    @media (max-width: 1120px) {
      grid-template-columns: 1fr;
    }
  }

  .projects-list {
    display: grid;
    align-content: start;
    gap: 0.85rem;
  }

  .project-list-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 76px;
    padding: 1rem 1.35rem;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    /* font-family: "Barlow Condensed", "Alexandria", sans-serif; */
    font-size: 1.08rem;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
    overflow: hidden;
    transition:
      background 260ms var(--ease),
      color 260ms var(--ease),
      border-color 260ms var(--ease),
      transform 260ms var(--ease),
      box-shadow 260ms var(--ease);

    &::before {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: var(--red);
      transform: scaleY(0);
      transition: transform 260ms var(--ease);
    }

    &:hover {
      border-color: var(--red);
      color: var(--red);
      transform: translateX(-4px);

      [dir="ltr"] & {
        transform: translateX(4px);
      }
    }

    &.is-active {
      border-color: var(--red);
      background: var(--red);
      color: #fff;
      box-shadow: 0 16px 32px rgb(197 21 40 / 0.28);
      transform: translateX(-6px);

      [dir="ltr"] & {
        transform: translateX(6px);
      }

      &::before {
        transform: scaleY(1);
      }

      .project-list-arrow {
        color: #fff;
      }
    }

    &:focus-visible {
      z-index: 1;
    }

    @media (max-width: 640px) {
      padding: 0.85rem 1.1rem;
      font-size: 1rem;
    }

    /* القايمة بعرض الشاشة في العمود الواحد، فالإزاحة الجانبية
       للعنصر النشط كانت بتطلعه برا الحافة وتتقص (أوضح في الـEN).
       الشريط الأحمر ::before كفاية كإشارة هنا. */
    @media (max-width: 900px) {

      &:hover,
      &.is-active,
      [dir="ltr"] &:hover,
      [dir="ltr"] &.is-active {
        transform: none;
      }
    }
  }

  .project-list-arrow {
    flex: none;
    color: var(--muted);
    font-size: 0.95rem;
    transform: rotate(-45deg);
    transition: color 260ms var(--ease), transform 260ms var(--ease);

    [dir="rtl"] & {
      transform: rotate(225deg) translate(2px, -2px);
    }
  }

  .project-panels-wrapper {
    position: relative;
  }

  .project-panel-group {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3rem);
    transition: opacity 320ms var(--ease), transform 320ms var(--ease);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    position: absolute;
    inset: 0;

    &.is-active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
      position: relative;
    }

    &.is-switching {
      opacity: 0;
      transform: translateY(10px);
    }

    @media (max-width: 1120px) {
      grid-template-columns: 1fr;
    }
  }

  .project-media-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.25rem 1.6rem;
    background: linear-gradient(165deg, var(--navy-deep), var(--navy));
    box-shadow: var(--shadow);
    transition: transform 320ms var(--ease);

    &:hover {
      transform: translateY(-4px);

      .project-media-frame img {
        transform: scale(1.06);
      }
    }

    @media (max-width: 640px) {
      padding: 1rem 1rem 1.3rem;
    }
  }

  .project-media-frame {
    position: relative;
    flex: 1;
    min-height: 420px;
    overflow: hidden;
    background: var(--navy-deep);
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 700ms var(--ease);
    }

    @media (max-width: 1120px) {
      min-height: 260px;
    }
  }

  .project-media-foot {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.4rem;
    color: var(--soft-on-dark);
  }

  .project-media-tag {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .project-media-rule {
    flex: 1;
    height: 1px;
    background: rgb(255 255 255 / 0.18);
  }

  .project-media-index {
    /* font-family: "Barlow Condensed", sans-serif; */
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
  }

  .project-showcase-info {
    display: flex;
    flex-direction: column;
  }

  .project-info-tag {
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 1rem;
    padding: 0.4rem 0.9rem;
    background: var(--surface-2);
    color: var(--red);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .project-info-title {
    max-width: 22ch;
    margin-bottom: 1rem;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  }

  .project-info-desc {
    max-width: 54ch;
    margin-bottom: 1.5rem;
    color: var(--muted);
    font-size: 1.03rem;
  }

  .project-info-point {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-weight: 700;

    .project-info-point-icon {
      color: var(--red);
      font-size: 0.85rem;
    }
  }

  .project-info-cta {
    align-self: flex-start;
  }
}

/* =============================================================
   15. QUALITY SECTION  ->  <section class="section quality-section">
   ============================================================= */
.quality-section {
  background: #fff;

  .button {
    margin-top: 2.25rem;
  }

  .quality-award-shell {
    position: relative;
    overflow: hidden;
    border-bottom-right-radius: 28px;

    [dir="rtl"] & {
      border-bottom-left-radius: 28px;
      border-bottom-right-radius: 0;
    }
  }

  .quality-award-grid-shell {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    align-items: end;

    @media (max-width: 900px) {
      grid-template-columns: 1fr;
    }
  }

  .quality-award-panel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    padding: 3rem 2rem;
    background: url("../images/quality-bg.png");
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    min-height: 420px;
    clip-path: var(--card-clipEn);

    [dir="rtl"] & {
      clip-path: var(--card-clip);
    }

    @media (max-width: 640px) {
      clip-path: none;

      [dir="rtl"] & {
        clip-path: none;
      }
    }

    .button-secondary {
      border-color: rgb(255 255 255 / 0.6);
      background: transparent;
      color: #fff;
      margin-top: 1rem;

      &:hover {
        background: rgb(255 255 255 / 0.15);
        color: #fff;
        border-color: #fff;
      }
    }

    @media (max-width: 900px) {
      padding: 2.5rem 2rem;
    }
  }

  .quality-award-badge {
    position: relative;
    z-index: 1;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 100%;
      height: auto;
      filter: drop-shadow(0 10px 20px rgb(4 17 46 / 0.35));
    }

    @media (max-width: 640px) {
      /* width: 68px; */
      height: 68px;
    }
  }

  .quality-award-brand {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.1rem;
    border: 1px solid rgb(255 255 255 / 0.42);

    strong {
      /* font-family: "Barlow Condensed", "Arial Narrow", sans-serif; */
      font-size: 1.15rem;
      font-weight: 900;
      letter-spacing: 0.06em;
    }
  }

  .quality-award-statement {
    position: relative;
    z-index: 1;
    max-width: 16ch;
    margin: 0;
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
    font-weight: 800;
    line-height: 1.15;

    small {
      display: block;
      margin-top: 0.55rem;
      font-family: "Alexandria", "Manrope", sans-serif;
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0;
      opacity: 0.85;
    }
  }

  .quality-award-panel-dark {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--navy-deep);

    @media (max-width: 900px) {
      grid-template-columns: 1fr;
    }
  }

  .quality-award-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--navy-deep);
    color: var(--on-dark);

    span img {
      width: 56px;
      height: 56px;
    }

    .quality-award-icon i {
      color: #fff;
      font-size: 2.8rem;
    }

    strong {
      font-size: 1.08rem;
      font-weight: 800;
      line-height: 1.35;
    }

    span {
      color: var(--soft-on-dark);
      font-size: 0.92rem;
      line-height: 1.65;
    }
  }

  .quality-award-foot {
    margin-top: clamp(2rem, 4vw, 2.75rem);
  }
}

/* =============================================================
   16. FAQ SECTION  ->  <section class="section section-alt faq-section">
   ============================================================= */
.faq-section {
  position: relative;
  background-image: url("../images/faq.png");
  background-size: cover;
  background-position: center;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(243, 245, 247, 0.95) 0%, rgba(243, 245, 247, 0.425) 100%);
    pointer-events: none;
  }

  .faq-decoration {
    position: absolute;
    top: -80px;
    right: 4%;
    max-width: 200px;
    pointer-events: none;
    z-index: 0;
    animation: float-vertical 3s ease-in-out infinite;

    [dir="rtl"] & {
      right: auto;
      left: 4%;
    }

    /* في العمود الواحد الونش كان بيركب على العنوان — أوضح في
       الإنجليزي لأن السطور بتخلص عند نفس الجهة اللي هو فيها */
    @media (max-width: 900px) {
      top: -60px;
      max-width: 110px;
      opacity: 0.35;
    }

    @media (max-width: 640px) {
      display: none;
    }
  }

  .faq-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;

    @media (max-width: 900px) {
      grid-template-columns: 1fr;
    }
  }

  .faq-list {
    display: grid;
    gap: 0.8rem;
  }

  .faq-item {
    padding: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 280ms var(--ease), box-shadow 280ms var(--ease), transform 280ms var(--ease);

    &[open] {
      border-color: var(--red);

      >p {
        animation: answer-in 380ms var(--ease) both;
      }

      .faq-icon {
        transform: rotate(45deg);
        background: linear-gradient(135deg, var(--red) 0%, #9d101f 100%);
      }
    }

    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.4rem 1.5rem;
      font-size: 1.06rem;
      font-weight: 700;
      cursor: pointer;
      list-style: none;
      transition: background 280ms var(--ease);

      &:hover {
        background: rgba(197, 21, 40, 0.03);
      }

      &::-webkit-details-marker {
        display: none;
      }
    }

    p {
      margin: 0 0 1.5rem;
      padding: 0 1.5rem 1.5rem;
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.7;
      max-height: 0;
      opacity: 0;
      transform: translateY(-10px);
      transition: max-height 320ms var(--ease), opacity 320ms var(--ease), transform 320ms var(--ease);
      overflow: hidden;
    }

    @media (prefers-reduced-motion: reduce) {
      &[open]>p {
        animation: none !important;
      }
    }
  }

  .faq-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: #fff;
    font-size: 0.9rem;
    transition: transform 320ms var(--ease), background 320ms var(--ease);
  }
}

@keyframes float-vertical {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

@keyframes answer-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* =============================================================
   17. CTA BAND  ->  <section class="cta-band">
   ============================================================= */
.cta-band {
  position: relative;
  overflow: hidden;
  background: url("../images/cta.png");
  background-size: cover;
  background-position: center;
  color: var(--on-dark);
  padding: clamp(3rem, 6vw, 5rem) 0;

  @media (max-width: 900px) {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
  }

  @media (max-width: 640px) {
    padding: clamp(2rem, 4vw, 3rem) 0;
  }
}

.cta-banner-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 3rem);
}

.cta-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.cta-content h2 {
  font-size: clamp(1.95rem, 3.6vw, 3.05rem);
}

.cta-content p {
  max-width: 48ch;
  color: var(--soft-on-dark);
}

.cta-image {
  max-width: 400px;
  height: auto;
}

[dir="ltr"] {
  .cta-image {
    transform: scaleX(-1);
  }
}

@media (max-width: 900px) {
  .cta-banner-wrapper {
    flex-direction: column;
    text-align: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);

    .cta-content {
      order: 1;
      padding: 0 1rem;
    }

    .cta-image {
      order: 2;
    }
  }

  .cta-content {
    max-width: 100%;
  }

  .cta-content h2 {
    margin-bottom: 1rem;
  }

  .cta-content p {
    margin-inline: auto;
    margin-bottom: 1.5rem;
  }

  .cta-image {
    max-width: 300px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .cta-banner-wrapper {
    gap: 1.5rem;
  }

  .cta-content {
    padding: 0 0.5rem;
  }

  .cta-content h2 {
    margin-bottom: 0.75rem;
  }

  .cta-content p {
    margin-bottom: 1.25rem;
  }

  .cta-image {
    max-width: 200px;
  }
}

/* =============================================================
   18. SITE FOOTER  ->  <footer class="site-footer">
   ============================================================= */
.site-footer {
  padding-block: 3.25rem 1.5rem;
  background: var(--navy-deep);
  color: var(--on-dark);

  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2.5rem;

    @media (max-width: 640px) {
      grid-template-columns: 1fr;
    }
  }

  .footer-brand {
    max-width: 34ch;

    strong {
      display: block;
      margin-bottom: 0.8rem;
      font-size: 1.45rem;
    }

    p {
      color: var(--soft-on-dark);
    }
  }

  .footer-logo-crop {
    position: relative;
    width: 180px;
    height: auto;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 8px;
    padding: 0.5rem;

    img {
      width: 100%;
      height: auto;
      max-width: 180px;
      object-fit: contain;
      transition: transform 0.3s ease, filter 0.3s ease;
    }

    &:hover img {
      transform: scale(1.05);
      filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
    }
  }

  .footer-links {
    display: grid;
    align-content: start;
    gap: 0.55rem;

    a {
      color: var(--soft-on-dark);

      &:hover {
        color: #fff;
      }
    }
  }

  .footer-note {
    color: var(--soft-on-dark);
  }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgb(255 255 255 / 0.14);
    font-size: 0.88rem;

    @media (max-width: 900px) {
      flex-direction: column;
    }
  }
}

/* =============================================================
   19. OTHER-PAGE COMPONENTS
   (not present on the homepage HTML supplied, but used by the
   inner pages linked from the nav: about / services / sectors /
   projects / delivery / quality / contact)
   ============================================================= */

/* Page / detail hero banners */
.page-hero,
.detail-hero {
  min-height: 62dvh;
  display: flex;
  align-items: end;
  padding-block: clamp(4rem, 9vw, 8rem);
  border-bottom: 1px solid var(--line);

  /* بعد الـbreadcrumb، 62dvh كانت بتسيب فراغ كبير فوق نص قصير
     في الموبايل؛ المحتوى هو اللي يحدد الطول هنا */
  @media (max-width: 900px) {
    min-height: 0;
    padding-block: clamp(3rem, 8vw, 4.5rem);
  }

  /* العمودين بيتفعّلوا بس للهيروهات اللي فيها بلوك صور فعلًا،
     فالصفحات النصّية (sectors / delivery / contact) تفضل زي ما هي. */
  .container:has(> .hero-images),
  .container:has(> .hero-collage) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;

    @media (max-width: 900px) {
      grid-template-columns: 1fr;
    }
  }

  .hero-content {
    h1 {
      max-width: 16ch;
      margin-bottom: 1.25rem;
      font-size: clamp(1.95rem, 3.4vw, 3.05rem);
    }

    p {
      max-width: 60ch;
      margin-bottom: 0;
      color: var(--muted);
      font-size: 1.12rem;
    }

    .eyebrow {
      margin-bottom: 1rem;
    }
  }

  .hero-images {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 500px;
    margin-inline-start: auto;

    .hero-image-base {
      position: absolute;
      bottom: 0;
      inset-inline-end: 0;
      width: 85%;
      height: 75%;
      object-fit: cover;
      border: 8px solid var(--red);
      box-shadow: var(--shadow);
      z-index: 1;
    }

    .hero-image-overlay {
      position: absolute;
      top: 0;
      inset-inline-start: 0;
      width: 65%;
      height: 55%;
      object-fit: cover;
      border: 8px solid var(--paper);
      box-shadow: var(--shadow);
      z-index: 2;
    }

    /* ---- Handmade moodboard extras (opt-in): a third accent photo,
       small pinned dots and a floating stat sticker. These only
       render when the matching markup is present, so pages that
       still ship just the base + overlay photos are unaffected. ---- */
    .hero-image-accent {
      position: absolute;
      z-index: 3;
      inset-inline-start: 4%;
      bottom: -8%;
      width: 46%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border: 8px solid var(--paper);
      box-shadow: var(--shadow);
      transform: rotate(-7deg);
      transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);

      &:hover {
        transform: rotate(0deg) translateY(-6px);
        box-shadow: 0 30px 56px rgb(7 29 73 / 0.28);
        z-index: 6;
      }
    }

    .hero-pin {
      position: absolute;
      z-index: 4;
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--navy-deep);
      color: #fff;
      font-size: 0.78rem;
      box-shadow: 0 10px 20px rgb(4 17 46 / 0.35);
    }

    .hero-pin-a {
      inset-inline-start: 44%;
      top: 8%;
      transform: rotate(-12deg);
    }

    .hero-pin-b {
      inset-inline-end: 16%;
      bottom: 22%;
      transform: rotate(10deg);
    }

    .hero-tag {
      position: absolute;
      z-index: 5;
      inset-inline-end: -14px;
      top: 34%;
      display: grid;
      gap: 0.15rem;
      padding: 0.85rem 1.1rem;
      background: var(--red);
      color: #fff;
      transform: rotate(-4deg);
      box-shadow: 0 18px 32px rgb(197 21 40 / 0.32);

      strong {
        font-size: 1.4rem;
        font-weight: 800;
        line-height: 1;
      }

      span {
        display: block;
        max-width: 11ch;
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        opacity: 0.92;
        line-height: 1.35;
      }
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      inset-inline-start: 0;
      width: 48%;
      height: 46%;
      background: var(--red);
      transform-origin: left;
      z-index: 0;
      border-radius: 12px;

      [dir="rtl"] & {
        transform-origin: right;
      }
    }
  }

  @media (max-width: 640px) {
    min-height: 48dvh;

    .container {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .hero-images {
      max-width: 100%;
      height: 300px;
      margin-inline-start: 0;

      .hero-image-accent,
      .hero-tag {
        display: none;
      }
    }
  }
}

/* Breadcrumb */
.breadcrumb {
  position: relative;
  padding-top: 5.5rem;
  min-height: 350px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/breadcrumb.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scaleX(-1);
    z-index: 0;

    @media (max-width: 600px) {
      background-position: unset;
    }
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
  }

  [dir="rtl"] &::after {
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);

  }

  [dir="rtl"] &::before {
    transform: none !important;
  }

  /* المحتوى يفضل طبيعي */
  &>* {
    position: relative;
    z-index: 1;
  }



  .container {
    position: relative;
    z-index: 2;
  }

  .breadcrumb-wrapper-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;

    .page-heading {
      flex: 1;
      min-width: 0;
    }

    .breadcrumb-image {
      flex: none;
      height: 380px;
      width: auto;
      max-width: 50%;
      object-fit: contain;
      object-position: bottom;

      @media (max-width: 1120px) {
        height: 320px;
      }

      @media (max-width: 900px) {
        height: 260px;
        max-width: 45%;
      }

      /* في الموبايل الصورة كانت بتغطي العنوان، والخلفية كفاية */
      @media (max-width: 640px) {
        display: none;
      }
    }

    .bar-shape {
      position: absolute;
      top: -135px;
      bottom: 0;
      right: -12%;
      z-index: -1;
      /* transform: scaleX(-1); */

      img {
        opacity: 0.4;
      }

      [dir="rtl"] & {
        right: unset;
        left: -12%;
        transform: scaleX(-1);
      }

      @media (max-width: 640px) {
        top: -60px;
        right: -40%;

        [dir="rtl"] & {
          left: -40%;
        }
      }
    }
  }

  @media (max-width: 900px) {
    min-height: 300px;
    padding-top: 3rem;
  }

  @media (max-width: 640px) {
    min-height: 220px;
    padding-block: 3rem;
  }

  .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 1rem;

    @media (max-width: 640px) {
      gap: 0.5rem;
      font-size: 0.9rem;
      margin-bottom: 0.6rem;
    }
  }

  .breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    a {
      color: #fff;
      text-decoration: none;
      transition: color 220ms var(--ease);

      &:hover {
        color: var(--red);
      }
    }

    &:not(:last-child)::after {
      content: "/";
      opacity: 0.7;
      color: #fff;
    }

    &[aria-current="page"] {
      color: #fff;
      font-weight: 600;
    }
  }

  .breadcrumb-title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    color: #fff;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    text-wrap: balance;
    overflow-wrap: break-word;
  }
}

.section h2 {
  max-width: 16ch;
  margin-bottom: 1.25rem;
  font-size: clamp(1.95rem, 3.4vw, 3.05rem);
}

/* Two-column prose layout (about/service detail pages) */
.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;

  /* h2 {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
  } */

  @media (max-width: 900px) {
    grid-template-columns: 1fr;

    h2 {
      position: static;
    }
  }
}

.prose {
  max-width: 70ch;

  p {
    color: var(--muted);
  }

  h3 {
    margin-top: 2.5rem;
    font-size: 1.65rem;
  }
}

.statement {
  margin: 0;
  padding-inline-start: 1.5rem;
  border-inline-start: 5px solid var(--red);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.35;
  font-weight: 720;
}

/* Generic tile grids: values / service overview / systems / sector.
   The QA/QC grid is not part of this set any more; see section 24. */
.values-grid,
.service-overview,
.systems-grid,
.sector-list {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto;
  gap: 2rem;
  background: transparent;
  border: none;
  padding: 3rem 0;
  position: relative;

  /* Decorative background elements */
  &::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -5%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(197, 21, 40, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: -10%;
    left: -5%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(7, 29, 73, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }

  @media (max-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 1.5rem;
  }

  @media (max-width: 640px) {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 2rem 0;

    &::before,
    &::after {
      display: none;
    }
  }
}

.value-item,
.system-card,
.sector-item {
  min-height: 200px;
  padding: 2.5rem;
  background: var(--surface);
  /* border-radius: 24px; */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  cursor: pointer;
  border: 2px solid transparent;

  /* Asymmetric layout - different sizes and positions */
  &:nth-child(1) {
    grid-column: span 5;
    grid-row: span 2;
    min-height: 420px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);

    h3,
    p {
      color: #fff;
    }

    p {
      opacity: 0.95;
    }
  }

  &:nth-child(2) {
    grid-column: span 7;
  }

  &:nth-child(3) {
    grid-column: span 4;
  }

  &:nth-child(4) {
    grid-column: span 4;
  }

  &:nth-child(5) {
    grid-column: span 4;
  }

  &:nth-child(6) {
    grid-column: span 7;
  }

  @media (max-width: 1024px) {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    min-height: 200px;
  }

  @media (max-width: 640px) {
    min-height: auto;
    padding: 2rem;
  }

  /* Active state for touch feedback */
  &:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  &::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, var(--red), transparent 30%);
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: rotate 6s linear infinite;
    pointer-events: none;
  }

  &::after {
    content: '';
    position: absolute;
    inset: 2px;
    /* border-radius: 22px; */
    background: var(--surface);
    z-index: 0;
    transition: background 0.5s ease;
  }

  &:nth-child(1)::after {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  }

  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }

  &:hover {
    transform: translateY(-16px) scale(1.02);
    box-shadow: 0 25px 60px rgba(197, 21, 40, 0.15), 0 10px 30px rgba(0, 0, 0, 0.1);

    &::before {
      opacity: 0.15;
    }

    h3 {
      transform: translateX(8px);
    }
  }

  &:focus-within {
    outline: 3px solid var(--red);
    outline-offset: 4px;
  }

  h3 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
  }

  p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
    position: relative;
    z-index: 1;
    opacity: 0.9;
  }

  /* Staggered animation on load */
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;

  &:nth-child(1) {
    animation-delay: 0.1s;
  }

  &:nth-child(2) {
    animation-delay: 0.2s;
  }

  &:nth-child(3) {
    animation-delay: 0.3s;
  }

  &:nth-child(4) {
    animation-delay: 0.4s;
  }

  &:nth-child(5) {
    animation-delay: 0.5s;
  }

  &:nth-child(6) {
    animation-delay: 0.6s;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.value-item:nth-child(3n),
.system-card:nth-child(3n) {
  background: var(--surface-2);
}

.sector-list {
  grid-template-columns: 1.2fr 0.8fr 0.8fr;

  @media (max-width: 900px) {
    grid-template-columns: 1fr 1fr;
  }

  @media (max-width: 640px) {
    grid-template-columns: 1fr;
  }
}

.sector-item:first-child {
  grid-row: span 2;
  background: var(--navy);
  color: var(--on-dark);

  p {
    color: var(--soft-on-dark);
  }

  @media (max-width: 900px) {
    grid-column: span 2;
    grid-row: auto;
    min-height: 330px;
  }

  @media (max-width: 640px) {
    grid-column: auto;
    min-height: 280px;
  }
}

/* Sector tiles (auto-fit) */
.sector-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);

  @media (max-width: 640px) {
    grid-template-columns: 1fr;
  }
}

/* Safety Cards Container */
.safety-cards-container {
  --n: 4;
  --wide: 1;
  --narr: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  counter-reset: idx;
  position: relative;
  /* الكروت العريضة (40em) بتتحدد على عرض العمود نفسه مش الشاشة،
     لأنها جوه .content-grid وعمودها أضيق بكتير من الـviewport */
  container-type: inline-size;
}

/* العنوان يظل ثابت أثناء السكرول */
.content-grid>h2 {
  position: sticky;
  top: 80px;
  z-index: 10;
  background: var(--bg);
  padding: 16px 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.safety-cards-container::after {
  margin-top: 1em;
  width: 25em;
  height: 1.5em;
  max-width: 100%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, .35) 15%, transparent);
  filter: blur(3px);
  content: '';
}

.safety-card {
  --i: var(--wide, 1);
  --j: calc(1 - var(--i));
  --k: calc(1 - var(--narr, 1));
  --p: var(--parity, 1);
  --q: calc(1 - var(--p));
  --s: calc(1 - 2 * var(--p));
  display: flex;
  gap: 20px;
  width: 100%;
  flex-direction: var(--narr, column);
  align-items: center;
  justify-content: center;
  margin: calc(var(--j) * .25em) 0;
  padding:
    calc(var(--i) * 10em / var(--n) + var(--j) * 5vw) calc(var(--i) * 10em + var(--j) * 2vw);
  width: calc(var(--i) * 40em + var(--j) * 100%);
  min-height: var(--wide, calc(40em / var(--n)));
  transform: translate(calc(var(--i) * var(--s) * -1.5em));
  background:
    radial-gradient(at calc(var(--q) * 100%) 0,
      rgba(0, 0, 0, calc(.5 + var(--p) * .5)),
      transparent 63%) calc(var(--q) * 100%) 0/65% 65% no-repeat,
    linear-gradient(calc(var(--s) * -90deg),
      hsl(354, calc(var(--q) * 82%), calc(27% + var(--q) * 20%)),
      hsl(215, calc(var(--q) * 82%), 19%));
  color: hsl(0, 0%, calc(var(--p) * 100%));
  text-align: var(--parity, right);
  clip-path: var(--wide, circle(20em at 50% calc((.5 * var(--n) - var(--idx)) * 40em / var(--n))));
  counter-increment: idx;
}

.safety-card:nth-child(1) {
  background:
    radial-gradient(at 100% 0,
      rgba(0, 0, 0, .5),
      transparent 63%) 100% 0/65% 65% no-repeat,
    linear-gradient(-90deg,
      var(--red),
      var(--red-dark));
  color: #fff;

  &::before {
    color: #fff;
  }
}

.safety-card:nth-child(2) {
  background:
    radial-gradient(at 0% 0,
      rgba(0, 0, 0, .5),
      transparent 63%) 0% 0/65% 65% no-repeat,
    linear-gradient(90deg,
      var(--navy-deep),
      var(--navy));
  color: #fff;

  &::before {
    color: #fff;
  }
}

.safety-card:nth-child(3) {
  background:
    radial-gradient(at 100% 0,
      rgba(0, 0, 0, .5),
      transparent 63%) 100% 0/65% 65% no-repeat,
    linear-gradient(-90deg,
      var(--red),
      var(--red-dark));
  color: #fff;

  &::before {
    color: #fff;
  }
}

.safety-card:nth-child(4) {
  background:
    radial-gradient(at 0% 0,
      rgba(0, 0, 0, .5),
      transparent 63%) 0% 0/65% 65% no-repeat,
    linear-gradient(90deg,
      var(--navy-deep),
      var(--navy));
  color: #fff;

  &::before {
    color: #fff;
  }
}

.safety-card::before {
  order: calc(var(--k) * var(--p));
  font-size: 4em;
  content: counter(idx, decimal-leading-zero);
}

.safety-card span {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}

.safety-card strong {
  font-size: 1.3em;
  font-weight: 700;
}

.safety-card:nth-child(odd) {
  --parity: 0;
}

.is-ltr .safety-card {
  text-align: left;
}

@media (min-width: 270px) {
  .safety-cards-container {
    --narr: 0;
  }
}

/* 40em كارت + 1.5em إزاحة يمين وشمال = 43em. أقل من كده الشكل
   العريض كان بيطلع برا العمود ويتزنق النص بين padding 10em.
   المتغيرات بتتحط على الكارت نفسه لأن الـcontainer query ما
   بيقدرش يستهدف الـcontainer ذاته. */
@container (max-width: 43em) {
  .safety-card {
    --wide: 0;
    gap: 1.1rem;
    margin: 0 0 0.6rem;
    padding: clamp(1.1rem, 4cqi, 1.6rem) clamp(1.1rem, 5cqi, 1.9rem);
    min-height: 0;
    font-size: 0.95rem;
    line-height: 1.7;

    &::before {
      flex: none;
      font-size: clamp(2.2rem, 9cqi, 3rem);
      line-height: 1;
      font-weight: 800;
      opacity: 0.85;
    }

    strong {
      font-size: 1.15rem;
    }
  }

  .safety-cards-container {
    min-height: 0;
  }
}

/* على الموبايل الصغير الرقم فوق النص بدل جنبه عشان النص ياخد
   العرض كله */
@container (max-width: 22em) {
  .safety-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;

    &::before {
      order: 0;
    }
  }
}

/* العنوان الـsticky منطقي بس جنب العمود في الديسكتوب؛ في عمود
   واحد كان بيفضل راكب فوق الكروت أثناء السكرول */
@media (max-width: 900px) {
  .content-grid>h2 {
    position: static;
    padding-top: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.sector-tile {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--paper);
  transition:
    background 280ms var(--ease),
    color 280ms var(--ease);

  &:hover {
    background: var(--navy);
    color: var(--on-dark);

    p {
      color: var(--soft-on-dark);
    }

    .sector-tile-icon {
      transform: translateY(-5px) scale(1.06);
    }
  }

  .sector-tile-icon {
    color: var(--red);
    font-size: 1.85rem;
    transition:
      transform 320ms var(--ease),
      color 260ms var(--ease),
      opacity 260ms var(--ease);
  }

  h3 {
    margin: 0;
    font-size: 1.1rem;
  }

  p {
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
  }
}

/* Filter bar + projects directory (projects.html listing) */
.filter-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* الشكل كله جاي من .tab-button في §5. الفرق: الشريط جوّه
   .filter-wrapper اللي بيتكفّل بالمسافة تحته، وقاعد فوق خلفية
   --surface-2 (القسم section-alt + الشريط نفسه)، فالزرار غير
   المختار لازم يبقى أفتح منها عشان يبان. */
.filter-bar {
  margin-bottom: 0;

  .filter-button:not([aria-pressed="true"]) {
    background: var(--paper);
  }

  .filter-button:not([aria-pressed="true"]):hover {
    background: var(--line);
  }
}

.projects-directory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);

  @media (max-width: 1024px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (max-width: 640px) {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------
   Project Card
--------------------------------------- */

.project-entry {
  --entry-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  height: 480px;
  overflow: visible;
  text-decoration: none;

  transition: transform 400ms var(--entry-ease);

  &:hover,
  &:focus-within {
    transform: translateY(-5px);
  }

  &[hidden] {
    display: none;
  }

  /* ---------------------------------------
     Image
  --------------------------------------- */

  .project-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: var(--navy-deep);

    img {
      display: block;

      width: 100%;
      height: 100%;

      object-fit: cover;

      transition: transform 650ms var(--entry-ease);
    }

    &::after {
      content: "";

      position: absolute;
      inset: 0;

      background: rgb(4 17 46 / 0.14);

      transition: background 350ms ease;
    }
  }

  /* Subtle image zoom */
  &:hover .project-image img,
  &:focus-within .project-image img {
    transform: scale(1.035);
  }

  /* ---------------------------------------
     Content
  --------------------------------------- */

  .project-content {
    position: absolute;

    inset-inline-start: -28px;
    bottom: -25px;

    width: calc(100% - 46px);
    min-height: 200px;

    z-index: 2;

    background: var(--surface);
    box-shadow: var(--shadow);

    /*
      Extra top padding because the badge
      is now INSIDE the content.
    */
    padding: 3.25rem 1.75rem 1.75rem;

    transition:
      background-color 300ms ease,
      color 300ms ease;

    [dir="rtl"] & {
      inset-inline-start: auto;
      inset-inline-end: -28px;
    }
  }

  /* ---------------------------------------
     Badge
     Fixed inside project-content
  --------------------------------------- */

  .project-entry-badge {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 64px;
    height: 76px;
    display: grid;
    place-items: center;
    background: var(--red);
    color: #fff;
    /* border: 3px solid #fff; */
    font-size: 1.35rem;
    box-shadow: 0 10px 22px rgb(7 29 73 / 0.18);
    transition:
      background-color 300ms ease,
      color 300ms ease;
  }

  /* Badge stays fixed.
     Only its background changes subtly. */
  &:hover .project-entry-badge,
  &:focus-within .project-entry-badge {
    background: var(--navy-deep);
  }

  /* ---------------------------------------
     Category
  --------------------------------------- */

  small {
    display: block;

    color: var(--red);

    font-weight: 800;
    font-size: 0.72rem;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    transition: color 250ms ease;
  }

  /* ---------------------------------------
     Title
  --------------------------------------- */

  h3 {
    max-width: 16ch;

    margin: 0.55rem 0 0.7rem;

    font-size: clamp(1.15rem, 1.8vw, 1.4rem);

    line-height: 1.3;

    color: var(--ink);

    transition: color 250ms ease;
  }

  /* ---------------------------------------
     Description
  --------------------------------------- */

  .project-entry-desc {
    margin: 0;

    color: var(--muted);

    font-size: 0.9rem;
    line-height: 1.7;

    transition: color 250ms ease;
  }

  /* ---------------------------------------
     Modern Hover Content
  --------------------------------------- */

  /* &:hover .project-content,
  &:focus-within .project-content {
    background: var(--red);
  } */

  /* &:hover small,
  &:focus-within small,
  &:hover h3,
  &:focus-within h3,
  &:hover .project-entry-desc,
  &:focus-within .project-entry-desc {
    color: #fff;
  } */

  /* ---------------------------------------
     Corner Read More
  --------------------------------------- */

  .project-entry-corner {
    position: absolute;

    z-index: 3;

    inset-inline-end: 0;
    top: 0;

    height: 52px;
    width: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.5rem;

    background: var(--navy-deep);
    color: #fff;
    border: 3px solid #fff;
    overflow: hidden;

    transition:
      width 350ms var(--entry-ease),
      background-color 300ms ease;

    [dir="rtl"] & {
      inset-inline-end: auto;
      inset-inline-start: 0;
    }

    /*
      Arrow is visible from the beginning.
    */
    i {
      flex: none;
      font-size: 0.9rem;
      transition:
        transform 300ms var(--entry-ease);

      [dir="rtl"] & {
        transform: scaleX(-1);
      }
    }

    /*
      Read More text is hidden initially.
    */
    .corner-label {
      position: absolute;

      opacity: 0;
      visibility: hidden;

      font-size: 0.78rem;
      font-weight: 700;

      white-space: nowrap;

      transition:
        opacity 220ms ease,
        transform 300ms var(--entry-ease);

      transform: translateX(8px);

      [dir="rtl"] & {
        transform: translateX(-8px);
      }
    }
  }

  /*
    Hover:
    corner expands slightly
    text appears
    arrow moves backward a little
  */

  &:hover .project-entry-corner,
  &:focus-within .project-entry-corner {
    width: 142px;

    justify-content: flex-start;

    padding-inline: 1rem;

    background: var(--red);

    .corner-label {
      position: static;

      opacity: 1;
      visibility: visible;

      transform: translateX(0);
    }

    i {
      transform: translateX(-4px) scaleX(-1);
    }
  }

  /* ---------------------------------------
     Tablet
  --------------------------------------- */

  @media (max-width: 900px) {
    height: 430px;

    .project-content {
      width: calc(100% - 32px);

      min-height: 210px;

      padding: 5rem 1.45rem 1.5rem;
    }

    .project-entry-badge {
      width: 56px;
      height: 70px;

      font-size: 1.2rem;
    }
  }

  /* ---------------------------------------
     Mobile
  --------------------------------------- */

  @media (max-width: 640px) {
    height: 400px;

    .project-content {
      bottom: 18px;

      width: calc(100% - 20px);

      min-height: 200px;

      padding: 4.75rem 1.25rem 1.4rem;
    }

    .project-entry-badge {
      width: 50px;
      height: 64px;

      font-size: 1.05rem;
    }

    .project-entry-corner {
      height: 46px;
      width: 46px;
    }

    &:hover .project-entry-corner,
    &:focus-within .project-entry-corner {
      width: 125px;
    }
  }
}

.results-note {
  color: var(--muted);
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
}

@media (max-width: 768px) {
  .filter-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-bar {
    width: 100%;
  }
}

/* Delivery method list (delivery.html) */
.delivery-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.delivery-item {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--surface);

  h3 {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
  }

  p {
    max-width: 60ch;
    margin-bottom: 0;
    color: var(--muted);
  }

  &:nth-child(even) {
    background: var(--surface-2);
  }

  @media (max-width: 900px) {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* Detail layout (project / service detail pages) */
.detail-layout {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: clamp(2rem, 7vw, 7rem);

  @media (max-width: 900px) {
    grid-template-columns: 1fr;
  }
}

.detail-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 2rem);

  @media (max-width: 900px) {
    position: static;
  }
}

.detail-meta {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  background: var(--surface);

  span {
    color: var(--muted);
  }
}

/* .scope-groups / .scope-group / .scope-list moved to section 26 with the
   rest of the service detail page. */

/* Contact page */
.contact-layout {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;

  @media (max-width: 900px) {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.contact-panel {
  padding: 2rem;
  background: var(--navy);
  color: var(--on-dark);

  p {
    color: var(--soft-on-dark);
  }

  @media (max-width: 900px) {
    padding: 1.5rem;
  }
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;

  @media (max-width: 640px) {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.field {
  display: grid;
  gap: 0.45rem;

  &.field-full {
    grid-column: 1 / -1;

    @media (max-width: 640px) {
      grid-column: auto;
    }
  }

  label {
    font-weight: 750;
  }

  input,
  select,
  textarea {
    width: 100%;
    min-height: 50px;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
  }

  textarea {
    min-height: 150px;
    resize: vertical;
  }

  input::placeholder,
  textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 88%, transparent);
  }
}

.field-error {
  min-height: 1.35rem;
  margin: 0;
  color: var(--red);
  font-size: 0.86rem;
}

.form-note {
  color: var(--muted);
  font-size: 0.9rem;
}

.form-success {
  display: none;
  padding: 1.25rem;
  border-inline-start: 5px solid var(--red);
  background: var(--surface-2);
  font-weight: 700;

  &.is-visible {
    display: block;
  }
}

/* .quality-split (quality.html + services.html) moved to section 25 with the
   rest of the "الجودة كنظام عمل" block. */

.quality-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;

  @media (max-width: 640px) {
    grid-template-columns: 1fr;
  }
}

.quality-point {
  padding-top: 1rem;
  border-top: 3px solid var(--red);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: transform 260ms var(--ease);

  span {
    color: var(--red);
    font-size: 1.35rem;
  }

  &:hover {
    transform: translateX(-6px);
  }

  [dir="ltr"] &:hover {
    transform: translateX(6px);
  }
}

/* =============================================================
   20. QUOTE / CONTACT BAND  ->  <section class="section quote-section">
   Background photo (assets/images/contact.png) on the physical
   left, contact form always pinned to the physical right side
   (in both AR and EN) so it stays aligned with the artwork.
   Uses physical `right` (not logical inset-inline-end) on purpose.
   ============================================================= */
.quote-section {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  padding-block: 0;

  .quote-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
  }

  .quote-layout {
    position: relative;
    background-image: url("../images/contact2-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-block: clamp(4rem, 8vw, 6rem);
    min-height: 600px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    align-items: center;

    [dir="rtl"] & {
      grid-template-columns: 2fr 1fr;
    }
  }

  .quote-form-wrap {
    position: relative;
    z-index: 2;
    padding: 2.5rem;
    grid-column: 2;

    [dir="rtl"] & {
      grid-column: 1;
    }
  }

  .quote-form-wrap h2 {
    max-width: none;
    margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
  }

  @media (max-width: 900px) {
    .quote-layout {
      min-height: auto;
      margin-block: clamp(3rem, 8vw, 4.5rem);
      grid-template-columns: 1fr;
      gap: 2rem;
      justify-items: center;
    }

    .quote-form-wrap {
      width: 100%;
      max-width: 560px;
      padding: 2rem;
      text-align: center;
      grid-column: 1 / -1 !important;
    }

    .quote-form-wrap h2 {
      font-size: clamp(1.5rem, 4vw, 2rem);
    }
  }

  @media (max-width: 640px) {
    .quote-layout {
      margin-block: clamp(2rem, 8vw, 3rem);
    }

    .quote-form-wrap {
      padding: 1.5rem;
    }
  }

  .quote-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    i {
      font-size: 0.62rem;
      color: var(--red);
    }
  }

  .quote-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;

    .field-full {
      grid-column: 1 / -1;
    }

    input,
    select,
    textarea {
      width: 100%;
      min-height: 54px;
      padding: 0.9rem 1.15rem;
      border: 0;
      border-radius: 6px;
      background: var(--surface-2);
      color: var(--ink);
      font-size: 0.95rem;
      transition:
        background 220ms var(--ease),
        box-shadow 220ms var(--ease);

      &::placeholder {
        color: var(--muted);
      }

      &:focus-visible {
        /* background-color مش background: الاختصار بيصفّر باقي
           خصائص الخلفية لو اتحطت عليها حاجة في قاعدة تانية */
        background-color: var(--paper);
        box-shadow: 0 0 0 2px var(--red);
        outline: none;
      }
    }

    .field-error {
      display: block;
      min-height: 0;
      margin-top: .35rem;
      color: var(--red);
      font-size: .78rem;
      line-height: 1.4;
      text-align: start;
    }

    [aria-invalid="true"] {
      box-shadow: 0 0 0 1px var(--red);
    }

    /* ---- سهم الـselect ----
       اتعمل بعنصر زائف على .field بدل linear-gradient على الـselect،
       لأن الطريقة القديمة كان فيها مشكلتين حقيقيتين:
       1) السهم كان مبني على مثلثين: الأول هو النص الشمال والتاني هو
          النص اليمين. في LTR اتحطوا بالترتيب الصح، لكن في RTL
          المواضع (1.5rem و1.1rem) كانت بتقلبهم — فالنصين بيتبادلوا
          والسهم يبان مكسور في النسخة العربية.
       2) قاعدة :focus-visible بتستخدم اختصار background اللي بيصفّر
          background-image، فالسهم كان بيختفي خالص أول ما الحقل
          يتحدد. */
    .field:has(select) {
      position: relative;
    }

    .field:has(select)::after {
      content: "";
      position: absolute;
      inset-inline-end: 1.15rem;
      top: 50%;
      width: 9px;
      height: 9px;
      /* الحدود فيزيائية عن قصد: السهم متماثل فشكله واحد في
         الاتجاهين، واللي بيتقلب هو مكانه بس (inset-inline-end). */
      border-right: 2px solid var(--muted);
      border-bottom: 2px solid var(--muted);
      transform: translateY(-65%) rotate(45deg);
      pointer-events: none;
      transition:
        border-color 200ms var(--ease),
        transform 200ms var(--ease);
    }

    .field:has(select:hover)::after {
      border-color: var(--navy);
      transform: translateY(-48%) rotate(45deg);
    }

    .field:has(select:focus-visible)::after {
      border-color: var(--red);
    }

    select {
      -webkit-appearance: none;
      appearance: none;
      /* مساحة كافية عشان أطول خيار ما يلمسش السهم */
      padding-inline-end: 2.9rem;
      cursor: pointer;
    }

    /* لو المتصفح ما بيدعمش :has() مكانش هيرسم السهم أصلاً، والـselect
       كان هيفضل من غير أي مؤشر. في الحالة دي نرجّع سهم النظام. */
    @supports not selector(:has(*)) {
      select {
        -webkit-appearance: auto;
        appearance: auto;
        padding-inline-end: 1.15rem;
      }
    }


    textarea {
      min-height: 150px;
      resize: vertical;
    }

    .quote-submit {
      grid-column: 1 / -1;
      justify-content: space-between;
      min-height: 58px;
      padding-inline: 1.5rem;
      font-size: 0.85rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transition: opacity 180ms var(--ease), transform 180ms var(--ease);

      &:disabled { cursor: wait; opacity: .82; }
      &.is-loading .quote-submit-arrow { display: none; }
      &.is-loading .quote-submit-spinner { display: inline-block; }
    }

    .quote-submit-spinner {
      display: none;
      width: 17px;
      height: 17px;
      border: 2px solid rgba(255, 255, 255, .42);
      border-top-color: #fff;
      border-radius: 50%;
      animation: quote-spinner .7s linear infinite;
    }

    @media (max-width: 640px) {
      grid-template-columns: 1fr;

      .field-full {
        grid-column: auto;
      }
    }
  }

  @keyframes quote-spinner { to { transform: rotate(360deg); } }
}

/* =============================================================
   20b. CONTACT DETAILS  ->  contact.html
   قنوات التواصل + ساعات العمل + حسابات التواصل الاجتماعي +
   مسار الطلب بعد الإرسال + جهات التواصل حسب نوع الطلب.
   ============================================================= */
.contact-channels {
  .channel-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;

    @media (max-width: 1024px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (max-width: 560px) {
      grid-template-columns: 1fr;
    }
  }

  .channel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 2rem 1.5rem 1.75rem;
    background: var(--paper);
    border-end-end-radius: 34px;
    box-shadow: 0 18px 44px rgb(7 29 73 / 0.08);
    transition:
      transform 300ms var(--ease),
      box-shadow 300ms var(--ease);

    /* الشريط الأحمر الرفيع نفس إيماءة .service-card-rule */
    &::before {
      content: "";
      position: absolute;
      inset-inline-start: 1.5rem;
      top: 0;
      width: 2.2rem;
      height: 3px;
      background: var(--red);
    }

    /* الكروت اللي بتبقى روابط (tel:/mailto:/wa.me) بعد اعتماد البيانات */
    &:is(a):hover,
    &:is(a):focus-visible {
      transform: translateY(-4px);
      box-shadow: 0 24px 54px rgb(7 29 73 / 0.14);
    }

    .channel-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      margin-bottom: 0.35rem;
      background: var(--surface-2);
      border-radius: 50%;
      color: var(--red);
      font-size: 1.25rem;
    }

    h3 {
      margin: 0;
      font-size: 1.05rem;
      line-height: 1.5;
      letter-spacing: 0;
    }

    .channel-value {
      color: var(--navy);
      font-size: 1rem;
      font-weight: 750;
      line-height: 1.7;
      /* الرقم/الإيميل لازم يتقري LTR، فبيتعزل كـ bidi run لوحده.
         لكن `text-align: start` مينفعش هنا: مع direction:ltr بيتحسب = يسار،
         وكمان مع unicode-bidi:plaintext بيتحسب على الاتجاه المستنتَج من
         المحتوى (= يسار برضه للأرقام واللاتيني). فالمحاذاة تتحدد صراحةً
         حسب اتجاه الصفحة. */
      direction: ltr;
      unicode-bidi: isolate;
      text-align: left;
      overflow-wrap: anywhere;

      [dir="rtl"] & {
        text-align: right;
      }

      /* الحالة المؤقتة نص عربي كمان */
      &.is-pending {
        direction: inherit;
        unicode-bidi: normal;
        text-align: start;
        color: var(--muted);
        font-size: 0.9rem;
        font-weight: 600;
        font-style: italic;
      }

      /* العنوان نص عربي عادي — يرجع لاتجاه الصفحة بالكامل */
      &.channel-value-text {
        direction: inherit;
        unicode-bidi: normal;
        text-align: start;
        font-size: 0.92rem;
        font-weight: 700;
        line-height: 1.8;
      }
    }

    .channel-note {
      color: var(--muted);
      font-size: 0.85rem;
      line-height: 1.8;
    }
  }
}

.contact-extra {
  .contact-extra-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;

    @media (max-width: 960px) {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
  }

  .contact-aside {
    display: grid;
    gap: 1.5rem;
  }

  .contact-hours,
  .contact-social {
    padding: 1.75rem 1.5rem;
    background: var(--surface-2);

    h3 {
      margin: 0 0 1rem;
      font-size: 1.15rem;
      line-height: 1.5;
      letter-spacing: 0;
    }

    >p {
      margin: 0 0 1.1rem;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.85;
    }
  }

  .contact-hours {
    background: var(--navy);
    color: var(--on-dark);

    h3 {
      color: #fff;
    }
  }

  .hours-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.15rem;

    li {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      padding-block: 0.7rem;
      border-bottom: 1px solid rgb(255 255 255 / 0.14);
      font-size: 0.9rem;

      &:last-child {
        border-bottom: 0;
      }

      span {
        color: var(--soft-on-dark);
      }

      strong {
        font-weight: 750;
        /* المواعيد أرقام — تفضل بترتيبها الصحيح في الاتجاهين */
        unicode-bidi: plaintext;
        white-space: nowrap;
      }
    }
  }

  .hours-note {
    margin: 1.1rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid rgb(255 255 255 / 0.14);
    color: var(--soft-on-dark);
    font-size: 0.82rem;
    line-height: 1.85;
  }

  .social-accounts {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.6rem;

    a {
      display: flex;
      align-items: center;
      gap: 0.9rem;
      padding: 0.85rem 1rem;
      background: var(--paper);
      border: 1px solid var(--line);
      transition:
        border-color 240ms var(--ease),
        background 240ms var(--ease),
        transform 240ms var(--ease);

      &:hover,
      &:focus-visible {
        background: var(--navy);
        border-color: var(--navy);
        color: var(--on-dark);
        transform: translateX(-4px);

        .social-account-icon {
          background: var(--red);
          color: #fff;
        }

        small {
          color: var(--soft-on-dark);
        }
      }

      /* السهم في نهاية الصف مهما كان اتجاه الصفحة */
      >i:last-child {
        margin-inline-start: auto;
        font-size: 0.85rem;
        transition: transform 260ms var(--ease);
      }

      &:hover>i:last-child {
        transform: translateX(-5px);
      }
    }
  }

  .social-account-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: var(--surface-2);
    border-radius: 50%;
    color: var(--navy);
    font-size: 0.95rem;
    transition:
      background 240ms var(--ease),
      color 240ms var(--ease);
  }

  .social-account-body {
    display: grid;
    gap: 0.1rem;
    min-width: 0;

    strong {
      font-size: 0.95rem;
      font-weight: 800;
      /* اسم المنصة لاتيني — يتعزل LTR لكن يفضل متحاذي مع الـ small تحتيه */
      direction: ltr;
      unicode-bidi: isolate;
      text-align: left;

      [dir="rtl"] & {
        text-align: right;
      }
    }

    small {
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.7;
      transition: color 240ms var(--ease);
    }
  }

  .request-steps {
    margin: 0 0 2.5rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1.6rem;

    li {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 1.1rem;
      padding-bottom: 1.6rem;
      border-bottom: 1px solid var(--line);

      &:last-child {
        padding-bottom: 0;
        border-bottom: 0;
      }
    }

    h3 {
      margin: 0 0 0.35rem;
      font-size: 1.05rem;
      line-height: 1.5;
      letter-spacing: 0;
    }

    p {
      margin: 0;
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.9;
      text-wrap: pretty;
    }
  }

  .request-step-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--red);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 850;
    letter-spacing: 0.04em;
  }

  .contact-routes {
    padding: 1.75rem 1.5rem;
    background: var(--surface-2);

    h3 {
      margin: 0 0 1.2rem;
      font-size: 1.1rem;
      line-height: 1.5;
      letter-spacing: 0;
    }
  }

  .routes-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;

    @media (max-width: 640px) {
      grid-template-columns: 1fr;
    }

    li {
      display: flex;
      align-items: flex-start;
      gap: 0.8rem;
    }

    i {
      flex: 0 0 auto;
      margin-top: 0.3rem;
      color: var(--red);
      font-size: 0.95rem;
    }

    strong {
      display: block;
      font-size: 0.92rem;
      font-weight: 800;
      line-height: 1.6;
    }

    /* إيميل القسم — يتعزل LTR لكن يفضل متحاذي مع الـ strong فوقه */
    a {
      display: block;
      margin-top: 0.15rem;
      color: var(--muted);
      font-size: 0.8rem;
      line-height: 1.75;
      direction: ltr;
      unicode-bidi: isolate;
      text-align: left;
      overflow-wrap: anywhere;

      [dir="rtl"] & {
        text-align: right;
      }

      border-bottom: 1px solid transparent;
      transition: color 220ms var(--ease),
      border-color 220ms var(--ease);

      &:hover,
      &:focus-visible {
        color: var(--red);
        border-bottom-color: var(--red);
      }
    }

    small {
      display: block;
      margin-top: 0.15rem;
      color: var(--muted);
      font-size: 0.8rem;
      line-height: 1.75;
    }
  }
}



/* =============================================================
   21. ABOUT PAGE COMPONENTS  ->  about.html specific sections
   (intro collage, purpose accordion + swapping photo, capability
   orbit diagram, department journey timeline, why-band, and a
   photographic variant of the commitment statement)
   ============================================================= */

/* ---- 21.1 Intro: overlapping photo collage + stat rail,
   replaces a single diagonal photo with a small gallery moment ---- */
.about-intro {
  position: relative;
  overflow: hidden;

  .intro-shape {
    position: absolute;
    inset-inline-end: -8%;
    top: -6%;
    width: 26%;
    z-index: 0;
    opacity: 0.5;
    pointer-events: none;

    img {
      width: 100%;
      height: auto;
    }

    @media (max-width: 900px) {
      width: 40%;
      opacity: 0.3;
    }
  }

  .intro-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: center;

    @media (max-width: 900px) {
      grid-template-columns: 1fr;

      .intro-collage {
        order: -1;
      }
    }
  }

  .intro-collage {
    position: relative;
    min-height: 460px;

    &::before {
      content: "";
      position: absolute;
      inset-inline-start: 4%;
      top: 2%;
      width: 56%;
      height: 52%;
      background: var(--red);
      transform-origin: top;
      transform: scaleY(0);
      transition: transform 760ms var(--ease) 160ms;
    }

    &.is-visible::before,
    .is-visible &::before {
      transform: scaleY(1);
    }

    .intro-photo {
      position: absolute;
      overflow: hidden;
      box-shadow: var(--shadow);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 700ms var(--ease);
      }

      &:hover img {
        transform: scale(1.06);
      }
    }

    .intro-photo-main {
      inset-inline-start: 0;
      top: 0;
      z-index: 2;
      width: 70%;
      aspect-ratio: 4 / 5;
    }

    .intro-photo-a {
      inset-inline-end: 0;
      bottom: 10%;
      z-index: 3;
      width: 42%;
      aspect-ratio: 1;
      border: 6px solid var(--paper);
    }

    @media (max-width: 640px) {
      min-height: 360px;

      .intro-photo-main {
        width: 78%;
      }

      .intro-photo-a {
        width: 46%;
        bottom: -10%;

      }

    }
  }

  .intro-lede {
    max-width: 58ch;
    margin-bottom: 1.15rem;
    color: var(--muted);
    font-size: 1.04rem;
  }

  .intro-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 1.75rem 0 2.15rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
  }

  .intro-stat {
    flex: 1 1 auto;
    min-width: 8rem;
    padding-inline-end: 1.5rem;
    margin-inline-end: 1.5rem;
    border-inline-end: 1px solid var(--line);

    &:last-child {
      margin-inline-end: 0;
      padding-inline-end: 0;
      border-inline-end: 0;
    }

    strong {
      display: block;
      color: var(--red);
      font-size: clamp(2rem, 3vw, 2.5rem);
      font-weight: 800;
      line-height: 1;
    }

    span {
      display: block;
      max-width: 16ch;
      margin-top: 0.4rem;
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.5;
    }

    @media (max-width: 640px) {
      flex: 1 1 45%;
      margin-bottom: 1.25rem;
    }
  }
}

/* ---- 21.2 Purpose: Vision / Mission / Approach as an exclusive
   accordion whose selected item swaps the adjoining photo
   (native <details name="..."> group, no JS required) ---- */
.about-purpose {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  color: var(--on-dark);

  .purpose-layout {
    position: relative;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: stretch;
    gap: clamp(2rem, 5vw, 4rem);

    @media (max-width: 900px) {
      grid-template-columns: 1fr;
    }
  }

  .purpose-media {
    position: relative;
    overflow: hidden;
    min-height: 340px;

    img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 620ms var(--ease), transform 900ms var(--ease);
      transform: scale(1.04);
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(200deg, rgb(4 17 46 / 0.85), rgb(4 17 46 / 0.2) 62%);
    }

    @media (max-width: 900px) {
      min-height: 260px;
    }
  }

  .purpose-layout:has(#purpose-vision[open]) .purpose-media img[data-purpose-img="vision"],
  .purpose-layout:has(#purpose-mission[open]) .purpose-media img[data-purpose-img="mission"],
  .purpose-layout:has(#purpose-approach[open]) .purpose-media img[data-purpose-img="approach"] {
    opacity: 1;
    transform: scale(1);
  }

  .purpose-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .purpose-tab-list {
    display: grid;
    border-top: 1px solid rgb(255 255 255 / 0.14);
  }

  .purpose-tab {
    border-bottom: 1px solid rgb(255 255 255 / 0.14);

    summary {
      display: flex;
      align-items: center;
      gap: 1.1rem;
      padding-block: 1.5rem;
      cursor: pointer;
      list-style: none;

      &::-webkit-details-marker {
        display: none;
      }
    }

    .purpose-tab-icon {
      flex: none;
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border: 1px solid rgb(255 255 255 / 0.32);
      color: #fff;
      font-size: 1.15rem;
      transition: background 260ms var(--ease), transform 260ms var(--ease), border-color 260ms var(--ease);
    }

    h3 {
      max-width: none;
      margin: 0;
      color: #fff;
      font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    }

    .purpose-index {
      color: rgb(255 255 255 / 0.34);
      font-size: 0.85rem;
      font-weight: 800;
    }

    p {
      max-width: 56ch;
      margin: 0 0 1.6rem 4.6rem;
      padding-inline-start: 0.1rem;
      color: var(--soft-on-dark);
      font-size: 0.98rem;
      line-height: 1.75;

      [dir="rtl"] & {
        margin: 0 4.6rem 1.6rem 0;
      }

      @media (max-width: 640px) {
        margin-inline: 0;
      }
    }

    &[open] {
      .purpose-tab-icon {
        background: var(--red);
        border-color: var(--red);
      }

      h3 {
        color: var(--red);
      }

      p {
        animation: answer-in 380ms var(--ease) both;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      &[open] p {
        animation: none !important;
      }
    }
  }
}

/* ---- 21.3 Capability orbit: six disciplines arranged in a ring
   around a central hub (CSS-only radial layout, hover-reactive) ---- */
.capability-orbit-section {
  position: relative;
  overflow: hidden;

  .orbit-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);

    @media (max-width: 1024px) {
      grid-template-columns: 1fr;
    }
  }

  .orbit-copy {
    p {
      color: var(--muted);
      font-size: 1.03rem;
    }
  }

  /* كل الهندسة نسبية للـstage عن طريق --orbit-r، فالمسار والأيقونات
     والمركز يفضلوا متطابقين عند أي عرض. الأرقام القديمة كانت px ثابتة
     (185 / 160 / 92) جوّه stage بعرض min(560px, 92vw)، فالعناصر كانت
     بتخرج عن المسار على الشاشات المتوسطة. */
  .orbit-stage {
    --orbit-size: min(560px, 92vw);
    --orbit-r: calc(var(--orbit-size) * 0.33);
    --orbit-r-x: calc(var(--orbit-r) * 0.866);
    --orbit-r-y: calc(var(--orbit-r) * 0.5);
    --orbit-item-w: clamp(84px, calc(var(--orbit-size) * 0.2), 112px);
    --orbit-icon: clamp(46px, calc(var(--orbit-size) * 0.104), 58px);
    position: relative;
    display: grid;
    place-items: center;
    width: var(--orbit-size);
    aspect-ratio: 1;
    margin-inline: auto;

    @media (max-width: 640px) {
      display: none;
    }
  }

  /* المسار بقى سداسي بأضلاع حادة بدل الدوائر المتقطعة: نفس لغة
     الزوايا في الهوية، ورؤوسه الستة هي بالظبط مواضع التخصصات،
     والأشعة بتوصل كل تخصص بالمركز زي مخطط single-line. */
  .orbit-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    polygon,
    line {
      fill: none;
      /* --line على خلفية section-alt بيختفي تقريبًا، فالمسار بلون
         navy شفاف عشان يبان من غير ما يسرق الانتباه. */
      stroke: rgb(7 29 73 / 0.22);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
    }

    .orbit-grid-spokes line {
      stroke: rgb(7 29 73 / 0.13);
      stroke-dasharray: 4 4;
    }
  }

  .orbit-hub {
    --hub-clip: polygon(0 0,
        calc(100% - 18px) 0,
        100% 22px,
        100% 100%,
        26px 100%,
        0 calc(100% - 30px));
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    gap: 0.35rem;
    width: 30%;
    aspect-ratio: 1;
    background: linear-gradient(155deg, var(--navy-deep), var(--navy));
    clip-path: var(--hub-clip);
    color: #fff;
    text-align: center;
    /* clip-path بيقص الـbox-shadow، فالظل بـdrop-shadow */
    filter: drop-shadow(0 18px 34px rgb(7 29 73 / 0.26));

    [dir="rtl"] & {
      --hub-clip: polygon(18px 0,
          100% 0,
          100% calc(100% - 30px),
          calc(100% - 26px) 100%,
          0 100%,
          0 22px);
    }

    i {
      font-size: clamp(1.4rem, calc(var(--orbit-size) * 0.033), 1.85rem);
      color: var(--red);
    }

    img {
      width: 130px
    }

    strong {
      font-size: 0.76rem;
      font-weight: 850;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
  }

  .orbit-items {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .orbit-item {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    gap: 0.55rem;
    width: var(--orbit-item-w);
    margin: calc(var(--orbit-icon) / -2) calc(var(--orbit-item-w) / -2);
    text-align: center;

    .orbit-icon {
      --icon-shell: var(--line);
      --icon-face: var(--paper);
      --icon-clip: polygon(0 0,
          100% 0,
          100% 100%,
          11px 100%,
          0 calc(100% - 11px));
      position: relative;
      display: grid;
      place-items: center;
      width: var(--orbit-icon);
      aspect-ratio: 1;
      background: var(--icon-shell);
      clip-path: var(--icon-clip);
      color: var(--red);
      font-size: clamp(0.98rem, calc(var(--orbit-size) * 0.0214), 1.2rem);
      filter: drop-shadow(0 10px 20px rgb(7 29 73 / 0.12));
      transition:
        transform 320ms var(--ease),
        background 260ms var(--ease),
        color 260ms var(--ease);

      [dir="rtl"] & {
        --icon-clip: polygon(0 0,
            100% 0,
            100% calc(100% - 11px),
            calc(100% - 11px) 100%,
            0 100%);
      }

      &::before {
        content: "";
        position: absolute;
        inset: 1px;
        background: var(--icon-face);
        clip-path: var(--icon-clip);
        transition: background 260ms var(--ease);
      }

      i {
        position: relative;
        z-index: 1;
      }
    }

    span.orbit-label {
      max-width: 9ch;
      color: var(--ink);
      font-size: clamp(0.76rem, calc(var(--orbit-size) * 0.0146), 0.82rem);
      font-weight: 800;
      line-height: 1.35;
    }

    &:hover .orbit-icon {
      --icon-shell: var(--red);
      --icon-face: var(--red);
      color: #fff;
      transform: translateY(-4px);
    }

    &:nth-child(1) {
      transform: translate(0, calc(var(--orbit-r) * -1));
    }

    &:nth-child(2) {
      transform: translate(var(--orbit-r-x), calc(var(--orbit-r-y) * -1));
    }

    &:nth-child(3) {
      transform: translate(var(--orbit-r-x), var(--orbit-r-y));
    }

    &:nth-child(4) {
      transform: translate(0, var(--orbit-r));
    }

    &:nth-child(5) {
      transform: translate(calc(var(--orbit-r-x) * -1), var(--orbit-r-y));
    }

    &:nth-child(6) {
      transform: translate(calc(var(--orbit-r-x) * -1), calc(var(--orbit-r-y) * -1));
    }
  }

  .orbit-fallback {
    display: none;
  }

  @media (max-width: 640px) {
    .orbit-fallback {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
    }

    .orbit-fallback-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1.1rem;
      background: var(--paper);

      i {
        color: var(--red);
        font-size: 1.15rem;
      }

      span {
        font-size: 0.86rem;
        font-weight: 800;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .orbit-item:hover .orbit-icon {
      transform: none;
    }
  }
}

/* ---- 21.4 Journey: timeline  ---- */
.journey-section {
  --journey-num-w: clamp(90px, 9vw, 130px);

  .container {
    width: min(calc(100% - 2rem), var(--max));
    margin-inline: auto;
  }

  .section-head {
    max-width: 46rem;
    margin-inline: auto;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    text-align: center;

    h2 {
      max-width: none;
      margin-inline: auto;
    }
  }

  .step-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    counter-reset: step-counter;
  }

  .step-list__item {
    counter-increment: step-counter;
    position: relative;
  }

  .step-list__item:before {
    content: counter(step-counter, decimal-leading-zero);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--navy) 14%, transparent);
  }

  .step-list__item h2 {
    max-width: none;
    margin: 0 0 0.55rem;
    font-size: clamp(1.2rem, 1.9vw, 1.5rem);
    font-weight: 780;
    line-height: 1.3;
    color: var(--navy);
  }

  /* الصورة: إطار محتوى حقيقي بزاوية EMCON، مقاسه clamp بدل رقم
     ثابت عشان يتمدد بنعومة بين نقاط التوقف. */
  .step-list__item .icon {
    --journey-clip: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
    position: relative;
    display: block;
    flex: none;
    width: clamp(140px, 14vw, 190px);
    aspect-ratio: 1;
    overflow: hidden;
    background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
    clip-path: var(--journey-clip);
    box-shadow: 0 18px 34px rgb(7 29 73 / 0.18);
    transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);

    [dir="rtl"] & {
      --journey-clip: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(200deg, rgb(197 21 40 / 0.18), transparent 58%);
      opacity: 0;
      transition: opacity 420ms var(--ease);
    }
  }

  .step-list__item:hover .icon {
    transform: translateY(-4px);
    box-shadow: 0 26px 44px rgb(7 29 73 / 0.26);
  }

  .step-list__item:hover .icon::after {
    opacity: 1;
  }

  .step-list__item .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.12) contrast(1.04);
    transition: transform 700ms var(--ease);
  }

  .step-list__item:hover .icon img {
    transform: scale(1.08);
  }

  .step-list__item .body {
    font-size: 0.98rem;
    line-height: 1.8;
    font-weight: 400;
    color: var(--muted);
  }

  .step-list__item .journey-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
    padding: 0.34rem 0.75rem;
    background: var(--surface-2);
    color: var(--red);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    &::before {
      content: "";
      width: 6px;
      height: 6px;
      background: var(--red);
    }
  }

  .step-list__item .content {
    display: flex;
    flex-direction: row;
    padding-bottom: 18px;
  }

  /* الفردي (أول خطوة) بيبدأ من جهة "البداية" المنطقية،
     والزوجي من جهة "النهاية" — بينعكس صح تلقائيًا في اللغتين. */
  .step-list__item:nth-child(odd) .content {
    justify-content: flex-start;
  }

  .step-list__item:nth-child(even) .content {
    justify-content: flex-end;
  }

  .step-list__item:first-child>.step-list__item__inner:before {
    content: none;
  }

  .step-list__item:last-child>.step-list__item__inner:after {
    content: none;
  }

  .step-list__item+li {
    margin-top: 84px;
  }

  .step-list__item+li>div {
    margin-top: -1px;
  }

  /* =========================================================
     شاشات كبيرة (> 900px): الزجزاج الكامل بعمودين.
     ملاحظة: كل قواعد odd/even هنا متبادلة عن قصد عشان أول خطوة
     تبدأ من جهة "start" المنطقية (يمين بالعربي، يسار بالإنجليزي).
     ========================================================= */
  @media screen and (min-width: 901px) {
    .step-list__item:before {
      content: counter(step-counter, decimal-leading-zero);
      position: absolute;
      width: var(--journey-num-w);
      text-align: center;
      font-size: 4.4rem;
      line-height: 1;
      font-weight: 800;
    }

    .step-list__item .body {
      flex: 0 1 33.3333%;
      margin-top: 84px;
    }

    .step-list__item .content {
      align-items: flex-end;
    }

    .step-list__item>.step-list__item__inner {
      position: relative;
    }

    .step-list__item>.step-list__item__inner:before,
    .step-list__item>.step-list__item__inner:after {
      border-width: 0px;
      border-style: solid;
      border-color: var(--line);
      display: block;
      content: '';
      position: absolute;
      height: 42px;
      width: calc(33.3333% - 42px);
    }

    .step-list__item:nth-child(odd)>.step-list__item__inner {
      text-align: start;
    }

    .step-list__item:nth-child(even)>.step-list__item__inner {
      text-align: end;
    }

    .step-list__item:nth-child(odd)>.step-list__item__inner:before,
    .step-list__item:nth-child(odd)>.step-list__item__inner:after {
      border-inline-start-width: 1px;
      inset-inline-start: calc(33.3333% - 21px);
    }

    .step-list__item:nth-child(odd)>.step-list__item__inner:before {
      border-top-width: 1px;
      margin-top: -42px;
    }

    .step-list__item:nth-child(odd)>.step-list__item__inner:after {
      border-bottom-width: 1px;
      margin-bottom: -42px;
    }

    .step-list__item:nth-child(odd):before {
      inset-inline-start: calc(33.3333% - var(--journey-num-w));
    }

    .step-list__item:nth-child(odd) .icon {
      margin-inline-end: clamp(28px, 5vw, 72px);
    }

    .step-list__item:nth-child(even)>.step-list__item__inner:before,
    .step-list__item:nth-child(even)>.step-list__item__inner:after {
      border-inline-end-width: 1px;
      inset-inline-end: calc(33.3333% - 21px);
    }

    .step-list__item:nth-child(even)>.step-list__item__inner:before {
      border-top-width: 1px;
      margin-top: -42px;
    }

    .step-list__item:nth-child(even)>.step-list__item__inner:after {
      border-bottom-width: 1px;
      margin-bottom: -42px;
    }

    .step-list__item:nth-child(even):before {
      inset-inline-end: calc(33.3333% - var(--journey-num-w));
    }

    .step-list__item:nth-child(even) .icon {
      margin-inline-start: clamp(28px, 5vw, 72px);
    }

    .step-list__item:nth-child(odd) .body {
      order: 1;
    }
  }

  /* =========================================================
     تابلت وموبايل (≤ 900px): الزجزاج بيتحول لصف واحد، صورة + نص
     جنب بعض، ورقم كبير فوق الصورة. خط الاتصال عمودي بسيط.
     ترتيب "أول خطوة يمين/يسار" مفهوم خاص بالزجزاج الأفقي بس،
     فمش محتاج تفريق odd/even هنا أصلًا.
     ========================================================= */
  @media screen and (max-width: 900px) {
    .step-list {
      display: grid;
      gap: 2.5rem;
    }

    .step-list__item+li {
      margin-top: 0;
    }

    .step-list__item+li>div {
      margin-top: 0;
    }

    .step-list__item .content,
    .step-list__item:nth-child(odd) .content,
    .step-list__item:nth-child(even) .content {
      justify-content: flex-start;
      align-items: flex-start;
      padding-bottom: 0;
      gap: clamp(1rem, 3vw, 1.75rem);
    }

    .step-list__item:nth-child(odd)>.step-list__item__inner,
    .step-list__item:nth-child(even)>.step-list__item__inner {
      text-align: start;
    }

    /* الرقم بادج أحمر على ركن الصورة (الركن ده مش مقصوص في
       الـclip-path في اللغتين)، بدل رقم أبيض كان بيركب على
       الـjourney-tag الفاتح ويختفي */
    .step-list__item:before {
      position: absolute;
      z-index: 2;
      inset-inline-start: 0;
      top: 0;
      min-width: 2.6rem;
      padding: 0.5rem 0.6rem;
      background: var(--red);
      box-shadow: 0 8px 18px rgb(197 21 40 / 0.28);
      font-size: 1.05rem;
      line-height: 1;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-align: center;
      font-variant-numeric: tabular-nums;
      color: #fff;
      -webkit-text-stroke: 0;
    }

    /* الصورة لازم تيجي الأول عشان الرقم (inset-inline-start)
       يقع عليها مش على النص */
    .step-list__item .icon {
      order: -1;
      width: clamp(120px, 30vw, 190px);
      aspect-ratio: 4 / 3;
      margin: 0 !important;
    }

    .step-list__item .body {
      flex: 1;
      min-width: 0;
      margin-top: 0.35rem;
    }

    .step-list__item .body h2 {
      max-width: 26ch;
    }

    /* خط تايم لاين عمودي بيبدأ من تحت الصورة على نفس محور البادج
       (نص عرضه 2.6rem) وينزل لحد بادج الخطوة اللي بعدها، بدل
       خط رمادي باهت كان في نص الصورة ومقطوع عن الأرقام. */
    .step-list__item:not(:last-child)::after {
      content: "";
      position: absolute;
      z-index: 0;
      inset-inline-start: calc(1.3rem - 1px);
      top: calc(clamp(120px, 30vw, 190px) * 3 / 4);
      bottom: -2.5rem;
      width: 2px;
      background: linear-gradient(to bottom,
          var(--red),
          color-mix(in srgb, var(--red) 22%, transparent));
    }
  }

  /* موبايل صغير (≤640px): الصورة بتاخد عرض السطر كامل فوق، والنص
     تحتها. */
  @media screen and (max-width: 640px) {
    .step-list__item .content {
      flex-direction: column;
    }

    .step-list__item .icon {
      width: 100%;
      aspect-ratio: 16 / 10;
    }

    .step-list__item:before {
      font-size: 1.15rem;
      padding: 0.6rem 0.7rem;
    }

    /* هنا الصورة بعرض السطر، فالخط بيتنقل للـbody ويمشي جنب
       النص (اللي بيتزق شوية) من تحت الصورة لحد الخطوة الجاية */
    .step-list__item:not(:last-child)::after {
      content: none;
    }

    .step-list__item .body {
      position: relative;
      padding-inline-start: 2.6rem;
    }

    .step-list__item:not(:last-child) .body::before {
      content: "";
      position: absolute;
      inset-inline-start: calc(1.3rem - 1px);
      top: -1.5rem;
      bottom: -2.5rem;
      width: 2px;
      background: linear-gradient(to bottom,
          var(--red),
          color-mix(in srgb, var(--red) 22%, transparent));
    }
  }
}

/* ---- 21.5 Why-band: duotone photo + inline checklist, an
   asymmetric split that argues the case rather than lists facts ---- */
.why-band {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);

  .why-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;

    @media (max-width: 900px) {
      grid-template-columns: 1fr;
    }
  }

  .why-media {
    position: relative;
    min-height: 360px;
    overflow: hidden;

    img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(0.2) contrast(1.05);
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(205deg, rgb(197 21 40 / 0.32), rgb(4 17 46 / 0.6));
      mix-blend-mode: multiply;
    }

    @media (max-width: 900px) {
      min-height: 260px;
    }
  }

  .why-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.5rem, 5vw, 4.5rem);
    background: var(--paper);

    /* الزرار كان بـstyle="margin-top:2rem" inline، وكمان بيتمدّد على
       عرض البانل كله لأن العمود flex بـalign-items: stretch. */
    .button {
      align-self: flex-start;
      margin-top: 2rem;
    }
  }

  .why-list {
    display: grid;
    gap: 0;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;

    li {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding-block: 1.15rem;
      border-top: 1px solid var(--line);

      &:last-child {
        border-bottom: 1px solid var(--line);
      }

      i {
        flex: none;
        margin-top: 0.25rem;
        color: var(--red);
      }

      strong {
        display: block;
        margin-bottom: 0.25rem;
      }

      span.why-desc {
        color: var(--muted);
        font-size: 0.92rem;
      }
    }
  }
}

/* ---- 21.6 Commitment band, photographic variant: a background
   photo replaces the dotted-grid backdrop used elsewhere ---- */
.commitment-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 6.5rem);
  background: var(--navy-deep);
  color: var(--on-dark);
  text-align: center;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
    pointer-events: none;
  }

  &.commitment-band-photo {
    background-image:
      linear-gradient(180deg, rgb(4 17 46 / 0.9), rgb(4 17 46 / 0.78)),
      url("../images/quality-inspection.png");
    background-size: cover;
    background-position: center;

    &::before {
      display: none;
    }
  }

  .container {
    position: relative;
    z-index: 1;
  }

  .commitment-mark {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-inline: auto;
    margin-bottom: 1.75rem;
    border: 1px solid rgb(255 255 255 / 0.3);
    border-radius: 50%;
    color: var(--red);
    font-size: 1.3rem;
  }

  p.commitment-text {
    max-width: 34ch;
    margin: 0 auto;
    font-size: clamp(1.5rem, 3vw, 2.35rem);
    font-weight: 700;
    line-height: 1.35;
  }

  .commitment-by {
    display: block;
    margin-top: 1.5rem;
    color: var(--soft-on-dark);
    font-size: 0.92rem;
  }
}



/* ---- 21.4 Operating model showcase: لوحتان كبيرتان متعاشقتان على
   درزة مائلة بدل كرتين متجاورتين بمسافة رأسية.
   - الشبكة 64 عمود واللوحتان بتاخد كل واحدة 35 عمود، يعني بيتداخلوا
     في ٦ أعمدة؛ الـclip-path بيقص كل واحدة على ميل معاكس فتفضل
     بينهم درزة ثابتة عرضها ~1% يبان منها لون القسم.
   - الميل ده هو نفس إيماءة var(--card-clip) في الهوية، بس بمقياس
     القسم كله.
   - المسافات الداخلية منطقية (inline-start/end) فالجهة المائلة
     هي نفسها في LTR وRTL، وبيتضاف لها هامش كافي عشان النص ما
     يتقصّش مع الميل. ---- */
.model-section {
  .model-grid {
    --model-h: clamp(380px, 44vw, 560px);
    display: grid;
    grid-template-columns: repeat(64, 1fr);
    grid-template-rows: minmax(var(--model-h), auto);
    gap: 0;

    @media (max-width: 760px) {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      gap: clamp(1rem, 2.4vw, 1.5rem);
    }
  }

  .model-tile {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.75rem, 3vw, 2.75rem);
    background: var(--navy-deep);
    color: #fff;

    img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 50%;
      transition:
        transform 900ms var(--ease),
        opacity 320ms var(--ease);
    }

    /* ::before هو أول عنصر في ترتيب الرسم، والـimg بعده، فالتدرّج
       كان بيتغطّي بالصورة تمامًا ومكانش بيبان. لازم طبقات صريحة. */
    &::before {
      content: "";
      position: absolute;
      z-index: 1;
      inset: 0;
      background: linear-gradient(0deg,
          rgb(4 17 46 / 0.94) 0%,
          rgb(4 17 46 / 0.78) 34%,
          rgb(4 17 46 / 0.4) 66%,
          rgb(4 17 46 / 0.2) 100%);
      transition: background 320ms var(--ease);
    }

    &:hover img,
    &:focus-visible img {
      transform: scale(1.06);
      opacity: 0.8;
    }

    &:hover::before,
    &:focus-visible::before {
      background: linear-gradient(0deg,
          rgb(157 16 31 / 0.94) 0%,
          rgb(112 14 30 / 0.78) 34%,
          rgb(4 17 46 / 0.45) 66%,
          rgb(4 17 46 / 0.22) 100%);
    }

    &:focus-visible {
      outline: 3px solid var(--red);
      outline-offset: -6px;
    }

    @media (max-width: 760px) {
      /* الشبكة بترجع عمود واحد، فلازم نلغي span 35 وإلا الجريد
         هيولّد أعمدة ضمنية. */
      grid-column: 1 / -1 !important;
      grid-row: auto !important;
      min-height: 320px;
      clip-path: none !important;
      padding-inline: clamp(1.5rem, 5vw, 2.25rem) !important;
    }
  }

  /* اللوحة الأولى: في LTR على الشمال وميلها على حافتها الأخيرة،
     وفي RTL بتتقلب مع اتجاه الشبكة فبيتقلب الـpolygon معاها. */
  .model-tile-a {
    grid-row: 1;
    grid-column: 1 / span 35;
    clip-path: polygon(0 0, 98% 0, 83% 100%, 0 100%);
    padding-inline-end: 21%;

    [dir="rtl"] & {
      clip-path: polygon(2% 0, 100% 0, 100% 100%, 17% 100%);
    }
  }

  .model-tile-b {
    grid-row: 1;
    grid-column: span 35 / -1;
    clip-path: polygon(17% 0, 100% 0, 100% 100%, 2% 100%);
    padding-inline-start: 11%;

    [dir="rtl"] & {
      clip-path: polygon(0 0, 83% 0, 98% 100%, 0 100%);
    }
  }

  .model-tile-body {
    position: relative;
    z-index: 2;
  }

  .model-tile-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1.25rem;
    background: var(--red);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    font-size: 1.25rem;
    transition: transform 320ms var(--ease);

    [dir="rtl"] & {
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    }
  }

  .model-tile h3 {
    max-width: none;
    margin-bottom: 0.65rem;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
  }

  .model-tile p {
    max-width: 38ch;
    margin: 0;
    color: rgb(255 255 255 / 0.84);
    font-size: 0.98rem;
    line-height: 1.7;
  }

  .model-tile-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.35rem;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    i {
      /* color: var(--red); */
      transition: transform 320ms var(--ease);
    }
  }

  .model-tile:hover .model-tile-link i,
  .model-tile:focus-visible .model-tile-link i {
    transform: translateX(-5px);
  }

  @media (prefers-reduced-motion: reduce) {

    .model-tile img,
    .model-tile-icon,
    .model-tile-link i {
      transition: none;
      transform: none !important;
    }
  }
}

/* ---- 21.5 Commitment statement band: single dark quote-style
   band with a dotted grid backdrop (echoes numbers-band tokens
   without reusing its layout) ---- */
.commitment-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 6.5rem);
  background: var(--navy-deep);
  color: var(--on-dark);
  text-align: center;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
    pointer-events: none;
  }

  .container {
    position: relative;
    z-index: 1;
  }

  .commitment-mark {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-inline: auto;
    margin-bottom: 1.75rem;
    border: 1px solid rgb(255 255 255 / 0.3);
    border-radius: 50%;
    color: var(--red);
    font-size: 1.3rem;
  }

  p.commitment-text {
    max-width: 34ch;
    margin: 0 auto;
    font-size: clamp(1.5rem, 3vw, 2.35rem);
    font-weight: 700;
    line-height: 1.35;
  }

  .commitment-by {
    display: block;
    margin-top: 1.5rem;
    color: var(--soft-on-dark);
    font-size: 0.92rem;
  }
}


/* =============================================================
   22. SERVICES SIGNATURE CARDS  ->  services.html specific sections
   A photo tile fused to a raised trade badge and a rotated "read
   more" tab; the body only gives up its description on hover /
   focus, so the grid reads as a look-first, read-second gallery.
   Distinct from the homepage service-card: no rounded corner, the
   tab replaces the ghost-link, and the badge sits on the photo
   rather than floating above the whole card.
   ============================================================= */
.services-grid-section {
  position: relative;
  overflow: hidden;

  .services-grid-shape {
    position: absolute;
    inset-inline-end: -4%;
    top: -6%;
    width: 22%;
    opacity: 0.45;
    z-index: 0;
    pointer-events: none;

    img {
      width: 100%;
      height: auto;
    }

    @media (max-width: 900px) {
      display: none;
    }
  }
}

.service-cards-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.35rem);

  @media (max-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (max-width: 640px) {
    grid-template-columns: 1fr;
  }
}

#service-results[aria-busy="true"] {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 180ms ease;
}

#project-results[aria-busy="true"] {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 180ms ease;
}

#service-results .service-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line, #dce3ed);
}

#project-results .service-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line, #dce3ed);
}

#service-results .service-pagination-summary {
  margin: 0;
  color: var(--muted, #66758b);
  font-size: 0.9rem;
}

#project-results .service-pagination-summary {
  margin: 0;
  color: var(--muted, #66758b);
  font-size: 0.9rem;
}

#service-results .service-pagination-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

#project-results .service-pagination-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.service-page-link {
  display: inline-flex;
  min-width: 42px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--line, #dce3ed);
  border-radius: 8px;
  background: var(--paper, #fff);
  color: var(--ink, #0b2146);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

a.service-page-link:hover,
.service-page-link.is-current {
  border-color: var(--brand, #c71930);
  background: var(--brand, #c71930);
  color: #fff;
}

.service-page-link.is-disabled {
  color: #a4afbd;
  cursor: default;
}

.service-page-ellipsis {
  padding: 0 0.2rem;
  color: var(--muted, #66758b);
}

[dir="rtl"] .service-page-link i {
  transform: scaleX(-1);
}

@media (max-width: 640px) {
  #service-results .service-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  #project-results .service-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  #service-results .service-pagination-summary {
    text-align: center;
  }

  #project-results .service-pagination-summary {
    text-align: center;
  }

  #service-results .service-pagination-links {
    flex-wrap: wrap;
  }

  #project-results .service-pagination-links {
    flex-wrap: wrap;
  }

  .service-page-link.is-previous,
  .service-page-link.is-next {
    min-width: 42px;
    padding: 0 0.65rem;
  }
}

.service-tile {
  --tile-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  color: inherit;
  background: var(--paper);
  box-shadow: 0 14px 30px rgb(7 29 73 / 0.08);
  /* [data-reveal] بيملك transform، فالرفعة بقت بـtranslate عشان
     الاتنين ما يتعاركوش ويفضل ستاجر الظهور شغال. */
  transition:
    opacity 700ms var(--ease) calc(var(--reveal-index, 0) * 90ms),
    transform 700ms var(--ease) calc(var(--reveal-index, 0) * 90ms),
    box-shadow 560ms var(--tile-ease),
    translate 560ms var(--tile-ease);
  will-change: translate;
}

.service-tile:hover,
.service-tile:focus-within {
  box-shadow: 0 34px 64px rgb(7 29 73 / 0.2);
  translate: 0 -8px;
}

.service-tile:active {
  translate: 0 -5px;
  scale: 0.995;
  transition-duration: 180ms;
}

.service-tile-dot {
  position: absolute;
  z-index: 3;
  inset-inline-start: 1.15rem;
  top: 1rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.75);
  transition: transform 560ms var(--tile-ease), background 420ms var(--tile-ease);
}

.service-tile:hover .service-tile-dot,
.service-tile:focus-within .service-tile-dot {
  transform: scale(1.6);
  background: var(--red);
}

.service-tile-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--navy-deep);
}

.service-tile-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgb(197 21 40 / 0.22), transparent 62%);
  opacity: 0;
  transition: opacity 620ms var(--tile-ease);
  pointer-events: none;
}

.service-tile:hover .service-tile-media::after,
.service-tile:focus-within .service-tile-media::after {
  opacity: 1;
}

.service-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--tile-ease);
}

.service-tile:hover .service-tile-media img,
.service-tile:focus-within .service-tile-media img {
  transform: scale(1.09);
}

.service-tile-tab {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.9rem;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  transition: background 480ms var(--tile-ease);
}

.service-tile-tab::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -140%;
  width: 60%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.28), transparent);
  transition: inset-inline-start 620ms var(--tile-ease);
}

.service-tile:hover .service-tile-tab::before,
.service-tile:focus-within .service-tile-tab::before {
  inset-inline-start: 140%;
}

.service-tile:hover .service-tile-tab,
.service-tile:focus-within .service-tile-tab {
  background: var(--red);
}

.service-tile-tab span {
  position: relative;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.service-tile-tab i {
  position: relative;
  font-size: 0.7rem;
  transform: rotate(45deg);
  transition: transform 480ms var(--tile-ease);
}

[dir="ltr"] .service-tile-tab i {
  transform: rotate(-45deg);
}

.service-tile:hover .service-tile-tab i,
.service-tile:focus-within .service-tile-tab i {
  transform: rotate(45deg) translateY(-5px);
}

[dir="ltr"] .service-tile:hover .service-tile-tab i,
[dir="ltr"] .service-tile:focus-within .service-tile-tab i {
  transform: rotate(-45deg) translateY(-5px);
}

.service-tile-badge {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  margin-top: -2.6rem;
  margin-inline-start: 1.5rem;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  font-size: 1.5rem;
  /* box-shadow: 0 0 0 0 rgb(197 21 40 / 0.35); */
  transition:
    transform 560ms var(--tile-ease) 40ms,
    box-shadow 560ms var(--tile-ease) 40ms;
}



.service-tile-badge::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-start: -10px;
  top: -10px;
  width: 100%;
  height: 100%;
  border: 1.5px solid var(--brass);
  transition: inset-inline-start 560ms var(--tile-ease) 40ms, top 560ms var(--tile-ease) 40ms;
}

.service-tile:hover .service-tile-badge::before,
.service-tile:focus-within .service-tile-badge::before {
  inset-inline-start: -14px;
  top: -14px;
}

.service-tile-badge i {
  transition: transform 560ms var(--tile-ease) 40ms;
}

.service-tile:hover .service-tile-badge i,
.service-tile:focus-within .service-tile-badge i {
  transform: rotate(6deg);
}

.service-tile-body {
  position: relative;
  overflow: hidden;
  flex: 1;
  padding: 1.1rem 1.6rem 1.6rem;
}

.service-tile-body h3 {
  position: relative;
  z-index: 2;
  max-width: 15ch;
  margin: 0;
  font-size: 1.18rem;
  color: var(--ink);
  transition: color 420ms var(--tile-ease), transform 560ms var(--tile-ease);
}

.service-tile:hover .service-tile-body h3,
.service-tile:focus-within .service-tile-body h3 {
  color: var(--red-dark);
  transform: translateY(-1px);
}

.service-tile-body p {
  position: relative;
  z-index: 2;
  max-width: 26ch;
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  max-height: 0;
  opacity: 0;
  transform: translateY(10px);
  transition:
    max-height 620ms var(--tile-ease),
    opacity 460ms var(--tile-ease) 60ms,
    transform 460ms var(--tile-ease) 60ms;
}

.service-tile:hover .service-tile-body p,
.service-tile:focus-within .service-tile-body p {
  max-height: 6rem;
  opacity: 1;
  transform: none;
}

.service-tile-chevrons {
  position: absolute;
  z-index: 1;
  inset-inline-end: 1.1rem;
  bottom: 1.1rem;
  width: 34px;
  color: rgb(197 21 40 / 0.14);
  transition: color 460ms var(--tile-ease);
}

.service-tile:hover .service-tile-chevrons,
.service-tile:focus-within .service-tile-chevrons {
  color: rgb(197 21 40 / 0.32);
}

.service-tile-chevrons svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible !important;
}

.service-tile-chevrons path {
  transform: translateY(0);
  transition: transform 620ms var(--tile-ease);
}

/* الحركة بتشتغل عند hover/focus بس: قبل كده كانت ٦ أنيميشنات لا نهائية
   شغالة طول الوقت حتى وهي خارج الشاشة. */
.service-tile:hover .service-tile-chevrons path,
.service-tile:focus-within .service-tile-chevrons path {
  animation: chevronBounce 2s ease-in-out infinite;
}

.service-tile-chevrons path:nth-of-type(1) {
  transition-delay: 0ms;
  animation-delay: 0ms;
}

.service-tile-chevrons path:nth-of-type(2) {
  transition-delay: 70ms;
  animation-delay: 0.15s;
}

.service-tile-chevrons path:nth-of-type(3) {
  transition-delay: 140ms;
  animation-delay: 0.3s;
}

@keyframes chevronBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}



@media (hover: none) {

  /* Touch devices: tapping the tile once reveals the description
     via :focus-within (the link receives focus on tap) instead of
     requiring a hover state that never fires. */
  .service-tile {
    -webkit-tap-highlight-color: transparent;
  }

  /* على اللمس الوصف بيبان من الأول: :focus-within مش بيفضل شغال
     لأن اللمسة بتفتح اللينك على طول. */
  .service-tile-body p {
    max-height: none;
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .service-tile,
  .service-tile-dot,
  .service-tile-media img,
  .service-tile-media::after,
  .service-tile-tab,
  .service-tile-tab::before,
  .service-tile-tab i,
  .service-tile-badge,
  .service-tile-badge::before,
  .service-tile-badge i,
  .service-tile-body h3,
  .service-tile-body p,
  .service-tile-chevrons,
  .service-tile-chevrons path {
    transition: none !important;
  }

  .service-tile-chevrons path,
  .service-tile:hover .service-tile-chevrons path,
  .service-tile:focus-within .service-tile-chevrons path {
    animation: none !important;
  }
}

/* ---- 22.2 Story visual: صورة + شريط ملاحظة معلّق على حافتها.
   الماركب كان موجود في services.html من غير أي CSS خالص، فالشريط
   كان بيتعرض كنص سايب تحت الصورة. اتبنى دلوقتي بنفس عائلة
   .frame-badge و.quality-doc-badge: بانل navy مقصوص بزاوية EMCON.
   كمان .media-frame هنا كان واخد نسبته من قاعدة .quality-split
   القديمة، فبقى ليه نسبة صريحة. ---- */
.story-visual {
  position: relative;

  .media-frame {
    /* <figure> واخد margin افتراضي 40px من المتصفح، فالصورة كانت
       أضيق من عمود النص */
    margin: 0;
    aspect-ratio: 4 / 3;

    /* بعرض الشاشة كاملة 4/3 كانت بتاخد الشاشة كلها في التابلت */
    @media (max-width: 900px) {
      aspect-ratio: 16 / 10;
    }
  }
}

.story-ribbon {
  --st-clip: polygon(0 0,
      calc(100% - 20px) 0,
      100% 24px,
      100% 100%,
      28px 100%,
      0 calc(100% - 30px));
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  max-width: min(25rem, calc(100% - 4rem));
  margin-top: -3rem;
  margin-inline-start: 2.75rem;
  padding: 1.15rem 1.5rem;
  background: var(--navy-deep);
  clip-path: var(--st-clip);
  color: var(--on-dark);

  [dir="rtl"] & {
    --st-clip: polygon(20px 0,
        100% 0,
        100% calc(100% - 30px),
        calc(100% - 28px) 100%,
        0 100%,
        0 24px);
  }

  i {
    flex: none;
    color: var(--red);
    font-size: 1.65rem;
  }

  strong {
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.55;
  }

  @media (max-width: 600px) {
    gap: 0.8rem;
    max-width: calc(100% - 2rem);
    margin-inline-start: 1rem;
    margin-top: -2.25rem;
    padding: 1rem 1.25rem;

    i {
      font-size: 1.35rem;
    }

    strong {
      font-size: 0.9rem;
    }
  }
}


/* ---- 22.1 Delivery process rail: a compact tab switcher
   (shared Tabs component) paired with a single sticky photo,
   distinct from the homepage execute-section split layout ---- */
.services-process-section {
  .process-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;

    @media (max-width: 900px) {
      grid-template-columns: 1fr;

      .process-visual {
        order: -1;
      }
    }
  }

  /* ---- عمود الصورة: صورة لكل محطة بتتبدّل مع التاب المختار ----
     قبل كده كانت صورة واحدة ثابتة جنب الخمس مراحل، يعني العمود
     كان زينة ما بتقولش حاجة. التبديل كله CSS بـ:has() على
     aria-selected، زي أكورديون الرؤية/الرسالة في about.html،
     من غير أي جافاسكريبت إضافي.
     اللمسة الهوياتية: بلوك أحمر مزاح ورا الصورة (زي .frame-offset)،
     والصورة مقصوصة بزاوية EMCON، وبادج navy مقصوص راكب على حافتها
     فيه رقم المحطة بخط Barlow والاسم. ---- */
  .process-visual {
    position: sticky;
    top: calc(var(--header-height) + 2rem);

    @media (max-width: 900px) {
      position: static;
    }
  }

  .process-media {
    --pm-clip: polygon(0 0,
        calc(100% - 26px) 0,
        100% 30px,
        100% 100%,
        34px 100%,
        0 calc(100% - 38px));
    position: relative;
    aspect-ratio: 3 / 4;
    margin-inline-start: 1.5rem;
    margin-top: 1.5rem;

    [dir="rtl"] & {
      --pm-clip: polygon(26px 0,
          100% 0,
          100% calc(100% - 38px),
          calc(100% - 34px) 100%,
          0 100%,
          0 30px);
      margin-inline-start: 0;
      margin-inline-end: 1.5rem;
    }

    /* البلوك الأحمر المزاح ورا الصورة */
    &::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset-inline-start: -1.5rem;
      top: -1.5rem;
      width: 52%;
      height: 44%;
      background: var(--red);
    }

    img {
      position: absolute;
      z-index: 1;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      clip-path: var(--pm-clip);
      opacity: 0;
      transform: scale(1.04);
      transition:
        opacity 620ms var(--ease),
        transform 900ms var(--ease);
    }

    @media (max-width: 900px) {
      aspect-ratio: 16 / 9;
      max-width: 560px;
      margin-inline: auto;
    }
  }

  /* بادج المحطة: راكب على حافة الصورة السفلية */
  .process-stages {
    --ps-clip: polygon(0 0,
        calc(100% - 18px) 0,
        100% 22px,
        100% 100%,
        24px 100%,
        0 calc(100% - 26px));
    position: relative;
    z-index: 2;
    display: grid;
    width: max-content;
    max-width: min(20rem, calc(100% - 3rem));
    margin-top: -2.75rem;
    margin-inline-start: 3.5rem;
    padding: 1rem 1.35rem;
    background: var(--navy-deep);
    clip-path: var(--ps-clip);
    color: var(--on-dark);

    [dir="rtl"] & {
      --ps-clip: polygon(18px 0,
          100% 0,
          100% calc(100% - 26px),
          calc(100% - 24px) 100%,
          0 100%,
          0 22px);
    }

    @media (max-width: 900px) {
      margin-inline: auto;
      margin-top: -2.5rem;
    }
  }

  /* الخمسة فوق بعض في نفس خانة الجريد، الظاهر منهم واحد */
  .process-stage {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    opacity: 0;
    transition: opacity 420ms var(--ease);
  }

  .process-stage-index {
    font-family: "Barlow Condensed", "Alexandria", sans-serif;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--red);
  }

  .process-stage-name {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
  }

  .services-process-section .process-media img.is-active {
    opacity: 1;
    transform: scale(1);
  }

  .services-process-section .process-stage.is-active {
    opacity: 1;
  }

  .services-process-section .process-rail span.is-active {
    background: var(--red);
  }

  /* شريط التقدّم تحت التابات: بيتعبّى لحد المحطة الحالية */
  .process-rail {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin: -0.85rem 0 1.85rem;

    span {
      height: 3px;
      background: var(--line);
      transition: background 320ms var(--ease);
    }
  }

  /* ---- ربط المحطة المختارة بعمود الصورة والبادج وشريط التقدّم ----
     دي القواعد اللي الكومنت فوق بيوصفها وماكانتش موجودة: من غيرها كل
     الصور والبادجات فاضلة opacity: 0 والعمود كله مخفي.
     الـ selector معلّق على aria-selected اللي bindTabs() في site.js
     بيحدّثه على كل تاب، فمفيش جافاسكريبت إضافي محتاج يتكتب. ---- */
  .process-layout:has(#process-tab-1[aria-selected="true"]) .process-media img[data-process-img="1"],
  .process-layout:has(#process-tab-2[aria-selected="true"]) .process-media img[data-process-img="2"],
  .process-layout:has(#process-tab-3[aria-selected="true"]) .process-media img[data-process-img="3"],
  .process-layout:has(#process-tab-4[aria-selected="true"]) .process-media img[data-process-img="4"],
  .process-layout:has(#process-tab-5[aria-selected="true"]) .process-media img[data-process-img="5"] {
    opacity: 1;
    transform: scale(1);
  }

  .process-layout:has(#process-tab-1[aria-selected="true"]) .process-stage[data-process-stage="1"],
  .process-layout:has(#process-tab-2[aria-selected="true"]) .process-stage[data-process-stage="2"],
  .process-layout:has(#process-tab-3[aria-selected="true"]) .process-stage[data-process-stage="3"],
  .process-layout:has(#process-tab-4[aria-selected="true"]) .process-stage[data-process-stage="4"],
  .process-layout:has(#process-tab-5[aria-selected="true"]) .process-stage[data-process-stage="5"] {
    opacity: 1;
  }

  /* الشريط بيتعبّى تراكميًا لحد المحطة الحالية */
  .process-layout:has(#process-tab-1[aria-selected="true"]) .process-rail span:nth-child(-n + 1),
  .process-layout:has(#process-tab-2[aria-selected="true"]) .process-rail span:nth-child(-n + 2),
  .process-layout:has(#process-tab-3[aria-selected="true"]) .process-rail span:nth-child(-n + 3),
  .process-layout:has(#process-tab-4[aria-selected="true"]) .process-rail span:nth-child(-n + 4),
  .process-layout:has(#process-tab-5[aria-selected="true"]) .process-rail span:nth-child(-n + 5) {
    background: var(--red);
  }

  /* متصفح من غير :has() يشوف المحطة الأولى ثابتة بدل عمود فاضي */
  @supports not selector(:has(*)) {
    .process-media img[data-process-img="1"] {
      opacity: 1;
      transform: none;
    }

    .process-stage[data-process-stage="1"] {
      opacity: 1;
    }

    .process-rail span:first-child {
      background: var(--red);
    }
  }
}

:root {
  --brass: #c9a463;
}

/* =============================================================
   23. PROJECTS PAGE UPGRADE  ->  projects.html specific
   (see the .hero-images additions inside section 19 above for
   the moodboard-style hero collage; this block only covers the
   parts that don't belong to a shared component)
   ============================================================= */
.projects-directory[data-reveal] {
  transition-delay: 0ms;
}




/* ---- Hero collage (projects.html) ---- */
.hero-collage {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 640 / 705;
  margin-inline-start: auto;
}

.collage-photo {
  position: absolute;
  overflow: hidden;
  background: var(--navy-deep);
  box-shadow: var(--shadow);
}

.collage-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.collage-photo:hover img {
  transform: scale(1.05);
}

.collage-photo-a {
  inset-inline-start: 0;
  top: 0;
  width: 84%;
  height: 66%;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 74% 100%, 0 100%);
}

.collage-photo-b {
  inset-inline-end: 0;
  bottom: 0;
  width: 78%;
  height: 62%;
  border: 6px solid var(--paper);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%, 0 30%);
}

.collage-seam {
  position: absolute;
  z-index: 2;
  inset-inline-start: 8%;
  top: 58%;
  width: 130%;
  height: 14px;
  background: linear-gradient(90deg, transparent, var(--paper) 22%, var(--paper) 78%, transparent);
  border-top: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
  transform: rotate(-38deg);
  pointer-events: none;

  [dir="ltr"] & {
    transform: rotate(38deg);
  }
}

.collage-play {
  position: absolute;
  z-index: 3;
  inset-inline-start: 50%;
  top: 62%;
  width: 62px;
  height: 62px;
  margin-inline-start: -31px;
  margin-top: -31px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 16px 34px rgb(197 21 40 / 0.4);
  transition: transform 260ms var(--ease), background 260ms var(--ease);

  &:hover {
    transform: scale(1.08);
    background: var(--red-dark);
  }
}

.collage-stat {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 0.2rem;
  box-shadow: var(--shadow);
}

.collage-stat-top {
  inset-inline-end: -4%;
  top: 4%;
  width: 44%;
  padding: 1.4rem 1.5rem;
  background: var(--paper);
  border-inline-start: 4px solid var(--red);
  border-start-start-radius: 22px;

  strong {
    display: block;
    color: var(--navy);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 800;
    line-height: 1;
  }

  span {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
  }
}

.collage-stat-bottom {
  inset-inline-start: 0;
  bottom: 2%;
  width: 42%;
  padding: 1.5rem 1.35rem;
  background: var(--red);
  color: #fff;

  .collage-stat-bottom-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0.4rem;
    background: rgb(255 255 255 / 0.18);
    border-radius: 50%;
    font-size: 1.05rem;
  }

  strong {
    font-size: clamp(1.7rem, 2.8vw, 2.2rem);
    font-weight: 800;
    line-height: 1;
  }

  span {
    display: block;
    max-width: 14ch;
    margin-top: 0.2rem;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.4;
  }
}

@media (max-width: 640px) {
  .hero-collage {
    max-width: 320px;
    margin-inline: auto;
  }

  .collage-stat-top,
  .collage-stat-bottom {
    padding: 1rem;
  }

  .collage-play {
    width: 50px;
    height: 50px;
  }
}




/* =============================================================
   ضيف هذا القسم في نهاية assets/css/styles.css (بدّل القسم القديم
   بتاع .sector-expand-section لو ضفته قبل كده بنسخته الأولى)
   SECTOR EXPAND GALLERY v2  ->  <section class="section sector-expand-section">
   - الإطار الخارجي بيستخدم نفس تكنيك .number-card/.number-card-inner:
     قشرة حمراء متدرّجة مقصوصة بـvar(--card-clip/EN) + بانل داخلي
     navy-deep مقصوص بنفس الشكل، فالمكوّن ده "مصنوع" من عناصر هويتك.
   - كل كرت له ميل خفيف بديل (--tilt) بيرجع صفر عند hover/focus.
   - الأيقونة بقت badge أحمر بزاوية محفورة (clip-path notch) ظاهر
     دايمًا، بدل ما كان مخفي، ونفس البادج بيتكرر أكبر جوه المحتوى
     الموسّع فوق العنوان.
   - الوصف بقى جوه .sector-expand-body بالترتيب الصحيح فوق بعضه.
   ============================================================= */
.sector-expand-section {
  position: relative;
  overflow: hidden;

  .sector-expand-shape {
    position: absolute;
    inset-inline-end: -6%;
    top: -8%;
    width: 22%;
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;

    img {
      width: 100%;
      height: auto;
    }

    @media (max-width: 900px) {
      display: none;
    }
  }

  /* ---- القشرة الخارجية: تدرّج أحمر مقصوص، نفس روح .number-card ---- */
  .sector-expand-frame {
    position: relative;
    z-index: 1;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: 6px;
    background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
    clip-path: var(--card-clipEn);
    box-shadow: 0 26px 54px rgb(197 21 40 / 0.18);

    [dir="rtl"] & {
      clip-path: var(--card-clip);
    }

    @media (max-width: 900px) {
      padding: 0;
      background: none;
      box-shadow: none;
      clip-path: none;
    }
  }

  /* ---- البانل الداخلي: navy-deep مقصوص بنفس الشكل، فيه الكروت ---- */
  .sector-expand {
    position: relative;
    display: flex;
    gap: 0;
    height: clamp(440px, 42vw, 600px);
    background: var(--navy-deep);
    clip-path: var(--card-clipEn);
    overflow: hidden;

    [dir="rtl"] & {
      clip-path: var(--card-clip);
    }

    @media (max-width: 900px) {
      flex-direction: column;
      height: auto;
      gap: 6px;
      background: transparent;
      clip-path: none;
    }
  }

  .sector-expand-card {
    --tile-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --tilt: 0deg;
    position: relative;
    flex: 1;
    min-width: 62px;
    overflow: hidden;
    background: var(--navy-deep);
    cursor: pointer;
    border-inline-end: 1px solid rgb(255 255 255 / 0.16);
    /* transform: rotate(var(--tilt)); */
    transition:
      flex-grow 640ms var(--tile-ease),
      transform 520ms var(--tile-ease),
      box-shadow 420ms var(--tile-ease),
      border-color 320ms var(--tile-ease);

    &:last-child {
      border-inline-end: 0;
    }

    /* هايلايت أحمر على الحافّة الأمامية للكرت المفتوح، نفس منطق
       .number-cell::before و .project-list-item::before */
    &::before {
      content: "";
      position: absolute;
      z-index: 4;
      inset-block: 0;
      inset-inline-start: 0;
      width: 2px;
      background: white;
      /* opacity: 0; */
      transition: opacity 320ms var(--tile-ease);
    }

    &:first-child::before {
      display: none;
    }

    &:hover,
    &:focus-within {
      flex-grow: 6;
      z-index: 3;
      border-inline-end-color: rgb(255 255 255 / 0.28);
      transform: rotate(0deg) translateY(-4px);
      box-shadow: 0 22px 40px rgb(4 17 46 / 0.4);

      &::before {
        opacity: 1;
      }

      .sector-expand-media img {
        filter: grayscale(0) brightness(0.86);
        transform: scale(1.08);
      }

      .sector-expand-shade {
        background: linear-gradient(200deg, rgb(197 21 40 / 0.22) 0%, rgb(4 17 46 / 0.4) 46%, rgb(4 17 46 / 0.92) 100%);
      }

      .sector-expand-collapsed {
        opacity: 0;
        transform: scale(0.95);
        pointer-events: none;
      }

      .sector-expand-body {
        opacity: 1;
        transform: none;
        pointer-events: auto;
      }
    }

    &:focus-visible {
      outline-offset: -3px;
    }

    @media (max-width: 900px) {
      flex: none;
      height: 108px;
      border-inline-end: 0;
      border-bottom: 1px solid rgb(255 255 255 / 0.16);
      transform: none;
      transition: height 560ms var(--tile-ease);

      &:last-child {
        border-bottom: 0;
      }

      &::before {
        inset-block: 0;
        inset-inline-start: 0;
        width: 3px;
      }

      &:nth-child(odd),
      &:nth-child(even) {
        --tilt: 0deg;
      }

      &:hover,
      &:focus-within {
        height: 268px;
        border-bottom-color: rgb(255 255 255 / 0.28);
        transform: none;
        box-shadow: none;
      }
    }
  }

  .sector-expand-media {
    position: absolute;
    inset: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(0.6) brightness(0.6);
      transform: scale(1.04);
      transition:
        filter 620ms var(--tile-ease),
        transform 900ms var(--tile-ease);
    }
  }

  .sector-expand-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgb(4 17 46 / 0.35) 0%, rgb(4 17 46 / 0.6) 55%, rgb(4 17 46 / 0.95) 100%);
    transition: background 420ms var(--tile-ease);
  }

  .sector-expand-index {
    position: absolute;
    z-index: 2;
    inset-inline-end: 0.9rem;
    top: 0.85rem;
    /* font-family: "Barlow Condensed", sans-serif; */
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: rgb(255 255 255 / 0.38);
  }

  /* ---- Badge الأيقونة: أحمر بزاوية محفورة (notch)، نفس منطق
     .service-tile-badge / .quality-award-badge بس بـclip-path ---- */
  .sector-expand-badge {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: var(--red);
    color: #fff;
    font-size: 1rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%);
    box-shadow: 0 10px 20px rgb(197 21 40 / 0.35);
    transition:
      transform 420ms var(--tile-ease),
      background 300ms var(--tile-ease);

    [dir="rtl"] & {
      clip-path: polygon(100% 0, 0 0, 0 calc(100% - 13px), 13px 100%, 100% 100%);
    }
  }

  .sector-expand-card:hover .sector-expand-badge,
  .sector-expand-card:focus-within .sector-expand-badge {
    background: var(--navy-deep);
    box-shadow: 0 10px 20px rgb(4 17 46 / 0.5);
  }

  .sector-expand-card:hover .sector-expand-collapsed .sector-expand-badge i,
  .sector-expand-card:focus-within .sector-expand-collapsed .sector-expand-badge i {
    transform: rotate(8deg);
  }

  /* ---- حالة الكرت المقفول: أيقونة + عنوان رأسي ظاهرين دايمًا ---- */
  .sector-expand-collapsed {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-block: 1.1rem 1.35rem;
    transition:
      opacity 320ms var(--tile-ease),
      transform 320ms var(--tile-ease);
  }

  .sector-expand-collapsed-label {
    display: flex;
    flex: 1;
    min-height: 0;
    align-items: center;
    justify-content: center;

    span {
      display: inline-block;
      white-space: nowrap;
      color: #fff;
      font-size: 0.85rem;
      font-weight: 800;
      letter-spacing: 0.01em;
      transform: rotate(-90deg);

      [dir="rtl"] & {
        transform: rotate(90deg);
      }
    }
  }

  /* ---- حالة الكرت الموسّع: badge أكبر + خط أحمر + عنوان + وصف ---- */
  .sector-expand-body {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.35rem 1.4rem 1.5rem;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition:
      opacity 380ms var(--tile-ease) 60ms,
      transform 440ms var(--tile-ease) 60ms;

    .sector-expand-badge {
      width: 48px;
      height: 48px;
      margin-bottom: 1rem;
      font-size: 1.15rem;
    }
  }

  .sector-expand-rule {
    display: block;
    width: 30px;
    height: 3px;
    margin-bottom: 0.65rem;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 420ms var(--tile-ease) 160ms;

    [dir="rtl"] & {
      transform-origin: right;
    }
  }

  .sector-expand-card:hover .sector-expand-rule,
  .sector-expand-card:focus-within .sector-expand-rule {
    transform: scaleX(1);
  }

  .sector-expand-title {
    max-width: none;
    margin: 0 0 0.5rem;
    color: #fff;
    font-size: clamp(1.05rem, 1.7vw, 1.32rem);
    line-height: 1.3;
  }

  .sector-expand-desc {
    max-width: 32ch;
    margin: 0;
    color: var(--soft-on-dark);
    font-size: 0.9rem;
    line-height: 1.75;
  }

  @media (max-width: 900px) {
    .sector-expand-collapsed {
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 0.9rem;
      padding: 0 1.1rem;
    }

    .sector-expand-collapsed-label {
      flex: none;
      justify-content: flex-start;

      /* [dir="rtl"] & فوق أعلى specificity، فلازم نلغيه صراحة
         وإلا العنوان كان بيفضل رأسي في العربي على الموبايل */
      span,
      [dir="rtl"] & span {
        transform: none;
        white-space: normal;
        font-size: 0.98rem;
        line-height: 1.4;
      }
    }

    .sector-expand-card:hover .sector-expand-collapsed,
    .sector-expand-card:focus-within .sector-expand-collapsed {
      opacity: 0;
      transform: translateY(-6px);
    }

    .sector-expand-body {
      padding: 1.1rem 1.15rem 1.3rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {

    .sector-expand-card,
    .sector-expand-media img,
    .sector-expand-shade,
    .sector-expand-badge,
    .sector-expand-collapsed,
    .sector-expand-body,
    .sector-expand-rule {
      transition: none !important;
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceInLeft {

  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    -moz-transform: translate3d(-3000px, 0, 0);
    -ms-transform: translate3d(-3000px, 0, 0);
    -o-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    -moz-transform: translate3d(25px, 0, 0);
    -ms-transform: translate3d(25px, 0, 0);
    -o-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  80% {
    -webkit-transform: translate3d(-10px, 0, 0);
    -moz-transform: translate3d(-10px, 0, 0);
    -ms-transform: translate3d(-10px, 0, 0);
    -o-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  100% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
}

@keyframes bounceInRight {

  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    -moz-transform: translate3d(3000px, 0, 0);
    -ms-transform: translate3d(3000px, 0, 0);
    -o-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    -moz-transform: translate3d(-25px, 0, 0);
    -ms-transform: translate3d(-25px, 0, 0);
    -o-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    -moz-transform: translate3d(10px, 0, 0);
    -ms-transform: translate3d(10px, 0, 0);
    -o-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  100% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.bounceInLeft {
  animation-name: bounceInLeft;
}

.bounceInRight {
  animation-name: bounceInRight;
}

.fadeIn {
  animation-name: fadeIn;
}

/* =============================================================
   PROJECT CONTROL SECTION (ضبط المشروع)  ->  Exact infographic style
   ============================================================= */
.project-control-section {
  position: relative;
  padding-block: clamp(4rem, 8vw, 6rem);
  background: var(--surface-2);

  .container h2 {
    margin: 40px 0 60px 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
  }

  /* Simplified grid system */
  .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
    width: 100%;
  }

  .col-md-8 {
    position: relative;
    padding: 0 15px;
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    margin-bottom: 30px;
  }

  .col-md-offset-2 {
    margin-left: 0;

    [dir="rtl"] & {
      margin-left: 0;
      margin-right: 0;
    }
  }

  .col-sm-4 {
    position: relative;
    padding: 0 15px;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-sm-offset-1 {
    margin-left: 8.333333%;

    [dir="rtl"] & {
      margin-left: 0;
      margin-right: 8.333333%;
    }
  }

  .col-md-4 {
    position: relative;
    padding: 0 15px;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-xs-7 {
    position: relative;
    padding: 0 15px;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .col-xs-5 {
    position: relative;
    padding: 0 15px;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .col-xs-offset-1 {
    margin-left: 8.333333%;

    [dir="rtl"] & {
      margin-left: 0;
      margin-right: 8.333333%;
    }
  }

  .text-center {
    text-align: center;
  }

  .hidden-xs {
    @media (max-width: 767px) {
      display: none;
    }
  }

  .box {
    -webkit-box-shadow: 0px 12px 6px -6px rgba(41, 41, 41, 0.25);
    -moz-box-shadow: 0px 12px 6px -6px rgba(41, 41, 41, 0.25);
    box-shadow: 0px 12px 6px -6px rgba(41, 41, 41, 0.25);
    padding: 0;
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .step1 {
    z-index: 999;
  }

  .step2 .animated {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    position: relative;
    top: -6px;
  }

  .step3 .animated {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    z-index: -3;
    position: relative;
    top: -12px;
  }

  .shape {
    width: 150px;
    height: 120px;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
    transform: skew(20deg);
    -webkit-box-shadow: 0px 12px 30px -6px rgba(41, 41, 41, 0.25);
    -moz-box-shadow: 0px 12px 30px -6px rgba(41, 41, 41, 0.25);
    box-shadow: 0px 12px 30px -6px rgba(41, 41, 41, 0.25);
    position: relative;
    text-align: center;
    flex-shrink: 0;
  }

  .shape-1 .shape {
    background: #e74c3c;
  }

  .shape-1 .material-icons {
    color: #e74c3c;
  }

  .shape-2 .shape {
    background: #34495e;
  }

  .shape-2 .material-icons {
    color: #34495e;
  }

  .shape-3 .shape {
    background: #f39c12;
  }

  .shape-3 .material-icons {
    color: #f39c12;
  }

  .number {
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    transform: skew(-20deg);
  }

  .number h1 {
    color: #fff;
    font-weight: 700;
    letter-spacing: 2px;
    padding-top: 8px;
    transform: scale(2, 3);
    -webkit-transform: scale(2, 3);
    -moz-transform: scale(2, 3);
    -ms-transform: scale(2, 3);
    -o-transform: scale(2, 3);
  }

  .box p {
    font-weight: 300;
    padding: 20px;
    margin: 0;
    flex: 1;
    line-height: 1.6;
  }

  .md-56 {
    font-size: 56px;
    padding: 20px;
    flex-shrink: 0;
  }

  @media (max-width: 900px) {
    .shape {
      width: 120px;
      height: 100px;
    }

    .number h1 {
      transform: scale(1.5, 2);
      -webkit-transform: scale(1.5, 2);
    }

    .md-56 {
      font-size: 40px;
      padding-top: 20px;
    }

    .col-md-8 {
      flex: 0 0 100%;
      max-width: 100%;
      width: 100%;
    }

    .col-md-4 {
      flex: 0 0 100%;
      max-width: 100%;
    }

    .col-xs-7,
    .col-xs-5 {
      flex: 0 0 100%;
      max-width: 100%;
    }

    .col-xs-offset-1 {
      margin-left: 0;

      [dir="rtl"] & {
        margin-right: 0;
      }
    }

    .col-sm-4 {
      flex: 0 0 100%;
      max-width: 100%;
    }

    .col-sm-offset-1 {
      margin-left: 0;

      [dir="rtl"] & {
        margin-right: 0;
      }
    }

    .col-md-offset-2 {
      margin-left: 0;

      [dir="rtl"] & {
        margin-right: 0;
      }
    }

    .hidden-xs {
      display: block;
    }
  }
}



/* =============================================================
   24. QA/QC CONTROLS GRID  ->  <div class="quality-grid"> on
       quality.html (قسم "ضوابط QA/QC")
   - كان القسم بيرث ستايل .values-grid العام (شبكة 12 عمود بمقاسات
     غير متساوية + كرت navy ضخم + دوران conic-gradient)، فالقراءة
     كانت صعبة والبطاقات متفاوتة بلا سبب. دلوقتي له ستايل مستقل.
   - كل الضوابط الستة متساوية الوزن بصريًا: شبكة ثلاثية منتظمة
     (2 على التابلت، 1 على الموبايل) عشان المقارنة والمسح السريع.
   - كل كرت = قشرة هيرلاين مقصوصة بزاوية EMCON (--qc-clip) + بانل
     داخلي، نفس تكنيك .number-card/.sector-expand-frame.
   - الترقيم 01..06 بيدي القسم إحساس الـchecklist ويسهّل الإشارة
     لبند معيّن، والشريط الأحمر العلوي بيتمدّد عند hover/focus.
   - الحركة كلها اختيارية: الظهور عبر [data-reveal] الأساسي،
     ومحكومة بـprefers-reduced-motion.
   ============================================================= */
.quality-grid {
  --qc-clip: polygon(0 0,
      calc(100% - 24px) 0,
      100% 28px,
      100% 100%,
      34px 100%,
      0 calc(100% - 40px));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);

  [dir="rtl"] & {
    --qc-clip: polygon(24px 0,
        100% 0,
        100% calc(100% - 40px),
        calc(100% - 34px) 100%,
        0 100%,
        0 28px);
  }

  @media (max-width: 1024px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (max-width: 620px) {
    grid-template-columns: 1fr;
  }
}

.quality-card {
  --qc-accent: var(--navy);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.75rem, 2.4vw, 2.25rem);
  /* القشرة هي الحدود نفسها: بيكسل واحد ظاهر حوالين البانل الداخلي.
     لون سادة مش تدرّج عشان الانتقال للأحمر يبقى ناعم. */
  background: var(--line);
  clip-path: var(--qc-clip);
  /* clip-path بيقص الـbox-shadow، فالظل بيتعمل بـdrop-shadow عشان
     يمشي مع حواف الكرت المائلة. */
  filter: drop-shadow(0 8px 16px rgb(7 29 73 / 0.06));
  transition:
    opacity 700ms var(--ease) calc(var(--reveal-index, 0) * 90ms),
    transform 700ms var(--ease) calc(var(--reveal-index, 0) * 90ms),
    translate 420ms var(--ease),
    background 420ms var(--ease),
    filter 420ms var(--ease);

  /* البانل الداخلي */
  &::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    background: var(--surface);
    clip-path: var(--qc-clip);
  }

  /* الشريط الأحمر العلوي، بيتمدّد من بداية السطر */
  &::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset-block-start: 1px;
    inset-inline-start: 1px;
    width: 56px;
    height: 3px;
    background: var(--red);
    transition: width 420ms var(--ease);
  }

  >* {
    position: relative;
    z-index: 1;
  }

  &:hover,
  &:focus-within {
    --qc-accent: var(--red);
    translate: 0 -6px;
    background: var(--red);
    filter: drop-shadow(0 16px 26px rgb(7 29 73 / 0.16));

    &::after {
      width: calc(100% - 2px);
    }
  }

  @media (prefers-reduced-motion: reduce) {

    &:hover,
    &:focus-within {
      translate: none;
    }
  }
}

/* صف علوي: بادج الأيقونة + رقم الضابط */
.quality-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

.quality-card-icon {
  width: 54px;
  height: 54px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  color: var(--on-dark);
  background: var(--qc-accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: background 420ms var(--ease);

  [dir="rtl"] & {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  }
}

.quality-card-index {
  font-family: "Barlow Condensed", "Alexandria", sans-serif;
  font-size: 2.35rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--navy) 34%, transparent);
  transition: color 420ms var(--ease);

  .quality-card:hover &,
  .quality-card:focus-within & {
    color: color-mix(in srgb, var(--red) 65%, transparent);
  }
}

.quality-card h3 {
  margin: 0;
  font-size: 1.16rem;
  font-weight: 750;
  line-height: 1.35;
  color: var(--navy);
  /* مصطلح QA/QC إنجليزي جوه صفحة RTL: يفضل اتجاهه الطبيعي */
  direction: ltr;
  text-align: start;

  [dir="rtl"] & {
    text-align: right;
  }
}

.quality-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.75;
}

@media (max-width: 620px) {
  .quality-card {
    gap: 0.6rem;
  }

  .quality-card-index {
    font-size: 2rem;
  }
}

/* =============================================================
   25. QUALITY INTRO  ->  <section class="section quality-intro-section">
       على quality.html (قسم "الجودة كنظام عمل")
   - كان القسم عبارة عن .media-frame (ظل فقط) + h2 + فقرة + .statement،
     من غير أي عنصر من هوية الموقع: لا eyebrow ولا شكل مزخرف ولا
     الإطار الأحمر المزاح.
   - دلوقتي بيستخدم نفس مفردات الهوية الموجودة أصلًا: .section-head
     بالـeyebrow، و.frame-offset (البلوك الأحمر اللي بيتمدّد مع الـreveal
     زي about-section و execute-section)، وبادج navy مقصوص بزاوية
     EMCON فوق حافة الصورة زي .frame-badge.
   - الاقتباس بقى .pull-quote بدل .statement العامة المشتركة مع صفحات
     المشاريع، فأي تعديل هنا ما يمسّهاش.
   ============================================================= */
.quality-intro-section {
  position: relative;
  overflow: hidden;
}

/* نفس وضع .about-shape على الصفحة الرئيسية: فوق-يسار خلف المحتوى */
.quality-intro-shape {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 20%;
  max-width: 280px;
  pointer-events: none;

  img {
    width: 100%;
    height: auto;
  }

  @media (max-width: 900px) {
    display: none;
  }
}

.quality-split {
  position: relative;
  z-index: 1;
  display: grid;
  /* minmax(0, …) مش 1fr: الـ.story-ribbon عرضه max-content، و1fr
     لوحده (= minmax(auto, 1fr)) كان بيخلي العمود يتمدد على قد النص
     ويطلع برا الشاشة في الموبايل فيتقص */
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;

  @media (max-width: 900px) {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 3.5rem);
  }
}

.quality-intro-visual {
  position: relative;

  .frame-offset img {
    aspect-ratio: 4 / 3;
  }
}

/* بادج اسم الوثيقة، بيركب على حافة الصورة زي .frame-badge */
.quality-doc-badge {
  --qi-clip: polygon(0 0,
      calc(100% - 20px) 0,
      100% 24px,
      100% 100%,
      28px 100%,
      0 calc(100% - 30px));
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  max-width: min(22rem, calc(100% - 4.5rem));
  margin-top: -3rem;
  margin-inline-start: 3.25rem;
  padding: 1.15rem 1.5rem;
  background: var(--navy-deep);
  color: var(--on-dark);
  clip-path: var(--qi-clip);

  [dir="rtl"] & {
    --qi-clip: polygon(20px 0,
        100% 0,
        100% calc(100% - 30px),
        calc(100% - 28px) 100%,
        0 100%,
        0 24px);
  }

  @media (max-width: 600px) {
    margin-inline-start: 1.75rem;
    margin-top: -2.25rem;
    padding: 1rem 1.25rem;
  }
}

.quality-doc-icon {
  flex: none;
  font-size: 1.75rem;
  color: var(--red);
}

.quality-doc-text {
  display: grid;
  gap: 0.2rem;
  min-width: 0;

  small {
    color: var(--soft-on-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
  }

  strong {
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.35;
    direction: ltr;
    text-align: start;

    [dir="rtl"] & {
      text-align: right;
    }
  }
}

/* الاقتباس: بانل رمادي بحافة حمراء + علامة اقتباس watermark.
   مشترك بين "الجودة كنظام عمل" وصفحات الخدمات. */
.pull-quote {
  position: relative;
  overflow: hidden;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: clamp(1.4rem, 2.4vw, 1.9rem) clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--surface-2);
  border-inline-start: 4px solid var(--red);

  p {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 34ch;
    color: var(--navy);
    font-size: clamp(1.08rem, 1.7vw, 1.4rem);
    font-weight: 720;
    line-height: 1.55;
  }
}

.pull-quote-mark {
  position: absolute;
  z-index: 0;
  inset-inline-end: 1rem;
  bottom: -0.75rem;
  font-size: 4.5rem;
  line-height: 1;
  color: color-mix(in srgb, var(--red) 12%, transparent);
  pointer-events: none;
}

/* =============================================================
   26. SERVICE DETAIL PAGES  ->  service-*.html (مولّدة من
       serviceDetail() في build/generate.js)
   - الصفحة كانت hero + عمودين وخلاص: صورة بظل، بوكس meta بحدود
     رمادية، وتلات مجموعات نطاق مفصولة بخط. مفيش breadcrumb، مفيش
     CTA في الآخر، ومفيش أي رابط لخدمة تانية — الصفحة كانت طريق
     مسدود، وكمان مفيش أي عنصر من لغة الهوية (القص المائل، الشريط
     الأحمر، الترقيم، الإطار المزاح).
   - دلوقتي: breadcrumb في الهيرو، صورة بـ.frame-offset، كارت جانبي
     navy مقصوص، مجموعات النطاق كروت مرقّمة 01..03، شريط "خدمات
     أخرى" بكل التخصصات التانية، وبانر CTA زي باقي الصفحات.
   ============================================================= */
.service-hero,
.project-hero {
  h1 {
    max-width: 18ch;
  }

  >.container>p:last-of-type:not(.eyebrow) {
    max-width: 62ch;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 1.1rem;
  }
}

.detail-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;

  a {
    color: var(--muted);
    transition: color 220ms var(--ease);

    &:hover {
      color: var(--red);
    }
  }

  i {
    font-size: 0.65rem;
    opacity: 0.55;
  }

  [aria-current="page"] {
    color: var(--navy);
  }

}

.service-layout {
  grid-template-columns: 0.68fr 1.32fr;
  align-items: start;

  @media (max-width: 900px) {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 6vw, 3.5rem);
  }
}

.service-aside-col {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.service-figure {
  margin: 0;

  img {
    aspect-ratio: 4 / 3;
  }
}

/* كارت النطاق في صفحات الخدمة المفردة: بانل navy مقصوص بزاوية EMCON،
   نفس روح .frame-badge. اتسمى scope-card عشان ما يتعارضش مع كارت
   السلايدر في الهوم، اللي كان بيرث منه الخلفية والـ clip-path
   والبادينج بالغلط. */
.scope-card {
  --sc-clip: polygon(0 0,
      calc(100% - 22px) 0,
      100% 26px,
      100% 100%,
      30px 100%,
      0 calc(100% - 34px));
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
  clip-path: var(--sc-clip);
  color: var(--on-dark);

  [dir="rtl"] & {
    --sc-clip: polygon(22px 0,
        100% 0,
        100% calc(100% - 34px),
        calc(100% - 30px) 100%,
        0 100%,
        0 26px);
  }

  /* strong {
    font-size: 1.12rem;
    color: #fff;
  } */

  >span {
    color: var(--soft-on-dark);
    font-size: 0.95rem;
    line-height: 1.6;
  }

  i {
    color: var(--surface);
  }

  .button {
    margin-top: 0.6rem;
  }
}

.scope-card-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 0.35rem;
  background: var(--red);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  color: #fff;
  font-size: 1.3rem;

  [dir="rtl"] & {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  }
}

/* ---- مجموعات النطاق: كروت مرقّمة بدل بلوكات مفصولة بخط ---- */
.scope-groups {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 1.75rem);
}

.scope-group {
  --sg-clip: polygon(0 0,
      calc(100% - 22px) 0,
      100% 26px,
      100% 100%,
      30px 100%,
      0 calc(100% - 34px));
  position: relative;
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  border: 0;
  background: var(--line);
  clip-path: var(--sg-clip);
  /* clip-path بيقص الـbox-shadow، فالظل بـdrop-shadow */
  filter: drop-shadow(0 10px 22px rgb(7 29 73 / 0.06));

  [dir="rtl"] & {
    --sg-clip: polygon(22px 0,
        100% 0,
        100% calc(100% - 34px),
        calc(100% - 30px) 100%,
        0 100%,
        0 26px);
  }

  &::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    background: var(--surface);
    clip-path: var(--sg-clip);
  }

  >* {
    position: relative;
    z-index: 1;
  }
}

.scope-group-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.35rem;

  h2 {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
  }
}

.scope-group-index {
  flex: none;
  font-family: "Barlow Condensed", "Alexandria", sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--red);
}

.scope-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.97rem;
    line-height: 1.6;

    i {
      flex: none;
      margin-top: 0.42rem;
      color: var(--red);
      font-size: 0.5rem;
    }
  }

  @media (max-width: 640px) {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ---- شريط الروابط المرتبطة (خدمات أخرى / مشروعات أخرى): الصفحة
   بقت hub مش طريق مسدود. مشترك بين service-*.html و project-*.html ---- */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1rem);

  @media (max-width: 520px) {
    grid-template-columns: 1fr;
  }
}

.related-item {
  --sr-clip: polygon(0 0,
      calc(100% - 16px) 0,
      100% 20px,
      100% 100%,
      22px 100%,
      0 calc(100% - 26px));
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  background: var(--line);
  clip-path: var(--sr-clip);
  color: var(--navy);
  font-weight: 700;
  transition: background 320ms var(--ease);

  [dir="rtl"] & {
    --sr-clip: polygon(16px 0,
        100% 0,
        100% calc(100% - 26px),
        calc(100% - 22px) 100%,
        0 100%,
        0 20px);
  }

  &::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    background: var(--paper);
    clip-path: var(--sr-clip);
    transition: background 320ms var(--ease);
  }

  >* {
    position: relative;
    z-index: 1;
  }

  >span {
    flex: 1;
    min-width: 0;
    font-size: 0.97rem;
    line-height: 1.4;
  }

  .fa-arrow-left-long {
    flex: none;
    color: var(--red);
    font-size: 0.85rem;
    transition: transform 320ms var(--ease);
  }

  &:hover,
  &:focus-visible {
    background: var(--red);

    .fa-arrow-left-long {
      transform: translateX(-4px);
    }
  }

  @media (prefers-reduced-motion: reduce) {

    &:hover .fa-arrow-left-long,
    &:focus-visible .fa-arrow-left-long {
      transform: none;
    }
  }
}

.related-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  background: var(--surface-2);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  color: var(--red);
  font-size: 1.02rem;
  transition: background 320ms var(--ease), color 320ms var(--ease);

  [dir="rtl"] & {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  }

  .related-item:hover &,
  .related-item:focus-visible & {
    background: var(--red);
    color: #fff;
  }
}

/* =============================================================
   27. PROJECT DETAIL PAGES  ->  project-*.html
   - النسخة اللي فاتت: هيرو 62dvh فاضي فيه عنوان وchips بس، وتحته
     عمودين: صورة + كارت بيانات طويل جنب جملة واحدة، فنص الصفحة
     كان فاضي، وأهم معلومة (قيمة العقد/الأطراف) مدفونة في سايدبار.
   - دلوقتي: هيرو بعمودين (النبذة + أزرار الإجراء جنب الصورة)،
     وتحته شريط "بيانات المرجع" navy راكب على حافة الهيرو بيتقري
     في نظرة واحدة، وقيمة العقد هي الخانة المميّزة بالأحمر.
     عدد الخانات بيختلف من مشروع للتاني (3 لـ 5)، فالشريط flex
     والخانات بتتمدّد تملا الصف بدل ما تسيب خانات فاضية.
   ============================================================= */
.project-hero {
  min-height: 0;
  /* الفسحة السفلية الكبيرة هي اللي شريط البيانات بيركب عليها */
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(5.5rem, 9vw, 7.5rem);
  border-bottom: 0;
  background: var(--surface);

  /* في الديسكتوب شريط القائمة راكب على أول الهيرو (~70px)، فكان
     البلوك الأحمر بتاع الصورة لازق فيه */
  @media (min-width: 901px) {
    padding-top: clamp(6.5rem, 9vw, 8.5rem);
  }
}

/* شريط البيانات فاصل كفاية، فـ"مشروعات أخرى" مش محتاجة padding
   الـ.section الكامل (8.5rem) فوق وتحت */
.project-specs-section + .related-section {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.project-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;

  @media (max-width: 900px) {
    grid-template-columns: 1fr;
  }
}

.project-hero-copy {
  h1 {
    margin-bottom: 1rem;
    font-size: clamp(2rem, 3.6vw, 3.2rem);
  }

  .hero-actions {
    margin-top: clamp(1.5rem, 2.6vw, 2rem);
  }
}

.project-lede {
  max-width: 52ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.8;
}

.project-figure {
  margin: 0;

  img {
    aspect-ratio: 4 / 3;
  }

  @media (max-width: 900px) {
    max-width: 560px;
  }
}

/* ---- شريط بيانات المرجع ---- */
.project-specs-section {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * clamp(3.5rem, 6vw, 5rem));
}

.project-specs {
  --ps-clip: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0;
  background: color-mix(in srgb, var(--navy) 82%, #fff);
  border-bottom: 4px solid var(--red);
  clip-path: var(--ps-clip);
  box-shadow: var(--shadow);

  [dir="rtl"] & {
    --ps-clip: polygon(28px 0, 100% 0, 100% 100%, 0 100%, 0 28px);
  }
}

.project-spec {
  flex: 1 1 190px;
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.1rem, 2vw, 1.6rem);
  background: var(--navy);

  dt {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--soft-on-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    i {
      flex: none;
      color: color-mix(in srgb, var(--red) 65%, #fff);
      font-size: 0.85rem;
    }
  }

  dd {
    margin: 0;
    color: #fff;
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    font-weight: 750;
    line-height: 1.45;
  }

  @media (max-width: 640px) {
    flex-basis: 150px;
  }
}

.project-spec-highlight {
  background: var(--red);

  dt,
  dt i {
    color: rgb(255 255 255 / 0.85);
  }

  dd {
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    font-variant-numeric: tabular-nums;
  }
}

/* =============================================================
   28. PROJECTS PAGE — DIRECTORY UX
       -> projects.html
       يكمّل القسم 23: الهيرو (عنوان h2 + مؤشرات + أزرار)، شريط
       التصفية اللاصق بعدّادات وزر إلغاء، حالة "لا نتائج"، ولوحة
       سياسة النشر المبنية بنفس تكنيك .sector-expand-frame
       (قشرة حمراء مقصوصة + بانل navy-deep بنفس القص).
   ============================================================= */

/* ---- 28.1 Hero ------------------------------------------------ */
/* الـ h1 الوحيد في الصفحة بقى عنوان الـbreadcrumb، فعنوان الهيرو
   نزل h2 ومحتاج نفس مقاسات .hero-content h1. */
.page-hero .hero-content h2.hero-title {
  max-width: 16ch;
  margin: 0 0 1.25rem;
  font-size: clamp(1.95rem, 3.4vw, 3.05rem);
}

.projects-hero {
  /* الهيرو بقى فيه محتوى أطول، فالمحاذاة السفلية بتبوّظ التوازن */
  align-items: center;

  .hero-content p {
    max-width: 52ch;
  }
}

/* ---- كولاج الهيرو -------------------------------------------
   الهدف كان راحة العين: صورة واحدة كبيرة هي البطل، صورة مساندة
   أصغر بإطار أبيض بيفصلها عنها، وكارت إحصاء فاتح صغير — بدل
   أربع طبقات بتتزاحم على نفس المساحة.
   الشكل بيتبع الهوية عن طريق التقويس الكبير غير المتماثل
   (نفس إيماءة .brand-panel في الهيدر) بدل القص الحاد، لأن
   الـclip-path كان بياكل من الكادر ويخلي الصورة متعبة في القراءة.
   كل الإحداثيات نسبية للحاوية فما بيخرجش منها في أي مقاس. --- */
.page-hero .container:has(> .project-collage) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;

  @media (max-width: 900px) {
    grid-template-columns: 1fr;
  }
}

.project-collage {
  --collage-curve: clamp(38px, 7vw, 78px);
  --collage-curve-sm: clamp(22px, 4vw, 48px);

  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 620 / 520;
  margin-inline-start: auto;

  @media (max-width: 900px) {
    margin-inline: auto;
  }

  @media (max-width: 640px) {
    max-width: 400px;
    /* الكارت بيطول على الموبايل، فالحاوية بتطول معاه */
    aspect-ratio: 620 / 620;
  }
}

/* البلوك الأحمر واقف ورا الصورة الكبيرة من ناحية الـinline-end،
   فيبان منه عمود على الجنب بيتبع نفس التقويس */
.project-collage-block {
  position: absolute;
  z-index: 0;
  top: 0;
  inset-inline-end: 0;
  width: 27%;
  height: 100%;
  background: linear-gradient(150deg, var(--red) 0%, var(--red-dark) 100%);
  border-start-end-radius: var(--collage-curve);
}

.project-collage-photo {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: var(--navy-deep);

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 900ms var(--ease);
  }

  &:hover img {
    transform: scale(1.04);
  }
}

/* الصورة الأساسية: أكبر عنصر في التكوين وكادرها كامل */
.project-collage-main {
  z-index: 2;
  top: 0;
  inset-inline-start: 0;
  width: 86%;
  height: 70%;
  border-start-end-radius: var(--collage-curve);
  box-shadow: 0 26px 52px rgb(7 29 73 / 0.16);
}

/* الصورة المساندة: إطار أبيض بيفصلها عن الكبيرة، وتقويس معاكس
   في الركن المقابل فالتكوين يتوازن */
.project-collage-sub {
  z-index: 3;
  bottom: 0;
  inset-inline-end: 0;
  width: 48%;
  height: 40%;
  border: clamp(7px, 1.5vw, 11px) solid var(--paper);
  border-end-start-radius: var(--collage-curve-sm);
  box-shadow: 0 22px 44px rgb(7 29 73 / 0.14);
}

/* كارت الإحصاء فاتح ومختصر عشان الصور تفضل هي البطل — نفس
   تكوين .collage-stat-top في §23 (ورق + شريط أحمر + تقويس صغير) */
.project-collage-stat {
  position: absolute;
  z-index: 4;
  /* قاعدته على خط قاعدة الصورة المساندة، فالتكوين يقفل متساوي */
  bottom: 0;
  inset-inline-start: 0;
  width: 40%;
  padding: clamp(0.95rem, 1.9vw, 1.4rem);
  background: var(--paper);
  border-top: 4px solid var(--red);
  border-start-start-radius: 22px;
  box-shadow: 0 22px 44px rgb(7 29 73 / 0.16);

  strong {
    display: block;
    margin-top: 0.5rem;
    color: var(--navy);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1;
  }

  >span:last-child {
    display: block;
    margin-top: 0.3rem;
    max-width: 16ch;
    color: var(--muted);
    font-size: clamp(0.72rem, 1.1vw, 0.84rem);
    font-weight: 700;
    line-height: 1.55;
  }

  @media (max-width: 640px) {
    width: 48%;
  }
}

.project-collage-stat-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--red);
  color: #fff;
  font-size: 0.82rem;
}

.hero-meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;

  li {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.9rem 0.5rem 0.55rem;
    background: var(--surface-2);
    color: var(--navy);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));

    [dir="rtl"] & {
      padding: 0.5rem 0.55rem 0.5rem 0.9rem;
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    }
  }

  .hero-meta-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    background: var(--red);
    color: #fff;
    font-size: 0.7rem;
  }

  @media (max-width: 640px) {
    gap: 0.5rem;

    li {
      font-size: 0.78rem;
    }
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.9rem;

  /* السهم النازل بيتحرك لتحت مش للجنب زي أسهم الأزرار العادية */
  .button:hover i.fa-arrow-down {
    transform: translateY(4px);
  }

  @media (max-width: 640px) {
    gap: 0.6rem;
  }
}

/* ---- 28.2 Directory toolbar ----------------------------------- */
.projects-directory-section {
  /* عشان الكارت الأخير ما يتقصّش والـ .project-content النازل برّه */
  padding-bottom: clamp(5.5rem, 10vw, 9.5rem);
  /* رابط "تصفح المراجع" في الهيرو ما يوقفش تحت الهيدر اللاصق */
  scroll-margin-top: 96px;
}

.section-head-note {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;

  @media (max-width: 900px) {
    max-width: none;
  }
}

.projects-toolbar {
  position: sticky;
  /* ارتفاع الهيدر المضغوط (.site-header.is-scrolled) */
  top: 82px;
  z-index: 12;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: 1rem 0 0.35rem;
  background: var(--surface-2);

  /* الشريط جوّه .container، فالخلفية بتتمد على جوانب الـgutter بس
     (‎-0.625rem = أصغر gutter في الموقع) عشان الكروت ما تبانش
     وهي بتعدّي من تحته، من غير ما نعمل overflow أفقي. */
  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: 0;
    inset-inline: -0.625rem;
    background: var(--surface-2);
  }

  /* حافة ناعمة تحت الشريط وهو لاصق، من غير خط قاطع */
  &::after {
    content: "";
    position: absolute;
    inset-inline: -0.625rem;
    bottom: -18px;
    height: 18px;
    background: linear-gradient(to bottom, var(--surface-2), transparent);
    pointer-events: none;
  }

  .filter-wrapper {
    margin-bottom: 0;
    align-items: center;
  }

  @media (max-width: 900px) {
    /* الهيدر مش fixed تحت 901px */
    top: 0;
  }

  @media (max-width: 768px) {
    padding-top: 0.75rem;
  }
}

/* عدّاد جنب اسم التصنيف: يقول قبل الضغط كام مرجع في كل قطاع */
.filter-button {
  gap: 0.55rem;

  .filter-count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding-inline: 0.3rem;
    background: rgb(7 29 73 / 0.08);
    color: var(--navy);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition:
      background 220ms var(--ease),
      color 220ms var(--ease);
  }

  &[aria-pressed="true"] .filter-count {
    background: rgb(255 255 255 / 0.22);
    color: #fff;
  }

  /* تصنيف من غير مراجع منشورة: باين بس مش مغري للضغط */
  &[data-filter-empty="true"] {
    opacity: 0.55;
  }
}

.toolbar-status {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.results-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;

  i {
    color: var(--red);
    font-size: 0.8rem;
  }
}

.filter-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 34px;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--navy);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 220ms var(--ease),
    color 220ms var(--ease),
    border-color 220ms var(--ease);

  i {
    font-size: 0.72rem;
    color: var(--red);
    transition: color 220ms var(--ease);
  }

  &:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;

    i {
      color: #fff;
    }
  }

  &:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
  }

  &[hidden] {
    display: none;
  }
}

/* ---- 28.3 Cards: لمسات فوق كروت القسم 23 (الشكل زي ما هو) ------ */
.projects-directory {
  /* الكارت بيطلّع .project-content برّه حدوده، فمحتاج فسحة تحت */
  padding-bottom: 2.25rem;

  .project-entry {
    /* الستاجر بيتحسب من data-reveal-stagger في site.js */
    transition-delay: calc(var(--reveal-index, 0) * 70ms);

    /* focus واضح لمستخدم الكيبورد: الكارت كله لينك */
    &:focus-visible {
      outline: 3px solid var(--red);
      outline-offset: 6px;
    }

    /* رقم المرجع فوق الصورة كان بلا ستايل مخصص.
       ركن "قراءة المزيد" مثبّت فوق-يمين في الاتجاهين، فالرقم
       بيتحط فوق-شمال بإحداثي فيزيائي عشان ما يتصادموش. */
    .project-entry-index {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      display: grid;
      place-items: center;
      min-width: 58px;
      padding: 0.6rem 0.9rem;
      background: rgb(4 17 46 / 0.55);
      backdrop-filter: blur(6px);
      color: #fff;
      font-size: 0.82rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      font-variant-numeric: tabular-nums;
      transition: background 300ms var(--ease);
    }

    &:hover .project-entry-index,
    &:focus-within .project-entry-index {
      background: var(--red);
    }

    /* الصورة تتعتم شوية عند الهوفر عشان الكارت الأبيض يفضل هو البطل */
    &:hover .project-image::after,
    &:focus-within .project-image::after {
      background: rgb(4 17 46 / 0.26);
    }

    /* شريط أحمر رفيع فوق بانل المحتوى، نفس إيماءة .collage-stat-top */
    .project-content::before {
      content: "";
      position: absolute;
      inset-inline: 0;
      top: 0;
      height: 3px;
      background: var(--red);
      transform: scaleX(0);
      transform-origin: 0 50%;
      transition: transform 420ms var(--entry-ease);

      [dir="rtl"] & {
        transform-origin: 100% 50%;
      }
    }

    &:hover .project-content::before,
    &:focus-within .project-content::before {
      transform: scaleX(1);
    }

    /* بانل المحتوى بيطلع 28px برّه الكارت، والكارت الطرفي بيلمس
       حافة .container، فالزيادة دي كانت بتعمل سكرول أفقي للصفحة.
       الإزاحة اتربطت بالـgutter الحقيقي لكل مقاس: 16px لحد 1295،
       10px تحت 640، و28px فوق كده لما الهامش يسمح. */
    @media (max-width: 1295px) {
      .project-content {
        inset-inline-start: -16px;

        [dir="rtl"] & {
          inset-inline-start: auto;
          inset-inline-end: -16px;
        }
      }
    }

    @media (max-width: 640px) {
      .project-content {
        inset-inline-start: -10px;

        [dir="rtl"] & {
          inset-inline-start: auto;
          inset-inline-end: -10px;
        }
      }
    }
  }

  /* الكارت المخفي بالتصفية: site.js بيحط hidden، و§23 بتخفيه */
  @media (prefers-reduced-motion: reduce) {
    .project-entry {
      transition-delay: 0ms;
    }
  }
}

/* ---- 28.4 Empty state ----------------------------------------- */
.projects-empty {
  max-width: 62ch;
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 3.5rem);
  background: var(--paper);
  text-align: center;
  box-shadow: var(--shadow);
  clip-path: var(--card-clipEn);

  [dir="rtl"] & {
    clip-path: var(--card-clip);
  }

  &[hidden] {
    display: none;
  }

  h3 {
    margin: 1.1rem 0 0.7rem;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
  }

  p {
    margin: 0;
    color: var(--muted);
    font-size: 0.98rem;
  }
}

.projects-empty-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-inline: auto;
  background: var(--surface-2);
  color: var(--red);
  font-size: 1.35rem;
}

.projects-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.6rem;

  /* .button = inline-flex، فلازم نكسر الـinline-flex لما يتخفي */
  .button[hidden] {
    display: none;
  }
}

/* ---- 28.5 Publication notice ---------------------------------- */
.projects-notice-frame {
  padding: 6px;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  clip-path: var(--card-clipEn);
  box-shadow: 0 26px 54px rgb(197 21 40 / 0.18);

  [dir="rtl"] & {
    clip-path: var(--card-clip);
  }

  @media (max-width: 900px) {
    padding: 0;
    background: none;
    box-shadow: none;
    clip-path: none;
  }
}

.projects-notice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(2.25rem, 4.5vw, 3.75rem);
  background: var(--navy-deep);
  color: var(--on-dark);
  clip-path: var(--card-clipEn);

  [dir="rtl"] & {
    clip-path: var(--card-clip);
  }

  @media (max-width: 900px) {
    grid-template-columns: 1fr;
    clip-path: none;
  }

  .eyebrow {
    margin-bottom: 0.9rem;
    color: #fff;
    opacity: 0.85;
  }

  h2 {
    max-width: 18ch;
    margin-bottom: 1rem;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  }

  /* استثناء .eyebrow عشان ما يورّثش مقاس فقرة المتن */
  .projects-notice-main p:not(.eyebrow) {
    max-width: 48ch;
    margin-bottom: 1.8rem;
    color: var(--soft-on-dark);
    font-size: 1rem;
  }
}

.projects-notice-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 64px;
  margin-bottom: 1.4rem;
  background: var(--red);
  color: #fff;
  font-size: 1.25rem;
  box-shadow: 0 14px 28px rgb(197 21 40 / 0.35);
}

.projects-notice-list {
  display: grid;
  align-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding-block: 1.15rem;
    border-top: 1px solid rgb(255 255 255 / 0.14);

    &:first-child {
      border-top: 0;
      padding-top: 0;
    }

    &:last-child {
      padding-bottom: 0;
    }

    strong {
      display: block;
      margin-bottom: 0.25rem;
      color: #fff;
      font-size: 0.98rem;
      font-weight: 800;
    }

    span span {
      color: var(--soft-on-dark);
      font-size: 0.9rem;
      line-height: 1.65;
    }
  }
}

.projects-notice-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  background: var(--red);
  color: #fff;
  font-size: 0.72rem;

  &.projects-notice-mark-muted {
    background: rgb(255 255 255 / 0.14);
    color: var(--soft-on-dark);
  }
}

/* =============================================================
   26. PRELOADER  ->  <div id="preloader"> in all HTML files
   حروف EMCON نفسها مسحوبة من logo.svg كـ inline SVG (مش <img>)،
   عشان كل حرف يبقى <g> يتحرك لوحده. ترتيب الرسم في الماركب هو
   E ثم O ثم C ثم M ثم N — نفس ترتيب اللوجو الأصلي عشان الزجزاج
   الأحمر يفضل مرسوم فوق E وفوق C. ترتيب *الحركة* بقى E→M→C→O→N
   عن طريق animation-delay لكل حرف، مش عن طريق :nth-child.
   ============================================================= */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* معتمة وهي واقفة: حواف الـclip-path متنعّمة، فلو الحاوية
     شفافة كان هيبان خيط من محتوى الصفحة على طول الشق.
     بتبقى شفافة في لحظة الفتح بس. */
  background: var(--surface-2);
}

#preloader.leave {
  background: transparent;
}

#preloader.hidden {
  display: none;
}

/* ---- ألواح الشق ----
   خط الفصل مشتق من محور زجزاج حرف M نفسه: أخدنا حافتي البوليجون
   العليا والسفلى وحسبنا المتوسط بينهم، وطلعت ٧ نقاط بتترجم
   للنِسَب اللي تحت. النتيجة إن الصفحة بتتشقّ على نفس ملمح الحرف
   بدل ما تطلع لفوق. */
.pl-panel {
  position: absolute;
  inset: 0;
  background: var(--surface-2);
  will-change: transform;
  transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
}

.pl-panel-top {
  clip-path: polygon(0 0,
      100% 0,
      100% calc(50% + 3.9vh),
      80.2% calc(50% + 3.9vh),
      78.8% calc(50% - 1.9vh),
      56.4% calc(50% + 7vh),
      47.9% calc(50% - 7vh),
      23.1% calc(50% + 3vh),
      0 calc(50% + 3.1vh));
}

.pl-panel-bottom {
  clip-path: polygon(0 calc(50% + 3.1vh),
      23.1% calc(50% + 3vh),
      47.9% calc(50% - 7vh),
      56.4% calc(50% + 7vh),
      78.8% calc(50% - 1.9vh),
      80.2% calc(50% + 3.9vh),
      100% calc(50% + 3.9vh),
      100% 100%,
      0 100%);
}

/* الزوج الأحمر ورا الزوج الفاتح وبيتحرك متأخر شوية، فبيبان كحافة
   حمرا بتتبع الشق وهو بيتفتح — نفس دور الشريط الأحمر القديم.
   مخفي وهو واقف: الحافة المتنعّمة بتاعة اللوح الفاتح كانت بتسرّبه
   كخط أحمر رفيع على طول الزجزاج طول مدة البريلودر. */
.pl-panel-red {
  background: var(--red);
  opacity: 0;
  transition-delay: 90ms;
}

#preloader.leave .pl-panel-red {
  opacity: 1;
}

#preloader.leave .pl-panel-top {
  transform: translateY(-101%);
}

#preloader.leave .pl-panel-bottom {
  transform: translateY(101%);
}

#preloader.leave .preloader-mark {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 260ms ease, transform 420ms cubic-bezier(0.76, 0, 0.24, 1);
}


/* ---- الوردمارك ---- */
.preloader-mark {
  position: relative;
  z-index: 1;
  width: min(420px, 62vw);
  height: auto;
  overflow: visible;
}

.preloader-mark .pl-navy {
  fill: var(--navy);
}

.preloader-mark .pl-red {
  fill: var(--red);
}

/* transform-box: fill-box بيخلي الـtransform لكل حرف محسوب على
   الـbounding box بتاعه هو، مش على الـviewBox كله — من غيرها كل
   الحروف هتتحرك من نفس النقطة. */
.pl-letter {
  transform-box: fill-box;
  transform-origin: 50% 70%;
  animation: pl-letter 0.75s var(--ease) both;
}

.pl-e {
  animation-delay: 0s;
}

.pl-m {
  animation-delay: 0.09s;
}

.pl-c {
  animation-delay: 0.18s;
}

.pl-o {
  animation-delay: 0.27s;
}

.pl-n {
  animation-delay: 0.36s;
}

@keyframes pl-letter {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---- حركة التحميل: لمعة ماشية على الجزء الأحمر كله ----
   الأحمر في الوردمارك مش حرف واحد: زجزاج M، وبعده الخط الأحمر
   اللي بيعدّي جوه C و O و N. كل شكل منهم فوقه نسخة بلون أفتح
   متقنّعة بنفس المستطيل المتحرك، فاللمعة بتقرا كموجة واحدة
   ماشية على طول الخط من أول الزجزاج لآخر N.
   لو الأنيميشن ما اشتغلش، اللي بيبان هو الأحمر العادي. */
.preloader-mark .pl-shine {
  fill: #ff7d8d;
}

.preloader-mark .pl-sweep {
  animation: pl-shine-sweep 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* الأحمر بيمتد من x=222 (بداية الزجزاج) لـ x=1258 (آخر الخط في N).
   المستطيل عرضه 230 وبيبدأ عند 222، فالإزاحة لازم تودّيه من قبل
   البداية لبعد النهاية: -235 ... +1065 */
@keyframes pl-shine-sweep {
  from {
    transform: translateX(-235px);
  }

  to {
    transform: translateX(1065px);
  }
}



@media (max-width: 480px) {
  .preloader-mark {
    width: 68vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl-panel {
    transition: opacity 200ms linear;
    transition-delay: 0s;
  }

  #preloader.leave .pl-panel {
    transform: none;
    opacity: 0;
  }

  .pl-letter {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* اللمعة تتشال خالص ويفضل الأحمر العادي */
  .preloader-mark .pl-sweep {
    animation: none;
    opacity: 0;
  }
}

/* =============================================================
   27. SWIPER  ->  index.html (hero + "ما الذي ننفذه")
   السلايدر اليدوي القديم (data-hero-slider / data-slider="track")
   اتبدل بـ Swiper 11 من الـCDN. الكلاس اللي بيحدد الشريحة النشطة
   بقى .swiper-slide-active بدل .is-active، وكل أنيميشن الهيرو
   متعلّق بيه. Swiper بيقرا الاتجاه من dir على <html> عند الـinit،
   ومبدّل اللغة بيعمل reload كامل فمفيش اتجاه بايت.
   ============================================================= */

/* ---- Hero ---- */
.hero .hero-swiper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* الزوم البطيء بيخرج بره حدود الشريحة، فلازم تقص */
.hero .hero-slide {
  overflow: hidden;
}

/* الصورة تدخل بزوم وتهدى — animation مش transition عشان تعيد
   التشغيل كل مرة الكلاس يترجع في وضع الـloop */
.hero .hero-slide.swiper-slide-active .hero-background {
  animation: hero-ken-burns 7.5s ease-out both;
}

@keyframes hero-ken-burns {
  from {
    transform: scale(1.085);
  }

  to {
    transform: scale(1);
  }
}

/* نقط الهيرو: Swiper بيولّد <button> عن طريق renderBullet، فشكل
   الأزرار القديم فضل زي ما هو — الحالة النشطة بس بقت بكلاس Swiper */
.hero .hero-pagination {
  --swiper-pagination-bullet-horizontal-gap: 0;
  --swiper-pagination-bullet-vertical-gap: 0;
}

.hero .hero-pagination .swiper-pagination-bullet {
  width: var(--pg-dot);
  height: var(--pg-dot);
  margin: 0;
  border-radius: 0;
  opacity: 1;
}

.hero .hero-pagination .swiper-pagination-bullet-active {
  background: #fff;
  transform: scale(var(--pg-scale));
}

/* السهم المعطّل مالوش لازمة مع loop، بس نضمن إنه ما يختفيش */
.hero .hero-arrow.swiper-button-disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---- سلايدر الخدمات ---- */
.services-section .service-swiper {
  /* .swiper لازم يفضل overflow:hidden عشان يقص الشرائح الجنبية،
     فالمساحة اللي الظل محتاجها بتتعمل بـpadding مش بـoverflow */
  padding-block: 0.5rem 1.75rem;
  margin-block: -0.5rem -1.75rem;
}

/* height:auto بيخلي الكروت تتمدد لنفس الطول بدل height:100%
   اللي Swiper بيحطها افتراضيًا */
.services-section .service-swiper .swiper-slide {
  height: auto;
}

.services-section .service-pagination {
  --swiper-pagination-bullet-horizontal-gap: 0;

  /* Swiper بيخلي أي pagination عنصر absolute بـleft:0/width:100%
     وbottom:8px، فالنقط كانت بتطلع من السياق العادي وتركب على
     كروت السلايدر بدل ما تقف تحتها بالـmargin-top بتاع .slider-dots */
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  top: auto;
  width: auto;
}

.services-section .service-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0;
  border-radius: 0;
  background: #c3cad6;
  opacity: 1;
}

.services-section .service-pagination .swiper-pagination-bullet:hover {
  background: var(--navy);
}

.services-section .service-pagination .swiper-pagination-bullet-active {
  background: var(--red);
  box-shadow:
    0 0 0 3px var(--surface-2),
    0 0 0 4px var(--red);
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-slide.swiper-slide-active .hero-background {
    animation: none;
    transform: none;
  }
}

/* ---- Hero: مؤشرات الـautoplay ومفتاح الإيقاف ومؤشر السكرول ----
   --hero-progress بيتحدث من حدث autoplayTimeLeft في Swiper
   (site.js -> bindSwipers)، فالحلقة بتتزامن مع العدّاد الحقيقي
   وبتقف مع الإيقاف بدل animation مستقلة بتفرق عنه. */
.hero .hero-pagination .swiper-pagination-bullet {
  position: relative;
}

/* منطقة الضغط متمركزة على المربع بحجم --pg-hit، فبتفضل فوق
   الحد الأدنى (24px) مهما صغّرنا المربع في الشاشات الصغيرة،
   ومن غير ما تتداخل مع جارتها لأن الـgap متحسّب على --pg-reach. */
.hero .hero-pagination .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--pg-hit);
  height: var(--pg-hit);
  transform: translate(-50%, -50%);
}

.hero .hero-pagination .swiper-pagination-bullet-active::before {
  content: "";
  position: absolute;
  inset: calc(var(--pg-ring) * -1);
  padding: 2px;
  background: conic-gradient(from -90deg,
      #fff calc(var(--hero-progress, 0) * 360deg),
      rgb(255 255 255 / 0.28) 0);
  /* إطار مربع سمكه 2px: قناعين، واحد على content-box وواحد على
     البوكس كله، والفرق بينهم هو الإطار. radial-gradient ما ينفعش
     هنا لأنه بيدي حلقة دايرية. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}


/* الحلقة مالهاش معنى والتبديل التلقائي واقف */
.hero.is-paused .hero-pagination .swiper-pagination-bullet-active::before {
  opacity: 0.35;
}

.hero .hero-arrow-play {
  font-size: 0.8rem;
}

.hero .hero-arrow-play[aria-pressed="true"] {
  border-color: var(--red);
  background: var(--red);
}

/* ---- مؤشر التمرير لأسفل ---- */
.hero .hero-scroll {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 1.6rem;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem 0.5rem;
  color: rgb(255 255 255 / 0.78);
  font-size: 0.72rem;
  transform: translateX(-50%);
  transition: color 240ms var(--ease);
}

.hero .hero-scroll:hover,
.hero .hero-scroll:focus-visible {
  color: #fff;
}

.hero .hero-scroll-line {
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 0.8));
  overflow: hidden;
}

.hero .hero-scroll i {
  animation: hero-scroll-nudge 1.9s var(--ease) infinite;
}

@keyframes hero-scroll-nudge {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }

  45% {
    transform: translateY(5px);
    opacity: 1;
  }
}

/* النقط بتنزل تحت في الموبايل، فمؤشر السكرول يتشال عشان
   ما يركبش عليها */
@media (max-width: 640px) {
  .hero .hero-scroll {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-scroll i {
    animation: none;
  }

  .hero .hero-pagination .swiper-pagination-bullet-active::before {
    display: none;
  }
}