@charset "UTF-8";

/* ==========================================================================
   El-Handasia

   Every colour is a var(--elh-*) fed from content.json, and every tracked
   element reads var(--elh-track*), which resolves to `normal` in Arabic.
   No hex values and no letter-spacing literals belong in this file — that is
   what keeps the design reusable for another company.

   Two rules from the design brief are absolute:
     - border-radius is 0 everywhere,
     - the only shadow on the site is the navigation dropdown.
   ========================================================================== */

:root {
  --font-display: 'Marcellus', 'IBM Plex Sans Arabic', serif;
  --font-body:    'Jost', 'IBM Plex Sans Arabic', sans-serif;

  --wrap:     1280px;
  --gutter:   clamp(20px, 4vw, 48px);
  --section:  clamp(64px, 8vw, 120px);
  --section-tight: clamp(56px, 7vw, 100px);
  --header-h: clamp(74px, 8vw, 92px);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--elh-page);
  color: var(--elh-ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; background: var(--elh-frame); }

a { color: var(--elh-deep); text-decoration: none; }
a:hover { color: var(--elh-gold); }

h1, h2, h3, h4, p, blockquote, figure { margin: 0; }

button { font: inherit; color: inherit; border-radius: 0; }

::selection { background: var(--elh-deep); color: var(--elh-page); }

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

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 500;
  background: var(--elh-deep);
  color: var(--elh-page);
  padding: 14px 20px;
  font-size: 13px;
  letter-spacing: var(--elh-track-tight);
  text-transform: uppercase;
}
.skip:focus { inset-inline-start: 0; color: var(--elh-page); }

@keyframes elhFade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Layout utilities
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section        { padding-block: var(--section); }
.section--tight { padding-block: var(--section-tight); }

.eyebrow {
  font-size: 11px;
  letter-spacing: var(--elh-track-wide);
  text-transform: uppercase;
  margin: 0;
}
.eyebrow--soft   { color: var(--elh-soft); }
.eyebrow--ondark { color: var(--elh-ondark); }

.meta-label {
  font-size: 10.5px;
  letter-spacing: var(--elh-track);
  text-transform: uppercase;
  color: var(--elh-faint);
  margin: 0 0 8px;
}

.section-title {
  font-size: 13.5px;
  letter-spacing: var(--elh-track);
  text-transform: uppercase;
  color: var(--elh-deep);
  margin: 0 0 24px;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 40px);
  color: var(--elh-deep);
}

.heading-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 44px;
}

.rule-link {
  font-size: 11px;
  letter-spacing: var(--elh-track);
  text-transform: uppercase;
  border-bottom: 1px solid var(--elh-line);
  padding-bottom: 4px;
}
.rule-link--ondark {
  display: inline-block;
  margin-top: 36px;
  color: var(--elh-ondark);
  border-bottom-color: rgba(237, 234, 225, 0.4);
}
.rule-link--ondark:hover { color: #fff; }

/* Buttons — 12px uppercase, square, generous target */
.btn {
  display: inline-block;
  font-size: 12px;
  letter-spacing: var(--elh-track-tight);
  text-transform: uppercase;
  padding: 16px 30px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn--solid   { background: var(--elh-deep); color: var(--elh-page); }
.btn--solid:hover { background: var(--elh-ink); color: var(--elh-page); }
.btn--lg      { padding: 18px 34px; flex: 0 0 auto; }
.btn--light   { background: var(--elh-page); color: var(--elh-ink); }
.btn--light:hover { background: #fff; color: var(--elh-ink); }
.btn--ghost   { border-color: rgba(251, 250, 247, 0.5); color: var(--elh-light); }
.btn--ghost:hover { border-color: #fff; color: var(--elh-light); }
.btn--outline { border-color: var(--elh-line); color: var(--elh-deep); }
.btn--outline:hover { border-color: var(--elh-deep); }

/* Photo frames. Fixed ratios prevent layout shift while images load. */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--elh-frame);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
}
.frame--4x3  { aspect-ratio: 4 / 3; }
.frame--3x4  { aspect-ratio: 3 / 4; }
.frame--21x9 { aspect-ratio: 21 / 9; }

.frame > img,
.frame__zoom > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame__zoom {
  width: 100%;
  height: 100%;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}
a:hover .frame__zoom { transform: scale(1.045); }

.frame--zoomable { cursor: zoom-in; }

/* Hairline grids: a 1px gap over a line-coloured bed, so cells are separated
   by rules rather than each carrying its own border. */
.grid-hairline {
  display: grid;
  gap: 1px;
  background: var(--elh-line);
  border: 1px solid var(--elh-line);
}
.grid-hairline--services     { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.grid-hairline--testimonials { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.grid-hairline--stats        { grid-template-columns: repeat(auto-fit,  minmax(min(100%, 200px), 1fr)); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--elh-page);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--elh-line2);
}

.site-header__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 14px);
  flex: 0 1 auto;
  min-width: 0;
}
.brand__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: clamp(34px, 4vw, 44px);
}
.brand__logo img {
  height: 100%;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  background: none;
}
.brand__mark { flex: 0 0 auto; }
.brand__name {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 23px);
  letter-spacing: var(--elh-track-tight);
  color: var(--elh-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  margin-inline-start: auto;
}
.nav__item { position: relative; display: flex; align-items: center; }

