:root{
--black:#050505;
--charcoal:#101010;
--gold:#c8a24a;
--gold-dark:#a67c21;
--white:#fff;
--text:#1f1f1f;
--soft:#f8f5ef
}

*{
box-sizing:border-box
}

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

.container{
width:min(1120px,92%);
margin:0 auto
}

.header{
background:rgba(5,5,5,.96);
border-bottom:1px solid rgba(200,162,74,.25)
}

.nav{
min-height:72px;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px
}

.brand{
color:var(--gold);
text-decoration:none;
font-family:Georgia,serif;
text-transform:uppercase;
letter-spacing:1.5px;
font-size:20px
}

.menu{
display:flex;
gap:22px;
flex-wrap:wrap
}

.menu a{
color:#fff;
text-decoration:none;
font-size:14px
}

.menu a:hover{
color:var(--gold)
}

.home{
min-height:100vh;
background:
radial-gradient(circle at top,rgba(200,162,74,.22),transparent 34%),
linear-gradient(135deg,#030303,#111 60%,#000);
color:#fff;
display:flex;
flex-direction:column
}

.hero{
text-align:center;
padding:54px 0 26px
}

.imperial-logo{
width:min(420px,80vw);
max-height:300px;
object-fit:contain;
margin-bottom:12px
}

.hero h1{
margin:0;
font-family:Georgia,serif;
font-size:clamp(38px,7vw,72px);
letter-spacing:2px;
color:var(--gold)
}

.hero p{
margin:10px 0 0;
color:#e8e8e8;
letter-spacing:2.5px;
text-transform:uppercase;
font-size:13px
}

.portfolio{
padding:24px 0 70px
}

.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px
}

.business-card{
background:rgba(255,255,255,.96);
border:1px solid rgba(200,162,74,.35);
border-radius:18px;
padding:25px 20px;
text-align:center;
text-decoration:none;
min-height:260px;
display:flex;
flex-direction:column;
justify-content:flex-start;
box-shadow:0 22px 60px rgba(0,0,0,.35);
transition:.25s
}

.business-card:hover{
transform:translateY(-6px);
box-shadow:0 28px 75px rgba(0,0,0,.48)
}

.card-logo{
height:110px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:10px
}

.card-logo img{
max-width:100%;
max-height:100px;
object-fit:contain
}

.business-card h2{
margin:12px 0 8px;
font-family:Georgia,serif;
color:var(--gold-dark);
font-size:27px
}

.business-card p{
margin-top:5px;
margin-bottom:15px;
color:#333;
line-height:1.35;
font-size:15px
}

.enter{
margin-top:8px;
color:var(--gold-dark);
font-weight:bold
}

.fashion-placeholder{
height:110px;
display:flex;
align-items:center;
justify-content:center;
font-family:Georgia,serif;
font-size:34px;
color:var(--gold-dark);
border:1px solid #e5d8b8;
border-radius:12px;
background:#faf8f2
}

.simple-footer{
margin-top:auto;
border-top:1px solid rgba(200,162,74,.25);
padding:24px 0;
color:#cfcfcf;
text-align:center;
font-size:13px
}

.simple-footer p{
margin:5px 0
}

.division-hero{
padding:88px 0;
color:#fff;
background:
radial-gradient(circle at top right,rgba(200,162,74,.18),transparent 34%),
linear-gradient(135deg,#050505,#151515)
}

.division-hero .container{
display:grid;
grid-template-columns:.65fr 1.35fr;
align-items:center;
gap:50px
}

.division-logo{
width:100%;
max-height:230px;
object-fit:contain
}

.eyebrow{
color:var(--gold);
text-transform:uppercase;
letter-spacing:3px;
font-size:12px;
font-weight:bold;
margin:0 0 10px
}

.division-hero h1{
margin:0 0 15px;
font-family:Georgia,serif;
color:var(--gold);
font-size:clamp(36px,6vw,66px)
}

.division-hero p{
max-width:720px;
color:#eee;
line-height:1.6;
font-size:18px
}

.section{
background:#fff;
padding:76px 0
}

.section.alt{
background:var(--soft)
}

.section.dark{
background:var(--charcoal);
color:#fff
}

.section h2{
font-family:Georgia,serif;
color:var(--gold-dark);
font-size:clamp(30px,4vw,46px);
margin:0 0 26px
}

.service-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px
}

.service{
border:1px solid #e2d7bd;
padding:28px;
border-radius:14px;
background:#fff
}

.service h3{
margin:0 0 10px;
color:var(--gold-dark);
font-family:Georgia,serif;
font-size:23px
}

.service p{
margin:0;
color:#333;
line-height:1.55
}

.contact-box{
max-width:760px;
margin:0 auto;
text-align:center
}

.contact-box p{
line-height:1.7
}

@media(max-width:850px){

.nav{
flex-direction:column;
padding:18px 0
}

.menu{
justify-content:center;
gap:14px
}

.cards,
.service-grid{
grid-template-columns:1fr
}

.business-card{
min-height:240px
}

.division-hero .container{
grid-template-columns:1fr;
text-align:center
}

}