/*
 ╔══════════════════════════════════════════════════════════════╗
 ║  UMEED EDUCATION SYSTEM — Design System v1.0                 ║
 ║  Clean rebuild. Zero patches. Zero !important (except 3).    ║
 ║  Single source of truth for all public pages.               ║
 ╚══════════════════════════════════════════════════════════════╝

 TABLE OF CONTENTS
 ─────────────────
 01  Design Tokens
 02  Reset & Base
 03  Typography
 04  Layout Utilities
 05  Announcement Bar
 06  Navigation (both .siteNav and .nav)
 07  Mobile Drawer
 08  Hero (Homepage)
 09  Hero Slideshow
 10  Logo Intro
 11  Homepage Sections
 12  Inner Page Hero
 13  Cards & Panels
 14  Buttons & CTAs
 15  Forms
 16  Notice System
 17  Gallery & Albums
 18  Footer
 19  Floating Elements
 20  Animations & Reveals
 21  Responsive
*/

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   01  DESIGN TOKENS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  /* Palette */
  --ink:        #05080f;
  --navy:       #07111d;
  --navy-2:     #0c1929;
  --maroon:     #6e0e1b;
  --maroon-2:   #4c0a11;
  --gold:       #c8a03c;
  --gold-2:     #e6c766;
  --gold-3:     #f5dc96;
  --cream:      #faefd6;
  --muted:      #a49880;
  --white:      #ffffff;

  /* Surfaces */
  --surface-1:  rgba(12, 20, 36, .70);
  --surface-2:  rgba(16, 26, 46, .82);
  --glass:      rgba(255, 255, 255, .05);
  --glass-2:    rgba(255, 255, 255, .08);

  /* Borders */
  --border:     rgba(200, 160, 60, .20);
  --border-2:   rgba(200, 160, 60, .36);
  --border-soft:rgba(255, 255, 255, .07);

  /* Shadows */
  --shadow-sm:  0 4px 20px rgba(0,0,0,.26);
  --shadow-md:  0 16px 56px rgba(0,0,0,.36);
  --shadow-lg:  0 32px 96px rgba(0,0,0,.50);

  /* Nav */
  --nav-h:      62px;

  /* Container */
  --container:  1220px;
  --gutter:     clamp(16px, 3vw, 28px);

  /* Border radius */
  --r-sm:   12px;
  --r-md:   18px;
  --r-lg:   24px;
  --r-xl:   30px;

  /* Type scale */
  --display:  clamp(40px, 5.6vw, 76px);
  --h1:       clamp(36px, 5vw, 68px);
  --h2:       clamp(26px, 3.6vw, 50px);
  --h3:       clamp(20px, 2.2vw, 30px);
  --body-lg:  clamp(15px, 1.1vw, 17px);
  --body:     clamp(13.5px, 1vw, 15.5px);

  /* Easing */
  --ease:         cubic-bezier(.22, .80, .22, 1);
  --ease-bounce:  cubic-bezier(.34, 1.56, .64, 1);
  --ease-in:      cubic-bezier(.40, 0, 1, 1);

  /* Section padding */
  --section-py: clamp(56px, 7vw, 96px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   02  RESET & BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(ellipse 900px 560px at 0% 0%, rgba(110,14,27,.16), transparent 55%),
    radial-gradient(ellipse 800px 480px at 100% 20%, rgba(200,160,60,.07), transparent 52%),
    linear-gradient(180deg, #07111d 0%, #05080f 100%);
  background-attachment: fixed;
  color: var(--cream);
  overflow-x: hidden;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a            { color: inherit; text-decoration: none; }
img, video   { max-width: 100%; display: block; }
button       { font: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; }
address      { font-style: normal; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   03  TYPOGRAPHY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--white);
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p  { color: var(--muted); line-height: 1.72; }

.kicker {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 12px;
}
.kicker::before {
  content: '';
  display: inline-block;
  width: 20px; height: 1.5px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 2px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   04  LAYOUT UTILITIES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.container {
  width: min(var(--container), calc(100vw - var(--gutter) * 2));
  margin-inline: auto;
}
.section {
  padding: var(--section-py) 0;
  position: relative;
}
.section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 5% 20%, rgba(200,160,60,.04), transparent 26%),
    radial-gradient(circle at 95% 55%, rgba(110,14,27,.07), transparent 24%);
  pointer-events: none;
}
.section > .container { position: relative; z-index: 1; }

.section-head {
  margin-bottom: 44px;
}
.section-head.center { text-align: center; }
.section-head.center .kicker { display: block; }
.section-head h2 { margin-top: 8px; }
.section-head p  { margin-top: 14px; max-width: 58ch; font-size: var(--body-lg); }
.section-head.center p { margin-inline: auto; }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   05  ANNOUNCEMENT BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.u-announcement {
  background: linear-gradient(90deg, var(--maroon), rgba(110,14,27,.88));
  color: var(--gold-3);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  padding: 9px 20px;
  position: relative;
  z-index: 1100;
  border-bottom: 1px solid rgba(200,160,60,.18);
  line-height: 1.5;
}
.u-announcement a {
  color: var(--gold-3);
  font-weight: 900;
  border-bottom: 1px solid rgba(245,220,150,.36);
  margin-left: 6px;
  transition: border-color .18s;
}
.u-announcement a:hover { border-color: var(--gold-3); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   06  NAVIGATION  (.siteNav  &  .nav)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.siteNav, header.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--nav-h);
  background: rgba(5,8,15,.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  transition: background .3s, box-shadow .3s;
}
.siteNav.scrolled, header.nav.scrolled {
  background: rgba(4,6,12,.97);
  box-shadow: 0 6px 36px rgba(0,0,0,.38);
}

/* navInner / navbar */
.navInner, .navbar {
  height: 100%;
  width: min(1280px, calc(100vw - 24px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Brand */
.brand, a.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  text-decoration: none;
}
.brand img, .brandMark img {
  width: 38px; height: 38px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 3px;
  background: rgba(10,18,34,.70);
  transition: border-color .2s;
}
.brand:hover img, .brand:hover .brandMark img { border-color: var(--border-2); }
.brandMark {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(10,18,34,.70);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.brandName {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  line-height: 1.2;
}
.brandSub {
  font-size: 10px;
  color: rgba(200,160,60,.72);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-top: 1px;
}
.brandText {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}

/* Desktop menu */
.desktopMenu, nav.menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 100%;
}
.desktopMenu > a, nav.menu a,
.moreBtn, .moreWrap .moreBtn {
  height: 34px;
  padding: 0 11px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(250,239,214,.74);
  white-space: nowrap;
  transition: background .18s, color .18s;
  background: transparent;
  border: 0;
}
.desktopMenu > a:hover, nav.menu a:hover,
.desktopMenu > a[aria-current="page"], nav.menu a[aria-current="page"],
.moreBtn:hover {
  background: rgba(200,160,60,.11);
  color: var(--gold-2);
}

/* Nav actions */
.navActions, .actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Apply button */
.applyBtn, .actions .btn-primary {
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-3), var(--gold-2), var(--gold));
  color: #160b00;
  font-size: 12.5px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 6px 22px rgba(200,160,60,.26);
  transition: transform .2s var(--ease), box-shadow .2s;
  display: inline-flex;
  align-items: center;
}
.applyBtn:hover, .actions .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(200,160,60,.40);
}

/* Hamburger */
.menuBtn, .actions .btn.hamb {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--cream);
  font-size: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background .18s, border-color .18s;
}
.menuBtn:hover, .actions .btn.hamb:hover {
  background: rgba(200,160,60,.10);
  border-color: var(--border-2);
}

/* Notice bell */
.notice-bell, .header-bell {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--glass);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, border-color .18s;
}
.notice-bell:hover { background: rgba(200,160,60,.09); border-color: var(--border); }
.notice-bell-icon { font-size: 15px; line-height: 1; }
.notice-bell-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 17px; height: 17px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--maroon);
  border: 2px solid var(--ink);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* More dropdown */
.moreWrap, .navMore { position: relative; }
.moreMenu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 210px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, rgba(8,14,26,.98), rgba(76,10,17,.96));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.97);
  transition: opacity .18s, visibility .18s, transform .18s;
  z-index: 5000;
}
.moreWrap.open .moreMenu, .navMore.open .moreMenu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.moreMenu a, .moreMenu [role="menuitem"] {
  display: block;
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(250,239,214,.82);
  transition: background .14s, color .14s;
  height: auto;
}
.moreMenu a:hover, .moreMenu [role="menuitem"]:hover {
  background: rgba(200,160,60,.13);
  color: var(--white);
}

