:root {
  /* Brand palette */
  --brand-blue: #2f2a92;
  --brand-blue-hover: #3832b8;
  /* Site tokens */
  --ink: #0a0a0f;
  --ink-soft: #33333c;
  --muted: #5d5d66;
  --soft: #f5f5f7;
  --paper: #ffffff;
  --line: #e4e4eb;
  --success: #126b5c;
  --success-bg: #e8f4f1;
  --danger: #9a2820;
  --danger-bg: #fbeceb;
  --danger-line: #f0c8c4;
  --disabled-bg: #f1f1f4;
  --max: 1120px;
  --radius: 8px;
  --control-radius: 6px;
  --shadow-card: 0 8px 24px rgba(10, 10, 15, 0.05);
  --shadow-hover: 0 16px 32px rgba(10, 10, 15, 0.08);
  --shadow-cta: 0 8px 24px rgba(47, 42, 146, 0.28);
  /* Motion law: one easing family, three durations. Anything animated
     uses these; anything longer must be a deliberate set piece. */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 600ms;
  /* GA-inspired dark surfaces */
  --hero-bg: #0f0f1a;
  --card-dark: #14141f;
  color-scheme: light;
  font-family: "El Messiri", "Avenir Next", "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
}

html[lang="ar"] body {
  font-family: "Cairo", "29LT Bukra", "HSN Shahd", Tahoma, Arial, sans-serif;
}

img {
  display: block;
  max-width: 100%;
  /* Dimension attributes reserve layout; CSS decides the rendered size. */
  height: auto;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea {
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 100;
  transform: translateY(-160%);
  border-radius: var(--control-radius);
  background: var(--brand-blue);
  color: var(--paper);
  padding: 8px 12px;
  text-decoration: none;
  font-weight: 700;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

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

html[lang="en"] [data-lang="ar"],
html[lang="ar"] [data-lang="en"] {
  display: none !important;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

/* Scrolled state: the bar condenses and lifts a hair off the page. */
.site-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(10, 10, 15, 0.06);
}

.header-inner,
.section-inner,
.footer-inner {
  width: calc(100% - 32px);
  max-width: var(--max);
  margin: 0 auto;
}

.header-inner {
  min-height: 80px;
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
  transition: min-height var(--dur-base) var(--ease-out);
}

@media (min-width: 881px) {
  .site-header.is-scrolled .header-inner {
    min-height: 64px;
  }
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
}

.brand-mark {
  height: 34px;
  width: auto;
  flex: none;
}

/* Typeset wordmark beside the mark: crisp at any size, with room to breathe.
   "Institute" picks up the brand blue to echo the mark. */
.brand-word {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.brand-line-accent {
  color: var(--brand-blue);
}

html[lang="ar"] .brand-word {
  font-family: "Cairo", Tahoma, sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  margin-inline-start: auto;
}

/* Ledger numerals inside nav links: hidden in the desktop row, shown
   in the mobile menu panel where each link becomes a ruled entry. */
.nav-index {
  display: none;
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: -0.01em;
  color: var(--brand-blue);
}

/* Nav links: quiet uppercase micro-type with an underline indicator that
   wipes in on hover and marks the current page. No pill, no shout. */
.main-nav a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  font-family: "Barlow", "El Messiri", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  padding: 10px 12px;
  white-space: nowrap;
}

/* With Trainers published the menu has six items; tighten the row between
   the hamburger breakpoint and 1080px so "Training Courses" stays on one line. */
@media (min-width: 881px) and (max-width: 1080px) {
  .main-nav a { padding-inline: 8px; }
}

html[lang="ar"] .main-nav a {
  font-family: "Cairo", Tahoma, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
}

.main-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  bottom: 3px;
  height: 2px;
  background: var(--brand-blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 160ms ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--ink);
}

.main-nav a[aria-current="page"] {
  color: var(--brand-blue);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-inline-start: 24px;
  border-inline-start: 1px solid var(--line);
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: "Cairo", "El Messiri", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 12px;
}

/* In AR mode the toggle reads "English": set it in the Latin display voice. */
html[lang="ar"] .lang-toggle {
  font-family: "Barlow", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
  color: var(--brand-blue);
}

/* The panel's closing action; hidden in the desktop nav row, where the
   header stays calm wayfinding. Registration lives where intent forms:
   hero, course cards, closing bands, and the mobile menu's last row. */
.menu-cta {
  display: none;
}

/* Disclosure toggle for the mobile menu: two lines that morph to an X. */
.menu-toggle {
  display: none;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.menu-toggle-line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--dur-base) var(--ease-out);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-line:first-of-type {
  transform: translateY(4.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-line + .menu-toggle-line {
  transform: translateY(-4.5px) rotate(-45deg);
}

/* While the menu is open the page behind it must not scroll. */
html.menu-locked {
  overflow: hidden;
}

.hero {
  background: var(--hero-bg);
  border-bottom: none;
  /* .hero-grid carries the band's 88px rhythm; the generic section
     padding would stack on top of it. */
  padding: 0;
  /* The photo plate bleeds past the container to the viewport edge. */
  overflow-x: clip;
}

/* The brand-blue focus ring vanishes on the dark bands; switch the ring to
   paper there (the halo offset keeps it readable on the blue hover fills). */
.hero :is(a, button):focus-visible,
.page-title :is(a, button):focus-visible,
.voices :is(a, button):focus-visible,
.statement-band :is(a, button):focus-visible,
.site-footer :is(a, button):focus-visible {
  outline-color: var(--paper);
}

.hero .eyebrow,
.page-title .eyebrow {
  color: rgba(255, 255, 255, 0.5);
}

.hero h1,
.page-title h1 {
  color: var(--paper);
}

.hero .lead,
.page-title .lead {
  color: rgba(255, 255, 255, 0.75);
}

.hero .button,
.page-title .button {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--paper);
  background: transparent;
}

.hero .button.primary,
.page-title .button.primary {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: var(--paper);
}

.hero .button:hover,
.hero .button:focus-visible,
.page-title .button:hover,
.page-title .button:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  transform: translateY(-1px);
}

.hero .button.primary:hover,
.hero .button.primary:focus-visible,
.page-title .button.primary:hover,
.page-title .button.primary:focus-visible {
  background: var(--brand-blue-hover);
  border-color: var(--brand-blue-hover);
  box-shadow: var(--shadow-cta);
}

.hero-grid {
  width: calc(100% - 32px);
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  align-items: center;
  gap: 64px;
  padding: 88px 0;
}

.hero-copy {
  max-width: 680px;
}

/* The signal spine (blue rule and its arrowhead) was removed entirely. */

.eyebrow {
  margin: 0 0 16px;
  color: var(--brand-blue);
  font-family: "Barlow", "El Messiri", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

html[lang="ar"] .eyebrow,
html[lang="ar"] .card-kicker {
  font-family: "Cairo", Tahoma, sans-serif;
  text-transform: none;
  letter-spacing: 0;
}

/* Cairo runs small at Latin micro-label sizes; compensate. */
html[lang="ar"] .eyebrow {
  font-size: 0.9rem;
}

html[lang="ar"] .card-kicker {
  font-size: 0.92rem;
}

h1,
h2,
h3,
p {
  margin-top: 0;
  overflow-wrap: break-word;
}

h1 {
  margin-bottom: 16px;
  font-family: "Barlow", "Galderglynn Titling", "El Messiri", sans-serif;
  font-size: clamp(2.5rem, 4.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-transform: uppercase;
}

h2 {
  margin-bottom: 16px;
  font-family: "Barlow", "Galderglynn Titling", "El Messiri", sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 {
  font-family: "Cairo", "29LT Bukra", Tahoma, sans-serif;
  font-weight: 800;
  letter-spacing: 0;
}

/* Arabic needs taller leading than the Latin display setting: Cairo's
   diacritics and ascenders collide at 1.06 the moment a headline wraps. */
html[lang="ar"] h1,
html[lang="ar"] h2 {
  line-height: 1.3;
}

html[lang="ar"] h3 {
  line-height: 1.4;
}

h3 {
  margin-bottom: 8px;
  font-family: "Barlow", "El Messiri", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.lead {
  color: var(--ink-soft);
  font-size: 1.15rem;
  max-width: 62ch;
}

.hero-actions,
.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1.5px solid var(--brand-blue);
  border-radius: var(--control-radius);
  padding: 12px 24px;
  color: var(--brand-blue);
  background: var(--paper);
  text-decoration: none;
  font-family: "Barlow", "El Messiri", sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.button.primary {
  background: var(--brand-blue);
  color: var(--paper);
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta);
}

.button.primary:hover,
.button.primary:focus-visible {
  background: var(--brand-blue-hover);
  border-color: var(--brand-blue-hover);
}

.button:active {
  transform: translateY(0);
}

.button[aria-disabled="true"],
.button:disabled,
button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
  transform: none;
  box-shadow: none;
}

/* Photo placeholder: dark panel with brand radial glow.
   Swapped for real photography once client supplies images. */
.hero-photo {
  justify-self: end;
  align-self: stretch;
  min-height: 400px;
  width: min(100%, 520px);
  background: var(--card-dark);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 25%, rgba(47, 42, 146, 0.7) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(47, 42, 146, 0.3) 0%, transparent 45%);
}

.hero-photo-label {
  position: relative;
  z-index: 1;
  padding: 24px;
  font-family: "Barlow", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

html[lang="ar"] .hero-photo-label {
  font-family: "Cairo", Tahoma, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.8rem;
}

/* Real hero photography fills the same plate as the placeholder; the brand
   glow is for the empty state only, so it's dropped once an image is set. */
.hero-photo.has-image::before {
  display: none;
}

.hero-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The hero leads with the value proposition, so it earns a touch more
   size than an inner-page title, plus a hairline frame on the panel. */
.hero h1 {
  font-size: clamp(2.6rem, 5vw, 4rem);
}

.hero-photo {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* On wide screens the photo owns its half: it runs to the viewport edge,
   square on the outer side, keeping its radius toward the copy. */
@media (min-width: 881px) {
  .hero-photo,
  html[dir="rtl"] .hero-photo {
    /* width:auto lets justify-self:stretch absorb the negative end margin,
       growing the plate to the viewport edge. */
    width: auto;
    justify-self: stretch;
    margin-inline-end: -16px;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
}

@media (min-width: 1153px) {
  .hero-photo {
    margin-inline-end: calc((1120px - 100vw) / 2);
  }
}

/* Hero entrance: a brief single rise as the page settles, staggered
   top to bottom. Fully suppressed under reduced-motion. */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes menu-drop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes menu-item {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > .eyebrow,
  .hero-copy > h1,
  .hero-copy > .lead,
  .hero-copy > .hero-actions,
  .hero-photo,
  .page-title .eyebrow,
  .page-title h1,
  .page-title .lead {
    animation: hero-rise 640ms var(--ease-out) backwards;
  }

  .hero-copy > h1,
  .page-title h1 {
    animation-delay: 80ms;
  }

  .hero-copy > .lead,
  .page-title .lead {
    animation-delay: 160ms;
  }

  .hero-copy > .hero-actions {
    animation-delay: 240ms;
  }

  .hero-photo {
    animation-delay: 160ms;
    animation-duration: 760ms;
  }
}

/* The one moment of full conviction. Blue fills the space; the institution speaks. */
.statement-band {
  background: var(--brand-blue);
  padding: 88px 0;
}

.statement {
  color: var(--paper);
  font-family: "Barlow", "Galderglynn Titling", sans-serif;
  font-size: clamp(2rem, 3.4vw, 2.85rem);
  font-weight: 800;
  line-height: 1.12;
  max-width: 820px;
  margin: 0;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}

html[lang="ar"] .statement {
  font-family: "Cairo", "29LT Bukra", Tahoma, sans-serif;
  letter-spacing: 0;
  line-height: 1.3;
}

.page-title {
  position: relative;
  padding: clamp(72px, 11vw, 116px) 0 clamp(52px, 8vw, 88px);
  background: var(--hero-bg);
  overflow: hidden;
}

/* Photo-backed page hero: real imagery under a brand-tinted dark wash. The
   dark side sits under the text (left in LTR, right in RTL) so the headline
   stays sharp while the image breathes on the open side. */
.page-title.has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--page-image);
  background-size: cover;
  background-position: center;
  /* Banners render monochrome under the brand wash, so any client photo
     lands on-brand without art direction. */
  filter: grayscale(1);
  z-index: 0;
}

.page-title.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(15, 15, 26, 0.96) 0%,
    rgba(15, 15, 26, 0.9) 52%,
    rgba(28, 24, 80, 0.45) 100%
  );
}

html[dir="rtl"] .page-title.has-image::after {
  background: linear-gradient(
    270deg,
    rgba(15, 15, 26, 0.96) 0%,
    rgba(15, 15, 26, 0.9) 52%,
    rgba(28, 24, 80, 0.45) 100%
  );
}

/* Keep the headline inside the dense half of the wash, EN and AR. */
.page-title h1 {
  max-width: 720px;
}

.page-title.has-image .section-inner {
  position: relative;
  z-index: 2;
}

section {
  padding: 64px 0;
}

.section-muted {
  background: var(--soft);
}

.section-head {
  max-width: 760px;
  margin-bottom: 48px;
}

.section-head p {
  color: var(--muted);
  margin-bottom: 0;
}

/* Inner pages (those with a page-title) get ruled, editorial section
   heads to match the home sections. Home keeps its own rhythm. */
body:has(.page-title) .section-head {
  max-width: none;
  border-top: 2px solid var(--ink);
  padding-top: 24px;
}

body:has(.page-title) .section-head p {
  max-width: 640px;
}

/* A lone CTA row ties to its copy instead of floating a full grid-gap away. */
.section-head:has(+ .section-actions) {
  margin-bottom: 32px;
}

.grid {
  display: grid;
  gap: 24px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Ledger entries under rules need more row air than boxed cards. */
.grid.three:has(.service-card) {
  row-gap: 48px;
}

.card {
  min-height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* Only cards that ARE links lift; static cards must not fake affordance. */
a.card:hover {
  border-color: rgba(47, 42, 146, 0.22);
  box-shadow: var(--shadow-hover);
}

/* Numbered program index: dark-filled wayfinding cards, GA-style.
   Solid fill, no border theater. Brand blue fill on hover. */
.index-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  text-decoration: none;
  color: var(--paper);
  background: var(--card-dark);
  border-color: transparent;
  box-shadow: none;
}

.index-num {
  display: block;
  color: #7b76e0;
  font-family: "Barlow", sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}

.index-card h3 {
  color: var(--paper);
}

.index-card p {
  color: rgba(255, 255, 255, 0.58);
}

.index-card:hover,
.index-card:focus-visible {
  background: var(--brand-blue);
  border-color: transparent;
  box-shadow: none;
  transform: translateY(-2px);
}

.index-card:hover h3,
.index-card:focus-visible h3 {
  color: var(--paper);
}

.index-card:hover p,
.index-card:focus-visible p {
  color: rgba(255, 255, 255, 0.8);
}

.index-card:hover .index-num,
.index-card:focus-visible .index-num {
  color: rgba(255, 255, 255, 0.6);
}

.index-card:hover .index-go,
.index-card:focus-visible .index-go {
  color: var(--paper);
}

.index-card h3 {
  margin: 8px 0 0;
}

.index-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.7);
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html[lang="ar"] .index-go {
  font-family: "Cairo", Tahoma, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.95rem;
}

/* Wayfinding arrow: shared by index-go and card-link, nudges on hover. */
.index-go::after,
.card-link::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'/%3E%3Cpath%20d='m13%206%206%206-6%206'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'/%3E%3Cpath%20d='m13%206%206%206-6%206'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease-out);
}

