/* Hallmark · macrostructure: Orbit-led institutional · tone: formal-direct-institutional
 * signature: the mark's two orbits (steel −18° / gold +42°, measured off the real file) as page geometry
 * fields: calm blocks on navy, photo + full colour only on hover
 * pre-emit critique: P5 H5 E4 S5 R4 V5
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-ar);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-ink);
  background: var(--color-paper);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 700; hyphens: none; overflow-wrap: anywhere; min-width: 0; font-family: var(--font-display); }
body { line-height: 1.7; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand-gold); outline-offset: 3px; border-radius: 3px;
}
.lat { font-family: var(--font-latin); }
.num { font-family: var(--font-ar); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; }
.wrap { width: min(100% - 2.5rem, 1200px); margin-inline: auto; }
@media (max-width: 480px) { .wrap { width: min(100% - 2rem, 1200px); } }
.a11y-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 200; background: var(--brand-blue); color: #fff; padding: .75rem 1rem; border-radius: 4px; }
.skip:focus { top: 1rem; }

/* ══════════════════════════════════════════════ header ══ */
.hdr { position: fixed; inset-inline: 0; top: 0; z-index: 60; padding: var(--space-md) 0; transition: background var(--dur-mid) var(--ease-out), padding var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out); }
.hdr.stuck { padding-block: var(--space-sm); }
@media (max-width: 1079px) {
  .hdr.stuck { background: rgba(255,255,255,.96); box-shadow: 0 1px 0 var(--color-line), var(--shadow-sm); }
  .hdr.stuck .brand img { filter: none; }
}
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.brand { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }
.brand img { height: 40px; width: auto; }
.brand .nm { display: none; }
@media (min-width: 880px) {
  /* both lines of the lockup are set to one width by the fit script */
  .brand .nm { display: flex; flex-direction: column; align-items: flex-start; font-family: var(--font-lockup); font-weight: 800; font-size: 0.9063rem; color: #fff; line-height: 1.3; }
  .brand .nm .ar-line { display: inline-block; white-space: nowrap; }
  .brand .nm .lat { display: inline-block; font-size: 11px; font-weight: 400; opacity: .72; white-space: nowrap; }
  .hdr.stuck .brand .nm { color: var(--brand-logo-blue); }
  .hdr.stuck .brand .nm .lat { color: var(--color-ink-faint); opacity: 1; }
}
.nav { display: none; }
@media (min-width: 1080px) {
  .nav {
    display: flex; align-items: center; gap: var(--space-lg);
    height: 46px;                       /* fixed, so the bar cannot grow in either state */
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(10px); padding-inline: var(--space-lg); border-radius: 999px;
    transition: background var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
  }
  .nav a { font-size: 0.9063rem; font-weight: 500; color: rgba(255,255,255,.88); white-space: nowrap; }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--brand-gold); }
  .hdr.stuck .nav { background: var(--color-paper); border-color: var(--color-line); backdrop-filter: none; box-shadow: 0 6px 26px rgba(20,23,46,.14); }
  .hdr.stuck .nav a { color: var(--color-ink-soft); }
  .hdr.stuck .nav a:hover, .hdr.stuck .nav a[aria-current="page"] { color: var(--brand-blue); }
}
/* scrolled: the whole header collapses into the capsule */
.cap-lockup, .cap-utils { display: none; }
@media (min-width: 1080px) {
  .hdr.stuck .nav {
    margin-inline: auto;
    padding-inline: 8px;
    gap: var(--space-md);
  }
  .hdr.stuck .brand, .hdr.stuck .hdr-acts { display: none; }

  .hdr.stuck .cap-lockup {
    display: flex; align-items: center; gap: var(--space-sm);
    padding-inline-end: var(--space-md); margin-inline-end: var(--space-2xs);
    border-inline-end: 1px solid var(--color-line);
  }
  .cap-lockup img { height: 26px; width: auto; max-width: none; }
  /* one line only in here: matching the two line widths at capsule scale would
     push the Latin under 7px, which is unreadable. The full two-line lockup
     stays at the top of the page where it has room. */
  .cap-lockup .nm { display: block; font-family: var(--font-lockup); font-weight: 800; color: var(--brand-logo-blue); font-size: 0.9063rem; line-height: 1.2; }
  .cap-lockup .nm .ar-line { display: inline-block; white-space: nowrap; }
  .cap-lockup .nm .lat { display: none; }

  .hdr.stuck .cap-utils { display: flex; align-items: center; gap: var(--space-sm); margin-inline-start: var(--space-2xs); }
  /* the register button, not the lockup, is what was stretching the capsule */
  .hdr.stuck .cap-utils .btn { padding: 5px 15px; line-height: 1.2; }
  .cap-lang {
    font-family: var(--font-latin); font-size: var(--text-xs); font-weight: 700;
    color: var(--color-ink-soft); background: none; cursor: pointer;
    border: 0; border-inline-start: 1px solid var(--color-line);
    padding-block: 3px; padding-inline-start: var(--space-md); padding-inline-end: 0;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .cap-lang:hover { color: var(--brand-blue); }
}

.hdr-acts { display: flex; align-items: center; gap: var(--space-xs); flex-shrink: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 20px; border-radius: 999px; font-family: inherit; font-size: var(--text-sm); font-weight: 600; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
[dir="rtl"] .btn svg { transform: scaleX(-1); }
.btn-gold { background: var(--brand-gold); color: var(--color-on-gold); }
.btn-gold:hover { background: #e4c526; }
.btn-glass { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.btn-glass:hover { background: rgba(255,255,255,.2); }
.hdr.stuck .btn-glass { border-color: var(--color-line-2); color: var(--color-ink-soft); background: transparent; }
.btn-ghost { border-color: var(--color-line-2); color: var(--color-ink); }
.btn-ghost:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.btn-sm { padding: 9px 14px; font-size: 0.8125rem; }
.menu-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: #fff; cursor: pointer; }
.hdr.stuck .menu-btn { background: transparent; border-color: var(--color-line-2); color: var(--color-ink); }
@media (min-width: 1080px) { .menu-btn { display: none; } }
.menu-btn svg { width: 19px; height: 19px; }
.drawer { display: none; background: var(--color-paper); border-radius: var(--radius-lg); margin-top: var(--space-sm); padding: var(--space-sm) var(--space-lg) var(--space-lg); box-shadow: var(--shadow-md); }
.drawer.open { display: block; }
.drawer a { display: block; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-line); font-weight: 500; }
@media (min-width: 1080px) { .drawer { display: none !important; } }

/* ════════════════════════════════════════════════ hero ══ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; background: var(--color-night); overflow: hidden; }
.hero .shot { position: absolute; inset: 0; }
.hero .shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.45) contrast(1.06) brightness(.5); }
.hero .shot::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 78% 18%, rgba(18,22,63,.15) 0%, rgba(18,22,63,.86) 62%), linear-gradient(180deg, rgba(18,22,63,.72) 0%, rgba(18,22,63,.35) 38%, rgba(18,22,63,.97) 100%); }
.hero .orbits { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.hero .orbits ellipse { fill: none; vector-effect: non-scaling-stroke; }
.orb-steel { stroke: rgba(255,255,255,.42); stroke-width: 1; }
.orb-gold { stroke: var(--brand-gold); stroke-width: 1.4; opacity: .8; }
.orb-dot { fill: var(--brand-gold); filter: drop-shadow(0 0 6px rgba(240,207,44,.9)); }
.orbits .orb-dot { r: 5px; }
.reduce-motion .orb-dot { display: none; }
.hero-in { position: relative; z-index: 3; padding-block: 8rem var(--space-2xl); }
.hero-grid { display: grid; gap: var(--space-2xl); align-items: end; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); } }
.eye { font-size: var(--text-sm); font-weight: 600; color: var(--brand-gold); margin-bottom: var(--space-lg); }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 1.1rem + 3.6vw, 4rem); max-width: 18ch; line-height: 1.15; }
.hero h1 .u { position: relative; display: inline-block; white-space: nowrap; }
/* the drawn arc — same curve language as the section dividers */
.hero h1 .u-arc { position: absolute; inset-inline: -4%; bottom: -.14em; width: 108%; height: .26em; overflow: visible; }
.hero h1 .u-arc path { fill: none; stroke: var(--brand-gold); stroke-width: 5; stroke-linecap: round; }
@media (max-width: 700px) {
  .hero h1 .u-arc { display: none; }
  .hero h1 .u { color: var(--brand-gold); }
}
.hero .sub { margin-top: var(--space-lg); color: rgba(255,255,255,.8); font-size: var(--text-lg); max-width: 54ch; }
.hero .acts { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.card-round { border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-lg); background: rgba(255,255,255,.06); backdrop-filter: blur(14px); padding: var(--space-lg); color: #fff; }
.card-round .lbl { font-size: var(--text-xs); font-weight: 700; color: var(--brand-gold); display: flex; align-items: center; gap: var(--space-xs); }
.card-round .lbl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-gold); flex-shrink: 0; }
.card-round h2 { font-size: var(--text-xl); margin-top: var(--space-sm); font-weight: 600; line-height: 1.4; }
.card-round .meta { margin-top: var(--space-md); }
.card-round .meta div { display: flex; justify-content: space-between; gap: var(--space-md); font-size: var(--text-sm); padding-block: 8px; border-bottom: 1px solid rgba(255,255,255,.14); }
.card-round .k { color: rgba(255,255,255,.7); }
.card-round .v { font-weight: 600; text-align: end; }
.card-round .btn { margin-top: var(--space-lg); width: 100%; }

.figs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid rgba(255,255,255,.22); }
.fig { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; white-space: nowrap; }
.fig .n { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-xl); color: var(--brand-gold); font-variant-numeric: tabular-nums; }
.fig .u { font-size: var(--text-sm); color: rgba(255,255,255,.72); }
.figs-note { margin-inline-start: auto; font-size: var(--text-sm); color: rgba(255,255,255,.55); flex-shrink: 0; white-space: nowrap; }
@media (max-width: 900px) { .figs-note { margin-inline-start: 0; } }

