/* ============================================================================
   components.css — modern component design system for the subpages
   Brand: navy #191E4E + blue #618FF6, Work Sans. Trustworthy, clean, professional.
   Styles the modern template (.hero.subpage-hero, .service-card, .info-*, etc.)
   that was referenced in HTML but never defined in style.css.
   ============================================================================ */

:root {
    --c-navy: #191E4E;
    --c-blue: #618FF6;
    --c-blue-dark: #3b63c4;
    --c-ink: #1f2733;
    --c-muted: #5b6676;
    --c-line: #e6e9f0;
    --c-soft: #f5f7fb;
    --c-radius: 14px;
    --c-shadow: 0 10px 30px rgba(25, 30, 78, .08);
    --c-shadow-hover: 0 18px 44px rgba(25, 30, 78, .14);
}

/* ---- generic section rhythm (scoped to modern classes only) ---- */
.hero.subpage-hero,
.info-section,
.bg-secondary,
.reviews-section,
.cta-section,
main > section {
    padding: clamp(3rem, 6vw, 5.5rem) 0;
}
main > section { position: relative; }
.bg-secondary { background: var(--c-soft); }

/* ---- HERO (subpage) ---- */
.hero.subpage-hero {
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(97, 143, 246, .25), transparent 60%),
        linear-gradient(135deg, #11163a 0%, var(--c-navy) 55%, #232a63 100%);
    color: #fff;
    overflow: hidden;
}
.hero.subpage-hero .container {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.hero.subpage-hero h1 {
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: .4rem 0 1rem;
    color: #fff;
}
.hero.subpage-hero h1 .highlight {
    background: linear-gradient(120deg, var(--c-blue), var(--c-accent, #b7c8ff));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-description {
    font-size: clamp(1.02rem, 1.4vw, 1.18rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    max-width: 38rem;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .42rem .9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #dbe4ff;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    backdrop-filter: blur(6px);
}
.hero-badge svg { width: 16px; height: 16px; flex: 0 0 auto; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }
.hero-visual img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .1);
}

/* ---- BUTTONS ---- */
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .98rem;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    cursor: pointer;
    border: 1.5px solid transparent;
}
.btn-primary {
    background: linear-gradient(120deg, var(--c-blue), var(--c-blue-dark));
    color: #fff;
    box-shadow: 0 8px 20px rgba(97, 143, 246, .35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(97, 143, 246, .45); }
.btn-primary svg { width: 20px; height: 20px; }
.btn-secondary {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .4);
}
.btn-secondary:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.info-content .btn-primary,
.cta-content .btn-primary { box-shadow: 0 8px 20px rgba(97, 143, 246, .28); }
/* header CTA */
.btn-nav {
    background: var(--c-blue);
    color: #fff !important;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    transition: background .2s ease, transform .2s ease;
}
.btn-nav:hover { background: var(--c-blue-dark); transform: translateY(-1px); }

/* ---- SECTION HEADER ---- */
.section-header { text-align: center; max-width: 46rem; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.section-header h2 {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--c-navy);
    margin-bottom: .7rem;
}
.section-header p { color: var(--c-muted); font-size: 1.05rem; line-height: 1.6; }
.bg-secondary h2, .info-section h2, main > section h2 { color: var(--c-navy); }

/* ---- SERVICE CARDS ---- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}
.service-card {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    padding: 2rem 1.7rem;
    box-shadow: var(--c-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--c-shadow-hover); border-color: #d7e0f7; }
.service-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(97, 143, 246, .16), rgba(25, 30, 78, .12));
    display: grid;
    place-items: center;
    margin-bottom: 1.1rem;
}
.service-icon svg { width: 28px; height: 28px; stroke: var(--c-navy); }
.service-card h3 { font-size: 1.18rem; color: var(--c-navy); margin-bottom: .55rem; }
.service-card p { color: var(--c-muted); line-height: 1.6; font-size: .97rem; }
.service-card a { color: var(--c-blue-dark); font-weight: 600; }

/* ---- INFO GRID (two column text/visual) ---- */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.info-content h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--c-navy); margin-bottom: 1rem; line-height: 1.15; }
.info-content h3 { font-size: 1.2rem; color: var(--c-navy); margin: 1.4rem 0 .5rem; }
.info-content p { color: var(--c-muted); line-height: 1.7; margin-bottom: 1rem; }
.info-content a { color: var(--c-blue-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.info-image img { width: 100%; height: auto; border-radius: var(--c-radius); box-shadow: var(--c-shadow); }

/* ---- INFO FEATURES (check lists) — THE ICON FIX ---- */
.info-features { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .8rem; }
.info-features li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    color: var(--c-ink);
    line-height: 1.55;
    font-size: .98rem;
}
.info-features li svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 3px;
    border-radius: 50%;
    background: rgba(97, 143, 246, .14);
    stroke: var(--c-blue-dark);
    margin-top: .1rem;
}

