/*
 * MODERNIZE.CSS
 * Homepage redesign - modern, brand-aligned styling
 * Honors DM Style Guide V2 (January 2024)
 *
 * Brand Colors:
 *   Primary: #F1E8E1 (cream), #5F7775 (sage), #BA5826 (rust), #243746 (navy)
 *   Secondary: #D8DFE1 (light gray), #555025 (olive), #CC9F53 (gold)
 *
 * Brand Fonts:
 *   Public Sans (headings/UI), EB Garamond (editorial), Cabin (supplementary)
 */

/* ============================================
   0. CSS CUSTOM PROPERTIES - BRAND TOKENS
   ============================================ */

:root {
  /* Brand Guide Primary */
  --cream: var(--dm-color-cream);
  --sage: var(--dm-color-sage);
  --rust: var(--dm-color-rust);
  --navy: var(--dm-color-navy);

  /* Brand Guide Secondary */
  --light-gray-brand: var(--dm-color-light-gray);
  --olive: var(--dm-color-olive);
  --gold-brand: var(--dm-color-gold);

  /* Functional */
  --section-gap: clamp(60px, 8vw, 120px);
}

/* ============================================
   1. GLOBAL TYPOGRAPHY UPGRADE
   ============================================ */

/* Public Sans for headings (per brand guide) */
body.home h1,
body.home h2,
body.home h3,
body.home h4,
body.home h5,
body.home h6,
body.home .site-header,
body.home .hamburger-dropdown ul li a,
body.home .main-navigation ul li a {
  font-family: 'Public Sans', var(--cabin), sans-serif;
}

/* EB Garamond for editorial body text */
body.home .home-hero h2,
body.home .movement-section-text,
body.home blockquote,
body.home .home-giving-form-content h3 {
  font-family: 'EB Garamond', var(--garamond), serif;
}


/* ============================================
   2. SCROLL-TRIGGERED ANIMATIONS
   ============================================ */

/* Fade-in-up on scroll */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Apply to homepage sections */
body.home article > * {
  animation: fadeInUp 0.8s ease-out both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

/* Brand cards: exclude internals from scroll-driven animations */
body.home .brand-card,
body.home .brand-card *,
body.home .brand-card-reveal,
body.home .brand-card-reveal * {
  animation-timeline: auto !important;
  animation-range: normal !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.home article > *,
  body.home .brand-card,
  body.home .brand-card * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
  .js-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  }
  .js-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================
   3. HEADER - ELEVATED NAVIGATION
   ============================================ */

body.home header.site-header {
  position: absolute;
  width: 100%;
  z-index: 100;
  background: transparent;
}

/* Match interior page header padding so logo doesn't jump between pages */
body.home .site-header .site-identity {
  padding-top: 15px;
  padding-bottom: 15px;
}

body.home .top-navigation {
  background: transparent;
}

/* Logo + nav in white on dark hero */
body.home .site-header .site-title-wrap img,
body.home .site-header .custom-logo {
  filter: brightness(0) invert(1);
}

body.home .site-header .site-title a,
body.home .main-navigation ul li a {
  color: var(--cream);
}

body.home .main-navigation ul li a:hover,
body.home .main-navigation ul li a:focus {
  color: var(--gold-brand);
}

/* Give button on hero */
body.home .main-navigation ul li.give-button a {
  background: var(--rust);
  color: var(--cream);
  border: none;
  border-radius: 50px;
  padding: 12px 28px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

body.home .main-navigation ul li.give-button a:hover {
  background: var(--gold-brand);
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Vertically align header elements */
body.home .site-header .top-navigation-right {
  display: flex;
  align-items: center;
}

/* Hamburger icon white on hero */
body.home .hamburger-icon,
body.home .hamburger-icon::before,
body.home .hamburger-icon::after {
  background: var(--cream);
}


/* ============================================
   4. HERO SECTION - BOLD & IMMERSIVE
   ============================================ */

body.home .home-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Dark gradient overlay on existing cover image */
body.home .home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(36, 55, 70, 0.92) 0%,
    rgba(95, 119, 117, 0.85) 50%,
    rgba(36, 55, 70, 0.88) 100%
  );
  z-index: 1;
}

/* Subtle chevron pattern overlay */
body.home .home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0 L30 10 L20 20 M0 0 L10 10 L0 20' fill='none' stroke='%23F1E8E1' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 40px 20px;
  z-index: 1;
  pointer-events: none;
}

/* Hero content on top of overlays */
body.home .home-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  text-align: center;
}

