/* ============================================================
   Aviation Pioneers Academy — Redesign 2026
   Brand: purple #4A306D + sky-blue wings + beige #CEBFAF
   Mobile-first, production-ready
   ============================================================ */

:root{
  /* Brand */
  --purple:        #4A306D;
  --purple-deep:   #2E1E47;
  --purple-night:  #1B1130;
  --purple-light:  #7A5BB0;
  --sky:           #2FA7E0;
  --sky-deep:      #1B6FA8;
  --sky-light:     #6FD0F5;
  --beige:         #CEBFAF;
  --gold:          #E7B873;
  --ink:           #1c1530;
  --muted:         #6c6483;
  --paper:         #ffffff;
  --paper-soft:    #f6f4fb;

  --grad-sky:   linear-gradient(180deg,#1B1130 0%,#3a2360 35%,#5b3f8e 60%,#9a6fa8 80%,#e7b07e 100%);
  --grad-brand: linear-gradient(120deg,var(--purple) 0%,var(--sky-deep) 100%);
  --grad-cta:   linear-gradient(120deg,#2E1E47 0%,#4A306D 45%,#1B6FA8 100%);

  --shadow-sm: 0 4px 14px rgba(46,30,71,.10);
  --shadow-md: 0 14px 38px rgba(46,30,71,.16);
  --shadow-lg: 0 30px 70px rgba(27,17,48,.28);

  --radius:   18px;
  --radius-sm:12px;
  --container: 1200px;
  --ease: cubic-bezier(.22,1,.36,1);

  --nav-h: 76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-size:17px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3,h4{line-height:1.12;font-weight:700;letter-spacing:-.02em}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 22px}
/* Adjacent sections stack their padding, so the gap a reader sees is roughly
   double this. Tuned so that doubled gap lands near 120px on desktop. */
.section{padding:clamp(34px,3.6vw,48px) 0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-weight:600;font-size:.98rem;letter-spacing:.01em;
  padding:.85em 1.5em;border-radius:60px;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,color .3s;
  will-change:transform;white-space:nowrap;
}
.btn svg{transition:transform .35s var(--ease)}
.btn--solid{background:var(--grad-brand);color:#fff;box-shadow:0 10px 26px rgba(74,48,109,.4)}
.btn--solid:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(74,48,109,.5)}
.btn--solid:hover svg{transform:translateX(4px)}
.btn--ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-3px)}
.btn--lg{padding:1.05em 1.9em;font-size:1.04rem}
.btn--sm{padding:.6em 1.1em;font-size:.88rem}
.btn--block{width:100%}
/* NOTE: a `section .btn--ghost` purple override used to live here. Every ghost
   button on the site sits in .hero or .cta — both dark purple — so it made them
   purple-on-purple and effectively invisible. The white base style above is the
   correct treatment for those backgrounds. Light-surface ghost buttons are
   handled where they occur (see .modal__actions .btn--ghost). */

/* ---------- Preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;
  background:var(--purple-night);color:var(--sky-light);
  transition:opacity .6s ease,visibility .6s ease;
}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__plane{animation:takeoff 1.4s var(--ease) infinite}
.preloader__text{font-size:.85rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.55)}
@keyframes takeoff{
  0%{transform:translate(-12px,12px) rotate(-8deg);opacity:.4}
  50%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(14px,-14px) rotate(6deg);opacity:0}
}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .4s var(--ease),box-shadow .4s,height .4s,backdrop-filter .4s;
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav__brand{display:flex;align-items:center;gap:12px}
/* Horizontal lockup. White variant on the dark (unscrolled) nav, full-colour
   on the white scrolled nav — swapped by .is-scrolled below. */
.nav__logo{height:56px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.28))}
.nav__logo--on-light{display:none}
.nav.is-scrolled .nav__logo{height:48px;filter:none}
.nav.is-scrolled .nav__logo--on-dark{display:none}
.nav.is-scrolled .nav__logo--on-light{display:block}
.nav__brand-text{display:flex;flex-direction:column;line-height:1.1;color:#fff;transition:color .4s}
.nav__brand-text strong{font-size:1.06rem;letter-spacing:-.01em}
.nav__brand-text small{font-size:.62rem;letter-spacing:.05em;opacity:.7;text-transform:uppercase}

.nav__menu{display:flex;align-items:center;gap:6px}
.nav__link{
  position:relative;color:rgba(255,255,255,.85);font-weight:500;font-size:.96rem;
  padding:.5em .9em;border-radius:8px;transition:color .25s;
}
.nav__link::after{
  content:"";position:absolute;left:.9em;right:.9em;bottom:.25em;height:2px;
  background:var(--sky-light);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);border-radius:2px;
}
.nav__link:hover,.nav__link.is-active{color:#fff}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__menu-actions{display:none}
.nav__right{display:flex;align-items:center;gap:14px}
.nav__lang{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4);color:#fff;font-size:1.1rem;font-weight:600;
  transition:background .25s,transform .25s;
}
.nav__lang:hover{background:rgba(255,255,255,.15);transform:translateY(-2px)}

/* scrolled state */
.nav.is-scrolled{
  height:64px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 6px 24px rgba(46,30,71,.1);
}
.nav.is-scrolled .nav__brand-text{color:var(--ink)}
.nav.is-scrolled .nav__brand-text small{opacity:.6}
.nav.is-scrolled .nav__link{color:var(--muted)}
.nav.is-scrolled .nav__link:hover,.nav.is-scrolled .nav__link.is-active{color:var(--purple)}
.nav.is-scrolled .nav__link::after{background:var(--purple)}
.nav.is-scrolled .nav__lang{border-color:rgba(74,48,109,.4);color:var(--purple)}
.nav.is-scrolled .nav__lang:hover{background:rgba(74,48,109,.1)}

/* hamburger — must sit ABOVE the slide-in menu panel so the X stays tappable */
.nav__toggle{display:none;width:42px;height:42px;border-radius:10px;position:relative;z-index:1002}
.nav__toggle span{
  position:absolute;left:9px;right:9px;height:2.5px;background:#fff;border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s,background .4s;
}
.nav__toggle span:nth-child(1){top:13px}
.nav__toggle span:nth-child(2){top:20px}
.nav__toggle span:nth-child(3){top:27px}
.nav.is-scrolled .nav__toggle span{background:var(--purple)}
.nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle.is-open span:nth-child(2){opacity:0}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  background:var(--grad-sky);overflow:hidden;isolation:isolate;
  padding-top:var(--nav-h);
}
.hero__particles{position:absolute;inset:0;z-index:1;width:100%;height:100%}
.hero__sky{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__glow{
  position:absolute;left:50%;bottom:-30%;transform:translateX(-50%);
  width:120%;height:70%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(231,176,126,.35),transparent 60%);
  filter:blur(20px);
}

