/* San Diego Excellence Plumbing - single stylesheet, mobile-first */

:root{
  --primary:#0f5fbf;
  --primary-dark:#0a4494;
  --primary-light:#eef4fc;
  --accent:#f59e0b;
  --accent-dark:#d97706;
  --ink:#0f172a;
  --body:#4b5563;
  --muted:#6b7280;
  --border:#e5e7eb;
  --bg:#ffffff;
  --bg-alt:#f9fafb;
  --bg-tint:#f3f7fc;
  --success:#059669;
  --danger:#dc2626;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 4px 12px rgba(15,23,42,.08);
  --shadow-lg:0 10px 32px rgba(15,23,42,.10);
  --radius:.5rem;
  --radius-lg:.75rem;
  --max:1160px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none;transition:color .15s}
a:hover{color:var(--primary-dark);text-decoration:underline}
ul,ol{padding-left:1.25rem}
h1,h2,h3,h4{font-weight:700;line-height:1.2;color:var(--ink);margin:0 0 .75rem}
h1{font-size:clamp(1.75rem,4.5vw,2.75rem);letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3.5vw,2rem);letter-spacing:-.01em}
h3{font-size:1.25rem}
h4{font-size:1.05rem}
p{margin:0 0 1rem;color:var(--body)}

.container{max-width:var(--max);margin:0 auto;padding:0 1.25rem}

/* Skip link */
.skip-link{position:absolute;left:-9999px;padding:.5rem 1rem;background:var(--ink);color:#fff;z-index:9999}
.skip-link:focus{left:1rem;top:1rem;z-index:9999}
#main:focus{outline:none;scroll-margin-top:5rem}

/* Emergency top bar */
.emergency-bar{
  background:var(--accent);color:var(--ink);text-align:center;padding:.4rem 1rem;
  font-size:.85rem;font-weight:600;letter-spacing:.02em;
}
.emergency-bar a{color:var(--ink);text-decoration:underline}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1.25rem;max-width:var(--max);margin:0 auto;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand-mark{
  width:38px;height:38px;border-radius:8px;background:var(--primary);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.1rem;flex-shrink:0;
}
.brand-text{font-weight:700;font-size:1rem;line-height:1.15}
.brand-text small{display:block;color:var(--muted);font-weight:500;font-size:.72rem}

.nav-toggle{
  background:none;border:1px solid var(--border);border-radius:6px;
  padding:.4rem .55rem;cursor:pointer;font-size:1.3rem;line-height:1;
  color:var(--ink);
}
.nav-toggle:hover{background:var(--bg-alt)}

.nav{display:none}
.nav.open{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;
  border-bottom:1px solid var(--border);box-shadow:var(--shadow-md);
}
.nav ul{list-style:none;margin:0;padding:.5rem 1rem}
.nav li{margin:0}
.nav a{
  display:block;padding:.75rem .5rem;color:var(--ink);font-weight:500;
  border-bottom:1px solid var(--bg-alt);
}
.nav a:hover{color:var(--primary);text-decoration:none}
.nav .cta-call{
  display:inline-block;margin:.5rem 0;padding:.6rem 1rem;background:var(--accent);
  color:var(--ink);border-radius:6px;text-align:center;font-weight:700;border:none;
}
.nav .cta-call:hover{background:var(--accent-dark);color:var(--ink)}

@media (min-width:900px){
  .nav-toggle{display:none}
  .nav,.nav.open{display:block;position:static;background:transparent;border:none;box-shadow:none}
  .nav ul{display:flex;gap:.25rem;padding:0;align-items:center}
  .nav a{border:none;padding:.5rem .8rem;border-radius:6px}
  .nav a:hover{background:var(--bg-alt)}
  .nav .cta-call{margin:0 0 0 .5rem;padding:.55rem 1.1rem}
}

/* Hero
   Mobile  : stacked - photo band on top (so the technician is actually
             visible), copy below on solid brand colour.
   Desktop : photo becomes a full-bleed background with a left-weighted
             scrim, copy overlaid on the empty-wall side. */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:var(--primary-dark); /* painted before the image decodes */
  padding:0;display:block;
}
.hero-media{
  position:relative;display:block;width:100%;
  aspect-ratio:4/3;max-height:17rem;   /* matches the mobile crop */
}
.hero-media img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;
  /* Bias upward so the technician's head stays in frame when the band is
     shorter than the image's 4:3 ratio */
  object-position:center 16%;
}
/* Soft fade so the photo melts into the copy block below it */
.hero-media::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:45%;
  background:linear-gradient(180deg,rgba(8,42,92,0),var(--primary-dark));
  pointer-events:none;
}
.hero-scrim{display:none} /* desktop-only overlay */
.hero-inner{
  position:relative;z-index:2;max-width:820px;margin:0 auto;
  text-align:center;padding:1.5rem 1.25rem 2.5rem;width:100%;
}

