/* MYCELX Onshore page: centred photo hero, 3-stat band with lead paragraph, MAC + REGEN product panels (.mx-panels, reusable), Get Started.
   Shared product components (stats band, section head) come from mx-product.css; desktop values are PSD px x --mx-u. */
.mx-stats{background-image:url("../img/onshore/onshore-stats-background.webp")}

/* ================= Hero: eyebrow + white H1 over the sunset photo ================= */
.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));height:clamp(520px,80svh,640px);padding:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 64px) var(--mx-gutter) 40px;text-align:center;color:#fff;background:#3a2a40}
.mx-ohero-bg{position:absolute;inset:0;z-index:-1;transform-origin:50% 100%;background:#3a2a40 url("../img/onshore/onshore-hero.webp") 40% 100%/cover no-repeat}
.mx-ohero .mx-eyebrow{color:#fff;text-indent:.4em}
.mx-ohero h1{font:700 42px/1.06 var(--mx-font-head);max-width:11em;margin:12px auto 0;letter-spacing:0}

/* ================= Stats band: lead paragraph + three stats ================= */
.mx-stats-lead{max-width:36em;margin:0 auto 40px;text-align:center;font-size:17px;line-height:1.55;color:#fff}
.mx-stats--lead .mx-stats-list{grid-template-columns:1fr;gap:32px}
.mx-stats--lead .mx-stat-pre{margin-right:.12em}
.mx-stats--lead .mx-stat-unit--sm{font-size:max(.28em,13px);margin-left:.1em;text-transform:uppercase}
.mx-stats--lead .mx-stat-label{color:#fff}

/* ================= Section head + product panels ================= */
.mx-solution-sec{padding:56px var(--mx-gutter) 72px;overflow-x:clip}
.mx-solution-sec .mx-sechead-intro{max-width:36em}

/* Product panels (reusable): grey rounded card, big name, blue subtitle, product image poking out above the card, spec list, button.
   Markup: .mx-panels > article.mx-panel > (.mx-panel-head > h3 + p.mx-panel-sub) + img.mx-panel-media[style="--x;--y;--w" in PSD px] + dl.mx-panel-list > div > dt+dd + a.mx-btn.mx-panel-btn */
.mx-panels{display:grid;gap:96px;max-width:720px;margin:88px auto 0}
.mx-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 38%;column-gap:12px;align-content:start;padding:28px 24px 32px;border-radius:var(--mx-radius-img);background:#ededed}
.mx-panel-head{grid-column:1;grid-row:1;min-width:0}
.mx-panel h3{font:700 44px/1 var(--mx-font-head);letter-spacing:0;color:#000}
.mx-panel-sub{margin-top:8px;font-size:17px;line-height:1.3;color:var(--mx-blue)}
.mx-panel-media{grid-column:2;grid-row:1;align-self:start;justify-self:end;width:100%;height:auto;margin-top:-52px;pointer-events:none}
.mx-panel-list{grid-column:1 / -1;margin-top:24px}
.mx-panel-list>div+div{margin-top:18px}
.mx-panel-list dt{font:700 19px/1.25 var(--mx-font-body);color:#000}
.mx-panel-list dd{margin-top:2px;font-size:15px;line-height:1.6;color:var(--mx-grey)}
.mx-panel-btn{grid-column:1 / -1;margin-top:32px;width:100%}

/* ================= Get Started: PSB values (copy x 1121, dark copy, blue eyebrow + phone) ================= */
.mx-cta--onshore{--mx-cta-heading:#091722;--mx-cta-ink:#091722;--mx-cta-eyebrow:#226cf2;--mx-cta-phone:#226cf2;--mx-cta-h:671.8px;--mx-cta-x:522.1px;--mx-cta-top:165.2px;--mx-wx:.07}
.mx-cta--onshore .mx-stage{--mx-asp:2000/933;--mx-px:.14}
@media (min-width:768px){.mx.mx .mx-cta--onshore .mx-stage{--mx-px:.18}}

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

/* ---- wide mobile (>= 550px) ---- */
@media (min-width:550px){
  .mx.mx .mx-panel{padding:36px 36px 40px}
  .mx.mx .mx-panel h3{font-size:56px}
  .mx.mx .mx-panel-btn{width:auto}
}

/* ---- tablet (>= 768px) ---- */
@media (min-width:768px){
  .mx.mx .mx-ohero{height:clamp(560px,60svh,720px);padding-top:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 84px)}
  .mx.mx .mx-ohero .mx-eyebrow{font-size:var(--mx-eb)}
  .mx.mx .mx-ohero h1{font-size:calc(42px + 22.5*(var(--mx-frame-w) - 390px)/810);margin-top:16px;max-width:none}
  .mx.mx .mx-stats--lead{padding:88px var(--mx-gutter) 88px}
  .mx.mx .mx-stats-lead{font-size:calc(18px + 3.4*(var(--mx-frame-w) - 768px)/432);margin-bottom:56px}
  .mx.mx .mx-stats--lead .mx-stats-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px}
  .mx.mx .mx-stats--lead .mx-stat-num{font-size:calc(40px + 45*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-stats--lead .mx-stat-pre{font-size:calc(14px + 14*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-solution-sec{padding:96px var(--mx-gutter) 112px}
  .mx.mx .mx-panels{gap:104px;margin-top:104px;max-width:780px}
  .mx.mx .mx-panel{grid-template-columns:minmax(0,1fr) 34%;column-gap:20px;padding:44px 48px 48px;border-radius:20px}
  .mx.mx .mx-panel h3{font-size:calc(64px + 20*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-panel-sub{font-size:calc(20px + 1.4*(var(--mx-frame-w) - 768px)/432);margin-top:10px}
  .mx.mx .mx-panel-media{margin-top:-84px}
  .mx.mx .mx-panel-list{margin-top:32px}
  .mx.mx .mx-panel-list>div+div{margin-top:22px}
  .mx.mx .mx-panel-list dt{font-size:calc(20px + 1.4*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-panel-list dd{font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-panel-btn{margin-top:40px}
}

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  .mx.mx .mx-ohero{height:calc(var(--mx-u)*855);padding:calc(var(--mx-u)*212) var(--mx-side) 0}
  .mx.mx .mx-ohero .mx-eyebrow{font-size:calc(var(--mx-u)*20);line-height:1.2}
  .mx.mx .mx-ohero h1{font-size:calc(var(--mx-u)*75);line-height:1.054;margin-top:calc(var(--mx-u)*16)}

  .mx.mx .mx-stats--lead{padding:calc(var(--mx-u)*67) var(--mx-side) calc(var(--mx-u)*100)}
  .mx.mx .mx-stats-lead{max-width:calc(var(--mx-u)*1000);margin:0 auto calc(var(--mx-u)*58);font-size:calc(var(--mx-u)*25);line-height:calc(41/25)}
  .mx.mx .mx-stats--lead .mx-stats-list{display:flex;justify-content:center;gap:0 calc(var(--mx-u)*68);padding-left:calc(var(--mx-u)*62)}
  .mx.mx .mx-stats--lead .mx-stat{padding-left:calc(var(--mx-u)*37);min-height:calc(var(--mx-u)*167)}
  .mx.mx .mx-stats--lead .mx-stat-num{font-size:calc(var(--mx-u)*100)}
  .mx.mx .mx-stats--lead .mx-stat-pre{font-size:calc(var(--mx-u)*28);line-height:1.02}
  .mx.mx .mx-stats--lead .mx-stat-label{margin-top:0;white-space:nowrap}

  .mx.mx .mx-solution-sec{padding:calc(var(--mx-u)*128) var(--mx-side) calc(var(--mx-u)*148)}
  .mx.mx .mx-solution-sec .mx-sechead-intro{max-width:calc(var(--mx-u)*900)}
  .mx.mx .mx-panels{grid-template-columns:minmax(0,660fr) minmax(0,661fr);gap:0 calc(var(--mx-u)*90);max-width:none;margin:calc(var(--mx-u)*122) 0 0}
  .mx.mx .mx-panel{display:flex;flex-direction:column;min-height:calc(var(--mx-u)*965);padding:calc(var(--mx-u)*57) calc(var(--mx-u)*53) calc(var(--mx-u)*49);border-radius:calc(var(--mx-u)*20)}
  .mx.mx .mx-panel h3{font-size:calc(var(--mx-u)*100)}
  .mx.mx .mx-panel-sub{margin-top:calc(var(--mx-u)*6);font-size:calc(var(--mx-u)*25);line-height:calc(32/25)}
  .mx.mx .mx-panel-media{position:absolute;left:calc(var(--x)*var(--mx-u));top:calc(var(--y)*var(--mx-u));width:calc(var(--w)*var(--mx-u));margin:0}
  .mx.mx .mx-panel-list{max-width:calc(var(--mx-u)*540);margin:calc(var(--mx-u)*140) 0 calc(var(--mx-u)*30)}
  .mx.mx .mx-panel-list>div+div{margin-top:calc(var(--mx-u)*26)}
  .mx.mx .mx-panel-list dt{font-size:calc(var(--mx-u)*25);line-height:calc(26/25)}
  .mx.mx .mx-panel-list dd{margin-top:0;font-size:calc(var(--mx-u)*16);line-height:calc(26/16)}
  .mx.mx .mx-panel-btn{margin-top:auto;width:calc(var(--mx-u)*288);min-height:calc(var(--mx-u)*43);font-size:calc(var(--mx-u)*16);align-self:flex-start}
}

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

/* client 10-13: 'Attractive ROI' stat set in words, two lines in the height of one number line (PSB) */
.mx-stat-words{display:inline-block;font-size:.46em;line-height:1.02;vertical-align:bottom}