/* FriendswoodPlumbers.com — single stylesheet. No framework, no CDN, system fonts only. */

:root {
  --navy: #0f2942;
  --navy-dk: #0a1c2e;
  --blue: #1a5f9e;
  --accent: #c8451f;
  --accent-dk: #a3360f;
  --ink: #1c1c1c;
  --muted: #55606b;
  --line: #d9dee3;
  --bg: #ffffff;
  --bg-alt: #f4f6f8;
  --wrap: 1080px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
}

img { max-width: 100%; height: auto; }

a { color: var(--blue); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

h1, h2, h3 { line-height: 1.25; color: var(--navy); margin: 0 0 .5em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; margin-top: 1.8em; }
h3 { font-size: 1.15rem; margin-top: 1.5em; }
p, ul, ol { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .4em; }

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff;
  padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- Sticky header (CSS only) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--accent);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 8px 20px;
  max-width: var(--wrap);
  margin: 0 auto;
}

.brand {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.brand span {
  display: block;
  font-weight: 400;
  font-size: .72rem;
  color: #b9cbdb;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.header-actions { display: flex; align-items: center; gap: 8px; }

/* Phone link — 48px minimum tap target */
.btn-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
}
.btn-call:hover { background: var(--accent-dk); }

/* On narrow screens the word "Call" pushes the button wide enough to wrap the
   brand onto three lines and grow the sticky header. Hide it visually but keep
   it in the accessible name. */
@media (max-width: 460px) {
  .btn-call .call-word {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Mobile nav toggle — checkbox hack, no JavaScript */
#nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.nav-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid #3d5871;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
}
.nav-label .bars,
.nav-label .bars::before,
.nav-label .bars::after {
  display: block;
  width: 20px; height: 2px;
  background: #fff;
  position: relative;
}
.nav-label .bars::before,
.nav-label .bars::after { content: ""; position: absolute; left: 0; }
.nav-label .bars::before { top: -6px; }
.nav-label .bars::after  { top: 6px; }
#nav-toggle:focus-visible + .nav-label { outline: 3px solid var(--accent); outline-offset: 2px; }

.site-nav { display: none; background: var(--navy-dk); }
#nav-toggle:checked ~ .site-nav { display: block; }
.site-nav ul { list-style: none; margin: 0 auto; padding: 4px 8px 10px; max-width: var(--wrap); }
.site-nav li { margin: 0; }
.site-nav a {
  display: block;
  padding: 13px 12px;
  color: #e6eef5;
  text-decoration: none;
  border-bottom: 1px solid #1c3550;
  font-size: .98rem;
}
.site-nav a:hover { color: #fff; background: #14314c; }
.site-nav a[aria-current="page"] { color: #fff; font-weight: 700; }

@media (min-width: 800px) {
  .nav-label { display: none; }
  .site-nav { display: block; background: transparent; }
  .site-nav ul { display: flex; gap: 4px; padding: 0 20px 6px; }
  .site-nav a { border-bottom: 0; padding: 8px 10px; font-size: .95rem; }
  .site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); }
}

/* ---------- Hero ---------- */

.hero {
  background: var(--navy);
  color: #fff;
  padding: 34px 0 30px;
}
.hero h1 { color: #fff; font-size: 1.85rem; margin-bottom: .4em; }
.hero p { color: #d5e1ec; font-size: 1.05rem; max-width: 46em; }
.hero .eyebrow {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #93b4d1;
  font-weight: 700;
  margin-bottom: .6em;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dk); }
.btn-outline { background: transparent; color: #fff; border-color: #7fa3c4; }
.btn-outline:hover { background: #17384f; }

.hero-note { font-size: .88rem; color: #a8c1d6; margin-top: 14px; }

/* ---------- Content ---------- */

section { padding: 26px 0; }
section[id] { scroll-margin-top: 78px; }
section.alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lede { font-size: 1.08rem; color: var(--muted); }

.cards { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 18px; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: #fff;
}
.card h3 { margin-top: 0; }
.card p { font-size: .96rem; color: var(--muted); }
.card a { font-weight: 700; }

.checklist { list-style: none; padding: 0; }
.checklist li { padding-left: 1.6em; position: relative; }
.checklist li::before {
  content: "\2713";
  position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700;
}

/* Photos. width/height attributes on the img reserve the box before load,
   so nothing shifts. Everything below the fold is loading="lazy". */
.photo { margin: 24px 0; }
.photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: var(--bg-alt);
}

.callout {
  border-left: 4px solid var(--accent);
  background: var(--bg-alt);
  padding: 14px 18px;
  margin: 20px 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------- FAQ (native details, no JS) ---------- */

.faq { border-top: 1px solid var(--line); margin-top: 18px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  padding: 15px 34px 15px 0;
  font-weight: 700;
  color: var(--navy);
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 6px; top: 12px;
  font-size: 1.5rem; font-weight: 400; color: var(--accent);
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > p, .faq details > ul { margin: 0 0 16px; color: var(--muted); }

/* ---------- Form ---------- */

.form-panel {
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: 8px;
  background: #fff;
  padding: 22px;
  max-width: 620px;
}
.field { margin-bottom: 15px; }

/* First/last name side by side once there is room; stacked on narrow screens. */
.field-row { display: grid; grid-template-columns: 1fr; column-gap: 14px; }
@media (min-width: 520px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}
.field label { display: block; font-weight: 700; font-size: .93rem; margin-bottom: 5px; color: var(--navy); }
.req { color: var(--accent); }

input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  font: inherit;
  font-size: 16px; /* prevents iOS zoom on focus */
  color: var(--ink);
  background: #fff;
  border: 1px solid #9aa6b1;
  border-radius: 6px;
}
textarea { min-height: 110px; resize: vertical; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 13px;
  margin-bottom: 14px;
}
.consent input[type="checkbox"] {
  width: 22px; height: 22px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.consent label {
  font-weight: 400;
  font-size: .88rem;
  line-height: 1.5;
  margin: 0;
  color: var(--ink);
}

.optional-tag {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 2px;
  white-space: nowrap;
}

.sms-disclosure {
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

.btn-submit {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 6px;
  min-height: 54px;
  font: inherit;
  font-weight: 700;
  font-size: 1.08rem;
  cursor: pointer;
}
.btn-submit:hover { background: var(--accent-dk); }

.form-alt { font-size: .92rem; color: var(--muted); margin-top: 14px; text-align: center; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy);
  color: #c2d3e1;
  margin-top: 34px;
  padding: 30px 0 24px;
  font-size: .92rem;
}
.site-footer h2 { color: #fff; font-size: 1rem; margin: 0 0 .6em; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: .5em; }
.legal {
  border-top: 1px solid #2a4560;
  margin-top: 24px;
  padding-top: 16px;
  font-size: .84rem;
  color: #97aec3;
}
.legal p { margin-bottom: .5em; }