@media (max-width: 1100px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .advisory {
        grid-template-columns: 1fr;
    }

    .advisory__image {
        min-height: 560px;
    }

    .development-grid,
    .area-grid,
    .insights-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .area-card:last-child,
    .insight-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .home .site-header--overlay .primary-navigation {
        background: rgba(249, 247, 240, 0.98);
    }

    .home .site-header--overlay .primary-navigation a {
        color: var(--pf-navy);
    }

    .editorial-intro__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .section-heading--split,
    .private-enquiry__inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .hero__content {
        padding-top: 8rem;
        padding-bottom: 5rem;
    }

    .hero__title {
        font-size: clamp(3.35rem, 17vw, 5.3rem);
    }

    .hero__actions,
    .button {
        width: 100%;
    }

    .hero__scroll {
        display: none;
    }

    .stats-grid,
    .development-grid,
    .area-grid,
    .insights-grid {
        grid-template-columns: 1fr;
    }

    .area-card:last-child,
    .insight-card:last-child {
        grid-column: auto;
    }

    .stat {
        min-height: 190px;
    }

    .property-card__image {
        aspect-ratio: 5 / 6;
    }

    .advisory__image {
        min-height: 420px;
    }

    .advisory__content {
        padding: 3rem 1.5rem;
    }

    .area-card a {
        min-height: 460px;
    }
}

/* Phase 13 hero search responsiveness */
@media (max-width: 980px) {
    .hero-search { grid-template-columns: 1fr 1fr; }
    .hero-search__field { border-bottom: 1px solid rgba(255,255,255,.18); }
    .hero-search__field--wide { grid-column: 1 / -1; }
    .hero-search__submit { min-height: 64px; }
}

@media (max-width: 640px) {
    .home .hero.pf-custom-hero { min-height: 820px; }
    .home .hero.pf-custom-hero .hero__media { background-image: var(--pf-hero-mobile-image) !important; }
    .home .hero.pf-custom-hero .hero__content { padding-top: 8.25rem; padding-bottom: 3rem; }
    .home .hero.pf-custom-hero .hero__title { font-size: clamp(3rem, 14vw, 4.4rem); }
    .hero-search { grid-template-columns: 1fr; }
    .hero-search__field,
    .hero-search__field--wide { grid-column: auto; border-right: 0; }
    .hero-search__submit { width: 100%; }
}

/* Phase 13.2.1: WhatsApp brand colour lock.
 * Loaded last and intentionally specific so global luxury button/link colours
 * cannot override the official WhatsApp treatment. */
html body a.floating-whatsapp,
html body a.floating-whatsapp:link,
html body a.floating-whatsapp:visited {
    color: #ffffff !important;
    background-color: #25D366 !important;
    border-color: #25D366 !important;
    background-image: none !important;
}
html body a.floating-whatsapp:hover,
html body a.floating-whatsapp:focus,
html body a.floating-whatsapp:focus-visible,
html body a.floating-whatsapp:active {
    color: #ffffff !important;
    background-color: #128C7E !important;
    border-color: #128C7E !important;
}
html body a.floating-whatsapp .whatsapp-icon,
html body a.floating-whatsapp .whatsapp-icon path {
    color: #ffffff !important;
    fill: #ffffff !important;
}
html body a.button.button--whatsapp,
html body a.button.button--whatsapp:link,
html body a.button.button--whatsapp:visited {
    color: #ffffff !important;
    background-color: #25D366 !important;
    border-color: #25D366 !important;
    background-image: none !important;
}
html body a.button.button--whatsapp:hover,
html body a.button.button--whatsapp:focus,
html body a.button.button--whatsapp:focus-visible,
html body a.button.button--whatsapp:active {
    color: #ffffff !important;
    background-color: #128C7E !important;
    border-color: #128C7E !important;
}
html body a.button.button--whatsapp .whatsapp-icon,
html body a.button.button--whatsapp .whatsapp-icon path {
    color: #ffffff !important;
    fill: #ffffff !important;
}
