/* Four compact service links over the mobile service slideshow. */
.hero-services, .mobile-hero-brand, .hero-slide-name { display: none; }
@media (min-width: 721px) {
  .showcase-media .hero-slide:not(.is-active) { visibility: hidden; }
}
@media (max-width: 720px) {
  .home .header .nav-location { display: none; }
  .mobile-hero-brand { display: flex; order: -1; align-items: center; gap: 7px; width: 181px; min-width: 0; margin-right: auto; padding: 6px 8px 6px 5px; border: 1px solid #ffffffa6; border-radius: 13px; background: #fffaf1ed; box-shadow: 0 5px 18px #0b13231f; color: #243b47; }
  .mobile-hero-brand > img { flex: 0 0 auto; width: 38px; height: 38px; object-fit: contain; border-radius: 7px; background: white; }
  .mobile-hero-brand > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .mobile-hero-brand strong { font-size: 11px; letter-spacing: .7px; line-height: 1; }
  .mobile-hero-reputation { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
  .mobile-hero-reputation b { font-size: 9px; font-weight: 750; color: #937039; }
  .mobile-hero-reputation small { font-size: 8px; font-weight: 600; color: #52636c; }
  .home.menu-open .mobile-hero-brand { display: none; }
  .hero-slide-name { display: block; position: absolute; left: 17px; bottom: 109px; max-width: calc(100% - 34px); margin: 0; padding: 7px 11px; border: 1px solid #ffffff36; border-radius: 8px; background: #0b1323c9; backdrop-filter: blur(8px); color: #fffaf1; font-size: 11px; font-weight: 650; line-height: 1.3; letter-spacing: .15px; }
  .showcase-media::before { display: none; }
  .showcase-media .hero-slide { position: absolute; inset: 0; z-index: 0; display: block; opacity: 0; visibility: visible; transition: opacity 1.1s cubic-bezier(.4,0,.2,1) !important; }
  .showcase-media .hero-slide::before { content: ''; position: absolute; inset: -25px; background: var(--slide-image, url('../images/hero-mobile-portrait.png')) center top/cover no-repeat; filter: blur(20px); }
  .showcase-media .hero-slide.is-previous { z-index: 1; opacity: 1; }
  .showcase-media .hero-slide.is-active { z-index: 2; opacity: 1; }
  .showcase-media .hero-slide img { object-fit: contain; object-position: center top; }
  .home .showcase-stage { left: 12px; right: 12px; bottom: 8px; padding: 8px; border: 1px solid #ffffffb3; border-radius: 16px; background: #fffaf1e8; backdrop-filter: blur(12px); box-shadow: 0 8px 28px #0b13232b; }
  .hero-services { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
  .hero-service { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 68px; padding: 5px 2px 7px; border: 1px solid #d4dee2; border-radius: 10px; background: #ffffffde; color: #233d4a; text-align: center; font-size: 10px; font-weight: 750; line-height: 1.2; transition: background .25s, border-color .25s; }
  .hero-service img { width: 42px; height: 35px; object-fit: contain; }
  .hero-service.is-current { background: #dfedf1; border-color: #7eafbf; }
  .hero-service:hover { background: #edf4f5; }
  .hero-service:focus-visible { outline: 2px solid #236983; outline-offset: 2px; }
}
@media (max-width: 360px) {
  .mobile-hero-brand { width: 170px; gap: 5px; padding-inline: 4px 6px; }
  .mobile-hero-brand > img { width: 34px; height: 34px; }
  .mobile-hero-brand strong { font-size: 10px; }
  .mobile-hero-reputation { gap: 4px; }
  .mobile-hero-reputation small { font-size: 7.5px; }
  .hero-slide-name { left: 13px; bottom: 102px; font-size: 10px; }
  .home .showcase-stage { left: 9px; right: 9px; padding: 7px; border-radius: 14px; }
  .hero-services { gap: 4px; }
  .hero-service { font-size: 9px; min-height: 65px; border-radius: 9px; }
  .hero-service img { width: 38px; height: 31px; }
}