/* Figma 447:96 — mobile layouts use the same content, media and brand tokens. */
.mobile-nav-toggle { display:none; }

@media (max-width:1119px) {
  :root { --gutter:24px; }
  body { min-width:0; line-height:25px; overflow-wrap:anywhere; }

  header:has(> .language-picker) {
    position:relative; min-height:68px; padding-block:10px;
    flex-wrap:wrap; justify-content:flex-start; gap:8px;
    border-bottom:1px solid var(--border);
  }
  header .brand, header.home-header .brand { order:1; width:auto; gap:8px; font-size:18px; }
  header .brand img, header.home-header .brand img { width:32px; height:32px; }
  header .language-picker { order:2; position:static; margin-inline-start:auto; }
  .language-picker > summary { min-width:56px; min-height:48px; justify-content:center; background:var(--ghost); }
  header .language-picker > nav {
    inset-block-start:100%; inset-inline:var(--gutter); width:auto;
    max-width:420px; margin-inline-start:auto; max-height:calc(100dvh - 84px);
  }
  .mobile-nav-toggle {
    order:3; display:grid; place-items:center; flex:0 0 44px; height:44px; padding:0;
    border:0; border-radius:var(--radius); background:var(--ghost); color:var(--text);
  }
  .mobile-nav-toggle[aria-expanded=true] { background:var(--soft); }
  .mobile-nav-toggle[aria-expanded=false] .nav-close-icon,
  .mobile-nav-toggle[aria-expanded=true] .nav-open-icon { display:none; }
  header[data-mobile-nav-ready]:has(> .mobile-nav-toggle[aria-expanded=false]) > :is(.primary-navigation,.button) { display:none; }
  header > nav.primary-navigation, .home-header > nav.primary-navigation { order:4; flex:1 0 100%; }
  header > nav.primary-navigation ul, .home-header > nav.primary-navigation ul {
    display:grid; grid-template-columns:minmax(0,1fr); gap:0;
  }
  header > nav.primary-navigation a {
    min-height:48px; height:auto; padding:10px 12px; justify-content:flex-start;
    white-space:normal; border:0; border-bottom:1px solid var(--border);
  }
  header > nav.primary-navigation a[aria-current=page] { background:var(--soft); border-radius:var(--radius); }
  header > .button, .home-header > .button { order:5; width:100%; min-width:0; }

  .table-wrap { max-width:100%; min-width:0; overscroll-behavior-inline:contain; }
  .table-wrap table { min-width:560px; }
  .pdp-comparison table { min-width:640px; }
  .pdp-comparison th, .pdp-comparison td { padding:12px; }
  .listing-pages { flex-wrap:wrap; }
}

@media (min-width:768px) and (max-width:1119px) {
  .grid:not(.two), .grid.four, .component-grid, .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-hero .container.home-hero-grid { gap:24px; }
  .home-hero .hero-copy h1 { font-size:42px; line-height:50px; }
  .hero-copy .actions { flex-wrap:wrap; }
  .cta .actions { flex-wrap:wrap; justify-content:flex-end; }
  .pdp-stage > img { height:auto; aspect-ratio:4/3; }
  .pdp-metrics { grid-template-columns:minmax(0,1fr); gap:8px; }
}

