:root {
  --base: #0d3d91;
  --base-dark: #071f4f;
  --base-bright: #1466d8;
  --sky: #eaf4ff;
  --accent: #ffd230;
  --accent-deep: #f2b800;
  --coral: #f05a49;
  --cream: #fff9ec;
  --paper: #ffffff;
  --ink: #15233b;
  --muted: #66728a;
  --line: #dce6f2;
  --shadow: 0 18px 50px rgba(7, 31, 79, 0.14);
  --shadow-small: 0 10px 24px rgba(7, 31, 79, 0.12);
  --radius: 24px;
  --header-content-width: 1200px;
  --font-display: "Montserrat", Arial, sans-serif;
  --font-body: "Nunito Sans", "Noto Sans Tamil", Arial, sans-serif;
  --font-script: "Caveat", cursive;
  --font-tamil: "Noto Sans Tamil", "Nunito Sans", Arial, sans-serif;
}

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

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

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

[lang="ta"] {
  font-family: var(--font-tamil);
}

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

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

svg {
  display: block;
}

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

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

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

.section {
  padding: 82px 0;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  padding: 10px 16px;
  color: white;
  background: var(--base-dark);
  border-radius: 6px;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: none;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--base);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 28px;
  height: 4px;
  content: "";
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}

.eyebrow.has-icon::before {
  display: none;
}

.eyebrow-icon {
  display: inline-grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #fff;
  background: var(--base);
  border-radius: 4px 13px 4px 13px;
  box-shadow: 4px 4px 0 var(--accent);
}

.eyebrow-icon.activity-icon,
.eyebrow-icon.icon-coral {
  background: var(--coral);
  box-shadow: 4px 4px 0 #ffd6d0;
}

.eyebrow-icon.icon-gold {
  color: var(--base-dark);
  background: var(--accent);
  box-shadow: 4px 4px 0 var(--coral);
}

.eyebrow-icon svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.eyebrow.light {
  color: #dceaff;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.12;
}

h2 {
  margin-bottom: 24px;
  font-size: clamp(1.9rem, 3.1vw, 2.9rem);
  letter-spacing: -0.025em;
}

h2 span,
.light-heading h2 span {
  color: var(--coral);
}

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

.section-heading.centered {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.section-heading.centered .eyebrow {
  justify-content: center;
}

.section-heading.centered > p:last-child {
  max-width: 650px;
  margin: -10px auto 0;
  color: var(--muted);
}

.heading-split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 70px;
  align-items: end;
}

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

.heading-split > p {
  margin-bottom: 8px;
  padding-left: 24px;
  color: var(--muted);
  border-left: 4px solid var(--accent);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 24px;
  border: 2px solid transparent;
  border-radius: 6px 18px 6px 18px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button::after {
  margin-left: 10px;
  content: "→";
  font-size: 1.05em;
  transition: transform 180ms ease;
}

.button:hover::after,
.button:focus-visible::after {
  transform: translateX(4px);
}

.button:hover,
.button:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(7, 31, 79, 0.2);
}

.button-primary {
  color: #fff;
  background: var(--coral);
}

.button-yellow {
  color: var(--base-dark);
  background: var(--accent);
}

.button-ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.7);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--base);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.text-link span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--base-dark);
  background: var(--accent);
  border-radius: 50%;
  transition: transform 180ms ease;
}

.text-link:hover span {
  transform: translateX(5px);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-top: 0;
  border-bottom: 1px solid #dbe4f1;
  box-shadow: 0 8px 28px rgba(7, 31, 79, 0.1);
}

.topbar {
  color: #dbe8ff;
  background: var(--base-dark);
  border-top: 3px solid var(--accent);
}

.topbar-inner {
  display: flex;
  width: min(var(--header-content-width), calc(100% - 28px));
  min-height: 44px;
  margin-inline: auto;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.topbar-contact,
.topbar-right,
.topbar-contact a,
.admission-open,
.topbar-socials {
  display: flex;
  align-items: center;
}

.topbar-contact,
.topbar-right {
  gap: 14px;
}

.topbar-contact a,
.admission-open {
  gap: 7px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.topbar-contact a:hover,
.topbar-contact a:focus-visible {
  color: #fff;
}

.topbar-contact svg,
.admission-open svg {
  width: 14px;
  height: 14px;
  fill: var(--accent);
}

.topbar-phone b {
  color: var(--accent);
}

.topbar-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.22);
}

.admission-open {
  padding: 5px 12px;
  color: var(--base-dark);
  background: var(--accent);
  border-radius: 3px 11px 3px 11px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.admission-open svg {
  fill: var(--coral);
  transition: fill 200ms ease, transform 240ms cubic-bezier(.2, .8, .2, 1);
}

.topbar-socials {
  gap: 6px;
}

.topbar-socials a,
.footer-socials a {
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.topbar-socials a {
  width: 25px;
  height: 25px;
}

.topbar-socials a:hover,
.topbar-socials a:focus-visible,
.footer-socials a:hover,
.footer-socials a:focus-visible {
  color: var(--base-dark);
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.topbar-socials svg,
.footer-socials svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.school-navbar {
  background: rgba(255, 255, 255, 0.98);
}

.navbar-shell {
  display: grid;
  width: min(var(--header-content-width), calc(100% - 28px));
  min-height: 132px;
  margin-inline: auto;
  grid-template-columns: minmax(280px, 1fr) minmax(410px, 470px) minmax(280px, 1fr);
  gap: clamp(14px, 1.4vw, 26px);
  align-items: center;
}

.navbar-group {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.3vw, 28px);
}

.navbar-left {
  justify-content: flex-end;
}

.navbar-right {
  justify-content: flex-start;
}

.navbar-group a,
.navbar-mobile-links a {
  position: relative;
  padding: 13px 0;
  color: #111827;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: color 180ms ease;
}

.navbar-group a::after,
.navbar-mobile-links a::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 3px;
  content: "";
  background: var(--coral);
  border-radius: 99px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.navbar-group a:hover,
.navbar-group a:focus-visible,
.navbar-mobile-links a:hover,
.navbar-mobile-links a:focus-visible,
.navbar-group a.active,
.navbar-mobile-links a.active {
  color: var(--base);
}

.navbar-group a:hover::after,
.navbar-group a:focus-visible::after,
.navbar-mobile-links a:hover::after,
.navbar-mobile-links a:focus-visible::after,
.navbar-group a.active::after,
.navbar-mobile-links a.active::after {
  transform: scaleX(1);
}

.navbar-brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  align-self: stretch;
  padding: 12px 22px 10px;
  text-align: center;
}

.navbar-brand::before,
.navbar-brand::after {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 70px;
  content: "";
  background-image:
    linear-gradient(transparent, #c8d6ea, transparent),
    linear-gradient(transparent 35%, #62c7ff 47%, #fff 50%, #62c7ff 53%, transparent 65%);
  background-repeat: no-repeat;
  background-position: center, center -140%;
  background-size: 100% 100%, 100% 240%;
  filter: drop-shadow(0 0 3px rgba(20, 102, 216, 0.45));
  transform: translateY(-50%);
  animation: logo-line-shimmer 2.8s ease-in-out infinite;
}

.navbar-brand::before {
  left: 0;
}

.navbar-brand::after {
  right: 0;
  animation-delay: -1.4s;
}

@keyframes logo-line-shimmer {
  0% {
    background-position: center, center -140%;
    filter: drop-shadow(0 0 2px rgba(20, 102, 216, 0.28));
  }

  50% {
    filter: drop-shadow(0 0 6px rgba(20, 102, 216, 0.85));
  }

  100% {
    background-position: center, center 140%;
    filter: drop-shadow(0 0 2px rgba(20, 102, 216, 0.28));
  }
}

.navbar-brand img {
  width: auto;
  height: 96px;
  flex: none;
  object-fit: contain;
}

.brand-text {
  display: grid;
  gap: 3px;
  text-align: left;
}

.brand-text b {
  display: grid;
  color: var(--base-dark);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.08;
  text-transform: uppercase;
}

.brand-text b em {
  color: var(--base);
  font-size: 0.78em;
  font-style: normal;
  letter-spacing: 0.06em;
}

.brand-text small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.brand-text small i {
  padding-inline: 4px;
  color: var(--coral);
  font-style: normal;
}

.navbar-mobile-links {
  display: none;
}

/* Shared dropdown treatment also keeps the home page correct, where only the
   global stylesheet is loaded. */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 13px 0;
  color: #111827;
  background: transparent;
  border: 0;
  font: 700 0.95rem/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}

.nav-dropdown-arrow {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}

.nav-dropdown-toggle::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 3px;
  content: "";
  background: var(--coral);
  border-radius: 99px;
  transform: scaleX(0);
  transition: transform 180ms ease;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown-toggle.active {
  color: var(--base);
}

.nav-dropdown-toggle:hover::after,
.nav-dropdown-toggle:focus-visible::after,
.nav-dropdown-toggle.active::after {
  transform: scaleX(1);
}

.nav-dropdown:hover .nav-dropdown-arrow,
.nav-dropdown:focus-within .nav-dropdown-arrow,
.nav-dropdown.is-open .nav-dropdown-arrow {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 20;
  display: grid;
  width: max-content;
  min-width: 250px;
  padding: 10px;
  visibility: hidden;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #dce7f6;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(7, 31, 79, 0.17);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}

.navbar-group .nav-dropdown-menu a {
  padding: 12px 15px;
  color: var(--base-dark);
  border-radius: 9px;
  /* same size as the primary nav links */
  font-size: 0.95rem;
  line-height: 1.25;
}

.navbar-group .nav-dropdown-menu a::after {
  display: none;
}

.navbar-group .nav-dropdown-menu a:hover,
.navbar-group .nav-dropdown-menu a:focus-visible,
.navbar-group .nav-dropdown-menu a.active {
  color: var(--base);
  background: #eef5ff;
}

.navbar-menu-toggle,
.mobile-sidebar,
.sidebar-overlay {
  display: none;
}

.contact-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #fff;
  background: var(--base);
  border-radius: 5px 15px 5px 15px;
  box-shadow: 5px 5px 0 var(--accent);
}

.contact-icon svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
}

/* Hero */
.hero {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--base-dark);
}

