/* ===================== hero video (Squarespace's
   .section-background injection replaced with a
   plain absolute-positioned video) ===================== */

.mcs-home-hero video.mcs-custom-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mcs-home-hero__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(rgba(5,5,5,.27), rgba(5,5,5,.27)),
    linear-gradient(90deg, rgba(5,5,5,.68) 0%, rgba(5,5,5,.46) 27%, rgba(5,5,5,.17) 58%, rgba(5,5,5,.04) 100%),
    linear-gradient(0deg, rgba(5,5,5,.82) 0%, rgba(5,5,5,.38) 28%, rgba(5,5,5,.08) 55%, rgba(5,5,5,0) 76%),
    linear-gradient(180deg, rgba(5,5,5,.48) 0%, rgba(5,5,5,.18) 17%, rgba(5,5,5,0) 38%);
}

/* ===================== 1hero ===================== */




/* =========================================================
   MCS HOMEPAGE HERO
========================================================= */

.mcs-home-hero {

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;

  width: 100%;
  height: var(--mcs-hero-min);

  min-height: 680px;

  box-sizing:
    border-box;

  overflow: hidden;

  color:
    var(--mcs-white);

  font-family:
    inherit;
}


.mcs-hero-spacer {

  height: var(--mcs-hero-min);
  min-height: 680px;
}



/* =========================================================
   SUBTLE GRID

   This remains inside the content layer.
   It is decorative only.
========================================================= */

.mcs-grid-bg {

  z-index:
    1;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      black 0%,
      rgba(0,0,0,.55) 38%,
      transparent 72%
    );

  mask-image:
    linear-gradient(
      90deg,
      black 0%,
      rgba(0,0,0,.55) 38%,
      transparent 72%
    );
}



/* =========================================================
   TOP
========================================================= */

.mcs-home-hero__top {

  position:
    absolute;

  z-index:
    3;

  top:
    108px;

  left:
    var(--mcs-section-pad-x);

  right:
    var(--mcs-section-pad-x);

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  padding-bottom:
    15px;

  border-bottom:
    1px solid rgba(255,255,255,.18);

  opacity:
    0;

  transform:
    translateY(-10px);

  animation:
    mcsHomeHeroReveal
    .8s
    .08s
    cubic-bezier(.16,1,.3,1)
    forwards;
}



/* =========================================================
   EYEBROW
========================================================= */

.mcs-home-hero__meta {

  color:
    var(--mcs-ink-42);

  font-size:
    var(--mcs-text-micro);

  font-weight:
    600;

  line-height:
    1;

  letter-spacing:
    .17em;
}



/* =========================================================
   MAIN
========================================================= */

.mcs-home-hero__main {

  position:
    absolute;

  z-index:
    3;

  left:
    var(--mcs-section-pad-x);

  right:
    var(--mcs-section-pad-x);

  top:
    50%;

  transform:
    translateY(-43%);

  max-width:
    1000px;
}


/* =========================================================
   KICKER
========================================================= */

.mcs-home-hero__kicker {

  margin-bottom: var(--mcs-hero-gap-sm);

  opacity:
    0;

  transform:
    translateY(20px);

  animation:
    mcsHomeHeroReveal
    .9s
    .18s
    cubic-bezier(.16,1,.3,1)
    forwards;
}



/* =========================================================
   HEADLINE
========================================================= */

.mcs-home-hero__title {

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(--mcs-white) !important;

  opacity:
    0;

  transform:
    translateY(30px);

  animation:
    mcsHomeHeroReveal
    1s
    .25s
    cubic-bezier(.16,1,.3,1)
    forwards;
}



/* =========================================================
   LOWER COPY
========================================================= */

.mcs-home-hero__lower {

  display:
    flex;

  align-items:
    flex-end;

  gap:
    clamp(35px, 6vw, 90px);

  margin-top: var(--mcs-hero-gap-md);

  opacity:
    0;

  transform:
    translateY(22px);

  animation:
    mcsHomeHeroReveal
    .9s
    .42s
    cubic-bezier(.16,1,.3,1)
    forwards;
}



.mcs-home-hero__lower-text {

  width: min(clamp(420px, 34vw, 640px), 100%);

  margin:
    0 !important;

  color: var(--mcs-ink-73);
}



/* =========================================================
   LOAD ANIMATION
========================================================= */

@keyframes mcsHomeHeroReveal {

  to {

    opacity:
      1;

    transform:
      translateY(0);
  }

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .mcs-home-hero__main {

    top:
      48%;
  }
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .mcs-home-hero {

    min-height:
      650px;
  }


  .mcs-hero-spacer {

    min-height:
      650px;
  }


  .mcs-home-hero__top {

    top:
      87px;

    left:
      var(--mcs-section-pad-x);

    right:
      var(--mcs-section-pad-x);
  }


  .mcs-home-hero__meta {

    display:
      none;
  }


  .mcs-home-hero__main {

    top:
      auto;

    left:
      var(--mcs-section-pad-x);

    right:
      var(--mcs-section-pad-x);

    bottom:
      128px;

    transform:
      none;
  }


  .mcs-home-hero__lower {
    flex-direction:
      column;
    align-items:
      flex-start;
    gap:
      var(--mcs-hero-gap-lg);
    margin-top:
      var(--mcs-hero-gap-md);
  }


  .mcs-home-hero__lower-text {

    max-width:
      330px;
  }


  .mcs-home-hero__lower .mcs-btn {

    width:
      min(270px, 100%);

    box-sizing:
      border-box;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .mcs-home-hero__top,
  .mcs-home-hero__kicker,
  .mcs-home-hero__title,
  .mcs-home-hero__lower {

    opacity:
      1;

    transform:
      none;

    animation:
      none;
  }


}


/* ===================== 4product ===================== */




/* =========================================================
   ROOT
========================================================= */

#mcsbc {

  position:relative;
  z-index:1;

  width:100%;
  max-width:100%;

  margin:0;

  overflow:hidden;

  background:var(--mcs-black);
  color:var(--mcs-white);

  font-family:inherit;
}


#mcsbc * {

  box-sizing:border-box;
}



/* =========================================================
   INNER
========================================================= */

.mcsbc-inner {

  width:100%;
  max-width:1800px;

  margin:0 auto;

  padding:
    var(--mcs-section-pad-y)
    var(--mcs-section-pad-x);
}



/* =========================================================
   HEADER
========================================================= */

.mcsbc-kicker {

  margin-bottom:
    clamp(45px,5vw,80px);
}


.mcsbc-heading-grid {

  display:grid;

  grid-template-columns:
    minmax(400px,1.15fr)
    minmax(320px,.85fr);

  gap:
    clamp(50px,8vw,150px);

  align-items:end;

  margin-bottom:
    clamp(36px,4vw,64px);
}


.mcsbc-title {

  margin:0;

  color:var(--mcs-white);
}


.mcsbc-intro {

  max-width:570px;

  padding-bottom:4px;
}


.mcsbc-intro-text {

  margin:0;

  color:var(--mcs-ink-60);
  line-height:1.6;
}



/* =========================================================
   PRODUCT STAGE
========================================================= */

/* BODY — robot stage on the right, the stacked specs on the left */

.mcsbc-body {

  display:grid;

  grid-template-columns:
    minmax(300px,.62fr)
    minmax(0,1.38fr);

  gap:
    clamp(40px,5vw,90px);

  align-items:center;
}


