:root { --navy:#082d68; --ink:#122446; --gold:#dfa92e; --cream:#f8f5ee; --line:#dbe2ec; --muted:#5d6f8d; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:#fff; font:16px/1.6 'DM Sans',sans-serif; } a { color:inherit; text-decoration:none; } button { font:inherit; cursor:pointer; } .site-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px clamp(24px,6vw,96px); border-bottom:1px solid #e5e9f0; background:#fffffff2; backdrop-filter:blur(14px); } .brand { display:inline-flex; align-items:center; gap:11px; color:#09316d; font-size:17px; font-weight:700; letter-spacing:.05em; line-height:1.02; white-space:nowrap; } .brand img { width:45px; height:45px; object-fit:contain; } .brand small { display:block; margin-top:5px; color:#b77813; font-size:11px; letter-spacing:.2em; } nav { display:flex; gap:30px; font-size:14px; font-weight:600; } nav a:hover, .programme-grid a:hover { color:#a76f0d; } .login-button, .primary-button, .light-button { border:0; border-radius:5px; padding:12px 18px; background:#1959bf; color:#fff; font-weight:700; box-shadow:0 8px 18px #0d3f8c22; } .login-button span, .primary-button span, .light-button span { margin-left:8px; } .hero { min-height:620px; display:grid; grid-template-columns:minmax(0,1.06fr) minmax(420px,.94fr); background:var(--cream); } .hero-copy { display:flex; flex-direction:column; justify-content:center; padding:80px clamp(30px,8vw,135px); } .eyebrow { margin:0 0 17px; color:#b47b19; font-size:12px; font-weight:700; letter-spacing:.15em; } h1,h2,h3 { font-family:'Playfair Display',Georgia,serif; line-height:1.08; } h1 { max-width:700px; margin:0; font-size:clamp(43px,5vw,76px); letter-spacing:-.045em; } h1 em { color:#1a5bb9; font-style:normal; } .hero-text { max-width:530px; margin:26px 0; color:var(--muted); font-size:18px; } .hero-actions { display:flex; flex-wrap:wrap; gap:13px; } .primary-button { padding:14px 22px; } .secondary-button { padding:13px 21px; border:1px solid #aab6c8; border-radius:5px; font-weight:700; } .hero-stats { display:flex; gap:34px; margin:58px 0 0; } .hero-stats div { border-left:2px solid var(--gold); padding-left:12px; } .hero-stats dt { font-size:14px; font-weight:700; } .hero-stats dd { margin:0; color:var(--muted); font-size:13px; } .hero-photo { position:relative; min-height:100%; overflow:hidden; background:center/cover url('https://res.cloudinary.com/ywbvk3ek/image/upload/IMG-20260901-WA0008_1'); } .photo-overlay { position:absolute; inset:0; background:linear-gradient(130deg,#062558a9,#0e4b9399); } .hero-photo p { position:absolute; right:38px; bottom:33px; margin:0; color:#fff; font-size:11px; font-weight:700; letter-spacing:.16em; } .section { padding:100px clamp(25px,8vw,135px); } .about-section { display:grid; grid-template-columns:.85fr 1fr; gap:90px; } h2 { margin:0; font-size:clamp(34px,4vw,53px); letter-spacing:-.04em; } .about-copy { max-width:680px; color:var(--muted); font-size:18px; } .about-copy p:first-child { margin-top:0; color:var(--ink); } .programmes-section { background:#f5f7fb; } .section-heading { display:grid; grid-template-columns:1fr .75fr; gap:50px; align-items:end; margin-bottom:44px; } .section-heading > p { margin:0; color:var(--muted); } .programme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .programme-grid article { min-height:280px; padding:30px; border:1px solid var(--line); background:#fff; } .programme-number { color:#c68d20; font-size:13px; font-weight:700; letter-spacing:.15em; } .programme-grid h3 { margin:30px 0 12px; font-size:27px; } .programme-grid p { min-height:96px; margin:0 0 18px; color:var(--muted); font-size:14px; } .programme-grid a { color:#154b9e; font-size:14px; font-weight:700; } .programme-grid a span { padding-left:8px; } .callout { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:72px clamp(25px,8vw,135px); color:#fff; background:linear-gradient(110deg,#082d68,#1457ac); } .callout h2 { font-size:44px; } .callout p:last-child { max-width:600px; margin:14px 0 0; color:#dce8ff; } .light-button { min-width:167px; color:#082d68; background:#fff; box-shadow:none; } .contact-section { display:grid; grid-template-columns:1.25fr .75fr; gap:45px; } .contact-section > div > p:last-child { max-width:500px; color:var(--muted); } address { display:flex; flex-direction:column; justify-content:center; gap:8px; font-style:normal; font-size:18px; font-weight:700; } address a { color:#1554af; } address p { margin:15px 0 0; color:var(--muted); font-size:15px; font-weight:400; } footer { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:30px clamp(25px,8vw,135px); border-top:1px solid #e4e9f1; color:var(--muted); font-size:13px; } footer .brand { font-size:14px; } footer .brand img { width:38px; height:38px; } dialog { width:min(390px,calc(100% - 40px)); border:0; border-radius:16px; padding:0; box-shadow:0 24px 70px #00184b47; } dialog::backdrop { background:#081b3c88; backdrop-filter:blur(3px); } dialog form { position:relative; padding:45px 35px; text-align:center; } .close { position:absolute; top:12px; right:14px; border:0; background:transparent; color:#203657; font-size:29px; line-height:1; } .coming-soon-mark { display:grid; width:55px; height:55px; margin:0 auto 15px; place-items:center; border-radius:50%; color:#c78b1e; background:#fff5dd; font-size:26px; } dialog h2 { margin:0; font-size:35px; }
dialog form label { display:block; margin:15px 0 0; color:var(--ink); font-size:13px; font-weight:700; text-align:left; } dialog form input { width:100%; margin-top:6px; border:1px solid var(--line); border-radius:6px; padding:12px; color:var(--ink); font:inherit; } dialog form .primary-button { width:100%; margin-top:10px; } .login-copy,.login-message { color:var(--muted); font-size:14px; } .login-message { min-height:22px; color:#a13c42; text-align:left; }
@media (max-width:800px) { .site-header { padding:13px 20px; } nav { display:none; } .login-button { padding:10px 13px; font-size:13px; } .hero { grid-template-columns:1fr; } .hero-photo { min-height:330px; grid-row:1; } .hero-copy { padding:57px 25px 60px; } .hero-stats { gap:16px; margin-top:37px; } .about-section,.section-heading,.contact-section { grid-template-columns:1fr; gap:28px; } .section { padding:70px 25px; } .programme-grid { grid-template-columns:1fr; } .programme-grid article { min-height:0; } .programme-grid p { min-height:0; } .callout { display:block; padding:58px 25px; } .callout h2 { font-size:38px; } .light-button { margin-top:26px; } footer { align-items:flex-start; flex-direction:column; padding:28px 25px; } }