/* =========================================================
   USA Plumbing Service — Stylesheet
   Palette: deep navy, teal accent, energetic orange CTA
========================================================= */

:root{
  --navy: #0a2540;
  --navy-2: #123a5e;
  --navy-3: #0d3055;
  --teal: #5fd4c4;
  --orange: #ff6a2b;
  --orange-light: #ff8c52;
  --ink: #1c2b3a;
  --grey: #5b6b7b;
  --grey-light: #eef2f6;
  --bg: #ffffff;
  --bg-alt: #f5f8fb;
  --radius: 16px;
  --maxw: 1180px;
  --shadow: 0 22px 50px -22px rgba(10,37,64,0.25);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: 'Poppins', sans-serif;
  color: var(--navy);
  margin: 0 0 .5em;
  line-height: 1.2;
  font-weight: 700;
}
p{ margin: 0 0 1em; color: var(--grey); }
a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.accent-text{ color: var(--orange); }

.eyebrow{
  display:inline-block;
  color: var(--orange);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 14px;
}
.eyebrow.center{ display:block; text-align:center; }

.section-title{ font-size: clamp(28px, 4vw, 40px); }
.section-title.center{ text-align:center; }
.section-sub{
  color: var(--grey);
  text-align:center;
  max-width: 560px;
  margin: 0 auto 50px;
}

section{ position: relative; padding: 100px 0; }

