/* MYCELX Offshore page: centred photo hero, 3-stat band, REGEN / Polisher product panels, dark-copy Get Started.
   Desktop values are PSD px x --mx-u (see mx-product.css). The panels scale with their own width (container units, --pu = one PSD px inside a panel)
   so the desktop composition holds from 332px wide panels (tablet) to full size. */

/* ---------- Hero (photo, centred white headline) ---------- */
.mx-ohero{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:#1b2740}
.mx-ohero-bg{position:absolute;inset:0;z-index:-1;transform-origin:50% 100%;background:#1b2740 url("../img/offshore/offshore-hero.webp") 62% 100%/cover no-repeat}
.mx-ohero .mx-eyebrow{color:#fff}
.mx-ohero h1{font:700 42px/1.06 var(--mx-font-head);max-width:10em;margin:12px auto 0;letter-spacing:0}

/* ---------- Stats band (lead + 3 stats) ---------- */
.mx-stats--three{background-image:url("../img/offshore/offshore-stats-background.webp")}
.mx-stats-lead{max-width:34em;margin:0 auto 36px;text-align:center;font-size:18px;line-height:1.55;color:#fff}
.mx-stats--three .mx-stats-list{grid-template-columns:1fr;gap:28px;max-width:320px;margin:0 auto}

/* ---------- Product panels ---------- */
.mx-offer{padding:56px var(--mx-gutter) 72px;overflow-x:clip}
.mx-offer .mx-sechead h2{margin:0 0 14px}
.mx-panels{display:grid;gap:64px;max-width:520px;margin:80px auto 0}
.mx-panel{position:relative;container-type:inline-size;display:flex;background:#ededed;border-radius:var(--mx-radius-img)}
.mx-panel>*{--pu:min(calc(100cqw/660),1px)}   /* one PSD px inside the panel */
.mx-panel-body{flex:1;position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;min-height:calc(965*var(--pu));padding:calc(56*var(--pu)) calc(20*var(--pu)) calc(49*var(--pu)) calc(54*var(--pu))}
.mx-panel-head{min-height:calc(311*var(--pu));width:100%}
.mx-panel h3{font:700 calc(100*var(--pu))/1 var(--mx-font-head);letter-spacing:0;color:#000}
.mx-panel-sub{margin-top:calc(8*var(--pu));font-size:max(15px,calc(25*var(--pu)));line-height:1.28;color:var(--mx-blue-text)}
.mx-panel-list{max-width:calc(var(--lw)*var(--pu));margin-bottom:max(28px,calc(40*var(--pu)))}
.mx-panel-list>div+div{margin-top:max(12px,calc(14*var(--pu)))}
.mx-panel-list dt{font-weight:700;font-size:max(18px,calc(25*var(--pu)));line-height:1.2;color:#000}
.mx-panel-list dd{margin:2px 0 0;font-size:max(14.5px,calc(16*var(--pu)));line-height:1.625;color:var(--mx-grey)}
.mx-panel .mx-btn{margin-top:auto;min-height:max(44px,calc(43*var(--pu)));padding:0 max(28px,calc(44*var(--pu)));font-size:max(14.5px,calc(16*var(--pu)))}
.mx-panel-img{position:absolute;z-index:0;left:calc(var(--il)*var(--pu));top:calc(var(--it)*var(--pu));width:calc(var(--iw)*var(--pu));height:auto;max-width:none;pointer-events:none}
.mx-panel-head{position:relative;z-index:2}

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

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

/* ---- wide mobile (>= 550px) ---- */
@media (min-width:550px){
  .mx.mx .mx-stats--three .mx-stats-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;max-width:none}
  .mx.mx .mx-stats-lead{font-size:20px}
}

/* ---- tablet (>= 768px): two panels side by side ---- */
@media (min-width:768px){
  .mx.mx .mx-ohero{min-height:clamp(560px,60svh,720px);padding-top:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 96px)}
  .mx.mx .mx-ohero h1{font-size:calc(42px + 22.5*(var(--mx-frame-w) - 390px)/810);max-width:none;margin-top:16px}
  .mx.mx .mx-stats{padding:80px var(--mx-gutter) 88px}
  .mx.mx .mx-stats-lead{font-size:calc(20px + 4*(var(--mx-frame-w) - 768px)/432);margin-bottom:56px}
  .mx.mx .mx-stats--three .mx-stats-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;max-width:760px;margin:0 auto}
  .mx.mx .mx-stat-label{font-size:15px}
  .mx.mx .mx-offer{padding:96px var(--mx-gutter) 104px}
  .mx.mx .mx-panels{grid-template-columns:661fr 660fr;column-gap:5.64%;max-width:none;margin-top:110px}
}

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  .mx.mx .mx-ohero{display:block;min-height:0;height:calc(var(--mx-u)*854);padding:calc(var(--mx-u)*213) var(--mx-side) 0}
  .mx.mx .mx-ohero .mx-eyebrow{font-size:calc(var(--mx-u)*20)}
  .mx.mx .mx-ohero h1{font-size:calc(var(--mx-u)*75);line-height:1.054;margin-top:calc(var(--mx-u)*7)}
  .mx.mx .mx-stats{padding:calc(var(--mx-u)*65) var(--mx-side) calc(var(--mx-u)*100)}
  .mx.mx .mx-stats-lead{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--three .mx-stats-list{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;column-gap:calc(var(--mx-u)*119);max-width:none}
  .mx.mx .mx-offer{padding:calc(var(--mx-u)*118) var(--mx-side) calc(var(--mx-u)*198)}
  .mx.mx .mx-offer .mx-sechead h2{margin:0 0 calc(var(--mx-u)*34)}
  .mx.mx .mx-panels{margin-top:calc(var(--mx-u)*165)}
  .mx.mx .mx-cta--offshore .mx-body>p:not(.mx-eyebrow){max-width:calc(349px*var(--mx-m))}
}