@media(max-height:780px) and (min-width:768px) {
.copy h1 {
font-size:clamp(38px,4.1vw,60px)
}
.copy p {
font-size:17px;
margin-top:23px
}
.page {
grid-template-rows:72px minmax(0,1fr);
padding-bottom:24px
}
.art {
max-height:510px
}

}

@media(max-width:767px) {
.page {
height:100svh;
min-height:700px;
padding:0 26px 24px;
grid-template-rows:65px minmax(0,1fr)
}
.brand {
font-size:18px
}
.hero {
display:flex;
flex-direction:column;
align-items:stretch;
justify-content:center;
gap:24px
}
.copy {
order:1;
max-width:none!important
}
.copy h1 {
font-size:38px!important;
line-height:1.18;
letter-spacing:-.04em
}
.copy p {
font-size:15px!important;
line-height:1.85;
margin-top:20px;
max-width:100%;
opacity:.9
}
.art {
order:2;
height:260px;
flex:none;
max-height:none;
align-self:center
}
.art img {
max-height:100%
}

}

@media(max-width:360px) {
.page {
padding-left:22px;
padding-right:22px
}
.copy h1 {
font-size:34px!important
}
.copy p {
font-size:14px!important
}
.art {
height:235px!important
}

}

@media(max-width:767px) and (max-height:740px) {
.hero {
gap:16px
}
.copy h1 {
font-size:34px!important
}
.copy p {
font-size:14px!important;
margin-top:16px
}
.art {
height:210px!important
}
.page {
min-height:660px;
grid-template-rows:58px minmax(0,1fr)
}

}