:root {
    --primary: #2D6A4F;
    --primary-deep: #1B4A36;
    --primary-tint: #C8DDD0;
    --primary-translucent: #2D6A4FBB;
    --ink: #14130F;
    --ink-2: #2A2924;
    --ink-3: #5A584F;
    --ink-4: #8C8A81;
    --background: #FAF9F6;
    --background-soft: #F3F1EB;
    --background-card: #FFFFFF;
    --trim: #E6E3DA;
    --trim-soft: #EFECE3;
    --max-width: 1200px;
}

/* Navbar Styles */

@media (max-width: 767px) {
    header ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    header ul a::after {
        display: none;
    }

    header .right {
        margin-top: 20px;
    }

    header .nav {
        display: block;
        position: absolute;
        top: 100%;
        left: 0px;
        right: 0px;
        background: var(--background);
        padding: 20px;
        border-top: 1px solid var(--trim);
        border-bottom: 1px solid var(--trim);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: 0.2s;
    }

    .nav-toggle {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-toggle[aria-expanded="true"] ~ .nav {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

@media (max-width: 767px) {

    /* #region General Styles */

    section {
        padding: 28px 0px;
        animation: none !important;
    }

    .btn {
        justify-content: center;
        width: 100% !important;
    }

    /* #endregion */

    /* #region Header Styles */

    header .nav .btn {
        height: 44px;
        font-size: 14.5px;
        background: var(--primary);
        padding: 0px 18px;
    }

    /* #endregion */

    /* #region Footer Styles */
    footer {
        padding: 24px 0px;
    }

        footer .row {
            justify-content: center;
            gap: 12px;
        }

            footer .row * {
                padding: 0px;
            }


    /* #endregion */

    /* #region Homepage Styles */

    .hero {
        padding: 20px 0px 36px;
    }

        .hero::before {
            display: none;
        }

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

        .hero-grid .cta-list {
            flex-direction: column;
        }

        .hero-grid .stats {
            margin-top: 28px;
        }

        .hero-grid h1.small {
            font-size: clamp(48px,5vw,58px);
        }

    .section-head {
        grid-template-columns: 1fr;
        gap: 0px;
        margin-bottom: 28px;
    }

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

    .process .steps {
        grid-template-columns: 1fr;
        border: 0px;
    }

        .process .step {
            padding: 12px 24px 24px 14px;
            border-top: 1px solid var(--trim);
        }

    .pricing .tiers {
        grid-template-columns: 1fr;
    }

    .contact {
        padding: 28px 0px 28px;
    }

        .contact .contact-card {
            grid-template-columns: 1fr;
            gap: 28px;
            padding: 36px 32px;
        }

    /* #endregion */

    /* #region Content Item/List Styles */

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

    .content-item-head {
        padding-bottom: 28px !important;
    }

        .content-item-head .return-link {
            margin: 0px 0px 18px 0px;
        }

    /* #endregion */

    /* #region Booking Page Styles */

    .form .field {
        margin-bottom: 8px;
    }

        .form .field textarea {
            min-height: 116px;
        }

    .form .mobile-full {
        width: 100% !important;
    }

    .form hr {
        margin: 6px 0px 12px;
    }

    /* #endregion */

    /* #region Pricing Page Styles */

    .pricing-selectors {
        padding: 0px;
    }

        .pricing-selectors .tabs {
            grid-template-columns: 1fr;
        }

        .pricing-selectors .tab.selected {
            transform: translateY(0px);
        }

            .pricing-selectors .tab.selected::after {
                display: none;
            }

        .pricing-details .panel {
            grid-template-columns: 1fr;
        }

            .pricing-details .panel .left {
                gap: 12px;
            }

            .pricing-details .panel .feature-list {
                gap: 2px 20px;
            }

                .pricing-details .panel .also-includes li {
                    width: 100%;
                }

                .pricing-details .panel .right .eyebrow:last-of-type {
                    margin-bottom: 0px !important;
                }

    /* #endregion */
}