.hero-nav {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: var(--space-medium) var(--space-medium) 0;
}

.hero-nav ul {
  display: none;
  flex-wrap: wrap;
  font-feature-settings: 'c2sc', 'smcp', 'ss05';
  font-size: var(--font-size-xx-small);
  gap: calc(var(--space-neutral) * 1.25);
  justify-content: center;
  letter-spacing: var(--letter-spacing);
  line-height: 1em;
  margin-bottom: -0.14em;
  margin-top: -0.145em;
}

.hero-nav li {
  flex: none;
}

.hero-nav li a {
  font-weight: 500;
}

@media(scripting: enabled) {

  .hero-nav li[data-reserve] {
    position: relative;
    white-space: nowrap;
  }

  .hero-nav li[data-reserve]::before {
    content: attr(data-reserve);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    visibility: hidden;
  }

  .hero-nav li[data-reserve] a {
    position: absolute;
    right: 0;
    top: 0;
    transition: none;
  }

}

.hero-nav .hero__tour-button {
  background: var(--color-white);
  box-shadow:
    0 0.05em 0.15em oklch(var(--oklch-black) / 0.08),
    0 0.2em 0.6em -0.2em oklch(var(--oklch-black) / 0.18)
  ;
  font-size: var(--font-size);
  gap: 0;
  overflow: clip;
}

.hero-nav .hero__tour-button div {
  gap: 0.15em;
  padding: 0 0.48em;
}

.hero-nav .hero__tour-button strong {
  font-feature-settings: 'c2sc', 'smcp', 'ss05';
  font-size: var(--font-size-xx-small);
  line-height: 1em;
  margin-top: -0.145em;
}

.hero-nav .hero__tour-button span {
  font-feature-settings: 'c2sc', 'smcp', 'ss05';
  font-size: var(--font-size-xxx-small);
  letter-spacing: var(--letter-spacing-loose);
  line-height: 1em;
  margin-bottom: -0.14em;
}

.hero-nav--large-thumbnail .hero__tour-button figure {
  height: 3em;
}

@media(prefers-color-scheme: dark) {

  .hero-nav .hero__tour-button {
    background: var(--color-ink-3);
  }

}

.dark .hero-nav .hero__tour-button {
  background: var(--color-ink-3);
}

.hero-nav number-flow {
  --active-count-decoration-color: var(--color-link);
  --active-count-decoration-line: underline;
  --active-count-decoration-thickness: var(--text-decoration-thickness);
  --active-count-underline-offset: var(--text-underline-offset);
}

.hero-grid {
  --hero-grid-columns: 2.5;
  --hero-grid-gap: var(--space-neutral);
  --hero-grid-cell: calc(100vw / var(--hero-grid-columns) - var(--hero-grid-gap));
  --hero-grid-intro: 12em;
  --hero-grid-room: 3rem;

  display: grid;
  position: relative;
}

.hero-grid > * {
  grid-area: 1 / 1;
}

.hero-grid .hero-grid__intro {
  align-self: start;
  padding-bottom: calc(var(--space-neutral) - var(--hero-grid-gap) / 2);
  padding-top: var(--space-neutral);
  z-index: 4;
}

.hero-grid__stage {
  height: calc(var(--hero-grid-height, 32.5em) + var(--hero-grid-room));
  overflow: hidden;
  position: relative;
}

.hero-grid__viewport {
  inset: 0;
  overflow: hidden;
  position: absolute;
}