/* ═════════════════════════════════════════════ sections ══ */
.sec { padding-block: var(--space-3xl); }
.sec-sm { padding-block: var(--space-2xl); }
.night { background: var(--color-night); color: #fff; }
.paper2 { background: var(--color-paper-2); }
/* a section following a divider needs less crown padding (see .div + .sec) */
.head { max-width: 66ch; }
.head .rule { width: 52px; height: 3px; background: var(--brand-gold); margin-bottom: var(--space-lg); }
.head .tag { font-size: var(--text-sm); font-weight: 600; color: var(--brand-blue); margin-bottom: var(--space-sm); }
.night .head .tag { color: var(--brand-gold); }
.head h2 { font-size: clamp(1.8rem, 1.4rem + 1.9vw, 2.7rem); }
.head .lede { margin-top: var(--space-md); color: var(--color-ink-soft); font-size: var(--text-lg); }
.night .head .lede { color: rgba(255,255,255,.72); }

/* ══════════════════════════════ fields · calm blocks on navy ══ */
.fields { display: grid; gap: 10px; margin-top: var(--space-2xl); }
@media (min-width: 700px) { .fields { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1060px) { .fields { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.fblock {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 212px; border-radius: var(--radius-md); padding: var(--space-lg);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  transition: border-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.fblock img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0; filter: saturate(.35) brightness(.55); transition: opacity 460ms var(--ease-out), transform 700ms var(--ease-out); }
.fblock::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fc); opacity: 0; transition: opacity 460ms var(--ease-out); }
.fblock:hover { transform: translateY(-3px); border-color: var(--fcl); }
.fblock:hover img { opacity: 1; transform: scale(1.05); }
.fblock:hover::after { opacity: .82; }
.fblock .top { display: flex; align-items: center; justify-content: space-between; }
.fblock .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fcl); }
.fblock h3 { font-size: var(--text-xl); color: #fff; }
.fblock .cnt { display: block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--fcl); margin-top: 6px; font-variant-numeric: tabular-nums; transition: color var(--dur-mid) var(--ease-out); }
.fblock:hover .cnt { color: #fff; }
.fblock .sub { display: block; font-size: var(--text-xs); line-height: 1.55; color: rgba(255,255,255,.62); margin-top: 6px; transition: color var(--dur-mid) var(--ease-out); }
.fblock:hover .sub { color: rgba(255,255,255,.9); }
.fblock:hover .dot { background: #fff; }
.fi { width: 26px; height: 26px; display: block; color: var(--fcl); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: color var(--dur-mid) var(--ease-out); }
.fblock:hover .fi { color: #fff; }

/* ═══════════════════════════════════ since-2010 photo band ══ */
.since { position: relative; min-height: 76svh; display: grid; align-items: center; overflow: hidden; background: var(--color-night); }
.since .bg { position: absolute; inset: -12% 0; }
.since .bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.62) contrast(1.04) brightness(.74); }
.since .bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to left, rgba(18,22,63,.94) 0%, rgba(18,22,63,.80) 34%, rgba(18,22,63,.42) 68%, rgba(18,22,63,.26) 100%),
    linear-gradient(to top, rgba(18,22,63,.55) 0%, transparent 38%);
}
.since .yr { position: absolute; z-index: 2; inset-inline-start: 3%; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-weight: 700; line-height: .8; font-size: clamp(8rem, 4rem + 20vw, 24rem); color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.17); pointer-events: none; user-select: none; }
.since .copy { position: relative; z-index: 3; padding-block: var(--space-3xl); }
.since h2 { color: #fff; font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); max-width: 20ch; }
.since p { margin-top: var(--space-lg); color: rgba(255,255,255,.8); max-width: 52ch; font-size: var(--text-lg); }
.since .badge { margin-top: var(--space-xl); display: inline-flex; flex-direction: column; background: rgba(255,255,255,.07); backdrop-filter: blur(12px); border: 1px solid var(--brand-gold); border-radius: var(--radius-md); padding: var(--space-lg) var(--space-xl); color: #fff; }
.since .badge .n { font-family: var(--font-mono); font-size: clamp(2rem,1.4rem + 2.2vw,3rem); font-weight: 700; color: var(--brand-gold); line-height: 1; }
.since .badge .u { margin-top: 6px; font-size: var(--text-sm); color: rgba(255,255,255,.82); }

/* ═══════════════════════════════════ delivery · split panels ══ */
.panels {
  display: grid; gap: 1px; margin-top: var(--space-2xl);
  border: 1px solid var(--color-line-2); border-radius: var(--radius-md);
  overflow: hidden; background: var(--color-line);
}
@media (min-width: 760px)  { .panels { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .panels { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.panel {
  background: var(--color-paper); padding: var(--space-xl) var(--space-lg);
  min-height: 252px; display: flex; flex-direction: column; gap: var(--space-md);
  transition: background var(--dur-mid) var(--ease-out);
}
.panel .pi { color: var(--brand-blue); flex-shrink: 0; transition: color var(--dur-mid) var(--ease-out); }
.panel .pi svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.panel h3 { font-size: var(--text-xl); font-weight: 700; transition: color var(--dur-mid) var(--ease-out); }
.panel p { color: var(--color-ink-soft); font-size: var(--text-sm); transition: color var(--dur-mid) var(--ease-out); }
.panel .foot {
  margin-top: auto; padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-xs); color: var(--color-ink-faint);
  transition: color var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
}
.panel:hover { background: var(--color-night); }
.panel:hover h3 { color: #fff; }
.panel:hover p { color: rgba(255,255,255,.78); }
.panel:hover .pi { color: var(--brand-gold); }
.panel:hover .foot { color: var(--brand-gold); border-top-color: rgba(255,255,255,.2); }

/* ═══════════════════════════════════ featured programmes · ruled rows ══ */
.prog-list { margin-top: var(--space-2xl); border-top: 1px solid var(--color-line-2); }
.prog {
  display: grid; grid-template-columns: 11rem minmax(0,1fr) auto; gap: var(--space-lg);
  align-items: baseline; padding: var(--space-md) var(--space-sm);
  border-bottom: 1px solid var(--color-line); position: relative;
  transition: background var(--dur-mid) var(--ease-out);
}
.prog::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--fc); transform: scaleY(0); transition: transform var(--dur-mid) var(--ease-out); }
.prog:hover { background: color-mix(in srgb, var(--fc) 6%, transparent); }
.prog:hover::before { transform: scaleY(1); }
.prog .pf { font-size: var(--text-sm); font-weight: 600; color: var(--fc); }
.prog .pn { font-size: var(--text-lg); font-weight: 600; color: var(--color-ink); }
.prog .pd { font-size: var(--text-sm); color: var(--color-ink-faint); white-space: nowrap; }
@media (max-width: 720px) {
  .prog { grid-template-columns: minmax(0,1fr) auto; gap: var(--space-xs) var(--space-md); }
  .prog .pf { grid-column: 1 / -1; font-size: var(--text-xs); }
}

/* ═══════════════════════════════════ why · statement + ruled points ══ */
.why { display: grid; gap: var(--space-2xl); margin-top: var(--space-xl); }
@media (min-width: 1000px) { .why { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: center; } }
.why-lead {
  font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.5rem);
  font-weight: 700; color: var(--color-ink); line-height: 1.35; max-width: 22ch;
}
.why-lead em { font-style: normal; color: var(--brand-blue); }
.why-points { display: grid; }
.why-p {
  padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-line);
  display: grid; grid-template-columns: 3.4rem minmax(0,1fr); gap: var(--space-lg);
  align-items: baseline;
}
.why-p:first-child { border-top: 1px solid var(--color-line-2); }
.why-p .n { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; color: var(--brand-blue); }
.why-p h3 { color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; margin-bottom: 4px; }
.why-p p { color: var(--color-ink-soft); font-size: var(--text-sm); }
@media (max-width: 620px) { .why-p { grid-template-columns: 2.4rem minmax(0,1fr); gap: var(--space-md); } }

/* ═══════════════════════════════════════════ accreditation ══ */
.accs { display: grid; gap: 0; margin-top: var(--space-2xl); border-block: 1px solid var(--color-line-2); }
@media (min-width: 820px) { .accs { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 820px; } }
.acc { display: grid; place-items: center; gap: var(--space-md); padding: var(--space-2xl) var(--space-lg); text-align: center; }
@media (min-width: 820px) { .acc + .acc { border-inline-start: 1px solid var(--color-line); } }
@media (max-width: 819px) { .acc + .acc { border-top: 1px solid var(--color-line); } }
.acc img { height: 74px; width: auto; max-width: 100%; object-fit: contain; }
.acc figcaption { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-soft); }

/* ═══════════════════════════════════════════════ clients ══ */
.clients { display: grid; gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; margin-top: var(--space-2xl); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.client { background: var(--color-paper); min-height: 132px; display: grid; place-items: center; align-content: center; gap: var(--space-xs); padding: var(--space-md); text-align: center; }
.client .nm { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-soft); line-height: 1.45; }
.client img {
  max-height: 54px; max-width: 74%; width: auto; object-fit: contain;
  filter: grayscale(.9) opacity(.85);
  transition: filter var(--dur-mid) var(--ease-out);
}
/* tall marks would otherwise read half the size of wide ones */
.client img[data-tall] { max-height: 66px; max-width: 46%; }
.client:hover img { filter: grayscale(0) opacity(1); }
.client .slot { font-size: var(--text-xs); color: var(--color-ink-faint); background: var(--color-paper-3); border: 1px dashed var(--color-line-2); border-radius: 4px; padding: 5px 12px; }

/* ═══════════════════════════════════════════════════ cta ══ */
.cta { position: relative; overflow: hidden; isolation: isolate; color: #fff; border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.5rem); display: grid; gap: var(--space-lg); align-items: center;
  background: linear-gradient(115deg, var(--color-night) 0%, var(--brand-blue-700) 42%, var(--brand-blue) 100%); }
/* the mark's two orbits, measured like the hero: steel −18°, gold +42°; a point rides the gold one */
.cta::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 92%; aspect-ratio: 2.3; inset-inline-end: -30%; top: -62%; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); transform: rotate(-18deg); }
.cta-orb { position: absolute; z-index: -1; pointer-events: none; width: 50%; aspect-ratio: 2.9; inset-inline-end: -9%; top: 0; border-radius: 50%; border: 1.5px solid rgba(240,207,44,.7); transform: rotate(42deg); }
.cta-orb::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-gold); box-shadow: 0 0 0 6px rgba(240,207,44,.18), 0 0 18px rgba(240,207,44,.7); offset-path: ellipse(50% 50% at 50% 50%); offset-rotate: 0deg; animation: cta-ride 14s linear infinite; }
@keyframes cta-ride { to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .cta-orb::after { animation: none; offset-distance: 22%; } }
.cta .btn-glass { font-family: var(--font-latin); }
.cta .btn-gold { box-shadow: 0 8px 24px rgba(240,207,44,.28); }
@media (max-width: 859px) { .cta::before { top: -30%; } .cta-orb { display: none; } }
@media (min-width: 860px) { .cta { grid-template-columns: minmax(0,1fr) auto; } }
.cta h2 { font-size: clamp(1.5rem,1.2rem + 1.3vw,2rem); }
.cta p { margin-top: var(--space-sm); color: rgba(255,255,255,.82); max-width: 54ch; }
.cta-acts { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ════════════════════════════════════════════════ footer ══ */
.ftr { background: var(--color-night); color: rgba(255,255,255,.72); padding-block: var(--space-2xl) var(--space-lg); font-size: var(--text-sm); }
.ftr-grid { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 800px) { .ftr-grid { grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)); } }
.ftr h3 { font-size: var(--text-sm); color: #fff; margin: 12px 0 var(--space-md); font-weight: 600; line-height: 1.3; }
.ftr a { display: block; padding-block: 5px; }
.ftr a:hover { color: var(--brand-gold); }
.ftr-brand .lock { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.ftr-brand .lock img { height: 46px; width: auto; }
.ftr-brand .lock .nm { font-family: var(--font-lockup); font-weight: 800; font-size: 0.9063rem; color: #fff; line-height: 1.3; }
.ftr-brand .lock .nm { display: flex; flex-direction: column; align-items: flex-start; }
.ftr-brand .lock .nm .ar-line { display: inline-block; white-space: nowrap; }
.ftr-brand .lock .nm .lat { display: inline-block; font-family: var(--font-ar); font-size: 11px; font-weight: 400; letter-spacing: .02em; color: rgba(255,255,255,.6); white-space: nowrap; }
.ftr-brand p { max-width: 42ch; line-height: 1.7; }
.ftr-accs { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg) var(--space-xl); }
.ftr-accs .k { font-size: var(--text-xs); color: rgba(255,255,255,.55); }
.ftr-accs img { height: 44px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.ftr-accs img[src*="tvtc"] { height: 60px; }
.ftr-bot { margin-top: var(--space-md); padding-top: var(--space-lg); border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); justify-content: space-between; font-size: var(--text-xs); color: rgba(255,255,255,.6); }
.ftr-legal .num { color: rgba(255,255,255,.8); }
.ftr-parent { display: flex; align-items: center; gap: 12px; margin-top: var(--space-md); }
.ftr-parent .k { font-size: var(--text-xs); color: rgba(255,255,255,.55); }
.ftr-parent img { height: 46px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.ftr-addr { display: block; padding-block: 5px; line-height: 1.5; } .ftr-addr small { color: rgba(255,255,255,.55); font-size: var(--text-xs); }

/* ════════════════════════════════════════════════ reveal ══ */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .btn:active, .fblock:hover, .mark:hover { transform: none; }
}

/* ═════════════════════════ orbit divider — a curved edge between two grounds ══
 * one curve, reused at every boundary. Three custom properties per instance:
 *   --div-from  the ground above the curve
 *   --div-to    the ground below it (the strip's own background)
 *   --div-line  the hairline on the curve itself
 * The line colour is chosen per boundary — gold, steel, slate or grey — never
 * gold by default.
 */
.div {
  display: block; width: 100%; height: 90px;
  background: var(--div-to, var(--color-paper));
  margin: 0;
}
.div .fill { fill: var(--div-from, var(--color-night)); }
.div .line { fill: none; stroke: var(--div-line, var(--brand-gold)); stroke-width: 1.5; opacity: .55; }
@media (max-width: 700px) { .div { height: 58px; } }

/* named line tones */
.div-gold  { --div-line: var(--brand-gold); }
.div-steel { --div-line: rgba(255,255,255,.6); }
.div-steel .line { opacity: .9; }
.div-slate { --div-line: var(--brand-blue); }   /* only where the line sits on light */
.div-grey  { --div-line: #aeb5cc; }
.div-grey .line { opacity: 1; }

/* Overlay variant — for a section whose own background is a photo.
 * The strip sits INSIDE the section at its edge and paints only the area
 * outside the curve, so the photo runs right up to the curve instead of
 * starting on a straight line below it. */
.div-over {
  position: absolute; inset-inline: 0; z-index: 4;
  background: transparent; pointer-events: none;
}
.div-over.at-top { top: 0; }
.div-over.at-bottom { bottom: 0; transform: scaleY(-1); }

/* a section that sits directly under a divider needs less crown padding */
.div + .sec, .div + .sec-sm { padding-top: var(--space-xl); }

/* ═══════════════════════════════════════════ certificate verify ══ */
.verify { padding-block: calc(var(--space-3xl) + 46px) var(--space-3xl); background: var(--color-paper-2); min-height: 100svh; }
.verify-in { max-width: 820px; }
.v-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.verify h1 { font-size: clamp(1.8rem, 1.4rem + 1.9vw, 2.7rem); }
.verify .lede { margin-top: var(--space-md); color: var(--color-ink-soft); font-size: var(--text-lg); max-width: 60ch; }
.v-lang { display: inline-flex; border: 1px solid var(--color-line-2); border-radius: 999px; overflow: hidden; background: var(--color-paper); flex-shrink: 0; }
.v-lang-btn { font-family: inherit; font-size: var(--text-xs); font-weight: 600; padding: 8px 14px; border: 0; background: none; color: var(--color-ink-soft); cursor: pointer; }
.v-lang-btn[aria-pressed="true"] { background: var(--color-night); color: #fff; }
.v-form { display: flex; gap: var(--space-sm); margin-top: var(--space-xl); flex-wrap: wrap; }
.v-input { flex: 1 1 260px; font-size: var(--text-lg); padding: 12px 16px; border: 1px solid var(--color-line-2); border-radius: var(--radius-md); background: var(--color-paper); color: var(--color-ink); letter-spacing: .04em; }
.v-input:focus { outline: 2px solid var(--brand-blue); outline-offset: 2px; border-color: var(--brand-blue); }
.btn-primary { background: var(--brand-blue); color: #fff; padding-inline: 26px; }
.btn-primary:hover { background: var(--brand-blue-700); }
.v-result { margin-top: var(--space-xl); }
.v-card { background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-xl); border-inline-start: 6px solid var(--color-line-2); }
.v-card.is-valid { border-inline-start-color: #2f7346; }
.v-card.is-revoked { border-inline-start-color: #b5502a; }
.v-card.is-missing { border-inline-start-color: var(--color-ink-faint); }
.v-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); }
.v-status { display: inline-block; font-size: var(--text-xs); font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--color-paper-3); color: var(--color-ink-soft); }
.is-valid .v-status { background: #e3f3e8; color: #1f5a33; }
.is-revoked .v-status { background: #fbe7de; color: #8a3a1c; }
.v-code { margin-top: var(--space-sm); font-size: var(--text-2xl); font-weight: 700; color: var(--color-ink); }
.v-qr { margin: 0; text-align: center; flex-shrink: 0; }
.v-qr img { width: 96px; height: 96px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: 6px; background: #fff; }
.v-qr figcaption { font-size: 10px; color: var(--color-ink-faint); margin-top: 4px; }
.v-dl { margin: var(--space-lg) 0 0; display: grid; gap: 0; border-top: 1px solid var(--color-line); }
@media (min-width: 640px) { .v-dl { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.v-dl div { display: grid; gap: 2px; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-line); }
@media (min-width: 640px) {
  .v-dl div:nth-child(odd) { padding-inline-end: var(--space-lg); }
  .v-dl div:nth-child(even) { padding-inline-start: var(--space-lg); border-inline-start: 1px solid var(--color-line); }
}
.v-dl dt { font-size: var(--text-xs); color: var(--color-ink-faint); }
.v-dl dd { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--color-ink); }
.v-msg { margin-top: var(--space-md); color: var(--color-ink-soft); }
.v-issuer { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-line); font-size: var(--text-xs); color: var(--color-ink-faint); }
.v-note { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-ink-faint); }
.v-note a { color: var(--brand-blue); font-weight: 600; }
[dir="ltr"] .verify { font-family: var(--font-latin); }

/* ═══════════════════════════════════ inner pages — shared shell ══ */
.phero { position: relative; background: var(--color-night); color: #fff; overflow: hidden; --fc: var(--brand-blue); --fcl: var(--brand-gold); }
.phero .orbits { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .5; }
.phero .orbits ellipse { fill: none; vector-effect: non-scaling-stroke; }
.phero-in { position: relative; z-index: 2; padding-block: 8.5rem var(--space-2xl); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-xs); font-size: var(--text-xs); color: rgba(255,255,255,.55); margin-bottom: var(--space-xl); }
.crumbs a { color: rgba(255,255,255,.72); }
.crumbs a:hover { color: #fff; }
.crumbs span:last-child { color: #fff; }
.phero .eye { color: var(--fcl); margin-bottom: var(--space-md); }
.phero-title { display: flex; align-items: center; gap: var(--space-md); }
.phero-ic { width: 44px; height: 44px; flex-shrink: 0; color: var(--fcl); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.phero h1 { color: #fff; font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); line-height: 1.15; max-width: 20ch; }
.phero .lede { margin-top: var(--space-lg); color: rgba(255,255,255,.78); font-size: var(--text-lg); max-width: 60ch; }

/* programme rows — one hairline list, field colour as a thin start bar */
.plist { margin-top: var(--space-2xl); border-top: 1px solid var(--color-line-2); }
.prow { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-md) var(--space-xl); align-items: start; padding: var(--space-md) var(--space-md); border-bottom: 1px solid var(--color-line); }
.prow::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--fc); opacity: 0; transition: opacity var(--dur-mid) var(--ease-out); }
.prow:hover::before { opacity: 1; }
.prow .pn { font-weight: 600; font-size: var(--text-base); }
.prow .pdesc { display: block; margin-top: 4px; font-size: var(--text-sm); font-weight: 400; color: var(--color-ink-soft); max-width: 70ch; }
.prow .pd { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-faint); white-space: nowrap; padding-top: 4px; }
.night .plist { border-color: rgba(255,255,255,.25); } .night .prow { border-color: rgba(255,255,255,.12); }
.note { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-ink-faint); max-width: 70ch; }
.note a { color: var(--brand-blue); font-weight: 600; }

/* generic two-column cards (about, audiences, comes-with) */
.grid { display: grid; gap: var(--space-md); margin-top: var(--space-2xl); }
@media (min-width: 720px) { .grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.card { background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-lg); }
.paper2 .card { border-color: var(--color-line-2); }
.card h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-xs); }
.card p { color: var(--color-ink-soft); font-size: var(--text-sm); }

/* fields index — one column of rows, the icon carries the field colour */
.findex { margin-top: var(--space-md); border-top: 1px solid var(--color-line-2); }
.frow { display: grid; grid-template-columns: 40px minmax(0,1fr) 28px; gap: var(--space-lg); align-items: center; padding: var(--space-lg) var(--space-sm); border-bottom: 1px solid var(--color-line); color: inherit; transition: background var(--dur-mid) var(--ease-out); }
.frow:hover { background: var(--color-paper-2); }
.frow .fi { width: 32px; height: 32px; color: var(--fc); }
.frow h3 { font-size: var(--text-xl); font-weight: 700; display: inline; }
.frow .cnt { display: inline-block; margin-inline-start: var(--space-sm); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--fc); font-variant-numeric: tabular-nums; }
.frow .sub { display: block; margin-top: 4px; font-size: var(--text-sm); color: var(--color-ink-soft); }
.frow .go { color: var(--color-ink-faint); transition: color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out); }
.frow .go svg { width: 22px; height: 22px; transform: scaleX(-1); }
.frow:hover .go { color: var(--fc); transform: translateX(-4px); }

