/*
 * Hydrodynamic animation blocks.
 * Loaded only by the primary hydrodynamic service pages and their test page.
 */

.home-redesign .hydro-task-test {
    background:
        radial-gradient(circle at 12% 15%, rgba(149, 177, 43, 0.14), transparent 30%),
        var(--deep);
}

.home-redesign .hydro-task-head {
    align-items: end;
    display: grid;
    gap: 34px;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.65fr);
    margin-bottom: 32px;
}

.home-redesign .hydro-task-head h2 {
    padding: 10px 0 0;
    text-align: left;
}

.home-redesign .hydro-task-kicker {
    color: var(--lime);
    font-family: "Oswald", sans-serif;
    font-size: 18px;
    text-transform: uppercase;
}

.home-redesign .hydro-task-head > p {
    font-size: 21px;
    line-height: 1.5;
    margin: 0;
}

.home-redesign .hydro-task-layout {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
}

.home-redesign .hydro-task-feature,
.home-redesign .hydro-task-item {
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    overflow: hidden;
}

.home-redesign .hydro-task-feature-media {
    aspect-ratio: 16 / 9;
    position: relative;
}

.home-redesign .hydro-task-feature-media img,
.home-redesign .hydro-task-item-media img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.home-redesign .hydro-task-feature-media span {
    background: var(--lime-ui);
    bottom: 18px;
    color: var(--white);
    font-family: "Oswald", sans-serif;
    font-size: 17px;
    left: 18px;
    padding: 9px 13px;
    position: absolute;
    text-transform: uppercase;
}

.home-redesign .hydro-task-feature-body {
    padding: 28px;
}

.home-redesign .hydro-task-feature h3,
.home-redesign .hydro-task-item h3 {
    color: var(--lime);
    font-family: "Oswald", sans-serif;
    margin: 0;
}

.home-redesign .hydro-task-feature h3 {
    font-size: 31px;
}

.home-redesign .hydro-task-feature p,
.home-redesign .hydro-task-feature li,
.home-redesign .hydro-task-item p {
    font-size: 18px;
    line-height: 1.45;
}

.home-redesign .hydro-task-feature ul {
    display: grid;
    gap: 8px;
    margin: 18px 0 24px;
    padding-left: 20px;
}

.home-redesign .hydro-task-list {
    display: grid;
    gap: 16px;
}

.home-redesign .hydro-task-item {
    align-items: stretch;
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    min-height: 176px;
}

.home-redesign .hydro-task-item > div:last-child {
    align-content: center;
    display: grid;
    padding: 22px;
}

.home-redesign .hydro-task-item span {
    color: rgba(255, 255, 255, 0.45);
    font-family: "Oswald", sans-serif;
    font-size: 18px;
}

.home-redesign .hydro-task-item h3 {
    font-size: 25px;
    margin-top: 4px;
}

.home-redesign .hydro-task-item p {
    margin: 8px 0 0;
}

