/* ==================================================================
   UMUL MADARIS MODEL SCHOOL — STYLESHEET
   ------------------------------------------------------------------
   This file controls how the website LOOKS.
   You normally do not need to edit it. If you only want to change
   the school colours, edit the few lines under "BRAND COLOURS" below.
   ================================================================== */

/* ------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------ */
:root {
  /* ==================================================================
     BRAND COLOURS — THIS IS THE ONLY BLOCK YOU NEED TO EDIT
     ------------------------------------------------------------------
     --brand-900 is the darkest, --brand-50 the palest. Keep them in
     that order (dark to light) and the whole site restyles itself.
     Alternative palettes are listed at the bottom of this file.
     ================================================================== */
  --brand-900: #0a1b33;   /* darkest — headings, footer          */
  --brand-800: #10294c;   /* dark    — button hover, hero        */
  --brand-700: #17396a;   /* PRIMARY — buttons, links, icons     */
  --brand-600: #1d4a86;   /* mid     — focus rings, accents      */
  --brand-500: #2a63aa;   /* bright  — small highlights          */
  --brand-100: #d5e3f5;   /* pale    — borders, chips            */
  --brand-50:  #eef4fc;   /* palest  — tinted section background */

  /* gold-700 is the TEXT gold. Darkened from #9a6516 so 14px text
     clears WCAG AA (4.5:1) on white AND on the tinted section
     background: 5.23:1 and 4.73:1. gold-500/600 stay as they were —
     they are background colours and carry dark navy text. */
  --gold-700: #946213;
  --gold-600: #b87d22;
  --gold-500: #d09a3c;
  --gold-300: #e8c48a;
  --gold-100: #f7ead3;

  --clay-600: #a8543a;
  --clay-100: #f6e5df;

  --cream:  #fbf8f3;
  --paper:  #ffffff;
  --sand:   #efe8dc;
  --sand-2: #e3d9c8;

  /* Neutral greys, very slightly tinted towards the brand colour so
     body text sits with the palette instead of fighting it. */
  --ink:      #161f2e;
  --ink-soft: #414c5e;
  /* darkened from #6c788c, which landed at 4.47:1 on white — just under
     the 4.5:1 minimum. Now 4.99:1 on white and 4.51:1 on the tint. */
  --ink-mute: #667082;

  /* ---- SEMANTIC ---- */
  --bg: var(--cream);
  --surface: var(--paper);
  --border: var(--sand);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-mute: var(--ink-mute);
  --accent: var(--brand-700);
  --accent-hover: var(--brand-800);
  --highlight: var(--gold-600);

  /* ---- TYPE ---- */
  --font-display: "Literata", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.16rem, 1.09rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.4rem, 1.27rem + 0.62vw, 1.75rem);
  --step-3:  clamp(1.7rem, 1.47rem + 1.1vw, 2.35rem);
  --step-4:  clamp(2.05rem, 1.66rem + 1.9vw, 3.1rem);
  --step-5:  clamp(2.45rem, 1.8rem + 3.1vw, 4.1rem);

  /* ---- SPACE ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --maxw: 1200px;
  --maxw-text: 68ch;

  /* ---- RADII / SHADOW ---- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-full: 999px;
  --shadow-1: 0 1px 2px rgba(22,34,30,.05), 0 2px 6px rgba(22,34,30,.04);
  --shadow-2: 0 2px 4px rgba(22,34,30,.05), 0 8px 22px rgba(22,34,30,.07);
  --shadow-3: 0 10px 24px rgba(22,34,30,.09), 0 26px 60px rgba(22,34,30,.11);
  --ring: 0 0 0 3px var(--brand-100), 0 0 0 5px var(--brand-600);

  /* ---- MOTION ----
     Strong custom curves. The browser's built-in easings are too weak
     and make interfaces feel sluggish. Never use ease-in on UI.       */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --dur-press: 140ms;   /* button feedback   */
  --dur-tip: 160ms;     /* tooltips          */
  --dur-pop: 200ms;     /* dropdowns/popovers*/
  --dur-panel: 280ms;   /* drawers/modals    */
  --dur-reveal: 460ms;  /* scroll reveals    */

  --header-h: 72px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

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

::selection { background: var(--gold-300); color: var(--brand-900); }

/* ------------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  /* Literata is a more open face than a tight display serif, so it wants
     less negative tracking — too much and the letters start colliding. */
  letter-spacing: -0.015em;
  /* Literata carries an optical size axis: large headings automatically
     use the display cut, small text the reading cut. */
  font-optical-sizing: auto;
  color: var(--brand-900);
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); letter-spacing: -0.01em; }

/* Headings inside cards, steps and list items. They are h2/h3 so the
   page outline is correct, but they read at card size, not section size. */
.card-title { font-size: var(--step-1); letter-spacing: -0.01em; line-height: 1.25; }
html[lang="ur"] .card-title { font-size: calc(var(--step-1) * 0.92); line-height: 1.9; }

p { text-wrap: pretty; }
strong { font-weight: 600; color: var(--brand-900); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--gold-500);
  border-radius: 2px;
}

.lead {
  font-size: var(--step-1);
  color: var(--text-soft);
  line-height: 1.6;
  max-width: var(--maxw-text);
}

.muted { color: var(--text-mute); }
.center { text-align: center; }
.measure { max-width: var(--maxw-text); }
.center .lead, .center .measure { margin-inline: auto; }

/* ------------------------------------------------------------------
   4. URDU / RTL
   ------------------------------------------------------------------ */
html[lang="ur"] body,
html[lang="ur"] h1, html[lang="ur"] h2,
html[lang="ur"] h3, html[lang="ur"] h4 {
  font-family: var(--font-urdu);
}
html[lang="ur"] body {
  line-height: 2.35;           /* Nastaliq needs generous leading */
  font-size: calc(var(--step-0) * 0.98);
}
html[lang="ur"] h1 { font-size: calc(var(--step-5) * 0.82); line-height: 1.75; }
html[lang="ur"] h2 { font-size: calc(var(--step-4) * 0.84); line-height: 1.8; }
html[lang="ur"] h3 { font-size: calc(var(--step-2) * 0.88); line-height: 1.9; }
html[lang="ur"] h4 { font-size: calc(var(--step-1) * 0.92); line-height: 1.9; }
html[lang="ur"] .lead { line-height: 2.2; }
html[lang="ur"] .eyebrow {
  font-family: var(--font-urdu);
  letter-spacing: normal;
  text-transform: none;
  line-height: 2;
}
/* Latin-only bits stay in the Latin font even in Urdu mode */
html[lang="ur"] .keep-ltr {
  font-family: var(--font-body);
  direction: ltr;
  display: inline-block;
  unicode-bidi: isolate;
}

