/* =========================================================================
   Woodlands Soft Wash — shared stylesheet
   No framework, no external fonts, no build step. System font stacks only,
   so there is zero webfont round-trip and the largest contentful element
   on every page is text that paints on first pass.
   ========================================================================= */

:root {
  /* Palette — warm ivory ground, deep pine ink, restrained bronze accent.
     No blue-link/coupon-red anywhere; this is the whole "not a template"
     signal before a single word is read. */
  --color-bg: #faf8f4;
  --color-bg-alt: #f1ece1;
  --color-surface: #ffffff;
  --color-ink: #201e1a;
  --color-ink-muted: #55524a;
  --color-primary: #23372a;
  --color-primary-dark: #152219;
  --color-primary-tint: #e8ede7;
  --color-accent: #96723f;
  --color-accent-tint: #f3ece0;
  --color-border: #ddd5c4;
  --color-focus: #1c63d6;

  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --max-width: 1140px;
  --radius: 3px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
}

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* room for the fixed mobile call bar */
  padding-bottom: 64px;
}
@media (min-width: 768px) { body { padding-bottom: 0; } }

img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; line-height: 1.2; color: var(--color-ink); margin: 0 0 var(--space-2); }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 var(--space-2); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--space-2); padding-left: 1.25rem; }
a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--color-primary-dark); }
strong { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  border-radius: var(--radius);
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

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

/* ---------- Buttons / CTAs ---------- */
.btn-call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--color-primary);
}
.btn-call:hover { background: var(--color-primary-dark); color: #fff; }
.btn-call-icon { font-size: 1.1em; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--color-primary);
  font-weight: 600;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-primary);
  text-decoration: none;
}
.btn-outline:hover { background: var(--color-primary-tint); color: var(--color-primary-dark); }

.btn-block { width: 100%; justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  text-decoration: none;
  color: var(--color-ink);
}
.brand-mark {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--color-primary);
}
.brand-sub {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--color-accent);
  font-weight: 600;
}
.site-nav { order: 3; flex-basis: 100%; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  font-size: 0.92rem;
}
.site-nav a { color: var(--color-ink-muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-primary); }
.header-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.sla-micro { font-size: 0.74rem; color: var(--color-ink-muted); margin: 0; max-width: 190px; text-align: right; }

@media (min-width: 900px) {
  .header-inner { flex-wrap: nowrap; }
  .site-nav { order: 2; flex-basis: auto; }
  .site-nav ul { margin-top: 0; }
  .header-cta { order: 3; }
}

/* ---------- Hero ---------- */
.hero {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-5) 0;
}
.hero-inner { max-width: 760px; }
.hero-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.hero-lede { font-size: 1.2rem; color: var(--color-ink-muted); max-width: 62ch; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.hero-sla {
  margin-top: var(--space-2);
  font-size: 0.95rem;
  color: var(--color-ink-muted);
}
.hero-sla strong { color: var(--color-ink); }

/* Deadline callout — plain, no countdown widget, no urgency gimmicks */
.deadline-note {
  margin-top: var(--space-3);
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-tint);
  padding: var(--space-2) var(--space-3);
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 62ch;
}
.deadline-note p { margin: 0; }

/* ---------- Sections ---------- */
.section { padding: var(--space-5) 0; }
.section-alt { background: var(--color-bg-alt); }
.section-header { max-width: 68ch; margin-bottom: var(--space-4); }
.section-header .kicker {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* Direct-answer block under question H2s, styled for AEO extraction and
   for a human skimming the page — same content serves both. */
.direct-answer {
  font-size: 1.08rem;
  color: var(--color-ink);
  max-width: 68ch;
  margin-bottom: var(--space-2);
}

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: var(--space-3); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.pillar-card { padding: var(--space-4); }
.pillar-card h3 { margin-bottom: 0.5rem; }
.pillar-card .pillar-tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
  margin-bottom: 0.6rem;
}

/* Surface-protection material block */
.material-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--color-surface);
  margin-bottom: var(--space-3);
}
.material-block h2 { margin-bottom: 0.35rem; }
.material-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: var(--space-2) 0;
  padding: var(--space-2);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  font-size: 0.92rem;
}
.material-meta dt { font-weight: 700; color: var(--color-primary); }
.material-meta dd { margin: 0 0 0.35rem; color: var(--color-ink-muted); }
.material-meta > div { min-width: 220px; }