.mcsbc-side {

  grid-column:1;

  grid-row:1;
}


.mcsbc-stage {

  --mx:0px;
  --my:0px;

  grid-column:2;

  grid-row:1;

  position:relative;

  width:100%;

  height:
    clamp(520px,42vw,720px);

  overflow:hidden;

  background:none;
}



/* =========================================================
   AXES
========================================================= */

.mcsbc-axis {

  position:absolute;

  background:
    rgba(255,255,255,.08);

  pointer-events:none;
}


.mcsbc-axis-x {

  left:0;
  right:0;

  top:50%;

  height:1px;
}


.mcsbc-axis-y {

  top:0;
  bottom:0;

  left:66%;

  width:1px;
}



/* =========================================================
   ROBOT
========================================================= */

.mcsbc-product-wrap {

  position:absolute;

  left:50%;
  top:49%;

  width:
    min(88%,1150px);

  transform:
    translate(
      calc(-50% + var(--mx)),
      calc(-50% + var(--my))
    );

  z-index:3;

  opacity:0;

  transition:

    opacity .8s ease,

    transform 1.2s
    cubic-bezier(.16,1,.3,1);
}


#mcsbc.is-live
.mcsbc-product-wrap {

  opacity:1;
}


.mcsbc-product {

  position:relative;

  display:block;

  width:100%;
  height:auto;

  z-index:2;

  filter:

    drop-shadow(
      0 35px 35px
      rgba(0,0,0,.38)
    );

  transform:
    scale(.94);

  transition:

    transform 1.25s
    cubic-bezier(.16,1,.3,1),

    filter .4s ease;
}


#mcsbc.is-live
.mcsbc-product {

  transform:
    scale(1);
}


.mcsbc-product-glow {

  position:absolute;

  left:20%;
  right:8%;

  bottom:2%;

  height:20%;

  background:

    radial-gradient(
      ellipse,
      rgba(255,255,255,.11),
      transparent 68%
    );

  filter:blur(25px);

  opacity:.3;
}



/* =========================================================
   SCANNER
========================================================= */

.mcsbc-scanner {

  position:absolute;

  top:5%;
  bottom:8%;

  left:-5%;

  width:1px;

  z-index:5;

  opacity:0;

  background:

    linear-gradient(
      transparent,
      var(--mcs-orange),
      transparent
    );

  box-shadow:
    0 0 18px rgba(255,77,0,.85);

  pointer-events:none;
}


#mcsbc.is-live
.mcsbc-scanner {

  animation:
    mcsbcScan
    5.5s
    1.3s
    ease-in-out
    infinite;
}


@keyframes mcsbcScan {

  0% {

    left:3%;

    opacity:0;
  }


  10% {

    opacity:.5;
  }


  48% {

    opacity:.65;
  }


  55% {

    left:96%;

    opacity:0;
  }


  100% {

    left:96%;

    opacity:0;
  }}



/* =========================================================
   CALLOUTS
========================================================= */

.mcsbc-callout {

  position:absolute;

  z-index:8;

  display:flex;

  align-items:center;

  padding:0;

  border:0;

  background:none;

  color:var(--mcs-white);

  font-family:inherit;

  text-align:left;

  cursor:default;

  opacity:0;

  filter:blur(7px);

  transform:
    translateY(16px);

  transition:

    opacity .7s ease,

    filter .7s ease,

    transform .7s
    cubic-bezier(.16,1,.3,1);
}


#mcsbc.is-live
.mcsbc-callout {

  opacity:1;

  filter:blur(0);

  transform:
    translateY(0);
}


#mcsbc.is-live
.mcsbc-c1 {

  transition-delay:.35s;
}


#mcsbc.is-live
.mcsbc-c2 {

  transition-delay:.5s;
}


#mcsbc.is-live
.mcsbc-c3 {

  transition-delay:.65s;
}


#mcsbc.is-live
.mcsbc-c4 {

  transition-delay:.8s;
}



/* =========================================================
   CALLOUT POSITIONS
========================================================= */

.mcsbc-c1 {

  top:12%;

  right:1%;
}


.mcsbc-c2 {

  top:14%;

  left:0;
}


.mcsbc-c3 {

  right:1%;

  bottom:14%;
}


.mcsbc-c4 {

  left:0;

  bottom:16%;
}



/* =========================================================
   CALLOUT 02 / 04 — dot on the right, pointing into the image
========================================================= */

.mcsbc-c2,
.mcsbc-c4 {

  flex-direction:row-reverse;
}


.mcsbc-c2 .mcsbc-callout-content,
.mcsbc-c4 .mcsbc-callout-content {

  text-align:right;
}



/* =========================================================
   CALLOUT ELEMENTS
========================================================= */