/* Sun */
.hero__sun{
  position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,221,170,.9) 0%,rgba(231,176,126,.5) 40%,transparent 70%);
  filter:blur(6px);animation:sunpulse 7s ease-in-out infinite;
}
@keyframes sunpulse{0%,100%{opacity:.75;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}

/* Clouds */
.cloud{
  position:absolute;border-radius:100px;
  background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.22),rgba(255,255,255,.06));
  filter:blur(8px);opacity:.6;
}
.cloud::before,.cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
.cloud--1{width:240px;height:60px;top:24%;left:-260px;animation:drift 38s linear infinite}
.cloud--2{width:180px;height:46px;top:42%;left:-200px;animation:drift 52s linear infinite;animation-delay:-10s;opacity:.45}
.cloud--3{width:300px;height:70px;top:62%;left:-320px;animation:drift 46s linear infinite;animation-delay:-22s;opacity:.5}
.cloud--4{width:140px;height:38px;top:14%;left:-160px;animation:drift 60s linear infinite;animation-delay:-30s;opacity:.35}
.cloud::before{width:55%;height:160%;top:-40%;left:12%}
.cloud::after{width:42%;height:150%;top:-30%;right:14%}
@keyframes drift{to{transform:translateX(calc(100vw + 360px))}}

/* Hero plane */
.hero__plane{
  position:absolute;top:18%;right:8%;color:rgba(255,255,255,.85);z-index:2;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.25));
  animation:planefloat 6s ease-in-out infinite;
}
.hero__plane svg{transform:rotate(-12deg)}
@keyframes planefloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}

.hero__content{position:relative;z-index:5;max-width:760px;color:#fff;padding-bottom:6vh}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.85);margin-bottom:22px;font-weight:500;
  background:rgba(255,255,255,.08);padding:.55em 1.1em;border-radius:50px;
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);
}
.hero__eyebrow-dot{width:8px;height:8px;border-radius:50%;background:var(--sky-light);box-shadow:0 0 0 0 rgba(111,208,245,.7);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(111,208,245,.6)}70%{box-shadow:0 0 0 10px rgba(111,208,245,0)}100%{box-shadow:0 0 0 0 rgba(111,208,245,0)}}

.hero__title{font-size:clamp(2.3rem,5.2vw,4rem);font-weight:800;letter-spacing:-.035em;margin-bottom:.35em}
.hero__title span{display:block}
.hero__title-accent{
  background:linear-gradient(100deg,var(--sky-light),#fff 50%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lead{font-size:clamp(1.05rem,2.2vw,1.3rem);color:rgba(255,255,255,.9);max-width:660px;margin-bottom:20px;font-weight:300}
.hero__lead strong{color:#fff;font-weight:600}
.hero__tagline{
  font-size:clamp(1.05rem,2.1vw,1.25rem);font-weight:600;color:var(--sky-light);
  margin-bottom:34px;letter-spacing:-.01em;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:42px}

.hero__badges{display:flex;flex-wrap:wrap;gap:14px 30px}
.hero__badges li{font-size:.9rem;color:rgba(255,255,255,.7);display:flex;align-items:baseline;gap:8px}
.hero__badges span{font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:-.02em}

.hero__scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(255,255,255,.7);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  animation:bobup 2.4s ease-in-out infinite;
}
.hero__scroll-mouse{width:24px;height:38px;border:2px solid rgba(255,255,255,.5);border-radius:14px;display:flex;justify-content:center;padding-top:6px}
.hero__scroll-mouse span{width:4px;height:8px;background:#fff;border-radius:3px;animation:scrolldot 1.6s infinite}
@keyframes scrolldot{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}80%,100%{opacity:0;transform:translateY(8px)}}
@keyframes bobup{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-8px)}}

/* curved divider into trust */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:90px;z-index:4;
  background:var(--paper);
  clip-path:ellipse(75% 100% at 50% 100%);
}

/* ============================================================
   TRUST / STATS
   ============================================================ */
.trust{background:var(--paper);padding:10px 0 clamp(36px,3.6vw,46px)}
.trust__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:28px 20px;
  background:var(--grad-brand);border-radius:var(--radius);
  padding:clamp(26px,5vw,48px);box-shadow:var(--shadow-md);color:#fff;
  margin-top:-40px;position:relative;z-index:6;
}
/* The sweep is clipped by .stat, not .stat__num — the number box is exactly
   as tall as its line box, so clipping there crops the digits. */
.stat{text-align:center;padding:22px 14px;position:relative;overflow:hidden}
.stat__num{
  font-size:clamp(2.2rem,6vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;
  will-change:transform,opacity;
  --stat-slide:-24px; /* slides in toward the right; mirrored for RTL below */
}
[dir="rtl"] .stat__num{--stat-slide:24px}
.stat__label{
  font-size:.82rem;color:rgba(255,255,255,.78);margin-top:8px;letter-spacing:.02em;
  line-height:1.45;max-width:20ch;margin-inline:auto;
}
/* Replayed every few seconds by main.js, staggered stat by stat, while the
   block is on screen. Two layers: the number fades in from the side, and a
   light sweep flashes across the digits just behind it. */
.stat.is-pop .stat__num{animation:statreveal .7s var(--ease) both}
@keyframes statreveal{
  0%{opacity:0;transform:translateX(var(--stat-slide))}
  100%{opacity:1;transform:translateX(0)}
}
.stat::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.5) 50%,transparent 64%);
  transform:translateX(-130%);opacity:0;
}
.stat.is-pop::after{animation:statshine .95s var(--ease) .12s}
@keyframes statshine{
  0%{transform:translateX(-130%);opacity:0}
  30%{opacity:1}
  100%{transform:translateX(130%);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .stat.is-pop .stat__num,.stat.is-pop::after{animation:none}
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section__head{max-width:720px;margin:0 auto clamp(26px,3.4vw,42px);text-align:center}
.section__kicker{
  display:inline-block;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--sky-deep);margin-bottom:14px;
  padding:.4em 1em;background:rgba(47,167,224,.1);border-radius:50px;
}
.section__title{font-size:clamp(1.9rem,4.6vw,3rem);color:var(--ink);margin-bottom:.4em}
.section__sub{color:var(--muted);font-size:1.08rem;font-weight:300}

/* ============================================================
   FEATURES
   ============================================================ */
.features{background:var(--paper)}
.features__grid{display:grid;grid-template-columns:1fr;gap:18px}
.feature-card{
  background:var(--paper);border:1px solid rgba(74,48,109,.08);border-radius:var(--radius);
  padding:32px 28px;box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;
  position:relative;overflow:hidden;
}
.feature-card::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:4px;
  background:var(--grad-brand);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.feature-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:transparent}