/* ---------- top bar ---------- */
.top-bar{ background: var(--navy); color:#fff; font-size: 13px; }
.top-bar-inner{ display:flex; align-items:center; justify-content:space-between; padding: 8px 24px; }
.top-bar-item{ display:flex; align-items:center; gap:7px; color: rgba(255,255,255,0.85); }
.top-bar-phone{ font-weight:600; color:#fff; }
.top-bar-phone:hover{ color: var(--teal); }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; left:0; right:0; z-index: 1000;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  padding: 14px 0;
  box-shadow: 0 2px 20px rgba(10,37,64,0.06);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap: 20px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ display:flex; flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{ font-family:'Poppins',sans-serif; font-weight:700; font-size: 18px; color: var(--navy); }
.brand-name.light{ color:#fff; }
.brand-accent{ color: var(--orange); }
.brand-tag{ font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--grey); margin-top:3px; }

.main-nav{ display:flex; align-items:center; gap: 30px; }
.main-nav a{
  font-size: 14.5px; font-weight:500; color: var(--ink);
  position: relative; padding: 4px 0; transition: color .2s;
}
.main-nav a:not(.nav-cta):hover{ color: var(--orange); }
.nav-cta{
  background: var(--orange); color: #fff !important; font-weight:600;
  padding: 11px 22px; border-radius: 999px;
  transition: transform .25s var(--ease), background .25s, box-shadow .25s;
}
.nav-cta:hover{ background: var(--orange-light); transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(255,106,43,0.5); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{ width:24px; height:2px; background: var(--navy); border-radius:2px; transition: all .3s; }

/* ---------- hero ---------- */
.hero{
  position: relative; overflow:hidden; padding: 90px 0 70px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 60%, var(--navy-2) 100%);
}
.hero-bg{ position:absolute; inset:0; z-index:0; opacity:.9; }
.hero-pipes{ position:absolute; inset:0; width:100%; height:100%; }
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items:center; }
.hero-copy .eyebrow{ color: var(--teal); }
.hero-title{ font-size: clamp(32px, 4.6vw, 50px); color:#fff; margin-bottom: 20px; }
.hero-sub{ font-size: 17px; color: rgba(255,255,255,0.78); max-width: 520px; margin-bottom: 34px; }
.hero-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom: 40px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; padding: 15px 28px; border-radius: 999px;
  font-size: 14.5px; font-weight:600; letter-spacing:.2px; border: 1px solid transparent; cursor:pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
}
.btn-orange{ background: var(--orange); color: #fff; }
.btn-orange:hover{ background: var(--orange-light); transform: translateY(-3px); box-shadow: 0 16px 30px -12px rgba(255,106,43,0.55); }
.btn-outline-light{ border-color: rgba(255,255,255,0.5); color: #fff; }
.btn-outline-light:hover{ background: rgba(255,255,255,0.1); transform: translateY(-3px); }
.btn-outline-dark{ border-color: var(--navy); color: var(--navy); }
.btn-outline-dark:hover{ background: var(--navy); color:#fff; transform: translateY(-3px); }
.full-width{ width:100%; }

.hero-badges{ display:flex; gap: 30px; flex-wrap:wrap; }
.badge{ display:flex; flex-direction:column; }
.badge strong{ font-family:'Poppins',sans-serif; font-size: 24px; color: var(--teal); }
.badge span{ font-size: 12px; color: rgba(255,255,255,0.7); margin-top:2px; }

.hero-visual{ position:relative; }

/* ---------- emergency strip ---------- */
.emergency-strip{ background: var(--orange); padding: 16px 0; }
.emergency-inner{ display:flex; align-items:center; justify-content:space-between; gap: 20px; flex-wrap:wrap; }
.emergency-text{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:600; font-size:14.5px; }
.emergency-call{ color:#fff; font-weight:700; font-size:14.5px; text-decoration: underline; text-underline-offset:3px; }
.emergency-call:hover{ opacity:.85; }

/* ---------- services ---------- */
.services{ background: var(--bg); }
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card{
  background: var(--bg-alt);
  border: 1px solid rgba(10,37,64,0.06);
  border-radius: var(--radius);
  padding: 32px 26px;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.service-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow); }
.service-card.highlight{ background: linear-gradient(135deg, var(--navy), var(--navy-2)); }
.service-card.highlight h3, .service-card.highlight p{ color:#fff; }
.service-card.highlight p{ opacity:.8; }
.service-icon{
  width: 56px; height:56px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
  background: #fff; border:1px solid rgba(10,37,64,0.08); margin-bottom: 20px; box-shadow: 0 6px 16px rgba(10,37,64,0.06);
}
.service-icon.light{ background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); }
.service-card h3{ font-size: 18.5px; margin-bottom: 8px; }
.service-card p{ font-size: 14.5px; margin:0; }

/* ---------- why us ---------- */
.why-us{ background: var(--bg-alt); }
.why-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items:center; }
.why-frame{ position:relative; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); aspect-ratio: 400/440; }
.why-badge{
  position:absolute; left:18px; bottom:18px; background:#fff; border-radius: 12px; padding: 12px 16px;
  display:flex; flex-direction:column; box-shadow: var(--shadow);
}
.why-badge strong{ font-family:'Poppins',sans-serif; font-size:20px; color: var(--navy); }
.why-badge strong span{ color: var(--orange); }
.why-badge small{ color: var(--grey); font-size:11px; }

.why-copy .lead{ font-size: 17px; color: var(--ink); opacity:.85; }
.why-points{ display:grid; gap: 20px; margin-top: 26px; }
.why-points li{ display:flex; gap: 14px; align-items:flex-start; }
.why-icon{
  width:34px; height:34px; border-radius:50%; background: rgba(255,106,43,0.1);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;
}
.why-points strong{ color: var(--navy); font-size: 15.5px; display:block; margin-bottom:2px; }
.why-points p{ margin:0; font-size: 14px; }

/* ---------- reviews ---------- */
.reviews{ background: var(--bg); }
.reviews-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.review-card{
  background: var(--bg-alt); border:1px solid rgba(10,37,64,0.06); border-radius: var(--radius);
  padding: 28px; display:flex; flex-direction:column; gap:16px;
}
.review-card .stars{ color: var(--orange); letter-spacing:2px; font-size:15px; }
.review-card p{ color: var(--ink); opacity:.85; font-size:14.5px; margin:0; flex:1; }
.reviewer{ display:flex; align-items:center; gap:12px; }
.avatar{
  width:38px; height:38px; border-radius:50%; background: linear-gradient(135deg, var(--navy), var(--teal));
  color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:700;
}
.reviewer strong{ display:block; font-size: 13.5px; color: var(--navy); }
.reviewer small{ color: var(--grey); font-size: 11.5px; }
.reviews-cta{ text-align:center; margin: 40px 0 0; }
.reviews-cta a{ color: var(--orange); font-weight:600; border-bottom: 1px solid rgba(255,106,43,0.4); padding-bottom:2px; }
.reviews-cta a:hover{ opacity:.8; }

/* ---------- service area ---------- */
.area{ background: var(--bg-alt); }
.area-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:stretch; }
.info-row{ display:flex; align-items:flex-start; gap:14px; margin-bottom: 20px; font-size: 15px; color: var(--ink); }
.info-row svg{ flex-shrink:0; margin-top:2px; }
.info-row a:hover{ color: var(--orange); }
.area-actions{ display:flex; gap:14px; margin-top: 30px; flex-wrap:wrap; }
.area-map{
  position: relative; display:block; border-radius: var(--radius); overflow:hidden;
  min-height: 340px; box-shadow: var(--shadow);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.area-map:hover{ transform: translateY(-4px); }
.map-art{ position:absolute; inset:0; width:100%; height:100%; }
.map-overlay{
  position:absolute; left:0; right:0; bottom:0; padding: 22px 24px;
  display:flex; flex-direction:column; gap:2px;
  background: linear-gradient(0deg, rgba(10,37,64,0.92), rgba(10,37,64,0));
}
.map-overlay-title{ font-family:'Poppins',sans-serif; font-weight:600; font-size: 17px; color: #fff; }
.map-overlay-sub{ font-size: 12.5px; color: rgba(255,255,255,0.7); }
.map-overlay-link{ margin-top:10px; font-size: 13px; color: var(--teal); font-weight:600; }

/* ---------- quote form ---------- */
.quote{ background: var(--bg); }
.quote-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items:flex-start; }
.quote-copy .lead{ font-size: 16.5px; margin-bottom: 26px; }
.quote-form{
  background: var(--bg-alt); border: 1px solid rgba(10,37,64,0.06); border-radius: var(--radius);
  padding: 34px; display:flex; flex-direction:column; gap: 18px; box-shadow: var(--shadow);
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quote-form label{ display:flex; flex-direction:column; gap:7px; font-size: 13.5px; font-weight:600; color: var(--navy); }
.quote-form input, .quote-form select, .quote-form textarea{
  font-family:'Inter',sans-serif; font-size:14.5px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(10,37,64,0.15); background:#fff; color: var(--ink); resize: vertical;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus{
  outline:none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,106,43,0.15);
}
.form-note{ font-size: 12.5px; color: var(--grey); text-align:center; margin: 4px 0 0; }
.form-note.success{ color: #1a9e6b; font-weight:600; }

/* ---------- CTA band ---------- */
.cta-band{
  padding: 90px 0; text-align:center;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%);
}
.cta-band h2{ font-size: clamp(26px,4vw,36px); color:#fff; }
.cta-band p{ max-width:480px; margin:0 auto 30px; color: rgba(255,255,255,0.75); }
.cta-band .hero-actions{ justify-content:center; margin-bottom:0; }

/* ---------- footer ---------- */
.site-footer{ background: var(--navy); padding-top: 70px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 50px; padding-bottom: 50px; }
.footer-grid h4{ font-family:'Poppins',sans-serif; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color: var(--teal); margin-bottom:18px; }
.footer-grid a, .footer-grid span{ display:block; color: rgba(255,255,255,0.7); font-size: 14px; margin-bottom: 12px; }
.footer-grid a:hover{ color: var(--orange-light); }
.footer-about{ font-size: 14px; max-width: 320px; margin-top: 14px; color: rgba(255,255,255,0.65); }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,0.1); padding: 22px 0; }
.footer-bottom p{ margin:0; font-size:12.5px; color: rgba(255,255,255,0.55); text-align:center; }

/* ---------- floating call fab (mobile) ---------- */
.mobile-call-fab{
  display:none; position: fixed; left: 20px; bottom: 20px; width: 54px; height:54px; border-radius: 50%;
  background: var(--orange); align-items:center; justify-content:center; z-index: 900;
  box-shadow: 0 10px 24px rgba(255,106,43,0.5);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ box-shadow: 0 10px 24px rgba(255,106,43,0.5);} 50%{ box-shadow: 0 10px 24px rgba(255,106,43,0.8), 0 0 0 8px rgba(255,106,43,0.15);} }