.nav__link {
  font-size: 13px;
  letter-spacing: var(--elh-track-tight);
  text-transform: uppercase;
  color: var(--elh-muted);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav__link:hover { color: var(--elh-gold); }
.nav__link.is-active { color: var(--elh-deep); border-bottom-color: var(--elh-deep); }

/* Services is a button, not a link: it opens a menu and navigates nowhere.
   The button element is reset so it renders identically to its neighbours. */
.nav__link--static {
  cursor: default;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  margin: 0;
  font-family: inherit;
  text-align: inherit;
  line-height: inherit;
}
.nav__link--static.is-active { border-bottom-color: var(--elh-deep); }
.nav__caret { font-size: 9px; color: var(--elh-faint); }

.nav__menu {
  position: absolute;
  top: 100%;
  inset-inline-start: -20px;
  padding-top: 18px;   /* bridges the gap so the pointer can travel into it */
  min-width: 320px;
  z-index: 90;
  display: none;
}
.nav__item--drop:hover .nav__menu,
.nav__item--drop:focus-within .nav__menu { display: block; }

.nav__menu-inner {
  background: var(--elh-page);
  border: 1px solid var(--elh-line2);
  box-shadow: 0 20px 48px rgba(22, 33, 27, 0.16);
  padding: 8px 0;
}
.nav__menu-inner a {
  display: block;
  padding: 12px 22px;
  font-size: 14.5px;
  color: var(--elh-muted);
}
.nav__menu-inner a:hover { background: var(--elh-panel); color: var(--elh-deep); }

.lang-toggle {
  border: 1px solid var(--elh-line);
  color: var(--elh-deep);
  font-size: 12px;
  letter-spacing: var(--elh-track-tight);
  padding: 9px 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}
.lang-toggle:hover { border-color: var(--elh-deep); color: var(--elh-deep); }
.lang-toggle--sm { font-size: 11px; padding: 8px 10px; }

.mobile-controls { display: none; margin-inline-start: auto; align-items: center; gap: 10px; }

.menu-button {
  background: var(--elh-deep);
  border: 0;
  color: var(--elh-page);
  font-size: 11px;
  letter-spacing: var(--elh-track-tight);
  padding: 11px 16px;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
}

.mobile-nav {
  border-top: 1px solid var(--elh-line2);
  padding: 8px clamp(16px, 4vw, 48px) 28px;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__row { border-bottom: 1px solid var(--elh-line2); }

.mobile-nav__link {
  font-size: 15px;
  letter-spacing: var(--elh-track-tight);
  text-transform: uppercase;
  color: var(--elh-deep);
  padding: 16px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mobile-nav__toggle {
  width: 100%;
  background: none;
  border: 0;
  text-align: inherit;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  margin: 0;
}
.mobile-nav__caret { font-size: 11px; color: var(--elh-faint); }

.mobile-nav__sub { display: flex; flex-direction: column; padding-bottom: 12px; }
.mobile-nav__sub[hidden] { display: none; }
.mobile-nav__sub a {
  font-size: 15px;
  color: var(--elh-muted);
  padding: 12px 0;
  padding-inline-start: 16px;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Breakpoint. The prototype used 1000px; with six items plus the language
   toggle the header is tight there, so this sits at 1080px as the design
   handoff suggested. Change this one query to move it back. */
@media (max-width: 1079px) {
  .nav { display: none; }
  .mobile-controls { display: flex; }
}
@media (min-width: 1080px) {
  .mobile-nav { display: none !important; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: clamp(520px, 84svh, 880px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--elh-ink);
}

.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero__slide.is-active { opacity: 0.82; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; background: none; }

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 18, 13, 0.45) 0%,
    rgba(10, 18, 13, 0.15) 40%,
    rgba(10, 18, 13, 0.82) 100%);
}

.hero__dots {
  position: absolute;
  bottom: clamp(20px, 3vw, 32px);
  inset-inline-end: var(--gutter);
  display: flex;
  gap: 10px;
  z-index: 3;
}
.hero__dot {
  width: 34px;
  height: 3px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(251, 250, 247, 0.32);
  transition: background 0.4s ease;
  /* The bar is 3px; this keeps the touch target at 44px without changing it. */
  position: relative;
}
.hero__dot::after { content: ""; position: absolute; inset: -20px -4px; }
.hero__dot.is-active { background: rgba(251, 250, 247, 0.95); }

.hero__content {
  position: relative;
  width: 100%;
  padding-bottom: clamp(56px, 7vw, 96px);
  animation: elhFade 0.9s ease both;
}
.hero__content .eyebrow { margin-bottom: 22px; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 5.6vw, 74px);
  line-height: 1.08;
  color: var(--elh-light);
  max-width: 16em;
  text-wrap: balance;
}
.hero__sub {
  font-size: clamp(15px, 1.25vw, 18px);
  color: rgba(251, 250, 247, 0.82);
  max-width: 56ch;
  margin-top: 26px;
  text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */

.intro {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 6vw, 90px);
  align-items: flex-start;
}
.intro__label { flex: 0 0 auto; min-width: 180px; }
.intro__text {
  flex: 1 1 460px;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.2vw, 31px);
  line-height: 1.5;
  color: var(--elh-deep);
  text-wrap: pretty;
}

