@media (max-width: 1100px) {
  .desktop-nav { display: none; }
  .nav-toggle { display: inline-grid; }
  .strength-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dosage-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .segments-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-rail.is-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .footer-main { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .topbar { display: none; }
  .site-header { padding: 4px; }
  .nav-shell { padding: 0; }
  .nav-card { width: 100%; border: 1px solid rgba(201,164,75,.18); border-radius: 19px; }
  .nav-row { min-height: 64px; padding: 8px 12px; }
  .brand-logo { width: 190px; }
  .hero-slider { min-height: auto; }
  .hero-slide-inner { min-height: auto; flex-direction: column; text-align: center; gap: 28px; padding-top: 54px; padding-bottom: 88px; }
  .hero-content { order: 2; }
  .hero-content p { margin-inline: auto; }
  .hero-visual { order: 1; width: 100%; }
  .hero-image-frame { width: min(66vw, 360px); }
  .hero-info-badge { right: 50%; transform: translateX(50%); bottom: -18px; }
  .about-grid { grid-template-columns: 1fr; gap: 42px; }
  .about-shape { display: none; }
  .about-visual { max-width: 720px; margin: 0 auto; width: 100%; }
  .about-main-pic { width: 100%; height: 380px; }
  .about-content { max-width: 720px; margin: 0 auto; }
  .contact-card { display: block; }
  .contact-info-panel, .contact-form-panel { padding: 46px 34px; }
  .career-overview-grid, .hiring-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) and (min-width: 681px) {
  .product-rail.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .product-rail.is-grid .product-image-box { height: 180px; }
  .contact-item strong { font-size: .94rem; }
  .segment-card { padding: 28px 20px 22px; }
  .segment-image-wrap { width: 118px; height: 118px; margin-bottom: 20px; }
}

@media (max-width: 680px) {
  .section-space { padding: 62px 0; }
  .site-container { width: min(100% - 28px, var(--container)); }
  .brand-logo { width: 168px; }
  .icon-btn { width: 38px; height: 38px; background: rgba(255,255,255,.94); border: 1px solid rgba(31,90,63,.1); }
  .search-panel { top: 72px; padding: 17px; }
  .search-field { display: grid; }
  .hero-content h1, .hero-heading { font-size: clamp(2.15rem, 12vw, 3.2rem); }
  .hero-image-frame { width: min(76vw, 320px); border-top-width: 9px; border-left-width: 9px; }
  .hero-info-badge { padding: 10px 16px; font-size: .62rem; }
  .about-main-pic { height: 320px; border-radius: 24px; }
  .about-secondary-pic { width: 150px; height: 150px; }
  .product-rail { grid-auto-columns: minmax(82%, 1fr); padding: 25px 14px 32px; border-radius: 26px; }
  .product-rail.is-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .product-rail.is-grid .product-image-box { height: 150px; }
  .product-rail.is-grid .product-card-content { padding: 11px; }
  .product-rail.is-grid .product-card h3 { font-size: .76rem; }
  .dosage-grid { grid-template-columns: 1fr; }
  .segments-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .segment-card { padding: 18px 10px 14px; border-radius: 14px; }
  .segment-image-wrap { width: 70px; height: 70px; margin-bottom: 12px; }
  .segment-card h3 { font-size: .9rem; line-height: 1.25; }
  .segment-card p { font-size: .75rem; line-height: 1.4; }
  .strength-grid { grid-template-columns: 1fr; }
  .form-grid.two { grid-template-columns: 1fr; }
  .contact-info-panel, .contact-form-panel { padding: 36px 22px; }
  .contact-card { border-radius: 26px; }
  .career-promo { align-items: flex-start; flex-direction: column; }
  .career-form-card { padding: 28px 20px; }
  .footer-main { grid-template-columns: 1fr; padding: 24px 18px; text-align: center; }
  .footer-brand img { margin-inline: auto; }
  .footer-heading { justify-content: center; }
  .footer-contact-row { flex-direction: column; align-items: center; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .legal-section { padding: 24px 20px; }
  .not-found-card { padding: 36px 20px; }
}

@media (max-width: 390px) {
  .brand-logo { width: 145px; }
  .nav-row { gap: 7px; }
  .hero-slide-inner { padding-top: 42px; }
  .hero-info-badge { max-width: 240px; white-space: normal; justify-content: center; }
  .product-rail.is-grid { grid-template-columns: 1fr; }
}