/* =========================================================
   PDA Doors & More — HOME MOBILE CONVERSION LAYER (v22)
   Loads last, only on the home page. Everything is scoped to
   body.home so subpages keep their existing behaviour.
   Goals: tight vertical rhythm (it all "flows"), nothing
   overflows or floats in dead space (it all "fits"), and the
   primary "Text a Photo" action is always close at hand.
   ========================================================= */

@media (max-width:860px){

  /* ---- Hero: keep the cinematic frame, surface the promise + CTA sooner ---- */
  body.home .hero{min-height:92svh}
  body.home .hero .wrap{padding-top:96px;padding-bottom:52px}
  body.home .hero h1{margin:14px 0 18px}
  body.home .hero .lead{font-size:16.5px;line-height:1.55}
  body.home .hero .actions{margin-top:24px}
  body.home .hero .cta-micro{margin-top:14px !important;font-size:12.5px;line-height:1.5;color:rgba(246,242,234,.72)}
  /* the scroll cue crowds a phone hero and overlaps the CTA microcopy — retire it */
  body.home .scroll-cue{display:none}

  /* ---- Section rhythm: trim cavernous whitespace so sections connect ---- */
  body.home .section{padding:clamp(56px,11vw,86px) 0}
  body.home .split{gap:clamp(24px,7vw,40px)}
  body.home .center{margin-bottom:8px}

  /* ---- Stat row: compact, confident 2x2 (was very tall) ---- */
  body.home .statrow .s{padding:30px 16px}
  body.home .statbig b{font-size:clamp(42px,13vw,58px)}
  body.home .statbig span{letter-spacing:.12em;font-size:11px;margin-top:6px}

  /* ---- Editorial "what we deliver" line: keep it from towering ---- */
  body.home .bigq{font-size:clamp(26px,6.6vw,38px);line-height:1.2;max-width:22ch}

  /* ---- Door-style collection: 2-up thumbnails scan fast, no endless stack ---- */
  body.home .gallery-5{grid-template-columns:1fr 1fr;gap:12px;margin-top:32px !important}

  /* ---- "Who we serve": 2-up cards instead of a six-deep column ---- */
  body.home .grid:has(> .who){grid-template-columns:1fr 1fr;gap:12px}
  body.home .card.who{padding:22px 18px}
  body.home .card.who .num{font-size:22px;margin-bottom:8px}
  body.home .card.who h3{font-size:17px;line-height:1.22}
  body.home .card.who p{font-size:13.5px;line-height:1.5}
  body.home .card.who .mini-cta{font-size:11px;margin-top:14px}

  /* ---- Portfolio proof: 2-up keeps the whole set glanceable ---- */
  body.home .gallery:not(.gallery-5){grid-template-columns:1fr 1fr;gap:12px}

  /* ---- Media / parallax tiles: right-sized on phones ---- */
  body.home .media{min-height:clamp(260px,64vw,340px)}
  body.home .parallax{min-height:clamp(300px,72vw,400px)}
  body.home .parallax .inner{padding:36px 24px}

  /* ---- Inline CTA band: tighter, still prominent ---- */
  body.home .cta-band{padding:34px 0}
  body.home .cta-band .wrap{gap:16px}
}

@media (max-width:520px){
  body.home .hero .wrap{padding-top:88px;padding-bottom:40px}
  body.home .statrow .s{padding:26px 12px}
  /* hold the 2-up scanning grids even on small phones (base CSS collapses these to 1) */
  body.home .gallery-5,
  body.home .gallery:not(.gallery-5){grid-template-columns:1fr 1fr}
}

@media (max-width:380px){
  /* only drop to a single column where a 2-up would truly cramp */
  body.home .grid:has(> .who){grid-template-columns:1fr}
}