/* Public home page — ported from the Angular HomeComponent styles. */
:root {
  --brand-green: #1a4d3a;
  --brand-green-dark: #0f3326;
  --brand-gold: #e3a72f;
  --brand-gold-light: #f6cd6b;
  --brand-cream: #faf7ee;
  --brand-cream-dark: #f1ecdb;
  --brand-text: #2b2b28;
  --brand-muted: #6b6b64;
  --brand-border: #ece9df;
  --header-height: 72px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--brand-text);
  background: #fff;
}

[hidden] {
  display: none !important;
}

.site-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* The header (top strip + logo/menu row) spans the full width: logo at the left edge, buttons at the right */
.site-header .site-container {
  max-width: none;
  padding: 0 20px;
}

section {
  scroll-margin-top: var(--header-height);
}

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

img {
  max-width: 100%;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}

.btn-accent {
  background: var(--brand-gold);
  color: var(--brand-green-dark);
  box-shadow: 0 6px 16px rgba(227, 167, 47, .35);
}

.btn-accent:hover {
  background: var(--brand-gold-light);
  transform: translateY(-2px);
}

.btn-outline-light {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
}

.btn-outline-light:hover {
  background: #fff;
  color: var(--brand-green-dark);
}

/* Outlined green button for light backgrounds (e.g. the header Login) */
.btn-outline-brand {
  background: transparent;
  color: var(--brand-green);
  border-color: var(--brand-green);
}

.btn-outline-brand:hover {
  background: var(--brand-green);
  color: #fff;
  transform: translateY(-2px);
}

.eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  font-weight: 700;
  color: var(--brand-green);
  margin-bottom: 10px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--brand-border);
  transition: box-shadow .2s ease;
}

.site-header.scrolled {
  box-shadow: 0 6px 20px rgba(15, 51, 38, .08);
}

.header-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-height);
}

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

.brand-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* School banner (crest + name) used when the API has no logo of its own */
.brand-banner {
  display: block;
  height: 50px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.brand-logo-fallback {
  font-size: 28px;
  color: var(--brand-green);
  flex-shrink: 0;
}

.brand-name {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--brand-green-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-link {
  color: var(--brand-text);
  font-weight: 500;
  position: relative;
  padding: 6px 0;
}

.nav-link:hover {
  color: var(--brand-green);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--brand-gold);
  transition: right .2s ease;
}

.nav-link:hover::after {
  right: 0;
}

.nav-cta {
  padding: 10px 18px;
  box-shadow: none;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: #fff;
  color: var(--brand-green-dark);
  font-size: 1.3rem;
  cursor: pointer;
  flex-shrink: 0;
}

/*
 * Branch pages: contact + social strip above the header. It keeps a fixed height and simply
 * scrolls out of view: the sticky header is pinned 38px above the viewport, so only the menu
 * row stays visible. (Collapsing the strip on scroll changed the page height, which made the
 * scroll position jump back over the threshold and the header shake near the bottom.)
 */
:root {
  --topbar-height: 45px;
}

.site-header:has(.topbar) {
  top: calc(-1 * var(--topbar-height));
}

.topbar {
  height: var(--topbar-height);
  overflow: hidden;
  background: var(--brand-green-dark);
  color: rgba(255, 255, 255, .8);
  font-size: .82rem;
}

.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--topbar-height);
}

.topbar-contact,
.topbar-social {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.topbar-social {
  gap: 12px;
  font-size: 1rem;
}

.topbar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: color .15s ease;
}

.topbar a:hover {
  color: var(--brand-gold-light);
}

/* Mandatory Public Disclosure — a gold pill so it stands out in the top strip */
.topbar a.topbar-disclosure {
  padding: 3px 12px;
  border: 1px solid rgba(246, 205, 107, .55);
  border-radius: 999px;
  color: var(--brand-gold-light);
  font-weight: 600;
  font-size: .8rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.topbar a.topbar-disclosure:hover,
.topbar a.topbar-disclosure.active {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-green-dark);
}

.topbar-disclosure-short {
  display: none;
}

.topbar-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, .2);
}

/* Menu labels never wrap onto two lines ("About Us") */
.nav-link {
  white-space: nowrap;
}

/* Long branch menus: a little less space between items on smaller desktops */
@media (max-width: 1440px) and (min-width: 1200px) {
  .site-nav {
    gap: 18px;
  }
}

@media (max-width: 600px) {
  .topbar-contact a:nth-child(2) {
    display: none;
  }
}

/* Hero slider */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(480px, calc(100dvh - var(--header-height) - 40px), 720px);
  background: var(--brand-green-dark);
  color: #fff;
  touch-action: pan-y;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
}

