/* =========================================================
   KAUST Academy — inner pages (Design A "Pathways")
   Media, Reports, By the Numbers, Alumni, Contact, Verify, legal and other
   pages, search and 404. The rules between the "Ported" markers were taken
   from design-a-pathways/styles-support.css and styles-media.css by a
   converter (left/right to logical properties); the rest maps WordPress,
   Contact Form 7 and the ka-core blocks onto the design.
   Loaded on every page except the home page (see functions.php).
   ========================================================= */

:root { --sp-red: #B42318; --sp-red-50: #FFF4F2; }

/* ---------- Ported: styles-support.css (contact, verify) ---------- */
.page-head.sp-head-overlap .container { padding-bottom: 116px; }
.sp-narrow { max-width: 880px; }
.sp-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; background: #fff; box-shadow: var(--shadow-sm); }
.sp-card > h2 { font-size: 20px; letter-spacing: -.01em; }
.sp-card > p { color: var(--muted); font-size: 15px; margin-top: 8px; }
.sp-card-soft { background: var(--surface); box-shadow: none; }
.sp-card-ic { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--orange-50); color: var(--orange-ink); margin-bottom: 14px; }
.sp-card-link { margin-top: 16px; }
.sp-search { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--muted); transition: border-color .15s, box-shadow .15s; }
.sp-search:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(17, 88, 158, .16); }
.sp-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 16px; color: var(--ink); }
.sp-search input:focus { outline: none; }
.sp-search input::placeholder { color: #7A8798; }
.sp-routes { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: -76px; }
.sp-route { display: flex; align-items: center; gap: 14px; padding: 18px; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color .2s, transform .2s, box-shadow .2s; }
.sp-route:hover { text-decoration: none; border-color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.sp-route-ic { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--bg); color: var(--c); }
.sp-route strong { display: block; color: var(--ink); font-weight: 800; font-size: 16px; line-height: 1.3; }
.sp-route > span:not(.sp-route-ic) > span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.sp-route .go { margin-inline-start: auto; width: 18px; height: 18px; color: var(--muted); transition: transform .2s, color .2s; }
.sp-route:hover .go { color: var(--navy); transform: translateX(3px); }
.sp-contact { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; padding-block: 48px 96px; align-items: start; }
.sp-form-card { padding: 36px 40px 40px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.sp-form-card h2 { font-size: 26px; letter-spacing: -.015em; }
.sp-form-intro { margin: 6px 0 24px; font-size: 15px; color: var(--muted); }
.sp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.sp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-field label, .sp-label-row label { font-weight: 800; font-size: 15px; color: var(--ink); }
.sp-req { color: var(--sp-red); }
.sp-opt-label { font-weight: 600; color: var(--muted); }
.sp-input { width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); font: inherit; font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.sp-input:hover { border-color: #C4CEDA; }
.sp-input:focus, .sp-select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(17, 88, 158, .18); }
.sp-input::placeholder { color: #8A97A8; }
.sp-textarea { height: auto; min-height: 150px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.select.sp-select { width: 100%; height: 48px; border-width: 1.5px; font-size: 15.5px; font-weight: 600; }
.sp-input[aria-invalid="true"], .sp-select[aria-invalid="true"] { border-color: var(--sp-red); background-color: #FFFBFA; }
.sp-input[aria-invalid="true"]:focus, .sp-select[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .16); }
.sp-error { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; font-weight: 700; color: var(--sp-red); line-height: 1.4; }
.sp-error:empty { display: none; }
.sp-error .ic { width: 16px; height: 16px; margin-top: 1px; }
.sp-hint { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.sp-field-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sp-consent { font-size: 14px; color: var(--muted); }
.sp-contact-aside { display: grid; gap: 20px; }
.sp-info { display: grid; gap: 16px; margin-top: 16px; }
.sp-info li { display: flex; gap: 14px; align-items: flex-start; }
.sp-info-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--blue-50); color: var(--blue); }
.sp-info-k { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sp-info a { font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.sp-info address { font-style: normal; font-weight: 600; font-size: 15px; line-height: 1.5; color: var(--ink); }
.sp-map { margin-top: 20px; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.sp-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.sp-map-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 14.5px; }
.sp-map-links .ic { width: 15px; height: 15px; }
.sp-social { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.socials.sp-socials { margin-top: 10px; }
.sp-socials a { border-color: var(--line); color: var(--navy); }
.sp-socials a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.sp-quick { margin-top: 10px; }
.sp-quick li + li { border-top: 1px solid var(--line-2); }
.sp-quick a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; font-weight: 700; color: var(--ink); }
.sp-quick a::after { content: "→"; color: var(--muted); transition: transform .2s; }
.sp-quick a:hover { color: var(--blue); text-decoration: none; }
.sp-quick a:hover::after { transform: translateX(3px); color: var(--blue); }
@media (max-width: 1100px) {
	.sp-routes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
	.sp-contact { grid-template-columns: 1fr; }
	.sp-contact-aside { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 700px) {
	.sp-contact-aside { grid-template-columns: 1fr; }
	.sp-grid-2 { grid-template-columns: 1fr; }
	.sp-form-card { padding: 24px 20px 28px; }
}
@media (max-width: 560px) {
	.sp-routes { grid-template-columns: 1fr; gap: 10px; }
	.sp-route { padding: 14px 16px; }
}
.sp-verify { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: -76px; }
.sp-verify-card { padding: 32px 36px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-lg); }
.sp-verify-form > label { display: block; margin-bottom: 10px; font-size: 16px; font-weight: 800; color: var(--ink); }
.sp-verify-row { display: flex; gap: 10px; }
.sp-verify-input { flex: 1; height: 54px; }
.sp-verify-input:has(input[aria-invalid="true"]) { border-color: var(--sp-red); }
.sp-verify-input input { font-size: 18px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.sp-verify-input input::placeholder { font-weight: 600; letter-spacing: .02em; }
.sp-verify-form .sp-hint { margin-top: 10px; }
.sp-verify-form .sp-hint code { white-space: nowrap; }
.sp-verify-form .sp-error { margin-top: 8px; }
.sp-result:empty { display: none; }
.sp-result { margin-top: 24px; }
.sp-cert-explain { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.sp-cert-explain h2 { margin-bottom: 16px; font-size: 18px; }
/* The real certificate design, with the ID block ringed (made with the certificate script's --sample). */
.sp-cert-sample { margin: 0; }
.sp-cert-sample img { block-size: auto; border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 26, 54, .14), 0 1px 3px rgba(0, 26, 54, .1); display: block; inline-size: 100%; }
.ka-verify-result .ka-certificate-real { margin-block-start: 18px; }
.sp-cert-cap { display: flex; gap: 8px; margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--text); }
.sp-cert-cap .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--blue); }
.sp-emp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.sp-emp-copy .lede { margin-top: 14px; }
.steps-list.sp-steps-1 { grid-template-columns: 1fr; margin-top: 28px; }
.sp-emp-media { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.sp-emp-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1000px) {
	.sp-verify { grid-template-columns: 1fr; }
	.sp-emp { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
	.sp-verify-card { padding: 22px 18px; }
	.sp-verify-row { flex-direction: column; }
	.sp-verify-input { flex: none; }
	.sp-verify-row .btn { width: 100%; }
	.sp-cert-explain { padding: 20px 16px; }
}
.sp-pass .sp-input { padding-inline-end: 52px; }
.sp-certs + .sp-hint { margin-top: 8px; }
.sp-card-soft p { margin-top: 6px; font-size: 15px; color: var(--muted); }
.sp-card-soft .link-arrow { margin-top: 12px; }
@media print {
}

/* ---------- Ported: styles-media.css (films, photos, reports) ---------- */
.md-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.md-seg button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.md-seg button:hover { border-color: var(--navy); }
.md-seg button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.md-seg .n { font-size: 12px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--surface); color: var(--muted); }
.md-seg button[aria-pressed="true"] .n { background: rgba(255, 255, 255, .18); color: #fff; }
.md-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--blue)); flex: none; }
.md-films { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 28px; align-items: start; }
/* One chosen film (ka/films with `films`): the player alone; the hidden list still carries its sources. */
.md-films--single { grid-template-columns: minmax(0, 1fr); max-inline-size: 960px; }
.md-films--single .md-films-aside { display: none; }
.md-player { background: var(--navy-900); border-radius: var(--radius-lg); overflow: hidden; color: #fff; box-shadow: var(--shadow-lg); }
.md-screen { position: relative; aspect-ratio: 16 / 9; background: #000; }
.md-screen video { display: block; width: 100%; height: 100%; background: #000; object-fit: contain; }
.md-player-info { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; padding: 22px 26px 26px; }
.md-player-info .kicker { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }
.md-player-info h3 { color: #fff; font-size: 23px; margin-top: 6px; }
.md-player-info p { color: rgba(255, 255, 255, .78); font-size: 15px; margin-top: 6px; }
.md-quality { display: flex; align-items: center; gap: 10px; }
.md-quality[hidden] { display: none; }
.md-quality label { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.md-quality select { appearance: none; -webkit-appearance: none; block-size: 40px; padding-inline: 14px 38px; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: var(--radius-sm); background: #fff var(--chev) no-repeat right 12px center / 16px; color: var(--ink); font-size: 15px; font-weight: 800; cursor: pointer; }
[dir="rtl"] .md-quality select { background-position: left 12px center; }
.md-quality select:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.md-playlist-h { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.md-playlist { display: grid; gap: 12px; }
.md-film { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: inherit; text-align: start; transition: border-color .2s, box-shadow .2s; }
.md-film:hover { border-color: var(--navy); text-decoration: none; }
.md-film[aria-current="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.md-film-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--navy); }
.md-film-thumb img { width: 100%; height: 100%; object-fit: cover; }
.md-film-thumb .ic { position: absolute; inset-inline-start: 50%; top: 50%; width: 34px; height: 34px; padding-block: 9px 9px; padding-inline: 10px 7px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--navy); }
.md-film strong { display: block; color: var(--ink); font-size: 16px; line-height: 1.3; }
.md-film .meta { display: block; font-size: 13.5px; color: var(--muted); font-weight: 700; margin-top: 4px; }
.md-film .now { display: none; font-size: 11.5px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--teal-700); margin-bottom: 3px; }
.md-film[aria-current="true"] .now { display: block; }
.md-films-aside .callout { margin-top: 16px; }
/* However many films there are, the list stays as tall as the player and
   scrolls ("contain: size": the list doesn't make the row taller). */
.md-films-aside { align-self: stretch; contain: size; display: flex; flex-direction: column; }
.md-films-aside .md-playlist { flex: 1 1 auto; min-block-size: 0; align-content: start; overflow-y: auto; padding-inline-end: 8px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
/* Inside the scrolling list a focus ring outside the card would be cut off. */
.md-playlist .md-film:focus-visible { outline-offset: -3px; }
@media (max-width: 1000px) {
	.md-films { grid-template-columns: minmax(0, 1fr); }
	/* Under the player: one row that scrolls sideways, the next film peeking in. */
	.md-films-aside { contain: none; }
	.md-films-aside .md-playlist { grid-auto-flow: column; grid-auto-columns: 38%; overflow: auto hidden; padding: 0 0 10px; scroll-snap-type: x mandatory; }
	.md-playlist > li { scroll-snap-align: start; }
	.md-film { grid-template-columns: minmax(0, 1fr); align-content: start; block-size: 100%; }
}
@media (max-width: 640px) {
	.md-films-aside .md-playlist { grid-auto-columns: 72%; }
	.md-player-info { padding: 18px 18px 20px; }
	.md-player-info h3 { font-size: 19px; }
}
.md-album-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.md-album-head h3 { font-size: 20px; }
.md-album-head p { color: var(--muted); font-weight: 700; font-size: 14.5px; margin-top: 2px; }
.md-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows: 150px; grid-auto-flow: dense; gap: 10px; }
.md-photos li:first-child { grid-column: span 2; grid-row: span 2; }
.md-photos.is-collapsed li:nth-child(n + 16) { display: none; }
.md-photos-more { display: flex; justify-content: center; margin-top: 18px; }
.md-photo { position: relative; display: block; height: 100%; border-radius: 8px; overflow: hidden; background: var(--line-2); }
.md-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.md-photo::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .2s; background: rgba(0, 26, 54, .35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") no-repeat center / 34px; }
.md-photo:hover img { transform: scale(1.05); }
.md-photo:hover::after, .md-photo:focus-visible::after { opacity: 1; }
.md-photo:focus-visible { outline-offset: 3px; }
@media (max-width: 640px) {
	.md-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 118px; gap: 8px; }
}
.md-featrep { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 56px; align-items: center; }
.md-featrep-cover { display: block; border-radius: 8px; overflow: hidden; background: var(--navy); transform: rotate(-2deg); box-shadow: 0 26px 54px rgba(0, 26, 54, .28), 0 2px 6px rgba(0, 26, 54, .12); transition: transform .3s ease; }
.md-featrep-cover:hover { transform: rotate(0) translateY(-4px); }
.md-featrep-cover img { width: 100%; height: auto; aspect-ratio: 724 / 1024; object-fit: cover; }
.md-featrep h2 { margin-top: 10px; font-size: clamp(1.8rem, 1.3rem + 1.7vw, 2.7rem); letter-spacing: -.024em; }
.md-featrep .lede { margin-top: 14px; max-width: 580px; }
.md-repmeta { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 26px 0 30px; padding: 18px 0; border-block: 1px solid var(--line); }
.md-repmeta dt { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.md-repmeta dd { margin: 3px 0 0; font-weight: 800; color: var(--ink); }
.md-featrep-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.md-repbar .md-seg { flex: 1 1 auto; }
.md-rep-year { padding-top: 30px; }
.md-rep-year > h3 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; font-size: 21px; }
.md-rep-year > h3 span { font-size: 14px; font-weight: 700; color: var(--muted); }
.md-rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px; }
.md-rep { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: box-shadow .22s, transform .22s; }
.md-rep:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.md-rep-cover { position: relative; display: block; aspect-ratio: 212 / 300; overflow: hidden; background: var(--navy); }
.md-rep-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.md-rep:hover .md-rep-cover img { transform: scale(1.03); }
.md-rep-type { position: absolute; inset-inline-end: 10px; top: 10px; padding: 4px 8px; border-radius: 4px; background: #fff; color: var(--navy); font-size: 11.5px; font-weight: 900; letter-spacing: .08em; }
.md-rep-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; border-top: 4px solid var(--c); }
.md-rep-prog { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.md-rep h4 { font-size: 16.5px; line-height: 1.35; letter-spacing: -.005em; }
.md-rep h4 a { color: var(--ink); }
.md-rep h4 a:hover { color: var(--blue); }
.md-rep-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: auto; padding-top: 10px; }
.md-rep-full { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; color: var(--blue); }
.md-rep-full .ic { width: 16px; height: 16px; }
.md-rep-actions .btn .sz { font-weight: 700; opacity: .78; }
@media (max-width: 900px) {
	.md-featrep { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 640px) {
	.md-featrep { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.md-featrep-cover { width: 190px; }
	.md-featrep-actions .btn { flex: 1 1 100%; }
	.md-rep-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.md-rep { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
	.md-rep-cover { aspect-ratio: auto; height: 100%; min-height: 148px; }
	.md-rep-body { border-top: 0; border-inline-start: 4px solid var(--c); padding: 14px 14px 16px; }
	.md-rep h4 { font-size: 15px; }
}
@media (max-width: 640px) {
	.md-st-row .md-seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; }
	.md-st-row .md-seg::-webkit-scrollbar { display: none; }
}

/* ---------- End of ported rules ---------- */

/* Overlap: a first section with class overlap-head rises into the page
   head (ka/page-head adds sp-head-overlap to make room). The margin sits on
   the section itself, as WordPress's spacing reset would win over one on the
   inner grid. */
.ka-page > .wp-block-post-content, .ka-page-wide .wp-block-post-content > * { margin-block-start: 0; }
.ka-page-wide .wp-block-post-content > .overlap-head { margin-block-start: -76px; }
.overlap-head :is(.sp-verify, .sp-routes) { margin-block-start: 0; }
:where(.verify-top, .contact-top) { position: relative; z-index: 2; }
[dir="rtl"] .sp-quick a::after { content: "\2190"; }
[dir="rtl"] .sp-quick a:hover::after { transform: translateX(-3px); }

/* Contact: route cards (the whole card is the link), details, quick answers. */
.sp-route { position: relative; }
.sp-route:nth-child(4n + 1) { --c: #11589E; --bg: #E6EEF8; }
.sp-route:nth-child(4n + 2) { --c: #05696C; --bg: #E3F5F5; }
.sp-route:nth-child(4n + 3) { --c: #8A4B00; --bg: #FEF5EA; }
.sp-route:nth-child(4n + 4) { --c: #00264C; --bg: #E5E9F0; }
.sp-route strong a { color: inherit; }
.sp-route strong a::after { content: ""; inset: 0; position: absolute; }
.sp-route strong a:hover { text-decoration: none; }
.sp-route:focus-within { box-shadow: 0 0 0 3px var(--orange); }
.sp-route .sp-route-text { color: var(--muted); display: block; font-size: 13.5px; line-height: 1.4; margin-block-start: 2px; }
.sp-route-ic .ic { block-size: 22px; inline-size: 22px; }
.contact-main .sp-contact { padding-block: 48px 96px; }
.sp-card > h2 { margin-block-end: 4px; }
.ka-da .sp-info { margin-block: 16px 0; } /* beats the .ka-da list reset */
/* The address is one paragraph (text, line breaks, an ltr span), so the icon
   is placed beside it rather than making the paragraph a flex row. */
.sp-address { color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.5; margin-block-start: 16px; min-block-size: 40px; padding-inline-start: 54px; position: relative; }
.sp-address .ic { background: var(--blue-50); block-size: 40px; border-radius: 10px; color: var(--blue); inline-size: 40px; inset-block-start: 0; inset-inline-start: 0; padding: 10px; position: absolute; }
.sp-map > *, .sp-map figure, .sp-map .wp-block-embed__wrapper { block-size: 100%; margin: 0; }
.ka-da .sp-quick { margin-block: 10px 0; }
.sp-socials a { block-size: 40px; border: 1px solid var(--line); border-radius: 50%; display: grid; inline-size: 40px; place-items: center; }
.sp-socials svg { block-size: 18px; inline-size: 18px; }

/* Contact Form 7, in the design's form styles (.sp-field, .sp-input). */
.ka-form .wpcf7-form { display: grid; gap: 18px; }
.ka-form .wpcf7-form > p { margin: 0; }
.ka-form__row { display: grid; gap: 18px 20px; grid-template-columns: 1fr 1fr; }
.ka-form label { color: var(--ink); display: flex; flex-direction: column; font-size: 15px; font-weight: 800; gap: 6px; }
.ka-form .wpcf7-form-control-wrap { display: block; }
.ka-form :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea) {
	background: #fff;
	block-size: 48px;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font: inherit;
	font-size: 16px;
	font-weight: 400;
	inline-size: 100%;
	padding: 0 14px;
	transition: border-color .15s, box-shadow .15s;
}
.ka-form select { appearance: none; -webkit-appearance: none; background: #fff var(--chev) no-repeat right 12px center / 16px; font-size: 15.5px; font-weight: 600; padding-inline-end: 38px; }
[dir="rtl"] .ka-form select { background-position: left 12px center; }
.ka-form textarea { block-size: auto; line-height: 1.55; min-block-size: 150px; padding: 12px 14px; resize: vertical; }
.ka-form :where(input, select, textarea):focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(17, 88, 158, .18); outline: none; }
.ka-form :where(input, select, textarea)[aria-invalid="true"] { background-color: #FFFBFA; border-color: var(--sp-red); }
.ka-form .wpcf7-not-valid-tip { color: var(--sp-red); font-size: 14px; font-weight: 700; margin-block-start: 6px; }
.ka-form .ka-form__consent { color: var(--muted); font-size: 14px; font-weight: 400; }
.ka-form .wpcf7-submit { background: var(--orange); border: 0; border-radius: var(--radius-sm); color: var(--navy); cursor: pointer; font-size: 16px; font-weight: 800; justify-self: start; min-block-size: 54px; padding: 0 26px; }
.ka-form .wpcf7-submit:hover { background: var(--orange-600); }
.ka-form .wpcf7-spinner { margin-inline: 12px 0; }
.ka-form .wpcf7-response-output:empty { display: none; }
.ka-form .wpcf7-response-output { border-radius: var(--radius); font-weight: 700; margin: 0 !important; padding: 14px 18px !important; }
.ka-form__checks { border: 0; margin: 0; min-inline-size: 0; padding: 0; }
.ka-form__checks legend { color: var(--ink); font-size: 15px; font-weight: 800; margin-block-end: 10px; padding: 0; }
.ka-form .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px; }
.ka-form .wpcf7-list-item { margin: 0; }
.ka-form .wpcf7-list-item label { align-items: center; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; flex-direction: row; font-size: 14.5px; font-weight: 700; gap: 8px; padding: 9px 14px; transition: border-color .15s, background-color .15s; }
.ka-form .wpcf7-list-item input { accent-color: var(--navy); block-size: 16px; inline-size: 16px; margin: 0; }
.ka-form .wpcf7-list-item label:hover { border-color: var(--navy); }
.ka-form .wpcf7-list-item label:has(input:checked) { background: var(--blue-50); border-color: var(--navy); }
.ka-form .wpcf7-list-item label:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(17, 88, 158, .18); }
@media (max-width: 700px) { .ka-form__row { grid-template-columns: 1fr; } }

/* Verify: the lookup form in the design's card (the block's own card styles
   step aside), results below it. */
.sp-verify-card .ka-verify { background: none; border: 0; box-shadow: none; margin: 0; padding: 0; }
.sp-verify-card .ka-verify-wrap > * + * { margin-block-start: 24px; }
.sp-verify-input .ic { color: var(--muted); }
.ka-verify-result .ka-notice { border-radius: var(--radius); }
.ka-verify-result .ka-certificate { margin-block-start: 18px; }
.sp-cert-cap .ic { flex: none; }
.sp-emp:not(:has(.sp-emp-media)) { grid-template-columns: minmax(0, 760px); }
.sp-emp-media img { block-size: 100%; inline-size: 100%; }
.faq .wp-block-details { border: 0; border-block-end: 1px solid var(--line); margin: 0; padding: 0; }
.faq .wp-block-details:first-child { border-block-start: 1px solid var(--line); }
.faq .wp-block-details summary { align-items: center; color: var(--ink); cursor: pointer; display: flex; font-family: inherit; font-size: 17px; font-weight: 800; gap: 16px; justify-content: space-between; line-height: 1.4; list-style: none; padding: 20px 0; }
.faq .wp-block-details summary::-webkit-details-marker { display: none; }
.faq .wp-block-details summary::after { background: var(--chev) no-repeat center / 16px; block-size: 32px; border: 1px solid var(--line); border-radius: 50%; content: ""; flex: none; inline-size: 32px; inset: auto; position: static; transition: transform .2s; translate: none; }
.faq .wp-block-details[open] summary::after { background-color: var(--blue-50); transform: rotate(180deg); }
.faq .wp-block-details > :not(summary) { color: var(--text); font-size: 15.5px; line-height: 1.7; margin-block: 0 22px; }

/* Media: films and photo galleries. */
.md-film { color: inherit; }
.md-film[aria-current] { border-color: var(--navy); }
.md-film-thumb { position: relative; }
.md-gallery-bar { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 16px; margin-block-end: 24px; }
.md-gallery-bar label { color: var(--ink); font-weight: 800; }
.md-gallery .ka-select select { appearance: none; -webkit-appearance: none; background: #fff var(--chev) no-repeat right 12px center / 16px; block-size: 46px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-size: 15.5px; font-weight: 700; max-inline-size: 100%; min-inline-size: min(280px, 100%); padding-inline: 14px 40px; }
[dir="rtl"] .md-gallery .ka-select select { background-position: left 12px center; }
.md-gallery .ka-select > .ka-icon { display: none; }
.md-gallery-bar .ka-select { flex: 1 1 240px; max-inline-size: 30rem; min-inline-size: 0; }
.md-gallery-bar .ka-select select { inline-size: 100%; min-inline-size: 0; text-overflow: ellipsis; }
.md-photo.ka-gallery__item { aspect-ratio: auto; }
.md-gallery .ka-gallery__program { font-size: 22px; margin-block-end: 16px; }
.md-album + .md-album { margin-block-start: 32px; }
.md-album-head h4 { font-size: 18px; }
.md-album-head span { color: var(--muted); font-size: 14px; }
.md-photos { list-style: none; padding: 0; }

/* Reports. */
.md-featrep { margin-block-end: 64px; }
.md-reports-h { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin-block-end: 18px; }
.md-seg.ka-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 24px; }
.md-rep-grid { list-style: none; padding: 0; }
.md-rep .md-rep-prog { color: var(--blue); display: flex; flex-wrap: wrap; font-size: 12.5px; font-weight: 800; gap: 4px 12px; letter-spacing: .06em; text-transform: uppercase; }
.md-rep h3 { font-size: 16px; line-height: 1.35; }
.md-rep h3 a { color: var(--ink); }
.md-rep[data-ka-filtered] { display: none; }

/* By the Numbers and Alumni: the charts as cards. */
.ka-page-wide .ka-chart { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-block: 0 24px; padding: 24px 28px; }
.ka-page-wide .ka-chart__title { color: var(--ink); font-size: 19px; font-weight: 800; }
.alumni-two { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: 24px; }
.alumni-stats.section { padding-block: 56px; }
.ka-page-wide .ka-kpis { gap: 20px; }
.ka-page-wide .ka-kpi { align-content: start; border-color: var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); gap: 8px; padding: 26px 24px; }
.ka-page-wide .ka-kpi::before { background: var(--c, var(--orange)); block-size: 4px; border-radius: 2px; display: block; inline-size: 28px; margin-block-end: 10px; position: static; }
.ka-page-wide .ka-kpi:nth-child(4n + 2) { --c: var(--yellow); }
.ka-page-wide .ka-kpi:nth-child(4n + 3) { --c: var(--lime); }
.ka-page-wide .ka-kpi:nth-child(4n + 4) { --c: var(--teal); }
.ka-page-wide .ka-kpi__value { color: var(--navy); font: 900 clamp(2.1rem, 1.5rem + 1.8vw, 3rem)/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.ka-page-wide .ka-kpi__label { color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.45; }
.ka-page-wide .ka-kpi__note { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 999px) { .ka-page-wide .ka-kpis--4 { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ka-page-wide .ka-kpi { padding: 20px 16px; } }
@media (max-width: 860px) { .alumni-two { grid-template-columns: minmax(0, 1fr); } }

/* By the Numbers (parent) and the program numbers pages (inc/program-numbers.php). */
.ka-pn-cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); list-style: none; margin: 0; padding: 0; }
.ka-pn-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 18px; padding: 28px; }
.ka-pn-card::before { background: var(--orange); block-size: 4px; border-radius: 2px; content: ""; inline-size: 28px; }
.ka-pn-card:nth-child(2)::before { background: var(--teal); }
.ka-pn-card:nth-child(3)::before { background: var(--lime); }
.ka-pn-card__name { color: var(--ink); font-size: 20px; line-height: 1.3; margin: 0; }
.ka-pn-card__figures { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.ka-pn-card__figures li { align-items: baseline; display: grid; gap: 4px 14px; grid-template-columns: minmax(5.5ch, auto) 1fr; }
.ka-pn-card__value { color: var(--navy); font: 900 28px/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ka-pn-card__figures li > span:last-child { color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.4; }
.ka-pn-card__link { align-items: center; color: var(--blue); display: inline-flex; font-weight: 800; gap: 6px; margin-block-start: auto; }
.ka-pn-card__link:hover { color: var(--navy); }
[dir="rtl"] .ka-pn-card__link .ka-icon { transform: scaleX(-1); }
.ka-pn-more { color: var(--muted); margin-block-start: 28px; }
.ka-pn-end.section { padding-block: 40px; }
.ka-pn-end .ka-pn-more { margin: 0; }
.ka-pn-kpis + .ka-pn-note, .ka-pn-table + .ka-pn-note { margin-block-start: 14px; }
.ka-pn-note { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 0 0 8px; }
.ka-page-wide .ka-chart + .ka-pn-kpis { margin-block-start: 0; }
@media (min-width: 1000px) { .ka-pn-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Year-by-year tables. */
.ka-pn-table { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow-x: auto; }
.ka-pn-table table { border-collapse: collapse; font-size: 15.5px; inline-size: 100%; }
.ka-pn-table caption { color: var(--ink); font-size: 19px; font-weight: 800; padding: 22px 24px 6px; text-align: start; }
.ka-pn-table th, .ka-pn-table td { border-block-end: 1px solid var(--line); padding: 14px 24px; text-align: start; vertical-align: baseline; }
.ka-pn-table thead th { color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-align: end; white-space: nowrap; }
.ka-pn-table tbody th { color: var(--ink); font-weight: 600; inline-size: 100%; line-height: 1.45; }
.ka-pn-table td { color: var(--navy); font-size: 18px; font-variant-numeric: tabular-nums; font-weight: 900; min-inline-size: 6.5rem; text-align: end; white-space: nowrap; }
.ka-pn-table thead th, .ka-pn-table td { padding-inline: 28px; }
.ka-pn-table td span[aria-hidden] { color: var(--muted); font-weight: 400; }
.ka-pn-table tbody tr:last-child > * { border-block-end: 0; }
/* Mixed table (ka_pn_block_table): the row header keeps its width; text cells wrap. */
.ka-pn-table--mixed tbody th { inline-size: auto; min-inline-size: 12rem; }
.ka-pn-table--mixed .is-text { text-align: start; }
.ka-pn-table--mixed td.is-text { color: var(--text); font-size: 15px; font-weight: 600; line-height: 1.45; min-inline-size: 16rem; white-space: normal; }
@media (max-width: 640px) { .ka-pn-table th, .ka-pn-table td, .ka-pn-table thead th { padding: 12px 14px; } .ka-pn-table caption { padding-inline: 14px; } .ka-pn-table td { min-inline-size: 0; } }
/* "Compared with other students" list. */
.ka-pn-list { background: #fff; border: 1px solid var(--line); border-inline-start: 4px solid var(--orange); border-radius: var(--radius-lg); margin-block: 24px; padding: 24px 28px; }
.ka-pn-list__title { color: var(--ink); font-weight: 800; margin: 0 0 10px; }
.ka-pn-list ul { display: grid; gap: 6px; list-style: disc; margin: 0 0 12px; padding-inline-start: 1.2em; }
.ka-pn-list li { color: var(--ink); display: list-item; font-size: 16px; list-style: disc outside; }
.ka-pn-list li::marker { color: var(--orange); }
/* Alumni honours. */
.ka-pn-honours__title { color: var(--ink); font-size: 22px; margin: 40px 0 18px; }
.ka-pn-honours__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); list-style: none; margin: 0; padding: 0; }
.ka-pn-honour { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 22px 24px; }
.ka-pn-honour__head { align-items: baseline; display: flex; gap: 12px; margin: 0 0 12px; }
.ka-pn-honour__count { color: var(--orange); flex: none; font: 900 34px/1 var(--font); font-variant-numeric: tabular-nums; }
.ka-pn-honour__title { color: var(--ink); font-size: 16.5px; font-weight: 800; line-height: 1.35; }
.ka-pn-honour__people { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ka-pn-honour__people li { border-block-start: 1px solid var(--line); display: grid; gap: 2px; padding-block-start: 10px; }
.ka-pn-honour__people strong { color: var(--ink); font-size: 15px; }
.ka-pn-honour__people span { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
[dir="rtl"] .ka-pn-honour__people { text-align: start; }
/* A film inside a numbers section. */
.ka-pn-film { margin: 40px 0 0; }
.ka-pn-film figcaption { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin-block-start: 14px; max-inline-size: 960px; }

/* Generic pages: a readable document, with a contents list when long. */
.doc-layout { display: grid; gap: 56px; grid-template-columns: minmax(0, 820px); justify-content: center; padding-block: 48px 96px; }
.doc-layout:has(> .doc-toc) { grid-template-columns: 250px minmax(0, 820px); }
.doc-toc { align-self: start; inset-block-start: calc(var(--masthead-h) + 24px); position: sticky; }
.doc-toc-title { color: var(--muted); font-size: 12.5px; font-weight: 800; letter-spacing: .08em; margin-block-end: 10px; text-transform: uppercase; }
.doc-toc ol { border-inline-start: 2px solid var(--line); list-style: none; margin: 0; padding: 0; }
.doc-toc li a { color: var(--text); display: block; font-size: 14.5px; font-weight: 600; line-height: 1.4; padding-block: 7px; padding-inline-start: 14px; }
.doc-toc li a:hover { color: var(--blue); text-decoration: none; }
.page-content > :is(h2, h3) { scroll-margin-block-start: calc(var(--masthead-h) + 24px); }
@media (max-width: 960px) {
	.doc-layout, .doc-layout:has(> .doc-toc) { gap: 28px; grid-template-columns: minmax(0, 1fr); padding-block-start: 32px; }
	.doc-toc { background: var(--surface); border-radius: var(--radius); padding: 18px 20px; position: static; }
}

/* Search results and 404. */
.search-page { padding-block: 40px 96px; }
.search-again { border: 1.5px solid var(--line); box-shadow: none; margin: 0 0 28px; }
.search-page .results-count { color: var(--muted); }
.results-h { font-size: 20px; margin-block: 32px 16px; }
.result-list, .result-list.wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.result-row { border-block-end: 1px solid var(--line); }
.result-row > a, .result-row .result-title a { color: inherit; display: block; padding-block: 18px; }
.result-row a:hover { text-decoration: none; }
.result-title, .result-row .wp-block-post-title { color: var(--ink); display: block; font-size: 18px; font-weight: 800; }
.result-row a:hover .result-title { color: var(--blue); }
.result-text, .result-row .wp-block-post-excerpt { color: var(--muted); display: block; font-size: 15px; margin-block-start: 4px; }
.results-pages ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 32px 0 0; padding: 0; }
.results-pages :is(a, span) { border: 1px solid var(--line); border-radius: 999px; color: var(--ink); display: inline-block; font-weight: 700; min-inline-size: 42px; padding: 9px 14px; text-align: center; }
.results-pages .current { background: var(--navy); border-color: var(--navy); color: #fff; }
.popular-links { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }

/* ---------- Ported (phase 4): styles-support.css (admissions, events) ---------- */
.sp-lede { margin: -4px 0 26px; max-width: 680px; font-size: 17px; }
.sp-head-grid { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.sp-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-stack { display: grid; gap: 10px; margin-top: 18px; }
.sp-row-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.sp-row-head h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); letter-spacing: -.02em; }
.sp-count { font-size: 14.5px; color: var(--muted); font-weight: 700; }
.sp-ph { display: inline-flex; padding: 2px 7px; border-radius: 5px; margin-inline-start: 8px; vertical-align: 2px; background: #EEF1F5; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sp-ticks li { position: relative; padding-inline-start: 24px; margin: 5px 0; line-height: 1.5; }
.sp-ticks li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .42em; width: 11px; height: 6px; border-inline-start: 2px solid var(--teal-700); border-bottom: 2px solid var(--teal-700); transform: rotate(-45deg); }
.sp-ticks li.sp-check-page { color: var(--muted); font-style: italic; font-weight: 600; }
.sp-ticks li.sp-check-page::before { border: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); transform: none; top: .62em; inset-inline-start: 4px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); font-weight: 700; font-size: 14px; transition: background .15s, border-color .15s, color .15s; }
.sp-chip:hover { border-color: var(--navy); }
.sp-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.sp-chip .n { font-size: 12px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--surface); color: var(--muted); }
.sp-chip .n:empty { display: none; }
.sp-chip[aria-pressed="true"] .n { background: rgba(255, 255, 255, .18); color: #fff; }
.sp-t-info { --t: #11589E; --tb: var(--blue-50); }
.sp-t-deadline { --t: #8A4B00; --tb: var(--orange-50); --td: var(--orange); }
.sp-t-exam { --t: #05696C; --tb: var(--teal-50); }
.sp-t-program { --t: #5E534B; --tb: #F0ECE9; }
.sp-t-ceremony { --t: #00264C; --tb: #E5E9F0; }
.sp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--td, var(--t)); flex: none; }
.sp-facts-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
	.sp-facts-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sp-facts-4 .fact:nth-child(n) { border-inline-start: 1px solid var(--line); border-top: 0; }
	.sp-facts-4 .fact:nth-child(odd) { border-inline-start: 0; }
	.sp-facts-4 .fact:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
.p-aside .sp-aside-sub { margin-top: 4px; font-size: 14.5px; font-weight: 700; color: var(--muted); }
.sp-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.sp-seg button { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 800; font-size: 15px; transition: background .15s, color .15s; }
.sp-seg button:hover { color: var(--navy); }
.sp-seg button[aria-selected="true"] { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
.sp-seg .ic { width: 18px; height: 18px; }
.sp-panel[hidden] { display: none; }
.sp-panel .callout a { font-weight: 800; }
.sp-elig { min-width: 640px; }
.sp-elig tbody th { width: 28%; white-space: normal; line-height: 1.4; }
.sp-elig tbody th a { color: var(--navy); }
.sp-elig td:nth-of-type(1) { width: 30%; }
.sp-elig td { line-height: 1.5; }
.sp-fees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sp-fee { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--line); border-top: 4px solid var(--c, var(--navy)); border-radius: var(--radius); background: #fff; }
.sp-fee:nth-child(1) { --c: var(--teal); }
.sp-fee:nth-child(2) { --c: var(--orange); }
.sp-fee:nth-child(3) { --c: var(--stone); }
.sp-fee-k { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sp-fee-v { font-size: 26px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; line-height: 1.15; }
.sp-fee-v small { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.sp-fee-note { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.sp-fee .sp-ticks { margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 14.5px; color: var(--text); }
.sp-fee .link-arrow { margin-top: auto; padding-top: 8px; font-size: 15px; }
.sp-faq-tools { display: grid; gap: 14px; margin: 4px 0 18px; }
.sp-faq { border-top: 1px solid var(--line); }
.faq.sp-faq details:first-of-type { border-top: 0; }
.sp-faq details[hidden] { display: none; }
.sp-faq mark { background: #FDE7BF; color: inherit; border-radius: 3px; padding: 0 1px; }
.sp-empty { margin-top: 0; }
@media (max-width: 900px) {
	.sp-fees { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.sp-seg { display: flex; }
	.sp-seg button { flex: 1 1 100%; justify-content: flex-start; }
	.sp-elig { min-width: 0; border: 0; border-radius: 0; }
	.sp-elig thead { display: none; }
	.sp-elig, .sp-elig tbody, .sp-elig tr, .sp-elig th, .sp-elig td { display: block; width: 100% !important; }
	.sp-elig tr { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
	.sp-elig tbody th { background: var(--surface); border-bottom: 1px solid var(--line); }
	.sp-elig td { border-bottom: 0; padding-top: 10px; padding-bottom: 4px; }
	.sp-elig td:last-child { padding-bottom: 14px; }
	.sp-row-head { flex-direction: column; align-items: flex-start; }
}
.sp-events { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; padding-block: 40px 88px; align-items: start; }
.sp-events-aside { display: grid; gap: 24px; }
.sp-events-aside .feature-event .fe-media { aspect-ratio: 16 / 10; }
.sp-toolbar { display: grid; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.sp-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.sp-inline-label { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--muted); }
.sp-past-toggle { padding: 0; font-size: 14.5px; font-weight: 700; }
.sp-ev-list .sp-count, #ev-count { margin-top: 16px; }
.sp-month-group { margin-top: 30px; }
.sp-month-group:first-child { margin-top: 20px; }
.sp-month-h { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; font-size: 21px; letter-spacing: -.01em; }
.sp-month-h small { font-size: 13.5px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.sp-ev .event-type { color: var(--t); display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.sp-ev h3 { font-size: 17.5px; }
.sp-ev-desc { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--text); max-width: 640px; }
.sp-ev-actions { display: flex; gap: 8px; align-items: center; }
.sp-ev-actions .icon-btn { width: 40px; height: 40px; }
.sp-ev-actions .icon-btn:disabled { opacity: .45; cursor: not-allowed; border-color: var(--line); }
.sp-ev-actions .icon-btn .ic { width: 18px; height: 18px; }
.date-block.sp-db-info .m { background: var(--blue); }
.date-block.sp-db-exam .m { background: var(--teal-700); }
.date-block.sp-db-program .m { background: var(--stone); }
.date-block .d.sp-d-range { font-size: 22px; padding-top: 12px; }
.date-block .d.sp-d-tbc { font-size: 16px; padding: 14px 0 7px; color: var(--muted); letter-spacing: .04em; }
.sp-ev.is-past { opacity: .6; }
.sp-ev.is-past .date-block .m { background: var(--muted); color: #fff; }
.sp-ev-empty { margin-top: 24px; }
.sp-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line-2); font-size: 13.5px; font-weight: 700; color: var(--muted); }
.sp-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.sp-legend .sp-legend-note { display: block; flex-basis: 100%; font-weight: 600; }
.sp-legend .sp-ph { margin-inline-start: 2px; vertical-align: 0; }
@media (max-width: 1024px) {
	.sp-events { grid-template-columns: 1fr; gap: 40px; }
	.sp-events-aside { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 760px) {
	.sp-events-aside { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.sp-ev-actions { grid-column: 2; }
	.sp-head-actions { width: 100%; }
	.sp-head-actions .btn { flex: 1 1 auto; }
}

/* ---------- Ported (phase 4): styles-media.css (learner stories, news) ---------- */
.md-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 28px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.md-note .ic { width: 16px; height: 16px; margin-top: 2px; }
.md-empty { text-align: center; padding: 56px 24px; border: 1.5px dashed var(--line); border-radius: var(--radius-lg); margin-top: 24px; background: #fff; }
.md-empty h3 { font-size: 19px; }
.md-empty p { color: var(--muted); margin: 8px auto 18px; max-width: 420px; }
.md-head .container { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 34px 52px; }
.md-head.no-art .container { grid-template-columns: minmax(0, 1fr); }
.md-head-stats { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); }
.md-head-stats li { color: rgba(255, 255, 255, .78); font-size: 14.5px; line-height: 1.35; }
.md-head-stats strong { display: block; color: #fff; font-size: 30px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
@media (max-width: 960px) {
	.md-head .container { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
	.md-head-stats { gap: 12px 28px; }
	.md-head-stats strong { font-size: 24px; }
}
.md-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.md-news { display: flex; flex-direction: column; gap: 14px; color: inherit; min-width: 0; }
.md-news:hover { text-decoration: none; }
.md-news-media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--navy); flex: none; }
.md-news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.md-news:hover .md-news-media img { transform: scale(1.04); }
.md-news-media.is-doc { background: radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, .14), transparent 55%), var(--navy); }
.md-news-media.is-doc img { object-fit: contain; padding: 14px 0; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.md-news-media .md-badge { position: absolute; inset-inline-start: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px; background: rgba(0, 26, 54, .82); color: #fff; font-size: 12.5px; font-weight: 800; }
.md-news-media .md-badge .ic { width: 15px; height: 15px; }
.md-news-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.md-news h3 { font-size: 19px; line-height: 1.35; letter-spacing: -.01em; }
.md-news:hover h3 { color: var(--blue); }
.md-news-ex { color: var(--muted); font-size: 15px; line-height: 1.55; }
.md-news .link-arrow { font-size: 15px; margin-top: 4px; }
.md-news.is-lead { grid-column: span 2; grid-row: span 2; }
.md-news.is-lead .md-news-media { aspect-ratio: auto; flex: 1; min-height: 300px; }
.md-news.is-lead h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.95rem); line-height: 1.22; letter-spacing: -.02em; }
.md-news.is-lead .md-news-ex { font-size: 16.5px; max-width: 640px; }
@media (max-width: 1000px) {
	.md-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.md-news.is-lead { grid-row: auto; }
	.md-news.is-lead .md-news-media { aspect-ratio: 16 / 9; flex: none; min-height: 0; }
}
@media (max-width: 640px) {
	.md-news-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.md-news.is-lead { grid-column: auto; }
	.md-news:not(.is-lead) { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; }
	.md-news:not(.is-lead) .md-news-media { aspect-ratio: 1; }
	.md-news:not(.is-lead) .md-news-media .md-badge { display: none; }
	.md-news:not(.is-lead) h3 { font-size: 16px; }
	.md-news:not(.is-lead) .md-news-ex, .md-news:not(.is-lead) .link-arrow { display: none; }
}
.md-quick { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.md-quick a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); color: var(--ink); font-weight: 800; font-size: 15px; }
.md-quick a:last-child { border-bottom: 0; }
.md-quick a:hover { color: var(--blue); text-decoration: none; }
.md-quick a .ic { width: 18px; height: 18px; color: var(--muted); }
.md-quick a span { display: flex; align-items: center; gap: 10px; }
.md-quick a span .ic { color: var(--blue); }
.md-art-head { background: #fff; border-bottom: 1px solid var(--line); }
.md-art-head .container { max-width: calc(880px + 2 * var(--gutter)); padding-block: 34px 32px; }
.md-crumb-light ol { color: var(--muted); }
.md-crumb-light a { color: var(--blue); }
.md-art-head .news-meta { margin-top: 30px; flex-wrap: wrap; }
.md-art-head h1 { margin-top: 14px; font-size: clamp(2rem, 1.35rem + 2.5vw, 3.15rem); line-height: 1.1; letter-spacing: -.028em; font-weight: 900; }
.md-standfirst { margin-top: 20px; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.55; color: var(--muted); }
.md-byline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.md-byline strong { display: block; color: var(--ink); font-weight: 800; line-height: 1.3; }
.md-byline .sub { font-size: 14px; color: var(--muted); }
.md-share-light { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; font-size: 14px; font-weight: 700; color: var(--muted); }
.md-share-light button, .md-share-light a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: var(--navy); }
.md-share-light button:hover, .md-share-light a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.md-share-light .ic { width: 17px; height: 17px; }
.md-art-hero { margin: 32px auto 0; max-width: calc(1120px + 2 * var(--gutter)); }
.md-art-hero img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 40%; border-radius: var(--radius-lg); }
.md-art-hero figcaption { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.md-art-layout { display: grid; grid-template-columns: minmax(0, 720px) 300px; justify-content: center; gap: 64px; padding-block: 44px 88px; align-items: start; }
.md-art-body h2 { margin: 46px 0 14px; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); letter-spacing: -.016em; }
.md-art-body .lead-p { font-size: 19px; line-height: 1.7; color: var(--ink); }
.md-art-body ul.md-bul { margin: 0 0 16px; display: grid; gap: 8px; }
.md-art-body ul.md-bul li { position: relative; padding-inline-start: 22px; font-size: 17px; line-height: 1.65; color: var(--text); }
.md-art-body ul.md-bul li::before { content: ""; position: absolute; inset-inline-start: 4px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.md-pull { margin: 38px 0; padding-block: 4px 4px; padding-inline: 26px 0; border-inline-start: 4px solid var(--orange); }
.md-pull blockquote { margin: 0; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); line-height: 1.45; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.md-pull figcaption { margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.md-pull figcaption strong { color: var(--ink); font-weight: 800; }
.md-art-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.md-art-tags > span { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-inline-end: 4px; }
.md-art-foot { margin-top: 18px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.md-art-aside { position: sticky; top: calc(var(--masthead-h) + 24px); display: grid; gap: 16px; }
.md-kf { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; overflow: hidden; }
.md-kf h2 { padding: 18px 20px 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.md-kf dl { margin: 0; padding: 4px 20px 6px; }
.md-kf dl div { padding: 14px 0; border-bottom: 1px dashed var(--line); }
.md-kf dl div:last-child { border-bottom: 0; }
.md-kf dt { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.md-kf dd { margin: 2px 0 0; font-size: 28px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.md-kf .src { padding: 12px 20px 14px; font-size: 12.5px; color: var(--muted); background: var(--surface); border-top: 1px solid var(--line); }
@media (max-width: 1080px) {
	.md-art-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: calc(760px + 2 * var(--gutter)); margin-inline: auto; }
	.md-art-aside { position: static; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 640px) {
	.md-art-hero img { aspect-ratio: 4 / 3; border-radius: var(--radius); }
	.md-art-aside { grid-template-columns: minmax(0, 1fr); }
	.md-share-light { margin-inline-start: 0; width: 100%; }
	.md-art-body .lead-p { font-size: 18px; }
}
.md-fig { margin: 26px 0 10px; padding: 22px 24px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.md-fig-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.md-fig-head strong { display: block; color: var(--ink); font-size: 16px; font-weight: 800; }
.md-fig-head span { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.md-funnel { display: grid; gap: 14px; }
.md-frow { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px; align-items: center; border-radius: 6px; cursor: default; }
.md-frow:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.md-flabel { font-size: 14.5px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.md-flabel small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.md-ftrack { display: flex; align-items: center; gap: 10px; min-height: 34px; border-inline-start: 1px solid #B6C1CF; }
.md-fbar { height: 22px; width: var(--v); min-width: 4px; border-radius: 0 4px 4px 0; background: var(--blue); transition: width .9s cubic-bezier(.2, .7, .2, 1), background .15s; }
.md-funnel.is-pre .md-fbar { width: 4px; }
@media print {
	.md-funnel.is-pre .md-fbar { width: var(--v); }
}
.md-frow:hover .md-fbar, .md-frow:focus-visible .md-fbar { background: var(--navy); }
.md-fval { font-size: 15px; font-weight: 900; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.md-fig figcaption { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.md-fig .table-wrap { margin-top: 18px; }
.md-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.agenda td.md-num { white-space: nowrap; }
.md-tip { position: fixed; z-index: 130; pointer-events: none; padding: 8px 12px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.4; box-shadow: var(--shadow); opacity: 0; transition: opacity .12s; max-width: 260px; }
.md-tip.show { opacity: 1; }
.md-tip b { display: block; font-size: 15px; font-weight: 900; }
@media (max-width: 560px) {
	.md-art-body .agenda th, .md-art-body .agenda td, .md-fig .agenda th, .md-fig .agenda td { padding: 11px 9px; font-size: 13.5px; }
	.md-art-body .agenda thead th { font-size: 11px; letter-spacing: .04em; }
	.md-art-body .agenda tbody th { white-space: normal; width: auto; }
	.md-hide-sm { display: none; }
	.md-fig { padding: 18px 16px 14px; }
	.md-fig-head { flex-direction: column; gap: 8px; }
	.md-frow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
.md-repbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.md-repbar label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--muted); }
.md-repcount { margin-top: 20px; color: var(--muted); }
.md-repcount strong { color: var(--ink); font-weight: 900; }
@media (max-width: 640px) {
	.md-repbar { padding: 16px; }
}
.md-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); }
.md-feature-media { position: relative; min-height: 440px; background: var(--surface); }
.md-feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 30%; }
.md-feature-media .tag { position: absolute; inset-inline-start: 18px; top: 18px; background: #fff; color: var(--navy); }
.md-feature-body { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 44px 48px; }
.md-feature .q-ic { width: 40px; height: 40px; color: var(--orange); }
.md-feature blockquote { margin: 0; font-size: clamp(1.15rem, 1.02rem + .6vw, 1.5rem); line-height: 1.5; font-weight: 700; color: var(--ink); letter-spacing: -.005em; }
.md-ptags { display: flex; flex-wrap: wrap; gap: 8px; }
.md-ptag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--orange-50); color: var(--orange-ink); font-size: 12.5px; font-weight: 800; line-height: 1.35; }
.md-ptag .ic { width: 14px; height: 14px; }
.md-who { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.md-who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 28%; flex: none; background: var(--surface); }
.md-who strong { display: block; color: var(--ink); font-weight: 800; line-height: 1.3; }
.md-who a, .md-who .prog { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
.md-feature-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.md-mini-feat { display: grid; grid-template-columns: 190px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.md-mini-feat > img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; object-position: 50% 26%; }
.md-mini-feat .b { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.md-mini-feat blockquote { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.md-mini-feat .md-who { margin-top: auto; padding-top: 14px; }
.md-st-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.md-st-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.md-st-row .lbl { min-width: 84px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* The search across the top of the bar, the programs under it. */
.md-st-search { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); background: var(--surface); }
.md-st-search:hover { border-color: var(--navy); }
.md-st-search:focus-within { border-color: var(--navy); outline: 3px solid var(--orange); outline-offset: 1px; }
.md-st-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 15px; color: var(--ink); }
.md-st-search input:focus { outline: none; }
.md-st-count { margin-top: 20px; color: var(--muted); }
.md-st-count strong { color: var(--ink); font-weight: 900; }
.md-st-grid { columns: 3; column-gap: 20px; margin-top: 18px; }
.md-story { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; padding: 22px; break-inside: avoid; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.md-story blockquote { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.md-story blockquote.is-clamped p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.md-story .md-who { padding-top: 14px; }
.md-story .md-who img { width: 46px; height: 46px; }
.md-more { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: -4px; padding: 2px 0; border: 0; background: none; color: var(--blue); font-weight: 800; font-size: 14px; }
.md-more .ic { width: 16px; height: 16px; transition: transform .2s; }
.md-more[aria-expanded="true"] .ic { transform: rotate(180deg); }
.md-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.md-st-more { display: flex; justify-content: center; margin-top: 12px; }
.md-cta { background: var(--navy); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.md-cta::after { content: ""; position: absolute; inset-inline-end: 2%; top: -40px; width: 300px; height: 460px; z-index: -1; background: url(assets/img/beacon.png) no-repeat center / contain; opacity: .08; }
.md-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; padding-block: 64px; }
.md-cta h2 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -.02em; }
.md-cta p { color: rgba(255, 255, 255, .8); margin-top: 8px; max-width: 560px; font-size: 17px; }
.md-cta .actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 1000px) {
	.md-st-grid { columns: 2; }
	.md-feature { grid-template-columns: minmax(0, 1fr); }
	.md-feature-media { min-height: 0; aspect-ratio: 16 / 9; }
	.md-feature-body { padding: 32px; }
	.md-feature-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.md-st-grid { columns: 1; }
	.md-feature-body { padding: 24px 20px; }
	.md-mini-feat { grid-template-columns: minmax(0, 1fr); }
	.md-mini-feat > img { min-height: 0; aspect-ratio: 16 / 9; height: auto; }
	.md-st-row .lbl { flex-basis: 100%; }
	.md-st-bar { padding: 16px 20px; }
	.md-cta .actions .btn { flex: 1 1 100%; }
}
.md-draft { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0; }

/* ---------- Ported (phase 4): styles.css (news cards, quote by-line, timeline dot) ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.news-card { display: flex; flex-direction: column; gap: 14px; color: inherit; }
.news-card:hover { text-decoration: none; }
.news-media { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.news-card:hover .news-media img { transform: scale(1.04); }
.news-meta { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--muted); font-weight: 700; }
.news-meta .kind { color: var(--blue); text-transform: uppercase; letter-spacing: .07em; font-size: 12.5px; font-weight: 800; }
.news-card h3 { font-size: 19px; line-height: 1.35; }
.news-card:hover h3 { color: var(--blue); }
@media (max-width: 900px) {
	.news-grid { grid-template-columns: 1fr; }
	.news-card { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; }
	.news-card .news-text { display: flex; flex-direction: column; gap: 8px; }
}
@media (max-width: 520px) {
	.news-card { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
	.news-card h3 { font-size: 16px; }
	.news-media { aspect-ratio: 1; }
}
.tl-dot { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 20px; color: var(--navy); background: #fff; border: 3px solid var(--c); box-shadow: 0 0 0 5px #fff; }
.table-wrap { overflow-x: auto; }
.quote-by { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.quote-by strong { display: block; color: #fff; font-weight: 800; }
.quote-by span { color: rgba(255, 255, 255, .75); font-size: 14.5px; }
@media (max-width: 640px) {
	.tl-dot { width: 40px; height: 40px; font-size: 16px; border-width: 2px; }
}
/* ---------- End of phase 4 ported rules ---------- */

/* ---------- Phase 4 glue: admissions, events, stories, news ---------- */
/* Admissions: stage panels (programs.js turns the headings into tabs). */
.sp-tabs .sp-panel + .sp-panel { margin-block-start: 28px; }
.sp-tabs .sp-seg + .sp-panel { margin-block-start: 0; }
.sp-panel-title { align-items: center; display: flex; font-size: 19px; gap: 10px; margin-block-end: 8px; }
.sp-elig-wrap { margin-block-start: 22px; }
.sp-elig-wrap .wp-block-table { margin: 0; overflow-x: auto; }
.sp-elig-wrap table { border-collapse: collapse; font-size: 15px; inline-size: 100%; }
.sp-elig-wrap th, .sp-elig-wrap td { border: 0; border-block-end: 1px solid var(--line); padding: 14px 16px; text-align: start; vertical-align: top; }
.sp-elig-wrap thead th { background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sp-elig-wrap td:first-child { color: var(--ink); font-weight: 800; }
.sp-elig-wrap td:last-child { color: var(--text); line-height: 1.7; }
:lang(ar) .sp-elig-wrap thead th { letter-spacing: 0; }
.p-section .sub-h { font-size: 19px; margin-block: 36px 0; }
.faq .faq-topic { color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .08em; margin-block: 28px 4px; text-transform: uppercase; }
.faq .faq-topic:first-child { margin-block-start: 8px; }
:lang(ar) .faq .faq-topic { letter-spacing: 0; }
.faq .faq-topic + .wp-block-details { border-block-start: 1px solid var(--line); }
.sp-faq-tools .sp-search { max-inline-size: 520px; }
.sp-faq-tools .sp-empty h3 { margin-block-end: 6px; }
.admissions-body .p-layout { padding-block: 40px 96px; }
.sp-fee .sp-fee-v small { color: var(--muted); font-size: 14px; font-weight: 700; }
.sp-fee .wp-block-list { list-style: none; padding: 0; }

/* Events: list, filters and the side column. */
.events-body .sp-events { padding-block: 40px 88px; }
.sp-toolbar-row .btn { margin-inline-start: auto; }
.sp-key-dates .sp-dates { list-style: none; margin: 0; padding: 0; }
.sp-ev h3 a { color: var(--ink); }
.sp-ev h3 a:hover { color: var(--blue); }
.sp-ev .btn .ic { block-size: 16px; inline-size: 16px; }
.sp-ev-actions .btn span { white-space: nowrap; }
.sp-ev-empty { text-align: center; }
.fe-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-block: 14px 18px; }
.fe-fact { color: rgba(255, 255, 255, .86); font-size: 14px; margin: 0; }
.fe-fact strong { color: #fff; display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.feature-event .fe-media .wp-block-image { block-size: 100%; margin: 0; }
.sp-events-aside .sp-card { margin-block-start: 22px; }
.news-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.news-card .ab-card-media { aspect-ratio: 16 / 9; overflow: hidden; }
.news-card .ab-card-media .wp-block-image, .news-card .ab-card-media img { block-size: 100%; inline-size: 100%; margin: 0; object-fit: cover; }
.news-card .ab-card-body { padding: 18px 20px 22px; }
.news-card .ab-card-k { color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.news-card h3 { font-size: 17px; line-height: 1.35; margin-block-start: 6px; }
.news-card h3 a { color: var(--ink); }
.news-card h3 a::after { content: ""; inset: 0; position: absolute; }

/* Learner stories: counts under the page head. */
.stories-stats { background: var(--navy); color: #fff; padding-block: 0 44px; }
.stories-stats .md-head-stats { margin: 0; }
.md-stories .md-st-more { display: flex; justify-content: center; margin-block-start: 26px; }
.md-stories .md-st-more[hidden] { display: none; }
.md-story[hidden] { display: none; }
.md-who img { block-size: 44px; border-radius: 50%; inline-size: 44px; object-fit: cover; }

/* News: listing and article. */
.news-page { padding-block: 40px 96px; }
.md-news-media.is-doc { background: var(--navy); display: grid; place-items: center; }
.md-news-media .md-news-logo { block-size: auto; inline-size: 46%; object-fit: contain; }
.ka-article .md-art-hero .wp-block-post-featured-image { margin: 0; }
.ka-article .md-art-hero img { border-radius: var(--radius-lg); }
.md-art-layout .md-art-body { max-inline-size: none; }
.md-art-body.p-content > h2 { border: 0; margin-block-start: 40px; padding-block-start: 0; }

/* ---------- KMC video solutions (ka/video-solutions) ---------- */
.vsol { display: grid; gap: 44px; }
.vsol-bar { display: grid; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.vsol-paper[hidden] { display: none; }
.vsol-paper > h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin-bottom: 18px; scroll-margin-top: 110px; }
.vsol .md-screen iframe { display: block; inline-size: 100%; block-size: 100%; border: 0; }
.vsol-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; inline-size: 100%; border: 0; background: radial-gradient(circle at 30% 20%, var(--navy-700), var(--navy-900) 70%); color: #fff; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; }
.vsol-start .ic { inline-size: 64px; block-size: 64px; padding: 18px; border-radius: 50%; background: var(--orange); color: #fff; transition: transform .2s; }
.vsol-start:hover .ic, .vsol-start:focus-visible .ic { transform: scale(1.08); }
.vsol-yt { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.vsol-yt svg { inline-size: 16px; block-size: 16px; }
.vsol-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vsol-q { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font-weight: 700; font-size: 15px; transition: border-color .2s; }
.vsol-q:hover { border-color: var(--navy); text-decoration: none; }
.vsol-q[aria-current="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.vsol-n { display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--surface); color: var(--navy); font-size: 13px; font-weight: 900; }
.vsol-q[aria-current="true"] .vsol-n { background: var(--navy); color: #fff; }
.vsol-len { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.vsol .md-films-aside .vsol-list { flex: 1 1 auto; min-block-size: 0; align-content: start; overflow-y: auto; padding-inline-end: 8px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.vsol-paper-link, .vsol-note { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--muted); font-size: 15px; }
.vsol-paper-link svg, .vsol-note svg { flex: none; inline-size: 18px; block-size: 18px; color: var(--navy); }
.vsol-paper-link a { font-weight: 700; }
@media (max-width: 960px) {
	.vsol .md-films-aside { contain: none; }
	.vsol .md-films-aside .vsol-list { max-block-size: 340px; }
}