:root {
    --header-height: 116px;
    --water-shadow: 0 18px 36px #044b641b, 0 4px 10px #044b6409
}

.header {
    border-bottom: 1px solid #d1e9ef;
    transition: box-shadow .65s, background .65s !important
}

.header.is-scrolled {
    box-shadow: 0 9px 26px #073f541c;
    background: #fff
}

.header .brand>img {
    transition: transform .8s var(--ease-water), filter .8s
}

.header .brand:hover>img {
    transform: rotate(-9deg) scale(1.07);
    filter: drop-shadow(0 4px 5px #0499b526)
}

.desktop-nav>a,
.nav-dropdown>button {
    padding: 10px 9px;
    border-radius: 8px;
    transition: background .5s, color .5s !important
}

.desktop-nav>a:hover,
.desktop-nav>a:focus-visible,
.nav-dropdown>button:hover {
    background: #e9f6f9
}

.desktop-nav {
    gap: 13px
}

.menu-toggle {
    box-shadow: inset 0 0 0 4px #f1f8fa, 0 4px 10px #073f540a;
    transition: background .55s, box-shadow .55s, transform .55s !important
}

.menu-toggle:hover {
    background: #b9eef3;
    box-shadow: inset 0 0 0 4px #e2f8fa, 0 7px 15px #04768c20;
    transform: rotate(-4deg)
}

.search-open:hover {
    box-shadow: 0 6px 14px #05758c12
}

.mobile-menu {
    background: #053e54;
    border-left: 1px solid #40899d;
    box-shadow: -25px 25px 70px #002a4430;
    padding-top: 80px;
    padding-bottom: 45px;
    overflow-y: auto;
    gap: 21px
}

.mobile-menu:before {
    content: '';
    position: absolute;
    inset: 22px;
    border: 1px solid #39788c55;
    border-radius: 22px;
    pointer-events: none;
    z-index: -1
}

.drawer-mark {
    width: 78px;
    height: 78px;
    padding: 11px;
    background: #e7f9fc;
    border: 1px solid #a2e3ee;
    border-radius: 50%;
    box-shadow: 0 0 0 8px #ffffff06, 0 9px 22px #00273a33;
    flex-shrink: 0;
    margin-bottom: 4px
}

.drawer-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .8s
}

.mobile-menu.open .drawer-mark:hover img {
    transform: rotate(-12deg)
}

.drawer-close {
    position: absolute;
    right: 24px;
    top: 23px;
    width: 38px;
    height: 38px;
    display: grid;
    place-content: center;
    border: 1px solid #70b4c366;
    background: #ffffff08;
    color: #d5f4fa;
    border-radius: 50%;
    transition: background .5s, transform .6s !important
}

.drawer-close svg {
    width: 20px;
    height: 20px
}

.drawer-close:hover {
    background: #1a6b82;
    transform: rotate(90deg)
}

.drawer-heading {
    color: #a6d6e3;
    line-height: 1.6;
    font-size: 12px;
    margin-bottom: 10px
}

.mobile-menu>a {
    padding: 3px 8px;
    opacity: 0;
    translate: 0 12px;
    transition: opacity .65s var(--ease-water), translate .7s var(--ease-water), color .5s !important
}

.mobile-menu.open>a {
    opacity: 1;
    translate: 0 0;
    transition-delay: calc(var(--menu-order)*35ms + 70ms) !important
}

.mobile-menu>a:after {
    height: 3px;
    bottom: -4px;
    border-radius: 50%;
    background: #28c7d1
}

.drawer-wave {
    height: 190px;
    opacity: .12
}

.mobile-menu>a:last-of-type {
    font-size: 14px;
    margin-top: 15px
}

.photo-card,
.focus-row,
.editorial-points>div,
.choice-display,
.reference-features>a,
.plan-panel,
.lab-panel,
.scope-offers>a {
    box-shadow: 0 8px 20px #064d660c;
    transition: box-shadow .65s var(--ease-water), border-color .6s, background .6s, translate .7s var(--ease-water) !important
}

.photo-card:hover,
.photo-card:focus-within,
.editorial-points>div:hover,
.choice-display:hover,
.reference-features>a:hover,
.plan-panel:hover,
.lab-panel:hover {
    box-shadow: var(--water-shadow);
    border-color: #70bfce
}

.focus-row:hover {
    box-shadow: var(--water-shadow);
    background: #e8f7fa
}

.editorial-points>div:hover,
.reference-features>a:hover {
    background: #e7f7fa
}

.card-copy .text-link,
.reference-copy .btn {
    transition: color .5s, transform .6s
}

.photo-card:hover .card-copy .text-link {
    transform: translateX(3px)
}

.photo-card .photo-wrap>img,
.renovation-card>img {
    transition: transform 1.1s var(--ease-water) !important
}

.photo-card:hover .photo-wrap>img,
.renovation-card:hover>img {
    transform: scale(1.065)
}

