/* =========================================================================
   responsive.css — media queries only, desktop-first, descending.
   1600 · 1280 · 1024 · 768 · 480
   ========================================================================= */

/* ---------- 1600 ---------- */
@media (max-width: 1600px) {
}

/* ---------- 1280: navigation becomes a drawer ---------- */
@media (max-width: 1280px) {
  :root { --section-padding: var(--space-10); --header-height: 84px; }

  .site-header .site-logo img { height: 50px; }
  .nav-toggle { display: inline-flex; }

  .site-header .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 110;
    display: flex;
    flex-direction: column;
    width: min(440px, 100vw);
    background: var(--color-ink-deep);
    color: var(--color-white);
    font-size: 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.45s var(--ease-out), visibility 0.45s;
  }
  .site-header .main-nav.open { transform: none; visibility: visible; }

  .site-header .nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 18px; border-bottom: 1px solid var(--color-ink-line); }
  .site-header .nav-drawer-head img { width: auto; height: 42px; }
  .site-header .nav-drawer-head .icon-button { background: var(--color-ink-raised); }
  .site-header .nav-drawer-foot { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding: 18px 22px 24px; border-top: 1px solid var(--color-ink-line); }
  .site-header .nav-drawer-foot .btn-row { flex-wrap: nowrap; gap: 10px; }
  .site-header .nav-drawer-foot .btn-row .btn { flex: 1; min-height: 50px; padding: 0 16px; font-size: var(--fs-small); }
  .site-header .nav-drawer-foot .btn-ghost { background: var(--color-ink-raised); }
  .site-header .nav-drawer-foot .btn-ghost svg.icon { color: var(--color-lime); }

  .site-header .main-nav .menu { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 24px; }
  .site-header .main-nav .menu-item.menu-item-top { position: relative; border-bottom: 1px solid var(--color-ink-line); }
  .site-header .main-nav .menu-item.menu-item-top > a { display: flex; padding: 18px 48px 18px 0; border-radius: 0; font-family: var(--font-heading); font-weight: var(--fw-semibold); }
  .site-header .main-nav .menu-item.menu-item-top > a:hover,
  .site-header .main-nav .menu-item.menu-item-top:hover > a,
  .site-header.scrolled .main-nav .menu-item.menu-item-top > a:hover,
  .site-header.scrolled .main-nav .menu-item.menu-item-top:hover > a { background: none; color: var(--color-lime); }
  .site-header .main-nav .menu-item.menu-item-top > a[aria-current="page"],
  .site-header .main-nav .current-menu-item.menu-item-top > a,
  .site-header .main-nav .current-menu-ancestor.menu-item-top > a,
  .site-header.scrolled .main-nav .menu-item.menu-item-top > a[aria-current="page"],
  .site-header.scrolled .main-nav .current-menu-item.menu-item-top > a,
  .site-header.scrolled .main-nav .current-menu-ancestor.menu-item-top > a { background: none; color: var(--color-lime); }
  .site-header .main-nav .menu-item-has-children.menu-item-top > a::after { display: none; }

  .site-header .submenu-toggle { position: absolute; top: 10px; right: -8px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-faint); }
  .site-header .submenu-toggle svg { width: 18px; height: 18px; transition: transform var(--transition); }
  .site-header .menu-item-has-children.open > .submenu-toggle { color: var(--color-lime); }
  .site-header .menu-item-has-children.open > .submenu-toggle svg { transform: rotate(180deg); }

  /* panel becomes an accordion */
  .site-header .main-nav .mega-panel,
  .site-header .main-nav .small-drop .mega-panel {
    position: static;
    display: grid;
    grid-template-rows: 0fr;
    width: auto;
    padding: 0;
    color: inherit;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: grid-template-rows 0.4s var(--ease-out);
  }
  .site-header .main-nav .menu-item-has-children.menu-item-top.open > .mega-panel { grid-template-rows: 1fr; }
  .site-header .main-nav .mega-inner,
  .site-header .main-nav .small-drop .mega-inner { display: block; min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; overflow: hidden; }
  .site-header .mega-feature, .site-header .mega-strip, .site-header .mega-profile, .site-header .main-nav .sub-menu .menu-desc { display: none; }
  .site-header .main-nav .sub-menu,
  .site-header .main-nav .mega-products .sub-menu { display: flex; flex-direction: column; gap: 0; padding: 0 0 14px; }
  .site-header .main-nav .sub-menu a { align-items: center; padding: 9px 0; border-radius: 0; color: var(--color-on-dark-bright); font-size: var(--fs-body); }
  .site-header .main-nav .sub-menu a:hover { background: none; color: var(--color-lime); }
  .site-header .main-nav .sub-menu .menu-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--color-ink-raised); color: var(--color-lime); }
  .site-header .main-nav .sub-menu a:hover .menu-icon { background: var(--color-ink-raised); color: var(--color-lime); }
  .site-header .main-nav .sub-menu .menu-title { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-body); }
  .site-header .main-nav .mega-products .menu-group > span { padding: 10px 0 4px; color: var(--color-faint); }
  .site-header .main-nav .mega-products .menu-group a { padding: 7px 0; }
  .site-header .main-nav .menu-thumb { width: 36px; height: 36px; border-radius: 10px; }

  .bento-grid .bento-hero .overlay-title { font-size: 1.75rem; }
  .project-feature .card-body, .blog-feature .card-body { padding: 44px 40px; }
}

