/* =========================== 1. LOCAL FONTS (GDPR) =========================== */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/playfair-v10-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/playfair-v10-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/playfair-v10-latin-800.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); }

/* =========================== 2. GLOBAL =========================== */
body { margin: 0; font-family: 'Inter', sans-serif; color: #2a2a2a; background-color: #ffffff; overflow-x: hidden; }

/* =========================== 3. HERO SECTION (RESTORED) =========================== */
.hero { position: relative; width: 100%; height: auto; min-height: 150px; background: url('../images/hero.jpg') center center no-repeat; background-size: cover; display: flex; align-items: center; padding: 0 60px; box-sizing: border-box; }
.hero-text { z-index: 10; display: inline-block; }
.hero-text h1 { font-family: 'Playfair Display', serif; font-size: 2.8rem; font-weight: 800; margin: 0; letter-spacing: 1.5px; line-height: 1.1; background: linear-gradient(135deg, #2a2a2a, #b8962e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 4px rgba(255,255,255,0.15), 1px 1px 6px rgba(0,0,0,0.1); }
.hero-text h2 { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 400; font-style: italic; color: #555; margin: 6px 0 0 0; letter-spacing: 1px; line-height: 1.2; text-shadow: 0 0 2px rgba(255,255,255,0.2); }
.hero .lang-toggle { position: absolute; top: 20px; right: 40px; display: flex; gap: 10px; }
.hero .lang-toggle button { padding: 7px 15px; font-size: 0.85rem; border: 1px solid rgba(255,255,255,0.7); background-color: rgba(0,0,0,0.45); color: white; border-radius: 3px; cursor: pointer; transition: all 0.3s ease; }

/* =========================== 4. BOXES & HEADINGS =========================== */
.samples-box, .about-box { background-color: rgba(255, 255, 255, 0.85); padding: 25px 20px; border-radius: 8px; max-width: 700px; margin: 0 auto 25px auto; box-shadow: 0 8px 25px rgba(0,0,0,0.08); box-sizing: border-box; }

/* Unified Gold Effect for Headings */
.about h2, .samples-heading, .samples-box .sample-item h3 { 
    font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 800; margin-bottom: 18px; letter-spacing: 1.5px; line-height: 1.2; 
    background: linear-gradient(135deg, #2a2a2a, #b8962e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
    text-shadow: 0 0 3px rgba(255,255,255,0.15), 1px 1px 5px rgba(0,0,0,0.1); text-align: center; 
}

/* =========================== 5. SAMPLES & PLAY BUTTON (DEAD-CENTER) =========================== */
.samples-box .image-grid { 
    display: flex; 
    justify-content: center; 
    gap: 20px; 
    flex-wrap: nowrap; 
}

.sample-item { 
    position: relative !important; 
    flex: 1; 
    text-align: center; 
    cursor: pointer; 
}

/* THE FIX: Dead-Center over the IMAGE only */
.sample-item::after { 
    content: "\25B6"; 
    position: absolute; 
    
    /* 1. Position relative to the whole container */
    left: 50%;
    /* 2. Offset to account for the H3 height (approx 60px) + center of image */
    top: calc(50% + 30px); 
    
    /* 3. Perfect Centering Trick */
    transform: translate(-50%, -50%); 
    
    width: 50px; 
    height: 50px; 
    background: rgba(0, 0, 0, 0.7); 
    color: #fff; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.2rem; 
    
    opacity: 0;     /* Hidden on Desktop until hover */
    transition: all 0.3s ease;
    z-index: 10;
    pointer-events: none; 
}

/* Desktop Hover: Fade in and scale up slightly */
.sample-item:hover::after { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1.1);
}

/* Playing State: Stay visible and turn gold */
.sample-item.playing::after { 
    opacity: 1; 
    background: #b8962e; 
    transform: translate(-50%, -50%) scale(1.1);
}

.sample-item img { 
    width: 100%; 
    height: auto; 
    border-radius: 8px; 
    display: block; 
    transition: transform 0.3s ease; 
}

/* Subtle zoom on hover */
.sample-item:hover img { 
    transform: scale(1.02); 
}




/* =========================== 6. ABOUT TEXT & BUTTONS (RESTORED) =========================== */
.about-box {
    background-color: rgba(255, 255, 255, 0.85); 
    padding: 35px 30px; 
    border-radius: 12px; 
    max-width: 700px; 
    margin: 25px auto; 
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    text-align: center; /* THIS CENTERS THE BUTTONS */
    box-sizing: border-box;
}

.about p { 
    font-size: 0.95rem; 
    line-height: 1.6; 
    color: #555; 
    margin-bottom: 20px; 
    
    /* MAGAZINE STYLE JUSTIFY */
    text-align: justify; 
    text-align-last: center; 
    
    max-width: 650px;   
    margin-left: auto;
    margin-right: auto;
}

.about-buttons, .back-home-box, .back-home-btn {
    position: relative !important;
    z-index: 9999 !important; /* Forces it above any invisible carousel layers */
    pointer-events: auto !important; /* Ensures the browser registers the click */
}


/* BUTTON CONTAINER */
.about-buttons { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    margin-top: 25px; 
    flex-wrap: wrap; 
}

/* GRADIENT BUTTON STYLE (RESTORED) */
.back-home-btn { 
    padding: 10px 22px; 
    font-size: 1rem; 
    display: inline-block; 
    text-decoration: none; 
    font-family: 'Playfair Display', serif; 
    font-weight: 500; 
    color: #000; 
    background-color: #fff; 
    border: 2px solid transparent; 
    border-radius: 6px; 
    /* The specific Gradient Border trick you like */
    background-image: linear-gradient(white, white), linear-gradient(135deg, #2a2a2a, #b8962e); 
    background-origin: border-box; 
    background-clip: padding-box, border-box; 
    box-shadow: 0 4px 12px rgba(184,150,46,0.25); 
    transition: all 0.3s ease; 
}

.back-home-btn:hover { 
    box-shadow: 0 0 20px rgba(184,150,46,0.6); 
    transform: translateY(-2px) scale(1.05); 
}



/* =========================== CAROUSEL INTRO (UNIFIED) =========================== */
.carousel-intro { 
    text-align: center !important; 
    width: 100%;
    font-family: 'Inter', sans-serif; 
    font-style: italic; 
    color: #2a2a2a; 
    margin: 30px auto 15px auto;
    font-size: 1rem; 
    letter-spacing: 0.5px;
    box-sizing: border-box;
}

/* Hide by default so the JS toggle can show the correct language */
.carousel-intro.en, 
.carousel-intro.de {
    display: none; 
}

/* Mobile Tweak for the Intro Text */
@media (max-width: 768px) {
    .carousel-intro {
        font-size: 0.95rem;
        padding: 0 20px;
        margin: 20px auto 10px auto; /* Slightly tighter for mobile */
    }
}

/* =========================== CLIENT CAROUSEL (SLIDING) =========================== */
.client-carousel {
    width: 100%;
    overflow: hidden;
    height: 80px;
    display: flex;
    align-items: center;
    position: relative;
    margin: 20px 0;
}

.client-slide-track {
    display: flex;
    align-items: center;
    animation: scroll 40s linear infinite;
    width: max-content;
}

.client-slide-track img {
    height: 45px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    margin: 0 30px;
    transition: 0.3s ease;
}

.client-slide-track img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.client-carousel:hover .client-slide-track {
    animation-play-state: paused;
}



/* =========================== 8. MOBILE UPDATES =========================== */
@media (max-width: 768px) {
    /* ... keep your existing mobile hero/toggle code ... */

    .about-box p {
        font-size: 1rem;
        line-height: 1.6;
        padding: 0 10px; /* Extra breathing room for small screens */
    }

    .carousel-intro {
        text-align: center !important;
        margin: 25px auto 10px auto;
    }
}

/* Playing Animation */
.sample-item.playing img { border: 3px solid #b8962e; animation: pulseGlow 1.5s infinite; }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 10px rgba(184,150,46,0.4); } 50% { box-shadow: 0 0 25px rgba(184,150,46,0.8); } }

@media (max-width: 768px) {
    /* 1. Push the content down to avoid the toggle */
    .hero { 
        padding-top: 80px !important; /* Adjust this value if you need more space */
        min-height: 180px; /* Ensure the hero grows to accommodate the extra space */
    }

    /* 2. Fine-tune the Name spacing */
    .hero-text h1 { 
        margin-top: 10px;
        line-height: 1.2;
        font-size: 1.8rem; /* Slightly smaller if the name is long */
    }
    
    /* 3. Ensure the toggle stays pinned in the safe zone */
    .hero .lang-toggle { 
        top: 15px; 
        right: 15px; 
        z-index: 20; /* Keep buttons above the text layer */
    }
}



/* =========================== 8. FINAL MOBILE OPTIMIZATION =========================== */
@media (max-width: 768px) {
    /* HERO: Centered, White Text for Readability */
    .hero { 
        flex-direction: column; 
        justify-content: center; 
        text-align: center; 
        padding: 40px 20px; 
        min-height: 120px; 
        background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../images/hero.jpg') center center no-repeat; 
        background-size: cover; 
    }
    
    .hero-text h1 { 
        font-size: 2rem; 
        background: none !important; 
        -webkit-text-fill-color: white !important; 
        color: white !important; 
        text-shadow: 2px 2px 8px rgba(0,0,0,0.8); 
    }
    
    .hero-text h2 { 
        font-size: 1.2rem; 
        color: white !important; 
        text-shadow: 1px 1px 5px rgba(0,0,0,0.6); 
    }

    /* TOGGLE: Keep in corner above centered text */
    .hero .lang-toggle { 
        top: 15px; 
        right: 15px; 
    }

    /* SAMPLES: Stacked for Thumbs */
    .samples-box .image-grid { 
        flex-wrap: wrap; 
        gap: 25px; 
    }
    
    .sample-item { 
        flex: 1 1 100%; 
    }
    
    /* Play Button: Always visible and centered on mobile */
    .sample-item::after { 
        opacity: 1; 
        top: calc(50% + 25px); /* Adjusted for mobile H3 height */
        width: 55px; 
        height: 55px; 
        font-size: 1.4rem; 
        background: rgba(0, 0, 0, 0.5);
    }

    /* ABOUT BOX: Breathable padding */
    .about-box, .samples-box { 
        width: 94%; 
        margin: 20px auto; 
        padding: 25px 15px; 
    }

    /* CAROUSEL: Smaller logos for small screens */
    .client-carousel { 
        height: 70px; 
    }
    
    .client-slide-track img { 
        height: 35px; 
        margin: 0 20px; 
    }
}

/* =========================== WORK PAGE SPECIFICS =========================== */
.video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 per row on desktop */
    gap: 30px;
    margin-top: 20px;
}

.video-item video {
    width: 100%;
    border-radius: 8px;
    display: block;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.client-agency {
    margin-top: 10px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #555;
    text-align: center; /* Chic centering for video credits */
}

/* Footer & Legal Button Chic Match */
.legal-btn {
    display: inline-block;
    margin-top: 15px;
    background: #fff;
    color: #000;
    padding: 8px 20px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    font-family: 'Playfair Display', serif;
}

@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr; /* 1 per row on mobile */
    }
}

/* =========================== FOOTER MOBILE FIX =========================== */
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    width: 100%;
    box-sizing: border-box;
}

footer p {
    margin: 0 0 10px 0; /* Space between copyright and button */
}

/* Ensure the Legal button doesn't hug the left */
.legal-btn {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    footer {
        padding: 30px 15px;
    }
    
    .legal-btn {
        width: auto; /* Prevent it from stretching too wide on mobile */
        min-width: 120px;
    }
}

/* =========================== 
   UNIFIED BUTTON STYLING (GOLD GRADIENT BORDER) 
=========================== */

/* 1. Language Toggle Buttons (Hero) */
.hero .lang-toggle button {
    padding: 6px 12px;
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #000;
    background-color: #fff;
    border: 2px solid transparent;
    border-radius: 4px;
    /* Gradient Border Trick */
    background-image: linear-gradient(white, white), 
                      linear-gradient(135deg, #2a2a2a, #b8962e);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 2. Legal Button (Footer) */
.legal-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 20px;
    font-size: 0.9rem;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #000;
    background-color: #fff;
    border: 2px solid transparent;
    border-radius: 5px;
    /* Gradient Border Trick */
    background-image: linear-gradient(white, white), 
                      linear-gradient(135deg, #2a2a2a, #b8962e);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* 3. Hover Effects for all Gold-Bordered Buttons */
.hero .lang-toggle button:hover,
.legal-btn:hover,
.back-home-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(184, 150, 46, 0.4);
    /* Subtle brightness boost on hover */
    filter: brightness(1.05);
}

/* =========================== 
   MOBILE FIXES FOR BUTTONS 
=========================== */
@media (max-width: 768px) {
    .hero .lang-toggle {
        top: 15px;
        right: 15px;
        gap: 8px;
    }
    
    .hero .lang-toggle button {
        padding: 8px 14px; /* Slightly larger for touch targets */
    }

    .legal-btn {
        padding: 10px 25px; /* Better thumb target for mobile footer */
    }
}

/* =========================== LEGAL PAGE (GOLD BRANDED ALIGNMENT) =========================== */

/* 1. Main Language Containers */
.lang-section.en, 
.lang-section.de {
    text-align: left !important;
    max-content: 800px;
    margin: 0 auto;
}

/* 2. Branded Gold Headings (Left Aligned) */
.lang-section h2, 
.lang-section h3 {
    text-align: left !important;
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    margin-top: 35px;
    margin-bottom: 15px;
    letter-spacing: 1px;
    line-height: 1.2;

    /* RE-APPLIED GOLD GRADIENT */
    background: linear-gradient(135deg, #2a2a2a, #b8962e) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    
    /* Subtle shadow for consistency */
    text-shadow: 0 0 3px rgba(255,255,255,0.15), 1px 1px 5px rgba(0,0,0,0.1) !important;
    
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* 3. All Paragraphs & Labels (Force Left) */
.lang-section p {
    text-align: left !important;
    text-align-last: left !important; /* Forces left on all lines */
    line-height: 1.7;
    color: #444;
    margin-bottom: 15px;
}

.lang-section p strong {
    display: inline-block;
    min-width: 140px; /* Column alignment for labels */
}

/* 4. Navigation Buttons (Remain Centered) */
.about-buttons {
    display: flex;
    justify-content: center !important;
    margin-top: 50px;
}