/* MYCELX Lab Treatability and Validation page: product hero (shared .mx-phero, jars overhang the hero bottom on desktop), four benefit cards,
   testing-lab photo straddling a navy 'Real-Time Performance' band with six chips, Get Started. Desktop values are PSD px x --mx-u. */
.mx-phero-bg{background-image:url("../img/lab-treatability-and-validation/lab-treatability-and-validation-hero-background.webp")}
.mx-lab-hero-clip{position:absolute;inset:0;z-index:-1;overflow:hidden}   /* clips the parallax/zoom of the bg so the section itself can let the jars overhang */
.mx-lab-hero .mx-phero-bg{z-index:0}

/* ---------- Performance You Can See and Measure ---------- */
.mx-lab-perf{padding:56px var(--mx-gutter) 64px}
.mx-lab-cards{list-style:none;display:grid;gap:20px;max-width:520px;margin:32px auto 0}
.mx-lab-card{display:flex;flex-direction:column;padding:24px 24px 28px;border-radius:var(--mx-radius-img);background:#ededed}
.mx-lab-icon{display:flex;align-items:center;height:80px}
.mx-lab-icon img{width:calc(var(--w,80)*var(--mx-is));height:auto;max-width:100%}
.mx-lab-card h3{font:700 22px/1.12 var(--mx-font-head);margin:12px 0 10px;color:#000}
.mx-lab-card p{font-size:15px;line-height:1.55;color:var(--mx-grey)}

/* ---------- Real-Time Performance Monitoring Built In ---------- */
.mx-lab-rt{--pw:calc(var(--mx-frame-w) - 2*var(--mx-gutter));--ov:calc(var(--pw)*.2869);position:relative;padding-top:8px}   /* --ov: how far the photo dips into the navy band (272 of 948 PSD px) */
.mx-lab-photo{position:relative;z-index:1;width:var(--pw);margin:0 auto}
.mx-lab-photo img{display:block;width:100%;height:auto}
.mx-lab-dark{margin-top:calc(-1*var(--ov));padding:calc(var(--ov) + 36px) var(--mx-gutter) 64px;text-align:center;color:#fff;background:#091722 url("../img/lab-treatability-and-validation/lab-treatability-and-validation-realtime-background.webp") center/100% 100% no-repeat}
.mx-lab-dark .mx-sechead-intro{color:#fff;line-height:1.55}
.mx-lab-chips{list-style:none;display:grid;gap:12px;max-width:420px;margin:32px auto 0}
.mx-lab-chip{display:flex;align-items:center;justify-content:center;min-height:52px;padding:8px 20px;border:2px solid var(--mx-blue);border-radius:999px;background:transparent;text-align:center;font:700 15px/1.4 var(--mx-font-body,'Noto Sans',sans-serif);color:var(--mx-blue)}

/* ---------- Get Started: PSB values (copy x 1135, white heading and copy, blue eyebrow and phone, lab scientist photo) ---------- */
.mx-cta--lab{--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:532.2px;--mx-cta-top:103.2px;--mx-wx:.17}
.mx-cta--lab .mx-eyebrow{letter-spacing:.5em}
.mx-cta--lab .mx-stage{--mx-asp:2000/933;--mx-px:.14}
@media (min-width:768px){.mx.mx .mx-cta--lab .mx-stage{--mx-px:.18}}
@media (min-width:1200px){.mx.mx .mx-cta--lab .mx-body>p:not(.mx-eyebrow){max-width:calc(365px*var(--mx-m))}}

/* ---------- Animation start states ---------- */
.mx-anim :is(.mx-lab-card,.mx-lab-photo,.mx-lab-chip){opacity:0}

/* ---- wide mobile (>= 550px) ---- */
@media (min-width:550px){
  .mx.mx .mx-lab-cards{max-width:none;grid-template-columns:1fr 1fr;gap:24px}
  .mx.mx .mx-lab-rt{--pw:min(calc(var(--mx-frame-w) - 2*var(--mx-gutter)),640px)}
  .mx.mx .mx-lab-chips{max-width:none;grid-template-columns:1fr 1fr;gap:14px 16px}
}

/* ---- tablet (>= 768px) ---- */
@media (min-width:768px){
  .mx.mx .mx-lab-perf{padding:96px var(--mx-gutter) 96px}
  .mx.mx .mx-lab-cards{margin-top:56px}
  .mx.mx .mx-lab-card{padding:32px 28px 36px}
  .mx.mx .mx-lab-icon{height:96px}
  .mx.mx .mx-lab-card h3{font-size:calc(22px + 5*(var(--mx-frame-w) - 768px)/432);margin:14px 0 10px}
  .mx.mx .mx-lab-card p{font-size:calc(15px + 1.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-lab-rt{--pw:min(calc(var(--mx-frame-w) - 2*var(--mx-gutter)),760px)}
  .mx.mx .mx-lab-dark{padding:calc(var(--ov) + 56px) var(--mx-gutter) 96px}
  .mx.mx .mx-lab-chips{margin-top:48px;max-width:760px;gap:16px 20px}
  .mx.mx .mx-lab-chip{min-height:58px;font-size:calc(15px + 1.2*(var(--mx-frame-w) - 768px)/432)}
}

/* ---- tablet landscape (>= 1024px) ---- */
@media (min-width:1024px){
  .mx.mx .mx-lab-rt{--pw:min(calc(var(--mx-frame-w) - 2*var(--mx-gutter)),900px)}
  .mx.mx .mx-lab-chips{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px}
}

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  /* hero: same frame as the MAC hero; jars (353,234 646x660) overhang the 855 px band by 39 px */
  .mx.mx .mx-lab-hero{overflow:visible;padding:calc(var(--mx-u)*305) var(--mx-side) 0 calc(var(--mx-side) + var(--mx-u)*787)}
  .mx.mx .mx-lab-hero .mx-phero-product{left:calc(var(--mx-side) + var(--mx-u)*59);top:calc(var(--mx-u)*234);width:calc(var(--mx-u)*646)}
  .mx.mx .mx-lab-hero h1{margin-top:calc(var(--mx-u)*9)}
  .mx.mx .mx-lab-hero .mx-phero-text{margin-top:calc(var(--mx-u)*29);max-width:calc(var(--mx-u)*560)}

  .mx.mx .mx-lab-perf{padding:calc(var(--mx-u)*146) var(--mx-side) calc(var(--mx-u)*129)}
  .mx.mx .mx-lab-perf .mx-sechead h2{line-height:1.054;margin:calc(var(--mx-u)*12) 0 calc(var(--mx-u)*26)}
  .mx.mx .mx-lab-perf .mx-sechead-intro{max-width:calc(var(--mx-u)*860)}
  .mx.mx .mx-lab-cards{width:calc(var(--mx-u)*1414);max-width:100%;margin:calc(var(--mx-u)*58) auto 0;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--mx-u)*26)}
  .mx.mx .mx-lab-card{min-height:calc(var(--mx-u)*438);padding:calc(var(--mx-u)*43) calc(var(--mx-u)*40) calc(var(--mx-u)*30);border-radius:calc(var(--mx-u)*20)}
  .mx.mx .mx-lab-icon{height:calc(var(--mx-u)*96)}
  .mx.mx .mx-lab-card h3{margin:calc(var(--mx-u)*36) 0 calc(var(--mx-u)*12);font-size:calc(var(--mx-u)*25);line-height:1.1}
  .mx.mx .mx-lab-card p{font-size:calc(var(--mx-u)*16);line-height:1.625}

  .mx.mx .mx-lab-rt{--pw:calc(var(--mx-u)*948);padding-top:0}
  .mx.mx .mx-lab-dark{padding:calc(var(--ov) + var(--mx-u)*75) var(--mx-side) calc(var(--mx-u)*134)}
  .mx.mx .mx-lab-dark .mx-sechead h2{line-height:1.2;margin:0 0 calc(var(--mx-u)*24)}
  .mx.mx .mx-lab-dark .mx-sechead-intro{max-width:calc(var(--mx-u)*790);line-height:1.4}
  .mx.mx .mx-lab-chips{width:calc(var(--mx-u)*1174);max-width:100%;margin:calc(var(--mx-u)*45) auto 0;gap:calc(var(--mx-u)*30)}
  .mx.mx .mx-lab-chip{min-height:calc(var(--mx-u)*63);padding:0 calc(var(--mx-u)*20);border-width:calc(var(--mx-u)*2);font-size:calc(var(--mx-u)*20);line-height:1.4}
}