/* Wheeling2Help · Mobile polish 2026-11
   A light touch: native momentum scrolling, softer surfaces and transitions.
   The existing palette, typeface, content and desktop layout are unchanged. */
@media (max-width: 1439px) {
  /* The drawer is layered over the page, never pushes the hero/content down. */
  .site-header .mobile-nav {
    display:grid!important;
    grid-template-columns:minmax(0,1fr);
    gap:0;
    position:absolute;
    top:100%;left:0;right:0;
    z-index:520;
    width:100%;
    max-height:calc(100dvh - 75px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(0,-9px,0);
    transition:opacity .22s ease,transform .27s cubic-bezier(.22,1,.36,1),visibility .22s;
  }
  .site-header .mobile-nav.open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate3d(0,0,0);
  }
  .site-header .w2h-mobile-group>summary {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    min-height:49px;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  /* One clean chevron for expandable sections, rather than a jumping +/- glyph. */
  .site-header .w2h-mobile-group>summary::after {
    content:'';
    display:block;
    flex:none;
    float:none;
    width:8px;height:8px;
    border:0;
    border-right:1.8px solid currentColor;
    border-bottom:1.8px solid currentColor;
    transform:rotate(45deg);
    transition:transform .22s cubic-bezier(.22,1,.36,1);
    margin-right:5px;
  }
  .site-header .w2h-mobile-group[open]>summary::after {
    content:'';
    transform:rotate(225deg);
  }
  .site-header .mobile-nav .w2h-mobile-group a {
    min-height:42px;
    display:flex!important;
    align-items:center;
    touch-action:manipulation;
  }
  .site-header .mobile-nav .w2h-mobile-group a:active,
  .site-header .mobile-nav>a:active {
    background:rgba(44,120,165,.07)!important;
  }
  .site-header .w2h-language-trigger,
  .site-header .menu-toggle { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
}
@media (max-width: 767px) {
  :root { --flow-space:clamp(62px,9vw,76px); }
  html {
    scroll-behavior:smooth;
    scroll-padding-top:85px;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  /* Leave momentum, rubber-banding and finger tracking to iOS/Android. */
  body { -webkit-overflow-scrolling:touch; }
  main [id], section[id], [data-scroll-target] { scroll-margin-top:85px; }
  a, button, summary, input[type=button], input[type=submit] { -webkit-tap-highlight-color:transparent; }
  a, button, summary { touch-action:manipulation; }

  /* Keep mobile heading hierarchy consistent and avoid squeezed Greek text. */
  h1,h2,h3 { text-wrap:balance; overflow-wrap:break-word; }
  p, li { overflow-wrap:break-word; }
  .section-head p, .w2h-prose p, .w2h-paragraph, .about-copy p,
  .feature-copy p, .v6-description { line-height:1.75; }
  .home-page main > .section,
  body:not(.home-page) main > .section { padding-block:var(--flow-space); }
  .v6-section, .v6-impact-section { padding-block:var(--flow-space); }
  .home-page .section-head, .home-page .opportunities-heading,
  .v6-section-heading { margin-bottom:25px; }
  .home-page .program-grid, .home-page .stories-grid,
  .v6-stories-grid { gap:15px; }

  /* More predictable mobile first screen; remove the old forced 740px height. */
  .home-page .hero-cinematic,
  .home-page .hero-cinematic .hero-inner { min-height:max(640px,100svh); }
  .home-page .hero-cinematic .hero-inner { padding-bottom:112px; }
  .home-page .hero-cinematic h1 { text-wrap:balance; }
  .home-page .hero-cinematic .hero-buttons .btn { min-height:48px; }

  /* Calmer cards, no touch-only hover jumps or expensive shadow layers. */
  .program-card, .opportunity-card, .v6-story-card,
  .w2h-card, .v6-calendar-card, .v6-calendar-event {
    box-shadow:0 5px 20px rgba(8,44,74,.045);
  }
  .program-card, .opportunity-card, .v6-story-card,
  .w2h-card { transition:box-shadow .22s ease, border-color .22s ease; }
  .program-card:hover, .opportunity-card:hover, .v6-story-card:hover,
  .feature-visual[data-depth-card]:hover { transform:none!important; }
  .hero-cinematic .hero-photo,
  .hero-cinematic .hero-photo img,
  .hero-cinematic .hero-ambient {
    transform:none!important;
    will-change:auto!important;
  }
  .home-page .hero-cinematic .hero-photo img,
  .home-page .hero-floating, .home-page .scroll-line::before {
    animation:none!important;
    will-change:auto!important;
  }
  /* Translucent filters on fixed headers are expensive during touch scroll. */
  .site-header, .home-page .site-header.is-scrolled,
  .home-page .site-header.menu-open {
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .hero-cinematic .hero-kicker, .hero-cinematic .btn-ghost {
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .home-page .hero-cinematic .hero-copy { animation-duration:.55s!important; }
  [data-reveal].is-visible { animation-duration:.46s!important; animation-delay:0ms!important; }
  [data-stage].stage-ready { transition-duration:.50s!important; }

  /* Gentle feedback, without an artificial scrolling engine. */
  .btn, .filter-btn, .w2h-filters button,
  .v6-calendar-controls button, .back-to-top {
    transition-duration:.2s;
  }
  .back-to-top { width:45px;height:45px; }
  .w2h-inline-apply input, .w2h-inline-apply textarea,
  .contact-form input, .contact-form textarea { font-size:max(16px,1em); }
}
@media (max-width: 375px) {
  .home-page .hero-cinematic,
  .home-page .hero-cinematic .hero-inner { min-height:max(640px,100svh); }
  .home-page .hero-cinematic h1 { font-size:clamp(38px,10.3vw,43px); }
}
@media (hover:none) and (pointer:coarse) {
  /* Scroll transforms & always-on animated ornaments are not worth mobile GPU cost. */
  .hero-floating, .pin-halo { animation:none!important; }
  .hero-cinematic .hero-photo { transform:none!important;will-change:auto!important; }
  .hero-cinematic .hero-photo img { will-change:auto!important; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto!important; }
  .site-header .mobile-nav,
  .site-header .w2h-mobile-group>summary::after { transition:none!important; }
  [data-reveal].is-visible,[data-stage].stage-ready { animation:none!important;transition:none!important; }
}