/* Generic .btn for inner page nav */
.actions .btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--cream);
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .18s, border-color .18s, transform .18s;
}
.actions .btn:hover {
  background: rgba(200,160,60,.09);
  border-color: var(--border-2);
  transform: translateY(-1px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   07  MOBILE DRAWER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.drawerScrim, .scrim {
  position: fixed;
  inset: 0;
  z-index: 1600;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.drawerScrim[hidden], .scrim:not(.open) { display: none; }

.mobileDrawer, .drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(340px, 88vw);
  z-index: 1700;
  background: linear-gradient(155deg, rgba(6,11,22,.99), rgba(76,10,17,.97));
  border-left: 1px solid var(--border);
  box-shadow: -6px 0 52px rgba(0,0,0,.52);
  transform: translateX(105%);
  transition: transform .3s var(--ease);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mobileDrawer.open, .drawer.open { transform: none; }

.drawerTop {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.drawerTop strong { color: var(--gold-2); font-size: 12px; letter-spacing: .10em; text-transform: uppercase; }
.drawerTop img   { width: 36px; height: 36px; object-fit: contain; }
.drawerTop button, .drawerTop .btn {
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--cream);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}

.drawerLinks { padding: 12px; overflow-y: auto; flex: 1; }
.drawerLinks a, .drawer a {
  display: block;
  padding: 12px 15px;
  margin: 3px 0;
  border-radius: 12px;
  background: rgba(255,255,255,.038);
  border: 1px solid rgba(255,255,255,.06);
  color: rgba(250,239,214,.88);
  font-weight: 700;
  font-size: 13.5px;
  transition: background .15s, border-color .15s, color .15s, transform .15s var(--ease);
}
.drawer { padding: 0; }
.drawer .drawerTop + a, .drawer a {
  margin: 3px 10px;
  display: block;
  padding: 12px 15px;
  border-radius: 12px;
  background: rgba(255,255,255,.038);
  border: 1px solid rgba(255,255,255,.06);
  color: rgba(250,239,214,.88);
  font-weight: 700;
  font-size: 13.5px;
  transition: background .15s, border-color .15s, color .15s, transform .15s var(--ease);
}
.drawerLinks a:hover, .drawer a:hover {
  background: rgba(200,160,60,.12);
  border-color: var(--border);
  color: var(--gold-2);
  transform: translateX(4px);
}
.drawer a[aria-current="page"] {
  background: rgba(200,160,60,.12);
  border-color: var(--border);
  color: var(--gold-2);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   08  HERO (Homepage)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hp-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(560px, calc(100svh - var(--nav-h) - 40px), 900px);
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: #020508;
}

/* Media fills entire hero */
.hp-hero__media {
  position: absolute;
  inset: 0;
}
.hp-hero__media img,
.hp-hero__media video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.heroFallback {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
.heroFallback.active { opacity: 1; }

/* Cinematic overlay */
.hp-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(108deg, rgba(3,5,10,.84) 0%, rgba(3,5,10,.30) 44%, rgba(3,5,10,.20) 100%),
    linear-gradient(180deg, rgba(3,5,10,.04) 0%, rgba(3,5,10,.04) 38%, rgba(3,5,10,.78) 75%, rgba(3,5,10,.97) 100%);
}

/* Text content — compact bottom-left */
.hp-hero__content {
  position: absolute;
  z-index: 10;
  left: max(24px, calc((100vw - min(1220px, 100vw - 56px)) / 2));
  bottom: clamp(80px, 11vh, 136px);
  max-width: min(560px, calc(100vw - 48px));
}
.hp-hero__kicker {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-3);
  margin-bottom: 12px;
}
.hp-hero__kicker::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1.5px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 2px;
}
.hp-hero__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: .94;
  letter-spacing: -.03em;
  color: var(--white);
  text-shadow: 0 10px 36px rgba(0,0,0,.40);
  margin-bottom: 16px;
}
.hp-hero__sub {
  font-size: clamp(14px, 1.2vw, 16px);
  color: rgba(250,239,214,.76);
  line-height: 1.6;
  margin-bottom: 22px;
  max-width: 44ch;
}
.hp-hero__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hp-btn-gold {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--gold-3), var(--gold-2), var(--gold));
  color: #160b00;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .02em;
  box-shadow: 0 10px 32px rgba(200,160,60,.28);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.hp-btn-gold:hover { transform: translateY(-3px); box-shadow: 0 18px 46px rgba(200,160,60,.44); }
.hp-btn-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(230,199,102,.28);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  color: rgba(250,239,214,.88);
  font-weight: 700;
  font-size: 13px;
  transition: border-color .2s, background .2s, transform .2s;
}
.hp-btn-ghost:hover {
  border-color: rgba(230,199,102,.52);
  background: rgba(255,255,255,.10);
  transform: translateY(-2px);
}

/* Ticker / highlight strip at base */
.hp-hero__ticker {
  position: absolute;
  z-index: 10;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(780px, calc(100vw - 20px));
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 26px;
  border-radius: 13px;
  background: linear-gradient(90deg, rgba(5,8,15,.10), rgba(5,8,15,.86) 16%, rgba(5,8,15,.92) 84%, rgba(5,8,15,.10));
  border: 1px solid rgba(230,199,102,.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.hp-hero__ticker .heroUmeedHighlight {
  font-size: clamp(10.5px, 1.5vw, 14.5px);
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--gold-2);
  text-transform: uppercase;
  text-align: center;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   09  HERO SLIDESHOW (JS-driven .heroSlide)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#heroMedia {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;
}
.heroSlide {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity .90s cubic-bezier(.4,0,.2,1);
  will-change: opacity;
}
.heroSlide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}
.heroSlide.is-entering { opacity: 0; z-index: 2; pointer-events: none; }
.heroSlide.is-leaving  { opacity: 0; z-index: 1; pointer-events: none; }
.heroSlideMedia {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1);
  transition: transform 6s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.heroSlide.is-active .heroSlideMedia { transform: scale(1.06); }
.heroSlide.is-entering .heroSlideMedia,
.heroSlide.is-leaving  .heroSlideMedia { transform: scale(1); }

/* Slide dots */
.heroDotRow {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
}
.heroSlideDot {
  width: 8px; height: 8px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.48);
  background: rgba(255,255,255,.22);
  cursor: pointer;
  padding: 0;
  transition: background .24s, width .24s, border-color .24s, transform .24s;
  flex-shrink: 0;
}
.heroSlideDot.is-active {
  width: 24px;
  background: var(--gold-2);
  border-color: rgba(230,199,102,.80);
  transform: scale(1.1);
}
.heroSlideDot:hover:not(.is-active) {
  background: rgba(255,255,255,.50);
  border-color: rgba(255,255,255,.70);
  transform: scale(1.15);
}

