/* Site-specific overrides layered on top of the Charifund template's
   main.css / responsive.css. Loaded last in head.blade.php so equal-
   specificity rules here win the cascade without needing !important. */

/* --otc-black:#212529;
  --otc-white:#ffffff;
  --otc-primary-darkest: #010c0a;
  --otc-primary-dark: #091f1b;
  --otc-primary-medium: #183b35;
  --otc-primary: #426b64;
  --otc-primary-light: #9baeab;
  --otc-primary-lightest: #dcf5f1;
  --otc-secondary-dark: #7b1619;
  --otc-secondary-color: #c72125;
  --otc-secondary-light: #cc6d6f;
  --otc-shadow-secondary: 0 0 8px rgba(199, 33, 37, 0.5);
  --otc-accent-dark: #b98d07;
  --otc-accent-color: #ffc107;
  --otc-accent-light: #fedf82;*/

/* Bootstrap 5 overrides: */
/*
  --bs-body-color: var(--otc-primary-darkest);
  --bs-body-bg: var(--otc-white);
  --bs-primary: var(--otc-primary);
  --bs-secondary: var(--otc-secondary-color);
  --bs-success: var(--otc-accent-color);
  --bs-info: var(--otc-primary-light);
  --bs-warning: var(--otc-accent-color);
  --bs-danger: var(--otc-secondary-color);
  --bs-light: var(--otc-primary-lightest);
  --bs-dark: var(--otc-primary-dark);

*/

.icon-support,
.contact-btn p {
  opacity: .8;
}

/* Hero slides with less content (no banner-content paragraph) were
   shorter than the swiper-equalized slide height, leaving a gap below
   .banner-two__slider-bg / its gradient overlay where the next section's
   background showed through. Swiper already stretches .swiper-slide to
   the tallest slide; this just makes the inner wrapper follow suit so
   the absolutely-positioned bg/overlay (inset: 0 on this element) always
   reaches the true bottom of the slide, on every slide. */
.banner-two .banner-two__slider-single {
  height: 100%;
}

/* Oversized "abstract" nav logo: the mark bleeds above/below the header
   bar instead of being constrained to the row's height. The 70px box
   below is the fixed slot the flex row lays out around (so header
   height never changes); the image itself is pulled out of flow and
   sized independently of that slot. */
/* .topbar.topbar--secondary,
   .header.header-secondary {
  padding: 0px;
  background-color: green;
} */

/* .topbar--secondary,
.header-secondary {
  padding: 0px;
  background-color: green;
} */

p {
  text-transform: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: uppercase;
}

.btn--tertiary,
.btn--primary,
.btn--secondary,
.otc-button {
  text-transform: uppercase;
}


.spaced-section {
  margin-top: 4em;
  margin-bottom: 4rem;
}

.header .navbar-logo {
  position: relative;
  width: 150px;
  min-width: 150px;
  height: 70px;
}

.header .navbar-logo__link {
  display: block;
  height: 100%;
}

.header .navbar-logo img {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  max-width: none;
  width: auto;
  height: 150px;
  margin-top: 50px;
  /* the PNG is real alpha transparency around a round-ish mark, so
     drop-shadow (which follows the actual silhouette) gives contrast
     against both the white header and whatever sits behind it in the
     hero, instead of a fixed box-shadow rectangle. */
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 14px rgba(18, 47, 42, 0.5)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}

.header .navbar-logo__text {
  display: inline-block;
  margin-left: 165px;
}

@media only screen and (max-width: 575px) {
  .header .navbar-logo {
    width: 90px;
    min-width: 90px;
    height: 50px;
  }

  .header .navbar-logo img {
    height: 100px;
  }

  .header .navbar-logo__text {
    margin-left: 100px;
    font-size: 16px;
  }
}

.header .navbar__item a {
  color: #fff;
}

.header .navbar__sub-menu {
  background-color: var(--primary-seven-body);
  border: 1px solid var(--hover-color);
  box-shadow: 0px 18px 40px rgba(0, 0, 0, 0.18);
}

.header .navbar__sub-menu a {
  color: var(--secondary-color);
  border-bottom-color: rgba(18, 47, 42, 0.12);
}

.header .navbar__sub-menu a:hover,
.header .navbar__sub-menu .active>a {
  color: var(--base-color);
}

.header-secondary .navbar__sub-menu a {
  color: var(--secondary-color);
}

/* Small corner play-button badge for testimonial slides that have a
   video. Add .testimonial__video-badge.open-video-popup to a slide to
   opt it in (see indexOne.blade.php); omit it for text-only slides.
   .open-video-popup is already wired to the site's Magnific Popup
   video modal in custom.js, so no extra JS is needed here. */
.testimonial__video-badge {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--secondary-color);
  box-shadow: var(--shadow-tertiary);
  z-index: 2;
  transition: var(--transition);
}

.testimonial__video-badge i {
  font-size: 20px;
  color: var(--white);
}

.testimonial__video-badge:hover {
  background: var(--primary-color);
}

#video-testimonials .testimonial__slider-single--featured-video,
#video-testimonials .testimonial__slider-single--video {
  padding-top: 24px;
}

#video-testimonials .testimonial__video-panel {
  position: relative;
  min-height: 240px;
  /* padding: 14px; */
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, rgba(121, 128, 131, 0.22) 0%, rgba(121, 128, 131, 0.14) 52%, rgba(91, 98, 101, 0.2) 100%);
  border: 1px solid rgba(121, 128, 131, 0.3);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -28px 40px rgba(0, 0, 0, 0.06);
}

