/* ===== section.html ===== */
/* =========================================================
   CAREERS PAGE
========================================================= */

.mcs-careers {

  --orange:var(--mcs-orange);
  --black:var(--mcs-black);
  --offwhite:var(--mcs-white);
  --line-dark:var(--mcs-line);
  --line-light:var(--mcs-line-onlight);

  position:relative;

  width:100%;

    font-family:inherit;
}



/* =========================================================
   HERO

   Same pattern as the other heroes: a full-screen photo behind the
   copy, exactly one screen tall (taller only if the copy needs it),
   the copy centred vertically with spacing that scales with the screen
   height. Cropped to fit, so the whole photo shows on portrait screens
   and a band of it on landscape ones.
========================================================= */

.mcs-careers-hero {

  position:relative;

  min-height:var(--mcs-hero-min);

  display:flex;
  flex-direction:column;

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

  background:var(--black);
  color:#fff;
}


.mcs-careers-hero__image {

  position:absolute;
  inset:0;

  overflow:hidden;
}


.mcs-careers-hero__image img {

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:50% 38%;
}


/* On landscape screens the photo is flipped so the person ends up on the
   right, clear of the copy on the left. */
@media (orientation:landscape) {

  .mcs-careers-hero__image img {

    transform:scaleX(-1);

    /* a band across the horizon, the container and the person's shoulders */
    object-position:50% 53%;
  }
}


.mcs-careers-hero__image-shade {

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(5,5,5,.74) 0%,
      rgba(5,5,5,.46) 36%,
      rgba(5,5,5,.14) 66%,
      rgba(5,5,5,.02) 100%
    ),
    linear-gradient(
      0deg,
      rgba(5,5,5,.62) 0%,
      rgba(5,5,5,.12) 38%,
      rgba(5,5,5,0) 66%
    ),
    linear-gradient(
      180deg,
      rgba(5,5,5,.44) 0%,
      rgba(5,5,5,.18) 38%,
      rgba(5,5,5,0) 62%
    );
}


.mcs-careers-hero__content {

  position:relative;
  z-index:2;

  flex:1;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:
    calc(var(--mcs-header-h) + var(--mcs-hero-pad-top))
    var(--mcs-section-pad-x)
    var(--mcs-hero-pad-bottom);
}


/* On portrait screens the person fills the lower half of the photo, so the
   copy sits a little higher, clear of them. */
@media (orientation:portrait) {

  .mcs-careers-hero__content {

    padding-bottom:calc(var(--mcs-hero-pad-bottom) + 14svh);
  }
}


.mcs-careers-hero__copy {

  display:flex;
  flex-direction:column;
  align-items:flex-start;

  max-width:1000px;
}


.mcs-careers-hero__kicker {

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

  color:var(--orange);
  font-size:var(--mcs-text-micro);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
}


