:root {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.lp {
  margin: 0 auto;
  max-width: 2880px;
  overflow: hidden;
}

.lp-stack {
  width: 100%;
}

.lp-stack--mobile {
  display: none;
}

.lp-stack > img,
.lp-image-link {
  display: block;
  width: 100%;
  scroll-margin-top: 0;
}

.lp-stack > img,
.lp-image-link img {
  display: block;
  width: 100%;
  height: auto;
}

.lp-image-link {
  color: inherit;
  text-decoration: none;
}

.lp-image-link:focus-visible {
  outline: 3px solid #0800ff;
  outline-offset: -3px;
}

.lp-stack > img {
  scroll-margin-top: 0;
}

.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: min(2.0833vw, 60px);
  width: 100%;
  height: min(6.9792vw, 201px);
  min-height: 64px;
  padding: 0 min(5.5556vw, 160px);
  background: #fff;
}

.site-header__menu-button {
  display: none;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: min(1.0417vw, 30px);
  min-width: 0;
}

.site-header__link {
  display: inline-flex;
  align-items: center;
  gap: min(0.5556vw, 16px);
  color: #050505;
  font-size: clamp(16px, 1.1806vw, 34px);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-header__link:hover,
.site-header__link:focus-visible {
  color: #0800ff;
}

.site-header__link:focus-visible,
.site-header__brand:focus-visible {
  outline: 2px solid #0800ff;
  outline-offset: 6px;
}

.site-header__chevron {
  display: block;
  width: clamp(9px, 0.7292vw, 21px);
  height: clamp(9px, 0.7292vw, 21px);
  border-right: clamp(2px, 0.1042vw, 3px) solid #0800ff;
  border-bottom: clamp(2px, 0.1042vw, 3px) solid #0800ff;
  transform: translateY(-20%) rotate(45deg);
}

.site-header__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-header__brand--aro {
  margin-left: auto;
}

.site-header__logo {
  display: block;
  width: min(23.1597vw, 667px);
  height: auto;
}

.site-header__aro-logo {
  display: block;
  /* width: min(7.5694vw, 218px); */
  height: auto;
}

.hero-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 2880 / 1758;
  overflow: hidden;
}

.hero-banner__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 800ms ease, visibility 0s 800ms;
}

.hero-banner__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 800ms ease, visibility 0s 0s;
}

.hero-banner__slide > img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-banner__dots {
  position: absolute;
  right: 0;
  bottom: clamp(10px, 1.2vw, 34px);
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: clamp(8px, 0.4vw, 12px);
  pointer-events: none;
}

.hero-banner__dot {
  width: clamp(7px, 0.4vw, 11px);
  height: clamp(7px, 0.4vw, 11px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  pointer-events: auto;
}

.hero-banner__dot.is-active {
  background: #fff;
}

.hero-banner__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.carousel {
  --card-width: min(15.9722vw, 460px);
  --card-gap: min(2.8vw, 80.64px);
  --button-size: clamp(28px, 1.9vw, 56px);
  --carousel-padding-y: min(1.1111vw, 32px);
  --carousel-bleed-y: min(1.6667vw, 48px);

  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: min(27.6389vw, 796px);
  padding: var(--carousel-padding-y) 0;
  overflow: hidden;
  background: #f2f2f2;
}

.carousel__viewport {
  width: 100%;
  padding: var(--carousel-bleed-y) 0;
  overflow: hidden;
  touch-action: pan-y;
}

.carousel__track {
  display: flex;
  align-items: center;
  gap: var(--card-gap);
  width: max-content;
  opacity: 0;
  transition:
    opacity 180ms ease,
    transform 420ms ease;
}

.carousel.is-ready .carousel__track {
  opacity: 1;
}

.carousel__slide {
  flex: 0 0 var(--card-width);
}

.carousel__slide img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.74;
  transform: scale(0.94);
  transform-origin: center;
  transition:
    opacity 420ms ease,
    transform 420ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

.carousel__slide.is-active img {
  opacity: 1;
  transform: scale(1.045);
}

.carousel__button {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  place-items: center;
  width: var(--button-size);
  height: var(--button-size);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #0800ff;
  cursor: pointer;
  font: 400 clamp(28px, 2.1vw, 62px) / 1 Arial, Helvetica, sans-serif;
  transform: translateY(-50%);
}

.carousel__button--previous {
  left: min(1.2vw, 34.56px);
}

.carousel__button--next {
  right: min(1.2vw, 34.56px);
}

.carousel__button:focus-visible,
.carousel__dot:focus-visible {
  outline: 2px solid #0800ff;
  outline-offset: 3px;
}

.carousel__dots {
  position: absolute;
  right: 0;
  bottom: clamp(10px, 1.2vw, 34px);
  left: 0;
  display: flex;
  justify-content: center;
  gap: clamp(8px, 0.4vw, 12px);
}

.carousel__dot {
  width: clamp(7px, 0.4vw, 11px);
  height: clamp(7px, 0.4vw, 11px);
  padding: 0;
  border: 1px solid #0800ff;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.carousel__dot[aria-current="true"] {
  background: #0800ff;
}

.lead-form-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  aspect-ratio: 2880 / 762;
  background: #f4f4f4;
}

