/* =====================================================================
   Fonts, self-hosted.

   These were three families from fonts.googleapis.com: two extra origins to
   resolve, connect and negotiate TLS with before first paint, a
   render-blocking stylesheet, and — measured — 67.9KB of it served
   `private, max-age=86400`, so a returning visitor re-downloaded it daily.
   Same-origin and fingerprinted, they cache for a year and can be preloaded,
   which is what removes the layout shift on the Arabic pages where the font
   used to swap in a second and a half after first paint.

   Archivo and Inter are variable, so one file each covers every weight.
   IBM Plex Sans Arabic is not, and ships at two weights rather than the four
   that were being pulled before: CSS weight matching takes 500 down to 400
   and 600 up to 700 on its own.

   IBM Plex carries its own Latin, which is why it stays first in the
   :lang(ar) stack — putting a Latin face first would add Archivo and Inter
   to every Arabic page to save less than it costs.
   ===================================================================== */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/archivo-latin-wght-normal.woff2?v=1") format("woff2-variations");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2?v=1") format("woff2-variations");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2?v=1") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2?v=1") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   Sahool Al Khair — Design System & Styles (v2)
   Bilingual (EN / AR), bidirectional (LTR / RTL) — logical properties only
   ===================================================================== */

:root {
  /* Brand */
  --green: #0B8463;
  --green-deep: #0B623F;
  --green-dark: #084A30;
  --green-soft: #E7F2ED;
  --green-100: #CDE4D8;
  --green-glow: rgba(11, 132, 99, 0.25);

  /* Neutrals */
  --ink: #1A1A1A;
  --charcoal: #0B4C31;
  --charcoal-2: #0B623F;
  --slate: #4A4A4A;
  --muted: #6E7A74;
  --surface: #FFFFFF;
  --surface-alt: #F6F8F5;
  /* Page ground (brand "Paper"); cards stay --surface so they lift off it. */
  --paper: #F7F8F4;
  --paper-2: #EDF1E9;
  --surface-dim: #EDF1EA;
  --border: #E3E8E1;
  --border-strong: #CBD3C8;

  /* Type */
  /* No Arabic face here on purpose: :lang(ar) below puts IBM Plex first for
     Arabic pages, and leaving it in the default stack made every English page
     download 35KB of Arabic webfont to render "عربي" in the language switch. */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --tracking-label: 0.14em;
  --lh-body: 1.7;

  /* Shape & motion */
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(11, 60, 40, 0.06), 0 3px 12px rgba(11, 60, 40, 0.05);
  --shadow-md: 0 10px 28px rgba(11, 60, 40, 0.09), 0 2px 6px rgba(11, 60, 40, 0.05);
  --shadow-lg: 0 24px 60px rgba(21, 24, 29, 0.14), 0 8px 20px rgba(21, 24, 29, 0.06);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(80px, 10vw, 128px);
  --nav-h: 72px;
}

:lang(ar) {
  /* No Latin fallback here: IBM Plex Sans Arabic ships its own Latin subset,
     so it covers the English words on an Arabic page by itself. Naming
     Archivo and Inter behind it made every Arabic page fetch 81KB of Latin
     webfont it then had no glyphs to draw with. */
  --font-display: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --tracking-label: 0;
  --lh-body: 1.9;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; font-family: var(--font-body); font-size: 16px; line-height: var(--lh-body);
  color: var(--slate);
  background: var(--paper);
  background-image: linear-gradient(180deg, #FCFDFB 0%, var(--paper) 420px, var(--paper) 100%);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
  font-feature-settings: "cv11", "ss01";
}
img, svg, video { display: block; max-width: 100%; }

/* Components that set their own `display` beat the user agent's
   `[hidden] { display: none }`, which silently broke the project filters,
   "show all" and the lightbox — everything stayed on screen. */
[hidden] { display: none !important; }
.svc-row__media, .sub__media, .lp__media, .pj__media,
.page-hero__media, .project__media, .cside__map, .nf__media, .about__media figure { background: var(--paper-2); }
.js img[loading="lazy"] { opacity: 0; transition: opacity 0.45s var(--ease); }
.js img[loading="lazy"].is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js img[loading="lazy"] { opacity: 1; transition: none; } }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4 { letter-spacing: 0; line-height: 1.35; font-weight: 700; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--green-100); color: var(--ink); }

/* Direction helpers */
.only-ar { display: none; }
[dir="rtl"] .only-ar { display: initial; }
[dir="rtl"] .only-en { display: none; }
[dir="rtl"] .dir-flip { transform: scaleX(-1); }

/* Phosphor duotone: stack both glyph layers in one grid cell (direction-proof) */
.ph-duotone { display: inline-grid; place-items: center; line-height: 1; flex-shrink: 0; }
.ph-duotone::before, .ph-duotone::after { grid-area: 1 / 1; margin: 0 !important; }

/* ---------- Utilities ---------- */
.container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section--alt { background: linear-gradient(180deg, var(--paper-2) 0%, var(--surface-alt) 48%, var(--paper-2) 100%); }
.section--dark { background: var(--charcoal); color: #C9CFD6; position: relative; }
/* Ease the seam between the light ground and a dark band. */
.section--dark::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 120px; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6,58,36,0.55), rgba(6,58,36,0)); }
.section--dark > .container { position: relative; z-index: 1; }
.section--dark h2, .section--dark h3 { color: #fff; }
.icon { width: 1.25em; height: 1.25em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12.5px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--green-deep); margin-bottom: 18px; font-family: var(--font-display);
}
:lang(ar) .eyebrow { font-size: 14px; font-weight: 700; }
.eyebrow::before { display: none; }
.section--dark .eyebrow { color: var(--green); }

.h2 { font-size: clamp(32px, 4vw, 50px); max-width: 20ch; }
.lead { font-size: clamp(16px, 1.25vw, 18px); max-width: 60ch; color: var(--slate); }
.section-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--split { grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.2fr 1fr; gap: 48px; }
  .section-head--split .lead { justify-self: end; margin-bottom: 6px; }
}
.accent { color: var(--green); }
.accent-deep { color: var(--green-deep); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, color 0.25s, border-color 0.25s;
  white-space: nowrap;
}
:lang(ar) .btn { font-weight: 700; }
.btn .icon { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
[dir="rtl"] .btn:hover .icon { transform: translateX(-3px) scaleX(-1); }
[dir="rtl"] .btn .icon.dir-flip { transform: scaleX(-1); }
.btn--primary { background: var(--ink); color: #fff; box-shadow: 0 8px 20px rgba(21, 24, 29, 0.18); }
.btn--primary:hover { background: var(--green-deep); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(11, 98, 63, 0.3); }
.btn--green { background: var(--green); color: #fff; box-shadow: 0 8px 20px var(--green-glow); }
.btn--green:hover { background: #0F9A74; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--border-strong); }
.btn--ghost:hover { border-color: var(--ink); background: var(--surface-alt); transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--green); transform: translateY(-2px); }
.btn--outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.35); }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); transform: translateY(-2px); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 14px; }

/* Reveal on scroll */
.reveal.is-visible { opacity: 1; transform: none; }
.js .reveal { opacity: 0; }
.js .reveal.is-revealed { opacity: 1; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) { .reveal, .js .reveal { opacity: 1; transform: none; transition: none; } }

/* =====================================================================
   Header / Navigation
   ===================================================================== */
.header {
  /* Sticky, not fixed: it stays in flow, so nothing has to compensate for its
     height, and it is still a containing block for the mega panel.
     Height is deliberately constant — animating the height of a translucent
     bar re-snapshots its backdrop every frame, which banded its lower edge. */
  position: sticky; inset-inline: 0; top: 0; z-index: 100; height: var(--nav-h);
  transition: background 0.3s linear, box-shadow 0.3s linear, border-color 0.3s linear;
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  /* 0.88 keeps nav text at ~8.6:1 over the dark sections while the page still
     reads through. `saturate` is what makes it frosted glass rather than
     faded white — it keeps the green beneath alive in the bar. */
  background: rgba(252, 253, 251, 0.88);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
          backdrop-filter: saturate(140%) blur(16px);
  border-bottom-color: var(--border); box-shadow: 0 6px 24px rgba(11, 60, 40, 0.06);
}
/* Without backdrop support the bar is opaque, never see-through. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header.is-scrolled { background: rgba(252, 253, 251, 0.97); }
}
.header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); flex-shrink: 0; }
.brand__mark { width: 44px; height: 44px; flex-shrink: 0; transition: transform 0.4s var(--ease); }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.04); }
.brand__text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: start; }
.brand__word { height: 15px; width: auto; color: var(--green-deep); }
.brand__word--ar { height: 22px; }
.brand__tag { white-space: nowrap; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; font-family: var(--font-display); }
:lang(ar) .brand__tag { letter-spacing: 0; font-size: 11.5px; }

.nav { display: none; }
.nav__link { position: relative; padding: 8px 2px; margin-inline: 14px; font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--charcoal); transition: color 0.25s; }
:lang(ar) .nav__link { font-weight: 600; }
.nav__link::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: 100%; background: var(--green); border-radius: 2px; transform: scaleX(0); transition: transform 0.35s var(--ease); }
[dir="rtl"] .nav__link::after { transform-origin: right; }
[dir="ltr"] .nav__link::after { transform-origin: left; }
.nav__link:hover, .nav__link.is-active { color: var(--ink); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 12px; }
.header__cta { display: none; }

.lang-switch { display: inline-flex; align-items: center; padding: 4px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); position: relative; }
.lang-switch__btn { position: relative; z-index: 1; display: grid; place-items: center; min-width: 46px; height: 34px; padding: 0 12px; border-radius: 999px; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--slate); transition: color 0.3s, background 0.3s; }
.lang-switch__btn:hover { color: var(--ink); }
.lang-switch__btn.is-active { background: var(--ink); color: #fff; }
.lang-switch__btn[aria-pressed="true"] { color: #fff; }
.lang-switch__thumb { position: absolute; top: 4px; bottom: 4px; inset-inline-start: 4px; width: 46px; border-radius: 999px; background: var(--ink); transition: transform 0.4s var(--ease), width 0.4s var(--ease); }
.lang-switch[data-active="ar"] .lang-switch__thumb { transform: translateX(var(--thumb-shift, 46px)); }
[dir="rtl"] .lang-switch[data-active="ar"] .lang-switch__thumb { transform: translateX(calc(var(--thumb-shift, 46px) * -1)); }

.nav-toggle { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--ink); }
.nav-toggle .icon { width: 24px; height: 24px; }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-menu { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: block; }

.mobile-nav {
  position: fixed; inset: 0; z-index: 90; background: var(--surface);
  padding: calc(var(--nav-h) + 16px) var(--gutter) max(32px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 0;
  /* Seven services plus the top-level links are taller than a phone screen. */
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.mobile-nav.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.mobile-nav a { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); padding: 11px 0; border-bottom: 1px solid var(--border); }
.mobile-nav a.btn { margin-top: 18px; align-self: flex-start; color: #fff; border-bottom: 0; font-size: 16px; padding: 0 28px; }

@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; }
  .header__cta { display: inline-flex; }
  .nav-toggle, .mobile-nav { display: none; }
}

/* =====================================================================
   Hero
   ===================================================================== */
