/* --- 1. RESET & VARS --- */
:root {
    --bg-color: #F2F2F2; 
    --text-color: #111111; 
    --dim-color: #555555;
    --line-color: #CCCCCC;
    --spacing-outer: 4vw; 
    --font-main: 'Inter', Helvetica, Arial, sans-serif;
    --font-display: 'Archivo Black', 'Arial Black', sans-serif;
}

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

html { 
    scroll-behavior: smooth; 
    scrollbar-gutter: stable; 
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    background-image: linear-gradient(var(--bg-color) 0%, var(--bg-color) 100%), url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
}

/* TYPOGRAPHY */
h1, h2, h3, .hero-sub { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* FADE TRANSITIONS */
.header-right, .sticky-right, .hero h1, .hero .hero-sub, .action-wrapper, .work-label, .work-caption, .strip-section, footer, #cookie-banner p, #cookie-banner h4, #privacy-policy, .header-payment-text {
    transition: opacity 0.1s ease-in-out;
    opacity: 1;
}

/* --- ACTION WRAPPER --- */
.action-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 35px;
    flex-wrap: wrap;
}

/* 1. The Technical Email Field */
.tech-email-container {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--text-color);
    background: #fff;
    padding: 0;
    height: 48px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-width: 260px;
}

.tech-email-container:hover {
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.tech-email-container:active {
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transform: translateY(1px);
}

.tech-email-label {
    padding: 0 16px;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color);
    white-space: nowrap;
}

.tech-copy-btn {
    height: 100%;
    padding: 0 16px;
    background: #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--text-color);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: background 0.2s;
}

