/* =========================================================
   M2A ABOUT — FINAL PRODUCTION HERO
   Approved command-center visual + light text-first contrast.
   ========================================================= */

html[data-m2a-master-template] body.m2a-master-template.about-page main > section.about-section.about-hero,
body.m2a-master-template.about-page main > section.about-section.about-hero{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  min-height:clamp(650px,78vh,840px)!important;
  background:
    linear-gradient(180deg,rgba(3,7,11,.035) 0%,rgba(3,7,11,.015) 50%,rgba(3,7,11,.07) 100%),
    url('/v8/assets/images/m2a-about-command-center-hero.webp?v=20260813-about-command-center-approved-v2') center center/cover no-repeat!important;
  box-shadow:inset 0 -1px 0 rgba(212,175,55,.18)!important;
}

/* Only a restrained central contrast veil — no dark card and no full-image blackout. */
html[data-m2a-master-template] body.m2a-master-template.about-page main > section.about-section.about-hero::before,
body.m2a-master-template.about-page main > section.about-section.about-hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(ellipse at 50% 51%,rgba(2,7,12,.34) 0%,rgba(2,7,12,.24) 30%,rgba(2,7,12,.12) 53%,rgba(2,7,12,.035) 74%,transparent 92%),
    linear-gradient(180deg,rgba(2,6,10,.04),rgba(2,6,10,.015) 55%,rgba(2,6,10,.065))!important;
  opacity:1!important;
}

html[data-m2a-master-template] body.m2a-master-template.about-page main > section.about-section.about-hero::after,
body.m2a-master-template.about-page main > section.about-section.about-hero::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 78% 18%,rgba(244,203,92,.035),transparent 22%),
    radial-gradient(circle at 18% 72%,rgba(0,196,255,.035),transparent 24%)!important;
}

html[data-m2a-master-template] body.m2a-master-template.about-page main > section.about-section.about-hero > .container,
body.m2a-master-template.about-page main > section.about-section.about-hero > .container{
  position:relative!important;
  z-index:2!important;
}

body.m2a-master-template.about-page .about-hero .about-hero-grid{
  grid-template-columns:minmax(0,1fr)!important;
  align-items:center!important;
  min-height:inherit!important;
}

body.m2a-master-template.about-page .about-hero .about-hero-copy{
  position:relative!important;
  z-index:2!important;
  width:min(100%,980px)!important;
  max-width:980px!important;
  margin-inline:auto!important;
  padding:clamp(28px,4vw,50px)!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
}

body.m2a-master-template.about-page .about-hero-visual,
body.m2a-master-template.about-page .about-hero > .m2a-about-hero-bg{
  display:none!important;
}

body.m2a-master-template.about-page .about-hero .about-eyebrow{
  color:#F4D77A!important;
  font-weight:900!important;
  text-shadow:0 2px 8px rgba(0,0,0,.92),0 0 16px rgba(244,215,122,.20)!important;
}

body.m2a-master-template.about-page .about-hero .about-title{
  color:#FFFFFF!important;
  font-weight:900!important;
  text-shadow:0 3px 8px rgba(0,0,0,.98),0 10px 28px rgba(0,0,0,.82)!important;
}

body.m2a-master-template.about-page .about-hero .about-lead,
body.m2a-master-template.about-page .about-hero .about-hero-supporting-copy{
  color:#F8FAFC!important;
  font-weight:600!important;
  text-shadow:0 2px 6px rgba(0,0,0,.96),0 7px 18px rgba(0,0,0,.76)!important;
}

body.m2a-master-template.about-page .about-hero .about-fact{
  background:rgba(4,8,11,.30)!important;
  border-color:rgba(230,193,89,.22)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

@media(max-width:720px){
  html[data-m2a-master-template] body.m2a-master-template.about-page main > section.about-section.about-hero,
  body.m2a-master-template.about-page main > section.about-section.about-hero{
    min-height:auto!important;
    background-position:50% center!important;
    background-size:cover!important;
  }

  html[data-m2a-master-template] body.m2a-master-template.about-page main > section.about-section.about-hero::before,
  body.m2a-master-template.about-page main > section.about-section.about-hero::before{
    background:
      radial-gradient(ellipse at 50% 48%,rgba(2,7,12,.42) 0%,rgba(2,7,12,.30) 38%,rgba(2,7,12,.13) 67%,rgba(2,7,12,.035) 100%),
      linear-gradient(180deg,rgba(3,7,11,.055),rgba(3,7,11,.045))!important;
  }

  body.m2a-master-template.about-page .about-hero .about-hero-copy{
    margin:0!important;
    padding:22px 18px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:none!important;
  }
}

/* =========================================================
   HOMEPAGE MOBILE — RETIRED INTRO PRE-PAINT SUPPRESSION
   The legacy .m2a-intro still exists in the HTML for compatibility, while
   main.js removes it and creates the lightweight mobile micro-intro. Hide the
   retired layer before deferred runtime executes so it cannot occupy the LCP
   window or paint the old molten-orange sequence on mobile.
   ========================================================= */
@media(max-width:760px), (pointer:coarse){
  body.home-page .m2a-intro{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    animation:none!important;
  }
  body.home-page .m2a-intro::before,
  body.home-page .m2a-intro::after,
  body.home-page .m2a-intro-brand,
  body.home-page .m2a-intro-panels,
  body.home-page .m2a-intro-panels span{
    display:none!important;
    animation:none!important;
    filter:none!important;
  }
}