@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }
  .od-nowrap  { white-space: nowrap; }
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; }
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }
  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */

:root{
  --navy:#004660;
  --navy-700:#003a52;
  --navy-900:#002f43;
  --blue:#0097CD;
  --blue-ink:#0A6E9E;
  --blue-soft:#E4F4FB;
  --lime:#A3D55C;
  --lime-bright:#C9FF7C;
  --green:#6F933E;
  --surface:#F5F6F9;
  --surface-2:#EDF1F6;
  --white:#FFFFFF;
  --ink:#1C1C1C;
  --body-c:#40474F;
  --muted:#5A6470;
  --border:#E1E6EC;
  --on-dark:#D7E1E8;
  --ok:#2F8F5B;
  --danger:#C0392B;
  --font-heading:'Cairo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Almarai',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'Amiri',Georgia,serif;
  --wrap:1200px;
  --edge:clamp(1rem,4vw,2.5rem);
  --sec:clamp(3.5rem,8vw,6.5rem);
  --r-sm:4px;
  --r-md:8px;
  --shadow:0 18px 40px rgba(0,70,96,.12);
  --t-fast:200ms;
  --t-base:250ms;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--white); color:var(--body-c);
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-heading); color:var(--ink); line-height:1.25; font-weight:700; }
p{ margin:0; }
a{ color:var(--blue-ink); text-decoration:none; }
a:hover{ color:var(--navy); }
ul{ margin:0; padding:0; }
.wrap{ width:min(var(--wrap),100% - (var(--edge)*2)); margin-inline:auto; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:3px; }
.on-dark :focus-visible,.site-footer :focus-visible,.site-header :focus-visible{ outline-color:var(--lime-bright); }
.skip{ position:absolute; inset-inline-start:1rem; top:-4rem; z-index:300; background:var(--lime); color:var(--navy-900); padding:.75rem 1.1rem; font-weight:700; border-radius:0 0 var(--r-sm) var(--r-sm); transition:top var(--t-fast); }
.skip:focus{ top:0; }

/* ---------- top utility bar ---------- */
.topbar{ background:var(--navy-900); color:var(--on-dark); font-size:.83rem; }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:40px; padding-block:.25rem; }
.util{ display:flex; flex-wrap:wrap; align-items:center; gap:.25rem 1.15rem; }
.util a{ color:var(--on-dark); font-size:.83rem; opacity:.92; padding:.35rem 0; }
.util a:hover,.util a:focus-visible{ color:var(--lime-bright); opacity:1; }
.lang{ display:flex; align-items:center; gap:.1rem; flex:0 0 auto; }
.lang button{ background:none; border:0; color:var(--on-dark); cursor:pointer; font:inherit; font-size:.85rem; font-weight:700; padding:.35rem .5rem; border-radius:var(--r-sm); min-width:38px; }
.lang button.is-active{ color:var(--navy-900); background:var(--lime); }
.lang button:hover{ color:var(--lime-bright); }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:200; background:var(--navy); transition:box-shadow var(--t-base),background var(--t-base); }
.site-header.is-scrolled{ background:var(--navy-900); box-shadow:0 10px 30px rgba(0,0,0,.22); }
.head-inner{ display:flex; align-items:center; gap:1.5rem; padding-block:.6rem; }
.brand{ display:flex; align-items:center; gap:.75rem; flex:0 0 auto; }
.brand-logo{ display:grid; place-items:center; background:var(--white); border-radius:var(--r-md); padding:4px; }
.brand-logo img{ height:42px; width:42px; object-fit:contain; }
.brand-name{ color:var(--white); font-family:var(--font-heading); font-weight:800; font-size:1.12rem; line-height:1.1; }
.brand-sub{ display:block; color:var(--lime); font-size:.72rem; font-family:var(--font-body); font-weight:700; letter-spacing:.02em; margin-top:2px; }
.nav{ margin-inline-start:auto; }
.nav > ul{ display:flex; align-items:center; gap:.15rem; list-style:none; }
.nav > ul > li{ position:relative; }
.nav a.top{ display:inline-flex; align-items:center; gap:.35rem; color:var(--white); font-size:.95rem; font-weight:700; padding:.7rem .8rem; border-radius:var(--r-sm); transition:color var(--t-fast),background var(--t-fast); }
.nav a.top:hover,.nav a.top.is-active{ color:var(--lime-bright); background:rgba(255,255,255,.09); }
.nav .caret{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.8; }
.dropdown{ position:absolute; inset-inline-start:0; top:100%; min-width:250px; background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow); list-style:none; padding:.4rem; margin-top:.35rem;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast); }
.nav li:hover > .dropdown,.nav li:focus-within > .dropdown{ opacity:1; visibility:visible; transform:none; }
.dropdown a{ display:block; color:var(--body-c); font-size:.92rem; padding:.6rem .7rem; border-radius:var(--r-sm); }
.dropdown a:hover,.dropdown a:focus-visible{ background:var(--surface); color:var(--navy); }
.head-actions{ display:flex; align-items:center; gap:.6rem; flex:0 0 auto; }
.menu-btn{ display:none; background:none; border:0; color:var(--white); cursor:pointer; padding:.55rem; border-radius:var(--r-sm); }
.menu-btn:hover{ background:rgba(255,255,255,.1); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:var(--font-body); font-weight:700; font-size:1rem; line-height:1.1; text-decoration:none; padding:.95rem 1.6rem; min-height:48px; border:2px solid transparent; border-radius:var(--r-sm); cursor:pointer; transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast); }
.btn-primary{ background:var(--lime); color:var(--navy-900); border-color:var(--lime); }
.btn-primary:hover{ background:var(--lime-bright); border-color:var(--lime-bright); color:var(--navy-900); }
.btn-primary:active{ transform:translateY(1px); }
.btn-outline{ background:transparent; color:var(--white); border-color:var(--white); }
.btn-outline:hover{ background:var(--white); color:var(--navy); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn-ghost:hover{ background:var(--navy); color:var(--white); }
.btn-outline-dark{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.6); }
.btn-outline-dark:hover{ background:var(--lime); border-color:var(--lime); color:var(--navy-900); }
.btn-block{ width:100%; }