html[dir="rtl"] .index-go::after,
html[dir="rtl"] .card-link::after {
  transform: scaleX(-1);
}

.index-card:hover .index-go::after,
.index-card:focus-visible .index-go::after,
.card-link:hover::after,
.card-link:focus-visible::after {
  transform: translateX(4px);
}

html[dir="rtl"] .index-card:hover .index-go::after,
html[dir="rtl"] .index-card:focus-visible .index-go::after,
html[dir="rtl"] .card-link:hover::after,
html[dir="rtl"] .card-link:focus-visible::after {
  transform: scaleX(-1) translateX(4px);
}

.card p:last-child,
.text-block p:last-child {
  margin-bottom: 0;
}

.card-kicker {
  display: inline-flex;
  margin-bottom: 16px;
  color: var(--brand-blue);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Service card: an editorial entry under a ledger rule. The big brand
   numeral leads; the line icon is a quiet accent. No box, no shadow. */
.service-card {
  display: flex;
  flex-direction: column;
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 24px 0 0;
  transition: border-color 160ms ease;
}

.service-card:hover {
  border-top-color: var(--brand-blue);
  box-shadow: none;
  transform: none;
}

.service-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.service-num {
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 2.6vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brand-blue);
}

.service-icon {
  display: inline-grid;
  place-items: center;
  color: var(--brand-blue);
}

.service-icon svg {
  width: 24px;
  height: 24px;
}

.service-card h3 {
  font-size: 1.2rem;
}

.profile-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}

.text-block {
  max-width: 760px;
}

/* About's background lead sits beside a tall scope ledger; editorial weight
   keeps the pairing balanced instead of leaving a void under a short line. */
.section-muted .grid.two .lead {
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--ink);
}

.text-block p,
.card p,
.contact-list {
  color: var(--muted);
}

.contact-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.contact-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.contact-list li:last-child {
  border-bottom: 0;
}

/* Numbered scope ledger: a brand numeral against each line under a rule. */
.index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.index-list li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.index-list-num {
  flex: none;
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--brand-blue);
}

.status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--success);
  background: var(--success-bg);
  font-family: "Barlow", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[lang="ar"] .status {
  font-family: "Cairo", Tahoma, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
}

.status.upcoming {
  color: var(--brand-blue);
  background: #eeeefb;
}

.status.previous {
  color: var(--muted);
  background: var(--disabled-bg);
}

/* Profile entry: a ruled ledger row, sibling of service-card and
   course-card. Portrait plate on top, numbered body beneath. */
.profile-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 2px solid var(--ink);
  padding: 20px 0 0;
}

.profile-num {
  display: block;
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--brand-blue);
  margin-bottom: 8px;
}

.profile-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

.profile-role {
  margin: 0 0 8px;
  color: var(--muted);
  font-family: "Barlow", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[lang="ar"] .profile-role {
  font-family: "Cairo", Tahoma, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.88rem;
}

.profile-bio {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(256px, 0.8fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: start;
}

.contact-section,
#inquiry {
  scroll-margin-top: 96px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field {
  display: grid;
  gap: 8px;
}

.field.full {
  grid-column: 1 / -1;
}

.field[hidden] {
  display: none;
}

label {
  color: var(--ink);
  font-weight: 700;
  font-size: 0.94rem;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--paper);
  color: var(--ink);
  padding: 12px;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #c6c6d2;
}

/* Selects drop the OS chrome for the system's own voice: a single
   brand-blue chevron on the inline end. The open list stays native,
   which is the right behavior on every platform. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 40px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232f2a92'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}

html[dir="rtl"] select {
  background-position: left 12px center;
}

textarea {
  min-height: 144px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-blue);
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  color: var(--muted);
  background: var(--disabled-bg);
}

.form-note {
  color: var(--muted);
  font-size: 0.92rem;
}

/* The contact form is the page's action object: a flat ledger entry under
   a brand-blue rule, not a floating rounded panel. */
.contact-grid form.card {
  border: 1px solid var(--line);
  border-top: 2px solid var(--brand-blue);
  border-radius: 0;
  box-shadow: none;
}

/* Align the intro column's first baseline with the form's first label. */
.contact-grid .text-block {
  padding-block-start: 24px;
}

.site-footer {
  border-top: 2px solid var(--brand-blue);
  background: var(--ink);
  color: var(--paper);
}

/* Beneath the action: one quiet hairline block carrying the address and
   the legal line. No boxes, no labels. */
.footer-meta {
  margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px 0 0;
}

.footer-address {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.94rem;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 6px 0 0;
}

.footer-copy {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
}

html[lang="ar"] .footer-copy {
  font-size: 0.9rem;
}

/* The sign-off: the acronym at monument scale, carved tone-on-tone into
   the band and clipped by the page's bottom edge. Felt, not read. */
.footer-monument {
  overflow: hidden;
  height: 0.44em;
  margin-top: 16px;
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-size: clamp(9rem, 32vw, 29rem);
  line-height: 0.74;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.06);
  user-select: none;
  pointer-events: none;
}

html[dir="rtl"] .hero-photo {
  justify-self: start;
}

html[lang="ar"] .button {
  letter-spacing: 0;
  font-family: "Cairo", Tahoma, sans-serif;
  text-transform: none;
  font-size: 0.95rem;
}

html[dir="rtl"] .main-nav,
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .section-actions {
  direction: rtl;
}

::selection {
  background: rgba(47, 42, 146, 0.16);
}

/* Honest empty-state portrait: a reserved roster slot, not a broken
   profile. Dark brand tile carrying the SDI arrow watermark, a brand
   glow, a slot number, and a quiet status tag. The same visual family
   as the hero panel, so the placeholder reads as deliberate. Swapped
   for a real portrait the moment SDI supplies one. */
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: var(--card-dark);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

.portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 72% 20%, rgba(47, 42, 146, 0.62) 0%, transparent 58%),
    radial-gradient(ellipse at 10% 94%, rgba(47, 42, 146, 0.28) 0%, transparent 52%);
}

.portrait::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 62%;
  aspect-ratio: 1;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("/assets/img/logo-sdi-mark.png") center / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.11;
}

.portrait-num {
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.35);
}

.portrait-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px;
  font-family: "Barlow", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

html[lang="ar"] .portrait-tag {
  letter-spacing: 0;
  font-family: "Cairo", Tahoma, sans-serif;
  font-size: 0.8rem;
  text-transform: none;
}

.profile-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.profile-body {
  display: block;
}

/* Card-level wayfinding link: the lighter sibling of the solid button,
   for in-card actions that should not shout louder than the card. */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  min-height: 44px;
  color: var(--brand-blue);
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}

html[lang="ar"] .card-link {
  letter-spacing: 0;
  font-family: "Cairo", Tahoma, sans-serif;
  font-size: 0.9rem;
}

.card-link:hover,
.card-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Course card: an editorial entry under a ledger rule. The rule carries
   status (brand blue for active), the title leads, meta sits at the foot. */
.course-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 24px 0 0;
}

.course-card--active {
  border-top-color: var(--brand-blue);
}

.course-card .status {
  align-self: flex-start;
  /* Pull the title toward its pill so they group as one unit. */
  margin-bottom: -8px;
}

.course-card h3 {
  font-size: 1.35rem;
  font-weight: 800;
}

.course-meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
}

.course-card .card-link {
  margin-top: 2px;
}

/* Real course imagery sits above the ledger entry: a 16:10 plate framed
   by the hairline so it reads as part of the editorial card, not a banner. */
.course-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}

/* Proof band: a ledger of oversized figures. The number is the graphic,
   the unit ("+") lifts in brand blue, thin rules divide the row.
   Placeholder values, swapped for confirmed numbers. */
