:root {
  /* monochrome — all blue removed; these now read as charcoal/silver */
  --blue:        #16171A;
  --blue-deep:   #101114;
  --blue-darken: #0B0B0D;
  --blue-glow:   #DDE0E3;

  --onyx:        #0A0A0B;
  --ink:         #050505;
  --ivory:       #F4F1EA;
  --ivory-warm:  #EBE6DA;
  --ivory-edge:  #DED7C4;
  --silver-hi:   #DDE0E3;
  --silver:      #B0B6BC;
  --silver-lo:   #6E747A;
  --silver-deep: #3F4348;
  --silver-ink:  #1F2226;
  /* gold intentionally absent — reserved for the brand book, not the site */

  --rule-iv:     rgba(244, 241, 234, 0.14);
  --rule-iv-s:   rgba(244, 241, 234, 0.06);
  --rule-on:     rgba(10, 10, 11, 0.14);
  --rule-blue:   rgba(244, 241, 234, 0.14);

  --f:  'IBM Plex Sans Arabic', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --fl: 'IBM Plex Sans', 'IBM Plex Sans Arabic', sans-serif;
  --fs: 'IBM Plex Sans', 'IBM Plex Sans Arabic', sans-serif;

  --pad-x: clamp(1.4rem, 5vw, 5rem);
  --pad-y: clamp(5rem, 10vh, 8rem);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; letter-spacing: 0; }
html, body { width: 100%; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--f);
  font-weight: 300;
  font-size: clamp(15.5px, 1.05vw, 17px);
  line-height: 1.7;
  color: var(--ivory);
  background: var(--onyx);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* =========================================================================
   HEADER
   ========================================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--pad-x);
  background: rgba(10, 10, 11, 0.55);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(244, 241, 234, 0.08);
}
.nav-mark {
  width: clamp(120px, 11vw, 160px);
  color: var(--ivory);
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
  list-style: none;
}
.nav-links a {
  font-family: var(--f);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--ivory);
  opacity: 0.78;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: opacity 180ms ease, border-color 180ms ease;
}
.nav-links a:hover { opacity: 1; border-bottom-color: var(--blue-glow); }
.nav-lang {
  font-family: var(--f);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ivory);
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(244, 241, 234, 0.4);
  border-radius: 999px;
  transition: background 180ms ease, color 180ms ease;
}
.nav-lang:hover { background: var(--ivory); color: var(--onyx); }
.nav-burger {
  display: none;
  width: 40px; height: 40px;
  position: relative;
  align-items: center;
  justify-content: center;
}
.nav-burger span {
  position: absolute;
  left: 8px; right: 8px;
  height: 1.5px;
  background: var(--ivory);
  transition: top 240ms ease, transform 240ms ease, opacity 200ms;
  border-radius: 1px;
}
.nav-burger span:nth-child(1) { top: 14px; }
.nav-burger span:nth-child(2) { top: 25px; }
.menu-open .nav-burger span:nth-child(1) { top: 19.5px; transform: rotate(45deg); }
.menu-open .nav-burger span:nth-child(2) { top: 19.5px; transform: rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--blue-deep);
  color: var(--ivory);
  padding: 6rem var(--pad-x) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 280ms ease, transform 280ms ease, visibility 280ms;
}
.menu-open .menu { opacity: 1; visibility: visible; transform: none; }
.menu ul { list-style: none; }
.menu li { border-top: 1px solid rgba(244, 241, 234, 0.18); }
.menu li:last-child { border-bottom: 1px solid rgba(244, 241, 234, 0.18); }
.menu li a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: clamp(1rem, 3vw, 1.4rem) 0;
  font-family: var(--fl);
  font-weight: 200;
  font-size: clamp(2rem, 7vw, 3.6rem);
  line-height: 1;
}
html[dir="rtl"] .menu li a { font-family: var(--f); }
.menu li a:hover { color: var(--silver-hi); }
.menu li a .num {
  font-family: var(--f);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--silver);
}
.menu-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  font-size: 0.85rem;
  color: var(--silver);
  font-weight: 400;
}
.menu-foot button {
  font-family: var(--f);
  font-weight: 500;
  color: var(--ivory);
  border: 1px solid rgba(244, 241, 234, 0.4);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
}

/* =========================================================================
   GROUNDS
   ========================================================================= */
.section {
  position: relative;
  padding: var(--pad-y) var(--pad-x);
  isolation: isolate;
  overflow: hidden;
}
.g-onyx       { background: var(--onyx);       color: var(--ivory); }
.g-ink        { background: var(--ink);        color: var(--ivory); }
.g-blue       { background: var(--blue);       color: var(--ivory); }
.g-blue-deep  { background: var(--blue-deep);  color: var(--ivory); }
/* sections sit on a near-black canvas — content provides the color */

