/* Reliable Roofing & Sheet Metal, LLC — Simple, fast, accessible site */
:root{
  --bg:#ffffff; --text:#0b1116; --muted:#576574; --primary:#2a629a; --primary-600:#1f4a74;
  --accent:#A9B3C2; --surface:#f6f8fb; --ring:#b0c4de;
  --radius:16px;
}
*{
	box-sizing: border-box;
}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial,sans-serif; color:var(--text); background:var(--bg); line-height:1.6}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
.container
{
	max-width:1100px; 
	margin:0 auto; 
	padding:0 20px
}
.header{
	position: sticky;
	top: 0;
	backdrop-filter: saturate(1.2) blur(6px);
	border-bottom: 1px solid #eef2f7;
	z-index: 50
}
.header-inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 12px;
	padding-right: 20px;
	padding-left: 0;
	padding-bottom: 12px;
}
.brand{display:flex; gap:12px; align-items:center}
.brand img{
	height: 60px;
	width: auto
}
.brand .name{
	font-weight: 700;
	letter-spacing: .3px;
	
}
.tagLine{
	font-weight: 400;
	letter-spacing: .5px;
	font-size: 0.7em;
	bottom: 0px;
	position:relative;
	
}
.nav a{
	margin-left: 18px;
	font-weight: 600;
	
}
.btn{display:inline-block; background:var(--primary); color:#fff; padding:12px 18px; border-radius:999px; font-weight:700}
.btn:hover{background:var(--primary-600)}
.hero{background:linear-gradient(180deg,#eef3f8,transparent 60%); padding:64px 0 24px}
.hero h1{font-size:clamp(28px, 4vw, 44px); line-height:1.15; margin:0 0 12px}
.hero p{max-width:800px; font-size:18px; color:var(--muted)}
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:26px}
.kpi{background:var(--surface); padding:18px; border-radius:var(--radius); border:1px solid #e8edf4; text-align:center}
.kpi .num{font-size:22px; font-weight:800}
.section{padding:36px 0}
.grid{display:grid; gap:18px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:#fff; border:1px solid #e8edf4; border-radius:var(--radius); padding:18px}
.card h3{margin-top:0}
.badge{display:inline-block; padding:4px 10px; border-radius:999px; background:#eef4fb; color:var(--primary); font-weight:700; font-size:12px; letter-spacing:.3px}
.list{padding-left:18px; margin:10px 0}
.list li{margin:6px 0}
.cta{display:flex; align-items:center; justify-content:space-between; gap:16px; background:linear-gradient(90deg,#dae2ec,#eef4fb); padding:22px; border-radius:var(--radius); border:1px solid #e1e7f0}
.footer{padding:30px 0; border-top:1px solid #eef2f7; color:#334155; font-size:14px}
.footer .cols{display:grid; gap:16px; grid-template-columns:2fr 1fr 1fr}
hr.sep{border:none; border-top:1px solid #e6ebf2; margin:22px 0}
/* Tables for project lists */
table{width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; border:1px solid #e8edf4}
th, td{padding:12px 12px; border-bottom:1px solid #eef2f7; text-align:left}
th{background:#f7f9fc; font-weight:700}
/* Forms */
label{display:block; font-weight:700; margin:12px 0 6px}
input, textarea{width:100%; padding:12px; border:1px solid #dbe3ee; border-radius:10px; font:inherit}
input:focus, textarea:focus{outline:2px solid var(--ring); border-color:var(--ring)}
.form-actions{margin-top:16px}
.notice{font-size:14px; color:var(--muted)}
/* Responsive */
@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr}
}