/* =============================================================================
   LIGHT ROAD — DESIGN SYSTEM
   -----------------------------------------------------------------------------
   Single stylesheet, no build step. Authority for every value below is
   input/needed matrials/Brand Guidelines.png unless noted.

   Written with CSS logical properties throughout (margin-inline, inset-inline,
   padding-block …) so the Arabic RTL build is a direction flip, not a fork.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Brand palette (Brand Guidelines.png) ------------------------------- */
  --c-orange: #ff9e2f;
  --c-gray: #99a1af;
  --c-black: #000000;
  --c-white: #ffffff;

  /* --- Derived surfaces --------------------------------------------------- */
  --c-ink: #171516;          /* body text on light */
  --c-ink-soft: #4b4b4b;     /* secondary text on light */
  --c-ink-faint: #6b6b6b;
  --c-surface: #ffffff;
  --c-surface-alt: #fbf8f4;  /* warm off-white section band */
  --c-dark: #0d0d0d;         /* dark section background */
  --c-dark-card: #060606;    /* card on dark */
  --c-dark-line: #1c1c1c;
  --c-dark-text: #cfcfcf;
  --c-dark-text-soft: #9c9c9c;
  --c-slate: #3c3a39;        /* service card surface */
  --c-slate-text: #ded9d4;

  --c-orange-tint: rgba(255, 158, 47, 0.12);
  --c-orange-deep: #e8871a;  /* hover / active only */

  --c-focus: var(--c-orange);

  /* --- Typography --------------------------------------------------------- */
  --font-latin: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-arabic: "Tajawal", "Poppins", system-ui, "Segoe UI", Arial, sans-serif;
  --font-body: var(--font-latin);

  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md: 1.0625rem;   /* 17 */
  --fs-lg: 1.1875rem;   /* 19 */
  --fs-xl: clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-h3: clamp(1rem, 1.25vw, 1.125rem);
  --fs-h2: clamp(1.625rem, 3vw, 2.5rem);
  --fs-h1: clamp(2rem, 5.2vw, 3.75rem);
  --fs-motto: clamp(0.8125rem, 1.35vw, 1.125rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.75;
  --lh-loose: 1.95;

  --tracking-wide: 0.08em;
  --tracking-motto: 0.18em;

  /* --- Space scale -------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Vertical rhythm for full-width sections */
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --section-y-lg: clamp(4.5rem, 9vw, 8rem);

  /* --- Layout ------------------------------------------------------------- */
  --container: 1300px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 1.5rem);

  /* --- Radii — one scale, three steps ------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-pill: 999px;

  /* --- Elevation ---------------------------------------------------------- */
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 14px 30px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 24px 55px rgba(0, 0, 0, 0.22);

  /* --- Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.2s;
  --t-base: 0.35s;
  --t-slow: 0.8s;

  /* --- Controls ----------------------------------------------------------- */
  --control-h: 52px;
  --control-h-sm: 44px;
  --header-h: 84px;
}

/* Arabic pages swap the body face; the Latin stack stays available for the
   brand lockup and the Recon · Target · Execute motto, which stay Latin. */
[dir="rtl"] {
  --font-body: var(--font-arabic);
  --lh-body: 1.9;
  --tracking-wide: 0;
  --tracking-motto: 0.12em;
}

/* -----------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-surface);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video { display: block; max-width: 100%; }

img { height: auto; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

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

button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 { line-height: var(--lh-heading); font-weight: var(--fw-black); }

:target { scroll-margin-block-start: calc(var(--header-h) + 1rem); }

/* --- Focus: always visible, never removed --------------------------------- */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible,
.footer :focus-visible { outline-color: var(--c-orange); }

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

.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 100;
  transform: translateY(-120%);
  background: var(--c-orange);
  color: var(--c-black);
  font-weight: var(--fw-bold);
  padding: var(--s-3) var(--s-5);
  border-end-end-radius: var(--r-sm);
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* -----------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--dark { background: var(--c-dark); color: var(--c-white); }
.section--alt { background: var(--c-surface-alt); }

.divider-bar { block-size: clamp(28px, 4.7vw, 68px); background: var(--c-orange); }

/* --- Section heading ------------------------------------------------------ */
.section-head { max-width: var(--container-narrow); margin-inline: auto; text-align: center; }
.section-head--start { max-width: none; margin-inline: 0; text-align: start; }

.section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  letter-spacing: -0.01em;
  margin-block-end: var(--s-4);
  text-wrap: balance;
}
.section-title em { font-style: normal; color: var(--c-orange); }
.section-title--start { text-align: start; }
.split__body--dark { color: var(--c-dark-text); }
.section--dark .section-title { color: var(--c-white); }

.section-lede {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
  max-width: 62ch;
  margin-inline: auto;
  text-wrap: pretty;
}
.section-head--start .section-lede { margin-inline: 0; }
.section--dark .section-lede { color: var(--c-dark-text); }

/* -----------------------------------------------------------------------------
   4. ICONS
   -------------------------------------------------------------------------- */
.icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  flex: none;
  stroke-width: 2;
}
.icon--sm { inline-size: 1rem; block-size: 1rem; }
/* Directional glyphs mirror in RTL. */
[dir="rtl"] .icon--flip { transform: scaleX(-1); }

/* -----------------------------------------------------------------------------
   5. BUTTONS — three variants, one geometry
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: var(--control-h);
  padding-inline: var(--s-6);
  padding-block: var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  text-align: center;
  border: 2px solid transparent;
  transition: background var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--c-orange); color: var(--c-black); }
.btn--primary:hover { background: var(--c-orange-deep); box-shadow: var(--shadow-md); }

.btn--ghost { border-color: var(--c-white); color: var(--c-white); }
.btn--ghost:hover { background: var(--c-white); color: var(--c-black); }

.btn--quiet { background: #4d4d4d; color: var(--c-white); }
.btn--quiet:hover { background: var(--c-orange); color: var(--c-black); }

.btn--sm { min-block-size: var(--control-h-sm); padding-inline: var(--s-5); font-size: var(--fs-xs); }

/* -----------------------------------------------------------------------------
   6. SITE HEADER — real HTML, at every width
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.site-header.is-stuck {
  position: fixed;
  background: rgba(8, 8, 8, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* Pages without a dark hero behind the header get a solid bar instead of a
   transparent one - otherwise the white nav labels sit on a white page. */
