/* =====================================================================
   Kaplan Apprenticeships — site styles.
   Brand carried over from the old Kaplan site: Kaplan blue #240F6E, lime #cdeb37, bright blue
   #005de8, pale blue #f3f7fd; Open Sans (self-hosted, latin subset).
   The token NAMES below are shared with exeter-website (same component code); only the values
   differ — e.g. --pink is this site's ACCENT (lime) and --cerise-deep its side-panel colour.
   Lime fails contrast as text on white — use it on Kaplan blue, or as a fill under Kaplan-blue text.
   ===================================================================== */

@font-face { font-family: "Open Sans"; src: url("../fonts/open-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonts/open-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonts/open-sans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --navy: #240F6E;          /* Kaplan blue */
  --navy-dark: #170a4a;
  --footer: #110343;
  --kaplan-pale: #f3f7fd;
  --cyan: #A2D0FA;          /* light accent on Kaplan blue */
  --sky: #005de8;
  --pink: #cdeb37;          /* ACCENT: Kaplan lime */
  --cerise-deep: #005de8;   /* vacancy side box: bright blue, white text 5.0:1 */
  --aqua: #005de8;
  --ink: #2b2b3a;
  --grey-50: #f7f7f9;
  --grey-200: #d1d1dc;
  --ok: #0f7b4b;
  --error: #b00045;

  --font-display: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem;
  --radius: .6rem; --radius-lg: 1rem; --radius-pill: 999px;
  --shadow: 0 2px 10px rgba(0, 14, 122, .08);
  --shadow-lg: 0 10px 30px rgba(0, 14, 122, .18);
  --fnt-small: .875rem; --fnt-h2: 1.6rem; --fnt-h3: 1.3rem;

  /* Token names the apply wizard (ported from gmfj-website) and the lock dialog expect. */
  --surface: #fff;
  --surface-alt: #eef1ff;
  --surface-soft: var(--grey-50);
  --line: var(--grey-200);
  --text-strong: var(--ink);
  --text-muted: #4a5578;
  --indigo-300: var(--navy);
  --brand-accent: var(--pink);
  --brand-gradient: linear-gradient(90deg, var(--navy), var(--sky));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font-family: var(--font-body); font-weight: 500; font-size: 1rem; line-height: 1.55;
}
img { max-width: 100%; height: auto; }
a { color: var(--navy); }
a:hover { color: var(--sky); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--navy); line-height: 1.05; letter-spacing: .01em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); text-transform: uppercase; margin: 0 0 var(--space-4); }
h2 { font-size: var(--fnt-h2); margin: var(--space-6) 0 var(--space-3); }
h3 { font-size: var(--fnt-h3); margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-3); }
code { font-size: .9em; }