.feature-card:hover::before{transform:scaleX(1)}
.feature-card__icon{
  width:58px;height:58px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(74,48,109,.12),rgba(47,167,224,.12));color:var(--purple);
  margin-bottom:20px;transition:transform .4s var(--ease);
}
.feature-card__icon svg{width:28px;height:28px}
.feature-card:hover .feature-card__icon{transform:rotate(-8deg) scale(1.08)}
.feature-card h3{font-size:1.25rem;margin-bottom:10px;color:var(--ink)}
.feature-card p{color:var(--muted);font-size:.98rem}

/* Compact icon-left service rows (Air Operator Services) — 2-col list where
   each card is a horizontal row: gold icon tile on the leading side, title
   and description stacked next to it. Reuses .feature-card visuals; RTL
   mirrors automatically since the grid follows the inline (logical) axis. */
.features__grid.svc-rows{grid-template-columns:1fr;gap:16px}
.svc-rows .feature-card{
  display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:center;
  padding:20px 22px;
}
.svc-rows .feature-card__icon{
  grid-row:1 / span 2;margin-bottom:0;width:50px;height:50px;border-radius:13px;
  color:var(--purple);background:linear-gradient(135deg,rgba(74,48,109,.12),rgba(47,167,224,.12));
}
.svc-rows .feature-card__icon svg{width:26px;height:26px}
.svc-rows .feature-card:hover .feature-card__icon{transform:scale(1.06)}
.svc-rows .feature-card h3{grid-column:2;margin-bottom:3px;font-size:1.06rem}
.svc-rows .feature-card p{grid-column:2;font-size:.9rem;line-height:1.5}
.svc-rows .feature-card:hover{transform:translateY(-3px)}
@media(min-width:768px){
  .features__grid.svc-rows{grid-template-columns:repeat(2,1fr);column-gap:30px}
}

/* Title-only variant of the service rows: icon tile + service name, no body
   copy. The icon no longer spans two rows, so the name centres beside it. */
.svc-rows--titles .feature-card{padding:16px 20px}
.svc-rows--titles .feature-card__icon{grid-row:auto;align-self:center}
.svc-rows--titles .feature-card h3{margin-bottom:0;align-self:center}

/* Centred action under a section's grid (e.g. "View all articles"). */
.section__cta{display:flex;justify-content:center;margin-top:clamp(24px,3vw,36px)}

/* Three-up variant for any of the card grids. Their base layouts go to four
   columns on wide screens, which leaves a ragged gap when a row holds exactly
   three cards (Latest News, Vision/Mission/Values, the achievement stats). */
@media(min-width:1024px){
  .programs__grid.grid--trio,
  .features__grid.grid--trio,
  .trust__grid.grid--trio{grid-template-columns:repeat(3,1fr)}
}

/* A section intro can carry more than one supporting paragraph. */
.section__head p + p{margin-top:.8em}

/* Capability chips under a page-hero lead (About). */
.page-hero__pillars{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(18px,2.4vw,26px)}
.page-hero__pillars span{
  font-size:.9rem;font-weight:600;color:#fff;padding:.5em 1.1em;border-radius:50px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
}

/* The stat band normally lifts up to overlap the hero above it; mid-page it
   should sit in normal flow instead. */
.trust__grid--flat{margin-top:0}
/* A three-stat band stacks rather than leaving a lone half-width cell on the
   second row; the labels are short enough to go three-up from tablet. */
.trust__grid.grid--trio{grid-template-columns:1fr}
@media(min-width:768px){.trust__grid.grid--trio{grid-template-columns:repeat(3,1fr)}}

/* ============================================================
   PROGRAM NAME LIST (course catalogue, names only)
   ============================================================ */
/* Multi-column list of program names. Each row is a compact card with its own
   icon tile on the leading side; the grid follows the inline axis so RTL
   mirrors without extra rules. */
.prog-list{display:grid;grid-template-columns:1fr;gap:12px;list-style:none;padding:0;margin:0}
.prog-list__item{
  display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:13px;
  padding:13px 16px;border-radius:var(--radius-sm);
  background:var(--paper);border:1px solid rgba(74,48,109,.10);box-shadow:var(--shadow-sm);
  font-weight:600;font-size:1rem;line-height:1.4;color:var(--ink);
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;
}
.prog-list__icon{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,rgba(74,48,109,.12),rgba(47,167,224,.12));
  color:var(--purple);transition:transform .35s var(--ease);
}
.prog-list__icon svg{width:21px;height:21px}
.prog-list__item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:transparent}
.prog-list__item:hover .prog-list__icon{transform:scale(1.09)}
@media(min-width:768px){.prog-list{grid-template-columns:repeat(2,1fr);column-gap:20px}}
@media(min-width:1100px){.prog-list{grid-template-columns:repeat(3,1fr)}}

/* ============================================================
   PROGRAMS
   ============================================================ */
