/* Responsive overrides for Chimney Professionals. Loaded after style.css. */

@media (max-width: 768px) {
    .section,
    .page-content { padding-block: var(--spacing-xl); }
}

@media (max-width: 480px) {
    :root { --container-pad: 16px; }
    .section,
    .page-content { padding-block: var(--spacing-lg); }
}

/* ==========================================================================
   SITE TOP BANNER
   ========================================================================== */
@media (max-width: 768px) {
    .site-top-banner__inner { gap: var(--spacing-md); }
    .site-top-banner__note-text { font-size: 13px; }

    /* On a touch screen the number is the whole point of this bar, so it stops
       being a line of text and becomes a real tap target: white plate, dark
       blue label, tall enough to hit without aiming. */
    .site-top-banner__phone {
        display: inline-block;
        padding: 7px 16px;
        border-radius: var(--radius);
        background: #fff;
        color: var(--color-secondary);
        font-size: 14px;
        white-space: nowrap;
    }

    .site-top-banner__phone:hover,
    .site-top-banner__phone:focus-visible {
        background: var(--color-bg-light);
        text-decoration: none;
    }
}

@media (max-width: 475px) {
    /* Both lines no longer fit side by side - stack them, centred, and let the
       button take the full width so it is unmissable. */
    .site-top-banner__inner {
        flex-direction: column;
        gap: var(--spacing-sm);
        padding-block: 10px;
    }
    .site-top-banner__icon { width: 14px; height: 14px; }
    .site-top-banner__note-text { font-size: 13px; }

    .site-top-banner__phone {
        display: block;
        width: 100%;
        padding: 11px 16px;
        font-size: 16px;
        text-align: center;
    }
}

/* ==========================================================================
   SITE HEADER
   ========================================================================== */
@media (max-width: 1440px) {
    .site-header__inner,
    .header-menu { gap: 22px; }
    .header-menu a { font-size: 14px; }
}

@media (max-width: 1024px) {
    .site-header__inner,
    .header-menu { gap: 16px; }
    .site-header__logo-img { height: 40px; }
    .btn { padding: 10px 18px; font-size: 14px; }
}

@media (max-width: 768px) {
    /* Logo left, CTA + hamburger grouped on the right. */
    .site-header__logo { margin-right: auto; }
    .site-header__toggle { display: flex; }

    /* Nav becomes a full-width panel dropping from the header bottom edge.
       The grid-template-rows 0fr -> 1fr trick animates the height smoothly
       without needing a hardcoded max-height. */
    .site-header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 90;
        display: grid;
        grid-template-rows: 0fr;
        background: var(--color-bg);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 16px 30px rgba(0, 0, 0, .1);
        transition: grid-template-rows .3s ease;
    }
    .site-header.is-menu-open .site-header__nav {
        grid-template-rows: 1fr;
    }

    /* The single grid row must clip its overflow for the collapse to work. */
    .site-header__nav > .header-menu {
        overflow: hidden;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-inline: var(--container-pad);
    }

    /* Top-level items stack as full-width rows with separators. */
    .site-header__nav .header-menu > li { display: block; }
    .site-header__nav .header-menu > li + li { border-top: 1px solid var(--color-border); }
    .site-header__nav .header-menu a { padding: 14px 0; font-size: 15px; }
    /* The desktop bottom active-bar makes no sense in the stacked panel. */
    .site-header__nav .header-menu > li > a::before { display: none; }

    /* Parent rows are split in two: the link (goes to the category page) and
       the arrow button next to it (opens the sub-menu). The row is a wrapping
       flex line so the sub-menu drops onto the next one, full width. */
    .site-header__nav .header-menu > li.menu-item-has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .site-header__nav .menu-item-has-children > a {
        flex: 1 1 auto;
        min-width: 0;
    }
    /* The arrow now lives in the button, not on the link. */
    .site-header__nav .menu-item-has-children > a::after {
        display: none;
    }

    .site-header__nav .header-menu__submenu-toggle {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;              /* comfortable tap target */
        align-self: stretch;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        color: inherit;
        cursor: pointer;
    }

    /* Same chevron as the desktop link arrow. */
    .site-header__nav .header-menu__submenu-toggle-icon {
        position: relative;
        top: -2px;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform .2s ease, top .2s ease;
    }

    .site-header__nav .menu-item-has-children.is-open > .header-menu__submenu-toggle {
        color: var(--color-primary);
    }
    .site-header__nav .menu-item-has-children.is-open > .header-menu__submenu-toggle .header-menu__submenu-toggle-icon {
        top: 1px;
        transform: rotate(-135deg);
    }

    /* The sub-menu wraps under both, spanning the whole row. */
    .site-header__nav .menu-item-has-children > .sub-menu {
        flex: 0 0 100%;
    }

    /* Sub-menus render inline (accordion) instead of an absolute dropdown;
       tapping the parent toggles .is-open (handled in main.js). */
    .site-header__nav .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: var(--color-bg-light);
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }
    .site-header__nav .menu-item-has-children.is-open > .sub-menu {
        max-height: 600px;
    }
    .site-header__nav .sub-menu a { padding: 12px var(--container-pad); }
}

