/*
Theme Name: CP AUDIO SOUND
Version: 1.1
Description: Custom premium dark audio studio website for CP AUDIO SOUND.
*/

:root{--bg:#08090b;--panel:#111318;--text:#f5f5f5;--muted:#a9adb5;--line:#252830;--max:1180px}

*{box-sizing:border-box}

body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:Arial,Helvetica,sans-serif;
line-height:1.65
}

a{color:inherit;text-decoration:none}

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

.container{
width:min(var(--max),calc(100% - 40px));
margin:auto
}

.site-header{
position:fixed;
z-index:10;
inset:0 0 auto;
background:rgba(8,9,11,.85);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--line)
}

.header-inner{
min-height:96px;
display:flex;
align-items:center;
justify-content:space-between
}

.brand img{
width:130px;
max-height:72px;
object-fit:contain
}

.nav{
display:flex;
gap:25px
}

.nav a{
font-size:12px;
font-weight:bold;
letter-spacing:.12em
}

.menu-toggle{display:none}


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

.hero{
min-height:700px;
display:flex;
align-items:center;
background:
linear-gradient(
90deg,
rgba(4,5,7,.76),
rgba(4,5,7,.36),
rgba(4,5,7,.16)
),
url('assets/studio.png') center/cover
}

.hero-content{
max-width:980px;
padding-top:70px
}

/* CP AUDIO SOUND — BRAND */
.hero-content .label{
font-size:clamp(38px,5vw,64px);
letter-spacing:.08em;
font-weight:700;
line-height:1;
margin-bottom:14px
}

/* Where Your Voice Comes to Life */
.hero-content h1{
font-size:clamp(32px,4.2vw,56px);
line-height:1.05;
font-weight:700;
margin:0 0 20px;
white-space:nowrap
}

/* Professional Audio Production • Radio Imaging • Voice Over • Commercials */
.hero-content .lead{
font-size:clamp(16px,1.8vw,22px);
line-height:1.4;
margin:0 0 12px;
color:#f0f0f0
}

/* Final Hero sentence */
.hero-content>p:last-child{
font-size:clamp(14px,1.4vw,18px);
line-height:1.5;
color:#d2d4d8;
margin:0;
max-width:850px
}

.kicker,.label{
font-size:11px;
letter-spacing:.2em;
font-weight:bold;
color:#d7b56d
}

.tagline{
font-size:clamp(20px,2.4vw,24px);
margin:0 0 12px
}