.programs{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-soft) 100%)}
.programs__grid{display:grid;grid-template-columns:1fr;gap:24px}
.program{
  background:var(--paper);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .45s var(--ease),box-shadow .45s;
  display:flex;flex-direction:column;
}
.program:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg)}
.program__media{position:relative;aspect-ratio:16/10;overflow:hidden}
.program__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.program:hover .program__media img{transform:scale(1.08)}
.program__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(27,17,48,.55))}
.program__tag{
  position:absolute;top:14px;left:14px;z-index:2;
  max-width:calc(100% - 28px);
  font-size:.72rem;font-weight:600;letter-spacing:.04em;
  background:rgba(255,255,255,.92);color:var(--purple);
  padding:.4em .9em;border-radius:50px;backdrop-filter:blur(4px);
}
.program__body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.program__body h3{font-size:1.4rem;margin-bottom:6px;color:var(--ink)}
.program__body .program__sub{
  font-size:.86rem;font-weight:600;color:var(--sky-deep);
  margin-bottom:10px;letter-spacing:.01em;flex:none;
}
.program__body p{color:var(--muted);font-size:.97rem;font-weight:600;margin-bottom:18px;flex:1}
.program__body .program__note{
  font-size:.86rem;line-height:1.55;color:var(--sky-deep);
  font-weight:600;margin-bottom:18px;flex:none;
}
/* Learn More sits beside Apply Now; wraps to two lines on narrow cards. */
.program__actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:auto;
}
.program__actions .btn{flex:none}
.program__link{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--sky-deep);
  font-size:.95rem;transition:gap .3s var(--ease),color .3s;align-self:flex-start;
}
.program__link span{transition:transform .3s var(--ease)}
.program__link:hover{color:var(--purple)}
.program__link:hover span{transform:translateX(5px)}

/* ============================================================
   ABOUT
   ============================================================ */