.mcsbc-callout-dot {

  flex:0 0 auto;

  width:9px;
  height:9px;

  border:
    2px solid var(--mcs-orange);

  border-radius:50%;

  box-shadow:
    0 0 0 5px
    rgba(255,77,0,.09);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.mcsbc-callout-line {

  display:block;

  width:
    clamp(35px,4vw,75px);

  height:1px;

  margin:
    0 14px;

  background:
    rgba(255,255,255,.28);
}


.mcsbc-callout-content {

  display:flex;

  flex-direction:column;

  min-width:135px;
}


.mcsbc-callout-number {

  margin-bottom:5px;

  color:var(--mcs-orange);

  font-size:var(--mcs-text-label);

  letter-spacing:.15em;
}


.mcsbc-callout-name {

  color:var(--mcs-white);

  font-size: var(--mcs-text-lead);

  line-height:1.15;

  font-weight:700;

  letter-spacing:.08em;
}


.mcsbc-callout-detail {

  max-width:220px;

  max-height:0;

  margin-top:0;

  overflow:hidden;

  color:var(--mcs-ink-60);

  font-size: var(--mcs-text-body);

  line-height:1.4;

  opacity:0;

  transform:
    translateY(-3px);

  transition:
    opacity .25s ease,
    max-height .3s ease,
    margin .3s ease,
    transform .3s ease;
}


.mcsbc-callout:hover
.mcsbc-callout-detail,

.mcsbc-callout.is-open
.mcsbc-callout-detail {

  max-height:110px;

  margin-top:8px;

  opacity:1;

  transform:
    translateY(0);
}


.mcsbc-callout:hover
.mcsbc-callout-dot,

.mcsbc-callout.is-open
.mcsbc-callout-dot {

  transform:
    scale(1.3);

  box-shadow:
    0 0 0 9px
    rgba(255,77,0,.1);
}





/* =========================================================
   SPECS — hairline-separated rows, no boxes
========================================================= */

.mcsbc-specs {

  display:flex;

  flex-direction:column;

  border-bottom:
    1px solid var(--mcs-line);
}


.mcsbc-spec {

  position:relative;

  padding:
    clamp(22px,2.4vw,36px)
    0
    clamp(24px,2.6vw,40px);

  border-top:
    1px solid var(--mcs-line);

  opacity:0;

  transform:
    translateY(20px);

  transition:

    opacity .7s ease,

    transform .7s
    cubic-bezier(.16,1,.3,1);
}


/* short orange tick on the row's top line */
.mcsbc-spec::before {

  content:"";

  position:absolute;

  left:0;

  top:-1px;

  width:28px;

  height:2px;

  background:var(--mcs-orange);
}



/* =========================================================
   SPEC ENTRANCE
========================================================= */

#mcsbc.is-live
.mcsbc-spec {

  opacity:1;

  transform:
    translateY(0);
}


#mcsbc.is-live
.mcsbc-spec:nth-child(1) {

  transition-delay:.75s;
}


#mcsbc.is-live
.mcsbc-spec:nth-child(2) {

  transition-delay:.85s;
}


#mcsbc.is-live
.mcsbc-spec:nth-child(3) {

  transition-delay:.95s;
}



/* =========================================================
   SPEC LABEL + NOTE
========================================================= */

.mcsbc-spec-head {

  display:flex;

  align-items:baseline;

  justify-content:space-between;

  gap:16px;
}


.mcsbc-spec-label,
.mcsbc-spec-note {

  color:var(--mcs-ink-60);

  font-size:
    var(--mcs-text-micro);

  font-weight:600;

  line-height:1.2;

  letter-spacing:.16em;

  text-transform:uppercase;

  white-space:nowrap;
}


.mcsbc-spec-note {

  color:var(--mcs-ink-42);
}



/* =========================================================
   NUMBER + UNIT
========================================================= */

.mcsbc-spec-reading {

  display:flex;

  align-items:flex-end;

  gap:
    clamp(8px,.7vw,12px);

  padding-top:
    clamp(20px,2vw,30px);
}


.mcsbc-spec-value {

  display:block;

  color:var(--mcs-white);

  /* between --mcs-text-title (48 max) and --mcs-text-stat (72 min) —
     this component-specific "compact stat" size doesn't fit either
     token; kept as a deliberate clamp rather than forced to fit. */
  font-size:
    clamp(46px,4vw,72px);

  line-height:.78;

  font-weight:650;

  letter-spacing:-.045em;
}


.mcsbc-spec-unit {

  display:block;

  padding-bottom:
    clamp(1px,.35vw,6px);

  color:var(--mcs-orange);

  font-size:
    var(--mcs-text-body-sm);

  line-height:1;

  font-weight:650;

  letter-spacing:.08em;

  white-space:nowrap;
}



/* =========================================================
   PRODUCT CTA
========================================================= */

.mcsbc-next {

  display:flex;

  align-items:center;

  justify-content:flex-start;

  padding-top:
    clamp(32px,3vw,48px);
}





/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width:900px) {

  .mcsbc-inner {

    padding:
      var(--mcs-section-pad-y)
      var(--mcs-section-pad-x);
  }



  /* HEADER */

  .mcsbc-heading-grid {

    grid-template-columns:1fr;

    gap:55px;

    margin-bottom:18px;
  }




  /* PRODUCT — robot first, specs stacked below */

  .mcsbc-body {

    grid-template-columns:1fr;

    gap:
      clamp(28px,6vw,48px);
  }


  .mcsbc-stage {

    grid-column:1;

    height:auto;

    aspect-ratio:1 / 1.3;
  }


  .mcsbc-side {

    grid-column:1;

    grid-row:2;
  }


  .mcsbc-product-wrap {

    left:50%;

    top:43%;

    width:125%;

    transform:
      translate(
        calc(-50% + var(--mx)),
        calc(-50% + var(--my))
      );
  }


  .mcsbc-axis {

    display:none;
  }



  /* CALLOUTS */

  .mcsbc-callout-line {

    width:20px;

    margin:
      0 8px;
  }


  .mcsbc-c1 {

    right:10px;

    top:9%;
  }


  .mcsbc-c2 {

    left:10px;

    top:16%;
  }


  .mcsbc-c3 {

    right:10px;

    bottom:34%;
  }


  .mcsbc-c4 {

    left:10px;

    bottom:27%;
  }


  .mcsbc-callout-content {

    min-width:100px;
  }


  .mcsbc-callout-detail {

    display:none;
  }



  /* SPECS */

  .mcsbc-spec-value {

    font-size:
      clamp(40px,11vw,58px);
  }


  .mcsbc-spec-unit {

    padding-bottom:4px;

    font-size:12px;
  }



  /* CTA */

  .mcsbc-next {

    padding-top:36px;
  }


  .mcsbc-next .mcs-btn {

    width:100%;

    min-width:0;
  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:520px) {

  .mcsbc-spec-value {

    font-size:
      clamp(36px,12vw,48px);
  }


  .mcsbc-spec-unit {

    font-size:11px;
  }


  .mcsbc-spec-reading {

    gap:8px;
  }


  .mcsbc-next .mcs-btn {

    padding:
      17px 16px;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce) {

  #mcsbc *,
  #mcsbc *::before,
  #mcsbc *::after {

    animation:none !important;

    transition:none !important;
  }

}


/* ===================== 5vision ===================== */




/* ==================================================
   MCS PHYSICAL AI — INVERTED
================================================== */

#mcsai {

  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 100%;

  margin: 0;

  overflow: visible;

  background:
    var(--mcs-white);

  color:
    var(--mcs-black);

  font-family:
    inherit;
}


#mcsai * {
  box-sizing: border-box;
}



/* ==================================================
   INNER
================================================== */

.mcsai-inner {

  width: 100%;
  max-width: 1800px;

  margin: 0 auto;

  padding:
    var(--mcs-section-pad-y)
    var(--mcs-section-pad-x);
}



/* ==================================================
   HEADER
================================================== */

.mcsai-kicker {

  margin-bottom:
    clamp(45px, 5vw, 75px);
}


.mcsai-heading-grid {

  display: grid;

  grid-template-columns:
    minmax(500px, 1.4fr)
    minmax(300px, .6fr);

  gap:
    clamp(60px, 8vw, 150px);

  align-items: end;

  margin-bottom:
    clamp(45px, 5vw, 80px);
}


.mcsai-main-title {

  margin: 0;

  max-width: 1000px;

  color:
    var(--mcs-black);
}


.physicalai-header-copy {

  margin: 0;

  max-width: 500px;

  color:
    var(--mcs-onlight-60);
}



/* ==================================================
   EXPERIENCE GRID
================================================== */

.mcsai-experience {

  /* Fixed height, not content-driven — above the tablet breakpoint
     this whole box (video + accordion) is what GSAP ScrollTrigger
     pins (see home-interactive.js), the instant its top border
     reaches the viewport top. A fixed, known height means that
     trigger point can be exact instead of computed/centered, and
     everything inside it is guaranteed to have been designed to
     fit in exactly that box — overflow: hidden is just a backstop
     if some content ever doesn't. Below the breakpoint the
     "MOBILE" rules further down turn this back into a plain,
     unpinned, content-height block.

     This is purely the outer frame: it centers .mcsai-experience-grid
     as a single unit (vertically) within the 80vh — it isn't the
     grid itself, because the video and the accordion list need to
     line up with EACH OTHER at the top, not independently center
     inside their own full-height columns (which was tried, and
     looks aligned to nothing in particular — see that rule). */
  height: 80vh;

  overflow: hidden;

  display: flex;

  align-items: center;
}


.mcsai-experience-grid {

  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(400px, 1.3fr)
    minmax(280px, .7fr);

  gap:
    clamp(70px, 8vw, 150px);

  /* Top-aligned, not stretched — the video and "01 SEE" start at
     the same line this way, regardless of which column is taller. */
  align-items:
    start;
}



