:root{

--black:#080909;
--black2:#111313;
--black3:#181b1b;

--white:#ffffff;
--cream:#f5f1e7;

--gold:#c9a85a;
--gold2:#e3c979;

--text:#181818;
--muted:#777;

--line:rgba(255,255,255,.10);
--light-line:rgba(0,0,0,.10);

--shadow:0 25px 80px rgba(0,0,0,.18);

--max:1250px;

--ease:cubic-bezier(.2,.8,.2,1);

}


*{
margin:0;
padding:0;
box-sizing:border-box;
}


html{
scroll-behavior:smooth;
}


body{

font-family:

Inter,
Segoe UI,
Arial,
sans-serif;

background:var(--cream);

color:var(--text);

line-height:1.6;

overflow-x:hidden;

}


body.loading{
overflow:hidden;
}


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


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


button,
input,
textarea,
select{
font:inherit;
}


.container{

width:min(92%,var(--max));

margin:auto;

}


.topbar{

background:#050606;

color:#aaa;

font-size:11px;

letter-spacing:1.4px;

text-transform:uppercase;

}


.topbar-inner{

height:38px;

display:flex;

align-items:center;

justify-content:space-between;

}


header{

position:sticky;

top:0;

z-index:1000;

background:rgba(8,9,9,.88);

backdrop-filter:blur(20px);

border-bottom:1px solid rgba(255,255,255,.08);

}


.nav{

min-height:78px;

display:flex;

align-items:center;

justify-content:space-between;

gap:25px;

}


.logo{

display:flex;

align-items:center;

gap:12px;

transition:.4s var(--ease);

}


.logo:hover{

transform:translateY(-3px);

}


.logo-mark{

width:44px;

height:44px;

border:1px solid var(--gold);

color:var(--gold);

display:grid;

place-items:center;

font-weight:900;

font-family:Georgia,serif;

position:relative;

transition:.4s var(--ease);

}


.logo:hover .logo-mark{

transform:rotate(-7deg) scale(1.08);

box-shadow:0 0 25px rgba(201,168,90,.25);

}


.logo-text strong{

display:block;

color:#fff;

font-family:Georgia,serif;

font-size:17px;

}


.logo-text small{

display:block;

color:var(--gold);

font-size:9px;

letter-spacing:3px;

text-transform:uppercase;

}


nav{

display:flex;

align-items:center;

gap:25px;

}


nav a{

color:#aaa;

font-size:12px;

font-weight:700;

text-transform:uppercase;

letter-spacing:1px;

padding:30px 0;

position:relative;

transition:.35s var(--ease);

}


nav a:hover,
nav a.active{

color:#fff;

transform:translateY(-2px);

}


nav a::after{

content:"";

position:absolute;

left:0;

bottom:20px;

width:0;

height:2px;

background:var(--gold);

transition:.35s var(--ease);

}


nav a:hover::after,
nav a.active::after{

width:100%;

}


.nav-actions{

display:flex;

align-items:center;

gap:12px;

}


.nav-project-btn{

background:var(--gold);

color:#111;

padding:12px 18px;

font-size:11px;

font-weight:900;

text-transform:uppercase;

letter-spacing:1px;

transition:.35s var(--ease);

}


.nav-project-btn:hover{

background:var(--gold2);

transform:translateY(-3px);

box-shadow:0 12px 30px rgba(201,168,90,.2);

}


.menu-button{

display:none;

background:none;

border:1px solid #444;

color:#fff;

width:43px;

height:43px;

}


.moving-orb{

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(201,168,90,.12),
transparent 65%
);

filter:blur(20px);

animation:orbMotion 15s ease-in-out infinite;

}


@keyframes orbMotion{

0%{

left:-15%;
top:15%;

}

50%{

left:65%;
top:45%;

}

100%{

left:-15%;
top:15%;

}

}


/* PRELOADER */

#preloader{

position:fixed;

inset:0;

z-index:99999;

background:#050606;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

transition:opacity .8s var(--ease),
visibility .8s;

}


#preloader.loaded{

opacity:0;

visibility:hidden;

}


.loader-ring{

width:65px;

height:65px;

border-radius:50%;

border:1px solid #333;

border-top-color:var(--gold);

animation:loaderSpin 1s linear infinite;

}