.about{position:relative;background:var(--purple-night);color:#fff;overflow:hidden}
.about__bg{
  position:absolute;inset:0;opacity:.5;
  background:
    radial-gradient(circle at 85% 15%,rgba(47,167,224,.3),transparent 45%),
    radial-gradient(circle at 10% 90%,rgba(122,91,176,.4),transparent 50%);
}
.about__inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.about__media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.about__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.about__badge{
  position:absolute;bottom:18px;left:18px;right:18px;
  display:flex;align-items:center;gap:14px;
  background:rgba(27,17,48,.7);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:14px 18px;
}
.about__badge strong{font-size:2rem;color:var(--sky-light);line-height:1}
.about__badge span{font-size:.85rem;color:rgba(255,255,255,.8)}
.about__content .section__kicker{background:rgba(47,167,224,.18);color:var(--sky-light)}
.about__content .section__title{color:#fff}
.about__content p{color:rgba(255,255,255,.78);margin-bottom:16px;font-weight:300}
.about__values{margin:24px 0 30px;display:grid;gap:12px}
.about__values li{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.92);font-weight:400}
.about__values svg{color:var(--sky-light);flex-shrink:0}

/* ============================================================
   SERVICES
   ============================================================ */
/* paper-soft blends with Programs (fades to paper-soft) above and Partners
   (starts paper-soft) below, so the three sections run without a seam. */
.services{background:var(--paper-soft)}
/* Two service cards, centred, reusing the .program card visuals. */
.svc-duo{display:grid;grid-template-columns:1fr;gap:24px;max-width:920px;margin-inline:auto}
@media (min-width:768px){.svc-duo{grid-template-columns:1fr 1fr}}
.services__grid{display:grid;grid-template-columns:1fr;gap:16px}
.service{
  position:relative;padding:30px 26px;border-radius:var(--radius);
  background:var(--paper-soft);border:1px solid rgba(74,48,109,.07);
  transition:transform .4s var(--ease),box-shadow .4s,background .4s,color .4s;overflow:hidden;
}
.service__no{font-size:2.4rem;font-weight:800;color:rgba(74,48,109,.14);line-height:1;letter-spacing:-.03em;transition:color .4s}
.service h3{font-size:1.2rem;margin:8px 0 8px;color:var(--ink);transition:color .4s}
.service p{color:var(--muted);font-size:.95rem;transition:color .4s}
.service:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);background:var(--grad-brand)}
.service:hover .service__no{color:rgba(255,255,255,.35)}
.service:hover h3,.service:hover p{color:#fff}

/* ============================================================
   PARTNERS
   ============================================================ */
/* padding-bottom comes from .section — no override, or it drifts out of sync. */
.partners{background:linear-gradient(180deg,var(--paper-soft),var(--paper))}
.partners__marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.partners__track{display:flex;align-items:center;gap:56px;width:max-content;animation:marquee 30s linear infinite}
.partners__marquee:hover .partners__track{animation-play-state:paused}
.partners__track img{height:74px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .4s,opacity .4s,transform .4s}
.partners__track img:hover{filter:grayscale(0);opacity:1;transform:scale(1.08)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta{position:relative;background:var(--grad-cta);overflow:hidden;isolation:isolate}
.cta__particles{position:absolute;inset:0;z-index:0;width:100%;height:100%}
.cta__inner{position:relative;z-index:2;text-align:center;color:#fff;padding:clamp(40px,4.4vw,56px) 22px;max-width:720px}
.cta h2{font-size:clamp(2rem,5.5vw,3.4rem);margin-bottom:.4em}
.cta p{color:rgba(255,255,255,.85);font-size:1.1rem;margin-bottom:32px;font-weight:300}
.cta__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--paper)}
.contact__grid{display:grid;grid-template-columns:1fr;gap:30px}
.contact__info{display:flex;flex-direction:column;gap:18px}
.contact__item{
  display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:var(--radius-sm);
  background:var(--paper-soft);border:1px solid rgba(74,48,109,.07);transition:transform .3s var(--ease),box-shadow .3s;
}
a.contact__item:hover{transform:translateX(4px);box-shadow:var(--shadow-sm)}
.contact__ico{flex-shrink:0;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--grad-brand);color:#fff}
.contact__item small{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.contact__item strong{display:block;font-size:1.05rem;color:var(--ink);margin:2px 0}
.contact__item span{font-size:.86rem;color:var(--muted)}
.contact__socials{display:flex;gap:12px;margin-top:6px}
.contact__socials a{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper-soft);border:1px solid rgba(74,48,109,.12);color:var(--purple);
  transition:transform .3s var(--ease),background .3s,color .3s;
}
.contact__socials a:hover{background:var(--grad-brand);color:#fff;transform:translateY(-4px)}

.contact__form{background:var(--paper-soft);border:1px solid rgba(74,48,109,.08);border-radius:var(--radius);padding:clamp(24px,4vw,38px)}
.field{margin-bottom:18px}
.field-row{display:grid;grid-template-columns:1fr;gap:0}
.field label{display:block;font-size:.84rem;font-weight:600;color:var(--ink);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:.85em 1em;border:1.5px solid rgba(74,48,109,.16);border-radius:12px;
  font-family:inherit;font-size:.96rem;color:var(--ink);background:#fff;
  transition:border-color .25s,box-shadow .25s;
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--sky);box-shadow:0 0 0 4px rgba(47,167,224,.14);
}
.field input.is-invalid,.field select.is-invalid{border-color:#e05555;box-shadow:0 0 0 4px rgba(224,85,85,.12)}
.contact__form-note{margin-top:14px;font-size:.9rem;text-align:center;min-height:1.2em}
.contact__form-note.is-ok{color:#1a9c5b}
.contact__form-note.is-err{color:#e05555}

/* Wide location map below the contact grid */
.contact__map{margin:36px 0 0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid rgba(74,48,109,.1);background:var(--paper-soft);position:relative;line-height:0}
.contact__map iframe{width:100%;height:460px;border:0;display:block;filter:saturate(1.05)}
.contact__map figcaption{
  display:flex;align-items:center;justify-content:center;gap:8px;line-height:1.4;
  font-size:.86rem;color:var(--muted);padding:14px 16px;background:var(--paper);
  border-top:1px solid rgba(74,48,109,.08);
}
.contact__map figcaption svg{color:var(--sky-deep);flex-shrink:0}
@media (max-width:600px){.contact__map iframe{height:320px}}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--purple-night);color:rgba(255,255,255,.7);padding:clamp(48px,7vw,80px) 0 0}
.footer__inner{display:grid;grid-template-columns:1fr;gap:34px;padding-bottom:40px}
.footer__brand > img{width:210px;height:auto;margin-bottom:18px}
.footer__brand p{font-size:.92rem;font-weight:300;max-width:340px}
/* GACA accreditation badge — the artwork has a white ground, so it sits on a
   white chip to read as an official mark rather than a pasted-on rectangle. */
.footer__accred{margin-top:20px;display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.footer__accred img{
  width:190px;height:auto;display:block;
  background:#fff;border-radius:10px;padding:8px 10px;
}
.footer__accred span{
  font-size:.74rem;line-height:1.45;letter-spacing:.02em;
  color:rgba(255,255,255,.6);max-width:230px;
}
.footer__col h4{color:#fff;font-size:1rem;margin-bottom:16px;letter-spacing:.01em}
.footer__col a{display:block;color:rgba(255,255,255,.62);font-size:.92rem;padding:5px 0;transition:color .25s,padding-left .25s}
.footer__col a:hover{color:var(--sky-light);padding-left:5px}
.footer__bar{display:flex;flex-direction:column;gap:8px;text-align:center;border-top:1px solid rgba(255,255,255,.1);padding-top:24px;padding-bottom:24px;font-size:.84rem}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:900;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .4s,visibility .4s,transform .4s;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{transform:translateY(-4px)}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media (min-width:600px){
  .field-row{grid-template-columns:1fr 1fr;gap:16px}
  .features__grid{grid-template-columns:repeat(2,1fr)}
  .programs__grid{grid-template-columns:repeat(2,1fr)}
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .trust__grid{grid-template-columns:repeat(4,1fr)}
  .footer__bar{flex-direction:row;justify-content:space-between}
}

/* ============================================================
   RESPONSIVE — DESKTOP
   ============================================================ */
@media (min-width:992px){
  .nav__toggle{display:none}
  .nav__menu{position:static;flex-direction:row;background:none;height:auto;padding:0;transform:none;box-shadow:none;width:auto;visibility:visible;opacity:1}
  .features__grid{grid-template-columns:repeat(4,1fr)}
  /* programs stay 2x2 on laptops; go to a single row of 4 only at >=1200px
     (see below), where the container is wide enough for the CTAs to fit. */
  .programs__grid{grid-template-columns:repeat(2,1fr)}
  .services__grid{grid-template-columns:repeat(3,1fr)}
  .about__inner{grid-template-columns:1fr 1.1fr;gap:64px}
  .contact__grid{grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
  .footer__inner{grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
}

/* All four programs in one row once the container reaches full width. Cards are
   ~274px here, so trim the body padding and CTA gap to keep "Learn More" and
   "Apply Now" on a single line. */
@media (min-width:1200px){
  .programs__grid{grid-template-columns:repeat(4,1fr);gap:20px}
  .programs__grid .program__body{padding:22px 20px 26px}
  .programs__grid .program__actions{gap:10px 12px}
  .programs__grid .program__link{font-size:.9rem}
  .programs__grid .program__actions .btn--sm{padding:.55em .95em;font-size:.84rem}
}

/* ============================================================
   MOBILE NAV (under 992)
   ============================================================ */
@media (max-width:991px){
  .nav__cta-desktop,.nav__lang--desktop{display:none}
  .nav__toggle{display:block}
  .nav__menu{
    position:fixed;top:0;right:0;height:100svh;width:min(82vw,360px);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;
    background:linear-gradient(160deg,var(--purple-deep),var(--purple-night));
    padding:90px 36px 36px;box-shadow:-20px 0 60px rgba(0,0,0,.4);
    transform:translateX(100%);transition:transform .45s var(--ease);
    z-index:1001;
  }
  .nav__menu.is-open{transform:translateX(0)}
  .nav__link{font-size:1.4rem;color:#fff;padding:.5em 0;width:100%}
  .nav__link::after{display:none}
  .nav__menu-actions{display:flex;align-items:center;gap:16px;margin-top:24px}
  .nav__menu-actions .nav__lang{color:#fff;border-color:rgba(255,255,255,.4)}
  body.nav-open{overflow:hidden}
  /* Backdrop sits BELOW the nav (z:1000) so the navbar + hamburger never get
     blurred or click-blocked by it; it still dims/blurs the page content. */
  .nav-backdrop{
    position:fixed;inset:0;background:rgba(15,9,30,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    z-index:998;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
  }
  .nav-backdrop.is-open{opacity:1;visibility:visible}

  /* The floating plane only has clear space beside the headline on desktop,
     where the hero copy is capped at 760px. On tablet/phone the copy spans
     full width, so the plane would sit on top of the title — hide it there.
     Clouds + particles keep the aviation feel. */
  .hero__plane{display:none}
}

/* Phone tuning: full-screen sky, no colliding decorations, tap-friendly CTAs */
@media (max-width:600px){
  .hero{padding-bottom:48px}
  .hero__content{padding-bottom:0}
  .hero__sun{width:240px;height:240px;bottom:2%}
  .hero__scroll{display:none}          /* collided with the badges on short screens */
  .hero__eyebrow{margin-bottom:18px}
  .hero__lead{margin-bottom:26px}
  .hero__actions{width:100%;gap:12px}
  .hero__actions .btn{flex:1 1 100%}    /* full-width, stacked, easy to tap */
  .hero__badges{gap:12px 22px}
  .hero__badges span{font-size:1.3rem}
  .hero::after{height:60px}
}

/* ============================================================
   RTL / ARABIC  (applied on ar/*.html pages via dir="rtl")
   Most of the layout mirrors automatically; these are the
   targeted flips for asymmetric pieces.
   ============================================================ */
[dir="rtl"]{--ease:cubic-bezier(.22,1,.36,1)}
[dir="rtl"] body{font-family:'Tajawal','Jost',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:0}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{letter-spacing:0}
[dir="rtl"] .hero__eyebrow,[dir="rtl"] .section__kicker{letter-spacing:.04em}

/* Programs tag sits top-start */
[dir="rtl"] .program__tag{left:auto;right:14px}

/* Mobile slide-in menu comes from the left in RTL */
@media (max-width:991px){
  [dir="rtl"] .nav__menu{right:auto;left:0;transform:translateX(-100%);box-shadow:20px 0 60px rgba(0,0,0,.4)}
  [dir="rtl"] .nav__menu.is-open{transform:translateX(0)}
  [dir="rtl"] .nav__link{text-align:right}
}

/* Back-to-top moves to bottom-start */
[dir="rtl"] .to-top{right:auto;left:20px}

/* Flip directional arrows (button + link chevrons) */
[dir="rtl"] .btn svg{transform:scaleX(-1)}
[dir="rtl"] .btn--solid:hover svg{transform:scaleX(-1) translateX(4px)}
[dir="rtl"] .program__link:hover span{transform:translateX(-5px)}

/* Footer link hover indent flips side */
[dir="rtl"] .footer__col a:hover{padding-left:0;padding-right:5px}

/* Hero plane (desktop only) sits on the start side */
@media (min-width:992px){
  [dir="rtl"] .hero__plane{right:auto;left:8%}
  [dir="rtl"] .hero__plane svg{transform:rotate(12deg) scaleX(-1)}
}

/* ============================================================
   INTRO VIDEO
   ============================================================ */
.video{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-soft) 100%)}
.video__frame{
  position:relative;max-width:940px;margin:0 auto;aspect-ratio:16/9;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);
  background:var(--purple-night);
}
.video__facade{
  position:absolute;inset:0;width:100%;height:100%;cursor:pointer;border:0;padding:0;
  display:block;background:var(--purple-night);
}
.video__facade img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .4s}
.video__facade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,17,48,.15),rgba(27,17,48,.55))}
.video__facade:hover img{transform:scale(1.05)}
.video__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-brand);color:#fff;box-shadow:0 16px 40px rgba(74,48,109,.5);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.video__play svg{margin-left:4px}
.video__play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,255,255,.5);animation:ping 2.4s infinite}
.video__facade:hover .video__play{transform:translate(-50%,-50%) scale(1.1)}
.video__hint{
  position:absolute;left:0;right:0;bottom:22px;z-index:2;text-align:center;
  color:#fff;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;opacity:.9;
}
.video__iframe{width:100%;height:100%;border:0;display:block}

