/* ==================================================================
   LAYOUT STYLES — navbar, scroll reveal, hero CTA polish.
   Moved out of layouts/master.blade.php on 2026-10-11 so the browser
   can cache them. The --theme-* colours stay inline in the layout
   because they come from the Site Editor.
   ================================================================== */
/* ================================================================
   NAVBAR v3.0 — Fully animated, mobile-first, accessible
   ================================================================ */

/* ── CSS tokens ─────────────────────────────────────────────── */
:root {
  --nb-h:        70px;
  --nb-h-sm:     60px;
  --nb-accent:   #2b2560;   /* EAU Navy */
  --nb-gold:     #f0b429;   /* EAU Gold */
  --nb-dark:     #2b2560;
  --nb-ease:     cubic-bezier(.4,0,.2,1);
  --nb-ease-out: cubic-bezier(0,0,.2,1);
  --nb-ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* --theme-* colours are set inline in layouts/master (Site Editor). */
}

/* ── Scroll-reveal animations ──────────────────────────────────
   Pair with data-sr="fade-up|fade-down|fade-left|fade-right|zoom-in"
   The .in-view class is toggled by IntersectionObserver below. */
[data-sr] {
  opacity: 0;
  transition: opacity .6s var(--nb-ease-out), transform .6s var(--nb-ease-out);
  will-change: opacity, transform;
}
[data-sr="fade-up"]    { transform: translateY(30px); }
[data-sr="fade-down"]  { transform: translateY(-30px); }
[data-sr="fade-left"]  { transform: translateX(40px); }
[data-sr="fade-right"] { transform: translateX(-40px); }
[data-sr="zoom-in"]    { transform: scale(.92); }
[data-sr="none"]       { opacity: 1; transform: none; transition: none; }
[data-sr].in-view      { opacity: 1; transform: none; }

/* ── Core bar ────────────────────────────────────────────────── */
.uni-navbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nb-h);
  z-index: 1000;
  display: flex; align-items: center;
  transition: height .35s var(--nb-ease), background .35s var(--nb-ease),
              box-shadow .35s var(--nb-ease), top .35s var(--nb-ease);
  will-change: height, background;
}
.uni-navbar.scrolled {
  height: var(--nb-h-sm);
  background: linear-gradient(135deg, rgba(11,30,59,.96), rgba(26,58,110,.96));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 4px 32px rgba(11,30,59,.35);
}
/* animated gradient accent line along the bottom edge */
.uni-navbar::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--theme-accent), var(--theme-secondary), var(--theme-primary), var(--theme-accent));
  background-size: 300% 100%;
  opacity: 0;
  transition: opacity .35s var(--nb-ease);
  animation: navGradientFlow 8s linear infinite;
  pointer-events: none;
}
.uni-navbar.scrolled::after { opacity: 1; }
@keyframes navGradientFlow {
  0%   { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}

/* ── Skip link (keyboard/screen-reader users) ──────────────────── */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 99999;
  background: var(--accent);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
}
.skip-link:focus {
  color: #fff;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ── Scroll progress bar ────────────────────────────────────────
   Fixed strip above everything; fills left→right with scroll depth. */
.nav-scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--theme-accent), var(--theme-secondary), var(--theme-primary));
  z-index: 1002;
  transition: width .1s linear;
  pointer-events: none;
}
.nav-inner {
  display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
  width: 100%;
}