@keyframes loaderSpin{

to{

transform:rotate(360deg);

}

}


.loader-brand{

margin-top:25px;

text-align:center;

color:#fff;

}


.loader-brand span{

display:block;

font-family:Georgia,serif;

color:var(--gold);

font-size:24px;

}


.loader-brand strong{

display:block;

font-family:Georgia,serif;

font-size:16px;

letter-spacing:3px;

}


.loader-brand small{

display:block;

font-size:9px;

color:#777;

letter-spacing:4px;

}


.loader-line{

width:220px;

height:2px;

background:#222;

margin-top:25px;

overflow:hidden;

}


.loader-line i{

display:block;

width:0;

height:100%;

background:var(--gold);

animation:loaderLine 1.5s ease forwards;

}


@keyframes loaderLine{

to{

width:100%;

}

}


#preloader p{

font-size:10px;

color:#666;

margin-top:15px;

letter-spacing:1px;

}


/* HERO */

.hero-home{

position:relative;

min-height:calc(100vh - 116px);

background:#080909;

color:#fff;

overflow:hidden;

}


.hero-background-image{

position:absolute;

inset:0;

background:

linear-gradient(
90deg,
rgba(5,6,6,.97) 0%,
rgba(5,6,6,.84) 40%,
rgba(5,6,6,.28) 100%
),

url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=2200&q=85")
center/cover;

opacity:.8;

}


.hero-light{

position:absolute;

width:600px;

height:600px;

right:-150px;

top:5%;

background:

radial-gradient(
circle,
rgba(201,168,90,.16),
transparent 68%
);

filter:blur(20px);

animation:heroLight 8s ease-in-out infinite;

}


@keyframes heroLight{

50%{

transform:translate(-80px,50px) scale(1.2);

}

}


.hero-layout{

position:relative;

z-index:2;

min-height:calc(100vh - 116px);

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}


.hero-copy{

padding:80px 0;

animation:heroText 1.1s var(--ease);

}


@keyframes heroText{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:none;

}

}


.hero-label{

color:var(--gold);

font-size:11px;

font-weight:900;

letter-spacing:4px;

margin-bottom:25px;

}


.hero-label::before{

content:"";

display:inline-block;

width:40px;

height:1px;

background:var(--gold);

vertical-align:middle;

margin-right:12px;

}


.hero-copy h1{

font-family:Georgia,"Times New Roman",serif;

font-size:clamp(55px,7vw,100px);

line-height:.92;

letter-spacing:-5px;

max-width:700px;

}


.hero-copy h1 span{

color:var(--gold2);

display:inline-block;

animation:textFloat 5s ease-in-out infinite;

}


@keyframes textFloat{

50%{

transform:translateY(-8px);

}

}


.hero-copy p{

max-width:620px;

color:#aaa;

font-size:16px;

margin:30px 0;

}


.hero-buttons{

display:flex;

flex-wrap:wrap;

gap:12px;

}


.button{

display:inline-flex;

align-items:center;

justify-content:center;

min-height:50px;

padding:0 22px;

font-size:11px;

font-weight:900;

letter-spacing:1px;

text-transform:uppercase;

transition:.4s var(--ease);

}


.button-gold{

background:var(--gold);

color:#111;

}


.button-gold:hover{

background:var(--gold2);

transform:translateY(-5px);

box-shadow:0 15px 40px rgba(201,168,90,.25);

}


.button-outline{

border:1px solid rgba(255,255,255,.25);

color:#fff;

}


.button-outline:hover{

border-color:var(--gold);

color:var(--gold);

transform:translateY(-5px);

}


.button-dark{

background:#111;

color:#fff;

}


.button-dark:hover{

background:#292929;

transform:translateY(-4px);

}


.hero-mini-stats{

display:flex;

gap:45px;

margin-top:55px;

}


.hero-mini-stats strong{

display:block;

font-family:Georgia,serif;

font-size:27px;

color:#fff;

}


.hero-mini-stats span{

font-size:9px;

color:#777;

text-transform:uppercase;

letter-spacing:1px;

}


.hero-visual{

position:relative;

height:650px;

display:flex;

align-items:center;

justify-content:center;

}


