/* Hero — full-bleed photo background (fixed while scrolling, content scrolls
   independently over it), statement paragraph, and a 2x2 quick-nav grid
   (right half of hero, 899px and up only — hidden entirely below that).
   See ./README.md */
.wm-hero-photo {
  position: relative;
}
/* Sibling of .pinned-section__inner (not nested inside it) so the vendor's
   GSAP pin/scale/fade transform on that element never touches this layer —
   it stays truly fixed to the viewport for the whole page, not just the hero. */
.wm-hero-photo__bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  /* Same scrim used on the hero itself, baked into the fixed layer so the
     top of the image (behind the fixed header) stays legible even after
     scrolling past the hero, once the hero's own scrolling scrim is gone. */
  background: linear-gradient(180deg, rgba(6, 8, 12, 0.32) 0%, rgba(6, 8, 12, 0.74) 100%),
    url("../../images/hero-bg.jpg") center / cover no-repeat,
    linear-gradient(160deg, #1a2233, #0d0f14);
  pointer-events: none;
}
.mxd-hero-06__wrap {
  position: relative;
  z-index: 1;
  /* This wrap is full-size (from vendor CSS) even though its own content
     doesn't fill it, which silently blocked hover/click on .wm-hero-nav
     sitting beneath it at the same z-index. Let events pass through, and
     re-enable them on the one interactive child that needs it. */
  pointer-events: none;
}
.mxd-hero-06__top {
  display: block;
  position: absolute;
  top: 38%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  mix-blend-mode: normal;
}
@media (min-width: 900px) {
  .mxd-hero-06__top {
    top: 50%;
    right: 50%;
  }
}
/* <wm-hero-headline> defaults to display:inline like any unstyled custom
   element — unlike .wm-mobile-menu/.wm-scroll-further--left, this class has
   no position:fixed/absolute of its own to auto-blockify it, so it needs
   this explicitly or its block-level <p> child breaks the layout. */
wm-hero-headline {
  display: block;
  transform: translateY(-70px);
}

.mxd-hero-06__headline {
  margin-top: 0;
  padding: 0 3rem;
}
@media (min-width: 768px) {
  .mxd-hero-06__headline {
    padding: 0 6rem;
  }
}
@media (min-width: 1600px) {
  .mxd-hero-06__headline {
    padding: 0 10rem;
  }
}

.wm-hero-statement {
  font-size: 3.2rem;
  line-height: 1.4;
  font-weight: 400;
  color: #fff;
}
@media (min-width: 768px) {
  .wm-hero-statement {
    font-size: 4rem;
  }
}
@media (min-width: 1200px) {
  .wm-hero-statement {
    font-size: 4.8rem;
  }
}

.mxd-hero-06__bottom {
  margin-top: auto;
}
.mxd-hero-06__controls {
  /* margin-left:auto only pushes this right when its parent is a flex
     container, which the vendor CSS only makes true at 1200px+. Below that
     (899-1199px, where First Menu is now visible) .mxd-hero-06__bottom is
     plain display:block, so this block-level child defaults to full width
     and margin-left:auto has no extra space to push into — its centered
     content (Scroll further) ends up landing in the middle of the viewport,
     under First Menu's grid. width:fit-content shrinks the box to its
     content so the margin trick works the same way in both layout modes. */
  width: fit-content;
  margin-left: auto;
}

/* The <wm-scroll-further> host itself is unstyled — display:contents drops
   it out of the box tree so its rendered <a>/<div> child (the actual
   .wm-scroll-further) behaves exactly as if placed directly here, whether
   that's as a flex item (index.html) or a position:fixed element
   (--left, work.html). */
wm-scroll-further {
  display: contents;
}

