/* =========================================================
   SILENT KILLER PCB — MOBILE-FIRST FINAL LAYOUT
   v3.3.13
   Public presentation only. No pricing/calculation logic.
   ========================================================= */

@media (max-width: 900px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body {
    padding-top: 64px !important;
    background: #fff !important;
  }

  *, *::before, *::after { box-sizing: border-box; }

  img, svg, video, canvas, iframe {
    max-width: 100% !important;
    height: auto;
  }

  .header, .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: 64px !important;
    z-index: 99990 !important;
    background: #fff !important;
    border-bottom: 1px solid #dfe5e2 !important;
    box-shadow: 0 5px 20px rgba(20, 40, 28, .10) !important;
  }

  .nav-container,
  .site-header .nav-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  .nav-container > .logo,
  .site-header .logo {
    order: 0 !important;
    margin: 0 auto 0 0 !important;
    max-width: calc(100% - 58px) !important;
    min-width: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .nav-container > .hamburger,
  .site-header .nav-wrap > .hamburger {
    order: 1 !important;
    margin: 0 0 0 auto !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    border: 1px solid #d7dfda !important;
    background: #fff !important;
    color: #17212b !important;
  }

  .nav-container > .hamburger span,
  .site-header .nav-wrap > .hamburger span {
    width: 18px !important;
    height: 2px !important;
    background: #17212b !important;
  }

  /* Navigation links are shown by the universal menu panel on phones. */
  .nav-container > .nav,
  .site-header .nav-wrap > nav {
    display: none !important;
  }

  .sk-menu-panel {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 82px) !important;
    overflow-y: auto !important;
    padding: 8px !important;
    border: 1px solid #dfe5e2 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 18px 44px rgba(22, 40, 30, .16) !important;
  }

  .sk-menu-panel a {
    min-height: 44px !important;
    padding: 11px 12px !important;
    color: #34414a !important;
    background: #fff !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    letter-spacing: .35px !important;
    border-radius: 7px !important;
  }

  .sk-menu-panel a:hover,
  .sk-menu-panel a.active {
    color: #0d6f3a !important;
    background: #eaf7ef !important;
  }

  .sk-menu-panel .nav-button,
  .sk-menu-panel a[href*="quotation"],
  .sk-menu-panel a[href*="quote"] {
    color: #fff !important;
    background: #168a4a !important;
    justify-content: center !important;
  }

  /* Consistent page gutters. */
  .container,
  .wrap,
  .page-shell,
  .content-wrap,
  .section-inner,
  .footer-inner {
    width: calc(100% - 28px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-width: 0 !important;
  }

  main,
  main > section,
  section {
    max-width: 100% !important;
  }

  main > section:not(.hero-slider) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Every common two/four-column public layout becomes one clean stack. */
  .hero-content,
  .hero-in,
  .intro-grid,
  .about-grid,
  .about-hero,
  .about-intro-grid,
  .product-grid,
  .products-grid,
  .why-grid,
  .quality-grid,
  .services-grid,
  .capabilities-grid,
  .capability-grid,
  .capability-hero,
  .quality-hero,
  .contact-grid,
  .delivery-grid,
  .quote-grid,
  .quote-premium-grid,
  .quote-hero-content,
  .comparison-grid,
  .pricing-grid,
  .blog-grid,
  .form-grid,
  .assembly-grid,
  .assembly-options,
  .belief-grid,
  .advanced-grid,
  .compact-grid,
  .final-grid,
  .component-categories,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 16px !important;
  }

  /* Cards must never retain desktop width/min-width. */
  .card,
  [class*="-card"],
  [class*="_card"],
  .panel,
  [class*="-panel"],
  .box,
  [class*="-box"],
  .tile,
  [class*="-tile"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Forms are touch-friendly and cannot overflow. */
  form,
  fieldset,
  .form-row,
  .form-group,
  .input-group {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  input, select, textarea, button {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  input, select, textarea {
    width: 100% !important;
    font-size: 16px !important; /* avoids iOS input zoom */
  }

  .btn,
  button,
  input[type="submit"] {
    min-height: 44px;
  }

  .table-wrap,
  .data-table-wrap,
  .price-table-wrap,
  .orders-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table {
    max-width: none !important;
  }

  /* Home slider: let active slide define its own height. No mobile clipping. */
  .hero-slider {
    width: calc(100% - 20px) !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 10px auto 22px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .hero-slides {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .hero-slide {
    display: none !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .hero-slide.active {
    display: block !important;
  }

  .hero-slide-content.container {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 30px 18px 46px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 18px !important;
  }

  .hero-slide-text,
  .hero-slide-image {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero-slide-text h1,
  .hero-slide-text h1 span {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .hero-slide-text h1 {
    margin: 0 !important;
    font-size: clamp(34px, 10.5vw, 48px) !important;
    line-height: .98 !important;
    letter-spacing: -2px !important;
  }

  .hero-slide-text > p:not(.eyebrow) {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 14px 0 0 !important;
  }

  .hero-buttons,
  .cta-buttons,
  .form-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .hero-service-strip,
  .hero-process-rail {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .hero-process-rail i { display: none !important; }

  .hero-slide-image {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .hero-slide-image img {
    width: min(100%, 330px) !important;
    max-width: 330px !important;
    max-height: 245px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  .hero-slider-bottom {
    position: static !important;
    width: 100% !important;
    padding: 0 0 12px !important;
    display: flex !important;
    justify-content: center !important;
  }

  h1, h2, h3, h4,
  p, li, a, span, label {
    overflow-wrap: break-word;
  }
}

@media (max-width: 560px) {
  .container,
  .wrap,
  .page-shell,
  .content-wrap,
  .section-inner,
  .footer-inner {
    width: calc(100% - 24px) !important;
  }

  .hero-slide-content.container {
    padding: 26px 16px 34px !important;
  }

  .hero-slide-text h1 {
    font-size: clamp(32px, 11vw, 43px) !important;
    letter-spacing: -1.7px !important;
  }

  .hero-buttons,
  .cta-buttons,
  .form-actions {
    flex-direction: column !important;
  }

  .hero-buttons .btn,
  .cta-buttons .btn,
  .form-actions .btn,
  .hero-buttons a,
  .cta-buttons a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  main > section:not(.hero-slider) {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .section-title,
  .section-heading,
  main section h2 {
    font-size: clamp(26px, 8vw, 36px) !important;
    line-height: 1.08 !important;
  }

  footer,
  .footer,
  .site-footer {
    text-align: left !important;
  }
}

@media (max-width: 360px) {
  .nav-container,
  .site-header .nav-wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .nav-container > .logo,
  .site-header .logo {
    font-size: 16px !important;
    max-width: calc(100% - 54px) !important;
  }

  .hero-slider {
    width: calc(100% - 12px) !important;
  }

  .hero-slide-content.container {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .hero-slide-text h1 {
    font-size: clamp(29px, 10.5vw, 37px) !important;
  }
}

/* ===== v3.3.13 conflict overrides for legacy high-specificity mobile rules ===== */
@media (max-width: 900px) {
  .header,
  .site-header {
    clip-path: none !important;
    transform: none !important;
    margin-bottom: 0 !important;
  }

  .nav-container > .logo span,
  .site-header .logo span {
    display: inline !important;
  }

  /* Home carousel: legacy premium rules used fixed mobile heights and offsets.
     Force true content-driven sizing so text/art never overlap or crop. */
  .page-home .hero-slider,
  .page-home .hero-slides,
  .page-home .hero-slide,
  .page-home .hero-slide-content.container {
    height: auto !important;
    min-height: 0 !important;
  }

  .page-home .hero-slider {
    margin: 10px auto 22px !important;
  }

  .page-home .hero-slide-text {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  .page-home .hero-slide-image {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    transform: none !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
  }

  .page-home .hero-slider .hero-slide .hero-slide-text h1,
  .page-home .hero-slider .hero-delivery-slide .hero-slide-text h1 {
    font-size: clamp(32px, 10.5vw, 46px) !important;
    line-height: .98 !important;
    letter-spacing: -1.8px !important;
  }

  .page-home .hero-slider .hero-slide .hero-slide-text > p:not(.eyebrow),
  .page-home .hero-slider .hero-delivery-slide .hero-slide-text > p:not(.eyebrow) {
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .page-home .hero-slider .hero-slide-image img,
  .page-home .hero-slider .hero-transparent-art {
    position: relative !important;
    inset: auto !important;
    width: min(100%, 300px) !important;
    max-width: 300px !important;
    max-height: 220px !important;
    margin: 0 auto !important;
  }

  .page-home .hero-process-rail {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .page-home .hero-process-rail i { display: none !important; }

  /* Compact all non-home page heroes on phones/tablets. */
  body:not(.page-home) :is(
    .about-hero,
    .cap-hero,
    .quality-hero,
    .quote-premium-hero,
    .quote-hero,
    .delivery-hero,
    main > .hero
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding-top: 42px !important;
    padding-bottom: 42px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body:not(.page-home) :is(
    .about-hero-content,
    .about-grid,
    .cap-hero-inner,
    .quality-hero-inner,
    .quote-hero-content,
    .delivery-hero-grid,
    .hero-in,
    .hero-content
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 18px !important;
    transform: none !important;
  }

  /* Keep the original site motion on phones too; readability is handled below. */
  main > section {
    opacity: 1 !important;
  }

  body:not(.page-home) main :is(h1,h2,h3,h4) {
    opacity: 1 !important;
    color: #17212b !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
  }

  body:not(.page-home) main :is(p,li,dd,label,.lead,.description,.section-description) {
    opacity: 1 !important;
    color: #3f4a55 !important;
    text-shadow: none !important;
  }

  body:not(.page-home) main :is(.eyebrow,.kicker,.section-label,.overline) {
    color: #168a4a !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
  }
}

@media (max-width: 560px) {
  body:not(.page-home) :is(
    .about-hero,
    .cap-hero,
    .quality-hero,
    .quote-premium-hero,
    .quote-hero,
    .delivery-hero,
    main > .hero
  ) {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .page-home .hero-process-rail { display: none !important; }
}

@media (max-width: 900px) {
  .header .logo, .site-header .logo { color:#17212b !important; }
  .header .logo span, .site-header .logo span { color:#168a4a !important; display:inline !important; }
  .page-contact .quote-hero-content,
  body.page-contact .quote-hero-content {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}