.topbar {
  background: var(--emerald-dark);
  color: rgba(255,255,255,.72);
  font-size: .72rem;
  font-weight: 500;
  /* The extra top padding is the notch inset, which is 0 in a normal browser
     and only non-zero once the site runs as an installed app with
     viewport-fit=cover. The 0px fallback keeps older engines parsing it.

     The bar used to sit flush against the top of the viewport with only 7px of
     padding, so the links were hard to hit and there was no room to overshoot
     into. The links now carry their own 44px min-height, and this padding pulls
     the row down off the top edge so it reads as a deliberate bar rather than
     text jammed against the status bar. Kept to 8px rather than something
     larger so the header does not eat a quarter of a short phone screen. */
  padding: calc(8px + env(safe-area-inset-top, 0px)) 0 8px;
  position: relative;
  z-index: var(--z-header);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ---- Left: contact info ---- */
.topbar__left {
  display: flex;
  align-items: center;
}

.topbar__contact {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.65);
  font-size: .72rem;
  padding-right: 18px;
  margin-right: 18px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.topbar__contact:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}
/* Same 44px reasoning as .topbar__link - the phone and email links were only
   ~19px tall. They are hidden at 1024px and below, so this mainly helps tablets
   in landscape and desktop users aiming at a small strip. */
.topbar__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color .2s;
}
.topbar__contact a:hover { color: var(--gold-light); }

.topbar__icon {
  width: 11px; height: 11px;
  fill: none;
  stroke: rgba(255,255,255,.4);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ---- Right: utility portal links ---- */
.topbar__links {
  display: flex;
  align-items: center;
}

/* A 0.71rem label with 2px of padding rendered about 23px tall, which is less
   than half the 44px a touch target should be - the links were easy to miss or
   clip with a thumb. min-height makes the clickable area the full 44px while
   inline-flex keeps the text optically centred, since min-height alone would
   leave the label sitting at the top of the box. */
.topbar__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: #ffffff;
  text-decoration: none;
  font-size: .71rem;
  font-weight: 600;
  padding: 0 13px;
  border-right: 1px solid rgba(255,255,255,.1);
  white-space: nowrap;
  transition: color .2s;
}
.topbar__link:last-child { border-right: none; padding-right: 0; }
.topbar__link:hover { color: var(--gold-light); }

/* ================================================================
   ANNOUNCEMENT TICKER
   ================================================================ */
.announce-bar {
  background: var(--gold);
  color: var(--emerald-dark);
  padding: 8px 0;
  overflow: hidden;
  font-size: .78rem;
  font-weight: 600;
  cursor: default;
}

.announce-bar__track {
  display: flex;
  width: max-content;
  animation: ticker 38s linear infinite;
  will-change: transform;
}
.announce-bar__track:hover { animation-play-state: paused; }

.announce-bar__item {
  padding: 0 44px;
  flex-shrink: 0;
  position: relative;
}
.announce-bar__item::before {
  content: '\2022';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .9rem;
  line-height: 1;
  opacity: .45;
}
.announce-bar__item:first-child::before { display: none; }

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* The bar is decoration, so honour the motion preference and freeze it
   instead of scrolling text across the page for ever. */
@media (prefers-reduced-motion: reduce) {
  .announce-bar__track { animation: none; }
  .announce-bar { overflow-x: auto; }
}

/* ================================================================
   MAIN NAVBAR
   ================================================================ */
.navbar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  /* Sits below the status bar once installed; 0 elsewhere. */
  top: env(safe-area-inset-top, 0px);
  z-index: var(--z-header);
  transition: box-shadow .3s ease;
}
.navbar.is-scrolled {
  box-shadow: 0 2px 24px rgba(74,37,89,.1);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  gap: 16px;
}


.navbar__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

/* The school's logo is a stacked lockup: emblem above a wide wordmark banner.
   The nav bar is only 54px tall, so the full lockup renders at 54px high with
   the wordmark unreadable and ~90px of dead space beside it. The emblem is shown
   at natural size instead, with the name as live text next to it. That also
   means the name stays selectable, scales with the user's font size, and does
   not go stale when the logo changes. */
.logo-img {
  height: 50px;
  width: auto;
  max-width: 54px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

.logo-wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.05;
}

.logo-wordmark__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--emerald-dark);
  white-space: nowrap;
}

/* Fallback text (shown if image fails to load or logo not yet added) */
.logo-fallback {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Shield SVG mark (used as fallback placeholder only) */
.logo-mark {
  width: 50px; height: 50px;
  position: relative;
  flex-shrink: 0;
}
.logo-mark__outer {
  position: absolute;
  inset: 0;
  background: var(--emerald-dark);
  clip-path: polygon(50% 0%, 100% 18%, 100% 62%, 50% 100%, 0% 62%, 0% 18%);
}
.logo-mark__inner {
  position: absolute;
  inset: 5px;
  background: var(--emerald);
  clip-path: polygon(50% 0%, 100% 18%, 100% 62%, 50% 100%, 0% 62%, 0% 18%);
  display: grid;
  place-items: center;
}
.logo-mark__letter {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--gold-light);
  line-height: 1;
  margin-top: 2px;
}

