@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap");

:root {

  --navy: #102d42;

  --navy-dark: #0a202f;

  --orange: #f26b38;

  --gold: #f6bf5d;

  --cream: #f8f4eb;

  --ink: #18303f;

  --muted: #65727b;

  --line: #dce1df;

  --white: #fff;

}

* {

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

}

body {

  margin: 0;

  color: var(--ink);

  font-family: "DM Sans", Arial, sans-serif;

  font-size: 16px;

  line-height: 1.6;

  background: var(--white);

}

h1,

h2,

h3,

p {

  margin-top: 0;

}

h1,

h2 {

  font-family: "Playfair Display", Georgia, serif;

  line-height: 1.04;

  letter-spacing: -0.035em;

}

h1 {

  font-size: clamp(3.1rem, 7vw, 6.4rem);

}

h2 {

  font-size: clamp(2.3rem, 4.5vw, 4.25rem);

}

h3 {

  font-size: 1.28rem;

  line-height: 1.25;

}

a {

  color: inherit;

}

.container {

  width: min(1120px, calc(100% - 48px));

  margin-inline: auto;

}

.section {

  padding-block: 110px;

}

.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}

.skip-link {

  position: fixed;

  top: 8px;

  left: 8px;

  z-index: 99;

  transform: translateY(-150%);

  background: var(--orange);

  color: #fff;

  padding: 10px 14px;

  font-weight: 700;

}

.skip-link:focus {

  transform: translateY(0);

}

.site-header {

  position: relative;

  z-index: 10;

  border-bottom: 1px solid #e8ebe8;

  background: #fff;

}

.nav-wrap {

  min-height: 83px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

}

.brand {

  display: flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;

  font-size: 0.82rem;

  line-height: 1.05;

  text-transform: uppercase;

  letter-spacing: 0.075em;

  font-weight: 600;

}

.brand strong {

  display: block;

  font-weight: 700;

}

.brand-mark {

  width: 37px;

  height: 37px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--orange);

  color: #fff;

  font-family: "Playfair Display", serif;

  font-size: 1.4rem;

  font-style: italic;

  text-transform: none;

}

.site-nav {

  display: flex;

  align-items: center;

  gap: 20px;

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.01em;

}

.site-nav a {

  text-decoration: none;

}

.site-nav > a:not(.nav-donate) {

  border-bottom: 2px solid transparent;

  padding: 31px 0 27px;

}

.site-nav > a:not(.nav-donate):hover,

.site-nav > a.active {

  border-color: var(--orange);

}

.nav-donate {

  padding: 10px 14px;

  background: var(--navy);

  color: #fff;

}

.menu-toggle {

  display: none;

}

.hero {

  min-height: 690px;

  position: relative;

  color: #fff;

  display: flex;

  align-items: center;

  overflow: hidden;

  background: var(--navy);

}

.hero-image {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(

      90deg,

      rgba(8, 29, 43, 0.88) 0%,

      rgba(8, 29, 43, 0.55) 45%,

      rgba(8, 29, 43, 0.13) 100%

    ),

    url(sports.jpg) center/cover;

}

.hero-content {

  position: relative;

  padding: 100px 0 130px;

  max-width: 1120px;

  width: 100%;

}

.eyebrow {

  margin-bottom: 17px;

  text-transform: uppercase;

  font-size: 0.76rem;

  font-weight: 700;

  letter-spacing: 0.16em;

}

.eyebrow.accent {

  color: var(--orange);

}

.hero h1 {

  max-width: 720px;

  margin-bottom: 24px;

}

em {

  color: var(--gold);

  font-weight: inherit;

}

.hero-copy {

  font-size: 1.14rem;

  max-width: 550px;

  line-height: 1.65;

  margin-bottom: 33px;

}

.button-row {

  display: flex;

  gap: 13px;

  flex-wrap: wrap;

}

.button {

  display: inline-flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

  min-height: 48px;

  padding: 12px 19px;

  text-decoration: none;

  font-size: 0.85rem;

  text-transform: uppercase;

  letter-spacing: 0.045em;

  font-weight: 700;

  transition:

    transform 0.2s,

    background 0.2s;

}

.button:hover {

  transform: translateY(-2px);

}

.button-primary {

  background: var(--orange);

  color: white;

}