/* Hero headline - massive EB Garamond */
body.home .home-hero h2 {
  font-family: 'EB Garamond', serif;
  font-size: clamp(48px, 10vw, 110px);
  line-height: 1.05;
  color: var(--cream);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: 0.2em;
}

/* "culture" italic emphasis */
body.home .home-hero h2:not(.home-hero-mission) em,
body.home .home-hero h2:not(.home-hero-mission) i {
  font-style: italic;
  color: var(--gold-brand);
}

/* Subtitle text */
body.home .home-hero h2:not(.home-hero-mission) > span {
  font-family: 'Public Sans', sans-serif;
  font-size: clamp(14px, 3vw, 22px);
  line-height: 1.5;
  color: var(--cream);
  opacity: 0.85;
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: block;
  margin-top: 20px;
}

body.home .home-hero .home-hero-mission {
  font-size: clamp(42px, 5.2vw, 80px);
  line-height: 1.1;
  margin-bottom: 0.15em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12em;
  letter-spacing: 0.01em;
}

body.home .home-hero .home-hero-mission :is(.hero-mission-prefix, .hero-mission-accent, .hero-mission-rotator, .hero-mission-phrase, .hero-mission-static, .hero-mission-static-line) {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  margin-top: 0;
}

body.home .home-hero .home-hero-mission .hero-mission-prefix {
  display: block;
  white-space: nowrap;
}

body.home .home-hero .home-hero-mission .hero-mission-accent {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-inline: 0.12em;
}

/* Hide the rotator entirely — we animate the static lines in place */
body.home .home-hero .home-hero-mission .hero-mission-rotator {
  display: none;
}

body.home .home-hero .home-hero-mission .hero-mission-static {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  font-size: clamp(30px, 3.2vw, 50px);
  line-height: 1.1;
  color: var(--gold-brand);
  font-style: italic;
}

body.home .home-hero .home-hero-mission .hero-mission-static-line {
  display: inline;
  white-space: nowrap;
}

/* Dot separators between inline phrases */
body.home .home-hero .home-hero-mission .hero-mission-static-line + .hero-mission-static-line::before {
  content: '\00b7';
  margin: 0 0.4em;
  font-style: normal;
  opacity: 0.5;
}

/* With JS available, start hidden so the settled copy never flashes before the sequence begins. */
html.home-hero-sequence-ready body.home .home-hero .home-hero-mission .hero-mission-static-line {
  opacity: 0;
  filter: blur(4px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html.home-hero-sequence-ready body.home .home-hero .home-hero-mission .hero-mission-static-line + .hero-mission-static-line::before {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html.home-hero-sequence-ready body.home .home-hero .home-hero-mission .hero-mission-static-line.is-visible,
html.home-hero-sequence-ready body.home .home-hero .home-hero-mission.is-settled .hero-mission-static-line {
  opacity: 1;
  filter: blur(0);
}

html.home-hero-sequence-ready body.home .home-hero .home-hero-mission .hero-mission-static-line.is-visible::before,
html.home-hero-sequence-ready body.home .home-hero .home-hero-mission.is-settled .hero-mission-static-line::before {
  opacity: 0.5;
}

/* Phrase rotation selectors removed — using in-place reveal instead */

/* Scroll indicator */
body.home .home-hero .wp-block-cover__inner-container::after {
  content: '';
  display: block;
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--cream), transparent);
  margin: 80px auto 0;
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}


/* ============================================
   5. BRAND CARDS SECTION - "GET TO KNOW US"
   ============================================ */

/* Section heading */
body.home .brand-card-columns {
  margin-top: clamp(24px, 4vw, 48px) !important;
  padding-top: clamp(16px, 2vw, 30px);
  padding-bottom: clamp(16px, 2vw, 30px);
}

body.home .brand-card-columns h2 {
  font-family: 'EB Garamond', serif;
  font-size: clamp(28px, 5vw, 48px);
  color: var(--navy);
  font-weight: 400;
  margin-bottom: 20px;
  margin-top: 0;
}

/* Card hover lift effect */
body.home .brand-card {
  cursor: pointer;
}

body.home .brand-card:not(.active):hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(36, 55, 70, 0.2);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ============================================
   6. MOVEMENT/VIDEO SECTION - COLOR BLOCKED
   ============================================ */

/* This targets the third section (movement/video) */
body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) {
  position: relative;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
  max-width: 100vw;
  background: var(--navy);
  padding: clamp(60px, 10vw, 140px) clamp(20px, 5vw, 80px);
}