.band-panel { border-top: 1px solid var(--elh-line2); background: var(--elh-panel); }

.band-deep { background: var(--elh-deep); color: var(--elh-ondark); }
.band-deep__inner {
  max-width: 1000px;
  margin-inline: auto;
  padding: clamp(64px, 8vw, 116px) var(--gutter);
  text-align: center;
}
.band-deep .eyebrow { margin-bottom: 30px; }

.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.45;
  color: var(--elh-light);
  text-wrap: pretty;
}
.pull-quote__author {
  font-size: 12px;
  letter-spacing: var(--elh-track-tight);
  text-transform: uppercase;
  color: var(--elh-soft);
  margin-top: 32px;
}

.service-card {
  background: var(--elh-page);
  padding: 30px 28px 34px;
  display: block;
  transition: background 0.25s ease;
}
.service-card:hover { background: #fff; }
.service-card__num {
  font-size: 11px;
  letter-spacing: var(--elh-track);
  color: var(--elh-faint);
}
.service-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  margin: 14px 0 10px;
  color: var(--elh-deep);
}
.service-card__desc {
  font-size: 14.5px;
  color: var(--elh-muted);
  line-height: 1.65;
  text-wrap: pretty;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.project-grid--wide { gap: clamp(24px, 3vw, 44px); }

.project-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 18px;
}
.project-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--elh-deep);
}
.project-card__year {
  font-size: 11px;
  letter-spacing: var(--elh-track-tight);
  color: var(--elh-faint);
}
.project-card__meta {
  font-size: 12px;
  letter-spacing: var(--elh-track-tight);
  text-transform: uppercase;
  color: var(--elh-soft);
  margin-top: 8px;
}

.cta-closing {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--elh-line2);
  padding-top: clamp(40px, 5vw, 64px);
}
.cta-closing__text { flex: 1 1 420px; }
.cta-closing__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 46px);
  margin-bottom: 16px;
  color: var(--elh-deep);
}
.cta-closing__body {
  font-size: 16px;
  color: var(--elh-muted);
  max-width: 52ch;
  text-wrap: pretty;
}

.cta-panel {
  background: var(--elh-panel);
  border: 1px solid var(--elh-line2);
  padding: clamp(30px, 4vw, 52px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.cta-panel__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--elh-deep);
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   Page and detail scaffolding
   -------------------------------------------------------------------------- */

.page { padding-block: clamp(48px, 6vw, 96px) var(--section); }

.page__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.1;
  margin: 18px 0 20px;
  color: var(--elh-deep);
}
.page__title--narrow { max-width: 18ch; }
.page__title--tight  { max-width: 18ch; margin-bottom: clamp(44px, 5vw, 72px); }

.page__intro {
  font-size: 17px;
  color: var(--elh-muted);
  max-width: 58ch;
  margin-bottom: clamp(44px, 5vw, 72px);
  text-wrap: pretty;
}

.detail-back { padding-block: clamp(32px, 4vw, 56px) 0; }
.back-link {
  font-size: 11px;
  letter-spacing: var(--elh-track);
  text-transform: uppercase;
  color: var(--elh-soft);
}
.back-link:hover { color: var(--elh-deep); }

