.arvin-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(430px, 58vw, 680px);
  overflow: hidden;
  color: #fff;
  background-image: var(--arvin-hero-image);
  background-position: center 52%;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: inherit;
}
.arvin-hero__shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 24, 25, .76) 0%, rgba(3, 24, 25, .58) 42%, rgba(3, 24, 25, .12) 100%);
}
.arvin-hero[dir="rtl"] .arvin-hero__shade {
  background: linear-gradient(270deg, rgba(3, 24, 25, .76) 0%, rgba(3, 24, 25, .58) 42%, rgba(3, 24, 25, .12) 100%);
}
.arvin-hero__content {
  width: min(100% - 48px, 1180px);
  margin-inline: auto;
  padding-block: 76px;
  text-align: start;
}
.arvin-hero__eyebrow {
  margin: 0 0 16px;
  color: #bce8e6;
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 700;
  letter-spacing: .08em;
}
.arvin-hero h1 {
  max-width: 760px;
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(34px, 5.2vw, 64px);
  font-weight: 750;
  line-height: 1.2;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .25);
}
.arvin-hero__body {
  max-width: 650px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, .96);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.75;
}
.arvin-hero__button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border: 1px solid #fff;
  border-radius: 7px;
  background: #28695c;
  color: #fff !important;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background-color .2s ease, transform .2s ease;
}
.arvin-hero__button:hover,
.arvin-hero__button:focus-visible {
  background: #1b5148;
  color: #fff !important;
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .arvin-hero { min-height: 500px; background-position: center; }
  .arvin-hero__shade { background: rgba(3, 24, 25, .55); }
  .arvin-hero[dir="rtl"] .arvin-hero__shade { background: rgba(3, 24, 25, .55); }
  .arvin-hero__content { width: min(100% - 36px, 1180px); padding-block: 58px; }
  .arvin-hero h1 { max-width: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .arvin-hero__button { transition: none; }
}