:root{
  --bg:#141010;
  --bg-2:#1d1616;
  --panel:#171314;
  --panel-2:#201819;
  --soft:#f4f0ec;
  --line:rgba(255,255,255,.10);
  --text:#f7f4ef;
  --muted:#d8cec6;
  --darktext:#161616;
  --darkmuted:#52525b;
  --red:#b71821;
  --red-2:#d7222c;
  --gold:#f0c247;
  --gold-2:#dca628;
  --shadow:0 18px 45px rgba(0,0,0,.34);
  --radius:20px;
  --container:min(1220px,92vw);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#efecf0 0%,#f7f5f6 100%);
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:var(--container);margin:auto}
.site-shell{
  width:min(1320px,96vw);
  margin:28px auto;
  background:
    radial-gradient(circle at top right, rgba(255,181,79,.10), transparent 26%),
    radial-gradient(circle at top left, rgba(183,24,33,.08), transparent 30%),
    linear-gradient(180deg,#181213 0%,#0f0c0d 100%);
  box-shadow:0 20px 60px rgba(0,0,0,.16);
  overflow:hidden;
}
.topnav{
  background:linear-gradient(180deg,#100d0e 0%,#1f1617 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topnav .inner{
  min-height:82px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
.brand img{
  height:64px;
  width:auto;
  background:#fff;
  border-radius:10px;
  padding:6px;
}
.menu{
  display:flex;
  align-items:center;
  gap:22px;
  font-size:.96rem;
}
.menu a{
  font-weight:700;
  color:#fff;
}
.call-pill{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#241a06;
  font-weight:900;
  padding:12px 18px;
  border-radius:10px;
  box-shadow:var(--shadow);
}
.hero{
  position:relative;
  background:
    linear-gradient(90deg, rgba(13,10,10,.90) 0%, rgba(13,10,10,.74) 36%, rgba(13,10,10,.42) 62%, rgba(13,10,10,.62) 100%),
    url('assets/hero.jpg') center/cover no-repeat;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  min-height:680px;
  padding:44px 34px 26px;
}
.hero-copy{
  padding:26px 0 12px;
}
.hero-copy h1{
  font-size:clamp(2.6rem,4.5vw,4.6rem);
  line-height:1.02;
  max-width:580px;
  margin:0 0 18px;
}
.hero-copy p{
  font-size:1.08rem;
  max-width:560px;
  color:#ede4dc;
}
.btns{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:24px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 22px;
  border-radius:10px;
  font-weight:900;
  border:0;
}
.btn-red{
  background:linear-gradient(135deg,var(--red),var(--red-2));
  color:#fff;
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#241a06;
}
.hero-bullets{
  display:grid;
  gap:14px;
  margin-top:26px;
  max-width:460px;
}
.hero-bullets div{
  font-weight:800;
  color:#fff;
  display:flex;
  gap:12px;
  align-items:center;
}
.hero-bullets div::before{
  content:"✓";
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:#171314;
  border:1px solid rgba(255,255,255,.18);
  color:#f6ce60;
  font-size:.96rem;
}
.hero-logo{
  position:absolute;
  left:49.5%;
  top:47%;
  transform:translate(-50%,-50%);
  width:min(34vw,430px);
}
.hero-logo img{
  width:100%;
  height:auto;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.34));
}
.quote-box{
  align-self:center;
  justify-self:end;
  width:min(100%,400px);
  background:rgba(22,18,19,.90);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:22px;
  box-shadow:var(--shadow);
}
.quote-box h3{
  font-size:2rem;
  line-height:1.05;
  margin:0 0 8px;
}
.quote-box p{
  margin:0 0 16px;
  color:#d9d0ca;
}
.field{margin-bottom:12px}
input,select,textarea{
  width:100%;
  padding:14px 14px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:#f7f7f7;
  color:#1b1b1b;
  font:inherit;
}
textarea{
  min-height:120px;
  resize:vertical;
}
.info-strip{
  background:linear-gradient(180deg,#120f10 0%,#181213 100%);
  border-top:1px solid rgba(255,255,255,.07);
}
.info-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.info-item{
  padding:22px 18px;
  border-right:1px solid rgba(255,255,255,.08);
  text-align:center;
  font-weight:800;
  color:#fff;
}
.info-item:last-child{border-right:0}
.section{padding:28px 24px}
.card{
  background:linear-gradient(180deg,#21191a 0%,#171213 100%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.soft-card{
  background:#f6f3f0;
  color:var(--darktext);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.soft-card p, .soft-card li{color:var(--darkmuted)}
.why{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:20px;
}
.why-main{
  padding:28px;
  background:
    linear-gradient(90deg, rgba(15,11,12,.88) 0%, rgba(15,11,12,.65) 56%, rgba(15,11,12,.26) 100%),
    url('assets/roof-type-3.jpg') center/cover no-repeat;
}
.why-main h2{
  font-size:2.45rem;
  line-height:1.02;
  margin:0 0 10px;
}
.why-main p{
  max-width:600px;
  color:#e5dbd2;
}
.trust-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:22px;
}
.trust{
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  font-weight:800;
  color:#fff;
  text-align:center;
}
.side-stack{
  display:grid;
  gap:18px;
}
.side-card{
  padding:20px;
}
.side-card h3{
  margin:0 0 12px;
  font-size:1.5rem;
}
.map{
  height:220px;
  border-radius:12px;
  background:url('assets/map.jpg') center/cover no-repeat;
  margin:12px 0 16px;
  border:1px solid rgba(255,255,255,.08);
}
.services-grid{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:20px;
}
.services-panel{
  padding:24px;
}
.services-panel h2,.services-panel h3{color:#141414}
.services-panel p{color:#4b5563}
.service-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-top:20px;
}
.service-box img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:10px;
}
.service-box ul{padding-left:18px}
.service-box li{margin-bottom:4px}
.learn-row{
  display:flex;
  gap:12px;
  margin-top:14px;
}
.learn-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:8px;
  font-weight:800;
  background:linear-gradient(135deg,var(--red),var(--red-2));
  color:#fff;
}
.learn-btn.gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#241a06;
}
.types{
  padding:6px 24px 28px;
}
.types h2{
  font-size:2.2rem;
  line-height:1.05;
  margin:0 0 8px;
}
.types p{
  color:#ddd2ca;
  margin:0 0 18px;
}
.type-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.type-card{
  overflow:hidden;
  border-radius:16px;
  background:#1a1516;
  border:1px solid rgba(255,255,255,.08);
}
.type-card img{
  width:100%;
  aspect-ratio:1.15/1;
  object-fit:cover;
}
.type-card .label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 14px 16px;
  font-weight:900;
  color:#fff;
}
.tag{
  background:#b71821;
  padding:6px 12px;
  border-radius:8px;
}
.before-after{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.ba-box{
  overflow:hidden;
}
.ba-box img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:12px 12px 0 0;
}
.ba-caption{
  padding:18px;
}
.reviews{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.review{
  padding:22px;
}
.stars{
  color:#f0c247;
  letter-spacing:.15em;
  font-size:1.05rem;
  margin-bottom:10px;
}
.page-hero{
  padding:34px 24px 16px;
  background:
    linear-gradient(90deg, rgba(14,11,11,.88) 0%, rgba(14,11,11,.65) 58%, rgba(14,11,11,.30) 100%),
    url('assets/hero.jpg') center/cover no-repeat;
}
.page-hero h1{
  font-size:clamp(2rem,4vw,3.4rem);
  margin:0 0 12px;
}
.page-hero p{
  max-width:760px;
  color:#eee2d7;
}
.page-section{padding:26px 24px}
.page-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:20px;
}
.service-list{
  display:grid;
  gap:16px;
}
.service-item{
  padding:22px;
}
.sidebar{
  padding:22px;
}
.footer{
  padding:30px 24px 40px;
  background:#100d0e;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:20px;
}
.footer p,.footer a{color:#ddd1c9}
.mobile-call{display:none}
@media (max-width: 1100px){
  .hero-grid,.why,.services-grid,.page-grid,.footer-grid,.before-after{grid-template-columns:1fr}
  .hero-logo{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width:min(100%,420px);
    margin:0 auto;
  }
  .quote-box{
    justify-self:stretch;
    width:100%;
  }
}
@media (max-width: 860px){
  .site-shell{
    width:100%;
    margin:0 auto;
  }
  .menu{display:none}
  .info-grid,.service-cards,.type-grid,.trust-row,.reviews{grid-template-columns:1fr}
  .hero-grid{padding:26px 18px 20px}
  .section,.page-section,.types{padding:18px}
  .page-hero{padding:26px 18px 14px}
  .topnav .inner{padding:0 16px}
  .mobile-call{
    display:block;
    position:fixed;
    left:14px;
    right:14px;
    bottom:14px;
    z-index:70;
  }
  .mobile-call a{
    display:block;
    padding:16px 18px;
    text-align:center;
    border-radius:12px;
    background:linear-gradient(135deg,var(--red),var(--red-2));
    color:#fff;
    font-weight:900;
    box-shadow:var(--shadow);
  }
  .brand img{height:56px}
}