.callout-strong {
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-tint);
  padding: var(--space-2) var(--space-3);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: var(--space-2) 0;
}

/* ---------- Placeholder media blocks (no stock photography) ---------- */
.media-placeholder {
  background: linear-gradient(135deg, var(--color-primary-tint) 0%, var(--color-bg-alt) 100%);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-ink-muted);
  font-size: 0.85rem;
  padding: var(--space-3);
  min-height: 200px;
}
.media-placeholder-tall { min-height: 320px; }

/* ---------- Pricing table ---------- */
.price-table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; }
.price-table caption { text-align: left; font-weight: 600; margin-bottom: 0.5rem; }
.price-table th, .price-table td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.price-table th { font-family: var(--font-serif); font-weight: 400; font-size: 1.05rem; background: var(--color-bg-alt); }
.price-table td.price { font-weight: 700; color: var(--color-primary); white-space: nowrap; }

.driver-list { list-style: none; padding: 0; margin: 0; }
.driver-list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.driver-list li:last-child { border-bottom: none; }
.driver-list h3 { margin-bottom: 0.25rem; font-size: 1.05rem; }

/* ---------- FAQ (native details/summary — zero JS) ---------- */
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-item:first-child { border-top: 1px solid var(--color-border); }
.faq-item summary {
  cursor: pointer;
  padding: var(--space-2) 0;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-size: 1.4rem;
  color: var(--color-accent);
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .faq-answer { padding: 0 0 var(--space-2); color: var(--color-ink-muted); max-width: 68ch; }

/* ---------- Villages / proof strip ---------- */
.villages-inline { font-weight: 600; color: var(--color-primary); }

.proof-strip {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
}
@media (min-width: 700px) {
  .proof-strip { grid-template-columns: repeat(3, 1fr); }
  .proof-strip-2 { grid-template-columns: repeat(2, 1fr); }
}
.proof-item .proof-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 0.25rem;
}
.proof-placeholder-note {
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  font-style: italic;
}