/* RSO callout on the radiation page */
.rso-callout { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 900px) { .rso-callout { grid-template-columns: minmax(0,1fr) auto; } }
.rso-callout .tag { font-size: var(--text-sm); font-weight: 600; color: var(--brand-gold); margin-bottom: var(--space-xs); }
.rso-callout h2 { font-size: var(--text-2xl); }
.rso-callout .lede { margin-top: var(--space-sm); color: rgba(255,255,255,.75); max-width: 60ch; }

/* course facts strip */
.facts { display: grid; gap: var(--space-lg); border-block: 1px solid var(--color-line-2); padding-block: var(--space-lg); }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.facts > div { display: grid; gap: 4px; padding-inline: var(--space-md); }
@media (min-width: 720px) { .facts > div + div { border-inline-start: 1px solid var(--color-line); } }
.facts .n { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 700; color: var(--brand-blue); font-variant-numeric: tabular-nums; }
.facts .n.lat { font-family: var(--font-latin); }
.facts .l { font-size: var(--text-xs); color: var(--color-ink-soft); }

/* year board (rso.html) */
.board { margin-top: var(--space-2xl); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-md); background: rgba(255,255,255,.04); padding: var(--space-lg); }
.board-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.board-head .t { font-weight: 700; }
.board-legend { display: flex; gap: var(--space-lg); font-size: var(--text-xs); color: rgba(255,255,255,.7); }
.board-legend span { display: inline-flex; align-items: center; gap: 6px; }
.board-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.lg-r { background: var(--brand-gold); } .lg-k { background: #fff; }
.board-row { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: var(--space-md); align-items: center; padding-block: var(--space-md); border-top: 1px solid rgba(255,255,255,.12); }
.board-row .yr { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-lg); color: rgba(255,255,255,.85); }
/* the year line: twelve month names along an axis, a stop for every round */
.tl { position: relative; height: 118px; }
.tl .axis { position: absolute; inset-inline: 0; top: 74px; height: 1px; background: rgba(255,255,255,.22); }
.tl .mn { position: absolute; top: 84px; transform: translateX(50%); font-size: 11px; color: rgba(255,255,255,.5); white-space: nowrap; }
.tl .stop { position: absolute; top: 4px; transform: translateX(50%); display: grid; justify-items: center; gap: 3px; color: #fff; text-decoration: none; }
.tl .stop .mark { font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 9px; border-radius: 6px; white-space: nowrap; transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out); }
.tl .stop.r .mark { background: var(--brand-gold); color: var(--color-on-gold); }
.tl .stop.k .mark { background: #fff; color: var(--color-night); }
.tl .stop .city { font-size: 11px; color: rgba(255,255,255,.7); }
.tl .stop .dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--color-night); box-shadow: 0 0 0 1px rgba(255,255,255,.4); margin-top: 7px; }
.tl .stop.r .dot { background: var(--brand-gold); }
.tl .stop.next .mark { box-shadow: 0 0 0 3px rgba(240,207,44,.35); }
.tl .stop:hover .mark { transform: translateY(-2px); }
.tl .stop.past { opacity: .4; }
.board-foot { margin-top: var(--space-md); font-size: var(--text-xs); color: rgba(255,255,255,.55); }
@media (max-width: 860px) { .board { display: none; } }

/* tables */
.table-scroll { margin-top: var(--space-2xl); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table-scroll th, .table-scroll td { text-align: start; padding: .8em 1em; vertical-align: top; border-bottom: 1px solid var(--color-line); }
.table-scroll thead th { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-faint); border-bottom: 1px solid var(--color-line-2); }
.table-scroll tbody th { font-weight: 700; white-space: nowrap; }
.night .table-scroll th, .night .table-scroll td { border-color: rgba(255,255,255,.14); }
.night .table-scroll thead th { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.25); }
.rounds .d { font-weight: 600; white-space: nowrap; }
.rounds .reg { font-weight: 700; color: var(--brand-gold); }
.matrix thead th { color: var(--color-ink); font-size: var(--text-sm); }
.matrix tbody th { color: var(--color-ink-soft); font-size: var(--text-xs); }

/* curriculum list */
.curr { margin-top: var(--space-2xl); counter-reset: c; list-style: none; columns: 2; column-gap: var(--space-2xl); }
@media (max-width: 719px) { .curr { columns: 1; } }
.curr li { counter-increment: c; break-inside: avoid; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: var(--space-sm); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-line); font-size: var(--text-sm); }
.curr li::before { content: counter(c, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--brand-blue); padding-top: 3px; }

/* fees */
.fees { display: grid; gap: var(--space-md); margin-top: var(--space-2xl); }
@media (min-width: 720px) { .fees { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.fee { background: var(--color-paper); border: 1px solid var(--color-line-2); border-radius: var(--radius-md); padding: var(--space-lg); }
.fee .k { font-size: var(--text-xs); font-weight: 700; color: var(--brand-blue); }
.fee .v { margin-top: var(--space-xs); font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; }
.fee .cur { font-size: var(--text-base); font-weight: 600; color: var(--color-ink-soft); }
.fee .d { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-soft); }

/* register embed */
.embed { border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; background: var(--color-paper); }
.embed iframe { display: block; width: 100%; height: 1400px; border: 0; }

/* about — values */
.values { margin-top: var(--space-2xl); list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.values li { border: 1px solid var(--color-line-2); border-radius: 999px; padding: 8px 18px; font-weight: 600; font-size: var(--text-sm); }

/* clients — engagement rows */
.engage { margin-top: var(--space-md); border-top: 1px solid var(--color-line-2); }
.eng { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: var(--space-xl); align-items: center; padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-line); }
.elogo { height: 64px; display: grid; place-items: center; }
.elogo img { max-height: 64px; max-width: 132px; object-fit: contain; }
.elogo .nolo { width: 48px; height: 2px; background: var(--color-line-2); }
.eng h3 { font-size: var(--text-lg); font-weight: 700; }
.eng p { margin-top: 4px; color: var(--color-ink-soft); font-size: var(--text-sm); max-width: 70ch; }
@media (max-width: 560px) { .eng { grid-template-columns: 1fr; gap: var(--space-sm); } .elogo { justify-content: start; height: auto; } }

/* contact */
.contact-grid { display: grid; gap: var(--space-2xl); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); } }
.cinfo { display: grid; gap: var(--space-lg); }
.cinfo .k { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-faint); margin-bottom: 4px; }
.cinfo a { font-weight: 600; color: var(--brand-blue); font-size: var(--text-lg); }
.cform { display: grid; gap: var(--space-md); background: var(--color-paper-2); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-lg); }
.cform .f2 { display: grid; gap: var(--space-md); }
@media (min-width: 560px) { .cform .f2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.cform label { display: grid; gap: 6px; font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-soft); }
.cform input, .cform select, .cform textarea { font: inherit; font-size: var(--text-sm); padding: 10px 12px; border: 1px solid var(--color-line-2); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink); }
.cform input:focus-visible, .cform select:focus-visible, .cform textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.cform .btn { justify-self: start; }
.cform .note { margin-top: 0; }

/* ═══════════════════════════════════ about — icons + motion ══ */
/* staggered reveal: items carry --i */
.rv[style*="--i"] { transition-delay: calc(var(--i) * 90ms); }

/* hero orbits draw themselves in */
.phero.draw .orbits ellipse { stroke-dasharray: 1; stroke-dashoffset: 1; animation: orb-draw 2.2s var(--ease-out) .25s forwards; }
.phero.draw .orbits .orb-gold { animation-delay: .7s; }
@keyframes orb-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .phero.draw .orbits ellipse { animation: none; stroke-dashoffset: 0; } }

/* icon cards — the panels' navy hover, applied to cards */
.card.ic { position: relative; overflow: hidden; isolation: isolate; transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out); }
.card.ic::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-night); transform: translateY(101%); transition: transform 420ms var(--ease-out); }
.card.ic .ci { width: 30px; height: 30px; display: block; margin-bottom: var(--space-md); color: var(--brand-blue); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: color var(--dur-mid) var(--ease-out), transform 420ms var(--ease-out); }
.card.ic h3, .card.ic p { transition: color var(--dur-mid) var(--ease-out); }
.card.ic:hover { transform: translateY(-4px); border-color: var(--color-night); box-shadow: 0 18px 40px rgba(18,22,63,.16); }
.card.ic:hover::before { transform: translateY(0); }
.card.ic:hover .ci { color: var(--brand-gold); transform: translateY(-2px) rotate(-6deg); }
.card.ic:hover h3 { color: #fff; }
.card.ic:hover p { color: rgba(255,255,255,.8); }

/* values with icons — gold fills on hover */
.values.vic li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; transition: background var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out); }
.values.vic .vi { width: 20px; height: 20px; color: var(--brand-blue); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out); }
.values.vic li:hover { background: var(--brand-gold); border-color: var(--brand-gold); transform: translateY(-2px); }
.values.vic li:hover .vi { color: var(--color-on-gold); transform: rotate(-10deg) scale(1.1); }

/* strengths: icon tiles instead of numbers */
.why-p .wi { width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--color-paper); border: 1px solid var(--color-line-2); color: var(--brand-blue); transition: background var(--dur-mid) var(--ease-out), color var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out); }
.why-p .wi svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.why-p:hover .wi { background: var(--color-night); border-color: var(--color-night); color: var(--brand-gold); transform: translateY(-2px); }