@media (max-width: 475px) {
    .site-header__logo-img { height: 34px; }
    .btn { padding: 9px 14px; }
}

/* ==========================================================================
   BLOCK-HERO
   ========================================================================== */
@media (max-width: 1440px) {
    .block-hero { padding-block: 80px; }
    .block-hero__title { font-size: 42px; }
}

@media (max-width: 1024px) {
    .block-hero { padding-block: 64px; }
    .block-hero__title { font-size: 36px; }
    .block-hero__description { font-size: 17px; }
    .block-hero__metric { padding-inline: 16px; }
    .block-hero__metric-value { font-size: 34px; }
    .block-hero__metric-logo { height: 20px; }
}

@media (max-width: 768px) {
    /* Two long labels will not sit side by side, so the buttons stack and each
       takes the full width. The ratings stay on one line underneath. */
    .block-hero__actions { flex-direction: column; width: 100%; }
    .block-hero__actions .btn { width: 100%; }
}

@media (max-width: 475px) {
    .block-hero__breadcrumbs{
        top: 14px;
    }
    .block-hero { padding-block: 48px; }
    .block-hero__title { font-size: 28px; }
    .block-hero__description { font-size: 16px; }
    /* A long trail wraps rather than overflowing the 360 viewport. */
    .block-hero__breadcrumbs-list { 
        gap: 6px; 
        font-size: 9px; 
    }
    .block-hero__breadcrumb + .block-hero__breadcrumb::before { margin-right: 6px; }
    /* Both ratings stay on one line even here, so they read as a pair. They
       shrink instead of stacking. */
    .block-hero__metric { padding-inline: 12px; gap: 8px; }
    .block-hero__metric-value { font-size: 26px; }
    .block-hero__metric-logo { height: 17px; }
    .block-hero__metric-star { width: 11px; height: 10px; }
    .block-hero__card { padding: 14px; }
    .block-hero__actions .btn { padding: 14px 18px; font-size: 15px; }
}

/* ==========================================================================
   BLOCK-SAME-TEAM
   ========================================================================== */
@media (max-width: 1440px) {
    .block-same-team__grid { gap: var(--spacing-xl); }
}

@media (max-width: 1024px) {
    /* Feature strip wraps to 2x2. */
    .block-same-team__features-list {
        flex-wrap: wrap;
        justify-content: flex-start;
        column-gap: var(--spacing-xl);
        row-gap: var(--spacing-sm);
    }
    /* Body stacks: content first, image below. */
    .block-same-team__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        padding-block: var(--spacing-xl);
    }
    .block-same-team__title { font-size: 32px; }
    .block-same-team__media { height: auto; }
    .block-same-team__image { height: auto; }
    /* Metrics 4 -> 2 columns. */
    .block-same-team__metrics { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); }
    .block-same-team__metric-value { font-size: 34px; }
    .block-same-team__cta { margin-top: var(--spacing-lg); }
    .block-same-team__cta-btn { min-height: 52px; padding: 14px 28px; font-size: 15px; }
    /* Matches the tighter padding-block the grid takes at this tier. */
    .block-same-team--has-cta { padding-bottom: var(--spacing-xl); }
}

@media (max-width: 475px) {
    /* Features stack in one column. */
    .block-same-team__features-list {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    .block-same-team__feature-text { font-size: 14px; }
    .block-same-team__grid { padding-block: var(--spacing-xl); }
    .block-same-team__title { font-size: 26px; }
    .block-same-team__badges { gap: var(--spacing-sm); }
    .block-same-team__badge-img { width: 60px; height: 60px; }
    /* Full-width button reads better than a floating pill on a phone. */
    .block-same-team__cta-btn {
        width: 100%;
        min-height: 50px;
        padding-inline: var(--spacing-md);
        white-space: normal;
        text-align: center;
    }
    /* Image overlay metrics shrink to fit 360. */
    .block-same-team__img-metric {
        bottom: var(--spacing-md);
        font-size: 15px;
    }
    .block-same-team__img-metric--left { left: var(--spacing-md); }
    .block-same-team__img-metric--right { right: var(--spacing-md); }
    .block-same-team__img-metric strong,
    .block-same-team__img-metric span { font-size: 30px; }
    /* Metrics stack to one column. */
    .block-same-team__metrics { 
        /* grid-template-columns: 1fr;  */
        gap: var(--spacing-md); 
        padding-bottom: 20px;
    }
    .block-same-team__metric-value { font-size: 30px; }
}

/* ==========================================================================
   BLOCK-WHO-WE-SERVE
   ========================================================================== */
@media (max-width: 1024px) {
    /* Cards 4 -> 2 columns. */
    .block-who-we-serve { padding-block: var(--spacing-xl); }
    .block-who-we-serve__cards { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); }
    .block-who-we-serve__title { font-size: 32px; }
}

