:root {
  --font-heading: "Montserrat", Arial, sans-serif;
  --font-body: "Nunito Sans", Arial, sans-serif;
  --font-script: "Kaushan Script", cursive;
  --navy: #11185f;
  --navy-deep: #080d3f;
  --navy-mid: #252b85;
  --blue: #2455a6;
  --yellow: #f2c14e;
  --yellow-soft: #fff3cf;
  --green: #2f7e48;
  --lime: #c9aa3d;
  --red: #d74b32;
  --cream: #fbf7ed;
  --paper: #ffffff;
  --ink: #17172f;
  --muted: #626277;
  --line: #e5e3dc;
  --shadow: 0 18px 45px rgba(17, 20, 95, 0.14);
  --shadow-strong: 0 24px 64px rgba(6, 8, 50, 0.25);
  --radius: 22px 22px 5px 22px;
  --container: 1220px;
}

/* Full-width hero banner supplied by the school. */
.hero.hero--banner {
  min-height: 0;
  display: block;
  padding: 0;
  background: #fffaf0;
  animation: none;
}

.hero.hero--banner::after {
  display: none;
}

.hero-banner__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hero-banner__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

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

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

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.75;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  overflow-wrap: break-word;
}

.container {
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 999;
  padding: 12px 18px;
  border-radius: 0 0 8px 8px;
  color: white;
  background: var(--navy-deep);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

.utility-bar {
  color: white;
  background: var(--navy-deep);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.utility-bar__inner,
.utility-bar__contacts {
  display: flex;
  align-items: center;
}

.utility-bar__inner {
  min-height: 39px;
  justify-content: space-between;
  gap: 20px;
}

.utility-bar__contacts {
  gap: 26px;
}

.utility-bar a {
  transition: color 0.2s ease;
}

.utility-bar a:hover {
  color: var(--yellow);
}

.utility-bar__contacts span[aria-hidden="true"] {
  margin-right: 5px;
  color: var(--yellow);
}

.admission-chip {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding-inline: 22px;
  color: var(--navy-deep);
  background: var(--yellow);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.utility-bar .admission-chip:hover {
  color: var(--navy-deep);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(17, 20, 95, 0.08);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 30px rgba(17, 20, 95, 0.08);
}

.site-header__inner {
  min-height: 91px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand img {
  width: 78px;
  height: 78px;
  flex: 0 0 auto;
  object-fit: contain;
}

.brand__copy {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand__copy strong {
  color: var(--navy);
  font-family: "Teko", sans-serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.brand__copy > span {
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.brand__copy small {
  margin-top: 5px;
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  color: #24243f;
  font-size: 12px;
  font-weight: 700;
}

.desktop-nav > a {
  position: relative;
  padding-block: 34px;
}

.desktop-nav > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 24px;
  left: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--red);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.desktop-nav > a:hover::after,
.desktop-nav > a.active::after {
  transform: scaleX(1);
}

.desktop-nav .nav-cta {
  padding: 12px 20px;
  border: 2px solid var(--navy);
  border-radius: 14px 14px 2px 14px;
  color: white;
  background: var(--navy);
  box-shadow: 5px 5px 0 var(--yellow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.desktop-nav .nav-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--yellow);
}

.mobile-menu {
  display: none;
  position: relative;
}

.mobile-menu summary {
  width: 46px;
  height: 42px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 10px;
  border-radius: 12px;
  color: white;
  background: var(--navy);
  cursor: pointer;
  list-style: none;
}

.mobile-menu summary::-webkit-details-marker {
  display: none;
}

.mobile-menu summary span {
  height: 2px;
  border-radius: 2px;
  background: white;
}

.mobile-menu nav {
  position: absolute;
  top: calc(100% + 19px);
  right: 0;
  width: 260px;
  display: grid;
  padding: 12px;
  border: 1px solid #ececf5;
  border-radius: 16px 16px 4px 16px;
  background: white;
  box-shadow: var(--shadow-strong);
}

.mobile-menu:not([open]) > nav {
  display: none;
}

.mobile-menu nav a {
  padding: 11px 12px;
  border-bottom: 1px solid #efeff6;
  font-size: 13px;
  font-weight: 700;
}

.mobile-menu nav a:last-child {
  border-bottom: 0;
  color: white;
  background: var(--navy);
}

.hero {
  position: relative;
  min-height: 690px;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: white;
  background:
    linear-gradient(112deg, var(--navy-deep) 0%, var(--navy) 54%, #2431a1 100%);
}

.hero::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: -330px;
  width: 660px;
  height: 660px;
  border: 90px solid rgba(255, 225, 62, 0.08);
  border-radius: 50%;
}

.hero__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.32;
  background-image:
    linear-gradient(30deg, transparent 48%, rgba(255, 255, 255, 0.08) 49%, rgba(255, 255, 255, 0.08) 51%, transparent 52%),
    linear-gradient(-30deg, transparent 48%, rgba(255, 255, 255, 0.05) 49%, rgba(255, 255, 255, 0.05) 51%, transparent 52%);
  background-size: 60px 60px;
  mask-image: linear-gradient(to right, black, transparent 62%);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(500px, 1.12fr);
  gap: 58px;
  align-items: center;
  padding-block: 70px 78px;
}

.hero__content {
  position: relative;
  z-index: 3;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 9px 9px 2px 9px;
  color: var(--yellow);
  background: rgba(255, 255, 255, 0.08);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero__eyebrow::before {
  content: "";
  width: 24px;
  height: 3px;
  background: var(--red);
}

.hero h1 {
  max-width: 700px;
  margin-bottom: 20px;
  font-family: "Teko", sans-serif;
  font-size: clamp(64px, 7vw, 94px);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.hero h1 em {
  color: var(--yellow);
  font-style: normal;
}

.hero h1 span {
  -webkit-text-stroke: 0;
  color: white;
}

.hero__content > p {
  max-width: 590px;
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.75;
}

.hero__actions,
.admissions__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: 14px 14px 3px 14px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.button:hover {
  transform: translateY(-3px);
}

.button--yellow {
  color: var(--navy-deep);
  background: var(--yellow);
  box-shadow: 6px 6px 0 rgba(229, 54, 32, 0.9);
}

.button--outline {
  border-color: rgba(255, 255, 255, 0.48);
  color: white;
  background: rgba(255, 255, 255, 0.05);
}

.button--outline:hover {
  border-color: white;
  background: rgba(255, 255, 255, 0.12);
}

.button--navy {
  color: white;
  background: var(--navy-deep);
}

.button--white {
  color: var(--navy);
  background: white;
}

.hero__facts {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.hero__facts > div {
  padding-right: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.hero__facts > div + div {
  padding-left: 20px;
}

.hero__facts > div:last-child {
  border-right: 0;
}

.hero__facts strong,
.hero__facts span {
  display: block;
}

.hero__facts strong {
  color: var(--yellow);
  font-family: "Teko", sans-serif;
  font-size: 30px;
  line-height: 1;
}

.hero__facts span {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hero__visual {
  position: relative;
  min-height: 500px;
}

.hero__photo-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 8px solid white;
  border-radius: 42px 42px 8px 42px;
  background: white;
  box-shadow: var(--shadow-strong);
  transform: rotate(1.2deg);
}

.hero__photo-frame::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 7, 48, 0.7), transparent 52%);
}

.hero__photo-frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(225deg, var(--yellow) 0 50%, transparent 51%);
}

.hero__photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 53% center;
}

.hero__photo-label {
  position: absolute;
  z-index: 3;
  right: 28px;
  bottom: 25px;
  left: 28px;
  padding-left: 16px;
  border-left: 4px solid var(--yellow);
}

.hero__photo-label strong,
.hero__photo-label span {
  display: block;
}

.hero__photo-label strong {
  font-family: "Teko", sans-serif;
  font-size: 27px;
  line-height: 1;
  text-transform: uppercase;
}

.hero__photo-label span {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.hero__seal {
  position: absolute;
  z-index: 4;
  top: -28px;
  right: -22px;
  width: 114px;
  height: 114px;
  display: grid;
  place-content: center;
  border: 6px solid white;
  border-radius: 50%;
  color: var(--navy);
  background: var(--yellow);
  box-shadow: 0 12px 26px rgba(5, 7, 48, 0.25);
  text-align: center;
  transform: rotate(8deg);
}

.hero__seal::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed var(--navy);
  border-radius: inherit;
}

.hero__seal span,
.hero__seal small {
  position: relative;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero__seal strong {
  position: relative;
  font-family: "Teko", sans-serif;
  font-size: 34px;
  line-height: 0.9;
}

.hero__motto {
  position: absolute;
  z-index: 5;
  bottom: -28px;
  left: -38px;
  max-width: 300px;
  padding: 15px 24px 12px 45px;
  border-radius: 15px 15px 3px 15px;
  color: var(--navy-deep);
  background: white;
  box-shadow: var(--shadow);
  font-family: "Yellowtail", cursive;
  font-size: 22px;
  transform: rotate(-2deg);
}

.hero__motto span {
  position: absolute;
  top: -2px;
  left: 12px;
  color: var(--red);
  font-family: Georgia, serif;
  font-size: 58px;
  line-height: 1;
}

.trust-rail {
  position: relative;
  z-index: 3;
  color: var(--navy);
  background: var(--yellow);
  box-shadow: 0 8px 35px rgba(17, 20, 95, 0.12);
}

.trust-rail__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.trust-rail article {
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 24px;
  border-right: 1px solid rgba(17, 20, 95, 0.17);
}

.trust-rail article:last-child {
  border-right: 0;
}

.trust-rail__icon {
  width: 41px;
  height: 41px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px 12px 2px 12px;
  color: var(--yellow);
  background: var(--navy);
  font-size: 16px;
  box-shadow: 4px 4px 0 rgba(229, 54, 32, 0.9);
}

.trust-rail strong,
.trust-rail article div span {
  display: block;
}

.trust-rail strong {
  font-size: 12px;
}

.trust-rail article div span {
  margin-top: 2px;
  color: rgba(17, 20, 95, 0.72);
  font-size: 10px;
}

.section {
  padding-block: 100px;
}

.section-heading {
  max-width: 760px;
  margin: 0 auto 50px;
  text-align: center;
}

.section-heading--left {
  margin-inline: 0;
  text-align: left;
}

.section-heading .eyebrow,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.section-heading .eyebrow::before,
.section-heading .eyebrow::after {
  content: "";
  width: 30px;
  height: 2px;
  background: currentColor;
}

.section-heading--left .eyebrow::before {
  display: none;
}

.section-heading h2 {
  margin-bottom: 12px;
  color: var(--navy);
  font-family: "Teko", sans-serif;
  font-size: clamp(44px, 5.2vw, 65px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.section-heading h2 em {
  color: var(--green);
  font-style: normal;
}

.section-heading > p {
  max-width: 680px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 14px;
}

.section-heading--left > p {
  margin-left: 0;
}

.section-heading--light .eyebrow {
  color: var(--yellow);
}

.section-heading--light h2 {
  color: white;
}

.section-heading--light h2 em {
  color: var(--yellow);
}

.about {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(17, 20, 95, 0.025) 1px, transparent 1px),
    linear-gradient(rgba(17, 20, 95, 0.025) 1px, transparent 1px),
    var(--cream);
  background-size: 34px 34px;
}

.about::after {
  content: "C";
  position: absolute;
  right: -20px;
  bottom: -170px;
  color: rgba(17, 20, 95, 0.035);
  font-family: "Teko", sans-serif;
  font-size: 550px;
  font-weight: 700;
  line-height: 1;
}

.about__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 84px;
  align-items: center;
}

.about__collage {
  position: relative;
  min-height: 570px;
}

.about__main-image,
.about__small-image {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 8px solid white;
  background: #ddd;
  box-shadow: var(--shadow);
}

.about__main-image {
  inset: 0 70px 70px 0;
  border-radius: 30px 30px 5px 30px;
}

.about__small-image {
  right: 0;
  bottom: 0;
  width: 46%;
  height: 245px;
  border-radius: 20px 20px 4px 20px;
}

.about__main-image::after,
.about__small-image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 55px;
  height: 55px;
  background: linear-gradient(225deg, var(--yellow) 0 50%, transparent 51%);
}

.about__main-image img,
.about__small-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__small-image img {
  object-position: center 60%;
}

.about__experience {
  position: absolute;
  bottom: 12px;
  left: -20px;
  min-width: 195px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border: 5px solid white;
  border-radius: 16px 16px 3px 16px;
  color: white;
  background: var(--green);
  box-shadow: var(--shadow);
}

.about__experience strong {
  color: var(--yellow);
  font-family: "Teko", sans-serif;
  font-size: 48px;
  line-height: 0.9;
}

.about__experience span {
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.about__content .section-heading {
  margin-bottom: 24px;
}

.about__content .lead {
  color: #282843;
  font-size: 16px;
  font-weight: 600;
}

.about__content > p:not(.lead) {
  color: var(--muted);
  font-size: 13px;
}

.about__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 27px 0;
}

.about__features > div {
  display: flex;
  gap: 12px;
  padding: 13px;
  border: 1px solid #e3e0d5;
  border-radius: 12px 12px 3px 12px;
  background: rgba(255, 255, 255, 0.68);
}

.about__features > div > span {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px 9px 2px 9px;
  color: var(--yellow);
  background: var(--navy);
  font-size: 9px;
  font-weight: 800;
}

.about__features p,
.about__features strong {
  display: block;
}

.about__features p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.about__features strong {
  margin-bottom: 2px;
  color: var(--navy);
  font-size: 11px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--red);
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.purpose-band {
  position: relative;
  overflow: hidden;
  padding-block: 100px;
  color: white;
  background: var(--navy);
}

.purpose-band::before,
.purpose-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.purpose-band::before {
  top: -240px;
  left: -200px;
  width: 520px;
  height: 520px;
  border: 75px solid rgba(255, 225, 62, 0.06);
}

.purpose-band::after {
  right: -100px;
  bottom: -100px;
  width: 260px;
  height: 260px;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.05) 0 10deg, transparent 10deg 20deg);
}

.purpose-band .container {
  position: relative;
  z-index: 2;
}

.purpose-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr;
  gap: 22px;
}

.purpose-card {
  position: relative;
  min-height: 305px;
  overflow: hidden;
  padding: 33px;
  border-radius: 24px 24px 5px 24px;
  color: var(--ink);
  background: white;
  box-shadow: 8px 8px 0 rgba(255, 225, 62, 0.18);
}

.purpose-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 66px;
  height: 66px;
  background: linear-gradient(225deg, var(--yellow) 0 50%, transparent 51%);
}

.purpose-card--mission {
  background: var(--yellow);
  transform: translateY(22px);
}

.purpose-card--mission::after {
  background: linear-gradient(225deg, var(--red) 0 50%, transparent 51%);
}

.purpose-card--values {
  color: white;
  background: var(--green);
}

.purpose-card__number {
  position: absolute;
  top: 5px;
  right: 15px;
  color: rgba(17, 20, 95, 0.1);
  font-family: "Teko", sans-serif;
  font-size: 94px;
  font-weight: 700;
  line-height: 1;
}

.purpose-card--values .purpose-card__number {
  color: rgba(255, 255, 255, 0.11);
}

.purpose-card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 23px;
  border-radius: 13px 13px 3px 13px;
  color: var(--yellow);
  background: var(--navy);
  font-size: 23px;
}

.purpose-card--mission .purpose-card__icon {
  color: white;
  background: var(--red);
}

.purpose-card--values .purpose-card__icon {
  color: var(--navy);
  background: var(--yellow);
}

.purpose-card h3 {
  margin-bottom: 10px;
  color: inherit;
  font-family: "Teko", sans-serif;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
}

.purpose-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
}

.purpose-card--mission p {
  color: rgba(23, 23, 47, 0.78);
}

