/* ============================================================================
   Home-page mobile tweaks — index.php and ma.php only.
   Loads after site.css so the same-specificity !important rules win.
   Desktop is untouched.
   ============================================================================ */

@media (max-width:900px){

  /* the three trust chips move up onto the photo and shrink to caption size.
     They hug the bottom-left corner so they balance the painted signature in
     the bottom-right of the picture instead of fighting the row below it. */
  .hero-visual{position:relative;z-index:2}

  /* sized in vw so the row always takes ~60% of the screen on the left and the
     painted signature on the right of the photo stays clear, on every phone */
  .header-hooks{
    position:relative;z-index:6;
    display:flex!important;flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    width:auto!important;max-width:64%!important;
    margin:-8.2vw 0 8px 3.2vw!important;
    padding:0!important;
    gap:1.1vw!important}

  .header-hook{
    flex:0 0 auto!important;
    height:6vw!important;
    gap:.8vw!important;
    padding:0 2.1vw!important;
    border:0!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.90)!important;
    box-shadow:0 3px 9px rgba(16,26,60,.20)!important;
    color:#1d2c58!important;
    font-size:1.9vw!important;
    letter-spacing:.02em!important;
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}

  .header-hook svg{width:2.7vw!important;height:2.7vw!important;stroke-width:2.3!important}
}