/* ==========================================================================
   RankWarden 2.0 — Base Stylesheet
   Mobile-first, vanilla CSS, no frameworks.
   Color discipline: ORANGE (#E8520A) appears ONLY on CTA buttons.
   ========================================================================== */

:root {
    --blue: #0B3D6B;
    --green: #0D7A4E;
    --cta: #E8520A;
    --cta-dark: #c9450a;
    --ink: #1a2532;
    --muted: #5a6b7b;
    --line: #e2e8ee;
    --bg-alt: #f5f8fb;
    --white: #ffffff;
    --maxw: 1140px;
    --radius: 8px;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    line-height: 1.65;
    font-size: 17px;
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    padding-bottom: 64px; /* room for sticky mobile bar */
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

h1, h2, h3, h4 { line-height: 1.2; color: var(--ink); }
h2.section-title { font-size: 1.9rem; margin-bottom: 1.2rem; text-align: center; }
p { margin-bottom: 1rem; }
a { color: var(--blue); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 1.05rem;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: background 0.15s ease;
}
.btn-cta { background: var(--cta); color: var(--white); }
.btn-cta:hover { background: var(--cta-dark); color: var(--white); }
.btn-block { width: 100%; display: block; }

/* ---------- Header ---------- */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 20px; gap: 10px; }
.logo { font-weight: 800; font-size: 1.25rem; color: var(--blue); }
.main-nav { display: flex; gap: 22px; align-items: center; }
.main-nav a { color: var(--ink); font-weight: 600; }
.main-nav a:hover { color: var(--green); }
.header-phone { font-weight: 800; color: var(--green); font-size: 1.1rem; }

/* Services dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { cursor: pointer; }
.nav-dropdown-menu {
    display: none; position: absolute; top: 100%; left: 0;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(0,0,0,0.10); min-width: 240px; padding: 8px 0; z-index: 60;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a { display: block; padding: 10px 18px; font-weight: 600; white-space: nowrap; }
.nav-dropdown-menu a:hover { background: var(--bg-alt); color: var(--green); }

/* ---------- Hero ---------- */
.hero, .service-hero {
    background-size: cover;
    background-position: center;
    color: var(--white);
    text-align: center;
    padding: 90px 0;
}
.hero-inner { max-width: 760px; margin: 0 auto; }
.hero-h1, .service-hero h1 { font-size: 2.6rem; color: var(--white); margin-bottom: 1rem; }
.hero-sub { font-size: 1.25rem; color: rgba(255,255,255,0.92); margin-bottom: 1.5rem; }
.hero-phone {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 1.2rem;
    letter-spacing: 0.5px;
}
.hero-phone:hover { color: var(--white); }

/* ---------- Sections ---------- */
section { padding: 56px 0; }
.intro, .page-body, .service-body { background: var(--white); }
.process, .testimonials { background: var(--bg-alt); }
.intro-phone { font-size: 1.2rem; font-weight: 700; margin-top: 1rem; }
.intro-phone a { color: var(--green); }

/* ---------- Services grid ---------- */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.service-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.service-card img { width: 100%; height: 190px; object-fit: cover; }
.service-card-body { padding: 20px; }
.service-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.service-card h3 a { color: var(--ink); }
.learn-more { color: var(--cta); font-weight: 700; display: inline-block; margin-top: 10px; }

/* ---------- Contact form ---------- */
.contact-form-section { background: var(--blue); color: var(--white); }
.contact-form-section .section-title { color: var(--white); }
.quote-form { max-width: 640px; margin: 0 auto; }
.form-row { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 180px; }
.quote-form input, .quote-form select, .quote-form textarea {
    width: 100%; padding: 13px 14px; border: none; border-radius: var(--radius);
    font-size: 1rem; font-family: inherit; margin-bottom: 14px;
}
.quote-form textarea { resize: vertical; }

/* ---------- Process ---------- */
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.process-step { background: var(--white); border-radius: var(--radius); padding: 26px 22px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.process-icon { font-size: 2.4rem; margin-bottom: 10px; }
.process-step h3 { font-size: 1.15rem; margin-bottom: 8px; color: var(--blue); }
.process-step p { color: var(--muted); font-size: 0.97rem; }

/* ---------- Testimonials ---------- */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.testimonial { background: var(--white); border-left: 4px solid var(--green); border-radius: var(--radius); padding: 24px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.testimonial p { font-style: italic; }
.testimonial cite { font-style: normal; font-weight: 700; color: var(--blue); }

/* ---------- Final CTA ---------- */
.final-cta { background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%); color: var(--white); text-align: center; }
.final-cta h2 { color: var(--white); font-size: 2rem; margin-bottom: 8px; }
.final-cta p { color: rgba(255,255,255,0.9); margin-bottom: 1.2rem; }
.final-cta-phone { display: block; font-size: 2rem; font-weight: 800; color: var(--white); margin-bottom: 1rem; }
.final-cta-phone:hover { color: var(--white); }

/* ---------- Feature list ---------- */
.feature-list { list-style: none; max-width: 640px; margin: 1rem 0; }
.feature-list li { padding: 10px 0 10px 32px; position: relative; border-bottom: 1px solid var(--line); }
.feature-list li::before { content: "\2714"; position: absolute; left: 0; color: var(--green); font-weight: 800; }

.about-img { border-radius: var(--radius); margin: 1rem 0 1.5rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #c7d2dc; padding-top: 48px; }
.footer-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; padding-bottom: 32px; }
.footer-col h4 { color: var(--white); margin-bottom: 12px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 6px; }
.footer-col a { color: #c7d2dc; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 18px 0; font-size: 0.88rem; }
.footer-bottom a { color: #9fb0bd; }

/* ---------- Sticky mobile call bar ---------- */
.mobile-call-bar { display: none; }
@media (max-width: 768px) {
    .mobile-call-bar {
        display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
    }
    .mobile-call-bar a { flex: 1; text-align: center; padding: 16px 0; font-weight: 800; font-size: 1.05rem; }
    .mcb-call { background: var(--cta); color: var(--white); }
    .mcb-quote { background: var(--blue); color: var(--white); }

    .main-nav { display: none; }
    .hero-h1, .service-hero h1 { font-size: 1.9rem; }
    .hero-phone { font-size: 1.8rem; }
    .hero, .service-hero { padding: 60px 0; }
    h2.section-title { font-size: 1.55rem; }
}