/* ── Logo ────────────────────────────────────────────────────── */
.nav-logo {
  flex-shrink: 0; display: flex; align-items: center; gap: .25rem;
  text-decoration: none;
}
.nav-logo img { height: 48px; width: auto; transition: height .3s var(--nb-ease), transform .25s var(--nb-ease-spring); filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.nav-logo:hover img { transform: scale(1.06); }
.uni-navbar.scrolled .nav-logo img { height: 42px; }
.nav-logo-text {
  font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em;
  color: #fff; transition: color .3s;
}
.uni-navbar.scrolled .nav-logo-text { color: #fff; }
.nav-logo-block { display: flex; flex-direction: column; gap: 0; line-height: 1; }
@media (max-width: 1199.98px) {
    .nav-logo { gap: .2rem; }
    .nav-logo img { height: 36px; }
    .nav-logo-name { font-size: .78rem; color: #221c4e !important; text-shadow: none !important; }
    .nav-logo-sub { font-size: .6rem; color: #64748B !important; text-shadow: none !important; }
}
.nav-logo-name {
  font-weight: 800; font-size: .95rem; letter-spacing: -.01em;
  color: #fff; transition: color .3s; white-space: nowrap;
}
.nav-logo-sub {
  font-size: .68rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.65); transition: color .3s; white-space: nowrap;
}
.uni-navbar.scrolled .nav-logo-name { color: #fff; }
.uni-navbar.scrolled .nav-logo-sub { color: rgba(255,255,255,.6); }

/* ── Desktop nav list ───────────────────────────────────────── */
.nav-desktop {
  display: none; /* mobile hidden */
  list-style: none; margin: 0; padding: 0;
  align-items: center; gap: .1rem;
  flex: 1; justify-content: center;
}
@media (min-width: 1200px) { .nav-desktop { display: flex; } }

/* ── Nav links ───────────────────────────────────────────────── */
.nav-desktop .nav-link {
  color: rgba(255,255,255,.9) !important;
  font-weight: 500; font-size: .875rem;
  padding: .5rem .8rem !important;
  border-radius: 8px;
  transition: color .22s, background .22s;
  white-space: nowrap; cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .28rem;
  position: relative;
}
.uni-navbar.scrolled .nav-desktop .nav-link { color: rgba(255,255,255,.9) !important; }
.nav-desktop .nav-link:hover,
.nav-desktop .nav-link.is-active {
  color: var(--nb-gold) !important;
  background: rgba(255,255,255,.08);
}
/* animated gradient underline */
.nav-desktop .nav-link::after {
  content: '';
  position: absolute; bottom: 4px; left: 50%;
  width: 0; height: 3px;
  background: linear-gradient(90deg, var(--theme-accent), var(--theme-secondary));
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width .25s var(--nb-ease);
}
.nav-desktop .nav-link:hover::after,
.nav-desktop .nav-link.is-active::after { width: 60%; }

/* chevron on dropdown triggers */
.has-dd .nav-link .nb-chev {
  font-size: .6rem; opacity: .55;
  transition: transform .25s var(--nb-ease), opacity .25s;
}
.uni-dd:hover .nb-chev,
.uni-dd:focus-within .nb-chev,
.uni-dd.open  .nb-chev { transform: rotate(180deg); opacity: 1; }

/* ── Dropdown wrapper ────────────────────────────────────────── */
.uni-dd { position: relative; }
/* transparent hover bridge — prevents gap from closing dropdown */
.uni-dd > .has-bridge::before {
  content: ''; position: absolute;
  bottom: -12px; left: 0; right: 0; height: 12px;
}

/* ── Generic dropdown ────────────────────────────────────────── */
.uni-dd-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(.97);
  transform-origin: top center;
  background: #fff; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(11,30,59,.14), 0 0 0 1px #E8EEF4;
  padding: .6rem; min-width: 245px;
  opacity: 0; visibility: hidden;
  transition: opacity .22s var(--nb-ease), transform .22s var(--nb-ease-out), visibility .22s;
  z-index: 998; pointer-events: none;
}
.uni-dd:hover .uni-dd-menu,
.uni-dd:focus-within .uni-dd-menu,
.uni-dd.open  .uni-dd-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}
/* right-aligned variant (portal menu) */
.dd-right {
  left: auto !important; right: 0;
  transform: translateY(-8px) scale(.97) !important;
  transform-origin: top right;
}
.uni-dd:hover .dd-right,
.uni-dd:focus-within .dd-right,
.uni-dd.open  .dd-right {
  transform: translateY(0) scale(1) !important;
}

/* dropdown items */
.dd-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .875rem; border-radius: 10px;
  color: #1E293B; font-size: .875rem; font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s, transform .15s;
}
.dd-item:hover { background: #f6f5fd; color: var(--nb-accent); transform: translateX(2px); }
.dd-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
  transition: transform .2s var(--nb-ease-spring);
}
.dd-item:hover .dd-icon { transform: scale(1.1); }
.dd-item-info strong { display: block; font-size: .84rem; font-weight: 600; line-height: 1.3; }
.dd-item-info span   { display: block; font-size: .72rem; color: #8b8da6; margin-top: .1rem; }
.dd-sep { height: 1px; background: #F1F5F9; margin: .35rem .75rem; }
.dd-footer-link {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .875rem; border-radius: 10px;
  font-size: .82rem; font-weight: 600; color: var(--nb-accent);
  text-decoration: none; transition: background .15s;
}
.dd-footer-link:hover { background: #EFF6FF; }

/* ── MEGA MENU ────────────────────────────────────────────────── */
.mega-wrap {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px) scale(.97);
  transform-origin: top center;
  width: min(860px, 94vw);
  background: #fff; border-radius: 20px;
  box-shadow: 0 24px 70px rgba(11,30,59,.15), 0 0 0 1px #E8EEF4;
  padding: 1.5rem;
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--nb-ease), transform .28s var(--nb-ease-out), visibility .28s;
  z-index: 998; pointer-events: none;
}
.uni-dd:hover .mega-wrap,
.uni-dd:focus-within .mega-wrap,
.uni-dd.open  .mega-wrap {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}

/* Touch devices have no hover. Safari fakes it on first tap, which either
   swallows the tap or leaves the menu stuck open after you move on, so
   take hover out of the equation entirely and let .open do the work. */
@media (hover: none) {
  .uni-dd:hover .mega-wrap,
  .uni-dd:hover .uni-dd-menu,
  .uni-dd:focus-within .mega-wrap,
  .uni-dd:focus-within .uni-dd-menu { opacity: 0; visibility: hidden; pointer-events: none; }
  .uni-dd.open .mega-wrap,
  .uni-dd.open .uni-dd-menu  { opacity: 1; visibility: visible; pointer-events: auto; }
}
.mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1px minmax(155px, 185px);
  gap: .875rem; align-items: start;
}
@media (max-width: 1100px) {
  .mega-grid { grid-template-columns: 1fr 1fr 1fr; }
  .mega-sep-v, .mega-side { display: none; }
}
.mega-sep-v { background: #F1F5F9; align-self: stretch; }
.mega-program-card {
  display: block; border-radius: 14px; padding: 1.2rem 1rem;
  border: 1.5px solid #E8EEF4; text-decoration: none;
  transition: transform .22s var(--nb-ease-spring), box-shadow .22s, border-color .22s, background .22s;
  background: #fff; height: 100%;
}
.mega-program-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(11,30,59,.12); border-color: transparent; }
.mega-program-card.diploma  { --lc:#4a3f96; --lbg:#eceafa; }
.mega-program-card.bachelor { --lc:#2b2560; --lbg:#d4d0f0; }
.mega-program-card.master   { --lc:#a87a12; --lbg:#FDF3DF; }
.mega-program-card:hover { background: var(--lbg); }
.mega-prog-icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--lbg); color: var(--lc);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; margin-bottom: .875rem;
  transition: transform .22s var(--nb-ease-spring);
}
.mega-program-card:hover .mega-prog-icon { transform: scale(1.12) rotate(-3deg); }
.mega-program-card h6 { font-size: .9rem; font-weight: 700; color: #1f1a48; margin-bottom: .25rem; }
.mega-program-card p  { font-size: .74rem; color: #64748B; margin: 0 0 .75rem; line-height: 1.55; }
.mega-prog-cta {
  font-size: .74rem; font-weight: 700; color: var(--lc);
  display: flex; align-items: center; gap: .35rem;
  transition: gap .2s var(--nb-ease);
}
.mega-program-card:hover .mega-prog-cta { gap: .55rem; }
.mega-side-title {
  font-size: .67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: #8b8da6; margin-bottom: .625rem;
}
.mega-side-link {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem; border-radius: 10px;
  color: #535575; font-size: .82rem; font-weight: 500;
  text-decoration: none; transition: all .18s; margin-bottom: .1rem;
}
.mega-side-link:hover { background: #f6f5fd; color: var(--nb-accent); padding-left: .9rem; }
.mega-side-link i { width: 14px; color: #CBD5E1; font-size: .78rem; transition: color .18s; }
.mega-side-link:hover i { color: var(--nb-accent); }
.mega-side-badge {
  margin-left: auto; font-size: .65rem; font-weight: 700;
  padding: .12rem .45rem; border-radius: 100px;
}
.mega-cta-box {
  background: linear-gradient(135deg,#221c4e,#4a3f96);
  border-radius: 12px; padding: 1rem 1.1rem; margin-top: .75rem; text-align: center;
}
.mega-cta-box p { color: rgba(255,255,255,.65); font-size: .72rem; margin: 0 0 .625rem; }
.mega-cta-box a {
  display: inline-flex; align-items: center; gap: .4rem;
  background: linear-gradient(135deg, var(--nb-gold), #ffd166); color: #221c4e; border-radius: 100px;
  padding: .45rem 1.1rem; font-size: .78rem; font-weight: 700;
  text-decoration: none; transition: background .2s, transform .2s;
}
.mega-cta-box a:hover { background: linear-gradient(135deg, #ffd166, var(--nb-gold)); transform: scale(1.04); }

/* ── Right action area ───────────────────────────────────────── */
.nav-actions {
  display: none; /* shown only on desktop via media query */
  align-items: center; gap: .625rem; flex-shrink: 0;
}
@media (min-width: 1200px) { .nav-actions { display: flex; } }

.nav-search-btn {
  width: 36px; height: 36px; border-radius: 9px;
  border: 1.5px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.09);
  color: rgba(255,255,255,.82);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .88rem;
  transition: all .22s var(--nb-ease); outline: none; flex-shrink: 0;
}
.nav-search-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); color: #fff; }
.uni-navbar.scrolled .nav-search-btn { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
.uni-navbar.scrolled .nav-search-btn:hover { border-color: var(--nb-accent); background: rgba(245,166,35,.15); color: var(--nb-accent); }

.nav-lang-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1.5px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.75) !important;
  border-radius: 100px; padding: .4rem .85rem !important;
  font-size: .8rem !important; font-weight: 600 !important;
  cursor: pointer; background: transparent;
  transition: all .22s var(--nb-ease);
}
.nav-lang-btn:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); color: #fff !important; }
.uni-navbar.scrolled .nav-lang-btn { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.75) !important; }
.uni-navbar.scrolled .nav-lang-btn:hover { border-color: var(--nb-accent); color: var(--nb-accent) !important; }
.nav-lang-btn .fa-globe { font-size: .85rem; }
.nav-lang-btn .nb-chev { font-size: .55rem; opacity: .6; }

.dd-item-compact { padding: .55rem 1rem !important; font-size: .85rem; display: flex; align-items: center; gap: .5rem; }
.dd-item-active { font-weight: 700; }

.nav-portal-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1.5px solid rgba(255,255,255,.35);
  color: rgba(255,255,255,.9) !important;
  border-radius: 100px; padding: .45rem 1rem !important;
  font-size: .84rem !important; font-weight: 600 !important;
  cursor: pointer; background: transparent;
  transition: all .22s var(--nb-ease);
}
.nav-portal-btn:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.1); color: #fff !important; }
.uni-navbar.scrolled .nav-portal-btn { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.9) !important; }
.uni-navbar.scrolled .nav-portal-btn:hover { border-color: var(--nb-accent); background: rgba(245,166,35,.15); color: var(--nb-accent) !important; }

.nav-apply-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: linear-gradient(135deg, var(--theme-accent), #ffd166);
  color: #221c4e !important;
  border-radius: 100px; padding: .5rem 1.2rem !important;
  font-size: .84rem !important; font-weight: 700 !important;
  text-decoration: none; border: none; cursor: pointer; white-space: nowrap;
  transition: background .22s, transform .22s var(--nb-ease-spring), box-shadow .22s;
  animation: applyPulse 2.6s ease-in-out infinite;
}
.nav-apply-btn:hover {
  background: linear-gradient(135deg, #d69a17, var(--theme-accent));
  color: #fff !important;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 24px rgba(245,158,11,.45);
  animation-play-state: paused;
}
@keyframes applyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,166,35,.5); }
  50%      { box-shadow: 0 0 0 7px rgba(245,166,35,0); }
}