/* ==================================================
   LEFT COLUMN
================================================== */

.mcsai-visual-column {

  position: relative;

  min-width: 0;
}



/* ==================================================
   STICKY VIDEO
================================================== */

.mcsai-sticky {

  /* No position: sticky here — above the tablet breakpoint this
     element is part of what GSAP ScrollTrigger pins (see
     home-interactive.js), which owns its own fixed positioning.
     Below the breakpoint the "MOBILE" rules further down turn
     this back into a plain, non-pinned block. */

  display: flex;

  z-index: 2;
}


.mcsai-screen {

  --video-scale: 1;

  position: relative;

  width: 100%;

  height:
    min(58vh, 560px);

  overflow: hidden;

  background: var(--mcs-black);

  border:
    1px solid rgba(0,0,0,.18);

  box-shadow:
    0 24px 65px rgba(0,0,0,.10);
}



/* ==================================================
   VIDEO
================================================== */

.mcsai-video {

  position: absolute;

  inset: -1%;

  width: 102%;
  height: 102%;

  object-fit: cover;

  transform:
    scale(
      var(--video-scale)
    );

  transition:
    transform .15s linear;

  filter:
    saturate(.78)
    contrast(1.05)
    brightness(.84);
}


.mcsai-video-shade {

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:

    linear-gradient(
      to bottom,
      rgba(0,0,0,.26),
      transparent 22%,
      transparent 70%,
      rgba(0,0,0,.55)
    ),

    linear-gradient(
      to right,
      rgba(0,0,0,.18),
      transparent 20%,
      transparent 80%,
      rgba(0,0,0,.18)
    );
}



/* ==================================================
   HUD
================================================== */

.mcsai-hud-top {

  position: absolute;

  left: 24px;
  right: 24px;
  top: 21px;

  z-index: 8;

  display: flex;

  justify-content:
    space-between;

  color:
    rgba(255,255,255,.82);

  font-size: var(--mcs-text-micro);

  font-weight: 600;

  letter-spacing: .17em;
}


.mcsai-live {

  display: flex;

  align-items: center;

  gap: 8px;
}


.mcsai-live i {

  display: block;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--mcs-orange);

  box-shadow:
    0 0 10px rgba(241,90,36,.8);
}


.mcsai-hud-bottom {

  position: absolute;

  left: 24px;
  right: 24px;
  bottom: 19px;

  z-index: 8;

  display: flex;

  justify-content:
    space-between;

  color:
    rgba(255,255,255,.63);

  font-size: var(--mcs-text-nano);

  letter-spacing: .14em;
}



/* ==================================================
   ACTIVE MODE
================================================== */

.mcsai-mode {

  position: absolute;

  left: 24px;
  top: 70px;

  z-index: 8;

  display: flex;

  flex-direction:
    column;

  gap: 5px;
}


.mcsai-mode-label {

  color:
    rgba(255,255,255,.43);

  font-size: var(--mcs-text-nano);

  letter-spacing: .16em;
}


#mcsai-mode-name {

  color:
    var(--mcs-orange);

  font-size: var(--mcs-text-label);

  font-weight: 600;

  letter-spacing: .12em;

  transition:
    opacity .25s ease,
    filter .25s ease;
}



/* ==================================================
   CORNERS
================================================== */

.mcsai-corner {

  position: absolute;

  z-index: 7;

  width: 28px;
  height: 28px;

  border-color:
    rgba(241,90,36,.78);
}


.mcsai-tl {

  left: 15px;
  top: 15px;

  border-left:
    1px solid;

  border-top:
    1px solid;
}


.mcsai-tr {

  right: 15px;
  top: 15px;

  border-right:
    1px solid;

  border-top:
    1px solid;
}


.mcsai-bl {

  left: 15px;
  bottom: 15px;

  border-left:
    1px solid;

  border-bottom:
    1px solid;
}


.mcsai-br {

  right: 15px;
  bottom: 15px;

  border-right:
    1px solid;

  border-bottom:
    1px solid;
}



/* ==================================================
   RETICLE
================================================== */

.mcsai-reticle {

  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 6;

  width: 44px;
  height: 44px;

  transform:
    translate(-50%, -50%);

  border:
    1px solid rgba(255,255,255,.22);

  border-radius: 50%;
}


.mcsai-reticle::before,
.mcsai-reticle::after {

  content: "";

  position: absolute;

  background:
    rgba(255,255,255,.24);
}


.mcsai-reticle::before {

  width: 66px;
  height: 1px;

  left: -12px;
  top: 21px;
}


.mcsai-reticle::after {

  width: 1px;
  height: 66px;

  top: -12px;
  left: 21px;
}


.mcsai-reticle span {

  position: absolute;

  width: 5px;
  height: 5px;

  left: 19px;
  top: 19px;

  border-radius: 50%;

  background:
    var(--mcs-orange);
}



/* ==================================================
   SCAN LINE
================================================== */

.mcsai-scan-line {

  position: absolute;

  left: 0;
  right: 0;

  height: 1px;

  top: -5%;

  z-index: 7;

  opacity: .65;

  background:
    linear-gradient(
      to right,
      transparent,
      var(--mcs-orange),
      transparent
    );

  box-shadow:
    0 0 15px rgba(241,90,36,.45);

  animation:
    mcsaiScan
    5s
    linear
    infinite;

  pointer-events: none;
}


@keyframes mcsaiScan {

  0% {
    top: 5%;
    opacity: 0;
  }

  8% {
    opacity: .55;
  }

  75% {
    opacity: .4;
  }

  85% {
    top: 94%;
    opacity: 0;
  }

  100% {
    top: 94%;
    opacity: 0;
  }}



/* ==================================================
   DETECTION TAGS
================================================== */

.mcsai-detection {

  position: absolute;

  z-index: 9;

  display: flex;

  align-items: center;

  gap: 6px;

  padding:
    5px 7px;

  border:
    1px solid rgba(241,90,36,.45);

  background:
    rgba(10,10,10,.58);

  backdrop-filter:
    blur(4px);

  color:
    rgba(255,255,255,.78);

  font-size: var(--mcs-text-nano);

  font-weight: 600;

  letter-spacing: .12em;

  opacity: .3;

  transition:
    opacity .4s ease,
    transform .4s ease;
}


.mcsai-detection i {

  display: block;

  width: 4px;
  height: 4px;

  background:
    var(--mcs-orange);

  border-radius: 50%;
}


.mcsai-d1 {
  left: 16%;
  top: 62%;
}


.mcsai-d2 {
  right: 15%;
  top: 52%;
}


.mcsai-d3 {
  right: 29%;
  top: 28%;
}


#mcsai[data-active="1"]
.mcsai-detection,

#mcsai[data-active="2"]
.mcsai-detection {

  opacity: 1;
}



/* ==================================================
   PROGRESS
================================================== */

.mcsai-progress {

  position: absolute;

  left: 0;
  bottom: 0;

  z-index: 10;

  width: 100%;
  height: 2px;

  background:
    rgba(255,255,255,.16);
}


#mcsai-progress-fill {

  display: block;

  width: 25%;
  height: 100%;

  background:
    var(--mcs-orange);

  transition:
    width .6s cubic-bezier(.16,1,.3,1);
}



/* ==================================================
   STORY
================================================== */