.hero-slide.active {
  opacity: 1;
}

.hero-slide-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 72px;
  padding-bottom: 96px;
}

.hero-copy {
  max-width: 640px;
  animation: hero-copy-in .6s ease both;
}

@keyframes hero-copy-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.hero-copy .eyebrow {
  color: var(--brand-gold-light);
}

.hero-copy h1 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.15;
  margin: 0 0 16px;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .25);
}

.hero-highlight {
  display: inline-block;
  color: var(--brand-gold-light);
}

.hero-subtitle {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 28px;
  font-size: 1.08rem;
  color: rgba(255, 255, 255, .88);
}

.hero-subtitle i {
  margin-top: 3px;
  color: var(--brand-gold-light);
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .25);
  color: #fff;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease;
}

.hero-nav:hover {
  background: rgba(0, 0, 0, .5);
}

.hero-nav-prev {
  left: 20px;
}

.hero-nav-next {
  right: 20px;
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.hero-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: width .25s ease, background-color .25s ease;
}

.hero-dots button.active {
  width: 28px;
  background: var(--brand-gold);
}

/* Section headings */
.section-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}

.section-heading h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--brand-green-dark);
  margin: 4px 0 12px;
}

.section-heading p {
  color: var(--brand-muted);
  margin: 14px 0 0;
}

.heading-underline {
  display: inline-block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--brand-gold);
}

/* Branches */
.branches {
  padding: 88px 0;
  background: #fff;
}

.branches-state {
  display: flex;
  justify-content: center;
  padding: 40px 0;
  color: var(--brand-muted);
  text-align: center;
}

.spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid #e3e1d8;
  border-top-color: var(--brand-green);
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Flex (not grid) so a short last row — or a single branch — sits centred, 4 per row max. */
.branch-grid {
  --gap: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

.branch-card {
  position: relative;
  flex: 0 1 270px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 51, 38, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Gold accent bar that grows across the top on hover */
.branch-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 0;
  height: 3px;
  background: var(--brand-gold);
  transition: width .3s ease;
}

.branch-card:hover,
.branch-card:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(227, 167, 47, .45);
  box-shadow: 0 14px 30px rgba(15, 51, 38, .12);
}

.branch-card:hover::before,
.branch-card:focus-visible::before {
  width: 100%;
}

.branch-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--brand-cream-dark);
  overflow: hidden;
}

.branch-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.branch-card:hover .branch-card-image img {
  transform: scale(1.05);
}

/* Default photo (the school banner) — shown whole on a soft panel instead of cropped */
.branch-card-image.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 40%, #fff 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(135deg, var(--brand-cream) 0%, var(--brand-cream-dark) 100%);
  border-bottom: 1px solid var(--brand-border);
}

.branch-card-image.is-placeholder img {
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.branch-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--brand-gold);
  color: var(--brand-green-dark);
  font-size: .68rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

.branch-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 0;
}

.branch-card-body h3 {
  font-size: 1.02rem;
  line-height: 1.35;
  margin: 0 0 8px;
  color: var(--brand-green-dark);
}

.branch-location {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--brand-muted);
  margin: 0 0 14px;
  font-size: .86rem;
  line-height: 1.45;
}

.branch-location i {
  color: var(--brand-gold);
  margin-top: 2px;
  flex-shrink: 0;
}

.branch-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 14px;
  border-top: 1px dashed var(--brand-border);
}

.branch-link {
  font-size: .9rem;
  font-weight: 600;
  color: var(--brand-green);
}

.branch-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--brand-cream-dark);
  color: var(--brand-green);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.branch-card:hover .branch-link {
  color: var(--brand-green-dark);
}

.branch-card:hover .branch-arrow {
  background: var(--brand-green);
  color: #fff;
  transform: translateX(3px);
}

/* Counters */
.counters {
  position: relative;
  overflow: hidden;
  padding: 64px 0;
  background: linear-gradient(120deg, var(--brand-green-dark), var(--brand-green));
  color: #fff;
}

.counters::before {
  content: '';
  position: absolute;
  width: 380px;
  height: 380px;
  right: -120px;
  top: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 167, 47, .22), rgba(227, 167, 47, 0) 70%);
  pointer-events: none;
}

/* Flex so 2 or 3 counters stay centred as a group. */
.counter-grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.counter {
  flex: 0 1 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 20px;
  text-align: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
}

.counter i {
  font-size: 1.7rem;
  color: var(--brand-gold);
  margin-bottom: 4px;
}