/* ── Hamburger — morphs to X ─────────────────────────────────── */
.nav-hamburger {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 42px; height: 42px; border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.28); background: rgba(255,255,255,.09);
  cursor: pointer; transition: all .25s var(--nb-ease); flex-shrink: 0;
  padding: 0;
}
.nav-hamburger:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }
.uni-navbar.scrolled .nav-hamburger { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.1); }
.uni-navbar.scrolled .nav-hamburger:hover { border-color: var(--nb-accent); background: rgba(245,166,35,.15); }
/* 3 bars — default state */
.nav-hamburger .hb {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: #fff; transform-origin: center;
  transition: transform .32s var(--nb-ease-spring), opacity .22s, background .25s;
}
.uni-navbar.scrolled .nav-hamburger .hb { background: #fff; }
/* X state — toggled via JS .is-open class */
.nav-hamburger.is-open .hb:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open .hb:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open .hb:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* hide on desktop */
@media (min-width: 1200px) { .nav-hamburger { display: none !important; } }

/* ── MOBILE DRAWER ───────────────────────────────────────────── */
.mob-overlay {
  position: fixed; inset: 0;
  background: rgba(4,11,22,.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 2000; opacity: 0; visibility: hidden;
  transition: opacity .3s var(--nb-ease), visibility .3s;
}
.mob-overlay.open { opacity: 1; visibility: visible; }

.mob-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(340px, 92vw);
  background: linear-gradient(180deg, #071C38 0%, #2b2560 55%, #0D3564 100%);
  z-index: 2001;
  transform: translateX(110%);
  transition: transform .38s var(--nb-ease);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: -24px 0 80px rgba(0,0,0,.6);
  will-change: transform;
}
.mob-drawer.open { transform: translateX(0); }

/* ══════════════════════════════════════════════════════════
   DRAWER — tablet
   The drawer was sized for a phone, where six items plus the
   footer fill the height. On a tablet the same list occupies
   the top third and leaves a few hundred pixels of dead space
   in the middle. Widen it, grow the rows, and let the list
   sit in the optical centre of the space it has.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 576px) {
  /* Not a full-height drawer on tablet - a panel that is only as tall as
     its own content, floating below the navbar. Nothing is stretched to
     fill the screen, so there is no dead space left to look at. */
  .mob-drawer {
    top: 5.25rem;
    right: 1rem;
    bottom: auto;
    height: auto;
    max-height: calc(100vh - 6.5rem);
    max-height: calc(100dvh - 6.5rem);
    width: min(400px, 56vw);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 40px 90px -25px rgba(0,0,0,.8);
    transform: translateX(calc(100% + 1.5rem));
  }
  .mob-drawer.open { transform: translateX(0); }
  /* the gold edge stripe belongs to a full-height drawer */
  .mob-drawer::before { display: none; }

  .mob-head { padding: 1rem 1.25rem; }
  .mob-head img { height: 40px; }

  /* content sizes the panel, so the list must not stretch */
  .mob-body { padding: .75rem .9rem; flex: 0 1 auto; }

  .mob-nav-btn  { padding: .92rem 1.05rem; font-size: .98rem; border-radius: 12px; }
  .mob-nav-icon { width: 23px; font-size: .95rem; }

  .mob-footer      { padding: 1rem 1.25rem; gap: .6rem; border-radius: 0 0 20px 20px; }
  .mob-portal-link { padding: .8rem 1.05rem; font-size: .9rem; }
}
/* gold accent stripe along the leading edge */
.mob-drawer::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #f0b429, #f0b429 55%, rgba(245,166,35,.15));
  z-index: 1;
}