/* ---------- 1024 ---------- */
@media (max-width: 1024px) {
  :root { --section-padding: 5rem; }

  .site-header .header-call { display: none; }

  .page-hero { min-height: 540px; padding: calc(var(--header-height) + 64px) 0 72px; }
  .page-hero.tall { min-height: 0; }
  .page-hero.overlap { padding-bottom: 140px; }
  .home-hero .hero-main { padding-top: 48px; }
  .home-hero .hero-form { flex: 1 1 100%; max-width: 560px; }

  .section-head { margin-bottom: var(--space-7); }

  .photo-collage { min-height: 520px; }
  .photo-collage .collage-main { height: 400px; }
  .photo-collage .collage-side { height: 260px; }

  .process-line { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-7); }
  .process-line::before { display: none; }

  .site-footer .footer-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .detail-layout .sidebar, .post-layout .sidebar, .product-layout .gallery { position: static; flex-basis: 100%; }
  .detail-layout .sidebar { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .gallery .gallery-main { height: 460px; }

  .project-feature .card-media { min-height: 380px; }
  .blog-feature .card-media { min-height: 340px; }
  .project-mosaic > .overlay-card { min-height: 520px; }

  .mission-grid .mission-quote, .newsletter-card, .help-card, .brand-card, .mode-card, .brand-panel, .form-card { padding: 40px; }
}

