/* Global Styles */
:root {
    --bg-color: #050505;
    --card-bg: #0f0f0f;
    --text-color: #ffffff;
    --text-muted: #888888;
    --accent-color: #ffffff;
    --container-width: 1200px;
    --font-main: 'Inter', sans-serif;
    --transition: all 0.3s ease;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    line-height: 1.5;
    overflow-x: hidden;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography Utility */
.text-muted {
    color: var(--text-muted);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin-bottom: 1rem;
    line-height: 1.1;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: var(--transition);
}

/* Header */
.header {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    pointer-events: none;
    /* Let clicks pass through the full width wrapper */
}

.header-container {
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    padding: 8px 8px 8px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: var(--container-width);
    pointer-events: auto;
    /* Re-enable clicks on the pill */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.logo {
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    color: #fff;
    text-transform: uppercase;
    margin-right: auto;
}

.nav {
    display: flex;
    gap: 32px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nav-link {
    font-size: 0.8rem;
    font-weight: 500;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #fff;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-primary {
    background: #fff;
    color: #000;
    border: 1px solid #fff;
    border-radius: 100px;
    padding: 10px 24px;
    font-size: 0.85rem;
    font-weight: 700;
}

.btn-primary:hover {
    background: #eee;
    border-color: #eee;
    color: #000;
    transform: translateY(-1px);
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    /* Center vertically */
    align-items: center;
    /* Center horizontally */
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1002;
    gap: 6px;
    /* Gap between lines */
}

.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    transition: all 0.3s ease;
}

/* Base styles for active state need to be defined but controlled by JS class on parent or button */
.header.mobile-open .mobile-menu-btn span:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}

.header.mobile-open .mobile-menu-btn span:nth-child(2) {
    transform: translateY(-4px) rotate(-45deg);
}

/* Mobile Nav Overlay */
@media (max-width: 768px) {
    .header {
        top: 10px;
        padding: 0 10px;
    }

    .header-container {
        padding: 8px 16px;
    }

    .nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #050505;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
        transform: translateY(-100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1001;
        pointer-events: auto;
    }

    .header.mobile-open .nav {
        transform: translateY(0);
    }

    .nav-link {
        font-size: 1.5rem;
        color: #fff;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .header-actions .btn-primary {
        display: none;
        /* Hide 'Let's Talk' on mobile header to save space, or keep it? Plan says "Hide default nav links". Let's keep button if it fits, usually it's tight. Screenshot shows button on desktop. Let's hide on very small screens or move to nav menu. For now, hide to match typical patterns, or maybe keep text small. */
    }

    /* Let's actually put the CTA in the mobile menu bottom if needed, or keeping it visible is better for conversion.
       If I keep it, I need to adjust layout.
       Let's keep existing design principle: 
       Hamburger on right. Logo left. 
       If I hide CTA in header, it should appear in the mobile menu.
       Let's add it to nav in HTML via logic or just CSS duplication if simple text. 
       Actually, `nav` is just links.
    */
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    position: relative;
    overflow: hidden;
}

.hero-container {
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-label {
    display: inline-block;
    border: 1px solid #333;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: var(--text-muted);
}

.hero-title {
    font-size: 5rem;
    line-height: 0.9;
    font-weight: 900;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

.hero-title .highlight {
    -webkit-text-stroke: 1px #fff;
    color: transparent;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 3rem;
}

.hero-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-solid {
    background: var(--text-color);
    color: var(--bg-color);
    border: 1px solid var(--text-color);
}

.btn-solid:hover {
    background: transparent;
    color: var(--text-color);
}

.btn-outline {
    border: 1px solid #333;
    color: var(--text-color);
}

.btn-outline:hover {
    color: var(--text-color);
}

/* Abstract Circle */
/* Hero Vertical Text */
.hero-vertical-text {
    position: absolute;
    left: 300px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: rgba(255, 255, 255, 0.25);
    /* Subtle but visible */
    font-size: 0.65rem;
    /* Smaller, architectural look */
    font-weight: 500;
    /* Medium weight */
    letter-spacing: 1rem;
    /* Tighter spacing */
    text-transform: uppercase;
    z-index: 1;
    user-select: none;
    pointer-events: none;
    display: block;
}

/* Abstract Circle */
.circle-graphic {
    position: absolute;
    bottom: -60px;
    left: 650px;
    transform: none;
    width: 250px;
    /* Much smaller */
    height: 250px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Subtle border */
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

/* Sections */
.section {
    padding: 100px 0;
    border-bottom: 1px solid #111;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
}

.section-desc {
    max-width: 400px;
    color: var(--text-muted);
    font-size: 0.95rem;
    text-align: right;
}

/* Services */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #111;
    /* Grid border effect */
    border: 1px solid #111;
}

.service-card {
    background: var(--bg-color);
    padding: 40px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 350px;
    transition: background 0.3s;
}

.service-card:hover {
    background: var(--card-bg);
}

.service-card:nth-child(1) {
    transition-delay: 0.1s;
}

.service-card:nth-child(2) {
    transition-delay: 0.2s;
}

.service-card:nth-child(3) {
    transition-delay: 0.3s;
}

.service-card:nth-child(4) {
    transition-delay: 0.4s;
}

.service-number {
    font-size: 1.2rem;
    margin-bottom: 40px;
    display: block;
}

.service-icon {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--text-muted);
}

.service-content h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.service-content p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Selected Works */
.year-range {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.work-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.project-card {
    cursor: pointer;
}

.project-image-wrapper {
    width: 100%;
    aspect-ratio: 4/2.5;
    background: #111;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
}

.project-placeholder {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

/* Grayscale effect as per screenshot kind of */
.project-placeholder.item-1 {
    background-image: url('/src/hype-calender-project.jpg');
    /* Placeholder */
}

.project-placeholder.item-2 {
    background-image: url('/src/artistry-casa-project.jpg');
    /* Placeholder */
}

.project-card:hover .project-placeholder {
    transform: scale(1.05);
}

/* Selected Works Header */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 60px;
    padding-top: 40px;
}

.section-title {
    font-size: 4rem;
    /* Large and bold */
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
}

.header-line {
    flex-grow: 1;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 40px;
    /* Spacing around line */
}

.year-range {
    font-family: 'Courier New', Courier, monospace;
    /* Technical look */
    font-size: 0.9rem;
    color: #fff;
    white-space: nowrap;
    letter-spacing: 0.1em;
}

/* Responsive adjustments for header */
@media (max-width: 900px) {
    .section-title {
        font-size: 2.5rem;
    }

    .header-line {
        margin: 0 20px;
    }
}

@media (max-width: 600px) {
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .header-line {
        display: none;
        /* Hide line on mobile stack */
        width: 100%;
        margin: 0;
    }

    .year-range {
        align-self: flex-end;
        /* Move year to right or keep left? Screenshot implies aligned. vertical center. */
        /* Let's keep it consistent. */
        align-self: flex-start;
    }
}

.project-category {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.project-title {
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 700;
}

/* Difference / Why Us */
.difference-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.difference-desc {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
    color: var(--text-muted);
}

.stats {
    display: flex;
    gap: 60px;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #222;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

.features-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.feature-item h4 {
    font-size: 1rem;
    text-transform: uppercase;
    margin-bottom: 10px;
    margin-top: 15px;
}

.feature-item p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Footer & Contact */
.footer {
    padding: 100px 0 40px;
    background: #000;
}

.footer-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-bottom: 80px;
}

.cta-title {
    font-size: 3.5rem;
    line-height: 0.9;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.cta-desc {
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 400px;
}

.contact-info {
    margin-top: 40px;
}

.contact-item {
    margin-bottom: 15px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.contact-form {
    background: #0f0f0f;
    padding: 40px;
    border: 1px solid #222;
    border-radius: 8px;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
    width: 100%;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    background: transparent;
    border: 1px solid #333;
    padding: 12px;
    color: var(--text-color);
    font-family: var(--font-main);
    border-radius: 4px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--text-color);
}

.btn-submit {
    width: 100%;
    background: var(--text-color);
    color: var(--bg-color);
    border: none;
    padding: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.3s;
}

.btn-submit:hover {
    opacity: 0.9;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    border-top: 1px solid #222;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.socials a {
    margin-left: 20px;
}

/* Responsiveness */
@media (max-width: 900px) {

    .hero-vertical-text,
    .circle-graphic {
        display: none;
    }

    .hero-title {
        font-size: 3.5rem;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .difference-grid,
    .footer-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }
}

@media (max-width: 600px) {
    .header-container {
        padding: 0 15px;
    }

    /* .hero-vertical-text and .circle-graphic are already hidden by the max-width: 900px query above */

    .hero-title {
        font-size: 2.5rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .work-grid {
        grid-template-columns: 1fr;
    }

    .stats {
        flex-direction: column;
        gap: 20px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
    }
}