.proof {
  background: var(--paper);
  border-block: 1px solid var(--line);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.proof-item {
  padding-inline: 32px;
}

.proof-item:first-child {
  padding-inline-start: 0;
}

.proof-item + .proof-item {
  border-inline-start: 1px solid var(--line);
}

.proof-num {
  margin: 0;
  display: flex;
  align-items: flex-start;
  /* Numerals are always left-to-right, so the unit stays on the right. */
  direction: ltr;
  font-family: "Barlow", sans-serif;
  font-size: clamp(3rem, 5.6vw, 4.75rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
}

html[dir="rtl"] .proof-num {
  justify-content: flex-end;
}

.proof-suffix {
  margin-inline-start: 4px;
  font-size: 0.4em;
  font-weight: 800;
  color: var(--brand-blue);
}

.proof-label {
  margin: 16px 0 0;
  color: var(--muted);
  font-family: "Barlow", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html[lang="ar"] .proof-label {
  letter-spacing: 0;
  text-transform: none;
  font-family: "Cairo", Tahoma, sans-serif;
  font-size: 0.85rem;
}

.proof-note {
  margin: 32px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Approach: one full-width ledger rule with three oversized numerals
   hanging beneath it, so the method reads as a path from need to
   capability, not a generic three-up. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  border-top: 2px solid var(--ink);
  padding-top: 32px;
}

.step-num {
  display: block;
  margin-bottom: 16px;
  font-family: "Barlow", sans-serif;
  font-size: clamp(2.75rem, 4vw, 3.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brand-blue);
}

.step h3 {
  margin-bottom: 8px;
}

.step p {
  margin: 0;
  color: var(--muted);
}

/* Voices: a single dark pull-quote. Sentence case and lighter weight so
   it reads human, not shouted. Placeholder quote and attribution. */
.voices {
  background: var(--hero-bg);
}

.voices .eyebrow {
  color: rgba(255, 255, 255, 0.5);
}

.quote {
  position: relative;
  isolation: isolate;
  max-width: 960px;
  margin: 0 0 32px;
  color: var(--paper);
  font-family: "Barlow", sans-serif;
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.015em;
}

html[lang="ar"] .quote {
  font-family: "Cairo", Tahoma, sans-serif;
  letter-spacing: 0;
  line-height: 1.45;
}

/* Oversized quotation mark sitting behind the words as a graphic anchor. */
.quote::before {
  content: "\201C";
  position: absolute;
  z-index: -1;
  top: -0.3em;
  inset-inline-start: -0.04em;
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-size: 11rem;
  line-height: 1;
  color: #5b56c4;
  pointer-events: none;
}

html[dir="rtl"] .quote::before {
  content: "\201D";
}

.quote-attr {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
}

.quote-attr strong {
  display: block;
  color: var(--paper);
  font-weight: 700;
}

/* Reveal on scroll: content rises in once as it enters. Active only when
   JS marks <html> reveal-ready and motion is allowed; without JS or under
   reduced-motion the elements are simply visible. Opacity holds on
   .is-visible so the entrance animation never blocks hover transforms. */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready :is(.section-head, .card, .profile-card, .proof-item, .step, .statement, .quote, .text-block) {
    opacity: 0;
  }

  html.reveal-ready :is(.section-head, .card, .profile-card, .proof-item, .step, .statement, .quote, .text-block).is-visible {
    opacity: 1;
    animation: reveal-rise var(--dur-slow) var(--ease-out) backwards;
  }

  /* Ledgers tick across instead of landing as one slab: proof figures,
     card grids, and steps cascade by column position, so every row
     sweeps in the same direction. DOM order mirrors RTL for free. */
  .proof-item:nth-child(2).is-visible,
  .step:nth-child(2).is-visible,
  .grid.two > :nth-child(2n).is-visible,
  .grid.three > :nth-child(3n + 2).is-visible,
  .grid.four > :nth-child(4n + 2).is-visible {
    animation-delay: 60ms;
  }

  .proof-item:nth-child(3).is-visible,
  .step:nth-child(3).is-visible,
  .grid.three > :nth-child(3n).is-visible,
  .grid.four > :nth-child(4n + 3).is-visible {
    animation-delay: 120ms;
  }

  .proof-item:nth-child(4).is-visible,
  .grid.four > :nth-child(4n).is-visible {
    animation-delay: 180ms;
  }

  @keyframes reveal-rise {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 1140px) {
  .grid.three,
  .grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  /* One compact row: brand, then actions + disclosure toggle. The nav
     becomes a ledger panel that drops from the header. */
  .header-inner {
    min-height: 64px;
    justify-content: space-between;
  }

  .nav-actions {
    border-inline-start: 0;
    padding-inline-start: 0;
    gap: 8px;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px 16px 16px;
    background: var(--paper);
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-hover);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
  }

  .site-header.menu-open .main-nav {
    display: flex;
  }

  .main-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 4px;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
    white-space: nowrap;
  }

  html[lang="ar"] .main-nav a {
    font-size: 1.1rem;
  }

  .main-nav a:last-child {
    border-bottom: 0;
  }

  .main-nav a.menu-cta {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    min-height: 48px;
    border-bottom: 0;
    border-radius: var(--control-radius);
    background: var(--brand-blue);
    color: var(--paper);
    font-family: "Barlow", sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  html[lang="ar"] .main-nav a.menu-cta {
    font-family: "Cairo", Tahoma, sans-serif;
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.95rem;
  }

  .main-nav a.menu-cta:hover,
  .main-nav a.menu-cta:focus-visible {
    background: var(--brand-blue-hover);
    color: var(--paper);
  }

  /* The desktop underline indicator has no place in the panel; the
     numeral and ink color carry the current-page state instead. */
  .main-nav a::after {
    display: none;
  }

  .main-nav a[aria-current="page"] {
    color: var(--ink);
  }

  .nav-index {
    display: inline-block;
  }

  @media (prefers-reduced-motion: no-preference) {
    .site-header.menu-open .main-nav {
      animation: menu-drop var(--dur-base) var(--ease-out);
    }

    .site-header.menu-open .main-nav a {
      animation: menu-item 300ms var(--ease-out) backwards;
    }

    .site-header.menu-open .main-nav a:nth-child(2) {
      animation-delay: 30ms;
    }

    .site-header.menu-open .main-nav a:nth-child(3) {
      animation-delay: 60ms;
    }

    .site-header.menu-open .main-nav a:nth-child(4) {
      animation-delay: 90ms;
    }

    .site-header.menu-open .main-nav a:nth-child(5) {
      animation-delay: 120ms;
    }

    .site-header.menu-open .main-nav a:nth-child(6) {
      animation-delay: 150ms;
    }

    .site-header.menu-open .main-nav a:nth-child(7) {
      animation-delay: 180ms;
    }
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 56px 0;
  }

  .hero-photo {
    justify-self: start;
    width: 100%;
    min-height: 240px;
    align-self: auto;
    border-radius: var(--radius);
  }

  .grid.two,
  .steps,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  /* Stacked steps keep the ledger: each step becomes a ruled row. */
  .steps {
    gap: 32px;
  }

  .step + .step {
    border-top: 1px solid var(--line);
    padding-top: 24px;
  }

  .contact-grid .text-block {
    padding-block-start: 0;
  }

  .proof-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }

  .proof-item,
  .proof-item:first-child {
    padding-inline: 0;
  }

  .proof-item + .proof-item {
    border-inline-start: 0;
  }
}

@media (max-width: 640px) {
  .grid.three,
  .grid.four {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .header-inner,
  .section-inner,
  .footer-inner,
  .hero-grid {
    width: calc(100% - 24px);
    max-width: var(--max);
  }

  /* Tighten the lockup and actions so brand + actions share row one
     (they wrap gracefully back to stacked rows below ~360px). */
  .header-inner {
    column-gap: 16px;
  }

  .brand-mark {
    height: 30px;
  }

  .brand-word {
    font-size: 0.68rem;
  }

  html[lang="ar"] .brand-word {
    font-size: 0.85rem;
  }

  .nav-actions {
    gap: 8px;
  }

  .lang-toggle {
    min-width: 0;
    padding: 10px 8px;
  }

  h1 {
    font-size: 2.5rem;
    letter-spacing: -0.01em;
  }

  h2 {
    font-size: 1.65rem;
    letter-spacing: 0;
  }

  section {
    padding: 48px 0;
  }

  .statement {
    font-size: 1.85rem;
    letter-spacing: 0;
  }

  .statement-band {
    padding: 56px 0;
  }

  .index-num {
    font-size: 2rem;
  }

  .proof-num {
    font-size: clamp(2.5rem, 12vw, 3rem);
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  /* Profile entries compact into thumb rows so the roster scans as a
     ledger instead of six consecutive full-screen portraits. */
  .profile-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    padding-top: 16px;
  }

  .profile-card h3 {
    font-size: 1.1rem;
  }

  .portrait-num {
    top: 8px;
    inset-inline-start: 8px;
    font-size: 1.2rem;
  }

  .portrait-tag {
    display: none;
  }

  .footer-meta {
    margin-top: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* Below small-phone width the mark alone carries the brand. */
@media (max-width: 374px) {
  .brand-word {
    display: none;
  }
}

/* Windows High Contrast: keep card boundaries and the nav indicator. */
@media (forced-colors: active) {
  .index-card,
  .card,
  .portrait {
    border: 1px solid CanvasText;
  }

  .main-nav a::after {
    background: CanvasText;
  }
}

/* Earned icons: contact methods + course meta (brand-blue line icons). */
.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.contact-icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--brand-blue);
}

.contact-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.contact-text {
  min-width: 0;
}

.course-meta {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.course-meta::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 4px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232f2a92'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207v5l3%202'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Client-content launch system ───────────────────────────────────────── */
:root {
  --measure: 68ch;
  --measure-ar: 56ch;
  --aside: 300px;
}

[hidden] { display: none !important; }

.editorial-title { padding-block: clamp(72px, 10vw, 112px); }
.editorial-title::after,
.course-hero::after {
  content: "SDI";
  position: absolute;
  inset-inline-end: -0.03em;
  bottom: -0.22em;
  color: rgba(255,255,255,.035);
  font: 900 clamp(8rem, 24vw, 22rem)/.8 "Barlow", sans-serif;
  letter-spacing: -.06em;
  pointer-events: none;
}
.editorial-title .section-inner { position: relative; z-index: 1; }
.editorial-title h1 { max-width: 860px; }

.audience-section { padding: 0; border-bottom: 1px solid var(--line); }
.audience-paths { display: grid; grid-template-columns: 1fr 1fr; }
.audience-path {
  display: grid;
  grid-template-columns: 64px minmax(0,1fr) 44px;
  gap: 20px;
  align-items: center;
  min-height: 170px;
  padding: 28px 32px;
  color: var(--ink);
  text-decoration: none;
  border-inline-start: 1px solid var(--line);
}
.audience-path:first-child { border-inline-start: 0; }
.audience-path strong,
.audience-path small { display: block; }
.audience-path strong { font: 800 clamp(1.2rem,2vw,1.55rem)/1.2 "Barlow",sans-serif; text-transform: uppercase; }
html[lang="ar"] .audience-path strong { font-family: "Cairo",sans-serif; text-transform: none; line-height: 1.5; }
.audience-path small { margin-top: 8px; color: var(--muted); font-size: .93rem; }
.audience-path:hover,
.audience-path:focus-visible { background: var(--soft); }
.index-num,
.section-number,
.course-row-num { color: var(--brand-blue); font: 800 2.25rem/1 "Barlow",sans-serif; }
.path-arrow { font: 400 1.8rem/1 "Barlow",sans-serif; color: var(--brand-blue); transition: transform var(--dur-fast) var(--ease-out); }
a:hover .path-arrow { transform: translateX(4px); }
html[dir="rtl"] .path-arrow,
html[dir="rtl"] .course-row-arrow { transform: scaleX(-1); }
html[dir="rtl"] a:hover .path-arrow { transform: scaleX(-1) translateX(4px); }

.home-service-grid { display: grid; grid-template-columns: minmax(260px,.7fr) minmax(0,1.3fr); gap: clamp(48px,8vw,100px); align-items: start; }
.sticky-head { position: sticky; top: 104px; }
.service-ledger { border-top: 2px solid var(--ink); }
.service-ledger article { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.service-ledger article > span { color: var(--brand-blue); font: 800 1rem "Barlow",sans-serif; }
.service-ledger h3 { font-size: 1.35rem; text-transform: uppercase; }
html[lang="ar"] .service-ledger h3 { text-transform: none; }
.service-ledger p { margin: 0; color: var(--muted); }

.split-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; max-width: none; }
.split-head > div { max-width: 720px; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-blue); font: 800 .82rem "Barlow",sans-serif; letter-spacing: .06em; text-transform: uppercase; text-underline-offset: 5px; }
html[lang="ar"] .text-link { font: 700 .95rem "Cairo",sans-serif; letter-spacing: 0; text-transform: none; }
.course-ledger { border-top: 2px solid var(--ink); }
.course-preview-row { display: grid; grid-template-columns: 56px minmax(0,1fr) 120px 44px; gap: 20px; align-items: center; min-height: 116px; padding: 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.course-preview-row small,
.course-preview-row strong { display: block; }
.course-preview-row small { margin-bottom: 6px; color: var(--muted); font: 700 .7rem "Barlow",sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.course-preview-row strong { font: 800 1.12rem/1.28 "Barlow",sans-serif; }
.course-preview-row b { color: var(--muted); font-size: .86rem; }
html[lang="ar"] .course-preview-row :is(small,strong) { font-family: "Cairo",sans-serif; letter-spacing: 0; text-transform: none; }
.course-preview-row:hover strong { color: var(--brand-blue); }

.approach-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.9fr); gap: clamp(48px,9vw,112px); }
.expertise-index { border-top: 2px solid var(--ink); padding-top: 24px; }
.expertise-index > div { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.expertise-index > div span { color: var(--brand-blue); font: 800 .78rem "Barlow",sans-serif; }
.expertise-index strong { font-size: .95rem; }

.closing-band { position: relative; background: var(--brand-blue); color: var(--paper); padding-block: clamp(64px,9vw,96px); overflow: hidden; }
.closing-band::after { content: "SDI"; position: absolute; inset-inline-end: -.03em; bottom: -.25em; color: rgba(255,255,255,.06); font: 900 clamp(9rem,28vw,26rem)/.8 "Barlow",sans-serif; pointer-events:none; }
.closing-band .section-inner { position: relative; z-index: 1; }
.closing-band .eyebrow,
.closing-band p { color: rgba(255,255,255,.75); }
.closing-band h2 { max-width: 820px; color: var(--paper); font-size: clamp(2rem,4vw,3.3rem); }
.button.light { color: var(--brand-blue); background: var(--paper); border-color: var(--paper); }
.button.light-ghost { color: var(--paper); background: transparent; border-color: rgba(255,255,255,.6); }

.editorial-spread { display: grid; grid-template-columns: minmax(220px,.55fr) minmax(0,1.45fr); gap: clamp(40px,9vw,120px); align-items: start; }
.editorial-spread > div:first-child { border-top: 2px solid currentColor; padding-top: 24px; }
.editorial-spread .section-number { display: block; margin-bottom: 24px; }
.long-copy { max-width: var(--measure); }
html[lang="ar"] .long-copy { max-width: var(--measure-ar); line-height: 1.85; }
.long-copy p:last-child { margin-bottom: 0; }
.about-section { scroll-margin-top: 80px; }
.about-commitment .editorial-spread > div:first-child { border-color: rgba(255,255,255,.55); }
.about-commitment .section-number { color: var(--paper); }
/* The heading sits in the narrow editorial column (~275px on desktop). */
.about-commitment .editorial-spread h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); }

.service-pillars { border-top: 2px solid var(--ink); }
.service-pillar { display: grid; grid-template-columns: minmax(240px,.6fr) minmax(0,1.4fr); gap: clamp(40px,8vw,96px); padding: 56px 0; border-bottom: 1px solid var(--line); }
.pillar-title > span { display:block; margin-bottom: 28px; color: var(--brand-blue); font: 800 3.5rem/1 "Barlow",sans-serif; }
.pillar-title h2 { font-size: clamp(1.8rem,3vw,2.7rem); }
.pillar-body > p { max-width: var(--measure); }
.offering-types { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 36px; border-top: 1px solid var(--ink); }
.offering-types > div { padding-top: 24px; }
.offering-types > div + div { border-inline-start: 1px solid var(--line); padding-inline-start: 32px; }
.offering-types > div > span { color: var(--brand-blue); font: 800 .8rem "Barlow",sans-serif; }
/* Home service cards link to #service-<id>; clear the sticky header on arrival. */
.service-pillar { scroll-margin-top: 80px; }

/* Profile rosters: trainers run three across the page; leadership pairs up
   inside the About editorial column. Entries keep the ledger rules. */
.profile-roster { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 48px 24px; }
.profile-roster--pair { grid-template-columns: repeat(2, minmax(0,1fr)); }
.profile-bio[data-lang="en"] + .profile-bio[data-lang="en"],
.profile-bio[data-lang="ar"] + .profile-bio[data-lang="ar"] { margin-top: 8px; }

.catalogue-section { padding-top: 48px; }
.catalog-toolbar { display: grid; grid-template-columns: minmax(240px,1.5fr) minmax(180px,1fr) minmax(160px,.8fr) auto; gap: 16px; align-items: end; padding: 20px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); background: var(--soft); }
.catalog-toolbar label { display: block; margin-bottom: 6px; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; }
.catalog-clear { min-height: 48px; padding: 0 8px; border: 0; background: transparent; color: var(--brand-blue); font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.catalog-meta { display: flex; justify-content: space-between; gap: 24px; padding: 18px 0; color: var(--muted); font-size: .9rem; }
.catalog-meta strong { color: var(--ink); }
.course-catalog { border-top: 2px solid var(--ink); }
.course-row { display: grid; grid-template-columns: 56px minmax(0,1fr) 120px 44px; gap: 20px; align-items: center; margin-inline:-12px; padding:26px 12px; border-bottom: 1px solid var(--line); border-radius:6px; color:inherit; text-decoration:none; transition:background-color .18s ease; }
.course-row-main small { display: block; margin-bottom: 7px; color: var(--brand-blue); font: 700 .7rem "Barlow",sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.course-row h2 { margin: 0; font-size: clamp(1.1rem,2vw,1.35rem); line-height: 1.25; text-transform: none; }
.course-row:hover { background:var(--soft); }
.course-row:hover h2 { color:var(--brand-blue); }
.course-row:focus-visible { outline:2px solid var(--brand-blue); outline-offset:3px; }
.course-row-main p { margin: 8px 0 0; max-width: 74ch; color: var(--muted); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.course-row-duration { color: var(--muted); font-size: .86rem; font-weight: 700; }
.course-row-arrow { display: grid; place-items: center; width: 44px; height: 44px; color: var(--brand-blue); font-size: 1.5rem; transition:transform .18s ease; }
.course-row:hover .course-row-arrow { transform:translateX(4px); }
.catalog-empty { padding: 40px; background: var(--soft); text-align:center; }
html[lang="ar"] .course-row-main small { font-family:"Cairo",sans-serif; letter-spacing:0; text-transform:none; }
html[dir="rtl"] .course-row:hover .course-row-arrow { transform:scaleX(-1) translateX(4px); }

.course-hero { position: relative; padding: clamp(72px,10vw,120px) 0 64px; overflow: hidden; background: var(--hero-bg); color: var(--paper); }
.course-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:64px; align-items:center; position:relative; z-index:1; }
.course-hero h1 { max-width: 900px; color: var(--paper); text-transform: none; font-size: clamp(2.4rem,5vw,4.5rem); }
.course-hero .eyebrow { color: rgba(255,255,255,.55); }
.breadcrumb { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:48px; color:rgba(255,255,255,.55); font-size:.84rem; }
.breadcrumb a { color:var(--paper); text-underline-offset:4px; }
.course-facts { display:flex; flex-wrap:wrap; gap:0; margin-top:40px; border-top:1px solid rgba(255,255,255,.2); }
.course-facts > div { min-width:190px; padding:20px 32px 0 0; }
.course-facts > div + div { border-inline-start:1px solid rgba(255,255,255,.2); padding-inline-start:32px; }
.course-facts small,
.course-facts strong { display:block; }
.course-facts small { color:rgba(255,255,255,.55); font-size:.75rem; }
.course-facts strong { margin-top:4px; }
.course-mark { display:grid; place-items:center; aspect-ratio:1; border:1px solid rgba(255,255,255,.1); }
.course-mark img { width:85px; opacity:.28; }
.course-detail-grid { display:grid; grid-template-columns:minmax(0,720px) var(--aside); gap:clamp(48px,8vw,96px); align-items:start; }
.course-detail-main > section { padding:0 0 48px; scroll-margin-top:96px; }
.course-detail-main > section + section { padding-top:48px; border-top:1px solid var(--line); }
.course-detail-main .section-number { display:block; margin-bottom:16px; font-size:1rem; }
.course-detail-main h2 { text-transform:none; }
.course-detail-main p,
.course-detail-main li { max-width:var(--measure); color:var(--ink-soft); }
html[lang="ar"] .course-detail-main :is(p,li) { max-width:var(--measure-ar); line-height:1.9; }
.course-detail-aside { position:sticky; top:96px; }
.aside-panel { border-top:3px solid var(--brand-blue); padding:28px 24px; background:var(--soft); }
.aside-panel h2 { font-size:1.35rem; text-transform:none; }
.aside-panel .button { width:100%; margin-top:12px; text-align:center; }
.offering-row { display:grid; grid-template-columns:1fr 1fr auto; gap:16px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }

.legal-title { padding-block:64px; }
.legal-updated { color:rgba(255,255,255,.6); margin:24px 0 0; }
.legal-layout { display:grid; grid-template-columns:220px minmax(0,720px); gap:64px; align-items:start; }
.legal-toc { position:sticky; top:96px; }
.legal-toc details { border-top:2px solid var(--ink); padding-top:16px; }
.legal-toc summary { font-weight:800; cursor:pointer; }
.legal-toc ol { margin:16px 0 0; padding-inline-start:24px; }
.legal-toc li { margin:0 0 9px; color:var(--muted); font-size:.82rem; line-height:1.35; }
.legal-toc a { text-decoration:none; }
.legal-toc a:hover { color:var(--brand-blue); text-decoration:underline; }
.legal-intro { padding-bottom:40px; font-size:1.08rem; color:var(--ink-soft); }
.legal-body > div > section { padding:40px 0; border-top:1px solid var(--line); scroll-margin-top:96px; }
.legal-body h2 { text-transform:none; }
.legal-body p,
.legal-body li { max-width:var(--measure); color:var(--ink-soft); }
.legal-body li + li { margin-top:8px; }
html[lang="ar"] .legal-body :is(p,li) { max-width:var(--measure-ar); line-height:1.95; }

.contact-details { padding-top:20px; }
.contact-list { border-top:2px solid var(--ink); }
.contact-list li { gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.contact-icon { width:24px; height:24px; }
.contact-icon svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.contact-form { padding:clamp(24px,4vw,40px); }
.privacy-check { display:flex; gap:12px; align-items:flex-start; margin:24px 0; color:var(--muted); font-weight:400; font-size:.88rem; }
.privacy-check input { flex:none; width:18px; height:18px; margin-top:3px; }
.registration-summary { padding:18px; border:1px solid var(--line); border-inline-start:3px solid var(--brand-blue); background:var(--soft); }
.registration-summary :is(strong,time,.field-summary-label) { display:block; }
.field-summary-label { color:var(--muted); font-size:.76rem; font-weight:800; text-transform:uppercase; }
.registration-summary time { margin-top:4px; color:var(--muted); }
.form-flash { margin:0 0 24px; padding:14px 16px; border-radius:var(--control-radius); }
.form-flash-success { color:var(--success); background:var(--success-bg); border:1px solid #b9ddd4; }
.form-flash-error { color:var(--danger); background:var(--danger-bg); border:1px solid var(--danger-line); }

.footer-conversation { display:flex; justify-content:space-between; align-items:end; gap:48px; padding:56px 0; border-bottom:1px solid rgba(255,255,255,.15); }
.footer-conversation h2 { max-width:680px; margin:0; color:var(--paper); font-size:clamp(1.8rem,3.5vw,2.7rem); }
.footer-kicker { margin:0 0 10px; color:rgba(255,255,255,.55); font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.footer-button { flex:none; color:var(--paper); background:var(--brand-blue); }
.footer-grid { display:grid; grid-template-columns:1.1fr .7fr 1.2fr; gap:64px; padding:44px 0; }
.footer-brand img { width:34px; margin-bottom:16px; filter:brightness(0) invert(1); }
.footer-brand p { margin:0; font-weight:800; }
.footer-brand > span { display:block; margin-top:8px; color:rgba(255,255,255,.55); font-size:.86rem; }
.footer-nav { display:grid; align-content:start; gap:9px; }
.footer-nav a { color:rgba(255,255,255,.72); font-size:.9rem; text-decoration:none; }
.footer-nav a:hover { color:var(--paper); text-decoration:underline; text-underline-offset:4px; }
.footer-contact { display:grid; align-content:start; gap:9px; font-style:normal; color:rgba(255,255,255,.62); font-size:.88rem; }
.footer-contact a { color:var(--paper); }
.footer-contact p { margin:6px 0 0; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:20px 0 0; }

@media (max-width: 880px) {
  .audience-paths,
  .home-service-grid,
  .approach-grid,
  .editorial-spread,
  .service-pillar,
  .course-detail-grid,
  .legal-layout,
  .footer-grid { grid-template-columns:1fr; }
  .audience-path { border-inline-start:0; border-top:1px solid var(--line); }
  .audience-path:first-child { border-top:0; }
  .sticky-head,
  .course-detail-aside,
  .legal-toc { position:static; }
  .course-preview-row,
  .course-row { grid-template-columns:48px minmax(0,1fr) 96px 44px; }
  .service-pillar { gap:24px; }
  .profile-roster { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catalog-toolbar { grid-template-columns:1fr 1fr; }
  .catalog-search { grid-column:1/-1; }
  .course-hero-grid { grid-template-columns:1fr; }
  .course-mark { display:none; }
  .legal-toc details { padding-bottom:20px; }
  .footer-grid { gap:36px; }
}

@media (max-width: 560px) {
  .editorial-title h1,
  .course-hero h1 { font-size:clamp(2rem,9vw,2.5rem); }
  .audience-path { grid-template-columns:44px minmax(0,1fr) 32px; gap:12px; padding:24px 0; }
  .audience-path .index-num { font-size:1.55rem; }
  .split-head,
  .catalog-meta,
  .footer-conversation { align-items:flex-start; flex-direction:column; }
  .course-preview-row,
  .course-row { grid-template-columns:38px minmax(0,1fr) 40px; gap:12px; }
  .course-row { margin-inline:0; padding-inline:0; border-radius:0; }
  .course-preview-row > b,
  .course-row-duration { grid-column:2; }
  .course-preview-row .path-arrow,
  .course-row-arrow { grid-column:3; grid-row:1 / span 2; }
  .course-row-main p { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .catalog-toolbar { grid-template-columns:1fr; padding:16px; }
  .catalog-search { grid-column:auto; }
  .offering-types { grid-template-columns:1fr; }
  .offering-types > div + div { border-inline-start:0; border-top:1px solid var(--line); padding-inline-start:0; }
  .profile-roster,
  .profile-roster--pair { grid-template-columns:1fr; gap:24px; }
  .course-facts { display:grid; }
  .course-facts > div { padding:16px 0; }
  .course-facts > div + div { border-inline-start:0; border-top:1px solid rgba(255,255,255,.2); padding-inline-start:0; }
  .contact-form .button { width:100%; }
  .footer-button { width:100%; }
}

/* --------------------------------------------------------------------------
   Immersive home page
   Layered editorial photography gives the institute a distinct visual world.
   Motion is driven by one bounded CSS variable and is disabled on touch-sized
   layouts and for visitors who prefer reduced motion.
   -------------------------------------------------------------------------- */
.hero-immersive {
  --parallax-progress: 0;
  position: relative;
  min-height: calc(100svh - 72px);
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(circle at 12% 14%, rgba(47, 42, 146, .26), transparent 28%),
    var(--hero-bg);
}

.hero-immersive::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: linear-gradient(to right, #000, transparent 68%);
  mask-image: linear-gradient(to right, #000, transparent 68%);
}

.hero-immersive .hero-grid {
  position: relative;
  z-index: 2;
  min-height: calc(100svh - 72px);
  grid-template-columns: minmax(0, 1.05fr) minmax(410px, .95fr);
  gap: clamp(56px, 7vw, 96px);
  padding-block: clamp(64px, 8vh, 96px);
}

.hero-immersive .hero-copy {
  position: relative;
  z-index: 3;
}

.hero-immersive .hero-copy::before {
  content: "";
  position: absolute;
  top: -32px;
  inset-inline-start: 0;
  width: 64px;
  height: 3px;
  background: var(--brand-blue);
}

/* The copy column stops growing at ~538px, so the size stops at 4.5rem:
   "STRENGTHENING" is 516px there. Larger sizes broke the word mid-letter. */
.hero-immersive h1 {
  max-width: 760px;
  font-size: clamp(3rem, 5.4vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.035em;
}

html[lang="ar"] .hero-immersive h1 {
  line-height: 1.18;
  letter-spacing: 0;
}

.hero-immersive .lead {
  max-width: 56ch;
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
}

.hero-visual {
  position: relative;
  align-self: stretch;
  min-height: 570px;
  margin-inline-end: calc((1120px - 100vw) / 2);
}

.hero-visual-architecture {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #092f73;
  clip-path: polygon(10% 0, 100% 0, 100% 90%, 74% 100%, 0 100%, 0 18%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}

.hero-visual-architecture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(15,15,26,.06), rgba(15,15,26,.54));
}

.hero-visual-architecture img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: 52% center;
  transform: translate3d(0, calc(var(--parallax-progress) * -34px), 0) scale(1.06);
  will-change: transform;
}

.hero-visual-human {
  position: absolute;
  inset-inline-start: -56px;
  bottom: 28px;
  z-index: 2;
  width: min(64%, 390px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--card-dark);
  border: 8px solid var(--hero-bg);
  box-shadow: 0 24px 54px rgba(0,0,0,.3);
  transform: translate3d(0, calc(var(--parallax-progress) * 22px), 0);
  will-change: transform;
}

.hero-visual-human img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.05);
}

.hero-visual-human::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(47,42,146,.26), transparent 56%);
  pointer-events: none;
}

.hero-visual-coordinate {
  position: absolute;
  top: 24px;
  inset-inline-start: -10px;
  z-index: 3;
  padding: 8px 12px;
  background: var(--paper);
  color: var(--ink);
  font: 800 .65rem/1 "Barlow", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-visual-monogram {
  position: absolute;
  inset-inline-end: -3vw;
  bottom: -8px;
  z-index: 3;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.19);
  font: 900 clamp(8rem, 15vw, 15rem)/.72 "Barlow", sans-serif;
  letter-spacing: -.06em;
  transform: translate3d(0, calc(var(--parallax-progress) * -18px), 0);
  user-select: none;
  pointer-events: none;
}

.hero-scroll-cue {
  position: absolute;
  z-index: 4;
  bottom: 22px;
  inset-inline-start: max(16px, calc((100vw - 1120px) / 2));
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.52);
  font: 700 .62rem/1 "Barlow", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero-scroll-cue i {
  display: block;
  width: 46px;
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,.22);
}

.hero-scroll-cue i::after {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  background: var(--paper);
  transform: translateX(-100%);
  animation: scroll-cue 2.2s ease-in-out infinite;
}

html[dir="rtl"] .hero-scroll-cue i::after { animation-direction: reverse; }

@keyframes scroll-cue {
  50%, 100% { transform: translateX(100%); }
}

.approach-story {
  --parallax-progress: 0;
  position: relative;
  overflow: clip;
  padding: 0;
  background: var(--hero-bg);
  color: var(--paper);
}

.approach-story::after {
  content: "BAHRAIN";
  position: absolute;
  inset-inline-start: -.02em;
  bottom: -.13em;
  z-index: 0;
  color: rgba(255,255,255,.035);
  font: 900 clamp(7rem, 18vw, 17rem)/.8 "Barlow", sans-serif;
  letter-spacing: -.055em;
  pointer-events: none;
}

.approach-story-media {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 58%;
  overflow: hidden;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}

.approach-story-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--hero-bg), rgba(15,15,26,.1) 52%, rgba(15,15,26,.22));
}