.mcsai-story {
  min-width: 0;
  container-type: inline-size;

  /* Rows above/within view keep resizing for the length of the
     0.6s expand/collapse transition. Without this, the browser's
     scroll anchoring "corrects" the scroll position to compensate
     as that happens, fighting both the scroll-driven advance and
     a clicked step's landing position. */
  overflow-anchor: none;
}


/* ==================================================
   STEP — accordion row. The head is always visible;
   the body (title/copy/tags) collapses to 0 height via
   grid-template-rows and expands when .is-active.
================================================== */

.mcsai-step {

  display: flex;

  flex-direction:
    column;

  border-top:
    1px solid var(--mcs-line-onlight);
}


.mcsai-story > .mcsai-step:first-child {

  border-top:
    none;
}


.mcsai-step-head {

  display: flex;
  align-items: center;

  gap: 14px;

  /* vh-based, not vw — this list has to fit inside a box sized in
     viewport-height units (.mcsai-experience is a fixed 80vh), so
     its own spacing needs to shrink with a short window the same
     way, not just a narrow one. */
  padding:
    clamp(12px, 2vh, 24px)
    0;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}


.mcsai-step-head:focus-visible {

  outline:
    2px solid var(--mcs-orange);

  outline-offset: 6px;
}


.mcsai-step-number {

  color:
    var(--mcs-onlight-30);

  font-size: var(--mcs-text-label);

  font-weight: 600;

  letter-spacing: .2em;

  transition:
    color .3s ease;
}


.mcsai-step-head .mcs-label {

  color:
    var(--mcs-onlight-42);

  transition:
    color .3s ease;
}


.mcsai-step.is-active .mcsai-step-number,
.mcsai-step.is-active .mcsai-step-head .mcs-label {

  color:
    var(--mcs-orange);
}


.mcsai-step-body {

  display: grid;

  grid-template-rows: 0fr;

  transition:
    grid-template-rows .6s var(--mcs-ease);
}


.mcsai-step.is-active .mcsai-step-body {

  grid-template-rows: 1fr;
}


.mcsai-step-body__inner {

  overflow: hidden;

  min-height: 0;
}


/* The gap below the content has to live on a CHILD as margin, not
   as padding on this element — padding here would stay reserved
   even at grid-template-rows: 0fr, since overflow:hidden only lets
   the collapsing row ignore the content's min-size, not its own
   box-model padding. Margin on a child is ordinary content height,
   so it collapses away with everything else. */
.mcsai-step-body__inner > *:last-child {

  margin-bottom:
    clamp(14px, 2.2vh, 26px);
}


.mcsai-step-body__inner > * {

  opacity: 0;

  transition:
    opacity .3s ease;
}


.mcsai-step.is-active .mcsai-step-body__inner > * {

  opacity: 1;

  transition:
    opacity .45s ease .2s;
}


.mcsai-step__title {
  margin:
    0 0
    clamp(16px, 2.4vh, 28px);

  max-width: 600px;

  overflow-wrap: break-word;

  color:
    var(--mcs-black);
}


.mcsai-step-text {

  max-width: 600px;

  margin: 0;

  color:
    var(--mcs-onlight-60);
  line-height: 1.6;
}



/* ==================================================
   CAMERA COUNT
================================================== */

.mcsai-techline {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: clamp(14px, 2.2vh, 26px);
}



/* ==================================================
   TAGS
================================================== */

.mcsai-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: clamp(14px, 2.2vh, 26px);
}



/* ==================================================
   DATA ROW
================================================== */

.mcsai-data-row {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: clamp(14px, 2.2vh, 26px);
}



/* ==================================================
   REPORT
================================================== */

.mcsai-report {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: clamp(14px, 2.2vh, 26px);
}



/* ==================================================
   FLYWHEEL (STEP 05)
================================================== */

.mcsai-flywheel {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 10px;

  margin-top: clamp(14px, 2.2vh, 26px);
}

.mcsai-flywheel-arrow {

  flex: 0 0 auto;

  font-style: normal;

  color: var(--mcs-onlight-30);
}

.mcsai-step-footnote {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 24px;

  font-family: var(--mcs-font-heading);
  font-size: var(--mcs-text-body-sm);
  color: var(--mcs-black);
}

.mcsai-step-footnote span {

  width: 24px;

  height: 1px;

  background: var(--mcs-orange);
}




/* ==================================================
   MOBILE
================================================== */

@media (max-width: 1050px) {

  .mcsai-inner {

    padding:
      var(--mcs-section-pad-y)
      var(--mcs-section-pad-x);
  }


  .mcsai-heading-grid {

    grid-template-columns:
      1fr;

    gap: 40px;

    margin-bottom:
      70px;
  }


  .mcsai-experience {

    display: block;

    /* The fixed 80vh + overflow:hidden above is sized for the
       pinned 2-column desktop layout — here content simply stacks
       and needs to take whatever height it naturally needs. */
    height: auto;

    overflow: visible;
  }


  .mcsai-experience-grid {

    display: block;
  }


  .mcsai-sticky {

    position:
      relative;

    top: auto;

    height: auto;

    min-height: 0;

    margin-bottom:
      50px;
  }


  .mcsai-screen {

    height: 57vw;

    min-height: 300px;

    max-height: 470px;
  }


  .mcsai-story {

    display: block;
  }


  /* No pinned video to pace the scroll against here, so the
     accordion rows stay compact — several collapsed headers
     should be visible together without scrolling. */
  .mcsai-step-head {

    padding:
      24px 0;
  }


  .mcsai-step-body__inner > *:last-child {

    margin-bottom:
      28px;
  }



  .mcsai-detection {

    font-size: 6px;
  }


  .mcsai-reticle {

    transform:
      translate(-50%, -50%)
      scale(.7);
  }

}



/* ==================================================
   NARROW SCREENS — PINNED, STACKED

   Tablets and phones get the same pinned, scroll-driven accordion as
   desktop, with the two columns stacked: the video on top, the
   accordion below. The whole experience is one fixed-height frame
   (--mcs-pin-frame, one screen minus the header). The accordion takes
   the height it needs and the video gets whatever is left, shrinking
   and cropping (object-fit: cover) rather than pushing anything out.
   Reduced-motion users keep the plain stacked layout above.
================================================== */

@media (max-width: 1050px) and (prefers-reduced-motion: no-preference) {

  .mcsai-experience {

    display: flex;

    height: var(--mcs-pin-frame);

    box-sizing: border-box;

    /* the pin starts flush under the header, so the frame brings its own
       air; the video gets a little more than the other pinned sections */
    padding-top: clamp(20px, 5svh, 56px);

    overflow: hidden;
  }


  .mcsai-experience-grid {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    height: 100%;

    /* the space between the video and the accordion */
    gap: clamp(18px, 3.6svh, 44px);
  }


  .mcsai-visual-column {

    flex: 1 1 0;

    min-height: 0;

    /* lets the video step aside when the accordion needs all the room */
    container-type: size;
  }


  .mcsai-sticky {

    height: 100%;

    margin-bottom: 0;
  }


  .mcsai-screen {

    height: 100%;

    min-height: 0;

    max-height: none;

    /* lets the HUD below drop its detail when the screen gets short */
    container-type: size;
  }


  .mcsai-story {

    flex: 0 0 auto;
  }


  .mcsai-step-head {

    padding: clamp(9px, 1.6svh, 18px) 0;
  }


  .mcsai-step-body__inner > *:last-child {

    margin-bottom: clamp(8px, 1.5svh, 18px);
  }


  .mcsai-step__title {

    margin-bottom: clamp(8px, 1.4svh, 16px);
  }

}