@media (max-width: 768px) {
    /* The bar no longer fits on one line - stack it, hairline goes horizontal
       above the text. */
    .block-who-we-serve__bottom {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
        width: 100%;
        padding: var(--spacing-md);
    }
    .block-who-we-serve__bottom-btn { width: 100%; }
    .block-who-we-serve__bottom-text {
        max-width: none;
        padding: var(--spacing-md) 0 0;
        border-left: 0;
        border-top: 1px solid var(--color-border);
        text-align: center;
    }
}

@media (max-width: 475px) {
    /* Cards stack in one column. */
    .block-who-we-serve__cards { grid-template-columns: 1fr; }
    .block-who-we-serve__card { padding: 16px 18px; }
    .block-who-we-serve__title { font-size: 26px; }
    .block-who-we-serve__bottom { margin-top: var(--spacing-lg); }
    .block-who-we-serve__bottom-btn { min-height: 50px; padding-inline: var(--spacing-md); white-space: normal; }
    .block-who-we-serve__bottom-text { font-size: 14px; }
}

/* ==========================================================================
   BLOCK-WHAT-WE-DO
   ========================================================================== */
@media (max-width: 1024px) {
    .block-what-we-do { padding-block: var(--spacing-xl); }
    .block-what-we-do__title { font-size: 32px; }
    .block-what-we-do__cards { gap: var(--spacing-md); }
    .block-what-we-do__media { height: 230px; }
    .block-what-we-do__card-title { font-size: 22px; }
}

@media (max-width: 768px) {
    /* Cards 2 -> 1 column. */
    .block-what-we-do__cards { grid-template-columns: 1fr; }
    .block-what-we-do__media { height: 250px; }
}

@media (max-width: 475px) {
    .block-what-we-do__title { font-size: 26px; }
    .block-what-we-do__media { height: 210px; }
    .block-what-we-do__media-overlay { padding: var(--spacing-md); }
    .block-what-we-do__card-title { font-size: 20px; }
    .block-what-we-do__body { padding: var(--spacing-md); }
    .block-what-we-do__pagination .page-numbers { min-width: 36px; height: 36px; }
}

/* ==========================================================================
   BLOCK-MAKES-DIFFERENT
   ========================================================================== */
@media (max-width: 1024px) {
    /* Cards stack; each card keeps room for its own number circle. */
    .block-makes-different { padding-block: var(--spacing-xl); }
    .block-makes-different__title { font-size: 32px; }
    .block-makes-different__cards {
        grid-template-columns: 1fr;
        gap: 48px;
        max-width: 520px;
        margin-inline: auto;
    }
}

@media (max-width: 475px) {
    .block-makes-different__title { font-size: 26px; }
    .block-makes-different__card { padding: 40px var(--spacing-md) var(--spacing-md); }
    .block-makes-different__number { width: 48px; height: 48px; top: -24px; font-size: 16px; }
}

/* ==========================================================================
   BLOCK-OUR-WORK
   ========================================================================== */
@media (max-width: 1024px) {
    .block-our-work { padding-block: var(--spacing-xl); }
    .block-our-work__title { font-size: 32px; }
    .block-our-work__cards { gap: var(--spacing-md); }
}

@media (max-width: 768px) {
    /* Cards 3 -> 1 column, capped so a lone column does not stretch. */
    .block-our-work__cards {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin-inline: auto;
    }
}

@media (max-width: 475px) {
    .block-our-work__title { font-size: 26px; }
    .block-our-work__media { padding: var(--spacing-md); }
    .block-our-work__card-body { padding: 0 var(--spacing-md) var(--spacing-md); }
    .block-our-work__card-title { font-size: 20px; }
}

/* ==========================================================================
   BLOCK-HOW-WE-WORK
   ========================================================================== */
@media (max-width: 1024px) {
    /* Steps 4 -> 2 columns. */
    .block-how-we-work { padding-block: var(--spacing-xl); }
    .block-how-we-work__title { font-size: 32px; }
    .block-how-we-work__points { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); }
}

@media (max-width: 475px) {
    /* Steps stack in one column. */
    .block-how-we-work__title { font-size: 26px; }
    .block-how-we-work__points { grid-template-columns: 1fr; }
    .block-how-we-work__number { width: 46px; height: 46px; font-size: 16px; }
    .block-how-we-work__point-title { margin-top: 11px; }
}

/* ==========================================================================
   BLOCK-REVIEWS
   ========================================================================== */
@media (max-width: 1440px) {
    /* Less free space around the 1200px container - pull the arrows in. */
    .block-reviews__arrow--prev { left: -40px; }
    .block-reviews__arrow--next { right: -40px; }
}

@media (max-width: 1024px) {
    .block-reviews { padding-block: var(--spacing-xl); }
    .block-reviews__title { font-size: 32px; }
    /* No room outside the container - arrows overlap the card edges. */
    .block-reviews__arrow { width: 36px; height: 36px; }
    .block-reviews__arrow--prev { left: -8px; }
    .block-reviews__arrow--next { right: -8px; }
}

