/* ==========================================================================
   components.css — nav, hero, buttons, cards, forms, footer
   ========================================================================== */

/* ==========================================================================
   1. Site header
   ========================================================================== */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  transition: background-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
  border-block-end: 1px solid transparent;
}

/* Transparent over the hero, solid once scrolled */
.site-header.is-stuck {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-block-end-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-block-size: 4.25rem;
  transition: min-block-size var(--t-base) var(--ease-out);
}
.site-header.is-stuck .site-header__inner { min-block-size: 3.6rem; }

/* ---- Scroll progress ----------------------------------------------------
   A hairline on the header's bottom edge. At the top of the page it is a
   single point at dead centre; it grows outward in both directions as you
   scroll and spans the full width at the bottom.

   scaleX from a centre origin is what makes it symmetrical — no left/right
   maths, and nothing to flip for RTL. It rides --scroll-progress, which JS
   sets on <html>, so the only per-frame work is a compositor transform.
   ------------------------------------------------------------------------ */
.site-header__progress {
  position: absolute;
  inset-block-end: -1px;      /* sit on the border, not above it */
  inset-inline: 0;
  block-size: 2px;
  pointer-events: none;
  overflow: hidden;
}
.site-header__progress::before {
  content: "";
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background: linear-gradient(to right,
    transparent 0%,
    var(--accent) 22%,
    var(--gold-glow) 50%,
    var(--accent) 78%,
    transparent 100%);
  /* The 0.006 floor keeps a visible dot at scroll position zero, so the
     indicator reads as "at the start" rather than as missing. */
  transform: scaleX(calc(0.006 + 0.994 * var(--scroll-progress, 0)));
  transform-origin: center;
  will-change: transform;
}

/* ---- Wordmark ---------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  min-block-size: 44px;   /* touch target */
}
.brand__mark {
  inline-size: 2.4rem;
  block-size: 2.4rem;
  flex: none;
  color: var(--accent);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  color: var(--nav-ink, var(--ink));
}
.brand__tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}
html[lang="ar"] .brand__tag { text-transform: none; letter-spacing: 0; }

/* Header sits over the dark hero until scrolled. It is NOT inside .on-dark,
   so it must re-point the accent itself — --gold-deep on the hero is 3.9:1
   and the wordmark tagline would quietly fail AA. */
.site-header:not(.is-stuck) {
  --nav-ink: #F2F6FC;
  --nav-ink-soft: #B9C8DE;
  --accent: var(--gold-lift);
}
.site-header.is-stuck { --nav-ink: var(--ink); --nav-ink-soft: var(--ink-soft); }

/* ---- Narrow phones ------------------------------------------------------
   The header has to fit the wordmark plus three controls. It did not: at 375px
   the menu button sat at x -40, clipped away entirely by body's
   overflow-x:hidden — invisible on screen AND invisible to a scrollWidth
   check, which is why it survived testing. Shed width in stages.
   ------------------------------------------------------------------------ */
@media (max-width: 27rem) {
  .site-header__inner { gap: var(--space-3); }

  /* The globe already carries the meaning; the word is redundant here */
  .lang-toggle { inline-size: 2.75rem; padding-inline: 0; }
  .lang-toggle > span { display: none; }

  .brand__tag { display: none; }
  .brand__name { font-size: var(--fs-sm); }
  .brand__mark { inline-size: 2.1rem; block-size: 2.1rem; }
}

/* Smallest phones: the mark alone. The link keeps its aria-label, so its
   accessible name is unchanged. */
@media (max-width: 22rem) {
  .brand__text { display: none; }
}

/* ---- Primary nav ------------------------------------------------------- */
.nav { display: none; }
@media (min-width: 64rem) {
  .nav { display: flex; align-items: center; gap: var(--space-2); }
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--nav-ink-soft, var(--ink-soft));
  border-radius: var(--r-md);
  transition: color var(--t-fast) var(--ease-out);
}
.nav__link:hover { color: var(--nav-ink, var(--ink)); }