.hero-frame{

position:relative;

width:min(100%,500px);

height:570px;

overflow:hidden;

border:1px solid rgba(255,255,255,.16);

box-shadow:0 30px 90px rgba(0,0,0,.5);

transform:rotate(2deg);

animation:imageFloat 7s ease-in-out infinite;

}


@keyframes imageFloat{

50%{

transform:rotate(-1deg) translateY(-15px);

}

}


.hero-frame img{

width:100%;

height:100%;

object-fit:cover;

filter:saturate(.8);

}


.frame-glow{

position:absolute;

inset:0;

background:
linear-gradient(
transparent 45%,
rgba(0,0,0,.75)
);

}


.camera-card{

position:absolute;

bottom:25px;

left:25px;

display:flex;

align-items:center;

gap:13px;

padding:15px 18px;

background:rgba(10,10,10,.72);

backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,.13);

}


.camera-icon{

width:38px;

height:38px;

border-radius:50%;

display:grid;

place-items:center;

background:var(--gold);

color:#111;

}


.camera-card strong{

display:block;

font-size:11px;

letter-spacing:2px;

}


.camera-card small{

display:block;

font-size:8px;

color:#888;

letter-spacing:2px;

}


.floating-card{

position:absolute;

background:rgba(255,255,255,.08);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.15);

box-shadow:0 20px 50px rgba(0,0,0,.35);

padding:18px;

z-index:4;

}


.card-top{

right:-10px;

top:80px;

width:150px;

animation:floatCard 5s ease-in-out infinite;

}


.card-top span{

color:var(--gold);

font-size:10px;

}


.card-top strong{

display:block;

font-family:Georgia,serif;

font-size:18px;

margin-top:10px;

}


.card-bottom{

left:-20px;

bottom:100px;

color:#ccc;

font-size:10px;

letter-spacing:1px;

animation:floatCard 6s ease-in-out infinite reverse;

}


.live-dot{

width:8px;

height:8px;

display:inline-block;

border-radius:50%;

background:var(--gold);

margin-right:8px;

box-shadow:0 0 15px var(--gold);

}


@keyframes floatCard{

50%{

transform:translateY(-15px);

}

}


/* INTRO */

.home-intro{

position:relative;

z-index:1;

padding:110px 0;

background:var(--cream);

}


.intro-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:start;

}


.eyebrow{

color:var(--gold);

font-size:10px;

font-weight:900;

letter-spacing:3px;

text-transform:uppercase;

margin-bottom:15px;

}


.intro-grid h2{

font-family:Georgia,serif;

font-size:clamp(38px,5vw,65px);

line-height:1.02;

}


.intro-grid p{

color:#777;

font-size:16px;

max-width:550px;

margin-bottom:25px;

}


.text-link{

color:#9c7a32;

font-weight:900;

font-size:12px;

text-transform:uppercase;

letter-spacing:1px;

}


/* SERVICES */

.home-services{

padding:110px 0;

background:#e9e5db;

position:relative;

z-index:1;

}


.section-heading{

display:flex;

justify-content:space-between;

align-items:end;

gap:30px;

margin-bottom:50px;

}


.section-heading h2{

font-family:Georgia,serif;

font-size:clamp(38px,5vw,65px);

line-height:1;

}


.service-preview-grid{

display:grid;

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

gap:1px;

background:#d2cec4;

}


.service-preview{

background:#f4f1e8;

padding:38px;

min-height:310px;

transition:.5s var(--ease);

}


.service-preview:hover{

background:#fff;

transform:translateY(-8px);

box-shadow:var(--shadow);

z-index:2;

}


.service-preview>span{

font-family:Georgia,serif;

color:#aaa;

font-size:13px;

}


.service-symbol{

font-size:30px;

margin:35px 0 20px;

}


.service-preview h3{

font-family:Georgia,serif;

font-size:23px;

margin-bottom:10px;

}


.service-preview p{

color:#777;

font-size:13px;

}


/* CTA */

.home-cta{

padding:90px 0;

background:#0b0c0c;

color:#fff;

position:relative;

overflow:hidden;

}


.cta-box{

display:flex;

align-items:center;

justify-content:space-between;

gap:40px;

}


.cta-box h2{

font-family:Georgia,serif;

font-size:clamp(40px,5vw,65px);

line-height:1;

}


.cta-box p{

color:#888;

margin-top:15px;

}