.detail-head { padding-block: clamp(24px, 3vw, 40px) clamp(40px, 5vw, 64px); }
.detail-head__num {
  font-size: 12px;
  letter-spacing: var(--elh-track);
  color: var(--elh-faint);
  margin-bottom: 16px;
}
.detail-head__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.12;
  color: var(--elh-deep);
  max-width: 20ch;
}

.detail-cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 72px);
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--elh-line);
}
.detail-cols__lead {
  flex: 1 1 340px;
  max-width: 44ch;
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.5;
  color: var(--elh-deep);
  text-wrap: pretty;
}
.detail-cols__body {
  flex: 1 1 420px;
  max-width: 66ch;
  font-size: 16.5px;
  color: var(--elh-muted);
  line-height: 1.75;
  text-wrap: pretty;
}

.detail-section { padding-bottom: clamp(48px, 6vw, 80px); }
.detail-section--last { padding-bottom: clamp(64px, 8vw, 120px); }

/* --------------------------------------------------------------------------
   Services list
   -------------------------------------------------------------------------- */

.service-list { border-top: 1px solid var(--elh-line); }

.service-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 4vw, 56px);
  padding: clamp(26px, 3vw, 38px) 0;
  border-bottom: 1px solid var(--elh-line);
  align-items: flex-start;
  transition: background 0.25s ease;
}
.service-row:hover { background: var(--elh-panel); }
.service-row__num {
  flex: 0 0 auto;
  width: 56px;
  font-size: 12px;
  letter-spacing: var(--elh-track-tight);
  color: var(--elh-faint);
  padding-top: 8px;
}
.service-row__title {
  flex: 1 1 260px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 29px);
  color: var(--elh-deep);
}
.service-row__desc {
  flex: 1 1 380px;
  max-width: 62ch;
  font-size: 15.5px;
  color: var(--elh-muted);
  line-height: 1.7;
  text-wrap: pretty;
}
.service-row__arrow {
  flex: 0 0 auto;
  color: var(--elh-faint);
  font-size: 18px;
  padding-top: 4px;
}

.example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  border: 1px solid var(--elh-line);
  padding: 10px 18px;
  font-size: 14px;
  color: var(--elh-muted);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.pill:hover { border-color: var(--elh-deep); color: var(--elh-deep); }

/* --------------------------------------------------------------------------
   Project detail
   -------------------------------------------------------------------------- */

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 72px);
  margin-top: clamp(26px, 3vw, 42px);
  padding-top: clamp(26px, 3vw, 42px);
  border-top: 1px solid var(--elh-line);
}
.project-meta__cluster {
  flex: 0 0 auto;
  display: flex;
  gap: clamp(28px, 4vw, 48px);
  flex-wrap: wrap;
}
.project-meta__value { font-size: 15px; color: var(--elh-deep); }
.project-meta__summary {
  flex: 1 1 420px;
  max-width: 66ch;
  font-size: 16.5px;
  color: var(--elh-muted);
  line-height: 1.7;
  text-wrap: pretty;
}

