:root{
  --red: #C41E3A;
  --red-deep: #9A1730;
  --cream: #FAF5EA;
  --navy: #172438;
  --navy-deep: #0F1A2A;
  --gold: #E3A63E;
  --grass: #3C6B4A;
  --ink: #1C1C1C;
  --line: rgba(28,28,28,0.14);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Karla', sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
}
h1,h2,h3,.display{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:0.92;
  margin:0;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
button, .btn{
  font-family:'Karla',sans-serif;
  font-weight:700;
  font-size:0.98rem;
  cursor:pointer;
  border:none;
  display:inline-block;
  text-decoration:none;
  padding:14px 26px;
  border-radius:2px;
  transition:transform 0.15s ease, background 0.15s ease;
}
.btn:hover, button:hover{transform:translateY(-2px);}
.btn:focus-visible, button:focus-visible, a:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}
.btn-primary{background:var(--gold); color:var(--navy-deep);}
.btn-primary:hover{background:#eeb856;}
.btn-outline{background:transparent; color:var(--cream); border:2px solid var(--cream);}
.btn-outline:hover{background:var(--cream); color:var(--navy-deep);}
.btn-dark{background:var(--navy-deep); color:var(--cream);}
.btn-dark:hover{background:var(--navy);}

/* ---------- Announcement bar ---------- */
.announce{
  background:var(--red);
  color:var(--cream);
  position:sticky;
  top:0;
  z-index:30;
}
.announce a{
  display:block;
  width:100%;
  text-align:center;
  padding:12px 24px;
  font-size:0.92rem;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  animation:announcePulse 2.4s ease-in-out infinite;
}
.announce a:hover{background:var(--red-deep);}
@keyframes announcePulse{
  0%, 100%{color:var(--cream); text-shadow:none;}
  50%{color:#ffffff; text-shadow:0 0 10px rgba(255,255,255,0.75);}
}
@media (prefers-reduced-motion: reduce){
  .announce a{animation:none; color:var(--cream);}
}

/* ---------- Nav ---------- */
header.site{
  background:var(--cream);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:44px;
  z-index:20;
}
nav.wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:16px;
  padding-bottom:16px;
  position:relative;
}
.logo{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900;
  text-transform:uppercase;
  font-size:1.4rem;
  letter-spacing:0.01em;
  text-decoration:none;
}
.logo span{color:var(--red);}
.navlinks{
  display:flex;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
  font-weight:700;
  font-size:0.92rem;
}
.navlinks a{text-decoration:none; padding-bottom:4px;}
.navlinks a:hover{color:var(--red);}
.navlinks a.active{color:var(--red); border-bottom:2px solid var(--red);}
.nav-toggle{display:none;background:none;border:none;font-size:1.6rem;padding:4px;}

/* ---------- Page header (non-home hero replacement) ---------- */
.page-header{
  background:var(--navy-deep);
  color:var(--cream);
  padding:64px 0 56px;
}
.page-header h1{font-size:clamp(2.4rem, 5vw, 3.4rem);}
.page-header p{margin-top:16px; max-width:56ch; font-size:1.08rem; color:#D9DEE7;}

/* ---------- Hero (home only) ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--navy-deep);
  color:var(--cream);
  padding:96px 0 80px;
}
.hero-slideshow{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-slideshow img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  animation:heroSlideFade 32s infinite;
}
.hero-slideshow img:nth-child(1){animation-delay:0s;}
.hero-slideshow img:nth-child(2){animation-delay:-4s;}
.hero-slideshow img:nth-child(3){animation-delay:-8s;}
.hero-slideshow img:nth-child(4){animation-delay:-12s;}
.hero-slideshow img:nth-child(5){animation-delay:-16s;}
.hero-slideshow img:nth-child(6){animation-delay:-20s;}
.hero-slideshow img:nth-child(7){animation-delay:-24s;}
.hero-slideshow img:nth-child(8){animation-delay:-28s;}
@keyframes heroSlideFade{
  0%{opacity:0;}
  2%{opacity:1;}
  11%{opacity:1;}
  14%{opacity:0;}
  100%{opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .hero-slideshow img{animation:none; opacity:0;}
  .hero-slideshow img:first-child{opacity:1;}
}
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse 500px 260px at 20% -10%, rgba(227,166,62,0.18), transparent 60%),
    radial-gradient(ellipse 500px 260px at 85% -5%, rgba(196,30,58,0.28), transparent 60%),
    linear-gradient(rgba(15,26,42,0.82), rgba(15,26,42,0.88));
}
.hero .wrap{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:48px;
  align-items:center;
}
.hero h1{
  font-size:clamp(2.8rem, 6vw, 4.6rem);
  animation:riseIn 0.7s ease both;
}
.hero h1 .accent{color:var(--red);}
.hero p.lede{
  font-size:1.15rem;
  max-width:46ch;
  margin-top:20px;
  color:#D9DEE7;
  animation:riseIn 0.7s ease 0.1s both;
}
.hero .ctas{
  margin-top:32px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  animation:riseIn 0.7s ease 0.2s both;
}
@keyframes riseIn{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .hero h1, .hero p.lede, .hero .ctas{animation:none;}
}
.hero-panel{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.14);
  padding:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.hero-panel-link{
  display:block;
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900;
  text-transform:uppercase;
  line-height:1.15;
  font-size:clamp(1.9rem, 3.4vw, 2.6rem);
  color:var(--red);
  text-decoration:none;
  padding:12px 6px;
  transition:transform 0.15s ease;
  animation:heroLinkPulse 2.4s ease-in-out infinite;
}
.hero-panel-link:hover{
  transform:translateY(-2px);
}
@keyframes heroLinkPulse{
  0%, 100%{color:var(--red); text-shadow:none;}
  50%{color:#ffffff; text-shadow:0 0 14px rgba(255,255,255,0.8);}
}
@media (prefers-reduced-motion: reduce){
  .hero-panel-link{animation:none; color:var(--red);}
}

/* ---------- Section basics ---------- */
section{padding:76px 0;}
.section-head{max-width:64ch; margin-bottom:44px;}
.section-head h2{font-size:clamp(2rem, 4vw, 2.8rem);}
.section-head p{font-size:1.08rem; margin-top:14px; color:#3a3a3a;}
.section-head .section-lead{
  font-weight:700;
  font-size:clamp(1.3rem, 2.6vw, 1.7rem);
  color:var(--ink);
  margin-top:0;
  max-width:44ch;
}

/* ---------- Home teaser grid ---------- */
.teasers{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.teaser{
  padding:32px 28px;
  border-right:1px solid var(--line);
}
.teaser:last-child{border-right:none;}
.teaser h3{font-size:1.4rem; text-transform:none; margin-bottom:10px; font-weight:700;}
.teaser p{margin:0 0 18px; color:#3a3a3a; font-size:0.97rem;}

/* ---------- About ---------- */
.about{background:var(--cream);}
.story-section{max-width:72ch; margin:0 auto 56px;}
.story-section h2{font-size:clamp(1.7rem, 3.2vw, 2.2rem); margin-bottom:18px;}
.story-section p{margin:0 0 18px; font-size:1.05rem;}
.story-section p:last-child{margin-bottom:0;}
.story-quote{
  max-width:56ch;
  margin:64px auto 0;
  padding-top:40px;
  border-top:1px solid var(--line);
  text-align:center;
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:700;
  text-transform:none;
  font-style:normal;
  color:var(--red);
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  line-height:1.15;
}
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.about-grid p{margin:0 0 16px; font-size:1.05rem;}
.about-note{
  border-left:3px solid var(--red);
  padding-left:18px;
  font-style:italic;
  color:#555;
  font-size:0.98rem;
}

/* ---------- Programs (inning-framed) ---------- */
.programs{background:var(--navy-deep); color:var(--cream);}
.programs .section-head p{color:#c9cfd9;}
.inning{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:28px;
  padding:28px 0;
  border-top:1px solid rgba(255,255,255,0.14);
}
.inning:last-child{border-bottom:1px solid rgba(255,255,255,0.14);}
.inning .label{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:700;
  font-size:1.05rem;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:0.02em;
  line-height:1.3;
}
.inning h3{
  font-size:1.5rem;
  text-transform:none;
  margin-bottom:8px;
  font-weight:700;
}
.inning p{margin:0; color:#c9cfd9; max-width:60ch;}

/* ---------- Get Involved ---------- */
.involve{background:var(--cream);}
.paths{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.path{
  padding:32px 28px;
  border-right:1px solid var(--line);
}
.path:last-child{border-right:none;}
.path .icon{
  width:38px; height:38px;
  margin-bottom:18px;
}
.path h3{
  font-size:1.5rem;
  text-transform:none;
  margin-bottom:10px;
  font-weight:700;
}
.path p{margin:0 0 20px; color:#3a3a3a; font-size:0.98rem;}

/* ---------- Shop / affiliate ---------- */
.shop{
  background:var(--red);
  color:var(--cream);
}
.shop .wrap{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.shop h2{font-size:clamp(1.9rem, 3.6vw, 2.6rem);}
.shop p{margin-top:14px; max-width:none; width:100%; color:#FBE2E6; font-size:1.05rem;}

/* ---------- Partners ---------- */
.partners{background:var(--cream);}
.partner{
  padding:32px 0;
  border-top:1px solid var(--line);
  max-width:72ch;
}
.partner:last-child{padding-bottom:0;}
.partners .wrap > .partner:last-child{border-bottom:1px solid var(--line); padding-bottom:32px;}
.partner h3{font-size:1.4rem; text-transform:none; margin-bottom:10px; font-weight:700;}
.partner p{margin:0 0 18px; font-size:1.02rem; color:#3a3a3a;}

/* ---------- Contact page ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
}
.contact-grid h3{font-size:1.3rem; text-transform:none; margin-bottom:14px; font-weight:700;}
.contact-single{max-width:640px;}
.contact-heading{font-size:2.2rem !important;}
.contact-grid label{display:block; font-weight:700; font-size:0.9rem; margin-bottom:6px; margin-top:16px;}
.contact-grid input, .contact-grid textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  background:#fff;
  font-family:inherit;
  font-size:0.98rem;
  border-radius:2px;
}
.contact-grid input:focus-visible, .contact-grid textarea:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:1px;
}
.info-list{list-style:none; margin:0; padding:0;}
.info-list li{margin-bottom:28px; font-size:1.6rem;}
.info-list b{display:block; font-size:1.1rem; text-transform:uppercase; letter-spacing:0.03em; color:#777; margin-bottom:6px;}

/* ---------- Footer ---------- */
footer{
  background:var(--navy-deep);
  color:#c9cfd9;
  padding:64px 0 32px;
}
.footer-top{
  padding-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.footer-top h3{
  font-size:1.2rem;
  text-transform:none;
  color:var(--cream);
  margin-bottom:14px;
  font-weight:700;
}
.footer-top .logo{color:var(--cream); font-size:1.3rem; margin-bottom:14px;}
.footer-top p, .footer-top a{font-size:0.95rem; color:#c9cfd9; text-decoration:none;}
.footer-top ul{list-style:none; margin:0; padding:0;}
.footer-top li{margin-bottom:10px;}
.footer-top a:hover{color:var(--gold);}
.footer-bottom{
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  font-size:0.85rem;
  color:#8a92a1;
}

@media (max-width: 860px){
  .hero .wrap{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
  .paths{grid-template-columns:1fr;}
  .path{border-right:none; border-bottom:1px solid var(--line);}
  .path:last-child{border-bottom:none;}
  .teasers{grid-template-columns:1fr;}
  .teaser{border-right:none; border-bottom:1px solid var(--line);}
  .teaser:last-child{border-bottom:none;}
  .shop .wrap{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .navlinks{
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--cream);
    flex-direction:column;
    padding:18px 24px;
    gap:16px;
    border-bottom:1px solid var(--line);
    display:none;
  }
  .navlinks.open{display:flex;}
  .nav-toggle{display:block;}
}