/* Orbs */
.heroGoldOrb {
  position: absolute;
  z-index: 4;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(44px);
  mix-blend-mode: screen;
}
.heroGoldOrbOne {
  width: 360px; height: 360px;
  left: 3%; bottom: 14%;
  background: radial-gradient(circle, rgba(200,160,60,.16), rgba(200,160,60,.04));
  animation: orbFloat 9s ease-in-out infinite;
}
.heroGoldOrbTwo {
  width: 280px; height: 280px;
  right: 5%; top: 14%;
  background: radial-gradient(circle, rgba(110,14,27,.24), rgba(110,14,27,.06));
  animation: orbFloat 11s ease-in-out infinite reverse;
}
@keyframes orbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(18px,-22px) scale(1.07); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10  LOGO INTRO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.umeedIntro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 44%, rgba(200,160,60,.20), rgba(110,14,27,.30) 30%, rgba(0,0,0,.97) 70%),
    linear-gradient(135deg, #030101, #1c0405 44%, #040101);
  color: var(--white);
  transition: opacity .6s ease, visibility .6s ease;
}
.umeedIntro.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.umeedIntroShell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(90vw, 480px);
  animation: introRise 1.1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes introRise {
  from { opacity: 0; transform: translateY(28px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.umeedIntroLogoWrap {
  width: clamp(150px, 26vw, 280px);
  aspect-ratio: 1/1.1;
  display: grid;
  place-items: center;
  animation: logoFloat 3.4s ease-in-out infinite;
  position: relative;
}
.umeedIntroLogoWrap::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 999px;
  background: rgba(200,160,60,.20);
  filter: blur(28px);
}
@keyframes logoFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.02); }
}
.umeedIntroLogo {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 18px 52px rgba(0,0,0,.62)) drop-shadow(0 0 24px rgba(200,160,60,.22));
  animation: logoBlurIn 1.2s cubic-bezier(.16,1,.3,1) .2s both;
}
@keyframes logoBlurIn {
  from { opacity: 0; filter: blur(18px); transform: scale(.84); }
  to   { opacity: 1; filter: drop-shadow(0 18px 52px rgba(0,0,0,.62)) drop-shadow(0 0 24px rgba(200,160,60,.22)); transform: none; }
}
.umeedIntroTagline {
  margin-top: 18px;
  font-size: clamp(18px, 4vw, 28px);
  color: var(--gold-2);
  letter-spacing: .07em;
  animation: fadeUp .8s var(--ease) .9s both;
  direction: rtl;
}
.umeedIntroName {
  margin-top: 7px;
  font-size: clamp(12px, 1.7vw, 15px);
  color: rgba(250,239,214,.66);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  animation: fadeUp .8s var(--ease) 1.1s both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11  HOMEPAGE SECTIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Stats strip */
.hp-stats {
  padding: 0;
  background: linear-gradient(90deg, rgba(7,15,28,.98), rgba(10,20,40,.94));
  border-top:    1px solid rgba(200,160,60,.12);
  border-bottom: 1px solid rgba(200,160,60,.08);
}
.hp-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 14px;
  text-align: center;
  border-right: 1px solid rgba(200,160,60,.09);
  transition: background .2s;
}
.hp-stat:last-child { border-right: none; }
.hp-stat:hover { background: rgba(200,160,60,.04); }
.hp-stat strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 900;
  line-height: 1;
  color: var(--white);
}
.hp-stat span {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(200,160,60,.80);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* About section */
.hp-about .aboutGrid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 48px;
  align-items: center;
}
.aboutVisual {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: 400px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.aboutVisual img {
  width: 100%;
  min-height: 400px;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.03);
  transition: transform .5s var(--ease);
  display: block;
}
.aboutVisual:hover img { transform: scale(1.03); }
.aboutVisual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(5,8,15,.60));
  pointer-events: none;
}
.aboutBadge {
  position: absolute;
  left: 18px; bottom: 18px;
  z-index: 2;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(5,8,15,.76);
  border: 1px solid rgba(230,199,102,.28);
  backdrop-filter: blur(14px);
}
.aboutBadge strong { display: block; color: var(--white); font-size: 16px; font-family: 'Playfair Display', serif; }
.aboutBadge span   { display: block; color: var(--gold-2); font-size: 11.5px; font-weight: 700; margin-top: 3px; }
.aboutCopy { padding: 6px 0; }
.aboutCopy h2 { margin-top: 8px; }
.aboutCopy > p { margin-top: 16px; font-size: var(--body-lg); line-height: 1.78; }
.missionGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}
.missionGrid div {
  padding: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--glass);
  transition: border-color .2s;
}
.missionGrid div:hover { border-color: var(--border-2); }
.missionGrid strong { display: block; color: var(--gold-2); font-size: 13.5px; font-weight: 800; margin-bottom: 6px; }
.missionGrid span   { display: block; color: var(--muted); font-size: 13px; line-height: 1.6; }
.hp-about__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* Timings strip */
.timingsStrip {
  background: linear-gradient(90deg, rgba(7,15,28,.98), rgba(10,20,40,.96));
  border-top: 1px solid rgba(200,160,60,.09);
  border-bottom: 1px solid rgba(200,160,60,.09);
  padding: 24px 0;
}
.hp-timings__head { text-align: center; margin-bottom: 16px; }
.timingsGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(200,160,60,.09);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.timingCard {
  background: rgba(6,13,24,.92);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background .2s;
}
.timingCard:hover { background: rgba(10,22,40,.96); }
.timingCard:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.timingCard:last-child  { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.timingIcon  { font-size: 22px; margin-bottom: 4px; }
.timingLabel { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(200,160,60,.80); }
.timingValue { font-size: 15px; font-weight: 700; color: var(--white); line-height: 1.3; }
.timingNote  { font-size: 11.5px; color: rgba(165,152,128,.80); margin-top: 2px; }

/* Notices */
.hp-notices { overflow: hidden; }
.hp-notices__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.hp-notices__head h2 { margin-top: 8px; }
.hp-notices__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.notice-modal { display: none; } /* suppress popup globally */
.notice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.notice-grid .notice {
  padding: 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: linear-gradient(145deg, rgba(10,18,34,.92), rgba(110,14,27,.18));
  transition: transform .22s var(--ease), border-color .22s, box-shadow .22s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.notice-grid .notice:hover {
  transform: translateY(-4px);
  border-color: var(--border-2);
  box-shadow: var(--shadow-md);
}
.notice-grid .notice h4, .notice-grid .notice .title {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  color: var(--white);
  margin: 0 0 6px;
  line-height: 1.3;
}
.notice-grid .notice .date {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .10em;
  color: rgba(200,160,60,.80);
  margin-bottom: 8px;
}
.notice-grid .notice p, .notice-grid .notice .body {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
.notice-badge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(110,14,27,.50);
  border: 1px solid var(--border);
  color: var(--gold-2);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.notice-image-wrap { margin: 10px 0; border-radius: 10px; overflow: hidden; max-height: 170px; }
.notice-image { width: 100%; height: 170px; object-fit: cover; display: block; }

/* Programs */
.programGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.programCard {
  position: relative;
  min-height: 220px;
  padding: 24px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: linear-gradient(152deg, rgba(10,18,34,.94), rgba(110,14,27,.34));
  overflow: hidden;
  transition: transform .26s var(--ease), border-color .26s, box-shadow .26s;
  cursor: default;
}
.programCard::after {
  content: '';
  position: absolute;
  right: -28%; bottom: -32%;
  width: 160px; height: 160px;
  border-radius: 999px;
  background: rgba(200,160,60,.09);
  filter: blur(16px);
  pointer-events: none;
}
.programCard:hover {
  transform: translateY(-6px);
  border-color: var(--border-2);
  box-shadow: var(--shadow-md);
}
.programCard > span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  color: rgba(230,199,102,.50);
  text-transform: uppercase;
}
.programCard h3 {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: var(--white);
  margin-top: 18px;
  line-height: 1.15;
}
.programCard p  { margin-top: 9px; font-size: 13.5px; color: var(--muted); line-height: 1.65; }
.programCard.featured {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(20,52,38,.86), rgba(110,14,27,.54));
  border-color: rgba(200,160,60,.28);
}
.programCard.featured h3 { color: var(--gold-2); }

/* Why UMEED */
.whyWrap {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 44px;
  align-items: start;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: linear-gradient(145deg, rgba(9,17,32,.92), rgba(5,8,15,.80));
  box-shadow: var(--shadow-md);
}
.whyIntro { position: sticky; top: calc(var(--nav-h) + 24px); }
.whyIntro h2 { margin-top: 8px; }
.whyIntro > p { margin-top: 14px; font-size: var(--body-lg); line-height: 1.75; }
.whyIntro > .primaryCta { margin-top: 22px; display: inline-flex; }
.whyGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.whyGrid article {
  padding: 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--glass);
  transition: transform .22s var(--ease), border-color .22s;
}
.whyGrid article:hover { transform: translateY(-4px); border-color: var(--border-2); }
.whyGrid strong { display: block; color: var(--gold-2); font-size: 14px; font-weight: 800; margin-bottom: 6px; }
.whyGrid span   { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.65; }

