/* ===================== footer ===================== */




/* =========================================================
   MCS FOOTER
========================================================= */

.mcs-footer {

  position: relative;

  width: 100%;

  margin: 0;

  padding:
    clamp(55px, 5vw, 78px)
    var(--mcs-section-pad-x)
    25px;

  box-sizing: border-box;

  overflow: hidden;

  background:
    var(--mcs-black);

  color:
    var(--mcs-white);

  font-family:
    inherit;
}



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

.mcs-grid-bg {

  -webkit-mask-image:
    linear-gradient(
      180deg,
      black,
      rgba(0,0,0,.35) 55%,
      transparent 92%
    );

  mask-image:
    linear-gradient(
      180deg,
      black,
      rgba(0,0,0,.35) 55%,
      transparent 92%
    );
}



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

.mcs-footer__cta {

  position:
    relative;

  z-index:
    2;

  max-width:
    1800px;

  margin:
    0 auto;

  padding-bottom:
    clamp(48px, 5vw, 70px);

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



/* META */

.mcs-footer__meta {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding-bottom:
    14px;

  margin-bottom:
    clamp(32px, 3.5vw, 48px);

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


.mcs-footer__meta .mcs-label {

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



.mcs-footer__system {

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

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

  font-weight:
    600;

  letter-spacing:
    .16em;
}



/* =========================================================
   CTA PANEL — orange highlight block
========================================================= */

.mcs-footer__cta-panel {

  position:
    relative;

  overflow:
    hidden;

  padding:
    clamp(36px, 4vw, 56px)
    clamp(28px, 4vw, 48px);

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



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

.mcs-footer__cta-row {

  position:
    relative;

  z-index:
    1;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(250px, 360px);

  align-items:
    end;

  gap:
    clamp(40px, 7vw, 120px);
}



.mcs-footer__cta-title {

  margin:
    0 !important;

  max-width:
    920px;

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


/* button needs its own contrast on the orange panel —
   the default .mcs-btn treatment assumes a dark background */

.mcs-footer__cta-panel .mcs-btn {

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

  background:
    transparent;

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


.mcs-footer__cta-panel .mcs-btn strong {

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


.mcs-footer__cta-panel .mcs-btn:hover {

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

  background:
    var(--mcs-black);

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


.mcs-footer__cta-panel .mcs-btn:hover strong {

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



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

.mcs-footer__main {

  position:
    relative;

  z-index:
    2;

  max-width:
    1800px;

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    minmax(230px, 1.15fr)
    minmax(140px, .55fr)
    minmax(210px, .8fr)
    minmax(200px, .75fr);

  gap:
    clamp(30px, 4vw, 65px);

  padding:
    clamp(45px, 4.5vw, 65px)
    0;
}



/* =========================================================
   ACTUAL MCS LOGO
========================================================= */

.mcs-footer__logo-slot {

  display:
    inline-flex;

  width:
    fit-content;

  text-decoration:
    none !important;
}



.mcs-footer__logo-slot img {

  display:
    block;

  width:
    clamp(135px, 11vw, 185px) !important;

  max-width:
    185px !important;

  height:
    auto !important;

  object-fit:
    contain;

  opacity:
    .96;

  transition:
    opacity .25s ease;
}



.mcs-footer__logo-slot:hover img {

  opacity:
    .7;
}



/* =========================================================
   BRAND
========================================================= */

.mcs-footer__brand-copy {

  max-width:
    320px;

  margin:
    24px 0 0 !important;

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



.mcs-footer__brand .mcs-label {
  margin-top: 26px;
}



/* =========================================================
   COLUMN LABEL
========================================================= */

.mcs-footer__label {

  padding-bottom:
    12px;

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

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



/* =========================================================
   NAV
========================================================= */

.mcs-footer__links {

  display:
    flex;

  flex-direction:
    column;
}



.mcs-footer__links a {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    9px 0;

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

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

  font-weight:
    400;

  line-height:
    1.2;

  text-decoration:
    none !important;

  transition:
    color .25s ease,
    padding .3s cubic-bezier(.16,1,.3,1);
}



.mcs-footer__links a strong {

  color:
    var(--mcs-orange);

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

  font-weight:
    400;

  opacity:
    0;

  transition:
    opacity .2s ease;
}



.mcs-footer__links a:hover {

  padding-left:
    5px;

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



.mcs-footer__links a:hover strong {

  opacity:
    1;
}



/* =========================================================
   LOCATIONS
========================================================= */

.mcs-footer__locations {

  display:
    flex;

  flex-direction:
    column;
}



.mcs-footer__locations > a {

  display:
    block;

  padding:
    9px 0;

  color:
    inherit !important;

  text-decoration:
    none !important;

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



.mcs-footer__locations strong {

  display:
    block;

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

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

  font-weight:
    400;

  line-height:
    1.2;

  transition:
    color .25s ease;
}



.mcs-footer__locations small {

  display:
    block;

  margin-top:
    4px;

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

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

  font-weight:
    400;

  line-height:
    1.2;
}



.mcs-footer__locations > a:hover {

  padding-left:
    4px;
}


.mcs-footer__locations > a:hover strong {

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



/* =========================================================
   CONTACT
========================================================= */

.mcs-footer__contact {

  padding:
    9px 0;
}



.mcs-footer__contact > span {

  display:
    block;

  margin-bottom:
    7px;

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

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

  font-weight:
    600;

  letter-spacing:
    .14em;
}



.mcs-footer__contact a {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

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

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

  text-decoration:
    none !important;

  transition:
    color .25s ease;
}



.mcs-footer__contact a strong {

  color:
    var(--mcs-orange);

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

  font-weight:
    400;
}



.mcs-footer__contact a:hover {

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


.mcs-footer__linkedin {

  width: 100%;

  min-width: 0;

  margin-top: 22px;

  box-sizing: border-box;

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

  background:
    var(--mcs-orange);

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


.mcs-footer__linkedin strong {

  color:
    var(--mcs-black);

  transition: none;
}


.mcs-footer__linkedin:hover {

  border-color:
    #fff;

  background:
    #fff;

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


.mcs-footer__linkedin:hover strong {

  color:
    var(--mcs-orange);

  transform: none;
}



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

.mcs-footer__bottom {

  position:
    relative;

  z-index:
    2;

  max-width:
    1800px;

  margin:
    0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    25px;

  padding-top:
    18px;

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

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

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

  font-weight:
    600;

  line-height:
    1;

  letter-spacing:
    .13em;
}



.mcs-footer__bottom > div {

  display:
    flex;

  align-items:
    center;

  gap:
    24px;
}



.mcs-footer__bottom a {

  color:
    var(--mcs-ink-30) !important;

  text-decoration:
    none !important;

  transition:
    color .25s ease;
}



.mcs-footer__bottom a:hover {

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



.mcs-footer__top {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  /* the text is 10px tall; padding grows the tap target to 38px and the
     negative margin cancels it out so the footer bar doesn't move */
  padding:
    14px 0;

  margin:
    -14px 0;
}



.mcs-footer__top span {

  color:
    var(--mcs-orange);

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



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

@media (max-width: 1000px) {

  /* The heading's longest word is wider than the column the button
     leaves it, so the button drops below the heading. */
  .mcs-footer__cta-row {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 32px;
  }

  .mcs-footer__main {

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


  .mcs-footer__brand {

    grid-column:
      1 / -1;

    padding-bottom:
      10px;
  }

}



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

@media (max-width: 767px) {

  .mcs-footer {

    padding:
      55px var(--mcs-section-pad-x) 22px;
  }


  .mcs-footer__system {

    display:
      none;
  }


  .mcs-footer__cta .mcs-btn {

    width:
      100%;

    box-sizing:
      border-box;
  }


  .mcs-footer__main {

    grid-template-columns:
      1fr;

    gap:
      37px;

    padding:
      50px 0;
  }


  .mcs-footer__brand {

    grid-column:
      auto;
  }


  .mcs-footer__logo-slot img {

    width:
      155px !important;
  }


  .mcs-footer__bottom {

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      15px;
  }


  .mcs-footer__bottom > div {

    flex-wrap:
      wrap;

    gap:
      14px 20px;
  }

}



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

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

  .mcs-footer *,
  .mcs-footer *::before,
  .mcs-footer *::after {

    transition:
      none !important;
  }

}