.hero-eyebrow{
  display:inline-block;padding:.35rem .85rem;background:rgba(255,255,255,.15);
  color:#fff;border-radius:999px;font-size:.8rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:1rem;
  border:1px solid rgba(255,255,255,.25);
}
.hero h1{color:#fff;margin-bottom:.75rem}
.hero .subhead{font-size:1.1rem;color:rgba(255,255,255,.9);max-width:640px;margin:0 auto 1.75rem}
.hero-ctas{display:flex;flex-direction:column;gap:.6rem;align-items:center;max-width:340px;margin:0 auto}
@media(min-width:560px){.hero-ctas{flex-direction:row;justify-content:center;max-width:none}}
.hero-trust{
  margin-top:2rem;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.2);
  display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;
  font-size:.85rem;color:rgba(255,255,255,.9);
}
.hero-trust strong{display:block;color:#fff;font-size:1.25rem;font-weight:700;margin-bottom:.15rem}

/* Desktop hero layout - MUST stay after the base .hero rules above so these
   win the cascade (same specificity, later declaration). Copy moves to the
   left half so it sits over the wall area, clear of the technician. */
@media(min-width:900px){
  .hero{display:flex;align-items:center;min-height:30rem;padding:4rem 0}
  /* Photo switches from stacked band to full-bleed background */
  .hero-media{position:absolute;inset:0;aspect-ratio:auto;max-height:none;height:100%}
  .hero-media::after{display:none}
  .hero-media img{object-position:78% center}
  .hero-scrim{
    display:block;position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,
      rgba(8,42,92,.94) 0%,
      rgba(8,42,92,.90) 32%,
      rgba(8,42,92,.62) 52%,
      rgba(8,42,92,.22) 72%,
      rgba(8,42,92,.10) 100%);
  }
  .hero-inner{max-width:var(--max);text-align:left;margin:0 auto;padding:0 1.25rem}
  .hero-inner > *{max-width:34rem}
  .hero .subhead{max-width:34rem;margin:0 0 1.75rem}
  .hero-ctas{justify-content:flex-start;margin:0;max-width:none}
  .hero-trust{max-width:34rem}
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.5rem;font-weight:700;font-size:1rem;border-radius:8px;
  text-decoration:none;transition:transform .1s,box-shadow .15s,background .15s;
  border:none;cursor:pointer;font-family:inherit;white-space:nowrap;
}
.btn-primary{background:var(--accent);color:var(--ink)}
.btn-primary:hover{background:var(--accent-dark);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-md)}
.btn-primary:active{transform:translateY(1px)}
.btn-secondary{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6)}
.btn-secondary:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none;border-color:#fff}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff;text-decoration:none}
.btn-block{width:100%}
.btn-lg{padding:1rem 1.75rem;font-size:1.05rem}

/* Sections */
section{padding:3rem 0}
.section-alt{background:var(--bg-alt)}
.section-header{text-align:center;max-width:640px;margin:0 auto 2rem}
.section-header p{color:var(--body);font-size:1.05rem}

/* Service grid */
.grid{display:grid;gap:1.25rem}
.grid-3{grid-template-columns:1fr}
@media(min-width:640px){.grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.grid-3{grid-template-columns:repeat(3,1fr)}}

.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:1.5rem;transition:box-shadow .2s,transform .2s,border-color .2s;
  display:flex;flex-direction:column;
}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--primary-light);transform:translateY(-2px)}
.card h3,.card h2{margin-bottom:.5rem;font-size:1.25rem}
.card p{flex:1;font-size:.95rem}
.card-icon{
  width:48px;height:48px;border-radius:10px;background:var(--primary-light);
  color:var(--primary);display:flex;align-items:center;justify-content:center;
  margin-bottom:1rem;
}
.card-icon svg{width:26px;height:26px}
.card-link{
  margin-top:1rem;color:var(--primary);font-weight:600;font-size:.9rem;
  display:inline-flex;align-items:center;gap:.35rem;
}
.card-link:hover{gap:.55rem;text-decoration:none}

/* Feature list (why us) */
.features{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:640px){.features{grid-template-columns:1fr 1fr}}
.feature{display:flex;gap:1rem;align-items:flex-start}
.feature-icon{
  width:40px;height:40px;background:var(--primary-light);color:var(--primary);
  border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.feature-icon svg{width:22px;height:22px}
.feature h4,.feature h3{margin-bottom:.25rem;font-size:1.05rem}
.feature p{font-size:.92rem;margin:0}

/* Areas grid */
.areas-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;
  max-width:640px;margin:0 auto;
}
@media(min-width:640px){.areas-grid{grid-template-columns:repeat(3,1fr)}}
.area-chip{
  padding:.65rem .9rem;background:#fff;border:1px solid var(--border);
  border-radius:8px;text-align:center;font-size:.9rem;color:var(--ink);
  font-weight:500;
}
.area-chip:hover{border-color:var(--primary);color:var(--primary);text-decoration:none}

