/* ================================================================
   STUDIO G — Homepage  v6
   Source: homepage.psd  |  Canvas: 1920 × 1080 px

   LOGO:     PSD — Asset 2      X=908  Y=398  W=91   H=172
   TAGLINE:  PSD — text layer   X=588  Y=639  W=729  H=35
             Font: MyriadPro-BoldIt  |  Gap from logo bottom: 69px
   ================================================================ */

/* ─────────────────── VIDEO ─────────────────── */
.video-wrap {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: #121212;
}
.video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Dark overlay — keeps nav/hero readable over any video content.
   Adjust the alpha (0.0 = no darken, 1.0 = full black). */
.video-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

/* ─────────────────── HERO ─────────────────── */
/*
   Anchored at logo's top-left corner: X=908, Y=398
   → top: 398/1080 = 36.852%
   → translateX(-50%) centres on the 50% axis (logo center = 953.5px ≈ 50%)
*/
.hero {
    position: absolute;
    top: 36.852%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    user-select: none;
    animation: heroRise 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

/*
   SVG LOGO  —  PSD: W=91  H=172  at 1920px canvas
   SVG inlined directly → no external file dependency.
   height = 172/1920 = 8.958vw scales proportionally.
   SVG viewBox 52.32×98.99 → aspect ratio 0.529 (narrow/tall)
*/
.logo-g {
    display: block;
    height: clamp(50px, 8.958vw, 172px);
    width: auto;
}

/*
   TAGLINE  —  MyriadPro-BoldIt
   PSD: 13mm @ 72ppi = 36.85px → 37px
   Tracking 75 → letter-spacing: 0.075em
   Gap from logo bottom (570px) to tagline top (639px) = 69px
   → margin-top: 69/1920 = 3.594vw
*/
.tagline {
    font-family: 'Myriad Pro', 'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(16px, 1.927vw, 37px);
    letter-spacing: 0.075em;
    color: #ffffff;
    margin-top: clamp(20px, 3.594vw, 69px);
    white-space: nowrap;
    text-align: center;
}

@keyframes heroRise {
    from { opacity: 0; transform: translateX(-50%) translateY(14px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ─────────────────── RESPONSIVE ─────────────────── */
@media (max-width: 1024px) {
    .logo-g  { height: clamp(40px, 14vw, 120px); }
    .tagline {
        font-size: clamp(12px, 2.8vw, 28px);
        white-space: normal;
        margin-top: clamp(14px, 3.4vw, 40px);
    }
}