*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
ul,
ol {
    list-style: none;
    padding: 0;
}
img,
picture {
    display: block;
    max-width: 100%;
    height: auto;
    border-style: none;
}
input,
button,
textarea,
select {
    font: inherit;
}
@font-face {
    font-family: 'Test Tiempos Fine';
    src: url('../fonts/TiemposText-RegularItalic.eot');
    src: url('../fonts/TiemposText-RegularItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/TiemposText-RegularItalic.woff2') format('woff2'),
        url('../fonts/TiemposText-RegularItalic.woff') format('woff'),
        url('../fonts/TiemposText-RegularItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
body {
    font-family: "Instrument Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    background: #0B1117;
}
.container {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
}
h1 {
    color: #FFF;
    font-size: 65px;
    font-style: normal;
    font-weight: 600;
    line-height: 72px; /* 130.769% */
}
h1 .italic {
    font-family: 'Test Tiempos Fine', sans-serif;
    font-weight: 300;
}

h2 {
    color: #000;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 15px;
}
h2 span {
    color: #EF6D2C;
    font-family: 'Test Tiempos Fine', sans-serif;
    font-style: italic;
    font-weight: 300;
    line-height: normal;
}
h3{
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; /* 133.333% */
    margin:0 0 8px;
    position:relative;
}
.sec-head p:not(.eyebrow) {
    color: #383743;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 152.941% */
}
.eyebrow {
    color: #EF6D2C;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 2.08px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.eyebrow.black {
    color: #000;
}
.text-center {
    text-align: center;
}
/*  */
.default-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 15px 30px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    background: #0078D6;
    color: #FFF;
}
.default-btn.white {
    background: #FFF;
    color: #000;
}
.default-btn {
    padding: 18px 26px;
    font-size: 16px;
    position: relative;
}
/* All button content (label + trailing arrow) lives inside .btn-center so
   it moves and centers together, instead of the old absolutely-positioned
   arrow pinned to the button's right edge regardless of label width. */
.btn-center {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.default-btn .btn-center::after {
    content: '';
    flex-shrink: 0;
    background: url('../images/right-arrow.svg') no-repeat center;
    width: 20px;
    height: 20px;
}
.default-btn.blue .btn-center::after {
    filter: invert(1);
}
.default-btn.white {
    color: #000000;
}
.default-btn.outline {
    background: transparent;
    border: 2px solid #000;
    color: #000;
}
.default-btn.dark {
    background: #101012;
    color: #FFF;
}
.default-btn.dark .btn-center::after {
    filter: invert(1);
}
.default-btn {
    overflow: hidden;
    transition: color 0.4s ease;
    z-index: 1;
    min-width: 170px;
    cursor: pointer;
}
.default-btn.white:hover .btn-center::after {
    filter: invert(1);
}
.default-btn.outline:hover {
    border-color: transparent;
}
/* Hover circle */
.default-btn::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #52c8ef;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -35%);
    transition: all 0.45s ease;
    z-index: -1;
}
/* Expand circle on hover */
.default-btn:hover::before {
    width: 350px;
    height: 350px;
    top: 50%;
    transform: translate(-50%, -50%);
}
.default-btn:hover {
    color: #fff;
}

/*  */
.padding-t-90 {
    padding-top: 90px;
}
.padding-b-90 {
    padding-bottom: 90px;
}
.padding-t-80 {
    padding-top: 80px;
}
.padding-b-80 {
    padding-bottom: 80px;
}
/*  */
/* ================= HEADER ================= */
/* Fixed from the start. It used to switch absolute -> fixed at 20px of
   scroll, which teleported the bar back down by however far the page had
   already scrolled (a ~21px jump, with only `background` transitioned) —
   that was the jerk. Pinned throughout, nothing moves; only the bar
   behind the content fades in. */
.ek-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 22px 0;
    background: transparent;
    transition:
        padding .35s var(--ease),
        box-shadow .35s var(--ease);
}
/* The tint + blur live on a pseudo-element so they can cross-fade on
   `opacity` (compositor-friendly, unlike animating a background colour) and
   so `backdrop-filter` never sits on <header> itself — it contains a
   position:fixed drawer, and a filter on an ancestor makes it the
   containing block in some engines. */
   
.ek-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background: rgb(0 0 0 / 55%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: opacity .35s var(--ease);
}
.ek-header.is-fixed::before {
    opacity: 1;
}
.ek-header.is-fixed {
    padding: 12px 0;
    box-shadow: 0 8px 30px rgb(0 0 0 / 28%);
}
.ek-header .nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ek-header nav > ul {
    display: flex;
    gap: 34px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ek-header nav > ul > li {
    position: relative;
}
.ek-header nav a {
    color: #EEF2F2;
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}
.ek-header nav > ul > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px;
}
.ek-header nav li i {
    color: #EEF2F2;
    font-size: 10px;
    font-weight: 300;
    transition: transform .3s ease;
}
/* Desktop submenu */

.ek-header .sub-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 220px;
    padding: 10px;
    margin: 0;
    list-style: none;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;
}
.ek-header .sub-menu li a {
    display: block;
    padding: 11px 14px;
    color: #153540;
    font-size: 14px;
    transition: background .2s ease;
}
.ek-header .sub-menu li a:hover {
    background: #f2f5f6;
}
.ek-header .has-submenu:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.ek-header .nav-right {
    display: flex;
    align-items: center;
    gap: 22px;
}
.ek-header .icon-box {
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.30);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ek-header .nav-right .contact-us {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 15px 30px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    background: #0078D6;
    color: #FFF;
    position: relative;
}
.ek-header .nav-right .contact-us {
    overflow: hidden;
    transition: color 0.4s ease;
    z-index: 1;
}
.ek-header .nav-right .contact-us::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #52c8ef;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -35%);
    transition: all 0.45s ease;
    z-index: -1;
}
.ek-header .nav-right .contact-us:hover::before {
    width: 350px;
    height: 350px;
    top: 50%;
    transform: translate(-50%, -50%);
}
.ek-header .nav-right .contact-us:hover {
    color: #fff;
}

/* Full-width search bar, toggled by .search-box.icon-box (desktop only —
   .search-box itself is hidden below 991px in favour of .mobile-nav-search). */
.ek-header .header-search-bar {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1320px;
    padding: 18px 30px;
    z-index: 1;
    display: none;
    align-items: center;
    gap: 18px;
    background: #FFF;
    box-shadow: 0 12px 30px rgb(0 0 0 / 18%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s var(--ease);
}
.ek-header.search-open .header-search-bar {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.ek-header .header-search-icon {
    flex-shrink: 0;
    color: #71D8F0;
    font-size: 18px;
}
.ek-header .header-search-input {
    flex: 1;
    width: 100%;
    border: 1px solid #71D8F0;
    border-radius: 40px;
    padding: 14px 26px;
    font-size: 15px;
    color: #153540;
    background: #FFF;
    outline: 0;
}
.ek-header .header-search-input::placeholder {
    color: rgba(21, 53, 64, 0.45);
}
.ek-header .header-search-close {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: #153540;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity .2s ease;
}
.ek-header .header-search-close:hover {
    opacity: .7;
}
@media (max-width: 991px) {
    .ek-header .header-search-bar {
        display: none !important;
    }
}

.menu-link-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.submenu-toggle {
    padding: 0;
    border: 0;
    background: transparent;
    color: #EEF2F2;
    cursor: pointer;
}
.submenu-toggle i {
    transition: transform .3s ease;
}
/* Hide mobile elements on desktop */

.menu-toggle,
.mobile-nav-head,
.mobile-nav-search,
.mobile-nav-bottom {
    display: none;
}
.menu-overlay {
    display: none;
}
/*  */
.hero-section {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
}
.hero-section video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    z-index: -1;
}
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        /* Black pad behind the filter, as in the comp — the hero fades to solid
           black over its last ~120px so the search bar (and, on mobile, the
           filter toggle) sits on black. Anchored in px, not %, because both sit
           a fixed distance off the hero's bottom edge at any viewport height;
           capped at 46% so it never swallows a short hero. */
        linear-gradient(to top,
            #000 0,
            #000 120px,
            rgb(0 0 0 / 0) min(360px, 46%)),
        /* top-down wash, for h1 legibility */
        linear-gradient(180deg, #000000b8 6.82%, rgb(0 0 0 / 44%) 52.92%);
    z-index: -1;
}
.hero-section .break {
    display: block;
}
.hero-section h1 {
    padding-bottom: 10px;
}
.hero-section p {
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 170% */
    margin-top: 10px;
    max-width: 480px;
}
.hero-inner {
    margin-top: -100px;
}
.hero-buttons {
    margin-top: 50px;
    display: flex;
    gap: 15px;
}
.bottom-search {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    width: 100%;
        max-width: 1320px;
    margin: 0 auto;
    padding: 0 30px;
}
.filter-toggle {
    display: none;
}
/* both are mobile-sheet controls only; the inline desktop bar has neither */
.filter-close {
    display: none;
}
.scroll-cue {
    color: rgba(255, 255, 255, 0.60);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px; /* 333.333% */
    letter-spacing: 3px;
    text-transform: uppercase;
}
.scroll-pill {
    width: 26px;
    height: 42px;
    border: 1.5px solid rgba(255, 255, 255, .55);
    border-radius: 20px;
    margin: 12px auto 0;
    display: flex;
    justify-content: center;
    padding-top: 8px;
}
.scroll-cue img {
    margin: 10px auto 0;
    animation: scrollmove 1.6s infinite;
}
.scroll-pill span {
    width: 4px;
    height: 8px;
    border-radius: 2px;
    background: #fff;
    animation: scrollmove 1.6s infinite;
}
@keyframes scrollmove {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(10px);
        opacity: 0;
    }
}
/*  */
.pool-search-component h3 {
    color: rgba(255, 255, 255, 0.70);
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 10px;
}
.pool-search-inner {
    background: #FFF;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.04);
    display: flex;
    gap: 15px;
    padding: 15px 20px;
    justify-content: space-between;
}
.dropdown-list {
    display: flex;
    gap: 15px;
    border-bottom: 1px rgb(255 255 255 / 32%) solid;
}
select.search-dropdown {
    border: 0;
    outline: 0;
    color: rgba(0, 0, 0, 0.80);
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 200% */
}
.clear-filter-btn {
    /* Same type metrics as the field labels so it sits on their baseline; the
       brand blue (was an off-palette #2836D2) ties it to View Results and keeps
       it reading as an action rather than another field. */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Muted, not brand blue: View Results is the primary action and should own
       the blue on its own. Same grey as .mobile-nav-search-btn, the other
       secondary control. 5.0:1 on white. */
    color: #2836D2;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    border: 0;
    outline: 0;
    cursor: pointer;
    border-left: 1px solid #DDDDE5;
    background: #FFF;
    padding-left: 20px;
    white-space: nowrap;
}
.clear-filter-btn i {
    font-size: 16px;
    line-height: 1;
}
button.view-results-btn {
    background: #0078D6;
    border: 0;
    outline: 0;
    padding: 15px 30px;
    color: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    cursor: pointer;
    position: relative;
}
button.view-results-btn {
    overflow: hidden;
    transition: color 0.4s ease;
    z-index: 1;
}
button.view-results-btn::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #52c8ef;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -35%);
    transition: all 0.45s ease;
    z-index: -1;
}
button.view-results-btn:hover::before {
    width: 350px;
    height: 350px;
    top: 50%;
    transform: translate(-50%, -50%);
}
button.view-results-btn:hover {
    color: #fff;
}
.pool-search-component img {
    max-width: 30px;
    max-height: 30px;
    margin: auto;
}


  /* ================= HELP SECTION ================= */
.help{
    background-color: #FFF;
}
.help-grid{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:22px;
    margin-top:48px;
}
.help-card{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    color:#fff;
    max-height: 680px;
    flex: 1;
}
.help-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.001);
    transform-origin: center;
    will-change: transform;
    backface-visibility: hidden;
    transition: transform 0.9s cubic-bezier(.22, .61, .36, 1);
}
.help-card:hover img,
.help-card:focus-within img {
    transform: scale(1.08);
}
.help-stack{
    display:flex;
    flex-direction:column;
    gap:22px;
}
.help-card p{
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 160% */
    margin:0;
    max-width:340px;
    position:relative;
}
.help-card .text-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 50px;
    z-index: 1;
    transform: translate3d(0, 30px, 0);
    will-change: transform;
    transition: transform 0.55s cubic-bezier(.22, .61, .36, 1);
}
.help-card:hover .text-overlay,
.help-card:focus-within .text-overlay {
    transform: translate3d(0, 0, 0);
}
.help-card::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(20deg, rgba(0, 0, 0, 0.50) 27.71%, rgba(0, 0, 0, 0.10) 91.43%);
    z-index: 1;
}
.help-card::after {
    content: '';
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 46.12%, #000 87.35%);
    width: 100%;
    height: 100%;
}
.help-card .project-link {
    margin-top: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translate3d(0, 8px, 0);
    pointer-events: none;
    transition:
        max-height 0.55s cubic-bezier(.22, .61, .36, 1),
        margin-top 0.55s cubic-bezier(.22, .61, .36, 1),
        opacity 0.4s ease 0.1s,
        transform 0.5s cubic-bezier(.22, .61, .36, 1) 0.08s;
}
.help-card:hover .project-link,
.help-card:focus-within .project-link {
    opacity: 1;
    max-height: 40px;
    margin-top: 15px;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}
.help-stack.for-mobile-card {
    display: none;
}

