/* === V65: mobile hero refinement - smaller content, clearer background images === */
@media (max-width:760px){
  /* Global mobile hero tune-up */
  .hero,
  .homepage-v7 .hero,
  .generic-hero,
  .home-hero{
    min-height:560px!important;
    height:auto!important;
    display:flex!important;
    align-items:center!important;
    background-size:cover!important;
    background-position:68% center!important;
    overflow:hidden!important;
  }

  .hero:before,
  .homepage-v7 .hero:before,
  .generic-hero:before,
  .home-hero:before{
    background:
      linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.22) 34%,rgba(0,0,0,.58) 74%,rgba(0,0,0,.88) 100%),
      linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.70) 39%,rgba(0,0,0,.24) 100%)!important;
  }

  .hero .inner,
  .hero-inner,
  .generic-hero .container,
  .homepage-v7 .hero .inner{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:36px 28px 38px!important;
    position:relative!important;
    z-index:2!important;
    transform:none;}

  .hero .eyebrow,
  .generic-hero .eyebrow,
  .homepage-v7 .hero .eyebrow{
    font-size:17px!important;
    line-height:1.05!important;
    margin:0 0 14px!important;
    letter-spacing:.8px!important;
  }

  .hero h1,
  .generic-hero h1,
  .homepage-v7 .hero h1{
    font-size:42px!important;
    line-height:.95!important;
    letter-spacing:.05px!important;
    margin:0 0 16px!important;
    max-width:95vw!important;
  }

  .hero h1 .accent,
  .generic-hero h1 .accent{
    display:block!important;
    margin-top:4px!important;
  }

  .hero p,
  .hero-text,
  .generic-hero p,
  .homepage-v7 .hero p{
    max-width:95vw!important;
    font-size:18px!important;
    line-height:1.42!important;
    margin:0 0 22px!important;
  }

  .hero .ticks{
    margin:0 0 22px!important;
    gap:9px!important;
  }
  .hero .ticks li{
    font-size:17px!important;
    line-height:1.2!important;
    margin-bottom:9px!important;
  }

  .hero .actions,
  .hero .cta-row,
  .generic-hero .cta-row,
  .home-hero .actions{
    gap:12px!important;
  }

  .hero .btn,
  .generic-hero .btn,
  .home-hero .btn,
  .hero .cta-row .btn{
    min-height:56px!important;
    font-size:18px!important;
    padding:0 18px!important;
    border-radius:6px!important;
  }

  /* Page-specific image positioning so the important subject is visible */
  .hero[style*="hero-panel-worker-correct"],
  .generic-hero[style*="hero-panel-worker-correct"]{
    background-position:72% center!important;
  }
  .hero[style*="hero-eicr-report-correct"],
  .generic-hero[style*="hero-eicr-report-correct"]{
    background-position:66% center!important;
  }
  .hero[style*="hero-van-chelmsford-correct"],
  .generic-hero[style*="hero-van-chelmsford-correct"],
  .hero[style*="hero-van-maidstone-correct"],
  .generic-hero[style*="hero-van-maidstone-correct"]{
    background-position:62% center!important;
  }
  .hero[style*="hero-van-london-correct"],
  .generic-hero[style*="hero-van-london-correct"],
  .hero[style*="hero-london-correct"],
  .generic-hero[style*="hero-london-correct"]{
    background-position:72% center!important;
  }

  /* Areas hero stays compact but shows more of the map */
  body.areas-page .areas-hero{
    min-height:430px!important;
    align-items:center!important;
    background-position:62% center!important;
  }
  body.areas-page .areas-hero:before{
    background:
      linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.66) 43%,rgba(0,0,0,.18) 100%),
      linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.42) 100%)!important;
  }
  body.areas-page .areas-hero-copy{
    padding:34px 0!important;
    max-width:350px!important;
  }
  body.areas-page .areas-hero h1{
    font-size:38px!important;
    line-height:.96!important;
    margin-bottom:14px!important;
  }
  body.areas-page .areas-hero-copy>p:not(.eyebrow){
    font-size:16px!important;
    line-height:1.4!important;
  }
}

@media (max-width:420px){
  .hero,
  .homepage-v7 .hero,
  .generic-hero,
  .home-hero{
    min-height:535px!important;
  }
  .hero .inner,
  .hero-inner,
  .generic-hero .container,
  .homepage-v7 .hero .inner{
    padding:30px 24px 34px!important;
    transform:none;}
  .hero h1,
  .generic-hero h1,
  .homepage-v7 .hero h1{
    font-size:38px!important;
    line-height:.96!important;
  }
  .hero .eyebrow,
  .generic-hero .eyebrow,
  .homepage-v7 .hero .eyebrow{
    font-size:16px!important;
    margin-bottom:12px!important;
  }
  .hero p,
  .hero-text,
  .generic-hero p,
  .homepage-v7 .hero p{
    font-size:17px!important;
    line-height:1.38!important;
    margin-bottom:20px!important;
  }
  .hero .ticks li{font-size:16px!important;}
  .hero .btn,
  .generic-hero .btn,
  .home-hero .btn,
  .hero .cta-row .btn{
    min-height:54px!important;
    font-size:17px!important;
  }
}