.tech-email-container:hover .tech-copy-btn { background: #d4d4d4; }
.tech-email-container.copied .tech-copy-btn { background: var(--text-color); color: #fff; }

/* 2. Standard Buttons */
.btn-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 24px;
    font-family: var(--font-main);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    text-decoration: none;
    letter-spacing: 0.05em;
    border: 1px solid var(--text-color);
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.btn-solid { background-color: var(--text-color); color: var(--bg-color); }
.btn-solid:hover { opacity: 0.8; }
.btn-outline { background-color: transparent; color: var(--text-color); }
.btn-outline:hover { background-color: rgba(0,0,0,0.05); }

/* --- HEADER BUTTON OVERRIDES --- */
.header-btn-row.small-btns .btn-base,
.header-btn-row.small-btns .tech-email-container {
    height: 38px;
}

.header-btn-row.small-btns .btn-base { padding: 0 16px; font-size: 0.8rem; }
.header-btn-row.small-btns .tech-email-container { min-width: 220px; }
.header-btn-row.small-btns .tech-email-label { font-size: 0.85rem; padding: 0 12px; }
.header-btn-row.small-btns .tech-copy-btn { font-size: 0.75rem; padding: 0 12px; }

/* --- HEADER LAYOUT UTILS --- */
.header-actions-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
}

.header-btn-row {
    display: flex;
    gap: 10px;
}

.header-payment-text {
    font-size: 0.7rem;
    color: var(--dim-color);
    margin-top: 8px; 
    margin-left: 2px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* --- META TAGS --- */
.meta-row { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 10px; }
.meta-tag { display: inline-block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; padding: 6px 12px; letter-spacing: 0.02em; }
.time-tag { background: #E5E5E5; color: #000; }
.price-tag { background: #000; color: #fff; border: 1px solid #000; }

/* --- STICKY HEADER --- */
#sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(242, 242, 242, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-color);
    padding: 12px 0; 
    display: flex;
    justify-content: center;
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#sticky-header.visible { transform: translateY(0); }

.sticky-content {
    width: 100%;
    max-width: 1200px;
    padding: 0 var(--spacing-outer);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sticky-logo img { width: 70px; height: auto; display: block; mix-blend-mode: multiply; }

.sticky-right { 
    display: flex; 
    align-items: flex-start; 
    gap: 20px; 
}

.mobile-btns-group { display: none; }

/* --- MAIN LAYOUT --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px var(--spacing-outer);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.bio-image {
    width: 130px; height: 130px; border-radius: 50%; object-fit: cover;
    filter: grayscale(100%); margin-top: 25px; display: block;
    transition: filter 0.3s ease, transform 0.3s ease;
}
.bio-image:hover { filter: grayscale(0%); transform: scale(1.05); }

header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 100px; }
.header-right { display: flex; align-items: flex-start; gap: 20px; } 

.logo img { width: 95px; height: auto; display: block; mix-blend-mode: multiply; }

/* --- LANGUAGE SWITCHER --- */
.lang-switch { 
    font-family: var(--font-main); 
    font-weight: 600; 
    font-size: 0.9rem; 
    user-select: none; 
    display: flex; 
    gap: 15px; 
    margin-left: 10px; 
    margin-top: 0; 
    align-items: center; 
    height: 38px; 
}

.lang-btn { color: #999; transition: color 0.2s; text-decoration: none; }
.lang-btn:hover { color: var(--text-color); }
.lang-btn.active { color: var(--text-color); cursor: default; pointer-events: none; }

.hero { margin-bottom: 80px; }
h1 { font-family: var(--font-display); font-size: clamp(3.0rem, 8vw, 5rem); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.04em; margin-bottom: 40px; }
.hero-sub { font-size: 1.3rem; max-width: 850px; line-height: 1.5; color: var(--text-color); font-weight: 400; }
.hero-sub strong { font-weight: 700; color: #000; }

/* --- CAROUSEL --- */
.carousel-wrapper { margin-bottom: 120px; border-top: 1px solid var(--line-color); padding-top: 40px; }
.work-label { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--dim-color); margin-bottom: 25px; display: block; }

.f-carousel { --f-carousel-spacing: 30px; --f-carousel-slide-width: 32%; }
.f-carousel__slide { padding: 0; width: var(--f-carousel-slide-width); }

.f-carousel__dots {
    display: flex !important; justify-content: flex-start; gap: 0; padding-left: 0;
    margin-top: 8px !important; 
    position: static; transform: none; left: auto; bottom: auto; background: transparent;
}

.f-carousel__dot {
    width: 30px !important; height: 30px !important; padding: 0 !important; margin: 0 !important;
    background: transparent !important; border: none !important; opacity: 1 !important;
    display: flex !important; align-items: center !important; justify-content: flex-start !important; 
}

.f-carousel__dot::after {
    content: '' !important; width: 10px !important; height: 10px !important;
    border: 2px solid var(--text-color) !important; background: transparent !important;
    border-radius: 0 !important; display: block !important;
    transition: all 0.2s ease !important; box-sizing: border-box !important;
}

.f-carousel__dot:hover::after { background: var(--text-color) !important; }
.f-carousel__dot.is-current::after { background: var(--text-color) !important; }

a.work-trigger:hover { opacity: 1 !important; }

.work-image { 
    display: block; width: 100%; aspect-ratio: 1 / 1; background-color: #e5e5e5; 
    overflow: hidden; position: relative; margin-bottom: 16px; cursor: pointer; 
}
.work-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: transform 0.5s ease, filter 0.5s ease; -webkit-user-drag: none; user-select: none; }
.work-image:hover img { transform: scale(1.03); filter: grayscale(0%); }

.work-caption { display: flex; flex-direction: column; gap: 4px; }
.work-title { font-family: var(--font-main); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-color); }
.work-category { font-family: var(--font-main); font-weight: 400; font-size: 0.9rem; color: var(--dim-color); }

.strip-section { display: flex; flex-direction: column; margin-bottom: 120px; border-top: 1px solid var(--line-color); }
.strip-row { display: grid; grid-template-columns: 280px 1fr; gap: 40px; padding: 50px 0; border-bottom: 1px solid var(--line-color); scroll-margin-top: 100px; }
.strip-label { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--text-color); padding-top: 8px; line-height: 1.4; }
.strip-content p { font-size: 1.4rem; font-weight: 400; max-width: 650px; margin-bottom: 16px; color: var(--text-color); }
.strip-detail { font-size: 1rem !important; opacity: 1; max-width: 600px; margin-top: 0; color: var(--dim-color) !important; line-height: 1.5; }

.turnaround-time { display: inline-block; margin-top: 15px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; padding: 4px 8px; background: #E5E5E5; color: #000; }

footer { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; padding-top: 60px; }
.col h3 { font-size: 0.8rem; text-transform: uppercase; margin-bottom: 20px; letter-spacing: 0.05em; color: var(--dim-color); }
ul { list-style: none; }
li { margin-bottom: 12px; font-size: 1rem; display: flex; align-items: center; }
a { color: var(--text-color); text-decoration: none; transition: opacity 0.2s; }
a:hover { opacity: 0.6; }
.icon-fixed { width: 20px; margin-right: 10px; font-size: 0.9rem; color: var(--dim-color); }

#cookie-banner {
    position: fixed; bottom: 30px; right: 30px; max-width: 350px;
    background: #fff; border: 1px solid #000; padding: 25px;
    z-index: 9999; display: none; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
#cookie-banner h4 { font-family: var(--font-display); text-transform: uppercase; margin-bottom: 10px; font-size: 1rem; }
#cookie-banner p { font-size: 0.85rem; color: var(--dim-color); margin-bottom: 20px; line-height: 1.4; }
.cookie-buttons { display: flex; gap: 10px; }
.btn-cookie {
    flex: 1; border: 1px solid #000; background: transparent; 
    padding: 10px; font-weight: 700; text-transform: uppercase; 
    font-size: 0.8rem; cursor: pointer; transition: all 0.2s;
}
.btn-accept { background: #000; color: #fff; }
.btn-accept:hover { opacity: 0.8; }
.btn-decline:hover { background: #f2f2f2; }

@media (max-width: 768px) {
    .f-carousel { --f-carousel-spacing: 20px; --f-carousel-slide-width: 100%; }
    .strip-row { grid-template-columns: 1fr; gap: 15px; padding: 40px 0; }
    .strip-label { font-size: 1rem; margin-bottom: 5px; color: #000; opacity: 1; }
    .strip-content p { font-size: 1.15rem; }
    .hero-sub { font-size: 1.1rem; }
    footer { grid-template-columns: 1fr; gap: 50px; }
    h1 { font-size: 11vw; } 
    .work-image { aspect-ratio: 1 / 1; }
    .privacy-content { padding: 20px; max-width: 90%; }
    #cookie-banner { left: 20px; right: 20px; bottom: 20px; max-width: auto; }
    
    .action-wrapper { flex-direction: column; width: 100%; gap: 12px; align-items: stretch; }
    .btn-base { width: 100%; }
    .tech-email-container { width: 100%; }
    
    .header-actions-col { display: none !important; }
    .sticky-right .header-actions-col { display: none !important; }
    .bio-image { width: 80px; height: 80px; margin-top: 15px; margin-bottom: 15px; }
    
    .sticky-right { gap: 6px; align-items: center; }

    .mobile-btns-group {
        display: flex;
        gap: 6px;
        align-items: center;
    }

    .mobile-btns-group .tech-email-container {
        display: inline-flex !important; 
        height: 34px; 
        min-width: auto;
        width: auto;
        margin: 0;
    }

    .mobile-btns-group .tech-email-label {
        font-size: 0.7rem; 
        padding: 0 8px; 
        letter-spacing: -0.01em; 
    }

    .mobile-btns-group .tech-copy-btn {
        font-size: 0.75rem;
        padding: 0 10px;
    }
    
    .mobile-btns-group .tech-copy-text .text-label {
        display: none; 
    }
    
    .mobile-icon-btn { 
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px; 
        height: 34px;
        border: 1px solid var(--text-color);
        color: var(--text-color);
        font-size: 0.9rem;
        text-decoration: none;
        background: #fff;
    }
    
    .mobile-icon-btn.btn-square {
        border-radius: 0; 
    }
    
    .mobile-icon-btn:active { background: var(--text-color); color: var(--bg-color); }
}

.privacy-content { display: none; max-width: 600px; padding: 40px; background: var(--bg-color); color: var(--text-color); border-radius: 2px; border: 1px solid var(--line-color); }
.privacy-content h2 { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 20px; text-transform: uppercase; }
.privacy-content h4 { font-family: var(--font-main); font-weight: 700; margin-top: 20px; margin-bottom: 8px; font-size: 1rem; }
.privacy-content p { font-size: 0.95rem; color: var(--dim-color); margin-bottom: 10px; line-height: 1.5; }
.fancybox__backdrop { background: #050505; opacity: 0.97; }

/* Target Content + The Button Groups in the Header */
main, 
footer, 
.header-actions-col, /* Desktop Buttons & Payment Text */
.mobile-btns-group   /* Mobile Icons */
{
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

/* The fading class */
.fading-out {
    opacity: 0 !important;
}

/* Force colored images in gallery on mobile devices */
@media (max-width: 768px) {
    #myCarousel .f-carousel__slide img {
        filter: grayscale(0%) !important;
        -webkit-filter: grayscale(0%) !important;
        opacity: 1 !important;
    }
}

/* Add to the bottom of styles.css */

@media (max-width: 768px) {
    #sticky-header .sticky-logo img {
        height: 80px !important; /* Standard is usually 30-40px */
        width: auto;
    }
}

@media (max-width: 768px) {
    .sticky-right {
        margin-left: auto; /* Pushes the buttons/lang group as far right as possible */
        gap: 6px;          /* Reduces the space between the buttons and the SV/EN text */
    }
}

/* --- FIX: REMOVE MOBILE STICKY BUTTON TRANSITIONS --- */
@media (max-width: 768px) {
    /* 1. Stop the group container from fading/lagging */
    #sticky-header .mobile-btns-group {
        transition: none !important;
        opacity: 1 !important;
    }
}
    
/* --- Package Grid Styling --- */

.package-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns */
    gap: 16px;
    margin-top: 5px; /* Reduced top margin now that the intro text is gone */
    margin-bottom: 24px;
}

.package-card {
    background-color: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 4px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.pkg-header {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.pkg-title {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 4px;
    color: #000;
}

.pkg-price {
    display: block;
    font-size: 0.9rem;
    font-family: 'Archivo Black', sans-serif;
    opacity: 0.9;
}

.pkg-desc {
    /* Increased size from 0.8rem to 0.9rem for better readability */
    font-size: 0.9rem !important; 
    margin: 0 !important;
    opacity: 0.9; 
    line-height: 1.5;
}

/* Mobile Responsive: Stack cards on small screens */
@media (max-width: 600px) {
    .package-grid {
        grid-template-columns: 1fr;
    }
}