/* --- Logos: the file is 638px wide; height alone left them at full width,
   which pushed the hamburger and footer off a phone screen. Applies at every
   width, so it sits outside the media query. --- */
.nav-logo img { width: auto; }   /* each page keeps its own height */
footer img, .footer-top img { width: auto; max-width: 220px; }
@media (max-width: 600px) {
  .nav-logo img { height: 46px; }
  footer img, .footer-top img { max-width: 170px; }
}
/* Glam & Fab — phone refinements. Loaded last on every page, so it can correct
   the per-page styles without touching them. Desktop is untouched: everything
   here sits inside a max-width query. */

@media (max-width: 600px) {

  /* --- Readability: nothing below 12px on a phone --------------------- */
  .hero-eyebrow, .section-label, .tx-chips-label, .promo-tag, .branch-tag,
  .stat-label, .footer-tagline, .footer-copy, .footer-links a,
  .contact-detail h4, .branch-detail-text h4, .spec dt, .svc-meta dt,
  form label, .branch-eyebrow, .breadcrumb, .featured-badge, .filter-btn,
  .blog-card-cat, .post-meta, .sub {
    font-size: .75rem;
    letter-spacing: .1em;
  }
  .testimonial-name { font-size: .78rem; }
  .promo-link, .svc-more, .tx-link { font-size: .78rem; }

  /* --- Tap targets: at least ~44px of reachable area ------------------ */
  .hamburger { padding: 12px; margin: -12px; box-sizing: content-box; }
  .footer-links { gap: .2rem 1rem; }
  .footer-links a { display: inline-block; padding: .5rem .1rem; }
  .contact-detail a, .branch-detail-text a, .nap-row a { display: inline-block; padding: .3rem 0; }
  .social-link { width: 44px; height: 44px; }
  .tx-chip { padding: .7rem 1.15rem; }
  .tnav { width: 44px !important; height: 44px !important; }
  .tdot { width: 12px; height: 12px; }
  .tdot.on { width: 30px; border-radius: 6px; }
  .filter-btn { padding: .6rem 1.1rem; }

  /* --- Layout: keep everything inside the screen ---------------------- */
  .nav-logo img { height: 46px; }
  .service-card img { height: 300px; }
  .spec { grid-template-columns: 1fr 1fr; }
  .cta-btns { flex-wrap: wrap; }
  .cta-btns a, .btn-primary, .btn-ghost { text-align: center; }
  table, .prose img { max-width: 100%; }
}

/* Very small phones (320-360px) */
@media (max-width: 380px) {
  .nav-logo img { height: 42px; }
  .spec { grid-template-columns: 1fr; }
  .tx-chip { padding: .65rem .9rem; font-size: .74rem; }
}

@media (max-width: 600px) {
  /* Testimonial carousel: the neighbouring cards sat almost entirely off a
     phone screen at 320px, so bring them in to a readable peek. */
  .tcar { overflow: hidden; }
  .tslide[data-pos="-1"] { transform: translateX(-140px) translateZ(-60px) rotateY(26deg) scale(.82); }
  .tslide[data-pos="1"]  { transform: translateX(140px)  translateZ(-60px) rotateY(-26deg) scale(.82); }

  /* Remaining small text and tap targets found in the phone audit */
  label, .nap-row h3, .branch-detail-text h4 { font-size: .75rem; }
  .promo-link { display: inline-block; padding: .55rem 0; }
  .footer-links a { padding: .6rem .1rem; }
  .breadcrumb a { display: inline-block; padding: .3rem 0; }
}

@media (max-width: 600px) {
  /* iOS Safari zooms the whole page when a focused field is under 16px.
     16px keeps typing in place, on the booking form and in the chat widget. */
  input, select, textarea, .ga-in { font-size: 16px !important; }
}