/* Art House — section styles, ported 1:1 from the design prototype */

/* ============ NAV ============ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.nav__bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 16, 36, 0.72), rgba(10, 16, 36, 0));
  transition: all var(--dur-fast) ease;
}
.nav.is-scrolled .nav__bg {
  background: rgba(16, 26, 56, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(138, 140, 143, 0.3);
}
.nav__progress {
  position: absolute; bottom: 0; inset-inline-start: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  box-shadow: 0 0 8px rgba(138, 140, 143, 0.6);
  transition: width 0.12s linear; z-index: 2; opacity: 0;
}
.nav.is-scrolled .nav__progress { opacity: 1; }
.nav__row {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 4vw;
}
.nav__logo { height: 44px; display: block; transition: height var(--dur-fast) ease; }
.nav.is-scrolled .nav__logo { height: 34px; }
.nav__links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; }
.nav__link {
  color: var(--white); border-bottom: 2px solid transparent; padding-bottom: 4px;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.nav__link:hover { color: var(--gold); border-bottom-color: rgba(138, 140, 143, 0.5); }
.nav__link.is-active { color: var(--gold); border-bottom-color: var(--gold); }
.nav__actions { display: flex; align-items: center; gap: 14px; }
.nav__lang {
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); color: var(--white);
  border-radius: 999px; padding: 6px 14px; font-family: var(--font-accent); font-weight: 600;
  font-size: 12px; letter-spacing: 0.12em; cursor: pointer; min-height: 32px; display: inline-flex; align-items: center;
}
.nav__lang:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.nav__cta { padding: 10px 20px; font-size: 13px; }
.nav__burger {
  display: none; background: transparent; border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--white); border-radius: 4px; width: 44px; height: 44px; cursor: pointer;
  font-size: 18px; line-height: 1; transition: all var(--dur-fast) ease;
}
.nav__burger:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
@media (max-width: 899px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
}

/* mobile menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 200; background: rgba(24, 41, 85, 0.98);
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
}
.menu.is-open { display: flex; animation: ahRise 0.35s ease both; }
.menu__close {
  position: absolute; top: 20px; inset-inline-end: 20px; background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4); color: var(--white); border-radius: 999px;
  width: 44px; height: 44px; cursor: pointer; font-size: 18px; transition: all var(--dur-fast) ease;
}
.menu__close:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.menu__link { color: var(--white); font-size: 24px; font-weight: 700; transition: color var(--dur-fast) ease, transform var(--dur-fast) ease; }
.menu__link:hover { color: var(--gold); transform: scale(1.08); }
.menu__link--cta { color: var(--gold); }

/* ============ HERO ============ */
.hero { position: relative; height: 100vh; min-height: 620px; overflow: hidden; background: var(--navy-hero); }
.hero__scene { position: absolute; inset: 0; z-index: 0; }
.hero__scene svg { width: 100%; height: 100%; display: block; }
/* Uploaded hero photo, standing in for the animated scene. */
.hero__scene picture { display: block; width: 100%; height: 100%; }
.hero__bg { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A photograph is busier than the flat SVG. On desktop the headline already
   sits on the solid white diagonal panel and needs no help. On phones the panel
   is hidden and the text sits in white on a dark gradient, so deepen that
   gradient rather than lightening it — matching the breakpoint used below. */
@media (max-width: 899px) {
  .hero--photo .hero__scrim {
    background: linear-gradient(180deg, rgba(10,16,36,0.22) 0%, rgba(10,16,36,0.46) 34%, rgba(10,16,36,0.82) 56%, rgba(10,16,36,0.97) 100%);
  }
}
.hero__panel {
  position: absolute; inset: 0; z-index: 2; background: var(--white);
  /* gentler bottom than the raw design so the CTAs always clear the diagonal;
     the scroll cue (centre, 50%) still sits over the scene since bottom edge is 54% */
  clip-path: polygon(36% 0, 100% 0, 100% 100%, 54% 100%);
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 2; background: rgba(255, 255, 255, 0.86);
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.hero__shine {
  position: absolute; top: -50%; left: 0; width: 38%; height: 200%; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: overlay; animation: ahShine 7s linear infinite;
}
.hero__content { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; }
/* fixed layout: text panel sits on the RIGHT in both languages (matches the diagonal) */
.hero__content-row {
  width: 100%; padding: 96px 5vw 40px; display: flex; justify-content: flex-start; direction: rtl;
}
.hero__text {
  width: min(44%, 600px); min-width: min(340px, 88vw);
  display: flex; flex-direction: column; gap: 18px; text-align: start;
}
.hero__title {
  font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight: 900; line-height: 1.25;
  color: var(--navy); animation: ahRise 0.9s ease 0.1s both;
}
.hero__tagline {
  font-family: var(--font-accent); font-weight: 600; font-size: clamp(0.8rem, 1.2vw, 1rem);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
  animation: ahRise 0.9s ease 0.3s both;
}
.hero__sub {
  font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 2; color: var(--gray-body);
  max-width: 520px; animation: ahRise 0.9s ease 0.45s both;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; animation: ahRise 0.9s ease 0.6s both; }
.hero__ctas .btn { padding: 15px 34px; font-size: 15px; }
.hero__film-inline {
  background: transparent; border: none; color: var(--navy); font-family: var(--font-body);
  font-weight: 700; font-size: 15px; cursor: pointer; display: none; align-items: center;
  gap: 8px; padding: 15px 8px; min-height: 44px;
}
.hero__film-btn {
  position: absolute; z-index: 5; top: 52%; left: 18%; transform: translate(-50%, -50%);
  width: 104px; height: 104px; border-radius: 50%; background: rgba(24, 41, 85, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.55); backdrop-filter: blur(6px); color: var(--white);
  cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; font-family: var(--font-body); font-size: 12px; font-weight: 600;
  transition: all var(--dur-fast) ease; animation: ahRise 0.9s ease 0.8s both;
}
.hero__film-btn:hover { border-color: var(--gold); background: rgba(24, 41, 85, 0.6); }
.hero__scroll {
  /* centre via auto-margins (NOT translateX) so the ahBob bounce, which animates
     transform, doesn't wipe out the horizontal centring and shift the cue off-centre */
  position: absolute; bottom: 18px; left: 0; right: 0; margin-inline: auto; width: fit-content; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255, 255, 255, 0.92); animation: ahBob 2.4s ease-in-out infinite;
  /* translucent chip keeps the cue readable whether it lands on the scene or the panel */
  padding: 10px 16px 8px; border-radius: 999px;
  background: rgba(10, 16, 36, 0.32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.hero__scroll span { font-size: 11px; letter-spacing: 0.2em; font-family: var(--font-accent); }
/* mid widths (small laptop / landscape tablet): gentler diagonal, narrower text,
   scroll cue moved over the scene so nothing crosses the panel edge */
@media (max-width: 1180px) and (min-width: 900px) {
  .hero__panel { clip-path: polygon(26% 0, 100% 0, 100% 100%, 40% 100%); }
  .hero__text { width: min(52%, 540px); }
  .hero__film-btn { top: 46%; left: 15%; width: 94px; height: 94px; }
}
@media (max-width: 899px) {
  /* nav: drop the wrapping CTA button on phones; language toggle + menu remain */
  .nav__cta { display: none; }

  /* hero: full animated scene + navy gradient + white text, bottom-aligned (no muddy diagonal) */
  .hero__panel { display: none; }
  /* The scene is scaled up and cropped at this width, which lands the
     billboard's caption directly behind the tagline — text over text, only
     half covered by the gradient. The billboard still reads as a billboard
     without its caption, so drop just the caption on phones. */
  .hero__scene svg text { display: none; }
  .hero__shine { display: none; }
  .hero__scrim {
    opacity: 1;
    background: linear-gradient(180deg, rgba(10,16,36,0.1) 0%, rgba(10,16,36,0.32) 34%, rgba(10,16,36,0.74) 56%, rgba(10,16,36,0.96) 100%);
  }
  .hero__content { align-items: flex-end; }
  .hero__content-row { padding: 88px 7vw 96px; }
  .hero__text { width: 100%; min-width: 0; gap: 15px; }
  .hero__title { color: var(--white); font-size: clamp(2rem, 8.4vw, 2.9rem); line-height: 1.18; }
  .hero__sub { color: rgba(255,255,255,0.9); max-width: 100%; line-height: 1.9; }
  .hero__ctas { gap: 12px; margin-top: 6px; }
  .hero__ctas .btn { flex: 1 1 100%; text-align: center; padding: 16px 24px; font-size: 15px; }
  .hero__ctas .btn--primary { background: var(--white); border-color: var(--white); color: var(--navy); }
  .hero__ctas .btn--primary:hover { background: var(--light); border-color: var(--light); color: var(--navy); }
  .hero__ctas .btn--ghost-navy { background: transparent; border-color: rgba(255,255,255,0.6); color: var(--white); }
  .hero__ctas .btn--ghost-navy:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .hero__film-btn { display: none; }
  .hero__film-inline { display: inline-flex; color: var(--white); align-self: flex-start; padding: 12px 4px; }
}

/* film lightbox */
.film {
  position: fixed; inset: 0; z-index: 300; background: rgba(6, 10, 24, 0.92);
  display: none; align-items: center; justify-content: center; padding: 5vw;
}
.film.is-open { display: flex; animation: ahRise 0.3s ease both; }
.film__frame {
  position: relative; width: min(960px, 100%); aspect-ratio: 16 / 9; background: var(--navy-ink);
  border: 1px solid rgba(138, 140, 143, 0.4); border-radius: 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; color: var(--white); overflow: hidden;
}
.film__frame iframe, .film__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }
/* The video's own cover, cached locally, shown only while the player connects.
   filmModal.js clears it on the iframe's load event — it must never be visible
   over the video, and it must not linger once YouTube draws its own thumbnail. */
/* 0 poster, 1 player, 2 close button — never rely on DOM order for this */
.film__poster {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  /* visibility is not interpolatable, so delay it to the end of the fade —
     otherwise the cover snaps away instead of dissolving into the player */
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.film__frame.is-ready .film__poster { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .film__poster { transition: none; } }
.film__title { font-size: 18px; font-weight: 700; }
.film__note { font-size: 13px; color: var(--gray-mute); }
.film__close {
  position: absolute; top: 14px; inset-inline-end: 14px; background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4); color: var(--white); border-radius: 999px;
  width: 44px; height: 44px; cursor: pointer; font-size: 16px; transition: all var(--dur-fast) ease; z-index: 2;
}
.film__close:hover { background: var(--gold); border-color: var(--gold); }

/* ============ POSITIONING ============ */
.pos { position: relative; background: var(--white); overflow: hidden; padding: clamp(70px, 10vw, 130px) var(--pad-x); }
.pos__wedge {
  position: absolute; inset: 0; background: var(--navy);
  clip-path: polygon(0 0, 34% 0, 16% 100%, 0 100%); pointer-events: none;
}
.pos__diag {
  position: absolute; top: -10%; height: 120%; left: 24.5%; width: 3px; background: var(--gold);
  transform-origin: top center; transform: rotate(9.5deg) scaleY(0);
}
html.js .pos__diag.is-in, html.no-js .pos__diag { transform: rotate(9.5deg) scaleY(1); transition: transform 1.5s ease; }
.pos__grid {
  position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 6vw, 80px); align-items: center; max-width: var(--max-w); margin: 0 auto;
  direction: rtl; /* fixed layout: text right, card left (mirrors the wedge) */
}
.pos__text { display: flex; flex-direction: column; gap: 20px; }
.pos__title { font-size: clamp(1.7rem, 3.4vw, 2.7rem); font-weight: 800; line-height: 1.6; color: var(--navy); }
.pos__title-b { color: var(--gold); }
.pos__title span { display: block; }
.pos__title span > span { display: inline-block; }
.pos__body { font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 2.1; color: var(--gray-body); max-width: 560px; }
.pos__meta { display: flex; flex-direction: column; gap: 16px; }
.pos__tagline { font-family: var(--font-latin); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-mute); }
.pos__rule { width: 64px; height: 2px; background: var(--gold); transform: scaleX(0); }
[dir='rtl'] .pos__rule { transform-origin: right center; }
[dir='ltr'] .pos__rule { transform-origin: left center; }
html.js .pos__rule.is-in, html.no-js .pos__rule { transform: scaleX(1); transition: transform 1.5s ease 1.4s; }
.pos__link { font-weight: 700; font-size: 15px; color: var(--navy); display: inline-flex; align-items: center; gap: 8px; transition: color var(--dur-fast) ease; }
.pos__link:hover { color: var(--gold); }
.pos__card {
  background: var(--navy-deep); border: 1px solid rgba(138, 140, 143, 0.35); border-radius: 10px;
  overflow: hidden; box-shadow: 0 24px 60px rgba(16, 28, 61, 0.35); max-width: 460px;
}
.pos__card svg { display: block; width: 100%; }
.pos__card-foot { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pos__card-cap { color: var(--white); font-size: 13px; font-weight: 600; }
.pos__card-tag { color: var(--gold); font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.18em; }
@media (max-width: 899px) {
  /* the navy wedge + diagonal line are a desktop split treatment; on one column they
     sat behind the heading and cut it — drop them so the text reads cleanly */
  .pos__wedge, .pos__diag { display: none; }
  .pos__grid { direction: ltr; grid-template-columns: 1fr; gap: 34px; }
  .pos__title { line-height: 1.4; }
}

/* ============ STATS ============ */
.stats { background: var(--light); }
.stats__inner { display: flex; flex-direction: column; gap: 48px; }
.stats__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.stats__title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: var(--navy); }
.stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.stat {
  background: var(--white); border-radius: 10px; padding: 30px 26px 24px;
  display: flex; flex-direction: column; gap: 10px; border-bottom: 3px solid transparent;
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.stat:hover { transform: translateY(-5px); border-bottom-color: var(--gold); box-shadow: 0 16px 36px rgba(16, 28, 61, 0.12); }
.stat__num { font-size: clamp(2.6rem, 4.5vw, 3.8rem); font-weight: 900; color: var(--navy); line-height: 1; }
.stat__label { font-size: 17px; font-weight: 700; color: var(--navy); }
.stat__desc { font-size: 13px; color: var(--gray-body); line-height: 1.9; }
.stat__src { font-size: 11px; color: var(--gray-mute); }

/* ============ ABOUT ============ */
.about { background: var(--white); }
.about__grid {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(34px, 6vw, 84px); align-items: center;
}
.about__text { display: flex; flex-direction: column; gap: 20px; }
.about__title { font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 800; line-height: 1.5; color: var(--navy); }
.about__body { font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 2.1; color: var(--gray-body); max-width: 560px; }
.about__body2 { font-size: clamp(0.95rem, 1.3vw, 1.05rem); line-height: 2.1; color: var(--gray-body); max-width: 560px; }
.about__cta { margin-top: 6px; font-weight: 700; font-size: 15px; color: var(--navy); display: inline-flex; align-items: center; gap: 8px; transition: color var(--dur-fast) ease; }
.about__cta:hover { color: var(--gold); }
.about__photo {
  position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border);
  box-shadow: 0 26px 64px rgba(16, 28, 61, 0.18); aspect-ratio: 4 / 3; background: var(--navy-deep);
}
.about__photo picture, .about__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about__photo-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--lavender); font-size: 13px; text-align: center; padding: 20px;
  background: repeating-linear-gradient(45deg, var(--navy-deep), var(--navy-deep) 14px, #15234a 14px, #15234a 28px);
}
.about__badge {
  position: absolute; inset-inline-start: 0; bottom: 0; background: var(--navy); color: var(--white);
  padding: 12px 20px; font-size: 13px; font-weight: 700; border-start-end-radius: 10px; z-index: 2;
}