/* Mirror anything that was nudged with a left/right value */
[dir="rtl"] .eyebrow::before { order: 2; }

/* ------------------------------------------------------------------
   5. LAYOUT
   ------------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: 860px; }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head .lead { margin-top: var(--sp-4); }
.section-head h2 { margin-top: var(--sp-3); }

.bg-paper { background: var(--paper); }
.bg-tint  { background: var(--brand-50); }
.bg-sand  { background: linear-gradient(180deg, var(--cream), #f4efe6); }

.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-wide-left { grid-template-columns: 1.15fr 0.85fr; }
}

/* ------------------------------------------------------------------
   6. BUTTONS
   ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.82rem 1.5rem;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  min-height: 48px;                 /* comfortable touch target */
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-pop) ease,
              color var(--dur-pop) ease,
              border-color var(--dur-pop) ease,
              box-shadow var(--dur-pop) var(--ease-out);
  will-change: transform;
}
html[lang="ur"] .btn { font-family: var(--font-urdu); padding-block: 0.6rem 0.95rem; }

.btn:active { transform: scale(0.97); }   /* instant press feedback */

.btn-primary {
  background: var(--brand-700);
  color: #fff;
  box-shadow: var(--shadow-1);
}
.btn-secondary {
  background: var(--paper);
  color: var(--brand-800);
  border: 1px solid var(--sand-2);
}
/* Dark text on gold, not white. White on gold only reaches 3.5:1, which
   fails the WCAG AA minimum of 4.5:1; this pairing reaches 6.9:1 and
   lets the gold stay bright. */
.btn-gold {
  background: var(--gold-500);
  color: var(--brand-900);
  box-shadow: var(--shadow-1);
}
.btn-ghost {
  color: var(--brand-800);
  border: 1px solid transparent;
}
.btn-on-dark {
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
}
.btn-sm { padding: 0.55rem 1.05rem; min-height: 40px; font-size: var(--step--1); }
.btn-block { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover  { background: var(--brand-800); box-shadow: var(--shadow-2); }
  .btn-secondary:hover{ border-color: var(--brand-600); color: var(--brand-900); }
  .btn-gold:hover     { background: var(--gold-600); box-shadow: var(--shadow-2); } /* 4.9:1, still AA */
  .btn-ghost:hover    { border-color: var(--sand-2); background: var(--paper); }
  .btn-on-dark:hover  { background: rgba(255,255,255,.2); }
}

.btn .icon { width: 18px; height: 18px; flex: none; }
[dir="rtl"] .btn .icon-arrow { transform: scaleX(-1); }

/* Text link with an animated underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--brand-700);
  padding-block: 4px;
}
.link-arrow .icon { width: 16px; height: 16px; transition: transform var(--dur-pop) var(--ease-out); }
[dir="rtl"] .link-arrow .icon { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover .icon { transform: translateX(4px); }
  [dir="rtl"] .link-arrow:hover .icon { transform: scaleX(-1) translateX(4px); }
}

/* ------------------------------------------------------------------
   7. HEADER + NAVIGATION
   ------------------------------------------------------------------ */
.skip-link {
  position: absolute;
  inset-inline-start: var(--sp-4);
  top: var(--sp-3);
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--brand-800);
  color: #fff;
  border-radius: var(--r-sm);
  /* Moved with transform rather than `top`: transform is composited, so
     it never triggers layout the way animating a position property does. */
  transform: translateY(-300%);
  transition: transform var(--dur-pop) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 243, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-pop) ease, background-color var(--dur-pop) ease,
              box-shadow var(--dur-pop) ease;
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--sand);
  box-shadow: 0 1px 20px rgba(22,34,30,.05);
}

/* The header carries 12 links plus the brand, so it is allowed more
   width than the 1200px used for page content. */
.site-header .wrap { max-width: 1400px; }

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-inline-end: auto;
  flex: 0 0 auto;   /* never shrink — this is what caused the 4-line name */
  padding-block: 0.5rem;
  transition: transform var(--dur-press) var(--ease-out);
}
.brand:active { transform: scale(0.98); }
.brand-mark {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--brand-600), var(--brand-800));
  color: var(--gold-300);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
/* "contain" so the whole logo is visible — "cover" would crop the edges
   off any logo that is not a perfect square. */
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }

/* Badge: logo inside the coloured rounded square (default). */
.brand-mark[data-style="badge"] img { padding: 5px; }

/* Fill: the logo fills the rounded square edge to edge. For logos that
   already have their own background colour built in. */
.brand-mark[data-style="fill"] {
  background: none;
  padding: 0;
}
.brand-mark[data-style="fill"] img { object-fit: cover; padding: 0; }
/* On the dark footer, a dark logo needs a hairline so its edge is visible. */
.footer-brand .brand-mark[data-style="fill"] {
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), var(--shadow-1);
}

/* Plain: the logo on its own, no coloured box. For wide logos or ones
   that already carry the school name. */
.brand-mark[data-style="plain"] {
  background: none;
  box-shadow: none;
  border-radius: 0;
  width: auto;
  min-width: 42px;
  max-width: 190px;
}
.brand-mark[data-style="plain"] img { width: auto; max-width: 100%; }
/* The footer logo can breathe a little more. */
.footer-brand .brand-mark[data-style="plain"] { max-width: 210px; }
.brand-text { display: grid; line-height: 1.15; }
.brand-name {
  font-family: var(--font-display);
  white-space: nowrap;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--brand-900);
  letter-spacing: -0.02em;
}
.brand-sub {
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 500;
}
html[lang="ur"] .brand-name { font-family: var(--font-urdu); font-size: 0.98rem; line-height: 1.9; }
html[lang="ur"] .brand-sub { font-family: var(--font-urdu); letter-spacing: normal; text-transform: none; font-size: 0.68rem; }

/* --- desktop nav --- */
.nav-desktop { display: none; }
/* Raised because the menu now carries 12 links — below this width it
   would collide with the language toggle, so the burger takes over. */