/* ---------- 768 ---------- */
@media (max-width: 768px) {
  :root { --section-padding: 4rem; --gutter: var(--space-5); --header-height: 76px; }

  .site-header .site-logo img { height: 44px; }

  .btn { min-height: 52px; padding: 0 24px; }

  .page-hero { min-height: 0; padding: calc(var(--header-height) + 48px) 0 56px; }
  .page-hero .hero-lead, .home-hero .hero-text { font-size: var(--fs-body); }
  .page-hero.overlap { padding-bottom: 128px; }
  .page-hero.short { padding: calc(var(--header-height) + 20px) 0 20px; }
  .stat-list.glass { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-list.glass li { padding: 20px; }
  .stat-list.glass li + li { border-left: 0; }
  .stat-list.glass li:nth-child(even) { border-left: 1px solid var(--glass-line); }
  .stat-list.glass li:nth-child(n+3) { border-top: 1px solid var(--glass-line); }
  .stat-list .stat-value { font-size: 2rem; }

  .home-hero { min-height: 0; }
  .home-hero .hero-form { padding: 24px; }
  .home-hero .slide-dots button span { width: 24px; }
  .home-hero .slide-dots button[aria-pressed="true"] span { width: 44px; }

  .client-strip .strip-copy { flex: 1 1 100%; }

  .photo-collage { min-height: 440px; }
  .photo-collage .collage-main { width: 86%; height: 320px; }
  .photo-collage .collage-side { width: 60%; height: 210px; }
  .photo-collage .collage-badge { width: 132px; height: 132px; left: 12px; bottom: 16px; }
  .photo-collage .collage-badge strong { font-size: 1.875rem; }
  .photo-collage .collage-card { left: 12px; bottom: 12px; width: 190px; padding: 18px; }

  .bento-grid { grid-auto-rows: 240px; }
  .bento-grid .bento-hero, .bento-grid .bento-wide { grid-column: auto; grid-row: auto; }
  .bento-grid .bento-hero { grid-row: span 2; }
  .bento-grid .bento-hero .overlay-title { font-size: 1.5rem; }
  .bento-grid .bento-hero .overlay-text { font-size: var(--fs-small); }

  .overlay-card.square { aspect-ratio: 4 / 5; }
  .overlay-card.square .overlay-body { padding: 24px; }
  .project-mosaic > .overlay-card { min-height: 460px; }
  .project-mosaic .overlay-body { padding: 24px; }

  .project-feature .card-media, .blog-feature .card-media { flex-basis: 100%; min-height: 280px; }
  .project-feature .card-body, .blog-feature .card-body { padding: 32px 24px; }

  .card-grid.large, .card-grid.wide { grid-template-columns: 1fr; }
  .industry-card .card-media-wrap { height: 240px; }

  .process-line { grid-template-columns: 1fr; }

  .site-footer .footer-top { padding-top: 40px; }
  .site-footer .footer-offices { grid-template-columns: 1fr; }
  .site-footer .footer-office { padding: 26px 0; }
  .site-footer .footer-office + .footer-office { border-top: 1px solid var(--color-ink-line); }
  .site-footer .footer-credit { align-items: flex-start; text-align: left; }

  .cta-band .cta-inner { padding-top: 88px; padding-bottom: 64px; }
  .cta-band.with-form .cta-inner { padding-top: 80px; }

  .mission-grid .mission-quote, .mission-card, .newsletter-card, .help-card, .brand-card, .mode-card, .brand-panel, .form-card, .apps-card, .quote-card, .photo-panel { padding: 28px 24px; }
  .contact-layout .form-card.dark { padding: 28px 24px; }
  .photo-panel { min-height: 460px; }

  .photo-pair { flex-direction: column; }
  .photo-pair .media { height: 240px; }

  .spec-table { padding: 4px 20px; }
  .spec-table div { flex-direction: column; gap: 2px; }
  .spec-table dt { flex: none; }
  .gallery .gallery-main { height: 360px; padding: 28px; }
  .gallery .gallery-thumbs { gap: 10px; }
  .gallery .gallery-thumbs button { height: 84px; }

  .content-area > :first-child { font-size: 1.1875rem; }
  .content-area p, .content-area li { font-size: 1.0625rem; }
  .content-area blockquote { padding: 26px 24px; }
  .content-area blockquote p { font-size: 1.25rem; }

  .contact-overlap { margin-top: -96px; }
  .contact-layout .form-card.dark .site-form { grid-template-columns: 1fr; }

  .error-hero { min-height: 0; padding: calc(var(--header-height) + 56px) 0 80px; }
  .error-hero h1 { margin-top: 36px; }
  .logo-grid.three li { height: 76px; }
  .client-groups .group-intro { flex-direction: column; }
}

/* ---------- 480 ---------- */
@media (max-width: 480px) {
  :root { --gutter: var(--space-4); }

  .site-header .header-cta { display: none; }
  .btn-row > .btn { flex: 1 1 100%; }

  .page-hero h1, .home-hero h1 { font-size: 2.25rem; }
  .stat-list .stat-value { font-size: 1.75rem; }

  .filter-tabs { display: flex; width: 100%; }
  .filter-tabs button { flex: 1; padding: 0 12px; }

  .photo-collage { min-height: 380px; }
  .photo-collage .collage-main { width: 100%; height: 260px; }
  .photo-collage .collage-side { height: 170px; }

  .link-card { gap: 16px; padding: 14px; }
  .link-card .card-media { width: 88px; height: 88px; }

  .gallery .gallery-main { height: 300px; }
  .gallery .gallery-thumbs button { height: 68px; padding: 8px; }

  .contact-tile { padding: 22px; }
  .newsletter-card .inline-form .btn { flex: 1 1 100%; }
  .search-pill { flex-wrap: wrap; padding: 8px; border-radius: var(--radius-xl); }
  .search-pill svg.icon { margin-left: 12px; }
  .search-pill .btn { flex: 1 1 100%; }

  .site-footer .footer-top { flex-direction: column; align-items: flex-start; }

  .back-to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
  .author-row { flex-wrap: wrap; }
  .error-code .error-digit { font-size: 8rem; }
  .error-code .pipe-zero { width: 120px; }
  .content-area table { font-size: var(--fs-xsmall); }
  .content-area th, .content-area td { padding: 14px; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .media::after { animation: none; }
  .js .media img { opacity: 1; transition: none; }
  .js [data-anim]:not(.revealed) { opacity: 1; transform: none; }
  .logo-marquee ul { animation: none; }
}

/* sitemap additions */
@media (max-width: 1024px) {
  .sheet-layout .sidebar { position: static; flex-basis: 100%; }
  .split.reverse { flex-direction: column; }
  .location-media { min-height: 360px; }
}
@media (max-width: 768px) {
  .facility-card .card-media { height: 240px; }
  .location-media { min-height: 280px; }
  .location-media .map-art { width: 160px; height: 110px; right: 12px; bottom: 12px; }
  .sheet-group { padding: 20px; }
  .sheet-list li { flex-wrap: wrap; }
  .sheet-list .btn { margin-left: 60px; }
  .faq-item summary { padding: 18px 20px; font-size: var(--fs-body); }
  .faq-answer { padding: 0 20px 20px; }
}
@media (max-width: 768px) {
  .compare-table { min-width: 0; }
  .compare-table thead { display: none; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: auto; }
  .compare-table tr + tr { border-top: 8px solid var(--color-bg-alt); }
  .compare-table tbody th { width: auto; padding: 18px 20px 8px; border-top: 0; }
  .compare-table td { width: auto; padding: 12px 20px; border-top: 0; }
  .compare-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--color-muted); }
}

