/* ==========================================================================
   Ajit Prabhu Foundation — shared styles
   Source: Figma (node 1:19 "APF_Journey", node 9:42 "APF_Home_Final")
   ========================================================================== */

/* ---- Design tokens ---- */
:root {
  /* Colors */
  --color-text-body: #073765;      /* body copy, nav links, footer bg */
  --color-text-black: #000000;     /* home page about-card body copy */
  --color-heading-dark: #18223a;   /* section headings */
  --color-accent-orange: #ff5e16;  /* active nav, CTA buttons, pull quotes */
  --color-accent-yellow: #ffcf4e;  /* highlight panel, stat icons, chart bars */
  --color-bg-cream: #fff8ef;       /* section background */
  --color-white: #ffffff;
  --color-border: #073765;

  /* Typography */
  --font-heading: 'Roboto Serif', Georgia, serif;
  --font-body: 'Lora', Georgia, serif;

  /* Layout */
  --container-max: 1152px;
  --container-padding: 24px;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text-body);
  background: var(--color-bg-cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Some exported PNGs have an opaque white background baked into the source
   asset instead of real transparency — multiply hides it against a light bg. */
.blend-multiply {
  mix-blend-mode: multiply;
}

/* Visually hidden but accessible headings for landmark structure */
.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;
}

/* ---- View transitions (native browser API) ----
   Opts every same-origin page navigation into a cross-document view
   transition (Chrome/Edge 126+; no-op elsewhere, so this is a pure
   progressive enhancement). Both the page being left and the page being
   entered need this rule for the browser to animate the swap, so it lives
   in the shared stylesheet rather than a single page. Skipped entirely
   under prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-old(root) {
  animation: 200ms ease-in both view-transition-fade-out;
}

::view-transition-new(root) {
  animation: 250ms ease-out both view-transition-fade-in;
}

@keyframes view-transition-fade-out {
  to { opacity: 0; }
}

@keyframes view-transition-fade-in {
  from { opacity: 0; }
}

/* Carries the header across navigations as one continuous element instead
   of crossfading it, since it renders identically on every page. */
.site-header {
  view-transition-name: site-header;
}

/* ---- Scroll reveal animations ----
   Opt-in via class, toggled to .is-visible by IntersectionObserver in
   script.js once an element scrolls into view. .reveal fades/slides the
   element itself; .reveal--stagger fades/slides its direct children in
   sequence (nth-child transition-delay), for card/item grids. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal--stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.reveal--stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

.reveal--stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal--stagger.is-visible > *:nth-child(3) { transition-delay: 0.2s; }
.reveal--stagger.is-visible > *:nth-child(4) { transition-delay: 0.3s; }
.reveal--stagger.is-visible > *:nth-child(5) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
  padding-top: 40px;
  padding-bottom: 24px;
}

.site-header__inner {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

.site-header__logo {
  flex-shrink: 0;
}

.site-header__logo img {
  width: 125px;
  height: auto;
  /* Source PNG has an opaque white background baked in (not a real transparent
     export) — multiply hides it cleanly against the white/cream page background. */
  mix-blend-mode: multiply;
}

.site-header__navbar {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-text-body);
  min-width: 0;
}

.site-header__menu-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  flex-shrink: 0;
}

.site-header__menu-icon,
.site-header__menu-icon::before,
.site-header__menu-icon::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text-body);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header__menu-icon {
  position: relative;
}

.site-header__menu-icon::before,
.site-header__menu-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.site-header__menu-icon::before {
  top: -7px;
}