@media (max-width: 768px) {
    /* One card per view (main.js switches its slides-per-view here too). */
    .block-reviews__card { flex: 0 0 100%; }

    /* Arrows move below the viewport, centered symmetrically about its width,
       instead of hanging on the sides at mid-height. */
    .block-reviews__slider {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-md);
    }
    .block-reviews__viewport {
        order: -1;
        flex: 1 0 100%;
    }
    .block-reviews__arrow {
        position: static;
        transform: none;
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 475px) {
    .block-reviews__title { font-size: 26px; }
    .block-reviews__card { padding: var(--spacing-md); }
}

/* ==========================================================================
   BLOCK-SERVICE-AREA
   ========================================================================== */
@media (max-width: 1024px) {
    /* Panel and map stack; both span the full viewport width. */
    .block-service-area { grid-template-columns: 1fr; }
    .block-service-area__content {
        grid-column: 1;
        justify-content: center;
    }
    .block-service-area__inner {
        max-width: var(--container-max);
        padding-block: var(--spacing-xl);
    }
    .block-service-area__text { max-width: 640px; }
    .block-service-area__map {
        grid-column: 1;
        min-height: 380px;
    }
}

@media (max-width: 475px) {
    .block-service-area__title { font-size: 26px; }
    .block-service-area__map { min-height: 300px; }
}

/* ==========================================================================
   BLOCK-CTA-SECTION
   ========================================================================== */
@media (max-width: 1024px) {
    .block-cta-section { padding-block: var(--spacing-2xl); }
    .block-cta-section__title { font-size: 32px; }
}

@media (max-width: 475px) {
    /* Buttons stack and fill the action card, card fills the container. */
    .block-cta-section { padding-block: var(--spacing-xl); }
    .block-cta-section__title { font-size: 26px; }
    .block-cta-section__actions {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: var(--spacing-md);
    }
    .block-cta-section__actions .btn { width: 100%; }
}

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */
@media (max-width: 1440px) {
    .site-footer__grid { grid-template-columns: 1.1fr repeat(3, .9fr) 1.3fr; gap: var(--spacing-lg); }
    .site-footer__phone { font-size: 16px; }
}

@media (max-width: 1024px) {
    /* Logo on its own row, menus 3-up, contacts full row below. */
    .site-footer { padding-block: var(--spacing-xl) var(--spacing-lg); }
    .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
    .site-footer__col--logo,
    .site-footer__col--contacts { grid-column: 1 / -1; }

    /* Phone, email and address move up under the logo. On a narrow screen the
       contact details are what someone is scrolling to the footer for, and at
       the bottom of five stacked columns they were the last thing reached. */
    .site-footer__col--logo { order: 0; }
    .site-footer__col--contacts { order: 1; }
    .site-footer__col:not(.site-footer__col--logo):not(.site-footer__col--contacts) { order: 2; }
}

@media (max-width: 768px) {
    /* Menu columns 3 -> 2 (third wraps under). */
    .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 475px) {
    /* Everything stacks in one column. */
    .site-footer__grid { grid-template-columns: 1fr; gap: var(--spacing-lg); }
    .site-footer__bottom { justify-content: center; text-align: center; }
    .site-footer__phone { font-size: 18px; }
    .site-footer__hours { font-size: 18px; }
}

/* ==========================================================================
   BLOCK-HUB-WHAT-WE-DO
   ========================================================================== */
@media (max-width: 1024px) {
    .block-hub-what-we-do { padding-block: var(--spacing-xl); }
    .block-hub-what-we-do__title { font-size: 32px; }
    .block-hub-what-we-do__card { gap: var(--spacing-lg); }
    .block-hub-what-we-do__card-title { font-size: 22px; }
}

@media (max-width: 768px) {
    /* Row card stacks: icon + text on top, the two buttons share a row below. */
    .block-hub-what-we-do__card {
        grid-template-columns: auto 1fr;
    }
    .block-hub-what-we-do__aside {
        grid-column: 1 / -1;
        flex-direction: row;
        gap: var(--spacing-md);
    }
    .block-hub-what-we-do__aside .btn { flex: 1; }
}

@media (max-width: 475px) {
    .block-hub-what-we-do__title { font-size: 26px; }
    /* Icon moves above the text, its right divider is dropped. */
    .block-hub-what-we-do__card { grid-template-columns: 1fr; }
    .block-hub-what-we-do__icon {
        width: 56px;
        height: 56px;
        padding-right: 0;
        border-right: 0;
    }
    .block-hub-what-we-do__icon img { width: 56px; height: 56px; }
    .block-hub-what-we-do__card-title { font-size: 20px; }
    /* Buttons stack full-width. */
    .block-hub-what-we-do__aside { flex-direction: column; }
}

/* ==========================================================================
   CATEGORY ARCHIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .category-archive__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 475px) {
    .category-archive__list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BLOCK-WHAT-WE-OFFER
   ========================================================================== */
