:root {
  --bg: #fff;
  --ink: #182347;
  --muted: #59646f;
  --brand: #22597e;
  --brand-ink: #fff;
  --card: #f5f8fa;
  --ring: rgba(36,99,235,.25);
  --radius: 16px;
  --shadow: 0 10px 25px rgba(24,35,71,.06);
  --container: 1200px;
}

*,*::before,*::after { box-sizing: border-box; }
html,body { height: 100%; }
body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }

/* ---------- Layout Utilities ---------- */
.container {
  width: min(100%, var(--container));
  margin-inline: auto;
  padding-inline: 20px;
}
.stack { display: grid; gap: 28px; }

/* ---------- Compact Top Bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #e3eaf1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  padding: 8px 0;
}
.topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.logo {
  width: 160px;
  height: auto;
  display: block;
}

/* Call-to-action button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 3px 8px rgba(34,89,126,.25);
  border: 1px solid rgba(255,255,255,.2);
  transition: all .25s ease;
}
.btn:hover {
  background: #1a4566;
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(34,89,126,.25);
}
.btn::before {
  content: "📞";
  font-size: 1.1rem;
  line-height: 1;
}
@media(max-width:720px){
  .topbar { padding: 6px 0; }
  .logo { width: 140px; }
  .btn { padding: 8px 14px; font-size: 0.9rem; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(32px,5vw,64px) 0; }
.hero__grid { position: relative; display: flex; justify-content: center; z-index: 2; }
.hero__panel {
  background: var(--card);
  border-radius: var(--radius);
  padding: clamp(16px,3.5vw,28px);
  box-shadow: var(--shadow);
  position: relative;
  z-index: 3;
  max-width: 500px;
  width: 100%;
}
.hero__media { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.15); }
.hero__fade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(34,89,126,.0),rgba(34,89,126,.25)); pointer-events: none; }

/* ---------- Section Headings ---------- */
.section { padding: clamp(60px,7vw,100px) 0; }
.eyebrow { font-weight: 600; letter-spacing: .5px; color: var(--brand); text-transform: uppercase; font-size: .9rem; }
.h2 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: clamp(28px,4.2vw,42px);
  line-height: 1.2;
  margin: 6px 0 12px;
}
.sub { color: var(--muted); font-size: 1.05rem; max-width: 720px; margin: 0 auto 40px; text-align: center; }

