:root {
  color-scheme: light;
  --navy: #102b5c;
  --orange: #ef8c24;
  --red: #c92f2b;
  --purple: #713b91;
  --ink: #263142;
  --muted: #5e6876;
  --cream: #f7f8fa;
  --white: #ffffff;
  --line: #e7e8ec;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Trebuchet MS", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.65;
}

a {
  color: var(--navy);
  font-weight: 700;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--red);
}

a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  z-index: 10;
  top: 1rem;
  left: 1rem;
  padding: 0.7rem 1rem;
  transform: translateY(-180%);
  border-radius: 0.5rem;
  background: var(--navy);
  color: var(--white);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--white);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem max(1.25rem, calc((100% - 1160px) / 2));
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

header > a {
  color: var(--navy);
  font-size: 1.2rem;
  text-decoration: none;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 2vw, 1.8rem);
}

nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.2rem;
  color: var(--ink);
  font-size: 0.95rem;
  text-decoration: none;
}

nav a[aria-current="page"] {
  color: var(--red);
}

main {
  width: min(1160px, calc(100% - 2.5rem));
  margin: 2.5rem auto 4.5rem;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 7vw, 5.5rem);
  border-radius: 2rem;
  background: linear-gradient(125deg, #fff0d6 0%, #fffdf8 58%, #edf2ff 100%);
  isolation: isolate;
}

.hero p:first-child {
  margin: 0 0 0.5rem;
  color: var(--purple);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  color: var(--navy);
  line-height: 1.15;
}

h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 5rem);
  letter-spacing: -0.045em;
}

.hero p:not(:first-child) {
  max-width: 38rem;
  margin: 1.2rem 0 1.7rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.button {
  display: inline-block;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
  background: var(--navy);
  color: var(--white);
}

main > section:not(.hero) {
  margin-top: 2rem;
}

#about {
  padding: 1.5rem 0.25rem;
}

#about p,
#programs > p,
#news p {
  max-width: 48rem;
  color: var(--muted);
}

.approach-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: 1.75rem;
  background: var(--white);
}

.approach-intro > p:last-child {
  margin-bottom: 0;
  color: var(--muted);
}

.section-kicker {
  margin: 0 0 0.55rem;
  color: var(--purple);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.approach-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.approach-card {
  min-width: 0;
  padding: 1.1rem;
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: 1rem;
  background: #fffdf9;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.approach-card:nth-child(2) {
  border-top-color: var(--purple);
}

.approach-card:nth-child(3) {
  border-top-color: var(--red);
}

.approach-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgb(16 43 92 / 8%);
}

.approach-number {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 50%;
  background: #fff0d6;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 800;
}

.approach-card:nth-child(2) .approach-number {
  background: #f3ebf8;
  color: var(--purple);
}

.approach-card:nth-child(3) .approach-number {
  background: #fff0e9;
  color: var(--red);
}

.approach-card h3 {
  margin: 0.85rem 0 0.45rem;
  font-size: 1.1rem;
}

.approach-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.03em;
}

.home-main #programs {
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: 1.75rem;
  background: var(--white);
}

.school-levels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.home-main .school-level {
  padding: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: 1.25rem;
  background: #fffdf9;
}

.school-level + .school-level {
  border-top-color: var(--purple);
}

.school-level img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;
}

.school-level h3 {
  margin: 1rem 0 0.4rem;
  font-size: 1.4rem;
}

.school-level p {
  margin: 0;
  color: var(--muted);
}

.home-main #news {
  padding: 1.75rem 2rem;
  box-shadow: none;
  border-radius: 0 1.25rem 1.25rem 0;
  background: #fff0e9;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.news-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: var(--white);
  box-shadow: 0 10px 24px rgb(16 43 92 / 6%);
}

.news-card > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.news-card-content {
  padding: 1rem;
}

.news-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.news-type {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: #edf2ff;
  color: var(--navy);
  font-weight: 800;
}

.news-card h3 {
  margin: 0.75rem 0 0.4rem;
  font-size: 1.2rem;
}

.news-card p {
  margin: 0 0 0.75rem;
  color: var(--muted);
}

.news-empty {
  margin: 0;
  padding: 1rem;
  border: 1px dashed #c7cbd2;
  border-radius: 0.9rem;
  color: var(--muted);
}

.news-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.home-main #gallery {
  padding: 1.5rem 0.25rem;
}

#gallery > p {
  color: var(--muted);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.gallery-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: var(--white);
  box-shadow: 0 12px 28px rgb(16 43 92 / 7%);
}

.gallery-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery-card figcaption {
  padding: 0.85rem 1rem;
  color: var(--ink);
  font-weight: 700;
}

footer {
  padding: 3rem max(1.25rem, calc((100% - 1160px) / 2));
  background: var(--navy);
  color: var(--white);
}

footer h2 {
  color: var(--white);
}

.footer-grid {
  display: grid;
  max-width: 1160px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin: 0 auto;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgb(255 255 255 / 22%);
}

.footer-column {
  min-width: 0;
}

.footer-column h2 {
  margin-bottom: 0.9rem;
  font-size: 1.15rem;
  letter-spacing: 0;
}

.footer-contact {
  display: grid;
  gap: 0.4rem;
  color: rgb(255 255 255 / 82%);
  font-style: normal;
}

.footer-contact a,
.footer-map,
.footer-facebook {
  overflow-wrap: anywhere;
}

.footer-map,
.footer-facebook {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 0.75rem;
  color: #ffe7c4;
}

.footer-nav {
  display: block;
}

.footer-nav ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  color: var(--white);
  font-weight: 500;
  text-decoration: none;
}

.footer-column p {
  margin: 0.2rem 0 0.75rem;
  color: rgb(255 255 255 / 78%);
}

.footer-contact-prompt {
  margin-top: 1rem !important;
}

.site-footer a:hover {
  color: #ffe7c4;
}

.footer-bottom {
  display: flex;
  max-width: 1160px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 auto;
  padding-top: 1.15rem;
}

.footer-bottom p {
  margin: 0;
}

address {
  font-style: normal;
}

.contact-details {
  display: grid;
  gap: 0.35rem;
}

.contact-details a {
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
}

footer a {
  color: var(--white);
}

.map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 0.75rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  text-decoration: none;
}

.map-link:hover {
  background: #ffca74;
  color: #172238;
}

.home-main .contact-section {
  margin-top: 2rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 1.75rem;
  background: var(--navy);
  color: var(--white);
}

.contact-section h2 {
  color: var(--white);
}

.contact-section address a {
  color: var(--white);
}

.page-hero {
  margin-bottom: 2rem;
}

.contact-panels {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 1.5rem;
}

.contact-card,
.contact-form-card {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: var(--white);
}

.contact-card {
  background: linear-gradient(145deg, #ffffff 0%, #fff8ed 100%);
  box-shadow: 0 14px 32px rgb(16 43 92 / 8%);
}

.contact-card h2,
.contact-form-card h2 {
  margin-bottom: 0.75rem;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
}

.contact-card h2 {
  margin-bottom: 1.15rem;
}

.contact-methods {
  display: grid;
  gap: 0.75rem;
}

.contact-method {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

a.contact-method:hover {
  transform: translateY(-2px);
  border-color: #c8d2e0;
  box-shadow: 0 8px 18px rgb(16 43 92 / 8%);
  color: var(--ink);
}

.contact-method-icon {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  flex: 0 0 2.8rem;
  place-items: center;
  border-radius: 0.9rem;
  background: #edf2ff;
  color: var(--navy);
}

.contact-icon-orange {
  background: #fff0d6;
  color: var(--red);
}

.contact-icon-purple {
  background: #f3ebf8;
  color: var(--purple);
}

.contact-method-icon svg,
.contact-action svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.contact-method-copy {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.contact-method-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-method-value {
  overflow-wrap: anywhere;
  color: var(--navy);
  font-weight: 700;
}

.contact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.contact-action {
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.9rem;
  background: var(--navy);
  color: var(--white);
  font-size: 0.92rem;
  text-align: center;
  text-decoration: none;
  transition: transform 160ms ease, filter 160ms ease;
}

.contact-action:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  color: var(--white);
}

.contact-action-map {
  background: var(--orange);
  color: var(--navy);
}

.contact-action-map:hover {
  color: var(--navy);
}

.contact-action-facebook {
  background: var(--purple);
}

.facebook-mark {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 1.35rem;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--purple);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.contact-form-intro {
  margin: 0 0 1.25rem;
  color: var(--muted);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.form-field {
  min-width: 0;
}

.form-field-full {
  grid-column: 1 / -1;
}

.form-field > label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ink);
  font-weight: 700;
}

.optional-label {
  color: var(--muted);
  font-size: 0.88em;
  font-weight: 400;
}

.form-field input,
.form-field select,
.form-field textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.8rem;
  border: 1px solid #aeb7c3;
  border-radius: 0.6rem;
  background: var(--white);
  color: var(--ink);
  /* 16px prevents iOS Safari from zooming the viewport on focus. */
  font-family: inherit;
  font-size: 1rem;
}

