/* ═══════════════════════════════════════════════════
   grid.css – Reset, Layout, Grids, Responsive, Print
   ═══════════════════════════════════════════════════ */

/* ─── 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; }
.services__grid--two { grid-template-columns: repeat(2, 1fr); }
.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; }

/* ─── TABLET ─── */
@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; }
}

/* ─── MOBILE ─── */
@media (max-width: 700px) {
    .services__grid,
    .services__grid--two,
    .blog__grid        { grid-template-columns: 1fr; }
    .hero              { min-height: auto; padding: 6rem 0 3rem; }
    .hero__title       { font-size: clamp(1.7rem, 6vw, 2.2rem); }
    .hero__deco        { display: none; }
    .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; }
}