/*
  Site header and full-screen menu.
  The header sits above the menu, so the logo and toggle stay visible while it's open.
  .menu-open on <html> and .is-sub-open on .menu hold the final states, so everything still works
  without Motion. js/header.js animates between them when Motion is available.
*/

/* Always visible. js/header.js sets the colour for the section beneath it, Light or Dark. */
.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  color: var(--color-light);
}

.site-header .btn {
  color: inherit;
}

/* Hiding the scrollbar while the menu is open mustn't shift the page or header. */
.menu-open .site-header {
  right: var(--scrollbar, 0px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 29px 16px;
}

.site-header__logo {
  display: block;
  flex: none;
  width: clamp(10.625rem, 9.26rem + 5.8vw, 14.75rem);
  color: inherit;
}

.site-header__logo svg {
  display: block;
  width: 100%;
  height: auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.75rem);
}

/* Two lines from Figma, 94 x 22 with the lower one shorter. They cross into an X when open. */
.menu-toggle {
  position: relative;
  display: block;
  flex: none;
  width: 94px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.menu-toggle::after {
  content: "";
  position: absolute;
  inset: -12px 0;
}

.menu-toggle:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 12px;
}

.menu-toggle__line {
  position: absolute;
  right: 0;
  display: block;
  height: 2px;
  background: currentColor;
}

.menu-toggle__line--top {
  top: 0;
  width: 100%;
}

.menu-toggle__line--bottom {
  bottom: 0;
  width: 70.2%;
}

/* The X without Motion. With Motion, js/header.js animates the lines there itself. */
.menu-open:not(.motion-on) .menu-toggle__line {
  width: 40px;
}

.menu-open:not(.motion-on) .menu-toggle__line--top {
  transform: translateY(10px) rotate(45deg);
}

.menu-open:not(.motion-on) .menu-toggle__line--bottom {
  transform: translateY(-10px) rotate(-45deg);
}

.menu-open {
  padding-right: var(--scrollbar, 0px);
  overflow: hidden;
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 10;
  padding-right: var(--scrollbar, 0px);
  visibility: hidden;
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-light);
}

.menu-open .menu {
  visibility: visible;
}

.menu__inner {
  display: grid;
  grid-template-columns: 4fr 6fr;
  height: 100%;
}

/* The list stays centred on the screen, in line with the services, with the contact row pinned below. */
.menu__main {
  display: grid;
  grid-template-rows: minmax(72px, 1fr) auto minmax(72px, 1fr);
  min-height: 0;
  padding-block: 32px;
  padding-right: clamp(1.5rem, 4vw, 4rem);
  overflow-y: auto;
  border-right: 1px solid color-mix(in srgb, var(--color-light) 15%, transparent);
}

.menu__list,
.menu__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__list {
  grid-row: 2;
}

.menu__list li {
  border-bottom: 1px solid color-mix(in srgb, var(--color-light) 15%, transparent);
}

.menu__list li:last-child {
  border-bottom: 0;
}

.menu__link {
  display: flex;
  align-items: baseline;
  gap: clamp(1.25rem, 2vw, 2rem);
  padding-block: clamp(0.875rem, 2vh, 1.25rem);
  color: inherit;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  font-weight: var(--weight-action);
  line-height: 1.2;
  text-decoration: none;
}

.menu__number {
  flex: none;
  width: 1.6em;
  font-weight: var(--weight-body);
}

/* The text rises out of its own mask, like the hero heading. */
.menu__mask {
  position: relative;
  display: block;
  overflow: hidden;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}

.menu__rise {
  display: block;
}

/* Hover underline for the page links and contact links. It waits just off to the left at rest. */
.menu__link .menu__mask::after,
.menu__contact a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: translateX(-101%);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.menu__link:focus-visible .menu__mask::after,
.menu__contact a:focus-visible::after {
  transform: translateX(0);
}

