/* =========================================================
   مجموعة مشاعل مسقط التعليمية — Mashaail Muscat Educational Group
   Single stylesheet serving both Arabic (RTL) and English (LTR)
   via CSS logical properties.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --ink:        #0E2B2A;
  --ink-soft:   #3C5A58;
  /* Darkened from #6B8280, which fell below AA (4.09:1 on white) for the
     secondary labels it colours: breadcrumbs, fact labels, captions. */
  --muted:      #556866;

  /* Palette sampled directly from the official logo (LOGO.jpg):
     the book is #205060, the flame is #F09010. */
  --brand:      #2E5A6B;
  --brand-700:  #254856;
  --brand-900:  #1B313C;
  --brand-100:  #E8EFF2;

  --flame:      #CF8A30;  /* logo flame, desaturated for large use */
  --flame-deep: #A25E07;  /* darkened until it clears AA on sand too */
  --gold:       var(--flame);
  --gold-soft:  #FBEEDA;

  /* The nursery sits in the same teal family as the schools, with its own
     shade so the three remain distinguishable. */
  --nursery:    #2C646D;
  --seeb:       #2E5A6B;
  --maabilah:   #3C7786;

  /* Backgrounds are tinted from the logo's teal (hue 197) rather than
     the warm cream used before, which sat against the brand rather than
     with it. */
  --sand:       #F5F8F9;
  --paper:      #FFFFFF;
  --line:       #DDE5E9;

  --radius:     8px;
  --radius-sm:  5px;
  --radius-lg:  10px;

  --shadow-sm:  0 1px 2px rgba(14, 44, 56, .04);
  --shadow:     0 2px 6px rgba(14, 44, 56, .07), 0 8px 20px rgba(14, 44, 56, .06);
  --shadow-lg:  0 6px 16px rgba(14, 44, 56, .09), 0 20px 44px rgba(14, 44, 56, .09);

  --wrap:       1180px;
  --gutter:     clamp(18px, 4vw, 40px);

  /* A single family across both languages. The fallbacks are the system
     faces that actually carry Arabic on each platform. */
  --ff: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, -apple-system, "Helvetica Neue", sans-serif;
}


/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--ff);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.8;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html[lang="en"] body { line-height: 1.65; }

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 { line-height: 1.35; font-weight: 800; color: var(--ink); }
html[lang="en"] h1, html[lang="en"] h2,
html[lang="en"] h3, html[lang="en"] h4 { line-height: 1.22; letter-spacing: -.01em; }

h1 { font-size: clamp(2rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { text-wrap: pretty; }

.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.narrow { max-width: 820px; }
.center { text-align: center; margin-inline: auto; }

.kicker {
  display: inline-block;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-100);
  padding: .4em 1em;
  border-radius: 3px;
  margin-bottom: 1rem;
}

.lead {
  font-size: clamp(1.02rem, 1.6vw, 1.16rem);
  color: var(--ink-soft);
}

.eyebrow {
  font-size: .95rem;
  font-weight: 700;
  color: var(--flame-deep);
  letter-spacing: .04em;
  margin-bottom: .5rem;
}

/* Decorative rule under section headings */
.rule {
  width: 46px; height: 3px;
  background: var(--flame);
  margin-block: 1rem 1.75rem;
}
.center .rule, .rule.is-center { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .82em 1.7em;
  /* the rounded shape the nursery used, now shared by every site */
  border-radius: 999px;
  font-weight: 700;
  font-size: .98rem;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-700); box-shadow: var(--shadow); }