/* ============ MISSION & VISION ============ */
.mv { background: var(--light); }
.mv__inner { display: flex; flex-direction: column; gap: 46px; }
.mv__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.mv__card {
  border-radius: 12px; border-top: 3px solid var(--gold); padding: clamp(28px, 3.4vw, 42px);
  display: flex; flex-direction: column; gap: 16px;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) ease;
}
.mv__card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(16, 28, 61, 0.22); }
.mv__card--light { background: var(--white); box-shadow: var(--shadow-card); }
.mv__card--dark { background: var(--navy); box-shadow: 0 16px 40px rgba(16, 28, 61, 0.18); }
.mv__icon { color: var(--gold); transition: transform 0.5s var(--ease-out); }
.mv__card:hover .mv__icon { transform: rotate(-8deg) scale(1.12); }
.mv__label { font-size: 20px; font-weight: 800; }
.mv__card--light .mv__label { color: var(--navy); }
.mv__card--dark .mv__label { color: var(--white); }
.mv__body { font-size: 15px; line-height: 2.1; }
.mv__card--light .mv__body { color: var(--gray-body); }
.mv__card--dark .mv__body { color: var(--lavender); }
@media (hover: none) { .mv__card:hover { transform: none; box-shadow: var(--shadow-card); } }

/* ============ CEO ============ */
.ceo { background: var(--white); }
.ceo__grid {
  max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 300px) 1fr;
  gap: clamp(32px, 5vw, 72px); align-items: center; justify-items: center;
}
@media (max-width: 899px) { .ceo__grid { grid-template-columns: 1fr; } }
.ceo__card { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ceo__photo {
  position: relative; width: min(260px, 70vw); aspect-ratio: 1 / 1; border-radius: 50%;
  overflow: hidden; border: 3px solid var(--gold); box-shadow: 0 20px 50px rgba(16, 28, 61, 0.2);
  background: var(--navy-deep);
}
.ceo__photo picture, .ceo__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ceo__photo-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--lavender); font-size: 12px; text-align: center; padding: 16px;
}
.ceo__id { text-align: center; }
.ceo__name { font-size: 18px; font-weight: 800; color: var(--navy); }
.ceo__role { font-size: 13px; color: var(--gray-mute); margin-top: 4px; }
.ceo__text { display: flex; flex-direction: column; gap: 22px; }
.ceo__mark { font-family: Georgia, serif; font-size: 60px; line-height: 0.6; color: var(--gold); height: 30px; }
.ceo__quote { font-size: clamp(1.2rem, 2.1vw, 1.7rem); font-weight: 700; line-height: 1.9; color: var(--navy); }
.ceo__sign { font-size: 14px; line-height: 2; color: var(--gray-body); max-width: 620px; }

