@font-face {font-family: Vmi; src:url('assets/Roboto-Regular.ttf') format('truetype'); font-display:swap; font-weight:400}
@font-face {font-family: Vmi; src:url('assets/Roboto-Bold.ttf') format('truetype'); font-display:swap; font-weight:700}
:root {--navy:#10243c;--dark:#091a30;--gold:#f4ca72;--white:#fff;--paper:#f7f5ef;--ink:#162a41;--muted:#4f6072;--border:#d9e0e7;--wrap:1180px}
*,*::before,*::after {box-sizing:border-box}
body {margin:0;background:white;color:var(--ink);font:16px/1.6 Vmi,Arial,sans-serif}
img {display:block;max-width:100%;height:auto}
a {color:inherit;text-underline-offset:.22em}
a:focus-visible,button:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {outline:3px solid #007ca1;outline-offset:4px}
.wrap {width:min(var(--wrap),calc(100% - 96px));margin-inline:auto}
.skip {position:absolute;left:12px;top:8px;transform:translateY(-150%);z-index:5;padding:10px;background:white;color:var(--navy)}
.skip:focus {transform:none}
.site-header {background:white;border-bottom:1px solid var(--border)}
.header-inner {display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:83px}
.brand {display:block;width:172px;flex-shrink:0}
nav {display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,2.5vw,32px)}
nav a {font-weight:700;font-size:.9rem;text-decoration:none}
nav a:hover,.text-link:hover {text-decoration:underline}
.button {display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:49px;padding:11px 21px;background:var(--gold);color:var(--dark);border:1px solid transparent;border-radius:4px;text-decoration:none;font:700 .92rem/1.25 Vmi,Arial,sans-serif;cursor:pointer;white-space:nowrap}
.button:hover {background:#ffda88}
.button.small {min-height:43px;padding:9px 16px}
.registration-links {display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.registration-links .button {gap:7px}
.button.outline {background:transparent;border-color:#8393a5;color:var(--navy)}
.button.outline:hover {background:#eef3f7}
.hero {
  background-color:#f8f4e9;
  background-image:linear-gradient(#1329450b 1px,transparent 1px),linear-gradient(90deg,#1329450b 1px,transparent 1px);
  background-size:28px 28px;
  color:var(--navy);
  overflow:hidden;
}
.hero-grid {display:grid;grid-template-columns:1.04fr 1fr;align-items:center;gap:clamp(32px,6vw,86px);padding-block:clamp(60px,8vw,105px)}
.formula-section {position:relative;isolation:isolate}
.formula-background {position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;color:#183653}
.research .formula-background,.contact .formula-background {color:#f4ca72}
.formula-background span {
  position:absolute;
  font:italic clamp(2.6rem,8vw,8.5rem)/1.1 Georgia,serif;
  white-space:nowrap;
  opacity:.085;
}
.formula-background span:first-child {top:6%;right:3%}
.formula-background span:last-child {bottom:5%;left:4%}
.formula-background sup {font-size:.62em}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .formula-section {view-timeline-name:--formula-section;view-timeline-axis:block}
    .formula-background span {
      animation:formula-drift linear both;
      animation-timeline:--formula-section;
      animation-range:cover 10% cover 90%;
    }
    .formula-background span:last-child {animation-direction:reverse}
  }
}
@keyframes formula-drift {
  0% {opacity:0;transform:translateY(18px)}
  42% {opacity:.105}
  100% {opacity:.015;transform:translateY(-18px)}
}
.eyebrow {font:700 .74rem/1.5 Vmi,Arial,sans-serif;letter-spacing:.15em;color:#765819;margin:0 0 17px}
.contact .eyebrow,.research .eyebrow {color:var(--gold)}
.eyebrow span {display:inline-block;width:18px;height:2px;background:currentColor;vertical-align:middle;margin-right:7px}
h1,h2,h3,p {margin-top:0}
h1,h2 {font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.038em;line-height:1.03}
h1 {font:700 clamp(2.75rem,6.5vw,6.1rem)/.99 Vmi,Arial,sans-serif;letter-spacing:-.065em;margin-bottom:24px}
h1 em {display:block;color:#774708;font:italic 400 1em/1.04 Georgia,serif;letter-spacing:-.05em}
h2 {font-size:clamp(2.2rem,4.7vw,3.9rem);margin-bottom:15px}
h3 {font-size:1.22rem;line-height:1.22;margin-bottom:10px}
.intro {font-size:clamp(1rem,1.5vw,1.22rem);max-width:40ch;color:#34495e;margin-bottom:28px}
.hero .button {background:var(--navy);color:white}
.hero .button:hover {background:#243e5d}
.actions {display:flex;flex-wrap:wrap;align-items:center;gap:13px 22px}
.text-link {font-weight:700;text-decoration:none}
.text-link span {margin-left:4px}
.hero-art {position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:340px;aspect-ratio:1.18;border:1px solid #61788f;padding:18px;background:#16344f;overflow:hidden}
.hero-art::before {content:'';position:absolute;inset:0;background:linear-gradient(130deg,#122d49e8,#10243cc7),url('assets/banner.jpg') center/cover}
.math-lab {min-width:0;background:#101f35;color:white;padding:clamp(16px,3vw,28px);border-radius:10px;border:1px solid #233a54;box-shadow:7px 7px 0 #e4cd99}
.lab-heading {display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px}
.lab-heading p {margin:0 0 5px;color:var(--gold);font:700 .7rem/1.4 monospace;letter-spacing:.12em}
.lab-heading h2 {margin:0;font:700 clamp(1.2rem,2.3vw,1.8rem)/1.16 Vmi,Arial,sans-serif;letter-spacing:-.03em}
.lab-equation {background:#21354e;color:#fff0c9;padding:5px 9px;border-radius:4px;font:700 clamp(.8rem,1.45vw,1rem)/1.3 monospace;white-space:nowrap}
.lab-plot {display:block;width:100%;height:auto;margin-block:12px 7px;background:#0b182b;border:1px solid #30445c;border-radius:5px}
.lab-controls:not([hidden]) {display:grid;gap:3px}
.lab-controls label {font-size:.88rem;font-weight:700}
.lab-controls input {width:100%;height:30px;margin:0;accent-color:var(--gold);cursor:pointer}
.lab-controls input:focus-visible {outline:2px solid var(--gold);outline-offset:3px}
.lab-note {min-height:2.8em;margin:4px 0 0;color:#d2deed;font-size:.82rem;line-height:1.4}
.art-top,.art-bottom {position:relative;z-index:1;display:flex;justify-content:space-between;gap:12px;color:#f0f5fb;font:700 .65rem/1.35 Vmi,Arial,sans-serif;letter-spacing:.15em}
.graph {position:relative;width:100%;max-height:310px;min-height:0}
.fact-band {background:var(--paper);border-bottom:1px solid #e8e2d5}
.facts {display:grid;grid-template-columns:repeat(3,1fr);padding-block:22px}
.facts div {display:grid;padding:4px 22px;line-height:1.35;border-left:1px solid #ddd5c5}
.facts div:first-child {padding-left:0;border-left:0}
.facts strong {font:400 clamp(1.2rem,2.7vw,2rem)/1.15 Georgia,serif}
.facts span {color:var(--muted);font-size:.82rem;margin-top:6px}
.section {padding-block:clamp(56px,8vw,104px)}
.section-head {display:grid;grid-template-columns:1fr minmax(220px,36%);gap:22px;align-items:end;margin-bottom:28px}
.section-head > p {color:var(--muted);margin-bottom:16px;max-width:40ch}
.course-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.card {display:flex;flex-direction:column;min-width:0;padding:27px 23px 25px;border:1px solid var(--border);border-top:3px solid var(--navy);background:white}
.course-tag {display:flex;justify-content:space-between;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.13em;color:#765819;margin-bottom:24px}
.course-tag span {color:#65788b}
.card h3 {font:400 clamp(1.65rem,2.5vw,2.15rem)/1.12 Georgia,serif}
.card p:not(.course-tag) {color:var(--muted)}
.card .text-link {margin-top:auto;font-size:.9rem;color:#164c70}
.university {margin-top:36px;padding:clamp(22px,4vw,46px);background:#edf3f8;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.university h2 {font-size:clamp(2rem,4vw,3rem)}
.subjects {list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.subjects li {border:1px solid #c7d5e1;background:white;padding:7px 12px;border-radius:4px;font-size:.9rem}
.credential {font-weight:700}
.research-art {margin:0}
.mode-grid {display:grid;grid-template-columns:1fr 1fr;gap:17px}
.approach {background:var(--paper)}
.approach-grid,.contact-grid {display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,7vw,88px);align-items:start}
.approach-grid > div > p:not(.eyebrow) {max-width:53ch;color:var(--muted)}
blockquote {margin:25px 0 0;border-left:3px solid #b18a39;padding-left:17px}
blockquote p {margin-bottom:4px;font:italic 1.2rem/1.5 Georgia,serif}
blockquote footer {font-size:.85rem;color:var(--muted)}
.steps {padding:0;margin:0;list-style:none}
.steps li {display:grid;grid-template-columns:auto 1fr;gap:15px;padding:18px 0;border-top:1px solid #dcd5c6}
.steps li:last-child {border-bottom:1px solid #dcd5c6}
.steps li > span {font-weight:700;color:#765819;font-size:.76rem;padding-top:2px}
.steps p {margin-bottom:0;color:var(--muted)}
.research {background:var(--navy);color:white}
.research .approach-grid {align-items:center}
.research .approach-grid > div > p:not(.eyebrow) {color:#d3deeb}
.contact {background:var(--dark);color:white}
.contact-grid > div:first-child > p:not(.eyebrow),.contact-details .note {color:#d3deeb}
.contact-details {border-top:1px solid #566981;padding-top:20px;margin-top:24px;overflow-wrap:anywhere}
.contact-details h3 {font-size:1rem}
.contact-details a {color:var(--gold)}
.contact-details p {margin:8px 0}
address {font-style:normal}
.note {font-size:.85rem}
.enquiry-card {background:white;color:var(--ink);padding:clamp(19px,4vw,36px);border-radius:5px}
.enquiry-card > p {color:var(--muted)}
form:not([hidden]) {display:grid;gap:9px}
form label {font-size:.9rem;font-weight:700}
select,textarea {width:100%;padding:11px;border:1px solid #a8b5c2;border-radius:4px;font:inherit;color:inherit;background:white}
textarea {resize:vertical}
form button {justify-self:start;margin-top:8px}
.site-footer {background:#071426;color:white;border-top:1px solid #405168}
.footer-inner {display:flex;justify-content:space-between;align-items:center;gap:18px;padding-block:22px;font-size:.88rem}
.footer-inner p {margin:0;font-weight:700}
.footer-inner span {display:block;font-weight:400;color:#c0cddd}
.footer-inner a {white-space:nowrap}
@media(max-width:850px) {
  .header-inner {display:grid;grid-template-columns:1fr;gap:8px;padding-block:5px 12px}
  .registration-links {grid-row:2}
  .registration-links .button {padding-inline:10px;font-size:.82rem}
  .header-inner nav {justify-content:flex-start;gap:8px 17px}
  .wrap {width:calc(100% - 48px)}
  .hero-grid {gap:30px}
  .hero-art {min-height:260px}
  .card {padding-inline:16px}
}
@media(max-width:670px) {
  .wrap {width:calc(100% - 36px)}
  .brand {width:140px}
  nav a {font-size:.83rem}
  .hero-grid,.section-head,.course-grid,.approach-grid,.contact-grid,.university,.mode-grid {grid-template-columns:1fr}
  .hero-grid {padding-block:45px 39px}
  .hero-art {min-height:0;aspect-ratio:1.34;padding:13px}
  .section-head {gap:3px;margin-bottom:13px}
  .facts div {padding-inline:9px}
  .facts span {font-size:.74rem}
  .card {padding:20px}
  .course-tag {margin-bottom:14px}
}