/* Gateway Academy — Website UI Kit styles
   Reads tokens from colors_and_type.css */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Offset in-page anchor jumps so the sticky nav doesn't cover headings */
[id] { scroll-margin-top: 116px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: #fff; color: var(--ink); }

/* Brand text selection */
::selection { background: var(--gateway-gold); color: var(--gateway-navy); }
/* Keyboard focus ring — brand gold, shown for keyboard users only (not on mouse click) */
:focus-visible { outline: 3px solid var(--gateway-gold); outline-offset: 2px; border-radius: 4px; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline-offset: 3px; }

/* Skip-to-content link (keyboard users; hidden until focused) */
.skip-link { position: fixed; top: 10px; left: 50%; transform: translate(-50%, -160%); z-index: 2000; background: var(--gateway-navy); color: #fff; font-weight: 800; font-size: 14px; padding: 12px 24px; border-radius: 8px; box-shadow: 0 8px 24px rgba(15,31,63,0.4); transition: transform 160ms var(--ease-calm); }
.skip-link:focus-visible { transform: translate(-50%, 0); outline: 3px solid var(--gateway-gold); outline-offset: 2px; }

/* Branded loading state (shown until React mounts, then replaced) */
.app-loading { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: linear-gradient(180deg, #1E3C7A, #152B5A); }
.app-loading-mark { font-family: var(--font-display-condensed); font-weight: 900; font-size: 40px; line-height: 0.86; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; text-align: center; }
.app-loading-mark span { display: block; color: var(--gateway-gold); }
.app-loading-bar { width: 180px; height: 5px; border-radius: 4px; background: rgba(255,255,255,0.18); overflow: hidden; }
.app-loading-bar i { display: block; width: 40%; height: 100%; border-radius: 4px; background: var(--gateway-gold); animation: appLoadSlide 1.1s var(--ease-calm) infinite; }
@keyframes appLoadSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }
@media (prefers-reduced-motion: reduce) { .app-loading-bar i { animation: none; width: 100%; } }

/* No-JavaScript message */
.noscript-msg { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 40px; background: linear-gradient(180deg, #1E3C7A, #152B5A); color: #fff; font-size: 17px; line-height: 1.6; }
.noscript-msg strong { font-family: var(--font-display-condensed); font-weight: 900; font-size: 34px; text-transform: uppercase; color: var(--gateway-gold); }
.noscript-msg a { color: #fff; font-weight: 800; }

.site { min-height: 100vh; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.container.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  font-family: inherit;
  border: 0;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  transition: background 180ms cubic-bezier(0.22, 0.61, 0.36, 1), color 180ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 180ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
  white-space: nowrap;
}
.btn-primary        { background: var(--gateway-gold); color: var(--gateway-navy); }
.btn-primary:hover  { background: var(--gateway-navy); color: var(--gateway-gold); }
.btn-secondary      { background: var(--gateway-navy); color: #fff; }
.btn-secondary:hover{ background: #0F1F3F; }
.btn-ghost          { background: transparent; color: var(--gateway-navy); border: 1.5px solid var(--gateway-navy); padding: 11.5px 26.5px; }
.btn-ghost:hover    { background: var(--gateway-navy); color: var(--gateway-gold); border-color: var(--gateway-navy); }
.btn-outline-gold   { background: transparent; color: var(--gateway-gold); border: 1.5px solid var(--gateway-gold); padding: 11.5px 26.5px; }
.btn-outline-gold:hover { background: var(--gateway-navy); color: var(--gateway-gold); border-color: var(--gateway-navy); }
/* Tactile lift — every CTA gains a gentle rise + shadow on hover, settling on press */
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 31, 63, 0.16); }
.btn:active { transform: scale(0.97); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 4px solid var(--gateway-gold); transition: box-shadow 220ms var(--ease-calm); }
.nav.scrolled { box-shadow: 0 8px 26px rgba(15, 31, 63, 0.13); }

/* Top utility rail — deep navy, collapses on scroll */
.nav-utility { background: var(--navy-900); color: #fff; overflow: hidden; max-height: 48px; transition: max-height 300ms var(--ease-calm), opacity 220ms var(--ease-calm); }
.nav.scrolled .nav-utility { max-height: 0; opacity: 0; }
.nav-utility-inner { max-width: 1240px; margin: 0 auto; padding: 9px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; font-weight: 600; }
.util-left, .util-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.util-phone { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap; transition: color 160ms var(--ease-calm); }
.util-phone svg { color: var(--gateway-gold); }
.util-phone:hover { color: var(--gateway-gold); }
.util-sep { width: 1px; height: 13px; background: rgba(255,255,255,0.22); flex-shrink: 0; }
.util-tag { color: var(--navy-200); letter-spacing: 0.02em; white-space: nowrap; }
.util-tag em { color: var(--gateway-gold); font-style: normal; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.util-enroll { display: inline-flex; align-items: center; gap: 8px; color: var(--gateway-gold); font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.util-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gateway-gold); flex-shrink: 0; }
.util-link { color: #fff; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; transition: color 160ms var(--ease-calm); }
.util-link:hover { color: var(--gateway-gold); }
@media (prefers-reduced-motion: no-preference) {
  .util-dot { animation: annPulse 2s ease-in-out infinite; }
  @keyframes annPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(249,213,2,0.6); } 50% { box-shadow: 0 0 0 5px rgba(249,213,2,0); } }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease-calm), transform 0.6s var(--ease-calm); will-change: opacity, transform; }
.reveal-in { opacity: 1; transform: none; }
/* Settled state: once the entrance has had time to play, drop the transition
   entirely so content is guaranteed visible even in contexts where CSS
   animations are frozen or throttled (print, embeds, capture tools). */
.reveal-done { transition: none !important; opacity: 1 !important; transform: none !important; will-change: auto; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }
@media print { .reveal { opacity: 1 !important; transform: none !important; } }
.nav-inner {
  position: relative; max-width: 1240px; margin: 0 auto; padding: 0;
  display: flex; align-items: stretch; gap: 0; min-height: 78px;
  transition: min-height 240ms var(--ease-calm);
}
.nav.scrolled .nav-inner { min-height: 64px; }

/* Banner Block: full-height navy lockup, flush left, with a gold seam */
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; background: var(--gateway-navy); padding: 0 28px; position: relative; }
.nav-brand::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 4px; background: var(--gateway-gold); }
.nav-crest { display: inline-flex; flex-shrink: 0; }
.nav-crest img { width: 46px; height: 46px; transition: width 240ms var(--ease-calm), height 240ms var(--ease-calm), transform 320ms var(--ease-snap); }
.nav-brand:hover .nav-crest img { transform: rotate(-4deg) scale(1.04); }
.nav.scrolled .nav-crest img { width: 40px; height: 40px; }
.nav-wordmark { display: flex; flex-direction: column; line-height: 1; gap: 1px; }
.wm-line { font-weight: 900; text-transform: uppercase; letter-spacing: 0.005em; font-size: 16px; color: #fff; line-height: 0.98; }
.wm-tag { font-size: 8.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gateway-gold); margin-top: 4px; }
.nav-links { display: flex; align-items: center; gap: 1px; padding-left: 20px; flex: 1; min-width: 0; }

/* Dropdown nav */
.nav-item { position: relative; }
.nav-trigger {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit; font-weight: 700; font-size: 12.5px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--gateway-navy); text-decoration: none; background: none; border: 0; cursor: pointer;
  padding: 9px 7px; border-radius: 8px; white-space: nowrap; transition: color 160ms var(--ease-calm), background 160ms var(--ease-calm);
}
.nav-trigger::before {
  content: ""; position: absolute; left: 7px; right: 7px; bottom: 3px; height: 2.5px; border-radius: 2px;
  background: var(--gateway-gold); transform: scaleX(0); opacity: 0; transform-origin: center;
  transition: transform 220ms var(--ease-snap), opacity 160ms var(--ease-calm);
}
.nav-trigger:hover { color: var(--gold-700); }
.nav-trigger:hover::before { transform: scaleX(1); opacity: 1; }
.nav-item.on .nav-trigger { color: var(--gold-700); }
.nav-item.on .nav-trigger::before { transform: scaleX(1); opacity: 1; }
.nav-trigger .caret { transition: transform 200ms var(--ease-calm); opacity: 0.7; }
.nav-item.has-menu:hover .nav-trigger,
.nav-item.has-menu.open .nav-trigger,
.nav-item.has-menu:focus-within .nav-trigger { color: var(--gold-700); background: var(--navy-050); }
.nav-item.has-menu:hover .nav-trigger::before,
.nav-item.has-menu.open .nav-trigger::before,
.nav-item.has-menu:focus-within .nav-trigger::before { transform: scaleX(1); opacity: 1; }
.nav-item.has-menu:hover .caret,
.nav-item.has-menu.open .caret,
.nav-item.has-menu:focus-within .caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: 100%; left: 0; min-width: 244px; padding-top: 10px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 180ms var(--ease-calm), transform 180ms var(--ease-calm), visibility 180ms;
  z-index: 50;
}
.nav-item.has-menu:hover .nav-dropdown,
.nav-item.has-menu.open .nav-dropdown,
.nav-item.has-menu:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-inner {
  background: #fff; border: 1px solid var(--border-subtle); border-top: 3px solid var(--gateway-gold);
  border-radius: 14px; box-shadow: 0 22px 54px rgba(15,31,63,0.20); padding: 10px; display: grid; gap: 2px;
}
.nav-dropdown-inner a {
  position: relative;
  display: grid; gap: 2px; padding: 11px 40px 11px 16px; border-radius: 10px; text-decoration: none;
  transition: background 150ms var(--ease-calm);
}
.nav-dropdown-inner a:hover { background: var(--navy-050); }
/* hover arrow affordance on link rows */
.dd-links a::after {
  content: "\2192"; position: absolute; right: 15px; top: 50%;
  transform: translateY(-50%) translateX(-5px);
  color: var(--gateway-navy); font-size: 14px; opacity: 0;
  transition: opacity 160ms var(--ease-calm), transform 160ms var(--ease-snap);
}
.dd-links a:hover::after { opacity: 0.5; transform: translateY(-50%) translateX(0); }
/* Featured panel in dropdown */
.nav-dropdown-inner.has-feature { display: grid; grid-template-columns: 1fr 212px; gap: 10px; width: 500px; }
.has-feature .dd-links { display: grid; gap: 2px; align-content: start; }
.dd-feature {
  position: relative; display: flex !important; flex-direction: column; justify-content: flex-end;
  background: var(--gateway-navy); border-radius: 11px; overflow: hidden; padding: 0 !important;
  color: #fff; min-height: 216px;
}
.dd-feature .dd-feat-photo { position: absolute; inset: 0; height: auto; }
.dd-feat-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms var(--ease-calm); }
.dd-feature:hover .dd-feat-photo img { transform: scale(1.05); }
.dd-feature::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15,31,63,0.05) 0%, rgba(15,31,63,0.5) 48%, rgba(11,21,46,0.94) 100%);
}
.dd-feat-t, .dd-feat-d, .dd-feat-cta { position: relative; z-index: 2; }
.dd-feat-t { font-weight: 800; font-size: 15px; line-height: 1.2; color: #fff; padding: 0 16px; }
.dd-feat-d { font-size: 12px; color: #D6E0F2; padding: 5px 16px 0; line-height: 1.4; }
.dd-feat-cta { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gateway-gold); padding: 11px 16px 16px; display: inline-flex; align-items: center; gap: 6px; }
.dd-feature:hover .dd-feat-cta { color: #fff; }
.dd-label { font-weight: 700; font-size: 13.5px; letter-spacing: 0.01em; text-transform: none; color: var(--gateway-navy); display: flex; align-items: center; gap: 8px; }
.dd-ext { color: var(--gold-700); font-size: 11px; }
.dd-note { font-size: 12px; color: var(--fg2); font-weight: 500; }
.nav-cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-right: 24px; }
.nav-cta .btn { padding: 11px 20px; font-size: 13px; }
.nav-search-btn { background: none; border: 0; cursor: pointer; padding: 6px; color: var(--gateway-navy); display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; opacity: 0.7; margin-right: 0; transition: opacity 160ms var(--ease-calm), background 160ms var(--ease-calm); }
.nav-search-btn:hover { opacity: 1; background: var(--navy-050); }
.nav-cta .btn-primary { box-shadow: 0 4px 14px rgba(249,213,2,0.28); }
/* Tighter tier for narrow laptops/tablets in landscape (961–1200px) */
@media (max-width: 1200px) {
  .nav-trigger { font-size: 12px; letter-spacing: 0.02em; padding: 9px 6px; gap: 3px; }
  .nav-trigger::before { left: 6px; right: 6px; }
  .nav-cta .btn { padding: 10px 16px; font-size: 12.5px; }
  .nav-crest img { width: 42px; height: 42px; }
  .wm-line { font-size: 14.5px; }
  .wm-tag { font-size: 8px; letter-spacing: 0.1em; }
}
/* 404 quick links */
.nf-links { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-top: 30px; }
.nf-links a { color: #EAF0FB; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; border-bottom: 2px solid transparent; padding-bottom: 2px; transition: border-color 160ms var(--ease-calm); }
.nf-links a:hover { border-color: var(--gateway-gold); }

/* ---------- Hero ---------- */
.hero { position: relative; display: flex; flex-direction: column; min-height: min(840px, 90vh); background: var(--gateway-navy); color: #fff; overflow: hidden; }
.hero-photo {
  position: absolute; inset: 0;
  background: #152B5A url('assets/campus-aerial-clean.jpg') center 55% / cover no-repeat;
}
/* Hero video — fills the hero-photo container, covers the static fallback */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
  opacity: 0;  /* hidden until canplay fires — poster shows beneath */
  transition: opacity 0.85s ease-in-out;
}
/* Reduced motion: hide video, static poster image shows through */
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* Cinematic, left-weighted scrim so left-aligned copy stays legible over the motion */
.hero-protect {
  position: absolute; inset: 0;
  background:
    linear-gradient(96deg, rgba(11,23,50,0.95) 0%, rgba(13,27,58,0.84) 34%, rgba(15,31,63,0.48) 62%, rgba(15,31,63,0.30) 100%),
    linear-gradient(180deg, rgba(15,31,63,0.30) 0%, rgba(15,31,63,0) 28%, rgba(15,31,63,0.55) 100%);
}
.hero-inner { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; max-width: 1200px; width: 100%; margin: 0 auto; padding: 104px 32px 44px; text-align: left; }
.hero-lede { max-width: 780px; }
.hero .eyebrow { color: var(--gateway-gold); font-size: 14px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 22px; display: inline-flex; align-items: center; gap: 16px; text-shadow: 0 1px 12px rgba(11,23,50,0.55); }
.hero .eyebrow::before { content: ""; width: 36px; height: 3px; background: var(--gateway-gold); }
.hero .display {
  font-family: var(--font-display-condensed);
  font-size: clamp(56px, 7.4vw, 116px); line-height: 0.9; font-weight: 900;
  letter-spacing: -0.005em; text-transform: uppercase;
  margin: 0 0 26px; color: #fff;
  text-shadow: 0 2px 34px rgba(11,23,50,0.6);
}
.hero-deck { font-size: 20px; line-height: 1.55; color: #E7ECF6; max-width: 600px; margin: 0 0 32px; text-wrap: pretty; text-shadow: 0 1px 14px rgba(11,23,50,0.6); }
/* Hero accent — "A village." in gold with a hand-drawn gold underline that draws on load */
.hero-accent { position: relative; color: var(--gateway-gold); white-space: nowrap; text-shadow: 0 2px 30px rgba(249,213,2,0.22), 0 2px 28px rgba(11,23,50,0.55); }
.hero-underline { position: absolute; left: 0; bottom: -0.06em; width: 104%; height: 0.3em; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .hero-underline path { stroke-dasharray: 340; stroke-dashoffset: 340; animation: heroDraw 0.9s var(--ease-calm) 0.7s forwards; }
  @keyframes heroDraw { to { stroke-dashoffset: 0; } }
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-creds { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 34px; }
.hc-pre { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.hc-list { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.hc-list strong { font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; color: rgba(255,255,255,0.92); text-transform: uppercase; }
.hc-list i { width: 4px; height: 4px; border-radius: 50%; background: var(--gateway-gold); opacity: 0.8; }

/* Proof strip — glass cards with gold top-accent + animated count-up */
.hero-strip {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 32px 40px;
}
.hs-card {
  position: relative; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px; padding: 24px 20px 20px; overflow: hidden;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform 280ms var(--ease-snap), background 280ms var(--ease-calm);
}
.hs-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gateway-gold); }
.hs-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.11); }
.hs-num { display: block; font-weight: 900; font-size: 46px; line-height: 1; letter-spacing: -0.02em; color: var(--gateway-gold); font-variant-numeric: tabular-nums; }
.hs-label { display: block; margin-top: 12px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; color: #fff; }
.hs-sub { display: block; margin-top: 4px; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.55); }

/* Staggered entrance for hero copy + proof cards (skipped under reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .hero-lede > * { opacity: 0; animation: heroRise 0.7s var(--ease-snap) forwards; }
  .hero-lede > *:nth-child(1) { animation-delay: 0.05s; }
  .hero-lede > *:nth-child(2) { animation-delay: 0.16s; }
  .hero-lede > *:nth-child(3) { animation-delay: 0.27s; }
  .hero-lede > *:nth-child(4) { animation-delay: 0.38s; }
  .hero-lede > *:nth-child(5) { animation-delay: 0.49s; }
  .hero-strip > div { opacity: 0; animation: heroRise 0.65s var(--ease-snap) forwards; }
  .hero-strip > div:nth-child(1) { animation-delay: 0.5s; }
  .hero-strip > div:nth-child(2) { animation-delay: 0.6s; }
  .hero-strip > div:nth-child(3) { animation-delay: 0.7s; }
  .hero-strip > div:nth-child(4) { animation-delay: 0.8s; }
  @keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* ---------- Section header ---------- */
.section-head { margin-bottom: 32px; }
.section-head.center { text-align: center; }
.section-head h2 { font-size: 52px; line-height: 1.05; font-weight: 900; letter-spacing: -0.015em; text-transform: uppercase; margin: 0 0 16px; color: var(--gateway-navy); }
.section-head .lead { font-size: 18px; line-height: 1.55; color: var(--fg2); max-width: 680px; margin: 0 auto; text-wrap: pretty; }
.eyebrow { font-size: 18px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gateway-navy); margin-bottom: 18px; }
/* Light-background eyebrows render as the navy "Gateway Difference" pill (gold text on a navy chip) */
.eyebrow.dark { display: inline-block; background: var(--gateway-navy); color: var(--gateway-gold); padding: 5px 16px; border-radius: 999px; }
/* On navy/dark sections, eyebrows flip to gold */
.section.navy .eyebrow, .programs .eyebrow, .testimonials + .section.navy .eyebrow { color: var(--gateway-gold); background: transparent; padding: 0; border-radius: 0; }

/* Section headers on dark/navy backgrounds */
.on-navy .section-head h2,
.navy-section .section-head h2 { color: #fff; }
.on-navy .section-head .lead,
.navy-section .section-head .lead { color: #C7D2E8; }
.on-navy .eyebrow,
.navy-section .eyebrow { color: var(--gateway-gold); }
.on-navy .eyebrow.dark,
.navy-section .eyebrow.dark { color: var(--gateway-gold); background: transparent; padding: 0; border-radius: 0; }

/* ---------- The Gateway Difference ---------- */
.difference { padding: 40px 0 48px; background: #fff; }
.diff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.diff-card {
  background: #fff; border-radius: 12px;
  padding: 28px 24px; box-shadow: var(--shadow-card);
  position: relative; transition: box-shadow 220ms var(--ease-calm), transform 220ms var(--ease-calm);
}
.diff-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.diff-accent { position: absolute; top: 0; left: 24px; right: 24px; height: 3px; background: var(--gateway-gold); border-radius: 0 0 2px 2px; }
.diff-card h3 { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; color: var(--gateway-navy); margin: 12px 0 10px; line-height: 1.15; }
.diff-card p { font-size: 15px; line-height: 1.55; color: var(--fg2); margin: 0; }

/* ---------- Programs (on navy) ---------- */
.programs { padding: 40px 0 48px; background: var(--gateway-navy); color: #fff; }
.programs .section-head h2 { color: #fff; }
.programs .section-head .lead { color: #C7D2E8; }
.program-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.program-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(249,213,2,0.22);
  border-radius: 12px; padding: 28px 24px;
  transition: background 220ms var(--ease-snap), transform 220ms var(--ease-snap);
}
.program-card:hover { background: rgba(249,213,2,0.08); transform: translateY(-2px); }
.program-icon {
  width: 76px; height: 76px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  margin-bottom: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.program-icon img { width: 64px; height: 64px; filter: none; }
.program-card h3 { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; margin: 0 0 8px; color: #fff; }
.program-card p { font-size: 14px; line-height: 1.55; color: #C7D2E8; margin: 0; }

/* ---------- Testimonials ---------- */
.testimonials { padding: 40px 0 48px; background: #fff; }
.testimonials .eyebrow, .testimonials .eyebrow.dark { background: transparent; padding: 0; color: var(--gateway-navy); }
.testimonials .section-head h2 { color: var(--gateway-navy); }
.testimonials .section-head .lead { color: var(--fg2); }
.testimonials .testimonial-card blockquote { color: var(--gateway-navy); }
.testimonials .testimonial-card { background: #fff; border: none; border-top: 4px solid var(--gateway-gold); }
.testimonials .testimonial-card .attribution { color: var(--gateway-navy); }
.testimonials .t-dot::after { background: rgba(30,60,122,0.2); }
.testimonials .t-dot.on::after { background: var(--gateway-navy); transform: scale(1.25); }
.testimonials .t-dot:hover::after { background: rgba(30,60,122,0.5); }
.testimonial-card {
  position: relative; max-width: 900px; margin: 0 auto;
  background: #fff; border-radius: 16px; padding: 92px 56px 44px;
  box-shadow: var(--shadow-card); text-align: center;
  border-top: 3px solid var(--gateway-gold);
}
.t-mark {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 120px; line-height: 1; font-weight: 900;
  color: var(--gateway-gold); opacity: 0.9; user-select: none; pointer-events: none;
}
.testimonial-card blockquote { max-width: 660px; margin: 0 auto 26px; font-size: 26px; line-height: 1.4; font-weight: 700; color: var(--gateway-navy); text-wrap: balance; }
.testimonial-card .attribution, .testimonial-card figcaption { font-size: 13px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gateway-navy); }
.testimonial-card .dot { display: inline-block; margin: 0 0.55em; transform: translateY(-0.05em); font-size: 1.2em; line-height: 0; }
.attribution .dot { display: inline-block; margin: 0 0.6em; transform: translateY(-0.05em); font-size: 1.1em; line-height: 0; }
.t-dots { display: flex; gap: 4px; justify-content: center; margin-top: 28px; }
.t-dot { width: 44px; height: 44px; border-radius: 50%; background: transparent; border: 0; cursor: pointer; display: grid; place-items: center; transition: background 160ms; }
.t-dot::after { content: ''; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--border-strong); transition: background 180ms, transform 180ms; }
.t-dot.on::after { background: var(--gateway-navy); transform: scale(1.25); }
.t-dot:hover::after { background: var(--navy-400, #6683b0); }
@media (prefers-reduced-motion: no-preference) {
  .testimonial-card .t-anim { animation: tFade var(--dur-slow) var(--ease-out-quart); }
}
@keyframes tFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* [C2] Autoplay progress bar — fills over the 6.5s cycle, pauses with the carousel */
.t-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(30,60,122,0.10); border-radius: 0 0 16px 16px; overflow: hidden; }
.t-progress span { display: block; height: 100%; width: 0; background: var(--gateway-gold); }
@media (prefers-reduced-motion: no-preference) {
  .t-progress span { animation: tProgress 6500ms linear; }
  @keyframes tProgress { from { width: 0; } to { width: 100%; } }
}

/* ---------- Visit CTA ---------- */
.visit-cta { padding: 44px 0 56px; background: #fff; text-align: center; }
.visit-cta h2 { font-size: 56px; }
.visit-cta .lead { font-size: 20px; max-width: 640px; margin: 0 auto 32px; color: var(--fg2); }
.cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer { position: relative; overflow: hidden; background: var(--gateway-navy); color: #fff; padding: 72px 0 0; border-top: 4px solid var(--gateway-gold); }
.footer-watermark { position: absolute; right: -64px; bottom: -56px; width: 400px; height: 400px; background: url('assets/gateway-logo-reversed.png') center / contain no-repeat; opacity: 0.05; z-index: 0; pointer-events: none; }
.footer > .container, .footer > .footer-accred, .footer > .footer-base { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.footer-brand { display: flex; align-items: flex-start; gap: 16px; }
.footer-brand img { width: 64px; height: 64px; filter: drop-shadow(0 3px 10px rgba(0,0,0,0.3)); }
.wm-gold { font-weight: 900; font-size: 21px; letter-spacing: -0.01em; text-transform: uppercase; color: var(--gateway-gold); line-height: 1.1; }
.wm-sub { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #C7D2E8; margin-top: 6px; font-weight: 700; }
.footer-col h4 { position: relative; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gateway-gold); margin: 0 0 18px; padding-bottom: 10px; }
.footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 3px; border-radius: 2px; background: var(--gateway-gold); }
.footer-col a, .footer-col p { display: block; color: #C7D2E8; text-decoration: none; font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
.footer-col a { transition: color 160ms var(--ease-calm), transform 160ms var(--ease-calm); }
.footer-col a:hover { color: var(--gateway-gold); transform: translateX(3px); }
.footer-base { border-top: 1px solid rgba(249,213,2,0.2); padding: 20px 0; }
.footer-base small { color: #C7D2E8; font-size: 12px; letter-spacing: 0.08em; }

/* ---------- Apply modal ---------- */
.modal-scrim { position: fixed; inset: 0; background: rgba(15,31,63,0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 9600; padding: 24px; animation: fade var(--dur-base) var(--ease-out-quart); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { background: #fff; border-radius: 16px; width: 100%; max-width: 520px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
/* Entrance: a small pop from scale(0.96) — never from nothing — on a snappy ease-out */
@media (prefers-reduced-motion: no-preference) {
  .modal { animation: modalIn var(--dur-base) var(--ease-out-quart); }
  @keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
  /* Asymmetric exit — faster (150ms) than the entrance, settling into nothing */
  .modal-scrim.closing { animation: scrimOut var(--dur-exit) var(--ease-out-quart) forwards; }
  .modal.closing { animation: modalOut var(--dur-exit) var(--ease-out-quart) forwards; }
  @keyframes scrimOut { to { opacity: 0; } }
  @keyframes modalOut { to { opacity: 0; transform: translateY(8px) scale(0.97); } }
}

/* Search palette (command-palette style, anchored near top) — fade scrim + drop-in panel */
.ga-search-scrim { animation: fade var(--dur-base) var(--ease-out-quart); }
@media (prefers-reduced-motion: no-preference) {
  .ga-search-pop { animation: searchPop var(--dur-base) var(--ease-out-quart); }
  @keyframes searchPop { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: none; } }
  .ga-search-scrim.closing { animation: scrimOut var(--dur-exit) var(--ease-out-quart) forwards; }
  .ga-search-pop.closing { animation: searchOut var(--dur-exit) var(--ease-out-quart) forwards; }
  @keyframes searchOut { to { opacity: 0; transform: translateY(-8px) scale(0.98); } }
}
.modal-head { position: relative; padding: 24px 28px 12px; border-bottom: 1px solid var(--border-subtle); }
.modal-head h3 { margin: 0; font-size: 24px; font-weight: 900; text-transform: uppercase; color: var(--gateway-navy); letter-spacing: -0.01em; }
.modal-close { position: absolute; top: 14px; right: 16px; background: transparent; border: 0; font-size: 28px; line-height: 1; color: var(--fg2); cursor: pointer; }
.modal-body { padding: 20px 28px 24px; display: grid; gap: 16px; }
.modal-body label { display: grid; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gateway-navy); }
.modal-body input, .modal-body select, .modal-body textarea {
  font-family: inherit; font-size: 14px; padding: 10px 12px;
  border-radius: 8px; border: 1px solid var(--border-strong); background: #fff; color: var(--ink);
  font-weight: 400; letter-spacing: 0;
}
.modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus { outline: none; border-color: var(--gateway-navy); box-shadow: 0 0 0 3px rgba(249,213,2,0.35); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero { min-height: 0; }
  .hero-inner { padding: 84px 24px 32px; }
  .hero .display { font-size: 54px; }
  .hero-strip { grid-template-columns: repeat(2, 1fr); gap: 16px; padding-bottom: 36px; }
  .diff-grid, .program-grid { grid-template-columns: repeat(2, 1fr); }
  .section-head h2, .visit-cta h2 { font-size: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Mobile menu ---------- */
.nav-toggle { display: none; }
.nav-toggle {
  width: 44px; height: 44px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: #fff; cursor: pointer; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-toggle span { width: 20px; height: 2px; background: var(--gateway-navy); border-radius: 2px; transition: transform 200ms var(--ease-calm), opacity 200ms var(--ease-calm), background 200ms var(--ease-calm); }
.nav-toggle.on span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.on span:nth-child(2) { opacity: 0; }
.nav-toggle.on span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-mobile { display: none; }
.nav-mobile {
  flex-direction: column; background: #fff;
  border-top: 0 solid var(--border-subtle);
  border-bottom: 0 solid var(--gateway-gold); padding: 0 32px;
  max-height: 0; overflow: hidden;
  transition: max-height 260ms var(--ease-calm), padding 260ms var(--ease-calm), border-width 260ms var(--ease-calm);
}
.nav-mobile.open { max-height: 80vh; overflow-y: auto; padding: 8px 32px 24px; border-top-width: 1px; border-bottom-width: 3px; }
.nav-mobile a, .nav-mobile .m-group-head { font-weight: 800; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gateway-navy); text-decoration: none; }
.nav-mobile .m-single { display: block; padding: 16px 0; border-bottom: 1px solid var(--border-subtle); }
.m-group { border-bottom: 1px solid var(--border-subtle); }
.m-group-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; cursor: pointer; padding: 16px 0; font-family: inherit; color: var(--gateway-navy);
}
.m-group-head svg { transition: transform 200ms var(--ease-calm); opacity: 0.7; color: var(--gold-600); }
.m-group.open .m-group-head svg { transform: rotate(180deg); }
.m-group-items { display: grid; max-height: 0; overflow: hidden; transition: max-height 240ms var(--ease-calm); }
.m-group.open .m-group-items { max-height: 360px; }
.m-group-items a { font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--fg2); padding: 9px 0 9px 16px; border-bottom: 0; }
.m-group-items a:last-child { padding-bottom: 16px; }
.nav-mobile-cta { display: flex; gap: 8px; margin-top: 18px; }

/* Below ~1100px the compact link row no longer fits beside brand + CTA, so switch to the hamburger */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; margin-left: auto; margin-right: 18px; }
  .nav-mobile { display: flex; }
}

/* ---------- Announcement bar replaced by the top utility rail (.nav-utility, see Nav section) ---------- */

/* ---------- Active nav link (legacy single links) ---------- */
.nav-links .nav-item > a.nav-trigger { text-decoration: none; }

/* ---------- Footer extras ---------- */
.footer-blurb { font-size: 13px; line-height: 1.55; color: #C7D2E8; margin: 12px 0 14px; max-width: 38ch; font-weight: 400; }
.socials { display: flex; gap: 8px; }
.cal-subscribe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* ---------- Professional Recommendations (referral directory) ---------- */
.pr-page .container { max-width: 1180px; }
.pr-stack { display: grid; gap: 16px; }
.pr-acc {
  border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden;
  background: #fff; box-shadow: 0 1px 3px rgba(15,31,63,0.05);
}
.pr-bar {
  width: 100%; display: flex; align-items: center; gap: 16px;
  background: var(--gateway-navy); color: #fff; border: 0; cursor: pointer;
  padding: 16px 24px; font-family: inherit; font-weight: 800; font-size: 16px;
  letter-spacing: 0.01em; text-align: left;
  transition: background 180ms var(--ease-calm);
}
.pr-bar:hover { background: var(--navy-800); }
.pr-ico {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--gateway-gold); color: var(--gateway-gold);
  display: grid; place-items: center; font-size: 17px; line-height: 1; font-weight: 700;
}
.pr-title { flex: 1; }
.pr-body { padding: 32px 24px; }
.pr-grid { display: grid; gap: 30px 36px; }
.pr-grid.cols-1 { grid-template-columns: 1fr; max-width: 520px; }
.pr-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.pr-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.pr-card h3 {
  margin: 0 0 4px; font-family: var(--font-sans); font-size: 18px; font-weight: 800;
  color: var(--gateway-navy); letter-spacing: -0.01em; text-transform: none;
}
.pr-org { display: block; font-weight: 800; color: var(--gateway-navy); margin-bottom: 8px; }
.pr-lines { display: grid; gap: 3px; }
.pr-lines span, .pr-lines a { font-size: 14.5px; line-height: 1.5; color: var(--fg2); }
.pr-lines a { color: var(--link); font-weight: 600; }
.pr-card .btn { margin-top: 14px; }
@media (max-width: 980px) { .pr-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pr-grid.cols-2, .pr-grid.cols-4 { grid-template-columns: 1fr; } }
.socials a {
  width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center;
  background: #fff; padding: 5px; overflow: hidden;
  transition: transform 180ms var(--ease-calm), box-shadow 180ms var(--ease-calm);
}
.socials a img { width: 100%; height: 100%; object-fit: contain; display: block; }
.socials a:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.3); }
.footer-col a[href^="tel"], .footer-col a { transition: color 180ms var(--ease-calm); }

.footer-accred { border-top: 1px solid rgba(249,213,2,0.18); padding: 20px 0; }
.footer-accred .container { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-accred span { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #C7D2E8; }
.accred-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.abadge { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--gateway-gold); border: 1px solid rgba(249,213,2,0.35); border-radius: 999px; padding: 6px 16px; }
.abadge-logo { background: #fff; border-radius: 8px; padding: 7px 16px; display: inline-flex; align-items: center; height: 46px; box-sizing: border-box; }
.abadge-logo img { height: 30px; width: auto; display: block; }
.abadge-logo:has(img[alt*="Honor"]) img { height: 38px; }
.abadge-az-doe img { max-width: 136px; height: auto !important; }
.footer-base-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 960px) {
  .nav-utility-inner { padding: 7px 20px; gap: 8px; }
  .util-tag, .util-link { display: none; }
  .footer-accred .container { justify-content: flex-start; }
}


/* Graceful loading: solid deep-navy behind hero photos so there's no white flash
   before the background image paints, and content reserves its space (no layout jump). */
.hero-photo, .page-hero .ph-bg { background-color: #152B5A; }
img { max-width: 100%; }

/* ============================================================
   All-device & accessibility polish
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }

/* Thumb-friendly tap targets (WCAG 2.5.5 — min ~44px) */
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.socials a { width: 40px; height: 40px; }

/* Headings wrap instead of overflowing; flex/grid children may shrink (no text spill) */
h1, h2, h3 { overflow-wrap: break-word; }
h2, h3 { color: var(--gateway-navy); }
.container, .inner, .copy, .hero-inner { min-width: 0; }

/* Fluid hero headline — scales smoothly across devices, never collides with the nav.
   Uses .inner for higher specificity so it wins over the ≤960px step rule in pages.css. */
.page-hero .inner h1 { font-size: clamp(32px, 7vw, 74px); }

@media (max-width: 600px) {
  /* CTAs */
  .hero-ctas, .cta-row { flex-wrap: wrap; }
  .hero-ctas .btn, .cta-row .btn { flex: 1 1 auto; }

  /* Touch targets */
  .nav-links a, .dd-panel a, .footer-grid a, .footer-col a { min-height: 44px; display: flex; align-items: center; }
  .socials a { width: 44px; height: 44px; }

  /* Container: tighter side padding frees more content room */
  .container { padding: 0 20px; }
  .hero-inner { padding-left: 20px; padding-right: 20px; }

  /* Hero headline */
  .hero .display { font-size: 40px; }
  .hero-deck { font-size: 16px; }
  .hs-num { font-size: 36px; }
  .hero-creds { margin-top: 26px; }

  /* Nav brand block: tighter padding on phones */
  .nav-brand { padding: 0 20px; }
  .nav-toggle { margin-right: 14px; }

  /* Section headers */
  .section-head h2 { font-size: 30px; }
  .visit-cta h2 { font-size: 30px; }

  /* Grids → single column */
  .diff-grid { grid-template-columns: 1fr; }
  .program-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }

  /* Testimonial */
  .testimonial-card { padding: 60px 20px 28px; }
  .testimonial-card blockquote { font-size: 18px; }

  /* Visit CTA navy panel */
  .visit-cta .container.center { padding: 48px 24px; border-radius: 16px; }
}


/* ============================================================
   Premium micro-interactions — lightweight, GPU-friendly (transform/opacity/
   box-shadow only), gated on reduced-motion so it stays fast and accessible.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Buttons: keep the color-invert, add a gentle lift + shadow; settle on press */
  .btn { transition: background 180ms var(--ease-calm), color 180ms var(--ease-calm), transform 180ms var(--ease-calm), box-shadow 180ms var(--ease-calm); }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,31,63,0.18); transition: background 120ms var(--ease-snap), color 120ms var(--ease-snap), transform 120ms var(--ease-snap), box-shadow 120ms var(--ease-snap); }
  .btn:active { transform: scale(0.97); box-shadow: none; }

  /* Content & interactive cards: a clean, even lift on hover */
  .feature, .program-card, .compare-row, .news-card, .opening, .cred, .pchip {
    transition: transform 200ms var(--ease-calm), box-shadow 200ms var(--ease-calm);
  }
  .feature:hover, .program-card:hover, .compare-row:hover, .news-card:hover, .opening:hover, .cred:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
  }
  .pchip:hover { transform: translateY(-2px); }

  /* Photos inside cards: a slow, subtle zoom — never jumpy */
  .feature-photo img, .lifeshot img, .program-icon img { transition: transform 450ms var(--ease-calm); }
  .feature-link:hover .feature-photo img { transform: scale(1.04); }
  .lifeshot:hover img { transform: scale(calc(var(--bz, 1) * 1.04)); }

  /* Links: a quiet shift toward gold */
  .footer-grid a, .footer-col a, .dd-panel a { transition: color 160ms var(--ease-calm); }
  .footer-grid a:hover, .footer-col a:hover, .dd-panel a:hover { color: var(--gateway-gold); }

  /* Elective chips: lift + gold edge */
  .elective { transition: transform 160ms var(--ease-calm), border-color 160ms var(--ease-calm), color 160ms var(--ease-calm); }
  .elective:hover { transform: translateY(-2px); border-color: var(--gateway-gold); color: var(--gateway-navy); }
}

/* ============================================================
   CREATIVE UPGRADES (reduced-motion safe)
   ============================================================ */

/* [C1] Hero ken-burns — a single slow push-in, never a loop. Base state is
   unscaled, so print / reduced-motion show a clean, sharp image. */
@media (prefers-reduced-motion: no-preference) {
  /* Ken-burns only on interior page heroes — homepage now uses the drone video */
  .page-hero .ph-bg { animation: gaKenburns 30s var(--ease-calm) forwards; transform-origin: 70% 30%; }
  @keyframes gaKenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
}

/* [C4] Primary gold buttons — a quiet light sweep on hover (premium, brief) */
@media (prefers-reduced-motion: no-preference) {
  .btn-primary { position: relative; overflow: hidden; }
  .btn-primary::after {
    content: ""; position: absolute; top: 0; left: -45%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-18deg); opacity: 0; pointer-events: none;
  }
  .btn-primary:hover::after { animation: gaSheen 720ms var(--ease-out-quart); }
  @keyframes gaSheen { 0% { left: -45%; opacity: 0; } 28% { opacity: 1; } 100% { left: 125%; opacity: 0; } }
}

/* Touch-safe hover: disable transform lifts on touch/stylus devices that don't
   support true hover — prevents accidental activated states on tap.
   Per Emil Kowalski: gate transform-based hover behind @media (hover: hover). */
@media (hover: none) {
  .btn:hover, .diff-card:hover, .feature:hover, .program-card:hover,
  .prog:hover, .news-card:hover, .pathway:hover, .fac-card:hover,
  .give-card:hover, .askq-card:hover, .elective:hover, .opening:hover,
  .pchip:hover, .numstat:hover, .cred:hover, .lifeshot:hover,
  .team-card:hover, .socials a:hover, .abadge-logo:hover {
    transform: none !important;
    box-shadow: var(--shadow-card) !important;
  }
}
.hs-proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 920px; margin: 40px auto 0; }
@media (max-width: 600px) { .hs-proof-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Brand — deep-gold labels recolored to NAVY (WEBSITE SCOPE ONLY)
   The muddy deep gold read poorly on white and isn't a Gateway color. On light/paper sections, eyebrow labels, badges, step numbers and
   small accents now use brand navy. Bright gold (--gateway-gold) stays reserved for
   navy backgrounds (e.g. the "Gateway Difference" navy-pill eyebrow). The global brand
   token in colors_and_type.css (print / social / DS templates) is left unchanged.
   ============================================================ */
:root { --gold-700: var(--gateway-navy); }

/* ---------- Breadcrumbs (inner pages — slim bar under the header) ---------- */
.breadcrumbs { background: var(--navy-050); border-bottom: 1px solid var(--border-subtle); }
.breadcrumbs .container { padding-top: 11px; padding-bottom: 11px; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; }
.breadcrumbs li { display: inline-flex; }
.breadcrumbs a { color: var(--gateway-navy); font-weight: 700; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .bc-sep { color: var(--fg2); opacity: 0.6; }
.breadcrumbs .bc-section { color: var(--fg2); font-weight: 600; }
.breadcrumbs [aria-current="page"] { color: var(--fg2); font-weight: 600; }