@media (max-width: 980px) {
  .site-header { position: relative; align-items: center; flex-direction: row; min-height: 70px; padding: .25rem 1.25rem; border-radius: 0; border-block-end: 1px solid #e7e9ed; background: #fff; box-shadow: 0 2px 8px rgba(43, 29, 35, .08); }
  .brand { align-self: center; }
  .logo-mark { width: 62px; height: 62px; }
  .menu-toggle { display: inline-flex; flex: 0 0 auto; flex-direction: column; justify-content: center; gap: .28rem; width: 2.25rem; height: 1.7rem; padding: .35rem; border: 0; border-radius: .25rem; background: var(--soft); color: #666; cursor: pointer; }
  .menu-toggle:hover { color: var(--primary); background: #f5f5f5; }
  .menu-toggle span { display: block; width: 100%; height: 3px; border-radius: 999px; background: currentColor; }
  .site-nav { position: absolute; inset-block-start: 100%; inset-inline: 0; z-index: 30; display: none; gap: .25rem; flex-direction: column; align-items: stretch; padding: .75rem 1rem 1rem; border-block-end: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }
  .site-header.menu-open .site-nav { display: flex; }
  .site-nav a, .site-nav .nav-dropdown, .site-nav .lang-btn { width: 100%; }
  .site-nav a { padding: .7rem .8rem; }
  .nav-dropdown > .dropdown-toggle { width: 100%; justify-content: space-between; padding: .7rem .8rem; text-align: start; }
  .nav-dropdown .dropdown-menu { position: static; display: none; margin-block-start: .25rem; box-shadow: none; opacity: 1; pointer-events: auto; transform: none; }
  .nav-dropdown.dropdown-open .dropdown-menu { display: grid; }
  .hero { flex-direction: column; text-align: center; }
  .hero-info { display: flex; align-items: center; flex-direction: column; }
  .button-row { justify-content: center; }
  .focus-card { min-height: 12rem; }
  .service-card { grid-template-columns: 1fr; }
  .service-card.is-reversed img { order: 0; }
  .service-card img { min-height: 14rem; max-height: 18rem; }
  .disease-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .info .button-row { flex-direction: column; }
  .site-shell { width: 100%; margin: 0; border-radius: 0; }
  .site-footer { border-radius: 0; }
  body { background-attachment: scroll; }
  .cols, .contact-grid { grid-template-columns: 1fr; }
  .disease-card { flex-direction: column; }
  .disease-card img { width: 100%; height: 13rem; flex-basis: auto; }
  .disease-grid { grid-template-columns: 1fr; }
  .site-footer .copy { margin-inline-start: 0; width: 100%; }
  .whatsapp-float { inset-inline-start: 1rem; inset-block-end: 1rem; }
}


@media (max-width: 700px) {
  .hair-extensions img { display: block; width: 100%; height: auto; }
}

@media (max-width: 700px) {
  .site-shell { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; }
  .site-shell > main { flex: 1; }
}

@media (max-width: 980px) {
  html body .site-shell .disease-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
}

@media (max-width: 700px) {
  html body .site-shell .disease-grid .disease-card img { height: 5.5rem; }
  html body .site-shell .disease-grid .disease-card > div { padding: .5rem; }
  html body .site-shell .disease-grid .disease-card h2 { min-height: 0; margin-block-end: .35rem; font-size: .78rem; line-height: 1.5; }
  html body .site-shell .disease-grid .disease-card p { margin-block-end: .4rem; font-size: .68rem; line-height: 1.6; }
  html body .site-shell .disease-grid .disease-card .badge { padding: .25rem .45rem; font-size: .6rem; }
  html body .site-shell .disease-grid .source-article-card .badge { inset-block-start: .35rem; inset-inline-start: .35rem; max-width: calc(100% - .7rem); }
  html body .site-shell .disease-grid .disease-card .service-link { font-size: .68rem; }
  html body .site-shell .disease-grid .disease-card .meta { font-size: .65rem; }
}