/* ============================================================
   SERVICES — image tiles
   ============================================================ */
.svc-tiles{display:grid;grid-template-columns:1fr;gap:16px}
.svc-tile{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--purple-night);
  box-shadow:var(--shadow-sm);transition:transform .45s var(--ease),box-shadow .45s;
  text-align:start;
}
.svc-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.svc-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.svc-tile:hover img{transform:scale(1.1)}
.svc-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,17,48,.05) 30%,rgba(27,17,48,.82));transition:background .4s}
.svc-tile:hover::after{background:linear-gradient(180deg,rgba(46,30,71,.25) 10%,rgba(27,17,48,.9))}
.svc-tile__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px;color:#fff;display:flex;flex-direction:column;gap:3px}
.svc-tile__cap strong{font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
.svc-tile__cap small{font-size:.85rem;color:rgba(255,255,255,.8)}
.svc-tile__cap::before{content:"";display:block;width:30px;height:3px;border-radius:3px;background:var(--sky-light);margin-bottom:8px;transition:width .4s var(--ease)}
.svc-tile:hover .svc-tile__cap::before{width:54px}
.svc-tile__ext{position:absolute;top:16px;right:16px;z-index:2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.25)}
.svc-tile:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* ============================================================
   WHATSAPP FLOATING BUTTON
   ============================================================ */
.wa-fab{
  position:fixed;left:20px;bottom:20px;z-index:900;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;background:#25D366;color:#fff;
  box-shadow:0 10px 30px rgba(37,211,102,.45);transition:transform .35s var(--ease),box-shadow .35s;
}
.wa-fab:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 16px 38px rgba(37,211,102,.55)}
.wa-fab svg{position:relative;z-index:2}
.wa-fab__pulse{position:absolute;inset:0;border-radius:50%;background:#25D366;z-index:1;animation:wapulse 2.6s ease-out infinite}
@keyframes wapulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.8);opacity:0}100%{opacity:0}}
@media (max-width:600px){.wa-fab{width:50px;height:50px;left:16px;bottom:16px}}

/* ============================================================
   COURSE MODAL
   ============================================================ */