/* Gallery */
.albumGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.albumCard {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  background: linear-gradient(145deg, rgba(12,22,42,.92), rgba(110,14,27,.54));
  transition: transform .26s var(--ease), border-color .26s, box-shadow .26s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.albumCard:hover { transform: translateY(-6px); border-color: rgba(230,199,102,.56); box-shadow: var(--shadow-md); }
.albumCard img { height: 142px; width: 100%; object-fit: cover; transition: transform .4s ease; flex-shrink: 0; }
.albumCard:hover img { transform: scale(1.06); }
.albumCard div { padding: 13px 14px; }
.albumCard strong { display: block; color: var(--gold-2); font-size: 13px; font-weight: 800; }
.albumCard span   { display: block; color: rgba(250,239,214,.56); font-size: 11.5px; margin-top: 3px; line-height: 1.4; }

/* Album modal */
.albumModal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; }
.albumModal.open { display: flex; }
.albumBackdrop { position: absolute; inset: 0; background: rgba(0,0,0,.80); backdrop-filter: blur(16px); cursor: pointer; }
.albumPanel {
  position: relative;
  width: min(1020px, 96vw);
  height: min(700px, 88dvh);
  border-radius: var(--r-xl);
  border: 1px solid rgba(230,199,102,.28);
  background: linear-gradient(145deg, rgba(110,14,27,.97), rgba(8,13,24,.99));
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.albumTop { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.albumTop small { color: var(--gold-2); font-size: 10px; text-transform: uppercase; letter-spacing: .16em; font-weight: 900; }
.albumTop h3 { margin-top: 2px; color: var(--white); font-size: 19px; }
.albumTop button { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--border); background: var(--glass); color: var(--white); font-size: 22px; line-height: 1; cursor: pointer; }
.albumBody { min-height: 0; flex: 1; display: grid; grid-template-columns: 270px 1fr; }
.thumbRail { overflow-y: auto; padding: 13px; border-right: 1px solid var(--border); }
.thumbItem { width: 100%; height: 104px; margin-bottom: 9px; border: 1.5px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; background: #020408; padding: 0; cursor: pointer; transition: border-color .18s; display: block; }
.thumbItem img { width: 100%; height: 100%; object-fit: cover; }
.thumbItem.active, .thumbItem:hover { border-color: var(--gold-2); }
.thumbItem.active { box-shadow: 0 0 0 2px rgba(230,199,102,.18); }
.largePreview { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; background: rgba(2,4,9,.80); }
.largePreview img { max-width: 100%; max-height: calc(88dvh - 150px); object-fit: contain; border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.largePreview p { color: var(--gold-2); font-weight: 800; margin-top: 12px; text-align: center; font-size: 13.5px; }

/* Admission CTA */
.admissionCta { padding: clamp(52px, 7vw, 80px) 0; }
.admissionBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(12,22,42,.96), rgba(110,14,27,.52));
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.admissionBox::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 90% 50%, rgba(200,160,60,.09), transparent 55%); pointer-events: none; }
.admissionBox h2 { margin-top: 8px; }
.admissionBox p  { margin-top: 10px; font-size: var(--body-lg); max-width: 56ch; }
.ctaStack { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.ctaStack .primaryCta, .ctaStack .secondaryCta { width: 100%; min-width: 180px; justify-content: center; min-height: 46px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12  INNER PAGE HERO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pageHero {
  padding: clamp(72px, 10vw, 100px) 0 clamp(32px, 4vw, 48px);
  position: relative;
  overflow: hidden;
}
.pageHero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 800px 440px at 65% 0%, rgba(110,14,27,.15), transparent 52%),
    radial-gradient(ellipse 600px 320px at 8% 60%, rgba(200,160,60,.05), transparent 50%);
  pointer-events: none;
}
.pageHero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 28px;
  align-items: center;
}
.pageHero h1 {
  font-size: clamp(34px, 4.8vw, 62px);
  line-height: .96;
  margin-top: 12px;
}
.pageHero p {
  margin-top: 14px;
  font-size: var(--body-lg);
  line-height: 1.78;
  max-width: 60ch;
}
.badgeRow { display: flex; gap: 8px; flex-wrap: wrap; }
.badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass);
  color: rgba(250,239,214,.80);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  transition: border-color .18s, background .18s;
}
.badge:hover { border-color: var(--border-2); background: rgba(200,160,60,.09); }
.heroCard {
  padding: 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: linear-gradient(145deg, var(--surface-1), rgba(110,14,27,.22));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md);
}
.heroCard .tiny { font-size: 11px; color: var(--gold-2); font-weight: 800; letter-spacing: .10em; text-transform: uppercase; }
.ctaRow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.tiny { font-size: 12.5px; color: var(--muted); line-height: 1.72; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13  CARDS & PANELS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.card {
  padding: 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: linear-gradient(145deg, rgba(10,18,34,.92), rgba(110,14,27,.16));
  box-shadow: var(--shadow-sm);
  transition: transform .24s var(--ease), border-color .24s, box-shadow .24s;
  position: relative;
  overflow: hidden;
}
.card::after {
  content: '';
  position: absolute;
  right: -26%; bottom: -30%;
  width: 150px; height: 150px;
  border-radius: 999px;
  background: rgba(200,160,60,.07);
  filter: blur(14px);
  pointer-events: none;
}
.card:hover { transform: translateY(-5px); border-color: var(--border-2); box-shadow: var(--shadow-md); }
.card h3 { font-family: 'Playfair Display', serif; font-size: 18px; color: var(--white); margin: 14px 0 8px; }
.card h4 { font-family: 'Playfair Display', serif; font-size: 15.5px; color: var(--white); margin: 10px 0 6px; }
.card p  { font-size: 13.5px; line-height: 1.70; }
.card .icon {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(200,160,60,.18), rgba(110,14,27,.18));
  border: 1px solid var(--border);
  font-size: 20px;
}

/* Span helpers (12-col grid) */
.grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 14px; }
.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }
.span-12 { grid-column: span 12; }

.panel {
  padding: clamp(22px, 3.2vw, 36px);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: linear-gradient(145deg, rgba(10,18,34,.92), rgba(5,8,15,.82));
  box-shadow: var(--shadow-md);
}
.highlight {
  border-radius: var(--r-lg);
  border: 1px solid rgba(176,141,87,.30);
  background: linear-gradient(150deg, rgba(176,141,87,.12), rgba(0,0,0,.08));
  padding: 26px;
}
.sectionTitle { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.sectionTitle h2, .sectionTitle h3 { margin: 0; font-size: clamp(22px, 2.8vw, 34px); }
.sectionTitle p { margin: 6px 0 0; font-size: var(--body); max-width: 60ch; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }

/* Steps */
.stepGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.step {
  padding: 22px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: linear-gradient(145deg, rgba(10,18,34,.92), rgba(110,14,27,.14));
  transition: transform .24s var(--ease), border-color .24s, box-shadow .24s;
  position: relative;
  overflow: hidden;
}
.step:hover { transform: translateY(-5px); border-color: var(--border-2); box-shadow: var(--shadow-md); }
.step .num {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold-3), var(--gold));
  color: #160b00;
  font-weight: 900;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 5px 18px rgba(200,160,60,.24);
}
.step h4 { font-family: 'Playfair Display', serif; font-size: 17px; color: var(--white); margin: 0 0 7px; }
.step p  { color: var(--muted); font-size: 13.5px; line-height: 1.65; margin: 0; }