/*  */
.pool-slider-wrap {
    width: 100%;
    margin: 50px auto 0;
    overflow: hidden;
    position: relative;
}
.pool-slider {
    position: relative;
}
/* Each slide */
.pool-slide {
    height: 500px;
    margin: 0 8px;
    box-sizing: border-box;
    position: relative;
}
.pool-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 0;
}
/* Center slide */
.pool-slide.slick-center {
    position: relative;
    z-index: 2;
}
/* Make side slides slightly darker */
.pool-slide:not(.slick-center) {
    opacity: 0.75;
}
/* Slick arrow common */
.pool-slider .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    z-index: 10;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    font-size: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Previous */
.pool-slider .slick-prev {
    left: calc(50% - 520px);
}
/* Next */
.pool-slider .slick-next {
    right: calc(50% - 520px);
}
/* Arrow icons */
.pool-slider .slick-prev::before,
.pool-slider .slick-next::before {
    font-size: 24px;
    line-height: 1;
    color: #111;
    opacity: 1;
}
.pool-slider .slick-prev::before {
    content: "";
    background: url('../images/arrow-right.svg') no-repeat center;
    background-size: 100%;
    width: 11px;
    height: 11px;
    display: inline-block;
    transform: rotate(180deg);
}
.pool-slider .slick-next::before {
    content: "";
    background: url('../images/arrow-right.svg') no-repeat center;
    background-size: 100%;
    width: 11px;
    height: 11px;
    display: inline-block;
}
.pool-slider .slick-next:focus,
.pool-slider .slick-next:hover,
.pool-slider .slick-prev:focus,
.pool-slider .slick-prev:hover {
    background: #000 !important;
}
.pool-slider .slick-arrow:focus::before,
.pool-slider .slick-arrow:hover::before{
    filter: invert(1);
}
/*  */
.model-card {
    position: absolute;
    z-index: 1;
    bottom: 40px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    gap: 20px;
}
.model-stats .stat-item:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    padding-right: 40px;
}
/* bottom info revealed on hover only */

.pool-slide.slick-slide.slick-current.slick-active.slick-center {
    background: linear-gradient(180deg, rgba(15, 16, 20, 0.00) 46.12%, rgba(15, 16, 20, 0.90) 87.35%);
}
.model-card {
    opacity: 0;
    transform: translateY(25px);
    transition:
        opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    will-change: transform, opacity;
}
.pool-slide.slick-center .model-card {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.pool-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 16, 20, 0.00) 46.12%, rgba(15, 16, 20, 0.90) 87.35%);
}

.model-info {
    max-width: 400px;
    width: 100%;
}
.model-info h3 {
    color: #FFF;
    font-family: 'Test Tiempos Fine', sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin: 0 0 20px;
}
.model-info p {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    margin: 0;
}
.model-stats {
    border: 1px solid #24474F;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(27px);
    display: flex;
    gap: 60px;
    padding: 22px;
}
.model-stats div {
    text-align: center;
    color: #fff;
}
.model-stats .stat-icon {
    color: #5fc9e8;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
}
.model-stats .stat-icon img {
    width: 35px;
    height: 35px;
}
.model-stats .stat-num {
    color: #FFF;
    text-align: center;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2; /* 152.941% */
    display: block;
}
.model-stats .stat-label {
    color: #FFF;
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 200% */
    text-transform: uppercase;
}
/*  */

.explore-pools {
    background: #0F1014;
}
.explore-pools h2 {
    color: #FFF;
}
.explore-pools h2 span {
    color: #71D8F0;
}
.explore-pools .sec-head p:not(.eyebrow) {
    color: #FFF;
}

.explore-tabs {
    width: min(378px, 100%);
    margin: 22px auto 0;
    display: flex;
    padding: 8px 9px;
    border: 1px solid rgba(112, 217, 239, .3);
    background: rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(20px);
}
.explore-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: #FFF;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.explore-tab img {
    width: 20px;
    height: 20px;
    flex: none;
}
.explore-tab.is-active {
    background: linear-gradient(90deg, #174F7B 0%, #38C2ED 47.12%, #174F7B 100%);
}

/*  */

/* ================= UNRIVALED QUALITY ================= */
.quality-section {
    position: relative;
    background: #fff;
    overflow: hidden;
}
/* =========================
   IMAGE SLIDER
========================= */
.quality-media {
    margin-left: 28%;
    overflow: hidden;
}
.quality-media,
.quality-media .slick-list,
.quality-media .slick-track {
    height: 100%;
}
.media-slide-item {
    position: relative;
}
.quality-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* =========================
   CONTAINER
========================= */
.quality-section .container {
    position: absolute;
    inset: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    align-items: center;
    pointer-events: none;
}
/* =========================
   CONTENT CARD
========================= */
.quality-card {
    position: relative;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 435px;
    width: 100%;
    padding: 40px;
    pointer-events: auto;
}
/* =========================
   CONTENT SLIDER
========================= */
.quality-content-slider {
    width: 100%;
}
.content-slide-item {
    width: 100%;
}
.quality-card h2 {
    margin: 0 0 20px;
    color: #000;
    font-size: 35px;
    font-style: normal;
    font-weight: 600;
    line-height: 47px;
}
.quality-card h2 span {
    /* add your highlight styling here if required */
}
.quality-card p {
    margin: 0;
    color: #000;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}
/* =========================
   NAVIGATION
========================= */
.quality-nav {
    display: flex;
    gap: 10px;
    margin: 0;
    margin-top: 20px;
    position: relative;
    z-index: 10;
}
/* Example button design */
.round-arrow {
    position: relative;
    width: 45px;
    height: 45px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #000;
    background: #000;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        opacity 0.25s ease;
}
.round-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: url('../images/arrow-right.svg') no-repeat center;
    background-size: 100%;
    transition: all 0.25s ease;
    filter: invert(1);
}
/* Previous */
.round-arrow.prev::before {
    transform:
        translate(-40%, -50%) rotate(-180deg);
}
/* Next */
.round-arrow.next::before {
    transform:
        translate(-60%, -50%) rotate(0);
}
/* Hover */
.round-arrow:not(:disabled):hover {
    background: #000;
}
.round-arrow:not(:disabled):hover::before {
    border-color: #fff;
}
/* Disabled */
.round-arrow:disabled {
    cursor: not-allowed;
    background: #969696;
    border: 1px solid #969696;
}
/* =========================
   SLICK FIX
========================= */
.quality-content-slider .slick-list,
.quality-media .slick-list {
    overflow: hidden;
}
.quality-content-slider .slick-slide,
.quality-media .slick-slide {
    outline: none;
}
/* Prevent Slick adding unwanted spacing */
.quality-content-slider .slick-slide>div {
    width: 100%;
}


/*  */

/* ================= DEALER SPOTLIGHT ================= */
.projects-section {
    background: #000;
    overflow: hidden;
}
.projects-section h2 {
    color: #FFF;
}
.projects-section h2 span {
    color: #71D8F0;
}
.projects-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.projects-head h2 {
    max-width: 620px;
}
.projects-head .default-btn {
    flex: none;
    margin-top: 12px;
}
.projects-carousel {
    position: relative;
    margin-top: 42px;
}
.projects-carousel .container {
    position: relative;
}
.projects-track {
    display: flex;
    gap: 30px;
    transition: transform .5s cubic-bezier(.4, .1, .2, 1);
    will-change: transform;
}
.projects-track.no-anim,
.projects-track.no-anim .project-card {
    transition: none !important;
}
.project-card {
    position: relative;
    flex: 0 0 300px;
    height: 530px;
    overflow: hidden;
    text-decoration: none;
    transition: flex-basis .5s cubic-bezier(.4, .1, .2, 1);
    filter: grayscale(1);
}
.project-card.is-active {
    flex-basis: 639px;
    filter: grayscale(0);
}
.project-card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.project-card::after {
    content: '';
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(180deg, rgba(4, 6, 9, 0) 0%, rgba(4, 6, 9, .5) 55%, rgba(4, 6, 9, .8) 100%);
}
.project-card-body {
    position: absolute;
    inset: auto 10px 20px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(17px);
    padding: 10px 30px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.project-state {
    color: #71D8F0;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.project-card h3 {
    color: #FFF;
    font-family: "Test Tiempos Fine", sans-serif;
    font-size: 35px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin-top: 5px;
}
.project-note {
    color: #FFF;
    font-size: 19px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: 10px;
}
.project-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #71D8F0;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: 8px;
    text-decoration: none;
    padding-right: 10px;
}
.project-link::after {
    content: '';
    width: 14px;
    height: 15px;
    background: url('../images/arrow-right-blue.svg') no-repeat center / 100%;
}
.project-card.is-active .project-card-body {
    display: grid;
    grid-template-columns: 1fr auto;
}
.project-card.is-active .project-state,
.project-card.is-active h3,
.project-card.is-active .project-note {
    grid-column: 1;
}
/* ================= SHARED: round carousel arrows ================= */
.carousel-arrow {
    border: 0;
    cursor: pointer;
    border-radius: 50%;
    background: #FFF no-repeat center;
    background-size: 14px 15px;
    transition: opacity .2s ease, background-color .2s ease;
}
.carousel-arrow {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    z-index: 3;
    transform: translateY(-50%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.carousel-arrow:disabled {
    opacity: .45;
    cursor: default;
}
.carousel-arrow[class*='-prev'] {
    background-image: url('../images/arrow-right.svg');
    left: calc((100vw - 1320px) / 2 + 30px);
    transform: translateY(-50%) rotate(180deg);
}
.carousel-arrow[class*='-next'] {
    background-image: url('../images/arrow-right.svg');
    right: max(30px, calc((100vw - 1320px) / 2 + 20px));
}



/* ================= CRAFTING EXCEPTIONAL POOLS ================= */
.about-section {
    background: url('../images/about-pool.jpg') 0 0 / cover no-repeat;
}
.pannel-wrap {
    display: flex;
    justify-content: flex-end;
}
.about-panel {
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(47px);
    padding: 70px 60px;
    max-width: 650px;
}
.about-panel-inner {
    max-width: 562px;
}
.about-panel p {
    color: #2F2E38;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    margin-top: 30px;
}
.about-panel p + p {
    margin-top: 20px;
}
.about-panel strong {
    font-weight: 600;
}
.about-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 36px;
}
.about-stats li {
    position: relative;
    text-align: center;
    color: #070A0A;
    font-style: normal;
    line-height: normal;
}
.about-stats li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: calc(100% + 30px);
    width: 1px;
    background: #E7E2D9;
}
.about-stats strong {
    display: block;
    color: #070A0A;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.about-stats span {
    display: block;
    color: #30313A;
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 173.333% */
}
.about-panel .text-link {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #EF6D2C;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    position: relative;
}
.about-panel .text-link::after {
    content: '';
    width: 12px;
    height: 12px;
    background: url(../images/arrow-right-orange.svg) no-repeat center / 100%;
}

/* ================= NEWS & INSIGHTS ================= */
.news-section {
    background: #FFF;
}
.news-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}
.news-head .default-btn {
    flex: none;
    margin-top: 8px;
}
.news-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr;
    gap: 12px;
}
.news-card {
    position: relative;
    display: block;
    height: 430px;
    overflow: hidden;
    text-decoration: none;
}
.news-card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .5s var(--ease);
}
.news-card:hover > img {
    transform: scale(1.06);
}
.news-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(20deg, rgba(0, 0, 0, 0.50) 27.71%, rgba(0, 0, 0, 0.10) 91.43%);
    z-index: 1;
}
.news-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 46.12%, #000 87.35%);
    width: 100%;
    height: 100%;
}

/* .news-card::after {
    content: '';
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(180deg, rgba(4, 6, 9, 0) 0%, rgba(4, 6, 9, .55) 55%, rgba(4, 6, 9, .85) 100%);
} */
.news-card-body {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: 20px 20px 26px;
}
.news-date {
    color: #B8B8B8;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 8px;
}
.news-card h3 {
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    line-height: 27px;
}
.news-card-large h3 {
    font-size: 26px;
    line-height: 33px;
    max-width: 480px;
}
.news-excerpt {
    color: #B8B8B8;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    margin: 0;
    max-width: 460px;
}
@media (max-width: 991px) {
    .news-head {
        flex-direction: column;
        gap: 20px;
    }
    .news-grid {
        grid-template-columns: 1fr;
    }
    .news-card,
    .news-card-large {
        height: 380px;
    }
}
@media (max-width: 767px) {
    .news-card-large h3 {
        font-size: 22px;
        line-height: 29px;
    }
}

/* ================= CTA ================= */
.cta-section {
    background: #FFF;
    padding: 40px 0;
}
.cta-section h2 {
    max-width: 440px;
}
.cta-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}
.cta-buttons {
    flex: none;
    display: flex;
    gap: 10px;
    margin-top: 52px;
}