.form-field textarea {
  min-height: 9rem;
  resize: vertical;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible,
.contact-consent input:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.character-count {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: right;
}

.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.contact-consent input {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  margin: 0.15rem 0 0;
  accent-color: var(--navy);
}

.contact-submit {
  margin-top: 1.2rem;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.form-note {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.honeypot {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.thank-you-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

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

footer p {
  margin-top: 1.5rem;
  color: rgb(255 255 255 / 75%);
  font-size: 0.9rem;
}

.staff-login a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  border: 1px solid rgb(255 214 140 / 50%);
  border-radius: 999px;
  background: rgb(255 214 140 / 12%);
  color: #ffe2a7;
  font-size: 0.88rem;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.staff-login a:hover {
  transform: translateY(-1px);
  background: #ffca74;
  color: #172238;
}

@media (max-width: 760px) {
  header {
    align-items: flex-start;
    flex-direction: column;
  }

  nav {
    width: 100%;
    justify-content: flex-start;
    gap: 0.25rem 0.5rem;
  }

  nav a {
    padding: 0.45rem 0.55rem;
  }

  main {
    margin-top: 1.25rem;
  }

  .school-levels {
    grid-template-columns: 1fr;
  }

  .approach-section {
    grid-template-columns: 1fr;
  }

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

  .contact-panels,
  .contact-form-grid {
    grid-template-columns: 1fr;
  }

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

  .form-field-full {
    grid-column: auto;
  }

  .school-level img {
    height: 200px;
  }

  #news {
    padding: 1.5rem;
  }

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

@media (max-width: 420px) {
  header {
    padding: 0.8rem 1rem;
  }

  header > a {
    font-size: 1.1rem;
  }

  main {
    width: calc(100% - 1.25rem);
    margin: 1rem auto 3rem;
  }

  .hero {
    padding: 1.5rem 1.25rem;
    border-radius: 1.25rem;
  }

  h1 {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  #programs,
  #news,
  .approach-section {
    padding: 1.15rem;
  }

  .contact-card,
  .contact-form-card {
    padding: 1.15rem;
  }

  .contact-actions {
    grid-template-columns: 1fr;
  }

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

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .school-level {
    padding: 1rem;
  }

  .school-level img {
    height: 180px;
  }

  footer {
    padding: 2.25rem 1rem;
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* Admission enquiry guide */
.admissions-question-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admissions-question {
  min-width: 0;
  min-height: 8.5rem;
  padding: 1.1rem;
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: 1rem;
  background: #fffdf9;
}

.admissions-question:nth-child(2) {
  border-left-color: var(--purple);
}

.admissions-question:nth-child(3) {
  border-left-color: var(--red);
}

.admissions-question:nth-child(4) {
  border-left-color: var(--navy);
}

.admissions-question span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.admissions-question p {
  margin: 0.65rem 0 0;
  color: var(--ink);
  font-weight: 700;
}

.admissions-guide .button {
  margin-top: 1.2rem;
}

@media (max-width: 560px) {
  .admissions-question-list {
    grid-template-columns: 1fr;
  }

  .admissions-question {
    min-height: 0;
  }
}

/* Admission document checklist */
.admissions-document-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admissions-document {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1.05rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #fffdf9;
}

.admissions-document span {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  place-items: center;
  border-radius: 50%;
  background: #fff0d6;
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 800;
}

.admissions-document:nth-child(2) span {
  background: #f3ebf8;
  color: var(--purple);
}

.admissions-document:nth-child(3) span {
  background: #fff0e9;
  color: var(--red);
}

.admissions-document:nth-child(4) span {
  background: #eaf0fb;
  color: var(--navy);
}

.admissions-document p {
  margin: 0.2rem 0 0;
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 560px) {
  .admissions-document-list {
    grid-template-columns: 1fr;
  }
}


/* Contact form submission feedback */
.form-note[data-state="sending"] {
  color: var(--navy);
  font-weight: 700;
}

.form-note[data-state="success"] {
  color: #176b41;
  font-weight: 700;
}

.form-note[data-state="error"] {
  color: #a32626;
  font-weight: 700;
}

.contact-submit:disabled {
  cursor: wait;
  opacity: 0.72;
}


/* Homepage refresh: school contact strip, photo-led welcome, and responsive intro */
.school-topbar {
  background: var(--navy);
  color: var(--white);
  font-size: 0.82rem;
}

.school-topbar-inner {
  display: flex;
  max-width: 1160px;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.5rem;
  margin: 0 auto;
  padding: 0.4rem 1.25rem;
}

.topbar-location,
.topbar-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
}

.topbar-label {
  color: #ffe7c4;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.topbar-contact a {
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

.topbar-contact a:hover {
  color: #ffe7c4;
}

.home-header {
  min-height: 88px;
  box-shadow: 0 5px 18px rgb(16 43 92 / 5%);
}

.home-header .site-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.7rem;
  color: var(--navy);
  text-decoration: none;
}

.site-brand img {
  width: 3.3rem;
  height: 3.3rem;
  flex: 0 0 3.3rem;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
}

.brand-copy {
  display: grid;
  gap: 0.12rem;
  line-height: 1.2;
}

.brand-copy strong {
  font-size: 1.05rem;
}

.brand-copy small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.025em;
}

.home-header nav {
  align-items: center;
  gap: clamp(0.35rem, 1vw, 1rem);
}

.home-header nav a {
  min-height: 42px;
  padding: 0.45rem 0.6rem;
  border-radius: 0.7rem;
  font-size: 0.9rem;
  transition: color 160ms ease, background-color 160ms ease;
}

.home-header nav a:hover {
  background: #f4f6fa;
}

.home-header nav a.nav-contact {
  padding-inline: 1rem;
  background: var(--red);
  color: var(--white);
}

.home-header nav a.nav-contact:hover {
  background: var(--navy);
  color: var(--white);
}

.home-main {
  margin-top: clamp(1.2rem, 3vw, 2rem);
}

.home-main > section:not(.hero) {
  margin-top: clamp(2.75rem, 6vw, 4.25rem);
}

.hero.home-hero {
  display: grid;
  min-height: 31rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid rgb(255 255 255 / 86%);
  border-radius: 2rem;
  background: linear-gradient(120deg, #fff2dc 0%, #fffdf8 50%, #eef2ff 100%);
  box-shadow: 0 24px 60px rgb(16 43 92 / 8%);
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.hero.home-hero .hero-kicker {
  margin: 0 0 0.75rem;
  color: var(--purple);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero.home-hero h1 {
  max-width: 14ch;
  font-size: clamp(2.8rem, 5vw, 4.65rem);
  line-height: 1.04;
}

.hero.home-hero .hero-tagline {
  max-width: 33rem;
  margin: 1.2rem 0 1.5rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.25rem;
}

.hero-secondary-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
}

.hero-secondary-link span {
  color: var(--red);
  font-size: 1.2rem;
  transition: transform 160ms ease;
}

.hero-secondary-link:hover span {
  transform: translateX(3px);
}

.hero-place {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.hero-place-dot,
.hero-level-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 0.55rem;
  border-radius: 50%;
  background: var(--orange);
}

.hero-visual {
  position: relative;
  min-width: 0;
}

.hero-photo-frame {
  position: relative;
  margin: 0;
  padding: 0.7rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 1.7rem;
  background: rgb(255 255 255 / 70%);
  box-shadow: 0 22px 44px rgb(16 43 92 / 14%);
  transform: rotate(1deg);
}

.hero-photo-frame .hero-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1.2rem;
}

.hero-photo-frame figcaption {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  left: 0.7rem;
  display: grid;
  gap: 0.15rem;
  padding: 2.5rem 1rem 0.9rem;
  border-radius: 0 0 1.2rem 1.2rem;
  background: linear-gradient(transparent, rgb(9 23 49 / 80%));
  color: var(--white);
}

.hero-photo-frame figcaption span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hero-photo-frame figcaption strong {
  font-size: 1.05rem;
}

.hero-levels {
  position: absolute;
  top: -0.9rem;
  right: -0.7rem;
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 12px 30px rgb(16 43 92 / 12%);
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 800;
}

.hero-level-divider {
  color: var(--orange);
  font-size: 1.1rem;
}

.home-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(1.25rem, 4vw, 3.25rem);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: var(--white);
  box-shadow: 0 14px 35px rgb(16 43 92 / 5%);
}

.home-intro-heading .section-kicker {
  margin-bottom: 0.55rem;
}

.home-intro-heading h2 {
  max-width: 12ch;
  margin-bottom: 0;
}

.home-intro-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
}

.home-intro-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.home-intro-tags span {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffaf1;
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 700;
}

.home-main #approach {
  border-color: #e9e2ef;
  box-shadow: 0 14px 35px rgb(16 43 92 / 5%);
}

.home-main #programs {
  border: 1px solid var(--line);
  box-shadow: 0 14px 35px rgb(16 43 92 / 5%);
}

.home-main .school-level {
  box-shadow: 0 10px 26px rgb(16 43 92 / 5%);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.home-main .school-level:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgb(16 43 92 / 10%);
}

.home-main #gallery {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: var(--white);
}

.home-main #gallery .button {
  margin-top: 0.4rem;
}

.home-main #news {
  box-shadow: 0 14px 34px rgb(201 47 43 / 7%);
}

.home-main .contact-section {
  box-shadow: 0 18px 42px rgb(16 43 92 / 15%);
}

@media (max-width: 880px) {
  .home-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-header nav {
    width: 100%;
    justify-content: flex-start;
  }

  .hero.home-hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr);
    gap: 1.75rem;
    padding: clamp(1.5rem, 4vw, 2.75rem);
  }

  .hero.home-hero h1 {
    font-size: clamp(2.55rem, 6vw, 3.7rem);
  }

  .hero-levels {
    right: -0.35rem;
  }
}

@media (max-width: 620px) {
  .school-topbar-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.65rem 1rem;
  }

  .topbar-contact {
    gap: 0.35rem 0.9rem;
    font-size: 0.78rem;
  }

  .home-header {
    padding: 0.75rem 1rem;
  }

  .home-header nav {
    gap: 0.25rem;
  }

  .home-header nav a {
    min-height: 44px;
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
  }

  .home-header nav a.nav-contact {
    padding-inline: 0.8rem;
  }

  .home-main {
    width: calc(100% - 1.25rem);
    margin-top: 0.9rem;
  }

  .hero.home-hero {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem 1.2rem;
    border-radius: 1.4rem;
  }

  .hero.home-hero h1 {
    max-width: 14ch;
    font-size: clamp(2.5rem, 11vw, 3.5rem);
  }

  .hero.home-hero .hero-tagline {
    margin-block: 0.9rem 1.2rem;
  }

  .hero-place {
    margin-top: 1.1rem;
  }

  .hero-photo-frame {
    transform: none;
  }

  .hero-levels {
    top: -0.65rem;
    right: 0.1rem;
    min-height: 42px;
    gap: 0.35rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.78rem;
  }

  .home-intro {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1.25rem;
  }

  .home-intro-heading h2 {
    max-width: none;
  }

  .home-main #programs,
  .home-main #gallery,
  .home-main #news,
  .home-main #approach,
  .home-main .contact-section {
    padding: 1.25rem;
  }

  .home-main #gallery {
    padding: 1.25rem;
  }
}


/* Friendly homepage placeholders while staff add real photos and updates */
.home-main .gallery-grid > p {
  display: flex;
  min-height: 7rem;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0;
  padding: 1.25rem;
  border: 1px dashed #d5d9e2;
  border-radius: 1rem;
  background: linear-gradient(135deg, #fffdf9, #f7f4fb);
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}

.home-main .gallery-grid > p::before {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 2.4rem;
  place-items: center;
  border-radius: 50%;
  background: #fff0d6;
  color: #9a5c0d;
  content: "✦";
  font-size: 1.2rem;
}

.home-main #news .news-empty {
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border: 1px solid #f0d8d2;
  background: rgb(255 255 255 / 82%);
  text-align: center;
}

.home-main #news .news-empty::before {
  color: var(--red);
  content: "✦";
  font-size: 1.1rem;
}
/* Compact, accessible navigation on phones */
.mobile-nav-toggle {
  display: none;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 760px) {
  header.has-mobile-nav {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  header.has-mobile-nav .mobile-nav-toggle:not([hidden]) {
    display: inline-flex;
  }

  header.has-mobile-nav > nav {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.45rem 0 0.6rem;
    box-shadow: none;
  }

  header.has-mobile-nav > nav[hidden] {
    display: none;
  }

  header.has-mobile-nav > nav:not([hidden]) {
    display: flex;
  }

  header.has-mobile-nav > nav a {
    width: 100%;
    min-height: 44px;
    padding: 0.65rem 0.75rem;
    border-radius: 0.55rem;
  }
}



/* Contact page map and direct WhatsApp contact */
.contact-icon-green {
  background: #e8f6ec;
  color: #176b41;
}

.contact-map-card {
  margin-top: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  background: var(--white);
  box-shadow: 0 14px 35px rgb(16 43 92 / 6%);
}

.contact-map-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1rem;
}

.contact-map-heading h2 {
  margin-bottom: 0.4rem;
}

.contact-map-heading p:last-child {
  margin-bottom: 0;
  color: var(--muted);
}

.contact-map-heading .contact-action {
  flex: 0 0 auto;
  min-width: 10.5rem;
}

.contact-map {
  height: clamp(18rem, 42vw, 31rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #f3f5f8;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 620px) {
  .contact-map-card {
    padding: 1rem;
  }

  .contact-map-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-map-heading .contact-action {
    width: 100%;
  }

  .contact-map {
    height: 18rem;
  }
}

/* Refined shared visual system: calm, clear, school-first */
:root {
  --navy: #102b5c;
  --ink: #1d2c43;
  --muted: #59677a;
  --orange: #ef8c24;
  --red: #bd2c2c;
  --purple: #713b91;
  --cream: #f7f8fa;
  --white: #fff;
  --line: #e1e4e8;
}

body {
  background: var(--cream);
  color: var(--ink);
}

a {
  text-underline-offset: 0.2em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.school-topbar {
  background: var(--navy);
  color: #fff;
}

.school-topbar a {
  color: #fff;
}

.home-header {
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 0.8rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
  background: #fff;
  box-shadow: none;
}

.site-brand {
  min-width: 0;
}

.site-brand img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  background: #fff;
}

.brand-copy strong {
  color: var(--navy);
}

.brand-copy small {
  color: var(--muted);
}

.home-header nav {
  gap: 0.25rem;
}

.home-header nav a {
  position: relative;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  border-radius: 0;
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}

.home-header nav a:hover,
.home-header nav a[aria-current="page"]:not(.nav-contact) {
  background: #fff5e7;
  color: var(--red);
}

.home-header nav a.nav-contact {
  margin-left: 0.35rem;
  padding-inline: 1rem;
  border: 1px solid var(--orange);
  border-radius: 0.25rem;
  background: var(--orange);
  color: #172238;
}

.home-header nav a.nav-contact:hover {
  background: #ffca74;
  color: #172238;
}

.mobile-nav-toggle {
  border: 1px solid var(--navy);
  border-radius: 0.25rem;
  background: #fff;
  color: var(--navy);
}

.mobile-nav-toggle[hidden] {
  display: none;
}

.home-main,
.page-main {
  width: min(calc(100% - 2rem), 1200px);
  margin-inline: auto;
}

.home-main {
  margin-top: clamp(1rem, 3vw, 2.25rem);
  margin-bottom: 4rem;
}

.page-main {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(1.5rem, 4vw, 3.25rem);
  margin-bottom: 4rem;
}

.hero.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  min-height: 480px;
  padding: clamp(2rem, 6vw, 5rem);
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--navy);
  color: #fff;
  isolation: isolate;
}