/* ============ 3D CASE WALL ============ */
.cases-wrap { position: relative; height: auto; }
html.js.wall-3d .cases-wrap { height: calc(100vh + var(--wall-extra, 400px)); }
.cases { background: var(--navy); overflow: hidden; position: relative; display: block; }
html.js.wall-3d .cases { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.cases__head {
  position: relative; z-index: 4; flex: 0 0 auto; background: var(--navy);
  padding: clamp(84px, 11vh, 124px) var(--pad-x) clamp(14px, 2vh, 22px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.cases__title { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; color: var(--white); }
.cases__kicker { font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.22em; color: var(--gold); }
.cases__count { font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.45); white-space: nowrap; }

.wall-stage { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; display: none; }
html.js.wall-3d .wall-stage {
  display: block; perspective: 90vw; perspective-origin: 100% 50%;
  opacity: 0; transform: translateY(70px); transition: opacity 1.2s ease, transform 1.2s ease;
}
html.js.wall-3d .wall-stage.is-in { opacity: 1; transform: translateY(0); }
.wall-panel {
  position: absolute; inset-inline-start: var(--pad-x); top: 50%; transform: translateY(-50%);
  z-index: 2; pointer-events: none; direction: ltr; display: flex; flex-direction: column;
  gap: 20px; max-width: 34%;
}
.wall-panel__label { font-family: var(--font-accent); font-size: 12px; letter-spacing: 0.28em; color: var(--gold); }
.wall-panel__numrow { display: flex; align-items: baseline; gap: 14px; }
.wall-panel__num {
  font-family: var(--font-accent); font-weight: 700; font-size: clamp(4.5rem, 11vw, 10rem);
  line-height: 1; letter-spacing: 0.04em; padding: 0 0.08em; color: transparent;
  -webkit-text-stroke: 1.5px rgba(138, 140, 143, 0.7); paint-order: stroke fill;
}
.wall-panel__of { font-family: var(--font-accent); font-size: 14px; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.4); }
.wall-panel__rule { width: 56px; height: 2px; background: var(--gold); }
.wall-panel__sector { font-family: var(--font-ar); font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 800; color: var(--white); }
.wall-panel__name { font-size: 13px; line-height: 1.9; color: rgba(255, 255, 255, 0.55); }
.wall-panel__hint { margin-top: 8px; font-size: 12px; line-height: 1.8; color: rgba(255, 255, 255, 0.35); }

.wall-list {
  position: absolute; inset-inline: 0; top: 0; display: flex; flex-direction: column;
  align-items: flex-end; gap: clamp(6px, 1vh, 16px);
  padding-inline-end: clamp(44px, 9vw, 150px); padding-inline-start: var(--pad-x);
  padding-top: clamp(20px, 4vh, 60px); direction: ltr; will-change: transform;
  transform-style: preserve-3d; cursor: pointer;
  transform: translateY(0) rotateX(13deg); /* JS drives translateY on scroll */
}
.wall-item {
  background: transparent; border: none; outline: none; padding: 0; margin: 0; cursor: pointer;
  pointer-events: none; -webkit-tap-highlight-color: transparent; font-family: var(--font-ar);
  font-size: clamp(2rem, 5.6vw, 5rem); font-weight: 900; line-height: 1.16; letter-spacing: -0.02em;
  text-align: end; white-space: nowrap; display: block; transform-style: preserve-3d;
}
html[lang='en'] .wall-item { font-family: var(--font-head); letter-spacing: -0.01em; }
.wall-item > span {
  display: inline-block; white-space: nowrap; pointer-events: none;
  transform-style: preserve-3d; transform-origin: right center;
  transform: rotateY(-45deg); color: var(--navy-wall-dim); opacity: 1;
  transition: transform 0.5s ease, color 0.15s ease, opacity 0.25s ease; will-change: transform;
}
.wall-item.is-hover > span { transform: rotateY(-35deg); color: var(--gold); }
.wall-list.has-sel .wall-item > span { transform: rotateY(-114deg); color: var(--navy-wall-dim); opacity: 0; pointer-events: none; }
.wall-list.has-sel .wall-item.is-sel > span { transform: rotateY(0deg); color: var(--white); opacity: 1; }
.wall-list.has-sel.sel-gone .wall-item.is-sel > span { opacity: 0; transition: transform 0.5s ease, color 0.3s ease, opacity 0.2s ease 0.15s; }
.wall-fade {
  position: absolute; inset-inline: 0; bottom: 0; height: clamp(60px, 12vh, 130px);
  background: linear-gradient(180deg, rgba(24, 41, 85, 0) 0%, var(--navy) 88%);
  z-index: 3; pointer-events: none;
}

/* mobile cases carousel */
.cases-carousel {
  position: relative; z-index: 2; display: flex; gap: 14px; overflow-x: auto; padding: 0 var(--pad-x) 12px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
html.js.wall-3d .cases-carousel { display: none; }
.case-card {
  flex: 0 0 78%; scroll-snap-align: start; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(138, 140, 143, 0.35); border-radius: 12px; padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.case-card__sector { color: var(--gold); font-size: 12px; font-weight: 700; }
.case-card__name { color: var(--white); font-size: 22px; font-weight: 900; }
.case-card__btn {
  align-self: flex-start; outline: none; -webkit-tap-highlight-color: transparent;
  background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 999px;
  padding: 10px 20px; font-family: var(--font-body); font-size: 13px; font-weight: 700;
  cursor: pointer; min-height: 44px; transition: all var(--dur-fast) ease;
}
.case-card__btn:hover { background: var(--gold); color: var(--navy); }
@media (min-width: 900px) { .cases-carousel { padding-bottom: 40px; } }

/* fullscreen case focus */
.focus { position: fixed; inset: 0; z-index: 250; background: var(--navy); overflow: hidden; display: none; }
.focus.is-open { display: block; animation: ahFade 0.45s ease 0.15s both; }
.focus__bg { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1s ease; }
.focus__bg.is-on { opacity: 1; }
.focus__bg img { width: 100%; height: 100%; object-fit: cover; }
.focus__grade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 16, 36, 0.72) 0%, rgba(10, 16, 36, 0.45) 55%, rgba(10, 16, 36, 0.78) 100%);
}
.focus__back {
  position: absolute; top: 88px; inset-inline-end: 4vw; z-index: 3; background: rgba(24, 41, 85, 0.5);
  backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.4); color: var(--white);
  border-radius: 999px; padding: 12px 24px; font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-fast) ease; min-height: 44px; white-space: nowrap;
}
.focus__back:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.focus__body {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 0 var(--pad-x) 9vh;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; direction: ltr;
}
.focus__en { font-family: var(--font-accent); font-size: 12px; letter-spacing: 0.22em; color: var(--gold); animation: ahFade 0.6s ease 0.4s both; }
.focus__title { font-size: clamp(2.2rem, 6vw, 4.8rem); font-weight: 900; line-height: 1.3; color: var(--white); will-change: transform; }
.focus__line { max-width: 640px; color: var(--lavender); font-size: 15px; line-height: 2; animation: ahFade 0.7s ease 0.5s both; }
.focus__line strong { color: var(--gold); font-weight: 700; }
.focus__read {
  width: 124px; height: 124px; border-radius: 50%; background: rgba(138, 140, 143, 0.15);
  backdrop-filter: blur(4px); border: 1px solid var(--gold); color: var(--white); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 12px; font-weight: 700; margin-top: 10px;
  animation: ahFade 0.8s ease 0.65s both; transition: all var(--dur-fast) ease;
}
.focus__read:hover { background: var(--gold); color: var(--navy); }

