/* =========================================
   1. GLOBAL RESET & BASE STYLES
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    background: #000; 
    color: #fff; 
    font-family: 'Inter', sans-serif; 
    overflow-x: hidden; 
    scroll-behavior: smooth; 
}

/* =========================================
   2. SECTION LAYOUT (The "Stage")
   ========================================= */
.section { 
    position: relative; 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
}

.video-container { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
}

.bg-video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    filter: brightness(0.5); 
}

/* =========================================
   3. SUBJECT POSITIONING (Fiona)
   ========================================= */
.subject-container { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    z-index: 5; 
    pointer-events: none; 
}

.subject-png { 
    height: 92vh; 
    transition: transform 0.1s ease-out; 
}

/* =========================================
   4. TYPOGRAPHY (The "Overlay")
   ========================================= */
.content, .content-overlay { 
    position: relative; 
    z-index: 10; 
    text-align: center; 
    width: 100%;
}

h1 { 
    font-family: 'Playfair Display', serif; 
    font-size: clamp(3rem, 10vw, 6rem); 
    letter-spacing: 10px; 
    text-transform: uppercase; 
}

.section-title { 
    font-family: 'Playfair Display', serif; 
    font-size: 3rem; 
    text-transform: uppercase; 
    margin-bottom: 15px; 
}

.subtitle { 
    text-transform: uppercase; 
    letter-spacing: 5px; 
    color: #fff; 
    text-shadow: 0 0 15px rgba(255,255,255,0.4); 
    background: rgba(0,0,0,0.4); 
    padding: 5px 15px; 
    display: inline-block; 
}

.bio-block { 
    max-width: 650px; 
    margin: 20px auto; 
    line-height: 1.8; 
    color: #ddd; 
    text-shadow: 1px 1px 5px rgba(0,0,0,0.9); 
}

/* --- 4b. DESKTOP SPECIFIC FIX: THE ARTIST --- */
/* Target: 60% Down (Sternum/Upper Chest) */
/* This is lower than the face (50%) but higher than the hands (70%) */
.artist-panel .content {
    position: absolute;
    top: 60%;  
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

/* Heavy Shadow for Maximum Readability on Shirt */
.artist-panel h2, .artist-panel .bio-block {
    text-shadow: 0px 4px 15px rgba(0,0,0,1); 
}

/* =========================================
   5. COMPONENTS
   ========================================= */
.brand-marquee { 
    position: absolute; 
    bottom: 30px; 
    width: 100%; 
    z-index: 15; 
    background: rgba(0,0,0,0.7); 
    padding: 10px 0; 
    overflow: hidden; 
}

.marquee-content { 
    display: flex; 
    white-space: nowrap; 
    animation: scrollBrands 30s linear infinite; 
}

.marquee-content span { 
    font-size: 0.8rem; 
    letter-spacing: 5px; 
    padding-right: 80px; 
    color: #aaa; 
    font-weight: bold; 
}

@keyframes scrollBrands { 
    from { transform: translateX(0); } 
    to { transform: translateX(-50%); } 
}

.ff-horizontal-form { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 10px; 
    max-width: 1200px; 
    margin: 0 auto; 
    z-index: 20; 
}

.ff-horizontal-form input, select { 
    padding: 12px; 
    background: #111; 
    border: 1px solid #333; 
    color: #fff; 
    min-width: 160px; 
    font-size: 0.8rem; 
}

.ff-btn { 
    padding: 12px 30px; 
    background: #fff; 
    color: #000; 
    font-weight: bold; 
    border: none; 
    cursor: pointer; 
    text-transform: uppercase; 
    font-size: 0.8rem; 
}

.ff-newsletter-inline { 
    display: flex; 
    justify-content: center; 
    margin-top: 15px; 
    z-index: 20; 
}

.ff-newsletter-inline input { 
    padding: 12px; 
    background: #111; 
    border: 1px solid #333; 
    color: #fff; 
    width: 250px; 
}

.ff-newsletter-inline button { 
    padding: 0 20px; 
    background: #333; 
    color: #fff; 
    border: none; 
    cursor: pointer; 
    text-transform: uppercase; 
    font-size: 0.7rem; 
}

.ff-footer { 
    padding: 60px 20px; 
    text-align: center; 
    font-size: 0.7rem; 
    color: #444; 
    letter-spacing: 1px; 
}

.ff-footer a { 
    color: #888; 
    text-decoration: none; 
}

/* =========================================
   6. MOBILE MASTER OVERRIDES
   ========================================= */
@media (max-width: 768px) {

    h1 { font-size: 3rem; } 
    .section-title { font-size: 2.2rem; }
    .subtitle { font-size: 0.6rem; letter-spacing: 2px; }
    .bio-block { font-size: 0.9rem; padding: 0 15px; }

    /* --- FACE CLEARANCE (Mobile) --- */
    
    .dubai-panel .content,
    .dubai-panel .content-overlay {
        position: absolute; 
        top: 68%; 
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
    }

    .aviator-panel .content {
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
    }

    /* Artist Mobile: Keep it low (75%) as this was approved */
    .artist-panel .content {
        top: 75% !important; 
        width: 90%;
    }

    /* --- FORM STACKING --- */
    .ff-horizontal-form {
        flex-direction: column; 
        align-items: stretch; 
        width: 85%; 
    }

    .ff-horizontal-form input, 
    .ff-horizontal-form select, 
    .ff-horizontal-form button {
        width: 100%; 
        margin-bottom: 12px; 
        min-width: unset;
    }
    
    .ff-horizontal-form button {
        padding: 15px; 
    }
}