:root{
  --blue:#51c1e1;
  --navy:#113e48;
  --sky:#dff6fb;
  --yellow:#fecc3d;
  --bright-yellow:#fff04f;
  --cream:#fffaf0;
  --ink:#113e48;
  --line:#cbe5ea;
  --font-primary:"Bree Serif","Astoria Bold",Georgia,serif;
  --font-accent:"Permanent Marker","Chantal Bold","Chantal Gold",cursive;
}

body{color:var(--ink)}
h1,h2,h3,.promo strong,.support-points strong{font-family:var(--font-primary);font-weight:400}
.site-header{height:98px;border-bottom:1px solid rgba(17,62,72,.08)}
.brand-lockup{gap:10px;min-width:188px}
.brand-lockup .brand-symbol{width:58px;height:58px;object-fit:contain;display:block}
.brand-words{display:grid;grid-template-columns:auto;line-height:.82;min-width:112px}
.brand-small{font:400 15px/1 var(--font-primary);letter-spacing:.02em;color:var(--navy);margin-left:2px}
.brand-name{font:400 32px/.92 var(--font-primary);letter-spacing:-.025em;color:var(--navy)}
.brand-tagline{font:400 9px/1.1 var(--font-accent);color:#e5a900;letter-spacing:.05em;text-transform:uppercase;justify-self:end;margin-top:5px}
.hero h1{font-weight:400;letter-spacing:-.035em}
.hero h1 em{font-family:var(--font-primary);color:var(--blue)}
.promo{background:var(--yellow)}
.promo>span{font-family:var(--font-accent);font-weight:400;letter-spacing:.04em;text-transform:none;font-size:15px}
.model{background:var(--navy)}
.experience{background:var(--blue);color:var(--navy)}
.experience .light{color:var(--navy)}
.level-early{background:#ffe7a0}
.level-preschool,.level-prefirst{background:var(--blue)}
.level-early>span,.level-preschool>span,.level-prefirst>span{color:var(--navy)}
.level-early p,.level-preschool p,.level-prefirst p{color:#173f49}
.level-elementary{background:var(--navy);color:#fff}
.level-elementary>span{color:var(--yellow)}
.level-elementary p{color:rgba(255,255,255,.86)}
.level-elementary li{border-color:rgba(255,255,255,.24)}
.button-yellow{background:var(--bright-yellow)}
.footer-brand .brand-symbol{width:72px;height:72px}
.footer-brand .brand-small{font-size:17px}
.footer-brand .brand-name{font-size:38px}
.footer-brand .brand-tagline{font-size:10px}

@media(max-width:620px){
  .site-header{height:88px}
  .site-header .brand-lockup{min-width:160px}
  .site-header .brand-symbol{width:50px;height:50px}
  .site-header .brand-small{font-size:13px}
  .site-header .brand-name{font-size:27px}
  .site-header .brand-tagline{font-size:8px}
}