/* Contact page mobile refinements.
   Loaded last. Targets the elongation: a 2948px page where the form sat 1250px
   down, behind a 727px info panel, followed by a 919px footer.

   Strategy: put the form first (it's why people come), compact the info panel
   into a scannable row of tap targets, and stop the footer from restating the
   same address/phone/email three times in one column. */

@media (max-width: 992px) {

    /* ------------------------------------------------------------- hero -- */
    .contact-hero {
        padding: 44px 0 !important;
    }

    .contact-hero h1 {
        font-size: 1.85rem !important;
        margin-bottom: 10px !important;
    }

    .contact-hero p {
        font-size: 0.98rem !important;
        line-height: 1.5 !important;
    }

    .contact-section {
        padding: 28px 0 !important;
    }

    /* --------------------------------------------------- order + chrome --
       Form above the contact details. The grid is already 1fr here. */
    .contact-grid {
        gap: 18px !important;
    }

    .contact-form-wrapper {
        order: 1 !important;
    }

    .contact-info {
        order: 2 !important;
    }

    /* Reclaim horizontal space. The chain was 390 -> 359 -> 319 -> 262 because
       .container adds ~15.6px auto margins AND 20px padding before the card's
       own inset. Collapse the container gutter so inputs get real width. */
    .contact-section .container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }

    .contact-form-wrapper,
    .contact-info {
        padding: 20px 16px !important;
        border-radius: 8px !important;
    }

    .contact-form-wrapper h2,
    .contact-info h2 {
        font-size: 1.3rem !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
    }

    .contact-form-intro,
    .contact-form-wrapper p.contact-form-intro {
        font-size: 0.9rem !important;
        margin-bottom: 16px !important;
    }

    /* ------------------------------------------------------------- form -- */
    .contact-form {
        gap: 14px !important;
    }

    .form-group {
        margin-bottom: 0 !important;
    }

    .form-group label {
        font-size: 0.85rem !important;
        margin-bottom: 5px !important;
        display: block !important;
    }

    /* 16px minimum keeps iOS Safari from zooming the viewport on focus */
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        font-size: 16px !important;
        padding: 11px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .contact-form textarea {
        min-height: 96px !important;
    }

    .wizard-progress {
        margin-bottom: 16px !important;
    }

    .wizard-progress__label {
        font-size: 0.7rem !important;
    }

    .wizard-nav {
        margin-top: 16px !important;
        gap: 10px !important;
    }

    .wizard-btn {
        padding: 13px 20px !important;
        min-height: 46px !important;
    }

    /* ------------------------------------------------- contact details --
       Turn the stacked list into compact tappable rows. */
    .contact-detail {
        margin-bottom: 14px !important;
        align-items: flex-start !important;
    }

    .contact-icon {
        margin-right: 10px !important;
        flex: 0 0 auto !important;
    }

    .contact-text h3 {
        font-size: 0.92rem !important;
        margin-bottom: 2px !important;
    }

    .contact-text p,
    .contact-text a {
        font-size: 0.92rem !important;
        line-height: 1.45 !important;
    }

    .contact-info h3 {
        font-size: 0.92rem !important;
        margin-bottom: 4px !important;
    }

    .contact-info p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 2px !important;
    }

    /* The office address already appears twice in the footer ("Our Office"
       and the credentials line). Dropping the third copy here removes a
       whole block without losing information. */
    .contact-info .contact-detail:nth-of-type(3) {
        display: none !important;
    }

    .contact-social {
        margin-top: 16px !important;
    }

    .contact-social h3 {
        margin-bottom: 8px !important;
    }

    /* These SVGs are white artwork drawn for the dark footer, and
       social-icons-override.css also forces a white border. On the light
       #f8f8f8 panel that rendered as blank white circles. Fill the disc with
       brand navy so the white glyph reads, matching the footer treatment. */
    .contact-social-icons {
        gap: 12px !important;
        flex-wrap: wrap !important;
    }

    .contact-social-icons .social-logo {
        width: 36px !important;
        height: 36px !important;
        background-color: var(--primary-color, #1c3f60) !important;
        border: 1px solid var(--primary-color, #1c3f60) !important;
        border-radius: 50% !important;
        padding: 6px !important;
        box-sizing: border-box !important;
        object-fit: contain !important;
    }

    /* ----------------------------------------------------------- footer --
       919px on mobile vs 392px on desktop, because all three columns
       centre-stack with full-size spacing. Tighten and pair them up. */
    footer {
        padding-top: 32px !important;
        padding-bottom: 16px !important;
    }

    /* Was a 1-column grid stacking 121 + 286 + 186px. Pair the two text
       columns side by side and let the logo/nav column span both. */
    .footer-container {
        display: grid !important;
        /* minmax(0,1fr) so long lines wrap inside the track instead of
           collapsing it — plain 1fr resolved to 53px here. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 18px 14px !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .footer-column {
        margin-bottom: 0 !important;
    }

    .footer-left {
        order: 1 !important;
        text-align: left !important;
    }

    .footer-center {
        order: 3 !important;
        grid-column: 1 / -1 !important;
    }

    /* Override footer-updates.css, which force-centres these on mobile */
    .footer-left .footer-address,
    .footer-left .footer-copyright,
    .footer-right .footer-contact,
    .footer-right .footer-contact p {
        text-align: left !important;
    }

    /* The 5 social icons overflowed the 156px column. Pull the row out to full
       width below the paired columns. */
    .footer-right {
        display: contents !important;
    }

    .footer-right .footer-contact {
        order: 2 !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .footer-right .footer-social {
        order: 4 !important;
        grid-column: 1 / -1 !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 14px !important;
        margin-top: 4px !important;
    }

    .footer-copyright {
        margin-top: 8px !important;
    }

    .footer-copyright p {
        font-size: 0.72rem !important;
        line-height: 1.4 !important;
    }

    /* footer-updates.css centres these underlines with left:50%/translateX,
       which collided with the now left-aligned headings. */
    .footer-address h3:after,
    .footer-contact h3:after {
        left: 0 !important;
        transform: none !important;
        margin-left: 0 !important;
    }

    /* Keep room for the :after underline, which is absolutely positioned at
       bottom:-12px — a 6px margin put it on top of the first address line. */
    .footer-address h3,
    .footer-contact h3 {
        font-size: 0.95rem !important;
        margin-bottom: 18px !important;
    }

    .footer-address p,
    .footer-contact p {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        margin-bottom: 2px !important;
    }

    .footer-logo img {
        max-width: 128px !important;
    }

    .footer-tagline {
        font-size: 0.72rem !important;
        margin-bottom: 4px !important;
    }

    /* Two links per row instead of one long ladder */
    .footer-nav {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2px 12px !important;
        padding-top: 12px !important;
        max-width: 300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .footer-nav a {
        padding: 7px 0 !important;
        font-size: 0.82rem !important;
        text-align: center !important;
    }

    .footer-social {
        gap: 12px !important;
        margin-top: 10px !important;
    }

    .footer-credentials {
        padding: 12px 5% !important;
    }

    .footer-credentials-inner {
        gap: 6px 14px !important;
        font-size: 0.72rem !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .contact-hero {
        padding: 36px 0 !important;
    }

    .contact-hero h1 {
        font-size: 1.65rem !important;
    }

    .contact-form-wrapper,
    .contact-info {
        padding: 18px 14px !important;
    }
}