/* ═══════════════════════════════════════════════════
   grid.css – Layout, Container, Grid, Responsive
   ═══════════════════════════════════════════════════ */

/* ─── RESET ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 17px; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { list-style: none; }

/* ─── UTILITY ─── */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
}

/* ─── SECTION SPACING ─── */
.section { padding: var(--section-gap) 0; }

/* ─── GRIDS ─── */
.about__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3.5rem;
    align-items: start;
}
.services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}
.approach__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}
.contact__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3.5rem;
}
.blog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 920px) {
    .about__grid,
    .contact__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .approach__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .nav__links {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--color-bg);
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0.5rem var(--content-padding) 0.6rem;
        gap: 0.15rem;
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    .nav__links.open { display: flex; }
    .nav__toggle { display: flex; }
    .nav__link {
        padding: 0.35rem 0.6rem;
        font-size: 0.78rem;
        width: auto;
    }
    .nav__cta {
        margin-left: auto;
        padding: 0.35rem 0.8rem;
        font-size: 0.78rem;
        width: auto;
        text-align: center;
    }

    .hero { min-height: auto; padding: 7rem 0 3rem; }
    .hero__title { font-size: clamp(1.9rem, 7vw, 2.4rem); }
    .hero__deco { display: none; }

    .services__grid { grid-template-columns: 1fr; }
    .blog__grid { grid-template-columns: 1fr; }
    .pricing__box { padding: 2rem; }
}

/* ─── PRINT ─── */
@media print {
    .nav, .hero__deco, .btn, .contact-form, .footer { display: none; }
    body { font-size: 11pt; color: #000; background: #fff; }
    .section { padding: 1.5rem 0; }
}