/* case study modal */
.case-modal {
  position: fixed; inset: 0; z-index: 300; background: rgba(6, 10, 24, 0.85);
  display: none; align-items: center; justify-content: center; padding: 4vw;
}
.case-modal.is-open { display: flex; animation: ahRise 0.4s ease both; }
.case-modal__box {
  position: relative; width: min(760px, 100%); max-height: 86vh; overflow-y: auto;
  background: var(--white); border-radius: 12px; padding: clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column; gap: 22px;
}
.case-modal__close {
  position: absolute; top: 16px; inset-inline-end: 16px; background: transparent;
  border: 1px solid var(--border-input); color: var(--navy); border-radius: 999px;
  width: 44px; height: 44px; cursor: pointer; font-size: 16px; transition: all var(--dur-fast) ease;
}
.case-modal__close:hover { background: var(--gold); border-color: var(--gold); }
.case-modal__en { font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.2em; color: var(--gold); }
.case-modal__name { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 900; color: var(--navy); }
.case-modal__sector { font-size: 13px; font-weight: 700; color: var(--gray-mute); }
.case-modal__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.case-modal__cell { display: flex; flex-direction: column; gap: 6px; }
.case-modal__key { font-size: 13px; font-weight: 800; color: var(--gold); }
.case-modal__val { font-size: 14px; line-height: 2; color: var(--gray-body); }
.case-modal__result { background: var(--light); border-radius: 8px; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.case-modal__result-key { font-size: 13px; font-weight: 800; color: var(--navy); }
.case-modal__result-val { font-size: 14px; line-height: 2; color: var(--navy); }
.case-modal__cta { align-self: flex-start; padding: 14px 30px; font-size: 14px; }

/* ============ SOLUTIONS ============ */
.sol { background: var(--white); }
.sol__inner { display: flex; flex-direction: column; gap: 44px; }
.sol__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.sol-card {
  display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border);
  border-bottom: 3px solid transparent; border-radius: 10px; overflow: hidden;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.sol-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(16, 28, 61, 0.14); border-bottom-color: var(--gold); }