.mobile-nav{ display:none; background:var(--navy-700); border-top:1px solid rgba(255,255,255,.14); }
.mobile-nav[hidden]{ display:none; }
.mobile-nav ul{ list-style:none; padding:.4rem var(--edge) 1rem; }
.mobile-nav a{ display:block; color:var(--white); padding:.95rem 0; border-bottom:1px solid rgba(255,255,255,.14); font-weight:700; }
.mobile-nav a:hover{ color:var(--lime-bright); }
.mobile-nav .sub a{ padding-inline-start:1rem; font-weight:400; font-size:.95rem; color:var(--on-dark); }

/* ---------- sections ---------- */
.section{ padding-block:var(--sec); }
.section.tint{ background:var(--surface); }
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-heading); font-weight:700; font-size:.82rem; letter-spacing:.03em; color:var(--blue-ink); margin-bottom:1rem; text-transform:uppercase; }
.eyebrow::before{ content:""; width:26px; height:3px; background:var(--lime); border-radius:2px; }
.on-dark .eyebrow,.numbers .eyebrow{ color:var(--lime); }
h2.title{ font-size:clamp(1.75rem,4vw,2.7rem); font-weight:800; }
.lead{ margin-top:1rem; max-width:66ch; color:var(--body-c); }
.sec-head{ max-width:68ch; }

/* hero */
.hero{ position:relative; color:var(--white); }
.hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,47,67,.80),rgba(0,58,82,.66) 48%,rgba(0,47,67,.86)); }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-inner{ position:relative; min-height:clamp(32rem,86vh,46rem); display:flex; flex-direction:column; justify-content:center; padding-block:clamp(3rem,8vw,6rem); }
.hero h1{ color:var(--white); font-size:clamp(2.15rem,6vw,4.1rem); font-weight:800; line-height:1.12; max-width:19ch; }
.hero h1 .dot{ color:var(--lime); }
.hero .eyebrow{ color:var(--lime); }
.hero-lede{ margin-top:1.25rem; font-size:clamp(1.05rem,1.8vw,1.32rem); color:#EAF2F6; max-width:52ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.1rem; }

/* glance / numbers */
.numbers{ position:relative; background:var(--navy-900); color:var(--white); padding-block:var(--sec); }
.numbers::before{ content:""; position:absolute; inset:0; background:linear-gradient(rgba(0,47,67,.9),rgba(0,47,67,.93)),url('counts.jpg') center/cover; opacity:.9; }
.numbers .wrap{ position:relative; }
.numbers h2.title{ color:var(--white); }
.numbers .lead{ color:var(--on-dark); }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:2.6rem; }
.stat{ border-top:3px solid rgba(255,255,255,.22); padding-top:1.3rem; display:grid; gap:.5rem; }
.stat .num{ font-family:var(--font-heading); font-weight:800; font-size:clamp(2.4rem,4.5vw,3.4rem); color:var(--lime); line-height:1; white-space:nowrap; }
.stat .unit{ font-family:var(--font-heading); font-weight:700; font-size:1.05rem; color:var(--white); display:block; }
.stat p{ color:var(--on-dark); font-size:.95rem; }