/* ================= FOOTER ================= */
.site-footer {
    background: #000;
    padding-top: 50px;
}
.footer-cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.footer-col h4 {
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 20px;
}
.footer-toggle {
    display: none;
}
.footer-col li + li {
    margin-top: 5px;
}
.footer-col a,
.footer-contact p {
    color: #A9A9BA;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 242.857% */
    text-decoration: none;
}
.footer-col a:hover {
    color: #FFF;
}
.footer-contact p {
    max-width: 255px;
}
.footer-contact p + p {
    margin-top: 13px;
}
.footer-bar {
    background: #101012;
    padding: 15px 0;
    margin-top: 40px;
}
.footer-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.footer-social {
    display: flex;
    gap: 30px;
}
.footer-social a {
    color: rgba(255, 255, 255, .6);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
}
.footer-social a:hover {
    color: #FFF;
}
.footer-copy {
    color: #9E9E9E;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 169.231% */
}
/* =========================
   RESPONSIVE
========================= */
@media (min-width: 1200px) {
    .pool-slider .slick-list {
        overflow: visible;
    }
    .pool-slider .slick-slide {
        width: 720px;
    }
}
@media (max-width: 1440px) {
    h2 {
        font-size: 42px;
    }
    .ek-header {
        padding: 16px 0;
    }
    .ek-header .logo img {
        max-width: 60px;
    }
    .ek-header .icon-box {
        width: 35px;
        height: 35px;
    }
    .ek-header .nav-right .contact-us {
        padding: 12px 30px;
    }
    .ek-header .icon-box img {
        max-width: 18px;
    }
    .ek-header .search-box.icon-box img {
        max-width: 12px;
    }
    h1 {
        font-size: 52px;
        line-height: 1.3;
    }
    .hero-section p {
        font-size: 18px;
    }
    .hero-buttons {
        margin-top: 30px;
    }
    .default-btn {
        padding: 14px 26px;
    }
    .scroll-cue {
        font-size: 10px;
    }
    .bottom-search {
        bottom: 20px;
    }
    .scroll-pill {
        width: 20px;
        height: 32px;
    }
    .pool-search-component h3 {
        font-size: 16px;
    }
    .pool-search-inner {
        padding: 10px 20px;
    }
    .model-card {
        padding: 0 20px;
    }
    .model-info h3 {
        font-size: 28px;
        margin-bottom: 10px;
    }
    .model-info p {
        font-size: 14px;
        line-height: 1.3;
    }
    .model-stats {
        gap: 20px;
        padding: 16px;
    }
    .model-info {
        max-width: 280px;
    }
    .model-stats .stat-icon {
        margin-bottom: 8px;
    }
    .model-stats .stat-label {
        font-size: 12px;
    }
    .model-stats .stat-item:not(:last-child) {
        padding-right: 30px;
    }
    .model-stats .stat-num {
        font-size: 14px;
    }
    .model-stats .stat-icon img {
        width: 25px;
        height: 25px;
    }
    .project-card h3 {
        font-size: 28px;
    }
    .project-note {
        font-size: 17px;
    }
    .about-panel p {
        margin-top: 20px;
    }
    .help-card .text-overlay {
        padding: 40px;
    }

}
/* Tablet */
@media (max-width: 1200px) {
    h2 {
        font-size: 32px;
    }
    h3 {
        font-size: 20px;
        line-height: 1.2;
    }
    .sec-head p {
        font-size: 16px;
    }
    .pool-slide {
        height: 450px;
    }
    .pool-slider .slick-prev {
        left: 15%;
    }
    .pool-slider .slick-next {
        right: 15%;
    }
    select.search-dropdown {
        font-size: 13px;
    }
    .help-card .text-overlay {
        padding: 20px;
    }
    button.view-results-btn {
        padding: 15px 10px;
    }
}
@media (max-width: 991px) {
    h1 {
        font-size: 42px;
    }
    .padding-b-80 {
        padding-bottom: 40px;
    }
    .padding-t-80 {
        padding-top: 40px;
    }
    .padding-t-90 {
        padding-top: 40px;
    }
    .padding-b-90 {
        padding-bottom: 40px;
    }
    .ek-header .nav-wrap {
        position: relative;
    }
    /* Center logo */

    .ek-header .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
    }
    /* Hamburger */

    .menu-toggle {
        display: flex;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        cursor: pointer;
    }
    .menu-toggle span {
        width: 19px;
        height: 2px;
        background: #fff;
        transition: .3s ease;
    }
    /* Keep icons on right */

    .ek-header .nav-right {
        margin-left: auto;
        gap: 10px;
    }
    .ek-header .nav-right .contact-us,
    .ek-header .nav-right .search-box,
    .ek-header .user-box {
        display: none;
    }
    .ek-header .icon-box {
        width: 35px;
        height: 35px;
        background: #2B2B2F;
        border: 1px solid rgba(255, 255, 255, 0.30);
    }
    /* Full-height drawer */

    .ek-header .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100dvh;
        background: #0d333e;
        z-index: 1001;
        display: flex;
        flex-direction: column;
        transform: translateX(-100%);
        visibility: hidden;
        transition:
            transform .4s cubic-bezier(.76, 0, .24, 1),
            visibility .4s;
    }
    body.menu-open .ek-header .main-nav {
        transform: translateX(0);
        visibility: visible;
    }
    /* Drawer head */

    .mobile-nav-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 86px;
        padding: 18px 24px;
        border-bottom: 1px solid rgba(255,255,255,.12);
        flex-shrink: 0;
    }
    .menu-close {
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid rgba(255,255,255,.2);
        border-radius: 50%;
        background: transparent;
        color: #fff;
        font-size: 19px;
        cursor: pointer;
    }
    /* Menu */

    .ek-header .main-nav > ul {
        display: block;
        flex: 1;
        overflow-y: auto;
        padding: 18px 24px 30px;
        margin: 0;
    }
    .ek-header .main-nav > ul > li {
        border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .ek-header .main-nav > ul > li > a {
        width: 100%;
        justify-content: space-between;
        padding: 19px 0;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
    }
    .ek-header .main-nav > ul > li > a i {
        font-size: 12px;
        transition: transform .3s ease;
    }
    /* Remove desktop dropdown behaviour */

    .ek-header .sub-menu {
        position: static;
        min-width: 0;
        background: transparent;
        padding: 0;
        margin: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height .4s ease;
    }
    .ek-header .has-submenu:hover > .sub-menu {
        transform: none;
    }
    .ek-header .sub-menu li a {
        position: relative;
        padding: 10px 0 10px 18px;
        color: rgba(255,255,255,.7);
        font-size: 15px;
        background: transparent;
    }
    .ek-header .sub-menu li:last-child a {
        padding-bottom: 19px;
    }
    .ek-header .sub-menu li a::before {
        content: "";
        position: absolute;
        left: 0;
        top: 19px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #42c4db;
    }
    .ek-header .sub-menu li a:hover {
        background: transparent;
        color: #fff;
    }
    /* Open submenu */

    .ek-header .has-submenu.submenu-open > .sub-menu {
        max-height: 300px;
    }
    .ek-header .has-submenu.submenu-open > a i {
        transform: rotate(180deg);
    }
    /* Bottom button */

    .mobile-nav-bottom {
        display: block;
        padding: 20px 24px;
        border-top: 1px solid rgba(255,255,255,.12);
        flex-shrink: 0;
    }
    .mobile-contact {
        display: flex;
        width: 100%;
        min-height: 52px;
        align-items: center;
        justify-content: center;
        background: #0078D6;
        color: #fff !important;
        font-size: 15px !important;
        font-weight: 500 !important;
    }
    /* Overlay */

    .menu-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(0, 20, 30, .65);
        opacity: 0;
        visibility: hidden;
        transition:
            opacity .35s ease,
            visibility .35s ease;
    }
    body.menu-open .menu-overlay {
        opacity: 1;
        visibility: visible;
    }
    body.menu-open {
        overflow: hidden;
    }
    .menu-link-row {
        display: flex;
        align-items: center;
        width: 100%;
    }
    /* Qualified with the same ancestry as the plain items' rule.
       `.menu-link-row > a` alone is (0,1,1), which loses to the desktop
       `.ek-header nav a` at (0,1,2) no matter that it comes later — so a
       submenu parent kept the dark header's near-white colour and sat
       invisible on the drawer. */
    .ek-header .main-nav > ul > li > .menu-link-row > a {
        flex: 1;
        display: block;
        padding: 19px 0;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        text-decoration: none;
    }
    .submenu-toggle {
        width: 50px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: #fff;
        cursor: pointer;
    }
    .submenu-toggle i {
        font-size: 13px;
        transition: transform .3s ease;
    }
    /* Hide submenu */
    .ek-header .sub-menu {
        position: static;
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        list-style: none;
        background: transparent;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height .4s ease;
    }
    /* Show submenu */
    .ek-header .has-submenu.submenu-open > .sub-menu {
        max-height: 500px;
    }
    /* Rotate arrow */
    .ek-header .has-submenu.submenu-open
    > .menu-link-row
    > .submenu-toggle
    > i {
        transform: rotate(180deg);
    }
    /* Child links */
    .ek-header .sub-menu li {
        border: 0;
    }
    .ek-header .sub-menu li a {
        display: block;
        position: relative;
        padding: 10px 0 10px 20px;
        color: rgba(255, 255, 255, .72);
        font-size: 15px;
        text-decoration: none;
    }
    .ek-header .sub-menu li:last-child a {
        padding-bottom: 20px;
    }
    .ek-header .sub-menu li a::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 17px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #42c4db;
    }
/*  */
    .quality-section {
        padding: 60px 0;
    }
    .quality-media {
        margin-left: 20%;
    }
    .quality-card {
        max-width: 400px;
        padding: 32px;
    }
    .quality-card h2 {
        font-size: 24px;
        line-height: 1.3;
    }
    .quality-card p {
        font-size: 14px;
        line-height: 22px;
    }
    .dropdown-list img {
        display: none;
    }
    .pool-search-inner {
        padding: 10px 15px;
        flex-direction: column;
        gap: 5px;
    }
    .help-grid {
        margin-top: 20px;
    }
    .carousel-arrow[class*='-prev'] {
        left: 20px;
    }
    .carousel-arrow[class*='-next'] {
        right: 20px;
    }
    .about-panel {
        padding: 40px 30px;
    }
    .about-panel p + p {
        margin-top: 10px;
    }
    .container {
        padding: 0 20px;
    }
    .bottom-search {
        padding: 0 20px;
    }

/* Mobile nav drawer (light theme) */

    .ek-header .main-nav {
        background: #fff;
        box-shadow: 4px 0 30px rgba(0, 0, 0, .12);
    }
    .mobile-nav-head {
        min-height: 64px;
        padding: 16px 24px;
        border-bottom: 1px solid rgba(0, 0, 0, .08);
    }
    .mobile-nav-title {
        color: #101012;
        font-size: 20px;
        font-weight: 600;
    }
    .menu-close {
        width: auto;
        height: auto;
        border: 0;
        background: transparent;
        color: #101012;
        font-size: 20px;
    }
    .mobile-nav-search {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 16px 24px 6px;
        padding: 12px 16px;
        border: 1px solid #e3e5e8;
        border-radius: 6px;
        background: #f6f7f8;
        flex-shrink: 0;
    }
    .mobile-nav-search-input {
        flex: 1;
        width: 100%;
        border: 0;
        background: transparent;
        color: #101012;
        font-size: 15px;
    }
    .mobile-nav-search-input::placeholder {
        color: #8b9096;
    }
    .mobile-nav-search-input:focus {
        outline: none;
    }
    .mobile-nav-search-input::-webkit-search-cancel-button {
        display: none;
    }
    .mobile-nav-search-btn {
        border: 0;
        background: transparent;
        color: #6b7075;
        font-size: 16px;
        padding: 0;
        cursor: pointer;
        flex-shrink: 0;
    }
    .ek-header .main-nav > ul > li {
        border-bottom: 0;
    }
    .ek-header .main-nav > ul > li > a,
    .ek-header .main-nav > ul > li > .menu-link-row > a {
        color: #101012;
        font-size: 16px;
        font-weight: 500;
        padding: 14px 0;
    }
    .submenu-toggle {
        color: #101012;
    }
    .submenu-toggle img {
        filter: brightness(0) opacity(.45);
        transition: transform .3s ease;
    }
    .ek-header .has-submenu.submenu-open > .menu-link-row > .submenu-toggle > img {
        transform: rotate(180deg);
    }
    .ek-header .sub-menu li a {
        color: rgba(0, 0, 0, .6);
    }
    .ek-header .sub-menu li a:hover {
        color: #101012;
    }
    .mobile-nav-bottom {
        border-top: 1px solid rgba(0, 0, 0, .08);
    }

}

