PAGES.CSS (shared styles for non-home pages)
   Used by: about.html, contact.html, sewer-repair.html, emergency.html (optional)
   ========================================================== */

/* Basic page wrappers */
.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
}

/* ==========================================================
   ABOUT PAGE STYLES
   ========================================================== */

.hero-dark{
  background:
    radial-gradient(1200px 520px at 50% 0%, rgba(0,120,255,.22), rgba(0,0,0,0)),
    linear-gradient(180deg, #0b1628 0%, #08101e 100%);
  color:#fff;
  padding:10px 0 56px;
  height:auto !important;
  min-height:unset !important;
}

.hero-center{ text-align:center; }

.hero-title{
  margin:18px 0 10px;
  font-size:clamp(34px,6vw,54px);
  line-height:1.05;
  font-weight:1000;
  letter-spacing:-0.02em;
}

.hero-sub{
  margin:0 auto;
  max-width:860px;
  font-size:16px;
  line-height:1.6;
  color:#e8eef9;
  font-weight:650;
}

.hero-actions{
  margin-top:18px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.hero-chips{
  margin-top:16px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.chip{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-weight:800;
  font-size:12px;
  color:#fff;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:10px;
  font-weight:900;
  text-decoration:none;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn-red{ background:#e0312c; color:#fff; }
.btn-dark{ background:#0b1324; color:#fff; }
.btn-outline{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.22);
}

/* Sections */
.section-light{
  background:#f4f6fb;
  padding:24px 0;
}
.section-dark-band{
  background:linear-gradient(180deg, #0b1628 0%, #08101e 100%);
  color:#fff;
  padding:44px 0;
}

.panel-title{ text-align:center; margin-bottom:18px; }
.panel-title h2{
  margin:0;
  font-size:40px;
  font-weight:1000;
  color:#0b5bd3; /* same as phone pill */
  letter-spacing:-0.01em;
}
.panel-title p{
  margin:8px auto 0;
  max-width:820px;
  color:#334155;
  font-weight:650;
  line-height:1.6;
}

.band-head{ text-align:center; margin-bottom:18px; }
.band-head h2{
  margin:0;
  font-size:40px;
  font-weight:1000;
  color:#fff;
  letter-spacing:-0.01em;
}
.band-head p{
  margin:8px auto 0;
  max-width:820px;
  color:#e8eef9;
  font-weight:650;
  line-height:1.6;
}

/* Grids */
.grid-2,.grid-3{ display:grid; gap:14px; }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }

@media (min-width:900px){
  .grid-2{ grid-template-columns:1fr 1fr; gap:16px; }
  .grid-3{ grid-template-columns:repeat(3,1fr); gap:16px; }
}

/* Cards */
.card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  padding:16px;
  box-shadow:0 10px 26px rgba(2,6,23,.08);
}
.card-highlight{
  border-color:rgba(0,120,255,.35);
  box-shadow:0 14px 30px rgba(0,90,220,.14);
}
.card h3{
  margin:0 0 10px;
  font-weight:1000;
  letter-spacing:-0.01em;
  color:var(--blue); /* same as phone pill */
}

.card-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(15,23,42,.16);
  background:#f1f6ff;
  color:#0b4fd6;
  margin-bottom:10px;
}

.list{ margin:0; padding-left:18px; }
.list li{ margin:7px 0; color:#334155; font-weight:650; }

/* Dark band cards */
.band-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:16px;
}
.band-card h3{ margin:0 0 10px; font-weight:1000; }

.list-invert li{ color:#e8eef9; }

/* Red CTA band */
.cta-red{
  background:#e0312c;
  color:#fff;
  padding:14px 0;
  text-align:center;
}
.cta-red-inner{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}
.cta-red-phone{ font-size:44px; font-weight:1000; letter-spacing:.02em; }
.cta-red-sub{ font-weight:900; }

/* Bottom Get Help section */
.get-help-wrap{ background:#f5f7fb; padding:56px 0; }

.get-help-title{ text-align:center; margin-bottom:20px; }
.get-help-title h2{
  margin:0;
  font-size:44px;
  font-weight:1000;
  letter-spacing:-0.02em;
}
.get-help-title p{
  margin:10px auto 0;
  max-width:720px;
  color:#334155;
  font-weight:650;
  line-height:1.6;
  font-size:14px;
}

.help-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:980px){
  .help-grid{ grid-template-columns:1.1fr .9fr; gap:20px; }
}

.form-card, .call-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:12px;
  box-shadow:0 10px 26px rgba(2,6,23,.08);
  padding:14px;
}
.form-card h3, .call-card h3{ margin:0 0 10px; font-size:18px; font-weight:1000; }

.form-card .small{
  margin:0 0 12px;
  color:#64748b;
  font-size:12px;
  font-weight:650;
}

.field{ margin:10px 0; }
.input, .textarea{
  width:100%;
  border:1px solid rgba(15,23,42,.18);
  border-radius:10px;
  padding:12px 12px;
  font-size:14px;
  font-weight:650;
  background:#f7f9fd;
  outline:none;
}
.textarea{ min-height:120px; resize:vertical; }

.send-btn{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:10px;
  background:#0b5bd3;
  color:#fff;
  font-weight:1000;
  border:none;
  cursor:pointer;
}

.fineprint{
  margin:8px 0 0;
  font-size:11px;
  color:#64748b;
  font-weight:650;
}

.call-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:10px;
  background:#0b5bd3;
  color:#fff;
  font-weight:1000;
  text-decoration:none;
  margin-bottom:14px;
  box-shadow:0 10px 18px rgba(11,91,211,.22);
}

.call-meta{
  color:#334155;
  font-size:12px;
  font-weight:650;
  line-height:1.65;
}


/* =========================
   CONTACT PAGE / CONTACT SECTION
   (matches the “correct” 2-column card layout)
   ========================= */

.section--white{
  background:#f7f9fc;
  color:#0b1220;
  border-top:1px solid rgba(0,0,0,.08);
  padding:54px 0;
}

.section--white *{ color:inherit; }

.contact-heading{
  color:#0b1220;
  font-weight:950;
  letter-spacing:-.6px;
  font-size:clamp(34px, 3.6vw, 56px);
  margin:0 0 10px;
}

.contact-sub{
  color:rgba(11,18,32,.78);
  font-weight:650;
  margin:0 0 26px;
  line-height:1.45;
  max-width:860px;
}

/* 2-column layout on desktop */
.contact-box{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:start;
}

/* cards */
.panel-white{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 12px 22px rgba(0,0,0,.08);
  border-radius:16px;
  padding:18px;
}

.panel-title{
  margin:0 0 8px;
  font-weight:950;
  letter-spacing:-.2px;
  color:#0b1220;
  font-size:18px;
}

.fine,
.fine-dark{
  font-size:12px;
  color:rgba(11,18,32,.65);
  line-height:1.45;
}

/* form */
.form{
  display:grid;
  gap:10px;
  margin-top:10px;
}

.input, .textarea, .input-light{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background:#f4f6fa;
  color:#0b1220;
  outline:none;
  font-weight:650;
}

.textarea{
  min-height:120px;
  resize:vertical;
}

.input::placeholder,
.textarea::placeholder{
  color:rgba(11,18,32,.55);
}

/* buttons */
.btn-secondary{
  background:linear-gradient(180deg, #0a61c9, #0856b4);
  border:1px solid rgba(0,0,0,.08);
  color:#ffffff;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}

.btn-secondary:hover{ filter:brightness(1.05); }

/* call button full width */
.phone-btn--full{
  width:100%;
  justify-content:center;
}

/* spacing blocks inside call card */
.contact-fine-block{ margin-top:14px; }

/* responsive */
@media (max-width: 940px){
  .contact-box{ grid-template-columns: 1fr; }
}

/* Force contact phone button text + icon white */
.phone-btn--full,
.phone-btn--full span,
.phone-btn--full .phone-icon{
  color:#ffffff !important;
  fill:#ffffff !important;
}
.trust-strip{
  background:#f5f8ff;
  padding:16px 0;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}

.trust-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.trust-left{
  font-weight:1000;
  color:#0b1220;
}

.trust-right{
  font-weight:700;
  color:#334155;
}