.hero-banner {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Welcome */
.welcome {
  position: relative;
  background:
    linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)),
    radial-gradient(circle at 10% 10%, var(--sky) 0 4px, transparent 5px);
  background-size: auto, 28px 28px;
}

.welcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
}

.welcome-visual {
  position: relative;
}

.welcome-visual::before {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 84%;
  height: 400px;
  content: "";
  background: var(--accent);
  clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
}

.photo-primary {
  position: relative;
  display: block;
  width: 90%;
  height: 500px;
  margin: 10px 0 0;
  object-fit: cover;
  border: 8px solid #fff;
  box-shadow: var(--shadow);
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}

.year-seal {
  position: absolute;
  bottom: 42px;
  left: -22px;
  z-index: 2;
  display: grid;
  width: 148px;
  height: 148px;
  place-content: center;
  color: #fff;
  background: var(--base);
  border: 7px solid #fff;
  border-radius: 50%;
  outline: 3px dashed var(--accent);
  outline-offset: -15px;
  box-shadow: var(--shadow-small);
  text-align: center;
}

.year-seal span {
  font-family: var(--font-display);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
}

/* the town name is the widest line, so it is sized to sit inside the dashed
   ring rather than run past it */
.year-seal small {
  font-family: var(--font-display);
  font-size: 0.54rem;
  letter-spacing: 0.04em;
}

.year-seal strong {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
}

/* "Ithu namma school" campaign banner under the welcome grid. Wide artwork,
   so it is cropped to a strip rather than shown at its full 1.91 aspect. No
   transition or animation on it: it is an image. */
.namma-banner {
  /* overlays the campus photo's top-right, mirroring the year seal bottom-left */
  position: absolute;
  top: -18px;
  right: -16px;
  z-index: 2;
  width: 58%;
  margin: 0;
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 6px 22px 6px 22px;
  box-shadow: var(--shadow);
}

.namma-banner img {
  display: block;
  width: 100%;
  /* overrides the height attribute, which would otherwise beat aspect-ratio */
  height: auto;
  /* the badge fills 75% of the artwork's height and sits at 55% down, so this
     is the widest strip that still shows all of it */
  aspect-ratio: 2.55 / 1;
  object-fit: cover;
  object-position: center 55%;
}

.welcome-copy .lead {
  color: var(--base-dark);
  font-size: 1.14rem;
  font-weight: 600;
}

.welcome-copy > p:not(.eyebrow) {
  color: var(--muted);
}

.promise-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 30px 0 28px;
}

.promise-strip > div {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 154px;
  padding: 18px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: linear-gradient(145deg, #f8fbff, #e8f3ff);
  border: 1px solid rgba(13, 61, 145, 0.1);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(7, 31, 79, 0.09);
  isolation: isolate;
  overflow: hidden;
}

.promise-strip > div::after {
  position: absolute;
  top: -32px;
  right: -30px;
  z-index: -1;
  width: 90px;
  height: 90px;
  content: "";
  background: rgba(20, 102, 216, 0.08);
  border-radius: 50%;
}

.promise-strip > div:nth-child(2) {
  background: linear-gradient(145deg, #fffdf5, #fff5d6);
  border-color: rgba(242, 184, 0, 0.16);
}

.promise-strip > div:nth-child(2)::after {
  background: rgba(242, 184, 0, 0.12);
}

.promise-strip > div:nth-child(3) {
  background: linear-gradient(145deg, #fffafa, #ffebe7);
  border-color: rgba(240, 90, 73, 0.14);
}

.promise-strip > div:nth-child(3)::after {
  background: rgba(240, 90, 73, 0.1);
}

.promise-strip .promise-icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  place-items: center;
  color: #fff;
  background: var(--base);
  border-radius: 12px;
  box-shadow: 0 7px 16px rgba(13, 61, 145, 0.22);
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.promise-strip > div:nth-child(2) .promise-icon {
  color: var(--base-dark);
  background: var(--accent);
  box-shadow: 0 7px 16px rgba(242, 184, 0, 0.24);
}

.promise-strip > div:nth-child(3) .promise-icon {
  background: var(--coral);
  box-shadow: 0 7px 16px rgba(240, 90, 73, 0.22);
}

.promise-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.promise-copy {
  display: grid;
}

.promise-strip b {
  color: var(--base-dark);
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
}

.promise-strip small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

/* Vision */
.vision-band {
  position: relative;
  color: #fff;
  background: var(--base-dark);
  overflow: hidden;
}

.vision-band::before,
.vision-band::after {
  position: absolute;
  content: "";
  opacity: 0.13;
  border: 2px solid var(--accent);
  transform: rotate(45deg);
}

.vision-band::before {
  top: -130px;
  left: -90px;
  width: 300px;
  height: 300px;
  animation: vision-shape-float 10s ease-in-out infinite alternate;
}

.vision-band::after {
  right: -120px;
  bottom: -170px;
  width: 390px;
  height: 390px;
  animation: vision-shape-float 13s 1s ease-in-out infinite alternate-reverse;
}

.light-heading h2 span,
.vision-band h2 span,
.achievement-band h2 span,
.why-us h2 span {
  color: var(--accent);
}

.vision-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.vision-card {
  --card-accent: var(--base-bright);
  --card-glow: rgba(20, 102, 216, 0.2);
  position: relative;
  min-height: 360px;
  padding: 36px 32px 30px;
  color: var(--ink);
  background: #fff;
  border-radius: 8px 34px 8px 34px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
}

.vision-card::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.82) 50%, transparent 68%);
  pointer-events: none;
  transform: translateX(-135%);
  transition: transform 760ms cubic-bezier(.2, .75, .25, 1);
}

