/* Shared typography for the inner pages.
   Selectors are prefixed with `main` so they win over the page stylesheets
   (including their media queries) and never touch the injected header/footer.
   The blog list hero sits outside <main>, so it is targeted by its own class. */

:root {
    --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-sans: "Inter", "Segoe UI", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    --font-brand: "Glacial Indifference", "Century Gothic", Futura, sans-serif;
}

main {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

main h1,
main h2,
main h3,
main h4 {
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* Video hero (solution pages) */
main .hero h1 {
    font-size: clamp(40px, 3.8vw, 58px);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

main .hero p {
    font-size: 20px;
    line-height: 1.6;
}

main .cta-button {
    padding: 14px 26px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Intro section (solution pages) */
main .data-strategy .text h2,
main .data-content h2 {
    font-size: clamp(32px, 3.2vw, 46px);
    line-height: 1.15;
}

main .data-strategy .text p,
main .data-content p {
    font-size: 19px;
    line-height: 1.6;
}

main .data-strategy .btn {
    padding: 12px 18px;
}

main .data-strategy .btn,
main .data-content a {
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
}

/* Services carousel (solution pages) */
main .services h2 {
    font-size: clamp(32px, 3.2vw, 46px);
    line-height: 1.15;
}

main .card h3 {
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 12px;
}

main .card p {
    font-size: 16px;
    line-height: 1.6;
}

main .card ul li {
    font-size: 15px;
    line-height: 1.55;
}

main .btn-outline {
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
}

/* Contact form (all five pages) */
main .form-box h3 {
    font-size: 32px;
    line-height: 1.2;
}

main .form-box p {
    font-size: 17px;
    line-height: 1.6;
}

main .form-control {
    font-family: var(--font-sans);
}

main .btn.btn-primary {
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* About Us */
main .about-overlay h1 {
    font-family: var(--font-brand);
    font-size: clamp(44px, 4.6vw, 64px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

main .about-overlay p {
    font-size: 20px;
    line-height: 1.6;
}

main .about-text h2,
main .beyond-text h2 {
    font-size: clamp(32px, 3.2vw, 46px);
    line-height: 1.15;
}

main .about-text p,
main .beyond-text p {
    font-size: 19px;
    line-height: 1.6;
}

main .about-third-text h3 {
    font-size: 24px;
    line-height: 1.25;
}

main .about-third-text p {
    font-size: 17px;
    line-height: 1.6;
}

main .fifth-text p {
    font-size: 19px;
    line-height: 1.6;
}

main .btn-black {
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
}

/* Contact Us */
main .connect-section {
    font-family: var(--font-sans);
}

main .connect-header h2 {
    font-size: clamp(32px, 3.2vw, 46px);
    line-height: 1.15;
}

main .connect-header p {
    font-size: 19px;
    line-height: 1.6;
}

/* LinkedIn band (Contact Us, Thank You) */
main .linkedin-text h2 {
    font-size: clamp(40px, 3.8vw, 58px);
    font-weight: 700;
    line-height: 1.1;
}

main .linkedin-text p {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
}

/* Thank You */
main .overlay-text h1 {
    font-size: clamp(36px, 3.2vw, 46px);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

main .overlay-text p {
    font-size: 19px;
    line-height: 1.6;
}

/* ESG research cards */
main .esg-heading {
    font-size: clamp(32px, 3.2vw, 46px);
    line-height: 1.15;
}

main .esg-card h3 {
    font-size: 24px;
    line-height: 1.25;
}

main .esg-card ul li {
    font-size: 17px;
    line-height: 1.55;
}

/* Finance capabilities */
main .financial-data-section {
    font-family: var(--font-sans);
}

main .financial-heading h2 {
    font-size: clamp(32px, 3.2vw, 46px);
    line-height: 1.15;
}

main .financial-heading h3 {
    font-family: var(--font-sans);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: normal;
}

main .financial-text h3 {
    font-size: 28px;
    line-height: 1.25;
}

main .financial-text p {
    font-size: 17px;
    line-height: 1.6;
}

/* Blog list */
.blog-hero {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.blog-hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(40px, 3.8vw, 58px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.blog-hero p {
    font-size: 19px;
    line-height: 1.6;
}

main .category-btn {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

main .blog-category {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
}

main .blog-card .blog-title {
    font-size: 22px;
    line-height: 1.3;
}

main .blog-card .blog-excerpt {
    font-size: 16px;
    line-height: 1.6;
}

/* Blog detail */
main .blog-back-top a {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

main .blog-intro-left .blog-title {
    font-size: clamp(32px, 3.4vw, 48px);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

main .blog-intro-left .blog-excerpt {
    font-size: 19px;
    line-height: 1.6;
}

main .blog-meta {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

main .blog-content {
    font-size: 18px;
    line-height: 1.75;
}

main .blog-content h2 {
    font-size: 30px;
    line-height: 1.25;
}

main .blog-content h3 {
    font-size: 23px;
    line-height: 1.3;
}

main .blog-content h4 {
    font-size: 19px;
    line-height: 1.35;
}

main .blog-toc h4 {
    font-size: 18px;
    line-height: 1.3;
}

main .author-info h4 {
    font-size: 18px;
}

main .author-info p {
    font-size: 15px;
}

main .blog-cta h2 {
    font-size: clamp(32px, 3.2vw, 46px);
    line-height: 1.15;
}

main .blog-cta .cta-btn {
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

@media (max-width: 1200px) {
    main .hero h1,
    main .linkedin-text h2,
    .blog-hero h1 {
        font-size: 44px;
    }
}

@media (max-width: 768px) {
    main .hero h1 {
        font-size: 32px;
    }

    main .hero p {
        font-size: 16px;
    }

    main .cta-button {
        padding: 12px 22px;
        font-size: 14px;
    }

    main .data-strategy .text h2,
    main .data-content h2,
    main .services h2,
    main .about-text h2,
    main .beyond-text h2 {
        font-size: 28px;
    }

    main .data-strategy .text p,
    main .data-content p,
    main .about-text p,
    main .beyond-text p,
    main .fifth-text p {
        font-size: 16px;
    }

    main .form-box h3 {
        font-size: 28px;
    }

    main .about-overlay h1 {
        font-size: 38px;
    }

    main .about-overlay p {
        font-size: 17px;
    }

    main .about-third-text h3 {
        font-size: 22px;
    }

    main .about-third-text p {
        font-size: 16px;
    }

    main .connect-header h2,
    main .esg-heading,
    main .financial-heading h2,
    main .blog-cta h2 {
        font-size: 28px;
    }

    main .connect-header p,
    main .financial-heading h3,
    .blog-hero p {
        font-size: 16px;
    }

    main .linkedin-text h2,
    .blog-hero h1,
    main .blog-intro-left .blog-title {
        font-size: 32px;
    }

    main .linkedin-text p {
        font-size: 16px;
    }

    main .overlay-text h1 {
        font-size: 28px;
    }

    main .overlay-text p {
        font-size: 16px;
    }

    main .esg-card h3,
    main .financial-text h3 {
        font-size: 22px;
    }

    main .esg-card ul li,
    main .financial-text p {
        font-size: 16px;
    }

    main .blog-intro-left .blog-excerpt,
    main .blog-content {
        font-size: 17px;
    }

    main .blog-content h2 {
        font-size: 26px;
    }

    main .blog-content h3 {
        font-size: 21px;
    }
}

@media (max-width: 480px) {
    main .hero h1 {
        font-size: 28px;
        line-height: 1.2;
    }

    main .data-strategy .text h2,
    main .data-content h2,
    main .services h2,
    main .about-text h2,
    main .beyond-text h2 {
        font-size: 24px;
    }

    main .data-strategy .btn,
    main .data-content a {
        font-size: 12px;
    }

    main .card h3 {
        font-size: 20px;
    }

    main .card p {
        font-size: 15px;
    }

    main .card ul li {
        font-size: 14px;
    }

    main .form-box h3 {
        font-size: 24px;
    }

    main .form-box p {
        font-size: 15px;
    }

    main .about-overlay h1 {
        font-size: 32px;
    }

    main .connect-header h2,
    main .esg-heading,
    main .financial-heading h2,
    main .blog-cta h2,
    main .blog-content h2,
    main .overlay-text h1 {
        font-size: 24px;
    }

    main .linkedin-text h2,
    .blog-hero h1,
    main .blog-intro-left .blog-title {
        font-size: 28px;
    }

    main .linkedin-text p,
    main .esg-card ul li,
    main .financial-text p {
        font-size: 15px;
    }

    main .esg-card h3,
    main .financial-text h3,
    main .blog-card .blog-title {
        font-size: 20px;
    }
}