/* Mobile */
@media (max-width: 767px) {
    h1 {
        font-size: 34px;
    }
    .hero-buttons {
        justify-content: center;
    }
    .default-btn {
        width: 80%;
        margin: auto;
        justify-content: center;
    }
   .hero-section h1 .italic {
        display: block;
    }
    .pool-slider-wrap {
        padding: 0 15px;
    }
    .pool-slide {
        height: 350px;
        padding: 0 5px;
    }
    .pool-slider .slick-list {
        overflow: hidden;
    }
    .pool-slider .slick-prev {
        left: 10px;
    }
    .pool-slider .slick-next {
        right: 10px;
    }
    .pool-slider .slick-arrow {
        width: 35px;
        height: 35px;
    }
/*  */

    .quality-section {
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    .quality-media {
        margin-left: 0;
        width: 100%;
    }
    .quality-media img {
        height: 220px;
    }
    .quality-section .container {
        position: relative;
        inset: auto;
        left: auto;
        transform: none;
        display: block;
        padding: 0;
    }
    .quality-card {
        max-width: 100%;
        min-height: auto;
        margin: 0;
        padding: 35px 24px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #fff;
    }
    .quality-card h2 {
        font-size: 28px;
    }
    .hero-buttons {
        margin-top: 20px;
        flex-direction: column;
    }
    .hero-section p {
        font-size: 16px;
        line-height: 1.3;
        display: none;
    }
    .clear-filter-btn {
        border: 0;
        padding-left: 0;
    }
    select.search-dropdown {
        width: 100%;
        padding: 10px;
        background: #f3f9ff;
    }
    .hero-inner {
        margin-top: 90px;
        text-align: center;
    }
    .bottom-search {
        position: relative;
        padding: 0;
        margin-top: 50px;
        bottom: 0;
    }
    .hero-section {
        padding-bottom: 0;
    }
    .explore-pools h2 span {
        display: block;
    }
    .pool-search-component {
        display: none;
    }
    .pool-search-component.is-open {
        display: block;
    }
    .filter-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 20px;
        bottom: 20px;
        width: 48px;
        height: 48px;
        border: 0;
        border-radius: 50%;
        background: #0078D6;
        color: #fff;
        font-size: 18px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
        cursor: pointer;
        z-index: 5;
    }
    h2 {
        font-size: 28px;
        margin-bottom: 10px;
    }
    h3 {
        font-size: 18px;
    }

/* mobile only start*/

    .help-stack.for-mobile-card {
        display: flex;
    }
    .help-card.hide-mobile-card {
        display: none;
    }
    .help-card p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .help-grid {
        display: block;
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .help-grid .slick-list {
        overflow: hidden;
        /* right-hand padding is the peek of the next card; slick measures the
           content box, so it stays out of the slide-width maths */
        margin: 0 -5px;
        padding: 0 45px 0 0;
    }

    .help-grid .slick-track {
        display: flex;
        /* align-items: stretch; */
    }

    .help-grid .slick-slide {
        height: auto;
        margin: 0;
        padding: 0 5px;
        box-sizing: border-box;
        /* opacity: 0.45; */
        /* transform: scale(0.94); */
        transition:
            opacity 0.4s ease,
            transform 0.4s ease;
    }

    .help-grid .slick-slide.slick-center {
        opacity: 1;
    }

    .help-grid .slick-slide > div {
        height: 100%;
    }

    .help-card,
    .help-card:first-child {
        width: 100%;
        min-height: 400px;
        /* grid-row: auto; */
        box-sizing: border-box;
    }

    .help-card .text-overlay {
        left: 0;
        right: 0;
        box-sizing: border-box;
        bottom: 0;
        padding: 14px 15px;
        transform: none;
    }

    .help-card .project-link {
        opacity: 1;
        max-height: none;
        overflow: visible;
        margin-top: 10px;
        transform: none;
        pointer-events: auto;
    }

    .help-card:hover img {
        transform: none;
    }

    /* arrows */
    .help-arrow {
        position: absolute;
        top: 40%;
        transform: translateY(-50%);
        transition: all 0.3s ease;
        z-index: 10;
        width: 35px;
        height: 35px;
        border: 0;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
        font-size: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .help-arrow::before {
        content: "";
        width: 11px;
        height: 11px;
        display: inline-block;
    }
    .help-arrow.help-next::before {
        background: url(../images/arrow-right.svg) no-repeat center;
        background-size: 100%;
    }
    .help-arrow.help-prev::before {
        background: url(../images/arrow-right.svg) no-repeat center;
        background-size: 100%;
        transform: rotate(180deg);
    }

    /* 45px of the grid's right edge is the next card's peek, so the next
       arrow needs that much extra inset to sit on the active card like the
       prev arrow does. */
    .help-prev {
        left: 10px;
    }
    .help-next {
        right: 55px;
    }

    /* mobile only end*/

    .model-card {
        position: relative;
        bottom: 0;
        padding: 20px 0 0;
        flex-direction: column;
    }
    .pool-slide.slick-center .model-card {
        position: relative;
        bottom: 0;
    }
    .pool-slide.slick-center .model-card {
        transform: translateY(0);
    }
    .pool-slide {
        margin: 0;
    }
    .model-info h3 {
        margin-bottom: 8px;
    }
    .model-stats {
        flex: 1;
        justify-content: center;
        padding: 12px;
    }
    .model-stats .stat-icon {
        margin-bottom: 4px;
    }
    .model-stats .stat-item:not(:last-child) {
        padding-right: 20px;
    }
    .model-stats .stat-label {
        font-size: 11px;
    }
    .pool-slider .slick-arrow {
        top: 30%;
    }
    .projects-head {
        flex-direction: column;
        gap: 0;
    }
    .projects-head h2 {
        margin-top: 5px;
    }
    .eyebrow {
        font-size: 14px !important;
    }
    .projects-section .eyebrow {
        display: none;
    }
    .projects-section h2 span {
        display: block;
    }
/* Dealer spotlight carousel (mobile only) */
    .projects-carousel {
        margin-top: 24px;
        overflow: hidden;
    }
    .projects-track {
        gap: 12px;
    }
    .project-card {
        flex: 0 0 46px;
        height: 480px;
    }
    .project-card.is-active {
        flex-basis: calc(100vw - 40px);
    }
    .project-card-body {
        inset: auto 0 14px;
        padding: 12px 16px 14px;
        gap: 6px;
    }
    .project-state {
        font-size: 13px;
    }
    .project-card h3 {
        font-size: 22px;
    }
    .project-note {
        font-size: 14px;
        margin-top: 4px;
    }
    .project-link {
        font-size: 13px;
        margin-top: 0;
    }
    .projects-carousel .carousel-arrow {
        width: 36px;
        height: 36px;
        background-size: 12px 13px;
    }
    .projects-carousel .carousel-arrow[class*='-prev'] {
        left: 14px;
    }
    .projects-carousel .carousel-arrow[class*='-next'] {
        right: 14px;
    }

/* Footer accordion (mobile only) */

    .site-footer {
        padding-top: 10px;
    }
    .footer-cols {
        display: block;
    }
    .footer-acc {
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }
    .footer-acc .footer-col-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 18px 0;
        cursor: pointer;
    }
    .footer-acc h4 {
        font-size: 16px;
        margin-bottom: 0;
    }
    .footer-toggle {
        position: relative;
        display: block;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
    }
    .footer-toggle::before,
    .footer-toggle::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: #fff;
        transition:
            opacity .3s ease,
            transform .3s ease;
    }
    .footer-toggle::before {
        width: 13px;
        height: 1.5px;
        transform: translate(-50%, -50%);
    }
    .footer-toggle::after {
        width: 1.5px;
        height: 13px;
        transform: translate(-50%, -50%);
    }
    /* Open panel */

    .footer-acc.footer-open > .footer-col-head .footer-toggle::after {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(90deg);
    }
    .footer-acc > ul {
        max-height: 0;
        overflow: hidden;
        transition: max-height .4s ease;
    }
    .footer-acc.footer-open > ul {
        max-height: 350px;
    }
    .footer-acc > ul li:last-child {
        padding-bottom: 18px;
    }
    /* Contact block sits open below the accordion */

    .footer-contact {
        padding: 22px 0 5px;
    }
    .footer-contact h4 {
        display: none;
    }
    .footer-contact p {
        max-width: 100%;
    }
    .footer-bar {
        margin-top: 20px;
    }
    .footer-bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .footer-social {
        gap: 20px;
    }
    .footer-copy {
        width: 100%;
        text-align: center;
    }
    .cta-section {
        text-align: center;
    }
    .cta-inner,
    .cta-buttons {
        flex-direction: column;
        width: 100%;
        margin-top: 0;
    }
    .cta-inner {
        gap: 20px;
    }
    .about-section h2 span {
        display: block;
    }
    .about-section .container {
        padding: 0;
    }
    .about-panel {
        padding: 30px 20px;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(47px);
    }
    .about-panel p {
        font-size: 14px;
        margin-top: 10px;
    }
    .about-stats strong {
        font-size: 26px;
        margin-bottom: 4px;
    }
    .about-stats span {
        font-size: 14px;
        line-height: 1.2;
    }
    .about-stats li:not(:last-child)::after {
        left: calc(100% + 4px);
    }
    .projects-head .default-btn {
        width: 70%;
    }
    .round-arrow {
        border-radius: 0;
    }
    .features-section .feature-icon img {
        max-width: 50px;
    }
    .sec-head p:not(.eyebrow) {
        font-size: 15px;
        line-height: 1.4;
    }
    .carousel-arrow {
        width: 30px;
        height: 30px;
        background-size: 10px;
    }
    
}






/* =================================================================
   INTERACTION & MOTION
   Hover / press / focus states, scroll reveal and the scroll-aware
   header. Reveal is opt-in from script.js (it adds .js-anim to <html>),
   so if the script fails the page still renders fully visible.
   ================================================================= */
:root {
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, .84, .44, 1);
    --dur-fast: .18s;
    --dur: .3s;
    --dur-slow: .6s;
    --reveal-dur: .7s;
    /* matches the Slick `speed` for .pool-slider */
    --slide-dur: .65s;
}

/* Anchor targets clear the sticky header. */
[id] {
    scroll-margin-top: 104px;
}

/* ---------- keyboard focus ---------- */
:where(a, button, select, [tabindex]):focus-visible {
    outline: 2px solid #52C8EF;
    outline-offset: 3px;
}
.help-card:focus-within .project-link {
    opacity: 1;
    max-height: 40px;
    margin-top: 15px;
    pointer-events: auto;
}

/* ---------- buttons: press feedback + arrow nudge ---------- */
.default-btn,
.ek-header .nav-right .contact-us,
button.view-results-btn {
    transition:
        color .4s ease,
        transform var(--dur-fast) var(--ease),
        box-shadow var(--dur) var(--ease);
}
.default-btn .btn-center::after {
    transition: transform var(--dur) var(--ease);
}
.default-btn:hover .btn-center::after {
    transform: translateX(5px);
}
.default-btn:active,
.ek-header .nav-right .contact-us:active,
button.view-results-btn:active {
    transform: translateY(1px) scale(.99);
}

/* ---------- hero search ---------- */
.dropdown-list {
    transition: background-color var(--dur) var(--ease);
    padding: 5px 12px;
}
.dropdown-list:hover {
    background: rgba(11, 17, 23, .04);
}
select.search-dropdown {
    cursor: pointer;
}
.clear-filter-btn {
    cursor: pointer;
    transition: color var(--dur) var(--ease);
}
.clear-filter-btn i {
    transition: transform var(--dur) var(--ease);
}
.clear-filter-btn:hover {
    color: #2F2E38;
}
.clear-filter-btn:hover i {
    /* transform: rotate(-14deg); */
}
.clear-filter-btn:active i {
    transform: rotate(-14deg) scale(.92);
}
.scroll-pill {
    transition: transform var(--dur) var(--ease);
}
.scroll-pill:hover {
    transform: translateY(4px);
}

/* ---------- explore tabs ---------- */
.explore-tab {
    transition:
        background-color var(--dur) var(--ease),
        color var(--dur) var(--ease);
}
.explore-tab img {
    transition: transform var(--dur) var(--ease);
}
.explore-tab:not(.is-active):hover {
    background: rgba(255, 255, 255, .07);
}
.explore-tab:hover img {
    transform: scale(1.09);
}

/* ---------- carousel arrows ---------- */
.carousel-arrow {
    transition:
        opacity .2s ease,
        background-color .2s ease,
        transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}
/* The prev arrow carries a rotate, so each hover state has to restate it. */
.carousel-arrow[class*='-next']:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.09);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .42);
}
.carousel-arrow[class*='-prev']:hover:not(:disabled) {
    transform: translateY(-50%) rotate(180deg) scale(1.09);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .42);
}
.carousel-arrow:active:not(:disabled) {
    filter: brightness(.9);
}