html[dir="rtl"] .approach-story-media::after {
  background: linear-gradient(-90deg, var(--hero-bg), rgba(15,15,26,.1) 52%, rgba(15,15,26,.22));
}

.approach-story-media img {
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: center 44%;
  filter: grayscale(1) contrast(1.08);
  opacity: .8;
  transform: translate3d(0, calc(var(--parallax-progress) * -54px), 0) scale(1.04);
  will-change: transform;
}

.approach-story-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(390px,1.15fr);
  gap: clamp(56px, 9vw, 120px);
  align-items: center;
  min-height: 720px;
  padding-block: clamp(88px, 10vw, 128px);
}

.approach-story-copy {
  max-width: 520px;
}

.approach-story .eyebrow {
  color: rgba(255,255,255,.6);
}

.approach-story h2 {
  color: var(--paper);
  font-size: clamp(2rem, 3.8vw, 3.3rem);
}

.approach-story .lead {
  color: rgba(255,255,255,.72);
}

.approach-story .text-link {
  color: var(--paper);
}

.approach-expertise {
  align-self: end;
  margin-bottom: 12px;
  padding: 28px 32px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(15,15,26,.78);
  backdrop-filter: blur(14px);
}

.approach-expertise > div {
  border-color: rgba(255,255,255,.15);
}