/* Text inside movement section */
body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) h2,
body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) h3,
body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) .wp-block-heading {
  font-family: 'EB Garamond', serif;
  color: var(--gold-brand);
  font-weight: 400;
  font-size: clamp(28px, 5vw, 44px);
}

body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) p {
  color: var(--cream);
  font-family: 'Public Sans', sans-serif;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.7;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
}

body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) p em,
body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) p i {
  color: var(--cream);
  font-family: 'EB Garamond', serif;
  font-size: 1.15em;
  opacity: 1;
}

/* Chevron pattern accent on movement section */
body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rust), var(--gold-brand), var(--rust));
}

/* Accent stripe at bottom of movement section */
body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rust), var(--gold-brand), var(--sage));
  z-index: 1;
}

/* Logo inside this section */
body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) .wp-block-image img,
body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) figure img {
  filter: brightness(0) invert(1);
  opacity: 0.4;
  max-width: 280px;
}

/* Video embed styling — slightly narrower than full section, centered */
body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) .gb-block-layout-column-inner > div:first-child {
  max-width: 1060px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  padding: 0 !important;
  aspect-ratio: 16 / 9;
}


/* ============================================
   7. DONATION SECTION - WARM & COMPELLING
   ============================================ */

body.home .home-giving-form {
  position: relative;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: 0 !important;
  width: 100vw;
  max-width: 100vw;
  overflow: hidden;
}

/* Close the gap between movement section and donation section */
body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) {
  margin-bottom: 0 !important;
  padding-bottom: clamp(60px, 10vw, 140px);
}

/* Overlay on giving form background */
body.home .home-giving-form::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(36, 55, 70, 0.95) 0%,
    rgba(36, 55, 70, 0.95) 45%,
    rgba(36, 55, 70, 0.3) 100%
  );
  z-index: 1;
  pointer-events: none;
}

body.home .home-giving-form > * {
  position: relative;
  z-index: 2;
}

/* Giving form heading */
body.home .home-giving-form-content h3 {
  font-family: 'EB Garamond', serif;
  color: var(--cream);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.15;
}

body.home .home-giving-form-content h3 em,
body.home .home-giving-form-content h3 i {
  color: var(--gold-brand);
  font-style: italic;
}

@media (min-width: 1001px) {
  body.home .brand-card-columns h2 {
    font-size: clamp(22.5px, 4vw, 38.5px);
  }

  body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) h2,
  body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) h3,
  body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) .wp-block-heading {
    font-size: clamp(22.5px, 4vw, 35px);
  }

  body.home .home-giving-form-content h3 {
    font-size: clamp(29px, 4.8vw, 45px);
  }
}

/* Donation form card */
body.home .custom-homepage-donation-form_wrapper {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(241, 232, 225, 0.12);
  border-radius: 20px;
  padding: 30px;
}

/* Hide radio dots in the homepage donation form only */
body.home .gform_wrapper li,
body.home .gform_wrapper ul,
body.home .gform_wrapper ol,
body.home #gform_1 li,
body.home #gform_1 ul {
  list-style: none !important;
  list-style-type: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

body.home .gform_wrapper li::marker,
body.home #gform_1 li::marker {
  content: '' !important;
  display: none !important;
}

body.home .gform_wrapper li::before,
body.home #gform_1 li::before {
  display: none !important;
  content: none !important;
}

/* Also hide actual radio input circles */
body.home .gform_wrapper input[type="radio"],
body.home #gform_1 input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Give type buttons - more modern */
body.home #gform_1 .homepage-button-give label {
  border-radius: 8px;
  transition: all 0.3s ease;
}

body.home #gform_1 .homepage-button-amount label {
  border-radius: 8px;
  transition: all 0.3s ease;
}

body.home #gform_1 .homepage-button-amount label:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(204, 159, 83, 0.4);
}

/* Submit button */
body.home .custom-homepage-donation-form_wrapper #gform_submit_button_1 {
  background: var(--rust);
  border: none;
  border-radius: 60px;
  font-family: 'Public Sans', sans-serif;
  font-weight: 700;
  transition: all 0.3s ease;
}

body.home .custom-homepage-donation-form_wrapper #gform_submit_button_1:hover {
  background: var(--gold-brand);
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(186, 88, 38, 0.4);
}


/* ============================================
   8. FOOTER - MODERN & WARM
   ============================================ */

footer.site-footer {
  background: var(--navy);
  color: var(--cream);
  padding-top: 60px;
  padding-bottom: 0;
  position: relative;
}

