.ux-pip{--brand:#08a840;--brand-dark:#078a36;--navy:#0c2f1f;--accent:#1a6b45;--muted:#eef6f1;--text:#222;--sub:#555;--line:#c8ddd2;--radius:8px;font-family:Montserrat,Arial,sans-serif;color:var(--text);line-height:1.65;background:#fff}
.ux-pip *,.ux-pip *::before,.ux-pip *::after{box-sizing:border-box}
.ux-pip a{color:inherit;text-decoration:none}
.ux-pip img{max-width:100%;height:auto;display:block}
.ux-pip .ux-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.ux-pip .ux-layout{display:grid;gap:32px}
@media(min-width:1024px){.ux-pip .ux-layout{grid-template-columns:220px 1fr;align-items:start}}
.ux-pip .ux-rail{position:sticky;top:24px;background:var(--navy);color:#fff;padding:24px;border-radius:var(--radius)}
.ux-pip .ux-rail h4{margin:0 0 16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9dffb8}
.ux-pip .ux-rail a{display:block;padding:10px 0;font-size:14px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.85)}
.ux-pip .ux-rail a:hover{color:#fff}
.ux-pip .ux-sec{padding:72px 0}
.ux-pip .ux-eyebrow{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
.ux-pip .ux-h2{margin:0;font-size:clamp(26px,3vw,38px);line-height:1.2;font-weight:700;color:var(--navy)}
.ux-pip .ux-lead{margin:16px 0 0;font-size:16px;line-height:1.75;color:var(--sub);max-width:58ch}
.ux-pip .ux-hero-split{display:grid;gap:0;min-height:70vh;background:var(--muted)}
@media(min-width:900px){.ux-pip .ux-hero-split{grid-template-columns:1fr 1fr;min-height:78vh}}
.ux-pip .ux-hero-copy{padding:80px 24px;display:flex;align-items:center}
.ux-pip .ux-hero-copy .ux-wrap{padding:0;max-width:520px}
.ux-pip .ux-hero-copy h1{margin:0;font-size:clamp(32px,4vw,52px);line-height:1.1;color:var(--navy);font-weight:700}
.ux-pip .ux-hero-media img{width:100%;height:100%;min-height:320px;object-fit:cover}
.ux-pip .ux-btn{display:inline-flex;padding:14px 26px;background:var(--brand);color:#fff!important;font-size:13px;font-weight:700;text-transform:uppercase;border-radius:var(--radius)}
.ux-pip .ux-btn-light{background:#fff;color:var(--navy)!important}
.ux-pip .ux-btn-outline{padding:12px 24px;border:2px solid var(--accent);color:var(--navy)!important;font-weight:700;border-radius:var(--radius);background:transparent}
.ux-pip .ux-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.ux-pip .ux-actions-center{justify-content:center}
.ux-pip .ux-strip{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:32px}
@media(min-width:700px){.ux-pip .ux-strip{grid-template-columns:repeat(4,1fr)}}
.ux-pip .ux-strip-item{background:#fff;padding:24px;text-align:center}
.ux-pip .ux-strip-item strong{display:block;font-size:22px;color:var(--navy)}
.ux-pip .ux-strip-item span{display:block;margin-top:6px;font-size:12px;color:var(--sub);font-weight:600}
.ux-pip .ux-feature-strip{padding:32px 0;background:var(--navy);color:#fff}
.ux-pip .ux-feature-strip .ux-grid{display:grid;gap:20px;margin-top:0}
@media(min-width:768px){.ux-pip .ux-feature-strip .ux-grid{grid-template-columns:repeat(4,1fr)}}
.ux-pip .ux-feature-strip h3{margin:0 0 8px;font-size:16px;color:#9dffb8}
.ux-pip .ux-feature-strip p{margin:0;font-size:14px;color:rgba(255,255,255,.78)}
.ux-pip .ux-mosaic{display:grid;gap:10px;margin-top:36px;grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
@media(min-width:768px){.ux-pip .ux-mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:200px}}
.ux-pip .ux-mosaic img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.ux-pip .ux-mosaic .wide{grid-column:span 2}
.ux-pip .ux-mosaic .tall{grid-row:span 2}
.ux-pip .ux-muted{background:var(--muted)}
.ux-pip .ux-navy{background:var(--navy);color:#fff}
.ux-pip .ux-navy .ux-h2,.ux-pip .ux-deep .ux-h2{color:#fff}
.ux-pip .ux-navy .ux-lead,.ux-pip .ux-deep .ux-lead{color:rgba(255,255,255,.78)}
.ux-pip .ux-deep{background:#061a10;color:#fff}
.ux-pip .ux-center{text-align:center}
.ux-pip .ux-center .ux-h2,.ux-pip .ux-center .ux-lead{margin-left:auto;margin-right:auto}
.ux-pip .ux-grid{display:grid;gap:20px;margin-top:36px}
.ux-pip .ux-g2{grid-template-columns:1fr}
.ux-pip .ux-g3{grid-template-columns:1fr}
.ux-pip .ux-g4{grid-template-columns:1fr}
@media(min-width:768px){.ux-pip .ux-g2{grid-template-columns:1fr 1fr;align-items:center}.ux-pip .ux-g3{grid-template-columns:repeat(3,1fr)}.ux-pip .ux-g4{grid-template-columns:repeat(4,1fr)}}
.ux-pip .ux-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.ux-pip .ux-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.ux-pip .ux-card-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.ux-pip .ux-card h3{margin:0;font-size:17px;color:var(--navy)}
.ux-pip .ux-card p{margin:0;font-size:14px;color:var(--sub);flex:1}
.ux-pip .ux-link{font-size:13px;font-weight:700;color:var(--brand)}
.ux-pip .ux-pain{padding:20px;background:#fff;border-radius:var(--radius);border:1px solid var(--line);border-top:4px solid var(--brand)}
.ux-pip .ux-pain h3{margin:0 0 8px;font-size:16px;color:var(--navy)}
.ux-pip .ux-pain p{margin:0;font-size:14px;color:var(--sub)}
.ux-pip .ux-table-wrap{overflow-x:auto;margin-top:32px;border-radius:var(--radius);border:1px solid var(--line)}
.ux-pip .ux-table{width:100%;border-collapse:collapse;min-width:640px;font-size:14px;background:#fff}
.ux-pip .ux-table th{background:var(--accent);color:#fff;padding:14px 16px;text-align:left}
.ux-pip .ux-table td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--sub)}
.ux-pip .ux-step{padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.ux-pip .ux-tag{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--brand);text-transform:uppercase;margin-bottom:6px}
.ux-pip .ux-step h3{margin:0;font-size:18px;color:var(--navy)}
.ux-pip .ux-step p{margin:8px 0 0;font-size:14px;color:var(--sub)}
.ux-pip .ux-list{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.ux-pip .ux-list.cols{grid-template-columns:1fr}
@media(min-width:700px){.ux-pip .ux-list.cols{grid-template-columns:1fr 1fr}}
.ux-pip .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-pip .ux-list li::before{content:"";position:absolute;left:12px;top:16px;width:8px;height:8px;background:var(--brand);border-radius:50%}
.ux-pip .ux-list-check li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.88)}
.ux-pip .ux-quote{padding:24px;background:#fff;border-radius:var(--radius);border:1px solid var(--line)}
.ux-pip .ux-quote p{margin:0;font-weight:600;color:var(--navy)}
.ux-pip .ux-quote span{display:block;margin-top:12px;font-size:13px;color:var(--sub)}
.ux-pip .ux-band{padding:48px 0;background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;text-align:center}
.ux-pip .ux-band h2{margin:0;font-size:clamp(22px,3vw,34px);color:#fff}
.ux-pip .ux-band p{margin:12px auto 0;max-width:50ch}
.ux-pip .ux-faq{border-bottom:1px solid var(--line)}
.ux-pip .ux-faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;font-weight:700;color:var(--navy);position:relative}
.ux-pip .ux-faq summary::-webkit-details-marker{display:none}
.ux-pip .ux-faq summary::after{content:"+";position:absolute;right:0;color:var(--brand)}
.ux-pip .ux-faq[open] summary::after{content:"-"}
.ux-pip .ux-faq p{margin:0 0 14px;color:var(--sub)}
.ux-pip .ux-faq-wrap{max-width:820px;margin:32px auto 0}
.ux-pip .ux-check{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.ux-pip .ux-check li{padding-left:24px;position:relative;color:rgba(255,255,255,.85)}
.ux-pip .ux-check li::before{content:"\2713";position:absolute;left:0;color:#9dffb8}
.ux-pip .ux-note{margin-top:16px;font-size:13px;color:rgba(255,255,255,.65)}
.ux-pip .ux-quality-img{border-radius:var(--radius);border:1px solid rgba(255,255,255,.1)}
.ux-pip .ux-btn-block{width:100%;margin-bottom:10px;text-align:center;display:block}
.ux-pip .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;
  }
}