/* Fonts are served from this site, so visitors never contact Google */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/newsreader.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/newsreader-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/instrument-sans.woff2") format("woff2");
}

:root {
  --midnight: #172D4B;
  --ivory: #F7F3EA;
  --gold: #B99A60;
  --charcoal: #292D32;
  --sage: #DCE6E4;
  --line: rgba(23, 45, 75, .16);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(64px, 9vw, 120px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 72px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  color: var(--midnight);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.012em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.05; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: 1.625rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.wrap { width: min(1200px, 100%); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 20;
  padding: 8px 16px;
  background: var(--midnight);
  color: var(--ivory);
}
.skip-link:focus { top: 8px; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--midnight);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); flex: none; }

.lede { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.55; max-width: 34em; }

/* Text the tutor still needs to supply */
.ph {
  background: var(--sage);
  color: var(--midnight);
  padding: .05em .3em;
  border-bottom: 1px dashed var(--midnight);
  font-family: var(--sans);
  font-size: .9em;
  letter-spacing: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.btn {
  display: inline-block;
  padding: 15px 26px;
  border: 1px solid var(--midnight);
  background: var(--midnight);
  color: var(--ivory);
  font: 500 1rem/1.3 var(--sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.btn:hover { background: transparent; color: var(--midnight); }
.btn-small { padding: 10px 18px; font-size: .9375rem; }

.text-link {
  color: var(--midnight);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.text-link:hover { text-decoration-thickness: 2px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.wordmark {
  margin: 0;
  color: var(--midnight);
  font-family: var(--serif);
  font-size: 1.4375rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 12px;
}
.wordmark img { width: auto; height: 46px; flex: none; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: .9688rem; white-space: nowrap; }
.site-nav a:not(.btn) { color: var(--midnight); text-decoration: none; padding-block: 4px; border-bottom: 1px solid transparent; }
.site-nav a:not(.btn):hover { border-color: var(--gold); }
.nav-toggle {
  display: none;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--midnight);
  font: 500 .9375rem var(--sans);
  cursor: pointer;
}

/* Hero: the arched portrait echoes the niches on the Radcliffe Camera behind it */
.hero { padding-block: clamp(48px, 7vw, 96px); }
.hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(40px, 5vw, 64px); align-items: center; }
.hero h1 { margin-bottom: 24px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 36px; }
.portrait { position: relative; margin: 0; padding: 14px 14px 0; }
.portrait::before {
  content: "";
  position: absolute;
  inset: 0 0 34px;
  border: 1px solid var(--gold);
  border-radius: 999px 999px 0 0;
  pointer-events: none;
}
.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 999px 999px 0 0;
}
.portrait figcaption { margin-top: 12px; font-size: .875rem; color: var(--charcoal); text-align: center; }

/* Credentials */
.credentials { background: var(--midnight); color: var(--ivory); }
.credential-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px clamp(24px, 3vw, 48px); list-style: none; margin: 0; padding: clamp(28px, 3vw, 40px) 0; font-size: .9688rem; line-height: 1.45; }
.credential-list strong { display: block; margin-bottom: 4px; color: var(--ivory); font: 400 1.75rem/1.15 var(--serif); }

.lesson-bar + .section-rule { padding-top: var(--section); }

/* Free offers */
.offers { border-bottom: 1px solid var(--line); }
.offers-grid { display: grid; grid-template-columns: 1fr 1fr; }
.offer { padding-block: clamp(32px, 4vw, 48px); }
.offer:first-child { padding-right: clamp(24px, 5vw, 64px); border-right: 1px solid var(--line); }
.offer:last-child { padding-left: clamp(24px, 5vw, 64px); }
.offer h2 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); margin-bottom: 12px; }
.offer-tag { margin-bottom: 8px; color: var(--midnight); font-size: .875rem; font-weight: 600; }

/* Sections */
.section { padding-block: var(--section); }
.section-head { margin-bottom: clamp(32px, 4vw, 56px); max-width: 720px; }
.section-rule { padding-top: 0; }
.section-rule > .wrap { position: relative; }

