:root{
  --red:#dc1f26;
  --blue:#15488f;
  --text:#1f2937;
  --muted:#64748b;
  --line:#dfe6ef;
  --bg:#f5f7fb;
  --white:#ffffff;
  --shadow:0 18px 45px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1240px,calc(100% - 28px));margin:0 auto}

.site-header{background:#ffffff;border-bottom:1px solid #e5e7eb;box-shadow:0 4px 12px rgba(0,0,0,0.04)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:180px;width:auto;display:block}
.menu{display:flex;align-items:center;justify-content:center;gap:28px;flex:1 1 auto;flex-wrap:wrap}
.menu a{font-size:16px;font-weight:700;color:#334155 !important}
.menu a:hover{color:var(--blue) !important}
.header-cta{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:8px;background:var(--red);color:#fff !important;font-weight:800;white-space:nowrap}
.header-cta:hover{background:#b91c1c}

.hero-section{padding:24px 0}
.hero{display:grid;grid-template-columns:1.02fr .98fr;min-height:520px;background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.hero-copy{background:linear-gradient(135deg, rgba(8,18,41,.97), rgba(21,72,143,.84));color:#fff;padding:58px 54px;position:relative}
.hero-copy:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 30%)}
.hero-copy>*{position:relative;z-index:1}
.hero-copy h1{margin:0 0 14px;font-size:clamp(42px,5vw,68px);line-height:1.02;letter-spacing:-.03em}
.hero-copy p{margin:0;color:rgba(255,255,255,.9);font-size:22px;line-height:1.4}
.hero-actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.hero-media{min-height:400px;background:#d9e1ee}
.hero-media img{width:100%;height:100%;object-fit:cover}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:12px;font-weight:800;color:#fff;background:linear-gradient(180deg,#ef2b33,#c8151b)}
.btn-blue{background:linear-gradient(180deg,#2464bf,#15488f)}

.section-card{margin:22px auto;background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.inner{padding:42px}
.center-title,.title-left{margin:0 0 18px;color:#0f264b;font-size:clamp(32px,4vw,52px);line-height:1.06;letter-spacing:-.03em}
.center-title{text-align:center}
.title-left{text-align:left}
.section-intro{max-width:760px;margin:0 auto 26px;text-align:center;color:var(--muted);font-size:18px;line-height:1.5}
.section-intro.left{text-align:left;margin-left:0;margin-right:0}

.cards-3,.install-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mini-card,.install-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 10px 24px rgba(15,23,42,.06)}
.mini-card img{height:172px;width:100%;object-fit:cover}
.mini-copy{padding:18px}
.mini-copy h3,.install-card h3{margin:0 0 8px;font-size:25px;color:#10284e;line-height:1.08}
.mini-copy p,.install-card p{margin:0;font-size:16px;color:var(--muted);line-height:1.45}
.install-head{padding:42px 42px 20px}
.install-grid{padding:0 42px 42px}
.install-card{padding:18px}
.row-photo{width:100%;max-width:360px;height:200px;object-fit:cover;border-radius:16px;margin-bottom:16px;box-shadow:0 10px 25px rgba(0,0,0,0.08)}

.why,.commercial-grid,.contact{display:grid;grid-template-columns:1fr .95fr;gap:26px;align-items:center;padding:42px}
.stack{display:grid;gap:14px}
.item{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:#f8fbff;font-size:19px;font-weight:700;color:#334155}
.dot{width:12px;height:12px;border-radius:50%;background:var(--blue);flex:0 0 12px}
.coverage-photo-wrap{width:100%}
.coverage-photo{width:100%;height:100%;max-height:420px;object-fit:cover;border-radius:24px}
.thumbs{display:grid;gap:14px}
.thumbs img{width:100%;height:220px;object-fit:cover;border-radius:20px;box-shadow:0 10px 22px rgba(15,23,42,.08)}

.contact{align-items:start}
.contact-form-wrap{padding-right:10px}
.form-grid{display:grid;gap:14px;margin-top:24px}
input,textarea{width:100%;border:1px solid var(--line);border-radius:16px;padding:16px 18px;font:inherit;background:#fff}
.contact-card{text-align:center;display:flex;flex-direction:column;align-items:center;background:#f8fbff;border:1px solid var(--line);border-radius:22px;padding:22px}
.contact-card h4{margin:0 0 14px;font-size:28px;color:#10284e}
.contact-card p{margin:8px 0;font-size:18px;color:#475569}
.contact-logo-box{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;display:flex;justify-content:center;align-items:center}
.contact-logo-box img{max-width:400px;width:100%;height:auto;display:block}
.copy-page{padding:42px}
.site-footer{padding:30px 0 40px;color:#64748b;text-align:center}
.footer-inner p{margin:6px 0}

@media (max-width: 980px){
  .nav{flex-direction:column;gap:14px;padding:14px 16px}
  .brand img{height:72px;max-width:92vw}
  .menu{gap:18px}
  .header-cta{width:100%;max-width:220px}
  .hero,.cards-3,.install-grid,.why,.commercial-grid,.contact{grid-template-columns:1fr}
  .hero-copy{padding:38px 28px}
  .hero-copy h1{font-size:40px}
  .hero-copy p{font-size:19px}
  .inner,.install-head,.install-grid,.why,.commercial-grid,.contact,.copy-page{padding:24px 18px}
  .mini-card img,.thumbs img{height:180px}
  .row-photo{max-width:100%;height:180px}
  .contact-logo-box img{max-width:260px}
}