body:not(.has-hero) .site-header {
  position: sticky;
  background: #0a0a0a;
}
body:not(.has-hero) .site-header.is-stuck { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  inline-size: 100%;
}

.brand { flex: none; display: inline-flex; align-items: center; }
.brand img { block-size: clamp(48px, 4.2vw, 58px); inline-size: auto; max-inline-size: 100%; object-fit: contain; }

.nav { margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(0.75rem, 1.9vw, 1.75rem); }

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: var(--c-orange);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--t-base) var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--c-orange); }

.header__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-white);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.lang-switch:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--c-white); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-sm);
  color: var(--c-white);
}
.nav-toggle .icon { inline-size: 1.75rem; block-size: 1.75rem; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* Scrim only exists for the mobile drawer; declared here (before the media
   query) so the query's `display:block` wins on source order as well. */
.nav-scrim { display: none; }

/* --- Mobile drawer -------------------------------------------------------- */
@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }

  /* The drawer is fixed-position and would otherwise paint over its own
     header bar, hiding the logo and the close button. Lift the bar's own
     children above it. */
  .brand,
  .header__actions { position: relative; z-index: 2; }

  .nav {
    z-index: 1;
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: min(360px, 86vw);
    background: #0a0a0a;
    padding: calc(var(--header-h) + var(--s-4)) var(--s-6) var(--s-6);
    transform: translateX(110%);
    /* A fixed element is NOT clipped by `overflow-x: clip` on <body>, so a
       closed drawer parked off-canvas can still widen the scrollable area and
       keeps its links in the tab order. `visibility: hidden` removes it from
       layout overflow, from hit-testing, from tab order and from the
       accessibility tree — all four at once — and is restored the moment the
       drawer opens. The delay keeps the slide-out animation visible. */
    visibility: hidden;
    transition: transform var(--t-base) var(--ease), visibility 0s linear var(--t-base);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    margin-inline-start: 0;
  }
  [dir="rtl"] .nav { transform: translateX(-110%); }
  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--t-base) var(--ease), visibility 0s;
  }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    display: block;
    padding-block: var(--s-4);
    font-size: var(--fs-md);
    border-block-end: 1px solid rgba(255, 255, 255, 0.09);
  }
  .nav__link::after { display: none; }

  .nav__cta { margin-block-start: var(--s-5); }
  .nav__cta .btn { inline-size: 100%; }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
  }
  .nav-scrim.is-open { opacity: 1; visibility: visible; }

  body.nav-open { overflow: hidden; }

  .nav__cta-desktop { display: none; }
}

@media (min-width: 1024px) {
  .nav__cta-mobile { display: none; }
}

/* -----------------------------------------------------------------------------
   7. HERO — background image + real HTML content
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-block-size: clamp(560px, 78vh, 780px);
  padding-block: calc(var(--header-h) + var(--s-7)) var(--s-8);
  color: var(--c-white);
  background: var(--c-dark);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
/* Scrim: keeps text at AA contrast over a busy photograph without washing the
   image out. Direction-aware so the Arabic build darkens the correct edge. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(6, 6, 6, 0.82) 0%, rgba(6, 6, 6, 0.32) 42%, rgba(6, 6, 6, 0.55) 100%),
    linear-gradient(to right, rgba(6, 6, 6, 0.88) 0%, rgba(6, 6, 6, 0.62) 46%, rgba(6, 6, 6, 0.18) 100%);
}
[dir="rtl"] .hero__media::after {
  background:
    linear-gradient(to bottom, rgba(6, 6, 6, 0.82) 0%, rgba(6, 6, 6, 0.32) 42%, rgba(6, 6, 6, 0.55) 100%),
    linear-gradient(to left, rgba(6, 6, 6, 0.88) 0%, rgba(6, 6, 6, 0.62) 46%, rgba(6, 6, 6, 0.18) 100%);
}
[dir="rtl"] .hero__media img { object-position: 38% 50%; }

.hero__content { max-width: 46rem; }

.hero__brand {
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  letter-spacing: -0.015em;
  line-height: var(--lh-tight);
  text-transform: uppercase;
  margin-block-end: var(--s-1);
}
.hero__headline {
  display: block;
  color: var(--c-orange);
  font-size: 0.62em;
  letter-spacing: 0.005em;
}
.hero__motto {
  font-size: var(--fs-motto);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-motto);
  text-transform: uppercase;
  margin-block: var(--s-4) var(--s-4);
}
.hero__lede {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: #eaeaea;
  max-width: 46ch;
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: var(--s-6);
}

/* -----------------------------------------------------------------------------
   7b. PAGE HEADER — interior pages
   -----------------------------------------------------------------------------
   The comps give every interior page the same full-bleed photographic hero as
   the home page. That photograph exists only with the navigation, headline and
   buttons flattened into its pixels (plan §J-12), so it cannot sit behind live
   text. Interior pages therefore use a compact dark band carrying real HTML:
   consistent, fast, translatable, and honest about the missing asset. Swap in
   a photographic treatment once a clean image is supplied.
   -------------------------------------------------------------------------- */