@media (min-width: 1340px) {
  .nav-desktop { display: flex; align-items: center; gap: 2px; }
}
.nav-desktop a {
  position: relative;
  white-space: nowrap;
  padding: 0.5rem 0.5rem;
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-soft);
  transition: color var(--dur-pop) ease, background-color var(--dur-pop) ease;
}
html[lang="ur"] .nav-desktop a { font-size: 0.9rem; }
.nav-desktop a::after {
  content: "";
  position: absolute;
  inset-inline: 0.5rem;
  bottom: 0.18rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-pop) var(--ease-out);
}
.nav-desktop a[aria-current="page"] { color: var(--brand-900); font-weight: 600; }
.nav-desktop a[aria-current="page"]::after { transform: scaleX(1); }
.nav-desktop a.is-highlight { color: var(--gold-700); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .nav-desktop a:hover { color: var(--brand-900); background: rgba(14,82,67,.06); }
}

/* On the home page the school name is the headline act, so it is set
   larger there. Inner pages keep the compact lockup so the page content
   leads instead.

   It only grows where the header has the room: below 1300px the menu is
   a burger so there is space, and above 1400px the full menu still fits.
   In the narrow band between, the 12-item menu needs every pixel. */
@media (max-width: 1339px), (min-width: 1400px) {
  body[data-page="home"] .site-header .brand-name { font-size: 1.35rem; }
  body[data-page="home"] .site-header .brand-mark { width: 52px; height: 52px; }
  html[lang="ur"] body[data-page="home"] .site-header .brand-name { font-size: 1.25rem; }
}
/* The short name is only used on phones. */
.brand-name-short { display: none; }

/* On phones there is no room for the full name beside the crest, the
   language toggle and the menu button — so the short name is shown
   instead of squeezing the full one onto three cramped lines. */
@media (max-width: 620px) {
  .brand { flex: 0 1 auto; min-width: 0; }
  .brand-name { display: none; }
  .brand-name-short { display: block; white-space: nowrap; font-size: 1rem; }
  body[data-page="home"] .site-header .brand-name-short { font-size: 1.08rem; }
  body[data-page="home"] .site-header .brand-mark { width: 44px; height: 44px; }
}

/* The home page hero already carries a large "Apply for Admission"
   button, so repeating it in the header is noise — and the space pays
   for the bigger school name. */
body[data-page="home"] .nav-cta { display: none; }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); }

/* The header "Apply" button only appears when there is room for it.
   Handled in CSS so it responds to the window being resized. */
.nav-cta { display: none; }
@media (min-width: 1420px) { .nav-cta { display: inline-flex; } }

/* --- language toggle --- */
/* Two equal columns, so the sliding thumb never has to change size —
   it only moves. Animating width would thrash layout on every toggle. */
.lang-toggle {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 3px;
  background: var(--sand);
  border-radius: var(--r-full);
  position: relative;
  flex: none;
}
.lang-toggle a {
  position: relative;
  z-index: 1;
  text-decoration: none;
  text-align: center;
  padding: 0.4rem 0.72rem;
  border-radius: var(--r-full);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-soft);
  min-height: 34px;
  /* No animation on the label itself — language switching must feel instant */
  transition: color var(--dur-tip) ease;
}
.lang-toggle a[aria-current="true"] { color: var(--brand-900); }
/* the Urdu label specifically — the thumb <span> is the first child, so
   the old nth-child(2) was actually styling the English one */
.lang-toggle a[data-lang="ur"] { font-family: var(--font-urdu); font-size: 0.9rem; padding-block: 0.15rem 0.5rem; }
.lang-thumb {
  position: absolute;
  top: 3px; bottom: 3px;
  border-radius: var(--r-full);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-pop) var(--ease-out);
  pointer-events: none;
}

/* --- mobile menu button --- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 12px;
  border: 1px solid var(--sand-2);
  background: var(--paper);
  color: var(--brand-800);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-pop) ease;
}
.nav-toggle:active { transform: scale(0.94); }
@media (min-width: 1340px) { .nav-toggle { display: none; } }

.burger { width: 20px; height: 14px; position: relative; }
.burger span {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-pop) var(--ease-out), opacity 120ms ease;
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 6px; }
.burger span:nth-child(3) { top: 12px; }
[aria-expanded="true"] .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- mobile drawer --- */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(6, 37, 29, 0.4);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  /* visibility is a discrete property: transitioning it would leave the
     panel unfocusable for half the duration. Flip it instantly on open,
     and delay it on close so the fade-out is still seen. */
  transition: opacity var(--dur-panel) var(--ease-out),
              visibility 0s linear var(--dur-panel);
}
.nav-backdrop[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-panel) var(--ease-out), visibility 0s linear 0s;
}

.nav-drawer {
  position: fixed;
  top: 0; bottom: 0;
  inset-inline-end: 0;
  z-index: 120;
  width: min(88vw, 380px);
  background: var(--paper);
  border-inline-start: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-panel) var(--ease-drawer),
              visibility 0s linear var(--dur-panel);
  overflow-y: auto;
  overscroll-behavior: contain;
}
[dir="rtl"] .nav-drawer { transform: translateX(-100%); }
.nav-drawer[data-open="true"] {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-panel) var(--ease-drawer), visibility 0s linear 0s;
}
@media (min-width: 1340px) { .nav-drawer, .nav-backdrop { display: none; } }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.drawer-close {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid var(--sand-2);
  color: var(--brand-800);
  transition: transform var(--dur-press) var(--ease-out);
}
.drawer-close:active { transform: scale(0.94); }

.drawer-nav { padding: var(--sp-4) var(--sp-3); display: grid; gap: 2px; }
.drawer-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 1.1rem;
  border-radius: 12px;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--text-soft);
  transition: background-color var(--dur-pop) ease, color var(--dur-pop) ease,
              transform var(--dur-press) var(--ease-out);
}
.drawer-nav a:active { transform: scale(0.985); }
.drawer-nav a[aria-current="page"] {
  background: var(--brand-50);
  color: var(--brand-900);
  font-weight: 600;
}
.drawer-nav a.is-highlight { color: var(--gold-700); }
.drawer-nav a .chev { width: 16px; height: 16px; opacity: .35; }
[dir="rtl"] .drawer-nav a .chev { transform: scaleX(-1); }

.drawer-foot {
  margin-top: auto;
  padding: var(--sp-5);
  border-top: 1px solid var(--border);
  display: grid;
  gap: var(--sp-3);
}
.drawer-foot .contact-line {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.92rem; color: var(--text-soft);
}
.drawer-foot .contact-line .icon { width: 16px; height: 16px; color: var(--brand-600); flex: none; }

