/* === V62: targeted mobile fixes for Areas hero, location list, cards and contact page === */
@media (max-width: 760px){
  /* Areas We Cover hero: compact and image-led, no oversized feature stack */
  body.areas-page .areas-hero{
    min-height:360px!important;
    height:auto!important;
    display:flex!important;
    align-items:flex-end!important;
    background-size:cover!important;
    background-position:70% center!important;
    overflow:hidden!important;
  }
  body.areas-page .areas-hero:before{
    background:
      linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.76) 42%, rgba(0,0,0,.20) 100%),
      linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 100%)!important;
  }
  body.areas-page .areas-hero-inner{
    padding:0 24px!important;
    width:100%!important;
    box-sizing:border-box!important;
  }
  body.areas-page .areas-hero-copy{
    padding:54px 0 34px!important;
    max-width:360px!important;
  }
  body.areas-page .areas-hero .eyebrow{
    font-size:13px!important;
    line-height:1!important;
    margin:0 0 12px!important;
  }
  body.areas-page .areas-hero h1{
    font-size:38px!important;
    line-height:.96!important;
    margin:0 0 16px!important;
  }
  body.areas-page .areas-hero-copy>p:not(.eyebrow){
    font-size:16px!important;
    line-height:1.42!important;
    max-width:335px!important;
  }
  body.areas-page .area-hero-features{
    display:none!important;
  }

  /* Areas We Cover list: shorter, neater two-column mobile grid */
  body.areas-page .areas-list-card{
    padding:0 24px 30px!important;
    text-align:center!important;
  }
  body.areas-page .areas-list-card .eyebrow{
    margin:0 -24px 22px!important;
    padding:23px 20px 19px!important;
    text-align:center!important;
  }
  body.areas-page .areas-list-card h2{
    font-size:22px!important;
    line-height:1.22!important;
    max-width:330px!important;
  }
  body.areas-page .area-list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:20px!important;
    row-gap:12px!important;
    max-width:350px!important;
    margin:0 auto!important;
    text-align:left!important;
  }
  body.areas-page .area-list li{
    font-size:13px!important;
    line-height:1.22!important;
    padding-left:20px!important;
    white-space:nowrap!important;
  }
  body.areas-page .area-list li:before{
    width:12px!important;
    height:12px!important;
    top:.12em!important;
  }

  /* Why Choose icons on Areas page: centre all items properly */
  body.areas-page .areas-why article{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    padding:30px 0!important;
  }
  body.areas-page .areas-why article img{
    width:76px!important;
    height:76px!important;
    margin:0 auto 20px!important;
  }
  body.areas-page .areas-why article h3,
  body.areas-page .areas-why article p{
    width:100%!important;
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Location/town hero titles: put location name underneath service title on mobile */
  .hero h1 .accent{
    display:block!important;
    margin-top:2px!important;
  }

  /* Generic service cards were too tall on mobile: tighten them site-wide */
  .generic-icon-grid{padding:28px 0!important;}
  .icon-grid-6{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;}
  .generic-icon-card{
    display:grid!important;
    grid-template-columns:58px 1fr!important;
    gap:18px!important;
    align-items:center!important;
    min-height:0!important;
    padding:22px 22px!important;
    border-radius:8px!important;
  }
  .generic-icon-card img{
    width:48px!important;
    height:48px!important;
    margin:0!important;
  }
  .generic-icon-card h3{
    font-size:20px!important;
    line-height:1.05!important;
    margin:0 0 8px!important;
  }
  .generic-icon-card p{
    font-size:15px!important;
    line-height:1.38!important;
    margin:0!important;
  }
  .ev-solution-card,
  .why-grid article,
  .ux-card{
    min-height:0!important;
    padding:24px 22px!important;
  }
  .ev-solution-card img,
  .why-grid img,
  .ux-card img{
    width:54px!important;
    height:54px!important;
    margin-bottom:16px!important;
  }

  /* Contact page: rebuild mobile layout to match site styling */
  body.contact-page .section.white{
    padding:34px 0!important;
    background:#f6f6f6!important;
  }
  body.contact-page .section.white .wrap.grid.two{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    width:min(92vw,620px)!important;
    margin:0 auto!important;
  }
  body.contact-page .panel{
    padding:26px 22px!important;
    border-radius:10px!important;
    box-shadow:0 10px 26px rgba(0,0,0,.06)!important;
    border:1px solid #ddd!important;
  }
  body.contact-page .panel h2{
    font-size:36px!important;
    line-height:1!important;
    margin:0 0 24px!important;
  }
  body.contact-page .contact-form{
    padding:0!important;
    background:#fff!important;
  }
  body.contact-page .contact-form input,
  body.contact-page .contact-form select,
  body.contact-page .contact-form textarea{
    width:100%!important;
    box-sizing:border-box!important;
    min-height:50px!important;
    padding:13px 0!important;
    font-size:16px!important;
    border:0!important;
    border-bottom:1px solid #ddd!important;
    border-radius:0!important;
    background:#fff!important;
  }
  body.contact-page .contact-form textarea{
    min-height:120px!important;
  }
  body.contact-page .contact-form .btn{
    margin:20px 0 0!important;
    width:100%!important;
    min-height:56px!important;
  }
  body.contact-page .contact-form .notice{
    font-size:16px!important;
    line-height:1.35!important;
    margin:18px 0 0!important;
  }
  body.contact-page .contact-detail-list{
    display:grid!important;
    gap:14px!important;
    margin:0!important;
    padding:0!important;
  }
  body.contact-page .contact-detail-line{
    display:grid!important;
    grid-template-columns:26px 1fr!important;
    gap:12px!important;
    align-items:start!important;
    font-size:17px!important;
    line-height:1.35!important;
    color:#111!important;
  }
  body.contact-page .contact-detail-line img{
    width:21px!important;
    height:21px!important;
    margin-top:2px!important;
  }
  body.contact-page .mapbox{
    margin-top:18px!important;
    min-height:130px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:8px!important;
    background:#111!important;
    color:#fff!important;
  }
}

@media (max-width: 390px){
  body.areas-page .area-list{column-gap:14px!important;max-width:326px!important;}
  body.areas-page .area-list li{font-size:12.5px!important;padding-left:18px!important;}
  body.areas-page .areas-hero{min-height:340px!important;}
  body.areas-page .areas-hero h1{font-size:35px!important;}
}