/* 1.9.10: one editorial composition, reading before imagery on compact screens. */
.hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);column-gap:48px;row-gap:12px;height:auto;min-height:0;max-height:none;padding:112px max(28px,calc((100vw - 1280px)/2)) 32px;background:#f3f0e8;overflow:hidden}
.hero:after{display:none}
.hero .hero-copy{position:relative;inset:auto!important;left:auto;top:auto;bottom:auto;grid-column:1;grid-row:1;width:auto;max-width:none;padding:0;background:transparent;gap:22px;align-self:center;z-index:1}
.hero .hero-copy h1{font-size:clamp(42px,4.6vw,68px);line-height:1.08;letter-spacing:-.055em;max-width:570px;color:#162b49;text-wrap:balance}
.hero .hero-copy p{font-size:16px;line-height:1.7;max-width:390px;color:#46536a}
.hero .hero-copy .eyebrow{font-size:10px;line-height:1.5;letter-spacing:.12em;color:#556781}
.hero .hero-copy .button{margin-top:4px;min-height:48px}
.hero .hero-scene{grid-column:2;grid-row:1;height:clamp(440px,62svh,700px);min-width:0;position:relative;overflow:hidden;border-radius:8px;background:#e5dfd1}
body[data-home=true] .hero .hero-scene[data-lab=image-curtain]>img{width:100%;height:100%;object-fit:cover;object-position:100% center;transform:none!important}
.hero .hero-caption{display:block;position:static;grid-column:2;grid-row:2;background:transparent;padding:0;font-size:10px;color:#637085;letter-spacing:.08em;text-align:right}
@media(min-width:761px) and (max-width:1024px){
 .hero{column-gap:28px;padding-inline:5%;padding-top:112px}.hero .hero-copy h1{font-size:clamp(40px,5vw,52px)}.hero .hero-scene{height:clamp(460px,57svh,630px)}
 .hero .hero-copy p{font-size:15px}
}
@media(max-width:760px){
 .hero{grid-template-columns:minmax(0,1fr);gap:22px;padding:96px 6% 26px}
 .hero .hero-copy{grid-column:1;grid-row:1;gap:14px;padding:0;justify-content:start}
 .hero .hero-copy h1{font-size:clamp(34px,8.8vw,49px);max-width:570px;line-height:1.08}
 .hero .hero-copy p{font-size:14px;max-width:440px;line-height:1.65}
 .hero .hero-copy .eyebrow{font-size:9px}
 .hero .hero-copy .button{min-height:44px;margin-top:0;font-size:12px;padding:10px 18px}
 .hero .hero-scene{grid-column:1;grid-row:2;height:clamp(260px,40svh,420px);aspect-ratio:auto;border-radius:6px}
 .hero .hero-caption{grid-column:1;grid-row:3;margin-top:-12px;font-size:9px;text-align:left}
}
@media(max-width:360px){.hero{padding-top:88px;gap:18px}.hero .hero-copy h1{font-size:32px}.hero .hero-copy p{font-size:13px}}
/* Desktop: immersive photography, while keeping the compact reading composition. */
@media(min-width:1025px){
 .hero{display:block;height:clamp(660px,calc(100svh - 36px),1050px);padding:0;position:relative;background:#e8e1d4}
 .hero .hero-scene{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
 body[data-home=true] .hero .hero-scene[data-lab=image-curtain]>img{object-position:80% 40%}
 .hero:after{display:block;content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f4f0e7d9 0%,#f4f0e7a8 32%,#f4f0e700 65%);pointer-events:none}
 .hero .hero-copy{position:absolute;inset:110px auto 55px max(6%,calc((100vw - 1440px)/2))!important;width:43%;max-width:630px;justify-content:center;gap:24px;z-index:2}
 .hero .hero-copy h1{font-size:clamp(54px,4.7vw,78px);max-width:630px}
 .hero .hero-copy p{max-width:400px}
 .hero .hero-caption{position:absolute;right:5%;bottom:24px;z-index:2;background:#fbfcfed9;border-radius:4px;padding:8px 12px}
}