/* the 2010 badge breathes once it is counted */
.since .badge { transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out); }
.since .badge:hover { transform: translateY(-3px); }
.why-p:has(.wi) { grid-template-columns: 48px minmax(0,1fr); align-items: start; }
.why-points:has(.wi) { margin-top: var(--space-xl); }
/* strengths side by side on wide screens: icon above, text below, hairlines between */
@media (min-width: 860px) {
  .why-points:has(.wi) { grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--color-line-2); border-bottom: 1px solid var(--color-line-2); }
  .why-points:has(.wi) { margin-top: var(--space-2xl); }
  .why-points:has(.wi) .why-p { grid-template-columns: 1fr; gap: var(--space-lg); border: 0; padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-lg); }
  .why-points:has(.wi) .why-p + .why-p { border-inline-start: 1px solid var(--color-line); }
  .why-points:has(.wi) .why-p:first-child { padding-inline-start: 0; }
  .why-points:has(.wi) .why-p:last-child { padding-inline-end: 0; }
  .why-points:has(.wi) .why-p h3 { font-size: var(--text-xl); }
}

/* values wall — eight tiles, each turns to reveal one line */
.wall { display: grid; gap: var(--space-md); margin-top: var(--space-2xl); }
@media (min-width: 560px) { .wall { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) { .wall { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.tile { position: relative; aspect-ratio: 1.15; perspective: 900px; outline: none; }
.tile .in { position: absolute; inset: 0; transition: transform 640ms var(--ease-out); transform-style: preserve-3d; }
.tile:hover .in, .tile:focus-visible .in { transform: rotateY(180deg); }
.tile .f, .tile .b { position: absolute; inset: 0; border-radius: var(--radius-md); backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: var(--space-lg); display: grid; align-content: end; gap: var(--space-sm); }
.tile .f { background: var(--color-paper); border: 1px solid var(--color-line-2); }
.tile .f svg { width: 40px; height: 40px; color: var(--brand-blue); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: auto; }
.tile .f h3 { font-size: var(--text-xl); font-weight: 700; }
.tile .f .ix { position: absolute; top: var(--space-md); inset-inline-end: var(--space-md); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-faint); }
.tile .b { background: var(--color-night); color: #fff; transform: rotateY(180deg); }
.tile .b h3 { font-size: var(--text-lg); color: var(--brand-gold); }
.tile .b p { font-size: var(--text-sm); color: rgba(255,255,255,.85); }
.tile.rv { transition-delay: calc(var(--i) * 70ms); }
@media (prefers-reduced-motion: reduce) { .tile .in { transition: none; } }
/* touch screens have no hover: show both faces stacked */
@media (hover: none) { .tile { aspect-ratio: auto; } .tile .in { position: static; transform: none !important; } .tile .f, .tile .b { position: static; transform: none; } .tile .f { border-radius: var(--radius-md) var(--radius-md) 0 0; } .tile .b { border-radius: 0 0 var(--radius-md) var(--radius-md); padding-top: var(--space-md); } .tile .b h3 { display: none; } }

/* ═══════════════════════════════════ fields index — live list + tinted photo pane ══ */
.live { display: grid; gap: var(--space-2xl); margin-top: var(--space-2xl); align-items: start; }
@media (min-width: 980px) { .live { grid-template-columns: minmax(0,1fr) 46%; } }
.live-list { border-top: 1px solid var(--color-line-2); }
.li { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: var(--space-lg); align-items: center; padding: var(--space-lg) var(--space-sm); border-bottom: 1px solid var(--color-line); color: inherit; position: relative; transition: padding var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out); }
.li::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--fc); transform: scaleY(0); transition: transform var(--dur-mid) var(--ease-out); }
.li:hover::before, .li.on::before { transform: scaleY(1); }
.li:hover, .li.on { padding-inline-start: var(--space-lg); background: color-mix(in srgb, var(--fc) 5%, transparent); }
.li .fi { width: 30px; height: 30px; color: var(--fc); }
.li h2 { font-size: var(--text-xl); }
.li .sub { display: block; margin-top: 4px; font-size: var(--text-sm); color: var(--color-ink-soft); }
.li .cnt { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--fc); white-space: nowrap; }
.li .thumb { display: none; }
/* every photo is a duotone in its own field colour: greyscale below, colour blended above */
.sl { position: absolute; inset: 0; display: block; opacity: 0; transform: scale(1.04); transition: opacity 500ms var(--ease-out), transform 1200ms var(--ease-out); }
.sl img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.9); }
.sl::after { content: ""; position: absolute; inset: 0; background: var(--fc); mix-blend-mode: color; opacity: .78; }
.sl::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18,22,63,.08), rgba(18,22,63,.22)); mix-blend-mode: multiply; }
.sl.on { opacity: 1; transform: scale(1); }
.live-pane { position: sticky; top: 92px; aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden; background: var(--color-night); isolation: isolate; }
.live-pane .cap { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: var(--space-lg); background: linear-gradient(180deg, transparent, rgba(18,22,63,.85)); color: #fff; display: flex; justify-content: space-between; align-items: end; }
.live-pane .cap b { font-size: var(--text-lg); }
.live-pane .cap span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--brand-gold); }
@media (max-width: 979px) {
  .live-pane { display: none; }
  .li { grid-template-columns: 78px minmax(0,1fr) auto; gap: var(--space-md); }
  .li .fi { display: none; }
  .li .thumb { display: block; position: relative; width: 78px; height: 58px; border-radius: 6px; overflow: hidden; }
  .li .thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.9); }
  .li .thumb::after { content: ""; position: absolute; inset: 0; background: var(--fc); mix-blend-mode: color; opacity: .9; }
}
@media (prefers-reduced-motion: reduce) { .sl { transition: none; transform: none; } }

/* a programme row that is itself a link (the RSO course leads the radiation list) */
.prow.is-link { color: inherit; grid-template-columns: minmax(0,1fr) auto; }
.prow.is-link .pn { color: var(--brand-blue); }
.prow.is-link::before { opacity: 1; }
.prow.is-link .go { color: var(--fc); padding-top: 0; align-self: center; }
.prow.is-link .go svg { width: 20px; height: 20px; transform: scaleX(-1); transition: transform var(--dur-mid) var(--ease-out); }
.prow.is-link:hover .go svg { transform: scaleX(-1) translateX(-4px); }
.prow:not(.is-link) { grid-template-columns: minmax(0,1fr); }

/* course spec sheet — two ruled columns of key / value (rso.html) */
.spec2 { display: grid; gap: 0 var(--space-3xl); border-top: 2px solid var(--color-ink); }
@media (min-width: 820px) { .spec2 { grid-template-columns: 1fr 1fr; } }
.spec2 > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-lg); padding: 14px 0; border-bottom: 1px solid var(--color-line-2); }
.spec2 .k { color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: 600; }
.spec2 .v { font-weight: 700; text-align: end; }
.spec2 .v .num { color: var(--color-ink); }
.spec2 .v small { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--color-ink-faint); }

/* split page-hero: title on one side, a glass spec card on the other (rso.html) */
.split-in { display: grid; gap: var(--space-2xl); align-items: end; }
@media (min-width: 980px) { .split-in { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); } }
.phero-split .acts { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.phero-split .lede { max-width: 50ch; }
.spec-card { border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-lg); background: rgba(255,255,255,.06); backdrop-filter: blur(14px); padding: var(--space-lg) var(--space-xl); color: #fff; }
.spec-card .lbl { font-size: var(--text-xs); font-weight: 700; color: var(--brand-gold); display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.spec-card .lbl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-gold); }
.spec-card .rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-lg); padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.spec-card .rows > div:last-child { border-bottom: 0; }
.spec-card .k { color: rgba(255,255,255,.7); font-size: var(--text-sm); }
.spec-card .v { font-weight: 700; text-align: end; }
.spec-card .v small { display: block; font-weight: 400; font-size: var(--text-xs); color: rgba(255,255,255,.6); }

/* ═══════════════════════════════════ courses.html — the classic table ══ */
.ctable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); background: var(--color-paper); border: 1px solid var(--color-line-2); border-radius: var(--radius-md); overflow: hidden; }
.ctable thead th { background: var(--color-night); color: #fff; font-size: var(--text-xs); font-weight: 700; padding: 12px 14px; text-align: start; white-space: nowrap; border: 0; }
.ctable thead button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; font-weight: 700; }
.ctable thead button i { font-style: normal; opacity: .55; font-size: 10px; }
.ctable thead button.on { color: var(--brand-gold); }
.ctable thead button:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.ctable td { padding: 13px 14px; border-bottom: 1px solid var(--color-line); vertical-align: middle; }
.ctable tbody tr:hover td { background: var(--color-paper-2); }
.ctable tr.mo td { background: var(--color-paper-2); color: var(--brand-blue); font-weight: 700; font-size: var(--text-xs); padding: 8px 14px; }
.ctable .nm a { font-weight: 700; color: var(--color-ink); }
.ctable .nm a:hover { color: var(--brand-blue); }
.ctable .tag { display: inline-block; font-size: 10px; font-weight: 700; background: var(--brand-gold); color: var(--color-on-gold); padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-inline-start: 8px; font-family: var(--font-ar); }
.ctable .ftag { font-size: var(--text-xs); font-weight: 700; color: var(--fc); white-space: nowrap; }
.ctable .d { white-space: nowrap; font-weight: 700; }
.ctable .pr { white-space: nowrap; font-weight: 700; }
.ctable .pr small { display: block; font-weight: 400; color: var(--color-ink-faint); font-size: 10px; }
.ctable .muted { color: var(--color-ink-faint); }
.ctable .act { text-align: end; white-space: nowrap; }
.ctable .act .btn + .btn { margin-inline-start: 6px; }
.ctable td.dur, .ctable td[data-l="المدينة"], .ctable td.mode { white-space: nowrap; }
.ctable td.dur small, .ctable td.mode small { display: block; font-size: 11px; color: var(--color-ink-faint); margin-top: 2px; }
.ctable .nm { min-width: 190px; }
@media (min-width: 901px) { .ctable { font-size: 14px; } .ctable td { padding: 11px 10px; } .ctable thead th { padding: 11px 10px; } .ctable .pr small { white-space: nowrap; } }

@media (max-width: 900px) {
  .ctable, .ctable tbody, .ctable tr, .ctable td { display: block; }
  .ctable thead { display: none; }
  .ctable tr { padding: 10px 14px 14px; border-bottom: 1px solid var(--color-line-2); }
  .ctable tr.mo { padding: 8px 14px; }
  .ctable td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border: 0; }
  .ctable td[data-l]::before { content: attr(data-l); color: var(--color-ink-faint); font-size: var(--text-xs); flex-shrink: 0; }
  .ctable td.act { justify-content: flex-start; padding-top: 10px; }
  .ctable tr.mo td { display: block; padding: 0; }
}
/* ═══════════════════════════════════ courses.html — all announced rounds, filterable ══ */
.cfilters { display: grid; gap: var(--space-md); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-line-2); }
.cf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.cf .k { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-faint); min-width: 4.5em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: var(--text-xs); font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--color-line-2); background: var(--color-paper); color: var(--color-ink-soft); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.chip:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.chip.on { background: var(--color-night); border-color: var(--color-night); color: #fff; }
.chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cmonth { font-size: var(--text-sm); font-weight: 700; color: var(--brand-blue); margin-top: var(--space-xl); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-line); }
.crow { position: relative; display: grid; grid-template-columns: 190px minmax(0,1fr) auto; gap: var(--space-lg); align-items: center; padding: var(--space-lg) var(--space-md); border-bottom: 1px solid var(--color-line); transition: background var(--dur-fast) var(--ease-out); }
.crow::before { content: ""; position: absolute; inset-block: 12px; inset-inline-start: 0; width: 3px; background: var(--fc); border-radius: 2px; }
.crow:hover { background: var(--color-paper-2); }
.crow.next .cdate::after { content: "الأقرب"; display: inline-block; margin-inline-start: 8px; font-family: var(--font-ar); font-size: 10px; font-weight: 700; color: var(--color-on-gold); background: var(--brand-gold); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.cdate { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.cdate small { display: block; font-family: var(--font-ar); font-weight: 400; font-size: var(--text-xs); color: var(--color-ink-faint); margin-top: 2px; }
.cname { font-weight: 700; font-size: var(--text-lg); color: var(--color-ink); }
.cname:hover { color: var(--brand-blue); }
.cmeta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: var(--text-xs); color: var(--color-ink-soft); }
.cmeta .ftag { color: var(--fc); font-weight: 700; }
.cact { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) { .crow { grid-template-columns: 1fr; gap: var(--space-sm); } .cact { justify-content: flex-start; } }

/* ═══════════════════════════════════ pay.html — summary + payer form ══ */
.pay-grid { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 900px) { .pay-grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); } }
.pay-sum { background: var(--color-night); color: #fff; border-radius: var(--radius-lg); padding: var(--space-xl); position: sticky; top: 92px; }
.pay-sum .lbl { font-size: var(--text-xs); font-weight: 700; color: var(--brand-gold); margin-bottom: var(--space-sm); }
.pay-sum h2 { font-size: var(--text-xl); }
.pay-sum dl { margin: var(--space-lg) 0 0; }
.pay-sum dl > div { display: flex; justify-content: space-between; gap: var(--space-lg); padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: var(--text-sm); }
.pay-sum dt { color: rgba(255,255,255,.7); } .pay-sum dd { margin: 0; font-weight: 600; text-align: end; }
.pay-sum .total { border-bottom: 0; padding-top: var(--space-md); font-size: var(--text-base); }
.pay-sum .total b { font-size: var(--text-2xl); color: var(--brand-gold); }
.pay-sum .note { color: rgba(255,255,255,.75); margin: 0; }
.pay-sum .note a { color: var(--brand-gold); }
.modes { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.modes legend { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-soft); margin-bottom: 6px; }
.modes .mode { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--color-line-2); border-radius: var(--radius-sm); background: var(--color-paper); cursor: pointer; font-weight: 600; }
.modes .mode:has(:checked) { border-color: var(--brand-blue); box-shadow: inset 0 0 0 1px var(--brand-blue); }
.modes .mode b { font-size: var(--text-lg); } .modes .mode small { color: var(--color-ink-soft); }
.pay-result { max-width: 60ch; }
.pay-result h2 { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.pay-result p { color: var(--color-ink-soft); margin-bottom: var(--space-lg); }

/* ═══════════════════════════════════ header — fields dropdown ══ */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav .dd-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav .dd-trigger .chev { width: 13px; height: 13px; transition: transform var(--dur-mid) var(--ease-out); }
.nav-dd.open .dd-trigger .chev, .nav-dd:hover .dd-trigger .chev { transform: rotate(180deg); }
.dd-panel { position: absolute; top: calc(100% + 10px); inset-inline-start: 50%; transform: translateX(50%) translateY(6px); width: 900px; padding: 12px; display: grid; grid-template-columns: minmax(0,1fr) 260px; grid-template-rows: auto auto; column-gap: 12px; background: var(--color-paper); color: var(--color-ink); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: 0 30px 70px rgba(10,12,40,.35); opacity: 0; visibility: hidden; transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out), visibility 0s linear var(--dur-mid); z-index: 5; }
.dd-panel::before { content: ""; position: absolute; top: -18px; inset-inline: 0; height: 18px; }   /* hover bridge across the gap */
.dd-panel::after { content: ""; position: absolute; top: -7px; inset-inline-start: calc(50% - 7px); width: 14px; height: 14px; background: var(--color-paper); border-inline-start: 1px solid var(--color-line); border-top: 1px solid var(--color-line); transform: rotate(45deg); }
.nav-dd.open .dd-panel, .nav-dd:hover .dd-panel, .nav-dd:focus-within .dd-panel { opacity: 1; visibility: visible; transform: translateX(50%) translateY(0); transition-delay: 0s; }
.dd-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.nav .dd-list a, .hdr.stuck .nav .dd-list a { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 12px; align-items: start; padding: 10px 12px; border-radius: 8px; color: var(--color-ink); white-space: normal; font-weight: 500; }
.nav .dd-list a:hover, .nav .dd-list a:focus-visible, .hdr.stuck .nav .dd-list a:hover { background: var(--color-paper-2); color: var(--color-ink); outline: none; }
.dd-list .mi { width: 22px; height: 22px; margin-top: 2px; color: var(--fc); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dd-list b { display: block; font-size: var(--text-sm); font-weight: 700; }
.dd-list small { display: block; font-size: 11px; color: var(--color-ink-soft); margin-top: 2px; line-height: 1.5; }
.nav .dd-all, .hdr.stuck .nav .dd-all { display: block; margin-top: 8px; padding: 12px 12px 4px; border-top: 1px solid var(--color-line); color: var(--brand-blue); font-weight: 700; font-size: var(--text-sm); }
.nav .dd-all:hover { color: var(--brand-blue-700); }
@media (prefers-reduced-motion: reduce) { .dd-panel { transition: none; } }
/* drawer submenu */
.drawer .dr-dd summary { list-style: none; cursor: pointer; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-line); font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
.drawer .dr-dd summary::-webkit-details-marker { display: none; }
.drawer .dr-dd summary::after { content: ""; width: 8px; height: 8px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease-out); }
.drawer .dr-dd[open] summary::after { transform: rotate(-135deg); }
.drawer .dr-dd a { padding-inline-start: var(--space-lg); font-size: var(--text-sm); }
.drawer .dr-dd .dr-all { color: var(--brand-blue); font-weight: 700; }