@media (max-width: 1024px) {
    .block-what-we-offer__card {
        flex-basis: calc((100% - var(--spacing-lg)) / 2);
        max-width: calc((100% - var(--spacing-lg)) / 2);
        padding: var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .block-what-we-offer__card {
        flex-basis: 100%;
        max-width: 100%;
    }

    .block-what-we-offer__description,
    .block-what-we-offer__bottom {
        font-size: var(--fs-body);
    }
}

@media (max-width: 475px) {
    .block-what-we-offer__card {
        padding: var(--spacing-md);
    }

    .block-what-we-offer__card-icon-wrap {
        width: 68px;
        height: 68px;
        padding: 14px;
    }

    .block-what-we-offer__card-title {
        font-size: 18px;
    }
}

/* ==========================================================================
   BLOCK-WHY-US
   ========================================================================== */
@media (max-width: 1024px) {
    .block-why-us { padding-block: var(--spacing-xl); }
    .block-why-us__title { font-size: 32px; }
    /* Cards stack; keep room on the left for the number circle. */
    .block-why-us__points { grid-template-columns: 1fr; gap: var(--spacing-lg); }
}

@media (max-width: 475px) {
    .block-why-us__title { font-size: 26px; }
    .block-why-us__point {
        padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md) var(--spacing-lg);
    }
    /* Circle moves fully inside the card so it is not clipped at 360. */
    .block-why-us__number {
        position: static;
        transform: none;
        width: 48px;
        height: 48px;
        margin-bottom: var(--spacing-md);
        font-size: 16px;
    }
    .block-why-us__point-title { margin-top: 0; }
}

/* ==========================================================================
   BLOCK-TRUST-AND-CREDENTIALS
   ========================================================================== */
@media (max-width: 1440px) {
    /* Less free space around the 1200px container - pull the arrows in. */
    .block-trust-and-credentials__arrow--prev { left: -40px; }
    .block-trust-and-credentials__arrow--next { right: -40px; }
}

@media (max-width: 1024px) {
    .block-trust-and-credentials { padding-block: var(--spacing-xl); }
    .block-trust-and-credentials__title { font-size: 32px; }
    /* No room outside the container - arrows overlap the card edges. */
    .block-trust-and-credentials__arrow { width: 36px; height: 36px; }
    .block-trust-and-credentials__arrow--prev { left: -8px; }
    .block-trust-and-credentials__arrow--next { right: -8px; }
}

@media (max-width: 768px) {
    /* One card per view (main.js switches its slides-per-view here too). */
    .block-trust-and-credentials__card { flex: 0 0 100%; }

    /* Arrows move below the viewport, centered symmetrically about its width. */
    .block-trust-and-credentials__slider {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-md);
    }
    .block-trust-and-credentials__viewport {
        order: -1;
        flex: 1 0 100%;
    }
    .block-trust-and-credentials__arrow {
        position: static;
        transform: none;
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 475px) {
    .block-trust-and-credentials__title { font-size: 26px; }
    .block-trust-and-credentials__card { padding: var(--spacing-lg); }
}

/* ==========================================================================
   BLOCK-HOW-WE-WORK-BIG
   ========================================================================== */
@media (max-width: 1024px) {
    /* Text and image stack; both span the full viewport width. */
    .block-how-we-work-big { grid-template-columns: 1fr; }
    .block-how-we-work-big__content {
        grid-column: 1;
        justify-content: center;
    }
    .block-how-we-work-big__inner {
        max-width: var(--container-max);
        padding-block: var(--spacing-xl);
    }
    .block-how-we-work-big__title { font-size: 30px; }
    .block-how-we-work-big__step-text { max-width: 640px; }
    .block-how-we-work-big__media {
        grid-column: 1;
        order: -1;
        min-height: 360px;
    }
    /* The column is the full container here - a full-width button would be
       far wider than the design, so it shrinks to its text. */
    .block-how-we-work-big__cta { margin-top: var(--spacing-lg); }
    .block-how-we-work-big__cta-btn {
        width: auto;
        min-height: 56px;
        padding: 16px 26px;
        font-size: 16px;
    }
}

@media (max-width: 475px) {
    .block-how-we-work-big__title { font-size: 26px; }
    .block-how-we-work-big__media { min-height: 280px; }
    .block-how-we-work-big__cta-btn {
        width: 100%;
        min-height: 52px;
        padding-inline: var(--spacing-md);
        font-size: 15px;
        white-space: normal;
    }
}

/* ==========================================================================
   BLOCK-CATEGORY-FAQS
   ========================================================================== */
@media (max-width: 1024px) {
    .block-category-faqs { padding-block: var(--spacing-xl); }
    .block-category-faqs__title { font-size: 32px; }
}

@media (max-width: 475px) {
    .block-category-faqs__title { font-size: 26px; }
    .block-category-faqs__question { padding: var(--spacing-md); font-size: 15px; }
    .block-category-faqs__answer-text { padding: 0 var(--spacing-md) var(--spacing-md); }
}

/* ==========================================================================
   BLOCK-CATEGORY-TEXT-IMAGE-CONTENT
   ========================================================================== */
@media (max-width: 1024px) {
    .block-category-text-image-content { padding-block: var(--spacing-xl); }
    .block-category-text-image-content__intro { padding: var(--spacing-xl); }
    .block-category-text-image-content__title { font-size: 32px; }
    /* Points 4 -> 2 columns. */
    .block-category-text-image-content__points { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); }
    /* Rows stack: content then image, and reversed rows keep image on top. */
    .block-category-text-image-content__row { grid-template-columns: 1fr; gap: var(--spacing-lg); }
    .block-category-text-image-content__rows { gap: var(--spacing-xl); }
    .block-category-text-image-content__row--reverse .block-category-text-image-content__row-media { order: 0; }
}