@media (max-width:767px) {
  :root {
    --gutter:20px;
    --mobile-selection:var(--soft);
    --mobile-field:var(--bg);
    --mobile-field-border:var(--border);
  }
  :is(h1,.hero-copy h1,.home-hero .hero-copy h1,.pdp-config h1) {
    font-size:32px; line-height:38px; letter-spacing:normal;
  }
  :is(h2,.home-section h2,.home-company h2,.home-cta h2,.pdp-section h2,main .section h2) {
    font-size:24px; line-height:31px; letter-spacing:normal;
  }
  :is(h3,h4,h5,.home-process-list h3,.pdp-feature-copy h3,main .section .card-title) {
    font-size:18px; line-height:25px; letter-spacing:normal;
  }
  p, .lead, .pdp-description, .pdp-feature-copy p { font-size:16px; line-height:25px; }
  .button { max-width:100%; padding-inline:16px; }
  /* HeroUI accent for the primary action; selection and secondary actions use quieter surfaces. */
  .home-hero .actions > .button + .button { background:var(--ghost); color:var(--text); }
  .home-hero .actions > .button + .button:hover,
  .filter-tags button[aria-pressed=true], .pdp-options button[aria-checked=true] {
    background:var(--mobile-selection); color:var(--text);
  }

  .section, .home-section, .hero, .home-hero, .cta, .home-cta,
  .section.watch-section { padding-block:var(--space-6); }
  .section .container.stack, .stack, .home-section-content { gap:var(--space-6); }
  .page-intro { padding-block:20px 0; }
  .breadcrumb { flex-wrap:wrap; gap:4px 8px; font-size:12px; line-height:18px; }
  .breadcrumb > span:nth-last-child(-n+2) { display:none; }
  .subnav a { min-height:44px; padding:12px; }

  /* A single reading column across all public page families. */
  .grid, .grid.two, .grid.four,
  .hero .container, .home-hero .container.home-hero-grid, .home-demo-grid,
  .home-process-heading, .home-process-list > li, .home-project-grid, .home-company-grid,
  .case-layout, .home-section .case-layout, .company-overview .case-layout, .regional-overview .case-layout,
  .partnership .container.grid.two, .form-layout, .watch-layout > .watch-contact,
  .product-hero, .pdp-purchase-grid, .pdp-feature-row, .technology-split, .technology-detail,
  .technology-structure-grid, .technology-config .technical-media, .tech-intro,
  .feature-cards, .knowledge-links, .media-feature-header, .home-motion, .motion-item,
  .process-route, .service-list > div, .detail-images, .requirement-matrix {
    grid-template-columns:minmax(0,1fr); gap:20px;
  }
  .row, .between, .section-title.between, .home-section .section-title.between,
  .processes, .steps, .cta .container { flex-direction:column; align-items:stretch; gap:16px; }
  .home-section .section-title.between > .stack, .home-cta .stack { flex:auto; min-height:0; }
  .actions, .home-hero .actions { display:grid; grid-template-columns:minmax(0,1fr); width:100%; gap:8px; }
  .actions .button, .hero-copy .actions .button, .home-hero .actions .button,
  .home-hero .actions .button:nth-child(2), .cta .actions .button, .home-cta .container > .button,
  .home-project .button, .home-section .case-layout .button,
  .home-section .section-title.between > .button, .watch-contact > .button { width:100%; min-width:0; }

  .home-hero .hero-copy, .home-copy, .home-process-heading { gap:12px; }
  .home-process-list { display:grid; gap:10px; border:0; }
  .home-process-list > li {
    gap:6px; padding:14px 16px; background:var(--bg); border:0; border-radius:var(--radius);
  }
  .home-process-list a, .home-company-links a { display:inline-flex; align-items:center; min-height:44px; }
  .home-company-grid { gap:24px; }
  .home-company-grid > .home-copy { display:flex; grid-row:auto; }
  .home-company-grid > .home-copy + .home-copy { border-top:1px solid var(--border); padding-top:20px; }
  .home-company-grid > .home-copy + .home-copy::before { content:none; }

  .filters { flex-direction:column; align-items:stretch; gap:8px; }
  .filter-tags, .pdp-options > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .filter-tags button { min-height:44px; padding:8px; background:var(--ghost); color:var(--text); }
  .card-body, .feature-cards > .card, .watch-layout > .watch-contact { padding:16px; }
  .card-media, .card-media.photo { height:auto; aspect-ratio:16/10; object-fit:contain; background:var(--bg); }
  .equipment-entry { border:1px solid var(--border); }
  .equipment-entry .card-media { padding:8px; }
  .gallery, .workpiece-grid, .company-figures, .technology-power-list,
  .component-grid, .feature-grid, .page-index, .spec-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .factory-gallery .gallery { column-count:2; column-gap:12px; }
  .factory-gallery .gallery img { margin-bottom:12px; }
  .source-gallery .gallery img, .workpiece-grid img, .detail-images img {
    height:auto; aspect-ratio:16/10; object-fit:contain; background:var(--bg);
  }
  .case-layout > img, .home-section .case-layout > img,
  .company-overview .case-layout > img, .regional-overview .case-layout > img, .process-route > img {
    width:100%; height:auto; max-height:none;
  }
  .watch-layout { gap:20px; }
  .watch-layout > article { min-width:0; }

  .pdp-breadcrumb { padding-top:12px; }
  .pdp-breadcrumb .breadcrumb { font-size:12px; line-height:18px; }
  .pdp-purchase { padding-block:12px 24px; }
  .pdp-gallery { gap:8px; }
  .pdp-stage { background:var(--bg); border-radius:var(--radius); }
  .pdp-stage > img { height:auto; aspect-ratio:16/11; }
  .pdp-thumbnails { gap:8px; }
  .pdp-thumbnails > button { width:68px; }
  .pdp-thumb img { height:48px; }
  .pdp-thumb[aria-current=true] { background:var(--soft); }
  .pdp-metrics { grid-template-columns:minmax(0,1fr); gap:0; padding:4px 14px; background:var(--bg); border:0; border-radius:var(--radius); }
  .pdp-metrics > div { display:grid; grid-template-columns:minmax(0,44fr) minmax(0,56fr); align-items:start; gap:12px; padding-block:10px; }
  .pdp-metrics > div + div { border-top:1px solid var(--border); }
  .pdp-metrics dt { margin:0; line-height:21px; }
  .pdp-metrics dd { font-size:15px; line-height:21px; text-align:end; }
  html[dir=rtl] .pdp-metrics dd { text-align:left; }
  .pdp-feature-list { gap:20px; }
  .pdp-feature-row, .pdp-feature-row.text-only { gap:12px; padding:14px; border:1px solid var(--border); border-radius:var(--radius); }
  .pdp-feature-row .pdp-feature-media { order:-1; gap:8px; }
  .pdp-feature-media > img, .pdp-feature-media.multiple > img { height:auto; aspect-ratio:16/10; }
  .pdp-feature-copy { gap:8px; }

  .form-fields { grid-template-columns:minmax(0,1fr); gap:12px; }
  .form-fields :is(input:not([type=checkbox]):not([type=range]):not([type=hidden]),textarea) {
    background:var(--mobile-field); border-color:var(--mobile-field-border);
  }
  .form-fields :is(input:not([type=checkbox]):not([type=range]):not([type=hidden]),textarea):focus {
    border-color:var(--primary);
  }
  .form-fields :is(input:not([type=checkbox]):not([type=range]):not([type=hidden]),textarea)[aria-invalid=true] {
    border-color:var(--error);
  }
  .form-footer { flex-direction:column; gap:8px; margin-top:16px; }
  .form-footer .button, .form-footer .button.primary { width:100%; min-width:0; }
  .consent { min-height:44px; align-items:center; margin-top:12px; }
  .consent br { display:none; }
  #equipment-dialog, #partnership-dialog {
    position:fixed; inset:auto 0 0; margin:0 auto; width:100%; max-width:480px;
    max-height:calc(100dvh - 16px); padding:16px var(--gutter) max(20px, env(safe-area-inset-bottom));
    border-radius:16px 16px 0 0; overscroll-behavior:contain;
  }
  .modal-heading { gap:8px; }
  .modal-heading .close { min-width:44px; height:44px; }
  .modal-intro { margin-block:8px 12px; }

  .ly-preview-stage { inset:64px var(--gutter) 100px; }
  .ly-preview-video { width:min(100%, calc((100dvh - 164px) * 16 / 9)); }
  .ly-preview-caption { inset:auto 68px 28px; line-height:18px; }
  .ly-preview-arrow, .ly-preview-close { width:44px; height:44px; }
  .ly-preview-arrow { top:auto; bottom:20px; transform:none; }
  .ly-preview-prev { left:16px; }
  .ly-preview-next, .ly-preview-close { right:16px; }
  .ly-preview-close { top:12px; }
  .ly-multimedia-viewer .ly-media-error { max-width:100%; }
  .language-hint { inset-inline:var(--gutter); inset-block-end:16px; width:auto; max-width:none; }

  footer { background:var(--dark); color:var(--surface); padding-block:24px; }
  footer :is(.muted,.legal,a:not(.brand)) { color:var(--surface); }
  footer a:not(.brand):focus-visible { outline-color:var(--surface); }
  footer .brand { width:max-content; max-width:100%; padding:6px 10px; background:var(--surface); border-radius:var(--radius); }
  footer .brand img { width:32px; height:32px; }
  footer .top > :first-child { flex-direction:column; align-items:flex-start; gap:12px; }
  footer .top > :first-child > p { flex:auto; }
  .footer-links { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; border-top:1px solid var(--secondary); padding-top:12px; }
  .footer-links > .stack { flex-direction:column; align-items:flex-start; gap:10px; min-width:0; }
  .footer-links > .stack > h2 { width:auto; }
  .home-footer-content { display:none; }
}

@media (max-width:360px) { :root { --gutter:16px; } }