@font-face {
  font-family: "PP Neue Montreal Hero";
  src: url("../fonts/pp-neue-montreal-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Montreal Hero Bold";
  src: url("../fonts/pp-neue-montreal-bold-nothin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.layered-hero {
  position: relative;
  z-index: 1;
  isolation: isolate;
  inline-size: 100%;
  block-size: 400vh;
  margin-block-start: -100vh;
  display: block;
  background: #f1f0e8;
  color: #fff;
  border: 0;
  cursor: crosshair;
}

.layered-hero.section-w { overflow: visible; }

.layered-hero.layered-hero--direct-scroll {
  block-size: 100vh;
  min-block-size: 100vh;
  margin-block-start: 0;
  cursor: default;
}

/* v64: keep the sticky Hero alive for the whole visual handoff while shortening
   the effective Hero → Vision track to half of the v63 distance. The real
   #vision section is fixed to the viewport while a measured spacer preserves
   its document height; at the boundary it returns to normal flow. */
.layered-hero.layered-hero--transition-enabled {
  --hero-transition-distance: min(170vh, 1530px);
  block-size: calc(100vh + var(--hero-transition-distance));
  min-block-size: calc(100vh + var(--hero-transition-distance));
}

main#main > section.layered-hero.layered-hero--transition-enabled
  + .layered-hero__vision-spacer
  + section#vision {
  margin-block-start: -100vh;
}

.layered-hero__vision-spacer {
  display: none;
}

main#main > section.layered-hero.layered-hero--handoff-active
  + .layered-hero__vision-spacer {
  display: block;
  block-size: var(--vision-flow-height, 1px);
  margin-block-start: 0;
}

.layered-hero.layered-hero--handoff-complete {
  background: transparent;
  /* The visual Hero is gone at this point. Release its full-size section box
     so the real Vision controls below can receive pointer input. */
  pointer-events: none;
}

.layered-hero.layered-hero--handoff-complete .layered-hero__stage {
  visibility: hidden;
  pointer-events: none;
}

.layered-hero.layered-hero--handoff-active .layered-hero__stage {
  position: fixed;
  inset: 0;
  margin-block-start: 0;
}

.layered-hero--direct-scroll .layered-hero__stage {
  position: relative;
  margin-block-start: 0;
}

main#main { padding-block-start: 0; }

.layered-hero__stage {
  position: sticky;
  inset-block-start: 0;
  margin-block-start: 100vh;
  inline-size: 100%;
  block-size: 100vh;
  overflow: visible;
  isolation: isolate;
  background: #f1f0e8;
}

.layered-hero__composite {
  position: absolute;
  inset: 0;
  z-index: 2;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
}

.layered-hero-live-vision .layered-hero,
.layered-hero-live-vision .layered-hero__stage { background: transparent; }

main#main > section#vision.layered-hero__live-vision {
  z-index: 0;
  position: fixed;
  inset: 0 auto auto 0;
  inline-size: 100%;
  margin-block-start: 0;
  transform: none;
  will-change: auto;
  pointer-events: none;
}

main#main > section.layered-hero.layered-hero--transition-enabled
  + .layered-hero__vision-spacer
  + section#vision.layered-hero__live-vision {
  margin-block-start: 0;
}