.pairs { display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 52px); }
.pair__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(10px, 1.2vw, 18px);
}
.pair__label {
  font-size: 12.5px;
  letter-spacing: var(--elh-track);
  text-transform: uppercase;
  margin-top: 12px;
}
.pair__label--before { color: var(--elh-muted); }
.pair__label--after  { color: var(--elh-deep); }
.pair__caption {
  font-size: 15.5px;
  color: var(--elh-muted);
  margin-top: 16px;
  max-width: 70ch;
  text-wrap: pretty;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.testimonial {
  background: var(--elh-page);
  padding: clamp(24px, 3vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.testimonial__shot {
  flex: 1;
  border: 1px solid var(--elh-line2);
  background: none;
  padding: 0;
  cursor: zoom-in;
  display: block;
  width: 100%;
}
.testimonial__shot img { width: 100%; height: auto; display: block; }
.testimonial__quote {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.55;
  color: var(--elh-deep);
  flex: 1;
  text-wrap: pretty;
}
.testimonial__caption { border-top: 1px solid var(--elh-line2); padding-top: 18px; }
.testimonial__name { font-size: 14px; color: var(--elh-ink); }
.testimonial__role {
  font-size: 11.5px;
  letter-spacing: var(--elh-track-tight);
  text-transform: uppercase;
  color: var(--elh-soft);
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.page--about { padding-bottom: clamp(48px, 6vw, 80px); }

.about__lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.18;
  margin-top: 18px;
  color: var(--elh-deep);
  max-width: 22ch;
  text-wrap: balance;
}
.about__stories {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 72px);
  margin-top: clamp(40px, 5vw, 68px);
}
.about__stories p {
  flex: 1 1 380px;
  max-width: 60ch;
  font-size: 16.5px;
  color: var(--elh-muted);
  line-height: 1.75;
  text-wrap: pretty;
}

.stat { background: var(--elh-page); padding: clamp(26px, 3vw, 38px); }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  color: var(--elh-deep);
  line-height: 1;
}
.stat__label {
  font-size: 11.5px;
  letter-spacing: var(--elh-track-tight);
  text-transform: uppercase;
  color: var(--elh-soft);
  margin-top: 14px;
}

.vision {
  padding-block: clamp(56px, 7vw, 104px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 6vw, 90px);
}
.vision__title {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  color: var(--elh-light);
  max-width: 12ch;
}
.vision__text {
  flex: 1 1 460px;
  max-width: 66ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.75;
  color: rgba(237, 234, 225, 0.85);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 0 clamp(32px, 5vw, 80px);
  border-bottom: 1px solid var(--elh-line);
}
.contact-row { border-top: 1px solid var(--elh-line); padding: 24px 0; }
.contact-row__values {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
/* Numbers, email and URLs stay left-to-right even in Arabic, or the leading
   "+" is relocated to the end of the number. */
.contact-row__value {
  font-size: 18px;
  color: var(--elh-deep);
  unicode-bidi: isolate;
  display: inline-block;
  min-height: 30px;
}
.contact-row__value--static { color: var(--elh-deep); }
a.contact-row__value:hover { color: var(--elh-gold); }

.map {
  margin-top: clamp(48px, 6vw, 84px);
  border: 1px solid var(--elh-line);
  height: min(52vh, 440px);
  overflow: hidden;
}
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.35) contrast(0.95);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--elh-ink); color: rgba(237, 234, 225, 0.72); }

.site-footer__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(52px, 6vw, 84px) var(--gutter) 30px;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(30px, 5vw, 80px);
}
.site-footer__brand { flex: 1 1 300px; }
.site-footer__mark { display: flex; align-items: center; gap: 12px; }
.site-footer__mark img { height: 38px; width: auto; max-width: 170px; object-fit: contain; background: none; }
.site-footer__wordmark {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: var(--elh-track-tight);
  color: var(--elh-ondark);
}
.site-footer__tagline { font-size: 14px; margin-top: 20px; max-width: 38ch; line-height: 1.7; }

.site-footer__col { flex: 0 1 auto; display: flex; flex-direction: column; gap: 12px; }
.site-footer__label {
  font-size: 10.5px;
  letter-spacing: var(--elh-track);
  text-transform: uppercase;
  color: var(--elh-soft);
  margin-bottom: 4px;
}
.site-footer__col a,
.site-footer__col span {
  font-size: 14px;
  color: rgba(237, 234, 225, 0.72);
  unicode-bidi: isolate;
  display: inline-block;
}
.site-footer__col a:hover { color: #fff; }

.site-footer__bottom {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 22px var(--gutter) 40px;
  border-top: 1px solid rgba(237, 234, 225, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}
.site-footer__bottom p { font-size: 12px; color: rgba(237, 234, 225, 0.5); }

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10, 14, 11, 0.94);
  display: flex;
  flex-direction: column;
}
.lightbox[hidden] { display: none; }

.lightbox__bar {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(12px, 2vw, 20px) clamp(16px, 3vw, 28px);
}
.lightbox__count {
  font-size: 12px;
  letter-spacing: 0.18em;   /* Latin digits only; safe in both languages */
  color: rgba(237, 234, 225, 0.65);
}
.lightbox__close {
  background: none;
  border: 1px solid rgba(237, 234, 225, 0.3);
  color: #EDEAE1;
  width: 46px;
  height: 46px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.lightbox__body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 20px);
  padding: 0 clamp(10px, 2vw, 24px) clamp(20px, 3vw, 36px);
  min-height: 0;
}
.lightbox__nav {
  flex: 0 0 auto;
  background: none;
  border: 1px solid rgba(237, 234, 225, 0.25);
  color: #EDEAE1;
  width: clamp(44px, 5vw, 56px);
  height: clamp(44px, 5vw, 56px);
  font-size: 18px;
  cursor: pointer;
}
.lightbox__nav:hover { border-color: rgba(237, 234, 225, 0.6); }

.lightbox__stage {
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: none;
}

/* Arrow glyphs are directional; mirror them in RTL. */
[dir="rtl"] .lightbox__nav { transform: scaleX(-1); }