LMS — University Landing

:root {
  --blue: #1e3a8a;
  --blue-d: #16285f;
  --blue-50: #eef2fb;
  --crimson: #9b1c2e;
  --crimson-d: #7c1623;
  --ivory: #fbf9f2;
  --gold: #c9a227;
  --ink: #15192b;
  --ink-2: #3a3f55;
  --muted: #6b6e87;
  --bg: #fbf9f2;
  --surface: #ffffff;
  --line: rgba(21, 25, 43, 0.1);
  --ok: #13794d;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --sh-sm: 0 1px 2px rgba(21, 25, 43, 0.06), 0 2px 8px rgba(21, 25, 43, 0.05);
  --sh-md: 0 8px 24px rgba(21, 25, 43, 0.1);
  --sh-lg: 0 24px 56px rgba(21, 25, 43, 0.16);
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.15; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }

.wrap { width: min(1140px, 92vw); margin-inline: auto; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--blue); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 .95rem var(--sans); padding: 13px 24px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 10px 18px; font-size: .88rem; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--sh-sm); }
.btn-primary:hover { background: var(--blue-d); box-shadow: var(--sh-md); }
.btn-crimson { background: var(--crimson); color: #fff; box-shadow: var(--sh-sm); }
.btn-crimson:hover { background: var(--crimson-d); box-shadow: var(--sh-md); }
.btn-ghost { background: transparent; color: var(--blue); border-color: rgba(30,58,138,.3); }
.btn-ghost:hover { background: var(--blue-50); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 249, 242, 0.82);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.nav.scrolled { border-color: var(--line); box-shadow: var(--sh-sm); background: rgba(251,249,242,.95); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display: flex; align-items: center; gap: 11px; }
.crest { color: var(--crimson); display: inline-flex; }
.nav .crest svg path:first-child { color: var(--crimson); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text strong { font-family: var(--serif); font-size: 1.18rem; color: var(--blue); }
.brand-text em { font-style: normal; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a { padding: 9px 14px; border-radius: var(--r-sm); font-weight: 500; font-size: .94rem; color: var(--ink-2); transition: background .2s, color .2s; }
.nav-links a:hover { background: var(--blue-50); color: var(--blue); }
.nav-cta { background: var(--crimson); color: #fff !important; margin-left: 6px; }
.nav-cta:hover { background: var(--crimson-d) !important; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.nav-toggle span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(46px, 8vw, 96px) 0 clamp(56px, 8vw, 104px); overflow: hidden; }
.hero-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(640px 360px at 12% -8%, rgba(30,58,138,.12), transparent 70%),
    radial-gradient(560px 420px at 96% 8%, rgba(155,28,46,.1), transparent 68%);
}
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--crimson); margin-bottom: 18px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--crimson); box-shadow: 0 0 0 4px rgba(155,28,46,.14); }
.hero-copy h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); font-weight: 700; color: var(--blue-d); }
.lede { font-size: clamp(1.02rem, 1.7vw, 1.18rem); color: var(--ink-2); margin: 20px 0 28px; max-width: 36ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-trust { list-style: none; padding: 0; display: flex; gap: 26px; margin-top: 34px; flex-wrap: wrap; }
.hero-trust li { font-size: .9rem; color: var(--muted); }
.hero-trust strong { display: block; font-family: var(--serif); font-size: 1.5rem; color: var(--blue); }

.hero-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px; box-shadow: var(--sh-lg); position: relative;
}
.hero-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: linear-gradient(90deg, var(--blue), var(--crimson)); }
.hc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hc-deadline { font-size: .82rem; color: var(--muted); font-weight: 500; }
.hero-card h3 { font-size: 1.25rem; color: var(--ink); margin-bottom: 18px; }

