/* MYCELX Polymer page: centred lab-photo hero (shared .mx-chero), dark intro, process stills + copy, four cohesion cards, validated banner.
   Shared components (.mx-chero, .mx-sechead) come from mx-product.css. Desktop values are PSD px x --mx-u. No Get Started section on this page (none in the PSB). */
.mx-chero-bg{background-image:url("../img/polymer/polymer-hero.webp");background-position:64% 30%}
.mx-chero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,23,34,.38),rgba(9,23,34,0) 60%)}   /* keeps the white headline legible over the white coat */
.mx-poly-hero .mx-eyebrow{color:var(--mx-blue-on-dark)}

/* ---------- From Contamination to Clarity (navy + blue glow) ---------- */
.mx-poly-clarity{padding:64px var(--mx-gutter) 72px;text-align:center;color:#fff;background:#091722 url("../img/polymer/polymer-clarity-background.webp") center/100% 100% no-repeat}
.mx-poly-clarity .mx-sechead-intro{color:#fff;line-height:1.55}
.mx-poly-clarity-btn{margin-top:32px}

/* ---------- Permanently Bound Contaminants: 2x2 process stills + copy ---------- */
.mx-poly-bound{display:grid;gap:40px;padding:56px var(--mx-gutter) 64px}
.mx-poly-gifs{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:520px;width:100%;margin:0 auto}
.mx-poly-gif{overflow:hidden;border-radius:var(--mx-radius-img);aspect-ratio:320/325;background:#ededed}
.mx-poly-gif img{display:block;width:100%;height:100%;object-fit:cover}
.mx-poly-copy .mx-eyebrow{margin-bottom:10px}
.mx-poly-copy h2{font:700 34px/1.08 var(--mx-font-head);letter-spacing:0;color:var(--mx-ink)}
.mx-poly-copy p:not(.mx-eyebrow){margin-top:14px;font-size:15px;line-height:1.6;color:var(--mx-grey)}
.mx-poly-copy .mx-btn{margin-top:28px}

/* ---------- Molecular Cohesion, Not Filtration ---------- */
.mx-poly-cohesion{padding:64px var(--mx-gutter) 72px;background:#ededed}
.mx-poly-cards{list-style:none;display:grid;gap:20px;max-width:420px;margin:36px auto 0}
.mx-poly-card{display:flex;flex-direction:column;padding:28px 26px 32px;border-radius:var(--mx-radius-img);background:#fff}
.mx-poly-icon{display:flex;align-items:center;justify-content:center;height:150px}
.mx-poly-icon img{width:calc(var(--w,160)*var(--mx-is)*.85);max-width:100%;height:auto}
.mx-poly-card h3{font:700 24px/1.1 var(--mx-font-head);margin:22px 0 12px;color:var(--mx-ink)}
.mx-poly-card p{font-size:15px;line-height:1.55;color:var(--mx-grey)}

/* ---------- Validated in the Lab, Proven in the Field ---------- */
.mx-poly-valid{display:grid;gap:32px;padding:56px var(--mx-gutter) 64px;color:#fff;background:#091722 url("../img/polymer/polymer-validated-background.webp") center/cover no-repeat}
.mx-poly-valid-photo{width:100%;max-width:520px;height:auto;margin:0 auto;border-radius:24px}
.mx-poly-valid h2{font:700 34px/1.08 var(--mx-font-head);letter-spacing:0}
.mx-poly-valid p{margin-top:16px;font-size:15px;line-height:1.6;color:#fff}
.mx-poly-valid .mx-btn{margin-top:26px}

/* ---------- Animation start states ---------- */
.mx-anim :is(.mx-poly-clarity-btn,.mx-poly-gif,.mx-poly-copy>:not(h2),.mx-poly-card,.mx-poly-valid-photo,.mx-poly-valid-copy>:not(h2)){opacity:0}
.mx-anim :is(.mx-poly-copy h2,.mx-poly-valid h2){visibility:hidden}

/* ---- wide mobile (>= 550px) ---- */
@media (min-width:550px){
  .mx.mx .mx-poly-cards{max-width:none;grid-template-columns:1fr 1fr;gap:24px}
  .mx.mx .mx-poly-gifs{gap:20px}
}

/* ---- tablet (>= 768px) ---- */
@media (min-width:768px){
  .mx.mx .mx-poly-clarity{padding:104px var(--mx-gutter) 112px}
  .mx.mx .mx-poly-clarity-btn{margin-top:40px}
  .mx.mx .mx-poly-bound{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px;align-items:center;padding:96px var(--mx-gutter) 104px}
  .mx.mx .mx-poly-gifs{gap:20px;max-width:none;margin:0}
  .mx.mx .mx-poly-copy h2,.mx.mx .mx-poly-valid h2{font-size:calc(34px + 30.5*(var(--mx-frame-w) - 390px)/810)}
  .mx.mx .mx-poly-copy p:not(.mx-eyebrow),.mx.mx .mx-poly-valid p{font-size:calc(15px + 1.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-poly-cohesion{padding:104px var(--mx-gutter) 112px}
  .mx.mx .mx-poly-cards{margin-top:56px;gap:24px}
  .mx.mx .mx-poly-card{padding:32px 28px 36px}
  .mx.mx .mx-poly-icon{height:170px}
  .mx.mx .mx-poly-card h3{font-size:calc(24px + 6*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-poly-card p{font-size:calc(15px + 1.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-poly-valid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0 48px;align-items:center;padding:96px var(--mx-gutter) 104px}
  .mx.mx .mx-poly-valid-photo{max-width:none;margin:0;border-radius:36px}
}

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

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  .mx.mx .mx-chero-bg::after{display:none}   /* desktop shows the PSD photo exactly as exported (no extra wash) */
  .mx.mx .mx-poly-hero{--mx-chero-h:797;--mx-chero-top:220}
  .mx.mx .mx-poly-hero h1{margin-top:calc(var(--mx-u)*20)}

  .mx.mx .mx-poly-clarity{padding:calc(var(--mx-u)*108) var(--mx-side) calc(var(--mx-u)*108)}
  .mx.mx .mx-poly-clarity .mx-sechead-intro{max-width:calc(var(--mx-u)*849);line-height:1.5}
  .mx.mx .mx-poly-clarity-btn{margin-top:calc(var(--mx-u)*41);min-height:calc(var(--mx-u)*43);padding:0 calc(var(--mx-u)*29);font-size:calc(var(--mx-u)*16)}

  .mx.mx .mx-poly-bound{grid-template-columns:minmax(0,668fr) minmax(0,687fr);gap:0 calc(var(--mx-u)*54);align-items:start;padding:calc(var(--mx-u)*127) var(--mx-side) calc(var(--mx-u)*135)}
  .mx.mx .mx-poly-gifs{gap:calc(var(--mx-u)*31) calc(var(--mx-u)*28);width:calc(var(--mx-u)*668);max-width:100%}
  .mx.mx .mx-poly-gif{border-radius:calc(var(--mx-u)*20)}
  .mx.mx .mx-poly-copy{padding-top:calc(var(--mx-u)*71)}
  .mx.mx .mx-poly-copy .mx-eyebrow{font-size:calc(var(--mx-u)*20);margin-bottom:calc(var(--mx-u)*-2)}
  .mx.mx .mx-poly-copy h2{font-size:calc(var(--mx-u)*75);line-height:1.08}
  .mx.mx .mx-poly-copy p:not(.mx-eyebrow){margin-top:0;font-size:calc(var(--mx-u)*16);line-height:1.625;max-width:calc(var(--mx-u)*667)}
  .mx.mx .mx-poly-copy h2+p{margin-top:calc(var(--mx-u)*18)}
  .mx.mx .mx-poly-copy p+p{margin-top:calc(var(--mx-u)*26)}
  .mx.mx .mx-poly-copy .mx-btn{margin-top:calc(var(--mx-u)*37);min-height:calc(var(--mx-u)*43);padding:0 calc(var(--mx-u)*49);font-size:calc(var(--mx-u)*16)}

  .mx.mx .mx-poly-cohesion{padding:calc(var(--mx-u)*112) var(--mx-side) calc(var(--mx-u)*129)}
  .mx.mx .mx-poly-cohesion .mx-sechead h2{line-height:1.054;margin:calc(var(--mx-u)*6) 0 calc(var(--mx-u)*34)}
  .mx.mx .mx-poly-cohesion .mx-sechead-intro{max-width:calc(var(--mx-u)*924);line-height:1.5}
  .mx.mx .mx-poly-cards{max-width:none;margin:calc(var(--mx-u)*63) 0 0;gap:calc(var(--mx-u)*28)}
  .mx.mx .mx-poly-card{min-height:calc(var(--mx-u)*582);padding:calc(var(--mx-u)*50) calc(var(--mx-u)*35) calc(var(--mx-u)*30) calc(var(--mx-u)*41);border-radius:calc(var(--mx-u)*20)}
  .mx.mx .mx-poly-icon{height:calc(var(--mx-u)*212)}
  .mx.mx .mx-poly-icon img{width:calc(var(--w,160)*var(--mx-u))}
  .mx.mx .mx-poly-card h3{margin:calc(var(--mx-u)*31) 0 calc(var(--mx-u)*14);font-size:calc(var(--mx-u)*30);line-height:1.1}
  .mx.mx .mx-poly-card p{font-size:calc(var(--mx-u)*16);line-height:1.625}

  .mx.mx .mx-poly-valid{grid-template-columns:calc(var(--mx-u)*573) minmax(0,1fr);gap:0 calc(var(--mx-u)*62);align-items:start;padding:calc(var(--mx-u)*164) var(--mx-side) calc(var(--mx-u)*162);padding-left:calc(var(--mx-side) + var(--mx-u)*54)}
  .mx.mx .mx-poly-valid-photo{border-radius:calc(var(--mx-u)*50);aspect-ratio:573/483;object-fit:cover}
  .mx.mx .mx-poly-valid-copy{padding-top:calc(var(--mx-u)*46)}
  .mx.mx .mx-poly-valid h2{font-size:calc(var(--mx-u)*75);line-height:1.054}
  .mx.mx .mx-poly-valid p{margin-top:calc(var(--mx-u)*40);font-size:calc(var(--mx-u)*20);line-height:1.4;max-width:calc(var(--mx-u)*558)}
  .mx.mx .mx-poly-valid .mx-btn{margin-top:calc(var(--mx-u)*40);min-height:calc(var(--mx-u)*43);padding:0 calc(var(--mx-u)*38);font-size:calc(var(--mx-u)*16)}
}
.mx-poly-hero{--mx-scrim:dark;--mx-scrim-a:.4;--mx-scrim-k:.62}   /* readability: copy on the photo; small and light, close to the PSD's own shading */

/* Hero foreground: the PSD puts a masked copy of the photo above the headline (the object overlaps the title). Same box and motion as the background (shares its class). */
.mx-hero-front{background-image:url("../img/polymer/polymer-hero-front.webp")!important}
@media (max-width:1199px){.mx-poly-hero .mx-hero-front{display:block!important}}   /* owner: on Polymer the pipette may overlap the title on every screen size */