.studio-hero {
    padding: 10rem 0 6rem 0; 
    text-align: center; 
    max-width: 60rem; 
    margin: 0 auto;
}

.hero-headline {
    font-size: 4rem; 
    font-weight: 700; 
    color: var(--text-color); 
    margin-bottom: 1.5rem; 
    line-height: 1.1;
    white-space: nowrap; /* Optional: Keeps headline on one line if space permits */
}

.hero-subheading {
    font-size: 1.1rem; 
    color: var(--text-subtle); 
    font-weight: 400; 
    max-width: 80rem; /* INCREASED: Allows text to sit on one line */
    margin: 0 auto;
    white-space: nowrap; /* FORCE: Forces text to stay on one line */
    overflow: hidden;
    text-overflow: ellipsis;
}

.studio-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--mw-content);
    margin: 0 auto 8rem auto;
    padding: 0 2rem;
}

/* Studio Tile Styles */
.studio-tile {
    background: var(--surface-color); 
    backdrop-filter: blur(1.5625rem); /* 25px */
    border-radius: 1.5rem; /* 24px */
    padding: 0.0625rem; /* 1px */
    border: 1px solid var(--border-color); 
    position: relative; 
    overflow: hidden; 
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
    box-shadow: var(--card-shadow); 
    cursor: pointer;
}

.tile-inner { 
    background: var(--bg-color); 
    border-radius: 1.4375rem; /* 23px */
    padding: 3rem 2rem; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    transition: background 0.4s ease; 
}

.studio-tile:hover { 
    transform: translateY(-0.5rem); /* -8px */
    box-shadow: 0 1.25rem 3.125rem rgba(0,0,0,0.1); /* 20px 50px */
    border-color: var(--text-color); 
}

.studio-tile:hover .tile-inner { background: transparent; }

.tile-icon { 
    font-size: 2rem; 
    color: var(--text-color); 
    margin-bottom: 1.5rem; 
    padding: 1rem; 
    border-radius: 0.75rem; /* 12px */
    background: var(--surface-color); 
    border: 1px solid var(--border-color); 
    transition: transform 0.4s ease; 
}

.studio-tile:hover .tile-icon { 
    transform: scale(1.1) rotate(5deg); 
    background: var(--glass-bg); 
    box-shadow: 0 0 1.5625rem var(--aurora-1); /* 25px */
}

.studio-tile h4 { 
    font-size: 1.4rem; 
    font-weight: 700; 
    margin-bottom: 0.8rem; 
    color: var(--text-color); 
}

.studio-tile p { 
    font-size: 0.95rem; 
    color: var(--text-subtle); 
    line-height: 1.5; 
    font-weight: 400; 
}

.cta-section { text-align: center; padding-bottom: 0rem; }

/* Standardize Desktop Spacing */
.studio-hero {
    padding: 10rem 0 4rem 0; /* Aligns top padding with Home Hero */
    margin-bottom: 2rem; /* Standardizes section gutter */
}

.studio-gallery {
    margin-bottom: 2rem; /* Matches Home section gaps */
}

.footer {
    margin-top: 8rem; /* Consistent footer push */
}

/* Laptop & Tablet (Max 64rem / 1024px) */
@media (max-width: 64rem) {
    
    /* 1. HEADER & HERO ALIGNMENT */
    .studio-hero {
        padding: 4rem 1.5rem; /* Matches Home/About mobile padding */
        margin-bottom: 4rem;
        max-width: 100%;
    }

    .hero-headline {
        font-size: 3rem; /* Standard headline scaling */
        margin-bottom: 1rem;
        white-space: normal; /* Override: Allows wrapping on smaller screens */
    }

    .hero-subheading {
        font-size: 1.05rem;
        max-width: 100%;
        padding: 0 1rem;
        white-space: normal; /* Override: Allows wrapping on smaller screens */
        text-overflow: clip;
    }

    /* 2. GALLERY & SECTION SPACING */
    .studio-gallery {
        grid-template-columns: 1fr; /* Stack boxes vertically */
        gap: 1.5rem;
        padding: 0 1.5rem;
        margin-bottom: 4rem; /* Aligns with Home showcased sections */
    }

    .studio-tile {
        padding: 0.0625rem;
    }

    /* 3. CTA & FOOTER ALIGNMENT */
    .cta-section {
        padding-bottom: 4rem;
    }

    .footer {margin:  0rem; padding: 2rem 0rem;}
}

/* Mobile (Max 48rem / 768px) */
@media (max-width: 48rem) {
    .studio-hero {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .hero-headline {
        font-size: 2.2rem; /* Matches Home headline scaling */
    }

    .tile-inner {
        padding: 2rem 1.2rem;
    }

    .tile-icon {
        font-size: 1.8rem;
    }

    .studio-tile h4 {
        font-size: 1.3rem;
    }
}