/* ── Service-area landing pages ────────────────────
   Shared by the eight /trash-bin-cleaning-<city>-fl pages. Everything
   structural — .page-hero, .section, .price-card, .cta-banner--finale,
   .flow-divider — comes from global.css; this file only adds the few pieces
   that exist nowhere else. Keep it that way: a rule that earns a second use
   belongs in global.css. */

/* ── Body copy ────────────────────────────────────── */

.area-prose p {
  font-size: var(--font-size-lg);
  line-height: 1.75;
  color: var(--color-text-light);
}

.area-prose p + p {
  margin-top: var(--space-lg);
}

.area-prose__note {
  margin-top: var(--space-xl);
  text-align: center;
  color: var(--color-text-light);
}

/* ── The three-step visit ─────────────────────────── */

.area-steps {
  list-style: none;
  counter-reset: area-step;
  margin-top: var(--space-2xl);
  display: grid;
  gap: var(--space-lg);
}

.area-steps li {
  counter-increment: area-step;
  position: relative;
  padding: var(--space-lg) var(--space-lg) var(--space-lg) calc(var(--space-2xl) + var(--space-md));
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
  color: var(--color-text-light);
  line-height: 1.7;
}

.area-steps li::before {
  content: counter(area-step);
  position: absolute;
  left: var(--space-lg);
  top: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #FFFFFF;
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.area-steps strong {
  color: var(--color-text);
}

/* ── City-specific questions ──────────────────────── */

.area-faqs {
  display: grid;
  gap: var(--space-lg);
}

.area-faq {
  padding: var(--space-xl);
  background: var(--color-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
}

.area-faq__question {
  font-size: var(--font-size-lg);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.area-faq__answer {
  color: var(--color-text-light);
  line-height: 1.7;
}

/* ── Real Google review, where we have one for the city ──
   Only Delray Beach carries one today (Stephen Barbuto). The quote is
   reproduced verbatim per resources/research/bcp-reviews.md — never restyle it
   in a way that tempts anyone to reword it to fit. */

.area-quote {
  padding: var(--space-2xl);
  background: var(--color-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-depth-1);
}

.area-quote .star-rating {
  font-size: 1.15rem;
  margin-bottom: var(--space-md);
}

.area-quote__text {
  font-size: var(--font-size-lg);
  line-height: 1.75;
  font-style: italic;
  color: var(--color-text);
  margin-bottom: var(--space-xl);
}

.area-quote__by {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.area-quote__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #FFFFFF;
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.area-quote__name {
  display: block;
  font-weight: 700;
  color: var(--color-text-heading);
}

.area-quote__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
}

.area-quote__tag:hover { text-decoration: underline; }

.area-quote__tag svg {
  width: 0.85em;
  height: 0.85em;
}

@media (max-width: 768px) {
  .area-prose p { font-size: var(--font-size-base); }
  .area-faq { padding: var(--space-lg); }
  .area-quote { padding: var(--space-lg); }
}