*, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #000;
      text-shadow: 0 0 10px rgba(0,0,0,0.6);
    }

    #video-container {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    #vimeo-player {
      position: absolute;
      /* oversized so it covers the viewport regardless of aspect ratio */
      top: 50%;
      left: 50%;
      width: 177.78vh;  /* 16/9 × 100vh */
      height: 56.25vw;  /* 9/16 × 100vw */
      min-width: 100%;
      min-height: 100%;
      transform: translate(-50%, -50%);
    }

    /* Dark cinematic overlay */
    #overlay {
      position: fixed;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.30) 40%,
        rgba(0, 0, 0, 0.55) 100%
      );
    }

    /* ── Content layer ── */
    #content {
      position: fixed;
      inset: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 2rem;
      animation: fadeIn 2.8s ease forwards;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .logo{
      max-width: 375px;
      width: 80vw;
      margin-left: -10px;
    }

    .wordmark {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(2.8rem, 6vw, 5.2rem);
      letter-spacing: 0.22em;
      color: #fff;
      text-transform: uppercase;
      margin-bottom: 1.1rem;
    }

    .divider {
      width: 38px;
      height: 1px;
      background: rgba(255,255,255,0.55);
      margin: 0 auto 1.4rem;
    }

    .tagline {
      font-family: 'Tenor Sans', sans-serif;
      font-weight: 400;
      font-size: clamp(0.62rem, 1.1vw, 0.82rem);
      letter-spacing: 0.28em;
      color: rgba(255, 255, 255, 0.72);
      text-transform: uppercase;
      margin-bottom: 2.6rem;
    }

    .contact {
      font-family: 'Tenor Sans', sans-serif;
      font-size: clamp(0.58rem, 0.9vw, 0.72rem);
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      text-decoration: none;
      border-bottom: 1px solid rgba(255,255,255,0.22);
      padding-bottom: 2px;
      transition: color 0.3s, border-color 0.3s;
    }

    .contact:hover {
      color: rgba(255,255,255,0.85);
      border-color: rgba(255,255,255,0.55);
    }

    /* ── Corner meta ── */
    #meta {
      position: fixed;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1.5rem 2.5rem;
      max-width: calc(100vw - 4rem);
      font-family: 'Tenor Sans', sans-serif;
      font-size: 0.6rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.28);
    }

    #meta span{
      text-align: center;
    }

    /* subtle grain overlay */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      opacity: 0.045;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 180px; 
    }

    #video-poster {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      transition: opacity 0.8s ease;
    }

    #video-poster.hide {
      opacity: 0;
      pointer-events: none;
    }

    #video-attribution{
      position: absolute;
      bottom: 0;
      right: 0;
      color: rgba(255,255,255,0.35) !important;
      font-family: 'Cormorant Garamond';
      font-weight: 100;
      padding: 10px;
      text-transform: uppercase;
      font-size: 6px;
      text-decoration: none;
    }

    @media screen and (max-width: 320px){
      .hide-mobile {display: none !important;}
    }

    @media screen and (max-width: 200px){
      #video-attribution{
        width: 100%;
        text-align: center;
      }
    }