.badge { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.badge-amber { background: #fdf1d8; color: #8a6304; }

.ring-row { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.ring { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.ring svg { transform: rotate(-90deg); width: 92px; height: 92px; }
.ring circle { fill: none; stroke-width: 8; stroke: var(--blue-50); }
.ring .ring-fg {
  stroke: var(--blue); stroke-linecap: round;
  stroke-dasharray: 213.6;
  stroke-dashoffset: calc(213.6 - (213.6 * var(--p) / 100));
  transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1);
}
.ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 700; font-size: 1.4rem; color: var(--blue); }
.ring-num small { font-size: .8rem; }
.ring-meta p { font-weight: 600; }
.ring-meta small { color: var(--muted); }

.hc-checks { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.hc-checks li { position: relative; padding-left: 30px; font-size: .92rem; color: var(--ink-2); }
.hc-checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); }
.hc-checks li.done::before { background: var(--ok); border-color: var(--ok); }
.hc-checks li.done::after { content: ""; position: absolute; left: 6px; top: 5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hero-card .btn { width: 100%; }

/* ---------- Stats band ---------- */
.band { background: var(--blue-d); color: #fff; padding: clamp(36px, 5vw, 56px) 0; position: relative; }
.band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 300px at 80% 120%, rgba(155,28,46,.4), transparent 70%); pointer-events: none; }
.band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.stat { text-align: center; }
.stat .num { display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(2rem, 4.4vw, 2.9rem); color: #fff; }
.stat .lbl { font-size: .88rem; color: rgba(255,255,255,.72); letter-spacing: .02em; }
.accred { margin-top: 34px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 28px; position: relative; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16); }
.accred-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.6); }
.accred-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.accred-list li { font-family: var(--serif); font-weight: 600; font-size: .98rem; color: rgba(255,255,255,.88); }

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 100px) 0; }
.section-tint { background: var(--blue-50); }
.sec-head { max-width: 640px; margin-bottom: 38px; }
.kicker { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--crimson); margin-bottom: 12px; }
.kicker-light { color: var(--gold); }
.sec-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 700; color: var(--blue-d); }
.sec-sub { color: var(--ink-2); margin-top: 14px; font-size: 1.04rem; }

/* ---------- Filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.chip {
  font: 600 .9rem var(--sans); padding: 9px 18px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .12s;
}
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip.is-active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ---------- Programs ---------- */
.programs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prog {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 24px; display: flex; flex-direction: column; box-shadow: var(--sh-sm);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.prog:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: rgba(30,58,138,.3); }
.prog.hide { display: none; }
.prog-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pill { font-size: .72rem; font-weight: 700; letter-spacing: .03em; padding: 5px 11px; border-radius: 999px; }
.pill-blue { background: var(--blue-50); color: var(--blue); }
.pill-crimson { background: #f8e4e7; color: var(--crimson); }
.pill-amber { background: #fdf1d8; color: #8a6304; }
.level { font-size: .8rem; color: var(--muted); font-weight: 500; }
.prog h3 { font-size: 1.22rem; color: var(--ink); margin-bottom: 9px; }
.prog p { color: var(--ink-2); font-size: .94rem; flex: 1; }
.prog-bar { height: 6px; background: var(--blue-50); border-radius: 999px; overflow: hidden; margin: 18px 0 14px; }
.prog-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--crimson)); border-radius: 999px; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.prog.in-view .prog-bar span { width: var(--w); }
.prog-foot { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.prog-foot a { margin-left: auto; font-weight: 600; color: var(--crimson); }
.prog-foot a:hover { color: var(--crimson-d); }
.empty { text-align: center; color: var(--muted); padding: 40px 0; font-size: 1rem; }

/* ---------- Faculty ---------- */
.faculty-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.prof { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; text-align: center; box-shadow: var(--sh-sm); transition: transform .22s, box-shadow .22s; }
.prof:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.prof-avatar { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 1.25rem; color: #fff; background: var(--c); box-shadow: 0 4px 14px rgba(21,25,43,.2); }
.prof h3 { font-size: 1.1rem; color: var(--ink); }
.prof .role { color: var(--crimson); font-weight: 600; font-size: .86rem; margin: 5px 0 10px; }
.prof .bio { color: var(--ink-2); font-size: .88rem; }
.prof .cred { display: inline-block; margin-top: 12px; font-size: .76rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--blue-50); padding: 4px 11px; border-radius: 999px; }

/* ---------- Outcomes ---------- */
.outcomes-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.outcome-list { list-style: none; padding: 0; margin-top: 26px; display: grid; gap: 22px; }
.outcome-list li { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 7px 14px; align-items: center; }
.oc-lbl { font-size: .96rem; color: var(--ink-2); grid-column: 1; grid-row: 1; }
.outcome-list b { grid-column: 2; grid-row: 1; font-family: var(--serif); font-size: 1.2rem; color: var(--blue); }
.oc-bar { grid-column: 1 / -1; grid-row: 2; height: 8px; background: var(--blue-50); border-radius: 999px; position: relative; overflow: hidden; }
.oc-bar::after { content: ""; position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, var(--blue), var(--crimson)); border-radius: 999px; transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.in-view .oc-bar::after { width: var(--w); }
.outcomes-cards { display: grid; gap: 16px; }
.oc-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--crimson); border-radius: var(--r-md); padding: 22px 24px; box-shadow: var(--sh-sm); }
.oc-num { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.9rem; color: var(--blue-d); }
.oc-cap { color: var(--ink-2); font-size: .92rem; }