/* decorative pattern utility — IMPACT Brand Patterns (paper variants)
   - Trefoil Stars: 3-pointed peaks, primary brand pattern (echoes IMPACT mountains)
   - Flowing Contours: vertical wavy lines, motion / flow feel
   The "paper" colorway is pre-baked for dark grounds, so no filter tricks needed. */
.deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* =========================================================================
   SECTION HEADS — sized to be safe in Arabic
   ========================================================================= */
.section-head {
  display: grid;
  gap: 0.9rem;
  margin-bottom: clamp(2.4rem, 5vh, 4rem);
  max-width: 70rem;
  position: relative;
  z-index: 1;
}
.section-num {
  font-family: var(--f);
  font-weight: 500;
  font-size: 0.9rem;
  opacity: 0.75;
}
.g-onyx .section-num, .g-ink .section-num, .g-blue .section-num, .g-blue-deep .section-num { opacity: 0.85; }
.section-h {
  font-family: var(--fl);
  font-weight: 200;
  font-size: clamp(1.7rem, 4.6vw, 4.4rem);
  line-height: 1.1;
  max-width: 22ch;
}
html[dir="rtl"] .section-h { font-family: var(--f); line-height: 1.25; }
.section-h .em {
  font-family: var(--fs);
  font-style: italic;
  font-weight: 400;
}
html[dir="rtl"] .section-h .em { font-family: var(--f); font-style: normal; }
.g-onyx .section-h .em, .g-ink .section-h .em,
.g-blue .section-h .em, .g-blue-deep .section-h .em { color: var(--silver-hi); }

/* =========================================================================
   00 — COVER · onyx, like v1
   ========================================================================= */
.cover {
  position: relative;
  min-height: 100svh;
  background: var(--onyx);
  color: var(--ivory);
  display: grid;
  align-items: center;
  justify-items: center;
  text-align: center;
  padding: 8rem 0 8rem;          /* full-width video — no horizontal padding on the section */
  overflow: hidden;
  isolation: isolate;
}
/* Full-bleed video — explicit 100vw × 100% so it covers the entire cover edge-to-edge,
   regardless of RTL/LTR direction or any global max-width constraints. */
.cover-video {
  position: absolute !important;     /* defend against .cover > * cascade */
  top: 0; left: 0;
  width: 100vw !important;           /* defend against global `video { max-width: 100% }` */
  max-width: 100vw !important;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.82;
  background: var(--onyx);          /* no white/placeholder flash before first frame paints */
  filter: saturate(0.95) contrast(1.04);
}
/* Lighter veil so the video reads continuously top-to-bottom (no boxed look) */
.cover::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 10, 11, 0.30) 0%,
    rgba(10, 10, 11, 0.05) 25%,
    rgba(10, 10, 11, 0.05) 75%,
    rgba(10, 10, 11, 0.55) 100%);
  z-index: 1;
}
.cover > *:not(.cover-video):not(.cover-cue) { position: relative; z-index: 2; }
/* MORE generous spacing between cover elements */
.cover-stage {
  display: grid;
  gap: clamp(4rem, 10vh, 7rem);  /* increased from 3-7vh-5rem */
  justify-items: center;
  max-width: 1100px;
  padding: 0 var(--pad-x);
}
.cover-loc {
  font-family: var(--f);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ivory);
  opacity: 0.92;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.cover-loc::before, .cover-loc::after {
  content: '';
  width: 24px; height: 1px;
  background: var(--silver-lo);
  display: inline-block;
}
.cover-mark { width: clamp(280px, 56vw, 720px); color: var(--ivory); }
/* Always show the SVG logo — never replace with Arabic text */
.cover-mark.is-rtl { display: none !important; }
html[dir="rtl"] .cover-mark { display: block; }
.cover-tag {
  font-family: var(--fs);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  color: var(--ivory-warm);
  max-width: 26ch;
  line-height: 1.4;
  margin-bottom: clamp(2rem, 5vh, 4rem);   /* breathing room from "Begin" button */
}
html[dir="rtl"] .cover-tag {
  font-family: var(--f);
  font-style: normal;
  font-weight: 300;
}
.cover-cue {
  position: absolute;
  bottom: clamp(2.5rem, 5vh, 4rem);          /* pushed further down for breathing room */
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--f);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ivory);
  opacity: 0.85;
  display: grid;
  justify-items: center;
  gap: 0.8rem;
}
.cover-cue::after {
  content: '';
  width: 1px; height: 36px;
  background: var(--silver);
  opacity: 0.65;
}

/* =========================================================================
   01 — ORIGIN · onyx ground, Element 4 right-anchored vertical accent
   ========================================================================= */
