/* Home hero, option C (desktop only): current look, with the dark "Crown mouldings · free estimator" box moved up under the buttons so the
   left column fills down to the bottom of the photo. Phones (760px and below) keep the current order: text, photo, then the box. */
@media (min-width:761px){
.home-page .hero.hero--est{grid-template-rows:auto 1fr;row-gap:26px;align-items:stretch}
.home-page .hero.hero--est>div:first-child{grid-column:1;grid-row:1}
.home-page .hero.hero--est .hero-visual{grid-column:2;grid-row:1 / span 2;position:relative;min-height:520px}
.home-page .hero.hero--est .hero-visual img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.home-page .hero.hero--est>.est-banner{grid-column:1;grid-row:2;margin:0;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-self:stretch}
.home-page .hero.hero--est>.est-banner::before{display:none}
.home-page .hero.hero--est>.est-banner .est-banner__copy{padding:20px 26px}
.home-page .hero.hero--est>.est-banner h2{font-size:clamp(20px,1.75vw,25px)}
}
/* Tablets (761-1000px): the column is too narrow for the box, so keep the current stacked layout (box full width under the photo). */
@media (min-width:761px) and (max-width:1000px){
.home-page .hero.hero--est{grid-template-rows:auto;align-items:start}
.home-page .hero.hero--est .hero-visual{grid-row:1;position:static;min-height:0}
.home-page .hero.hero--est .hero-visual img{position:static;height:490px}
.home-page .hero.hero--est>.est-banner{grid-column:1 / -1;grid-row:2;margin:-13px 0 4px;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.home-page .hero.hero--est>.est-banner::before{display:block}
.home-page .hero.hero--est>.est-banner .est-banner__copy{padding:18px 36px}
.home-page .hero.hero--est>.est-banner h2{font-size:clamp(22px,2.1vw,29px)}
}

/* Phones: the box now sits inside the hero grid, so cancel the grid row gap to keep the exact current spacing. */
@media (max-width:760px){
.home-page .hero.hero--est>.est-banner{margin-top:-3px}
}