/* ---------- back to top ---------- */
.to-top{
  position: fixed; right: 20px; bottom: 20px; width: 48px; height:48px; border-radius: 50%;
  background: var(--navy); display:flex; align-items:center; justify-content:center; z-index: 900;
  opacity:0; pointer-events:none; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .25s;
  box-shadow: 0 10px 24px rgba(10,37,64,0.35);
}
.to-top.visible{ opacity:1; pointer-events:auto; transform: translateY(0); }
.to-top:hover{ background: var(--navy-2); }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform: translateY(0); }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-visual{ max-width: 320px; margin: 0 auto; order:-1; }
  .why-grid, .area-grid, .quote-grid{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: repeat(2,1fr); }
  .reviews-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px){
  .top-bar-inner{ font-size: 11.5px; }
  .main-nav{
    position: fixed; top: 0; right: 0; height: 100vh; width: min(80vw, 320px);
    background: #fff;
    flex-direction:column; align-items:flex-start; justify-content:center; gap: 26px; padding: 40px;
    transform: translateX(100%); transition: transform .4s var(--ease);
    box-shadow: -10px 0 40px rgba(10,37,64,0.15);
  }
  .main-nav.open{ transform: translateX(0); }
  .nav-toggle{ display:flex; z-index: 1002; }
  .services-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .mobile-call-fab{ display:flex; }
  section{ padding: 70px 0; }
  .emergency-inner{ justify-content:center; text-align:center; flex-direction:column; gap:8px; }
}
@media (max-width: 460px){
  .hero-actions .btn, .cta-band .btn{ width:100%; }
  .hero-actions, .cta-band .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-badges{ gap: 20px; }
}