.hero .hero-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
  align-items: start;
  padding-block: 80px 96px;
}
.hero .hero-copy { margin: 0; max-width: 500px; }
.hero .hero-content #hero-title {
  position: relative;
  font-size: 260px;
  line-height: 1;
  text-align: left;
  width: max-content;
  max-width: 100%;
  color: #f4f4ee;
  letter-spacing: 0;
}
.clip-intro { min-width: 0; }
.clip-sticky { position: relative; }
#hero-title .clip-hero-canvas {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  opacity: 0;
}
.hero .hero-content #hero-title.clip-hero-ready { color: transparent; }
#hero-title.clip-hero-ready .clip-hero-canvas { opacity: 1; }
@media (max-width: 1199px) {
  .hero .hero-content { gap: 48px; padding-block: 64px 88px; }
  .hero .hero-content #hero-title { font-size: 224px; }
}
@media (max-width: 1000px) {
  .hero { min-height: 0; }
  .hero .hero-content { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 48px 80px; }
  .hero .hero-content #hero-title { font-size: 192px; }
}
@media (max-width: 560px) {
  .hero .hero-content { gap: 32px; padding-block: 36px 76px; }
  .hero .hero-content #hero-title { font-size: 160px; }
}
@media (max-width: 380px) {
  .hero .hero-content #hero-title { font-size: 136px; }
}
@media (max-height: 700px) and (max-width: 560px) {
  .hero .hero-content { gap: 24px; padding-block: 24px 64px; }
  .hero .hero-content #hero-title { font-size: 120px; }
}
@media (max-height: 700px) and (min-width: 1001px) {
  .hero .hero-content { padding-block: 48px 72px; }
  .hero .hero-content #hero-title { font-size: 192px; }
}
@media (max-height: 500px) and (min-width: 561px) {
  .hero .hero-content { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; padding-block: 32px 64px; }
  .hero .hero-content #hero-title { font-size: 120px; }
}
@media (max-height: 500px) and (min-width: 561px) and (max-width: 700px) {
  .hero .hero-content #hero-title { font-size: 96px; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .hero .hero-content #hero-title.clip-hero-ready { color: #f4f4ee; }
  #hero-title .clip-hero-canvas { display: none; }
}