#origin::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: -12%;
  width: 50%;
  background-image: url('/wp-content/uploads/elements/Asset-4.svg');
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 0.22;
  filter: brightness(0) invert(1);
  -webkit-mask-image: linear-gradient(270deg, black 0%, black 50%, transparent 95%);
          mask-image: linear-gradient(270deg, black 0%, black 50%, transparent 95%);
  z-index: 0;
  pointer-events: none;
}
html[dir="rtl"] #origin::before {
  right: auto; left: -12%;
  background-position: left center;
  -webkit-mask-image: linear-gradient(90deg, black 0%, black 50%, transparent 95%);
          mask-image: linear-gradient(90deg, black 0%, black 50%, transparent 95%);
}

.origin-wrap {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  max-width: 1500px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.origin-figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink);
}
.origin-figure img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.04);
  opacity: 0;
  transition: opacity 1400ms ease;
}
.origin-figure img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .origin-figure img { transition: none; } }
.origin-cap {
  position: absolute;
  bottom: 1.2rem; left: 1.2rem;
  z-index: 2;
  font-family: var(--f);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ivory);
  background: rgba(10, 10, 11, 0.55);
  padding: 0.35rem 0.7rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.origin-text { display: grid; gap: 1.4rem; }
.origin-text .num {
  font-family: var(--f);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--silver-lo);
}
.origin-text .h {
  font-family: var(--fl);
  font-weight: 200;
  font-size: clamp(1.8rem, 4.6vw, 4.4rem);
  line-height: 1.1;
  color: var(--ivory);
}
html[dir="rtl"] .origin-text .h { font-family: var(--f); line-height: 1.25; }
.origin-text .h .em {
  font-family: var(--fs);
  font-style: italic;
  font-weight: 400;
  color: var(--silver-hi);
}
html[dir="rtl"] .origin-text .h .em { font-family: var(--f); font-style: normal; }
.origin-text p {
  color: var(--silver-hi);
  max-width: 56ch;
  font-weight: 300;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.7;
  opacity: 0.9;
}
.origin-text p + p { margin-top: 0.4rem; }

/* =========================================================================
   02 — PRACTICE · ink ground, accordion
   ========================================================================= */
.practice .section-h { color: var(--ivory); }
/* Element 3 · light atmospheric backdrop · zooms in when any accordion tab is open */
.practice::before {
  content: none;                          /* watermark pattern removed — plain black ground */
  position: absolute; inset: 0;
  background-image: url('/wp-content/uploads/elements/Asset-3.svg');
  background-size: 135%;                  /* default subtle zoom */
  background-repeat: no-repeat;
  background-position: 78% 22%;
  opacity: 0.16;                          /* lighter — not competing with content */
  filter: brightness(0) invert(1);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 78% 22%, black 0%, transparent 95%);
          mask-image: radial-gradient(ellipse 70% 70% at 78% 22%, black 0%, transparent 95%);
  z-index: 0;
  pointer-events: none;
  transition: background-size 900ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 600ms ease;
}
/* When user picks a discipline → element zooms in & lifts opacity */
.practice:has(.practice-item.is-active)::before {
  background-size: 200%;
  opacity: 0.24;
}
html[dir="rtl"] .practice::before {
  background-position: 22% 22%;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 22% 22%, black 0%, transparent 95%);
          mask-image: radial-gradient(ellipse 70% 70% at 22% 22%, black 0%, transparent 95%);
}
.practice > * { position: relative; z-index: 1; }

/* Practice — list left, active hero right · click to switch · zoom on accordion via :has() */
.practice-stage {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: stretch;
  margin-top: clamp(2rem, 4vh, 3rem);
  position: relative;
  z-index: 1;
}
@media (max-width: 880px) {
  .practice-stage { grid-template-columns: 1fr; gap: 1.6rem; }
  /* Pattern: size by HEIGHT (not width) so it keeps a consistent size on
     mobile instead of shrinking as the screen narrows. */
  .practice::before {
    background-size: auto clamp(360px, 48vh, 520px);
    background-position: center 6%;
    -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 18%, black 0%, transparent 95%);
            mask-image: radial-gradient(ellipse 90% 55% at 50% 18%, black 0%, transparent 95%);
  }
  html[dir="rtl"] .practice::before {
    background-position: center 6%;
    -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 18%, black 0%, transparent 95%);
            mask-image: radial-gradient(ellipse 90% 55% at 50% 18%, black 0%, transparent 95%);
  }
  .practice:has(.practice-item.is-active)::before {
    background-size: auto clamp(420px, 56vh, 600px);
  }
}

