#home.page-section {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  flex-direction: column;
  min-height: 634px;
  min-height: clamp(634px, calc(69svh + 84px), 774px);
  margin: 0;
  padding: calc(env(safe-area-inset-top) + 30px) max(var(--content-gutter), env(safe-area-inset-right), env(safe-area-inset-left)) 64px;
  overflow: hidden;
  color: #fff9f0;
  background: #31251e;
}

#home .slideshow-container,
#home .slideshow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: hidden;
}

#home .slideshow-container {
  z-index: -1;
  pointer-events: none;
}

#home .slideshow-container::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    linear-gradient(180deg, var(--cover-top-shade, transparent), transparent 56px),
    rgba(0, 0, 0, .64);
  pointer-events: none;
}

#home .slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  opacity: 0;
  transition: opacity 620ms ease;
}

#home .slide:nth-child(2) { object-position: center 60%; }
#home .slide:nth-child(3) { object-position: center 50%; }
#home .slide.active { opacity: 1; }

#home .hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 690px;
  min-width: 0;
  margin: 0 auto;
  text-align: center;
}

#home .hero-brand {
  margin-bottom: 8px;
}

#home .hero-brand .logo {
  width: clamp(150px, 42vw, 190px);
  height: auto;
  filter: brightness(0) invert(63.9%) sepia(100%) saturate(140%) hue-rotate(-1deg)
    drop-shadow(0 1px 2px rgba(0, 0, 0, .86));
}

#home .hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: var(--carousel-title-height, 0px);
  margin: 0;
  font: 400 clamp(38px, 9vw, 46px)/1.17 var(--display-font);
  letter-spacing: -0.02em;
  color: #fff9f0;
  text-align: center;
  text-shadow: 0 2px 16px rgba(0,0,0,.30);
}

#home .hero-title > span {
  display: block;
  max-width: 100%;
}

#home .hero-subtitle {
  color: #e6c387;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 2px 14px rgba(0, 0, 0, .65);
}

#home .hero-description-container {
  width: 100%;
  max-width: 480px;
  margin-top: 12px;
}

#home .hero-description-container .section-description {
  color: #fff9f0;
  min-height: var(--carousel-description-height, 0px);
  line-height: 1.68;
  text-align: center;
  text-align-last: center;
  hyphens: none;
  -webkit-hyphens: none;
  text-shadow: 0 1px 10px rgba(0,0,0,.34);
}

#home .hero-buttons {
  display: none;
}

#home .quote-button,
#home .whatsapp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  gap: 10px;
  padding: 12px 23px;
  font: 400 var(--body-copy-size)/1.3 var(--body-font);
  text-align: center;
  text-decoration: none;
}

#home .quote-button:hover,
#home .whatsapp-button:hover { filter: brightness(.94); }

#home .hero-buttons .quote-button {
  color: #fff9f0;
  background: var(--gold);
}

#home .hero-carousel-controls {
  position: absolute;
  z-index: 2;
  right: var(--content-gutter);
  bottom: 12px;
  left: var(--content-gutter);
  display: flex;
  align-items: center;
  justify-content: center;
}

#home .hero-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 8px;
  border-radius: 20px;
  background: rgba(22, 14, 10, .78);
}

#home .hero-carousel-arrow {
  display: none;
}

#home .hero-carousel-dot {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

#home .hero-carousel-dot::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #fff9f0;
  background: transparent;
  transition: background-color 160ms ease;
}

#home .hero-carousel-dot[aria-current="true"]::before {
  background: #fff9f0;
}

@media (max-width: 600px) {
  #home .slide:first-child {
    min-height: 650px;
    min-height: clamp(650px, 82svh, 800px);
  }
}

@media (max-width: 950px), (max-width: 1440px) and (pointer: coarse) {
  html.home-cover-at-top {
    --cover-top-shade: #000;
  }

  html.home-cover-at-top,
  html.home-cover-at-top body.home-landing {
    background-color: var(--cover-top-shade);
  }

  .home-landing {
    --home-control-background: #080808;
    padding-top: 0;
  }

  .home-landing .nav-bar {
    inset: calc(env(safe-area-inset-top) + 10px) max(var(--content-gutter), env(safe-area-inset-right)) auto auto;
    width: max-content;
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    pointer-events: none;
  }

  .home-landing .nav-bar .menu-toggle {
    position: fixed;
    inset: calc(env(safe-area-inset-top) + 10px) max(var(--content-gutter), env(safe-area-inset-right)) auto auto;
    color: #fff9f0;
    background: var(--home-control-background);
    border-color: #66635f;
    pointer-events: auto;
  }

  #home .hero-carousel-dots {
    background: var(--home-control-background);
  }

  .home-landing .nav-bar .menu-close {
    top: calc(env(safe-area-inset-top) + 10px);
    right: max(var(--content-gutter), env(safe-area-inset-right));
  }
}

@media (width > 600px) {
  #home.page-section {
    min-height: 710px;
    min-height: clamp(710px, calc(74svh + 100px), 860px);
  }

  #home .hero-title {
    font-size: clamp(41px, 6.7vw, 56px);
    line-height: 1.2;
  }

  #home .hero-carousel-controls { bottom: 20px; }

  #home .hero-description-container {
    max-width: 620px;
    margin-top: 14px;
  }

  #home .hero-description-container .section-description {
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: 1.72;
  }
}

@media (width > 950px) and (pointer: fine), (width > 950px) and (pointer: none), (width > 1440px) {
  #home.page-section {
    flex-direction: row;
    align-items: flex-start;
    min-height: clamp(520px, calc(100svh - 130px), 690px);
    padding: calc(env(safe-area-inset-top) + 30px) max(var(--content-gutter), calc((100vw - var(--site-max)) / 2)) 128px;
  }

  #home .hero-content { max-width: 790px; }
  #home .hero-brand .logo { width: clamp(210px, 30svh, 258px); }

  #home .hero-title {
    max-width: 760px;
    font-size: clamp(48px, 5.4vw, 72px);
    line-height: 1.17;
  }

  #home .hero-title,
  #home .hero-subtitle {
    text-shadow: none;
  }

  #home .hero-description-container { margin-top: 10px; }

  #home .hero-description-container .section-description {
    font-size: clamp(14px, 1.15vw, 17px);
    line-height: 1.7;
  }

  #home .hero-carousel-controls {
    right: max(var(--content-gutter), calc((100vw - var(--site-max)) / 2));
    bottom: 12px;
    left: max(var(--content-gutter), calc((100vw - var(--site-max)) / 2));
    gap: 10px;
  }

  #home .hero-carousel-arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #fff9f0;
    background: rgba(22, 14, 10, .78);
    border: 0;
    border-radius: 13px;
    cursor: pointer;
  }

  #home .hero-carousel-arrow::before {
    content: "";
    width: 18px;
    height: 18px;
    background: center / contain no-repeat var(--review-arrow-icon);
  }

  #home .hero-carousel-arrow[data-carousel-step="-1"]::before {
    transform: rotate(180deg);
  }

  #home .hero-carousel-arrow:hover {
    background: rgba(22, 14, 10, .94);
  }

  #home .hero-carousel-arrow:focus-visible {
    outline-color: #fff9f0;
  }
}