/* ---------- Vetted provider card ---------- */
.provider-card {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-4);
}
.provider-name { margin-bottom: 0.35rem; }
.provider-rating {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}
.provider-tags {
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

/* ---------- The Standard (numbered vetting bar) ---------- */
.standards-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-4);
}
.standards-list {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  counter-reset: standard;
}
.standards-list li {
  counter-increment: standard;
  position: relative;
  padding: 0.65rem 0 0.65rem 2.5rem;
  border-bottom: 1px solid var(--color-border);
}
.standards-list li:last-child { border-bottom: none; }
.standards-list li::before {
  content: counter(standard);
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- FTC material-connection disclosure ---------- */
.disclosure-note {
  font-size: 0.88rem;
  color: var(--color-ink-muted);
  max-width: 60ch;
  margin-top: var(--space-2);
}
.footer-disclosure {
  color: #eef0ec;
  font-weight: 600;
  font-size: 0.92rem;
  margin-top: var(--space-2);
  max-width: 42ch;
}
.footer-disclosure a { color: #fff; }

/* ---------- Forms ---------- */
.lead-form { max-width: 640px; }
.form-row { margin-bottom: var(--space-2); }
.form-row label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}
.form-row .hint { font-weight: 400; color: var(--color-ink-muted); font-size: 0.85rem; }
.form-row input[type="text"],
.form-row input[type="tel"],
.form-row input[type="email"],
.form-row select,
.form-row textarea,
.form-row input[type="file"] {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-ink);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--color-primary); }
.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 500px) { .checkbox-grid { grid-template-columns: 1fr 1fr; } }
.checkbox-item { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.checkbox-item input { width: 1.1rem; height: 1.1rem; }
fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-2); }
legend { font-weight: 600; padding: 0 0.4rem; }
.form-note { font-size: 0.85rem; color: var(--color-ink-muted); margin-top: var(--space-2); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-primary-dark);
  color: #eef0ec;
  margin-top: var(--space-5);
}
.footer-inner {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5) 0 var(--space-4);
}
@media (min-width: 800px) {
  .footer-inner { grid-template-columns: 1.3fr 2fr; }
}
.site-footer .brand-mark, .site-footer .brand { color: #fff; }
.site-footer p { color: #cfd4c9; }
.footer-sla { font-weight: 600; color: #fff; }
.footer-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 500px) { .footer-nav { grid-template-columns: repeat(3, 1fr); } }
.footer-nav h2 { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-sans); color: #b9c0af; margin-bottom: 0.6rem; }
.footer-nav ul { list-style: none; padding: 0; margin: 0; }
.footer-nav a { color: #eef0ec; text-decoration: none; font-size: 0.92rem; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
.villages-list { columns: 2; font-size: 0.88rem; }
.footer-legal {
  border-top: 1px solid #2c3f30;
  padding: var(--space-2) 0 var(--space-4);
  font-size: 0.8rem;
  color: #9aa392;
}
.footer-legal a { color: #b9c0af; }

/* ---------- Sticky mobile call bar ---------- */
.mobile-call-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--color-primary);
  border-top: 1px solid var(--color-primary-dark);
  z-index: 200;
}
.mobile-call-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 0.9rem 1rem;
  font-size: 1rem;
}
@media (min-width: 768px) {
  .mobile-call-bar { display: none; }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: 0.85rem; color: var(--color-ink-muted); padding: var(--space-2) 0 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0; margin: 0; }
.breadcrumbs a { color: var(--color-ink-muted); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.35rem; color: var(--color-border); }

/* ---------- Utility ---------- */
.text-muted { color: var(--color-ink-muted); }
.mt-0 { margin-top: 0; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.small { font-size: 0.85rem; }

/* =========================================================================
   Compatibility layer — /pages/ material & symptom sub-pages
   Those pages use a simpler div-based structure (no .container wrapper,
   no <details>/<summary> FAQ) built to the same class vocabulary as the
   core pages' equivalents. Rules below give them the same visual language
   from the one shared stylesheet without requiring markup changes.
   NOTE for whoever owns /pages/*.html: wrap each page's <main> content in
   a <div class="container"> to get the same max-width/gutter as the core
   pages — right now those pages render edge-to-edge on wide viewports.
   ========================================================================= */
main {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
main > .container { padding-left: 0; padding-right: 0; }
/* Full-bleed sections on the core pages intentionally cancel the main
   gutter so their background bands still reach the viewport edge. */
main > .hero, main > .section, main > .breadcrumbs {
  margin-left: calc(var(--space-3) * -1);
  margin-right: calc(var(--space-3) * -1);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
@media (min-width: 480px) {
  main { padding-left: var(--space-4); padding-right: var(--space-4); }
  main > .hero, main > .section, main > .breadcrumbs {
    margin-left: calc(var(--space-4) * -1);
    margin-right: calc(var(--space-4) * -1);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}
main:not(:has(.container)) { max-width: var(--max-width); margin-left: auto; margin-right: auto; }

.breadcrumb {
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  padding: var(--space-2) 0 0;
}
.breadcrumb a { color: var(--color-ink-muted); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin-left: 0.35rem; }
.breadcrumb span::before { content: "/ "; color: var(--color-border); }

.cta-banner {
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-tint);
  padding: var(--space-3);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: var(--space-3) 0;
}
.cta-banner p:first-child { margin-top: 0; }
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  margin: 0.5rem 0;
}
.cta-button:hover { background: var(--color-primary-dark); color: #fff; }
.sla { font-size: 0.85rem; color: var(--color-ink-muted); margin: 0.35rem 0 0; }
.cta-banner .sla { color: var(--color-ink); font-weight: 600; }

/* Scoped to pages with no .container anywhere (the /pages/ sub-pages),
   so this never touches the core pages' own .hero/.section spacing. */
main:not(:has(.container)) > section { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
main:not(:has(.container)) > section:last-of-type { border-bottom: none; }
main > section > h2:first-child,
main > section > h1:first-child { margin-top: 0; }

.faq .faq-item {
  border: none;
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2) 0;
}
.faq .faq-item:first-child { border-top: 1px solid var(--color-border); }
.faq .faq-item h3 { margin-bottom: 0.35rem; }
.faq .faq-item p { color: var(--color-ink-muted); max-width: 68ch; }

.internal-links { background: var(--color-bg-alt); border-radius: var(--radius); padding: var(--space-3); }
.internal-links ul { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.internal-links a { text-decoration: none; }
.internal-links a:hover { text-decoration: underline; }

footer { background: var(--color-primary-dark); color: #cfd4c9; }
footer:not(.site-footer) { padding: var(--space-3) 0; text-align: center; font-size: 0.85rem; }
footer:not(.site-footer) a { color: #eef0ec; }