/* Top accent stripe */
footer.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rust), var(--gold-brand), var(--sage));
}

footer.site-footer .footer-content {
  padding-bottom: 50px;
}

/* Footer text styling */
footer.site-footer,
footer.site-footer ul li,
footer.site-footer a {
  color: rgba(241, 232, 225, 0.8);
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
}

footer.site-footer b,
footer.site-footer strong {
  color: var(--cream);
  font-weight: 700;
}

footer.site-footer a:hover,
footer.site-footer a:focus {
  color: var(--gold-brand);
}

/* Footer logo - lighter */
footer.site-footer .footer-logo img {
  filter: brightness(0) invert(1);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

footer.site-footer .footer-logo img:hover {
  opacity: 0.8;
}

/* Accredited badges */
footer.site-footer .accredited-list img {
  filter: grayscale(100%) brightness(1.5);
  opacity: 0.5;
  transition: all 0.3s ease;
  max-height: 50px;
}

footer.site-footer .accredited-list a:hover img {
  filter: none;
  opacity: 1;
}

/* Footer bottom bar */
footer.site-footer .footer-bottom {
  background: rgba(0, 0, 0, 0.15);
  padding: 20px 0;
  margin-top: 20px;
}

footer.site-footer .footer-bottom .site-info {
  font-size: 13px;
  opacity: 0.6;
}

/* Footer nav links */
footer.site-footer .footer-navigation ul {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

footer.site-footer .footer-navigation ul li a {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}

footer.site-footer .footer-navigation ul li a:hover {
  border-bottom-color: var(--gold-brand);
}

/* Footer widget headings */
footer.site-footer .footer-widgets .widget-title {
  color: var(--gold-brand);
  font-family: 'Public Sans', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}


/* ============================================
   9. GENERAL HOMEPAGE ENHANCEMENTS
   ============================================ */

/* Smooth scroll behavior */
@media (hover: hover) and (pointer: fine) {
  html {
    scroll-behavior: smooth;
  }
}

/* Remove gaps between full-bleed sections */
body.home #content > article > * + * {
  margin-top: 0;
}

body.home #page,
body.home #content,
body.home .site-main,
body.home article {
  overflow-x: hidden;
}

/* Links throughout homepage */
body.home a {
  transition: color 0.3s ease;
}

/* Selection color */
body.home ::selection {
  background: var(--rust);
  color: var(--cream);
}

/* Subtle hover on all interactive cards/buttons */
body.home .wp-block-button__link {
  font-family: 'Public Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 50px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body.home .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}


/* ============================================
   10. RESPONSIVE — TABLET (max-width: 1000px)
   ============================================ */

@media only screen and (max-width: 1000px) {

  /* Hero */
  body.home .home-hero {
    min-height: 90vh;
    min-height: 90svh;
  }

  body.home .home-hero .wp-block-cover__inner-container {
    padding: 0 20px;
  }

  /* Header nav — keep Give + hamburger visible */
  body.home .site-header .site-identity {
    padding: 20px 0;
  }

  /* Movement section */
  body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) {
    padding: 60px 24px;
  }

  body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) p {
    font-size: 16px;
    padding: 0 10px;
  }

  /* Donation section */
  body.home .home-giving-form-content h3 {
    font-size: clamp(28px, 6vw, 44px);
  }

  /* Brand cards — allow horizontal scroll on tablet */
  body.home .brand-card-columns {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* Footer */
  footer.site-footer .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
  }

  footer.site-footer .footer-left {
    flex-direction: column;
    align-items: center;
  }

  footer.site-footer .footer-address > * {
    margin-left: 0;
  }

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

  footer.site-footer .footer-widgets {
    text-align: center;
  }
}


/* ============================================
   11. RESPONSIVE — MOBILE (max-width: 600px)
   ============================================ */

