/* ==========================================================
   P19.3 — MOBILE REGRESSION + POLISH
   Final presentation-only mobile cleanup.
   Scope: <= 860px. Navigation mechanics remain P19.1.4 authority.
   ========================================================== */

@media(max-width:860px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{line-height:1.55}
  main,main>*,section,article,aside{min-width:0}

  /* Consistent readable typography without changing content hierarchy. */
  .hero h1,.page-hero h1,.service-landing-copy h1,
  .marka-main-hero h1,.marka-brand-hero h1,.marka-product-hero h1,
  .section-heading h2,.why-copy h2,.faq-intro h2,
  .marka-about-content h2,.marka-product-request-copy h2,.service-scope-copy h2{
    text-wrap:balance
  }
  .hero-lead,.page-hero-text,.section-heading>p,.why-copy>p,.faq-intro>p,
  .service-scope-copy>p,.marka-product-request-copy>p,.entry-content p{
    text-wrap:pretty
  }

  /* Final tap/focus contract. */
  a,button,summary,input,select,textarea{touch-action:manipulation}
  a:focus-visible,button:focus-visible,summary:focus-visible,
  input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:3px solid rgba(47,155,255,.28);outline-offset:2px
  }
  .btn{border-radius:11px;font-size:.86rem;line-height:1.15}

  /* Prevent grid children and long labels from becoming overflow sources. */
  .service-grid,.marka-grid,.marka-product-grid,.posts-grid,
  .service-fault-grid,.service-region-grid,.contact-grid,
  .guide-grid,.guide-grid.compact,.why-panel{align-items:stretch}
  .service-grid>*,.marka-grid>*,.marka-product-grid>*,.posts-grid>*,
  .service-fault-grid>*,.service-region-grid>*,.contact-grid>*{min-width:0}

  .service-card,.marka-card,.marka-product-card,.post-card,.guide-card,
  .service-fault-card,.contact-card{height:100%}

  .service-card-body h2,.service-card-body h3,.service-card-body h4{
    min-height:2.45em;display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:2;overflow:hidden
  }
  .marka-card-main h2{
    min-height:2.45em;white-space:normal;display:-webkit-box;
    -webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden
  }
  .marka-card-meta,.marka-product-card strong,.post-card h2,
  .service-fault-card strong,.service-region-grid strong{
    overflow-wrap:anywhere;word-break:normal
  }
  .service-region-grid strong{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden
  }

  /* Hero/trust alignment: equal visual weight across narrow devices. */
  .hero-trust>div{min-height:70px}
  .hero-trust strong{overflow-wrap:anywhere}
  .service-request-card,.service-safe-box,.article-card,.sidebar-card,
  .sy-request-form-wrap,.sy-request-form-wrap.is-compact{max-width:100%}

  /* Vertical steppers: keep the rail aligned when copy wraps. */
  .process-card,.service-process-card,.marka-process-mini>div{min-width:0}
  .process-card h3,.service-process-card h3,.marka-process-mini strong,
  .process-card p,.service-process-card p,.marka-process-mini p{overflow-wrap:anywhere}

  /* Forms: no intrinsic width surprises on iOS/Chromium. */
  .sy-request-grid,.sy-request-grid label,.sy-request-actions,
  .sy-request-actions-primary,.sy-request-actions-secondary{min-width:0}
  .sy-request-grid input,.sy-request-grid select,.sy-request-grid textarea{
    width:100%;max-width:100%;box-sizing:border-box
  }
  .sy-request-actions .btn{max-width:100%;white-space:normal;text-align:center}
  .sy-request-consent input{flex:0 0 auto}

  /* Long contact/footer strings must never widen the page. */
  .contact-card h2,.contact-card p,.footer-brand p,
  .footer-links a,.footer-contact a,.footer-contact span,
  .marka-contact-quick strong{overflow-wrap:anywhere;word-break:break-word}
  .footer-grid>div{min-width:0}
  .footer-links a{display:inline-block;line-height:1.4}
  .footer-contact li{min-width:0}

  /* Small horizontal filters stay usable without moving the whole page. */
  .marka-alpha-filter,.marka-filter-panel,.marka-search-row{min-width:0;max-width:100%}
  .marka-alpha-filter{-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}

  /* Avoid desktop hover motion feeling sticky on touch screens. */
  @media(hover:none){
    .service-card:hover,.marka-card:hover,.marka-product-card:hover,
    .guide-card:hover,.post-card:hover,.quick-service-list a:hover{
      transform:none!important
    }
  }
}

@media(max-width:620px){
  .section-heading{margin-bottom:22px}
  .hero-trust>div{min-height:66px}
  .why-stat,.why-stat.wide{min-width:0}
  .why-stat>span,.why-stat.wide strong,.why-stat.wide>div span{overflow-wrap:anywhere}

  .sy-request-actions,.sy-request-actions-primary,.sy-request-actions-secondary{
    grid-template-columns:1fr!important
  }
  .sy-request-actions .btn{width:100%;justify-content:center}

  .prefooter-inner{gap:12px}
  .footer-brand p{max-width:100%}
  .footer-bottom{gap:8px}
}

@media(max-width:380px){
  .hero h1,.page-hero h1,.service-landing-copy h1,
  .marka-main-hero h1,.marka-brand-hero h1,.marka-product-hero h1{
    font-size:clamp(1.95rem,9vw,2.25rem)
  }
  .section-heading h2,.why-copy h2,.faq-intro h2,
  .marka-about-content h2,.marka-product-request-copy h2,.service-scope-copy h2{
    font-size:1.5rem
  }
  .hero-trust>div{min-height:62px}
  .service-card-body h2,.service-card-body h3,.service-card-body h4,
  .marka-card-main h2{min-height:2.35em}
  .marka-contact-quick>a{padding-inline:8px}
  .marka-contact-quick strong{font-size:.71rem}
}

/* 320–340 px: footer needs one readable column; catalog grids remain two-column. */
@media(max-width:340px){
  .footer-grid{grid-template-columns:1fr;gap:16px}
  .footer-brand{grid-column:auto}
  .footer-grid>div:nth-child(3){display:block}
  .site-footer h3{margin-bottom:7px}
  .footer-links,.footer-contact{gap:5px}
}

@media(prefers-reduced-motion:reduce){
  .btn,.service-card,.marka-card,.marka-product-card,.guide-card,.post-card{transition:none!important}
}