/* ==========================================================================
   MXW — layout and sections
   Built against the 1440 design. Tokens live in tokens.css.
   ========================================================================== */

/* ---- Skip link ----------------------------------------------------------- */

.mxw-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--mxw-space-3) var(--mxw-space-5);
  background: var(--mxw-lime);
  color: var(--mxw-navy-ink);
  border-radius: 0 0 var(--mxw-radius-sm) 0;
}
.mxw-skip-link:focus {
  left: 0;
}

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--mxw-lime);
  outline-offset: 3px;
}

/* ==========================================================================
   Site header
   ========================================================================== */

.mxw-site-header {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
}

/* Full width on the same 50px gutters as the hero, so the logo lines up with
   the eyebrow and headline beneath it. */
.mxw-site-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mxw-space-6);
  width: 100%;
  padding: 36px 50px 0;
}

@media (max-width: 640px) {
  .mxw-site-header__inner {
    padding-inline: 24px;
  }
}

.mxw-site-header__logo {
  display: block;
  flex: none;
}
.mxw-site-header__logo svg {
  width: 163px;
  height: auto;
}

/* ---- Nav pill ------------------------------------------------------------ */

.mxw-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  margin: 0;
  /* Links are 22px line-height + 4px padding each side = 30px; 4px here on
     each side keeps the pill at the designed 38px. */
  padding: 4px 34px;
  list-style: none;
}

.mxw-nav__list .mxw-nav-link {
  display: inline-block;
  padding-block: 4px;
}

.mxw-nav__item {
  white-space: nowrap;
}

.mxw-nav__toggle {
  display: none;
}

/* Property pages carry the logo only, as designed. */
.single-mxw_property .mxw-nav {
  display: none;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.mxw-main {
  position: relative;
}

.mxw-section {
  padding-block: clamp(56px, 6vw, 85px);
}

.mxw-section__label {
  margin-bottom: var(--mxw-space-10);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.mxw-hero {
  position: relative;
  display: flex;
  /* Full viewport. svh is the stable small-viewport unit, so the hero does not
     jump when a mobile browser's address bar collapses. min-height, not height,
     so the hero still grows if the copy needs more room than the screen. */
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.mxw-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* The design's flat 41% navy assumes a dark still. Real photography is often
   much brighter, so a soft scrim sits behind the text column to hold contrast
   without changing the look where the image is already dark. */
.mxw-hero__media::after,
.mxw-property-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(1, 1, 10, 0.55) 0%, rgba(1, 1, 10, 0.28) 42%, rgba(1, 1, 10, 0) 72%),
    linear-gradient(to bottom, rgba(1, 1, 10, 0.30) 0%, rgba(1, 1, 10, 0) 28%);
}

.mxw-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Full width: no container cap, 50px gutters. */
.mxw-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  /* 255/880 in the design = 29% of the hero height. */
  padding: clamp(110px, 29vh, 255px) 50px 50px;
}

@media (max-width: 640px) {
  .mxw-hero__inner {
    padding-inline: 24px;
  }
}

.mxw-hero__headline {
  margin-top: 31px;
  max-width: 700px;
}

.mxw-hero__intro {
  margin-top: clamp(28px, 3.7vw, 54px);
  max-width: 481px;
}

.mxw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mxw-space-4);
  margin-top: clamp(32px, 4.6vw, 66px);
}

.mxw-hero__tagline {
  /* Pinned to the foot of the hero; the padding is the minimum gap so it never
     collides with the buttons on a short viewport. */
  margin-top: auto;
  padding-top: clamp(32px, 8vh, 120px);
}

/* ==========================================================================
   What we do
   ========================================================================== */

.mxw-services__mark {
  margin-bottom: var(--mxw-space-6);
}
.mxw-services__mark svg {
  width: 38px;
  height: auto;
}

