/* MYCELX Specialty Products page: centred photo hero (shared .mx-chero), four alternating product blocks (grey card + product photo that
   breaks out of it), dark-copy Get Started. Desktop values are PSD px x --mx-u (see mx-product.css). */
.mx-chero-bg{background-image:url("../img/specialty-products/specialty-products-hero.webp");background-position:68% 60%}
.mx-chero{--mx-chero-h:856}
.mx-chero .mx-eyebrow{color:var(--mx-blue-on-dark)}

/* ---------- Product blocks (mobile base) ---------- */
.mx-sps{padding:56px var(--mx-gutter) 72px;display:grid;gap:24px;max-width:calc(560px + 2*var(--mx-gutter));margin:0 auto}
.mx-sp{position:relative;display:flex;flex-direction:column;background:#ededed;border-radius:var(--mx-radius-img);padding:32px 24px 36px}
.mx-sp-img{order:-1;display:block;width:min(100%,calc(var(--iw)*.6px));max-width:none;height:auto;margin:0 auto 24px;pointer-events:none}
.mx-sp-copy{position:relative;z-index:1}
.mx-sp h2{font:700 34px/1.02 var(--mx-font-head);letter-spacing:0;color:var(--mx-ink);transition:color .25s ease}
.mx-sp p{margin-top:16px;font-size:15px;line-height:1.6;color:var(--mx-grey)}
.mx-sp-list{list-style:none;margin:20px 0 28px;display:grid;gap:10px}
.mx-sp-list li{position:relative;padding-left:16px;font-weight:700;font-size:15px;line-height:1.4;color:var(--mx-ink)}
.mx-sp-list li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--mx-blue)}
.mx-sp .mx-btn{min-height:44px;font-size:15px;cursor:pointer}
.mx-sp-link{position:absolute;inset:0;z-index:3;border-radius:inherit}
@media (hover:hover){.mx-sp:hover h2{color:var(--mx-blue-text)}}

/* ---------- Get Started: dark copy on the pale sky (values from the PSB) ---------- */
.mx-cta--sp{--mx-cta-wash:255,255,255;--mx-cta-heading:#091722;--mx-cta-ink:#555;--mx-cta-eyebrow:var(--mx-blue-text);--mx-cta-phone:var(--mx-blue-text);
  --mx-cta-h:671.8px;--mx-cta-x:455.2px;--mx-cta-top:110.4px;--mx-wx:.146}
.mx-cta--sp .mx-stage{--mx-asp:2000/933;--mx-px:.14}

/* ---------- Animation start states ---------- */
.mx-anim :is(.mx-sp,.mx-sp-img){opacity:0}

/* ---- wide mobile (>= 550px) ---- */
@media (min-width:550px){
  .mx.mx .mx-sp{padding:40px 40px 44px}
  .mx.mx .mx-sp h2{font-size:38px}
  .mx.mx .mx-sp p{font-size:16px}
  .mx.mx .mx-sp-list li{font-size:16px}
}

/* ---- tablet (>= 768px): image and copy side by side, alternating ---- */
@media (min-width:768px){
  .mx.mx .mx-sps{padding:104px var(--mx-gutter) 112px;gap:32px;max-width:none}
  .mx.mx .mx-sp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-items:center;padding:48px 44px}
  .mx.mx .mx-sp-img{order:0;grid-column:2;grid-row:1;width:min(100%,calc(var(--iw)*.72px));margin:0 auto}
  .mx.mx .mx-sp-copy{grid-column:1;grid-row:1}
  .mx.mx .mx-sp--air .mx-sp-img,.mx.mx .mx-sp--mobile .mx-sp-img{grid-column:1}
  .mx.mx .mx-sp--air .mx-sp-copy,.mx.mx .mx-sp--mobile .mx-sp-copy{grid-column:2}
  .mx.mx .mx-sp h2{font-size:calc(34px + 30.5*(var(--mx-frame-w) - 390px)/810)}
  .mx.mx .mx-sp p{font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-sp-list li{font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432)}
}