.equipment-section {
    box-shadow: inset 0 1px 0 #4a94a355, inset 0 -1px 0 #2a788d66
}

.equipment-visual>img {
    filter: drop-shadow(0 22px 17px #001c2e70);
    transition: filter .7s
}

.equipment-visual:hover>img {
    filter: drop-shadow(0 26px 22px #00152590)
}

.equipment-hotspot {
    transition: box-shadow .6s, background .6s, transform .6s !important
}

.equipment-hotspot:hover {
    transform: scale(1.08);
    box-shadow: 0 0 0 11px #38d3df22, 0 8px 18px #002b4455
}

.tool-tabs button {
    box-shadow: inset 0 1px 0 #ffffff18, 0 7px 15px #001e2b18
}

.tool-tabs button:hover {
    box-shadow: inset 0 1px 0 #ffffff66, 0 10px 20px #001e2b30
}

.tab-panel.split {
    box-shadow: 0 14px 35px #0b64781b, inset 0 0 0 6px #ffffff90
}

.tab-copy:after {
    transition: translate .9s var(--ease-water)
}

.tab-panel:hover .tab-copy:after {
    translate: 9px -6px
}

.before-copy {
    box-shadow: 0 10px 25px #064d6610;
    transition: box-shadow .65s, background .65s
}

.before-copy:hover {
    background: #e9f7fa;
    box-shadow: var(--water-shadow)
}

.compare {
    transition: box-shadow .65s
}

.compare:hover {
    box-shadow: 0 20px 40px #064d662a
}

.compare-divider>span {
    transition: scale .45s, box-shadow .45s
}

.compare:hover .compare-divider>span {
    scale: 1.08;
    box-shadow: 0 5px 15px #00384d35
}

.marquee {
    border-block: 1px solid #ffffff20
}

.marquee-track i .pool-icon {
    transition: transform .75s !important
}

.marquee:hover .marquee-track i .pool-icon {
    transform: rotate(12deg)
}

.accordion details {
    box-shadow: 0 4px 12px #064d6608;
    border-color: #c9e3ea
}

.accordion details:hover,
.accordion details[open] {
    border-color: #62b9c9;
    box-shadow: 0 9px 22px #064d6614
}

.accordion details[open] {
    background: #edf8fa
}

.accordion summary:after {
    transition: transform .5s, color .5s
}

.faq-media,
.overview-photo,
.symptom-photo,
.reference-photos>img:first-child {
    box-shadow: 0 12px 29px #064d6614
}

.contact-form:hover,
.contact-form:focus-within {
    box-shadow: 0 24px 48px #064d6622, 0 6px 14px #064d6610, inset 0 0 0 6px #f2f8fa
}

.contact-form {
    transition: box-shadow .7s !important
}

.contact-photo {
    box-shadow: 0 9px 22px #064d6618
}

.footer {
    box-shadow: inset 0 1px 0 #408ea055
}

.footer-grid>div>a:not(.brand) {
    transition: color .5s, translate .55s !important
}

.footer-grid>div>a:not(.brand):hover {
    translate: 3px 0;
    color: #4cdae1
}

.footer .brand>img {
    transition: transform .7s
}

.footer .brand:hover>img {
    transform: rotate(-8deg)
}

.station-screen a {
    transition: box-shadow .6s, background .6s !important
}

.scope-offers>a:hover {
    box-shadow: 0 14px 28px #064d6625
}

.organic-trio img {
    box-shadow: 12px 9px 0 #def1f5, 0 13px 24px #064d6619
}

.gallery-choice {
    box-shadow: 0 10px 24px #064d6617
}

.reference-photos {
    isolation: isolate
}

.mini-benefits>span {
    border: 1px solid #d3e9ef;
    box-shadow: 0 4px 11px #064d6607;
    transition: background .6s, box-shadow .6s
}

.mini-benefits>span:hover {
    background: #dff3f7;
    box-shadow: 0 9px 18px #064d6612
}

.legal-hero {
    box-shadow: inset 0 -1px 0 #27798e
}

.legal-hero:after {
    border-color: #24b1bd;
    opacity: .24;
    animation: legal-orbit 28s linear infinite !important
}

.legal-hero:before {
    content: '';
    position: absolute;
    width: 230px;
    height: 230px;
    border: 1px solid #47a5b6;
    border-radius: 50%;
    left: -100px;
    top: 45px;
    box-shadow: 0 0 0 22px #ffffff04, 0 0 0 45px #ffffff03;
    pointer-events: none
}

.legal-copy {
    max-width: none
}

.legal-copy section {
    position: relative;
    padding: 30px 78px 30px 30px;
    border: 1px solid #d1e6ec;
    border-left: 4px solid #21adbe;
    background: #f6fafb;
    border-radius: 15px;
    box-shadow: 0 9px 24px #064d660b;
    scroll-margin-top: calc(var(--header-height) + 25px)
}

.legal-copy section:hover,
.legal-copy section:target {
    background: #edf8fa;
    border-color: #77c3d1;
    box-shadow: var(--water-shadow)
}

.legal-section-icon {
    position: absolute;
    top: 26px;
    right: 23px;
    width: 36px;
    height: 36px;
    object-fit: contain;
    transition: transform .7s
}

.legal-copy section:hover .legal-section-icon {
    transform: rotate(-8deg) translateY(-3px)
}

.legal-copy section h2 {
    font-size: 30px
}

.legal-copy section p {
    font-size: 15px;
    line-height: 1.9
}

.legal-nav {
    border: 1px solid #c2e2e9;
    border-radius: 16px;
    background: #eaf6f9;
    padding: 15px;
    gap: 5px;
    top: calc(var(--header-height) + 18px);
    box-shadow: 0 10px 24px #064d6611
}

.legal-nav a {
    padding: 11px 13px;
    border-radius: 8px;
    transition: background .5s, box-shadow .5s, color .5s
}

.legal-nav a:hover,
.legal-nav a[aria-current=location] {
    background: white;
    box-shadow: 0 5px 12px #064d6610;
    color: #007e9e
}

.page-transition {
    background: #06475c;
    opacity: 1;
    visibility: hidden;
    translate: 0 115%;
    transition: translate .65s cubic-bezier(.65, 0, .25, 1), visibility .65s !important;
    overflow: visible;
    gap: 18px;
    pointer-events: none
}

.page-transition.active {
    translate: 0 0;
    visibility: visible;
    pointer-events: auto
}

.transition-wave {
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: 100px;
    object-fit: fill;
    filter: brightness(0) saturate(100%) invert(19%) sepia(32%) saturate(1445%) hue-rotate(150deg) brightness(94%) contrast(98%);
    transform: rotate(180deg);
    margin-bottom: -2px
}

.transition-brand {
    width: 82px;
    height: 82px;
    object-fit: contain;
    background: #e5f8fc;
    border-radius: 50%;
    padding: 12px;
    box-shadow: 0 0 0 12px #ffffff07, 0 15px 35px #001b2d30;
    animation: transition-float 2.6s ease-in-out infinite
}

.page-transition>span:last-child {
    font-size: 25px;
    letter-spacing: .2px
}

.page-transition.leaving {
    transition: none !important
}

@keyframes legal-orbit {
    to {
        rotate: 360deg
    }
}

@keyframes transition-float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-7px)
    }
}