.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 96px)); padding-bottom: clamp(120px, 12vw, 170px); overflow: hidden; }
.hero__shape {
  position: absolute; top: -10%; inset-inline-end: -8%; width: 58%; height: 120%; z-index: -1;
  background: linear-gradient(160deg, var(--green-soft) 0%, #F2F7EE 55%, var(--paper) 100%);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}
.hero__shape::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(11, 98, 63, 0.14) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 70%); mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 70%);
}
[dir="rtl"] .hero__shape { clip-path: polygon(0 0, 72% 0, 100% 100%, 0 100%); }
.hero__glow { position: absolute; z-index: -1; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(closest-side, var(--green-glow), transparent); top: 10%; inset-inline-start: -14%; filter: blur(20px); }

.hero__grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.05fr 1fr; gap: 48px; } }

.hero__title { font-size: clamp(44px, 6.2vw, 82px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; max-width: 12ch; }
:lang(ar) .hero__title { line-height: 1.22; font-weight: 700; max-width: 14ch; }
.hero__title .accent { position: relative; display: inline-block; }
.hero__title .accent::after { content: ""; position: absolute; inset-inline: 0; bottom: 0.04em; height: 0.16em; z-index: -1; background: var(--green-100); border-radius: 4px; }
.hero__lead { margin-top: 28px; font-size: clamp(16px, 1.3vw, 19px); max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero__trust { display: flex; align-items: center; gap: 14px; margin-top: 40px; font-size: 14px; color: var(--muted); }
.hero__trust-avatars { display: flex; }
.hero__trust-avatars span { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: #fff; margin-inline-end: -10px; background: var(--charcoal-2); }
.hero__trust-avatars span:nth-child(2) { background: var(--green-deep); }
.hero__trust-avatars span:nth-child(3) { background: var(--green); color: var(--ink); }
.hero__trust-avatars span:nth-child(4) { background: var(--ink); }

/* Hero visual */
.hero__visual { position: relative; height: clamp(420px, 52vw, 620px); }
.hero__img-main { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 70%; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero__img-main img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 8s var(--ease); }
.hero.is-loaded .hero__img-main img { transform: scale(1.08); }
.hero__img-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(21, 24, 29, 0.5)); }
.hero__img-sub { position: absolute; bottom: -6%; inset-inline-start: 0; width: 44%; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; border: 6px solid #fff; box-shadow: var(--shadow-lg); }
.hero__img-sub img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }

/* Stat card (dark glass) */
.hero__card {
  position: absolute; top: 8%; inset-inline-start: 0; z-index: 2; width: min(250px, 42%);
  padding: 20px 20px 18px; border-radius: 20px; color: #fff; overflow: hidden;
  background: linear-gradient(150deg, rgba(36, 40, 47, 0.96), rgba(21, 24, 29, 0.96));
  border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 30px 60px rgba(21,24,29,0.3);
  animation: floatY 7s ease-in-out infinite;
}
.hero__card::before { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(11,132,99,0.45), transparent); top: -70px; inset-inline-end: -60px; }
.hero__card-label { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
:lang(ar) .hero__card-label { letter-spacing: 0; font-size: 12px; }
.hero__card-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(11,132,99,0.2); }
.hero__card-num { margin-top: 10px; font-family: var(--font-display); font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; display: flex; align-items: baseline; gap: 2px; direction: ltr; }
[dir="rtl"] .hero__card-num { justify-content: flex-end; }
.hero__card-num em { font-style: normal; color: var(--green); font-size: 0.6em; }
.hero__card-sub { font-size: 12.5px; color: rgba(255,255,255,0.7); margin-top: 4px; }
.hero__card-bars { display: flex; direction: ltr; align-items: flex-end; gap: 4px; height: 34px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.hero__card-bars i { flex: 1; background: rgba(255,255,255,0.14); border-radius: 3px 3px 0 0; height: var(--h); transform-origin: bottom; animation: barGrow 1.2s var(--ease) both; animation-delay: calc(var(--i) * 80ms + 0.4s); }
.hero__card-bars i:nth-child(n+7) { background: var(--green); }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.hero__caption { position: absolute; bottom: 24px; inset-inline-end: 0; width: 50%; padding: 0 22px; z-index: 2; color: #fff; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
.hero__caption b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.hero__caption small { font-size: 12px; opacity: 0.8; }
.hero__caption .tag { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(6px); white-space: nowrap; font-family: var(--font-display); }
:lang(ar) .hero__caption .tag { letter-spacing: 0; }

.hero__badge { position: absolute; top: -34px; inset-inline-end: -26px; width: 128px; height: 128px; z-index: 3; }
.hero__badge svg { width: 100%; height: 100%; animation: spin 22s linear infinite; direction: ltr; }
.hero__badge text { font-family: var(--font-display); font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; fill: var(--ink); text-transform: uppercase; }
:lang(ar) .hero__badge text { letter-spacing: 0; font-size: 13.5px; }
.hero__badge::after { content: ""; position: absolute; inset: 34px; border-radius: 50%; background: var(--green-deep) url("../logo-mark-alt.svg") center / 58% no-repeat; box-shadow: 0 10px 24px var(--green-glow); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .hero__badge svg, .hero__card { animation: none; } }
@media (max-width: 1023px) { .hero__badge { display: none; } .hero__visual { height: clamp(380px, 80vw, 560px); } }

/* =====================================================================
   Key figures (overlapping card)
   ===================================================================== */
.figures { position: relative; z-index: 3; margin-top: clamp(-96px, -8vw, -70px); }
.figures__card {
  display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: var(--r-xl);
  border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(21,24,29,0.12), 0 4px 12px rgba(21,24,29,0.04); overflow: hidden;
}
@media (min-width: 900px) { .figures__card { grid-template-columns: repeat(4, 1fr); } }
.figure { position: relative; padding: clamp(24px, 3vw, 38px) clamp(20px, 2.6vw, 34px); border-inline-start: 1px solid var(--border); transition: background 0.3s; }
.figure:hover { background: var(--surface-alt); }
.figure:first-child { border-inline-start: 0; }
@media (max-width: 899px) { .figure:nth-child(odd) { border-inline-start: 0; } .figure:nth-child(n+3) { border-top: 1px solid var(--border); } }
.figure::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; height: 3px; width: 0; background: var(--green); transition: width 0.6s var(--ease); }
.figure:hover::before { width: 100%; }
.figure__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--green-soft); color: var(--green-deep); font-size: 24px; margin-bottom: 18px; }
.figure__num { font-family: var(--font-display); font-size: clamp(38px, 3.8vw, 56px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; color: var(--ink); display: flex; align-items: baseline; gap: 2px; direction: ltr; justify-content: flex-start; }
[dir="rtl"] .figure__num { justify-content: flex-end; }
.figure__num em { font-style: normal; color: var(--green); font-size: 0.55em; }
.figure__label { margin-top: 10px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.figure__cap { margin-top: 4px; font-size: 13px; color: var(--muted); }

/* =====================================================================
   Clients marquee
   ===================================================================== */
.clients { padding-block: 56px 44px; border-bottom: 1px solid var(--border); background: var(--surface); }
.clients__label { text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); margin-bottom: 26px; font-family: var(--font-display); }
:lang(ar) .clients__label { font-size: 14px; }
.marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; width: max-content; gap: 12px; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
[dir="rtl"] .marquee__track { animation-name: marquee-rtl; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
.client { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--border); background: var(--surface-alt); color: var(--charcoal); font-family: var(--font-display); font-weight: 600; font-size: 15px; transition: border-color 0.3s, background 0.3s, color 0.3s; }
.client:hover { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.client::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* =====================================================================
   About
   ===================================================================== */
.about__grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1024px) { .about__grid { grid-template-columns: 1fr 1.05fr; gap: 80px; } }

.about__media { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: clamp(420px, 44vw, 560px); }
.about__media figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; position: relative; }
.about__media figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.about__media figure:hover img { transform: scale(1.05); }
.about__media .m1 { grid-row: 1 / 3; }
.about__media .m1::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(21,24,29,0.55)); }
.about__since { position: absolute; bottom: 22px; inset-inline-start: 22px; color: #fff; z-index: 2; }
.about__since b { display: block; font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.about__since span { font-size: 12.5px; opacity: 0.8; }
.about__media .m3 { background: var(--charcoal); display: flex; flex-direction: column; justify-content: space-between; padding: 22px; color: #fff; }
.about__media .m3 .q { font-family: var(--font-display); font-weight: 600; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.4; }
.about__media .m3 .q::before { content: "\201C"; display: block; font-size: 52px; line-height: 0.6; color: var(--green); margin-bottom: 14px; font-family: Georgia, serif; }
:lang(ar) .about__media .m3 .q::before { content: "\201D"; }
.about__media .m3 small { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); font-family: var(--font-display); }
:lang(ar) .about__media .m3 small { letter-spacing: 0; }
.about__badge { position: absolute; top: -18px; inset-inline-end: -18px; z-index: 3; width: 92px; height: 92px; border-radius: 50%; background: var(--green); display: grid; place-items: center; box-shadow: 0 16px 30px var(--green-glow); border: 5px solid #fff; }
.about__badge img { width: 50%; }
@media (max-width: 640px) { .about__media { height: auto; grid-template-rows: 260px 200px; } .about__media .m1 { grid-row: 1; grid-column: 1 / 3; } }

.about__body p + p { margin-top: 16px; }

/* Vision & Mission statement panel */
.vm { display: grid; margin-top: clamp(56px, 7vw, 96px); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
@media (min-width: 900px) { .vm { grid-template-columns: 1fr 1fr; } }
.vm__panel { position: relative; padding: clamp(32px, 4vw, 56px); overflow: hidden; }
.vm__panel--vision { background: var(--charcoal); color: #C9CFD6; }
.vm__panel--vision::before { content: ""; position: absolute; inset: 0; background: url("../img/kafd-tower-with-landscaped-plaza-in-riyadh.jpg") center / cover no-repeat; opacity: 0.12; filter: grayscale(1); }
.vm__panel--vision::after { content: ""; position: absolute; top: -20%; inset-inline-end: -10%; width: 60%; height: 60%; background: radial-gradient(closest-side, rgba(11,132,99,0.35), transparent); }
.vm__panel--mission { background: var(--green-soft); color: var(--slate); }
.vm__watermark { position: absolute; top: -0.12em; inset-inline-end: -0.04em; font-family: var(--font-display); font-weight: 700; font-size: clamp(140px, 14vw, 200px); line-height: 1; letter-spacing: -0.06em; pointer-events: none; -webkit-text-stroke: 1px rgba(255,255,255,0.09); color: transparent; }
.vm__panel--mission .vm__watermark { -webkit-text-stroke: 1px rgba(11,98,63,0.14); }
.vm__inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
.vm__label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 26px; }
.vm__panel--mission .vm__label { color: var(--green-deep); }
:lang(ar) .vm__label { letter-spacing: 0; font-size: 13.5px; }
.vm__label i { font-size: 20px; }
.vm__panel h3 { font-size: clamp(24px, 2.3vw, 32px); margin-bottom: 18px; }
.vm__panel--vision h3 { color: #fff; }
.vm__panel--vision p { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; color: #C9CFD6; max-width: 40ch; }
.vm__panel--mission > .vm__inner > p { margin-bottom: 22px; }
.vm__list li { display: flex; align-items: center; gap: 18px; padding: 14px 0; border-top: 1px solid rgba(11,98,63,0.18); font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--ink); }
.vm__list li:last-child { border-bottom: 1px solid rgba(11,98,63,0.18); }
.vm__list li > span:first-child { font-size: 12px; color: var(--green-deep); font-weight: 600; letter-spacing: 0.05em; min-width: 26px; }
.vm__list li span:nth-child(2) { flex: 1; }
.vm__list li i { color: var(--green-deep); font-size: 20px; }
.vm__foot { margin-top: auto; padding-top: 28px; display: flex; align-items: center; gap: 14px; font-size: 13px; color: rgba(255,255,255,0.6); }
.vm__foot img { width: 26px; height: 26px; }

/* Values — editorial columns */
.values { display: grid; gap: 40px; margin-top: clamp(56px, 7vw, 96px); }
@media (min-width: 800px) { .values { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.value { position: relative; padding-top: 28px; border-top: 1px solid var(--border); }
.value::before { content: ""; position: absolute; top: -1px; inset-inline-start: 0; height: 2px; width: 48px; background: var(--green); transition: width 0.6s var(--ease); }
.value:hover::before { width: 100%; }
.value__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.value__num { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--green-deep); letter-spacing: 0.06em; }
.value__icon { font-size: 30px; color: var(--green-deep); }
.value h3 { font-size: 22px; margin-bottom: 10px; }
.value p { font-size: 15px; }

/* =====================================================================
   Services
   ===================================================================== */
/* =====================================================================
   Services — seven divisions as a numbered register

   Seven is prime, so no arrangement of spans resolves honestly in a grid;
   two cards were simply made double-width to fill the gap, which read as
   arbitrary because those two divisions are not more important. An eighth
   cell — labelled, not numbered, because it is not a division — closes the
   rectangle at every breakpoint with no spans on any service.

   The duotone glyphs are gone. A broom illustrating an engineering division
   reads as consumer software; the division number, ruled off above the name,
   reads the way a contractor lists divisions in a prequalification document.
   The photograph goes too: it is what forced a column wide enough that seven
   could not resolve, and at this size it was decoration.
   ===================================================================== */
.services__grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 20px; }
@media (min-width: 641px)  { .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                             .service--cta   { grid-column: span 2; } }
@media (min-width: 1200px) { .services__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
                             .service--cta   { grid-column: auto; } }

.service {
  display: flex; flex-direction: column; padding: 24px 22px 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s var(--ease);
}
.service:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green-100); }
@media (prefers-reduced-motion: reduce) { .service { transition: none; } .service:hover { transform: none; } }

.service__num {
  display: block; font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  letter-spacing: var(--tracking-label); font-variant-numeric: tabular-nums;
  color: var(--green-deep);
  padding-block-end: 13px; margin-block-end: 17px; border-block-end: 1px solid var(--border);
  transition: border-color 0.3s var(--ease);
}
.service:hover .service__num { border-block-end-color: var(--green-100); }

.service__body { display: flex; flex-direction: column; flex: 1; padding: 0; min-inline-size: 0; }
.service h3 { font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; min-block-size: 2.5em; }
:lang(ar) .service h3 { font-size: 18px; line-height: 1.45; letter-spacing: 0; min-block-size: 2.9em; }
.service p {
  margin-block-start: 8px; font-size: 14.5px; line-height: 1.6; color: var(--slate);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* Pills at this column width wrapped to two or three rows, which was half the
   height variance; one typographic line instead. */
.service__tags {
  margin-block-start: 16px; padding: 0; border: 0;
  font-size: 13px; line-height: 1.55; color: var(--slate);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.service__tags > span { display: inline; padding: 0; background: none; border-radius: 0; font: inherit; font-weight: 500; color: inherit; }
.service__tags > span:not(:last-child)::after { content: " \00b7 "; color: var(--border-strong); font-weight: 400; }
.service__more { margin-block-start: auto; padding-block-start: 18px; font-size: 13.5px; }

.service--cta { background: var(--charcoal); border-color: transparent; box-shadow: var(--shadow-md); justify-content: center; }
.service--cta:hover { border-color: transparent; box-shadow: var(--shadow-lg); }
.service--cta .service__num { color: var(--mint); text-transform: uppercase; border-block-end-color: rgba(143, 211, 181, 0.28); }
.service--cta h3 { color: #fff; font-size: 20px; min-block-size: 0; }
.service--cta p { color: #C9CFD6; -webkit-line-clamp: 5; }
.service--cta .service__more { color: var(--mint); }

/* =====================================================================
   Process — sticky intro + vertical timeline (dark)
   ===================================================================== */
.process { position: relative; overflow: hidden; }
.process::before { content: ""; position: absolute; top: -20%; inset-inline-end: -10%; width: 40%; height: 70%; background: var(--green); opacity: 0.08; clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); }
.process::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; }
.process .container { position: relative; z-index: 1; }
.process__grid { display: grid; gap: 56px; align-items: start; }
@media (min-width: 1024px) { .process__grid { grid-template-columns: 0.9fr 1.1fr; gap: 80px; } }
.process__intro { position: sticky; top: 110px; }
.process__intro .lead { color: #AEB6BF; margin-top: 8px; }
.process__notes { display: grid; gap: 14px; margin-top: 36px; }
.note { display: flex; gap: 16px; padding: 20px 22px; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.note > i { font-size: 26px; color: var(--green); flex-shrink: 0; margin-top: 2px; }
.note h3 { font-size: 16px; color: #fff; margin-bottom: 4px; }
.note p { font-size: 14px; color: #B8C0C9; }

.timeline { position: relative; padding-inline-start: 34px; }
.timeline::before { content: ""; position: absolute; top: 24px; bottom: 24px; inset-inline-start: 7px; width: 2px; background: rgba(255,255,255,0.1); }
.timeline__progress { position: absolute; top: 24px; inset-inline-start: 7px; width: 2px; height: 0; background: linear-gradient(180deg, var(--green), var(--green-deep)); transition: height 0.6s var(--ease); box-shadow: 0 0 16px var(--green-glow); }
.step { position: relative; padding: 30px 28px; border-radius: 22px; border: 1px solid transparent; transition: background 0.4s, border-color 0.4s, transform 0.4s var(--ease); }
.step + .step { margin-top: 10px; }
.step::before { content: ""; position: absolute; top: 44px; inset-inline-start: -32px; width: 12px; height: 12px; border-radius: 50%; background: var(--charcoal); border: 2px solid rgba(255,255,255,0.25); transition: all 0.4s; }
.step.is-active { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.08); }
.step.is-active::before { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 6px rgba(11,132,99,0.18); }
.step:hover { transform: translateX(6px); }
[dir="rtl"] .step:hover { transform: translateX(-6px); }
.step__row { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: start; }
.step__num { font-family: var(--font-display); font-size: clamp(40px, 4vw, 56px); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.35); transition: all 0.4s; min-width: 2ch; direction: ltr; }
.step.is-active .step__num { color: var(--green); -webkit-text-stroke: 0; }
.step h3 { font-size: 20px; color: #fff; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: #B8C0C9; max-width: 44ch; }
.step__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,0.06); color: var(--green); font-size: 24px; border: 1px solid rgba(255,255,255,0.08); transition: background 0.4s, color 0.4s; }
.step.is-active .step__icon { background: var(--green); color: var(--ink); }
.step__meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.step__meta span { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7); padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); }
@media (max-width: 640px) { .step__row { grid-template-columns: auto 1fr; } .step__icon { display: none; } .step { padding: 22px 18px; } }

/* =====================================================================
   Projects — image + white body
   ===================================================================== */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { padding: 10px 18px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--slate); border: 1px solid var(--border); background: var(--surface); transition: all 0.3s; }
.filter:hover { border-color: var(--border-strong); color: var(--ink); }
.filter.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.projects__grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .projects__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .projects__grid { grid-template-columns: repeat(3, 1fr); } }
.project {
  display: flex; flex-direction: column; text-align: start; padding: 0; width: 100%;
  border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--border);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s; animation: fadeUp 0.6s var(--ease) both;
}
.project:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.project__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-dim); }
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.project:hover .project__media img { transform: scale(1.07); }
.project__cat { position: absolute; top: 14px; inset-inline-start: 14px; padding: 6px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); font-family: var(--font-display); }
:lang(ar) .project__cat { letter-spacing: 0; font-size: 12.5px; }
.project__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.project__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.project__title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.25; color: var(--ink); letter-spacing: -0.02em; }
.project__loc { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-top: 6px; }
.project__loc i { font-size: 15px; color: var(--green-deep); }
.project__scope { font-size: 14px; color: var(--slate); margin-top: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.project__open { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--border); color: var(--ink); transition: all 0.35s var(--ease); }
.project:hover .project__open { background: var(--ink); color: #fff; border-color: var(--ink); }
.project__open .icon { width: 18px; height: 18px; }
.projects__more { display: flex; justify-content: center; margin-top: 40px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(17, 19, 23, 0.9); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__panel { width: min(1080px, 100%); display: grid; background: #fff; border-radius: var(--r-lg); overflow: hidden; transform: translateY(12px) scale(0.98); transition: transform 0.4s var(--ease); max-height: calc(100vh - 40px); }
.lightbox.is-open .lightbox__panel { transform: none; }
@media (min-width: 900px) { .lightbox__panel { grid-template-columns: 1.4fr 1fr; } }
.lightbox__media { background: var(--ink); aspect-ratio: 4 / 3; max-height: 60vh; }
@media (min-width: 900px) { .lightbox__media { aspect-ratio: auto; max-height: none; height: 100%; min-height: 520px; } }
.lightbox__media img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__info { padding: 32px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.lightbox__info .eyebrow { margin-bottom: 0; }
.lightbox__info h3 { font-size: 26px; }
.lightbox__meta { display: grid; gap: 12px; margin-top: 8px; }
.lightbox__meta div { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; }
.lightbox__meta div > i { font-size: 22px; color: var(--green-deep); margin-top: 1px; }
.lightbox__meta b { color: var(--ink); display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2px; font-family: var(--font-display); }
:lang(ar) .lightbox__meta b { letter-spacing: 0; }
.lightbox__nav { display: flex; gap: 10px; margin-top: auto; padding-top: 16px; }
.lightbox__btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--border-strong); color: var(--ink); transition: all 0.3s; }
.lightbox__btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.lightbox__btn .icon { width: 20px; height: 20px; }
.lightbox__close { position: absolute; top: 18px; inset-inline-end: 18px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25); transition: background 0.3s; }
.lightbox__close:hover { background: var(--green); color: var(--ink); }
.lightbox__close .icon { width: 22px; height: 22px; }

/* =====================================================================
   Why us
   ===================================================================== */
.why { background: linear-gradient(180deg, var(--surface) 0%, var(--green-soft) 100%); position: relative; overflow: hidden; }
.why__grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1024px) { .why__grid { grid-template-columns: 0.9fr 1.1fr; gap: 80px; } }
.why__quote { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 42px); font-weight: 600; line-height: 1.15; color: var(--ink); letter-spacing: -0.03em; }
:lang(ar) .why__quote { letter-spacing: 0; line-height: 1.4; font-weight: 700; }
.why__quote .accent-deep { display: block; }
.why__sticky { position: sticky; top: 120px; }
.why__list { display: grid; gap: 16px; }
@media (min-width: 640px) { .why__list { grid-template-columns: 1fr 1fr; } }
.why-card { padding: 28px 26px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.why-card > i { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--green-soft); color: var(--green-deep); font-size: 28px; margin-bottom: 20px; }
.why-card h3 { font-size: 18px; margin-bottom: 8px; }
.why-card p { font-size: 14.5px; }
.why__vision { margin-top: 28px; display: inline-flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.why__vision img { width: 96px; height: auto; flex-shrink: 0; }
.why__vision b { display: block; font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.why__vision small { font-size: 12.5px; color: var(--muted); }
.why__vision .sep { width: 1px; height: 44px; background: var(--border); }

/* =====================================================================
   CTA banner — photo + glass card
   ===================================================================== */
.cta { padding-block: clamp(40px, 6vw, 80px); }
.cta__box { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(40px, 6vw, 72px); color: #fff; display: grid; gap: 36px; align-items: center; isolation: isolate; }
@media (min-width: 900px) { .cta__box { grid-template-columns: 1.2fr 0.8fr; gap: 56px; } }
.cta__bg { position: absolute; inset: 0; z-index: -2; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transform: scale(1.04); }
.cta__box::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(21,24,29,0.94) 30%, rgba(21,24,29,0.72) 60%, rgba(46,106,78,0.6) 100%); }
[dir="rtl"] .cta__box::before { background: linear-gradient(-100deg, rgba(21,24,29,0.94) 30%, rgba(21,24,29,0.72) 60%, rgba(46,106,78,0.6) 100%); }
.cta__box::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 60%); mask-image: linear-gradient(90deg, #000, transparent 60%); }
.cta__box .eyebrow { color: var(--green); }
.cta__box h2 { color: #fff; font-size: clamp(30px, 3.8vw, 48px); max-width: 16ch; }
.cta__box p { margin-top: 16px; color: #C9CFD6; max-width: 46ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.cta__card { position: relative; padding: 26px; border-radius: 22px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.cta__card h3 { color: #fff; font-size: 18px; margin-bottom: 4px; }
.cta__card > p { margin: 0 0 18px; font-size: 13.5px; color: rgba(255,255,255,0.7); }
.cta__rows { display: grid; gap: 8px; }
.cta__row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); transition: background 0.3s, transform 0.3s var(--ease); }
.cta__row:hover { background: rgba(255,255,255,0.12); transform: translateX(4px); }
[dir="rtl"] .cta__row:hover { transform: translateX(-4px); }
.cta__row > i { font-size: 24px; color: var(--green); flex-shrink: 0; }
.cta__row b { display: block; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
:lang(ar) .cta__row b { letter-spacing: 0; font-size: 12px; }
.cta__row span { font-size: 15px; font-weight: 600; color: #fff; }
.cta__row .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* =====================================================================
   Contact — dark info panel + refined form
   ===================================================================== */
.contact__grid { display: grid; gap: 24px; }
@media (min-width: 1024px) { .contact__grid { grid-template-columns: 0.8fr 1.2fr; gap: 28px; } }
.contact__panel { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--charcoal); color: #C9CFD6; padding: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; }
.contact__panel::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.06); inset-inline-end: -160px; bottom: -200px; }
.contact__panel::after { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; border: 1px solid rgba(11,132,99,0.25); inset-inline-end: -90px; bottom: -130px; }
.contact__panel h3 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.contact__panel > p { font-size: 14.5px; margin-bottom: 30px; max-width: 34ch; }
.contact__rows { display: grid; gap: 6px; position: relative; z-index: 1; }
.contact__row { display: flex; align-items: center; gap: 16px; padding: 14px 14px; border-radius: 14px; transition: background 0.3s; color: #fff; }
.contact__row:hover { background: rgba(255,255,255,0.06); }
.contact__row > i { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(11,132,99,0.14); color: var(--green); font-size: 24px; flex-shrink: 0; }
.contact__row b { display: block; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 2px; }
:lang(ar) .contact__row b { letter-spacing: 0; font-size: 12px; }
.contact__row span { font-size: 15.5px; font-weight: 600; }
.contact__row .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.contact__row .go { margin-inline-start: auto; color: rgba(255,255,255,0.4); width: 18px; height: 18px; transition: color 0.3s, transform 0.3s; }
.contact__row:hover .go { color: var(--green); transform: translate(2px, -2px); }
[dir="rtl"] .contact__row .go { transform: scaleX(-1); }
[dir="rtl"] .contact__row:hover .go { transform: translate(-2px, -2px) scaleX(-1); }
.contact__foot { margin-top: auto; padding-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 14px; position: relative; z-index: 1; }
.contact__foot small { font-size: 12.5px; color: rgba(255,255,255,0.55); }

.form { padding: clamp(24px, 3.5vw, 44px); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.form__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin-bottom: 8px; }
.form__head h3, .form__head .form__h { font-size: 22px; }
.form__head p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.form__step { flex-shrink: 0; max-inline-size: 100%; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-deep); padding: 8px 12px; border-radius: 999px; background: var(--green-soft); white-space: nowrap; }
:lang(ar) .form__step { letter-spacing: 0; }
.form__section { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 26px 0 14px; display: flex; align-items: center; gap: 12px; }
:lang(ar) .form__section { letter-spacing: 0; font-size: 13px; }
.form__section::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.form__grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .form__grid { grid-template-columns: 1fr 1fr; } .form__grid .span-2 { grid-column: span 2; } }
.field { position: relative; display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field__wrap { position: relative; }
.field__wrap > i { position: absolute; top: 50%; inset-inline-start: 14px; transform: translateY(-50%); font-size: 20px; color: var(--muted); pointer-events: none; transition: color 0.25s; }
.field input, .field select, .field textarea { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface-alt); font: inherit; font-size: 15px; color: var(--ink); transition: border-color 0.25s, background 0.25s, box-shadow 0.25s; }
.field__wrap input, .field__wrap select { padding-inline-start: 44px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); background: #fff; box-shadow: 0 0 0 4px var(--green-glow); }
.field__wrap:focus-within > i { color: var(--green-deep); }
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2359616D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-inline-end: 40px; }
[dir="rtl"] .field select { background-position: left 14px center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--border); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--slate); transition: all 0.25s; }
.chip input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip input:focus-visible + span { box-shadow: 0 0 0 4px var(--green-glow); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; }
.form__note { font-size: 13px; color: var(--muted); max-width: 40ch; display: flex; gap: 8px; align-items: flex-start; }
.form__note i { font-size: 18px; color: var(--green-deep); flex-shrink: 0; }
/* A field the form rejected, so the error is visible as well as announced. */
.field [aria-invalid="true"] { border-color: #C53030; }
.field__wrap:has([aria-invalid="true"]) { border-color: #C53030; }

.form__status { display: none; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--green-soft); color: var(--green-dark); font-weight: 600; font-size: 14px; }
.form__status.is-visible { display: block; }

/* =====================================================================
   Footer
   ===================================================================== */
.footer { background: var(--ink); color: #A6AEB8; padding-top: clamp(56px, 7vw, 88px); position: relative; overflow: hidden; }
.footer::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--green), transparent); opacity: 0.6; }
.footer__grid { display: grid; gap: 40px; padding-bottom: 48px; }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; } }
.footer .brand { color: #fff; }
.footer .brand__word { color: var(--green); }
.footer .brand__tag { color: #7B838E; }
.footer__about { margin-top: 20px; font-size: 14.5px; max-width: 34ch; }
.footer__vision { margin-top: 22px; display: inline-flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: #fff; font-size: 12.5px; color: var(--slate); }
.footer__vision img { width: 64px; }
.footer h4 { color: #fff; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; }
:lang(ar) .footer h4 { letter-spacing: 0; font-size: 15px; }
.footer__links { display: grid; gap: 10px; }
.footer__links a { font-size: 14.5px; transition: color 0.25s, padding 0.25s; }
.footer__links a:hover { color: var(--green); padding-inline-start: 4px; }
.footer__contact { display: grid; gap: 14px; }
.footer__contact div { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; }
.footer__contact i { font-size: 20px; color: var(--green); margin-top: 1px; }
.footer__contact .ltr { direction: ltr; unicode-bidi: isolate; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 22px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.socials { display: flex; gap: 8px; }
.socials a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.12); color: #C9CFD6; transition: all 0.3s; font-size: 18px; }
.socials a:hover { background: var(--green); border-color: var(--green); color: var(--ink); transform: translateY(-2px); }

/* Floating controls */
.to-top { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 80; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(12px); pointer-events: none; transition: all 0.35s var(--ease); }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--green); color: var(--ink); }
.to-top .icon { width: 20px; height: 20px; }
.wa { position: fixed; bottom: 24px; inset-inline-start: 24px; z-index: 80; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: #fff; color: var(--ink); border: 1px solid var(--border); box-shadow: var(--shadow-md); font-weight: 600; font-size: 13.5px; transition: transform 0.3s var(--ease), box-shadow 0.3s; }
[dir="rtl"] .wa { padding: 10px 10px 10px 16px; }
.wa:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.wa > i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; font-size: 20px; }
@media (max-width: 640px) { .wa span { display: none; } .wa, [dir="rtl"] .wa { padding: 6px; } }

.skip { position: absolute; top: -100px; inset-inline-start: 16px; z-index: 999; padding: 10px 14px; background: var(--ink); color: #fff; border-radius: 8px; }
.skip:focus { top: 16px; }

body.lang-switching main, body.lang-switching header, body.lang-switching footer { animation: langFade 0.45s var(--ease); }
@keyframes langFade { from { opacity: 0.3; } to { opacity: 1; } }

/* ---------- Small-screen refinements ---------- */
@media (max-width: 1100px) { .brand__tag { display: none; } }
/* Narrow phones: the brand lock-up, the language switch and the menu button
   have to share one line, so tighten all three rather than let the header
   push the page sideways. */
@media (max-width: 480px) {
  .header .container { gap: 12px; }
  .brand { gap: 8px; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__word { height: 12px; }
  .brand__word--ar { height: 18px; }  /* Arabic script needs more height to read */
  .lang-switch { padding: 3px; }
  .lang-switch__btn { min-width: 36px; height: 30px; padding: 0 8px; font-size: 12.5px; }
}

@media (max-width: 640px) {
  .brand__word { height: 14px; }
  /* The footer carries the whole site nav; 18px rows are too small to tap. */
  .footer__links a { display: inline-block; padding-block: 5px; }
  /* Card headings double as links; keep the row tall enough to tap. */
  .lp__body h3 a { display: inline-block; line-height: 1.4; }
  .brand__word.only-ar { height: 20px; }
  .hero__actions .btn { width: 100%; }
  .hero__card { width: 56%; padding: 16px; }
  .hero__card-num { font-size: 34px; }
  .filters { gap: 6px; }
  .filter { padding: 8px 14px; font-size: 13px; }
  .cta__actions .btn { width: 100%; }
  .footer__bottom { justify-content: center; text-align: center; }
  .contact__foot { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   Multi-page additions (Eleventy build)
   Cards are now real links, so their inner elements are inline-by-default
   spans that need explicit display, and pages need a hero/breadcrumb band.
   ===================================================================== */

/* Cards rendered as <a>/<button> — restore block layout on inner spans */
.service, .project { color: inherit; text-align: start; }
.project__media { display: block; }
.project__body { display: flex; flex-direction: column; }
.project__top { display: flex; }
.project__title, .project__loc, .project__scope { display: block; }

/* "View service" affordance on service cards */
.service__more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--green-deep);
}
.service__more .icon { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.service:hover .service__more .icon { transform: translateX(4px); }
[dir="rtl"] .service:hover .service__more .icon { transform: translateX(-4px) scaleX(-1); }

/* ---------- Inner page header ---------- */
.page-hero { position: relative; padding-block: calc(var(--nav-h) + clamp(48px, 6vw, 80px)) clamp(48px, 6vw, 72px); overflow: hidden; background: var(--charcoal); color: #C9CFD6; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-img, none) center 38% / cover no-repeat; opacity: 0.22; filter: grayscale(0.3); }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(21,24,29,0.92) 35%, rgba(21,24,29,0.7) 70%, rgba(46,106,78,0.55)); }
[dir="rtl"] .page-hero::after { background: linear-gradient(-100deg, rgba(21,24,29,0.92) 35%, rgba(21,24,29,0.7) 70%, rgba(46,106,78,0.55)); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: clamp(36px, 5vw, 62px); max-width: 18ch; }
.page-hero .lead { color: #C9CFD6; margin-top: 18px; }
.page-hero .eyebrow { color: var(--green); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 22px; }
.crumbs a:hover { color: #fff; }
.crumbs .sep { opacity: 0.5; }
.crumbs [aria-current] { color: var(--green); }

/* ---------- Service detail ---------- */
.detail__grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1024px) { .detail__grid { grid-template-columns: 1.15fr 0.85fr; gap: 72px; } }

/* These three pin a column beside a scrolling one. Below 1024px the grid is a
   single column, so a pinned block scrolls over whatever follows it instead. */
@media (max-width: 1023px) {
  .process__intro, .why__sticky, .detail__aside { position: static; top: auto; }
}
.detail__body p + p { margin-top: 16px; }
.caps { display: grid; gap: 14px; margin-top: 32px; }
@media (min-width: 640px) { .caps { grid-template-columns: 1fr 1fr; } }
.caps li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--slate); }
.caps li i { color: var(--green-deep); font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.detail__aside { position: sticky; top: 110px; display: grid; gap: 16px; }
.aside-card { padding: 26px; border-radius: var(--r-lg); background: var(--surface-alt); border: 1px solid var(--border); }
.aside-card h3 { font-size: 17px; margin-bottom: 14px; }
.aside-card .sectors { display: flex; flex-wrap: wrap; gap: 8px; }
.aside-card .sectors span { font-size: 12.5px; font-weight: 600; color: var(--green-dark); background: var(--green-soft); padding: 6px 11px; border-radius: 999px; }
.aside-card--dark { background: var(--charcoal); border-color: transparent; color: #C9CFD6; }
.aside-card--dark h3 { color: #fff; }
.aside-card--dark p { font-size: 14.5px; margin-bottom: 18px; }

/* Other-services list */
.other-services { display: grid; gap: 2px; margin-top: 8px; }
.other-services a { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); transition: color 0.25s, padding 0.25s; }
.other-services a:last-child { border-bottom: 1px solid var(--border); }
.other-services a:hover { color: var(--green-deep); padding-inline-start: 6px; }
.other-services a i { font-size: 22px; color: var(--green-deep); }
.other-services a .icon { width: 16px; height: 16px; margin-inline-start: auto; }

/* ---------- Contact page ---------- */
.contact__map { margin-top: 20px; border-radius: var(--r-md); overflow: hidden; border: 1px solid rgba(255,255,255,0.1); aspect-ratio: 16 / 9; }
.contact__map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.4); }

/* ---------- 404 ---------- */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-block: clamp(80px, 12vw, 160px) var(--section); }
.notfound__code { font-family: var(--font-display); font-size: clamp(90px, 18vw, 200px); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 2px var(--border-strong); }
.notfound h1 { font-size: clamp(28px, 4vw, 44px); margin-top: 18px; }
.notfound p { margin-top: 14px; max-width: 46ch; margin-inline: auto; }
.notfound .hero__actions { justify-content: center; margin-top: 30px; }

/* Header sitting over a dark inner-page hero (before scroll) */
body:has(.page-hero) .header:not(.is-scrolled) .brand,
body:has(.page-hero) .header:not(.is-scrolled) .nav__link,
body:has(.page-hero) .header:not(.is-scrolled) .nav-toggle { color: #fff; }
body:has(.page-hero) .header:not(.is-scrolled) .brand__word { color: var(--green); }
body:has(.page-hero) .header:not(.is-scrolled) .brand__tag { color: rgba(255,255,255,0.55); }
body:has(.page-hero) .header:not(.is-scrolled) .lang-switch { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
body:has(.page-hero) .header:not(.is-scrolled) .lang-switch__btn { color: rgba(255,255,255,0.7); }
body:has(.page-hero) .header:not(.is-scrolled) .lang-switch__btn.is-active { background: var(--green); color: var(--ink); }
body:has(.page-hero) .header:not(.is-scrolled) .btn--primary { background: #fff; color: var(--ink); box-shadow: none; }
body:has(.page-hero) .header:not(.is-scrolled) .btn--primary:hover { background: var(--green); }

/* ===== v2 inner-page hero: split, vivid image ===== */
.page-hero--v2 { background: var(--ink); padding-block: calc(var(--nav-h) + 48px) 64px; }
.page-hero--v2::before { display: none; }
.page-hero--v2::after { background: radial-gradient(60% 90% at 85% 20%, rgba(11,132,99,0.22), transparent 65%); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.page-hero__copy h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; max-width: 14ch; }
.page-hero__copy .lead { max-width: 50ch; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.page-hero__meta span { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #D5DDD8; padding: 9px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); }
:lang(ar) .page-hero__meta span { letter-spacing: 0; font-size: 13px; }
.page-hero__media { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: 0 34px 80px rgba(0,0,0,0.5); background: var(--charcoal); }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease); }
.page-hero__media:hover img { transform: scale(1.0); }
.page-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(21,24,29,0.6), transparent 50%); pointer-events: none; }
.page-hero__chip { position: absolute; z-index: 1; inset-inline-start: 18px; inset-block-end: 18px; display: inline-flex; align-items: center; background: rgba(255,255,255,0.14); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.22); color: #fff; padding: 10px 14px; border-radius: 999px; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
:lang(ar) .page-hero__chip { letter-spacing: 0; font-size: 13px; }
.hero__card-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(11,132,99,0.25); }
.page-hero__badge { position: absolute; z-index: 1; inset-inline-end: 18px; inset-block-start: 18px; width: 64px; height: 64px; border-radius: 50%; background: var(--green); display: grid; place-items: center; box-shadow: 0 12px 30px var(--green-glow); }
.page-hero__badge img { width: 56%; }
@media (max-width: 900px) { .page-hero__grid { grid-template-columns: 1fr; } .page-hero__media { aspect-ratio: 4 / 3; } }

/* ===== contact v2 ===== */
.cgrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 24px; align-items: start; margin-top: 56px; }
.cside { display: grid; gap: 18px; }
.cside__card { border-radius: var(--r-xl); background: var(--charcoal); color: #C9CFD6; padding: 30px; position: relative; overflow: hidden; }
.cside__card h4, .cside__card h3 { color: #fff; font-size: 18px; margin-bottom: 14px; }
.cside__card ul { display: grid; gap: 10px; font-size: 14.5px; }
.cside__card li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.cside__card li:last-child { border-bottom: 0; padding-bottom: 0; }
.cside__card li b { color: #fff; font-weight: 500; }
.cside__map { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; background: var(--charcoal); }
.cside__map img { width: 100%; height: 100%; object-fit: cover; }
.cside__map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(21,24,29,0.85), rgba(21,24,29,0.1) 60%); }
.cside__map div { position: absolute; inset-inline: 20px; inset-block-end: 18px; z-index: 1; color: #fff; }
.cside__map b { display: block; font-family: var(--font-display); font-size: 16px; }
.cside__map small { font-size: 12.5px; color: rgba(255,255,255,0.7); }
.cside__vision { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--green-soft); color: var(--green-dark); font-size: 13.5px; font-weight: 500; }
/* width:auto matters here. The responsive transform stamps width/height on
   every managed image to reserve its box, and those attributes act as CSS
   hints — so an image sized by height alone stretches to its intrinsic
   width instead. That is what flattened the Vision 2030 badge across the
   whole card. */
.cside__vision img { height: 36px; width: auto; }
@media (max-width: 900px) { .cgrid { grid-template-columns: 1fr; } }

/* ===== brand v3: deep-green surfaces & accents ===== */
:root { --mint: #8FD3B5; --grad: linear-gradient(135deg, #0B623F 0%, #063A24 100%); }
.section--dark, .footer, .page-hero--v2, .contact__panel, .cside__card, .hero__card, .cta__box { background: var(--grad); }
.cta__box::before, [dir="rtl"] .cta__box::before { background: linear-gradient(100deg, rgba(6,58,36,0.94) 30%, rgba(11,98,63,0.75)); }
.section--dark .eyebrow, .page-hero .eyebrow, .cta__box .eyebrow, .lightbox__info .eyebrow { color: var(--mint); }
.footer .brand__word { color: #fff; }
.footer__contact i, .footer__links a:hover, .cta__row > i, .contact__row > i, .hero__card-label::before { color: var(--mint); }
.contact__row > i { background: rgba(143,211,181,0.14); }
.hero__card-bars i:nth-child(n+7) { background: var(--mint); }
.hero__card-label::before { background: var(--mint); }
.page-hero__badge { background: #fff; }
.page-hero__badge img { width: 60%; }
.footer::before { background: linear-gradient(90deg, transparent, var(--mint), transparent); }
.section--dark .accent, .page-hero .accent, .page-hero .accent-deep, .cta__box .accent { color: var(--mint); }

/* ===== mega menu (Services) ===== */
/* (the header's position is set once, above — it must stay sticky) */
.nav__item--mega { position: static; display: inline-flex; align-items: center; }
.nav__item--mega > .nav__link { display: inline-flex; align-items: center; gap: 6px; }
.nav__item--mega > .nav__link .chev { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.nav__item--mega:has(.mega.is-open) > .nav__link .chev,
.nav__item--mega:focus-within > .nav__link .chev { transform: rotate(180deg); }
.mega { pointer-events: none; position: absolute; inset-inline: 0; top: 100%; z-index: 90; padding: 18px var(--gutter) 0; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.3s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.3s; }
.nav__item--mega:focus-within .mega, .mega.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega__inner { pointer-events: auto; width: min(var(--container), 100%); margin-inline: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: 0 40px 90px rgba(6,58,36,0.22), 0 6px 20px rgba(0,0,0,0.06); display: grid; grid-template-columns: 280px 1fr; overflow: hidden; }
.mega__side { background: var(--grad); color: #C9E7D8; padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; }
.mega__side .eyebrow { color: var(--mint); margin-bottom: 0; }
.mega__side h4, .mega__side .mega__title { display: block; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.15; }
.mega__side p { font-size: 14px; }
.mega__side .btn { margin-top: auto; align-self: flex-start; }
.mega__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 18px; }
.mega__svc { display: grid; grid-template-columns: 52px 1fr; gap: 12px 14px; padding: 14px; border-radius: 16px; color: var(--ink); transition: background 0.3s var(--ease); align-content: start; }
.mega__svc:hover { background: var(--green-soft); }
.mega__svc img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; grid-row: span 2; }
.mega__svc b { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; line-height: 1.25; align-self: end; }
.mega__svc ul { display: grid; gap: 4px; font-size: 12.5px; color: var(--slate); grid-column: 2; }
.mega__svc li { display: flex; gap: 7px; align-items: flex-start; line-height: 1.45; }
.mega__svc li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); margin-top: 7px; flex-shrink: 0; }
.mega__svc .more { grid-column: 2; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; color: var(--green-deep); margin-top: 2px; }
.mega__svc--featured { background: var(--green-soft); }
.mega__svc--featured .tag { grid-column: 2; display: inline-flex; width: max-content; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--green); padding: 3px 8px; border-radius: 999px; margin-bottom: 2px; }
:lang(ar) .mega__svc--featured .tag { letter-spacing: 0; font-size: 11.5px; }
/* No colour override for the Services trigger: it used to be painted white,
   which is invisible against the header's own light background. It now takes
   the same colour as every other nav link. */

/* ===== services detail rows (brochure content) ===== */
.svc-rows { display: grid; gap: 28px; }
.svc-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); border-radius: var(--r-xl); overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease); }
.svc-row:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.svc-row__media { position: relative; min-height: 420px; background: var(--charcoal); }
.svc-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.svc-row:hover .svc-row__media img { transform: scale(1.04); }
.svc-row__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,58,36,0.75), transparent 55%); }
.svc-row__num { position: absolute; top: 18px; inset-inline-start: 20px; z-index: 1; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: #fff; background: rgba(255,255,255,0.16); backdrop-filter: blur(8px); padding: 7px 11px; border-radius: 999px; }
.svc-row__sectors { position: absolute; inset-inline: 20px; bottom: 20px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.svc-row__sectors span { font-size: 12px; font-weight: 600; color: #fff; background: rgba(255,255,255,0.16); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.22); padding: 6px 11px; border-radius: 999px; }
.svc-row__body { padding: clamp(26px, 3.4vw, 40px); display: flex; flex-direction: column; gap: 18px; }
.svc-row__title { display: flex; align-items: center; gap: 14px; }
.svc-row__title i { width: 52px; height: 52px; border-radius: 14px; background: var(--green-soft); color: var(--green-deep); display: grid; place-items: center; font-size: 26px; flex-shrink: 0; }
.svc-row__title h3 { font-size: clamp(22px, 2.2vw, 28px); }
.svc-row__title small { display: block; font-family: var(--font-display); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 4px; }
:lang(ar) .svc-row__title small { letter-spacing: 0; font-size: 12.5px; }
.svc-row__lead { font-size: 15.5px; color: var(--slate); }
.svc-row__label { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.svc-row__label::after { content: ""; flex: 1; height: 1px; background: var(--border); }
:lang(ar) .svc-row__label { letter-spacing: 0; }
.svc-row__caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px; }
.svc-row__caps li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ink); }
.svc-row__caps li i { width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 12px; flex-shrink: 0; margin-top: 2px; }
.svc-row__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--border); }
.svc-row__why { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-row__why span { font-size: 12px; font-weight: 600; color: var(--green-dark); background: var(--green-soft); padding: 6px 10px; border-radius: 999px; }
.svc-row--featured { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
@media (max-width: 1023px) { .svc-row { grid-template-columns: 1fr; } .svc-row__media { min-height: 280px; } .svc-row__caps { grid-template-columns: 1fr; } .mega { display: none; } }

/* ===== v4: mega menu links, service sub-cards, delivery steps, stacking rows ===== */
.mega__grid--v2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 16px; }
.mega__cat { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 16px; transition: background 0.3s var(--ease); min-width: 0; }
.mega__cat:hover, .mega__cat--featured { background: var(--green-soft); }
.mega__head { display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; align-items: center; color: var(--ink); }
.mega__head img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; grid-row: span 2; }
.mega__head .mega__ico { display: none; }
.mega__head b { grid-column: 2; font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mega__head .tag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--green); padding: 2px 7px; border-radius: 999px; }
:lang(ar) .mega__head .tag { letter-spacing: 0; font-size: 11px; }
.mega__head .more { grid-column: 2; white-space: nowrap; font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--green-deep); }
.mega__links { display: grid; gap: 2px; margin-top: 4px; }
.mega__link { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 10px; font-size: 12.5px; line-height: 1.3; color: var(--slate); transition: background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.mega__link .ph-duotone { width: 26px; height: 26px; border-radius: 8px; background: #fff; border: 1px solid var(--border); color: var(--green); font-size: 14px; flex-shrink: 0; }
.mega__link:hover { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.mega__link--more { color: var(--green-deep); font-weight: 600; padding-inline-start: 43px; }
.mega__all { font-size: 13px; font-weight: 600; color: #fff; }
.mega__all:hover { color: var(--mint); }

.section-head__p { max-width: 46ch; color: var(--slate); font-size: 16px; line-height: 1.6; }
.h2 em { font-style: normal; color: var(--green); }
.sub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.sub { background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); scroll-margin-top: 120px; min-width: 0; }
.sub:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(6, 58, 36, 0.12); }
.sub--featured { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sub__media { min-height: 280px; position: relative; }
.sub__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sub__body { padding: 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sub__top { display: flex; justify-content: space-between; align-items: center; }
.sub__ico { width: 54px; height: 54px; border-radius: 15px; background: var(--green-soft); color: var(--green-deep); display: grid; place-items: center; font-size: 25px; }
.sub__num { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.1em; color: var(--slate); }
.sub h3 { font-size: 20px; line-height: 1.2; }
.sub--featured h3 { font-size: 26px; }
.sub p { color: var(--slate); font-size: 15px; line-height: 1.55; }
.sub__tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; padding-top: 6px; }
.sub__tags small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--slate); margin-inline-end: 4px; font-weight: 600; }
:lang(ar) .sub__tags small { letter-spacing: 0; font-size: 12px; }
.sub__tags span { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--green-100); background: var(--green-soft); color: var(--green-dark); }
.sub__cta { min-height: 28px; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--green-deep); display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.sub__cta .icon { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.sub__cta:hover .icon { transform: translateX(3px); }
[dir="rtl"] .sub__cta:hover .icon { transform: translateX(-3px); }
.sub:target { outline: 2px solid var(--green); outline-offset: 4px; }
.section--how { border-top: 1px solid var(--border); }
.steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.steps li { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px; display: grid; gap: 6px; }
.step__n { font-family: var(--font-display); color: var(--green); font-weight: 700; font-size: 12.5px; letter-spacing: 0.12em; }
.steps b { font-size: 17px; }
.steps p { color: var(--slate); font-size: 14px; line-height: 1.5; }

/* The overview rows used to stack on scroll: each one pinned, scaled down and
   dimmed as the next slid over it. It cost 7,600px of scrolling for seven
   divisions, made comparing any two of them impossible, buried the one link
   that converts, and wrote `transform` and `filter` to seven promoted layers
   on every frame. Replaced by an index you can read in one screen, with the
   same rows beneath it as anchored detail. */
.svc-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-block-end: 64px; }
@media (max-width: 1199px) { .svc-index { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .svc-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .svc-index { grid-template-columns: 1fr; gap: 10px; } }

.svc-index__item {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); color: var(--ink);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.svc-index__item:hover { transform: translateY(-2px); border-color: var(--green); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) { .svc-index__item { transition: none; } .svc-index__item:hover { transform: none; } }
.svc-index__num {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: var(--tracking-label); font-variant-numeric: tabular-nums; color: var(--green-deep);
}
.svc-index__item h3 { font-size: 17px; line-height: 1.25; }
:lang(ar) .svc-index__item h3 { font-size: 16.5px; line-height: 1.45; }
.svc-index__item p {
  font-size: 13.5px; line-height: 1.5; color: var(--slate); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.svc-index__count { margin-block-start: auto; padding-block-start: 10px; font-size: 12.5px; font-weight: 600; color: var(--green-deep); }

/* Anchored detail: clear the sticky header when jumped to. */
.svc-row { scroll-margin-top: calc(var(--nav-h) + 28px); }

@media (max-width: 1023px) {
  .mega__grid--v2 { grid-template-columns: 1fr 1fr; }
  .sub-grid { grid-template-columns: 1fr; }
  .sub--featured { grid-column: auto; grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
}
/* header is solid white on every page now — undo the old transparent-over-hero colours */
body:has(.page-hero) .header:not(.is-scrolled) .brand, body:has(.page-hero) .header:not(.is-scrolled) .nav__link, body:has(.page-hero) .header:not(.is-scrolled) .nav-toggle { color: var(--charcoal); }
body:has(.page-hero) .header:not(.is-scrolled) .nav__link:hover, body:has(.page-hero) .header:not(.is-scrolled) .nav__link.is-active { color: var(--ink); }
body:has(.page-hero) .header:not(.is-scrolled) .brand__tag { color: var(--slate); }
body:has(.page-hero) .header:not(.is-scrolled) .lang-switch { background: var(--surface-alt); border-color: var(--border); }
body:has(.page-hero) .header:not(.is-scrolled) .lang-switch__btn { color: var(--slate); }
body:has(.page-hero) .header:not(.is-scrolled) .lang-switch__btn.is-active { background: var(--ink); color: #fff; }
body:has(.page-hero) .header:not(.is-scrolled) .btn--primary { background: var(--ink); color: #fff; }
.sub--wide { grid-column: span 2; }
.sub--full { grid-column: span 3; }
.sub--wide .sub__body, .sub--full .sub__body { display: grid; grid-template-columns: 54px 1fr; gap: 10px 18px; align-items: start; }
.sub--wide .sub__top, .sub--full .sub__top { grid-row: span 4; display: block; }
.sub--wide .sub__num, .sub--full .sub__num { display: none; }
.sub--wide p, .sub--full p { max-width: 64ch; }
@media (max-width: 1023px) { .sub--wide, .sub--full { grid-column: auto; } .sub--wide .sub__body, .sub--full .sub__body { display: flex; } }

/* ===== v5: logo fixes + 404 redesign ===== */
/* page-hero badge: the media cover rule was cropping the logo */
.page-hero__media .page-hero__badge img { position: static; inset: auto; width: 60%; height: auto; object-fit: contain; transform: none; }
.page-hero__media:hover .page-hero__badge img { transform: none; }
/* on green grounds use the white mark so the green "A" doesn't disappear */
.about__badge img, .vm__foot img { content: url("../logo-mark-alt.svg"); }
.footer .brand__mark { content: url("../logo-mark-alt.svg"); }

.nf { padding-block: clamp(72px, 9vw, 120px); background: radial-gradient(70% 60% at 85% 10%, var(--green-soft), transparent 70%), #fff; }
.nf__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.nf__copy .eyebrow { color: var(--green); }
.nf__code { display: flex; align-items: center; gap: 0.06em; font-family: var(--font-display); font-weight: 700; font-size: clamp(120px, 15vw, 210px); line-height: 0.9; letter-spacing: -0.04em; color: var(--green-deep); margin-top: 18px; }
.nf__mark { width: 0.78em; height: 0.78em; border-radius: 50%; background: var(--grad); display: grid; place-items: center; box-shadow: 0 24px 50px rgba(6, 58, 36, 0.28); }
.nf__mark img { width: 58%; height: auto; }
.nf h1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; margin-top: 22px; color: var(--ink); }
.nf .lead { margin-top: 16px; max-width: 48ch; color: var(--slate); }
.nf .hero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.nf__side { display: grid; gap: 16px; }
.nf__media { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--shadow-lg); }
.nf__media img { width: 100%; height: 100%; object-fit: cover; }
.nf__media .page-hero__chip { position: absolute; inset-inline-start: 18px; inset-block-end: 18px; }
.nf__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nf__link { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 18px; background: #fff; color: var(--ink); transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease); }
.nf__link:hover { border-color: var(--green); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.nf__link > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.nf__link b { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; }
.nf__link small { font-size: 12.5px; color: var(--slate); }
.nf__link .icon { width: 16px; height: 16px; color: var(--green-deep); }
.nf__ico { width: 42px; height: 42px; border-radius: 12px; background: var(--green-soft); color: var(--green-deep); display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
@media (max-width: 1023px) { .nf__grid { grid-template-columns: 1fr; } .nf__links { grid-template-columns: 1fr; } }

/* ===== v6: delivered projects on service category pages ===== */
.pj-section { scroll-margin-top: 100px; }
.pj-list { display: grid; gap: 28px; margin-top: 44px; }
.pj { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); }
.pj--flip .pj__media { order: 2; }
.pj__media { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) 140px; gap: 6px; padding: 6px; min-height: 520px; }
.pj__main { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-xl) - 6px) calc(var(--r-xl) - 6px) 10px 10px; }
.pj__thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pj__thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.pj__thumbs img:first-child { border-end-start-radius: calc(var(--r-xl) - 6px); }
.pj__thumbs img:last-child { border-end-end-radius: calc(var(--r-xl) - 6px); }
.pj__badge { position: absolute; inset-inline-start: 22px; inset-block-start: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(255,255,255,0.92); color: var(--green-deep); font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: var(--shadow-md); }
.pj__badge::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--green-deep) url("../logo-mark-alt.svg") center / 62% no-repeat; }
:lang(ar) .pj__badge { letter-spacing: 0; font-size: 13px; }
.pj__body { padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 12px; }
.pj__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pj__scope-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--green); padding: 6px 12px; border-radius: 999px; }
:lang(ar) .pj__scope-tag { letter-spacing: 0; font-size: 13px; }
.pj__count { font-size: 12.5px; color: var(--slate); }
.pj h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; margin-top: 4px; }
.pj__loc { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--slate); }
.pj__loc .ph-duotone { color: var(--green); font-size: 16px; }
.pj__label { margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep); }
:lang(ar) .pj__label { letter-spacing: 0; font-size: 13px; }
.pj__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pj__list--2 { grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.pj__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.pj__list .ph-duotone { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--green-soft); color: var(--green-deep); font-size: 13px; margin-top: 1px; }
.pj__also { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pj__also small { font-size: 12px; color: var(--slate); margin-inline-end: 4px; }
.pj__also a { font-size: 12.5px; font-weight: 600; color: var(--green-deep); padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-alt); }
.pj__also a:hover { border-color: var(--green); }
.pj-foot { display: flex; justify-content: center; margin-top: 36px; }
@media (max-width: 1023px) { .pj { grid-template-columns: 1fr; } .pj--flip .pj__media { order: 0; } .pj__media { min-height: 420px; } .pj__list--2 { grid-template-columns: 1fr; } }
.pj--compact .pj__media { min-height: 400px; grid-template-rows: minmax(0, 1fr) 110px; }
.pj--compact .pj__body { justify-content: center; }
.pj--compact .pj__also { margin-top: 18px; }