.page-header {
  position: relative;
  background: var(--c-dark);
  color: var(--c-white);
  /* Interior pages carry a sticky, in-flow header, so this needs no
     compensation for it — unlike the home hero, which sits underneath. */
  padding-block: var(--s-7) var(--s-7);
  overflow: hidden;
}
.page-header::after {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -10%;
  inline-size: 46rem;
  block-size: 46rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 158, 47, 0.16) 0%, rgba(255, 158, 47, 0) 62%);
  pointer-events: none;
}
.page-header__inner { position: relative; z-index: 1; }
.page-header h1 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.page-header h1 em { font-style: normal; color: var(--c-orange); }
.page-header p {
  color: var(--c-dark-text);
  font-size: var(--fs-md);
  max-width: 56ch;
  margin-block-start: var(--s-3);
  text-wrap: pretty;
}

/* Breadcrumb ---------------------------------------------------------------- */
.breadcrumb { margin-block-end: var(--s-4); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: #9a9a9a; }
.breadcrumb a { color: #9a9a9a; }
.breadcrumb a:hover { color: var(--c-orange); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current="page"] { color: var(--c-white); }
.breadcrumb .sep { color: #5a5a5a; }
[dir="rtl"] .breadcrumb .sep { transform: scaleX(-1); display: inline-block; }

/* -----------------------------------------------------------------------------
   8. CARD GRIDS
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--s-5); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1023px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px)  {
  .grid--4, .grid--3, .grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Service card --------------------------------------------------------- */
.card-service {
  background: var(--c-slate);
  color: var(--c-white);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-5);
  min-inline-size: 0;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.card-service:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card-service__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 58px;
  block-size: 58px;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.55);
  color: var(--c-white);
  margin-block-end: var(--s-5);
}
.card-service h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); margin-block-end: var(--s-3); }
.card-service p { font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--c-slate-text); }

/* --- Industry card -------------------------------------------------------- */
.card-industry {
  background: var(--c-dark-card);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-4);
  text-align: center;
  min-inline-size: 0;
  transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.card-industry:hover { transform: translateY(-5px); background: #101010; }
.card-industry__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 54px;
  block-size: 54px;
  border-radius: var(--r-pill);
  background: #141414;
  color: var(--c-orange);
  margin-block-end: var(--s-4);
  transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.card-industry:hover .card-industry__icon { transform: scale(1.08); background: var(--c-orange); color: var(--c-black); }
.card-industry h3 { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-white); }

/* --- Segment pills -------------------------------------------------------- */
.pills { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-3); margin-block-end: var(--s-5); }
.pill {
  background: var(--c-black);
  color: var(--c-white);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: var(--s-2) var(--s-5);
  letter-spacing: var(--tracking-wide);
}

/* Light-background variants, for the same components on a white section ------ */
.pills--light .pill { background: var(--c-ink); border-color: transparent; }
.card-industry--light {
  background: var(--c-surface-alt);
  border-color: rgba(0, 0, 0, 0.06);
}
.card-industry--light:hover { background: #fff; box-shadow: var(--shadow-sm); }
.card-industry--light .card-industry__icon { background: var(--c-orange-tint); }
.card-industry--light h3 { color: var(--c-ink); }

/* -----------------------------------------------------------------------------
   8b. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band { background: var(--c-orange); color: var(--c-white); }
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.cta-band .section-title { color: var(--c-white); margin-block-end: var(--s-2); }
.cta-band .section-title em { color: var(--c-black); }
.cta-band p { max-width: 52ch; font-size: var(--fs-md); }
.cta-band .btn--primary { background: var(--c-black); color: var(--c-white); }
.cta-band .btn--primary:hover { background: var(--c-white); color: var(--c-black); }
@media (max-width: 767px) {
  .cta-band__inner { flex-direction: column; align-items: stretch; }
  .cta-band .btn { inline-size: 100%; }
}

/* -----------------------------------------------------------------------------
   8c. STATEMENT BAND + CAPABILITIES (simulation)
   -------------------------------------------------------------------------- */
.statement-band {
  background: linear-gradient(160deg, #101010 0%, #060606 100%);
  color: var(--c-white);
  padding-block: var(--section-y);
  text-align: center;
}
.statement-band__title {
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: var(--fw-black);
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-transform: uppercase;
  text-wrap: balance;
}
.statement-band__body {
  color: var(--c-dark-text);
  font-size: var(--fs-md);
  max-width: 52ch;
  margin: var(--s-4) auto 0;
  text-wrap: pretty;
}
.capability-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-4) clamp(1.5rem, 5vw, 4rem);
  margin-block-start: var(--s-7);
}
.capability {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-white);
  max-inline-size: 9rem;
  text-align: center;
}
.capability__icon { color: var(--c-orange); display: inline-flex; }

/* Sector badges ------------------------------------------------------------- */
.sector-badges { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-block-start: var(--s-6); }
.sector-badge {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--c-surface-alt);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--shadow-sm);
}
.sector-badge__icon {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 40px; block-size: 40px;
  border-radius: var(--r-sm);
  background: var(--c-orange-tint);
  color: var(--c-orange);
}
.sector-badge__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.sector-badge strong { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-ink); }

/* Numbered objectives -------------------------------------------------------- */
.objectives {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin-block-start: var(--s-7);
  counter-reset: none;
}
@media (max-width: 767px) { .objectives { grid-template-columns: minmax(0, 1fr); } }
.objective {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  background: var(--c-dark-card);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--r-md);
  padding: var(--s-5);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.objective:hover { transform: translateY(-4px); border-color: rgba(255, 158, 47, 0.35); }
.objective__num {
  flex: none;
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--c-orange);
  line-height: 1.2;
  min-inline-size: 2.25rem;
}
.objective p { color: var(--c-dark-text); font-size: var(--fs-sm); line-height: var(--lh-body); }

/* -----------------------------------------------------------------------------
   9. GALLERY TEASER
   -------------------------------------------------------------------------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
/* Three thumbnails stay side by side down to 640px; below that a single
   full-width tile reads better than 160px stamps. */
@media (max-width: 639px) { .gallery-grid { grid-template-columns: minmax(0, 1fr); } }