/* fixed-ratio media frame: the ONLY clipping surface, so the card body can never be cut */
.sol-card__media {
  position: relative; aspect-ratio: 16 / 10; width: 100%; overflow: hidden;
  background: var(--navy-deep); flex: 0 0 auto;
}
.sol-card__media .ah-img { display: block; width: 100%; height: 100%; }
.sol-card__media img.ah-img, .sol-card__media picture.ah-img img { object-fit: cover; }
.sol-card__media picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.ah-sol:hover .sol-card__media .ah-img { transform: scale(1.07); }
.sol-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.sol-card__title { font-size: 18px; font-weight: 800; color: var(--navy); display: flex; flex-direction: column; gap: 3px; font-family: var(--font-head); }
.sol-card__sub { font-family: var(--font-accent); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--gray-soft); display: block; }
.sol-card__desc { font-size: 13.5px; line-height: 2; color: var(--gray-body); }
.sol-card .ah-arrow { color: var(--gold); margin-block-start: auto; }

/* ============ LOCATIONS (map + list) ============ */
.locs { background: var(--light); }
.locs__inner { display: flex; flex-direction: column; gap: 26px; }
/* .sec-head sets flex-direction:column — override it, or align-items:flex-end
   pushes the title to the inline end (which only *looked* right in RTL). */
.locs__head { display: flex; flex-direction: row; align-items: flex-end;
  justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* segmented Map / List toggle */
.locs__toggle {
  display: inline-flex; padding: 4px; gap: 4px; flex-shrink: 0;
  background: var(--white); border: 1px solid var(--border); border-radius: 999px;
}
.locs__tab {
  border: none; background: transparent; cursor: pointer; border-radius: 999px;
  padding: 9px 22px; font-family: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--gray-body); min-height: 40px;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.locs__tab:hover { color: var(--navy); }
.locs__tab.is-on { background: var(--navy); color: var(--white); }

/* filter bar */
.locs__filters {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px;
}
.locs__field { display: flex; flex-direction: column; gap: 6px; min-width: 168px; }
.locs__field > span { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--gray-mute); }
.locs__field select, .locs__field input {
  font-family: inherit; font-size: 14px; color: var(--navy); background: var(--white);
  border: 1px solid var(--border-input); border-radius: 8px; padding: 10px 12px; min-height: 44px;
}
.locs__field select:focus, .locs__field input:focus { outline: none; border-color: var(--navy); }
.locs__field--search { flex: 1 1 220px; }
.locs__count { margin-inline-start: auto; font-size: 13px; color: var(--gray-mute); font-weight: 600; }

/* views */
.locs__view { display: none; }
.locs__view.is-on { display: block; animation: ahFade .3s ease both; }
.locs__map {
  height: clamp(380px, 52vh, 560px); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); background: var(--lighter);
}

/* list */
.locs__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 20px;
}
.locs__card {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--border); border-bottom: 3px solid transparent; border-radius: 10px;
  overflow: hidden;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.locs__card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(16,28,61,.12); border-bottom-color: var(--gold); }
.locs__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-deep); flex: 0 0 auto; }
.locs__thumb picture { position: absolute; inset: 0; }
.locs__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.locs__status {
  position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 5px 10px; border-radius: 999px;
  background: var(--white); color: var(--navy);
}
.locs__status--available { background: #1F7A3D; color: #fff; }
.locs__status--booked { background: var(--gray-mute); color: #fff; }
.locs__status--soon { background: var(--navy); color: #fff; }
.locs__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.locs__tag { font-family: var(--font-accent); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-soft); }
.locs__name { margin: 0; font-size: 17px; font-weight: 800; color: var(--navy); font-family: var(--font-head); }
.locs__addr { margin: 0; font-size: 13px; color: var(--gray-body); }
.locs__more {
  margin-top: auto; padding: 10px 0 0; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--navy);
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  transition: color var(--dur-fast) ease;
}
.locs__more:hover { color: var(--gold); }
.locs__empty { text-align: center; color: var(--gray-mute); padding: 40px 0; font-size: 15px; }

/* custom DOM markers (never the default MapLibre pin) */
.locs-pin {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 12px 5px 7px;
  box-shadow: 0 4px 14px rgba(10,16,36,.18);
  font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--navy);
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
[dir="rtl"] .locs-pin { padding: 5px 7px 5px 12px; }
.locs-pin:hover { transform: translateY(-2px) scale(1.04); border-color: var(--navy); box-shadow: 0 8px 22px rgba(10,16,36,.26); }
.locs-pin__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--navy); flex: 0 0 auto; }
.locs-pin--pole .locs-pin__dot { background: var(--gold); }
.locs-pin--elevator .locs-pin__dot { background: #1F7A3D; }
.locs-pin__label { white-space: nowrap; max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
.locs-pin--cluster {
  justify-content: center; padding: 0; width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy); color: var(--white); border-color: var(--navy); font-size: 14px; font-weight: 800;
}
.locs-pin--cluster:hover { background: var(--navy-deep); }

/* map chrome, toned down to match the brand.
   NOTE: the OSM/OpenFreeMap credit must stay — the data is ODbL-licensed.
   `compact: true` reduces it to a small (i) that expands on click, which is
   the smallest compliant form. */
.locs__map .maplibregl-ctrl-group {
  border-radius: 8px; box-shadow: 0 2px 10px rgba(10, 16, 36, .16); border: 1px solid var(--border);
}
.locs__map .maplibregl-ctrl-group button { width: 32px; height: 32px; }
.locs__map .maplibregl-ctrl-attrib.maplibregl-compact {
  border-radius: 999px; background: rgba(255, 255, 255, .82); min-height: 22px;
}
.locs__map .maplibregl-ctrl-attrib-button { opacity: .55; transform: scale(.85); }
.locs__map .maplibregl-ctrl-attrib-button:hover { opacity: 1; }
.locs__map .maplibregl-ctrl-attrib-inner { font-size: 10px; }
.locs__map .maplibregl-ctrl-bottom-left { display: none; }  /* MapLibre wordmark */

/* popup */
.locs-pop { width: 232px; }
.locs-pop img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; margin-bottom: 9px; }
.locs-pop__tag { font-family: var(--font-accent); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-soft); }
.locs-pop__status { font-size: 10px; font-weight: 800; margin-inline-start: 6px; color: var(--navy); }
.locs-pop__name { margin: 4px 0 2px; font-size: 15px; font-weight: 800; color: var(--navy); }
.locs-pop__addr, .locs-pop__desc { margin: 2px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--gray-body); }
.maplibregl-popup-content { border-radius: 10px; padding: 12px; font-family: var(--font-body); }

