.hero-layout {
  grid-template-columns: 1fr;
  gap: 27px;
  padding-top: 52px;
  padding-bottom: 88px;
}
.hero-copy { max-width: 820px; }
.hero-copy h1 { max-width: 790px; font-size: clamp(2.8rem, 4vw, 4rem); }
.hero-trust { margin-top: 25px; }
.hero-shots {
  width: 100%;
  max-width: 1180px;
  padding: 0 175px 36px 0;
}
.desktop-shot,
.portfolio-shot { margin: 0; }
.desktop-shot {
  overflow: hidden;
  border: 8px solid #142d3c;
  border-radius: 21px;
  background: #142d3c;
  box-shadow: 0 24px 55px #00111970;
}
.desktop-shot img,
.portfolio-shot img {
  width: 100%;
  height: auto;
  filter: none;
}
.desktop-shot figcaption,
.portfolio-shot figcaption {
  padding: 10px 14px;
  font-size: .75rem;
  text-align: left;
}
.desktop-shot figcaption { color: #c8dde6; }
.phone-shot {
  margin: 0;
  width: 265px;
  padding: 13px 7px 7px;
  border: 7px solid #172b3d;
  border-radius: 33px;
  background: #101d2b;
  box-shadow: 0 21px 46px #00151f6e;
}
.phone-speaker {
  display: block;
  width: 41px;
  height: 4px;
  margin: 0 auto 9px;
  border-radius: 99px;
  background: #75889b;
}
.phone-shot img {
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 5px 5px 16px 16px;
  filter: none;
}
.phone-shot figcaption {
  padding: 9px 4px 3px;
  color: #cedee6;
  font-size: .7rem;
  text-align: center;
}
.hero-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 235px;
}
.product-layout { grid-template-columns: .8fr 1.2fr; }
.product-visual { justify-content: center; }
.route-phone { width: min(100%, 280px); }
.portfolio-preview { background: #f2f6f8; }
.portfolio-copy { max-width: 720px; margin-bottom: 30px; }
.portfolio-copy h2 {
  font-size: clamp(2.1rem, 3.5vw, 3.55rem);
  letter-spacing: -.045em;
  line-height: 1.13;
  margin: 0 0 18px;
}
.portfolio-copy > p:last-child {
  color: #597284;
  line-height: 1.75;
  font-size: 1.03rem;
}
.portfolio-shot {
  max-width: 1100px;
  overflow: hidden;
  border: 1px solid #d4e0e8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 35px #1231461a;
}
.portfolio-shot figcaption { color: #587286; }
@media (max-width: 720px) {
  .hero-layout { gap: 30px; padding-top: 54px; padding-bottom: 64px; }
  .hero-copy h1 { font-size: clamp(2.5rem, 10vw, 4rem); }
  .hero-shots { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 0; }
  .desktop-shot { border-width: 5px; border-radius: 13px; }
  .desktop-shot figcaption { font-size: .65rem; padding: 8px; }
  .hero-phone { position: relative; right: auto; bottom: auto; order: -1; width: min(68%, 255px); margin: 0; }
  .product-visual { order: 2; }
  .product-copy { order: 1; }
  .route-phone { width: min(75%, 285px); }
  .portfolio-shot figcaption { font-size: .7rem; }
}