.gallery-item {
  border-radius: var(--r-sm);
  overflow: hidden;
  aspect-ratio: 471 / 478;
  background: var(--c-dark);
}
.gallery-item img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.gallery-item:hover img { transform: scale(1.06); }

/* Gallery page grid — uniform tiles from mixed-aspect source photography ----- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-4);
  margin-block-start: var(--s-6);
}
.media-tile {
  border-radius: var(--r-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-dark);
}
/* <picture> is inline by default, so an <img> inside it has no height to
   resolve `block-size: 100%` against and object-fit never kicks in. */
.media-tile picture,
.gallery-item picture { display: block; inline-size: 100%; block-size: 100%; }
.media-tile img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.media-tile:hover img { transform: scale(1.05); }

.gallery-note {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  justify-content: center;
  color: var(--c-ink-faint);
  font-size: var(--fs-sm);
  font-style: italic;
}
.gallery-note .icon { color: var(--c-orange); }

.section-actions { display: flex; justify-content: flex-end; margin-block-start: var(--s-6); }
@media (max-width: 559px) { .section-actions { justify-content: stretch; }
  .section-actions .btn { inline-size: 100%; } }

/* -----------------------------------------------------------------------------
   10. SPLIT (courses teaser)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 899px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .split__media { order: -1; }
}
.split__body { font-size: var(--fs-md); line-height: var(--lh-body); color: #333; margin-block: var(--s-5) var(--s-6); text-wrap: pretty; }
.split__media img { border-radius: var(--r-md); inline-size: 100%; }

/* -----------------------------------------------------------------------------
   11. PARTNERS
   -------------------------------------------------------------------------- */
.partners-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  margin-block-start: var(--s-7);
}
.partners-row img {
  block-size: clamp(60px, 7vw, 92px);
  inline-size: auto;
  border-radius: var(--r-sm);
  filter: grayscale(35%);
  transition: transform var(--t-base) var(--ease), filter var(--t-base) var(--ease);
}
.partners-row img:hover { transform: translateY(-4px) scale(1.04); filter: grayscale(0); }

/* -----------------------------------------------------------------------------
   12. CTA BANNER
   -------------------------------------------------------------------------- */
.cta-banner img { inline-size: 100%; }

/* -----------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--c-black); color: var(--c-white); padding-block-start: var(--section-y); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.15fr 1fr;
  gap: var(--s-6) var(--s-5);
  padding-block-end: var(--s-8);
}
@media (max-width: 1023px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__about { grid-column: 1 / -1; } }
@media (max-width: 559px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }

.footer__logo { inline-size: 190px; block-size: auto; object-fit: contain; margin-block-end: var(--s-5); }
.footer__about p { color: #a9a9a9; font-size: var(--fs-sm); line-height: var(--lh-body); margin-block-end: var(--s-4); max-width: 42ch; }

.footer h2 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-block-end: var(--s-5);
}
.footer__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  color: #c7c7c7;
  font-size: var(--fs-sm);
  margin-block-end: var(--s-4);
  line-height: 1.55;
}
.footer__list .icon { color: var(--c-orange); inline-size: 1rem; block-size: 1rem; margin-block-start: 0.28em; }
.footer__list a:hover { color: var(--c-orange); text-decoration: underline; text-underline-offset: 3px; }

.footer__social { display: flex; gap: var(--s-3); margin-block-start: var(--s-5); }
.footer__social a,
.footer__social span {
  inline-size: 38px; block-size: 38px;
  border-radius: var(--r-pill);
  border: 1px solid #333;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.footer__social a:hover { border-color: var(--c-orange); color: var(--c-orange); }
.footer__social span { opacity: 0.45; }
.footer__handle { color: #8a8a8a; font-size: var(--fs-xs); margin-block-start: var(--s-3); }

.footer__bottom { border-block-start: 1px solid var(--c-dark-line); padding-block: var(--s-5); }
.footer__bottom-inner {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--s-3);
}
.footer__bottom p { color: #8a8a8a; font-size: var(--fs-xs); }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer__legal li { color: #6d6d6d; font-size: var(--fs-xs); }

/* -----------------------------------------------------------------------------
   13b. ABOUT PAGE
   -------------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about-text p { color: #2c2c2c; line-height: var(--lh-body); margin-block-end: var(--s-4); font-size: var(--fs-md); text-wrap: pretty; }
.about-text p:last-child { margin-block-end: 0; }
.about-text .hl { color: var(--c-orange); font-weight: var(--fw-semibold); }
.about-photos { display: flex; flex-direction: column; gap: var(--s-5); }
.about-photos img { border-radius: var(--r-md); inline-size: 100%; }
@media (max-width: 899px) { .about-grid { grid-template-columns: minmax(0, 1fr); } }

/* Mission — orange feature band ---------------------------------------------- */
.mission { background: var(--c-orange); color: var(--c-white); }
.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.mission-label {
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  margin-block-end: var(--s-5);
}
.mission-statement { font-size: var(--fs-lg); font-weight: var(--fw-medium); line-height: 2.1; text-wrap: pretty; }
.mission-visual { position: relative; }
.mission-visual img { border-radius: var(--r-md); }
.mission-visual .mission-photo { inline-size: 78%; box-shadow: var(--shadow-md); }
.mission-visual .mission-ai {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: -8%;
  inline-size: 62%;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 899px) {
  .mission-grid { grid-template-columns: minmax(0, 1fr); }
  .mission-visual { margin-block-end: var(--s-7); }
  .mission-statement { font-size: var(--fs-md); line-height: 1.95; }
}