/* LEFT · numbered list of disciplines */
.practice-list-new {
  display: grid;
  align-content: start;
  gap: 0;
}
.practice-item {
  background: none;
  border: 0;
  border-top: 1px solid var(--rule-iv);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: center;
  padding: clamp(1.2rem, 2.4vw, 1.6rem) clamp(0.4rem, 1vw, 0.8rem);
  cursor: pointer;
  text-align: start;
  color: var(--ivory);
  transition: padding-inline-start 320ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 240ms ease, background 240ms ease;
}
.practice-item:last-child { border-bottom: 1px solid var(--rule-iv); }
.practice-item:hover { padding-inline-start: 1.2rem; background: rgba(244,241,234,0.03); }
.practice-item.is-active {
  padding-inline-start: 1.2rem;
  border-top-color: var(--blue-glow);
}
.practice-item.is-active + .practice-item { border-top-color: var(--blue-glow); }
.practice-item:last-child.is-active { border-bottom-color: var(--blue-glow); }

.practice-num {
  font-family: var(--f);
  font-weight: 500;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  color: var(--silver-lo);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  transition: color 240ms ease;
}
.practice-item:hover .practice-num,
.practice-item.is-active .practice-num { color: var(--blue-glow); }

.practice-name {
  font-family: var(--fl);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  line-height: 1.25;
  color: var(--silver-hi);
  transition: color 240ms ease;
}
html[dir="rtl"] .practice-name { font-family: var(--f); line-height: 1.4; }
.practice-item:hover .practice-name,
.practice-item.is-active .practice-name { color: var(--ivory); }
.practice-item.is-active .practice-name { font-weight: 500; }

.practice-arrow {
  width: 18px; height: 18px;
  opacity: 0;
  color: var(--blue-glow);
  transform: translateX(-4px);
  transition: opacity 280ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
html[dir="rtl"] .practice-arrow { transform: translateX(4px) scaleX(-1); }
.practice-item:hover .practice-arrow,
.practice-item.is-active .practice-arrow {
  opacity: 1; transform: translateX(0);
}
html[dir="rtl"] .practice-item:hover .practice-arrow,
html[dir="rtl"] .practice-item.is-active .practice-arrow { transform: translateX(0) scaleX(-1); }

/* RIGHT · active panel */
.practice-canvas {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--rule-iv);
}
.practice-pane {
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.practice-pane.is-active { opacity: 1; pointer-events: auto; }
.practice-pane img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 1500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.practice-pane.is-active img { transform: scale(1); }
.practice-text {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3.4vw, 2.6rem);
  background: linear-gradient(180deg, transparent 0%, rgba(5,5,7,0.20) 25%, rgba(5,5,7,0.88) 100%);
  z-index: 2;
}
.practice-text p {
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  line-height: 1.65;
  max-width: 56ch;
  font-weight: 300;
  color: var(--ivory);
  opacity: 0.92;
}

/* =========================================================================
   03 — SELECTED · deep blue · Element 1 · case T atmospheric
   ========================================================================= */
#selected::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('/wp-content/uploads/elements/Asset-1.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.40;
  filter: brightness(0) invert(1);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, transparent 5%, black 80%);
          mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, transparent 5%, black 80%);
  z-index: 0;
  pointer-events: none;
}

.selected-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.6rem, 1.2vw, 1.2rem);
  margin-top: clamp(2rem, 4vh, 3rem);
  position: relative;
  z-index: 1;
}
.case {
  position: relative;
  overflow: hidden;
  display: block;
  color: var(--ivory);
  background: var(--blue-darken);
  isolation: isolate;
  cursor: pointer;
}
.case-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.case:hover .case-img { transform: scale(1.05); }
.case-text {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: clamp(2.4rem, 5vw, 3.4rem) clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.4rem);
  background: linear-gradient(180deg,
    rgba(10, 10, 11, 0) 0%,
    rgba(10, 10, 11, 0.65) 40%,
    rgba(10, 10, 11, 0.92) 100%);
}
.case-meta {
  font-family: var(--f);
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--ivory);
  opacity: 0.92;
  margin-bottom: 0.6rem;
  display: flex; gap: 1rem; flex-wrap: wrap;
}
.case-name {
  font-family: var(--fl);
  font-weight: 300;
  font-size: clamp(1.35rem, 2.4vw, 2.4rem);
  line-height: 1.15;
  margin-bottom: 0.4rem;
  max-width: 16ch;
}
html[dir="rtl"] .case-name { font-family: var(--f); line-height: 1.25; }
.case-name .em { font-family: var(--fs); font-style: italic; font-weight: 400; color: var(--silver-hi); }
html[dir="rtl"] .case-name .em { font-family: var(--f); font-style: normal; }
.case-scope {
  font-family: var(--f);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--ivory);
  opacity: 0.85;
}
.case-hero { grid-column: span 12; aspect-ratio: 16/9; min-height: 380px; }
.case-a    { grid-column: span 5; aspect-ratio: 5/4; min-height: 320px; }
.case-b    { grid-column: span 7; aspect-ratio: 7/4; min-height: 320px; }
.case-c    { grid-column: span 12; aspect-ratio: 21/9; min-height: 280px; }