.subjects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.subject { display: flex; flex-direction: column; padding: clamp(24px, 2.5vw, 32px); background: var(--midnight); color: var(--ivory); }
.subject-gold { background: var(--gold); color: var(--midnight); }
.subject-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.subject-icon { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.subject-gold .subject-icon { stroke: var(--midnight); }
.subject h3 { margin: 0; color: inherit; font-size: clamp(1.875rem, 2.6vw, 2.25rem); }
.subject h4 { margin: 0 0 4px; color: inherit; font: 600 .9688rem/1.35 var(--sans); }
.subject > p { font-size: .9688rem; }
.subject-callout, .subject-points li { padding: 12px 14px; background: rgba(247, 243, 234, .09); border-left: 2px solid var(--gold); }
.subject-gold .subject-points li { background: rgba(247, 243, 234, .32); border-left-color: var(--midnight); }
.subject-callout { margin-bottom: 20px; }
.subject-callout p, .subject-points p { margin: 0; font-size: .875rem; line-height: 1.45; }
.subject-points { display: grid; gap: 10px; list-style: none; margin: 4px 0 24px; padding: 0; }
.subject-btn { margin-top: auto; }
.subject .btn:hover { background: var(--ivory); border-color: var(--ivory); color: var(--raspberry); }


.how-grid, .about-grid, .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.how-grid .section-head, .about-grid .section-head, .contact-grid .section-head { margin-bottom: 0; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li { counter-increment: step; position: relative; padding: 0 0 32px 72px; }
.steps li + li { padding-top: 32px; border-top: 1px solid var(--line); }
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  color: var(--gold);
  font: 400 3rem/1 var(--serif);
}
.steps h3 { margin-bottom: 8px; }

.about { padding-top: 0; }
.about-grid { border-top: 1px solid var(--line); padding-top: var(--section); }
.prose { font-size: 1.125rem; max-width: 36em; }
.about-grid .section-head { margin-bottom: 40px; }
.pull { margin: 0; padding-left: 24px; border-left: 1px solid var(--gold); color: var(--midnight); font: 400 clamp(1.5rem, 2.2vw, 1.875rem)/1.3 var(--serif); max-width: 22em; }

/* Scholarship */
.scholarship { background: var(--midnight); color: var(--ivory); padding-block: var(--section); }
.scholarship h2, .scholarship h3 { color: var(--ivory); }
.scholarship .eyebrow { color: var(--gold); }
.scholarship-intro { max-width: 820px; margin-bottom: clamp(40px, 5vw, 72px); }
.scholarship-intro h2 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); margin-bottom: 24px; }
.scholarship-why { margin-top: 20px; max-width: 38em; color: var(--sage); }
.scholarship-grid h3 { margin-bottom: 14px; }
.criteria { list-style: none; counter-reset: criterion; margin: 0; padding: 0; }
.criteria > li { counter-increment: criterion; position: relative; padding: 0 0 12px 28px; }
.criteria > li::before { content: counter(criterion); position: absolute; left: 0; top: -.05em; color: var(--gold); font: 400 1.5rem/1.3 var(--serif); }
.criteria .ticks { margin-top: 8px; }
.criteria .ticks li { padding-bottom: 6px; }
.scholarship-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 5vw, 72px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--gold); align-items: start; }
.scholarship-details { display: grid; gap: 28px; }
.courses { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px clamp(20px, 2.5vw, 36px); }
.courses-note { max-width: 38em; margin-bottom: 24px; }
.courses strong { color: var(--ivory); font-weight: 600; }
.courses li { color: var(--sage); }
.courses h4 { margin: 0 0 8px; color: var(--gold); font: 600 .9375rem/1.4 var(--sans); }
.courses ul { list-style: none; margin: 0; padding: 0; }
.courses li { padding-block: 6px; border-top: 1px solid rgba(247, 243, 234, .2); font-size: .9688rem; line-height: 1.35; }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding: 0 0 14px 24px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 1px; background: var(--gold); }
.scholarship-apply { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px clamp(24px, 3vw, 48px); margin-top: clamp(28px, 3vw, 40px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--gold); }
.scholarship-apply p { margin: 0; font-size: 1.125rem; }
.scholarship .btn:hover { color: var(--ivory); border-color: var(--ivory); }

