/* ==========================================================================
   Responsive — Verifides
   Breakpoints: mobile ≤767px | tablet ≤1023px | fluid ≤1399px
   ========================================================================== */

/* Fluid layout (below desktop canvas) */
@media (min-width: 1400px) {
    :root {
        --section-width: 134rem;
    }
}
@media (max-width: 1399px) {
    :root {
        --section-width: 100%;
    }

    body {
        overflow-x: hidden;
    }
}

/* Tablet */
@media (max-width: 1023px) {
    html {
        font-size: 58.25%;
    }

    h1 {
        font-size: 6.4rem;
    }

    h2 {
        font-size: 4.8rem;
    }

    h3 {
        font-size: 4rem;
    }

    h4 {
        font-size: 2.8rem;
    }

    h5 {
        font-size: 2.4rem;
    }

    p,
    .btn {
        font-size: 1.8rem;
    }

    .top-bar__inner,
    .main-header__inner,
    .hero__inner,
    .fail-section__inner,
    .grow-section__inner,
    .solutions-section__inner,
    .conversation-section__inner,
    .book-call__inner,
    .trusted-brands__inner,
    .site-footer__inner {
        padding-left: 3.2rem;
        padding-right: 3.2rem;
    }

    /* Header */
    .main-header__inner {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "left logo"
            "right right";
        row-gap: 2rem;
    }

    .main-header__left {
        grid-area: left;
    }

    .main-header__center {
        grid-area: logo;
        justify-self: end;
    }

    .main-header__right {
        grid-area: right;
        justify-self: stretch;
        justify-content: center;
        flex-wrap: wrap;
    }

    .main-header__logo img {
        width: 13rem;
    }

    /* Hero */
    .hero__inner {
        min-height: 60rem;
        padding-top: 6rem;
        padding-bottom: 8rem;
    }

    .hero__inner h1 {
        max-width: 100%;
    }

    .hero__actions {
        margin-top: 4rem;
    }

    .hero-icon-btn {
        width: 11.2rem;
        height: 11.2rem;
        padding: 1.6rem;
    }

    .grow-card__hover-text {
        visibility: visible;
        opacity: 1;
    }

    /* Fail */
    .fail-section__inner {
        grid-template-columns: 1fr !important;
        gap: 4rem;
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    /* Grow */
    .grow-section__inner {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .grow-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.4rem;
    }

    .grow-section__cards {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 4rem;
    }

    .grow-card {
        border-radius: 3.2rem;
        padding: 4rem 2.4rem 3.6rem;
    }

    .construction .grow-section__inner {
        border-radius: 3.2rem;
        padding: 4.8rem 3.2rem 5.6rem;
        background-color: var(--blue);
    }

    .construction .grow-card {
        background-color: var(--green);
        height: auto;
    }

    .construction .grow-card h4 {
        color: var(--white);
        margin-top: 4rem;
    }

    .construction .grow-card__icon {
        background-color: var(--white);
        color: var(--blue);
    }

    .construction .grow-card__hover-text {
        max-height: 12rem;
        margin-top: 1.6rem;
        opacity: 1;
        visibility: visible;
        color: rgba(255, 255, 255, 0.85);
    }

    .construction .testimonials-section__inner {
        padding: 6rem 3.2rem 5.6rem;
    }

    .construction .testimonial-card {
        flex: 0 0 calc((100% - 2.4rem) / 1.12);
        min-height: 34rem;
    }

    .construction .results-videos-section__inner {
        padding: 6rem 3.2rem 5.6rem;
    }

    .construction .video-slide {
        flex: 0 0 calc((100% - 2.4rem) / 1.12);
    }

    /* Solutions */
    .solutions-section__inner {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .solutions-section__watermark--top {
        width: 36rem;
        height: 36rem;
    }

    .solutions-section__watermark--bottom {
        width: 32rem;
        height: 32rem;
    }

    .solutions-section__grid {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 4rem;
    }

    .solutions-section__stripe {
        max-width: 32rem;
    }

    /* Conversation */
    .conversation-section {
        margin-top: 6rem;
    }

    .conversation-section__inner {
        padding-top: 6rem;
        padding-bottom: 8rem;
    }

    .conversation-form__textarea {
        min-height: 24rem;
        padding-bottom: 9rem;
        font-size: 1.8rem;
    }

    /* Book a call */
    .book-call__inner {
        padding-top: 6rem;
        padding-bottom: 8rem;
    }

    .book-call__panel {
        padding: 4rem 3.2rem 3.6rem;
        border-radius: 3.2rem;
    }

    .book-call__grid {
        grid-template-columns: 1fr;
        margin-top: 3.2rem;
    }

    .book-form,
    .book-calendar {
        min-height: auto;
    }

    .book-calendar__weekdays,
    .book-calendar__days {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .book-calendar__weekdays span,
    .book-calendar__day {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        font-size: 1.4rem;
    }

    .book-popup {
        padding: 1.6rem;
    }

    .book-popup__dialog {
        border-radius: 2.4rem;
    }

    .book-popup__progress-wrap {
        padding: 2rem 2.4rem 0;
    }

    .book-popup__close {
        top: 4.8rem;
        right: 2rem;
    }

    .book-popup__steps {
        padding: 3.2rem 2.4rem 0;
    }

    .book-popup__step-title {
        font-size: 3.2rem;
    }

    .book-popup__options {
        gap: 1.2rem;
        margin-top: 3.2rem;
    }

    .book-popup__option {
        min-width: 100%;
        font-size: 1.6rem;
        padding: 1.6rem 2rem;
    }

    .book-popup__composer {
        flex-direction: column;
        align-items: stretch;
        padding: 1.2rem;
        border-radius: 2rem;
        margin-top: 3.2rem;
    }

    .book-popup__composer-input {
        padding: 1.2rem 1.6rem;
        font-size: 1.6rem;
        text-align: center;
    }

    .book-popup__composer-btn {
        width: 100%;
        font-size: 1.6rem;
    }

    .book-popup__dialog--final {
        max-width: 100%;
    }

    .book-popup__final {
        grid-template-columns: 1fr;
        gap: 3.2rem;
    }

    .book-popup__final-title {
        font-size: 3.2rem;
    }

    .book-popup__final-lead {
        font-size: 1.8rem;
    }

    .book-popup__calendar-card {
        padding: 2.4rem 2rem 2rem;
    }

    .book-popup__skip {
        margin-top: 2.4rem;
    }

    /* Trusted brands */
    .trusted-brands__inner {
        padding-top: 8rem;
    }

    .trusted-brands__sliders {
        padding-top: 5.6rem;
        padding-bottom: 8rem;
    }

    .brands-marquee__item {
        height: 4.8rem;
        padding: 0 3.2rem;
    }

    .brands-marquee__item img {
        max-width: 14rem;
    }

    /* Footer */
    .site-footer__main {
        min-height: 40rem;
        padding-top: 8rem;
        padding-bottom: 6rem;
    }

    .site-footer__watermark {
        width: 40rem;
        height: 28rem;
        top: 2rem;
        right: -4rem;
    }

    .site-footer__logo img {
        width: 16rem;
    }
}

/* Mobile */
@media (max-width: 767px) {
    html {
        font-size: 50%;
    }

    h1 {
        font-size: 5.2rem;
        line-height: 1.12;
    }

    h2 {
        font-size: 4rem;
    }

    h3 {
        font-size: 3.2rem;
    }

    h4 {
        font-size: 2.4rem;
    }

    h5 {
        font-size: 2.2rem;
    }
    p {
        line-height: 1.4;
    }
    p,
    .btn {
        font-size: 2rem;
    }

    .btn {
        padding: 1.2rem 1.4rem;
        gap: 0.8rem;
    }

    .btn__icon {
        width: 3.6rem;
        height: 3.6rem;
    }

    .top-bar__inner,
    .main-header__inner,
    .hero__inner,
    .fail-section__inner,
    .grow-section__inner,
    .solutions-section__inner,
    .conversation-section__inner,
    .book-call__inner,
    .trusted-brands__inner,
    .site-footer__inner {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Header */
    .top-bar__inner {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .main-header__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1.6rem;
        padding-top: 1.6rem;
        padding-bottom: 1.6rem;
    }

    .main-header__left {
        justify-content: center;
        flex-wrap: wrap;
    }

    .header-badge {
        font-size: 2rem;
        white-space: normal;
        text-align: center;
    }

    .main-header__center {
        order: -1;
        align-self: center;
    }

    .main-header__logo img {
        width: 12rem;
    }

    .main-header__right {
        flex-direction: row;
        width: 100%;
        gap: 1.2rem;
    }

    .main-header__right .btn {
        width: auto;
        justify-content: space-between;
        padding: 1.2rem 1.4rem 1.2rem 2rem;
    }

    /* Hero */
    .hero__inner {
        min-height: auto;
        padding-top: 5.6rem;
        padding-bottom: 6.4rem;
    }

    .hero__inner p {
        margin-top: 1.6rem;
    }

    .hero__actions {
        flex-direction: row;
        width: 100%;
        max-width: 28rem;
        margin-top: 3.2rem;
        gap: 1.6rem;
    }

    .hero-icon-btn {
        width: 100%;
        max-width: 13.6rem;
        height: 13.6rem;
    }

    /* Fail */
    .fail-section__inner {
        gap: 3.2rem;
        padding-top: 5.6rem;
        padding-bottom: 5.6rem;
    }

    .fail-section__media img {
        border-radius: 1.6rem;
    }

    .construction .fail-section__list {
        margin-top: 2rem;
        gap: 2rem;
    }

    .construction .fail-section__text {
        font-size: 1.8rem;
    }

    /* Grow */
    .grow-section__inner {
        padding-top: 5.6rem;
        padding-bottom: 5.6rem;
    }

    .grow-section__cards {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .grow-card {
        border-radius: 2.4rem;
        padding: 3.2rem 2rem 3rem;
    }

    .grow-card__icon {
        width: 7.2rem;
        height: 7.2rem;
    }

    .grow-card h4 {
        margin-top: 2.4rem;
    }

    .grow-card p {
        max-width: 100%;
    }

    .construction .grow-section__inner {
        border-radius: 2.4rem;
        padding: 4rem 2rem 4.8rem;
    }

    .construction .grow-section__cta {
        font-size: 1.8rem;
    }

    .construction .grow-card {
        border-radius: 2.4rem;
        padding: 3.2rem 2rem 3rem;
    }

    .construction .grow-card__hover-text {
        max-width: 100%;
        max-height: none;
    }

    .construction .testimonials-section__inner {
        padding: 5.6rem 2rem 4.8rem;
    }

    .construction .testimonial-card {
        flex: 0 0 100%;
        min-height: 32rem;
        padding: 3.2rem 2.4rem;
    }

    .construction .testimonial-card__text {
        font-size: 1.8rem;
    }

    .construction .testimonial-card__label {
        font-size: 1.6rem;
    }

    .construction .results-videos-section__inner {
        padding: 5.6rem 2rem 4.8rem;
    }

    .construction .video-slide {
        flex: 0 0 100%;
    }

    .btn--work {
        width: auto;
        justify-content: space-between;
    }

    /* Solutions */
    .solutions-section__inner {
        padding-top: 5.6rem;
        padding-bottom: 5.6rem;
    }

    .solutions-section__watermark--top {
        width: 28rem;
        height: 28rem;
        opacity: 0.08;
    }

    .solutions-section__watermark--bottom {
        width: 24rem;
        height: 24rem;
        opacity: 0.08;
    }

    .solutions-section__grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .solution-card {
        padding: 3.2rem 2rem 2.8rem;
        border-radius: 1.6rem;
    }

    .solution-card p {
        max-width: 100%;
    }

    .solutions-section__stripe {
        max-width: 100%;
    }

    /* Conversation */
    .conversation-section {
        margin-top: 4rem;
    }

    .conversation-section__inner {
        padding-top: 5.6rem;
        padding-bottom: 6.4rem;
    }

    .conversation-section__inner > p {
        margin-top: 1.6rem;
    }

    .conversation-form {
        display: flex;
        flex-direction: column;
        margin-top: 3.2rem;
    }

    .conversation-form__textarea {
        min-height: 20rem;
        padding: 2rem;
        padding-bottom: 2rem;
        border-radius: 1.6rem;
        font-size: 2rem;
    }

    .btn--send {
        position: static;
        display: flex;
        width: 100%;
        margin-top: 1.6rem;
        justify-content: center;
        padding: 1.4rem 2rem;
        border: 0;
    }

    /* Book a call */
    .book-call__inner {
        padding-top: 5.6rem;
        padding-bottom: 6.4rem;
    }

    .book-call__panel {
        padding: 2.4rem 2rem 2rem;
        border-radius: 2.4rem;
    }

    .book-call__grid {
        gap: 1.6rem;
    }

    .book-call__card {
        padding: 2.4rem 2rem;
        border-radius: 1.6rem;
    }

    .book-form__row {
        grid-template-columns: 1fr;
    }
    .book-form__field, .book-form__field--textarea {
        font-size: 2rem;
    }

    .book-form__field--textarea {
        min-height: 14rem;
    }

    .book-calendar {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        column-gap: 0;
        row-gap: 2rem;
    }

    .book-calendar__months {
        display: none;
    }

    .book-calendar__picker {
        grid-column: 1;
        grid-row: 1;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .book-calendar__weekdays,
    .book-calendar__days {
        min-width: 28rem;
    }

    .book-calendar__actions {
        grid-column: 1;
        justify-content: stretch;
        gap: 1rem;
    }

    .book-calendar__btn {
        flex: 1;
        text-align: center;
    }

    /* Trusted brands */
    .trusted-brands__inner {
        padding-top: 5.6rem;
    }

    .trusted-brands__inner p {
        margin-top: 1.6rem;
    }

    .trusted-brands__sliders {
        gap: 2.4rem;
        padding-top: 4rem;
        padding-bottom: 5.6rem;
    }

    .brands-marquee__item {
        height: 6rem;
        padding: 0 2.4rem;
    }

    .brands-marquee__item img {
        max-width: 20rem;
    }

    .brands-marquee--logos2 .brands-marquee__track {
        animation-duration: 36s;
    }

    .brands-marquee--logos .brands-marquee__track {
        animation-duration: 32s;
    }

    /* Footer */
    .site-footer__main {
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
        gap: 4rem;
        padding-top: 5.6rem;
        padding-bottom: 4rem;
    }

    .site-footer__tagline {
        align-self: stretch;
    }

    .site-footer__stripe {
        max-width: 100%;
        margin-top: 2rem;
    }

    .site-footer__logo {
        align-self: flex-end;
    }

    .site-footer__logo img {
        width: 14rem;
    }

    .site-footer__watermark {
        width: 100%;
        max-width: 32rem;
        height: 24rem;
        top: 0;
        right: 50%;
        transform: translateX(50%);
        background-position: top center;
        opacity: 0.1;
    }

    .site-footer__bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
        padding-bottom: 2.4rem;
    }

    .site-footer__links {
        gap: 2.4rem;
    }
    .site-footer__links a, .site-footer__copy {
        font-size: 1.6rem;
    }
}

/* Small mobile */
@media (max-width: 389px) {
    html {
        font-size: 46.875%;
    }

    .main-header__right .btn__label {
        font-size: 2rem;
    }

    .book-calendar__weekdays,
    .book-calendar__days {
        min-width: 26rem;
    }
}
