/* MYCELX product pages (MAC, REGEN, Polishers, Onshore, ...): shared components.
   Desktop values are PSD px x --mx-u, where --mx-u = 0.72px x --mx-m (one PSD px at the current desktop scale). The desktop column is the 1409 PSD px
   column (--mx-side padding on each side, defined at >= 1200 in mx-core.css). Page CSS only adds the images (url()s) and small overrides. */
.mx{--mx-u:calc(.72px*var(--mx-m));--mx-is:.72px}   /* --mx-is: size of one PSD px for icons (mobile .72, tablet .85, desktop = --mx-u) */

/* ================= Product hero: product photo left, copy right on navy with a blue glow ================= */
.mx-phero{position:relative;overflow:hidden;isolation:isolate;margin-top:calc(-1 * (var(--mx-hdr-top) + var(--mx-hdr-h)) - env(safe-area-inset-top,0px));padding:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 28px) var(--mx-gutter) 56px;color:#fff;background:#091722}
.mx-phero-bg{position:absolute;inset:0;z-index:-1;transform-origin:50% 100%;background-color:#091722;background-repeat:no-repeat;background-size:cover;background-position:30% 20%}   /* page css sets background-image */
.mx-phero-product{width:min(70%,320px);margin:0 auto 20px}
.mx-phero .mx-eyebrow{color:var(--mx-blue-on-dark)}
.mx-phero h1{font:700 42px/1.06 var(--mx-font-head);margin-top:12px;letter-spacing:0}
.mx-phero-text{margin-top:16px;font-size:15px;line-height:1.55;color:#fff}
.mx-phero .mx-btn{margin-top:24px;width:100%}
.mx-btn svg{flex:none;width:1em;height:1em;margin-right:.6em}

/* ================= Stats band ================= */
.mx-stats{padding:56px var(--mx-gutter);color:#fff;background-color:#091722;background-repeat:no-repeat;background-size:100% 100%}   /* page css sets background-image */
.mx-stats-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:36px 24px}
.mx-stat{border-left:4px solid var(--mx-blue);padding-left:16px}
.mx-stat-num{display:flex;align-items:baseline;font:700 44px/1 var(--mx-font-head)}
.mx-stat-pre{align-self:center;margin-right:.3em;font-size:14px;line-height:1.05;letter-spacing:0;text-transform:uppercase}
.mx-stat-unit{font-size:.75em}
.mx-stat-label{margin-top:6px;font-size:14px;line-height:1.45;color:rgba(255,255,255,.75)}

/* ================= Section heading (eyebrow + h2 + intro), centred ================= */
.mx-sechead{text-align:center}
.mx-sechead h2{font:700 32px/1.1 var(--mx-font-head);margin:8px 0 14px;letter-spacing:0}
.mx-sechead-intro{font-size:15px;max-width:34em;margin:0 auto;color:var(--mx-grey)}
.mx-sechead--dark{color:#fff}
.mx-sechead--dark .mx-eyebrow{color:var(--mx-blue-on-dark)}
.mx-sechead--dark .mx-sechead-intro{color:rgba(255,255,255,.6)}

/* ================= Tiles: grey cards with icon, title, text (Applications) ================= */
.mx-apps{padding:56px var(--mx-gutter) 64px}
.mx-tiles{list-style:none;display:grid;gap:20px;max-width:520px;margin:32px auto 0}
.mx-tile{display:flex;flex-direction:column;padding:24px 24px 28px;border-radius:var(--mx-radius-img);background:#ededed}
.mx-tile-icon{display:flex;align-items:center;height:72px}
.mx-tile-icon img{width:calc(var(--w,80)*var(--mx-is));height:auto;max-width:100%}   /* --w = the icon's PSD width, set inline */
.mx-tile h3{font:700 22px/1.12 var(--mx-font-head);margin:10px 0 10px;color:var(--mx-ink)}
.mx-tile p{font-size:15px;line-height:1.55;color:var(--mx-grey)}

/* ================= Numbered steps on a dark glow (How it works) ================= */
.mx-steps{padding:56px var(--mx-gutter) 64px;color:#fff;background-color:#091722;background-repeat:no-repeat;background-size:100% 100%;background-position:50% 100%}   /* page css sets background-image */
.mx-steps-list{list-style:none;display:grid;gap:20px;max-width:420px;margin:32px auto 0;counter-reset:none}
.mx-step{display:flex;flex-direction:column;padding:24px 24px 28px;border-radius:var(--mx-radius-img);background:#fff;color:var(--mx-ink)}
.mx-step-num{font:700 28px/1 var(--mx-font-head)}
.mx-step-icon{display:flex;align-items:center;justify-content:center;height:130px;margin:8px 0 6px}
.mx-step-icon img{width:calc(var(--w,180)*var(--mx-is));height:auto;max-width:90%}
.mx-step h3{font:700 24px/1.1 var(--mx-font-head);margin:8px 0 10px}
.mx-step p{font-size:15px;line-height:1.55;color:var(--mx-grey)}

/* ================= Split: image(s) + copy (Effluent quality) ================= */
.mx-split{display:grid;gap:36px;padding:56px var(--mx-gutter) 40px}
.mx-split-media{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.mx-split-media figure{text-align:center}
.mx-split-media img{width:100%;height:auto}
.mx-split-media figcaption{margin-top:10px;font-size:14px;line-height:1.45;color:var(--mx-grey)}
.mx-split-media figcaption strong{font-weight:700}
.mx-split-copy h2{font:700 32px/1.1 var(--mx-font-head);margin:8px 0 16px;letter-spacing:0}
.mx-split-copy p+p{margin-top:1em}
.mx-split-copy p:not(.mx-eyebrow){font-size:15px;line-height:1.6;color:var(--mx-grey)}

/* ================= Numbered benefits grid (01 - 06) ================= */
.mx-benefits{padding:48px var(--mx-gutter) 64px}
.mx-benefit-list{list-style:none;display:grid;gap:28px;margin-top:32px}
.mx-benefit{border-left:4px solid var(--mx-blue);padding-left:20px}
.mx-benefit-num{display:block;font:700 14px/1 var(--mx-font-head);letter-spacing:.05em;color:var(--mx-blue-text)}
.mx-benefit h3{font:700 22px/1.13 var(--mx-font-head);margin:10px 0 8px;color:#000}
.mx-benefit p{font-size:15px;line-height:1.6;color:var(--mx-grey)}

/* ================= Animation start states (see mx-product.js) ================= */
.mx-anim :is(.mx-phero .mx-eyebrow,.mx-phero-text,.mx-phero .mx-btn,.mx-phero-product,.mx-stat,.mx-sechead .mx-eyebrow,.mx-sechead-intro,.mx-tile,.mx-step,.mx-benefit,.mx-split-copy>:not(h2),.mx-split figure){opacity:0}
.mx-anim :is(.mx-sechead h2,.mx-split-copy h2){visibility:hidden}

/* ---- wide mobile (>= 550px) ---- */
@media (min-width:550px){
  .mx.mx .mx-phero .mx-btn{width:auto}
  .mx.mx .mx-stats-list{gap:40px 32px}
  .mx.mx .mx-tiles{gap:24px}
  .mx.mx .mx-tile{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:24px}
  .mx.mx .mx-tile-icon{width:92px;height:92px;justify-content:center}
  .mx.mx .mx-tile h3,.mx.mx .mx-tile p{flex:1 1 calc(100% - 116px)}
  .mx.mx .mx-tile h3{margin:0 0 6px;align-self:end}
  .mx.mx .mx-tile p{align-self:start}
  .mx.mx .mx-steps-list{max-width:none;grid-template-columns:1fr 1fr}
  .mx.mx .mx-benefit-list{grid-template-columns:1fr 1fr;gap:32px 40px}
}

/* ---- tablet (>= 768px) ---- */
@media (min-width:768px){
  .mx.mx{--mx-eb:calc(12px + 5.2*(var(--mx-frame-w) - 390px)/810);--mx-is:.85px}
  .mx.mx .mx-phero{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);column-gap:48px;align-items:center;min-height:clamp(640px,80svh,860px);padding:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 56px) var(--mx-gutter) 64px}
  .mx.mx .mx-phero-product{width:100%;max-width:400px;margin:0 auto}
  .mx.mx .mx-phero h1{font-size:calc(42px + 22.5*(var(--mx-frame-w) - 390px)/810);margin-top:16px}
  .mx.mx .mx-phero-text{font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432);max-width:32em}
  .mx.mx .mx-phero .mx-eyebrow{font-size:var(--mx-eb)}
  .mx.mx .mx-stats{padding:72px var(--mx-gutter)}
  .mx.mx .mx-stats-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px}
  .mx.mx .mx-stat{padding-left:20px;border-left-width:5px}
  .mx.mx .mx-stat-num{font-size:calc(44px + 12*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-stat-label{font-size:15px}
  .mx.mx .mx-sechead .mx-eyebrow{font-size:var(--mx-eb)}
  .mx.mx .mx-sechead h2,.mx.mx .mx-split-copy h2{font-size:calc(34px + 30.5*(var(--mx-frame-w) - 390px)/810);margin:10px 0 18px}
  .mx.mx .mx-sechead-intro{font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432);max-width:38em}
  .mx.mx .mx-apps{padding:96px var(--mx-gutter) 104px}
  .mx.mx .mx-tiles{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
  .mx.mx .mx-tile{display:flex;flex-direction:column;align-items:stretch;padding:28px 26px 32px}
  .mx.mx .mx-tile-icon{width:auto;height:80px;justify-content:flex-start}
  .mx.mx .mx-tile h3{flex:none;align-self:auto;margin:12px 0 10px;font-size:calc(22px + 5*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-tile p{flex:none;align-self:auto;font-size:calc(15px + 1.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-steps{padding:104px var(--mx-gutter) 112px}
  .mx.mx .mx-steps-list{grid-template-columns:1fr 1fr;gap:24px;margin-top:56px}
  .mx.mx .mx-step{padding:28px 28px 32px}
  .mx.mx .mx-step-icon{height:170px}
  .mx.mx .mx-step h3{font-size:calc(26px + 8*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-step p{font-size:calc(15px + 1.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;padding:96px var(--mx-gutter) 56px}
  .mx.mx .mx-split-copy p:not(.mx-eyebrow){font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-split-media figcaption{font-size:15px}
  .mx.mx .mx-benefits{padding:72px var(--mx-gutter) 104px}
  .mx.mx .mx-benefit-list{gap:40px 32px;margin-top:48px}
  .mx.mx .mx-benefit h3{font-size:calc(22px + 6*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-benefit p{font-size:calc(15px + 1.2*(var(--mx-frame-w) - 768px)/432)}
}

/* ---- tablet landscape (>= 1024px) ---- */
@media (min-width:1024px){
  .mx.mx .mx-steps-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .mx.mx .mx-step h3{font-size:calc(22px + 6*(var(--mx-frame-w) - 1024px)/176)}
  .mx.mx .mx-benefit-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  .mx.mx{--mx-is:var(--mx-u)}
  .mx.mx.mx :is(.mx-phero,.mx-chero,.mx-lhero,.mx-pm-hero,.mx-dhero){min-height:0}   /* hero height follows the PSD photo's proportions (see --mx-pw), not a viewport-height clamp */
  .mx.mx .mx-phero{display:block;min-height:0;height:calc(var(--mx-u)*855);padding:calc(var(--mx-u)*256) var(--mx-side) 0 calc(var(--mx-side) + var(--mx-u)*787)}
  .mx.mx .mx-phero-product{position:absolute;left:calc(var(--mx-side) + var(--mx-u)*191);top:calc(var(--mx-u)*147);width:calc(var(--mx-u)*530);max-width:none;margin:0}
  .mx.mx .mx-phero .mx-eyebrow{font-size:calc(var(--mx-u)*20)}
  .mx.mx .mx-phero h1{font-size:calc(var(--mx-u)*75);line-height:1.054;margin-top:calc(var(--mx-u)*14)}
  .mx.mx .mx-phero-text{margin-top:calc(var(--mx-u)*24);max-width:calc(var(--mx-u)*570);font-size:calc(var(--mx-u)*20);line-height:1.4}
  .mx.mx .mx-phero .mx-btn{margin-top:calc(var(--mx-u)*26);min-height:calc(var(--mx-u)*40);font-size:calc(var(--mx-u)*16)}
  .mx.mx .mx-stats{padding:calc(var(--mx-u)*113) var(--mx-side) calc(var(--mx-u)*119)}
  .mx.mx .mx-stats-list{gap:0 calc(var(--mx-u)*26)}
  .mx.mx .mx-stat{border-left-width:calc(var(--mx-u)*7);padding-left:calc(var(--mx-u)*44);min-height:calc(var(--mx-u)*166)}
  .mx.mx .mx-stat-num{font-size:calc(var(--mx-u)*100)}
  .mx.mx .mx-stat-pre{font-size:calc(var(--mx-u)*29.6)}
  .mx.mx .mx-stat-label{margin-top:calc(var(--mx-u)*4);font-size:calc(var(--mx-u)*20);line-height:1.5}
  .mx.mx .mx-sechead .mx-eyebrow{font-size:calc(var(--mx-u)*20)}
  .mx.mx .mx-sechead h2,.mx.mx .mx-split-copy h2{font-size:calc(var(--mx-u)*75);line-height:1.2;margin:calc(var(--mx-u)*3) 0 calc(var(--mx-u)*22)}
  .mx.mx .mx-sechead-intro{font-size:calc(var(--mx-u)*20);line-height:1.4;max-width:calc(var(--mx-u)*780)}
  .mx.mx .mx-apps{padding:calc(var(--mx-u)*124) var(--mx-side) calc(var(--mx-u)*104)}
  .mx.mx .mx-tiles{width:calc(var(--mx-u)*1078);max-width:100%;margin:calc(var(--mx-u)*58) auto 0;gap:calc(var(--mx-u)*27)}
  .mx.mx .mx-tile{min-height:calc(var(--mx-u)*449);padding:calc(var(--mx-u)*29) calc(var(--mx-u)*29) calc(var(--mx-u)*40) calc(var(--mx-u)*43);border-radius:calc(var(--mx-u)*20)}
  .mx.mx .mx-tile-icon{height:calc(var(--mx-u)*96)}
  .mx.mx .mx-tile h3{margin:calc(var(--mx-u)*12) 0 calc(var(--mx-u)*17);font-size:calc(var(--mx-u)*25);line-height:1.1}
  .mx.mx .mx-tile p{font-size:calc(var(--mx-u)*16);line-height:1.625}
  .mx.mx .mx-steps{padding:calc(var(--mx-u)*139) var(--mx-side) calc(var(--mx-u)*126)}
  .mx.mx .mx-steps-list{margin-top:calc(var(--mx-u)*74);gap:0 calc(var(--mx-u)*39)}
  .mx.mx .mx-step{min-height:calc(var(--mx-u)*630);padding:calc(var(--mx-u)*31);border-radius:calc(var(--mx-u)*20)}
  .mx.mx .mx-step-num{font-size:calc(var(--mx-u)*40)}
  .mx.mx .mx-step-icon{height:calc(var(--mx-u)*200);margin:calc(var(--mx-u)*14) 0 calc(var(--mx-u)*7)}
  .mx.mx .mx-step h3{font-size:calc(var(--mx-u)*40);line-height:1.1;margin:calc(var(--mx-u)*10) 0 calc(var(--mx-u)*14)}
  .mx.mx .mx-step p{font-size:calc(var(--mx-u)*16);line-height:1.625}
  .mx.mx .mx-split{grid-template-columns:minmax(0,672fr) minmax(0,608fr);gap:0 calc(var(--mx-u)*123);padding:calc(var(--mx-u)*167) var(--mx-side) calc(var(--mx-u)*96)}
  .mx.mx .mx-split-media{gap:calc(var(--mx-u)*50);padding-left:calc(var(--mx-u)*9)}
  .mx.mx .mx-split-media figcaption{margin-top:calc(var(--mx-u)*14);font-size:calc(var(--mx-u)*20);line-height:1.4}
  .mx.mx .mx-split-copy{padding-top:calc(var(--mx-u)*73)}
  .mx.mx .mx-split-copy p:not(.mx-eyebrow){font-size:calc(var(--mx-u)*20);line-height:1.4}
  .mx.mx .mx-benefits{padding:calc(var(--mx-u)*96) var(--mx-side) calc(var(--mx-u)*135)}
  .mx.mx .mx-benefit-list{gap:calc(var(--mx-u)*57) calc(var(--mx-u)*28);margin-top:calc(var(--mx-u)*58)}
  .mx.mx .mx-benefit{border-left-width:calc(var(--mx-u)*7);padding-left:calc(var(--mx-u)*44)}
  .mx.mx .mx-benefit-num{font-size:calc(var(--mx-u)*20)}
  .mx.mx .mx-benefit h3{font-size:calc(var(--mx-u)*30);margin:calc(var(--mx-u)*20) 0 calc(var(--mx-u)*12)}
  .mx.mx .mx-benefit p{font-size:calc(var(--mx-u)*16);line-height:1.625;max-width:calc(var(--mx-u)*380)}
}

/* ================= Centred photo hero (Onshore / Offshore / EOR style): eyebrow + h1 over a full-bleed photo ================= */
/* page css sets .mx-chero-bg{background-image:url(..)}; add .mx-chero--dark for dark text on a light photo */
.mx-chero{position:relative;overflow:hidden;isolation:isolate;margin-top:calc(-1 * (var(--mx-hdr-top) + var(--mx-hdr-h)) - env(safe-area-inset-top,0px));min-height:clamp(460px,66svh,560px);padding:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 72px) var(--mx-gutter) 56px;text-align:center;color:#fff;background:#0b2233}
.mx-chero-bg{position:absolute;inset:0;z-index:-1;transform-origin:50% 100%;background-color:#0b2233;background-repeat:no-repeat;background-size:cover;background-position:62% 100%}
.mx-chero .mx-eyebrow{color:#fff}
.mx-chero h1{font:700 42px/1.06 var(--mx-font-head);max-width:10em;margin:12px auto 0;letter-spacing:0}
.mx-chero--dark{color:var(--mx-ink)}
.mx-chero--dark .mx-eyebrow{color:var(--mx-blue-text)}

/* ================= Stats band: three stats (+ optional lead paragraph) ================= */
.mx-stats-intro{max-width:34em;margin:0 auto 36px;text-align:center;font-size:18px;line-height:1.55;color:#fff}
.mx-stats--trio .mx-stats-list{grid-template-columns:1fr;gap:28px;max-width:320px;margin:0 auto}

.mx-anim :is(.mx-chero .mx-eyebrow,.mx-stats-intro){opacity:0}

@media (min-width:550px){
  .mx.mx .mx-stats--trio .mx-stats-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;max-width:none}
  .mx.mx .mx-stats-intro{font-size:20px}
}
@media (min-width:768px){
  .mx.mx .mx-chero{min-height:clamp(560px,60svh,720px);padding-top:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 96px)}
  .mx.mx .mx-chero .mx-eyebrow{font-size:var(--mx-eb)}
  .mx.mx .mx-chero h1{font-size:calc(42px + 22.5*(var(--mx-frame-w) - 390px)/810);max-width:none;margin-top:16px}
  .mx.mx .mx-stats-intro{font-size:calc(20px + 4*(var(--mx-frame-w) - 768px)/432);margin-bottom:56px}
  .mx.mx .mx-stats--trio .mx-stats-list{max-width:760px;margin:0 auto}
}
@media (min-width:1200px){
  .mx.mx .mx-chero{display:block;min-height:0;height:calc(var(--mx-u)*var(--mx-chero-h,854));padding:calc(var(--mx-u)*var(--mx-chero-top,213)) var(--mx-side) 0}   /* pages may set --mx-chero-h / --mx-chero-top (PSD px) */
  .mx.mx .mx-chero .mx-eyebrow{font-size:calc(var(--mx-u)*20)}
  .mx.mx .mx-chero h1{font-size:calc(var(--mx-u)*75);line-height:1.054;margin-top:calc(var(--mx-u)*7)}
  .mx.mx .mx-stats-intro{max-width:calc(var(--mx-u)*940);font-size:calc(var(--mx-u)*25);line-height:1.64;margin-bottom:calc(var(--mx-u)*69)}
  .mx.mx .mx-stats--trio .mx-stats-list{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;column-gap:calc(var(--mx-u)*119);max-width:none}
}