/* Component library. Every value here is a var() from tokens.css — no
   hardcoded colors, font-sizes, or one-off spacing. Pages compose these
   classes; they do not write their own style="..." or new CSS. See
   ../../DESIGN_SYSTEM.md for the catalog and the rule for adding to it. */

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

/* Stack — a vertical flex layout with standard gap, for any section body
   that's a heading block followed by content. */
.stack { display: flex; flex-direction: column; gap: var(--space-2xl); }

/* Header */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(244, 241, 234, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__row {
  padding: var(--space-md) 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm); flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: var(--space-sm); }
.brand__name { font-size: var(--text-md); font-weight: 800; letter-spacing: -0.01em; }
.header__actions { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md); min-height: var(--space-3xl);
  font-family: 'JetBrains Mono', monospace; font-size: var(--text-sm); letter-spacing: 0.06em;
  border: 1px solid var(--basalt); background: transparent; color: var(--basalt);
}
.btn--solid { background: var(--basalt); color: var(--bone); }
.btn--brass { background: var(--brass); color: var(--basalt); border-color: var(--brass); }
.btn--outline-light { border-color: var(--gray-4); color: var(--bone); }

/* Badge — a small label, e.g. a tier or status tag. No pill shape, matches
   the brand's sharp-edged, unrounded aesthetic. */
.badge {
  display: inline-block; font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--brass);
}

/* Hero */
.hero { background: var(--basalt); color: var(--bone); padding: var(--space-section) 0; }
.hero__inner { display: flex; flex-direction: column; gap: var(--space-xl); max-width: 720px; }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: start; }
.hero__eyebrow { font-size: var(--text-xs); letter-spacing: 0.14em; color: var(--brass); }
.hero__title { font-size: var(--text-hero); font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; }
.hero__lede { font-size: var(--text-lede); line-height: 1.55; color: var(--gray-4); }
.hero__actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; padding-top: var(--space-2xs); }

/* Section — the vertical rhythm unit every page is built from */
.section { padding: var(--space-section) 0; }
.section--stone { background: var(--stone); border-bottom: 1px solid var(--line); }
.section--dark { background: var(--basalt); color: var(--bone); }
.section--brass { background: var(--brass); color: var(--basalt); }
.section--border { border-bottom: 1px solid var(--line); }
.section__eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: var(--text-xs); letter-spacing: 0.14em;
  color: var(--gray-3); margin-bottom: var(--space-sm);
}
.section--dark .section__eyebrow, .section--brass .section__eyebrow { color: inherit; opacity: 0.7; }
.section__title { font-size: var(--text-heading); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.section__intro { font-size: var(--text-base); line-height: 1.6; color: var(--gray-1); max-width: 720px; margin-top: var(--space-md); }

/* CTA banner — a full-width prompt-to-contact band, for the close of any
   page (home, service pages, city pages, blog posts). */
.cta-banner__inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-2xl); flex-wrap: wrap;
}
.cta-banner__title { font-size: var(--text-heading); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.cta-banner__lede { font-size: var(--text-md); line-height: 1.5; max-width: 480px; }
.cta-banner__actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; }

/* Feature grid — small heading + body pairs, 1 col mobile up to 4 desktop */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
.feature__title { font-size: var(--text-md); font-weight: 700; margin-bottom: var(--space-2xs); }
.feature__body { font-size: var(--text-base); line-height: 1.5; color: var(--gray-1); }

/* Area grid — the service-area card pattern, reused by any location list */
.area-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
.area-card { background: var(--white); padding: var(--space-md); }
.area-card__name { font-size: var(--text-base); font-weight: 700; }
.area-card__note { font-size: var(--text-2xs); color: var(--gray-2); }

/* Card — a bordered content box (quotes, callouts, FAQ answers) */
.card { background: var(--white); box-shadow: var(--shadow-hairline); padding: var(--space-lg); }
.card + .card { margin-top: var(--space-md); }
.card__label {
  font-family: 'JetBrains Mono', monospace; font-size: var(--text-2xs); letter-spacing: 0.12em;
  color: var(--gray-3); margin-bottom: var(--space-xs);
}

/* Breadcrumb — small link trail, top of hero on any non-home page */
.breadcrumb {
  font-family: 'JetBrains Mono', monospace; font-size: var(--text-2xs); letter-spacing: 0.1em;
  color: var(--gray-3); display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-2xl);
}
.breadcrumb a { color: var(--gray-3); }
.breadcrumb .breadcrumb__current { color: var(--brass); }

