:root {
  --navy:#051d3a;
  --navy2:#071f3e;
  --blue:#1672dd;
  --yellow:#ffc21d;
  --green:#47b358;
  --purple:#985ad8;
  --ink:#10233e;
  --muted:#4f5d70;
  --light:#f4f7fb;
  --line:#d9e1ec
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:#fff
}

.site-header {
  height:76px;
  background:var(--navy);
  position:sticky;
  top:0;
  z-index:20
}

.nav-wrap {
  height:100%;
  max-width:1560px;
  margin:auto;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.brand {
  display:flex;
  align-items:center;
  text-decoration:none;
  color:#fff;
  min-width:285px;
  gap:10px
}

.brand-symbol {
  width:42px;
  height:42px;
  border-radius:11px;
  background:var(--yellow);
  color:var(--navy);
  display:grid;
  place-items:center;
  font-size:28px;
  font-weight:900
}

.brand-name {
  font-size:15px;
  line-height:.88;
  letter-spacing:.4px
}

.brand-name b {
  color:#1595eb
}

.brand-name strong {
  color:var(--yellow)
}

.brand-tagline {
  font-size:11px;
  letter-spacing:1.4px;
  color:#9cc9f1;
  font-weight:bold;
  align-self:flex-end;
  padding-bottom:3px
}

.nav-links {
  display:flex;
  align-items:center;
  gap:24px
}

.nav-links a {
  font-weight:800;
  font-size:12px;
  color:#fff;
  text-decoration:none;
  padding:28px 0 24px
}

.nav-links a.active {
  color:var(--yellow);
  border-bottom:4px solid var(--yellow)
}

.nav-links .get-involved {
  padding:12px 16px;
  border:1px solid var(--yellow);
  color:var(--yellow);
  margin-left:4px
}

.menu-toggle {
  display:none;
  background:none;
  border:0;
  color:#fff;
  font-size:28px
}

.hero {
  min-height:330px;
  background:var(--navy);
  display:grid;
  grid-template-columns:52% 48%;
  overflow:hidden
}

.hero-copy {
  max-width:740px;
  padding:24px 30px 24px max(28px,calc((100vw - 1500px)/2 + 28px));
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.hero-kicker {
  color:var(--yellow);
  font-size:14px;
  font-weight:900;
  letter-spacing:2px;
  margin:0 0 12px
}

.hero h1 {
  color:#fff;
  font-size:52px;
  line-height:1.05;
  letter-spacing:-2px;
  margin:0 0 16px;
  font-weight:900
}

.hero h1 span {
  color:var(--yellow)
}

.hero-text {
  font-size:18px;
  line-height:1.4;
  color:#fff;
  max-width:650px;
  margin:0 0 12px
}

.hero-proof {
  color:#d6e5f4;
  font-size:14px;
  line-height:1.4;
  margin:0 0 16px
}

.hero-proof strong {
  color:var(--yellow)
}

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

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  padding:15px 21px;
  font-size:14px;
  font-weight:900;
  border-radius:5px
}

.yellow {
  background:var(--yellow);
  color:var(--navy)
}

.outline {
  color:#fff;
  border:2px solid #fff
}

.navy {
  color:#fff;
  background:var(--navy)
}

.hero-image-wrap {
  position:relative;
  min-height:330px
}

.hero-image-wrap>img {
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
  object-position:60% center
}

.hero-photo-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--navy) 0%,rgba(5,29,58,.75) 14%,rgba(5,29,58,.12) 48%,rgba(5,29,58,.05) 100%)
}

.award-badge {
  position:absolute;
  right:38px;
  bottom:34px;
  width:305px;
  border:1px solid var(--yellow);
  background:rgba(5,29,58,.93);
  padding:14px;
  display:flex;
  gap:12px;
  color:#fff;
  text-decoration:none;
  transition:transform .2s ease,background-color .2s ease
}

.award-badge:hover {
  transform:translateY(-3px);
  background-color:rgba(7,38,74,.96)
}

.award-icon {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:var(--yellow);
  color:var(--navy);
  font-size:22px
}