.site-header__menu-icon::after {
  top: 7px;
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon {
  background: transparent;
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.site-nav__link {
  display: inline-block;
  padding: 14px 0;
  font-size: 16px;
  text-decoration: none;
  text-transform: capitalize;
  color: var(--color-text-body);
}

.site-nav__link--active {
  color: var(--color-accent-orange);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.site-header__icon-btn {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header__icon-btn img {
  width: 50px;
  height: 50px;
  mix-blend-mode: multiply;
}

.site-header__cta {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.site-header__cta img {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   JOURNEY INTRO
   ========================================================================== */

.journey-intro {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 48px;
  align-items: stretch;
  padding-top: 40px;
  padding-bottom: 64px;
}

.journey-intro__text {
  font-size: 16px;
  line-height: 22px;
}

.journey-intro__highlight {
  background: var(--color-accent-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  min-height: 360px;
}

.journey-intro__quote {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 25px;
  line-height: 35px;
  color: var(--color-white);
  text-align: right;
}

/* ==========================================================================
   AJIT'S INSPIRATION
   ========================================================================== */

.inspiration {
  padding-top: 40px;
  padding-bottom: 64px;
}

.inspiration__title {
  margin: 0 0 40px;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 50px;
  line-height: 55px;
  color: var(--color-heading-dark);
  text-transform: capitalize;
}

.inspiration__panel {
  background: var(--color-bg-cream);
  border-radius: 10px;
  padding: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}

.inspiration__pull-quote {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 25px;
  line-height: 35px;
  color: var(--color-accent-orange);
  margin-bottom: 24px;
}

.inspiration__body {
  font-size: 16px;
  line-height: 22px;
}

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */

.newsletter {
  background: var(--color-text-body);
  border-radius: 10px;
  color: var(--color-white);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  padding: 56px;
  margin-bottom: -140px;
  position: relative;
  z-index: 2;
}

.newsletter__title {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 50px;
  line-height: 55px;
  text-transform: lowercase;
}

.newsletter__title::first-letter {
  text-transform: uppercase;
}

.newsletter__text {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
}

.newsletter__label {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 25px;
}

.newsletter__form {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  border: none;
  border-radius: 25px;
  padding: 0 24px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text-body);
}

.newsletter__input::placeholder {
  color: #9aa8b8;
}

.newsletter__submit {
  flex-shrink: 0;
  height: 50px;
  padding: 0 24px;
  border: none;
  border-radius: 30px;
  background: var(--color-accent-orange);
  color: var(--color-white);
  font-size: 16px;
  text-transform: capitalize;
}

.newsletter__consent {
  margin: 0;
  font-size: 16px;
}

.newsletter__consent a {
  text-decoration: underline;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background: var(--color-text-body);
  padding-top: 200px;
  padding-bottom: 40px;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: start;
}

.site-footer__brand img {
  width: 125px;
  height: auto;
}

.site-footer__heading {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 25px;
  line-height: 32px;
  text-transform: capitalize;
  color: var(--color-bg-cream);
}

.site-footer__link-columns {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
}

.site-footer__link-list li {
  margin-bottom: 16px;
}

.site-footer__link-list a {
  text-decoration: none;
  text-transform: capitalize;
  font-size: 16px;
  color: var(--color-bg-cream);
}

.site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 24px;
  border-radius: 30px;
  background: var(--color-accent-orange);
  color: var(--color-white);
  text-decoration: none;
  text-transform: capitalize;
  font-size: 16px;
}

.site-footer__gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
}

.site-footer__gallery-grid img {
  width: 100%;
  height: 108px;
  object-fit: cover;
  border-radius: 10px;
}

.site-footer__bottom {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-bg-cream);
  margin-top: 40px;
  padding-top: 24px;
}

.site-footer__copyright {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-bg-cream);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .journey-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .journey-intro__quote {
    text-align: left;
  }

  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .site-header__menu-toggle {
    display: flex;
    order: 1;
  }

  .site-header__navbar {
    flex-wrap: wrap;
  }

  .site-nav {
    display: none;
    order: 3;
    flex-basis: 100%;
    width: 100%;
    margin-top: 8px;
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__link {
    display: block;
    width: 100%;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(7, 55, 101, 0.1);
  }

  .site-header__actions {
    order: 2;
    margin-left: auto;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: 20px;
  }

  .site-header__inner {
    gap: 16px;
  }

  .inspiration__title {
    font-size: 36px;
    line-height: 42px;
  }

  .inspiration__panel {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
  }

  .newsletter {
    grid-template-columns: minmax(0, 1fr);
    padding: 32px 24px;
    margin-bottom: -80px;
  }

  .newsletter__title {
    font-size: 36px;
    line-height: 42px;
  }

  .newsletter__form {
    flex-direction: column;
  }

  .newsletter__submit {
    width: 100%;
  }

  .site-footer {
    padding-top: 120px;
  }

  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer__gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .inspiration__title {
    font-size: 30px;
    line-height: 36px;
  }

  .journey-intro__quote {
    font-size: 20px;
    line-height: 28px;
  }

  .site-footer__link-columns {
    flex-direction: column;
    gap: 8px;
  }

  .site-footer__gallery-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ==========================================================================
   Home page — additional sections
   Source: Figma (node 9:42, "APF_Home_Final")
   ========================================================================== */

/* ---- Header overlay variant (hero has a photo background) ---- */

.site-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding-bottom: 0;
}

.site-header--overlay .site-header__navbar {
  border-bottom: none;
  padding-bottom: 0;
}

/* Figma provides a dedicated white/orange logo variant (apf_logo_web-02) for
   this dark-photo header — a true transparent SVG, no blend-mode workaround needed. */
.site-header--overlay .site-header__logo img {
  mix-blend-mode: normal;
}

/* Same stacking-context problem as the logo: the overlay header is its own
   layer, so multiply can't blend through to the hero photo. Make it an
   intentional white circle badge instead of a fringed square. */
.site-header--overlay .site-header__icon-btn {
  background: var(--color-white);
}

.site-header--overlay .site-header__icon-btn img {
  mix-blend-mode: normal;
}

.site-header--overlay .site-nav {
  background: var(--color-white);
  border-radius: 30px;
  padding: 0 24px;
}

.site-header--overlay .site-nav__link {
  padding: 15px 0;
}

.site-header--overlay .site-header__menu-icon,
.site-header--overlay .site-header__menu-icon::before,
.site-header--overlay .site-header__menu-icon::after {
  background: var(--color-white);
}

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 32px;
  border-radius: 30px;
  font-family: var(--font-body);
  font-size: 18px;
  text-decoration: none;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-accent-orange);
  color: var(--color-white);
  border: none;
}

.btn--outline {
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

/* ---- Hero ---- */

.hero {
  position: relative;
  min-height: clamp(520px, 62.5vw, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-white);
  padding-top: 160px;
  padding-bottom: 80px;
  background: var(--color-heading-dark);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 22px;
}

.hero__title {
  margin: 0 0 40px;
  max-width: 800px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.1;
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---- About: Vision / Mission / What We Do ---- */

.about {
  padding-top: 52px;
  padding-bottom: 52px;
}

.about__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.about__title {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 30px;
  color: var(--color-accent-orange);
}

.about__body {
  margin: 0;
  font-size: 16px;
  line-height: 21px;
  color: var(--color-text-black);
}

/* ---- Reach: world map ---- */

.reach {
  padding-top: 52px;
  padding-bottom: 52px;
}

.reach__inner {
  position: relative;
  text-align: center;
}

.reach__map {
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.reach__quote {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(600px, 80%);
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 35px;
  color: var(--color-accent-orange);
}

/* ---- Stats ---- */

.stats {
  background: var(--color-bg-cream);
  padding-top: 64px;
  padding-bottom: 64px;
}

.stats__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.stats__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--color-accent-yellow);
  border: 3px solid var(--color-white);
}

.stats__icon img {
  width: 60px;
  height: 60px;
  mix-blend-mode: multiply;
}

.stats__number {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.2;
  color: var(--color-text-body);
}

.stats__label {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-body);
}

/* ---- Mission quote ---- */

.mission-quote {
  padding-top: 52px;
  padding-bottom: 0;
  text-align: center;
}

.mission-quote p {
  margin: 0 auto;
  max-width: 700px;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 30px;
  color: var(--color-heading-dark);
}

/* ---- Scholarship chart ---- */

.chart-section {
  padding-top: 52px;
  padding-bottom: 52px;
}

.chart-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  border-top: 1px solid var(--color-text-body);
  border-bottom: 1px solid var(--color-text-body);
  padding-top: 32px;
  padding-bottom: 32px;
}

