/* ==========================================================================
   MASAR | مسار — Design System
   Built on the official MASAR palette: Navy #0E3A7B and Red #E11B22, exactly
   as supplied. Darker and lighter steps are derived from those two values so
   every combination clears WCAG AA; the primary colours themselves are never
   altered.

   Written with CSS logical properties so one stylesheet serves both
   RTL (Arabic) and LTR (English, Bahasa Indonesia).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* -- Brand: MASAR Navy --------------------------------------------------
     --navy-800 IS the official navy. Everything else is derived from it.
     Contrast on white: 800 = 11.0:1, 700 = 9.4:1, 600 = 7.6:1.            */
  --navy-900: #092a5b;
  --navy-800: #0e3a7b; /* MASAR Navy — official, do not change */
  --navy-700: #12448e;
  --navy-600: #1951a3;
  --navy-500: #2463bd;
  --navy-200: #c0ccdd;
  --navy-100: #dde3ed;
  --navy-050: #f2f5fa;
  --navy-rgb: 14, 58, 123;

  /* -- Brand: MASAR Red ---------------------------------------------------
     --red-600 IS the official red. White on it is 4.8:1 and it is 4.8:1 on
     white, so it carries buttons, links and small bold labels at AA.      */
  --red-800: #941216;
  --red-700: #b3161b;
  --red-600: #e11b22; /* MASAR Red — official, do not change */
  --red-500: #e7343a;
  --red-100: #fbdfe0;
  --red-050: #fdf2f3;
  --red-rgb: 225, 27, 34;

  /* -- Supporting palette -------------------------------------------------
     Used sparingly and semantically, never decoratively. The -600 (or -500)
     step is the official supplied value; the darker step exists purely so
     small text can meet AA, because several of the supplied colours do not
     on their own. One accent per visual section, and never colour alone:
     every coloured element also carries a text label or an icon.          */

  /* Bachelor-level content */
  --blue-700: #335d94;
  --blue-600: #406eab;
  --blue-500: #4f7dba; /* Academic Blue — official */
  --blue-100: #e6edf5;
  --blue-050: #f5f8fb;

  /* Scholarships and confirmed opportunities */
  --green-700: #286a4e;
  --green-600: #2f7d5b; /* Scholarship Green — official */
  --green-100: #e2ede8;
  --green-050: #f4f8f6;

  /* Government and institutional information */
  --teal-700: #246c68;
  --teal-600: #2a7f7a; /* Institutional Teal — official */
  --teal-100: #e1edec;
  --teal-050: #f3f8f8;

  /* Important notes. The official gold is 2.6:1 on white, so it is a fill
     and a border only — text on it always uses --gold-800. */
  --gold-800: #805f1e;
  --gold-700: #916e27;
  --gold-600: #c49a45; /* Warm Gold — official */
  --gold-100: #f7f1e5;
  --gold-050: #fcf9f5;

  /* Postgraduate content */
  --plum-700: #5e4e7a;
  --plum-600: #6c5a8d; /* Graduate Plum — official */
  --plum-100: #eae8ef;
  --plum-050: #f7f6f9;

  /* -- Neutrals ----------------------------------------------------------- */
  --ink: #24313f;      /* Deep Charcoal — official */
  --ink-soft: #3d4d5e;
  --muted: #5c6b7c;
  --muted-2: #6d7c8c;
  --line: #e2e8ee;
  --line-strong: #cbd5df;
  --bg: #ffffff;
  --bg-soft: #f7f9fb;
  --bg-tint: #eef2f5;  /* Cool Gray — official */
  --bg-sand: #f4f0e8;  /* Soft Sand — official */

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Shadows — light and restrained, tinted with MASAR Navy */
  --sh-xs: 0 1px 2px rgba(14, 58, 123, .06);
  --sh-sm: 0 1px 3px rgba(14, 58, 123, .07), 0 1px 2px rgba(14, 58, 123, .04);
  --sh-md: 0 6px 18px rgba(14, 58, 123, .08), 0 2px 6px rgba(14, 58, 123, .04);
  --sh-lg: 0 18px 44px rgba(14, 58, 123, .12), 0 6px 14px rgba(14, 58, 123, .06);

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px;
  --s-11: 80px; --s-12: 104px;

  /* Layout */
  --container: 1180px;
  --container-narrow: 820px;
  --header-h: 72px;

  /* Type — Cairo carries the Arabic, matching the MASAR publication system.
     Plus Jakarta Sans carries English and Bahasa Indonesia. */
  --font-latin: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-arabic: "Cairo", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --font: var(--font-latin);

  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.125rem;
  --fs-4xl: 2.75rem;
  --fs-5xl: 3.35rem;

  --lh-tight: 1.18;
  --lh-snug: 1.35;
  --lh-normal: 1.65;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* Arabic typography: Cairo sits slightly smaller on the body than Plus
   Jakarta Sans at the same nominal size and needs more leading, so the scale
   is adjusted rather than shared. Mobile Arabic readability is the priority
   here — line-height and size are deliberately generous. */
html[lang="ar"] {
  --font: var(--font-arabic);
  --lh-tight: 1.34;
  --lh-snug: 1.55;
  --lh-normal: 1.9;
  --fs-5xl: 3rem;
  --fs-4xl: 2.45rem;
  --fs-md: 1.09rem;
  --fs-base: 1.03rem;
  --fs-sm: .9rem;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--navy-800);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -.012em;
}
/* Cairo: ExtraBold for the big Arabic headings, Bold for the rest. */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5 { letter-spacing: 0; font-weight: 700; }
html[lang="ar"] h1, html[lang="ar"] .h-display, html[lang="ar"] .h1 { font-weight: 800; }
html[lang="ar"] .btn, html[lang="ar"] .chip, html[lang="ar"] .badge,
html[lang="ar"] .field label, html[lang="ar"] .nav a { font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--navy-600); text-decoration: none; }
a:hover { color: var(--red-600); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--navy-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--navy-100); color: var(--navy-900); }