.lead-form-section__title {
  margin: min(2.52vw, 72.5px) 0 min(2.28vw, 65.5px);
  color: #0800ff;
  font-size: clamp(20px, 1.42vw, 41px);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.lead-form-section__panel {
  display: flex;
  justify-content: center;
  width: min(47.9167vw, 1380px);
  min-height: min(17.7083vw, 510px);
  padding: min(2.3958vw, 69px) min(2.7778vw, 80px) min(2.2222vw, 64px);
  background: #0800ff;
  margin-bottom: 20px;
}

.lead-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: min(0.5729vw, 16.5px) min(0.4167vw, 12px);
  width: 100%;
}

.lead-form__input {
  width: 100%;
  min-width: 0;
  height: min(2.5347vw, 73px);
  padding: 0 min(0.7639vw, 22px);
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #111;
  font: 400 clamp(18px, 1.11vw, 32px) / 1 Arial, Helvetica, sans-serif;
  outline: none;
}

.lead-form__input:first-child,
.lead-form__input:nth-child(4) {
  grid-column: 1 / -1;
}

.lead-form__input::placeholder {
  color: #929292;
  opacity: 1;
}

.lead-form__input:focus {
  box-shadow: inset 0 0 0 3px #b8b5ff;
}

.lead-form__button {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: end;
  width: min(12.2222vw, 352px);
  height: min(3.125vw, 90px);
  margin-top: min(0.7639vw, 22px);
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #0800ff;
  cursor: pointer;
  font: 400 clamp(20px, 1.42vw, 41px) / 1 Arial, Helvetica, sans-serif;
}

.lead-form__button:focus-visible {
  outline: 3px solid #b8b5ff;
  outline-offset: 4px;
}

.lead-form__button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.lead-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.lead-form__message {
  grid-column: 1 / -1;
  min-height: 1.2em;
  margin: min(0.5556vw, 16px) 0 0;
  color: #fff;
  font-size: clamp(14px, 0.8333vw, 24px);
  line-height: 1.2;
  text-align: center;
}

.lead-form__message[data-status="success"] {
  color: #fff;
}

.lead-form__message[data-status="error"] {
  color: #ffd6d6;
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  width: 100%;
  min-height: min(9.6875vw, 279px);
  padding: 0 min(5.625vw, 162px);
  background: #d8d8d8;
  color: #050505;
  font-size: clamp(12px, 0.6944vw, 20px);
}

.site-footer a {
  color: inherit;
}

.site-footer a:focus-visible {
  outline: 2px solid #0800ff;
  outline-offset: 5px;
}

