/* MYCELX Industrial Water page: centred photo hero, "Comprehensive Solutions" cards on a navy glow with the treatment skid, Get Started.
   Desktop values are PSD px x --mx-u (see mx-product.css). */

/* ---------- Hero ---------- */
.mx-chero-bg{background-image:url("../img/industrial-water/industrial-water-hero.webp");background-position:50% 50%}
.mx-iw-hero{--mx-chero-h:843;--mx-chero-top:214}
.mx-iw-hero .mx-eyebrow{color:var(--mx-blue-on-dark)}

/* ---------- Comprehensive Solutions ---------- */
.mx-sol{background:#fff;overflow-x:clip}
.mx-sol-dark{padding:64px var(--mx-gutter) 96px;color:#fff;background:#091722 url("../img/industrial-water/industrial-water-solutions-background.webp") 50% 100%/100% 100% no-repeat}
.mx-sol-dark .mx-sechead h2{margin:0 0 12px}
.mx-sol-dark .mx-sechead-intro{color:#fff}
.mx-sol-grid{list-style:none;display:grid;gap:20px;max-width:520px;margin:36px auto 0}
.mx-sol-card{padding:28px 26px 32px;border-radius:var(--mx-radius-img);background:#113149}
.mx-sol-card h3{font:700 30px/1.15 var(--mx-font-head);letter-spacing:0;color:#fff}
.mx-sol-card p{margin-top:14px;font-size:15px;line-height:1.6;color:#fff}
.mx-sol-card ul{list-style:none;margin-top:16px}
.mx-sol-card li{position:relative;padding-left:1em;font-size:15px;line-height:1.7;font-weight:700;color:#fff}
.mx-sol-card li::before{content:"\2022";position:absolute;left:0;color:#226cf2}
.mx-sol-skid{position:relative;z-index:1;display:block;width:min(100%,640px);height:auto;margin:-64px auto 0;padding-bottom:0}
.mx-sol::after{content:"";display:block;height:40px}

/* ---------- Get Started: PSB values (copy x 893, white copy, blue eyebrow + phone) ---------- */
.mx-cta--iw{--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:358px;--mx-cta-top:220px;--mx-wx:.02}
.mx-cta--iw .mx-stage{--mx-asp:2000/933;--mx-px:.14}
@media (min-width:768px){.mx.mx .mx-cta--iw .mx-stage{--mx-px:.18}}

/* ---------- Animation start states ---------- */
.mx-anim :is(.mx-sol-card,.mx-sol-skid){opacity:0}

/* ---- wide mobile (>= 550px) ---- */
@media (min-width:550px){
  .mx.mx .mx-sol-grid{gap:24px}
  .mx.mx .mx-sol-card{padding:32px 32px 36px}
  .mx.mx .mx-sol-skid{margin-top:-96px}
}

/* ---- tablet (>= 768px) ---- */
@media (min-width:768px){
  .mx.mx .mx-sol-dark{padding:104px var(--mx-gutter) 150px}
  .mx.mx .mx-sol-grid{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:56px}
  .mx.mx .mx-sol-card{padding:36px 34px 40px}
  .mx.mx .mx-sol-card h3{font-size:calc(32px + 8*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-sol-card p,.mx.mx .mx-sol-card li{font-size:calc(15px + 1.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-sol-skid{width:min(88%,860px);margin-top:-130px}
  .mx.mx .mx-sol::after{height:64px}
}

/* ---- tablet landscape (>= 1024px) ---- */
@media (min-width:1024px){
  .mx.mx .mx-sol-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
  .mx.mx .mx-sol-card{padding:32px 28px 36px}
  .mx.mx .mx-sol-card h3{font-size:calc(32px + 4*(var(--mx-frame-w) - 1024px)/176)}
  .mx.mx .mx-sol-card p,.mx.mx .mx-sol-card li{font-size:15px}
}

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  .mx.mx .mx-sol-dark{min-height:calc(var(--mx-u)*1621);padding:calc(var(--mx-u)*106) var(--mx-side) calc(var(--mx-u)*300)}
  .mx.mx .mx-sol-dark .mx-sechead h2{font-size:calc(var(--mx-u)*75);line-height:calc(70/75);margin:0 0 calc(var(--mx-u)*20)}
  .mx.mx .mx-sol-dark .mx-sechead-intro{font-size:calc(var(--mx-u)*20);line-height:1.45}
  .mx.mx .mx-sol-grid{width:100%;margin:calc(var(--mx-u)*46) 0 0;gap:calc(var(--mx-u)*28) calc(var(--mx-u)*26);grid-template-rows:calc(var(--mx-u)*483) calc(var(--mx-u)*498)}
  .mx.mx .mx-sol-card{padding:calc(var(--mx-u)*42) calc(var(--mx-u)*40) calc(var(--mx-u)*30) calc(var(--mx-u)*46);border-radius:calc(var(--mx-u)*20)}
  .mx.mx .mx-sol-card h3{font-size:calc(var(--mx-u)*40);line-height:1.15}
  .mx.mx .mx-sol-card p{margin-top:calc(var(--mx-u)*20);font-size:calc(var(--mx-u)*16);line-height:calc(26/16)}
  .mx.mx .mx-sol-card ul{margin-top:calc(var(--mx-u)*18)}
  .mx.mx .mx-sol-card li{font-size:calc(var(--mx-u)*16);line-height:calc(26/16)}
  .mx.mx .mx-sol-skid{width:calc(var(--mx-u)*1489);max-width:none;margin:calc(var(--mx-u)*-269) 0 0 calc(50% - var(--mx-u)*599)}
  .mx.mx .mx-sol::after{height:calc(var(--mx-u)*77)}
  .mx.mx .mx-cta--iw p{max-width:calc(464px*var(--mx-m))}
}