/* the video drops out entirely when there is no usable room for it */

@container (max-height: 90px) {

  .mcsai-sticky {

    display: none;
  }
}


/* the video HUD drops its detail as the screen gets shorter */

@container (max-height: 240px) {

  .mcsai-detection,
  .mcsai-reticle {

    display: none;
  }
}


@container (max-height: 170px) {

  .mcsai-mode,
  .mcsai-hud-bottom {

    display: none;
  }
}



/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

  #mcsai *,
  #mcsai *::before,
  #mcsai *::after {

    animation:
      none !important;

    transition:
      none !important;
  }

}


/* ===================== 3section3 ===================== */




/* ================================
   MCS IMPACT MODULE
================================ */

#mcs-impact-module {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 100%;
  margin: 0;

  background: var(--mcs-black);
  color: var(--mcs-white);

  box-sizing: border-box;
  overflow: hidden;

  font-family: inherit;
}

#mcs-impact-module * {
  box-sizing: border-box;
}


.mcs-impact-inner {
  max-width: 1800px;
  margin: 0 auto;
  padding:
    var(--mcs-section-pad-y)
    var(--mcs-section-pad-x);
}


/* KICKER */

.mcs-impact-kicker {
  margin-bottom: clamp(45px, 5vw, 80px);
}



/* TITLE */

.mcs-impact-title {
  margin: 0 0 clamp(40px, 5vw, 80px);
  color: var(--mcs-white);
}


/* ================================
   ACCORDION
================================ */

/* Pinned frame — fixed height so ScrollTrigger can pin it exactly when
   its top reaches the header (same approach as .mcsai-experience).
   Below 1050px it becomes a plain stacked block. */

/* SECTION BODY — fixed 80vh (so ScrollTrigger can pin it exactly), with
   the accordion wrapper centered inside it. Below 1050px it becomes a
   plain stacked block. */

.mcs-impact-experience {
  overflow: hidden;

  display: flex;
  align-items: center;
}

/* ACCORDION WRAPPER — left column (accordion) + right column (stage),
   both aligned to the top so they start on the same line. */

.mcs-impact-grid {
  width: 100%;

  display: grid;
  grid-template-columns:
    minmax(340px, 1fr)
    minmax(340px, 1fr);
  gap: clamp(40px, 6vw, 110px);

  align-items: start;
}

.mcs-impact-list {
  min-width: 0;

  container-type: inline-size;

  /* Rows keep resizing for the length of the expand/collapse
     transition; without this, scroll anchoring fights the scroll-driven
     advance. */
  overflow-anchor: none;
}

.mcs-impact-item {
  border-top: 1px solid var(--mcs-line);
}

/* no divider above the first row (and none below the last) */
.mcs-impact-item--first {
  border-top: 0;
}

.mcs-impact-item__head {
  width: 100%;

  display: flex;
  align-items: center;
  gap: 14px;

  /* vh-based so the list keeps fitting the 80vh frame in a short window */
  padding: clamp(12px, 2vh, 24px) 0;

  border: 0;
  background: transparent;

  text-align: left;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mcs-impact-item__head:focus-visible {
  outline: 2px solid var(--mcs-orange);
  outline-offset: 6px;
}

.mcs-impact-item__number {
  color: var(--mcs-ink-30);

  font-family: var(--mcs-font-body);
  font-size: var(--mcs-text-label);
  font-weight: 600;
  letter-spacing: .2em;

  transition: color .3s ease;
}

.mcs-impact-item__label {
  color: var(--mcs-ink-42);

  transition: color .3s ease;
}

.mcs-impact-item.is-active .mcs-impact-item__number,
.mcs-impact-item.is-active .mcs-impact-item__label {
  color: var(--mcs-orange);
}


/* BODY — grid-template-rows 0fr -> 1fr collapse. The gap below the
   content is margin on the last child (.mcs-impact-item__content),
   not padding here, so it collapses with the row. */

.mcs-impact-item__body {
  display: grid;
  grid-template-rows: 0fr;

  visibility: hidden;

  transition:
    grid-template-rows .6s var(--mcs-ease),
    visibility 0s linear .6s;
}

.mcs-impact-item.is-active .mcs-impact-item__body {
  grid-template-rows: 1fr;

  visibility: visible;

  transition:
    grid-template-rows .6s var(--mcs-ease),
    visibility 0s;
}

.mcs-impact-item__inner {
  min-height: 0;
  overflow: hidden;
}

.mcs-impact-item__content {
  position: relative;

  max-width: 640px;

  margin-bottom: clamp(14px, 2.2vh, 26px);

  opacity: 0;
  transform: translateY(14px);

  transition:
    opacity .25s ease,
    transform .25s ease;
}

.mcs-impact-item.is-active .mcs-impact-item__content {
  opacity: 1;
  transform: translateY(0);

  transition:
    opacity .5s ease .2s,
    transform .6s var(--mcs-ease) .2s;
}


/* ================================
   STAGE (right column)
================================ */

.mcs-impact-stage {
  position: relative;

  display: grid;
  place-items: center;

  min-width: 0;

  padding: clamp(20px, 2.4vw, 40px);

  overflow: hidden;

  /* a soft orange glow behind the number; the faint grid is its own
     .mcs-grid-bg child */
  background:
    radial-gradient(
      ellipse 70% 55% at 50% 52%,
      color-mix(in srgb, var(--mcs-orange) 4%, transparent),
      transparent 72%
    );
}

/* All three metrics sit in the same grid cell; the active one fades in. */
.mcs-impact-stage__metric {
  grid-area: 1 / 1;

  /* the stage centres its metric; these two values are read by the shared
     metric parts (eyebrow / number / note) below */
  --impact-justify: center;
  --impact-align-margin: auto;
  text-align: center;

  width: 100%;
  max-width: 720px;
  z-index: 1;

  visibility: hidden;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(14px);

  transition:
    opacity .3s ease,
    filter .3s ease,
    transform .3s ease,
    visibility 0s linear .3s;
}

.mcs-impact-stage__metric.is-active {
  visibility: visible;
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);

  transition:
    opacity .55s ease .15s,
    filter .55s ease .15s,
    transform .65s var(--mcs-ease) .15s,
    visibility 0s;
}

/* The in-body copy of the metric is for stacked layouts only. */
.mcs-impact-item__metric {
  display: none;
}


/* ================================
   METRIC
================================ */

.mcs-impact-metric {
  position: relative;
}


.mcs-impact-eyebrow {
  margin-bottom: clamp(18px, 2.6vh, 40px);

  color: var(--mcs-orange);

  font-size: var(--mcs-text-body-sm);
  font-weight: 500;

  letter-spacing: .28em;
}


.mcs-big-number {
  display: flex;
  align-items: flex-end;
  justify-content: var(--impact-justify, flex-start);

  white-space: nowrap;

  font-size: var(--mcs-text-stat-xl);
  line-height: .72;

  font-weight: 800;

  letter-spacing: -.075em;

  color: var(--mcs-white);
}