.site-footer__brand {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.site-footer__brand--aro {
  justify-self: start;
  margin-left: min(9.8611vw, 284px);
}

.site-footer__brand--aro img {
  width: min(7.5694vw, 218px);
  height: auto;
}

.site-footer__center {
  display: grid;
  gap: min(1.1111vw, 32px);
  justify-items: center;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: min(0.8333vw, 24px);
}

.site-footer__social-link {
  display: grid;
  place-items: center;
  width: min(1.5278vw, 44px);
  height: min(1.5278vw, 44px);
  line-height: 0;
  text-decoration: none;
}

.site-footer__social-link img {
  display: block;
  width: auto;
  height: min(1.3889vw, 40px);
}

.site-footer__legal-row {
  display: flex;
  align-items: center;
  gap: min(1.6667vw, 48px);
}

.site-footer__copyright {
  margin: 0;
}

.site-footer__text-link {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.site-footer__phone {
  justify-self: end;
  margin-right: min(4.7222vw, 136px);
  text-decoration: none;
}

.site-footer__brand--verteos {
  justify-self: end;
}

.site-footer__brand--verteos img {
  width: min(13.9583vw, 402px);
  height: auto;
}

@media (max-width: 780px) {
  .lp {
    max-width: 780px;
  }

  .lp-stack--desktop {
    display: none;
  }

  .lp-stack--mobile {
    display: block;
  }

  .site-header {
    height: min(25.7692vw, 201px);
    min-height: 0;
    padding: 0 min(5.5128vw, 43px) 0 min(8.3333vw, 65px);
  }

  .site-header__menu-button {
    display: grid;
    gap: min(2.3077vw, 18px);
    width: min(7.1795vw, 56px);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .site-header__menu-button span {
    display: block;
    width: 100%;
    height: min(0.5128vw, 4px);
    background: #0800ff;
    transform-origin: center;
    transition:
      opacity 220ms ease,
      transform 220ms ease;
  }

  .site-header.is-menu-open .site-header__menu-button span:first-child {
    transform: translateY(2.8205vw) rotate(45deg);
  }

  .site-header.is-menu-open .site-header__menu-button span:nth-child(2) {
    opacity: 0;
  }

  .site-header.is-menu-open .site-header__menu-button span:nth-child(3) {
    transform: translateY(-2.8205vw) rotate(-45deg);
  }

  .site-header__nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    gap: 0;
    padding: min(3.8462vw, 30px) min(8.3333vw, 65px);
    background: #fff;
    box-shadow: 0 min(1.0256vw, 8px) min(2.5641vw, 20px) rgb(0 0 0 / 0.12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity 220ms ease,
      transform 220ms ease;
  }

  .site-header.is-menu-open .site-header__nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-header__link {
    justify-content: space-between;
    width: 100%;
    padding: min(2.5641vw, 20px) 0;
    border-bottom: 1px solid #ececec;
    font-size: clamp(18px, 4.6154vw, 36px);
  }

  .site-header__link:last-child {
    border-bottom: 0;
  }

  .site-header__chevron {
    width: min(2.8205vw, 22px);
    height: min(2.8205vw, 22px);
    border-width: min(0.3846vw, 3px);
  }

  .site-header__brand {
    margin-left: auto;
  }

  .site-header__logo {
    width: min(53.4615vw, 417px);
  }

  .hero-banner {
    aspect-ratio: 780 / 1440;
  }

  .carousel {
    --card-width: min(58.9744vw, 460px);
    --card-gap: min(10.4vw, 81.12px);
    --button-size: clamp(32px, 8vw, 52px);
    --carousel-padding-y: min(4.1026vw, 32px);
    --carousel-bleed-y: min(6.1538vw, 48px);

    min-height: min(108.2051vw, 844px);
  }

  .carousel__button--previous {
    left: min(3vw, 23.4px);
  }

  .carousel__button--next {
    right: min(3vw, 23.4px);
  }

  .lead-form-section {
    justify-content: flex-start;
    aspect-ratio: 780 / 694;
  }

  .lead-form-section__title {
    display: none;
  }

  .lead-form-section__panel {
    width: min(89.4872vw, 698px);
    min-height: min(76.1538vw, 594px);
    padding: min(11.4103vw, 89px) min(7.4359vw, 58px) min(7.1795vw, 56px);
  }

  .lead-form {
    grid-template-columns: 1fr;
    gap: min(1.7949vw, 14px);
  }

  .lead-form__input {
    height: min(9.359vw, 73px);
    padding: 0 min(2.5641vw, 20px);
    font-size: clamp(18px, 4.1026vw, 32px);
  }

  .lead-form__input:first-child,
  .lead-form__input:nth-child(4) {
    grid-column: auto;
  }

  .lead-form__button {
    grid-column: auto;
    width: min(45.2564vw, 353px);
    height: min(11.2821vw, 88px);
    margin-top: min(1.9231vw, 15px);
    font-size: clamp(22px, 5.2564vw, 41px);
  }

  .site-footer {
    position: relative;
    display: block;
    min-height: min(49.8718vw, 389px);
    padding: 0;
    font-size: clamp(13px, 2.5641vw, 20px);
  }

  .site-footer__social {
    position: absolute;
    top: min(4.7436vw, 37px);
    left: min(5.3846vw, 42px);
    gap: min(3.0769vw, 24px);
  }

  .site-footer__social-link {
    width: min(5.1282vw, 40px);
    height: min(5.1282vw, 40px);
  }

  .site-footer__social-link img {
    height: min(5.1282vw, 40px);
  }

  .site-footer__phone {
    position: absolute;
    top: min(6.9231vw, 54px);
    right: min(8.2051vw, 64px);
    margin: 0;
  }

  .site-footer__legal-row {
    position: absolute;
    top: min(14.359vw, 112px);
    left: min(5.3846vw, 42px);
    display: flex;
    gap: min(3.0769vw, 24px);
  }

  .site-footer__brand--aro {
    position: absolute;
    bottom: min(12.5641vw, 98px);
    left: min(5.3846vw, 42px);
    margin: 0;
  }

  .site-footer__brand--aro img {
    width: min(27.9487vw, 218px);
  }

  .site-footer__brand--verteos {
    position: absolute;
    right: min(5.3846vw, 42px);
    bottom: min(12.3077vw, 96px);
  }

  .site-footer__brand--verteos img {
    width: min(35.8974vw, 280px);
  }
}