/* Woodstock Water Heater & Drain Pros - styles.css, v1.
   Split Command design (direction A): navy + amber, Oswald display,
   Inter body. Sticky header, button dropdown nav, internal-scroll mobile
   menu. No body overflow hidden anywhere. No custom .cf-turnstile CSS. */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,Helvetica,sans-serif;color:#1d2b3a;background:#fff;line-height:1.6}
h1,h2,h3{font-family:Oswald,'Arial Narrow','Liberation Sans Narrow',Arial,sans-serif;text-transform:uppercase;line-height:1.2}
a{color:inherit}
img{display:block;max-width:100%}
.skip{position:absolute;left:-9999px;top:0;background:#f5a400;color:#0b1220;padding:10px 16px;font-weight:700;z-index:100}
.skip:focus{left:0}
.topbar{background:#0b1220;color:#e8eef5;font-size:13px}
.topbar .wrap{max-width:1140px;margin:0 auto;padding:8px 20px;display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
header{position:sticky;top:0;z-index:50;background:#0f2a44;color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.head{max-width:1140px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:24px;position:relative}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.mark{width:44px;height:44px;background:#f5a400;color:#0b1220;display:flex;align-items:center;justify-content:center;flex:none}
.mark svg{width:30px;height:30px}
.word{min-width:0}
.word b{font-family:Oswald,Arial,sans-serif;text-transform:uppercase;line-height:1.05;font-size:20px;display:block}
.word span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#f5a400}
nav.main{margin-left:auto}
nav.main .links{display:flex;align-items:center;gap:22px}
nav.main a{color:#fff;text-decoration:none;font-weight:600;font-size:15px}
nav.main a:hover{color:#f5a400}
.has-drop{position:relative}
.dropbtn{background:none;border:0;color:#fff;font:600 15px Inter,Arial,sans-serif;cursor:pointer;padding:4px 0;display:flex;align-items:center;gap:6px}
.dropbtn:hover{color:#f5a400}
.chev{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;flex:none}
.drop{display:none;position:absolute;top:30px;left:0;background:#fff;color:#1d2b3a;min-width:260px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:60}
nav.main .drop a{display:block;padding:11px 16px;border-bottom:1px solid #e5e9ef;color:#1d2b3a}
nav.main .drop a:hover{background:#fff4d6;color:#0f2a44}
.has-drop.open .drop{display:block}
@media(hover:hover){
  nav.main .has-drop:hover .drop{display:block}
}
.chip{border:1px solid #5b7ba3;padding:6px 10px;font-size:12px;font-weight:600;color:#e8eef5;white-space:nowrap}
.callbtn{background:#f5a400;color:#0b1220;text-decoration:none;font-weight:700;padding:11px 18px;border-radius:3px;white-space:nowrap;display:inline-block}
.callbtn:hover{background:#ffd34d}
.burger{display:none;margin-left:auto;background:none;border:2px solid #f5a400;color:#fff;padding:8px 10px;cursor:pointer;flex:none}
.burger .bar{display:block;width:22px;height:3px;background:#fff;margin:3px 0}
.mpanel{display:none}
.hero{background:#0f2a44;color:#fff}
.hero .in{max-width:1140px;margin:0 auto;padding:52px 20px;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;min-width:0}
.hero .in>div{min-width:0}
.hero h1{font-size:50px;margin:10px 0 14px}
.hero h1 em{font-style:normal;color:#f5a400}
.kicker{color:#f5a400;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px}
.hero .sub{color:#dbe5f0;font-size:17px;max-width:520px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.chips span{border:1px solid #5b7ba3;padding:7px 12px;font-size:13px;font-weight:600;color:#e8eef5}
.chips a{border:1px solid #5b7ba3;padding:7px 12px;font-size:13px;font-weight:600;color:#e8eef5;text-decoration:none}
.chips a:hover{border-color:#f5a400;color:#f5a400}
.notfound .chips a{background:#0f2a44;color:#fff;border-color:#0f2a44}
.notfound .chips a:hover{background:#0b1220;color:#f5a400;border-color:#0b1220}
.hero .callbtn{margin-top:6px;font-size:17px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.badges span{border:1px solid #5b7ba3;padding:7px 12px;font-size:13px;font-weight:600;color:#e8eef5}
.formcard{background:#fff;color:#1d2b3a;padding:26px;border-radius:4px;box-shadow:0 14px 34px rgba(0,0,0,.35);min-width:0}
.formcard h2{font-size:24px;color:#0f2a44;margin-bottom:4px}
.formcard p{font-size:14px;color:#4a5a6e;margin-bottom:16px}
.formcard label{display:block;font-size:13px;font-weight:700;margin:10px 0 4px;text-transform:uppercase;letter-spacing:.05em}
.formcard input,.formcard select,.formcard textarea{width:100%;padding:11px 12px;border:1px solid #c3ccd8;border-radius:3px;font:400 15px Inter,Arial,sans-serif}
.formcard button{width:100%;margin-top:16px;background:#0f2a44;color:#fff;border:0;padding:14px;font:700 16px Oswald,Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.formcard button:hover{background:#f5a400;color:#0b1220}
.formcard button:disabled{opacity:.6;cursor:default}
.formcard .ferr{display:none;margin-top:12px;font-size:14px;font-weight:600;color:#9b1c1c;background:#fdecec;border:1px solid #f5c2c2;padding:10px 12px;border-radius:3px}
.formcard .ferr.show{display:block}
.formcard .note{font-size:13px;color:#4a5a6e;margin-top:12px}
.hp{position:absolute;left:-9999px;visibility:hidden}
.photoband{height:340px;overflow:hidden}
.photoband img{width:100%;height:100%;object-fit:cover}
.dark{background:#0f2a44;color:#fff}
.dark .wrap{max-width:1140px;margin:0 auto;padding:44px 20px}
.dark h1{font-size:44px;margin:10px 0 12px}
.dark .sub{color:#dbe5f0;font-size:17px;max-width:720px}
.bread{font-size:13px;color:#9fb6d0;margin-bottom:6px}
.bread a{color:#9fb6d0;text-decoration:none}
.bread a:hover{color:#f5a400}
.bread span{color:#e8eef5}
section{padding:56px 20px}
section>.wrap,section>h2,section>.lede,section>.grid,section>.answer-first,section>.split,section>.formcard,section>.est,section>.steps,section>.tablewrap,section>.mapwrap,section>details,section>ul,section>ol,section>p,section>.glance,section>aside{max-width:1140px;margin-left:auto;margin-right:auto}
section h2{font-size:34px;color:#0f2a44;margin-bottom:8px}
.lede{color:#4a5a6e;max-width:680px;margin-bottom:28px}
section.tint{background:#eef2f7}
.answer-first{background:#fff4d6;border-left:4px solid #f5a400;padding:18px 20px;font-size:18px;line-height:1.6}
.answer-first p{color:#1d2b3a}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border:1px solid #e0e6ee;border-radius:4px;overflow:hidden;background:#fff}
.card img{height:200px;width:100%;object-fit:cover}
.card .b{padding:18px}
.card h3{font-size:20px;color:#0f2a44;margin-bottom:6px}
.card p{font-size:14px;color:#4a5a6e}
.card .more{display:inline-block;margin-top:12px;font-weight:700;color:#0f2a44}
.relcard{border:1px solid #e0e6ee;border-radius:4px;overflow:hidden;background:#fff}
.relcard img{height:180px;width:100%;object-fit:cover}
.relcard .b{padding:18px}
.relcard h3{font-size:20px;color:#0f2a44;margin-bottom:6px}
.relcard p{font-size:14px;color:#4a5a6e}
.relcard .more{display:inline-block;margin-top:12px;font-weight:700;color:#0f2a44}
.why{background:#eef2f7}
.whygrid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;max-width:1140px;margin:0 auto}
.whygrid img{border-radius:4px}
.trust{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.trust div{background:#fff;border-left:4px solid #f5a400;padding:14px 16px}
.trust b{display:block;font-family:Oswald,Arial,sans-serif;text-transform:uppercase;color:#0f2a44}
.trust span{font-size:14px;color:#4a5a6e}
.areas{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1140px;margin:0 auto}
.area{border:1px solid #e0e6ee;border-radius:4px;overflow:hidden;background:#fff}
.area img{height:220px;width:100%;object-fit:cover}
.area .body{padding:20px}
.area h3{font-size:22px;color:#0f2a44}
.area p{color:#4a5a6e;font-size:15px;margin-top:6px}
.area a{font-weight:700;color:#0f2a44;display:inline-block;margin-top:10px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;max-width:1140px;margin:0 auto}
.split.flip .split-text{order:2}
.split.flip figure{order:1}
.split-text h2{font-size:30px;color:#0f2a44;margin-bottom:10px}
.split-text p{margin-bottom:14px}
.split-text ul,.split-text ol{margin:0 0 14px 20px}
.split-text li{margin-bottom:6px}
.split figure img{border-radius:4px;width:100%;height:auto}
.split figcaption{font-size:13px;color:#4a5a6e;margin-top:8px}
.glance{background:#fff;border:1px solid #e0e6ee;border-left:4px solid #0f2a44;padding:16px 18px;margin-bottom:18px}
.glance h3{font-size:18px;color:#0f2a44;margin-bottom:8px}
.glance ul{margin-left:18px}
.glance li{margin-bottom:5px;font-size:15px}
.callout{background:#fff4d6;border-left:4px solid #f5a400;padding:16px 18px;margin:18px 0}
.callout p{font-size:17px;font-weight:600;color:#0f2a44}
.tablewrap{overflow-x:auto;margin:18px 0}
.datatable{width:100%;border-collapse:collapse;font-size:15px}
.datatable th{background:#0f2a44;color:#fff;text-align:left;padding:11px 14px}
.datatable td{padding:11px 14px;border-bottom:1px solid #e0e6ee}
.datatable tbody tr:nth-child(even) td{background:#f4f6f9}
details.faq{border:1px solid #e0e6ee;border-radius:4px;padding:16px 18px;margin-bottom:12px;background:#fff}
details.faq summary{font-weight:700;color:#0f2a44;cursor:pointer;font-size:17px}
details.faq p{margin-top:10px;color:#1d2b3a}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1140px;margin:0 auto}
.step{border:1px solid #e0e6ee;border-radius:4px;padding:20px;background:#fff}
.step .n{font-family:Oswald,Arial,sans-serif;font-size:28px;color:#f5a400;font-weight:700}
.step h3{font-size:20px;color:#0f2a44;margin:6px 0}
.step p{font-size:14px;color:#4a5a6e}
.est{border:1px solid #e0e6ee;border-radius:4px;padding:26px;background:#fff;max-width:760px}
.est label{display:block;font-size:13px;font-weight:700;margin:12px 0 4px;text-transform:uppercase;letter-spacing:.05em}
.est select,.est input[type=range]{width:100%;padding:11px 12px;border:1px solid #c3ccd8;border-radius:3px;font:400 15px Inter,Arial,sans-serif}
.est button{margin-top:16px;background:#0f2a44;color:#fff;border:0;padding:14px 22px;font:700 16px Oswald,Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.est button:hover{background:#f5a400;color:#0b1220}
.est .result{margin-top:16px;font-size:16px;background:#eef2f7;border-left:4px solid #0f2a44;padding:14px 16px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:18px}
.cols3 h3{font-size:20px;color:#fff;margin-bottom:6px}
.cols3 p{color:#dbe5f0;font-size:15px}
.mapwrap{margin:0 auto}
.mapwrap iframe{width:100%;height:380px;border:0}
.source{font-size:14px;color:#4a5a6e}
.source a{color:#0f2a44;font-weight:700}
footer{background:#0b1220;color:#cdd8e5}
footer .in{max-width:1140px;margin:0 auto;padding:44px 20px;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:28px}
footer h3{color:#fff;font-size:18px;margin-bottom:12px}
footer a{display:block;color:#cdd8e5;text-decoration:none;padding:3px 0;font-size:14px}
footer a:hover{color:#f5a400}
footer p{font-size:14px}
footer .phone{font-size:22px;font-weight:700;color:#f5a400;text-decoration:none}
footer .fine{max-width:1140px;margin:0 auto;padding:0 20px 30px}
footer .fine p{font-size:13px;color:#8fa3b8}
footer .fine a{display:inline;color:#8fa3b8}
.callbar{display:none}
@media(max-width:900px){
  .hero .in{grid-template-columns:1fr;padding:36px 20px}
  .hero h1{font-size:38px}
  .grid{grid-template-columns:1fr 1fr}
  .whygrid,.areas,.split,footer .in,.cols3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .split.flip .split-text,.split.flip figure{order:0}
  .split-text{display:contents}
  .split-text h2{order:1}
  .split figure,.split.flip figure{order:2}
  .split-text .split-body{order:3}
  .split figure img{aspect-ratio:16/10;object-fit:cover;max-height:260px}
  nav.main{display:none}
  .burger{display:block}
  .mpanel{display:none;position:absolute;top:100%;left:0;right:0;background:#0f2a44;flex-direction:column;padding:16px 20px;gap:4px;z-index:55;max-height:calc(100dvh - 70px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .mpanel.open{display:flex}
  .mpanel a{display:block;color:#fff;text-decoration:none;font-weight:600;font-size:16px;padding:10px 0;border-bottom:1px solid #24486e}
  .mpanel .mdropbtn{background:none;border:0;border-bottom:1px solid #24486e;color:#fff;font:600 16px Inter,Arial,sans-serif;cursor:pointer;padding:10px 0;display:flex;align-items:center;gap:6px;width:100%;text-align:left}
  .mpanel .msub{display:none;padding-left:16px}
  .mpanel .msub.open{display:block}
  .mpanel .msub a{font-size:15px}
  .chip{display:none}
  .callbtn.headcall{display:none}
  .photoband{height:220px}
  .dark h1{font-size:34px}
  body{padding-bottom:72px}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#f5a400;color:#0b1220;text-decoration:none;font-weight:800;font-size:19px;justify-content:center;padding:16px}
}
@media(max-width:600px){
  .grid,.trust,.steps{grid-template-columns:1fr}
}
@media(max-width:480px){
  .topbar .wrap,section,.dark .wrap,footer .in,footer .fine{padding-left:12px;padding-right:12px}
  .hero .in{padding:36px 12px}
  .hero h1{font-size:36px}
  .head{padding:14px 12px}
  .formcard{padding:20px 12px}
  .word b{font-size:16px}
  .mark{width:38px;height:38px}
  .mark svg{width:26px;height:26px}
  section{padding-top:40px;padding-bottom:40px}
  .mapwrap iframe{height:300px}
}