@media (max-width: 720px) {
  .locs__head { flex-direction: column; align-items: stretch; }
  .locs__toggle { align-self: flex-start; }
  .locs__count { margin-inline-start: 0; }
  .locs__field { min-width: 100%; }
  /* Keep the names on phones. Hiding them left a field of anonymous dots that
     told the visitor nothing — and the clustering already thins the pins right
     down at this width, so there is room. Just make them more compact. */
  .locs-pin {
    gap: 5px; padding: 4px 9px 4px 5px;
    font-size: 11px; box-shadow: 0 3px 10px rgba(10,16,36,.2);
  }
  [dir="rtl"] .locs-pin { padding: 4px 5px 4px 9px; }
  .locs-pin__dot { width: 8px; height: 8px; }
  .locs-pin__label { max-width: 112px; }
  .locs-pin--cluster { width: 34px; height: 34px; font-size: 13px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .locs__view.is-on { animation: none; }
  .locs__card:hover, .locs-pin:hover { transform: none; }
}

/* ============ PROCESS ============ */
.proc { background: var(--white); }
.proc__inner { display: flex; flex-direction: column; gap: 48px; }
.proc__track { position: relative; }
.proc__line-bg { position: absolute; top: 26px; inset-inline: 40px; height: 2px; background: var(--border); }
.proc__line {
  position: absolute; top: 26px; inset-inline: 40px; height: 2px; background: var(--gold); transform: scaleX(0);
}
[dir='rtl'] .proc__line { transform-origin: right center; }
[dir='ltr'] .proc__line { transform-origin: left center; }
html.js .proc__line.is-in, html.no-js .proc__line { transform: scaleX(1); transition: transform 2.5s ease; }
.proc__grid { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
@media (max-width: 899px) {
  .proc__grid { grid-template-columns: 1fr; }
  .proc__line-bg, .proc__line { display: none; }
}
.proc-step { display: flex; flex-direction: column; gap: 12px; }
.proc-step__num {
  width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-accent);
  font-weight: 700; font-size: 15px; position: relative;
}
.proc-step--last .proc-step__num { background: var(--gold); color: var(--navy); box-shadow: 0 0 26px rgba(138, 140, 143, 0.5); }
.proc-step__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold); animation: ahPulse 4s ease-out infinite; }
.proc-step__title { font-size: 16px; font-weight: 800; color: var(--navy); font-family: var(--font-head); }
.proc-step__desc { font-size: 13px; line-height: 2; color: var(--gray-body); }

/* ============ WHY ============ */
.why { background: var(--white); border-top: 1px solid var(--border); }
.why__inner { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px; }
.why__list { display: flex; flex-direction: column; }
.why-row {
  display: flex; align-items: flex-start; gap: 20px; padding: 24px 14px;
  border-bottom: 1px solid var(--border); border-inline-start: 3px solid transparent;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, padding var(--dur-fast) ease;
}
.why-row:hover { background: var(--bg-row-hover); border-inline-start-color: var(--gold); padding-inline-start: 24px; }
.why-row svg { flex-shrink: 0; color: var(--gold); }
.why-row__text { display: flex; flex-direction: column; gap: 4px; }
.why-row__title { font-size: 17px; font-weight: 800; color: var(--navy); font-family: var(--font-head); }
.why-row__desc { font-size: 14px; line-height: 2; color: var(--gray-body); }

/* footer phone/email are links but must read as plain footer text */
a.footer__text { text-decoration: none; transition: color var(--dur-fast) ease; }
a.footer__text:hover { color: var(--gold); }

.film__photo, .film__frame picture { display: block; width: 100%; height: 100%; }
.film__photo { object-fit: contain; background: var(--navy-ink); }

/* the unit that follows a stat number ("M" / "مليون") reads as a label, not a
   second number — keeps "4 مليون" on one line at the big display size */
.stat__unit { font-size: 0.44em; font-weight: 800; letter-spacing: 0; }

