/* Home page layout, measured against the reference design (1140px content width). */
.home h1, .home h2, .home h3, .home h4 { letter-spacing: 0; }
.home em { font-style: italic; font-weight: 700; }

.pill.light { width: min(308px, 27vw); min-width: 220px; background: #fff; color: var(--purple); font-size: 18px; }
.pill.dark { background: var(--purple); color: #fff; }

/* hero */
.hero { display: block; min-height: 0; height: 789px; background: #555; }
.hero::before { display: none; }
.hslide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: center / cover no-repeat; opacity: 0; transition: opacity 1s ease; }
.hslide.on { opacity: 1; }
.hslide h1 { width: 59.5%; max-width: none; margin: 0; text-align: center; font-size: 3.338vw; line-height: 1; font-weight: 500; color: #fff; }

/* intro */
.home main > .intro { height: 481px; padding-top: 96px; text-align: center; background: #fff; }
.intro h2 { position: relative; left: 5px; width: 514px; max-width: 90%; margin: 0 auto; font-size: min(28.84px, 2.5035vw); line-height: 1; }
.intro > h4 { position: relative; left: 6px; width: 454px; max-width: 90%; margin: 14px auto 0; font-size: min(14.42px, 1.2518vw); line-height: 1.1; font-weight: 500; }
.features { display: grid; grid-template-columns: 229px 238px 238px; column-gap: 37px; justify-content: center; margin-top: 54px; transform: translateX(7px); }
.features img { width: 50px; height: 50px; margin: 0 auto 14px; }
.features h3 { font-size: 18px; line-height: 27px; font-weight: 700; }
.features p { margin-top: 10px; font-size: 16px; line-height: 1.2; }

/* nature */
.nature { height: 445px; background: var(--grey); }
.nature .text { position: absolute; left: 9.82%; top: 50%; transform: translateY(-50%); width: 29.6%; }
.nature h2 { font-size: min(28.84px, 2.5035vw); line-height: 1; }
.nature h4 { width: 90%; margin-top: 25px; font-size: min(14.42px, 1.2518vw); line-height: 1.1; font-weight: 500; }
.nature .pill { width: min(382px, 33.5vw); min-width: 220px; margin-top: 22px; }
.nature > img { position: absolute; right: 0; top: 0; width: 50%; height: 100%; object-fit: cover; }

/* awards */
.awards { height: 857px; text-align: center; background: #fff url("https://static.wixstatic.com/media/5f2643_149f03930a90440ab2692c093aaf2759~mv2.png") center / cover no-repeat; }
.awards h2 { position: absolute; top: 162px; left: 0; right: 0; width: 514px; max-width: 90%; margin: 0 auto; font-size: min(28.84px, 2.5035vw); line-height: 1; }
.awards > h4 { position: absolute; top: 225px; left: 0; right: 0; width: 540px; max-width: 90%; margin: 0 auto; font-size: min(14.42px, 1.2518vw); line-height: 1.1; font-weight: 500; }
.awards .end { display: block; margin-top: 10px; }
.awards .logos { position: absolute; top: 480px; left: 0; right: 0; height: 68px; padding-left: 12px; display: flex; justify-content: center; align-items: center; gap: 28px; }
.awards .logos > img:first-child { width: 101px; height: 40px; transform: translateY(-4px); }
.awards .logos a:nth-child(2) img { width: 142px; height: 25px; }
.awards .logos a:nth-child(3) img { width: 66px; height: 68px; }
.awards .logos > img:last-child { width: 254px; height: 26px; }
.awards .logos img { min-width: 0; max-width: none; object-fit: contain; filter: brightness(0) invert(1); }
.awards .logos img.natural { filter: none; }

/* fibers */
.fibers { height: 474px; background: #fff; }
.carousel { position: absolute; left: 9.82%; top: 81px; width: 40.6%; height: 312px; overflow: hidden; }
.carousel .track { display: flex; gap: 10px; height: 100%; transition: transform .6s ease; }
.carousel .track img { flex: 0 0 120%; width: 120%; min-width: 0; max-width: none; height: 312px; object-fit: cover; }
.carousel .next { position: absolute; right: 23px; top: 141px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }
.carousel .next svg { width: 7px; height: 12px; fill: none; stroke: #333; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.fibers .text { position: absolute; left: 54.65%; top: 81px; width: 35.5%; }
.fibers h2 { font-size: min(28.84px, 2.5035vw); line-height: 1; }
.fibers p { margin-top: 19px; font-size: min(14.42px, 1.2518vw); line-height: 1.4; }

/* newsletter */
.newsletter { height: 230px; background: var(--grey); }
.newsletter h2 { position: absolute; left: 9.82%; top: 86px; width: 23.2%; font-size: min(25.64px, 2.225vw); line-height: 1; color: var(--orange); }
.newsletter form { position: absolute; left: 38.4%; top: 67px; width: 44.4%; max-width: none; display: block; }
.newsletter .fields { display: flex; gap: 3.2%; }
.newsletter label { flex: 1; height: 37px; border: .53px solid var(--orange); border-radius: 50px; }
.newsletter input { width: 100%; height: 100%; padding: 0 16px; border: 0; border-radius: 50px; background: transparent; font: inherit; font-size: 16px; font-weight: 400; color: #76747b; }
.newsletter input:focus { outline: 2px solid var(--orange); }
.newsletter button { display: block; width: calc(100% - 6px); height: 46px; margin: 13px 0 0 6px; border: 0; border-radius: 100px; background: var(--orange); color: #fff; font: inherit; font-size: 20px; font-weight: 400; cursor: pointer; }
.newsletter .form-msg { position: absolute; top: 100%; left: 6px; margin-top: 6px; font-size: 14px; }

/* closing call to action */
.cta { height: 445px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; text-align: center; background: #fff; }
.cta h2 { width: 631px; max-width: 90%; font-size: min(28.84px, 2.5035vw); line-height: 1.1; }
.cta .pill { width: min(314px, 27.5vw); min-width: 220px; margin-left: 36px; }

@media (max-width: 800px) {
  .hero { height: 560px; }
  .hslide h1 { width: 88%; font-size: 1.7rem; }
  .pill.light, .nature .pill, .cta .pill { width: min(308px, 88%); margin-left: 0; }
  .home main > section { height: auto; }
  .home main > .hero { height: 560px; }
  .home main > .intro { padding: 56px 24px; }
  .intro h2, .nature h2, .fibers h2, .cta h2, .awards h2 { font-size: 1.6rem; }
  .intro > h4, .nature h4, .awards > h4, .fibers p, .newsletter h2 { font-size: 1rem; }
  .features { grid-template-columns: 1fr; row-gap: 32px; transform: none; }
  .home main > .supporters { padding: 24px 16px 32px; }
  .supporters h4 { letter-spacing: 6px; }
  .supporters .logos { flex-wrap: wrap; height: auto; gap: 16px 24px; }
  .nature .text, .fibers .text, .newsletter h2, .newsletter form, .carousel, .awards h2, .awards > h4, .awards .logos { position: static; transform: none; width: auto; max-width: none; }
  .nature { display: flex; flex-direction: column; }
  .nature .text, .fibers .text { padding: 48px 24px; }
  .nature > img { position: static; width: 100%; height: 320px; }
  .home main > .awards { padding: 64px 24px 200px; }
  .awards .logos { flex-wrap: wrap; height: auto; margin-top: 32px; }
  .carousel { width: auto; margin: 24px 24px 0; height: 240px; }
  .carousel .track img { flex-basis: 100%; width: 100%; height: 240px; }
  .carousel .next { left: auto; right: 12px; top: 105px; }
  .home main > .newsletter { padding: 48px 24px; }
  .newsletter form { margin-top: 24px; }
  .newsletter .fields { flex-direction: column; }
  .newsletter label, .newsletter button { width: 100%; margin-left: 0; }
  .home main > .cta { padding: 64px 0; }
}