/* ============================================================
   Give and Go Missions — Responsive / Mobile Stylesheet
   Loaded after page-specific styles for clean overrides
   ============================================================ */

/* ── PERFORMANCE OPTIMIZATION ── */
/* Reduce paint operations on mobile */
html { scroll-behavior: auto; }
body { -webkit-font-smoothing: subpixel-antialiased; }

/* ── Logo switching ── */
.logo-mobile-wrap { display: none; }
.logo-full { display: block; }
.logo-icon { display: none; }
.logo-mobile-name { display: none; }

/* ── Hamburger button (hidden on desktop) ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #38393A;
  border-radius: 2px;
  transition: all 0.25s;
}

/* ── Mobile nav overlay ── */
.nav-mobile-open .nav-links {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  position: fixed;
  top: 62px; left: 0; right: 0;
  width: 100vw;
  background: white;
  padding: 8px 0 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 999;
  gap: 0;
}
.nav-mobile-open .nav-links a,
.nav-mobile-open .nav-links a.active {
  display: block !important;
  font-size: 17px;
  padding: 16px 0;
  width: 100%;
  text-align: center !important;
  border-bottom: 1px solid #f0f0f0;
  color: #555 !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
}
.nav-mobile-open .nav-links a:last-child {
  border-bottom: none;
}

