/* ============================================================
   NUTSHELL — Responsive polish (loaded last)
   Mobile-first guarantees + small-screen refinements
   ============================================================ */

/* Never allow horizontal overflow */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, iframe, video { max-width: 100%; }

/* ---------- Tablet (<= 1000px) ---------- */
@media (max-width: 1000px) {
  :root { --nav-h: 70px; }
  .section { padding: clamp(56px, 9vw, 104px) 0; }
}

/* ---------- Small tablet / large phone (<= 760px) ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .s-head { margin-bottom: 36px; }
  .hero { padding: calc(var(--nav-h) + 28px) 0 56px; min-height: 88vh; min-height: 88svh; }
  .hero__actions .btn { flex: 1 1 auto; }
  /* comparison: keep readable */
  .compare__head-brand .tag { white-space: nowrap; }
}

/* ---------- Phone (<= 560px) ---------- */
@media (max-width: 560px) {
  :root { --container: 92vw; --container-wide: 92vw; --container-sm: 92vw; }
  .hero__title { font-size: clamp(2.3rem, 9vw, 3.1rem); }
  .hero__actions { gap: 12px; }
  .hero__actions .btn { width: 100%; }
  .hero__trust { gap: 12px; }
  .hero__trust-sep { display: none; }

  /* floating cards shouldn't crowd on tiny screens */
  .hero__badge-float { left: 8px; bottom: 18px; padding: 14px 16px; max-width: 210px; }
  .hero__rating-float { right: 8px; top: 18px; padding: 11px 14px; }

  .btn { padding: 14px 24px; }
  .btn--lg { padding: 15px 26px; }

  /* section heads */
  .s-title { font-size: clamp(1.9rem, 8vw, 2.4rem); }

  /* services / cards single column already; tighten padding */
  .svc { padding: 28px 24px 24px; }

  /* stats / vstats */
  .vstat { padding: 28px 20px; }

  /* journey + managed */
  .managed__item { gap: 13px; }

  /* faq */
  .faq__q { font-size: 1.05rem; padding: 20px 2px; }

  /* modal full-ish */
  .modal-backdrop { padding: 14px; }

  /* infographic tabs wrap nicely */
  .info-tab { padding: 10px 15px; font-size: .82rem; }
  .info-tab-row { gap: 8px; margin-bottom: 34px; }

  /* coverage chips smaller */
  .cover__chip { padding: 8px 14px; font-size: .82rem; }
  .map-cta { justify-content: center; }
  .map-cta__note { width: 100%; justify-content: center; }
  .map-gmaps { width: 100%; justify-content: center; }

  /* creed */
  .creed__logo { width: min(280px, 70vw); }

  /* cta phone block wraps */
  .cta__phone { flex-wrap: wrap; }

  /* footer */
  .footer { padding-top: 56px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* comfortable tap targets on touch screens */
  .footer__col a, .footer__legal a { padding-block: 10px; }
  .drawer__meta a { padding-block: 10px; }

  /* beacon labels a touch smaller so they don't clip */
  .beacon__label { font-size: 11px; padding: 4px 9px; }
}

/* ---------- Very small (<= 380px) ---------- */
@media (max-width: 380px) {
  .topbar { display: none; }
  .hero__title { font-size: 2.05rem; }
  .nav__cta { padding: 10px 16px; font-size: .82rem; }
  .modal__title { font-size: 1.45rem; }
}

/* ---------- Landscape phones / short viewports ---------- */
@media (max-height: 520px) and (max-width: 920px) {
  .app__stage { height: 78vw; }
}

/* ---------- Mobile: phone-only app mockup ---------- */
@media (max-width: 560px) {
  .app__stage { width: 236px !important; max-width: 236px !important; height: auto !important; min-height: 0 !important; margin: 20px auto 12px !important; }
  .dev-laptop, .dev-ipad { display: none !important; }
  .dev-phone { position: relative !important; inset: auto !important; width: 236px !important; animation: none !important; }
}
@media (max-width: 400px) {
  .app__stage { width: 200px !important; max-width: 200px !important; }
  .dev-phone { width: 200px !important; }
}

/* ---------- Reduce motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* nav must always fit: the phone CTA stays visible even on the smallest phones */
@media (max-width: 430px) {
  .nav__cta { padding: 8px 10px; font-size: .74rem; }
  .nav__cta--tel svg { display: none; }
  .nav__actions { gap: 6px; }
}
@media (max-width: 360px) {
  .theme-toggle { display: none; }
}

/* ---------- Phone hero (CEO 2026-08-10): the photo STAYS the full-bleed
   background — the crop only shifts slightly so both the resident and the
   dog are in frame. The trust pills are hidden on phones (the accreditation
   strip directly below repeats them) and the hero is compact, which widens
   the visible slice of the photo. */
@media (max-width: 640px) {
  .hero__trust { display: none; }
  .hero { min-height: auto; padding: calc(var(--nav-h) + 16px) 0 44px; }
  .hero__bg img { object-position: 33% 50%; }
}

/* ---------- Get in Touch on phones & mini-tablets (CEO 2026-08-10) ----------
   In single-column layout the contact-method cards were capped at 460px
   against a full-width form, so the section read off-balance. */
@media (max-width: 900px) {
  .cta__methods { max-width: none; }
  .cta__method { width: 100%; }
}

/* ---------- Comparison table on phones (CEO 2026-08-10) ----------
   Feature name gets its own full-width line, the two comparison cells sit
   side by side beneath it, so rows always align. */
@media (max-width: 560px) {
  .compare__row { grid-template-columns: 1fr 1fr; }
  .compare__cell--feature { grid-column: 1 / -1; padding: 12px 14px 4px; justify-content: flex-start; font-size: .86rem; }
  .compare__cell--nut, .compare__cell--alt { padding: 10px 8px 14px; }
  .compare__row--head .compare__cell--feature { display: none; }
  .compare__row--head .compare__cell { padding-top: 18px; padding-bottom: 18px; }
}