:root{
  --red:#b90f0a;          /* brand red */
  --red-dark:#9f0d09;
  --ink:#222;
  --muted:#505050;
  --paper:#ffffff;
  --gray:#f0f0f2;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
}

.container{max-width:1100px; margin-inline:auto; padding-inline:20px}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}

/* Header / nav */
.topbar{
  background:linear-gradient(180deg,var(--red),var(--red-dark));
  color:#fff;
  position:sticky; top:0; z-index:20;
  box-shadow:0 2px 0 rgba(0,0,0,.2);
}
.nav{
  display:flex; align-items:center; gap:16px; padding:12px 20px;
}
.logo{display:flex; align-items:baseline; gap:6px; font-family:Montserrat, ui-sans-serif; text-transform:uppercase}
.logo .mark{
  font-weight:800; letter-spacing:.06em; font-size:26px;
  text-shadow:0 2px 0 rgba(0,0,0,.25);
}
.logo .sub{font-weight:700; font-size:12px; opacity:.95; letter-spacing:.18em}
.primary{margin-left:auto; display:flex; gap:18px; font-weight:700}
.primary a{padding:8px 10px; border-radius:6px; text-decoration:none}
.primary a:hover{background:rgba(255,255,255,.1)}
.contactline{display:flex; gap:14px; font-size:13px; opacity:.95; white-space:nowrap}
.contactline a{color:#fff}

/* Hero */
.hero{position:relative}
.hero-image{
  height:min(64vh,560px);
  background:url('DRW-MASONRY-IMG.jpg') center/cover no-repeat;
  filter:saturate(105%) contrast(102%);
background-position:59% 38%;
}
.hero-overlay{
  position:absolute; inset:0; display:flex; align-items:center;
}
.callout{
  width:min(560px,88%);
  margin-left:60px;
  background:rgba(0,0,0,.45);
  color:#fff;
  border:2px solid rgba(255,255,255,.35);
  padding:22px 24px;
  border-radius:2px;
  backdrop-filter: blur(1px);
}
.callout h2{margin:0 0 12px; font-family:Montserrat, ui-sans-serif; font-weight:800; letter-spacing:.02em; text-transform:uppercase; font-size:20px}
.callout p{margin:6px 0; font-weight:700}

/* About */
.about{padding:46px 20px; text-align:center}
.about h3{font-family:Montserrat, ui-sans-serif; font-size:22px; margin:0 0 10px}
.about p{max-width:760px; margin:10px auto; color:var(--muted)}

/* Features */
.features{background:var(--gray); padding:40px 0 56px; border-top:1px solid #e5e5ea}
.features h3{text-align:center; font-family:Montserrat, ui-sans-serif; font-size:22px; margin:0 0 22px}
.grid{display:grid; grid-template-columns:1fr; gap:22px}
@media(min-width:860px){ .grid{grid-template-columns:repeat(4,1fr)} }
.feat{display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:flex-start}
.tick{
  width:34px; height:34px; border-radius:50%;
  border:3px solid var(--red);
  color:var(--red);
  display:grid; place-items:center; font-weight:900; font-size:18px;
  background:#fff;
}
.feat h4{margin:0; font-size:15px; color:var(--muted); font-weight:600;}

/* Footer */
.sitefoot{background:#111; color:#eee; padding:16px 0; margin-top:20px}

/* Responsive tweaks */
@media (max-width:900px){
  .primary{display:none}
  .contactline{display:none}
  .callout{margin:0 auto}
}


/* Ensure logo image displays neatly in the red bar */
.logo img{ height:34px; display:block }