/* ==========================================================================
   waterheaterrepairelkhorn.com — site.css   (generated by _tools/build.py)

   Contrast note: every foreground/background pair below was picked to clear
   WCAG AA. The two that are easy to break by "brightening" later:
     --accent  #a8410d on #fff text  -> 6.0:1   (white text ON accent = 6.0:1)
     --link    #0a5a86 on #fff       -> 5.9:1
   Do not lighten either without re-checking.
   ========================================================================== */

:root{
  --navy:#0d2b45;
  --navy-dk:#07192a;
  --ink:#15222c;
  --body:#3c4b57;
  --muted:#5a6b78;
  --line:#dde5eb;
  --line-2:#eef3f6;
  --bg:#ffffff;
  --bg-alt:#f5f8fa;
  --accent:#a8410d;
  --accent-dk:#833209;
  --link:#0a5a86;
  --link-dk:#074562;
  --focus:#0a5a86;
  --radius:10px;
  --wrap:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--body);
  background:var(--bg);
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{color:var(--ink);line-height:1.25;margin:0 0 .55em;font-weight:700;
  letter-spacing:-.012em}
h1{font-size:clamp(1.75rem,1.15rem + 2.4vw,2.7rem)}
h2{font-size:clamp(1.35rem,1.1rem + 1.05vw,1.85rem)}
h3{font-size:1.08rem}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin:0 0 .45em}
a{color:var(--link);text-underline-offset:.16em}
a:hover{color:var(--link-dk)}
strong{color:var(--ink)}
address{font-style:normal}

/* --- focus: never remove, always 3:1 ------------------------------------- */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:3px;
}
.site-footer :focus-visible,.cta-band :focus-visible,.hero-home :focus-visible{
  outline-color:#ffd79a;
}
main:focus{outline:none}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:8px;top:-60px;z-index:100;
  background:var(--navy);color:#fff;padding:12px 18px;
  border-radius:0 0 var(--radius) var(--radius);font-weight:700;
  text-decoration:none;
}
.skip-link:focus{top:0;color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;width:100%}

/* --- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  min-height:48px;padding:11px 22px;border-radius:var(--radius);
  font-weight:700;text-decoration:none;border:2px solid transparent;
  line-height:1.2;
}
.btn-call{background:var(--accent);color:#fff;flex-direction:column;gap:0;
  padding:8px 20px;text-align:center}
.btn-call:hover,.btn-call:focus{background:var(--accent-dk);color:#fff}
.btn-call-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;
  opacity:.92;font-weight:700}
.btn-call-num{font-size:1.05rem;font-weight:800;white-space:nowrap}
.btn-call-lg{padding:12px 30px}
.btn-call-lg .btn-call-num{font-size:1.32rem}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.btn-ghost:hover,.btn-ghost:focus{background:rgba(255,255,255,.14);color:#fff}
.btn-submit{background:var(--navy);color:#fff;font-size:1rem;width:100%}
.btn-submit:hover,.btn-submit:focus{background:var(--navy-dk);color:#fff}

/* --- header -------------------------------------------------------------- */
.site-header{background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40}
.header-inner{display:flex;align-items:center;gap:18px;padding-top:10px;
  padding-bottom:10px;flex-wrap:wrap}
.logo{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.logo-img{height:auto;width:auto;max-height:44px;max-width:270px}
.logo-text{display:flex;flex-direction:column;line-height:1.05}
.logo-1{font-weight:700;color:var(--navy);font-size:.72rem;letter-spacing:.22em}
.logo-2{font-weight:800;color:var(--navy);font-size:1.02rem;letter-spacing:-.02em}
.logo-accent{color:var(--accent)}

.nav-desktop ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-desktop a{
  display:block;padding:10px 12px;border-radius:8px;color:var(--ink);
  text-decoration:none;font-weight:600;font-size:.94rem;
}
.nav-desktop a:hover{background:var(--bg-alt);color:var(--link-dk)}
.nav-desktop a.is-active{color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}

.nav-mobile{display:none}
.nav-mobile>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  min-height:48px;padding:0 14px;border:2px solid var(--line);
  border-radius:var(--radius);font-weight:700;color:var(--ink);
}
.nav-mobile>summary::-webkit-details-marker{display:none}
.nav-mobile .bars{
  width:20px;height:2px;background:var(--ink);position:relative;display:block;
}
.nav-mobile .bars::before,.nav-mobile .bars::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);
}
.nav-mobile .bars::before{top:-6px}
.nav-mobile .bars::after{top:6px}
.nav-mobile[open] nav{
  /* Belt and braces on top of the header's own z-index — this panel overlaps
     whatever section follows the header, and it must always win. */
  position:absolute;left:0;right:0;top:100%;z-index:50;background:#fff;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:0 12px 24px rgba(13,43,69,.12);
}
.nav-mobile nav ul{list-style:none;margin:0;padding:8px 20px 16px}
.nav-mobile nav a{
  display:block;padding:13px 4px;border-bottom:1px solid var(--line-2);
  color:var(--ink);text-decoration:none;font-weight:600;
}
.nav-mobile nav a.is-active{color:var(--accent)}

