:root{
  --black:#050505;
  --cream:#f4efe4;
  --gold:#b77900;
  --gold-bright:#d88a00;
  --white:#fff;
  --text:#151515;
  --line:#d8d8d8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Montserrat,Arial,sans-serif;color:var(--text);background:#fff}
a{text-decoration:none;color:inherit}
.site-header{
  position:absolute;z-index:20;top:0;left:0;right:0;
  height:110px;padding:14px 4.2%;
  display:flex;align-items:flex-start;justify-content:space-between;
  background:linear-gradient(180deg,rgba(0,0,0,.98),rgba(0,0,0,.86));
}
.brand img{display:block;width:355px;max-width:34vw;height:auto;object-fit:contain}
.main-nav{display:flex;align-items:center;gap:42px;color:#fff;text-transform:uppercase;font-weight:500;font-size:14px;padding-top:20px}
.main-nav a{padding:12px 0;white-space:nowrap}
.main-nav .active{color:var(--gold-bright);border-bottom:2px solid var(--gold-bright)}
.nav-button{border:1.5px solid var(--gold-bright);padding:14px 31px!important;color:var(--gold-bright)}
.menu-toggle{display:none}
.hero{
  min-height:650px;position:relative;background:#050505 url("assets/hero-porch.jpg") right center/62% 100% no-repeat;
  display:flex;align-items:center;color:#fff;padding-top:110px
}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#020202 0%,rgba(2,2,2,.98) 28%,rgba(2,2,2,.67) 50%,rgba(2,2,2,.08) 75%)}
.hero-content{position:relative;z-index:2;width:48%;padding-left:4.6%}
.hero h1{font-size:68px;line-height:.98;margin:0;font-weight:800;letter-spacing:-2px}
.hero h1 span{color:var(--gold-bright)}
.rule{width:64px;height:3px;background:var(--gold-bright);margin:26px 0 19px}
.rule.small{width:48px;margin:13px 0 18px}
.hero p{font-size:19px;line-height:1.55;margin:0 0 23px}
.hero-actions{display:flex;gap:20px}
.btn{display:inline-flex;justify-content:center;align-items:center;text-transform:uppercase;font-weight:600;font-size:13px;letter-spacing:.2px;min-height:48px;padding:0 32px;border:1.5px solid var(--gold-bright)}
.btn-gold{background:linear-gradient(180deg,#e39a12,#b96f00);color:#fff}
.btn-outline{color:#fff;background:rgba(0,0,0,.2)}
.section-light{background:#fff}
.wrap{max-width:1420px;margin:auto;padding:23px 4% 18px}
.services{text-align:center}
.services h2{font-size:28px;margin:0;font-weight:800}
.tiny-rule{width:54px;height:2px;background:var(--gold-bright);margin:8px auto 5px}
.lead{font-size:14px;line-height:1.45;margin:0 auto 12px;max-width:970px}
.service-grid{display:grid;grid-template-columns:repeat(6,1fr);border-top:0;margin-top:6px}
.service-grid article{min-height:128px;padding:20px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid var(--line)}
.service-grid article:nth-child(6),.service-grid article:nth-child(11){border-right:0}
.service-grid article:nth-child(n+7){grid-column:span 1}
.service-grid span{font-size:38px;color:#ef6400;line-height:1;margin-bottom:9px}
.service-grid h3{font-size:12px;line-height:1.35;margin:0;font-weight:700}
.service-grid article:nth-child(7){grid-column:2}
.about{background:#050505;color:#fff;display:grid;grid-template-columns:38% 34% 28%;min-height:310px}
.about-photo{background:url("assets/craftsmanship.jpg") center/cover no-repeat;margin:18px 0 18px 4.2%}
.about-copy{padding:22px 26px 18px 38px}
.about-copy h2{font-size:24px;margin:0;line-height:1.15}
.about-copy p{font-size:13.5px;line-height:1.55;margin:0 0 10px;color:#f5f5f5}
.trust-grid{display:grid;grid-template-columns:1fr 1fr;padding:18px 4% 18px 0}
.trust-grid div{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-left:1px solid #3f3f3f;border-bottom:1px solid #3f3f3f;padding:12px}
.trust-grid div:nth-child(n+3){border-bottom:0}
.trust-grid span{color:var(--gold-bright);font-size:33px;margin-bottom:6px}
.trust-grid strong{font-size:12px;line-height:1.35}
.contact{display:grid;grid-template-columns:34% 66%;padding:18px 8% 14px;gap:35px;align-items:center}
.contact-info{border-right:1px solid #aaa;padding-right:35px}
.contact-info h2{font-size:23px;margin:0}
.contact-info a{display:block;margin:10px 0;font-size:15px}
.contact-info a:first-of-type{color:#d66e00;font-weight:700;font-size:17px}
.contact-info p{font-size:12px;line-height:1.4;font-style:italic;border-top:1px solid #ddd;padding-top:11px;margin-top:11px}
.estimate-form h3{font-size:18px;margin:0 0 8px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:7px}
input,textarea{width:100%;min-height:42px;border:1px solid #ccc;padding:9px 11px;font:inherit;font-size:12px}
textarea{resize:vertical;margin-bottom:7px}
.estimate-form .btn{width:40%;min-height:42px;margin-left:auto;display:flex}
.site-footer{background:#050505;color:#fff;min-height:82px;display:grid;grid-template-columns:24% 24% 1fr 40px;gap:20px;align-items:center;padding:7px 4.5%}
.site-footer img{width:225px;max-width:100%;height:auto;object-fit:contain}
.footer-meta{display:flex;gap:28px;font-size:12px}
.site-footer p{font-size:11px;text-align:center}
.facebook{border:1px solid var(--gold-bright);color:var(--gold-bright);border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-weight:800}
@media(max-width:1100px){
  .brand img{width:315px}
  .main-nav{gap:22px;font-size:12px}
  .hero h1{font-size:58px}
  .service-grid{grid-template-columns:repeat(4,1fr)}
  .service-grid article:nth-child(6),.service-grid article:nth-child(11){border-right:1px solid var(--line)}
  .service-grid article:nth-child(4n){border-right:0}
  .service-grid article:nth-child(7){grid-column:auto}
  .about{grid-template-columns:42% 58%}
  .trust-grid{grid-column:1/-1;grid-template-columns:repeat(4,1fr);padding:0 4% 18px}
  .trust-grid div{border-bottom:0}
}
@media(max-width:760px){
  .site-header{position:relative;height:auto;align-items:center;padding:10px 18px;background:#050505}
  .brand img{width:250px;max-width:76vw}
  .menu-toggle{display:block;background:transparent;color:#fff;border:1px solid var(--gold-bright);padding:9px 12px}
  .main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#050505;padding:16px 20px;flex-direction:column;align-items:stretch;gap:4px}
  .main-nav.open{display:flex}
  .nav-button{text-align:center}
  .hero{padding-top:0;min-height:580px;background-size:cover;background-position:65% center}
  .hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.62))}
  .hero-content{width:100%;padding:70px 22px}
  .hero h1{font-size:48px}
  .hero p{font-size:16px}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .services h2{font-size:24px}
  .lead br{display:none}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .service-grid article{border-right:1px solid var(--line)!important}
  .service-grid article:nth-child(even){border-right:0!important}
  .about{grid-template-columns:1fr}
  .about-photo{height:230px;margin:18px}
  .about-copy{padding:12px 22px 20px}
  .trust-grid{grid-template-columns:repeat(2,1fr);padding:0 18px 18px}
  .contact{grid-template-columns:1fr;padding:28px 22px}
  .contact-info{border-right:0;border-bottom:1px solid #aaa;padding:0 0 20px}
  .form-row{grid-template-columns:1fr}
  .estimate-form .btn{width:100%}
  .site-footer{grid-template-columns:1fr;text-align:center;padding:20px}
  .site-footer img{margin:auto}
  .footer-meta{justify-content:center;flex-wrap:wrap}
  .facebook{margin:auto}
}