/* ---------- project cards ---------- */
.project-card {
    cursor: pointer;
    transition:
        flex-basis .5s cubic-bezier(.4, .1, .2, 1),
        filter var(--dur-slow) var(--ease);
}
.project-card.is-active {
    cursor: default;
}
.project-card > img {
    transition: transform .9s var(--ease);
}
.project-card:not(.is-active):hover > img {
    transform: scale(1.06);
}
.project-link {
    transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.project-link::after {
    transition: transform var(--dur) var(--ease);
}
.project-link:hover::after {
    transform: translateX(5px);
}

/* ---------- inline text link ---------- */
.about-panel .text-link {
    transition: opacity var(--dur) var(--ease);
}
.about-panel .text-link::after {
    transition: transform var(--dur) var(--ease);
}
.about-panel .text-link:hover {
    opacity: .75;
}
.about-panel .text-link:hover::after {
    transform: translateX(5px);
}

/* ---------- footer ---------- */
.footer-col a {
    display: inline-block;
    transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer-col a:hover {
    transform: translateX(3px);
}
.footer-social a {
    display: inline-block;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.footer-social a:hover {
    transform: translateY(-3px);
}

/* ---------- desktop nav ---------- */
@media (min-width: 992px) {
    .ek-header nav > ul > li > a,
    .ek-header .menu-link-row > a {
        position: relative;
        transition: color var(--dur) var(--ease);
    }
    .ek-header nav > ul > li > a::after {
        content: '';
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 3px;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--dur) var(--ease);
    }
    .ek-header nav > ul > li > a:hover,
    .ek-header .has-submenu:hover .menu-link-row > a {
        color: #FFF;
    }
    .ek-header nav > ul > li > a:hover::after {
        transform: scaleX(1);
    }
    .submenu-toggle img {
        transition: transform var(--dur) var(--ease);
    }
    .ek-header .has-submenu:hover .submenu-toggle img {
        transform: rotate(180deg);
    }
    .ek-header .icon-box {
        cursor: pointer;
        transition:
            background-color var(--dur) var(--ease),
            transform var(--dur) var(--ease);
    }
    .ek-header .icon-box:hover {
        background: rgba(255, 255, 255, .45);
        transform: translateY(-2px);
    }
}

/* ---------- scroll reveal ---------- */
.js-anim [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity var(--reveal-dur) var(--ease-out),
        transform var(--reveal-dur) var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
}
.js-anim [data-reveal='fade'] {
    transform: none;
}
.js-anim [data-reveal='left'] {
    transform: translateX(-34px);
}
.js-anim [data-reveal='right'] {
    transform: translateX(34px);
}
.js-anim [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .js-anim [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* =================================================================
   EXPLORE CAROUSEL MOTION
   The dim on off-centre slides had nothing to transition against, so it
   snapped while the track glided. These give the slide state the same
   duration as Slick's `speed`, pull the centre slide forward, and stage
   the caption so it lands after the travel rather than during it.
   ================================================================= */
.pool-slide {
    transition:
        transform var(--slide-dur) var(--ease),
        opacity var(--slide-dur) var(--ease),
        filter var(--slide-dur) var(--ease);
    will-change: transform, opacity;
}
.pool-slide:not(.slick-center) {
    opacity: .62;
    filter: brightness(.74);
}
.pool-slide.slick-center {
    opacity: 1;
    filter: none;
}
/* Depth scale only where the caption is overlaid on the image. Below 768 the
   caption sits below it in normal flow, so scaling the slide would resize the
   caption text alongside its neighbours. */
@media (min-width: 768px) {
    .pool-slide:not(.slick-center) {
        /* 0.84 is the centre-to-side ratio in the comp (510px vs 426px). */
        transform: scale(.84);
    }
    .pool-slide.slick-center {
        transform: scale(1);
    }
}

/* Caption leaves immediately, arrives once the slide has travelled. */
.model-card {
    transition-delay: 0s;
}
.pool-slide.slick-center .model-card {
    transition-delay: .26s;
}

/* …then the name and the three stats land in sequence behind it. */
.pool-slide .model-info h3,
.pool-slide .model-stats .stat-item {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity .45s var(--ease-out),
        transform .45s var(--ease-out);
}
.pool-slide.slick-center .model-info h3,
.pool-slide.slick-center .model-stats .stat-item {
    opacity: 1;
    transform: none;
}
.pool-slide.slick-center .model-info h3 {
    transition-delay: .34s;
}
.pool-slide.slick-center .model-stats .stat-item:nth-child(1) {
    transition-delay: .44s;
}
.pool-slide.slick-center .model-stats .stat-item:nth-child(2) {
    transition-delay: .52s;
}
.pool-slide.slick-center .model-stats .stat-item:nth-child(3) {
    transition-delay: .60s;
}

/* Slider arrows */
.pool-slider .slick-arrow:hover,
.pool-slider .slick-arrow:focus-visible {
    transform: translateY(-50%) scale(1.1);
}
.pool-slider .slick-arrow:active {
    transform: translateY(-50%) scale(.96);
}

/* Fail-safe: without Slick there is no .slick-center, so show the captions
   rather than leaving them stranded at opacity 0. */
.pool-slider:not(.slick-initialized) .model-card,
.pool-slider:not(.slick-initialized) .model-info h3,
.pool-slider:not(.slick-initialized) .model-stats .stat-item {
    opacity: 1;
    transform: none;
}
.pool-slider:not(.slick-initialized) .pool-slide {
    opacity: 1;
    transform: none;
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .pool-slide,
    .pool-slide:not(.slick-center) {
        transform: none;
        filter: none;
        opacity: 1;
    }
}




/* -----------------------------------------------------------------
   V2-only controls (no V1 equivalent): filter toggle, phone icon and
   the drawer's search button.
   ----------------------------------------------------------------- */
.filter-toggle {
    cursor: pointer;
    transition:
        background-color var(--dur) var(--ease),
        transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        opacity var(--dur) var(--ease),
        visibility var(--dur) var(--ease);
}
.filter-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}
.filter-toggle:active {
    transform: translateY(0) scale(.97);
}
.filter-toggle i {
    transition: transform var(--dur) var(--ease);
}
.filter-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.mobile-nav-search-btn {
    cursor: pointer;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mobile-nav-search-btn:hover {
    opacity: .7;
}
.mobile-nav-search-btn:active {
    transform: scale(.94);
}

@media (min-width: 992px) {
    .ek-header .phone-box {
        cursor: pointer;
        transition:
            background-color var(--dur) var(--ease),
            transform var(--dur) var(--ease);
        display: none;
    }
    .ek-header .phone-box:hover {
        background: rgba(255, 255, 255, .45);
        transform: translateY(-2px);
    }
}


/* -----------------------------------------------------------------
   MOBILE FILTER SHEET (<=991px)
   The hero's inline filter bar becomes a full-screen white sheet
   launched by the floating .filter-toggle. Rules live at the end of
   the file so they override the earlier mobile block cleanly.

   The sheet starts at 991px, not the design's 767px, so it changes
   over at the same width as the nav's hamburger — a tablet that gets
   the drawer menu gets the filter button too.
   ----------------------------------------------------------------- */

@media (max-width: 991px) {
    /* ---------- rows ---------- */
    .pool-search-inner {
        background: transparent;
        box-shadow: none;
    }
    .dropdown-list {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0;
        min-height: 68px;
        padding: 0 20px 0 15px;
        background: #F2F2F2;
        transition: background-color .25s var(--ease);
    }
    /* icons are hidden from 991px down in the inline layout — the sheet wants them back */
    .dropdown-list img {
        display: block;
        flex: 0 0 30px;
        width: 30px;
        max-width: 30px;
        max-height: 30px;
        margin: 0;
        transition: filter .25s var(--ease);
    }
    .dropdown-list select.search-dropdown {
        flex: 1 1 auto;
        width: 100%;
        appearance: none;
        -webkit-appearance: none;
        border: 0;
        outline: 0;
        background: transparent;
        margin: 0;
        padding: 22px 34px 22px 26px;
        font-size: 17px;
        font-weight: 500;
        line-height: 1.4;
        color: #000;
        cursor: pointer;
        transition: color .25s var(--ease);
    }
    /* the native picker draws options itself — keep them readable when the row is black */
    .dropdown-list select.search-dropdown option {
        color: #000;
        background: #fff;
    }
    .dropdown-list::after {
        content: '';
        position: absolute;
        right: 20px;
        top: 50%;
        width: 10px;
        height: 10px;
        margin-top: -5px;
        pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M1 1L8 8L15 1' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
        transition: filter .25s var(--ease);
    }

    /* active row: while the select is open/focused, or once it holds a value */
    .dropdown-list:focus-within,
    .dropdown-list.is-active {
        background: #000;
    }
    .dropdown-list:focus-within select.search-dropdown,
    .dropdown-list.is-active select.search-dropdown {
        color: #fff;
    }
    .dropdown-list:focus-within img,
    .dropdown-list.is-active img,
    .dropdown-list:focus-within::after,
    .dropdown-list.is-active::after {
        filter: invert(1);
    }

    /* ---------- clear all ---------- */
    .clear-filter-btn {
        order: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin: 30px auto 16px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #000;
        font-weight: 500;
        line-height: 1.2;
        font-size: 16px;
    }
    .clear-filter-btn i {
        font-size: 14px;
    }
    .listing-filter-bar .clear-filter-btn {
        color: #fff;
    }
    .dropdown-list {
        min-height: auto;
    }
    .dropdown-list select.search-dropdown {
        padding: 14px 34px 14px 26px;
    }
    /* mockup uses a reset arrow rather than the desktop filter-xmark glyph */
    .clear-filter-btn i::before {
        font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", inherit;
        content: "\f0e2";
    }
    .clear-filter-btn:active {
        opacity: .6;
    }
}

@media (max-width: 991px) {

    /* ---------- the sheet ---------- */
    /* Kept in the DOM (not display:none) so it can fade rather than snap;
       pointer-events guards it while closed. */
    .pool-search-component {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1200;
        background: #fff;
        padding: 90px 27px calc(50px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(0, 14px, 0);
        transition:
            opacity .3s var(--ease),
            transform .38s var(--ease),
            visibility .38s var(--ease);
    }
    .pool-search-component.is-open {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }
    body.filter-open {
        overflow: hidden;
    }

    /* ---------- close button ---------- */
    .filter-close {
        position: absolute;
        top: 30px;
        right: 27px;
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid #D9D9D9;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
        transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }
    .filter-close:active {
        background: #F2F2F2;
        border-color: #bfbfbf;
    }
    .filter-close-icon {
        width: 14px;
        height: 10px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='11' viewBox='0 0 18 11' fill='none'%3E%3Cpath d='M1 1L9 9L17 1' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    }

    /* ---------- heading ---------- */
    .pool-search-component h3 {
        color: #000;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.2;
        margin: 0 0 14px;
    }

    /* ---------- view results ---------- */
    button.view-results-btn {
        order: 2;
        width: 100%;
        padding: 15px;
        font-size: 17px;
        font-weight: 500;
    }

    /* ---------- the button ----------
       Restated from the shared <=767px block up the file: that block holds
       unrelated rules (heading sizes and the like), so it cannot be widened
       to 991px wholesale. Same declarations, so the two agree where they
       overlap. */
    .filter-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 20px;
        bottom: 20px;
        width: 48px;
        height: 48px;
        border: 0;
        border-radius: 50%;
        background: #0078D6;
        color: #fff;
        font-size: 18px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
        cursor: pointer;
        z-index: 5;
    }

    /* the FAB is the "open" affordance only — the sheet closes from its own chevron */
    .filter-toggle[aria-expanded="true"] {
        opacity: 0;
        visibility: hidden;
    }
    .filter-toggle i {
        transition: none;
    }
    .filter-toggle[aria-expanded="true"] i {
        transform: none;
    }
}


/* -----------------------------------------------------------------
   Explore Pools: hold slide 1's caption until the slider is on screen.

   Slick applies .slick-center at DOM-ready, so the centre slide's card,
   heading and stats ran their entrance immediately - behind a wrapper
   the reveal still has at opacity 0. By the time the section scrolled
   into view the animation was long spent, so the first slide appeared
   flat while every later slide animated on click.

   Pinning the "before" state until .pool-slider-wrap.is-in defers that
   entrance to the moment the section is actually visible. Scoped to
   .js-anim so it can't strand the caption if the reveal never runs
   (no IntersectionObserver, or prefers-reduced-motion).
   ----------------------------------------------------------------- */
.js-anim .pool-slider-wrap:not(.is-in) .pool-slide.slick-center .model-card {
    opacity: 0;
    transform: translateY(25px);
    transition: none;
}
.js-anim .pool-slider-wrap:not(.is-in) .pool-slide.slick-center .model-info h3,
.js-anim .pool-slider-wrap:not(.is-in) .pool-slide.slick-center .model-stats .stat-item {
    opacity: 0;
    transform: translateY(14px);
    transition: none;
}


/* =================================================================
   INNER PAGES — SHARED
   Secondary pages (pool model detail, etc.) reuse the homepage's
   tokens, buttons and container, but sit under an opaque light
   header instead of the transparent bar the video hero needs.
   ================================================================= */

/* ---------- light header ---------- */
.ek-header.header-light {
    position: sticky;
    background: #FFFFFF;
    box-shadow: 0 1px 0 rgba(16, 16, 18, .08);
}
.ek-header.header-light::before {
    content: none;
}
.ek-header.header-light.is-fixed {
    box-shadow: 0 8px 24px rgba(16, 16, 18, .10);
}
.ek-header.header-light .logo img {
    /* Brand mark ships white-on-transparent for the dark video header;
       silhouette it to black rather than adding a second logo asset. */
    /* filter: brightness(0) opacity(.85); */
}
.ek-header.header-light nav a {
    color: #101012;
}
.ek-header.header-light nav li i {
    color: #101012;
}
.ek-header.header-light .submenu-toggle {
    color: #101012;
}
.ek-header.header-light .submenu-toggle img,
.ek-header.header-light .icon-box img {
    filter: brightness(0) opacity(.65);
}
.ek-header.header-light .icon-box {
    background-color: transparent;
}
.ek-header.header-light .menu-toggle span {
    background: #101012;
}
.ek-header.header-light .nav-right .contact-us {
    background: #101012;
}
@media (min-width: 992px) {
    .ek-header.header-light nav > ul > li > a:hover,
    .ek-header.header-light .has-submenu:hover .menu-link-row > a {
        color: #0078D6;
    }
    .ek-header.header-light .icon-box:hover {
        background: #E7EAEC;
    }
}
@media (max-width: 1200px) {
    .ek-header nav > ul {
        gap: 20px;
    }
    .ek-header .nav-right .contact-us {
        padding: 10px 20px;
    }
    .ek-header .nav-right {
        gap: 12px;
    }
}
@media (max-width: 991px) {
    .ek-header.header-light .icon-box {
        background: #F2F4F5;
        border-color: rgba(16, 16, 18, .12);
    }
}

/* Outline button with a leading icon (Find a Dealer) — distinct from
   .default-btn, which always carries a trailing arrow. */
.find-dealer-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border: 1px solid #101012;
    background: #FFF;
    color: #101012;
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.find-dealer-btn i {
    font-size: 14px;
}
.find-dealer-btn:hover {
    background: #101012;
    color: #FFF;
}
/* On dark hero cards the outline reads better as pure white-on-white */
.model-hero-buttons .default-btn.icon .btn-center::after {
    display: none;
}
@media (max-width: 1200px) {
    .find-dealer-btn {
        padding: 10px 20px;
    }
}

/* ================= MODEL HERO ================= */
.model-hero {
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.model-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
.model-hero .container {
    width: 100%;
    padding-bottom: 100px;
    padding-top: 100px;
}
.model-hero-card {
    max-width: 480px;
    background: rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(15px);
    padding: 40px;
    color: #FFF;
}
.model-hero-card h1 {
    color: #FFF;
    font-size: 65px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 8px;
}
.model-hero-tagline {
    color: #7DBBEC;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 16px;
}
.model-hero-desc {
    color: #FFF;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 152.941% */
    margin-bottom: 30px;
}
.model-hero-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 35px;
}
.model-hero-stats div:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.20);
    padding-right: 40px;
}
.model-hero-stats strong {
    display: block;
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
    margin-bottom: 4px;
}
.model-hero-stats span {
    display: block;
    color: rgba(255, 255, 255, 0.80);
    text-align: center;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 152.941% */
}
.model-hero-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
@media (max-width: 1440px) {
    .model-hero-card h1 {
        font-size: 50px;
    }
}
@media (max-width: 991px) {
    .model-hero {
        min-height: 580px;
    }
}
@media (max-width: 767px) {
    .model-hero {
        min-height: auto;
        align-items: flex-end;
    }
    .model-hero .container {
        padding-bottom: 40px;
    }
    .model-hero-card {
        max-width: 100%;
        padding: 26px;
    }
    .model-hero-card h1 {
        font-size: 32px;
    }
    .model-hero-stats {
        gap: 18px;
    }
    .model-hero-buttons {
        flex-direction: column;
    }
    .model-hero-buttons .default-btn,
    .model-hero-buttons .find-dealer-btn {
        width: 100%;
        justify-content: center;
    }
    .find-dealer-btn {
        padding: 6px 6px;
        font-size: 12px;
    }
    .find-dealer-btn i {
        display: none;
    }
    .ek-header.header-light .logo {
        left: 45%;
    }
}

/* ================= ABOUT HERO (about.html) ================= */
.about-hero {
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.about-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
.about-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0) 68%);
    z-index: -1;
}
.about-hero .container {
    width: 100%;
    padding: 160px 30px;
}
.about-hero-copy {
    max-width: 620px;
}
.about-hero-copy h1 {
    margin-bottom: 20px;
}
.about-hero-copy p {
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px; /* 170% */
}
@media (max-width: 991px) {
    .about-hero {
        min-height: 560px;
    }
}
@media (max-width: 767px) {
    .about-hero-copy p {
        font-size: 15px;
        line-height: 1.5;
    }
    .about-hero {
        min-height: auto;
    }
    .about-hero .container {
        padding: 60px 30px;
    }
    .about-hero-copy h1 {
        font-size: 34px;
        line-height: 42px;
    }
    .about-hero::after {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.65) 100%);
    }
}