/* FOOTER */

footer{

position:relative;

z-index:2;

background:#050606;

color:#fff;

}


.footer-main{

padding:75px 0;

display:grid;

grid-template-columns:2fr 1fr 1fr 1.5fr;

gap:50px;

}


.footer-brand p{

color:#777;

font-size:13px;

max-width:330px;

margin-top:20px;

}


.footer-column{

display:flex;

flex-direction:column;

gap:11px;

}


.footer-column h4{

font-size:10px;

letter-spacing:2px;

text-transform:uppercase;

color:var(--gold);

margin-bottom:12px;

}


.footer-column a,
.footer-column span{

color:#777;

font-size:12px;

transition:.3s;

}


.footer-column a:hover{

color:var(--gold);

transform:translateX(4px);

}


.footer-bottom{

border-top:1px solid #222;

}


.footer-bottom .container{

min-height:65px;

display:flex;

justify-content:space-between;

align-items:center;

color:#555;

font-size:10px;

letter-spacing:.5px;

}


/* INTERNAL PAGE */

.page-hero{

position:relative;

min-height:450px;

background:

linear-gradient(
90deg,
#080909,
rgba(8,9,9,.78)
),

url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=2200&q=80")
center/cover;

color:#fff;

display:flex;

align-items:end;

padding:80px 0;

overflow:hidden;

}


.page-hero h1{

font-family:Georgia,serif;

font-size:clamp(50px,7vw,90px);

line-height:.95;

letter-spacing:-4px;

}


.page-hero p{

max-width:650px;

color:#aaa;

margin-top:20px;

}


/* CONTENT */

.content-section{

padding:110px 0;

}


.two-column{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}


.content-image{

height:560px;

object-fit:cover;

border-radius:5px;

}


.content-text h2{

font-family:Georgia,serif;

font-size:clamp(35px,5vw,60px);

line-height:1;

margin-bottom:25px;

}


.content-text p{

color:#777;

margin-bottom:18px;

}


/* CARDS */

.cards-grid{

display:grid;

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

gap:20px;

}


.info-card{

padding:35px;

border:1px solid var(--light-line);

background:#fff;

transition:.45s var(--ease);

}


.info-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

border-color:rgba(201,168,90,.4);

}


.info-card-number{

color:var(--gold);

font-family:Georgia,serif;

}


.info-card h3{

font-family:Georgia,serif;

font-size:23px;

margin:20px 0 10px;

}


.info-card p{

color:#777;

font-size:13px;

}


/* PROJECT GRID */

.project-grid{

display:grid;

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

gap:20px;

}


.project-item{

height:420px;

position:relative;

overflow:hidden;

background:#111;

}


.project-item img{

width:100%;

height:100%;

object-fit:cover;

transition:.8s var(--ease);

}


.project-item:hover img{

transform:scale(1.08);

}


.project-overlay{

position:absolute;

inset:0;

display:flex;

flex-direction:column;

justify-content:end;

padding:30px;

color:#fff;

background:
linear-gradient(
transparent,
rgba(0,0,0,.9)
);

}


.project-overlay span{

font-size:9px;

letter-spacing:2px;

color:var(--gold);

text-transform:uppercase;

}


.project-overlay h3{

font-family:Georgia,serif;

font-size:25px;

}


/* FORM */

.application-wrapper{

background:#f0ece2;

padding:110px 0;

}


.application-intro{

max-width:800px;

margin-bottom:50px;

}


.application-intro h2{

font-family:Georgia,serif;

font-size:clamp(40px,6vw,70px);

line-height:1;

}


.application-intro p{

color:#777;

margin-top:20px;

}


.application-form{

background:#fff;

padding:45px;

box-shadow:var(--shadow);

border:1px solid rgba(0,0,0,.06);

}


.form-section{

padding:35px 0;

border-bottom:1px solid #ddd;

}


.form-section:first-child{

padding-top:0;

}


.form-section:last-child{

border-bottom:0;

}


.form-section-title{

font-family:Georgia,serif;

font-size:25px;

margin-bottom:25px;

}


.form-grid{

display:grid;

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

gap:20px;

}


.form-group{

display:flex;

flex-direction:column;

gap:7px;

}


.form-group.full{

grid-column:1/-1;

}


