/* MYCELX Enhanced Oil Recovery page: centred photo hero, 3-stat band, REGEN panel, application cards (white on dark), Get Started tuning.
   Desktop = PSD px x --mx-u (mx-product.css). Base = mobile; media blocks use the doubled .mx.mx selector. */

/* ---------- Hero (centred, white copy over the photo) ---------- */
.mx-eorhero{position:relative;overflow:hidden;isolation:isolate;margin-top:calc(-1 * (var(--mx-hdr-top) + var(--mx-hdr-h)) - env(safe-area-inset-top,0px));height:clamp(500px,72svh,640px);padding:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 56px) var(--mx-gutter) 40px;text-align:center;color:#fff;background:#3a7cc0}
.mx-eorhero-bg{position:absolute;inset:0;z-index:-1;transform-origin:50% 100%;background:#3a7cc0 url("../img/enhanced-oil-recovery/enhanced-oil-recovery-hero.webp") 55% 60%/cover no-repeat}
.mx-eorhero .mx-eyebrow{color:#fff}
.mx-eorhero h1{font:700 42px/1.06 var(--mx-font-head);max-width:10em;margin:12px auto 0;letter-spacing:0}
.mx-anim .mx-eorhero .mx-eyebrow{opacity:0}
.mx-anim .mx-eorhero h1{visibility:hidden}

/* ---------- Stats band ---------- */
.mx-stats{background-image:url("../img/enhanced-oil-recovery/enhanced-oil-recovery-stats-background.webp")}
.mx-stats-lead{max-width:44em;margin:0 auto 40px;text-align:center;font-size:16px;line-height:1.55;color:#fff}
.mx-stats-list{grid-template-columns:1fr;gap:32px;max-width:340px;margin:0 auto}
.mx-stat-num--sm{font-size:36px}
.mx-anim .mx-stats-lead{opacity:0}

/* ---------- REGEN panel ---------- */
.mx-panels{padding:56px var(--mx-gutter) 64px}
.mx-panels .mx-sechead h2{margin-top:0}
.mx-panel{position:relative;display:flex;flex-direction:column;max-width:520px;margin:40px auto 0;padding:0 24px 28px;border-radius:var(--mx-radius-img);background:#ededed;color:#000}
.mx-panel-img{width:min(64%,260px);height:auto;margin:-32px auto 8px}
.mx-panel-name{font:700 44px/1 var(--mx-font-head);letter-spacing:0;color:#000}
.mx-panel-sub{margin-top:6px;font:700 20px/1.3 var(--mx-font-body);color:var(--mx-blue-text)}
.mx-panel-col{margin-top:22px}
.mx-panel-col dt{font:700 20px/1.3 var(--mx-font-body);color:#000}
.mx-panel-col dd{margin:2px 0 16px;font-size:15px;line-height:1.55;color:var(--mx-grey)}
.mx-panel-col dd:last-child{margin-bottom:0}
.mx-panel-btn{align-self:stretch;margin-top:26px}
.mx-anim .mx-panel{opacity:0}

/* ---------- Applications (dark; white cards) ---------- */
.mx-eorapps{padding:56px var(--mx-gutter) 64px;color:#fff;background:#091722 url("../img/enhanced-oil-recovery/enhanced-oil-recovery-applications-background.webp") 50% 100%/100% 100% no-repeat}
.mx-appcards{list-style:none;display:grid;gap:20px;max-width:520px;margin:32px auto 0}
.mx-appcard{display:flex;flex-direction:column;padding:24px 24px 28px;border-radius:var(--mx-radius-img);background:#fff;color:var(--mx-ink)}
.mx-appcard-icon{display:flex;align-items:center;height:96px}
.mx-appcard-icon img{width:calc(var(--w,80)*var(--mx-is));height:auto;max-width:100%}
.mx-appcard h3{font:700 22px/1.12 var(--mx-font-head);margin:8px 0 10px;color:var(--mx-ink)}
.mx-appcard p{font-size:15px;line-height:1.55;color:var(--mx-grey)}
.mx-anim .mx-appcard{opacity:0}

/* ---------- Get Started (PSB: black copy, blue eyebrow with .5em tracking, copy x 988) ---------- */
.mx-cta--eor{--mx-cta-wash:228,237,247;--mx-cta-bg:#e4edf7;--mx-cta-heading:#000;--mx-cta-ink:#000;--mx-cta-eyebrow:#226cf2;--mx-cta-phone:#226cf2;
  --mx-cta-h:671.8px;--mx-cta-x:426.4px;--mx-cta-top:109.7px;--mx-wx:.5}
.mx-cta--eor .mx-eyebrow{letter-spacing:.5em}
.mx-cta--eor .mx-stage{--mx-asp:2000/933;--mx-px:.14}

@media (min-width:550px){
  .mx.mx .mx-appcards{gap:24px}
  .mx.mx .mx-appcard{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:24px}
  .mx.mx .mx-appcard-icon{width:92px;height:92px;justify-content:center}
  .mx.mx .mx-appcard h3,.mx.mx .mx-appcard p{flex:1 1 calc(100% - 116px)}
  .mx.mx .mx-appcard h3{margin:0 0 6px;align-self:end}
  .mx.mx .mx-appcard p{align-self:start}
}

@media (min-width:768px){
  .mx.mx .mx-eorhero{height:clamp(560px,60svh,720px);padding-top:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 84px)}
  .mx.mx .mx-eorhero .mx-eyebrow{font-size:var(--mx-eb)}
  .mx.mx .mx-eorhero h1{font-size:calc(42px + 22.5*(var(--mx-frame-w) - 390px)/810);margin-top:16px}
  .mx.mx .mx-stats-lead{font-size:calc(17px + 3*(var(--mx-frame-w) - 768px)/432);margin-bottom:56px}
  .mx.mx .mx-stats-list{grid-template-columns:repeat(3,auto);justify-content:center;max-width:none;gap:0 40px}
  .mx.mx .mx-stat-num--sm{font-size:calc(34px + 10*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-panels{padding:96px var(--mx-gutter) 104px}
  .mx.mx .mx-panel{max-width:none;margin-top:72px;padding:36px 40px 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);column-gap:32px;align-items:start}
  .mx.mx .mx-panel-img{grid-column:2;grid-row:1/5;width:100%;margin:-72px 0 0;align-self:start}
  .mx.mx .mx-panel-name{grid-column:1;font-size:calc(52px + 23*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-panel-sub{grid-column:1;font-size:calc(18px + 2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-panel-col{grid-column:1}
  .mx.mx .mx-panel-col dt{font-size:calc(19px + 3*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-panel-col dd{font-size:calc(15px + 1.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-panel-btn{grid-column:1/-1;justify-self:center;align-self:center;margin-top:32px}
  .mx.mx .mx-eorapps{padding:96px var(--mx-gutter) 104px}
  .mx.mx .mx-appcards{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
  .mx.mx .mx-appcard{flex-direction:column;align-items:stretch;padding:28px 26px 32px}
  .mx.mx .mx-appcard-icon{width:auto;height:96px;justify-content:flex-start}
  .mx.mx .mx-appcard h3{flex:none;align-self:auto;margin:12px 0 10px;font-size:calc(22px + 3*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-appcard p{flex:none;align-self:auto;font-size:calc(15px + 1.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-cta--eor .mx-stage{--mx-px:.18}
}

@media (min-width:1200px){
  .mx.mx .mx-eorhero{height:calc(var(--mx-u)*853);padding:calc(var(--mx-u)*213) var(--mx-side) 0}
  .mx.mx .mx-eorhero .mx-eyebrow{font-size:calc(var(--mx-u)*20)}
  .mx.mx .mx-eorhero h1{font-size:calc(var(--mx-u)*75);line-height:1.054;margin-top:calc(var(--mx-u)*8);max-width:none}
  .mx.mx .mx-stats{padding:calc(var(--mx-u)*98) var(--mx-side) calc(var(--mx-u)*114)}
  .mx.mx .mx-stats-lead{max-width:calc(var(--mx-u)*1258);font-size:calc(var(--mx-u)*25);line-height:1.64;margin-bottom:calc(var(--mx-u)*72)}
  .mx.mx .mx-stats-list{gap:0 calc(var(--mx-u)*80)}
  .mx.mx .mx-stat{padding-left:calc(var(--mx-u)*38)}
  .mx.mx .mx-stat-num--sm{font-size:calc(var(--mx-u)*75)}
  .mx.mx .mx-panels{padding:calc(var(--mx-u)*124) var(--mx-side) calc(var(--mx-u)*124)}
  .mx.mx .mx-panels .mx-sechead h2{margin:0 0 calc(var(--mx-u)*26)}
  .mx.mx .mx-panel{display:block;width:calc(var(--mx-u)*934);max-width:100%;height:calc(var(--mx-u)*676);margin:calc(var(--mx-u)*89) auto 0;padding:0;border-radius:calc(var(--mx-u)*20)}
  .mx.mx .mx-panel>*{position:absolute}
  .mx.mx .mx-panel-img{left:calc(var(--mx-u)*507);top:calc(var(--mx-u)*-66);width:calc(var(--mx-u)*318);margin:0}
  .mx.mx .mx-panel-name{left:calc(var(--mx-u)*97);top:calc(var(--mx-u)*62);font-size:calc(var(--mx-u)*75);line-height:1}
  .mx.mx .mx-panel-sub{left:calc(var(--mx-u)*97);top:calc(var(--mx-u)*136);margin:0;font-size:calc(var(--mx-u)*25);line-height:1.28}
  .mx.mx .mx-panel-col{margin:0}
  .mx.mx .mx-panel-col--a{left:calc(var(--mx-u)*97);top:calc(var(--mx-u)*224);width:calc(var(--mx-u)*370)}
  .mx.mx .mx-panel-col--b{left:calc(var(--mx-u)*503);top:calc(var(--mx-u)*331);width:calc(var(--mx-u)*340)}
  .mx.mx .mx-panel-col dt{font-size:calc(var(--mx-u)*25);line-height:1.04}
  .mx.mx .mx-panel-col dd{margin:calc(var(--mx-u)*6) 0 calc(var(--mx-u)*16);font-size:calc(var(--mx-u)*16);line-height:1.625}
  .mx.mx .mx-panel-btn{left:calc(var(--mx-u)*323);top:calc(var(--mx-u)*577);width:calc(var(--mx-u)*288);margin:0;min-height:calc(var(--mx-u)*43);font-size:calc(var(--mx-u)*16)}
  .mx.mx .mx-eorapps{padding:calc(var(--mx-u)*125) var(--mx-side) calc(var(--mx-u)*171)}
  .mx.mx .mx-eorapps .mx-sechead h2{margin:calc(var(--mx-u)*3) 0 calc(var(--mx-u)*22)}
  .mx.mx .mx-appcards{width:calc(var(--mx-u)*1054);max-width:100%;margin:calc(var(--mx-u)*58) auto 0;gap:calc(var(--mx-u)*27)}
  .mx.mx .mx-appcard{min-height:calc(var(--mx-u)*351);padding:calc(var(--mx-u)*24) calc(var(--mx-u)*30) calc(var(--mx-u)*30) calc(var(--mx-u)*43);border-radius:calc(var(--mx-u)*20)}
  .mx.mx .mx-appcard-icon{height:calc(var(--mx-u)*100)}
  .mx.mx .mx-appcard h3{margin:calc(var(--mx-u)*8) 0 calc(var(--mx-u)*18);font-size:calc(var(--mx-u)*25);line-height:1.05}
  .mx.mx .mx-appcard p{font-size:calc(var(--mx-u)*16);line-height:1.625}
  .mx.mx .mx-cta--eor .mx-stage{--mx-px:.18}
}