/* ── HERO — full-bleed photo, white scrim at the top (header), brown scrim at the bottom ── */
.hero{position:relative;width:100%;height:50.47vw;min-height:600px;overflow:visible;color:var(--white)}
.hero__bg{position:absolute;inset:0}
.hero__scrim{position:absolute;inset:0;pointer-events:none;
	/* the Figma stacks the same 0→1 brown gradient twice (y 501→859), so the real
	   curve is 1-(1-t)² — these stops trace it */
	background:linear-gradient(180deg,rgba(90,59,56,0) 51.7%,rgba(90,59,56,.438) 60.9%,rgba(90,59,56,.75) 70.2%,
		rgba(90,59,56,.938) 79.4%,#5a3b38 88.65%,#5a3b38 100%)}
.hero .container{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center}

.hero__text{width:100%;max-width:1504px;text-align:center;padding-bottom:6.615vw}
.hero__eyebrow{font-size:clamp(15px,1.25vw,24px);line-height:1.25;font-weight:400;letter-spacing:.083em}
.hero__title{margin-top:.04em;font-size:clamp(34px,5.21vw,100px);line-height:1.2;font-weight:400}
.hero__sub{margin-top:.25em;font-size:clamp(15px,1.25vw,24px);line-height:1.42;font-weight:400}

/* the rose hairline that drops out of the hero into the section below */
.hero__line{position:absolute;top:45.05vw;left:50%;width:1px;height:10.99vw;background:var(--grad);pointer-events:none}

@media(max-width:1100px){
	.hero{height:auto;min-height:0;padding-top:calc(var(--hdr-h) + 40px)}
	.hero__text{padding-block:34vw 64px}
	.hero__scrim{background:linear-gradient(180deg,rgba(90,59,56,0) 30%,rgba(90,59,56,.92) 62%,#5a3b38 100%)}
	.hero__line{display:none}
}
@media(max-width:640px){
	.hero__text{padding-block:52vw 44px}
	.hero__title{font-size:clamp(28px,7.6vw,44px)}
}