.chart {
  display: flex;
  flex-direction: column;
}

.chart__plot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  flex: 1 1 0;
  min-height: 260px;
}

.chart__axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text-body);
  text-align: right;
}

.chart__bars {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
  height: 100%;
  min-width: 0;
  overflow-x: auto;
}

.chart__bar-item {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: end;
  justify-items: center;
  flex: 1 1 0;
  min-width: 32px;
  height: 100%;
  gap: 8px;
}

.chart__bar {
  display: block;
  width: 100%;
  max-width: 50px;
  height: 100%;
  background: var(--color-accent-yellow);
  border-radius: 8px 8px 0 0;
}

.chart__year {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-body);
}

.chart__legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--color-text-body);
}

.chart__swatch {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--color-accent-yellow);
}

.chart-breakdown {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 24px;
  background: var(--color-bg-cream);
  list-style: none;
}

.chart-breakdown__item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.chart-breakdown__item img {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  mix-blend-mode: multiply;
}

.chart-breakdown__text {
  display: flex;
  flex-direction: column;
}

.chart-breakdown__number {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--color-text-body);
}

.chart-breakdown__label {
  font-family: var(--font-body);
  font-size: 16px;
  text-transform: uppercase;
  color: var(--color-text-body);
}

.chart-section__caption {
  max-width: 784px;
  margin: 49px auto;
  text-align: center;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 30px;
  color: var(--color-text-body);
}