@media (hover: hover) {
  .menu__link:hover .menu__mask::after,
  .menu__contact a:hover::after {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu__link .menu__mask::after,
  .menu__contact a::after {
    transition: none;
  }
}

.menu__contact {
  grid-row: 3;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.menu__contact a {
  position: relative;
  display: block;
  padding-bottom: 2px;
  overflow: hidden;
  color: inherit;
  font-weight: var(--weight-action);
  text-decoration: none;
}

/* The three words stay centred on the screen by themselves, with the Services label sitting above them. */
.menu__services {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  min-width: 0;
  padding-left: clamp(1.5rem, 5vw, 6rem);
}

.menu__back,
.menu__all,
.menu__full {
  display: none;
}

.menu__eyebrow {
  grid-row: 1;
  align-self: end;
  margin: 0 0 clamp(1rem, 3vh, 2rem);
  font-size: 1rem;
  font-weight: var(--weight-action);
  line-height: 1.5;
}

.menu__sublist {
  grid-row: 2;
}

/* 102px at 1512px wide. */
.menu__service {
  position: relative;
  z-index: 1;
  display: block;
  width: fit-content;
  padding-bottom: 0.06em;
  color: inherit;
  font-size: clamp(3.25rem, 6.75vw, 8rem);
  font-weight: var(--weight-heading);
  line-height: 1.2;
  text-decoration: none;
}

.menu__previews {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

/* The photo follows the cursor and wipes in from the top. Only js/header.js shows it. */
.menu__preview {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: clamp(14rem, 22vw, 21rem);
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  clip-path: inset(0 0 100% 0);
}

.menu-toggle:focus-visible,
.menu__link:focus-visible,
.menu__service:focus-visible,
.menu__contact a:focus-visible,
.menu__back:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

@media (max-width: 767.98px) {
  .site-header__inner {
    padding-block: 24px 12px;
  }

  .site-header__actions .btn {
    display: none;
  }

  .menu-toggle {
    width: 64px;
    height: 16px;
  }

  .menu-open:not(.motion-on) .menu-toggle__line {
    width: 32px;
  }

  .menu-open:not(.motion-on) .menu-toggle__line--top {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-open:not(.motion-on) .menu-toggle__line--bottom {
    transform: translateY(-7px) rotate(-45deg);
  }

  .menu__inner {
    position: relative;
    display: block;
    overflow: hidden;
  }

  .menu__main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    height: 100%;
    padding-block: 104px 32px;
    padding-right: 0;
    border-right: 0;
  }

  .is-sub-open .menu__main {
    visibility: hidden;
  }

  /* On mobile the services slide in as a panel, opened from the Services row. */
  .menu__services {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 68px 0 32px;
    overflow-y: auto;
    background: var(--color-dark);
    visibility: hidden;
    transform: translateX(100%);
  }

  .is-sub-open .menu__services {
    visibility: visible;
    transform: none;
  }

  .menu__back {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin-bottom: 24px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 1rem;
    font-weight: var(--weight-action);
    line-height: 1.5;
    cursor: pointer;
  }

  /* Rotating the diagonal arrow makes it wider than its box, so the margin keeps its tip inside the panel. */
  .menu__back-arrow {
    display: block;
    width: 12px;
    height: 12px;
    margin-left: 3px;
    background: currentColor;
    -webkit-mask: var(--menu-arrow) center / contain no-repeat;
    mask: var(--menu-arrow) center / contain no-repeat;
    transform: rotate(135deg);
    --menu-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11.9994'%3E%3Cpath d='M0.820989 0.820988C0.900519 0.741407 0.994952 0.678277 1.09889 0.635205C1.20283 0.592133 1.31423 0.569964 1.42674 0.569964C1.53925 0.569964 1.65066 0.592133 1.7546 0.635205C1.85853 0.678277 1.95297 0.741407 2.0325 0.820988L11.7383 10.5268C11.8201 10.6057 11.8854 10.7002 11.9303 10.8046C11.9752 10.9091 11.9989 11.0215 12 11.1352C12.001 11.2489 11.9794 11.3617 11.9364 11.4669C11.8934 11.5722 11.8298 11.6679 11.7494 11.7483C11.6691 11.8287 11.5735 11.8924 11.4683 11.9355C11.363 11.9786 11.2503 12.0003 11.1366 11.9994C11.0229 11.9985 10.9105 11.9749 10.806 11.93C10.7015 11.8852 10.6069 11.82 10.5279 11.7383L0.822131 2.0325C0.661757 1.87192 0.571677 1.65426 0.571677 1.42731C0.571677 1.20037 0.661757 0.982704 0.822131 0.82213'/%3E%3Cpath d='M11.1331 0C11.3602 0 11.578 0.0902265 11.7386 0.250831C11.8992 0.411435 11.9895 0.629262 11.9895 0.856391V11.1331C11.9895 11.3602 11.8992 11.578 11.7386 11.7386C11.578 11.8992 11.3602 11.9895 11.1331 11.9895H0.856391C0.629262 11.9895 0.411435 11.8992 0.250831 11.7386C0.0902265 11.578 0 11.3602 0 11.1331C0 10.906 0.0902265 10.6881 0.250831 10.5275C0.411435 10.3669 0.629262 10.2767 0.856391 10.2767H10.2767V0.856391C10.2767 0.629262 10.3669 0.411435 10.5275 0.250831C10.6881 0.0902265 10.906 0 11.1331 0Z'/%3E%3C/svg%3E");
  }

  .menu__eyebrow {
    display: none;
  }

  .menu__all,
  .menu__full {
    display: inline;
  }

  .menu__all {
    display: block;
  }

  .menu__sublist li {
    border-bottom: 1px solid color-mix(in srgb, var(--color-light) 15%, transparent);
  }

  .menu__sublist li:last-child {
    border-bottom: 0;
  }

  .menu__service {
    width: auto;
    padding-block: 0.875rem;
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    font-weight: var(--weight-action);
  }

  .menu__previews {
    display: none;
  }
}

/* Starting state for the header's entrance in js/header.js. */
@media (prefers-reduced-motion: no-preference) {
  .js .site-header__inner {
    opacity: 0;
  }
}