.btn-gold { background: var(--gold); color: var(--brand-900); box-shadow: var(--shadow-sm); }
.btn-gold:hover { background: #ffa42b; }
.btn-ghost { border: 2px solid rgba(255,255,255,.55); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.btn-outline { border: 2px solid var(--brand); color: var(--brand); }
.btn-outline:hover { background: var(--brand); color: #fff; }

.btn .arrow { transition: transform .18s ease; }
html[dir="rtl"] .btn .arrow { transform: scaleX(-1); }
.btn:hover .arrow { transform: translateX(3px); }
html[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.header-inner {
  display: flex; align-items: center; gap: 1.2rem;
  min-height: 78px;
}

.brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.brand-mark { width: 44px; height: 44px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-weight: 800; font-size: 1.02rem; color: var(--brand-900); }
.brand-sub { font-size: .875rem; color: var(--muted); font-weight: 500; letter-spacing: .02em; }

.nav { margin-inline-start: auto; }
.nav ul { display: flex; align-items: center; gap: .2rem; }
.nav a {
  display: block; padding: .6em .85em;
  font-size: .95rem; font-weight: 600; color: var(--ink-soft);
  border-radius: 4px;
  transition: color .16s ease, background-color .16s ease;
}
.nav a:hover { color: var(--brand); background: var(--brand-100); }
.nav a.is-active { color: var(--brand); font-weight: 700; }

.header-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }


.burger {
  display: none; width: 46px; height: 46px;
  border-radius: 4px; border: 1.5px solid var(--line);
  align-items: center; justify-content: center;
}
.burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--ink); position: relative;
  transition: background-color .2s ease;
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; inset-inline-start: 0;
  width: 20px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .25s ease;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1180px) {
  .burger { display: inline-flex; }
  /* Anchored to the header itself, so it follows the compact-on-scroll
     height instead of assuming a fixed offset. */
  .nav {
    position: absolute; inset-block-start: 100%; inset-inline: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: .8rem var(--gutter) 1.4rem;
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    display: none;
  }
  .header-inner .nav::before { display: none; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { padding: .85em .6em; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav a.is-active::after { display: none; }
  .nav a.is-active { background: var(--brand-100); border-radius: 10px; }
  /* Keep the admissions CTA reachable on tablets; drop it only when the
     header genuinely runs out of room. */
  .header-actions .btn { padding: .62em 1.05em; font-size: .88rem; }
  .header-actions .btn .arrow { display: none; }
  .submenu::before { display: none; }
}
@media (max-width: 520px) {
  .header-actions .btn { display: none; }
  .brand-name { font-size: .95rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(200,162,74,.30), transparent 60%),
    linear-gradient(150deg, var(--brand-900) 0%, var(--brand) 58%, #12736A 100%);
  overflow: hidden;
  isolation: isolate;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.10' stroke-width='1.1'%3E%3Cpath d='M40 4 L76 40 L40 76 L4 40 Z'/%3E%3Cpath d='M40 20 L60 40 L40 60 L20 40 Z'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .55;
}
.hero-inner {
  padding-block: clamp(4.5rem, 11vw, 8.5rem);
  max-width: 800px;
}
.hero h1 { color: #fff; margin-bottom: 1.1rem; }
.hero .hero-sub {
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  color: rgba(255,255,255,.9);
  max-width: 62ch;
}
.hero .kicker { background: rgba(255,255,255,.16); color: #fff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }

.hero--page .hero-inner { padding-block: clamp(3.2rem, 7vw, 5.2rem); }
.hero--page h1 { font-size: clamp(1.8rem, 4.2vw, 2.9rem); }

.hero-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.hero-meta span {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 3px;
  padding: .42em 1em;
  font-size: .9rem; font-weight: 600;
}

/* Breadcrumb */
.crumb { font-size: .88rem; color: rgba(255,255,255,.75); margin-bottom: .9rem; }
.crumb a:hover { color: #fff; text-decoration: underline; }
.crumb .sep { margin-inline: .45em; opacity: .6; }

/* ---------- Stat strip ---------- */
.stats {
  background: var(--brand-900);
  color: #fff;
}
.stats ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 1px;
  background: rgba(255,255,255,.12);
}
.stats li {
  background: var(--brand-900);
  padding: 1.9rem 1rem;
  text-align: center;
}
.stats .num {
  display: block;
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  font-weight: 800; color: var(--gold);
  line-height: 1.2;
}
.stats .label { font-size: .92rem; color: rgba(255,255,255,.82); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(3rem, 5.5vw, 5rem); }
.section--sand { background: var(--sand); }
.section--brand { background: var(--brand-900); color: #fff; }
.section--brand h2, .section--brand h3 { color: #fff; }
.section--brand .lead { color: rgba(255,255,255,.82); }
.section--tight { padding-block: clamp(2.4rem, 5vw, 3.6rem); }

/* Where two bands share a background there is no colour change to justify a
   full section's padding on each side of the seam: the doubled space reads as
   a void inside one continuous band. One section's padding is enough. Bands
   of different tones keep both, because that space belongs to each band. */
.section:not(.section--sand):not(.section--brand) + .section:not(.section--sand):not(.section--brand),
.section--sand + .section--sand,
.section--brand + .section--brand { padding-block-start: 0; }

/* The banner already opens the page. A full section's worth of padding beneath
   it reads as a hole between the picture and the first line of text, so the
   opening section sits closer; every later section keeps the page rhythm. */
.hero + .section,
.hero + .section--sand,
.hero + .section--brand { padding-block-start: clamp(2rem, 3.5vw, 3rem); }

.section-head { max-width: 780px; margin-bottom: 2.6rem; }
.section-head.center { text-align: center; }
.section-head p + p { margin-top: .9rem; }

.prose p + p { margin-top: 1.05rem; }
.prose { color: var(--ink-soft); }

/* The page opens on three equal paragraphs with no heading above them, which
   reads as a wall. Lifting the first one gives the eye somewhere to land. */
.prose--intro > p:first-child {
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  line-height: 1.75;
  color: var(--brand-900);
  font-weight: 500;
}
.prose strong { color: var(--ink); }

/* ---------- Cards grid ---------- */
.grid { display: grid; gap: 1.4rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position: relative;
  overflow: hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-soft); font-size: .97rem; }

.card-icon {
  width: 52px; height: 52px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--brand-100); color: var(--brand);
  font-size: 1.5rem;
  margin-bottom: 1.1rem;
}
.section--brand .card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}
.section--brand .card p { color: rgba(255,255,255,.8); }
.section--brand .card-icon { background: rgba(200,162,74,.2); color: var(--gold); }

/* numbered cards */
.card--num .card-icon {
  background: var(--gold-soft); color: var(--brand-900);
  font-weight: 800; font-size: 1.15rem;
}

/* ---------- Check list ---------- */
.checks { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.checks li {
  display: flex; align-items: flex-start; gap: .8rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  font-size: .98rem;
  box-shadow: var(--shadow-sm);
}
.checks li::before {
  content: "✓";
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 3px;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-size: .875rem; font-weight: 700;
  margin-top: .25em;
}
.section--sand .checks li { background: var(--paper); }
.section--brand .checks li {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}
.section--brand .checks li::before { background: var(--gold); color: var(--brand-900); }

/* ---------- Bullet list ---------- */
.bullets { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.bullets li {
  position: relative;
  padding-inline-start: 1.6rem;
  color: var(--ink-soft);
  font-size: .98rem;
}
.bullets li::before {
  content: ""; position: absolute;
  inset-inline-start: 0; top: .78em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
}
.bullets--single { grid-template-columns: 1fr; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chips li {
  background: var(--brand-100);
  color: var(--brand-700);
  border-radius: 3px;
  padding: .48em 1.05em;
  font-size: .92rem;
  font-weight: 600;
}
.section--brand .chips li { background: rgba(255,255,255,.1); color: #fff; }

/* ---------- Journey timeline ---------- */
.journey { position: relative; display: grid; gap: 1.1rem; }
.journey::before {
  content: ""; position: absolute;
  inset-inline-start: 27px; top: 20px; bottom: 20px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold), var(--brand), var(--brand-900));
  opacity: .35;
}
.journey li {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.1rem;
  align-items: start;
}
.journey .dot {
  width: 56px; height: 56px; border-radius: 6px;
  background: var(--paper);
  border: 2px solid var(--line);
  display: grid; place-items: center;
  font-size: 1.4rem;
  box-shadow: var(--shadow-sm);
  z-index: 1;
}
.journey .body {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.05rem 1.3rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.journey li:hover .body { transform: translateY(-2px); box-shadow: var(--shadow); }
.journey .age {
  font-size: .875rem; font-weight: 700; color: var(--flame-deep);
  letter-spacing: .04em; display: block;
}
.journey h3 { font-size: 1.08rem; margin-bottom: .15rem; }
.journey p { color: var(--ink-soft); font-size: .95rem; }
.journey li:last-child .dot { background: var(--gold); border-color: var(--gold); }

/* ---------- Institution cards ---------- */
.campus-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.campus {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .24s ease, box-shadow .24s ease;
}
.campus:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.campus-top {
  padding: 2.1rem 1.7rem 1.6rem;
  color: #fff;
  background: linear-gradient(140deg, var(--accent, var(--brand)) 0%, color-mix(in srgb, var(--accent, var(--brand)) 70%, #000) 100%);
  position: relative;
  overflow: hidden;
}
.campus-top h3 { color: #fff; font-size: 1.22rem; position: relative; }
.campus-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; position: relative; }
.campus-meta span {
  background: rgba(255,255,255,.18);
  border-radius: 3px;
  padding: .32em .85em;
  font-size: .875rem; font-weight: 600;
}
.campus-body { padding: 1.5rem 1.7rem 1.8rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.campus-body p { color: var(--ink-soft); font-size: .97rem; }
.campus-body .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Split (text + aside list) ---------- */
.split { display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; align-items: start; } }
.split .aside {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
}
.section--sand .split .aside { background: var(--paper); }
.split .aside h3 { margin-bottom: 1.1rem; font-size: 1.12rem; }

/* ---------- Stage cards (curriculum) ---------- */
.stage {
  background: var(--paper);
  border: 1px solid var(--line);
  border-inline-start: 5px solid var(--accent, var(--brand));
  border-radius: var(--radius);
  padding: 1.9rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s ease, transform .22s ease;
}
.stage:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.stage-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem; margin-bottom: .5rem; }
.stage-head h3 { font-size: 1.3rem; }
.stage-grade {
  background: var(--accent, var(--brand));
  color: #fff;
  border-radius: 3px;
  padding: .3em .95em;
  font-size: .875rem;
  font-weight: 700;
}
.stage .prose { margin-bottom: 1.3rem; }
.stage-group + .stage-group { margin-top: 1.3rem; }
.stage-group > h4 {
  font-size: .93rem;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .03em;
  margin-bottom: .7rem;
}
.stages { display: grid; gap: 1.3rem; }

/* ---------- Stages accordion ----------
   The learning journey runs to six stages; showing them all at once buried the
   page. Each stage is a <details>, so a parent opens only the stage that
   concerns their child. Native <details> keeps this working with no JavaScript
   and keyboard-operable by default. */
.stage > summary.stage-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;          /* hide the default disclosure triangle */
  min-height: 44px;          /* comfortable tap target */
  border-radius: var(--radius-sm);
}
.stage > summary.stage-head::-webkit-details-marker { display: none; }
.stage > summary.stage-head:focus-visible {
  outline: 3px solid var(--flame-deep);
  outline-offset: 3px;
}
.stage > summary.stage-head h3 { font-size: 1.3rem; }
.stage > summary.stage-head:hover h3 { color: var(--brand); }

.stage-toggle {
  flex: none;
  margin-inline-start: auto;   /* sits at the trailing edge in both directions */
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--sand);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: transform .25s ease, background .2s ease, border-color .2s ease;
}
.stage-toggle::before {
  content: "";
  width: 8px; height: 8px;
  /* physical borders: a downward chevron reads the same in Arabic and English */
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg) translate(-1px, -1px);
}
.stage > summary.stage-head:hover .stage-toggle {
  background: var(--brand);
  border-color: var(--brand);
}
.stage > summary.stage-head:hover .stage-toggle::before {
  border-right-color: #fff;
  border-bottom-color: #fff;
}
.stage[open] .stage-toggle { transform: rotate(180deg); }

.stage-body { margin-top: 1.2rem; }
.stage[open] .stage-body { animation: stage-open .28s ease both; }
@keyframes stage-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* An expandable panel should not also lift on hover — the click already does
   something. Keep the shadow cue, drop the movement. */
.stage:hover { transform: none; }

/* ---------- Cambridge pathway ladder ----------
   Four stages read left to right (right to left in Arabic) as a progression,
   each carrying its own accent from the brand ramp and ending on the logo's
   flame for the advanced stage. Replaces a baked-in PNG, so it translates,
   reflows onto a phone, and is read out in order as an ordered list. */
.ladder {
  list-style: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  counter-reset: none;
}
.ladder-step {
  background: var(--paper);
  border: 1px solid var(--line);
  border-block-start: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.ladder-step:nth-child(1) { --accent: var(--maabilah); }
.ladder-step:nth-child(2) { --accent: var(--brand); }
.ladder-step:nth-child(3) { --accent: var(--brand-700); }
.ladder-step:nth-child(4) { --accent: var(--flame-deep); }

.ladder-head { display: flex; align-items: flex-start; gap: .75rem; }
.ladder-num {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.ladder-head h3 { font-size: 1.05rem; line-height: 1.35; color: var(--accent); }
.ladder-span {
  margin-top: .25rem;
  font-size: .875rem;
  color: var(--muted);
}
.ladder-lead { font-size: .875rem; color: var(--ink-soft); margin-bottom: -.35rem; }
.ladder-list { list-style: none; display: grid; gap: .5rem; }
.ladder-list li {
  position: relative;
  padding-inline-start: 1rem;
  font-size: .95rem;
  line-height: 1.55;
}
.ladder-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.ladder-band {
  margin-top: 1rem;
  background: var(--brand-900);
  color: #fff;
  border-radius: var(--radius);
  padding: .95rem 1.3rem;
  text-align: center;
  font-weight: 600;
  font-size: .98rem;
}
.ladder-motto {
  margin-top: 1.1rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  color: var(--brand);
  font-weight: 700;
  letter-spacing: .02em;
}
.ladder-motto span { position: relative; }
.ladder-motto span + span::before {
  content: "";
  position: absolute;
  inset-inline-start: -.85rem;
  top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--flame);
  transform: translateY(-50%);
}
.ladder-note {
  margin-top: .9rem;
  text-align: center;
  font-size: .875rem;
  color: var(--muted);
}

/* pathway callout */
.pathway { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.pathway .path-card {
  border: 2px solid var(--brand-100);
  border-radius: var(--radius-sm);
  padding: 1.3rem 1.5rem;
  background: var(--paper);
}
.pathway .path-card h4 { color: var(--brand); font-size: 1.05rem; margin-bottom: .35rem; }
.pathway .path-card p { color: var(--ink-soft); font-size: .95rem; }

/* ---------- Quote / statement ---------- */
.statement {
  background: linear-gradient(140deg, var(--brand-900), var(--brand));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.statement p {
  position: relative;
  font-size: clamp(1.2rem, 2.7vw, 1.75rem);
  font-weight: 700;
  max-width: 30ch;
  margin-inline: auto;
  line-height: 1.6;
}
.statement .attrib {
  position: relative;
  margin-top: 1.1rem;
  font-size: .95rem; font-weight: 600;
  color: rgba(255,255,255,.75);
}

/* ---------- Principal message ---------- */
.principal {
  display: grid; gap: 1.6rem;
  grid-template-columns: 1fr;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.7rem, 4vw, 2.8rem);
}
@media (min-width: 860px) { .principal { grid-template-columns: 220px 1fr; align-items: start; } }
.principal .avatar {
  width: 100%; max-width: 200px;
  aspect-ratio: 1;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--brand), var(--brand-900));
  display: grid; place-items: center;
  color: var(--gold);
  box-shadow: var(--shadow);
}
.principal .avatar svg { width: 46%; height: auto; }
.principal .sign {
  margin-top: 1.2rem;
  font-weight: 700;
  /* the deeper tone: --brand reached only 4.41:1 on the nursery's warm sand */
  color: var(--brand-700);
}
.principal blockquote p + p { margin-top: 1rem; }
.principal blockquote p { color: var(--ink-soft); }

/* ---------- Image figure ---------- */
figure.framed {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
figure.framed img { border-radius: var(--radius-sm); width: 100%; }
figure.framed figcaption {
  margin-top: .9rem;
  font-size: .9rem;
  color: var(--muted);
  text-align: center;
}
.scroll-x { overflow-x: auto; }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(700px 340px at 85% 0%, rgba(200,162,74,.28), transparent 62%),
    linear-gradient(140deg, var(--brand-900), var(--brand));
  color: #fff;
  text-align: center;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.cta-band h2 { color: #fff; margin-bottom: .8rem; }
.cta-band p { color: rgba(255,255,255,.86); max-width: 60ch; margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.contact-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow-sm);
  border-block-start: 4px solid var(--accent, var(--brand));
}
.contact-card h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.contact-card .place { color: var(--muted); font-size: .92rem; margin-bottom: 1.1rem; }
.contact-card dl { display: grid; gap: .75rem; }
.contact-card dt {
  font-size: .875rem; font-weight: 700; color: var(--muted);
  letter-spacing: .05em; text-transform: uppercase;
}
.contact-card dd { margin: 0; font-size: .97rem; }
.contact-card a { color: var(--brand); font-weight: 600; word-break: break-word; }
.contact-card a:hover { text-decoration: underline; }

.ig-link { display: inline-flex; align-items: center; gap: .5em; }
.ig-link svg { width: 18px; height: 18px; flex-shrink: 0; }

.note {
  background: var(--gold-soft);
  border: 1px solid #F3D4A6;
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.35rem;
  font-size: .95rem;
  color: #7A4A08;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--brand-900);
  color: rgba(255,255,255,.74);
  padding-block: clamp(2.8rem, 6vw, 4rem) 0;
  font-size: .95rem;
}
.footer-grid {
  display: grid; gap: 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding-bottom: 2.6rem;
}
.site-footer h4 {
  color: #fff; font-size: 1rem; margin-bottom: 1rem;
}
.site-footer .brand-name { color: #fff; }
.site-footer .brand-sub { color: rgba(255,255,255,.6); }
.site-footer ul { display: grid; gap: .6rem; }
.site-footer a:hover { color: var(--gold); }
.footer-about p { margin-top: 1rem; max-width: 40ch; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .8rem;
  align-items: center; justify-content: space-between;
  font-size: .88rem;
  color: rgba(255,255,255,.55);
}
.social { display: flex; gap: .6rem; }
.social a {
  width: 40px; height: 40px; border-radius: 4px;
  background: rgba(255,255,255,.09);
  display: grid; place-items: center;
  transition: background-color .18s ease, transform .18s ease;
}
.social a:hover { background: var(--gold); transform: translateY(-2px); }
.social a:hover svg { color: var(--brand-900); }
.social svg { width: 19px; height: 19px; color: #fff; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed;
  inset-block-end: 22px; inset-inline-end: 22px;
  width: 48px; height: 48px; border-radius: 4px;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 50;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brand-700); }

/* ---------- Scroll reveal ---------- */
/* Hidden only when JS is available (see the inline head script), so the
   page remains fully readable with scripting disabled. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  .stage[open] .stage-body { animation: none; }
  .stage-toggle { transition: none; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .to-top, .cta-band { display: none; }
  body { font-size: 12pt; }
  .section { padding-block: 1rem; }
}

/* ---------- Nav dropdown ---------- */
.nav .has-menu { position: relative; }
.menu-toggle {
  display: flex; align-items: center; gap: .35em;
  padding: .6em .85em;
  font-size: .95rem; font-weight: 600; color: var(--ink-soft);
  border-radius: 4px;
  transition: color .16s ease, background-color .16s ease;
}
.menu-toggle:hover { color: var(--brand); background: var(--brand-100); }
.menu-toggle.is-active { color: var(--brand); font-weight: 700; }
.menu-toggle .chev { font-size: .7em; transition: transform .2s ease; }
.menu-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.submenu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 0;
  min-width: 268px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: .5rem;
  display: grid; gap: .1rem;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 5;
}
.has-menu:hover .submenu,
.has-menu:focus-within .submenu,
.submenu.is-open {
  opacity: 1; visibility: visible; transform: none;
}
.submenu a {
  padding: .65em .8em;
  font-size: .93rem;
  border-radius: 8px;
  white-space: normal;
}
.submenu a[aria-current="page"] { color: var(--brand); background: var(--brand-100); font-weight: 700; }

@media (max-width: 1180px) {
  .menu-toggle {
    width: 100%; justify-content: space-between;
    padding: .85em .6em; border-bottom: 1px solid var(--line); border-radius: 0;
  }
  .submenu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: .2rem 0 .4rem;
    min-width: 0;
    display: none;
    background: var(--sand);
    border-radius: var(--radius-sm);
    margin-block: .4rem;
  }
  .has-menu:hover .submenu, .has-menu:focus-within .submenu { display: none; }
  .submenu.is-open { display: grid; }
  .submenu a { border-bottom: 0; padding-inline-start: 1.4em; }
}

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

/* ---------- Utility bar (contact strip above the header) ---------- */
.utility-bar {
  background: linear-gradient(90deg, var(--brand-900), var(--brand-700));
  color: rgba(255,255,255,.80);
  font-size: .875rem;
  border-block-end: 1px solid rgba(255,255,255,.08);
}
.utility-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem 1rem; min-height: 42px; flex-wrap: wrap;
}

.utility-contact { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.utility-contact a,
.utility-links a {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .34em .8em; border-radius: 3px;
  font-weight: 600;
  transition: background-color .16s ease, color .16s ease;
}
.utility-contact a:hover,
.utility-links a:hover { background: rgba(255,255,255,.13); color: #fff; }
.utility-contact svg, .utility-links svg { width: 15px; height: 15px; flex-shrink: 0; }
.utility-contact .u-call span,
.utility-contact .u-wa span { letter-spacing: .01em; }
.u-wa:hover { color: #7BE495 !important; }

.u-hours {
  padding-inline-start: .8em;
  margin-inline-start: .35em;
  border-inline-start: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.62);
  font-size: .875rem;
}

.utility-links { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.u-lang {
  border: 1px solid rgba(255,255,255,.28);
  margin-inline-start: .3rem;
}
.u-lang:hover { border-color: rgba(255,255,255,.6); }

@media (max-width: 900px) { .u-hours { display: none; } }
@media (max-width: 620px) {
  .utility-inner { justify-content: center; min-height: 0; padding-block: .35rem; }
  .utility-links a:not(.u-lang) { display: none; }
}

/* ---------- Logo chip ----------
   LOGO.jpg has a white ground, so it always sits on a white tile. */
.brand-mark {
  display: block; flex-shrink: 0;
  width: 54px; height: 54px;
  border-radius: 6px;
  background: #fff;
  padding: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(14,43,42,.08);
  transition: width .22s ease, height .22s ease, box-shadow .22s ease;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand:hover .brand-mark { box-shadow: 0 0 0 1px var(--brand-100), 0 6px 16px rgba(31,80,99,.22); }
.site-footer .brand-mark { box-shadow: 0 3px 14px rgba(0,0,0,.3); }

/* ---------- Header refinements ---------- */
.brand-name {
  font-size: 1.06rem;
  transition: font-size .22s ease;
}
.brand-sub {
  color: var(--brand);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .875rem;
}
html[lang="ar"] .brand-sub { letter-spacing: 0; text-transform: none; font-size: .875rem; }

/* Divider between the wordmark and the navigation */
.header-inner .nav::before {
  content: "";
  align-self: center;
  width: 1px; height: 26px;
  background: var(--line);
  margin-inline-end: .9rem;
}

/* Active item reads as a pill rather than an underline */
.nav a.is-active {
  background: var(--brand-100);
  color: var(--brand);
}
.nav a.is-active::after { display: none; }

/* Prominent admissions CTA in the flame accent */
.btn-flame {
  background: var(--flame); color: var(--brand-900);
  box-shadow: none;
  padding: .72em 1.4em; font-size: .94rem;
}
.btn-flame:hover { background: #d97f0a; box-shadow: none; }

/* Header compacts once the page is scrolled */
.site-header.is-stuck .header-inner { min-height: 64px; }
.site-header.is-stuck .brand-mark { width: 44px; height: 44px; }
.site-header.is-stuck .brand-name { font-size: .98rem; }
.site-header.is-stuck .brand-sub { display: none; }
.header-inner { transition: min-height .22s ease; }

/* Caret on the open dropdown */
.submenu::before {
  content: "";
  position: absolute;
  inset-block-start: -6px; inset-inline-start: 26px;
  width: 11px; height: 11px;
  background: var(--paper);
  border-inline-start: 1px solid var(--line);
  border-block-start: 1px solid var(--line);
  transform: rotate(45deg);
}

/* Footer institution list carries its own phone numbers */
.footer-inst li { display: grid; gap: .2rem; }
.footer-tel { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .88rem; }
.footer-tel .tel { color: rgba(255,255,255,.62); }
.footer-tel .tel:hover { color: var(--flame); }

/* Telephone / WhatsApp links */
.tel {
  direction: ltr; unicode-bidi: isolate;
  font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.contact-card .tel { color: var(--brand); }
.contact-card .tel:hover { text-decoration: underline; }
.tel--wa {
  display: inline-flex; align-items: center; gap: .45em;
  color: #11836C;
}
.tel--wa svg { width: 17px; height: 17px; flex-shrink: 0; }
.tel--wa:hover { color: #0C6151; }

/* ---------- Instagram feed ---------- */
.feed-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.feed-head h2 { margin: 0; }
.feed-head .rule { margin-block: .9rem 1rem; }
.feed-head .lead { max-width: 56ch; }

.handle {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .6em 1.15em; border-radius: 4px;
  background: var(--accent, var(--brand)); color: #fff;
  font-weight: 700; font-size: .93rem;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  white-space: nowrap;
}
.handle:hover { transform: translateY(-2px); box-shadow: var(--shadow); filter: brightness(1.08); }
.handle svg { width: 18px; height: 18px; }
.handle span { direction: ltr; unicode-bidi: isolate; }

.feed {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}
.feed-tile {
  display: block; width: 100%; padding: 0;
  position: relative; overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--sand);
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
  cursor: zoom-in;
}
.feed-tile img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.feed-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.feed-tile:hover img { transform: scale(1.06); }

/* Accent wash that lifts on hover — the "aesthetic touch" */
.feed-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--accent, var(--brand)) 78%, transparent));
  opacity: 0; transition: opacity .28s ease;
}
.feed-tile:hover::after, .feed-tile:focus-visible::after { opacity: 1; }

.feed-zoom {
  position: absolute; z-index: 1;
  inset-block-end: 10px; inset-inline-end: 10px;
  width: 32px; height: 32px; border-radius: 4px;
  background: rgba(255,255,255,.94); color: var(--accent, var(--brand));
  display: grid; place-items: center;
  opacity: 0; transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease;
}
.feed-tile:hover .feed-zoom, .feed-tile:focus-visible .feed-zoom { opacity: 1; transform: none; }
.feed-zoom svg { width: 16px; height: 16px; }

.feed-note {
  margin-top: 1.4rem;
  font-size: .88rem;
  color: var(--muted);
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: color-mix(in srgb, var(--brand-900) 92%, transparent);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: clamp(1rem, 5vw, 3rem);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(100%, 720px); max-height: 78vh;
  width: auto; border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.lightbox figcaption {
  margin-top: 1rem; text-align: center;
  color: rgba(255,255,255,.85); font-size: .92rem;
}
.lightbox-close {
  position: absolute; inset-block-start: 18px; inset-inline-end: 18px;
  width: 46px; height: 46px; border-radius: 4px;
  background: rgba(255,255,255,.14); color: #fff;
  display: grid; place-items: center; font-size: 1.4rem;
  transition: background-color .18s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,.28); }

/* ---------- Line icons ---------- */
.icon { width: 1.35em; height: 1.35em; flex-shrink: 0; }

.card-icon {
  width: 46px; height: 46px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--brand);
  border-inline-start: 3px solid var(--flame);
}
.card-icon .icon { width: 22px; height: 22px; }
.card--num .card-icon {
  background: transparent; color: var(--brand);
  font-weight: 800; font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.section--brand .card-icon { border-color: rgba(255,255,255,.2); color: #fff; }

.journey .dot { border-color: var(--line); color: var(--brand); }
.journey .dot .icon { width: 22px; height: 22px; }
.journey li:last-child .dot { background: var(--brand); border-color: var(--brand); color: #fff; }

.hero-meta span, .campus-meta span {
  display: inline-flex; align-items: center; gap: .5em;
}
.hero-meta .icon, .campus-meta .icon { width: 16px; height: 16px; opacity: .85; }

/* ---------- Per-institution facts panel ---------- */
.facts {
  border: 1px solid var(--line);
  border-block-start: 3px solid var(--accent, var(--brand));
  border-radius: var(--radius);
  background: var(--paper);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  box-shadow: var(--shadow-sm);
}
.facts-head { margin-bottom: 1.8rem; }
.facts-head h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); }
.facts-head .eyebrow { color: var(--accent, var(--brand)); }

.facts-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.fact { background: var(--paper); padding: 1.1rem 1.25rem; }
.fact dt {
  display: flex; align-items: center; gap: .5em;
  font-size: .875rem; font-weight: 700;
  color: var(--muted);
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: .45rem;
}
html[lang="ar"] .fact dt { text-transform: none; letter-spacing: .01em; font-size: .875rem; }
.fact dt .icon { width: 16px; height: 16px; color: var(--accent, var(--brand)); }
.fact dd { margin: 0; font-size: .98rem; font-weight: 600; color: var(--ink); }
.fact dd .ig-link { font-weight: 600; color: var(--accent, var(--brand)); }

.facts-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.facts-actions .btn-primary { background: var(--accent, var(--brand)); }
.facts-actions .btn-primary:hover { filter: brightness(.92); }
.facts-actions .btn-outline { border-color: var(--accent, var(--brand)); color: var(--accent, var(--brand)); }
.facts-actions .btn-outline:hover { background: var(--accent, var(--brand)); color: #fff; }

/* ---------- Utility bar: institution label ---------- */
.u-for {
  font-weight: 700;
  color: #fff;
  padding-inline-end: .7em;
  margin-inline-end: .2em;
  border-inline-end: 1px solid rgba(255,255,255,.2);
}
@media (max-width: 700px) { .u-for { display: none; } }

/* ---------- Restrained hero ---------- */
.hero {
  background:
    linear-gradient(155deg, var(--brand-900) 0%, var(--brand) 100%);
}
.hero::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1'%3E%3Cpath d='M32 0 L64 32 L32 64 L0 32 Z'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .8;
}
/* A single flame-coloured rule anchors the hero to the brand */
.hero-inner { position: relative; }
.hero h1 { position: relative; padding-block-start: 1.1rem; }
.hero h1::before {
  content: ""; position: absolute;
  inset-block-start: 0; inset-inline-start: 0;
  width: 52px; height: 3px; background: var(--flame);
}
.hero .kicker {
  background: transparent; border: 1px solid rgba(255,255,255,.3);
  letter-spacing: .16em;
}

/* Statement reads as a pull-quote, not a decorated panel */
.statement {
  background: var(--brand-900);
  border-inline-start: 3px solid var(--flame);
  border-radius: var(--radius);
  text-align: start;
}
.statement p { margin-inline: 0; max-width: 44ch; }

/* Campus cards: flat headers, accent as a rule */
.campus-top { background: var(--accent, var(--brand)); }
.campus { border-block-start: 3px solid var(--accent, var(--brand)); }

/* Feed tiles keep square corners in line with everything else */
.feed-tile, .feed-tile img { border-radius: var(--radius-sm); }

/* ---------- "Our Schools" photo cards (homepage) ---------- */
.school-grid {
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.school {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.school:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }

.school > a { display: flex; flex-direction: column; height: 100%; }

.school-media {
  position: relative; display: block;
  overflow: hidden;
  background: var(--brand-900);
  aspect-ratio: 4 / 3;
}
.school-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.school:hover .school-media img { transform: scale(1.05); }

/* Accent bar carrying the school name, as on the reference site */
.school-badge {
  position: absolute; z-index: 1;
  inset-block-end: 0; inset-inline-start: 0;
  background: var(--accent, var(--brand));
  color: #fff;
  font-weight: 700; font-size: .95rem;
  padding: .6em 1.4em;
  border-start-end-radius: var(--radius-sm);
}

.school-body {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.4rem 1.5rem 1.6rem;
  flex: 1;
}
.school-name {
  display: block;
  font-weight: 800; font-size: 1.06rem;
  color: var(--ink); line-height: 1.4;
}
.school-text {
  display: block;
  color: var(--ink-soft); font-size: .96rem;
}
.school-more {
  display: inline-flex; align-items: center; gap: .45em;
  margin-top: auto; padding-top: .5rem;
  color: var(--accent, var(--brand));
  font-weight: 700; font-size: .93rem;
}
.school:hover .school-more .arrow { transform: translateX(3px); }
html[dir="rtl"] .school-more .arrow { transform: scaleX(-1); }
html[dir="rtl"] .school:hover .school-more .arrow { transform: scaleX(-1) translateX(3px); }
.school-more .arrow { transition: transform .18s ease; }

/* ============================================================
   Header rework
   - utility strip trimmed to contact + language
   - logo sits directly on the white bar (LOGO.jpg's ground is
     pure white, so no container is needed there)
   - tighter heights and roomier navigation spacing
   ============================================================ */

/* ---- Utility strip ---- */
.utility-bar { font-size: .875rem; }
.utility-inner { min-height: 36px; gap: .5rem 1rem; }
.utility-contact { gap: .15rem; }
.utility-contact a { padding: .3em .7em; }

.u-for {
  font-weight: 700; color: #fff;
  padding-inline-end: .65em; margin-inline-end: .1em;
  border-inline-end: 1px solid rgba(255,255,255,.22);
}
.u-lang {
  display: inline-flex; align-items: center;
  padding: .28em .85em; border-radius: 3px;
  border: 1px solid rgba(255,255,255,.3);
  font-weight: 700;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.u-lang:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.65); color: #fff; }

@media (max-width: 620px) {
  .utility-inner { justify-content: space-between; padding-block: .3rem; }
  .u-for { display: none; }
}

/* ---- Logo ---- */
.brand-mark {
  display: block; flex-shrink: 0;
  width: 60px; height: 60px;
  background: none; border: 0; padding: 0;
  border-radius: 0; box-shadow: none;
  transition: width .22s ease, height .22s ease;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand:hover .brand-mark { box-shadow: none; }

/* Against the dark footer the white ground needs a tile of its own. */
.site-footer .brand-mark {
  width: 54px; height: 54px;
  background: #fff; padding: 5px;
  border-radius: 6px;
  box-shadow: 0 3px 14px rgba(0,0,0,.28);
}

/* ---- Header proportions ---- */
.header-inner { min-height: 72px; gap: 1rem; }
.brand { gap: .8rem; }
.brand-name { font-size: 1.1rem; letter-spacing: -.005em; }
.brand-sub { font-size: .875rem; }

.site-header.is-stuck .header-inner { min-height: 58px; }
.site-header.is-stuck .brand-mark { width: 46px; height: 46px; }

/* ---- Navigation spacing ---- */
.nav ul { gap: .1rem; }
.nav a, .menu-toggle { padding: .55em .78em; font-size: .94rem; }
.header-inner .nav::before { height: 24px; margin-inline-end: .7rem; }
.header-actions { gap: .5rem; }
.btn-flame { padding: .66em 1.25em; font-size: .92rem; }

@media (max-width: 1180px) {
  .nav a, .menu-toggle { padding: .8em .6em; font-size: .97rem; }
}

/* The bar must be fully opaque: LOGO.jpg carries a pure-white ground and
   sits on it directly, so any translucency would tint the bar while the
   logo stayed white and read as a pasted-on rectangle. */
.site-header {
  background: var(--paper);
  backdrop-filter: none;
}

/* The nav must be a flex row on desktop, otherwise its ::before divider
   stacks above the list instead of sitting beside it — which inflates the
   nav to ~76px and stops the header compacting on scroll.
   Scoped to desktop so the mobile drawer's display rules still win. */
@media (min-width: 1181px) {
  .nav { display: flex; align-items: center; }
}

/* ---------- "Our Schools" cards: tidier ----------
   The three source images differ in shape (one portrait, two square) and
   all carry logos or captions outside the area that actually matters.
   A 3:2 band plus a per-card focal point crops each to its people, so the
   row reads as one consistent set instead of three unrelated crops. */
.school-media { aspect-ratio: 3 / 2; }
.school-media img { object-position: center var(--focus, 50%); }

/* Names sit on a fixed two-line block so every badge, line of body text
   and "read more" link lands on the same baseline across the row. */
.school-name { min-height: 2.8em; display: flex; align-items: center; }
.school-text { min-height: 3.4em; }
.school-body { padding: 1.3rem 1.4rem 1.5rem; gap: .4rem; }

/* Badge reads as a label on the image rather than a floating chip */
.school-badge {
  font-size: .88rem;
  padding: .5em 1.2em;
  letter-spacing: .01em;
}

@media (max-width: 560px) {
  .school-name, .school-text { min-height: 0; }
  .school-name { display: block; }
}

/* ---------- Dropdown: force a vertical stack ----------
   `.nav ul` (0,1,1) sets display:flex for the top-level bar and outranks
   a bare `.submenu` (0,1,0), so the dropdown inherited the horizontal row
   and squeezed its links into 74-88px columns wrapping over six lines.
   Qualifying the selector puts the specificity back where it belongs. */
.nav ul.submenu {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: .1rem;
  /* Labels are short now, so the menu no longer needs to be oversized. */
  min-width: 240px;
}
.nav ul.submenu > li { width: 100%; }
.nav ul.submenu a {
  display: block;
  width: 100%;
  white-space: normal;
  text-align: start;
  line-height: 1.5;
}

@media (max-width: 1180px) {
  /* Same specificity fight inside the mobile drawer. */
  .nav ul.submenu { display: none; min-width: 0; }
  .nav ul.submenu.is-open { display: grid; }
}

/* ============================================================
   School sites — each institution carries its own header
   ============================================================ */

/* The strip on a school site links back to the parent group. */
.utility-bar--school { background: var(--brand-900); }
.u-parent {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .3em .7em; border-radius: 3px;
  font-weight: 600; color: rgba(255,255,255,.82);
  transition: background-color .16s ease, color .16s ease;
}
.u-parent:hover { background: rgba(255,255,255,.13); color: #fff; }
.u-arrow { font-size: 1.05em; line-height: 1; }
html[dir="ltr"] .u-arrow { transform: scaleX(-1); }

/* A colour bar under the header is what tells a parent, at a glance,
   which of the three sites they are on. */
.site-header--school { border-block-start: 3px solid var(--accent); }
.site-header--school .brand-sub {
  color: var(--accent);
  font-weight: 700;
}
/* The accent at full strength on its own 10-12% tint only reached ~3.6:1,
   so the text is darkened while the tint stays light. */
.site-header--school .nav a:hover,
.site-header--school .menu-toggle:hover {
  color: color-mix(in srgb, var(--accent) 70%, #12222A);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.site-header--school .nav a.is-active {
  color: color-mix(in srgb, var(--accent) 70%, #12222A);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.site-header--school .btn-flame {
  background: var(--accent);
  color: #fff;
}
.site-header--school .btn-flame:hover { filter: brightness(1.1); background: var(--accent); }

/* The nursery accent is now dark enough to carry white text (4.69:1);
   the earlier dark-on-amber pairing fell to 2.89:1. */

@media (max-width: 620px) {
  .u-parent { font-size: .875rem; padding-inline: .4em; }
}


/* ============================================================
   Nursery theme — scoped to [data-site="nursery"] only.

   Warm and friendly for a nursery audience, but deliberately
   LOW-CHROMA: the earlier version ran 72-90% saturation across a
   full-width hero, which is what makes a page tiring to look at.
   Here the large surfaces are pale washes and the colour lives in
   small, muted accents. Every pair below is >= 4.5:1.
   ============================================================ */

[data-site="nursery"] {
  /* Colours are inherited from the site palette: the nursery differs by
     shape, not by hue. */
  --brand:      #2C646D;
  --brand-700:  #234F57;

  --radius:     20px;      /* rounding, not colour, carries the friendliness */
  --radius-sm:  14px;
  --radius-lg:  26px;

  /* Muted play palette: pale tints for fills, deep tones for marks */
  --rose-bg:  #F2DEE4;  --rose-fg:  #A43D58;
  --sage-bg:  #DEF2ED;  --sage-fg:  #2B7362;
  --denim-bg: #DEE8F2;  --denim-fg: #386999;
  --ochre-bg: #F2EADE;  --ochre-fg: #826130;
}

/* ---- Rounded, friendly components ---- */
[data-site="nursery"] .chips li,
[data-site="nursery"] .kicker,
[data-site="nursery"] .hero-meta span,
[data-site="nursery"] .u-lang,
[data-site="nursery"] .handle { border-radius: 999px; }

[data-site="nursery"] .card-icon,
[data-site="nursery"] .journey .dot,
[data-site="nursery"] .to-top,
[data-site="nursery"] .social a,
[data-site="nursery"] .checks li::before { border-radius: 50%; }

/* ---- A light hero: soft wash with dark text ----
   A pale ground read at 13:1 is far easier on the eye than a
   saturated field with white text over it. */
/* The ghost button was styled for a dark ground */

/* ---- Section rule becomes a soft row of dots ---- */
[data-site="nursery"] .rule {
  width: 54px; height: 8px;
  background: radial-gradient(circle, var(--brand) 40%, transparent 42%);
  background-size: 18px 8px;
  background-repeat: repeat-x;
  opacity: .75;
}

/* ---- Card icons: pale tint, deep mark ---- */
[data-site="nursery"] .card-icon { width: 56px; height: 56px; border: 0; }
[data-site="nursery"] .card-icon .icon { width: 26px; height: 26px; }
[data-site="nursery"] .grid > .card:nth-child(4n+1) .card-icon { background: var(--rose-bg);  color: var(--rose-fg); }
[data-site="nursery"] .grid > .card:nth-child(4n+2) .card-icon { background: var(--sage-bg);  color: var(--sage-fg); }
[data-site="nursery"] .grid > .card:nth-child(4n+3) .card-icon { background: var(--denim-bg); color: var(--denim-fg); }
[data-site="nursery"] .grid > .card:nth-child(4n+4) .card-icon { background: var(--ochre-bg); color: var(--ochre-fg); }

/* ---- Chips in the same muted tints ---- */
[data-site="nursery"] .chips li:nth-child(4n+1) { background: var(--rose-bg);  color: var(--rose-fg); }
[data-site="nursery"] .chips li:nth-child(4n+2) { background: var(--sage-bg);  color: var(--sage-fg); }
[data-site="nursery"] .chips li:nth-child(4n+3) { background: var(--denim-bg); color: var(--denim-fg); }
[data-site="nursery"] .chips li:nth-child(4n+4) { background: var(--ochre-bg); color: var(--ochre-fg); }

[data-site="nursery"] .checks li::before { background: var(--brand); }

/* ---- Statement: warm but muted ---- */
[data-site="nursery"] .statement {
  background: linear-gradient(135deg, #234F57, #2C646D);
  border-inline-start: 0;
  text-align: center;
}
[data-site="nursery"] .statement p { margin-inline: auto; }

/* ---- A gentle lift on hover ---- */
[data-site="nursery"] .card:hover,
[data-site="nursery"] .feed-tile:hover {
  transform: translateY(-5px);
  transition-timing-function: cubic-bezier(.34, 1.4, .64, 1);
}

[data-site="nursery"] .facts { border-block-start-width: 4px; }
[data-site="nursery"] .site-footer a:hover,
[data-site="nursery"] .footer-tel .tel:hover { color: #7FB8C2; }

@media (prefers-reduced-motion: reduce) {
  [data-site="nursery"] .card:hover,
  [data-site="nursery"] .feed-tile:hover { transform: none; }
}

/* ============================================================
   Photographic banners
   Each site's landing page carries a photo from that institution's
   own Instagram, behind a tinted scrim. The scrim is what makes the
   headline readable regardless of what the photo contains, so its
   opacity never drops below the level needed for white text.
   ============================================================ */
.hero--photo { position: relative; isolation: isolate; }

.hero-bg {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
}

/* Default scrim: the brand's deep tone. Sites override --scrim. */
.hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(150deg,
    rgba(var(--scrim, 27, 49, 60), .93) 0%,
    rgba(var(--scrim, 27, 49, 60), .80) 55%,
    rgba(var(--scrim, 27, 49, 60), .72) 100%);
}
.hero--photo::after { z-index: -1; opacity: .35; }

[data-site="seeb"]     .hero--photo { --scrim: 27, 49, 60; }
[data-site="maabilah"] .hero--photo { --scrim: 24, 52, 60; }
/* A warm brown keeps the nursery's banner friendly rather than cold. */
[data-site="nursery"]  .hero--photo { --scrim: 27, 49, 60; }

[data-site="nursery"] .hero h1::before { display: none; }
[data-site="nursery"] .hero h1 { padding-block-start: 0; }

/* ---------- Footer maps ---------- */
.footer-maps {
  background: var(--sand);
  border-block-start: 1px solid var(--line);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.maps-heading {
  font-size: 1rem;
  margin-bottom: 1.2rem;
  color: var(--ink);
}

.map-grid { display: grid; gap: 1.2rem; }
.map-grid--multi { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.map-card {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-block-start: 3px solid var(--accent, var(--brand));
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.map-card iframe {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
  /* the embed paints its own light ground while it loads */
  background: #E8E4DD;
}
.map-grid--multi .map-card iframe { height: 200px; }

.map-card figcaption {
  display: grid; gap: .3rem;
  padding: 1rem 1.2rem 1.2rem;
}
.map-name { font-weight: 800; color: var(--ink); }
.map-place { font-size: .92rem; color: var(--ink-soft); }
.map-dir {
  justify-self: start;
  margin-top: .45rem;
  display: inline-flex; align-items: center; gap: .4em;
  padding: .5em 1.1em;
  border-radius: 999px;
  border: 1.5px solid var(--accent, var(--brand));
  color: var(--accent, var(--brand));
  font-weight: 700; font-size: .9rem;
  transition: background-color .16s ease, color .16s ease;
}
.map-dir:hover { background: var(--accent, var(--brand)); color: #fff; }


@media (max-width: 560px) {
  .map-card iframe, .map-grid--multi .map-card iframe { height: 200px; }
}

/* ============================================================
   Small screens
   Arabic needs more size than Latin to stay legible: its dots and
   fine strokes disappear first. Anything that sat below ~14px is
   lifted on phones, and the body text grows slightly.
   ============================================================ */
@media (max-width: 620px) {
  body { font-size: 16.5px; line-height: 1.85; }

  /* labels and micro-type — the worst offenders at 11-14px */
  .brand-sub,
  html[lang="ar"] .brand-sub { font-size: .875rem; }
  .fact dt,
  html[lang="ar"] .fact dt,
  .contact-card dt { font-size: .88rem; letter-spacing: 0; }
  .kicker { font-size: .875rem; letter-spacing: .06em; }
  .journey .age { font-size: .88rem; }
  .utility-bar { font-size: .88rem; }
  .crumb,
  .footer-bottom,
  .footer-tel,
  .feed-note { font-size: .92rem; }
  .campus-meta span,
  .stage-grade,
  .school-badge,
  .hero-meta span { font-size: .9rem; }

  /* headings tighten up rather than wrap awkwardly in a narrow column */
  h1 { line-height: 1.3; }
  h2, h3 { line-height: 1.4; }

  /* Arabic numerals and Latin fragments inside Arabic keep their rhythm */
  .tel { font-size: 1rem; }
}

/* Very narrow phones */
@media (max-width: 380px) {
  body { font-size: 16px; }
  .wrap { --gutter: 16px; }
}

/* The back-to-group link carries the full group name on wide screens and a
   short one on phones, so it never has to shrink below a readable size. */
.u-parent-short { display: none; }
@media (max-width: 620px) {
  .u-parent { font-size: .875rem; padding-inline: .5em; }
  .u-parent-full { display: none; }
  .u-parent-short { display: inline; }
}

/* On a phone the brand must be allowed to give way. Both .brand and
   .header-actions were flex-shrink:0, so a long school name (the English
   "Mashaail Muscat Private School") pushed the menu button off-screen. */
@media (max-width: 620px) {
  .brand { flex-shrink: 1; min-width: 0; }
  .brand-text { min-width: 0; }
  .brand-name {
    font-size: .95rem;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .header-inner { gap: .7rem; }
}
@media (max-width: 400px) {
  .brand-mark { width: 46px; height: 46px; }
  .brand-name { font-size: .9rem; }
}

/* ---------- Milestones (the group's openings) ---------- */
.milestones { display: grid; gap: 1.1rem; }
@media (min-width: 820px) {
  .milestones { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
}

.milestones li {
  display: grid;
  gap: .7rem;
  padding: 1.5rem 1.6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-block-start: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.milestones li:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.ms-year {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.ms-line {
  display: block;
  width: 34px; height: 3px;
  background: var(--accent);
  opacity: .35;
}
.ms-body { display: grid; gap: .25rem; }
.ms-name { font-weight: 700; color: var(--ink); line-height: 1.45; }
.ms-note { font-size: .93rem; color: var(--ink-soft); }

/* Prose on the dark band: .prose sets its own dark colour, which would
   otherwise land dark-on-dark (measured 1.8:1) inside .section--brand. */
.section--brand .prose,
.section--brand .prose p { color: rgba(255, 255, 255, .86); }
.section--brand .prose strong { color: #fff; }
.section--brand .rule { background: var(--flame); }

/* ---------- Touch targets ----------
   Inline links inside contact rows, footer lists and breadcrumbs rendered
   at 22-23px tall — under the 24px WCAG 2.5.8 minimum. On touch widths they
   get enough vertical room to be tapped reliably. */
@media (max-width: 820px) {
  .contact-card dd a,
  .fact dd a,
  .site-footer li a,
  .footer-tel a,
  .crumb a,
  .social-more li a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
  }
  /* keep the lists from growing gappy now that each row is taller */
  .site-footer ul { gap: .35rem; }
  .contact-card dl, .facts-grid { row-gap: .1rem; }
}

/* ---------- Social buttons: each hovers to its own brand colour ----------
   The icon colour is chosen per platform so it clears 3:1 against that
   background (WhatsApp green is too light for a white mark). */
.social a { transition: background-color .18s ease, transform .18s ease; }
.social a:hover svg { color: #fff; }

.social a.s-ig:hover { background: #E1306C; }
.social a.s-fb:hover { background: #1877F2; }
.social a.s-x:hover  { background: #000000; }
.social a.s-yt:hover { background: #FF0000; }
.social a.s-li:hover { background: #0A66C2; }
.social a.s-tt:hover { background: #000000; }

/* WhatsApp: white on its green reads at 2.0:1, so the mark goes dark */
.u-wa:hover { color: #25D366 !important; }
.tel--wa:hover { color: #128C7E; }

/* ============================================================
   Small screens keep what large screens show
   The phone layout previously dropped the admissions button and the
   institution label. Both are back: the button takes a shorter label
   and the strip wraps onto a second line instead of hiding items.
   ============================================================ */
.cta-short { display: none; }

@media (max-width: 620px) {
  /* the strip wraps rather than dropping its contents */
  .utility-inner { flex-wrap: wrap; justify-content: space-between; row-gap: .15rem; }
  .u-for { display: inline-flex; align-items: center; }
  .utility-contact { flex: 1 1 100%; justify-content: flex-start; order: 2; }
  .u-lang { order: 1; }

  /* the admissions button stays, with a shorter word */
  .header-actions .btn { display: inline-flex; padding: .58em .95em; font-size: .875rem; }
  .cta-full { display: none; }
  .cta-short { display: inline; }
  .header-actions .btn .arrow { display: none; }
}

@media (max-width: 400px) {
  .header-actions { gap: .35rem; }
  .header-actions .btn { padding: .55em .8em; }
  .brand { gap: .55rem; }
}

/* On the narrowest phones the strip was wrapping to three rows. The
   WhatsApp label collapses to its icon (the link keeps an accessible
   name) so contact and language fit on two. */
@media (max-width: 400px) {
  .u-wa span:not(.sr) { display: none; }
  .utility-contact a { padding-inline: .5em; }
  .u-for { padding-inline-end: .5em; }
  .utility-inner { row-gap: 0; }
}

/* Tightening the strip dropped these to 23px tall; hold them at the
   24px minimum without adding another row. */
@media (max-width: 820px) {
  .utility-contact a,
  .utility-links a,
  .u-lang { min-height: 26px; }
}

/* ============================================================
   Phone header
   - the admissions button is dropped (it duplicates the strip's
     contact actions on a screen with no room to spare)
   - the language switch moves into the drawer
   - the menu button sits hard against the far edge, opposite the logo
   ============================================================ */
.nav-lang { display: none; }

@media (max-width: 1180px) {
  /* the drawer is out of flow, so the actions need their own push to the end */
  .header-actions { margin-inline-start: auto; }
}

@media (max-width: 620px) {
  /* no admissions button on phones */
  .header-actions .btn { display: none; }

  /* the language switch belongs to the drawer here, not the strip.
     Qualified so it outranks the base .u-lang display rule. */
  .utility-inner .u-lang { display: none; }
  .nav-lang { display: block; }
  .nav-lang a {
    margin-top: .5rem;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    text-align: center;
    font-weight: 700;
    color: var(--brand);
  }
  .nav-lang a:hover { background: var(--brand-100); }

  /* the strip now carries only contact details, so it fits one row again */
  .utility-contact { flex: 1 1 auto; order: 0; }
  .utility-inner { justify-content: space-between; }

  /* menu button hard against the end edge — left in Arabic, right in English */
  .header-actions { margin-inline-start: auto; margin-inline-end: 0; }
  .burger { margin-inline-end: 0; }
}
.footer-bottom-tools { display: flex; flex-direction: row; direction: ltr; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer-bottom-tools .social { margin: 0; }
.visitor-counter { display: flex; align-items: center; justify-content: flex-start; gap: .6rem; margin: 0; }
html[dir="rtl"] .visitor-counter { direction: rtl; }
.footer-bottom { flex-direction: row-reverse; }
html[dir="rtl"] .footer-bottom { flex-direction: row; }
.visitor-counter strong { font-variant-numeric: tabular-nums; min-width: 2ch; }
.visitor-counter-icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }