:root{--page-max:1480px}
body{background:#ece9e2}
.page-shell{width:min(100%,var(--page-max));margin:0 auto;background:var(--cream);box-shadow:0 0 50px rgba(32,63,27,.12);overflow:hidden}
.hero{min-height:700px;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
.hero-copy{padding-left:clamp(42px,6vw,92px);padding-right:clamp(24px,4vw,60px)}
.hero h1{font-size:clamp(48px,5vw,74px);max-width:11em}
.hero-image>img{object-position:62% center}
.section{padding-left:clamp(32px,6vw,90px);padding-right:clamp(32px,6vw,90px)}
.pain .section-head{max-width:980px}
.pain .section-head p{max-width:920px;margin-inline:auto}
@media(max-width:1500px){.page-shell{box-shadow:none}}
@media(max-width:850px){
  .hero{min-height:auto}
  .hero-copy{padding:54px 30px 46px}
  .hero-image{height:520px;overflow:hidden;background:#f0e2c8}
  .hero-image>img{width:100%;height:100%;object-fit:cover;object-position:58% 34%}
}
@media(max-width:720px){
  html,body{width:100%;overflow-x:hidden}
  body{background:var(--cream)}
  .page-shell{width:100%;max-width:none;margin:0;border-radius:0}
  .hero{display:flex!important;flex-direction:column!important;grid-template-columns:none!important;width:100%;min-height:0!important}
  .hero-copy{width:100%!important;max-width:none!important;padding:42px 22px 34px!important}
  .hero h1{width:100%;max-width:100%!important;margin-right:0;font-size:clamp(38px,10.5vw,47px)!important;line-height:1.04;word-break:normal;overflow-wrap:normal}
  .hero .sub,.hero-points,.hero-copy>small{width:100%;max-width:100%}
  .hero .sub{font-size:17px;line-height:1.6}
  .hero-points{grid-template-columns:1fr}
  .hero .btn{width:100%;max-width:360px;text-align:center}
  .hero-image{position:relative;order:2;width:100%!important;height:auto!important;aspect-ratio:3/2;min-height:0!important;overflow:hidden;background:#f3e4c8}
  .hero-image>img{display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:center center!important;transform:none!important;border-radius:0!important}
  .hero-image::before{background:linear-gradient(180deg,#fffaf0 0%,rgba(255,250,240,.45) 10%,transparent 30%)!important}
  .price{width:118px;height:118px;right:16px;bottom:16px}
  .price b{font-size:27px}
  .section{padding-left:18px;padding-right:18px}
  .pain .section-head p{font-size:16px}
}
@media(max-width:380px){
  .hero-copy{padding-inline:18px!important}
  .hero h1{font-size:37px!important}
}