/* ---- locations detail slide-over ---- */
.locpanel { position: fixed; inset: 0; z-index: 220; }
.locpanel[hidden] { display: none; }
.locpanel__scrim {
  position: absolute; inset: 0; background: rgba(10, 16, 36, .55);
  opacity: 0; transition: opacity var(--dur-mid) ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.locpanel.is-open .locpanel__scrim { opacity: 1; }
.locpanel__sheet {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(460px, 100%); background: var(--white);
  display: flex; flex-direction: column; overflow-y: auto;
  box-shadow: -18px 0 60px rgba(10, 16, 36, .28);
  /* slides in from the inline end, so it mirrors correctly in Arabic */
  transform: translateX(100%);
  transition: transform var(--dur-mid) var(--ease-out);
}
[dir="rtl"] .locpanel__sheet { transform: translateX(-100%); box-shadow: 18px 0 60px rgba(10, 16, 36, .28); }
.locpanel.is-open .locpanel__sheet { transform: translateX(0); }
.locpanel__close {
  position: absolute; top: 14px; inset-inline-end: 14px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgba(10, 16, 36, .55); color: var(--white); border: none; font-size: 15px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background var(--dur-fast) ease;
}
.locpanel__close:hover { background: var(--navy); }
.locpanel__media { flex: 0 0 auto; background: var(--navy-deep); }
.locpanel__hero { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.locpanel__hero[hidden] { display: none; }
.locpanel__thumbs { display: flex; gap: 8px; padding: 10px; overflow-x: auto; scrollbar-width: thin; }
.locpanel__thumbs:empty { display: none; }
.locpanel__thumb {
  flex: 0 0 auto; width: 68px; height: 46px; border-radius: 6px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer; padding: 0; background: none;
  transition: border-color var(--dur-fast) ease, opacity var(--dur-fast) ease;
  opacity: .65;
}
.locpanel__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.locpanel__thumb.is-on, .locpanel__thumb:hover { border-color: var(--white); opacity: 1; }
.locpanel__body { padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.locpanel__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.locpanel__status { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--light); color: var(--navy); }
.locpanel__name { margin: 0; font-size: 24px; font-weight: 900; color: var(--navy); font-family: var(--font-head); }
.locpanel__addr { margin: 0; font-size: 13.5px; color: var(--gray-mute); }
.locpanel__desc { margin: 6px 0 0; font-size: 14.5px; line-height: 1.95; color: var(--gray-body); }
.locpanel__desc:empty, .locpanel__addr:empty { display: none; }
.locpanel__subtitle { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-soft); }
.locpanel__specs { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 16px; }
.locpanel__specs dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.locpanel__specs dt { font-size: 13px; color: var(--gray-mute); }
.locpanel__specs dd { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--navy); text-align: end; }
.locpanel__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.locpanel__actions .btn { flex: 1 1 auto; text-align: center; padding: 13px 20px; font-size: 14px; }
@media (max-width: 560px) {
  .locpanel__sheet { width: 100%; inset-block-start: auto; height: 88vh; border-radius: 16px 16px 0 0; transform: translateY(100%); }
  [dir="rtl"] .locpanel__sheet { transform: translateY(100%); }
  .locpanel.is-open .locpanel__sheet { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .locpanel__sheet, .locpanel__scrim { transition: none; }
}

/* ---- RTL: Latin runs ----
   Latin-only strings carry dir="ltr" so their punctuation renders correctly.
   That also makes `text-align: start` resolve to LEFT, which leaves them
   hanging away from the right-aligned Arabic column. Realign to the page start,
   keeping genuinely centred contexts centred. */
[dir="rtl"] [dir="ltr"] { text-align: right; }
[dir="rtl"] .clients__head [dir="ltr"],
[dir="rtl"] .cta [dir="ltr"],
[dir="rtl"] .film [dir="ltr"],
[dir="rtl"] .hero__scroll [dir="ltr"] { text-align: center; }

/* ============ CLIENTS (logo marquee) ============ */
.clients { background: var(--light); padding: clamp(64px, 8vw, 100px) 0; overflow: hidden; }
.clients__head {
  display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center;
  padding: 0 var(--pad-x); margin-bottom: clamp(30px, 4vw, 46px);
}
.clients__marquee {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.clients__track { display: flex; width: max-content; animation: ahMarquee 64s linear infinite; }
/* RTL mirrors the travel direction so motion always reads "forward" */
[dir="rtl"] .clients__track { animation-name: ahMarqueeRtl; }
.clients__row { display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); margin: 0; padding: 0 clamp(14px, 2vw, 28px); list-style: none; }
.clients__item {
  /* white chip: source logos arrive on white, transparent or coloured grounds —
     the chip normalises all three against the light band */
  flex: 0 0 auto; width: clamp(132px, 13vw, 176px); height: clamp(72px, 7.5vw, 96px);
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--border); border-radius: 10px;
  padding: clamp(10px, 1.2vw, 16px);
  transition: border-color var(--dur-mid) ease, box-shadow var(--dur-mid) ease, transform var(--dur-mid) ease;
}
.clients__item:hover { border-color: var(--gold); box-shadow: 0 12px 28px rgba(16, 28, 61, 0.10); transform: translateY(-3px); }
.clients__logo, .clients__item picture { display: block; width: 100%; height: 100%; }
.clients__logo {
  object-fit: contain;
  /* neutral, on-brand treatment; true colour on hover */
  filter: grayscale(1); opacity: 0.72;
  transition: filter var(--dur-mid) ease, opacity var(--dur-mid) ease, transform var(--dur-mid) ease;
}
.clients__item:hover .clients__logo { filter: grayscale(0); opacity: 1; }
@keyframes ahMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* In RTL the max-content track is already anchored with its RIGHT edge at the
   container's right edge, so translating NEGATIVE pushes it fully off-screen.
   Travel positive instead: +50% is exactly one row, so the loop stays seamless. */
@keyframes ahMarqueeRtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (hover: none) { .clients__logo { filter: grayscale(1); opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) {
  .clients__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .clients__track .clients__row[aria-hidden="true"] { display: none; }
  .clients__row { flex-wrap: wrap; justify-content: center; row-gap: 26px; }
  .clients__marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ============ FINAL CTA ============ */
.cta { position: relative; background: var(--navy); overflow: hidden; padding: clamp(90px, 12vw, 160px) var(--pad-x); text-align: center; }
.cta__glow {
  position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
  width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; border-radius: 50%;
  background: radial-gradient(circle, rgba(138, 140, 143, 0.35) 0%, rgba(138, 140, 143, 0) 65%);
  animation: ahGlow 5s ease-in-out infinite; pointer-events: none;
}
.cta__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cta__title { font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 900; color: var(--white); line-height: 1.5; }
.cta__tagline { font-family: var(--font-latin); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lavender); }
.cta__rule { width: 72px; height: 2px; background: var(--gold); }
.cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px; }
.cta__btns .btn { padding: 16px 38px; font-size: 15px; }

