.ux-mfg{--brand:#08a840;--brand-glow:#3dff8a;--navy:#0c2f1f;--bg:#0a1f14;--panel:#0f2a1c;--text:#e8f5ec;--sub:#9bb8a6;--line:#1e4a32;--radius:0;font-family:Montserrat,Arial,sans-serif;color:var(--text);line-height:1.65;background:var(--bg)}
.ux-mfg *,.ux-mfg *::before,.ux-mfg *::after{box-sizing:border-box}
.ux-mfg a{color:inherit;text-decoration:none}
.ux-mfg img{max-width:100%;height:auto;display:block}
.ux-mfg .ux-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.ux-mfg .ux-sec{padding:88px 0}
.ux-mfg .ux-eyebrow{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-glow)}
.ux-mfg .ux-h2{margin:0;font-size:clamp(28px,3.2vw,44px);line-height:1.15;font-weight:700;color:#fff;max-width:20ch}
.ux-mfg .ux-lead{margin:16px 0 0;font-size:17px;line-height:1.75;color:var(--sub);max-width:60ch}
.ux-mfg .ux-hero-dark{position:relative;padding:140px 0 96px;background:var(--navy) url('https://flexionex.com/wp-content/uploads/2026/08/Trusted-Expansion-Joint-Manufacturer-for-Critical-Piping-Systems-by-Flexionex.jpg') center/cover no-repeat;color:#fff}
.ux-mfg .ux-hero-dark::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,20,12,.92) 0%,rgba(10,31,20,.88) 100%)}
.ux-mfg .ux-hero-dark .ux-wrap{position:relative;z-index:1}
.ux-mfg .ux-hero-dark h1{margin:0;max-width:14ch;font-size:clamp(36px,5vw,62px);line-height:1.05;font-weight:700}
.ux-mfg .ux-btn{display:inline-flex;padding:16px 30px;background:var(--brand);color:#fff!important;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.ux-mfg .ux-btn:hover{background:#06c94a}
.ux-mfg .ux-btn-light{background:#fff;color:var(--navy)!important}
.ux-mfg .ux-btn-outline{padding:14px 28px;border:2px solid var(--brand-glow);color:var(--brand-glow)!important;font-weight:700;text-transform:uppercase;background:transparent}
.ux-mfg .ux-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ux-mfg .ux-actions-center{justify-content:center}
.ux-mfg .ux-mosaic{display:grid;gap:2px;margin-top:40px;background:var(--line);border:1px solid var(--line)}
@media(min-width:768px){.ux-mfg .ux-mosaic{grid-template-columns:repeat(3,1fr)}}
.ux-mfg .ux-mosaic-cell{position:relative;background:var(--panel);overflow:hidden;min-height:220px}
.ux-mfg .ux-mosaic-cell img{width:100%;height:100%;object-fit:cover;opacity:.85}
.ux-mfg .ux-mosaic-cap{position:absolute;inset:auto 0 0 0;padding:20px;background:linear-gradient(transparent,rgba(6,20,12,.95))}
.ux-mfg .ux-mosaic-cap h3{margin:0;font-size:16px;color:#fff}
.ux-mfg .ux-mosaic-cap p{margin:6px 0 0;font-size:13px;color:var(--sub)}
.ux-mfg .ux-panel{background:var(--panel);border:1px solid var(--line);padding:28px}
.ux-mfg .ux-muted{background:var(--panel)}
.ux-mfg .ux-navy{background:var(--navy)}
.ux-mfg .ux-deep{background:#061408}
.ux-mfg .ux-center{text-align:center}
.ux-mfg .ux-center .ux-h2,.ux-mfg .ux-center .ux-lead{margin-left:auto;margin-right:auto}
.ux-mfg .ux-grid{display:grid;gap:16px;margin-top:36px}
.ux-mfg .ux-g2{grid-template-columns:1fr}
.ux-mfg .ux-g3{grid-template-columns:1fr}
.ux-mfg .ux-g4{grid-template-columns:1fr}
@media(min-width:768px){.ux-mfg .ux-g2{grid-template-columns:1fr 1fr;align-items:center}.ux-mfg .ux-g3{grid-template-columns:repeat(3,1fr)}.ux-mfg .ux-g4{grid-template-columns:repeat(4,1fr)}}
.ux-mfg .ux-card{background:var(--panel);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.ux-mfg .ux-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.ux-mfg .ux-card-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.ux-mfg .ux-card h3{margin:0;font-size:18px;color:#fff}
.ux-mfg .ux-card p{margin:0;font-size:14px;color:var(--sub);flex:1}
.ux-mfg .ux-link{font-size:13px;font-weight:700;color:var(--brand-glow);text-transform:uppercase}
.ux-mfg .ux-pain{padding:22px;border-left:3px solid var(--brand);background:var(--panel)}
.ux-mfg .ux-pain h3{margin:0 0 8px;font-size:17px;color:#fff}
.ux-mfg .ux-pain p{margin:0;font-size:14px;color:var(--sub)}
.ux-mfg .ux-table-wrap{overflow-x:auto;margin-top:36px;border:1px solid var(--line)}
.ux-mfg .ux-table{width:100%;border-collapse:collapse;min-width:640px;font-size:14px;background:var(--panel)}
.ux-mfg .ux-table th{background:var(--brand);color:var(--navy);padding:14px 16px;text-align:left;font-weight:700}
.ux-mfg .ux-table td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--sub)}
.ux-mfg .ux-step{padding:24px;background:var(--panel);border:1px solid var(--line)}
.ux-mfg .ux-tag{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--brand-glow);text-transform:uppercase;margin-bottom:8px}
.ux-mfg .ux-step h3{margin:0;font-size:19px;color:#fff}
.ux-mfg .ux-step p{margin:8px 0 0;font-size:14px;color:var(--sub)}
.ux-mfg .ux-list{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.ux-mfg .ux-list.cols{grid-template-columns:1fr}
@media(min-width:700px){.ux-mfg .ux-list.cols{grid-template-columns:1fr 1fr}}
.ux-mfg .ux-list li{padding:12px 14px 12px 36px;position:relative;background:rgba(255,255,255,.03);border:1px solid var(--line);font-weight:600;color:var(--text)}
.ux-mfg .ux-list li::before{content:"";position:absolute;left:14px;top:18px;width:10px;height:10px;background:var(--brand)}
.ux-mfg .ux-list-check li::before{background:var(--brand-glow)}
.ux-mfg .ux-quote{padding:28px;background:var(--panel);border:1px solid var(--line)}
.ux-mfg .ux-quote p{margin:0;font-size:16px;color:#fff;font-weight:600}
.ux-mfg .ux-quote span{display:block;margin-top:14px;font-size:13px;color:var(--sub)}
.ux-mfg .ux-band{padding:52px 0;background:var(--brand);color:var(--navy);text-align:center}
.ux-mfg .ux-band h2{margin:0;font-size:clamp(24px,3vw,36px);color:var(--navy)}
.ux-mfg .ux-band p{margin:12px auto 0;max-width:52ch;color:rgba(12,47,31,.85);font-weight:500}
.ux-mfg .ux-faq{border-bottom:1px solid var(--line)}
.ux-mfg .ux-faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-weight:700;color:#fff;position:relative}
.ux-mfg .ux-faq summary::-webkit-details-marker{display:none}
.ux-mfg .ux-faq summary::after{content:"+";position:absolute;right:0;color:var(--brand-glow);font-size:22px}
.ux-mfg .ux-faq[open] summary::after{content:"-"}
.ux-mfg .ux-faq p{margin:0 0 16px;color:var(--sub)}
.ux-mfg .ux-faq-wrap{max-width:860px;margin:36px auto 0}
.ux-mfg .ux-check{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.ux-mfg .ux-check li{padding-left:26px;position:relative;color:var(--sub)}
.ux-mfg .ux-check li::before{content:"\2713";position:absolute;left:0;color:var(--brand-glow);font-weight:700}
.ux-mfg .ux-note{margin-top:18px;font-size:13px;color:var(--sub)}
.ux-mfg .ux-quality-img{border:1px solid var(--line)}
.ux-mfg .ux-btn-block{width:100%;margin-bottom:12px;text-align:center;display:block}
.ux-mfg .ux-factory-row{display:grid;gap:20px;margin-top:40px}
@media(min-width:900px){.ux-mfg .ux-factory-row{grid-template-columns:1.2fr .8fr}}
.ux-mfg .ux-factory-row img{border:1px solid var(--line)}
.ux-mfg .ux-text-left{text-align:left}

/* flush hero to header — no white top gap */
.entry-content > .ux-ind:first-child,
.entry-content > .ux-pip:first-child,
.entry-content > .ux-mfg:first-child,
.entry-content > .ux-dct:first-child,
.entry-content > .ux-pvc:first-child,
.entry-content > .ux-flx:first-child,
.entry-content > .ux-nm:first-child,
.entry-content > main[class^="ux-"]:first-child {
  margin-top: 0 !important;
}
/* Kadence default .content-area{margin-top:5rem} is the primary white strip */
#primary.content-area,
.content-area {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.content-area .content-container,
.content-area .entry-content-wrap,
.entry-content-wrap,
.entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* === Category pages mobile (max-width: 781px) === */
/* Note: Kadence main is usually .wrap.kt-clear — UX root is a child (.ux-*), not main itself. */
@media (max-width: 781px) {
  main,
  main.wrap,
  .entry-content {
    overflow-x: hidden !important;
  }
  main img,
  .entry-content img,
  [class^="ux-"] img,
  [class*=" ux-"] img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  main .ux-wrap,
  [class^="ux-"] .ux-wrap,
  [class*=" ux-"] .ux-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  main .ux-sec,
  [class^="ux-"] .ux-sec,
  [class*=" ux-"] .ux-sec {
    padding: 48px 0 !important;
  }
  /* Heroes: don't force taller than viewport; keep readable stack */
  main .ux-hero-full,
  main .ux-hero-split,
  main .ux-mag-hero,
  main .ux-mag-frame,
  main .ux-hero-dark,
  .ux-hero-full,
  .ux-hero-split,
  .ux-mag-hero,
  .ux-mag-frame,
  .ux-hero-dark {
    min-height: 0 !important;
    min-height: unset !important;
    max-height: none;
  }
  main .ux-hero-full,
  .ux-hero-full,
  main .ux-hero-dark,
  .ux-hero-dark {
    padding: 88px 16px 40px !important;
    align-items: flex-end !important;
  }
  main .ux-hero-split {
    display: block !important;
  }
  main .ux-hero-split-inner,
  .ux-hero-split-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  main .ux-hero-copy,
  main .ux-hero-media,
  .ux-hero-copy,
  .ux-hero-media {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  main .ux-hero-media img,
  .ux-hero-media img {
    max-height: 42vh !important;
    object-fit: cover !important;
  }
  main .ux-hero-split,
  .ux-hero-split {
    padding: 72px 16px 28px !important;
  }
  main .ux-hero-full h1,
  main .ux-hero-split h1,
  main .ux-mag-card h1,
  main .ux-hero-dark h1,
  main h1,
  .ux-hero-full h1,
  .ux-hero-split h1,
  .ux-hero-dark h1 {
    font-size: clamp(1.35rem, 5.8vw, 1.85rem) !important;
    line-height: 1.2 !important;
    max-width: none !important;
  }
  main .ux-lead,
  .ux-lead {
    font-size: 15px !important;
    max-width: none !important;
  }
  main .ux-actions,
  .ux-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  main .ux-btn,
  main .ux-btn-outline,
  main a.ux-btn,
  .ux-btn,
  .ux-btn-outline,
  a.ux-btn {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  /* Force single column grids/cards on small screens */
  main .ux-grid,
  main .ux-g2,
  main .ux-g3,
  main .ux-g4,
  main .ux-tri,
  main .ux-bento,
  main .ux-mosaic,
  main .ux-split,
  main .ux-feature,
  main .ux-rail,
  main .ux-stats,
  main .ux-stats-inline,
  main .ux-gallery,
  main .ux-feature-strip,
  main .mk-grid,
  main .mk-g2,
  main .mk-g3,
  main .mk-g4,
  .ux-grid,
  .ux-g2,
  .ux-g3,
  .ux-g4,
  .ux-tri,
  .ux-bento,
  .ux-mosaic,
  .ux-split,
  .ux-feature,
  .ux-rail,
  .ux-stats,
  .ux-stats-inline,
  .ux-gallery {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  main .ux-mosaic .big,
  main .ux-bento .span2,
  .ux-mosaic .big,
  .ux-bento .span2,
  .ux-mosaic .wide,
  .ux-mosaic .tall {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  main .ux-card,
  main .ux-mosaic,
  main .ux-mosaic-cell,
  .ux-card,
  .ux-mosaic,
  .ux-mosaic-cell {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  main .ux-grid > *,
  main .ux-g2 > *,
  main .ux-g3 > *,
  main .ux-g4 > *,
  main .ux-mosaic > *,
  .ux-grid > *,
  .ux-g2 > *,
  .ux-g3 > *,
  .ux-g4 > *,
  .ux-mosaic > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  main .ux-table-wrap,
  main .mk-table-wrap,
  .ux-table-wrap,
  .mk-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  main .ux-mag-card,
  .ux-mag-card {
    margin: 24px 12px !important;
    padding: 22px 18px !important;
    max-width: none !important;
  }
  main .ux-list.cols,
  .ux-list.cols {
    grid-template-columns: 1fr !important;
  }
}