.vision-card::after {
  position: absolute;
  right: -55px;
  bottom: -55px;
  width: 130px;
  height: 130px;
  content: "";
  background: var(--card-accent);
  opacity: 0.07;
  transform: rotate(45deg);
  transition: opacity 360ms ease, transform 500ms cubic-bezier(.2, .8, .2, 1);
}

.vision-card > * {
  position: relative;
  z-index: 2;
}

.vision-card-blue {
  border-top: 9px solid var(--base-bright);
}

.vision-card-yellow {
  --card-accent: var(--accent-deep);
  --card-glow: rgba(242, 184, 0, 0.22);
  border-top: 9px solid var(--accent);
}

.vision-card-coral {
  --card-accent: var(--coral);
  --card-glow: rgba(240, 90, 73, 0.2);
  border-top: 9px solid var(--coral);
}

.card-icon {
  position: relative;
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 24px;
  place-items: center;
  color: #fff;
  background: var(--base);
  border-radius: 16px;
  box-shadow: 4px 5px 0 rgba(255, 210, 48, 0.72);
}

.card-icon::before {
  position: absolute;
  inset: -7px;
  content: "";
  border: 1px solid var(--card-accent);
  border-radius: 20px;
  opacity: 0;
  transform: scale(0.72) rotate(8deg);
  transition: opacity 280ms ease, transform 380ms cubic-bezier(.2, .8, .2, 1);
}

.vision-card-yellow .card-icon {
  color: var(--base-dark);
  background: var(--accent);
  box-shadow: 4px 5px 0 rgba(13, 61, 145, 0.72);
}

.vision-card-coral .card-icon {
  background: var(--coral);
  box-shadow: 4px 5px 0 rgba(255, 215, 209, 0.9);
}

.card-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vision-card h3 {
  margin-bottom: 14px;
  color: var(--base-dark);
  font-size: 1.4rem;
  text-transform: uppercase;
  transition: color 260ms ease, transform 260ms ease;
}

.vision-card p {
  margin-bottom: 0;
  color: var(--muted);
}

@keyframes vision-shape-float {
  from {
    transform: translate3d(0, 0, 0) rotate(45deg);
  }

  to {
    transform: translate3d(26px, -18px, 0) rotate(55deg);
  }
}

/* Academics */
.academics {
  background: var(--cream);
}

.pathway-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: center;
}

.pathway-card {
  position: relative;
  min-height: 450px;
  background: #fff;
  border-radius: 7px 30px 7px 30px;
  overflow: hidden;
  box-shadow: var(--shadow-small);
}

.pathway-card:hover {
  box-shadow: var(--shadow);
}

.pathway-card.featured {
  transform: translateY(-16px);
  border: 5px solid var(--accent);
}

.pathway-card img {
  width: 100%;
  height: 275px;
  object-fit: cover;
}

.pathway-label {
  position: absolute;
  top: 18px;
  left: 0;
  z-index: 1;
  padding: 7px 23px 7px 18px;
  color: #fff;
  background: var(--coral);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

.pathway-copy {
  position: relative;
  padding: 24px 25px 28px;
}

.pathway-copy::before {
  position: absolute;
  top: -16px;
  left: 0;
  width: 62%;
  height: 16px;
  content: "";
  background: #fff;
  clip-path: polygon(0 100%, 100% 100%, 88% 0, 0 0);
}

.pathway-copy p {
  margin-bottom: 4px;
  color: var(--coral);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pathway-copy h3 {
  margin-bottom: 8px;
  color: var(--base-dark);
  font-size: 1.45rem;
}

.pathway-copy span {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

.ilearn-strip {
  display: grid;
  grid-template-columns: 180px 1fr;
  margin-top: 52px;
  color: #fff;
  background: var(--base);
  border-radius: 7px 28px 7px 28px;
  overflow: hidden;
  box-shadow: var(--shadow-small);
}

.ilearn-title {
  display: grid;
  padding: 20px 28px;
  color: var(--base-dark);
  background: var(--accent);
  align-content: center;
  clip-path: polygon(0 0, 100% 0, 83% 100%, 0 100%);
}

.ilearn-title span,
.ilearn-title small {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ilearn-title strong {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1;
}

.ilearn-strip ol {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 0;
  padding: 17px 20px 17px 4px;
  list-style: none;
}

.ilearn-strip li {
  position: relative;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  isolation: isolate;
  overflow: hidden;
}

.ilearn-strip li::before {
  position: absolute;
  inset: 4px;
  z-index: -1;
  content: "";
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(98, 199, 255, 0.1)),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 24px rgba(0, 0, 0, 0.14);
  opacity: 0;
  transform: scale(0.9);
  backdrop-filter: blur(10px) saturate(1.25);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(.2, .8, .2, 1);
}

.ilearn-strip li::after {
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -55%;
  z-index: -1;
  width: 35%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  opacity: 0;
  transform: skewX(-22deg);
  transition: left 560ms ease, opacity 180ms ease;
}

.ilearn-strip li:last-child {
  border-right: 0;
}

.ilearn-strip li b {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
}

.ilearn-strip li span {
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: center;
}

/* Why */
.why-us {
  position: relative;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(7, 31, 79, 0.97), rgba(13, 61, 145, 0.96)),
    url("../images/campus-3.webp") center / cover;
  overflow: hidden;
}

.why-us::after {
  position: absolute;
  top: 0;
  right: -10%;
  width: 45%;
  height: 100%;
  content: "";
  background: rgba(255, 210, 48, 0.07);
  transform: skewX(-12deg);
}

.why-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 78px;
  align-items: center;
}

.why-copy > p:not(.eyebrow) {
  color: #cddcf7;
}

.check-list {
  display: grid;
  gap: 12px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.08);
  border-left: 4px solid var(--accent);
  border-radius: 3px 14px 3px 14px;
}

.check-list li > span {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--base-dark);
  background: var(--accent);
  border-radius: 4px 14px 4px 14px;
  font-family: var(--font-display);
  font-weight: 700;
}

.check-list li div {
  display: grid;
}

.check-list b {
  font-family: var(--font-display);
  font-size: 1.06rem;
  letter-spacing: 0.03em;
}

.check-list small {
  color: #cddcf7;
}

.why-images {
  position: relative;
}

.why-images > img:first-child {
  position: relative;
  display: block;
  width: 100%;
  height: 470px;
  object-fit: cover;
  border: 8px solid #fff;
  box-shadow: var(--shadow);
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}

.quote-card {
  position: absolute;
  left: 0;
  bottom: 22px;
  width: 52%;
  padding: 25px 22px 22px;
  color: var(--base-dark);
  background: var(--accent);
  border-radius: 4px 20px 4px 20px;
  box-shadow: var(--shadow-small);
}

.quote-card span {
  position: absolute;
  top: -28px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 5rem;
  transition: color 280ms ease, text-shadow 280ms ease, transform 380ms cubic-bezier(.2, .8, .2, 1);
}

