:root{
  --red:#7B2B25; --gold:#C6A15B; --char:#1E1E1E; --slate:#475569; --bg:#F2F2F2; --white:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--char);
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.55}
.wrap{width:min(1120px,92%);margin-inline:auto}

.site-header{background:linear-gradient(180deg,#ffffffcc,#ffffffaa);
  backdrop-filter:saturate(120%) blur(4px);position:sticky;top:0;z-index:5;border-bottom:1px solid #e8e8e8}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.brand{display:flex;gap:.75rem;align-items:center;color:inherit;text-decoration:none}
.brand-text strong{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:.2px}
.brand-text span{display:block;color:var(--slate);font-size:.85rem;margin-top:.1rem}
.nav a{color:var(--char);text-decoration:none;margin-left:1rem;font-weight:600}
.nav a:hover{color:var(--red)}

.hero{min-height:56vh;display:flex;align-items:center;color:#fff;
  background:linear-gradient( to bottom, #00000044, #00000033 ), var(--bg)}
.hero .wrap{padding:5rem 0}
.hero h1{font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:.2px;
  font-size:clamp(2rem,3.5vw,3rem);margin:0 0 .6rem}
.hero p{max-width:62ch}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.btn{display:inline-block;padding:.75rem 1rem;border-radius:.5rem;border:2px solid transparent;font-weight:700;text-decoration:none}
.btn-gold{background:var(--gold);color:#1a1a1a}
.btn-gold:hover{filter:brightness(.95)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{filter:brightness(.95)}
.btn-outline{border-color:#ffffffcc;color:#fff}
.btn-outline:hover{background:#ffffff22}

.section{padding:3.2rem 0}
.section.alt{background:#fff}
.section h2{font-family:'Montserrat',sans-serif;font-weight:800;margin:0 0 1rem;color:var(--red);letter-spacing:.2px}

.cards{display:grid;gap:1rem}
.cards.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:#fff;border:1px solid #ececec;border-radius:.75rem;padding:1.1rem}
.card h3{margin-top:.2rem;color:var(--char);font-family:'Montserrat',sans-serif}

.project-thumb{height:160px;border-radius:.5rem;margin-bottom:.75rem;display:grid;place-items:center;text-align:center;font-weight:700;color:#fff;background:
  linear-gradient(120deg,#7B2B25,#C6A15B)}
.placeholder-img{background:
  linear-gradient(160deg,#7B2B25 0%,#7B2B25 45%,#C6A15B 45%,#C6A15B 100%)}

.vlist{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.5rem}
.vlist li strong{color:var(--red)}

.quote-form, .wa-form{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:1rem}
.quote-form label, .wa-form label{display:grid;gap:.35rem;font-weight:600}
.quote-form input,.quote-form textarea,.wa-form textarea{padding:.7rem;border:1px solid #dadada;border-radius:.5rem}
.hidden{display:none}
.hint{color:var(--slate);font-size:.9rem;margin-top:.5rem}

.team{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.person{background:#fff;border:1px solid #ececec;border-radius:.9rem;overflow:hidden;display:grid}
.person img{width:100%;height:260px;object-fit:cover}
.person-body{padding:1rem 1rem 1.2rem}
.person h3{margin:.1rem 0;font-family:'Montserrat',sans-serif}
.person .role{color:var(--slate);margin:.1rem 0 .6rem}
.contacts{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.contacts a{text-decoration:none;color:var(--char)}
.contacts a:hover{color:var(--red)}

.site-footer{background:#111;color:#ddd;padding:2.2rem 0;margin-top:2rem}
.site-footer a{color:#fff;text-decoration:underline}
.foot-note{margin-top:1rem;color:#aaa}

#about,#safety,#services,#sectors,#projects,#leadership,#appointment,#quote,#contact{scroll-margin-top:90px}

@media (max-width:780px){
  .hero{min-height:52vh}
  .nav{display:none}
}