.wm-scroll-further {
  display: none;
}
@media (min-width: 899px) {
  .wm-scroll-further {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    color: rgba(255, 255, 255, 0.85);
    transition: opacity 0.3s ease;
  }
}
.wm-scroll-further:hover {
  opacity: 0.7;
}
.wm-scroll-further__line {
  width: 1px;
  height: 3rem;
  background: rgba(255, 255, 255, 0.5);
}
.wm-scroll-further__label {
  position: relative;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: normal 700 1.1rem/1 var(--_font-accent);
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.55);
}
.wm-scroll-further__label::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  writing-mode: vertical-rl;
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 42%,
    rgba(255, 255, 255, 0.95) 50%,
    transparent 58%,
    transparent 100%
  );
  background-size: 100% 300%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wmScrollGlow 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wmScrollGlow {
  from {
    background-position: 0 -100%;
  }
  to {
    background-position: 0 200%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wm-scroll-further__label::after {
    animation: none;
    background-image: none;
  }
}

/* Left-edge variant for pages without index.html's pinned hero (e.g.
   work.html) — same component, fixed to the viewport edge instead of
   following the hero's flex layout. Bottom inset matches the vertical
   rhythm already used for the mobile-menu drawer's own edge padding. */
.wm-scroll-further--left {
  position: fixed;
  z-index: 2;
  left: 3rem;
  bottom: 3rem;
}
@media (min-width: 768px) {
  .wm-scroll-further--left {
    left: 6rem;
    bottom: 4rem;
  }
}
@media (min-width: 1600px) {
  .wm-scroll-further--left {
    left: 10rem;
    bottom: 5rem;
  }
}
@media (min-width: 2200px) {
  .wm-scroll-further--left {
    left: 14rem;
    bottom: 6rem;
  }
}

/* --- Quick-nav grid: hidden (removed from layout) below 899px, right-half
   grid at 899px and up. See ./README.md --- */
.wm-hero-nav {
  display: none;
}
@media (min-width: 899px) {
  .wm-hero-nav {
    display: grid;
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 50%;
    /* Wider inset than the 1200px+ tier below: at 899-1199px the header's
       MENU toggle (fixed, z-index 10) sits close enough to the grid's default
       right edge that they visually overlap. Extra clearance here keeps them
       apart until there's enough room for the tighter desktop inset. */
    right: calc(8% + 140px);
    transform: translateX(-12px);
    transition: opacity 0.4s ease;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    border-right: 1px solid rgba(255, 255, 255, 0.18);
  }
}
body.wm-scrolled .wm-hero-nav {
  opacity: 0.15;
}
.wm-hero-nav__item {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 1.6rem 2rem;
  border-color: rgba(255, 255, 255, 0.18);
  border-style: solid;
  border-width: 0;
  transition: background-color 0.4s ease;
}
.wm-hero-nav__item:nth-child(1) {
  border-right-width: 1px;
  border-bottom-width: 1px;
}
.wm-hero-nav__item:nth-child(2) {
  border-bottom-width: 1px;
}
.wm-hero-nav__item:nth-child(3) {
  border-right-width: 1px;
}
.wm-hero-nav__item:hover,
.wm-hero-nav__item:focus-visible {
  background-color: rgba(13, 15, 20, 0.6);
}
.wm-hero-nav__label {
  font: normal 500 1.4rem/1.2 var(--_font-default);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.3s ease, transform 0.3s ease;
}
.wm-hero-nav__item:hover .wm-hero-nav__label,
.wm-hero-nav__item:focus-visible .wm-hero-nav__label {
  color: #fff;
  transform: translateY(-0.5rem);
}
@media (min-width: 768px) {
  .wm-hero-nav__item {
    padding: 2.4rem 3rem;
  }
  .wm-hero-nav__label {
    font-size: 1.6rem;
  }
}
@media (min-width: 1200px) {
  .wm-hero-nav {
    /* Enough room here for the tighter original inset — MENU toggle clearance
       no longer needs the wider 899-1199px tier value above.
       .mxd-hero-06__wrap (which "Scroll further" lives in) is capped at
       max-width:1920px and centers past that point, so its content freezes
       in place instead of continuing to track the viewport edge. This grid's
       own inset is a plain 8% of the full (uncapped) viewport width, so past
       1920px it keeps growing rightward and eventually overtakes/overlaps
       "Scroll further". max() switches to a matching centered-freeze formula
       once viewport width passes 1920px, so the two stay in sync. */
    right: max(calc(8% + 48px), calc((100vw - 1920px) / 2 + 201.6px));
  }
  .wm-hero-nav__item {
    padding: 3.2rem 4rem;
  }
  .wm-hero-nav__label {
    font-size: 1.8rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wm-hero-nav__item,
  .wm-hero-nav__label {
    transition: none;
  }
}