/* Vision + core values ------------------------------------------------------- */
.vision { background: var(--c-dark); color: var(--c-white); text-align: center; }
.vision-label {
  color: var(--c-orange);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  margin-block-end: var(--s-4);
}
.vision-statement {
  font-size: clamp(1rem, 1.7vw, 1.375rem);
  line-height: 1.95;
  max-width: 62rem;
  margin-inline: auto;
  text-wrap: pretty;
}
.values-grid { margin-block-start: var(--s-8); }
.card-value {
  background: var(--c-dark-card);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-5);
  text-align: start;
  min-inline-size: 0;
  transition: transform var(--t-base) var(--ease);
}
.card-value:hover { transform: translateY(-5px); }
.card-value__icon {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 54px; block-size: 54px;
  border-radius: var(--r-md);
  background: var(--c-orange-tint);
  color: var(--c-orange);
  margin-block-end: var(--s-5);
}
.card-value h3 {
  color: var(--c-white);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  margin-block-end: var(--s-3);
}
.card-value p { color: var(--c-dark-text-soft); font-size: var(--fs-sm); line-height: var(--lh-body); }

/* Team ----------------------------------------------------------------------- */
.team-kicker { color: var(--c-orange); font-weight: var(--fw-bold); font-size: var(--fs-sm); margin-block-end: var(--s-4); }
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.25rem) var(--s-5);
  margin-block-start: var(--s-8);
}
@media (max-width: 1023px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 419px)  { .team-grid { grid-template-columns: minmax(0, 1fr); } }

