/* Riverside24hrPlumbing - deterministic baseline stylesheet
   Generated: 2026-01-16
   Goal: single clean CTA/callbar implementation + zero mobile text disappearance.
*/
:root{
  --brand:#0b5ed7;
  --brand2:#0847a6;
  --text:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --soft:#f8fafc;
  --border:#e2e8f0;
  --shadow:0 10px 28px rgba(2,6,23,.12);
  --radius:16px;
  --max:1100px;
  --topbar-h:76px;
  --bottombar-h:78px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  padding-top:var(--topbar-h);
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

/* Sticky top call bar */
.top-call{
  position:fixed;
  top:0; left:0; right:0;
  z-index:9999;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:10px 12px;
  background:linear-gradient(180deg, var(--brand), var(--brand2));
  box-shadow:0 6px 18px rgba(2,6,23,.22);
}

/* CTA button (shared) */
.cta-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.18);
  text-decoration:none;
  text-align:center;
  max-width:calc(100% - 24px);
  box-shadow:0 8px 22px rgba(0,0,0,.25);
  backdrop-filter:saturate(120%) blur(6px);
  -webkit-backdrop-filter:saturate(120%) blur(6px);
}

/* Hard guarantee: CTA text visible on mobile (prevents transparent / text-fill bugs) */
.cta-button, .cta-button *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
  visibility:visible !important;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

.cta-text{
  font-weight:800;
  letter-spacing:.2px;
  font-size:16px;
  line-height:1.1;
}
.cta-phone{
  font-weight:900;
  font-size:16px;
  line-height:1.1;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  white-space:nowrap;
}
.cta-button:hover, .cta-button:focus{
  outline:none;
  border-color:rgba(255,255,255,.38);
  background:rgba(0,0,0,.24);
}
.cta-button:active{transform:translateY(1px)}

/* Hero */
.hero{
  position:relative;
  color:#ffffff;
  background:
    linear-gradient(180deg, rgba(2,6,23,.68), rgba(2,6,23,.68)),
    url("/images/hero-plumber.jpg") center/cover no-repeat;
}
.hero-content{
  max-width:var(--max);
  margin:0 auto;
  padding:46px 16px 28px;
  text-align:center;
}
.hero-content h1{
  margin:0 0 10px 0;
  font-size:clamp(28px, 3.4vw, 46px);
  line-height:1.08;
}
.hero-subtitle{
  margin:0 auto 16px;
  max-width:900px;
  color:rgba(255,255,255,.90);
  font-size:clamp(16px, 1.3vw, 18px);
}
.trust-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:16px 0 0 0;
  color:rgba(255,255,255,.88);
  font-size:14px;
}
.trust-row span{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
}

/* Sections */
.section{
  max-width:var(--max);
  margin:0 auto;
  padding:40px 16px;
}
.section-light{
  background:var(--soft);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.section h2{
  margin:0 0 14px 0;
  font-size:clamp(22px, 2.2vw, 32px);
}
.section p{margin:0 0 12px 0; color:var(--muted)}

/* Services grid */
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-top:14px;
}
.service-card{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 8px 20px rgba(2,6,23,.06);
}
.service-card h3{margin:0 0 8px 0; font-size:18px}
.service-card p{margin:0; color:var(--muted); font-size:15px}

/* Footer */
.footer{
  background:#0b1220;
  color:rgba(255,255,255,.86);
  padding:28px 16px;
  text-align:center;
}
.footer a{color:#ffffff}

/* Bottom call bar (mobile-only) */
.mobile-call-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:9999;
  display:none;
  justify-content:center;
  align-items:center;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(11,94,215,.96), rgba(8,71,166,.98));
  box-shadow:0 -8px 22px rgba(2,6,23,.28);
}

/* Responsive */
@media (max-width: 900px){
  .services-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 768px){
  body{padding-bottom:var(--bottombar-h)}
  .services-grid{grid-template-columns:1fr}
  .mobile-call-bar{display:flex}
  .cta-button{width:min(520px, 100%)}
}
.hero-urgency{font-size:14px;margin-top:10px;color:#555;}

.hero-trust {
  margin-top: 10px;
  padding-left: 0;
  list-style: none;
  font-size: 14px;
  color: #333;
}
.hero-trust li {
  margin-bottom: 4px;
}