.logo-text { line-height: 1.1; }
.logo-text__name {
  font-family: var(--font-display);
  font-size: 6pt;
  font-weight: 700;
  color: var(--emerald-dark);
  letter-spacing: .02em;
  display: block;
}
.logo-text__tagline {
  font-family: var(--font-body);
  font-size: 4pt;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .16em;
  text-transform: lowercase;
  display: block;
  margin-top: 2px;
}


.navbar__menu {
  display: flex;
  align-items: center;
  gap: 0;
}

/* ---- Nav item ---- */
.nav-item {
  position: relative;
}

.nav-item__link {
  display: block;
  padding: 10px 13px;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
  line-height: 1;
}
.nav-item__link:hover,
.nav-item.is-active > .nav-item__link {
  color: var(--emerald);
}

.nav-item__caret {
  display: inline-block;
  font-size: .56rem;
  opacity: .5;
  margin-left: 3px;
  vertical-align: middle;
}

/* CTA "Apply Now" button in nav */
.nav-item--cta .nav-item__link {
  background: var(--emerald);
  color: var(--white);
  padding: 9px 20px;
  border-radius: var(--r-xs);
  margin-left: 8px;
  transition: var(--t-base);
}
.nav-item--cta .nav-item__link:hover {
  background: var(--emerald-light);
  color: var(--white);
  transform: translateY(-1px);
}

/* ================================================================
   DROPDOWNS
   ================================================================ */
.dropdown {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  min-width: 230px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--emerald);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 16px 48px rgba(0,0,0,.1);
  padding: 8px 0;
  /* hidden by default */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: var(--z-dropdown);
}

/* Show on hover or keyboard focus */
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.dropdown__section {
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 10px 18px 4px;
  display: block;
}

.dropdown__divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

.dropdown__link {
  display: block;
  padding: 9px 18px;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 400;
  color: var(--slate);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all .15s ease;
}
.dropdown__link:hover {
  color: var(--emerald);
  background: var(--mist);
  border-left-color: var(--emerald);
}

/* ================================================================
   HAMBURGER  (mobile toggle)
   ================================================================ */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.hamburger__bar {
  display: block;
  width: 22px; height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: var(--t-base);
  transform-origin: center;
}

/* Open state: x */
.hamburger.is-open .hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open .hamburger__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open .hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================================
   MOBILE NAV OVERLAY
   ================================================================ */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  /* Full-screen overlay, so it inherits the notch and home indicator too. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--white);
  z-index: calc(var(--z-header) + 10);
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav.is-open { display: flex; }

/* ---- Header row ---- */
.mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.mobile-nav__close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--mist);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  color: var(--charcoal);
  line-height: 1;
  transition: var(--t-fast);
}
.mobile-nav__close:hover { background: var(--border); }

/* ---- Nav list ---- */
.mobile-nav__body {
  flex: 1;
  padding: 8px var(--gutter) 24px;
  overflow-y: auto;
}

.mobile-nav__item {
  border-bottom: 1px solid var(--border);
}
.mobile-nav__item:last-child { border-bottom: none; }

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  color: var(--charcoal);
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: color .2s;
}
.mobile-nav__link:hover { color: var(--emerald); }

.mobile-nav__toggle {
  font-size: .72rem;
  opacity: .5;
  transition: transform .25s;
  cursor: pointer;
}
.mobile-nav__item.is-open .mobile-nav__toggle { transform: rotate(180deg); }

/* ---- Submenu ---- */
.mobile-nav__sub {
  display: none;
  padding: 4px 0 12px 12px;
}
.mobile-nav__item.is-open .mobile-nav__sub { display: block; }

.mobile-nav__sub-label {
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 8px 0 4px;
  display: block;
}

.mobile-nav__sub-link {
  display: block;
  padding: 9px 10px;
  font-size: .86rem;
  color: var(--slate);
  text-decoration: none;
  border-radius: var(--r-md);
  transition: all .15s;
}
.mobile-nav__sub-link:hover {
  background: var(--mist);
  color: var(--emerald);
}

/* ---- CTA row at bottom ---- */
.mobile-nav__footer {
  padding: 18px var(--gutter);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.mobile-nav__footer .btn {
  width: 100%;
  justify-content: center;
}

/* ================================================================
   RESPONSIVE: show/hide
   ================================================================ */
@media (max-width: 1024px) {
  .navbar__menu { display: none; }
  .hamburger    { display: flex; }
  .topbar__left { display: none; }
}

@media (max-width: 600px) {
  .topbar__inner { justify-content: center; }
  .topbar__links {
    flex-wrap: wrap;
    justify-content: center;
  }
  /* Tighter horizontal padding so four links fit at 360px, but min-height from
     the base rule still applies - the target must stay 44px tall here too. */
  .topbar__link { padding: 0 10px; }
}