.value-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.value-chips span {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px 8px 2px 8px;
  background: rgba(255, 255, 255, 0.09);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.academics {
  background:
    radial-gradient(circle at 8% 15%, rgba(184, 219, 40, 0.13), transparent 19%),
    radial-gradient(circle at 92% 82%, rgba(229, 54, 32, 0.07), transparent 20%),
    white;
}

.academic-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.academic-card {
  position: relative;
  min-height: 315px;
  padding: 22px 20px 20px;
  overflow: hidden;
  border: 1px solid #e9e8ef;
  border-radius: 20px 20px 4px 20px;
  background: white;
  box-shadow: 0 12px 28px rgba(17, 20, 95, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.academic-card::after {
  content: "";
  position: absolute;
  right: -32px;
  bottom: -32px;
  width: 90px;
  height: 90px;
  border: 18px solid var(--card-color);
  border-radius: 50%;
  opacity: 0.08;
}

.academic-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}

.academic-card--yellow { --card-color: #e0b900; }
.academic-card--blue { --card-color: var(--blue); }
.academic-card--green { --card-color: var(--green); }
.academic-card--red { --card-color: var(--red); }
.academic-card--navy { --card-color: var(--navy); }

.academic-card__class {
  position: absolute;
  top: 20px;
  right: 16px;
  padding: 5px 8px;
  border-radius: 7px 7px 2px 7px;
  color: white;
  background: var(--card-color);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.academic-card__icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin: 22px 0 28px;
  border: 2px dashed var(--card-color);
  border-radius: 50%;
  color: var(--card-color);
  font-family: "Teko", sans-serif;
  font-size: 25px;
  font-weight: 700;
}

.academic-card h3 {
  margin-bottom: 8px;
  color: var(--navy);
  font-family: "Teko", sans-serif;
  font-size: 28px;
  line-height: 1;
  text-transform: uppercase;
}

.academic-card p {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.academic-card__tag {
  display: inline-block;
  margin-top: 5px;
  padding: 5px 8px;
  border-radius: 6px 6px 2px 6px;
  color: var(--card-color);
  background: color-mix(in srgb, var(--card-color) 11%, white);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.streams-panel {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 0.34fr 0.66fr;
  overflow: hidden;
  border-radius: 24px 24px 5px 24px;
  color: white;
  background: var(--navy);
  box-shadow: var(--shadow);
}

.streams-panel__intro {
  position: relative;
  padding: 40px;
  overflow: hidden;
  background: var(--green);
}

.streams-panel__intro::after {
  content: "+2";
  position: absolute;
  right: -5px;
  bottom: -40px;
  color: rgba(255, 255, 255, 0.12);
  font-family: "Teko", sans-serif;
  font-size: 170px;
  font-weight: 700;
  line-height: 1;
}

.streams-panel__intro > span {
  position: relative;
  z-index: 1;
  padding: 6px 9px;
  border-radius: 7px 7px 2px 7px;
  color: var(--navy);
  background: var(--yellow);
  font-size: 9px;
  font-weight: 800;
}

.streams-panel__intro h3 {
  position: relative;
  z-index: 1;
  max-width: 280px;
  margin: 22px 0 10px;
  font-family: "Teko", sans-serif;
  font-size: 38px;
  line-height: 0.95;
  text-transform: uppercase;
}

.streams-panel__intro p {
  position: relative;
  z-index: 1;
  max-width: 280px;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
}

.streams-panel__groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.streams-panel__groups article {
  min-height: 140px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 25px;
  background: var(--navy);
}

.streams-panel__groups article > strong {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 2px solid var(--yellow);
  border-radius: 12px 12px 3px 12px;
  color: var(--yellow);
  font-family: "Teko", sans-serif;
  font-size: 24px;
}

.streams-panel__groups h4 {
  margin: 0 0 4px;
  color: white;
  font-size: 12px;
}

.streams-panel__groups p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 9px;
  line-height: 1.5;
}

.why-crescent {
  position: relative;
  overflow: hidden;
  color: white;
  background: var(--navy-deep);
}

.why-crescent::before {
  content: "";
  position: absolute;
  inset: 0 50% 0 0;
  opacity: 0.45;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 19px 19px;
  mask-image: linear-gradient(to right, black, transparent);
}

.why-crescent__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.55fr 0.45fr;
  min-height: 620px;
}

.why-crescent__content {
  min-width: 0;
  padding: 62px 60px 62px 0;
}

.why-crescent__content .section-heading {
  margin-bottom: 24px;
}

.why-list {
  display: grid;
  gap: 4px;
}

.why-list article {
  display: flex;
  gap: 15px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease, transform 0.2s ease;
}

.why-list article > div {
  min-width: 0;
}

.why-list article:hover {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  transform: translateX(5px);
}

.why-list article > span {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px dashed var(--yellow);
  border-radius: 50%;
  color: var(--yellow);
  font-family: "Teko", sans-serif;
  font-size: 20px;
}

.why-list h3 {
  margin-bottom: 3px;
  color: white;
  font-size: 13px;
}

.why-list p {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 10px;
}

.why-crescent__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 45%;
  max-width: 720px;
  overflow: hidden;
  border-radius: 60px 0 0 8px;
}

.why-crescent__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 10, 59, 0.8), transparent 45%);
}

.why-crescent__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-crescent__caption {
  position: absolute;
  z-index: 2;
  right: 40px;
  bottom: 38px;
  left: 40px;
  padding: 18px 20px;
  border-left: 5px solid var(--yellow);
  color: white;
}

.why-crescent__caption strong,
.why-crescent__caption span {
  display: block;
}

.why-crescent__caption strong {
  font-family: "Teko", sans-serif;
  font-size: 31px;
  line-height: 1;
  text-transform: uppercase;
}

.why-crescent__caption span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.facilities {
  background: var(--cream);
}

.facility-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 235px;
  gap: 14px;
}

.facility-tile {
  position: relative;
  grid-column: span 2;
  overflow: hidden;
  border: 6px solid white;
  border-radius: 22px 22px 5px 22px;
  background: var(--navy);
  box-shadow: 0 10px 26px rgba(17, 20, 95, 0.11);
}

.facility-tile--wide {
  grid-column: span 3;
}

.facility-tile::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 8, 48, 0.9), transparent 67%);
}

.facility-tile::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background: linear-gradient(225deg, var(--yellow) 0 50%, transparent 51%);
}

.facility-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.facility-tile:hover img {
  transform: scale(1.055);
}

.facility-tile > div {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 15px;
  left: 18px;
  color: white;
}

.facility-tile > div > span {
  color: var(--yellow);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.facility-tile h3 {
  margin: 2px 0 0;
  font-family: "Teko", sans-serif;
  font-size: 27px;
  line-height: 1;
  text-transform: uppercase;
}

.facility-tile p {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 9px;
}

.facility-strip {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.facility-strip span {
  padding: 8px 12px;
  border: 1px solid rgba(17, 20, 95, 0.12);
  border-radius: 8px 8px 2px 8px;
  color: var(--navy);
  background: white;
  font-size: 9px;
  font-weight: 700;
}

.facility-strip span::before {
  content: "✓";
  margin-right: 6px;
  color: var(--green);
  font-weight: 900;
}

.achievement-band {
  position: relative;
  overflow: hidden;
  padding-block: 58px;
  color: white;
  background:
    linear-gradient(rgba(17, 20, 95, 0.92), rgba(17, 20, 95, 0.92)),
    url("../images/classroom-6.webp") center 45% / cover;
}

.achievement-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 54px, rgba(255, 255, 255, 0.035) 54px 56px);
}

.achievement-band__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.achievement-band__grid > div {
  padding: 8px 20px;
  border-right: 1px dashed rgba(255, 225, 62, 0.45);
  text-align: center;
}

.achievement-band__grid > div:last-child {
  border-right: 0;
}

.achievement-band strong,
.achievement-band span {
  display: block;
}

.achievement-band strong {
  color: var(--yellow);
  font-family: "Teko", sans-serif;
  font-size: 50px;
  line-height: 1;
}

.achievement-band span {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.student-life {
  background: white;
}

.life-heading {
  max-width: none;
  display: grid;
  grid-template-columns: 0.66fr 0.34fr;
  gap: 60px;
  align-items: end;
}

.life-heading h2 {
  margin-bottom: 0;
}

.life-heading > p {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
}

.life-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 245px 245px;
  gap: 14px;
}

.life-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px 22px 5px 22px;
  background: var(--navy);
}

.life-card--large {
  grid-row: span 2;
  grid-column: span 2;
}

.life-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 7, 45, 0.88), transparent 68%);
}

.life-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.life-card:hover img {
  transform: scale(1.06);
}

.life-card > div {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 18px;
  left: 20px;
}

.life-card span {
  color: var(--yellow);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.life-card h3 {
  margin: 3px 0 0;
  color: white;
  font-family: "Teko", sans-serif;
  font-size: 25px;
  line-height: 1;
  text-transform: uppercase;
}

.life-card--large h3 {
  max-width: 430px;
  font-size: 39px;
}

.activity-ribbon {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  overflow: hidden;
  border-radius: 15px 15px 3px 15px;
  background: var(--yellow);
  box-shadow: var(--shadow);
}

.activity-ribbon span {
  padding: 14px 12px;
  border-right: 1px solid rgba(17, 20, 95, 0.18);
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.activity-ribbon span:last-child {
  border-right: 0;
}

.activity-ribbon span::before {
  content: "✦";
  margin-right: 6px;
  color: var(--red);
}

.admissions {
  position: relative;
  overflow: hidden;
  padding-block: 84px;
  color: var(--navy-deep);
  background: var(--yellow);
}

.admissions::before {
  content: "";
  position: absolute;
  top: -180px;
  left: -140px;
  width: 430px;
  height: 430px;
  border: 72px solid rgba(17, 20, 95, 0.06);
  border-radius: 50%;
}

.admissions__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background-image: radial-gradient(var(--navy) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  mask-image: linear-gradient(to left, black, transparent 55%);
}

.admissions__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.58fr 0.42fr;
  gap: 70px;
  align-items: center;
}

.admissions .eyebrow {
  color: var(--red);
}

.admissions h2 {
  max-width: 650px;
  margin-bottom: 15px;
  font-family: "Teko", sans-serif;
  font-size: clamp(52px, 6vw, 76px);
  line-height: 0.9;
  text-transform: uppercase;
}

.admissions__grid > div:first-child > p {
  max-width: 620px;
  color: rgba(8, 10, 59, 0.74);
  font-size: 13px;
}

.admissions__actions {
  margin-top: 25px;
}

.admission-steps {
  padding: 30px;
  border: 2px solid rgba(17, 20, 95, 0.13);
  border-radius: 23px 23px 5px 23px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 8px 8px 0 rgba(229, 54, 32, 0.9);
}

.admission-steps h3 {
  margin-bottom: 16px;
  color: var(--navy);
  font-family: "Teko", sans-serif;
  font-size: 28px;
  text-transform: uppercase;
}

.admission-steps ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admission-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admission-steps li > span {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px 9px 2px 9px;
  color: var(--yellow);
  background: var(--navy);
  font-family: "Teko", sans-serif;
  font-size: 20px;
}

.admission-steps strong,
.admission-steps small {
  display: block;
}

.admission-steps strong {
  color: var(--navy);
  font-size: 11px;
}

.admission-steps small {
  color: var(--muted);
  font-size: 9px;
}

.contact {
  position: relative;
  overflow: hidden;
  background: var(--cream);
}

.contact::before {
  content: "";
  position: absolute;
  top: 60px;
  right: -130px;
  width: 360px;
  height: 360px;
  border: 70px solid rgba(47, 138, 56, 0.06);
  border-radius: 50%;
}

.contact__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.48fr 0.52fr;
  gap: 24px;
}

.contact__details {
  display: grid;
  gap: 16px;
}

.contact-card,
.contact__emails {
  border: 1px solid #e7e3d6;
  border-radius: 22px 22px 5px 22px;
  background: white;
  box-shadow: 0 12px 30px rgba(17, 20, 95, 0.08);
}

.contact-card {
  display: flex;
  gap: 18px;
  padding: 27px;
}

.contact-card--address {
  min-height: 250px;
  color: white;
  background: var(--navy);
}

.contact-card__icon {
  width: 45px;
  height: 45px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px 12px 3px 12px;
  color: var(--navy);
  background: var(--yellow);
  font-size: 18px;
}

.contact-card small {
  display: block;
  margin-bottom: 7px;
  color: var(--red);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.contact-card--address small {
  color: var(--yellow);
}

.contact-card h3 {
  margin-bottom: 8px;
  color: var(--navy);
  font-family: "Teko", sans-serif;
  font-size: 27px;
  line-height: 1.05;
  text-transform: uppercase;
}

.contact-card--address h3 {
  color: white;
}

.contact-card p {
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 11px;
}

.contact-card--address p {
  color: rgba(255, 255, 255, 0.7);
}

.contact-card a {
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
}

.contact-card--address a {
  color: var(--yellow);
}

.contact__emails {
  padding: 28px;
}

.contact__emails > h3 {
  margin-bottom: 18px;
  color: var(--navy);
  font-family: "Teko", sans-serif;
  font-size: 31px;
  text-transform: uppercase;
}

.contact__emails > a {
  min-height: 80px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 13px;
  border-bottom: 1px solid #eceaf1;
  transition: background 0.2s ease, transform 0.2s ease;
}

.contact__emails > a:hover {
  border-radius: 10px;
  background: #f8f8fc;
  transform: translateX(4px);
}

.email-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 10px 10px 2px 10px;
  color: var(--yellow);
  background: var(--navy);
  font-family: "Teko", sans-serif;
  font-size: 18px;
}

.contact__emails a small,
.contact__emails a strong {
  display: block;
}

