*{margin:0;padding:0;box-sizing:border-box}
:root{--navy:#061d35;--deep:#031326;--gold:#c8a25a;--gold2:#e5c677;--white:#fff;--cream:#f7f4ee;--text:#081a2f}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;background:var(--deep);color:var(--white);line-height:1.6}
.header{min-height:88px;background:rgba(3,19,38,.98);display:flex;align-items:center;justify-content:space-between;padding:18px 6%;position:sticky;top:0;z-index:99;border-bottom:1px solid rgba(255,255,255,.12)}
.logo img{width:175px;display:block}
nav{display:flex;gap:34px;flex-wrap:wrap}
nav a{color:#fff;text-decoration:none;text-transform:uppercase;font-weight:800;font-size:.82rem;letter-spacing:.8px}
.quote{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#111;text-decoration:none;text-transform:uppercase;font-weight:900;letter-spacing:.8px;padding:15px 26px;border-radius:3px}
.hero{min-height:650px;display:flex;align-items:center;padding:90px 8%;background:linear-gradient(90deg,rgba(3,19,38,.94),rgba(3,19,38,.68),rgba(3,19,38,.25)),linear-gradient(135deg,#101b26,#46525c 48%,#111820);position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 2px,transparent 2px 90px);pointer-events:none;opacity:.4}
.hero-content{position:relative;z-index:1;max-width:760px}
.eyebrow{color:var(--gold2);text-transform:uppercase;letter-spacing:4px;font-size:.86rem;font-weight:900;margin-bottom:18px}
.eyebrow.dark{color:var(--gold)}
h1{font-family:Georgia,serif;font-size:clamp(3.5rem,7vw,6.7rem);font-weight:400;line-height:1.05;letter-spacing:-3px;margin-bottom:24px}
.hero p{max-width:590px;color:rgba(255,255,255,.9);font-size:1.15rem;margin-bottom:30px}
.buttons{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:17px 28px;border-radius:3px;text-decoration:none;text-transform:uppercase;font-weight:900;font-size:.82rem;letter-spacing:.8px}
.btn.gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#111}
.btn.clear{border:1px solid rgba(255,255,255,.55);color:#fff}
.trust{background:linear-gradient(90deg,var(--deep),var(--navy));padding:30px 8%;display:grid;grid-template-columns:repeat(4,1fr)}
.trust div{padding:12px 28px;border-right:1px solid rgba(255,255,255,.16)}
.trust div:last-child{border-right:0}
.trust strong{display:block;color:var(--gold2);text-transform:uppercase;font-size:.86rem;letter-spacing:1px}
.trust span{color:#d9dde2;font-size:.88rem}
.services,.projects{background:#fff;color:var(--text);padding:78px 8% 90px}
.section-title{text-align:center;margin-bottom:42px}
.section-title p{color:var(--gold);text-transform:uppercase;font-weight:900;letter-spacing:3px;font-size:.82rem}
.section-title h2,.about h2,.contact h2{font-family:Georgia,serif;font-weight:400;color:var(--text);font-size:clamp(2.3rem,4vw,3.6rem);line-height:1.1}
.section-title:after{content:"";display:block;width:52px;height:3px;background:var(--gold);margin:18px auto 0}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1240px;margin:auto}
.cards article{background:#fff;border:1px solid #e3e7ec;box-shadow:0 18px 42px rgba(6,29,53,.08);transition:.25s}
.cards article:hover{transform:translateY(-6px)}
.photo{height:155px;background-size:cover;background-position:center}
.shingles{background:repeating-linear-gradient(135deg,#323b42 0 14px,#4c555c 14px 28px)}
.repair{background:linear-gradient(135deg,#adb6bd,#4c5965)}
.replace{background:linear-gradient(135deg,#384555,#c9c1b5)}
.storm{background:radial-gradient(circle at 40% 20%,#8a8e92,#141d27 70%)}
.cards h3{font-family:Georgia,serif;font-weight:400;font-size:1.45rem;padding:26px 24px 8px}
.cards p{color:#3f4959;padding:0 24px 24px;min-height:90px}
.cards a{display:block;color:var(--gold);text-decoration:none;text-transform:uppercase;font-weight:900;font-size:.78rem;letter-spacing:1.4px;padding:0 24px 28px}
.process{background:linear-gradient(90deg,var(--deep),var(--navy));padding:44px 8%;display:grid;grid-template-columns:1.05fr 2.5fr;gap:38px;align-items:center}
.process-left{border-right:1px solid rgba(255,255,255,.16);padding-right:34px}
.process-left p{color:var(--gold2);text-transform:uppercase;letter-spacing:3px;font-size:.8rem;font-weight:900;margin-bottom:12px}
.process-left h2{font-family:Georgia,serif;font-weight:400;font-size:2.5rem;line-height:1.15}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.steps span{color:var(--gold2);font-family:Georgia,serif;font-size:2rem}
.steps h3{font-family:Georgia,serif;font-weight:400;margin-bottom:8px}
.steps p{color:#d9dde2;font-size:.92rem}
.about,.contact{background:var(--cream);color:var(--text);padding:90px 8%;display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.about p,.contact p{color:#3f4959;font-size:1.1rem}
.about-box{background:#fff;border:1px solid #e3e7ec;padding:34px;box-shadow:0 18px 48px rgba(6,29,53,.08)}
.about-box p{padding:18px 0;border-bottom:1px solid #e3e7ec;font-weight:800}
.about-box p:last-child{border-bottom:0}
.about-box strong{color:var(--gold);font-family:Georgia,serif;font-size:1.8rem;margin-right:12px}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1180px;margin:auto}
.project-grid div{min-height:280px;background:linear-gradient(rgba(3,19,38,.18),rgba(3,19,38,.75)),linear-gradient(135deg,#243446,#9a9284);display:flex;align-items:flex-end;padding:28px;color:#fff;font-family:Georgia,serif;font-size:1.7rem}
form{background:#fff;border:1px solid #e3e7ec;padding:34px;display:grid;gap:16px;box-shadow:0 18px 48px rgba(6,29,53,.08)}
input,select,textarea{width:100%;padding:16px;border:1px solid #cfd5dd;font:inherit}
textarea{min-height:130px}
button{background:var(--navy);color:#fff;border:0;padding:17px;font-weight:900;text-transform:uppercase;letter-spacing:1px}
footer{background:var(--deep);text-align:center;padding:46px 8%;color:#d9dde2}
footer img{width:160px;margin-bottom:12px}
@media(max-width:1050px){.header{height:auto;flex-wrap:wrap;gap:15px}.cards,.trust,.steps{grid-template-columns:repeat(2,1fr)}.process,.about,.contact{grid-template-columns:1fr}.process-left{border-right:0;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:26px}}
@media(max-width:700px){.logo img{width:145px}nav{gap:14px}.quote{padding:12px 16px}.cards,.trust,.steps,.project-grid{grid-template-columns:1fr}.hero{min-height:580px;padding:70px 6%}.trust div{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}}