.approach-expertise strong {
  color: var(--paper);
}

.approach-expertise > div span {
  color: #8f8ae9;
}

@media (max-width: 1080px) and (min-width: 881px) {
  .hero-immersive .hero-grid {
    grid-template-columns: minmax(0,1fr) minmax(380px,.9fr);
    gap: 42px;
  }

  .hero-immersive h1 { font-size: clamp(2.8rem,5.4vw,4.2rem); }
  .hero-visual-human { inset-inline-start: -28px; }
}

@media (max-width: 880px) {
  .hero-immersive {
    min-height: 0;
  }

  .hero-immersive::before {
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%);
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
  }

  .hero-immersive .hero-grid {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 44px;
    padding-block: 72px 48px;
  }

  .hero-immersive h1 {
    max-width: 760px;
    font-size: clamp(2.7rem, 8vw, 4rem);
  }

  .hero-visual {
    min-height: 480px;
    margin-inline-end: 0;
  }

  .hero-visual-architecture img,
  .hero-visual-human,
  .hero-visual-monogram,
  .approach-story-media img {
    transform: none;
    will-change: auto;
  }

  .hero-scroll-cue { display: none; }

  .approach-story-media {
    inset: 0;
    width: 100%;
    clip-path: none;
    opacity: .4;
  }

  .approach-story-media::after,
  html[dir="rtl"] .approach-story-media::after {
    background: linear-gradient(180deg, var(--hero-bg) 0%, rgba(15,15,26,.48) 45%, var(--hero-bg) 100%);
  }

  .approach-story-grid {
    grid-template-columns: 1fr;
    gap: 64px;
    min-height: 0;
    padding-block: 88px;
  }

  .approach-expertise {
    width: min(100%, 620px);
    margin: 0;
  }
}

@media (max-width: 560px) {
  .hero-immersive .hero-grid {
    gap: 36px;
    padding-block: 64px 36px;
  }

  .hero-immersive .hero-copy::before { top: -24px; }
  .hero-immersive h1 { font-size: clamp(2.55rem, 12.2vw, 3.45rem); }
  .hero-immersive .hero-actions .button { width: 100%; }

  .hero-visual {
    min-height: 420px;
  }

  .hero-visual-architecture {
    clip-path: polygon(7% 0, 100% 0, 100% 91%, 72% 100%, 0 100%, 0 13%);
  }

  .hero-visual-human {
    inset-inline-start: -4px;
    bottom: 18px;
    width: 68%;
    border-width: 6px;
  }

  .hero-visual-coordinate {
    top: 18px;
    inset-inline-start: 8px;
  }

  .hero-visual-monogram {
    inset-inline-end: -2px;
    font-size: clamp(7rem, 38vw, 10rem);
  }

  .approach-story-grid {
    gap: 48px;
    padding-block: 72px;
  }

  .approach-story h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .approach-expertise { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual-architecture img,
  .hero-visual-human,
  .hero-visual-monogram,
  .approach-story-media img {
    transform: none;
    will-change: auto;
  }

  .hero-scroll-cue i::after { animation: none; }
}

/* --------------------------------------------------------------------------
   Immersive inner-page system
   One shared composition keeps page imagery art-directed and manageable from
   the admin banner settings while allowing each section its own visual pace.
   -------------------------------------------------------------------------- */
.immersive-page-hero {
  --parallax-progress: 0;
  position: relative;
  min-height: 650px;
  isolation: isolate;
  overflow: clip;
  padding: 0;
  background:
    radial-gradient(circle at 14% 18%, rgba(47,42,146,.3), transparent 30%),
    var(--hero-bg);
  color: var(--paper);
}

.immersive-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 84px 84px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 72%);
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}

html[dir="rtl"] .immersive-page-hero::before {
  -webkit-mask-image: linear-gradient(-90deg, #000, transparent 72%);
  mask-image: linear-gradient(-90deg, #000, transparent 72%);
}

.immersive-page-hero__media {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 0;
  width: 57%;
  overflow: hidden;
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
  background: #181735;
}

html[dir="rtl"] .immersive-page-hero__media {
  clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
}

.immersive-page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--hero-bg) 0%, rgba(15,15,26,.72) 20%, rgba(15,15,26,.1) 64%),
    linear-gradient(180deg, rgba(47,42,146,.05), rgba(15,15,26,.48));
}

html[dir="rtl"] .immersive-page-hero__media::after {
  background:
    linear-gradient(-90deg, var(--hero-bg) 0%, rgba(15,15,26,.72) 20%, rgba(15,15,26,.1) 64%),
    linear-gradient(180deg, rgba(47,42,146,.05), rgba(15,15,26,.48));
}

.immersive-page-hero__media img {
  width: 100%;
  height: 116%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.08);
  transform: translate3d(0, calc(var(--parallax-progress) * -42px), 0) scale(1.035);
  will-change: transform;
}

.immersive-page-hero--about .immersive-page-hero__media img { object-position: center 36%; }
.immersive-page-hero--services .immersive-page-hero__media img { object-position: center 46%; }
.immersive-page-hero--courses .immersive-page-hero__media img { object-position: center; }
.immersive-page-hero--contact .immersive-page-hero__media img { object-position: center 38%; }

.immersive-page-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0,1.12fr) minmax(280px,.88fr);
  gap: clamp(48px,7vw,96px);
  align-items: center;
  min-height: 650px;
  padding-block: clamp(88px,10vw,124px);
}

.immersive-page-hero__copy {
  position: relative;
  max-width: 790px;
}

.immersive-page-hero__copy::before {
  content: "";
  position: absolute;
  top: -32px;
  inset-inline-start: 0;
  width: 64px;
  height: 3px;
  background: var(--brand-blue);
}

.immersive-page-hero .eyebrow { color: rgba(255,255,255,.6); }
.immersive-page-hero h1 {
  max-width: 780px;
  color: var(--paper);
  font-size: clamp(2.8rem,5.2vw,5.05rem);
  line-height: .98;
  letter-spacing: -.035em;
}
.immersive-page-hero .lead {
  max-width: 55ch;
  color: rgba(255,255,255,.72);
  font-size: clamp(1.05rem,1.5vw,1.2rem);
}
html[lang="ar"] .immersive-page-hero h1 { line-height: 1.2; letter-spacing: 0; }

.immersive-page-hero__index {
  position: relative;
  z-index: 2;
  align-self: end;
  justify-self: end;
  min-width: 190px;
  padding: 22px 24px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(15,15,26,.62);
  backdrop-filter: blur(12px);
}
.immersive-page-hero__index span,
.immersive-page-hero__index small { display: block; }
.immersive-page-hero__index span { font: 800 3.3rem/1 "Barlow",sans-serif; }
.immersive-page-hero__index small { margin-top: 8px; color: rgba(255,255,255,.55); font: 800 .63rem/1 "Barlow",sans-serif; letter-spacing: .13em; }

.immersive-page-hero__monogram {
  position: absolute;
  inset-inline-end: -2vw;
  bottom: -.13em;
  z-index: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.16);
  font: 900 clamp(8rem,18vw,17rem)/.72 "Barlow",sans-serif;
  letter-spacing: -.06em;
  transform: translate3d(0, calc(var(--parallax-progress) * -16px), 0);
  pointer-events: none;
}

