/* Site-wide detail system. First declared layer wins for important rules. */
@layer ux-refinement;
@layer ux-refinement {
  :root {
    --ux-ink: #252927;
    --ux-copy: #565c59;
    --ux-brand: #0b6f69;
    --ux-line: #dedede;
    --ux-soft: #f5f7f6;
    --ux-r-card: 20px;
    --ux-r-panel: 24px;
    --ux-r-control: 12px;
    --ux-shadow-rest: 0 1px 2px rgba(20, 32, 29, .04), 0 5px 18px rgba(20, 32, 29, .045);
    --ux-shadow-hover: 0 4px 10px rgba(20, 32, 29, .07), 0 12px 30px rgba(20, 32, 29, .095);
    --ux-header-h: 54px;
    --ux-ease: cubic-bezier(.2, .75, .25, 1);
  }

  html { scroll-padding-top: calc(var(--ux-header-h) + 20px); }
  body { -webkit-tap-highlight-color: rgba(11, 111, 105, .12); }
  body .site-unified-header { height: var(--ux-header-h) !important; min-height: var(--ux-header-h) !important; max-height: var(--ux-header-h) !important; }
  :where(main, #siteSearch, #clientCenterPanel) :where(button, input, select, textarea, a.button, a.btn-primary, a.btn-secondary, a.btn-ghost, a.btn-outline, .nav-cta) {
    transition: color 160ms var(--ux-ease), background-color 160ms var(--ux-ease), border-color 160ms var(--ux-ease), box-shadow 180ms var(--ux-ease), transform 180ms var(--ux-ease) !important;
  }

  /* A complete wordmark gives the existing mark a clear home in every template. */
  body .site-unified-header .logo {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    flex-basis: 158px !important;
    width: 158px !important;
    min-width: 158px !important;
    overflow: visible !important;
  }
  body .site-unified-header .logo::after {
    content: "PCBA PARTNER" !important;
    display: block !important;
    position: static !important;
    height: auto !important;
    width: auto !important;
    transform: none !important;
    color: var(--ux-ink) !important;
    font: 650 12px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: .085em !important;
    white-space: nowrap !important;
  }
  body .site-unified-header .logo .logo-icon { display: inline-flex !important; align-items: center !important; flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; height: 30px !important; }
  body .site-unified-header .logo img { flex: 0 0 auto !important; }
  @media (min-width: 1200px) {
    body > header.site-unified-header,
    body .site-unified-header #navbar,
    body .site-unified-header #navbar > .nav-container,
    body .site-unified-header #navbar .nav-links,
    body .site-unified-header #navbar .nav-links > li > a:not(.nav-cta),
    body .site-unified-header #navbar #navSearch,
    body .site-unified-header #navbar #navAiQuote { height: var(--ux-header-h) !important; min-height: var(--ux-header-h) !important; max-height: var(--ux-header-h) !important; }
    body .site-unified-header #navbar > .nav-container { max-width: 1200px !important; padding-inline: 24px !important; gap: 22px !important; }
    body .site-unified-header #navbar .nav-links { gap: clamp(11px, 1.4vw, 20px) !important; }
    body .site-unified-header #navbar .nav-links > li > a:not(.nav-cta) { line-height: var(--ux-header-h) !important; font-size: 13px !important; }
    body .site-unified-header #navbar #navSearch, body .site-unified-header #navbar #navAiQuote { width: 40px !important; }
    body .site-unified-header #navbar #appleNavPanel { top: var(--ux-header-h) !important; }
  }
  @media (max-width: 1199px) {
    body > header.site-unified-header,
    body .site-unified-header #navbar,
    body .site-unified-header #navbar > .nav-container,
    body .site-unified-header #navbar :is(#navSearch,#navAiQuote,#mobileToggle) { height: var(--ux-header-h) !important; min-height: var(--ux-header-h) !important; max-height: var(--ux-header-h) !important; }
    body .site-unified-header #navbar > .nav-container { padding-inline: 14px 6px !important; }
    body .site-unified-header #navbar .logo { flex: 0 1 158px !important; width: 158px !important; min-width: 0 !important; margin-right: auto !important; }
    body .site-unified-header #navbar :is(#navSearch,#navAiQuote,#mobileToggle) { width: 48px !important; min-width: 48px !important; flex-basis: 48px !important; }
    body .site-unified-header #navbar #navLinks { top: var(--ux-header-h) !important; height: calc(100dvh - var(--ux-header-h)) !important; max-height: calc(100dvh - var(--ux-header-h)) !important; padding-top: 14px !important; }
    body .site-unified-header #navbar #appleNavPanel { top: var(--ux-header-h) !important; max-height: calc(100dvh - var(--ux-header-h)) !important; }
    body .site-unified-header #navbar .apple-nav-back:not([hidden]) { height: var(--ux-header-h) !important; }
    body .site-unified-header #navbar #navLinks > li > a:not(.nav-cta) { min-height: 52px !important; border-radius: 12px !important; }
    body .site-unified-header #navbar #navLinks .nav-cta { min-height: 48px !important; border-radius: 999px !important; }
  }
  @media (max-width: 390px) {
    body .site-unified-header #navbar > .nav-container { padding-left: 12px !important; }
    body .site-unified-header #navbar .logo { flex-basis: 142px !important; }
    body .site-unified-header .logo::after { font-size: 11px !important; letter-spacing: .06em !important; }
    body .site-unified-header .logo img { width: 38px !important; }
  }
  body .site-unified-header #navbar :is(a,button):focus-visible,
  body #siteSearch :is(a,button,input):focus-visible,
  body #clientCenterPanel :is(a,button,input,select,textarea):focus-visible {
    outline: 3px solid rgba(11, 111, 105, .72) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px rgba(11, 111, 105, .11) !important;
    border-radius: 10px !important;
  }

  /* Quiet, consistent depth on real content surfaces. */
  :where(main) :where(.journey-card, .service-card, .industry-card, .case-card, .gallery-card, .hs-card, .vas-card, .value-card, .factory-card, .cert-card, .equip-card, .blog-card, .blog-card-content, .cap-card, .seo-link-card, .case-evidence-item, .related-card, .case-library-editorial__card, .file-card, .result-card, .export-card, .product-card, .process-step, .journey-disclosure, .spec-group, .buyer-evidence-card, .rfq-resource, .case-cta, .certification-card, .case-detail-hero > span, .detail-gallery__item, .pp-photo-card, .values-card, .industry-tile) {
    border-radius: var(--ux-r-card) !important;
    box-shadow: var(--ux-shadow-rest) !important;
    transition: box-shadow 220ms var(--ux-ease), transform 220ms var(--ux-ease), border-color 180ms var(--ux-ease) !important;
  }
  :where(main) :where(.page-hero img, .hero-image, .hero-media-frame, .case-detail-hero > span, .article-cover, .story-media, .product-hero-image, .detail-gallery__item) { border-radius: var(--ux-r-panel) !important; }
  :where(main) :where(button, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea, .choose-file, .drop-zone, .tool-tabs a) { border-radius: var(--ux-r-control) !important; }
  :where(main) :where(.btn-primary, .btn-secondary, .btn-ghost, .button, .nav-cta, .hero-btn-group > a, .case-detail-actions > a, .case-cta > a, .inline-rfq__submit) { border-radius: 999px !important; }
  :where(main) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) { min-height: 46px !important; box-shadow: inset 0 1px 2px rgba(20, 32, 29, .035) !important; }
  :where(main) textarea { min-height: 112px !important; }
  :where(main) :where(button, a.button, a.btn-primary, a.btn-secondary, a.btn-ghost, a.btn-outline, .choose-file) { min-height: 44px; }
  :where(main) :where(button, input, select, textarea, a, summary, .choose-file):focus-visible {
    outline: 3px solid rgba(11, 111, 105, .72) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px rgba(11, 111, 105, .1) !important;
  }
  :where(main) :where(input, select, textarea):is(:hover,:focus-visible) { border-color: var(--ux-brand) !important; }
  :where(main) :where(button, a.button, a.btn-primary, a.btn-secondary, a.btn-ghost, a.btn-outline, .choose-file):active { transform: scale(.985) !important; }
  :where(main) :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ux-brand) !important; }
  :where(main) :where(button, summary, .choose-file, .tool-tabs a) { min-height: 44px !important; }
  body.case-detail-page main > .case-cta { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
  :where(main) .pcba-select-button { min-height: 46px !important; border-radius: var(--ux-r-control) !important; }
  #assembly-tools :where(.examples button, .card-heading > button, .file-options > button, .pagination button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 9px 14px !important;
    border: 1px solid rgba(37,41,39,.11) !important;
    border-radius: 999px !important;
    background: #fff !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  #assembly-tools :where(.examples button, .card-heading > button, .file-options > button, .pagination button):disabled { cursor: not-allowed !important; opacity: .48 !important; }

  @media (hover: hover) and (pointer: fine) {
    :where(main) :where(a.journey-card, a.service-card, a.industry-card, a.case-card, a.gallery-card, a.blog-card, a.seo-link-card, a.related-card, .tool-card, .case-library-card, .result-card, .file-card):hover {
      transform: translateY(-2px) !important;
      box-shadow: var(--ux-shadow-hover) !important;
    }
    :where(main) :where(button, a.button, a.btn-primary, a.btn-secondary, a.btn-ghost, a.btn-outline, .choose-file):hover { box-shadow: 0 3px 10px rgba(20,32,29,.13) !important; }
    :where(main) a:not(:is(.button,.btn-primary,.btn-secondary,.btn-ghost,.btn-outline,.nav-cta,.journey-card,.service-card,.industry-card,.case-card,.gallery-card,.blog-card,.seo-link-card,.related-card)):hover { text-underline-offset: .22em; }
    body .site-unified-header #navbar .nav-links > li > a:not(.nav-cta):hover { color: var(--ux-brand) !important; }
  }
  @media (hover: none) {
    :where(main) :where(.journey-card, .service-card, .industry-card, .case-card, .gallery-card, .blog-card, .seo-link-card, .related-card):active { box-shadow: var(--ux-shadow-hover) !important; }
  }

  /* Existing in-page indexes become calm, keyboard-friendly wayfinding. */
  main .ia-page-index {
    position: sticky !important;
    top: var(--ux-header-h) !important;
    z-index: 30 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px !important;
    margin-block: 20px 28px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-width: none !important;
    border: 1px solid rgba(37,41,39,.075) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 4px 18px rgba(20,32,29,.07) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  }
  main .ia-page-index::-webkit-scrollbar { display: none !important; }
  main .ia-page-index > span { flex: 0 0 auto !important; padding-inline: 12px 8px !important; font-size: 12px !important; font-weight: 650 !important; }
  main .ia-page-index > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; min-height: 40px !important; padding: 8px 12px !important; border-radius: 11px !important; color: var(--ux-copy) !important; font-size: 13px !important; line-height: 1.25 !important; text-decoration: none !important; white-space: nowrap !important; }
  main .ia-page-index > a:hover, main .ia-page-index > a:focus-visible { background: var(--ux-soft) !important; color: var(--ux-brand) !important; }
  main :where(section[id], [id].section, article[id], h2[id]) { scroll-margin-top: calc(var(--ux-header-h) + 70px) !important; }
  main .ux-page-nav { position: relative !important; margin: 16px 0 28px !important; border: 1px solid rgba(37,41,39,.09) !important; border-radius: 18px !important; background: #fff !important; box-shadow: var(--ux-shadow-rest) !important; }
  main .ux-page-nav > summary { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; min-height: 48px !important; padding: 10px 16px !important; border-radius: 18px !important; color: var(--ux-ink) !important; cursor: pointer !important; list-style: none !important; }
  main .ux-page-nav > summary::-webkit-details-marker { display: none !important; }
  main .ux-page-nav > summary::after { content: "+" !important; flex: 0 0 auto !important; color: var(--ux-brand) !important; font-size: 21px !important; line-height: 1 !important; }
  main .ux-page-nav[open] > summary::after { content: "−" !important; }
  main .ux-page-nav [data-ux-map-title] { font-size: 15px !important; font-weight: 650 !important; }
  main .ux-page-nav [data-ux-map-action] { margin-left: auto !important; color: var(--ux-copy) !important; font-size: 13px !important; }
  main .ux-page-nav > nav { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 4px !important; padding: 0 10px 10px !important; }
  main .ux-page-nav > nav > a { display: flex !important; align-items: center !important; min-height: 42px !important; padding: 8px 10px !important; border-radius: 10px !important; color: var(--ux-copy) !important; font-size: 13px !important; line-height: 1.35 !important; text-decoration: none !important; }
  main .ux-page-nav > nav > a:hover, main .ux-page-nav > nav > a:focus-visible { background: var(--ux-soft) !important; color: var(--ux-brand) !important; }

  /* Dialogs and expandable content feel related to the page around them. */
  body :where(dialog, [role="dialog"], .modal-content, .client-center-panel, #siteSearch, #appleNavPanel) { border-radius: 22px !important; box-shadow: 0 18px 60px rgba(18,27,24,.18) !important; }
  body dialog::backdrop { background: rgba(18,27,24,.34) !important; backdrop-filter: blur(3px) !important; }
  :where(main) details[open] > :not(summary) { animation: ux-disclose-in 170ms var(--ux-ease) both; }
  @keyframes ux-disclose-in { from { opacity: .76; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-transparency: reduce) {
    body .site-unified-header #navbar, main .ia-page-index { background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    main :where(button, a.button, a.btn-primary, a.btn-secondary, a.btn-ghost, a.btn-outline, .choose-file):active { transform: none !important; }
  }
  @media (max-width: 600px) {
    :root { --ux-r-card: 18px; --ux-r-panel: 20px; }
    main .ia-page-index { margin: 14px 0 22px !important; border-radius: 14px !important; }
    main .ia-page-index > span { padding-inline: 8px 4px !important; }
    main .ia-page-index > a { min-height: 42px !important; padding-inline: 10px !important; font-size: 12px !important; }
    main .ux-page-nav { margin: 12px 0 22px !important; }
    main .ux-page-nav > nav { grid-template-columns: minmax(0,1fr) !important; }
    main .ux-page-nav > nav > a { min-height: 44px !important; font-size: 14px !important; }
    #assembly-tools .examples { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; }
    #assembly-tools .examples > span { flex-basis: 100% !important; }
    body.case-detail-page main > nav.breadcrumbs { margin-top: 12px !important; }
    body.case-detail-page main > .case-cta { align-items: stretch !important; flex-direction: column !important; gap: 18px !important; }
    body.case-detail-page .case-story__body .story-rail {
      position: sticky !important;
      top: var(--ux-header-h) !important;
      z-index: 28 !important;
      display: flex !important;
      align-items: center !important;
      gap: 4px !important;
      width: calc(100% + 40px) !important;
      margin: 12px -20px 18px !important;
      padding: 6px 14px !important;
      overflow-x: auto !important;
      overscroll-behavior-inline: contain !important;
      scrollbar-width: none !important;
      border-block: 1px solid rgba(37,41,39,.08) !important;
      background: rgba(255,255,255,.96) !important;
      box-shadow: 0 3px 12px rgba(20,32,29,.055) !important;
      backdrop-filter: blur(14px) !important;
      -webkit-backdrop-filter: blur(14px) !important;
    }
    body.case-detail-page .case-story__body .story-rail::-webkit-scrollbar { display: none !important; }
    body.case-detail-page .case-story__body .story-rail > strong { position: sticky !important; left: 0 !important; flex: 0 0 auto !important; padding: 9px 8px 9px 4px !important; background: #fff !important; font-size: 12px !important; }
    body.case-detail-page .case-story__body .story-rail > a { display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; min-height: 40px !important; padding: 8px 10px !important; border-radius: 10px !important; font-size: 12px !important; white-space: nowrap !important; }
  }
  @media (forced-colors: active) {
    :where(main) :where(button, input, select, textarea, a, summary):focus-visible { outline: 2px solid Highlight !important; outline-offset: 3px !important; }
    :where(main) :where(.journey-card,.service-card,.industry-card,.case-card,.gallery-card,.blog-card,.seo-link-card,.related-card) { border: 1px solid CanvasText !important; }
  }
}

@layer pcba-polish {
  html.page-tools .tool-context {
    padding-top: calc(var(--ux-header-h, 54px) + 8px) !important;
  }
  html.page-tools .tool-context__title {
    display: block !important;
    margin: 0 !important;
    color: #1d1d1f !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -.02em !important;
    position: relative !important;
    top: 8px !important;
  }
  html.page-tools .tool-context > a {
    position: relative !important;
    top: 8px !important;
  }
  @media (max-width: 700px) {
    html.page-tools .tool-context__title { font-size: 14px !important; }
  }

  /* The estimator's percentage-width inputs include their padding and border. */
  .est-wrap {
    margin-top: calc(var(--ux-header-h, 54px) + 2px) !important;
  }
  .est-wrap .est-card,
  .est-wrap .est-row,
  .est-wrap .est-f {
    min-width: 0 !important;
  }
  .est-wrap .est-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .est-wrap input[type="number"],
  .est-wrap select {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  @media (max-width: 820px) {
    .est-wrap .est-res {
      position: static !important;
      inset: auto !important;
    }
  }
}

/* Follow-up audit fixes. Use the first declared design layer so older layered
   !important header rules cannot collapse the wordmark. */
@layer pcba-polish {
  @media (min-width: 1200px) {
    html:root body .site-unified-header #navbar#navbar#navbar#navbar > .nav-container {
      width: 100% !important;
      max-width: 1200px !important;
      padding-inline: 24px !important;
      gap: 14px !important;
      box-sizing: border-box !important;
    }
    html:root body .site-unified-header #navbar#navbar#navbar#navbar .logo {
      display: inline-flex !important;
      flex: 0 0 158px !important;
      width: 158px !important;
      min-width: 158px !important;
      max-width: 158px !important;
      margin: 0 !important;
    }
    html:root body .site-unified-header #navbar#navbar#navbar#navbar #navLinks {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      gap: clamp(10px, 1vw, 16px) !important;
    }
  }
}

/* Case-study phone layout. Use the first declared design layer so
   older layered !important declarations cannot restore stretched image tiles. */
@layer pcba-polish {
  @media (max-width: 760px) {
    html:not(#ds):not(#ds) body.case-detail-page main .case-detail-hero > .case-detail-hero__stack {
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      aspect-ratio: auto !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      grid-template-rows: auto !important;
      grid-auto-rows: auto !important;
      align-self: start !important;
    }
    html:not(#ds):not(#ds) body.case-detail-page main .case-detail-hero .case-detail-hero__stack > .case-detail-hero__secondary {
      width: 100% !important;
      height: auto !important;
      min-width: 0 !important;
      min-height: 0 !important;
      aspect-ratio: 1 / 1 !important;
    }
    html:not(#ds):not(#ds) body.case-detail-page main .case-detail-hero .case-detail-hero__stack > .case-detail-hero__secondary img {
      width: 100% !important;
      height: 100% !important;
      padding: 12px !important;
      box-sizing: border-box !important;
      object-fit: contain !important;
    }
    html:not(#ds):not(#ds) body.case-detail-page main .case-story__body .story-rail {
      width: min(calc(100% + 40px), 100vw) !important;
      max-width: 100vw !important;
      box-sizing: border-box !important;
    }
  }
}