.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0.45rem;
  inset-inline-start: var(--space-4);
  inline-size: calc(100% - var(--space-4) * 2);
  block-size: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-base) var(--ease-out);
}
.nav__link:hover::after { transform: scaleX(1); }

.nav__link[aria-current="page"] {
  color: var(--nav-ink, var(--ink));
  font-weight: 700;
}
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* ---- Header controls --------------------------------------------------- */
.header-tools { display: flex; align-items: center; gap: var(--space-2); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--r-md);
  color: var(--nav-ink, var(--ink));
  border: 1px solid transparent;
  transition: background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.icon-btn:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { inline-size: 1.25rem; block-size: 1.25rem; }

/* Theme toggle swaps which glyph is visible */
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* Language toggle */
.lang-toggle {
  inline-size: auto;
  padding-inline: var(--space-4);
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  border-color: color-mix(in srgb, currentColor 24%, transparent);
}
.lang-toggle svg { inline-size: 1.05rem; block-size: 1.05rem; opacity: .75; }

/* ---- Mobile menu ------------------------------------------------------- */
.menu-btn { display: inline-flex; }
@media (min-width: 64rem) { .menu-btn { display: none; } }

.menu-btn__bars { position: relative; inline-size: 1.35rem; block-size: 2px; }
.menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after {
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-base) var(--ease-out),
              opacity var(--t-fast) var(--ease-out);
}
.menu-btn__bars::before, .menu-btn__bars::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
}
.menu-btn__bars::before { inset-block-start: -6px; }
.menu-btn__bars::after  { inset-block-start:  6px; }

