/* Full-bleed scenery and independent live copy on the shared fluid content rail.
   Styles cover #home and its four-column education proof strip. */
#home.education-hero {
  height: clamp(560px, 40vw, 720px);
  background: #b5cefc;
  isolation: isolate;
}

#home .education-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  height: 100%;
  gap: 0;
  padding-block: 0;
}

#home .hero-content {
  flex: 0 0 430px;
  width: 430px;
  height: auto;
  padding: 48px 0;
}

#home h1 {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: #162e51;
  max-width: none;
  margin-bottom: 24px;
  text-wrap: initial;
}

#home .hero-content p {
  max-width: 420px;
  margin-bottom: 32px;
  font-size: 16px;
  line-height: 1.9;
  color: #294565;
}

#home .button-row { gap: 14px; flex-wrap: wrap; }
#home .button { min-height: 48px; padding: 12px 22px; font-size: 15px; }
#home .button.ghost { color: #243e62; background: #ffffffd9; border-color: #c1d0ec; }
#home .button:focus-visible { outline: 3px solid #173a72; outline-offset: 5px; }

#home .education-hero-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: auto;
  pointer-events: none;
  /* This panorama is composed natively with left copy space and right-side IPs. */
}

#home .education-hero-art img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 85% center;
  filter: none;
}

@media (min-width: 1181px) and (max-width: 1399px) {
  #home .hero-content { flex-basis: 380px; width: 380px; }
  #home h1 { font-size: 42px; }
  #home .hero-content p { font-size: 15px; }
  #home .button { padding-inline: 18px; font-size: 14px; }
}

/* Recompose on tablets/phones; never shrink a full desktop banner to a strip.
   Readable copy comes first, then a crop focused on the right-side experiment. */
@media (max-width: 1180px) {
  #home.education-hero { height: auto; background: #edf4ff; }
  #home::after { display: none; }
  #home .education-hero-inner { display: block; height: auto; padding: 0; }
  #home .hero-content { width: 100%; padding: 48px 0 36px; }
  #home h1 { font-size: 40px; margin-bottom: 20px; }
  #home .hero-content p { max-width: 580px; }
  #home .education-hero-art { position: relative; inset: auto; height: auto; aspect-ratio: 1.7; }
  #home .education-hero-art img { position: absolute; inset: 0 0 0 auto; width: 175%; height: 100%; object-position: right center; }
}

@media (max-width: 680px) {
  #home .hero-content { padding: 36px 0 28px; }
  #home h1 { font-size: clamp(29px, 7.7vw, 38px); margin-bottom: 18px; }
  #home .hero-content p { font-size: 14px; line-height: 1.85; margin-bottom: 24px; }
  #home .button-row { gap: 10px; }
  #home .button { min-height: 46px; padding: 10px 16px; font-size: 13px; }
}

/* User-supplied facts beneath the banner, presented as information, not links. */
.education-proof > div { min-width: 0; padding-right: 20px; border-right: 1px solid var(--line); }
.education-proof > div:last-child { border-right: 0; }
.education-proof .tiny-icon { margin-bottom: 12px; }
.education-proof strong { display: block; font-size: 26px; font-weight: 700; line-height: 1.4; color: #171c26; font-variant-numeric: tabular-nums; }
.education-proof strong span { color: #6860ef; }
.education-proof p { margin-top: 8px; font-size: 13px; line-height: 1.7; color: #606b7b; }

@media (min-width: 681px) and (max-width: 980px) {
  .education-proof > div { padding-right: 12px; }
  .education-proof strong { font-size: 21px; }
}

@media (max-width: 680px) {
  .education-proof > div { padding-right: 10px; }
  .education-proof > div:nth-child(2) { border-right: 0; }
  .education-proof strong { font-size: 20px; }
  .education-proof p { font-size: 12px; }
}

@media (max-width: 360px) {
  .education-proof strong { font-size: 18px; }
}