/* ---- Connect / LinkedIn CTA ---- */

.connect {
  background: var(--color-accent-yellow);
  color: var(--color-white);
  border-radius: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
  padding: 56px;
  margin-bottom: -140px;
  position: relative;
  z-index: 2;
}

.connect__title {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 50px;
  line-height: 55px;
}

.connect__subtext {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text-body);
}

.connect__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 161px;
  flex-shrink: 0;
}

.connect__card img {
  width: 161px;
  height: 161px;
  border-radius: 10px 10px 0 0;
  display: block;
}

.connect__qr-link {
  display: block;
}

.connect__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 43px;
  background: var(--color-accent-orange);
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 16px;
  border-radius: 0 0 10px 10px;
}

/* ---- Footer: simple variant (home page) ---- */

.site-footer--simple {
  background: var(--color-text-body);
  padding-top: 200px;
  padding-bottom: 40px;
}

.site-footer--simple .site-footer__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 40px;
  row-gap: 16px;
  align-items: end;
}

.site-footer--simple .site-footer__brand {
  grid-row: 1 / 3;
  align-self: center;
}

.site-footer--simple .site-footer__brand img {
  width: 125px;
  height: auto;
}

.site-footer--simple .site-footer__nav {
  grid-column: 2;
}

.site-footer--simple .site-footer__nav-list {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer--simple .site-footer__nav-list a {
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-bg-cream);
  text-transform: capitalize;
}

.site-footer--simple .site-footer__bottom {
  grid-column: 2;
  border-top: 1px solid var(--color-bg-cream);
  padding-top: 16px;
  text-align: right;
}

.site-footer--simple .site-footer__copyright {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-bg-cream);
}

/* ---- Home page responsive ---- */