.menu-btn[aria-expanded="true"] .menu-btn__bars { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after  { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(30,58,138,.55) 0%, transparent 60%),
    linear-gradient(180deg, #0C1526 0%, #070C16 100%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2%);
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              visibility 0s linear var(--t-base);
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
@media (min-width: 64rem) { .mobile-nav { display: none; } }

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
  padding-inline: var(--gutter);
}
.mobile-nav__link {
  display: block;
  padding: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: #F2F6FC;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.mobile-nav.is-open .mobile-nav__link { opacity: 1; transform: translateY(0); }
.mobile-nav__link:hover { color: var(--gold-lift); }
.mobile-nav__link[aria-current="page"] { color: var(--gold-lift); }

.mobile-nav.is-open .mobile-nav__item:nth-child(1) .mobile-nav__link { transition-delay: 60ms; }
.mobile-nav.is-open .mobile-nav__item:nth-child(2) .mobile-nav__link { transition-delay: 110ms; }
.mobile-nav.is-open .mobile-nav__item:nth-child(3) .mobile-nav__link { transition-delay: 160ms; }
.mobile-nav.is-open .mobile-nav__item:nth-child(4) .mobile-nav__link { transition-delay: 210ms; }
.mobile-nav.is-open .mobile-nav__item:nth-child(5) .mobile-nav__link { transition-delay: 260ms; }
.mobile-nav.is-open .mobile-nav__item:nth-child(6) .mobile-nav__link { transition-delay: 310ms; }

/* ==========================================================================
   2. Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-block-size: 2.75rem;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.btn:active { transform: scale(.975); }
.btn svg { inline-size: 1.1rem; block-size: 1.1rem; flex: none; }

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
}
/* Hover DARKENS rather than lightens. Lightening the gold pushed the label
   below AA on light surfaces; darkening improves both scopes at once. */
.btn--primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, #000000);
  box-shadow: var(--shadow-md);
}

.btn--solid {
  background: var(--brand);
  color: var(--on-brand);
}
[data-theme="dark"] .btn--solid { background: var(--surface-raise); }
.btn--solid:hover { background: color-mix(in srgb, var(--brand) 84%, #FFFFFF); }

.btn--outline {
  border-color: color-mix(in srgb, currentColor 34%, transparent);
  color: var(--ink);
}
.btn--outline:hover {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.btn--ghost { color: var(--accent); padding-inline: var(--space-2); }
.btn--ghost:hover { gap: var(--space-4); }

.btn--lg { min-block-size: 3.1rem; padding-inline: var(--space-6); font-size: var(--fs-base); }
.btn--block { inline-size: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Arrow nudges outward — direction-aware so it points correctly in RTL */
.btn__arrow { transition: transform var(--t-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(calc(4px * var(--dir-sign, 1))); }
html[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
html[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(4px); }

/* ==========================================================================
   3. Hero — poster-first video system
   The poster paints instantly. The video is only attached when the device
   and connection can afford it, then crossfades in over the poster.
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-block-size: min(76svh, 42rem);
  padding-block: 7rem var(--space-7);
  overflow: hidden;
  isolation: isolate;
}
.hero--compact {
  min-block-size: min(52svh, 28rem);
  padding-block: 7rem var(--space-6);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #070C16;
}

.hero__poster {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: opacity var(--t-slow) var(--ease-out);
}

.hero__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.hero__video.is-playing { opacity: 1; }
/* Once the video is up, drop the poster so it cannot ghost through */
.hero__media.has-video .hero__poster { opacity: 0; }

/* Scrim: guarantees text contrast over any footage the client drops in */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Tuned against real photo pixels, not by eye. The original values were set
     for the dark SVG posters; photographs are far brighter and pushed the
     breadcrumbs to 2.7:1. Measured worst case is now ~7.6:1. */
  background:
    linear-gradient(180deg,
      rgba(7,12,22,.80) 0%,
      rgba(7,12,22,.44) 30%,
      rgba(7,12,22,.76) 70%,
      rgba(7,12,22,.95) 100%),
    linear-gradient(to var(--scrim-dir, right),
      rgba(7,12,22,.86) 0%,
      rgba(7,12,22,.48) 60%,
      rgba(7,12,22,.12) 100%);
}
html[dir="rtl"] .hero__scrim { --scrim-dir: left; }

.hero__inner { position: relative; inline-size: 100%; }

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 700;
  color: #FFFFFF;
  max-inline-size: 17ch;
  margin-block: var(--space-5) var(--space-5);
}
.hero__lede {
  font-size: var(--fs-md);
  color: #C9D6E8;
  max-inline-size: 54ch;
  margin-block-end: var(--space-7);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Live stat strip pinned to the hero base */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid rgba(242,246,252,.18);
}
.hero__stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--gold-lift);
  line-height: 1;
}
.hero__stat-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #B9C8DE;
  margin-block-start: var(--space-2);
}
html[lang="ar"] .hero__stat-label { text-transform: none; letter-spacing: 0; }

/* The control sits in the hero's bottom-inline-end corner, which on the home
   page is exactly where the last stat block ends. Reserve room for it — but
   only when a video is actually playing, since that is the only time the
   control exists. Interior heroes have no stats and are unaffected.

   Not width-scoped: video now attaches at every width, so a phone-width hero
   with stats needs this clearance just as much as a desktop one. */
.hero__media.has-video ~ .hero__inner .hero__stats {
  margin-block-end: 2.75rem;
}

/* ---- Video pause / play -------------------------------------------------
   Icon only, no label, no chrome. Sits at the inline-END corner — which is
   bottom-right in English and bottom-left in Arabic, i.e. always the corner
   away from the headline.
   ------------------------------------------------------------------------ */
.hero__videobtn {
  position: absolute;
  inset-block-end: var(--space-5);
  inset-inline-end: var(--gutter);
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;          /* 44px touch target */
  block-size: 2.75rem;
  padding: 0;
  color: #F2F6FC;
  background: transparent;
  border: 0;
  border-radius: var(--r-full);
  opacity: .68;
  transition: opacity var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.hero__media.has-video ~ .hero__videobtn { display: inline-flex; }
.hero__videobtn:hover { opacity: 1; }
.hero__videobtn:active { transform: scale(.9); }
.hero__videobtn svg {
  inline-size: 1.6rem;
  block-size: 1.6rem;
  /* A soft shadow is the only thing separating it from bright footage —
     there is no plate behind it. */
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}

/* Morph: two bars <-> two halves of a triangle. Both paths keep the same
   four points throughout, so the interpolation is clean. The `d` values are
   also set as HTML attributes, so a browser that cannot animate `d` still
   renders a correct (just non-morphing) icon. */
.hero__videobtn .vb-l,
.hero__videobtn .vb-r {
  transition: d var(--t-base) var(--ease-out);
}
.hero__videobtn[aria-pressed="false"] .vb-l { d: path("M6 4 L10 4 L10 20 L6 20 Z"); }
.hero__videobtn[aria-pressed="false"] .vb-r { d: path("M14 4 L18 4 L18 20 L14 20 Z"); }
.hero__videobtn[aria-pressed="true"]  .vb-l { d: path("M6 4 L12 7.5 L12 16.5 L6 20 Z"); }
.hero__videobtn[aria-pressed="true"]  .vb-r { d: path("M12 7.5 L18 11.5 L18 12.5 L12 16.5 Z"); }

@media (prefers-reduced-motion: reduce) {
  .hero__videobtn .vb-l, .hero__videobtn .vb-r { transition: none; }
}

/* ==========================================================================
   4. Cards
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
}

.card__icon {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
  flex: none;
}
.card__icon svg { inline-size: 1.35rem; block-size: 1.35rem; }

.card__title { font-size: var(--fs-lg); }
.card__text { color: var(--ink-soft); font-size: var(--fs-sm); }

.card__index {
  position: absolute;
  inset-block-start: var(--space-5);
  inset-inline-end: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  /* Decorative watermark: aria-hidden, so WCAG 1.4.3 does not apply.
     Tuned per theme so it stays visible as a design element in both. */
  color: color-mix(in srgb, var(--ink) 26%, transparent);
}

[data-theme="dark"] .card__index {
  color: color-mix(in srgb, var(--ink) 34%, transparent);
}

/* Feature list inside cards */
.tick-list { display: flex; flex-direction: column; gap: var(--space-3); }
.tick-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.tick-list svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  flex: none;
  color: var(--accent);
  margin-block-start: .2rem;
}

/* ---- Project card ------------------------------------------------------ */
.project-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.project-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.project-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0C1526;
}
.project-card__media > svg,
.project-card__media > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.project-card:hover .project-card__media > svg,
.project-card:hover .project-card__media > img { transform: scale(1.06); }