/* ═══════════════════════════════════ forms — shared primitives ══ */
.fld { display: grid; gap: 6px; }
.fld > span:first-child { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-soft); }
.fld input, .fld select, .fld textarea { font: inherit; font-size: var(--text-base); padding: 12px 14px; border: 1px solid var(--color-line-2); border-radius: 10px; background: #fff; color: var(--color-ink); min-height: 50px; width: 100%; }
.fld textarea { min-height: 96px; resize: vertical; }
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(43,50,147,.12); }
.two { display: grid; gap: var(--space-md); }
@media (min-width: 640px) { .two { grid-template-columns: 1fr 1fr; } }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--color-line-2); border-radius: 999px; padding: 3px; background: #fff; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: inline-block; padding: 8px 18px; border-radius: 999px; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-soft); white-space: nowrap; }
.seg input:checked + span { background: var(--color-night); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chipset label { position: relative; }
.chipset input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chipset span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--color-line-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-soft); background: #fff; }
.chipset input:checked + span { background: var(--color-night); border-color: var(--color-night); color: #fff; }
.chipset input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.done { text-align: center; padding: var(--space-2xl) var(--space-lg); display: grid; gap: var(--space-md); justify-items: center; }
.done h2 { font-size: var(--text-2xl); }
.done p { color: var(--color-ink-soft); max-width: 46ch; }

/* ═══ register — three steps with a navy rail ═══ */
.reg-grid { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 980px) { .reg-grid { grid-template-columns: 340px minmax(0,1fr); } }
.reg-rail { background: var(--color-night); color: #fff; border-radius: var(--radius-lg); padding: var(--space-xl); position: sticky; top: 92px; }
.reg-rail .lbl { font-size: var(--text-xs); font-weight: 700; color: var(--brand-gold); }
.reg-rail h2 { font-size: var(--text-xl); margin-top: 6px; }
.reg-steps { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; }
.reg-steps li { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; padding-block: 12px; position: relative; }
.reg-steps li + li::before { content: ""; position: absolute; top: -14px; inset-inline-start: 13px; width: 2px; height: 26px; background: rgba(255,255,255,.18); }
.reg-steps i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-style: normal; transition: background var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out); }
.reg-steps li.done i { background: var(--brand-gold); border-color: var(--brand-gold); color: var(--color-on-gold); font-size: 0; }
.reg-steps li.done i::after { content: "✓"; font-size: 13px; }
.reg-steps li.now i { border-color: var(--brand-gold); color: var(--brand-gold); }
.reg-steps b { font-size: var(--text-sm); display: block; }
.reg-steps small { color: rgba(255,255,255,.65); font-size: var(--text-xs); }
.reg-sum { margin: var(--space-xl) 0 0; border-top: 1px solid rgba(255,255,255,.16); padding-top: var(--space-md); font-size: var(--text-sm); display: grid; gap: 8px; }
.reg-sum div { display: flex; justify-content: space-between; gap: 12px; } .reg-sum dt { color: rgba(255,255,255,.65); } .reg-sum dd { margin: 0; font-weight: 600; text-align: end; }
.reg-card { background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-xl); }
.reg-card .stepno { font-size: var(--text-xs); font-weight: 700; color: var(--brand-blue); }
.reg-card .bar { height: 3px; background: var(--color-line); border-radius: 2px; overflow: hidden; margin: var(--space-sm) 0 var(--space-xl); }
.reg-card .bar i { display: block; height: 100%; background: var(--brand-gold); transition: width 400ms var(--ease-out); }
.reg-card .step { display: none; }
.reg-card .step.is-on { display: block; animation: step-in 360ms var(--ease-out); }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.reg-card h2 { font-size: var(--text-2xl); }
.reg-card .lede { color: var(--color-ink-soft); margin-top: 6px; }
.reg-card .body { margin-top: var(--space-xl); display: grid; gap: var(--space-lg); }
.reg-nav { margin-top: var(--space-xl); display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); border-top: 1px solid var(--color-line); padding-top: var(--space-lg); }
.rounds { display: grid; gap: 8px; }
.round { position: relative; display: grid; grid-template-columns: 22px minmax(0,1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--color-line-2); border-radius: 10px; background: #fff; cursor: pointer; }
.round input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.round i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-line-2); }
.round.on { border-color: var(--brand-blue); box-shadow: inset 0 0 0 1px var(--brand-blue); }
.round.on i { border-color: var(--brand-blue); background: radial-gradient(circle, var(--brand-blue) 0 4px, transparent 5px); }
.round .d { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-sm); }
.round .c { color: var(--color-ink-soft); font-size: var(--text-sm); }
.round .tag { font-size: 10px; font-weight: 700; background: var(--brand-gold); color: var(--color-on-gold); padding: 2px 8px; border-radius: 999px; }
.review { margin: 0; display: grid; }
.review div { display: flex; justify-content: space-between; gap: var(--space-lg); padding: 10px 0; border-bottom: 1px solid var(--color-line); font-size: var(--text-sm); }
.review dt { color: var(--color-ink-soft); } .review dd { margin: 0; font-weight: 600; text-align: end; }
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); color: var(--color-ink-soft); }
.agree input { margin-top: 5px; width: 16px; height: 16px; }

