/* Keep the expressive desktop composition; give smaller screens a typographic hero. */
@media(max-width:1200px){
 body:not(.case-page) .hero{min-height:0;padding:112px 0 88px}
 body:not(.case-page) .hero-stage{max-width:860px;padding:0 24px;margin-inline:auto}
 body:not(.case-page) .hero .design-object{display:none}
 body:not(.case-page) .hero h1{
  display:grid;
  grid-template-columns:max-content max-content;
  justify-content:center;
  justify-items:center;
  align-items:center;
  gap:.12em .09em;
  font-size:clamp(4.25rem,21vw,8rem);
  line-height:1.04;
  letter-spacing:-.012em;
 }
 body:not(.case-page) .hero .hero-line,
 body:not(.case-page) .hero .hero-line:last-child{display:contents;font-size:inherit}
 body:not(.case-page) .hero h1 .word{padding:.045em .16em .09em;margin:0}
 body:not(.case-page) .hero .word-name{grid-area:1 / 1 / 2 / 3}
 body:not(.case-page) .hero .word-surname{grid-area:2 / 1 / 3 / 3}
 body:not(.case-page) .hero .word-prefix{grid-area:3 / 1 / 4 / 2;font-size:.56em;justify-self:end}
 body:not(.case-page) .hero .word-product{grid-area:3 / 2 / 4 / 3;font-size:.56em;justify-self:start}
 body:not(.case-page) .hero .word-designer{grid-area:4 / 1 / 5 / 3;font-size:.82em}
 body:not(.case-page) .hero-copy{max-width:34rem;padding-inline:24px;margin:32px auto 28px}
}
@media(max-width:650px){
 body:not(.case-page) .hero{padding-top:100px;padding-bottom:80px}
 body:not(.case-page) .hero-stage{padding-inline:20px}
}