/* ============================================
   ABOUT PAGE — loaded only on page-about.php
   Section shells (.svc-section, .svc-bg-*, cards,
   CTA) come from style.css; this file only adds
   the text + image split and steps intro.
   ============================================ */

.about-media__grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 64px;
    align-items: center;
}

.about-media__grid--solo { grid-template-columns: 1fr; }
.about-media__grid--solo .about-media__text { max-width: 760px; }

.about-media--flip .about-media__img { order: -1; }

.about-media__img {
    margin: 0;
}

.about-media__img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
}

.svc-bg-light .about-media__img img {
    box-shadow: 0 18px 40px rgba(29, 35, 51, .18);
}

.about-media .svc-heading { margin-bottom: 20px; }

.about-steps__intro {
    max-width: 680px;
    margin-bottom: 48px;
}

.about-steps .svc-cards {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1200px) {
    .about-media__grid { gap: 44px; }
}

@media (max-width: 768px) {
    .about-media__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* text first on mobile regardless of desktop side */
    .about-media--flip .about-media__img { order: 0; }

    .about-steps__intro { margin-bottom: 32px; }

    .about-steps .svc-cards { grid-template-columns: 1fr; }
}

/* ── PHONE CTA ─────────────────────────────── */
.about-form-cta .contact-container {
    display: block;
    max-width: 720px;
    text-align: center;
}

.about-form-cta .contact-body {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 36px;
}

.about-form-cta .contact-phone-btn {
    margin: 0 auto;
    gap: 12px;
    font-size: 24px;
    padding: 20px 40px;
}

.about-form-cta .contact-phone-btn svg {
    width: 26px !important;
    height: 26px !important;
}

@media (max-width: 480px) {
    .about-form-cta .contact-phone-btn {
        font-size: 20px;
        padding: 16px 28px;
    }
}

/* room under the fixed header when the section is used as an anchor target */
#contact,
#cta {
    scroll-margin-top: 110px;
}