:root {
  --navy:#13294B;
  --orange:#FF7A00;
  --bg:#FFFFFF;
  --text:#1A1A1A;
  --muted:#6B7280;
  --light:#F5F7FB;
  --max:1100px;
}

* { box-sizing: border-box; }
body {
  margin:0;
  font-family:Lato, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
a { color:var(--navy); text-decoration:none; }

/* Header & Navigation */
header, footer { background:var(--navy); color:#fff; }
.nav {
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
}
nav ul {
  list-style:none;
  display:flex;
  gap:20px;
  margin:0;
  padding:0;
}
nav a { color:#fff; font-weight:700; }
.logo { font-weight:900; }
.logo span {
  background:#fff;
  color:var(--navy);
  padding:0 6px;
  border-radius:3px;
  margin:0 4px;
  font-weight:900;
}

/* Layout */
.container {
  max-width:var(--max);
  margin:0 auto;
  padding:40px 16px;
}
.grid {
  display:grid;
  gap:20px;
}
@media (max-width:900px){ .grid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .grid{grid-template-columns:1fr;} nav ul{flex-wrap:wrap;gap:12px;} }

/* Cards & Sections */
.card {
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:10px;
  padding:18px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.card h2, .card h3 { margin:8px 0; }
.card p { color:var(--muted); }

.icon {
  width:42px;
  height:42px;
  border-radius:8px;
  background:var(--light);
  display:grid;
  place-items:center;
  margin-bottom:10px;
  color:var(--navy);
  font-weight:900;
}

/* Buttons */
.cta, .btn {
  display:inline-block;
  background:var(--orange);
  color:#fff;
  padding:12px 20px;
  border-radius:6px;
  font-weight:900;
  margin-top:10px;
}

/* Hero */
.hero {
  display:grid;
  place-items:center;
  text-align:center;
  padding:72px 16px;
  background:linear-gradient(180deg, rgba(19,41,75,0.9), rgba(19,41,75,0.75)), url('hero-plumber.jpg') center/cover;
  color:#fff;
}
.hero h1 { font-size:36px; margin:0 0 10px; }
.hero p { max-width:750px; margin:0 auto 20px; font-size:18px; }

/* Reviews */
.review {
  background:var(--light);
  border-left:4px solid var(--orange);
  padding:20px;
  border-radius:10px;
  margin-bottom:20px;
}
.review h3 { margin:0 0 6px; font-size:18px; }
.review p { margin:0; }

/* Badges */
.badges {
  margin-top:30px;
  padding:20px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.badges ul {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.badges li {
  background:var(--light);
  padding:10px 16px;
  border-radius:6px;
  font-weight:700;
  color:var(--navy);
}

.chat-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 999;
}

.chat-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #333;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform 0.2s ease;
}

.chat-btn:hover {
  transform: scale(1.1);
}

.chat-btn.whatsapp {
  background-color: #25D366; /* WhatsApp green */
}

.chat-btn.messenger {
  background-color: #0084FF; /* Messenger blue */
}



/* Google Reviews Section */
.google-reviews {
  margin-top:40px;
  padding:20px;
  background:var(--light);
  border-radius:12px;
}
.google-reviews h2 { color:var(--navy); margin-bottom:20px; }

/* Footer */
footer .footgrid {
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
@media (max-width:900px){ footer .footgrid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ footer .footgrid{grid-template-columns:1fr;} }