*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
margin:0;
font-family:Inter,Arial,sans-serif;
background:#111;
color:#fff;
line-height:1.6}
a{
color:inherit;
text-decoration:none}
button{
font:inherit}
.site-header{
position:fixed;
z-index:50;
top:0;
left:0;
right:0;
height:88px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 4vw;
background:rgba(10,10,10,.62);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(255,255,255,.12)}
.brand img{
width:88px;
height:auto;
filter:brightness(0) invert(1)}
.nav{
display:flex;
align-items:center;
gap:30px;
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.06em}
.nav-cta{
border:1px solid rgba(255,255,255,.5);
padding:12px 17px;
border-radius:3px}
.menu-toggle{
display:none;
background:none;
border:0;
color:#fff}
.hero{
position:relative;
min-height:100svh;
display:flex;
align-items:flex-end;
padding:150px 7vw 80px;
overflow:hidden}
.hero-media,.final-bg{
position:absolute;
inset:0;
display:grid;
place-items:center}
.hero-media{
background:url("assets/portfoy/hero.jpg") center center / cover no-repeat}
.final-bg{
background:url("assets/hiltonfinal.jpg") center center / cover no-repeat;
}

.final-bg:before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.25));
}
.media-placeholder{
font-size:11px;
letter-spacing:.14em;
color:rgba(255,255,255,.42);
text-align:center}
.hero-overlay,.final-overlay{
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.25) 60%,rgba(0,0,0,.25)),linear-gradient(0deg,rgba(0,0,0,.65),transparent 55%)}
.hero-content{
position:relative;
z-index:2;
max-width:720px}
.eyebrow,.section-kicker{
font-size:11px;
font-weight:800;
letter-spacing:.15em;
text-transform:uppercase;
margin:0 0 20px}
.hero h1,.section-heading h2,.intro h2,.center-heading h2,.tour h2,.about h2,.final-content h2{
font-family:Manrope,Inter,sans-serif;
text-transform:uppercase;
letter-spacing:-.045em;
line-height:1.1;
margin:0}
.hero h1{
font-size:clamp(48px,7vw,100px);
max-width:850px}
.hero h1 span,.section-heading h2 span,.intro h2 span,.center-heading h2 span,.tour h2 span,.about h2 span,.final-content h2 span{
font-weight:400}
.hero-copy{
font-size:17px;
max-width:620px;
margin:28px 0}
.button{
display:inline-flex;
align-items:center;
gap:18px;
padding:15px 22px;
border:1px solid #fff;
font-size:12px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.05em}
.button-light{
background:#fff;
color:#111}
.button-outline{
background:transparent;
color:#fff}
.hero-meta{
font-size:12px;
margin-top:28px;
color:#ddd}
.section-light{
background:#f4f4f2;
color:#111}
.section-dark{
background:#111;
color:#fff}
.intro,.services,.sectors,.portfolio,.tour,.about,.process{
padding:110px 7vw}
.intro-grid,.about-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:9vw}
.intro h2,.about h2{
font-size:clamp(42px,5vw,76px)}
.intro-copy,.about-copy{
max-width:590px;
font-size:16px;
color:#4d4d4d}
.intro-copy p{
margin:0 0 18px}
.section-heading{
display:flex;
align-items:end;
justify-content:space-between;
gap:40px;
margin-bottom:55px}
.section-heading h2,.center-heading h2,.tour h2,.final-content h2{
font-size:clamp(45px,5.5vw,84px)}
.section-heading>p{
max-width:420px;
color:#aaa;
margin:0}
.service-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
background:#333}
.service-card{
background:#171717;
padding:18px;
min-height:540px;
display:flex;
flex-direction:column}
.service-image{
    height:250px;
    background:#292929;
    margin-bottom:26px;
    position:relative;
    overflow:hidden;
}
.service-image img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.service-number{
font-size:13px;
color:#888}
.service-card h3{
font-family:Manrope,sans-serif;
font-size:31px;
text-transform:uppercase;
margin:7px 0}
.service-card p{
color:#aaa;
font-size:14px;
margin:0 0 25px}
.service-card a{
margin-top:auto;
font-size:11px;
text-transform:uppercase;
font-weight:800}
.center-heading{
text-align:center;
margin-bottom:55px}
.sectors{
padding-bottom:125px}
.sector-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px}
.sector-image{
height:250px;
background:#ddd;
color:#555;
display:grid;
place-items:center;
overflow:hidden; 
}

.sector-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.sector-card h3{
font-family:Manrope,sans-serif;
text-transform:uppercase;
font-size:21px;
margin:18px 0 6px}
.sector-card p{
font-size:14px;
color:#555;
margin:0}
.portfolio{
border-top:1px solid #292929}
.filters{
display:flex;
gap:18px;
flex-wrap:wrap}
.filters button{
background:none;
border:0;
color:#888;
cursor:pointer;
font-size:11px;
text-transform:uppercase;
font-weight:800}
.filters .active{
color:#fff}
.portfolio-grid{
display:grid;
grid-template-columns:repeat(12,1fr);
gap:18px}
.project{
grid-column:span 4;
position:relative;
overflow:hidden}
.project-large{
grid-column:span 8}
.project-image{
height:330px;
background:linear-gradient(135deg,#34373a,#1b1b1b);
display:grid;
place-items:center}
.project-photo{
width:100%;
height:330px;
display:block;
object-fit:cover}
.selection-item img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.project-large .project-image{
height:520px}
.project-info{
padding:15px 0}
.project-info span,.project-info small{
font-size:10px;
letter-spacing:.08em;
color:#999;
text-transform:uppercase}
.project-info h3{
font-family:Manrope,sans-serif;
text-transform:uppercase;
font-size:25px;
margin:5px 0}
.tour{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:8vw;
align-items:center;
border-top:1px solid #292929}
.tour p{
color:#aaa;
max-width:540px;
margin:30px 0}
.tour-visual{
min-height:430px;
border:1px solid #333;
background:radial-gradient(circle,#4a4d50,#171717);
display:grid;
place-items:center}
.tour-visual video{
    width:100%;
    height:100%;
    min-height:430px;
    display:block;
    object-fit:cover;
}
.about{
padding-bottom:60px}
.stats{
display:grid;
grid-template-columns:repeat(3,1fr);
border-top:1px solid #ccc;
margin-top:70px}
.stats div{
padding:30px 0;
border-right:1px solid #ccc}
.stats div:last-child{
border-right:0}
.stats strong{
display:block;
font-family:Manrope,sans-serif;
font-size:46px}
.stats span{
font-size:11px;
text-transform:uppercase;
letter-spacing:.08em;
color:#666}
.process{
border-top:1px solid #292929}
.process-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
background:#333}
.process-grid article{
background:#171717;
padding:35px;
min-height:250px}
.process-grid b{
font-size:12px;
color:#888}
.process-grid h3{
text-transform:uppercase;
font-family:Manrope,sans-serif;
font-size:21px}
.process-grid p{
color:#aaa;
font-size:14px}
.final-cta{
position:relative;
min-height:680px;
display:flex;
align-items:center;
padding:100px 7vw;
overflow:hidden}
.final-content{
position:relative;
z-index:2;
max-width:720px}
.final-content p{
max-width:520px;
color:#ddd}
.final-content strong{
display:block;
margin-top:25px;
font-size:17px}
.footer{
display:grid;
grid-template-columns:2fr 1.5fr 1fr auto;
gap:40px;
padding:55px 7vw;
background:#0a0a0a;
color:#aaa;
font-size:12px}
.footer img{
width:100px;
filter:brightness(0) invert(1);
margin-bottom:15px}
.footer p{
margin:5px 0}
.footer a{
display:block;
color:#fff;
margin:4px 0}
.copyright{
align-self:end;
white-space:nowrap}
@media(max-width:900px){
.nav{
gap:15px}
.nav-cta{
display:none}
.service-grid,.sector-grid{
grid-template-columns:repeat(2,1fr)}
.intro-grid,.about-grid,.tour{
grid-template-columns:1fr}
.portfolio-grid{
grid-template-columns:1fr}
.project,.project-large{
grid-column:span 1}
.project-image,.project-large .project-image,.project-photo,.project-large .project-photo{
height:360px}
.process-grid{
grid-template-columns:repeat(2,1fr)}
.footer{
grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
body{
overflow-x:hidden}
.site-header{
height:72px;
padding:0 5vw}
.brand img{
width:74px}
.menu-toggle{
display:flex;
flex-direction:column;
gap:6px}
.menu-toggle span{
width:25px;
height:1px;
background:#fff}
.nav{
display:none;
position:absolute;
top:72px;
left:0;
right:0;
background:#111;
padding:24px 5vw;
flex-direction:column;
align-items:flex-start}
.nav.open{
display:flex}
.nav-cta{
display:block}
.hero{
padding:130px 5vw 55px}
.hero h1{
font-size:44px;
line-height:1;
letter-spacing:-.04em}
.hero-copy{
font-size:15px}
.intro,.services,.sectors,.portfolio,.tour,.about,.process{
padding:75px 5vw}
.service-grid,.sector-grid,.process-grid{
grid-template-columns:1fr}
.service-card{
min-height:0}
.service-image{
height:220px}
.section-heading{
display:block}
.section-heading>p{
margin-top:25px}
.filters{
margin-top:28px}
.stats{
grid-template-columns:1fr}
.stats div{
border-right:0;
border-bottom:1px solid #ccc}
.footer{
grid-template-columns:1fr;
padding:45px 5vw}
.copyright{
margin-top:20px}
.final-cta{
min-height:560px;
padding:80px 5vw}
.final-content h2{
font-size:54px}
}

.portfolio-featured-grid .project-image {
    overflow: hidden;
}

.portfolio-featured-grid .project-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}