/* Ridgeway Home Services — sample brand site
   Note: synthetic demo for Altiv.AI play testing (C17 Programmatic SEO).
   Deliberately templated and parity-heavy across all city pages — this is
   what FAILS post-2025 programmatic SEO compliance per the C17 teaching. */

:root {
  --ridgeway-orange:      #EA580C;
  --ridgeway-orange-dark: #C2410C;
  --ridgeway-orange-pale: #FFEDD5;
  --ridgeway-blue:        #1E3A8A;
  --rg-ink:               #111827;
  --rg-slate:             #4B5563;
  --rg-slate-light:       #9CA3AF;
  --rg-mist:              #E5E7EB;
  --rg-paper:             #F9FAFB;
  --rg-white:             #FFFFFF;

  --rg-font:         "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rg-font-display: "Roboto Slab", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--rg-font);
  color: var(--rg-ink);
  background: var(--rg-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ridgeway-orange); text-decoration: none; }
a:hover { text-decoration: underline; }

.rg-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ──── Topbar ──── */
.rg-topbar {
  background: var(--ridgeway-blue);
  color: white;
  padding: 8px 0;
  font-size: 13px;
}
.rg-topbar-inner { display: flex; justify-content: space-between; align-items: center; }
.rg-phone { font-weight: 700; font-size: 16px; color: white; }
.rg-phone:hover { color: white; text-decoration: none; }

/* ──── Header ──── */
.rg-header { background: white; border-bottom: 3px solid var(--ridgeway-orange); padding: 16px 0; }
.rg-header-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.rg-brand {
  font-family: var(--rg-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ridgeway-blue);
}
.rg-brand:hover { text-decoration: none; color: var(--ridgeway-blue); }
.rg-brand-mark {
  display: inline-block;
  background: var(--ridgeway-orange);
  color: white;
  width: 32px; height: 32px;
  border-radius: 4px;
  text-align: center;
  font-weight: 700;
  margin-right: 8px;
  line-height: 32px;
}
.rg-nav { display: flex; gap: 22px; }
.rg-nav a { color: var(--rg-ink); font-weight: 500; font-size: 14px; }
.rg-nav a:hover { color: var(--ridgeway-orange); text-decoration: none; }

/* ──── Hero ──── */
.rg-hero {
  background: linear-gradient(135deg, var(--ridgeway-orange) 0%, var(--ridgeway-orange-dark) 100%);
  color: white;
  padding: 60px 0;
  text-align: center;
}
.rg-hero h1 {
  font-family: var(--rg-font-display);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 14px;
}
.rg-hero p { font-size: 18px; max-width: 640px; margin: 0 auto 24px; opacity: 0.95; }
.rg-hero-cta {
  display: inline-block;
  background: white;
  color: var(--ridgeway-orange);
  font-weight: 700;
  font-size: 18px;
  padding: 14px 32px;
  border-radius: 6px;
}
.rg-hero-cta:hover { background: var(--ridgeway-orange-pale); text-decoration: none; }

/* ──── Stock photo placeholder ──── */
.rg-stock-photo {
  width: 100%;
  height: 280px;
  background:
    repeating-linear-gradient(45deg, #D1D5DB, #D1D5DB 12px, #E5E7EB 12px, #E5E7EB 24px);
  display: flex; align-items: center; justify-content: center;
  color: var(--rg-slate);
  font-style: italic;
  font-size: 14px;
  margin: 30px 0;
}

/* ──── Content sections ──── */
.rg-section { padding: 40px 0; }
.rg-section h2 {
  font-family: var(--rg-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--ridgeway-blue);
  margin-bottom: 16px;
}
.rg-section h3 {
  font-family: var(--rg-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ridgeway-blue);
  margin: 20px 0 10px;
}
.rg-section p { font-size: 16px; color: var(--rg-slate); margin-bottom: 14px; line-height: 1.7; }

.rg-pricing {
  background: var(--rg-paper);
  border-left: 4px solid var(--ridgeway-orange);
  padding: 20px 24px;
  margin: 24px 0;
  font-size: 17px;
}
.rg-pricing strong { color: var(--rg-ink); }

/* ──── FAQ block (identical across all city pages on purpose) ──── */
.rg-faq { border-top: 1px solid var(--rg-mist); padding-top: 20px; }
.rg-faq-item { padding: 16px 0; border-bottom: 1px solid var(--rg-mist); }
.rg-faq-q {
  font-weight: 700;
  color: var(--rg-ink);
  font-size: 16px;
  margin-bottom: 6px;
}
.rg-faq-a { color: var(--rg-slate); font-size: 15px; line-height: 1.65; }

/* ──── Why-choose-us (identical across all city pages on purpose) ──── */
.rg-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0; }
.rg-why-card {
  background: var(--rg-paper);
  border: 1px solid var(--rg-mist);
  border-radius: 6px;
  padding: 22px;
  text-align: center;
}
.rg-why-card h4 {
  color: var(--ridgeway-blue);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}
.rg-why-card p { color: var(--rg-slate); font-size: 14px; }

/* ──── CTA strip ──── */
.rg-cta-strip {
  background: var(--ridgeway-blue);
  color: white;
  padding: 30px 0;
  text-align: center;
  margin: 30px 0;
}
.rg-cta-strip h3 { font-family: var(--rg-font-display); font-size: 24px; margin-bottom: 8px; color: white; }
.rg-cta-strip p { font-size: 18px; }
.rg-cta-strip a { color: white; font-weight: 700; }

/* ──── Footer ──── */
.rg-footer {
  background: var(--rg-ink);
  color: var(--rg-slate-light);
  padding: 30px 0;
  text-align: center;
  font-size: 13px;
}
.rg-footer p { margin-bottom: 6px; }
.rg-footer-phone { color: white; font-weight: 700; font-size: 17px; }

/* ──── Responsive ──── */
@media (max-width: 720px) {
  .rg-hero h1 { font-size: 30px; }
  .rg-why { grid-template-columns: 1fr; }
  .rg-nav { display: none; }
}