/* ==========================================================================
   PHONES  (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* Hero photo: drop the forced viewport height so it sizes by its 4:5 ratio.
       (Needs !important because the original rule in index.css uses one.) */
    .hero-photo {
        height: auto !important;
    }

    /* Service cards: stack and centre. */
    .card-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    /* CTA panel: full width with lighter padding. */
    .cta-wrapper {
        width: auto;
        padding: 24px;
    }
}