body.modal-open{overflow:hidden}
.modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(15,9,30,.6);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;transition:opacity .3s}
.modal.is-open .modal__backdrop{opacity:1}
.modal__dialog{
  position:relative;z-index:2;width:100%;max-width:640px;max-height:88vh;overflow-y:auto;
  background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:clamp(26px,5vw,44px);
  opacity:0;transform:translateY(24px) scale(.97);transition:opacity .35s var(--ease),transform .35s var(--ease);
  -webkit-overflow-scrolling:touch;
}
.modal.is-open .modal__dialog{opacity:1;transform:none}
.modal__close{
  position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--paper-soft);color:var(--ink);
  border:1px solid rgba(74,48,109,.12);transition:background .25s,transform .25s;z-index:3;
}
.modal__close:hover{background:var(--grad-brand);color:#fff;transform:rotate(90deg)}
.modal__tag{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.04em;color:var(--sky-deep);background:rgba(47,167,224,.12);padding:.4em .9em;border-radius:50px;margin-bottom:14px}
.modal__title{font-size:clamp(1.5rem,4vw,2.1rem);color:var(--ink);margin-bottom:14px;padding-right:36px}
.modal__lead{color:var(--muted);font-size:1.02rem;margin-bottom:22px}
.modal__h{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin-bottom:12px;font-weight:700}
.modal__list{display:grid;gap:9px;margin-bottom:24px}
.modal__list li{position:relative;padding-left:26px;color:var(--ink);font-size:.97rem}
.modal__list li::before{content:"";position:absolute;left:4px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--sky)}
.modal__list li strong{color:var(--purple)}
.modal__meta{display:grid;gap:12px;margin-bottom:22px}
.modal__meta div{background:var(--paper-soft);border:1px solid rgba(74,48,109,.08);border-radius:12px;padding:14px 16px;font-size:.94rem;color:var(--ink)}
.modal__meta span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--sky-deep);font-weight:700;margin-bottom:5px}
.modal__note{color:var(--muted);font-size:.92rem;font-style:italic;margin-bottom:24px}
.modal__actions{display:flex;flex-wrap:wrap;gap:12px}
.modal__actions .btn--ghost{color:var(--purple);border-color:rgba(74,48,109,.4);background:rgba(74,48,109,.05)}
.modal__actions .btn--ghost:hover{background:rgba(74,48,109,.1)}

/* RTL tweaks for new components */
[dir="rtl"] .wa-fab{left:auto;right:20px}
@media (max-width:600px){[dir="rtl"] .wa-fab{right:16px;left:auto}}
[dir="rtl"] .modal__close{right:auto;left:14px}
[dir="rtl"] .modal__title{padding-right:0;padding-left:36px}
[dir="rtl"] .modal__list li{padding-left:0;padding-right:26px}
[dir="rtl"] .modal__list li::before{left:auto;right:4px}
[dir="rtl"] .svc-tile__ext{right:auto;left:16px}

/* Responsive grids for tiles */
@media (min-width:600px){
  .svc-tiles{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:992px){
  .svc-tiles{grid-template-columns:repeat(3,1fr)}
}

/* ============================================================
   MEGA-MENU DROPDOWNS
   ============================================================ */
.nav__drop{position:relative}
.nav__drop-btn{display:flex;align-items:center;gap:4px;background:none}
.nav__caret{font-size:.7em;transition:transform .25s var(--ease)}
.nav__drop.is-open .nav__caret{transform:rotate(180deg)}
.nav__drop-panel{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,8px);
  min-width:240px;background:var(--paper);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);
  padding:10px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
  z-index:1000;
}
.nav__drop-panel a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink);font-size:.94rem;white-space:nowrap}
.nav__drop-panel a:hover{background:var(--paper-soft);color:var(--purple)}
/* The mega panel is centered under the FULL nav bar, not under its own
   trigger button — .nav is position:fixed (full viewport width), so removing
   position:relative from .nav__drop--mega lets the panel position itself
   relative to .nav instead of the narrow button, avoiding off-screen overflow
   when the trigger sits left-of-center. */
.nav__drop--mega{position:static}
.nav__drop-panel--mega{display:grid;grid-template-columns:repeat(4,minmax(190px,1fr));min-width:760px;left:50%;right:auto;transform:translate(-50%,8px)}
.nav__mega-col{display:flex;flex-direction:column;gap:2px}
.nav__mega-head{font-weight:600;color:var(--purple);padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--paper-soft)}
.nav__mega-more{color:var(--sky-deep);font-weight:600}

/* Open-state transforms only apply on desktop, where the panel floats above
   the nav bar. Gating them behind this media query (rather than relying on
   specificity to lose to the mobile reset below) keeps them from ever
   applying on mobile, where the panel is an inline accordion (position:static)
   and must never receive a translate transform or it visually overlaps
   sibling nav items. */
@media (min-width:992px){
  .nav__drop.is-open .nav__drop-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
  .nav__drop.is-open .nav__drop-panel--mega{transform:translate(-50%,0)}
}

@media (max-width:991px){
  .nav__drop-panel,.nav__drop-panel--mega{
    position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;
    display:none;grid-template-columns:1fr;background:rgba(255,255,255,.06);
    min-width:0;padding:4px 0 4px 18px;
  }
  .nav__drop.is-open .nav__drop-panel,.nav__drop.is-open .nav__drop-panel--mega{display:flex}
  .nav__drop-panel a,.nav__mega-head{color:#fff;padding:8px 0}
  .nav__mega-head{border-bottom-color:rgba(255,255,255,.2)}
  .nav__drop-btn{width:100%;justify-content:space-between}
}
/* Neither dropdown panel needs an RTL override — both center themselves
   under their trigger (or the full nav bar, for the mega panel) via
   left:50%/translate(-50%,...), which is direction-agnostic. A prior version
   of this rule mirrored to translate(50%,...) for the plain panel, which was
   actually wrong: it shifted the panel a full half-width off-center instead
   of centering it, since the centering math never needed mirroring. */

/* ============================================================
   PAGE HERO (interior pages) + BREADCRUMB
   ============================================================ */
.page-hero{background:var(--grad-cta);padding:clamp(120px,13vw,168px) 0 clamp(38px,4.4vw,54px);color:#fff}
.page-hero__crumb{font-size:.86rem;opacity:.75;margin-bottom:14px}
.page-hero__crumb a{color:#fff;opacity:.85}
.page-hero__crumb a:hover{opacity:1;text-decoration:underline}
.page-hero__title{font-size:clamp(2rem,5vw,3.2rem)}
/* Interior-page leads read as a bold positioning line, set clear of the title
   so the two never run together as one wrapped sentence. */
.page-hero__lead{
  max-width:700px;margin-top:clamp(16px,2vw,24px);
  font-weight:600;opacity:.96;font-size:clamp(1.08rem,2.1vw,1.28rem);line-height:1.4;
}
/* Same treatment, used where a longer intro paragraph follows it. */
.page-hero__tagline{
  max-width:760px;margin-top:clamp(16px,2vw,24px);
  font-weight:600;font-size:clamp(1.1rem,2.3vw,1.42rem);line-height:1.35;opacity:.97;
}
/* A lead that FOLLOWS a bold line (.page-hero__tagline here, .page-hero__sub on
   the dispatcher pages) is the supporting paragraph, so it drops back to the
   light weight — otherwise the two lines compete and the tier is lost. */
.page-hero__tagline ~ .page-hero__lead,
.page-hero__sub ~ .page-hero__lead{
  margin-top:12px;max-width:780px;font-weight:300;opacity:.9;font-size:1.08rem;
}

/* ---- Page hero with a photographic background ---- */
/* Photo is set as the section's own background via an inline style on the
   element (path resolves relative to the HTML page, not this stylesheet). */
.page-hero--image{position:relative;isolation:isolate;overflow:hidden;
  background-size:cover;background-position:center 42%;
  padding-top:clamp(130px,13vw,180px);padding-bottom:clamp(44px,5vw,66px)}
.page-hero--image::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(105deg,rgba(27,17,48,.95) 0%,rgba(27,17,48,.8) 44%,rgba(27,17,48,.42) 100%)}
[dir="rtl"] .page-hero--image::after{
  background:linear-gradient(255deg,rgba(27,17,48,.95) 0%,rgba(27,17,48,.8) 44%,rgba(27,17,48,.42) 100%)}
.page-hero--image .page-hero__inner{position:relative;z-index:1}
.page-hero__sub{font-size:clamp(1.05rem,2.2vw,1.35rem);font-weight:600;color:var(--sky-light);margin-top:8px}
.page-hero__tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
  font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  padding:.5em 1em;border-radius:50px;backdrop-filter:blur(6px)}
.page-hero--image .page-hero__lead{max-width:600px;opacity:.94}
.page-hero__actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px}