/* ===== v7: latest delivered projects on the Projects page ===== */
.lp-section { padding-bottom: 0; }
/* =====================================================================
   Flagship projects — six equal cards, 3x2

   Three of the six carried span modifiers, so six cards occupied seven
   tracks and one was always orphaned into a full-width frame. The orphan
   happened to be the thinnest card in the set — two scope items, one chip,
   no location — given the largest area, which is the inversion that read as
   wrong. The first project earns its distinction by weight and position,
   not by area.
   ===================================================================== */
.lp-grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 22px; margin-block-start: 44px; }
@media (min-width: 641px)  { .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lp {
  display: flex; flex-direction: column; block-size: 100%; min-inline-size: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s var(--ease);
}
.lp:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green-100); }
@media (prefers-reduced-motion: reduce) { .lp { transition: none; } .lp:hover { transform: none; } }

/* 3:2 rather than 4:3 — 33px off every row, six rows of scroll saved. */
.lp__media { position: relative; display: block; flex: 0 0 auto; aspect-ratio: 3 / 2; overflow: hidden; }
.lp__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.lp:hover .lp__media img { transform: scale(1.04); }
.lp__scope {
  position: absolute; inset-inline-start: 16px; inset-block-end: 16px; max-inline-size: calc(100% - 32px);
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: rgba(6, 58, 36, 0.82); backdrop-filter: blur(8px);
  padding: 7px 12px; border-radius: 999px;
}
:lang(ar) .lp__scope { letter-spacing: 0; font-size: 13px; }