/* CTA strip */
.cta-strip{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  color:#fff;text-align:center;padding:3rem 0;
}
.cta-strip h2{color:#fff}
.cta-strip p{color:rgba(255,255,255,.9);font-size:1.05rem;max-width:520px;margin:0 auto 1.5rem}
.cta-strip .btn-secondary{border-color:#fff;color:#fff}

/* Reviews / Google widget */
.reviews-band{
  padding:2rem;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);text-align:center;box-shadow:var(--shadow-sm);
  max-width:640px;margin:0 auto;
}
.reviews-band a{font-weight:600}

/* Contact grid */
.contact-grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:780px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-block{
  padding:1.5rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
}
.contact-block h3,.contact-block h2{margin-bottom:.75rem;color:var(--primary);font-size:1.25rem}
.contact-item{margin:.75rem 0;display:flex;gap:.65rem;align-items:flex-start}
.contact-item strong{display:block;color:var(--ink);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}
.contact-item a{font-size:1.1rem;font-weight:600}
address{font-style:normal;color:var(--body);line-height:1.5}

/* Content page (services, about, faq) */
.page-header{
  background:var(--bg-tint);padding:2.5rem 0 2rem;border-bottom:1px solid var(--border);
}
.page-header h1{margin-bottom:.5rem}
.page-header p{color:var(--body);max-width:720px;margin:0;font-size:1.05rem}

.breadcrumbs{
  font-size:.85rem;color:#52606f;margin-bottom:.75rem;
}
.breadcrumbs a{color:#52606f}
.breadcrumbs a:hover{color:var(--primary)}

.prose{max-width:760px;margin:0 auto}
.prose h2{margin-top:2.5rem}
.prose h3{margin-top:1.75rem}
.prose ul li,.prose ol li{margin-bottom:.4rem}
.prose blockquote{
  border-left:4px solid var(--primary);padding:0 0 0 1.25rem;margin:1.5rem 0;
  color:var(--body);font-style:italic;
}

/* Callout */
.callout{
  background:var(--primary-light);border-left:4px solid var(--primary);
  padding:1rem 1.25rem;border-radius:6px;margin:1.5rem 0;
}
.callout-danger{background:#fef2f2;border-left-color:var(--danger)}
.callout p:last-child{margin-bottom:0}

/* FAQ */
.faq-item{
  border-bottom:1px solid var(--border);padding:1.25rem 0;
}
.faq-item:last-child{border-bottom:none}
.faq-question{
  font-weight:600;font-size:1.05rem;color:var(--ink);margin-bottom:.5rem;
}
.faq-answer{color:var(--body);font-size:.95rem}

/* Google Maps embed - responsive.
   The raw embed code ships width="1000" height="500", which overflows every
   phone. We drop those attributes and drive the size from CSS instead:
   16:9 on mobile, wider and taller on desktop. */
.map-embed{
  position:relative;width:100%;aspect-ratio:16/10;
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
  background:var(--bg-alt);
}
.map-embed iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
@media(min-width:780px){
  .map-embed{aspect-ratio:2/1;max-height:32rem}
}

/* Full-width media band (services page). Sized by CSS so the browser can
   reserve the box before the image decodes - no layout shift. */
.media-band-wrap{padding:0 0 1rem}
.media-band{
  display:block;width:100%;position:relative;
  aspect-ratio:4/3;                     /* matches the mobile crop */
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
  background:var(--bg-alt);
}
.media-band img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
@media(min-width:700px){
  .media-band{aspect-ratio:1408/768}    /* full frame on larger screens */
}

/* Prev / all / next nav on individual area pages */
.area-nav{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  font-size:.95rem;font-weight:600;
}
.area-nav a{padding:.5rem 0}
.area-nav span{flex:1}

/* Footer */
.site-footer{
  background:var(--ink);color:#cbd5e1;padding:3rem 0 1.5rem;font-size:.9rem;
}
.site-footer a{color:#93c5fd}
.site-footer a:hover{color:#fff}
.footer-grid{
  display:grid;grid-template-columns:1fr;gap:1.75rem;
}
@media(min-width:640px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr}}
@media(min-width:900px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.footer-col h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.9rem}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:.4rem}
.footer-brand p{color:#94a3b8;font-size:.9rem;margin-top:.5rem}
.footer-brand address{color:#cbd5e1;font-size:.9rem;margin-top:.5rem}
.footer-bottom{
  border-top:1px solid #1e293b;padding-top:1.25rem;margin-top:2rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  color:#94a3b8;font-size:.85rem;
}

/* Utility */
.text-center{text-align:center}
.mt-0{margin-top:0}
.mt-1{margin-top:.5rem}
.mt-2{margin-top:1rem}
.mt-3{margin-top:1.5rem}
.mb-0{margin-bottom:0}
.hidden{display:none}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Focus */
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px rgba(255,255,255,.95);border-radius:3px}