/* --- hero ---------------------------------------------------------------- */
.hero-home{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.34}
.hero-home::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(7,25,42,.94) 0%,rgba(7,25,42,.86) 46%,rgba(7,25,42,.55) 100%);
}
.hero-inner{position:relative;z-index:2;padding:64px 20px 56px;max-width:860px;
  margin-inline:auto}
.hero-home h1{color:#fff;margin-bottom:.4em}
.eyebrow{
  text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:700;
  color:#f2a03d;margin:0 0 14px;
}
.hero-home .lede{font-size:1.14rem;color:#e2ebf2;max-width:60ch;margin-bottom:1.6em}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.trust{display:flex;flex-wrap:wrap;gap:8px 26px;list-style:none;margin:0;padding:0}
.trust li{
  color:#e2ebf2;font-weight:600;font-size:.93rem;padding-left:22px;position:relative;
}
.trust li::before{
  content:"";position:absolute;left:0;top:.52em;width:11px;height:6px;
  border-left:2.5px solid #f2a03d;border-bottom:2.5px solid #f2a03d;
  transform:rotate(-45deg);
}

.page-hero{background:var(--bg-alt);border-bottom:1px solid var(--line);
  padding:44px 0 0}
.page-hero .wrap{padding-bottom:34px}
.page-hero h1{margin-bottom:.35em}
.page-hero .lede{font-size:1.1rem;color:var(--body);max-width:64ch;
  margin-bottom:1.4em}
.page-hero-media{max-height:340px;overflow:hidden}
.page-hero-media img{width:100%;height:340px;object-fit:cover}

/* --- breadcrumbs --------------------------------------------------------- */
.crumbs{border-bottom:1px solid var(--line-2);background:#fff;font-size:.86rem}
.crumbs+.page-hero{border-top:0}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;
  padding:11px 0}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--muted)}
.crumbs a{color:var(--link)}
.crumbs [aria-current]{color:var(--muted)}

/* --- body / sections ----------------------------------------------------- */
.page-body{padding:44px 20px 8px;max-width:960px}
.sec{margin:0 0 44px}
.sec>p,.sec>ul,.sec>ol{max-width:72ch}
.lede{max-width:70ch}

.ticks{list-style:none;padding:0}
.ticks li{padding-left:28px;position:relative;margin-bottom:.6em}
.ticks li::before{
  content:"";position:absolute;left:2px;top:.5em;width:12px;height:7px;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg);
}

.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.card{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 20px 6px;
}
.card h3{margin-bottom:.4em}

.steps{list-style:none;counter-reset:step;padding:0;
  display:grid;gap:14px}
.steps li{
  counter-increment:step;position:relative;padding:18px 20px 4px 62px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  margin:0;
}
.steps li::before{
  content:counter(step);position:absolute;left:18px;top:18px;
  width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;
  font-size:.92rem;
}
.steps h3{margin-bottom:.3em}

.svc-grid{list-style:none;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.svc-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  background:#fff;margin:0;transition:border-color .18s ease,box-shadow .18s ease;
}
.svc-card:hover{border-color:#b9cbd8;box-shadow:0 6px 18px rgba(13,43,69,.07)}
.svc-card h3{margin-bottom:.35em;font-size:1.05rem}
.svc-card h3 a{text-decoration:none;color:var(--link)}
.svc-card h3 a:hover{text-decoration:underline}
.svc-card p{margin:0;font-size:.94rem;color:var(--muted)}

.rel{background:var(--bg-alt);border-left:4px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px 6px;
  margin-top:26px;max-width:72ch}
.rel-h{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);margin-bottom:.6em}
.rel ul{list-style:none;padding:0;margin:0 0 .8em}
.rel li{margin-bottom:.35em}

.area-grid{list-style:none;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.area-grid li{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:8px;
  padding:11px 14px;margin:0;font-weight:600;color:var(--ink);font-size:.94rem;
}

.addr-card{background:var(--bg-alt);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 22px 8px}
.addr-card h3{margin-bottom:.3em;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted)}
.addr-card h3+p,.addr-card h3+address{margin-bottom:1.1em}
.addr-hours{color:var(--muted);font-size:.94rem}
.big-tel a{font-size:1.5rem;font-weight:800;text-decoration:none}
.big-tel a:hover{text-decoration:underline}

.prose h2{margin-top:1.8em}
.prose h2:first-of-type{margin-top:0}
.updated{color:var(--muted);font-size:.9rem}

/* --- homepage image bands ------------------------------------------------ */
.home-bands{
  display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin:0 0 42px;
}
.band{margin:0}
.band-img{
  width:100%;height:230px;object-fit:cover;border-radius:var(--radius);
  border:1px solid var(--line);
}
.band figcaption{
  margin-top:10px;font-size:.93rem;color:var(--muted);line-height:1.55;
}

