/*
 * Refer My Tradesman — Services hub mobile hero patch
 * Scope: /services only, screens 760px wide and below.
 * The service-detail routes use route-services-*, so they are not affected.
 */
@media (max-width:760px){
  /* The image remains a clean 9:16 hero. The controls use their own white panel below it. */
  .route-services .hero{
    overflow:visible;
    margin-bottom:220px;
  }

  .route-services .hero__wash{
    display:block;
    background:rgba(10,36,70,.18);
  }

  /* The hub has no Home-style supporting line, so its title occupies the lower third alone. */
  .route-services .hero__content{
    position:static;
    align-items:center;
    justify-content:flex-end;
    padding:0 20px 34px;
    text-align:center;
  }

  .route-services .hero__content h1{
    position:absolute;
    z-index:3;
    bottom:44px;
    left:50%;
    width:min(calc(100% - 40px),330px);
    max-width:none;
    margin:0;
    transform:translateX(-50%);
    font-family:"Plus Jakarta Sans","Montserrat",ui-sans-serif,sans-serif;
    font-size:clamp(2.1rem,9.8vw,2.45rem);
    font-weight:650;
    line-height:1.1;
    letter-spacing:-.05em;
    text-shadow:0 2px 5px rgba(0,0,0,.65),0 0 14px rgba(0,0,0,.35);
  }

  /* Home has no visible breadcrumb or duplicate CTA strip; neither does the mobile Services hub. */
  .route-services .breadcrumbs--hero,
  .route-services .under-hero{display:none}

  /* Match the approved Home conversion panel: all conversion actions sit beneath the photograph. */
  .route-services .triple-threat{
    position:absolute;
    z-index:4;
    top:100%;
    left:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    width:100vw;
    padding:20px 0 24px;
    transform:translateX(-50%);
    background:var(--white);
    box-shadow:0 12px 22px rgba(20,45,77,.08);
  }

  .route-services .triple-threat__voice{
    display:flex;
    justify-content:center;
    width:238px;
    min-height:52px;
    margin-bottom:0;
  }

  .route-services .triple-threat__voice #ryan-voice-target,
  .route-services .triple-threat__voice #ryan-voice-target .ghl-chat-widget-button{width:100%!important}

  .route-services .triple-threat>a,
  .route-services .triple-threat>button{
    width:238px;
    min-height:52px;
    border-radius:5px;
    font-family:"Plus Jakarta Sans","Montserrat",ui-sans-serif,sans-serif;
    font-size:calc(.76rem + 4px);
    font-weight:700;
    letter-spacing:.005em;
  }

  .route-services .triple-threat>a{
    background:var(--blue);
    border-color:var(--blue);
    color:var(--white);
  }

  .route-services .triple-threat>button{
    background:var(--white);
    border-color:var(--blue);
    color:var(--blue);
    text-shadow:none;
  }
}