/* ==========================================================================
   Typography System - Based on Typography Map.csv and Mobile Scaling.csv
   ========================================================================== */

/* Font Family - Inter (already loaded in consulting-head.php) */
:root {
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    font-family: var(--font-primary);
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

.logo a {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.nav-list a {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
}

.header-cta .btn,
.btn-primary {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

/* ==========================================================================
   Hero Section (Sections 1-3 in content)
   ========================================================================== */

.hero-subtitle {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.hero-title,
.hero-headline {
    font-family: var(--font-primary);
    font-size: 56px;
    font-weight: 700;
    line-height: 1.15;
}

.hero-description,
.hero-subheadline {
    font-family: var(--font-primary);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.6;
}

/* ==========================================================================
   Review / Intro Highlight Section (Sections 4-5 in content)
   ========================================================================== */

.review-label {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.review-card p {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
}

/* ==========================================================================
   Services Section (Sections 6-8 in content)
   ========================================================================== */

.services-label {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.services-content h2,
.services-section h2 {
    font-family: var(--font-primary);
    font-size: 38px;
    font-weight: 600;
    line-height: 1.25;
}

.services-content>p {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
}

/* ==========================================================================
   CTA Banner Section (Section 9, Mid CTA)
   ========================================================================== */

.cta-banner h2 {
    font-family: var(--font-primary);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.25;
}

.cta-phone {
    font-family: var(--font-primary);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
}

/* ==========================================================================
   How / Tactics Section (Sections 10-16 in content)
   ========================================================================== */

.how-section .section-header h2,
.how-section h2 {
    font-family: var(--font-primary);
    font-size: 38px;
    font-weight: 600;
    line-height: 1.25;
}

.how-section h3,
.how-section .services-content h3 {
    font-family: var(--font-primary);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}

.how-section .services-content p,
.how-section p {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
}

/* ==========================================================================
   Why / Who This Helps Section (Sections 17-20 in content)
   ========================================================================== */

.why-section .section-header h2,
.why-section h2 {
    font-family: var(--font-primary);
    font-size: 38px;
    font-weight: 600;
    line-height: 1.25;
}

.why-section .services-content p,
.why-section p {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
}

/* ==========================================================================
   Final CTA Section (Section 21 in content)
   ========================================================================== */

.final-cta p,
.final-cta-content p {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
}

/* ==========================================================================
   General Section Headers
   ========================================================================== */

.section-header h2 {
    font-family: var(--font-primary);
    font-size: 38px;
    font-weight: 600;
    line-height: 1.25;
}

/* ==========================================================================
   Mobile Responsive Typography (max-width: 768px)
   Based on Mobile Scaling.csv
   ========================================================================== */

@media (max-width: 768px) {

    /* Logo */
    .logo a {
        font-size: 16px;
    }

    /* Navigation */
    .nav-list a {
        font-size: 15px;
    }

    /* Buttons */
    .header-cta .btn,
    .btn-primary {
        font-size: 15px;
    }

    /* Hero Section */
    .hero-subtitle {
        font-size: 13px;
    }

    .hero-title,
    .hero-headline {
        font-size: 44px;
    }

    .hero-description,
    .hero-subheadline {
        font-size: 16px;
    }

    /* Review / Intro Section */
    .review-label {
        font-size: 13px;
    }

    .review-card p {
        font-size: 16px;
    }

    /* Services Section */
    .services-label {
        font-size: 13px;
    }

    .services-content h2,
    .services-section h2 {
        font-size: 30px;
    }

    .services-content>p {
        font-size: 16px;
    }

    /* CTA Banner */
    .cta-banner h2 {
        font-size: 28px;
    }

    .cta-phone {
        font-size: 36px;
    }

    /* How / Tactics Section */
    .how-section .section-header h2,
    .how-section h2 {
        font-size: 30px;
    }

    .how-section h3,
    .how-section .services-content h3 {
        font-size: 18px;
    }

    /* Feature text stays at 16px on mobile per CSV */

    /* Why / Who Section */
    .why-section .section-header h2,
    .why-section h2 {
        font-size: 30px;
    }

    /* List items stay at 16px on mobile per CSV */

    /* Final CTA */
    .final-cta p,
    .final-cta-content p {
        font-size: 16px;
    }

    /* General Section Headers */
    .section-header h2 {
        font-size: 30px;
    }
}