body[data-nav-open="true"] { overflow: hidden; }

/* ------------------------------------------------------------------
   8. HERO
   ------------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, var(--brand-900) 0%, var(--brand-800) 45%, var(--brand-700) 100%);
  color: #fff;
  padding-block: clamp(3.5rem, 9vw, 7rem);
}
/* Two stacked layers:
     1. the real page photo, set per page in the HTML
     2. a decorative geometric pattern underneath it

   While a page has no photo yet, layer 1 simply fails to paint and the
   pattern shows through. The moment you add the real photo, it covers
   the pattern automatically - no HTML or CSS change needed.

   Paths MUST start with a slash. A url() written inside a custom
   property is resolved against THIS stylesheet, not the page, so
   'images/x.jpg' would be fetched from /css/images/x.jpg and 404. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hero-image, none), var(--hero-pattern, url('/images/pattern/khatam.svg'));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  opacity: .28;
}

/* Which pattern each page uses. Purely decorative - change freely. */
body[data-page="hifz"],
body[data-page="gallery"],
body[data-page="events"]      { --hero-pattern: url('/images/pattern/arches.svg'); }

body[data-page="academics"],
body[data-page="staff"],
body[data-page="careers"]     { --hero-pattern: url('/images/pattern/lattice.svg'); }

body[data-page="contact"],
body[data-page="parents"],
body[data-page="alumni"],
body[data-page="404"]         { --hero-pattern: url('/images/pattern/rosette.svg'); }
.hero::after {
  /* soft light bloom so the type always stays readable */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(208,154,60,.22), transparent 55%),
    linear-gradient(180deg, rgba(6,37,29,.35), rgba(6,37,29,.72));
}
.hero h1 { color: #fff; }
.hero .eyebrow { color: var(--gold-300); }
.hero .eyebrow::before { background: var(--gold-300); }
.hero p { color: rgba(255,255,255,.85); }

.hero-home { min-height: min(88vh, 760px); display: grid; align-items: center; }
.hero-inner { max-width: 720px; }
.hero-title { margin-block: var(--sp-4) var(--sp-5); }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.hero-actions .btn { flex: 1 1 auto; min-width: 190px; }
@media (min-width: 560px) { .hero-actions .btn { flex: 0 0 auto; } }

/* small trust row under hero buttons */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.15);
}
.hero-meta div { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: rgba(255,255,255,.8); }
.hero-meta .icon { width: 17px; height: 17px; color: var(--gold-300); flex: none; }

/* page hero (inner pages) */
.hero-page { padding-block: clamp(3rem, 7vw, 5.5rem); }
.hero-page h1 { font-size: var(--step-4); }
.hero-page .lead { color: rgba(255,255,255,.85); margin-top: var(--sp-4); }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  font-size: 0.85rem; color: rgba(255,255,255,.6);
  margin-bottom: var(--sp-4);
}
.breadcrumb a { transition: color var(--dur-pop) ease; }
.breadcrumb span { opacity: .5; }
@media (hover: hover) and (pointer: fine) { .breadcrumb a:hover { color: var(--gold-300); } }

/* ------------------------------------------------------------------
   9. CARDS
   ------------------------------------------------------------------ */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.6vw, 1.9rem);
  transition: transform var(--dur-pop) var(--ease-out),
              box-shadow var(--dur-pop) var(--ease-out),
              border-color var(--dur-pop) ease;
}
@media (hover: hover) and (pointer: fine) {
  .card-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--sand-2); }
}
.card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--text-soft); }

.card-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--brand-50);
  color: var(--brand-700);
  margin-bottom: var(--sp-4);
}
.card-icon .icon { width: 24px; height: 24px; }
.card-icon.gold { background: var(--gold-100); color: var(--gold-700); }
.card-icon.clay { background: var(--clay-100); color: var(--clay-600); }

/* numbered "why us" list */
.numbered { counter-reset: n; }
.numbered .card { padding-inline-start: clamp(1.25rem, 2.6vw, 1.9rem); }
.numbered .card::before {
  counter-increment: n;
  content: counter(n, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  /* 15px bold still needs 4.5:1 — large-text relief starts at 18.66px */
  color: var(--gold-700);
  margin-bottom: var(--sp-3);
  letter-spacing: 0.04em;
}

/* stat strip */
/* --- STAFF PAGE --- */
.staff-list { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.staff-group .section-head { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.staff-group h2 { font-size: var(--step-3); }
.staff-group .lead { font-size: var(--step-0); margin-top: var(--sp-3); }

/* --- CAMPUS MAPS (contact page) --- */
.campus-list { display: grid; gap: var(--sp-6); }
.campus-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: 0.35rem;
}
.campus-head h3 { font-size: var(--step-1); }

/* --- FEATURED DIRECTOR (home page) ---
   Large portrait beside the message. Stacks on phones, photo first. */
.director-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 860px) {
  .director-feature { grid-template-columns: minmax(280px, 0.8fr) 1.2fr; }
}

.director-portrait {
  position: relative;
  margin: 0;
  max-width: 460px;
  width: 100%;
  justify-self: center;
  line-height: 0;
  /* Space is reserved before the photo loads, otherwise everything below
     jumps down by ~500px the moment it arrives. */
  /* 6/7 matches the current portrait almost exactly. A different photo
     will still show in full — object-fit below guarantees no cropping. */
  aspect-ratio: 6 / 7;
}
/* "contain" keeps the whole photo visible whatever its shape — nothing is
   cropped. The rounded corners and shadow sit on the image itself, so any
   spare space in the reserved box stays invisible. */
.director-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
}

.director-name { margin-top: var(--sp-3); font-size: var(--step-3); }
.director-role {
  font-size: var(--step-0);
  margin-top: 0.15rem;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
}
.director-message p { color: var(--text-soft); font-size: var(--step-0); }
.director-message p + p { margin-top: var(--sp-4); }
/* The opening line carries the most weight, so give it a little more. */
.director-message p:first-child { font-size: var(--step-1); color: var(--text); }
html[lang="ur"] .director-message p:first-child { line-height: 2.2; }

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
/* Adapts to however many stats are in content.js — 3 or 4 both fill
   the row evenly, with no empty cell left showing as a grey block. */
