/* =========================================
HERO
========================================= */

.studio-hero{

min-height:100vh;

position:relative;

display:flex;
align-items:center;

overflow:hidden;

padding-top:180px;
padding-bottom:120px;
}

/* VIDEO */

.hero-video{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;
}

/* OVERLAY */

.hero-overlay{

position:absolute;
inset:0;

background:
linear-gradient(
to right,
rgba(0,0,0,0.72),
rgba(0,0,0,0.45)
);
}

/* CONTENT */

.studio-hero-content{

position:relative;
z-index:2;

max-width:950px;

padding:20px;
}

.hero-tag{

display:inline-block;

margin-bottom:25px;

color:var(--gold);

letter-spacing:3px;
text-transform:uppercase;
font-size:14px;
font-weight:600;
}

.studio-hero-content h1{

margin-bottom:30px;

max-width:800px;
}

.studio-hero-content p{

max-width:650px;

margin-bottom:40px;
}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;
}

/* =========================================
SERVICES
========================================= */

.services-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;
}

.service-card{

padding:40px 30px;

min-height:260px;
}

.service-card h3{

margin-bottom:20px;
}

/* =========================================
PRODUCTIONS
========================================= */

.production-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;
}

.production-card{

position:relative;

height:420px;

border-radius:14px;

overflow:hidden;
}

.production-card img{

width:100%;
height:100%;

object-fit:cover;

transition:0.6s;
}

.production-card:hover img{
transform:scale(1.08);
}

.production-overlay{

position:absolute;

left:0;
bottom:0;

width:100%;

padding:30px;

background:
linear-gradient(
to top,
rgba(0,0,0,0.95),
transparent
);
}

/* =========================================
WORKFLOW
========================================= */

.workflow{
background:#0f0f0f;
}

.workflow-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;
}

.workflow-card{

padding:40px 30px;
}

.workflow-card span{

display:block;

margin-bottom:20px;

font-size:52px;
font-weight:700;

color:var(--gold);
}

.workflow-card h3{
margin-bottom:15px;
}

/* =========================================
CTA
========================================= */

.studio-cta{
background:#111;
}

.cta-box{

text-align:center;

max-width:800px;

margin:auto;
}

.cta-box p{

margin-top:20px;

margin-bottom:40px;
}

/* =========================================
FOOTER
========================================= */

footer{

padding:30px;

text-align:center;

background:black;

border-top:1px solid rgba(255,255,255,0.05);
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1200px){

.studio-hero-content h1{
font-size:62px;
}

}

@media(max-width:992px){

.studio-hero{

padding:
160px 0 90px;
}

.services-grid,
.production-grid,
.workflow-grid{

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

.studio-hero-content h1{
font-size:52px;
}

}

@media(max-width:768px){

.studio-hero{

min-height:auto;

text-align:left;

padding:
170px 0 100px;
}

.studio-hero-content{
padding:10px;
}

.studio-hero-content h1{
font-size:42px;
}

.studio-hero-content p{
font-size:16px;
}

.hero-buttons{

flex-direction:column;

align-items:flex-start;
}

.hero-buttons .btn{
width:100%;
max-width:320px;
}

.services-grid,
.production-grid,
.workflow-grid{

grid-template-columns:1fr;
}

}

@media(max-width:480px){

.studio-hero{

padding:
160px 0 90px;
}

.hero-tag{
font-size:11px;
letter-spacing:2px;
}

.studio-hero-content h1{
font-size:34px;
}

.studio-hero-content p{
font-size:15px;
line-height:1.8;
}

}