@media (max-width: 475px) {
    .block-category-text-image-content__title { font-size: 26px; }
    .block-category-text-image-content__intro { padding: var(--spacing-lg); }
    /* Points stack in one column. */
    .block-category-text-image-content__points { grid-template-columns: 1fr; }
    .block-category-text-image-content__point { padding: 16px 18px; }
    .block-category-text-image-content__row-title { font-size: 20px; }
}

/* ==========================================================================
   BLOCK-ESTIMATE-FORM
   ========================================================================== */
@media (max-width: 1440px) {
    .block-estimate-form__card { padding: 48px 72px 56px; }
    .block-estimate-form__title { font-size: 40px; margin-bottom: var(--spacing-lg); }
}

@media (max-width: 1024px) {
    .block-estimate-form { padding-block: 56px; }
    .block-estimate-form__card { padding: 40px 32px 44px; }
    .block-estimate-form__title { font-size: 32px; }
    /* Still two columns here, just tighter. */
    .block-estimate-form .frm_fields_container { row-gap: 24px; }
    .block-estimate-form .frm_form_field input[type="text"],
    .block-estimate-form .frm_form_field input[type="email"],
    .block-estimate-form .frm_form_field input[type="tel"],
    .block-estimate-form .frm_form_field input[type="url"],
    .block-estimate-form .frm_form_field input[type="number"],
    .block-estimate-form .frm_form_field select,
    .block-estimate-form .frm_form_field textarea { min-height: 56px; padding: 16px 18px; }
    .block-estimate-form .frm_button_submit { min-height: 56px; }
}

@media (max-width: 768px) {
    /* Half-width columns get too narrow - every field goes full width on the
       12 column grid, so the phone row spans the whole card as well. */
    .block-estimate-form .frm_fields_container > .frm_form_field,
    .block-estimate-form .frm_fields_container > .frm9,
    .block-estimate-form .frm_fields_container > .frm8,
    .block-estimate-form .frm_fields_container > .frm6,
    .block-estimate-form .frm_fields_container > .frm4,
    .block-estimate-form .frm_fields_container > .frm3 { grid-column: auto / span 12; }
    .block-estimate-form__phone { width: 100%; margin-left: 0; }
}

@media (max-width: 475px) {
    .block-estimate-form { padding-inline: 0; }
    .block-estimate-form__card { padding: 32px 20px 36px; margin-inline: 12px; }
    .block-estimate-form .frm_fields_container { margin: 0; }
    .block-estimate-form .frm_form_field { padding-inline: 0; }
    .block-estimate-form { padding-block: 40px; }
    .block-estimate-form__card { padding: 28px 16px 32px; }
    .block-estimate-form__title { font-size: 26px; margin-bottom: var(--spacing-md); }
    .block-estimate-form .frm_fields_container { row-gap: 16px; }
    .block-estimate-form .frm_form_field input[type="text"],
    .block-estimate-form .frm_form_field input[type="email"],
    .block-estimate-form .frm_form_field input[type="tel"],
    .block-estimate-form .frm_form_field input[type="url"],
    .block-estimate-form .frm_form_field input[type="number"],
    .block-estimate-form .frm_form_field select,
    .block-estimate-form .frm_form_field textarea { min-height: 52px; padding: 14px 16px; font-size: 15px; }
    .block-estimate-form .frm_button_submit { min-height: 52px; font-size: 15px; }
    .block-estimate-form .frm_checkbox label { font-size: 11px; }
    .block-estimate-form__phone-text { font-size: 15px; }
    .block-estimate-form__phone-icon { width: 16px; height: 16px; }
}

/* ==========================================================================
   BLOCK-CONTACT-INFO
   ========================================================================== */
@media (max-width: 1440px) {
    .block-contact-info__inner { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 40px; }
    .block-contact-info__item-title { font-size: 20px; }
}

@media (max-width: 1024px) {
    .block-contact-info { padding-block: 56px; }
    .block-contact-info__inner { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: 32px; }
    .block-contact-info__item + .block-contact-info__item { margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); }
    .block-contact-info__item-content { margin-top: var(--spacing-md); }
    .block-contact-info__map { min-height: 360px; }
}

@media (max-width: 768px) {
    /* The map gets too narrow beside the list - stack, list first. */
    .block-contact-info__inner { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xl); }
    .block-contact-info__map { min-height: 320px; }
}

@media (max-width: 475px) {
    .block-contact-info { padding-block: 40px; }
    .block-contact-info__item-title { font-size: 18px; }
    .block-contact-info__item-icon { width: 18px; height: 18px; }
    .block-contact-info__item-content { font-size: 15px; }
    .block-contact-info__map { min-height: 260px; }
}

/* ==========================================================================
   PAGE-THANK-YOU
   ========================================================================== */