#video-testimonials .testimonial__video-preview {
  position: absolute;
  /* inset: 14px; */
  /* width: calc(100% - 28px);
  height: calc(100% - 28px); */
  width: 100%;
  height: 100%;
  border-radius: 18px;
  object-fit: cover;
  z-index: 0;
}

/* #video-testimonials .testimonial__video-panel::before {
  content: "Video Testimonial";
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(9, 31, 27, 0.82);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
} */

#video-testimonials .testimonial__video-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.14) 100%);
  pointer-events: none;
}

#video-testimonials .testimonial__video-city {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(9, 31, 27, 0.82);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#video-testimonials .testimonial__video-element {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 212px;
  border: 0;
  border-radius: 18px;
  background: #000;
  object-fit: cover;
}

#video-testimonials .testimonial__video-caption {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 3;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--secondary-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#video-testimonials .testimonial__quote-copy {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

#video-testimonials .testimonial__video-badge--centered {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: 78px;
  height: 78px;
  border: 4px solid rgba(255, 255, 255, 0.62);
  background: var(--secondary-color);
  box-shadow: 0 18px 36px rgba(9, 31, 27, 0.28);
  transform: translate(-50%, -50%);
  z-index: 4;
}

#video-testimonials .testimonial__video-badge--centered i {
  font-size: 24px;
}

.difference .difference__cards,
.difference--image-panels .difference-image-cards {
  position: relative;
  margin-top: 24px;
  padding-bottom: 6rem;
}

.difference .difference__cards::after,
.difference--image-panels .difference-image-cards::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  bottom: -32px;
  height: 120px;
  background: linear-gradient(to bottom, rgba(252, 248, 237, 0) 0%, rgba(252, 248, 237, 0.55) 60%, rgba(252, 248, 237, 1) 100%);
  pointer-events: none;
  z-index: 0;
}

.difference .difference-card {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 34px 24px 30px;
  text-align: center;
  background-color: var(--white);
  border: 3px dashed var(--otc-secondary-color);
  border-radius: 18px;
  overflow: visible;
  box-shadow: 0 12px 30px rgba(18, 47, 42, 0.08);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.difference .difference-card:hover {
  border-color: var(--secondary-color);
  box-shadow: 0 20px 40px rgba(18, 47, 42, 0.18);
}

.difference .difference-card__badge {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--white);
  background-color: var(--secondary-color);
  box-shadow: 0 8px 18px rgba(18, 47, 42, 0.12);
}

.difference .difference-card--bottom .difference-card__badge {
  background-color: var(--hover-color);
}

.difference .difference-card--top-alt .difference-card__badge {
  background-color: var(--quaternary-color);
}

.difference .difference-card--bottom-alt .difference-card__badge {
  background-color: var(--base-color);
}

.difference .difference-card--top h5,
.difference .difference-card--bottom h5,
.difference .difference-card--top-alt h5,
.difference .difference-card--bottom-alt h5 {
  color: var(--secondary-color);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.difference .difference-card__divider {
  width: 34px;
  height: 5px;
  display: block;
  margin: 14px auto 16px;
  border-radius: 999px;
  background-color: var(--otc-secondary-color);
}

.difference .difference-card p {
  max-width: 260px;
  margin: 0 auto;
  color: #4f5658;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
}

.difference .difference-card--bottom {
  margin-top: 28px;
}

.difference .difference-card--top-alt {
  margin-top: 0px;
}

.difference .difference-card--bottom-alt {
  margin-top: 28px;
}

.difference .difference-connector {
  position: absolute;
  width: 90px;
  height: 50px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

.difference .difference-connector svg {
  display: block;
  width: 100%;
  height: 100%;
}

.difference .difference-connector--one {
  left: 25%;
  top: 4rem;
}

.difference .difference-connector--two {
  left: 50%;
  bottom: 6rem;
}

.difference .difference-connector--two svg {
  transform: scaleY(-1);
}

.difference .difference-connector--three {
  left: 75%;
  top: 4rem;
}

.difference--image-panels .difference__cards {
  margin-top: 24px;
  padding-bottom: 0;
}

.difference--image-panels .difference__cards::after,
.difference--image-panels .difference-connector {
  display: none;
}

.difference--image-panels .difference-image-cards {
  position: relative;
}

.difference--image-panels .difference-image-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  box-shadow: 0 18px 42px rgba(18, 47, 42, 0.12);
  background: var(--white);
}

.difference--image-panels .difference-image-card__media {
  position: relative;
  z-index: 0;
  height: 240px;
  overflow: hidden;
}

.difference--image-panels .difference-image-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.difference--image-panels .difference-image-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.08) 100%);
}

.difference--image-panels .difference-image-card__body {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding: 24px 22px 26px;
  text-align: center;
  background-color: var(--secondary-color);
  height: 100%;
}

.difference--image-panels .difference-image-card__body::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--difference-image-fade-height, 60px));
  height: var(--difference-image-fade-height, 60px);
  /* background: linear-gradient(180deg, rgba(199, 33, 37, 1) 0%, rgba(199, 33, 37, 0) 100%); */
  background: linear-gradient(180deg, rgba(9, 31, 27, 0) 0%, rgba(9, 31, 27, 1) 100%);
  pointer-events: none;
}

.difference--image-panels .difference-image-card__body h5 {
  margin: 0 0 12px;
  color: var(--white);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}

.difference--image-panels .difference-image-card__body p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 500;
}

.difference--image-panels .difference-image-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px rgba(18, 47, 42, 0.18);
}