.layered-hero__pixel-defs {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

.layered-hero__pixel-edge {
  position: absolute;
  inset: 0;
  z-index: 3;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  pointer-events: none;
}

.layered-hero__underlayer,
.layered-hero__mask-canvas,
.layered-hero__static-membrane {
  position: absolute;
  inline-size: 100%;
}

.layered-hero__field {
  position: absolute;
  inset: 0;
  z-index: 1;
  inline-size: 100%;
  block-size: 100vh;
  overflow: hidden;
  background: #fff;
}

.layered-hero__composite > .layered-hero__field {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.layered-hero__picture { display: contents; }

.layered-hero__underlayer {
  z-index: 0;
  inset: 0;
  block-size: 100%;
  object-fit: scale-down;
  object-position: 50% 50%;
  background: var(--acid);
  filter: none;
  transform: none;
}

.layered-hero__static-membrane {
  z-index: 1;
  inset: 0;
  block-size: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  background: #000;
  filter: grayscale(1) brightness(1.12) sepia(.05);
  opacity: 1;
}

.layered-hero__mask-canvas {
  z-index: 1;
  inset: 0;
  block-size: 100%;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms linear;
}

.nothin-hero-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  display: block;
}

.field-ready .layered-hero__mask-canvas { opacity: 1; }
.field-ready .layered-hero__underlayer { visibility: hidden; }
.field-ready .layered-hero__fallback-picture,
.field-ready .layered-hero__static-membrane { opacity: 0; }

.layered-hero__semantic-title,
.layered-hero__semantic-description {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.layered-hero__field img[hidden] { display: none !important; }
.field-fallback .layered-hero__mask-canvas { display: none; }
.field-fallback .layered-hero__fallback-picture,
.field-fallback .layered-hero__static-membrane { opacity: 1; }
.vector-ready:not(.field-ready) .layered-hero__static-membrane { opacity: 0; }

.layered-hero__interface {
  position: absolute;
  inset: 0;
  block-size: 100vh;
  z-index: 4;
  padding: 72px 16px 14px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}

.layered-hero__controls {
  display: flex;
  align-items: center;
  gap: 22px;
}

.layered-hero__pause,
.layered-hero__scroll {
  pointer-events: auto;
  min-block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: 500 .67rem/1 "PP Neue Montreal Hero", Arial, sans-serif;
  letter-spacing: .075em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.layered-hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.layered-hero__pause { min-inline-size: 76px; text-align: start; }
.layered-hero__pause:hover,
.layered-hero__scroll:hover { text-decoration: underline; text-underline-offset: 4px; }

.layered-hero__pause:focus-visible,
.layered-hero__scroll:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 4px;
}

.layered-hero-active .skip-to-content:focus {
  inset-block-start: 8px;
  inset-inline-start: 84px;
  border-radius: 0;
  background: #0b0b10;
  color: #f1f0e8;
  transition: none;
}

main#main > section#vision { margin-block-start: 0; }

.layered-hero-active .dock-nav,
.layered-hero-active .dock-nav.glass-panel {
  position: fixed !important;
  inset: 0 0 auto !important;
  inset-block-start: 0;
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: 58px;
  padding: 0 16px;
  justify-content: flex-end;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff;
  font-family: "PP Neue Montreal Hero", Arial, sans-serif;
  mix-blend-mode: difference;
  transition: none;
}

.layered-hero-active .dock-nav__brand {
  inline-size: 42px;
  block-size: 42px;
  margin-inline-end: auto;
  padding: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: transparent;
  border: 0;
}

.layered-hero-active .dock-nav__brand::before { display: none; }

.dock-nav__brandmark {
  display: block;
  inline-size: 34px;
  block-size: 34px;
}

.layered-hero-active .dock-nav__brand > .dock-nav__brandmark {
  display: block !important;
}

.dock-nav__brandmark svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.layered-hero-active .dock-nav__list a,
.layered-hero-active .dock-nav__logpill,
.layered-hero-active .mobile-nav summary {
  border-color: transparent;
  background: transparent;
  color: #fff;
  font-family: "PP Neue Montreal Hero", Arial, sans-serif;
}

.layered-hero-active .dock-nav__list a:hover,
.layered-hero-active .dock-nav__list a[aria-current="true"],
.layered-hero-active .dock-nav__logpill:hover { background: #fff; color: #000; }
.layered-hero-active .dock-nav__logpill::before { display: none; }

@media (max-width: 991px) {
  .layered-hero {
    block-size: 340svh;
    min-block-size: calc(580px + 240svh);
    margin-block-start: 0;
    cursor: default;
  }
  .layered-hero.layered-hero--transition-enabled {
    --hero-transition-distance: 150svh;
    block-size: calc(100svh + var(--hero-transition-distance));
    min-block-size: calc(100svh + var(--hero-transition-distance));
  }
  main#main > section.layered-hero.layered-hero--transition-enabled
    + .layered-hero__vision-spacer
    + section#vision {
    margin-block-start: -100svh;
  }
  .layered-hero__stage,
  .layered-hero__field { block-size: 100svh; }
  .layered-hero__stage { margin-block-start: 0; }
  .layered-hero__interface { block-size: 100svh; }
  .layered-hero__interface { padding: 66px 14px 12px; }
  .layered-hero__controls { gap: 14px; }
  .layered-hero__pause { min-inline-size: 70px; font-size: .6rem; }
  .layered-hero__scroll { font-size: .6rem; }
  .layered-hero-active .dock-nav { padding-inline: 12px; }
  .dock-nav__brandmark { inline-size: 31px; block-size: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  .layered-hero {
    block-size: 100vh;
    min-block-size: 100vh;
    margin-block-start: 0;
    cursor: default;
  }
  .layered-hero__stage {
    position: relative;
    margin-block-start: 0;
  }
  .layered-hero__mask-canvas { display: none; }
  .layered-hero__fallback-picture,
  .layered-hero__static-membrane { opacity: 1 !important; }
  .layered-hero__underlayer { transform: none; }
  .layered-hero__pixel-edge { display: none; }
}

/* v56: one shared, stable header for the hero and every following section. */
html.scroll-performance-mode body::after {
  display: none !important;
}
html.scroll-performance-mode body::before {
  display: none !important;
  transition: none !important;
}
html.scroll-performance-mode .layered-hero__interface {
  mix-blend-mode: normal !important;
  color: #fff;
}

.dock-nav,
.dock-nav.glass-panel,
.layered-hero-active .dock-nav,
.layered-hero-active .dock-nav.glass-panel {
  position: fixed !important;
  inset: 0 0 auto !important;
  inline-size: 100% !important;
  max-inline-size: none !important;
  min-block-size: 58px;
  margin: 0 !important;
  padding: 0 16px !important;
  justify-content: flex-end;
  background: #0a0a0a !important;
  border: 0 !important;
  border-bottom: 1px solid #222 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #f1f0e8 !important;
  mix-blend-mode: normal !important;
  transition: none !important;
  contain: layout paint style;
}

.dock-nav *,
.layered-hero-active .dock-nav * {
  transition: none !important;
}

.dock-nav__brand,
.layered-hero-active .dock-nav__brand {
  min-block-size: 58px;
  color: #f1f0e8 !important;
  background: transparent !important;
}

.dock-nav__brand > span,
.layered-hero-active .dock-nav__brand > span,
.dock-nav__list a,
.layered-hero-active .dock-nav__list a,
.dock-nav__logpill,
.layered-hero-active .dock-nav__logpill,
.mobile-nav summary,
.layered-hero-active .mobile-nav summary {
  color: #f1f0e8 !important;
  background: transparent !important;
  border-color: transparent !important;
}

.layered-hero-active .dock-nav__list a:hover,
.layered-hero-active .dock-nav__list a[aria-current="true"],
.layered-hero-active .dock-nav__logpill:hover,
.dock-nav__list a:hover,
.dock-nav__list a[aria-current="true"],
.dock-nav__logpill:hover {
  background: #f1f0e8 !important;
  color: #0a0a0a !important;
}

@media (max-width: 760px) {
  .dock-nav,
  .dock-nav.glass-panel,
  .layered-hero-active .dock-nav,
  .layered-hero-active .dock-nav.glass-panel {
    min-block-size: 62px;
    padding-inline: 16px !important;
  }
  .dock-nav__brand,
  .layered-hero-active .dock-nav__brand,
  .mobile-nav summary,
  .layered-hero-active .mobile-nav summary { min-block-size: 62px; }
}