/* ---- PRICE / COMPARISON TABLES ---- */
main table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: var(--c-radius);
    overflow: hidden;
    box-shadow: var(--c-shadow);
    font-size: .96rem;
}
main thead tr { background: var(--c-navy) !important; color: #fff; }
main th, main td { padding: .9rem 1.1rem !important; text-align: left; }
main tbody tr { border-bottom: 1px solid var(--c-line); }
main tbody tr:nth-child(even) { background: var(--c-soft); }
main tbody tr:last-child { border-bottom: 0; }

/* ---- CTA ---- */
.cta-content { text-align: center; max-width: 42rem; margin: 0 auto; }
.cta-content h3, .cta-content h2 { color: var(--c-navy); font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: .7rem; }
.cta-content p { color: var(--c-muted); line-height: 1.6; }
.cta-section { background: var(--c-soft); }

/* ---- REVIEWS ---- */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
.review-card {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    padding: 1.8rem;
    box-shadow: var(--c-shadow);
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--c-shadow-hover); }
.review-card::before {
    content: "\201C";
    font-size: 4rem;
    line-height: 1;
    color: rgba(97, 143, 246, .25);
    position: absolute;
    top: .4rem;
    right: 1rem;
    font-family: Georgia, serif;
}
.review-card blockquote { margin: 0; border: 0; padding: 0; }
.review-card blockquote p { color: var(--c-ink); line-height: 1.6; font-size: 1rem; }
.review-author { margin-top: 1.1rem; font-style: normal; color: var(--c-muted); font-size: .9rem; }
.review-author strong { color: var(--c-navy); font-style: normal; }

/* ---- RESPONSIVE ---- */
@media (max-width: 860px) {
    .hero.subpage-hero .container { grid-template-columns: 1fr; }
    .hero-visual { order: -1; }
    .info-grid { grid-template-columns: 1fr; }
    .hero.subpage-hero { text-align: left; }
}

/* ---- mobile nav (modern header) ---- */
@media (max-width: 880px) {
    #mainNav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--c-navy);
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }
    #mainNav.active { max-height: 80vh; }
    #mainNav ul { flex-direction: column; padding: 1rem 1.3rem; gap: .3rem; }
    #mainNav a { display: block; padding: .7rem 0; color: #fff; }
}

/* ---- footer polish (modern footer) ---- */
.footer-column ul { list-style: none; padding: 0; margin: 0; }
.footer-column h4 { color: #fff; font-size: 1rem; margin-bottom: .9rem; }
.footer-column li { margin: .35rem 0; }
.footer-column a { color: rgba(255,255,255,.72); text-decoration: none; transition: color .2s ease; }
.footer-column a:hover { color: #fff; }
.footer-brand p { color: rgba(255,255,255,.72); line-height: 1.6; }
.footer-credentials { font-size: .85rem; margin-top: .8rem; color: rgba(255,255,255,.6) !important; }
.footer-bottom { color: rgba(255,255,255,.55); font-size: .85rem; }

/* ---- reviews: rating banner + cta card ---- */
.rating-banner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    box-shadow: var(--c-shadow);
    padding: 1.5rem 1.8rem;
    margin-bottom: 2.2rem;
}
.rating-score { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.rating-number { font-size: 2.6rem; font-weight: 700; color: var(--c-navy); }
.rating-stars { color: #f5b301; font-size: 1rem; letter-spacing: 2px; margin-top: .25rem; }
.rating-meta { display: flex; flex-direction: column; gap: .2rem; margin-right: auto; }
.rating-meta strong { color: var(--c-navy); font-size: 1.1rem; }
.rating-meta span { color: var(--c-muted); font-size: .92rem; }
.review-card--cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, rgba(97,143,246,.08), rgba(25,30,78,.05));
    border-style: dashed;
}
.review-card--cta::before { content: none; }
.review-card--cta a { color: var(--c-blue-dark); text-decoration: none; }
@media (max-width: 560px) { .rating-banner { flex-direction: column; align-items: flex-start; } .rating-meta { margin-right: 0; } }

/* ---- fix: review author is a <footer>, must not inherit global navy footer ---- */
.reviews-grid .review-card .review-author {
    background: transparent !important;
    color: var(--c-muted) !important;
    padding: 0 !important;
    margin: 1.1rem 0 0 !important;
    text-align: left !important;
    border: 0 !important;
}
.reviews-grid .review-author strong { color: var(--c-navy) !important; font-style: normal; }
.reviews-grid .review-author a { color: var(--c-blue-dark) !important; }