.hero-copy,
.hero-visual {
  position: relative;
  z-index: 1;
}

.hero.home-hero .hero-kicker {
  color: #ffe7c4;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero.home-hero h1 {
  max-width: 10ch;
  color: #fff;
  font-size: clamp(3rem, 6.3vw, 5.3rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.hero.home-hero .hero-tagline,
.hero.home-hero .hero-place {
  color: #e6edf8;
}

.hero.home-hero .hero-actions {
  align-items: center;
}

.hero.home-hero .button {
  border: 1px solid var(--orange);
  border-radius: 0.25rem;
  background: var(--orange);
  color: #18263d;
  box-shadow: none;
}

.hero.home-hero .hero-secondary-link {
  color: #fff;
}

.hero.home-hero .hero-secondary-link span {
  color: #ffe7c4;
}

.hero-photo-frame {
  padding: 0;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 0.25rem;
  background: #fff;
  box-shadow: none;
  transform: none;
}

.hero-photo-frame .hero-photo {
  border-radius: 0;
}

.hero-photo-frame figcaption {
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0;
  background: rgb(11 31 66 / 86%);
}

.hero-levels {
  top: auto;
  right: -0.8rem;
  bottom: -1rem;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  box-shadow: none;
}

.home-intro {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 0;
  box-shadow: none;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.home-intro-tags span {
  border-radius: 0.2rem;
  background: #fffaf1;
}

.home-main #approach,
.home-main #programs,
.home-main #gallery,
.home-main #news {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-main #gallery {
  padding-inline: 0;
}

.approach-section {
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: 0.35rem;
  background: #fff;
  box-shadow: none;
}

.approach-card,
.school-level,
.news-card,
.gallery-card,
.admissions-question,
.admissions-document {
  border-radius: 0.35rem;
  background: #fff;
  box-shadow: none;
}

.approach-card {
  border-top-width: 3px;
}

.approach-card:hover,
.school-level:hover,
.news-card:hover,
.gallery-card:hover {
  border-color: #e5a64f;
  box-shadow: none;
  transform: translateY(-2px);
}

.school-level {
  border-top-width: 4px;
}

.school-level img {
  max-width: 100%;
  max-height: 112px;
  object-fit: contain;
  background: #fff;
}

.page-hero {
  margin: 0;
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.5rem);
  border: 0;
  box-shadow: none;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.page-hero > p:first-child {
  margin-bottom: 0.55rem;
  color: var(--red);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-hero h1 {
  max-width: 16ch;
  margin-bottom: 0.8rem;
  color: var(--navy);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.page-hero > p:not(:first-child) {
  max-width: 62ch;
  color: var(--muted);
}

.page-main > section:not(.page-hero) {
  margin: 0;
}

.page-main .approach-section {
  margin-block: 0.5rem;
}

.admissions-question,
.admissions-document {
  border: 1px solid var(--line);
  box-shadow: none;
}

.school-levels {
  gap: 1rem;
}

.contact-panels {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: stretch;
  gap: 1.25rem;
}

.contact-card,
.contact-map-card,
.contact-form-card {
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: #fff;
  box-shadow: none;
}

.contact-map-card {
  min-width: 0;
  margin: 0;
  padding: clamp(1rem, 2.5vw, 1.75rem);
}

.contact-map-heading {
  align-items: flex-start;
  flex-direction: column;
}

.contact-map-heading .contact-action {
  min-width: 0;
}

.contact-map {
  height: clamp(19rem, 35vw, 27rem);
  border-radius: 0.25rem;
}

.contact-form-card.contact-form-wide {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.contact-action,
.contact-submit {
  border-radius: 0.25rem;
}

.contact-action-map {
  background: #fff4e2;
}

.news-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-weight: 700;
}

.news-filter-bar[hidden] {
  display: none;
}

.news-filter-bar [role="group"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.news-filter {
  min-height: 42px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.news-filter[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.news-card[hidden] {
  display: none;
}

.gallery-image-button {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #f1eee8;
  cursor: zoom-in;
}

.gallery-image-button img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 180ms ease;
}

.gallery-image-button:hover img {
  transform: scale(1.025);
}

.gallery-lightbox {
  position: fixed;
  width: min(92vw, 1080px);
  max-width: 92vw;
  max-height: 92dvh;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: #fff;
  color: var(--ink);
}

.gallery-lightbox::backdrop {
  background: rgb(10 25 50 / 86%);
}

.gallery-lightbox-close {
  display: block;
  min-height: 44px;
  margin: 0 0 0.5rem auto;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--navy);
  border-radius: 0.25rem;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.gallery-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: calc(92dvh - 6.5rem);
  margin: 0 auto;
  object-fit: contain;
}

.gallery-lightbox-caption {
  margin: 0.6rem 0 0;
  color: var(--muted);
  text-align: center;
}

.site-footer {
  margin-top: 4rem;
  padding: 3rem max(1rem, calc((100vw - 1200px) / 2));
  box-shadow: none;
  background: var(--navy);
  color: #fff;
}

.site-footer h2,
.site-footer h3 {
  color: #fff;
}

.site-footer a,
.site-footer .footer-map,
.site-footer .footer-facebook {
  color: #fff;
}

.site-footer a:hover {
  color: #ffe7c4;
}

.footer-bottom {
  border-top-color: rgb(255 255 255 / 22%);
  color: #d8e0ee;
}

@media (max-width: 900px) {
  .home-header {
    padding-inline: 1.25rem;
  }

  .home-header nav {
    gap: 0.1rem;
  }

  .home-header nav a {
    padding-inline: 0.5rem;
    font-size: 0.9rem;
  }

  .contact-panels {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .hero.home-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 1.5rem;
    padding: clamp(1.5rem, 7vw, 2.5rem);
  }

  .hero.home-hero h1 {
    max-width: 12ch;
    font-size: clamp(2.7rem, 12vw, 4rem);
  }

  .hero-levels {
    right: 0.4rem;
    bottom: -0.75rem;
  }

  .home-intro {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .home-header.has-mobile-nav {
    min-height: 72px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .home-header.has-mobile-nav > nav {
    width: 100%;
    padding: 0.5rem 0;
    box-shadow: none;
  }

  .home-header.has-mobile-nav > nav[hidden] {
    display: none;
  }

  .home-header.has-mobile-nav > nav:not([hidden]) {
    display: flex;
  }

  .home-header.has-mobile-nav > nav a {
    min-height: 44px;
  }

  .contact-panels {
    grid-template-columns: 1fr;
  }

  .contact-map {
    height: 22rem;
  }
}

@media (max-width: 620px) {
  .school-topbar-inner {
    gap: 0.25rem;
  }

  .topbar-contact {
    flex-wrap: wrap;
  }

  .home-main,
  .page-main {
    width: min(calc(100% - 1.25rem), 1200px);
  }

  .page-main {
    gap: 1.25rem;
  }

  .page-hero {
    padding: 1.5rem 1.2rem;
  }

  .page-hero h1 {
    font-size: clamp(2.2rem, 10vw, 3rem);
  }

  .approach-section {
    padding: 1.25rem;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-map {
    height: 18rem;
  }

  .news-filter-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer {
    padding: 2rem 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Design refresh: warm, clear, and consistent across school pages. */
:root {
  --ink: #243247;
  --muted: #526176;
  --line: #e4e8ee;
  --font-body: "Nunito Sans", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Varela Round", "Nunito Sans", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { font-family: var(--font-body); line-height: 1.65; }
h1, h2, h3 { font-family: var(--font-heading); text-wrap: balance; }

.home-header {
  position: relative; z-index: 5; min-height: 84px;
  gap: clamp(1rem, 2.5vw, 2rem); border-bottom-color: #e8ebf0;
  box-shadow: 0 4px 18px rgb(16 43 92 / 4%);
}
.home-header .site-brand { flex: 0 1 auto; gap: 0.8rem; }
.home-header .site-brand-text-only { gap: 0; }
.brand-copy strong {
  font-family: var(--font-heading); font-size: 1.15rem; letter-spacing: -0.02em;
}
.brand-copy small { color: var(--muted); font-size: 0.76rem; font-weight: 600; }
.home-header nav { margin-left: auto; gap: clamp(0.15rem, 0.7vw, 0.65rem); }
.home-header nav a {
  min-height: 44px; padding: 0.55rem 0.8rem; border-radius: 999px;
  color: #34445b; font-size: 0.93rem; font-weight: 700;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.home-header nav a:hover { background: #fff4e4; color: var(--navy); }
.home-header nav a[aria-current="page"] { background: #fff1d9; color: var(--navy); }
.home-header nav a.nav-contact { padding-inline: 1rem; background: var(--navy); color: #fff; }
.home-header nav a.nav-contact:hover { background: #1b407e; color: #fff; transform: translateY(-1px); }
.mobile-nav-toggle {
  min-width: 5rem; min-height: 44px; padding: 0.55rem 0.9rem;
  border: 1px solid #cbd4e2; border-radius: 999px; background: #fff;
  color: var(--navy); font: inherit; font-weight: 800; cursor: pointer;
}
.mobile-nav-toggle:hover { border-color: var(--navy); background: #f5f8fc; }

.hero.home-hero {
  min-height: 480px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center; gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2rem, 5vw, 4.75rem); border-radius: 1.5rem;
}
.hero.home-hero h1 { max-width: 11ch; text-wrap: balance; }
.hero-photo-frame { width: 100%; border-width: 5px; border-radius: 1rem; }
.hero-photo-frame .hero-photo { min-height: 17rem; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-photo-frame figcaption { padding: 1.6rem 1rem 3rem; }
.home-intro { gap: clamp(1.25rem, 4vw, 3rem); border-left-width: 6px; }
main > section:not(.hero) { margin-top: clamp(2.25rem, 5vw, 4rem); }
.approach-section { gap: clamp(1.25rem, 3vw, 2.5rem); border-top-width: 5px; border-radius: 1rem; }
.approach-card, .school-level, .news-card, .gallery-card,
.contact-card, .contact-map-card, .contact-form-card { border-radius: 0.85rem; }
.approach-card { padding: clamp(1rem, 2vw, 1.35rem); }
.school-level { padding: clamp(1rem, 2.2vw, 1.5rem); }
.button, .contact-action, .contact-submit {
  min-height: 48px; border-radius: 999px; font-family: var(--font-body); font-weight: 800;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.button:hover, .contact-action:hover, .contact-submit:hover { transform: translateY(-2px); }
.home-hero .button { border-radius: 999px; }
.contact-map-card { overflow: hidden; }
.contact-map iframe { border: 0; }
.site-footer { margin-top: clamp(3rem, 7vw, 5rem); border-top-width: 6px; }
.footer-column a, .footer-contact a { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .home-header { padding-inline: 1.25rem; }
  .home-header nav a { padding-inline: 0.6rem; }
}
@media (max-width: 760px) {
  .home-header.has-mobile-nav { min-height: 72px; padding: 0.8rem 1rem; }
  .home-header.has-mobile-nav > nav:not([hidden]) { gap: 0.25rem; padding: 0.65rem 0 0.25rem; }
  .home-header.has-mobile-nav > nav a { min-height: 44px; padding: 0.5rem 0.7rem; }
  .hero.home-hero {
    min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 1.5rem;
    padding: clamp(1.5rem, 6vw, 2.5rem); border-radius: 1.1rem;
  }
  .hero.home-hero .hero-copy { max-width: 40rem; }
  .hero-photo-frame .hero-photo { min-height: 14rem; }
  .approach-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
}
@media (max-width: 520px) {
  .home-header .site-brand-text-only .brand-copy strong { max-width: 14ch; font-size: 1.03rem; }
  .home-header .site-brand-text-only .brand-copy small { font-size: 0.7rem; }
  .home-intro, .home-main #programs { padding: 1.25rem; }
  .school-levels { grid-template-columns: minmax(0, 1fr); }
  .hero.home-hero h1 { font-size: clamp(2.55rem, 12vw, 3.5rem); }
  .hero-actions { align-items: stretch; }
  .hero-actions .button { text-align: center; }
}


/* Interior-page polish: page-specific actions, admission steps, and useful empty states. */
.page-main > section:not(.page-hero) { margin-top: 0; }
.page-main .page-hero {
  display: flex;
  min-height: 16rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  padding: clamp(2rem, 5.5vw, 4.25rem);
  border: 1px solid #e9e8e4;
  box-shadow: none;
  border-radius: 1.4rem;
  background:
    radial-gradient(circle at 94% 12%, rgb(239 140 36 / 12%), transparent 13rem),
    linear-gradient(128deg, #fff7e9 0%, #fff 62%, #f2f5fb 100%);
  box-shadow: 0 18px 44px rgb(16 43 92 / 6%);
}
.page-main .page-hero h1 { max-width: 16ch; }
.page-main .page-hero > p:not(:first-child) {
  max-width: 44rem;
  margin: 0.9rem 0 0;
}
.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.page-hero-actions .button { margin: 0; }
.page-hero-actions .button-secondary,
.page-empty-state .button-secondary {
  border: 1px solid #cbd5e2;
  background: #fff;
  color: var(--navy);
}
.page-hero-actions .button-secondary:hover,
.page-empty-state .button-secondary:hover {
  border-color: var(--orange);
  background: #fff0d6;
  color: var(--navy);
}

.admissions-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}
.admissions-step {
  display: flex;
  min-width: 0;
  min-height: 6rem;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 8px 22px rgb(16 43 92 / 4%);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.admissions-step:hover {
  transform: translateY(-2px);
  border-color: #efc27e;
  color: var(--ink);
  box-shadow: 0 12px 26px rgb(16 43 92 / 8%);
}
.admissions-step-number {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 2.6rem;
  place-items: center;
  border-radius: 50%;
  background: #fff0d6;
  color: #85500e;
  font-weight: 900;
}
.admissions-step strong,
.admissions-step small { display: block; }
.admissions-step strong { color: var(--navy); line-height: 1.3; }
.admissions-step small { margin-top: 0.25rem; color: var(--muted); line-height: 1.35; }

.page-empty-state {
  display: flex;
  min-width: 0;
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid #e7e8ec;
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 100% 0%, rgb(239 140 36 / 10%), transparent 12rem),
    linear-gradient(135deg, #fff 0%, #fffaf1 100%);
  box-shadow: 0 12px 30px rgb(16 43 92 / 5%);
}
.empty-state-icon {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 3.5rem;
  place-items: center;
  border-radius: 1rem;
  background: #fff0d6;
  color: #9a5c0d;
}
.empty-state-icon svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}
.page-empty-state h2 {
  margin: 0.15rem 0 0.45rem;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
}
.page-empty-state p:not(.section-kicker) {
  max-width: 48rem;
  margin: 0 0 1rem;
  color: var(--muted);
}
.page-empty-state .section-kicker { margin-bottom: 0.4rem; }
.gallery-empty-state .button,
.news-empty-state .button { margin-top: 0.1rem; }

#contact-form { scroll-margin-top: 1.5rem; }

@media (max-width: 760px) {
  .admissions-steps { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .page-main .page-hero {
    min-height: 0;
    padding: 1.6rem 1.25rem;
    border-radius: 1.1rem;
  }
  .page-hero-actions { align-items: stretch; }
  .page-hero-actions .button { width: 100%; text-align: center; }
  .page-empty-state { flex-direction: column; }
}

/* ---------- 404 page ---------- */
.page-not-found {
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) 0;
  text-align: center;
}

.page-not-found-code {
  margin: 0 0 0.4rem;
  color: #9a5c0d;
  font-family: "Varela Round", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(3rem, 12vw, 5rem);
  font-weight: 800;
  line-height: 1;
}

.page-not-found h1 {
  margin: 0 0 1rem;
  color: var(--navy);
  font-size: clamp(1.5rem, 4vw, 2.15rem);
  line-height: 1.25;
}

.page-not-found-text {
  max-width: 34rem;
  margin: 0 auto 1.75rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.page-not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.page-not-found-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  box-shadow: none;
}

.page-not-found-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--navy);
  font-weight: 600;
}

@media (max-width: 560px) {
  .page-not-found-actions .button,
  .page-not-found-actions .button-secondary {
    width: 100%;
    text-align: center;
  }
}

/* ---------- hero picture element (WebP + JPEG fallback) ---------- */
.hero-photo-frame picture {
  display: block;
}

/* ---------- mobile navigation toggle states ---------- */
.mobile-nav-toggle[aria-expanded="true"] {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

.mobile-nav-toggle:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* Facebook news card link keeps the site's bold underlined link style. */
.news-card-link {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ==========================================================================
   Feed sections: manual pinning lane + latest / top / archives buckets.
   Shared by gallery.html and news.html. Card visuals stay as-is; this block
   only adds section rhythm, a restrained pinned marker, predictable columns,
   and a guaranteed [hidden] fallback (JS owns empty-state visibility).
   ========================================================================== */

[data-gallery-root],
[data-news-root] {
  min-width: 0;
}

.feed-section {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

.feed-section:first-child {
  margin-top: 0;
}

.feed-section + .feed-section {
  margin-top: clamp(2.5rem, 5.5vw, 4rem);
}

.feed-section[hidden],
.gallery-empty-state[hidden],
.news-empty-state[hidden] {
  display: none;
}

.feed-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin: 0;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

.feed-section-head h2 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Pinned lane: thin orange rule plus a whisper of tint, never a color block. */
.feed-section[data-feed-section="manual"] {
  padding: 0.85rem clamp(0.9rem, 2vw, 1.35rem) 1.15rem;
  box-shadow: none;
  border-radius: 0 0.9rem 0.9rem 0;
  background: linear-gradient(180deg, rgb(239 140 36 / 8%), rgb(239 140 36 / 0%) 70%);
}

.feed-section[data-feed-section="manual"] .feed-section-head {
  border-bottom-color: rgb(239 140 36 / 32%);
}

/* Columns: the base auto-fit grids stay untouched; buckets get fixed steps. */
.feed-section .gallery-grid,
.feed-section .news-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.9rem, 2vw, 1.3rem);
  margin-top: clamp(1rem, 2vw, 1.4rem);
}

@media (min-width: 600px) {
  .feed-section .gallery-grid,
  .feed-section .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .feed-section .gallery-grid,
  .feed-section .news-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Bucket cards: identical visual language, two-line titles only. */
.feed-section .gallery-card,
.feed-section .news-card {
  min-width: 0;
}

.feed-section .gallery-card figcaption,
.feed-section .news-card h3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}

.feed-section .news-card h3 {
  max-height: calc(2 * 1.35em);
}

/* ---------- privacy policy ---------- */
.policy-wrap {
  max-width: 46rem;
  margin: 2rem auto 0;
}

.policy-card {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: 0.85rem;
  background: var(--white);
}

.policy-updated {
  margin: 0 0 1.75rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.policy-card h2 {
  margin: 2rem 0 0.6rem;
  color: var(--navy);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
}

.policy-card h2:first-of-type {
  margin-top: 0;
}

.policy-card p,
.policy-card li {
  color: var(--ink);
  line-height: 1.7;
}

.policy-card p {
  margin: 0 0 1rem;
}

.policy-card ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.policy-card li {
  margin-bottom: 0.5rem;
}

.policy-card a {
  color: var(--navy);
}

@media (max-width: 560px) {
  .policy-wrap {
    margin-top: 1.25rem;
  }
}

/* ==========================================================================
   Gallery album wall, compact news list, and loading skeletons.
   Shared by gallery.html and news.html. Everything here is additive: the
   earlier .gallery-grid / .news-grid / card rules stay in place and are only
   re-scoped through the .feed-section namespaced overrides below.
   ========================================================================== */

/* ---------- gallery: column-count waterfall (album wall) ---------- */
/* The legacy feed grids are display:grid; a column layout needs a block
   formatting context, so the drop-down cards can flow and stagger. */
.feed-section .gallery-grid {
  display: block;
  column-count: 1;
  column-gap: clamp(0.9rem, 2vw, 1.3rem);
  margin-top: clamp(1rem, 2vw, 1.4rem);
}

@media (min-width: 600px) {
  .feed-section .gallery-grid {
    column-count: 2;
  }
}

@media (min-width: 1000px) {
  .feed-section .gallery-grid {
    column-count: 3;
  }
}

.feed-section .gallery-card {
  display: block;
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 clamp(0.9rem, 2vw, 1.3rem);
}

/* "auto 4 / 3" keeps the 4/3 box as a placeholder for unloaded photos and
   then hands the height back to the image's natural ratio, which is what
   makes the wall stagger. */
.feed-section .gallery-card img {
  width: 100%;
  height: auto;
  aspect-ratio: auto 4 / 3;
  object-fit: cover;
}

.feed-section .gallery-card figcaption {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  padding: 0.55rem 0.8rem 0.65rem;
  box-shadow: inset 0 1px 0 rgb(231 232 236 / 70%);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Optional album badge written by the renderer: sits inline with the caption
   text and wraps with it on narrow cards. */
.feed-section .gallery-card .gallery-album {
  display: inline-block;
  margin-right: 0.45rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #fdf0e0;
  color: #8a4a06;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  vertical-align: 0.06em;
  white-space: nowrap;
}

/* ---------- news: compact horizontal rows ---------- */
.feed-section .news-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.65rem, 1.5vw, 0.9rem);
  margin-top: clamp(1rem, 2vw, 1.4rem);
}

@media (min-width: 1024px) {
  .feed-section .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.feed-section .news-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  gap: 0.85rem;
  padding: 0.7rem;
  /* The thumbnail now has its own inset padding and radius, so the row no
     longer needs to clip: visible overflow keeps focus rings unclipped. */
  overflow: visible;
  border-radius: 0.95rem;
}

.feed-section .news-card > img {
  grid-column: 1;
  grid-row: 1;
  width: 96px;
  height: 96px;
  aspect-ratio: 1 / 1;
  border-radius: 0.7rem;
  object-fit: cover;
}

/* Without a photo the content is the only child, so it takes the full width
   instead of being squeezed into the 96px thumbnail column. */
.feed-section .news-card > .news-card-content {
  grid-column: 1 / -1;
  padding: 0;
  min-width: 0;
}

.feed-section .news-card > img + .news-card-content {
  grid-column: 2;
  grid-row: 1;
}

.feed-section .news-card-meta {
  gap: 0.4rem;
  font-size: 0.78rem;
}

.feed-section .news-card h3 {
  margin: 0.3rem 0 0.25rem;
  font-size: 1.02rem;
  line-height: 1.35;
  max-height: calc(2 * 1.35em);
}

.feed-section .news-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
  line-height: 1.55;
}

.feed-section .news-card .news-engagement {
  color: var(--muted);
  font-size: 0.78rem;
}

.feed-section .news-card > .news-card-content > a {
  font-size: 0.88rem;
}

@media (max-width: 560px) {
  .feed-section .news-card {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 0.7rem;
  }

  .feed-section .news-card > img {
    width: 80px;
    height: 80px;
  }
}

/* ---------- section rhythm: three lanes, typography only ---------- */
.feed-section[data-feed-section="latest"] .feed-section-head h2 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  letter-spacing: -0.005em;
}

.feed-section[data-feed-section="top"] .feed-section-head {
  padding-bottom: 0.55rem;
  border-bottom: 2px solid rgb(16 43 92 / 18%);
}

.feed-section[data-feed-section="top"] .feed-section-head h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  letter-spacing: -0.015em;
}

.feed-section[data-feed-section="archives"] .feed-section-head {
  padding-bottom: 0.6rem;
  border-bottom-style: dashed;
}

.feed-section[data-feed-section="archives"] .feed-section-head h2 {
  color: var(--muted);
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  letter-spacing: 0.005em;
}

/* ---------- loading skeletons ---------- */
.skeleton-card {
  aspect-ratio: 4 / 3;
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 clamp(0.9rem, 2vw, 1.3rem);
  border-radius: 0.85rem;
  background: linear-gradient(90deg, #eceff3 25%, #f6f8fa 37%, #eceff3 63%);
  background-size: 400% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-row {
  height: 96px;
  border-radius: 0.85rem;
  background: linear-gradient(90deg, #eceff3 25%, #f6f8fa 37%, #eceff3 63%);
  background-size: 400% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

@media (max-width: 560px) {
  .skeleton-row {
    height: 80px;
  }
}

@keyframes skeleton-pulse {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-card,
  .skeleton-row {
    animation: none;
  }
}


/* ---------- single loading placeholder ---------- */
.feed-loading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.9rem, 2vw, 1.3rem);
  margin-top: 1.5rem;
}

@media (min-width: 600px) {
  .feed-loading {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .feed-loading {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.feed-loading[hidden] {
  display: none;
}

/* ==========================================================================
   School-site audit pass — one rhythm, one type ladder, one card language.
   Adds the modules a school website is expected to carry: notice board,
   key facts, quick links, admissions call to action, and a four-column
   footer. Tokens only: no new colours, fonts, or dependencies.
   ========================================================================== */

:root {
  --space-section: clamp(2.5rem, 4.5vw, 3.5rem);
  --pad-panel: clamp(1.25rem, 3vw, 2.25rem);
  --pad-card: clamp(1rem, 2vw, 1.35rem);
  --gap-grid: clamp(0.85rem, 1.6vw, 1.15rem);
  --radius-card: 0.85rem;
  --type-h1: clamp(2.05rem, 3.9vw, 3.4rem);
  --type-h2: clamp(1.5rem, 2.4vw, 2rem);
  --type-h3: clamp(1.12rem, 1.5vw, 1.32rem);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- type ladder: one scale for desktop and mobile ---------- */
body {
  font-size: 1rem;
  line-height: 1.7;
}

h1 { font-size: var(--type-h1); }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); }

p,
li,
dd {
  line-height: 1.7;
}

.page-main .page-hero h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.85rem);
}

.hero.home-hero h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.85rem);
  line-height: 1.02;
}

/* The three approach cards read best in a full-width row of their own. */
@media (min-width: 1024px) {
  #approach.approach-section {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .approach-intro {
    max-width: 48rem;
  }
}

.approach-card p,
.news-card p {
  font-size: 0.98rem;
}

.footer-column p {
  font-size: 0.95rem;
}

/* ---------- vertical rhythm: the same clamp ladder on every page ---------- */
.home-main > section:not(.hero),
.page-main > section:not(.page-hero) {
  margin-top: var(--space-section);
}

/* Carded blocks share one inner inset. */
.home-main .home-intro,
.home-main .approach-section,
.home-main .contact-section,
.page-main .approach-section,
.notice-strip,
.admissions-cta {
  padding: var(--pad-panel);
}

/* Transparent blocks stay flush so their headings line up with the column. */
.home-main #programs,
.home-main #gallery,
.home-main #news {
  padding: 0;
}

.page-main > .page-hero + div,
.page-main > .page-hero + nav,
.page-main > section + div,
.page-main > div + section {
  margin-top: var(--space-section);
}

.home-main > section.notice-strip {
  margin-top: clamp(0.9rem, 2vw, 1.25rem);
}

.home-main > section.key-facts {
  margin-top: clamp(0.75rem, 1.6vw, 1rem);
}

/* ---------- cards and grids: one inset, one gap, one radius ---------- */
.approach-cards,
.school-levels,
.news-grid,
.gallery-grid,
.quick-links-grid {
  gap: var(--gap-grid);
}

.approach-card,
.school-level,
.news-card,
.gallery-card,
.contact-card,
.contact-map-card,
.contact-form-card,
.quick-link-card {
  border-radius: var(--radius-card);
}

.approach-card,
.news-card-content,
.quick-link-card {
  padding: var(--pad-card);
}

.home-main .school-level {
  padding: var(--pad-card);
}

.gallery-card figcaption {
  padding: 0.8rem var(--pad-card);
}

/* ---------- buttons: 48px minimum, one radius, one font ---------- */
.button,
.button-secondary {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 800;
  text-align: center;
}

/* ---------- notice board (home) ---------- */
.notice-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(1rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: 0 10px 24px rgb(16 43 92 / 5%);
}

.notice-strip-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.notice-strip-icon {
  display: inline-flex;
  color: var(--orange);
}

.notice-strip-title {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.notice-strip-more {
  padding-left: 0.65rem;
  box-shadow: none;
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 700;
}

.notice-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.notice-list li {
  min-width: 0;
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
  box-shadow: none;
}

.notice-list li:first-child {
  padding-left: 0;
  border-left: 0;
}

.notice-tag {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--red);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.notice-list a {
  display: inline-block;
  padding-block: 0.15rem;
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
  text-underline-offset: 0.2em;
}

.notice-list a:hover {
  color: var(--red);
}

.notice-list p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* ---------- key facts (home) ---------- */
.key-facts-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 2rem);
  margin: 0;
  padding: 0.2rem 0;
  border-block: 1px solid var(--line);
}

.key-fact {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.7rem 0 0.7rem clamp(0.9rem, 2vw, 1.5rem);
  box-shadow: none;
}

.key-fact:first-child {
  padding-left: 0;
  border-left: 0;
}

.key-fact dd {
  order: 1;
  margin: 0;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.25;
}

.key-fact dt {
  order: 2;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- quick links (home) ---------- */
.section-heading {
  max-width: 44rem;
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
}

.section-heading h2 {
  margin-bottom: 0.35rem;
}

.section-heading > p:last-child {
  margin: 0;
  color: var(--muted);
}

.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.quick-links-grid > li {
  display: flex;
  min-width: 0;
}

.quick-link-card {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.3rem;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 8px 22px rgb(16 43 92 / 4%);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.quick-link-card:hover,
.quick-link-card:focus-visible {
  transform: translateY(-2px);
  border-color: #efc27e;
  color: var(--ink);
  box-shadow: 0 12px 26px rgb(16 43 92 / 8%);
}

.quick-link-icon {
  display: inline-grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  margin-bottom: 0.4rem;
  border-radius: 0.7rem;
  background: #fff1d9;
  color: var(--navy);
}

.quick-link-icon svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.quick-link-card strong {
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.35;
}

.quick-link-card span:last-child {
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ---------- admissions call to action (home) ---------- */
.admissions-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: var(--radius-card);
  background: #fff4e4;
  box-shadow: 0 14px 34px rgb(16 43 92 / 6%);
}

.admissions-cta h2 {
  margin-bottom: 0.5rem;
}

.admissions-cta p:not(.section-kicker) {
  margin: 0;
  color: var(--muted);
}

.admissions-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.admissions-cta .button,
.admissions-cta .button-secondary {
  margin: 0;
}

.admissions-cta .button-secondary {
  border: 1px solid #cbd4e2;
  background: var(--white);
  color: var(--navy);
}

.admissions-cta .button-secondary:hover {
  border-color: var(--navy);
  background: #f2f5fb;
  color: var(--navy);
}

/* ---------- four-column footer ---------- */
.footer-grid {
  grid-template-columns:
    minmax(0, 1.35fr) minmax(0, 0.72fr) minmax(0, 0.82fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.footer-tagline {
  margin: 0.4rem 0 0.9rem;
  color: rgb(255 255 255 / 80%);
  font-size: 0.95rem;
  line-height: 1.6;
}

.footer-column.footer-nav h2,
.footer-column.footer-social h2 {
  color: #ffd68c;
  font-size: 0.92rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.footer-nav ul {
  gap: 0.1rem;
}

.footer-nav a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  font-weight: 600;
}

.footer-bottom {
  flex-wrap: wrap;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .notice-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .notice-list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.8rem;
  }

  .notice-list li {
    padding: 0.8rem 0 0;
    box-shadow: none;
    border-left: 0;
  }

  .notice-list li:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .quick-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admissions-cta {
    grid-template-columns: minmax(0, 1fr);
  }

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

@media (max-width: 760px) {
  .key-facts-list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.55rem;
  }

  .key-fact {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: baseline;
    column-gap: 0.75rem;
    padding: 0.6rem 0 0;
    box-shadow: none;
    border-left: 0;
  }

  .key-fact:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .key-fact dt {
    text-align: right;
  }

  .footer-nav a {
    min-height: 44px;
  }

  .admissions-cta-actions .button {
    flex: 1 1 12rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .approach-card p,
  .news-card p,
  .feed-section .news-card p,
  .footer-column p,
  .footer-contact,
  .contact-method-value {
    font-size: 1rem;
  }
}

@media (max-width: 520px) {
  .quick-links-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ---------- final: hero illustration + uniform album grid ---------- */
.hero-illustration {
  margin: 0;
  padding: 0.9rem;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 1.7rem;
  background: var(--white);
  box-shadow: 0 22px 44px rgb(16 43 92 / 14%);
  transform: rotate(1deg);
}

.hero-illustration svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.2rem;
}

@media (max-width: 760px) {
  .hero-illustration {
    transform: none;
  }
}

/* Every album photo keeps the same 4:3 frame instead of a waterfall. */
.feed-section .gallery-grid {
  display: grid;
  column-count: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.9rem, 2vw, 1.3rem);
}

@media (min-width: 600px) {
  .feed-section .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .feed-section .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.feed-section .gallery-card {
  break-inside: auto;
  page-break-inside: auto;
  margin-bottom: 0;
}

.feed-section .gallery-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.process-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.9rem, 2vw, 1.2rem);
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

@media (min-width: 820px) {
  .process-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.process-steps li {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: 0.85rem;
  background: var(--white);
}

.process-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  background: #fff0d6;
  color: #9a5c0d;
  font-weight: 800;
}

.process-steps strong { display: block; color: var(--navy); margin-bottom: 0.3rem; }
.process-steps p { margin: 0; color: var(--muted); font-size: 0.95rem; }

.gallery-facebook-note {
  margin: 0 0 0.5rem;
  padding: 0.8rem 1rem;
  box-shadow: none;
  border-radius: 0.5rem;
  background: #fff4e4;
  color: var(--muted);
  font-size: 0.95rem;
}

.form-status:empty { display: none; }
.form-status { margin: 0.6rem 0; color: var(--muted); }
/* ---------- mobile pass: tap targets, type floor, full-screen menu ---------- */
@media (max-width: 760px) {
  /* Body copy never drops below the 16px readability floor. */
  .page-hero p,
  .news-card p,
  .news-card-meta,
  .news-card-meta time,
  .footer-bottom p,
  .footer-bottom a,
  .topbar-location span,
  .notice-strip p,
  .parent-card p,
  .process-steps p,
  .gallery-card figcaption,
  .form-status {
    font-size: 1rem;
    line-height: 1.6;
  }

  /* Every interactive row clears 44px so nothing is a pinpoint tap. */
  .topbar-contact a,
  .footer-contact a,
  .footer-social a,
  .footer-bottom a,
  .footer-column a,
  .news-card-link,
  .notice-strip-more,
  .parent-card a,
  .process-steps a,
  .gallery-card figcaption a,
  .page-empty-state a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.5rem;
  }

  .footer-column li a,
  .footer-nav li a {
    width: 100%;
  }

  .footer-contact address,
  .footer-contact p {
    margin-block: 0;
  }

  /* Form controls: full-height fields and a comfortable checkbox row. */
  .contact-form input:not([type="checkbox"]):not([type="hidden"]),
  .contact-form select,
  .contact-form textarea,
  #admission-form input:not([type="checkbox"]),
  #admission-form select {
    min-height: 48px;
    font-size: 1rem;
  }

  .contact-consent,
  .form-field label {
    min-height: 44px;
    align-items: center;
  }

  .contact-consent input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-right: 0.6rem;
  }

  .honeypot input {
    min-height: 0;
  }

  /* The open menu becomes a full-screen panel instead of a squeezed row. */
  header.has-mobile-nav {
    position: relative;
    z-index: 60;
  }

  header.has-mobile-nav .mobile-nav-toggle {
    position: relative;
    z-index: 62;
    min-height: 44px;
    padding-inline: 1rem;
  }

  header.has-mobile-nav #site-nav:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 59;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 5.25rem 1.25rem 2rem;
    background: var(--white);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  header.has-mobile-nav #site-nav:not([hidden]) a {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 0.35rem;
    border-bottom: 1px solid var(--line);
    font-size: 1.0625rem;
    font-weight: 700;
  }

  header.has-mobile-nav #site-nav:not([hidden]) a:last-child {
    border-bottom: 0;
  }

  /* Stacked grids keep their images square instead of squeezed. */
  .news-grid,
  .gallery-grid {
    gap: 1rem;
  }

  .news-card img,
  .gallery-card img {
    min-height: 0;
  }
}
@media (max-width: 760px) {
  /* Remaining inline links get a real tap row rather than a text-height hit area. */
  .notice-list li a,
  .school-level p a,
  .news-actions a,
  .contact-details a,
  .contact-details p,
  .contact-details address a,
  .home-intro a,
  .approach-card a,
  .page-hero-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.5rem;
  }

  .notice-list li {
    padding-block: 0.15rem;
  }

  .contact-details a {
    overflow-wrap: anywhere;
  }

  /* Checkbox row: 44px tappable label, 24px box. */
  .contact-consent input[type="checkbox"],
  #admission-form input[type="checkbox"] {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }
}
@media (max-width: 760px) {
  /* Labels and chips keep their hierarchy but stop being microscopic. */
  .hero-kicker,
  .section-kicker,
  .home-intro-tags span,
  .news-card-meta span,
  .gallery-album {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .quick-link-card span,
  .quick-link-card p {
    font-size: 1rem;
  }
}
@media (max-width: 760px) {
  /* Higher-specificity pass: the base sheet sets these on compound selectors. */
  .hero.home-hero .hero-kicker,
  .page-main .page-hero > p:not(:first-child),
  .page-main .page-hero > p:first-child,
  .home-intro-tags span,
  .quick-link-card span:last-child,
  .quick-link-card > span {
    font-size: 1rem;
    line-height: 1.6;
  }

  .hero.home-hero .hero-kicker,
  .page-main .page-hero > p:first-child {
    font-size: 0.9375rem;
  }
}
@media (max-width: 760px) {
  /* Open menu: pin Close to the top-right of the panel and start the links
     below it, so the button never sits on top of a link row. */
  header.has-mobile-nav .mobile-nav-toggle[aria-expanded="true"] {
    position: fixed;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 63;
    min-height: 44px;
    padding-inline: 1.1rem;
    background: var(--navy);
    color: #fff;
    box-shadow: 0 6px 18px rgb(16 43 92 / 22%);
  }

  header.has-mobile-nav #site-nav:not([hidden]) {
    padding: 5rem 1rem 2rem;
    justify-content: flex-start;
  }

  header.has-mobile-nav #site-nav:not([hidden]) a,
  header.has-mobile-nav #site-nav:not([hidden]) a.nav-contact {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 56px;
    padding: 0 1rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--navy);
    font-size: 1.0625rem;
    font-weight: 700;
    text-align: left;
  }

  header.has-mobile-nav #site-nav:not([hidden]) a[aria-current="page"] {
    background: #fff4e4;
    color: var(--navy);
  }

  header.has-mobile-nav #site-nav:not([hidden]) a:not([aria-current="page"]):hover,
  header.has-mobile-nav #site-nav:not([hidden]) a:active {
    background: #f4f6fa;
  }
}
@media (max-width: 760px) {
  /* Align the Contact row with its siblings regardless of the base nav style. */
  header.has-mobile-nav #site-nav:not([hidden]) a.nav-contact {
    padding: 0 1rem;
    border: 0;
    text-align: left;
  }

  header.has-mobile-nav #site-nav:not([hidden]) a {
    border-bottom: 0;
  }
}
/* ---------- mobile polish round two ---------- */
.mobile-nav-toggle {
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.6rem;
  border-radius: 0.75rem;
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.nav-icon-close { display: none; }

.mobile-nav-toggle[aria-expanded="true"] .nav-icon-open { display: none; }
.mobile-nav-toggle[aria-expanded="true"] .nav-icon-close { display: inline-flex; }

@media (max-width: 760px) {
  /* Menu links sit as a tight group, not a spaced-out list. */
  header.has-mobile-nav #site-nav:not([hidden]) {
    gap: 0.15rem;
    padding: 4.5rem 0.85rem 2rem;
  }

  header.has-mobile-nav #site-nav:not([hidden]) a,
  header.has-mobile-nav #site-nav:not([hidden]) a.nav-contact {
    min-height: 48px;
    padding: 0 0.85rem;
  }

  header.has-mobile-nav .mobile-nav-toggle[aria-expanded="true"] {
    top: 0.6rem;
    right: 0.6rem;
    min-width: 44px;
    padding: 0;
  }

  /* Key facts: breathing room between the number and its label. */
  .key-facts-list dt,
  .key-facts-list dd,
  .key-facts-list div,
  .key-facts-list li {
    margin-block: 0.35rem;
  }

  .key-facts-list dd {
    margin-top: 0.5rem;
    line-height: 1.3;
  }

  .key-facts-list > * + * {
    margin-top: 1rem;
  }

  /* Gallery: two columns by default, one column in list view, no per-photo
     captions because the album heading already names the event. */
  .feed-section .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  [data-gallery][data-gallery-view="list"] .feed-section .gallery-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .feed-section .gallery-card figcaption {
    display: none;
  }

  .feed-section .gallery-card img {
    aspect-ratio: 1 / 1;
  }

  [data-gallery][data-gallery-view="list"] .feed-section .gallery-card img {
    aspect-ratio: 4 / 3;
  }

  /* News cards stack: photo on top, copy below, so the text is not squeezed. */
  .news-card {
    display: block;
    padding: 0;
  }

  .news-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 0.7rem 0.7rem 0 0;
  }

  .news-card-content {
    padding: 0.9rem 1rem 1.1rem;
  }

  .news-card h3,
  .news-card p {
    max-width: none;
  }

  .news-card p {
    margin-top: 0.35rem;
  }
}