.container { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: 1rem; }
.page { padding-block: var(--space-6) var(--space-7); }
.page--narrow { max-width: 46rem; }
.section { padding-block: var(--space-6) var(--space-7); }
.stack > * + * { margin-top: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cluster--center { justify-content: center; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mb-0 { margin-bottom: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: 1rem; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem 1.3rem; border-radius: var(--radius-pill); border: 2px solid transparent;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-dark); color: #fff; box-shadow: 0 0 0 3px var(--cyan); }
.btn--ghost { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--surface-alt); color: var(--navy); }
.btn--link { background: none; border: 0; padding: 0; color: var(--navy); text-decoration: underline; font-weight: 500; }
.btn--sm { padding: .45rem .9rem; font-size: var(--fnt-small); }
.btn--lg { padding: .85rem 1.6rem; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; box-shadow: none; }

/* ---- Header ---- */
.site-header { background: #fff; border-top: 4px solid var(--navy); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.site-header__inner { display: flex; align-items: center; gap: var(--space-4); min-height: 5rem; }
.site-header__brand img { display: block; width: auto; height: 56px; }
.site-header__colleges { display: flex; gap: var(--space-4); align-items: center; margin-inline: auto; }
.site-header__colleges img { display: block; height: 42px; width: auto; }
.site-nav { margin-left: auto; }
.site-nav a:not(.btn) { color: var(--navy); font-weight: 700; text-decoration: none; }
.site-nav a:not(.btn):hover { color: var(--pink); }
.site-nav--desktop { display: flex; gap: var(--space-5); align-items: center; }
.site-nav--mobile { display: none; }
.site-nav__toggle { list-style: none; cursor: pointer; padding: .5rem; }
.site-nav__toggle::-webkit-details-marker { display: none; }
.site-nav__toggle span { display: block; width: 26px; height: 3px; margin: 5px 0; background: var(--pink); border-radius: 2px; }
@media (max-width: 899px) {
  .site-header__colleges, .site-nav--desktop { display: none; }
  .site-nav--mobile { display: block; }
  .site-nav--mobile .site-nav__links {
    position: absolute; left: 0; right: 0; top: 100%;
    display: flex; flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: var(--space-3) 1rem;
  }
  .site-nav--mobile .site-nav__links a { padding: .75rem 0; border-bottom: 1px solid var(--grey-50); }
  .site-nav--mobile .site-nav__links .btn { margin-top: var(--space-3); }
}

/* ---- Footer ---- */
.site-footer { background: var(--footer); color: #fff; margin-top: var(--space-7); }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--cyan); }
.site-footer__inner { display: grid; gap: var(--space-5); padding-block: var(--space-6); grid-template-columns: 1fr; }
.site-footer__brand { display: flex; gap: var(--space-3); align-items: center; font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; }
.site-footer__brand p { margin: 0; }
.site-footer__brand img { width: 56px; height: auto; background: #fff; border-radius: var(--radius); padding: 4px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.site-footer__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; font-size: var(--fnt-small); border-top: 1px solid rgba(255,255,255,.2); padding-top: var(--space-4); }
.site-footer__meta p { margin: 0; }
/* Partner logo links — small, in a row, white on the footer. */
.site-footer__partners { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.site-footer__partners a { display: block; opacity: .9; transition: opacity .15s ease; }
.site-footer__partners a:hover, .site-footer__partners a:focus-visible { opacity: 1; }
.partner-logo { display: block; height: 26px; width: auto; }
/* The ENDC mark has a black wordmark — render it all-white so it reads on the dark footer. */
@media (min-width: 900px) {
  .site-footer__inner { grid-template-columns: auto 1fr; align-items: center; }
  .site-footer__links { justify-content: flex-end; }
  .site-footer__meta { grid-column: 1 / -1; }
}

/* ---- Cookie banner ---- */
.cookie-consent { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: #fff; border-top: 4px solid var(--pink); box-shadow: var(--shadow-lg); padding-block: var(--space-4); }
.cookie-consent__inner { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
.cookie-consent p { margin: 0; flex: 1 1 22rem; }

/* ---- Hero (home) — photo with the old site's navy/aqua overlay ---- */
.hero { position: relative; min-height: clamp(18rem, 30vw, 30rem); display: flex; align-items: center; overflow: hidden; background: var(--kaplan-pale); }
/* Anchored near the top: a centred crop cut the students' heads off on wide screens. */
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 20%; }
/* ENDC blue overlay — deepest behind the text (white body copy needs the darker shade for contrast),
   fading out so the students stay visible on the right. */
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0,109,166,.95) 0%, rgba(0,133,202,.82) 42%, rgba(0,133,202,.25) 72%, rgba(0,133,202,0) 90%); }
@media (max-width: 699px) { .hero__overlay { background: linear-gradient(180deg, rgba(0,109,166,.9) 0%, rgba(0,133,202,.75) 100%); } }
.hero__overlay::after { content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 7rem 7rem; border-color: transparent transparent var(--aqua) transparent; opacity: .9; }
.hero__content { position: relative; color: #fff; padding-block: var(--space-7); }
.hero__title { color: #fff; font-size: clamp(2.8rem, 8vw, 5rem); margin: 0; }
.hero__sub { font-size: 1.2rem; margin: var(--space-2) 0 0; max-width: 28rem; }
.hero__sub::before { content: ""; display: block; width: 4rem; height: 4px; background: var(--pink); margin-bottom: var(--space-3); }

/* ---- Search ---- */
.search { margin-top: calc(-1 * var(--space-6)); position: relative; }
.filters {
  display: grid; gap: var(--space-3); grid-template-columns: 1fr;
  background: #fff; border-radius: 0; box-shadow: var(--shadow-lg); padding: var(--space-5);
  border-top: 4px solid var(--cyan);
}
@media (min-width: 700px) { .filters { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .filters { grid-template-columns: 2fr repeat(4, 1fr); } .filters__actions { grid-column: 1 / -1; } }
.filters__field label { display: block; font-weight: 700; font-size: var(--fnt-small); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-1); }
.filters__actions { display: flex; gap: var(--space-3); align-items: end; }
.filters input, .filters select { border-radius: 0; }
/* Cerise, square Search button (the old site's). White text on cerise is large/bold UI text. */
.filters__actions .btn { border-radius: 0; }
.filters__actions .btn--primary { background: var(--pink); border-color: var(--pink); color: #fff; padding-inline: 2rem; font-size: 1.2rem; }
.filters__actions .btn--primary:hover { background: #e01a73; border-color: #e01a73; box-shadow: none; }

input, select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  border: 2px solid var(--line); border-radius: var(--radius); padding: .6rem .75rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--navy); outline: none; box-shadow: 0 0 0 3px rgba(38,224,255,.45); }
input[disabled] { background: var(--grey-50); color: var(--text-muted); }
input[type=checkbox] { width: auto; }

.results { margin-top: var(--space-6); }
.results__title { margin-top: 0; }
.notice { background: var(--surface-alt); border-left: 4px solid var(--navy); padding: var(--space-4); border-radius: var(--radius); margin-bottom: var(--space-4); }
.notice--error { background: #fff0f6; border-left-color: var(--pink); }

/* Flat navy boxes, square corners — white title, cerise employer, employer
   logo on a square white tile top-right. Content is top-aligned with fixed gaps, so cards in the same
   row line up and a taller neighbour never opens a hole in the middle of a shorter one. */
.vacancy-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5); background: var(--navy); color: #fff; text-decoration: none;
  transition: background .15s ease;
}
.vacancy-card:hover, .vacancy-card:focus-visible { background: var(--navy-dark); color: #fff; }
.vacancy-card:hover .vacancy-card__employer { text-decoration: underline; }
.vacancy-card__head { display: flex; align-items: flex-start; gap: var(--space-4); }
.vacancy-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.vacancy-card__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; font-size: 1.3rem; line-height: 1.1; color: #fff; margin: 0; overflow-wrap: anywhere; }
.vacancy-card__employer { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; font-size: 1.75rem; line-height: 1.05; color: var(--pink); margin: 0; overflow-wrap: anywhere; }
.vacancy-card__logo {
  flex: none; width: 56px; height: 56px; background: #fff; display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--navy); letter-spacing: .04em;
}
.vacancy-card__logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.vacancy-card__facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--fnt-small); color: #fff; }
.vacancy-card__closing { margin: 0; font-size: var(--fnt-small); font-weight: 700; color: var(--cyan); }

.vacancy-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .vacancy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .vacancy-grid { grid-template-columns: repeat(3, 1fr); } }

.pager { display: flex; gap: var(--space-4); align-items: center; justify-content: center; margin-top: var(--space-6); }

/* ---- Bands (legal / welcome headers) ---- */
.band { background: var(--navy); color: #fff; padding-block: var(--space-6); }
.band--pink { background: var(--pink); }
.band__title { color: #fff; margin: 0 0 var(--space-2); }
.band p { margin: 0; max-width: 40rem; }

/* ---- Vacancy detail ----
   Navy band, centred, cerise triangle bottom-left and light-blue triangle top-right (the old site). */
.opp-hero { position: relative; overflow: hidden; background: var(--navy); color: #fff; padding-block: var(--space-6) var(--space-7); min-height: 22rem; display: flex; align-items: center; }
.opp-hero__tri { position: absolute; top: 0; bottom: 0; width: 35%; pointer-events: none; }
.opp-hero__tri--left { left: 0; background: var(--pink); clip-path: polygon(0 40%, 0 100%, 40% 100%); }
.opp-hero__tri--right { right: 0; background: var(--aqua); clip-path: polygon(60% 0, 100% 0, 100% 60%); }
.opp-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
.back-link { color: #fff; text-decoration: none; font-size: var(--fnt-small); }
.back-link:hover { color: var(--cyan); }
.opp-hero__employer { margin: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: 1.1rem; color: var(--cyan); }
.opp-hero__title { color: #fff; margin: 0; letter-spacing: .06em; max-width: 48rem; overflow-wrap: anywhere; }
.opp-hero__logo { max-height: 6rem; max-width: 14rem; width: auto; height: auto; object-fit: contain; margin-top: var(--space-2); }
.opp { display: grid; gap: var(--space-6); grid-template-columns: 1fr; padding-block: var(--space-6); }
@media (min-width: 900px) { .opp { grid-template-columns: minmax(0, 1fr) 22rem; } .opp__side { position: sticky; top: var(--space-4); align-self: start; } }
.prose { overflow-wrap: anywhere; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.tick-list { padding-left: 1.2rem; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--space-5); }
.opp__side .panel { border-top: 5px solid var(--cyan); }
/* Vacancy side box: square, flat cerise, white text. */
.opp__side .panel { background: var(--cerise-deep); color: #fff; border: 0; border-radius: 0; box-shadow: none; }
.opp__side .facts dt { color: #fff; }
.opp__side .facts > div { border-bottom-color: rgba(255,255,255,.25); }
.opp__side a:not(.btn) { color: #fff; }
.opp__side .btn { border-radius: 0; }
.opp__side .btn--primary { background: #fff; border-color: #fff; color: var(--navy); }
.opp__side .btn--primary:hover { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: none; }
.opp__side .btn--ghost { background: transparent; border-color: #fff; color: #fff; }
.opp__side .btn--ghost:hover { background: #fff; color: var(--navy); }
.opp__side .course-note { background: rgba(0,0,0,.14); border-left-color: #fff; border-radius: 0; color: #fff; }
.opp__side .applied-chip { background: #fff; color: var(--ok); border-radius: 0; }
.facts { margin: 0 0 var(--space-5); display: grid; gap: var(--space-2); }
.facts > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-2); border-bottom: 1px solid var(--grey-50); padding-bottom: var(--space-2); }
.facts dt { font-weight: 700; color: var(--navy); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.applied-chip { background: #e6f6ee; color: var(--ok); font-weight: 700; border-radius: var(--radius); padding: var(--space-2) var(--space-3); }
.course-note { margin: var(--space-4) 0 0; font-size: var(--fnt-small); background: var(--grey-50); border-left: 4px solid var(--pink); padding: var(--space-3); border-radius: var(--radius); }

/* ---- Forms ---- */
.fieldset { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.fieldset legend { font-family: var(--font-display); font-size: var(--fnt-h3); color: var(--navy); text-transform: uppercase; margin-bottom: var(--space-3); padding: 0; }
.field-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .field-grid { grid-template-columns: repeat(2, 1fr); } }
.field label { display: block; font-weight: 700; margin-bottom: var(--space-1); }
.field__note { font-size: var(--fnt-small); color: var(--text-muted); margin: var(--space-1) 0 0; }
.field__error { font-size: var(--fnt-small); color: var(--error); margin: var(--space-1) 0 0; font-weight: 700; }
.field__ok { font-size: var(--fnt-small); color: var(--ok); margin: 0; font-weight: 700; }
/* Save/Cancel row under a form. account.css says this moved here, but it never arrived, so the
   buttons sat flush against each other and against the last field's button. */
.form-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.optional { font-weight: 500; color: var(--text-muted); }
.check-row { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-3); }
.check-row input { margin-top: .3rem; flex: none; }
/* Ethnicity select only once its explicit opt-in is ticked (no JS; without :has() it simply shows). */
.fieldset:has(input[name=ethnicityConsent]:not(:checked)) .eth-reveal { display: none; }

/* ---- Account ---- */
.account-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.account-nav a { padding: .45rem 1rem; border-radius: var(--radius-pill); text-decoration: none; font-weight: 700; border: 2px solid var(--line); }
.account-nav a.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.tabs { display: flex; gap: var(--space-2); border-bottom: 2px solid var(--line); margin-bottom: var(--space-4); }
.tabs__tab { background: none; border: 0; font: inherit; font-weight: 700; color: var(--text-muted); padding: .6rem 1rem; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs__tab.is-active { color: var(--navy); border-bottom-color: var(--pink); }
.app-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.app-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow); }
.app-card__head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
.app-card__title { font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; margin: 0; }
.app-card__employer { color: var(--text-muted); margin: 0; }
.app-card__headline { font-weight: 700; margin: var(--space-3) 0 var(--space-1); }
.app-card__action { background: #fff0f6; border-left: 4px solid var(--pink); padding: var(--space-3); border-radius: var(--radius); }
.app-card__meta { display: flex; gap: var(--space-4); font-size: var(--fnt-small); color: var(--text-muted); }
.status-chip { display: inline-block; white-space: nowrap; font-size: var(--fnt-small); font-weight: 700; border-radius: var(--radius-pill); padding: .2rem .7rem; background: var(--surface-alt); color: var(--navy); }
.status-chip--action { background: #fff0f6; color: var(--error); }
.status-chip--successful { background: #e6f6ee; color: var(--ok); }
.status-chip--unsuccessful, .status-chip--withdrawn { background: var(--grey-50); color: var(--text-muted); }
.profile-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .profile-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.profile-grid h2 { margin-top: 0; }
.doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.doc-list li { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

/* ---- Apply wizard pieces shared by the profile page ---- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.card__body { padding: var(--space-5); }
.chip { background: var(--surface-alt); border-radius: var(--radius-pill); padding: .2rem .7rem; font-size: var(--fnt-small); }
/* account.css says .chip-set moved here, but it never arrived, so chips sat flush together. */
.chip-set { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Toggle chips (career interests, skill suggestions) are buttons: reset the browser's own font and
   bevelled border. Off = outlined with "+", on = filled brand colour with a tick. */
button.chip {
  appearance: none; display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.5rem; padding: .45rem 1rem;
  font: inherit; font-size: var(--fnt-small); font-weight: 600; line-height: 1.2;
  color: var(--text-strong); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
button.chip:hover { border-color: var(--navy); color: var(--navy); background: var(--surface-alt); }
button.chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
button.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
button.chip[aria-pressed="true"]::before { content: "\2713"; font-weight: 700; }
button.chip[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--navy) 85%, #000); color: #fff; }
@media (prefers-reduced-motion: reduce) { button.chip { transition: none; } }
.apply-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 2rem 1.5rem; text-align: center; cursor: pointer; border: 2px dashed var(--line); border-radius: var(--radius-lg); }
.apply-drop:hover, .apply-drop:focus-within { border-color: var(--navy); background: var(--surface-alt); }
.apply-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.apply-drop__title { font-weight: 700; }
.apply-drop__hint { color: var(--text-muted); font-size: var(--fnt-small); }

/* ---- Confirm dialog (ApplicationLockDialog) ---- */
.confirm-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(0, 9, 90, .55); display: grid; place-items: center; padding: 1rem; }
.confirm-card { background: #fff; border-radius: 0; box-shadow: var(--shadow-lg); padding: var(--space-5); max-width: 32rem; width: 100%; display: grid; gap: var(--space-4); }
.confirm-card__title { margin: 0; font-size: var(--fnt-h3); }
.confirm-card__message { margin: 0; color: var(--text-muted); font-size: var(--fnt-small); }
.confirm-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.confirm-card__actions > .btn { flex: 1 1 8rem; }
.applock-points { margin: 0; padding: 0; font-size: var(--fnt-small); color: var(--text-muted); display: grid; gap: var(--space-2); }
.applock-points li { margin-left: 1rem; }
.applock-points strong { color: var(--text-strong); }

/* ---- Legal ---- */
.legal > * { max-width: 52rem; }
.legal table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); font-size: var(--fnt-small); display: block; overflow-x: auto; }
.legal th, .legal td { border: 1px solid var(--line); padding: var(--space-2); text-align: left; vertical-align: top; }
.legal th { background: var(--grey-50); }
.legal h2 { font-family: var(--font-body); font-weight: 700; font-size: 1.3rem; }

/* ---- Blazor reconnect / error UI ---- */
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: #fff0f6; border-top: 3px solid var(--pink); padding: .8rem 1rem; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .6rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- Static map (vacancy page) — OSM tiles composed server-side, cerise pin dead-centre ---- */
.staticmap { position: relative; overflow: hidden; width: 100%; background: var(--surface-alt); border: 1px solid var(--line); }
.staticmap__plane { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.staticmap__plane img { position: absolute; display: block; width: 256px; height: 256px; max-width: none; }
.staticmap__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); color: var(--cerise-deep); filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.staticmap__pin svg { width: 2.6rem; height: 2.6rem; stroke-width: 2.5; fill: #fff; }
.staticmap__attr { position: absolute; right: 0; bottom: 0; font-size: .65rem; line-height: 1.6; padding: 0 .4rem; background: rgba(255,255,255,.8); color: #333; }
.staticmap__attr a { color: #333; }

/* =====================================================================
   KAPLAN BRAND LAYER — overrides the shared rules above (same components as exeter-website).
   Kaplan's design language from the old site: sentence-case Open Sans headings in Kaplan blue,
   rounded cards (16px), pill buttons, lime calls to action with Kaplan-blue text.
   ===================================================================== */
h1, h2, h3 { font-weight: 700; letter-spacing: 0; line-height: 1.2; }
h1 { text-transform: none; font-size: clamp(1.9rem, 4vw, 2.6rem); }
h2 { font-size: 1.5rem; }
.band__title, .fieldset legend { text-transform: none; }
.fieldset legend { font-weight: 700; font-size: 1.15rem; }

/* Header: white logo on Kaplan blue */
.site-header { background: var(--navy); border-top: 0; border-bottom: 0; }
.site-header__brand img { height: 46px; width: auto; }
.site-nav a:not(.btn) { color: #fff; font-weight: 600; }
.site-nav a:not(.btn):hover { color: var(--pink); }
.site-nav__toggle span { background: #fff; }
.site-header .btn--primary { background: var(--pink); border-color: var(--pink); color: var(--navy); }
.site-header .btn--primary:hover { background: #c1d82f; border-color: #c1d82f; color: var(--navy); box-shadow: none; }
@media (max-width: 899px) {
  .site-nav--mobile .site-nav__links { background: var(--navy); border-bottom: 0; }
  .site-nav--mobile .site-nav__links a { border-bottom-color: rgba(255,255,255,.15); }
}

/* Hero: the old site's pale abstract background with Kaplan-blue copy (no photo, no overlay) */
.hero { min-height: clamp(16rem, 26vw, 24rem); background: var(--kaplan-pale) url("../img/hero-abstract.svg") center / cover no-repeat; }
.hero__overlay, .hero__img { display: none; }
.hero__content { color: var(--navy); }
.hero__title { color: var(--navy); font-size: clamp(2rem, 4.5vw, 3rem); max-width: 40rem; }
.hero__sub { color: var(--footer); font-size: 1.15rem; line-height: 1.6; max-width: 40rem; margin-top: var(--space-4); }
.hero__sub::before { display: none; }

/* Search panel: white card, rounded; lime pill Search button with Kaplan-blue text */
.filters { border-radius: var(--radius-lg); border-top: 0; }
.filters input, .filters select { border-radius: var(--radius); }
.filters__field label { text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--navy); }
.filters__actions .btn { border-radius: var(--radius-pill); }
.filters__actions .btn--primary { background: var(--pink); border-color: var(--pink); color: var(--navy); font-size: 1rem; }
.filters__actions .btn--primary:hover { background: #c1d82f; border-color: #c1d82f; color: var(--navy); }
.results__title { font-size: 1.35rem; }

/* Vacancy cards: Kaplan blue, rounded, white title + lime employer, logo tile */
.vacancy-card { border-radius: var(--radius-lg); }
.vacancy-card__title { font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 1.1rem; line-height: 1.3; }
.vacancy-card__employer { font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 1.05rem; line-height: 1.3; }
.vacancy-card__logo { border-radius: var(--radius); font-size: 1.1rem; font-weight: 700; }
.vacancy-card__closing { color: var(--cyan); }

/* Vacancy page */
.opp-hero__employer { letter-spacing: .08em; font-size: .9rem; font-weight: 600; }
.opp-hero__title { text-transform: none; letter-spacing: 0; }
.opp__side .panel { border-radius: var(--radius-lg); }
.opp__side .btn { border-radius: var(--radius-pill); }
.opp__side .btn--primary:hover { background: var(--pink); border-color: var(--pink); color: var(--navy); }
.opp__side .course-note { border-radius: var(--radius); }
.staticmap { border-radius: var(--radius-lg); }

/* Footer: Kaplan logo + company line; small partner logos */
.site-footer__brand img { height: 40px; width: auto; display: block; background: none; padding: 0; border-radius: 0; }
.partner-logo--kaplan { height: 24px; }
.site-footer__meta p { max-width: 34rem; }
.cookie-consent { border-top-color: var(--pink); }

/* Advice page */
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--pink); color: var(--navy); }
.btn img { display: inline-block; vertical-align: middle; }
.lead { font-size: 1.15rem; line-height: 1.6; }
.advice-hero { background: #D0E1FC; padding-block: var(--space-7); }
.advice-split { display: grid; gap: var(--space-6); align-items: center; grid-template-columns: 1fr; padding-block: var(--space-6); }
.advice-hero .advice-split { padding-block: 0; }
@media (min-width: 900px) { .advice-split { grid-template-columns: 1fr 1fr; } }
.advice-split__text { display: flex; flex-direction: column; gap: var(--space-4); }
.advice-split__text h1, .advice-split__text h2 { margin: 0; }
.advice-split__text p { margin: 0; }
.advice-split__img { width: 100%; height: auto; border-radius: var(--radius-lg); }
@media (min-width: 900px) { .advice-split--reverse .advice-split__img { order: -1; } }
.advice-link { display: inline-flex; align-items: center; gap: .25rem; color: var(--sky); font-weight: 600; }
.advice-cta { position: relative; overflow: hidden; background: var(--navy) url("../img/advice/gmfj-circle-with-dot-pattern.png") right -6rem bottom -10rem / 400px no-repeat; border-radius: var(--radius-lg); padding: var(--space-7); color: #fff; margin-block: var(--space-6); }
.advice-cta__body { max-width: 50rem; display: flex; flex-direction: column; gap: var(--space-4); }
.advice-cta h2 { color: #fff; margin: 0; }
.advice-cta p { margin: 0; }
@media (max-width: 699px) { .advice-cta { padding: var(--space-5); background-image: none; } }
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { cursor: pointer; padding: var(--space-4) 0; font-weight: 600; color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--navy); }
.faq__item[open] summary::after { content: "–"; }
.faq__item p { margin: 0 0 var(--space-4); }

/* ---- Search pane (old Kaplan layout): Location Lookup / Search Range / Industries / Type ---- */
.kfilters {
  display: grid; gap: var(--space-4) var(--space-5); grid-template-columns: 1fr;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-6);
}
@media (min-width: 700px) { .kfilters { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kfilters { grid-template-columns: repeat(4, 1fr); } }
.kfilters__field label { display: flex; align-items: center; gap: var(--space-3); font-weight: 400; color: var(--ink); margin-bottom: var(--space-2); }
.kfilters input[type=text], .kfilters select { border: 1px solid #c8c8c8; border-radius: 0; height: 2.9rem; padding: .5rem .75rem; }
.kfilters__locate { position: relative; }
.kfilters__locate input { padding-right: 2.6rem; border-color: #333; }
.kfilters__locate-btn { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: .35rem; color: var(--sky); cursor: pointer; line-height: 0; }
.kfilters__locate-btn .kicon { width: 20px; height: 20px; }
.kfilters__hint { margin: var(--space-1) 0 0; font-size: .8rem; color: var(--text-muted); }
.kfilters__hint:empty { display: none; }
.kfilters__badge { background: var(--pink); color: var(--navy); font-size: .75rem; font-weight: 700; padding: .1rem .5rem; border-radius: 3px; }
.kfilters input[type=range] { width: 100%; height: 2.9rem; padding: 0; border: 0; background: transparent; accent-color: #d6246e; box-shadow: none; }
.kfilters__submit { grid-column: 1 / -1; width: 100%; padding-block: .85rem; font-size: 1.05rem; }
.kfilters .btn--primary { background: var(--pink); border-color: var(--pink); color: var(--navy); }
.kfilters .btn--primary:hover { background: #c1d82f; border-color: #c1d82f; color: var(--navy); box-shadow: none; }

/* ---- Results: full-width rows ---- */
.results__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
.results__head .results__title { margin: 0; font-size: 1.75rem; }
.results__count { margin: var(--space-1) 0 0; color: var(--text-muted); }
.results__size { display: flex; align-items: center; gap: var(--space-2); font-size: .9rem; }
.results__size a { padding: .2rem .6rem; border: 1px solid rgba(0,93,232,.4); border-radius: var(--radius-pill); text-decoration: none; color: var(--sky); }
.results__size a.is-active { background: var(--sky); border-color: var(--sky); color: #fff; }
.results__empty { background: #F0F0F0; padding: var(--space-5); border-radius: var(--radius); }
.vacancy-list { display: grid; gap: var(--space-4); }
.vacancy-row {
  display: grid; gap: var(--space-4); grid-template-columns: 1fr; align-items: center;
  background: #fff; color: var(--ink); text-decoration: none; border-radius: var(--radius-lg);
  box-shadow: 0 4px 14px rgba(0,0,0,.08); padding: var(--space-5) var(--space-6); transition: box-shadow .15s ease, transform .15s ease;
}
.vacancy-row:hover { color: var(--ink); box-shadow: 0 8px 22px rgba(0,0,0,.13); transform: translateY(-1px); }
@media (min-width: 900px) { .vacancy-row { grid-template-columns: 5fr 4fr 3fr; padding: var(--space-6) 2.75rem; } }
.vacancy-row__title { font-family: var(--font-body); font-weight: 600; font-size: 1.25rem; color: var(--navy); margin: 0 0 var(--space-4); }
.vacancy-row__employer { display: flex; align-items: center; gap: var(--space-3); margin: 0; color: #555; font-size: 1.05rem; }
.vacancy-row .kicon { color: var(--sky); flex: none; }
.vacancy-row__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: .95rem; }
.vacancy-row__facts li { display: flex; align-items: center; gap: var(--space-3); }
.vacancy-row__facts .kicon { width: 14px; height: 14px; }
.vacancy-row__side { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.vacancy-row__logo { display: flex; align-items: center; justify-content: center; height: 70px; width: 100%; }
.vacancy-row__logo img { max-height: 70px; max-width: 100%; width: auto; object-fit: contain; }
.vacancy-row__initials { font-weight: 700; font-size: 1.5rem; color: var(--navy); }
.vacancy-row__cta { width: 100%; background: var(--pink); border-color: var(--pink); color: var(--footer); padding-block: .8rem; }
.vacancy-row:hover .vacancy-row__cta { background: #c1d82f; border-color: #c1d82f; }

/* Pager: numbered, Kaplan "transparent" buttons */
.pager { flex-wrap: wrap; gap: var(--space-2); }
.pager a, .pager span { padding: .4rem .85rem; border-radius: var(--radius-pill); text-decoration: none; }
.pager__step, .pager__num { border: 1px solid rgba(0,93,232,.4); color: var(--sky); background: #fff; }
.pager__num.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.pager__gap { color: var(--text-muted); }

/* ---- Vacancy detail (old Kaplan layout) ---- */
.kopp { padding-block: var(--space-6) var(--space-7); }
.kopp__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); }
.kopp__title { color: #110343; font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0; }
.kopp__logo { display: none; max-width: 150px; max-height: 80px; object-fit: contain; }
@media (min-width: 900px) { .kopp__logo { display: block; } }
.kopp__back { display: inline-flex; align-items: center; gap: .3rem; margin: var(--space-5) 0 var(--space-3); font-size: .85rem; color: var(--sky); text-decoration: none; }
.kopp__back .kicon { width: 14px; height: 14px; }
.kopp__intro { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .kopp__intro { grid-template-columns: 1fr 2fr; } }
.kopp__keyfacts { list-style: none; margin: 0; padding: 0; border: 1px solid #ddd; }
.kopp__keyfacts li { display: flex; align-items: center; gap: var(--space-3); padding: .55rem .9rem; font-size: .9rem; }
.kopp__keyfacts li + li { border-top: 1px solid #ddd; }
.kopp__keyfacts .kicon { color: #082ECF; width: 15px; height: 15px; flex: none; }
.kopp__summary { font-size: .95rem; }
.kopp__apply { margin: var(--space-6) 0; }
.kopp__apply-btn { border-radius: 0; min-width: 18rem; padding-block: .8rem; font-weight: 600; }
.kopp .btn--primary { background: var(--pink); border-color: var(--pink); color: var(--footer); }
.kopp .btn--primary:hover { background: #c1d82f; border-color: #c1d82f; color: var(--footer); box-shadow: none; }
.kopp__apply-note { font-size: .85rem; color: #555; margin: var(--space-3) 0 0; }

.kopp__cards { display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin-bottom: var(--space-6); }
@media (min-width: 900px) { .kopp__cards { grid-template-columns: repeat(3, 1fr); } }
.kinfo { margin: 0; background: #F9F9F9; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.12); padding: var(--space-5); display: grid; gap: var(--space-4); align-content: start; }
.kinfo__row { display: flex; gap: var(--space-3); align-items: flex-start; }
.kinfo__row .kicon { color: #082ECF; flex: none; margin-top: .1rem; }
.kinfo dt { font-weight: 700; font-size: .9rem; color: var(--ink); }
.kinfo dd { margin: .1rem 0 0; font-size: .9rem; color: #555; }
.kinfo__chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem !important; }
.kchip { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 500; background: rgba(8,46,207,.08); color: #082ECF; border: 1px solid rgba(8,46,207,.2); }
.kinfo__tip { display: inline-flex; vertical-align: middle; color: #082ECF; cursor: help; }
.kinfo__tip .kicon { width: 14px; height: 14px; }
.kinfo--map { padding: 0; overflow: hidden; min-height: 300px; }
.kinfo--map .staticmap { border: 0; border-radius: 0; }
.kinfo__nomap { padding: var(--space-5); display: flex; gap: var(--space-2); align-items: center; }

.kopp__body h2 { color: var(--navy); font-weight: 600; font-size: 1.4rem; margin-top: 0; }
.kopp__contact { font-weight: 700; font-size: .9rem; margin: var(--space-5) 0; }
.kperks { background: #F6F8FB; border-radius: 8px; padding: var(--space-5); margin-bottom: var(--space-5); }
.kperks h2 { font-size: 1.15rem; margin: 0 0 var(--space-3); }
.kperks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kperks li { display: inline-flex; align-items: center; gap: .35rem; background: #fff; border: 1px solid #dde3ee; border-radius: 999px; padding: .25rem .75rem; font-size: .85rem; }
.kperks .kicon { width: 14px; height: 14px; color: var(--navy); }
.kacc__item { border-bottom: 1px solid rgba(0,0,0,.125); }
.kacc__item:first-child { border-top: 1px solid rgba(0,0,0,.125); }
.kacc__item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) 0; font-weight: 600; color: var(--navy); }
.kacc__item summary::-webkit-details-marker { display: none; }
.kacc__item summary::after { content: ""; width: .55rem; height: .55rem; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg); transition: transform .2s ease; margin-right: .3rem; }
.kacc__item[open] summary::after { transform: rotate(-135deg); }
.kacc__body { padding-bottom: var(--space-4); }

.kemployer { background: #f4f4f4; padding-block: var(--space-7); }
.kemployer h2 { color: var(--navy); font-weight: 600; margin-top: 0; }
.kemployer__body { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 700px) { .kemployer__body { grid-template-columns: 14rem 1fr; } }
.kemployer__logo { background: #c8c8c8; aspect-ratio: 1; display: grid; place-items: center; padding: 15%; }
.kemployer__logo img { background: #fff; padding: 12%; width: 100%; height: 100%; object-fit: contain; }

.krelated { background: #efefef; padding-block: var(--space-7); }
.krelated h2 { color: var(--navy); font-weight: 400; margin-top: 0; }
.krelated__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .krelated__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .krelated__grid { grid-template-columns: repeat(4, 1fr); } }
.krel { display: flex; flex-direction: column; background: #fff; text-decoration: none; color: var(--ink); min-height: 15rem; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.krel:hover { color: var(--ink); box-shadow: 0 6px 16px rgba(0,0,0,.14); }
.krel__body { padding: var(--space-4); flex: 1; }
.krel__title { font-family: var(--font-body); font-weight: 400; font-size: 1.1rem; color: var(--navy); margin: 0 0 var(--space-3); }
.krel__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .8rem; }
.krel__facts li { display: flex; align-items: center; gap: .4rem; }
.krel__facts .kicon { width: 13px; height: 13px; color: var(--sky); }
.krel__foot { position: relative; background: var(--navy); color: #fff; font-weight: 700; font-size: .85rem; padding: .75rem var(--space-4); display: flex; justify-content: space-between; align-items: center; }
.krel__pin { position: absolute; right: 1rem; top: -1rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--navy); border: 2px solid #fff; display: grid; place-items: center; }
.krel__pin .kicon { width: 15px; height: 15px; color: #fff; }

/* ---- Footer as on the old Kaplan site: light, logos left, links right, company line centred ---- */
.site-footer { background: #f9f9f9; color: #333; border-top: 1px solid #E5E5E5; }
.site-footer a { color: #222; }
.site-footer a:hover { color: var(--sky); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-6) var(--space-4); }
.site-footer__logos { display: flex; align-items: center; gap: var(--space-5); }
.site-footer__kaplan { height: 40px; width: auto; filter: brightness(0); display: block; }
.site-footer__ttp { height: 48px; width: auto; display: block; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.site-footer__links a { text-decoration: none; font-size: .9rem; }
.site-footer__legal { border-top: 1px solid #E5E5E5; padding-block: var(--space-4) var(--space-5); }
.site-footer__legal p { margin: 0; text-align: center; font-size: .78rem; color: #666; }

/* =====================================================================
   ONE FOR ONE WITH THE OLD KAPLAN SITE (Kaplan project: app.css + Bootstrap 5 + NavTop.razor,
   HomeHeroSearch.razor, OpportunityResultsGridKaplan.razor, Footer.razor). Values are the old
   site's computed styles; it runs on a 15px root, so 1rem = 15px throughout.
   ===================================================================== */
html, body { -webkit-font-smoothing: antialiased; }
html { font-size: 15px; }
body { font-family: "Open Sans", sans-serif; font-size: 15px; line-height: 22px; font-weight: 400; color: #272524; }
h1, h2, h3, h4, h5 { font-weight: 400; color: #240F6E; text-transform: none; letter-spacing: normal; margin-top: 0; }
h1 { font-size: calc(1.375rem + 1.5vw); line-height: 1.2; }
@media (min-width: 1200px) { h1 { font-size: 2.5rem; } }

/* Bootstrap 5 .container (0.75rem gutters) with the old app.css override pinning max-width to 1140px at every size. */
.container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: .75rem; }

/* ---- Header (old NavTop.razor) ---- */
.site-header { background: #240F6E; font-family: "Open Sans", sans-serif; z-index: 100; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1200px; margin: 0 auto; padding: 0 2rem; min-height: 70px; position: relative; }
.site-header__brand img { display: block; height: 58px; width: auto; max-width: 400px; }
.site-nav--desktop { display: flex; align-items: center; height: 100%; gap: 0; margin-left: auto; }
.site-nav__link {
  display: flex; align-items: center; min-height: 100%; padding: 5px 20px;
  font-size: 15px; line-height: 22px; text-transform: none; letter-spacing: normal; text-decoration: none;
  border-right: 1px solid rgba(0,0,0,.1); transition: color .2s ease;
}
.site-nav__link:last-child { border-right: none; }
.site-header .site-nav a.site-nav__link { color: #fff; font-weight: 400; text-decoration: none; }
.site-header .site-nav a.site-nav__link:hover { color: #CDEB37; text-decoration: none; }
.site-nav__link:focus-visible { outline: 2px solid #CDEB37; outline-offset: 2px; }
.site-nav__inner { display: flex; align-items: center; border-bottom: 2px solid transparent; padding-bottom: 3px; transition: border-color .2s ease; }
.site-nav__link:hover .site-nav__inner { border-bottom-color: #CDEB37; }
.site-nav__link .kicon--symbol { display: block; flex: none; width: 18px; height: 18px; margin-right: 6px; color: inherit; }
.site-nav__toggle {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 0; border-radius: 999px; background: rgba(255,255,255,.08); transition: background-color .25s ease;
}
.site-nav__toggle:hover { background: rgba(255,255,255,.16); }
.site-nav__toggle:focus-visible { outline: 2px solid #CDEB37; outline-offset: 3px; }
.site-nav__toggle span { display: block; width: 22px; height: 2px; margin: 0; border-radius: 999px; background: #fff; transition: transform .3s ease, opacity .2s ease; transform-origin: center; }
.site-nav--mobile[open] .site-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav--mobile[open] .site-nav__toggle span:nth-child(2) { opacity: 0; }
.site-nav--mobile[open] .site-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
  .site-header__inner { padding: .75rem 1rem; min-height: 80px; }
  .site-header__brand img { height: 48px; max-width: 230px; }
  .site-nav--desktop { display: none; }
  .site-nav--mobile { display: block; }
  .site-nav--mobile .site-nav__links { display: flex; flex-direction: column; gap: .35rem; background: #240F6E; border-bottom: 0; box-shadow: none; padding: .5rem 1rem .75rem; }
  .site-nav--mobile .site-nav__links a.site-nav__link { width: 100%; min-height: 52px; padding: 0; border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); }
  .site-nav--mobile .site-nav__links a.site-nav__link:last-child { border-bottom: none; }
  .site-nav--mobile .site-nav__inner { width: 100%; min-height: 52px; padding: 0 1rem; justify-content: flex-start; border-bottom: none; border-radius: 8px; transition: background-color .2s ease, color .2s ease; }
  .site-nav--mobile .site-nav__link:hover .site-nav__inner { background: rgba(205,235,55,.14); }
}

/* ---- Home hero with the search card inside (old HomeHeroSearch.razor: container-fluid py-5) ---- */
.hero--home {
  display: block; min-height: 0; overflow: visible; padding: 3rem .75rem;
  background-color: transparent; background-image: url("../img/hero-abstract.svg"); background-size: cover; background-position: center; background-repeat: repeat;
}
.hero__copy { display: flex; flex-direction: column; gap: 32px; width: calc(100% + 1.5rem); margin-inline: -.75rem; padding: 1.5rem; }
@media (min-width: 768px) { .hero__copy { width: calc((100% + 1.5rem) * .75); } }
.hero--home .hero__title { margin: 0; max-width: none; color: #240F6E; font-weight: 400; line-height: 1.2; font-size: calc(1.375rem + 1.5vw); }
@media (min-width: 1200px) { .hero--home .hero__title { font-size: 2.5rem; } }
.hero--home .hero__sub { margin: 0; max-width: none; color: #272524; font-size: 20px; line-height: 30px; }

/* .searchAdvancedCard: white, 16px corners, Bootstrap row of col-12 col-xl-3 (1.5rem gutters, mb-3 below xl). */
.hero--home .kfilters {
  margin-top: 32px; padding: 2rem; background: #fff; border-radius: 16px;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.16), 0 1px 3px 1px rgba(0,0,0,.08);
  display: grid; grid-template-columns: 1fr; gap: 1rem 1.5rem;
}
@media (min-width: 1200px) { .hero--home .kfilters { grid-template-columns: repeat(4, 1fr); row-gap: 0; } }
.hero--home .kfilters__field label { display: inline-block; gap: 0; font-size: 15px; font-weight: 500; line-height: 18px; color: #272524; margin-bottom: 7.5px; }
.hero--home .kfilters__badge {
  display: inline-block; margin-left: .5rem; padding: .35em .65em; border-radius: .25rem;
  background: #CDEB37; color: #212529; font-size: 12px; font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline;
}
/* Bootstrap .form-control (appearance none, 15px/1.5); the selects carry the old grey chevron. */
.hero--home .kfilters input[type=text], .hero--home .kfilters select {
  display: block; width: 100%; height: 46px; margin: 0;
  font-family: "Open Sans", sans-serif; font-size: 15px; font-weight: 400; line-height: 22.5px; color: #212529;
  background-color: #fff; border-radius: 0; -webkit-appearance: none; appearance: none; box-shadow: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.hero--home .kfilters input[type=text] { padding: 7.5px 11.25px; border: 1px solid #6b7280; }
.hero--home .kfilters select {
  padding: 5.625px 11.25px; border: 1px solid #ced4da;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: calc(100% - 7.5px) 50%; background-size: 22.5px 22.5px;
}
.hero--home .kfilters input[type=text]::placeholder { color: rgba(33,37,41,.75); opacity: 1; }
.hero--home .kfilters input[type=text]:focus, .hero--home .kfilters select:focus {
  border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 .12rem #fff, 0 0 0 .28rem #005DE8;
}
.hero--home .kfilters__locate-btn {
  right: 8px; top: 50%; transform: translateY(-50%); padding: 2px; line-height: 0;
  background: none; border: none; cursor: pointer; color: #240F6E; opacity: .6;
}
/* The old button was 27.28px tall (an icon-font line box) with the glyph at its top; nudge to the same spot. */
.hero--home .kfilters__locate-btn .kicon { width: 18px; height: 18px; color: #082ECF; transform: translateY(-2.64px); }
/* Slider: transparent .form-control, track and thumb from the old css/customquiz.css. */
.hero--home .kfilters input[type=range] {
  display: block; width: 100%; height: 46px; margin: 0; padding: 0 12px; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; -webkit-appearance: none; appearance: none; accent-color: #005DE8; cursor: grab;
}
.hero--home .kfilters input[type=range]::-webkit-slider-runnable-track { background: #999; border: none; height: .15rem; }
.hero--home .kfilters input[type=range]::-moz-range-track { background: #999; border: none; height: .15rem; }
.hero--home .kfilters input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -9px; background-color: #db2777; height: 1.3rem; width: 1.3rem; border-radius: 50%; }
.hero--home .kfilters input[type=range]::-moz-range-thumb { border: none; background-color: #db2777; height: 1.3rem; width: 1.3rem; border-radius: 50%; }
/* btn btn-txt btn-lg mt-3 bg-lightGreen text-dark d-block w-100, 60px pill. */
.hero--home .kfilters .kfilters__submit {
  grid-column: 1 / -1; display: block; width: 100%; min-height: 48px; margin-top: 1rem; padding: 12px 16px;
  border: 0; border-radius: 60px; background: #CDEB37; color: #212529; box-shadow: 0 2px 0 0 rgba(0,0,0,.16);
  font-family: "Open Sans", sans-serif; font-size: 16px; font-weight: 700; line-height: 20px; text-align: center;
}
.hero--home .kfilters .kfilters__submit:hover { background: #CDEB37; border-color: transparent; color: #212529; box-shadow: 0 2px 0 0 rgba(0,0,0,.16); }

/* ---- Results (old OpportunityResultsGridKaplan wrapper) ---- */
.kresults { max-width: 1140px; margin: 0 auto; padding: 2rem 1.5rem 3rem; }
.kresults .results { margin-top: 0; }
.kresults .results__head .results__title { margin: 0; font-weight: 400; line-height: 1.2; font-size: calc(1.375rem + 1.5vw); }
@media (min-width: 1200px) { .kresults .results__head .results__title { font-size: 2.5rem; } }
.kresults .results__count { margin: 7.5px 0 0; font-size: 16px; line-height: 24px; color: #666; }

/* ---- Advice page (old Pages/Advice.razor) ----
   Bands are container-fluid py-5; rows are Bootstrap rows of col-md-6 p-4, images inside a p-md-4. */
.adv-band { padding: 3rem .75rem; }
.adv-band--hero { background-color: #D0E1FC; }
.adv-row { display: flex; flex-wrap: wrap; margin-inline: -.75rem; }
.adv-col { flex: 0 0 auto; width: 100%; max-width: 100%; padding: 1.5rem; }
@media (min-width: 768px) { .adv-col { width: 50%; } }
.adv-col--text { display: flex; flex-direction: column; justify-content: center; gap: 32px; }
/* Hero: image first on phones (order-1 / order-2), text first from md up. */
.adv-col--hero-text { order: 2; }
.adv-col--hero-img { order: 1; }
@media (min-width: 768px) { .adv-col--hero-text { order: 1; } .adv-col--hero-img { order: 2; } }
@media (min-width: 768px) { .adv-img-pad { padding: 1.5rem; } }
.adv-img { display: inline; max-width: 100%; height: auto; vertical-align: middle; border-radius: 16px; }
.adv-title { margin: 0; color: #240F6E; }
.adv-title--light { color: #fff; }
.adv-lead { margin: 0; font-size: 20px; line-height: 30px; }
.adv-text { margin: 0; font-size: 16px; line-height: 24px; }
.adv-actions { display: flex; margin: 0; }
/* Old Bootstrap .btn + app.css: 0 2px 0 shadow, no hover change, 48px tall. */
.adv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; max-height: 48px; margin-right: 7.5px; padding: 12px 16px;
  border: 0; border-radius: 60px; box-shadow: 0 2px 0 0 rgba(0,0,0,.16);
  font-family: "Open Sans", sans-serif; font-size: 16px; font-weight: 700; line-height: 20px; text-align: center; text-decoration: none;
  vertical-align: middle; user-select: none; transition: background-color .15s ease, border-color .15s ease;
}
.adv-btn--blue, .adv-btn--blue:hover { background-color: #240F6E; color: #fff; box-shadow: 0 2px 0 0 rgba(0,0,0,.16); }
.adv-btn--white, .adv-btn--white:hover { background: #fff; color: #240F6E; box-shadow: 0 2px 0 0 rgba(0,0,0,.16); }
.adv-btn__icon { display: flex; align-items: center; width: 20px; height: 20px; max-width: none; margin-left: 7.5px; vertical-align: middle; }
.adv-link, .adv-link:hover { display: inline-flex; align-items: center; padding: 0; font-size: 16px; font-weight: 500; line-height: 22px; color: #005DE8; text-decoration: none; }
.adv-link__icon { width: 20px; height: 20px; margin-left: 3.75px; }
/* Dark CTA card: 48px padding, 12px corners, dotted circle overhanging the right edge. */
.adv-cta { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 32px; padding: 48px; border-radius: 12px; background-color: #240F6E; }
.adv-cta__pattern {
  position: absolute; top: 75%; right: -10%; transform: translateY(-50%); width: 400px; height: 400px;
  background: url("../img/advice/gmfj-circle-with-dot-pattern.png") no-repeat; background-size: contain; opacity: .8;
}
@media (max-width: 768px) { .adv-cta__pattern { display: none; } }
.adv-cta__body { max-width: 800px; display: flex; flex-direction: column; gap: 24px; }
.adv-cta .adv-lead { color: #fff; }
/* FAQ accordion: 1rem rows on rgba(0,0,0,.125) rules, chevron turning 180° when open. */
.adv-faq__title { margin: 0 0 .5rem; }
.adv-faq { border-top: 1px solid rgba(0,0,0,.125); }
.adv-faq__head {
  display: flex; align-items: center; justify-content: space-between; padding: 1rem 0;
  border-bottom: 1px solid rgba(0,0,0,.125); cursor: pointer; list-style: none;
}
.adv-faq__head::-webkit-details-marker { display: none; }
.adv-faq__q { font-size: 16px; font-weight: 600; line-height: 23.36px; color: #240F6E; text-align: left; }
.adv-faq__head .kicon--symbol { flex: none; width: 20px; height: 20px; color: #240F6E; transition: transform .3s ease; }
.adv-faq__item[open] .adv-faq__head .kicon--symbol { transform: rotate(180deg); }
.adv-faq__body { padding: 1rem 0; }
.adv-faq__body p { margin: 0; font-size: 15px; line-height: 1.6; color: #333; }

/* ---- Footer (old Footer.razor: row py-5 of two col-md-6, then the copyright row) ---- */
.site-footer { margin-top: 0; background: #f9f9f9; border-top: 1px solid #E5E5E5; color: #272524; }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0; padding-block: 3rem; }
.site-footer__logos { display: flex; align-items: center; gap: 1.5rem; }
.site-footer__kaplan { height: 40px; width: auto; filter: brightness(0) saturate(100%); }
.site-footer__ttp { height: 45px; width: auto; }
/* Inline links (old .footerLinks), so the word space between them is part of the spacing. */
.site-footer__links { display: block; text-align: right; }
.site-footer .site-footer__links a { margin: 0 15px; color: #000; font-size: 13.5px; font-weight: 500; line-height: 22px; text-decoration: none; }
.site-footer__legal { display: flow-root; border-top: 1px solid #E5E5E5; padding-block: 0; }
.site-footer__legal p { margin: 1.5rem 0; font-size: 13px; line-height: 1.6; color: #666; text-align: center; }
@media (max-width: 767.98px) {
  .site-footer__logos, .site-footer__links { flex: 0 0 100%; }
  .site-footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; margin-top: 1.5rem; text-align: left; }
  .site-footer .site-footer__links a { display: block; }
}