/* ==========================================================================
   Falcon Plumbing — homepage design preview v1
   "Heritage trade classic": porcelain ground, deep charcoal, burnished
   copper, serif display (Fraunces), centered editorial rhythm, double rules.
   Contrast, measured:
     char #21201C on porcelain #FAF6F2 .... ~14.9:1  body on light
     umber #5C554A on porcelain ........... ~6.6:1   secondary on light
     copper-ink #8C4A18 on porcelain ...... ~5.6:1   accent text on light
     porcelain on char .................... ~14.9:1  body on dark
     sand #CBC2B4 on char ................. ~9.0:1   secondary on dark
     copper #C87B3D on char ............... ~5.0:1   accent text on dark
     char on copper #C87B3D ............... ~5.0:1   button pair
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --char: #21201c;
  --char-2: #2c2a25;
  --porcelain: #faf6f2;
  --porcelain-2: #f1e9e0;
  --copper: #c87b3d;
  --copper-ink: #8c4a18;
  --umber: #5c554a;
  --sand: #cbc2b4;
  --line: rgba(33, 32, 28, 0.16);
  --line-dark: rgba(250, 246, 242, 0.18);
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shell: clamp(1.1rem, 5vw, 4rem);
  --maxw: 1140px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--porcelain); color: var(--char);
  font-family: var(--body); font-size: 16.5px; line-height: 1.65;
}
img, svg { max-width: 100%; }
a { color: inherit; }
p { margin: 0; }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 99; background: var(--char); color: var(--porcelain); padding: 0.7rem 1rem; }
.skip-link:focus { left: 0; }
.shell { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--shell); }
.shell-narrow { max-width: 780px; }

h1, h2 { margin: 0; font-family: var(--display); font-weight: 620; line-height: 1.02; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.7rem, 7vw, 5rem); }
h1 em, h2 em { font-style: italic; color: var(--copper-ink); }
.band-dark h1 em, .band-dark h2 em { color: var(--copper); }
h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); margin-bottom: 1.1rem; }
h3 { margin: 0 0 0.5rem; font-family: var(--display); font-weight: 600; font-size: 1.25rem; }

.kicker {
  margin-bottom: 1rem; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper-ink);
}
.band-dark .kicker { color: var(--copper); }
.lede { max-width: 60ch; color: var(--umber); font-size: clamp(1rem, 1.5vw, 1.14rem); }
h1 + .lede, h2 + .lede { margin-top: 1rem; }

/* utility + nav */
.utility {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.45rem var(--shell); background: var(--char); color: var(--sand);
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em;
}
.utility a { color: var(--copper); text-decoration: none; font-weight: 800; }
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.75rem var(--shell);
  background: rgba(250, 246, 242, 0.96); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.brand svg { width: 30px; color: var(--copper-ink); }
.brand span { font-family: var(--display); font-weight: 650; font-size: 1.3rem; }
.brand em { font-style: italic; color: var(--copper-ink); margin-left: 0.25rem; }
.nav nav { display: none; gap: 1.3rem; margin-left: auto; }
.nav nav a { text-decoration: none; font-weight: 600; font-size: 0.92rem; color: var(--umber); padding-block: 0.6rem; }
.nav nav a:hover { color: var(--char); }
.btn-nav { margin-left: auto; }
@media (min-width: 960px) { .nav nav { display: flex; } .btn-nav { margin-left: 0; } }

/* buttons */
.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; justify-content: inherit; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0.75rem 1.6rem;
  font-weight: 800; font-size: 0.98rem; letter-spacing: 0.02em;
  text-decoration: none; border: 2px solid transparent; border-radius: 3px;
}
.btn-copper { background: var(--copper); color: var(--char); }
.btn-copper:hover { filter: brightness(1.07); }
.btn-dark { background: var(--char); color: var(--porcelain); }
.btn-dark:hover { background: var(--char-2); }
.btn-line { border-color: var(--line); color: var(--char); background: #fff; }
.btn-line:hover { border-color: var(--char); }

/* hero */
.hero { padding-block: clamp(3.6rem, 9vw, 7rem) 0; text-align: center; }
.hero .shell { display: flex; flex-direction: column; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.4rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--copper-ink);
}
.badge span { color: var(--copper); font-size: 0.7rem; }
.hero .lede { margin-top: 1.3rem; }
.hero-note { margin-top: 1.5rem; font-size: 0.88rem; color: var(--umber); }
.rule-double {
  margin-top: clamp(2.6rem, 6vw, 4.4rem); height: 9px;
  border-top: 2px solid var(--char); border-bottom: 4px solid var(--copper);
}