/* Grid / List switch for the gallery. */
.gallery-view-toggle {
  display: inline-flex;
  gap: 0.35rem;
  margin: 0.5rem 0 0.75rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.gallery-view-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.gallery-view-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.gallery-view-button[aria-pressed="true"] {
  background: var(--navy);
  color: #fff;
}

/* Map card: a clear link instead of an embed that fails on mobile. */
.contact-map-card-image {
  display: block;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: linear-gradient(135deg, #eef3fb 0%, #f7f9fc 55%, #fff4e4 100%);
}

.contact-map-card-image a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 96px;
  padding: 1.1rem 1.2rem;
  text-decoration: none;
}

.contact-map-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
}

.contact-map-pin svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.contact-map-copy {
  display: grid;
  gap: 0.15rem;
}

.contact-map-copy strong {
  color: var(--navy);
  font-size: 1rem;
}

.contact-map-copy span {
  color: var(--muted);
  font-size: 0.95rem;
}
@media (max-width: 760px) {
  /* Winner over the base grid card rules. */
  .page-main .news-card,
  .home-main .news-card,
  article.news-card {
    display: block;
    padding: 0;
  }

  .page-main .news-card img,
  .home-main .news-card img,
  article.news-card > img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.7rem 0.7rem 0 0;
  }

  .page-main .news-card-content,
  .home-main .news-card-content {
    padding: 1rem 1.1rem 1.2rem;
  }
}
/* ---------- layout corrections ---------- */
/* Album photos never repeat the album name; the section heading above does it. */
.feed-section .gallery-card figcaption {
  display: none;
}