/* ---------- Testimonials ---------- */
.section-dark { background: var(--blue-d); color: #fff; position: relative; overflow: hidden; }
.section-dark::before { content: ""; position: absolute; top: -10%; right: -6%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(155,28,46,.35), transparent 70%); pointer-events: none; }
.sec-head-light h2 { color: #fff; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; }
.quote { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-md); padding: 26px; }
.quote p { font-family: var(--serif); font-size: 1.04rem; line-height: 1.55; color: rgba(255,255,255,.92); }
.quote footer { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.q-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: #fff; background: var(--c); flex-shrink: 0; }
.quote footer strong { display: block; font-size: .96rem; }
.quote footer small { color: rgba(255,255,255,.65); font-size: .82rem; }

/* ---------- Apply ---------- */
.apply { background: linear-gradient(160deg, var(--ivory), #f3eee0); }
.apply-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.apply-copy h2 { color: var(--blue-d); font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.apply-copy p { color: var(--ink-2); margin-top: 14px; font-size: 1.04rem; }
.apply-checks { list-style: none; padding: 0; margin-top: 22px; display: grid; gap: 11px; }
.apply-checks li { position: relative; padding-left: 30px; color: var(--ink-2); font-weight: 500; }
.apply-checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--crimson); }
.apply-checks li::after { content: ""; position: absolute; left: 6px; top: 6px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.apply-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-lg); display: grid; gap: 16px; }
.apply-form label { display: grid; gap: 7px; font-weight: 600; font-size: .9rem; color: var(--ink); }
.apply-form input, .apply-form select { font: 400 .98rem var(--sans); padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.apply-form input:focus, .apply-form select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,58,138,.16); }
.apply-form .invalid { border-color: var(--crimson); }
.err { font-size: .8rem; font-weight: 500; color: var(--crimson); min-height: 0; }
.form-note { font-size: .8rem; color: var(--muted); text-align: center; font-weight: 400; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,.75); padding: clamp(44px, 6vw, 64px) 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.foot-brand { display: flex; gap: 12px; align-items: flex-start; }
.foot-brand .crest { color: var(--crimson); }
.foot-brand strong { font-family: var(--serif); color: #fff; font-size: 1.05rem; }
.footer nav { display: flex; flex-direction: column; gap: 9px; }
.footer h4 { font-family: var(--sans); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 4px; }
.footer nav a { font-size: .92rem; color: rgba(255,255,255,.75); transition: color .2s; }
.footer nav a:hover { color: #fff; }
.foot-base { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; }
.foot-links { display: flex; gap: 18px; }
.foot-links a:hover { color: #fff; }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 300; display: grid; gap: 10px; width: min(380px, 92vw); }
.toast { background: var(--ink); color: #fff; padding: 14px 18px; border-radius: var(--r-md); box-shadow: var(--sh-lg); font-size: .92rem; display: flex; align-items: center; gap: 10px; border-left: 4px solid var(--ok); animation: toastIn .3s cubic-bezier(.2,.8,.2,1); }
.toast.out { animation: toastOut .3s forwards; }
.toast .t-ico { width: 22px; height: 22px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; flex-shrink: 0; color: #fff; font-size: .8rem; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(14px); } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-card { max-width: 440px; }
  .programs { grid-template-columns: repeat(2, 1fr); }
  .faculty-grid { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: 1fr; }
  .outcomes-inner, .apply-inner { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 70px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 12px 16px 18px; box-shadow: var(--sh-md);
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .25s, opacity .25s;
  }
  .nav-links.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-cta { margin-left: 0; text-align: center; }
  .band-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
}

@media (max-width: 520px) {
  .programs, .faculty-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .hero-trust { gap: 18px; }
  .accred { flex-direction: column; }
  .foot-base { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .prog-bar span, .oc-bar::after, .ring .ring-fg { transition: none; }
}

(function () {
  "use strict";

  /* ---------- Toast helper ---------- */
  var toastWrap = document.getElementById("toastWrap");
  function toast(msg) {
    var el = document.createElement("div");
    el.className = "toast";
    el.setAttribute("role", "status");
    el.innerHTML = '<span class="t-ico" aria-hidden="true">&#10003;</span><span></span>';
    el.querySelector("span:last-child").textContent = msg;
    toastWrap.appendChild(el);
    setTimeout(function () {
      el.classList.add("out");
      setTimeout(function () { el.remove(); }, 320);
    }, 3400);
  }

  /* ---------- Sticky nav shadow ---------- */
  var nav = document.getElementById("nav");
  var onScroll = function () {
    nav.classList.toggle("scrolled", window.scrollY > 8);
  };
  window.addEventListener("scroll", onScroll, { passive: true });
  onScroll();

  /* ---------- Mobile nav ---------- */
  var toggle = document.getElementById("navToggle");
  var navLinks = document.getElementById("navLinks");
  toggle.addEventListener("click", function () {
    var open = navLinks.classList.toggle("open");
    toggle.setAttribute("aria-expanded", String(open));
    toggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
  });
  navLinks.addEventListener("click", function (e) {
    if (e.target.tagName === "A" && navLinks.classList.contains("open")) {
      navLinks.classList.remove("open");
      toggle.setAttribute("aria-expanded", "false");
      toggle.setAttribute("aria-label", "Open menu");
    }
  });

  /* ---------- Scroll reveal + bar/ring animation ---------- */
  var io = new IntersectionObserver(function (entries) {
    entries.forEach(function (en) {
      if (en.isIntersecting) {
        en.target.classList.add("in-view");
        io.unobserve(en.target);
      }
    });
  }, { threshold: 0.16, rootMargin: "0px 0px -40px 0px" });

  document.querySelectorAll(".reveal, .prog, .outcomes-copy").forEach(function (el) {
    io.observe(el);
  });

  /* ---------- Animated stat counters ---------- */
  var statIo = new IntersectionObserver(function (entries) {
    entries.forEach(function (en) {
      if (!en.isIntersecting) return;
      var node = en.target;
      var target = parseInt(node.getAttribute("data-count"), 10);
      var suffix = node.getAttribute("data-suffix") || "";
      var start = null, dur = 1500;
      function tick(ts) {
        if (!start) start = ts;
        var p = Math.min((ts - start) / dur, 1);
        var eased = 1 - Math.pow(1 - p, 3);
        var val = Math.round(target * eased);
        node.textContent = val.toLocaleString("en-US") + suffix;
        if (p < 1) requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
      statIo.unobserve(node);
    });
  }, { threshold: 0.5 });
  document.querySelectorAll(".stat .num[data-count]").forEach(function (n) {
    statIo.observe(n);
  });

  /* ---------- Program filter ---------- */
  var chips = document.querySelectorAll(".chip");
  var progs = document.querySelectorAll(".prog[data-cat]");
  var emptyMsg = document.getElementById("emptyMsg");

  chips.forEach(function (chip) {
    chip.addEventListener("click", function () {
      chips.forEach(function (c) {
        c.classList.remove("is-active");
        c.setAttribute("aria-selected", "false");
      });
      chip.classList.add("is-active");
      chip.setAttribute("aria-selected", "true");

      var f = chip.getAttribute("data-filter");
      var shown = 0;
      progs.forEach(function (p) {
        var match = f === "all" || p.getAttribute("data-cat") === f;
        p.classList.toggle("hide", !match);
        if (match) shown++;
      });
      emptyMsg.hidden = shown !== 0;
    });
  });

  /* ---------- Apply form validation ---------- */
  var form = document.getElementById("applyForm");
  function showErr(id, msg) {
    var input = document.getElementById(id);
    var slot = form.querySelector('.err[data-for="' + id + '"]');
    if (msg) {
      input.classList.add("invalid");
      input.setAttribute("aria-invalid", "true");
      slot.textContent = msg;
    } else {
      input.classList.remove("invalid");
      input.removeAttribute("aria-invalid");
      slot.textContent = "";
    }
    return !msg;
  }

  form.addEventListener("submit", function (e) {
    e.preventDefault();
    var name = document.getElementById("fName").value.trim();
    var email = document.getElementById("fEmail").value.trim();
    var program = document.getElementById("fProgram").value;
    var ok = true;

    ok = showErr("fName", name ? "" : "Please enter your full name.") && ok;
    var emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    ok = showErr("fEmail", !email ? "Email is required." : !emailOk ? "Enter a valid email." : "") && ok;
    ok = showErr("fProgram", program ? "" : "Choose a program of interest.") && ok;

    if (!ok) {
      var firstBad = form.querySelector(".invalid");
      if (firstBad) firstBad.focus();
      return;
    }
    form.reset();
    toast("Thank you, " + name.split(" ")[0] + " — your prospectus is on its way.");
  });

  form.querySelectorAll("input, select").forEach(function (el) {
    el.addEventListener("input", function () {
      if (el.classList.contains("invalid")) showErr(el.id, "");
    });
  });

  /* ---------- Smooth-scroll focus management for in-page links ---------- */
  document.querySelectorAll('a[href^="#"]').forEach(function (a) {
    a.addEventListener("click", function (e) {
      var id = a.getAttribute("href");
      if (id.length < 2) return;
      var dest = document.querySelector(id);
      if (dest) {
        e.preventDefault();
        dest.scrollIntoView({ behavior: "smooth", block: "start" });
        dest.setAttribute("tabindex", "-1");
        setTimeout(function () { dest.focus({ preventScroll: true }); }, 500);
      }
    });
  });
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Ashworth University — Online Learning</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:opsz,[email protected],400;8..60,600;8..60,700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <a class="skip-link" href="#main">Skip to content</a>

  <header class="nav" id="nav">
    <div class="wrap nav-inner">
      <a class="brand" href="#main" aria-label="Ashworth University home">
        <span class="crest" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="26" height="26"><path d="M12 2 3 6v6c0 5 3.8 8.5 9 10 5.2-1.5 9-5 9-10V6z" fill="currentColor"/><path d="M12 6.5 8 8.5v3.2c0 2.4 1.7 4 4 4.8 2.3-.8 4-2.4 4-4.8V8.5z" fill="#fffef8"/></svg>
        </span>
        <span class="brand-text">
          <strong>Ashworth</strong>
          <em>University</em>
        </span>
      </a>

      <nav class="nav-links" id="navLinks" aria-label="Primary">
        <a href="#programs">Programs</a>
        <a href="#faculty">Faculty</a>
        <a href="#outcomes">Outcomes</a>
        <a href="#voices">Voices</a>
        <a class="nav-cta" href="#apply">Apply Now</a>
      </nav>

      <button class="nav-toggle" id="navToggle" aria-expanded="false" aria-controls="navLinks" aria-label="Open menu">
        <span></span><span></span><span></span>
      </button>
    </div>
  </header>

  <main id="main">
    <!-- HERO -->
    <section class="hero" id="top">
      <div class="wrap hero-inner">
        <div class="hero-copy reveal">
          <p class="eyebrow"><span class="dot"></span> Est. 1887 · Accredited Online Campus</p>
          <h1>Scholarship without borders. Degrees that travel with you.</h1>
          <p class="lede">Join 42,000 learners studying flexible, faculty-led programs from Ashworth University — rigorous classical instruction, delivered online and on your schedule.</p>
          <div class="hero-actions">
            <a class="btn btn-primary" href="#programs">Explore Programs</a>
            <a class="btn btn-ghost" href="#apply">Request Information</a>
          </div>
          <ul class="hero-trust" aria-label="Highlights">
            <li><strong>96%</strong> graduate satisfaction</li>
            <li><strong>1:14</strong> faculty ratio</li>
            <li><strong>5-week</strong> course terms</li>
          </ul>
        </div>

        <aside class="hero-card reveal" aria-label="Spring intake progress">
          <div class="hc-head">
            <span class="badge badge-amber">Spring Intake</span>
            <span class="hc-deadline">Closes Apr 30</span>
          </div>
          <h3>Seats filling for 2026</h3>
          <div class="ring-row">
            <div class="ring" style="--p:78">
              <svg viewBox="0 0 80 80" aria-hidden="true"><circle cx="40" cy="40" r="34"/><circle cx="40" cy="40" r="34" class="ring-fg"/></svg>
              <span class="ring-num">78<small>%</small></span>
            </div>
            <div class="ring-meta">
              <p>Cohort filled</p>
              <small>312 of 400 places confirmed</small>
            </div>
          </div>
          <ul class="hc-checks">
            <li class="done">Application portal open</li>
            <li class="done">Scholarship review live</li>
            <li>Orientation week — May 18</li>
          </ul>
          <a class="btn btn-primary btn-sm" href="#apply">Reserve your place</a>
        </aside>
      </div>
      <div class="hero-glow" aria-hidden="true"></div>
    </section>

    <!-- STATS / ACCREDITATION BAND -->
    <section class="band" aria-label="University statistics">
      <div class="wrap band-grid">
        <div class="stat reveal"><span class="num" data-count="42000" data-suffix="+">0</span><span class="lbl">Active learners</span></div>
        <div class="stat reveal"><span class="num" data-count="187">0</span><span class="lbl">Online degrees</span></div>
        <div class="stat reveal"><span class="num" data-count="92" data-suffix="%">0</span><span class="lbl">Completion rate</span></div>
        <div class="stat reveal"><span class="num" data-count="58">0</span><span class="lbl">Countries served</span></div>
      </div>
      <div class="wrap accred">
        <span class="accred-label">Accredited &amp; recognised by</span>
        <ul class="accred-list">
          <li>HLC Commission</li>
          <li>QAA Higher Education</li>
          <li>AACSB Business</li>
          <li>ABET Engineering</li>
        </ul>
      </div>
    </section>

    <!-- PROGRAMS -->
    <section class="section" id="programs">
      <div class="wrap">
        <header class="sec-head reveal">
          <p class="kicker">Degrees &amp; Certificates</p>
          <h2>Choose a program built for working scholars</h2>
          <p class="sec-sub">Filter by faculty to find the path that fits your ambitions. Every program is taught by tenured staff and structured in short, momentum-building terms.</p>
        </header>

        <div class="filters reveal" role="tablist" aria-label="Filter programs">
          <button class="chip is-active" data-filter="all" role="tab" aria-selected="true">All</button>
          <button class="chip" data-filter="business" role="tab" aria-selected="false">Business</button>
          <button class="chip" data-filter="science" role="tab" aria-selected="false">Sciences</button>
          <button class="chip" data-filter="arts" role="tab" aria-selected="false">Arts &amp; Letters</button>
          <button class="chip" data-filter="tech" role="tab" aria-selected="false">Technology</button>
        </div>

        <div class="programs" id="programGrid">
          <article class="prog reveal" data-cat="business">
            <div class="prog-top">
              <span class="pill pill-blue">Master's</span>
              <span class="level">Graduate</span>
            </div>
            <h3>MBA — Strategic Leadership</h3>
            <p>Lead organisations through change with a curriculum grounded in ethics, finance and operations.</p>
            <div class="prog-bar"><span style="--w:90%"></span></div>
            <div class="prog-foot"><span>24 months</span><span>·</span><span>40 credits</span><a href="#apply">Details →</a></div>
          </article>

          <article class="prog reveal" data-cat="science">
            <div class="prog-top">
              <span class="pill pill-crimson">BSc</span>
              <span class="level">Undergraduate</span>
            </div>
            <h3>BSc — Environmental Science</h3>
            <p>Field-driven study of climate systems, ecology and conservation policy with virtual labs.</p>
            <div class="prog-bar"><span style="--w:74%"></span></div>
            <div class="prog-foot"><span>36 months</span><span>·</span><span>120 credits</span><a href="#apply">Details →</a></div>
          </article>

          <article class="prog reveal" data-cat="tech">
            <div class="prog-top">
              <span class="pill pill-blue">MSc</span>
              <span class="level">Graduate</span>
            </div>
            <h3>MSc — Computer Science</h3>
            <p>Algorithms, distributed systems and applied machine learning, capstone with industry mentors.</p>
            <div class="prog-bar"><span style="--w:96%"></span></div>
            <div class="prog-foot"><span>18 months</span><span>·</span><span>36 credits</span><a href="#apply">Details →</a></div>
          </article>

          <article class="prog reveal" data-cat="arts">
            <div class="prog-top">
              <span class="pill pill-crimson">BA</span>
              <span class="level">Undergraduate</span>
            </div>
            <h3>BA — Classical Studies</h3>
            <p>Read Greek and Latin literature in seminar cohorts led by published classicists.</p>
            <div class="prog-bar"><span style="--w:62%"></span></div>
            <div class="prog-foot"><span>36 months</span><span>·</span><span>120 credits</span><a href="#apply">Details →</a></div>
          </article>

          <article class="prog reveal" data-cat="business">
            <div class="prog-top">
              <span class="pill pill-amber">Certificate</span>
              <span class="level">Professional</span>
            </div>
            <h3>Cert. — Data-Driven Finance</h3>
            <p>A focused six-month track in financial modelling, analytics and reporting for managers.</p>
            <div class="prog-bar"><span style="--w:55%"></span></div>
            <div class="prog-foot"><span>6 months</span><span>·</span><span>12 credits</span><a href="#apply">Details →</a></div>
          </article>

          <article class="prog reveal" data-cat="science">
            <div class="prog-top">
              <span class="pill pill-blue">PhD</span>
              <span class="level">Doctoral</span>
            </div>
            <h3>PhD — Cognitive Psychology</h3>
            <p>Mentored research into perception, memory and decision-making with annual residencies.</p>
            <div class="prog-bar"><span style="--w:84%"></span></div>
            <div class="prog-foot"><span>48 months</span><span>·</span><span>Research</span><a href="#apply">Details →</a></div>
          </article>
        </div>
        <p class="empty" id="emptyMsg" hidden>No programs in this faculty yet — try another filter.</p>
      </div>
    </section>

    <!-- FACULTY -->
    <section class="section section-tint" id="faculty">
      <div class="wrap">
        <header class="sec-head reveal">
          <p class="kicker">Meet the Faculty</p>
          <h2>Learn from scholars who shape their fields</h2>
        </header>
        <div class="faculty-grid">
          <figure class="prof reveal">
            <div class="prof-avatar" style="--c:#1e3a8a">EM</div>
            <figcaption>
              <h3>Dr. Eleanor Mbeki</h3>
              <p class="role">Professor of Environmental Science</p>
              <p class="bio">Lead author on three IPCC working papers; teaches climate modelling.</p>
              <span class="cred">PhD, Oxford</span>
            </figcaption>
          </figure>
          <figure class="prof reveal">
            <div class="prof-avatar" style="--c:#9b1c2e">RT</div>
            <figcaption>
              <h3>Prof. Rafael Tan</h3>
              <p class="role">Chair, Computer Science</p>
              <p class="bio">Distributed systems researcher and former principal engineer.</p>
              <span class="cred">PhD, MIT</span>
            </figcaption>
          </figure>
          <figure class="prof reveal">
            <div class="prof-avatar" style="--c:#1e3a8a">SH</div>
            <figcaption>
              <h3>Dr. Sofia Herrera</h3>
              <p class="role">Reader in Classical Studies</p>
              <p class="bio">Translator of late antique texts and award-winning seminar lead.</p>
              <span class="cred">DPhil, Cambridge</span>
            </figcaption>
          </figure>
          <figure class="prof reveal">
            <div class="prof-avatar" style="--c:#9b1c2e">JO</div>
            <figcaption>
              <h3>Prof. James Okafor</h3>
              <p class="role">Director, Strategic Leadership</p>
              <p class="bio">Two decades advising boards on ethics and organisational change.</p>
              <span class="cred">DBA, INSEAD</span>
            </figcaption>
          </figure>
        </div>
      </div>
    </section>

    <!-- OUTCOMES -->
    <section class="section" id="outcomes">
      <div class="wrap outcomes-inner">
        <div class="outcomes-copy reveal">
          <p class="kicker">Student Outcomes</p>
          <h2>Graduates who go further, faster</h2>
          <p class="sec-sub">Our career services and alumni network turn study into momentum. Track the difference an Ashworth degree makes within a year of graduation.</p>
          <ul class="outcome-list">
            <li><span class="oc-bar" style="--w:89%"></span><span class="oc-lbl">Employed or promoted within 12 months</span><b>89%</b></li>
            <li><span class="oc-bar" style="--w:71%"></span><span class="oc-lbl">Reported a salary increase</span><b>71%</b></li>
            <li><span class="oc-bar" style="--w:64%"></span><span class="oc-lbl">Advanced to further study</span><b>64%</b></li>
          </ul>
        </div>
        <div class="outcomes-cards">
          <div class="oc-card reveal"><span class="oc-num">$18.4k</span><span class="oc-cap">Median salary lift after graduation</span></div>
          <div class="oc-card reveal"><span class="oc-num">2,100+</span><span class="oc-cap">Employer partners hiring alumni</span></div>
          <div class="oc-card reveal"><span class="oc-num">Top 5%</span><span class="oc-cap">Online value ranking, 2025</span></div>
        </div>
      </div>
    </section>

    <!-- TESTIMONIALS -->
    <section class="section section-dark" id="voices">
      <div class="wrap">
        <header class="sec-head sec-head-light reveal">
          <p class="kicker kicker-light">Student Voices</p>
          <h2>Stories from our community</h2>
        </header>
        <div class="quotes">
          <blockquote class="quote reveal">
            <p>“Studying around night shifts felt impossible until Ashworth. The five-week terms meant I always saw progress — I never lost momentum.”</p>
            <footer><span class="q-av" style="--c:#9b1c2e">MA</span><span><strong>Maya Aldridge</strong><small>MSc Computer Science ’25</small></span></footer>
          </blockquote>
          <blockquote class="quote reveal">
            <p>“The faculty actually know your name. My thesis advisor replied within hours and pushed my research further than I thought possible.”</p>
            <footer><span class="q-av" style="--c:#1e3a8a">DK</span><span><strong>Daniel Kovač</strong><small>PhD Cognitive Psychology</small></span></footer>
          </blockquote>
          <blockquote class="quote reveal">
            <p>“I earned my MBA from three different countries while my work relocated me. The credits and support followed me everywhere.”</p>
            <footer><span class="q-av" style="--c:#9b1c2e">PN</span><span><strong>Priya Nair</strong><small>MBA Strategic Leadership ’24</small></span></footer>
          </blockquote>
        </div>
      </div>
    </section>

    <!-- APPLY CTA -->
    <section class="section apply" id="apply">
      <div class="wrap apply-inner reveal">
        <div class="apply-copy">
          <p class="kicker">Admissions 2026</p>
          <h2>Begin your application today</h2>
          <p>Tell us where to send your prospectus and an advisor will reach out within one business day. No commitment — just clarity.</p>
          <ul class="apply-checks">
            <li>No application fee</li>
            <li>Transfer credits assessed free</li>
            <li>Scholarships up to 40% of tuition</li>
          </ul>
        </div>
        <form class="apply-form" id="applyForm" novalidate>
          <label>Full name
            <input type="text" name="name" id="fName" required placeholder="Avery Sinclair" autocomplete="name" />
            <span class="err" data-for="fName"></span>
          </label>
          <label>Email address
            <input type="email" name="email" id="fEmail" required placeholder="[email protected]" autocomplete="email" />
            <span class="err" data-for="fEmail"></span>
          </label>
          <label>Program of interest
            <select name="program" id="fProgram" required>
              <option value="">Select a program…</option>
              <option>MBA — Strategic Leadership</option>
              <option>MSc — Computer Science</option>
              <option>BSc — Environmental Science</option>
              <option>BA — Classical Studies</option>
              <option>PhD — Cognitive Psychology</option>
            </select>
            <span class="err" data-for="fProgram"></span>
          </label>
          <button class="btn btn-crimson" type="submit">Request prospectus</button>
          <p class="form-note">By submitting you agree to be contacted about admissions.</p>
        </form>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="wrap foot-grid">
      <div class="foot-brand">
        <span class="crest" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 2 3 6v6c0 5 3.8 8.5 9 10 5.2-1.5 9-5 9-10V6z" fill="currentColor"/><path d="M12 6.5 8 8.5v3.2c0 2.4 1.7 4 4 4.8 2.3-.8 4-2.4 4-4.8V8.5z" fill="#fffef8"/></svg>
        </span>
        <p><strong>Ashworth University</strong><br />Lux et Veritas · Since 1887</p>
      </div>
      <nav aria-label="Programs"><h4>Study</h4><a href="#programs">Undergraduate</a><a href="#programs">Graduate</a><a href="#programs">Doctoral</a><a href="#programs">Certificates</a></nav>
      <nav aria-label="University"><h4>University</h4><a href="#faculty">Faculty</a><a href="#outcomes">Outcomes</a><a href="#voices">Alumni</a><a href="#apply">Admissions</a></nav>
      <nav aria-label="Support"><h4>Support</h4><a href="#top">Student portal</a><a href="#top">Library</a><a href="#top">Advising</a><a href="#top">Contact</a></nav>
    </div>
    <div class="wrap foot-base">
      <p>© 2026 Ashworth University. A fictional institution for demonstration only.</p>
      <p class="foot-links"><a href="#top">Privacy</a><a href="#top">Accessibility</a><a href="#top">Accreditation</a></p>
    </div>
  </footer>

  <div class="toast-wrap" id="toastWrap" aria-live="polite" aria-atomic="true"></div>

  <script src="script.js"></script>
</body>
</html>