@media (min-width: 760px) {
  .stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
/* On two-column phones, an odd last stat spans the full width. */
.stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 760px) { .stat:last-child:nth-child(odd) { grid-column: auto; } }
.stat { background: var(--surface); padding: clamp(1.25rem, 3vw, 2rem) var(--sp-4); text-align: center; }
.stat-value {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  color: var(--brand-700);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat-label { font-size: var(--step--1); color: var(--text-mute); margin-top: var(--sp-2); }

/* ------------------------------------------------------------------
   10. ACADEMIC LEVEL CARDS
   ------------------------------------------------------------------ */
.level-card {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  padding: 0;
}
@media (min-width: 760px) { .level-card { grid-template-columns: 300px 1fr; } }
.level-media {
  position: relative;
  min-height: 200px;
  background: linear-gradient(150deg, var(--brand-700), var(--brand-900));
  overflow: hidden;
}
.level-media img { width: 100%; height: 100%; object-fit: cover; }
.level-stage {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-start: var(--sp-4);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.92);
  color: var(--brand-800);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
html[lang="ur"] .level-stage { letter-spacing: normal; text-transform: none; font-size: 0.75rem; }
.level-body { padding: clamp(1.35rem, 3vw, 2.1rem); }
.level-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.level-age {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--gold-700);
  background: var(--gold-100);
  padding: 0.22rem 0.7rem;
  border-radius: var(--r-full);
}
.chip-list { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: var(--sp-4); }
.chip {
  font-size: 0.82rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--r-full);
  background: var(--brand-50);
  color: var(--brand-800);
  border: 1px solid var(--brand-100);
}
html[lang="ur"] .chip { padding-block: 0.1rem 0.5rem; }

/* ------------------------------------------------------------------
   11. HIFZ PAGE — its own visual identity
   ------------------------------------------------------------------ */
/* The Hifz page keeps its own deeper, quieter identity — a darker
   shade of the same brand colour, so it feels related but distinct. */
.hifz-scope {
  --accent: var(--gold-600);
  --bg: #0b1a2e;
}
.hifz-hero {
  background:
    radial-gradient(90% 120% at 80% 10%, rgba(208,154,60,.28), transparent 60%),
    linear-gradient(165deg, #061428 0%, #0a1e3a 55%, #17396a 100%);
}
.hifz-hero::after { background: linear-gradient(180deg, rgba(6,20,40,.25), rgba(6,20,40,.7)); }

.hifz-dark {
  background: #081729;
  color: rgba(255,255,255,.8);
  position: relative;
  overflow: hidden;
}
.hifz-dark h2, .hifz-dark h3, .hifz-dark h4 { color: #fff; }
.hifz-dark .card-title { color: #fff; }
.hifz-dark .eyebrow { color: var(--gold-300); }
.hifz-dark .eyebrow::before { background: var(--gold-500); }
.hifz-dark .lead { color: rgba(255,255,255,.72); }
.hifz-dark .card {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.1);
}
.hifz-dark .card p { color: rgba(255,255,255,.7); }
.hifz-dark .card-icon { background: rgba(208,154,60,.14); color: var(--gold-300); }

/* decorative geometric pattern, purely visual */
.pattern-band {
  position: absolute;
  inset-inline: 0;
  height: 120px;
  opacity: .07;
  background-image:
    repeating-linear-gradient(45deg,  var(--gold-300) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, var(--gold-300) 0 1px, transparent 1px 14px);
  pointer-events: none;
}
.pattern-band.top { top: 0; mask-image: linear-gradient(to bottom, #000, transparent); }
.pattern-band.bottom { bottom: 0; mask-image: linear-gradient(to top, #000, transparent); }

/* daily schedule */
.schedule { display: grid; gap: var(--sp-3); }
.schedule-row {
  display: grid;
  gap: var(--sp-2) var(--sp-5);
  grid-template-columns: 1fr;
  padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1rem, 2.4vw, 1.6rem);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.045);
  /* No thick accent bar down one side — the gold time text is enough
     of a marker, and an even border reads calmer. */
  border: 1px solid rgba(208,154,60,.22);
  transition: background-color var(--dur-pop) ease, border-color var(--dur-pop) ease;
}
@media (min-width: 720px) { .schedule-row { grid-template-columns: 190px 1fr; align-items: start; } }
@media (hover: hover) and (pointer: fine) {
  .schedule-row:hover {
    background: rgba(255,255,255,.075);
    border-color: rgba(208,154,60,.4);
  }
}
.schedule-time {
  font-weight: 600;
  color: var(--gold-300);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}
.schedule-activity { color: #fff; font-weight: 600; margin-bottom: 0.15rem; }
.schedule-note { font-size: 0.92rem; color: rgba(255,255,255,.6); }

/* teacher cards */
.person-card { text-align: center; }
.person-photo {
  width: 96px; height: 96px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  overflow: hidden;
  background: var(--brand-100);
  display: grid; place-items: center;
  color: var(--brand-700);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  border: 3px solid rgba(255,255,255,.15);
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
/* text gold, not background gold — gold-600 only reached 3.5:1 here */
.person-role { color: var(--gold-700); font-weight: 600; font-size: var(--step--1); margin-top: var(--sp-1); }
.hifz-dark .person-role { color: var(--gold-300); }
.person-detail { font-size: 0.9rem; color: var(--text-mute); margin-top: var(--sp-2); }
.hifz-dark .person-detail { color: rgba(255,255,255,.55); }

/* ------------------------------------------------------------------
   12. STEPS / TIMELINE
   ------------------------------------------------------------------ */
.steps { display: grid; gap: var(--sp-5); counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: start;
}
.step-num {
  counter-increment: step;
  width: 44px; height: 44px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-700);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 0 0 5px var(--brand-50);
}
.step-num::before { content: counter(step); }
.step h3 { margin-bottom: var(--sp-2); }
.step p { color: var(--text-soft); }

.timeline { position: relative; display: grid; gap: var(--sp-6); }
.timeline::before {
  content: "";
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 21px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-300), var(--brand-100));
  border-radius: 2px;
}
.timeline-item { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-4); align-items: start; }
.timeline-dot {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--brand-100);
  color: var(--brand-700);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------
   13. EVENTS
   ------------------------------------------------------------------ */
.event-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  padding: 0;
}
@media (min-width: 720px) { .event-card { grid-template-columns: 110px 1fr; } }
.event-card.has-image { grid-template-columns: 1fr; }
@media (min-width: 860px) { .event-card.has-image { grid-template-columns: 110px 240px 1fr; } }

.event-date {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  padding: var(--sp-4);
  background: var(--brand-50);
  border-bottom: 1px solid var(--brand-100);
  color: var(--brand-800);
}
@media (min-width: 720px) {
  .event-date {
    flex-direction: column;
    justify-content: center;
    gap: 0;
    border-bottom: 0;
    border-inline-end: 1px solid var(--brand-100);
  }
}
.event-day { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1; }
.event-month { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.event-year { font-size: 0.75rem; color: var(--text-mute); }
html[lang="ur"] .event-day, html[lang="ur"] .event-month, html[lang="ur"] .event-year {
  font-family: var(--font-body); letter-spacing: normal;
}
.event-media { overflow: hidden; background: var(--brand-100); min-height: 160px; }
.event-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .event-card:hover .event-media img { transform: scale(1.04); } }
.event-body { padding: clamp(1.2rem, 2.6vw, 1.7rem); }
.event-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
  font-size: 0.88rem; color: var(--text-mute);
}
.event-meta div { display: flex; align-items: center; gap: 0.4rem; }
.event-meta .icon { width: 15px; height: 15px; color: var(--brand-600); flex: none; }