.counter strong {
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.counter span {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
}

/* Why choose us */
.why-us {
  background: linear-gradient(135deg, #eef2ea 0%, var(--brand-cream-dark) 100%);
  padding: 80px 0;
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.why-us-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(15, 51, 38, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.why-us-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(15, 51, 38, .1);
}

.why-us-card i {
  font-size: 1.6rem;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-green), var(--brand-green-dark));
  border-radius: 50%;
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(15, 51, 38, .2);
}

.why-us-card h3 {
  font-size: 1.02rem;
  color: var(--brand-green-dark);
  margin: 16px 0 8px;
}

.why-us-card p {
  margin: 0;
  color: var(--brand-muted);
  font-size: .9rem;
  line-height: 1.55;
}

/* CTA */
.cta {
  background: linear-gradient(120deg, var(--brand-green-dark), var(--brand-green));
  color: #fff;
  padding: 44px 0;
}

.cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cta-copy {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cta-copy i {
  font-size: 2.2rem;
  color: var(--brand-gold);
  flex-shrink: 0;
}

.cta-copy h3 {
  margin: 0 0 4px;
  font-size: 1.35rem;
}

.cta-copy p {
  margin: 0;
  opacity: .85;
}

/* Footer */
.site-footer {
  position: relative;
  margin-top: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(227, 167, 47, .14), rgba(227, 167, 47, 0) 40%),
    linear-gradient(160deg, var(--brand-green-dark) 0%, #0b261c 100%);
  color: rgba(255, 255, 255, .78);
  border-top: 4px solid var(--brand-gold);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr;
  gap: 40px;
  padding-top: 64px;
  padding-bottom: 48px;
}

/* The school banner has a white background, so it sits on a white plate */
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}

.footer-brand-banner {
  display: block;
  height: 64px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}

.footer-brand-logo {
  height: 52px;
  width: auto;
  object-fit: contain;
}

.footer-brand-name {
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
}

.footer-about p {
  margin: 18px 0 0;
  line-height: 1.7;
  max-width: 380px;
  font-size: .93rem;
}

.footer-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.footer-values li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  font-size: .8rem;
  color: rgba(255, 255, 255, .88);
}

.footer-values i {
  color: var(--brand-gold);
}

.footer-col h4 {
  position: relative;
  margin: 6px 0 22px;
  padding-bottom: 12px;
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: .01em;
}

.footer-col h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-gold);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  color: rgba(255, 255, 255, .78);
  font-size: .93rem;
  transition: color .15s ease, transform .15s ease;
}

.footer-links a i {
  margin-top: 3px;
  color: var(--brand-gold);
  flex-shrink: 0;
}

.footer-links a:hover {
  color: var(--brand-gold-light);
  transform: translateX(4px);
}

.footer-city {
  display: block;
  margin-top: 2px;
  font-size: .8rem;
  color: rgba(255, 255, 255, .55);
}

.footer-muted {
  margin: 0;
  font-size: .9rem;
  color: rgba(255, 255, 255, .55);
}

.footer-cta {
  padding: 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
}

.footer-cta p {
  margin: 0 0 16px;
  font-size: .9rem;
  line-height: 1.6;
}

.footer-cta .btn {
  width: 100%;
  box-shadow: none;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: rgba(0, 0, 0, .22);
  font-size: .85rem;
  color: rgba(255, 255, 255, .65);
}

.footer-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.footer-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.footer-legal a {
  color: rgba(255, 255, 255, .72);
  transition: color .15s ease;
}

.footer-legal a:hover,
.footer-legal a[aria-current="page"] {
  color: var(--brand-gold-light);
}

.footer-legal-sep {
  color: rgba(255, 255, 255, .25);
}

/* Branch footer: contact details, timings and social icons */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .93rem;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.footer-contact i {
  margin-top: 3px;
  color: var(--brand-gold);
  flex-shrink: 0;
}

.footer-contact a {
  color: rgba(255, 255, 255, .78);
  word-break: break-word;
  transition: color .15s ease;
}

.footer-contact a:hover {
  color: var(--brand-gold-light);
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 1.1rem;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.footer-social a:hover {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-green-dark);
  transform: translateY(-2px);
}

.footer-enquire {
  margin-top: 22px;
  box-shadow: none;
}

/* Back to top */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 25;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-gold);
  color: var(--brand-green-dark);
  font-size: 1.2rem;
  box-shadow: 0 8px 20px rgba(15, 51, 38, .3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, background-color .15s ease;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.back-to-top:hover {
  background: var(--brand-gold-light);
}

@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 32px;
  }

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

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 48px;
    padding-bottom: 36px;
  }

  .footer-brand-banner {
    height: 56px;
  }

  .footer-bottom-row {
    flex-direction: column;
    text-align: center;
  }

  .footer-legal {
    justify-content: center;
  }

  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
  }

  /* Sit above the floating "Registration" button on branch pages */
  body:has(.floating-registration-btn) .back-to-top {
    bottom: 80px;
  }
}

