/* Irtiqaa Schools, one page. Direction A, "Lapis tile": Iraq's glazed-tile blue with turquoise and tile gold;
   the logo's navy and gold sit inside it. Headings in geometric Kufi (Reem Kufi), text in IBM Plex Sans Arabic.
   Photos framed in arches, like the arched windows of the school's own building. No gradients on UI, no glows. */
:root {
  --lapis: #1b3d8f;
  --lapis-deep: #0f2358;
  --turq: #2a9bb0;
  --gold: #e3b04b;
  --gold-hover: #f0c264;
  --wash: #f4f6fa;
  --white: #ffffff;
  --on-dark: #f4f6fa;
  --on-dark-muted: #c9d6f2;
  --on-light: #0f2358;
  --on-light-muted: #4a5878;
  --line-light: rgba(15, 35, 88, .16);
  --line-dark: rgba(244, 246, 250, .2);
  --kufi: 'Reem Kufi', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --sans: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --gutter: 20px;
  --maxw: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* anchors land below the solid header (64px) when the browser scrolls natively */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
/* overflow-x: clip, not hidden: 'hidden' can stop the sticky story stage from sticking in Safari */
body { margin: 0; background: var(--wash); color: var(--on-light); font: 400 17px/1.85 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
bdi { unicode-bidi: isolate; }
.skip { position: absolute; inset-inline-start: 12px; top: -80px; z-index: 100; padding: 10px 16px; background: var(--white); color: var(--on-light); font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 900px) { :root { --gutter: 40px; } }

.kufi { font: 700 clamp(30px, 4vw, 52px)/1.3 var(--kufi); max-width: 18em; }
.lead { max-width: 36em; font-size: 18.5px; line-height: 1.9; }

/* the glazed-tile band (eight-point stars), used between chapters */
.tiles { height: 34px; background: var(--lapis-deep) url('../assets/img/tile.svg') repeat-x center / 34px 34px; }
.tiles--thin { height: 17px; background-size: 17px 17px; }

/* star bullets */
.stars { margin: 0; padding: 0; list-style: none; }
.stars li { display: flex; gap: 12px; padding: 6px 0; }
.stars li::before { content: ''; flex: none; width: 14px; height: 14px; margin-top: 9px; background: url('../assets/img/star.svg') center / contain no-repeat; }

/* arches: photos framed like the building's arched windows, with a gold inner line */
.arch { position: relative; overflow: hidden; border-radius: 50% 50% 3px 3px / var(--arch-v, 40%) var(--arch-v, 40%) 3px 3px; background: var(--lapis-deep); }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.arch::after { content: ''; position: absolute; inset: 9px; border: 1.5px solid var(--gold); border-radius: inherit; pointer-events: none; }
.arch--portrait { aspect-ratio: 4 / 5; --arch-v: 40%; }
.arch--landscape { aspect-ratio: 9 / 8; --arch-v: 56%; }
.arch figcaption { position: absolute; bottom: 22px; left: 50%; z-index: 1; transform: translateX(-50%); padding: 3px 14px; background: var(--lapis-deep); color: var(--gold); font: 600 16px/1.6 var(--kufi); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border: 1px solid transparent; border-radius: 3px; font: 600 16px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 14.5px; }
.btn--gold { background: var(--gold); color: var(--lapis-deep); }
.btn--gold:hover { background: var(--gold-hover); }
.btn--line { border-color: rgba(15, 35, 88, .35); color: var(--on-light); }
.btn--line:hover { border-color: var(--on-light); }
.btn--light { border-color: rgba(255, 255, 255, .6); color: var(--white); }
.btn--light:hover { background: var(--white); color: var(--lapis-deep); }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 3px; border-bottom: 1px solid currentColor; color: var(--gold); font-weight: 600; text-decoration: none; }
.link-arrow::after { content: '←'; }

/* ---------- header ---------- */
.header { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; gap: 28px; height: 74px; padding: 0 var(--gutter); padding-top: env(safe-area-inset-top, 0px); color: var(--white); transition: background-color .3s var(--ease), color .3s var(--ease), height .3s var(--ease); }
.brand { display: flex; align-items: center; gap: 12px; margin-inline-end: auto; text-decoration: none; }
.brand__mark { width: 48px; height: auto; }
.brand__mark--dark { display: none; }
.brand__name { display: flex; flex-direction: column; font: 700 19px/1.15 var(--kufi); }
.brand__name small { margin-top: 3px; font: 500 11.5px/1 var(--sans); opacity: .8; }
.nav { display: none; }
.header.is-solid { height: 64px; background: var(--wash); color: var(--on-light); border-bottom: 1px solid var(--line-light); }
.header.is-solid .brand__mark--light { display: none; }
.header.is-solid .brand__mark--dark { display: block; }
@media (min-width: 1080px) {
  .nav { display: flex; gap: 30px; }
  .nav a { font-size: 15px; font-weight: 500; text-decoration: none; opacity: .9; }
  .nav a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 7px; }
}

