/* Keep the complete 3:4 hero photograph in view across screen sizes. */
.hero{
  --hero-header-height:113px;
  min-height:0;
  align-items:center;
  grid-template-columns:1.15fr 1fr;
  padding:24px 5.5%;
  gap:4%;
}
.hero-copy{padding:24px 0;min-width:0}
.hero h1{font-size:clamp(43px,4.6vw,74px);line-height:1.04;margin-top:24px}
.hero h1 span,.hero h1 em{display:block}
.hero-description{font-size:15px;margin-top:23px}
.hero-subtext{max-width:36ch}
.hero .button{margin-top:23px}
.hero .text-link{margin-top:14px}
.hero-image-wrap{
  width:min(100%,570px);
  width:min(100%,570px,calc((100svh - var(--hero-header-height) - 48px)*.75));
  height:auto;
  min-height:0;
  aspect-ratio:3/4;
  margin:0;
  align-self:start;
  justify-self:end;
}
.hero-image{object-fit:contain;object-position:50% 50%}
.hero-image-wrap .image-index{font-size:7px;letter-spacing:.13em}
@media(max-width:1100px){
  .hero{--hero-header-height:100px;padding-left:5%;padding-right:5%;gap:3%}
  .hero h1{font-size:clamp(42px,4.9vw,54px)}
  .hero .eyebrow{font-size:8px;letter-spacing:.12em}
  .hero-copy{padding:12px 0}
}
@media(max-width:800px){
  .hero{--hero-title-size:clamp(35px,8.8vw,60px);display:flex;flex-direction:column;gap:0;padding:24px 0 32px}
  .hero-copy{display:contents}
  .hero .eyebrow,.hero h1,.hero-description,.hero-subtext,.hero .button,.hero .text-link{margin-left:7%;margin-right:7%;align-self:flex-start}
  .hero .eyebrow{order:0;font-size:8px;letter-spacing:.11em}
  .hero h1{order:1;font-size:var(--hero-title-size);line-height:1.04;margin-top:16px;margin-bottom:22px}
  .hero h1 em{max-width:none}
  .hero-image-wrap{
    order:2;
    width:min(88vw,480px);
    width:min(88vw,480px,calc((100svh - 192px - var(--hero-title-size)*2.08)*.75));
    margin:0 auto;
    height:auto;
    min-height:0;
    align-self:center;
  }
  .hero-description{order:3;font-size:15px;margin-top:24px}
  .hero-subtext{order:4;margin-top:10px;max-width:44ch}
  .hero .button{order:5;margin-top:20px;font-size:11px;padding:16px 20px}
  .hero .text-link{order:6;margin-top:12px}
  .hero-image-wrap .image-index{left:12px;bottom:12px;font-size:6px;padding:6px 8px}
}
@media(max-width:800px) and (max-height:599px) and (orientation:landscape){
  .hero-image-wrap{width:min(88vw,480px,54svh)}
}
/* A short tablet screen has more useful space beside the copy than beneath it. */
@media(min-width:561px) and (max-width:800px) and (max-height:700px){
  .hero{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;padding:20px 5%;align-items:center}
  .hero-copy{display:flex;flex-direction:column;padding:0}
  .hero .eyebrow,.hero h1,.hero-description,.hero-subtext,.hero .button,.hero .text-link{margin-left:0;margin-right:0}
  .hero h1{font-size:clamp(32px,5vw,40px);margin-bottom:0}
  .hero-description{font-size:13px;margin-top:20px}
  .hero-subtext{font-size:11px}
  .hero-image-wrap{width:min(100%,calc((100svh - 137px)*.75));margin:0;align-self:start;justify-self:end}
}