/* ================= ABOUT STATS BAND (about.html) ================= */
.stats-band {
    background: #FFF;
}
.stats-band-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.stats-band-item {
    background: #EAF3FB;
    padding: 40px 20px;
    text-align: center;
}
.stats-band-item strong {
    color: #000;
    text-align: center;
    font-size: 60px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 8px;
}
.stats-band-item span {
    color: #000;
    text-align: center;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 152.941% */
    display: block;
}
@media (max-width: 1440px) {
    .stats-band-item strong {
        font-size: 50px;
    }
}
@media (max-width: 767px) {
    .stats-band-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .stats-band-item {
        padding: 30px 15px;
    }
    .stats-band-item strong {
        font-size: 32px;
    }
}

/* ================= ABOUT SPLIT SECTIONS (about.html) ================= */
.split-section {
    background: #0B1117;
}
.split-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 70px;
}
.split-copy {
    max-width: 460px;
}
.split-copy h2 {
    color: #FFF;
}
.split-copy h2 span.teal {
    color: #21C0DA;
}
.split-copy p {
    color: #fff;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
}
.split-media img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}
.split-media:hover img {
    transform: scale(1.02);
}
@media (max-width: 991px) {
    .split-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .split-media {
        order: -1;
    }
    .split-copy {
        max-width: 100%;
    }
}
@media (max-width: 767px) {
    .split-copy h2 {
        font-size: 28px;
    }
    .split-media img {
        max-height: 280px;
    }
    .split-copy p {
        font-size: 15px;
        line-height: 1.5;
    }
}

/* ================= WHAT DEFINES US (about.html) ================= */
.defines-section {
    background: #FFF;
}
.defines-head {
    max-width: 760px;
    margin: 0 auto 50px;
}
.defines-grid {
    display: grid;
    grid-template-columns: 0.9fr 1fr;
    gap: 40px;
    align-items: stretch;
}
.defines-media {
    position: relative;
}
.defines-media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: all var(--dur) var(--ease);
}
.defines-media-img.is-active {
    position: relative;
    opacity: 1;
    z-index: 1;
}
.defines-media {
    overflow: hidden;
}
/* .defines-media:hover .defines-media-img {
    transform: scale(1.2);
} */
.defines-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
    justify-content: center;
}
.defines-item {
    padding: 30px;
    transition: all 0.3s ease-in-out;
}
.defines-item h3 {
    color: #000;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 12px;
    transition: all 0.3s ease-in-out;
}
.defines-item p {
    color: #383743;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 152.941% */ 
}
.defines-item.is-highlight,
.defines-item:hover {
    background: #FFF;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.10);
}
.defines-item.is-highlight h3,
.defines-item:hover h3 {
    color: #EF6D2C;
}
@media (max-width: 1440px) {
    .defines-item h3 {
        font-size: 26px;
    }
}
@media (max-width: 991px) {
    .defines-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 767px) {
    .defines-grid {
        gap: 20px;
    }
    .defines-item h3 {
        font-size: 18px;
    }
    .defines-item {
        padding: 16px;
    }
    .defines-item p {
        font-size: 15px;
    }
    .defines-list {
        gap: 12px;
    }
    .defines-media-img {
        max-height: 200px;
    }
}

/* ================= LISTING HERO (pool-listing.html) ================= */
.listing-hero {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.listing-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
.listing-filter-bar img {
    max-width: 30px;
    max-height: 30px;
    margin: auto;
}
.listing-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(1deg, #000 7.06%, rgba(0, 0, 0, 0.00) 46.24%);
    z-index: -1;
}
.listing-hero .container {
    width: 100%;
    padding-top: 100px;
    padding-bottom: 70px;
}
.listing-hero-inner {
    max-width: 620px;
    color: #FFF;
}
.listing-hero-inner h1 {
    margin-bottom: 14px;
}
.listing-hero-inner p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 152.941% */
    max-width: 480px;
}
.listing-hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 34px;
}
@media (max-width: 1440px) {
    .listing-hero-inner h1 {
        font-size: 50px;
    }
}
@media (max-width: 991px) {
    .listing-hero {
        min-height: 560px;
    }
}
@media (max-width: 767px) {
    .listing-hero {
        min-height: auto;
    }
    .listing-hero .container {
        padding-top: 70px;
        padding-bottom: 40px;
    }
    .listing-hero-inner h1 {
        font-size: 32px;
        line-height: 40px;
    }
    .listing-hero-buttons {
        flex-direction: column;
    }
    .listing-hero-buttons .default-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ================= MODEL OVERVIEW ================= */
.overview-section {
    background: #F8FAFC;
}
.overview-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 60px;
    align-items: center;
}
.overview-copy p:not(.eyebrow) {
    color: #000;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 152.941% */
    margin-top: 16px;
    max-width: 460px;
}
.overview-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.overview-stat {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 22px;
    border: 1px solid #E4E6E9;
    background: #FFF;
}
.overview-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.overview-stat-label {
    display: block;
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
}
.overview-stat-value {
    display: block;
    color: #000;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 152.941% */
    margin-top: 1px;
    white-space: nowrap;
}
@media (max-width: 1440px) {
    .overview-stat-value {
        font-size: 15px;
    }
    .overview-stat {
        padding: 22px 16px;
        gap: 12px;
    }
}
@media (max-width: 991px) {
    .overview-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}
@media (max-width: 575px) {
    .overview-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .overview-stat {
        padding: 20px 14px;
        flex-direction: column;
    }
    .overview-stat-value {
        white-space: normal;
    }
}

/* ================= MODEL GALLERY ================= */
.model-gallery {
    background: #F8FAFC;
}
.gallery-main {
    position: relative;
    aspect-ratio: 16 / 7.6;
    overflow: hidden;
    background: #0F1014;
}
.gallery-slides {
    position: relative;
    width: 100%;
    height: 100%;
}
.gallery-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    /* contain, not cover: the frame is 2.1:1 and the model photography is
       4:3, so cover discarded about 37% of every image's height. Not
       removed outright — with no object-fit the default is `fill`, and a
       4:3 photo stretched into a 2.1:1 box is worse than a cropped one.
       The widget exposes this as a per-gallery choice. */
    object-fit: contain;
    opacity: 0;
    z-index: 1;
    transition: opacity .5s var(--ease);
}
.gallery-slide.is-active {
    opacity: 1;
    z-index: 2;
}
.model-gallery [type=button]:focus,
.model-gallery [type=button]:hover,
.model-gallery [type=submit]:focus,
.model-gallery [type=submit]:hover,
.model-gallery button:focus,
.model-gallery button:hover {
    background-color: inherit;
}
/* Reuse the homepage's .round-arrow (Unrivaled Quality) styling; these
   classes only add the overlay positioning on top of the image. */
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}
.gallery-arrow.prev {
    left: 24px;
}
.gallery-arrow.next {
    right: 24px;
}
.gallery-counter {
    position: absolute;
    right: 24px;
    bottom: 20px;
    z-index: 3;
    color: #FFF;
    font-size: 15px;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.gallery-thumbs {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
.gallery-thumb {
    flex: 1;
    position: relative;
    padding: 0;
    border: 2px solid transparent;
    background: none;
    cursor: pointer;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    transition: border-color var(--dur) var(--ease);
}
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .65;
    transition: opacity var(--dur) var(--ease);
}
.gallery-thumb:hover img {
    opacity: .9;
}
.gallery-thumb.is-active {
    border-color: #0078D6;
}
.gallery-thumb.is-active img {
    opacity: 1;
}
@media (max-width: 991px) {
    .gallery-main {
        aspect-ratio: 4 / 3;
    }
    .gallery-arrow.prev {
        left: 14px;
    }
    .gallery-arrow.next {
        right: 14px;
    }
}
@media (max-width: 575px) {
    .gallery-thumbs {
        gap: 5px;
    }
    .round-arrow.gallery-arrow {
        width: 38px;
        height: 38px;
    }
}

/* ================= FINISHES / COLOR OPTIONS ================= */
.finishes-section {
    position: relative;
    background: url('../images/finishes-bg.jpg') center / cover no-repeat;
    overflow: hidden;
}
.finishes-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(6, 10, 14, .1) 0%, rgba(6, 10, 14, .1) 45%, rgba(6, 10, 14, .1) 100%);
}
.finishes-section .container {
    position: relative;
}
.finishes-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}
.finishes-copy {
    max-width: 380px;
    flex: none;
}
.finishes-copy h2 {
    color: #FFF;
}
.finishes-copy h2 span {
    color: #71D8F0;
}
.finishes-copy p {
    color: #FFF;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 152.941% */
    margin-top: 6px;
}
.finishes-swatches {
    display: flex;
    gap: 30px;
}
.finish-swatch {
    text-align: center;
    max-width: 170px;
}
.finish-swatch-img {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 450px;
    border: 6px solid rgba(255, 255, 255, 0.30);
    max-width: 135px;
    margin: auto;
}
.finish-swatch-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    pointer-events: none;
    transition: left 0.7s ease;
}
.finish-swatch-img:hover::after {
    left: 125%;
}
.finish-swatch-img img {
    display: block;
    width: 100%;
    max-width: 135px;
    margin: auto;
}
.swatch-color {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    margin: 0 auto 18px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35), inset 0 -8px 14px rgba(0, 0, 0, .25), inset 0 6px 10px rgba(255, 255, 255, .18);
}
/* Placeholder finish colors approximated from the swatch names — swap for
   real material photography/renders when available. */
.finish-swatch strong {
    display: block;
    color: #FFF;
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 173.333% */
    margin-top: 10px;
    margin-bottom: 5px;
}
.finish-swatch span {
    display: block;
    color: rgba(255, 255, 255, 0.80);
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3; /* 200% */
}
@media (max-width: 991px) {
    .finishes-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }
    .finishes-swatches {
        flex-wrap: wrap;
        gap: 30px;
        width: 100%;
    }
}
@media (max-width: 575px) {
    .finishes-grid {
        text-align: center;
        align-items: center;
    }
    .finishes-swatches {
        justify-content: center;
        gap: 24px 20px;
    }
    .finish-swatch {
        max-width: 130px;
    }
    .swatch-color {
        width: 68px;
        height: 68px;
        margin-bottom: 14px;
    }
}

/* ================= SPACIOUS DESIGN DIAGRAM ================= */
.spacious-section {
    background: #FEFBF6;
}
.spacious-section .sec-head {
    max-width: 820px;
    margin: 0 auto;
}
/* Illustrative placeholder — swap for the real product-diagram artwork
   (with matching callout coordinates) when it's available. */
.pool-diagram {
    position: relative;
    text-align: center;
}
.pool-diagram img {
    margin: auto;
}
@media (max-width: 767px) {
    .pool-callout-label {
        font-size: 11px;
        padding-left: 12px;
    }
    .pool-callout-label::before {
        width: 8px;
    }
    .finish-swatch-img {
        max-width: 85px;
        border-width: 3px;
    }
    .finish-swatch-img img {
        max-width: 85px;
    }
}
@media (max-width: 575px) {
    .pool-callout-label {
        white-space: normal;
        max-width: 90px;
    }
}

/* ================= FEATURES & CRAFTSMANSHIP ================= */
.features-section {
    position: relative;
    background: url('../images/features-image-bg.jpg') center / cover no-repeat;
    overflow: hidden;
}
.features-section .eyebrow {
    color: #B9D9F5;
}
.features-section .container {
    position: relative;
}
.features-section h2 {
    color: #FFF;
}
.features-section h2 span {
    color: #71D8F0;
}
.features-section .feature-icon {
    margin-bottom: 8px;
}
.features-section .feature-icon img {
    margin: auto;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-top: 50px;
    text-align: center;
}
.feature-item h3 {
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
    max-width: 190px;
    margin: 0 auto 10px;
}
.feature-item p {
    color: rgba(255, 255, 255, 0.80);
    text-align: center;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 152.941% */
    max-width: 240px;
    margin: auto;
}
@media (max-width: 991px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 24px;
    }
}
@media (max-width: 575px) {
    .features-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-top: 30px;
    }
}

/* ================= SIMILAR MODELS ================= */
.similar-models {
    background: #FFF;
    overflow: hidden;
}
.similar-models-slider {
    position: relative;
    margin-top: 42px;
}


.similar-models-slider .slick-list {
    /* right-hand padding is the peek of the next card; slick measures the
       content box, so it stays out of the slide-width maths */
    padding: 0 20% 0 0;
    margin-left: max(30px, calc((100vw - 1320px) / 2 + 10px));
}
@media (max-width: 992px) {
    .similar-models-slider .slick-list {
        margin-left: 0;
    }

}
.similar-model-slide {
    position: relative;
    display: block;
    /* height: 380px; */
    margin: 0 10px;
    overflow: hidden;
    text-decoration: none;
}
.similar-model-slide img {
    width: 100%;
    height: 360px;
    /* cover, not contain: this card overlays a caption and a bottom
       gradient on the image, so the image has to fill the frame — with
       contain, the gradient and the pool name sit over the letterbox
       gaps instead of over the photograph. The hover scale(1.06) below
       also only reads as a zoom on a filled frame. */
    object-fit: cover;
    transition: transform .7s var(--ease);
}
.similar-model-slide:hover img {
    transform: scale(1.06);
}
.similar-model-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 6, 9, 0) 40%, rgba(4, 6, 9, .78) 100%);
}
.similar-model-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 26px 40px;
}
.similar-model-info h3 {
    color: #FFF;
    font-family: 'Test Tiempos Fine', sans-serif;
    font-size: 35px;
    font-weight: 300;
    line-height: normal;
    margin: 0 0 6px;
}
.similar-model-info p {
    color: rgba(255, 255, 255, .85);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: .3px;
    text-transform: uppercase;
    margin: 0;
}
/* Reuse the homepage's round .carousel-arrow (Dealer Spotlight) styling —
   the attribute selector already matches any class ending in -prev/-next. */
