/* ==========================================================
   MS CONSULTING
   RESPONSIVE CSS
   GLOBAL MOBILE / TABLET SYSTEM

   Sections covered:
   - Global
   - Container
   - Hero
   - Executive Summary
   - Achievements
   - Latest Insights
   - CTA / Let's Connect
   - Footer
========================================================== */


/* ==========================================================
   GLOBAL SAFETY
========================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;

    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* Prevent media from creating horizontal overflow */

img,
video,
iframe,
svg {
    max-width: 100%;
}

img,
video {
    height: auto;
}


/* Prevent long text / URLs from breaking mobile layout */

p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span {
    overflow-wrap: break-word;
}


/* ==========================================================
   GLOBAL CONTAINER
========================================================== */

.container {
    width: min(1200px, calc(100% - 40px));

    max-width: 1200px;

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}


/* ==========================================================
   GLOBAL SECTION SAFETY
========================================================== */

section,
main,
header,
footer {
    width: 100%;
    max-width: 100%;
}


/* ==========================================================
   TABLET
   993px → 1000px
========================================================== */

@media (max-width: 1000px) {

    .container {
        width: calc(100% - 40px);
        max-width: none;
    }


    /* ======================================================
       HERO
    ====================================================== */

    .hero {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .hero-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 0.8fr);

        gap: 35px;
    }

    .hero-content,
    .hero-image {
        min-width: 0;
        max-width: 100%;
    }

    .hero h1 {
        font-size: clamp(42px, 6vw, 62px);
        line-height: 1.08;
    }

    .hero-content > p {
        max-width: 100%;
        font-size: 17px;
    }

    .hero-image img {
        width: 100%;
        max-width: 420px;
        height: auto;
    }


    /* ======================================================
       EXECUTIVE SUMMARY
    ====================================================== */

    .executive-summary {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .executive-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .executive-content {
        width: 100%;
        max-width: 800px;
        min-width: 0;
    }

    .executive-cards {
        width: 100%;
        max-width: 800px;
        min-width: 0;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }

    .summary-card {
        width: 100%;
        min-width: 0;
    }


    /* ======================================================
       ACHIEVEMENTS
    ====================================================== */

    .achievement-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }

    .achievement-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }


    /* ======================================================
       INSIGHTS
    ====================================================== */

    .insight-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }

    .insight-card {
        min-width: 0;
        width: 100%;
    }

    .insight-card img {
        display: block;

        width: 100%;
        max-width: 100%;

        height: 210px;

        object-fit: cover;
    }


    /* ======================================================
       CTA
    ====================================================== */

    .cta-box {
        grid-template-columns: 1fr;

        gap: 35px;

        padding: 45px 35px;

        text-align: center;
    }

    .cta-content {
        width: 100%;
        min-width: 0;
    }

    .cta-content h2 {
        font-size: 40px;
        line-height: 1.2;
    }

    .cta-content p {
        font-size: 16px;
        line-height: 1.75;
    }

    .cta-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .contact-links {
        justify-content: center;
        flex-wrap: wrap;
    }

    .cta-image {
        order: -1;
    }

    .cta-image img {
        width: 260px;
        max-width: 80%;
        height: auto;

        margin-left: auto;
        margin-right: auto;
    }


    /* ======================================================
       FOOTER
    ====================================================== */

    .footer-grid {
        grid-template-columns:
            1.5fr
            1fr
            1fr;

        gap: 30px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

}


/* ==========================================================
   MOBILE
   769px → 700px and below
========================================================== */