.project-card__tag {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--navy-950);
  background: var(--gold-lift);
  border-radius: var(--r-full);
}

.project-card__body { padding: var(--space-5); }
.project-card__title { font-size: var(--fs-lg); margin-block-end: var(--space-2); }
.project-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}
.project-card__meta span { display: inline-flex; align-items: center; gap: var(--space-2); }
.project-card__meta svg { inline-size: 1rem; block-size: 1rem; }

/* ---- Filter chips ------------------------------------------------------ */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-end: var(--space-7); }
.filter-chip {
  min-block-size: 2.75rem;
  padding: var(--space-2) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  transition: all var(--t-fast) var(--ease-out);
}
.filter-chip:hover { border-color: var(--border-strong); color: var(--ink); }
.filter-chip[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
[data-theme="dark"] .filter-chip[aria-pressed="true"] {
  background: var(--gold-lift);
  border-color: var(--gold-lift);
  color: var(--navy-950);
}

.project-card.is-hidden { display: none; }

/* ==========================================================================
   5. Stats
   ========================================================================== */
.stat { display: flex; flex-direction: column; gap: var(--space-2); }
.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.stat__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
}

/* ==========================================================================
   6. Accordion
   ========================================================================== */
.accordion { border-block-start: 1px solid var(--border); }
.accordion__item { border-block-end: 1px solid var(--border); }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  inline-size: 100%;
  min-block-size: 3.9rem;
  padding-block: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: start;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease-out);
}
.accordion__trigger:hover { color: var(--accent); }

.accordion__sign {
  position: relative;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  flex: none;
  color: var(--accent);
}
.accordion__sign::before, .accordion__sign::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease-out);
}
.accordion__sign::after { transform: rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__sign::after { transform: rotate(0deg); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease-out);
}
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p {
  padding-block-end: var(--space-5);
  color: var(--ink-soft);
  max-inline-size: var(--measure);
}

/* ==========================================================================
   7. Forms
   ========================================================================== */
