/* home */
html { scroll-behavior: auto; }

.hero {
      --hero-lockup-size: var(--type-hero-size);
      min-height: 100svh;
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr;
      align-items: end;
      padding: clamp(150px, 22vh, 260px) var(--pad) clamp(38px, 5.8vh, 68px);
    }
    .hero-media {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      background: #050505;
      pointer-events: none;
    }
    .hero-copy {
      position: relative;
      align-self: end;
      max-width: min(900px, calc(100vw - (var(--pad) * 2)));
    }
    .hero-title {
      mix-blend-mode: exclusion;
    }
    .site-header,
    .mark,
    .hero-title,
    .reel-controls {
      animation: hero-fade-reveal 1s linear .58s backwards;
    }
    .reel-controls {
      animation: hero-copy-reveal 1s linear .58s backwards;
    }
    .hero .hero-title h1,
    .hero .hero-title .hero-tagline {
      font-size: var(--hero-lockup-size);
      font-stretch: var(--stretch-display);
      font-weight: var(--weight-display);
      line-height: var(--type-hero-line);
      letter-spacing: var(--tracking-display);
    }
    .hero-title h1 {
      margin: 0;
      color: #fff;
      text-wrap: balance;
    }
    .hero-tagline {
      max-width: none;
      margin: 0;
      color: #989898;
      text-wrap: balance;
    }
    html[lang="en"] .hero-tagline { white-space: nowrap; }
    .line-mask { display: block; overflow: visible; }
    .line-mask > span { display: block; }

    @media (max-width: 760px) {
      .hero {
        --hero-lockup-size: clamp(
          22px,
          calc((100vw - 40px) * .0835),
          var(--type-hero-size)
        );
        padding-inline: 16px;
        padding-bottom: clamp(88px, 6.7svh, 92px);
      }

      .hero-copy {
        max-width: calc(100vw - 32px);
      }
    }

    .hero-frame,
    .hero-reel {
      position: absolute;
      top: 50%;
      left: 50%;
      border: 0;
      background: #050505;
      pointer-events: none;
      filter: none;
      transform: translate(-50%, -50%) scale(1.04);
      transition: opacity 1.5s linear;
    }
    .hero-frame {
      z-index: 0;
      width: max(100%, calc(100svh * 16 / 9));
      height: max(100%, calc(100vw * 9 / 16));
      object-fit: cover;
      opacity: 1;
    }
    .hero-reel {
      z-index: 1;
      opacity: 0;
    }

    .vimeo-reel {
      width: max(100%, calc(100svh * 16 / 9));
      height: max(100%, calc(100vw * 9 / 16));
    }

    .hero-media.is-reel-playing .hero-reel {
      opacity: 1;
    }
    .hero-media.is-reel-playing .hero-frame {
      opacity: 0;
    }

    .reel-controls {
      position: absolute;
      right: 18px;
      bottom: 18px;
      z-index: 5;
      display: flex;
      gap: 8px;
    }

    .reel-controls button {
      width: 24px;
      height: 24px;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 50%;
      background: rgba(255,255,255,0);
      backdrop-filter: blur(10px);
      cursor: pointer;
      display: grid;
      place-items: center;
      font-size: 10px;
      line-height: 1;
      opacity: .58;
      transition: opacity .167s linear, background .167s linear, color .167s linear;
    }

    .reel-controls button:hover {
      opacity: 1;
      background: rgba(255,255,255,.10);
      color: #fff;
    }

    .reel-controls button:focus-visible {
      opacity: 1;
      outline: 1px solid currentColor;
      outline-offset: 2px;
    }

    @keyframes hero-fade-reveal {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes hero-copy-reveal {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .site-header,
      .mark,
      .hero-title,
      .reel-controls {
        opacity: 1;
        transform: none;
      }

      .hero-reel {
        transition: none;
      }

      .hero-frame {
        display: none;
      }
    }