/* ---------- Siding Services Cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  justify-content: center;
  gap: clamp(24px,4vw,40px);
  margin-top: 40px;
  max-width: 1100px;
  margin-inline: auto;
}
.cards .card {
  background: #fff;
  border: 1px solid #e2e7eb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: auto 1fr;
  transition: transform .2s;
}
.cards .card:hover { transform: translateY(-4px); }
.card__img { aspect-ratio: 16/11; object-fit: cover; width: 100%; }
.card__body { padding: 22px; display: grid; align-content: start; gap: 8px; }
.card__title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 6px;
}
.card__text { color: var(--muted); margin: 0; }
@media(max-width:900px){.cards{max-width:700px}}

/* ---------- Three-Step Section ---------- */
.lsm-steps{
  background: #f7fafc;
  padding: clamp(60px,7vw,100px) 20px;
  text-align: center;
}
.lsm-steps-title{
  font-family: 'Syne', sans-serif;
  font-size: clamp(28px,4vw,40px);
  margin: 0 0 6px;
}
.lsm-steps-sub{color: #59646f; font-size: 1.05rem; margin: 0 0 40px;}
.lsm-steps-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  justify-content: center;
  gap: clamp(24px,4vw,40px);
  max-width: 1100px;
  margin-inline: auto;
}
.lsm-step-link { display: block; text-decoration: none; color: inherit; transition: transform .25s,box-shadow .25s; }
.lsm-step-card {
  border-radius: 18px;
  padding: 40px 28px;
  box-shadow: 0 12px 26px rgba(34,89,126,.09);
  height: 100%;
  display: grid;
  place-items: center;
  gap: 16px;
  transition: transform .25s,box-shadow .25s;
}
.lsm-step-link:hover .lsm-step-card { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(34,89,126,.12); }
.lsm-steps .lsm-step-card:nth-child(1){background:#22597e;color:#fff;}
.lsm-steps .lsm-step-card:nth-child(2){background:#FBBF24;color:#182347;}
.lsm-steps .lsm-step-card:nth-child(3){background:#10B981;color:#fff;}
.lsm-step-icon-wrap {
  width: 110px; height: 110px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.lsm-step-icon{width:65px;height:auto;}
.lsm-step-title{font-family:'Syne',sans-serif;font-size:1.4rem;margin-bottom:10px;}
.lsm-step-text{font-size:.95rem;line-height:1.6;}
@media(max-width:900px){
  .lsm-steps-grid{grid-template-columns:1fr;max-width:600px;}
  .lsm-step-card{padding:32px 24px;}
}

/* ---------- Step-Detail Bands ---------- */
.step-detail { border-top: 1px solid #e1eaf1; border-bottom: 1px solid #e1eaf1; }
.step-banner {
  padding: 50px 20px;
  display: flex; align-items: center; gap: 20px;
  color: #fff;
}
.step-banner.step1 { background: #22597e; }
.step-banner.step2 { background: #FBBF24; color: #182347;}
.step-banner.step3 { background: #10B981; }
.detail-icon { width: 70px; }
.step-content { padding: 35px 20px; max-width: 850px; margin: 0 auto; }
details { margin-bottom: 12px; background: #f7fafd; padding: 12px; border-radius: 8px; }
summary { cursor: pointer; font-weight: 600; }

/* ---------- Reviews Section ---------- */
.reviews{
  background: #f7fafc;
  padding: clamp(60px,7vw,100px) 20px;
  text-align: center;
}
.reviews-title{
  font-family: 'Syne', sans-serif;
  font-size: clamp(28px,4vw,38px);
  margin-bottom: 48px;
  color: #182347;
}
.reviews-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: clamp(24px,3vw,40px);
  max-width: 1100px;
  margin-inline: auto;
  text-align: left;
}
.review-card{
  background: #fff;
  border: 1px solid #dde6ed;
  border-radius: 16px;
  padding: clamp(22px,2.5vw,28px);
  box-shadow: 0 6px 18px rgba(34,89,126,0.07);
  transition: transform .25s,box-shadow .25s;
  display: grid;
  align-content: start;
  gap: 12px;
}
.review-card:hover{transform:translateY(-6px);box-shadow:0 14px 32px rgba(34,89,126,0.10);}
.review-card .stars{color:#fbbf24; font-size:1.2rem; letter-spacing:1px;}
.review-card p{color:#59646f;font-size:.96rem;line-height:1.65;margin:0;}
.review-card strong{font-size:1rem;color:#22597e;font-weight:600;}
.review-card span{font-size:.9rem;color:#7a8ca3;}
@media(max-width:800px){
  .reviews-grid{text-align:center;}
  .review-card{align-items:center;}
  .review-card p{text-align:center;}
}

/* ---------- CTA ---------- */
.cta{
  background: linear-gradient(180deg,#f8faff,#eef5fb);
  border-top: 1px solid #e1eaf1;
  border-bottom: 1px solid #e1eaf1;
}
.cta__wrap{text-align:center;display:grid;gap:10px;justify-items:center;}
.cta h3{font-family:'Syne',sans-serif;font-size:clamp(22px,3.6vw,30px);margin:0;}
.cta p{color:var(--muted);margin:0 0 6px;}
.disclaimer{color:#758599;font-size:.85rem;margin-top:20px;}

/* ---------- Footer ---------- */
.footer {
  background: #182347;
  color: #fff;
  padding: 20px 0;
  font-size: .9rem;
}
.footer * {
  color: #fff !important;
}
.footer *:focus {
  outline: none !important;
  box-shadow: none !important;
}
.footer a {
  color: #fff !important;
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}
.footer .columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* ---------- Responsive Tweaks ---------- */
@media (max-width: 980px) {
  .hero__media {
    position: absolute;
    inset: 0;
    min-height: clamp(260px, 48vh, 600px);
  }
}