.hero { height: 100svh; min-height: 0; }
.hero-copy { padding: 7rem 4vw 2rem; }
.hero h1 { font-size: clamp(3rem, 5vw, 4.8rem); }
.hero figure { min-height: 0; }
.facts { margin-top: 2.5rem; }
.approach h2 { font-size: clamp(2.5rem, 4.2vw, 4.8rem); }
.text-link { padding: .65rem 0; background: none; border: 0; border-bottom: 1px solid; font: inherit; cursor: pointer; }
.brand { color: #fff; }

@media (max-width: 800px) {
  .hero { display: block; position: relative; height: 100svh; overflow: hidden; }
  .hero figure { position: absolute; inset: 0; height: 100%; z-index: 0; }
  .hero figure::after { background: linear-gradient(90deg, #111513e8 0%, #111513b5 58%, #11151322 100%); }
  .hero-copy { position: relative; z-index: 1; height: 100%; padding: 7rem 1.2rem 1.5rem; display: flex; flex-direction: column; align-items: flex-start; }
  .hero h1 { font-size: clamp(2.8rem, 9vw, 4.5rem); max-width: 10ch; }
  .hero-copy > p:not(.eyebrow) { max-width: 30rem; }
  .facts { margin-top: auto; }
  .hero figcaption { display: none; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: clamp(2.7rem, 12vw, 3.4rem); }
  .hero-copy > p:not(.eyebrow) { font-size: .92rem; }
  .facts { gap: .7rem 1rem; font-size: .62rem; }
}