.image-chapter {
  --parallax-progress: 0;
  position: relative;
  min-height: 760px;
  overflow: clip;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(80px,10vw,120px);
  background: var(--hero-bg);
  color: var(--paper);
}
.image-chapter__media { position: absolute; inset: 0; overflow: hidden; }
.image-chapter__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,15,26,.14), rgba(15,15,26,.84) 78%, var(--hero-bg));
}
.image-chapter__media img {
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: center 54%;
  filter: saturate(.78) contrast(1.05);
  transform: translate3d(0, calc(var(--parallax-progress) * -58px), 0) scale(1.035);
  will-change: transform;
}
.image-chapter__content { position: relative; z-index: 1; }
.image-chapter__index { display: block; margin-bottom: 24px; color: rgba(255,255,255,.62); font: 800 .7rem/1 "Barlow",sans-serif; letter-spacing: .14em; }
.image-chapter__statement {
  max-width: 900px;
  margin: 0;
  color: var(--paper);
  font: 700 clamp(2rem,4.5vw,4.5rem)/1.05 "Barlow",sans-serif;
  letter-spacing: -.03em;
}
html[lang="ar"] .image-chapter__statement { font-family: "Cairo",sans-serif; line-height: 1.35; letter-spacing: 0; }

.about-audience-image {
  position: relative;
  width: min(100%,680px);
  aspect-ratio: 16/8;
  margin-bottom: 36px;
  overflow: hidden;
  clip-path: polygon(0 0, 91% 0, 100% 22%, 100% 100%, 0 100%);
}
.about-audience-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; filter: saturate(.72) contrast(1.03); }

.service-pillar-visual {
  position: relative;
  margin: 0 0 40px;
  height: clamp(330px,38vw,460px);
  overflow: hidden;
  background: var(--hero-bg);
  clip-path: polygon(0 0, 93% 0, 100% 12%, 100% 100%, 0 100%);
}
.service-pillar-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 47%; filter: saturate(.75) contrast(1.04); transition: transform 700ms var(--ease-out); }
.service-pillar-visual--wide img { object-position: center 34%; }
.service-pillar-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 54%,rgba(15,15,26,.76)); pointer-events:none; }
.service-pillar-visual figcaption { position:absolute; z-index:1; inset-inline:24px; bottom:20px; color:var(--paper); font-size:.84rem; font-weight:700; }
.service-pillar:hover .service-pillar-visual img { transform: scale(1.025); }

.course-visual-index {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  min-height: 390px;
  padding: 0;
  background: var(--hero-bg);
}
.course-visual-index__item { position:relative; min-height:390px; overflow:hidden; border-inline-start:1px solid rgba(255,255,255,.16); }
.course-visual-index__item:first-child { border-inline-start:0; }
.course-visual-index__item img { width:100%; height:100%; object-fit:cover; filter:grayscale(.25) saturate(.68) contrast(1.06); transition:transform 750ms var(--ease-out), filter 300ms ease; }
.course-visual-index__item::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,15,26,.05),rgba(15,15,26,.82)); }
.course-visual-index__item > span,
.course-visual-index__item > strong { position:absolute; z-index:1; color:var(--paper); }
.course-visual-index__item > span { top:24px; inset-inline-start:24px; font:800 .7rem/1 "Barlow",sans-serif; letter-spacing:.14em; }
.course-visual-index__item > strong { inset-inline:24px; bottom:24px; font:800 clamp(1.15rem,2vw,1.65rem)/1.2 "Barlow",sans-serif; text-transform:uppercase; }
html[lang="ar"] .course-visual-index__item > strong { font-family:"Cairo",sans-serif; text-transform:none; line-height:1.5; }
.course-visual-index__item:hover img { transform:scale(1.035); filter:grayscale(0) saturate(.8) contrast(1.04); }

.contact-place {
  position: relative;
  height: 320px;
  margin: 0 0 36px;
  overflow: hidden;
  background: var(--hero-bg);
  clip-path: polygon(0 0, 88% 0, 100% 16%, 100% 100%, 0 100%);
}
.contact-place img { width:100%; height:100%; object-fit:cover; filter:grayscale(.35) saturate(.7) contrast(1.08); }
.contact-place::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(15,15,26,.78)); }
.contact-place span { position:absolute; z-index:1; inset-inline-start:20px; bottom:18px; color:var(--paper); font:800 .62rem/1 "Barlow",sans-serif; letter-spacing:.13em; }

.course-hero--immersive { --parallax-progress:0; min-height:690px; display:flex; align-items:center; padding-block:clamp(84px,9vw,120px); isolation:isolate; }
.course-hero-media { position:absolute; inset-block:0; inset-inline-end:0; z-index:0; width:58%; overflow:hidden; clip-path:polygon(16% 0,100% 0,100% 100%,0 100%); }
html[dir="rtl"] .course-hero-media { clip-path:polygon(0 0,84% 0,100% 100%,0 100%); }
.course-hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--hero-bg),rgba(15,15,26,.7) 22%,rgba(15,15,26,.18)),linear-gradient(180deg,rgba(47,42,146,.12),rgba(15,15,26,.48)); }
html[dir="rtl"] .course-hero-media::after { background:linear-gradient(-90deg,var(--hero-bg),rgba(15,15,26,.7) 22%,rgba(15,15,26,.18)),linear-gradient(180deg,rgba(47,42,146,.12),rgba(15,15,26,.48)); }
.course-hero-media img { width:100%; height:116%; object-fit:cover; object-position:center; filter:saturate(.7) contrast(1.08); transform:translate3d(0,calc(var(--parallax-progress) * -46px),0) scale(1.04); will-change:transform; }
.course-hero--immersive .course-hero-grid { width:100%; grid-template-columns:minmax(0,1fr) 220px; }
.course-hero--immersive .course-hero-grid > div:first-child { position:relative; z-index:2; }
.course-hero-frame { position:relative; z-index:2; align-self:end; justify-self:end; width:190px; padding:22px 24px; border:1px solid rgba(255,255,255,.2); background:rgba(15,15,26,.65); backdrop-filter:blur(12px); }
.course-hero-frame span,
.course-hero-frame small { display:block; }
.course-hero-frame span { font:800 3.3rem/1 "Barlow",sans-serif; }
.course-hero-frame small { margin-top:8px; color:rgba(255,255,255,.55); font:800 .63rem/1 "Barlow",sans-serif; letter-spacing:.13em; }

.course-preview-row--visual { grid-template-columns:88px 42px minmax(0,1fr) 110px 40px; }
.course-preview-thumb { display:block; width:76px; aspect-ratio:1; overflow:hidden; background:var(--hero-bg); }
.course-preview-thumb img { width:100%; height:100%; object-fit:cover; filter:saturate(.65); transition:transform 450ms var(--ease-out); }
.course-preview-row--visual:hover .course-preview-thumb img { transform:scale(1.06); }

@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .visual-reveal { opacity:0; transform:translateY(18px); }
  html.reveal-ready .visual-reveal.is-visible { opacity:1; transform:none; transition:opacity 650ms var(--ease-out) var(--reveal-delay,0ms),transform 650ms var(--ease-out) var(--reveal-delay,0ms); }
}

@media (max-width: 880px) {
  .immersive-page-hero { min-height:0; }
  .immersive-page-hero__media { inset:0; width:100%; clip-path:none; opacity:.58; }
  html[dir="rtl"] .immersive-page-hero__media { clip-path:none; }
  .immersive-page-hero__media::after,
  html[dir="rtl"] .immersive-page-hero__media::after { background:linear-gradient(180deg,rgba(15,15,26,.6),var(--hero-bg) 92%); }
  .immersive-page-hero__grid { grid-template-columns:1fr; min-height:620px; padding-block:96px 64px; }
  .immersive-page-hero__copy { align-self:end; }
  .immersive-page-hero__index { display:none; }
  .immersive-page-hero__media img,
  .immersive-page-hero__monogram,
  .image-chapter__media img,
  .course-hero-media img { transform:none; will-change:auto; }
  .image-chapter { min-height:650px; }
  .course-visual-index { grid-template-columns:1fr 1fr; }
  .course-visual-index__item { min-height:330px; }
  .course-visual-index__item:last-child { grid-column:1/-1; min-height:280px; }
  .course-hero--immersive { min-height:650px; }
  .course-hero--immersive .course-hero-grid { width:calc(100% - 32px); }
  .course-hero-media { inset:0; width:100%; clip-path:none; opacity:.52; }
  html[dir="rtl"] .course-hero-media { clip-path:none; }
  .course-hero-media::after,
  html[dir="rtl"] .course-hero-media::after { background:linear-gradient(180deg,rgba(15,15,26,.62),var(--hero-bg) 92%); }
  .course-hero--immersive .course-hero-grid { grid-template-columns:1fr; }
  .course-hero-frame { display:none; }
  .course-preview-row--visual { grid-template-columns:70px 40px minmax(0,1fr) 40px; }
  .course-preview-row--visual > b { grid-column:3; }
  .course-preview-row--visual .path-arrow { grid-column:4; grid-row:1 / span 2; }
  .course-preview-thumb { width:60px; grid-row:1 / span 2; }
}

@media (max-width: 560px) {
  .immersive-page-hero__grid { min-height:560px; padding-block:80px 48px; }
  .immersive-page-hero h1 { font-size:clamp(2.45rem,11vw,3.25rem); }
  .immersive-page-hero__copy::before { top:-24px; }
  .image-chapter { min-height:560px; }
  .image-chapter__statement { font-size:clamp(1.85rem,8vw,2.55rem); }
  .about-audience-image { aspect-ratio:4/3; }
  .service-pillar-visual { height:340px; margin-bottom:28px; }
  .course-visual-index { grid-template-columns:1fr; }
  .course-visual-index__item,
  .course-visual-index__item:last-child { grid-column:auto; min-height:270px; }
  .contact-place { height:280px; }
  .course-hero--immersive { min-height:620px; }
  .course-preview-row--visual { grid-template-columns:58px minmax(0,1fr) 36px; }
  .course-preview-row--visual .course-preview-thumb { width:52px; grid-column:1; grid-row:1 / span 3; }
  .course-preview-row--visual > .index-num { display:none; }
  .course-preview-row--visual > span:nth-child(3) { grid-column:2; }
  .course-preview-row--visual > b { grid-column:2; }
  .course-preview-row--visual .path-arrow { grid-column:3; grid-row:1 / span 3; }
}

@media (prefers-reduced-motion: reduce) {
  .immersive-page-hero__media img,
  .immersive-page-hero__monogram,
  .image-chapter__media img,
  .course-hero-media img { transform:none; will-change:auto; }
  .service-pillar-visual img,
  .course-visual-index__item img,
  .course-preview-thumb img { transition:none; }
}

/* --------------------------------------------------------------------------
   Immersive landing-page system
   CSS carries the atmosphere: spatial layers, sticky scenes, kinetic type,
   pointer light and progressive scroll states. Every set piece collapses to a
   calm static layout on small screens or under reduced-motion.
   -------------------------------------------------------------------------- */
::selection { background: var(--brand-blue); color: var(--paper); }

.site-progress {
  --progress: 0;
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand-blue);
  transform: scaleX(var(--progress));
  transform-origin: left center;
  pointer-events: none;
}
html[dir="rtl"] .site-progress { transform-origin: right center; }

/* The language switch is a short branded scene, not a visible typography
   snap. Its travel follows the reading direction of the language entering. */
