/* MYCELX Mobile Emergency Response page: container hero (copy left, unit right, overhanging the next section), six application tiles,
   dark "Why industries choose MYCELX" band with the open container straddling its top edge, benefits, white-copy Get Started.
   Desktop values are PSD px x --mx-u (see mx-product.css). --mer-fw = width of the open-container figure, --mer-ov = how far it overlaps the section above. */
.mx-phero-bg{background-image:url("../img/mobile-emergency-response/mobile-emergency-response-hero-background.webp");background-position:70% 100%}
.mx{--mer-fw:min(calc(var(--mx-frame-w) - 2*var(--mx-gutter)),560px);--mer-ov:calc(var(--mer-fw)*.3617)}

/* ---------- Hero ---------- */
.mx-mhero{display:flex;flex-direction:column;overflow:visible;overflow-x:clip;padding-bottom:0}
.mx-mhero-clip{position:absolute;inset:0;z-index:-1;overflow:hidden}
.mx-mhero .mx-phero-copy{order:1;position:relative;z-index:1}
.mx-mhero .mx-phero-product{order:2;position:relative;z-index:2;width:min(100%,520px);margin:36px auto calc(min(100%,520px) * -.0583)}   /* overhang = 9.1% of the unit's height, as in the PSD (68 of 745) */
.mx-mhero .mx-phero-text{max-width:30em}

/* ---------- Applications ---------- */
.mx-mapps{padding-top:96px;padding-bottom:calc(var(--mer-ov) + 32px)}

/* ---------- Why industries choose MYCELX (dark) ---------- */
.mx-mwhy{display:flow-root;padding:0 var(--mx-gutter) 64px;color:#fff;background:#091722 url("../img/mobile-emergency-response/mobile-emergency-response-why-background.webp") 50% 0/100% 100% no-repeat}
.mx-mwhy-fig{position:relative;z-index:2;width:var(--mer-fw);margin:calc(-1*var(--mer-ov)) auto 40px}
.mx-mwhy-fig img{display:block;width:100%;height:auto}
.mx-mwhy .mx-sechead-intro{color:#fff}
.mx-mwhy .mx-benefit h3,.mx-mwhy .mx-benefit p{color:#fff}
.mx-mwhy .mx-benefit-num{color:var(--mx-blue-on-dark)}

/* ---------- Get Started (PSB values: white copy, white eyebrow, sampling photo) ---------- */
.mx-cta--mer{--mx-cta-wash:9,23,34;--mx-cta-bg:#5b4636;--mx-cta-heading:#fff;--mx-cta-ink:#fff;--mx-cta-eyebrow:#fff;--mx-cta-phone:#fff;
  --mx-cta-h:673.9px;--mx-cta-x:427.1px;--mx-cta-top:110.4px;--mx-wx:.09}
.mx-cta--mer .mx-eyebrow{letter-spacing:.5em}
.mx-cta--mer .mx-stage{--mx-asp:2000/936;--mx-px:.14}
@media (min-width:768px){.mx.mx .mx-cta--mer .mx-stage{--mx-px:.18}}

.mx-anim .mx-mwhy-fig{opacity:0}

@media (min-width:550px){
  .mx.mx .mx-mhero .mx-phero-text{font-size:16px}
}

/* ---- tablet (>= 768px) ---- */
@media (min-width:768px){
  .mx.mx{--mer-fw:min(calc(var(--mx-frame-w) - 2*var(--mx-gutter)),720px)}
  .mx.mx .mx-mhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,54%);column-gap:32px;align-items:center;padding-bottom:0}
  .mx.mx .mx-mhero .mx-phero-copy{grid-column:1;grid-row:1;padding-bottom:64px}
  .mx.mx .mx-mhero .mx-phero-product{grid-column:2;grid-row:1;align-self:center;width:100%;max-width:none;margin:0}   /* tablet: centred beside the copy (owner) */
  .mx.mx .mx-mapps{padding-top:152px;padding-bottom:calc(var(--mer-ov) + 56px)}
  .mx.mx .mx-mwhy{padding:0 var(--mx-gutter) 104px}
  .mx.mx .mx-mwhy-fig{margin-bottom:56px}
}

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  .mx.mx{--mer-fw:calc(var(--mx-u)*981)}
  .mx.mx .mx-mhero{display:block;height:calc(var(--mx-u)*892);padding:calc(var(--mx-u)*260) var(--mx-side) 0 calc(var(--mx-side) + var(--mx-u)*50)}
  .mx.mx .mx-mhero .mx-phero-copy{padding-bottom:0}
  .mx.mx .mx-mhero .mx-phero-product{position:absolute;left:calc(var(--mx-side) + var(--mx-u)*634);top:calc(var(--mx-u)*215);width:calc(var(--mx-u)*1163);max-width:none;margin:0}   /* PSD units, anchored to the content column like the copy: always ~114u clear of the text and 68u over the next section, at any width */
  .mx.mx .mx-mhero .mx-phero-text{max-width:calc(var(--mx-u)*470);margin-top:calc(var(--mx-u)*30)}
  .mx.mx .mx-mhero .mx-phero .mx-btn,.mx.mx .mx-mhero .mx-btn{margin-top:calc(var(--mx-u)*32)}
  .mx.mx .mx-mapps{padding-top:calc(var(--mx-u)*148);padding-bottom:calc(var(--mer-ov) + var(--mx-u)*110)}
  .mx.mx .mx-mapps .mx-sechead-intro{max-width:calc(var(--mx-u)*700)}
  .mx.mx .mx-mapps .mx-tiles{width:calc(var(--mx-u)*1387);gap:calc(var(--mx-u)*41) calc(var(--mx-u)*38);margin-top:calc(var(--mx-u)*50)}
  .mx.mx .mx-mapps .mx-tile{min-height:calc(var(--mx-u)*313);padding:calc(var(--mx-u)*24) calc(var(--mx-u)*29) calc(var(--mx-u)*40) calc(var(--mx-u)*41)}
  .mx.mx .mx-mapps .mx-tile:nth-child(-n+3){min-height:calc(var(--mx-u)*345)}
  .mx.mx .mx-mapps .mx-tile-icon{height:calc(var(--mx-u)*88)}
  .mx.mx .mx-mapps .mx-tile h3{margin:calc(var(--mx-u)*10) 0 calc(var(--mx-u)*10)}
  .mx.mx .mx-mwhy{padding:0 var(--mx-side) calc(var(--mx-u)*122)}
  .mx.mx .mx-mwhy-fig{margin-bottom:calc(var(--mx-u)*106)}
  .mx.mx .mx-mwhy .mx-sechead-intro{max-width:calc(var(--mx-u)*600)}
  .mx.mx .mx-mwhy .mx-benefit-list{margin-top:calc(var(--mx-u)*58)}
  .mx.mx .mx-cta--mer .mx-body p{max-width:calc(338px*var(--mx-m))}
}