@media (max-width: 1440px) {
    .page-thank-you { padding-block: 80px; }
    .page-thank-you__card { padding: 60px 64px 68px; }
    .page-thank-you__title { font-size: 40px; }
}

@media (max-width: 1024px) {
    .page-thank-you { padding-block: 64px; }
    .page-thank-you__card { max-width: 640px; padding: 48px 40px 56px; }
    .page-thank-you__icon { width: 72px; height: 72px; margin-bottom: var(--spacing-lg); }
    .page-thank-you__icon::after { width: 17px; height: 32px; border-width: 0 3px 3px 0; }
    .page-thank-you__title { font-size: 32px; }
    .page-thank-you__text { font-size: 16px; }
}

@media (max-width: 768px) {
    .page-thank-you { min-height: 0; padding-block: 56px; }
    .page-thank-you__card { padding: 40px 28px 44px; }
    .page-thank-you__title { font-size: 28px; }
}

@media (max-width: 475px) {
    .page-thank-you { padding-block: 40px; }
    .page-thank-you__card { padding: 32px 16px 36px; }
    .page-thank-you__icon { width: 60px; height: 60px; margin-bottom: var(--spacing-md); }
    .page-thank-you__icon::after { width: 14px; height: 26px; }
    .page-thank-you__title { font-size: 24px; margin-bottom: var(--spacing-md); }
    .page-thank-you__text { font-size: 15px; margin-bottom: var(--spacing-lg); }
    /* Full-width button reads better than a floating pill on a phone. */
    .page-thank-you__button { width: 100%; min-height: 52px; padding-inline: var(--spacing-md); white-space: normal; }
}

/* ==========================================================================
   QUOTE-POPUP
   ========================================================================== */
@media (max-width: 1024px) {
    .quote-popup { padding: var(--spacing-lg) var(--container-pad); }
    .quote-popup__dialog { max-width: 720px; padding: 48px 40px 52px; }
    .quote-popup__title { font-size: 30px; margin-bottom: var(--spacing-lg); }
    .quote-popup .frm_form_field input[type="text"],
    .quote-popup .frm_form_field input[type="email"],
    .quote-popup .frm_form_field input[type="tel"],
    .quote-popup .frm_form_field input[type="url"],
    .quote-popup .frm_form_field input[type="number"],
    .quote-popup .frm_form_field select,
    .quote-popup .frm_form_field textarea { min-height: 54px; padding: 15px 18px; }
    .quote-popup .frm_button_submit { min-height: 54px; }
}

@media (max-width: 768px) {
    /* A centred card with real margins, not a full-bleed sheet: the page bars
       never cover the close button and the fields keep breathing room. */
    .quote-popup { padding: 16px; }
    .quote-popup.is-open { align-items: flex-start; }
    .quote-popup__dialog {
        margin: max(16px, env(safe-area-inset-top)) auto 24px;
        padding: 44px 18px 28px;
        border-radius: 8px;
    }
    .quote-popup__close { top: 10px; right: 10px; width: 40px; height: 40px; }
    .quote-popup__title { font-size: 24px; margin-bottom: var(--spacing-md); }
    /* Half-width columns get too narrow - every field spans the full row. */
    .quote-popup .frm_fields_container > .frm_form_field,
    .quote-popup .frm_fields_container > .frm9,
    .quote-popup .frm_fields_container > .frm8,
    .quote-popup .frm_fields_container > .frm6,
    .quote-popup .frm_fields_container > .frm4,
    .quote-popup .frm_fields_container > .frm3 { grid-column: auto / span 12; }
    .quote-popup .frm_fields_container { margin: 0; row-gap: 12px; }
    .quote-popup .frm_form_field { padding-inline: 0; }
    .quote-popup .frm_form_field input[type="text"],
    .quote-popup .frm_form_field input[type="email"],
    .quote-popup .frm_form_field input[type="tel"],
    .quote-popup .frm_form_field input[type="url"],
    .quote-popup .frm_form_field input[type="number"],
    .quote-popup .frm_form_field select { min-height: 46px; padding: 11px 14px; font-size: 16px; }
    .quote-popup .frm_form_field textarea { min-height: 88px; padding: 11px 14px; font-size: 16px; }
    .quote-popup .frm_checkbox label { font-size: 13px; }
    .quote-popup .frm_button_submit { min-height: 48px; width: 100%; }
}

/* ==========================================================================
   BLOCK-WARNING-SIGNS
   ========================================================================== */
@media (max-width: 1440px) {
    .block-warning-signs { padding-block: 80px; }
    .block-warning-signs__header { margin-bottom: var(--spacing-xl); }
    .block-warning-signs__title { font-size: 32px; }
    .block-warning-signs__card { padding: 26px 20px 30px; }
    .block-warning-signs__actions { margin-top: var(--spacing-xl); }
}

@media (max-width: 1024px) {
    /* Four columns squeeze the two-line card titles - drop to 2x4. */
    .block-warning-signs { padding-block: 64px; }
    .block-warning-signs__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }
    .block-warning-signs__title { font-size: 28px; }
    .block-warning-signs__description { font-size: 14px; }
    .block-warning-signs__btn { min-height: 52px; padding: 14px 24px; font-size: 15px; }
}