/* Tables */
.tableWrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: rgba(7,13,26,.80);
  backdrop-filter: blur(12px);
}
table.premiumTable, table.feeTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
table.premiumTable th, table.feeTable th {
  padding: 13px 16px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(200,160,60,.78);
  border-bottom: 1px solid rgba(200,160,60,.12);
  text-align: left;
  background: rgba(10,18,34,.70);
}
table.premiumTable td, table.feeTable td {
  padding: 13px 16px;
  font-size: 13.5px;
  color: rgba(250,239,214,.82);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
table.premiumTable tr:last-child td, table.feeTable tr:last-child td { border-bottom: none; }
table.premiumTable tr:hover td, table.feeTable tr:hover td { background: rgba(200,160,60,.04); }
.feeAmount { font-weight: 800; color: rgba(230,199,102,.92); }
.feeHigh   { font-weight: 900; color: var(--white); }
.levelName { display: block; font-weight: 700; color: var(--white); font-size: 14px; }
.levelSub  { display: block; font-size: 11.5px; color: rgba(165,152,128,.70); margin-top: 2px; }

/* Admissions specific */
.feeNote {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 18px; padding: 13px 17px;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: rgba(200,160,60,.06);
  font-size: 13px; color: rgba(250,239,214,.78); line-height: 1.65;
}
.feeNote strong { color: var(--gold-2); flex-shrink: 0; }
.feeInfoGrid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.feeInfoCard  { padding: 20px; border-radius: var(--r-md); border: 1px solid var(--border); background: linear-gradient(145deg, rgba(10,18,34,.90), rgba(110,14,27,.14)); transition: transform .22s var(--ease), border-color .22s; }
.feeInfoCard:hover { transform: translateY(-4px); border-color: var(--border-2); }
.feeInfoCard h4 { font-size: 13.5px; font-weight: 800; color: var(--gold-2); margin: 0 0 9px; }
.feeInfoCard p, .feeInfoCard li { font-size: 13px; color: var(--muted); line-height: 1.72; margin: 0; }
.feeInfoCard ul { padding-left: 15px; margin: 0; }
.feeInfoCard ul li { margin-bottom: 4px; }
.docGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.docCard { display: flex; gap: 13px; align-items: flex-start; padding: 17px 18px; border-radius: var(--r-md); border: 1px solid var(--border); background: linear-gradient(145deg, rgba(10,18,34,.90), rgba(110,14,27,.13)); transition: transform .22s var(--ease), border-color .22s; }
.docCard:hover { transform: translateY(-4px); border-color: var(--border-2); }
.docCheck { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 19px; border-radius: 12px; background: linear-gradient(135deg, rgba(200,160,60,.18), rgba(110,14,27,.18)); border: 1px solid var(--border); }
.docTitle { font-weight: 800; color: var(--white); font-size: 13.5px; margin-bottom: 4px; }
.docDesc  { font-size: 12.5px; color: var(--muted); line-height: 1.58; }
.docOptional { display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 999px; background: rgba(200,160,60,.09); border: 1px solid var(--border); color: rgba(200,160,60,.80); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; }
.pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--glass); font-size: 13px; font-weight: 600; color: rgba(250,239,214,.80); transition: border-color .18s, background .18s; }
.pill b { color: var(--gold-2); }
a.pill:hover, .pill:hover { border-color: var(--border-2); background: rgba(200,160,60,.08); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14  BUTTONS & CTAs
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.primaryCta, .btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--gold-3), var(--gold-2), var(--gold));
  color: #160b00;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .02em;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 26px rgba(200,160,60,.26);
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s;
  text-decoration: none;
}
.primaryCta::after {
  content: '';
  position: absolute;
  inset: -80% auto -80% -50%;
  width: 40%;
  transform: rotate(14deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.44), transparent);
  animation: shimmerCta 5s ease-in-out infinite;
}
@keyframes shimmerCta {
  0%,52%  { left: -55%; opacity: 0; }
  64%     { opacity: .9; }
  78%,100%{ left: 125%; opacity: 0; }
}
.primaryCta:hover, .btn.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(200,160,60,.40);
}
.secondaryCta, .btn:not(.btn-primary):not(.hamb) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--cream);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  transition: transform .2s var(--ease), border-color .2s, background .2s;
  text-decoration: none;
}
.secondaryCta:hover, .btn:not(.btn-primary):not(.hamb):hover {
  transform: translateY(-2px);
  border-color: var(--border-2);
  background: rgba(200,160,60,.09);
}
.btn.full, .primaryCta.full { width: 100%; }
.btn.btn-secondary { background: rgba(110,14,27,.22); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   15  FORMS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.inquirySection { overflow: hidden; }
.inquiryGrid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 28px;
  padding: clamp(26px, 4vw, 48px);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(10,18,34,.92), rgba(5,8,15,.82));
  box-shadow: var(--shadow-md);
}
.inquiryText h2 { margin-top: 8px; }
.inquiryText p  { margin-top: 12px; font-size: var(--body-lg); line-height: 1.75; }
.contactPills   { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.contactPills a {
  padding: 10px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--glass);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cream);
  transition: border-color .18s, background .18s, color .18s;
}
.contactPills a:hover { border-color: var(--border-2); background: rgba(200,160,60,.09); color: var(--gold-2); }
.mapCard {
  grid-column: 1 / -1;
  padding: 20px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(10,18,34,.70), rgba(20,50,38,.44));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.mapCard strong { color: var(--white); font-size: 14.5px; }