.mob-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(245,166,35,.2);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  background: rgba(0,0,0,.22);
}
.mob-head img { height: 36px; filter: brightness(1.1) drop-shadow(0 0 6px rgba(245,166,35,.2)); }
.mob-head-actions { display: flex; align-items: center; gap: .5rem; }
.mob-icon-btn {
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6); font-size: .9rem; cursor: pointer;
  transition: all .2s;
}
.mob-icon-btn:hover { background: rgba(245,166,35,.18); color: #f0b429; border-color: rgba(245,166,35,.4); }
.mob-icon-btn.close-btn:hover { background: rgba(220,38,38,.18); color: #FC8181; border-color: rgba(220,38,38,.28); }

.mob-body {
  flex: 1; overflow-y: auto; padding: .5rem .75rem;
  overscroll-behavior: contain;
}
.mob-body::-webkit-scrollbar { width: 3px; }
.mob-body::-webkit-scrollbar-thumb { background: rgba(245,166,35,.35); border-radius: 2px; }

.mob-section { margin-bottom: .1rem; }

.mob-nav-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1rem; border-radius: 10px; border: none; background: none;
  font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.82);
  cursor: pointer; transition: background .18s, color .18s;
  text-align: left; text-decoration: none;
}
.mob-nav-btn:hover { background: rgba(245,166,35,.12); color: #f0b429; }
.mob-nav-btn.is-active { color: #f0b429; background: rgba(245,166,35,.16); }
.mob-nav-btn .mob-label { display: flex; align-items: center; gap: .6rem; }
.mob-nav-icon { width: 20px; text-align: center; color: rgba(255,255,255,.38); font-size: .85rem; flex-shrink: 0; transition: color .18s; }
.mob-nav-btn:hover .mob-nav-icon,
.mob-nav-btn.is-active .mob-nav-icon { color: #f0b429; }

.mob-arrow {
  font-size: .68rem; color: rgba(255,255,255,.3); flex-shrink: 0;
  transition: transform .28s var(--nb-ease), color .2s;
}
.mob-nav-btn.expanded .mob-arrow { transform: rotate(180deg); color: #f0b429; }

/* ── Animated mobile accordion ───────────────────────────────── */
.mob-sub {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .32s var(--nb-ease), opacity .25s var(--nb-ease);
  padding-left: .375rem;
}
.mob-sub.open { max-height: 600px; opacity: 1; }

.mob-sub-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem .875rem; border-radius: 9px; margin-bottom: .1rem;
  color: rgba(255,255,255,.72); font-size: .875rem; font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s, padding-left .15s;
}
.mob-sub-link:hover { background: rgba(245,166,35,.1); color: #f0b429; padding-left: 1.1rem; }
.mob-sub-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; flex-shrink: 0;
  transition: transform .2s var(--nb-ease-spring);
}
.mob-sub-link:hover .mob-sub-icon { transform: scale(1.1); }
.mob-sub-text strong { display: block; font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.92); line-height: 1.3; }
.mob-sub-text span   { display: block; font-size: .72rem; color: rgba(255,255,255,.42); margin-top: .1rem; }

.mob-sep { height: 1px; background: rgba(255,255,255,.07); margin: .5rem 0; }

.mob-footer {
  padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0; display: flex; flex-direction: column; gap: .625rem;
  background: rgba(0,0,0,.22);
}
.mob-portal-link {
  display: flex; align-items: center; gap: .625rem;
  padding: .75rem 1rem; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  text-decoration: none;
  color: rgba(255,255,255,.84); font-size: .875rem; font-weight: 600;
  transition: all .2s;
}
.mob-portal-link:hover { border-color: rgba(245,166,35,.42); color: #f0b429; background: rgba(245,166,35,.1); }
.mob-portal-link strong { color: rgba(255,255,255,.92) !important; }
.mob-portal-link span { color: rgba(255,255,255,.42) !important; }
.mob-portal-link .pi {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
}
.mob-apply-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 1rem; border-radius: 12px;
  background: linear-gradient(135deg, #f0b429 0%, #f0b429 100%);
  color: #2b2560 !important;
  font-size: .95rem; font-weight: 700;
  text-decoration: none; border: none; cursor: pointer;
  box-shadow: 0 6px 22px rgba(245,166,35,.38);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.mob-apply-btn:hover {
  background: linear-gradient(135deg, #FBBF3F 0%, #f0b429 100%);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(245,166,35,.55);
}

/* ── Hero CTA polish ───────────────────────────────────────────── */
/* Primary hero CTA: gold gradient + glow so it pops on the dark hero */
.hero-actions .btn-primary-uni {
    background: linear-gradient(135deg, #f0b429 0%, #f0b429 100%) !important;
    color: #2b2560 !important;
    border: none !important;
    box-shadow: 0 10px 26px rgba(245,166,35,.38), 0 2px 6px rgba(245,166,35,.30) !important;
    font-weight: 700 !important;
    transition: transform .2s ease, box-shadow .25s ease, background .25s ease !important;
}
.hero-actions .btn-primary-uni:hover {
    background: linear-gradient(135deg, #FBBF3F 0%, #f0b429 100%) !important;
    box-shadow: 0 14px 34px rgba(245,166,35,.55), 0 4px 12px rgba(245,166,35,.40) !important;
    transform: translateY(-2px) !important;
    color: #2b2560 !important;
}
/* Over the dark hero (top nav), hovered/active links must stay visible — */
/* gold, not the navy that disappears into the background.                */
.uni-navbar:not(.scrolled) .nav-desktop .nav-link:hover,
.uni-navbar:not(.scrolled) .nav-desktop .nav-link:focus,
.uni-navbar:not(.scrolled) .nav-desktop .nav-link.is-active {
    color: var(--theme-accent) !important;
    background: rgba(245,166,35,.10) !important;
}
/* Hero hover life — lift + glow so the buttons/pills feel interactive */
.hero-actions .btn-outline-uni {
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
}
.hero-actions .btn-outline-uni:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(255,255,255,.9) !important;
    background: rgba(255,255,255,.10) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.28) !important;
}
.hero-program-pill {
    transition: transform .2s ease, background .2s ease, border-color .2s ease !important;
}
.hero-program-pill:hover {
    transform: translateY(-2px) !important;
    background: rgba(245,166,35,.14) !important;
    border-color: rgba(245,166,35,.5) !important;
}
/* Program cards: more presence at rest + on-brand gold hover accent (was off-brand blue) */
.course-card {
    box-shadow: 0 6px 22px rgba(10,43,78,.08) !important;
}
.course-card:hover {
    border-color: rgba(245,166,35,.55) !important;
}
/* "How It Works" is now the animated route in modern.css - the old
   !important infographic overrides that lived here fought it. */
/* ===== "Why Choose Us" — clean, modern cards ===== */