.quote-card p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.14rem;
  line-height: 1.35;
}

/* Facilities */
.facilities {
  background: #fff;
  padding-bottom: 60px;
}

.facility-mosaic {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 0.9fr 0.9fr;
  grid-template-rows: 224px 224px;
  grid-template-areas:
    "smart smart ground rooms"
    "labs labs ground rooms";
  gap: 16px;
}

.facility-mosaic > article:nth-child(1) {
  grid-area: smart;
}

.facility-mosaic > article:nth-child(2) {
  grid-area: ground;
}

.facility-mosaic > article:nth-child(3) {
  grid-area: rooms;
}

.facility-mosaic > article:nth-child(4) {
  grid-area: labs;
}

.facility-tile {
  position: relative;
  color: #fff;
  border-radius: 5px 22px 5px 22px;
  overflow: hidden;
  box-shadow: var(--shadow-small);
}

.facility-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.facility-tile > div {
  position: absolute;
  inset: auto 0 0;
  padding: 70px 22px 20px;
  background: linear-gradient(transparent, rgba(7, 31, 79, 0.95));
}

.facility-tile > div span {
  display: inline-grid;
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
  place-items: center;
  color: var(--base-dark);
  background: var(--accent);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
}

.facility-tile h3 {
  margin-bottom: 2px;
  font-size: 1.25rem;
}

.facility-tile p {
  margin: 0;
  color: #dbe8ff;
  font-size: 0.85rem;
}

.facility-chips,
.activity-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.facility-chips {
  gap: 8px;
}

.facility-chips span,
.activity-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  color: var(--base-dark);
  background: var(--sky);
  border: 1px solid #cfe2f8;
  border-radius: 4px 14px 4px 14px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.facility-chips span {
  gap: 6px;
  padding: 8px 12px;
  font-size: 0.76rem;
}

.facility-chips span svg {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 6px;
  color: var(--base);
  background: #dcecff;
  border-radius: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 220ms ease, background 220ms ease, transform 260ms cubic-bezier(.2, .8, .2, 1);
}

.activity-row span svg {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 6px;
  color: var(--coral);
  background: #fff0ed;
  border-radius: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 220ms ease, background 220ms ease, transform 260ms cubic-bezier(.2, .8, .2, 1);
}

/* Achievements */
.achievement-band {
  position: relative;
  padding-top: 68px;
  color: #fff;
  background: var(--base-dark);
  overflow: hidden;
}

.achievement-band::before {
  position: absolute;
  top: -180px;
  right: -120px;
  width: 440px;
  height: 440px;
  content: "";
  opacity: 0.12;
  background-image: repeating-linear-gradient(45deg, var(--accent) 0 2px, transparent 2px 18px);
  border-radius: 50%;
}

.achievement-head {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 40px;
}

.achievement-head h2 {
  margin-bottom: 0;
}

.achievement-head > p {
  margin-bottom: 8px;
  color: #cddcf7;
}

.achievement-gallery {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 18px;
}

.achievement-gallery figure {
  position: relative;
  height: 320px;
  margin-bottom: 0;
  border: 5px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px 20px 5px 20px;
  overflow: hidden;
}

.achievement-gallery figure:first-child {
  transform: translateY(12px);
}

.achievement-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.achievement-gallery figure:nth-child(2) img {
  object-position: 45% center;
}

.achievement-gallery figcaption {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  padding: 55px 18px 16px;
  background: linear-gradient(transparent, rgba(7, 31, 79, 0.98));
}

.achievement-gallery figcaption b {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.achievement-gallery figcaption span {
  color: #dce9ff;
  font-size: 0.83rem;
}

.stat-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 62px;
  background: var(--base);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px 22px 5px 22px;
  overflow: hidden;
}

.stat-row > div {
  display: grid;
  padding: 24px 20px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

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

.stat-row strong {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1;
}

.stat-row span {
  color: #dce9ff;
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Student life */
.student-life {
  background:
    linear-gradient(rgba(255, 249, 236, 0.92), rgba(255, 249, 236, 0.92)),
    radial-gradient(circle at center, var(--accent-deep) 0 2px, transparent 3px);
  background-size: auto, 24px 24px;
}

.life-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 26px;
  align-items: center;
}

.life-card {
  position: relative;
  min-height: 370px;
  padding: 12px 12px 80px;
  background: #fff;
  box-shadow: var(--shadow);
  transform: rotate(2deg);
}

.life-card.tilted-left {
  transform: rotate(-3deg) translateY(10px);
}

.life-card.tilted-right {
  transform: rotate(3deg) translateY(-6px);
}

.life-card img {
  width: 100%;
  height: 290px;
  object-fit: cover;
}

.life-card > div {
  position: absolute;
  right: 18px;
  bottom: 13px;
  left: 18px;
  text-align: center;
}

.life-card small {
  color: var(--coral);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.life-card h3 {
  margin: 3px 0 0;
  color: var(--base-dark);
  font-size: 1.2rem;
}

.activity-row {
  margin-top: 48px;
}

.activity-row span {
  background: #fff;
  box-shadow: var(--shadow-small);
}

/* Admissions */
.admission-section {
  position: relative;
  background: #fff;
}

.admission-card {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  color: #fff;
  background: var(--accent);
  border-radius: 8px 34px 8px 34px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.admission-copy {
  position: relative;
  padding: 58px 60px;
  color: var(--base-dark);
  background: var(--accent);
  overflow: hidden;
}

.admission-copy::after {
  position: absolute;
  right: -60px;
  bottom: -95px;
  width: 220px;
  height: 220px;
  content: "";
  border: 26px solid rgba(13, 61, 145, 0.1);
  border-radius: 50%;
}

.admission-copy h2 {
  margin-bottom: 16px;
}

.admission-copy h2 span {
  color: var(--coral);
}

.admission-copy > p:not(.eyebrow) {
  position: relative;
  z-index: 1;
  max-width: 650px;
  color: #3d4b5f;
}

.admission-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
}

.dark-link {
  color: var(--base-dark);
}

.admission-steps {
  position: relative;
  padding: 54px 48px 54px 68px;
  background: var(--base);
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}

.admission-steps h3 {
  margin-bottom: 24px;
  color: var(--accent);
  font-size: 1.2rem;
  text-transform: uppercase;
}

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

.admission-steps li {
  display: flex;
  gap: 14px;
  align-items: start;
}

.admission-steps li > b {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--base-dark);
  background: var(--accent);
  border-radius: 3px 12px 3px 12px;
  font-family: var(--font-display);
}

.admission-steps li > span {
  display: grid;
}

.admission-steps strong {
  font-family: var(--font-display);
  font-size: 1.04rem;
  letter-spacing: 0.03em;
}

.admission-steps small {
  color: #cddcf7;
}

/* Contact */
.contact-section {
  background: var(--sky);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 78px;
  align-items: center;
}

.contact-photo {
  position: relative;
}

.contact-photo::before {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 160px;
  height: 160px;
  content: "";
  background-image: radial-gradient(var(--base) 2px, transparent 2px);
  background-size: 16px 16px;
  opacity: 0.16;
}

.contact-photo img {
  position: relative;
  width: 100%;
  height: 460px;
  object-fit: cover;
  border: 9px solid #fff;
  box-shadow: var(--shadow);
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
}

.contact-photo-caption {
  position: absolute;
  right: -20px;
  bottom: 25px;
  display: grid;
  min-width: 270px;
  padding: 18px 24px;
  color: #fff;
  background: var(--base);
  border-left: 7px solid var(--accent);
  border-radius: 4px 16px 4px 16px;
  box-shadow: var(--shadow-small);
}

.contact-photo-caption span {
  color: #dbe8ff;
  font-size: 0.76rem;
  text-transform: uppercase;
}

.contact-photo-caption b {
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.contact-copy > p:not(.eyebrow) {
  color: var(--muted);
}

.contact-copy address {
  display: grid;
  gap: 21px;
  margin-top: 28px;
  font-style: normal;
}

.contact-copy address > div {
  display: flex;
  gap: 18px;
  align-items: center;
}

.contact-copy address p {
  display: grid;
  margin: 0;
}

.contact-copy address small {
  color: var(--coral);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.contact-copy address b,
.contact-copy address a {
  color: var(--base-dark);
  font-weight: 600;
  line-height: 1.35;
}

.contact-copy address a:hover {
  color: var(--coral);
}

.office-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding: 15px 18px;
  color: #fff;
  background: var(--base-dark);
  border-radius: 4px 16px 4px 16px;
}

.office-note b {
  color: var(--accent);
  font-family: var(--font-display);
  text-transform: uppercase;
}

.office-note span {
  color: #dce8ff;
  font-size: 0.9rem;
}

/* Footer */
.site-footer {
  position: relative;
  color: #c9d6ef;
  background: #06183b;
  overflow: hidden;
}

.footer-pattern {
  position: absolute;
  top: 0;
  right: 0;
  width: 28%;
  height: 100%;
  opacity: 0.07;
  background-image: repeating-linear-gradient(135deg, var(--accent) 0 3px, transparent 3px 24px);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}

.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 0.8fr 1fr;
  gap: 38px;
  padding-top: 44px;
  padding-bottom: 34px;
}

/* crest sits beside a stacked name + motto lockup; the copy runs full width below */
.footer-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 15px;
  row-gap: 2px;
}

