/* skin: voltage */
/* Wavemark plumbing template — industrial/utilitarian. Steel + copper. Mobile-first. */
:root {
  --steel: #141416;
  --steel-deep: #09090b;
  --paper: #f4f4f5;
  --paper-card: #ffffff;
  --ink: #0d0d0f;
  --ink-soft: #55555e;
  --copper: #1f5fd0;
  /* Small accent text on light backgrounds only. The bright accent
     stays on buttons, tickers and dark sections where it already passes. */
  --accent-ink: #1f5fd0;
  --copper-deep: #17489e;
  --copper-light: #c3d7f7;
  --line: #dcdce1;
  --radius: 6px;
  --shadow: 0 10px 28px rgba(9, 9, 11, 0.18);
  --display: "Archivo", "Helvetica Neue", sans-serif;
  --body: "Inter", system-ui, sans-serif;
  /* Button background only. The base accent is unchanged; white
     label text on it measured 4.40:1 against the 4.5 minimum. */
  --btn-bg: #1f5fd0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body { font-family: var(--body); color: var(--ink); background: var(--paper); line-height: 1.6; font-size: 16px; }

h1, h2, h3, .logo { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.08; }
h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 4.5vw, 2.7rem); }
h3 { font-size: 1.05rem; letter-spacing: 0.02em; }
.accent-text { color: var(--copper-light); }  /* light variant: .accent-text sits on the DARK hero photo, never on the
     white page. The base accent measured 2.50:1 there on the foundry skin
     (needs 3.0); the -light variant measures 10.34:1. Fixed 2026-08-06. */
a { color: inherit; }

.eyebrow { font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; margin-bottom: 12px; }
.eyebrow-light { color: var(--copper-light); }

