/* ============================================================
   27-mobile-readability — phones/tablets (<=820px) only. Post-launch QA 2026-10-09.
   1. Body copy at 16px minimum: paragraphs, list items and the booking/footer copy
      that rendered at 13.6–15.7px. Short uppercase labels (eyebrows, chips, tags,
      breadcrumbs, button text) are deliberately left at their designed size.
   2. Tap targets at 44px minimum. Where growing the element would change the layout
      (inline links, dots, breadcrumbs), the hit area is enlarged instead: padding
      with a matching negative margin, or a transparent ::after.
   ============================================================ */

@media (max-width: 820px) {

  /* ---------- 1. Body copy: 16px ---------- */
  .sec-23-prose__wrap p,
  .sec-23-prose__list li,
  .sec-12-booking__row-text,
  .sec-12-booking__row-link,
  .sec-12-booking__row-sub,
  .sec-12-booking__hint,
  .sec-12-booking__trust,
  .sec-14-footer .sec-14-footer__contact-link,
  .sec-14-footer .sec-14-footer__copy,
  .sec-14-footer .sec-14-footer__a11y,
  .sec-55-cond-treatment__desc,
  .sec-55-cond-proof__before,
  .sec-55-cond-related__card p,
  .sec-60-svc-grid__benefits li,
  .sec-50-wwt-grid__card p,
  .bm-card p,
  .sec-05-services__desc,
  .sec-07-results__trust,
  .sec-09-team__ask-text,
  .sec-10-testimonials__snippet,
  .sec-11-insurance__footnote,
  .sec-11-insurance__reassurance,
  .sec-16-comebacks__before,
  .sec-22-awards__blurb,
  .sec-40-about-story__caption,
  .sec-40-about-values__copy,
  .sec-40-about-typical__item span,
  .sec-40-about-team__bio,
  .sec-18-faq__card-link,
  .sec-09-team__book,
  .sec-40-about-team__book {
    font-size: 1rem !important; /* several section files size these with higher specificity */
  }

  /* ---------- 2. Tap targets: 44px ---------- */

  /* Header menu button and logos */
  .sec-01-nav .sec-01-nav__toggle {
    width: 44px;
    height: 44px;
  }
  .sec-01-nav__logo,
  .sec-14-footer__logo {
    padding-block: 2px;
    margin-block: -2px;
  }

  /* Footer: stacked page links, phone/email, social icons */
  .sec-14-footer .sec-14-footer__list {
    gap: 0;
  }
  .sec-14-footer .sec-14-footer__list a,
  .sec-14-footer .sec-14-footer__contact-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }
  /* Phone, fax and email keep their own lines (they are display:block in 14-footer). */
  .sec-14-footer .sec-14-footer__contact-link {
    display: flex;
    width: fit-content;
  }
  .sec-14-footer .sec-14-footer__social-link {
    min-width: 44px;
    min-height: 44px;
  }

  /* Inline text links: taller hit area, same layout */
  .sec-00-inthero__crumbs a,
  .sec-12-booking__row-link,
  .sec-13-location__row a,
  .sec-10-testimonials__lockup-link,
  .sec-18-faq__card-link,
  .bm-card__link,
  .sec-50-wwt-grid__link,
  .sec-50-wwt-bodymap__card-link,
  .sec-09-team__book,
  .sec-40-about-team__book,
  .sec-23-prose__list li > a {
    display: inline-block;
    min-width: 44px;
    padding-block: 12px;
    margin-block: -12px;
  }

  /* Small round controls: invisible 44px hit area around the visible dot. The
     testimonial dots get 44px spacing so neighbouring hit areas don't overlap.
     (.motion-pause-btn is keyboard-only, shown on focus, so it is not a touch target.) */
  .sec-10-testimonials__dots {
    gap: calc(44px - 0.55rem);
  }
  .sec-10-testimonials__dot {
    position: relative;
  }
  .sec-10-testimonials__dot::after,
  .bm-dot::after,
  .sec-50-wwt-bodymap__dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}