/* Mobile experience refinements, 16 Oct 2026. Desktop stays precisely as approved.
   The desktop tabs + large image remain unchanged; only widths <=800px use this. */
.mobile-services { display: none; }

@media (max-width: 800px) {
  /* Replace the disconnected image-above-tabs layout only on mobile. */
  .home-page .services-section .service-layout { display: none !important; }
  .home-page .services-section { padding: 38px 0 40px; }
  .home-page .services-section .container { max-width: 610px; }
  /* Sticky mobile header must not cover headings after in-page navigation. */
  .home-page main section[id], .care-page main section[id], .about-page main section[id] {
    scroll-margin-top: calc(var(--header) + 10px) !important;
  }
  .home-page .mobile-services { display: block; min-width: 0; }

  .mobile-services-heading { margin: 0 0 19px; }
  .mobile-services-heading .eyebrow { margin-bottom: 11px; font-size: 10px; letter-spacing: .17em; }
  .home-page .mobile-services-heading h2 {
    font-size: clamp(24px, 6.5vw, 29px);
    line-height: 1.1;
    letter-spacing: -.037em;
    font-weight: 800;
    margin: 0;
    max-width: 520px;
    color: #191e22;
  }
  .mobile-services-heading h2 span { display: inline-block; margin-top: 6px; color: #617074; }
  .mobile-service-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
  .mobile-swipe-prompt { display:flex; align-items:center; gap:7px; font-size: 12px; font-weight: 700; color: #087d91; margin: 0; }
  .mobile-swipe-prompt svg { width: 21px; height: 21px; }
  .mobile-service-counter { margin: 0; white-space: nowrap; color: #4d565b; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .12em; }
  .mobile-service-counter #mobile-service-current { color: #027e9b; }
  .mobile-service-count-separator { color: #9aa7a9; }

  /* Native touch swipe + scroll-snap: vertical page scrolling is never hijacked. */
  .mobile-service-track {
    display:flex;
    gap:13px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:1px;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding: 4px 1px 12px;
    margin: 0;
    border-radius: 2px;
    align-items:stretch;
  }
  .mobile-service-track::-webkit-scrollbar { display:none; }
  .mobile-service-card {
    min-width: 0;
    flex: 0 0 min(82vw, 415px);
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid rgba(16,49,57,.10);
    border-radius:19px;
    overflow:hidden;
    scroll-snap-align:start;
    scroll-snap-stop:normal;
    box-shadow:0 4px 17px rgba(13,35,46,.07);
  }
  .mobile-service-photo {
    position:relative;
    width:100%;
    aspect-ratio: 16 / 10;
    overflow:hidden;
    flex:none;
    background:#152b33;
  }
  .mobile-service-photo img { display:block; width:100%; height:100%; object-fit:cover; }
  /* Approved façade photo is 3:2: fit it fully, rather than cropping the drone. */
  .mobile-service-facade img { object-fit:contain; background:#152b33; }
  .mobile-service-tag, .mobile-service-photo-number {
    position:absolute;
    top:12px;
    color:white;
    font-size:10px;
    font-weight:800;
    line-height:1;
    letter-spacing:.11em;
    text-shadow:0 1px 3px rgba(0,0,0,.32);
  }
  .mobile-service-tag { left:12px; padding:9px 10px; border:1px solid rgba(255,255,255,.35); background:rgba(4,25,33,.67); border-radius:40px; }
  .mobile-service-photo-number { right:13px; top:20px; }
  .mobile-service-disclosure {
    position:absolute;
    bottom:8px;
    right:10px;
    font-size:9px;
    font-weight:600;
    color:#fff;
    border-radius:5px;
    background:rgba(5,22,28,.74);
    padding:4px 8px;
  }
  .mobile-service-copy { padding:18px 18px 19px; flex:1; display:flex; flex-direction:column; min-width:0; }
  .mobile-service-copy h3 { font-size:21px; font-weight:800; line-height:1.18; color:#1c2428; margin:0 0 9px; letter-spacing:-.03em; }
  .mobile-service-copy p { font-size:13px; font-weight:400; line-height:1.48; color:#5a6569; margin:0 0 15px; }
  .mobile-service-features { display:flex; flex-wrap:wrap; align-content:flex-start; gap:6px; margin:auto 0 16px; }
  .mobile-service-features span { color:#35616a; font-size:10px; font-weight:700; line-height:1.28; padding:6px 8px; border:1px solid #dce9eb; background:#eff7f8; border-radius:999px; }
  .mobile-service-cta { display:flex; justify-content:center; align-items:center; gap:8px; border-radius:999px; background:#027e9b; color:white; font-size:13px; font-weight:800; min-height:45px; padding:11px 13px; width:100%; text-align:center; }
  .mobile-service-cta svg { width:16px; height:16px; flex:none; }
  .mobile-service-cta:focus-visible, .mobile-service-arrow:focus-visible, .mobile-service-dots button:focus-visible { outline:3px solid #0aa6c5; outline-offset:3px; }
  .mobile-service-cta:active { background:#07687f; }

  .mobile-service-controls { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0 0; }
  .mobile-service-arrow { flex:none; width:44px; height:44px; border-radius:50%; border:1px solid #d9e1e1; background:white; color:#0a687d; display:flex; align-items:center; justify-content:center; padding:0; }
  .mobile-service-arrow svg { width:19px; height:19px; }
  .mobile-service-arrow:disabled { color:#a7afb0; opacity:.55; cursor:default; }
  .mobile-service-dots { display:flex; align-items:center; justify-content:center; gap:2px; flex:1; }
  .mobile-service-dots button { flex:0 0 25px; width:25px; height:40px; display:flex; align-items:center; justify-content:center; padding:0; background:transparent; border:0; border-radius:20px; }
  .mobile-service-dots button span { display:block; width:6px; height:6px; background:#bdc9c9; border-radius:10px; transition:width .2s ease,background .2s ease; }
  .mobile-service-dots button[aria-current="true"] span { width:16px; background:#007f9e; }
  .mobile-carousel-continuation { text-align:center; color:#728083; font-size:11px; letter-spacing:.01em; margin:13px 0 0; }
  .mobile-carousel-continuation span { color:#087d91; margin-left:3px; }

  /* Existing floating button covers photos, selectors and form fields on phones.
     Quote actions remain available in the hero, each service card, menu and form. */
  .floating-quote { display:none !important; }
}

@media (max-width: 359px) {
  .mobile-service-copy { padding: 15px; }
  .mobile-service-copy h3 { font-size:19px; }
  .mobile-service-copy p { font-size:12.5px; }
  .mobile-service-dots button { flex-basis:21px; width:21px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-service-track { scroll-behavior:auto; }
  .mobile-service-dots button span { transition:none; }
}