@media (max-width: 768px) {

    /* ======================================================
       GLOBAL
    ====================================================== */

    html,
    body {
        width: 100%;
        max-width: 100%;

        overflow-x: hidden;
    }

    main,
    section,
    header,
    footer {
        width: 100%;
        max-width: 100%;
    }


    /* ======================================================
       CONTAINER
    ====================================================== */

    .container {
        width: calc(100% - 32px);

        max-width: none;

        margin-left: auto;
        margin-right: auto;

        padding-left: 0;
        padding-right: 0;
    }


    /* ======================================================
       HERO
    ====================================================== */

    .hero {
        width: 100%;
        max-width: 100%;

        padding: 55px 0 60px;

        overflow: hidden;
    }

    .hero .container {
        width: calc(100% - 32px);
        max-width: none;
    }

    .hero-grid {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        width: 100%;
        max-width: 100%;

        min-width: 0;

        gap: 40px;
    }

    .hero-content {

        width: 100%;
        max-width: none;

        min-width: 0;

        text-align: center;
    }

    .hero-label {

        display: inline-block;

        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        padding: 9px 15px;

        font-size: 11px;

        line-height: 1.5;

        letter-spacing: 1px;
    }

    .hero h1 {

        width: 100%;
        max-width: none;

        margin: 0;

        font-size: clamp(38px, 11vw, 52px);

        line-height: 1.08;

        letter-spacing: -1px;
    }

    .hero-content > p {

        width: 100%;
        max-width: 600px;

        margin: 24px auto 0;

        font-size: 16px;

        line-height: 1.7;
    }

    .hero-buttons {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        width: 100%;

        gap: 12px;

        margin-top: 28px;
    }

    .hero-buttons .btn {

        width: 100%;
        max-width: 300px;

        box-sizing: border-box;

        text-align: center;
    }

    .hero-stats {

        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        width: 100%;
        max-width: 100%;

        gap: 10px;

        margin-top: 35px;

        text-align: center;
    }

    .hero-stats > div {
        min-width: 0;
    }

    .hero-stats strong {
        font-size: 23px;
        line-height: 1;
    }

    .hero-stats span {

        display: block;

        font-size: 11px;

        line-height: 1.35;
    }

    .hero-image {

        width: 100%;
        max-width: 100%;

        min-width: 0;

        display: flex;

        justify-content: center;
        align-items: center;

        order: 2;
    }

    .hero-image img {

        display: block;

        width: 100%;

        max-width: 340px;

        height: auto;

        margin-left: auto;
        margin-right: auto;
    }


    /* ======================================================
       EXECUTIVE SUMMARY
    ====================================================== */

    .executive-summary {

        width: 100%;
        max-width: 100%;

        padding-top: 55px;
        padding-bottom: 55px;

        overflow: hidden;
    }

    .executive-summary .container {

        width: calc(100% - 32px);

        max-width: none;
    }

    .executive-grid {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        width: 100%;
        max-width: 100%;

        min-width: 0;

        gap: 35px;
    }

    .executive-content {

        width: 100%;
        max-width: none;

        min-width: 0;

        text-align: left;
    }

    .executive-content .section-title {

        display: inline-block;

        margin-bottom: 14px;
    }

    .executive-content .heading {

        width: 100%;
        max-width: none;

        margin: 0 0 20px;

        font-size: clamp(30px, 8vw, 42px);

        line-height: 1.15;
    }

    .executive-content p {

        width: 100%;
        max-width: none;

        margin: 0 0 15px;

        font-size: 15px;

        line-height: 1.7;
    }

    .executive-content .btn {

        margin-top: 8px;
    }


    /* ------------------------------------------------------
       EXECUTIVE CARDS
    ------------------------------------------------------ */

    .executive-cards {

        display: grid;

        grid-template-columns: 1fr;

        width: 100%;
        max-width: none;

        min-width: 0;

        gap: 16px;
    }

    .summary-card {

        width: 100%;
        max-width: 100%;

        min-width: 0;

        box-sizing: border-box;

        padding: 24px 20px;

        border-radius: 18px;
    }

    .summary-card i {

        width: 46px;
        height: 46px;

        margin-bottom: 14px;

        font-size: 21px;
    }

    .summary-card h4 {

        font-size: 18px;

        line-height: 1.3;

        margin-bottom: 8px;
    }

    .summary-card p {

        width: 100%;
        max-width: 100%;

        font-size: 14px;

        line-height: 1.6;

        overflow-wrap: anywhere;
    }


    /* ======================================================
       ACHIEVEMENTS
    ====================================================== */

    .achievements {

        width: 100%;
        max-width: 100%;

        overflow: hidden;
    }

    .achievement-stats {

        display: grid;

        grid-template-columns: 1fr;

        width: 100%;
        max-width: 100%;

        gap: 15px;

        margin: 35px 0;
    }

    .stat-box {

        width: 100%;
        max-width: 100%;

        min-width: 0;

        padding: 24px 20px;

        text-align: center;
    }

    .stat-box h3 {

        font-size: 38px;

        line-height: 1.1;

        margin-bottom: 8px;
    }

    .stat-box span {

        display: block;

        font-size: 14px;

        line-height: 1.5;
    }

    .achievement-grid {

        display: grid;

        grid-template-columns: 1fr;

        width: 100%;
        max-width: 100%;

        gap: 16px;
    }

    .achievement-card {

        width: 100%;
        max-width: 100%;

        min-width: 0;

        padding: 24px 20px;

        text-align: left;
    }

    .achievement-card i {

        font-size: 36px;

        margin-bottom: 14px;
    }

    .achievement-card h4 {

        font-size: 21px;

        line-height: 1.3;
    }

    .achievement-card p {

        font-size: 14px;

        line-height: 1.7;
    }


    /* ======================================================
       LATEST INSIGHTS
    ====================================================== */

    .insights {

        width: 100%;
        max-width: 100%;

        overflow: hidden;
    }

    .insight-grid {

        display: grid;

        grid-template-columns: 1fr;

        width: 100%;
        max-width: 100%;

        gap: 20px;

        margin-top: 35px;
    }

    .insight-card {

        display: flex;
        flex-direction: column;

        width: 100%;
        max-width: 100%;

        min-width: 0;

        overflow: hidden;
    }

    .insight-card img {

        display: block;

        width: 100%;
        max-width: 100%;

        height: 210px;

        object-fit: cover;
    }

    .category {

        display: inline-block;

        max-width: calc(100% - 40px);

        margin: 20px 20px 10px;

        font-size: 10px;

        line-height: 1.4;

        overflow-wrap: anywhere;
    }

    .insight-card h3 {

        margin: 0 20px 12px;

        font-size: 20px;

        line-height: 1.35;

        overflow-wrap: anywhere;
    }

    .insight-card p {

        margin: 0 20px 18px;

        font-size: 14px;

        line-height: 1.7;

        overflow-wrap: anywhere;
    }

    .insight-card a {

        display: inline-block;

        margin: auto 20px 22px;

        font-size: 13px;
    }

    .insight-button {

        width: 100%;

        margin-top: 30px;

        text-align: center;
    }


    /* ======================================================
       CTA / LET'S CONNECT
    ====================================================== */

    .cta-section {

        width: 100%;
        max-width: 100%;

        padding: 55px 0;

        overflow: hidden;
    }

    .cta-section .container {

        width: calc(100% - 32px);

        max-width: none;
    }

    .cta-box {

        display: flex;

        flex-direction: column;

        width: 100%;
        max-width: 100%;

        gap: 28px;

        padding: 38px 22px;

        border-radius: 22px;

        overflow: hidden;

        text-align: center;
    }

    .cta-content {

        width: 100%;
        max-width: 100%;

        min-width: 0;
    }

    .cta-content h2 {

        width: 100%;
        max-width: 100%;

        margin: 10px 0 16px;

        font-size: 32px;

        line-height: 1.2;

        overflow-wrap: anywhere;
    }

    .cta-content p {

        width: 100%;
        max-width: 100%;

        margin-bottom: 25px;

        font-size: 15px;

        line-height: 1.7;

        overflow-wrap: anywhere;
    }

    .cta-buttons {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        width: 100%;

        gap: 12px;

        margin-bottom: 25px;
    }

    .cta-buttons .btn {

        width: 100%;
        max-width: 100%;

        justify-content: center;
    }

    .contact-links {

        display: flex;

        flex-direction: column;

        align-items: center;

        width: 100%;

        gap: 14px;
    }

    .contact-links a {

        max-width: 100%;

        font-size: 14px;

        text-align: center;

        overflow-wrap: anywhere;
    }

    .cta-image {

        width: 100%;

        display: flex;

        justify-content: center;

        align-items: center;

        order: -1;
    }

    .cta-image img {

        display: block;

        width: 190px;

        max-width: 70%;

        height: auto;

        margin-left: auto;
        margin-right: auto;
    }


    /* ======================================================
       FOOTER
    ====================================================== */

    .footer {

        width: 100%;
        max-width: 100%;

        padding: 55px 0 22px;

        overflow: hidden;
    }

    .footer .container {

        width: calc(100% - 32px);

        max-width: none;

        margin-left: auto;
        margin-right: auto;
    }

    .footer-grid {

        display: grid;

        grid-template-columns: 1fr;

        width: 100%;
        max-width: 100%;

        gap: 32px;
    }

    .footer-brand {

        width: 100%;
        max-width: 100%;

        text-align: center;

        grid-column: auto;
    }

    .footer-brand img {

        display: block;

        width: auto;

        height: 55px;

        max-width: 180px;

        margin: 0 auto 18px;
    }

    .footer-tagline {

        font-size: 19px;

        line-height: 1.4;

        margin-bottom: 14px;
    }

    .footer-brand p {

        max-width: 420px;

        margin-left: auto;
        margin-right: auto;

        font-size: 14px;

        line-height: 1.7;
    }

    .footer h4 {

        font-size: 17px;

        margin-bottom: 14px;
    }

    .footer li {

        font-size: 14px;

        margin-bottom: 10px;

        line-height: 1.5;
    }

    .footer-contact li {

        display: flex;

        justify-content: center;

        align-items: flex-start;

        width: 100%;
        max-width: 320px;

        margin-left: auto;
        margin-right: auto;

        gap: 8px;

        text-align: left;
    }

    .footer-contact i {

        flex: 0 0 auto;
    }

    .footer-social {

        display: flex;

        justify-content: center;

        align-items: center;

        flex-wrap: wrap;

        gap: 10px;

        margin-top: 20px;
    }

    .footer-social a {

        width: 40px;
        height: 40px;

        flex: 0 0 40px;
    }

    .footer-bottom {

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        width: 100%;

        margin-top: 40px;

        padding-top: 20px;

        gap: 10px;

        text-align: center;
    }

    .footer-bottom p {

        max-width: 100%;

        font-size: 12px;

        line-height: 1.6;

        overflow-wrap: anywhere;
    }

}