@media (max-width: 768px) {
    /* The action bar no longer fits on one line - stack it, hairline goes
       horizontal above the phone link. */
    .block-warning-signs__actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
        width: 100%;
        padding: var(--spacing-md);
    }
    .block-warning-signs__btn { width: 100%; }
    .block-warning-signs__phone {
        justify-content: center;
        padding: var(--spacing-md) 0 0;
        border-left: 0;
        border-top: 1px solid var(--color-border);
    }
}

@media (max-width: 475px) {
    .block-warning-signs { padding-block: 40px; }
    .block-warning-signs__header { margin-bottom: var(--spacing-lg); }
    .block-warning-signs__title { font-size: 24px; }
    .block-warning-signs__subtitle { font-size: 13px; }
    /* One card per row - two columns leave no room for the copy at 360. */
    .block-warning-signs__cards { grid-template-columns: minmax(0, 1fr); }
    .block-warning-signs__card { padding: 22px 18px 26px; }
    .block-warning-signs__card-title { font-size: 17px; margin-bottom: var(--spacing-sm); }
    .block-warning-signs__actions { margin-top: var(--spacing-lg); }
    .block-warning-signs__btn { min-height: 50px; padding-inline: var(--spacing-md); font-size: 15px; white-space: normal; }
    .block-warning-signs__phone-text { font-size: 14px; }
}

/* ==========================================================================
   ARCHIVE-PROJECTS
   ========================================================================== */
@media (max-width: 1024px) {
    .archive-projects-header { padding: 64px 0 var(--spacing-xl); }
    .archive-projects-header__title { font-size: 36px; }
    .archive-projects__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .archive-projects-header { padding: 56px 0 var(--spacing-xl); }
    .archive-projects-header__title { font-size: 30px; }
    .archive-projects-header__description { font-size: 16px; }
    .archive-projects, .archive-projects-cta, .single-project-more { padding-block: 40px; }
    /* One card per row: two columns leave the title and the copy no width. */
    .archive-projects__grid { grid-template-columns: minmax(0, 1fr); }
    .archive-projects-cta__title, .single-project-more__title { font-size: 24px; }
    .archive-projects-cta__text { font-size: 16px; }
}

@media (max-width: 475px) {
    .archive-projects-header { padding: 52px 0 var(--spacing-lg); }
    .archive-projects-header__title { font-size: 26px; }
    .archive-projects-header__breadcrumbs-list { font-size: 12px; }
    .archive-projects__pagination .page-numbers { min-width: 36px; height: 36px; padding-inline: 8px; }
    .archive-projects__filters { gap: 6px; margin-bottom: var(--spacing-lg); }
    .archive-projects__filter { padding: 8px 12px; font-size: 13px; }
    .archive-projects-cta__button { width: 100%; justify-content: center; }
}

/* ==========================================================================
   SINGLE-PROJECT
   ========================================================================== */
@media (max-width: 1024px) {
    .single-project__layout { gap: var(--spacing-xl); }
    .single-project__media { top: 90px; }
    .single-project__meta-row { grid-template-columns: 120px minmax(0, 1fr); }
}

@media (max-width: 768px) {
    .single-project { padding-block: 40px; }
    /* One column: photo first, story under it, no sticky */
    .single-project__layout { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-lg); }
    .single-project__media { position: static; }
    .single-project__image { max-height: 480px; width: auto; max-width: 100%; margin: 0 auto; }
    .single-project__lead { font-size: 18px; }
    .single-project__location { font-size: 16px; }
    .single-project__compare, .single-project__gallery { margin-top: 40px; padding-top: 40px; }
    .single-project__section-title { font-size: 24px; }
    .single-project__gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }
    .single-project__compare-grid { gap: var(--spacing-md); }
    .single-project__actions { gap: var(--spacing-md); }
}

@media (max-width: 475px) {
    .single-project__meta-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .single-project__compare-grid { grid-template-columns: minmax(0, 1fr); }
    .single-project__gallery-grid { grid-template-columns: minmax(0, 1fr); }
    .single-project__compare-item, .single-project__gallery-item { aspect-ratio: 4 / 4; }
    .single-project__quote { width: 100%; justify-content: center; }
    .single-project__work-shown { padding: var(--spacing-md); }
}

/* ==========================================================================
   BLOCK-PAGE-TEXT
   ========================================================================== */
@media (max-width: 768px) {
    .block-page-text { padding-block: 40px; }
    .block-page-text__title { font-size: 24px; }
    .block-page-text__content h2 { margin-top: var(--spacing-lg); font-size: 21px; }
    .block-page-text__content h3 { font-size: 18px; }
}

/* ==========================================================================
   BLOG
   ========================================================================== */
@media (max-width: 1024px) {
    .blog-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .blog-index, .single-post { padding-block: 40px; }
    .blog-index__grid { grid-template-columns: minmax(0, 1fr); }
    .single-post__image { max-height: 320px; }
}