@media (max-width: 575px) {
    .similar-models-slider {
        margin-top: 20px;
    }
    .similar-model-slide {
        margin: 0 0 0 15px;
    }
    .similar-model-info {
        padding: 18px;
    }
    .similar-model-info h3 {
        font-size: 26px;
    }
}

/* ================= CTA (inner pages: blue variant) ================= */
/* Modifier on the homepage's .cta-section — same markup/copy pattern,
   just recolored for the brand-blue band shown on inner pages. */
.cta-section.on-blue {
    background: #0078D6;
    padding: 60px 0;
}
.cta-section.on-blue h2 {
    color: #FFF;
}
.cta-section.on-blue h2 span {
    color: #FFF;
    font-family: 'Test Tiempos Fine', sans-serif;
    font-style: italic;
    font-weight: 300;
}
.cta-section.on-blue .section-sub {
    color: #fff;
}
.cta-section.on-blue .find-dealer-btn {
    border-color: #FFF;
    color: #FFF;
    background: transparent;
}
.cta-section.on-blue .find-dealer-btn:hover {
    background: #FFF;
    color: #0078D6;
}
@media (max-width: 767px) {
    .cta-section.on-blue {
        padding: 40px 0;
    }
    /* .cta-buttons goes full-width column at this breakpoint (existing
       homepage rule); .default-btn picks up matching width/centering
       there automatically, but .find-dealer-btn needs the same treatment
       spelled out since it's a different button class. */
    .cta-buttons .find-dealer-btn {
        width: 80%;
        margin: 0 auto;
        justify-content: center;
    }
}

/* =================================================================
   PROJECT / CASE-STUDY DETAIL PAGE (project.html)
   Shares the header-light / find-dealer-btn / default-btn tokens with
   pool-model.html; section-specific styling starts here.
   ================================================================= */

/* ================= PROJECT HERO ================= */
.project-hero {
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.project-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
.project-hero .container {
    width: 100%;
    padding-bottom: 60px;
}
.project-hero-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}
.project-hero-text h1 {
    margin-bottom: 16px;
}
.project-hero-text h1 span {
    font-family: 'Test Tiempos Fine', sans-serif;
    font-style: italic;
    font-weight: 300;
    color: #71D8F0;
}
.project-hero-text .eyebrow {
    color: #B9D9F5;
}
.project-hero-meta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.project-hero-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.project-hero-meta i {
    color: #FFF;
    font-size: 14px;
}
.project-hero-buttons {
    display: flex;
    gap: 12px;
    flex: none;
}
@media (max-width: 991px) {
    .project-hero {
        min-height: 580px;
    }
    .project-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 26px;
    }
    .project-hero-buttons {
        width: 100%;
    }
}
@media (max-width: 767px) {
    .project-hero-text h1 {
        font-size: 32px;
    }
    .project-hero-meta {
        gap: 14px 20px;
    }
    .project-hero-buttons {
        flex-direction: column;
    }
    .project-hero-buttons .default-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ================= PROJECT OVERVIEW ================= */
.project-overview {
    background: #F8FAFC;
}
.project-overview .eyebrow {
    color: #000000;
}
.project-overview-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 60px;
    align-items: start;
}
.project-overview-copy p:not(.eyebrow) {
    color: #383743;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 152.941% */
    margin-top: 14px;
    max-width: 520px;
}
.project-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 0;
    margin-top: 35px;
}
.project-highlight {
    /* display: flex;
    align-items: center;
    gap: 14px; */
    min-width: 130px;
}
.project-highlight img {
    min-height: 54px;
}
.project-highlight:not(:last-child) {
    padding-right: 30px;
    margin-right: 30px;
    border-right: 1px solid #E8E9ED;
}
.project-highlight-icon {
    flex: none;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 120, 214, .08);
    color: #0078D6;
    font-size: 18px;
}
.project-highlight-text {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}
.project-highlight-text span {
    color: #70706F;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.project-highlight-text strong {
    color: #101012;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 3px;
}

.project-spec-card {
    border: 1px solid #EDEDED;
    background: #FFF;
    padding: 15px 30px;
    max-width: 470px;
    width: 100%;
    margin-left: auto;
}
.project-spec-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
}
.project-spec-row:not(:last-child) {
    border-bottom: 1px solid #EFECE5;
}
.project-spec-row span {
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
    white-space: nowrap;
}
.project-spec-row strong {
    color: #000;
    text-align: center;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 152.941% */
    text-align: right;
}
@media (max-width: 991px) {
    .project-overview-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }
    .project-spec-card {
        max-width: 460px;
    }
}
@media (max-width: 575px) {
    .project-highlights {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .project-highlight img {
        max-width: 35px;
        min-height: 35px;
        margin: auto;
    }
    .project-highlight:not(:last-child) {
        padding-right: 0;
        margin-right: 0;
        border-right: 0;
    }
    .project-highlight-text {
        justify-content: center;
        text-align: center;
        margin-top: 6px;
    }
    .project-spec-card {
        max-width: 100%;
        padding: 10px 20px;
    }
    .project-spec-row span {
        font-size: 16px;
    }
    .project-spec-row strong {
        font-size: 15px;
    }
    .project-spec-row {
        padding: 10px 0;
    }
}

/* ================= THOUGHTFUL FEATURES ================= */
/* Same .features-section component as pool-model.html, different photo. */
.features-section.on-project {
    background-image: url('../images/feature-detail-bg.jpg');
}

@media (max-width: 767px) {
    .round-arrow.gallery-arrow {
        width: 38px;
        height: 38px;
    }
}

/* ================= BEFORE / AFTER ================= */
.before-after-section {
    background: #000;
}
.before-after-section h2 {
    color: #FFF;
}
.before-after-section h2 span {
    color: #71D8F0;
}
.before-after-section .section-sub {
    color: #fff !important;
    max-width: 640px;
    margin: 0 auto;
}
.before-after {
    margin-top: 46px;
}
.ba-frame {
    --ba-pos: 50%;
    position: relative;
    aspect-ratio: 16 / 7.2;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
}
.ba-after,
.ba-before {
    position: absolute;
    inset: 0;
}
.ba-after {
    z-index: 1;
}
.ba-before img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ba-after img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ba-before {
    z-index: 2;
    clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}
.ba-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #B7C4B0 0%, #8FA084 55%, #6E7F63 100%);
}
/* Anchored near the left edge rather than centred in the full-width
   layer — centring would sit it right under the handle at the default
   50% split, since this element's own box always spans the full frame
   regardless of how much of it clip-path currently reveals. */
.ba-placeholder-content {
    position: absolute;
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    color: rgba(255, 255, 255, .9);
}
.ba-placeholder-content i {
    font-size: 34px;
}
.ba-placeholder-content span {
    /* Fixed px, not a %: this box's containing block is the full
       (unclipped) frame, so a percentage width would resolve against
       the whole frame rather than the visible half and could still
       overflow past the handle. */
    max-width: 150px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: normal;
}
.ba-tag {
    position: absolute;
    top: 20px;
    z-index: 4;
    background: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(7px);
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 162.5% */
    padding: 8px 16px;
}
.ba-tag-before {
    left: 20px;
}
.ba-tag-after {
    right: 20px;
}
.ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ba-pos);
    width: 2px;
    background: #FFF;
    transform: translateX(-50%);
    z-index: 3;
    cursor: ew-resize;
}
.ba-handle-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #fff;
    font-size: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.ba-handle:focus-visible .ba-handle-btn {
    outline: 2px solid #52C8EF;
    outline-offset: 3px;
}
@media (max-width: 767px) {
    .ba-frame {
        aspect-ratio: 4 / 5;
    }
    .ba-tag {
        font-size: 11px;
        padding: 6px 12px;
    }
    .ba-placeholder-content {
        left: 6%;
    }
    .ba-placeholder-content i {
        font-size: 26px;
    }
    .ba-placeholder-content span {
        max-width: 110px;
        font-size: 11px;
    }
}

/* ================= DEALER PARTNER + LEAD FORM ================= */
.dealer-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}
.dealer-panel,
.project-form-panel {
    display: flex;
    align-items: center;
}
.dealer-panel-inner {
    width: 100%;
    max-width: 650px;
    margin-left: auto;
    padding: 60px 60px;
}
.dealer-panel-inner > p {
    color: #383743;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    margin-top: 16px;
}
.dealer-card {
    display: flex;
    gap: 0;
    margin-top: 40px;
    background: #FBFEFF;
}
.dealer-avatar {
    flex: none;
    max-width: 200px;
    overflow: hidden;
}
.dealer-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dealer-card-body {
    padding: 30px;
}
.dealer-card-body h3 {
    color: #232227;
    font-size: 23px;
    font-style: normal;
    font-weight: 600;
    line-height: 123.22%; /* 28.341px */
    margin-bottom: 2px;
}
.dealer-role {
    color: rgb(35 34 39 / 80%);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 123.22%; /* 19.715px */
    margin-bottom: 20px;
}
.dealer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dealer-contact-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #232227;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 10px;
}
.dealer-contact-list li:not(:last-child) {
    border-bottom: 1px solid rgb(229 229 229 / 40%);
}
.dealer-contact-list i {
    flex: none;
    width: 16px;
    text-align: center;
    color: #232227;
    font-size: 13px;
}
.dealer-cta-section {
  background:
    linear-gradient(
      180deg,
      #fff 40%,
      rgba(255, 255, 255, 80%) 100%
    ),
    url('../images/dealer-bg.png') center / cover no-repeat;
    overflow: hidden;
}

.project-form-panel {
    background: #0078D6;
}
.project-form-inner {
    width: 100%;
    max-width: 560px;
    margin-right: auto;
    padding: 60px 60px;
}
.project-form-inner h2 {
    color: #FFF;
}
.project-form-inner h2 span {
    font-family: 'Test Tiempos Fine', sans-serif;
    font-style: italic;
    font-weight: 300;
    color: #FFF;
}
.project-form-inner > p {
    color: rgba(255, 255, 255, .85);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    margin-top: 12px;
    margin-bottom: 34px;
}
.form-group {
    margin-bottom: 30px;
}
.form-group label {
    display: block;
    color: #FFF;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.form-input-wrap {
    position: relative;
}
.form-input-wrap input,
.form-input-wrap select {
    width: 100%;
    padding: 0 44px 15px 10px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.60);
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 1; /* 173.333% */
    border-bottom: 1px #DEDEE4 solid;
    outline: 0;
}
.form-input-wrap option {
    background: #fff;
    color: #000;
}
.form-input-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.60);
}
.form-input-wrap i {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.60);
    font-size: 14px;
    pointer-events: none;
}
.form-row {
    display: flex;
    gap: 16px;
}
.form-row .form-group {
    flex: 1;
    min-width: 0;
}
.project-form .default-btn {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    border: 0;
    transition: all 0.3s ease-in-out;
}