@media (max-width: 991.98px) {
  .difference--image-panels .difference-image-card__media {
    --difference-image-fade-height: 55px;
    height: 220px;
  }
}

@media (max-width: 991.98px) {
  .difference .difference__cards::after {
    display: none;
  }

  .difference .difference-card,
  .difference .difference-card--bottom,
  .difference .difference-card--bottom-alt {
    margin-top: 0px;
  }

  .difference .difference-connector {
    display: none;
  }
}

/* Preloader logo coin-flip. main.css's .preloader i animates a single
   flat element with rotateY, which mirrors/reverses whatever is on it
   for half of every cycle - fine for an abstract icon glyph, but shows
   backwards text on a real logo. This instead stacks two copies of the
   same logo as front/back faces: each is hidden via backface-visibility
   whenever it would be facing away, so the flip always shows the logo
   right-reading, never mirrored. Reuses the existing flipY keyframes
   from main.css - only the structure/faces are new. */
.preloader {
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.preloader__coin {
  position: relative;
  width: 100px;
  height: 100px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: flipY 3s linear infinite;
  animation: flipY 3s linear infinite;
}

.preloader__face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--white);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.preloader__face img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.preloader__face--back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}


/* home difference */
.help .thumb-bottom {
  margin-right: -1rem;
  margin-bottom: -1rem;
}

@media only screen and (min-width: 1401px) {
  .help .thumb-bottom {
    margin-right: -2rem;
    margin-bottom: -2rem;
  }
}

/* footer styles */
.footer-two__widget-logo img {
  max-width: 100px;
  height: auto;
}

/* Address is a map link; the contact-link rule lowercases everything */
.footer-two .footer-two__widget .footer-two__widget-content--contact a.footer-two__address {
  text-transform: none;
}

.footer-two__donate {
  margin-top: 30px;
}


/* ====================================
    Home Banner Styles 
=====================================*/
#home-hero .banner-content {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.6;
  margin-top: 20px;
  margin-bottom: 32px;
  max-width: 460px;
}

@media (min-width: 768px) {
  #home-hero .banner-content {
    font-size: 18px;
    margin-top: 24px;
    margin-bottom: 36px;
  }
}

@media (min-width: 1200px) {
  #home-hero .banner-content {
    font-size: 20px;
    margin-top: 28px;
    margin-bottom: 40px;
  }
}

#home-hero .banner-two__slider-content {
  height: 20rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

@media (min-width: 576px) {
  #home-hero .banner-two__slider-content {
    height: 20rem;
  }
}

@media (min-width: 768px) {
  #home-hero .banner-two__slider-content {
    display: block;
  }
}

@media (min-width: 768px) {
  #home-hero .banner-two__slider-content {
    height: 25rem;
  }

  /* #home-hero .banner-two__slider-content h1 {
            max-width: 620px;
        } */
}

@media (min-width: 992px) {
  #home-hero .banner-two__slider-content {
    height: 26rem;
  }
}

@media (min-width: 1200px) {
  #home-hero .banner-two__slider-content {
    height: 28rem;
  }
}

@media (min-width: 1400px) {
  #home-hero .banner-two__slider-content {
    height: 30rem;
  }
}

/* Search + Donate Now, moved into the topbar row so they don't fight the
   nav links for space at the xl breakpoint (see .navbar__mobile-options,
   which is d-lg-none so it only reappears once the topbar itself hides). */
.topbar .topbar__actions {
  gap: 14px;
}

.topbar .topbar__actions .search-box button {
  color: var(--white);
}

.topbar .topbar__actions .search-box button:hover {
  color: var(--base-color);
}

/* .topbar__inner is the rounded dark-green bar itself (see header.css —
   border-radius: 0 0 20px 17px). Making it the positioning context for the
   button below, and clipping to it, means the button's edge always matches
   the bar's actual curve exactly, with no need to duplicate that radius
   value by hand or fight the Bootstrap row/col padding stacked between
   them. */
.topbar--secondary .topbar__inner {
  position: relative;
  overflow: hidden;
}

/* Reserve room on the right of the action row so the search icon / social
   icons don't render underneath the now-absolutely-positioned button.
   This is an estimate of the button's rendered width — nudge it if there's
   a gap or overlap once you see it live, since font rendering isn't
   something I can measure without a browser. */
.topbar .topbar__items {
  padding-inline-end: 170px;
}

/* End-cap button: fills the full height of the bar (top:0 to bottom:0)
   and sits flush against its right edge, rather than floating as a
   separate pill with dark space around it — the bar's own end becomes
   the button. */
.topbar .topbar__actions .topbar-donate-btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-inline: 24px;
  /* border-radius: 20px; */
  background-color: var(--base-color);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: var(--transition);
}

.topbar .topbar__actions .topbar-donate-btn i {
  font-size: 12px;
}

.topbar .topbar__actions .topbar-donate-btn:hover {
  background-color: var(--hover-color);
  color: var(--white);
}

.std-button {
  padding: 16px 40px;
  border-radius: 30px;
  gap: 12px;
}

