/* Homepage hero only. Use the supplied image unchanged as a CSS background. */
.hero-ui :focus-visible { outline-color: #e7e7e7; }

.hero-ui {
  background-color: #0d0d0d;
  background-image: url('/assets/hero-background.webp');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  isolation: isolate;
  overflow: hidden;
}
.hero-ui::before {
  z-index: -1;
  background: linear-gradient(90deg, #08080880 0%, #08080840 36%, transparent 62%);
}
.hero-ui .hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: clamp(680px, 100svh, 1000px);
  padding-top: 164px;
  padding-bottom: 100px;
  pointer-events: none;
}
.hero-copy { width: max-content; max-width: 100%; pointer-events: auto; }
.hero-ui .hero h1 {
  max-width: none;
  margin: 0 0 26px;
  color: #f5f5f5;
  font-size: clamp(52px, 6.2vw, 104px);
  font-weight: 550;
  line-height: 1.075;
  letter-spacing: -.065em;
  word-spacing: 0;
}
.hero-ui .hero h1 span {
  color: #b8b8b8;
  background: none;
  font-weight: 460;
  white-space: nowrap;
}
.hero-ui .hero-description {
  max-width: 38ch;
  color: #b8b8b8;
  font-size: 18px;
  line-height: 1.7;
}
.hero-ui .hero-cta {
  min-height: 58px;
  margin-top: 32px;
  padding: 17px 24px;
  gap: 40px;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  background: #f5f5f5;
  color: #121212;
  font-size: 16px;
  font-weight: 650;
  box-shadow: 0 4px 20px #0002;
  transition: background .2s, transform .2s, box-shadow .2s;
}
@media (hover: hover) and (pointer: fine) {
  .hero-ui .hero-cta:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 26px #ffffff0d;
  }
}
.hero-ui .hero-cta:active { transform: translateY(0); }

@media (min-width: 1600px) {
  .hero-ui .hero { padding-inline: max(var(--gutter), calc((1600px - 1440px) / 2)); }
}
/* The header already overlaps the hero, so desktop needs the full viewport. */
@media (min-width: 1025px) {
  .hero-ui .hero {
    min-height: max(680px, 100vh);
    min-height: max(680px, 100svh);
  }
}
@media (min-width: 1600px) {
  .hero-ui .hero { max-width: 1800px; }
  .hero-ui .hero h1 { font-size: clamp(104px, 4.6vw, 144px); }
  .hero-ui .hero-description { font-size: clamp(18px, .8vw, 22px); }
  .hero-ui .hero-cta {
    font-size: clamp(16px, .65vw, 20px);
    min-height: clamp(58px, 2.5vw, 68px);
  }
}
@media (min-width: 1600px) and (min-aspect-ratio: 21/9) {
  .hero-ui { background-size: auto 100%; background-position: right center; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .hero-ui .hero { min-height: 680px; padding-bottom: 100px; }
  .hero-ui .hero h1 { font-size: 6.2vw; }
}
@media (max-width: 760px) {
  .hero-ui .hero {
    display: block;
    min-height: 0;
    padding-top: 128px;
    padding-bottom: clamp(280px, 65vw, 420px);
  }
  .hero-ui .hero h1 {
    margin-bottom: 22px;
    font-size: clamp(34px, 10.5vw, 76px);
    line-height: 1.1;
    letter-spacing: -.062em;
  }
  .hero-ui .hero-description { max-width: 29ch; font-size: 16px; }
  .hero-ui .hero-cta { min-height: 56px; margin-top: 25px; font-size: 14px; gap: 40px; }
  .hero-ui {
    /* Keep the existing layout; crop the same background below the copy. */
    background-size: auto 58%;
    background-position: right bottom;
  }
  .hero-ui::before {
    background: linear-gradient(180deg, #0d0d0d 32%, #0d0d0d00 55%);
  }
}
@media (max-width: 360px) {
  .hero-ui .hero { padding-top: 116px; padding-bottom: 256px; }
  .hero-ui .hero-description { font-size: 15px; }
  .hero-ui .hero-cta { width: 100%; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ui .hero-cta, .hero-ui .hero-cta .icon { transition: none; }
}
@media (forced-colors: active) {
  .hero-ui { background: Canvas; color: CanvasText; }
  .hero-ui .hero h1, .hero-ui .hero h1 span, .hero-ui .hero-description { color: CanvasText; }
  .hero-ui .hero-cta { border: 1px solid ButtonText; }
  .hero-ui .hero { min-height: 0; padding-bottom: 64px; }
}