/* --- "more pages" inner-link module -------------------------------------- */
.more-pages{
  border-top:1px solid var(--line);padding-top:26px;margin-top:8px;
}
.more-pages-h{
  font-size:1.02rem;font-weight:800;color:var(--ink);margin-bottom:.7em;
}
.more-pages-list{list-style:none;padding:0;margin:0}
.more-pages-list li{margin-bottom:.5em}
.more-pages-list a{font-weight:600}

/* --- FAQ (native disclosure) --------------------------------------------- */
.faq-item{border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:10px;background:#fff}
.faq-item>summary{
  cursor:pointer;list-style:none;padding:16px 48px 16px 20px;font-weight:700;
  color:var(--ink);position:relative;min-height:48px;
}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::after{
  content:"";position:absolute;right:22px;top:calc(50% - 5px);
  width:10px;height:10px;border-right:2.5px solid var(--accent);
  border-bottom:2.5px solid var(--accent);transform:rotate(45deg);
}
.faq-item[open]>summary::after{transform:rotate(-135deg);top:calc(50% - 2px)}
.faq-item[open]>summary{border-bottom:1px solid var(--line-2)}
.faq-a{padding:16px 20px 2px}
.faq-a p{max-width:72ch}

/* --- contact form -------------------------------------------------------- */
.contact-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  align-items:start}
.contact-form{border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.contact-form h3{font-size:1.15rem;margin-bottom:.8em}
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;color:var(--ink);margin-bottom:6px;
  font-size:.94rem}
.req{color:var(--accent)}
.field input,.field textarea{
  width:100%;font:inherit;color:var(--ink);padding:11px 13px;min-height:48px;
  border:2px solid var(--line);border-radius:8px;background:#fff;
}
.field textarea{min-height:120px;resize:vertical}
.field input:hover,.field textarea:hover{border-color:#b9cbd8}
.hint{font-size:.86rem;color:var(--muted);margin:6px 0 0}
.form-note{font-size:.88rem;color:var(--muted)}

/* --- CTA band ------------------------------------------------------------ */
.cta-band{background:var(--navy);color:#fff;margin-top:26px}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:38px 20px;flex-wrap:wrap}
.cta-band h2{color:#fff;margin-bottom:.35em}
.cta-band p{color:#dbe6ee;margin:0;max-width:62ch}

/* --- footer -------------------------------------------------------------- */
.site-footer{background:var(--navy-dk);color:#cfdce6;padding:48px 0 26px;
  font-size:.94rem}
.f-top{display:grid;gap:30px;grid-template-columns:1.4fr repeat(4,1fr)}
.f-head{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;
  margin-bottom:1em}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.5em}
.site-footer a{color:#cfdce6;text-decoration:none}
.site-footer a:hover,.site-footer a:focus{color:#fff;text-decoration:underline}
.f-name{color:#fff;font-weight:800;font-size:1.06rem;margin-bottom:.5em}
.f-blurb{color:#a9bccb;max-width:34ch}
.btn-call-footer{margin:6px 0 16px}
.f-address{color:#cfdce6;margin-bottom:.9em}
.f-hours{color:#a9bccb;font-size:.88rem}
.f-hours-k{color:#cfdce6;font-weight:700}
.f-areas{border-top:1px solid rgba(255,255,255,.13);margin-top:34px;padding-top:24px}
.f-areas p{color:#a9bccb;max-width:none;margin:0}
.f-legal{border-top:1px solid rgba(255,255,255,.13);margin-top:24px;padding-top:20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:#8ea4b5;font-size:.86rem}
.f-legal p{margin:0}
.f-disclaim{max-width:46ch}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:1020px){
  .f-top{grid-template-columns:1fr 1fr 1fr}
  .f-brand{grid-column:1 / -1}
}
@media (max-width:900px){
  .nav-desktop{display:none}
  .nav-mobile{display:block}
  /* MUST stay positioned. This was `position:static`, and z-index is ignored on
     a static element — so the header's z-index:40 did nothing, the open mobile
     menu painted underneath .hero-inner (z-index:2), and tapping Menu looked
     like it did nothing at all. The <details> was opening correctly the whole
     time; the panel was just behind the hero.
     .hero-home is position:relative with z-index:auto, which creates NO
     stacking context, so .hero-inner's z-index:2 competes in the ROOT stacking
     context. The header has to out-rank it there.
     `relative` rather than `sticky` keeps the header from eating screen height
     on a phone while still giving z-index something to apply to. */
  .site-header{position:relative;z-index:40}
  .header-inner{position:relative}
  .logo-img{max-height:36px;max-width:210px}
}
@media (max-width:640px){
  .f-top{grid-template-columns:1fr 1fr}
  .hero-inner{padding:44px 20px 40px}
  .page-hero{padding-top:30px}
  .page-hero-media img{height:210px}
  .cta-inner{padding:30px 20px}
  .header-call .btn-call-label{display:none}
  .header-call{padding:8px 14px}
  .steps li{padding-left:20px;padding-top:52px}
  .steps li::before{top:16px;left:20px}
}
@media (max-width:420px){
  .f-top{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

@media print{
  .site-header,.cta-band,.nav-mobile,.skip-link,.crumbs{display:none}
  body{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}