/* Layered replacement for the exported hero composites. */
.sw-hero-ready #rec734779451,
.sw-hero-ready #rec738137038 { display: none !important; }
.sw-hero {
  position: relative; width: calc(100% - 64px); max-width: 1200px;
  aspect-ratio: 1200 / 740; margin: 24px auto 64px; container-type: inline-size;
  font-family: Montserrat, Arial, sans-serif; color: #252160;
}
.sw-hero *, .sw-hero *::before, .sw-hero *::after { box-sizing: border-box; }
.sw-hero__background { position: absolute; inset: 0; background: url('../images/streamwater-hero-background.svg') center / 100% 100% no-repeat; pointer-events: none; }
.sw-hero__logo { position: absolute; left: 0; top: 0; width: 18%; }
.sw-hero__logo img { display: block; width: 100%; }
.sw-hero__headline { position: absolute; top: 20%; left: 0; margin: 0; font-size: 7cqw; font-weight: 700; line-height: 1.06; letter-spacing: -.035em; }
.sw-hero__headline span { color: #000; }
.sw-hero__tagline { position: absolute; top: 57%; left: 0; margin: 0; font-size: 1.65cqw; font-weight: 700; line-height: 1.35; }
.sw-hero__feature { position: absolute; left: 49%; top: 7%; width: 19%; height: 84%; display: flex; align-items: center; justify-content: center; }
.sw-hero__feature img { max-width: 100%; max-height: 100%; width: auto; height: 100%; object-fit: contain; }
.sw-hero__copy { position: absolute; left: 75%; top: 15%; width: 23%; min-height: 24%; padding: 2cqw; border-radius: 2cqw; background: #fff; color: #000; }
.sw-hero__title { margin: 0 0 .8cqw; font-size: 1.9cqw; font-weight: 700; line-height: 1.2; }
.sw-hero__description { margin: 0; font-size: 1.1cqw; line-height: 1.4; min-height: 6cqw; }
.sw-hero__learn { display: block; margin-top: 1.2cqw; padding: .85cqw; background: #3c6aa5; border-radius: 30px; color: white !important; text-align: center; font-size: 1.1cqw; font-weight: 700; }
.sw-hero__pair { position: absolute; left: 74%; top: 46%; width: 26%; height: 40%; padding: 2cqw; border: 1.5cqw solid #fff; border-radius: 2.5cqw; background: #daebff; display: flex; justify-content: space-around; gap: 2cqw; }
.sw-hero__pair img { width: 42%; height: 100%; object-fit: contain; }
.sw-hero__social { position: absolute; left: 74%; top: 88%; width: 26%; height: 12%; display: flex; gap: 1.5cqw; }
.sw-hero__social a { flex: 1; display: flex; justify-content: center; align-items: center; background: #d4f5fc; border-radius: 2cqw; color: #3c6aa5 !important; }
.sw-hero__social svg { width: 40%; height: 70%; fill: currentColor; }
.sw-hero__products { position: absolute; left: 2%; bottom: 6%; width: 32%; display: flex; gap: 1.2cqw; }
.sw-hero__product { appearance: none; flex: 1; min-width: 0; border: 0; padding: 0; cursor: pointer; background: transparent; }
.sw-hero__circle { display: flex; justify-content: center; align-items: center; aspect-ratio: 1; padding: 1cqw; border-radius: 50%; background: #fff; }
.sw-hero__circle img { display: block; height: 100%; max-width: 100%; object-fit: contain; }
.sw-hero__product::after { content: ''; display: block; height: .45cqw; min-height: 3px; margin-top: 1.2cqw; border-radius: 4px; background: #b9c3c6; }
.sw-hero__product[aria-pressed="true"]::after { background: #195989; }
.sw-hero a:focus-visible, .sw-hero button:focus-visible { outline: 3px solid #195989; outline-offset: 5px; }
@media (max-width: 700px) {
  .sw-hero { width: calc(100% - 32px); aspect-ratio: auto; height: 910px; margin: 16px auto 36px; }
  .sw-hero__background { top: 220px; bottom: 150px; background: linear-gradient(130deg, #e8fcff, #bfdcff); border-radius: 24px; }
  .sw-hero__logo { width: 32%; }
  .sw-hero__headline { top: 85px; font-size: 11cqw; }
  .sw-hero__tagline { top: 112px; left: 61%; width: 39%; font-size: 3.5cqw; }
  .sw-hero__feature { left: 6%; top: 245px; width: 39%; height: 345px; }
  .sw-hero__copy { left: 49%; top: 250px; width: 47%; padding: 4cqw; border-radius: 5cqw; }
  .sw-hero__title { font-size: 4.3cqw; margin-bottom: 2cqw; }
  .sw-hero__description { font-size: 3.2cqw; min-height: 0; }
  .sw-hero__learn { font-size: 3.2cqw; padding: 3cqw; margin-top: 4cqw; }
  .sw-hero__products { bottom: 175px; left: 7%; width: 86%; gap: 5cqw; }
  .sw-hero__circle { padding: 3cqw; }
  .sw-hero__product::after { margin-top: 3cqw; }
  .sw-hero__pair { top: auto; bottom: 0; left: 0; width: 62%; height: 135px; padding: 12px; border-width: 0; border-radius: 18px; }
  .sw-hero__social { top: auto; bottom: 0; left: 67%; width: 33%; height: 135px; flex-direction: column; gap: 10px; }
  .sw-hero__social a { border-radius: 14px; }
  .sw-hero__social svg { width: 36px; height: 36px; }
}