@media (max-width: 1024px) {
  .about__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .chart-section__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .site-header--overlay .site-nav {
    background: var(--color-white);
    border-radius: 16px;
    padding: 8px 24px;
    margin-top: 12px;
  }

  .site-header--overlay .site-nav__link {
    color: var(--color-text-body);
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 520px;
    padding-top: 140px;
    padding-bottom: 56px;
  }

  .hero__title {
    font-size: 36px;
  }

  .about__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .about {
    padding-bottom: 0;
  }

  .stats__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .reach {
    padding-bottom: 0;
  }

  .reach__quote {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 24px;
    font-size: 22px;
    line-height: 28px;
  }

  .mission-quote p,
  .chart-section__caption {
    font-size: 18px;
    line-height: 26px;
  }

  .chart__plot {
    flex: 0 0 auto;
    min-height: 200px;
  }

  .chart__bars {
    gap: 6px;
  }

  .chart__year {
    font-size: 11px;
  }

  .connect {
    grid-template-columns: minmax(0, 1fr);
    padding: 32px 24px;
    margin-left: var(--container-padding);
    margin-right: var(--container-padding);
    margin-bottom: -80px;
    text-align: center;
  }

  .connect__card {
    margin: 0 auto;
  }

  .site-footer--simple {
    padding-top: 120px;
  }

  .site-footer--simple .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .site-footer--simple .site-footer__brand {
    grid-row: auto;
  }

  .site-footer--simple .site-footer__nav {
    grid-column: 1;
  }

  .site-footer--simple .site-footer__nav-list {
    justify-content: center;
  }

  .site-footer--simple .site-footer__bottom {
    grid-column: 1;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: 30px;
  }

  .btn {
    height: 52px;
    padding: 0 24px;
    font-size: 16px;
  }

  .about__title {
    font-size: 24px;
  }

  .stats__icon {
    width: 96px;
    height: 96px;
  }

  .stats__number {
    font-size: 36px;
  }

  .connect__title {
    font-size: 32px;
    line-height: 38px;
  }
}

/* ==========================================================================
   About page
   Source: Figma (node 9:5020, "APF_About_Final")
   ========================================================================== */

/* ---- About hero ---- */

.about-hero {
  position: relative;
  min-height: 450px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-bottom: 92px;
  background: var(--color-heading-dark);
}

.about-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.about-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.about-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 50px;
  line-height: 1;
  color: var(--color-white);
}

/* ---- Content block (reusable heading + body copy) ---- */

.content-block {
  padding-top: 52px;
  padding-bottom: 52px;
}

.content-block__title {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 35px;
  color: var(--color-accent-orange);
}

.content-block__body p {
  margin: 0 0 21px;
  font-size: 16px;
  line-height: 21px;
  color: var(--color-text-black);
}

.content-block__body p:last-child {
  margin-bottom: 0;
}

/* ---- CTA banner ---- */

.cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: #2d2d2d;
  padding: 40px 74px;
}

.cta-banner--scholarship {
  background: #2d2d2d;
}

.cta-banner__text {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 35px;
  color: var(--color-white);
}

/* Swap which manual line breaks are active per breakpoint: desktop keeps
   the 2-line break, mobile uses its own 3-line break instead. */
.cta-banner__break--mobile {
  display: none;
}

.cta-banner__btn {
  flex-shrink: 0;
}

/* ---- Theory of change ---- */

.theory {
  padding-top: 52px;
  padding-bottom: 52px;
  border-top: 1px solid var(--color-text-body);
}

.theory__title {
  margin: 0 0 56px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 35px;
  color: var(--color-accent-orange);
}

.theory__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  column-gap: 16px;
  row-gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.theory__step {
  display: contents;
}

/* The marker row is shared by every step so all five markers land on one
   horizontal line, centered in the section; each step's card sits above
   (--top) or below (--bottom) that shared row, with the connector's short
   line bridging card and marker regardless of variant. */