.mxw-services__grid {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mxw-service-card {
  display: flex;
  flex-direction: column;
  min-height: 291px;
}

.mxw-service-card__title {
  margin-top: 82px;
}

.mxw-service-card__copy {
  margin-top: var(--mxw-space-8);
}

.mxw-services__statement {
  max-width: 945px;
  margin: clamp(48px, 5.9vw, 80px) auto 0;
  text-align: center;
}

/* ==========================================================================
   Our properties
   ========================================================================== */

.mxw-section--properties {
  padding-block: clamp(40px, 4vw, 51px) clamp(48px, 5vw, 66px);
}

/* ==========================================================================
   Who we are
   ========================================================================== */

.mxw-who {
  background-color: var(--mxw-surface-tint);
}

.mxw-who__partners {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 2.9vw, 42px) var(--mxw-space-9);
}

.mxw-partner {
  display: grid;
  grid-template-columns: minmax(0, 322px) minmax(0, 1fr);
  gap: var(--mxw-space-7);
  /* Text block sits centred against the portrait, as designed. */
  align-items: center;
}

.mxw-partner__photo {
  width: 100%;
  max-width: 322px;
  aspect-ratio: 1 / 1;
}

.mxw-partner__body {
  padding-top: 0;
}

.mxw-partner__name {
  display: flex;
  align-items: center;
  gap: var(--mxw-space-2);
}

.mxw-partner__social svg {
  width: 15px;
  height: 15px;
  display: block;
}

.mxw-partner__bio {
  display: flex;
  flex-direction: column;
  gap: var(--mxw-space-4);
  margin-top: var(--mxw-space-3);
}

/* With JS the column shows the opening paragraph and the rest moves to the
   dialog. Without it the full bio stays inline and the button never appears. */
.has-js .mxw-partner__bio p:not(:first-child) {
  display: none;
}

.mxw-partner__more {
  display: none;
  margin-top: var(--mxw-space-5);
}
.has-js .mxw-partner__more {
  display: inline-flex;
}

/* ---- Biography dialog ---------------------------------------------------- */

.mxw-bio-modal {
  width: min(1120px, calc(100vw - 64px));
  max-height: min(88vh, 940px);
  padding: 0;
  border: 0;
  border-radius: var(--mxw-radius-md);
  background: var(--mxw-navy);
  color: var(--mxw-text);
  overflow: hidden;
}

.mxw-bio-modal::backdrop {
  background: rgba(1, 1, 10, 0.76);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mxw-bio-modal__panel:focus {
  outline: none;
}

.mxw-bio-modal__panel {
  position: relative;
  max-height: inherit;
  padding: clamp(28px, 4vw, 60px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Portrait left, everything else right, the two centred against each other. */
.mxw-bio-modal__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(28px, 4.2vw, 62px);
  align-items: center;
}

.mxw-bio-modal__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  border-radius: var(--mxw-radius-md);
}

.mxw-bio-modal__name {
  margin: 0;
  font-family: var(--mxw-font-display);
  font-weight: var(--mxw-fw-d-regular);
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--mxw-text-display);
}

.mxw-bio-modal__role {
  margin: 2px 0 clamp(18px, 2vw, 28px);
  font-family: var(--mxw-font-display);
  font-weight: var(--mxw-fw-d-regular);
  font-size: clamp(21px, 2.3vw, 33px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--mxw-lime);
}

.mxw-bio-modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--mxw-space-4);
}

.mxw-bio-modal__close {
  position: absolute;
  top: clamp(16px, 2vw, 26px);
  right: clamp(16px, 2vw, 26px);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.mxw-bio-modal__close:hover,
.mxw-bio-modal__close:focus-visible {
  background: var(--mxw-lime);
  color: var(--mxw-navy-ink);
}

@media (max-width: 760px) {
  .mxw-bio-modal__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mxw-space-6);
  }
  .mxw-bio-modal__photo {
    max-width: 260px;
    aspect-ratio: 1 / 1;
  }
  .mxw-bio-modal__name {
    padding-right: 52px;
  }
}

