.about-page{
  position:relative;
  overflow:hidden;
}

.about-page .hero{
  background:
    radial-gradient(760px 420px at 72% 18%,rgba(180,255,0,.11),transparent 66%),
    radial-gradient(520px 280px at 12% 78%,rgba(180,255,0,.045),transparent 72%),
    linear-gradient(180deg,#0c100b,#080a08);
}

.about-page .hero-grid{
  align-items:stretch;
}

.about-page .hero-grid > div:first-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:26px;
}

.about-page .hero h1{
  max-width:780px;
  font-size:clamp(48px,7.2vw,92px);
  text-wrap:balance;
}

.about-page .hero .lede{
  max-width:690px;
  text-wrap:pretty;
}

.about-page .hero-image{
  position:relative;
  min-height:clamp(570px,52vw,740px);
  overflow:hidden;
  border:1px solid rgba(180,255,0,.25);
  border-radius:22px;
  background:rgba(10,14,9,.56);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
  box-shadow:
    0 28px 72px rgba(0,0,0,.36),
    0 0 42px rgba(180,255,0,.045),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.about-page .hero-image img{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center;
  border:0;
  border-radius:0;
  filter:saturate(.88) contrast(1.08) brightness(.78);
  transform:scale(1.015);
}

.about-page .hero-image::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,9,6,.02),rgba(6,9,6,.3)),
    linear-gradient(120deg,rgba(180,255,0,.08),transparent 38%,transparent 68%,rgba(0,0,0,.26));
}

.about-page .hero-image::after{
  content:"";
  position:absolute;
  inset:14px;
  z-index:2;
  pointer-events:none;
  border:1px solid rgba(180,255,0,.36);
  border-radius:14px;
  box-shadow:
    inset 0 0 34px rgba(180,255,0,.025),
    0 0 24px rgba(180,255,0,.035);
}

.about-page .section{
  position:relative;
}

.about-page .section::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  pointer-events:none;
  opacity:.22;
  filter:blur(90px);
  background:rgba(180,255,0,.08);
}

.about-page .section:nth-of-type(odd)::before{
  top:-220px;
  right:-260px;
}

.about-page .section:nth-of-type(even)::before{
  bottom:-240px;
  left:-280px;
}

.about-page .section > .content{
  position:relative;
  z-index:1;
  width:min(calc(100% - 44px),1180px);
  max-width:1180px;
}

.about-page .section h2{
  max-width:980px;
  text-wrap:balance;
}

.about-page .section .content > p{
  max-width:880px;
  margin-top:18px;
  color:#c2cabd;
  font-size:18px;
  line-height:1.78;
  text-wrap:pretty;
}

.about-page .grid{
  width:100%;
  margin-top:36px;
  align-items:stretch;
  gap:22px;
}

.about-page .grid.cards-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:940px;
}

.about-page .grid.cards-4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.about-page .grid.cards-5{
  grid-template-columns:repeat(5,minmax(0,1fr));
}

.about-page .card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:240px;
  padding:30px 26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.085);
  border-top-color:rgba(180,255,0,.2);
  border-radius:18px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018) 44%,rgba(180,255,0,.025)),
    rgba(10,14,9,.5);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
  box-shadow:
    0 20px 50px rgba(0,0,0,.27),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(180,255,0,.025);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease;
}

.about-page .card::after{
  content:"";
  position:absolute;
  top:-70px;
  right:-65px;
  width:160px;
  height:160px;
  border-radius:50%;
  pointer-events:none;
  background:rgba(180,255,0,.055);
  filter:blur(30px);
}

.about-page .card > *{
  position:relative;
  z-index:1;
}

.about-page .card:hover{
  transform:translateY(-6px);
  border-color:rgba(180,255,0,.38);
  background:
    linear-gradient(145deg,rgba(255,255,255,.072),rgba(255,255,255,.022) 44%,rgba(180,255,0,.045)),
    rgba(10,14,9,.6);
  box-shadow:
    0 28px 60px rgba(0,0,0,.35),
    0 0 30px rgba(180,255,0,.055),
    inset 0 1px 0 rgba(255,255,255,.1);
}

.about-page .card h3{
  margin-bottom:14px;
  color:var(--white);
  font-size:clamp(24px,2.2vw,31px);
  text-wrap:balance;
}

.about-page .card h3::after{
  content:"";
  display:block;
  width:44px;
  height:3px;
  margin-top:14px;
  border-radius:999px;
  background:var(--lime);
  box-shadow:0 0 14px rgba(180,255,0,.28);
}

.about-page .card p{
  font-size:16px;
  line-height:1.68;
  text-wrap:pretty;
}

/* Editorial split sections */
.about-page .section-2 .content,
.about-page .section-4 .content{
  display:grid;
  grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);
  column-gap:clamp(42px,6vw,82px);
  row-gap:16px;
  align-items:start;
}

.about-page .section-2 h2,
.about-page .section-4 h2{
  grid-column:1;
  grid-row:1 / span 3;
  margin:0;
}

