:root {
  overscroll-behavior: none;
  overflow-y: hidden;
}

.laundry-home {
  width: 100%;
}

.laundry-home-img {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.laundry-home-img::-webkit-scrollbar {
  display: none;
}

.laundry-home-slide {
  position: relative;
  display: inline-block;
  /* svh (not vh) so the height stays fixed as mobile browser chrome
     collapses/expands mid-scroll. vh includes/excludes that chrome
     depending on its current state, so it changes value mid-gesture on
     mobile; since the background image and line-overlay SVG both scale
     their width off this height, a vh change mid-scroll resizes them
     while scrollLeft (a raw pixel offset) stays put, desyncing the
     scroll-driven line-draw progress from the content and making the
     drawn line jump/retract. svh is the smallest possible viewport size
     (chrome fully shown), so it never changes as chrome hides. */
  height: 100svh;
  vertical-align: top;
  /* Native height (px) of the background image, which the img element is
     scaled to via height:100%. Overlays with a different native height use
     this to scale by the same factor instead of stretching to fit the box. */
  --bg-height: 1080;
}

.laundry-home-slide img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  top: 0;
}

.laundry-home-slide .cutouts {
  position: absolute;
  top: 0;
}

.line-overlay {
  position: absolute;
  top: -21px;
  left: 0;
  /* 958 = this svg's own native height, scaled by the same factor as the
     background (see --bg-height) instead of stretched to fill the box. */
  height: calc(958 / var(--bg-height) * 100%);
  width: auto;
  pointer-events: none;
}

.page-content {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

.page-content * {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}

/* Floating Elements */
.slide-1 h1,
.slide-1 p,
.slide-1 a,
.slide-2 h1,
.slide-2 p,
.slide-3 h1,
.slide-3 p,
.slide-4 h1,
.slide-4 p {
  position: absolute;
  transform: translateY(-50%);
}

.slide-1,
.slide-2,
.slide-3,
.slide-4 {
  position: absolute;
  height: 100%;
  width: 100%;
}

/* Slide 1 */

.slide-1 h1 {
  font-size: clamp(max(5vh,4.98vw),min(5vh,5.98vw),115px);
  font-weight: bold;
  line-height: 1;
  top: 39%;
  left: .6%;
}

.slide-1 .everything-is {
  color: var(--color-laundry-light-blue);
}

.slide-1 p {
  max-width: min(9.6%, 60vw);
  top: 62%;
  left: .7%;
}

.slide-1 a {
  color: var(--color-laundry-darkgray);
  background-color: var(--color-laundry-yellow);
  font-size: clamp(max(1.9vh,1.4vw),min(1.9vh,1.98vw),38px);
  font-weight: bold;
  text-decoration: none;
  top: 74%;
  left: .7%;
  padding: .1% .3%;
  border-radius: 70px;
}

.slide-1 p,
.slide-2 p,
.slide-3 p,
.slide-4 p {
  font-size: clamp(max(1.9vh,1.5vw),min(1.9vh,1.5vw),32px);
  line-height: 1.2;
  hyphens: none;
}

.slide-2 h1,
.slide-3 h1,
.slide-4 h1 {  
  font-size: clamp(max(4.5vh,4.98vw),min(4.5vh,5.98vw),115px);
  font-weight: bold;
  line-height: 1;
}

/* Slide 2 */
.slide-2 h1 {
  top: 14%;
  left: 48%;
  color: var(--color-laundry-light-blue);
}

.slide-2 p {
  max-width: min(7%,80vw);
  top: 32%;
  left: 48%;
}

.slide-2 h1,
.slide-2 p {
  text-align: end;
  transform: translateX(-100%);
}

/* Slide 3 */
.slide-3 h1 {
  top: 60%;
  left: 51%;
  color: var(--color-laundry-yellow);
}

.slide-3 p {
  max-width: min(8%, 80vw);
  top: 74%;
  left: 51%;
}
/* Slide 4 */
.slide-4 h1 {
  top: 44%;
  left: 77%;
  color: var(--color-laundry-light-blue);
}

.slide-4 p {
  max-width: min(8%, 80vw);
  top: 64%;
  left: 77%;
}

@media (min-width: 500px) {
  .slide-1 h1 {
    font-size: clamp(max(6.65vh,4.98vw),min(6.65vh,5.98vw),115px);
    left: .8%;
  }

  .slide-1 p {
    font-size: clamp(max(2.4vh,1.5vw),min(2.4vh,1.5vw),32px);
    max-width: min(9.6%, 80vw);
    left: .9%;
  }

  .slide-1 a {
    font-size: clamp(max(2.3vh,1.4vw),min(2.3vh,1.98vw),38px);
    top: 76%;
    left: .9%;
    padding: .15% .4%;
  }

  .slide-2 h1,
  .slide-3 h1,
  .slide-4 h1 {
    font-size: clamp(max(5.65vh,4.98vw),min(5.65vh,5.98vw),115px);    
  }

  .slide-2 p,
  .slide-3 p,
  .slide-4 p {
    font-size: clamp(max(2.2vh,1.5vw),min(2.2vh,1.5vw),32px);
  }

  .slide-3 p {
    top: 80%;
  }

  .slide-4 p {  
    top: 70%;
  }
}

@media (min-width: 767px) {
  .slide-1 h1 {
    font-size: clamp(max(9.65vh, 4.98vw), min(9.65vh, 5.98vw), 115px);  
    top: 36%;
  }

  .slide-1 p {
    font-size: clamp(max(2.96vh, 1.5vw), min(2.96vh, 1.66vw), 32px);    
    top: 66%;
  }

  .slide-1 a {
    font-size: clamp(max(3vh, 1.4vw), min(3vh, 1.98vw), 38px);  
    top: 80%;
    padding: .15% .6%;
  }

  .slide-2 h1,
  .slide-3 h1,
  .slide-4 h1 {
    font-size: clamp(max(7.31vh, 3.11vw), min(7.31vh, 3.11vw), 79px);   
  }

  .slide-2 p,
  .slide-3 p,
  .slide-4 p {
    font-size: clamp(max(2.8vh,1.2vw),min(2.8vh,1.66vw),32px);
    max-width: min(9%, 80vw);
  }
}