/*==========================================
            RESPONSIVE.CSS
==========================================*/

@media screen and (max-width: 1120px) {
    .nav-menu {
        gap: 24px;
    }

    .btn-header {
        padding-inline: 18px;
    }

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

@media screen and (max-width: 991px) {
    html {
        scroll-padding-top: 82px;
    }

    .navbar {
        min-height: 78px;
    }

    .btn-header {
        display: none;
    }

    .menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1001;
        font-size: 20px;
    }

    .nav-menu {
        position: fixed;
        top: 78px;
        left: 0;
        width: 100%;
        max-height: calc(100vh - 78px);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--white);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-soft);
        padding: 12px 4%;
        transform: translateY(-120%);
        opacity: 0;
        pointer-events: none;
        overflow-y: auto;
        transition: transform var(--transition), opacity var(--transition);
        z-index: 998;
    }

    .nav-menu.show-menu {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .nav-menu li a {
        display: block;
        padding: 17px 8px;
        border-bottom: 1px solid var(--line);
        font-size: 16px;
    }

    .nav-menu li a.active::after {
        display: none;
    }

    .nav-cta-mobile {
        display: block;
    }

    .nav-cta-mobile a {
        margin-top: 12px;
        color: var(--white) !important;
        background: var(--primary);
        border-radius: var(--radius);
        text-align: center;
        border-bottom: 0 !important;
    }

    .hero {
        padding-top: 118px;
    }

    .hero-container,
    .about-grid,
    .contact-grid,
    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .models-grid {
        grid-template-columns: 1fr;
        max-width: 720px;
        margin: 0 auto;
    }

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

    .hero-content p,
    .hero-proof {
        margin-left: auto;
        margin-right: auto;
    }

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

    .hero-visual {
        max-width: 680px;
        margin: 0 auto;
    }

    .trust-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }

    .public-reviews-list,
    .community-pages-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tool-panel {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .tool-panel[data-tool-panel="booking"] .compact-form {
        grid-column: auto;
    }

    .before-after {
        grid-column: auto;
    }

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

    .testimonial-copy {
        text-align: center;
    }

    .footer-grid,
    .footer-bottom {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .footer-links {
        justify-content: flex-start;
    }

    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-summary {
        position: static;
    }
}

@media screen and (max-width: 768px) {
    .section {
        padding: 72px 0;
    }

    .section-heading h2,
    .about-content h2,
    .testimonial-copy h2,
    .contact-content h2 {
        font-size: 34px;
    }

    .hero-content h1 {
        font-size: 42px;
        line-height: 1.08;
    }

    .hero-content p,
    .section-heading p,
    .about-content p,
    .contact-content p {
        font-size: 16px;
    }

    .hero-proof,
    .trust-grid,
    .services-grid,
    .process-grid,
    .portfolio-grid,
    .public-reviews-list,
    .community-pages-grid {
        grid-template-columns: 1fr;
    }

    .community-reviews-head,
    .publish-form-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .empty-showcase {
        grid-template-columns: 1fr;
    }

    .publish-access {
        grid-template-columns: 44px 1fr;
    }

    .publish-access a {
        grid-column: 1 / -1;
        justify-content: center;
        min-height: 42px;
        border: 1px solid #b8c7ff;
        border-radius: var(--radius);
    }

    .tool-tabs {
        grid-template-columns: repeat(5, minmax(58px, 1fr));
        overflow-x: auto;
    }

    .tool-tab {
        padding: 8px;
    }

    .tool-tab span {
        display: none;
    }

    .tool-panel {
        padding: 26px;
    }

    .process-facts {
        grid-template-columns: 1fr;
    }

    .result-card {
        left: 16px;
        bottom: 16px;
    }

    .footer-bottom {
        display: grid;
    }

    .legal-hero {
        padding: 64px 0;
    }

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

    .legal-hero-grid > i {
        display: none;
    }

    .legal-hero h1 {
        font-size: 48px;
    }

    .legal-promises {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 576px) {
    .container {
        width: 90%;
    }

    .logo span {
        font-size: 16px;
    }

    .brand-area {
        gap: 9px;
    }

    .nav-profile {
        padding-left: 9px;
    }

    .nav-profile-copy {
        display: none;
    }

    .logo img,
    .footer-logo img {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .hero {
        padding-top: 108px;
        padding-bottom: 44px;
    }

    .hero-content h1 {
        font-size: 35px;
    }

    .eyebrow,
    .section-kicker {
        font-size: 12px;
    }

    .hero-buttons {
        width: 100%;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        padding-inline: 18px;
    }

    .hero-proof div {
        padding: 11px 6px;
        text-align: center;
    }

    .hero-proof {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .hero-proof strong {
        font-size: 16px;
    }

    .hero-proof span {
        font-size: 11px;
        line-height: 1.35;
    }

    .project-preview {
        min-height: 176px;
    }

    .project-preview-real img {
        min-height: 176px;
    }

    .about-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 18px 8px;
    }

    .model-card {
        padding: 24px;
    }

    .model-heading {
        align-items: flex-start;
    }

    .model-heading h3 {
        font-size: 22px;
    }

    .testimonial-card,
    .contact-form {
        padding: 22px;
    }

    .terms-consent {
        padding: 14px;
    }

    .terms-consent-dialog {
        max-height: calc(100vh - 28px);
        padding: 24px;
    }

    .terms-consent-dialog h2 {
        font-size: 25px;
    }

    .consent-actions {
        flex-direction: column;
    }

    .consent-actions .btn-primary,
    .consent-actions .btn-secondary {
        width: 100%;
    }

    .floating-cta {
        width: 50px;
        height: 50px;
    }

    .floating-actions {
        right: 18px;
        bottom: 18px;
    }

    .portfolio-filters {
        align-items: stretch;
    }

    .portfolio-filters label,
    .portfolio-filters select,
    .portfolio-filters > span {
        width: 100%;
    }

    .compact-form {
        grid-template-columns: 1fr;
    }

    .community-reviews,
    .publish-form {
        padding: 21px;
    }

    .community-stats {
        align-items: stretch;
        flex-direction: column;
    }

    .community-stats span {
        justify-content: center;
    }

    .community-reviews-head h3 {
        font-size: 22px;
    }

    .community-empty-pages {
        padding: 18px;
    }

    .publish-fields {
        grid-template-columns: 1fr;
    }

    .publish-description {
        grid-column: auto;
    }

    .publish-form .btn-primary {
        justify-self: stretch;
    }

    .tool-copy h3 {
        font-size: 23px;
    }

    .before-after {
        min-height: 270px;
    }

    .new-site {
        min-width: 430px;
    }

    .legal-nav .container {
        min-height: 74px;
    }

    .legal-back {
        width: auto;
        min-height: 42px;
        padding: 9px 12px;
        font-size: 13px;
    }

    .legal-hero h1 {
        font-size: 38px;
    }

    .legal-hero p {
        font-size: 15px;
    }

    .term-item,
    .legal-promises article {
        grid-template-columns: 1fr;
        padding: 20px;
    }
}

@media screen and (max-width: 400px) {
    .hero-content h1 {
        font-size: 31px;
    }

    .section-heading h2,
    .about-content h2,
    .testimonial-copy h2,
    .contact-content h2 {
        font-size: 29px;
    }
}