/* Landing page */

.hero {
  position: relative;
  padding-top: 60px;
  overflow: hidden;
  /* Navbar + hero fill the viewport; footer sits below the fold. */
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
}

.hero__inner {
  text-align: center;
  position: relative;
  z-index: 2;
}

.hero__title {
  color: #133f36;
  font-size: 46px;
  font-stretch: 100%;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.hero__subtitle {
  color: #1a2e28;
  font-size: 19px;
  margin: 18px auto 0;
  max-width: 620px;
}

/* Search bar */
.searchbar {
  margin: 34px auto 0;
  max-width: 720px;
  background: var(--white);
  border-radius: var(--radius-pill);
  /* Hairline + tight ambient shadow define the pill edge on white,
     deep soft shadow gives the elevation. */
  border: 1px solid rgba(16, 40, 40, 0.07);
  box-shadow: 0 2px 6px rgba(16, 40, 40, 0.10),
    0 28px 60px -14px rgba(16, 40, 40, 0.32);
  display: flex;
  align-items: center;
  padding: 7px 7px 7px 8px;
  gap: 0;
}
.searchbar__field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
}
.searchbar__field input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-stretch: 90%;
  color: var(--grey-consult);
  padding: 12px 14px;
}
.searchbar__field input::placeholder {
  color: #6f7a79;
  opacity: 1;
}
.searchbar__div {
  width: 1px;
  align-self: stretch;
  margin: 8px 0;
  background: #d9dedd;
  flex: 0 0 auto;
}
.searchbar__btn {
  flex: 0 0 auto;
  font-size: 14px;
  padding: 12px 22px;
  margin-left: 6px;
  background: #d86641;
  box-shadow: 0 8px 18px -5px rgba(216, 102, 65, 0.55);
}
.searchbar__btn:hover {
  background: #c4552f;
}

/* Animals band — pushed to the bottom of the full-height hero */
.hero__animals {
  margin-top: auto;
}
.hero__animals img {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  /* Scene is pre-cropped tight to the animals — display at natural ratio. */
}

@media (max-width: 860px) {
  .hero {
    padding-top: 28px;
  }
  .hero__title {
    font-size: 34px;
  }
  .hero__subtitle {
    font-size: 17px;
    max-width: 360px;
  }
  .searchbar {
    flex-direction: column;
    border-radius: 28px;
    padding: 14px;
    gap: 12px;
    max-width: 420px;
    background: transparent;
    box-shadow: none;
  }
  .searchbar__field {
    width: 100%;
    background: var(--white);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-card);
  }
  .searchbar__field input {
    padding: 16px 22px;
    font-size: 15px;
  }
  .searchbar__div {
    display: none;
  }
  .searchbar__btn {
    width: 100%;
    margin-left: 0;
    padding: 16px;
    font-size: 16px;
  }
}