/* MYCELX Wastewater Treatment page: light photo hero, 4-stat band, solution tiles, clarifier photo straddling into the dark
   "Compliance Without Compromise" section, Get Started. Shared components come from mx-product.css; desktop = PSD px x --mx-u. */

/* ================= Hero (shared .mx-chero--dark: dark copy on the light sky) ================= */
.mx-chero{--mx-chero-h:856;--mx-chero-top:225}
.mx-chero-bg{background-image:url("../img/wastewater-treatment/wastewater-treatment-hero.webp");background-position:58% 100%}
.mx-chero--dark h1{color:#000}
.mx-chero-text{max-width:30em;margin:16px auto 0;font-size:15px;line-height:1.55;color:#000}   /* client 10-13: grey was hard to read, black */

/* ================= Stats band: 4 stats ================= */
.mx-stats{background-image:url("../img/wastewater-treatment/wastewater-treatment-stats-background.webp")}
.mx-wstats .mx-stat-num{font-size:24px;line-height:1.1;flex-wrap:wrap}
.mx-wstats .mx-wbig{font-size:1.875em;line-height:1}
.mx-wstats .mx-wsp{margin-left:.35em}
.mx-wstats .mx-stat-label{color:rgba(255,255,255,.75)}

/* ================= Solution tiles (white) -> clarifier photo straddling white / navy -> Compliance ================= */
.mx-wsol,.mx-wcomp{--fw:calc(var(--mx-frame-w) - 2*var(--mx-gutter));--fh:calc(var(--fw)*.4569);--pro:calc(var(--fh)*.5046)}   /* client 10-13 (PSB): 1440 x 658 photo, 332 of it above the navy; the three boxes are gone */   /* photo width / height / how far it rises above the navy section */
.mx-wsol{padding:56px var(--mx-gutter) calc(var(--pro) + 48px);overflow-x:clip}
.mx-wsol .mx-sechead-intro{max-width:36em}
.mx-wcomp{position:relative;padding:calc(var(--fh) - var(--pro) + 48px) var(--mx-gutter) 72px;color:#fff;background:#091722 url("../img/wastewater-treatment/wastewater-treatment-compliance-background.webp") 50% 0/max(100%,900px) auto no-repeat}
.mx-wfig{position:absolute;z-index:1;top:calc(-1*var(--pro));left:0;right:0;margin:0 auto;width:var(--fw)}
.mx-wfig img{display:block;width:100%;height:auto}
.mx-wcomp .mx-sechead-intro{color:rgba(255,255,255,.7);max-width:36em}
.mx-wcomp .mx-benefit-list{margin-top:40px}
.mx-wcomp .mx-benefit-num{color:var(--mx-blue-on-dark)}
.mx-wcomp .mx-benefit h3{color:#fff}
.mx-wcomp .mx-benefit p{color:rgba(255,255,255,.7)}

/* ================= Get Started: PSB values (copy x 1040, white copy, blue eyebrow/phone, tracking .5em) ================= */
.mx-cta--ww{--mx-cta-wash:9,23,34;--mx-cta-bg:#091722;--mx-cta-heading:#fff;--mx-cta-ink:#fff;--mx-cta-eyebrow:#226cf2;--mx-cta-phone:#226cf2;
  --mx-cta-h:671.8px;--mx-cta-x:463.8px;--mx-cta-top:204.7px;--mx-wx:.07}
.mx-cta--ww .mx-eyebrow{letter-spacing:.5em}
.mx-cta--ww .mx-stage{--mx-asp:2000/933;--mx-px:.14}
@media (min-width:768px){.mx.mx .mx-cta--ww .mx-stage{--mx-px:.18}}

.mx-anim :is(.mx-chero-text,.mx-wfig){opacity:0}

/* ---- wide mobile (>= 550px) ---- */
@media (min-width:550px){
  .mx.mx .mx-wstats .mx-stat-num{font-size:28px}
}

/* ---- tablet (>= 768px) ---- */
@media (min-width:768px){
  .mx.mx .mx-chero-text{font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432);margin-top:20px}
  .mx.mx .mx-wstats .mx-stats-list{grid-template-columns:1fr 1fr;gap:44px 32px}
  .mx.mx .mx-wstats .mx-stat-num{font-size:32px}
  .mx.mx .mx-wsol{padding:96px var(--mx-gutter) calc(var(--pro) + 72px)}
  .mx.mx .mx-wcomp{padding:calc(var(--fh) - var(--pro) + 56px) var(--mx-gutter) 104px}
  .mx.mx .mx-wcomp .mx-benefit-list{margin-top:56px}
}

/* ---- tablet landscape (>= 1024px) ---- */
@media (min-width:1024px){
  .mx.mx .mx-wstats .mx-stats-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 20px}
  .mx.mx .mx-wstats .mx-stat-num{font-size:30px}
}

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  .mx.mx{--mx-wfw:min(calc(var(--mx-u)*1442),var(--mx-frame-w) - 2*var(--mx-gutter))}
  .mx.mx .mx-chero .mx-eyebrow{margin-top:0}
  .mx.mx .mx-chero-text{max-width:calc(var(--mx-u)*680);margin-top:calc(var(--mx-u)*11);font-size:calc(var(--mx-u)*20);line-height:1.4}
  .mx.mx .mx-wstats{padding:calc(var(--mx-u)*92) var(--mx-side) calc(var(--mx-u)*94)}
  .mx.mx .mx-wstats .mx-stats-list{gap:0 calc(var(--mx-u)*26)}
  .mx.mx .mx-wstats .mx-stat{min-height:calc(var(--mx-u)*210)}
  .mx.mx .mx-wstats .mx-stat-num{box-sizing:border-box;flex-wrap:nowrap;height:calc(var(--mx-u)*92);padding-top:calc(var(--mx-u)*15);font-size:calc(var(--mx-u)*40);line-height:1}
  .mx.mx .mx-wstats .mx-stat-num--sm{padding-top:calc(var(--mx-u)*44.3)}
  .mx.mx .mx-wstats .mx-stat-label{margin-top:0;max-width:calc(var(--mx-u)*(var(--lw) + 12))}
  .mx.mx .mx-wsol,.mx.mx .mx-wcomp{--fw:var(--mx-wfw);--fh:calc(var(--fw)*.4569);--pro:calc(var(--fh)*.5046)}
  .mx.mx .mx-wsol{padding:calc(var(--mx-u)*104) var(--mx-side) calc(var(--pro) + var(--mx-u)*70)}
  .mx.mx .mx-wsol .mx-sechead-intro{max-width:calc(var(--mx-u)*830);line-height:1.5}
  .mx.mx .mx-wsol .mx-tiles{width:calc(var(--mx-u)*1413);margin-top:calc(var(--mx-u)*50);gap:calc(var(--mx-u)*24)}
  .mx.mx .mx-wsol .mx-tile{min-height:calc(var(--mx-u)*625);padding:calc(var(--mx-u)*63) calc(var(--mx-u)*44) calc(var(--mx-u)*40) calc(var(--mx-u)*53)}
  .mx.mx .mx-wsol .mx-tile-icon{height:calc(var(--mx-u)*96)}
  .mx.mx .mx-wsol .mx-tile h3{margin:calc(var(--mx-u)*30) 0 calc(var(--mx-u)*22);font-size:calc(var(--mx-u)*40);line-height:1.2}
  .mx.mx .mx-wsol .mx-tile p{font-size:calc(var(--mx-u)*16);line-height:1.625}
  .mx.mx .mx-wcomp{padding:calc(var(--fh) - var(--pro) + var(--mx-u)*49) var(--mx-side) calc(var(--mx-u)*167)}
  .mx.mx .mx-wcomp .mx-sechead-intro{max-width:calc(var(--mx-u)*880);line-height:1.4}
  .mx.mx .mx-wcomp .mx-benefit-list{width:calc(var(--mx-u)*1325);max-width:100%;margin:calc(var(--mx-u)*84) auto 0;gap:calc(var(--mx-u)*77) min(calc(var(--mx-u)*116),5vw)}
  .mx.mx .mx-wcomp .mx-benefit h3{font-size:calc(var(--mx-u)*30)}
}
@media (max-width:767px){.mx-chero{--mx-scrim:light}}   /* readability on phones: grey copy on the photo */