/* MYCELX Defense & Federal Readiness page: jet hero (shared .mx-phero without a product image), 4 application tiles, 6 benefits on grey,
   Case Study band, Get Started. Desktop values are PSD px x --mx-u; column offsets are (artboard x - 296) from the --mx-side edge. */
.mx-phero-bg{background-image:url("../img/defense-federal-readiness/defense-federal-readiness-hero.webp");background-position:72% 50%}
.mx-dhero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,23,34,.62),rgba(9,23,34,.38))}   /* legibility while the copy sits over the jet */
.mx-dhero .mx-phero-copy{max-width:34em}

/* ---- tiles: 4 across on desktop, 2x2 on tablet, grey #eee like the PSB ---- */
.mx-dbenefits{background:#eee}
.mx-tile{background:#eee}

/* ---- Case Study band ---- */
.mx-case{position:relative;overflow:hidden;isolation:isolate;padding:64px var(--mx-gutter);color:#fff;background:#091722}
.mx-case-bg{position:absolute;inset:0;z-index:-1;background:#091722 url("../img/defense-federal-readiness/defense-federal-readiness-case-study-background.webp") 50% 50%/cover no-repeat}
.mx-case .mx-eyebrow{color:var(--mx-blue-on-dark)}
.mx-case h2{font:700 38px/1.06 var(--mx-font-head);margin:10px 0 18px;letter-spacing:0}
.mx-case-text{font-size:15px;line-height:1.6;max-width:32em}
.mx-case .mx-btn{margin-top:28px}
.mx-case-photo{margin:40px auto 0;max-width:420px;border-radius:var(--mx-radius-img);overflow:hidden}
.mx-case-photo img{display:block;width:100%;height:auto}
.mx-anim :is(.mx-case .mx-eyebrow,.mx-case-text,.mx-case .mx-btn,.mx-case-photo){opacity:0}
.mx-anim .mx-case h2{visibility:hidden}

/* ---- Get Started: PSB values (copy x 1014, navy heading, #555 paragraph, blue eyebrow tracking .5em + phone) ---- */
.mx-cta--dfr{--mx-cta-heading:#091722;--mx-cta-ink:#555;--mx-cta-eyebrow:#226cf2;--mx-cta-phone:#226cf2;--mx-cta-h:671.8px;--mx-cta-x:445.1px;--mx-cta-top:132.7px;--mx-wx:0}
.mx-cta--dfr .mx-eyebrow{letter-spacing:.5em}
.mx-cta--dfr .mx-stage{--mx-asp:2000/933;--mx-px:.14}
@media (min-width:768px){.mx.mx .mx-cta--dfr .mx-stage{--mx-px:.18}}

@media (min-width:768px){
  .mx.mx .mx-dhero{display:block;min-height:clamp(600px,72svh,780px)}
  .mx.mx .mx-dhero::after{background:linear-gradient(90deg,rgba(9,23,34,.55),rgba(9,23,34,0) 75%)}
  .mx.mx .mx-dhero .mx-phero-copy{max-width:min(34em,62%)}
  .mx.mx .mx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mx.mx .mx-case{padding:96px var(--mx-gutter) 104px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);column-gap:56px;align-items:center}
  .mx.mx .mx-case h2{font-size:calc(38px + 26*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-case-text{font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-case-photo{margin:0;max-width:none}
}
@media (min-width:1200px){
  .mx.mx .mx-dhero{min-height:0;height:calc(var(--mx-u)*855);padding:calc(var(--mx-u)*252) var(--mx-side) 0 calc(var(--mx-side) + var(--mx-u)*61)}
  .mx.mx .mx-dhero::after{display:none}
  .mx.mx .mx-dhero .mx-phero-copy{max-width:none}
  .mx.mx .mx-dhero .mx-phero-text{max-width:calc(var(--mx-u)*520)}
  .mx.mx .mx-apps{padding:calc(var(--mx-u)*112) var(--mx-side) calc(var(--mx-u)*170)}
  .mx.mx .mx-apps .mx-sechead-intro{max-width:calc(var(--mx-u)*830)}
  .mx.mx .mx-tiles{width:calc(var(--mx-u)*1414);grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--mx-u)*27);margin-top:calc(var(--mx-u)*49)}
  .mx.mx .mx-tile{min-height:calc(var(--mx-u)*369);padding:calc(var(--mx-u)*40) calc(var(--mx-u)*30) calc(var(--mx-u)*30) calc(var(--mx-u)*42)}
  .mx.mx .mx-tile-icon{height:calc(var(--mx-u)*97)}
  .mx.mx .mx-tile h3{margin:calc(var(--mx-u)*21) 0 calc(var(--mx-u)*14);line-height:1.02}
  .mx.mx .mx-tile p{max-width:calc(var(--mx-u)*250)}
  .mx.mx .mx-dbenefits{padding:calc(var(--mx-u)*133) var(--mx-side) calc(var(--mx-u)*123)}
  .mx.mx .mx-dbenefits .mx-sechead-intro{max-width:calc(var(--mx-u)*640)}
  .mx.mx .mx-dbenefits .mx-benefit-list{margin-top:calc(var(--mx-u)*90);gap:calc(var(--mx-u)*77) calc(var(--mx-u)*28)}
  .mx.mx .mx-dbenefits .mx-benefit p{max-width:calc(var(--mx-u)*320)}
  .mx.mx .mx-case{display:block;height:calc(var(--mx-u)*931);padding:0}
  .mx.mx .mx-case-copy{position:absolute;left:calc(var(--mx-side) + var(--mx-u)*119);top:calc(var(--mx-u)*202)}
  .mx.mx .mx-case .mx-eyebrow{font-size:calc(var(--mx-u)*20)}
  .mx.mx .mx-case h2{font-size:calc(var(--mx-u)*75);line-height:1.054;margin:calc(var(--mx-u)*14) 0 0;width:calc(var(--mx-u)*480)}
  .mx.mx .mx-case-text{position:absolute;left:0;top:calc(var(--mx-u)*316);width:calc(var(--mx-u)*560);max-width:none;font-size:calc(var(--mx-u)*20);line-height:1.4}
  .mx.mx .mx-case .mx-btn{position:absolute;left:0;top:calc(var(--mx-u)*500);margin:0;min-height:calc(var(--mx-u)*43);font-size:calc(var(--mx-u)*16);padding:0 calc(var(--mx-u)*41)}
  .mx.mx .mx-case-photo{position:absolute;left:calc(var(--mx-side) + var(--mx-u)*763);top:calc(var(--mx-u)*156);width:calc(var(--mx-u)*526);border-radius:calc(var(--mx-u)*20)}
}

/* Hero jet as in the PSD: its wing hangs below the hero onto the next section (desktop). The background is clipped by .mx-dh-clip;
   .mx-dh-front shares the background's class (same box, zoom and parallax) and places the cut-out with the same cover maths
   as the 2000 x 855 background at background-position 72% 50%. */
.mx-dh-clip{position:absolute;inset:0;z-index:-1;overflow:hidden}
.mx-dh-front{display:none}
@media (min-width:1200px){
  .mx.mx .mx-dhero{overflow:visible;z-index:2}
  .mx.mx .mx-dh-front{display:block;z-index:5;background:none!important;pointer-events:none;container-type:size}
  .mx.mx .mx-dh-front img{--s:max(calc(100cqw / 2000),calc(100cqh / 855));position:absolute;max-width:none;height:auto;width:calc(880 * var(--s));
    left:calc((100cqw - 2000 * var(--s)) * .72 + 929 * var(--s));top:calc((100cqh - 855 * var(--s)) * .5 + 212 * var(--s))}
}