/* =========================================================
   RESPONSIVE.CSS
   Internet Communication
   ---------------------------------------------------------
   Corrected responsive layout
   ---------------------------------------------------------
   Main breakpoints:
   - Large tablet / small desktop : 1200px
   - Tablet                       : 1024px
   - Mobile                      : 767px
   - Small mobile                : 480px
   - Very small                  : 360px
   ========================================================= */


/* =========================================================
   1. GLOBAL RESPONSIVE FOUNDATION
   ========================================================= */

html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    overflow-x: hidden;
    max-width: 100%;
}

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

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

.container {
    width: min(1200px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}


/*
   IMPORTANT:
   Do NOT globally use overflow:hidden on every section.
   Dropdowns such as the Call Number dropdown need to
   extend outside their parent section.
*/

section {
    width: 100%;
    max-width: 100%;
}


/* =========================================================
   2. LARGE TABLET / SMALL DESKTOP
   1025px - 1200px
   ========================================================= */

@media (max-width: 1200px) {

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


    /* -----------------------------------------------------
       NAVIGATION
       ----------------------------------------------------- */

    .navbar {
        width: min(1100px, calc(100% - 40px));
    }

    .nav-menu {
        gap: 20px;
    }

    .nav-menu > a {
        font-size: 0.92rem;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero-grid {
        gap: 45px;
    }

    .hero h1 {
        font-size: clamp(3rem, 5vw, 4.5rem);
    }

    .hero-text {
        max-width: 550px;
    }

    .hero-visual {
        max-width: 560px;
    }


    /* -----------------------------------------------------
       ABOUT
       ----------------------------------------------------- */

    .about-grid {
        gap: 45px;
    }


    /* -----------------------------------------------------
       SERVICES
       ----------------------------------------------------- */

    .services-grid {
        gap: 20px;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .footer-grid {
        gap: 30px;
    }

}


/* =========================================================
   3. TABLET
   768px - 1024px
   ========================================================= */

@media (max-width: 1024px) {

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


    /* =====================================================
       NAVIGATION
       ===================================================== */

    .navbar {
        width: calc(100% - 40px);
        min-height: 70px;
    }

    /*
       Keep desktop navigation until mobile.
    */

    .nav-menu {
        gap: 14px;
    }

    .nav-menu > a {
        font-size: 0.85rem;
    }

    .nav-menu .nav-cta {
        padding: 10px 14px;
    }


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

    .hero {
        min-height: auto;
        padding-top: 90px;
        padding-bottom: 70px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .hero-content {
        text-align: center;
        align-items: center;
    }

    .hero h1 {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(3rem, 7vw, 4.5rem);
    }

    .hero-text {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-trust {
        justify-content: center;
    }

    .hero-visual {
        width: min(100%, 650px);
        margin-left: auto;
        margin-right: auto;
    }


    /* =====================================================
       ABOUT
       ===================================================== */

    .about-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-copy {
        max-width: 750px;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 800px;
    }


    /* =====================================================
       SERVICES
       ===================================================== */

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }


    /* =====================================================
       CLIENTS
       ===================================================== */

    .client-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }


    /* =====================================================
       TIMELINE / PROCESS
       ===================================================== */

    .timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 25px;
    }


    /* =====================================================
       WHY US
       ===================================================== */

    .why-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .why-copy {
        max-width: 750px;
    }

    .check-list {
        grid-template-columns: repeat(2, 1fr);
    }


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

    .cta-section {
        position: relative;
        overflow: visible !important;
        z-index: 50;
    }

    .cta-content {
        gap: 35px;
        padding: 50px 40px;
    }

    .cta-section .container {
        position: relative;
        z-index: 51;
    }


    /* =====================================================
       FAQ
       ===================================================== */

    .faq-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    /* =====================================================
       CONTACT
       ===================================================== */

    .contact-single {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }


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

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
        gap: 30px;
    }

}


/* =========================================================
   4. MOBILE
   Up to 767px
   ========================================================= */

@media (max-width: 767px) {

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

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

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

    section {
        width: 100%;
        max-width: 100%;
    }


    /* =====================================================
       NAVIGATION
       ===================================================== */

    .header {
        width: 100%;
    }

    .navbar {
        width: calc(100% - 32px);
        min-height: 64px;
    }


    /* -----------------------------------------------------
       BURGER BUTTON
       ----------------------------------------------------- */

    .nav-toggle {
        display: flex;

        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px;

        padding: 0;

        flex-shrink: 0;

        position: relative;
        z-index: 1100;
    }

    .nav-toggle span {
        display: block;

        width: 22px;
        height: 2px;

        margin: 3px 0;
    }


    /* -----------------------------------------------------
       MOBILE MENU
       ----------------------------------------------------- */

    .nav-menu {
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        display: none;

        flex-direction: column;
        align-items: stretch;

        gap: 0;

        padding: 15px 16px 20px;

        background: #ffffff;

        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 12px;

        box-shadow:
            0 15px 35px rgba(0, 0, 0, 0.15);

        z-index: 9999;
    }

    .nav-menu.active,
    .nav-menu.open,
    .nav-menu.show {
        display: flex;
    }

    .nav-menu > a {
        width: 100%;
        min-height: 46px;

        display: flex;
        align-items: center;

        padding: 11px 10px;

        font-size: 0.98rem;
    }

    .nav-menu .nav-cta {
        width: 100%;
        justify-content: center;

        margin-top: 6px;
    }


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

    .hero {
        min-height: auto;

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

    .hero-grid {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 40px;
    }

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

        text-align: center;

        display: flex;
        flex-direction: column;
        align-items: center;
    }

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

        font-size: clamp(2.35rem, 11vw, 3.7rem);

        line-height: 1.05;

        overflow-wrap: break-word;
        word-break: normal;
    }

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

        font-size: 0.98rem;
        line-height: 1.7;
    }

    .hero-actions {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 12px;
    }

    .hero-actions .btn {
        width: 100%;
        min-height: 48px;

        justify-content: center;
    }

    .hero-trust {
        width: 100%;

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

        gap: 10px;
    }

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

    .hero-trust strong,
    .hero-trust span {
        display: block;
    }


    /* =====================================================
       HERO VISUAL / NEWSPAPER
       ===================================================== */

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

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

        min-width: 0;
    }

    .newspaper-card {
        max-width: 100%;
    }

    .card-main {
        width: 100%;
    }

    .card-back {
        max-width: 90%;
    }

    .paper-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .paper-image {
        width: 100%;
    }

    .floating-badge {
        max-width: 150px;

        white-space: nowrap;

        font-size: 0.72rem;
    }

    .badge-one {
        left: 0;
    }

    .badge-two {
        right: 0;
    }


    /* =====================================================
       GENERAL SECTIONS
       ===================================================== */

    .section {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .section-heading {
        width: 100%;
        max-width: 100%;
    }

    .section-heading h2 {
        font-size: clamp(2rem, 9vw, 2.8rem);
        line-height: 1.1;

        overflow-wrap: break-word;
    }

    .section-heading > p {
        max-width: 100%;
    }


    /* =====================================================
       ABOUT
       ===================================================== */

    .about-grid {
        display: grid;
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .about-copy {
        width: 100%;
        max-width: 100%;
    }

    .stats-grid {
        width: 100%;

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

        gap: 10px;
    }

    .stat-card {
        min-width: 0;
        padding: 20px 10px;
    }

    .stat-number,
    .counter {
        font-size: 1.9rem;
    }

    .stat-card span {
        font-size: 0.75rem;
    }

    .feature-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }


    /* =====================================================
       SERVICES
       ===================================================== */

    .services-grid {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .service-card {
        width: 100%;
        min-width: 0;

        padding: 25px 20px;
    }

    .service-card h3 {
        font-size: 1.2rem;
    }

    .service-card p {
        font-size: 0.9rem;
        line-height: 1.65;
    }


    /* =====================================================
       CLIENTS
       ===================================================== */

    .client-grid {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 12px;
    }

    .client-card {
        width: 100%;
        min-width: 0;

        padding: 20px 14px;
    }

    .client-card h3 {
        font-size: 1.05rem;
    }

    .client-card p {
        font-size: 0.85rem;
        line-height: 1.55;
    }


    /* =====================================================
       PROCESS / TIMELINE
       ===================================================== */

    .timeline {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .step {
        width: 100%;
        min-width: 0;

        text-align: center;
    }

    .step > span {
        margin-left: auto;
        margin-right: auto;
    }

    .step h3 {
        font-size: 1.15rem;
    }

    .step p {
        font-size: 0.9rem;
        line-height: 1.65;
    }


    /* =====================================================
       WHY CHOOSE US
       ===================================================== */

    .why-grid {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .why-copy {
        width: 100%;
        max-width: 100%;
    }

    .why-copy h2 {
        font-size: clamp(2rem, 9vw, 2.8rem);
        line-height: 1.1;
    }

    .check-list {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .check-list > div {
        width: 100%;
    }


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

    .cta-section {
        width: 100%;

        /*
           VERY IMPORTANT:
           The Call dropdown must be allowed to extend
           outside the CTA section.
        */

        position: relative;

        overflow: visible !important;

        z-index: 50;
    }

    .cta-section .container {
        position: relative;
        z-index: 51;
    }

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

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

        display: flex;
        flex-direction: column;

        gap: 30px;

        padding: 40px 22px;

        /*
           Make sure dropdown is not clipped.
        */

        overflow: visible;
    }

    .cta-content h2 {
        font-size: clamp(2rem, 9vw, 2.7rem);
        line-height: 1.1;
    }

    .cta-content p {
        font-size: 0.94rem;
        line-height: 1.65;
    }

    .cta-actions {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 12px;

        /*
           IMPORTANT:
           Do not clip the call dropdown.
        */

        overflow: visible;

        position: relative;
        z-index: 100;
    }

    .cta-actions > *,
    .cta-actions .btn {
        width: 100%;
    }


    /* =====================================================
       CALL DROPDOWN
       ===================================================== */

    .call-dropdown-wrapper {
        position: relative;

        width: 100%;

        /*
           Allow dropdown to extend outside wrapper.
        */

        overflow: visible;

        z-index: 9999;
    }


    /* -----------------------------------------------------
       CALL BUTTON
       ----------------------------------------------------- */

    .call-dropdown-button {
        width: 100%;

        display: flex;

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

        min-height: 48px;
    }


    /* -----------------------------------------------------
       DROPDOWN CONTAINER
       -----------------------------------------------------

       IMPORTANT FIX:

       Previously BOTH the dropdown and the list had
       overflow-y:auto.

       That created nested scrolling on mobile.

       Now ONLY .call-dropdown-list scrolls.
    */

    .call-dropdown {
        position: absolute;

        top: calc(100% + 8px);

        left: 0;
        right: 0;

        width: 100%;

        /*
           Do NOT create another scroll container here.
        */

        max-height: none;

        overflow: visible;

        overflow-x: visible;

        /*
           Keep above the following section.
        */

        z-index: 99999;
    }


    /* -----------------------------------------------------
       DROPDOWN LIST
       -----------------------------------------------------

       ONLY THIS ELEMENT SCROLLS.
    */

    .call-dropdown-list {
        width: 100%;

        /*
           Mobile-friendly height.

           45vh means the list can use approximately
           45% of the visible phone screen.

           This allows many numbers to be displayed
           without making the dropdown too large.
        */

        max-height: 45vh;

        overflow-y: auto;
        overflow-x: hidden;

        /*
           Important for iPhone / Android touch scrolling.
        */

        -webkit-overflow-scrolling: touch;

        /*
           Tell the browser this area is intended
           for vertical touch scrolling.
        */

        touch-action: pan-y;

        /*
           Prevent scroll chaining from moving the
           whole page while the user is scrolling
           through phone numbers.
        */

        overscroll-behavior-y: contain;

        /*
           Always reserve scrollbar space.
        */

        scrollbar-gutter: stable;
    }


    /* -----------------------------------------------------
       NUMBER ITEMS
       ----------------------------------------------------- */

    .call-dropdown-list a,
    .call-dropdown-list button {
        width: 100%;

        min-height: 52px;

        flex-shrink: 0;
    }

    .call-number-item {
        min-height: 52px;

        padding: 14px 15px;

        /*
           Prevent long phone numbers from creating
           horizontal overflow.
        */

        min-width: 0;
    }

    .call-number-text {
        min-width: 0;
    }

    .call-number-value {
        overflow-wrap: anywhere;
        word-break: break-word;
    }


    /* -----------------------------------------------------
       MOBILE DROPDOWN SCROLLBAR
       ----------------------------------------------------- */

    .call-dropdown-list::-webkit-scrollbar {
        width: 7px;
    }

    .call-dropdown-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .call-dropdown-list::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.25);

        border-radius: 10px;
    }

    .call-dropdown-list::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.4);
    }


    /* =====================================================
       FAQ
       ===================================================== */

    .faq-layout {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .faq-list {
        width: 100%;
    }

    .faq-item {
        width: 100%;
    }

    .faq-question {
        width: 100%;

        min-height: 50px;

        gap: 12px;

        text-align: left;

        font-size: 0.94rem;
    }

    .faq-answer {
        font-size: 0.88rem;
        line-height: 1.65;
    }


    /* =====================================================
       CONTACT
       ===================================================== */

    .contact-single {
        width: 100%;
        max-width: 100%;
    }

    .contact-info {
        width: 100%;
        max-width: 100%;

        padding: 30px 22px;
    }

    .contact-intro h3 {
        font-size: 1.6rem;
    }

    .contact-intro p {
        font-size: 0.92rem;
        line-height: 1.65;
    }

    .contact-details {
        width: 100%;

        display: flex;
        flex-direction: column;

        gap: 18px;
    }

    .contact-item {
        width: 100%;

        display: flex;

        gap: 12px;

        min-width: 0;
    }

    .contact-item > div:last-child {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .contact-item a,
    .contact-item p {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .contact-actions {
        width: 100%;

        display: flex;
        flex-direction: column;

        gap: 12px;
    }

    .contact-actions .btn {
        width: 100%;
        justify-content: center;
    }


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

    .footer {
        width: 100%;

        padding-top: 50px;
        padding-bottom: 25px;
    }

    .footer-grid {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .footer-grid > div {
        width: 100%;
        min-width: 0;
    }

    .footer-grid a,
    .footer-grid p {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .footer-bottom {
        width: 100%;
    }

    .footer-bottom .container {
        text-align: center;
    }

    .socials {
        display: flex;
        flex-wrap: wrap;
    }


    /* =====================================================
       FLOATING BUTTONS
       ===================================================== */

    .floating-contact {
        width: 48px;
        height: 48px;

        right: 15px;
        bottom: 75px;

        z-index: 9990;
    }

    .scroll-top {
        width: 42px;
        height: 42px;

        right: 15px;
        bottom: 18px;

        z-index: 9990;
    }

}


/* =========================================================
   5. SMALL MOBILE
   Up to 480px
   ========================================================= */

@media (max-width: 480px) {

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


    /* -----------------------------------------------------
       NAVIGATION
       ----------------------------------------------------- */

    .navbar {
        width: calc(100% - 24px);
        min-height: 60px;
    }

    .logo {
        max-width: calc(100% - 55px);
    }

    .logo > span:last-child {
        font-size: 0.9rem;
    }

    .logo-mark {
        flex-shrink: 0;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero {
        padding-top: 70px;
        padding-bottom: 45px;
    }

    .hero-grid {
        gap: 32px;
    }

    .hero h1 {
        font-size: clamp(2.15rem, 12vw, 3.2rem);
    }

    .hero-text {
        font-size: 0.92rem;
    }

    .hero-trust {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }

    .hero-trust strong {
        font-size: 0.78rem;
    }

    .hero-trust span {
        font-size: 0.68rem;
    }


    /* -----------------------------------------------------
       NEWSPAPER
       ----------------------------------------------------- */

    .paper-top {
        font-size: 0.62rem;
    }

    .paper-grid {
        grid-template-columns: 1fr;
    }

    .floating-badge {
        max-width: 125px;

        padding: 7px 9px;

        font-size: 0.65rem;
    }


    /* -----------------------------------------------------
       SECTIONS
       ----------------------------------------------------- */

    .section {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .section-heading h2 {
        font-size: 2rem;
    }


    /* -----------------------------------------------------
       STATISTICS
       ----------------------------------------------------- */

    .stats-grid {
        gap: 7px;
    }

    .stat-card {
        padding: 17px 6px;
    }

    .stat-number,
    .counter {
        font-size: 1.65rem;
    }

    .stat-card span {
        font-size: 0.68rem;
    }


    /* -----------------------------------------------------
       CLIENTS
       ----------------------------------------------------- */

    .client-grid {
        gap: 8px;
    }

    .client-card {
        padding: 16px 9px;
    }

    .client-card h3 {
        font-size: 0.98rem;
    }

    .client-card p {
        font-size: 0.78rem;
    }


    /* -----------------------------------------------------
       CTA
       ----------------------------------------------------- */

    .cta-content {
        width: calc(100% - 24px);

        padding: 32px 17px;

        overflow: visible;
    }

    .cta-actions {
        overflow: visible;
    }

    .cta-content h2 {
        font-size: 1.9rem;
    }


    /* -----------------------------------------------------
       CALL DROPDOWN
       ----------------------------------------------------- */

    .call-dropdown {
        width: 100%;

        top: calc(100% + 8px);

        /*
           Keep the dropdown itself non-scrollable.
        */

        max-height: none;

        overflow: visible;
    }

    .call-dropdown-list {
        /*
           Slightly smaller on very small screens.
        */

        max-height: 42vh;

        overflow-y: auto;
        overflow-x: hidden;

        -webkit-overflow-scrolling: touch;

        touch-action: pan-y;

        overscroll-behavior-y: contain;

        scrollbar-gutter: stable;
    }

    .call-number-item {
        padding: 14px 15px;

        min-height: 52px;
    }


    /* -----------------------------------------------------
       CONTACT
       ----------------------------------------------------- */

    .contact-info {
        padding: 25px 17px;
    }

    .contact-intro h3 {
        font-size: 1.45rem;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .footer {
        padding-top: 42px;
    }

}


/* =========================================================
   6. VERY SMALL DEVICES
   Up to 360px
   ========================================================= */

@media (max-width: 360px) {

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

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


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero h1 {
        font-size: 2.05rem;
    }

    .hero-text {
        font-size: 0.88rem;
    }

    .hero-trust strong {
        font-size: 0.72rem;
    }

    .hero-trust span {
        font-size: 0.62rem;
    }


    /* -----------------------------------------------------
       STATS
       ----------------------------------------------------- */

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .stats-grid .stat-card:last-child {
        grid-column: 1 / -1;

        max-width: 50%;

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


    /* -----------------------------------------------------
       CLIENTS
       ----------------------------------------------------- */

    .client-grid {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       SECTION TITLES
       ----------------------------------------------------- */

    .section-heading h2,
    .why-copy h2 {
        font-size: 1.8rem;
    }


    /* -----------------------------------------------------
       CTA
       ----------------------------------------------------- */

    .cta-content h2 {
        font-size: 1.7rem;
    }


    /* -----------------------------------------------------
       CALL DROPDOWN
       ----------------------------------------------------- */

    .call-dropdown-list {
        /*
           On very small phones, don't allow the list
           to consume too much of the screen.
        */

        max-height: 40vh;
    }

}


/* =========================================================
   7. LANDSCAPE MOBILE
   ========================================================= */

@media (max-width: 767px) and (orientation: landscape) {

    .hero {
        padding-top: 65px;
        padding-bottom: 40px;
    }

    .hero-grid {
        gap: 30px;
    }

    .hero h1 {
        font-size: 2.6rem;
    }

    .hero-actions {
        max-width: 500px;

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

    .hero-visual {
        max-width: 600px;
    }


    /*
       In landscape mode there is less vertical space,
       so make the phone list smaller.
    */

    .call-dropdown-list {
        max-height: 55vh;
    }

}


/* =========================================================
   8. TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    /*
       Prevent hover animations from causing layout
       movement on phones and tablets.
    */

    .service-card:hover,
    .feature-card:hover,
    .stat-card:hover,
    .client-card:hover,
    .step:hover {
        transform: none;
    }


    /*
       Comfortable touch targets.
    */

    .nav-toggle,
    .nav-menu a,
    .btn,
    button,
    .faq-question {
        min-height: 44px;
    }


    /*
       Improve touch scrolling specifically for
       the phone-number list.
    */

    .call-dropdown-list {
        -webkit-overflow-scrolling: touch;

        touch-action: pan-y;

        overscroll-behavior-y: contain;
    }

}


/* =========================================================
   9. ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}


/* =========================================================
   10. PRINT
   ========================================================= */

@media print {

    .header,
    .nav-menu,
    .nav-toggle,
    .hero-actions,
    .floating-contact,
    .scroll-top,
    .cta-section,
    .contact-actions,
    .socials {
        display: none !important;
    }

    body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    section {
        break-inside: avoid;
    }

    .newspaper-card {
        transform: none !important;
        box-shadow: none !important;
    }

}