.award-badge b {
  font-size:13px;
  display:block;
  color:#fff
}

.award-badge small {
  display:block;
  font-size:11px;
  line-height:1.35;
  color:#dbe6f5;
  margin-top:5px
}

.method-strip {
  padding:42px 5% 44px;
  text-align:center;
  background:#fff
}

.section-title {
  font-size:22px;
  font-weight:900;
  color:var(--ink)
}

.section-subtitle {
  font-size:14px;
  color:var(--muted);
  margin:14px 0 30px
}

.method-row {
  max-width:1320px;
  margin:auto;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:26px
}

.method-row article {
  width:205px
}

.icon {
  margin:0 auto 8px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:30px;
  border:2px solid currentColor
}

.blue {
  color:var(--blue)
}

.green {
  color:var(--green)
}

.gold {
  color:#f5a600
}

.purple {
  color:var(--purple)
}

.method-row h3 {
  font-size:17px;
  margin:8px 0 5px;
  color:var(--blue)
}

.green-text {
  color:var(--green)!important
}

.gold-text {
  color:#f5a600!important
}

.purple-text {
  color:var(--purple)!important
}

.method-row p {
  margin:0;
  font-size:12px;
  line-height:1.35;
  color:#263549
}

.arrow {
  font-size:45px;
  color:#b4bfcb;
  padding-top:2px
}

.student-driven {
  background:var(--navy);
  color:#fff;
  padding:34px 5%
}

.student-driven-inner {
  max-width:1220px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:28px
}

.line-icon {
  font-size:54px;
  color:var(--yellow)
}

.student-driven h2 {
  font-size:27px;
  margin:0 0 10px
}

.student-driven h2 span {
  color:var(--yellow)
}

.student-driven p {
  line-height:1.45;
  margin:0 0 5px;
  color:#e2ecf6
}

.student-driven strong {
  color:#fff
}

.real-photos {
  padding:44px 5%;
  background:var(--navy);
  color:#fff;
  text-align:center
}

.real-photos h2 {
  margin:0;
  font-size:28px
}

.real-photos>p {
  color:#bbd0e8;
  margin:10px 0 25px
}

.gallery-grid {
  max-width:1320px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:235px;
  gap:16px
}

.gallery-grid figure {
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.2)
}

.gallery-grid .large {
  grid-column:span 2;
  grid-row:span 2
}

.gallery-grid .wide {
  grid-column:span 2
}

.gallery-grid img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s
}

.gallery-grid figure:hover img {
  transform:scale(1.04)
}

.gallery-grid figcaption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:14px;
  text-align:left;
  font-size:13px;
  font-weight:bold;
  background:linear-gradient(transparent,rgba(5,29,58,.92));
  padding-top:45px
}

.school-year {
  padding:60px 5%;
  background:var(--light);
  text-align:center
}

.school-year h2 {
  font-size:32px;
  font-weight:900;
  margin:0 0 12px;
  letter-spacing:-0.5px
}

.instagram-hero-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-color:rgba(255,255,255,.4)!important;
  color:#fff;
  transition:background .25s ease,border-color .25s ease,color .25s ease
}

.instagram-hero-btn:hover {
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 4px 15px rgba(225,48,108,.4)
}

.instagram-btn-logo {
  width:36px;
  height:36px;
  display:block;
  border-radius:8px
}

.school-year-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1320px;
  margin:36px auto 0;
  align-items:stretch
}

.school-year-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:32px 24px;
  box-shadow:0 4px 12px rgba(13,35,69,.04);
  transition:transform .25s ease,box-shadow .25s ease;
  display:flex;
  flex-direction:column;
  align-items:center
}

.school-year-card:hover {
  transform:translateY(-5px);
  box-shadow:0 10px 25px rgba(13,35,69,.08)
}

.school-year-card .icon {
  font-size:32px;
  margin-bottom:16px;
  width:56px;
  height:56px;
  background:var(--light);
  display:grid;
  place-items:center;
  border-radius:12px;
  border:none
}

.school-year-card h3 {
  font-size:19px;
  font-weight:800;
  margin:0 0 12px;
  color:var(--blue);
  letter-spacing:.2px
}