/* ---- Chip rows (highlights & career sectors) ---- */
.chip-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.chip-row--center{justify-content:center}
.chip{display:inline-flex;align-items:center;gap:9px;background:var(--paper);
  border:1px solid rgba(74,48,109,.16);color:var(--ink);font-weight:600;font-size:.95rem;
  padding:.62em 1.2em;border-radius:50px;box-shadow:var(--shadow-sm)}
.chip__dot{width:7px;height:7px;border-radius:50%;background:var(--sky);flex:none}
.chip--brand{background:var(--grad-brand);color:#fff;border-color:transparent}
.chip--brand .chip__dot{background:var(--sky-light)}

/* ---- "What you'll learn" checklist ---- */
.learn-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
@media (min-width:640px){.learn-grid{grid-template-columns:1fr 1fr}}
.learn-item{display:flex;gap:12px;align-items:flex-start;background:var(--paper);
  border:1px solid rgba(74,48,109,.1);border-radius:14px;padding:15px 18px;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s}
.learn-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.learn-item svg{flex:none;width:22px;height:22px;color:var(--sky-deep);margin-top:1px}
.learn-item span{font-weight:500;font-size:.98rem}

/* ---- Entry requirements callout ---- */
.req-card{max-width:640px;margin:0 auto;background:var(--grad-brand);color:#fff;
  border-radius:var(--radius);padding:clamp(26px,4vw,42px);box-shadow:var(--shadow-md)}
.req-card ul{display:grid;gap:15px}
.req-card li{display:flex;gap:12px;align-items:flex-start;font-size:1.06rem;font-weight:500}
.req-card li svg{flex:none;width:22px;height:22px;margin-top:2px;color:var(--sky-light)}
.req-card__note{margin-top:20px;font-size:.9rem;opacity:.85;font-weight:300}

/* ============================================================
   GALLERY + LIGHTBOX
   ============================================================ */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.gallery-item{display:block;border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:4/3;position:relative}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.gallery-item:hover img{transform:scale(1.06)}

/* ---- Document thumbnails (certificates) --------------------------------
   The gallery tile crops to 4:3 and covers, which would slice a portrait
   document in half. A document keeps its own aspect and is shown whole, on
   paper stock rather than bleeding to the tile edge. */
.gallery-item--doc{
  aspect-ratio:auto;background:var(--paper);padding:10px;cursor:zoom-in;
  border:1px solid rgba(74,48,109,.12);box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s;
}
.gallery-item--doc img{height:auto;object-fit:contain;border-radius:4px}
.gallery-item--doc:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.gallery-item--doc:hover img{transform:none}
.gallery-item--doc:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

.cert{max-width:460px;margin-inline:auto;margin-top:clamp(30px,3.6vw,46px);text-align:center}
/* That top margin separates the certificate from the cards above it. When it
   follows the section head directly, the head's own bottom margin already
   does that job and the two would otherwise stack into a large gap. */
.section__head + .cert{margin-top:0}
.cert__thumb{width:100%}
.cert__caption{margin-top:14px;font-size:.92rem;color:var(--muted);line-height:1.6}
.cert__caption strong{color:var(--ink);font-weight:600}
.cert__zoom{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:600;color:var(--sky-deep);font-size:.88rem}
.lightbox{position:fixed;inset:0;z-index:1200;background:rgba(15,9,30,.9);display:flex;align-items:center;justify-content:center;padding:40px}
.lightbox[hidden]{display:none}
.lightbox__img{max-width:100%;max-height:90vh;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg)}
.lightbox__close{position:fixed;top:24px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center}
.lightbox__close:hover{background:rgba(255,255,255,.22)}
[dir="rtl"] .lightbox__close{right:auto;left:24px}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.accordion__item{border-bottom:1px solid var(--paper-soft)}
.accordion__q{width:100%;text-align:left;padding:18px 28px 18px 0;font-weight:600;font-size:1.05rem;color:var(--ink);position:relative}
.accordion__q::after{content:'+';position:absolute;right:0;top:16px;font-size:1.4rem;color:var(--purple);transition:transform .25s var(--ease)}
.accordion__q[aria-expanded="true"]::after{transform:rotate(45deg)}
.accordion__a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.accordion__a p{padding:0 0 18px;color:var(--muted)}
[dir="rtl"] .accordion__q{text-align:right;padding:18px 0 18px 28px}
[dir="rtl"] .accordion__q::after{right:auto;left:0}

/* ============================================================
   TRAINING CALENDAR
   ============================================================ */
.schedule-table-wrap{overflow-x:auto;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}
.schedule-table{width:100%;border-collapse:collapse;min-width:640px}
.schedule-table th,.schedule-table td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--paper-soft)}
.schedule-table th{background:var(--paper-soft);color:var(--purple);font-weight:600}
[dir="rtl"] .schedule-table th,[dir="rtl"] .schedule-table td{text-align:right}