:root {
      --mccu-blue: #005a9e;
      --mccu-bright-blue: #00b8e7;
      --mccu-dark: #1a3d6d;
      --mccu-light-blue: #a5d6ec;
      --mccu-green: #72bf44;
      --mccu-teal: #0096b9;
      --mccu-dark-teal: #006282;
      --mccu-light-teal: #93d6de;
      --mccu-gold: #ffd800;
      --mccu-light-yellow: #fff465;
      --mccu-light: rgb(165 214 236 / 28%);
      --bs-primary: #005a9e;
      --bs-primary-rgb: 0, 90, 158;
      --bs-link-color: #005a9e;
      --bs-link-color-rgb: 0, 90, 158;
    }

    body {
      font-family: Arial, sans-serif;
      color: #212529;
      line-height: 1.6;
      background: #101a26;
    }

    a {
      color: var(--mccu-blue);
    }

    a:hover {
      color: var(--mccu-dark);
    }

    .btn-primary {
      --bs-btn-bg: var(--mccu-blue);
      --bs-btn-border-color: var(--mccu-blue);
      --bs-btn-hover-bg: var(--mccu-dark);
      --bs-btn-hover-border-color: var(--mccu-dark);
      --bs-btn-active-bg: var(--mccu-dark);
      --bs-btn-active-border-color: var(--mccu-dark);
    }

    .btn-outline-primary {
      --bs-btn-color: var(--mccu-blue);
      --bs-btn-border-color: var(--mccu-blue);
      --bs-btn-hover-bg: var(--mccu-blue);
      --bs-btn-hover-border-color: var(--mccu-blue);
      --bs-btn-active-bg: var(--mccu-dark);
      --bs-btn-active-border-color: var(--mccu-dark);
    }

    header {
      background: linear-gradient(135deg, var(--mccu-dark) 0%, var(--mccu-dark-teal) 100%);
    }

    h2 {
      color: var(--mccu-dark);
      margin-top: 2rem;
      margin-bottom: 1rem;
      font-weight: 700;
    }

    h3 {
      color: var(--mccu-dark);
      font-weight: 700;
    }

    .hero-lead {
      max-width: 850px;
      margin: 0 auto;
      font-size: 1.1rem;
    }

    .hero-subhead {
      margin: 0.35rem 0 0.75rem;
      color: #fff;
      font-size: clamp(1.2rem, 2.2vw, 1.75rem);
      font-weight: 700;
    }

    .benefit-item {
      background: #dbeef5;
      border-top: 4px solid var(--mccu-bright-blue);
      border-radius: 0.4rem;
      padding: 1rem;
      height: 100%;
    }

    .row > div:nth-child(3n + 2) .benefit-item {
      border-top-color: var(--mccu-green);
    }

    .row > div:nth-child(3n) .benefit-item {
      border-top-color: var(--mccu-teal);
    }

    .pullquote {
      background: #fff;
      border-left: 4px solid var(--mccu-blue);
      margin: 1rem 0 0;
      padding: 0.85rem 1rem;
      font-style: italic;
    }

    .pullquote p {
      margin-bottom: 0.4rem;
    }

    .pullquote cite {
      color: #5f6670;
      font-size: 0.85rem;
      font-style: normal;
    }

    details {
      border-bottom: 1px solid rgb(165 214 236 / 75%);
      padding: 0.75rem 0;
    }

    summary {
      cursor: pointer;
      color: var(--mccu-blue);
      font-weight: 700;
      font-size: 1.05rem;
    }

    details > div {
      padding-top: 0.75rem;
    }

    img.graph {
      max-width: 100%;
      height: auto;
      margin: 1rem 0;
      border: 1px solid var(--mccu-light-blue);
    }

    .small-note {
      color: #5f6670;
      font-size: 0.9rem;
    }

    .eyebrow {
      margin-bottom: 0.5rem;
      color: var(--mccu-gold);
      font-size: 0.85rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .hero-kicker {
      display: block;
      width: max-content;
      max-width: 100%;
      margin: 1.1rem auto 0.55rem;
      padding: 0.28rem 0.8rem;
      border: 1px solid rgb(255 216 0 / 65%);
      border-radius: 999px;
      background: rgb(255 216 0 / 10%);
      color: var(--mccu-gold);
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: 0.01em;
    }

    .next-steps {
      margin-top: 1.25rem;
      padding: 1.75rem;
      border: 1px solid var(--mccu-light-blue);
      border-left: 8px solid var(--mccu-blue);
      border-radius: 0.6rem;
      background: rgb(165 214 236 / 28%);
    }

    .next-steps h2 {
      margin-top: 0;
    }

    .why-section {
      margin: 1.75rem 0;
      padding: 1.75rem;
      border-radius: 0.65rem;
      background: linear-gradient(135deg, rgb(147 214 222 / 35%) 0%, rgb(165 214 236 / 28%) 100%);
    }

    .why-section > h2 {
      margin-top: 0;
    }

    .why-intro {
      margin-bottom: 1.5rem;
      padding: 1.25rem 1.4rem;
      border-left: 7px solid var(--mccu-teal);
      border-radius: 0.45rem;
      background: #fff;
    }

    .why-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }

    .why-card {
      padding: 1.2rem;
      border-top: 5px solid var(--mccu-bright-blue);
      border-radius: 0.5rem;
      background: #fff;
      box-shadow: 0 0.2rem 0.55rem rgb(26 61 109 / 10%);
    }

    .why-card:nth-child(even) {
      border-top-color: var(--mccu-green);
    }

    .why-card:nth-child(3n) {
      border-top-color: var(--mccu-teal);
    }

    .why-card:last-child {
      grid-column: 1 / -1;
    }

    .why-card h3 {
      margin-bottom: 0.45rem;
      font-size: 1.05rem;
    }

    .issue-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      margin-top: 1.5rem;
    }

    .issue-card {
      padding: 1.25rem;
      border: 1px solid var(--mccu-light-blue);
      border-radius: 0.5rem;
      background: #fff;
    }

    .issue-card h3 {
      margin-top: 0;
    }

    .partner-section,
    .dues-section {
      margin: 1.75rem 0;
      padding: 1.75rem;
      border: 1px solid var(--mccu-light-blue);
      border-radius: 0.6rem;
      background: #fff;
      box-shadow: 0 0.2rem 0.65rem rgb(0 0 0 / 6%);
    }

    .partner-section h2,
    .dues-section h2 {
      margin-top: 0;
    }

    .dues-benefits {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      margin: 1.5rem 0;
    }

    .dues-benefit {
      height: 100%;
      padding: 1.15rem;
      border-left: 5px solid var(--mccu-bright-blue);
      border-radius: 0.4rem;
      background: var(--mccu-light);
    }

    .dues-benefit:nth-child(even) {
      border-left-color: var(--mccu-green);
    }

    .dues-benefit:nth-child(3n) {
      border-left-color: var(--mccu-teal);
    }

    .dues-benefit h3 {
      font-size: 1.05rem;
    }

    .dues-cost {
      margin-top: 1.75rem;
      padding: 1.25rem;
      border: 1px solid var(--mccu-light-blue);
      border-left: 6px solid var(--mccu-blue);
      border-radius: 0.5rem;
      background: rgb(165 214 236 / 28%);
    }

    .dues-cost h3 {
      margin-top: 0;
    }

    .action-section {
      background: linear-gradient(135deg, var(--mccu-dark) 0%, var(--mccu-dark-teal) 100%);
      color: #fff;
      border-top: 6px solid var(--mccu-gold);
      border-radius: 0.5rem;
      padding: 2rem;
      margin-top: 2rem;
      box-shadow: 0 0.35rem 0.9rem rgb(26 61 109 / 16%);
    }

    .action-section h2 {
      color: #fff;
      margin-top: 0;
    }

    .action-section .btn-light {
      --bs-btn-color: var(--mccu-dark);
      --bs-btn-bg: var(--mccu-gold);
      --bs-btn-border-color: var(--mccu-gold);
      --bs-btn-hover-color: var(--mccu-dark);
      --bs-btn-hover-bg: var(--mccu-light-yellow);
      --bs-btn-hover-border-color: var(--mccu-light-yellow);
    }

    .action-section .btn-outline-light {
      --bs-btn-color: #fff;
      --bs-btn-border-color: var(--mccu-light-teal);
      --bs-btn-hover-color: var(--mccu-dark);
      --bs-btn-hover-bg: var(--mccu-light-teal);
      --bs-btn-hover-border-color: var(--mccu-light-teal);
    }

    footer {
      margin-top: 3rem;
    }

    .events-section > h2,
    .faq-list > h2,
    .why-section > h2,
    section[aria-labelledby="want-heading"] > h2 {
      color: #f5f8fc;
    }

    section[aria-labelledby="want-heading"] > p {
      color: #e5edf5;
    }

    footer.bg-light {
      background: #0b121b !important;
      color: #cddae5;
    }

    @media (max-width: 700px) {
      body {
        font-size: 0.95rem;
        line-height: 1.5;
      }

      h2 {
        margin-top: 1.5rem;
        font-size: 1.55rem;
      }

      .fs-5 {
        font-size: 1.05rem !important;
      }

      .hero-lead {
        font-size: 1rem;
      }

      .next-steps,
      .partner-section,
      .dues-section,
      .why-section {
        padding: 1.25rem;
      }

      .dues-benefits,
      .why-grid,
      .issue-grid {
        grid-template-columns: 1fr;
      }

      .why-card:last-child {
        grid-column: auto;
      }
    }