.skip-link {
  position: absolute; inset-inline-start: var(--s-4); top: -60px;
  z-index: 200; background: var(--navy-800); color: #fff;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-sm);
  font-weight: 700; transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--s-3); color: #fff; }

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

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-5); }
.container-narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--s-11); }
.section-sm { padding-block: var(--s-9); }
.section-soft { background: var(--bg-soft); }
.section-tint { background: var(--bg-tint); }
.section-navy { background: var(--navy-800); color: #ccd8e8; }
.section-navy h1, .section-navy h2, .section-navy h3, .section-navy h4 { color: #fff; }

.stack > * + * { margin-block-start: var(--s-4); }
.grid { display: grid; gap: var(--s-5); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flex { display: flex; gap: var(--s-3); }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   4. TYPE HELPERS
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--red-600); margin-block-end: var(--s-3);
}
html[lang="ar"] .eyebrow { letter-spacing: 0; text-transform: none; }
.eyebrow::before {
  content: ""; inline-size: 22px; block-size: 2px;
  background: var(--red-600); border-radius: 2px;
}
.section-navy .eyebrow { color: #ff9ba1; }
.section-navy .eyebrow::before { background: #ff9ba1; }

.h-display { font-size: var(--fs-5xl); }
.h1 { font-size: var(--fs-4xl); }
.h2 { font-size: var(--fs-3xl); }
.h3 { font-size: var(--fs-2xl); }
.h4 { font-size: var(--fs-xl); }
.lead { font-size: var(--fs-lg); color: var(--muted); line-height: var(--lh-normal); }
.section-navy .lead { color: #b6c6db; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.measure { max-width: 64ch; }
.measure-sm { max-width: 52ch; }

.section-head { max-width: 660px; margin-block-end: var(--s-8); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .lead { margin-block-start: var(--s-3); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-block-size: 48px; padding: var(--s-3) var(--s-6);
  border-radius: var(--r-sm); border: 1.5px solid transparent;
  font-size: var(--fs-base); font-weight: 700; line-height: 1.2;
  cursor: pointer; text-align: center;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .icon { inline-size: 18px; block-size: 18px; flex: none; }

.btn-primary { background: var(--red-600); color: #fff; box-shadow: 0 2px 10px rgba(var(--red-rgb),.24); }
.btn-primary:hover { background: var(--red-700); color: #fff; box-shadow: 0 6px 18px rgba(var(--red-rgb),.3); }

.btn-navy { background: var(--navy-800); color: #fff; }
.btn-navy:hover { background: var(--navy-700); color: #fff; }

.btn-outline { background: #fff; color: var(--navy-800); border-color: var(--line-strong); }
.btn-outline:hover { background: var(--navy-050); color: var(--navy-800); border-color: var(--navy-100); }

.btn-onnavy { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.34); }
.btn-onnavy:hover { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.6); }

.btn-ghost { background: transparent; color: var(--navy-700); padding-inline: var(--s-3); }
.btn-ghost:hover { color: var(--red-600); background: var(--navy-050); }

.btn-sm { min-block-size: 40px; padding: var(--s-2) var(--s-4); font-size: var(--fs-sm); }
.btn-lg { min-block-size: 56px; padding: var(--s-4) var(--s-8); font-size: var(--fs-md); }
.btn-block { display: flex; inline-size: 100%; }

.btn-wa { background: #128c7e; color: #fff; }
.btn-wa:hover { background: #0e6f64; color: #fff; }

/* Text link with a directional arrow that mirrors in RTL */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 700; color: var(--navy-700); font-size: var(--fs-base);
}
.link-arrow .icon { inline-size: 17px; block-size: 17px; transition: transform .2s var(--ease); }
.link-arrow:hover { color: var(--red-600); }
.link-arrow:hover .icon { transform: translateX(3px); }
[dir="rtl"] .link-arrow .icon { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover .icon { transform: scaleX(-1) translateX(3px); }

/* --------------------------------------------------------------------------
   6. BADGES / PILLS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.4;
  border: 1px solid transparent; white-space: nowrap;
}
.badge-full { background: var(--navy-050); color: var(--navy-700); border-color: var(--navy-100); }
.badge-partial { background: var(--bg-tint); color: var(--ink-soft); border-color: var(--line-strong); }
.badge-open { background: var(--green-050); color: var(--green-700); border-color: #c6ded4; }
.badge-soon { background: var(--gold-050); color: var(--gold-800); border-color: #ecdcb8; }
.badge-upcoming { background: var(--bg-tint); color: var(--muted); border-color: var(--line-strong); }
.badge-demo { background: var(--red-050); color: var(--red-700); border-color: var(--red-100); }
.badge-dot::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-6); box-shadow: var(--sh-xs);
  transition: box-shadow .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.card-hover:hover { box-shadow: var(--sh-md); border-color: var(--navy-100); transform: translateY(-2px); }
.card-flat { box-shadow: none; }
.card h3 { font-size: var(--fs-lg); }
.card p { color: var(--muted); font-size: var(--fs-base); }

.card-icon {
  inline-size: 48px; block-size: 48px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--navy-050); color: var(--navy-700);
  margin-block-end: var(--s-4); flex: none;
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.card-icon .icon { inline-size: 24px; block-size: 24px; }
.card-hover:hover .card-icon { background: var(--red-050); color: var(--red-600); }

/* Need-picker cards — the primary homepage journey selector */
.need-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-6); box-shadow: var(--sh-xs); position: relative; overflow: hidden;
  transition: box-shadow .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.need-card::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  inline-size: 100%; block-size: 3px; background: var(--red-600);
  transform: scaleX(0); transform-origin: inline-start; transition: transform .28s var(--ease);
}
.need-card:hover { box-shadow: var(--sh-md); border-color: var(--navy-100); transform: translateY(-3px); }
.need-card:hover::after { transform: scaleX(1); }
.need-card h3 { font-size: var(--fs-lg); }
.need-card p { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-snug); margin: 0; flex: 1; }
.need-card .link-arrow { font-size: var(--fs-sm); }

/* Scholarship card */
.sch-card { display: flex; flex-direction: column; gap: var(--s-4); }
.sch-card .sch-top { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sch-card h3 { font-size: var(--fs-lg); }
.sch-card .sch-org { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.sch-meta { display: grid; gap: var(--s-2); border-block-start: 1px solid var(--line); padding-block-start: var(--s-4); }
.sch-meta-row { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); }
.sch-meta-row .icon { inline-size: 16px; block-size: 16px; color: var(--muted-2); flex: none; }
.sch-meta-row dt { color: var(--muted); }
.sch-meta-row dd { margin: 0; color: var(--ink); font-weight: 600; margin-inline-start: auto; }
.sch-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.sch-actions .btn { flex: 1 1 auto; }

/* University card */
.uni-card { display: flex; flex-direction: column; gap: var(--s-3); }
.uni-badge {
  inline-size: auto; min-inline-size: 44px; padding-inline: 8px;
  block-size: 44px; border-radius: var(--r-xs);
  background: var(--navy-800); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: var(--fs-sm); letter-spacing: .02em; flex: none;
}

/* Stat / placeholder tiles */
.stat { text-align: center; padding: var(--s-5); }
.stat .n { font-size: var(--fs-3xl); font-weight: 800; color: var(--navy-800); line-height: 1; }
.stat .l { font-size: var(--fs-sm); color: var(--muted); margin-block-start: var(--s-2); }

/* --------------------------------------------------------------------------
   8. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 80;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(1.5) blur(10px);
  border-block-end: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: var(--s-5);
  min-block-size: var(--header-h);
}
.brand { display: inline-flex; align-items: center; flex: none; }
/* Logo sizing lives in section 25, with the rest of the brand placement. */

.nav { display: flex; align-items: center; gap: var(--s-1); margin-inline-start: auto; }
.nav a {
  display: inline-flex; align-items: center; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-xs); font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-soft); white-space: nowrap; position: relative;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav a:hover { color: var(--navy-800); background: var(--navy-050); }
.nav a[aria-current="page"] { color: var(--navy-800); font-weight: 700; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline: var(--s-3);
  block-size: 2px; background: var(--red-600); border-radius: 2px;
}
.header-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }

/* Language switcher */
.lang { position: relative; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-block-size: 40px; padding: var(--s-2) var(--s-3);
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 700; color: var(--navy-800); cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.lang-toggle:hover { border-color: var(--navy-100); background: var(--navy-050); }
.lang-toggle .icon { inline-size: 16px; block-size: 16px; color: var(--muted); }
.lang-toggle .chev { transition: transform .2s var(--ease); }
.lang-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0;
  min-inline-size: 190px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: var(--sh-lg); padding: var(--s-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 90;
}
.lang-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-xs); font-size: var(--fs-sm);
  font-weight: 600; color: var(--ink-soft);
}
.lang-menu a:hover { background: var(--navy-050); color: var(--navy-800); }
.lang-menu a[aria-current="true"] { color: var(--navy-800); font-weight: 700; background: var(--navy-050); }
.lang-menu .tick { inline-size: 16px; block-size: 16px; color: var(--red-600); }
.lang-menu .native { font-size: var(--fs-base); }

/* Mobile nav */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px; border: 1px solid var(--line-strong);
  background: #fff; border-radius: var(--r-sm); cursor: pointer; color: var(--navy-800);
}
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 79;
  background: #fff; padding: var(--s-6) var(--s-5) var(--s-10);
  overflow-y: auto; display: none; flex-direction: column; gap: var(--s-2);
}
.mobile-nav.open { display: flex; animation: slideDown .24s var(--ease); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mobile-nav a.m-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-2); font-size: var(--fs-lg); font-weight: 700;
  color: var(--navy-800); border-block-end: 1px solid var(--line);
}
.mobile-nav a.m-link .icon { inline-size: 18px; block-size: 18px; color: var(--muted-2); }
[dir="rtl"] .mobile-nav a.m-link .icon { transform: scaleX(-1); }
.mobile-nav .m-cta { margin-block-start: var(--s-5); display: grid; gap: var(--s-3); }
.mobile-lang { display: flex; gap: var(--s-2); margin-block-start: var(--s-6); }
.mobile-lang a {
  flex: 1; text-align: center; padding: var(--s-3); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 700; color: var(--ink-soft);
}
.mobile-lang a[aria-current="true"] { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

/* The header carries a seven-item nav in three languages. Bahasa Indonesia
   has the longest labels, so these breakpoints are driven by that worst case:
   the language label goes first, then the CTA, then the nav itself. */
.site-header .container { max-width: 1440px; padding-inline: var(--s-6); }
.nav a { padding-inline: 10px; }

@media (max-width: 1360px) { .lang-toggle .lang-label { display: none; } }
@media (max-width: 1230px) { .header-actions .btn-cta { display: none; } }
@media (max-width: 1100px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; margin-inline-start: auto; }
  .header-actions { order: 3; }
  .header-actions .btn-cta { display: inline-flex; }
}
@media (max-width: 560px) { .header-actions .btn-cta { display: none; } }

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(25,81,163,.55), transparent 62%),
    linear-gradient(168deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: #c7d5e7;
  padding-block: var(--s-11) var(--s-12);
}
[dir="rtl"] .hero { background:
    radial-gradient(1100px 520px at 22% -10%, rgba(25,81,163,.55), transparent 62%),
    linear-gradient(192deg, var(--navy-800) 0%, var(--navy-900) 100%); }
.hero-art {
  position: absolute; inset-block: 0; inset-inline-end: 1%;
  inline-size: 56%; block-size: 100%;
  opacity: .2; pointer-events: none; color: #fff;
}
[dir="rtl"] .hero-art { transform: scaleX(-1); }
.hero h1 { color: #fff; font-size: var(--fs-5xl); }
.hero .hero-sub { color: #b9cae0; font-size: var(--fs-lg); margin-block-start: var(--s-5); max-width: 54ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-8); }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  margin-block-start: var(--s-9); padding-block-start: var(--s-6);
  border-block-start: 1px solid rgba(255,255,255,.14);
}
.hero-trust li { list-style: none; display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: #a9bdd6; }
.hero-trust .icon { inline-size: 17px; block-size: 17px; color: #ff9ba1; flex: none; }

/* Hero side panel: the 6-step path preview */

@media (max-width: 960px) {
  .hero { padding-block: var(--s-9) var(--s-10); }
  .hero-art { inline-size: 100%; inset-inline-end: 0; opacity: .11; }
}

/* Compact page hero for internal pages */
.page-hero {
  background: linear-gradient(168deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: #bdcde1; padding-block: var(--s-9) var(--s-10); position: relative; overflow: hidden;
}
.page-hero .hero-art { opacity: .13; inline-size: 42%; block-size: 118%; inset-inline-end: -2%; }
.page-hero h1 { color: #fff; font-size: var(--fs-4xl); }
.page-hero .lead { color: #b6c6db; margin-block-start: var(--s-4); }
.page-hero-inner { position: relative; max-width: 720px; }

/* --------------------------------------------------------------------------
   10. BREADCRUMBS
   -------------------------------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); margin-block-end: var(--s-5); }
.crumbs li { list-style: none; display: flex; align-items: center; gap: var(--s-2); color: #93aac6; }
.crumbs a { color: #cddaea; }
.crumbs a:hover { color: #fff; }
.crumbs .sep { opacity: .5; }
[dir="rtl"] .crumbs .sep { transform: scaleX(-1); }
.crumbs [aria-current="page"] { color: #fff; font-weight: 600; }

/* --------------------------------------------------------------------------
   11. STEPS / JOURNEY
   -------------------------------------------------------------------------- */
.journey { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4); position: relative; }
.journey::before {
  content: ""; position: absolute; inset-block-start: 23px; inset-inline: 8%;
  block-size: 2px; background: linear-gradient(90deg, var(--navy-100), var(--red-100));
}
.step { position: relative; text-align: center; }
.step .n {
  inline-size: 46px; block-size: 46px; border-radius: 50%; margin-inline: auto;
  display: grid; place-items: center; background: #fff; color: var(--navy-800);
  border: 2px solid var(--navy-100); font-weight: 800; font-size: var(--fs-base);
  position: relative; z-index: 1; transition: all .22s var(--ease);
}
.step:hover .n { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.step h3 { font-size: var(--fs-base); margin-block-start: var(--s-4); }
.step p { font-size: var(--fs-sm); color: var(--muted); margin-block-start: var(--s-2); line-height: var(--lh-snug); }
@media (max-width: 900px) {
  .journey { grid-template-columns: 1fr; gap: 0; }
  .journey::before { inset-block: 24px 24px; inset-inline-start: 22px; inset-inline-end: auto; inline-size: 2px; block-size: auto;
    background: linear-gradient(180deg, var(--navy-100), var(--red-100)); }
  [dir="rtl"] .journey::before { inset-inline-start: auto; inset-inline-end: 22px; }
  .step { display: grid; grid-template-columns: 46px 1fr; gap: var(--s-4); text-align: start; padding-block: var(--s-4); }
  .step h3 { margin-block-start: 0; padding-block-start: 10px; }
  .step .n { margin-inline: 0; }
  .step p { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   12. FILTERS / CHIPS
   -------------------------------------------------------------------------- */
.filters {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-5); box-shadow: var(--sh-xs); margin-block-end: var(--s-7);
}
.filter-row + .filter-row { margin-block-start: var(--s-4); padding-block-start: var(--s-4); border-block-start: 1px solid var(--line); }
.filter-label { font-size: var(--fs-sm); font-weight: 700; color: var(--navy-800); margin-block-end: var(--s-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex; align-items: center; min-block-size: 38px;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-full);
  border: 1px solid var(--line-strong); background: #fff;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); cursor: pointer;
  transition: all .18s var(--ease);
}
.chip:hover { border-color: var(--navy-100); background: var(--navy-050); color: var(--navy-800); }
.chip[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.results-count { font-size: var(--fs-sm); color: var(--muted); margin-block-end: var(--s-5); }
.empty-state { text-align: center; padding: var(--s-10) var(--s-5); border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--bg-soft); }

/* --------------------------------------------------------------------------
   13. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--fs-sm); font-weight: 700; color: var(--navy-800); }
.field .req { color: var(--red-600); }
.field .hint { font-size: var(--fs-xs); color: var(--muted); }
.input, .select, .textarea {
  inline-size: 100%; min-block-size: 50px; padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  background: #fff; font-family: inherit; font-size: var(--fs-base); color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.textarea { min-block-size: 120px; padding-block: var(--s-3); resize: vertical; line-height: var(--lh-snug); }
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 4px rgba(var(--navy-rgb),.14);
}
.select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6b7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 18px;
  background-position: right var(--s-4) center; padding-inline-end: var(--s-9);
}
[dir="rtl"] .select { background-position: left var(--s-4) center; padding-inline-end: var(--s-4); padding-inline-start: var(--s-9); }
.field.invalid .input, .field.invalid .select, .field.invalid .textarea { border-color: var(--red-500); }
.field .err { font-size: var(--fs-xs); color: var(--red-700); font-weight: 600; display: none; }
.field.invalid .err { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-snug); }
.form-status {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-5); border-radius: var(--r-sm); font-size: var(--fs-base);
  border: 1px solid transparent; animation: slideDown .3s var(--ease);
}
.form-status .icon { inline-size: 22px; block-size: 22px; flex: none; }
.form-success { background: var(--green-050); border-color: #c6ded4; color: var(--green-700); }
.form-success .icon { color: var(--green-600); }
.form-error { background: var(--red-050); border-color: var(--red-100); color: var(--red-800); }
.form-error .icon { color: var(--red-600); }
.form-status strong { color: inherit; }

/* --------------------------------------------------------------------------
   14. ACCORDION (FAQ)
   -------------------------------------------------------------------------- */
.acc { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.acc-item + .acc-item { border-block-start: 1px solid var(--line); }
.acc-btn {
  inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5); background: none; border: 0; cursor: pointer; text-align: start;
  font-size: var(--fs-md); font-weight: 700; color: var(--navy-800);
  transition: background-color .18s var(--ease);
}
.acc-btn:hover { background: var(--bg-soft); }
.acc-btn .icon { inline-size: 20px; block-size: 20px; color: var(--muted); flex: none; transition: transform .22s var(--ease); }
.acc-btn[aria-expanded="true"] .icon { transform: rotate(180deg); color: var(--red-600); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s var(--ease); }
.acc-panel > div { overflow: hidden; }
.acc-panel.open { grid-template-rows: 1fr; }
.acc-body { padding: 0 var(--s-5) var(--s-5); color: var(--muted); font-size: var(--fs-base); }

/* --------------------------------------------------------------------------
   15. CONTENT BLOCKS
   -------------------------------------------------------------------------- */
.prose { color: var(--ink-soft); }
.prose h2 { font-size: var(--fs-2xl); margin-block: var(--s-9) var(--s-4); }
.prose h3 { font-size: var(--fs-xl); margin-block: var(--s-7) var(--s-3); }
.prose > *:first-child { margin-block-start: 0; }
.prose p { margin-block-end: var(--s-4); line-height: var(--lh-normal); }
.prose ul, .prose ol { margin-block-end: var(--s-4); padding-inline-start: var(--s-6); }
.prose li { margin-block-end: var(--s-2); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose strong { color: var(--navy-800); }

.check-list { display: grid; gap: var(--s-3); }
.check-list li { list-style: none; display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-base); }
.check-list .icon { inline-size: 20px; block-size: 20px; color: var(--red-600); flex: none; margin-block-start: 2px; }
.section-navy .check-list .icon { color: #ff9ba1; }

.kv { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.kv div { display: grid; grid-template-columns: minmax(96px, 32%) minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) var(--s-5); }
.kv dd { overflow-wrap: anywhere; }
.kv div + div { border-block-start: 1px solid var(--line); }
.kv div:nth-child(odd) { background: var(--bg-soft); }
.kv dt { font-weight: 700; color: var(--navy-800); font-size: var(--fs-sm); }
.kv dd { margin: 0; color: var(--ink-soft); font-size: var(--fs-base); }
@media (max-width: 640px) { .kv div { grid-template-columns: 1fr; gap: var(--s-1); } }

.callout {
  border: 1px solid var(--navy-100); background: var(--navy-050);
  border-radius: var(--r-md); padding: var(--s-5);
  display: flex; gap: var(--s-4); align-items: flex-start;
}
.callout .icon { inline-size: 22px; block-size: 22px; color: var(--navy-600); flex: none; margin-block-start: 2px; }
.callout p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: var(--lh-snug); }
.callout strong { color: var(--navy-800); }
.callout-warn { border-color: #ecdcb8; background: var(--gold-050); }
.callout-warn .icon { color: var(--gold-800); }

/* Service CTA block used on scholarship / university detail pages */
.service-block {
  border: 1px solid var(--navy-100); border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--navy-050), #fff 65%);
  padding: var(--s-8);
}
.service-block h2 { font-size: var(--fs-2xl); }
.service-block .lead { font-size: var(--fs-base); margin-block: var(--s-3) var(--s-5); }

/* Branded media placeholder — replace with real photography */
.media {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  background: var(--navy-800); aspect-ratio: 16 / 10; max-inline-size: 100%;
  display: grid; place-items: center; color: rgba(255,255,255,.55);
}
.media .path-pattern { position: absolute; inset: 0; opacity: .2; color: #fff; }
.media .media-label {
  position: relative; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  text-align: center; padding: var(--s-4); line-height: var(--lh-snug);
}
.media-4x3 { aspect-ratio: 4 / 3; }
.media-1x1 { aspect-ratio: 1 / 1; }

/* Table (responsive) */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
table.t { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-inline-size: 460px; }
table.t th, table.t td { padding: var(--s-3) var(--s-4); text-align: start; border-block-end: 1px solid var(--line); }
table.t th { background: var(--bg-soft); font-weight: 700; color: var(--navy-800); white-space: nowrap; }
table.t tr:last-child td { border-block-end: 0; }

/* CTA band */
.cta-band {
  background: linear-gradient(150deg, var(--navy-800), var(--navy-900));
  border-radius: var(--r-xl); padding: var(--s-10); text-align: center;
  position: relative; overflow: hidden; color: #b9cae0;
}
.cta-band .path-pattern { position: absolute; inset: 0; opacity: .13; color: #fff; }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; font-size: var(--fs-3xl); }
.cta-band p { margin-block: var(--s-4) var(--s-7); font-size: var(--fs-lg); color: #b9cae0; }
.cta-band .btns { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
@media (max-width: 640px) { .cta-band { padding: var(--s-8) var(--s-5); } }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: #95a9c4; padding-block: var(--s-10) var(--s-6); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-8); }
/* .footer-brand img sizing lives in section 25. */
.footer-brand p { font-size: var(--fs-sm); color: #8ca0bb; max-width: 34ch; line-height: var(--lh-snug); }
.footer-col h2 { font-size: var(--fs-sm); color: #fff; text-transform: uppercase; letter-spacing: .07em; margin-block-end: var(--s-4); }
html[lang="ar"] .footer-col h2 { text-transform: none; letter-spacing: 0; font-size: var(--fs-base); }
.footer-col ul { display: grid; gap: var(--s-3); }
.footer-col li { list-style: none; }
.footer-col a { color: #9fb2cb; font-size: var(--fs-sm); }
.footer-col a:hover { color: #fff; }
.social { display: flex; gap: var(--s-2); margin-block-start: var(--s-5); }
.social a {
  inline-size: 40px; block-size: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: rgba(255,255,255,.07);
  color: #b8c9e0; transition: background-color .18s var(--ease), color .18s var(--ease);
}
.social a:hover { background: var(--red-600); color: #fff; }
.social .icon { inline-size: 19px; block-size: 19px; }
.footer-langs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-block-start: var(--s-4); }
.footer-langs a {
  padding: 7px 13px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700; color: #b8c9e0;
}
.footer-langs a:hover { border-color: rgba(255,255,255,.4); color: #fff; }
.footer-langs a[aria-current="true"] { background: rgba(255,255,255,.12); color: #fff; border-color: transparent; }
.footer-bottom {
  margin-block-start: var(--s-9); padding-block-start: var(--s-6);
  border-block-start: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center;
}
.footer-bottom p, .footer-bottom a { font-size: var(--fs-xs); color: #8396b1; }
.footer-bottom a:hover { color: #fff; }
.footer-legal { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.footer-disclaimer {
  margin-block-start: var(--s-5); font-size: var(--fs-xs); color: #8396ab;
  line-height: var(--lh-snug); max-width: 80ch;
}
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   17. FLOATING WHATSAPP
   -------------------------------------------------------------------------- */
.wa-fab {
  position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 70;
  inline-size: 56px; block-size: 56px; border-radius: 50%;
  display: grid; place-items: center; background: #25d366; color: #fff;
  box-shadow: 0 8px 24px rgba(18,140,126,.4);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa-fab:hover { transform: scale(1.06); color: #fff; box-shadow: 0 12px 30px rgba(18,140,126,.5); }
.wa-fab .icon { inline-size: 28px; block-size: 28px; }

/* --------------------------------------------------------------------------
   18. RESPONSIVE GRID COLLAPSE
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  :root { --s-11: 56px; --s-12: 64px; --fs-5xl: 2.25rem; --fs-4xl: 1.95rem; --fs-3xl: 1.6rem; --fs-2xl: 1.375rem; }
  html[lang="ar"] { --fs-5xl: 2.15rem; --fs-4xl: 1.85rem; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .section-head { margin-block-end: var(--s-6); }
  .card, .need-card { padding: var(--s-5); }
  .service-block { padding: var(--s-6); }
  body { font-size: var(--fs-base); }
}

/* Split layouts */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-10); align-items: center; }
.split-wide { grid-template-columns: 1.15fr .85fr; }
.split-side { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--s-8); align-items: start; }
@media (max-width: 900px) { .split, .split-wide, .split-side { grid-template-columns: 1fr; gap: var(--s-7); } }

.sticky-side { position: sticky; inset-block-start: calc(var(--header-h) + 20px); }
@media (max-width: 900px) { .sticky-side { position: static; } }

/* Reveal on scroll — subtle, respects reduced motion */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   19. FILTERABLE GRIDS
   -------------------------------------------------------------------------- */
.sch-item { display: flex; }
.sch-item > .card { flex: 1; }
.sch-item[hidden] { display: none; }

/* Cards used as whole-card links keep their arrow pinned to the bottom. */
.need-card .link-arrow { margin-block-start: auto; }

/* Document-preparation page uses a 4-step journey. */
@media (min-width: 901px) {
  .journey[style*="repeat(4"]::before { inset-inline: 12%; }
}

/* Table of contents links */
.sticky-side nav a:hover { background: var(--navy-050); color: var(--navy-800); }

/* Legal + prose pages get a comfortable measure */
.container-narrow .prose p, .container-narrow .prose li { max-width: 72ch; }

/* Make sure long placeholder badges wrap rather than overflow */
.badge-demo { white-space: normal; }

/* --------------------------------------------------------------------------
   20. RTL DIRECTIONAL ICONS
   Only icons that express "forward" are mirrored. Brand and object icons
   (WhatsApp, calendar, building…) must never be flipped.
   -------------------------------------------------------------------------- */
[dir="rtl"] .i-dir { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   21. FIXES
   -------------------------------------------------------------------------- */
.journey, .journey li, .hero-trust, .check-list li { list-style: none; }
.journey { padding: 0; }
.sch-card { block-size: 100%; }
.sch-actions { margin-block-start: auto; }

/* The homepage consultation block needs a form column wide enough for
   two-up fields; 340px (the default aside width) squeezes them. */
.split-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-10); align-items: start; }
@media (max-width: 900px) { .split-form { grid-template-columns: 1fr; gap: var(--s-7); } }


/* ==========================================================================
   22. V1 REFINEMENT — simplified hero, conditional blocks, new components
   ========================================================================== */

/* -- Hero: single column, centred on the decision that follows it --------- */
.hero-inner { position: relative; max-width: 720px; }
.hero h1 { color: #fff; font-size: var(--fs-5xl); }
.hero .hero-sub { color: #b9cae0; font-size: var(--fs-lg); margin-block-start: var(--s-5); max-width: 56ch; }
@media (min-width: 961px) { .hero { padding-block: var(--s-12) var(--s-11); } }

/* -- Section heading beside a button ------------------------------------- */
.head-row {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--s-4); margin-block-end: var(--s-8);
}
.head-row .section-head { margin-block-end: 0; }

/* -- "check the official announcement" status ---------------------------- */
.badge-check {
  background: var(--navy-050); color: var(--navy-700); border-color: var(--navy-100);
  gap: 6px; white-space: normal; text-align: start;
}
.badge-lg { font-size: var(--fs-sm); padding: 8px 14px; }
.badge-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-end: var(--s-4); }

/* -- Verification line ---------------------------------------------------- */
.verify-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); color: var(--muted); margin-block-end: var(--s-6);
}
.verify-row .icon { color: var(--green-700); flex: none; }
.verify-row a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.verify-sep { opacity: .5; }

/* -- Note line under a grid ---------------------------------------------- */
.note-line { display: flex; align-items: flex-start; gap: 8px; margin-block-start: var(--s-6); line-height: var(--lh-snug); }
.note-line .icon { flex: none; margin-block-start: 2px; }

/* -- Journey: four steps -------------------------------------------------- */
.journey-4 { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 901px) { .journey-4::before { inset-inline: 12%; } }
@media (max-width: 900px) { .journey-4 { grid-template-columns: 1fr; } }

/* -- Trust cards ---------------------------------------------------------- */
.trust-card { background: var(--bg-soft); border-color: transparent; }
.trust-card h3 { font-size: var(--fs-md); margin-block-start: 0; }
.trust-card p { margin-block-start: 8px; }
.section-soft .trust-card { background: #fff; }

/* -- Filters -------------------------------------------------------------- */
.filter-title { font-size: var(--fs-md); margin-block-end: var(--s-4); display: flex; align-items: center; gap: 8px; }

/* -- Facts card ----------------------------------------------------------- */
.facts-card { padding: var(--s-6); }
.facts-card h2 { margin-block-end: var(--s-4); }
.kv-flush { border: 0; }
.kv-flush div { padding-inline: 0; }
.uni-head { display: flex; align-items: center; gap: 14px; margin-block-end: var(--s-5); }
.uni-head-name { font-weight: 800; color: var(--navy-800); line-height: 1.3; }
.uni-badge-lg { min-inline-size: 52px; block-size: 52px; font-size: var(--fs-base); }

/* -- Branded visual panel (stands in for photography, never looks broken) -- */
.brand-panel {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(155deg, var(--navy-700), var(--navy-900));
  display: grid; place-items: center; color: rgba(255,255,255,.9);
}
.brand-panel .path-pattern { position: absolute; inset: 0; opacity: .18; color: #fff; }
.brand-panel-mono {
  position: relative; font-size: clamp(2rem, 8vw, 3.25rem); font-weight: 800;
  letter-spacing: .04em; color: #fff; opacity: .95;
}
.brand-panel-logo { position: relative; opacity: .92; }
.brand-panel-cap {
  position: absolute; inset-block-end: 12px; inset-inline: 12px;
  font-size: var(--fs-xs); color: rgba(255,255,255,.7); text-align: center;
}

/* -- Numbered list (how to apply) ---------------------------------------- */
.numbered { list-style: decimal; padding-inline-start: 22px; display: grid; gap: var(--s-2); }
.numbered li { color: var(--ink-soft); }

.related { margin-block-start: var(--s-10); }
.prose h2.first { margin-block-start: 0; }

/* -- Services page -------------------------------------------------------- */
.service-card { padding: var(--s-7); }
.service-head { display: flex; align-items: center; gap: var(--s-4); margin-block-end: var(--s-5); }
.service-head .card-icon { margin: 0; }
.service-n { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.service-lead { font-size: var(--fs-base); color: var(--muted); margin-block-end: var(--s-6); }
.service-foot {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-block-start: var(--s-7); padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--line);
}
.step-card { padding: var(--s-7); }
.step-n {
  display: grid; place-items: center; inline-size: 40px; block-size: 40px;
  border-radius: 50%; background: var(--navy-800); color: #fff;
  font-weight: 800; margin-block-end: var(--s-4);
}
.step-card p { margin-block-start: 8px; }
.pricing-card { max-width: 720px; margin: var(--s-8) auto 0; padding: var(--s-7); text-align: center; }
.pricing-card p { margin-block-start: var(--s-3); }

/* -- Callouts / tinted cards --------------------------------------------- */
.callout-wide { max-width: 880px; margin-block-end: var(--s-9); }
.card-tint { background: var(--navy-050); border-color: var(--navy-100); padding: var(--s-7); }

/* -- Forms ---------------------------------------------------------------- */
.form-card { padding: var(--s-8); }
.form-card-sub { margin-block: var(--s-3) var(--s-7); }
@media (max-width: 640px) { .form-card { padding: var(--s-5); } }

.field-consent .consent-label {
  display: flex; gap: 10px; align-items: flex-start;
  font-weight: 500; font-size: var(--fs-sm); cursor: pointer; color: var(--ink-soft);
}
.field-consent input[type="checkbox"] {
  inline-size: 20px; block-size: 20px; margin-block-start: 2px;
  accent-color: var(--navy-700); flex: none;
}

/* Honeypot: clipped, not off-canvas. A negative inset would extend an RTL
   page sideways and push the real content out of view. */
.hp {
  position: absolute !important; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* -- Contact -------------------------------------------------------------- */
.channel-card { display: flex; flex-direction: column; gap: var(--s-3); }
.contact-split { margin-block-start: var(--s-9); gap: var(--s-9); }
.hours { font-weight: 700; color: var(--navy-800); font-size: var(--fs-sm); }
.social-list { display: grid; gap: var(--s-3); }
.social-list li { list-style: none; }
.social-list a { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 600; }

/* -- Legal ---------------------------------------------------------------- */
.legal-prose { margin-block-start: var(--s-6); }
.legal-links {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-block-start: var(--s-9); padding-block-start: var(--s-7);
  border-block-start: 1px solid var(--line);
}

/* -- 404 ------------------------------------------------------------------ */
.section-404 { padding-block: var(--s-12); }
.code-404 { font-size: 5rem; font-weight: 800; color: var(--navy-100); line-height: 1; }

/* -- Small-screen spacing pass (360 / 390 / 430) -------------------------- */
@media (max-width: 460px) {
  :root { --s-11: 48px; --s-12: 56px; }
  .container { padding-inline: var(--s-4); }
  .card, .need-card, .service-card, .step-card, .facts-card { padding: var(--s-5); }
  .cta-band { padding: var(--s-7) var(--s-5); }
  .hero-cta .btn, .cta-band .btn { flex: 1 1 100%; }
  .sch-actions .btn { flex: 1 1 100%; }
  .service-foot .btn { flex: 1 1 100%; }
  .legal-links .btn { flex: 1 1 100%; }
  .uni-badge { min-inline-size: 40px; block-size: 40px; font-size: var(--fs-xs); }
  .code-404 { font-size: 3.5rem; }
}

/* ==========================================================================
   23. MASAR — semantic accents and brand components

   House rule, enforced by how these classes are applied rather than by the
   stylesheet: MASAR Navy + MASAR Red, plus AT MOST ONE supporting accent
   within any single visual section. Colour never carries meaning on its own —
   every coloured element here also carries a text label or an icon.
   ========================================================================== */

/* -- Neutral surfaces ----------------------------------------------------- */
.section-sand { background: var(--bg-sand); }

/* -- Scholarships / confirmed opportunities → Scholarship Green ----------- */
.badge-full {
  background: var(--green-050); color: var(--green-700); border-color: #c6ded4;
}
.badge-open {
  background: var(--green-050); color: var(--green-700); border-color: #c6ded4;
}

/* -- Government / institutional information → Institutional Teal ---------- */
.callout-official { border-color: #cfe2e1; background: var(--teal-050); }
.callout-official .icon { color: var(--teal-700); }
.callout-official strong { color: var(--teal-700); }

/* -- Degree level: Bachelor → Academic Blue, Postgraduate → Graduate Plum -- */
.badge-level-bachelor {
  background: var(--blue-050); color: var(--blue-700); border-color: #d3dfee;
}
.badge-level-postgrad {
  background: var(--plum-050); color: var(--plum-700); border-color: #ddd8e5;
}
.badge-level-other {
  background: var(--bg-tint); color: var(--ink-soft); border-color: var(--line-strong);
}
.level-list { display: grid; gap: var(--s-3); padding: 0; margin-block: var(--s-5); }
.level-list li {
  list-style: none; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s-3); font-size: var(--fs-base);
}
.level-list .badge { flex: none; }

/* -- Important notes → Warm Gold ------------------------------------------ */
/* The official gold is a fill and a border only; its text uses --gold-800,
   because the brand value itself is 2.6:1 on white and would fail AA. */
.callout-warn { border-color: #ecdcb8; background: var(--gold-050); }
.callout-warn .icon { color: var(--gold-800); }
.callout-warn strong { color: var(--gold-800); }

/* -- Verification needed → MASAR Red -------------------------------------- */
.callout-verify { border-color: var(--red-100); background: var(--red-050); }
.callout-verify .icon { color: var(--red-700); }
.callout-verify strong { color: var(--red-800); }

/* -- Eyebrow variants ------------------------------------------------------ */
.eyebrow-gold { color: var(--gold-800); }
.eyebrow-gold::before { background: var(--gold-600); }
.eyebrow-green { color: var(--green-700); }
.eyebrow-green::before { background: var(--green-600); }

/* --------------------------------------------------------------------------
   24. MASAR — scholarship guide block
   Rendered only when site.guideUrl holds a real link.
   -------------------------------------------------------------------------- */
.guide-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--navy-100); border-radius: var(--r-xl);
  background: linear-gradient(160deg, #fff, var(--navy-050) 78%);
  padding: var(--s-10);
}
.guide-card .path-pattern {
  position: absolute; inset: 0; opacity: .05; color: var(--navy-800);
}
.guide-body { position: relative; max-width: 680px; }
.guide-body .lead { margin-block-start: var(--s-3); }
.guide-stats {
  display: flex; flex-wrap: wrap; gap: var(--s-8);
  margin-block: var(--s-7) var(--s-5);
}
.guide-stats div { display: flex; flex-direction: column-reverse; gap: 2px; }
.guide-stats dt { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.guide-stats dd {
  margin: 0; font-size: var(--fs-3xl); font-weight: 800;
  color: var(--navy-800); line-height: 1;
}
.guide-body .btn { margin-block-start: var(--s-6); }
@media (max-width: 640px) {
  .guide-card { padding: var(--s-7) var(--s-5); }
  .guide-stats { gap: var(--s-6); }
}

/* --------------------------------------------------------------------------
   25. MASAR — logo placement
   The lockups are the official SVGs, used at their own proportions. Height is
   set and width left automatic so the artwork is never stretched, and the
   surrounding padding respects the clear space in the brand sheet
   (x = stem width = 0.21 × mark width).
   -------------------------------------------------------------------------- */
.brand { padding-block: 6px; }
.brand img { block-size: 30px; inline-size: auto; }
@media (max-width: 400px) { .brand img { block-size: 26px; } }

.footer-brand img { block-size: 40px; inline-size: auto; margin-block-end: var(--s-5); }
.footer-handle {
  margin-block-start: var(--s-3); font-size: var(--fs-xs);
  font-weight: 700; letter-spacing: .04em; color: #8ca0bb;
}
html[lang="ar"] .footer-handle { letter-spacing: 0; }

/* The symbol standing in for photography keeps its own proportions too. */
.brand-panel-logo { inline-size: 34%; max-inline-size: 150px; }

/* --------------------------------------------------------------------------
   26. MASAR — social icons
   Four channels: Instagram, Facebook, TikTok, Telegram.
   -------------------------------------------------------------------------- */
.social a:hover, .social a:focus-visible { background: var(--red-600); color: #fff; }
.social-list a .icon { flex: none; color: var(--navy-700); }
.social-list a:hover .icon { color: var(--red-600); }

/* --------------------------------------------------------------------------
   27. MASAR — hero refinements
   The hero artwork is the journey drawing: a path leading to a campus gate.
   -------------------------------------------------------------------------- */
.hero { background:
    radial-gradient(1100px 520px at 78% -10%, rgba(25, 81, 163, .5), transparent 62%),
    linear-gradient(168deg, var(--navy-800) 0%, var(--navy-900) 100%); }
[dir="rtl"] .hero { background:
    radial-gradient(1100px 520px at 22% -10%, rgba(25, 81, 163, .5), transparent 62%),
    linear-gradient(192deg, var(--navy-800) 0%, var(--navy-900) 100%); }

/* A single red hairline along the foot of the hero: the path, continuing. */
.hero::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(90deg, transparent, var(--red-600) 45%, var(--red-500) 60%, transparent);
  opacity: .85;
}

.hero-sub strong { color: #fff; font-weight: 700; }

/* --------------------------------------------------------------------------
   28. MASAR — About: founder card
   -------------------------------------------------------------------------- */
.founder-card { display: grid; gap: var(--s-5); padding: var(--s-7); }
.founder-head { display: flex; align-items: center; gap: var(--s-4); }
.founder-mark {
  inline-size: 52px; block-size: 52px; border-radius: var(--r-sm);
  background: var(--navy-800); display: grid; place-items: center; flex: none;
}
.founder-mark img { inline-size: 28px; block-size: auto; }
.founder-name { font-weight: 800; color: var(--navy-800); font-size: var(--fs-lg); line-height: 1.3; }
.founder-role { font-size: var(--fs-sm); color: var(--muted); margin-block-start: 2px; }
.founder-facts { display: grid; gap: var(--s-2); padding: 0; margin: 0; }
.founder-facts li {
  list-style: none; display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--ink-soft);
}
.founder-facts .icon {
  inline-size: 17px; block-size: 17px; color: var(--navy-600);
  flex: none; margin-block-start: 3px;
}

/* --------------------------------------------------------------------------
   29. MASAR — focus visibility
   A red ring on navy surfaces, a navy ring everywhere else, so the focus
   indicator is always visible against whatever sits behind it.
   -------------------------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--navy-600); outline-offset: 2px; }
.hero :focus-visible, .page-hero :focus-visible, .cta-band :focus-visible,
.site-footer :focus-visible, .section-navy :focus-visible,
.guide-card :focus-visible { outline-color: #ffb3b8; }