/* Visual separation between the stacked white sections at the top of the page */
.vision-tint {
  background-color: var(--otc-tint);
  background-image: url("{{ asset('assets/images/cause/cause-bg.png') }}");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.movement-continues--dark {
  background-color: var(--secondary-color);
}

.movement-continues--dark .sub-title {
  color: var(--otc-accent-color);
}

.movement-continues--dark .section__header h2 {
  color: var(--white);
}

.movement-continues--dark .section__header p {
  color: rgba(255, 255, 255, 0.85);
}

/* Condense the gap between the "Why we're here" intro and the
   "One cause. Four ways we show up." section that follows it. */
/* #vision-section.difference {
  padding-bottom: 30px;
}

#difference-image-panels.difference {
  padding-top: 45px;
}

#difference-image-panels .section__header {
  margin-bottom: 20px;
} */


/* =====================================
=======  Picture section styles =======
=====================================*/
.help .thumb-top img,
.help .thumb-bottom img {
  max-width: 230px;
  height: auto;
}


/* ======================================
======== About Page styles  ============
=======================================*/
.about-transparency {
  padding-bottom: 4rem;
}

/* ── Ownership 2×2 card grid ── */
.about-ownership-card {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 12px;
  padding: 36px 28px 32px;
  height: 100%;
  transition: box-shadow .25s ease, transform .25s ease;
}

.about-ownership-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, .10);
  transform: translateY(-4px);
}

.about-ownership-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary-color, #c8102e);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.about-ownership-card__icon i {
  font-size: 24px;
  color: #fff;
}

.about-ownership-card h5 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--heading-color, #1a1a2e);
}

.about-ownership-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--body-color, #666);
  margin: 0;
}

/* ── Founder photo ── */
.about-founder-photo {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
}

.about-founder-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.about-founder-role {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-color, #c8102e);
  margin-top: -8px;
  margin-bottom: 20px;
}

/* ── Transparency section ── */
.about-transparency {
  position: relative;
}

.about-transparency .difference-two__progress {
  display: flex;
}

/* This section uses .community (not .difference-two), so the circular-progress
       ring's styling in difference.css — which is scoped to a .difference-two
       ancestor — never matched. Re-declared here, scoped to .about-transparency,
       with light-on-dark colors since .community renders white/light text. */
.about-transparency .difference-progress-single {
  display: flex;
  align-items: center;
  gap: 16px;
}

.about-transparency .difference-progress-single .progress-bar-single {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.about-transparency .difference-progress-single .circular-progress {
  position: relative;
  width: 100%;
  height: 100%;
}

.about-transparency .difference-progress-single .progress-circle {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.about-transparency .difference-progress-single .circle-bg,
.about-transparency .difference-progress-single .circle-progress {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}

.about-transparency .difference-progress-single .circle-bg {
  stroke: rgba(255, 255, 255, 0.25);
}

.about-transparency .difference-progress-single .circle-progress {
  stroke: var(--otc-accent-color);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.3s;
}

.about-transparency .difference-progress-single .percent-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
}

.about-transparency .difference-progress-single .content p {
  font-weight: 800;
  color: var(--white);
  line-height: 1.4;
}

/* The city_background_f1920-900.jpg photo is bright and detailed; the
       default .community-bg::after diagonal gradient leaves the center-right
       (where this section's text sits) too light to read. Flat, uniform
       darkening instead of the diagonal gradient, just for this section. */
.about-transparency .community-bg::after {
  background: rgba(9, 31, 27, 0.78);
}

/* Same story as the progress ring above: .help__content-list li's layout
       and color both come from help.css rules scoped to a .help ancestor,
       which this .community section doesn't have. Re-declared here. */
.about-transparency .help__content-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--white);
}

.about-transparency .help__content-list li i {
  font-size: 20px;
  color: var(--otc-accent-color);
}

.about-transparency .help__content-list .text-muted {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* ── Services stacked rows spacing ── */
.about-services .help__content-icon {
  margin-bottom: 28px;
}

.about-services .help__content-icon:last-child {
  margin-bottom: 0;
}

/* ── Youth section spacing ── */
.about-youth .help__content-icon-group.mt-20 {
  margin-top: 20px;
}

/* ── Leadership section ── */
.about-leadership .mb-50 {
  margin-bottom: 50px;
}

.about-leadership .mt-30 {
  margin-top: 30px;
}

/* ======================================
======== our-work Page styles  ============
=======================================*/
/* ── Ownership cards (same pattern as About page) ── */
.about-ownership-card {
  background: #fff;
  border-radius: 12px;
  padding: 32px 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .07);
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
}

.about-ownership-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .13);
}

.about-ownership-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-primary, #e03a3a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-size: 1.5rem;
  color: #fff;
}

.about-ownership-card h5 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.about-ownership-card p {
  font-size: .92rem;
  margin-bottom: 0;
}

/* ── Supporting programs sub-divider ── */
.supporting-programs-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 48px 0 32px;
}

.supporting-programs-divider::before,
.supporting-programs-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, .12);
}

.supporting-programs-divider span {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary, #e03a3a);
  white-space: nowrap;
}

/* ── Program section alternating backgrounds ── */
.program-section--alt {
  background-color: #f8f9fb;
}

/* ── Stat callout badges in icon rows ── */
.help__content-icon .stat-badge {
  display: inline-block;
  background: var(--color-primary, #e03a3a);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 8px;
  margin-top: 6px;
  letter-spacing: .03em;
}

/* ── Faith & Hope — flip image to right on desktop ── */
.faith-image-col {
  order: -1;
}

@media (min-width: 992px) {
  .faith-image-col {
    order: 1;
  }
}

/* ── Faith & Hope — swap the small inset photo and the vertical
       callout bar to the opposite sides of the main image. Base rules
       (help.css) put .thumb-bottom at inset-inline-end (right) and
       .vertical-text at inset-inline-start (left); flipped here. ── */
.faith-image-col .thumb-bottom {
  inset-inline-end: auto;
  inset-inline-start: 0px;
}

.faith-image-col .vertical-text {
  inset-inline-start: auto;
  inset-inline-end: 0px;
}

#economic-empowerment .bottom-section {
  margin-bottom: 4rem;
}