/* ═══ contact — navy panel + underline form ═══ */
.c2 { display: grid; border: 1px solid var(--color-line-2); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-paper); }
@media (min-width: 900px) { .c2 { grid-template-columns: 320px minmax(0,1fr); } }
.c2-navy { background: var(--color-night); color: #fff; padding: var(--space-xl); display: grid; gap: var(--space-xl); align-content: start; }
.c2-navy h2 { font-size: var(--text-xl); }
.c2-navy dl { margin: var(--space-lg) 0 0; display: grid; gap: 14px; font-size: var(--text-sm); }
.c2-navy dt { color: var(--brand-gold); font-size: var(--text-xs); font-weight: 700; } .c2-navy dd { margin: 2px 0 0; }
.c2-navy a { color: #fff; font-weight: 600; } .c2-navy a:hover { color: var(--brand-gold); }
.c2-map { border-radius: 10px; overflow: hidden; height: 220px; background: var(--color-night-2); }
.c2-map iframe { border: 0; width: 100%; height: 100%; display: block; filter: saturate(.85); }
.c2-form { padding: var(--space-xl); display: grid; gap: var(--space-lg); }
.u { display: grid; gap: 4px; }
.u > span:first-child { font-size: 11px; font-weight: 700; color: var(--color-ink-faint); letter-spacing: .04em; }
.u input, .u textarea { font: inherit; font-size: var(--text-lg); padding: 8px 0 10px; border: 0; border-bottom: 1.5px solid var(--color-line-2); border-radius: 0; background: transparent; color: var(--color-ink); width: 100%; }
.u textarea { resize: vertical; min-height: 80px; }
.u input::placeholder, .u textarea::placeholder { color: var(--color-ink-faint); }
.u input:focus-visible, .u textarea:focus-visible { outline: none; border-color: var(--brand-blue); }
.c2-send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.c2-send .note { margin: 0; }

/* dropdown photo pane — the field's duotone, follows the pointer */
.dd-panel .dd-list { grid-column: 1; grid-row: 1; }
.nav .dd-all, .hdr.stuck .nav .dd-all { grid-column: 1; grid-row: 2; }
.dd-pane { grid-column: 2; grid-row: 1 / 3; position: relative; border-radius: 10px; overflow: hidden; background: var(--color-night); min-height: 300px; isolation: isolate; }
.dd-pane .sl { position: absolute; inset: 0; opacity: 0; transition: opacity 400ms var(--ease-out); }
.dd-pane .sl img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.9); }
.dd-pane .sl::after { content: ""; position: absolute; inset: 0; background: var(--fc); mix-blend-mode: color; opacity: .78; }
.dd-pane .sl.on { opacity: 1; }
.dd-pane .cap { position: absolute; z-index: 2; inset-inline: 0; bottom: 0; padding: 14px 16px; background: linear-gradient(180deg, transparent, rgba(18,22,63,.85)); color: #fff; display: flex; justify-content: space-between; align-items: end; gap: 8px; }
.dd-pane .cap b { font-size: var(--text-sm); } .dd-pane .cap span { font-family: var(--font-mono); font-size: 11px; color: var(--brand-gold); white-space: nowrap; }

/* ═══ register — payment box inside step 3, and the bank-transfer confirmation ═══ */
.reg-sum .tot { border-top: 1px solid rgba(255,255,255,.16); padding-top: 8px; margin-top: 4px; }
.reg-sum .tot dd { color: var(--brand-gold); }
.paybox { border: 1px solid var(--color-line-2); border-radius: 12px; padding: var(--space-lg); background: var(--color-paper-2); display: grid; gap: var(--space-md); }
.pb-total { font-size: var(--text-lg); font-weight: 700; }
.pb-total b { font-size: var(--text-2xl); }
.pb-total small { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-ink-soft); }
.paymeth { display: grid; gap: 8px; }
@media (min-width: 640px) { .paymeth { grid-template-columns: 1fr 1fr; } }
.pm { position: relative; display: block; }
.pm input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pm-in { display: block; padding: 14px 16px; border: 1px solid var(--color-line-2); border-radius: 10px; background: #fff; }
.pm-in b { display: block; font-size: var(--text-sm); }
.pm-in small { display: block; margin-top: 3px; font-size: 11px; color: var(--color-ink-soft); line-height: 1.5; }
.pm input:checked + .pm-in { border-color: var(--brand-blue); box-shadow: inset 0 0 0 1px var(--brand-blue); }
.pm input:focus-visible + .pm-in { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.review .tot { border-bottom: 0; border-top: 1px solid var(--color-line-2); font-size: var(--text-base); padding-top: 12px; }
.review .tot dd { font-size: var(--text-lg); }
.quote-done { display: grid; gap: var(--space-lg); }
.quote-done .lbl { font-size: var(--text-xs); font-weight: 700; color: var(--brand-blue); }
.quote-done h2 { font-size: var(--text-2xl); }
.quote-done .lede { color: var(--color-ink-soft); }
.iban { border: 1px solid var(--color-line-2); border-radius: 12px; padding: var(--space-lg); background: var(--color-paper-2); display: grid; gap: 8px; }
.iban .k { font-size: var(--text-xs); font-weight: 700; color: var(--brand-blue); }
.iban .row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 8px 0; border-bottom: 1px solid var(--color-line); font-size: var(--text-sm); }
.iban .row span { color: var(--color-ink-soft); }
.iban .row b { font-weight: 700; }
.iban .row .btn { margin-inline-start: auto; }
.iban .note { margin: 4px 0 0; }

/* ═══ quote.html — A4-friendly sheet ═══ */
.quote-page { padding-block: 7rem var(--space-3xl); background: var(--color-paper-2); }
.q-actions { display: flex; justify-content: space-between; gap: var(--space-md); max-width: 860px; margin: 0 auto var(--space-md); }
.q-sheet { max-width: 860px; margin-inline: auto; background: #fff; border: 1px solid var(--color-line-2); padding: clamp(1.5rem, 4vw, 3rem); color: var(--color-ink); font-size: var(--text-sm); }
.q-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 2px solid var(--color-night); }
.q-brand { display: flex; align-items: center; gap: 12px; }
.q-brand img { height: 48px; width: auto; }
.q-brand b { display: block; font-size: var(--text-base); }
.q-brand small { display: block; font-size: 11px; color: var(--color-ink-soft); }
.q-meta h1 { font-size: var(--text-2xl); margin-bottom: 8px; }
.q-meta div { display: flex; justify-content: space-between; gap: 16px; font-size: var(--text-xs); }
.q-meta span { color: var(--color-ink-soft); }
.q-parties { display: grid; gap: var(--space-lg); padding-block: var(--space-lg); }
@media (min-width: 640px) { .q-parties { grid-template-columns: 1fr 1fr; } }
.q-parties .k { font-size: 11px; font-weight: 700; color: var(--brand-blue); margin-bottom: 4px; }
.q-parties b, .q-parties span { display: block; }
.q-parties span { color: var(--color-ink-soft); font-size: var(--text-xs); }
.q-parties [hidden] { display: none; }
.q-table { width: 100%; border-collapse: collapse; margin-top: var(--space-sm); }
.q-table th, .q-table td { text-align: start; padding: 10px 8px; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.q-table thead th { font-size: 11px; color: var(--color-ink-faint); border-bottom: 1px solid var(--color-line-2); }
.q-table tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--color-night); }
.q-bank { margin-top: var(--space-xl); border: 1px solid var(--color-line-2); border-radius: 8px; padding: var(--space-md) var(--space-lg); }
.q-bank .k { font-size: 11px; font-weight: 700; color: var(--brand-blue); margin-bottom: 6px; }
.q-bank .row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--color-line); }
.q-bank .row:last-child { border-bottom: 0; }
.q-bank .row span { color: var(--color-ink-soft); }
.q-terms { margin: var(--space-xl) 0 0; padding-inline-start: 1.2em; color: var(--color-ink-soft); font-size: var(--text-xs); display: grid; gap: 6px; }
.q-foot { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-line-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--color-ink-faint); }
@media print {
  .hdr, .ftr, .no-print, .cta, .div { display: none !important; }
  .quote-page { padding: 0; background: #fff; }
  .q-sheet { border: 0; max-width: none; padding: 0; }
  body { font-size: 12px; }
  @page { size: A4; margin: 16mm; }
}

/* register — repeatable trainee blocks */
.trainees { display: grid; gap: var(--space-md); }
.trainee { border: 1px solid var(--color-line-2); border-radius: 12px; padding: var(--space-lg); margin: 0; display: grid; gap: var(--space-md); background: #fff; min-width: 0; }
.trainee legend { float: inline-start; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0; margin-bottom: 4px; font-size: var(--text-xs); font-weight: 700; color: var(--brand-blue); }
.trainee legend + * { clear: both; }
.tremove { font: inherit; font-size: var(--text-xs); font-weight: 700; color: #a3202f; background: none; border: 0; cursor: pointer; padding: 4px 6px; }
.tremove:hover { text-decoration: underline; }
.add-trainee { justify-self: start; }
.add-trainee .num { margin-inline-start: 6px; color: var(--color-ink-faint); font-size: var(--text-xs); }
.orgbox { border-top: 1px dashed var(--color-line-2); padding-top: var(--space-lg); display: grid; gap: var(--space-md); }
.orgbox .k { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-soft); }

/* ═══════════════════════════════════ calm pass — light inner-page headers ══ */
.phero { background: var(--color-paper-2); color: var(--color-ink); border-bottom: 1px solid var(--color-line); }
.phero .orbits { display: none; }
.phero-in { padding-block: 7.5rem var(--space-2xl); }
.crumbs { color: var(--color-ink-faint); }
.crumbs a { color: var(--color-ink-soft); }
.crumbs a:hover { color: var(--brand-blue); }
.crumbs span:last-child { color: var(--color-ink); }
.phero .eye { color: var(--brand-blue); }
.phero-ic { color: var(--fc); }
.phero h1 { color: var(--color-ink); font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem); }
.phero .lede { color: var(--color-ink-soft); }
.phero .acts .btn-glass { background: transparent; border-color: var(--color-line-2); color: var(--color-ink); }
.phero .acts .btn-glass:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
/* the course spec card, on light */
.spec-card { background: var(--color-paper); border-color: var(--color-line-2); color: var(--color-ink); backdrop-filter: none; box-shadow: 0 10px 30px rgba(18,22,63,.06); }
.spec-card .lbl { color: var(--brand-blue); } .spec-card .lbl::before { background: var(--brand-blue); }
.spec-card .rows > div { border-color: var(--color-line); }
.spec-card .k { color: var(--color-ink-soft); }
.spec-card .v small { color: var(--color-ink-faint); }
/* the year board, on light */
.paper2 .board { border-color: var(--color-line-2); background: var(--color-paper); }
.paper2 .board-head .t { color: var(--color-ink); }
.paper2 .board-legend { color: var(--color-ink-soft); }
.paper2 .lg-k { background: var(--color-night); }
.paper2 .board-row { border-color: var(--color-line); }
.paper2 .board-row .yr { color: var(--color-ink); }
.paper2 .tl .axis { background: var(--color-line-2); }
.paper2 .tl .mn { color: var(--color-ink-faint); }
.paper2 .tl .stop { color: var(--color-ink); }
.paper2 .tl .stop.k .mark { background: var(--color-night); color: #fff; }
.paper2 .tl .stop .city { color: var(--color-ink-soft); }
.paper2 .tl .stop .dot { border-color: var(--color-paper); box-shadow: 0 0 0 1px var(--color-line-2); }
.paper2 .tl .stop.k .dot { background: var(--color-night); }
.paper2 .board-foot { color: var(--color-ink-faint); }
.paper2 .rounds .reg { color: var(--brand-blue); }

/* ═══════════════════════════════════ calm pass 2 — plain header bar ══ */
.hdr { padding-block: 0; background: var(--color-paper); border-bottom: 1px solid var(--color-line); }
.hdr.stuck { padding-block: 0; box-shadow: 0 4px 18px rgba(18,22,63,.06); }
.hdr-in { height: 64px; }
.brand img { height: 36px; }
.hdr-dark { background: var(--color-night); border-bottom-color: rgba(255,255,255,.12); }
.hdr-dark.stuck { background: var(--color-night); box-shadow: 0 4px 18px rgba(0,0,0,.25); }
@media (min-width: 880px) {
  .brand .nm, .hdr.stuck .brand .nm { color: var(--brand-logo-blue); }
  .brand .nm .lat, .hdr.stuck .brand .nm .lat { color: var(--color-ink-faint); opacity: 1; }
  .hdr-dark .brand .nm, .hdr-dark.stuck .brand .nm { color: #fff; }
  .hdr-dark .brand .nm .lat, .hdr-dark.stuck .brand .nm .lat { color: rgba(255,255,255,.7); }
}
@media (min-width: 1080px) {
  .nav, .hdr.stuck .nav { height: auto; background: none; border: 0; backdrop-filter: none; box-shadow: none; padding-inline: 0; margin-inline: 0; gap: var(--space-lg); border-radius: 0; }
  .nav a, .hdr.stuck .nav a { color: var(--color-ink-soft); font-weight: 500; }
  .nav a:hover, .nav a[aria-current="page"], .hdr.stuck .nav a:hover, .hdr.stuck .nav a[aria-current="page"] { color: var(--brand-blue); }
  .hdr-dark .nav a, .hdr-dark.stuck .nav a { color: rgba(255,255,255,.85); }
  .hdr-dark .nav a:hover, .hdr-dark .nav a[aria-current="page"], .hdr-dark.stuck .nav a:hover, .hdr-dark.stuck .nav a[aria-current="page"] { color: var(--brand-gold); }
  .hdr.stuck .brand, .hdr.stuck .hdr-acts { display: flex; }
  .cap-lockup, .cap-utils, .hdr.stuck .cap-lockup, .hdr.stuck .cap-utils { display: none; }
  .hdr .btn-glass, .hdr.stuck .btn-glass { background: transparent; border-color: var(--color-line-2); color: var(--color-ink); }
  .hdr-dark .btn-glass, .hdr-dark.stuck .btn-glass { border-color: rgba(255,255,255,.35); color: #fff; }
  .nav .dd-trigger .chev { color: inherit; }
  .dd-panel { top: calc(100% + 18px); }
  .dd-panel::before { height: 26px; top: -26px; }
}
@media (max-width: 1079px) {
  .hdr, .hdr.stuck { background: var(--color-paper); }
  .hdr-dark, .hdr-dark.stuck { background: var(--color-night); }
  .hdr .menu-btn, .hdr.stuck .menu-btn { border-color: var(--color-line-2); color: var(--color-ink); background: transparent; }
  .hdr-dark .menu-btn, .hdr-dark.stuck .menu-btn { border-color: rgba(255,255,255,.35); color: #fff; }
  .hdr-dark .brand img { filter: none; }
}
/* the hero and page headers sit under a 64px bar */
.hero-in { padding-top: 7rem; }
.phero-in { padding-block: 5.5rem var(--space-2xl); }

/* ═══════════════════════════════════ calm pass 2 — ornament budget ══ */
.cta-orb::after { display: none; }                 /* the riding point lives in the home hero only */
.cta::before, .cta-orb { opacity: .55; }
.hero .shot img { filter: saturate(.6) contrast(1.04) brightness(.62); }
.hero .shot::after { background: radial-gradient(120% 90% at 78% 18%, rgba(18,22,63,.1) 0%, rgba(18,22,63,.8) 62%), linear-gradient(180deg, rgba(18,22,63,.55) 0%, rgba(18,22,63,.3) 38%, rgba(18,22,63,.96) 100%); }

/* ═══════════════════════════════════ calm pass 2 — course finder ══ */
.finder { background: var(--color-paper); padding-block: var(--space-lg); }
.finder-in { display: grid; gap: var(--space-md); align-items: end; }
@media (min-width: 900px) { .finder-in { grid-template-columns: auto 1fr 1fr 1fr auto; } }
.finder-k { font-weight: 700; color: var(--color-ink); padding-bottom: 12px; }
.finder-f { display: grid; gap: 4px; }
.finder-f span { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-soft); }
.finder-f select { font: inherit; font-size: var(--text-sm); padding: 11px 12px; border: 1px solid var(--color-line-2); border-radius: 10px; background: #fff; color: var(--color-ink); min-height: 46px; }
.finder-f select:focus-visible { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(43,50,147,.12); }
.finder .btn { min-height: 46px; }

/* ═══════════════════════════════════ home header: transparent over the hero, white once scrolled ══ */
.hdr-dark { background: transparent; border-bottom-color: transparent; }
.hdr-dark.stuck { background: var(--color-paper); border-bottom-color: var(--color-line); box-shadow: 0 4px 18px rgba(18,22,63,.08); }
@media (min-width: 880px) {
  .hdr-dark.stuck .brand .nm { color: var(--brand-logo-blue); }
  .hdr-dark.stuck .brand .nm .lat { color: var(--color-ink-faint); }
}
@media (min-width: 1080px) {
  .hdr-dark.stuck .nav a { color: var(--color-ink-soft); }
  .hdr-dark.stuck .nav a:hover, .hdr-dark.stuck .nav a[aria-current="page"] { color: var(--brand-blue); }
  .hdr-dark.stuck .btn-glass { border-color: var(--color-line-2); color: var(--color-ink); }
}
@media (max-width: 1079px) {
  .hdr-dark { background: transparent; }
  .hdr-dark.stuck { background: var(--color-paper); }
  .hdr-dark.stuck .menu-btn { border-color: var(--color-line-2); color: var(--color-ink); }
}

/* ═══════════════════════════════════ inner-page header — the faint tinted photo (concept 4) ══ */
.phero-pic { position: absolute; inset-block: 0; inset-inline-start: 55%; inset-inline-end: 0; z-index: 0; pointer-events: none; }
.phero-pic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(1.05); opacity: .35; }
.phero-pic::before { content: ""; position: absolute; inset: 0; background: var(--fc, var(--brand-blue)); mix-blend-mode: color; opacity: .8; z-index: 1; }
.phero-pic::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to left, var(--color-paper-2) 0%, rgba(246,247,251,.6) 40%, rgba(246,247,251,.1) 100%); }
.phero-in { position: relative; z-index: 2; }
@media (max-width: 899px) { .phero-pic { inset-inline-start: 0; opacity: .5; } .phero-pic::after { background: linear-gradient(180deg, rgba(246,247,251,.85), rgba(246,247,251,.6)); } }

/* ═══════════════════════════════════ clients — logo wall + register ══ */
.lwall { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-md); margin-top: var(--space-2xl); }
@media (min-width: 640px) { .lwall { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 980px) { .lwall { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; } }
.lwall div { height: 88px; }
.lwall div { background: var(--color-paper); border: 1px solid var(--color-line-2); border-radius: var(--radius-md); height: 96px; display: grid; place-items: center; padding: 14px; }
.lwall img { max-height: 56px; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter var(--dur-mid) var(--ease-out), opacity var(--dur-mid) var(--ease-out); }
.lwall div:hover img { filter: none; opacity: 1; }
.reg { margin-top: var(--space-2xl); border-top: 2px solid var(--color-ink); }
.reg .r { display: grid; grid-template-columns: 96px minmax(0,1fr) 120px; gap: var(--space-lg); align-items: center; padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-line); }
.reg .r img { max-height: 44px; max-width: 96px; object-fit: contain; }
.reg .r b { display: block; font-size: var(--text-base); }
.reg .r p { margin-top: 4px; color: var(--color-ink-soft); font-size: var(--text-sm); max-width: 72ch; }
.reg .dur { font-weight: 700; color: var(--brand-blue); text-align: end; white-space: nowrap; }
.reg .dur small { display: block; font-weight: 400; color: var(--color-ink-faint); font-size: var(--text-xs); }
@media (max-width: 640px) { .reg .r { grid-template-columns: 1fr; gap: var(--space-sm); } .reg .dur { text-align: start; } }

/* ═══════════════════════════════════ delivery — comparison table first ══ */
.bigm { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--color-paper); border: 1px solid var(--color-line-2); border-radius: var(--radius-md); overflow: hidden; }
.bigm thead th { padding: 22px 16px 16px; text-align: center; border-bottom: 1px solid var(--color-line-2); background: var(--color-paper-2); vertical-align: bottom; }
.bigm thead th svg { width: 34px; height: 34px; color: var(--brand-blue); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; margin: 0 auto 8px; }
.bigm thead th b { display: block; font-size: var(--text-base); }
.bigm thead th small { display: block; color: var(--color-ink-soft); font-size: var(--text-xs); font-weight: 400; margin-top: 4px; }
.bigm tbody th { text-align: start; padding: 14px 16px; font-size: var(--text-sm); color: var(--color-ink-soft); font-weight: 700; border-bottom: 1px solid var(--color-line); width: 150px; background: var(--color-paper-2); }
.bigm tbody td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--color-line); font-size: var(--text-sm); }
.bigm tbody tr:hover td { background: var(--color-paper-2); }
.bigm tfoot td { padding: 16px; text-align: center; }
.bigm tfoot td .btn { width: 100%; }
.det { display: grid; gap: var(--space-md); margin-top: var(--space-2xl); }
@media (min-width: 900px) { .det { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.det article { border: 1px solid var(--color-line-2); border-radius: var(--radius-md); padding: var(--space-lg); background: var(--color-paper); display: grid; grid-template-columns: 44px minmax(0,1fr); gap: var(--space-md); }
.det svg { width: 30px; height: 30px; color: var(--brand-blue); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.det h3 { font-size: var(--text-lg); }
.det p { color: var(--color-ink-soft); font-size: var(--text-sm); margin-top: 4px; }
.det .w { margin-top: 8px; font-size: var(--text-xs); color: var(--color-ink-faint); }
@media (max-width: 760px) { .bigm thead th small { display: none; } .bigm thead th, .bigm tbody td, .bigm tbody th { padding: 10px 8px; font-size: var(--text-xs); } .bigm tbody th { width: 92px; } }

/* ── field pages · concept ج «الدليل المطبوع» ─────────────────────────── */
.cat-grid { display: grid; gap: var(--space-2xl); margin-top: var(--space-2xl); align-items: start; }
@media (min-width: 980px) { .cat-grid { grid-template-columns: minmax(0,1fr) 300px; } }
.cat { columns: 2; column-gap: var(--space-2xl); }
@media (max-width: 760px) { .cat { columns: 1; } }
.cat h3 { break-after: avoid; display: flex; align-items: baseline; gap: 8px; font-size: var(--text-base); font-weight: 700; color: var(--fc); padding: 14px 0 8px; border-bottom: 2px solid var(--fc); margin: 0 0 6px; }
.cat h3:first-child { padding-top: 0; }
.cat h3 .tn { font-variant-numeric: tabular-nums; }
.cat h3 small { font-weight: 400; color: var(--color-ink-faint); font-size: var(--text-xs); margin-inline-start: auto; }
.cat .it { break-inside: avoid; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--color-line); font-size: var(--text-sm); color: inherit; }
.cat .it.is-link { grid-template-columns: 30px minmax(0,1fr) 20px; color: var(--brand-blue); font-weight: 600; }
.cat .it.is-link .go { width: 18px; height: 18px; align-self: center; transition: transform var(--dur-fast) var(--ease-out); }
.cat .it.is-link .go svg { width: 100%; height: 100%; }
.cat .it.is-link:hover .go { transform: translateX(-4px); }
.cat .it .ix { color: var(--color-ink-faint); font-size: var(--text-xs); padding-top: 3px; font-variant-numeric: tabular-nums; }
.cat .it .d { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--color-ink-soft); margin-top: 2px; line-height: 1.5; }
.cside { position: sticky; top: 92px; display: grid; gap: var(--space-md); }
@media (max-width: 979px) { .cside { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.cside .bx { background: var(--color-paper); border: 1px solid var(--color-line-2); border-radius: var(--radius-md); padding: var(--space-lg); display: grid; gap: 8px; align-content: start; }
.cside .bx .k { font-size: var(--text-xs); font-weight: 700; color: var(--brand-blue); }
.cside .bx p { font-size: var(--text-sm); color: var(--color-ink-soft); }
.cside .bx .row { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--color-line); padding-top: 8px; font-size: var(--text-sm); }
.cside .bx .row b { text-align: left; }
.cside .bx .btn { justify-self: start; margin-top: 4px; }

/* ── RSO course page · concept أ (sub-nav + sticky booking rail) ─────────── */
.faq { margin-top: var(--space-2xl); border-top: 1px solid var(--color-line-2); }
.faq details { border-bottom: 1px solid var(--color-line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 4px; font-weight: 700; font-size: var(--text-base); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--brand-blue); line-height: 1; flex-shrink: 0; }
.faq details[open] summary::after { content: "–"; }
.faq p { padding: 0 4px 18px; color: var(--color-ink-soft); font-size: var(--text-sm); max-width: 70ch; }
.chk { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; gap: 0 var(--space-xl); }
@media (min-width: 760px) { .chk { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.chk li { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--color-line); }
.chk svg { width: 22px; height: 22px; fill: none; stroke: var(--brand-blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.chk b { display: block; font-size: var(--text-base); } .chk span { display: block; color: var(--color-ink-soft); font-size: var(--text-sm); margin-top: 2px; }
.subnav { position: sticky; top: 64px; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-line-2); }
.subnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: block; padding: 14px 16px; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-soft); white-space: nowrap; border-bottom: 2px solid transparent; }
.subnav a.on, .subnav a:hover { color: var(--color-ink); border-color: var(--brand-gold); }
.cgrid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-2xl); align-items: start; padding-block: var(--space-2xl) var(--space-3xl); }
.cgrid > * { min-width: 0; }
@media (min-width: 1000px) { .cgrid { grid-template-columns: minmax(0,1fr) 340px; } }
.cmain > section { scroll-margin-top: 130px; padding-block: var(--space-xl) var(--space-2xl); border-bottom: 1px solid var(--color-line-2); }
.cmain > section:first-child { padding-top: 0; }
.cmain > section:last-child { border-bottom: 0; }
.cmain .head { margin-bottom: var(--space-md); }
.cmain .curr, .cmain .chk, .cmain .faq, .cmain .fees, .cmain .table-scroll, .cmain .days { margin-top: var(--space-lg); }
.ov p { max-width: 70ch; color: var(--color-ink-soft); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--color-line-2); border: 1px solid var(--color-line-2); border-radius: var(--radius-md); overflow: hidden; margin-top: var(--space-lg); }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.facts div { background: var(--color-paper); padding: 16px 18px; } .facts .k { font-size: var(--text-xs); color: var(--color-ink-faint); } .facts .v { font-weight: 700; font-size: var(--text-lg); margin-top: 2px; }
.days { border-top: 1px solid var(--color-line-2); }
.day { display: grid; grid-template-columns: 56px 130px minmax(0,1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--color-line); }
.day .n { font-size: var(--text-2xl); font-weight: 700; color: var(--f-radiation); font-variant-numeric: tabular-nums; line-height: 1; }
.day .d { font-weight: 700; } .day .t { color: var(--color-ink-soft); font-size: var(--text-sm); }
@media (max-width: 600px) { .day { grid-template-columns: 44px minmax(0,1fr); } .day .t { grid-column: 2; } }
.rounds tr.next td { background: rgba(240,207,44,.08); }
.rounds .nxt { display: inline-block; margin-inline-start: 8px; font-size: 11px; font-weight: 700; color: var(--color-on-gold); background: var(--brand-gold); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.rail { position: sticky; top: 130px; display: grid; gap: var(--space-md); }
@media (max-width: 999px) { .rail { position: static; } }
.book { background: var(--color-night); color: #fff; border-radius: var(--radius-md); padding: var(--space-lg); display: grid; gap: 14px; }
.book .k { font-size: var(--text-xs); color: rgba(255,255,255,.6); font-weight: 700; }
.book .nx { font-size: var(--text-xl); font-weight: 700; line-height: 1.3; } .book .nx small { display: block; font-size: var(--text-sm); font-weight: 400; color: rgba(255,255,255,.7); }
.book .modes { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; overflow: hidden; }
.book .modes label { display: grid; gap: 2px; padding: 12px 14px; background: var(--color-night); cursor: pointer; }
.book .modes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.book .modes label:has(input:checked) { background: rgba(255,255,255,.1); box-shadow: inset 0 -2px 0 var(--brand-gold); }
.book .modes label:has(input:focus-visible) { outline: 2px solid var(--brand-gold); outline-offset: -2px; }
.book .modes .m { font-size: var(--text-xs); color: rgba(255,255,255,.7); } .book .modes .p { font-weight: 700; font-size: var(--text-lg); }
.book .btn { justify-self: stretch; text-align: center; }
.book .all { font-size: var(--text-xs); color: rgba(255,255,255,.75); text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.mini { background: var(--color-paper); border: 1px solid var(--color-line-2); border-radius: var(--radius-md); padding: var(--space-lg); display: grid; gap: 8px; }
.mini .row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-sm); padding-top: 8px; border-top: 1px solid var(--color-line); } .mini .row:first-child { border: 0; padding-top: 0; }
.mini .row b { text-align: left; }

/* ── programme detail pages (prog-*.html) ─────────────────────────────── */
.pgrid .cmain > section:first-child .head { margin-bottom: var(--space-md); }
.chk.chk-1 { grid-template-columns: minmax(0,1fr); }
.chk.chk-1 b { font-weight: 500; }
.pcont { margin-top: var(--space-lg); display: grid; gap: var(--space-lg); }
.pc-grp h3 { font-size: var(--text-base); font-weight: 700; color: var(--fc, var(--brand-blue)); padding-bottom: 8px; border-bottom: 2px solid var(--fc, var(--brand-blue)); margin-bottom: 4px; }
.pc-grp ul { list-style: none; margin: 0; padding: 0; }
.pc-grp li { position: relative; padding: 9px 22px 9px 0; border-bottom: 1px solid var(--color-line); font-size: var(--text-sm); color: var(--color-ink); }
.pc-grp li::before { content: ""; position: absolute; inset-inline-start: 4px; top: 1.05em; width: 6px; height: 6px; border-radius: 50%; background: var(--fc, var(--brand-blue)); }
.who { max-width: 70ch; color: var(--color-ink-soft); }
.mini.rel { gap: 0; }
.mini.rel .k { font-size: var(--text-xs); font-weight: 700; color: var(--brand-blue); margin-bottom: 6px; }
.mini.rel .row { display: block; padding: 9px 0; border-top: 1px solid var(--color-line); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.mini.rel .row:hover { color: var(--brand-blue); }

/* section-level action row */
.sec-acts { margin-top: var(--space-xl); display: flex; justify-content: flex-start; }

/* courses: summary line above the table */
.csum { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-soft); }
.csum b { color: var(--color-ink); font-weight: 700; }
.csum a { color: var(--brand-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* register: employer-pays box */
.po-box { display: grid; gap: 12px; margin-top: 14px; padding: 16px; border: 1px dashed var(--color-line-2); border-radius: 12px; background: var(--color-paper); }
.po-box .k { font-size: var(--text-xs); font-weight: 700; color: var(--brand-blue); }

/* register: paste list */
.paste-box { margin-top: 10px; border: 1px dashed var(--color-line-2); border-radius: 12px; padding: 10px 14px; }
.paste-box summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); color: var(--brand-blue); }
.paste-box .hint { font-size: var(--text-xs); color: var(--color-ink-faint); margin: 8px 0; }
.paste-box textarea { width: 100%; font: inherit; font-size: var(--text-sm); padding: 10px; border: 1px solid var(--color-line-2); border-radius: 8px; margin-bottom: 8px; }
.reg-det td { background: var(--color-paper-2); }

/* ── contact · concept ج (form + sticky information rail) ─────────────── */
.c-grid { display: grid; gap: var(--space-2xl); align-items: start; } @media (min-width: 980px) { .c-grid { grid-template-columns: minmax(0,1.25fr) 360px; } }
.c-grid > * { min-width: 0; }
.cform { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.cform .two { display: grid; gap: var(--space-md); } @media (min-width: 700px) { .cform .two { grid-template-columns: 1fr 1fr; } }
.cform .fld { display: grid; gap: 6px; } .cform .fld > span { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-soft); }
.cform input, .cform select, .cform textarea { font: inherit; font-size: var(--text-base); padding: 12px 14px; border: 1px solid var(--color-line-2); border-radius: 10px; background: var(--color-paper); color: var(--color-ink); width: 100%; }
.cform textarea { resize: vertical; min-height: 140px; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: 2px solid var(--brand-blue); outline-offset: 0; border-color: var(--brand-blue); }
.c-send { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; margin-top: 6px; } .c-send .note { margin: 0; }
.rail2 { display: grid; gap: var(--space-md); position: sticky; top: 92px; } @media (max-width: 979px) { .rail2 { position: static; } }
.rail2 .bx { background: var(--color-paper); border: 1px solid var(--color-line-2); border-radius: var(--radius-md); padding: var(--space-lg); }
.rail2 .bx h3 { font-size: var(--text-xs); font-weight: 700; color: var(--brand-blue); margin-bottom: 6px; }
.info { display: grid; } .ir { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--color-line); align-items: start; } .ir:last-child { border-bottom: 0; }
.ir svg { width: 22px; height: 22px; fill: none; stroke: var(--brand-blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-top: 3px; }
.ir .k { display: block; font-size: var(--text-xs); color: var(--color-ink-faint); font-weight: 700; margin-bottom: 2px; }
.ir a, .ir b { font-weight: 600; color: var(--color-ink); overflow-wrap: anywhere; } .ir a:hover { color: var(--brand-blue); }
.ir small { display: block; color: var(--color-ink-soft); font-size: var(--text-xs); margin-top: 2px; line-height: 1.5; }
.rail2 .quick a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-line); font-weight: 600; color: var(--color-ink); font-size: var(--text-sm); }
.rail2 .quick a:first-of-type { border-top: 0; } .rail2 .quick a::after { content: "\2190"; color: var(--brand-blue); } .rail2 .quick a:hover { color: var(--brand-blue); }
.mapbox { border: 1px solid var(--color-line-2); border-radius: var(--radius-md); overflow: hidden; background: var(--color-paper-2); }
.mapbox iframe { display: block; width: 100%; height: 220px; border: 0; }
.mapbox .dir { display: block; padding: 10px 14px; font-size: var(--text-xs); font-weight: 700; color: var(--brand-blue); border-top: 1px solid var(--color-line-2); background: var(--color-paper); }