/* ---------- the story: the drone flight in lapis; colour returns when the school appears ---------- */
.story { position: relative; height: 480vh; background: var(--lapis-deep); }
.story__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: var(--white); }
.story__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
/* a plain lapis veil (blend modes over video are unreliable in Safari) */
.story__tint { position: absolute; inset: 0; background: var(--lapis); opacity: .42; }
.story__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 55, .55) 0%, rgba(8, 20, 55, 0) 26%, rgba(8, 20, 55, 0) 60%, rgba(8, 20, 55, .82) 100%); }
.story__spire { position: absolute; top: 72px; left: 0; right: 0; height: 48%; will-change: opacity, transform; }
.story__spire canvas { width: 100%; height: 100%; opacity: 0; transition: opacity .8s var(--ease); }
.spire-live .story__spire canvas { opacity: 1; }
.story__spire-still { display: none; position: absolute; inset: 0; width: min(56%, 280px); height: auto; margin: auto; }
.no-gl .story__spire-still { display: block; }
.no-gl .story__spire canvas { display: none; }
.story__title { position: absolute; inset: auto var(--gutter) 88px; max-width: 640px; will-change: opacity, transform; }
.kicker { margin-bottom: 16px; color: var(--gold); font-size: 14.5px; font-weight: 600; }
.story h1 { display: flex; flex-direction: column; gap: 10px; }
.h1__main { font: 700 clamp(46px, 7vw, 100px)/1.08 var(--kufi); }
.h1__sub { font: 500 clamp(17px, 1.8vw, 22px)/1.3 var(--sans); color: var(--on-dark-muted); }
.motto { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--gold); font: 500 clamp(19px, 2vw, 25px)/1.4 var(--kufi); }
.motto::before { content: ''; flex: none; width: 16px; height: 16px; background: url('../assets/img/star.svg') center / contain no-repeat; }
.story__beats { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.story__beats li { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 0 var(--gutter); text-align: center; font: 600 clamp(28px, 4.4vw, 58px)/1.35 var(--kufi); text-shadow: 0 2px 22px rgba(8, 20, 55, .55); opacity: 0; will-change: opacity, transform; }
.beat__big { font-size: clamp(40px, 7vw, 96px); line-height: 1.15; }
.beat--final { pointer-events: auto; }
.beat--final .btn { font-size: 16px; text-shadow: none; }
.story__cue { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .8); font-size: 13.5px; }
.story__bar { position: absolute; inset: auto 0 0 0; height: 3px; background: rgba(255, 255, 255, .12); }
.story__bar span { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: right; }
@media (max-width: 899px) {
  .story { height: 400vh; }
  .story__cue { display: none; }
  .story__title { bottom: 60px; }
}
@media (min-width: 900px) {
  .story__spire { top: 60px; bottom: 40px; right: auto; width: 50%; height: auto; }
  .story__title { inset: 0 var(--gutter) 0 auto; display: flex; flex-direction: column; justify-content: center; width: 50%; max-width: none; padding-inline-start: max(0px, calc((100vw - var(--maxw)) / 2)); }
  .story__shade { background:
    linear-gradient(270deg, rgba(8, 20, 55, .72) 0%, rgba(8, 20, 55, .2) 45%, rgba(8, 20, 55, 0) 65%),
    linear-gradient(180deg, rgba(8, 20, 55, .5) 0%, rgba(8, 20, 55, 0) 24%, rgba(8, 20, 55, 0) 70%, rgba(8, 20, 55, .72) 100%); }
}
/* devices set to reduce motion (e.g. Windows with animations off) get a switch for the story */
.motion-switch { display: none; align-self: flex-start; margin-top: 26px; padding: 10px 18px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 3px; background: rgba(15, 35, 88, .55); color: var(--white); font: 600 15px/1 var(--sans); cursor: pointer; }
.motion-switch:hover { background: var(--lapis-deep); }
.asks-calm .motion-switch { display: inline-flex; }
.motion-switch__off { display: none; }
.asks-calm:not(.calm) .motion-switch__on { display: none; }
.asks-calm:not(.calm) .motion-switch__off { display: inline; }
.calm .story { height: auto; }
.calm .story__stage { position: relative; }
.calm .story__beats, .calm .story__cue, .calm .story__bar { display: none; }