@media only screen and (max-width: 600px) {

  /* --- HERO --- */
  body.home .home-hero {
    min-height: 85vh;
    min-height: 85svh;
  }

  body.home .home-hero h2 {
    font-size: clamp(38px, 13.2vw, 67px);
    line-height: 1.06;
  }

  body.home .home-hero h2:not(.home-hero-mission) > span {
    font-size: clamp(11px, 3.2vw, 15px);
    letter-spacing: 0.08em;
    margin-top: 16px;
  }

  body.home .home-hero .home-hero-mission {
    font-size: clamp(47px, 12.7vw, 78px);
    line-height: 1.05;
    gap: 0.18em;
  }

  body.home .home-hero .home-hero-mission .hero-mission-prefix {
    white-space: normal;
    text-wrap: balance;
  }

  /* Stack phrases vertically on mobile */
  body.home .home-hero .home-hero-mission .hero-mission-static {
    flex-direction: column;
    align-items: center;
    font-size: clamp(29px, 7.2vw, 46px);
    line-height: 1.12;
    gap: 0.08em;
  }

  body.home .home-hero .home-hero-mission .hero-mission-static-line + .hero-mission-static-line::before {
    display: none;
  }

  body.home .home-hero .home-hero-mission .hero-mission-static-line {
    white-space: normal;
    text-wrap: balance;
  }

  body.home .home-hero .wp-block-cover__inner-container {
    padding: 0 10px;
  }

  body.home .home-hero .wp-block-cover__inner-container::after {
    height: 35px;
    margin-top: 24px;
  }

  /* --- HEADER --- */
  body.home .site-header .site-title-wrap {
    max-width: 180px;
  }

  body.home .main-navigation ul li.give-button a {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
  }

  /* Hamburger touch target */
  body.home .hamburger-toggle {
    width: 48px;
    height: 48px;
  }

  /* --- BRAND CARDS --- */
  body.home .brand-card-columns {
    margin-top: 20px !important;
    margin-bottom: 12px !important;
    padding-top: 8px;
    padding-bottom: 12px;
  }

  body.home .brand-card-columns h2 {
    font-size: clamp(24px, 7vw, 36px);
    margin-bottom: 24px;
    padding: 0 16px;
  }

  body.home .brand-cards {
    margin-bottom: 0 !important;
  }

  /* Disable hover lift on touch — only hover devices */
  body.home .brand-card:not(.active):hover {
    transform: none;
    box-shadow: none;
  }

  /* Card tap target — ensure + button is easy to hit */
  body.home .card-open img {
    min-width: 48px;
    min-height: 48px;
  }

  /* --- MOVEMENT SECTION --- */
  body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) {
    padding: 40px 16px;
  }

  body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) h2,
  body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) h3,
  body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) .wp-block-heading {
    font-size: clamp(24px, 7vw, 34px);
  }

  body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) p {
    font-size: 15px;
    line-height: 1.65;
    padding: 0 4px;
  }

  body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) .wp-block-image img,
  body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) figure img {
    max-width: 200px;
  }

  /* Video embed — full width, less border radius */
  body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) .wp-block-embed,
  body.home article > .wp-block-genesis-blocks-gb-columns:nth-child(3) iframe {
    border-radius: 8px;
  }

  /* --- DONATION SECTION --- */
  body.home .home-giving-form {
    padding: 0 !important;
  }

  body.home .home-giving-form.gb-layout-columns-2 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  body.home .home-giving-form > .gb-layout-column-wrap.gb-is-responsive-column {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  body.home .home-giving-form::before {
    background: linear-gradient(
      180deg,
      rgba(36, 55, 70, 0.95) 0%,
      rgba(36, 55, 70, 0.9) 100%
    );
  }

  body.home .home-giving-form-content h3 {
    font-size: clamp(28px, 8vw, 40px);
    text-align: center;
    padding: 0 16px;
  }

  body.home .custom-homepage-donation-form_wrapper {
    padding: 16px 8px;
    border-radius: 16px;
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }

  body.home .home-giving-form .home-giving-form-form-column {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  body.home .home-giving-form .home-giving-form-form-column > .gb-block-layout-column-inner {
    width: 100%;
    max-width: none;
    padding: 0 !important;
  }

  body.home #give.wp-block-group,
  body.home #give.wp-block-group > .wp-block-group__inner-container {
    width: 100%;
    max-width: none;
  }

  body.home .custom-homepage-donation-form_wrapper .dm-raisedonors-shell,
  body.home .custom-homepage-donation-form_wrapper .dm-raisedonors-shell__skeleton {
    width: 100%;
    max-width: none;
  }

  /* Donation buttons — larger touch targets */
  body.home #gform_1 :is(.homepage-button-give, .homepage-button-amount) label {
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 1.1rem;
    border-radius: 8px;
  }

  body.home .custom-homepage-donation-form_wrapper #gform_submit_button_1 {
    padding: 16px;
    font-size: 1.1rem;
  }

  /* --- FOOTER --- */
  footer.site-footer {
    padding-top: 40px;
  }

  footer.site-footer .footer-content {
    padding: 0 20px 30px;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 28px;
  }

  footer.site-footer .footer-left {
    flex-direction: column;
    align-items: flex-start;
    width: min(100%, 420px);
    margin: 0 auto;
    gap: 16px;
  }

  footer.site-footer .footer-address {
    width: 100%;
    text-align: left;
  }

  footer.site-footer .footer-address > * {
    margin-left: 0;
  }

  footer.site-footer .footer-address ul {
    padding: 0;
    margin: 0 0 16px;
  }

  footer.site-footer .footer-logo img {
    max-width: 56px;
    margin-bottom: 0;
  }

  footer.site-footer .accredited-list {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 16px;
    gap: 14px;
  }

  footer.site-footer .accredited-list img {
    max-height: 52px;
  }

  footer.site-footer .footer-widgets {
    display: grid;
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    width: min(100%, 420px);
    margin: 0 auto;
  }

  footer.site-footer .footer-widgets .footer-column {
    width: 100%;
    margin-right: 0;
  }

  footer.site-footer .footer-widgets .footer-column:nth-child(3) {
    display: none;
  }

  footer.site-footer .footer-widgets .wp-block-buttons {
    margin: 0;
    width: auto;
  }

  footer.site-footer .footer-widgets .wp-block-button,
  footer.site-footer .footer-widgets .wp-block-button.has-custom-width {
    width: auto !important;
    max-width: none;
  }

  footer.site-footer .footer-widgets .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-height: 48px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.14em;
    border-radius: 999px;
  }

  footer.site-footer .footer-widgets .wp-block-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    margin: 0;
    padding: 0;
    width: min(100%, 320px);
  }

  footer.site-footer .footer-widgets .wp-block-list li {
    margin: 0;
    line-height: 1;
  }

  footer.site-footer .footer-widgets .wp-block-list a {
    display: block;
    width: auto;
    min-height: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  footer.site-footer .footer-navigation ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    justify-content: stretch;
    width: min(100%, 420px);
    margin: 14px auto 0;
    padding: 0;
  }

  footer.site-footer .footer-navigation ul li a {
    justify-content: flex-start;
    width: 100%;
    min-height: 40px;
    font-size: 13px;
  }

  footer.site-footer .footer-bottom {
    padding: 18px 20px 20px;
  }

  footer.site-footer .footer-bottom .site-info {
    font-size: 12px;
  }

  /* --- GENERAL MOBILE --- */

  /* Body text — 16px base for readability */
  body.home p,
  body.home li {
    font-size: 16px;
  }

  /* Prevent horizontal overflow */
  body.home #page,
  body.home #content,
  body.home article {
    overflow-x: hidden;
  }

  /* Disable hover effects on touch devices */
  body.home .wp-block-button__link:hover {
    transform: none;
    box-shadow: none;
  }

  /* Scroll animations — simpler on mobile for performance */
  body.home article > * {
    animation-duration: 0.5s;
  }
}