.team-member { text-align: center; min-inline-size: 0; }
.team-photo {
  inline-size: clamp(110px, 13vw, 168px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  margin-inline: auto;
  margin-block-end: var(--s-4);
  border: 3px solid var(--c-white);
  box-shadow: var(--shadow-sm);
  background: var(--c-dark);
  transition: transform var(--t-base) var(--ease);
}
.team-member:hover .team-photo { transform: translateY(-5px) scale(1.03); }
.team-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* No photograph supplied yet: a monogram, not a blank disc. */
.team-photo--monogram {
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #2a2a2a 0%, #141414 100%);
  color: var(--c-orange);
  font-weight: var(--fw-black);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  letter-spacing: 0.06em;
}
.team-member h3 { color: var(--c-orange); font-size: var(--fs-h3); font-weight: var(--fw-bold); margin-block-end: var(--s-1); }
.team-member p { color: #333; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.team-member .team-pending { display: block; color: var(--c-ink-faint); font-size: var(--fs-xs); font-weight: var(--fw-regular); margin-block-start: var(--s-1); font-style: italic; }

/* -----------------------------------------------------------------------------
   13c. FORMS + CONTACT PAGE
   -------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 899px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }

.form { margin-block-start: var(--s-6); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 599px) { .form__row { grid-template-columns: minmax(0, 1fr); } }

.field { margin-block-end: var(--s-5); min-inline-size: 0; }
.field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  margin-block-end: var(--s-2);
}
.field .req { color: var(--c-orange); }
.field__hint { font-weight: var(--fw-regular); color: var(--c-ink-faint); }

.field input,
.field select,
.field textarea {
  inline-size: 100%;
  min-block-size: var(--control-h);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface-alt);
  border: 1px solid #ddd6cc;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.field textarea { min-block-size: 9rem; resize: vertical; line-height: 1.7; }
.field select { appearance: none; cursor: pointer; padding-inline-end: var(--s-7); }
.field input::placeholder,
.field textarea::placeholder { color: #9a938a; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #c9c0b4; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  background: var(--c-surface);
  border-color: var(--c-orange);
  box-shadow: 0 0 0 3px rgba(255, 158, 47, 0.18);
  outline: none;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

.field--invalid input,
.field--invalid select,
.field--invalid textarea { border-color: #c0392b; background: #fdf4f3; }
.field__error { color: #c0392b; font-size: var(--fs-xs); margin-block-start: var(--s-2); font-weight: var(--fw-medium); }

.form__actions { display: flex; justify-content: flex-end; margin-block-start: var(--s-2); }
@media (max-width: 599px) { .form__actions { justify-content: stretch; } .form__actions .btn { inline-size: 100%; } }

/* Honeypot: reachable to nothing that matters, invisible to people, and not
   display:none — some bots skip hidden inputs. */
.form__trap {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* Alerts --------------------------------------------------------------------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-block-start: var(--s-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.alert strong { display: block; font-weight: var(--fw-bold); margin-block-end: var(--s-1); }
.alert .icon { flex: none; margin-block-start: 0.15em; }
.alert--success { background: #edf7ee; border: 1px solid #bfe0c4; color: #1f5b2a; }
.alert--success .icon { color: #2e7d3a; }
.alert--error { background: #fdf1f0; border: 1px solid #f0c6c1; color: #8c2b20; }
.alert--error .icon { color: #c0392b; }

/* Contact details ------------------------------------------------------------ */
.contact-details {
  background: var(--c-surface-alt);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-5);
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--s-4));
}
@media (max-width: 899px) { .contact-details { position: static; } }
.contact-list { margin-block-start: var(--s-5); }
.contact-list li { display: flex; gap: var(--s-4); margin-block-end: var(--s-5); align-items: flex-start; }
.contact-list li:last-child { margin-block-end: 0; }
.contact-list__icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 42px; block-size: 42px;
  border-radius: var(--r-sm);
  background: var(--c-orange-tint);
  color: var(--c-orange);
}
.contact-list__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-block-end: var(--s-1);
}
.contact-list a, .contact-list span:not(.contact-list__label):not(.contact-list__icon) {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  line-height: 1.7;
}
.contact-list a:hover { color: var(--c-orange); text-decoration: underline; text-underline-offset: 3px; }
.contact-list__map {
  display: inline-flex !important;
  align-items: center;
  gap: var(--s-1);
  margin-block-start: var(--s-2);
  color: var(--c-orange) !important;
  font-weight: var(--fw-semibold);
}

/* -----------------------------------------------------------------------------
   13d. ACCOUNT PAGES
   -------------------------------------------------------------------------- */
.auth-layout { display: grid; place-items: start center; }
.auth-card {
  inline-size: 100%;
  max-inline-size: 34rem;
  background: var(--c-surface);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-sm);
}
.auth-card .form { margin-block-start: var(--s-5); }
.auth-alt { margin-block-start: var(--s-5); font-size: var(--fs-sm); color: var(--c-ink-soft); text-align: center; }
.auth-alt a { color: var(--c-orange); font-weight: var(--fw-semibold); }
.auth-alt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-note {
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid rgba(0, 0, 0, 0.07);
  font-size: var(--fs-xs);
  color: var(--c-ink-faint);
  line-height: 1.7;
}
.alert--notice { background: #fff7ec; border: 1px solid #f2d6ac; color: #7a4c10; }
.alert--notice .icon { color: var(--c-orange-deep); }

.form__actions--full { justify-content: stretch; }
.form__actions--full .btn { inline-size: 100%; }
.field__hint-block { font-size: var(--fs-xs); color: var(--c-ink-faint); margin-block-start: var(--s-2); }

/* Password reveal ------------------------------------------------------------ */
.field__with-toggle { position: relative; }
.field__with-toggle input { padding-inline-end: 3rem; }
.pw-toggle {
  position: absolute;
  inset-inline-end: var(--s-2);
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 38px; block-size: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  color: var(--c-ink-faint);
}
.pw-toggle:hover { color: var(--c-orange); background: rgba(0, 0, 0, 0.04); }

.logout-form { display: inline-flex; }
.logout-form--block { display: block; margin-block-start: var(--s-6); }
.lang-switch--button { cursor: pointer; font-family: inherit; }
.btn--ghost-dark { border-color: rgba(255, 255, 255, 0.5); }

/* -----------------------------------------------------------------------------
   13e. COURSES — filters, cards, empty state, benefits
   -------------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  background: var(--c-surface-alt);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.filter-bar__search { position: relative; flex: 1 1 16rem; min-inline-size: 0; }
.filter-bar__icon {
  position: absolute; inset-inline-start: var(--s-3); inset-block-start: 50%;
  transform: translateY(-50%); color: var(--c-ink-faint); display: inline-flex; pointer-events: none;
}
.filter-bar__search input {
  inline-size: 100%; min-block-size: var(--control-h-sm);
  padding: var(--s-2) var(--s-4);
  padding-inline-start: 2.5rem;
  background: var(--c-surface); border: 1px solid #ddd6cc; border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.filter-bar__field { flex: 0 1 12rem; min-inline-size: 0; }
.filter-bar__field select {
  inline-size: 100%; min-block-size: var(--control-h-sm);
  padding: var(--s-2) var(--s-4);
  background: var(--c-surface); border: 1px solid #ddd6cc; border-radius: var(--r-sm);
  font-size: var(--fs-sm); cursor: pointer;
}
.filter-bar__search input:focus-visible,
.filter-bar__field select:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.filter-bar__clear { font-size: var(--fs-sm); color: var(--c-orange); font-weight: var(--fw-semibold); }
.filter-bar__clear:hover { text-decoration: underline; text-underline-offset: 3px; }

.result-count { margin-block: var(--s-5) var(--s-4); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink-soft); }

.course-grid { margin-block-start: var(--s-4); }
.course-card {
  background: var(--c-surface);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--r-md);
  overflow: hidden;
  min-inline-size: 0;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.course-card__link { display: block; block-size: 100%; }
.course-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-dark); }
.course-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.course-card__body { padding: var(--s-5); }
.course-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-block-end: var(--s-3); }
.tag {
  background: var(--c-orange); color: var(--c-black);
  font-size: 0.6875rem; font-weight: var(--fw-bold);
  padding: 0.2rem var(--s-3); border-radius: var(--r-pill);
}
.course-card__level { font-size: var(--fs-xs); color: var(--c-ink-faint); }
.course-card__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); margin-block-end: var(--s-2); }
.course-card__summary { font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: var(--lh-body); }
.course-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-block-start: var(--s-4); padding-block-start: var(--s-4);
  border-block-start: 1px solid rgba(0, 0, 0, 0.07);
  font-size: var(--fs-sm); color: var(--c-ink-faint);
}
.course-card__foot span { display: inline-flex; align-items: center; gap: var(--s-2); }
.course-card__price { font-weight: var(--fw-bold); color: var(--c-ink); }

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-block-start: var(--s-7); }
.pagination__status { font-size: var(--fs-sm); color: var(--c-ink-faint); }

.empty-state {
  text-align: center;
  border: 1px dashed rgba(0, 0, 0, 0.16);
  border-radius: var(--r-md);
  padding: clamp(2rem, 6vw, 4rem) var(--s-5);
  background: var(--c-surface-alt);
}
.empty-state__icon {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 64px; block-size: 64px;
  border-radius: var(--r-pill);
  background: var(--c-orange-tint); color: var(--c-orange);
  margin-block-end: var(--s-4);
}
.empty-state h2, .empty-state h3 { font-size: var(--fs-xl); margin-block-end: var(--s-3); }
.empty-state p { color: var(--c-ink-soft); max-width: 52ch; margin-inline: auto; margin-block-end: var(--s-5); }

.statement-line { font-size: var(--fs-lg); font-weight: var(--fw-medium); max-width: 46ch; }

.card-benefit {
  position: relative;
  background: var(--c-surface-alt);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-5);
  min-inline-size: 0;
  transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.card-benefit:hover { transform: translateY(-5px); background: var(--c-surface); box-shadow: var(--shadow-sm); }
.card-benefit__num {
  display: block;
  font-size: var(--fs-xl); font-weight: var(--fw-black);
  color: var(--c-orange);
  margin-block-end: var(--s-3);
}
.card-benefit h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); margin-block-end: var(--s-3); }
.card-benefit p { font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: var(--lh-body); }

/* -----------------------------------------------------------------------------
   13f. DASHBOARD
   -------------------------------------------------------------------------- */
.stat-row { margin-block-end: var(--s-8); }
.stat {
  background: var(--c-surface-alt);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-md);
  padding: var(--s-5);
  min-inline-size: 0;
}
.stat__icon {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px;
  border-radius: var(--r-sm);
  background: var(--c-orange-tint); color: var(--c-orange);
  margin-block-end: var(--s-4);
}
.stat__value { font-size: 2rem; font-weight: var(--fw-black); line-height: 1.1; }
.stat__label { font-size: var(--fs-sm); color: var(--c-ink-faint); margin-block-start: var(--s-1); }

.dash-heading { margin-block: var(--s-8) var(--s-5); font-size: var(--fs-xl); }
.dash-heading:first-of-type { margin-block-start: 0; }

.table-wrap { overflow-x: auto; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--r-md); }
.data-table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-inline-size: 34rem; }
.data-table th, .data-table td { padding: var(--s-3) var(--s-4); text-align: start; }
.data-table thead th {
  background: var(--c-surface-alt);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  border-block-end: 1px solid rgba(0, 0, 0, 0.08);
}
.data-table tbody tr + tr td { border-block-start: 1px solid rgba(0, 0, 0, 0.06); }