.button-ghost {

  border: 1px solid rgba(255, 255, 255, 0.68);

  color: white;

}

.button-dark {

  background: var(--navy);

  color: #fff;

}

.button-light {

  background: #fff;

  color: var(--navy);

}

.coming-soon {

  text-transform: none;

  letter-spacing: 0;

  font-size: 0.72rem;

  background: rgba(16, 45, 66, 0.12);

  padding: 2px 6px;

}

.hero-statement {

  position: absolute;

  right: 30px;

  bottom: 26px;

  font-family: "Playfair Display", serif;

  font-size: 1.13rem;

  font-style: italic;

  letter-spacing: 0.01em;

}

.hero-statement span {

  color: var(--gold);

}

.intro {

  display: grid;

  grid-template-columns: 1.05fr 0.95fr;

  gap: 110px;

  align-items: start;

}

.intro h2 {

  margin-bottom: 0;

}

.intro-copy {

  padding-top: 23px;

  font-size: 1.08rem;

}

.text-link,

.values-grid a {

  color: var(--orange);

  font-size: 0.86rem;

  font-weight: 700;

  text-decoration: none;

}

.text-link {

  display: inline-block;

  margin-top: 10px;

  border-bottom: 1px solid currentColor;

}

.values-band {

  background: var(--cream);

  padding: 78px 0;

}

.values-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 48px;

}

.values-grid article {

  padding-right: 25px;

  border-right: 1px solid #d8d6cf;

}

.values-grid article:last-child {

  border: 0;

}

.number {

  color: var(--orange);

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.09em;

}

.values-grid h3 {

  margin: 19px 0 10px;

  font-family: "Playfair Display", serif;

  font-size: 1.65rem;

}

.values-grid p {

  min-height: 102px;

  color: #56636a;

}

.feature {

  display: grid;

  grid-template-columns: 1fr 1fr;

  padding-block: 110px;

  align-items: stretch;

}

.feature-photo {

  min-height: 480px;

  background: center/cover;

}

.photo-court {

  background-image: url(sports1.jpg);

}

.feature-content {

  padding: 68px 10% 50px;

  background: #edf3f1;

}

.feature-content h2 {

  font-size: clamp(2.25rem, 3.6vw, 3.6rem);

}

.feature-content p:not(.eyebrow) {

  margin: 24px 0 30px;

  color: #526069;

}

.donate-section,

.callout {

  background: var(--orange);

  color: #fff;

  text-align: center;

  padding: 93px 0;

}

.donate-content {

  max-width: 720px;

}

.donate-section h2,

.callout h2 {

  margin-bottom: 17px;

}

.donate-section p:not(.eyebrow),

.callout p:not(.eyebrow) {

  max-width: 600px;

  margin: 0 auto 30px;

}

.donate-section .coming-soon,

.callout .coming-soon {

  background: rgba(16, 45, 66, 0.12);

}

.page-hero {

  color: #fff;

  min-height: 450px;

  display: flex;

  align-items: flex-end;

  padding: 80px 0;

  background: var(--navy) center/cover;

  position: relative;

  isolation: isolate;

}

.page-hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(7, 31, 46, 0.64);

  z-index: -1;

}

.programs-hero {

  background-image: url(sports2.jpg);

}

.mission-hero {

  background-image: url(sports3.jpg);

}

.page-hero h1 {

  max-width: 830px;

  margin-bottom: 16px;

}

.page-hero p:not(.eyebrow) {

  max-width: 620px;

  font-size: 1.13rem;

}

.program-intro {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 100px;

  align-items: center;

  padding-bottom: 45px;

}

.program-intro p {

  font-size: 1.12rem;

  color: #516068;

}

.programs-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 0;

  border-top: 1px solid var(--line);

  margin-bottom: 110px;

}

.programs-grid article {

  padding: 42px 40px 44px 0;

  border-bottom: 1px solid var(--line);

}

.programs-grid article:nth-child(odd) {

  margin-right: 40px;

}

.programs-grid span {

  font-size: 0.76rem;

  color: var(--orange);

  font-weight: 700;

}

.programs-grid h3 {

  font-family: "Playfair Display", serif;

  font-size: 1.65rem;

  margin: 14px 0 11px;

}

.programs-grid p {

  color: #59676e;

  margin: 0;

}

.callout {

  text-align: left;

}