/* Mandatory Public Disclosure page */
.disclosures {
  padding: 48px 0 72px;
  background: var(--brand-cream);
}

.disclosures-container {
  max-width: 1000px;
}

.md-group {
  margin-bottom: 20px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15, 51, 38, .05);
}

.md-group h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 1.15rem;
  color: var(--brand-green-dark);
}

.md-num {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-green);
  color: #fff;
  font-size: .85rem;
}

.md-group-desc {
  margin: 0 0 12px 40px;
  color: var(--brand-muted);
  font-size: .9rem;
}

.md-table-wrap {
  overflow-x: auto;
  margin-top: 12px;
}

.md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.md-table th {
  padding: 10px 12px;
  text-align: left;
  background: var(--brand-cream);
  color: var(--brand-green-dark);
  border-bottom: 2px solid var(--brand-cream-dark);
}

.md-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--brand-cream-dark);
  vertical-align: top;
}

.md-table tr:last-child td {
  border-bottom: 0;
}

.md-table .md-sr {
  width: 46px;
  text-align: center;
  color: var(--brand-muted);
}

.md-action {
  width: 170px;
  white-space: nowrap;
}

/* Text-type disclosure ("Total teachers: 45") — the answer itself, which may be long */
.md-action.md-text {
  width: auto;
  min-width: 170px;
  white-space: normal;
}

.md-content {
  color: var(--brand-text);
  font-weight: 600;
  white-space: pre-line;
  word-break: break-word;
}

.md-table td strong {
  overflow-wrap: anywhere;
}

.md-desc {
  margin-top: 3px;
  color: var(--brand-muted);
  font-size: .82rem;
}

.md-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 10px;
  color: var(--brand-green);
  font-weight: 600;
}

.md-link:hover {
  color: var(--brand-green-dark);
  text-decoration: underline;
}

.md-state {
  padding: 56px 20px;
  text-align: center;
  color: var(--brand-muted);
}

.md-state i {
  font-size: 2.6rem;
  color: var(--brand-gold);
}

.md-state h3 {
  margin: 12px 0 6px;
  color: var(--brand-green-dark);
}

@media (max-width: 600px) {
  .topbar-disclosure-full {
    display: none;
  }

  .topbar-disclosure-short {
    display: inline;
  }

  .disclosures {
    padding: 28px 0 56px;
  }

  .md-group {
    padding: 18px 14px;
  }

  .md-group-desc {
    margin-left: 0;
  }

  /* Each disclosure row becomes a small card: number, title, then its value or View link */
  .md-table thead {
    display: none;
  }

  .md-table,
  .md-table tbody,
  .md-table tr,
  .md-table td {
    display: block;
  }

  .md-table tr {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 12px 0;
    border-bottom: 1px solid var(--brand-cream-dark);
  }

  .md-table tr:last-child {
    border-bottom: 0;
  }

  .md-table td,
  .md-table tr:last-child td {
    padding: 2px 6px;
    border-bottom: 0;
  }

  .md-table .md-sr {
    grid-row: span 2;
    width: auto;
    text-align: left;
  }

  .md-action,
  .md-action.md-text {
    grid-column: 2;
    width: auto;
    min-width: 0;
    margin-top: 4px;
    white-space: normal;
  }
}

/* Legal pages: banner */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 52px;
  background: linear-gradient(120deg, var(--brand-green-dark), var(--brand-green));
  color: #fff;
}

.page-hero::before {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  right: -110px;
  top: -170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 167, 47, .25), rgba(227, 167, 47, 0) 70%);
  pointer-events: none;
}

.page-hero .site-container {
  position: relative;
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .85rem;
  color: rgba(255, 255, 255, .75);
  margin-bottom: 14px;
}

.breadcrumb a:hover {
  color: var(--brand-gold-light);
}

.breadcrumb i {
  font-size: .75rem;
}

.page-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.2;
}

.page-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: .9rem;
  color: rgba(255, 255, 255, .8);
}

.page-hero-meta i {
  color: var(--brand-gold-light);
}

/* Legal pages: sidebar + text */
.legal {
  padding: 56px 0 80px;
  background: var(--brand-cream);
}

.legal-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.legal-nav {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 14px;
}

.legal-nav h2 {
  margin: 0 0 8px;
  padding: 0 10px;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brand-muted);
}

.legal-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  font-weight: 500;
  font-size: .93rem;
  color: var(--brand-text);
  transition: background-color .15s ease, color .15s ease;
}