/* List view is one column at every width, not just on mobile. */
[data-gallery][data-gallery-view="list"] .feed-section .gallery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-count: auto;
  gap: 1.1rem;
}

[data-gallery][data-gallery-view="list"] .feed-section .gallery-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (max-width: 760px) {
  /* Stats: number above label, both left aligned. */
  .key-facts-list .key-fact,
  .key-fact {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    column-gap: 0;
    row-gap: 0.3rem;
    justify-items: start;
    text-align: left;
  }

  .key-fact dt {
    justify-self: start;
    text-align: left;
  }

  .key-fact dd {
    justify-self: start;
    text-align: left;
    margin: 0.25rem 0 0;
  }

  /* Welcome copy: tighter rhythm on small screens. */
  .home-intro-copy > p,
  .home-intro-copy p,
  .home-intro > p,
  .home-intro p {
    line-height: 1.5;
    margin-block: 0.7rem;
  }

  /* Pills: wrap into clean rows and never overflow. */
  .home-intro-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 100%;
  }

  .home-intro-tags span {
    flex: 0 1 auto;
    max-width: 100%;
    padding: 0.45rem 0.8rem;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
}
@media (min-width: 761px) {
  /* A single column of 1200px-wide photos is unreadable; cap and centre it. */
  [data-gallery][data-gallery-view="list"] .feed-section .gallery-grid {
    max-width: 46rem;
    margin-inline: auto;
  }

  [data-gallery][data-gallery-view="grid"] .feed-section .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 600px) and (max-width: 999px) {
  [data-gallery][data-gallery-view="grid"] .feed-section .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ---------- craft pass: hierarchy, insets, accent restraint ---------- */
/* Cards keep their accent as an inset rule, never as a thick clashing border. */
.home-main #news,
.approach-card,
.notice-strip,
.admissions-cta,
.gallery-facebook-note,
.contact-map-card-image,
.feed-section-head {
  border-radius: 0.85rem;
}

/* Type roles step cleanly instead of sitting at body size. */
.home-main h2,
.page-main h2,
.feed-section-head h2,
.quick-links h2,
.notice-strip h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.2;
}

