/* ============================================================
   Services page (services.html only).
   Laptop / tablet (701px and wider): the normal Services page, unchanged.
   Phone (700px and narrower): navy banner with the technician + rounded service cards.
   ============================================================ */

/* parts that exist only for the phone layout are hidden on laptop / tablet */
.svc-sub,.lm-m,.svc-go{display:none}

@media(max-width:700px){

  /* ---- banner: technician on the right, face fully visible ---- */
  .page-banner{background:#0a2a5c url(images/services-banner-m.jpg) right top/cover no-repeat;
    text-align:left;min-height:236px;display:flex;align-items:center;padding:34px 0 62px}
  .page-banner .container{width:100%;padding-left:24px;padding-right:24px}   /* space between the text and the screen edge */
  .page-banner h1{color:#fff;font-size:2rem;font-weight:800;line-height:1.1;margin:0 0 12px}
  .page-banner .crumbs{display:none}
  .svc-sub{display:block;color:#e6f0ff;font-size:.95rem;line-height:1.45;max-width:190px;margin:0}

  /* ---- white rounded sheet sliding over the banner ---- */
  .svc-sec{position:relative;z-index:1;margin-top:-30px;padding:22px 0 48px;background:#fff;border-radius:24px 24px 0 0}
  .svc-sec .container{width:calc(100% - 24px);padding-inline:0}
  .svc-sec .section-head{display:none}
  .svc-sec .grid-3{display:grid;grid-template-columns:1fr;gap:12px}

  /* ---- service card: photo, title, text, View Details, chevron ---- */
  .svc-sec .service:not(.call-card){position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;
    border-radius:18px;background:linear-gradient(135deg,#f7fbff 0%,#e7f1ff 100%);border:1px solid #d3e4fa;
    box-shadow:0 6px 18px rgba(10,61,138,.07);overflow:hidden;transform:none}
  .svc-sec .service:not(.call-card){transition:transform .25s,box-shadow .25s,border-color .25s}
  .svc-sec .service:not(.call-card):hover{transform:translateY(-3px);border-color:#ff9a4d;box-shadow:0 12px 26px rgba(255,122,26,.18)}
  .svc-sec .service:not(.call-card):active{transform:scale(.985)}
  .svc-sec .service-img{flex:0 0 84px;width:84px;height:84px;aspect-ratio:auto;border-radius:12px;
    background-image:var(--thumb,var(--img));background-size:cover;background-position:center;
    box-shadow:0 2px 8px rgba(10,61,138,.08);transform:none}
  .svc-sec .service:hover .service-img{transform:none}
  .svc-sec .service-body{flex:1;min-width:0;padding:0;background:transparent}
  .svc-sec .service-body h3{margin:0 0 4px;font-size:1rem;font-weight:700;color:#0a3d8a;line-height:1.25}
  .svc-sec .service-body p{margin:0 0 5px;font-size:.84rem;line-height:1.45;color:#4a5d78}
  .svc-sec .service-body a{display:inline-flex;align-items:center;margin-top:2px;padding:4px 13px;border:1.5px solid #0a3d8a;
    border-radius:999px;color:#0a3d8a;font-weight:600;font-size:.84rem;
    transition:background .25s,color .25s,border-color .25s,transform .25s,box-shadow .25s}
  .svc-sec .service:hover .service-body a,.svc-sec .service:active .service-body a,.svc-sec .service-body a:focus-visible{
    background:#ff7a1a;border-color:#ff7a1a;color:#fff;transform:translateX(5px);box-shadow:0 6px 14px rgba(255,122,26,.35)}
  .svc-sec .service-body a::after{content:"";position:absolute;inset:0}   /* the whole card is the link */
  .svc-sec .service-body .btn-ghost{display:none!important}   /* WhatsApp button inside cards: laptop only */
  .lm-d{display:none}
  .lm-m{display:inline}
  .svc-go{display:grid;position:relative;z-index:2;flex:0 0 30px;width:30px;height:30px;place-items:center;border-radius:50%;
    color:#0a3d8a;background:#fff;box-shadow:0 2px 6px rgba(10,61,138,.15);transition:background .25s,color .25s,transform .25s}
  .svc-go svg{animation:svcNudge 1.6s ease-in-out infinite}
  .svc-go:hover,.svc-go:active,.svc-go:focus-visible,.svc-sec .service:hover .svc-go{background:#ff7a1a;color:#fff;transform:scale(1.12)}
  .svc-go:hover svg,.svc-sec .service:hover .svc-go svg{animation-duration:.7s}

  /* ---- "Not sure what's wrong?" card ---- */
  .svc-sec .service.call-card{border-radius:18px;transform:none}
}

@media(max-width:380px){
  .page-banner h1{font-size:1.7rem}
  .svc-sec .service:not(.call-card){gap:12px;padding:14px 14px}
  .svc-sub{max-width:165px}
  .svc-sec .service-img{flex-basis:72px;width:72px;height:72px}
  .svc-sec .service-body p{font-size:.8rem}
}

@keyframes svcNudge{0%,100%{transform:translateX(-1px)}50%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.svc-go svg{animation:none}}

@media(max-width:340px){
  .page-banner .container{padding-left:20px;padding-right:20px}
  .page-banner h1{font-size:1.5rem}
  .svc-sub{font-size:.88rem}
}