/* Homepage hero redesign */
.hero{
  width:min(1240px,calc(100% - 48px));
  min-height:640px;
  grid-template-columns:minmax(510px,1.02fr) minmax(480px,.98fr);
  gap:34px;
  padding:72px 0 78px;
}
.hero-copy{position:relative;z-index:2;padding:18px 0}
.hero-copy .eyebrow{margin-bottom:28px}
.hero h1{
  max-width:none;
  font-size:clamp(58px,5.15vw,78px);
  line-height:.94;
  letter-spacing:-3.5px;
}
.hero h1 span{display:inline-block;white-space:nowrap;margin-top:8px}
.hero .lede{max-width:570px;margin:30px 0 0;font-size:18px;line-height:1.65}
.hero .actions{margin:32px 0 0}
.hero .button{min-height:58px}
.hero-note{margin-top:38px;padding-top:22px;border-top:2px dashed rgba(33,26,61,.22);max-width:520px}
.hero-art{
  min-height:520px;
  display:grid;
  place-items:center;
  isolation:isolate;
}
.hero-art::before{
  content:"";
  position:absolute;
  inset:7% 0 4% 3%;
  z-index:-1;
  border:3px solid var(--ink);
  border-radius:48% 52% 42% 58% / 55% 44% 56% 45%;
  background:#bfeafa;
  box-shadow:8px 9px 0 var(--ink);
  transform:rotate(2deg);
}
.hero-art img{width:106%;max-width:680px;max-height:570px;object-fit:contain;border:3px solid var(--ink);border-radius:34px;box-shadow:8px 9px 0 var(--ink);filter:none;animation:hero-picture-float 5s ease-in-out infinite;will-change:transform}
.hero-art .doodle{z-index:2}
@keyframes hero-picture-float{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-10px) rotate(.5deg)}}
@media(prefers-reduced-motion:reduce){.hero-art img{animation:none}}

@media(max-width:1080px){
  .hero{grid-template-columns:minmax(440px,.95fr) minmax(420px,1.05fr);gap:24px}
  .hero h1{font-size:clamp(55px,6vw,68px)}
}
@media(max-width:900px){
  .hero{width:min(680px,calc(100% - 40px));min-height:auto;grid-template-columns:1fr;gap:38px;padding:52px 0 70px}
  .hero-copy{padding:0}
  .hero-art{order:initial;min-height:430px}
  .hero-art img{max-height:460px}
  .hero h1{font-size:clamp(52px,10vw,72px)}
}
@media(max-width:560px){
  .hero{width:calc(100% - 32px);padding-top:40px}
  .hero h1{font-size:clamp(43px,12.7vw,60px);letter-spacing:-2.5px}
  .hero h1 span{white-space:normal;margin-top:5px}
  .hero .lede{font-size:16px;margin-top:24px}
  .hero .actions{display:grid;grid-template-columns:1fr;margin-top:28px}
  .hero .button{width:100%}
  .hero-note{margin-top:32px}
  .hero-art{min-height:330px}
  .hero-art::before{inset:6% 1% 2%}
}