/* ==========================================
   COMPNOW PROFESSIONAL COMPACT LAYOUT
   ========================================== */

:root {
    --cn-blue: #174c96;
    --cn-dark: #123b70;
    --cn-gold: #f5bd22;
    --cn-light: #f5f9ff;
}

/* CONSISTENT PAGE SPACING */

main section {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
}

main .container,
main .section-inner,
main .section-content {
    max-width: 1250px !important;
    width: calc(100% - 48px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* MAIN HOMEPAGE HEADING */

.hero {
    min-height: 0 !important;
    height: auto !important;
    padding: 24px !important;
    margin: 0 !important;
    background: #ffffff !important;
}

.hero-content,
.hero-copy,
.hero-text {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

.hero h1 {
    font-size: clamp(36px, 4vw, 64px) !important;
    line-height: 1.08 !important;
    letter-spacing: -1px !important;
    text-align: left !important;
    margin: 0 0 14px 0 !important;
    color: var(--cn-dark) !important;
}

.hero p {
    font-size: 17px !important;
    line-height: 1.5 !important;
    max-width: 580px !important;
    text-align: left !important;
    margin: 0 0 18px 0 !important;
    color: var(--cn-dark) !important;
}

/* BUTTONS UNDER MAIN HEADING */

.hero-actions,
.hero-buttons,
.cta-buttons {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-top: 12px !important;
}

/* TWO-COLUMN HERO WHEN SUPPORTED */

.hero-grid,
.hero-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%) !important;
    gap: 24px !important;
    align-items: start !important;
}

.hero-grid > *,
.hero-layout > * {
    min-width: 0 !important;
}

/* BRING SERVICE CONTENT HIGHER */

.hero + section,
.hero + div {
    margin-top: 0 !important;
    padding-top: 20px !important;
}

/* COMPACT SERVICE CARDS */

main [class*="service-card"],
main [class*="feature-card"],
main [class*="info-card"] {
    padding: 18px !important;
    margin-bottom: 12px !important;
    background: var(--cn-light) !important;
    color: var(--cn-dark) !important;
    border: 1px solid #c9d9eb !important;
    box-shadow: none !important;
}

/* REDUCE OVERSIZED HEADINGS */

main section h2 {
    font-size: clamp(28px, 3vw, 42px) !important;
    line-height: 1.15 !important;
    margin-bottom: 16px !important;
}

main section h3 {
    font-size: clamp(20px, 2vw, 27px) !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
}

/* CONSISTENT PARAGRAPH SPACING */

main section p {
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
}

/* COMPACT GRIDS */

.services-grid,
.service-grid,
.features-grid,
.cards-grid {
    gap: 15px !important;
}

/* REMOVE EXCESSIVE DECORATIVE SPACE */

main [class*="spacer"] {
    max-height: 20px !important;
}

/* KEEP BACKGROUNDS LIGHT */

main section {
    background-color: #ffffff !important;
}

/* MOBILE */

@media (max-width: 800px) {

    .hero-grid,
    .hero-layout {
        grid-template-columns: 1fr !important;
    }

    .hero {
        padding: 20px 16px !important;
    }

    .hero h1 {
        font-size: clamp(32px, 8vw, 48px) !important;
    }

    main section {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    main .container,
    main .section-inner,
    main .section-content {
        width: calc(100% - 32px) !important;
    }
}