.lp__body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 22px 24px 24px; }
.lp__chips { display: flex; flex-wrap: wrap; gap: 6px; min-block-size: 22px; }
.lp__chips a { font-size: 11.5px; font-weight: 600; color: var(--green-deep); background: var(--green-soft); padding: 4px 10px; border-radius: 999px; }
.lp__chips a:hover { background: var(--green); color: #fff; }
.lp h3 { font-size: 20px; line-height: 1.25; min-block-size: 2.5em; }
:lang(ar) .lp h3 { font-size: 19px; line-height: 1.45; min-block-size: 2.9em; }
.lp__loc { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--slate); min-block-size: 20px; }
.lp__loc .ph-duotone { color: var(--green); }
.lp__list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 7px; }
.lp__list li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.lp__list .ph-duotone { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--green-soft); color: var(--green-deep); font-size: 12px; }
.lp__list .lp__more { color: var(--slate); padding-inline-start: 29px; font-size: 12.5px; }

/* Scope lists are genuinely 2–3 items; pinning the link to the bottom pools
   the difference into one gap so every card's footer lines up. */
.lp__cta {
  margin-block-start: auto; padding-block-start: 16px; border-block-start: 1px solid var(--border);
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--green-deep);
  display: inline-flex; align-items: center; gap: 6px;
}
.lp__cta .icon { width: 16px; height: 16px; }
.lp:hover .lp__cta .icon { transform: translateX(4px); transition: transform 0.3s var(--ease); }
[dir="rtl"] .lp:hover .lp__cta .icon { transform: translateX(-4px) scaleX(-1); }