.footer-brand img {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: 86px;
  height: auto;
  /* the crest's ring lettering is dark, so it needs a light disc on the navy */
  padding: 6px;
  background: #fff;
  border-radius: 50%;
}

.footer-brand > p:not(.footer-brand-name):not(.footer-motto) {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 16px 0 0;
}

.footer-brand-name {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  display: grid;
  gap: 2px;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.footer-brand-name span {
  color: var(--accent);
  font-size: 0.76em;
  letter-spacing: 0.06em;
}

.footer-brand p {
  max-width: 410px;
}

.footer-motto {
  /* tucked under the school name, inside the crest lockup */
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  color: var(--accent);
  font-family: var(--font-script);
  font-size: 1.3rem;
  line-height: 1.15;
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.footer-socials {
  display: flex;
  gap: 9px;
  margin-top: 20px;
}

.footer-socials a {
  width: 40px;
  height: 40px;
  margin: 0;
  background: rgba(255, 255, 255, 0.07);
}

.footer-socials svg {
  width: 17px;
  height: 17px;
}

.footer-grid h3 {
  margin-bottom: 17px;
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-grid h3::after {
  display: block;
  width: 44px;
  height: 4px;
  margin-top: 7px;
  content: "";
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
}

.footer-grid > div:not(.footer-brand) {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.footer-grid a {
  margin-bottom: 5px;
}

.footer-grid a:hover {
  color: var(--accent);
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-links a::before {
  color: var(--accent);
  content: "›";
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 180ms ease;
}

.footer-links a:hover::before {
  transform: translateX(3px);
}

.footer-contact {
  gap: 10px;
}

.footer-contact > div {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.footer-contact > div svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  fill: var(--accent);
}

.footer-contact p,
.footer-contact a {
  margin: 0;
  line-height: 1.5;
}

.footer-grid p {
  margin-bottom: 8px;
  font-size: 0.92rem;
}

.footer-bottom {
  position: relative;
  color: #aebddd;
  background: #04102a;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.footer-bottom .container {
  display: flex;
  min-height: 48px;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: space-between;
}

.footer-bottom .footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* breathing room above and below the pill */
  margin-block: 12px;
  padding: 5px 12px 5px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 40px;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.footer-credit img {
  width: auto;
  height: 34px;
  padding: 3px 7px;
  background: #fff;
  border-radius: 20px;
}

.footer-bottom p {
  margin: 0;
  font-size: 0.82rem;
}

.footer-bottom a {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.floating-actions {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: grid;
  gap: 8px;
}

.floating-actions a {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(7, 31, 79, 0.25);
}

.float-email {
  color: #fff;
  background: var(--coral);
}

.float-email svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
}

.float-top {
  color: var(--base-dark);
  background: var(--accent);
  font-size: 1.35rem;
  font-weight: 700;
}

@media (max-width: 1050px) {
  .section {
    padding: 72px 0;
  }

  .topbar-contact .topbar-address,
  .topbar-contact > .topbar-divider:first-of-type {
    display: none;
  }

  .navbar-shell {
    position: relative;
    width: 100%;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .navbar-group {
    display: none;
  }

  .navbar-brand {
    width: min(600px, calc(100% - 36px));
    min-height: 98px;
    margin-inline: auto;
    padding: 10px 20px 8px;
  }

  .navbar-brand img {
    height: 80px;
  }

  .navbar-brand::before,
  .navbar-brand::after {
    height: 56px;
  }

  .navbar-mobile-links {
    display: none;
  }

  .navbar-menu-toggle {
    position: absolute;
    right: 20px;
    top: 50%;
    z-index: 3;
    display: grid;
    width: 52px;
    height: 52px;
    padding: 12px 10px 18px;
    place-items: center;
    align-content: center;
    gap: 5px;
    color: var(--base-dark);
    background: var(--accent);
    border: 0;
    border-radius: 5px 15px 5px 15px;
    box-shadow: 4px 4px 0 var(--base);
    cursor: pointer;
    transform: translateY(-50%);
  }

  .navbar-menu-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .navbar-menu-toggle b {
    position: absolute;
    bottom: 7px;
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: block;
    background: rgba(2, 14, 39, 0.58);
  }

  .sidebar-overlay[hidden] {
    display: none;
  }

  .mobile-sidebar {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 100;
    display: flex;
    width: min(360px, 88vw);
    flex-direction: column;
    color: #dce8ff;
    background: var(--base-dark);
    box-shadow: -18px 0 42px rgba(2, 14, 39, 0.24);
    transform: translateX(105%);
    transition: transform 240ms ease;
  }

  .mobile-sidebar.is-open {
    transform: translateX(0);
  }

  .mobile-sidebar-head {
    display: flex;
    min-height: 92px;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .mobile-sidebar-head strong {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .sidebar-close {
    width: 40px;
    height: 40px;
    color: var(--base-dark);
    background: var(--accent);
    border: 0;
    border-radius: 50%;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
  }

  .mobile-sidebar-links {
    display: grid;
    gap: 2px;
    padding: 18px 20px 28px;
    overflow-y: auto;
  }

  .mobile-sidebar-links a {
    display: block;
    padding: 15px 14px;
    color: #dce8ff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.035em;
  }

  .sidebar-nav-group {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .sidebar-nav-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 15px 14px;
    color: #dce8ff;
    background: transparent;
    border: 0;
    font: 700 0.95rem/1.2 var(--font-display);
    letter-spacing: 0.035em;
    text-align: left;
    cursor: pointer;
  }

  .sidebar-nav-toggle svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    transition: transform 180ms ease;
  }

  .sidebar-nav-group.is-open .sidebar-nav-toggle,
  .sidebar-nav-toggle:hover,
  .sidebar-nav-toggle:focus-visible {
    color: var(--accent);
  }

  .sidebar-nav-group.is-open .sidebar-nav-toggle svg {
    transform: rotate(180deg);
  }

  .sidebar-subpage-links {
    display: grid;
    max-height: 0;
    padding: 0 10px;
    overflow: hidden;
    opacity: 0;
    transition: max-height 220ms ease, opacity 180ms ease, padding 220ms ease;
  }

  .sidebar-nav-group.is-open .sidebar-subpage-links {
    max-height: 240px;
    padding-bottom: 8px;
    opacity: 1;
  }

  .sidebar-subpage-links a {
    margin: 0;
    padding: 10px 14px;
    color: #aebddd;
    border: 0;
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 600;
  }

  .sidebar-subpage-links a:hover,
  .sidebar-subpage-links a:focus-visible,
  .sidebar-subpage-links a.active {
    padding-left: 20px;
    color: var(--accent);
  }

  .mobile-sidebar-links a.active,
  .mobile-sidebar-links a:hover,
  .mobile-sidebar-links a:focus-visible {
    color: var(--accent);
    padding-left: 20px;
  }

  body.sidebar-open {
    overflow: hidden;
  }

  .navbar-mobile-links a {
    flex: 0 0 auto;
    padding: 18px 0 15px;
    font-size: 0.88rem;
  }

  .hero {
    height: auto;
  }

  .hero-banner {
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .hero::before {
    width: 72%;
  }

  .hero-collage {
    left: 48%;
  }

  .welcome-grid,
  .why-grid,
  .contact-grid {
    gap: 48px;
  }

  .promise-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .promise-strip > div {
    min-height: 142px;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  .promise-strip .promise-icon {
    margin: 0 0 12px;
  }

  .facility-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 230px);
    grid-template-areas:
      "smart ground"
      "rooms labs";
  }

  .admission-copy {
    padding: 50px 42px;
  }

  .admission-steps {
    padding-right: 32px;
    padding-left: 58px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 28px;
  }

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

}

@media (max-width: 820px) {
  .section {
    padding: 68px 0;
  }

  .topbar-contact .topbar-email,
  .topbar-email-divider {
    display: none;
  }

  .topbar-inner {
    width: calc(100% - 24px);
  }

  .hero {
    height: auto;
    min-height: 0;
  }

  .hero::before {
    width: 88%;
  }

  .hero-collage {
    left: 53%;
    opacity: 0.68;
  }

  .hero-content {
    padding-top: 62px;
  }

  .hero-content > * {
    max-width: 560px;
  }

  .hero-ribbon {
    width: 105%;
    padding-right: 30px;
    padding-left: 30px;
    font-size: 0.8rem;
  }

  .welcome-grid,
  .why-grid,
  .contact-grid,
  .heading-split,
  .achievement-head {
    grid-template-columns: 1fr;
  }

  .heading-split,
  .achievement-head {
    gap: 22px;
  }


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

  .promise-strip > div {
    min-height: 154px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  .promise-strip .promise-icon {
    margin: 0 0 14px;
  }

  .vision-grid,
  .pathway-grid {
    grid-template-columns: 1fr;
  }

  .vision-card {
    min-height: 0;
  }

  .pathway-card,
  .pathway-card.featured {
    min-height: 0;
    transform: none;
  }

  .pathway-card img {
    height: 330px;
  }

  .ilearn-strip {
    grid-template-columns: 1fr;
  }

  .ilearn-title {
    clip-path: none;
  }

  .ilearn-strip ol {
    padding: 18px;
  }

  .why-grid {
    gap: 56px;
  }

  .facility-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 230px);
    grid-template-areas:
      "smart ground"
      "rooms labs";
  }

  .facilities {
    padding-bottom: 52px;
  }

  .achievement-band {
    padding-top: 56px;
  }

  .achievement-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .achievement-gallery figure:first-child {
    grid-column: span 2;
    transform: none;
  }

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

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

  .admission-card {
    grid-template-columns: 1fr;
  }

  .admission-steps {
    padding: 44px;
    clip-path: none;
  }

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

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

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

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

  .section {
    padding: 50px 0;
  }

  h2 {
    font-size: clamp(1.65rem, 7vw, 2rem);
  }

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

  .topbar-inner {
    min-height: 36px;
    gap: 8px;
  }

  .topbar-contact,
  .topbar-right {
    gap: 8px;
  }

  .topbar-phone {
    font-size: 0.66rem !important;
  }

  .topbar-phone svg {
    display: none;
  }

  .admission-open {
    padding: 4px 8px;
    font-size: 0.62rem;
  }

  .admission-open svg {
    width: 11px;
    height: 11px;
  }

  .topbar-socials {
    display: none;
  }

  .navbar-brand {
    width: calc(100% - 88px);
    min-height: 72px;
    padding: 6px 6px 4px;
  }

  .navbar-brand {
    gap: 11px;
  }

  .navbar-brand img {
    height: 62px;
  }

  .brand-text b {
    font-size: 1rem;
  }

  .brand-text small {
    font-size: 0.5rem;
    letter-spacing: 0.1em;
  }

  .navbar-brand::before,
  .navbar-brand::after {
    display: none;
  }

  .navbar-mobile-links {
    display: none;
  }

  .navbar-menu-toggle {
    right: 14px;
    width: 46px;
    height: 46px;
  }

  .navbar-mobile-links a {
    padding: 13px 0 12px;
    font-size: 0.77rem;
  }

  .hero {
    height: auto;
    min-height: 0;
  }

  .hero-banner {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .hero::before {
    width: 100%;
    background: linear-gradient(100deg, rgba(7, 31, 79, 0.98), rgba(13, 61, 145, 0.82));
    clip-path: none;
  }

  .hero-collage {
    left: 0;
    padding-left: 0;
    opacity: 0.38;
  }

  .hero-content {
    padding-top: 48px;
    padding-bottom: 125px;
  }

  .hero h1 {
    font-size: clamp(2.4rem, 11.5vw, 3.15rem);
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    max-width: 300px;
  }

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

  .hero-badges > div {
    min-width: 0;
    padding: 12px 8px;
  }

  .hero-badges strong {
    font-size: 1rem;
  }

  .hero-badges span {
    font-size: 0.65rem;
    line-height: 1.2;
  }

  .hero-ribbon {
    bottom: 17px;
    font-size: 0.66rem;
    line-height: 1.45;
  }

  .hero-ribbon b {
    padding: 0 4px;
  }

  .welcome-grid {
    gap: 34px;
  }

  .welcome-copy {
    order: 1;
  }

  .welcome-visual {
    order: 2;
  }

  .photo-primary {
    width: 100%;
    height: 300px;
  }

  .namma-banner {
    top: -12px;
    right: -6px;
    width: 68%;
    border-width: 4px;
  }

  .welcome-visual::before {
    bottom: 16px;
    right: 14px;
    height: 272px;
  }

  .year-seal {
    bottom: 20px;
    left: 2px;
    width: 108px;
    height: 108px;
    border-width: 5px;
    outline-offset: -11px;
  }

  .year-seal strong {
    font-size: 1.5rem;
  }

  .year-seal span {
    font-size: 0.5rem;
  }

  .year-seal small {
    font-size: 0.42rem;
    letter-spacing: 0.01em;
  }

  .promise-strip {
    grid-template-columns: 1fr;
  }

  .promise-strip > div {
    min-height: 88px;
    padding: 13px 15px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .promise-strip .promise-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin: 0 14px 0 0;
  }

  .vision-grid,
  .pathway-grid,
  .achievement-gallery,
  .life-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 310px);
    gap: 16px;
    padding: 8px 4px 18px;
    margin: -8px -4px -18px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .vision-grid::-webkit-scrollbar,
  .pathway-grid::-webkit-scrollbar,
  .achievement-gallery::-webkit-scrollbar,
  .life-grid::-webkit-scrollbar,
  .facility-mosaic::-webkit-scrollbar,
  .facility-chips::-webkit-scrollbar,
  .activity-row::-webkit-scrollbar {
    display: none;
  }

  .vision-card,
  .pathway-card,
  .achievement-gallery figure,
  .life-card {
    scroll-snap-align: start;
  }

  .vision-card {
    min-height: 330px;
    padding: 28px 25px 26px;
  }

  .vision-card .card-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
  }

  .vision-card h3 {
    font-size: 1.18rem;
  }

  .vision-card p {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .pathway-card img {
    height: 220px;
  }

  .pathway-card,
  .pathway-card.featured {
    min-height: 382px;
  }

  .pathway-copy {
    padding: 22px 21px 24px;
  }

  .ilearn-strip ol {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 0;
  }

  .ilearn-strip li:nth-child(even) {
    border-right: 0;
  }

  .why-images > img:first-child {
    width: 100%;
    height: 290px;
  }

  .quote-card {
    width: 66%;
    bottom: 16px;
    padding: 17px 14px;
  }

  .quote-card p {
    font-size: 0.95rem;
  }

  .facility-mosaic {
    grid-template-columns: none;
    grid-template-rows: 220px;
    grid-template-areas: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 310px);
    gap: 16px;
    padding: 8px 4px 18px;
    margin: -8px -4px -18px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .facility-mosaic > article:nth-child(n) {
    grid-area: auto;
    scroll-snap-align: start;
  }

  .facilities {
    padding-bottom: 44px;
  }

  .achievement-band {
    padding-top: 48px;
  }

  .achievement-gallery {
    grid-template-columns: none;
  }

  .achievement-gallery figure,
  .achievement-gallery figure:first-child {
    grid-column: span 1;
    height: 245px;
    transform: none;
  }

  .stat-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-row > div:nth-child(2) {
    border-right: 0;
  }

  .stat-row > div:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .life-grid {
    grid-template-columns: none;
  }

  .life-large {
    grid-column: span 1;
  }

  .life-card,
  .life-card.tilted-left,
  .life-card.tilted-right {
    min-height: 320px;
    transform: none;
  }

  .life-card img {
    height: 230px;
  }

  .life-card:nth-child(even) {
    transform: none;
  }

  .facility-chips,
  .activity-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 4px 2px 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
  }

  .facility-chips span,
  .activity-row span {
    flex: 0 0 auto;
    min-height: 44px;
    scroll-snap-align: start;
  }

  .admission-copy,
  .admission-steps {
    padding: 38px 26px;
  }

  .admission-actions {
    align-items: start;
    flex-direction: column;
  }

  .contact-grid {
    gap: 50px;
  }

  .contact-photo img {
    height: 350px;
  }

  .contact-photo-caption {
    right: -5px;
    min-width: 235px;
  }

  .office-note {
    align-items: start;
    flex-direction: column;
    gap: 2px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
    padding-top: 32px;
    padding-bottom: 24px;
  }

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

  .footer-brand img {
    width: 74px;
  }

  .footer-bottom .container {
    padding: 15px 0;
    align-items: start;
    flex-direction: column;
    gap: 6px;
  }

  .footer-grid > div:not(.footer-brand):not(.footer-contact) {
    min-width: 0;
  }

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

  .floating-actions a {
    width: 42px;
    height: 42px;
    border-width: 2px;
  }
}

/* Motion and colourful interaction system */
@keyframes heroRise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroPictureIn {
  from {
    opacity: 0;
    transform: skewX(-7deg) scale(1.16) translateX(45px);
  }
  to {
    opacity: 1;
    transform: skewX(-7deg) scale(1.08) translateX(0);
  }
}

.hero-content > .eyebrow {
  animation: heroRise 650ms 80ms ease-out both;
}

.hero h1 {
  animation: heroRise 720ms 180ms ease-out both;
}

.hero-script,
.hero-tamil {
  animation: heroRise 700ms 300ms ease-out both;
}

.hero-copy {
  animation: heroRise 700ms 390ms ease-out both;
}

.hero-actions {
  animation: heroRise 700ms 470ms ease-out both;
}

.hero-badges {
  animation: heroRise 700ms 560ms ease-out both;
}

.hero-collage {
  animation: heroPictureIn 1s 120ms cubic-bezier(.2, .75, .25, 1) both;
}

.eyebrow-icon {
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.eyebrow-icon:hover {
  filter: saturate(1.35) brightness(1.06);
  transform: translateY(-3px) scale(1.04);
}

/* Cards holding a photo are deliberately left out: a hover transition hands
   the card to the compositor, which rasterises it flat and then applies the
   card's rotation to that bitmap, so the photo looks soft until the
   transition ends. Their hover shadow/border simply switches instantly. */
.vision-card,
.promise-strip > div,
.check-list li,
.stat-row > div,
.admission-card,
.contact-copy address > div {
  transition: transform 260ms cubic-bezier(.2, .8, .2, 1), box-shadow 260ms ease, border-color 260ms ease, background 260ms ease, filter 260ms ease, opacity 260ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .vision-grid:hover .vision-card:not(:hover) {
    opacity: 0.76;
    filter: saturate(0.78);
    transform: scale(0.975);
  }
}

.vision-card:hover {
  background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--card-accent) 7%, #fff));
  border-color: var(--card-accent);
  box-shadow: 0 28px 58px rgba(0, 0, 0, 0.24), 0 0 0 4px var(--card-glow);
  transform: translateY(-14px) rotate(-0.75deg);
}

.vision-card:hover::before {
  transform: translateX(135%);
}

.vision-card:hover::after {
  opacity: 0.14;
  transform: rotate(54deg) scale(1.42);
}

.vision-card:hover h3 {
  color: var(--card-accent);
  transform: translateX(5px);
}

.promise-strip > div:hover {
  box-shadow: 0 18px 38px rgba(13, 61, 145, 0.16);
  transform: translateY(-7px);
}

.promise-strip > div:hover .promise-icon {
  box-shadow: 0 10px 22px rgba(13, 61, 145, 0.26);
  transform: rotate(-6deg) scale(1.08);
}

.vision-card:hover .card-icon {
  filter: saturate(1.12);
  box-shadow: 5px 7px 0 var(--card-glow), 0 12px 24px rgba(7, 31, 79, 0.16);
  transform: rotate(-4deg) scale(1.06);
}

.vision-card:hover .card-icon::before {
  opacity: 0.28;
  transform: scale(1) rotate(0);
}

.card-icon {
  transition: color 240ms ease, background 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}

.pathway-card:hover .pathway-label {
  background: var(--base-bright);
}

.pathway-card:hover h3 {
  color: var(--coral);
}

.facility-tile:hover {
  border-color: var(--accent);
  box-shadow: 0 22px 44px rgba(13, 61, 145, 0.25), 0 0 0 4px rgba(255, 210, 48, 0.3);
}

.facility-tile:hover > div span {
  color: #fff;
  background: var(--coral);
  transform: rotate(8deg) scale(1.08);
}

.facility-tile > div span,
.facility-chips span,
.activity-row span {
  transition: color 220ms ease, background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.facility-chips span:hover,
.activity-row span:hover {
  color: #fff;
  background: var(--base);
  border-color: var(--base);
  box-shadow: 0 10px 22px rgba(13, 61, 145, 0.2);
  transform: translateY(-5px) rotate(-1deg);
}

  .facility-chips span:hover svg {
    color: var(--base-dark);
    background: var(--accent);
    transform: rotate(-7deg) scale(1.12);
  }

  .activity-row span:hover svg {
    color: var(--base-dark);
    background: var(--accent);
    transform: rotate(-7deg) scale(1.12);
  }

.achievement-gallery figure:hover {
  border-color: var(--accent);
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.34), 0 0 0 3px rgba(240, 90, 73, 0.4);
}

.stat-row > div:hover {
  background: linear-gradient(145deg, var(--base-bright), var(--coral));
  transform: translateY(-7px);
}

.stat-row > div:hover strong {
  color: #fff;
  transform: scale(1.08);
}

.stat-row strong {
  transition: color 220ms ease, transform 220ms ease;
}

.life-card:hover,
.life-card.tilted-left:hover,
.life-card.tilted-right:hover {
  box-shadow: 0 26px 58px rgba(13, 61, 145, 0.24), 0 0 0 5px rgba(240, 90, 73, 0.16);
}

.check-list li:hover {
  background: linear-gradient(100deg, rgba(20, 102, 216, 0.45), rgba(240, 90, 73, 0.25));
  border-color: var(--coral);
  transform: translateX(8px);
}

.check-list li:hover > span {
  color: #fff;
  background: var(--coral);
  transform: rotate(-7deg);
}

.check-list li > span {
  transition: color 220ms ease, background 220ms ease, transform 220ms ease;
}

.admission-card:hover {
  box-shadow: 0 28px 68px rgba(13, 61, 145, 0.25), 0 0 0 5px rgba(255, 210, 48, 0.25);
  transform: translateY(-8px);
}

.contact-copy address > div:hover {
  padding-left: 8px;
  transform: translateX(6px);
}

.contact-copy address > div:hover .contact-icon {
  color: var(--base-dark);
  background: var(--accent);
  box-shadow: 5px 5px 0 var(--coral);
}

@media (hover: hover) and (pointer: fine) {
  .navbar-brand,
  .topbar,
  .admission-open,
  .year-seal,
  .ilearn-strip li,
  .quote-card,
  .admission-steps li,
  .office-note,
  .footer-grid > div,
  .floating-actions a {
    transition: color 260ms ease, background 260ms ease, border-color 260ms ease,
      box-shadow 320ms ease, filter 320ms ease, opacity 260ms ease,
      transform 380ms cubic-bezier(.2, .8, .2, 1);
  }

  .admission-open:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--coral), #df4435);
    box-shadow: 0 4px 12px rgba(240, 90, 73, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transform: none;
  }

  .admission-open:hover svg {
    fill: var(--accent);
    transform: rotate(10deg) scale(1.05);
  }

  .topbar:hover {
    background: #0a2c69;
  }

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

  .button::before {
    position: absolute;
    top: -35%;
    bottom: -35%;
    left: -45%;
    z-index: -1;
    width: 32%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    opacity: 0;
    transform: skewX(-24deg);
    transition: left 520ms ease, opacity 160ms ease;
  }

  .button:hover::before {
    left: 115%;
    opacity: 1;
  }

  .footer-grid .footer-socials a:hover,
  .footer-grid .footer-socials a:focus-visible {
    color: var(--base-dark);
  }

  .ilearn-strip li:hover {
    color: #fff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    transform: translateY(-2px) scale(1.015);
  }

  .ilearn-strip li:hover b {
    color: #fff;
    text-shadow: 0 0 18px rgba(255, 210, 48, 0.75);
  }

  .ilearn-strip li:hover::before {
    opacity: 1;
    transform: scale(1);
  }

  .ilearn-strip li:hover::after {
    left: 120%;
    opacity: 1;
  }

  .quote-card:hover {
    color: #fff;
    background: var(--coral);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
  }

  .quote-card:hover span {
    color: var(--accent);
    text-shadow: 0 8px 20px rgba(7, 31, 79, 0.25);
  }

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

  .admission-steps li:hover > b {
    color: #fff;
    background: var(--coral);
    transform: rotate(-7deg) scale(1.08);
  }

  .office-note:hover {
    background: var(--base);
    box-shadow: 0 12px 28px rgba(7, 31, 79, 0.2);
    transform: translateX(7px);
  }

  .footer-brand img:hover {
    box-shadow: 8px 8px 0 var(--accent), 0 16px 34px rgba(0, 0, 0, 0.3);
  }

  .footer-grid > div:hover h3 {
    color: var(--accent);
  }

  .footer-grid > div:hover h3::after {
    width: 70px;
    background: var(--coral);
  }

  .footer-grid h3,
  .footer-grid h3::after {
    transition: color 240ms ease, width 300ms ease, background 240ms ease;
  }

  .floating-actions a:hover {
    filter: saturate(1.2);
    box-shadow: 0 14px 30px rgba(7, 31, 79, 0.34);
    transform: translateY(-5px) rotate(-7deg) scale(1.07);
  }
}

/* Scroll reveal
   Uses the individual `translate` / `scale` properties instead of `transform`
   so cards that carry a static transform (the featured pathway card, the
   tilted life cards) keep it while they animate in. */
.js-reveal [data-reveal] {
  opacity: 0;
  transition:
    opacity 640ms cubic-bezier(.22, .7, .24, 1),
    translate 760ms cubic-bezier(.22, .7, .24, 1),
    scale 760ms cubic-bezier(.22, .7, .24, 1),
    rotate 760ms cubic-bezier(.22, .7, .24, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal [data-reveal="up"] {
  translate: 0 26px;
}

.js-reveal [data-reveal="left"] {
  translate: -30px 0;
}

.js-reveal [data-reveal="right"] {
  translate: 30px 0;
}

/* "fade" is opacity only — used for anything containing a photo, because
   animating translate/scale on an image resamples it while it moves and the
   picture looks blurry until the transition lands */
.js-reveal [data-reveal="fade"] {
  translate: none;
  scale: none;
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  translate: none;
  scale: none;
  rotate: none;
}

/* Sticky header condenses once the page scrolls */
.site-header {
  transition: box-shadow 280ms ease, background 280ms ease;
}

.navbar-shell {
  transition: min-height 320ms cubic-bezier(.22, .7, .24, 1);
}



.site-header.is-condensed {
  box-shadow: 0 10px 32px rgba(7, 31, 79, 0.16);
}

.site-header.is-condensed .navbar-shell {
  min-height: 96px;
}

.site-header.is-condensed .navbar-brand img {
  height: 68px;
}

/* Floating buttons drop in after load */
.floating-actions a {
  opacity: 0;
  translate: 0 16px;
  animation: float-in 480ms cubic-bezier(.18, 1.2, .4, 1) forwards;
}

.floating-actions a:nth-child(2) {
  animation-delay: 110ms;
}

@keyframes float-in {
  to {
    opacity: 1;
    translate: none;
  }
}

/* Slow drift on the decorative footer pattern */
.footer-pattern {
  animation: pattern-drift 26s linear infinite;
}

@keyframes pattern-drift {
  from {
    background-position: 0 0;
  }

  to {
    /* 8 stripe periods along x (24px / cos45) so the loop is seamless */
    background-position: 271.53px 0;
  }
}

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

  .js-reveal [data-reveal],
  .js-reveal [data-reveal].is-revealed {
    opacity: 1;
    translate: none;
    scale: none;
    rotate: none;
  }

  .floating-actions a,
  .footer-pattern {
    animation: none;
  }

  .floating-actions a {
    opacity: 1;
    translate: none;
  }

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


/* Footer lists a principal and an admissions address */
.footer-emails {
  display: grid;
  gap: 3px;
}