/* 623 PC mobile/desktop responsive repair — 2026-08-03
   Scope: layout normalization only. Content, branding, links and functionality preserved. */
html { width: 100%; max-width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { width: 100%; max-width: 100%; min-width: 0 !important; overflow-x: clip !important; }
*, *::before, *::after { box-sizing: border-box; }
img, picture, video, canvas, svg, iframe { max-width: 100% !important; }
img, video { height: auto; }
iframe { width: 100%; }
pre, code, table { max-width: 100%; }
pre, code { overflow-wrap: anywhere; word-break: break-word; }

/* Prevent fixed-width content from forcing horizontal scrolling. */
.container, .wrap, .shell, .inner, .content, main, section, header, footer {
  max-width: 100%;
}
input, select, textarea, button { max-width: 100%; }

/* Desktop: keep the existing navigation design intact. */
@media (min-width: 901px) {
  body > nav.nav .pc623-mobile-nav-toggle,
  body > nav.nav .menu-toggle,
  .pc623-mobile-nav-overlay,
  .pc623-mobile-nav-drawer { display: none !important; }
}

/* Mobile navigation: one compact brand mark and one hamburger only. */
@media (max-width: 900px) {
  body > nav.nav {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    min-height: 64px !important;
    overflow: visible !important;
    z-index: 10000 !important;
  }
  body > nav.nav > .container {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    min-height: 64px !important;
    margin: 0 auto !important;
    padding: 8px 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  body > nav.nav .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 62px) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: hidden !important;
  }
  body > nav.nav .brand-mark {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    flex: 0 0 48px !important;
    border-radius: 15px !important;
    font-size: 16px !important;
  }
  body > nav.nav .brand > span:last-child {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  body > nav.nav .brand strong {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    writing-mode: horizontal-tb !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  body > nav.nav .brand small { display: none !important; }
  body > nav.nav .nav-links,
  body > nav.nav .nav-actions,
  body > nav.nav .menu-toggle { display: none !important; }
  body > nav.nav .pc623-mobile-nav-toggle {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    border-radius: 14px !important;
  }
  body > nav.nav .pc623-mobile-nav-toggle > span:last-child { display: none !important; }

  /* Ensure the drawer remains usable on small screens. */
  .pc623-mobile-nav-overlay { position: fixed !important; inset: 0 !important; z-index: 10001 !important; }
  .pc623-mobile-nav-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10002 !important;
    width: min(88vw, 360px) !important;
    max-width: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* General mobile content hardening. */
  .container { width: calc(100% - 24px) !important; margin-left: auto !important; margin-right: auto !important; }
  .hero-grid, .grid, .cards, .card-grid, .service-grid, .feature-grid, .footer-grid,
  [class*="grid"] { min-width: 0; }
  .hero-grid > *, .grid > *, .cards > *, .card-grid > *, .service-grid > *, .feature-grid > *,
  [class*="grid"] > * { min-width: 0; max-width: 100%; }
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hero-actions, .actions, .button-row, .cta-row { flex-wrap: wrap !important; }
  .hero-actions .btn, .actions .btn, .button-row .btn, .cta-row .btn { max-width: 100%; }
  h1, h2, h3, p, a, li, label { overflow-wrap: break-word; }
}

@media (max-width: 520px) {
  body > nav.nav > .container { width: calc(100% - 18px) !important; }
  body > nav.nav .brand > span:last-child { display: none !important; }
  body > nav.nav .brand { max-width: 50px !important; flex: 0 0 50px !important; }
  .container { width: calc(100% - 20px) !important; }
  h1 { font-size: clamp(2rem, 10vw, 3rem); line-height: 1.05; }
  .hero-actions .btn, .actions .btn, .button-row .btn, .cta-row .btn { width: 100%; }
}