.site-nav { background: #000; border-bottom: 1px solid #333; }
.site-nav a { color: #fff; font-weight: 700; text-underline-offset: 0.25em; }
.site-nav a:hover { color: var(--mccu-light-yellow); }
.site-nav a[aria-current="page"] { color: var(--mccu-gold); text-decoration-thickness: 3px; }
.site-nav a:focus-visible { outline-color: var(--mccu-gold); }

/* The pizza photo background belongs only to the event card. */
.kickoff-hero {
  color: #fff;
  padding: clamp(1.5rem, 2.5vw, 2.5rem) 0;
}
.kickoff-layout {
  display: block;
}
.kickoff-copy {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
}
.kickoff-copy h1 {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0.5rem 0 0.9rem;
}
.kickoff-copy .hero-lead {
  margin: 0 auto;
  max-width: 48rem;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}
.kickoff-copy .hero-lead strong {
  white-space: nowrap;
}
.kickoff-invitation {
  margin: 1rem 0;
  font-size: 1.05rem;
}
.kickoff-copy .btn-light,
.pizza-event .btn-light {
  --bs-btn-bg: var(--mccu-gold);
  --bs-btn-color: var(--mccu-dark);
  --bs-btn-border-color: var(--mccu-gold);
  --bs-btn-hover-bg: var(--mccu-light-yellow);
  --bs-btn-hover-border-color: var(--mccu-light-yellow);
  --bs-btn-hover-color: var(--mccu-dark);
  font-weight: 700;
}
.events-section { scroll-margin-top: 1rem; margin-bottom: 2rem; }
.events-section > h2 { margin: 1.5rem 0; }
.events-list { display: grid; gap: 1.5rem; }
.events-list > article { border-top: 5px solid var(--mccu-gold); }
.events-list > .news-item {
  border-top-color: var(--mccu-green);
  border-radius: 0.65rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: #0e243a;
  color: #fff;
  box-shadow: 0 0.35rem 1.1rem rgb(26 61 109 / 10%);
  font-size: 1.1rem;
}
.news-item .eyebrow { color: var(--mccu-green); }
.news-item h3 { color: #fff; font-size: clamp(1.65rem, 3vw, 2.4rem); margin: 0.7rem 0 1.25rem; }
.news-item li { margin-bottom: 0.65rem; }
.news-training {
  border-left: 4px solid var(--mccu-green);
  border-radius: 0.35rem;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  background: rgb(255 255 255 / 6%);
}
.pizza-event {
  color: #fff;
  border-radius: 0.65rem;
  border-top: 5px solid var(--mccu-gold);
  overflow: hidden;
  background: linear-gradient(90deg, rgb(14 36 58 / 97%) 0%, rgb(14 36 58 / 89%) 45%, rgb(14 36 58 / 20%) 100%), url('assets/pizza-party-pepperoni.png') center / cover;
  box-shadow: 0 0.35rem 1.1rem rgb(26 61 109 / 16%);
}
.pizza-event-content {
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: 690px;
}
.pizza-event h3 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1;
  margin: 0.7rem 0 1.25rem;
}
.event-description { font-size: 1.2rem; max-width: 34rem; }
.event-details { display: grid; gap: 1rem; margin: 1.5rem 0 2rem; }
.event-details dt { color: var(--mccu-gold); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.event-details dd { font-size: 1.1rem; font-weight: 700; margin: 0.2rem 0 0; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--mccu-teal); outline-offset: 4px; }
.kickoff-hero a:focus-visible, .pizza-event a:focus-visible { outline-color: var(--mccu-gold); }
@media (max-width: 700px) {
  .pizza-event {
    background-image: linear-gradient(90deg, rgb(14 36 58 / 92%), rgb(14 36 58 / 78%)), url('assets/pizza-party-pepperoni.png');
  }
  .event-description { font-size: 1.05rem; }
  .event-details dd { font-size: 1rem; }
  .event-rsvp { width: 100%; font-size: 1rem; white-space: normal; }
}

/* Larger, styled disclosures on the FAQ page. */
.faq-page { max-width: 1050px; }
.faq-list > h2 { margin-bottom: 1.75rem; }
.faq-list > details {
  margin: 0 0 1rem;
  padding: 0;
  border: 1px solid var(--mccu-light-blue);
  border-left: 5px solid var(--mccu-teal);
  border-radius: 0.65rem;
  background: #fff;
  box-shadow: 0 0.2rem 0.7rem rgb(26 61 109 / 7%);
}
.faq-list > details > summary {
  position: relative;
  list-style: none;
  padding: 1.2rem 3.5rem 1.2rem 1.4rem;
  border-radius: 0.6rem;
  color: var(--mccu-dark);
  font-size: 1.2rem;
  line-height: 1.45;
}
.faq-list > details > summary::-webkit-details-marker { display: none; }
.faq-list > details > summary::after {
  content: '+';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mccu-blue);
  font-size: 1.65rem;
  line-height: 1;
}
.faq-list > details > summary:hover { background: rgb(165 214 236 / 20%); }
.faq-list > details[open] { border-left-color: var(--mccu-blue); }
.faq-list > details[open] > summary {
  background: rgb(165 214 236 / 28%);
  border-radius: 0.6rem 0.6rem 0 0;
}
.faq-list > details[open] > summary::after { content: '\2212'; }
.faq-list > details > div {
  padding: 1.4rem;
  border-top: 1px solid var(--mccu-light-blue);
  font-size: 1.1rem;
  line-height: 1.65;
}
.faq-list > details > div > :last-child { margin-bottom: 0; }
.faq-list .dues-cost { margin-bottom: 0; }
@media (max-width: 700px) {
  .faq-list > details > summary { font-size: 1.12rem; padding: 1rem 3rem 1rem 1rem; }
  .faq-list > details > summary::after { right: 1rem; }
  .faq-list > details > div { padding: 1.1rem; font-size: 1.04rem; }
}