@media (max-width: 1024px) {
  .faq-layout > .heading-group { position: static; flex-basis: 100%; }
}
@media (max-width: 768px) {
  .answer-box { margin-bottom: 32px; padding: 22px 20px; }
  .data-table { min-width: 0; }
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: auto; }
  .data-table tr + tr { border-top: 8px solid var(--color-bg-alt); }
  .data-table td { padding: 10px 20px; border-top: 0; }
  .data-table td:first-child { padding-top: 18px; }
  .data-table td:last-child { padding-bottom: 18px; }
  .data-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--font-body); font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--color-muted); }
}
@media (max-width: 768px) {
  .split > .split-photo { min-height: 280px; }
}
@media (max-width: 768px) {
  .photo-pair .media { height: 240px; }
}

@media (max-width: 1280px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .area-grid li { padding: 20px; font-size: 1rem; }
}
@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-group .card-media { aspect-ratio: 4 / 3; }
}

/* product catalogue */
@media (max-width: 1280px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .datasheet-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .use-layout { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 768px) { .spec-chips { grid-template-columns: 1fr; } .datasheet-list { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .catalog-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .data-table.kv td, .data-table.kv td:first-child, .data-table.kv td:last-child { padding: 0 20px; }
  .data-table.kv td::before { display: none; }
  .data-table.kv td:first-child { padding-top: 16px; font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--color-muted); }
  .data-table.kv td:last-child { padding-top: 4px; padding-bottom: 16px; }
  .data-table.grid { display: table; min-width: 560px; }
  .data-table.grid thead { display: table-header-group; }
  .data-table.grid tbody { display: table-row-group; }
  .data-table.grid tr { display: table-row; border-top: 0; }
  .data-table.grid td, .data-table.grid th { display: table-cell; padding: 12px 14px; white-space: nowrap; }
  .data-table.grid td::before { display: none; }
  .spec-block .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 1024px) { .apps-split { grid-template-columns: 1fr; } .apps-panel { position: static; } .card-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .logo-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .app-cards { grid-template-columns: 1fr; } .app-cards li { min-height: 0; } .card-grid.three { grid-template-columns: 1fr; } .apps-panel { padding: 28px 22px; } }
@media (max-width: 600px) { .app-cards li { flex-direction: row; align-items: center; gap: 16px; padding: 18px; } .app-cards .app-num { display: none; } .app-cards .app-name { font-size: 1rem; } }
@media (max-width: 1024px) { .spec-split { grid-template-columns: 1fr; } .quote-card { position: static; } }
@media (max-width: 768px) {
  .data-table.kv.compact { display: table; min-width: 0; }
  .data-table.kv.compact thead { display: none; }
  .data-table.kv.compact tbody { display: table-row-group; }
  .data-table.kv.compact tr { display: table-row; border-top: 0; }
  .data-table.kv.compact td, .data-table.kv.compact td:first-child, .data-table.kv.compact td:last-child { display: table-cell; padding: 11px 14px; font-size: var(--fs-xsmall); border-top: 1px solid var(--color-border-soft); }
  .data-table.kv.compact td:first-child { width: 40%; color: var(--color-ink); font-weight: var(--fw-semibold); }
  .data-table.kv.compact tr:first-child td { border-top: 0; }
}
@media (max-width: 600px) { .ds-strip { flex-wrap: wrap; } .ds-strip .btn { width: 100%; justify-content: center; } .lead-card { padding: 22px 18px; } }