/* The lead project earns its place by weight, not by area. */
.lp--lead { border-color: var(--green-100); box-shadow: var(--shadow-md); }
.lp--lead .lp__scope { background: var(--green-deep); }

/* ---------- Mobile nav: service list ---------- */
.mobile-nav__svc { display: grid; gap: 2px; padding-block: 10px; }
.mobile-nav__svc small { font-family: var(--font-display); font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-block: 10px; }
:lang(ar) .mobile-nav__svc small { letter-spacing: 0; font-size: 12.5px; }
.mobile-nav__svc a { display: flex; align-items: center; gap: 12px; font-size: 16px; font-family: var(--font-body); font-weight: 500; padding: 11px 0; border-bottom: 1px solid var(--border); color: var(--slate); }
.mobile-nav__svc a i { font-size: 22px; color: var(--green-deep); }
.mobile-nav__svc a .tag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--green); padding: 2px 7px; border-radius: 999px; }
:lang(ar) .mobile-nav__svc a .tag { letter-spacing: 0; font-size: 11px; }

/* =====================================================================
   Phones (≤640px)

   The desktop layout stacks into roughly twenty screens of scrolling on a
   390px handset, most of it decorative photography. A visitor on a phone is
   usually after one of three things — what we do, proof we have done it, and
   a way to call us — so the rules below cut the browsing weight rather than
   shrink it: images that only set a mood come out, long card grids are
   capped, and what is left is spaced for the thumb.
   ===================================================================== */