/* Stops the page scrolling behind the dialog. */
body.mxw-modal-open {
  overflow: hidden;
}

.mxw-who__principals-label {
  margin-block: clamp(48px, 5.4vw, 72px) var(--mxw-space-9);
  text-align: center;
}

.mxw-who__values {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mxw-value-card {
  display: flex;
  flex-direction: column;
  min-height: 303px;
}

.mxw-value-card__icon {
  display: block;
  height: 40px;
}
.mxw-value-card__icon svg {
  width: auto;
  height: 38px;
  color: var(--mxw-lime);
}

.mxw-value-card__title {
  margin-top: 40px;
}

.mxw-value-card__copy {
  margin-top: var(--mxw-space-3);
}

.mxw-who__tagline {
  margin-top: clamp(48px, 5.4vw, 72px);
  text-align: center;
}

/* ==========================================================================
   Track record
   ========================================================================== */

/* Runs edge to edge, so no radius and no container. */
.mxw-track__panel {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

/* The page background behind this section is a left-to-right gradient, so no
   flat colour can be painted over the photo to match it. The photo is masked
   away at its edges instead, letting the real background show through — which
   blends against whatever colour happens to be there.

   Only the top is faded. The section above is flat and dark, so the still has
   to emerge very gradually or the join reads as an edge. The bottom is a clean
   hard cut — the mask stays fully opaque all the way to 100%.

   There is no overlay element over the scroller. Contrast for the logos comes
   from dimming the photograph itself, so nothing is layered on top of them. */
.mxw-track__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  filter: brightness(0.58) saturate(0.85);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 14%,
    rgba(0, 0, 0, 0.55) 28%,
    rgba(0, 0, 0, 0.88) 40%,
    #000 50%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 14%,
    rgba(0, 0, 0, 0.55) 28%,
    rgba(0, 0, 0, 0.88) 40%,
    #000 50%,
    #000 100%
  );
}

/* Generous vertical room above and below the two logo lines. It also gives the
   masked edges of the still more distance to fade over, so the join with the
   page background is softer. */
/* Asymmetric on purpose. The top needs the extra depth for the still to emerge
   gradually out of the flat section above it; the bottom fades over a shorter
   distance, so matching the top there would just leave dead photograph. */
.mxw-track__content {
  padding: clamp(120px, 14vw, 200px) 50px clamp(80px, 9vw, 130px);
}

@media (max-width: 640px) {
  .mxw-track__content {
    padding: clamp(96px, 22vw, 150px) 0 clamp(64px, 14vw, 96px);
  }
}

.mxw-track__label {
  margin-bottom: clamp(44px, 5.5vw, 78px);
  text-align: center;
}

/* ---- Rotating logo lines ------------------------------------------------- */

.mxw-marquee {
  --mxw-marquee-gap: clamp(40px, 5vw, 76px);
  --mxw-marquee-speed: 60s;

  display: flex;
  flex-direction: column;
  /* Space between the two rotating lines. */
  gap: clamp(40px, 5.5vw, 78px);
}