.mcs-suffix {
  margin-left: .14em;

  color: var(--mcs-orange);

  font-size: .46em;
  line-height: .8;

  letter-spacing: -.03em;
}


.mcs-metric-note {
  margin-top: clamp(24px, 4vh, 52px);
  padding-top: clamp(14px, 2.4vh, 24px);

  border-top: 1px solid var(--mcs-line);

  max-width: 520px;
  margin-left: var(--impact-align-margin, 0);
  margin-right: var(--impact-align-margin, 0);

  color: var(--mcs-ink-42);

  font-size: var(--mcs-text-caption);

  font-weight: 500;

  letter-spacing: .16em;
}


/* ================================
   COMPARISON BARS — manual vs Box Cleaner, drawn from the headline
   number. They fill in when their metric becomes active.
================================ */

.mcs-impact-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;

  max-width: 520px;
  margin-top: clamp(20px, 3.4vh, 40px);
  margin-left: var(--impact-align-margin, 0);
  margin-right: var(--impact-align-margin, 0);
}

.mcs-impact-bar {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 16px;
}

.mcs-impact-bar__label {
  color: var(--mcs-ink-42);

  font-size: var(--mcs-text-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-align: left;
  white-space: nowrap;
}

.mcs-impact-bar__track {
  display: block;
  height: 8px;

  background: var(--mcs-line-faint);
}

.mcs-impact-bar__fill {
  display: block;
  height: 100%;
  width: var(--fill);

  transform: scaleX(0);
  transform-origin: left center;

  transition: transform 1s var(--mcs-ease) .25s;
}

.mcs-impact-bar__fill--manual {
  background: var(--mcs-ink-42);
}

.mcs-impact-bar__fill--mcs {
  background: var(--mcs-orange);
}

.mcs-impact-stage__metric.is-active .mcs-impact-bar__fill,
.mcs-impact-item.is-active .mcs-impact-bar__fill {
  transform: scaleX(1);
}


/* ================================
   TEXT SIDE
================================ */

.mcs-panel-title {
  margin: 0 0 clamp(16px, 2.4vh, 28px);
  color: var(--mcs-white);
}


.mcs-panel-title__num {
  letter-spacing: .01em;
}


.mcs-description {
  max-width: 800px;

  margin: 0 0 clamp(16px, 2.6vh, 28px);

  color: var(--mcs-ink-60);
  line-height: 1.6;
}


.mcs-bullets {
  margin: 0;
  padding: 0;

  list-style: none;
}


.mcs-bullets li {
  position: relative;

  margin: 17px 0;

  padding-left: 30px;

  color: var(--mcs-ink-60);

  font-size: var(--mcs-text-body);
  line-height: 1.4;
}


.mcs-bullets li::before {
  content: "";

  position: absolute;

  left: 1px;
  top: .6em;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--mcs-orange);
}


/* ================================
   DESKTOP — the accordion body is the pinned element: a fixed 80vh frame
   (so ScrollTrigger can pin it exactly), with the accordion centred in it
   and the stage filling its column. The section keeps its normal
   padding and header.
================================ */

@media (min-width: 1051px) {

  .mcs-impact-experience {
    height: 80vh;
  }

  .mcs-impact-grid {
    height: 100%;

    align-items: stretch;
  }

  .mcs-impact-list {
    align-self: center;
  }

}


/* ================================
   TABLET / MOBILE — no pin, no second column:
   the metric moves into each row's body.
================================ */

@media (max-width: 1050px) {

  .mcs-impact-experience {
    display: block;

    height: auto;

    overflow: visible;
  }

  .mcs-impact-grid {
    display: block;
  }

  .mcs-impact-stage {
    display: none;
  }

  .mcs-impact-item__metric {
    display: block;

    margin-bottom: 26px;
    padding: 24px 0;
  }

  .mcs-impact-item__head {
    padding: 24px 0;
  }

  .mcs-big-number {
    font-size: var(--mcs-text-stat);
  }

  .mcs-impact-item__note {
    margin-top: 20px;
    padding-top: 0;

    border-top: 0;
  }

  .mcs-impact-item__content {
    margin-bottom: 28px;
  }

  .mcs-bullets li {
    margin: 12px 0;

    font-size: var(--mcs-text-body-sm);
  }

}


/* ================================
   NARROW SCREENS, PINNED AND STACKED

   Same pinned, scroll-driven accordion as desktop with the columns
   stacked: the stat stage on top, the accordion below, all inside one
   fixed-height frame (--mcs-pin-frame). The accordion keeps the height
   it needs; the stage takes the rest and drops detail (bars, note) as it
   gets short. Reduced-motion users keep the plain stacked layout above,
   with the number inside each row.
================================ */

@media (max-width: 1050px) and (prefers-reduced-motion: no-preference) {

  .mcs-impact-experience {
    display: flex;

    height: var(--mcs-pin-frame);

    box-sizing: border-box;

    padding-top: var(--mcs-pin-pad);

    overflow: hidden;
  }

  .mcs-impact-grid {
    display: flex;
    flex-direction: column;

    align-items: stretch;

    width: 100%;
    height: 100%;

    gap: clamp(8px, 1.8svh, 22px);
  }

  .mcs-impact-stage {
    display: grid;

    order: -1;

    flex: 1 1 0;
    min-height: 0;

    padding: 0;

    /* lets the stage drop its detail when it gets short */
    container-type: size;
  }

  .mcs-impact-list {
    flex: 0 0 auto;
  }

  /* the in-row number is only for the reduced-motion layout */
  .mcs-impact-item__metric {
    display: none;
  }

  .mcs-impact-item__head {
    padding: clamp(9px, 1.6svh, 20px) 0;
  }

  .mcs-impact-item__content {
    margin-bottom: clamp(8px, 1.5svh, 18px);
  }

  .mcs-impact-item__content .mcs-description {
    margin-bottom: clamp(8px, 1.4svh, 18px);
  }

  .mcs-bullets li {
    margin: clamp(6px, 1.1svh, 12px) 0;
  }

  .mcs-big-number {
    font-size: clamp(54px, min(15vw, 14svh), 140px);
  }

}


@container (max-height: 90px) {

  .mcs-impact-stage__metric {
    display: none;
  }
}


@container (max-height: 270px) {

  .mcs-impact-bars {
    display: none;
  }
}


@container (max-height: 190px) {

  .mcs-metric-note {
    display: none;
  }

  .mcs-impact-eyebrow {
    margin-bottom: 8px;
  }
}


/* ================================
   TALL PORTRAIT SCREENS, WHOLE SECTION PINNED

   On portrait tablets tall enough for it (iPad Air / Pro class) the
   whole section is the pinned frame: eyebrow, title, stat stage and
   accordion all stay on screen, so there is no empty space above the
   accordion. The stage takes whatever height the rest leaves.
   Keep the media query in step with SECTION_PIN in home-interactive.js.
================================ */