/* upcoming / new badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.24rem 0.68rem;
  border-radius: var(--r-full);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.5;
}
html[lang="ur"] .badge { letter-spacing: normal; text-transform: none; font-size: 0.78rem; padding-block: 0.05rem 0.4rem; }
.badge-new { background: var(--clay-600); color: #fff; }
.badge-upcoming { background: var(--gold-100); color: var(--gold-700); }
.badge-past { background: var(--sand); color: var(--text-mute); }
.badge-news { background: var(--brand-50); color: var(--brand-700); }
.badge-open { background: var(--brand-100); color: var(--brand-800); }
.badge-closed { background: var(--sand); color: var(--text-mute); }
.badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  /* Gentle pulse — this element is rare on screen, so motion is earned */
  animation: pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* The soonest upcoming event gets extra visual weight */
.event-card.is-next {
  border-color: var(--gold-300);
  box-shadow: 0 0 0 1px var(--gold-300), var(--shadow-2);
}
.event-card.is-next .event-date { background: var(--gold-100); border-color: var(--gold-300); color: var(--gold-700); }

.badge-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--sp-3); }

/* ------------------------------------------------------------------
   14. GALLERY
   ------------------------------------------------------------------ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--sp-6);
}
.filter-btn {
  padding: 0.55rem 1.1rem;
  border-radius: var(--r-full);
  border: 1px solid var(--sand-2);
  background: var(--paper);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-soft);
  min-height: 42px;
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-pop) ease,
              color var(--dur-pop) ease,
              border-color var(--dur-pop) ease;
}
.filter-btn:active { transform: scale(0.97); }
.filter-btn[aria-pressed="true"] {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .filter-btn:not([aria-pressed="true"]):hover { border-color: var(--brand-600); color: var(--brand-800); }
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: clamp(0.6rem, 1.6vw, 1rem);
}
.gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--brand-100);
  border: 1px solid var(--border);
  cursor: zoom-in;
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-pop) var(--ease-out);
}
.gallery-item:active { transform: scale(0.985); }
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--ease-out), filter 300ms ease;
}
.gallery-cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.2rem 0.9rem 0.75rem;
  background: linear-gradient(to top, rgba(6,37,29,.88), transparent);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-pop) var(--ease-out), transform var(--dur-pop) var(--ease-out);
}
html[lang="ur"] .gallery-cap { line-height: 2; padding-bottom: 0.4rem; }
@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover { box-shadow: var(--shadow-2); }
  .gallery-item:hover img { transform: scale(1.05); }
  .gallery-item:hover .gallery-cap { opacity: 1; transform: translateY(0); }
}
/* On touch devices captions are always visible — there is no hover */
@media (hover: none) {
  .gallery-cap { opacity: 1; transform: none; }
}

/* home page photo strip */
.photo-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-3);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.photo-strip > * { scroll-snap-align: start; }
@media (min-width: 900px) {
  .photo-strip { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; }
}

/* --- LIGHTBOX --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(4, 24, 19, 0.94);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-pop) var(--ease-out),
              visibility 0s linear var(--dur-pop);
}
.lightbox[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-pop) var(--ease-out), visibility 0s linear 0s;
}
.lightbox-stage {
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  min-height: 0;
  position: relative;
}
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  /* Never scale from 0 — nothing in the real world appears from nothing */
  transform: scale(0.96);
  opacity: 0;
  transition: transform var(--dur-pop) var(--ease-out), opacity var(--dur-pop) var(--ease-out);
}
.lightbox[data-open="true"] .lightbox-img { transform: scale(1); opacity: 1; }
.lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--gutter);
  color: rgba(255,255,255,.85);
}
.lightbox-count { font-size: 0.88rem; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.55); }
.lightbox-caption { text-align: center; font-size: 0.95rem; padding-inline: var(--sp-4); }
.lb-btn {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-pop) ease;
}
.lb-btn:active { transform: scale(0.93); }
@media (hover: hover) and (pointer: fine) { .lb-btn:hover { background: rgba(255,255,255,.22); } }
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.lb-prev { inset-inline-start: var(--sp-3); }
.lb-next { inset-inline-end: var(--sp-3); }
.lb-nav:active { transform: translateY(-50%) scale(0.93); }
[dir="rtl"] .lb-nav .icon { transform: scaleX(-1); }
body[data-lightbox-open="true"] { overflow: hidden; }

/* ------------------------------------------------------------------
   15. FORMS
   ------------------------------------------------------------------ */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(1.35rem, 3.5vw, 2.75rem);
  box-shadow: var(--shadow-1);
}
.form-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 700px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .full { grid-column: 1 / -1; }
}

.field { display: grid; gap: 0.45rem; }
.field label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-900);
}
.field .req { color: var(--clay-600); }
.field .hint { font-size: 0.82rem; color: var(--text-mute); font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.82rem 1rem;
  min-height: 50px;
  border: 1px solid var(--sand-2);
  border-radius: var(--r-md);
  background: var(--cream);
  color: var(--text);
  transition: border-color var(--dur-pop) ease, background-color var(--dur-pop) ease,
              box-shadow var(--dur-pop) var(--ease-out);
  appearance: none;
}
html[lang="ur"] .field input,
html[lang="ur"] .field select,
html[lang="ur"] .field textarea { font-family: var(--font-urdu); line-height: 2.1; }