/* ── about · merged concept (figures band + profile + methodology) ──────── */
.figband { background: var(--color-night); padding: var(--space-2xl) 0; }
.figs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-md); overflow: hidden; }
@media (min-width: 760px) { .figs { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.figs div { background: var(--color-night); padding: 22px 26px; } .figs b { display: block; font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; color: var(--brand-gold); font-variant-numeric: tabular-nums; }
.figs span { display: block; font-size: var(--text-xs); color: rgba(255,255,255,.7); margin-top: 6px; }
.intro { display: grid; gap: var(--space-2xl); align-items: start; } @media (min-width: 980px) { .intro { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); } }
.intro-p { font-size: var(--text-lg); line-height: 1.8; color: var(--color-ink-soft); max-width: 60ch; margin-top: var(--space-lg); }
.mv { display: grid; gap: var(--space-md); } .mv .card h3 { display: flex; align-items: center; gap: 10px; } .mv .card svg { width: 22px; height: 22px; fill: none; stroke: var(--brand-blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vlist { display: grid; gap: 0 var(--space-2xl); margin-top: var(--space-2xl); border-top: 1px solid var(--color-line-2); } @media (min-width: 760px) { .vlist { grid-template-columns: 1fr 1fr; } }
.vlist > div { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--color-line); align-items: start; }
.vlist svg { width: 22px; height: 22px; fill: none; stroke: var(--brand-blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-top: 3px; }
.vlist b { display: block; } .vlist span { display: block; font-size: var(--text-sm); color: var(--color-ink-soft); }
.steps { display: grid; gap: var(--space-md); margin-top: var(--space-xl); } @media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.st { padding: var(--space-lg); border: 1px solid var(--color-line-2); border-radius: var(--radius-md); background: var(--color-paper); }
.st .n { font-size: var(--text-3xl); font-weight: 700; color: var(--brand-gold-deep, #A9800A); line-height: 1; } .st h3 { margin-top: 8px; font-size: var(--text-lg); }
.st ul { margin: 10px 0 0; padding-inline-start: 18px; color: var(--color-ink-soft); font-size: var(--text-sm); display: grid; gap: 4px; }
.three { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); } @media (min-width: 860px) { .three { grid-template-columns: repeat(3, minmax(0,1fr)); } .three.four { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.pt svg { width: 28px; height: 28px; fill: none; stroke: var(--brand-blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .pt h3 { margin-top: 10px; font-size: var(--text-lg); } .pt p { color: var(--color-ink-soft); font-size: var(--text-sm); margin-top: 4px; }
.acc2 { display: grid; gap: var(--space-md); margin-top: var(--space-xl); } @media (min-width: 760px) { .acc2 { grid-template-columns: 1fr 1fr; } }
.ac { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 18px; align-items: center; padding: var(--space-lg); border: 1px solid var(--color-line-2); border-radius: var(--radius-md); background: var(--color-paper); }
.ac img { width: 96px; height: auto; } .ac b { display: block; font-size: var(--text-base); } .ac span { display: block; font-size: var(--text-xs); color: var(--color-ink-soft); margin-top: 4px; }
.ac a { color: var(--brand-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ── evaluation form ─────────────────────────────────────────────────── */
.ev-wrap { max-width: 860px; margin: 0 auto; }
.ev-course { background: var(--color-paper); border: 1px solid var(--color-line-2); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); display: grid; gap: 2px; }
.ev-course .k { font-size: var(--text-xs); font-weight: 700; color: var(--brand-blue); } .ev-course b { font-size: var(--text-lg); } .ev-course span { font-size: var(--text-sm); color: var(--color-ink-soft); }
.ev-form { margin-top: 0; }
.ev-grid { border: 1px solid var(--color-line-2); border-radius: var(--radius-md); overflow: hidden; }
.ev-head, .ev-row { display: grid; grid-template-columns: minmax(0,2fr) repeat(5, minmax(0,1fr)); align-items: center; }
.ev-head { background: var(--color-paper-2); font-size: var(--text-xs); font-weight: 700; text-align: center; } .ev-head span { padding: 10px 6px; } .ev-head small { display: block; font-weight: 400; color: var(--color-ink-faint); font-size: 10px; }
.ev-row { border-top: 1px solid var(--color-line); } .ev-row:nth-child(even) { background: rgba(246,247,251,.6); }
.ev-lbl { padding: 12px 14px; font-size: var(--text-sm); font-weight: 600; } .ev-lbl small { display: block; font-weight: 400; color: var(--color-ink-faint); font-size: 11px; }
.ev-row label { display: flex; justify-content: center; align-items: center; padding: 10px 0; cursor: pointer; } .ev-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ev-row i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-line-2); display: inline-block; transition: all var(--dur-fast) var(--ease-out); }
.ev-row label:hover i { border-color: var(--brand-blue); } .ev-row input:checked + i { border-color: var(--brand-blue); background: var(--brand-blue); box-shadow: inset 0 0 0 4px #fff; } .ev-row input:focus-visible + i { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
@media (max-width: 640px) { .ev-head span small { display: none; } .ev-lbl { padding: 10px 8px; font-size: var(--text-xs); } }
/* ── practice exam ───────────────────────────────────────────────────── */
.ex-wrap { max-width: 820px; margin: 0 auto; }
.ex-start h2 { font-size: var(--text-2xl); } .ex-prog { font-size: var(--text-xs); color: var(--color-ink-faint); font-weight: 700; } .ex-prog span { color: var(--brand-blue); }
.ex-text { font-size: var(--text-xl); margin: 10px 0 var(--space-lg); line-height: 1.5; }
.ex-opts { display: grid; gap: 10px; }
.ex-opt { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; align-items: center; text-align: start; font: inherit; font-size: var(--text-base); padding: 12px 14px; border: 1px solid var(--color-line-2); border-radius: 12px; background: var(--color-paper); cursor: pointer; color: var(--color-ink); transition: border-color var(--dur-fast) var(--ease-out); }
.ex-opt i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; background: var(--color-paper-2); color: var(--color-ink-soft); }
.ex-opt:hover:not(:disabled) { border-color: var(--brand-blue); } .ex-opt.ok { border-color: #1f8a4c; background: #edf8f1; } .ex-opt.ok i { background: #1f8a4c; color: #fff; } .ex-opt.bad { border-color: #c0392b; background: #fdf1ef; } .ex-opt.bad i { background: #c0392b; color: #fff; }
.ex-fb { margin-top: var(--space-md); padding: 12px 14px; border-radius: 10px; background: var(--color-paper-2); font-size: var(--text-sm); } .ex-fb .ok { color: #1f8a4c; } .ex-fb .bad { color: #c0392b; } .ex-fb p { margin-top: 4px; color: var(--color-ink-soft); }
.ex-score { display: grid; gap: 4px; padding: var(--space-lg); border-radius: var(--radius-md); background: var(--color-night); color: #fff; margin-bottom: var(--space-xl); } .ex-score b { font-size: var(--text-3xl); color: var(--brand-gold); } .ex-score.fail b { color: #ffb4a8; } .ex-score span { color: rgba(255,255,255,.75); font-size: var(--text-sm); }
.ex-res h3 { font-size: var(--text-lg); margin: var(--space-xl) 0 var(--space-md); }
.ex-topics { display: grid; gap: 10px; } .ex-t { display: grid; grid-template-columns: minmax(0,1fr) 2fr auto; gap: 12px; align-items: center; font-size: var(--text-sm); }
.ex-t .bar, .er-b .bar { height: 8px; background: var(--color-paper-2); border-radius: 4px; overflow: hidden; } .ex-t .bar i, .er-b .bar i { display: block; height: 100%; background: var(--brand-blue); }
.ex-rev { padding: 12px 0; border-top: 1px solid var(--color-line); font-size: var(--text-sm); } .ex-rev .ok { color: #1f8a4c; } .ex-rev .bad { color: #c0392b; }
.lat-ui { font-family: "IBM Plex Sans", var(--font-ar); }
/* ── evaluation report ───────────────────────────────────────────────── */
.er-wrap { max-width: 860px; margin: 0 auto; } .er-head { display: flex; justify-content: space-between; align-items: start; gap: var(--space-lg); }
.er-kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--color-line-2); border: 1px solid var(--color-line-2); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-xl) 0; }
.er-kpis div { background: var(--color-paper); padding: 18px 20px; } .er-kpis b { display: block; font-size: var(--text-3xl); font-weight: 700; } .er-kpis span { font-size: var(--text-xs); color: var(--color-ink-soft); }
.er-wrap h3 { font-size: var(--text-lg); margin: var(--space-xl) 0 var(--space-md); }
.er-bars { display: grid; gap: 10px; } .er-b { display: grid; grid-template-columns: minmax(0,1.2fr) 2fr auto; gap: 12px; align-items: center; font-size: var(--text-sm); }
.er-q { margin: 0 0 12px; padding: 12px 16px; border-inline-start: 3px solid var(--brand-gold); background: var(--color-paper-2); border-radius: 8px; font-size: var(--text-sm); } .er-q footer { margin-top: 6px; font-size: var(--text-xs); color: var(--color-ink-faint); }
.er-foot { margin-top: var(--space-xl); }
@media print { .no-print { display: none !important; } .er-kpis b, .ex-score b { -webkit-print-color-adjust: exact; } }
/* ── calendar link in schedule tables ───────────────────────────────── */
a.cal { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-faint); margin-inline-start: 6px; white-space: nowrap; } a.cal:hover { color: var(--brand-blue); }

/* ── legal pages · 404 · footer links ───────────────────────────────── */
.legal { display: grid; gap: var(--space-2xl); align-items: start; } @media (min-width: 980px) { .legal { grid-template-columns: 260px minmax(0,1fr); } }
.legal-toc { position: sticky; top: 92px; display: grid; gap: 2px; border-inline-start: 1px solid var(--color-line-2); } @media (max-width: 979px) { .legal-toc { position: static; border: 0; } }
.legal-toc .k { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-faint); padding: 0 14px 8px; }
.legal-toc a { display: block; padding: 8px 14px; font-size: var(--text-sm); color: var(--color-ink-soft); margin-inline-start: -1px; border-inline-start: 2px solid transparent; } .legal-toc a:hover { color: var(--color-ink); border-color: var(--brand-gold); }
.legal-toc .upd { font-size: var(--text-xs); color: var(--color-ink-faint); padding: 12px 14px 0; }
.legal-body { max-width: 72ch; } .legal-body section { padding: var(--space-lg) 0; border-top: 1px solid var(--color-line); scroll-margin-top: 90px; } .legal-body section:first-child { border-top: 0; padding-top: 0; }
.legal-body h2 { font-size: var(--text-xl); margin-bottom: 10px; } .legal-body p { color: var(--color-ink-soft); line-height: 1.85; margin-bottom: 10px; }
.legal-body ul { margin: 6px 0 10px; padding-inline-start: 20px; color: var(--color-ink-soft); line-height: 1.8; display: grid; gap: 6px; }
.legal-body a { color: var(--brand-blue); font-weight: 600; }
a.card.nf { display: block; color: inherit; } a.card.nf:hover { border-color: var(--brand-blue); } a.card.nf p { color: var(--color-ink-soft); margin-top: 4px; }
.ftr-links a { color: rgba(255,255,255,.8); display: inline; padding: 0; } .ftr-links a:hover { color: var(--brand-gold); }
.agree a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 2px; }

/* ── waitlist («أبلغني بالموعد») ── */
.wl { display: grid; gap: 8px; }
.wl .k { font-size: var(--text-xs); font-weight: 700; color: var(--fc, var(--brand-navy)); letter-spacing: .02em; margin: 0; }
.wl .wl-p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); max-width: 46ch; }
.wl .wl-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.wl input[type=email] { flex: 1 1 220px; min-width: 0; padding: 11px 14px; border: 1px solid var(--color-line-2, #cfd3e6); border-radius: var(--radius-sm, 8px); font: inherit; font-size: var(--text-sm); background: #fff; }
.wl input[type=email]:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 1px; }
.wl .wl-msg { margin: 0; font-size: var(--text-xs); color: var(--color-ink-2); min-height: 1.2em; }
.wl.done .wl-row { display: none; } .wl.done .wl-msg { color: var(--brand-navy); font-weight: 700; }
.wl-band { border: 1px solid var(--color-line, #e3e6f2); border-inline-start: 4px solid var(--fc, var(--brand-gold)); border-radius: var(--radius-md); padding: 22px 24px; background: #fff; margin-top: 18px; }
.wl-band .wl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; column-gap: 28px; }
.wl-band .wl .wl-row { grid-column: 2; grid-row: 1 / span 2; } .wl-band .wl .wl-msg { grid-column: 1 / -1; }
@media (max-width: 720px) { .wl-band .wl { grid-template-columns: minmax(0, 1fr); } .wl-band .wl .wl-row { grid-column: 1; grid-row: auto; } }
.rail .wl-c { background: var(--color-paper-2, #f5f6fb); border-radius: var(--radius-md); padding: 16px 18px; }
.rail .wl-c .wl-p { font-size: var(--text-xs); }
/* verify → LinkedIn */
.btn-li { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 16px; border-radius: 999px; background: #0a66c2; color: #fff; font-weight: 700; font-size: var(--text-sm); text-decoration: none; }
.btn-li:hover { background: #084f96; color: #fff; } .btn-li:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.btn-li svg { width: 16px; height: 16px; fill: currentColor; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.wl-c .wl-row { flex-direction: column; } .wl-c .wl-row .btn { align-self: start; }
.wl-c .wl-row input[type=email] { flex: 0 0 auto; width: 100%; }