/* Fallbrook Septic — shared styles */
* { box-sizing: border-box; }
body { margin: 0; background: #F3EEE3; font-family: 'Barlow', sans-serif; color: #221F1A; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* hover affordances (restored from the interactive build) */
.svc-card { transition: box-shadow .08s ease; }
.svc-card:hover { box-shadow: 5px 5px 0 #221F1A !important; }
.navlink:hover { color: #C8551F; }

/* Services dropdown — pure CSS, no JS */
.svc-dd { position: relative; }
.svc-dd-menu { display: none; position: absolute; top: 100%; left: -14px; padding-top: 12px; min-width: 256px; z-index: 70; }
.svc-dd:hover .svc-dd-menu, .svc-dd:focus-within .svc-dd-menu { display: block; }
.svc-dd-link:hover { background: #ECE7DA; }

@media (max-width: 768px) {
  .r-header { padding: 12px 16px !important; }
  .r-logo { font-size: 15px !important; max-width: 170px !important; line-height: 1.05 !important; }
  .r-navcall { padding: 9px 12px !important; font-size: 13px !important; gap: 6px !important; }
  .r-navlink { display: none !important; }
  .r-hero, .r-hero-home, .r-area, .r-quote, .r-cta, .r-footer, .r-pair,
  .r-article, .r-chips, .r-form, .r-services { grid-template-columns: 1fr !important; }
  .r-hero { padding: 34px 20px 40px !important; gap: 26px !important; }
  .r-hero h1 { font-size: 34px !important; }
  .r-hero-home h1 { font-size: 38px !important; line-height: 1.0 !important; }
  .r-quote, .r-area { gap: 28px !important; }
  .r-cta, .r-footer { gap: 24px !important; }
  .r-article { gap: 12px !important; padding: 32px 0 !important; }
}
@media (max-width: 480px) {
  .r-hero h1 { font-size: 30px !important; }
  .r-hero-home h1 { font-size: 32px !important; }
}