.legal-nav a i {
  color: var(--brand-gold);
  font-size: 1.1rem;
}

.legal-nav a:hover {
  background: var(--brand-cream);
  color: var(--brand-green);
}

.legal-nav a.active {
  background: var(--brand-green);
  color: #fff;
}

.legal-nav a.active i {
  color: var(--brand-gold-light);
}

.legal-content {
  padding: 36px 40px;
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  line-height: 1.7;
}

.legal-intro {
  margin: 0 0 8px;
  padding: 16px 18px;
  border-left: 4px solid var(--brand-gold);
  border-radius: 0 8px 8px 0;
  background: var(--brand-cream);
  color: var(--brand-text);
}

.legal-content h2 {
  margin: 30px 0 10px;
  font-size: 1.15rem;
  color: var(--brand-green-dark);
}

.legal-content p {
  margin: 0 0 12px;
  color: #45453f;
}

.legal-content ul,
.legal-content ol {
  margin: 0 0 12px;
  padding-left: 22px;
  color: #45453f;
}

.legal-content li {
  margin-bottom: 6px;
}

.legal-content li::marker {
  color: var(--brand-gold);
}

.legal-content a {
  color: var(--brand-green);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--brand-gold);
  text-underline-offset: 3px;
}

.legal-contact {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  padding: 20px 22px;
  border-radius: 12px;
  background: linear-gradient(120deg, var(--brand-green-dark), var(--brand-green));
  color: #fff;
}

.legal-contact > i {
  font-size: 2rem;
  color: var(--brand-gold);
  flex-shrink: 0;
}

.legal-contact div {
  flex: 1;
}

.legal-contact h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.legal-contact p {
  margin: 0;
  color: rgba(255, 255, 255, .85);
  font-size: .92rem;
  line-height: 1.5;
}

.legal-contact .btn {
  color: var(--brand-green-dark);
  text-decoration: none;
}

@media (max-width: 992px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Sidebar becomes a row of tabs above the text */
  .legal-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 8px;
  }

  .legal-nav h2 {
    display: none;
  }

  .legal-nav a {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .page-hero {
    padding: 40px 0 36px;
  }

  .legal {
    padding: 28px 0 56px;
  }

  .legal-nav a {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .legal-content {
    padding: 22px 18px;
  }

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

  .legal-contact .btn {
    width: 100%;
  }
}

/* Tablet & small laptop: collapse the menu into a drop-down (the branch menu needs ~1200px on one line) */
@media (max-width: 1199px) {
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--brand-border);
    box-shadow: 0 12px 24px rgba(15, 51, 38, .08);
    padding: 8px 24px 20px;
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
  }

  .site-nav.open {
    display: flex;
  }

  .nav-link {
    padding: 13px 0;
    border-bottom: 1px solid var(--brand-cream-dark);
  }

  .nav-link::after {
    display: none;
  }

  .nav-cta {
    margin-top: 16px;
    padding: 12px 18px;
  }

  .nav-cta + .nav-cta {
    margin-top: 10px;
  }
}