/* Contact */
.contact-grid .section-head h2 { margin-bottom: 20px; }
.contact-option { display: block; padding: 18px 40px 18px 0; position: relative; border-top: 1px solid var(--line); color: var(--charcoal); text-decoration: none; }
.contact-option:last-child { border-bottom: 1px solid var(--line); }
.contact-option strong { display: block; color: var(--midnight); font: 400 1.5rem/1.2 var(--serif); }
.contact-option span { font-size: .9688rem; }
.contact-option::after { content: "\2192"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--midnight); font-size: 1.25rem; transition: right .2s; }
.contact-option:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.contact-option:hover::after { right: 0; }
/* Enquiry form */
.enquiry-form, .form-group { display: grid; gap: 18px; }
.enquiry-form [hidden] { display: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 18px; }
.field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field[hidden] { display: none; }
.phone-input { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 8px; }
/* Windows has no flag emoji, so the flags come from a small font on this site */
@font-face {
  font-family: "Country Flags";
  unicode-range: U+1F1E6-1F1FF;
  font-display: swap;
  src: url("fonts/country-flags.woff2") format("woff2");
}
.field .phone-input select { font-family: "Country Flags", var(--sans); }
.field > span, .field > label, .field legend { padding: 0; color: var(--midnight); font-size: .9063rem; font-weight: 600; }
.field em { color: var(--charcoal); font-style: normal; font-weight: 400; opacity: .75; }
.field input, .field select, .field textarea { width: 100%; padding: 11px 14px; border: 1px solid rgba(23, 45, 75, .28); border-radius: 0; background: #FFFDF8; color: var(--charcoal); font: 400 1rem/1.4 var(--sans); }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--midnight); }
.choice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; }
.choice legend { float: left; margin-right: 20px; }
.choice label, .check { display: inline-flex; align-items: flex-start; gap: 10px; font-size: .9688rem; cursor: pointer; }
.choice input, .check input { accent-color: var(--midnight); width: 18px; height: 18px; margin: .15em 0 0; flex: none; }
.half-field { max-width: calc(50% - 9px); }
.choice > label { font-weight: 400; }
.subjects { gap: 6px 24px; }
.subjects legend { float: none; width: 100%; margin: 0 0 4px; }
.enquiry-form .btn { justify-self: start; cursor: pointer; }
.enquiry-form .btn:disabled { opacity: .6; cursor: wait; }
.form-note { margin: 0; font-size: .875rem; }
.form-note a { color: var(--midnight); text-underline-offset: 3px; }
.form-status { min-height: 1.5em; margin: 0; color: var(--midnight); font-size: .9375rem; }
.form-status.error { color: var(--raspberry); font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry-sent { padding: 24px 28px; border: 1px solid var(--gold); background: #FFFDF8; }
.enquiry-sent h3 { margin: 0 0 8px; color: var(--midnight); font: 400 1.5rem/1.25 var(--serif); }
.enquiry-sent p { margin: 0; }
.enquiry-sent .btn { margin-top: 20px; cursor: pointer; }
/* The message is focused so screen readers announce it; it doesn't need a visible outline */
.enquiry-sent:focus { outline: none; }
.enquiry-form[hidden] { display: none; }
.check a { color: inherit; text-underline-offset: 3px; }
.under-18-note { margin: 0; padding: 14px 18px; border-left: 2px solid var(--raspberry); background: #FFFDF8; color: var(--midnight); font-size: .9688rem; }
.eligibility { gap: 10px; }
.eligibility legend { margin-bottom: 6px; }
.eligibility > .check { font-size: .9688rem; font-weight: 400; }
.eligibility legend a { color: inherit; font-weight: 400; text-underline-offset: 3px; }
.eligibility-ask { margin: 8px 0 0; color: var(--midnight); font-size: .9063rem; font-weight: 600; }
.scholarship .eligibility-ask { color: var(--ivory); }

/* Application form on the dark scholarship page */
.scholarship-apply-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 24px clamp(40px, 6vw, 96px); margin-top: clamp(28px, 3vw, 40px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--gold); }
.apply-intro p { font-size: 1.125rem; }
.scholarship .field > span, .scholarship .field > label, .scholarship .field legend, .scholarship .check, .scholarship .choice label { color: var(--ivory); }
.scholarship .field em { color: var(--sage); opacity: 1; }
.scholarship .choice input, .scholarship .check input { accent-color: var(--gold); }
.scholarship .form-note, .scholarship .form-note a, .scholarship .form-status { color: var(--sage); }
.scholarship .form-status.error { color: var(--gold); }
.scholarship .enquiry-sent { background: transparent; }
.scholarship .enquiry-sent h3 { color: var(--ivory); }

.contact-address { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 28px; }
.contact-address p { flex: 0 0 100%; margin: 0; font-size: .9688rem; }
.contact-address a { color: var(--midnight); font-weight: 600; overflow-wrap: anywhere; text-underline-offset: 4px; }
.copy-email { padding: 6px 12px; border: 1px solid var(--line); background: transparent; color: var(--midnight); font: 500 .875rem var(--sans); cursor: pointer; }
.copy-email:hover { border-color: var(--midnight); }
.contact-address .copy-status { min-height: 1.5em; color: var(--midnight); font-size: .875rem; }

/* Reviews, running straight into the footer */
.reviews { background: var(--midnight); color: var(--ivory); padding-block: var(--section) clamp(48px, 6vw, 80px); text-align: center; }
.reviews h2 { color: var(--ivory); }
.reviews h2 { margin-bottom: clamp(40px, 5vw, 64px); }
.review-wall { columns: 3; column-gap: clamp(32px, 5vw, 72px); }.review-wall blockquote { break-inside: avoid; margin: 0 0 clamp(36px, 4vw, 56px); }
.review-wall p { margin-bottom: 14px; font-family: var(--serif); font-size: 1.3125rem; line-height: 1.42; }
.review-wall cite { color: var(--gold); font-size: .9375rem; font-style: normal; }
.review-wall cite::before { content: "\2014\2009"; }

.review-wall .review-boxed { padding: 20px 20px 22px; border: 1px solid var(--gold); }
.review-wall .review-label { margin: 0 0 12px; color: var(--gold); font: 600 .8125rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }

/* Spotlight review */
.spotlight { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px clamp(32px, 5vw, 64px); margin: 0 0 clamp(48px, 6vw, 72px); padding: clamp(28px, 4vw, 48px); border: 1px solid var(--gold); background: var(--ivory); color: var(--charcoal); text-align: left; }
.spotlight-mark { position: absolute; top: -.06em; right: .12em; color: var(--gold); font: 400 clamp(4rem, 8vw, 7rem)/1 var(--serif); opacity: .16; pointer-events: none; white-space: nowrap; }
.spotlight-body, .spotlight-stat { position: relative; }
.spotlight blockquote { margin: 0 0 18px; font: 400 clamp(1.1875rem, 1.7vw, 1.375rem)/1.45 var(--serif); }
.spotlight blockquote strong { color: var(--midnight); font-weight: 500; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.spotlight figcaption { font-size: .9688rem; }
.spotlight figcaption strong { margin-right: 6px; color: var(--midnight); font: 500 1.25rem var(--serif); }
.spotlight-stat { display: flex; flex-direction: column; align-items: center; min-width: 168px; padding: 24px 20px; background: var(--sage); color: var(--charcoal); font-size: .875rem; line-height: 1.3; text-align: center; }
.spotlight-rank { color: var(--midnight); font: 400 3.5rem/1 var(--serif); }
.spotlight-out-of { margin: 6px 0 2px; color: var(--midnight); font-size: .9688rem; font-weight: 600; }

/* Footer */
.site-footer { background: var(--midnight); color: var(--sage); padding-bottom: 40px; font-size: .9375rem; }
.footer-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px 32px; }
.footer-inner > * { margin: 0; }
.footer-inner::before { content: ""; grid-column: 1 / -1; height: 1px; margin-bottom: 8px; background: var(--gold); }
.site-footer .wordmark { color: var(--ivory); justify-self: start; }
.footer-tagline, .footer-email { text-align: right; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-links a, .footer-email a { text-underline-offset: 4px; }
@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr; gap: 12px; }
  .footer-tagline, .footer-email { text-align: left; }
}

/* Standalone scholarship page */
.scholarship h1 { color: var(--ivory); font-size: clamp(2.25rem, 4.4vw, 3.75rem); line-height: 1.1; margin-bottom: 24px; }
.scholarship h2 { font-size: 1.625rem; margin-bottom: 14px; }
.scholarship-intro h2 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); margin-bottom: 24px; }
.courses h3 { margin: 0 0 8px; color: var(--gold); font: 600 .9375rem/1.4 var(--sans); letter-spacing: 0; }
.scholarship .contact-address { margin-top: 20px; }
.scholarship .contact-address a, .scholarship .contact-address .copy-status { color: var(--ivory); }
.scholarship .copy-email { color: var(--ivory); border-color: rgba(247, 243, 234, .4); }
.scholarship .copy-email:hover { border-color: var(--ivory); }
.scholarship-about { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: center; border-top: 0; padding-top: 0; }
.scholarship-about h2 { margin-bottom: 20px; }
.about:has(.scholarship-about) { padding-top: var(--section); }