/* why pillars */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2.6rem; }
.pillar{ background:var(--white); border:1px solid var(--border); border-top:3px solid var(--navy); border-radius:var(--r-md); padding:1.8rem 1.5rem 2rem; transition:transform var(--t-base),box-shadow var(--t-base),border-top-color var(--t-base); }
.pillar:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-top-color:var(--lime); }
.tile{ width:52px; height:52px; display:grid; place-items:center; background:var(--blue-soft); color:var(--navy); border-radius:var(--r-sm); margin-bottom:1.1rem; }
.tile svg{ width:26px; height:26px; }
.pillar h3{ font-size:1.18rem; }
.pillar p{ margin-top:.6rem; font-size:.96rem; }

/* about */
.about-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; margin-top:2.6rem; }
.about-media{ position:relative; }
.about-media img{ width:100%; height:auto; aspect-ratio:900/1261; object-fit:cover; object-position:center 18%; border-radius:var(--r-md); border:1px solid var(--border); }
.about-media .tag{ position:absolute; inset-block-end:14px; inset-inline-start:14px; background:var(--navy); color:var(--white); padding:.5rem 1rem; border-radius:var(--r-sm); font-family:var(--font-heading); font-weight:700; font-size:.85rem; }
.about-body p + p{ margin-top:1rem; }
.facts{ list-style:none; margin:1.5rem 0 0; display:grid; gap:.75rem; }
.facts li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--body-c); }
.facts svg{ flex:0 0 auto; margin-top:.4rem; color:var(--green); }
.quote{ margin-top:1.7rem; padding-inline-start:1.25rem; border-inline-start:4px solid var(--lime); }
.quote p{ font-family:var(--font-serif); font-size:1.4rem; color:var(--navy); line-height:1.6; }
.quote cite{ display:block; margin-top:.55rem; font-style:normal; font-family:var(--font-body); font-size:.9rem; color:var(--muted); }

/* vision */
.vision-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.vision-grid .vmedia img{ width:100%; height:auto; aspect-ratio:1200/868; object-fit:cover; border-radius:var(--r-md); border:1px solid var(--border); }
.vlist{ display:grid; gap:1.5rem; margin-top:1.7rem; }
.vitem{ display:grid; grid-template-columns:auto 1fr; gap:1rem; }
.vitem .tile{ margin:0; width:48px; height:48px; background:var(--navy); color:var(--lime); font-family:var(--font-heading); font-weight:800; }
.vitem h3{ font-size:1.2rem; margin-bottom:.35rem; }
.vitem p{ font-size:.98rem; }

/* departments */
.dept-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.6rem; }
.dept{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); padding:1.7rem 1.5rem 1.9rem; display:flex; flex-direction:column; transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base); }
.dept:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--blue); }
.dept .tile{ margin-bottom:1.1rem; background:var(--blue-soft); color:var(--navy); }
.dept .num-badge{ font-family:var(--font-heading); font-weight:800; font-size:.85rem; color:var(--blue-ink); letter-spacing:.08em; }
.dept h3{ font-size:1.16rem; line-height:1.35; margin-top:.35rem; }
.dept h3 a{ color:inherit; }
.dept h3 a:hover{ color:var(--blue-ink); }
.dept p{ margin-top:.7rem; font-size:.95rem; }
.dept a.more{ margin-top:1.1rem; font-weight:700; font-size:.9rem; color:var(--blue-ink); align-self:flex-start; }
.dept a.more:hover{ color:var(--navy); }