.home-main h3,
.page-main h3 {
  font-size: clamp(1.1rem, 1.9vw, 1.25rem);
  line-height: 1.3;
}

/* Sections that carry a background need their own inset breathing room. */
.approach-section,
.notice-strip,
.admissions-cta,
.home-intro,
.contact-section {
  padding: clamp(1.5rem, 3.4vw, 2.6rem);
}

.hero,
.hero .hero-copy {
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

@media (max-width: 760px) {
  .home-main h2,
  .page-main h2,
  .feed-section-head h2 {
    font-size: 1.35rem;
  }

  .approach-section,
  .notice-strip,
  .admissions-cta,
  .home-intro,
  .contact-section {
    padding: 1.25rem;
  }

  .hero,
  .hero .hero-copy {
    padding-inline: 1.15rem;
  }
}

/* Neutral elevation instead of coloured glow on dark ground. */
.hero-illustration,
.quick-link-card,
.news-card,
.gallery-card,
.approach-card {
  box-shadow: 0 10px 28px rgb(12 24 40 / 10%);
}
/* ---------- final craft adjustments ---------- */
.heading-eyebrow {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--orange);
}

.hero .heading-eyebrow {
  color: #ffe2b8;
}

/* The remaining inset stripe reads as a tab, not a card accent. */
.approach-card,
.admissions-question,
.home-intro,
#programs > .feed-section-head,
#gallery > .feed-section-head,
#news > .feed-section-head {
  box-shadow: none;
}

