/* Keep the hero artwork in its own grid column so its pieces scale together. */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(20px,3vw,48px);
  height:auto;
  min-height:520px;
  align-items:center;
}
.hero-copy{min-width:0;max-width:590px}
.hero-art{
  position:relative;
  inset:auto;
  justify-self:stretch;
  align-self:center;
  width:100%;
  height:410px;
  min-width:0;
}
.display-frame{
  width:min(72%,330px);
  height:min(95%,390px);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-3deg);
}
.floating-card{
  left:5%;
  bottom:12%;
  width:clamp(104px,10vw,127px);
}
.hero-art-note{display:none}
.hero-side-label{right:10px}

@media(max-width:980px){
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:16px;padding-left:5%;padding-right:5%;min-height:485px}
  .hero h1{font-size:clamp(40px,5.4vw,54px)}
  .hero-art{height:370px}
  .display-frame{width:min(84%,300px);height:min(94%,345px)}
  .floating-card{left:3%;bottom:11%;width:112px}
  .hero-side-label{display:none}
}

@media(max-width:650px){
  .header-main{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding-left:6%;padding-right:6%}
  .brand{font-size:clamp(12px,3.8vw,15px);letter-spacing:0;gap:6px}
  .brand-star{font-size:21px}
  .header-links{min-width:0;gap:0;justify-content:flex-end}
  .header-links .header-tagline{display:none}
  .header-links .contact-link{font-size:8px;white-space:nowrap}
  .hero{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto 320px;
    gap:0;
    height:auto;
    min-height:0;
    padding:44px 7% 0;
  }
  .hero-copy{max-width:100%}
  .hero h1{font-size:clamp(39px,10vw,48px);letter-spacing:-1.1px}
  .hero-description{max-width:360px}
  .hero-caption{margin-top:25px}
  .hero-art{width:calc(100% + 14%);height:320px;margin:18px -7% 0;align-self:stretch}
  .display-frame{width:min(68vw,235px);height:min(290px,92%);top:50%;left:50%}
  .floating-card{left:3%;bottom:9%;width:clamp(96px,30vw,112px);height:68px;padding:9px}
  .floating-card span:last-child{font-size:7px}
  .floating-star{font-size:23px}
  .hero-side-label{display:none}
}

@media(max-width:370px){
  .hero{padding-top:38px;grid-template-rows:auto 285px}
  .hero h1{font-size:38px}
  .hero-art{height:285px}
  .display-frame{width:205px;height:260px}
  .floating-card{width:92px;left:2%;bottom:8%}
}