.about-page .section-2 p,
.about-page .section-4 p{
  grid-column:2;
  margin-top:0!important;
}

.about-page .section-2 h2::before,
.about-page .section-4 h2::before{
  content:"";
  display:block;
  width:58px;
  height:4px;
  margin-bottom:20px;
  border-radius:999px;
  background:var(--lime);
  box-shadow:0 0 18px rgba(180,255,0,.24);
}

/* Parents and players */
.about-page .section-3 .content{
  text-align:center;
}

.about-page .section-3 h2,
.about-page .section-3 .content > p{
  margin-inline:auto;
}

.about-page .section-3 .grid{
  margin-inline:auto;
}

/* What makes the academy different */
.about-page .section-5 .card{
  min-height:300px;
}

.about-page .section-5 .card h3{
  color:var(--lime-soft,#d7ff7a);
}

/* Development pathway */
.about-page .section-6 .grid{
  position:relative;
  grid-template-columns:repeat(4,minmax(0,1fr));
  counter-reset:about-path;
}

.about-page .section-6 .grid::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:31px;
  height:2px;
  z-index:0;
  background:linear-gradient(90deg,transparent,var(--lime) 12%,var(--lime) 88%,transparent);
  box-shadow:0 0 14px rgba(180,255,0,.18);
}

.about-page .section-6 .card{
  counter-increment:about-path;
  min-height:320px;
  padding-top:84px;
}

.about-page .section-6 .card::before{
  content:counter(about-path,decimal-leading-zero);
  position:absolute;
  top:0;
  left:50%;
  z-index:2;
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  border:1px solid rgba(180,255,0,.42);
  border-radius:16px;
  background:rgba(11,16,9,.88);
  color:var(--lime);
  font:900 24px 'Barlow Condensed',sans-serif;
  box-shadow:
    0 0 0 9px rgba(8,10,8,.94),
    0 0 24px rgba(180,255,0,.11),
    inset 0 1px 0 rgba(255,255,255,.06);
  transform:translate(-50%,-1px);
}

.about-page .section-6 .card h3{
  text-align:center;
}

.about-page .section-6 .card h3::after{
  margin-inline:auto;
}

.about-page .section-6 .card p{
  text-align:center;
}

/* Values */
.about-page .section-7 .card{
  min-height:210px;
  text-align:center;
  padding-inline:20px;
}

.about-page .section-7 .card h3::after{
  margin-inline:auto;
}

/* Final CTA */
.about-page .about-cta{
  position:relative;
  overflow:hidden;
  padding-block:clamp(76px,9vw,118px);
  background:
    radial-gradient(600px 300px at 50% 0,rgba(180,255,0,.18),transparent 68%),
    radial-gradient(420px 260px at 15% 90%,rgba(180,255,0,.055),transparent 72%),
    #0d100c;
}

.about-page .about-cta::before{
  content:"";
  position:absolute;
  right:-20px;
  bottom:-90px;
  width:360px;
  height:360px;
  opacity:.045;
  background:url('/assets/logo.png') center/contain no-repeat;
  filter:drop-shadow(0 0 30px rgba(180,255,0,.25));
}

.about-page .about-cta .wrap{
  position:relative;
  z-index:1;
}

.about-page .about-cta .eyebrow{
  display:block;
  margin-bottom:14px;
}

.about-page .about-cta h2{
  max-width:860px;
  margin-inline:auto;
  text-wrap:balance;
}

.about-page .about-cta .hero-actions{
  justify-content:center;
}

@media(max-width:1100px){
  .about-page .grid.cards-5{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .about-page .section-6 .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .about-page .section-6 .grid::before{
    display:none;
  }
}

@media(max-width:980px){
  .about-page .hero-image{
    min-height:500px;
  }

  .about-page .grid.cards-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .about-page .section-2 .content,
  .about-page .section-4 .content{
    grid-template-columns:1fr;
    row-gap:18px;
  }

  .about-page .section-2 h2,
  .about-page .section-4 h2,
  .about-page .section-2 p,
  .about-page .section-4 p{
    grid-column:1;
    grid-row:auto;
  }
}

@media(max-width:680px){
  .about-page .section > .content{
    width:min(calc(100% - 32px),1180px);
  }

  .about-page .hero h1{
    font-size:clamp(43px,15vw,64px);
  }

  .about-page .hero-image{
    min-height:390px;
  }

  .about-page .grid.cards-2,
  .about-page .grid.cards-4,
  .about-page .grid.cards-5,
  .about-page .section-6 .grid{
    grid-template-columns:1fr;
  }

  .about-page .card,
  .about-page .section-5 .card,
  .about-page .section-6 .card,
  .about-page .section-7 .card{
    min-height:0;
  }

  .about-page .section-6 .card{
    padding-top:82px;
  }
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .about-page .card,
  .about-page .hero-image{
    background:#11160f;
  }
}