/* DESIGN.md Phase 0: site-wide dark token and component override layer. */
:root {
  --bg-base: #050507;
  --bg-card: #0E1015;
  --bg-card-muted: #14171F;
  --border-subtle: rgba(255,255,255,.08);
  --border-glow: rgba(249,115,22,.4);
  --accent: #F97316;
  --accent-red: #DC2626;
  --accent-text: #FB923C;
  --text-primary: #FFF;
  --text-secondary: #D1D5DB;
  --text-muted: #6B7280;
  --cta-gradient: linear-gradient(135deg,#FF5722 0%,#D9232D 100%);
  --bloom: radial-gradient(circle at center, rgba(234,88,12,.18) 0%, rgba(217,35,45,.08) 35%, transparent 70%);
  --base-color-brand--blue: var(--accent);
  --base-color-brand--pink: var(--accent-red);
}
html, body, .page-wrapper, .section_background { background-color: var(--bg-base); color: var(--text-secondary); }
main { background: var(--bg-base); color: var(--text-secondary); }
main p, main .text-size-regular, main .text-size-medium, main .text-size-small { color: var(--text-secondary); }
h1, h2, h3, h4, h5, h6, main .heading-style-h1, main .heading-style-h2, main .heading-style-h3, main .heading-style-h4, main .heading-style-h5, main .heading-style-h6 { color: var(--text-primary); }
main .text-color-primary, main .text-color-alternate { color: var(--text-primary) !important; }
main .w-dropdown-link { color: var(--text-secondary) !important; }
/* Owner prefers the brand gradient sweep over a flat accent (Zac, 2026-09-14). Keep the
   original cream->orange sweep on inline kicker spans. */
span.text-color-gradiant, b.text-color-gradiant, strong.text-color-gradiant {
  background-image: linear-gradient(90deg, #FEDFB7 0%, #FB6B0D 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
/* whole-heading usage: white into orange so the leading words stay crisp (DESIGN.md 3.1) */
h1.text-color-gradiant, h2.text-color-gradiant, h3.text-color-gradiant, h4.text-color-gradiant {
  background-image: linear-gradient(90deg, #FFF 0%, #FFF 42%, var(--accent-text) 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
.published_date-block, .footer .text-size-small, .footer small, main .text-color-muted { color: var(--text-muted) !important; }
main .text-color-secondary { color: var(--text-secondary) !important; }
.button { background: var(--cta-gradient) !important; box-shadow: 0 0 20px rgba(234,88,12,.35); border: 0; border-radius: 999px; color: var(--text-primary) !important; font-weight: 600; letter-spacing: .02em; }
.button:hover, .button:focus-visible { filter: brightness(1.1); box-shadow: 0 0 26px rgba(234,88,12,.5); }
.button.is-secondary { background: transparent !important; border: 1px solid rgba(255,255,255,.2); box-shadow: none; }
.button.is-secondary:hover, .button.is-secondary:focus-visible { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.04) !important; }
main .electronic_card, main .leak-testing_card, main .blog_item, main .detaion_content, main .detection_card, main .test_card, main .industry_card, main .partner_desc, main .faq_block, main .faq_question-block, main .home-customer_card, main .contact-map_item, main .video-card, main .video_item, main .img-frame {
  background-color: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 1rem; color: var(--text-primary);
}
main .electronic_card, main .leak-testing_card, main .blog_item, main .detection_card, main .test_card, main .industry_card, main .home-customer_card { border-radius: 1.25rem; }
main .electronic_card:hover, main .leak-testing_card:hover, main .blog_item:hover, main .detaion_content:hover, main .detection_card:hover, main .test_card:hover, main .industry_card:hover, main .video-card:hover, main .video_item:hover { border-color: var(--border-glow) !important; box-shadow: 0 0 24px rgba(249,115,22,.15); }
main .img-frame { background: var(--bg-card-muted) !important; padding: .75rem !important; border-radius: 1rem !important; box-shadow: none !important; }
main .section_partner, main .partner_tab-link:hover, main .partner_tab-link.w--current { background-color: var(--bg-base) !important; color: var(--text-primary); }
main .partner_tab-menu, main .partner_desc.grey { background: var(--bg-card-muted) !important; }
main table, main .partner_desc, main .specification_table, main .table_wrap { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 1rem; overflow: hidden; }
main table tr, main .partner_desc > * { border-bottom: 1px solid rgba(255,255,255,.05); }
main table tr:last-child, main .partner_desc > *:last-child { border-bottom: 0; }
main img[src*="checkk.svg"], main img[src*="check.svg"] { filter: invert(20%) sepia(90%) saturate(2500%) hue-rotate(345deg) brightness(90%) contrast(95%); }
.eyebrow { color: var(--accent-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }
.has-bloom, .hero_content, .hero_wrapper, .leak-hero_wrapper, .test-industrial_flex, .header_component, [class*="hero_"] { position: relative; isolation: isolate; }
.has-bloom::before, .hero_content::before, .hero_wrapper::before, .leak-hero_wrapper::before, .test-industrial_flex::before, .header_component::before, [class*="hero_"]::before { content: ""; position: absolute; inset: -16% -8%; background: var(--bloom); pointer-events: none; z-index: -1; }
.horizon-arch { position: relative; overflow: hidden; }
.horizon-arch::before { content: ""; position: absolute; left: 50%; top: 0; width: min(100%, 1000px); height: 8rem; transform: translateX(-50%); border-top: 1px solid rgba(249,115,22,.5); border-radius: 50% 50% 0 0 / 100% 100% 0 0; box-shadow: 0 -10px 40px rgba(234,88,12,.2); pointer-events: none; }
.section_integrity { background: var(--bg-card-muted); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); position: relative; overflow: hidden; }
.section_integrity::before { content: ""; position: absolute; inset: 0; background: var(--bloom); pointer-events: none; }
.section_integrity .integrity_flex { position: relative; }
.footer, .footer * { border-color: var(--border-subtle); }
.footer { background: var(--bg-base); color: var(--text-secondary); }
@media (max-width: 767px) { main .electronic_card, main .leak-testing_card, main .blog_item, main .detaion_content, main .detection_card, main .test_card, main .industry_card { border-radius: 1rem; } }
/* Remaining legacy light panels discovered by Phase 0 surface audit. */
main .large-display_card, main .electronic_block, main .packaging_dropdown, main .nema_feature-card, main .benefits_image.bg-white, main .faq-dropdown-list, main .w-form-done, main .w-form-fail { background-color: var(--bg-card) !important; border: 1px solid var(--border-subtle); color: var(--text-primary); }
main .faq-dropdown-list { border-radius: 0 0 1rem 1rem; }
main .swiper-pagination-bullet { background-color: var(--text-muted) !important; }
main .swiper-pagination-bullet-active { background-color: var(--accent) !important; }
/* Legacy particles are not surfaces; bloom helpers provide the approved amber lighting. */
main .bg_1, main .bg_2, main .bg_3, main .bg_4, main .bg_5, main .bg_6, main .bg_7, main .bg_8, main .bg_9, main .bg_10 { background-color: transparent !important; }
main .detection_box2 { background-color: var(--bg-card-muted) !important; border-color: var(--border-glow) !important; }

/* Contrast fixes (parent review): off-palette pure-red card links, and accordion toggles
   inside main that inherit Webflow's #222. */
main .card_link, main .card_link.red { color: var(--accent-text) !important; }
main .w-dropdown-toggle, main .w-dropdown-toggle > div, main .packaging_dropdown-toggle, main .packaging_dropdown-toggle > div { color: var(--text-primary) !important; }
main .w-dropdown-list a, main .w-dropdown-list div { color: var(--text-secondary) !important; }

/* ---- Review notes 2026-09-17 (homepage) ---------------------------------------------------- */
/* 1. "Explore Solution by Leak Test": the slide photo has a white background, so the copy sat on
      white. Give the text column its own dark panel; the photo stays as the slide backdrop. */
.home-leak_slide-content.is-legible{background:rgba(9,10,14,.86);border:1px solid rgba(255,255,255,.08);border-radius:1.2rem;padding:1.75rem;backdrop-filter:blur(6px)}
/* 2. "Industries We Serve" cards: each card's text block had a different height, so the three
      boxes sat at three different offsets. Pin the text panel to the bottom of the card at a fixed
      height and let the copy clip inside it. Marker class keeps the product pages' "Other Zaxis
      Products" grid (same Webflow class) untouched. */
.industry_wrapper-2.is-home-industries .detection_card{display:flex;flex-direction:column;justify-content:flex-end}
.industry_wrapper-2.is-home-industries .detaion_content{min-height:13rem;max-height:13rem;width:100%;padding:1.5rem;box-sizing:border-box;overflow:hidden;background:rgba(14,16,21,.94)}
.industry_wrapper-2.is-home-industries .detaion_content p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* 3. Pre-footer "Ready to Ensure Product Integrity" banner: the Webflow export ships
      `.integrity_image{display:none}` on every breakpoint, so the banner never showed its photo. */
.integrity_image{display:block}
/* CTA banner height: Webflow padded .div-block-24 by 15vw top+bottom for an image that was hidden; with the product photo shown the banner ballooned to ~16:9 of the viewport. Tighten padding and crop the photo's empty upper third. */
.section_integrity .div-block-24{padding-top:3.5rem;padding-bottom:3.5rem}
.section_integrity .integrity_image{max-width:55%;max-height:clamp(12rem,24vw,20rem);object-fit:cover;object-position:center bottom}
@media(max-width:767px){.section_integrity .div-block-24{padding-top:2.5rem;padding-bottom:2.5rem}.section_integrity .integrity_image{max-width:100%;max-height:14rem}}
@media(max-width:767px){.integrity_image{max-width:100%}}
/* ---- Review notes 2026-09-17 (Air Leak Testers hub) ---------------------------------------- */
/* "I like when this image is larger": let the family shot fill the column instead of 80%. */
/* The hero column is capped at 48rem for the copy; let the image break out to 1200px. */
.test_hero-image.is-hub-hero{width:min(1200px,92vw);max-width:none;margin:1.5rem auto 0;position:relative;left:50%;transform:translateX(-50%)}
.test_hero-image.is-hub-hero .test-industrial_image{width:100%;max-width:100%}
/* Comparison matrix lifted from the product pages sits directly under the hero. */
.pp-hub-compare{padding:0 0 3rem}.pp-hub-compare .pp-shell{max-width:1280px;margin:0 auto;padding:0 1.5rem}
.pp-hub-compare .pp-compare-intro{max-width:60rem;margin:0 0 1.5rem}.pp-hub-compare h2{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.1;margin:0 0 .75rem}.pp-hub-compare h2 span{color:var(--accent,#fe6c0a)}


/* ---- About Us quality banner: retain the polished, source-approved product composite.
   Only spacing is adjusted so the copy remains inside the panel. */
.about-cta_wrapper.about-quality.v2{isolation:isolate;position:relative;overflow:hidden;min-height:21rem;padding:clamp(3rem,6vw,7rem) clamp(3rem,6vw,5rem);background-color:#20202000;background-image:url('../images/Group-2333-1.png');background-position:50%;background-repeat:no-repeat;background-size:90% auto;border-radius:1rem}
.about-cta_wrapper.about-quality.v2 .about-cta_content{position:relative;z-index:1;max-width:min(25rem,44%);margin:0}
@media(max-width:991px){.about-cta_wrapper.about-quality.v2{min-height:29rem;padding:3rem;background-size:100% auto}.about-cta_wrapper.about-quality.v2 .about-cta_content{max-width:56%}}
@media(max-width:767px){
  .about-cta_wrapper.about-quality.v2{display:flex;flex-direction:column;align-items:stretch;gap:1.5rem;min-height:0;padding:2.25rem 1.5rem;background-image:none;background-color:#202020;background-size:auto;background-position:center}
  .about-cta_wrapper.about-quality.v2 .about-cta_content{max-width:100%;padding:0}
  .about-cta_wrapper.about-quality.v2::after{content:"";display:block;width:100%;height:10.5rem;flex:none;background-image:url('../images/Group-2333-1.png');background-repeat:no-repeat;background-position:center;background-size:contain}
}

/* Mobile Lighthouse AA repair: #77808f on the footer #050507 background is 5.11:1. */
.footer .text-color-alternate { color: #77808f !important; }

/* industries-served hub: cards carry a real image so the absolutely-positioned overlay has height (fixes collapsed mobile grid, 2026-10-16) */
main .electronic_grid .industry_image-link { overflow: hidden; border-radius: 1.25rem; }
main .electronic_grid .industry_image-link .industry_card-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
main .electronic_grid .industry_image-link .image_detail.black { text-align: left; }