.form { display: grid; gap: var(--space-5); }
@media (min-width: 46rem) {
  .form--two { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.field__req { color: var(--danger); margin-inline-start: 2px; }

.field__hint { font-size: var(--fs-xs); color: var(--ink-faint); }

.field__input {
  min-block-size: 3rem;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
textarea.field__input { min-block-size: 9rem; resize: vertical; line-height: var(--lh-body); }

.field__input::placeholder { color: var(--ink-faint); opacity: .75; }

.field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

.field__error {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--danger);
}
.field__error svg { inline-size: .95rem; block-size: .95rem; flex: none; }

.field.is-invalid .field__input { border-color: var(--danger); }
.field.is-invalid .field__error { display: flex; }

/* Form-level status message */
.form-status {
  display: none;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.form-status.is-shown { display: flex; }
.form-status--ok {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 34%, transparent);
}
[data-theme="dark"] .form-status--ok { color: #6EE7A8; }
.form-status--err {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 34%, transparent);
}
[data-theme="dark"] .form-status--err { color: #FCA5A5; }
.form-status svg { inline-size: 1.15rem; block-size: 1.15rem; flex: none; margin-block-start: .12rem; }

/* ==========================================================================
   8. CTA band
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8);
  background:
    radial-gradient(90% 140% at 12% 0%, rgba(30,58,138,.62) 0%, transparent 58%),
    linear-gradient(140deg, #0C1526 0%, #070C16 100%);
}
.cta-band__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
}
@media (min-width: 58rem) {
  .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.cta-band__title { font-size: var(--fs-2xl); color: #FFFFFF; max-inline-size: 22ch; }
.cta-band__text { color: #B9C8DE; max-inline-size: 46ch; margin-block-start: var(--space-3); }

/* Blueprint grid texture */
.blueprint-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(224,178,82,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224,178,82,.09) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(85% 85% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(85% 85% at 50% 40%, #000 20%, transparent 78%);
}

/* ==========================================================================
   8b. Editorial layout — breaking the container rhythm

   Every section on this site was the same shape: centered container, heading,
   grid. These three break that deliberately.
   ========================================================================== */

/* ---- Full-bleed band ---------------------------------------------------
   No negative margins and no 100vw. A <section> is already full width; the
   band simply keeps its image OUTSIDE .container. That sidesteps the classic
   full-bleed bug where 100vw includes the scrollbar and the page scrolls
   sideways by ~15px on Windows.
   ------------------------------------------------------------------------ */
.band {
  position: relative;
  display: grid;
  align-items: center;
  min-block-size: min(62svh, 32rem);
  padding-block: var(--space-9);
  overflow: hidden;
  isolation: isolate;
  background: #070C16;
}
.band__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0;
  transition: opacity 800ms var(--ease-out), transform 1200ms var(--ease-out);
  transform: scale(1.04);
}
.band__img.is-loaded { opacity: 1; transform: scale(1); }

/* Measured, not eyeballed: text over photography is where AA quietly fails. */
.band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to var(--scrim-dir, right),
      rgba(6,10,20,.92) 0%, rgba(6,10,20,.78) 42%, rgba(6,10,20,.42) 100%),
    linear-gradient(180deg, rgba(6,10,20,.55) 0%, transparent 45%, rgba(6,10,20,.65) 100%);
}
html[dir="rtl"] .band__scrim { --scrim-dir: left; }

.band__title { font-size: var(--fs-2xl); color: #FFFFFF; max-inline-size: 20ch; }
.band__text  { color: #C9D6E8; max-inline-size: 52ch; margin-block: var(--space-4) var(--space-6); }

/* ---- Asymmetric bleed --------------------------------------------------
   The media column runs off the inline-end edge instead of stopping at the
   container. margin-inline-end flips automatically under RTL, so the image
   bleeds off the right in English and off the left in Arabic.
   ------------------------------------------------------------------------ */
@media (min-width: 62rem) {
  .split--bleed { grid-template-columns: 1fr 1.08fr; }

  /* The distance from the container's content edge to the viewport edge.
     NOT calc(50% - 50vw): that formula assumes the element is a direct child
     of the centred container, but this is a grid item, so 50% resolves
     against the column and overshoots badly.

     --vw is the scrollbar-free viewport width, set from JS. The 100vw
     fallback is only used before that runs, and overshoots by half a
     scrollbar, which body's overflow-x:hidden clips. */
  .split--bleed > .bleed-end {
    margin-inline-end: calc(-1 * max(
      var(--gutter),
      (var(--vw, 100vw) - var(--container)) / 2 + var(--gutter)
    ));
  }
  .split--bleed > .bleed-end .frame {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-inline-end: 0;
  }
}

/* ---- Sticky media ------------------------------------------------------
   Desktop only. Below 62rem the columns stack, and a sticky element in a
   stacked layout just sits there confusingly.
   ------------------------------------------------------------------------ */
@media (min-width: 62rem) {
  .sticky-media {
    position: sticky;
    inset-block-start: 5.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-media { position: static; }
}

/* Tall text column that the sticky media scrolls against */
.scroll-story { display: flex; flex-direction: column; gap: var(--space-8); }
.scroll-story__step { padding-block-end: var(--space-5); border-block-end: 1px solid var(--border); }
.scroll-story__step:last-child { border-block-end: 0; padding-block-end: 0; }

/* ==========================================================================
   8c. Hero photo layer

   Heroes now stack three deep: SVG poster -> photograph -> video, each
   superseding the last as it becomes available. Without the has-video rule
   below, a video would play underneath a static photo and look broken.
   ========================================================================== */
.hero__photo {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 800ms var(--ease-out);
}
.hero__photo.is-loaded { opacity: 1; }
.hero__media.has-photo .hero__poster { opacity: 0; }
.hero__media.has-video .hero__photo { opacity: 0; }

/* ==========================================================================
   8d. View Transitions

   Cross-document morph from a project card to its detail page. Chrome, Edge
   and Safari honour this; Firefox ignores it and performs an ordinary
   navigation, which is a perfectly good outcome.
   ========================================================================== */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 340ms;
  animation-timing-function: cubic-bezier(.22, .72, .28, 1);
}

/* The paired elements. Names must be unique within a document. */
.vt-olaya   { view-transition-name: vt-olaya; }
.vt-diriyah { view-transition-name: vt-diriyah; }
.vt-metro   { view-transition-name: vt-metro; }
.vt-interchange{ view-transition-name: vt-interchange; }
.vt-nakheel    { view-transition-name: vt-nakheel; }
.vt-yasmin     { view-transition-name: vt-yasmin; }
.vt-academy    { view-transition-name: vt-academy; }
.vt-granada    { view-transition-name: vt-granada; }
.vt-stormwater { view-transition-name: vt-stormwater; }

::view-transition-group(vt-olaya),
::view-transition-group(vt-diriyah),
::view-transition-group(vt-metro),
::view-transition-group(vt-interchange),
::view-transition-group(vt-nakheel),
::view-transition-group(vt-yasmin),
::view-transition-group(vt-academy),
::view-transition-group(vt-granada),
::view-transition-group(vt-stormwater) {
  animation-duration: 460ms;
  animation-timing-function: cubic-bezier(.22, .72, .28, 1);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .vt-olaya, .vt-diriyah, .vt-metro,
  .vt-interchange, .vt-nakheel, .vt-yasmin, .vt-academy, .vt-granada, .vt-stormwater { view-transition-name: none; }
}

/* ==========================================================================
   8e. Project map  (Leaflet + OpenStreetMap)

   Leaflet is vendored in /vendor and lazy-loaded by main.js only when .projmap
   is on the page, so the other thirteen pages never fetch 162KB they cannot
   use. The SVG behind the canvas is a fallback for an unreachable tile server.
   ========================================================================== */
.projmap { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 62rem) {
  .projmap { grid-template-columns: 1.45fr 1fr; gap: var(--space-6); }
}

.projmap__map {
  position: relative;
  aspect-ratio: 800 / 620;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-sunk);
  overflow: hidden;
  isolation: isolate;
}
.projmap__fallback,
.projmap__canvas {
  position: absolute;
  inset: 0;
  /* Explicit 100% rather than relying on inset:0 to stretch. Leaflet writes
     position:relative inline onto its container at init, which beats this
     stylesheet — and a relative box with inset:0 has auto height, i.e. zero.
     That silently collapsed the map to 777x0 and threw the markers off screen. */
  inline-size: 100%;
  block-size: 100%;
}
.projmap__fallback { z-index: 0; }
.projmap__canvas  { z-index: 1; }

/* Leaflet ships its own type and colours; pull it back into the design system */
.leaflet-container {
  background: var(--surface-sunk);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
}
.leaflet-container a { color: var(--brand-soft); }

/* OSM tiles are saturated and bright. Mute them in light mode, and invert for
   dark — the standard hue-rotate trick, which turns a light basemap into a
   convincing dark one without a paid tile style. */
.leaflet-tile-pane { filter: saturate(.5) contrast(.96) brightness(1.02); }
[data-theme="dark"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) saturate(.4) brightness(.85) contrast(1.08);
}

/* ---- Markers -----------------------------------------------------------
   Real <button>s inside a Leaflet divIcon, so they are focusable and
   keyboard-operable rather than decorative overlays.
   ------------------------------------------------------------------------ */
.projmap__pinwrap { background: none; border: 0; }
.projmap__pin {
  display: grid;
  place-items: center;
  inline-size: 44px;          /* touch target */
  block-size: 44px;
  padding: 0;
  color: var(--gold-deep);
  background: transparent;
  border: 0;
  cursor: pointer;
}
[data-theme="dark"] .projmap__pin { color: var(--gold-lift); }

.projmap__pin::before {
  content: "";
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px var(--surface), 0 1px 5px rgba(0,0,0,.45);
  transition: transform var(--t-base) var(--ease-spring);
}
.projmap__pin::after {
  content: "";
  position: absolute;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  transform: scale(.5);
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-spring);
}
.projmap__pin:hover::before { transform: scale(1.35); }
.projmap__pin[aria-pressed="true"]::before { transform: scale(1.5); }
.projmap__pin[aria-pressed="true"]::after { opacity: .6; transform: scale(1); }

