/* =========================================================
   M2A ABOUT — FINAL LAYOUT / SPACING / ICON CONTRACT
   Homepage remains the visual rhythm reference.
   This file only tightens About card spacing and mobile behavior.
   ========================================================= */

body.m2a-master-template.about-page :is(
  .about-hero-grid,
  .about-identity-grid,
  .about-sector-grid,
  .about-os-grid,
  .about-governance-grid,
  .about-principles,
  .about-governance-cards,
  .about-operating-line,
  .about-tech-list,
  .about-hero-facts
){
  min-width:0;
}

/* ---------- Premium SVG icon language for text-only cards ---------- */
body.m2a-master-template.about-page .about-card-icon{
  display:grid;
  width:48px;
  height:48px;
  flex:0 0 48px;
  place-items:center;
  margin:0 0 16px;
  border:1px solid color-mix(in srgb,var(--interactive-color,var(--m2a-sky)) 34%,rgba(255,255,255,.12));
  border-radius:16px;
  color:color-mix(in srgb,var(--interactive-color,var(--m2a-sky)) 78%,#fff 22%);
  background:
    radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--interactive-color,var(--m2a-sky)) 20%,transparent),transparent 60%),
    rgba(15,23,42,.78);
  box-shadow:
    0 10px 28px rgba(2,8,23,.22),
    0 0 22px color-mix(in srgb,var(--interactive-color,var(--m2a-sky)) 14%,transparent),
    inset 0 1px 0 rgba(255,255,255,.08);
}

body.m2a-master-template.about-page .about-card-icon svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--interactive-color,var(--m2a-sky)) 35%,transparent));
}

body.m2a-master-template.about-page .about-principle:nth-child(1){--interactive-color:var(--m2a-gold)}
body.m2a-master-template.about-page .about-principle:nth-child(2){--interactive-color:var(--m2a-sector-development)}
body.m2a-master-template.about-page .about-principle:nth-child(3){--interactive-color:var(--m2a-sector-supplies)}
body.m2a-master-template.about-page .about-principle:nth-child(4){--interactive-color:var(--m2a-sector-agriculture)}

body.m2a-master-template.about-page .about-operating-step:nth-child(1){--interactive-color:var(--m2a-gold)}
body.m2a-master-template.about-page .about-operating-step:nth-child(2){--interactive-color:var(--m2a-sector-development)}
body.m2a-master-template.about-page .about-operating-step:nth-child(3){--interactive-color:var(--m2a-sector-contracting)}
body.m2a-master-template.about-page .about-operating-step:nth-child(4){--interactive-color:var(--m2a-sector-supplies)}
body.m2a-master-template.about-page .about-operating-step:nth-child(5){--interactive-color:var(--m2a-sector-agriculture)}

/* ---------- Precise generous card spacing ---------- */
body.m2a-master-template.about-page .about-identity-grid,
body.m2a-master-template.about-page .about-governance-grid{
  gap:24px !important;
}

body.m2a-master-template.about-page .about-principles,
body.m2a-master-template.about-page .about-governance-cards,
body.m2a-master-template.about-page .about-sector-grid{
  gap:24px !important;
}

body.m2a-master-template.about-page .about-tech-list{
  gap:16px !important;
}

body.m2a-master-template.about-page .about-hero-facts{
  gap:16px !important;
}

body.m2a-master-template.about-page :is(
  .about-fact,
  .about-principle,
  .about-governance-card,
  .about-operating-step
){
  padding:24px !important;
}

body.m2a-master-template.about-page .about-copy-card,
body.m2a-master-template.about-page .about-governance-copy{
  padding:32px !important;
}

body.m2a-master-template.about-page .about-tech-item{
  padding:16px 18px !important;
}

body.m2a-master-template.about-page .about-cta{
  padding:40px !important;
}

body.m2a-master-template.about-page .about-principle b,
body.m2a-master-template.about-page .about-governance-card h3,
body.m2a-master-template.about-page .about-operating-step b{
  display:block;
  margin-top:0 !important;
}

body.m2a-master-template.about-page .about-principle p,
body.m2a-master-template.about-page .about-governance-card p{
  margin-top:8px !important;
}

body.m2a-master-template.about-page .about-operating-step small{
  display:block;
  margin-top:6px !important;
}

/* ---------- No card crowding or accidental overflow ---------- */
body.m2a-master-template.about-page :is(
  .about-copy-card,
  .about-principle,
  .about-sector-card,
  .about-tech-item,
  .about-os-screen,
  .about-governance-copy,
  .about-governance-card,
  .about-operating-step,
  .about-cta
){
  min-width:0;
  overflow-wrap:anywhere;
}

/* ---------- Desktop breathing room ---------- */
@media(min-width:1101px){
  body.m2a-master-template.about-page .about-os-grid{
    gap:48px !important;
  }

  body.m2a-master-template.about-page .about-hero-grid{
    gap:58px !important;
  }
}