.callout h2 {

  font-size: clamp(2.4rem, 4vw, 4.1rem);

}

.callout p {

  margin-left: 0 !important;

}

.principles {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 70px;

  padding-top: 112px;

  padding-bottom: 112px;

}

.principles article {

  padding: 38px 25px 45px;

  border-top: 5px solid var(--orange);

  background: var(--cream);

}

.principles p:not(.eyebrow) {

  color: #52606a;

  font-size: 1.07rem;

}

.values-section {

  background: var(--navy);

  color: #fff;

  padding: 100px 0;

}

.values-section h2 {

  margin-bottom: 50px;

}

.value-cards {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;

}

.value-cards article {

  background: #1d4157;

  padding: 29px 25px;

}

.value-cards h3 {

  color: var(--gold);

  font-family: "Playfair Display", serif;

  font-size: 1.6rem;

}

.value-cards p {

  color: #d5e1e6;

  margin: 0;

}

.story-hero {

  min-height: 560px;

  display: flex;

  align-items: center;

  color: #fff;

  background:

    linear-gradient(90deg, rgba(9, 30, 43, 0.82), rgba(9, 30, 43, 0.35)),

    url("https://images.unsplash.com/photo-1517466787929-bc90951d0974?auto=format&fit=crop&w=1800&q=85")

      center/cover;

}

.story-hero h1 {

  max-width: 820px;

}

.story-content {

  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  gap: 95px;

}

.story-content h2 {

  font-size: clamp(2.25rem, 4vw, 4rem);

}

.story-content p {

  font-size: 1.08rem;

  color: #53616a;

}

.story-content .button {

  margin-top: 15px;

}

.quote-section {

  padding: 100px 0;

  background: var(--cream);

  text-align: center;

}

.quote-section blockquote {

  max-width: 900px;

  margin: 0 auto 19px;

  font-family: "Playfair Display", serif;

  font-size: clamp(2.3rem, 5vw, 4.8rem);

  font-style: italic;

  line-height: 1.12;

  letter-spacing: -0.035em;

}

.quote-section p {

  color: var(--orange);

  font-weight: 700;

}

.contact-page {

  min-height: calc(100vh - 200px);

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  gap: 90px;

  align-items: center;

}

.contact-page h1 {

  max-width: 670px;

}

.contact-page > div > p:not(.eyebrow) {

  font-size: 1.12rem;

  max-width: 560px;

  color: #59656d;

}

.contact-status {

  display: flex;

  flex-direction: column;

  gap: 5px;

  margin-top: 38px;

  padding: 20px 23px;

  border-left: 4px solid var(--orange);

  background: var(--cream);

}

.contact-status span {

  color: #68737a;

}

.contact-page aside {

  padding: 48px;

  background: #eaf0ee;

}

.contact-page aside h2 {

  font-size: 2.7rem;

}

.contact-page aside p:not(.eyebrow) {

  color: #56636b;

}

.site-footer {

  background: var(--navy-dark);

  color: #fff;

  padding: 53px 0 23px;

}

.footer-grid {

  display: grid;

  grid-template-columns: 1.15fr 1fr auto;

  gap: 30px;

  align-items: center;

  padding-bottom: 42px;

}

.footer-brand {

  color: #fff;

}

.footer-grid p {

  margin: 0;

  color: #bccbd2;

}

.footer-grid div {

  display: flex;

  gap: 21px;

}

.footer-grid div a {

  color: #fff;

  font-size: 0.82rem;

  text-decoration: none;

}

.footer-bottom {

  padding-top: 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.18);

  font-size: 0.75rem;

  color: #9badb7;

}

@media (max-width: 940px) {

  .site-nav {

    gap: 11px;

    font-size: 0.72rem;

  }

  .site-nav > a:not(.nav-donate) {

    padding-inline: 2px;

  }

  .intro {

    gap: 55px;

  }

  .value-cards {

    grid-template-columns: repeat(2, 1fr);

  }

  .contact-page {

    gap: 50px;

  }

}