.mxw-marquee__row {
  display: flex;
  width: 100%;
  overflow: hidden;
  /* Fade the logos out at both edges instead of cutting them dead. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.mxw-marquee__track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--mxw-marquee-gap);
  margin: 0;
  padding: 0 0 0 var(--mxw-marquee-gap);
  list-style: none;
  will-change: transform;
  animation: mxw-marquee var(--mxw-marquee-speed) linear infinite;
}

.mxw-marquee__row--rev .mxw-marquee__track {
  animation-direction: reverse;
}

@keyframes mxw-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Let people stop it to read a logo. */
.mxw-marquee:hover .mxw-marquee__track,
.mxw-marquee:focus-within .mxw-marquee__track {
  animation-play-state: paused;
}

.mxw-marquee__item {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(92px, 8.6vw, 132px);
}

.mxw-marquee__item svg {
  width: 100%;
  height: auto;
  max-height: 38px;
}

@media (prefers-reduced-motion: reduce) {
  .mxw-marquee__row {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .mxw-marquee__track {
    animation: none;
  }
  /* No motion means no need for the second copy. */
  .mxw-marquee__track[aria-hidden="true"] {
    display: none;
  }
}

/* ==========================================================================
   Property page
   ========================================================================== */

.mxw-property-hero {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.mxw-property-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.mxw-property-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mxw-property-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: clamp(110px, 29vh, 255px) 50px 50px;
}

@media (max-width: 640px) {
  .mxw-property-hero__inner {
    padding-inline: 24px;
  }
}

.mxw-property-hero__headline {
  margin-top: 31px;
  /* Holds the wrap shown in the design - "...best in class" then
     "distribution / industrial facilities". The window is narrow: line two
     needs ~790px, and anything over ~940px lets "distribution /" ride up onto
     line one. 860px sits between the two. */
  max-width: 860px;
}

.mxw-property-hero__intro {
  margin-top: clamp(28px, 3.7vw, 54px);
  max-width: 534px;
}

.mxw-property-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mxw-space-4);
  margin-top: clamp(32px, 4.6vw, 66px);
}

.mxw-property-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 76px);
  margin: auto 0 0;
  padding: clamp(32px, 8vh, 125px) 0 0;
  list-style: none;
}

.mxw-property__back {
  padding-block: var(--mxw-space-11);
}

.mxw-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--mxw-space-3);
  color: var(--mxw-text);
}
.mxw-back-link:hover,
.mxw-back-link:focus-visible {
  color: var(--mxw-lime);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.mxw-footer {
  padding-block: clamp(48px, 5.2vw, 75px) clamp(32px, 3vw, 42px);
  border-top: 1px solid var(--mxw-rule);
}

.mxw-footer__inner {
  width: 100%;
  max-width: calc(var(--mxw-content-max) + var(--mxw-page-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--mxw-page-pad);
}

.mxw-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 316px) minmax(0, 1fr) minmax(0, 270px) minmax(0, 270px);
  gap: var(--mxw-space-6);
  align-items: start;
}

.mxw-footer__brand svg {
  width: 316px;
  max-width: 100%;
  height: auto;
}

.mxw-footer__accreditation {
  align-self: center;
  justify-self: center;
  padding-top: 60px;
}
.mxw-footer__accreditation svg {
  width: 138px;
  height: auto;
}

.mxw-footer__name {
  display: flex;
  flex-direction: column;
}

.mxw-footer__details {
  display: flex;
  flex-direction: column;
  margin-top: var(--mxw-space-4);
}
.mxw-footer__details a:hover,
.mxw-footer__details a:focus-visible {
  color: var(--mxw-lime);
}

.mxw-footer__rule {
  margin-block: clamp(32px, 4.6vw, 66px) var(--mxw-space-4);
}

.mxw-footer__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--mxw-space-6);
  align-items: center;
}

.mxw-footer__social svg {
  width: 30px;
  height: 30px;
  display: block;
}

.mxw-footer__address {
  justify-self: end;
  text-align: right;
}

/* ==========================================================================
   Basic pages (archive / 404 / search fallback)
   ========================================================================== */

.mxw-main--basic {
  padding-top: 140px;
}

.mxw-entry + .mxw-entry {
  margin-top: var(--mxw-space-8);
  padding-top: var(--mxw-space-8);
  border-top: 1px solid var(--mxw-rule);
}

/* ==========================================================================
   Tap targets
   ========================================================================== */

/* The icon links are 15px and 30px, well under the 24px WCAG minimum and far
   under a comfortable 44px finger target. A centred pseudo-element grows the
   hit area at every width without moving anything on screen. */
.mxw-partner__social,
.mxw-footer__social {
  position: relative;
}

.mxw-partner__social::after,
.mxw-footer__social::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* Text links sit at 22px, two under the 24px minimum. line-height rather than
   padding, so the footer blocks keep the spacing the design specifies. */