/* =========================================================================
   04 — FIELD OPERATIONS · interactive project showcase (distilled from the portfolio)
   ========================================================================= */
.ops2 { margin-top: clamp(2rem, 4vh, 3rem); position: relative; z-index: 1; }

/* tab selector */
.ops2-tabs {
  display: flex;
  border-bottom: 1px solid var(--rule-iv);
  margin-bottom: clamp(1.6rem, 3.5vh, 2.6rem);
}
.ops2-tab {
  --accent: var(--silver-hi);
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: flex-start; gap: 0.55rem;
  text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--silver); padding: 0 0 1rem 0; margin-bottom: -1px;
  transition: color 280ms ease, border-color 280ms ease;
}
/* single merged showcase — all projects use the silver accent on the blue ground */
.ops2-tab + .ops2-tab { padding-left: clamp(0.8rem, 2vw, 1.8rem); }
.ops2-tab-idx { font-family: var(--fl); font-weight: 500; font-size: 0.76rem; color: var(--silver-lo); padding-top: 0.12em; }
.ops2-tab-body { display: grid; gap: 0.18rem; min-width: 0; }
.ops2-tab-name {
  font-family: var(--fl); font-weight: 300; font-size: clamp(0.86rem, 1.1vw, 1.06rem);
  line-height: 1.22; color: var(--silver);
}
html[dir="rtl"] .ops2-tab-name { font-family: var(--f); }
.ops2-tab-type {
  font-family: var(--f); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--silver-lo);
}
.ops2-tab:hover { color: var(--ivory); }
.ops2-tab:hover .ops2-tab-name { color: var(--ivory); }
.ops2-tab.is-active { border-bottom-color: var(--accent); }
.ops2-tab.is-active .ops2-tab-idx,
.ops2-tab.is-active .ops2-tab-name { color: var(--ivory); }
.ops2-tab.is-active .ops2-tab-type { color: var(--accent); }
html[dir="rtl"] .ops2-tab { text-align: right; }

/* panels — one project visible at a time */
.ops2-panel { --accent: var(--silver-hi); display: none; }
.ops2-panel.is-active { display: block; animation: opsfade 560ms cubic-bezier(0.22,1,0.36,1) both; }
@keyframes opsfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ops2-panel.is-active { animation: none; } }

.ops2-main {
  display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(1.6rem, 3.4vw, 3.2rem); align-items: center;
}
.ops2-figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--blue-darken); }
.ops2-figure img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1400ms cubic-bezier(0.22,1,0.36,1);
}
.ops2-figure:hover img { transform: scale(1.04); }
/* wide variant — for landscape group photos: banner on top, text below */
.ops2-figure--wide { aspect-ratio: 16 / 9; }
.ops2-main:has(.ops2-figure--wide) { grid-template-columns: 1fr; gap: clamp(1.2rem, 3vh, 2rem); align-items: start; }
.ops2-main:has(.ops2-figure--wide) .ops2-body { align-content: start; }

.ops2-body { display: grid; gap: clamp(0.65rem, 1.5vh, 1rem); align-content: center; }
.ops2-eyebrow {
  font-family: var(--f); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent);
}
.ops2-name { font-family: var(--fl); font-weight: 200; font-size: clamp(1.7rem, 3.4vw, 3rem); line-height: 1.1; }
html[dir="rtl"] .ops2-name { font-family: var(--f); line-height: 1.28; }
.ops2-name .em { font-family: var(--fs); font-style: italic; font-weight: 400; color: var(--accent); }
html[dir="rtl"] .ops2-name .em { font-family: var(--f); font-style: normal; }
.ops2-venue { font-family: var(--f); font-size: 0.92rem; color: var(--silver); }
.ops2-summary {
  font-family: var(--fl); font-weight: 300; font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.65; color: var(--ivory); max-width: 44ch;
}
html[dir="rtl"] .ops2-summary { font-family: var(--f); line-height: 1.9; }
.ops2-caps { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }
.ops2-caps li {
  font-family: var(--f); font-weight: 400; font-size: 0.76rem; letter-spacing: 0.02em;
  color: var(--silver); padding: 0.42em 0.9em;
  border: 1px solid var(--rule-iv); border-radius: 100px;
}

/* field strip */
.ops2-shots {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.2vw, 1rem);
  margin-top: clamp(1.6rem, 3.4vh, 2.6rem);
  padding-top: clamp(1.4rem, 3vh, 2.2rem);
  border-top: 1px solid var(--rule-iv-s);
  align-items: start;
}
/* every field photo locked to one identical height — no reliance on column width */
.ops2-shot img {
  width: 100%; height: clamp(320px, 30vw, 460px);
  aspect-ratio: auto;
  object-fit: cover; object-position: center;
  display: block; background: var(--blue-darken);
}
.ops2-shot figcaption { font-family: var(--f); font-size: 0.8rem; line-height: 1.45; color: var(--silver-lo); padding-top: 0.6rem; }
/* two-photo gallery (e.g. graduation) — two portrait columns, centered */
.ops2-shots--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
@media (min-width: 901px) {
  .ops2-shots--two .ops2-shot img { height: auto; aspect-ratio: 4 / 5; }
}