/* ==========================================================
   SMALL PHONES
   481px → 480px
========================================================== */

@media (max-width: 480px) {

    /* ======================================================
       GLOBAL CONTAINER
    ====================================================== */

    .container {

        width: calc(100% - 24px);

        max-width: none;
    }


    /* ======================================================
       HERO
    ====================================================== */

    .hero {

        padding: 45px 0 50px;
    }

    .hero .container {

        width: calc(100% - 24px);
    }

    .hero-label {

        font-size: 10px;

        padding: 8px 12px;

        letter-spacing: .8px;
    }

    .hero h1 {

        font-size: 36px;

        line-height: 1.08;
    }

    .hero-content > p {

        font-size: 15px;

        line-height: 1.65;
    }

    .hero-buttons .btn {

        max-width: 280px;
    }

    .hero-stats {

        gap: 6px;
    }

    .hero-stats strong {

        font-size: 21px;
    }

    .hero-stats span {

        font-size: 10px;
    }

    .hero-image img {

        max-width: 300px;
    }


    /* ======================================================
       EXECUTIVE SUMMARY
    ====================================================== */

    .executive-summary {

        padding-top: 45px;
        padding-bottom: 45px;
    }

    .executive-summary .container {

        width: calc(100% - 24px);
    }

    .executive-grid {

        gap: 28px;
    }

    .executive-content .heading {

        font-size: 30px;

        line-height: 1.15;
    }

    .executive-content p {

        font-size: 14px;
    }

    .summary-card {

        padding: 22px 18px;

        border-radius: 17px;
    }

    .summary-card h4 {

        font-size: 17px;
    }


    /* ======================================================
       ACHIEVEMENTS
    ====================================================== */

    .achievement-stats {

        gap: 12px;

        margin: 30px 0;
    }

    .stat-box {

        padding: 22px 16px;

        border-radius: 16px;
    }

    .stat-box h3 {

        font-size: 34px;
    }

    .achievement-card {

        padding: 22px 17px;

        border-radius: 17px;
    }

    .achievement-card h4 {

        font-size: 19px;
    }

    .achievement-card p {

        font-size: 13px;
    }


    /* ======================================================
       INSIGHTS
    ====================================================== */

    .insight-card img {

        height: 190px;
    }

    .insight-card h3 {

        font-size: 19px;
    }

    .insight-card p {

        font-size: 13px;
    }


    /* ======================================================
       CTA
    ====================================================== */

    .cta-section {

        padding: 45px 0;
    }

    .cta-section .container {

        width: calc(100% - 24px);
    }

    .cta-box {

        padding: 32px 17px;

        border-radius: 19px;
    }

    .cta-content h2 {

        font-size: 28px;
    }

    .cta-content p {

        font-size: 14px;
    }

    .cta-image img {

        width: 160px;

        max-width: 65%;
    }


    /* ======================================================
       FOOTER
    ====================================================== */

    .footer {

        padding: 45px 0 18px;
    }

    .footer .container {

        width: calc(100% - 24px);
    }

    .footer-tagline {

        font-size: 18px;
    }

    .footer h4 {

        font-size: 16px;
    }

    .footer li {

        font-size: 13px;
    }

    .footer-contact li {

        max-width: 280px;

        font-size: 13px;
    }

    .footer-bottom {

        margin-top: 32px;
    }

}


/* ==========================================================
   VERY SMALL PHONES
   380px AND BELOW
========================================================== */

@media (max-width: 380px) {

    .container {

        width: calc(100% - 20px);
    }


    /* HERO */

    .hero h1 {

        font-size: 33px;
    }

    .hero-image img {

        max-width: 280px;
    }


    /* EXECUTIVE */

    .executive-content .heading {

        font-size: 28px;
    }

    .summary-card {

        padding: 20px 15px;
    }


    /* ACHIEVEMENTS */

    .achievement-card {

        padding: 20px 15px;
    }


    /* INSIGHTS */

    .insight-card h3 {

        font-size: 18px;
    }


    /* CTA */

    .cta-box {

        padding: 28px 15px;
    }


    /* FOOTER */

    .footer-tagline {

        font-size: 17px;
    }

}