.home-redesign .hydro-jet-visual {
    background:
        radial-gradient(circle at 82% 35%, rgba(88, 190, 226, 0.16), transparent 28%),
        linear-gradient(145deg, #002f36, #004c56);
    min-height: 330px;
    overflow: hidden;
    padding: 34px 28px 28px;
    position: relative;
}

.home-redesign .hydro-jet-label {
    color: var(--lime);
    font-family: "Oswald", sans-serif;
    font-size: 18px;
    letter-spacing: 0.02em;
    margin-bottom: 42px;
    text-transform: uppercase;
}

.home-redesign .hydro-pipe {
    background:linear-gradient(180deg, #06282d 0%, #17464c 18%, #0a3036 50%, #17464c 82%, #06282d 100%);
    border: 5px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    box-shadow:
        inset 0 18px 26px rgba(0, 0, 0, 0.46),
        inset 0 -16px 22px rgba(255, 255, 255, 0.05),
        0 20px 35px rgba(0, 20, 24, 0.35);
    height: 128px;
    overflow: hidden;
    position: relative;
}

.home-redesign .hydro-clean-track {
    animation: hydroTrackClean 4.8s ease-in-out infinite;
    background:
        linear-gradient(180deg, rgba(159, 235, 255, 0.28), transparent 22%, transparent 78%, rgba(159, 235, 255, 0.22)),
        linear-gradient(90deg, #123f46, #1b5962 72%, rgba(87, 207, 241, 0.5));
    border-radius: 999px;
    bottom: 8px;
    box-shadow:
        inset 0 9px 13px rgba(152, 229, 246, 0.13),
        inset 0 -8px 12px rgba(0, 18, 22, 0.34),
        0 0 28px rgba(87, 207, 241, 0.32);
    left: 0;
    position: absolute;
    top: 8px;
    transform-origin: left center;
    width: 82%;
    z-index: 3;
}

.home-redesign .hydro-clean-track::after {
    animation: hydroCleanShine 1.1s ease-in-out infinite alternate;
    background: linear-gradient(90deg, transparent, rgba(191, 245, 255, 0.72), transparent);
    border-radius: 999px;
    content: "";
    height: 5px;
    left: 8%;
    position: absolute;
    right: 8%;
    top: 17px;
}

.home-redesign .hydro-grease-layer {
    background:
        radial-gradient(ellipse at 8% 8%, #b89446 0 7%, transparent 8%),
        radial-gradient(ellipse at 21% 94%, #967332 0 10%, transparent 11%),
        radial-gradient(ellipse at 37% 4%, #c39d4c 0 8%, transparent 9%),
        radial-gradient(ellipse at 51% 94%, #806127 0 12%, transparent 13%),
        radial-gradient(ellipse at 68% 5%, #b58c3f 0 10%, transparent 11%),
        radial-gradient(ellipse at 83% 96%, #98712f 0 11%, transparent 12%),
        radial-gradient(ellipse at 96% 7%, #c39d4c 0 9%, transparent 10%),
        linear-gradient(180deg, #8d682b 0 18%, transparent 31% 69%, #765522 82% 100%);
    bottom: 5px;
    filter: saturate(0.9);
    left: 0;
    opacity: 0.95;
    position: absolute;
    right: 0;
    top: 5px;
    z-index: 1;
}

.home-redesign .hydro-nozzle {
    animation: hydroNozzleFlight 4.8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    background: linear-gradient(90deg, #779199, #d9edf0 42%, #78929a 44%, #b6d0d5 78%, #526d74);
    border: 2px solid rgba(255, 255, 255, 0.58);
    border-radius: 10px 65% 65% 10px;
    box-shadow: 0 0 22px rgba(118, 220, 248, 0.75);
    height: 48px;
    left: 9%;
    position: absolute;
    top: 35px;
    width: 82px;
    z-index: 4;
}

.home-redesign .hydro-nozzle::before {
    content: none;
}

.home-redesign .hydro-nozzle::after {
    background: #9cb7bd;
    border: 2px solid #e3f4f6;
    border-radius: 50%;
    box-shadow: inset 0 0 0 5px #55747b;
    content: "";
    height: 22px;
    position: absolute;
    right: -7px;
    top: 11px;
    width: 22px;
}

.home-redesign .hydro-jet {
    animation: hydroJetPulse 0.75s ease-in-out infinite alternate;
    border-radius: 999px;
    height: 5px;
    position: absolute;
    z-index: 5;
}

.home-redesign .hydro-jet-rear {
    background: linear-gradient(90deg, transparent, rgba(116, 224, 255, 0.98));
    left: -76px;
    right: auto;
    transform-origin: right center;
    width: 84px;
}

.home-redesign .jet-one {
    top: 5px;
    transform: rotate(24deg);
}

.home-redesign .jet-two {
    top: 21px;
    transform: rotate(0deg);
}

.home-redesign .jet-three {
    bottom: 5px;
    transform: rotate(-24deg);
}

.home-redesign .hydro-jet-forward {
    background: linear-gradient(90deg, rgba(116, 224, 255, 0.98), transparent);
    left: 76px;
    right: auto;
    top: 21px;
    transform: none;
    width: 104px;
}

.home-redesign .hydro-hose {
    animation: hydroHoseStretch 4.8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    background: linear-gradient(180deg, #476b73, #173c43 48%, #0d292f 52%, #315d66);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    height: 15px;
    left: 0;
    position: absolute;
    top: 51px;
    transform-origin: left center;
    width: calc(9% + 72px);
    z-index: 3;
}

.home-redesign .hydro-deposit {
    animation: hydroDepositFade 4.8s ease-in-out infinite;
    background: #79613d;
    border-radius: 50% 42% 55% 38%;
    bottom: 8px;
    box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.12);
    position: absolute;
    z-index: 2;
}

.home-redesign .deposit-one { height: 26px; left: 34%; width: 48px; }
.home-redesign .deposit-two { animation-delay: 0.15s; height: 38px; left: 49%; width: 62px; }
.home-redesign .deposit-three { animation-delay: 0.3s; height: 23px; left: 65%; width: 42px; }
.home-redesign .deposit-four { animation-delay: 0.45s; height: 34px; left: 80%; width: 55px; }

.home-redesign .hydro-jet-scale {
    color: rgba(255, 255, 255, 0.62);
    display: flex;
    font-size: 15px;
    justify-content: space-between;
    margin-top: 18px;
}

.home-redesign .hydro-task-symbol {
    align-items: center;
    background:
        radial-gradient(circle, rgba(149, 177, 43, 0.24), transparent 66%),
        #003b43;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.home-redesign .hydro-task-symbol::before,
.home-redesign .hydro-task-symbol::after {
    border: 1px solid rgba(149, 177, 43, 0.28);
    border-radius: 50%;
    content: "";
    height: 92px;
    position: absolute;
    width: 92px;
}

.home-redesign .hydro-task-symbol::after {
    height: 128px;
    width: 128px;
}

.home-redesign .hydro-task-symbol span {
    color: var(--lime);
    font-size: 54px;
    position: relative;
    z-index: 1;
}

.home-redesign .hydro-task-item {
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.home-redesign .hydro-task-item:hover {
    border-color: rgba(149, 177, 43, 0.58);
    box-shadow: 0 14px 28px rgba(0, 25, 29, 0.3);
    transform: translateX(-5px);
}

@keyframes hydroNozzleFlight {
    0%, 8% { transform: translateX(0); }
    62%, 78% { transform: translateX(390px); }
    100% { transform: translateX(0); }
}

@keyframes hydroTrackClean {
    0%, 8% { transform: scaleX(0.04); }
    62%, 78% { transform: scaleX(1); }
    100% { transform: scaleX(0.04); }
}

@keyframes hydroCleanShine {
    from { opacity: 0.35; transform: translateX(-3%); }
    to { opacity: 0.9; transform: translateX(3%); }
}

@keyframes hydroHoseStretch {
    0%, 8% { width: calc(9% + 72px); }
    62%, 78% { width: calc(9% + 462px); }
    100% { width: calc(9% + 72px); }
}

@keyframes hydroJetPulse {
    from { opacity: 0.48; width: 58px; }
    to { opacity: 1; width: 86px; }
}

@keyframes hydroDepositFade {
    0%, 24% { opacity: 1; transform: scale(1); }
    64%, 78% { opacity: 0.08; transform: scale(0.45); }
    100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 940px) {
    .home-redesign .hydro-task-head,
    .home-redesign .hydro-task-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .home-redesign .hydro-task-head {
        gap: 16px;
    }

    .home-redesign .hydro-task-head h2 {
        font-size: 36px;
    }

    .home-redesign .hydro-task-feature-body {
        padding: 22px;
    }

    .home-redesign .hydro-task-item {
        grid-template-columns: 112px minmax(0, 1fr);
        min-height: 154px;
    }

    .home-redesign .hydro-task-item > div:last-child {
        padding: 17px;
    }

    .home-redesign .hydro-task-item h3 {
        font-size: 22px;
    }

    .home-redesign .hydro-task-item p {
        font-size: 16px;
    }

    .home-redesign .hydro-jet-visual {
        min-height: 270px;
        padding: 26px 18px 22px;
    }

    .home-redesign .hydro-jet-label {
        font-size: 16px;
        margin-bottom: 34px;
    }

    .home-redesign .hydro-pipe {
        height: 105px;
    }

    .home-redesign .hydro-nozzle {
        height: 42px;
        top: 27px;
        width: 70px;
    }

    .home-redesign .hydro-nozzle::before {
        content: none;
    }

    .home-redesign .hydro-hose {
        top: 44px;
    }

    @keyframes hydroNozzleFlight {
        0%, 8% { transform: translateX(0); }
        62%, 78% { transform: translateX(190px); }
        100% { transform: translateX(0); }
    }

    @keyframes hydroHoseStretch {
        0%, 8% { width: calc(9% + 62px); }
        62%, 78% { width: calc(9% + 252px); }
        100% { width: calc(9% + 62px); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-redesign .hydro-nozzle,
    .home-redesign .hydro-clean-track,
    .home-redesign .hydro-jet,
    .home-redesign .hydro-deposit {
        animation: none;
    }
}

.home-redesign .hydro-task-alt {
    background:
        linear-gradient(135deg, rgba(149, 177, 43, 0.07), transparent 35%),
        #002f36;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.home-redesign .hydro-alt-heading {
    align-items: end;
    display: grid;
    gap: 12px 34px;
    grid-template-columns: minmax(0, 1.15fr) minmax(310px, 0.65fr);
    margin-bottom: 30px;
}

.home-redesign .hydro-alt-heading > span {
    color: var(--lime);
    font-family: "Oswald", sans-serif;
    font-size: 17px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home-redesign .hydro-alt-heading h2 {
    font-size: clamp(40px, 5vw, 62px);
    grid-column: 1;
    padding: 0;
    text-align: left;
}

.home-redesign .hydro-alt-heading h2 em {
    color: var(--lime);
    display: block;
    font-style: normal;
}

.home-redesign .hydro-alt-heading p {
    font-size: 20px;
    grid-column: 2;
    grid-row: 1 / span 2;
    line-height: 1.5;
    margin: 0;
}

.home-redesign .hydro-alt-intro {
    align-items: center;
    align-self: end;
    background: linear-gradient(135deg, rgba(0, 82, 93, 0.92), rgba(0, 63, 71, 0.88));
    border: 1px solid rgba(149, 177, 43, 0.34);
    border-left: 4px solid var(--lime);
    border-radius: 9px;
    display: grid;
    gap: 15px;
    grid-column: 2;
    grid-row: 1 / span 2;
    grid-template-columns: 44px 1fr;
    padding: 18px 20px;
}

.home-redesign .hydro-alt-intro > span {
    align-items: center;
    background: rgba(149, 177, 43, 0.14);
    border: 1px solid rgba(149, 177, 43, 0.38);
    border-radius: 50%;
    color: var(--lime);
    display: flex;
    font-family: "Oswald", sans-serif;
    font-size: 27px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.home-redesign .hydro-alt-intro p {
    font-size: 20px;
    grid-column: auto;
    grid-row: auto;
    line-height: 1.5;
    margin: 0;
}

.home-redesign .hydro-alt-intro strong {
    color: var(--lime);
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.home-redesign .hydro-alt-stage {
    background: #001f24;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    box-shadow: 0 24px 52px rgba(0, 16, 19, 0.38);
    overflow: hidden;
    padding: 24px 28px 20px;
}

.home-redesign .hydro-alt-stage-intro {
    font-size: 19px;
    line-height: 1.45;
    margin: 0 0 20px;
}

.home-redesign .hydro-alt-stage-intro strong {
    color: var(--lime);
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
}

.home-redesign .hydro-alt-status,
.home-redesign .hydro-alt-legend {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.home-redesign .hydro-alt-status {
    margin-bottom: 24px;
}

.home-redesign .hydro-alt-status strong {
    color: rgba(255, 255, 255, 0.64);
    font-family: "Oswald", sans-serif;
    font-size: 18px;
}

.home-redesign .hydro-alt-live {
    align-items: center;
    display: inline-flex;
    font-family: "Oswald", sans-serif;
    font-size: 18px;
    gap: 9px;
    text-transform: uppercase;
}

.home-redesign .hydro-alt-live i {
    animation: hydroAltLive 1.25s ease-in-out infinite;
    background: var(--lime);
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(149, 177, 43, 0.12);
    height: 9px;
    width: 9px;
}

.home-redesign .hydro-alt-pipe {
    background: linear-gradient(180deg, #071b1e, #173d42 18%, #09282d 50%, #173d42 82%, #071b1e);
    border: 7px solid #34545a;
    border-radius: 999px;
    box-shadow: inset 0 20px 32px rgba(0, 0, 0, 0.58);
    height: 154px;
    overflow: hidden;
    position: relative;
}

.home-redesign .hydro-alt-grease {
    background:
        radial-gradient(ellipse at 12% 5%, #d2aa52 0 8%, transparent 9%),
        radial-gradient(ellipse at 27% 97%, #8b682b 0 12%, transparent 13%),
        radial-gradient(ellipse at 45% 4%, #b68c3d 0 10%, transparent 11%),
        radial-gradient(ellipse at 63% 98%, #72501d 0 14%, transparent 15%),
        radial-gradient(ellipse at 82% 3%, #c69a45 0 11%, transparent 12%),
        linear-gradient(180deg, #936d2e 0 20%, transparent 34% 66%, #79551f 80%);
    inset: 5px;
    opacity: 0.96;
    position: absolute;
}

.home-redesign .hydro-alt-clean {
    animation: hydroAltClean 5.6s ease-in-out infinite;
    background:
        linear-gradient(180deg, rgba(178, 237, 250, 0.23), transparent 24% 74%, rgba(125, 213, 234, 0.17)),
        #16464e;
    border-radius: 999px;
    bottom: 7px;
    box-shadow: inset 0 9px 15px rgba(169, 235, 249, 0.13), 0 0 30px rgba(87, 207, 241, 0.2);
    left: 0;
    position: absolute;
    top: 7px;
    transform-origin: left center;
    width: 82%;
    z-index: 2;
}

.home-redesign .hydro-alt-hose {
    animation: hydroAltHose 5.6s ease-in-out infinite;
    background: linear-gradient(180deg, #4b7078, #17353b 48%, #0d292e 52%, #345e67);
    border-radius: 999px;
    height: 17px;
    left: 0;
    position: absolute;
    top: 62px;
    width: 14%;
    z-index: 3;
}

.home-redesign .hydro-alt-nozzle {
    animation: hydroAltFlight 5.6s ease-in-out infinite;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.64), transparent 24% 70%, rgba(19, 48, 55, 0.5)),
        linear-gradient(90deg, #4e686f 0 14%, #a9c3c8 15% 34%, #617c83 35% 43%, #d7e8ea 44% 68%, #819ba1 69% 82%, #425d64 100%);
    border: 0;
    border-radius: 5px 3px 3px 5px;
    box-shadow: 0 0 26px rgba(108, 222, 250, 0.7);
    height: 52px;
    left: 11%;
    position: absolute;
    top: 44px;
    width: 92px;
    z-index: 5;
}

.home-redesign .hydro-alt-nozzle::before {
    background: linear-gradient(180deg, #d7e7e9, #526e75 48%, #aec7cb);
    border-left: 2px solid rgba(255, 255, 255, 0.5);
    border-right: 2px solid rgba(16, 43, 49, 0.55);
    content: "";
    height: 38px;
    left: 25px;
    position: absolute;
    top: 7px;
    width: 13px;
}

.home-redesign .hydro-alt-nozzle::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.64), transparent 34%),
        linear-gradient(90deg, #9cb5ba, #405b62);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: "";
    height: 38px;
    position: absolute;
    right: -25px;
    top: 7px;
    width: 27px;
}

.home-redesign .hydro-alt-nozzle i {
    animation: hydroJetPulse 0.7s ease-in-out infinite alternate;
    border-radius: 999px;
    height: 5px;
    position: absolute;
}

.home-redesign .alt-rear {
    background: linear-gradient(90deg, transparent, #78e3ff);
    left: -86px;
    transform-origin: right center;
    width: 94px;
}

.home-redesign .alt-rear-one { top: 5px; transform: rotate(25deg); }
.home-redesign .alt-rear-two { top: 23px; }
.home-redesign .alt-rear-three { bottom: 5px; transform: rotate(-25deg); }

.home-redesign .alt-forward {
    background: linear-gradient(90deg, #78e3ff, transparent);
    left: 112px;
    top: 23px;
    width: 125px;
}

.home-redesign .hydro-alt-particle {
    animation: hydroAltParticle 5.6s ease-in-out infinite;
    background: #b7893c;
    border-radius: 50%;
    height: 12px;
    opacity: 0;
    position: absolute;
    width: 18px;
    z-index: 6;
}

.home-redesign .particle-a { left: 48%; top: 24px; }
.home-redesign .particle-b { animation-delay: 0.15s; left: 57%; bottom: 20px; }
.home-redesign .particle-c { animation-delay: 0.3s; left: 68%; top: 31px; }

.home-redesign .hydro-alt-legend {
    color: rgba(255, 255, 255, 0.67);
    font-size: 16px;
    margin-top: 17px;
}

.home-redesign .hydro-alt-legend span {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.home-redesign .hydro-alt-legend i {
    border-radius: 50%;
    height: 10px;
    width: 10px;
}

.home-redesign .legend-dirty { background: #a77e35; }
.home-redesign .legend-clean { background: #55bad1; }

.home-redesign .hydro-alt-cases {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 18px;
}

.home-redesign .hydro-alt-cases article {
    background: rgba(0, 82, 93, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 9px;
    display: grid;
    gap: 14px;
    grid-template-columns: auto 1fr;
    padding: 21px;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.home-redesign .hydro-alt-cases article:hover {
    background: #00525d;
    border-color: rgba(149, 177, 43, 0.52);
    transform: translateY(-5px);
}

.home-redesign .hydro-alt-cases article > span {
    color: rgba(149, 177, 43, 0.62);
    font-family: "Oswald", sans-serif;
    font-size: 20px;
}

.home-redesign .hydro-alt-cases h3 {
    color: var(--lime);
    font-family: "Oswald", sans-serif;
    font-size: 23px;
    line-height: 1.1;
    margin: 0 0 8px;
}

.home-redesign .hydro-alt-cases p {
    font-size: 17px;
    line-height: 1.42;
    margin: 0;
}

.home-redesign .hydro-alt-footer {
    align-items: center;
    background:
        radial-gradient(circle at 8% 50%, rgba(149, 177, 43, 0.2), transparent 24%),
        rgba(0, 82, 93, 0.72);
    border: 1px solid rgba(149, 177, 43, 0.32);
    border-radius: 10px;
    display: grid;
    gap: 22px;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    margin-top: 28px;
    padding: 24px;
}

.home-redesign .hydro-alt-footer-icon {
    align-items: center;
    background: var(--lime-ui);
    border-radius: 50%;
    box-shadow: 0 0 0 9px rgba(149, 177, 43, 0.12);
    color: var(--white);
    display: flex;
    font-family: "Oswald", sans-serif;
    font-size: 38px;
    height: 62px;
    justify-content: center;
    width: 62px;
}

.home-redesign .hydro-alt-footer-copy > span {
    color: var(--lime);
    font-family: "Oswald", sans-serif;
    font-size: 15px;
    text-transform: uppercase;
}

.home-redesign .hydro-alt-footer h3 {
    color: var(--white);
    font-family: "Oswald", sans-serif;
    font-size: 29px;
    line-height: 1.1;
    margin: 4px 0 8px;
}

.home-redesign .hydro-alt-footer p {
    font-size: 17px;
    line-height: 1.4;
    margin: 0;
}

.home-redesign .hydro-alt-footer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.home-redesign .hydro-alt-footer-tags span {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    font-size: 15px;
    padding: 7px 11px;
}

.home-redesign .hydro-alt-footer-action {
    display: grid;
    gap: 7px;
    justify-items: end;
    min-width: 230px;
}

.home-redesign .hydro-alt-footer-action small {
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
}

.home-redesign .hydro-alt-phone {
    color: var(--lime);
    font-family: "Oswald", sans-serif;
    font-size: 28px;
    line-height: 1;
    text-decoration: none;
}

@keyframes hydroAltLive {
    0%, 100% { opacity: 0.45; transform: scale(0.84); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes hydroAltFlight {
    0%, 9% { transform: translateX(0); }
    62%, 79% { transform: translateX(720px); }
    100% { transform: translateX(0); }
}

@keyframes hydroAltHose {
    0%, 9% { width: 14%; }
    62%, 79% { width: calc(14% + 720px); }
    100% { width: 14%; }
}

@keyframes hydroAltClean {
    0%, 9% { transform: scaleX(0.05); }
    62%, 79% { transform: scaleX(1); }
    100% { transform: scaleX(0.05); }
}

@keyframes hydroAltParticle {
    0%, 35% { opacity: 0; transform: translate(0, 0) scale(1); }
    46% { opacity: 1; }
    66%, 100% { opacity: 0; transform: translate(-90px, 42px) scale(0.35); }
}

@media (max-width: 940px) {
    .home-redesign .hydro-alt-heading {
        grid-template-columns: 1fr;
    }

    .home-redesign .hydro-alt-heading p {
        grid-column: 1;
        grid-row: auto;
    }

    .home-redesign .hydro-alt-intro {
        grid-column: 1;
        grid-row: auto;
    }

    .home-redesign .hydro-alt-cases {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @keyframes hydroAltFlight {
        0%, 9% { transform: translateX(0); }
        62%, 79% { transform: translateX(430px); }
        100% { transform: translateX(0); }
    }

    @keyframes hydroAltHose {
        0%, 9% { width: 14%; }
        62%, 79% { width: calc(14% + 430px); }
        100% { width: 14%; }
    }
}

@media (max-width: 560px) {
    .home-redesign .hydro-alt-stage {
        padding: 20px 14px 16px;
    }

    .home-redesign .hydro-alt-intro {
        gap: 12px;
        grid-template-columns: 38px 1fr;
        padding: 16px;
    }

    .home-redesign .hydro-alt-intro > span {
        font-size: 23px;
        height: 36px;
        width: 36px;
    }

    .home-redesign .hydro-alt-intro p {
        font-size: 17px;
    }

    .home-redesign .hydro-alt-pipe {
        height: 118px;
    }

    .home-redesign .hydro-alt-hose {
        height: 14px;
        top: 46px;
    }

    .home-redesign .hydro-alt-nozzle {
        height: 44px;
        top: 31px;
        width: 76px;
    }

    .home-redesign .alt-forward {
        left: 94px;
        top: 19px;
        width: 90px;
    }

    .home-redesign .alt-rear {
        left: -68px;
        width: 75px;
    }

    .home-redesign .alt-rear-one { top: 4px; }
    .home-redesign .alt-rear-two { top: 19px; }
    .home-redesign .alt-rear-three { bottom: 4px; }

    .home-redesign .hydro-alt-cases {
        grid-template-columns: 1fr;
    }

    .home-redesign .hydro-alt-footer {
        align-items: stretch;
        grid-template-columns: 52px minmax(0, 1fr);
        padding: 20px;
    }

    .home-redesign .hydro-alt-footer-icon {
        font-size: 30px;
        height: 48px;
        width: 48px;
    }

    .home-redesign .hydro-alt-footer-action {
        grid-column: 1 / -1;
        justify-items: stretch;
        min-width: 0;
        text-align: center;
    }

    .home-redesign .hydro-alt-footer .preview-button {
        width: 100%;
    }

    @keyframes hydroAltFlight {
        0%, 9% { transform: translateX(0); }
        62%, 79% { transform: translateX(185px); }
        100% { transform: translateX(0); }
    }

    @keyframes hydroAltHose {
        0%, 9% { width: 14%; }
        62%, 79% { width: calc(14% + 185px); }
        100% { width: 14%; }
    }
}