.concept-banner { background: var(--steel-deep); color: #d8dde2; font-size: 0.8rem; text-align: center; padding: 8px 16px; font-family: var(--body); }
.concept-banner strong { color: #fff; }

/* Nav */
.site-header { position: sticky; top: 0; z-index: 60; background: transparent; transition: background 0.25s ease, box-shadow 0.25s ease; }
.site-header.scrolled { background: rgba(28, 33, 40, 0.96); backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(0,0,0,0.2); }
.header-inner { max-width: 1180px; margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; gap: 20px; justify-content: space-between; }
.logo { font-size: 1.1rem; white-space: nowrap; color: #fff; }
.logo-mark { display: inline-block; background: var(--copper); color: #fff; padding: 3px 9px; margin-right: 6px; font-size: 0.95rem; }
.logo-sub { color: var(--accent-ink); }
.header-nav { display: none; gap: 26px; font-size: 0.86rem; font-family: var(--display); letter-spacing: 0.05em; text-transform: uppercase; }
.header-nav a { text-decoration: none; color: rgba(255,255,255,0.8); }
.header-nav a:hover { color: var(--copper-light); }
.header-cta { display: none; align-items: center; gap: 14px; }
.nav-phone { font-family: var(--display); font-weight: 600; color: #fff; text-decoration: none; letter-spacing: 0.02em; }
.hamburger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; cursor: pointer; }
.hamburger span { width: 22px; height: 2px; background: #fff; display: block; }
.mobile-menu { display: none; flex-direction: column; background: var(--steel); padding: 8px 20px 20px; gap: 4px; }
.mobile-menu.open { display: flex; }
.mobile-menu a { color: rgba(255,255,255,0.85); text-decoration: none; padding: 10px 0; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-menu .btn { margin-top: 10px; text-align: center; border-bottom: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 24px; border: 2px solid transparent; border-radius: var(--radius); font-family: var(--display); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--btn-bg); color: #fff; border-color: var(--btn-bg); }
.btn-primary:hover { background: var(--copper-deep); border-color: var(--copper-deep); }
.btn-outline-light { border-color: rgba(255,255,255,0.6); color: #fff; background: transparent; }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
/* 64px, not 44px. 44 is Apple's floor for any tap target; on a trades site
   the call button is the product. Measured guidance for home-service sites is
   64-80px with the number readable at arm's length. Applies to the hero pair
   only -- .btn-lg is not used elsewhere. Raised 2026-08-08. */
.btn-lg { padding: 0 30px; font-size: 17px; min-height: 64px; }
@media (max-width: 600px) {
  /* One thumb, one tap: the whole row is the target. */
  .hero-actions { display: grid; gap: 10px; }
  .hero-actions .btn-lg { width: 100%; min-height: 68px; font-size: 18px; }
}

/* Hero */
.hero { position: relative; min-height: 88vh; display: flex; align-items: flex-end; overflow: hidden; margin-top: -70px; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,21,26,0.55) 0%, rgba(18,21,26,0.50) 30%, rgba(18,21,26,0.82) 62%, rgba(18,21,26,0.94) 100%); }
.hero-content { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 140px 20px 64px; width: 100%; color: #fff; }
h1 { color: #fff; }
.hero-lead { max-width: 560px; margin-top: 20px; font-size: 1.08rem; color: rgba(255,255,255,0.82); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Ticker */
.ticker-wrap { background: var(--copper); overflow: hidden; white-space: nowrap; padding: 11px 0; }
.ticker-track { display: inline-block; white-space: nowrap; animation: ticker 32s linear infinite; }
.ticker-track span { font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.ticker-track .dot { margin: 0 18px; color: rgba(255,255,255,0.6); font-size: 0.6rem; vertical-align: middle; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Trust strip */
.trust-strip { background: var(--steel); color: var(--paper); }
.trust-inner { max-width: 1180px; margin: 0 auto; padding: 30px 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.trust-item { display: flex; flex-direction: column; gap: 3px; }
.trust-num { font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--copper-light); text-transform: uppercase; }
.trust-label { font-size: 0.8rem; color: #9aa3ac; letter-spacing: 0.02em; }

/* Sections */
.section { max-width: 1180px; margin: 0 auto; padding: 76px 20px; }
.gallery { padding: 76px 20px; background: var(--steel-deep); }
.section-head { margin-bottom: 40px; max-width: 640px; }
.section-sub { color: var(--ink-soft); font-size: 1rem; margin-top: 6px; }
.section-note { margin-top: 8px; font-size: 0.86rem; color: var(--ink-soft); font-style: italic; }
.gallery .section-head .eyebrow, .gallery .section-head h2 { color: #fff; }
.gallery .section-note { color: #8b929a; }

/* Services */
.services-grid { display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); }
.service-card { background: var(--paper-card); padding: 30px 26px; }
.service-card h3 { margin-bottom: 10px; color: var(--ink); }
.service-card p { color: var(--ink-soft); font-size: 0.95rem; }

/* Gallery */
.gallery-grid { display: grid; gap: 14px; margin-top: 8px; }
.gallery-card { position: relative; border-radius: var(--radius); overflow: hidden; }
.gallery-card img { width: 100%; height: 230px; object-fit: cover; display: block; }
.gallery-card figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 16px; font-family: var(--display); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent); }

/* Process */
.process-grid { display: grid; gap: 24px; }
.process-step { padding: 6px 0; }
.process-num { font-family: var(--display); font-size: 2.4rem; font-weight: 600; color: var(--copper); line-height: 1; margin-bottom: 10px; }
.process-step h3 { margin-bottom: 6px; }
.process-step p { color: var(--ink-soft); font-size: 0.94rem; }

/* Area band */
.area-band { background: var(--copper); color: #fff; }
.area-inner { max-width: 1180px; margin: 0 auto; padding: 48px 20px; }
.area-inner h2 { color: #fff; }
.area-inner p { margin-top: 8px; color: rgba(255,255,255,0.85); }

/* Form */
.form-section { background: var(--paper); }
.form-grid { display: grid; gap: 40px; }
.form-phone { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.form-phone a { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--copper); text-decoration: none; margin-top: 4px; }
.form-lead { color: var(--ink-soft); margin: 10px 0 0; }
.form-wrap { background: var(--paper-card); padding: 32px; border-radius: var(--radius); box-shadow: var(--shadow); }
form label { display: block; font-family: var(--display); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin: 16px 0 6px; color: var(--ink-soft); }
form label:first-child { margin-top: 0; }
form input, form select { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); font-family: var(--body); font-size: 1rem; color: var(--ink); }
form input:focus, form select:focus { outline: 2px solid var(--copper); outline-offset: 1px; }
/* :not(.chat-input) so the chat Send button keeps its natural width —
   without it the full-width estimate-form rule collapses the chat text field */
form:not(.chat-input) .btn { margin-top: 22px; width: 100%; }
.success-panel { margin-top: 18px; padding: 16px 18px; background: #eaf3ea; border: 1px solid #b9d6b9; border-radius: var(--radius); color: #2c4a2c; }

/* Footer */
.site-footer { background: var(--steel-deep); color: #8b929a; margin-bottom: 64px; }
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 40px 20px; display: grid; gap: 18px; }
.site-footer .logo { color: var(--paper); margin-bottom: 8px; }
.footer-note { font-size: 0.8rem; max-width: 480px; }

/* Sticky call (mobile) */
.sticky-call { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; padding: 10px 14px; background: rgba(20, 24, 29, 0.97); }
.sticky-call .btn { width: 100%; }
.hero-call-btn { display: none; } /* sticky Call bar already covers this on mobile */

/* Chat */

.toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--steel); color: #fff; padding: 12px 18px; border-radius: var(--radius); opacity: 0; pointer-events: none; z-index: 100; transition: opacity 0.2s; }
.toast.visible { opacity: 1; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.16s; }
.stagger-3 { transition-delay: 0.24s; }
.stagger-4 { transition-delay: 0.32s; }
.stagger-5 { transition-delay: 0.40s; }

@media (min-width: 760px) {
  .header-nav { display: flex; }
  .header-cta { display: flex; }
  .hamburger { display: none; }
  .trust-inner { grid-template-columns: repeat(4, 1fr); }
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-card img { height: 270px; }
  .process-grid { grid-template-columns: repeat(4, 1fr); }
  .form-grid { grid-template-columns: 1fr 1.1fr; }
  .sticky-call { display: none; }
  .hero-call-btn { display: inline-flex; }
  .site-footer { margin-bottom: 0; }
  .chat-toggle { bottom: 20px; }
  .chat-panel { bottom: 20px; }
  .footer-inner { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---------- FAQ ----------
   Native <details>/<summary>: no JavaScript, keyboard accessible and
   screen-reader friendly for free, works with JS off, and the answer text is
   indexable — which is worth more for a local business than any animation. */
.faq-list {
  max-width: 760px;
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
/* Safari/Chrome draw their own triangle; we supply our own +/- instead. */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover { color: var(--copper); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--copper);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
  content: "\2212";  /* minus sign */
}
.faq-item p {
  margin: 0;
  padding: 0 4px 22px;
  max-width: 66ch;
  color: var(--ink-soft);
  line-height: 1.65;
}
@media (max-width: 600px) {
  .faq-item summary { font-size: 1rem; padding: 18px 4px; }
}

/* Minimum tap target. No template had one; the header phone link measured
   19-26px against Apple's 44px minimum. On a trades site the phone number is
   the product -- a homeowner with water on the floor who mis-taps goes back to
   Google. Applied via padding so the visual size is unchanged on desktop. */
.nav-phone,
.btn,
.btn-primary,

/* Any phone number in the footer is a real tap target, not just text.
   Measured 2026-08-06 on the live site: the footer number rendered 19px tall
   against Apple's 44px minimum, so a thumb missed it. Every other phone link
   on the page is already a button; this one was a bare <a>. */
footer a[href^="tel:"],
/* The "Or call directly" number beside the estimate form is a bare <a> with no
   class, so every earlier tap-target rule missed it. Measured 38px on a 390px
   viewport 2026-08-08 -- the last phone link on the page and the one a visitor
   reaches for when they decide the form is too slow. */
.form-phone a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
}

/* WAVEMARK-NAV-GAP
   The header is transparent on purpose so the hero photo shows through it.
   But <main> began BELOW the header, so the band the header occupied showed the
   cream page background -- a white line across the top of every site.

   It measured 10px on Pro and 19px on Pro+AI because the two headers are
   different heights (80px vs 89px -- the button sets differ), which is exactly
   why it looked like the line "changed between plans". Reported by Sawyer,
   measured 2026-08-06.

   Two earlier attempts and why they were wrong:
     1. margin-top: -80px on the hero -- hardcoded, left a 9px line on Pro+AI.
     2. position:absolute on the header -- killed the gap but pulled the hero
        over the concept banner, hiding the "this is a preview, not your real
        site" warning. That banner is not decoration; it is the thing that keeps
        a demo from being mistaken for a live site.

   What works: leave the banner and header in normal flow, and let the HERO
   reach up under the header by exactly the header's own height, measured at
   runtime. No hardcoded number, no element leaves the flow. */
main > .hero:first-child {
  margin-top: calc(-1 * var(--wm-header-h, 0px));
  padding-top: var(--wm-header-h, 0px);
}

/* WAVEMARK-TAP-TARGETS
   Apple's minimum comfortable touch target is 44x44px. Measured on a real
   iPhone viewport 2026-08-06: the hamburger rendered 32px and the header phone
   number 38px. The phone number is the single most important thing to tap on a
   contractor's site, so a thumb missing it costs the client a call. */
.hamburger {
  min-width: 44px;
  min-height: 44px;
  /* No `display` here on purpose. This block sits after the
     `@media (min-width: 760px) { .hamburger { display: none } }` rule, so any
     display set here wins at every width and the mobile menu button appears
     on desktop next to the full nav. Fixed 2026-08-08. */
  align-items: center;
  justify-content: center;
}
.nav-phone,
.header-inner a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* header-legibility-scrim */
/* The hero photo varies per client, so the header cannot assume a dark image
   behind it. Without this, a bright hero (a beige kitchen) washed the nav links
   and the orange Request-estimate button out to near-invisible -- on the page's
   main call to action. A gradient rather than a solid bar: it protects the text
   without reading as a second navbar stacked on the hero. */
header:not(.scrolled)::before,
.site-header:not(.scrolled)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 190%;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(to bottom,
              rgba(0,0,0,.46) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,0) 100%);
}
header, .site-header { isolation: isolate; }

/* trade-identity applied */
/* Emergency-first. He is standing in water. */
.nav-links{margin-left:auto;margin-right:1.5rem}
.logo{flex-direction:column;align-items:flex-start;gap:0;line-height:.92}
.logo-mark{background:none;color:var(--copper);padding:0;font-size:1.05em;letter-spacing:-.02em}
.logo-word{font-size:.72em;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
:root{--radius:2px}


/* skin: voltage */
.hero h1, h2, h3 { text-transform: uppercase; letter-spacing: .06em; }