@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;600;700&display=swap');

@font-face{
  font-family:"Badger";
  src:url("/fonts/badger.woff2") format("woff2"),
      url("/fonts/badger.woff") format("woff");
  font-display:swap;
}

:root{
  --about-bg:#d4dbef;
  --about-heading:#463451;
  --about-subheading:#6977c8;
  --about-gold:#b8a16c;
}

*{box-sizing:border-box}

html{
  background:var(--about-bg);
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100%;
}

.about-body{
  background:var(--about-bg);
  color:#111;
  font-family:"Alegreya",Georgia,"Times New Roman",serif;
  line-height:1.45;
}

/* Same clean painted header treatment as the rebuilt Feedback page. */
.about-hero{
  min-height:250px;
  padding:28px 20px 34px;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.02),rgba(255,255,255,.08)),
    url("/feedback/assets/feedback-header-clean.jpg") center top/cover no-repeat;
  text-align:center;
}

.about-logo{
  display:block;
  width:min(255px,56vw);
  height:auto;
  margin:0 auto 16px;
}

.about-top-back{
  color:#fff;
  font-family:"Badger","Alegreya",serif;
  font-size:1rem;
  text-decoration:none;
  text-transform:uppercase;
  text-shadow:0 2px 4px #000;
}

.about-top-back:hover,
.about-top-back:focus-visible{
  text-decoration:underline;
}

/* Narrower layout and smaller scale, approximating the former 75% browser view. */
.about-main{
  width:min(1080px,78vw);
  margin:0 auto;
  padding:34px 0 92px;
}

.about-main h1{
  margin:0 0 44px;
  color:var(--about-heading);
  font-family:"Badger","Alegreya",serif;
  font-size:clamp(3rem,7vw,5.5rem);
  font-weight:400;
  line-height:1;
  text-align:center;
  text-transform:none;
}

.about-company-image{
  display:block;
  width:min(100%,900px);
  height:auto;
  margin:0 auto 58px;
}

.about-intro{
  width:min(820px,100%);
  margin:0 auto 88px;
  text-align:center;
}

.about-intro p{
  margin:0 0 30px;
  font-size:clamp(1rem,1.45vw,1.25rem);
  line-height:1.48;
}

.about-intro a{
  color:inherit;
}

.about-main h2{
  margin:0 0 28px;
  color:var(--about-subheading);
  font-family:"Alegreya",Georgia,"Times New Roman",serif;
  font-size:clamp(1.8rem,3vw,2.65rem);
  font-weight:400;
  line-height:1.15;
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px 54px;
  margin-bottom:90px;
}

.member{
  min-width:0;
}

.member img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:#c8ccdf;
}

.member h3{
  margin:13px 0 4px;
  font-family:"Alegreya",Georgia,"Times New Roman",serif;
  font-size:1.05rem;
  line-height:1.2;
}

.member p{
  margin:0;
  font-size:.95rem;
  line-height:1.3;
}

.support img{
  display:block;
  width:min(100%,820px);
  height:auto;
  margin:0 0 62px;
}

.about-bottom-back{
  display:inline-block;
  margin-bottom:20px;
  padding:.72rem 1rem;
  border-radius:8px;
  background:var(--about-gold);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  color:#fff;
  font-size:1rem;
  text-decoration:none;
}

/* Same copyright-only snowy footer structure as Schools and Parents. */
.about-footer{
  min-height:360px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 20px 28px;
  background:
    linear-gradient(
      to bottom,
      var(--about-bg) 0%,
      rgba(210,217,238,.55) 22%,
      rgba(210,217,238,0) 62%
    ),
    url("/parents/assets/hero-05-fade.jpg") center bottom/cover no-repeat;
  color:#fff;
  text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}

@media(max-width:900px){
  .about-main{
    width:min(88vw,760px);
  }

  .team-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:34px;
  }
}

@media(max-width:600px){
  .about-hero{
    min-height:210px;
    padding-top:22px;
  }

  .about-logo{
    width:min(255px,68vw);
  }

  .about-main{
    width:min(92vw,560px);
    padding:28px 0 60px;
  }

  .about-main h1{
    margin-bottom:32px;
    font-size:clamp(2.8rem,14vw,4.6rem);
  }

  .about-company-image{
    margin-bottom:42px;
  }

  .about-intro{
    margin-bottom:60px;
  }

  .about-intro p{
    font-size:1rem;
  }

  .team-grid{
    grid-template-columns:1fr;
    gap:34px;
    margin-bottom:65px;
  }

  .member h3{
    font-size:1.08rem;
  }

  .member p{
    font-size:.98rem;
  }

  .about-footer{
    min-height:260px;
    font-size:.78rem;
  }
}

.about-footer a{
  color:inherit;
  text-decoration:none;
}

.about-footer a:hover,
.about-footer a:focus-visible{
  text-decoration:underline;
}