.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-mute); opacity: .75; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.field input[type="file"] {
  padding: 0.6rem;
  background: var(--cream);
  cursor: pointer;
}
.field input[type="file"]::file-selector-button {
  margin-inline-end: 0.8rem;
  padding: 0.5rem 0.9rem;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--brand-700);
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%2343524c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-inline-end: 2.6rem;
}
[dir="rtl"] .field select { background-position: left 1rem center; padding-inline-end: 1rem; padding-inline-start: 2.6rem; }

/* honeypot — hidden from people, visible to spam bots */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* star rating */
.rating { display: flex; gap: 0.3rem; }
.rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating label {
  cursor: pointer;
  color: var(--sand-2);
  /* Padding sized so the tap target reaches ~44px on a phone while the
     star itself stays 30px. */
  padding: 0.45rem;
  line-height: 0;
  transition: transform var(--dur-press) var(--ease-out), color var(--dur-tip) ease;
}
.rating label:active { transform: scale(0.9); }
.rating label svg { width: 30px; height: 30px; }
.rating label.is-on { color: var(--gold-500); }
.rating input:focus-visible + label { outline: 3px solid var(--brand-600); outline-offset: 2px; border-radius: 4px; }

.form-note {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--brand-50);
  border-radius: var(--r-md);
  font-size: 0.88rem;
  color: var(--text-soft);
}
.form-note .icon { width: 18px; height: 18px; color: var(--brand-600); flex: none; margin-top: 2px; }

/* ------------------------------------------------------------------
   16. DOCUMENTS / DOWNLOADS
   ------------------------------------------------------------------ */
.doc-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: clamp(0.9rem, 2vw, 1.25rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: transform var(--dur-pop) var(--ease-out), box-shadow var(--dur-pop) var(--ease-out),
              border-color var(--dur-pop) ease;
}
.doc-item:active { transform: scale(0.995); }
@media (hover: hover) and (pointer: fine) {
  .doc-item:hover { border-color: var(--brand-600); box-shadow: var(--shadow-2); transform: translateY(-2px); }
}
.doc-type {
  width: 48px; height: 56px;
  flex: none;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--clay-100);
  color: var(--clay-600);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid rgba(168,84,58,.18);
}
.doc-type[data-type="DOCX"] { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.doc-info { flex: 1; min-width: 0; }
.doc-info h3 { margin-bottom: 0.15rem; }
.doc-info p { font-size: 0.88rem; color: var(--text-soft); }
.doc-size { font-size: 0.78rem; color: var(--text-mute); margin-top: 0.2rem; }
.doc-dl { flex: none; color: var(--brand-700); }
.doc-dl .icon { width: 22px; height: 22px; }

/* embed (Google Forms / Maps) */
.embed {
  position: relative;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--brand-50);
}
.embed iframe { width: 100%; border: 0; display: block; }
.embed-map iframe { height: clamp(300px, 45vw, 460px); }
.embed-form iframe { height: clamp(520px, 80vh, 900px); }

/* ------------------------------------------------------------------
   17. ACCORDION (FAQ)
   ------------------------------------------------------------------ */
.faq { display: grid; gap: var(--sp-3); }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur-pop) ease, box-shadow var(--dur-pop) ease;
}
.faq details[open] { border-color: var(--brand-100); box-shadow: var(--shadow-1); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: clamp(1rem, 2.2vw, 1.3rem);
  cursor: pointer;
  font-weight: 600;
  color: var(--brand-900);
  list-style: none;
  min-height: 56px;
  transition: background-color var(--dur-pop) ease;
}
.faq summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { background: var(--brand-50); } }
.faq summary .icon {
  width: 20px; height: 20px;
  flex: none;
  color: var(--brand-600);
  transition: transform var(--dur-pop) var(--ease-out);
}
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq-body { padding: 0 clamp(1rem, 2.2vw, 1.3rem) clamp(1rem, 2.2vw, 1.3rem); color: var(--text-soft); }

/* ------------------------------------------------------------------
   18. TESTIMONIAL / QUOTE
   ------------------------------------------------------------------ */
.quote-card { position: relative; padding-top: clamp(2rem, 4vw, 2.6rem); }
.quote-card::before {
  content: "\201C";
  position: absolute;
  top: 0.2rem;
  inset-inline-start: clamp(1.25rem, 2.6vw, 1.9rem);
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--gold-300);
  pointer-events: none;
}
[dir="rtl"] .quote-card::before { content: "\201D"; }
.quote-text { font-size: var(--step-1); line-height: 1.55; color: var(--brand-900); }
html[lang="ur"] .quote-text { line-height: 2.2; }
.quote-person {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.quote-avatar {
  width: 52px; height: 52px; flex: none;
  border-radius: 50%; overflow: hidden;
  background: var(--brand-100);
  display: grid; place-items: center;
  font-family: var(--font-display);
  color: var(--brand-700);
  font-weight: 600;
}
.quote-avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote-name { font-weight: 600; color: var(--brand-900); }
.quote-meta { font-size: 0.86rem; color: var(--text-mute); }

/* Star rating on a parent review. Optional — only drawn when the
   review in content.js has a "rating". */
.quote-stars {
  display: flex;
  gap: 0.15rem;
  margin-bottom: var(--sp-3);
  color: var(--gold-500);
}
.quote-stars svg { width: 17px; height: 17px; flex: none; }

/* ------------------------------------------------------------------
   19. CTA BAND
   ------------------------------------------------------------------ */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, 3.5rem);
  background: linear-gradient(140deg, var(--brand-800), var(--brand-600));
  color: #fff;
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 100% 0%, rgba(208,154,60,.3), transparent 60%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.82); margin-inline: auto; margin-top: var(--sp-4); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-6); }

/* ------------------------------------------------------------------
   20. FOOTER
   ------------------------------------------------------------------ */
.site-footer {
  background: var(--brand-900);
  color: rgba(255,255,255,.66);
  padding-block: clamp(2.75rem, 6vw, 4.5rem) var(--sp-6);
  margin-top: auto;
}
.footer-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.site-footer h2 {
  color: #fff;
  font-size: 0.82rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
html[lang="ur"] .site-footer h2 { font-family: var(--font-urdu); letter-spacing: normal; text-transform: none; font-size: 0.95rem; }
.site-footer a { transition: color var(--dur-pop) ease; }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { color: var(--gold-300); } }

.footer-brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: var(--sp-4); }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-sub { color: rgba(255,255,255,.45); }
.footer-about { font-size: 0.92rem; max-width: 38ch; }