.contact__emails a small {
  color: var(--red);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact__emails a strong {
  color: var(--navy);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.contact__emails a b {
  color: var(--green);
  font-size: 18px;
}

.office-hours {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 19px;
  padding: 15px;
  border-radius: 12px 12px 3px 12px;
  color: var(--navy);
  background: var(--yellow-soft);
}

.office-hours > span {
  font-size: 24px;
}

.office-hours strong {
  font-size: 10px;
}

.office-hours p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.site-footer {
  color: white;
  background: var(--navy-deep);
}

.site-footer__top {
  position: relative;
  padding-block: 64px 20px;
  overflow: hidden;
}

.site-footer__top::after {
  content: "";
  position: absolute;
  right: -150px;
  bottom: -240px;
  width: 500px;
  height: 500px;
  border: 70px solid rgba(255, 225, 62, 0.035);
  border-radius: 50%;
}

.site-footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 0.9fr 1.1fr;
  gap: 48px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-brand img {
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  padding: 6px;
  border: 2px solid rgba(242, 193, 78, 0.72);
  border-radius: 50%;
  background: white;
  object-fit: contain;
}

.footer-brand span {
  display: flex;
  flex-direction: column;
}

.footer-brand strong {
  color: var(--yellow);
  font-family: "Teko", sans-serif;
  font-size: 32px;
  line-height: 1;
  text-transform: uppercase;
}

.footer-brand small {
  max-width: 170px;
  color: white;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.footer-about > p {
  max-width: 330px;
  margin: 14px 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 10px;
}

.footer-recognition {
  display: inline-block;
  align-self: flex-start;
  padding: 8px 10px;
  border: 1px solid rgba(255, 225, 62, 0.25);
  border-radius: 8px 8px 2px 8px;
  color: var(--yellow);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.site-footer h3 {
  position: relative;
  margin: 9px 0 20px;
  padding-bottom: 10px;
  color: white;
  font-family: "Teko", sans-serif;
  font-size: 23px;
  text-transform: uppercase;
}

.site-footer h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 3px;
  background: var(--yellow);
}

/* Columns stretch to the tallest one, so let each spread its own content
   over the full height instead of leaving a ragged gap underneath. */
.site-footer__grid > * {
  display: flex;
  flex-direction: column;
}

.site-footer nav {
  display: grid;
  flex: 1 1 auto;
  align-content: space-between;
  gap: 9px;
}

.footer-facts {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 6px 26px;
  margin-top: auto;
  padding-top: 10px;
}

.footer-facts dt {
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.footer-facts dd {
  margin: 4px 0 0;
  color: var(--yellow);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.site-footer nav a,
.footer-contact p,
.footer-contact > a {
  color: rgba(255, 255, 255, 0.58);
  font-size: 9px;
}

.site-footer nav a::before {
  content: "›";
  margin-right: 7px;
  color: var(--yellow);
}

.site-footer nav a:hover,
.footer-contact > a:hover {
  color: var(--yellow);
}

.footer-contact p {
  margin-bottom: 13px;
}

.footer-contact > a {
  display: block;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
}

.site-footer__bottom .container {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-footer__bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: 8px;
}

.floating-actions {
  position: fixed;
  z-index: 90;
  right: 18px;
  bottom: 82px;
  display: grid;
  gap: 9px;
}

.floating-actions a,
.back-to-top {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border: 3px solid white;
  border-radius: 50%;
  color: white;
  box-shadow: 0 8px 20px rgba(8, 10, 59, 0.25);
  transition: transform 0.2s ease;
}

.floating-actions a:hover,
.back-to-top:hover {
  transform: translateY(-3px);
}

.floating-actions__call {
  background: var(--green);
}

.floating-actions__mail {
  background: var(--red);
}

.back-to-top {
  position: fixed;
  z-index: 90;
  right: 18px;
  bottom: 22px;
  color: var(--navy);
  background: var(--yellow);
  font-weight: 900;
}

@media (max-width: 1120px) {
  .desktop-nav {
    gap: 15px;
  }

  .brand__copy > span {
    max-width: 215px;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(430px, 1.08fr);
    gap: 35px;
  }

  .hero h1 {
    font-size: 74px;
  }

  .about__grid {
    gap: 50px;
  }

  .academic-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .academic-card:nth-child(4),
  .academic-card:nth-child(5) {
    grid-column: span 1;
  }
}

@media (max-width: 960px) {
  .desktop-nav {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  .hero {
    min-height: auto;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 70px;
    padding-block: 70px 90px;
  }

  .hero__content {
    max-width: 700px;
  }

  .hero__visual {
    min-height: 580px;
  }

  .hero__motto {
    left: 25px;
  }

  .trust-rail__grid {
    grid-template-columns: 1fr 1fr;
  }

  .trust-rail article:nth-child(2) {
    border-right: 0;
  }

  .trust-rail article:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(17, 20, 95, 0.17);
  }

  .about__grid {
    grid-template-columns: 1fr;
  }

  .about__collage {
    max-width: 720px;
    width: 100%;
    margin-inline: auto;
  }

  .purpose-cards {
    grid-template-columns: 1fr 1fr;
  }

  .purpose-card--values {
    grid-column: 1 / -1;
    min-height: auto;
  }

  .streams-panel {
    grid-template-columns: 1fr;
  }

  .why-crescent__grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .why-crescent__content {
    padding: 60px 0;
  }

  .why-crescent__image {
    position: relative;
    width: 100vw;
    max-width: none;
    height: 480px;
    margin-left: calc((100vw - min(var(--container), calc(100vw - 40px))) / -2);
    border-radius: 0;
  }

  .facility-tile,
  .facility-tile--wide {
    grid-column: span 3;
  }

  .life-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 350px repeat(2, 260px);
  }

  .life-card--large {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .admissions__grid,
  .contact__grid {
    grid-template-columns: 1fr;
  }

  .admissions__grid {
    gap: 45px;
  }

  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .footer-contact {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  html {
    scroll-behavior: auto;
  }

  .container {
    width: min(100% - 28px, var(--container));
  }

  .utility-bar__inner {
    min-height: 44px;
  }

  .utility-bar__contacts {
    gap: 15px;
  }

  .utility-address,
  .utility-bar__contacts a[href^="mailto"] {
    display: none;
  }

  .admission-chip {
    padding-inline: 12px;
    font-size: 9px;
  }

  .site-header__inner {
    min-height: 75px;
  }

  .brand img {
    width: 58px;
    height: 58px;
  }

  .brand__copy strong {
    font-size: 25px;
  }

  .brand__copy > span {
    max-width: 180px;
    font-size: 8px;
  }

  .brand__copy small {
    font-size: 7px;
  }

  .hero__grid {
    gap: 55px;
    padding-block: 55px 75px;
  }

  .hero h1 {
    font-size: clamp(54px, 17vw, 73px);
  }

  .hero__content > p {
    font-size: 14px;
  }

  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero__facts {
    margin-top: 30px;
  }

  .hero__facts > div,
  .hero__facts > div + div {
    padding-inline: 10px;
  }

  .hero__facts > div:first-child {
    padding-left: 0;
  }

  .hero__facts strong {
    font-size: 25px;
  }

  .hero__visual {
    min-height: 470px;
  }

  .hero__photo-frame {
    border-width: 5px;
  }

  .hero__seal {
    top: -34px;
    right: -5px;
    width: 92px;
    height: 92px;
  }

  .hero__seal strong {
    font-size: 28px;
  }

  .hero__motto {
    right: 18px;
    bottom: -32px;
    left: 18px;
    max-width: none;
    font-size: 19px;
  }

  .trust-rail__grid {
    grid-template-columns: 1fr;
  }

  .trust-rail article {
    min-height: 89px;
    border-right: 0;
    border-bottom: 1px solid rgba(17, 20, 95, 0.17);
  }

  .trust-rail article:last-child {
    border-bottom: 0;
  }

  .section {
    padding-block: 75px;
  }

  .section-heading {
    margin-bottom: 38px;
  }

  .section-heading h2 {
    font-size: 45px;
  }

  .about__grid {
    gap: 45px;
  }

  .about__collage {
    min-height: 455px;
  }

  .about__main-image {
    inset: 0 28px 68px 0;
  }

  .about__small-image {
    width: 49%;
    height: 190px;
  }

  .about__experience {
    left: 8px;
    min-width: 160px;
    padding: 12px 14px;
  }

  .about__experience strong {
    font-size: 39px;
  }

  .about__features {
    grid-template-columns: 1fr;
  }

  .purpose-band {
    padding-block: 82px;
  }

  .purpose-cards {
    grid-template-columns: 1fr;
  }

  .purpose-card,
  .purpose-card--values {
    grid-column: auto;
  }

  .purpose-card--mission {
    transform: none;
  }

  .academic-grid {
    grid-template-columns: 1fr;
  }

  .academic-card {
    min-height: auto;
  }

  .academic-card:nth-child(4),
  .academic-card:nth-child(5) {
    grid-column: auto;
  }

  .streams-panel__intro,
  .streams-panel__groups article {
    padding: 24px;
  }

  .streams-panel__groups {
    grid-template-columns: 1fr;
  }

  .why-crescent__content {
    padding-block: 52px;
  }

  .why-crescent__image {
    height: 340px;
    margin-left: -14px;
  }

  .facility-mosaic {
    grid-template-columns: 1fr;
    grid-auto-rows: 250px;
  }

  .facility-tile,
  .facility-tile--wide {
    grid-column: auto;
  }

  .achievement-band__grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 25px;
  }

  .achievement-band__grid > div {
    border-right: 0;
  }

  .achievement-band__grid > div:last-child {
    grid-column: 1 / -1;
  }

  .life-heading {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .life-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 290px);
  }

  .life-card--large {
    grid-column: auto;
  }

  .activity-ribbon {
    grid-template-columns: 1fr 1fr;
  }

  .activity-ribbon span {
    border-bottom: 1px solid rgba(17, 20, 95, 0.18);
  }

  .admissions {
    padding-block: 70px;
  }

  .admissions h2 {
    font-size: 56px;
  }

  .admissions__actions {
    display: grid;
  }

  .contact__emails {
    padding: 20px;
  }

  .contact__emails > a {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .contact__emails > a b {
    display: none;
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 38px 25px;
  }

  .footer-about,
  .footer-contact {
    grid-column: 1 / -1;
  }

  .site-footer__bottom .container {
    min-height: 75px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .floating-actions {
    right: 11px;
    bottom: 72px;
  }

  .back-to-top {
    right: 11px;
    bottom: 14px;
  }
}

@media (max-width: 410px) {
  .brand__copy > span {
    max-width: 145px;
  }

  .brand__copy small {
    display: none;
  }

  .mobile-menu nav {
    right: -4px;
    width: calc(100vw - 28px);
  }

  .hero__visual {
    min-height: 420px;
  }

  .about__collage {
    min-height: 410px;
  }

  .about__main-image {
    inset: 0 0 82px;
  }

  .about__small-image {
    display: none;
  }

  .about__experience {
    bottom: 22px;
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Readability and warm-gold refinement */
.utility-bar {
  font-size: 13px;
}

.admission-chip {
  font-size: 11px;
}

.brand__copy > span {
  font-size: 12px;
  line-height: 1.3;
}

.brand__copy small {
  font-size: 10px;
}

.desktop-nav {
  gap: 25px;
  font-size: 14px;
}

.hero__eyebrow {
  font-size: 12px;
}

.hero__content > p {
  max-width: 620px;
  font-size: 18px;
  line-height: 1.8;
}

.button {
  min-height: 56px;
  padding-inline: 25px;
  font-size: 13px;
}

.hero__facts span {
  font-size: 11px;
}

.hero__photo-label span {
  font-size: 12px;
}

.hero__seal span,
.hero__seal small {
  font-size: 9px;
}

.trust-rail article {
  min-height: 124px;
}

.trust-rail strong {
  font-size: 14px;
}

.trust-rail article div span {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
}

.section-heading .eyebrow,
.eyebrow {
  font-size: 12px;
}

.section-heading > p {
  max-width: 730px;
  font-size: 16px;
  line-height: 1.75;
}

.about__content .lead {
  font-size: 19px;
  line-height: 1.72;
}

.about__content > p:not(.lead) {
  font-size: 16px;
  line-height: 1.8;
}

.about__features > div {
  min-height: 88px;
  padding: 16px;
}

.about__features > div > span {
  width: 37px;
  height: 37px;
  font-size: 11px;
}

.about__features p {
  font-size: 13px;
  line-height: 1.55;
}

.about__features strong {
  margin-bottom: 4px;
  font-size: 14px;
}

.text-link {
  font-size: 13px;
}

.purpose-card {
  min-height: 340px;
  padding: 38px;
}

.purpose-card--values {
  min-height: 340px;
}

.purpose-card p {
  font-size: 15px;
  line-height: 1.75;
}

.value-chips span {
  padding: 8px 12px;
  font-size: 11px;
}

.academic-card {
  min-height: 355px;
  padding: 25px 22px 23px;
}

.academic-card__class {
  font-size: 10px;
}

.academic-card p {
  font-size: 14px;
  line-height: 1.65;
}

.academic-card__tag {
  padding: 6px 9px;
  font-size: 10px;
}

.streams-panel__intro p {
  font-size: 14px;
  line-height: 1.65;
}

.streams-panel__groups article {
  min-height: 155px;
  padding: 28px;
}

.streams-panel__groups h4 {
  font-size: 15px;
}

.streams-panel__groups p {
  font-size: 12px;
  line-height: 1.65;
}

.why-list article {
  padding-block: 13px;
}

.why-list h3 {
  font-size: 16px;
}

.why-list p {
  font-size: 12px;
  line-height: 1.55;
}

.facility-tile > div > span {
  font-size: 10px;
}

.facility-tile p {
  font-size: 12px;
}

.facility-strip span {
  padding: 10px 14px;
  font-size: 11px;
}

.achievement-band span {
  font-size: 11px;
}

.life-heading > p {
  font-size: 15px;
  line-height: 1.75;
}

.life-card span {
  font-size: 10px;
}

.activity-ribbon span {
  padding-block: 17px;
  font-size: 12px;
}

.admissions__grid > div:first-child > p {
  max-width: 660px;
  font-size: 16px;
  line-height: 1.75;
}

.admission-steps {
  padding: 34px;
}

.admission-steps li {
  gap: 15px;
}

.admission-steps li > span {
  width: 39px;
  height: 39px;
}

.admission-steps strong {
  font-size: 14px;
}

.admission-steps small {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.5;
}

.contact-card {
  padding: 31px;
}

.contact-card small {
  font-size: 10px;
}

.contact-card p {
  font-size: 14px;
  line-height: 1.7;
}

.contact-card a {
  font-size: 13px;
}

.contact__emails {
  padding: 32px;
}

.contact__emails > a {
  min-height: 92px;
  padding: 16px;
}

.contact__emails a small {
  font-size: 10px;
}

.contact__emails a strong {
  margin-top: 2px;
  font-size: 13px;
}

.office-hours {
  padding: 18px;
}

.office-hours strong {
  font-size: 13px;
}

.office-hours p {
  font-size: 12px;
}

.footer-brand small {
  max-width: 210px;
  font-size: 10px;
}

.footer-about > p {
  max-width: 370px;
  font-size: 13px;
  line-height: 1.75;
}

.footer-recognition {
  padding: 10px 12px;
  font-size: 10px;
}

.site-footer nav {
  gap: 12px;
}

.site-footer nav a,
.footer-contact p,
.footer-contact > a {
  font-size: 14px;
  line-height: 1.65;
}

.site-footer__bottom p {
  font-size: 11px;
}

@media (max-width: 700px) {
  .utility-bar {
    font-size: 12px;
  }

  .admission-chip {
    font-size: 10px;
  }

  .brand__copy > span {
    max-width: 185px;
    font-size: 9px;
  }

  .brand__copy small {
    font-size: 8px;
  }

  .hero__eyebrow {
    font-size: 10px;
  }

  .hero__content > p {
    font-size: 16px;
  }

  .button {
    font-size: 12px;
  }

  .trust-rail article {
    min-height: 100px;
  }

  .section-heading .eyebrow,
  .eyebrow {
    font-size: 10px;
  }

  .section-heading > p {
    font-size: 15px;
  }

  .about__content .lead {
    font-size: 18px;
  }

  .about__content > p:not(.lead) {
    font-size: 15px;
  }

  .purpose-card,
  .purpose-card--values,
  .academic-card {
    min-height: auto;
  }

  .purpose-card {
    padding: 30px;
  }

  .purpose-card p,
  .academic-card p {
    font-size: 14px;
  }

  .streams-panel__groups article {
    min-height: auto;
  }

  .facility-tile p,
  .life-heading > p {
    font-size: 13px;
  }

  .activity-ribbon span {
    font-size: 11px;
  }

  .admissions__grid > div:first-child > p {
    font-size: 15px;
  }

  .contact__emails {
    padding: 22px;
  }

  .contact__emails > a {
    min-height: 86px;
    padding: 13px 10px;
  }

  .contact__emails a strong {
    font-size: 12px;
  }

  .site-footer nav a,
  .footer-contact p,
  .footer-contact > a {
    font-size: 14px;
  }
}

/* Advanced gradients, SVG patterns and interactive motion */
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes patternDrift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 96px 48px;
  }
}

@keyframes gentleFloat {
  0%,
  100% {
    transform: translateY(0) rotate(1.2deg);
  }
  50% {
    transform: translateY(-12px) rotate(0.2deg);
  }
}

@keyframes sealFloat {
  0%,
  100% {
    transform: translateY(0) rotate(8deg);
  }
  50% {
    transform: translateY(-9px) rotate(14deg);
  }
}

@keyframes mottoFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(7px) rotate(-0.5deg);
  }
}

@keyframes goldPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(242, 193, 78, 0.25);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(242, 193, 78, 0);
  }
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(42px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes headingGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(242, 193, 78, 0));
  }
  50% {
    filter: drop-shadow(0 6px 13px rgba(242, 193, 78, 0.2));
  }
}

:where(a, summary):focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
  border-radius: 6px;
}