/* ---------- the school (lapis) ---------- */
.opening { padding: clamp(80px, 10vw, 140px) 0; background: var(--lapis); color: var(--on-dark); }
.opening__grid { display: grid; gap: 50px; align-items: center; }
.opening .lead { margin-top: 24px; color: var(--on-dark-muted); }
.opening__more { max-width: 36em; margin: 16px 0 30px; color: var(--on-dark); }
.opening__photo { width: min(100%, 460px); justify-self: center; }
@media (min-width: 900px) { .opening__grid { grid-template-columns: 1.2fr .8fr; gap: 80px; } }

/* ---------- stages: a row of arches, like the building's facade ---------- */
.stages { padding: clamp(80px, 10vw, 140px) 0; background: var(--wash); }
.arcade { display: grid; gap: 14px; margin: 48px 0 0; padding: 0; list-style: none; }
.arcade li { position: relative; display: grid; align-content: start; gap: 10px; padding: 70px 24px 30px; border: 1px solid var(--line-light); border-radius: 50% 50% 3px 3px / 150px 150px 3px 3px; background: var(--white); text-align: center; }
.arcade li::before { content: ''; position: absolute; top: 22px; left: 50%; width: 20px; height: 20px; margin-left: -10px; background: url('../assets/img/star.svg') center / contain no-repeat; }
.arcade h3 { font: 700 24px/1.35 var(--kufi); color: var(--on-light); }
.arcade h3 span { display: block; font: 500 14px/1.6 var(--sans); color: var(--on-light-muted); }
.arcade p { color: var(--on-light-muted); font-size: 15.5px; line-height: 1.8; }
@media (min-width: 560px) { .arcade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .arcade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .arcade li + li { margin-inline-start: -1px; } }

/* ---------- what registration includes: an inscription frieze ---------- */
.frieze { background: var(--lapis-deep); color: var(--on-dark); }
.frieze__inner { display: grid; justify-items: center; gap: 18px; padding-block: 46px; text-align: center; }
.frieze__label { color: var(--turq); font: 600 15px/1 var(--sans); }
.frieze__line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font: 700 clamp(24px, 3.4vw, 40px)/1.35 var(--kufi); color: var(--white); }
.frieze__line li { display: flex; align-items: center; gap: 22px; }
.frieze__line li + li::before { content: ''; flex: none; width: 16px; height: 16px; background: url('../assets/img/star.svg') center / contain no-repeat; }
.frieze__line--small { font-size: clamp(18px, 2vw, 24px); font-weight: 500; color: var(--on-dark-muted); }

/* ---------- curriculum (lapis) ---------- */
.curriculum { padding: clamp(80px, 10vw, 140px) 0; background: var(--lapis); color: var(--on-dark); }
.curriculum__grid { display: grid; gap: 50px; align-items: center; }
.curriculum__photo { width: min(100%, 440px); justify-self: center; }
.pillars { margin-top: 34px; }
.pillars div { padding: 18px 0; border-top: 1px solid var(--line-dark); }
.pillars dt { color: var(--gold); font: 700 22px/1.4 var(--kufi); }
.pillars dd { margin-top: 4px; color: var(--on-dark-muted); }
@media (min-width: 900px) { .curriculum__grid { grid-template-columns: .8fr 1.2fr; gap: 90px; } }

/* ---------- the building: a colonnade of arches ---------- */
.campus { padding: clamp(80px, 10vw, 140px) 0; background: var(--wash); }
.campus__head { display: grid; gap: 18px; margin-bottom: 48px; }
.campus__head .lead { color: var(--on-light-muted); }
.colonnade { display: grid; grid-auto-flow: column; grid-auto-columns: 76%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.colonnade::-webkit-scrollbar { display: none; }
.colonnade .arch { scroll-snap-align: center; }
.colonnade__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.colonnade__btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(15, 35, 88, .35); border-radius: 3px; background: var(--white); color: var(--on-light); font: 600 20px/1 var(--sans); cursor: pointer; }
.colonnade__btn:hover:not(:disabled) { border-color: var(--on-light); }
.colonnade__btn:disabled { opacity: .35; cursor: default; }
.colonnade__dots { display: flex; gap: 2px; }
.colonnade__dots button { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.colonnade__dots button::before { content: ''; position: absolute; inset: 10px; background: rgba(15, 35, 88, .25); transform: rotate(45deg); }
.colonnade__dots button[aria-current="true"]::before { inset: 6px; background: url('../assets/img/star.svg') center / contain no-repeat; transform: none; }
@media (min-width: 900px) {
  .campus__head { grid-template-columns: 1fr 1fr; align-items: end; gap: 60px; }
  .colonnade { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; overflow: visible; margin: 0; padding: 0; }
  .colonnade__nav { display: none; }
}

/* ---------- vision (deep lapis) ---------- */
.vision { padding: clamp(80px, 10vw, 140px) 0; background: var(--lapis-deep); color: var(--on-dark); }
.vision__quote { max-width: 22em; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.5; }
.vision__quote::before { content: '«'; margin-inline-end: 8px; color: var(--gold); }
.vision__quote::after { content: '»'; margin-inline-start: 8px; color: var(--gold); }
.vision__cols { display: grid; gap: 40px; margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--line-dark); }
.vision h3 { color: var(--gold); font: 700 22px/1.4 var(--kufi); margin-bottom: 10px; }
.vision li { color: var(--on-dark-muted); }
@media (min-width: 900px) { .vision__cols { grid-template-columns: 1fr 1fr; gap: 80px; } }