/* Privacy policy */
.header-inner > .text-link { white-space: nowrap; }
.policy { max-width: 760px; }
.policy-terms { margin: 40px 0 0; padding-left: 28px; }
.policy-terms li { margin-bottom: 18px; padding-left: 4px; }
.policy-terms li::marker { color: var(--midnight); font-weight: 600; }
.policy-terms strong { color: var(--midnight); font-weight: 600; }
.policy h1 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); margin-bottom: 12px; }
.policy h2 { font-size: 1.75rem; margin: 44px 0 12px; }
.policy-date { font-size: .9375rem; }
.policy ul { margin: 0 0 1em; padding-left: 20px; }
.policy li { margin-bottom: 8px; }
.policy a:not(.btn) { color: var(--midnight); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Raspberry marks actions only: gold stays the decorative accent */
:root { --raspberry: #8A1C4A; }
.btn { background: var(--raspberry); border-color: var(--raspberry); }
.btn:hover { color: var(--raspberry); }
.text-link { text-decoration-color: var(--raspberry); }
.site-nav a:not(.btn):hover { border-color: var(--raspberry); }
.contact-option::after { color: var(--raspberry); }
:focus-visible { outline-color: var(--raspberry); }

@media (max-width: 1100px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--ivory);
    border-bottom: 1px solid var(--line);
  }
  .site-nav.open { display: flex; }
  .site-nav a:not(.btn) { padding-block: 12px; border-bottom-color: var(--line); }
  .site-nav .btn { margin-top: 16px; }
}

@media (max-width: 960px) {
  .credential-list { grid-template-columns: 1fr 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .portrait { max-width: 420px; width: 100%; margin-inline: auto; }
  .subjects { grid-template-columns: 1fr; }
  .how-grid, .about-grid, .contact-grid, .scholarship-about, .scholarship-apply-form { grid-template-columns: 1fr; }
  .scholarship-grid { grid-template-columns: 1fr; }
  .review-wall { columns: 2; }
  .spotlight { grid-template-columns: 1fr; }
  .spotlight-stat { justify-self: start; }
}

@media (max-width: 640px) {
  .wordmark { font-size: 1.125rem; gap: 8px; }
  .wordmark img { height: 28px; }
  .offers-grid { grid-template-columns: 1fr; }
  .offer:first-child { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .offer:last-child { padding-left: 0; }
  .courses { grid-template-columns: 1fr; }
  .scholarship-apply .btn { width: 100%; }
  .actions .btn { order: -1; width: 100%; }
  .form-row { grid-template-columns: 1fr; }
  .half-field { max-width: none; }
  .enquiry-form .btn { width: 100%; }
  .review-wall { columns: auto; display: flex; flex-direction: column; }
  .review-featured { order: -1; }
  .steps li { padding-left: 52px; }
}