.footer-links { display: grid; gap: 0.65rem; font-size: 0.93rem; }

.footer-contact { display: grid; gap: var(--sp-3); font-size: 0.93rem; }
.footer-contact div { display: flex; gap: 0.65rem; align-items: flex-start; }
.footer-contact .icon { width: 17px; height: 17px; color: var(--gold-500); flex: none; margin-top: 4px; }

.social-row { display: flex; gap: 0.55rem; margin-top: var(--sp-5); }
.social-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.11);
  color: rgba(255,255,255,.8);
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-pop) ease, color var(--dur-pop) ease;
}
.social-btn:active { transform: scale(0.92); }
.social-btn .icon { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  /* white on gold-600 is only 3.5:1; gold-700 takes it to 5.2:1 */
  .social-btn:hover { background: var(--gold-700); color: #fff; border-color: var(--gold-700); }
}

.footer-bottom {
  margin-top: clamp(2rem, 5vw, 3.25rem);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(255,255,255,.45);
}

/* ------------------------------------------------------------------
   21. FLOATING WHATSAPP BUTTON
   ------------------------------------------------------------------ */
.wa-fab {
  position: fixed;
  z-index: 90;
  inset-block-end: max(1.1rem, env(safe-area-inset-bottom));
  inset-inline-end: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem;
  border-radius: var(--r-full);
  background: #25D366;
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 6px 20px rgba(37,211,102,.32), var(--shadow-2);
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-pop) var(--ease-out);
}
.wa-fab:active { transform: scale(0.95); }
.wa-fab .icon { width: 26px; height: 26px; flex: none; }
.wa-fab .wa-label { display: none; padding-inline-end: 0.4rem; }
@media (min-width: 640px) {
  .wa-fab .wa-label { display: block; }
  .wa-fab { padding-inline-start: 1rem; }
}
@media (hover: hover) and (pointer: fine) {
  .wa-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,211,102,.42), var(--shadow-3); }
}

/* ------------------------------------------------------------------
   22. SCROLL REVEAL
   Transitions (not keyframes) so a fast scroll can interrupt cleanly.
   ------------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.reveal.is-in { opacity: 1; transform: none; }
/* If JavaScript never runs, content must still be visible */
.no-js .reveal { opacity: 1; transform: none; }

/* ------------------------------------------------------------------
   23. UTILITIES
   ------------------------------------------------------------------ */
.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;
}
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.rounded-media {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--brand-100);
  box-shadow: var(--shadow-2);
  aspect-ratio: 4 / 3;
}
.rounded-media img { width: 100%; height: 100%; object-fit: cover; }

/* Decorative artwork shown where a real photo has not been added yet.
   js/site.js sets background-image to one of /images/art/*.svg chosen
   to suit the slot. Geometry only - it never pretends to be a photo.
   Adding the real photograph replaces this automatically. */
.img-ph {
  width: 100%;
  height: 100%;
  min-height: 150px;
  background-color: var(--brand-800);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.info-list { display: grid; gap: var(--sp-3); }
.info-list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  color: var(--text-soft);
}
.info-list .icon {
  width: 20px; height: 20px;
  flex: none;
  color: var(--brand-600);
  margin-top: 3px;
}

.pill-grid { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.9rem;
  font-weight: 500;
}
.pill[data-open="false"] { color: var(--text-mute); background: transparent; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-500); flex: none; }
.pill[data-open="false"] .dot { background: var(--sand-2); }

/* Thank-you / 404 centred pages */
.state-page {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--sp-8);
}
.state-icon {
  width: 76px; height: 76px;
  display: grid; place-items: center;
  margin: 0 auto var(--sp-5);
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-700);
}
.state-icon .icon { width: 36px; height: 36px; }

/* ------------------------------------------------------------------
   24. REDUCED MOTION
   Fewer and gentler animations — not zero. Opacity stays (it aids
   comprehension); movement goes.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { transform: none; transition-delay: 0ms !important; }
  .btn:active, .card:hover, .gallery-item:hover img { transform: none !important; }
  .nav-drawer { transition: transform 120ms linear, visibility 0s linear 120ms; }
  .nav-drawer[data-open="true"] { transition: transform 120ms linear, visibility 0s linear 0s; }
  .badge-dot { animation: none; }
}

/* ==================================================================
   ALTERNATIVE BRAND PALETTES
   ------------------------------------------------------------------
   To change the school colour, copy ONE block below and paste it over
   the seven --brand-... lines near the top of this file (section 1).
   Nothing else needs to change.

   ---- NAVY BLUE (currently in use) ----
   --brand-900: #0a1b33;
   --brand-800: #10294c;
   --brand-700: #17396a;
   --brand-600: #1d4a86;
   --brand-500: #2a63aa;
   --brand-100: #d5e3f5;
   --brand-50:  #eef4fc;

   ---- ROYAL BLUE (brighter, more modern) ----
   --brand-900: #0b1f45;
   --brand-800: #123068;
   --brand-700: #1a4593;
   --brand-600: #2159b8;
   --brand-500: #3b74d4;
   --brand-100: #d8e4fa;
   --brand-50:  #eff4fe;

   ---- TEAL BLUE (softer, between blue and green) ----
   --brand-900: #062630;
   --brand-800: #0a3b49;
   --brand-700: #0e5166;
   --brand-600: #146885;
   --brand-500: #1d86a8;
   --brand-100: #d2e9f0;
   --brand-50:  #eef7fa;

   ---- ORIGINAL EMERALD GREEN ----
   --brand-900: #06251d;
   --brand-800: #0a3a2e;
   --brand-700: #0e5243;
   --brand-600: #126955;
   --brand-500: #1c8570;
   --brand-100: #d7ece5;
   --brand-50:  #eef7f4;

   NOTE: two other places hold a colour that is NOT in the block above,
   because they are deliberately different:
     * The Hifz page's dark background (section 11 of this file)
     * The <meta name="theme-color"> line in each .html page — this is
       the colour of the address bar on Android phones.
   ================================================================== */

/* ------------------------------------------------------------------
   25. PRINT
   ------------------------------------------------------------------ */
@media print {
  .site-header, .site-footer, .wa-fab, .nav-drawer, .nav-backdrop,
  .lightbox, .filter-bar, .hero-actions { display: none !important; }
  body { background: #fff; }
  .hero { background: none; color: #000; padding-block: 1rem; }
  .hero h1, .hero p { color: #000; }
  .card { break-inside: avoid; border-color: #ccc; }
}