.form-group label{

font-size:10px;

font-weight:900;

letter-spacing:1px;

text-transform:uppercase;

}


.form-group input,
.form-group textarea,
.form-group select{

width:100%;

border:1px solid #d7d3ca;

background:#faf9f5;

padding:14px;

outline:none;

transition:.3s;

}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{

border-color:var(--gold);

box-shadow:0 0 0 3px rgba(201,168,90,.12);

}


.form-group textarea{

min-height:150px;

resize:vertical;

}


/* UPLOAD */

.upload-box{

position:relative;

border:1.5px dashed #bbb;

background:#faf9f5;

min-height:150px;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

padding:25px;

transition:.4s;

overflow:hidden;

}


.upload-box:hover{

border-color:var(--gold);

background:#fffdf6;

transform:translateY(-3px);

}


.upload-box.dragging{

border-color:var(--gold);

background:#fff8e8;

transform:scale(1.01);

}


.upload-box input[type=file]{

position:absolute;

inset:0;

width:100%;

height:100%;

opacity:0;

cursor:pointer;

}


.upload-content{

pointer-events:none;

}


.upload-icon{

font-size:28px;

margin-bottom:10px;

}


.upload-content strong{

display:block;

font-size:12px;

}


.upload-content small{

display:block;

color:#888;

margin-top:6px;

font-size:10px;

}


.file-status{

margin-top:8px;

font-size:11px;

color:#777;

}


.file-status.error{

color:#b83232;

}


.file-status.success{

color:#328047;

}


/* SUBMIT */

.submit-area{

display:flex;

align-items:center;

justify-content:space-between;

gap:25px;

}


.submit-note{

font-size:10px;

color:#888;

max-width:500px;

}


.form-submit{

border:0;

background:var(--gold);

color:#111;

padding:17px 28px;

font-weight:900;

font-size:11px;

letter-spacing:1px;

text-transform:uppercase;

transition:.35s;

}


.form-submit:hover{

background:var(--gold2);

transform:translateY(-4px);

box-shadow:0 15px 30px rgba(201,168,90,.25);

}


/* RESPONSIVE */

@media(max-width:1050px){

nav{

gap:14px;

}


nav a{

font-size:10px;

}


.service-preview-grid{

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

}


.cards-grid,
.project-grid{

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

}


.footer-main{

grid-template-columns:1fr 1fr;

}

}


@media(max-width:850px){

.topbar{

display:none;

}


.nav{

min-height:70px;

}


.menu-button{

display:block;

}


nav{

position:absolute;

left:0;

right:0;

top:70px;

background:#080909;

display:flex;

flex-direction:column;

align-items:stretch;

padding:10px 5%;

transform:translateY(-140%);

transition:.4s;

}


nav.open{

transform:none;

}


nav a{

padding:15px 0;

border-bottom:1px solid #222;

}


nav a::after{

display:none;

}


.nav-project-btn{

display:none;

}


.hero-layout{

grid-template-columns:1fr;

}


.hero-visual{

height:500px;

}


.hero-copy{

padding:80px 0 20px;

}


.two-column{

grid-template-columns:1fr;

}


.cta-box{

flex-direction:column;

align-items:flex-start;

}


.footer-main{

grid-template-columns:1fr 1fr;

}


}


@media(max-width:600px){

.hero-copy h1{

letter-spacing:-3px;

}


.hero-mini-stats{

gap:22px;

}


.hero-visual{

height:450px;

}


.hero-frame{

height:400px;

}


.floating-card{

display:none;

}


.intro-grid{

grid-template-columns:1fr;

gap:35px;

}


.section-heading{

display:block;

}


.section-heading .button{

margin-top:20px;

}


.service-preview-grid,
.cards-grid,
.project-grid{

grid-template-columns:1fr;

}


.content-section,
.application-wrapper,
.home-intro,
.home-services{

padding:75px 0;

}


.application-form{

padding:22px;

}


.form-grid{

grid-template-columns:1fr;

}


.form-group.full{

grid-column:auto;

}


.submit-area{

flex-direction:column;

align-items:stretch;

}


.footer-main{

grid-template-columns:1fr;

}


.footer-bottom .container{

flex-direction:column;

justify-content:center;

gap:8px;

padding:20px 0;

}

}