.mcs-careers-hero__title {

  margin:0 !important;

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


.mcs-careers-hero__copy-text {

  max-width:clamp(420px, 34vw, 640px);

  margin:var(--mcs-hero-gap-md) 0 0 !important;

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


.mcs-careers-hero__buttons {

  display:flex;
  flex-wrap:wrap;
  gap:14px;

  margin-top:var(--mcs-hero-gap-lg);
}



/* =========================================================
   WORK SECTION
========================================================= */

.mcs-careers-work {

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

  box-sizing:border-box;

  background:var(--offwhite);
  color:var(--black);
}


.mcs-careers-work__top {

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;

  padding-bottom:14px;
  border-bottom:1px solid var(--line-light);
}


.mcs-careers-work__meta {

  color:rgba(0,0,0,.28);
  font-size:var(--mcs-text-nano);
  font-weight:600;
  letter-spacing:.14em;
}


.mcs-careers-work__intro {

  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.55fr);
  gap:clamp(40px,7vw,120px);
  align-items:end;

  padding:
    clamp(46px,4.5vw,66px)
    0
    clamp(48px,4.5vw,64px);
}


.mcs-careers-work__kicker {

  margin-bottom:14px;

  color:var(--orange);
  font-size:var(--mcs-text-micro);
  font-weight:600;
  letter-spacing:.18em;
}


.mcs-careers-work__title {

  margin:0 !important;

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


.mcs-careers-work__intro-text {

  max-width:430px;
  margin:0 !important;

  color:rgba(0,0,0,.54);
  line-height:1.7;
}


/* =========================================================
   WORK AREAS — click-only accordion (light section)
========================================================= */

.mcs-careers-item {

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

  /* the body title steps down through the shared token, like the other
     accordions' titles */
  --mcs-text-title:clamp(22px,2.3vw,34px);
}


/* no divider above the first row (and none below the last) */
.mcs-careers-item--first {

  border-top:0;
}


.mcs-careers-item__head {

  width:100%;

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

  padding:clamp(16px,2vw,24px) 0;

  border:0;
  background:transparent;

  text-align:left;

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


.mcs-careers-item__head:focus-visible {

  outline:2px solid var(--orange);
  outline-offset:6px;
}


/* same head as the other accordions: small number + label, muted until
   the row is open, then orange */
.mcs-careers-item__number {

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

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

  transition:color .3s ease;
}


.mcs-careers-item__name {

  flex:1;
  min-width:0;

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

  transition:color .3s ease;
}


.mcs-careers-item__head:hover .mcs-careers-item__name {

  color:var(--black);
}


.mcs-careers-item.is-open .mcs-careers-item__number,
.mcs-careers-item.is-open .mcs-careers-item__name {

  color:var(--orange);
}


/* plus -> minus */
.mcs-careers-item__icon {

  position:relative;

  width:18px;
  height:18px;
}


.mcs-careers-item__icon::before,
.mcs-careers-item__icon::after {

  content:"";

  position:absolute;
  left:0;
  top:50%;

  width:100%;
  height:2px;
  margin-top:-1px;

  background:var(--orange);

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


.mcs-careers-item__icon::after {

  transform:rotate(90deg);
}


.mcs-careers-item.is-open .mcs-careers-item__icon::after {

  transform:rotate(0deg);
}


/* body: grid-template-rows 0fr -> 1fr collapse. The space below the
   content is margin on .mcs-careers-item__content, not padding here, so
   it collapses with the row. */
.mcs-careers-item__body {

  display:grid;
  grid-template-rows:0fr;

  visibility:hidden;

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


.mcs-careers-item.is-open .mcs-careers-item__body {

  grid-template-rows:1fr;

  visibility:visible;

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


.mcs-careers-item__inner {

  min-height:0;
  overflow:hidden;

  /* the open body sits on a light gray panel */
  background:var(--mcs-line-onlight-faint);
}


.mcs-careers-item__content {

  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,100px);

  /* panel padding; the left edge lines up with the discipline name */
  padding:
    clamp(24px,2.6vw,36px)
    clamp(20px,2.4vw,36px)
    clamp(28px,3vw,44px)
    58px;

  opacity:0;

  transition:opacity .3s ease;
}


.mcs-careers-item.is-open .mcs-careers-item__content {

  opacity:1;

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


.mcs-careers-item__title {

  margin:0;

  color:var(--black);
}


.mcs-careers-item__text {

  max-width:520px;

  margin:0;

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


.mcs-careers-item__list {

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 24px;

  margin:clamp(20px,2.2vw,30px) 0 0;
  padding:0;

  list-style:none;
}


.mcs-careers-item__list-item {

  position:relative;

  padding:12px 0 12px 18px;

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

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

  font-size:var(--mcs-text-body-sm);
  font-weight:500;
  line-height:1.3;
}


.mcs-careers-item__list-item::before {

  content:"";

  position:absolute;
  left:0;
  top:50%;

  width:7px;
  height:1px;

  background:var(--orange);
}



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

@media (max-width:1050px) {



  .mcs-careers-item__content {

    grid-template-columns:1fr;
    gap:24px;
  }

  .mcs-careers-work__intro {

    grid-template-columns:1fr;
  }

}



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

@media (max-width:767px) {


  .mcs-careers-work__meta {

    display:none;
  }







  /* WORK */

  .mcs-careers-work {

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

  .mcs-careers-work__intro {

    grid-template-columns:1fr;
    gap:28px;

    padding:
      42px 0 44px;
  }

  .mcs-careers-item__content {

    padding:22px 18px 26px;
  }

  .mcs-careers-item__list {

    grid-template-columns:1fr;
  }


}