/* align-self overrides the grid's align-items:center: when a row's cards
   vary in height (different copy lengths), centering would leave a gap
   between the shorter card and its connector. Anchoring each card to the
   edge nearest its connector keeps the line touching every card. */
.theory__step--top .theory__card {
  grid-row: 1;
  align-self: end;
}

.theory__step--top .theory__connector {
  grid-row: 2;
}

.theory__step--top .theory__marker,
.theory__step--bottom .theory__marker {
  grid-row: 3;
}

.theory__step--bottom .theory__connector {
  grid-row: 4;
}

.theory__step--bottom .theory__card {
  grid-row: 5;
  align-self: start;
}

.theory__step:nth-child(1) > * { grid-column: 1; }
.theory__step:nth-child(2) > * { grid-column: 2; }
.theory__step:nth-child(3) > * { grid-column: 3; }
.theory__step:nth-child(4) > * { grid-column: 4; }
.theory__step:nth-child(5) > * { grid-column: 5; }

.theory__card {
  background: var(--color-bg-cream);
  border-radius: 20px;
  padding: 16px 20px;
  text-align: center;
  min-width: 160px;
}

.theory__step-label {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
  color: var(--color-accent-orange);
}

.theory__step-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 21px;
  color: var(--color-text-body);
}

.theory__connector {
  width: 1px;
  height: 40px;
  background: rgba(7, 55, 101, 0.25);
  flex-shrink: 0;
}

.theory__marker {
  display: flex;
  flex-shrink: 0;
}

.theory__marker img {
  display: block;
  width: 60px;
  height: 60px;
}

/* ---- About page responsive ---- */

@media (max-width: 900px) {
  .theory__card {
    min-width: 130px;
    padding: 12px 16px;
  }
}

@media (max-width: 768px) {
  .about-hero {
    min-height: 320px;
    padding-bottom: 48px;
  }

  .about-hero__title {
    font-size: 36px;
  }

  .content-block {
    padding-top: 56px;
    padding-bottom: 32px;
  }

  .content-block__title {
    font-size: 24px;
    line-height: 30px;
  }

  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 24px;
  }

  .cta-banner__break--mobile {
    display: inline;
  }

  .cta-banner__break--desktop {
    display: none;
  }

  .cta-banner__text {
    font-size: 24px;
    line-height: 30px;
  }

  .theory {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .theory__title {
    margin-bottom: 32px;
  }

  .theory__steps {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .theory__step {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .theory__step--top .theory__marker {
    order: -2;
  }

  .theory__step--top .theory__connector {
    order: -1;
  }

  .theory__connector {
    width: 56px;
    height: 1px;
    margin: 0 -16px;
  }

  .theory__card {
    text-align: left;
    min-width: 0;
    flex: 1 1 auto;
  }
}

@media (max-width: 480px) {
  .about-hero__title {
    font-size: 30px;
  }

  .cta-banner__text {
    font-size: 20px;
    line-height: 26px;
  }
}

/* ==========================================================================
   Our Impact page
   Source: Figma (node 9:5221, "APF_Our Impact_Final")
   ========================================================================== */

/* This page's stat icons are drawn larger relative to their circle than the
   Home page's version (Figma spec: 100px icon in a 120px circle vs 60px). */
.stats--impact .stats__icon img {
  width: 100px;
  height: 100px;
}

/* Figma spec: the stat icons straddle the top edge of the cream band (half
   overlapping the white space above it), and the circle has no stroke. The
   cream fill lives on .stats__inner (not the section) so it starts below
   the icons' overlap instead of covering the whole section. */
.stats--impact {
  background: transparent;
  padding-top: 64px;
  padding-bottom: 0;
}

.stats--impact .stats__inner {
  background: var(--color-bg-cream);
  padding: 60px 0 0;
}

.stats--impact .stats__icon {
  border: none;
  margin-top: -120px;
  margin-bottom: 16px;
}

.stats--impact .stats__number {
  transition: color 0.2s ease;
}

.stats--impact .stats__item:hover .stats__number {
  color: var(--color-accent-orange);
}

/* ---- Content block divider variant ---- */

.content-block--bordered {
  padding-top: 52px;
  border-top: 1px solid var(--color-text-body);
}

/* ---- CTA banner: centered quote variant (no button) ---- */

.cta-banner--quote {
  justify-content: center;
  text-align: center;
  padding: 50px 171px;
  margin-bottom: 100px;
  background: #2d2d2d;
}

.cta-banner--quote .cta-banner__text {
  max-width: 810px;
}

/* ---- Barriers list ---- */

.barriers {
  padding-top: 52px;
  padding-bottom: 52px;
}

/* Two-column split grid: odd items live in the right half (pill grows
   rightward from the center spine), even items live in the left half
   (pill grows leftward from the spine). The icon sits at the pill's edge
   nearest the spine, so each pill is pulled an extra half-icon-width
   (60px) past the column boundary — that puts the icon's CENTER on the
   spine (not just its edge), keeping every icon on the same vertical
   line regardless of how much the label/body text varies in width. */
.barriers__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.barriers__item {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--color-bg-cream);
  border: 1px dotted var(--color-border);
  border-radius: 60px;
  padding-right: 32px;
  max-width: 640px;
  grid-column: 2;
  justify-self: start;
  margin-left: -60px;
}

/* Alternate icon side per row: even items mirror the icon to the right
   and anchor to the opposite half so the icon still meets the spine. */
.barriers__item:nth-child(even) {
  flex-direction: row-reverse;
  padding-right: 0;
  padding-left: 32px;
  grid-column: 1;
  justify-self: end;
  margin-left: 0;
  margin-right: -60px;
}

.barriers__item:nth-child(1) { grid-row: 1; }
.barriers__item:nth-child(2) { grid-row: 2; }
.barriers__item:nth-child(3) { grid-row: 3; }
.barriers__item:nth-child(4) { grid-row: 4; }
.barriers__item:nth-child(5) { grid-row: 5; }

.barriers__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--color-accent-yellow);
}