.policy-card,
.approach-section > *,
.hero > .hero-copy {
  padding-inline: clamp(0.25rem, 1vw, 0.75rem);
}

@media (max-width: 760px) {
  .heading-eyebrow {
    font-size: 0.775rem;
    letter-spacing: 0.09em;
  }

  .policy-card,
  .approach-card,
  .admissions-question {
    padding: 1.1rem;
  }
}
/* Eyebrow labels need real contrast on light surfaces. */
.heading-eyebrow { color: #a25a10; }
.hero .heading-eyebrow { color: #ffe7c4; }

/* Any remaining coloured glow on a dark ground becomes soft neutral elevation. */
.site-footer * { box-shadow: none; }
.hero-illustration, .hero-visual > * { box-shadow: 0 14px 34px rgb(6 14 26 / 22%); }
/* ---------- contrast and depth corrections ---------- */
/* Red link hover is only safe on light ground; dark ground uses cream. */
:root { --red-on-dark: #ff9c8f; }

.site-footer a:hover,
.site-footer a:focus-visible,
.home-main .contact-section a:hover,
.home-main .contact-section a:focus-visible,
.school-topbar a:hover,
.school-topbar a:focus-visible,
.hero a:hover,
.hero a:focus-visible {
  color: #fff;
  background: transparent;
}

.site-footer .footer-facebook:hover,
.site-footer .staff-login a:hover {
  background: #ffca74;
  color: #172238;
}

.site-footer nav a[aria-current="page"],
.site-footer a[aria-current="page"] {
  color: var(--red-on-dark);
}

/* No orange-black pairing left: hover text on orange always goes dark. */
a:hover { color: inherit; }
.button:hover,
.button:focus-visible { color: #fff; }

/* Depth on dark ground is neutral, never a navy glow. */
.site-footer *,
.hero.home-hero *,
.home-main .contact-section *,
.hero .hero-visual * {
  box-shadow: none;
}

.hero-illustration,
.home-main .contact-section .contact-details,
.home-main .contact-section .contact-action {
  box-shadow: 0 14px 30px rgb(4 10 20 / 32%);
}

/* Cards inside cards flatten so the nesting is not visual noise. */
.notice-strip .notice,
.notice-strip li,
.quick-links .quick-link-card .quick-link-icon,
.approach-section .approach-card .approach-number {
  background: transparent;
  border-color: transparent;
}

/* Sections carrying their own surface must inset their children. */
.hero.home-hero,
.hero.page-hero,
.approach-section {
  padding: clamp(1.5rem, 3.6vw, 2.8rem);
}

.approach-card {
  border-top: 0;
}

@media (max-width: 760px) {
  .hero.home-hero,
  .hero.page-hero,
  .approach-section {
    padding: 1.25rem;
  }

  .notice-strip .notice,
  .notice-strip li {
    background: transparent;
  }
}
@media (max-width: 760px) {
  /* Nothing interactive or readable falls under 15px on a phone. */
  .school-topbar a,
  .topbar-contact a,
  .topbar-location,
  .topbar-location span,
  .news-card-link,
  .gallery-card a,
  .footer-bottom a,
  .breadcrumbs a {
    font-size: 1rem;
    line-height: 1.5;
  }

  .heading-eyebrow {
    font-size: 0.875rem;
    letter-spacing: 0.07em;
  }

  .school-topbar a {
    word-break: break-word;
  }

  .topbar-contact {
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
  }
}
@media (max-width: 760px) {
  .news-card-content a,
  .news-card-content .news-card-link,
  .site-footer a,
  .site-footer .footer-map,
  .site-footer .staff-login a,
  .page-main a.button,
  .page-main a.button-secondary {
    font-size: 1rem;
  }
}
/* ---------- gallery polish ---------- */
/* Straight grid: every photo keeps the same frame, so rows line up. */
.feed-section .gallery-card img,
.main .gallery-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.feed-section .gallery-grid {
  align-items: start;
}

/* Clear separation between one event and the next. */
.feed-section + .feed-section {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.feed-section-head {
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

/* The layout switch now shares the heading row. */
.page-hero .gallery-view-toggle-slot {
  display: flex;
  justify-content: flex-end;
  margin: 1rem 0 0;
}

.page-hero .gallery-view-toggle {
  margin: 0;
  background: rgb(255 255 255 / 14%);
  border-color: rgb(255 255 255 / 26%);
}

.page-hero .gallery-view-button {
  color: #fff;
}

.page-hero .gallery-view-button[aria-pressed="true"] {
  background: #fff;
  color: var(--navy);
}

@media (max-width: 760px) {
  .page-hero .gallery-view-toggle-slot {
    justify-content: flex-start;
    margin-top: 0.85rem;
  }

  .page-hero .gallery-view-toggle {
    background: #fff;
    border-color: var(--line);
  }

  .page-hero .gallery-view-button {
    color: var(--navy);
  }

  .page-hero .gallery-view-button[aria-pressed="true"] {
    background: var(--navy);
    color: #fff;
  }
}
/* The gallery hero is a light panel, so the switch uses dark text on white. */
.page-hero .gallery-view-toggle {
  background: #fff;
  border-color: var(--line);
}

.page-hero .gallery-view-button {
  color: var(--navy);
}

.page-hero .gallery-view-button[aria-pressed="true"] {
  background: var(--navy);
  color: #fff;
}

.page-hero .gallery-view-button svg {
  stroke: currentColor;
}
/* ---------- admissions + news refinement ---------- */
/* Documents and enquiry steps read as information, not as form fields. */
.admissions-document-list {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
}

.admissions-document,
.admissions-question,
.admissions-step {
  border: 0;
  border-radius: 0.75rem;
  background: #fff4e4;
  box-shadow: none;
}

.admissions-document {
  padding: 0.95rem 1.1rem;
  align-items: center;
  gap: 0.85rem;
}

.admissions-document span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: 50%;
  background: #fff;
  color: #a25a10;
  font-weight: 800;
  font-size: 0.9rem;
}

.admissions-document p {
  margin: 0;
  color: var(--ink);
}

/* The three top step cards centre their content. */
.admissions-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.35rem 1rem;
  text-align: center;
}

.admissions-step-number {
  margin: 0 auto 0.15rem;
}

.admissions-step strong,
.admissions-step small {
  text-align: center;
}

/* Tighter vertical rhythm between major sections. */
.page-main > section,
.page-main > .contact-form-card,
.page-main > .feed-section {
  margin-top: clamp(1.5rem, 2.6vw, 2.2rem);
}

.page-main .page-hero {
  padding-bottom: clamp(1.5rem, 2.6vw, 2.2rem);
}

.feed-section {
  padding-top: 0;
}

.feed-section + .feed-section {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
}

/* Enquiry form actions. */
.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 44px;
  margin-top: 0.75rem;
}

.contact-consent input[type="checkbox"],
#admission-form input[type="checkbox"] {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  margin-top: 0.15rem;
  accent-color: var(--navy);
  cursor: pointer;
}

#admission-form button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  margin-top: 1.25rem;
  padding: 0.95rem 2rem;
  font-size: 1.05rem;
}

@media (min-width: 701px) {
  #admission-form button[type="submit"] {
    width: auto;
    min-width: 260px;
  }
}

/* News: equal card heights, whole-card link, no placeholder gap. */
.news-grid,
.feed-section .news-grid {
  align-items: stretch;
}

.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.news-card:hover,
.news-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgb(12 24 40 / 12%);
  background: #fff;
}

.news-card:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.news-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-card-text-only .news-card-content {
  padding: 1.15rem 1.2rem 1.3rem;
}

.news-card-text-only h3 {
  font-size: 1.15rem;
}

.news-card p {
  flex: 1;
}

.news-card .news-card-meta {
  margin-bottom: 0.35rem;
}

/* Hero sits closer to the first feed section on the news page. */
.page-hero {
  padding-bottom: clamp(1.25rem, 2.2vw, 1.8rem);
  margin-bottom: 0;
}

.page-main > .page-hero + div,
.page-main > .page-hero + section {
  margin-top: clamp(1.25rem, 2.2vw, 1.75rem);
}
/* Equal card heights inside every news row. */
.feed-section .news-grid,
.page-main .news-grid,
.home-main .news-grid {
  display: grid;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.feed-section .news-card,
.page-main .news-card,
.home-main .news-card,
article.news-card,
a.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
}

.feed-section .news-card .news-card-content,
.page-main .news-card .news-card-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.feed-section .news-card p,
.page-main .news-card p {
  flex: 1 1 auto;
}

.feed-section .news-card img,
.page-main .news-card img {
  flex: 0 0 auto;
}
/* Card images fill the card width rather than sitting as small thumbnails. */
.feed-section .news-card img,
.page-main .news-card img,
.home-main .news-card img,
article.news-card img,
a.news-card img {
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.75rem 0.75rem 0 0;
}

/* Padding for the copy block when a photo sits above it. */
.news-card:not(.news-card-text-only) .news-card-content {
  padding: 0.95rem 1.1rem 1.15rem;
}

/* Pull the first feed block up under the hero. */
.page-main > .page-hero {
  margin-bottom: 0;
}

.page-main > .page-hero + .feed-section,
.page-main > .page-hero + div > .feed-section:first-child {
  margin-top: 0;
}

.hero.page-hero {
  padding-bottom: clamp(1.1rem, 1.8vw, 1.5rem);
}
/* Tighten the hand-off from hero to the first feed block. */
.page-main > .page-hero + div,
.page-main > .page-hero + section,
.page-main > .page-hero + .feed-section {
  margin-top: 0.75rem;
}

.page-main > .page-hero + div > .feed-section:first-child,
.page-main > .page-hero + div > section:first-child .feed-section:first-child {
  margin-top: 0;
}

.page-main > .page-hero + div > .feed-section:first-child .feed-section-head,
.page-main > .page-hero + .feed-section .feed-section-head {
  margin-top: 0;
}
/* ---------- motion: reveal, hover, touch feedback ---------- */
/* Transform and opacity only, so the compositor keeps the scroll at 60fps. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-pending {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    will-change: opacity, transform;
  }

  .reveal-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
      opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: auto;
  }

  /* Pointer feedback: cards lift, photos breathe inside their frame. */
  .news-card,
  .gallery-card,
  .approach-card,
  .parent-card,
  .quick-link-card,
  .school-level,
  .admissions-step,
  .contact-action {
    transition:
      transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
      background-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  @media (hover: hover) and (pointer: fine) {
    .news-card:hover,
    .gallery-card:hover,
    .approach-card:hover,
    .parent-card:hover,
    .quick-link-card:hover,
    .school-level:hover,
    .contact-action:hover {
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 16px 34px rgb(12 24 40 / 12%);
    }

    .gallery-card img,
    .news-card img {
      transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .gallery-card:hover img,
    .news-card:hover img {
      transform: scale(1.04);
    }

    .button:hover,
    .button-secondary:hover,
    .nav-contact:hover {
      transform: translate3d(0, -2px, 0);
    }
  }

  /* Touch feedback: an immediate, short press state. */
  @media (hover: none), (pointer: coarse) {
    .news-card:active,
    .gallery-card:active,
    .approach-card:active,
    .parent-card:active,
    .quick-link-card:active,
    .school-level:active,
    .admissions-step:active,
    .contact-action:active {
      transform: scale(0.985);
      background-color: #eef1f6;
    }

    .button:active,
    .button-secondary:active,
    .nav-contact:active,
    .gallery-view-button:active {
      transform: scale(0.98);
    }
  }
}

/* Reveal must never hide content when motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {
  .reveal-pending,
  .reveal-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ---------- news cards: image on every card, clamped copy ---------- */
.news-card img {
  flex: 0 0 auto;
}

.news-card.news-card-fallback img {
  object-fit: cover;
  object-position: center;
}

/* Body copy is clamped so one long post cannot stretch a whole row. */
.news-card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0.15rem 0 0.35rem;
}

.news-card p,
.feed-section .news-card p,
.page-main .news-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 0 1 auto;
  margin: 0;
}