.hero {
  background:
    radial-gradient(circle at 76% 18%, rgba(72, 90, 216, 0.52), transparent 28%),
    linear-gradient(125deg, #070b38 0%, #11185f 36%, #28339b 68%, #0c124e 100%);
  background-size: 100% 100%, 240% 240%;
  animation: gradientFlow 16s ease infinite;
}

.hero__pattern {
  opacity: 0.58;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23f2c14e' stroke-width='1.2' stroke-opacity='.32'%3E%3Cpath d='M30 18a14 14 0 1 0 12 23A16 16 0 1 1 30 18Z'/%3E%3Cpath d='M72 24v8m-4-4h8M70 68v10m-5-5h10'/%3E%3Ccircle cx='20' cy='72' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px 96px;
  mask-image: linear-gradient(to right, black, rgba(0, 0, 0, 0.55) 55%, transparent 82%);
  animation: patternDrift 22s linear infinite;
}

.hero h1 em,
.section-heading h2 em {
  color: transparent;
  background: linear-gradient(110deg, #d79f2c 0%, #f2c14e 38%, #ffe7a3 52%, #d99f2f 78%, #f2c14e 100%);
  background-size: 220% auto;
  background-clip: text;
  -webkit-background-clip: text;
  animation: gradientFlow 8s linear infinite;
}

.section-heading h2 em {
  background-image: linear-gradient(110deg, #247441 0%, #3f9d5b 38%, #74bd7f 54%, #247441 82%);
}

.section-heading--light h2 em {
  background-image: linear-gradient(110deg, #d8a12f, #f2c14e 40%, #ffe8a6 55%, #dcaa37);
}

.hero__photo-frame {
  animation: gentleFloat 7s ease-in-out infinite;
  will-change: transform;
}

.hero__seal {
  animation: sealFloat 5.2s ease-in-out infinite, goldPulse 3.8s ease-in-out infinite;
}

.hero__motto {
  animation: mottoFloat 6.4s ease-in-out infinite;
}

.hero__photo-frame img {
  transition: transform 0.8s cubic-bezier(0.2, 0.72, 0.24, 1), filter 0.6s ease;
}

.hero__visual:hover .hero__photo-frame img {
  transform: scale(1.045);
  filter: saturate(1.12) contrast(1.04);
}

.brand img {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
}

.brand:hover img {
  transform: rotate(-5deg) scale(1.08);
  filter: drop-shadow(0 8px 12px rgba(17, 24, 95, 0.22));
}

.admission-chip,
.trust-rail,
.admissions {
  background-image: linear-gradient(110deg, #d49e2c, #f2c14e 32%, #f8d879 52%, #e3ad38 72%, #f2c14e);
  background-size: 240% 240%;
  animation: gradientFlow 11s ease infinite;
}

.admission-chip {
  position: relative;
  overflow: hidden;
}

.admission-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.55) 48%, transparent 76%);
  transform: translateX(-120%);
  transition: transform 0.65s ease;
}

.admission-chip:hover::after {
  transform: translateX(120%);
}

.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px;
  background: linear-gradient(105deg, transparent 15%, rgba(255, 255, 255, 0.62) 48%, transparent 80%);
  transform: translateX(-130%) skewX(-16deg);
  transition: transform 0.7s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.button:hover::before {
  transform: translateX(130%) skewX(-16deg);
}

.button--yellow {
  background: linear-gradient(120deg, #dba832, var(--yellow) 48%, #f8d77b);
}

.button--navy {
  background: linear-gradient(120deg, var(--navy-deep), var(--navy-mid), var(--blue));
  background-size: 180% 180%;
}

.button--white:hover {
  color: white;
  background: linear-gradient(120deg, var(--green), #439b5e);
  box-shadow: 0 12px 25px rgba(47, 126, 72, 0.24);
}

.trust-rail article {
  position: relative;
  overflow: hidden;
  transition: transform 0.32s ease, background 0.32s ease, box-shadow 0.32s ease;
}

.trust-rail article::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 58%);
  opacity: 0;
  transition: opacity 0.32s ease;
}

.trust-rail article:hover {
  z-index: 2;
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.36);
  box-shadow: 0 16px 28px rgba(17, 24, 95, 0.18);
}

.trust-rail article:hover::before {
  opacity: 1;
}

.trust-rail__icon {
  position: relative;
  z-index: 1;
  transition: transform 0.42s cubic-bezier(0.2, 0.85, 0.24, 1.25), background 0.3s ease;
}

.trust-rail article:hover .trust-rail__icon {
  transform: rotate(12deg) scale(1.12);
  background: linear-gradient(135deg, var(--navy), var(--blue));
}

.about {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112' viewBox='0 0 112 112'%3E%3Cg fill='none' stroke='%2311185f' stroke-opacity='.055'%3E%3Cpath d='M56 13 99 56 56 99 13 56Z'/%3E%3Ccircle cx='56' cy='56' r='20'/%3E%3Cpath d='M56 36v40M36 56h40'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, #fffdf7 0%, var(--cream) 48%, #f8f1df 100%);
  background-size: 112px 112px, auto;
}

.about__main-image,
.about__small-image {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
}

.about__collage:hover .about__main-image {
  transform: translate(-5px, -7px) rotate(-0.6deg);
  box-shadow: 0 28px 58px rgba(17, 24, 95, 0.2);
}

.about__collage:hover .about__small-image {
  transform: translate(7px, -6px) rotate(1.5deg);
  box-shadow: 0 24px 48px rgba(47, 126, 72, 0.24);
}

.about__features > div {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.about__features > div:hover {
  transform: translateY(-6px);
  border-color: rgba(242, 193, 78, 0.75);
  background: white;
  box-shadow: 0 14px 28px rgba(17, 24, 95, 0.12);
}

.about__features > div:hover > span {
  background: var(--navy);
  transform: rotate(-7deg);
}

.purpose-band {
  background:
    radial-gradient(circle at 12% 12%, rgba(49, 70, 186, 0.55), transparent 30%),
    linear-gradient(130deg, var(--navy-deep), var(--navy) 48%, #252b85);
}

.purpose-band__shape {
  position: absolute;
  inset: 0;
  opacity: 0.52;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23f2c14e' stroke-opacity='.16'%3E%3Cpath d='M70 8v18M70 114v18M8 70h18M114 70h18'/%3E%3Cpath d='m70 28 12 29 30 13-30 13-12 29-12-29-30-13 30-13Z'/%3E%3Ccircle cx='70' cy='70' r='45' stroke-dasharray='3 8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 140px 140px;
  mask-image: linear-gradient(to left, black, transparent 72%);
  animation: patternDrift 28s linear infinite;
}

.purpose-card {
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s ease, filter 0.35s ease;
}

.purpose-card:hover {
  transform: translateY(-12px) rotate(-0.6deg);
  box-shadow: 14px 20px 0 rgba(242, 193, 78, 0.2), 0 26px 55px rgba(5, 8, 42, 0.28);
  filter: saturate(1.08);
}

.purpose-card--mission:hover {
  transform: translateY(8px) rotate(0.7deg);
}

.purpose-card__icon {
  transition: transform 0.45s cubic-bezier(0.2, 0.85, 0.24, 1.3);
}

.purpose-card:hover .purpose-card__icon {
  transform: rotate(12deg) scale(1.12);
}

.academics {
  background:
    radial-gradient(circle at 8% 15%, rgba(47, 126, 72, 0.13), transparent 19%),
    radial-gradient(circle at 92% 82%, rgba(215, 75, 50, 0.09), transparent 20%),
    linear-gradient(145deg, #ffffff 0%, #fffdf7 48%, #f7f9ff 100%);
}

.academic-card {
  isolation: isolate;
  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.38s ease, border-color 0.38s ease;
}

.academic-card::after {
  z-index: -1;
  transition: width 0.45s ease, height 0.45s ease, opacity 0.45s ease;
}

.academic-card:hover {
  transform: translateY(-12px) rotate(0.6deg);
  border-color: color-mix(in srgb, var(--card-color) 58%, white);
  background: linear-gradient(145deg, white, color-mix(in srgb, var(--card-color) 9%, white));
  box-shadow: 0 25px 52px color-mix(in srgb, var(--card-color) 22%, transparent);
}

.academic-card:hover::after {
  width: 190px;
  height: 190px;
  opacity: 0.14;
}

.academic-card__icon {
  transition: transform 0.45s cubic-bezier(0.2, 0.85, 0.24, 1.3), background 0.35s ease, color 0.35s ease;
}

.academic-card:hover .academic-card__icon {
  color: white;
  background: var(--card-color);
  transform: rotate(-9deg) scale(1.08);
}

.streams-panel__groups article {
  transition: transform 0.32s ease, background 0.32s ease;
}

.streams-panel__groups article:hover {
  z-index: 1;
  transform: scale(1.025);
  background: linear-gradient(135deg, var(--navy-mid), var(--blue));
}

.why-crescent {
  background:
    radial-gradient(circle at 15% 30%, rgba(39, 57, 154, 0.5), transparent 32%),
    linear-gradient(125deg, #060936, var(--navy-deep) 55%, #141b6c);
}

.why-list article:hover > span {
  color: var(--navy-deep);
  background: var(--yellow);
  transform: rotate(8deg);
}

.why-list article > span {
  transition: transform 0.34s ease, color 0.34s ease, background 0.34s ease;
}

.facility-tile {
  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.42s ease, border-color 0.42s ease;
}

.facility-tile:hover {
  z-index: 2;
  transform: translateY(-9px) scale(1.015);
  border-color: var(--yellow);
  box-shadow: 0 25px 50px rgba(17, 24, 95, 0.24);
}

.facility-tile:hover::before {
  background: linear-gradient(to top, rgba(7, 8, 48, 0.93), rgba(47, 126, 72, 0.05) 75%);
}

.facility-strip span {
  transition: transform 0.28s ease, color 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}

.facility-strip span:hover {
  transform: translateY(-4px);
  border-color: var(--yellow);
  color: white;
  background: linear-gradient(120deg, var(--navy), var(--blue));
}

.achievement-band {
  background:
    linear-gradient(110deg, rgba(8, 13, 63, 0.95), rgba(37, 43, 133, 0.88), rgba(8, 13, 63, 0.96)),
    url("../images/classroom-6.webp") center 45% / cover;
  background-size: 210% 210%, cover;
  animation: gradientFlow 13s ease infinite;
}

.achievement-band__grid > div {
  transition: transform 0.35s ease, background 0.35s ease;
}

.achievement-band__grid > div:hover {
  transform: translateY(-8px);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
}

.achievement-band__grid > div:hover strong {
  transform: scale(1.08);
  text-shadow: 0 7px 20px rgba(242, 193, 78, 0.36);
}

.achievement-band strong {
  transition: transform 0.35s ease, text-shadow 0.35s ease;
}

.life-card {
  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.42s ease;
}

.life-card:hover {
  z-index: 2;
  transform: translateY(-9px) rotate(-0.4deg);
  box-shadow: 0 24px 50px rgba(17, 24, 95, 0.25);
}

.life-card:nth-child(even):hover {
  transform: translateY(-9px) rotate(0.5deg);
}

.life-card:hover::after {
  background: linear-gradient(to top, rgba(6, 7, 45, 0.92), rgba(36, 85, 166, 0.08) 72%);
}

.activity-ribbon {
  background: linear-gradient(110deg, #d8a12f, var(--yellow), #f7d577, #dca738);
  background-size: 220% 220%;
  animation: gradientFlow 10s ease infinite;
}

.activity-ribbon span {
  transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.activity-ribbon span:hover {
  color: white;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  transform: translateY(-3px);
}

.admissions__pattern {
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%2311185f' stroke-opacity='.24'%3E%3Cpath d='M15 50h20m30 0h20M50 15v20m0 30v20'/%3E%3Ccircle cx='50' cy='50' r='24' stroke-dasharray='2 6'/%3E%3Cpath d='m50 38 4 8 9 1-7 6 2 9-8-5-8 5 2-9-7-6 9-1Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100px 100px;
  mask-image: linear-gradient(to left, black, transparent 72%);
  animation: patternDrift 25s linear infinite;
}

.admission-steps {
  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.42s ease;
}

.admission-steps:hover {
  transform: translateY(-9px) rotate(0.4deg);
  box-shadow: 13px 13px 0 rgba(215, 75, 50, 0.88), 0 25px 48px rgba(17, 24, 95, 0.16);
}

.admission-steps li {
  transition: transform 0.28s ease, background 0.28s ease;
}

.admission-steps li:hover {
  transform: translateX(7px);
}

.admission-steps li:hover > span {
  color: white;
  background: linear-gradient(135deg, var(--green), var(--blue));
  transform: rotate(8deg);
}

.admission-steps li > span {
  transition: transform 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.contact {
  background:
    linear-gradient(rgba(251, 247, 237, 0.94), rgba(251, 247, 237, 0.94)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%232f7e48' stroke-opacity='.13'%3E%3Ccircle cx='60' cy='60' r='30'/%3E%3Ccircle cx='60' cy='60' r='12'/%3E%3Cpath d='M60 8v22m0 60v22M8 60h22m60 0h22M23 23l16 16m42 42 16 16M97 23 81 39M39 81 23 97'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 120px 120px;
}

.contact-card,
.contact__emails {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.contact-card:hover,
.contact__emails:hover {
  transform: translateY(-8px);
  border-color: rgba(242, 193, 78, 0.7);
  box-shadow: 0 24px 50px rgba(17, 24, 95, 0.15);
}

.contact-card--address {
  background:
    radial-gradient(circle at 90% 10%, rgba(63, 95, 202, 0.48), transparent 30%),
    linear-gradient(135deg, var(--navy-deep), var(--navy));
}

.contact__emails > a:hover {
  background: linear-gradient(120deg, rgba(242, 193, 78, 0.14), rgba(47, 126, 72, 0.09), rgba(36, 85, 166, 0.08));
}

.contact__emails > a:hover .email-icon {
  transform: rotate(-8deg) scale(1.08);
  background: linear-gradient(135deg, var(--green), var(--blue));
}

.email-icon {
  transition: transform 0.34s ease, background 0.34s ease;
}

.site-footer {
  background:
    radial-gradient(circle at 82% 15%, rgba(38, 51, 145, 0.5), transparent 26%),
    linear-gradient(130deg, #060932, var(--navy-deep) 55%, #10175f);
}

.site-footer__top::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23f2c14e' stroke-opacity='.16'%3E%3Cpath d='M30 18a14 14 0 1 0 12 23A16 16 0 1 1 30 18Z'/%3E%3Cpath d='M72 24v8m-4-4h8M70 68v10m-5-5h10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px 96px;
  mask-image: linear-gradient(to left, black, transparent 70%);
  animation: patternDrift 30s linear infinite;
}

.site-footer nav a {
  transition: color 0.25s ease, transform 0.25s ease;
}

.site-footer nav a:hover {
  display: inline-block;
  transform: translateX(6px);
}

.floating-actions a,
.back-to-top {
  animation: goldPulse 3.5s ease-in-out infinite;
}

.floating-actions a:hover,
.back-to-top:hover {
  transform: translateY(-5px) scale(1.1) rotate(5deg);
}

@supports (animation-timeline: view()) {
  .section-heading,
  .about__collage,
  .purpose-card,
  .academic-card,
  .streams-panel,
  .why-list article,
  .facility-tile,
  .achievement-band__grid > div,
  .life-card,
  .admission-steps,
  .contact-card,
  .contact__emails {
    animation-name: revealUp;
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 8% cover 32%;
  }

  .section-heading {
    animation-name: revealUp, headingGlow;
    animation-duration: 1ms, 1ms;
    animation-fill-mode: both;
    animation-timeline: view(), view();
    animation-range: entry 5% cover 28%, entry 8% cover 42%;
  }
}

@media (hover: none) {
  .trust-rail article:hover,
  .purpose-card:hover,
  .purpose-card--mission:hover,
  .academic-card:hover,
  .facility-tile:hover,
  .life-card:hover,
  .life-card:nth-child(even):hover,
  .contact-card:hover,
  .contact__emails:hover,
  .admission-steps:hover {
    transform: none;
  }
}

/* Premium, larger typography system */
h1,
h2,
h3,
h4,
.brand__copy strong,
.hero__facts strong,
.hero__photo-label strong,
.hero__seal strong,
.about__experience strong,
.purpose-card__number,
.academic-card__icon,
.streams-panel__intro::after,
.streams-panel__groups article > strong,
.why-list article > span,
.achievement-band strong,
.admission-steps li > span,
.email-icon,
.footer-brand strong {
  font-family: var(--font-heading);
  font-weight: 800;
}

.hero__motto {
  font-family: var(--font-script);
}

.brand__copy strong {
  font-size: 31px;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.brand__copy > span {
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.brand__copy small {
  font-size: 11px;
  line-height: 1.3;
}

.desktop-nav {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
}

.utility-bar,
.admission-chip,
.hero__eyebrow,
.section-heading .eyebrow,
.eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
}

.hero h1 {
  max-width: 720px;
  font-family: var(--font-heading);
  font-size: clamp(54px, 5.2vw, 76px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.hero__content > p {
  max-width: 650px;
  font-size: 20px;
  line-height: 1.75;
}

.hero__facts strong {
  font-size: 29px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.hero__facts span {
  font-size: 12px;
  line-height: 1.45;
}

.hero__photo-label strong {
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.hero__motto {
  font-size: 23px;
  line-height: 1.4;
}

.trust-rail strong {
  font-size: 16px;
  line-height: 1.35;
}

.trust-rail article div span {
  font-size: 14px;
  line-height: 1.5;
}

.section-heading {
  max-width: 880px;
}

.section-heading h2 {
  font-family: var(--font-heading);
  font-size: clamp(42px, 4.4vw, 59px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.section-heading > p {
  max-width: 790px;
  font-size: 18px;
  line-height: 1.8;
}

.section-heading .eyebrow,
.eyebrow {
  font-size: 13px;
  line-height: 1.4;
}

.about__content .lead {
  font-size: 21px;
  line-height: 1.72;
}

.about__content > p:not(.lead) {
  font-size: 18px;
  line-height: 1.85;
}

.about__features p {
  font-size: 15px;
  line-height: 1.65;
}

.about__features strong {
  font-size: 16px;
  line-height: 1.4;
}

.text-link {
  font-size: 14px;
}

.purpose-card {
  min-height: 380px;
  padding: 40px;
}

.purpose-card h3 {
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.purpose-card p {
  font-size: 17px;
  line-height: 1.75;
}

.value-chips span {
  font-size: 12px;
  line-height: 1.35;
}

.academic-card {
  min-height: 405px;
}

.academic-card h3 {
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.academic-card p {
  font-size: 16px;
  line-height: 1.7;
}

.academic-card__class,
.academic-card__tag {
  font-size: 11px;
}

.academic-card__icon {
  font-size: 21px;
}

.streams-panel__intro h3 {
  font-size: 31px;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.streams-panel__intro p {
  font-size: 16px;
  line-height: 1.7;
}

.streams-panel__groups article {
  min-height: 175px;
}

.streams-panel__groups h4 {
  font-size: 17px;
  line-height: 1.35;
}

.streams-panel__groups p {
  font-size: 14px;
  line-height: 1.7;
}

.why-list h3 {
  font-size: 19px;
  line-height: 1.4;
}

.why-list p {
  font-size: 15px;
  line-height: 1.5;
}

.why-crescent__caption strong {
  font-family: var(--font-heading);
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.why-crescent__caption span {
  font-size: 12px;
}

.facility-tile h3 {
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.facility-tile p {
  font-size: 14px;
  line-height: 1.55;
}

.facility-strip span {
  font-size: 13px;
  line-height: 1.4;
}

.achievement-band span {
  font-size: 13px;
  line-height: 1.5;
}

.achievement-band strong {
  font-size: 42px;
  line-height: 1.1;
}

.life-heading > p {
  font-size: 17px;
  line-height: 1.8;
}

.life-card h3 {
  font-size: 23px;
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.life-card--large h3 {
  font-size: 34px;
}

.life-card span,
.activity-ribbon span {
  font-size: 12px;
}

.admissions h2 {
  max-width: 760px;
  font-family: var(--font-heading);
  font-size: clamp(43px, 4.8vw, 65px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.admissions__grid > div:first-child > p {
  max-width: 700px;
  font-size: 18px;
  line-height: 1.8;
}

.admission-steps h3 {
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.admission-steps strong {
  font-size: 16px;
  line-height: 1.4;
}

.admission-steps small {
  font-size: 14px;
  line-height: 1.55;
}

.contact-card h3 {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.contact-card p {
  font-size: 16px;
  line-height: 1.75;
}

.contact-card a {
  font-size: 14px;
}

.contact__emails > h3 {
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.contact__emails a strong {
  font-size: 15px;
  line-height: 1.45;
}

.office-hours strong {
  font-size: 15px;
}

.office-hours p {
  font-size: 14px;
  line-height: 1.55;
}

.footer-brand strong {
  font-size: 27px;
  letter-spacing: -0.025em;
}

.footer-brand small {
  font-size: 11px;
  line-height: 1.5;
}

.footer-about > p {
  font-size: 15px;
  line-height: 1.8;
}

.site-footer h3 {
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.site-footer nav a,
.footer-contact p,
.footer-contact > a {
  font-size: 16px;
  line-height: 1.7;
}

.site-footer__bottom p {
  font-size: 12px;
}

@media (max-width: 1120px) {
  .desktop-nav {
    gap: 16px;
    font-size: 13px;
  }

  .hero h1 {
    font-size: clamp(50px, 5.5vw, 66px);
  }

  .academic-card {
    min-height: 370px;
  }
}

@media (max-width: 700px) {
  body {
    font-size: 16px;
  }

  .brand__copy strong {
    font-size: 23px;
  }

  .brand__copy > span {
    max-width: 185px;
    font-size: 10px;
  }

  .brand__copy small {
    font-size: 9px;
  }

  .hero h1 {
    font-size: clamp(45px, 13.5vw, 61px);
    line-height: 1;
  }

  .hero__content > p {
    font-size: 17px;
    line-height: 1.75;
  }

  .hero__facts span {
    font-size: 10px;
  }

  .section-heading h2 {
    font-size: clamp(36px, 10vw, 45px);
    line-height: 1.1;
  }

  .section-heading > p {
    font-size: 16px;
    line-height: 1.75;
  }

  .section-heading .eyebrow,
  .eyebrow {
    font-size: 11px;
  }

  .about__content .lead {
    font-size: 19px;
  }

  .about__content > p:not(.lead) {
    font-size: 16px;
  }

  .about__features p {
    font-size: 14px;
  }

  .purpose-card,
  .academic-card {
    min-height: auto;
  }

  .purpose-card h3 {
    font-size: 24px;
  }

  .purpose-card p,
  .academic-card p {
    font-size: 15px;
  }

  .streams-panel__groups article {
    min-height: auto;
  }

  .why-list p,
  .life-heading > p,
  .admissions__grid > div:first-child > p,
  .contact-card p {
    font-size: 15px;
  }

  .admissions h2 {
    font-size: clamp(37px, 10.5vw, 49px);
  }

  .contact__emails a strong {
    font-size: 13px;
  }

  .site-footer nav a,
  .footer-contact p,
  .footer-contact > a {
    font-size: 15px;
  }
}

/* Keep the About section title compact without changing content text */
.about__content .section-heading h2 {
  max-width: 650px;
  font-size: clamp(34px, 3.2vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.035em;
}

.about__content .lead,
.about__content > p:not(.lead) {
  line-height: 1.55;
}

.about__content .lead {
  margin-bottom: 16px;
}

@media (max-width: 700px) {
  .about__content .section-heading h2 {
    font-size: clamp(30px, 8vw, 37px);
    line-height: 1.18;
  }
}

/* Consistent icon system and social placeholders */
.utility-bar__right,
.social-links {
  display: flex;
  align-items: center;
}

.utility-bar__right {
  align-self: stretch;
  gap: 14px;
}

.utility-bar__contacts i {
  margin-right: 7px;
  color: var(--yellow);
  font-size: 14px;
}

.social-links {
  gap: 7px;
}

.social-placeholder {
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: default;
  transition: transform 0.28s ease, color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}

.social-links--top .social-placeholder {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
}

.social-links--top .social-placeholder:hover {
  color: var(--navy-deep);
  background: var(--yellow);
  transform: translateY(-3px) rotate(7deg);
  box-shadow: 0 7px 16px rgba(242, 193, 78, 0.28);
}

.admission-chip {
  gap: 8px;
}

.admission-chip > i {
  position: relative;
  z-index: 1;
  font-size: 14px;
}

.desktop-nav {
  gap: 24px;
  font-size: 15px;
}

.desktop-nav a,
.mobile-menu nav a {
  display: inline-flex;
  align-items: center;
}

.desktop-nav a i {
  margin-right: 8px;
  color: var(--green);
  font-size: 16px;
  transition: transform 0.3s ease, color 0.3s ease;
}

.desktop-nav a:hover i,
.desktop-nav a.active i {
  color: var(--red);
  transform: translateY(-2px) scale(1.12);
}

.desktop-nav .nav-cta i {
  color: var(--yellow);
}

.mobile-menu nav a {
  gap: 10px;
}

.mobile-menu nav a i {
  width: 22px;
  color: var(--green);
  font-size: 15px;
  text-align: center;
}

.button > i {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.button:hover > i:first-child {
  transform: rotate(-8deg) scale(1.12);
}

.button:hover > i:last-child:not(:first-child) {
  transform: translateX(4px);
}

.trust-rail__icon i {
  font-size: 19px;
}

.purpose-card__icon i {
  font-size: 22px;
}

.academic-card__icon i {
  font-size: 27px;
}

.academic-card:hover .academic-card__icon i {
  transform: scale(1.05);
}

.facility-tile h3 i,
.life-card h3 i {
  margin-right: 5px;
  color: var(--yellow);
  font-size: 0.82em;
  vertical-align: 0.06em;
}

.facility-strip span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.facility-strip span::before {
  display: none;
}

.facility-strip i {
  color: var(--green);
  font-size: 14px;
  transition: color 0.28s ease, transform 0.28s ease;
}

.facility-strip span:hover i {
  color: var(--yellow);
  transform: rotate(-8deg) scale(1.13);
}

.achievement-icon {
  display: block;
  margin-bottom: 8px;
  color: white;
  font-size: 22px;
  opacity: 0.82;
  transition: color 0.35s ease, transform 0.35s ease;
}

.achievement-band__grid > div:hover .achievement-icon {
  color: var(--yellow);
  transform: translateY(-4px) scale(1.12);
}

.activity-ribbon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.activity-ribbon span::before {
  display: none;
}

.activity-ribbon i {
  color: var(--red);
  font-size: 14px;
  transition: transform 0.3s ease, color 0.3s ease;
}

.activity-ribbon span:hover i {
  color: var(--yellow);
  transform: rotate(-9deg) scale(1.15);
}

.admission-steps h3 i {
  margin-right: 7px;
  color: var(--red);
}

.contact-card__icon i,
.email-icon i {
  font-size: 18px;
}

.contact-card a i {
  margin-left: 5px;
}

.office-hours > span i {
  color: var(--navy);
  font-size: 24px;
}

.social-links--footer {
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 22px;
  gap: 10px;
}

.social-links--footer .social-placeholder {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(242, 193, 78, 0.26);
  color: var(--yellow);
  background: rgba(255, 255, 255, 0.06);
  font-size: 17px;
}

.social-links--footer .social-placeholder:hover {
  color: var(--navy-deep);
  background: linear-gradient(135deg, var(--yellow), #ffe19a);
  transform: translateY(-5px) rotate(6deg);
  box-shadow: 0 10px 22px rgba(242, 193, 78, 0.2);
}

/* Keep the five icons on a single row while the contact column is narrow */
@media (min-width: 961px) and (max-width: 1200px) {
  .social-links--footer {
    gap: 7px;
  }

  .social-links--footer .social-placeholder {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
}

.footer-contact-line {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
}

.footer-contact-line i {
  width: 18px;
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--yellow);
  text-align: center;
}

.floating-actions i,
.back-to-top i {
  font-size: 18px;
}

@media (max-width: 1120px) {
  .social-links--top {
    display: none;
  }

  .desktop-nav {
    gap: 11px;
    font-size: 12px;
  }

  .desktop-nav a i {
    margin-right: 4px;
    font-size: 12px;
  }
}

@media (max-width: 700px) {
  .utility-bar__right {
    margin-left: auto;
  }

  .admission-chip > i {
    display: none;
  }

  .social-links--footer .social-placeholder {
    width: 39px;
    height: 39px;
    font-size: 16px;
  }

  .activity-ribbon span {
    min-height: 52px;
  }
}

/* Facilities carousel — warm light canvas with navy and gold accents */
.facilities {
  position: relative;
  overflow: hidden;
  padding-block: 68px;
  color: var(--navy-deep);
  background:
    radial-gradient(circle at 10% 13%, rgba(242, 193, 78, 0.24), transparent 27%),
    radial-gradient(circle at 88% 76%, rgba(47, 126, 72, 0.14), transparent 30%),
    linear-gradient(135deg, #fffdf7 0%, #fff9ea 48%, #f4f8ee 100%);
}

.facilities::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.62;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%2311145f' stroke-width='1.4' stroke-opacity='.17'%3E%3Cpath d='M75 14 91 59l45 16-45 16-16 45-16-45-45-16 45-16Z'/%3E%3Ccircle cx='75' cy='75' r='50' stroke-dasharray='4 8'/%3E%3Cpath d='M20 20h21v3H23v18h-3ZM130 20h-21v3h18v18h3ZM20 130h21v-3H23v-18h-3ZM130 130h-21v-3h18v-18h3Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 150px 150px;
  mask-image: linear-gradient(to right, transparent, black 24%, black 76%, transparent);
  animation: patternDrift 34s linear infinite;
}

.facilities::after {
  content: "";
  position: absolute;
  top: -210px;
  right: -150px;
  width: 520px;
  height: 520px;
  border: 80px solid rgba(47, 126, 72, 0.07);
  border-radius: 50%;
  pointer-events: none;
}

.facilities .container {
  position: relative;
  z-index: 1;
}

.facilities .section-heading > p {
  color: rgba(17, 20, 95, 0.68);
}

.facilities .section-heading {
  margin-bottom: 32px;
}

.facilities .section-heading h2 {
  color: var(--navy-deep);
}

.facility-carousel-shell {
  background: transparent;
}

.facility-carousel {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  padding: 0;
}

.facility-carousel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.facility-carousel:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 6px;
  border-radius: 14px;
}

.facility-slide {
  position: relative;
  flex: 0 0 100%;
  min-height: 510px;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  overflow: hidden;
  border: 7px solid rgba(255, 255, 255, 0.96);
  border-radius: 28px 28px 6px 28px;
  color: var(--ink);
  background:
    radial-gradient(circle at 92% 10%, rgba(242, 193, 78, 0.16), transparent 25%),
    linear-gradient(145deg, #ffffff, #fffaf0);
  box-shadow: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-inline: 0;
  /* Keep the section heading visible when a slide arrow is selected. */
  scroll-margin-block-start: 430px;
  transition: border-color 0.38s ease;
}

.facility-slide:target {
  border-color: var(--yellow);
  box-shadow: none;
}

.facility-slide::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  width: 74px;
  height: 74px;
  background: linear-gradient(225deg, var(--yellow) 0 50%, transparent 51%);
  pointer-events: none;
}

.facility-slide__media {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--navy);
}

.facility-slide--reverse .facility-slide__media {
  order: 2;
}

.facility-slide--reverse .facility-slide__content {
  order: 1;
}

.facility-slide__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(6, 9, 50, 0.62), transparent 48%),
    linear-gradient(to right, transparent 72%, rgba(6, 9, 50, 0.18));
  pointer-events: none;
}

.facility-slide--reverse .facility-slide__media::after {
  background:
    linear-gradient(to top, rgba(6, 9, 50, 0.62), transparent 48%),
    linear-gradient(to left, transparent 72%, rgba(6, 9, 50, 0.18));
}

.facility-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
}

.facility-slide:hover .facility-slide__media img {
  transform: scale(1.055);
  filter: saturate(1.09) contrast(1.04);
}

.facility-slide__count,
.facility-slide__badge {
  position: absolute;
  z-index: 3;
  color: white;
}

.facility-slide__count {
  top: 24px;
  left: 24px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 9px 9px 2px 9px;
  background: rgba(8, 13, 63, 0.68);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.facility-slide__badge {
  right: 24px;
  bottom: 23px;
  padding: 10px 14px;
  border-radius: 11px 11px 3px 11px;
  color: var(--navy-deep);
  background: var(--yellow);
  box-shadow: 0 12px 25px rgba(8, 13, 63, 0.26);
  font-size: 12px;
  font-weight: 800;
}

.facility-slide__badge i {
  margin-right: 6px;
}

.facility-slide__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 38px 40px 30px;
}

.facility-slide__content::before {
  content: "";
  position: absolute;
  right: 25px;
  bottom: 82px;
  width: 110px;
  height: 110px;
  border: 20px solid rgba(17, 24, 95, 0.035);
  border-radius: 50%;
}

.facility-slide__eyebrow {
  margin-bottom: 15px;
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.facility-slide__icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 18px 18px 4px 18px;
  color: var(--yellow);
  background: linear-gradient(135deg, var(--navy), var(--blue));
  box-shadow: 7px 7px 0 rgba(242, 193, 78, 0.5);
  font-size: 27px;
  transition: transform 0.38s ease, box-shadow 0.38s ease;
}

.facility-slide:hover .facility-slide__icon {
  transform: rotate(-7deg) scale(1.06);
  box-shadow: 10px 10px 0 rgba(47, 126, 72, 0.3);
}

.facility-slide__content h3 {
  max-width: 420px;
  margin-bottom: 14px;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: clamp(29px, 3.1vw, 40px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.045em;
}

.facility-slide__content > p {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.facility-slide__content ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.facility-slide__content li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #3f4054;
  font-size: 14px;
  font-weight: 700;
}

.facility-slide__content li i {
  color: var(--green);
  font-size: 16px;
}

.facilities .facility-strip {
  margin-top: 20px;
}

.facilities .facility-strip span {
  border-color: rgba(17, 20, 95, 0.12);
  color: var(--navy);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
}

.facilities .facility-strip i {
  color: var(--yellow);
}

.facilities .facility-strip span:hover {
  border-color: var(--yellow);
  color: var(--navy-deep);
  background: var(--yellow);
}

.facilities .facility-strip span:hover i {
  color: var(--navy-deep);
}

@media (max-width: 960px) {
  .facility-slide {
    flex-basis: 100%;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .facility-slide__media,
  .facility-slide--reverse .facility-slide__media {
    order: 1;
    height: 330px;
  }

  .facility-slide__content,
  .facility-slide--reverse .facility-slide__content {
    order: 2;
  }

  .facility-slide__content {
    min-height: 440px;
  }
}

@media (max-width: 700px) {
  .facilities {
    padding-block: 52px;
  }

  .facilities .section-heading {
    margin-bottom: 26px;
  }

  .facility-carousel {
    gap: 0;
    padding-inline: 0;
  }

  .facility-slide {
    flex-basis: 100%;
    border-width: 4px;
    border-radius: 20px 20px 5px 20px;
    scroll-margin-block-start: 520px;
  }

  .facility-slide__media,
  .facility-slide--reverse .facility-slide__media {
    height: 230px;
  }

  .facility-slide__content {
    min-height: 460px;
    padding: 26px 22px 22px;
  }

  .facility-slide__icon {
    width: 52px;
    height: 52px;
    margin-bottom: 15px;
    font-size: 23px;
  }

  .facility-slide__content h3 {
    font-size: clamp(27px, 8vw, 34px);
  }

  .facility-slide__content > p {
    font-size: 15px;
  }

  .facility-slide__content li {
    font-size: 13px;
  }

  .facility-slide__badge {
    right: 14px;
    bottom: 14px;
    font-size: 10px;
  }

  .facility-slide__count {
    top: 14px;
    left: 14px;
  }

  .floating-actions {
    right: 60px;
    bottom: 10px;
    display: flex;
    gap: 6px;
  }

  .floating-actions a,
  .back-to-top {
    width: 38px;
    height: 38px;
  }

  .back-to-top {
    right: 12px;
    bottom: 10px;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(40px, 11.8vw, 48px);
    line-height: 1.06;
    letter-spacing: -0.045em;
  }

  .hero__content > p {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.75;
  }

  .hero__facts strong {
    font-size: 21px;
    letter-spacing: -0.035em;
    white-space: nowrap;
  }

  .hero__facts span {
    font-size: 9px;
  }
}

@media (min-width: 961px) {
  .site-header__inner {
    min-height: 112px;
  }
}

/* Final phone-specific spacing and alignment pass. */
@media (max-width: 700px) {
  html {
    scroll-padding-top: 78px;
  }

  .section {
    padding-block: 64px;
  }

  .hero.hero--banner {
    width: 100%;
  }

  .hero-banner__image {
    width: 110%;
    max-width: none;
    margin-left: -5%;
  }

  .facility-carousel {
    gap: 0;
    padding: 0;
    scroll-padding-inline: 0;
  }

  .facility-slide {
    flex: 0 0 100%;
    border-width: 3px;
    border-radius: 18px 18px 5px 18px;
    scroll-snap-align: start;
    scroll-margin-inline: 0;
  }

  .facility-slide::after {
    width: 54px;
    height: 54px;
  }

  .facility-slide__media,
  .facility-slide--reverse .facility-slide__media {
    height: 205px;
  }

  .facility-slide__content {
    min-height: 420px;
    justify-content: flex-start;
    padding: 24px 20px 25px;
  }

  .facility-slide__content::before {
    right: 16px;
    bottom: 18px;
    width: 82px;
    height: 82px;
    border-width: 14px;
  }

  .facility-slide__eyebrow {
    margin-bottom: 10px;
    font-size: 10px;
  }

  .facility-slide__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 14px 14px 4px 14px;
    font-size: 21px;
  }

  .facility-slide__content h3 {
    margin-bottom: 10px;
    font-size: clamp(27px, 8vw, 32px);
    line-height: 1.08;
  }

  .facility-slide__content > p {
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.6;
  }

  .facility-slide__content ul {
    gap: 8px;
  }

  .facility-slide__content li {
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.4;
  }

  .facility-slide__count {
    top: 12px;
    left: 12px;
    padding: 6px 9px;
    font-size: 11px;
  }

  .facility-slide__badge {
    right: 12px;
    bottom: 12px;
    padding: 8px 10px;
    font-size: 10px;
  }

  .why-crescent__content,
  .why-crescent__content .section-heading,
  .why-list,
  .why-list article > div {
    min-width: 0;
    max-width: 100%;
  }

  .why-list h3,
  .why-list p {
    overflow-wrap: anywhere;
  }

  .why-crescent__image {
    width: 100%;
    margin-left: 0;
    border-radius: 24px 24px 6px 24px;
  }

  .site-footer__grid {
    gap: 30px 20px;
  }

  .site-footer__bottom .container {
    padding-block: 15px;
  }
}

@media (min-width: 360px) and (max-width: 700px) {
  .trust-rail__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-rail article {
    min-height: 112px;
    gap: 9px;
    padding: 14px 12px;
    border-right: 0;
    border-bottom: 0;
  }

  .trust-rail article:nth-child(odd) {
    border-right: 1px solid rgba(17, 20, 95, 0.17);
  }

  .trust-rail article:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(17, 20, 95, 0.17);
  }

  .trust-rail__icon {
    width: 37px;
    height: 37px;
    font-size: 15px;
  }

  .trust-rail strong {
    font-size: 14px;
    line-height: 1.3;
  }

  .trust-rail article div span {
    font-size: 13px;
    line-height: 1.35;
  }
}

@media (max-width: 359px) {
  .trust-rail article {
    min-height: 88px;
    padding: 14px 18px;
  }
}

/* Unified inner-page styles */
/* Shared navigation and inner-page system for the Crescent website. */

.multi-nav {
  gap: 9px;
}

.multi-nav > a,
.nav-group__trigger {
  position: relative;
  min-height: 112px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-inline: 5px;
  color: #24243f;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.multi-nav > a::after,
.nav-group__trigger::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 25px;
  left: 4px;
  height: 3px;
  border-radius: 3px;
  background: var(--red);
  transform: scaleX(0);
  transition: transform 0.22s ease;
}

.multi-nav > a:hover::after,
.multi-nav > a.active::after,
.nav-group:hover .nav-group__trigger::after,
.nav-group:focus-within .nav-group__trigger::after,
.nav-group.active .nav-group__trigger::after {
  transform: scaleX(1);
}

.multi-nav > a i,
.nav-group__trigger i {
  margin: 0;
  color: var(--green);
  font-size: 15px;
}

.multi-nav > a:hover i,
.multi-nav > a.active i,
.nav-group:hover .nav-group__trigger > i:first-child,
.nav-group.active .nav-group__trigger > i:first-child {
  color: var(--red);
}

.nav-group {
  position: relative;
  display: flex;
  align-items: stretch;
}

.nav-group__chevron {
  margin-left: -2px !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  transition: transform 0.22s ease;
}

.nav-group:hover .nav-group__chevron,
.nav-group:focus-within .nav-group__chevron {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  z-index: 120;
  top: calc(100% - 18px);
  left: -18px;
  width: 260px;
  display: grid;
  padding: 10px;
  border: 1px solid rgba(17, 24, 95, 0.1);
  border-radius: 18px 18px 5px 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 55px rgba(8, 13, 63, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -10px;
  right: 0;
  left: 0;
  height: 12px;
}

.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 10px;
  color: #303048;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.nav-dropdown a + a {
  border-top: 1px solid #efeee8;
}

.nav-dropdown a i {
  width: 20px;
  flex: 0 0 20px;
  margin: 0;
  color: var(--green);
  text-align: center;
}

.nav-dropdown a:hover,
.nav-dropdown a.active {
  color: var(--navy);
  background: var(--yellow-soft);
}

.mobile-menu nav {
  max-height: calc(100vh - 145px);
  overflow-y: auto;
}

.mobile-menu__label {
  display: block;
  padding: 12px 12px 5px;
  color: var(--red);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mobile-menu nav a:last-child {
  border-bottom: 1px solid #efeff6;
  color: inherit;
  background: transparent;
}

.mobile-menu nav .mobile-menu__cta {
  margin-top: 8px;
  border: 0;
  border-radius: 10px;
  color: white;
  background: var(--navy);
}

.inner-page {
  background: var(--cream);
}

.inner-page main {
  overflow: hidden;
}

.inner-page .site-header {
  position: sticky;
}

.page-hero {
  --page-image: url("../images/campus-2.webp");
  position: relative;
  min-height: 390px;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: white;
  background:
    linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)),
    var(--page-image) center 46% / cover;
}

.page-hero::before {
  content: none;
}

.page-hero::after {
  content: none;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 66px;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.breadcrumbs a:hover {
  color: var(--yellow);
}

.breadcrumbs i {
  color: var(--yellow);
  font-size: 10px;
}

.page-hero__eyebrow,
.inner-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--yellow);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-hero__eyebrow::before,
.inner-eyebrow::before {
  content: "";
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
}

.page-hero h1 {
  max-width: 820px;
  margin: 12px 0 14px;
  font-family: var(--font-heading);
  font-size: clamp(42px, 5.2vw, 68px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.page-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  line-height: 1.7;
  text-align: left;
}

.page-section {
  position: relative;
  padding-block: 82px;
  background: white;
}

.page-section--cream {
  background:
    linear-gradient(rgba(251, 247, 237, 0.94), rgba(251, 247, 237, 0.94)),
    radial-gradient(rgba(17, 24, 95, 0.1) 1px, transparent 1px);
  background-size: auto, 18px 18px;
}

.page-section--soft {
  background: linear-gradient(135deg, #fffaf0, #f4f8ee);
}

.page-section--navy {
  color: white;
  background:
    radial-gradient(circle at 84% 18%, rgba(47, 126, 72, 0.38), transparent 28%),
    radial-gradient(circle at 8% 80%, rgba(36, 85, 166, 0.34), transparent 30%),
    linear-gradient(130deg, #060932, var(--navy-deep) 55%, #141b6c);
}

.page-section--navy .inner-eyebrow {
  color: var(--yellow);
}

.section-intro {
  max-width: 760px;
  margin-bottom: 38px;
}

.section-intro--center {
  margin-inline: auto;
  text-align: center;
}

.section-intro--center .inner-eyebrow {
  justify-content: center;
}

.section-intro--center p {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
  text-justify: auto;
  hyphens: none;
}

.section-intro h2,
.split-content h2,
.feature-panel h2,
.contact-panel h2 {
  margin: 12px 0 16px;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.page-section--navy h2,
.page-section--navy h3 {
  color: white;
}

.section-intro p,
.split-content > div > p,
.feature-panel > p,
.contact-panel > p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

.page-section--navy p {
  color: rgba(255, 255, 255, 0.72);
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.86fr);
  align-items: center;
  gap: 68px;
}

.split-layout--reverse > :first-child {
  order: 2;
}

.split-media {
  position: relative;
  isolation: isolate;
  min-height: 480px;
}

.split-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 480px;
  object-fit: cover;
  border: 8px solid white;
  border-radius: 34px 34px 8px 34px;
  box-shadow: 0 24px 54px rgba(17, 24, 95, 0.16);
}

.split-media::before {
  content: "";
  position: absolute;
  top: -18px;
  right: -18px;
  width: 120px;
  height: 120px;
  border-radius: 24px;
  background: var(--yellow);
  transform: rotate(8deg);
  z-index: 0;
}

.split-media__badge {
  position: absolute;
  z-index: 2;
  right: -20px;
  bottom: 30px;
  max-width: 220px;
  padding: 16px 18px;
  border-radius: 15px 15px 4px 15px;
  color: white;
  background: var(--navy);
  box-shadow: 8px 8px 0 var(--yellow);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.check-list,
.feature-list,
.policy-list,
.subject-list {
  display: grid;
  gap: 12px;
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li,
.feature-list li,
.policy-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: #3f4054;
  font-size: 15px;
  line-height: 1.55;
}

.check-list i,
.feature-list i,
.policy-list i {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--green);
}

.page-section--navy .check-list li,
.page-section--navy .feature-list li {
  color: rgba(255, 255, 255, 0.82);
}

.page-section--navy .check-list i,
.page-section--navy .feature-list i {
  color: var(--yellow);
}

.stat-grid,
.card-grid,
.programme-grid,
.people-grid,
.contact-grid,
.schedule-grid {
  display: grid;
  gap: 22px;
}

.stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat-card {
  padding: 25px 22px;
  border: 1px solid rgba(17, 24, 95, 0.1);
  border-radius: 20px 20px 5px 20px;
  background: white;
}

.stat-card i {
  display: block;
  margin-bottom: 14px;
  color: var(--green);
  font-size: 24px;
}

.stat-card strong {
  display: block;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
}

.stat-card span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.curriculum-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-card,
.programme-card,
.person-card,
.policy-card,
.schedule-card,
.contact-card--inner {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(17, 24, 95, 0.1);
  border-radius: 24px 24px 6px 24px;
  background: white;
  transition: transform 0.28s ease, border-color 0.28s ease;
}

.info-card:hover,
.programme-card:hover,
.person-card:hover,
.policy-card:hover,
.schedule-card:hover,
.contact-card--inner:hover {
  border-color: rgba(242, 193, 78, 0.85);
  transform: translateY(-5px);
}

.info-card__icon,
.programme-card__icon,
.contact-card__icon--inner {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 17px 17px 4px 17px;
  color: var(--yellow);
  background: var(--navy);
  font-size: 25px;
}

.info-card h3,
.programme-card h3,
.person-card h3,
.policy-card h3,
.schedule-card h3,
.contact-card--inner h3 {
  margin-bottom: 10px;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
}

.info-card p,
.programme-card p,
.person-card p,
.policy-card p,
.schedule-card p,
.contact-card--inner p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.card-link:hover {
  color: var(--red);
}

.programme-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.programme-card {
  padding: 24px 20px;
}

.programme-card__range {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--navy);
  background: var(--yellow-soft);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.subject-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.subject-list li {
  padding: 8px 10px;
  border-radius: 9px;
  color: #44445d;
  background: #f7f6f1;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.feature-panel {
  padding: 42px;
  border-radius: 30px 30px 8px 30px;
  background: white;
}

.page-section--navy .feature-panel {
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  counter-reset: timeline;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 29px;
  right: 10%;
  left: 10%;
  height: 3px;
  background: rgba(242, 193, 78, 0.45);
}

.timeline article {
  position: relative;
  z-index: 1;
  counter-increment: timeline;
  padding: 0 18px 24px;
  text-align: center;
}

.timeline article::before {
  content: counter(timeline, decimal-leading-zero);
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  border: 5px solid var(--navy-deep);
  border-radius: 50%;
  color: var(--navy-deep);
  background: var(--yellow);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 900;
}

.timeline h3 {
  margin-bottom: 9px;
  font-family: var(--font-heading);
  font-size: 19px;
}

.timeline p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
}

.people-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.person-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 20px;
}

.person-card__avatar {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 22px 22px 5px 22px;
  color: var(--yellow);
  background: var(--navy);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 900;
}

.person-card small {
  display: block;
  margin-bottom: 5px;
  color: var(--red);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.person-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.person-list span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-radius: 12px;
  color: #3e4053;
  background: #f7f6f1;
  font-size: 13px;
  font-weight: 700;
}

.person-list i {
  color: var(--green);
}

.facility-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.facility-card {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: 26px 26px 6px 26px;
  color: white;
  background: var(--navy);
}

.facility-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.facility-card:hover img {
  transform: scale(1.045);
}

.facility-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 9, 50, 0.95), rgba(6, 9, 50, 0.06) 70%);
}

.facility-card__content {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 25px;
}

.facility-card h3 {
  margin-bottom: 7px;
  font-family: var(--font-heading);
  font-size: 23px;
}

.facility-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  line-height: 1.55;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 220px;
  gap: 14px;
}

.gallery-grid figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 20px 20px 5px 20px;
  background: var(--navy);
}

.gallery-grid figure:nth-child(1),
.gallery-grid figure:nth-child(6) {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease, filter 0.45s ease;
}

.gallery-grid figure:hover img {
  transform: scale(1.05);
  filter: saturate(1.08);
}

.policy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.54fr);
  align-items: start;
  gap: 38px;
}

.policy-list {
  counter-reset: policy;
}

.policy-list li {
  counter-increment: policy;
  padding: 16px 18px;
  border: 1px solid rgba(17, 24, 95, 0.09);
  border-radius: 14px 14px 4px 14px;
  background: white;
}

.policy-list li::before {
  content: counter(policy, decimal-leading-zero);
  flex: 0 0 34px;
  color: var(--red);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 900;
}

.policy-aside {
  position: sticky;
  top: 150px;
  padding: 30px;
  border-radius: 24px 24px 6px 24px;
  color: white;
  background: var(--navy);
}

.policy-aside h3 {
  margin-bottom: 12px;
  font-family: var(--font-heading);
  font-size: 24px;
}

.policy-aside p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.7;
}

.policy-aside a {
  color: var(--yellow);
  font-weight: 900;
}

.schedule-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.schedule-card__time {
  display: block;
  margin: 13px 0 5px;
  color: var(--green);
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 900;
}

.fee-table {
  width: 100%;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(17, 24, 95, 0.1);
  border-radius: 20px 20px 5px 20px;
  background: white;
}

.fee-table th,
.fee-table td {
  padding: 18px 22px;
  border-bottom: 1px solid #eceae2;
  text-align: left;
}

.fee-table th {
  color: white;
  background: var(--navy);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fee-table td {
  color: #3f4054;
  font-size: 15px;
  font-weight: 700;
}

.fee-table tr:last-child td {
  border-bottom: 0;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  counter-reset: process;
}

.process-step {
  counter-increment: process;
  padding: 27px;
  border: 1px solid rgba(17, 24, 95, 0.1);
  border-radius: 22px 22px 5px 22px;
  background: white;
}

.process-step::before {
  content: counter(process, decimal-leading-zero);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 15px 15px 4px 15px;
  color: var(--navy);
  background: var(--yellow);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 900;
}

.process-step h3 {
  margin-bottom: 8px;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 19px;
}

.process-step p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.contact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contact-card--inner a {
  display: inline-block;
  margin-top: 13px;
  color: var(--green);
  font-weight: 900;
}

.contact-panel {
  padding: 45px;
  border-radius: 30px 30px 8px 30px;
  background: white;
}

.map-card {
  min-height: 420px;
  display: grid;
  place-items: center;
  padding: 40px;
  border-radius: 30px 30px 8px 30px;
  color: white;
  background:
    linear-gradient(rgba(8, 13, 63, 0.86), rgba(8, 13, 63, 0.9)),
    url("../images/campus-2.webp") center / cover;
  text-align: center;
}

.map-card i {
  color: var(--yellow);
  font-size: 52px;
}

.map-card h3 {
  margin: 14px 0 8px;
  font-family: var(--font-heading);
  font-size: 28px;
}

.map-card p {
  max-width: 430px;
  color: rgba(255, 255, 255, 0.76);
  text-align: center;
}

.inner-cta {
  position: relative;
  overflow: hidden;
  padding-block: 68px;
  color: var(--navy-deep);
  background: var(--yellow);
}

.inner-cta::after {
  content: "";
  position: absolute;
  right: -100px;
  bottom: -170px;
  width: 350px;
  height: 350px;
  border: 50px solid rgba(17, 24, 95, 0.08);
  border-radius: 50%;
}

.inner-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.inner-cta h2 {
  max-width: 720px;
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.inner-cta p {
  max-width: 680px;
  margin: 0;
  color: rgba(8, 13, 63, 0.72);
  font-size: 15px;
}

.inner-cta__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
}

.inner-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 20px;
  border: 2px solid var(--navy-deep);
  border-radius: 13px 13px 3px 13px;
  color: white;
  background: var(--navy-deep);
  font-size: 13px;
  font-weight: 900;
}

.inner-button--outline {
  color: var(--navy-deep);
  background: transparent;
}

/* Outline and solid buttons need light styling on dark backgrounds. */
.map-card .inner-button--outline,
.page-section--navy .inner-button--outline,
.policy-aside .inner-button--outline {
  border-color: rgba(255, 255, 255, 0.85);
  color: white;
  background: rgba(255, 255, 255, 0.08);
}

.map-card .inner-button--outline:hover,
.page-section--navy .inner-button--outline:hover,
.policy-aside .inner-button--outline:hover {
  color: var(--navy-deep);
  background: white;
}

.page-section--navy .inner-button:not(.inner-button--outline):not(.form-submit) {
  border-color: var(--yellow);
  color: var(--navy-deep);
  background: var(--yellow);
}

.page-section--navy .inner-button:not(.inner-button--outline):not(.form-submit):hover {
  border-color: white;
  background: white;
}

.inner-button:hover {
  transform: translateY(-2px);
}

.form-panel {
  padding: 42px;
  border: 1px solid rgba(17, 24, 95, 0.1);
  border-radius: 30px 30px 8px 30px;
  background: white;
}

.form-panel__heading {
  max-width: 720px;
  margin-bottom: 28px;
}

.form-panel__heading h2 {
  margin: 10px 0 12px;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.form-panel__heading p,
.form-note,
.form-status {
  text-align: left;
}

.form-panel__heading p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.dummy-form {
  display: grid;
  gap: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.form-field {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field label {
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #dad9d2;
  border-radius: 12px 12px 3px 12px;
  color: var(--ink);
  background: #fbfaf6;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-field input,
.form-field select {
  height: 52px;
  padding: 0 15px;
}

.form-field textarea {
  min-height: 130px;
  resize: vertical;
  padding: 14px 15px;
  line-height: 1.55;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--green);
  background: white;
  box-shadow: 0 0 0 4px rgba(47, 126, 72, 0.1);
}

.form-field input[type="file"] {
  height: auto;
  padding: 12px 14px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.form-submit {
  border: 2px solid var(--navy);
  cursor: pointer;
}

.form-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.form-note i {
  margin-right: 5px;
  color: var(--green);
}

.form-status {
  display: none;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid rgba(47, 126, 72, 0.25);
  border-radius: 11px;
  color: #1f6438;
  background: #edf8f0;
  font-size: 13px;
  font-weight: 800;
}

.form-status.is-visible {
  display: block;
}

.career-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.career-benefit {
  padding: 24px 20px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px 20px 5px 20px;
  background: rgba(255, 255, 255, 0.07);
}

.career-benefit i {
  display: block;
  margin-bottom: 14px;
  color: var(--yellow);
  font-size: 25px;
}

.career-benefit h3 {
  margin-bottom: 8px;
  color: white;
  font-family: var(--font-heading);
  font-size: 18px;
}

.career-benefit p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.6;
}

/* Inner-page motion and interaction system */
@keyframes innerHeroRise {
  from {
    opacity: 0;
    translate: 0 24px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes innerScrollReveal {
  from {
    opacity: 0;
    translate: 0 28px;
    filter: blur(3px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    filter: none;
  }
}

.page-hero .breadcrumbs,
.page-hero__eyebrow,
.page-hero h1,
.page-hero p {
  animation: innerHeroRise 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.page-hero__eyebrow {
  animation-delay: 0.08s;
}

.page-hero h1 {
  animation-delay: 0.16s;
}

.page-hero p {
  animation-delay: 0.24s;
}

.motion-reveal {
  opacity: 0;
  translate: 0 28px;
  filter: blur(3px);
}

.motion-reveal.is-visible {
  animation: innerScrollReveal 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) var(--motion-delay, 0ms) both;
}

.split-media,
.facility-card,
.gallery-grid figure,
.stat-card,
.info-card,
.programme-card,
.person-card,
.policy-card,
.schedule-card,
.contact-card--inner,
.process-step,
.career-benefit,
.feature-panel,
.policy-aside,
.map-card,
.form-panel {
  transition:
    transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.36s ease,
    box-shadow 0.42s ease,
    background-color 0.36s ease;
}

.split-media img {
  transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s ease;
}

.split-media::before,
.split-media__badge {
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}

.info-card,
.programme-card,
.policy-card,
.schedule-card,
.contact-card--inner,
.process-step,
.career-benefit {
  position: relative;
  overflow: hidden;
}

.info-card__icon,
.programme-card__icon,
.contact-card__icon--inner,
.person-card__avatar,
.stat-card i,
.career-benefit i,
.map-card i {
  transition: transform 0.42s cubic-bezier(0.2, 0.85, 0.24, 1.3), color 0.3s ease, background-color 0.3s ease;
}

.stat-card strong {
  display: inline-block;
  transition: transform 0.35s ease, color 0.3s ease;
}

.timeline article,
.policy-list li,
.subject-list li,
.fee-table tbody tr {
  transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.inner-button,
.form-submit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.inner-button::before,
.form-submit::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px;
  background: linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, 0.58) 48%, transparent 78%);
  transform: translateX(-135%) skewX(-16deg);
  transition: transform 0.68s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.inner-button i,
.form-submit i,
.card-link i,
.policy-aside a i {
  display: inline-block;
  transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .split-media:hover {
    transform: translateY(-8px);
  }

  .split-media:hover img {
    transform: scale(1.025);
    filter: saturate(1.06) contrast(1.025);
  }

  .split-media:hover::before {
    transform: rotate(15deg) scale(1.06);
  }

  .split-media:hover .split-media__badge {
    transform: translate(-5px, -5px);
    box-shadow: 12px 12px 0 var(--yellow);
  }

  .stat-card:hover,
  .info-card:hover,
  .programme-card:hover,
  .person-card:hover,
  .policy-card:hover,
  .schedule-card:hover,
  .contact-card--inner:hover,
  .process-step:hover,
  .career-benefit:hover {
    z-index: 2;
    transform: translateY(-9px);
    border-color: rgba(242, 193, 78, 0.88);
    box-shadow: 0 22px 44px rgba(17, 24, 95, 0.15);
  }

  .page-section--navy .career-benefit:hover {
    background-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 22px 44px rgba(2, 5, 35, 0.32);
  }

  .stat-card:hover i,
  .info-card:hover .info-card__icon,
  .programme-card:hover .programme-card__icon,
  .contact-card--inner:hover .contact-card__icon--inner,
  .person-card:hover .person-card__avatar,
  .career-benefit:hover i,
  .map-card:hover i {
    transform: rotate(-8deg) scale(1.11);
  }

  .stat-card:hover strong {
    color: var(--red);
    transform: scale(1.06);
  }

  .facility-card:hover,
  .gallery-grid figure:hover {
    z-index: 2;
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 24px 48px rgba(17, 24, 95, 0.2);
  }

  .feature-panel:hover,
  .policy-aside:hover,
  .map-card:hover,
  .form-panel:hover {
    transform: translateY(-6px);
    border-color: rgba(242, 193, 78, 0.72);
    box-shadow: 0 22px 46px rgba(17, 24, 95, 0.13);
  }

  .timeline article:hover,
  .policy-list li:hover,
  .subject-list li:hover {
    transform: translateX(7px);
  }

  .fee-table tbody tr:hover {
    background-color: rgba(242, 193, 78, 0.11);
  }

  .inner-button:hover::before,
  .form-submit:hover::before {
    transform: translateX(135%) skewX(-16deg);
  }

  .inner-button:hover i:first-child,
  .form-submit:hover i:first-child {
    transform: rotate(-8deg) scale(1.12);
  }

  .card-link:hover i,
  .policy-aside a:hover i {
    transform: translateX(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero .breadcrumbs,
  .page-hero__eyebrow,
  .page-hero h1,
  .page-hero p {
    animation: none;
  }

  .motion-reveal,
  .motion-reveal.is-visible {
    opacity: 1;
    translate: 0 0;
    filter: none;
    animation: none;
    transition: none;
  }

  .inner-page *,
  .inner-page *::before,
  .inner-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Keep compact card copy readable without stretched spacing or broken words. */
.inner-page :is(
  .info-card,
  .programme-card,
  .person-card,
  .policy-card,
  .schedule-card,
  .contact-card--inner,
  .process-step,
  .career-benefit,
  .facility-card,
  .purpose-card
) p {
  text-align: left;
  text-justify: auto;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.inner-page .purpose-card--mission {
  transform: none;
}

@media (max-width: 1180px) {
  .multi-nav {
    gap: 5px;
  }

  .multi-nav > a,
  .nav-group__trigger {
    gap: 5px;
    font-size: 12px;
  }

  .multi-nav > a i,
  .nav-group__trigger i {
    font-size: 13px;
  }

  .programme-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .career-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inner-page .card-grid,
  .inner-page .purpose-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inner-page .purpose-card--values {
    grid-column: 1 / -1;
    min-height: auto;
  }
}

@media (max-width: 960px) {
  .split-layout,
  .policy-layout {
    grid-template-columns: 1fr;
  }

  .split-layout--reverse > :first-child {
    order: initial;
  }

  .stat-grid,
  .timeline,
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-grid,
  .facility-grid,
  .schedule-grid,
  .process-grid,
  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline::before {
    display: none;
  }

  .policy-aside {
    position: static;
  }

  .inner-cta__inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  .mobile-menu nav {
    width: min(330px, calc(100vw - 28px));
  }

  .page-hero {
    min-height: 330px;
    background-position: 58% center;
  }

  .page-hero__inner {
    padding-block: 50px;
  }

  .page-hero h1 {
    font-size: clamp(38px, 12vw, 52px);
  }

  .page-hero p {
    font-size: 15px;
    line-height: 1.6;
  }

  .page-section {
    padding-block: 58px;
  }

  .section-intro h2,
  .split-content h2,
  .feature-panel h2,
  .contact-panel h2 {
    font-size: clamp(29px, 9vw, 38px);
  }

  .section-intro p,
  .split-content > div > p,
  .feature-panel > p,
  .contact-panel > p {
    font-size: 15px;
    line-height: 1.65;
  }

  .split-media,
  .split-media img {
    min-height: 0;
    height: 330px;
  }

  .split-media__badge {
    right: 10px;
    bottom: 18px;
  }

  .stat-grid,
  .card-grid,
  .programme-grid,
  .people-grid,
  .facility-grid,
  .timeline,
  .schedule-grid,
  .process-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .feature-panel,
  .contact-panel {
    padding: 27px 22px;
  }

  .person-card {
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 22px;
  }

  .person-card__avatar {
    width: 58px;
    height: 58px;
    border-radius: 17px 17px 4px 17px;
    font-size: 16px;
  }

  .person-list,
  .subject-list {
    grid-template-columns: 1fr;
  }

  .facility-card {
    min-height: 370px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 260px;
  }

  .gallery-grid figure:nth-child(1),
  .gallery-grid figure:nth-child(6) {
    grid-column: auto;
    grid-row: auto;
  }

  .inner-cta__actions {
    width: 100%;
    flex-direction: column;
  }

  .inner-button {
    width: 100%;
  }

  .form-panel {
    padding: 27px 20px;
  }

  .form-grid,
  .career-benefits {
    grid-template-columns: 1fr;
  }

  .inner-page .card-grid,
  .inner-page .purpose-cards {
    grid-template-columns: 1fr;
  }

  .inner-page .purpose-card--values {
    grid-column: auto;
  }

  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .form-submit {
    width: 100%;
  }

  .fee-table th,
  .fee-table td {
    padding: 14px 15px;
  }
}
/* Homepage-scale typography for every inner page. */
.inner-page .page-hero p { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.72; }

.inner-page :is(.section-intro p, .split-content > div > p, .feature-panel > p, .contact-panel > p, .policy-aside p, .map-card p, .inner-cta p, .form-panel__heading p) {
  font-size: clamp(16.5px, 1.2vw, 19px);
  line-height: 1.75;
}

.inner-page :is(.info-card, .programme-card, .person-card, .policy-card, .schedule-card, .contact-card--inner) h3 {
  font-size: clamp(23px, 1.7vw, 27px);
  line-height: 1.22;
}

.inner-page :is(.info-card, .programme-card, .person-card, .policy-card, .schedule-card, .contact-card--inner, .process-step, .career-benefit, .facility-card, .purpose-card) p {
  font-size: clamp(16px, 1.1vw, 17.5px);
  line-height: 1.72;
}

.inner-page :is(.check-list, .feature-list, .policy-list) li { font-size: clamp(15.5px, 1.1vw, 17.5px); line-height: 1.65; }
.inner-page .subject-list li { padding: 9px 11px; font-size: clamp(13.5px, 0.95vw, 15px); line-height: 1.45; }

.inner-page .timeline h3, .inner-page .process-step h3, .inner-page .career-benefit h3 {
  font-size: clamp(21px, 1.45vw, 24px);
  line-height: 1.25;
}

.inner-page .timeline p { font-size: clamp(15.5px, 1.05vw, 17px); line-height: 1.7; }
.inner-page .person-card small, .inner-page .programme-card__range { font-size: clamp(11.5px, 0.8vw, 13px); }

.inner-page :is(.person-list span, .stat-card span, .contact-card--inner a, .policy-aside a, .card-link) {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55;
}

.inner-page .facility-card h3 { font-size: clamp(24px, 1.8vw, 29px); line-height: 1.18; }
.inner-page .fee-table th { font-size: clamp(12.5px, 0.9vw, 14px); }
.inner-page .fee-table td { font-size: clamp(15.5px, 1.05vw, 17px); line-height: 1.55; }
.inner-page .schedule-card__time { font-size: clamp(23px, 1.65vw, 27px); }
.inner-page .form-field label { font-size: clamp(13.5px, 0.95vw, 15px); }

.inner-page :is(.form-field input, .form-field select, .form-field textarea) {
  font: inherit;
  font-size: clamp(15px, 1vw, 16px);
}

.inner-page :is(.form-note, .form-status) { font-size: clamp(13.5px, 0.95vw, 15px); line-height: 1.6; }
.inner-page :is(.inner-button, .form-submit) { font-size: clamp(13.5px, 0.95vw, 15px); }

/* Larger, clearer labels for the shared desktop navigation. */
.multi-nav > a,
.nav-group__trigger {
  gap: 8px;
  font-size: 15px;
}

.multi-nav > a i,
.nav-group__trigger i {
  font-size: 17px;
}

@media (max-width: 1180px) {
  .multi-nav > a,
  .nav-group__trigger {
    gap: 6px;
    font-size: 13.5px;
  }

  .multi-nav > a i,
  .nav-group__trigger i {
    font-size: 15px;
  }
}

/* Compact, balanced responsibility and regulations sections. */
.inner-page .policy-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
  align-items: stretch;
  gap: 28px;
}

.inner-page .policy-layout > div {
  min-width: 0;
}

.inner-page .policy-layout .section-intro {
  grid-column: 1 / -1;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.inner-page .policy-layout .section-intro h2,
.inner-page .policy-layout .section-intro p {
  margin-inline: auto;
  text-align: center;
}

.inner-page .policy-layout .policy-list {
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 0;
}

.inner-page .policy-layout .policy-list li {
  min-height: 92px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 16px 16px 5px 16px;
}

.inner-page .policy-layout .policy-aside {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  top: auto;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 2.4vw, 38px);
  isolation: isolate;
  translate: none;
}

.inner-page .policy-layout .policy-aside::before {
  position: absolute;
  z-index: -1;
  right: -25px;
  bottom: -35px;
  width: 150px;
  height: 150px;
  border: 24px solid rgba(242, 193, 78, 0.1);
  border-radius: 50%;
  content: "";
}

.inner-page .policy-layout .policy-aside h3 {
  font-size: clamp(25px, 2vw, 31px);
}

@media (max-width: 960px) {
  .inner-page .policy-layout {
    grid-template-columns: 1fr;
  }

  .inner-page .policy-layout .policy-aside {
    grid-column: 1;
    grid-row: 3;
    min-height: 0;
  }

  .inner-page .policy-layout .policy-list {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (max-width: 620px) {
  .inner-page .policy-layout .policy-list {
    grid-template-columns: 1fr;
  }

  .inner-page .policy-layout .policy-list li {
    min-height: auto;
  }

  .inner-page .policy-layout .policy-aside {
    min-height: auto;
  }
}

/* ============================================================
   Inner-page design pass.
   The inner pages read flat next to the homepage: plain white
   cards, hairline borders, no depth. This block adds a rotating
   brand accent, resting depth and small ornaments. Styling only
   — no markup, layout or copy changes.
   ============================================================ */

.inner-page :is(
  .info-card,
  .programme-card,
  .person-card,
  .policy-card,
  .schedule-card,
  .contact-card--inner,
  .process-step,
  .stat-card
) {
  --accent: var(--green);
  --accent-soft: rgba(47, 126, 72, 0.11);
  --tab-x: 28px;
}

.inner-page :is(
  .info-card,
  .programme-card,
  .person-card,
  .policy-card,
  .schedule-card,
  .contact-card--inner,
  .process-step,
  .stat-card
):nth-child(5n + 2) {
  --accent: var(--navy);
  --accent-soft: rgba(17, 24, 95, 0.09);
}

.inner-page :is(
  .info-card,
  .programme-card,
  .person-card,
  .policy-card,
  .schedule-card,
  .contact-card--inner,
  .process-step,
  .stat-card
):nth-child(5n + 3) {
  --accent: var(--red);
  --accent-soft: rgba(215, 75, 50, 0.11);
}

.inner-page :is(
  .info-card,
  .programme-card,
  .person-card,
  .policy-card,
  .schedule-card,
  .contact-card--inner,
  .process-step,
  .stat-card
):nth-child(5n + 4) {
  --accent: var(--blue);
  --accent-soft: rgba(36, 85, 166, 0.11);
}

.inner-page :is(
  .info-card,
  .programme-card,
  .person-card,
  .policy-card,
  .schedule-card,
  .contact-card--inner,
  .process-step,
  .stat-card
):nth-child(5n + 5) {
  --accent: #c19226;
  --accent-soft: rgba(242, 193, 78, 0.22);
}

/* Accent tab along the top edge, soft wash beneath it, real depth. */
.inner-page :is(
  .info-card,
  .programme-card,
  .person-card,
  .policy-card,
  .schedule-card,
  .contact-card--inner,
  .process-step
) {
  border-color: rgba(17, 24, 95, 0.07);
  background:
    linear-gradient(var(--accent), var(--accent)) var(--tab-x) 0 / 62px 4px no-repeat,
    linear-gradient(180deg, var(--accent-soft), rgba(255, 255, 255, 0) 46%),
    white;
  box-shadow: 0 14px 32px rgba(17, 20, 95, 0.07);
}

.inner-page .programme-card {
  --tab-x: 20px;
}

.inner-page .process-step {
  --tab-x: 27px;
}

.inner-page .stat-card {
  --tab-x: 22px;
}

/* Outline ring bleeding off the bottom-right corner. */
.inner-page :is(
  .info-card,
  .programme-card,
  .person-card,
  .policy-card,
  .schedule-card,
  .contact-card--inner,
  .process-step,
  .stat-card
)::after {
  content: "";
  position: absolute;
  right: -36px;
  bottom: -36px;
  width: 104px;
  height: 104px;
  border: 22px solid var(--accent);
  border-radius: 50%;
  opacity: 0.09;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease;
}

.inner-page .stat-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(17, 24, 95, 0.07);
  background:
    linear-gradient(var(--accent), var(--accent)) var(--tab-x) 0 / 54px 4px no-repeat,
    linear-gradient(160deg, white 54%, var(--accent-soft)),
    white;
  box-shadow: 0 14px 30px rgba(17, 20, 95, 0.07);
}

.inner-page .stat-card i {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px 15px 4px 15px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 21px;
}

/* Icon tiles pick up the card accent instead of flat navy. */
.inner-page :is(
  .info-card__icon,
  .programme-card__icon,
  .contact-card__icon--inner,
  .person-card__avatar
) {
  background: linear-gradient(145deg, var(--navy) 18%, var(--accent) 128%);
  box-shadow: 0 10px 20px rgba(17, 20, 95, 0.16);
}

.inner-page .programme-card__range {
  color: var(--accent);
  background: var(--accent-soft);
}

.inner-page .schedule-card__time {
  color: var(--accent);
}

/* Section headings get a short brand rule under the title. */
.inner-page .section-intro h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 5px;
  margin-top: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--yellow), var(--red));
}

.inner-page .section-intro--center h2::after,
.inner-page .policy-layout .section-intro h2::after {
  margin-inline: auto;
}

.inner-page .page-section--navy .section-intro h2::after {
  background: linear-gradient(90deg, var(--yellow), rgba(242, 193, 78, 0.15));
}

/* Panels lift off the page instead of blending into it. */
.inner-page .page-section:not(.page-section--navy) :is(.feature-panel, .contact-panel),
.inner-page .form-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 95, 0.07);
  box-shadow: 0 18px 42px rgba(17, 20, 95, 0.07);
}

.inner-page .page-section:not(.page-section--navy) :is(.feature-panel, .contact-panel)::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -70px;
  width: 190px;
  height: 190px;
  border: 32px solid var(--yellow);
  border-radius: 50%;
  opacity: 0.12;
  pointer-events: none;
}

/* Numbered rules read as chips rather than loose digits. */
.inner-page .policy-list li {
  border-color: rgba(17, 24, 95, 0.07);
  box-shadow: 0 10px 24px rgba(17, 20, 95, 0.05);
}

.inner-page .policy-list li::before {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px 11px 3px 11px;
  color: var(--navy);
  background: var(--yellow-soft);
  font-size: 12px;
}

.inner-page :is(.subject-list li, .person-list span) {
  border: 1px solid rgba(17, 24, 95, 0.08);
  background: linear-gradient(160deg, white, #f7f6f1);
  box-shadow: 0 6px 14px rgba(17, 20, 95, 0.04);
}

/* Timeline: brighter connector and a lifted step marker. */
.inner-page .timeline::before {
  background: linear-gradient(
    90deg,
    rgba(242, 193, 78, 0.12),
    rgba(242, 193, 78, 0.8),
    rgba(242, 193, 78, 0.12)
  );
}

.inner-page .timeline article::before {
  box-shadow: 0 10px 22px rgba(17, 20, 95, 0.18);
}

/* Fee table: banded rows and a stronger first column. */
.inner-page .fee-table {
  box-shadow: 0 16px 36px rgba(17, 20, 95, 0.08);
}

.inner-page .fee-table tbody tr:nth-child(even) {
  background: #fcfbf6;
}

.inner-page .fee-table td:first-child {
  color: var(--navy);
  font-weight: 900;
}

.inner-page :is(.facility-card, .gallery-grid figure) {
  box-shadow: 0 16px 34px rgba(17, 20, 95, 0.1);
}

.inner-page .career-benefit {
  border-color: rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(var(--yellow), var(--yellow)) 20px 0 / 52px 4px no-repeat,
    linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
}

.inner-page .card-link {
  padding: 9px 14px;
  border-radius: 11px 11px 3px 11px;
  background: rgba(47, 126, 72, 0.09);
}

/* Plain white sections carry the same soft ambient wash as the homepage. */
.inner-page .page-section:not(.page-section--cream):not(.page-section--soft):not(.page-section--navy) {
  background:
    radial-gradient(circle at 4% 8%, rgba(242, 193, 78, 0.17), transparent 26%),
    radial-gradient(circle at 96% 92%, rgba(47, 126, 72, 0.1), transparent 24%),
    white;
}

/* Reassert hover on top of the new resting shadows. */
@media (hover: hover) and (pointer: fine) {
  .inner-page :is(
    .info-card,
    .programme-card,
    .person-card,
    .policy-card,
    .schedule-card,
    .contact-card--inner,
    .process-step,
    .stat-card,
    .career-benefit
  ):hover {
    border-color: rgba(242, 193, 78, 0.9);
    box-shadow: 0 26px 50px rgba(17, 24, 95, 0.16);
  }

  .inner-page :is(
    .info-card,
    .programme-card,
    .person-card,
    .policy-card,
    .schedule-card,
    .contact-card--inner,
    .process-step,
    .stat-card
  ):hover::after {
    opacity: 0.16;
    transform: translate(-8px, -8px) scale(1.1);
  }

  .inner-page :is(.facility-card, .gallery-grid figure):hover {
    box-shadow: 0 26px 52px rgba(17, 20, 95, 0.22);
  }
}

/* Keep card copy above the corner ornament. */
.inner-page :is(
  .info-card,
  .programme-card,
  .person-card,
  .policy-card,
  .schedule-card,
  .contact-card--inner,
  .process-step,
  .stat-card
)::after,
.inner-page .page-section:not(.page-section--navy) :is(.feature-panel, .contact-panel)::after {
  z-index: 0;
}

.inner-page :is(
  .info-card,
  .programme-card,
  .person-card,
  .policy-card,
  .schedule-card,
  .contact-card--inner,
  .process-step,
  .stat-card
) > *,
.inner-page .page-section:not(.page-section--navy) :is(.feature-panel, .contact-panel) > * {
  position: relative;
  z-index: 1;
}

/* Footer credit lockup for the site designer. */
.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* The EduWeb mark is dark artwork on white, so it sits on a white chip. */
.footer-credit__logo {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 10px;
  background: white;
}

.footer-credit img {
  display: block;
  width: auto;
  height: 38px;
}

/* Long school email addresses must wrap instead of overflowing. */
.footer-contact-line span,
.contact-card--inner a,
.contact__emails a strong {
  overflow-wrap: anywhere;
}

/* Labelled email rows on the contact page. */
.contact-card__mail {
  display: block;
  margin-top: 13px;
  color: var(--green);
  font-weight: 900;
  line-height: 1.35;
}

.contact-card__mail + .contact-card__mail {
  margin-top: 11px;
}

.contact-card__mail small {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-card__mail:hover {
  color: var(--red);
}

/* Supporting line under the footer intro paragraph. */
.footer-about > p.footer-about__more {
  margin-top: -4px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13.5px;
  line-height: 1.75;
}

/* Widen the contact column so the long school emails stay on one line. */
@media (min-width: 1250px) {
  .site-footer__grid {
    grid-template-columns:
      minmax(0, 1.5fr)
      minmax(0, 0.8fr)
      minmax(0, 0.9fr)
      minmax(372px, 1.25fr);
  }
}

/* Embedded Zoho enquiry forms (admissions, careers, contact). */
.zoho-form {
  --zoho-height: 1000px;
  position: relative;
}

.zoho-form__frame {
  display: block;
  width: 100%;
  height: var(--zoho-height);
  border: 0;
  border-radius: 18px 18px 4px 18px;
  background: white;
}

/* Heights measured from each live form, with headroom for validation messages. */
.zoho-form--admission { --zoho-height: 2260px; }
.zoho-form--career { --zoho-height: 2010px; }
.zoho-form--contact { --zoho-height: 1010px; }

.zoho-form__fallback {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.zoho-form__fallback i {
  margin-right: 8px;
  color: var(--green);
}

.zoho-form__fallback a {
  color: var(--green);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.zoho-form__fallback a:hover {
  color: var(--red);
}

@media (max-width: 700px) {
  .zoho-form--admission { --zoho-height: 2180px; }
  .zoho-form--career { --zoho-height: 1780px; }
  .zoho-form--contact { --zoho-height: 930px; }
}

/* Give the embedded form as much width as possible on small phones. */
@media (max-width: 480px) {
  .inner-page .form-panel:has(.zoho-form) {
    padding-inline: 12px;
  }
}

/* ---------------------------------------------------------------
   Delivery-audit fixes
   --------------------------------------------------------------- */

/* The last nav dropdown ran past the right viewport edge between
   992px and 1280px, clipping all four of its links. Anchor it to the
   trigger's right edge so it opens inward instead. */
.nav-group:last-of-type .nav-dropdown {
  left: auto;
  right: -18px;
}

/* Utility-bar contact links were 25px tall — below the 44px touch target.
   Scoped to the anchors only: a blanket `display` on spans overrode the
   mobile rule that hides .utility-address and crowded the bar. */
.utility-bar__contacts a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.utility-bar__contacts > span {
  white-space: nowrap;
}

/* Zoho forms grow when every "Required" message renders; the previous
   fixed heights pushed the Submit button outside the frame. Measured
   errored heights: admission 2374, career 2061, contact 1018 (desktop);
   2368 / 1857 / 996 at 306px wide. */
.zoho-form--admission { --zoho-height: 2500px; }
.zoho-form--career { --zoho-height: 2170px; }
.zoho-form--contact { --zoho-height: 1120px; }

@media (max-width: 700px) {
  .zoho-form--admission { --zoho-height: 2460px; }
  .zoho-form--career { --zoho-height: 1950px; }
  .zoho-form--contact { --zoho-height: 1060px; }
}

/* The Admissions page has no main-nav entry, so the utility-bar chip
   carries the active state instead. */
.admission-chip.active {
  box-shadow: inset 0 0 0 2px var(--yellow);
}

/* Hover feedback that was previously a no-op ------------------------- */

/* The header CTA only re-declared its resting colour, cancelling the
   utility-bar hover without substituting anything. */
.utility-bar .admission-chip:hover {
  color: var(--navy-deep);
  background: #ffd166;
  box-shadow: 0 6px 16px rgba(8, 13, 63, 0.28);
}

/* The current page's menu item matched its own hover state exactly. */
.nav-dropdown a.active:hover,
.multi-nav > a.active:hover {
  background: var(--yellow);
  color: var(--navy-deep);
}

/* Homepage inline CTA had cursor:pointer but no :hover rule at all. */
.text-link {
  transition: color 0.25s ease;
}

.text-link:hover {
  color: var(--red);
}

/* Colour/background hover on these ran instantly while the card beneath
   them eased over 0.36-0.42s. */
.inner-button,
.card-link,
.contact-card__mail,
.footer-contact-line,
.site-footer nav a {
  transition: color 0.25s ease, background-color 0.25s ease,
    border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Identical-looking panels hovered on navy sections but not light ones. */
@media (hover: hover) and (pointer: fine) {
  .page-section:not(.page-section--navy) .feature-panel:hover {
    border-color: rgba(242, 193, 78, 0.72);
    box-shadow: 0 22px 46px rgba(17, 24, 95, 0.13);
  }
}

/* Component consistency --------------------------------------------- */

/* "Open Map" was stretched to 123px by its flex parent; every other
   .inner-button measures 58.3px. */
.map-card .inner-button {
  align-self: center;
  flex: 0 0 auto;
}

/* Card CTAs sat at different heights when copy wrapped to a third line. */
.info-card,
.programme-card,
.policy-card,
.schedule-card,
.contact-card--inner {
  display: flex;
  flex-direction: column;
}

.info-card > .card-link,
.programme-card > .card-link,
.policy-card > .card-link,
.schedule-card > .card-link {
  margin-top: auto;
  align-self: flex-start;
}

/* These three h3s inherited the 1.75 body line-height; every other
   heading on the site sits between 1.15 and 1.22. */
.policy-aside h3,
.map-card h3,
.feature-panel h3 {
  line-height: 1.18;
}

/* Justified text in a 320px column produced visible rivers. */
.site-footer p,
.footer-contact-line,
.footer-about__more,
.site-footer__bottom p {
  text-align: left;
}

/* Floating controls were 38px on phones, below the 44px touch target. */
@media (max-width: 700px) {
  .floating-actions a,
  .back-to-top {
    width: 44px;
    height: 44px;
  }
}

/* .map-card i sets font-size:52px for the big map glyph; that also hit the
   arrow inside the CTA and stretched the button to 123px. */
.map-card .inner-button i {
  font-size: 1em;
}

/* Mobile top bar: keep every item on one line ----------------------- */
@media (max-width: 700px) {
  .utility-bar__inner {
    gap: 10px;
  }

  .utility-bar__contacts {
    min-width: 0;
    gap: 12px;
  }

  /* The address is hidden at this width by design; restate it here so a
     later display rule cannot resurrect it. */
  .utility-bar .utility-address,
  .utility-bar__contacts a[href^="mailto"] {
    display: none;
  }

  .utility-bar__contacts a,
  .admission-chip {
    white-space: nowrap;
  }
}

/* Trust rail: one card per row on mobile ---------------------------- */
@media (max-width: 700px) {
  .trust-rail__grid {
    grid-template-columns: 1fr;
  }

  .trust-rail article,
  .trust-rail article:nth-child(odd),
  .trust-rail article:nth-child(-n + 2) {
    min-height: 0;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-right: 0;
    border-bottom: 1px solid rgba(17, 20, 95, 0.17);
  }

  .trust-rail article:last-child {
    border-bottom: 0;
  }

  .trust-rail__icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    font-size: 17px;
  }

  .trust-rail strong {
    font-size: 15px;
    line-height: 1.3;
  }

  .trust-rail article div span {
    font-size: 13.5px;
    line-height: 1.4;
  }
}

/* Gallery mosaic: repeat the feature-tile rhythm every 10 items so it keeps
   working as photos are added, instead of only enlarging the first two. */
.gallery-grid figure:nth-child(10n + 1),
.gallery-grid figure:nth-child(10n + 6) {
  grid-column: span 2;
  grid-row: span 2;
}

@media (max-width: 700px) {
  .gallery-grid figure:nth-child(10n + 1),
  .gallery-grid figure:nth-child(10n + 6) {
    grid-column: auto;
    grid-row: auto;
  }
}

/* The .com addresses are 40 characters; at 16px they wrapped to a second
   line in the footer column. 15px keeps each on one line. */
.footer-contact a[href^="mailto"] span {
  font-size: 15px;
}

/* Between the mobile stack and the wide 4-column footer there is not enough
   room for a 40-character address beside three link columns, so the contact
   block takes a full row of its own. */
@media (min-width: 961px) and (max-width: 1249px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .footer-contact {
    grid-column: 1 / -1;
  }

  .footer-contact > a,
  .footer-contact > p {
    max-width: 420px;
  }
}

@media (max-width: 700px) {
  .footer-contact a[href^="mailto"] span {
    font-size: 13.5px;
  }
}

@media (max-width: 359px) {
  .footer-contact a[href^="mailto"] span {
    font-size: 12.5px;
  }
}

/* Footer columns were stretching their own content to the tallest column,
   which pushed ~86px gaps between the Quick Links / Academics entries.
   Pack every column from the top with one consistent rhythm instead. */
.site-footer nav {
  flex: 0 0 auto;
  align-content: start;
  gap: 14px;
}

.footer-contact > a,
.footer-contact > p {
  margin-bottom: 15px;
}

.footer-facts {
  margin-top: 14px;
}

.site-footer__grid > * {
  align-content: start;
}

/* ---------------------------------------------------------------
   Long-form content components for the school's own copy
   --------------------------------------------------------------- */

/* Committee roster */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.roster-card {
  position: relative;
  overflow: hidden;
  padding: 26px 24px;
  border: 1px solid rgba(17, 24, 95, 0.07);
  border-radius: 24px 24px 6px 24px;
  background:
    linear-gradient(var(--green), var(--green)) 24px 0 / 62px 4px no-repeat,
    white;
  box-shadow: 0 14px 32px rgba(17, 20, 95, 0.07);
}

.roster-card:nth-child(5n + 2) { background-image: linear-gradient(var(--navy), var(--navy)), none; }
.roster-card:nth-child(5n + 3) { background-image: linear-gradient(var(--red), var(--red)), none; }
.roster-card:nth-child(5n + 4) { background-image: linear-gradient(var(--blue), var(--blue)), none; }
.roster-card:nth-child(5n + 5) { background-image: linear-gradient(#c19226, #c19226), none; }

.roster-card h3 {
  margin-bottom: 14px;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.roster-card ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roster-card li {
  padding-left: 16px;
  position: relative;
  color: #3f4054;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
}

.roster-card li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
}

/* Leadership profiles with the full biography text */
.leader-list {
  display: grid;
  gap: 22px;
}

.leader-profile {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border: 1px solid rgba(17, 24, 95, 0.07);
  border-radius: 26px 26px 6px 26px;
  background: white;
  box-shadow: 0 14px 32px rgba(17, 20, 95, 0.07);
}

.leader-profile__head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 18px;
}

.leader-profile__avatar {
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 20px 20px 5px 20px;
  color: var(--yellow);
  background: linear-gradient(145deg, var(--navy) 18%, var(--green) 128%);
  box-shadow: 0 10px 20px rgba(17, 20, 95, 0.16);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 900;
}

.leader-profile__head small {
  display: block;
  margin-bottom: 5px;
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.leader-profile__head h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: clamp(21px, 1.6vw, 26px);
  font-weight: 800;
  line-height: 1.22;
}

.leader-profile__quals {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.leader-profile > p {
  margin: 0;
  color: #3f4054;
  font-size: clamp(16px, 1.1vw, 17.5px);
  line-height: 1.8;
}

.leader-profile .person-list {
  margin-top: 20px;
}

@media (max-width: 960px) {
  .roster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .roster-grid {
    grid-template-columns: 1fr;
  }

  .leader-profile {
    padding: 24px 20px;
  }

  .leader-profile__head {
    gap: 14px;
  }

  .leader-profile__avatar {
    width: 54px;
    height: 54px;
    font-size: 17px;
  }
}

/* Class-wise subject lists */
.subject-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.subject-card {
  position: relative;
  overflow: hidden;
  padding: 24px 22px;
  border: 1px solid rgba(17, 24, 95, 0.07);
  border-radius: 22px 22px 5px 22px;
  background: white;
  box-shadow: 0 12px 28px rgba(17, 20, 95, 0.06);
}

.subject-card h3 {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--yellow);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 900;
}

.subject-card .subject-list {
  grid-template-columns: 1fr;
  margin: 0;
  gap: 7px;
}

@media (max-width: 1120px) {
  .subject-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .subject-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .subject-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------
   Lists that sit directly in a full-width section must spread across
   the container. Left in a single column they left a wide empty band
   down the right-hand side of the page.
   --------------------------------------------------------------- */
.page-section > .container > .check-list,
.page-section > .container > .feature-list,
.page-section > .container > .policy-list {
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px 40px;
  margin-top: 8px;
}

/* Headings above those lists should span the same width, not 760px. */
.page-section > .container > .section-intro:not(.section-intro--center) {
  max-width: none;
}

.page-section > .container > .section-intro:not(.section-intro--center) > p {
  max-width: 900px;
}

@media (max-width: 700px) {
  .page-section > .container > .check-list,
  .page-section > .container > .feature-list,
  .page-section > .container > .policy-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* A second container inside the same section needs its own top gap. */
.why-grid-wrap {
  margin-top: 42px;
}

/* Short lists looked scattered when auto-fit spread 2-4 items over 3 tracks.
   Give them two even columns; only longer lists use the wider auto-fit. */
.page-section > .container > .check-list:not(:has(> li:nth-child(5))),
.page-section > .container > .feature-list:not(:has(> li:nth-child(5))),
.page-section > .container > .policy-list:not(:has(> li:nth-child(5))) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
  .page-section > .container > .check-list:not(:has(> li:nth-child(5))),
  .page-section > .container > .feature-list:not(:has(> li:nth-child(5))),
  .page-section > .container > .policy-list:not(:has(> li:nth-child(5))) {
    grid-template-columns: 1fr;
  }
}

/* <figure> carries a UA default margin of 1em 40px, which inset every
   split-media image - most visibly on phones, where it lost 80px of an
   already narrow column. */
.split-media {
  margin: 0;
}

/* Event posters. These are school-designed announcement cards carrying
   headlines and captions, so they cannot go through the photo mosaic, whose
   fixed 220px tiles cover-crop everything to landscape. Balanced masonry
   columns show each poster whole at its own aspect ratio. */
.poster-wall {
  column-count: 3;
  column-gap: 20px;
  margin-top: 34px;
}

.poster-wall figure {
  margin: 0 0 20px;
  break-inside: avoid;
  overflow: hidden;
  border-radius: 20px 20px 5px 20px;
  background: #fff;
  border: 1px solid rgba(17, 20, 95, 0.1);
  box-shadow: 0 12px 26px rgba(17, 20, 95, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.poster-wall img {
  display: block;
  width: 100%;
  height: auto;
}

@media (hover: hover) {
  .poster-wall figure:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(17, 20, 95, 0.16);
  }
}

@media (max-width: 960px) {
  .poster-wall {
    column-count: 2;
  }
}

@media (max-width: 700px) {
  .poster-wall {
    column-count: 1;
    column-gap: 0;
  }
}