/* ---------- Mobile: strict grid-cols-1 and centered composition ---------- */
@media(max-width:720px){
  body.m2a-master-template.about-page :is(
    .about-hero-grid,
    .about-identity-grid,
    .about-sector-grid,
    .about-os-grid,
    .about-governance-grid,
    .about-principles,
    .about-governance-cards,
    .about-operating-line,
    .about-hero-facts
  ){
    grid-template-columns:minmax(0,1fr) !important;
    gap:24px !important;
    width:100% !important;
  }

  body.m2a-master-template.about-page .about-tech-list{
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
  }

  body.m2a-master-template.about-page .about-hero-grid,
  body.m2a-master-template.about-page .about-os-grid{
    gap:32px !important;
  }

  body.m2a-master-template.about-page .about-section > .container{
    width:min(100% - 32px,var(--container,1180px)) !important;
  }

  body.m2a-master-template.about-page .about-card-icon{
    width:46px;
    height:46px;
    flex-basis:46px;
    margin-bottom:14px;
  }

  body.m2a-master-template.about-page .about-card-icon svg{
    width:23px;
    height:23px;
  }

  body.m2a-master-template.about-page :is(
    .about-fact,
    .about-principle,
    .about-governance-card,
    .about-operating-step
  ){
    padding:24px !important;
  }

  body.m2a-master-template.about-page .about-copy-card,
  body.m2a-master-template.about-page .about-governance-copy,
  body.m2a-master-template.about-page .about-cta{
    padding:24px !important;
  }

  body.m2a-master-template.about-page .about-tech-item{
    grid-template-columns:48px minmax(0,1fr) !important;
    gap:14px !important;
    padding:16px !important;
  }

  body.m2a-master-template.about-page .about-hero-actions,
  body.m2a-master-template.about-page .about-cta-actions{
    justify-content:center !important;
    gap:12px !important;
  }

  body.m2a-master-template.about-page :is(
    .about-fact,
    .about-principle,
    .about-governance-card,
    .about-operating-step
  ) .about-card-icon{
    margin-inline:auto;
  }

  body.m2a-master-template.about-page :is(
    .about-fact,
    .about-principle,
    .about-governance-card,
    .about-operating-step
  ){
    text-align:center;
  }
}

@media(max-width:480px){
  body.m2a-master-template.about-page .about-section > .container{
    width:calc(100% - 24px) !important;
  }

  body.m2a-master-template.about-page :is(
    .about-fact,
    .about-principle,
    .about-governance-card,
    .about-operating-step,
    .about-copy-card,
    .about-governance-copy,
    .about-cta
  ){
    padding:24px !important;
  }
}

/* =========================================================
   FINAL LAUNCH CORRECTION — compact rhythm + dominant OS
   ========================================================= */

/* Remove the oversized vertical voids while keeping enterprise breathing room. */
body.m2a-master-template.about-page .about-section:not(.about-hero){
  padding-block:72px !important;
}

body.m2a-master-template.about-page .about-section-head{
  margin-bottom:36px !important;
}

body.m2a-master-template.about-page .about-hero{
  min-height:0 !important;
  padding-top:132px !important;
  padding-bottom:68px !important;
}

/* Image #1 is also the frame fallback; stale HTML can never show an empty card. */
body.m2a-master-template.about-page .about-hero-frame{
  background-image:url("/v8/assets/images/m2a-about-command-center-hero.webp") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

body.m2a-master-template.about-page .about-hero-frame img{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  object-fit:cover !important;
  object-position:center !important;
}

/* Digital OS is the visual anchor of the page. */
body.m2a-master-template.about-page .about-os-grid{
  grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr) !important;
  gap:32px !important;
  align-items:stretch !important;
}

body.m2a-master-template.about-page .about-os-screen{
  min-height:0 !important;
  justify-content:flex-start !important;
  align-self:stretch !important;
  padding:12px !important;
}

body.m2a-master-template.about-page .about-os-screen > img{
  flex:0 0 auto !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
}

body.m2a-master-template.about-page .about-tech-list{
  grid-template-columns:1fr !important;
  gap:12px !important;
  margin-top:20px !important;
}

body.m2a-master-template.about-page .about-os-visual-tools{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  width:100%;
  margin-top:12px;
}

body.m2a-master-template.about-page .about-os-visual-tools .about-tech-item{
  grid-template-columns:42px minmax(0,1fr) !important;
  gap:10px !important;
  padding:12px !important;
  min-height:88px !important;
  align-items:center !important;
}

body.m2a-master-template.about-page .about-os-visual-tools .about-tech-item i{
  width:40px !important;
  height:40px !important;
}

body.m2a-master-template.about-page .about-os-status{
  margin-top:10px !important;
}

/* Mobile/tablet: compact section rhythm and no artificial bottom void. */
@media(max-width:1100px){
  body.m2a-master-template.about-page .about-section:not(.about-hero){
    padding-block:60px !important;
  }

  body.m2a-master-template.about-page .about-os-grid{
    gap:24px !important;
  }
}

@media(max-width:720px){
  body.m2a-master-template.about-page .about-section:not(.about-hero){
    padding-block:48px !important;
  }

  body.m2a-master-template.about-page .about-hero{
    padding-top:88px !important;
    padding-bottom:44px !important;
  }

  body.m2a-master-template.about-page .about-section-head{
    margin-bottom:28px !important;
  }

  body.m2a-master-template.about-page .about-os-visual-tools{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  body.m2a-master-template.about-page .about-os-visual-tools .about-tech-item{
    min-height:0 !important;
  }

  body.m2a-master-template.about-page main > :last-child,
  body.m2a-master-template.about-page main > :last-child > .container{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
  }

  body.m2a-master-template.about-page .about-section:last-of-type{
    padding-bottom:28px !important;
  }

  body.m2a-master-template.about-page .about-cta{
    margin-bottom:0 !important;
  }
}

@media(max-width:480px){
  body.m2a-master-template.about-page .about-section:not(.about-hero){
    padding-block:44px !important;
  }

  body.m2a-master-template.about-page .about-hero{
    padding-top:84px !important;
    padding-bottom:40px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.m2a-master-template.about-page .about-card-icon,
  body.m2a-master-template.about-page .about-card-icon svg{
    transition:none !important;
    animation:none !important;
    transform:none !important;
  }
}