@media (max-width: 640px) {
  :root { --section: 56px; --r-lg: 16px; --r-xl: 20px; }

  .section-head { margin-bottom: 26px; }
  .section-head--split { gap: 10px; }
  .section-head__p { font-size: 15px; }

  /* Hero: one photograph is enough to set the scene; the second is overlap
     decoration that costs a download and 300px of scrolling. */
  .hero { padding-bottom: 64px; }
  .hero__visual { height: clamp(300px, 64vw, 380px); }
  .hero__img-main { width: 100%; }
  .hero__img-sub { display: none; }
  .hero__card { inset-inline-start: 12px; }

  /* The register reads as a list already; on a phone the number simply moves
     beside the name instead of sitting above a rule. */
  .services__grid { gap: 10px; grid-auto-rows: auto; }
  .service { flex-direction: row; align-items: flex-start; gap: 14px; padding: 15px 16px; }
  .service__num { flex: 0 0 auto; min-inline-size: 24px; margin: 0; padding: 0; border: 0; font-size: 12px; padding-block-start: 3px; }
  .service__body { gap: 2px; min-inline-size: 0; }
  .service h3, :lang(ar) .service h3 { font-size: 17px; line-height: 1.3; min-block-size: 0; }
  .service p { margin-block-start: 3px; font-size: 14px; line-height: 1.5; -webkit-line-clamp: 2; }
  .service__tags { display: none; }
  .service__more { margin-block-start: 6px; padding-block-start: 0; font-size: 13px; }
  .service--cta { flex-direction: column; padding: 20px 18px; }
  .service--cta .service__num { padding-block-end: 0; margin-block-end: 10px; }
  .service--cta h3 { font-size: 19px; }
  .service--cta p { -webkit-line-clamp: 3; }

  /* Six project cards is a lot of scrolling for a taster; three plus the
     "all projects" link already there does the same job. */
  #projects .projects__grid > .project:nth-child(n + 4) { display: none; }

  /* Service overview rows: keep every capability line, lose the photo
     furniture around them. */
  .svc-row__media { min-height: 170px; }
  .svc-row__sectors { display: none; }
  .svc-row__body { padding: 20px 18px 22px; }
  .svc-row__caps li { font-size: 14px; }
  .svc-row__title small { display: none; }

  /* Project showcases: the main photograph carries it, the thumbnails are
     two more downloads for a strip barely 60px tall. */
  .pj__thumbs { display: none; }
  .pj__list { gap: 8px; }
  .pj__list li { font-size: 14px; }

  /* Cards carry a 16:10 photo, which is 260px of a 844px screen before a word
     of content. A shallower crop keeps the picture doing its job for a third
     less scrolling. */
  .project__media, .lp__media { aspect-ratio: auto; height: 180px; min-height: 0; }
  .lp-grid { grid-auto-rows: auto; gap: 14px; }
  .lp h3, :lang(ar) .lp h3 { font-size: 18px; min-block-size: 0; }
  .lp__chips, .lp__loc { min-block-size: 0; }
  .project__media img, .lp__media img, .pj__main { width: 100%; height: 100%; object-fit: cover; }
  /* Without the thumbnail strip this is a single picture, so drop the grid —
     a grid item will not shrink below its intrinsic height and overflowed. */
  .pj__media, .pj--compact .pj__media {
    display: block; aspect-ratio: auto; min-height: 0; height: 200px; padding: 0;
  }
  .pj__main { border-radius: 0; }
  .project__body { padding: 16px 18px 18px; }

  /* Flagship cards on the projects page. */
  .lp__list li { font-size: 14px; }
  .lp__body { padding: 18px; }

  /* The overview page exists to let you pick a division; the full capability
     list for each one is on its own page, in more detail. Show the first few
     and let "View service" do the rest. */
  .svc-row__caps li:nth-child(n + 5) { display: none; }

  /* Process and "why us" carry real copy, so tighten the frames rather than
     drop the content. */
  .step { padding: 20px 18px; }
  .step__meta { gap: 6px; }
  .process__notes { gap: 10px; margin-top: 24px; }
  .why__grid { gap: 28px; }
  .why-card { padding: 20px 18px; }
  .why-card > i { width: 44px; height: 44px; border-radius: 13px; }
  .why-card h3 { font-size: 17px; }

  /* The stat card and the photo caption are both pinned inside the hero
     frame. At 620px tall they clear each other; at 300px they collide, so the
     caption drops below the picture and reads in body colour. */
  .hero__visual { height: auto; }
  .hero__img-main { position: relative; inset: auto; width: 100%; height: 240px; }
  .hero__card { inset-block-start: 12px; inset-block-end: auto; }
  .hero__caption {
    position: static; width: 100%; padding: 14px 2px 0; color: var(--ink);
    flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap;
  }
  .hero__caption small { color: var(--muted); opacity: 1; }
  .hero__caption .tag { background: var(--green-soft); color: var(--green-dark); border-color: transparent; }

  /* A decorative initial, sized for a wider panel; on a phone it lands on the
     heading it was meant to sit behind. */
  .vm__watermark { display: none; }

  .figures__card { padding: 8px; }
  .figure { padding: 18px 14px; }
  .figure__num { font-size: 34px; }

  .cta__card { padding: 20px; }
  .footer__grid { gap: 28px; }

  /* The quick bar owns the bottom of the screen, so the floating WhatsApp
     button is redundant and the to-top button moves above it. */
  .wa { display: none; }
  .to-top { bottom: calc(var(--quickbar-h) + 16px); }
  body { padding-bottom: var(--quickbar-h); }
}