.project-form .default-btn::before {
    display: none;
}
.project-form .default-btn:hover {
    background-color: #52c8ef;

}
@media (max-width: 991px) {
    .dealer-cta-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .dealer-panel-inner,
    .project-form-inner {
        max-width: 100%;
        margin: 0;
        padding: 60px 30px;
    }
}
@media (max-width: 575px) {
    .dealer-panel-inner,
    .project-form-inner {
        padding: 44px 20px;
    }
    .dealer-card-body {
        text-align: center;
    }
    .dealer-card-body h3 {
        font-size: 18px;
    }
    .dealer-role {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .dealer-card {
        flex-direction: column;
    }
    .dealer-avatar {
        width: 140px;
        aspect-ratio: 3 / 4;
        margin: auto;
    }
    .dealer-contact-list li {
        justify-content: center;
    }
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}

/* ================= POOL LISTING (pool-listing.html) ================= */
.listing-intro {
    background-color: #000;
}
.listing-intro .sec-head {
    max-width: 660px;
    margin: 0 auto;
}
.listing-filter-bar {
    margin-top: 40px;
}
.dropdown-list.is-active {
    background: #000;
}
.dropdown-list.is-active img {
    filter: invert(1);
}
.dropdown-list.is-active select.search-dropdown {
    background: #000;
    color: #fff;
}
.listing-intro h2 {
    color: #fff;
}
.listing-intro h2 span {
    color: #71D8F0
}
.listing-intro .sec-head p {
    color: #fff;
}
.spa-collection {
    background: #000;
    padding-top: 40px;
}
.spa-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.spa-grid.is-collapsed .spa-card:nth-child(n+7) {
    display: none;
}
.spa-card {
    overflow: hidden;
    border: 1px solid #312F39;
}
.spa-card-img {
    position: relative;
    overflow: hidden;
}
.spa-card-img::after {
    content: '';
    background: linear-gradient(1deg, #000 7.06%, rgba(0, 0, 0, 0.00) 46.24%);
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.spa-card img {
    width: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.spa-card:hover .spa-card-img img {
    transform: scale(1.08);
}
.spa-card-body {
    padding: 26px 20px 30px;
}
.spa-card-body h3 {
    color: #FFF;
    font-family: "Test Tiempos Fine", sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin-bottom: 10px;
}
.spa-card-body > p {
    color: rgba(255, 255, 255, 0.70);
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 152.941% */
    margin-bottom: 24px;
}
.spa-card-stats {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.spa-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.spa-stat:not(:last-child) {
    border-right: 1px #383D46 solid;
    padding-right: 12px;
}
.spa-stat-label {
    color: rgba(255, 255, 255, 0.51);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 185.714% */
    text-transform: uppercase;
}
.spa-stat-value {
    color: #FFF;
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 173.333% */
}
.spa-collection-more {
    text-align: center;
    margin-top: 50px;
}

@media (min-width: 768px) {
    .spa-card-img {
        min-height: 300px;
        display: flex;
        align-items: center;
    }
    .spa-card-img img {
        max-height: 390px;
        object-fit: contain;
    }
}
@media (max-width: 1200px) {
    .spa-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pool-search-inner {
        padding: 10px 10px;
        gap: 5px;
    }
    .dropdown-list {
        gap: 5px;
    }
    .listing-filter-bar img {
        max-width: 20px;
        max-height: 20px;
    }
}

.estimator-section {
    background: url('../images/estimator-bg.jpg') 0 0 / cover no-repeat;
    position: relative;
}
.estimator-section::before {
    content: '';
    width: 20%;
    height: 100%;
    background: #ECF2F8;
    position: absolute;
    top: 0;
    left: 0;
}
.estimator-wrap {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}
.estimator-panel {
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(12px);
    padding: 60px;
    max-width: 670px;
}
.estimator-panel p {
    color: #2F2E38;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 30px;
}
.estimator-steps {
    display: flex;
    margin-top: 0;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(12px);
    max-width: 885px;
    padding: 40px 60px;
    padding-left: 100px;
    gap: 30px;
}
.estimator-steps li {
    flex: 1;
    position: relative;
    color: #000;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    max-width: 160px;
    width: 100%;
}
.estimator-steps li:first-child:before {
    content: '';
    position: absolute;
    top: 22px;
    left: -50px;
    width: 20%;
    height: 1px;
    background: #EF6D2C;
}
.estimator-steps li .first:before {
    content: '';
    position: absolute;
    top: 16px;
    left: -54px;
    width: 13px;
    height: 13px;
    border-radius: 50px;
    background: #EF6D2C;
}
.estimator-steps li .last:after {
    content: '';
    position: absolute;
    top: 16px;
    right: 0;
    width: 13px;
    height: 13px;
    border-radius: 50px;
    background: #EF6D2C;
}

.estimator-steps li::after {
    content: '';
    position: absolute;
    top: 22px;
    right: 0px;
    width: 60%;
    height: 1px;
    background: #EF6D2C;
}
.estimator-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #EF6D2C;
    font-family: "Test Tiempos Fine", sans-serif;
    font-size: 35px;
    font-style: normal;
    font-weight: 300;
    line-height: 123.22%; /* 43.127px */
}
.estimator-step-label {
    display: block;
    color: #000;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: 10px;
    max-width: 140px;
}
@media (max-width: 991px) {
    .estimator-panel {
        max-width: 100%;
        padding: 50px 35px;
    }
    .estimator-steps {
        max-width: 100%;
        flex-wrap: wrap;
        row-gap: 30px;
        padding: 40px 35px;
    }
    .estimator-steps li {
        flex: 0 0 calc(50% - 15px);
        max-width: 100%;
    }
    /* The connecting line/dot decoration assumes a single horizontal row —
       once steps wrap to two columns it just looks broken, so drop it. */
    /* .estimator-steps li::after,
    .estimator-steps li:first-child::before,
    .estimator-steps li .first::before,
    .estimator-steps li .last::after {
        display: none;
    } */
}
@media (max-width: 575px) {
    .estimator-steps {
        padding: 30px 20px;
        row-gap: 0;
        text-align: center;
    }
    .estimator-steps li {
        flex: 0 0 100%;
        padding-bottom: 40px;
    }
    .estimator-step-label {
        margin: 10px auto;
    }
    .estimator-steps li:first-child:before {
        top: -20px;
        left: 0;
        right: 0;
        margin: auto;
        width: 1px;
        height: 20px;
    }
    .estimator-steps li .first:before {
        top: -30px;
        left: 0;
        right: 0;
        margin: auto;
    }
    .estimator-steps li::after {
        top: auto;
        bottom: 0;
        right: 0px;
        left: 0;
        width: 1px;
        height: 40px;
        margin: auto;
    }
    .estimator-steps li .last:after {
        top: auto;
        bottom: 0;
        left: 0;
        margin: auto;
        right: 0;
        width: 13px;
        height: 13px;
    }
    .estimator-step-label {
        font-size: 15px;
    }
}



.listing-faq {
    background: #F8FAFC;
}
.listing-faq .sec-head {
    margin: 0 auto;
    max-width: 920px;
}
.listing-faq .sec-head h2 {
    max-width: 700px;
    width: 100%;
    margin: 0 auto 20px;
}
.faq-list {
    max-width: 900px;
    margin: 50px auto 0;
}
.faq-item {
    border: 1px solid #ECECF1;
    background: #FFF;
    padding: 0 20px;
    margin-bottom: 14px;
}
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    padding: 18px 4px;
    text-align: left;
    color: #101012;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
}
.faq-toggle-icon {
    position: relative;
    flex: none;
    width: 18px;
    height: 18px;
}
.faq-toggle-icon::before,
.faq-toggle-icon::after {
    content: '';
    /* position: absolute;
    background: #101012; */
    transition: all 0.25s ease;
}
.faq-toggle-icon::before {
    /* top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px; */
}
.faq-toggle-icon::after {
    /* left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    margin-left: -1px; */
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(45deg);
    bottom: 2px;
    left: 15px;
}
.faq-item.is-open .faq-toggle-icon::after {
    transform: rotate(225deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.faq-answer p {
    padding: 0 4px 24px;
    color: #383743;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    max-width: 780px;
}
.builder-section {
    background: url(../images/contact-bg.jpg) 0 0 no-repeat;
    background-size: cover;
}
.builder-section h2 {
    text-align: center;
}
.builder-section p {
    text-align: center;
}
.builder-section h2 span {
    color: #71D8F0;
}
.builder-grid {
    display: grid;
}
.builder-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.builder-form-panel {
    background: rgba(0, 0, 0, 0.60);
    backdrop-filter: blur(22px);
    display: flex;
    align-items: center;
    max-width: 700px;
    margin-left: auto;
}
.builder-form-inner {
    width: 100%;
    margin: 0 auto;
    padding: 60px;
}
.builder-form-inner h2 {
    color: #FFF;
}
.builder-form-inner > p {
    color: rgba(255, 255, 255);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    margin-top: 12px;
    margin-bottom: 30px;
}
.builder-form .form-row {
    display: flex;
    gap: 16px;
}
.builder-form .form-group {
    flex: 1;
    min-width: 0;
    margin-bottom: 18px;
}
.builder-form .form-group label {
    display: block;
    color: #A1ACB4;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px; /* 200% */
    margin-bottom: 8px;
    text-transform: none;
}
.builder-form input {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #555E63;
    background: rgba(0, 0, 0, 0.00);
    outline: 0;
    color: #A1ACB4;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1; /* 200% */
}
.builder-form input::placeholder {
    color: rgba(255, 255, 255, 0.40);
}
.builder-form input:focus {
    border-color: #0078D6;
}
.builder-form .default-btn {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
    border: 0;
    outline: 0;
}
.builder-form .default-btn:hover::before {
    width: 100%;
    height: 600px;
}

@media (max-width: 991px) {
    .builder-grid {
        grid-template-columns: 1fr;
    }
    .builder-media {
        min-height: 320px;
    }
    .builder-form-inner {
        max-width: 100%;
        padding: 60px 30px;
    }
}
@media (max-width: 575px) {
    .builder-form-inner {
        padding: 44px 20px;
    }
    .builder-form .form-row {
        flex-direction: column;
        gap: 0;
    }
    .builder-form .form-group {
        margin-bottom: 10px;
    }
    .builder-form input {
        padding: 10px 12px;
    }
}
@media (max-width: 767px) {
    .spa-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .spa-card-body {
        padding: 22px 20px 26px;
        text-align: center;
    }
    .spa-card-body h3 {
        font-size: 22px;
    }
    .spa-card-body > p {
        font-size: 15px;
        line-height: 1.4;
    }
    .spa-card-stats {
        flex-wrap: wrap;
        row-gap: 16px;
        flex-direction: column;
    }
    .spa-stat:not(:last-child) {
        border-right: 0;
        padding-right: 0;
    }
    .faq-list {
        margin-top: 30px;
    }
    .faq-question {
        font-size: 16px;
        padding-bottom: 10px;
    }
    .faq-item {
        padding: 0 15px 0 10px;
    }
}

/* ================= CONTACT PAGE ================= */
.contact-hero {
    min-height: 500px;
}

.contact-info {
    background: #F8FAFC;
}
.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 50px;
}
.contact-info-card {
    background: #FFF;
    border: 1px solid #EDEDED;
    padding: 36px 30px;
}
.contact-info-icon {
    color: #101012;
    font-size: 26px;
    margin-bottom: 12px;
}
.contact-info-label {
    display: block;
    color: #0078D6;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 152.941% */
    text-transform: uppercase;
    margin-bottom: 2px;
}
.contact-info-value {
    display: block;
    color: #0F0F0F;
    font-size: 19px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px; /* 168.421% */
}

.contact-form-section {
    background: url('../images/contact-us-bg.jpg') center / cover no-repeat;
}
.contact-media-panel {
    position: relative;
    display: flex;
    align-items: center;
}
.contact-media-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.contact-media-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 530px;
    padding: 60px;
}
.contact-media-inner .eyebrow {
    color: #B9D9F5;
    margin-bottom: 20px;
}
.contact-media-inner h2 {
    color: #FFF;
    text-align: left;
}
.contact-media-inner > p {
    color: #FFF;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 164.706% */
    max-width: 420px;
    margin-top: 12px;
    margin-bottom: 30px;
}
.contact-checklist {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.contact-checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FFF;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    position: relative;
    padding-left: 25px;
}
.contact-checklist li::before,
.contact-checklist li::after {
    content: '';
    flex: none;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 0;
}
.contact-checklist li::before {
    width: 10px;
    height: 10px;
    background: #71D8F0;
    top: 5px;
    left: 3px;
}
.contact-checklist li::after {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(113, 216, 240, 0.50);
}

.contact-form-section h2 span {
    color: #71D8F0;
}
.contact-form-section .builder-form-inner h2 {
    text-align: center;
}
.contact-form-section .builder-form-inner > p {
    text-align: center;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.builder-form textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #555E63;
    background: rgba(0, 0, 0, 0.00);
    outline: 0;
    color: #A1ACB4;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    resize: vertical;
    min-height: 110px;
}
.builder-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.40);
}
.builder-form textarea:focus {
    border-color: #0078D6;
}
@media (max-width: 991px) {
    .contact-media-panel {
        min-height: 380px;
    }
    .contact-media-inner {
        max-width: 100%;
        padding: 50px 30px;
    }
}
@media (max-width: 767px) {
    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .contact-info .eyebrow {
        margin-bottom: 10px;
    }
    .contact-info-card {
        padding: 26px 20px;
    }
    .contact-media-inner .eyebrow {
        margin-bottom: 10px;
    }
}

/* ================= FINISHES / COLOR OPTIONS 2 ================= */
    .finish-palette-section {
        background: #0B1117;
    }
    .finish-palette-layout {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 60px;
    }
    .finish-palette-copy {
        padding-right: 40px;
        border-right: 1px solid rgba(255, 255, 255, 0.15);
    }
    .finish-palette-heading {
        position: sticky;
        top: 40px;
    }
    .finish-palette-copy h2 {
        color: #FFF;
    }
    .finish-palette-copy h2 span {
        color: #71D8F0;
    }
    .finish-palette-copy p {
        color: rgba(255, 255, 255, 0.80);
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 26px; /* 152.941% */
        margin-top: 6px;
    }
    .finish-palette-content {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .finish-group + .finish-group {
        padding-top: 40px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
    .finish-group-head h3 {
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 18px;
    }
    .finish-group-head p {
        color: rgba(255, 255, 255, 0.70);
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        margin: 0 0 24px;
    }
    /* Equal-width/height chips regardless of label length — CSS Grid with
    fixed column counts + a locked aspect-ratio keeps every swatch the
    same size instead of sizing to its own content. */
    .finish-swatches-grid {
        display: grid;
        gap: 24px 20px;
    }
    .finish-swatches-grid--4col {
        grid-template-columns: repeat(4, 1fr);
    }
    .finish-swatches-grid--6col {
        grid-template-columns: repeat(4, 1fr);
    }
    .finish-chip {
        text-align: center;
    }
    .finish-chip-color {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        border-radius: 6px;
        background-color: var(--c, #444);
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: inset 0 0 20px rgba(0, 0, 0, .25);
        position: relative;
        overflow: hidden;
    }
    .finish-chip-color::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: 90px 90px;
        mix-blend-mode: overlay;
        opacity: .6;
    }
    .finish-chip strong {
        display: block;
        color: rgba(255, 255, 255, 0.85);
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        letter-spacing: .3px;
        text-transform: uppercase;
        line-height: 1.3;
        margin-top: 10px;
    }
    .finish-chip .finish-chip-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .finish-chip-img {
        position: relative;
        overflow: hidden;
    }

    .finish-chip-img::after {
        content: "";
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg);
        pointer-events: none;
        transition: left 0.7s ease;
    }
    .finish-chip-img:hover::after {
        left: 125%;
    }

    @media (max-width: 991px) {
        .finish-palette-layout {
            grid-template-columns: 1fr;
            gap: 30px;
        }
        .finish-palette-copy {
            padding-right: 0;
            border-right: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
            padding-bottom: 30px;
        }
        .finish-swatches-grid--4col,
        .finish-swatches-grid--6col {
            grid-template-columns: repeat(4, 1fr);
        }
    }
    @media (max-width: 575px) {
        .finish-swatches-grid--4col,
        .finish-swatches-grid--6col {
            grid-template-columns: repeat(2, 1fr);
        }
    }