.design--bluehour {
  --page-bg: #f7f4ee;
  --hdr-solid: rgba(17, 19, 24, 0.97);
  --night: #111318;
}
.hero--bluehour {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: clamp(2.5rem, 7vw, 3.5rem);
  background: var(--night);
}
.hero--bluehour .hero__photo {
  position: relative;
  margin: calc(-1 * var(--header-h)) 0 0;
  overflow: hidden;
  aspect-ratio: 4 / 3.3;
}
.hero--bluehour .hero__pic,
.hero--bluehour .hero__pic img {
  display: block;
  width: 100%;
  height: 100%;
}
.hero--bluehour .hero__pic img {
  object-fit: cover;
}
.hero--bluehour .hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(13, 14, 18, 0.6) 0%,
      rgba(13, 14, 18, 0) 24%,
      rgba(13, 14, 18, 0) 62%,
      var(--night) 100%);
}
.hero--bluehour .hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.25rem;
  margin-top: -1.75rem;
}
.hero--bluehour .hero__title {
  max-width: 50rem;
  margin-top: 1.1rem;
  font-size: clamp(2.1rem, 1.15rem + 3.45vw, 4.2rem);
}
.hero--bluehour .hero__lead {
  font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.1rem);
}
.hero--bluehour .hero__actions {
  margin-top: 1.5rem;
}
.hero--bluehour .hero__proof {
  margin-top: 1.4rem;
  gap: 0.4rem 1.15rem;
  font-size: 0.82rem;
}
@media (min-width: 640px) and (max-width: 1023px) {
  .hero--bluehour .hero__photo {
    aspect-ratio: 16 / 9;
  }
}
@media (min-width: 1024px) {
  .hero--bluehour {
    display: block;
    min-height: clamp(42rem, 100svh, 60rem);
    padding-bottom: 0;
  }
  .hero--bluehour .hero__photo {
    position: absolute;
    inset: 0;
    margin: 0;
    aspect-ratio: auto;
  }
  .hero--bluehour .hero__pic img {
    object-position: 38% 40%;
  }
  .hero--bluehour .hero__photo::after {
    background:
      linear-gradient(
        0deg,
        rgba(13, 14, 18, 0.94) 0%,
        rgba(13, 14, 18, 0.74) 21%,
        rgba(13, 14, 18, 0.16) 42%,
        rgba(13, 14, 18, 0) 54%),
      linear-gradient(
        180deg,
        rgba(13, 14, 18, 0.6) 0%,
        rgba(13, 14, 18, 0) 15%);
  }
  .hero--bluehour .hero__inner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3.625rem;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr) 25rem;
    gap: 4.375rem;
    align-items: end;
  }
}
.design--bluehour main > section:not(.conversion):not(.hero) {
  background: #f7f4ee;
}
.design--bluehour main > #inside-outside {
  background: var(--night);
}
.design--bluehour main > :is(#quote, #faq) {
  background: #fff;
  border-top: 1px solid var(--line);
}
.design--bluehour #real-work .section-title {
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.875rem);
}
.design--bluehour #inside-outside .areas__mark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}
.design--bluehour #inside-outside .areas__pic img {
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}