/* Quick contact bar — phones only, declared outside the query so the custom
   property has a value at every width. */
:root { --quickbar-h: 0px; }
.quickbar { display: none; }

@media (max-width: 640px) {
  :root { --quickbar-h: calc(58px + env(safe-area-inset-bottom)); }
  .quickbar {
    display: grid;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 95;
    grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -6px 24px rgba(11, 60, 40, 0.08);
  }
  .quickbar__btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 58px; padding: 8px 4px;
    background: var(--surface); color: var(--ink);
    font-family: var(--font-display); font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.04em;
  }
  .quickbar__btn i { font-size: 20px; color: var(--green-deep); }
  .quickbar__btn--primary { background: var(--green-deep); color: #fff; }
  .quickbar__btn--primary i { color: #fff; }
  .quickbar__btn:active { background: var(--green-soft); }
  .quickbar__btn--primary:active { background: var(--green); }
  :lang(ar) .quickbar__btn { letter-spacing: 0; font-size: 12.5px; }

  /* The open menu covers the page, so the bar must not sit on top of it. */
  .mobile-nav.is-open ~ .quickbar { display: none; }
}

/* ===== contact: one action in the hero, reference further down =====
   The hero used to be followed by three large cards repeating Call, Email and
   WhatsApp — two of which were already offered as buttons directly above. The
   number now sits inline in the hero, email sits with the form where someone
   is deciding how to send a scope, and all three are listed once, quietly, in
   the sidebar. */

.cgrid__main { min-inline-size: 0; }
.cgrid__docs { margin-bottom: 14px; font-size: 14.5px; color: var(--muted); }
.cgrid__docs a { display: inline-block; min-block-size: 26px; color: var(--green-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.cside__sub { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.14); }
.cside__reach { display: grid; gap: 10px; margin-top: 12px; }
.cside__reach li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; min-block-size: 26px; }
.cside__reach i { font-size: 17px; color: var(--mint); flex-shrink: 0; }
.cside__reach a { color: inherit; display: inline-flex; align-items: center; min-block-size: 26px; }
.cside__reach a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* The floating WhatsApp button is a third copy of the hero's own CTA here. */
body:has(#contactForm) .wa { display: none; }

.form__trap {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.form__status-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.form button[type="submit"][aria-busy="true"] { opacity: 0.7; pointer-events: none; }

/* Field-level validation messages. The form reported one message at the foot,
   which left you hunting for the field it meant. */
.field__err {
  display: none; margin-block-start: 6px; font-size: 13px; line-height: 1.4; color: #B02A2A;
}
.field__err.is-shown { display: flex; align-items: flex-start; gap: 6px; }
.field__err.is-shown::before { content: "!"; flex-shrink: 0; width: 15px; height: 15px; margin-block-start: 1px; border-radius: 50%; background: #B02A2A; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.field__hint { font-weight: 400; color: var(--muted); font-size: 12.5px; }

/* The service chips are checkboxes now, so a chosen one has to read as chosen. */
.chip:has(input:checked) { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 999px; }

/* ===== FAQ (marketing desk) =====
   A two-column block: the capsule and the ask-us link on one side, the
   questions on the other. The accordion is a <details>, so it works with no
   script and the browser handles the semantics. */
.faq__grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
.faq__intro { position: sticky; top: calc(var(--nav-h) + 28px); }
.faq__capsule { font-size: 17px; color: var(--slate); margin: 0 0 22px; max-width: 46ch; }
.faq__list { display: grid; gap: 10px; }
.faq__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.faq__item[open] { border-color: var(--green-100); box-shadow: var(--shadow-sm); }
.faq__item summary {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 16px 18px; font-family: var(--font-display); font-weight: 600; font-size: 16.5px;
  color: var(--charcoal); list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--green-deep); }
.faq__item summary > span { flex: 1 1 auto; }
.faq__chev { flex: 0 0 auto; color: var(--green); transform: rotate(90deg); transition: transform 0.22s var(--ease); }
.faq__item[open] .faq__chev { transform: rotate(-90deg); }
[dir="rtl"] .faq__chev { transform: rotate(90deg); }
[dir="rtl"] .faq__item[open] .faq__chev { transform: rotate(-90deg); }
.faq__answer { padding: 0 18px 18px; }
.faq__answer p { margin: 0; color: var(--slate); max-width: 62ch; }
@media (max-width: 1023px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__intro { position: static; top: auto; }
}
@media (max-width: 640px) {
  .faq__item summary { padding: 14px 15px; font-size: 15.5px; }
  .faq__answer { padding: 0 15px 15px; }
  .faq__capsule { font-size: 15.5px; margin-bottom: 18px; }
}

/* ===== Articles ===== */
.posts { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post-card__media { aspect-ratio: 16 / 9; background: var(--surface-dim); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card__body { display: flex; flex-direction: column; gap: 9px; padding: 20px; flex: 1 1 auto; }
.post-card__date { font-family: var(--font-display); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.post-card h3 { font-size: 19px; }
.post-card p { margin: 0; color: var(--slate); font-size: 15px; }
.post-card__more { margin-block-start: auto; padding-block-start: 6px; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--green-deep); display: inline-flex; align-items: center; gap: 7px; }

.article { max-width: 72ch; margin-inline: auto; }
.article__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 26px; color: var(--muted); font-size: 14px; }
.article__body > * + * { margin-block-start: 1.1em; }
.article__body h2 { font-size: clamp(22px, 2.4vw, 28px); margin-block-start: 1.8em; }
.article__body h3 { font-size: 19px; margin-block-start: 1.5em; }
.article__body ul, .article__body ol { padding-inline-start: 22px; }
.article__body li + li { margin-block-start: 0.45em; }
.article__body blockquote { margin-inline: 0; padding-inline-start: 18px; border-inline-start: 3px solid var(--green-100); color: var(--slate); font-size: 17px; }
.article__body img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.article__body code { font-family: ui-monospace, Menlo, monospace; font-size: 0.9em; background: var(--surface-alt); padding: 1px 5px; border-radius: 5px; }

/* A fieldset is here to give the service checkboxes a group name; it should
   look exactly like the labelled field above it, not like a browser box. */
.chips-set { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.field__legend { display: block; padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--charcoal); }

/* ===== Breadcrumb =====
   Sits above the H1 on inner pages, matching the BreadcrumbList that was
   already in the markup. Muted on the dark hero, and it wraps rather than
   overflowing on a phone. */
.crumbs { margin-bottom: 14px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: flex; align-items: center; gap: 6px 8px; font-size: 13px; }
.crumbs li + li::before { content: "/"; color: rgba(255, 255, 255, 0.35); }
[dir="rtl"] .crumbs li + li::before { content: "\\\\"; }
/* The link needs a target you can actually hit with a thumb: at 13px the text
   box is about 18px tall, which the layout audit flags at phone widths. */
.crumbs a, .crumbs [aria-current="page"] { display: inline-flex; align-items: center; min-height: 24px; }
.crumbs a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--mint); font-weight: 500; }
@media (max-width: 640px) { .crumbs { margin-bottom: 10px; } .crumbs li { font-size: 12.5px; } }

/* The one piece of Arabic on an English page. A system face is right here:
   pulling a webfont for two words cost more than the words are worth. */
.lang-switch__btn[lang="ar"], .lang-switch a[hreflang="ar"] {
  /* System Arabic faces only. Naming the webfont here would pull 43KB onto
     every English page to render one word. */
  font-family: "Geeza Pro", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
}

/* The Phosphor icons are an inlined SVG sprite rather than a webfont now.
   The element around each one keeps every rule it already had — the chip
   backgrounds, borders and sizes all key off font-size — and the mark inside
   simply fills it. */
.ph-duotone > svg.ph { width: 1em; height: 1em; display: block; fill: currentColor; }

/* ===== Legal pages =====
   One measure, generous leading. Nobody enjoys reading these, so the least
   we can do is not make them hard to read. */
.legal { max-width: 68ch; margin-inline: auto; }
.legal h2 { font-size: clamp(19px, 2vw, 23px); margin-block: 2em 0.7em; }
.legal h2:first-child { margin-block-start: 0; }
.legal p { margin: 0 0 1em; color: var(--slate); }
.legal__updated { margin-block-start: 2.6em; padding-block-start: 1.2em; border-block-start: 1px solid var(--border); font-size: 13.5px; color: var(--muted); }

/* The privacy link sits on the dark footer bar beside the copyright. */
.footer__bottom a { color: rgba(255, 255, 255, 0.72); text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
.footer__bottom a:hover { color: #fff; text-decoration: underline; }

/* The address card is not a link until a Google Business Profile exists, so
   it must not invite a click it cannot honour. */
.cside__map--static { cursor: default; }
.cside__map--static:hover { transform: none; }