.news-card .news-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.95rem 1.05rem 1.1rem;
}

.news-card .news-card-meta {
  margin-bottom: 0.15rem;
}
/* ---------- de-AI pass: squarer controls, real photos, editorial layout ---------- */
/* Buttons become practical rectangles instead of pills. */
.button,
.button-secondary,
.nav-contact,
.staff-login a,
.map-link,
.hero-secondary-link,
.page-hero-actions .button,
#admission-form button[type="submit"],
.gallery-view-toggle,
.gallery-view-button,
.footer-facebook,
.contact-action,
.news-actions a {
  border-radius: 6px;
}

/* Kickers are gone from the markup; this covers any CMS-rendered leftovers. */
.heading-eyebrow {
  display: none;
}

/* Hero photograph with a readability overlay. */
.hero.home-hero .hero-visual {
  position: relative;
}

.hero-photo {
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #12233f;
  box-shadow: 0 18px 40px rgb(6 14 26 / 28%);
}

.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hero-photo-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(9 20 38 / 12%) 0%, rgb(9 20 38 / 30%) 100%),
    linear-gradient(90deg, rgb(9 20 38 / 34%) 0%, rgb(9 20 38 / 0%) 55%);
  pointer-events: none;
}

/* Welcome section: 60/40 editorial split. */
.home-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

@media (min-width: 900px) {
  .home-intro {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  }

  .home-intro-heading,
  .home-intro-copy {
    grid-column: 1;
  }

  .home-intro-photo {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: stretch;
  }
}

.home-intro-photo {
  margin: 0;
}

.home-intro-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  max-height: 520px;
  object-fit: cover;
  border-radius: 12px;
}

.home-intro-photo figcaption {
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* About page photographs, deliberately offset rather than centred. */
.about-photo {
  margin: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

.about-photo figcaption {
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (min-width: 900px) {
  .about-photo {
    width: 62%;
  }

  .about-photo-right {
    margin-left: auto;
  }

  .about-photo-left {
    margin-right: auto;
  }

  .about-photo img {
    aspect-ratio: 16 / 10;
  }
}

/* Notice board: a board, not a card. */
.notice-strip {
  position: relative;
  border-radius: 4px;
  border: 1px solid #e3d6bd;
  background-color: #f6efe2;
  background-image:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 55%) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 35%) 0 1px, transparent 1px 26px);
  box-shadow: inset 0 0 0 1px #efe4cf, 0 6px 16px rgb(90 66 32 / 8%);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}

.notice-strip::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10px;
  background:
    repeating-linear-gradient(0deg, #c9a468 0 8px, #b5904f 8px 16px);
  border-radius: 4px 0 0 4px;
}

.notice-list li,
.notice-strip .notice {
  background: transparent;
  border-bottom: 1px dashed #d9c8a8;
  border-radius: 0;
  padding-block: 0.85rem;
}

.notice-list li:last-child,
.notice-strip .notice:last-child {
  border-bottom: 0;
}

@media (max-width: 760px) {
  .notice-strip {
    padding-left: 1.35rem;
  }

  .notice-strip::before {
    width: 8px;
  }

  .home-intro-photo img {
    min-height: 220px;
  }
}
/* Keep every control on the same 6px corner, whatever rule came before. */
.hero .button,
.hero .button-secondary,
.home-hero .button,
.home-hero .button-secondary,
.page-hero .button,
.page-hero .button-secondary,
.button,
.button-secondary,
.nav-contact {
  border-radius: 6px;
}

@media (min-width: 900px) {
  .about-photo {
    width: 62%;
  }

  .about-photo-left {
    width: 54%;
  }
}
/* Matches the specificity of the earlier hero rule so 6px wins. */
.hero.home-hero .button,
.hero.home-hero .button-secondary,
.home-header nav a.nav-contact {
  border-radius: 6px;
}

.mobile-nav-toggle {
  border-radius: 6px;
}
/* Empty photo frames keep a quiet tint while the real photograph is pending. */
.photo-missing {
  display: none;
}

.photo-frame-empty,
.hero-photo:has(.photo-missing),
.home-intro-photo:has(.photo-missing),
.about-photo:has(.photo-missing) {
  border-radius: 12px;
  background:
    linear-gradient(135deg, #12233f 0%, #1c3357 55%, #274268 100%);
  min-height: 260px;
}

.home-intro-photo.photo-frame-empty::after,
.about-photo.photo-frame-empty::after {
  content: "Photograph coming soon";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  color: rgb(255 255 255 / 72%);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
/* Beat the per-figure display rules when a photograph is still missing. */
.hero-photo img.photo-missing,
.home-intro-photo img.photo-missing,
.about-photo img.photo-missing {
  display: none;
}

.hero-photo.photo-frame-empty {
  min-height: 372px;
}

.hero-photo.photo-frame-empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #16294a 0%, #1e3a63 60%, #274a78 100%);
}
/* Printing and no-motion contexts show everything, never a half-empty page. */
@media print {
  .reveal-pending,
  .reveal-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* Empty photo slots: the tinted panel is the block, the caption sits under it. */
.home-intro-photo.photo-frame-empty,
.about-photo.photo-frame-empty {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: none;
  min-height: 0;
}

.home-intro-photo.photo-frame-empty::after,
.about-photo.photo-frame-empty::after {
  order: -1;
  min-height: 260px;
  border-radius: 12px;
  background: linear-gradient(135deg, #16294a 0%, #1e3a63 60%, #274a78 100%);
  color: rgb(255 255 255 / 74%);
  content: "Photograph coming soon";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.home-intro-photo.photo-frame-empty figcaption,
.about-photo.photo-frame-empty figcaption {
  margin-top: 0.55rem;
  color: var(--muted);
}

@media (max-width: 760px) {
  .home-intro-photo.photo-frame-empty::after,
  .about-photo.photo-frame-empty::after {
    min-height: 220px;
  }
}
/* ---------- round of fixes: map, placeholders, cards, step numbers ---------- */
/* Real, responsive Google map. */
.contact-map {
  position: relative;
  width: 100%;
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #eef1f5;
}

.contact-map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 260px;
  border: 0;
}

@media (max-width: 760px) {
  .contact-map iframe {
    aspect-ratio: 4 / 3;
    min-height: 240px;
  }
}

/* Missing photographs: light neutral panel with a quiet icon, not a dark void. */
.hero-photo.photo-frame-empty,
.home-intro-photo.photo-frame-empty,
.about-photo.photo-frame-empty {
  background: none;
}

.hero-photo.photo-frame-empty::after,
.home-intro-photo.photo-frame-empty::after,
.about-photo.photo-frame-empty::after {
  content: "";
  border-radius: 12px;
  background-color: #f3f4f6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b1bd' stroke-width='1.4'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M4.5 17l4.6-4.2 3.2 2.9 3-2.6 4.2 3.9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 46px 46px;
  border: 1px solid #e6e8ec;
}

.hero-photo.photo-frame-empty {
  min-height: 300px;
}

.hero-photo.photo-frame-empty::after {
  position: absolute;
  inset: 0;
  min-height: 300px;
  background-color: #eef1f5;
  border-color: rgb(255 255 255 / 26%);
}

.home-intro-photo.photo-frame-empty::after,
.about-photo.photo-frame-empty::after {
  min-height: 240px;
  order: -1;
}

/* News cards: the link is the flex column, the copy takes the remaining height. */
.news-grid,
.feed-section .news-grid,
.page-main .news-grid,
.home-main .news-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
  row-gap: 1rem;
}

a.news-card,
article.news-card,
.news-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  min-height: 100%;
}

.news-card .news-card-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.news-card .news-card-content > p {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.news-card img {
  flex: 0 0 auto;
}

/* Admission step chips sit inside the card without touching its edges. */
.admissions-step {
  position: relative;
  padding: clamp(1.35rem, 2.4vw, 1.9rem) clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
}

.admissions-step-number,
.admissions-step .admissions-step-number {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0 auto 0.65rem;
  border-radius: 50%;
  background: #fff;
  color: #85500e;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px #ecd9b6;
}

.required-mark {
  color: #c92f2b;
  font-weight: 800;
}
/* ---------- contact form polish ---------- */
/* Positive send action in brand navy, not the red used for destructive intent. */
.contact-submit,
.button.contact-submit,
#contact-form .contact-submit {
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
  border-radius: 6px;
  min-height: 52px;
  padding: 0.9rem 2rem;
  font-size: 1.05rem;
}

.contact-submit:hover,
.button.contact-submit:hover,
#contact-form .contact-submit:hover {
  background: #1d3f78;
  border-color: #1d3f78;
  color: #fff;
}

/* Consent row: bigger box, baseline-aligned with its label. */
.contact-consent {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  margin-top: 0.9rem;
}

.contact-consent input[type="checkbox"],
#contact-form .contact-consent input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 0;
  accent-color: var(--navy);
  cursor: pointer;
}

.contact-consent span {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  line-height: 1.5;
}

.contact-consent a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* ---------- about page: principal message and why-choose-us ---------- */
.principal-section,
.why-section {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.principal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

@media (min-width: 860px) {
  .principal-layout {
    grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
  }
}

.principal-photo {
  margin: 0;
}

.principal-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  background: #f3f4f6;
  border: 1px solid #e6e8ec;
}

.principal-photo.photo-frame-empty::after {
  content: "";
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  background-color: #f3f4f6;
  border: 1px solid #e6e8ec;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b1bd' stroke-width='1.4'%3E%3Ccircle cx='12' cy='9' r='3.4'/%3E%3Cpath d='M5 20c1.6-3.4 4-5 7-5s5.4 1.6 7 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56px 56px;
}

.principal-copy h2,
.why-section > h2 {
  margin: 0 0 0.85rem;
  color: var(--navy);
}

.principal-message {
  max-width: 62ch;
  color: var(--ink);
}

.principal-message p {
  margin: 0 0 1rem;
  line-height: 1.7;
}

.principal-signature {
  margin: 1.25rem 0 0;
  color: var(--navy);
  font-weight: 700;
}

.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: 1.25rem;
}

@media (min-width: 760px) {
  .why-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.why-card {
  padding: 1.4rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.why-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: #fff4e4;
  color: #a25a10;
}

.why-card-icon svg {
  width: 22px;
  height: 22px;
}

.why-card h3 {
  margin: 0 0 0.45rem;
  color: var(--navy);
  font-size: 1.05rem;
}

.why-card p {
  margin: 0;
  color: var(--muted);
}
/* Principal photo placeholder: a fixed 4:5 grey panel with a user glyph, never a
   stretched alt-text block. */
.principal-photo {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  background: #f3f4f6;
  border: 1px solid #e6e8ec;
  overflow: hidden;
}

.principal-photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
}

.principal-photo img.photo-missing {
  display: none;
}

.principal-photo.photo-frame-empty::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background-color: #f3f4f6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b1bd' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='9' r='3.4'/%3E%3Cpath d='M5 20c1.6-3.4 4-5 7-5s5.4 1.6 7 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56px 56px;
}

/* The empty state must not inherit the generic tinted block height. */
.principal-photo.photo-frame-empty {
  min-height: 0;
  aspect-ratio: 4 / 5;
}

@media (max-width: 760px) {
  .principal-photo {
    max-width: 240px;
  }
}
/* ---------- campus life strip on the About page ---------- */
.campus-strip {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.campus-strip h2 {
  margin: 0 0 0.35rem;
  color: var(--navy);
}

.campus-lede {
  margin: 0 0 1rem;
  color: var(--muted);
  max-width: 56ch;
}

.campus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.75rem, 2vw, 1.15rem);
}

@media (min-width: 700px) {
  .campus-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.campus-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f4f6;
  border: 1px solid #e6e8ec;
}

.campus-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.campus-photo img.photo-missing {
  display: none;
}

.campus-photo.photo-frame-empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #f3f4f6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b1bd' stroke-width='1.4'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M4.5 17l4.6-4.2 3.2 2.9 3-2.6 4.2 3.9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 44px 44px;
}