/* Responsive layer for c005-fourpaw — mobile only, desktop unchanged.
   All rules gated behind max-width so the 950px desktop design is never altered. */

@media (max-width: 768px) {
  .wrap { width: auto !important; max-width: 100% !important; margin: 0 auto; padding: 0 14px; box-sizing: border-box; }
  img { max-width: 100%; height: auto; }

  /* Header: stack logo + contact */
  #header { height: auto !important; padding: 14px 0; }
  #header .brandlogo, #header h1 { float: none !important; margin: 0 auto 8px !important; text-align: center; }
  #header .brandlogo img, #header h1 img { max-width: 240px; }
  #header .contact { float: none !important; margin: 0 !important; text-align: center; }
  #header .contact p { text-align: center; }
  #header .contact .number { width: auto !important; height: auto !important; background: none !important; }
  #header .contact .number span { display: inline !important; font-weight: bold; color: #103066; }

  /* Main visual: let it size to content, drop the fixed 377px + desktop bg */
  #mainvisual { height: auto !important; background-position: center 0; background-size: cover; padding-bottom: 16px; }
  #mainvisual .b { background: none !important; }
  #mainvisual .wrap > img { display: none; } /* decorative pets collage (positioned art) */

  /* Nav: turn the absolutely-positioned menu into a normal wrapping bar */
  #mainvisual ul { position: static !important; margin: 0 0 12px !important; padding: 8px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
  #mainvisual ul li { float: none !important; margin: 0 !important; background: none !important; }
  #mainvisual ul li a { padding: 6px 10px !important; margin: 0 !important; }

  #mainvisual .text { position: static !important; width: auto !important; text-align: center; padding: 8px 0; }
  #mainvisual .text h1.hero-h1 { font-size: 1.9em; }

  /* Service boxes: stack full width */
  #mainvisual .block { position: static !important; width: auto !important; margin-top: 10px; }
  #mainvisual .block .box { float: none !important; width: auto !important; margin: 0 0 12px !important; }

  /* Body: content + sidebar stack */
  #container .content, #container .sidebar, #inner #container .content {
    float: none !important; width: auto !important; margin: 0 0 20px !important;
  }
  #container .content img { display: block; margin: 0 auto 10px; }

  /* Contact form fields fluid */
  .sidebar input[type="text"], .sidebar input[type="email"], .sidebar textarea,
  .wpcf7 input, .wpcf7 textarea { width: 100% !important; max-width: 100%; box-sizing: border-box; }

  /* Footer stack */
  #footer .wrap > * { float: none !important; width: auto !important; margin-bottom: 10px; }
}

@media (max-width: 420px) {
  #mainvisual .text h1.hero-h1 { font-size: 1.55em; }
  #mainvisual ul li a { padding: 5px 8px !important; font-size: 13px; }
}