.badge {
  display: inline-block; border-radius: var(--r-pill);
  padding: 0.15rem var(--s-3);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  background: #eee; color: #444;
}
.badge--paid { background: #e6f4ea; color: #1f5b2a; }
.badge--pending { background: #fff4e0; color: #8a5a12; }
.badge--failed, .badge--cancelled { background: #fdecea; color: #8c2b20; }
.badge--refunded { background: #eef1fb; color: #2f3f7a; }

.detail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-4); }
.detail-list > div {
  background: var(--c-surface-alt);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}
.detail-list dt {
  font-size: 0.6875rem; font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--c-ink-faint); margin-block-end: var(--s-1);
}
.detail-list dd { font-size: var(--fs-sm); color: var(--c-ink); }

/* -----------------------------------------------------------------------------
   14. DEVELOPMENT PLACEHOLDER (routes scheduled but not yet built)
   -------------------------------------------------------------------------- */
.placeholder { display: grid; place-items: center; min-block-size: 62vh; text-align: center; padding-block: var(--section-y-lg); }
.placeholder__kicker {
  display: inline-block;
  background: var(--c-orange-tint);
  color: var(--c-orange-deep);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--s-2) var(--s-4);
  margin-block-end: var(--s-5);
}
.placeholder h1 { font-size: var(--fs-h2); margin-block-end: var(--s-4); }
.placeholder p { color: var(--c-ink-soft); max-width: 52ch; margin-inline: auto; }
.placeholder__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-block-start: var(--s-6); }

/* -----------------------------------------------------------------------------
   15. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

.reveal-group > * { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-group.is-visible > * { opacity: 1; transform: none; }
.reveal-group.is-visible > *:nth-child(1) { transition-delay: 0.02s; }
.reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.20s; }
.reveal-group.is-visible > *:nth-child(5) { transition-delay: 0.26s; }
.reveal-group.is-visible > *:nth-child(6) { transition-delay: 0.32s; }
.reveal-group.is-visible > *:nth-child(7) { transition-delay: 0.38s; }
.reveal-group.is-visible > *:nth-child(8) { transition-delay: 0.44s; }

/* JS off: never hide content. */
.no-js .reveal,
.no-js .reveal-group > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .reveal-group > * { opacity: 1 !important; transform: none !important; }
  .btn:hover, .card-service:hover, .card-industry:hover { transform: none; }
}

/* -----------------------------------------------------------------------------
   16. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .nav-scrim, .hero__media, .cta-banner { display: none !important; }
  body { color: #000; background: #fff; }
  .reveal, .reveal-group > * { opacity: 1 !important; transform: none !important; }
}

/* -----------------------------------------------------------------------------
   17. ADMIN AREA
   -----------------------------------------------------------------------------
   Internal tool, English-only, deliberately plain: density and legibility
   matter more here than brand expression.
   -------------------------------------------------------------------------- */
body.admin { background: #f4f2ef; }

.admin-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-block-size: 100vh; }
@media (max-width: 899px) { .admin-shell { grid-template-columns: minmax(0, 1fr); } }

.admin-nav {
  background: var(--c-dark);
  color: var(--c-white);
  padding: var(--s-5) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.admin-nav__brand img { inline-size: 150px; block-size: auto; }
.admin-nav__label {
  font-size: 0.6875rem; font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--c-orange);
}
.admin-nav nav ul { display: flex; flex-direction: column; gap: var(--s-1); }
.admin-nav nav a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: #cfcfcf;
}
.admin-nav nav a:hover { background: rgba(255, 255, 255, 0.06); color: var(--c-white); }
.admin-nav nav a[aria-current="page"] { background: var(--c-orange); color: var(--c-black); font-weight: var(--fw-bold); }
.admin-nav__foot { margin-block-start: auto; border-block-start: 1px solid #222; padding-block-start: var(--s-4); }
.admin-nav__user { font-size: var(--fs-xs); color: #9a9a9a; margin-block-end: var(--s-3); }

.admin-main { padding: clamp(1.25rem, 3vw, 2.5rem); min-inline-size: 0; }
.admin-title { font-size: var(--fs-h2); margin-block-end: var(--s-5); }
.admin-block { margin-block-start: var(--s-8); }
.admin-block h2 { font-size: var(--fs-xl); margin-block-end: var(--s-4); }
.admin-actions { margin-block-end: var(--s-5); display: flex; gap: var(--s-3); flex-wrap: wrap; }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-4); }
.admin-stat {
  background: var(--c-surface); border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
}
.admin-stat__value { font-size: 1.85rem; font-weight: var(--fw-black); line-height: 1.1; }
.admin-stat__label { font-size: var(--fs-xs); color: var(--c-ink-faint); margin-block-start: var(--s-1); }