.hero-grid--ready .hero-grid__viewport {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.hero-grid--dragging .hero-grid__viewport {
  cursor: grabbing;
}

.hero-grid__world {
  left: 0;
  position: absolute;
  top: 0;
}

.hero-grid__block {
  column-gap: var(--hero-grid-gap);
  column-width: var(--hero-grid-cell);
  isolation: isolate;
  padding: calc(var(--hero-grid-intro) * 0.8) calc(var(--hero-grid-gap) / 2) 0;
  width: 100vw;
}

.hero-grid__block .hero-grid__tile[data-deferred] {
  display: none;
}

.hero-grid__block .hero-grid__tile {
  break-inside: avoid;
  margin-bottom: var(--hero-grid-gap);
}

.hero-grid__column {
  display: flex;
  flex-direction: column;
  gap: var(--hero-grid-gap);
  left: 0;
  padding: calc(var(--hero-grid-gap) / 2);
  position: absolute;
  top: 0;
  width: calc(var(--hero-grid-cell) + var(--hero-grid-gap));
}

.hero-grid__tile {
  background: var(--color-white);
  box-shadow:
    0 0.13em 0.65em -0.2em oklch(var(--oklch-black) / 0.25)
  ;
  font-size: var(--font-size-x-small);
  overflow: hidden;
  position: relative;
  transition:
    scale 0.4s cubic-bezier(0.2, 0.9, 0.25, 1),
    box-shadow 0.4s cubic-bezier(0.2, 0.9, 0.25, 1)
  ;
}

.hero-grid__tile::before {
  background: oklch(var(--oklch-black) / 0.2);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity var(--transition);
}

.hero-grid__tile img {
  display: block;
  height: auto;
  object-fit: cover;
  object-position: top;
  pointer-events: none;
  width: 100%;
  -webkit-user-drag: none;
}

.hero-grid__button {
  cursor: pointer;
  inset: 0;
  outline: none;
  position: absolute;
  z-index: 3;
}

.hero-grid--dragging .hero-grid__button {
  cursor: grabbing;
}

.hero-grid__label {
  background: var(--color-blue) var(--background-blue-light);
  box-shadow:
    0 0.12em 0.24em oklch(var(--oklch-black) / 0.12),
    0 0.47em 1.4em -0.24em oklch(var(--oklch-black) / 0.3)
  ;
  color: var(--color-white);
  font-feature-settings: 'c2sc', 'smcp', 'ss05';
  font-size: calc(var(--font-size) * 0.5);
  font-weight: 500;
  left: 50%;
  letter-spacing: var(--letter-spacing);
  line-height: 1em;
  max-width: 85%;
  opacity: 0;
  padding: calc(0.9em - 0.2125em) 1em calc(0.9em - 0.1875em);
  pointer-events: none;
  position: absolute;
  text-align: center;
  text-wrap: balance;
  top: 50%;
  transition:
    opacity var(--transition),
    translate var(--transition-slow)
  ;
  translate: -50% calc(-50% + 0.4em);
  width: max-content;
}

@media(hover: hover) {

  .hero-grid__label::after {
    background: radial-gradient(
      8em circle at calc(var(--pointer-x, 0) * 1px) calc(var(--pointer-y, 0) * 1px),
      oklch(var(--oklch-white) / 0.1),
      oklch(var(--oklch-white) / 0)
    );
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
  }

  .hero-grid__column:has(.hero-grid__tile:hover) {
    z-index: 1;
  }

  .hero-grid:not(.hero-grid--dragging) .hero-grid__tile:has(.hero-grid__button):hover {
    box-shadow:
      0 0.33em 0.6em -0.26em oklch(var(--oklch-black) / 0.25),
      0 0.9em 1.6em -0.52em oklch(var(--oklch-black) / 0.4)
    ;
    scale: 1.03;
    z-index: 2;
  }

  .hero-grid:not(.hero-grid--dragging) .hero-grid__tile:hover .hero-grid__label {
    opacity: 1;
    translate: -50% -50%;
  }

  .hero-grid:not(.hero-grid--dragging) .hero-grid__tile:hover::before {
    opacity: 1;
  }

}

.hero-grid__note {
  bottom: calc(100% + 1.4em);
  display: none;
  font-family: var(--font-family-monaspace);
  font-size: var(--font-size-xxx-small);
  left: 12.9%;
  letter-spacing: normal;
  line-height: 1.4;
  pointer-events: none;
  position: absolute;
  rotate: -3deg;
  transform-origin: left center;
  white-space: nowrap;
}

.hero-grid__note p {
  margin: 0;
  text-align: center;
}

.hero-grid__arrow {
  color: var(--color-ink);
  fill: none;
  overflow: visible;
  position: absolute;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.hero-grid__arrow path {
  vector-effect: non-scaling-stroke;
}

.hero-grid__arrow--left {
  right: calc(100% - 0.375em);
  rotate: -19deg;
  top: 1.98em;
  width: 5.97em;
}

.hero-grid__arrow--down {
  left: 12em;
  rotate: -53deg;
  top: calc(100% - 1.07em);
  transform-origin: 50% 2.44%;
  width: 1.6em;
}

.hero-grid__column[aria-hidden] .hero-grid__note {
  display: none;
}

.hero-grid .hero__more {
  align-self: start;
  display: grid;
  font-size: var(--font-size);
  gap: 0.4em;
  grid-area: 2 / 1;
  justify-items: center;
  margin-top: calc(-1 * var(--hero-grid-room));
  padding: calc(var(--hero-grid-gap) / 2) var(--space-medium) 0;
  position: relative;
  text-align: center;
  z-index: 4;
}

.hero-grid .hero__or {
  display: block;
}

@media(min-width: 48em) {

  .hero-grid .hero__more {
    align-items: center;
    grid-auto-flow: column;
    justify-content: center;
  }

}

@media(min-width: 64em) {

  .hero-grid__column .hero-grid__note {
    display: block;
  }

  .hero-nav {
    flex-direction: column;
    gap: var(--space-medium);
  }

  .hero-nav ul {
    display: flex;
  }

  .hero-grid__stage {
    margin-inline: calc(-1 * var(--space-medium));
  }

  .site:has(.hero-grid) {
    overflow-x: visible;
  }

}

@media(max-width: 63.9375em) {

  .hero-grid {
    --hero-grid-columns: 1.75;
  }

}

@media(max-width: 40em) {

  .hero-grid {
    --hero-grid-columns: 1.25;
    --hero-grid-gap: 2em;
  }

}

@media(prefers-reduced-motion: reduce) {

  .hero-grid__tile {
    transition: none;
  }

}