:root{--black:#0b0b0b;--paper:#f7f6f2;--gold:#c58b20;--muted:#a7a7a3}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:#fff;font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,6vw,88px);border-bottom:1px solid #292929;position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:10px;letter-spacing:.11em;font-weight:800}
.brand b{color:var(--gold)}
.roof{font-size:31px;color:var(--gold);line-height:0;transform:translateY(-3px)}
.nav-call{font-size:.9rem;border-bottom:1px solid var(--gold);padding-bottom:5px}
.hero{min-height:calc(100vh - 82px);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:7vw;padding:70px clamp(24px,6vw,88px);overflow:hidden;background:radial-gradient(circle at 80% 20%,#252116 0,transparent 33%)}
.eyebrow{text-transform:uppercase;letter-spacing:.19em;color:var(--gold);font-weight:700;font-size:.78rem}
.hero h1{font-size:clamp(3.5rem,8vw,7.8rem);line-height:.86;letter-spacing:-.055em;text-transform:uppercase;margin:24px 0 30px}
.hero h1 span{color:transparent;-webkit-text-stroke:1.5px var(--gold)}
.intro{color:#c4c4c1;font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.6;max-width:600px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.button{padding:17px 22px;border:1px solid var(--gold);font-weight:700;font-size:.92rem}
.primary{background:var(--gold);color:#111}
.secondary:hover,.primary:hover{filter:brightness(1.12)}
.logo-panel{background:#fff;padding:clamp(18px,3vw,40px);box-shadow:0 35px 90px #0008}
.logo-panel img{width:100%;display:block}
.services{background:var(--paper);color:var(--black);padding:100px clamp(24px,6vw,88px)}
.services>div:first-child{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:55px}
.services h2,.contact h2{font-size:clamp(2.3rem,5vw,4.4rem);letter-spacing:-.045em;line-height:1;margin:12px 0}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #bbb}
.service-grid article{padding:28px 24px 20px 0;border-right:1px solid #ccc;min-height:220px}
.service-grid article+article{padding-left:24px}
.service-grid article:last-child{border-right:0}
.service-grid span{font-size:.75rem;color:var(--gold);font-weight:800}
.service-grid h3{font-size:1.25rem;margin:35px 0 12px}
.service-grid p{color:#666;line-height:1.55;font-size:.95rem}
.contact{padding:95px clamp(24px,6vw,88px);display:grid;grid-template-columns:.9fr 1.1fr;gap:9vw;align-items:center}
.contact-links{display:grid}
.contact-links a{padding:20px 0;border-bottom:1px solid #333;font-size:clamp(1rem,2vw,1.35rem);word-break:break-word}
.contact-links small{display:block;color:var(--gold);font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;margin-bottom:6px}
footer{display:flex;justify-content:space-between;gap:20px;padding:28px clamp(24px,6vw,88px);border-top:1px solid #292929;color:#888;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}
@media(max-width:820px){.nav-call{font-size:0}
.nav-call:after{content:'Call';font-size:.9rem}
.hero{grid-template-columns:1fr;padding-top:75px}
.hero h1{font-size:clamp(3.5rem,16vw,6rem)}
.logo-panel{max-width:520px}
.service-grid{grid-template-columns:1fr 1fr}
.service-grid article:nth-child(2){border-right:0}
.contact{grid-template-columns:1fr}
.services>div:first-child,footer{align-items:start;flex-direction:column}
}
@media(max-width:520px){.brand{font-size:.8rem}
.service-grid{grid-template-columns:1fr}
.service-grid article{border-right:0;border-bottom:1px solid #ccc;padding-left:0!important;min-height:auto}
.actions{display:grid}
.button{text-align:center}
}
.portfolio{background:#111;padding:100px clamp(24px,6vw,88px)}
.about{background:#0b0b0b;padding:100px clamp(24px,6vw,88px);display:grid;grid-template-columns:.65fr 1.35fr;gap:8vw;border-top:1px solid #292929}
.about-label{display:flex;flex-direction:column;justify-content:space-between;gap:50px}
.about-label span{color:#777;font-size:.78rem;text-transform:uppercase;letter-spacing:.15em}
.about-copy{max-width:850px}
.about-copy h2{font-size:clamp(2.3rem,5vw,4.4rem);letter-spacing:-.045em;line-height:1.02;margin:0 0 38px}
.about-copy p{color:#bbb;font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.7;margin:0 0 20px}
.portfolio-heading{display:grid;grid-template-columns:1fr 1fr;gap:16px 60px;align-items:end;margin-bottom:48px}
.portfolio-heading .eyebrow{grid-column:1/-1;margin:0}
.portfolio-heading h2{font-size:clamp(2.3rem,5vw,4.4rem);letter-spacing:-.045em;line-height:1;margin:0}
.portfolio-heading>p:last-child{color:#aaa;line-height:1.6;margin:0;max-width:560px}
.portfolio-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.portfolio-grid img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#1b1b1b;border:1px solid #333;transition:transform .2s ease,filter .2s ease}
.portfolio-grid img:hover{transform:translateY(-3px);filter:brightness(1.08)}
.project-request{background:var(--paper);color:var(--black);padding:100px clamp(24px,6vw,88px);display:grid;grid-template-columns:.75fr 1.25fr;gap:8vw;align-items:start}
.request-intro{position:sticky;top:32px}
.request-intro h2{font-size:clamp(2.3rem,5vw,4.4rem);letter-spacing:-.045em;line-height:1.02;margin:12px 0 28px}
.request-intro>p:last-child{color:#666;line-height:1.65;max-width:540px}
.request-intro strong{color:#111}
.request-form{background:#fff;border:1px solid #ddd;padding:clamp(24px,4vw,48px);box-shadow:0 20px 55px #00000012}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.request-form label>span,.request-form legend{display:block;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.11em;margin-bottom:10px}
.request-form input[type="text"],.request-form input[type="email"],.request-form input[type="tel"],.request-form textarea{width:100%;border:1px solid #bbb;background:#fafafa;color:#111;font:inherit;padding:15px;border-radius:0}
.request-form input:focus,.request-form textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.request-form fieldset{border:0;padding:0;margin:34px 0}
.service-options{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #ddd}
.service-options label{display:flex;align-items:center;gap:10px;padding:14px 8px 14px 0;border-bottom:1px solid #ddd;color:#444}
.service-options input{width:19px;height:19px;accent-color:var(--gold)}
.project-details{display:block}
.request-form textarea{resize:vertical;min-height:145px}
.form-submit{margin-top:24px;background:var(--gold);color:#111;border:0;padding:17px 24px;font:inherit;font-weight:800;cursor:pointer;width:100%}
.form-submit:hover{filter:brightness(1.08)}
.form-note{color:#777;font-size:.82rem;line-height:1.5;margin:15px 0 0}
.form-message{color:#9a6710;font-weight:700;min-height:1.2em;margin:10px 0 0}
@media(max-width:900px){.portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.portfolio-heading{grid-template-columns:1fr}
.about{grid-template-columns:1fr;gap:45px}
.about-label{gap:10px}
.project-request{grid-template-columns:1fr;gap:45px}
.request-intro{position:static}}
@media(max-width:600px){.portfolio{padding-top:75px;padding-bottom:75px}
.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.project-request{padding-top:75px;padding-bottom:75px}
.form-grid,.service-options{grid-template-columns:1fr}
.request-form{padding:24px}}