/* ---------- fees: an inscription; registration: a doorway ---------- */
.fees { padding: clamp(80px, 10vw, 140px) 0; background: var(--lapis); color: var(--on-dark); }
.fees__grid { display: grid; gap: 56px; align-items: center; }
.fees__year { margin-top: 6px; color: var(--on-dark-muted); }
.inscription { margin-top: 30px; }
.inscription div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; padding: 20px 0; border-top: 1px solid var(--line-dark); }
.inscription div:last-child { border-bottom: 1px solid var(--line-dark); }
.inscription dt { font: 600 21px/1.4 var(--kufi); }
.inscription dd { color: var(--gold); font: 700 clamp(34px, 4vw, 52px)/1.1 var(--kufi); white-space: nowrap; }
.inscription small { font: 500 14px/1 var(--sans); color: var(--on-dark-muted); }
.fees__more { margin-top: 20px; }
.register { position: relative; display: grid; justify-items: center; gap: 12px; padding: 80px 30px 34px; border-radius: 50% 50% 3px 3px / 170px 170px 3px 3px; background: var(--wash); color: var(--on-light); text-align: center; }
.register::before { content: ''; position: absolute; top: 28px; left: 50%; width: 22px; height: 22px; margin-left: -11px; background: url('../assets/img/star.svg') center / contain no-repeat; }
.register__kicker { color: var(--turq); font-size: 14.5px; font-weight: 600; }
.register h3 { font: 700 clamp(26px, 2.6vw, 34px)/1.35 var(--kufi); max-width: 13em; }
.register p { color: var(--on-light-muted); max-width: 26em; }
.register__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.qr { display: none; margin-top: 18px; }
.qr img { width: 104px; height: 104px; margin: 0 auto; }
.qr figcaption { margin-top: 6px; color: var(--on-light-muted); font-size: 13.5px; }
@media (min-width: 900px) { .fees__grid { grid-template-columns: 1.1fr .9fr; gap: 80px; } .qr { display: block; } }

/* ---------- parents' questions: all visible ---------- */
.faq { padding: clamp(80px, 10vw, 140px) 0; background: var(--wash); }
.qa { display: grid; gap: 0 60px; margin-top: 40px; }
.qa div { padding: 22px 0; border-top: 1px solid var(--line-light); }
.qa dt { font: 700 20px/1.45 var(--kufi); }
.qa dd { margin-top: 6px; color: var(--on-light-muted); }
@media (min-width: 900px) { .qa { grid-template-columns: 1fr 1fr; } }

/* ---------- location + contact (deep lapis) ---------- */
.contact { padding: clamp(80px, 10vw, 140px) 0; background: var(--lapis-deep); color: var(--on-dark); }
.contact__grid { display: grid; gap: 50px; align-items: center; }
.contact .kufi { font-size: clamp(28px, 3.4vw, 44px); }
.contact .link-arrow { margin-top: 20px; }
.contact__list { margin-top: 30px; }
.contact__list div { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--line-dark); }
.contact__list dt { color: var(--on-dark-muted); font-size: 14px; }
.contact__list dd { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.contact__list a { font: 600 20px/1.4 var(--kufi); text-decoration: none; }
.contact__list a:hover { color: var(--gold); }
.contact__photo { width: min(100%, 520px); justify-self: center; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1fr; gap: 80px; } }

/* ---------- footer ---------- */
.footer { background: var(--lapis-deep); color: var(--on-dark-muted); text-align: center; }
.footer__inner { padding: 60px var(--gutter) calc(44px + env(safe-area-inset-bottom, 0px)); }
.footer img { width: 128px; height: auto; margin: 0 auto; }
.footer__motto { margin-top: 18px; color: var(--gold); font: 500 21px/1.4 var(--kufi); }
.footer__small { margin-top: 10px; font-size: 13px; }

/* ---------- WhatsApp: a small gold tile at the page edge, after the story ---------- */
.wa { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 18px; z-index: 45; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 3px; background: var(--gold); color: var(--lapis-deep); box-shadow: 0 10px 24px -12px rgba(8, 20, 55, .7); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .25s; }
.wa:hover { background: var(--gold-hover); }
.wa.is-on { opacity: 1; transform: none; pointer-events: auto; }
.wa svg { width: 28px; height: 28px; fill: currentColor; }