.sub{color:#d2d4d8}

.buttons{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:28px
}

.btn{
display:inline-block;
padding:13px 20px;
border:1px solid #fff;
border-radius:999px;
font-size:11px;
font-weight:bold;
letter-spacing:.12em
}

.primary{
background:#fff;
color:#08090b
}


/* =========================
   GENERAL SECTIONS
   ========================= */

.section{
padding:100px 0
}

.section-head{
max-width:780px;
margin-bottom:40px
}

h2{
font-size:clamp(30px,4vw,50px);
line-height:1.08;
margin:10px 0 16px
}

.lead{
color:var(--muted);
font-size:17px
}

.services,.demos{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px
}

.card,.demo,.contact-box{
background:var(--panel);
border:1px solid var(--line);
border-radius:18px;
padding:28px
}

.card{
min-height:250px
}

.card h3,.demo h3{
font-size:20px;
margin:22px 0 10px
}

.card p,.demo p{
color:var(--muted)
}

.text-link{
font-size:11px;
font-weight:bold;
letter-spacing:.12em
}

.purpose{
border-top:1px solid var(--line);
border-bottom:1px solid var(--line)
}

.cta{
text-align:center;
padding:90px 0
}

.cta .section-head{
margin-left:auto;
margin-right:auto
}


/* =========================
   INNER PAGES
   ========================= */

.page-hero{
padding:160px 0 70px;
background:#101216
}

.page-content{
padding:75px 0;
background:var(--bg);
color:var(--text)
}

/* Reduce only the space between Home Hero and WHAT WE DO */
.hero + .page-content{
padding-top:25px
}

.hero + .page-content .section:first-child{
padding-top:45px
}

.about-grid,.contact-grid{
display:grid;
grid-template-columns:1fr .8fr;
gap:55px;
align-items:center
}

.about-photo{
border:1px solid var(--line);
border-radius:18px;
overflow:hidden;
filter:grayscale(1)
}

about-photo img{
aspect-ratio:1;
object-fit:cover
}

.service-full{
padding:45px 0;
border-bottom:1px solid var(--line)
}

.service-full ul{
columns:2;
color:var(--muted)
}

audio{
width:100%
}

.wp-block-audio audio{
    width:650px;
    max-width:100%;
}

.contact-grid{
align-items:start
}

.contact-box{
margin-bottom:20px
}

.contact-box p{
color:var(--muted)
}

.form-row{
margin-bottom:15px
}

.form-row label{
display:block;
font-size:11px;
font-weight:bold;
letter-spacing:.1em;
margin-bottom:6px
}

.form-row input,.form-row textarea{
width:100%;
padding:13px;
background:#090a0c;
color:#fff;
border:1px solid var(--line);
border-radius:9px;
font:inherit
}

.form-row textarea{
min-height:160px
}

.notice{
padding:13px;
border:1px solid var(--line);
border-radius:9px;
margin-bottom:15px
}


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

.site-footer{
border-top:1px solid var(--line);
padding:45px 0 25px;
color:var(--muted)
}

.footer-grid{
display:grid;
grid-template-columns:1.4fr 1fr 1fr;
gap:30px
}

.footer-brand img{
width:140px;
max-height:65px;
object-fit:contain;
margin-bottom:10px
}

.footer-title{
color:#fff;
font-weight:bold;
margin-bottom:8px
}

.footer-bottom{
border-top:1px solid var(--line);
margin-top:30px;
padding-top:15px;
font-size:12px
}


/* =========================
   MOBILE
   ========================= */

@media(max-width:850px){

.nav{
display:none
}

.menu-toggle{
display:block;
background:none;
color:#fff;
border:1px solid var(--line);
padding:8px
}

.nav.open{
display:flex;
position:absolute;
top:96px;
left:0;
right:0;
padding:20px;
background:#08090b;
flex-direction:column
}

.services,.demos,.about-grid,.contact-grid,.footer-grid{
grid-template-columns:1fr
}

.hero{
min-height:620px;
background-position:60% center
}

.brand img{
width:150px;
max-height:68px
}

/* Mobile Hero */

.hero-content .label{
font-size:clamp(30px,8vw,46px);
letter-spacing:.06em;
white-space:normal
}

.hero-content h1{
font-size:clamp(28px,7vw,44px);
white-space:normal
}

.hero-content .lead{
font-size:15px
}

.hero-content>p:last-child{
font-size:14px
}

.section{
padding:75px 0
}

.service-full ul{
columns:1
}

}


/* =========================
   FINAL TYPOGRAPHY & EQUIPMENT
   ========================= */

.page-content h2,.page-content h3{
letter-spacing:-.2px
}

.page-content h3{
font-size:clamp(18px,2.2vw,26px);
line-height:1.15
}

.service-full h3{
white-space:nowrap;
font-size:clamp(18px,2vw,25px)
}

.contact-box h3{
font-size:clamp(16px,1.8vw,22px);
line-height:1.15
}

.equipment-section{
margin-top:70px;
padding-top:55px;
border-top:1px solid #252b31
}

.equipment-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
margin-top:30px
}

.equipment-grid>div{
background:#11151a;
border:1px solid #252b31;
padding:24px
}

.equipment-grid h4{
margin:0 0 10px;
color:#d7b56d;
letter-spacing:1.2px
}

.equipment-grid p{
color:#b8bec4;
margin:0;
line-height:1.8
}

.brand-strip{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:25px
}

.brand-strip span{
border:1px solid #30363d;
padding:12px 16px;
color:#ddd;
font-size:12px;
letter-spacing:1px;
background:#0d1014
}

@media(max-width:800px){

.service-full h3{
white-space:normal
}

.equipment-grid{
grid-template-columns:1fr
}

}


/* =========================
   DESKTOP REFINEMENTS
   ========================= */

@media(min-width:801px){

.page-content .service-full h3,
.page-content .contact-box h3,
.page-content .cta h2{
white-space:nowrap
}

.page-content .service-full h3{
font-size:21px
}

.page-content .contact-box h3{
font-size:18px
}

.page-content .cta h2{
font-size:40px
}

}