/* ── Tablet: 1024px ── */
@media (max-width: 1024px) {
  nav { padding: 0 32px; }
  section { padding: 64px 40px; }
  .contact-wrap, .trip-inner, .home-goal-inner { padding: 56px 40px; }
  .shop-wrap { padding: 56px 40px; }
  .content-wrap { padding: 56px 40px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  
  /* Mobile Moses photo positioning */
  .mission-photo { 
    background-position: center 15% !important;
  }
}

/* ── Mobile: 768px ── */
@media (max-width: 768px) {

  /* Nav */
  nav {
    padding: 0 12px;
    position: relative;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    gap: 0;
  }
  .nav-links {
    display: none;
  }
  .nav-hamburger {
    display: flex;
    position: static;
    transform: none;
    align-self: center;
    order: 2;
    margin: 0 auto;
  }
  .nav-give {
    padding: 9px 16px;
    font-size: 12px;
    align-self: center;
    white-space: nowrap;
    flex-shrink: 0;
    order: 3;
    margin-left: auto;
  }
  /* Nav logo — full logo on mobile (smaller) on left */
  .nav-logo { 
    overflow: visible; 
    display: flex; 
    align-items: center;
    order: 1;
    margin-right: auto;
  }
  .logo-full { 
    display: block !important; 
    height: 36px !important;
    width: auto !important;
  }
  .logo-mobile-wrap { display: none !important; }
  .logo-icon { display: none !important; }
  .logo-mobile-name { display: none !important; }

  /* Nav height — accommodate full logo */
  nav { height: 64px !important; }
  /* Footer logo */
  .footer-logo { overflow: hidden; }
  .footer-logo img { height: 36px; width: auto; display: block; opacity: 0.95; }

  /* Sections */
  section { 
    padding: 32px 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  /* All text elements within sections must respect width */
  section span,
  section a,
  section strong,
  section em {
    display: inline !important;
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .contact-wrap { padding: 32px 20px; gap: 28px; }
  .shop-wrap { padding: 32px 20px; }
  .content-wrap { padding: 32px 20px; }
  .faq { padding: 32px 20px; }
  .bottom-cta { 
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 32px 20px !important;
    flex-direction: column !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }
  .merch-strip { padding: 20px 20px; flex-direction: column; gap: 12px; text-align: center; }

  /* Page headers */
  .page-header { 
    padding: 32px 20px 24px !important; 
    text-align: center !important;
  }
  .page-header { text-align: center !important; }
  .page-header-tag { text-align: center !important; }
  .page-header h1, .shop-header h1 { font-size: 36px; text-align: center !important; }
  .page-header p, .shop-header p { font-size: 15px; text-align: center !important; max-width: 100% !important; }
  .page-header-image { padding: 0 !important; margin: 0 auto !important; overflow: hidden !important; width: 100vw !important; margin-left: calc(-50vw + 50%) !important; display: flex !important; justify-content: center !important; }
  .page-header-image img { margin: 0 auto !important; padding: 0 !important; max-width: 100% !important; height: 280px !important; display: block !important; }
  .page-header-img { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 280px !important; grid-column: auto !important; grid-row: auto !important; object-fit: contain !important; object-position: center !important; transform: scale(1) !important; touch-action: none !important; pointer-events: none !important; }
  .shop-header { padding: 32px 20px 24px; }
  
  /* OUR MISSION PAGE SPECIFIC FIXES */
  .convictions { padding: 32px 20px !important; }
  .convictions-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .conviction-item { padding: 16px 0 !important; }
  
  .how-we-work { padding: 32px 20px !important; }
  .work-items { grid-template-columns: 1fr !important; gap: 16px !important; }
  .work-item { padding: 16px 0 !important; }

  /* Our Mission values grid */
  .values-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; }
  
  /* Our Mission sections with large padding - reduce for mobile */
  div[style*="padding: 80px 60px"] { padding: 32px 20px !important; }
  section[style*="padding: 72px 60px"] { padding: 32px 20px !important; }

  /* Typography */
  h1, h2, h3, h4, h5, h6 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  h2.display { font-size: 30px !important; line-height: 1.1 !important; }
  h1 { font-size: 36px !important; }

  /* ── INDEX: Hero ── */
  .hero {
    min-height: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding-bottom: 0;
  }
  /* Hero photo on mobile - clean display */
  .hero-photo {
    left: 0 !important;
    background-position: center center !important;
    opacity: 1 !important;
  }
  .hero-photo-overlay {
    background: linear-gradient(to right, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0) 80%) !important;
    opacity: 1 !important;
  }
  .hero-content {
    padding: 80px 20px 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .hero-eyebrow {
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
    padding: 4px 12px !important;
    white-space: nowrap !important;
  }
  .hero h1 {
    font-size: 36px !important;
    line-height: 1.1 !important;
    margin-bottom: 10px !important;
  }
  /* Hide br only on index — span.give/go use display:block for line breaks there */
  .page-index .hero h1 br { display: none !important; }
  .hero h1 span.give,
  .hero h1 span.go {
    display: block !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
  /* Hide subtitle and long paragraph on mobile — headline + button is enough */
  .hero .hero-sub { display: none !important; }
  .hero p { display: none !important; }
  .hero-btns, .hero-ctas, .cta-btns {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    width: 100%;
  }
  .hero-ctas .btn-coral {
    display: inline-block !important;
    width: auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }
  .hero-ctas .btn-ghost {
    width: auto !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: rgba(255,255,255,0.8) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none;
  }
  .hero-trust {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 16px !important;
    padding: 16px 20px !important;
    bottom: auto !important;
    left: auto !important;
    background: rgba(0,0,0,0.2);
  }
  .trust-item { font-size: 11px; }
  .trust-divider { display: none !important; }

  /* INDEX: Impact strip */
  #impact-strip { padding: 24px 20px !important; }
  #impact-strip > div { grid-template-columns: 1fr 1fr !important; gap: 20px 12px !important; }
  .impact-stat .count-num { font-size: 38px !important; }

  /* INDEX: Mission section */
  section.mission {
    padding: 24px 20px !important;
  }
  .mission-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .mission-photo { 
    height: 340px !important;
    background-position: center 15% !important;
  }

  /* INDEX: Uganda card */
  .uganda-card { margin: 0 !important; }

  /* INDEX: Trip cards — swipeable carousel */
  .trips { 
    padding: 16px 0 24px 0 !important; 
    overflow: visible !important;
  }
  .trips-header { padding: 0 20px 8px !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
  .trips-grid {
    display: flex !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 16px !important;
    padding: 0 20px 20px 20px !important;
    scrollbar-width: none !important;
    scroll-behavior: auto !important;
  }
  .trips-grid::-webkit-scrollbar { display: none !important; }
  .trips-grid > a,
  .trips-grid > div {
    flex: 0 0 90vw !important;
    min-width: 90vw !important;
    max-width: 90vw !important;
    scroll-snap-align: start !important;
  }
  .trips-grid > a {
    text-decoration: none;
    display: block;
  }
  
  /* ── Trip cards: unified mobile layout — all same height ── */
  .trip-card-main,
  .trip-card-side,
  .trip-card-adventure {
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
  }

  /* Inner content div — distribute space properly */
  .trip-card-main > div:first-child,
  .trip-card-side > div:first-child,
  .trip-card-adventure > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Trip paragraphs — all same height */
  .trip-card-main p,
  .trip-card-side p,
  .trip-card-adventure p {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  /* Trip CTA — force to bottom */
  .trip-card-main .trip-cta,
  .trip-card-side .trip-cta,
  .trip-card-adventure .trip-cta {
    margin-top: auto !important;
    flex-shrink: 0 !important;
    padding-top: 12px !important;
  }

  /* Flag bubble — same on all three */
  .trip-card-main .trip-flag,
  .trip-card-side .trip-flag,
  .trip-card-adventure .trip-flag {
    background: rgba(255,255,255,0.15) !important;
    color: rgba(255,255,255,0.85) !important;
    margin: 0 !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    height: auto !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
  }

  /* Heading — all three cards */
  .trip-card-main h3,
  .trip-card-side h3,
  .trip-card-adventure h3 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    height: auto !important;
  }

  /* Paragraph — all three cards */
  .trip-card-main p,
  .trip-card-side p,
  .trip-card-adventure p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hide Mexico's extra date line */
  .trip-card-mexico p:nth-child(4) { display: none !important; }

  /* Uganda CTA */
  .trip-mobile-cta {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.78) !important;
    margin-top: auto !important;
    padding-top: 12px !important;
  }

  /* Mexico CTA — block + left-aligned */
  .arrow-desktop { display: none !important; }
  .arrow-mobile { display: block !important; color: rgba(255,255,255,0.78) !important; }
  .trip-arrow {
    display: block !important;
    text-align: left !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
    padding-top: 12px !important;
    background: transparent !important;
    margin-top: auto !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.78) !important;
  }

  /* Adventure CTA */
  .coming-badge {
    display: block !important;
    width: fit-content !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.38) !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    padding-top: 12px !important;
    margin-top: auto !important;
  }

  /* INDEX: Impact — stack cleanly */
  .impact { padding: 24px 20px !important; }
  .impact-inner { display: block !important; }
  
  /* INDEX: Impact bars — stack vertically on mobile */
  .impact-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 12px !important;
  }
  .impact-stat { padding-top: 16px !important; }
  .impact-stat-num { font-size: 40px !important; }
  .impact-stat-label { font-size: 13px !important; }

  /* ── OUR STORY ── */
  .origin-grid, .story-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .origin-photo, .story-photo {
    height: 240px !important;
    order: -1;
  }
  .stats-row {
    flex-wrap: wrap;
    gap: 12px;
  }
  .stat-item { min-width: calc(50% - 6px); }
  .team-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .vision-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .cta-row {
    flex-direction: column;
    gap: 10px;
  }

  /* ── UGANDA ── */
  .hero-content {
    grid-template-columns: 1fr !important;
  }
  .hero-meta {
    display: none;
  }
  .story-grid { grid-template-columns: 1fr !important; }
  .happening-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .orphanage-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .trip-details-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .trip-what {
    border-radius: 0 !important;
    padding: 20px 20px !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
  }
  .go-cta {
    flex-direction: column;
    gap: 14px;
  }

  /* ── MEXICO ── */
  .how-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .how-photo { height: 240px !important; order: -1; }
  .build-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .home-goal-inner { grid-template-columns: 1fr !important; gap: 24px !important; padding: 32px 20px !important; }
  .goal-raised { font-size: 36px !important; }

  /* ── GO PAGE: Full-bleed trip sections on mobile ── */
  .cards-section {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 20px 32px 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .cards-section-label {
    padding: 0 0 12px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #38393A !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  .cards-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  /* Mobile: Remove anchor wrapping - just style trip-card directly */
  .card-link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
  }
  
  .trip-card {
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  
  .trip-card:last-child { border-bottom: none !important; }
  
  .trip-card .card-photo {
    order: 1 !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }
  
  .trip-card .card-body {
    order: 2 !important;
    width: 100% !important;
    padding: 28px 24px !important;
  }

  /* Tall photo strip */
  .card-photo {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    width: 100% !important;
    border-radius: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    position: relative !important;
    display: block !important;
  }
  
  /* Ensure all photo variants are 200px on mobile */
  .photo-uganda,
  .photo-mexico,
  .photo-adventure {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
  }

  .status-badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    font-size: 9px !important;
    padding: 4px 10px !important;
    z-index: 10 !important;
  }

  .date-badge {
    position: absolute !important;
    bottom: 12px !important;
    left: 12px !important;
    font-size: 10px !important;
    padding: 6px 10px !important;
    z-index: 10 !important;
  }

  /* Body: more room, readable - FLEX CONTAINER MUST CONSTRAIN CHILDREN */
  .card-body {
    padding: 28px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    background: white !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: unset !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }
  
  /* Flex children inside card-body must not overflow */
  .card-body > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .card-location {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    font-size: 10px !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #999 !important;
    flex-basis: 100% !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
  }

  .card-body h2 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: unset !important;
    font-size: 18px !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    color: #38393A !important;
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    clear: both !important;
    overflow: hidden !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .card-body p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: unset !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    color: #777 !important;
    clear: both !important;
    overflow: hidden !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .card-divider {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
  }

  .card-details {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
  }

  .card-cta {
    font-size: 14px !important;
    padding: 14px 16px !important;
    margin-top: auto !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
  }
  .card-body h2 {
    font-size: 22px !important;
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
  }
  .card-body p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
  }

  /* Detail chips: wrap cleanly */
  .card-details {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
  }
  .card-detail {
    font-size: 12px !important;
    padding: 5px 10px !important;
    background: #f5f5f5 !important;
    border-radius: 50px !important;
  }

  /* Full-width CTA button */
  .card-cta {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 14px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }
  .bottom-strip {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex-direction: column;
    padding: 40px 20px;
    gap: 20px;
    box-sizing: border-box !important;
  }
  .bottom-cta {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── GIVE PAGE ── */
  .fund-tabs {
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding: 14px 16px !important;
    justify-content: flex-start !important;
  }
  .fund-tab { padding: 9px 16px !important; font-size: 12px !important; }

  /* Collapse the two-column donate layout */
  .donate-area {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column-reverse !important;
  }

  /* Form (donation box) FIRST on mobile — primary action up top */
  .donate-area > div:not(.impact-panel) {
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }

  /* Impact details BELOW — separated by a line */
  .donate-area > .impact-panel {
    padding: 24px 20px 32px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-top: 1px solid #f0f0f0 !important;
  }

  /* Impact panel internals */
  .impact-panel h2 { font-size: 24px !important; }
  .impact-photo { display: none !important; }
  
  /* Mobile donation form display — override inline styles */
  .uganda-form-desktop { display: none !important; }
  .uganda-form-mobile { display: block !important; padding: 0 !important; }
  .mexico-form-desktop { display: none !important; }
  .mexico-form-mobile { display: block !important; padding: 0 !important; }
  .general-form-desktop { display: none !important; }
  .general-form-mobile { display: block !important; padding: 0 !important; }

  /* Tier rows — prevent overflow */
  .tier-row {
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }
  .tier-amount {
    font-size: 16px !important;
    min-width: 48px !important;
  }
  .tier-text strong { font-size: 13px !important; }
  .tier-text span { font-size: 12px !important; }

  /* Prevent iOS auto-zoom on input tap — must be 16px+ */
  .field input,
  .field-full input,
  .custom-input,
  input[type="text"],
  input[type="email"],
  input[type="number"] {
    font-size: 16px !important;
  }

  /* Amount buttons — keep 3-wide but shrink */
  .amount-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .amount-btn { padding: 10px 4px !important; }
  .amount-val { font-size: 15px !important; }

  /* Field row collapses to single column */
  .field-row { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Give button */
  .give-btn { font-size: 15px !important; padding: 15px !important; }

  /* ── CONTACT PAGE ── */
  .contact-wrap {
    grid-template-columns: 1fr !important;
    padding: 32px 20px !important;
  }
  .trip-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 32px 20px !important;
  }
  .trip-section { 
    padding: 24px 0 !important;
  }
  .form-row { grid-template-columns: 1fr !important; }
  .trip-destinations { flex-direction: column; }
  
  /* Trip form enhancements on mobile */
  .trip-form-wrap {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    padding: 24px 16px !important;
    margin-top: 16px !important;
  }
  
  .trip-form-wrap h3 {
    font-size: 22px !important;
    margin-bottom: 8px !important;
    color: white !important;
  }
  
  .trip-form-wrap > p {
    font-size: 13px !important;
    margin-bottom: 14px !important;
    color: rgba(255,255,255,0.5) !important;
  }
  
  .trip-form-wrap .form-group {
    margin-bottom: 14px !important;
  }
  
  .trip-form-wrap .form-group label {
    font-size: 12px !important;
    margin-bottom: 8px !important;
    color: rgba(255,255,255,0.6) !important;
    display: block !important;
  }
  
  .trip-form-wrap .form-group input,
  .trip-form-wrap .form-group select {
    width: 100% !important;
    padding: 12px !important;
    font-size: 16px !important;
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 8px !important;
    color: #333 !important;
    box-sizing: border-box !important;
  }
  
  .trip-form-wrap .form-group select {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%23333' d='M1 1l6 6 6-6' stroke='%23333' stroke-width='1'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 40px !important;
  }
  
  .trip-form-wrap .submit-btn {
    width: 100% !important;
    padding: 13px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-top: 8px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    background: var(--teal) !important;
    color: #1e3828 !important;
    box-shadow: 0 8px 24px rgba(108, 196, 194, 0.35) !important;
    transition: all 0.2s !important;
  }
  
  .trip-form-wrap .submit-btn:active {
    opacity: 0.8 !important;
  }

  /* ── UGANDA PAGE ── */
  .hero-tag {
    display: none !important;
  }
  
  .hero h1 {
    font-size: 40px !important;
    line-height: 1.1 !important;
    margin-bottom: 20px !important;
  }

  .hero h1 .vision-teal {
    color: var(--teal) !important;
  }
  
  .hero h1 br {
    display: block !important;
    content: "" !important;
  }
  
  .hero h1 span {
    display: block !important;
  }
  
  .hero-content {
    padding: 40px 20px 40px !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  
  .hero-meta {
    display: none !important;
  }
  
  /* Story photo - clickable on mobile */
  .story-photo {
    cursor: pointer !important;
  }
  
  /* ── UGANDA MOBILE REORGANIZATION ── */
  /* Section cards for mobile */
  .story-grid,
  .orphanage-inner,
  .trip-details-grid,
  .happening-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  /* Story section restructure */
  section.story {
    padding: 28px 20px !important;
  }
  
  .story-grid > div:first-child {
    order: 2 !important;
  }
  
  .story-grid > div:last-child {
    order: 1 !important;
  }
  
  .story-photo {
    height: 280px !important;
    border-radius: 16px !important;
    margin-bottom: 20px !important;
  }
  
  .story-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 16px !important;
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 20px !important;
  }
  
  .stat-num {
    font-size: 28px !important;
  }
  
  .stat-label {
    font-size: 12px !important;
  }
  
  /* What's Happening Grid */
  .happening-grid {
    grid-template-columns: 1fr !important;
  }
  
  .happening-card {
    min-height: 280px !important;
    padding: 24px !important;
  }
  
  /* Full-width sections on mobile */
  section.orphanage,
  section.trip-details {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: auto !important;
    right: auto !important;
    position: relative !important;
    padding: 40px 20px !important;
    box-sizing: border-box !important;
  }
  
  .goal-card {
    padding: 28px !important;
  }
  
  .goal-raised {
    font-size: 36px !important;
  }
  
  /* How to support 3-column becomes 1 */
  section:has(> :first-child:nth-of-type(1)):nth-of-type(10) > div:last-child {
    grid-template-columns: 1fr !important;
  }
  
  /* Trip details */
  section.trip-details {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: auto !important;
    right: auto !important;
    position: relative !important;
    padding: 40px 20px !important;
    box-sizing: border-box !important;
  }
  
  .trip-details-grid {
    gap: 24px !important;
  }
  
  .detail-sub {
    display: none !important;
  }
  
  .trip-what {
    padding: 24px !important;
  }
  
  /* Section spacing */
  section {
    padding: 40px 20px !important;
  }
  
  h2.display {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
  }
  
  .section-tag {
    font-size: 10px !important;
  }

  /* ── SHOP PAGE ── */
  .product-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .mission-callout { padding: 36px 24px !important; }
  .mission-callout h3 { font-size: 24px !important; }
  .form-row-inline { flex-direction: column; }
  .form-row-inline button { width: 100%; }
  .stat-row { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* ── PRAY PAGE ── */
  .prayer-list { gap: 12px; }
  .sign-up-box { padding: 32px 20px !important; }

  /* ── TAX PAGE ── */
  .receipt-box { flex-direction: column; text-align: center; padding: 32px 24px !important; }

  /* Footer - full viewport width */
  footer { 
    padding: 8px !important;
    margin: 0 !important;
    margin-top: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
    background: #222324 !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
  .footer-top {
    flex-direction: column !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    margin-bottom: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .footer-top > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .footer-links-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .footer-group {
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .footer-group h5 {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
  }
  .footer-group a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .footer-socials {
    display: flex !important;
    gap: 10px !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 4px !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .footer-legal, .footer-merch {
    margin: 0 !important;
    padding: 0 !important;
  }
  .footer-legal {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
  .footer-merch {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    font-size: 12px !important;
  }
  .footer-merch a {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  .footer-legal {
    font-size: 12px !important;
  }
  .footer-tagline {
    font-size: 13px !important;
    color: rgba(255,255,255,0.35) !important;
    max-width: 100% !important;
    line-height: 1.5 !important;
    margin: 6px 0 8px 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Verse strip */
  .verse-strip, .bible-strip {
    padding: 24px 20px !important;
  }
  .verse-strip blockquote { font-size: 14px !important; }

  /* Index: Trip cards — hide detail rows & divider on mobile */
  .trip-card-main .trip-detail,
  .trip-card-side .trip-detail,
  .trip-card-adventure .trip-detail { 
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Index: 1 John verse band */
  .verse-band {
    padding: 16px 20px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  .verse-band blockquote {
    font-size: 13px !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }
  .verse-band .verse-ref {
    padding-left: 0 !important;
    border-left: none !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* Mission strip */
  .mission-strip { padding: 16px 20px !important; text-align: center; }

  /* Buttons — full width except hero CTA which has its own rule */
  .btn-outline, .btn-mexico, .goal-cta, .callout-btn {
    width: 100%;
    text-align: center;
  }
  .btn-coral {
    width: 100%;
    text-align: center;
  }
  /* Hero CTA overrides the global full-width rule */
  .hero-ctas .btn-coral {
    width: auto !important;
    display: inline-block !important;
  }
}

/* ── INDEX: Donate strip ── */
@media (max-width: 768px) {
  .donate-strip {
    flex-direction: column !important;
    padding: 48px 20px !important;
    gap: 28px !important;
  }
  .donate-strip h2 { font-size: 28px !important; }
  .donate-strip p { font-size: 15px !important; max-width: 100% !important; }
  .donate-strip-right { width: 100% !important; text-align: center !important; }
  .donate-amounts { justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; }
  .donate-btn { width: 100% !important; padding: 16px !important; font-size: 15px !important; box-sizing: border-box; }
  .donate-note { text-align: center !important; margin-top: 12px; }
}

/* ── OUR STORY: Full mobile layout ── */
@media (max-width: 768px) {

  /* Hero — collapse two-column, show heading + image vertically */
  .hero { position: relative !important; min-height: auto !important; display: flex !important; flex-direction: column !important; }
  .hero-left { position: relative !important; width: 100% !important; height: auto !important; padding: 40px 20px 24px !important; background: linear-gradient(160deg, #1e3828, #2d4a35) !important; order: 1; }
  .hero-left h1 { font-size: 28px !important; line-height: 1.3 !important; margin-bottom: 24px !important; width: 100% !important; }
  .hero-left h1 br { display: block !important; content: ""; }
  .hero-left h1 span { display: inline !important; }
  .hero-left p { max-width: 100% !important; font-size: 15px !important; }
  .hero-tag { display: none !important; }
  .hero-left::after { display: none !important; }
  .hero-right { position: relative !important; width: 100% !important; height: 280px !important; order: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  .hero-right img { width: 100% !important; max-width: 100% !important; height: 280px !important; object-fit: cover !important; object-position: center 35% !important; border-radius: 0 !important; }
  .hero-right::before { display: none !important; }
  .hero-right::after { display: none !important; }

  /* Verse break */
  .verse-break { padding: 36px 20px !important; }
  .verse-break blockquote { font-size: 17px !important; }

  /* Origin / "Where It Started" — collapse grid */
  .origin {
    display: block !important;
    padding: 40px 20px !important;
  }
  .origin-text { margin-bottom: 28px; }
  .origin-text h2 { font-size: 28px !important; margin-bottom: 16px !important; }
  .origin-text p { font-size: 15px !important; line-height: 1.7 !important; margin-bottom: 14px !important; }
  .origin-photo { min-height: 220px !important; border-radius: 14px !important; }

  /* Convictions */
  .convictions { padding: 40px 20px !important; }
  .convictions h2 { font-size: 26px !important; margin-bottom: 24px !important; }
  .convictions-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .conviction-item { padding: 18px 20px !important; }
  .conviction-item p { font-size: 14px !important; }

  /* Stat row — 2x2 grid */
  .stat-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
  }
  .stat {
    padding: 28px 16px !important;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
  }
  .stat:nth-child(2n) { border-right: none !important; }
  .stat:nth-child(3), .stat:nth-child(4) { border-bottom: none !important; }
  .stat-num { font-size: 34px !important; }
  .stat-label { font-size: 12px !important; }

  /* Moses quote — collapse grid */
  .moses-quote {
    display: block !important;
    padding: 40px 20px !important;
  }
  .moses-photo { margin-bottom: 28px !important; }
  .moses-quote-text blockquote { font-size: 20px !important; line-height: 1.5 !important; }
  .moses-quote-text blockquote::before { font-size: 56px !important; }

  /* Team */
  .team { padding: 40px 20px !important; }
  .team h2 { font-size: 28px !important; }
  .team-sub { font-size: 15px !important; max-width: 100% !important; margin-bottom: 28px !important; }
  .team-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .team-photo { height: 200px !important; }
  .team-info { padding: 20px !important; }
  .team-name { font-size: 18px !important; }
  .team-bio { font-size: 13px !important; line-height: 1.6 !important; }

  /* Vision — collapse grid */
  .vision {
    display: block !important;
    padding: 40px 20px !important;
  }
  .vision-photo { min-height: 200px !important; margin-bottom: 28px !important; border-radius: 14px !important; }
  .vision-text h2 { font-size: 28px !important; margin-bottom: 14px !important; }
  .vision-text p { font-size: 15px !important; line-height: 1.7 !important; }
  .vision-items { margin-top: 20px !important; gap: 12px !important; }
  .vision-item-text { font-size: 14px !important; }

  /* Trust strip */
  .trust-strip-wrap { padding: 0 0 40px !important; }
  .trust-strip {
    display: block !important;
    margin: 0 20px !important;
    padding: 24px 20px !important;
    border-radius: 14px !important;
  }
  .trust-item { margin-bottom: 20px !important; }
  .trust-item:last-child { margin-bottom: 0 !important; }
  .trust-item-text h4 { font-size: 14px !important; }
  .trust-item-text p { font-size: 13px !important; }

  /* Partner logos */
  .partner { padding: 36px 20px !important; }
  .partner-logos { flex-wrap: wrap !important; gap: 12px !important; }

  /* Bottom CTA */
  .bottom-cta { 
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding: 16px 20px 12px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  .bottom-cta h2 { font-size: 30px !important; }
  .bottom-cta p { max-width: 100% !important; font-size: 15px !important; }
  .cta-buttons { flex-direction: column !important; align-items: center !important; gap: 12px !important; }
  .cta-buttons a { width: 100% !important; text-align: center !important; }
}

/* ── GIVE PAGE: Additional small-phone overrides ── */
@media (max-width: 480px) {
  .donate-area { padding: 16px 12px 36px !important; }
  .impact-panel { padding: 20px 16px !important; }
  .form-panel { padding: 20px 16px !important; }
  .impact-panel h2 { font-size: 22px !important; }
  .tier-amount { font-size: 15px !important; min-width: 44px !important; }
  .amount-val { font-size: 14px !important; }
  .freq-btn { font-size: 12px !important; }
}

/* ── UGANDA: Hero stats strip ── */
@media (max-width: 768px) {
  .hero-stats-strip {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 20px !important;
  }
  .hero-stat-item { flex-direction: row !important; gap: 10px !important; align-items: center !important; }
  .hero-stat-num { font-size: 24px !important; }
  .hero-stat-divider { display: none !important; }
  .what-you-do-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .do-item { padding: 16px !important; }
  .uganda-cta-strip { flex-direction: column !important; padding: 40px 20px !important; gap: 20px !important; text-align: center !important; }

  /* Uganda Story section - responsive grid */
  .story .story-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    padding: 0 20px !important;
  }
  .trip-cta-row { flex-direction: column !important; gap: 12px !important; }
  .trip-cta-row a { width: 100% !important; text-align: center !important; }
}

/* ── GO PAGE: Mobile Optimization ── */
@media (max-width: 768px) {
  /* Hero optimization */
  .hero {
    min-height: auto !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  
  .hero-photo {
    left: 0 !important;
    right: 0 !important;
    background-position: center center !important;
  }
  
  /* Hide hero photo on Mexico page mobile */
  .hero-mexico .hero-photo {
    display: none !important;
  }
  
  
  .hero-content {
    padding: 32px 20px 20px 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .hero h1 {
    font-size: 32px !important;
    line-height: 1 !important;
    margin-bottom: 12px !important;
  }
  
  .hero h1 br {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .hero h1 .go {
    display: block !important;
    margin-top: -30px !important;
    padding-top: 0 !important;
    line-height: 1 !important;
  }
  
  .hero p {
    font-size: 14px !important;
    max-width: 100% !important;
    margin-bottom: 8px !important;
  }
  
  .verse-block {
    padding: 8px 12px !important;
    font-size: 12px !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
  }
  
  /* Intro section */
  .go-intro { 
    padding: 40px 20px !important;
  }
  
  .go-intro h2 {
    font-size: 28px !important;
    margin-bottom: 16px !important;
  }
  
  .go-intro p {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  
  /* Bottom CTA strip */
  .bottom-strip { 
    flex-direction: column !important; 
    text-align: center !important; 
    padding: 36px 20px !important; 
    gap: 16px !important; 
  }
  
  .bottom-strip h3 {
    font-size: 24px !important;
    margin-bottom: 12px !important;
  }
  
  .bottom-strip p {
    font-size: 13px !important;
  }
  
  .bottom-strip a { 
    width: 100% !important; 
    text-align: center !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
  }
}

/* ── OUR STORY: Re-enable br display (overrides index page rules) ── */
@media (max-width: 768px) {
  .hero-left h1 br { display: block !important; content: ""; }
}

/* ── MEXICO: Additional fixes ── */
@media (max-width: 768px) {
  .mexico-cta-strip { flex-direction: column !important; padding: 40px 20px !important; gap: 20px !important; text-align: center !important; }
  .mexico-cta-strip a { width: 100% !important; }
  .trip-meta-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}

/* ── GLOBAL: prevent horizontal overflow on all pages ── */
@media (max-width: 768px) {
  html { 
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
  }
  .hero, section, .donate-strip, .verse-strip, .mission-strip, .newsletter-strip, .page-header, .shop-header { 
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    contain: layout style paint;
  }
  footer {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    contain: none !important;
  }
  img { max-width: 100%; height: auto; will-change: auto; }
}

/* ── Optimize heavy elements ── */
@media (max-width: 768px) {
  .farm-carousel, [class*="carousel"], [class*="scroll"] {
    contain: layout style paint;
    will-change: scroll-position;
  }
  
  .trips-grid {
    contain: layout style;
    will-change: scroll-position;
  }
  
  .trip-card, .card, .happening-card {
    contain: layout style;
  }
  
  /* Reduce repaints on form interactions */
  input, textarea, select {
    contain: layout style;
  }
}

/* ── Carousel dots ── */
.carousel-dots {
  display: none; /* hidden on desktop */
  justify-content: center;
  gap: 8px;
  padding: 16px 0 4px;
}
.dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ccc;
  transition: background 0.25s, transform 0.25s;
  display: inline-block;
  cursor: pointer;
}
.dot-active {
  background: var(--coral, #F2816D);
  transform: scale(1.25);
}

@media (max-width: 768px) {
  .carousel-dots { display: flex; }
}

/* ── MOBILE OPTIMIZATION: Touch targets, forms, spacing ── */
@media (max-width: 768px) {
  
  /* All interactive elements must be 44px+ for touch */
  a[href], button, input[type="button"], input[type="submit"], 
  input[type="reset"], .clickable, [role="button"], [role="link"] {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
  }
  
  /* Form improvements */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    border: 1.5px solid #ddd !important;
    background: white !important;
    font-family: inherit !important;
  }
  
  /* Focus states for accessibility */
  input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--teal) !important;
    box-shadow: 0 0 0 3px rgba(108, 196, 194, 0.1) !important;
  }
  
  /* Remove iOS default styling */
  input[type="text"],
  input[type="email"],
  input[type="password"] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 6px;
  }
  
  /* Placeholder styling */
  ::placeholder {
    color: #aaa;
    opacity: 1;
  }
  
  /* Remove spinner from number inputs */
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  input[type="number"] {
    -moz-appearance: textfield;
  }
  
  /* Link spacing — ensure clickable */
  a {
    padding: 6px 0;
    display: inline-block;
  }
  
  /* Card hover states - optimized for mobile */
  .card, .happening-card, .work-item, .trip-card, .team-card {
    transition: none;
    -webkit-tap-highlight-color: transparent;
    backface-visibility: hidden;
    perspective: 1000px;
  }
  
  /* Icon spacing for better tap targets */
  .prayer-icon, .happening-icon, .slide-label {
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Newsletter form — better spacing */
  .newsletter-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  
  .newsletter-form input {
    flex: 1;
    min-width: 200px;
    min-height: 44px;
    font-size: 16px;
  }
  
  .newsletter-form button {
    min-width: 120px;
    min-height: 44px;
    font-size: 15px;
    white-space: nowrap;
  }
  
  /* Improve spacing in lists */
  .prayer-list, .happening-grid, .conviction-item {
    gap: 16px !important;
  }
  
  .prayer-item, .happening-card, .conviction-item {
    padding: 18px 16px !important;
    min-height: auto;
  }
  
  /* CTA sections — ensure buttons breathe */
  .donate-strip, .bottom-cta, .orphanage, .home-goal {
    padding: 48px 20px !important;
  }
  
  /* Hero buttons breathing room */
  .hero-ctas, .cta-buttons {
    gap: 16px !important;
    margin-top: 24px !important;
  }
  
  .hero-ctas a, .cta-buttons a {
    min-height: 48px !important;
    padding: 14px 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Tab/pill buttons — easier to tap */
  .fund-tab, .freq-btn {
    min-height: 42px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
  
  /* Prayer form improvements */
  #pray-email {
    font-size: 16px !important;
    padding: 12px 16px !important;
    min-height: 44px !important;
  }
  
  #pray-btn {
    min-height: 44px !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    white-space: nowrap !important;
  }
  
  /* Carousel buttons */
  .carousel-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
  }
  
  /* Prevent double-tap zoom on buttons */
  a, button, input[type="button"], input[type="submit"] {
    touch-action: manipulation;
  }
  
  /* Smooth scrolling for carousels - optimized */
  .farm-carousel, .trips-grid {
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* Image loading optimization */
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  /* Hero image height — responsive ratio */
  .hero-photo, .how-photo {
    aspect-ratio: auto;
    object-fit: cover;
  }
  
  /* Ensure text is readable */
  body {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ── Small phones: 480px ── */
@media (max-width: 480px) {
  /* Typography — aggressive scaling */
  .hero h1 { font-size: 36px !important; line-height: 1.1 !important; }

  .hero h1 .vision-teal {
    color: var(--teal) !important;
  }
  h2.display { font-size: 24px !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 18px !important; }
  h4 { font-size: 15px !important; }
  
  .impact-stats { grid-template-columns: 1fr 1fr !important; }
  .build-big-num { font-size: 40px !important; }
  .goal-raised { font-size: 32px !important; }
  
  /* Buttons — ensure 48px minimum height for touch */
  button, .btn-coral, .btn-mexico, .btn-outline, a[class*="btn"], input[type="submit"], input[type="button"] {
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  
  /* Forms — 16px font size prevents iOS auto-zoom */
  input, textarea, select {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 12px !important;
  }
  
  /* Spacing — more generous on small phones */
  section { padding: 32px 16px !important; }
  footer { 
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 32px 16px 16px !important;
    position: static !important;
    box-sizing: border-box !important;
  }
  .bottom-cta { 
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: static !important;
    padding: 32px 20px !important;
    box-sizing: border-box !important;
  }
  
  /* Images — ensure full width with padding */
  img { max-width: calc(100vw - 32px) !important; }
  
  /* Cards — simpler stacking */
  .card { 
    padding: 16px !important; 
    box-shadow: none !important;
  }
  
  /* Forms — full width inputs */
  .field-row { grid-template-columns: 1fr !important; gap: 8px !important; }
  input[type="email"], input[type="text"], input[type="number"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Amounts grid — 2 column on 480px */
  .amount-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  
  /* Prevent text zoom on iOS */
  * {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* ── Reduce motion for users who prefer it ── */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Extra small: 375px (iPhone SE) ── */
@media (max-width: 375px) {
  body { font-size: 14px; }
  .hero h1 { font-size: 28px !important; }
  h2.display { font-size: 20px !important; }
  section, .page-header { padding: 28px 12px !important; }
  footer { 
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 20px 12px 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Tighter spacing for micro phones */
  .impact-stats { gap: 16px 12px !important; }
  .prayer-list, .happening-grid { gap: 8px !important; }
  
  /* Amount grid — 2 column with smaller gaps */
  .amount-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .amount-val { font-size: 13px !important; }
  
  /* Nav — tighter */
  nav { padding: 0 12px !important; }
  .nav-give { padding: 8px 14px !important; font-size: 12px !important; }
  
  /* Hero image ratio — prioritize content */
  .hero-content { padding: 100px 12px 32px !important; }
}

/* ── FINAL MOBILE POLISH ── */
@media (max-width: 768px) {
  /* Global readability improvements */
  body {
    line-height: 1.6 !important;
    -webkit-text-size-adjust: 100%;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  p, .body-text, li {
    line-height: 1.7 !important;
    margin-bottom: 12px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  
  /* Better spacing between sections on mobile */
  section + section {
    margin-top: 8px;
  }
  
  /* Ensure all links are tappable */
  a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  
  /* Modal improvements for mobile - optimized */
  #imageModal {
    padding: 20px !important;
    will-change: auto;
    contain: layout style;
  }
  
  #modalPrev, #modalNext {
    width: 48px !important;
    height: 48px !important;
    left: 12px !important;
    right: auto !important;
  }
  
  #modalNext {
    left: auto !important;
    right: 12px !important;
  }
  
  #closeBtn {
    top: 12px !important;
    right: 12px !important;
    font-size: 32px !important;
  }
  
  #imageCounter {
    bottom: 12px !important;
    font-size: 13px !important;
  }
  
  /* Trip card simplification — hide divider and details on mobile */
  .trip-card .card-divider,
  .trip-card .card-details {
    display: none !important;
  }
  
  /* Adjust padding since we removed the details section */
  .trip-card .card-body {
    padding: 28px 28px 24px;
  }
  
  /* Prevent overflow on carousels */
  .farm-carousel, .trips-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Newsletter — responsive */
  .newsletter-strip {
    padding: 40px 20px !important;
  }
  
  .newsletter-form {
    flex-direction: column;
    gap: 12px !important;
  }
  
  .newsletter-form input,
  .newsletter-form button {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── Ensure all form inputs are 16px (prevent iOS zoom) ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  font-size: 16px !important;
}

/* ── Mobile text variants ── */
.hide-mobile { display: inline; }
.hide-on-mobile { display: inline; }

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .hide-on-mobile { display: none !important; }
}

/* ── Vision Trip Photo Desktop Optimization ── */
.vision-trip-section {
  margin: 0 !important;
  width: 100% !important;
  clear: both !important;
  overflow: hidden;
}

.farm-carousel-section {
  margin-top: 0 !important;
  overflow: hidden;
}

.vision-trip-photo {
  display: none !important;
}

.farm-carousel-header {
  margin-bottom: 36px !important;
}

/* Mobile adjustments - CLEAN VERSION */
@media (max-width: 768px) {
  html, body {
    width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Reset sections to normal width with proper mobile padding */
  body > section,
  body > div[style*="padding"] {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  body > * {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }
  
  section {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: auto !important;
    right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    box-sizing: border-box !important;
    position: relative !important;
  }
  
  .story {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 32px 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  .story > div {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  .story .section-tag {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  
  .story h2,
  .story .display {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
  
  .story .body-text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  .story .body-text p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
  }
  
  /* Inline elements must wrap */
  .story .body-text strong,
  .story .body-text em,
  .story .body-text span {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  
  .story .story-stats {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .vision-trip-section {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 48px 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  .vision-trip-section > div {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  
  .farm-carousel-section {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 48px 20px !important;
  }

  .farm-carousel-header {
    text-align: left !important;
    padding: 0 !important;
  }
  
  .vision-trip-photo {
    display: none !important;
  }

  /* Mobile badge styling */
  .vision-trip-photo .story-badge {
    position: absolute !important;
    bottom: 16px !important;
    right: 16px !important;
    left: auto !important;
    background: rgba(0, 0, 0, 0.85) !important;
    padding: 10px 14px !important;
    border-radius: 20px !important;
    width: auto !important;
    max-width: 160px !important;
  }
  
  .vision-trip-photo .story-badge-name {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: white !important;
    margin: 0 !important;
  }
  
  .vision-trip-photo .story-badge-sub {
    font-size: 9px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 2px 0 0 0 !important;
  }

  /* ── Moses Section (Meet Moses) — Photo-first card layout ── */
  .moses-section {
    padding: 48px 20px !important;
    background: #fafafa !important;
  }

  .moses-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }
  
  .orphanage-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }
  
  .phased-carousel {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .moses-photo-wrapper {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    order: -1 !important;
    flex-shrink: 0 !important;
  }

  .moses-photo {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 400px !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
    background-size: cover !important;
    background-position: center top !important;
    background-image: url('images/MosesandSteller.jpg') !important;
  }

  .moses-text {
    width: 100% !important;
    order: 1 !important;
  }

  .moses-text .section-tag {
    display: block !important;
    margin-bottom: 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--coral) !important;
  }

  .moses-text h2 {
    font-size: 28px !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
    line-height: 1.2 !important;
  }

  .moses-text .body-text p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 16px !important;
  }

  .moses-text .body-text p:nth-of-type(2) {
    margin: 28px 0 16px 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.8 !important;
    padding: 20px !important;
    background: white !important;
    border-left: 4px solid var(--coral) !important;
    border-radius: 6px !important;
    font-style: italic !important;
  }

  .moses-text .body-text p:last-of-type {
    margin-top: 12px !important;
    font-size: 12px !important;
    color: #888 !important;
  }

  /* ── Support Cards Carousel (Mobile Swipeable) ── */
  .support-grid {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 16px !important;
    padding: 0 20px 20px 20px !important;
    scrollbar-width: none !important;
    scroll-behavior: auto !important;
  }

  .support-grid::-webkit-scrollbar {
    display: none !important;
  }

  .support-card {
    flex: 0 0 calc(100vw - 40px) !important;
    min-width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    scroll-snap-align: start !important;
    height: auto !important;
  }

  /* Support carousel dots */
  .support-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 24px !important;
    padding: 0 20px !important;
  }

  .support-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #ddd !important;
    cursor: pointer !important;
    margin: 0 4px !important;
    transition: background 0.2s !important;
  }

  .support-dot.active {
    background: #38393A !important;
  }

  /* ── What's Happening Carousel (Mobile Swipeable) ── */
  .whats-happening {
    padding: 48px 0 48px 0 !important;
    overflow: visible !important;
  }

  .whats-happening > span,
  .whats-happening > h2 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .happening-grid {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 16px !important;
    padding: 0 20px 20px 20px !important;
    scrollbar-width: none !important;
    scroll-behavior: auto !important;
    margin-top: 32px !important;
  }

  .happening-grid::-webkit-scrollbar {
    display: none !important;
  }

  .happening-card {
    flex: 0 0 90vw !important;
    min-width: 90vw !important;
    max-width: 90vw !important;
    scroll-snap-align: start !important;
    padding: 24px 20px !important;
  }

  /* Happening carousel dots */
  .happening-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 24px !important;
    padding: 0 20px !important;
  }

  .happening-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #ddd !important;
    cursor: pointer !important;
    margin: 0 4px !important;
    transition: background 0.2s !important;
  }

  .happening-dot.active {
    background: #38393A !important;
  }

  /* ── Phased Approach Carousel (Mobile Swipeable) ── */
  .phased-carousel-wrapper {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .phased-carousel::-webkit-scrollbar {
    height: 4px;
  }
  
  /* Phased dots indicator on mobile */
  .phased-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
    width: 100% !important;
  }
  
  .phased-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #e0e0e0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
  }
  
  .phased-dot.active {
    background: var(--teal) !important;
    width: 24px !important;
    border-radius: 4px !important;
  }

  .phased-carousel::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
  }

  .phased-card {
    flex-shrink: 0 !important;
    width: calc(100vw - 60px) !important;
    min-width: calc(100vw - 60px) !important;
    padding: 32px 24px !important;
    background: white !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    overflow: visible !important;
    height: auto !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  .phased-card > div:first-child {
    font-size: 40px !important;
    font-weight: 900 !important;
    margin-bottom: 12px !important;
    flex-shrink: 0 !important;
  }

  .phased-card h4 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #38393A !important;
    margin-bottom: 12px !important;
    flex-shrink: 0 !important;
  }

  .phased-card p {
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1.65 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  /* Show carousel arrows on mobile */
  .phased-carousel-prev,
  .phased-carousel-next {
    display: block !important;
  }

  /* Show dots on mobile */
  #phasedDots {
    display: flex !important;
    justify-content: center !important;
  }

  .phased-dot {
    transition: background 0.2s;
  }

  .phased-dot.active {
    background: #38393A !important;
  }
}

/* ── UGANDA STORY SECTION - CRITICAL MOBILE FIX ── */
@media (max-width: 768px) {
  section.story {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 48px 20px !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  section.story > div {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  section.story * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
  }

  .story h2.display {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .story .body-text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .story .body-text p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
  }
  
  .story .story-stats {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* ── GO PAGE: FINAL OVERFLOW FIX v119 ── */
@media (max-width: 768px) {
  .cards-section,
  .cards-grid,
  .cards-grid > a,
  .trip-card,
  .card-body,
  .card-body h2,
  .card-body p {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .cards-section {
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 48px 20px !important;
  }

  .trip-card {
    overflow: hidden !important;
    margin: 0 !important;
  }

  .card-body {
    overflow: hidden !important;
    padding: 16px !important;
  }

  .card-body h2,
  .card-body p {
    overflow: hidden !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ── GO PAGE: EXPLICIT TEXT WRAPPING FIX v121 ── */
@media (max-width: 768px) {
  .cards-grid > a > .trip-card > .card-body > h2,
  .cards-grid > a > .trip-card > .card-body > p,
  .cards-grid > a > .trip-card > .card-body > .card-location {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    overflow: hidden !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    word-wrap: break-word !important;
    white-space: normal !important;
  }

  /* Direct override on all text inside card-body */
  .trip-card .card-body > * {
    width: 100% !important;
    max-width: calc(100vw - 60px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}


/* ── MEXICO PAGE: Photo carousel on mobile ── */
@media (max-width: 768px) {
  .farm-carousel-wrap {
    margin: 0 !important;
  }

  .farm-carousel {
    padding: 0 20px;
    gap: 12px;
  }

  .farm-slide {
    flex: 0 0 85vw !important;
  }

  .slide-inner {
    height: 260px !important;
  }

  .carousel-btn {
    display: none !important;
  }

  #mexicoPhotoModal {
    flex-direction: column !important;
  }
  
  #mexicoModalPhoto {
    height: 60vh !important;
  }
  
  #mexicoPhotoModal button {
    font-size: 20px !important;
  }
}

/* ── UGANDA PAGE: Image modal on mobile ── */
@media (max-width: 768px) {
  #imageModal {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  
  #imageModal img {
    max-width: 95% !important;
    max-height: 70vh !important;
  }
  
  #closeBtn {
    width: 48px !important;
    height: 48px !important;
    top: 10px !important;
    right: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 32px !important;
    z-index: 1002 !important;
  }
  
  #modalPrev, 
  #modalNext {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
  }
  
  #modalPrev {
    left: 10px !important;
  }
  
  #modalNext {
    right: 10px !important;
  }

  /* Pray page: verse band centering fix */
  div[style*="100vw"] {
    width: 100% !important;
    padding: 32px 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
  }
  
  div[style*="100vw"] blockquote {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  /* Our Story page: centered mobile layout */
  .page-header {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 8px !important;
    flex-direction: column !important;
  }
  
  .page-header-text {
    align-items: center !important;
  }
  
  .page-header h1 {
    font-size: 28px !important;
    text-align: center !important;
  }
  
  .page-header h1 br {
    display: block !important;
    content: "";
  }
  
  .page-header h1 span {
    display: inline !important;
  }

  /* Close gap between cards and "Where We're Going" section */
  .trips {
    margin-top: 0 !important;
    padding-top: 32px !important;
  }

  /* Move photo below text on mobile */
  .page-header {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .page-header-text {
    order: 1 !important;
  }
  
  .page-header-image {
    order: 2 !important;
    margin-top: 24px !important;
  }

  /* Hide section titles on mobile */
  .page-header-tag {
    display: none !important;
  }
  
  .section-tag,
  .section-tag-light {
    display: none !important;
  }
  
  /* Hide "Our Core Values" title and make Mission h1 teal */
  /* Stat labels now visible on mobile - removed hiding rule */
  
  .page-header h1 span {
    /* colors are set inline */
  }

  
  /* Force hide Core Values tag */
  section > div > div > div[style*="font-weight: 700"] {
    display: none !important;
  }

  /* Mexico page: center hero text on mobile */
  .hero-mexico .hero-content {
    text-align: center !important;
    align-items: center !important;
  }
  
  .hero-mexico .hero-content > div:first-child {
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  
  .hero-mexico .hero-meta {
    display: none !important;
  }
  
  .hero-mexico .hero-sub {
    margin: 0 auto !important;
  }

  /* Uganda page: center hero title on mobile */
  .hero-left {
    width: 100% !important;
    position: relative !important;
    text-align: center !important;
    align-items: center !important;
  }
  
  .hero-left h1 {
    text-align: center !important;
  }
  
  .hero-right {
    display: block !important;
    width: 100% !important;
    position: static !important;
  }


  /* Footer section headers - teal color */
  footer h5 {
    color: #6CC4C2 !important;
  }

}