/* home */
.hero {
      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;
    }
    .hero-copy {
      position: relative;
      align-self: end;
      max-width: min(900px, calc(100vw - (var(--pad) * 2)));
    }
    .hero-brand {
      position: absolute;
      top: clamp(25px, 2.35vw, 30px);
      left: clamp(26px, 2.35vw, 30px);
      z-index: 2;
      color: #fff;
      mix-blend-mode: exclusion;
      font-family: var(--sans);
      font-size: clamp(24px, 2vw, 30px);
      font-weight: 780;
      line-height: .88;
      letter-spacing: -.085em;
      text-transform: none;
      transition: opacity .167s linear, transform .333s cubic-bezier(.15,0,.15,1);
    }
    .hero-brand:hover {
      opacity: .72;
      transform: translateY(-1px);
    }
    .hero-title {
      mix-blend-mode: exclusion;
    }
    .site-header,
    .hero-brand,
    .hero-title,
    .reel-controls {
      animation: hero-fade-reveal 1s linear .58s backwards;
    }
    .reel-controls {
      animation: hero-copy-reveal 1s linear .58s backwards;
    }
    h1 {
      margin: 0;
      color: #fff;
      font-weight: 420;
      line-height: .84;
      letter-spacing: -.08em;
      font-size: clamp(58px, 6.6vw, 104px);
      text-wrap: balance;
    }
    .muted-line { color: #8b8b8b; display: block; }
    .hero-tagline {
      max-width: 760px;
      margin: clamp(0px, 0.2vw, 4px) 0 0;
      color: #989898;
      font-size: clamp(28px, 3vw, 48px);
      font-weight: 430;
      line-height: .96;
      letter-spacing: -.06em;
      text-wrap: balance;
    }
    .line-mask { display: block; overflow: visible; }
    .line-mask > span { display: block; }

    @media (max-width: 760px) {
      .hero {
        padding-bottom: clamp(84px, 11vh, 104px);
      }

      h1 {
        font-size: clamp(50px, 14vw, 74px);
        line-height: .84;
      }

      .hero-tagline {
        max-width: 14ch;
        font-size: clamp(26px, 7vw, 38px);
      }
    }

    .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, transform .9s cubic-bezier(.22,1,.36,1);
    }
    .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;
    }

    .hero:hover .hero-frame,
    .hero:hover .vimeo-reel {
      transform: translate(-50%, -50%) scale(1.075);
      filter: none;
    }

    .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: none;
      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;
    }

    @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,
      .hero-brand,
      .hero-title,
      .reel-controls {
        opacity: 1;
        transform: none;
      }

      .hero-reel {
        transition: none;
      }

      .hero-frame {
        display: none;
      }
    }