:root{
  --brand:#c02428; /* deep red accent (adjust to match brand) */
  --dark:#111;
  --light:#fff;
  --muted:#6c757d;
}

*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif; margin:0; color:#222; line-height:1.6;}
a{color:var(--brand); text-decoration:none}
header{position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid #eee;}
.container{width:min(1100px, 94%); margin:0 auto;}
.nav{display:flex; align-items:center; gap:16px; padding:10px 0;}
.nav .logo{display:flex; align-items:center; gap:10px;}
.nav img{height:46px; width:auto;}
.nav .links{margin-left:auto; display:flex; flex-wrap:wrap; gap:18px;}
.nav .links a{padding:10px 6px; font-weight:600; color:#111}
.nav .cta{background:var(--brand); color:#fff; padding:10px 14px; border-radius:8px;}
.hero{display:grid; grid-template-columns: 1.2fr 1fr; gap:24px; padding:48px 0; align-items:center;}
.hero h1{font-size:clamp(28px, 4vw, 44px); margin:0 0 10px}
.hero p.lede{font-size:1.15rem; color:#333}
.hero .badge{display:inline-block; background:#111; color:#fff; padding:6px 10px; border-radius:999px; font-size:.9rem; margin-bottom:12px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{border:1px solid #eee; border-radius:14px; padding:18px}
.card h3{margin:6px 0 8px}
footer{background:#111; color:#ddd; padding:30px 0; margin-top:40px}
footer a{color:#fff; opacity:.9}
footer .grid{display:grid; grid-template-columns: 2fr 1fr 1fr; gap:18px}
.phone{font-weight:800; font-size:1.1rem}

section{padding:40px 0}
h2{margin-top:0}
.btn{display:inline-block; padding:10px 14px; border:1px solid var(--brand); color:var(--brand); border-radius:8px; font-weight:600}
.btn.primary{background:var(--brand); color:#fff}
.notice{background:#f8f9fa; border:1px dashed #ddd; padding:14px; border-radius:8px}

.form{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form .full{grid-column:1/-1}
.input, textarea, select{width:100%; padding:10px; border:1px solid #ddd; border-radius:10px}
label{font-size:.95rem; color:#333}
input[type=file]{border:1px dashed #ccc; padding:14px}

.gallery{columns:3 270px; column-gap:14px}
.gallery img{width:100%; border-radius:12px; margin:0 0 14px; display:block}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr; gap:12px}
  footer .grid{grid-template-columns:1fr; gap:8px}
  .form{grid-template-columns:1fr}
}