/* ============ CONTACT ============ */
.contact { background: var(--white); }
.contact__inner { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px; }
.contact__intents { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.intent {
  background: var(--white); color: var(--navy); border: 1px solid var(--border-input);
  border-radius: 8px; padding: 20px 18px; font-weight: 700; font-size: 15px; cursor: pointer;
  font-family: var(--font-body); text-align: center; transition: all var(--dur-fast) ease; min-height: 44px;
}
.intent:hover { border-color: var(--gold); }
.intent.is-on { background: var(--navy); color: var(--white); border-color: var(--gold); }
.contact__formwrap { opacity: 0; transform: translateY(20px); max-height: 0; overflow: hidden; }
.contact__formwrap.is-open {
  opacity: 1; transform: none; max-height: 1200px;
  transition: opacity 0.5s ease, transform 0.5s ease, max-height 0.6s ease;
}
html.no-js .contact__formwrap { opacity: 1; transform: none; max-height: none; overflow: visible; }
.contact__form {
  background: var(--bg-form); border: 1px solid var(--border); border-radius: 12px;
  padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 18px;
}
.contact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--navy); }
.field input, .field select, .field textarea {
  border: 1px solid var(--border-input); border-radius: 6px; padding: 12px 14px;
  font-family: var(--font-body); font-size: 14px; color: var(--navy); background: var(--white);
  outline: none; transition: border-color var(--dur-fast) ease; min-height: 44px;
}
.field textarea { resize: vertical; min-height: 0; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }
.field input[dir='ltr'] { font-family: var(--font-latin); }

/* ---- location chip picker (contact form) ---- */
.locpick__lbl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.locpick__lbl em {
  font-style: normal; font-weight: 500; font-size: 12px; color: var(--gold);
}
.locpick__chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-height: 190px; overflow-y: auto; padding: 2px;
  overscroll-behavior: contain;
}
.chip {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-input); background: var(--white); color: var(--navy);
  font-family: var(--font-body); text-align: start;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease,
              color var(--dur-fast) ease;
}
.chip__name { font-size: 13px; font-weight: 700; line-height: 1.25; }
.chip__tag { font-size: 10.5px; font-weight: 500; opacity: .68; line-height: 1.25; }
.chip:hover { border-color: var(--gold); }
.chip.is-on { background: var(--navy); border-color: var(--navy); color: var(--white); }
.chip.is-on .chip__tag { opacity: .8; }

.locpick__foot {
  display: flex; align-items: center; gap: 12px; margin: 0; min-height: 18px;
  font-size: 12px; font-weight: 600;
}
.locpick__count { color: var(--navy); }
.locpick__clear {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--gold); text-decoration: underline;
}
.locpick__clear:hover { color: var(--navy); }

@media (max-width: 640px) {
  .locpick__chips { max-height: 156px; }
}
.field select { cursor: pointer; }
.contact__send { align-self: flex-start; padding: 15px 36px; font-size: 15px; cursor: pointer; font-family: var(--font-body); }
.contact__send[disabled] { opacity: 0.6; cursor: wait; }
.contact__success {
  background: var(--navy); border: 1px solid var(--gold); border-radius: 10px; padding: 34px;
  text-align: center; color: var(--white); font-size: 17px; font-weight: 700; line-height: 2; display: none;
}
.contact__success.is-on { display: block; }
.contact__error { color: #B03030; font-size: 13px; font-weight: 700; display: none; }
.contact__error.is-on { display: block; }
/* honeypot — visually hidden, still focusable by bots */
.hp-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ FOOTER ============ */
.footer { background: var(--navy-deep); color: var(--white); text-align: start; padding: clamp(50px, 7vw, 90px) var(--pad-x) 30px; }
.footer__inner { max-width: var(--max-w); margin: 0 auto; display: flex; flex-direction: column; gap: 44px; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 40px; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col--brand { gap: 16px; }
.footer__logo { height: 52px; width: auto; align-self: flex-start; }
.footer__brandline { font-family: var(--font-latin); font-size: 12px; letter-spacing: 0.1em; color: var(--lavender); }
.footer__key { font-size: 14px; font-weight: 800; color: var(--gold); }
.footer__link { color: var(--lavender); font-size: 13px; display: inline-block; transition: color var(--dur-fast) ease, transform var(--dur-fast) ease; }
[dir='rtl'] .footer__link:hover { color: var(--gold); transform: translateX(-5px); }
[dir='ltr'] .footer__link:hover { color: var(--gold); transform: translateX(5px); }
.footer__text { color: var(--lavender); font-size: 13px; }
.footer__socials { display: flex; gap: 12px; }
.footer__social {
  width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--white);
  transition: all var(--dur-fast) ease;
}
.footer__social:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.footer__lang {
  align-self: flex-start; background: transparent; border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--white); border-radius: 999px; padding: 8px 18px; font-family: var(--font-accent);
  font-weight: 600; font-size: 12px; letter-spacing: 0.12em; cursor: pointer; min-height: 36px;
  transition: all var(--dur-fast) ease; display: inline-flex; align-items: center;
}
.footer__lang:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.footer__base {
  border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 22px; display: flex;
  flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--gray-mute);
}

/* ============ PRELOADER (premium pass) ============ */
/* right-to-left reveal: the navy panel slides off to the left, uncovering the
   hero from right to left and ending over the film/video mask, which then pulses. */
.preloader {
  position: fixed; inset: 0; z-index: 999; background: var(--navy);
  display: flex; align-items: center; justify-content: center; will-change: transform;
  transform: translateX(0);
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.9s;
}
.preloader__mark { position: relative; overflow: hidden; padding: 8px; animation: ahFade 0.5s ease both; }
.preloader__shine {
  position: absolute; top: -50%; left: 0; width: 40%; height: 200%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
  animation: ahShine 1.4s linear infinite;
}
.preloader.is-done { transform: translateX(-100%); visibility: hidden; }
.preloader.is-done .preloader__mark { opacity: 0; transition: opacity 0.3s ease; }
html.no-js .preloader { display: none; }

/* guide pulse on the film mask right after the intro clears it */
.hero__film-btn::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--gold); opacity: 0; pointer-events: none;
}
.hero.is-guiding .hero__film-btn::after { animation: ahGuideRing 1.1s ease-out 0.15s 3; }
.hero.is-guiding .hero__film-inline { animation: ahGuideInline 1s var(--ease-out) 2; }
@keyframes ahGuideRing { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.85); opacity: 0; } }
@keyframes ahGuideInline { 0%,100% { transform: scale(1); } 45% { transform: scale(1.07); } }

@media (prefers-reduced-motion: reduce) {
  .preloader { transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
  .preloader.is-done { opacity: 0; transform: none; }
  .preloader__shine, .hero.is-guiding .hero__film-btn, .hero.is-guiding .hero__film-btn::after, .hero.is-guiding .hero__film-inline { animation: none; }
}

/* ============ WHATSAPP FAB (premium pass) ============ */
.fab {
  position: fixed; bottom: 26px; inset-inline-end: 26px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--navy); border: 1px solid var(--gold); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(16, 28, 61, 0.35);
  opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out), background-color 0.2s ease, color 0.2s ease;
}
.fab.is-on { opacity: 1; transform: none; pointer-events: auto; }
.fab:hover { background: var(--gold); color: var(--navy); }
.fab__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold); animation: ahPulse 3.5s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .fab__ring { animation: none; } }