@media (max-width: 900px) {
  .ops2-tabs { flex-direction: column; border-bottom: 0; margin-bottom: 1.6rem; }
  .ops2-tab {
    flex: none; border-bottom: 0; border-left: 2px solid var(--rule-iv); margin-bottom: 0;
    padding: 0.7rem 0 0.7rem 1rem; align-items: center;
  }
  .ops2-tab + .ops2-tab { padding-left: 1rem; }
  html[dir="rtl"] .ops2-tab { border-left: 0; border-right: 2px solid var(--rule-iv); padding: 0.7rem 1rem 0.7rem 0; }
  .ops2-tab.is-active { border-left-color: var(--accent); }
  html[dir="rtl"] .ops2-tab.is-active { border-right-color: var(--accent); }
  .ops2-tab-name { white-space: normal; }
  .ops2-main { grid-template-columns: 1fr; gap: 1.3rem; }
  .ops2-figure { aspect-ratio: 4 / 5; max-height: 62vh; }
  .ops2-shots { grid-template-columns: 1fr; gap: 0.85rem; }
  .ops2-shot { display: grid; grid-template-columns: clamp(84px, 26vw, 116px) 1fr; gap: 1rem; align-items: center; }
  .ops2-shot img { aspect-ratio: 1 / 1; height: auto; }
  .ops2-shot figcaption { padding-top: 0; }
}

/* =========================================================================
   05 — TRUST · onyx ground, animated logo marquee
   ========================================================================= */
.trust .section-head { text-align: center; justify-items: center; margin-left: auto; margin-right: auto; }
.trust .section-h { color: var(--ivory); margin: 0 auto; }
.trust .section-num { color: var(--silver-lo); }
/* Element 2 · case O — boosted to 0.32 so the silhouette frames the marquee
   in the gaps between rows, top, and bottom of the section. */
.trust::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('/wp-content/uploads/elements/Asset-2.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.32;
  filter: brightness(0) invert(1);
  mix-blend-mode: screen;
  z-index: 0;
  pointer-events: none;
}
.trust > * { position: relative; z-index: 1; }
/* MARQUEE — continuous logo strip, two rows opposing directions
   Forced to direction: ltr internally so the layout & animation are
   identical regardless of page direction (RTL Arabic vs LTR English). */
.marquee {
  display: grid;
  gap: clamp(0.6rem, 1.2vw, 1rem);
  margin-left: calc(var(--pad-x) * -1);
  margin-right: calc(var(--pad-x) * -1);
  position: relative;
  z-index: 1;
  direction: ltr;
}
.marquee-row {
  overflow: hidden;
  width: 100%;
  position: relative;
  direction: ltr;
}
.marquee-row::before, .marquee-row::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(60px, 8vw, 120px);
  z-index: 2;
  pointer-events: none;
}
.marquee-row::before { left: 0;  background: linear-gradient(90deg, var(--onyx) 0%, transparent 100%); }
.marquee-row::after  { right: 0; background: linear-gradient(270deg, var(--onyx) 0%, transparent 100%); }
.marquee-track {
  display: flex;
  flex-direction: row;
  width: max-content;
  direction: ltr;
  animation: marquee-scroll 80s linear infinite;
  will-change: transform;
}
.marquee-row.reverse .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

.brand-cell {
  flex: 0 0 auto;
  width: clamp(160px, 16vw, 220px);
  margin-right: clamp(0.5rem, 1vw, 0.9rem);
  background: var(--ivory);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.8rem, 2vw, 1.4rem);
  border: 1px solid rgba(244, 241, 234, 0.10);
  border-radius: 4px;
  overflow: hidden;
  transition: background 240ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms ease;
}
.brand-cell:hover { background: #fff; border-color: var(--blue-glow); transform: translateY(-2px); }
.brand-cell img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: none;                 /* logos full color, always */
  opacity: 1;
  transition: transform 280ms ease;
}
.brand-cell:hover img { transform: scale(1.04); }

/* =========================================================================
   05 — REACH · onyx with single blue accent
   ========================================================================= */
.reach { padding-top: clamp(6rem, 14vh, 10rem); padding-bottom: clamp(5rem, 10vh, 8rem); }
/* Element 1 · brandbook-cover recipe · positioned on the OPPOSITE SIDE from
   text. Headline + channels live on visual LEFT, so the element sits on
   visual RIGHT in LTR (and visual LEFT in RTL where text moves to right). */