.mapCard span   { color: var(--muted); font-size: 13px; line-height: 1.55; display: block; margin-top: 3px; }
.mapCard a      { padding: 9px 16px; border-radius: 999px; background: rgba(200,160,60,.11); border: 1px solid var(--border); font-weight: 800; font-size: 12.5px; color: var(--gold-2); white-space: nowrap; transition: background .18s; }
.mapCard a:hover { background: rgba(200,160,60,.22); }
.inquiryForm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.inquiryForm label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.inquiryForm input, .inquiryForm textarea, .inquiryForm select {
  width: 100%;
  border: 1px solid rgba(200,160,60,.20);
  border-radius: var(--r-sm);
  background: rgba(3,6,12,.62);
  color: var(--cream);
  padding: 12px 14px;
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.inquiryForm input:focus, .inquiryForm textarea:focus, .inquiryForm select:focus {
  border-color: rgba(200,160,60,.52);
  box-shadow: 0 0 0 4px rgba(200,160,60,.09);
}
.inquiryForm input::placeholder, .inquiryForm textarea::placeholder { color: rgba(165,152,128,.46); }
.inquiryForm textarea { resize: vertical; min-height: 96px; }
.inquiryForm .full   { grid-column: 1 / -1; }
.inquiryForm .primaryCta.full { display: flex; width: 100%; justify-content: center; min-height: 48px; font-size: 14px; margin-top: 2px; }
.is-invalid { border-color: rgba(220,60,60,.80) !important; box-shadow: 0 0 0 4px rgba(220,60,60,.09) !important; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(16px); z-index: 2800; padding: 12px 22px; border-radius: 999px; background: linear-gradient(135deg, rgba(12,22,40,.97), rgba(76,10,17,.95)); border: 1px solid var(--border); color: var(--cream); font-size: 14px; font-weight: 700; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity .28s, transform .28s; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Admission process */
.admissionsProcess { overflow: hidden; }
.admissionProcessCard { padding: clamp(26px, 4vw, 44px); border-radius: var(--r-xl); border: 1px solid var(--border); background: linear-gradient(145deg, rgba(10,18,34,.94), rgba(5,8,15,.82)); }
.admissionProcessCard h2 { margin-top: 8px; }
.admissionProcessCard p  { margin-top: 10px; font-size: var(--body-lg); line-height: 1.75; }
.stepsGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }
.stepsGrid article { padding: 22px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--glass); transition: transform .22s var(--ease), border-color .22s; }
.stepsGrid article:hover { transform: translateY(-4px); border-color: var(--border-2); }
.stepsGrid span { display: inline-flex; width: 36px; height: 36px; border-radius: 11px; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--gold-3), var(--gold)); color: #160b00; font-weight: 900; font-size: 15px; margin-bottom: 13px; }
.stepsGrid strong { display: block; color: var(--white); font-size: 14.5px; font-weight: 800; margin-bottom: 6px; }
.stepsGrid small  { display: block; color: var(--muted); font-size: 13px; line-height: 1.62; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   16  NOTICE SYSTEM
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.noticeSectionHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.notice-link { display: inline-flex; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
.notice-modal[hidden], .notice-modal { display: none; } /* always hidden */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   17  LIGHTBOX
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#lightbox { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.82); backdrop-filter: blur(18px); }
#lightbox.open { display: flex; }
#lightbox .panel { width: min(1060px,92vw); border-radius: var(--r-xl); overflow: hidden; border: 1px solid rgba(255,255,255,.10); box-shadow: var(--shadow-lg); background: rgba(6,10,16,.58); padding: 0; }
#lightbox .bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 17px; border-bottom: 1px solid var(--border); }
#lightbox #lbTitle { font-weight: 700; font-size: 13px; color: var(--cream); }
#lightbox #lbClose { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--glass); color: var(--cream); cursor: pointer; font-size: 12.5px; font-weight: 700; transition: background .18s; }
#lightbox #lbClose:hover { background: rgba(200,160,60,.12); }
#lightbox #lbImg { max-width: 100%; max-height: 72dvh; object-fit: contain; display: block; margin: 0 auto; padding: 16px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   18  FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.umeed-footer {
  padding: 64px 0 0;
  background: linear-gradient(180deg, #05101e 0%, #020406 100%);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.umeed-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,199,102,.36) 28%, rgba(230,199,102,.58) 50%, rgba(230,199,102,.36) 72%, transparent);
}
.umeed-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 580px 240px at 16% 0%, rgba(110,14,27,.08), transparent 56%),
    radial-gradient(ellipse 460px 180px at 84% 0%, rgba(200,160,60,.04), transparent 52%);
  pointer-events: none;
}
.uf-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px 32px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.uf-brand { display: flex; gap: 14px; align-items: flex-start; }
.uf-logo {
  width: 52px; height: 52px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(10,18,34,.72);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 7px 24px rgba(0,0,0,.30);
  position: relative;
}
.uf-logo img { width: 76%; height: 76%; object-fit: contain; }
.uf-brand-text > strong { display: block; font-size: 14px; font-weight: 900; color: var(--white); letter-spacing: .04em; margin-bottom: 4px; }
.uf-brand-text > span   { display: block; font-size: 12px; color: rgba(165,152,128,.72); line-height: 1.85; }
.uf-tagline { font-style: italic; color: rgba(200,160,60,.58) !important; font-size: 11px !important; margin-top: 2px; }
.uf-social { display: flex; gap: 8px; margin-top: 15px; }
.uf-social a {
  width: 36px; height: 36px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--glass);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(250,239,214,.62);
  transition: background .18s, border-color .18s, color .18s, transform .18s var(--ease);
}
.uf-social a:hover { background: rgba(200,160,60,.14); border-color: var(--border-2); color: var(--gold-2); transform: translateY(-3px); }
.uf-col h4 {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(200,160,60,.78);
  margin: 0 0 16px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(200,160,60,.11);
}
.uf-col a {
  display: block;
  font-size: 13px;
  color: rgba(165,152,128,.72);
  line-height: 2.05;
  transition: color .18s, padding-left .18s;
}
.uf-col a:hover { color: var(--gold-2); padding-left: 4px; }
.uf-address { font-size: 12px; color: rgba(165,152,128,.54); line-height: 1.78; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.04); }
.uf-bottom {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 44px; padding: 18px 0 26px;
  border-top: 1px solid rgba(255,255,255,.05);
  position: relative; z-index: 1;
}
.uf-bottom span { font-size: 12px; color: rgba(250,239,214,.28); letter-spacing: .04em; }
.uf-dot { opacity: .28; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   19  FLOATING ELEMENTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.waFloat {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 900;
  width: 54px; height: 54px;
  border-radius: 17px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 40px rgba(37,211,102,.28);
  transition: transform .22s var(--ease-bounce), box-shadow .22s;
  text-decoration: none;
}
.waFloat:hover { transform: scale(1.10) translateY(-3px); box-shadow: 0 18px 52px rgba(37,211,102,.42); }
.waLabel { display: none; }

.u-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2.5px;
  width: var(--u-scroll, 0%);
  background: linear-gradient(90deg, var(--maroon), var(--gold-2), var(--gold));
  z-index: 9999;
  pointer-events: none;
  transition: width .08s linear;
  box-shadow: 0 0 7px rgba(200,160,60,.34);
}
.u-back-top {
  position: fixed;
  right: 18px; bottom: 80px;
  z-index: 800;
  width: 42px; height: 42px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: rgba(5,8,15,.88);
  backdrop-filter: blur(12px);
  color: var(--gold-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transform: translateY(12px);
  transition: opacity .26s, transform .26s var(--ease), background .18s, border-color .18s;
  box-shadow: var(--shadow-sm);
}
.u-back-top.visible { opacity: 1; pointer-events: auto; transform: none; }
.u-back-top:hover   { background: rgba(10,18,34,.96); border-color: var(--border-2); transform: translateY(-3px); }
.u-back-top svg { width: 17px; height: 17px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   20  ANIMATIONS & REVEALS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
main { animation: pageIn .5s var(--ease) both; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .72s var(--ease), transform .72s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.premiumReveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.premiumReveal.is-visible { opacity: 1; transform: none; }

/* Stagger children */
.card.reveal:nth-child(2), .step.reveal:nth-child(2) { transition-delay: .08s; }
.card.reveal:nth-child(3), .step.reveal:nth-child(3) { transition-delay: .16s; }
.card.reveal:nth-child(4), .step.reveal:nth-child(4) { transition-delay: .24s; }

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04));
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

/* Sectionglow (ambient) */
.sectionGlow { display: none; } /* removed performance cost */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .premiumReveal, .reveal { opacity: 1 !important; transform: none !important; }
  .heroSlide.is-active .heroSlideMedia { transform: none !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   21  RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 1440px+ */
@media (min-width: 1440px) {
  :root { --container: 1320px; --nav-h: 66px; }
  .hp-hero { height: clamp(660px, calc(100svh - 80px), 980px); }
  .hp-hero__title { font-size: clamp(54px, 4.6vw, 84px); }
  .uf-grid { gap: 52px 40px; }
}

/* 1060px compact desktop */
@media (max-width: 1060px) {
  :root { --nav-h: 58px; }
  .desktopMenu, nav.menu { display: none; }
  .menuBtn, .actions .btn.hamb { display: inline-flex; }
  .brandText, .brandSub { display: none; }
  .hp-hero__content { left: 18px; max-width: calc(100vw - 36px); }
  .hp-about .aboutGrid { grid-template-columns: 1fr; gap: 28px; }
  .whyWrap { grid-template-columns: 1fr; gap: 28px; }
  .whyIntro { position: static; }
  .programGrid { grid-template-columns: repeat(2, 1fr); }
  .programCard.featured { grid-column: span 2; }
  .albumGrid { grid-template-columns: repeat(3, 1fr); }
  .stepsGrid, .admissionProcessCard .stepsGrid { grid-template-columns: repeat(2, 1fr); }
  .notice-grid { grid-template-columns: repeat(2, 1fr); }
  .pageHero .container { grid-template-columns: 1fr; }
  .heroCard { display: none; }
  .feeInfoGrid { grid-template-columns: 1fr 1fr; }
  .uf-grid { grid-template-columns: 1fr 1fr 1fr; gap: 28px; }
  .uf-brand { grid-column: 1 / -1; padding-bottom: 22px; border-bottom: 1px solid rgba(200,160,60,.09); }
}

/* 860px tablet */
@media (max-width: 860px) {
  :root { --section-py: clamp(44px, 6vw, 64px); }
  .hp-hero { height: clamp(520px, 76vw, 680px); }
  .hp-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .hp-stat { border-right: none; border-bottom: 1px solid rgba(200,160,60,.09); }
  .hp-stat:nth-child(odd)       { border-right: 1px solid rgba(200,160,60,.09); }
  .hp-stat:nth-last-child(-n+2) { border-bottom: none; }
  .timingsGrid { grid-template-columns: repeat(2, 1fr); }
  .timingCard:first-child { border-radius: var(--r-lg) 0 0 0; }
  .timingCard:nth-child(2){ border-radius: 0 var(--r-lg) 0 0; }
  .timingCard:nth-child(3){ border-radius: 0 0 0 var(--r-lg); }
  .timingCard:last-child  { border-radius: 0 0 var(--r-lg) 0; }
  .albumGrid { grid-template-columns: repeat(2, 1fr); }
  .admissionBox { flex-direction: column; align-items: flex-start; }
  .ctaStack { flex-direction: row; width: 100%; }
  .ctaStack .primaryCta, .ctaStack .secondaryCta { flex: 1; }
  .inquiryGrid { grid-template-columns: 1fr; }
  .inquiryForm { grid-template-columns: 1fr; }
  .whyGrid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .missionGrid { grid-template-columns: 1fr; }
  .docGrid { grid-template-columns: 1fr; }
  .albumBody { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .thumbRail { display: flex; gap: 9px; overflow-x: auto; overflow-y: hidden; border-right: none; border-bottom: 1px solid var(--border); padding: 10px 13px; }
  .thumbItem  { min-width: 100px; width: 100px; height: 76px; margin-bottom: 0; }
  .uf-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* 680px mobile */
@media (max-width: 680px) {
  :root { --nav-h: 56px; --gutter: 14px; }
  .navInner, .navbar { width: calc(100vw - 14px); gap: 7px; }
  .brand img, .brandMark { width: 34px; height: 34px; border-radius: 9px; }
  .applyBtn { height: 34px; padding: 0 13px; font-size: 12px; }
  .menuBtn, .actions .btn.hamb { width: 36px; height: 36px; font-size: 17px; }
  .notice-bell, .header-bell { width: 36px; height: 36px; }

  .hp-hero { height: calc(100svh - var(--nav-h)); min-height: 530px; max-height: 740px; }
  .hp-hero__shade {
    background:
      linear-gradient(180deg, rgba(3,5,10,.06) 0%, rgba(3,5,10,.05) 36%, rgba(3,5,10,.86) 100%),
      linear-gradient(90deg, rgba(3,5,10,.36), rgba(3,5,10,.08));
  }
  .hp-hero__content { left: 14px; right: 14px; bottom: 68px; max-width: none; }
  .hp-hero__title { font-size: clamp(30px, 8.2vw, 44px); }
  .hp-hero__sub   { display: none; }
  .hp-hero__actions { gap: 8px; }
  .hp-btn-gold, .hp-btn-ghost { min-height: 42px; padding: 0 17px; font-size: 12.5px; }
  .hp-hero__ticker { bottom: 12px; width: calc(100vw - 16px); border-radius: 11px; min-height: 38px; }
  .hp-hero__ticker .heroUmeedHighlight { font-size: 10.5px; letter-spacing: .04em; }
  .heroDotRow { bottom: 58px; }

  .hp-stats__grid { grid-template-columns: repeat(4, 1fr); }
  .hp-stat { padding: 13px 7px; border-right: 1px solid rgba(200,160,60,.09); border-bottom: none; }
  .hp-stat:last-child { border-right: none; }
  .hp-stat:nth-last-child(-n+2) { border-bottom: none; }
  .hp-stat strong { font-size: clamp(22px, 5vw, 30px); }
  .hp-stat span   { font-size: 9px; }

  .programGrid { grid-template-columns: 1fr; }
  .programCard.featured { grid-column: auto; }
  .whyGrid     { grid-template-columns: 1fr; }
  .whyWrap     { padding: 20px; gap: 22px; }
  .albumGrid   { grid-template-columns: 1fr 1fr; }
  .notice-grid { grid-template-columns: 1fr; }
  .timingsGrid { grid-template-columns: 1fr 1fr; }
  .timingCard:first-child, .timingCard:nth-child(2), .timingCard:nth-child(3), .timingCard:last-child { border-radius: 0; }
  .timingCard:first-child { border-radius: var(--r-lg) 0 0 0; }
  .timingCard:nth-child(2){ border-radius: 0 var(--r-lg) 0 0; }
  .timingCard:nth-child(3){ border-radius: 0 0 0 var(--r-lg); }
  .timingCard:last-child  { border-radius: 0 0 var(--r-lg) 0; }
  .stepsGrid   { grid-template-columns: 1fr 1fr; }
  .admissionBox { border-radius: var(--r-lg); padding: 20px; gap: 18px; }
  .admissionBox h2 { font-size: clamp(22px, 6vw, 30px); }
  .ctaStack { flex-direction: column; }
  .ctaStack .primaryCta, .ctaStack .secondaryCta { width: 100%; }
  .inquiryGrid { padding: 20px; border-radius: var(--r-lg); }
  .mapCard { flex-direction: column; align-items: flex-start; }
  .feeInfoGrid { grid-template-columns: 1fr; }
  .pageHero h1 { font-size: clamp(28px, 8vw, 40px); }
  .uf-grid { grid-template-columns: 1fr; gap: 22px; }
  .uf-brand { border-bottom: 1px solid rgba(200,160,60,.09); padding-bottom: 20px; }
  .umeed-footer { padding-top: 42px; }
  .uf-bottom { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 30px; padding-bottom: 22px; }
  .uf-dot { display: none; }
  .waFloat { right: 12px; bottom: 12px; width: 50px; height: 50px; border-radius: 15px; }
  .u-back-top { right: 12px; bottom: 70px; width: 38px; height: 38px; border-radius: 11px; }
  .albumModal { padding: 10px; }
  .albumPanel { border-radius: var(--r-lg); width: 98vw; }
  .largePreview img { max-height: 44dvh; }
  .thumbItem { min-width: 88px; width: 88px; height: 68px; }
  .span-4, .span-5, .span-6, .span-7 { grid-column: span 12; }
}

/* 420px small mobile */
@media (max-width: 420px) {
  :root { --nav-h: 52px; }
  .navInner, .navbar { gap: 5px; }
  .brand img, .brandMark { width: 30px; height: 30px; }
  .applyBtn { height: 32px; padding: 0 10px; font-size: 11.5px; }
  .menuBtn, .actions .btn.hamb { width: 33px; height: 33px; font-size: 16px; }
  .hp-hero { min-height: 510px; }
  .hp-hero__title { font-size: clamp(26px, 7.5vw, 32px); }
  .albumGrid { grid-template-columns: 1fr; }
  .stepsGrid { grid-template-columns: 1fr; }
  .timingsGrid { grid-template-columns: 1fr; }
  .timingCard, .timingCard:first-child, .timingCard:nth-child(2), .timingCard:nth-child(3), .timingCard:last-child { border-radius: 0; }
  .timingsGrid { background: var(--border); }
  .timingCard:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .timingCard:last-child  { border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .admissionBox { padding: 16px; }
  .inquiryGrid  { padding: 15px; }
  .whyGrid { grid-template-columns: 1fr; }
}

/* Print */
@media print {
  header.nav, .siteNav, .waFloat, .u-back-top,
  .u-scroll-progress, .u-announcement,
  .umeedIntro, .drawer, .scrim,
  .drawerScrim, .mobileDrawer { display: none !important; }
  body { background: #fff !important; color: #111 !important; }
}

/* UMEED premium responsive hardening, added 2026-06-24 */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{overflow-x:hidden;}
img,svg,video,canvas{max-width:100%;height:auto;}
h1,h2,h3,h4,p,a,button,label,input,textarea,select,td,th,.brandText,.badge,.btn,.pill{overflow-wrap:anywhere;word-break:normal;}
.pageHero h1,.sectionTitle h2,.sectionTitle h3{line-height:1.04;text-wrap:balance;}
.pageHero p,.sectionTitle p,.card p{line-height:1.72;}
.grid,.formGrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:start;}
.col-12{grid-column:span 12}.col-6{grid-column:span 6}.col-4{grid-column:span 4}.col-3{grid-column:span 3}
.card{min-width:0;overflow:hidden;}
.field{min-width:0;position:relative;}
.field input,.field select,.field textarea{width:100%;max-width:100%;min-width:0;min-height:48px;border-radius:16px;}
.field textarea{min-height:124px;resize:vertical;}
.formActions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px;}
.formActions .btn{min-width:180px;justify-content:center;}
#admissionForm{position:relative;}
#admissionForm .visit-campus-inline{border:1px solid rgba(227,194,111,.25);background:linear-gradient(135deg,rgba(227,194,111,.13),rgba(255,255,255,.045));border-radius:18px;padding:13px 15px;margin-bottom:16px;line-height:1.55;}
#admissionForm .field label{display:block;margin-bottom:7px;font-weight:850;letter-spacing:.015em;color:rgba(255,248,233,.86);}
#admissionForm .field input,#admissionForm .field select,#admissionForm .field textarea{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.075);color:#fff7e8;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;}
#admissionForm .field input:focus,#admissionForm .field select:focus,#admissionForm .field textarea:focus{outline:none;border-color:rgba(227,194,111,.72);box-shadow:0 0 0 4px rgba(227,194,111,.14);background:rgba(255,255,255,.105);}
#admissionForm .field input::placeholder,#admissionForm .field textarea::placeholder{color:rgba(255,246,226,.42);}
#admissionForm .is-invalid{border-color:#ff6b6b!important;box-shadow:0 0 0 4px rgba(255,107,107,.14)!important;}
.tableWrap{overflow:auto;-webkit-overflow-scrolling:touch;}
.premiumTable,.feeTable{min-width:720px;}
@media(max-width:860px){
  .grid,.formGrid{grid-template-columns:1fr;gap:14px;}
  .span-4,.span-5,.span-6,.span-7,.col-3,.col-4,.col-6,.col-12{grid-column:1/-1!important;}
  .pageHero .container,.section .container{width:min(100% - 24px,1180px);}
  .ctaRow{display:grid!important;grid-template-columns:1fr;gap:10px;}
  .ctaRow .btn,.formActions .btn{width:100%;min-width:0;}
  .card{border-radius:22px;padding:20px;}
  #admissionForm .field input,#admissionForm .field select,#admissionForm .field textarea{font-size:16px;}
}
@media(max-width:430px){
  .u-announcement{font-size:12px;line-height:1.45;padding:8px 10px;}
  .brandText{font-size:13px;line-height:1.08;}
  .pageHero{padding-top:38px;padding-bottom:42px;}
  .pageHero h1{font-size:clamp(30px,10vw,38px);}
  .section{padding:38px 0;}
  .card{padding:16px;border-radius:20px;}
  .badgeRow{gap:6px;}
  .badge{font-size:11px;padding:6px 9px;}
  .formActions{gap:9px;}
}

/* =========================================================
   UMEED MARKET READY RESPONSIVE HARDENING
   Prevents text overflow, broken cards, and mobile spreading.
   ========================================================= */
html{overflow-x:hidden}body{overflow-x:hidden}.container{width:min(1180px,calc(100% - 32px));margin-inline:auto}.grid,.cards,.formGrid,.form-grid{min-width:0}.card,.heroCard,.step,.tableWrap,.premiumTable,.feeTable{min-width:0;max-width:100%;overflow-wrap:anywhere}img,video,iframe{max-width:100%;height:auto}table{width:100%;border-collapse:collapse}.tableWrap{overflow-x:auto;-webkit-overflow-scrolling:touch}input,select,textarea,button{font:inherit;max-width:100%;box-sizing:border-box}input,select,textarea{font-size:16px}.btn,.pill,.badge{white-space:normal;text-align:center}.ctaRow,.formActions,.badgeRow,.pills{min-width:0}.pageHero h1,.sectionTitle h2,.sectionTitle h3,h1,h2,h3,h4,p,a,span,li{overflow-wrap:anywhere}.field input,.field select,.field textarea{width:100%}.formGrid [class*="col-"],.form-grid > *{min-width:0}.toast{max-width:calc(100vw - 28px)}
@media(max-width:900px){.grid,.cards{grid-template-columns:1fr!important}.span-7,.span-5,.span-6,.span-4,.span-3{grid-column:1/-1!important}.formGrid,.form-grid{grid-template-columns:1fr!important}.formGrid [class*="col-"],.form-grid > *{grid-column:1/-1!important}.pageHero .container,.material-hero .container{grid-template-columns:1fr!important}.desktopMenu{display:none}.ctaRow,.formActions{display:grid!important;grid-template-columns:1fr!important}.ctaRow .btn,.formActions .btn{width:100%}}
@media(max-width:520px){.container{width:min(100% - 22px,1180px)}.pageHero{padding-top:42px}.pageHero h1{font-size:clamp(34px,12vw,52px)!important;line-height:1.02}.section{padding-block:44px}.card{border-radius:22px!important;padding:18px!important}.premiumTable th,.premiumTable td,.feeTable th,.feeTable td{font-size:13px;padding:10px 8px}.u-announcement{font-size:12px;line-height:1.4}.brandText{max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobileDrawer{max-width:min(360px,88vw)}}

/* YouTube learning page */
.youtube-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.youtube-main{grid-template-columns:1fr}.youtube-card,.youtube-channel-card{display:grid;gap:12px}.youtube-badge{display:inline-flex;width:max-content;border-radius:999px;background:rgba(255,0,0,.12);border:1px solid rgba(255,0,0,.22);color:#ffd5d5;font-weight:900;font-size:12px;padding:7px 10px}.youtube-link-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-top:8px}.youtube-code{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:12px;padding:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-size:12px}.youtube-accordion summary{display:flex;justify-content:space-between;gap:14px;align-items:center;cursor:pointer;font-weight:900}.youtube-accordion-body{display:grid;gap:10px;margin-top:14px}.youtube-class-link{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);min-width:0}.youtube-class-link>div{min-width:0}.youtube-class-link .tiny{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:900px){.youtube-grid{grid-template-columns:1fr}.youtube-link-row,.youtube-class-link{grid-template-columns:1fr}.youtube-link-row .btn,.youtube-class-link .btn{width:100%}}

/* =========================================================
   PHASE 1 PAGE-BY-PAGE REBUILD: HOMEPAGE + ADMISSIONS
   Purpose: reduce CTA noise, fix mobile hero visibility, and harden forms.
   ========================================================= */
.u-announcement{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:32px;
  padding-inline:14px;
  text-wrap:balance;
}
.siteNav .applyBtn{letter-spacing:.01em;}
.hp-hero{min-height:clamp(560px, calc(100svh - var(--nav-h) - 32px), 880px);}
.hp-hero__media img,
.hp-hero__media video,
.heroSlideMedia{object-position:center center;}
.hp-hero__content{filter:drop-shadow(0 18px 44px rgba(0,0,0,.34));}
.hp-hero__actions .hp-btn-gold,
.hp-hero__actions .hp-btn-ghost{justify-content:center;}
.hp-about__actions .primaryCta,
.whyIntro .primaryCta{background:rgba(255,255,255,.06);color:var(--gold-2);border:1px solid rgba(227,194,111,.22);box-shadow:none;}
.homeInquiryForm input:focus,
.inquiryForm input:focus,
.inquiryForm textarea:focus{outline:none;border-color:rgba(227,194,111,.70)!important;box-shadow:0 0 0 4px rgba(227,194,111,.13);} 
#admissionForm .field input,
#admissionForm .field select,
#admissionForm .field textarea{min-height:48px;}
#admissionForm .field textarea{min-height:112px;resize:vertical;}
#admissionForm .formActions{gap:10px;align-items:center;}
#admissionForm button[disabled]{opacity:.72;cursor:wait;transform:none!important;}

@media (max-width: 1060px){
  .siteNav .applyBtn{font-size:12px;padding-inline:12px;}
}
@media (max-width: 680px){
  body{padding-bottom:0;}
  .u-announcement{font-size:11px;letter-spacing:.035em;line-height:1.35;min-height:30px;padding-block:7px;}
  .navActions{gap:6px;}
  .siteNav .applyBtn{display:none;}
  .hp-hero{
    height:calc(100svh - var(--nav-h) - 30px);
    min-height:560px;
    max-height:760px;
  }
  .hp-hero__media img,
  .hp-hero__media video,
  .heroSlideMedia{
    object-fit:cover;
    object-position:center top;
  }
  .hp-hero__shade{
    background:
      linear-gradient(180deg, rgba(3,5,10,.02) 0%, rgba(3,5,10,.16) 36%, rgba(3,5,10,.90) 78%, rgba(3,5,10,.98) 100%),
      linear-gradient(90deg, rgba(3,5,10,.34), rgba(3,5,10,.04));
  }
  .hp-hero__content{
    left:16px;
    right:16px;
    bottom:74px;
    padding:16px 14px 14px;
    border:1px solid rgba(227,194,111,.16);
    border-radius:20px;
    background:linear-gradient(135deg,rgba(5,8,15,.58),rgba(5,8,15,.30));
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .hp-hero__kicker{font-size:9.5px;letter-spacing:.16em;margin-bottom:8px;}
  .hp-hero__title{font-size:clamp(32px,9.4vw,46px);line-height:.96;margin-bottom:10px;}
  .hp-hero__sub{display:block;font-size:13px;line-height:1.45;margin-bottom:14px;max-width:34ch;}
  .hp-hero__actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
  .hp-btn-gold,.hp-btn-ghost{min-height:42px;padding-inline:12px;border-radius:14px;font-size:12px;}
  .hp-hero__ticker{bottom:12px;min-height:40px;padding:8px 12px;width:calc(100vw - 24px);}
  .heroDotRow{display:none!important;}
  .hp-about__actions{display:grid;grid-template-columns:1fr;gap:10px;}
  .admissionBox{text-align:left;}
  .ctaStack{display:grid!important;grid-template-columns:1fr!important;}
  .inquiryForm{display:grid;grid-template-columns:1fr!important;}
}
@media (max-width: 420px){
  .hp-hero{min-height:540px;height:calc(100svh - var(--nav-h) - 30px);}
  .hp-hero__content{bottom:70px;padding:14px 12px;}
  .hp-hero__title{font-size:clamp(29px,9vw,38px);}
  .hp-hero__sub{font-size:12.5px;}
  .hp-hero__actions{grid-template-columns:1fr;}
  .hp-btn-gold,.hp-btn-ghost{width:100%;}
}
@media (max-height: 650px) and (max-width: 680px){
  .hp-hero{min-height:620px;height:620px;}
}