/* ===== shared closing banner (Box Cleaner + Careers) ===== */
/* =========================================================
   CLOSING BANNER
========================================================= */

.mcs-banner {

  --orange:var(--mcs-orange);
  --white:var(--mcs-white);

  position:relative;

  width: 100%;

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

  box-sizing:border-box;

  background:var(--mcs-black);

  color:var(--white);

  font-family:inherit;
}



/* =========================================================
   EMBEDDED — lives inside another section: no section background or
   padding of its own, just the photo panel with space above it.
========================================================= */

.mcs-banner--embedded {

  padding:0;

  background:none;

  margin-top:
    clamp(48px,5vw,80px);
}



/* =========================================================
   IMAGE PANEL
   The photo sits inset inside the dark section, framed by
   the section's padding, with the content laid over it.
========================================================= */

.mcs-banner__panel {

  position:relative;

  overflow:hidden;

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



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

/* The photo (and its blur) extends past the panel's edge by --banner-bleed,
   and the panel clips it. The blur is on the photo itself, not a
   backdrop-filter on the overlay: a backdrop blur is cut off at the panel
   edge and pulls in the page's black there, which left a dark band around
   the picture. */
.mcs-banner__panel {

  --banner-bleed:28px;
}


.mcs-banner__background {

  position:absolute;

  inset:calc(-1 * var(--banner-bleed));

  overflow:hidden;
}


.mcs-banner__background img {

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  object-fit:cover;

  object-position:
    50% 50%;

  transform:
    scale(1.015);

  filter:
    blur(12px)
    saturate(.82)
    contrast(1.04);

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


.mcs-banner__panel:hover
.mcs-banner__background img {

  transform:
    scale(1.035);
}



/* =========================================================
   GLASS OVERLAY

   Flat dark tint over the whole panel, no gradient (see
   brand-guidelines, "Flat glass"). The blur is on the photo itself
   (see above), so the tint covers evenly right up to the edge.
   Softens the photo so the copy stays legible.
========================================================= */

.mcs-banner__overlay {

  position:absolute;

  inset:0;

  z-index:1;

  pointer-events:none;

  background:
    rgba(11,11,11,.68);
}



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

.mcs-banner__content {

  position:relative;

  z-index:2;

  display:flex;

  flex-direction:column;

  padding:

    clamp(35px,3.5vw,55px)

    clamp(24px,4vw,64px);

  box-sizing:border-box;
}



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

.mcs-banner__top {

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  padding-bottom:15px;

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


.mcs-banner__availability {

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

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

  font-weight:600;

  line-height:1;

  letter-spacing:.15em;
}



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

.mcs-banner__main {

  flex:1;

  display:grid;

  grid-template-columns:
    minmax(0,1.2fr)
    minmax(300px,.52fr);

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

  align-items:center;

  padding:
    clamp(55px,5vw,80px)
    0;
}



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

.mcs-banner__kicker {

  margin-bottom:16px;

  color:
    var(--orange);

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

  font-weight:600;

  line-height:1;

  letter-spacing:.18em;
}


.mcs-banner__title {

  margin:0 !important;

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



/* =========================================================
   ACTION
========================================================= */

.mcs-banner__action {

  align-self:end;

  max-width:410px;

  margin-bottom:
    clamp(15px,3vw,42px);
}


.mcs-banner__action-label {

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  padding-bottom:14px;

  margin-bottom:25px;

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


.mcs-banner__action-label span {

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

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

  font-weight:600;

  letter-spacing:.13em;
}


.mcs-banner__action-label small {

  color:
    var(--orange);

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

  font-weight:600;

  letter-spacing:.13em;
}


.mcs-banner__action-text {

  margin:0 !important;

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

  line-height:1.7;
}



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

.mcs-banner__button {

  margin-top:30px;

  transition:
    transform .3s cubic-bezier(.16,1,.3,1);

  /* never wider than the panel's content (the shared button has a minimum
     width that is a few px too wide at 320px) */
  min-width:min(225px, 100%);

  box-sizing:border-box;
}


.mcs-banner__button:hover {

  transform:
    translateY(-3px);
}



/* =========================================================
   MICRO
========================================================= */

.mcs-banner__micro {

  display:flex;

  align-items:center;

  gap:9px;

  margin-top:17px;

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

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

  font-weight:600;

  letter-spacing:.12em;
}


.mcs-banner__micro span {

  width:5px;

  height:5px;

  border-radius:50%;

  background:
    var(--orange);
}



/* =========================================================
   COMMERCIAL STRIP
========================================================= */

.mcs-banner__strip {

  display:grid;

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

  border-top:
    1px solid rgba(255,255,255,.24);

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

  background:
    rgba(5,5,5,.28);

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

  backdrop-filter:
    blur(8px);
}


.mcs-banner__strip > div {

  display:flex;

  align-items:center;

  gap:13px;

  min-height:72px;

  padding:
    0 clamp(14px,2vw,26px);

  box-sizing:border-box;

  border-right:
    1px solid rgba(255,255,255,.17);
}


.mcs-banner__strip > div:last-child {

  border-right:0;
}


.mcs-banner__strip span {

  color:
    var(--orange);

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

  font-weight:600;
}


.mcs-banner__strip strong {

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

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

  font-weight:600;

  line-height:1.35;

  letter-spacing:.11em;
}



/* =========================================================
   BOTTOM
========================================================= */

.mcs-banner__bottom {

  display:flex;

  align-items:center;

  gap:15px;

  padding-top:20px;

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

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

  font-weight:600;

  letter-spacing:.12em;
}


.mcs-banner__bottom > div {

  display:flex;

  align-items:center;

  gap:8px;
}


.mcs-banner__bottom > div:first-child > span {

  width:5px;

  height:5px;

  border-radius:50%;

  background:
    var(--orange);
}


.mcs-banner__bottom > i {

  flex:1;

  height:1px;

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



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

@media (max-width:1000px) {

  .mcs-banner__main {

    grid-template-columns:
      minmax(0,1fr)
      minmax(280px,.65fr);

    gap:45px;
  }
}



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

@media (max-width:767px) {

  .mcs-banner {

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


  .mcs-banner__background img {

    object-position:
      52% center;
  }


  .mcs-banner__content {

    padding:
      32px 18px 24px;
  }


  .mcs-banner__availability {

    display:none;
  }



  /* MAIN */

  .mcs-banner__main {

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:stretch;

    gap:42px;

    padding:
      50px 0;
  }

  .mcs-banner__action {

    align-self:stretch;

    max-width:390px;

    margin:0;
  }

  /* STRIP */

  .mcs-banner__strip {

    grid-template-columns:
      1fr 1fr;
  }


  .mcs-banner__strip > div {

    min-height:62px;

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


  .mcs-banner__strip > div:nth-child(even) {

    border-right:0;
  }


  .mcs-banner__strip > div:nth-child(n+3) {

    border-bottom:0;
  }


  .mcs-banner__bottom {

    display:none;
  }

}



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

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

  .mcs-banner__background img,
  .mcs-banner__button {

    transition:none !important;
  }

}