/* Fixes to the agency's Webflow CSS (loaded after site.css). */

/* Media pages: below 992px the "Why It Matters" column stayed at 30% width (the 991px rule loses on specificity),
   squeezing the text and clipping the button. Full width, as the agency did for phones. */
@media screen and (max-width: 991px) {
  .media_column2.text-wrap-balance { width: 100%; }
}

/* Hero headlines are sized by page width (7.9% / 5.6% of the container) with no upper limit, so on wide
   desktop screens they grew past 130px. Same scaling, capped on desktop only (phones keep their own rules).
   Capped in px because the site's root font size grows on large screens. (Mike, 2026-10-28: "monstrously large") */
@media screen and (min-width: 992px) {
  .heading-style-h1.is-hero { font-size: min(7.9cqw, 84px); text-wrap: balance; }
  .heading-style-h1.is-investor { font-size: min(5.6cqw, 84px); }
}

/* All other headings use rem, and the agency's embed grows the root font size from 16px at 1440 wide to 20px
   at 1920, so on a big desktop "Our Vision" reached 96px and section titles 80px. Capped on desktop only,
   below the 84px hero; tablets and phones keep their own sizes. (Mike, 2026-10-28: "Our Vision", "Our Guiding Belief") */
@media screen and (min-width: 992px) {
  h1, .heading-style-h1 { font-size: min(4.8125rem, 64px); }
  h2, .heading-style-h2 { font-size: min(4rem, 54px); }
  h3, .heading-style-h3 { font-size: min(3rem, 42px); }
  h4, .heading-style-h4 { font-size: min(2.5rem, 34px); }
}

/* Heroes filled the whole screen with the text pinned to the bottom, leaving a large empty band of background
   above it on desktop. Shorter on desktop only: the home hero a little, the inner-page heroes (About, Our Impact,
   Our Focus, Donor) by about half the empty space. (Mike, 2026-10-28) */
@media screen and (min-width: 992px) {
  .hero_content { min-height: 85svh; }
  .hero-about_content { min-height: 75svh; }
}