/* =========================================================
   SILENT KILLER PCB — UNIVERSAL COMPACT MOBILE UI
   v3.3.23
   Mobile-only. Desktop (>900px) is intentionally untouched.
   Home slider geometry is intentionally untouched.
   ========================================================= */

@media (max-width: 900px) {
  :root {
    --skm-gap: 8px;
    --skm-pad: 11px;
    --skm-copy: 10.5px;
    --skm-small: 8.5px;
    --skm-title: 12.5px;
    --skm-green: #168a4a;
    --skm-ink: #17212b;
    --skm-copy-color: #4a5550;
  }

  /* One compact phone header on every public page. */
  .sk-header-contact { display: none !important; }
  .header,
  .site-header {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .nav-container,
  .site-header .nav-wrap,
  .nav-wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 7px 10px !important;
    margin: 0 !important;
    gap: 7px !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  .nav-container > .logo,
  .site-header .logo,
  .nav-wrap > .logo {
    height: auto !important;
    min-height: 0 !important;
    max-width: calc(100% - 46px) !important;
    margin: 0 auto 0 0 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    letter-spacing: .8px !important;
    white-space: nowrap !important;
  }
  .nav-container > .hamburger,
  .site-header .nav-wrap > .hamburger,
  .nav-wrap > .hamburger {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 8px !important;
  }
  body { padding-top: 56px !important; }

  /* Never allow desktop fixed/min widths to create narrow word-columns. */
  body:not(.page-home) main,
  body:not(.page-home) main > section,
  body:not(.page-home) main [class*="grid"],
  body:not(.page-home) main [class*="card"],
  body:not(.page-home) main [class*="panel"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body:not(.page-home) main :is(h1,h2,h3,h4,p,li,label,small,strong,span) {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* Compact universal non-home typography. */
  body:not(.page-home) main h1 {
    font-size: clamp(29px, 8.7vw, 38px) !important;
    line-height: 1 !important;
    letter-spacing: -1.4px !important;
  }
  body:not(.page-home) main h2 {
    font-size: clamp(22px, 6.8vw, 29px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.8px !important;
  }
  body:not(.page-home) main h3 { font-size: var(--skm-title) !important; line-height: 1.25 !important; }
  body:not(.page-home) main :is(p,li,dd,.description,.section-description,.lead) {
    font-size: var(--skm-copy) !important;
    line-height: 1.5 !important;
  }
  body:not(.page-home) main :is(small,.eyebrow,.kicker,.overline,.section-label) {
    font-size: var(--skm-small) !important;
    line-height: 1.35 !important;
  }

  /* Less vertical waste on phone, without changing desktop. */
  body:not(.page-home) main > section {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  body:not(.page-home) :is(.section-heading,.technical-heading,.why-heading,.vm-heading,.beliefs-heading,.delivery-section-heading) {
    margin-bottom: 18px !important;
    gap: 10px !important;
  }

  /* Side-by-side compact blocks: universal two-column mobile system. */
  body:not(.page-home) :is(
    .about-hero-meta,
    .about-service-grid,
    .vm-grid,
    .belief-grid,
    .service-grid,
    .why-grid,
    .limit-grid,
    .process-grid,
    .stackup-grid,
    .quality-grid,
    .principles-grid,
    .ipc-quality-grid,
    .delivery-option-grid,
    .delivery-assurance-grid,
    .delivery-timeline,
    .live-pricing-grid,
    .price-explainer-grid,
    .comparison-grid,
    .premium-form-row
  ) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--skm-gap) !important;
    width: 100% !important;
  }

  /* Products uses .grid rather than *-grid. */
  body:not(.page-home) main .grid {
    width: calc(100% - 18px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* Two-up cards are intentionally smaller but keep all text readable. */
  body:not(.page-home) main :is(
    .about-service-card,
    .vm-card,
    .belief-card,
    .service-card,
    .why-card,
    .stackup-card,
    .quality-card,
    .principle,
    .ipc-standard-card,
    .delivery-option-card,
    .delivery-assurance article,
    .grid article
  ) {
    min-height: 0 !important;
    height: auto !important;
    padding: var(--skm-pad) !important;
    border-radius: 10px !important;
  }

  /* Complex two-column cards must become internally simple at narrow width. */
  body:not(.page-home) .ipc-standard-card {
    grid-template-columns: 1fr !important;
  }
  body:not(.page-home) .product-image {
    height: 112px !important;
  }
  body:not(.page-home) .grid article :is(em,h3,p,a) {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  body:not(.page-home) .grid article em { margin-top: 10px !important; margin-bottom: 5px !important; font-size: 8px !important; }
  body:not(.page-home) .grid article h3 { margin-top: 0 !important; margin-bottom: 5px !important; font-size: 12px !important; }
  body:not(.page-home) .grid article p { margin-top: 0 !important; margin-bottom: 9px !important; min-height: 0 !important; font-size: 9.5px !important; }
  body:not(.page-home) .grid article a { font-size: 8px !important; }

  /* Capability tiles: keep useful pairs rather than long single stacks. */
  body:not(.page-home) .capability-stats {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
  body:not(.page-home) .stat {
    min-height: 64px !important;
    padding: 9px !important;
  }
  body:not(.page-home) .stat strong { font-size: 14px !important; }
  body:not(.page-home) .copper-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  body:not(.page-home) .copper-grid > div { min-width: 0 !important; padding: 10px !important; }

  /* Delivery stays two-up where it is a choice, not one huge card per screen. */
  body:not(.page-home) .delivery-option-card {
    padding: 12px !important;
  }
  body:not(.page-home) .delivery-option-card ul { gap: 5px !important; }
  body:not(.page-home) .delivery-option-card li { font-size: 9px !important; line-height: 1.4 !important; }
  body:not(.page-home) .delivery-timeline::before,
  body:not(.page-home) .delivery-timeline::after { display: none !important; }
  body:not(.page-home) .delivery-timeline article { padding: 9px !important; }
  body:not(.page-home) .delivery-step-mark { width: 38px !important; height: 38px !important; margin-bottom: 8px !important; }

  /* Quote page: compact 2-column controls, same sizing across every option group. */
  .page-quotation .quote-layout {
    width: calc(100% - 14px) !important;
    margin-inline: auto !important;
    gap: 10px !important;
  }
  .page-quotation .quote-hero {
    padding: 20px 8px 16px !important;
    gap: 10px !important;
  }
  .page-quotation .quote-section {
    padding: 14px 10px !important;
    margin-bottom: 8px !important;
  }
  .page-quotation .section-head {
    gap: 8px !important;
    padding-bottom: 10px !important;
    margin-bottom: 5px !important;
  }
  .page-quotation :is(.compact-grid,.advanced-grid,.assembly-grid,.component-categories,.final-grid) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  .page-quotation :is(.option-row,.sub-option-row) {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 10px 0 !important;
  }
  .page-quotation .option-title { gap: 2px !important; }
  .page-quotation .option-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .page-quotation .option-card,
  .page-quotation .option-card span {
    width: 100% !important;
    min-width: 0 !important;
  }
  .page-quotation .option-card span {
    min-height: 34px !important;
    padding: 6px 5px !important;
    font-size: 8.5px !important;
    line-height: 1.2 !important;
  }
  .page-quotation .option-row:has(input[name="surfaceFinish"]) .option-card span {
    min-width: 0 !important;
    font-size: 8px !important;
  }
  .page-quotation :is(input[type="text"],input[type="number"],select,textarea) {
    min-height: 40px !important;
    padding: 9px 10px !important;
  }
  .page-quotation .field > span,
  .page-quotation .field small,
  .page-quotation .option-title small,
  .page-quotation .sub-title small { font-size: 8px !important; }
  .page-quotation .price-panel-inner { max-width: 100% !important; }
  .page-quotation .price-row { min-height: 36px !important; }
  .page-quotation .netlist-upload,
  .page-quotation .upload-box { padding: 10px !important; gap: 8px !important; }

  /* Contact form uses two fields per row when practical. */
  body:not(.page-home) .premium-form-row > * { min-width: 0 !important; }

  /* Buttons: compact and consistent. */
  body:not(.page-home) main :is(.btn,.primary-btn,.secondary-btn,.premium-btn,.nav-button,button:not(.hero-dot)) {
    min-height: 38px !important;
    padding: 8px 11px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 360px) {
  /* Still preserve side-by-side choices on very small phones, just tighten gaps. */
  body:not(.page-home) :is(
    .about-service-grid,.vm-grid,.belief-grid,.service-grid,.why-grid,.limit-grid,.process-grid,.stackup-grid,
    .quality-grid,.principles-grid,.ipc-quality-grid,.delivery-option-grid,.delivery-assurance-grid,.delivery-timeline,
    .live-pricing-grid,.price-explainer-grid,.comparison-grid,.premium-form-row
  ),
  body:not(.page-home) main .grid,
  .page-quotation :is(.compact-grid,.advanced-grid,.assembly-grid,.component-categories,.final-grid,.option-list) {
    gap: 6px !important;
  }
  body:not(.page-home) main h1 { font-size: 28px !important; }
  body:not(.page-home) main h2 { font-size: 21px !important; }
}