.reach-pattern {
  position: absolute;
  inset: 0;
  background-image: url('/wp-content/uploads/elements/Asset-1.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.60;
  filter: brightness(0) invert(1);
  mix-blend-mode: screen;
  /* LTR: text on left → element opaque on RIGHT (physical right), fades to
     transparent toward the LEFT before reaching the headline. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, black 70%, black 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, black 70%, black 100%);
  z-index: 0;
  pointer-events: none;
}
/* RTL: text is on the visual right (physical right) → element on visual LEFT */
html[dir="rtl"] .reach-pattern {
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, transparent 38%, black 70%, black 100%);
          mask-image: linear-gradient(270deg, transparent 0%, transparent 38%, black 70%, black 100%);
}
.reach-stage {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 5vh, 3.5rem);
  max-width: 1300px;
}
.reach .num {
  font-family: var(--f);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--blue-glow);
  opacity: 0.85;
}
.reach-h {
  font-family: var(--fl);
  font-weight: 200;
  font-size: clamp(2rem, 6.4vw, 6rem);
  line-height: 1.05;
  color: var(--ivory);
  max-width: 16ch;
}
html[dir="rtl"] .reach-h { font-family: var(--f); line-height: 1.2; }
.reach-h .em { font-family: var(--fs); font-style: italic; font-weight: 400; color: var(--blue-glow); }
html[dir="rtl"] .reach-h .em { font-family: var(--f); font-style: normal; color: var(--blue-glow); }

.reach-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
  border-top: 1px solid var(--rule-iv);
  padding-top: clamp(1.6rem, 3vh, 2.4rem);
  max-width: 880px;
}
.reach-channel { display: grid; gap: 0.4rem; }
.reach-channel .label {
  font-family: var(--f);
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--silver);
  opacity: 0.85;
}
.reach-channel .value {
  font-family: var(--fl);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--ivory);
}
html[dir="rtl"] .reach-channel .value { font-family: var(--f); }
.reach-channel a.value {
  display: inline-block;
  width: max-content;
  border-bottom: 1px solid var(--rule-iv);
  padding-bottom: 1px;
  transition: color 200ms ease, border-color 200ms ease;
}
.reach-channel a.value:hover { color: var(--blue-glow); border-color: var(--blue-glow); }

.reach-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(3rem, 6vh, 5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule-iv);
  color: var(--silver-lo);
  font-size: 0.85rem;
  font-weight: 400;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* =========================================================================
   LANG SWAP + REVEAL
   ========================================================================= */