.barriers__icon img {
  width: 90px;
  height: 90px;
}

.barriers__text-group {
  display: block;
}

.barriers__label {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
  color: var(--color-accent-orange);
}

.barriers__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 21px;
  color: var(--color-text-black);
}

/* ---- Our Impact page responsive ---- */

@media (max-width: 900px) {
  .barriers__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .barriers__item,
  .barriers__item:nth-child(even) {
    grid-column: 1;
    justify-self: stretch;
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Stacked to one column here, so the desktop spine's alternating icon
     side no longer applies — reset the row-reverse and padding swap that
     .barriers__item:nth-child(even) still carries from the two-column
     layout above, or every even card mismatches its siblings. */
  .barriers__item:nth-child(even) {
    flex-direction: row;
    padding-left: 0;
    padding-right: 32px;
  }
}

@media (max-width: 768px) {
  /* This override must stay physically after the unconditional
     .cta-banner--quote rule above — both have equal specificity, so the
     later declaration in the file wins the cascade at every width. Placing
     it earlier (as before) let the unconditional desktop padding/margin
     silently win even on mobile. */
  .cta-banner--quote {
    align-items: center;
    padding: 32px 24px;
    margin-bottom: 48px;
  }

  .stats--impact {
    padding-top: 0;
  }

  /* .stats__list stacks to one column at this width, so the icons' negative
     margin (which straddles the cream band's top edge in a row layout)
     would instead overlap the previous item's text. Drop it once stacked. */
  .stats--impact .stats__icon {
    margin-top: 0;
  }

  .stats--impact .stats__icon img {
    width: 72px;
    height: 72px;
  }

  .barriers__icon {
    width: 90px;
    height: 90px;
  }

  .barriers__icon img {
    width: 64px;
    height: 64px;
  }

  .barriers__item {
    gap: 16px;
    padding-right: 20px;
  }

  /* :nth-child(even) has higher specificity than the plain .barriers__item
     rule above, so it needs its own matching padding-right here too, or it
     silently keeps the wider 900px-breakpoint value instead of shrinking
     with its siblings. */
  .barriers__item:nth-child(even) {
    padding-right: 20px;
  }
}

@media (max-width: 480px) {
  .barriers__item {
    border-radius: 20px;
    align-items: center;
    padding: 16px;
    gap: 12px;
  }

  /* Same specificity issue as the 768px breakpoint — without this,
     :nth-child(even) keeps its stale padding-left/right instead of the
     symmetric 16px every other card gets from the shorthand above. */
  .barriers__item:nth-child(even) {
    padding: 16px;
  }

  .barriers__icon {
    width: 56px;
    height: 56px;
  }

  .barriers__icon img {
    width: 40px;
    height: 40px;
  }
}

/* ==========================================================================
   Scholarships page
   Source: Figma (node 9:5542, "APF_Scholarships_Final")
   ========================================================================== */

/* ---- Programs (three-card row) ---- */

.programs {
  padding-top: 52px;
  padding-bottom: 52px;
}

.programs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.programs__card {
  display: flex;
  flex-direction: column;
  min-height: 442px;
  background: var(--color-bg-cream);
  padding: 40px;
  transition: background-color 0.2s ease;
}

.programs__card:hover {
  background: #ff5e16;
}

.programs__title {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 25px;
  line-height: 30px;
  color: var(--color-accent-orange);
  transition: color 0.2s ease;
}

.programs__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-heading-dark);
  transition: color 0.2s ease;
}

.programs__card:hover .programs__title,
.programs__card:hover .programs__text {
  color: var(--color-white);
}

.programs__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 24px;
  height: 50px;
  padding: 0 24px;
  border-radius: 25px;
  border: 1px solid var(--color-heading-dark);
  color: var(--color-heading-dark);
  font-family: var(--font-body);
  font-size: 20px;
  text-transform: capitalize;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.programs__card:hover .programs__link {
  border-color: var(--color-white);
  color: var(--color-white);
}

/* margin-top:auto pins the button to the card bottom regardless of body
   copy length, so all three cards line up even though their text differs. */
.programs__card .programs__link {
  margin-top: auto;
}

/* ---- Criteria (Who We Serve / How to Get Started) ---- */

.criteria {
  padding-top: 52px;
  padding-bottom: 52px;
}

.criteria__box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px dotted var(--color-text-body);
  border-radius: 10px;
}

.criteria__col {
  padding: 40px;
}

.criteria__col + .criteria__col {
  border-left: 1px dotted var(--color-text-body);
}

.criteria__title {
  margin: 0 0 30px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 35px;
  color: var(--color-accent-orange);
}

.criteria__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding-left: 24px;
  list-style: disc;
}

.criteria__list li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 21px;
  color: var(--color-text-black);
}

/* ---- Scholarships page responsive ---- */

@media (max-width: 900px) {
  .programs__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .criteria__box {
    grid-template-columns: minmax(0, 1fr);
  }

  .criteria__col + .criteria__col {
    border-left: none;
    border-top: 1px dotted var(--color-text-body);
  }
}

@media (max-width: 768px) {
  .programs {
    padding-top: 40px;
    padding-bottom: 64px;
  }

  .programs__card {
    min-height: 0;
    padding: 32px 24px;
  }

  /* Once min-height:0 lets the card hug its content, margin-top:auto has no
     leftover flex space to consume and collapses to 0 — the button ends up
     flush against the text. Force a real gap back on mobile. */
  .programs__card .programs__link {
    margin-top: 24px;
  }

  .criteria {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .criteria__col {
    padding: 24px;
  }

  .criteria__title {
    font-size: 24px;
    line-height: 30px;
  }
}