/* Unique Water page composition. Shared Header, Footer, Form and headings come from Home CSS. */

.water-video-dialog {
  width:min(960px,calc(100vw - 48px));
  padding:0;
  border:0;
  border-radius:5px;
  background:#000;
}

.water-video-dialog::backdrop { background:rgb(0 0 0 / .72); }

.water-video-dialog video { display:block; width:100%; max-height:calc(100vh - 64px); }

.water-video-dialog__close {
  position:absolute;
  z-index:1;
  top:10px;
  right:10px;
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border:0;
  border-radius:50%;
  color:#fff;
  background:rgb(0 0 0 / .68);
  font:400 28px/1 Arial,sans-serif;
  cursor:pointer;
}

.water-related + .contact-section { margin-top:125px; }
.water-intro__lead a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }

@media (max-width:1359px) {
  .water-related + .contact-section { margin-top:72px; }
}

@media (max-width:767px) {
  .water-related + .contact-section { margin-top:56px; }
}

/* These two images are Water-only desktop decor. Without their desktop
   placement they fall back to the absolute-element static position and are
   scaled by the global responsive image rule, producing duplicate dots/logos
   behind the mobile title and lead. */
@media (max-width:1359px) {
  .water-decor { display:none; }
}

@media (min-width:1360px) {
  .water-page-main { overflow:clip; }

  .water-page-main > .water-decor { max-width:none; pointer-events:none; }
  .water-page-main > .water-decor--top { top:21px; left:-108px; width:1143px; height:751px; transform:none; object-fit:cover; object-position:left top; }
  .water-page-main > .water-decor--lower { top:787px; left:-105px; width:1444px; height:1029px; transform:none; object-fit:contain; }

  .water-intro__lead {
    display:grid;
    grid-template-columns:636px 636px;
    gap:24px;
    margin-top:43px;
  }

  .water-intro__lead img,
  .water-case__content img { display:block; width:636px; height:236px; object-fit:cover; }

  .water-intro__lead img { object-position:50% 23.48%; }

  .water-intro__lead p,
  .water-case__content p,
  .water-results__card > p {
    margin:0;
    font:500 20px/26px Onest,Arial,sans-serif;
  }

  .water-pools {
    width:1378px;
    height:632px;
    margin:64px auto 0;
    border-radius:5px;
    background-image:linear-gradient(rgb(0 118 139 / .68),rgb(0 118 139 / .68)),url('../images/water/pools.webp');
    background-position:center;
    background-size:1378px 632px;
  }

  .water-pools__inner { padding-top:51px; }

  .water-pools__copy { margin-top:23px; }

  .water-pools__copy p,
  .water-review__body > p,
  .water-info p {
    margin:0;
    font:500 16px/20.4px Onest,Arial,sans-serif;
  }

  .water-pools__copy { color:#fff; }

  .water-pools__copy .water-winter { margin-top:42px; }

  .water-winter strong {
    display:block;
    margin:0 0 28px;
    font:700 24px/31px Onest,Arial,sans-serif;
  }

  .water-winter span { display:block; }

  .water-review {
    min-height:395px;
    margin-top:44px;
    padding:24px 28px;
    border-radius:5px;
    background:#fff;
    box-shadow:0 0 19px rgb(0 0 0 / .1);
  }

  .water-review h3 {
    margin:0;
    color:#29737c;
    font:700 24px/31px Onest,Arial,sans-serif;
  }

  .water-review__body {
    display:grid;
    grid-template-columns:339px 887px;
    gap:15px;
    margin-top:15px;
  }

  .water-review__body > p { white-space:pre-line; }

  .water-videos { display:grid; grid-template-columns:162px 162px; gap:15px; }
  .water-videos figure { position:relative; margin:0; }

  .water-video-preview {
    position:relative;
    display:block;
    width:162px;
    height:300px;
    padding:0;
    overflow:hidden;
    border:0;
    background:#29737c;
    cursor:pointer;
  }

  .water-video-preview img { display:block; width:162px; height:300px; object-fit:cover; }

  .water-video-preview span {
    position:absolute;
    top:127px;
    left:58px;
    width:0;
    height:0;
    border-top:23px solid transparent;
    border-bottom:23px solid transparent;
    border-left:37px solid #fff;
  }

  .water-videos figcaption {
    position:absolute;
    top:84px;
    left:0;
    width:162px;
    color:#fff;
    font:600 14px/15px Onest,Arial,sans-serif;
    text-align:center;
  }

  .water-cases { margin-top:327px; }
  .water-cases article + article { margin-top:73px; }

  .water-case__content {
    display:grid;
    grid-template-columns:636px 636px;
    gap:24px;
    margin-top:32px;
  }

  .water-case__content img:first-child { object-position:50% 28.465%; }
  .water-cases article + article img { object-position:50% 26.115%; }

  .water-results {
    display:grid;
    gap:26px;
    margin-top:50px;
  }

  .water-results__card {
    display:grid;
    grid-template-columns:724px 407px;
    gap:43px;
    height:253px;
    width:1295px;
    margin-left:1px;
    padding:24px 28px;
    border-radius:5px;
    background:#fff;
    box-shadow:0 0 19px rgb(0 0 0 / .1);
  }

  .water-results__card > img { display:block; width:724px; height:204px; }
  .water-results__card > p { align-self:center; }

  .water-results__card--table {
    align-items:center;
    padding-top:17px;
    padding-bottom:18px;
  }

  .water-results__table-scroll { display:contents; }

  .water-results table {
    width:592px;
    height:218px;
    border-collapse:collapse;
    color:#29737c;
    font-family:Onest,Arial,sans-serif;
    font-size:15px;
    line-height:20px;
    text-align:left;
  }

  .water-results th,
  .water-results td { border:1px solid #29737c; }

  .water-results th {
    height:68px;
    padding:8px 14px;
    font-weight:600;
    vertical-align:middle;
  }

  .water-results td { height:40px; padding:8px 14px; font-weight:500; }
  .water-results tbody tr:last-child td { height:50px; font-weight:700; }
  .water-results th:nth-child(1) { width:166px; }
  .water-results th:nth-child(2) { width:227px; }
  .water-results th:nth-child(3) { width:199px; }
  .water-results__card--table > p { align-self:center; }

  .water-benefits {
    position:relative;
    margin-top:73px;
    padding-top:51px;
    background:#fff;
  }

  .water-benefits__surface { display:contents; }

  .water-benefits::before {
    position:absolute;
    z-index:0;
    top:0;
    left:calc(50% - 689px);
    width:1378px;
    height:400px;
    border-radius:5px;
    background-image:url('../images/rosa-applications-background.png');
    background-position:center -139px;
    background-repeat:no-repeat;
    background-size:1378px 976px;
    content:"";
    pointer-events:none;
  }

  .water-benefits__surface > .container,
  .water-benefits > .container { position:relative; z-index:1; }

  .water-benefits__grid {
    display:grid;
    grid-template-columns:repeat(4,306px);
    gap:24px;
    margin-top:23px;
  }

  .water-benefits__grid article {
    height:216px;
    padding:24px 28px;
    border-radius:5px;
    background:#fff;
    box-shadow:0 0 19px rgb(0 0 0 / .1);
  }

  .water-benefits__grid img { display:block; width:33px; height:21px; }

  .water-benefits__grid p {
    margin:15px 0 0;
    color:#29737c;
    font:500 18px/23px Onest,Arial,sans-serif;
  }

  .water-info-title { margin-top:118px; }

  .water-info {
    display:grid;
    grid-template-columns:repeat(2,636px);
    grid-template-rows:208px 188px;
    gap:24px;
    margin-top:34px;
  }

  .water-info article {
    padding:19px 28px 24px;
    border-radius:5px;
    background:#fff;
    box-shadow:0 0 19px rgb(0 0 0 / .1);
  }

  .water-info h3 {
    margin:0;
    color:#7dc804;
    font:700 20px/26px Onest,Arial,sans-serif;
  }

  .water-info p { margin-top:13px; }

  .water-benefits + .contact-section { margin-top:73px; }
}

@media (min-width:768px) and (max-width:1359px) {
  .water-intro__lead {
    display:block;
  }

  .water-intro__lead { margin-top:40px; }

  .water-intro__lead img {
    float:left;
    display:block;
    width:calc((100% - 24px) / 2);
    height:auto;
    margin:0 24px 0 0;
    aspect-ratio:636 / 236;
    object-fit:cover;
  }

  .water-intro__lead p {
    margin:0;
  }

  .water-intro__lead p,
  .water-case__content p,
  .water-results__card > p { font:500 18px/25px Onest,Arial,sans-serif; }

  .water-intro__lead::after { display:block; clear:both; content:""; }

  .water-case__content { display:block; margin-top:28px; }
  .water-case__content img {
    float:left;
    display:block;
    width:calc((100% - 24px) / 2);
    height:auto;
    aspect-ratio:636 / 236;
    margin:0 24px 0 0;
    object-fit:cover;
  }
  .water-case__content::after { display:block; clear:both; content:""; }

  .water-pools {
    width:calc(100% - 62px);
    margin:56px auto 0;
    border-radius:5px;
    background-image:linear-gradient(rgb(0 118 139 / .68),rgb(0 118 139 / .68)),url('../images/water/pools.webp');
    background-position:center;
    background-size:cover;
  }

  .water-pools__inner { padding:40px 0; }
  .water-pools__copy { margin-top:23px; color:#fff; }
  .water-pools__copy p,
  .water-review__body > p,
  .water-info p { font:500 16px/20.4px Onest,Arial,sans-serif; }
  .water-pools__copy .water-winter { margin-top:36px; }
  .water-winter strong { display:block; margin-bottom:18px; font:700 22px/28px Onest,Arial,sans-serif; }
  .water-winter span { display:block; }

  .water-review {
    margin-top:40px;
    padding:24px;
    border-radius:5px;
    background:#fff;
    box-shadow:0 0 19px rgb(0 0 0 / .1);
  }

  .water-review h3 { margin:0; color:#29737c; font:700 24px/31px Onest,Arial,sans-serif; }
  .water-review__body { display:block; margin-top:15px; }
  .water-review__body > p { white-space:pre-line; }
  .water-review__body::after { display:block; clear:both; content:""; }
  .water-videos { float:left; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:339px; margin:0 20px 0 0; gap:15px; }
  .water-videos figure { position:relative; margin:0; }
  .water-video-preview { position:relative; display:block; width:100%; padding:0; overflow:hidden; border:0; background:#29737c; aspect-ratio:162 / 300; cursor:pointer; }
  .water-video-preview img { display:block; width:100%; height:100%; object-fit:cover; }
  .water-video-preview span { position:absolute; top:calc(50% - 23px); left:calc(50% - 18.5px); width:0; height:0; border-top:23px solid transparent; border-bottom:23px solid transparent; border-left:37px solid #fff; }
  .water-videos figcaption { position:absolute; top:28%; left:0; width:100%; color:#fff; font:600 14px/18px Onest,Arial,sans-serif; text-align:center; }

  .water-cases { margin-top:88px; }
  .water-cases article + article { margin-top:64px; }

  .water-results { display:grid; gap:24px; margin-top:64px; }
  .water-results__card { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:24px; padding:24px; border-radius:5px; background:#fff; box-shadow:0 0 19px rgb(0 0 0 / .1); }
  .water-results__card > img { display:block; width:100%; height:auto; }
  .water-results__card > p { align-self:center; margin:0; }
  .water-results__card--table { grid-template-columns:minmax(0,592px) minmax(240px,1fr); align-items:center; }
  .water-results__table-scroll { overflow-x:auto; overscroll-behavior-inline:contain; }
  .water-results table { width:592px; min-width:592px; border-collapse:collapse; color:#29737c; font:500 15px/20px Onest,Arial,sans-serif; text-align:left; }
  .water-results th,.water-results td { border:1px solid #29737c; padding:8px 14px; }
  .water-results th { font-weight:600; }
  .water-results tbody tr:last-child td { font-weight:700; }

  .water-benefits { position:relative; margin-top:72px; padding-top:0; background:#fff; }
  .water-benefits::before { display:none; }
  .water-benefits__surface { position:relative; width:calc(100% - 62px); margin-inline:auto; padding:40px 0; overflow:clip; border-radius:5px; background:#29737c; }
  .water-benefits__surface::before { position:absolute; z-index:0; inset:0 0 auto; height:400px; background:url('../images/top-decor-vector.svg') center top / 1444px auto no-repeat; content:""; pointer-events:none; }
  .water-benefits__surface > .container { position:relative; z-index:1; }
  .water-benefits__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:24px; }
  .water-benefits__grid article,.water-info article { padding:24px; border-radius:5px; background:#fff; box-shadow:0 0 19px rgb(0 0 0 / .1); }
  .water-benefits__grid img { display:block; width:33px; height:21px; }
  .water-benefits__grid p { margin:15px 0 0; color:#29737c; font:500 18px/23px Onest,Arial,sans-serif; }
  .water-info-title { margin-top:72px; }
  .water-info { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:28px; }
  .water-info h3 { margin:0; color:#7dc804; font:700 20px/26px Onest,Arial,sans-serif; }
  .water-info p { margin:13px 0 0; }
  .water-benefits + .contact-section { margin-top:72px; }
}

@media (max-width:767px) {
  .water-intro__lead { display:grid; gap:22px; margin-top:28px; }
  .water-intro__lead img,
  .water-case__content img { display:block; width:100%; height:auto; aspect-ratio:636 / 236; object-fit:cover; }
  .water-intro__lead p,
  .water-case__content p,
  .water-results__card > p { margin:0; font:500 16px/22px Onest,Arial,sans-serif; }

  .water-pools { width:calc(100% - 20px); margin:42px auto 0; border-radius:5px; background-image:linear-gradient(rgb(0 118 139 / .68),rgb(0 118 139 / .68)),url('../images/water/pools.webp'); background-position:center; background-size:cover; }
  .water-pools__inner { padding:30px 18px; }
  .water-pools__copy { margin-top:18px; color:#fff; }
  .water-pools__copy p,.water-review__body > p,.water-info p { margin:0; font:500 15px/20px Onest,Arial,sans-serif; }
  .water-pools__copy .water-winter { margin-top:28px; }
  .water-winter strong { display:block; margin-bottom:14px; font:700 20px/26px Onest,Arial,sans-serif; }
  .water-winter span { display:block; }

  .water-review { margin-top:30px; padding:18px; border-radius:5px; background:#fff; box-shadow:0 0 19px rgb(0 0 0 / .1); }
  .water-review h3 { margin:0; color:#29737c; font:700 20px/26px Onest,Arial,sans-serif; }
  .water-review__body { display:grid; gap:20px; margin-top:14px; }
  .water-review__body > p { white-space:pre-line; }
  .water-videos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .water-videos figure { position:relative; margin:0; }
  .water-video-preview { position:relative; display:block; width:100%; padding:0; overflow:hidden; border:0; background:#29737c; aspect-ratio:162 / 300; cursor:pointer; }
  .water-video-preview img { display:block; width:100%; height:100%; object-fit:cover; }
  .water-video-preview span { position:absolute; top:calc(50% - 16px); left:calc(50% - 13px); width:0; height:0; border-top:16px solid transparent; border-bottom:16px solid transparent; border-left:26px solid #fff; }
  .water-videos figcaption { position:absolute; top:28%; left:0; width:100%; padding:0 4px; color:#fff; font:600 12px/15px Onest,Arial,sans-serif; text-align:center; }

  .water-cases { margin-top:62px; }
  .water-cases article + article { margin-top:48px; }
  .water-case__content { display:grid; gap:20px; margin-top:22px; }

  .water-results { display:grid; gap:18px; margin-top:52px; }
  .water-results__card { display:grid; gap:20px; padding:18px; border-radius:5px; background:#fff; box-shadow:0 0 19px rgb(0 0 0 / .1); }
  .water-results__card > img { display:block; width:100%; height:auto; }
  .water-results__table-scroll { overflow-x:auto; overscroll-behavior-inline:contain; }
  .water-results table { width:592px; min-width:592px; border-collapse:collapse; color:#29737c; font:500 15px/20px Onest,Arial,sans-serif; text-align:left; }
  .water-results th,.water-results td { border:1px solid #29737c; padding:8px 14px; }
  .water-results th { font-weight:600; }
  .water-results tbody tr:last-child td { font-weight:700; }

  .water-benefits { position:relative; margin-top:56px; padding-top:0; background:#fff; }
  .water-benefits::before { display:none; }
  .water-benefits__surface { position:relative; width:calc(100% - 20px); margin-inline:auto; padding:30px 0; overflow:clip; border-radius:5px; background:#29737c; }
  .water-benefits__surface::before { position:absolute; z-index:0; inset:0 0 auto; height:400px; background:url('../images/top-decor-vector.svg') center top / auto 400px no-repeat; content:""; pointer-events:none; }
  .water-benefits__surface > .container { position:relative; z-index:1; }
  .water-benefits__grid { display:grid; gap:14px; margin-top:20px; }
  .water-benefits__grid article,.water-info article { padding:18px; border-radius:5px; background:#fff; box-shadow:0 0 19px rgb(0 0 0 / .1); }
  .water-benefits__grid img { display:block; width:33px; height:21px; }
  .water-benefits__grid p { margin:14px 0 0; color:#29737c; font:500 16px/21px Onest,Arial,sans-serif; }
  .water-info-title { margin-top:56px; }
  .water-info { display:grid; gap:14px; margin-top:20px; }
  .water-info h3 { margin:0; color:#7dc804; font:700 18px/24px Onest,Arial,sans-serif; }
  .water-info p { margin:10px 0 0; }
  .water-benefits + .contact-section { margin-top:56px; }
}

html.water-motion-ready [data-water-motion] { opacity:0; transform:translateY(8px); }
html.water-motion-ready [data-water-motion].is-water-motion-visible { opacity:1; transform:none; transition:opacity 420ms ease,transform 420ms ease; transition-delay:var(--water-motion-delay,0ms); }
.water-benefits__grid [data-water-motion]:nth-child(2),.water-info [data-water-motion]:nth-child(2) { --water-motion-delay:75ms; }
.water-benefits__grid [data-water-motion]:nth-child(3),.water-info [data-water-motion]:nth-child(3) { --water-motion-delay:150ms; }
.water-benefits__grid [data-water-motion]:nth-child(4),.water-info [data-water-motion]:nth-child(4) { --water-motion-delay:225ms; }

@media (prefers-reduced-motion:reduce) {
  .water-video-dialog { scroll-behavior:auto; }
  html.water-motion-ready [data-water-motion] { opacity:1; transform:none; }
}