/* 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); padding: var(--space-sm) 0; }
.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 with a full-bleed photo behind the content. The dark gradient is
   fixed opacity, not per-photo tuned, so any photo dropped in front of
   .hero__inner/.hero__grid text stays readable without a per-page override. */
.hero--photo { position: relative; overflow: hidden; }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero--photo::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(28, 31, 27, 0.72), rgba(28, 31, 27, 0.92));
}
.hero--photo .wrap { position: relative; z-index: 1; }
.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); }
.stat-row { display: grid; grid-template-columns: 1fr; gap: var(--space-md); padding-top: var(--space-2xs); }
.stat-row__item { display: flex; flex-direction: column; gap: var(--space-xs); }
.stat-row__label {
  font-family: 'JetBrains Mono', monospace; font-size: var(--text-2xs); letter-spacing: 0.1em; color: var(--gray-3);
}
.stat-row__value { font-size: var(--text-md); font-weight: 700; color: var(--bone); }

/* 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-1); 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-2); 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); display: inline-block; padding: var(--space-2xs) 0; }
.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-1); }
.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-1);
}
.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-1); 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-2); }
.estimator__spec-value { font-size: var(--text-base); font-weight: 600; }
.estimator__advisory { font-size: var(--text-2xs); color: var(--gray-1); line-height: 1.5; }
.estimator__status { font-size: var(--text-sm); color: var(--gray-1); }

/* Schedule form — the hero card that replaced the homepage estimator
   (2026-08-05, Daniel + advisors: a sale this size sells better with a
   person at the door than a self-serve price). Same card treatment as
   .estimator (same background, shadow, padding) since it fills the same
   slot in the hero grid. */
.schedule-form {
  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);
}
.schedule-form__title { font-size: var(--text-md); font-weight: 700; }
.schedule-form__lede { font-size: var(--text-sm); color: var(--gray-1); line-height: 1.5; }
.schedule-form__row { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.schedule-form__field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.schedule-form__label {
  font-family: 'JetBrains Mono', monospace; font-size: var(--text-2xs); letter-spacing: 0.1em; color: var(--gray-1);
}
.schedule-form__input, .schedule-form__textarea {
  font: inherit; font-size: var(--text-base); color: var(--basalt);
  border: 1px solid var(--line); background: var(--white);
  padding: var(--space-sm); min-height: var(--space-3xl);
}
.schedule-form__textarea { min-height: 88px; resize: vertical; }
.schedule-form__input:focus, .schedule-form__textarea:focus { outline: 2px solid var(--brass); outline-offset: -1px; }
.schedule-form__consent {
  display: flex; align-items: flex-start; gap: var(--space-xs);
  font-size: var(--text-sm); color: var(--gray-1); line-height: 1.5;
}
.schedule-form__consent input { accent-color: var(--brass); width: 24px; height: 24px; margin: 0; flex-shrink: 0; }
.schedule-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.schedule-form__status { font-size: var(--text-sm); }
.schedule-form__status--error { color: var(--rust); }
.schedule-form__status--ok { color: var(--basalt); font-weight: 700; }

@media (min-width: 640px) {
  .schedule-form__row { grid-template-columns: repeat(2, 1fr); }
}

/* 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); display: inline-block; padding: var(--space-xs) 0; }
.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); display: inline-block; padding: var(--space-xs) 0; }
.footer__legal { font-family: 'JetBrains Mono', monospace; font-size: var(--text-2xs); letter-spacing: 0.08em; color: var(--gray-3); }

@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); }
  .stat-row { grid-template-columns: repeat(3, 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); }
}