/* ---- desktop (>= 1200px): the PSD. Each block is positioned in PSD px from its own top-left (--bw/--bh = block size). ---- */
@media (min-width:1200px){
  .mx.mx .mx-sps{display:block;padding:calc(var(--mx-u)*105) var(--mx-side) calc(var(--mx-u)*168)}
  .mx.mx .mx-sp{display:block;width:calc(var(--mx-u)*var(--bw));height:calc(var(--mx-u)*var(--bh));margin-left:calc(var(--mx-u)*var(--bx));margin-top:calc(var(--mx-u)*var(--mt,0));padding:0;background:none;border-radius:0;
    --hm:15;--pm:26;--ci:0;--bi:0}
  .mx.mx .mx-sp::before{content:"";position:absolute;left:calc(var(--mx-u)*var(--cl));top:0;width:calc(var(--mx-u)*862);height:calc(var(--mx-u)*var(--ch));background:#ededed;border-radius:calc(var(--mx-u)*20)}
  .mx.mx .mx-sp-img{position:absolute;order:0;left:calc(var(--mx-u)*var(--il));top:calc(var(--mx-u)*var(--it));width:calc(var(--mx-u)*var(--iw));margin:0;z-index:2}
  .mx.mx .mx-sp-copy{position:absolute;left:calc(var(--mx-u)*var(--tx));top:calc(var(--mx-u)*var(--ty));width:calc(var(--mx-u)*(var(--pw) + 12));z-index:1}
  .mx.mx .mx-sp h2{font-size:calc(var(--mx-u)*75);line-height:.9333}
  .mx.mx .mx-sp p{max-width:calc(var(--mx-u)*var(--pw));margin-top:calc(var(--mx-u)*var(--hm));font-size:calc(var(--mx-u)*20);line-height:1.45}
  .mx.mx .mx-sp-list{margin:calc(var(--mx-u)*var(--pm)) 0 calc(var(--mx-u)*37);gap:calc(var(--mx-u)*22);padding-left:calc(var(--mx-u)*var(--bi))}
  .mx.mx .mx-sp-list li{font-size:calc(var(--mx-u)*20);line-height:1.1;white-space:nowrap;padding-left:calc(var(--mx-u)*20)}
  .mx.mx .mx-sp-list li::before{top:calc(var(--mx-u)*8);width:calc(var(--mx-u)*7);height:calc(var(--mx-u)*7)}
  .mx.mx .mx-sp .mx-btn{min-height:calc(var(--mx-u)*43);padding:0 calc(var(--mx-u)*30);font-size:calc(var(--mx-u)*16)}
  .mx.mx .mx-cta--sp .mx-body>p:not(.mx-eyebrow){max-width:calc(397px*var(--mx-m))}
  .mx.mx .mx-sp--mersep{--bw:1197;--bh:648;--bx:8;--cl:0;--ch:648;--il:775;--it:34;--tx:119;--ty:95;--pw:490;--hm:15;--pm:26;--bi:0}
  .mx.mx .mx-sp--air{--bw:1321;--bh:642;--bx:62;--mt:79;--cl:459;--ch:642;--il:0;--it:92;--tx:718;--ty:94;--pw:471;--hm:24;--pm:23;--bi:12}
  .mx.mx .mx-sp--spill{--bw:1393;--bh:642;--bx:8;--mt:80;--cl:0;--ch:642;--il:587;--it:131;--tx:120;--ty:95;--pw:476;--hm:24;--pm:23;--bi:12}
  .mx.mx .mx-sp--mobile{--bw:1414;--bh:727;--bx:-31;--mt:105;--cl:552;--ch:727;--il:0;--it:110;--tx:819;--ty:61;--pw:456;--hm:32;--pm:23;--bi:12}
}
.mx-sphero{--mx-scrim:dark}   /* readability: copy on the photo */

/* 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/specialty-products/specialty-products-hero-front.webp")!important}