.ux-dct{--brand:#08a840;--brand-soft:#b8f0cc;--navy:#0c2f1f;--warm:#f8faf6;--text:#222;--sub:#555;--line:#dfe8e0;--radius:12px;font-family:Montserrat,Arial,sans-serif;color:var(--text);line-height:1.65;background:#fff}
.ux-dct *,.ux-dct *::before,.ux-dct *::after{box-sizing:border-box}
.ux-dct a{color:inherit;text-decoration:none}
.ux-dct img{max-width:100%;height:auto;display:block}
.ux-dct .ux-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.ux-dct .ux-sec{padding:80px 0}
.ux-dct .ux-eyebrow{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
.ux-dct .ux-h2{margin:0;font-size:clamp(26px,3vw,40px);line-height:1.2;font-weight:700;color:var(--navy)}
.ux-dct .ux-lead{margin:16px 0 0;font-size:17px;line-height:1.75;color:var(--sub);max-width:60ch}
.ux-dct .ux-hero-fabric{position:relative;padding:120px 0 88px;background:var(--navy) url('https://flexionex.com/wp-content/uploads/2026/05/Fabric-Expansion-Joints-Custom-Solution-Manufacturer-China.jpg') center/cover no-repeat;color:#fff;border-radius:0 0 var(--radius) var(--radius)}
.ux-dct .ux-hero-fabric::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(12,47,31,.88),rgba(12,47,31,.55))}
.ux-dct .ux-hero-fabric .ux-wrap{position:relative;z-index:1}
.ux-dct .ux-hero-fabric h1{margin:0;max-width:15ch;font-size:clamp(32px,4.5vw,54px);line-height:1.1;font-weight:700}
.ux-dct .ux-hero-fabric .ux-lead{color:rgba(255,255,255,.88)}
.ux-dct .ux-btn{display:inline-flex;padding:14px 28px;background:var(--brand);color:#fff!important;font-size:13px;font-weight:700;text-transform:uppercase;border-radius:var(--radius)}
.ux-dct .ux-btn-light{background:#fff;color:var(--navy)!important}
.ux-dct .ux-btn-outline{padding:12px 26px;border:2px solid #fff;color:#fff!important;font-weight:700;border-radius:var(--radius);background:transparent}
.ux-dct .ux-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.ux-dct .ux-actions-center{justify-content:center}
.ux-dct .ux-bento{display:grid;gap:14px;margin-top:40px;grid-template-columns:1fr}
@media(min-width:768px){.ux-dct .ux-bento{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,200px)}}
.ux-dct .ux-bento-item{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.ux-dct .ux-bento-item img{width:100%;height:100%;object-fit:cover;min-height:180px}
.ux-dct .ux-bento-cap{position:absolute;inset:auto 0 0 0;padding:16px;background:linear-gradient(transparent,rgba(12,47,31,.92));color:#fff}
.ux-dct .ux-bento-cap h3{margin:0;font-size:15px}
.ux-dct .ux-bento-cap p{margin:4px 0 0;font-size:12px;opacity:.85}
.ux-dct .ux-bento .span2{grid-column:span 2}
.ux-dct .ux-bento .span2r{grid-row:span 2}
.ux-dct .ux-stack{display:grid;gap:24px;margin-top:40px}
.ux-dct .ux-stack-item{display:grid;gap:20px;align-items:center;background:var(--warm);padding:28px;border-radius:var(--radius);border:1px solid var(--line)}
@media(min-width:800px){.ux-dct .ux-stack-item{grid-template-columns:1fr 1.2fr}}
.ux-dct .ux-stack-item img{border-radius:var(--radius)}
.ux-dct .ux-muted{background:var(--warm)}
.ux-dct .ux-navy{background:var(--navy);color:#fff}
.ux-dct .ux-navy .ux-h2,.ux-dct .ux-deep .ux-h2{color:#fff}
.ux-dct .ux-navy .ux-lead,.ux-dct .ux-deep .ux-lead{color:rgba(255,255,255,.78)}
.ux-dct .ux-deep{background:#061a10;color:#fff}
.ux-dct .ux-center{text-align:center}
.ux-dct .ux-center .ux-h2,.ux-dct .ux-center .ux-lead{margin-left:auto;margin-right:auto}
.ux-dct .ux-grid{display:grid;gap:18px;margin-top:36px}
.ux-dct .ux-g2{grid-template-columns:1fr}
.ux-dct .ux-g3{grid-template-columns:1fr}
.ux-dct .ux-g4{grid-template-columns:1fr}
@media(min-width:768px){.ux-dct .ux-g2{grid-template-columns:1fr 1fr;align-items:center}.ux-dct .ux-g3{grid-template-columns:repeat(3,1fr)}.ux-dct .ux-g4{grid-template-columns:repeat(4,1fr)}}
.ux-dct .ux-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.ux-dct .ux-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.ux-dct .ux-card-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.ux-dct .ux-card h3{margin:0;font-size:17px;color:var(--navy)}
.ux-dct .ux-card p{margin:0;font-size:14px;color:var(--sub);flex:1}
.ux-dct .ux-link{font-weight:700;color:var(--brand);font-size:13px;text-transform:uppercase}
.ux-dct .ux-pain{padding:20px;background:#fff;border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 4px 20px rgba(12,47,31,.04)}
.ux-dct .ux-pain h3{margin:0 0 8px;font-size:16px;color:var(--navy)}
.ux-dct .ux-pain p{margin:0;font-size:14px;color:var(--sub)}
.ux-dct .ux-table-wrap{overflow-x:auto;margin-top:32px;border-radius:var(--radius);border:1px solid var(--line)}
.ux-dct .ux-table{width:100%;border-collapse:collapse;min-width:640px;font-size:14px;background:#fff}
.ux-dct .ux-table th{background:var(--navy);color:#fff;padding:14px 16px;text-align:left}
.ux-dct .ux-table td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--sub)}
.ux-dct .ux-step{padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.ux-dct .ux-tag{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--brand);text-transform:uppercase;margin-bottom:6px}
.ux-dct .ux-step h3{margin:0;font-size:18px;color:var(--navy)}
.ux-dct .ux-step p{margin:8px 0 0;font-size:14px;color:var(--sub)}
.ux-dct .ux-list{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.ux-dct .ux-list.cols{grid-template-columns:1fr}
@media(min-width:700px){.ux-dct .ux-list.cols{grid-template-columns:1fr 1fr}}
.ux-dct .ux-list li{padding:12px 14px 12px 32px;position:relative;background:#fff;border:1px solid var(--line);font-weight:600;border-radius:var(--radius)}
.ux-dct .ux-list li::before{content:"";position:absolute;left:12px;top:16px;width:8px;height:8px;background:var(--brand);border-radius:2px}
.ux-dct .ux-list-check li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.88)}
.ux-dct .ux-quote{padding:24px;background:#fff;border-radius:var(--radius);border:1px solid var(--line)}
.ux-dct .ux-quote p{margin:0;font-weight:600;color:var(--navy)}
.ux-dct .ux-quote span{display:block;margin-top:12px;font-size:13px;color:var(--sub)}
.ux-dct .ux-band{padding:48px 0;background:var(--brand-soft);color:var(--navy);text-align:center}
.ux-dct .ux-band h2{margin:0;font-size:clamp(22px,3vw,34px)}
.ux-dct .ux-band p{margin:12px auto 0;max-width:50ch;color:var(--sub)}
.ux-dct .ux-band .ux-btn{background:var(--navy);color:#fff!important}
.ux-dct .ux-faq{border-bottom:1px solid var(--line)}
.ux-dct .ux-faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;font-weight:700;color:var(--navy);position:relative}
.ux-dct .ux-faq summary::-webkit-details-marker{display:none}
.ux-dct .ux-faq summary::after{content:"+";position:absolute;right:0;color:var(--brand)}
.ux-dct .ux-faq[open] summary::after{content:"-"}
.ux-dct .ux-faq p{margin:0 0 14px;color:var(--sub)}
.ux-dct .ux-faq-wrap{max-width:820px;margin:32px auto 0}
.ux-dct .ux-check{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.ux-dct .ux-check li{padding-left:24px;position:relative;color:rgba(255,255,255,.85)}
.ux-dct .ux-check li::before{content:"\2713";position:absolute;left:0;color:#9dffb8}
.ux-dct .ux-note{margin-top:16px;font-size:13px;color:rgba(255,255,255,.65)}
.ux-dct .ux-quality-img{border-radius:var(--radius);border:1px solid rgba(255,255,255,.1)}
.ux-dct .ux-btn-block{width:100%;margin-bottom:10px;text-align:center;display:block}
.ux-dct .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;
  }
}