/* Rank & Rent Builder — Frontend Styles */
:root {
    --rr-primary: #1e40af;
    --rr-secondary: #1d4ed8;
    --rr-accent: #f59e0b;
    --rr-text: #111827;
    --rr-bg: #ffffff;
    --rr-btn: #1e40af;
    --rr-radius: 6px;
    --rr-font: system-ui, sans-serif;
    --rr-gray-50: #f9fafb;
    --rr-gray-100: #f3f4f6;
    --rr-gray-200: #e5e7eb;
    --rr-gray-600: #4b5563;
    --rr-gray-900: #111827;
    --rr-max-width: 1100px;
    --rr-section-pad: 60px 20px;
}

/* Base */
.rr-container { max-width: var(--rr-max-width); margin: 0 auto; padding: 0 20px; }
*, *::before, *::after { box-sizing: border-box; }

/* Call Bar */
.rr-call-bar {
    background: var(--rr-primary);
    color: #fff;
    padding: 8px 0;
    font-size: 14px;
    font-family: var(--rr-font);
}
.rr-call-bar .rr-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
}
.rr-call-bar-item { display: flex; align-items: center; gap: 4px; }
.rr-call-bar a { color: #fff; text-decoration: none; }
.rr-call-bar a:hover { text-decoration: underline; }

/* Buttons */
.rr-btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--rr-radius);
    font-family: var(--rr-font);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    text-align: center;
}
.rr-btn:hover { opacity: .9; transform: translateY(-1px); }
.rr-btn--primary { background: var(--rr-btn); color: #fff; }
.rr-btn--secondary { background: transparent; color: var(--rr-primary); border: 2px solid var(--rr-primary); }
.rr-btn--accent { background: var(--rr-accent); color: #111; }
.rr-btn--large { padding: 16px 32px; font-size: 17px; }
.rr-btn--sm { padding: 6px 14px; font-size: 13px; }

/* Hero */
.rr-hero {
    background: linear-gradient(135deg, var(--rr-primary) 0%, var(--rr-secondary) 100%);
    color: #fff;
    padding: 64px 20px;
    font-family: var(--rr-font);
}
.rr-hero .rr-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.rr-hero-h1 { font-size: clamp(28px, 4vw, 48px); font-weight: 800; margin: 0 0 16px; line-height: 1.15; }
.rr-hero-sub { font-size: 18px; margin: 0 0 28px; opacity: .9; }
.rr-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.rr-hero-form {
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    border-radius: calc(var(--rr-radius)*2);
    padding: 28px;
    border: 1px solid rgba(255,255,255,.25);
}
.rr-hero-form h3 { color: #fff; margin: 0 0 16px; font-size: 20px; }

/* Sections */
.rr-section { padding: var(--rr-section-pad); font-family: var(--rr-font); }
.rr-section--alt { background: var(--rr-gray-50); }
.rr-section--cta { background: var(--rr-primary); color: #fff; }
.rr-section--cta h2 { color: #fff; }
.rr-section h2 { font-size: clamp(22px, 3vw, 34px); margin-bottom: 24px; color: var(--rr-gray-900); }
.rr-prose p { font-size: 17px; line-height: 1.7; color: var(--rr-gray-600); max-width: 720px; }

/* Trust Badges */
.rr-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 20px 0;
}
.rr-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--rr-gray-200);
    border-radius: var(--rr-radius);
    padding: 10px 16px;
    font-family: var(--rr-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--rr-gray-900);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.rr-badge-icon { font-size: 18px; }

/* Services Grid */
.rr-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 16px;
}
.rr-service-card {
    background: #fff;
    border-radius: var(--rr-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: box-shadow .2s;
    font-family: var(--rr-font);
}
.rr-service-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.rr-service-card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.rr-service-card h3 { margin: 16px 16px 8px; font-size: 17px; }
.rr-service-card h3 a { color: var(--rr-primary); text-decoration: none; }
.rr-service-card p { margin: 0 16px 12px; font-size: 14px; color: var(--rr-gray-600); }
.rr-service-card .rr-btn { margin: 0 16px 16px; }

/* Features Grid */
.rr-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}
.rr-feature {
    background: #fff;
    border-radius: var(--rr-radius);
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    font-family: var(--rr-font);
}
.rr-feature h3 { font-size: 16px; margin: 0 0 8px; color: var(--rr-primary); }
.rr-feature p { font-size: 14px; color: var(--rr-gray-600); margin: 0; }

/* Reviews */
.rr-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.rr-review-card {
    background: #fff;
    border-radius: var(--rr-radius);
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    font-family: var(--rr-font);
}
.rr-review-stars { color: var(--rr-accent); font-size: 18px; margin-bottom: 10px; }
.rr-review-text { font-size: 15px; line-height: 1.65; color: var(--rr-gray-600); margin-bottom: 12px; font-style: italic; }
.rr-review-author { font-size: 13px; color: var(--rr-gray-600); }
.rr-review-author strong { color: var(--rr-gray-900); }
.rr-review-service, .rr-review-date { display: block; font-size: 12px; margin-top: 2px; }

/* FAQ */
.rr-faq-list { max-width: 800px; }
.rr-faq-item {
    border-bottom: 1px solid var(--rr-gray-200);
    font-family: var(--rr-font);
}
.rr-faq-question {
    padding: 16px 0;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    color: var(--rr-gray-900);
    position: relative;
    padding-right: 30px;
}
.rr-faq-question::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: var(--rr-primary);
    transition: transform .2s;
}
.rr-faq-item.open .rr-faq-question::after { transform: translateY(-50%) rotate(45deg); }
.rr-faq-answer {
    display: none;
    padding: 0 0 16px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--rr-gray-600);
}
.rr-faq-item.open .rr-faq-answer { display: block; }