.program-section--alt,
#faith-and-hope .hand,
.tinted-hand-section .hand {
  background-color: #f8f9fb;
}

.help.image-right .line {
  text-align: start;
  direction: ltr;
  left: 0;
}

.help.image-right .thumb-bottom {
  margin-left: 3rem;
}

/* ======================================
====== reusable partial styles  =========
=======================================*/
/* ── Give / Volunteer split CTA — stronger, uniform overlay so text
       reads over busy photos, plus centered, width-constrained text. ── */
.cta-section .cta-section__first::before {
  background: rgba(9, 31, 27, 0.72);
}

.cta-section .cta-section__last::before {
  background: rgba(9, 31, 27, 0.72);
}

.cta-section .cta-section__group {
  max-width: 420px;
  margin-inline: auto;
  padding-inline: 24px;
}

.cta-section .content span {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

.cta-section .content h3 {
  font-size: 2rem;
}

.cta-section .content p {
  color: rgba(255, 255, 255, 0.88);
  margin-top: 12px;
  line-height: 1.65;
}

/* ── Form validation errors + AJAX success panel (contact + newsletter) ──
   body{text-transform:capitalize} (main.css) is already turned back off
   above for <p>/<h1-6>; .alert and .form-error are plain <div>/<span>
   elements so they still inherit that capitalize and need the override
   explicitly. Shared by contactForm.blade.php and newsSubscribe.blade.php
   so both AJAX-submitted forms look and behave the same. */
.alert {
  text-transform: none;
}

.form-error {
  display: block;
  text-transform: none;
  color: var(--otc-secondary-color, #c72125);
  font-size: 13px;
  margin-top: 6px;
}

.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 20px;
}

.form-success__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--otc-accent-color, #ffc107);
  color: var(--secondary-color, #091f1b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 18px;
}

.form-success h4 {
  margin-bottom: 10px;
}

.form-success p {
  color: #7a7f7d;
  max-width: 320px;
}

/* Newsletter form sits on the dark footer background, so the success
   panel needs light text instead of .form-success's default dark-on-white
   styling (which assumes the white card context the contact form sits in). */
.footer-two__newsletter-form .form-success h4 {
  color: var(--white);
}

.footer-two__newsletter-form .form-success p {
  color: rgba(255, 255, 255, 0.75);
}

/* ── Contact page info grid ──
   contact.css's .contact-main__single is width:100%+flex-grow:1 inside a
   flex-wrap row, so items only line up into columns by accident of their
   own content width — and since this whole block already only occupies
   half the page (col-xl-6), a 2-column split inside that left each item
   too narrow for real content (a full street address, "(708) 697-5000")
   to sit on one line. Single stacked column instead: every item gets the
   full available width. */
.contact-main .contact-main__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.contact-main .contact-main__single {
  width: auto;
}

/*===========================
===== Home page styles======
===========================*/

/* TV-frame video panel — the AdobeStock_802047107_tv-screen.png "screen"
       area is a solid gray gradient fill, not a transparent cutout, so the
       video sits ABOVE the frame image (not behind it) and is sized/inset
       to cover just the screen area, leaving the black bezel visible around
       the outside. The inset percentages are estimated from the source
       image's proportions — nudge them if the video doesn't line up with
       the bezel exactly once you see it rendered. */
.tv-frame-video {
  position: relative;
  width: 100%;
}

.tv-frame-video__frame {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.tv-frame-video__screen {
  position: absolute;
  inset: 9% 8% 13% 8%;
  z-index: 2;
  overflow: hidden;
  border-radius: 4%;
  background: #000;
}

.tv-frame-video__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* This panel now lives inside the live #cta-donate .cta-section grid
       (moved there from the standalone section it started in). Scoped to
       #cta-donate .cta-section__center specifically so nothing else that
       uses .cta-section__single/.cta-section__center elsewhere is affected.

       Unlike its flanking columns, this one has no full-bleed .cta-img
       background of its own, so there's nothing matching the dark backdrop
       behind the TV graphic — added via ::before. overflow:hidden keeps
       the frame contained within this section's own box regardless of its
       rendered size. The frame itself fills the same width as that
       background (no max-width cap), so it reads as one panel instead of
       a smaller graphic floating inside a larger dark box; a sane ceiling
       on the wrapping column keeps it from stretching edge-to-edge with no
       breathing room on very wide desktop screens or on mobile once the
       columns stack. */
#cta-donate .cta-section__center {
  overflow: hidden;
  max-width: 640px;
  margin-inline: auto;
}

#cta-donate .cta-section__center::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--secondary-color);
}

#cta-donate .cta-section__center .tv-frame-video {
  width: 100%;
  padding-inline: 24px;
}

/* cta.css has a rule scoped to .cta-section that resets .video-btn-wrapper
       to position:relative (it's normally position:absolute + a translate(-50%,-50%)
       centering transform) — since this panel lives inside #cta-donate.cta-section,
       that rule wins on specificity and was knocking the button out of its centered
       position into normal document flow, where .tv-frame-video__screen's
       overflow:hidden was clipping most of it away. This out-specifies it. */
#cta-donate .cta-section__center .tv-frame-video__screen .video-btn-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* inset: auto; */
}

#cta-donate .middle-cta-section {
  background-image: url("{{ asset('assets/img/home/background-cta-blank.png') }}");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Testimonials — static 4-card grid instead of the real homepage's
       auto-rotating Swiper carousel (see note above the section in content). */