/* Price grid — tier price tiles, reused wherever the published per-sqft
   ranges are shown (home page, city pages, service pages) */
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
.price-card { background: var(--white); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); }
.price-card__name { font-size: var(--text-base); font-weight: 600; }
.price-card__value { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; }
.price-card__unit { font-size: var(--text-sm); font-weight: 500; color: var(--gray-2); }

/* FAQ — question/answer pairs, reused on every commercial page per the
   build plan's SEO section. */
.faq-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); }
.faq-item {
  background: var(--bone); padding: var(--space-lg) 0;
  display: grid; grid-template-columns: 1fr; gap: var(--space-sm);
}
.faq-item__q { font-size: var(--text-md); font-weight: 700; }
.faq-item__a { font-size: var(--text-base); line-height: 1.6; color: var(--gray-1); }

/* Prose — long-form content: legal pages, blog posts, guides */
.prose { max-width: 680px; display: flex; flex-direction: column; gap: var(--space-xl); }
.prose h1 { font-size: var(--text-heading); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.prose h2 { font-size: var(--text-md); font-weight: 700; margin-bottom: var(--space-xs); }
.prose p, .prose li { font-size: var(--text-base); line-height: 1.65; color: var(--gray-1); }
.prose ul { padding-left: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); }
.prose ul + p { margin-top: var(--space-md); }
.prose .fine-print { font-size: var(--text-sm); color: var(--gray-2); }
.prose .quote { font-style: italic; }

/* Estimator — the interactive price tool. Toggle/tier buttons reuse .btn
   and .btn--solid for the selected state via JS class swap, rather than a
   new modifier — one button style, not two. */
.estimator {
  background: var(--bone); color: var(--basalt);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5);
  padding: var(--space-xl);
  display: flex; flex-direction: column; gap: var(--space-lg);
}
.estimator__field { display: flex; flex-direction: column; gap: var(--space-xs); }
.estimator__field-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'JetBrains Mono', monospace; font-size: var(--text-2xs); letter-spacing: 0.1em; color: var(--gray-2);
}
.estimator__field-value { font-size: var(--text-md); font-weight: 700; color: var(--basalt); }
.estimator__sliders { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.estimator__tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); }
.estimator__toggles { display: flex; gap: var(--space-xs); }
.estimator__result { border-top: 1px solid var(--line); padding-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.estimator__price-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-md); flex-wrap: wrap; }
.estimator__price { font-size: var(--text-heading); font-weight: 800; letter-spacing: -0.02em; }
.estimator__sqft { font-size: var(--text-sm); color: var(--gray-2); text-align: right; }
.estimator__spec-grid {
  background: var(--white); box-shadow: var(--shadow-hairline); padding: var(--space-md);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm);
}
.estimator__spec-label { font-family: 'JetBrains Mono', monospace; font-size: var(--text-2xs); letter-spacing: 0.08em; color: var(--gray-3); }
.estimator__spec-value { font-size: var(--text-base); font-weight: 600; }
.estimator__advisory { font-size: var(--text-2xs); color: var(--gray-2); line-height: 1.5; }
.estimator__status { font-size: var(--text-sm); color: var(--gray-2); }

/* Footer */
.footer { background: var(--basalt); color: var(--gray-3); padding: var(--space-2xl) 0 var(--space-xl); }
.footer__inner { display: flex; flex-direction: column; gap: var(--space-lg); }
.footer__contact { font-size: var(--text-base); line-height: 1.7; color: var(--gray-4); }
.footer__contact a { color: var(--gray-4); }
.footer__links {
  font-family: 'JetBrains Mono', monospace; font-size: var(--text-xs); letter-spacing: 0.06em;
  display: flex; gap: var(--space-md); flex-wrap: wrap;
}
.footer__links a { color: var(--gray-3); }
.footer__legal { font-family: 'JetBrains Mono', monospace; font-size: var(--text-2xs); letter-spacing: 0.08em; color: var(--gray-1); }

@media (min-width: 640px) {
  .area-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl) var(--space-2xl); }
  .faq-item { grid-template-columns: minmax(0, 280px) 1fr; gap: var(--space-2xl); }
  .estimator__sliders { grid-template-columns: repeat(3, 1fr); }
  .estimator__spec-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
  .area-grid { grid-template-columns: repeat(5, 1fr); }
}