/* 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}
}

/* ==== Medium widths (761px to 1300px): small laptops, narrowed windows, tablets ====
   Fluid headline, tighter spacing, auto-width buttons in one or two rows (same height) instead of full-width stacked bars.
   761-1000px: the photo now matches the height of the text column, so no button can hang below it.
   Wide desktop (1301px and up) and phones (760px and below) are not touched by anything in this block. */
@media (min-width:761px) and (max-width:1300px){
.home-page .hero.hero--est h1{font-size:clamp(30px,4.7vw,61px);line-height:1.06;margin:14px 0 14px}
.home-page .hero.hero--est .lead{font-size:clamp(15px,1.5vw,17px);line-height:1.45}
.home-page .hero.hero--est .actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;margin-top:18px;width:auto}
.home-page .hero.hero--est .actions .button,.home-page .hero.hero--est .actions .button.outline{flex:0 0 auto;width:auto;min-height:46px;padding:8px 16px;white-space:nowrap}
}
@media (min-width:761px) and (max-width:1000px){
.home-page .hero.hero--est{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:28px;align-items:stretch}
.home-page .hero.hero--est .hero-visual{position:relative;min-height:0}
.home-page .hero.hero--est .hero-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:90px 3px 3px 3px}
}
@media (min-width:1001px) and (max-width:1300px){
.home-page .hero.hero--est .hero-visual{min-height:0}
}