/* Lead Form */
.rr-lead-form-wrap {
    background: #fff;
    border-radius: calc(var(--rr-radius)*2);
    padding: 28px;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    font-family: var(--rr-font);
}
.rr-form-row { margin-bottom: 14px; }
.rr-form-row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rr-form-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--rr-gray-900); }
.rr-form-field input,
.rr-form-field select,
.rr-form-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--rr-gray-200);
    border-radius: var(--rr-radius);
    font-size: 15px;
    font-family: var(--rr-font);
    color: var(--rr-gray-900);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
}
.rr-form-field input:focus,
.rr-form-field select:focus,
.rr-form-field textarea:focus {
    outline: none;
    border-color: var(--rr-primary);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, .15);
}
.rr-form-field textarea { resize: vertical; }
.rr-form-field--checkbox label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 400; }
.rr-form-field--checkbox input { width: auto; flex-shrink: 0; margin-top: 2px; }
.rr-required { color: #dc2626; }
.rr-form-submit { margin-top: 8px; }
.rr-form-submit .rr-btn { width: 100%; display: block; text-align: center; }
.rr-form-response { margin-top: 12px; padding: 12px 16px; border-radius: var(--rr-radius); font-size: 15px; }
.rr-form-response.success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.rr-form-response.error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* Locations */
.rr-locations-list, .rr-areas-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
    font-family: var(--rr-font);
}
.rr-locations-list li a,
.rr-areas-list li a {
    color: var(--rr-primary);
    text-decoration: none;
    font-size: 14px;
}
.rr-locations-list li a:hover,
.rr-areas-list li a:hover { text-decoration: underline; }

/* Lists */
.rr-list { padding-left: 20px; font-family: var(--rr-font); color: var(--rr-gray-600); }
.rr-list li { margin-bottom: 6px; font-size: 15px; line-height: 1.6; }

/* Final CTA */
.rr-final-cta { text-align: center; }
.rr-final-cta-title { font-size: clamp(24px, 3vw, 36px); margin-bottom: 20px; font-family: var(--rr-font); }
.rr-section--cta .rr-final-cta-title { color: #fff; }
.rr-final-cta-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.rr-final-cta .rr-lead-form-wrap { max-width: 560px; margin: 0 auto; }

/* Vendor Disclosure */
.rr-vendor-disclosure { background: var(--rr-gray-100); border-top: 1px solid var(--rr-gray-200); padding: 16px 20px; font-size: 12px; color: var(--rr-gray-600); font-family: var(--rr-font); }

/* Page hero image */
.rr-page-hero-img { width: 100%; max-height: 400px; object-fit: cover; border-radius: var(--rr-radius); margin-bottom: 20px; display: block; }

/* Service areas */
.rr-service-areas .rr-areas-list { margin-top: 12px; }

/* Phone link */
.rr-phone-link { color: var(--rr-primary); text-decoration: none; font-weight: 700; }
.rr-phone-link:hover { text-decoration: underline; }

/* Call button */
.rr-call-btn { display: inline-flex; align-items: center; gap: 6px; }

/* Responsive */
@media (max-width: 768px) {
    .rr-hero .rr-container { grid-template-columns: 1fr; }
    .rr-form-row--2col { grid-template-columns: 1fr; }
    .rr-hero-form { margin-top: 28px; }
    .rr-call-bar .rr-container { gap: 8px; font-size: 13px; }
    .rr-section { padding: 40px 16px; }
}

@media (max-width: 480px) {
    .rr-hero-cta { flex-direction: column; }
    .rr-btn--large { padding: 14px 20px; font-size: 16px; }
    .rr-services-grid { grid-template-columns: 1fr; }
    .rr-features-grid { grid-template-columns: 1fr; }
    .rr-reviews-grid { grid-template-columns: 1fr; }
}