@media (max-width: 992px) {
  .why-us-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* Mobile */
@media (max-width: 600px) {
  :root {
    --header-height: 64px;
  }

  .site-container {
    padding: 0 16px;
  }

  .site-header .site-container {
    padding: 0 16px;
  }

  .site-nav {
    padding: 8px 16px 20px;
  }

  .brand-logo {
    height: 36px;
  }

  .brand-banner {
    height: 40px;
  }

  .brand-name {
    font-size: 1rem;
  }

  .hero {
    min-height: 520px;
  }

  .hero-content {
    padding-top: 56px;
    padding-bottom: 88px;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-actions .btn {
    flex: 1 1 100%;
  }

  /* Arrows would sit on top of the text on a narrow screen; swipe + dots cover navigation. */
  .hero-nav {
    display: none;
  }

  .counters {
    padding: 48px 0;
  }

  .counter-grid {
    gap: 12px;
  }

  .counter {
    flex: 1 1 calc(50% - 6px);
    padding: 20px 12px;
  }

  .branches,
  .why-us {
    padding: 60px 0;
  }

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

  .branch-grid {
    --gap: 16px;
  }

  .branch-card {
    flex-basis: 100%;
    max-width: 360px;
  }

  .why-us-grid {
    grid-template-columns: 1fr;
  }

  .cta-row .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-slide,
  .hero-slide-image,
  .hero-copy {
    transition: none;
    animation: none;
  }
}

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

/*
 * Header submenus (Front CMS > Navigation Menu): up to 3 levels — menu, submenu, child menu.
 * Desktop: hover / keyboard-focus dropdowns, child menus fly out to the side.
 * Tablet & phone (the collapsed menu): the caret button expands a submenu in place.
 */
.nav-item {
  position: relative;
}

.nav-item-row {
  display: flex;
  align-items: center;
}

.nav-label {
  cursor: default;
}

.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: .8rem;
  cursor: pointer;
}

.nav-sub-toggle i {
  transition: transform .2s ease;
}

.nav-item.open > .nav-item-row .nav-sub-toggle i {
  transform: rotate(180deg);
}

.nav-sublink {
  display: block;
  padding: 9px 16px;
  color: var(--brand-text);
  font-weight: 500;
  white-space: nowrap;
}

.nav-sublink:hover,
.nav-sublink:focus-visible {
  color: var(--brand-green);
  background: var(--brand-cream);
}

.nav-submenu .nav-item-row > .nav-sublink {
  flex: 1 1 auto;
}

@media (min-width: 1200px) {
  .nav-submenu {
    position: absolute;
    top: 100%;
    left: -12px;
    z-index: 30;
    min-width: 210px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(15, 51, 38, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
  }

  /* Child menus open to the side of their submenu item */
  .nav-submenu .nav-submenu {
    top: -7px;
    left: 100%;
  }

  .nav-submenu .nav-sub-toggle {
    margin-right: 8px;
    transform: rotate(-90deg);
  }

  .nav-item:hover > .nav-submenu,
  .nav-item:focus-within > .nav-submenu,
  .nav-item.open > .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

@media (max-width: 1199px) {
  .nav-item {
    border-bottom: 1px solid var(--brand-cream-dark);
  }

  .nav-item-row > .nav-link {
    flex: 1 1 auto;
    border-bottom: 0;
  }

  .nav-sub-toggle {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .nav-submenu {
    display: none;
    padding: 0 0 8px 14px;
  }

  .nav-item.open > .nav-submenu {
    display: block;
  }

  .nav-submenu .nav-item {
    border-bottom: 0;
  }

  .nav-sublink {
    padding: 9px 4px;
    white-space: normal;
  }
}

/* Front CMS page (/{branch}/page/{slug}) — same card as the policy pages, full width */
.cms-page-image {
  display: block;
  width: 100%;
  max-height: 420px;
  margin: 0 0 24px;
  object-fit: cover;
  border-radius: 10px;
}

.cms-page-content img {
  max-width: 100%;
  height: auto;
}

.cms-page-content table {
  width: 100%;
  border-collapse: collapse;
}

.cms-page-content td,
.cms-page-content th {
  padding: 8px 10px;
  border: 1px solid var(--brand-border);
}

@media (max-width: 600px) {
  .cms-page-content {
    padding: 22px 18px;
  }
}

/* Header: a taller row with a bigger logo / school name and larger Poppins menu text, so it reads clearly */
:root {
  --header-height: 90px;
}

.site-header {
  font-family: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;
}

.header-row {
  gap: 32px;
}

.brand {
  gap: 12px;
}

.brand-logo {
  height: 56px;
}

.brand-banner {
  height: 64px;
}

.brand-name {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.nav-link {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .01em;
}

.nav-cta {
  padding: 11px 22px;
  font-size: .95rem;
  font-weight: 600;
}

/* Long branch menus on smaller desktops: slightly smaller text so they still fit on one line */
@media (max-width: 1440px) and (min-width: 1200px) {
  .nav-link {
    font-size: .92rem;
  }

  .nav-cta {
    padding: 10px 16px;
    font-size: .88rem;
  }
}

/* Drop-down menu (tablets and phones): roomy, easy-to-tap rows */
@media (max-width: 1199px) {
  .nav-link {
    font-size: 1.02rem;
  }
}

@media (max-width: 600px) {
  :root {
    --header-height: 70px;
  }

  .brand-logo {
    height: 44px;
  }

  .brand-banner {
    height: 50px;
  }

  .brand-name {
    font-size: 1.1rem;
  }
}

/* Header text in black, a step bigger and bolder, so the menu reads clearly */
.site-header {
  --header-text: #111;
}

.brand-name,
.nav-link,
.nav-label,
.nav-sub-toggle,
.nav-sublink {
  color: var(--header-text);
}

.brand-name {
  font-size: 1.4rem;
  font-weight: 700;
}

.nav-link,
.nav-label {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
}

.nav-sublink {
  font-size: .98rem;
  font-weight: 500;
}

.nav-link:hover,
.nav-link.active,
.nav-sublink:hover,
.nav-sublink:focus-visible {
  color: var(--brand-green);
}

/* Long branch menus on smaller desktops: a touch smaller so they still fit on one line */
@media (max-width: 1440px) and (min-width: 1200px) {
  .nav-link,
  .nav-label {
    font-size: .95rem;
  }
}

@media (max-width: 1199px) {
  .nav-link,
  .nav-label {
    font-size: 1.05rem;
  }
}

@media (max-width: 600px) {
  .brand-name {
    font-size: 1.15rem;
  }
}

/* Slider photos at full quality: no dark tint and no zoom (scaling blurred them); a text shadow keeps the slide text readable */
.hero-copy {
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .35);
}

/* Whole photo always visible (banners carry their own text at the edges): fitted, never cropped.
   home.js sizes the hero to the photo's shape (.is-fitted); any leftover space shows the brand green. */
.hero-slide-image {
  background-size: contain;
  background-repeat: no-repeat;
}

.hero.is-fitted {
  min-height: 0;
  transition: height .4s ease;
}

.hero.is-fitted .hero-content {
  padding-top: 40px;
  padding-bottom: 64px;
}

/* Phones: a more compact text block, so the hero can stay close to the photo's own height */
@media (max-width: 600px) {
  .hero.is-fitted .hero-content {
    padding-top: 24px;
    padding-bottom: 52px;
  }

  .hero.is-fitted .hero-copy h1 {
    font-size: 1.6rem;
    margin-bottom: 10px;
  }

  .hero.is-fitted .hero-subtitle {
    margin-bottom: 16px;
    font-size: .92rem;
  }

  .hero.is-fitted .hero-actions .btn {
    flex: 1 1 auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Overlay behind the slide text (left side) so the title stays readable on bright photos; the right side stays clear */
.hero-slide-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .45) 40%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

@media (max-width: 600px) {
  .hero-slide-image::after {
    background: rgba(0, 0, 0, .5);
  }
}

/* Larger main logo in the landing page header and footer (the logo is a wide crest + name banner) */
.brand-main .brand-logo,
.brand-main .brand-banner {
  height: 90px;
  max-width: min(320px, 60vw);
}

.footer-brand-main .footer-brand-logo {
  height: 90px;
  max-width: 100%;
}

.footer-brand-main .footer-brand-banner {
  height: 90px;
}

@media (max-width: 1100px) {
  .brand-main .brand-logo,
  .brand-main .brand-banner {
    height: 64px;
  }
}

@media (max-width: 600px) {
  .brand-main .brand-logo,
  .brand-main .brand-banner {
    height: 54px;
  }

  .footer-brand-main .footer-brand-logo,
  .footer-brand-main .footer-brand-banner {
    height: 64px;
  }
}

/* Branch cards: a fixed number per row for each screen size, each card filling its share of the row
   (a short last row stays centred). Desktop 4, small laptop 3, tablet 2, phone 1. */
.branch-card {
  flex: 0 1 calc((100% - 3 * var(--gap)) / 4);
  max-width: none;
}

@media (max-width: 1100px) {
  .branch-card {
    flex-basis: calc((100% - 2 * var(--gap)) / 3);
  }
}

@media (max-width: 820px) {
  .branch-grid {
    --gap: 16px;
  }

  .branch-card {
    flex-basis: calc((100% - var(--gap)) / 2);
  }
}

@media (max-width: 520px) {
  .branch-card {
    flex-basis: 100%;
  }

  .branch-card-body {
    padding: 14px 16px 0;
  }
}

/* Touch screens: no hover lift/zoom left "stuck" on a card after tapping it */
@media (hover: none) {
  .branch-card:hover,
  .branch-card:focus-visible {
    transform: none;
  }

  .branch-card:hover .branch-card-image img {
    transform: none;
  }
}

/* Slider text scales with the screen width (desktop → tablet → phone) instead of staying desktop-sized */
.hero.is-fitted .hero-content {
  padding-top: clamp(14px, 3.5vw, 40px);
  padding-bottom: clamp(40px, 6vw, 64px);
}

.hero.is-fitted .hero-copy {
  max-width: min(640px, 100%);
}

.hero.is-fitted .hero-copy .eyebrow {
  font-size: clamp(.66rem, 1.1vw, .8rem);
  margin-bottom: clamp(4px, .8vw, 10px);
}

.hero.is-fitted .hero-copy h1 {
  font-size: clamp(1.25rem, 3.6vw, 3.4rem);
  margin-bottom: clamp(6px, 1.2vw, 16px);
}

.hero.is-fitted .hero-subtitle {
  font-size: clamp(.8rem, 1.4vw, 1.08rem);
  margin-bottom: clamp(10px, 2vw, 28px);
}

.hero.is-fitted .hero-actions {
  gap: clamp(8px, 1.2vw, 14px);
}

.hero.is-fitted .hero-actions .btn {
  flex: 0 1 auto;
  font-size: clamp(.78rem, 1.2vw, 1rem);
  padding: clamp(8px, 1vw, 12px) clamp(12px, 1.8vw, 22px);
}

/* Tablets: text kept to the left part of the slide so more of the photo shows */
@media (min-width: 601px) and (max-width: 1024px) {
  .hero.is-fitted .hero-copy {
    max-width: 70%;
  }
}

/* Phones: buttons share one row; the long subtitle line is limited to two lines */
@media (max-width: 600px) {
  .hero.is-fitted .hero-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

  .hero.is-fitted .hero-subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Phones: photo on top at its own size, slide text below it on the brand green (home.js adds
   .is-stacked and --hero-image-height), so the text never covers the banner's own artwork. */
.hero.is-stacked {
  display: block;
  height: auto;
  min-height: 0;
}

.hero.is-stacked .hero-slide {
  bottom: auto;
  height: var(--hero-image-height);
}

.hero.is-stacked .hero-slide-image::after {
  display: none;
}

.hero.is-stacked .hero-content {
  padding-top: calc(var(--hero-image-height) + 18px);
  padding-bottom: 48px;
}

.hero.is-stacked .hero-copy {
  max-width: 100%;
  text-shadow: none;
}

.hero.is-stacked .hero-dots {
  bottom: 18px;
}

/* Counters: all on one row, equal widths, on every screen size (no 2 + 1 split on phones);
   the numbers, labels and icons shrink with the screen width instead. */
.counter-grid {
  flex-wrap: nowrap;
}

.counter {
  flex: 1 1 0;
  min-width: 0;
  max-width: 260px;
}

@media (max-width: 600px) {
  .counter-grid {
    gap: 10px;
  }

  .counter {
    flex: 1 1 0;
    padding: 16px 6px;
    gap: 4px;
    border-radius: 12px;
  }

  .counter i {
    font-size: 1.3rem;
    margin-bottom: 0;
  }

  .counter strong {
    font-size: clamp(1.15rem, 6vw, 1.8rem);
  }

  .counter span {
    font-size: clamp(.6rem, 2.6vw, .72rem);
    letter-spacing: .04em;
  }
}

/* Our Branches on phones: less empty space around the section, a smaller heading, and a single
   card kept to a comfortable width (not a full-width card with a very tall photo). */
@media (max-width: 600px) {
  .branches {
    padding: 44px 0;
  }

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

  .branches .section-heading h2 {
    font-size: 1.5rem;
  }

  .branches .section-heading p {
    font-size: .92rem;
  }

  .branch-card {
    max-width: 420px;
  }

  .branch-card-body h3 {
    font-size: .98rem;
  }

  .branch-location {
    font-size: .82rem;
    margin-bottom: 10px;
  }

  .branch-card-footer {
    padding: 10px 0 12px;
  }
}

/* Branch card body: centred name, location and a centred "Visit Branch →" pill button */
.branch-card-body {
  align-items: center;
  text-align: center;
  padding: 18px 18px 0;
}

.branch-card-body h3 {
  margin-bottom: 6px;
}

.branch-location {
  justify-content: center;
  text-align: center;
}

.branch-card-footer {
  width: 100%;
  justify-content: center;
  padding: 14px 0 18px;
}

.branch-card-footer .branch-link,
.branch-card-footer .branch-arrow {
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.branch-card-footer {
  gap: 0;
}

.branch-card-footer .branch-link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 6px 0 16px;
  border-radius: 999px 0 0 999px;
  background: var(--brand-cream-dark);
  color: var(--brand-green);
  font-size: .86rem;
}

.branch-card-footer .branch-arrow {
  width: 36px;
  height: 36px;
  border-radius: 0 999px 999px 0;
  background: var(--brand-cream-dark);
}

.branch-card:hover .branch-card-footer .branch-link,
.branch-card:focus-visible .branch-card-footer .branch-link,
.branch-card:hover .branch-card-footer .branch-arrow,
.branch-card:focus-visible .branch-card-footer .branch-arrow {
  background: var(--brand-green);
  color: #fff;
  transform: none;
}

.branch-card:hover .branch-card-footer .branch-arrow i,
.branch-card:focus-visible .branch-card-footer .branch-arrow i {
  transform: translateX(3px);
}

.branch-card-footer .branch-arrow i {
  transition: transform .2s ease;
}

/* Branch address: larger, darker and slightly bolder so it reads clearly on the white card */
.branch-location {
  color: #3f4a44;
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.5;
}

.branch-location i {
  font-size: 1rem;
  margin-top: 3px;
}

@media (max-width: 600px) {
  .branch-location {
    font-size: .9rem;
  }
}