[data-ar] { display: none; }
html[dir="rtl"] [data-en] { display: none; }
html[dir="rtl"] [data-ar] { display: inline; }
html[dir="rtl"] [data-ar="block"] { display: block; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 800ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   MOBILE
   ========================================================================= */
@media (max-width: 980px) {
  .nav-links, .nav-lang { display: none; }
  .nav-burger { display: flex; }

  .origin-wrap { grid-template-columns: 1fr; gap: 2rem; }
  .origin-figure { aspect-ratio: 4 / 5; max-height: 70svh; }

  .discipline-summary { padding: 1.1rem 1.2rem; gap: 0.8rem; }
  .discipline-detail-grid {
    grid-template-columns: 1fr;
    padding: 0 1.2rem 1.4rem;
    padding-inline-start: 1.2rem;
  }
  .discipline-detail-img { aspect-ratio: 16/9; }

  .selected-gallery { gap: 0.6rem; }
  .case-hero, .case-a, .case-b, .case-c {
    grid-column: span 12;
    aspect-ratio: 4/5;
    min-height: 0;
  }

  /* mobile marquee — single row, slower speed, smaller cells */
  .marquee-row.reverse { display: none; }
  .marquee-track { animation-duration: 50s; }
  .brand-cell { width: 150px; }
}
/* iOS Safari renders clamp(...vw...) differently than desktop responsive simulators —
   below 720px we use plain px so the layout is identical on every device.            */
@media (max-width: 720px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  .section { max-width: 100vw; box-sizing: border-box; padding-left: 18px; padding-right: 18px; }

  .section-h,
  .origin-text .h {
    font-size: 22px;
    line-height: 1.3;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none;
  }
  .reach-h {
    font-size: 26px;
    line-height: 1.2;
    max-width: 100%;
  }
  .section-num { font-size: 13px; }
  .reach .num { font-size: 13px; }
  html[dir="rtl"] .section-h,
  html[dir="rtl"] .origin-text .h,
  html[dir="rtl"] .reach-h { line-height: 1.55; }

  .trust .section-head { padding: 0; max-width: 100%; }
  .trust .section-h { font-size: 22px; max-width: 100%; }

  .brand-cell { width: 140px; padding: 14px; }
  .marquee { gap: 0.5rem; }

  .cover { padding-top: 7rem; padding-bottom: 7rem; }
  .cover-tag { font-size: 17px; }

  .nav { padding-left: 16px; padding-right: 16px; }
  .nav-mark { width: 130px; }
}
@media (max-width: 420px) {
  .section-h,
  .origin-text .h,
  .reach-h,
  .trust .section-h { font-size: 19px; line-height: 1.35; }
  html[dir="rtl"] .section-h,
  html[dir="rtl"] .origin-text .h,
  html[dir="rtl"] .reach-h,
  html[dir="rtl"] .trust .section-h { line-height: 1.6; }
  .brand-cell { width: 130px; padding: 12px; }
  .cover-tag { font-size: 15px; }
}


/* ===== Works listing + detail pages ===== */
.work-listing, .detail { padding-top: clamp(6.5rem, 13vh, 9.5rem); }
.work-lede { font-family: var(--fl); font-weight: 300; font-size: clamp(1rem,1.4vw,1.18rem); color: var(--silver); max-width: 48ch; margin-top: 0.5rem; }
html[dir="rtl"] .work-lede { font-family: var(--f); }
.work-filters { display:flex; flex-wrap:wrap; gap:0.6rem; margin: clamp(1.6rem,4vh,2.6rem) 0 clamp(1.6rem,4vh,2.4rem); position:relative; z-index:1; }
.work-filter { font-family: var(--f); font-weight:500; font-size:0.8rem; letter-spacing:0.02em; color: var(--silver); background:none; border:1px solid var(--rule-iv); border-radius:100px; padding:0.5em 1.15em; cursor:pointer; transition: color 220ms ease, background 220ms ease, border-color 220ms ease; }
.work-filter:hover { color: var(--ivory); border-color: var(--silver); }
.work-filter.is-active { background: var(--ivory); color: var(--onyx); border-color: var(--ivory); }
.work-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem,2vw,1.6rem); position:relative; z-index:1; }
.work-card { display:flex; flex-direction:column; background: linear-gradient(180deg, rgba(244,241,234,0.022), rgba(244,241,234,0)); border:1px solid var(--rule-iv); overflow:hidden; color: var(--ivory); text-decoration:none; transition: border-color 260ms ease, transform 260ms ease; }
.work-card:hover { border-color: var(--silver); transform: translateY(-3px); }
.work-card-img { aspect-ratio: 4/3; overflow:hidden; background: var(--ink); }
.work-card-img img { width:100%; height:100%; object-fit:cover; display:block; transition: transform 1200ms cubic-bezier(0.22,1,0.36,1); }
.work-card:hover .work-card-img img { transform: scale(1.05); }
.work-card-body { padding: clamp(1.1rem,1.6vw,1.5rem); display:grid; gap:0.5rem; align-content:start; flex:1; }
.work-card-meta { font-family: var(--f); font-weight:500; font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; color: var(--silver-lo); }
.work-card-title { font-family: var(--fl); font-weight:300; font-size: clamp(1.15rem,1.8vw,1.5rem); line-height:1.16; }
html[dir="rtl"] .work-card-title { font-family: var(--f); line-height:1.3; }
.work-card-title .em { font-style: italic; color: var(--silver-hi); }
html[dir="rtl"] .work-card-title .em { font-style: normal; }
.work-card-sum { font-family: var(--f); font-size:0.88rem; line-height:1.55; color: var(--silver); }
.work-card-link { font-family: var(--f); font-weight:500; font-size:0.82rem; color: var(--silver-hi); margin-top:auto; padding-top:0.5rem; }
.work-card:hover .work-card-link { color: var(--ivory); }
/* detail */
.detail-back { display:inline-block; font-family:var(--f); font-weight:500; font-size:0.84rem; color:var(--silver); text-decoration:none; margin-bottom: clamp(1.6rem,4vh,2.6rem); position:relative; z-index:1; }
.detail-back:hover { color: var(--ivory); }
html[dir="rtl"] .detail-back .arr { display:inline-block; transform: scaleX(-1); }
.detail .ops2-main { align-items: start; }
.detail .ops2-name { font-size: clamp(2rem, 4.6vw, 3.6rem); }
.detail .ops2-shots { margin-top: clamp(2rem,4.5vh,3.2rem); }
@media (min-width:901px) and (max-width:1180px){ .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:900px){ .work-grid { grid-template-columns: 1fr; } }
/* compact footer for work pages */
.work-foot { padding: clamp(2.5rem,6vh,4rem) var(--pad-x); border-top:1px solid var(--rule-iv); display:flex; flex-wrap:wrap; gap:0.8rem 1.6rem; justify-content:space-between; align-items:center; font-family:var(--f); font-size:0.86rem; color:var(--silver); background:var(--onyx); }
.work-foot a { color:var(--silver-hi); text-decoration:none; }
.work-foot a:hover { color:var(--ivory); }