.admin-form { background: var(--c-surface); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--r-md); padding: var(--s-5); }
.admin-fieldset { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--r-sm); padding: var(--s-4); margin-block-end: var(--s-5); }
.admin-fieldset legend { padding-inline: var(--s-2); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.field--check label { display: flex; align-items: center; gap: var(--s-3); font-weight: var(--fw-regular); }
.field--check input { inline-size: auto; min-block-size: auto; }

.inline-form { display: inline-flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.inline-form select { min-block-size: 34px; padding: 0 var(--s-3); border: 1px solid #ddd6cc; border-radius: var(--r-sm); font-size: var(--fs-xs); }
.data-table code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8em; }
.muted { color: var(--c-ink-faint); font-size: var(--fs-sm); }
.admin .table-wrap { background: var(--c-surface); }

.message-list { display: flex; flex-direction: column; gap: var(--s-4); }
.message { background: var(--c-surface); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--r-md); padding: var(--s-5); }
.message--new { border-inline-start: 4px solid var(--c-orange); }
.message__head { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; align-items: flex-start; }
.message__head h2 { font-size: var(--fs-md); margin-block-end: var(--s-2); }
.message__from { font-size: var(--fs-sm); }
.message__meta { font-size: var(--fs-xs); color: var(--c-ink-faint); margin-block-start: var(--s-1); }
.message__body { margin-block-start: var(--s-4); padding-block-start: var(--s-4); border-block-start: 1px solid rgba(0, 0, 0, 0.07); font-size: var(--fs-sm); line-height: var(--lh-body); }
.message__body p + p { margin-block-start: var(--s-3); }

/* -----------------------------------------------------------------------------
   18. COURSE DETAIL
   -------------------------------------------------------------------------- */
.course-detail { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 899px) { .course-detail { grid-template-columns: minmax(0, 1fr); } }
.prose p { margin-block-end: var(--s-4); line-height: var(--lh-body); color: #2c2c2c; }

.curriculum { display: flex; flex-direction: column; gap: var(--s-4); }
.module { background: var(--c-surface-alt); border: 1px solid rgba(0, 0, 0, 0.07); border-radius: var(--r-md); padding: var(--s-5); }
.module__head { display: flex; align-items: baseline; gap: var(--s-3); margin-block-end: var(--s-4); }
.module__num { font-size: var(--fs-lg); font-weight: var(--fw-black); color: var(--c-orange); }
.module__head h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.lesson-list { display: flex; flex-direction: column; gap: var(--s-2); }
.lesson {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  background: var(--c-surface); border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); font-size: var(--fs-sm);
}
.lesson__meta { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--c-ink-faint); font-size: var(--fs-xs); flex: none; }
.tag--muted { background: var(--c-gray); color: var(--c-white); }

.course-panel {
  background: var(--c-surface); border: 2px solid var(--c-orange);
  border-radius: var(--r-md); padding: var(--s-6) var(--s-5);
  position: sticky; inset-block-start: calc(var(--header-h) + var(--s-4));
}
@media (max-width: 899px) { .course-panel { position: static; } }
.course-panel__price { font-size: 2rem; font-weight: var(--fw-black); margin-block-end: var(--s-4); }
.course-panel__cta { inline-size: 100%; }
.course-panel__state { display: flex; align-items: center; gap: var(--s-3); color: #1f5b2a; font-weight: var(--fw-semibold); font-size: var(--fs-sm); margin-block-end: var(--s-4); }
.course-panel__state .icon { color: #2e7d3a; }
.course-panel__heading { font-size: var(--fs-md); font-weight: var(--fw-bold); margin-block-end: var(--s-4); }
.course-facts { margin-block-start: var(--s-5); padding-block-start: var(--s-5); border-block-start: 1px solid rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: var(--s-3); }
.course-facts li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--c-ink-soft); }
.course-facts .icon { color: var(--c-orange); }
.course-panel__back { display: inline-flex; align-items: center; gap: var(--s-2); margin-block-start: var(--s-5); font-size: var(--fs-sm); color: var(--c-orange); font-weight: var(--fw-semibold); }

.material-list { display: flex; flex-direction: column; gap: var(--s-3); }
.material-list li { display: flex; align-items: center; gap: var(--s-3); background: var(--c-surface-alt); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: var(--r-sm); padding: var(--s-3); }
.material-list__icon { color: var(--c-orange); flex: none; }
.material-list__body { flex: 1; min-inline-size: 0; }
.material-list__name { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.material-list__meta { display: block; font-size: var(--fs-xs); color: var(--c-ink-faint); }

/* Light Road Auth redesign - brand guidelines */
.auth-layout{min-height:calc(100vh - 120px);align-items:center;background:#fff;padding:3rem 1rem;}
.auth-card{max-width:460px;border-radius:22px;background:#fff;padding:2.5rem;box-shadow:0 20px 60px rgba(0,0,0,.12);border:1px solid #eee;}
.auth-card:before{content:"";display:block;width:150px;height:55px;margin:0 auto 1.5rem;background:url('../images/logo-nav.png') center/contain no-repeat;}
.auth-card .form{margin-top:1.8rem}
.auth-card .field label{font-family:Poppins,Tajawal,sans-serif;font-weight:700}
.auth-card input{height:56px;border-radius:12px;border:1px solid #99A1AF;background:#fff;font-family:Poppins,Tajawal,sans-serif}
.auth-card input:focus{border-color:#FF9E2F;box-shadow:0 0 0 4px rgba(255,158,47,.15)}
.auth-card .btn--primary{height:56px;border-radius:12px;background:#FF9E2F;color:#fff;font-weight:700;font-family:Poppins,Tajawal,sans-serif}
.auth-card .btn--primary:hover{filter:brightness(.95)}
.auth-alt a{color:#FF9E2F}
[dir="rtl"] .auth-card{text-align:right}