/* Keep the brand mark stable while scrolling; only the header background changes. */
#app .nav-container { box-sizing: border-box; }
#app .nav-container .logo img { display: block; object-fit: contain; }
@media (max-width: 800px) {
  html { font-size: 12px !important; }
  #app .layout_main { overflow: visible; }
  #app .nav-container .nav-item { min-height: 44px; display: flex; align-items: center; padding-bottom: 0; }
  #app .nav-container .nav-item::after { bottom: 4px; }
  #app .restored-hero { min-height: 640px; }
  #app .restored-copy { left: 6%; right: 6%; top: 50%; transform: translateY(-36%); }
  #app .restored-copy h1 { font-size: clamp(50px, 12vw, 92px); }
  #app .restored-label { font-size: 11px; margin-bottom: 22px; }
  #app .restored-lead { font-size: 15px; margin: 24px 0; }
  #app .restored-actions { flex-wrap: wrap; gap: 10px; }
  #app .restored-actions a { min-height: 44px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 12px; }
  #app :is(.approach, .org-section, .production-center-section, .footwear-lab-section, .recognition-section, .wide-step-section, .process-section, .contact-section) { height: auto; max-height: none; min-height: 0; box-sizing: border-box; width: 100%; margin-bottom: 0; }
  #app :is(.production-center-section, .footwear-lab-section, .recognition-section, .process-section, .contact-section) { display: flex; flex-direction: column; }
  #app .approach { padding: 40px 6%; }
  #app .approach :is(.box1, .box2) { height: auto; flex-direction: column; gap: 24px; margin: 0 0 40px; }
  #app .approach :is(.aside-left, .aside-right) { width: 100%; height: auto; margin: 0; }
  #app .approach :is(.aside-left, .aside-right) > img { height: auto; max-height: 320px; }
  #app .approach .content-wrapper { max-width: none; }
  #app :is(.production-center-section, .footwear-lab-section, .recognition-section) > :is(.content-left, .content-right, .image-left, .image-right) { width: 100%; height: auto; padding: 32px 6%; box-sizing: border-box; }
  #app :is(.production-center-section, .footwear-lab-section) > :is(.image-left, .image-right) { padding: 0; height: 300px; }
  #app .recognition-section > .image-left { height: 360px; }
  #app .recognition-section :is(.main-title, .awards-list) { padding: 0; }
  #app .footwear-lab-section .stats-grid { gap: 24px 12px; }
  #app .footwear-lab-section .stat-item { flex-direction: column; align-items: flex-start; gap: 10px; }
  #app .footwear-lab-section .text-wrapper { margin-left: 0; }
  #app .contact-section .contact-info { width: 100%; min-width: 0; overflow-wrap: anywhere; }
  #app .contact-section .contact-info * { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  #app .org-section { padding: 40px 6%; }
  #app .org-section .section-header { padding: 0 0 24px; }
  #app .org-section .cards-container { display: grid; grid-template-columns: 1fr; gap: 24px; min-height: 0; padding: 0; perspective: none; touch-action: pan-y; }
  #app .org-section .org-card { position: relative !important; width: 100% !important; height: auto; left: auto !important; top: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; padding: 20px; pointer-events: auto !important; }
  #app .org-section .card-img { height: 220px; }
  #app .org-section :is(.nav-arrows, .nav-dots) { display: none; }
  #app .wide-step-section { padding: 40px 6%; }
  #app .wide-step-section .section-header { height: auto; margin-bottom: 24px; }
  #app .wide-step-section .cards-container { width: 100%; flex-direction: column; }
  #app .wide-step-section .card { width: 100%; min-width: 0; height: auto; padding: 24px; }
  #app .process-section { padding: 40px 6%; gap: 32px; }
  #app .process-section > :is(.left-content, .right-list) { width: 100%; height: auto; padding: 0; margin: 0; }
  #app .process-section .middle-decoration { display: none; }
  #app .contact-section { padding: 40px 6%; gap: 24px; }
  #app .contact-section > :is(.card-left, .card-right) { position: relative; inset: auto; width: 100%; height: auto; margin: 0; padding: 24px; box-sizing: border-box; }
  #app :is(.approach, .org-section, .production-center-section, .footwear-lab-section, .recognition-section, .wide-step-section, .process-section, .contact-section) :is(p, li) { font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
  #app :is(.approach, .org-section, .production-center-section, .footwear-lab-section, .recognition-section, .wide-step-section, .process-section) h2 { font-size: 30px; line-height: 1.15; }
  #app :is(.org-section, .recognition-section, .process-section) h3 { font-size: 22px; }
  #app .approach .button-group { flex-wrap: wrap; gap: 12px; }
  #app .approach .btn { min-height: 44px; font-size: 14px; }
  #app footer { height: auto; padding: 32px 6%; flex-wrap: wrap; gap: 24px; }
  #app footer p, #app footer a { font-size: 14px; overflow-wrap: anywhere; }
}
@media (max-width: 520px) {
  #app .nav-container, html.nav-scrolled #app .nav-container { height: 104px; padding-inline: 12px; }
  #app .nav-container .nav-right { gap: 8px; }
  #app .nav-container .nav-item { font-size: 10px; }
  #app .nav-container .contact-btn { font-size: 9px; padding: 0 10px; min-height: 40px; }
  #app .reference-about .main-title { font-size: clamp(32px, 9vw, 44px); }
}
@media (max-height: 600px) and (orientation: landscape) {
  #app .restored-hero { min-height: 640px; }
}