/* ---- Leaflet chrome ---------------------------------------------------- */
.leaflet-control-zoom a {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
  inline-size: 34px;
  block-size: 34px;
  line-height: 32px;
}
.leaflet-control-zoom a:hover { background: var(--surface-sunk); color: var(--accent); }
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--ink-faint);
  padding: 2px 7px;
}

/* ---- Panel ------------------------------------------------------------- */
.projmap__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.projmap__figure {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-sunk);
}
.projmap__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.projmap__img.is-loaded { opacity: 1; }

.projmap__title { font-size: var(--fs-lg); }
.projmap__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}
.projmap__blurb { font-size: var(--fs-sm); color: var(--ink-soft); }

/* ==========================================================================
   9. Footer
   ========================================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8) var(--space-5);
  background: #070C16;
  color: #B9C8DE;
}

/* Oversized mark bled off the corner. Decorative only — aria-hidden, behind
   the content, and never a pointer target. */
.site-watermark {
  position: absolute;
  inset-block-end: -18%;
  inset-inline-end: -3%;
  inline-size: clamp(190px, 26vw, 360px);
  block-size: auto;
  color: #F2F6FC;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}
html[dir="rtl"] .site-watermark { transform: scaleX(-1); }
.site-footer > .container { position: relative; z-index: 1; }
.site-footer h4 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #F2F6FC;
  margin-block-end: var(--space-4);
}
html[lang="ar"] .site-footer h4 { text-transform: none; letter-spacing: 0; }