.language-transition {
  --wipe-enter: 102%;
  --wipe-exit: -102%;
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  touch-action: none;
  color: var(--paper);
  background:
    radial-gradient(circle at 76% 24%, rgba(117,110,255,.38), transparent 30%),
    linear-gradient(125deg,#121121 8%,#292483 72%,#3d37b4);
  transform: translate3d(var(--wipe-enter),0,0);
  will-change: transform;
}
.language-transition[data-target-lang="ar"] {
  background:
    radial-gradient(circle at 24% 70%, rgba(129,123,234,.3), transparent 32%),
    linear-gradient(235deg,#121121 6%,#292483 70%,#3d37b4);
}
.language-transition.to-en { --wipe-enter:-102%; --wipe-exit:102%; }
.language-transition.is-active {
  display: grid;
  visibility: visible;
  pointer-events: auto;
  animation: language-wipe 980ms cubic-bezier(.76,0,.24,1) both;
}
.language-transition::before {
  content: "SDI";
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.12);
  font: 900 clamp(13rem,38vw,36rem)/.72 "Barlow",sans-serif;
  letter-spacing: -.08em;
  transform: translate(-50%,-48%);
  opacity: .82;
  white-space: nowrap;
}
html[dir="rtl"] .language-transition::before { transform:translate(50%,-48%); }
.language-transition::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(90deg,transparent,black 24%,black 76%,transparent);
  mask-image: linear-gradient(90deg,transparent,black 24%,black 76%,transparent);
  opacity: .55;
}
.language-transition__frame {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  width: min(calc(100% - 64px),1280px);
  min-height: min(58vh,620px);
  padding-block: clamp(44px,7vw,84px);
  border-block: 1px solid rgba(255,255,255,.22);
}
.language-transition__kicker {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(18px,2vw,28px);
  color: rgba(255,255,255,.62);
  font: 800 .7rem/1 "Barlow",sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.language-transition[data-target-lang="ar"] .language-transition__kicker {
  font: 700 .85rem/1.5 "Cairo",sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.language-transition__label {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  font: 800 clamp(4.8rem,14vw,12rem)/.78 "Barlow",sans-serif;
  letter-spacing: -.065em;
}
.language-transition[data-target-lang="ar"] .language-transition__label {
  font-family: "Cairo",sans-serif;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
}
.language-transition__code {
  position: absolute;
  inset-inline-end: 0;
  top: clamp(30px,5vw,60px);
  color: rgba(255,255,255,.72);
  font: 800 .72rem/1 "Barlow",sans-serif;
  letter-spacing: .16em;
}
.language-transition__line {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: rgba(255,255,255,.38);
  transform: scaleX(0);
  transform-origin: left center;
}
.language-transition.to-ar .language-transition__line { transform-origin:right center; }
.language-transition.is-active .language-transition__line { animation:language-line 720ms var(--ease-out) 110ms both; }
.language-transition.is-active :is(.language-transition__kicker,.language-transition__label,.language-transition__code) { animation:language-type 760ms var(--ease-out) 90ms both; }
.language-transition.to-ar :is(.language-transition__kicker,.language-transition__label,.language-transition__code) { --language-type-shift:28px; --language-type-exit:-13px; }
.language-transition.to-en :is(.language-transition__kicker,.language-transition__label,.language-transition__code) { --language-type-shift:-28px; --language-type-exit:13px; }
html.language-is-changing .lang-toggle { cursor:wait; }

@keyframes language-wipe {
  0% { transform:translate3d(var(--wipe-enter),0,0); }
  37%,63% { transform:translate3d(0,0,0); }
  100% { transform:translate3d(var(--wipe-exit),0,0); }
}
@keyframes language-line {
  0%,12% { transform:scaleX(0); opacity:0; }
  45%,72% { transform:scaleX(1); opacity:1; }
  100% { transform:scaleX(1); opacity:0; }
}
@keyframes language-type {
  0%,12% { opacity:0; transform:translate3d(var(--language-type-shift),18px,0); }
  43%,68% { opacity:1; transform:translate3d(0,0,0); }
  100% { opacity:0; transform:translate3d(var(--language-type-exit),-10px,0); }
}

.hero-immersive {
  background:
    radial-gradient(620px circle at var(--pointer-x,72%) var(--pointer-y,28%), rgba(74,66,215,.2), transparent 64%),
    radial-gradient(circle at 12% 14%, rgba(47,42,146,.26), transparent 28%),
    var(--hero-bg);
}

.hero-visual::before,
.hero-visual::after {
  content: "";
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  pointer-events: none;
}
.hero-visual::before {
  width: 300px;
  height: 300px;
  top: -74px;
  inset-inline-start: -112px;
  box-shadow: 0 0 0 58px rgba(255,255,255,.025), 0 0 0 116px rgba(255,255,255,.018);
  animation: orbital-breathe 8s ease-in-out infinite;
}
.hero-visual::after {
  width: 14px;
  height: 14px;
  top: 72px;
  inset-inline-start: 35px;
  border-color: var(--paper);
  background: var(--brand-blue);
  box-shadow: 0 0 24px rgba(105,98,255,.7);
  animation: orbital-node 8s ease-in-out infinite;
}

@keyframes orbital-breathe {
  50% { transform: scale(1.055) rotate(7deg); opacity:.72; }
}
@keyframes orbital-node {
  50% { transform: translate3d(30px,-18px,0) scale(.72); }
}

.hero-actions .button { position:relative; overflow:hidden; isolation:isolate; }
.hero-actions .button::before {
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-1;
  background:linear-gradient(110deg,transparent 24%,rgba(255,255,255,.18) 48%,transparent 72%);
  transform:translateX(-120%);
  transition:transform 650ms var(--ease-out);
}
.hero-actions .button:hover::before,
.hero-actions .button:focus-visible::before { transform:translateX(120%); }
html[dir="rtl"] .hero-actions .button::before { transform:translateX(120%); }
html[dir="rtl"] .hero-actions .button:hover::before,
html[dir="rtl"] .hero-actions .button:focus-visible::before { transform:translateX(-120%); }

.capability-ticker {
  position: relative;
  z-index: 3;
  overflow: hidden;
  padding-block: 17px;
  background: var(--brand-blue);
  color: var(--paper);
  border-block: 1px solid rgba(255,255,255,.16);
}
.capability-ticker__track { display:flex; width:max-content; animation:ticker-run 100s linear infinite; }
.capability-ticker__group { display:flex; align-items:center; flex:none; }
.capability-ticker__group span {
  display:flex;
  align-items:center;
  gap:28px;
  padding-inline:28px;
  font:800 .72rem/1 "Barlow",sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
  white-space:nowrap;
}
.capability-ticker__group span::after { content:""; width:5px; height:5px; border:1px solid rgba(255,255,255,.72); border-radius:50%; }
html[lang="ar"] .capability-ticker__group span { font:700 .9rem/1 "Cairo",sans-serif; letter-spacing:0; text-transform:none; }
/* In RTL the track starts at the right edge, so it moves right to bring the
   second group in. Reversing the LTR animation moved it off screen instead. */
html[dir="rtl"] .capability-ticker__track { animation-name:ticker-run-rtl; }
@keyframes ticker-run { to { transform:translateX(-50%); } }
@keyframes ticker-run-rtl { to { transform:translateX(50%); } }

.audience-path { position:relative; isolation:isolate; overflow:hidden; }
.audience-path::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--hero-bg);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 500ms var(--ease-out);
}
html[dir="rtl"] .audience-path::before { transform-origin:right center; }
.audience-path:hover::before,
.audience-path:focus-visible::before { transform:scaleX(1); }
.audience-path:hover,
.audience-path:focus-visible { background:transparent; color:var(--paper); }
.audience-path:hover small,
.audience-path:focus-visible small { color:rgba(255,255,255,.66); }

.capability-system {
  position:relative;
  overflow:clip;
  padding-block:clamp(88px,10vw,136px);
  background:
    radial-gradient(640px circle at var(--pointer-x,16%) var(--pointer-y,40%), rgba(47,42,146,.26), transparent 68%),
    var(--hero-bg);
  color:var(--paper);
}
.capability-system::before {
  content:"CAPABILITY";
  position:absolute;
  inset-inline-start:-.035em;
  bottom:-.18em;
  color:rgba(255,255,255,.025);
  font:900 clamp(8rem,18vw,18rem)/.8 "Barlow",sans-serif;
  letter-spacing:-.06em;
  pointer-events:none;
}
.capability-system__grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.93fr) minmax(390px,1.07fr); gap:clamp(56px,8vw,110px); align-items:start; }
.capability-system__stage { position:sticky; top:96px; }
.capability-system .section-head { margin-bottom:38px; }
.capability-system .eyebrow { color:#9691f1; }
.capability-system h2 { max-width:640px; color:var(--paper); font-size:clamp(2.25rem,4.2vw,3.8rem); line-height:1.03; }
html[lang="ar"] .capability-system h2 { line-height:1.3; }
.capability-system__media {
  position:relative;
  width:min(100%,570px);
  aspect-ratio:4/3;
  overflow:hidden;
  background:#191829;
  clip-path:polygon(0 0,88% 0,100% 16%,100% 100%,0 100%);
}
.capability-system__media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 52%,rgba(15,15,26,.78)); }
.capability-system__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.72) contrast(1.05); transition:opacity 550ms ease,transform 900ms var(--ease-out); }
.capability-system__media img:first-child { opacity:1; }
.capability-system__media img:nth-child(2) { opacity:0; transform:scale(1.06); }
.capability-system__media > span { position:absolute; z-index:1; inset-inline-end:18px; bottom:-.16em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.28); font:900 clamp(4.5rem,9vw,8rem)/1 "Barlow",sans-serif; letter-spacing:-.06em; }
.capability-system:has(.capability-card:nth-child(2):is(:hover,:focus-within)) .capability-system__media img:first-child { opacity:0; transform:scale(1.05); }
.capability-system:has(.capability-card:nth-child(2):is(:hover,:focus-within)) .capability-system__media img:nth-child(2) { opacity:1; transform:scale(1); }

.capability-system__cards { border-top:1px solid rgba(255,255,255,.22); }
.capability-card {
  position:relative;
  min-height:390px;
  padding:42px clamp(24px,4vw,44px) 38px 92px;
  border-bottom:1px solid rgba(255,255,255,.18);
  transition:background-color 400ms ease,transform 400ms var(--ease-out);
}
html[dir="rtl"] .capability-card { padding:42px 92px 38px clamp(24px,4vw,44px); }
.capability-card::before { content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px; background:#817bea; transform:scaleY(0); transform-origin:top; transition:transform 450ms var(--ease-out); }
.capability-card:hover,
.capability-card:focus-within { background:rgba(255,255,255,.045); transform:translateX(8px); }
html[dir="rtl"] .capability-card:hover,
html[dir="rtl"] .capability-card:focus-within { transform:translateX(-8px); }
.capability-card:hover::before,
.capability-card:focus-within::before { transform:scaleY(1); }
.capability-card__number { position:absolute; inset-inline-start:28px; top:45px; color:#8f89f0; font:800 1rem/1 "Barlow",sans-serif; }
.capability-card .eyebrow { margin-bottom:28px; color:rgba(255,255,255,.48); }
.capability-card h3 { max-width:520px; color:var(--paper); font-size:clamp(1.75rem,3.1vw,3rem); line-height:1.05; }
html[lang="ar"] .capability-card h3 { line-height:1.4; }
.capability-card > p:not(.eyebrow) { max-width:55ch; color:rgba(255,255,255,.64); }
.capability-card .text-link { margin-top:12px; color:var(--paper); }

.capability-pathway { position:relative; overflow:hidden; padding-block:clamp(80px,9vw,120px); background:var(--paper); }
.capability-pathway__head { display:grid; grid-template-columns:minmax(220px,.5fr) minmax(0,1.5fr); gap:clamp(40px,8vw,100px); align-items:end; margin-bottom:72px; }
.capability-pathway__head .eyebrow { margin:0; }
.capability-pathway__head h2 { max-width:760px; margin:0; font-size:clamp(2.25rem,4.5vw,4.4rem); line-height:1.02; }
html[lang="ar"] .capability-pathway__head h2 { line-height:1.3; }
.capability-pathway__rail { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:0; padding:0; list-style:none; }
.capability-pathway__rail::before,
.capability-pathway__rail::after { content:""; position:absolute; top:31px; inset-inline:0; height:2px; }
.capability-pathway__rail::before { background:var(--line); }
.capability-pathway__rail::after { background:var(--brand-blue); transform:scaleX(1); transform-origin:left center; }
html[dir="rtl"] .capability-pathway__rail::after { transform-origin:right center; }
.capability-pathway__rail li { position:relative; z-index:1; min-height:210px; padding-inline-end:30px; }
.capability-pathway__rail li > span { display:grid; place-items:center; width:64px; height:64px; margin-bottom:28px; border-radius:50%; background:var(--hero-bg); color:var(--paper); font:800 .8rem/1 "Barlow",sans-serif; box-shadow:0 0 0 8px var(--paper); transition:background-color 260ms ease,transform 350ms var(--ease-out); }
.capability-pathway__rail li:hover > span { background:var(--brand-blue); transform:scale(1.08); }
.capability-pathway__rail strong,
.capability-pathway__rail small { display:block; }
.capability-pathway__rail strong { font:800 1.16rem/1.2 "Barlow",sans-serif; text-transform:uppercase; }
.capability-pathway__rail small { max-width:180px; margin-top:9px; color:var(--muted); font-size:.86rem; }
html[lang="ar"] .capability-pathway__rail strong { font:700 1.12rem/1.45 "Cairo",sans-serif; text-transform:none; }

.catalogue-preview { padding-block:clamp(88px,10vw,136px); }
.catalogue-preview .split-head { margin-bottom:64px; }
.course-discovery { display:grid; grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr); gap:clamp(48px,7vw,88px); align-items:start; }
.course-discovery__canvas {
  position:sticky;
  top:96px;
  height:610px;
  overflow:hidden;
  color:var(--paper);
  background:var(--hero-bg);
  clip-path:polygon(0 0,88% 0,100% 8%,100% 100%,0 100%);
}
.course-discovery__images { position:absolute; inset:0; }
.course-discovery__images::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,15,26,.08),rgba(15,15,26,.7)); }
.course-discovery__images img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; filter:saturate(.68) contrast(1.06); transform:scale(1.07); transition:opacity 520ms ease,transform 900ms var(--ease-out); }
.course-discovery__images img:first-child { opacity:1; transform:scale(1); }
.course-discovery__label { position:absolute; z-index:1; top:24px; inset-inline-start:24px; font:800 .65rem/1 "Barlow",sans-serif; letter-spacing:.14em; }
.course-discovery__canvas > strong { position:absolute; z-index:1; inset-inline-start:-.04em; bottom:-.12em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.32); font:900 clamp(5.2rem,10vw,8.8rem)/.8 "Barlow",sans-serif; letter-spacing:-.065em; writing-mode:vertical-rl; transform:rotate(180deg); }
.course-discovery:has(.course-preview-row:nth-child(2):is(:hover,:focus-visible)) .course-discovery__images img:first-child,
.course-discovery:has(.course-preview-row:nth-child(3):is(:hover,:focus-visible)) .course-discovery__images img:first-child,
.course-discovery:has(.course-preview-row:nth-child(4):is(:hover,:focus-visible)) .course-discovery__images img:first-child,
.course-discovery:has(.course-preview-row:nth-child(5):is(:hover,:focus-visible)) .course-discovery__images img:first-child { opacity:0; transform:scale(1.07); }
.course-discovery:has(.course-preview-row:nth-child(2):is(:hover,:focus-visible)) .course-discovery__images img:nth-child(2),
.course-discovery:has(.course-preview-row:nth-child(3):is(:hover,:focus-visible)) .course-discovery__images img:nth-child(3),
.course-discovery:has(.course-preview-row:nth-child(4):is(:hover,:focus-visible)) .course-discovery__images img:nth-child(4),
.course-discovery:has(.course-preview-row:nth-child(5):is(:hover,:focus-visible)) .course-discovery__images img:nth-child(5) { opacity:1; transform:scale(1); }
.course-discovery .course-ledger { border-top-color:var(--ink); }
.course-discovery .course-preview-row { min-height:122px; padding-inline:16px; transition:background-color 260ms ease,padding-inline 350ms var(--ease-out); }
.course-discovery .course-preview-row:hover,
.course-discovery .course-preview-row:focus-visible { padding-inline:24px; background:var(--paper); }