@media (max-width: 760px) {

  .container {

    width: min(100% - 36px, 1120px);

  }

  .section {

    padding-block: 72px;

  }

  .nav-wrap {

    min-height: 71px;

  }

  .menu-toggle {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 5px;

    width: 43px;

    height: 43px;

    border: 0;

    background: transparent;

  }

  .menu-toggle span:not(.sr-only) {

    width: 24px;

    height: 2px;

    background: var(--navy);

  }

  .site-nav {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    display: none;

    align-items: stretch;

    flex-direction: column;

    gap: 0;

    padding: 13px 18px 20px;

    background: #fff;

    border-bottom: 1px solid var(--line);

    box-shadow: 0 12px 15px rgba(12, 34, 45, 0.08);

  }

  .site-nav.is-open {

    display: flex;

  }

  .site-nav > a:not(.nav-donate) {

    padding: 12px 0;

    border-bottom: 1px solid #edf0ef;

  }

  .nav-donate {

    margin-top: 13px;

    text-align: center;

  }

  .hero {

    min-height: 650px;

  }

  .hero-content {

    padding: 95px 0 105px;

  }

  .hero-statement {

    left: 18px;

    right: auto;

    bottom: 22px;

  }

  .intro,

  .feature,

  .program-intro,

  .principles,

  .story-content,

  .contact-page {

    grid-template-columns: 1fr;

    gap: 32px;

  }

  .intro-copy {

    padding-top: 0;

  }

  .values-grid {

    grid-template-columns: 1fr;

    gap: 31px;

  }

  .values-grid article {

    padding: 0 0 30px;

    border-right: 0;

    border-bottom: 1px solid #d8d6cf;

  }

  .values-grid article:last-child {

    padding-bottom: 0;

    border: 0;

  }

  .values-grid p {

    min-height: auto;

  }

  .feature {

    padding-block: 72px;

  }

  .feature-photo {

    min-height: 330px;

  }

  .feature-content {

    padding: 50px 30px;

  }

  .page-hero {

    min-height: 400px;

    padding-bottom: 55px;

  }

  .program-intro {

    padding-bottom: 28px;

  }

  .programs-grid {

    grid-template-columns: 1fr;

    margin-bottom: 72px;

  }

  .programs-grid article,

  .programs-grid article:nth-child(odd) {

    margin-right: 0;

    padding-right: 0;

  }

  .principles {

    padding-top: 72px;

    padding-bottom: 72px;

  }

  .story-hero {

    min-height: 470px;

  }

  .quote-section {

    padding: 75px 0;

  }

  .contact-page {

    min-height: 0;

  }

  .footer-grid {

    grid-template-columns: 1fr;

    gap: 24px;

  }

  .footer-grid div {

    flex-wrap: wrap;

  }

}

@media (max-width: 480px) {

  h1 {

    font-size: 3rem;

  }

  .hero-copy {

    font-size: 1rem;

  }

  .button {

    width: 100%;

  }

  .value-cards {

    grid-template-columns: 1fr;

  }

  .contact-page aside {

    padding: 33px 25px;

  }

}

.contact-form {

  margin-top: 2rem;

  display: grid;

  gap: 1.25rem;

  max-width: 560px;

}

.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1rem;

}

.form-field {

  display: grid;

  gap: 0.4rem;

}

.form-field label {

  font-weight: 600;

  font-size: 0.95rem;

}

.form-field input,

.form-field select,

.form-field textarea {

  width: 100%;

  padding: 0.75rem 0.9rem;

  border: 1px solid #ccc;

  border-radius: 8px;

  font: inherit;

  background: #fff;

}

.form-field input:focus,

.form-field select:focus,

.form-field textarea:focus {

  outline: 2px solid currentColor;

  outline-offset: 2px;

  border-color: transparent;

}

.contact-form button {

  justify-self: start;

  cursor: pointer;

}

@media (max-width: 600px) {

  .form-row {

    grid-template-columns: 1fr;

  }

}

/* Breakthrough Sports logo sizing */
.site-header .brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 280px;
  max-width: 100%;
  padding: 0;
}

.site-header .site-logo {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.site-header .nav-wrap {
  min-height: 90px;
  gap: 16px;
}

.site-footer .footer-brand {
  display: inline-flex;
  align-items: center;
  width: 240px;
  max-width: 100%;
}

.site-footer .footer-logo {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

@media (max-width: 940px) and (min-width: 761px) {
  .site-header .brand {
    width: 200px;
  }
}

@media (max-width: 760px) {
  .site-header .brand {
    width: 180px;
  }

  .site-header .nav-wrap {
    min-height: 75px;
  }

  .site-footer .footer-brand {
    width: 190px;
  }
}