.mxw-footer__details a,
.mxw-properties__more,
.mxw-properties__clear,
.mxw-panel__side-link {
  display: inline-block;
  line-height: 24px;
}

/* Touch-sized screens get real padding, where the extra spacing is welcome. */
@media (max-width: 900px) {
  .mxw-footer__details a {
    display: inline-block;
    padding-block: 5px;
  }

  .mxw-properties__more,
  .mxw-properties__clear,
  .mxw-back-link {
    padding-block: 7px;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
  .mxw-partner {
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: var(--mxw-space-5);
  }
}

@media (max-width: 1024px) {
  .mxw-who__partners {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 4vw, 48px);
  }
  .mxw-partner {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  }
  .mxw-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mxw-space-9) var(--mxw-space-6);
  }
  .mxw-footer__accreditation {
    justify-self: start;
    padding-top: 0;
  }
  .mxw-service-card__title {
    margin-top: var(--mxw-space-9);
  }
}

@media (max-width: 900px) {
  /* Nav collapses into a toggle inside the pill. */
  .mxw-nav {
    position: relative;
  }
  .mxw-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--mxw-space-2);
    padding: 9px 18px;
    background: var(--mxw-surface-nav);
    backdrop-filter: blur(var(--mxw-blur-nav));
    -webkit-backdrop-filter: blur(var(--mxw-blur-nav));
    border: 0;
    border-radius: var(--mxw-radius-sm);
    font-family: var(--mxw-font-text);
    font-size: var(--mxw-fs-nav);
    font-weight: var(--mxw-fw-t-medium);
    letter-spacing: var(--mxw-ls-nav);
    text-transform: uppercase;
    color: var(--mxw-text-display);
    cursor: pointer;
  }
  .mxw-nav__toggle-bar {
    position: relative;
    width: 16px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
  }
  .mxw-nav__toggle[aria-expanded="true"] .mxw-nav__toggle-bar {
    box-shadow: none;
    transform: rotate(45deg);
  }
  .mxw-nav__toggle[aria-expanded="true"] .mxw-nav__toggle-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    transform: rotate(90deg);
  }

  .mxw-nav__list {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mxw-space-4);
    min-width: 220px;
    padding: var(--mxw-space-5) var(--mxw-space-6);
  }
  .mxw-nav__list[hidden] {
    display: none;
  }

  .mxw-site-header__logo svg {
    width: 128px;
  }

  .mxw-footer__bottom {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: var(--mxw-space-4);
  }
  .mxw-footer__address {
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .mxw-partner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .mxw-partner__photo {
    width: 100%;
    height: auto;
    max-width: 322px;
  }
  .mxw-footer__top {
    grid-template-columns: minmax(0, 1fr);
  }
  .mxw-service-card,
  .mxw-value-card {
    min-height: 0;
  }
  .mxw-property-hero__meta {
    gap: var(--mxw-space-3);
  }
}

/* Short viewports — laptops at 1366x768, phones in landscape. Without this the
   64px display type alone is taller than the room available and the hero grows
   past the fold, which defeats the point of sizing it to the viewport. */
@media (max-height: 700px) {
  .mxw-hero__inner,
  .mxw-property-hero__inner {
    padding-top: clamp(80px, 20vh, 255px);
  }

  .mxw-hero__headline,
  .mxw-property-hero__headline {
    font-size: clamp(38px, 5.6vh, 64px);
    line-height: 1.1;
  }

  .mxw-hero__intro,
  .mxw-property-hero__intro {
    margin-top: clamp(18px, 3vh, 54px);
  }

  .mxw-hero__actions,
  .mxw-property-hero__actions {
    margin-top: clamp(22px, 3.5vh, 66px);
  }

  .mxw-hero__tagline {
    padding-top: clamp(20px, 5vh, 120px);
  }

  .mxw-property-hero__meta {
    padding-top: clamp(20px, 5vh, 125px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mxw-hero__video {
    display: none;
  }
}