:root {
  --navy: #0b4078;
  --ink: #13294d;
  --sky: #cef7ff;
  --blue-top: #0064ad;
  --blue-bottom: #079fe4;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 94px; }
body { margin: 0; color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #ffcb32; outline-offset: 4px; }
[hidden] { display: none !important; }

/* EXACT reference header: 1600 × 75 px in the supplied image */
.site-header {
  position: relative;
  z-index: 20;
  background: #fff;
  box-shadow: 0 1px 0 rgba(15, 53, 88, .05);
}
.header-inner {
  height: clamp(60px, 4.6875vw, 75px);
  padding-left: 4.2%;
  padding-right: 3%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.wordmark {
  flex: 0 0 auto;
  color: var(--navy);
  font-size: clamp(25px, 2.5vw, 40px);
  font-weight: 750;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  letter-spacing: -1.25px;
}
.desktop-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(17px, 2.08vw, 34px);
  white-space: nowrap;
  height: 100%;
}
.desktop-nav a {
  position: relative;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(12px, 1.045vw, 16.8px);
  color: #18345c;
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.desktop-nav a::after {
  content: '';
  position: absolute;
  height: 3px;
  left: -3px;
  right: -3px;
  bottom: 11px;
  background: transparent;
}
.desktop-nav a.active::after, .desktop-nav a:hover::after { background: #08a9f5; }
.login-button {
  background: linear-gradient(110deg, #06447e, #045090);
  color: #fff;
  border: 0;
  border-radius: 6px;
  min-height: 51px;
  padding: 0 26px;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(2, 42, 77, .14);
}
.login-button:hover { filter: brightness(1.12); }
.menu-button, .mobile-nav { display: none; }

/* Desktop hero photograph/artwork: retains exact reference graphics.
   HTML cards overlay the three card areas, so they remain editable/clickable. */
.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1600 / 825;
  overflow: hidden;
  background: #bdf6ff;
}
.hero-art-desktop {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: -1;
}
.hero-art-mobile { display: none; }
.hero-actions { display: contents; }
.hero-card {
  position: absolute;
  top: 67.52%;
  height: 19.42%;
  border-radius: .85vw;
  color: #fff;
  background: linear-gradient(108deg, #0060a8 0%, #0076c1 52%, #079be3 100%);
  box-shadow: 0 1px 9px rgba(12, 93, 167, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  font-size: clamp(13px, 1.98vw, 32px);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -.75px;
  transition: filter .16s ease;
}
.hero-card:hover { filter: brightness(1.08); }
.hero-card:focus-visible { outline-offset: -6px; }
.card-parent { left: 9.1%; width: 26.95%; }
.card-teacher { left: 37.66%; width: 26.20%; }
.card-school { left: 65.56%; width: 26.84%; }

/* The supplementary content starts BELOW the 900px reference screenshot. */
.below-fold { background: #f6fbff; padding: 92px 5vw 105px; }
.info-section { margin-inline: auto; max-width: 1000px; text-align: center; }
.eyebrow { color: #0876bc; font-size: 13px; font-weight: 800; letter-spacing: .13em; }
.info-section h1 { margin: 18px 0; font-size: clamp(29px, 3.6vw, 52px); line-height: 1.15; }
.info-section h2 { font-size: clamp(27px, 3vw, 39px); }
.info-section p:not(.eyebrow) { color: #50647c; font-size: 18px; line-height: 1.7; }
.audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; max-width: 1350px; margin: 74px auto; }
.info-panel { background: #fff; border-radius: 18px; padding: 34px 30px; box-shadow: 0 10px 28px rgba(16, 70, 125, .065); scroll-margin-top: 100px; }
.info-panel h2 { font-size: 25px; margin: 14px 0; }
.info-panel p:not(.eyebrow) { line-height: 1.65; color: #526985; }
.info-panel a, .contact-link { display: inline-block; margin-top: 10px; color: #005da3; font-weight: 700; }
.contact-section { padding: 50px 0 0; }
.site-footer { background: #103c6a; padding: 24px 20px; text-align: center; color: #fff; font-size: 14px; }

.portal-dialog { border: 0; border-radius: 18px; width: min(460px, 90vw); padding: 27px; color: #1b3455; box-shadow: 0 30px 80px rgba(0, 0, 0, .25); }
.portal-dialog::backdrop { background: rgba(6, 25, 50, .55); }
.dialog-top { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.dialog-top h2 { margin: 0; font-size: 22px; }
.portal-dialog p { line-height: 1.7; color: #46576e; }
.close-button { background: transparent; border: 0; font-size: 32px; line-height: 1; cursor: pointer; color: #456; }
.dialog-close { background: #064c87; border: 0; color: #fff; border-radius: 7px; padding: 12px 17px; cursor: pointer; font-weight: 700; }

@media (max-width: 1199px) {
  .header-inner { padding-inline: 3%; }
  .wordmark { font-size: clamp(25px, 2.65vw, 34px); }
  .desktop-nav { gap: 17px; }
  .desktop-nav a { font-size: 12.2px; }
  .login-button { font-size: 15px; padding-inline: 16px; min-height: 43px; }
}

@media (max-width: 1000px) {
  html { scroll-padding-top: 75px; }
  .header-inner { height: 70px; padding: 0 23px; }
  .wordmark { font-size: clamp(24px, 4.3vw, 35px); letter-spacing: -.9px; }
  .desktop-nav, .desktop-login { display: none; }
  .menu-button { display: inline-grid; width: 44px; height: 44px; place-items: center; background: transparent; border: 0; color: var(--navy); cursor: pointer; }
  .mobile-nav { display: flex; flex-direction: column; gap: 0; background: #fff; padding: 10px 23px 23px; box-shadow: 0 10px 20px rgba(13, 55, 93, .13); }
  .mobile-nav a { font-size: 16px; font-weight: 650; text-decoration: none; padding: 15px 0; border-bottom: 1px solid #e4edf6; }
  .mobile-nav .login-button { margin-top: 18px; width: 100%; }
  .hero { aspect-ratio: auto; min-height: 0; padding: 35px 20px 74px; display: flex; flex-direction: column; align-items: center; background: linear-gradient(#d0f9ff 0%, #b0f1fa 65%, #72dbfc 100%); }
  .hero::after { content: ''; z-index: -1; position: absolute; inset: auto 0 0; width: 100%; height: 38%; background: url('assets/waves.svg') bottom center/100% 100% no-repeat; }
  .hero-art-desktop { display: none; }
  .hero-art-mobile { display: block; width: min(88vw, 570px); height: auto; margin: 5px auto 12px; }
  .hero-actions { display: flex; flex-direction: column; gap: 16px; width: min(100%, 550px); }
  .hero-card { position: static; flex: 0 0 auto; width: 100%; min-height: 105px; padding: 20px 12px; border-radius: 13px; font-size: clamp(22px, 4.8vw, 30px); line-height: 1.25; letter-spacing: -.45px; }
  .below-fold { padding: 65px 22px; }
  .audience-grid { grid-template-columns: 1fr; margin: 45px auto; }
  .info-section p:not(.eyebrow) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-card { transition: none; }
}