/* ============================================
   12. RESPONSIVE — SMALL PHONES (max-width: 375px)
   ============================================ */

@media only screen and (max-width: 375px) {
  body.home .home-hero h2 {
    font-size: 38px;
    line-height: 1.08;
  }

  body.home .home-hero h2:not(.home-hero-mission) > span {
    font-size: 11px;
  }

  body.home .home-hero .home-hero-mission {
    font-size: 42px;
  }

  body.home .home-hero .home-hero-mission .hero-mission-static {
    font-size: 23px;
  }

  body.home .brand-card-columns h2 {
    font-size: 24px;
  }

  body.home .custom-homepage-donation-form_wrapper {
    width: 95%;
    padding: 16px 12px;
  }

  body.home #gform_1 :is(.homepage-button-give, .homepage-button-amount) label {
    font-size: 0.95rem;
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home .home-hero .home-hero-mission .hero-mission-static-line {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ============================================
   13. TOUCH DEVICE REFINEMENTS
   ============================================ */

/* Only apply hover effects on devices with hover capability */
@media (hover: hover) and (pointer: fine) {
  body.home .brand-card:not(.active):hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(36, 55, 70, 0.2);
  }

  body.home .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  }
}

/* Touch devices — no hover effects, just active/tap states */
@media (hover: none) {
  body.home .brand-card:not(.active):hover {
    transform: none;
    box-shadow: none;
  }

  body.home .wp-block-button__link:hover {
    transform: none;
    box-shadow: none;
  }

  /* Active tap feedback */
  body.home .brand-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  body.home .wp-block-button__link:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }
}