.school-year-card p {
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
  margin:0
}

.founder {
  display:grid;
  grid-template-columns:37% 1fr;
  max-width:1320px;
  margin:55px auto;
  padding:0 5%;
  gap:38px;
  align-items:center
}

.founder img {
  width:100%;
  height:340px;
  object-fit:cover;
  border-radius:12px
}

.founder h2 {
  font-size:34px;
  margin:0 0 12px
}

.founder p:not(.hero-kicker) {
  font-size:17px;
  line-height:1.55;
  color:var(--muted);
  margin-bottom:22px
}

.support {
  background:var(--yellow);
  padding:30px 5%;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.support h2 {
  margin:0 0 8px;
  font-size:26px
}

.support p {
  margin:0;
  max-width:760px
}

.support .navy {
  white-space:nowrap
}

footer {
  background:#06172f;
  color:#fff;
  padding:32px 5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}

footer b {
  display:block;
  font-size:20px
}

footer span {
  display:block;
  color:#9fcdf3;
  font-size:13px;
  margin-top:4px
}

footer p {
  margin:0;
  max-width:400px;
  color:#cbd9e8;
  font-size:13px
}

footer small {
  color:#91a9c1
}

.hidden {
  display:none
}

.student-involvement {
  padding:40px 5%;
  background:#fff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:center
}

.student-involvement h3 {
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  color:var(--muted);
  margin:0 0 24px;
  text-transform:uppercase
}

.logos-grid {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:60px;
  flex-wrap:wrap;
  max-width:1100px;
  margin:0 auto
}

.logos-grid a {
  display:block;
  opacity:0.7;
  transition:opacity .25s ease,transform .25s ease;
  max-width:180px
}

.logos-grid a:hover {
  opacity:1;
  transform:scale(1.05)
}

.logos-grid img {
  max-height:50px;
  max-width:100%;
  object-fit:contain;
  filter:grayscale(100%);
  transition:filter .25s ease
}

.logos-grid a:hover img {
  filter:none
}

@media(max-width:1120px) {
  .nav-links{gap:14px
}

.nav-links a {
  font-size:10px
}

.hero h1 {
  font-size:52px
}

.method-row {
  gap:12px
}

.arrow {
  font-size:36px
}

}
@media(max-width:800px) {
  .student-involvement {
    padding:30px 5%
  }
  .logos-grid {
    gap:35px
  }
  .logos-grid img {
    max-height:38px
  }
  .site-header{height:68px
}

.brand {
  min-width:0
}

.brand-tagline {
  display:none
}

.nav-links {
  display:none;
  position:absolute;
  top:68px;
  left:0;
  right:0;
  background:var(--navy);
  padding:15px 24px;
  flex-direction:column;
  align-items:stretch;
  gap:0
}

.nav-links.open {
  display:flex
}

.nav-links a {
  padding:14px 0;
  font-size:13px
}

.nav-links .get-involved {
  margin:10px 0
}

.menu-toggle {
  display:block
}

.hero {
  grid-template-columns:1fr
}

.hero-copy {
  padding:50px 25px 38px
}

.hero-image-wrap {
  min-height:330px
}

.hero h1 {
  font-size:45px
}

.award-badge {
  right:20px;
  bottom:20px;
  width:270px
}

.method-row {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px
}

.method-row article {
  width:auto
}

.arrow {
  display:none
}

.gallery-grid {
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:190px
}

.school-year-grid {
  grid-template-columns:1fr;
  gap:20px
}

.founder {
  grid-template-columns:1fr;
  padding:0 5%
}

.support,footer {
  flex-direction:column;
  align-items:flex-start
}

.support .navy {
  margin-top:16px
}

}
@media(max-width:480px) {
  .hero h1{font-size:38px
}

.section-title {
  font-size:18px
}



.gallery-grid {
  grid-template-columns:1fr
}

.gallery-grid .large,.gallery-grid .wide {
  grid-column:span 1;
  grid-row:span 1
}

.method-row {
  grid-template-columns:1fr
}

}