.testimonials-alt-grid {
  margin-top: 30px;
}

/* New, self-contained testimonial card design (per provided mockup) —
       intentionally not reusing .testimonial__slider-single/.testimonial__video-panel,
       since those already carry a different look elsewhere (dark overlay, hover
       quote, icon-play badge) that this design replaces rather than extends. */
.otc-testimonial-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white, #fff);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.otc-testimonial-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.otc-testimonial-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.otc-testimonial-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(9, 31, 27, 0.82) 100%);
  pointer-events: none;
}

.otc-testimonial-card__play {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 31, 27, 0.72);
  color: var(--white, #fff);
  font-size: 20px;
  z-index: 2;
  transition: var(--transition, all .3s ease);
}

.otc-testimonial-card__play:hover {
  background: var(--base-color, #c72125);
}

.otc-testimonial-card__badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 3;
  background: rgba(255, 255, 255, 0.92);
  color: var(--secondary-color, #091f1b);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.otc-testimonial-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px;
}

.otc-testimonial-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* City name sits on the photo as the card's headline */
.otc-testimonial-card__city {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 2;
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white, #fff);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.otc-testimonial-card__city::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--base-color, #c72125);
}

/* Four-across on desktop: scale with the viewport so "Los Angeles" stays on one line */
@media (min-width: 992px) {
  .otc-testimonial-card__city {
    font-size: clamp(20px, 2vw, 40px);
  }
}

.otc-testimonial-card__person {
  font-size: 15px;
  font-weight: 600;
  color: var(--secondary-color, #091f1b);
  margin: 0;
}

.otc-testimonial-card__role {
  font-size: 12px;
  font-weight: 700;
  color: #8a8f8d;
  margin: 2px 0 0;
}

.otc-testimonial-card__logo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
}

.otc-testimonial-card__quote {
  font-size: 14px;
  font-style: italic;
  color: #7a7f7d;
  line-height: 1.6;
  margin: 16px 0 20px;
}

.otc-testimonial-card__cta {
  margin-top: auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 2px solid var(--base-color, #c72125);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white, #fff);
  background: var(--base-color, #c72125);
  transition: var(--transition, all .3s ease);
}

.otc-testimonial-card__cta i {
  font-size: 11px;
}

.otc-testimonial-card__cta:hover {
  background: var(--secondary-color, #091f1b);
  border-color: var(--secondary-color, #091f1b);
  color: var(--white, #fff);
}

/* #vision-section .section__header h2 {
  max-width: 640px;
  margin-inline: auto;
} */

/* #difference-image-panels .section__header p { */
#vision-section .section__header p {
  max-width: 1200px;
}

#difference-image-panels .section__header p {
  max-width: 100%;
}

.difference-image-cards a {
  height: 100%
}

/* Hero slide 1 optional background video (toggled by $heroVideoEnabled
   above) — same position/z-index as .banner-two__slider-bg, just with
   overflow hidden so the oversized cover-sized iframe below doesn't spill
   past the slide edges. */
.banner-two__slider-bg--video {
  overflow: hidden;
  background: #000;
}

.banner-two__slider-bg--video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* Local <video> variant: object-fit does the "cover" sizing, so no JS needed */
.banner-two__slider-bg--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Home gallery — dark band between the light testimonial and wealth-gap sections.
   The curved "lens" is made by two huge circles (.cause-two__inner ::before/::after)
   hard-coded to white in update-six.css, so they're recolored here along with the
   section itself. */
.cause-two.gallery-band {
  background-color: var(--secondary-color);
  padding: 80px 0 40px;
}

.cause-two.gallery-band .cause-two__inner::before,
.cause-two.gallery-band .cause-two__inner::after {
  background-color: var(--secondary-color);
}

/* Header sits above the arc circles (z-index 3) and overlaps the dark arc a little
   so there isn't a big empty gap before the photos start. */
.cause-two.gallery-band .gallery-band__header {
  position: relative;
  z-index: 10;
  padding-inline: 16px;
  margin-bottom: -50px;
}

.cause-two.gallery-band .gallery-band__header .sub-title {
  color: var(--base-color);
}

.cause-two.gallery-band .gallery-band__header h2 {
  color: var(--white);
}

/* Caption: larger title, muted subtitle, both readable on the dark arc */
.cause-two.gallery-band .cause-content h4 {
  color: var(--white);
  font-size: clamp(22px, 2.2vw, 32px);
}

.cause-two.gallery-band .cause-content p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 1400px) {
  .testimonial-grid-container {
    max-width: 1400px !important;
  }
}

@media (min-width: 1600px) {
  .testimonial-grid-container {
    max-width: 1550px !important;
  }
}

/*==================================
========== About Page Styles =======
==================================*/

/* ── Founder quote (photo column) ── */
.about-founder-quote {
  position: relative;
  margin: 24px 0 0;
  padding: 28px 28px 24px 32px;
  background: var(--secondary-color);
  border-left: 5px solid var(--base-color);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
}

.about-founder-quote i {
  color: var(--base-color);
  font-size: 22px;
  margin-bottom: 12px;
}

.about-founder-quote blockquote {
  margin: 0 0 14px;
  color: var(--white);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.6;
}

.about-founder-quote figcaption {
  color: #949d9c;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Cause, Not an Event: tinted band + stat tiles ── */
.about-movement {
  background-color: #f8f9fb;
}

.movement-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.movement-stat {
  background: #fff;
  border-radius: 12px;
  border-top: 4px solid var(--base-color);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .07);
  padding: 22px 22px 20px;
}

.movement-stat__value {
  margin: 0 0 8px;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--secondary-color);
}

.movement-stat__value span {
  color: var(--base-color);
}

.movement-stat__value .movement-stat__of {
  font-size: .5em;
  letter-spacing: .02em;
}

.movement-stat__label {
  margin: 0;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.4;
  color: #5b6b68;
}

.movement-stats__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-weight: 700;
  color: var(--base-color);
}

.movement-stats__link:hover {
  color: var(--secondary-color);
}

/* ── Our Story: photo on the right — swap the inset photo and the
           vertical callout to the opposite sides (same approach as Our Work) ── */
.about-story .thumb-bottom {
  inset-inline-end: auto;
  inset-inline-start: 0;
}

.about-story .vertical-text {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/*=============================
========= Cities Styles =======
==============================*/

/* City tiles — reached (photo) and candidate (icon placeholder) share the
       same card shell so the two sections read as one visual system. */
.city-tile {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white, #fff);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.city-tile__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.city-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.city-tile__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary-color, #091f1b);
}

.city-tile__media--placeholder i {
  font-size: 34px;
  color: rgba(255, 255, 255, 0.35);
}

.city-tile__badge {
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
}

.city-tile__badge--reached {
  background: var(--otc-accent-color, #ffc107);
  color: var(--secondary-color, #091f1b);
}

.city-tile__badge--candidate {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white, #fff);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.city-tile__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 22px;
}

.city-tile__city {
  font-size: 18px;
  font-weight: 800;
  color: var(--secondary-color, #091f1b);
  margin: 0 0 4px;
}

.city-tile__date {
  font-size: 13px;
  font-weight: 600;
  color: #8a8f8d;
  margin: 0 0 14px;
}

.city-tile__note {
  font-size: 13px;
  color: #7a7f7d;
  line-height: 1.5;
  margin: 0;
}

.city-tile__link {
  margin-top: auto;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--secondary-color, #091f1b);
}

.city-tile__link i {
  margin-left: 4px;
  font-size: 11px;
}

/* Future Cities map — "ocean" panel behind a static US map image
       (public/assets/img/Map_of_locations.png), which already has its own
       markers baked in for reached cities. */
.cities-map-wrapper {
  margin-top: 40px;
}

.cities-map {
  position: relative;
  width: 100%;
  /* Every child of this box (SVG, caption, pins) is position:absolute
           or a fixed-size SVG, so it has no in-flow content to size itself
           from — aspect-ratio alone was leaving it at 0 height in some
           cases. min-height is the hard floor; aspect-ratio still governs
           the ratio on wide viewports. */
  min-height: 600px;
  aspect-ratio: 16 / 9;
  max-height: 480px;
  background: var(--otc-primary-light);
  border-radius: 20px;
  overflow: hidden;
}

.cities-map__outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 20px;
  box-sizing: border-box;
}

.cities-map__caption {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

.cities-map__pin {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cities-map__pin--reached {
  background: var(--otc-accent-color, #ffc107);
  box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.25);
}

.cities-map__pin--candidate {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.cities-map__legend {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
}

.cities-map__legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--secondary-color, #091f1b);
}

.cities-map__legend-item .cities-map__pin {
  position: static;
  transform: none;
  display: inline-block;
}

/*===============================
====== Testimonial Styles =======
================================*/
.testimonials-grid {
  margin-top: 30px;
}

.testimonials-grid .otc-testimonial-card {
  height: 100%;
}

.testimonial-red-shape {
  margin-top: -4rem;
}

.testimonial.testimonials-grid-page .move-up {
  margin-top: -5rem;
}

.main-pagination button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.main-pagination button:disabled:hover {
  background-color: var(--quaternary-color);
  color: var(--white);
}

/*=============================
========= By the Number Styles =======
==============================*/
/* Closing CTA — main.css has a generic ".section__content h2 { color: var(--secondary-color) }"
       rule that ties in specificity with cta.css's ".cta-section-two h2 { color: white }" rule;
       the generic one loads later and wins, so the headline renders dark instead of white. Same
       tie affects the .sub-title tag. ".numbers-cta" (already on this section) breaks the tie by
       out-specifying both. Overlay is also swapped for a flat, uniform wash — the built-in one is
       a diagonal gradient that stays light on the right side, right where this headline sits. */
.numbers-cta.cta-section-two::before {
  background: rgba(9, 31, 27, 0.72);
}

.numbers-cta .section__content .sub-title {
  color: var(--otc-accent-color);
}

.numbers-cta .section__content h2 {
  color: var(--white);
}

/* This site's theme ships a .counter component (dark bg + odometer numbers), but its
       CSS import is commented out in main.css and never reaches the browser — so the
       headline stats below use a small self-contained treatment instead of that component. */
.numbers-stats {
  background: var(--secondary-color, #091f1b);
  padding: 70px 0;
}

.numbers-stats__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 48px;
}

.numbers-stats__item {
  text-align: center;
  width: 170px;
}

.numbers-stats__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.numbers-stats__icon i {
  font-size: 26px;
  color: var(--otc-accent-color, #ffc107);
}

.numbers-stats__value {
  color: #fff;
  font-weight: 800;
  font-size: 32px;
  line-height: 1.2;
  margin-bottom: 8px;
}

.numbers-stats__label {
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.numbers-category-card {
  height: 100%;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 12px;
  padding: 32px 28px;
}

.numbers-category-card h5 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--secondary-color);
}

/* City-by-city profile cards — replaces the flat comparison table with a
       stacked "photo + story + stats + continuing work" card per city. */
.city-profiles {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 40px;
}

.city-profile-card {
  display: flex;
  flex-wrap: wrap;
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow-secondary);
  overflow: hidden;
}

.city-profile-card__media {
  position: relative;
  flex: 0 0 320px;
  max-width: 320px;
  min-height: 260px;
}

.city-profile-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.city-profile-card__date {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(9, 31, 27, 0.75);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 30px;
}

.city-profile-card__body {
  flex: 1 1 340px;
  padding: 32px 36px;
}

.city-profile-card__city {
  font-size: 24px;
  font-weight: 800;
  color: var(--secondary-color);
  margin-bottom: 18px;
}

.city-profile-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 34px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.city-profile-card__stat {
  display: flex;
  flex-direction: column;
}

.city-profile-card__stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--secondary-color);
  line-height: 1.2;
}

.city-profile-card__stat-label {
  font-size: 13px;
  color: rgba(0, 0, 0, .55);
  font-weight: 600;
}

.city-profile-card__story {
  margin-bottom: 16px;
}

.city-profile-card__continuing {
  margin-bottom: 22px;
}

.city-profile-card__continuing-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--otc-accent-color, #ffc107);
  margin-bottom: 6px;
}

.city-profile-card__continuing-label i {
  font-size: 12px;
  margin-right: 4px;
}

.city-profile-card__placeholder {
  font-style: italic;
  color: rgba(0, 0, 0, .5);
}

.city-profile-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.city-profile-card__links a {
  font-weight: 700;
  font-size: 14px;
  color: var(--secondary-color);
}

.city-profile-card__links a i {
  margin-right: 6px;
  color: var(--otc-accent-color, #ffc107);
}

@media (max-width: 767px) {
  .city-profile-card__media {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.numbers-milestones .help__content-list ul {
  display: block;
}

/*=============================
========= Stories Styles =======
==============================*/
.testimonials-grid {
  margin-top: 30px;
}

.testimonials-grid .otc-testimonial-card {
  height: 100%;
}

.testimonial-red-shape {
  margin-top: -4rem;
}

.testimonial.testimonials-grid-page .move-up {
  margin-top: -5rem;
}

.main-pagination button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.main-pagination button:disabled:hover {
  background-color: var(--quaternary-color);
  color: var(--white);
}

/* Category filter pills — same rounded-pill language as
       .otc-testimonial-card__cta / .main-pagination .active elsewhere on
       this page, just laid out as a horizontal filter bar. */
.story-category-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.story-category-filter__pill {
  padding: 10px 24px;
  border: 2px solid var(--secondary-color, #091f1b);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--secondary-color, #091f1b);
  background: transparent;
  transition: var(--transition, all .3s ease);
}

.story-category-filter__pill:hover {
  background: var(--secondary-color, #091f1b);
  color: var(--white, #fff);
}

.story-category-filter__pill.active {
  background: var(--base-color, #c72125);
  border-color: var(--base-color, #c72125);
  color: var(--white, #fff);
}


/*=============================
========= Donate Styles =======
==============================*/
/* Donate form cleanup — the shared .checkout__form / .donation-form__single /
       .input-single styling this page borrows from reads flat and cramped once
       everything's stacked together; these are spacing + field-appearance overrides
       only, scoped to .donate-us so nothing shared elsewhere is touched. */

.donate-us .community-donation__inner hr {
  margin-block: 40px;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.donate-us .checkout__form .intro {
  margin-bottom: 24px;
}

.donate-us .checkout__form .intro h5 {
  font-size: 1.35rem;
}

.donate-us .donation-form__single {
  margin-bottom: 28px;
}

.donate-us .donation-form__single h5 {
  margin-bottom: 12px;
  font-size: 1rem;
  font-weight: 700;
}

/* Flat gray boxes with no border read as disabled fields — give them a
       real input look with a visible focus state */
.donate-us .checkout__form .input-single input,
.donate-us .checkout__form .input-single textarea,
.donate-us .checkout__form .input-single select {
  background-color: #f7f7f7;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  transition: border-color .2s ease, background-color .2s ease;
}

.donate-us .checkout__form .input-single input:focus,
.donate-us .checkout__form .input-single textarea:focus,
.donate-us .checkout__form .input-single select:focus {
  background-color: #fff;
  border-color: var(--base-color);
  outline: none;
}

.donate-us .checkout__form .input-group {
  margin-bottom: 20px;
  gap: 20px;
}

.donate-us .checkout__form .input-single {
  margin-bottom: 20px;
}

.donate-us .checkout__form .form-cta {
  margin-top: 12px;
}

/* Fund selector was showing two overlapping chevrons — the native OS
       select arrow plus the FA icon layered on top of it. appearance:none
       alone doesn't fully suppress the native arrow in every browser. */
.donate-us #donationFund {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
}

.donate-us #donationFund::-ms-expand {
  display: none;
}

.checkout__form {
  margin-top: 1rem;
}

/*=============================
==== Experience it Styles =======
==============================*/
.numbers-cta.cta-section-two::before {
  background: rgba(9, 31, 27, 0.72);
}

.numbers-cta .section__content .sub-title {
  color: var(--otc-accent-color);
}

.numbers-cta .section__content h2 {
  color: var(--white);
}

.experience-badge-soon {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 2;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(9, 31, 27, 0.82);
  color: var(--white, #fff);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/*=============================
========= ... Styles =======
==============================*/