.closing-band--immersive {
  --pointer-x:78%;
  --pointer-y:45%;
  min-height:640px;
  display:flex;
  align-items:center;
  background:
    radial-gradient(600px circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.18), transparent 62%),
    linear-gradient(135deg,#292483,#3b35ad 72%,#292483);
}
.closing-band--immersive::before { content:""; position:absolute; width:420px; height:420px; inset-inline-end:8%; top:50%; border:1px solid rgba(255,255,255,.14); border-radius:50%; box-shadow:0 0 0 72px rgba(255,255,255,.025),0 0 0 144px rgba(255,255,255,.02); transform:translateY(-50%); }
.closing-band__grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(56px,9vw,120px); align-items:center; }
.closing-band--immersive h2 { max-width:780px; font-size:clamp(2.7rem,5.7vw,5.4rem); line-height:.97; }
html[lang="ar"] .closing-band--immersive h2 { line-height:1.22; }
.closing-band__principles { position:relative; z-index:1; display:grid; grid-template-columns:44px 1fr; gap:0 18px; border-top:1px solid rgba(255,255,255,.38); background:rgba(21,18,74,.25); backdrop-filter:blur(10px); }
.closing-band__principles > * { padding-block:20px; border-bottom:1px solid rgba(255,255,255,.2); }
.closing-band__principles span { color:rgba(255,255,255,.55); font:800 .68rem/1 "Barlow",sans-serif; }
.closing-band__principles strong { color:var(--paper); font:800 .78rem/1 "Barlow",sans-serif; letter-spacing:.1em; }
html[lang="ar"] .closing-band__principles strong { font:700 .92rem/1.45 "Cairo",sans-serif; letter-spacing:0; }

@supports (animation-timeline: view()) {
  .capability-pathway__rail::after {
    transform:scaleX(0);
    animation:pathway-draw linear both;
    animation-timeline:view();
    animation-range:entry 25% cover 58%;
  }
  @keyframes pathway-draw { to { transform:scaleX(1); } }
}

@media (prefers-reduced-motion:no-preference) {
  ::view-transition-old(root) { animation:page-out 220ms ease both; }
  ::view-transition-new(root) { animation:page-in 420ms var(--ease-out) both; }
  @keyframes page-out { to { opacity:0; transform:scale(.995); } }
  @keyframes page-in { from { opacity:0; clip-path:inset(0 0 4% 0); transform:translateY(8px); } }

  html.reveal-ready .audience-path.visual-reveal:nth-child(2),
  html.reveal-ready .capability-system__cards .capability-card.visual-reveal:nth-child(2),
  html.reveal-ready .approach-expertise.visual-reveal,
  html.reveal-ready .closing-band__principles.visual-reveal { --reveal-delay:110ms; }

  html.reveal-ready .capability-pathway__rail li.visual-reveal:nth-child(2) { --reveal-delay:70ms; }
  html.reveal-ready .capability-pathway__rail li.visual-reveal:nth-child(3) { --reveal-delay:140ms; }
  html.reveal-ready .capability-pathway__rail li.visual-reveal:nth-child(4) { --reveal-delay:210ms; }

  html.reveal-ready .course-preview-row.visual-reveal {
    --course-row-shift:10px;
    transform:translateX(var(--course-row-shift));
  }
  html[dir="rtl"].reveal-ready .course-preview-row.visual-reveal { --course-row-shift:-10px; }
  html.reveal-ready .course-preview-row.visual-reveal:nth-child(2) { --reveal-delay:45ms; }
  html.reveal-ready .course-preview-row.visual-reveal:nth-child(3) { --reveal-delay:90ms; }
  html.reveal-ready .course-preview-row.visual-reveal:nth-child(4) { --reveal-delay:135ms; }
  html.reveal-ready .course-preview-row.visual-reveal:nth-child(5) { --reveal-delay:180ms; }
  html.reveal-ready .course-preview-row.visual-reveal.is-visible {
    transform:none;
    transition:
      opacity 560ms var(--ease-out) var(--reveal-delay,0ms),
      transform 650ms var(--ease-out) var(--reveal-delay,0ms),
      background-color 260ms ease 0ms,
      padding-inline 350ms var(--ease-out) 0ms;
  }

  html.reveal-ready .capability-card.visual-reveal.is-visible {
    transition:
      opacity 650ms var(--ease-out) var(--reveal-delay,0ms),
      transform 400ms var(--ease-out) var(--reveal-delay,0ms),
      background-color 400ms ease 0ms;
  }
  html.reveal-ready .capability-card.visual-reveal.is-visible:hover,
  html.reveal-ready .capability-card.visual-reveal.is-visible:focus-within {
    transform:translateX(8px);
    transition-delay:0ms;
  }
  html[dir="rtl"].reveal-ready .capability-card.visual-reveal.is-visible:hover,
  html[dir="rtl"].reveal-ready .capability-card.visual-reveal.is-visible:focus-within { transform:translateX(-8px); }

  html.reveal-ready .approach-expertise.visual-reveal.is-visible > div {
    animation:expertise-row-in 520ms var(--ease-out) both;
  }
  html.reveal-ready .approach-expertise.visual-reveal.is-visible > div:nth-of-type(2) { animation-delay:70ms; }
  html.reveal-ready .approach-expertise.visual-reveal.is-visible > div:nth-of-type(3) { animation-delay:140ms; }
  html.reveal-ready .approach-expertise.visual-reveal.is-visible > div:nth-of-type(4) { animation-delay:210ms; }

  html.reveal-ready .closing-band__principles.visual-reveal.is-visible strong { animation:principle-in 520ms var(--ease-out) both; }
  html.reveal-ready .closing-band__principles.visual-reveal.is-visible strong:nth-of-type(3),
  html.reveal-ready .closing-band__principles.visual-reveal.is-visible strong:nth-of-type(4) { animation-delay:80ms; }
  html.reveal-ready .closing-band__principles.visual-reveal.is-visible strong:nth-of-type(5),
  html.reveal-ready .closing-band__principles.visual-reveal.is-visible strong:nth-of-type(6) { animation-delay:160ms; }

  @keyframes expertise-row-in {
    from { opacity:0; transform:translateY(10px); }
  }
  @keyframes principle-in {
    from { opacity:0; transform:translateX(12px); }
  }
}

@media (max-width: 980px) and (min-width:881px) {
  .capability-system__grid { grid-template-columns:minmax(0,.85fr) minmax(380px,1.15fr); gap:48px; }
  .capability-card { padding-inline-end:24px; }
  .course-discovery { grid-template-columns:310px minmax(0,1fr); gap:42px; }
}

@media (max-width:880px) {
  .hero-visual::before { width:230px; height:230px; inset-inline-start:-70px; }
  .capability-system__grid { grid-template-columns:1fr; }
  .capability-system__stage { position:static; }
  .capability-system__media { aspect-ratio:16/9; }
  .capability-system__cards { margin-top:20px; }
  .capability-card { min-height:0; }
  .capability-pathway__head { grid-template-columns:1fr; margin-bottom:56px; }
  .capability-pathway__rail { grid-template-columns:1fr 1fr; gap:48px 24px; }
  .capability-pathway__rail::before,
  .capability-pathway__rail::after { display:none; }
  .capability-pathway__rail li { min-height:170px; border-top:1px solid var(--line); padding-top:20px; }
  .capability-pathway__rail li > span { width:52px; height:52px; margin-bottom:20px; box-shadow:none; }
  .course-discovery { grid-template-columns:1fr; }
  .course-discovery__canvas { position:relative; top:auto; width:100%; height:420px; }
  .course-discovery__canvas > strong { writing-mode:horizontal-tb; transform:none; }
  .closing-band__grid { grid-template-columns:1fr; }
  .closing-band__principles { width:min(100%,520px); }
}

@media (max-width:560px) {
  .language-transition__frame { width:calc(100% - 40px); min-height:52vh; }
  .language-transition__label { font-size:clamp(4rem,24vw,7.2rem); }
  .language-transition::after { background-size:48px 48px; }
  .hero-visual::before { width:180px; height:180px; top:-36px; inset-inline-start:-36px; box-shadow:0 0 0 40px rgba(255,255,255,.022),0 0 0 80px rgba(255,255,255,.015); }
  .hero-visual::after { top:54px; inset-inline-start:40px; }
  .capability-ticker { padding-block:14px; }
  .capability-ticker__group span { gap:20px; padding-inline:20px; }
  .capability-system { padding-block:72px; }
  .capability-system h2 { font-size:clamp(2.1rem,10vw,3rem); }
  .capability-system__media { aspect-ratio:4/3; }
  .capability-card,
  html[dir="rtl"] .capability-card { padding:32px 16px 32px 58px; }
  html[dir="rtl"] .capability-card { padding-inline:58px 16px; }
  .capability-card__number { inset-inline-start:16px; top:35px; }
  .capability-card h3 { font-size:clamp(1.65rem,8vw,2.25rem); }
  .capability-pathway { padding-block:72px; }
  .capability-pathway__head { margin-bottom:44px; }
  .capability-pathway__head h2 { font-size:clamp(2rem,9vw,2.8rem); }
  .capability-pathway__rail { gap:32px 16px; }
  .capability-pathway__rail li { min-height:175px; padding-inline-end:8px; }
  .capability-pathway__rail small { font-size:.78rem; }
  .catalogue-preview { padding-block:72px; }
  .catalogue-preview .split-head { margin-bottom:40px; }
  .course-discovery { gap:36px; }
  .course-discovery__canvas { height:310px; clip-path:polygon(0 0,90% 0,100% 12%,100% 100%,0 100%); }
  .course-discovery__canvas > strong { font-size:clamp(4.4rem,22vw,6rem); }
  .course-discovery .course-preview-row:hover,
  .course-discovery .course-preview-row:focus-visible { padding-inline:0; }
  .closing-band--immersive { min-height:680px; }
  .closing-band--immersive::before { width:280px; height:280px; inset-inline-end:-20%; }
  .closing-band--immersive h2 { font-size:clamp(2.45rem,11vw,3.4rem); }
  .closing-band__principles { grid-template-columns:36px 1fr; }
}

/* Touch screens: standalone links get a 44px tall tap target. */
@media (pointer: coarse) {
  .footer-nav,
  .footer-contact { gap:0; }
  .footer-nav a,
  .footer-contact a,
  .legal-toc a { display:flex; align-items:center; min-height:44px; }
  .legal-toc li { margin:0; }
  .breadcrumb a,
  .contact-list a { display:inline-flex; align-items:center; min-height:44px; }
  .brand-link { min-width:44px; min-height:44px; }
}

@media (prefers-reduced-motion:reduce) {
  .language-transition { display:none !important; }
  .capability-pathway__rail::after { animation:none; transform:scaleX(1); }
  .capability-ticker__track,
  .hero-visual::before,
  .hero-visual::after { animation:none; }
  .capability-ticker__track { transform:none; }
  .capability-system__media img,
  .course-discovery__images img { transition:none; }
}

@media print {
  .site-header,
  .site-footer,
  .legal-toc { display:none !important; }
  .legal-layout { display:block; }
  .page-title { background:#fff; color:#000; padding:24px 0; }
  .page-title :is(h1,p) { color:#000; }
  .legal-body > div > section { break-inside:avoid; }
}