/* bands */
.band { padding-block: clamp(3.4rem, 8vw, 6rem); }
.band-dark { background: var(--char); color: var(--porcelain); }
.band-dark .lede { color: var(--sand); }
.band-tint { background: var(--porcelain-2); border-block: 1px solid var(--line); }

/* why */
.why-grid { display: grid; gap: 1.6rem; margin-top: 2.4rem; }
@media (min-width: 820px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why-grid article { padding-top: 1.2rem; border-top: 3px solid var(--copper); }
.why-grid p { color: var(--umber); font-size: 0.97rem; }

/* services */
.svc-list { margin: 2.4rem 0 0; padding: 0; list-style: none; counter-reset: svc; display: grid; gap: 0; }
@media (min-width: 820px) { .svc-list { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.svc-list li {
  counter-increment: svc; position: relative;
  padding: 1.4rem 0 1.4rem 4rem; border-top: 1px solid var(--line-dark);
}
.svc-list li::before {
  content: "0" counter(svc); position: absolute; left: 0; top: 1.35rem;
  font-family: var(--display); font-weight: 600; font-size: 1.6rem; color: var(--copper);
}
.svc-list p { color: var(--sand); font-size: 0.96rem; }

/* water heaters */
.split { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 920px) { .split { grid-template-columns: 1.05fr 0.95fr; } }
.wh-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border: 1px solid var(--line); background: #fff; border-radius: 4px; }
.wh-list li {
  position: relative; padding: 0.95rem 1.2rem 0.95rem 2.7rem; font-weight: 600;
  border-top: 1px solid var(--line); color: var(--char);
}
.wh-list li:first-child { border-top: 0; }
.wh-list li::before {
  content: ""; position: absolute; left: 1.1rem; top: 50%; translate: 0 -50%;
  width: 9px; height: 9px; border-radius: 50%; background: var(--copper);
}

/* about */
.about-grid { display: grid; gap: 2.2rem; align-items: center; }
@media (min-width: 880px) { .about-grid { grid-template-columns: 240px 1fr; } }
.gen-badge {
  width: 210px; height: 210px; margin-inline: auto; border-radius: 50%;
  border: 3px solid var(--char); outline: 3px solid var(--copper); outline-offset: 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
  background: #fff; text-align: center;
}
.gen-num { font-family: var(--display); font-weight: 700; font-size: 5rem; line-height: 1; color: var(--copper-ink); }
.gen-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--char); }

/* faq */
#faq details { border-bottom: 1px solid var(--line); }
#faq details:first-of-type { margin-top: 2rem; border-top: 1px solid var(--line); }
#faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.05rem 0.2rem; min-height: 44px; font-weight: 700;
}
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after { content: "+"; font-family: var(--display); font-size: 1.5rem; color: var(--copper-ink); }
#faq details[open] summary::after { content: "–"; }
#faq details p { padding: 0 0.2rem 1.2rem; color: var(--umber); max-width: 64ch; }

/* contact */
.contact-wrap { text-align: center; display: flex; flex-direction: column; align-items: center; }
.contact-phone {
  margin-top: 1.6rem; font-family: var(--display); font-weight: 650;
  font-size: clamp(2.2rem, 6vw, 3.6rem); color: var(--copper); text-decoration: none; line-height: 1.05;
}
.contact-line { margin-top: 0.9rem; }
.contact-line a { color: var(--porcelain); font-weight: 600; }
.contact-sub { margin-top: 0.9rem; color: var(--sand); font-size: 0.92rem; }

/* footer */
.footer { background: var(--char); color: var(--sand); border-top: 1px solid var(--line-dark); padding-block: 1.6rem; }
.foot-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.foot-brand { font-family: var(--display); font-weight: 650; font-size: 1.2rem; color: var(--porcelain); }
.foot-brand em { font-style: italic; color: var(--copper); margin-left: 0.25rem; }
.foot-copy { font-size: 0.85rem; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .utility, .nav, .btn { display: none; } body, .band-dark, .footer { background: #fff; color: #000; } }