@media (max-width: 1050px) and (orientation: portrait) and (min-height: 1100px) and (prefers-reduced-motion: no-preference) {

  #mcs-impact-module {
    display: flex;
    flex-direction: column;

    height: calc(100svh - var(--mcs-header-h));
  }

  .mcs-impact-inner {
    width: 100%;
    flex: 1;
    min-height: 0;

    display: flex;
    flex-direction: column;

    padding-top: clamp(28px, 4.5svh, 56px);
    padding-bottom: clamp(28px, 4.5svh, 56px);
  }

  .mcs-impact-kicker {
    margin-bottom: clamp(16px, 3svh, 36px);
  }

  .mcs-impact-title {
    margin-bottom: clamp(16px, 3svh, 36px);
  }

  /* the frame is now the section, so the body just fills what is left */
  .mcs-impact-experience {
    flex: 1;
    min-height: 0;

    height: auto;

    padding-top: 0;
  }

  .mcs-big-number {
    font-size: clamp(64px, min(19vw, 15svh), 200px);
  }

}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

  #mcs-impact-module *,
  #mcs-impact-module *::before,
  #mcs-impact-module *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }

}


/* ===================== 6news ===================== */




/* =========================================================
   FROM THE FIELD
========================================================= */

.mcs-fieldpress {

  position:relative;
  z-index:1;

  width:100%;

  box-sizing:border-box;

  background:
    var(--mcs-white);

  color:
    var(--mcs-black);

  font-family:
    inherit;
}


.mcs-fieldpress__inner {

  max-width:1800px;

  margin:0 auto;

  padding:
    var(--mcs-section-pad-y)
    var(--mcs-section-pad-x);
}



/* =========================================================
   INTRO
========================================================= */

.mcs-fieldpress__intro {

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(260px,.38fr);

  gap:
    clamp(40px,7vw,110px);

  align-items:end;

  padding:
    clamp(30px,3vw,42px)
    0
    clamp(32px,3vw,43px);
}


.mcs-fieldpress__kicker {

  margin-bottom:
    clamp(45px,5vw,80px);
}


.mcs-fieldpress__title {

  margin:0 !important;

  color:
    var(--mcs-black) !important;
}


.mcs-fieldpress__intro-text {

  max-width:400px;

  margin:0 !important;

  color:
    var(--mcs-onlight-42);

  line-height:
    1.65;
}



/* =========================================================
   TRUSTED BY
========================================================= */

.mcs-fieldpress-trusted {
  margin-top: clamp(50px, 5vw, 80px);
  padding-top: clamp(40px, 4vw, 64px);

  border-top: 1px solid var(--mcs-line-onlight);
}

.mcs-fieldpress-trusted-copy {
  display: flex;
  align-items: center;
  gap: 12px;

  margin: 0 0 clamp(28px, 3vw, 40px);

  font-family: var(--mcs-font-heading);
  font-size: var(--mcs-text-body-sm);
  color: var(--mcs-black);
}

.mcs-fieldpress-trusted-copy span {
  flex: 0 0 auto;

  width: 24px;
  height: 1px;

  background: var(--mcs-orange);
}

.mcs-fieldpress-trusted-logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(20px, 3vw, 40px);
}

.mcs-fieldpress-trusted-logos img {
  width: 10vw;
  height: auto;
  max-width: 100%;

  filter: grayscale(1);
  opacity: .6;
}



/* =========================================================
   GRID
========================================================= */

.mcs-fieldpress__grid {

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:
    clamp(24px,2.6vw,40px);
}



/* =========================================================
   CARD
========================================================= */

.mcs-fieldpress-card {

  display:flex;

  flex-direction:column;

  min-width:0;

  padding:
    14px 14px 18px;

  color:
    inherit !important;

  text-decoration:
    none !important;

  border:
    none;

  background:
    rgba(255,255,255,.4);

  box-shadow:
    0 14px 34px rgba(11,11,11,.07),
    inset 0 1px 0 rgba(255,255,255,.7);

  -webkit-backdrop-filter:
    blur(18px);
  backdrop-filter:
    blur(18px);

  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    box-shadow .3s ease;
}


.mcs-fieldpress-card:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 20px 44px rgba(11,11,11,.10),
    inset 0 1px 0 rgba(255,255,255,.8);
}



/* =========================================================
   IMAGE
========================================================= */

.mcs-fieldpress-card__image {

  position:relative;

  width:100%;

  aspect-ratio:
    4 / 3;

  overflow:hidden;

  background:
    #e7e7e4;
}


.mcs-fieldpress-card__image img {

  display:block;

  width:100%;

  height:100%;

  object-fit:cover;

  object-position:center;

  transition:
    transform .65s cubic-bezier(.16,1,.3,1),
    filter .3s ease;
}


.mcs-fieldpress-card:hover
.mcs-fieldpress-card__image img {

  transform:
    scale(1.018);
}



/* OLD / ARCHIVE PIECES SLIGHTLY QUIETER */

.mcs-fieldpress-card--archive
.mcs-fieldpress-card__image img {

  filter:
    saturate(.82);
}



/* =========================================================
   CONTENT
========================================================= */

.mcs-fieldpress-card__content {

  flex:1;

  display:flex;

  flex-direction:column;

  padding:
    16px 1px 3px;
}



/* SOURCE */

.mcs-fieldpress-card__source {

  display:flex;

  align-items:flex-start;

  justify-content:
    space-between;

  gap:14px;

  padding-bottom:11px;

  border-bottom:
    1px solid var(--mcs-line-onlight-faint);
}


.mcs-fieldpress-card__source strong {

  max-width:68%;

  color:
    var(--mcs-onlight-60);

  font-size: var(--mcs-text-micro);

  font-weight:600;

  line-height:1.35;
}


.mcs-fieldpress-card__source span {

  color:
    var(--mcs-onlight-24);

  font-size: var(--mcs-text-micro);

  font-weight:600;

  white-space:nowrap;
}



/* HEADLINE */

.mcs-fieldpress-card__title {

  margin:
    18px 0 24px !important;

  color:
    var(--mcs-black) !important;
}



/* FOOTER */

.mcs-fieldpress-card__footer {

  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:15px;

  margin-top:auto;

  padding-top:12px;

  border-top:
    1px solid var(--mcs-line-onlight-faint);

  color:
    var(--mcs-onlight-30);

  font-size: var(--mcs-text-caption);

  font-weight:600;

  letter-spacing:.10em;
}


.mcs-fieldpress-card__footer strong {

  color:
    var(--mcs-orange);

  font-size:var(--mcs-text-body-sm);

  font-weight:400;

  line-height:1;

  transition:
    transform .2s ease;
}


.mcs-fieldpress-card:hover
.mcs-fieldpress-card__footer strong {

  transform:
    translate(2px,-2px);
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px) {

  .mcs-fieldpress__grid {

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:
      34px 24px;
  }


  .mcs-fieldpress-trusted-logos {

    grid-template-columns:
      repeat(3, 1fr);

    row-gap:
      clamp(28px, 4vw, 40px);
  }



}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px) {

  .mcs-fieldpress__inner {

    padding:
      var(--mcs-section-pad-y)
      var(--mcs-section-pad-x);
  }


  .mcs-fieldpress__intro {

    grid-template-columns:
      1fr;

    gap:20px;

    padding:
      30px 0 36px;
  }




  .mcs-fieldpress__grid {

    grid-template-columns:
      1fr;

    gap:34px;
  }


  .mcs-fieldpress-trusted-logos {

    grid-template-columns:
      repeat(2, 1fr);

    row-gap:
      28px;
  }


  .mcs-fieldpress-card__image {

    aspect-ratio:
      4 / 3;
  }


  .mcs-fieldpress-card__title {

    margin-top:
      18px !important;
  }


}