/* =============================================================
   AIR FORCE SCHOOL TEZPUR — Design System (Tailwind CSS v4 themed)
   Palette drawn from the school crest: Air Force navy + gold + red.

   The single source of truth for design tokens lives in the
   Tailwind v4  @theme  block inside index.html (colours, fonts…).
   The aliases below expose those tokens to the component layer with
   literal fallbacks, so the UI renders correctly even before the
   Tailwind runtime finishes compiling (zero flash-of-unstyled-content).
   ============================================================= */

:root {
  /* Brand colours — aliased from Tailwind @theme (--color-*) with fallbacks */
  --navy-900: var(--color-navy-900, #071a3d);
  --navy-800: var(--color-navy-800, #0a2b5e);
  --navy-700: var(--color-navy-700, #0b3d91);   /* Air Force blue */
  --navy-600: var(--color-navy-600, #16509f);
  --sky-500:  var(--color-sky-500,  #2a6fdb);
  --sky-100:  var(--color-sky-100,  #e8f0fd);

  --gold-600: var(--color-gold-600, #c88a00);
  --gold-500: var(--color-gold-500, #f2b705);
  --gold-400: var(--color-gold-400, #ffc72c);
  --gold-100: var(--color-gold-100, #fff5d6);

  --red-600:  var(--color-red-600, #b30d24);
  --red-500:  var(--color-red-500, #c8102e);

  /* Neutrals */
  --ink-900:  var(--color-ink-900, #10192b);
  --ink-700:  var(--color-ink-700, #33415c);
  --ink-500:  var(--color-ink-500, #64748b);
  --line:     var(--color-line,    #e4e9f2);
  --surface:  #ffffff;
  --surface-2:var(--color-surface-2, #f5f8fd);
  --surface-3:var(--color-surface-3, #eef3fb);

  /* System */
  --radius:   14px;
  --radius-sm:9px;
  --radius-lg:22px;
  --shadow-sm: 0 2px 8px rgba(10, 43, 94, .06);
  --shadow:    0 10px 30px rgba(10, 43, 94, .10);
  --shadow-lg: 0 24px 60px rgba(7, 26, 61, .18);
  --container: 1200px;
  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --font-head: var(--font-display, "Poppins", "Segoe UI", system-ui, sans-serif);
  --font-body: var(--font-sans, "Inter", "Segoe UI", system-ui, sans-serif);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ------------------------- Base ------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-700);
  background: var(--surface-2);
  line-height: 1.65;
  font-size: 16px;
}
h1,h2,h3,h4 { font-family: var(--font-head); color: var(--ink-900); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }
p { margin: 0 0 1rem; }
a { color: var(--navy-700); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--sky-500); }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
/* Base size cap for inline icons — the icon-sizing block below sets exact px per context */
svg { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.16em; }

/* ------------------- ICON SIZING (single source) ------------------- */
.topbar svg            { width: 16px; height: 16px; }
.ticker__label svg     { width: 18px; height: 18px; }
.btn svg               { width: 18px; height: 18px; }
.nav__link svg         { width: 16px; height: 16px; }
.stat__icon svg        { width: 26px; height: 26px; }
.feature__dot svg      { width: 20px; height: 20px; }
.panel__head svg       { width: 20px; height: 20px; }
.download-item svg     { width: 18px; height: 18px; }
.quick svg             { width: 20px; height: 20px; }
.card__link svg        { width: 16px; height: 16px; }
.contact__row svg      { width: 22px; height: 22px; }
.contact__card .btn svg{ width: 18px; height: 18px; }
.footer svg            { width: 16px; height: 16px; }
.footer__brand svg     { width: 20px; height: 20px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.section { padding: 76px 0; }
.section--tint { background: var(--surface); }
.section--deep { background: linear-gradient(160deg, var(--navy-800), var(--navy-900)); color: #cdd9f0; }

/* Section heading */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 600; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-600);
  margin-bottom: .7rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold-500); border-radius: 2px; }
.section-head { max-width: 680px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

/* Buttons */
.btn {
  --_bg: var(--gold-500); --_fg: var(--navy-900);
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.5rem; border-radius: 999px; font-family: var(--font-head);
  font-weight: 600; font-size: .95rem; cursor: pointer; border: 0;
  background: var(--_bg); color: var(--_fg);
  box-shadow: 0 8px 20px rgba(242,183,5,.28); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.btn:hover { transform: translateY(-2px); color: var(--_fg); box-shadow: 0 14px 30px rgba(242,183,5,.4); }
.btn--ghost { --_bg: transparent; --_fg: #fff; border: 1.5px solid rgba(255,255,255,.55); box-shadow: none; }
.btn--ghost:hover { background: rgba(255,255,255,.12); color:#fff; box-shadow:none; }
.btn--navy { --_bg: var(--navy-700); --_fg: #fff; box-shadow: 0 8px 20px rgba(11,61,145,.28); }
.btn--navy:hover { box-shadow: 0 14px 30px rgba(11,61,145,.4); color:#fff; }

/* ===================== TOP BAR ===================== */
.topbar { background: var(--navy-900); color: #b9c8e6; font-size: .84rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 8px 0; flex-wrap: wrap; }
.topbar__contact { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.topbar__contact a { color: #cdd9f0; display: inline-flex; align-items: center; gap: .4rem; }
.topbar__contact a:hover { color: var(--gold-400); }
.topbar__cta { display: inline-flex; align-items: center; gap: .5rem; color: var(--navy-900); background: var(--gold-400); padding: 5px 14px; border-radius: 999px; font-weight: 600; }
.topbar__cta:hover { color: var(--navy-900); background: #fff; }

/* ===================== HEADER ===================== */
.header { background: var(--surface); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 60; }
.header__inner { display: flex; align-items: center; gap: 1.2rem; padding: 12px 0; }
.brand { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.brand img { width: 68px; height: 68px; object-fit: contain; }
.brand__text h1 { font-size: 1.32rem; margin: 0; color: var(--navy-800); letter-spacing: .01em; }
.brand__text p { margin: 2px 0 0; font-size: .78rem; color: var(--ink-500); letter-spacing: .02em; }
.brand__meta { font-size: .72rem !important; color: var(--gold-600) !important; font-weight: 600; }
.header__emblem { height: 54px; object-fit: contain; }

.nav-toggle { display: none; background: var(--navy-700); color:#fff; border:0; width:46px; height:42px; border-radius: 10px; font-size: 1.4rem; cursor: pointer; }

/* ===================== NAV ===================== */
.nav { background: linear-gradient(90deg, var(--navy-800), var(--navy-700)); position: sticky; top: 0; z-index: 55; box-shadow: var(--shadow-sm); }
.nav__list { display: flex; flex-wrap: wrap; }
.nav__item { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: .35rem; color: #eaf1ff; font-family: var(--font-head);
  font-weight: 500; font-size: .93rem; padding: 15px 16px; letter-spacing: .01em; white-space: nowrap;
}
.nav__link:hover, .nav__item:hover > .nav__link { background: rgba(255,255,255,.12); color: #fff; }
.nav__item.has-children > .nav__link::after { content: "▾"; font-size: .7rem; opacity: .8; }
.nav__item.has-children:hover > .nav__link { background: var(--gold-500); color: var(--navy-900); }

.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 260px; background: #fff;
  box-shadow: var(--shadow-lg); border-top: 3px solid var(--gold-500); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: .22s var(--ease); z-index: 70;
}
.nav__item:hover > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 9px 14px; border-radius: 8px; color: var(--ink-700); font-size: .9rem; }
.dropdown a:hover { background: var(--sky-100); color: var(--navy-700); padding-left: 20px; }

/* ===================== HERO / SLIDESHOW ===================== */
.hero { position: relative; overflow: hidden; background: var(--navy-900); }
.hero__track { position: relative; height: clamp(360px, 56vh, 620px); }
.slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease);
  background-size: cover; background-position: center;
}
.slide::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(7,26,61,.85), rgba(7,26,61,.45) 55%, rgba(7,26,61,.15)); }
.slide.is-active { opacity: 1; }
.hero__caption { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; }
.hero__caption .container { width: 100%; }
.hero__caption h2 { color: #fff; font-size: clamp(1.9rem, 4.4vw, 3.4rem); max-width: 15ch; margin-bottom: .4rem; text-shadow: 0 4px 24px rgba(0,0,0,.4); }
.hero__caption p { color: #dfe8fb; font-size: clamp(1rem,1.6vw,1.25rem); max-width: 44ch; margin-bottom: 1.6rem; }
.hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero__dots { position: absolute; bottom: 22px; left: 0; right: 0; z-index: 4; display: flex; gap: 10px; justify-content: center; }
.hero__dots button { width: 12px; height: 12px; border-radius: 999px; border: 2px solid rgba(255,255,255,.7); background: transparent; cursor: pointer; padding: 0; transition: .2s; }
.hero__dots button.is-active { background: var(--gold-400); border-color: var(--gold-400); width: 30px; }
.hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 46px; height: 46px; border-radius: 999px; border: 0; background: rgba(255,255,255,.15); color:#fff; font-size: 1.5rem; cursor: pointer; backdrop-filter: blur(4px); transition:.2s; }
.hero__arrow:hover { background: var(--gold-500); color: var(--navy-900); }
.hero__arrow.prev { left: 18px; } .hero__arrow.next { right: 18px; }

/* ===================== SKY JETS (global flypast) =====================
   A minimalist 3-jet echelon (like an IAF flypast) trailing soft
   saffron · white · green smoke. Injected on every page by chrome.js;
   drifts slowly bottom-left → centre-right. Reduced-motion parks it. */
.skyjet {
  position: fixed; top: 0; left: 0; z-index: 35; pointer-events: none; opacity: 0;
  width: 230px; will-change: offset-distance, opacity;
  offset-rotate: auto; offset-anchor: center;         /* jets bank along the arc */
  animation: skyOrbit 15s linear infinite;
}
@keyframes skyOrbit {
  0%        { offset-distance: 0%;   opacity: 0; }
  7%        { opacity: 1; }
  62%       { offset-distance: 100%; opacity: 1; }
  66%, 100% { offset-distance: 100%; opacity: 0; }
}
.formation { position: relative; width: 230px; height: 96px; }
.jet { position: absolute; display: flex; align-items: center; }
.jet .smoke {
  width: clamp(80px, 11vw, 130px); height: 5px; border-radius: 999px;
  filter: blur(2.5px); background: linear-gradient(90deg, transparent, var(--smoke));
}
.jet .plane { width: 32px; height: auto; margin-left: -5px; flex: none; filter: drop-shadow(0 4px 5px rgba(7,26,61,.22)); }
.jet--saff  { left: 78px; top: 6px;  --smoke: rgba(255,153,51,.82); }
.jet--white { left: 44px; top: 34px; --smoke: rgba(255,255,255,.9); }
.jet--green { left: 10px; top: 62px; --smoke: rgba(76,175,80,.82); }
@media (max-width: 760px) { .skyjet { z-index: 33; width: 160px; } .formation { transform: scale(.66); transform-origin: left center; } }

/* ===================== NOTICE POPUP ===================== */
.popup-overlay {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px;
  background: rgba(7,26,61,.55); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
}
.popup-overlay.show { opacity: 1; visibility: visible; }
.popup {
  position: relative; width: min(880px, 100%); background: #fff; border-radius: 24px;
  overflow: hidden; box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 1.02fr 1fr;
  transform: translateY(26px) scale(.96); transition: transform .45s var(--ease-spring);
}
.popup-overlay.show .popup { transform: none; }
/* Left media panel */
.popup__media { position: relative; min-height: 380px; background-size: cover; background-position: center; }
.popup__media::after { content:""; position:absolute; inset:0; background: linear-gradient(150deg, rgba(7,26,61,.55), rgba(11,61,145,.15) 60%); }
.popup__ribbon { position: absolute; top: 20px; left: 20px; z-index: 2; background: var(--red-500); color:#fff; font-family: var(--font-head); font-weight: 700; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; padding: 7px 16px; border-radius: 999px; box-shadow: 0 8px 18px rgba(200,16,46,.35); }
/* Right body */
.popup__body { padding: 44px 42px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.popup__crest { width: 56px; height: 56px; object-fit: contain; margin-bottom: 16px; }
.popup__eyebrow { font-family: var(--font-head); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 10px; }
.popup__body h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--navy-800); margin: 0 0 14px; line-height: 1.15; }
.popup__body p { color: var(--ink-700); font-size: 1rem; line-height: 1.65; margin: 0 0 26px; }
.popup__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.popup__close {
  position: absolute; top: 16px; right: 16px; z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.92); color: var(--navy-800); font-size: 1.4rem; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .25s var(--ease), background .2s;
}
.popup__close:hover { transform: rotate(90deg); background: #fff; }
.btn--text { background: transparent; background-image: none; box-shadow: none; color: var(--ink-500); }
.btn--text:hover { background: var(--surface-2); color: var(--navy-700); box-shadow: none; transform: none; }
@media (max-width: 680px) {
  .popup { grid-template-columns: 1fr; max-width: 460px; }
  .popup__media { min-height: 180px; }
  .popup__body { padding: 30px 28px 34px; }
  .popup__crest { display: none; }
}

/* ===================== TICKER ===================== */
.ticker { background: var(--gold-100); border-bottom: 1px solid var(--gold-500); display: flex; align-items: stretch; overflow: hidden; }
.ticker__label { background: var(--red-500); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; padding: 12px 20px; display: flex; align-items: center; gap: .5rem; white-space: nowrap; clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%); }
.ticker__viewport { overflow: hidden; flex: 1; display: flex; align-items: center; }
.ticker__track { display: flex; gap: 3rem; white-space: nowrap; animation: ticker 34s linear infinite; padding-left: 100%; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track a { color: var(--navy-800); font-size: .92rem; font-weight: 500; display: inline-flex; align-items: center; gap: .5rem; }
.ticker__track a:hover { color: var(--red-500); }
.tag-new { background: var(--red-500); color:#fff; font-size: .62rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: .05em; }
@keyframes ticker { to { transform: translateX(-100%); } }

/* ===================== STATS ===================== */
.stats { position: relative; z-index: 10; padding: 54px 0; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat {
  position: relative; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border: 1px solid rgba(11,61,145,.07); border-radius: 20px;
  padding: 32px 22px 26px; box-shadow: 0 12px 30px rgba(10,43,94,.08);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
}
/* gradient accent bar that draws in on hover */
.stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--gold-500), var(--sky-500)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
/* faint watermark icon in the corner */
.stat::after { content: ""; position: absolute; right: -18px; bottom: -22px; width: 96px; height: 96px; background: radial-gradient(circle, rgba(42,111,219,.06), transparent 70%); }
.stat:hover { transform: translateY(-9px); box-shadow: 0 30px 54px rgba(10,43,94,.17); }
.stat:hover::before { transform: scaleX(1); }
.stat__icon {
  position: relative; width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 16px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--navy-700), var(--sky-500));
  box-shadow: 0 10px 20px rgba(11,61,145,.28);
  transition: transform .35s var(--ease-spring);
}
.stat:hover .stat__icon { transform: translateY(-3px) rotate(-6deg); }
.stat__icon svg { width: 27px; height: 27px; }
.stat__value {
  position: relative; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.15rem); line-height: 1;
  background: linear-gradient(120deg, var(--navy-800), var(--sky-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__label { position: relative; font-size: .78rem; color: var(--ink-500); margin-top: 6px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.stat__label::before { content: ""; display: block; width: 26px; height: 2px; margin: 12px auto 9px; background: var(--gold-500); border-radius: 2px; opacity: .75; }

/* ===================== ABOUT ===================== */
.about__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 54px; align-items: center; }
.about__media { position: relative; }
.about__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; }
.about__badge { position: absolute; bottom: -22px; left: -22px; background: var(--navy-700); color: #fff; border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow); text-align: center; }
.about__badge strong { font-family: var(--font-head); font-size: 1.9rem; display: block; color: var(--gold-400); }
.about__badge span { font-size: .78rem; letter-spacing: .04em; }
.about__body p { color: var(--ink-700); }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.feature { display: flex; gap: 12px; }
.feature__dot { flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--gold-100); color: var(--gold-600); display: grid; place-items: center; }
.feature__dot svg { width: 20px; height: 20px; }
.feature h4 { margin: 2px 0 2px; font-size: 1rem; }
.feature p { margin: 0; font-size: .86rem; color: var(--ink-500); }

/* ===================== PRINCIPAL ===================== */
.principal { background: linear-gradient(160deg, var(--navy-800), var(--navy-900)); color: #d3ddf2; position: relative; overflow: hidden; }
.principal::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 12% 20%, rgba(242,183,5,.14), transparent 40%); }
.principal__grid { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; position: relative; }
.principal__card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 20px; text-align: center; backdrop-filter: blur(4px); }
.principal__card img { border-radius: var(--radius); width: 100%; aspect-ratio: 3/3.4; object-fit: cover; box-shadow: var(--shadow-lg); }
.principal__card h3 { color: #fff; margin: 16px 0 2px; font-size: 1.25rem; }
.principal__card span { color: var(--gold-400); font-size: .85rem; }
.principal__body .eyebrow { color: var(--gold-400); }
.principal__body h2 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.15rem); }
.principal__sanskrit { border-left: 3px solid var(--gold-500); padding: 6px 0 6px 18px; margin: 4px 0 18px; font-style: italic; color: #eaf1ff; white-space: pre-line; }
.principal__sanskrit small { display: block; font-style: normal; color: #9fb2d6; margin-top: 8px; }
.principal__body p { color: #c7d3ec; }
.principal__sign { font-family: var(--font-head); color: var(--gold-400); font-weight: 600; margin-top: 8px; }

/* ===================== HIGHLIGHTS ===================== */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s; display: block; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card__media { aspect-ratio: 16/10; overflow: hidden; position: relative; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.07); }
.card__date { position: absolute; top: 12px; left: 12px; background: var(--gold-500); color: var(--navy-900); font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.card__body { padding: 18px 20px; }
.card__body h4 { font-size: 1.02rem; margin: 0; color: var(--navy-800); }
.card__link { display:inline-flex; align-items:center; gap:.35rem; margin-top: 8px; font-size:.82rem; font-weight:600; color: var(--sky-500); font-family: var(--font-head); }

/* ===================== NOTICE / DOWNLOADS ===================== */
.info-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; }
.panel { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; height: 100%; }
.panel__head { background: linear-gradient(90deg, var(--navy-700), var(--sky-500)); color: #fff; padding: 15px 20px; font-family: var(--font-head); font-weight: 600; display: flex; align-items: center; gap: .6rem; }
.panel__head svg { width: 20px; height: 20px; }
.panel__body { padding: 8px 20px 16px; }
.list-item { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px dashed var(--line); }
.list-item:last-child { border-bottom: 0; }
.list-item__mark { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); margin-top: 8px; }
.list-item a { color: var(--ink-700); font-size: .92rem; font-weight: 500; }
.list-item a:hover { color: var(--navy-700); }
.list-item time { display: block; font-size: .74rem; color: var(--ink-500); margin-top: 2px; }
.download-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; font-weight: 500; }
.download-item:last-child { border-bottom: 0; }
.download-item svg { flex: none; width: 20px; height: 20px; color: var(--red-500); }

/* ===================== QUICK LINKS ===================== */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.quick a { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 18px; display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 500; font-size: .95rem; color: var(--navy-800); transition: .22s var(--ease); }
.quick a:hover { border-color: var(--gold-500); background: var(--gold-100); transform: translateY(-4px); box-shadow: var(--shadow); }
.quick a .qi { flex:none; width: 40px; height: 40px; border-radius: 11px; background: var(--sky-100); color: var(--navy-700); display: grid; place-items: center; }
.quick a:hover .qi { background: var(--gold-500); color: var(--navy-900); }
.quick a svg { width: 20px; height: 20px; }

/* ===================== CONTACT ===================== */
.contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: stretch; }
.contact__card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 34px; }
.contact__row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact__row:last-child { border-bottom: 0; }
.contact__row .ci { flex:none; width: 44px; height: 44px; border-radius: 12px; background: var(--sky-100); color: var(--navy-700); display: grid; place-items: center; }
.contact__row svg { width: 22px; height: 22px; }
.contact__row strong { display: block; font-family: var(--font-head); color: var(--navy-800); font-size: .95rem; }
.contact__row span { font-size: .9rem; color: var(--ink-500); }
.contact__map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); min-height: 340px; }
.contact__map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; }

/* ===================== FOOTER ===================== */
.footer { background: var(--navy-900); color: #9fb2d6; padding-top: 60px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding-bottom: 44px; }
.footer__brand { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.footer__brand img { width: 58px; height: 58px; }
.footer__brand h3 { color: #fff; font-size: 1.1rem; margin: 0; }
.footer__brand span { font-size: .78rem; color: var(--gold-400); }
.footer h4 { color: #fff; font-size: 1rem; margin-bottom: 18px; position: relative; padding-bottom: 10px; }
.footer h4::after { content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background: var(--gold-500); }
.footer a { color: #9fb2d6; }
.footer a:hover { color: var(--gold-400); }
.footer__links li { padding: 6px 0; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .82rem; }

/* ===================== ANIMATION LAYER ===================== */
/* Header shrink on scroll */
.header { transition: padding .3s var(--ease), box-shadow .3s var(--ease); }
.header.scrolled { box-shadow: var(--shadow); }
.header.scrolled .header__inner { padding: 7px 0; }
.header.scrolled .brand img { width: 54px; height: 54px; }
.header .brand img { transition: width .3s var(--ease), height .3s var(--ease); }

/* Animated nav underline */
.nav__link { position: relative; }
.nav__item:not(.has-children) > .nav__link::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 9px; height: 2px;
  background: var(--gold-400); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.nav__item:not(.has-children) > .nav__link:hover::after { transform: scaleX(1); }

/* Button sheen sweep */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease);
}
.btn:hover::before { left: 140%; }

/* Hero Ken Burns + caption entrance */
.slide { will-change: opacity, transform; }
.slide.is-active { animation: kenburns 8s ease-out both; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.slide.is-active ~ .hero__caption .container > * { animation: heroUp .8s var(--ease) both; }
.hero__caption h2 { animation: heroUp .7s var(--ease) both; }
.hero__caption p { animation: heroUp .7s .12s var(--ease) both; }
.hero__actions { animation: heroUp .7s .24s var(--ease) both; }
@keyframes heroUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* Floating about badge */
.about__badge { animation: float 4.5s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Card link arrow nudge */
.card__link svg { transition: transform .25s var(--ease); }
.card:hover .card__link svg { transform: translateX(4px); }

/* Count-up numbers pop */
.stat.counted .stat__value { animation: pop .5s var(--ease-spring) both; }
@keyframes pop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* Section eyebrow line grow */
.section-head .eyebrow::before { transition: width .5s var(--ease); }

/* ===================== SCROLL REVEAL & TOP ===================== */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="zoom"] { transform: scale(.94); }
.to-top { position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%; background: var(--navy-700); color:#fff; border:0; cursor:pointer; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(12px); transition:.25s var(--ease); z-index: 80; font-size: 1.3rem; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold-500); color: var(--navy-900); }

/* ===================== INTERIOR PAGES ===================== */
.page-banner { background: linear-gradient(120deg, var(--navy-800), var(--navy-700)); color: #fff; padding: 54px 0 46px; position: relative; overflow: hidden; }
.page-banner::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% -20%, rgba(242,183,5,.18), transparent 45%); }
.page-banner--img { background-size: cover; background-position: center; }
.page-banner .container { position: relative; }
.page-banner h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 6px 0 6px; }
.page-banner p { color: #d7e1f5; max-width: 60ch; margin: 0; }
.crumbs { display: flex; gap: .5rem; align-items: center; font-size: .82rem; color: #9fb2d6; font-family: var(--font-head); margin-bottom: 6px; }
.crumbs a { color: var(--gold-400); }
.crumbs span { opacity: .7; }

/* prose / text block */
.prose-wrap { max-width: 860px; }
.prose h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.prose p { color: var(--ink-700); }
.ticklist { margin: 6px 0 4px; display: grid; gap: 10px; }
.ticklist li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.ticklist li svg { width: 18px; height: 18px; color: var(--gold-600); margin-top: 3px; flex: none; }

/* icon cards */
.card--icon { padding: 26px 24px; border-top: 3px solid var(--gold-500); }
.card__icon { width: 54px; height: 54px; border-radius: 14px; background: var(--sky-100); color: var(--navy-700); display: grid; place-items: center; margin-bottom: 14px; }
.card__icon svg { width: 28px; height: 28px; }
.card--icon .card__body { padding: 0; }
.card--icon p { font-size: .9rem; color: var(--ink-500); margin: 6px 0 0; }

/* gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery-item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-sm); display: block; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 10px; font-size: .82rem; color: #fff; background: linear-gradient(transparent, rgba(7,26,61,.85)); opacity: 0; transition: opacity .25s var(--ease); }
.gallery-item:hover .gallery-item__cap { opacity: 1; }

/* table */
.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); background: #fff; }
.data-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.data-table th { background: linear-gradient(90deg, var(--navy-700), var(--sky-500)); color: #fff; text-align: left; font-family: var(--font-head); font-weight: 600; font-size: .9rem; padding: 14px 18px; }
.data-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: .92rem; }
.data-table tbody tr:nth-child(even) { background: var(--surface-2); }
.data-table tbody tr:hover { background: var(--sky-100); }
.table-note { font-size: .82rem; color: var(--ink-500); margin-top: 12px; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.step { display: flex; gap: 16px; background: #fff; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); border-left: 3px solid var(--gold-500); }
.step__num { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--navy-700); color: #fff; font-family: var(--font-head); font-weight: 700; display: grid; place-items: center; }
.step h4 { margin: 4px 0 4px; font-size: 1.05rem; }
.step p { margin: 0; font-size: .9rem; color: var(--ink-500); }

/* CTA band */
.cta-band { background: linear-gradient(120deg, var(--navy-800), var(--navy-700)); color: #fff; border-radius: var(--radius-lg); padding: 48px; text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 15% 20%, rgba(242,183,5,.2), transparent 40%); }
.cta-band h2 { color: #fff; position: relative; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.cta-band p { color: #d7e1f5; position: relative; max-width: 52ch; margin: 0 auto 22px; }
.cta-band__actions { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ===================== MODULAR COMPONENTS ===================== */
.grid-auto { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 24px; }
.feature-grid--2 { grid-template-columns: repeat(2, 1fr); }
.feature-grid--3 { grid-template-columns: repeat(3, 1fr); }
.feature-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Icon feature cards */
.feature-card { position: relative; overflow: hidden; display: block; background: #fff; border: 1px solid rgba(11,61,145,.07); border-radius: 18px; padding: 30px 26px; box-shadow: var(--shadow-sm); transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.feature-card::after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--gold-500), var(--sky-500)); transition: width .45s var(--ease); }
.feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.feature-card:hover::after { width: 100%; }
.feature-card__icon { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 16px; color: #fff; background: linear-gradient(140deg, var(--navy-700), var(--sky-500)); box-shadow: 0 8px 18px rgba(11,61,145,.25); transition: transform .35s var(--ease-spring); }
.feature-card:hover .feature-card__icon { transform: translateY(-2px) rotate(-6deg); }
.feature-card__icon svg { width: 26px; height: 26px; }
.feature-card h4 { font-size: 1.1rem; margin: 0 0 6px; color: var(--navy-800); }
.feature-card p { font-size: .9rem; color: var(--ink-500); margin: 0; }
.card__text { font-size: .9rem; color: var(--ink-500); margin: 6px 0 0; }

/* Vision & Mission */
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vm-card { position: relative; padding: 40px 36px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.vm-card::before { content: ""; position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(242,183,5,.16), transparent 70%); }
.vm-card--vision { background: linear-gradient(150deg, var(--navy-800), var(--navy-700)); color: #d3ddf2; }
.vm-card--mission { background: linear-gradient(150deg, #ffffff, #eef3fb); color: var(--ink-700); border: 1px solid rgba(11,61,145,.08); }
.vm-card__icon { position: relative; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; }
.vm-card__icon svg { width: 28px; height: 28px; }
.vm-card--vision .vm-card__icon { background: rgba(255,255,255,.12); color: var(--gold-400); }
.vm-card--mission .vm-card__icon { background: linear-gradient(140deg, var(--navy-700), var(--sky-500)); color: #fff; }
.vm-card h3 { position: relative; font-size: 1.4rem; margin: 0 0 10px; }
.vm-card--vision h3 { color: #fff; }
.vm-card p { position: relative; margin: 0; line-height: 1.7; }
.vm-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 24px; }
.vm-value { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid rgba(11,61,145,.07); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
.vm-value__icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-100); color: var(--gold-600); }
.vm-value__icon svg { width: 20px; height: 20px; }
.vm-value h4 { margin: 0; font-size: .98rem; }
.vm-value span { font-size: .8rem; color: var(--ink-500); }

/* Programs / academic wings */
.program { display: block; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid rgba(11,61,145,.06); transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.program:hover { transform: translateY(-8px); 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 .5s var(--ease); }
.program:hover .program__media img { transform: scale(1.07); }
.program__tag { position: absolute; top: 12px; left: 12px; background: rgba(7,26,61,.8); color: #fff; font-size: .72rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; backdrop-filter: blur(4px); }
.program__body { padding: 22px 24px 24px; }
.program__body h4 { font-size: 1.2rem; margin: 0 0 8px; color: var(--navy-800); }
.program__body p { font-size: .92rem; color: var(--ink-500); margin: 0 0 12px; }

/* Testimonials */
.quote { position: relative; margin: 0; background: #fff; border: 1px solid rgba(11,61,145,.07); border-radius: 18px; padding: 30px 28px 26px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s; }
.quote:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.quote__mark { position: absolute; top: 2px; right: 22px; font-family: var(--font-head); font-size: 5rem; line-height: 1; color: var(--gold-100); }
.quote blockquote { position: relative; margin: 0 0 20px; font-size: 1rem; line-height: 1.7; color: var(--ink-700); }
.quote figcaption { display: flex; align-items: center; gap: 12px; }
.quote__avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .9rem; background: linear-gradient(140deg, var(--navy-700), var(--sky-500)); }
.quote figcaption strong { display: block; color: var(--navy-800); font-size: .95rem; }
.quote figcaption small { color: var(--ink-500); font-size: .82rem; }

/* Events */
.events { display: grid; gap: 16px; max-width: 900px; margin-inline: auto; }
.event { display: flex; align-items: center; gap: 20px; background: #fff; border: 1px solid rgba(11,61,145,.07); border-radius: 16px; padding: 18px 22px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s; }
.event:hover { transform: translateX(5px); box-shadow: var(--shadow); }
.event__date { flex: none; width: 72px; text-align: center; border-radius: 14px; padding: 12px 0; background: linear-gradient(150deg, var(--navy-700), var(--sky-500)); color: #fff; }
.event__date strong { display: block; font-family: var(--font-head); font-size: 1.55rem; line-height: 1; }
.event__date span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.event__body { flex: 1; }
.event__body h4 { margin: 0 0 4px; font-size: 1.08rem; color: var(--navy-800); }
.event__body p { margin: 0; font-size: .9rem; color: var(--ink-500); }
.event__tag { display: inline-block; margin-top: 8px; font-size: .7rem; font-weight: 600; color: var(--gold-600); background: var(--gold-100); padding: 3px 10px; border-radius: 999px; }
.event__arrow { flex: none; color: var(--sky-500); transition: transform .25s var(--ease); }
.event__arrow svg { width: 22px; height: 22px; }
.event:hover .event__arrow { transform: translateX(4px); }

/* ===================== ELEGANCE / REFINEMENTS ===================== */
/* Refined page canvas — a whisper of colour instead of flat grey */
body { background:
  radial-gradient(1200px 600px at 100% -5%, rgba(42,111,219,.05), transparent 60%),
  radial-gradient(1000px 500px at -10% 110%, rgba(242,183,5,.05), transparent 60%),
  var(--surface-2);
  background-attachment: fixed;
}
::selection { background: var(--gold-400); color: var(--navy-900); }
:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 2px; border-radius: 4px; }

/* Elegant thin scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--navy-600) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: linear-gradient(var(--navy-600), var(--navy-800)); border-radius: 999px; border: 2px solid var(--surface-2); }

/* Thin tricolour hairline under the top bar — a subtle national accent */
.topbar { position: relative; }
.topbar::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg, #ff9933 0 33%, #ffffff 33% 66%, #138808 66% 100%); opacity: .8; }

/* Glass header once scrolled — more premium than a flat white bar */
.header.scrolled { background: rgba(255,255,255,.82); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(11,61,145,.08); }

/* Refined nav active state */
.nav__item.is-active > .nav__link { color: #fff; }
.nav__item.is-active > .nav__link::after { transform: scaleX(1); background: var(--gold-400); }

/* Section heading — gradient ink for a richer, more crafted look */
.section-head h2, .prose h2 {
  background: linear-gradient(120deg, var(--navy-800), var(--sky-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-head p { color: var(--ink-500); }

/* Cards — layered hairline border + softer, deeper hover */
.card, .panel, .stat, .contact__card, .step { border: 1px solid rgba(11,61,145,.06); }
.card:hover { box-shadow: 0 26px 60px rgba(7,26,61,.16); }

/* Eyebrow — animated tricolour-tipped rule */
.eyebrow::before { background: linear-gradient(90deg, var(--gold-500), var(--sky-500)); }

/* Buttons — subtle gradient depth */
.btn { background-image: linear-gradient(120deg, var(--_bg), color-mix(in srgb, var(--_bg) 82%, #fff)); }
.btn--ghost, .btn--text { background-image: none; }

/* Refined dropdown entrance */
.dropdown { border-radius: 0 0 14px 14px; }
.dropdown a { transition: background .18s var(--ease), padding-left .18s var(--ease), color .18s; }

/* Gentle first-paint fade so the JS-rendered page settles in elegantly */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
.header, .nav, .hero, main#page, .footer { animation: pageIn .5s var(--ease) both; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 992px) {
  .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .principal__grid { grid-template-columns: 1fr; }
  .principal__card { max-width: 320px; margin-inline: auto; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .quick { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .cards[style] { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-auto { grid-template-columns: repeat(2, 1fr); }
  .vm-grid { grid-template-columns: 1fr; }
  .vm-values { grid-template-columns: repeat(2, 1fr); }
  .feature-grid--3, .feature-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .section { padding: 54px 0; }
  .header__emblem { display: none; }
  .brand__text h1 { font-size: 1.05rem; }
  .nav-toggle { display: block; }
  .nav { position: static; }
  .nav__list { display: none; flex-direction: column; padding: 8px; }
  .nav.open .nav__list { display: flex; }
  .nav__link { padding: 12px 14px; border-radius: 8px; }
  .nav__item.has-children > .nav__link::after { margin-left: auto; }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: rgba(255,255,255,.06); border-top: 0; display: none; padding-left: 12px; }
  .nav__item.open > .dropdown { display: block; }
  .dropdown a { color: #dbe6ff; }
  .dropdown a:hover { background: rgba(255,255,255,.1); color:#fff; }
  .feature-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__arrow { display: none; }
  .about__badge { left: 12px; bottom: -18px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .cards[style] { grid-template-columns: 1fr !important; }
  .cta-band { padding: 34px 22px; }
  .grid-auto { grid-template-columns: 1fr; }
  .vm-values { grid-template-columns: 1fr; }
  .feature-grid--2, .feature-grid--3, .feature-grid--4 { grid-template-columns: 1fr; }
  .event { flex-wrap: wrap; }
}
/* Stats stay HORIZONTAL on phones — a swipeable snap strip, never a stack */
@media (max-width: 640px) {
  .stats__grid {
    display: flex; grid-template-columns: none; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 6px 4px 14px; margin-inline: -4px;
    scrollbar-width: none;
  }
  .stats__grid::-webkit-scrollbar { display: none; }
  .stat { flex: 0 0 60%; scroll-snap-align: center; }
}
@media (max-width: 460px) {
  .quick { grid-template-columns: 1fr; }
  .topbar__contact { display: none; }
  .stat { flex-basis: 68%; }
}