.footer-grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
@media (min-width: 64rem) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}

.footer-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;   /* touch target */
  padding-block: var(--space-2);
  font-size: var(--fs-sm);
  color: #B9C8DE;
  transition: color var(--t-fast) var(--ease-out);
}
.footer-link:hover { color: var(--gold-lift); }

.footer-contact { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-contact a, .footer-contact p {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: #B9C8DE;
  transition: color var(--t-fast) var(--ease-out);
}
/* Links get a 44px target; the icon stays top-aligned for wrapped addresses */
.footer-contact a {
  min-block-size: 44px;
  padding-block: var(--space-2);
}
.footer-contact a:hover { color: var(--gold-lift); }
.footer-contact svg {
  inline-size: 1.1rem; block-size: 1.1rem;
  flex: none; color: var(--gold-lift); margin-block-start: .15rem;
}

.socials { display: flex; gap: var(--space-3); margin-block-start: var(--space-5); }
.social-btn {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(242,246,252,.16);
  color: #B9C8DE;
  transition: all var(--t-fast) var(--ease-out);
}
.social-btn:hover {
  color: var(--navy-950);
  background: var(--gold-lift);
  border-color: var(--gold-lift);
}
.social-btn svg { inline-size: 1.1rem; block-size: 1.1rem; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid rgba(242,246,252,.13);
  font-size: var(--fs-xs);
  color: #93A6C0;
}

/* ==========================================================================
   10. Page header (interior pages) + breadcrumbs
   ========================================================================== */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  /* Was #93A6C0 — only 3.1:1 over the hero photography at 12px. */
  color: #CBD8EA;
}
.crumbs a { position: relative; transition: color var(--t-fast) var(--ease-out); }
.crumbs a:hover { color: var(--gold-lift); }