@media(hover:hover) and (prefers-reduced-motion:no-preference) {
    .responds-to-pointer {
        transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
        transition: transform .7s var(--ease-water), box-shadow .65s, border-color .6s, background .6s !important
    }

    .responds-to-pointer:hover {
        box-shadow: var(--water-shadow)
    }
}

@media(max-height:760px) {
    .mobile-menu {
        justify-content: flex-start;
        gap: 15px;
        padding-top: 60px
    }

    .drawer-mark {
        width: 58px;
        height: 58px
    }

    .mobile-menu>a {
        font-size: 26px
    }

    .drawer-heading {
        margin-bottom: 0
    }

    .mobile-menu>a:last-of-type {
        margin-top: 5px
    }
}

@media(max-width:1000px) {
    .desktop-nav {
        display: none
    }
}

@media(max-width:767px) {
    .mobile-menu {
        padding: 65px 28px 35px;
        gap: 20px
    }

    .mobile-menu>a {
        font-size: 28px
    }

    .drawer-mark {
        width: 65px;
        height: 65px
    }

    .drawer-close {
        top: 18px;
        right: 20px
    }

    .legal-nav {
        position: sticky;
        top: var(--header-height);
        z-index: 30;
        gap: 9px;
        padding: 10px;
        border-radius: 10px;
        max-width: 100%;
        scrollbar-width: thin
    }

    .legal-nav a {
        font-size: 12px;
        flex-shrink: 0;
        padding: 9px 12px
    }

    .legal-copy section {
        padding: 23px 22px;
        scroll-margin-top: calc(var(--header-height) + 85px)
    }

    .legal-copy section h2 {
        padding-right: 42px;
        font-size: 26px
    }

    .legal-section-icon {
        right: 21px;
        top: 22px;
        width: 30px;
        height: 30px
    }

    .legal-copy section p {
        font-size: 14px
    }

    .transition-wave {
        height: 65px
    }

    .transition-brand {
        width: 70px;
        height: 70px
    }

    .page-transition>span:last-child {
        font-size: 23px
    }
}

@media(prefers-reduced-motion:reduce) {
    .page-transition {
        display: none !important
    }

    .mobile-menu>a {
        translate: none !important;
        transition: none !important
    }

    .legal-hero:after,
    .transition-brand {
        animation: none !important
    }

    .responds-to-pointer {
        transform: none !important
    }
}