/* admissions cta */
.admissions{ position:relative; color:var(--white); padding-block:clamp(3.5rem,7vw,5.5rem); }
.admissions::before{ content:""; position:absolute; inset:0; background:linear-gradient(rgba(0,47,67,.82),rgba(0,47,67,.82)),url('cta-bg.jpg') center/cover; }
.admissions .wrap{ position:relative; display:grid; grid-template-columns:1.3fr auto; gap:2rem; align-items:center; }
.admissions h2{ color:var(--white); font-size:clamp(1.7rem,4vw,2.5rem); font-weight:800; }
.admissions p{ margin-top:.9rem; max-width:58ch; color:#EAF2F6; }
.admissions .btn{ margin-top:0; }

/* contact */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,3.5rem); margin-top:2.6rem; align-items:start; }
.info{ display:grid; gap:1.2rem; }
.info-item{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; }
.info-item .tile{ width:46px; height:46px; margin:0; background:var(--white); border:1px solid var(--border); color:var(--blue-ink); }
.info-item h4{ font-size:1rem; }
.info-item p{ margin-top:.2rem; }
.info-item a{ color:var(--body-c); overflow-wrap:anywhere; }
.info-item a:hover{ color:var(--blue-ink); }
.qr{ margin-top:1rem; display:flex; align-items:center; gap:1rem; background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); padding:1rem; }
.qr img{ width:104px; height:104px; border-radius:var(--r-sm); }
.qr p{ font-size:.88rem; color:var(--muted); max-width:22ch; }

.form{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); padding:clamp(1.4rem,3vw,2rem); display:grid; gap:1.05rem; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }
.field{ display:grid; gap:.4rem; }
.field label{ font-size:.87rem; font-weight:700; color:var(--ink); }
.field .req{ color:var(--danger); }
.field input,.field textarea{ font-family:var(--font-body); font-size:1rem; color:var(--ink); background:var(--white); border:1px solid var(--border); border-radius:var(--r-sm); padding:.8rem .9rem; width:100%; min-height:48px; transition:border-color var(--t-fast),box-shadow var(--t-fast); }
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{ border-color:var(--danger); box-shadow:0 0 0 3px rgba(192,57,43,.12); }
.err{ color:var(--danger); font-size:.83rem; }
.err:empty{ display:none; }
.form-status{ border:1px solid var(--border); border-inline-start:5px solid var(--ok); border-radius:var(--r-md); padding:1.3rem 1.4rem; background:var(--white); }
.form-status h3{ font-size:1.2rem; color:var(--ok); }
.form-status p{ margin-top:.45rem; color:var(--body-c); }

/* footer */
.site-footer{ background:var(--navy-900); color:var(--on-dark); padding-block:clamp(2.6rem,5vw,4rem) 1.5rem; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem; }
.foot-brand .brand-logo{ display:inline-grid; }
.foot-brand p{ margin-top:1rem; font-size:.92rem; color:var(--on-dark); }
.foot-col h4{ color:var(--white); font-size:1rem; margin-bottom:1rem; }
.foot-col a{ display:block; color:var(--on-dark); font-size:.92rem; padding:.3rem 0; }
.foot-col a:hover{ color:var(--lime-bright); }
.foot-contact div{ margin-bottom:.7rem; font-size:.92rem; }
.foot-contact span.lbl{ color:var(--lime); }
.foot-contact a{ color:var(--on-dark); overflow-wrap:anywhere; }
.foot-contact a:hover{ color:var(--lime-bright); }
.foot-bottom{ margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.16); display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; font-size:.83rem; color:#A9BAC6; }
.foot-bottom a{ color:var(--lime); }

.to-top{ position:fixed; inset-inline-end:16px; bottom:16px; z-index:150; width:48px; height:48px; display:grid; place-items:center; background:var(--navy); color:var(--lime); border:0; border-radius:var(--r-sm); cursor:pointer; opacity:0; visibility:hidden; box-shadow:var(--shadow); transition:opacity var(--t-base),visibility var(--t-base),background var(--t-fast); }
.to-top.show{ opacity:1; visibility:visible; }
.to-top:hover{ background:var(--navy-900); }

.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease; }
.js .reveal.is-in{ opacity:1; transform:none; }

@media (max-width:1080px){
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .dept-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:920px){
  .nav{ display:none; }
  .menu-btn{ display:inline-flex; }
  .head-inner{ justify-content:space-between; }
  .mobile-nav{ display:block; }
  .about-grid,.vision-grid,.contact-grid{ grid-template-columns:1fr; }
  .vision-grid .vmedia{ order:-1; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .admissions .wrap{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
}
@media (max-width:640px){
  body{ font-size:1rem; }
  .util{ display:none; }
  .topbar-inner{ justify-content:flex-end; }
  .head-actions .btn{ display:none; }
  .why-grid,.dept-grid,.stat-grid,.row2{ grid-template-columns:1fr; }
  .hero-inner{ min-height:auto; }
  .foot-top{ grid-template-columns:1fr; }
  .admissions .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}