/* Breadcrumbs are inline in a tight hero, so extend the hit area with a
   pseudo-element instead of growing the visual box. */
.crumbs a::after {
  content: "";
  position: absolute;
  inset-block: -12px;
  inset-inline: -8px;
}
.crumbs__sep { opacity: .5; }
html[dir="rtl"] .crumbs__sep { transform: scaleX(-1); display: inline-block; }

/* ==========================================================================
   11. Misc
   ========================================================================== */
/* Credentials bar.
   Was four loose pills flex-started in a 1500px container, which left a dead
   gap on the right and read as debris rather than a designed element. Now one
   bordered bar divided into equal cells, so it spans the full width and the
   division is deliberate.

   The 1px grid gap over a border-coloured background draws the dividers for
   free, and keeps them correct however the cells wrap. */
.badge-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 42rem) { .badge-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .badge-strip { grid-template-columns: repeat(4, 1fr); } }

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-align: start;
  color: var(--ink);
  background: var(--surface);
  border: 0;
  border-radius: 0;
}
.badge svg {
  inline-size: 1.6rem;
  block-size: 1.6rem;
  flex: none;
  color: var(--accent);
}

/* Timeline (About) */
.timeline { position: relative; display: flex; flex-direction: column; gap: var(--space-7); }
.timeline::before {
  content: "";
  position: absolute;
  inset-block: .6rem 0;
  inset-inline-start: 0.5rem;
  inline-size: 2px;
  background: linear-gradient(180deg, var(--accent), transparent);
}
.timeline__item { position: relative; padding-inline-start: var(--space-7); }
.timeline__dot {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .45rem;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}
.timeline__year {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
}

/* ==========================================================================
   Photo layer
   Every illustration is a fallback, not a placeholder: the SVG renders on its
   own, and a real photograph fades in over it once the file exists. Until then
   there is no broken-image icon and no empty box, because the <img> only gets
   a src from JS when the file actually loads.
   ========================================================================== */
.shot__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms var(--ease-out),
              transform 900ms var(--ease-out);
}
.shot__img.is-loaded { opacity: 1; }

/* Fade the illustration out once the photo is up so it cannot ghost through
   a transparent PNG or a still-decoding progressive JPEG. */
.has-img > svg { opacity: 0; transition: opacity 700ms var(--ease-out); }

/* Figure frames — aspect-locked so nothing shifts as media loads */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #0C1526;
  border: 1px solid var(--border);
}
.frame > svg, .frame > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.frame--4x3 { aspect-ratio: 4 / 3; }
.frame--3x4 { aspect-ratio: 3 / 4; }
.frame--16x9 { aspect-ratio: 16 / 9; }
.frame--square { aspect-ratio: 1; }

/* Map embed */
.map-frame {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-sunk);
}
.map-frame iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }