/* Redline Fundraising marketing site — hand-written CSS (doc/www.md). No framework, no build
   step beyond a content hash in the file name (cmd/wwwgen).

   This is a 1:1 port of the Tailwind + Emotion look the Next.js site had: the breakpoints, type
   scale and spacing below are the values those utility classes produced, so the pages render the
   same. A redesign comes later; until then, change the look here rather than in the templates.

   Breakpoints (viewport, as before): sm 640px · md 768px · lg 1024px · xl 1280px · 2xl 1536px. */

:root {
  --red: #c34738;
  --black: #191919;
  --grey: #e9e9e9;
  --page: #f1ecec;
  --submit: #a22c1e;
  --white: #fff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --amber-600: #d97706;
  --ok: #166534;
  --shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
  --font-body: "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --font-heading: din-condensed;

  /* type scale: size / line height */
  --fs-sm: .875rem;  --lh-sm: 1.25rem;
  --fs-lg: 1.125rem; --lh-lg: 1.75rem;
  --fs-xl: 1.25rem;  --lh-xl: 1.75rem;
  --fs-2xl: 1.5rem;  --lh-2xl: 2rem;
  --fs-3xl: 1.875rem; --lh-3xl: 2.25rem;
  --fs-4xl: 2.25rem; --lh-4xl: 2.5rem;
  --fs-5xl: 3rem;
  --fs-6xl: 3.75rem;
  --fs-7xl: 4.5rem;
  --fs-8xl: 6rem;
}

/* ---- reset (the subset of the old preflight the pages relied on) ---- */
*, ::before, ::after { box-sizing: border-box; border: 0 solid var(--gray-200); }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; -webkit-tap-highlight-color: transparent; }
body { margin: 0; line-height: inherit; }
hr { height: 0; color: inherit; border-top-width: 1px; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
button, input, select { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; }
button, input:where([type=submit]) { -webkit-appearance: button; background-color: transparent; background-image: none; }
h1, h2, h3, h4, h5, h6, p, hr { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
input::placeholder { opacity: 1; color: var(--gray-400); }
button { cursor: pointer; }
:disabled { cursor: default; }
img, svg, video, iframe { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
[hidden]:where(:not([hidden=until-found])) { display: none; }

/* ---- page frame ---- */
html, body, #root {
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--page);
}
* { font-family: var(--font-body); }
#container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  & * { -webkit-font-smoothing: subpixel-antialiased; }
}
.page--bg { background: url("/Photos/Bg%20Design.jpg") repeat-y; }

.container {
  width: 100%;
  margin-inline: auto;
  @media (width >= 640px) { max-width: 640px; }
  @media (width >= 768px) { max-width: 768px; }
  @media (width >= 1024px) { max-width: 1024px; }
  @media (width >= 1280px) { max-width: 1280px; }
  @media (width >= 1536px) { max-width: 1536px; }
}
.container--pad { padding-inline: 1rem; }
.red { background: var(--red); }
.red-text { color: var(--red); }
.shadow { box-shadow: var(--shadow); }
.fill { width: 100%; height: 100%; }
.rounded-lg { border-radius: .5rem; }
.icon-4 { width: 1rem; height: 1rem; }
.icon-6 { width: 1.5rem; height: 1.5rem; }

.button-red {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1.5rem;
  font-size: var(--fs-sm);
  line-height: 2;
  font-weight: 700;
  color: var(--white);
  background: var(--red);
  border-radius: .25rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
    transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .2s;
  &:hover { background: var(--gray-700); }
}

/* ---- top bar ---- */
.topbar { background: var(--black); }
.topbar__inner { padding-inline: 1rem; }
.topbar__row { display: flex; justify-content: space-between; align-items: center; }
.topbar__brand { background: var(--red); font-size: var(--fs-2xl); line-height: 1; }
.topbar__logo {
  height: 4rem;
  padding: .5rem 1rem;
  @media (width >= 768px) { height: 7rem; }
}
.topbar__burger-wrap { @media (width >= 1024px) { display: none; } }
.topbar__burger {
  display: block;
  color: var(--gray-50);
  &:hover { color: var(--gray-200); }
  &:focus { outline: 2px solid transparent; outline-offset: 2px; }
}
.topbar__links {
  display: none;
  @media (width >= 1024px) {
    display: flex;
    align-items: center;
    width: auto;
    margin-left: auto;
    margin-right: 2.5rem;
    & > li + li { margin-left: 3rem; }
  }
}
.topbar__link {
  color: var(--gray-50);
  &:hover { color: var(--gray-200); }
}
.topbar__login, .topbar__cta {
  padding: .75rem 1.5rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 700;
  color: var(--gray-50);
  border-radius: .25rem;
  &:hover { color: var(--gray-200); }
}
.topbar__login { display: block; background: var(--amber-600); }
.topbar__cta {
  display: none;
  background: var(--red);
  @media (width >= 1024px) { display: block; }
}

/* Mobile menu: a popover (no script) — the burger opens it, the X or a click outside closes it. */
.mobile-menu {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: 83.333333%;
  max-width: 24rem;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  color: inherit;
  background: transparent;
  &::backdrop { background: rgb(31 41 55 / 25%); }
}
.mobile-menu__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  overflow-y: auto;
  background: var(--white);
  border-right-width: 1px;
  & li { margin-bottom: .25rem; }
}
.mobile-menu__head { display: flex; align-items: center; margin-bottom: 2rem; }
.mobile-menu__home { margin-right: auto; font-size: var(--fs-2xl); font-weight: 600; line-height: 1; }
.mobile-menu__logo { height: 2rem; }
.mobile-menu__close svg {
  color: var(--gray-400);
  cursor: pointer;
  &:hover { color: var(--gray-500); }
}
.mobile-menu__link {
  display: block;
  padding: 1rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  color: var(--gray-900);
  border-radius: .25rem;
  &:hover { background: var(--gray-50); }
}
/* The current page's nav link. After the link rules: it wins their display. */
.is-active { display: inline; padding-bottom: 3px; border-bottom: 4px solid var(--red); }

/* ---- footer + social icons ---- */
.footer { display: flex; padding-block: 2rem; color: var(--white); background: var(--red); }
.footer__copy {
  flex-basis: 66.666667%;
  @media (width >= 768px) { flex-basis: 50%; }
  & h3 {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: 300;
    text-align: center;
    @media (width >= 1024px) { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
    @media (width >= 1280px) { font-size: var(--fs-3xl); line-height: var(--lh-3xl); }
  }
}
.footer__social {
  display: grid;
  place-items: center;
  flex-basis: 33.333333%;
  @media (width >= 768px) { flex-basis: 50%; }
}
.social { display: inline-grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.social--footer {
  gap: .5rem;
  padding-inline: .5rem;
  @media (width >= 768px) { gap: 3rem; }
}
.social--connect {
  column-gap: .5rem;
  @media (width >= 768px) { column-gap: 3rem; }
}
.social__icon { width: 3rem; height: 3rem; }

/* ---- forms ---- */
.contact-form { margin: 50px; }
.www-form > form {
  display: flex;
  flex-direction: column;
  padding: 20px;
  line-height: 25px;
  background: var(--grey);
  box-shadow: var(--shadow);

  & input[type=submit] {
    padding: 5px;
    font-size: 30px;
    color: var(--white);
    background: var(--submit);
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    transition: filter .5s;
    &:hover { filter: saturate(1.2); }
    &:disabled { cursor: default; }
    &[aria-busy=true] { opacity: .7; cursor: progress; }
  }
  & .field {
    display: block;
    overflow: hidden;
    margin-bottom: 15px;
    padding: 0 10px;
    & .label { font-weight: bolder; }
    & :is(input:is([type=text], [type=tel], [type=email], [type=number]), select) {
      width: 100%;
      padding: 10px;
      font-size: 20px;
      border: 0;
      border-radius: 3px;
    }
    & select { background: var(--white); }
  }
}
.join-form > form { margin: 50px; border-radius: 5px; }
.contact-form__title {
  font-size: var(--fs-4xl);
  line-height: var(--lh-4xl);
  font-weight: 700;
  text-align: center;
  color: var(--red);
}
.bold { font-weight: 700; }
/* Honeypot: off-screen for people, still filled in by naive bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status, .form-note {
  margin-top: 15px;
  padding: 10px;
  font-weight: 700;
  background: var(--white);
  border-left: 5px solid var(--red);
  border-radius: 3px;
}
.form-status[data-state=ok] { border-left-color: var(--ok); color: var(--ok); }
.form-status[data-state=error] { color: var(--submit); }

/* ---- home ---- */
.hero { display: flex; align-items: center; justify-content: center; }
.hero__overlay { position: absolute; z-index: 40; }
.hero__title {
  margin-block: 1rem;
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
  color: var(--white);
  @media (width >= 640px) { line-height: var(--lh-2xl); }
  @media (width >= 1024px) { font-size: var(--fs-5xl); line-height: 1; }
}
.hero__em {
  font-size: var(--fs-3xl);
  line-height: var(--lh-3xl);
  @media (width >= 640px) { font-size: var(--fs-4xl); line-height: var(--lh-4xl); }
  @media (width >= 1024px) { font-size: var(--fs-6xl); line-height: 1; }
}
.hero__and { display: inline; border-block: 4px solid var(--white); }
.hero__br { @media (width >= 640px) { display: none; } }
.hero__cta-row { display: flex; align-items: center; justify-content: center; }
.hero__cta {
  padding: .25rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 700;
  text-align: center;
  color: var(--white);
  outline: 2px solid;
  border-radius: .25rem;
  &:hover { color: var(--gray-100); }
  @media (width >= 1024px) { padding: .5rem; font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
}
.hero__video { z-index: 0; filter: brightness(50%); }

.event-band {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--red);
  @media (width >= 1024px) { padding: 2.5rem 0; }
}
.event-band__title {
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
  color: var(--white);
  @media (width >= 640px) { font-size: var(--fs-4xl); line-height: var(--lh-4xl); }
  @media (width >= 768px) { font-size: var(--fs-5xl); line-height: 1; }
  @media (width >= 1024px) { font-size: var(--fs-6xl); }
  @media (width >= 1280px) { font-size: var(--fs-7xl); }
}

.points-row {
  display: flex;
  padding: 1.5rem .5rem;
  @media (width >= 1024px) { padding: 2.5rem; }
}
.points {
  display: grid;
  flex-basis: 40%;
  margin-bottom: 0;
  padding: 2rem .5rem 0;
  line-height: 1.25;
  font-weight: 600;
  @media (width >= 1024px) {
    margin-bottom: 1rem;
    padding: 2.5rem;
    font-size: var(--fs-2xl);
    line-height: var(--lh-2xl);
  }
  @media (width >= 1280px) { font-size: var(--fs-3xl); line-height: var(--lh-3xl); }
  @media (width >= 1536px) { font-size: var(--fs-4xl); line-height: var(--lh-4xl); }
}
.point { display: flex; margin-bottom: 2.5rem; }
.point__icon { display: grid; place-items: center; flex-basis: 16.666667%; }
.point__arrow {
  height: .5rem;
  @media (width >= 1024px) { height: 2rem; }
}
.point__body { flex-basis: 83.333333%; }
.point__text {
  font-family: din-condensed, system-ui;
  font-weight: 300;
  @media (width >= 640px) { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
  @media (width >= 768px) { font-size: var(--fs-3xl); line-height: var(--lh-3xl); }
  @media (width >= 1024px) { font-size: var(--fs-4xl); line-height: var(--lh-4xl); }
  @media (width >= 1280px) { font-size: var(--fs-5xl); line-height: 1; }
}
.points-video { flex-basis: 60%; }

.how { display: flex; color: var(--white); background: var(--red); }
.how__before {
  flex-basis: 41.666667%;
  padding: 4rem 1rem 2rem;
  color: var(--red);
  background: var(--grey);
  clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%);
  @media (width >= 1024px) { padding: 2.5rem 5rem; }
}
.how__during {
  flex-basis: 58.333333%;
  padding: 2rem 1rem;
  @media (width >= 1024px) { padding: 2.5rem 4rem; }
}
.how__title {
  margin-bottom: 1rem;
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  font-weight: 700;
  text-align: center;
  @media (width >= 640px) { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
  @media (width >= 768px) { font-size: var(--fs-3xl); line-height: var(--lh-3xl); }
  @media (width >= 1024px) { margin-bottom: 2.5rem; font-size: var(--fs-4xl); line-height: var(--lh-4xl); }
  @media (width >= 1280px) { font-size: var(--fs-5xl); line-height: 1; }
}
.how__title--before {
  text-align: start;
  @media (width >= 768px) { text-align: center; }
}
.how__split { display: flex; }
.how__half { flex-basis: 50%; }
.how__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  @media (width >= 640px) { font-size: var(--fs-lg); line-height: var(--lh-lg); }
  @media (width >= 1024px) { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
  @media (width >= 1280px) { font-size: var(--fs-3xl); line-height: var(--lh-3xl); }
}
.how__text--left {
  border-right: 1px solid var(--white);
  @media (width >= 1024px) { padding-inline: 1rem; }
}
.how__text--right {
  padding-left: .5rem;
  border-left: 1px solid var(--white);
  @media (width >= 1024px) { padding-left: 2rem; padding-right: 1rem; }
}

.why {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  padding: 2.5rem 1rem;
  line-height: 1.625;
  color: var(--black);
  @media (width >= 1024px) { padding-block: 5rem; }
}
.why__title {
  order: -9999;
  grid-column: span 9 / span 9;
  margin-bottom: .5rem;
  font-family: var(--font-heading);
  font-size: var(--fs-5xl);
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
  color: var(--red);
  @media (width >= 640px) { font-size: var(--fs-7xl); line-height: 1; }
  @media (width >= 1024px) { font-size: var(--fs-6xl); }
}
.why__photo {
  order: -9999;
  grid-column: span 9 / span 9;
  @media (width >= 1024px) {
    order: 0;
    grid-column: span 3 / span 3;
    grid-row: span 3 / span 3;
    margin-top: 10rem;
    & img { margin-right: 2.5rem; margin-top: 24rem; }
  }
}
/* Two columns of four under lg (the right one starts at column 6), three across from lg. */
.why__item {
  display: grid;
  place-items: center;
  grid-column: span 4 / span 4;
}
.why__item--right { grid-column-start: 6; }
.why__item, .why__item--right {
  @media (width >= 1024px) { grid-column: span 3 / span 3; }
}
.why__item--a {
  padding-block: 1rem;
  @media (width >= 1024px) { padding: 2.5rem; }
}
.why__item--b { @media (width >= 1024px) { padding: 2.5rem; } }
.why__item--c {
  padding-block: 1rem;
  @media (width >= 768px) { padding-block: 2.5rem; }
  @media (width >= 1024px) { padding-inline: 2.5rem; }
}
.why__icon { height: 3rem; }
.why__heading {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  font-weight: 700;
  text-align: center;
  @media (width >= 768px) { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
  @media (width >= 1280px) { font-size: var(--fs-4xl); line-height: var(--lh-4xl); }
}
.why__heading--lg {
  @media (width >= 1024px) and (width < 1280px) { font-size: var(--fs-3xl); line-height: var(--lh-3xl); }
}
.why__text {
  @media (width >= 640px) { font-size: var(--fs-lg); line-height: var(--lh-lg); }
  @media (width >= 1024px) { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
  @media (width >= 1280px) { font-size: var(--fs-3xl); line-height: var(--lh-3xl); }
}

.burden { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--red); }
.burden__photo {
  grid-column: span 6 / span 6;
  @media (width >= 768px) { grid-column: span 2 / span 2; }
}
.burden__body {
  grid-column: span 6 / span 6;
  padding: 2.5rem;
  color: var(--white);
  @media (width >= 768px) { grid-column: span 4 / span 4; padding-inline: 0; }
  @media (width >= 1024px) { padding-block: 1rem; padding-left: 4rem; }
}
.burden__title {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  line-height: var(--lh-2xl);
  font-weight: 700;
  @media (width >= 1024px) { font-size: var(--fs-3xl); line-height: var(--lh-3xl); }
}
.burden__br { @media (width >= 1024px) { display: none; } }
.burden__rule {
  margin-block: .5rem;
  @media (width >= 1024px) { margin-right: 24rem; }
}
.burden__text {
  float: left;
  @media (width >= 1280px) { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
}
.burden__arrow { height: 1.5rem; padding-top: .5rem; padding-left: .5rem; }

/* ---- pricing ---- */
.pricing-hero {
  position: relative;
  margin-bottom: 9rem;
  padding-block: 3rem;
  background: var(--red);
  @media (width >= 1024px) { margin-bottom: 12rem; padding-top: 4rem; padding-bottom: 10rem; }
}
.pricing-hero__inner { position: relative; max-width: 48rem; margin-inline: auto; }
.pricing-hero__card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin-inline: auto;
  padding: .5rem 1rem;
  background: var(--white);
  border-radius: .25rem;
}
.pricing-hero__title {
  margin-bottom: .5rem;
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
  color: var(--red);
  @media (width >= 768px) { font-size: var(--fs-6xl); line-height: 1; }
}
.checks {
  display: flex;
  gap: .5rem;
  margin-inline: 1rem;
  color: var(--red);
  @media (width >= 1024px) { gap: 2rem; }
}
.check { flex-basis: 33.333333%; }
.check--first { margin-left: .75rem; }
.check__icon {
  float: left;
  height: 2rem;
  margin-top: .5rem;
  margin-right: .5rem;
  @media (width >= 1024px) { height: 2.5rem; margin-right: 1rem; }
}
.check__text {
  @media (width >= 640px) { font-size: var(--fs-lg); line-height: var(--lh-lg); }
  @media (width >= 1280px) { font-size: var(--fs-3xl); line-height: var(--lh-3xl); }
}
/* the text-md → lg → 2xl → 3xl ladder several body texts share */
.keeps__text, .stats__text {
  @media (width >= 640px) { font-size: var(--fs-lg); line-height: var(--lh-lg); }
  @media (width >= 1024px) { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
  @media (width >= 1280px) { font-size: var(--fs-3xl); line-height: var(--lh-3xl); }
}
.keeps {
  margin-inline: auto;
  padding-block: 2.5rem;
  @media (width >= 1024px) { padding-block: 5rem; }
}
.keeps__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-inline: 3rem;
  color: var(--white);
  background: var(--red);
}
.keeps__photo {
  order: 1;
  width: 100%;
  @media (width >= 768px) { width: 50%; }
  & img { width: 100%; margin-top: -2rem; object-fit: cover; }
}
.keeps__body {
  width: 100%;
  margin-bottom: 2.5rem;
  padding-inline: 1rem;
  @media (width >= 768px) { order: 1; width: 50%; margin-bottom: 0; }
}
.keeps__inner {
  margin-inline: 2.5rem;
  padding-block: 1rem;
  @media (width >= 1024px) { padding-block: 0; }
}
.keeps__rule { margin-block: 1.5rem; margin-right: 8rem; }
.raise-band {
  padding-block: 2.5rem;
  background: var(--red);
  @media (width >= 1024px) { padding-block: 6rem; }
}
.raise-band__inner {
  display: flex;
  align-items: center;
  margin-inline: auto;
  padding-inline: 2.5rem;
  @media (width >= 1024px) { padding-inline: 5rem; }
}
.raise-band__title {
  margin-inline: auto;
  font-size: var(--fs-3xl);
  line-height: var(--lh-3xl);
  font-weight: 700;
  text-align: center;
  color: var(--white);
  @media (width >= 1024px) { font-size: var(--fs-5xl); line-height: 1; }
}
.stats { padding-block: 2.5rem; color: var(--red); background: var(--white); }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-inline: 2.5rem;
  @media (width >= 1024px) { gap: 3rem; margin-inline: 5rem; }
}
.stats__value {
  margin-bottom: .5rem;
  font-family: var(--font-heading);
  font-size: var(--fs-5xl);
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
  @media (width >= 1024px) { font-size: var(--fs-7xl); line-height: 1; }
}
.who-can {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: var(--white);
  background: var(--red);
}
.who-can__photo {
  width: 100%;
  @media (width >= 768px) { width: 33.333333%; }
  & img { width: 100%; object-fit: cover; }
}
.who-can__body {
  width: 100%;
  padding: 1rem;
  @media (width >= 768px) { width: 66.666667%; }
  @media (width >= 1024px) { padding-block: 0; }
}
.who-can__title {
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  line-height: var(--lh-4xl);
  font-weight: 600;
  text-align: center;
}

/* ---- results ---- */
.results-hero { max-width: 42rem; margin-inline: auto; text-align: center; }
.results-hero__title {
  font-family: var(--font-heading);
  font-size: var(--fs-6xl);
  line-height: 1;
  font-weight: 700;
  color: var(--white);
  @media (width >= 1024px) { font-size: var(--fs-8xl); }
}
.quote {
  padding-block: 1rem;
  background: var(--white);
  @media (width >= 1024px) { padding-block: 2.5rem; }
}
.quote__row { display: flex; flex-wrap: wrap; align-items: center; }
.quote__text {
  margin: 1rem;
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  line-height: 1.625;
  @media (width >= 1024px) { margin: 2.5rem; font-size: var(--fs-6xl); line-height: 1; }
}
.videos { text-align: center; }
.videos__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin-inline: 2.5rem;
  margin-bottom: 12rem;
  padding-bottom: 1.5rem;
}
.videos__item { grid-column: span 2 / span 2; }
.videos__frame--bordered { border: 1px solid var(--gray-200); }
.videos__name {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  line-height: var(--lh-4xl);
  font-weight: 700;
  color: var(--red);
}
.videos__role {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  line-height: var(--lh-3xl);
  color: var(--black);
}
.testimonials {
  padding: 1rem;
  background: var(--red);
  @media (width >= 1024px) { padding-inline: 2.5rem; }
}
.testimonials__title {
  margin-block: 1rem;
  font-size: var(--fs-5xl);
  line-height: 1;
  font-weight: 600;
  text-align: center;
  color: var(--white);
}
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  @media (width >= 1024px) { gap: 2.5rem; }
}
.testimonial { display: grid; padding: 1rem; background: var(--white); }
.testimonial__photo { height: 9rem; margin-inline: auto; }
.testimonial__text { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.testimonial__by { align-self: flex-end; }
.testimonial__by--place { place-self: end; }
.testimonial__name { font-size: var(--fs-3xl); line-height: var(--lh-3xl); color: var(--red); }
.proven { padding-block: 2.5rem; text-align: center; background: var(--white); }
.proven__title {
  padding-bottom: 1.5rem;
  font-size: var(--fs-3xl);
  line-height: var(--lh-3xl);
  font-weight: 700;
  color: var(--red);
  @media (width >= 1024px) { font-size: var(--fs-4xl); line-height: var(--lh-4xl); }
}
.proven__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
.school {
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--gray-50);
  border-radius: .25rem;
  @media (width >= 1024px) { padding: 2rem; }
}
.school__logo { height: 7rem; margin-inline: auto; }
.school__name { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: 700; }
/* An empty row: the card's grid shares its spare height across five rows, as the old layout did. */
.school__spacer { font-weight: 700; }
.school__amount {
  font-size: var(--fs-4xl);
  line-height: var(--lh-4xl);
  font-weight: 700;
  color: var(--red);
  background: var(--white);
  @media (width >= 1024px) { margin-inline: 2.5rem; }
}
.school__label { font-weight: 700; }

/* ---- FAQ ---- */
.faq-hero { margin-inline: auto; padding-inline: 1rem; text-align: center; }
.faq-hero__title {
  font-family: var(--font-heading);
  font-size: 60px;
  line-height: 90px;
  font-weight: 700;
  color: var(--white);
}
.faq-wrap { margin: 5rem; }
.faq-box {
  margin-block: 1.5rem;
  padding: 1.5rem 2.5rem;
  background: var(--grey);
  border-radius: .25rem;
}
.faq-box__q, .faq-box__contact { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
.faq-box__q { font-weight: 700; }
.faq-box__q--next, .faq-box__contact { padding-top: 2.5rem; }

/* ---- who we are ---- */
.story {
  position: relative;
  padding-block: 3rem;
  background: var(--red);
  @media (width >= 768px) { padding-top: 4rem; }
  @media (width >= 1024px) { padding-bottom: 4rem; }
}
.story__inner { max-width: 42rem; margin-inline: auto; text-align: center; }
.story__title {
  margin-bottom: 2rem;
  font-family: var(--font-heading);
  font-size: var(--fs-6xl);
  line-height: 1;
  font-weight: 700;
  color: var(--red);
  background: var(--white);
  @media (width >= 1024px) { font-size: var(--fs-8xl); }
}
.about {
  padding-block: 2.5rem;
  background: var(--white);
  @media (width >= 768px) { padding-block: 5rem; }
}
.about__row { display: flex; flex-wrap: wrap; align-items: center; }
.about__title {
  margin-bottom: 1rem;
  font-size: var(--fs-2xl);
  line-height: var(--lh-2xl);
  font-weight: 700;
  text-align: center;
  color: var(--red);
  @media (width >= 1024px) { font-size: var(--fs-6xl); line-height: 1; }
}
.about__text {
  margin-bottom: .5rem;
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  @media (width >= 768px) { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
}
.impact { display: flex; flex-wrap: wrap; align-items: center; background: var(--grey); }
.impact__photo {
  @media (width >= 768px) { width: 50%; }
  & img { width: 100%; object-fit: cover; }
}
.impact__body {
  margin-bottom: 2.5rem;
  padding: 2rem 4rem;
  @media (width >= 768px) { width: 50%; }
  @media (width >= 1024px) { margin-bottom: 0; padding: .5rem 1rem; }
}
.impact__title {
  margin-block: .5rem;
  font-size: var(--fs-2xl);
  line-height: var(--lh-2xl);
  font-weight: 700;
  text-align: center;
  color: var(--red);
  @media (width >= 1024px) { font-size: var(--fs-3xl); line-height: var(--lh-3xl); }
}
.impact__text { margin-bottom: .5rem; font-size: var(--fs-lg); line-height: var(--lh-lg); }
.expand { padding-inline: 1rem; background: var(--white); }
.expand__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  color: var(--black);
}
.expand__body, .expand__map {
  grid-column: span 4 / span 4;
  @media (width >= 768px) { grid-column: span 2 / span 2; }
}
.expand__body { padding: 1.5rem; }
.expand__body.container { margin-inline: 0; }
.expand__map img { width: 100%; }
.expand__icon { height: 2rem; margin-inline: auto; }
.expand__title {
  padding-top: .5rem;
  padding-bottom: 1.5rem;
  font-size: var(--fs-2xl);
  line-height: var(--lh-2xl);
  font-weight: 700;
  text-align: center;
  color: var(--red);
  @media (width >= 1024px) { font-size: var(--fs-4xl); line-height: var(--lh-4xl); }
}
.expand__text {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  @media (width >= 768px) { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
}
.connect { padding-block: 1rem; background: var(--red); }
.connect__row { display: flex; align-items: center; gap: 3rem; padding-inline: 1rem; }
.connect__half { flex-basis: 50%; }
.connect__title {
  font-size: var(--fs-3xl);
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
  color: var(--white);
  @media (width >= 1024px) { font-size: var(--fs-5xl); line-height: 1; }
}
.calling { padding: 2.5rem 1rem; background: var(--white); }
.split { display: flex; flex-wrap: wrap; align-items: center; margin-inline: -1rem; }
.split__photo {
  order: 1;
  width: 100%;
  padding-inline: 1rem;
  @media (width >= 768px) { width: 50%; }
  & img { width: 100%; object-fit: cover; }
}
.split__body {
  width: 100%;
  margin-bottom: 3rem;
  padding-inline: 1rem;
  @media (width >= 768px) { order: 1; width: 50%; margin-bottom: 0; }
}
.calling__inner {
  padding-inline: 2.5rem;
  @media (width >= 1024px) { padding-inline: .5rem; }
}
.calling__title {
  margin-bottom: 1rem;
  font-size: var(--fs-3xl);
  line-height: var(--lh-3xl);
  font-weight: 700;
  color: var(--red);
  @media (width >= 1024px) { font-size: var(--fs-4xl); line-height: var(--lh-4xl); }
}
.calling__text, .outreach__text { margin-bottom: .5rem; }
.outreach-band { padding: 1rem 3rem; background: var(--red); }
.outreach-band__title {
  font-size: var(--fs-5xl);
  line-height: 1;
  font-weight: 700;
  text-align: center;
  color: var(--white);
  @media (width >= 1024px) { font-size: var(--fs-7xl); }
}
.outreach { padding-block: 2.5rem; background: var(--white); }
.outreach__inner { @media (width >= 1024px) { max-width: 28rem; margin-left: auto; } }
.outreach__title {
  margin-bottom: 1rem;
  font-size: var(--fs-2xl);
  line-height: var(--lh-2xl);
  color: var(--black);
  @media (width >= 1024px) { font-size: var(--fs-5xl); line-height: 1; }
}
.outreach__rule { width: 8rem; margin-bottom: 1rem; border-width: 2px; border-color: var(--red); }

/* ---- 404 ---- */
.not-found { padding-block: 5rem; text-align: center; }
.not-found__title {
  margin-bottom: 1.5rem;
  font-size: var(--fs-4xl);
  line-height: var(--lh-4xl);
  font-weight: 700;
  color: var(--red);
  @media (width >= 1024px) { font-size: var(--fs-6xl); line-height: 1; }
}
.not-found__text { margin-bottom: 2.5rem; font-size: var(--fs-xl); line-height: var(--lh-xl); }
.not-found__home {
  display: inline-block;
  padding: .75rem 1.5rem;
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  font-weight: 700;
  color: var(--white);
  background: var(--red);
  border-radius: .25rem;
}