.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 3rem 0.625rem;
  height: clamp(50rem, calc(var(--vh, 1vh) * 100), 80rem);
  @media (min-width: 768px) {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  
  & .home-hero__title {
    position: absolute;
    --title-top: 11.625rem;
    --title-left: 1.25rem;
    top: var(--title-top);
    left: var(--title-left);
    @media (min-width: 768px) {
      --title-top: 15rem;
      --title-left: 4rem;
    }
    @media (min-width: 1200px) {
      --title-top: 19.125rem;
      --title-left: 9.75rem;
    }
  
    & .home-hero__title-dec {
      position: absolute;
      width: 12.5rem;
      &.home-hero__title-dec--tl {
        top: -4.375rem;
        left: -3.125rem;
        @media (min-width: 768px) {
          top: -3.75rem;
          left: -5rem;
        }
      }
      &.home-hero__title-dec--br {
        transform: scale(-1);
        right: -3.125rem;
        bottom: -4.375rem;
        @media (min-width: 768px) {
          right: -5rem;
          bottom: -3.75rem;
        }
      }
      
    }
    
    & .home-hero__title-text {
      position: relative;
      line-height: 1.25;
      letter-spacing: 0.02em;
      font-family: var(--font-serif);
      font-size: 2rem;
      white-space: nowrap;
      @media (min-width: 768px) {
        font-size: 4rem;
      }
      @media (min-width: 1024px) {
        font-size: 6rem;
      }
      @media (min-width: 1200px) {
        font-size: 7.5rem;
      }
    }
    
    &.home-hero__title--ink {
      
    }
    
    &.home-hero__title--snow {
      width: 26.25rem;
      --title-top--difference: 4.375rem;
      --title-left--difference: 2.625rem;
      top: calc(var(--title-top) - var(--title-top--difference));
      left: calc(var(--title-left) + var(--title-left--difference));
      @media (min-width: 768px) {
        width: 60rem;
        --title-top--difference: 22rem;
        --title-left--difference: 8rem;
      }
      @media (min-width: 1024px) {
        width: 80rem;
        --title-top--difference: 30rem;
        --title-left--difference: 12rem;
      }
      @media (min-width: 1200px) {
        width: 87.5rem;
        --title-top--difference: 32rem;
        --title-left--difference: 15.25rem;
      }
      & .home-hero__title-image {
        clip-path: circle(50%);
        overflow: hidden;
        aspect-ratio: 1 / 1;
        & .home-hero__title-image-bg {
          position: relative;
          & img {
            object-fit: cover;
            width: 100%;
            height: 100%;
          }
          &::after {
            content: "";
            display: block;
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background-color: hsl(0 0 0 / 25%);
            pointer-events: none;
          }
        }
      }
      
      & .home-hero__title-text-wrapper {
        position: absolute;
        top: var(--title-top--difference);
        left: calc(var(--title-left--difference) * (-1));
        & .home-hero__title-text {
          color: var(--snow);
        }
      }
    }
  }
}

.home-features-title {
  position: relative;
  writing-mode: vertical-rl;
  align-self: start;
  margin-left: 3.5rem;
  @media (min-width: 1200px) {
    margin-left: 0;
  }
  & h2, & h3, & h4, & h5, & h6 {
    letter-spacing: 0.1em;
    line-height: 1;
    font-family: var(--font-serif);
    font-size: 2.25rem;
  } 
  
  & .home-features-title__dec {
    position: absolute;
    top: -5rem;
    left: -3.75rem;
    width: 5rem;
    & img {
      width: 100%;
    }
  }
}

.home-service-bg {
  position: absolute;
  inset: 0;
  & img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  &::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: hsl(0 0 0 / 60%);
    pointer-events: none;
  }
}

.service-copy.service-copy--home {
  @media (min-width: 1024px) {
    top: 1rem;
  }
}