/* =========================================================
   WASH & BEHOLD DETAILING — PREMIUM
   Core Design System
   ========================================================= */


/* =========================================================
   TOKENS
   ========================================================= */

:root {
    --ink: #0b1420;
    --ink-soft: #253444;
    --muted: #667789;

    --navy: #071827;
    --navy-2: #0a2238;
    --navy-3: #103a5f;

    --blue: #0d4f83;
    --blue-bright: #176ca8;
    --blue-soft: #dceaf5;

    --steel-50: #f5f8fa;
    --steel-100: #edf2f5;
    --steel-200: #dbe3e9;
    --steel-300: #c5d0d8;
    --steel-500: #7f909f;

    --white: #ffffff;
    --yellow: #ffd447;
    --yellow-deep: #f2bd16;

    --success: #1d8d5f;

    --border: rgba(11, 20, 32, 0.12);
    --border-dark: rgba(255, 255, 255, 0.16);

    --shadow-sm:
        0 8px 30px rgba(4, 20, 33, 0.08);

    --shadow-md:
        0 18px 60px rgba(4, 20, 33, 0.12);

    --shadow-lg:
        0 30px 90px rgba(4, 20, 33, 0.18);

    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    --site-width: 1480px;
    --content-width: 1240px;

    --header-height: 92px;

    --font:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --transition-fast: 160ms ease;
    --transition: 240ms ease;
}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    border: 0;
}

[hidden] {
    display: none !important;
}


/* =========================================================
   DOCUMENT
   ========================================================= */

html {
    background: var(--white);
}

body {
    min-width: 320px;
    min-height: 100vh;

    overflow-x: hidden;

    background: var(--white);
    color: var(--ink);

    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--yellow);
    color: var(--ink);
}


/* =========================================================
   GLOBAL LAYOUT
   ========================================================= */

.site-shell {
    width: min(
        calc(100% - 64px),
        var(--site-width)
    );

    margin-inline: auto;
}

.content-shell {
    width: min(
        calc(100% - 64px),
        var(--content-width)
    );

    margin-inline: auto;
}

main {
    display: block;
}

section {
    position: relative;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4 {
    color: var(--ink);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

h1 {
    font-size: clamp(
        3.4rem,
        7vw,
        7.8rem
    );
}

h2 {
    font-size: clamp(
        2.6rem,
        5vw,
        5.5rem
    );
}

h3 {
    font-size: clamp(
        1.65rem,
        2.5vw,
        2.5rem
    );
}

p {
    color: var(--ink-soft);
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;

    color: var(--navy-3);

    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1.2;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.section-label::before {
    content: "";

    width: 26px;
    height: 3px;

    flex: 0 0 auto;

    background: var(--yellow);
    border-radius: var(--radius-pill);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;

    padding: 0.85rem 1.35rem;

    border: 1px solid transparent;
    border-radius: var(--radius-pill);

    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1;

    letter-spacing: 0.045em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.button:hover {
    transform: translateY(-2px);
}

.button:active {
    transform: translateY(0);
}

.button--primary,
.button--header {
    background: var(--yellow);
    color: var(--ink);

    box-shadow:
        0 10px 30px rgba(255, 212, 71, 0.16);
}

.button--primary:hover,
.button--header:hover {
    background: #ffe16e;
    box-shadow:
        0 14px 36px rgba(255, 212, 71, 0.24);
}

.button--dark {
    background: var(--navy);
    color: var(--white);
}

.button--dark:hover {
    background: var(--navy-3);
}

.button--outline {
    border-color: rgba(11, 20, 32, 0.28);
    background: transparent;
    color: var(--ink);
}

.button--outline:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--white);
}

.button--full {
    width: 100%;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 4px;
}


/* =========================================================
   UTILITY BAR
   ========================================================= */

.utility-bar {
    background: var(--navy);
    color: var(--white);
}

.utility-bar__inner {
    min-height: 38px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.utility-bar__status {
    display: flex;
    align-items: center;
    gap: 0.55rem;

    color: rgba(255, 255, 255, 0.82);

    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.utility-bar__dot {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--success);

    box-shadow:
        0 0 0 4px rgba(29, 141, 95, 0.15);
}

.utility-bar__links {
    display: flex;
    align-items: center;
    gap: 0.8rem;

    color: rgba(255, 255, 255, 0.72);

    font-size: 0.74rem;
    font-weight: 750;
}

.utility-bar__links a {
    transition: color var(--transition-fast);
}

.utility-bar__links a:hover {
    color: var(--yellow);
}

.utility-bar__links span {
    opacity: 0.34;
}


/* =========================================================
   PRIMARY HEADER
   ========================================================= */

.site-header {
    position: relative;
    z-index: 100;
}

.navigation-bar {
    position: relative;

    background:
        rgba(255, 255, 255, 0.96);

    border-bottom:
        1px solid var(--border);

    backdrop-filter:
        blur(16px);
}

.navigation-bar__inner {
    min-height: var(--header-height);

    display: grid;
    grid-template-columns:
        minmax(220px, 0.9fr)
        auto
        minmax(280px, 0.9fr);

    align-items: center;
    gap: 2.5rem;
}


/* =========================================================
   BRAND
   ========================================================= */

.site-brand {
    width: fit-content;

    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.site-brand__name {
    color: var(--ink);

    font-size: 1.28rem;
    font-weight: 950;
    line-height: 1;

    letter-spacing: -0.045em;
}

.site-brand__name span {
    color: var(--blue);
}

.site-brand__descriptor {
    color: var(--muted);

    font-size: 0.65rem;
    font-weight: 850;
    line-height: 1;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.desktop-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 2vw, 2.25rem);
}

.desktop-navigation a {
    position: relative;

    padding-block: 0.75rem;

    color: #2d3d4d;

    font-size: 0.86rem;
    font-weight: 800;

    transition:
        color var(--transition-fast);
}

.desktop-navigation a::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 0.3rem;
    left: 0;

    height: 2px;

    background: var(--yellow);

    transform: scaleX(0);
    transform-origin: center;

    transition:
        transform var(--transition-fast);
}

.desktop-navigation a:hover {
    color: var(--ink);
}

.desktop-navigation a:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.navigation-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
}

.navigation-phone {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.12rem;

    line-height: 1;
}

.navigation-phone span {
    color: var(--muted);

    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.navigation-phone strong {
    color: var(--navy);

    font-size: 0.9rem;
    font-weight: 900;
}

.navigation-phone:hover strong {
    color: var(--blue);
}


/* =========================================================
   MOBILE NAV TOGGLE
   ========================================================= */

.mobile-navigation-toggle {
    width: 46px;
    height: 46px;

    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;

    padding: 0;

    border-radius: 50%;

    background: var(--navy);
    color: var(--white);

    cursor: pointer;
}

.mobile-navigation-toggle span {
    width: 18px;
    height: 2px;

    border-radius: var(--radius-pill);

    background: currentColor;

    transition:
        transform var(--transition),
        opacity var(--transition);
}

.mobile-navigation-toggle[aria-expanded="true"] span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}

.mobile-navigation-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.mobile-navigation-toggle[aria-expanded="true"] span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =========================================================
   MOBILE NAVIGATION PANEL
   ========================================================= */

.mobile-navigation {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;

    border-top:
        1px solid var(--border-dark);

    background: var(--navy);

    box-shadow: var(--shadow-lg);
}

.mobile-navigation__inner {
    width: min(
        calc(100% - 40px),
        720px
    );

    margin-inline: auto;
    padding: 1.35rem 0 1.75rem;
}

.mobile-navigation nav {
    display: grid;
}

.mobile-navigation nav a {
    min-height: 58px;

    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 0.75rem;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.1);

    color: var(--white);

    font-size: 1rem;
    font-weight: 800;
}

.mobile-navigation nav a span {
    color: var(--yellow);

    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.mobile-navigation nav a:hover {
    color: var(--yellow);
}

.mobile-navigation__contact {
    margin: 1.5rem 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    color: var(--white);
}

.mobile-navigation__contact p {
    color: rgba(255, 255, 255, 0.65);

    font-size: 0.78rem;
}

.mobile-navigation__contact a {
    color: var(--yellow);

    font-size: 0.9rem;
    font-weight: 900;
}


/* =========================================================
   GENERIC PREMIUM SURFACES
   ========================================================= */

.surface-light {
    background: var(--white);
}

.surface-steel {
    background: var(--steel-50);
}

.surface-blue {
    background: var(--blue-soft);
}

.surface-dark {
    background: var(--navy);
    color: var(--white);
}

.surface-dark h1,
.surface-dark h2,
.surface-dark h3,
.surface-dark h4 {
    color: var(--white);
}

.surface-dark p {
    color: rgba(255, 255, 255, 0.72);
}


/* =========================================================
   GENERIC CARD
   ========================================================= */

.card {
    border:
        1px solid var(--border);

    border-radius:
        var(--radius-md);

    background:
        var(--white);

    box-shadow:
        var(--shadow-sm);
}


/* =========================================================
   SITE FOOTER
   ========================================================= */

.site-footer {
    position: relative;

    overflow: hidden;

    padding:
        clamp(4.5rem, 7vw, 7rem)
        0
        0;

    background:
        var(--navy);

    color:
        var(--white);
}

.site-footer::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--yellow) 0 18%,
            var(--blue-bright) 18% 54%,
            transparent 54% 100%
        );
}

.site-footer__grid {
    display: grid;
    grid-template-columns:
        minmax(280px, 1.5fr)
        repeat(3, minmax(170px, 0.75fr));

    gap:
        clamp(2.5rem, 5vw, 5rem);
}

.site-footer__brand {
    max-width: 430px;
}

.site-footer__logo {
    width: fit-content;

    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.site-footer__logo > span {
    color: var(--white);

    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1;

    letter-spacing: -0.04em;
}

.site-footer__logo strong {
    color: var(--yellow);
}

.site-footer__logo small {
    color:
        rgba(255, 255, 255, 0.58);

    font-size: 0.65rem;
    font-weight: 850;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.site-footer__tagline {
    margin-top: 1.75rem;

    color: var(--white);

    font-size: 1.06rem;
    font-weight: 800;
}

.site-footer__copy {
    max-width: 390px;

    margin-top: 0.75rem;

    color:
        rgba(255, 255, 255, 0.64);

    font-size: 0.9rem;
    line-height: 1.7;
}

.site-footer__heading {
    margin-bottom: 1.15rem;

    color: var(--yellow);

    font-size: 0.69rem;
    font-weight: 900;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.site-footer__group nav {
    display: grid;
    gap: 0.72rem;
}

.site-footer__group a {
    width: fit-content;

    color:
        rgba(255, 255, 255, 0.78);

    font-size: 0.88rem;
    font-weight: 650;

    transition:
        color var(--transition-fast);
}

.site-footer__group a:hover {
    color: var(--white);
}

.site-footer__contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.site-footer__contact p:not(.site-footer__heading) {
    margin-top: 1.25rem;

    color:
        rgba(255, 255, 255, 0.7);

    font-size: 0.86rem;
    line-height: 1.55;
}

.site-footer__contact .site-footer__phone {
    margin-bottom: 0.3rem;

    color: var(--white);

    font-size: 1.3rem;
    font-weight: 900;
}

.site-footer__contact .site-footer__phone:hover {
    color: var(--yellow);
}

.site-footer__fine-print {
    max-width: 260px;

    color:
        rgba(255, 255, 255, 0.54) !important;
}

.site-footer__bottom {
    margin-top:
        clamp(3.5rem, 6vw, 6rem);

    min-height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    border-top:
        1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__bottom p {
    color:
        rgba(255, 255, 255, 0.52);

    font-size: 0.74rem;
    font-weight: 600;
}


/* =========================================================
   RESPONSIVE — LARGE TABLET
   ========================================================= */

@media (max-width: 1180px) {

    .navigation-bar__inner {
        grid-template-columns:
            minmax(210px, 1fr)
            auto;

        gap: 1.5rem;
    }

    .desktop-navigation {
        display: none;
    }

    .mobile-navigation-toggle {
        display: flex;
    }

    .navigation-phone {
        display: none;
    }

    .site-footer__grid {
        grid-template-columns:
            minmax(260px, 1.25fr)
            repeat(2, 1fr);
    }

    .site-footer__contact {
        grid-column: 2 / -1;
    }
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 820px) {

    :root {
        --header-height: 82px;
    }

    .site-shell,
    .content-shell {
        width:
            min(
                calc(100% - 40px),
                var(--site-width)
            );
    }

    .utility-bar__links span,
    .utility-bar__links a:first-child {
        display: none;
    }

    .navigation-actions .button--header {
        display: none;
    }

    .site-footer__grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }

    .site-footer__contact {
        grid-column: auto;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .site-shell,
    .content-shell {
        width:
            calc(100% - 32px);
    }

    .utility-bar {
        display: none;
    }

    .navigation-bar__inner {
        min-height: 74px;
    }

    .site-brand__name {
        font-size: 1.08rem;
    }

    .site-brand__descriptor {
        font-size: 0.57rem;
    }

    .mobile-navigation-toggle {
        width: 42px;
        height: 42px;
    }

    .mobile-navigation__inner {
        width:
            calc(100% - 32px);
    }

    .mobile-navigation__contact {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .button {
        min-height: 50px;

        font-size: 0.8rem;
    }

    .site-footer {
        padding-top: 4rem;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 2.75rem;
    }

    .site-footer__brand,
    .site-footer__contact {
        grid-column: auto;
    }

    .site-footer__bottom {
        min-height: 100px;

        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        gap: 0.35rem;

        padding:
            1.5rem 0;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
    }
}
/* =========================================================
   WASH & BEHOLD PREMIUM - HOMEPAGE
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.premium-hero {
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #edf3f7 100%
        );
}

.premium-hero__grid {
    min-height:
        clamp(720px, 76vh, 920px);

    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(560px, 1.1fr);

    align-items: stretch;
}

.premium-hero__content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding:
        clamp(5rem, 8vw, 8rem)
        clamp(3rem, 6vw, 7rem)
        clamp(5rem, 8vw, 8rem)
        0;
}

.premium-hero__content h1 {
    max-width: 760px;

    margin-top: 1.5rem;

    font-size:
        clamp(4rem, 6.8vw, 7.8rem);

    line-height: 0.9;
}

.premium-hero__content h1 span {
    display: block;

    color: var(--blue);
}

.premium-hero__lead {
    max-width: 700px;

    margin-top: 2rem;

    color: #42576a;

    font-size:
        clamp(1.08rem, 1.5vw, 1.32rem);

    line-height: 1.7;
}

.premium-hero__actions {
    margin-top: 2.4rem;

    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.premium-hero__proof {
    width: 100%;
    max-width: 760px;

    margin-top:
        clamp(3rem, 5vw, 5rem);

    display: grid;
    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid var(--border);
}

.premium-hero__proof > div {
    min-height: 108px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        1.25rem
        1.3rem;

    border-right:
        1px solid var(--border);
}

.premium-hero__proof > div:first-child {
    padding-left: 0;
}

.premium-hero__proof > div:last-child {
    border-right: 0;
}

.premium-hero__proof strong {
    color: var(--navy);

    font-size: 1.8rem;
    font-weight: 950;
    line-height: 1;
}

.premium-hero__proof span {
    margin-top: 0.4rem;

    color: var(--muted);

    font-size: 0.78rem;
    font-weight: 750;
}

.premium-hero__visual {
    min-width: 0;

    display: flex;
    align-items: stretch;
}

.premium-hero__image-frame {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: var(--steel-200);
}

.premium-hero__image-frame > img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.premium-hero__image-frame::before {
    content: "";

    position: absolute;
    z-index: 1;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(7, 24, 39, 0.12),
            transparent 28%
        );
}

.premium-hero__status {
    position: absolute;
    z-index: 2;
    top: 2rem;
    right: 2rem;

    min-width: 190px;

    padding:
        1rem
        1.15rem;

    border-radius:
        var(--radius-sm);

    background:
        var(--yellow);

    box-shadow:
        var(--shadow-md);
}

.premium-hero__status span,
.premium-hero__crew-card small {
    display: block;

    color: rgba(11, 20, 32, 0.72);

    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.premium-hero__status strong {
    display: block;

    margin-top: 0.18rem;

    color: var(--ink);

    font-size: 0.92rem;
    font-weight: 950;
}

.premium-hero__crew-card {
    position: absolute;
    z-index: 2;
    right: 2rem;
    bottom: 2rem;

    width: min(310px, calc(100% - 4rem));

    padding:
        1.15rem
        1.25rem;

    border:
        1px solid rgba(255, 255, 255, 0.52);

    border-radius:
        var(--radius-md);

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        var(--shadow-md);

    backdrop-filter:
        blur(14px);
}

.premium-hero__crew-card strong {
    display: block;

    margin-top: 0.3rem;

    color: var(--navy);

    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1.25;
}


/* =========================================================
   TRUST STRIP
   ========================================================= */

.premium-trust {
    border-top:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

    background:
        var(--white);
}

.premium-trust__grid {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
}

.premium-trust__item {
    min-height: 128px;

    display: grid;
    grid-template-columns:
        42px 1fr;
    align-items: center;
    gap: 1rem;

    padding:
        1.8rem
        1.7rem;

    border-right:
        1px solid var(--border);
}

.premium-trust__item:first-child {
    padding-left: 0;
}

.premium-trust__item:last-child {
    border-right: 0;
}

.premium-trust__item > span {
    color: var(--blue);

    font-size: 1.18rem;
    font-weight: 950;
}

.premium-trust__item strong {
    display: block;

    color: var(--ink);

    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1.3;
}

.premium-trust__item p {
    margin-top: 0.25rem;

    color: var(--muted);

    font-size: 0.78rem;
    line-height: 1.45;
}


/* =========================================================
   SHARED PREMIUM SECTION HEADINGS
   ========================================================= */

.premium-section-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(280px, 0.55fr);

    align-items: end;
    gap:
        clamp(3rem, 7vw, 8rem);
}

.premium-section-heading h2 {
    max-width: 900px;

    margin-top: 1.4rem;
}

.premium-section-heading h2 span,
.membership-preview__header h2 span,
.premium-crew__content h2 span,
.protection-feature__content h2 span,
.premium-coverage__content h2 span,
.premium-results__content h2 span,
.premium-final-cta__panel h2 span {
    color: var(--blue);
}

.premium-section-heading__aside {
    padding-bottom: 0.4rem;
}

.premium-section-heading__aside p {
    font-size: 1rem;
    line-height: 1.75;
}

.premium-section-heading__aside a {
    margin-top: 1.2rem;

    display: inline-flex;
    align-items: center;
    gap: 0.6rem;

    color: var(--navy);

    font-size: 0.83rem;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.055em;
}

.premium-section-heading__aside a span {
    color: var(--blue);

    font-size: 1.15rem;
}


/* =========================================================
   PREMIUM SERVICES
   ========================================================= */

.premium-services {
    padding:
        clamp(6rem, 10vw, 10rem)
        0;

    background: var(--white);
}

.premium-services__grid {
    margin-top:
        clamp(3.5rem, 6vw, 6rem);

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 1.5rem;
}

.premium-service-card {
    min-width: 0;

    display: grid;
    grid-template-columns:
        minmax(230px, 0.8fr)
        minmax(0, 1.2fr);

    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-lg);

    background:
        var(--steel-50);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.premium-service-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(13, 79, 131, 0.28);

    box-shadow:
        var(--shadow-md);
}

.premium-service-card__image {
    position: relative;

    min-height: 390px;

    overflow: hidden;

    background:
        var(--steel-200);
}

.premium-service-card__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 500ms ease;
}

.premium-service-card:hover .premium-service-card__image img {
    transform:
        scale(1.035);
}

.premium-service-card__number {
    position: absolute;
    top: 1.1rem;
    left: 1.1rem;

    min-width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.94);

    color: var(--navy);

    font-size: 0.76rem;
    font-weight: 950;

    box-shadow:
        var(--shadow-sm);
}

.premium-service-card__body {
    display: flex;
    flex-direction: column;

    padding:
        clamp(2rem, 3vw, 3.2rem);
}

.premium-service-card__eyebrow,
.membership-plan__eyebrow {
    color: var(--blue);

    font-size: 0.67rem;
    font-weight: 900;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.premium-service-card__body h3 {
    margin-top: 0.6rem;

    font-size:
        clamp(1.8rem, 2.4vw, 2.55rem);
}

.premium-service-card__body > p:not(.premium-service-card__eyebrow) {
    margin-top: 1.15rem;

    color: #536577;

    font-size: 0.9rem;
    line-height: 1.65;
}

.premium-service-card__body ul {
    margin-top: 1.5rem;

    display: grid;
    gap: 0.55rem;

    list-style: none;
}

.premium-service-card__body li {
    position: relative;

    padding-left: 1.1rem;

    color: var(--ink-soft);

    font-size: 0.8rem;
    font-weight: 700;
}

.premium-service-card__body li::before {
    content: "";

    position: absolute;
    top: 0.65em;
    left: 0;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--yellow);
}

.premium-service-card__body > a {
    margin-top: auto;
    padding-top: 1.8rem;

    display: inline-flex;
    align-items: center;
    gap: 0.6rem;

    color: var(--navy);

    font-size: 0.77rem;
    font-weight: 900;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.premium-service-card__body > a span {
    color: var(--blue);

    font-size: 1.1rem;
}

.premium-service-card--membership {
    background:
        var(--blue-soft);
}


/* =========================================================
   RESULTS
   ========================================================= */

.premium-results {
    padding:
        clamp(6rem, 9vw, 9rem)
        0;
}

.premium-results .section-label {
    color: var(--yellow);
}

.premium-results__layout {
    display: grid;
    grid-template-columns:
        minmax(320px, 0.72fr)
        minmax(0, 1.28fr);

    align-items: center;

    gap:
        clamp(4rem, 8vw, 9rem);
}

.premium-results__content h2 {
    margin-top: 1.4rem;
}

.premium-results__content h2 span {
    display: block;

    color:
        #73b6e3;
}

.premium-results__content > p:not(.section-label) {
    max-width: 560px;

    margin-top: 1.6rem;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 1rem;
    line-height: 1.75;
}

.premium-results__stats {
    margin:
        2.4rem
        0;

    display: grid;
    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid var(--border-dark);

    border-bottom:
        1px solid var(--border-dark);
}

.premium-results__stats > div {
    min-height: 90px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        1rem
        1.1rem;

    border-right:
        1px solid var(--border-dark);
}

.premium-results__stats > div:first-child {
    padding-left: 0;
}

.premium-results__stats > div:last-child {
    border-right: 0;
}

.premium-results__stats strong {
    color: var(--white);

    font-size: 0.92rem;
    font-weight: 900;
}

.premium-results__stats span {
    margin-top: 0.2rem;

    color:
        rgba(255, 255, 255, 0.48);

    font-size: 0.68rem;
}

.premium-comparison {
    min-width: 0;
}

.premium-comparison__frame {
    --premium-comparison-position: 50%;

    position: relative;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius:
        var(--radius-lg);

    background:
        #142b3d;

    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.34);
}

.premium-comparison__frame > img,
.premium-comparison__after img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.premium-comparison__after {
    position: absolute;
    inset:
        0
        0
        0
        auto;

    width:
        calc(
            100% - var(--premium-comparison-position)
        );

    overflow: hidden;
}

.premium-comparison__after img {
    right: 0;
    left: auto;

    width:
        calc(
            100% /
            (
                (
                    100 -
                    (
                        var(--premium-comparison-position)
                    )
                ) /
                100
            )
        );

    min-width: 100%;
}

.premium-comparison__handle {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left:
        var(--premium-comparison-position);

    width: 3px;

    transform:
        translateX(-50%);

    background:
        var(--white);

    pointer-events: none;
}

.premium-comparison__handle::after {
    content: "↔";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    transform:
        translate(-50%, -50%);

    border:
        4px solid var(--white);

    border-radius: 50%;

    background:
        var(--yellow);

    color: var(--ink);

    font-size: 1.2rem;
    font-weight: 950;

    box-shadow:
        var(--shadow-md);
}

.premium-comparison__label {
    position: absolute;
    z-index: 5;
    top: 1.1rem;

    padding:
        0.5rem
        0.7rem;

    border-radius:
        var(--radius-pill);

    background:
        rgba(7, 24, 39, 0.78);

    color:
        var(--white);

    font-size: 0.66rem;
    font-weight: 900;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    pointer-events: none;
}

.premium-comparison__label--before {
    left: 1.1rem;
}

.premium-comparison__label--after {
    right: 1.1rem;
}

.premium-comparison__range {
    position: absolute;
    z-index: 6;
    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;

    opacity: 0;

    cursor: ew-resize;
}


/* =========================================================
   CREW
   ========================================================= */

.premium-crew {
    padding:
        clamp(6rem, 10vw, 10rem)
        0;

    background:
        var(--white);
}

.premium-crew__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(420px, 0.92fr);

    align-items: center;

    gap:
        clamp(4rem, 8vw, 9rem);
}

.premium-crew__visual {
    position: relative;

    min-height: 720px;

    overflow: hidden;

    border-radius:
        var(--radius-lg);

    background:
        var(--steel-200);
}

.premium-crew__visual > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.premium-crew__badge {
    position: absolute;
    right: 1.6rem;
    bottom: 1.6rem;

    width:
        min(290px, calc(100% - 3.2rem));

    padding:
        1.1rem
        1.2rem;

    border-radius:
        var(--radius-md);

    background:
        var(--yellow);

    box-shadow:
        var(--shadow-md);
}

.premium-crew__badge span {
    display: block;

    color:
        rgba(11, 20, 32, 0.65);

    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.premium-crew__badge strong {
    display: block;

    margin-top: 0.25rem;

    color: var(--ink);

    font-size: 1rem;
    font-weight: 950;
}

.premium-crew__content h2 {
    max-width: 760px;

    margin-top: 1.35rem;
}

.premium-crew__content h2 span {
    display: block;
}

.premium-crew__lead {
    margin-top: 1.8rem;

    color: var(--ink);

    font-size:
        clamp(1.08rem, 1.4vw, 1.25rem);

    font-weight: 800;
    line-height: 1.55;
}

.premium-crew__content > p:not(.section-label):not(.premium-crew__lead) {
    margin-top: 1rem;

    color: #566879;

    line-height: 1.75;
}

.premium-crew__facts {
    margin:
        2.5rem
        0;

    border-top:
        2px solid var(--ink);
}

.premium-crew__facts > div {
    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    border-bottom:
        1px solid var(--border);
}

.premium-crew__facts dt {
    color: var(--ink);

    font-size: 0.82rem;
    font-weight: 800;
}

.premium-crew__facts dd {
    color: var(--blue);

    font-size: 0.82rem;
    font-weight: 900;

    text-align: right;
}


/* =========================================================
   MEMBERSHIP PREVIEW
   ========================================================= */

.membership-preview {
    padding:
        clamp(6rem, 9vw, 9rem)
        0;
}

.membership-preview__header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, 0.55fr);

    align-items: end;
    gap:
        clamp(3rem, 7vw, 8rem);
}

.membership-preview__header h2 {
    margin-top: 1.4rem;
}

.membership-preview__header > p {
    padding-bottom: 0.5rem;

    font-size: 1rem;
    line-height: 1.75;
}

.membership-preview__plans {
    margin-top:
        clamp(3.5rem, 6vw, 5.5rem);

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1.25rem;
}

.membership-plan {
    position: relative;

    min-height: 470px;

    display: flex;
    flex-direction: column;

    padding:
        clamp(2rem, 3vw, 3rem);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-lg);

    background:
        var(--white);

    box-shadow:
        var(--shadow-sm);
}

.membership-plan--featured {
    border-color:
        rgba(13, 79, 131, 0.32);

    background:
        var(--navy);

    color:
        var(--white);

    transform:
        translateY(-14px);

    box-shadow:
        var(--shadow-md);
}

.membership-plan--featured h3,
.membership-plan--featured p,
.membership-plan--featured li,
.membership-plan--featured a {
    color: var(--white);
}

.membership-plan--featured .membership-plan__eyebrow {
    color: var(--yellow);
}

.membership-plan__badge {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;

    padding:
        0.45rem
        0.65rem;

    border-radius:
        var(--radius-pill);

    background:
        var(--yellow);

    color:
        var(--ink);

    font-size: 0.58rem;
    font-weight: 950;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.membership-plan h3 {
    margin-top: 0.75rem;

    font-size:
        clamp(1.75rem, 2.3vw, 2.5rem);
}

.membership-plan div > p:not(.membership-plan__eyebrow) {
    margin-top: 1.15rem;

    color: #596a79;

    font-size: 0.9rem;
    line-height: 1.7;
}

.membership-plan--featured div > p:not(.membership-plan__eyebrow) {
    color:
        rgba(255, 255, 255, 0.68);
}

.membership-plan ul {
    margin-top: 2rem;

    display: grid;
    gap: 0.7rem;

    list-style: none;
}

.membership-plan li {
    padding-bottom: 0.65rem;

    border-bottom:
        1px solid var(--border);

    color: var(--ink-soft);

    font-size: 0.82rem;
    font-weight: 700;
}

.membership-plan--featured li {
    border-color:
        var(--border-dark);
}

.membership-plan > a {
    margin-top: auto;
    padding-top: 2rem;

    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    color: var(--navy);

    font-size: 0.77rem;
    font-weight: 900;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* =========================================================
   PROTECTION FEATURE
   ========================================================= */

.protection-feature {
    padding:
        clamp(6rem, 10vw, 10rem)
        0;

    background:
        var(--white);
}

.protection-feature__grid {
    display: grid;
    grid-template-columns:
        minmax(420px, 0.85fr)
        minmax(0, 1.15fr);

    align-items: center;

    gap:
        clamp(4rem, 8vw, 9rem);
}

.protection-feature__content h2 {
    margin-top: 1.4rem;
}

.protection-feature__content h2 span {
    display: block;
}

.protection-feature__content > p:not(.section-label) {
    max-width: 620px;

    margin-top: 1.6rem;

    color: #566879;

    line-height: 1.75;
}

.protection-feature__list {
    margin:
        2.4rem
        0;

    display: grid;
}

.protection-feature__list > div {
    min-height: 84px;

    display: grid;
    grid-template-columns:
        44px
        1fr;

    align-items: center;
    gap: 1rem;

    border-top:
        1px solid var(--border);
}

.protection-feature__list > div:last-child {
    border-bottom:
        1px solid var(--border);
}

.protection-feature__list > div > span {
    color: var(--blue);

    font-size: 0.75rem;
    font-weight: 950;
}

.protection-feature__list strong {
    display: block;

    color: var(--ink);

    font-size: 0.9rem;
    font-weight: 900;
}

.protection-feature__list p {
    margin-top: 0.15rem;

    color: var(--muted);

    font-size: 0.78rem;
}

.protection-feature__visual {
    position: relative;

    min-height: 720px;

    overflow: hidden;

    border-radius:
        var(--radius-lg);

    background:
        var(--steel-200);
}

.protection-feature__visual > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.protection-feature__floating-card {
    position: absolute;
    right: 1.6rem;
    bottom: 1.6rem;

    padding:
        1rem
        1.15rem;

    border-radius:
        var(--radius-md);

    background:
        var(--white);

    box-shadow:
        var(--shadow-md);
}

.protection-feature__floating-card small {
    display: block;

    color: var(--muted);

    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.protection-feature__floating-card strong {
    display: block;

    margin-top: 0.25rem;

    color: var(--navy);

    font-size: 0.98rem;
    font-weight: 950;
}


/* =========================================================
   COVERAGE
   ========================================================= */

.premium-coverage {
    padding:
        clamp(6rem, 9vw, 9rem)
        0;
}

.premium-coverage .section-label {
    color: var(--yellow);
}

.premium-coverage__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(390px, 0.85fr);

    align-items: center;

    gap:
        clamp(4rem, 8vw, 9rem);
}

.premium-coverage__visual {
    min-height: 580px;

    overflow: hidden;

    border-radius:
        var(--radius-lg);

    background:
        #18364d;
}

.premium-coverage__visual img {
    width: 100%;
    height: 100%;

    min-height: 580px;

    object-fit: cover;
}

.premium-coverage__content h2 {
    margin-top: 1.4rem;
}

.premium-coverage__content h2 span {
    display: block;

    color:
        #73b6e3;
}

.premium-coverage__content > p:not(.section-label) {
    margin-top: 1.5rem;

    color:
        rgba(255, 255, 255, 0.7);

    line-height: 1.75;
}

.premium-coverage__points {
    margin:
        2.4rem
        0;

    display: grid;
}

.premium-coverage__points > div {
    padding:
        1rem
        0;

    border-top:
        1px solid var(--border-dark);
}

.premium-coverage__points > div:last-child {
    border-bottom:
        1px solid var(--border-dark);
}

.premium-coverage__points strong {
    display: block;

    color: var(--white);

    font-size: 0.86rem;
    font-weight: 900;
}

.premium-coverage__points span {
    display: block;

    margin-top: 0.2rem;

    color:
        rgba(255, 255, 255, 0.5);

    font-size: 0.76rem;
}


/* =========================================================
   REVIEWS
   ========================================================= */

.premium-reviews {
    padding:
        clamp(6rem, 10vw, 10rem)
        0;

    background:
        var(--white);
}

.premium-reviews__header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, 0.55fr);

    align-items: end;

    gap:
        clamp(3rem, 7vw, 8rem);
}

.premium-reviews__header h2 {
    margin-top: 1.35rem;
}

.premium-reviews__header > p {
    padding-bottom: 0.35rem;

    line-height: 1.75;
}

.premium-reviews__grid {
    margin-top:
        clamp(3.5rem, 6vw, 5.5rem);

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1.25rem;
}

.premium-review {
    min-height: 370px;

    display: flex;
    flex-direction: column;

    padding:
        clamp(2rem, 3vw, 3rem);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-lg);

    background:
        var(--steel-50);
}

.premium-review--featured {
    background:
        var(--blue-soft);
}

.premium-review__stars {
    color: var(--yellow-deep);

    font-size: 1rem;
    letter-spacing: 0.12em;
}

.premium-review blockquote {
    margin-top: 2rem;

    color: var(--ink);

    font-size:
        clamp(1.2rem, 1.7vw, 1.55rem);

    font-weight: 800;
    line-height: 1.45;

    letter-spacing: -0.025em;
}

.premium-review footer {
    margin-top: auto;
    padding-top: 2rem;

    border-top:
        1px solid var(--border);
}

.premium-review footer strong {
    display: block;

    color: var(--navy);

    font-size: 0.85rem;
    font-weight: 900;
}

.premium-review footer span {
    display: block;

    margin-top: 0.2rem;

    color: var(--muted);

    font-size: 0.72rem;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.premium-final-cta {
    padding:
        0
        0
        clamp(5rem, 8vw, 8rem);

    background:
        var(--white);
}

.premium-final-cta__panel {
    display: grid;
    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(300px, 0.7fr);

    align-items: end;

    gap:
        clamp(3rem, 7vw, 8rem);

    padding:
        clamp(3rem, 6vw, 6rem);

    border-radius:
        var(--radius-lg);

    background:
        var(--blue-soft);
}

.premium-final-cta__panel h2 {
    max-width: 900px;

    margin-top: 1.4rem;
}

.premium-final-cta__panel h2 span {
    display: block;
}

.premium-final-cta__action p {
    margin-bottom: 1.5rem;

    color: #536779;

    line-height: 1.75;
}


/* =========================================================
   RESPONSIVE — HOMEPAGE
   ========================================================= */

@media (max-width: 1240px) {

    .premium-hero__grid {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(480px, 1.1fr);
    }

    .premium-service-card {
        grid-template-columns: 1fr;
    }

    .premium-service-card__image {
        min-height: 310px;
    }

    .premium-crew__visual,
    .protection-feature__visual {
        min-height: 620px;
    }
}


@media (max-width: 1020px) {

    .premium-hero__grid {
        min-height: 0;

        grid-template-columns: 1fr;
    }

    .premium-hero__content {
        padding:
            5rem
            0;
    }

    .premium-hero__visual {
        min-height: 680px;
    }

    .premium-trust__grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .premium-trust__item:nth-child(2) {
        border-right: 0;
    }

    .premium-trust__item:nth-child(-n + 2) {
        border-bottom:
            1px solid var(--border);
    }

    .premium-trust__item:first-child,
    .premium-trust__item:nth-child(3) {
        padding-left: 0;
    }

    .premium-section-heading,
    .membership-preview__header,
    .premium-reviews__header,
    .premium-final-cta__panel {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .premium-services__grid {
        grid-template-columns: 1fr;
    }

    .premium-service-card {
        grid-template-columns:
            minmax(280px, 0.85fr)
            minmax(0, 1.15fr);
    }

    .premium-results__layout,
    .premium-crew__grid,
    .protection-feature__grid,
    .premium-coverage__grid {
        grid-template-columns: 1fr;
    }

    .premium-results__content {
        max-width: 720px;
    }

    .premium-comparison {
        max-width: 900px;
    }

    .premium-crew__visual,
    .protection-feature__visual {
        min-height: 720px;
    }

    .premium-crew__content,
    .protection-feature__content,
    .premium-coverage__content {
        max-width: 780px;
    }

    .membership-preview__plans,
    .premium-reviews__grid {
        grid-template-columns: 1fr;
    }

    .membership-plan {
        min-height: 0;
    }

    .membership-plan--featured {
        transform: none;
    }

    .premium-coverage__visual,
    .premium-coverage__visual img {
        min-height: 620px;
    }
}


@media (max-width: 700px) {

    .premium-hero__content {
        padding:
            4rem
            0;
    }

    .premium-hero__content h1 {
        font-size:
            clamp(3.3rem, 15vw, 5rem);
    }

    .premium-hero__actions {
        width: 100%;

        display: grid;
    }

    .premium-hero__actions .button {
        width: 100%;
    }

    .premium-hero__proof {
        grid-template-columns: 1fr;

        margin-top: 3rem;
    }

    .premium-hero__proof > div {
        min-height: 74px;

        padding:
            1rem
            0;

        border-right: 0;
        border-bottom:
            1px solid var(--border);
    }

    .premium-hero__proof > div:last-child {
        border-bottom: 0;
    }

    .premium-hero__visual {
        min-height: 560px;
    }

    .premium-hero__status {
        top: 1rem;
        right: 1rem;
    }

    .premium-hero__crew-card {
        right: 1rem;
        bottom: 1rem;

        width:
            calc(100% - 2rem);
    }

    .premium-trust__grid {
        grid-template-columns: 1fr;
    }

    .premium-trust__item {
        min-height: 100px;

        padding:
            1.4rem
            0;

        border-right: 0;
        border-bottom:
            1px solid var(--border);
    }

    .premium-trust__item:last-child {
        border-bottom: 0;
    }

    .premium-service-card {
        grid-template-columns: 1fr;
    }

    .premium-service-card__image {
        min-height: 340px;
    }

    .premium-results__stats {
        grid-template-columns: 1fr;
    }

    .premium-results__stats > div {
        min-height: 68px;

        padding:
            0.8rem
            0;

        border-right: 0;
        border-bottom:
            1px solid var(--border-dark);
    }

    .premium-results__stats > div:last-child {
        border-bottom: 0;
    }

    .premium-crew__visual,
    .protection-feature__visual {
        min-height: 520px;
    }

    .premium-crew__facts > div {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 0.25rem;

        padding:
            0.9rem
            0;
    }

    .premium-crew__facts dd {
        text-align: left;
    }

    .membership-plan,
    .premium-review {
        padding: 2rem;
    }

    .premium-coverage__visual,
    .premium-coverage__visual img {
        min-height: 420px;
    }

    .premium-final-cta__panel {
        padding:
            2.25rem
            1.5rem;
    }

    .premium-final-cta__action .button {
        width: 100%;
    }
}


@media (max-width: 440px) {

    .premium-hero__visual {
        min-height: 500px;
    }

    .premium-hero__status {
        min-width: 0;

        padding:
            0.8rem
            0.9rem;
    }

    .premium-service-card__image {
        min-height: 280px;
    }

    .premium-crew__visual,
    .protection-feature__visual {
        min-height: 440px;
    }

    .premium-crew__badge,
    .protection-feature__floating-card {
        right: 1rem;
        bottom: 1rem;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - HERO PROPORTION FIX
   ========================================================= */

.premium-hero__grid {
    min-height:
        clamp(650px, 70vh, 780px);

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(520px, 0.95fr);
}

.premium-hero__content {
    padding:
        clamp(4rem, 6vw, 6rem)
        clamp(2.5rem, 4vw, 4.5rem)
        clamp(4rem, 6vw, 6rem)
        0;
}

.premium-hero__content h1 {
    max-width: 720px;

    font-size:
        clamp(3.8rem, 5.4vw, 6.2rem);

    line-height: 0.92;
}

.premium-hero__lead {
    max-width: 650px;

    margin-top: 1.6rem;
}

.premium-hero__actions {
    margin-top: 2rem;
}

.premium-hero__proof {
    margin-top:
        clamp(2.5rem, 4vw, 3.75rem);
}

.premium-hero__proof > div {
    min-height: 92px;
}


/* Keep the hero balanced on medium desktop widths */
@media (max-width: 1360px) {

    .premium-hero__grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(500px, 1fr);
    }

    .premium-hero__content h1 {
        font-size:
            clamp(3.6rem, 5vw, 5.6rem);
    }
}


/* Preserve the stacked tablet/mobile layout */
@media (max-width: 1020px) {

    .premium-hero__grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .premium-hero__content {
        padding:
            4.5rem
            0;
    }

    .premium-hero__content h1 {
        max-width: 760px;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - FULL BLEED HERO
   ========================================================= */

.premium-hero--fullbleed {
    position: relative;

    min-height:
        clamp(700px, 82vh, 900px);

    overflow: hidden;

    background:
        var(--navy);

    color:
        var(--white);
}


/* ---------------------------------------------------------
   FULL-BLEED MEDIA
   --------------------------------------------------------- */

.premium-hero--fullbleed .premium-hero__media {
    position: absolute;
    inset: 0;

    z-index: 0;
}

.premium-hero--fullbleed .premium-hero__background {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter:
        saturate(0.96)
        contrast(1.04);
}

.premium-hero--fullbleed .premium-hero__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 18, 30, 0.96) 0%,
            rgba(5, 18, 30, 0.88) 32%,
            rgba(5, 18, 30, 0.58) 58%,
            rgba(5, 18, 30, 0.20) 82%,
            rgba(5, 18, 30, 0.10) 100%
        ),
        linear-gradient(
            0deg,
            rgba(5, 18, 30, 0.88) 0%,
            rgba(5, 18, 30, 0.18) 35%,
            rgba(5, 18, 30, 0.10) 100%
        );
}


/* ---------------------------------------------------------
   INNER LAYOUT
   --------------------------------------------------------- */

.premium-hero--fullbleed .premium-hero__inner {
    position: relative;
    z-index: 2;

    min-height:
        clamp(700px, 82vh, 900px);

    display: flex;
    align-items: center;

    padding:
        clamp(5rem, 8vw, 8rem)
        0
        clamp(9rem, 12vw, 11rem);
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.premium-hero--fullbleed .premium-hero__content {
    width: min(760px, 62%);

    display: block;

    padding: 0;
}

.premium-hero--fullbleed .section-label {
    color:
        rgba(255, 255, 255, 0.86);
}

.premium-hero--fullbleed .section-label::before {
    background:
        var(--yellow);
}

.premium-hero--fullbleed .premium-hero__content h1 {
    max-width: 760px;

    margin-top: 1.45rem;

    color:
        var(--white);

    font-size:
        clamp(4rem, 6.4vw, 7rem);

    line-height: 0.9;

    text-wrap: balance;
}

.premium-hero--fullbleed .premium-hero__content h1 span {
    display: block;

    color:
        #8cc5ec;
}

.premium-hero--fullbleed .premium-hero__lead {
    max-width: 650px;

    margin-top: 1.8rem;

    color:
        rgba(255, 255, 255, 0.82);

    font-size:
        clamp(1.02rem, 1.3vw, 1.22rem);

    font-weight: 500;
    line-height: 1.7;
}

.premium-hero--fullbleed .premium-hero__actions {
    margin-top: 2rem;

    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.button--hero-secondary {
    border:
        1px solid rgba(255, 255, 255, 0.48);

    background:
        rgba(255, 255, 255, 0.08);

    color:
        var(--white);

    backdrop-filter:
        blur(10px);
}

.button--hero-secondary:hover {
    border-color:
        rgba(255, 255, 255, 0.82);

    background:
        rgba(255, 255, 255, 0.16);
}


/* ---------------------------------------------------------
   CREW NOTE
   --------------------------------------------------------- */

.premium-hero__crew-note {
    margin-top: 2.1rem;

    display: flex;
    align-items: center;
    gap: 0.7rem;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 0.76rem;
    font-weight: 700;
}

.premium-hero__crew-note::before {
    content: "";

    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--success);

    box-shadow:
        0 0 0 5px rgba(29, 141, 95, 0.16);
}

.premium-hero__crew-note strong {
    color:
        var(--white);

    font-weight: 900;
}


/* ---------------------------------------------------------
   DISPATCH BADGE
   --------------------------------------------------------- */

.premium-hero--fullbleed .premium-hero__status {
    position: absolute;
    top:
        clamp(2rem, 4vw, 3.5rem);
    right: 0;

    min-width: 205px;

    padding:
        1rem
        1.2rem;

    border-radius:
        var(--radius-sm);

    background:
        var(--yellow);

    color:
        var(--ink);

    box-shadow:
        var(--shadow-md);
}

.premium-hero--fullbleed .premium-hero__status span {
    display: block;

    color:
        rgba(11, 20, 32, 0.66);

    font-size: 0.6rem;
    font-weight: 900;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.premium-hero--fullbleed .premium-hero__status strong {
    display: block;

    margin-top: 0.25rem;

    color:
        var(--ink);

    font-size: 1rem;
    font-weight: 950;
}


/* ---------------------------------------------------------
   HERO PROOF BAR
   --------------------------------------------------------- */

.premium-hero--fullbleed .premium-hero__proof {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    max-width: none;

    margin: 0;

    display: grid;
    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid rgba(255, 255, 255, 0.18);

    background:
        rgba(5, 18, 30, 0.72);

    backdrop-filter:
        blur(14px);
}

.premium-hero--fullbleed .premium-hero__proof > div {
    min-height: 112px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        1.3rem
        clamp(1.2rem, 3vw, 2.4rem);

    border-right:
        1px solid rgba(255, 255, 255, 0.16);
}

.premium-hero--fullbleed .premium-hero__proof > div:first-child {
    padding-left:
        clamp(1.2rem, 3vw, 2.4rem);
}

.premium-hero--fullbleed .premium-hero__proof > div:last-child {
    border-right: 0;
}

.premium-hero--fullbleed .premium-hero__proof strong {
    color:
        var(--white);

    font-size: 1.7rem;
    font-weight: 950;
    line-height: 1;
}

.premium-hero--fullbleed .premium-hero__proof span {
    margin-top: 0.35rem;

    color:
        rgba(255, 255, 255, 0.62);

    font-size: 0.75rem;
    font-weight: 750;
}


/* ---------------------------------------------------------
   REMOVE SPLIT-HERO ARTIFACTS
   --------------------------------------------------------- */

.premium-hero--fullbleed .premium-hero__grid,
.premium-hero--fullbleed .premium-hero__visual,
.premium-hero--fullbleed .premium-hero__image-frame,
.premium-hero--fullbleed .premium-hero__crew-card {
    display: none;
}


/* =========================================================
   FULL-BLEED HERO RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .premium-hero--fullbleed {
        min-height:
            760px;
    }

    .premium-hero--fullbleed .premium-hero__inner {
        min-height:
            760px;
    }

    .premium-hero--fullbleed .premium-hero__content {
        width: min(720px, 76%);
    }

    .premium-hero--fullbleed .premium-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5, 18, 30, 0.96) 0%,
                rgba(5, 18, 30, 0.84) 46%,
                rgba(5, 18, 30, 0.40) 75%,
                rgba(5, 18, 30, 0.18) 100%
            ),
            linear-gradient(
                0deg,
                rgba(5, 18, 30, 0.88) 0%,
                rgba(5, 18, 30, 0.16) 44%,
                rgba(5, 18, 30, 0.08) 100%
            );
    }
}


@media (max-width: 760px) {

    .premium-hero--fullbleed {
        min-height:
            760px;
    }

    .premium-hero--fullbleed .premium-hero__background {
        object-position:
            62% center;
    }

    .premium-hero--fullbleed .premium-hero__overlay {
        background:
            linear-gradient(
                0deg,
                rgba(5, 18, 30, 0.98) 0%,
                rgba(5, 18, 30, 0.90) 45%,
                rgba(5, 18, 30, 0.52) 78%,
                rgba(5, 18, 30, 0.24) 100%
            );
    }

    .premium-hero--fullbleed .premium-hero__inner {
        min-height:
            760px;

        align-items: flex-end;

        padding:
            5rem
            0
            10rem;
    }

    .premium-hero--fullbleed .premium-hero__content {
        width: 100%;
    }

    .premium-hero--fullbleed .premium-hero__content h1 {
        max-width: 620px;

        font-size:
            clamp(3.4rem, 14vw, 5.4rem);
    }

    .premium-hero--fullbleed .premium-hero__lead {
        max-width: 560px;
    }

    .premium-hero--fullbleed .premium-hero__status {
        top: 1.25rem;
        right: 0;

        min-width: 175px;
    }

    .premium-hero--fullbleed .premium-hero__proof {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .premium-hero--fullbleed .premium-hero__proof > div {
        min-height: 92px;

        padding:
            1rem;
    }
}


@media (max-width: 520px) {

    .premium-hero--fullbleed {
        min-height:
            820px;
    }

    .premium-hero--fullbleed .premium-hero__inner {
        min-height:
            820px;

        padding-bottom:
            13rem;
    }

    .premium-hero--fullbleed .premium-hero__actions {
        width: 100%;

        display: grid;
    }

    .premium-hero--fullbleed .premium-hero__actions .button {
        width: 100%;
    }

    .premium-hero__crew-note {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .premium-hero--fullbleed .premium-hero__proof {
        grid-template-columns: 1fr;
    }

    .premium-hero--fullbleed .premium-hero__proof > div {
        min-height: 62px;

        display: grid;
        grid-template-columns:
            42px 1fr;

        align-items: center;

        padding:
            0.75rem
            1rem;

        border-right: 0;
        border-bottom:
            1px solid rgba(255, 255, 255, 0.14);
    }

    .premium-hero--fullbleed .premium-hero__proof > div:last-child {
        border-bottom: 0;
    }

    .premium-hero--fullbleed .premium-hero__proof span {
        margin-top: 0;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - LOGO + HERO HEADLINE POLISH
   ========================================================= */

/* Header logo */
.site-brand--logo {
    display: flex;
    align-items: center;
}

.site-brand__logo-image {
    width: clamp(250px, 22vw, 320px);
    height: auto;
}

/* Give the second thought intentional breathing room */
.premium-hero--fullbleed .premium-hero__content h1 span {
    margin-top: 0.10em;
}

/* Keep the premium header from getting unnecessarily tall */
.navigation-bar__inner {
    min-height: 106px;
}


/* Tablet */
@media (max-width: 1180px) {

    .site-brand__logo-image {
        width: 260px;
    }

    .navigation-bar__inner {
        min-height: 96px;
    }
}


/* Mobile */
@media (max-width: 600px) {

    .site-brand__logo-image {
        width: 210px;
    }

    .navigation-bar__inner {
        min-height: 82px;
    }

    .premium-hero--fullbleed .premium-hero__content h1 span {
        margin-top: 0.12em;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - HERO SECOND LINE LOWER
   ========================================================= */

.premium-hero--fullbleed .premium-hero__content h1 span {
    margin-top: 0.18em;
}

@media (max-width: 600px) {
    .premium-hero--fullbleed .premium-hero__content h1 span {
        margin-top: 0.18em;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - EDITORIAL SERVICES EXPERIENCE
   ========================================================= */


/* =========================================================
   SECTION RESET
   ========================================================= */

.premium-services--editorial {
    padding: 0;

    overflow: hidden;

    background:
        #eef6fb;
}


/* =========================================================
   WATER MASTHEAD
   ========================================================= */

.premium-services__masthead {
    position: relative;

    overflow: hidden;

    padding:
        clamp(5.5rem, 8vw, 8rem)
        0
        clamp(4.5rem, 7vw, 7rem);

    background:
        radial-gradient(
            circle at 8% 76%,
            rgba(96, 190, 238, 0.22) 0 3%,
            transparent 3.2%
        ),
        radial-gradient(
            circle at 91% 18%,
            rgba(83, 174, 226, 0.18) 0 4%,
            transparent 4.2%
        ),
        linear-gradient(
            120deg,
            #f9fdff 0%,
            #e9f5fc 42%,
            #d7edf9 100%
        );
}

.premium-services__masthead::before {
    content: "";

    position: absolute;
    z-index: 0;
    inset: auto -8% -32% 42%;

    height: 86%;

    opacity: 0.58;

    border-radius:
        50% 40% 0 0;

    background:
        linear-gradient(
            125deg,
            transparent 0 10%,
            rgba(255, 255, 255, 0.76) 18%,
            rgba(73, 169, 222, 0.24) 28%,
            rgba(255, 255, 255, 0.68) 39%,
            rgba(38, 126, 184, 0.16) 52%,
            transparent 68%
        );

    transform:
        rotate(-7deg);

    pointer-events: none;
}

.premium-services__masthead::after {
    content: "";

    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;

    width: 48%;
    height: 100%;

    opacity: 0.55;

    background:
        repeating-linear-gradient(
            115deg,
            transparent 0 30px,
            rgba(255, 255, 255, 0.22) 30px 32px,
            transparent 32px 62px
        );

    pointer-events: none;
}

.premium-services__masthead-inner {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, 0.5fr);

    align-items: end;

    gap:
        clamp(3rem, 8vw, 9rem);
}

.premium-services__masthead-title h2 {
    max-width: 900px;

    margin-top: 1.35rem;

    font-size:
        clamp(3.2rem, 5.4vw, 6rem);

    line-height: 0.92;
}

.premium-services__masthead-title h2 span {
    display: block;

    color:
        var(--blue);
}

.premium-services__masthead-copy {
    position: relative;
    z-index: 3;

    padding-bottom: 0.3rem;
}

.premium-services__masthead-copy p {
    color:
        #355169;

    font-size:
        clamp(0.95rem, 1.2vw, 1.08rem);

    line-height: 1.72;
}

.premium-services__masthead-copy a {
    margin-top: 1.3rem;

    display: inline-flex;
    align-items: center;
    gap: 0.65rem;

    color:
        var(--navy);

    font-size: 0.78rem;
    font-weight: 950;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.premium-services__masthead-copy a span {
    color:
        var(--blue);

    font-size: 1.15rem;
}


/* =========================================================
   MASTHEAD BUBBLES + WATER ART
   ========================================================= */

.premium-services__water-art {
    position: absolute;
    z-index: 1;
    inset: 0;

    pointer-events: none;
}

.water-bubble {
    position: absolute;

    border:
        1px solid rgba(26, 122, 181, 0.3);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255, 255, 255, 0.95) 0 9%,
            rgba(255, 255, 255, 0.5) 10% 16%,
            rgba(105, 194, 239, 0.12) 40%,
            rgba(38, 139, 199, 0.08) 70%,
            rgba(255, 255, 255, 0.34) 100%
        );

    box-shadow:
        inset -10px -12px 20px rgba(49, 146, 202, 0.12),
        0 9px 22px rgba(33, 101, 141, 0.08);
}

.water-bubble--1 {
    width: 92px;
    height: 92px;

    left: 1.5%;
    bottom: -18px;
}

.water-bubble--2 {
    width: 34px;
    height: 34px;

    left: 11%;
    bottom: 30%;
}

.water-bubble--3 {
    width: 70px;
    height: 70px;

    right: 4%;
    top: 16%;
}

.water-bubble--4 {
    width: 26px;
    height: 26px;

    right: 13%;
    top: 9%;
}

.water-swoosh {
    position: absolute;

    border:
        2px solid rgba(67, 166, 221, 0.16);

    border-radius: 50%;
}

.water-swoosh--1 {
    width: 520px;
    height: 170px;

    right: -110px;
    bottom: -54px;

    transform:
        rotate(-13deg);
}

.water-swoosh--2 {
    width: 380px;
    height: 120px;

    right: -55px;
    bottom: -5px;

    transform:
        rotate(-9deg);
}


/* =========================================================
   FULL-WIDTH SERVICE BANDS
   ========================================================= */

.service-showcase {
    position: relative;

    min-height:
        clamp(470px, 34vw, 620px);

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    overflow: hidden;
}

.service-showcase__content,
.service-showcase__media {
    min-width: 0;
}


/* =========================================================
   DARK BANDS
   ========================================================= */

.service-showcase--dark {
    background:
        radial-gradient(
            circle at 8% 25%,
            rgba(18, 83, 127, 0.34),
            transparent 34%
        ),
        linear-gradient(
            120deg,
            #061827 0%,
            #08243a 58%,
            #0a2e4b 100%
        );
}

.service-showcase--dark::before {
    content: "";

    position: absolute;
    z-index: 0;
    inset: 0 50% 0 0;

    opacity: 0.28;

    background:
        repeating-linear-gradient(
            135deg,
            transparent 0 22px,
            rgba(84, 170, 222, 0.08) 22px 23px,
            transparent 23px 46px
        );

    pointer-events: none;
}

.service-showcase--dark::after {
    content: "";

    position: absolute;
    z-index: 0;
    left: -160px;
    bottom: -210px;

    width: 560px;
    height: 330px;

    border:
        2px solid rgba(65, 169, 226, 0.18);

    border-radius: 50%;

    box-shadow:
        0 0 0 45px rgba(48, 145, 200, 0.035),
        0 0 0 90px rgba(48, 145, 200, 0.025);

    transform:
        rotate(-13deg);

    pointer-events: none;
}


/* =========================================================
   LIGHT BANDS
   ========================================================= */

.service-showcase--light {
    background:
        linear-gradient(
            115deg,
            #ffffff 0%,
            #eff8fd 48%,
            #dceff9 100%
        );
}

.service-showcase--light::before {
    content: "";

    position: absolute;
    z-index: 0;
    inset: 0 0 0 50%;

    background:
        radial-gradient(
            circle at 84% 23%,
            rgba(255, 255, 255, 0.95) 0 2%,
            transparent 2.4%
        ),
        radial-gradient(
            circle at 91% 45%,
            rgba(68, 165, 221, 0.13) 0 6%,
            transparent 6.4%
        ),
        linear-gradient(
            132deg,
            rgba(255, 255, 255, 0) 15%,
            rgba(255, 255, 255, 0.75) 42%,
            rgba(89, 177, 226, 0.12) 58%,
            rgba(255, 255, 255, 0) 74%
        );

    pointer-events: none;
}


/* =========================================================
   SERVICE COPY
   ========================================================= */

.service-showcase__content {
    position: relative;

    display: flex;
    align-items: center;

    padding:
        clamp(3rem, 5vw, 6rem)
        clamp(3rem, 6vw, 7rem);

    isolation: isolate;
}

.service-showcase__copy {
    position: relative;
    z-index: 3;

    width: min(100%, 650px);
}

.service-showcase__number {
    position: absolute;
    z-index: 1;
    top: clamp(1.3rem, 3vw, 2.5rem);
    left: clamp(1.5rem, 3vw, 3.5rem);

    color:
        transparent;

    font-size:
        clamp(5rem, 9vw, 9.5rem);

    font-weight: 950;
    line-height: 1;

    letter-spacing: -0.08em;

    -webkit-text-stroke:
        1px rgba(100, 188, 238, 0.24);

    pointer-events: none;
}

.service-showcase--light .service-showcase__number {
    right: clamp(1.5rem, 3vw, 3.5rem);
    left: auto;

    -webkit-text-stroke:
        1px rgba(13, 79, 131, 0.17);
}

.service-showcase__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    color:
        var(--yellow);

    font-size: 0.7rem;
    font-weight: 950;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.service-showcase__eyebrow::before {
    content: "";

    width: 26px;
    height: 3px;

    flex: 0 0 auto;

    background:
        var(--yellow);

    border-radius:
        var(--radius-pill);
}

.service-showcase--light .service-showcase__eyebrow {
    color:
        var(--blue);
}

.service-showcase__copy h3 {
    margin-top: 0.75rem;

    font-size:
        clamp(2.8rem, 4.4vw, 5rem);

    line-height: 0.94;

    letter-spacing:
        -0.05em;
}

.service-showcase--dark .service-showcase__copy h3 {
    color:
        var(--white);
}

.service-showcase__copy h3 span {
    color:
        #77bcea;
}

.service-showcase--light .service-showcase__copy h3 span {
    color:
        var(--blue);
}

.service-showcase__description {
    max-width: 590px;

    margin-top: 1.1rem;

    font-size:
        clamp(0.95rem, 1.15vw, 1.08rem);

    line-height: 1.65;
}

.service-showcase--dark .service-showcase__description {
    color:
        rgba(255, 255, 255, 0.78);
}

.service-showcase--light .service-showcase__description {
    color:
        #496377;
}


/* =========================================================
   FEATURE LIST
   ========================================================= */

.service-showcase__features {
    max-width: 610px;

    margin:
        1.45rem
        0
        1.75rem;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        0.75rem
        1.6rem;

    list-style: none;
}

.service-showcase__features li {
    position: relative;

    padding-left: 1.8rem;

    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.35;
}

.service-showcase--dark .service-showcase__features li {
    color:
        rgba(255, 255, 255, 0.92);
}

.service-showcase--light .service-showcase__features li {
    color:
        var(--ink);
}

.service-showcase__features li::before {
    content: "✓";

    position: absolute;
    top: -0.05rem;
    left: 0;

    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        var(--yellow);

    color:
        var(--ink);

    font-size: 0.7rem;
    font-weight: 950;
}


/* =========================================================
   LARGE SERVICE PHOTOGRAPHY
   ========================================================= */

.service-showcase__media {
    position: relative;

    min-height:
        clamp(470px, 34vw, 620px);

    overflow: hidden;

    background:
        #c9dce8;
}

.service-showcase__media::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;
}

.service-showcase--dark .service-showcase__media::after {
    background:
        linear-gradient(
            90deg,
            rgba(7, 24, 39, 0.62) 0%,
            transparent 22%
        );
}

.service-showcase--light .service-showcase__media::after {
    background:
        linear-gradient(
            270deg,
            rgba(238, 248, 253, 0.56) 0%,
            transparent 22%
        );
}

.service-showcase__media img {
    width: 100%;
    height: 100%;

    min-height:
        clamp(470px, 34vw, 620px);

    object-fit: cover;

    transform:
        scale(1.002);

    transition:
        transform 600ms ease;
}

.service-showcase:hover .service-showcase__media img {
    transform:
        scale(1.025);
}


/* =========================================================
   LIGHT-BAND SOAP / BUBBLE ART
   ========================================================= */

.service-showcase__liquid-art {
    position: absolute;
    z-index: 1;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.service-showcase__liquid-art::before {
    content: "";

    position: absolute;
    right: -80px;
    bottom: -145px;

    width: 410px;
    height: 250px;

    border:
        2px solid rgba(53, 156, 215, 0.15);

    border-radius: 50%;

    box-shadow:
        0 0 0 36px rgba(62, 168, 226, 0.025),
        0 0 0 72px rgba(62, 168, 226, 0.018);

    transform:
        rotate(-18deg);
}

.service-showcase__liquid-art span {
    position: absolute;

    border:
        1px solid rgba(43, 143, 201, 0.2);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 32% 26%,
            rgba(255, 255, 255, 0.96) 0 12%,
            rgba(255, 255, 255, 0.45) 13% 18%,
            rgba(89, 184, 234, 0.1) 46%,
            rgba(40, 131, 189, 0.05) 72%,
            rgba(255, 255, 255, 0.3) 100%
        );
}

.service-showcase__liquid-art span:nth-child(1) {
    width: 58px;
    height: 58px;

    right: 8%;
    bottom: 18%;
}

.service-showcase__liquid-art span:nth-child(2) {
    width: 26px;
    height: 26px;

    right: 16%;
    bottom: 38%;
}

.service-showcase__liquid-art span:nth-child(3) {
    width: 82px;
    height: 82px;

    right: -18px;
    bottom: 42%;
}


/* =========================================================
   SEPARATION LINES
   ========================================================= */

.service-showcase + .service-showcase {
    border-top:
        2px solid rgba(255, 255, 255, 0.75);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1080px) {

    .premium-services__masthead-inner {
        grid-template-columns: 1fr;

        gap: 2rem;
    }

    .premium-services__masthead-copy {
        max-width: 620px;
    }

    .service-showcase {
        min-height: 0;

        grid-template-columns: 1fr;
    }

    .service-showcase--reverse .service-showcase__media {
        order: 2;
    }

    .service-showcase--reverse .service-showcase__content {
        order: 1;
    }

    .service-showcase__content {
        min-height: 470px;

        padding:
            4.5rem
            clamp(2rem, 7vw, 5rem);
    }

    .service-showcase__media,
    .service-showcase__media img {
        min-height: 520px;
    }

    .service-showcase--dark .service-showcase__media::after,
    .service-showcase--light .service-showcase__media::after {
        background:
            linear-gradient(
                0deg,
                rgba(7, 24, 39, 0.34) 0%,
                transparent 24%
            );
    }
}


@media (max-width: 680px) {

    .premium-services__masthead {
        padding:
            4.5rem
            0
            4rem;
    }

    .premium-services__masthead-title h2 {
        font-size:
            clamp(3rem, 13vw, 4.5rem);
    }

    .water-bubble--1 {
        width: 64px;
        height: 64px;
    }

    .water-bubble--3 {
        width: 46px;
        height: 46px;
    }

    .service-showcase__content {
        min-height: 0;

        padding:
            4rem
            1.5rem;
    }

    .service-showcase__number {
        top: 1rem;
        left: 1rem;

        font-size: 5rem;
    }

    .service-showcase--light .service-showcase__number {
        right: 1rem;
        left: auto;
    }

    .service-showcase__copy h3 {
        font-size:
            clamp(2.7rem, 12vw, 4rem);
    }

    .service-showcase__features {
        grid-template-columns: 1fr;

        gap: 0.7rem;
    }

    .service-showcase__media,
    .service-showcase__media img {
        min-height: 400px;
    }

    .service-showcase__copy .button {
        width: 100%;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .service-showcase:hover .service-showcase__media img {
        transform: none;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - SERVICES WIDTH DISCIPLINE
   ========================================================= */

.premium-services--editorial {
    padding:
        clamp(2rem, 3vw, 3rem)
        0
        clamp(3rem, 5vw, 5rem);

    background:
        linear-gradient(
            180deg,
            #edf6fb 0%,
            #f7fbfd 100%
        );
}


/* Masthead background remains atmospheric,
   but the composition now respects the site width. */

.premium-services__masthead {
    width:
        min(
            calc(100% - 64px),
            1480px
        );

    margin-inline: auto;

    border-radius:
        var(--radius-lg)
        var(--radius-lg)
        0
        0;
}

.premium-services__masthead-inner {
    width:
        min(
            calc(100% - 96px),
            1240px
        );

    margin-inline: auto;
}


/* Full-width editorial rows, but not infinite-width rows. */

.service-showcase {
    width:
        min(
            calc(100% - 64px),
            1480px
        );

    min-height:
        clamp(430px, 31vw, 560px);

    margin-inline: auto;
}

.service-showcase:last-of-type {
    border-radius:
        0
        0
        var(--radius-lg)
        var(--radius-lg);
}


/* Keep photography large without turning it into a billboard. */

.service-showcase__media,
.service-showcase__media img {
    min-height:
        clamp(430px, 31vw, 560px);
}


/* Keep copy readable instead of spreading across ultrawide space. */

.service-showcase__content {
    padding:
        clamp(3rem, 4vw, 5rem)
        clamp(3rem, 5vw, 6rem);
}

.service-showcase__copy {
    width:
        min(100%, 590px);
}

.service-showcase__copy h3 {
    font-size:
        clamp(2.7rem, 3.5vw, 4.5rem);
}

.service-showcase__description {
    max-width: 540px;
}


/* Connected editorial rows, not floating cards. */

.service-showcase + .service-showcase {
    border-top:
        2px solid rgba(255, 255, 255, 0.78);
}


/* =========================================================
   ULTRAWIDE GUARDRAIL
   ========================================================= */

@media (min-width: 1700px) {

    .premium-services__masthead,
    .service-showcase {
        width: 1480px;
    }

    .premium-services__masthead-title h2 {
        font-size: 5rem;
    }

    .service-showcase__copy h3 {
        font-size: 4rem;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1080px) {

    .premium-services__masthead,
    .service-showcase {
        width:
            calc(100% - 40px);
    }

    .premium-services__masthead-inner {
        width:
            calc(100% - 64px);
    }

    .service-showcase__content {
        padding:
            4rem
            clamp(2rem, 6vw, 4rem);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .premium-services--editorial {
        padding:
            1rem
            0
            2rem;
    }

    .premium-services__masthead,
    .service-showcase {
        width:
            calc(100% - 24px);
    }

    .premium-services__masthead-inner {
        width:
            calc(100% - 32px);
    }

    .premium-services__masthead {
        border-radius:
            18px
            18px
            0
            0;
    }

    .service-showcase:last-of-type {
        border-radius:
            0
            0
            18px
            18px;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - TRUE FULL PAGE SERVICES
   No giant card. No rounded outer container.
   Full-bleed editorial bands with disciplined copy.
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.premium-services--editorial {
    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background:
        #eef6fb;
}


/* =========================================================
   MASTHEAD — FULL BLEED
   ========================================================= */

.premium-services__masthead {
    width: 100%;
    max-width: none;

    margin: 0;

    border-radius: 0;

    padding:
        clamp(5.5rem, 8vw, 8rem)
        0
        clamp(5rem, 7vw, 7rem);

    background:
        radial-gradient(
            circle at 8% 72%,
            rgba(82, 181, 233, 0.18) 0 4%,
            transparent 4.4%
        ),
        radial-gradient(
            circle at 94% 20%,
            rgba(97, 192, 241, 0.18) 0 3.5%,
            transparent 3.9%
        ),
        linear-gradient(
            120deg,
            #f8fcff 0%,
            #e8f5fc 44%,
            #d6edf9 100%
        );
}

.premium-services__masthead-inner {
    width:
        min(
            calc(100% - 64px),
            1240px
        );

    margin-inline: auto;
}


/* =========================================================
   SERVICE BANDS — EDGE TO EDGE
   ========================================================= */

.service-showcase {
    width: 100%;
    max-width: none;

    min-height:
        clamp(500px, 36vw, 650px);

    margin: 0;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    border-radius: 0;

    overflow: hidden;
}

.service-showcase:last-of-type {
    border-radius: 0;
}


/* =========================================================
   COPY ALIGNMENT
   The band spans the viewport.
   The words do not.
   ========================================================= */

.service-showcase__content {
    position: relative;

    display: flex;
    align-items: center;

    padding-top:
        clamp(4rem, 6vw, 7rem);

    padding-bottom:
        clamp(4rem, 6vw, 7rem);
}


/* LEFT COPY SECTIONS */

.service-showcase:not(.service-showcase--reverse)
.service-showcase__content {
    padding-left:
        max(
            48px,
            calc((100vw - 1480px) / 2 + 64px)
        );

    padding-right:
        clamp(3rem, 5vw, 6rem);
}


/* RIGHT COPY SECTIONS */

.service-showcase--reverse
.service-showcase__content {
    padding-left:
        clamp(3rem, 5vw, 6rem);

    padding-right:
        max(
            48px,
            calc((100vw - 1480px) / 2 + 64px)
        );
}


.service-showcase__copy {
    width: min(100%, 620px);
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.service-showcase__copy h3 {
    max-width: 620px;

    font-size:
        clamp(3rem, 4vw, 5rem);

    line-height: 0.93;
}

.service-showcase__description {
    max-width: 560px;
}


/* =========================================================
   PHOTOGRAPHY
   Let the image own its half of the viewport.
   ========================================================= */

.service-showcase__media {
    min-height:
        clamp(500px, 36vw, 650px);
}

.service-showcase__media img {
    width: 100%;
    height: 100%;

    min-height:
        clamp(500px, 36vw, 650px);

    object-fit: cover;
}


/* Image fades gently into copy instead of becoming a card edge */

.service-showcase--dark
.service-showcase__media::after {
    background:
        linear-gradient(
            90deg,
            rgba(7, 24, 39, 0.42) 0%,
            rgba(7, 24, 39, 0.12) 12%,
            transparent 28%
        );
}

.service-showcase--light
.service-showcase__media::after {
    background:
        linear-gradient(
            270deg,
            rgba(229, 244, 252, 0.5) 0%,
            rgba(229, 244, 252, 0.12) 12%,
            transparent 28%
        );
}


/* =========================================================
   BAND SEPARATION
   Not cards. Just subtle transitions.
   ========================================================= */

.service-showcase + .service-showcase {
    border-top:
        1px solid rgba(255, 255, 255, 0.72);
}


/* =========================================================
   OVERSIZED SERVICE NUMBERS
   ========================================================= */

.service-showcase:not(.service-showcase--reverse)
.service-showcase__number {
    left:
        max(
            24px,
            calc((100vw - 1480px) / 2 + 20px)
        );
}

.service-showcase--reverse
.service-showcase__number {
    right:
        max(
            24px,
            calc((100vw - 1480px) / 2 + 20px)
        );

    left: auto;
}


/* =========================================================
   REMOVE THE "GIANT CARD" FEEL
   ========================================================= */

.premium-services__masthead,
.service-showcase,
.service-showcase__content,
.service-showcase__media {
    box-shadow: none;
}

.premium-services__masthead,
.service-showcase {
    outline: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1080px) {

    .premium-services__masthead {
        width: 100%;
    }

    .premium-services__masthead-inner {
        width:
            calc(100% - 40px);
    }

    .service-showcase {
        width: 100%;

        grid-template-columns: 1fr;
    }

    .service-showcase__content,
    .service-showcase:not(.service-showcase--reverse)
    .service-showcase__content,
    .service-showcase--reverse
    .service-showcase__content {
        padding:
            4.5rem
            max(32px, 6vw);
    }

    .service-showcase--reverse
    .service-showcase__content {
        order: 1;
    }

    .service-showcase--reverse
    .service-showcase__media {
        order: 2;
    }

    .service-showcase__media,
    .service-showcase__media img {
        min-height: 520px;
    }

    .service-showcase__number,
    .service-showcase:not(.service-showcase--reverse)
    .service-showcase__number,
    .service-showcase--reverse
    .service-showcase__number {
        top: 1.5rem;
        right: auto;
        left:
            max(20px, 4vw);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .premium-services--editorial {
        padding: 0;
    }

    .premium-services__masthead {
        width: 100%;

        border-radius: 0;

        padding:
            4.5rem
            0
            4rem;
    }

    .premium-services__masthead-inner {
        width:
            calc(100% - 32px);
    }

    .service-showcase {
        width: 100%;

        border-radius: 0;
    }

    .service-showcase:last-of-type {
        border-radius: 0;
    }

    .service-showcase__content,
    .service-showcase:not(.service-showcase--reverse)
    .service-showcase__content,
    .service-showcase--reverse
    .service-showcase__content {
        padding:
            4rem
            1.5rem;
    }

    .service-showcase__media,
    .service-showcase__media img {
        min-height: 410px;
    }

    .service-showcase__copy h3 {
        font-size:
            clamp(2.8rem, 12vw, 4rem);
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - SERVICE BAND PROPORTION POLISH
   ========================================================= */

/* Slightly shorter, denser editorial bands */
.service-showcase {
    min-height:
        clamp(470px, 30vw, 570px);
}

.service-showcase__media,
.service-showcase__media img {
    min-height:
        clamp(470px, 30vw, 570px);
}


/* Move the service message upward instead of dead-center */
.service-showcase__content {
    align-items: flex-start;

    padding-top:
        clamp(5.5rem, 7vw, 7.5rem);

    padding-bottom:
        clamp(3.5rem, 5vw, 5rem);
}


/* Give the actual service message more presence */
.service-showcase__copy {
    width:
        min(100%, 650px);
}

.service-showcase__copy h3 {
    font-size:
        clamp(3.2rem, 4.1vw, 5.2rem);
}

.service-showcase__description {
    max-width: 590px;

    font-size:
        clamp(1rem, 1.1vw, 1.12rem);
}


/* Pull the oversized number into the composition */
.service-showcase:not(.service-showcase--reverse)
.service-showcase__number {
    top:
        clamp(2rem, 3vw, 3.25rem);

    left:
        max(
            24px,
            calc((100vw - 1480px) / 2 + 24px)
        );
}

.service-showcase--reverse
.service-showcase__number {
    top:
        clamp(2rem, 3vw, 3.25rem);

    right:
        max(
            24px,
            calc((100vw - 1480px) / 2 + 24px)
        );

    left: auto;
}


/* Make the number visible enough to feel intentional */
.service-showcase__number {
    font-size:
        clamp(5rem, 7vw, 7.5rem);

    -webkit-text-stroke:
        1px rgba(100, 188, 238, 0.34);
}

.service-showcase--light
.service-showcase__number {
    -webkit-text-stroke:
        1px rgba(13, 79, 131, 0.24);
}


/* Tablet/mobile keeps normal stacked rhythm */
@media (max-width: 1080px) {

    .service-showcase__content {
        padding:
            4.5rem
            max(32px, 6vw);
    }
}

@media (max-width: 680px) {

    .service-showcase__content {
        padding:
            4rem
            1.5rem;
    }

    .service-showcase__copy h3 {
        font-size:
            clamp(2.8rem, 12vw, 4rem);
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - ULTRAWIDE SERVICE IMAGE BIAS

   Normal desktop remains 50 / 50.
   Ultrawide gives unused space to photography instead.
   ========================================================= */

@media (min-width: 1800px) {

    /* Copy left / image right */
    .service-showcase:not(.service-showcase--reverse) {
        grid-template-columns:
            minmax(540px, 38%)
            minmax(0, 62%);
    }

    /* Image left / copy right */
    .service-showcase--reverse {
        grid-template-columns:
            minmax(0, 62%)
            minmax(540px, 38%);
    }


    /* Keep the copy visually attached to the image,
       instead of floating in the middle of a huge color field. */

    .service-showcase:not(.service-showcase--reverse)
    .service-showcase__content {
        padding-left:
            max(
                48px,
                calc((100vw - 1480px) / 2 + 56px)
            );

        padding-right:
            clamp(2.5rem, 3vw, 4rem);
    }

    .service-showcase--reverse
    .service-showcase__content {
        padding-left:
            clamp(2.5rem, 3vw, 4rem);

        padding-right:
            max(
                48px,
                calc((100vw - 1480px) / 2 + 56px)
            );
    }


    /* Let the larger image panel show more of the photography. */

    .service-showcase__media img {
        object-position: center;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - CINEMATIC SERVICE BANDS

   Full-bleed photography.
   Copy overlays a controlled gradient.
   No cards. No empty ultrawide color fields.
   ========================================================= */

.service-showcase {
    position: relative;

    display: block;

    min-height:
        clamp(520px, 34vw, 650px);

    overflow: hidden;
}


/* =========================================================
   PHOTOGRAPHY BECOMES THE WHOLE BAND
   ========================================================= */

.service-showcase__media {
    position: absolute;
    z-index: 0;
    inset: 0;

    width: 100%;
    height: 100%;

    min-height: 0;
}

.service-showcase__media img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    min-height: 0;

    object-fit: cover;
    object-position: center;
}


/* Remove previous half-image fade logic */
.service-showcase__media::after {
    display: none;
}


/* =========================================================
   COPY PANEL
   ========================================================= */

.service-showcase__content {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height:
        clamp(520px, 34vw, 650px);

    display: flex;
    align-items: center;

    padding-top:
        clamp(4rem, 6vw, 6rem);

    padding-bottom:
        clamp(4rem, 6vw, 6rem);
}


/* =========================================================
   DARK ROWS
   Copy left, image remains visible everywhere
   ========================================================= */

.service-showcase--dark::before {
    content: "";

    position: absolute;
    z-index: 1;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 20, 33, 0.98) 0%,
            rgba(5, 20, 33, 0.94) 27%,
            rgba(5, 20, 33, 0.78) 42%,
            rgba(5, 20, 33, 0.28) 62%,
            rgba(5, 20, 33, 0.04) 82%,
            transparent 100%
        );

    pointer-events: none;
}

.service-showcase--dark::after {
    content: "";

    position: absolute;
    z-index: 1;
    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(5, 20, 33, 0.24),
            transparent 45%
        );

    pointer-events: none;
}

.service-showcase:not(.service-showcase--reverse)
.service-showcase__content {
    padding-left:
        max(
            48px,
            calc((100vw - 1480px) / 2 + 64px)
        );

    padding-right: 48%;
}


/* =========================================================
   LIGHT ROWS
   Copy right, pale wash over that side
   ========================================================= */

.service-showcase--light::before {
    content: "";

    position: absolute;
    z-index: 1;
    inset: 0;

    background:
        linear-gradient(
            270deg,
            rgba(241, 249, 253, 0.99) 0%,
            rgba(235, 247, 253, 0.97) 28%,
            rgba(229, 244, 252, 0.90) 42%,
            rgba(229, 244, 252, 0.42) 60%,
            rgba(229, 244, 252, 0.08) 79%,
            transparent 100%
        );

    pointer-events: none;
}

.service-showcase--reverse
.service-showcase__content {
    justify-content: flex-end;

    padding-left: 48%;

    padding-right:
        max(
            48px,
            calc((100vw - 1480px) / 2 + 64px)
        );
}


/* =========================================================
   COPY WIDTH
   No more crushed text
   ========================================================= */

.service-showcase__copy {
    width: min(100%, 620px);
}

.service-showcase__copy h3 {
    max-width: 620px;

    font-size:
        clamp(3.25rem, 4vw, 5rem);

    line-height: 0.94;
}

.service-showcase__description {
    max-width: 570px;
}

.service-showcase__features {
    max-width: 600px;
}


/* =========================================================
   NUMBERS
   ========================================================= */

.service-showcase:not(.service-showcase--reverse)
.service-showcase__number {
    top:
        clamp(1.75rem, 3vw, 3rem);

    left:
        max(
            26px,
            calc((100vw - 1480px) / 2 + 24px)
        );
}

.service-showcase--reverse
.service-showcase__number {
    top:
        clamp(1.75rem, 3vw, 3rem);

    right:
        max(
            26px,
            calc((100vw - 1480px) / 2 + 24px)
        );

    left: auto;
}


/* =========================================================
   REMOVE OLD ULTRAWIDE PERCENTAGE SQUEEZE
   ========================================================= */

@media (min-width: 1800px) {

    .service-showcase:not(.service-showcase--reverse),
    .service-showcase--reverse {
        grid-template-columns: none;
    }

    .service-showcase:not(.service-showcase--reverse)
    .service-showcase__content {
        padding-left:
            max(
                56px,
                calc((100vw - 1480px) / 2 + 64px)
            );

        padding-right: 50%;
    }

    .service-showcase--reverse
    .service-showcase__content {
        padding-left: 50%;

        padding-right:
            max(
                56px,
                calc((100vw - 1480px) / 2 + 64px)
            );
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1080px) {

    .service-showcase {
        min-height: 700px;
    }

    .service-showcase__content {
        min-height: 700px;

        align-items: flex-end;

        padding:
            4rem
            max(32px, 6vw)
            4.5rem !important;
    }

    .service-showcase--dark::before,
    .service-showcase--light::before {
        background:
            linear-gradient(
                0deg,
                rgba(5, 20, 33, 0.98) 0%,
                rgba(5, 20, 33, 0.92) 35%,
                rgba(5, 20, 33, 0.48) 62%,
                transparent 100%
            );
    }

    .service-showcase--light::before {
        background:
            linear-gradient(
                0deg,
                rgba(239, 248, 253, 0.99) 0%,
                rgba(239, 248, 253, 0.95) 38%,
                rgba(239, 248, 253, 0.46) 64%,
                transparent 100%
            );
    }

    .service-showcase__copy {
        width: min(100%, 680px);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .service-showcase {
        min-height: 720px;
    }

    .service-showcase__content {
        min-height: 720px;

        padding:
            4rem
            1.5rem !important;
    }

    .service-showcase__copy h3 {
        font-size:
            clamp(2.8rem, 12vw, 4rem);
    }

    .service-showcase__features {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - LIGHT SERVICE PHOTO REVEAL
   Preserve readable copy without bleaching the photography
   ========================================================= */

.service-showcase--light::before {
    background:
        linear-gradient(
            270deg,
            rgba(242, 250, 254, 0.99) 0%,
            rgba(239, 249, 253, 0.98) 24%,
            rgba(232, 246, 252, 0.90) 34%,
            rgba(226, 243, 251, 0.58) 43%,
            rgba(226, 243, 251, 0.20) 51%,
            rgba(226, 243, 251, 0.04) 58%,
            transparent 66%
        );
}


/* Preserve the stronger mobile readability treatment */
@media (max-width: 1080px) {

    .service-showcase--light::before {
        background:
            linear-gradient(
                0deg,
                rgba(239, 248, 253, 0.99) 0%,
                rgba(239, 248, 253, 0.95) 38%,
                rgba(239, 248, 253, 0.46) 64%,
                transparent 100%
            );
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - SERVICE TEXT LEGIBILITY

   Full-bleed photography stays.
   Copy gets a protected reading zone without becoming a card.
   ========================================================= */


/* Stop the previous row-wide washes from doing all the work */
.service-showcase--dark::before,
.service-showcase--light::before {
    background: none;
}


/* =========================================================
   DARK SERVICE ROW READING ZONE
   ========================================================= */

.service-showcase:not(.service-showcase--reverse)
.service-showcase__content::before {
    content: "";

    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;

    width:
        max(
            58%,
            calc((100vw - 1480px) / 2 + 820px)
        );

    background:
        linear-gradient(
            90deg,
            rgba(5, 20, 33, 0.99) 0%,
            rgba(5, 20, 33, 0.98) 58%,
            rgba(5, 20, 33, 0.92) 72%,
            rgba(5, 20, 33, 0.56) 86%,
            transparent 100%
        );

    pointer-events: none;
}


/* =========================================================
   LIGHT SERVICE ROW READING ZONE
   ========================================================= */

.service-showcase--reverse
.service-showcase__content::before {
    content: "";

    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;

    width:
        max(
            58%,
            calc((100vw - 1480px) / 2 + 820px)
        );

    background:
        linear-gradient(
            270deg,
            rgba(244, 250, 254, 1) 0%,
            rgba(241, 249, 253, 0.99) 58%,
            rgba(235, 247, 253, 0.94) 72%,
            rgba(229, 244, 252, 0.62) 86%,
            transparent 100%
        );

    pointer-events: none;
}


/* Copy always sits above the scrim */
.service-showcase__copy,
.service-showcase__number,
.service-showcase__liquid-art {
    position: relative;
    z-index: 3;
}


/* =========================================================
   DARK ROW TEXT CONTRAST
   ========================================================= */

.service-showcase--dark
.service-showcase__description {
    color:
        rgba(255, 255, 255, 0.92);

    font-weight: 500;
}

.service-showcase--dark
.service-showcase__features li {
    color:
        #ffffff;

    font-weight: 800;
}

.service-showcase--dark
.service-showcase__eyebrow {
    color:
        var(--yellow);
}


/* =========================================================
   LIGHT ROW TEXT CONTRAST
   ========================================================= */

.service-showcase--light
.service-showcase__description {
    color:
        #243b4e;

    font-weight: 500;
}

.service-showcase--light
.service-showcase__features li {
    color:
        #0b1420;

    font-weight: 850;
}

.service-showcase--light
.service-showcase__eyebrow {
    color:
        #0d4f83;
}


/* =========================================================
   ULTRAWIDE
   Keep the safe zone tied to the copy rather than
   washing over the whole photograph.
   ========================================================= */

@media (min-width: 1800px) {

    .service-showcase:not(.service-showcase--reverse)
    .service-showcase__content::before,
    .service-showcase--reverse
    .service-showcase__content::before {
        width:
            calc((100vw - 1480px) / 2 + 860px);
    }
}


/* =========================================================
   TABLET / MOBILE
   Copy moves to bottom, so use a vertical reading zone.
   ========================================================= */

@media (max-width: 1080px) {

    .service-showcase:not(.service-showcase--reverse)
    .service-showcase__content::before,
    .service-showcase--reverse
    .service-showcase__content::before {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;

        width: 100%;
        height: 66%;

        background:
            linear-gradient(
                0deg,
                rgba(5, 20, 33, 0.99) 0%,
                rgba(5, 20, 33, 0.94) 58%,
                rgba(5, 20, 33, 0.5) 82%,
                transparent 100%
            );
    }

    .service-showcase--reverse
    .service-showcase__content::before {
        background:
            linear-gradient(
                0deg,
                rgba(244, 250, 254, 1) 0%,
                rgba(241, 249, 253, 0.97) 58%,
                rgba(235, 247, 253, 0.58) 82%,
                transparent 100%
            );
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - RESULTS PROPORTION POLISH
   ========================================================= */

.premium-results__layout {
    grid-template-columns:
        minmax(420px, 0.85fr)
        minmax(620px, 1.15fr);

    gap:
        clamp(4rem, 6vw, 7rem);
}

.premium-results__content h2 {
    max-width: 650px;

    font-size:
        clamp(3.5rem, 4.8vw, 5.7rem);

    line-height: 0.94;
}

.premium-results__content h2 span {
    display: inline;
}

.premium-results__content > p:not(.section-label) {
    max-width: 590px;
}

.premium-comparison {
    width: 100%;
    max-width: 820px;
}

.premium-comparison__frame {
    width: 100%;
}

@media (max-width: 1100px) {

    .premium-results__layout {
        grid-template-columns: 1fr;
    }

    .premium-results__content h2 {
        max-width: 760px;
    }

    .premium-comparison {
        max-width: 900px;
    }
}


/* =========================================================
   WASH & BEHOLD PREMIUM - RESULTS STAT READABILITY
   ========================================================= */

.premium-results__stats strong {
    font-size: 0.94rem;
    font-weight: 900;
}

.premium-results__stats span {
    margin-top: 0.3rem;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 0.76rem;
    font-weight: 500;

    line-height: 1.35;
}

/* =========================================================
   WASH & BEHOLD PREMIUM - RESULTS EVIDENCE FIRST

   The comparison is the proof, so it gets visual priority.
   ========================================================= */

.premium-results__layout {
    grid-template-columns:
        minmax(340px, 0.62fr)
        minmax(720px, 1.38fr);

    gap:
        clamp(3rem, 5vw, 6rem);
}

.premium-results__content {
    max-width: 500px;
}

.premium-results__content h2 {
    max-width: 500px;

    font-size:
        clamp(3rem, 4vw, 4.8rem);

    line-height: 0.94;
}

.premium-results__content > p:not(.section-label) {
    max-width: 470px;
}

.premium-comparison {
    width: 100%;
    max-width: 1040px;
}

.premium-comparison__frame {
    width: 100%;

    aspect-ratio: 4 / 3;
}


/* Let ultrawide screens give the extra room to the evidence */

@media (min-width: 1700px) {

    .premium-results__layout {
        grid-template-columns:
            minmax(360px, 0.55fr)
            minmax(820px, 1.45fr);
    }

    .premium-results__content h2 {
        font-size: 4.4rem;
    }

    .premium-comparison {
        max-width: 1120px;
    }
}


/* Tablet remains stacked and image-forward */

@media (max-width: 1100px) {

    .premium-results__layout {
        grid-template-columns: 1fr;
    }

    .premium-results__content {
        max-width: 720px;
    }

    .premium-results__content h2 {
        max-width: 700px;
    }

    .premium-comparison {
        max-width: 960px;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - FEATURED RECOVERY CASE STUDY
   ========================================================= */

.premium-recovery {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(520px, 0.88fr);

    min-height:
        clamp(720px, 48vw, 880px);

    overflow: hidden;

    background:
        #071b2b;

    color:
        #ffffff;
}


/* =========================================================
   RECOVERY PHOTOGRAPHY
   ========================================================= */

.premium-recovery__media {
    position: relative;

    min-height:
        clamp(720px, 48vw, 880px);

    overflow: hidden;

    background:
        #102d42;
}

.premium-recovery__media img {
    width: 100%;
    height: 100%;

    min-height:
        clamp(720px, 48vw, 880px);

    object-fit: cover;
    object-position: center;

    display: block;
}

.premium-recovery__media-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 17, 28, 0.10) 0%,
            rgba(4, 17, 28, 0.02) 56%,
            rgba(4, 17, 28, 0.34) 100%
        ),
        linear-gradient(
            0deg,
            rgba(4, 17, 28, 0.42) 0%,
            transparent 36%
        );

    pointer-events: none;
}


/* =========================================================
   COMPLETED STAMP
   ========================================================= */

.premium-recovery__stamp {
    position: absolute;
    top:
        clamp(2rem, 4vw, 3.5rem);
    left:
        max(
            32px,
            calc((100vw - 1480px) / 2 + 32px)
        );

    z-index: 3;

    min-width: 185px;

    padding:
        1rem
        1.2rem;

    background:
        var(--yellow);

    color:
        var(--ink);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.18);
}

.premium-recovery__stamp span {
    display: block;

    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.premium-recovery__stamp strong {
    display: block;

    margin-top: 0.2rem;

    font-size: 1.02rem;
    font-weight: 950;
}


/* =========================================================
   CONTENT SIDE
   ========================================================= */

.premium-recovery__content {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(4.5rem, 7vw, 7rem)
        max(
            48px,
            calc((100vw - 1480px) / 2 + 56px)
        )
        clamp(4.5rem, 7vw, 7rem)
        clamp(3rem, 5vw, 5.5rem);

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(50, 143, 199, 0.15),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #071b2b 0%,
            #09243a 100%
        );
}

.premium-recovery__content::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 1px;

    background:
        rgba(255, 255, 255, 0.12);
}


/* =========================================================
   INTRO
   ========================================================= */

.premium-recovery__intro {
    max-width: 610px;
}

.premium-recovery__intro .section-label {
    color:
        var(--yellow);
}

.premium-recovery__intro h2 {
    margin-top: 1.2rem;

    max-width: 610px;

    color:
        #ffffff;

    font-size:
        clamp(3.4rem, 4.6vw, 5.4rem);

    line-height: 0.92;

    letter-spacing:
        -0.055em;
}

.premium-recovery__intro h2 span {
    display: block;

    color:
        #7fc4ef;
}

.premium-recovery__intro > p:not(.section-label) {
    max-width: 570px;

    margin-top: 1.5rem;

    color:
        rgba(255, 255, 255, 0.82);

    font-size:
        clamp(0.98rem, 1.1vw, 1.08rem);

    line-height: 1.7;
}


/* =========================================================
   JOB DETAILS
   ========================================================= */

.premium-recovery__job {
    max-width: 650px;

    margin-top:
        clamp(2.75rem, 4vw, 4rem);

    padding-top:
        clamp(2rem, 3vw, 2.75rem);

    border-top:
        1px solid rgba(255, 255, 255, 0.16);
}

.premium-recovery__job-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 1.5rem;

    padding-bottom: 1.25rem;
}

.premium-recovery__job-heading span {
    color:
        #7fc4ef;

    font-size: 0.68rem;
    font-weight: 900;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.premium-recovery__job-heading strong {
    color:
        #ffffff;

    font-size:
        clamp(1.05rem, 1.25vw, 1.2rem);

    font-weight: 900;

    text-align: right;
}


/* =========================================================
   FACT GRID
   ========================================================= */

.premium-recovery__facts {
    margin: 0;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top:
        1px solid rgba(255, 255, 255, 0.12);
}

.premium-recovery__facts > div {
    min-height: 94px;

    padding:
        1.15rem
        1rem
        1.15rem
        0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.12);
}

.premium-recovery__facts > div:nth-child(odd) {
    padding-right: 1.5rem;

    border-right:
        1px solid rgba(255, 255, 255, 0.12);
}

.premium-recovery__facts > div:nth-child(even) {
    padding-left: 1.5rem;
}

.premium-recovery__facts dt {
    color:
        rgba(255, 255, 255, 0.58);

    font-size: 0.66rem;
    font-weight: 850;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.premium-recovery__facts dd {
    margin:
        0.38rem
        0
        0;

    color:
        #ffffff;

    font-size: 0.93rem;
    font-weight: 800;

    line-height: 1.4;
}


/* =========================================================
   CUSTOMER REACTION
   ========================================================= */

.premium-recovery__quote {
    position: relative;

    margin:
        clamp(2rem, 3vw, 2.75rem)
        0
        0;

    padding:
        0
        0
        0
        1.4rem;

    border-left:
        3px solid var(--yellow);
}

.premium-recovery__quote p {
    margin: 0;

    color:
        #ffffff;

    font-size:
        clamp(1.18rem, 1.5vw, 1.45rem);

    font-weight: 800;
    line-height: 1.45;
}

.premium-recovery__quote footer {
    margin-top: 0.45rem;

    color:
        rgba(255, 255, 255, 0.57);

    font-size: 0.72rem;
    font-weight: 600;
}


/* =========================================================
   BOTTOM ACTION
   ========================================================= */

.premium-recovery__bottom {
    margin-top:
        clamp(2rem, 3vw, 2.75rem);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1.5rem;
}

.premium-recovery__dignity small {
    display: block;

    color:
        rgba(255, 255, 255, 0.54);

    font-size: 0.63rem;
    font-weight: 850;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.premium-recovery__dignity strong {
    display: block;

    margin-top: 0.28rem;

    color:
        #7fc4ef;

    font-size: 1rem;
    font-weight: 900;
}


/* =========================================================
   ULTRAWIDE
   ========================================================= */

@media (min-width: 1800px) {

    .premium-recovery {
        grid-template-columns:
            minmax(0, 1.18fr)
            minmax(560px, 0.82fr);
    }

    .premium-recovery__intro h2 {
        font-size: 5rem;
    }

    .premium-recovery__content {
        padding-left: 5rem;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .premium-recovery {
        grid-template-columns: 1fr;
    }

    .premium-recovery__media,
    .premium-recovery__media img {
        min-height: 620px;
    }

    .premium-recovery__content {
        padding:
            4.5rem
            max(32px, 6vw);
    }

    .premium-recovery__content::before {
        display: none;
    }

    .premium-recovery__intro,
    .premium-recovery__job {
        max-width: 760px;
    }

    .premium-recovery__stamp {
        left:
            max(24px, 4vw);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .premium-recovery__media,
    .premium-recovery__media img {
        min-height: 480px;
    }

    .premium-recovery__content {
        padding:
            4rem
            1.5rem;
    }

    .premium-recovery__intro h2 {
        font-size:
            clamp(3rem, 13vw, 4.2rem);
    }

    .premium-recovery__job-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .premium-recovery__job-heading strong {
        text-align: left;
    }

    .premium-recovery__facts {
        grid-template-columns: 1fr;
    }

    .premium-recovery__facts > div:nth-child(odd),
    .premium-recovery__facts > div:nth-child(even) {
        padding:
            1rem
            0;

        border-right: 0;
    }

    .premium-recovery__bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .premium-recovery__bottom .button {
        width: 100%;
    }

    .premium-recovery__stamp {
        top: 1.25rem;
        left: 1.25rem;

        min-width: 165px;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - RECOVERY RESPONSIVE DISCIPLINE

   Full-bleed section remains.
   Stop ultrawide padding from crushing the information panel.
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP BASE
   --------------------------------------------------------- */

.premium-recovery {
    grid-template-columns:
        minmax(0, 58%)
        minmax(0, 42%);

    min-height: 760px;
}

.premium-recovery__media,
.premium-recovery__media img {
    min-height: 760px;
}


/* Keep the result image useful instead of letting the
   content column force an excessively tall crop. */

.premium-recovery__media img {
    object-position: 52% center;
}


/* ---------------------------------------------------------
   INFORMATION PANEL
   --------------------------------------------------------- */

.premium-recovery__content {
    padding:
        clamp(3.75rem, 5vw, 5.5rem)
        clamp(3.25rem, 4.5vw, 5rem);

    justify-content: center;
}


/* The panel already owns its portion of the viewport.
   It does NOT need another simulated 1480px outer gutter. */

.premium-recovery__intro,
.premium-recovery__job {
    width: 100%;
    max-width: 640px;
}

.premium-recovery__intro h2 {
    max-width: 620px;

    font-size:
        clamp(3.6rem, 4.2vw, 5.2rem);

    line-height: 0.92;
}

.premium-recovery__intro > p:not(.section-label) {
    max-width: 610px;
}


/* Tighten the case-study rhythm slightly */

.premium-recovery__job {
    margin-top:
        clamp(2.25rem, 3vw, 3rem);

    padding-top:
        clamp(1.75rem, 2.5vw, 2.25rem);
}

.premium-recovery__facts > div {
    min-height: 82px;

    padding-top: 1rem;
    padding-bottom: 1rem;
}

.premium-recovery__quote {
    margin-top:
        clamp(1.7rem, 2.5vw, 2.25rem);
}

.premium-recovery__bottom {
    margin-top:
        clamp(1.7rem, 2.5vw, 2.25rem);
}


/* ---------------------------------------------------------
   COMPLETED STAMP
   Anchor it to the photograph, not a theoretical page grid.
   --------------------------------------------------------- */

.premium-recovery__stamp {
    top:
        clamp(2rem, 3vw, 3rem);

    left:
        clamp(2rem, 4vw, 4.5rem);
}


/* =========================================================
   WIDE DESKTOP
   ========================================================= */

@media (min-width: 1500px) {

    .premium-recovery {
        grid-template-columns:
            minmax(0, 60%)
            minmax(0, 40%);
    }

    .premium-recovery__content {
        padding:
            4rem
            clamp(3.5rem, 4vw, 5rem);
    }

    .premium-recovery__intro h2 {
        font-size:
            clamp(4rem, 4vw, 5rem);
    }
}


/* =========================================================
   ULTRAWIDE
   Extra width is useful space, not giant padding.
   ========================================================= */

@media (min-width: 1800px) {

    .premium-recovery {
        grid-template-columns:
            minmax(0, 59%)
            minmax(680px, 41%);

        min-height: 760px;
    }

    .premium-recovery__media,
    .premium-recovery__media img {
        min-height: 760px;
    }

    .premium-recovery__content {
        padding:
            4rem
            4.75rem;
    }

    .premium-recovery__intro,
    .premium-recovery__job {
        max-width: 650px;
    }

    .premium-recovery__intro h2 {
        max-width: 620px;

        font-size: 4.8rem;
    }

    .premium-recovery__stamp {
        left: 4rem;
    }
}


/* =========================================================
   VERY LARGE DISPLAYS
   Prevent typography from shrinking relative to the canvas.
   ========================================================= */

@media (min-width: 2200px) {

    .premium-recovery {
        grid-template-columns:
            minmax(0, 60%)
            minmax(720px, 40%);
    }

    .premium-recovery__content {
        padding-inline: 5.5rem;
    }

    .premium-recovery__intro,
    .premium-recovery__job {
        max-width: 690px;
    }

    .premium-recovery__intro h2 {
        max-width: 660px;

        font-size: 5rem;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .premium-recovery {
        grid-template-columns: 1fr;

        min-height: 0;
    }

    .premium-recovery__media,
    .premium-recovery__media img {
        min-height: 620px;
    }

    .premium-recovery__content {
        padding:
            4.5rem
            max(32px, 6vw);
    }

    .premium-recovery__intro,
    .premium-recovery__job {
        max-width: 760px;
    }

    .premium-recovery__stamp {
        left:
            max(24px, 4vw);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .premium-recovery__media,
    .premium-recovery__media img {
        min-height: 480px;
    }

    .premium-recovery__content {
        padding:
            4rem
            1.5rem;
    }

    .premium-recovery__intro h2 {
        font-size:
            clamp(3rem, 13vw, 4.2rem);
    }

    .premium-recovery__stamp {
        top: 1.25rem;
        left: 1.25rem;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - CREW DETAIL POLISH
   ========================================================= */

.premium-crew__facts dt {
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.4;
}

.premium-crew__facts dd {
    color: var(--blue);

    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1.4;
}

.premium-crew__facts > div {
    min-height: 58px;
}

.premium-crew .button {
    min-height: 48px;

    padding-inline: 1.55rem;

    font-size: 0.82rem;
    font-weight: 900;
}


/* Tablet/mobile readability */

@media (max-width: 680px) {

    .premium-crew__facts dt,
    .premium-crew__facts dd {
        font-size: 0.88rem;
    }

    .premium-crew .button {
        width: 100%;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - CREW BODY COPY READABILITY
   ========================================================= */

.premium-crew__body-copy {
    color: #34485a !important;
    opacity: 1 !important;

    font-size: 1rem;
    font-weight: 500;
    line-height: 1.68;
}

.premium-crew__body-copy + .premium-crew__body-copy {
    margin-top: 1rem;
}

@media (max-width: 680px) {

    .premium-crew__body-copy {
        font-size: 1rem;
        line-height: 1.65;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIP FEATURED READABILITY
   Featured plan should be the clearest card, not the faintest.
   ========================================================= */

.premium-membership-featured-fix {
    color: #ffffff;
}


/* Plan eyebrow */
.premium-membership-featured-fix
:is(.membership-card__eyebrow, .membership-plan__eyebrow, .plan-eyebrow) {
    color: var(--yellow);
}


/* Headline */
.premium-membership-featured-fix h3 {
    color: #ffffff;
}


/* Featured description */
.premium-membership-featured-fix p {
    color: rgba(255, 255, 255, 0.86);
    opacity: 1;
}


/* Benefit rows */
.premium-membership-featured-fix li {
    color: rgba(255, 255, 255, 0.94);
    opacity: 1;

    font-weight: 700;
}


/* Catch non-list benefit rows if markup uses divs */
.premium-membership-featured-fix
:is(
    .membership-card__benefits,
    .membership-plan__benefits,
    .membership-features,
    .plan-features
) {
    color: rgba(255, 255, 255, 0.94);
}

.premium-membership-featured-fix
:is(
    .membership-card__benefits,
    .membership-plan__benefits,
    .membership-features,
    .plan-features
) > * {
    color: rgba(255, 255, 255, 0.94);
    opacity: 1;
}


/* Separators */
.premium-membership-featured-fix li,
.premium-membership-featured-fix
:is(
    .membership-card__benefits,
    .membership-plan__benefits,
    .membership-features,
    .plan-features
) > * {
    border-color: rgba(255, 255, 255, 0.20);
}


/* Featured CTA */
.premium-membership-featured-fix a {
    color: var(--yellow);

    opacity: 1;

    font-weight: 950;
}

.premium-membership-featured-fix a:hover,
.premium-membership-featured-fix a:focus-visible {
    color: #ffffff;
}


/* Most Popular pill stays high contrast */
.premium-membership-featured-fix
:is(
    .membership-card__badge,
    .membership-plan__badge,
    .plan-badge
) {
    background: var(--yellow);
    color: var(--ink);
}


/* ---------------------------------------------------------
   WHITE MEMBERSHIP CARDS
   Slightly strengthen secondary text globally.
   --------------------------------------------------------- */

.premium-memberships
:is(.membership-card, .membership-plan)
:not(.premium-membership-featured-fix) p {
    color: #4a5b6b;
    opacity: 1;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 680px) {

    .premium-membership-featured-fix p,
    .premium-membership-featured-fix li {
        font-size: 0.95rem;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - WATER ATMOSPHERE REDESIGN

   CSS-only version of the approved mockups.
   No fake photorealistic CSS promises.
   ========================================================= */


/* =========================================================
   SHARED WATER / CLEAN VISUAL LANGUAGE
   ========================================================= */

.premium-crew,
.premium-memberships {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 14%,
            rgba(108, 194, 239, 0.22) 0 4.5rem,
            rgba(108, 194, 239, 0.08) 4.6rem,
            transparent 8.5rem
        ),
        radial-gradient(
            circle at 93% 11%,
            rgba(120, 203, 245, 0.16) 0 3.4rem,
            transparent 7rem
        ),
        radial-gradient(
            circle at 86% 78%,
            rgba(98, 185, 235, 0.12) 0 2.4rem,
            transparent 5.4rem
        ),
        linear-gradient(
            135deg,
            #fbfdff 0%,
            #f1f9fd 38%,
            #e9f5fb 70%,
            #fafdff 100%
        );
}


/* Keep real content above decoration */
.premium-crew > *,
.premium-memberships > * {
    position: relative;
    z-index: 2;
}


/* =========================================================
   TRANSLUCENT CSS BUBBLES
   ========================================================= */

.premium-crew::before,
.premium-memberships::before {
    content: "";

    position: absolute;
    z-index: 0;

    width: 88px;
    height: 88px;

    border-radius: 50%;

    border:
        1px solid rgba(63, 157, 216, 0.34);

    background:
        radial-gradient(
            circle at 32% 27%,
            rgba(255, 255, 255, 0.98) 0 5%,
            rgba(255, 255, 255, 0.46) 8%,
            rgba(170, 225, 252, 0.22) 39%,
            rgba(104, 192, 237, 0.08) 68%,
            transparent 72%
        );

    box-shadow:
        inset -10px -14px 22px rgba(81, 172, 225, 0.10),
        0 12px 30px rgba(80, 163, 211, 0.06);

    pointer-events: none;
}


/* Crew bubble placement */
.premium-crew::before {
    top: 7%;
    right: 5%;
}


/* Membership bubble placement */
.premium-memberships::before {
    top: 8%;
    right: 4%;
}


/* =========================================================
   CURVED WATER / RIPPLE GRAPHIC
   This replaces the photorealistic bottom-corner artwork
   with something CSS can ACTUALLY reproduce faithfully.
   ========================================================= */

.premium-crew::after,
.premium-memberships::after {
    content: "";

    position: absolute;
    z-index: 0;

    width: 720px;
    height: 300px;

    border-radius: 50%;

    border:
        2px solid rgba(92, 183, 232, 0.22);

    box-shadow:
        0 0 0 34px rgba(111, 195, 237, 0.035),
        0 0 0 72px rgba(111, 195, 237, 0.025),
        inset 0 22px 40px rgba(255, 255, 255, 0.44);

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.64) 0%,
            rgba(184, 226, 247, 0.16) 34%,
            rgba(116, 198, 238, 0.07) 60%,
            transparent 72%
        );

    pointer-events: none;
}


/* Crew has its water movement lower right */
.premium-crew::after {
    right: -240px;
    bottom: -190px;

    transform:
        rotate(-7deg);
}


/* Membership gets the dramatic sweep from lower left */
.premium-memberships::after {
    left: -210px;
    bottom: -190px;

    transform:
        rotate(8deg);
}


/* =========================================================
   CREW SECTION ATMOSPHERE
   ========================================================= */

.premium-crew {
    padding-top:
        clamp(6rem, 8vw, 9rem);

    padding-bottom:
        clamp(6rem, 8vw, 9rem);
}


/* subtle curved polish-line behind content */

.premium-crew__content::after {
    content: "";

    position: absolute;
    z-index: -1;

    width: 560px;
    height: 560px;

    top: 7%;
    right: -14%;

    border-radius: 50%;

    border:
        1px solid rgba(67, 159, 216, 0.16);

    box-shadow:
        0 0 0 44px rgba(83, 177, 226, 0.025);

    pointer-events: none;
}


/* Image gets a slightly more premium floating treatment */
.premium-crew__media,
.premium-crew__image,
.premium-crew figure {
    position: relative;
    z-index: 2;
}


/* =========================================================
   MEMBERSHIP SECTION
   Move away from "PowerPoint pricing table"
   ========================================================= */

.premium-memberships {
    padding-top:
        clamp(6rem, 8vw, 9rem);

    padding-bottom:
        clamp(7rem, 9vw, 10rem);
}


/* Give membership intro a little more breathing room */

.premium-memberships__header,
.premium-memberships__intro {
    margin-bottom:
        clamp(3rem, 5vw, 5rem);
}


/* =========================================================
   MEMBERSHIP GRID HIERARCHY
   ========================================================= */

.premium-memberships
:is(
    .membership-grid,
    .membership-plans,
    .membership-cards
) {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(260px, 0.88fr)
        minmax(360px, 1.24fr)
        minmax(260px, 0.88fr);

    align-items: stretch;

    gap:
        clamp(1.25rem, 2vw, 2rem);

    max-width: 1280px;

    margin-inline: auto;
}


/* =========================================================
   SUPPORTING MEMBERSHIPS
   ========================================================= */

.premium-memberships
:is(.membership-card, .membership-plan)
:not(.premium-membership-featured-fix) {
    position: relative;

    min-height: 470px;

    padding:
        clamp(2rem, 3vw, 3rem);

    border:
        1px solid rgba(30, 83, 117, 0.13);

    border-radius: 28px;

    background:
        rgba(255, 255, 255, 0.82);

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 26px 60px rgba(36, 83, 113, 0.08);

    transform:
        translateY(28px);
}


/* =========================================================
   FEATURED MEMBERSHIP
   ========================================================= */

.premium-membership-featured-fix {
    position: relative;

    min-height: 530px;

    padding:
        clamp(2.5rem, 3.5vw, 3.5rem);

    border:
        1px solid rgba(121, 199, 241, 0.23);

    border-radius: 32px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(71, 156, 209, 0.20),
            transparent 24%
        ),
        linear-gradient(
            150deg,
            #061c2e 0%,
            #082b46 54%,
            #0d4268 100%
        );

    box-shadow:
        0 34px 75px rgba(13, 58, 88, 0.18);

    transform:
        translateY(0);
}


/* Gloss/water sheen inside featured card */
.premium-membership-featured-fix::before {
    content: "";

    position: absolute;
    z-index: 0;

    width: 460px;
    height: 460px;

    right: -220px;
    bottom: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(113, 204, 248, 0.24),
            rgba(56, 146, 198, 0.08) 43%,
            transparent 68%
        );

    pointer-events: none;
}


/* small droplet inside featured card */
.premium-membership-featured-fix::after {
    content: "";

    position: absolute;
    z-index: 0;

    width: 74px;
    height: 74px;

    right: 7%;
    bottom: 11%;

    border-radius: 50%;

    border:
        1px solid rgba(160, 223, 252, 0.26);

    background:
        radial-gradient(
            circle at 30% 26%,
            rgba(255,255,255,0.8) 0 6%,
            rgba(124,205,245,0.22) 30%,
            transparent 70%
        );

    pointer-events: none;
}


/* Keep featured content above its internal water graphics */
.premium-membership-featured-fix > * {
    position: relative;
    z-index: 2;
}


/* =========================================================
   FEATURED CTA
   Make the premium plan visually dominant
   ========================================================= */

.premium-membership-featured-fix a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding:
        0.85rem
        1.7rem;

    border-radius: 999px;

    background:
        var(--yellow);

    color:
        var(--ink);

    box-shadow:
        0 16px 34px rgba(255, 212, 71, 0.17);

    font-weight: 950;

    text-decoration: none;
}


/* Keep yellow featured plan CTA yellow on hover */
.premium-membership-featured-fix a:hover,
.premium-membership-featured-fix a:focus-visible {
    background:
        #ffe16c;

    color:
        var(--ink);

    transform:
        translateY(-1px);
}


/* =========================================================
   MORE CSS BUBBLES USING EXISTING CARD ELEMENTS
   ========================================================= */

.premium-memberships
:is(.membership-card, .membership-plan)
:not(.premium-membership-featured-fix)::before {
    content: "";

    position: absolute;

    width: 38px;
    height: 38px;

    top: -16px;
    right: -13px;

    border-radius: 50%;

    border:
        1px solid rgba(87, 177, 226, 0.21);

    background:
        rgba(219, 243, 255, 0.28);

    pointer-events: none;
}


/* =========================================================
   LARGE DESKTOP / ULTRAWIDE
   Keep design disciplined.
   ========================================================= */

@media (min-width: 1700px) {

    .premium-crew,
    .premium-memberships {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .premium-memberships
    :is(
        .membership-grid,
        .membership-plans,
        .membership-cards
    ) {
        max-width: 1400px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1080px) {

    .premium-memberships
    :is(
        .membership-grid,
        .membership-plans,
        .membership-cards
    ) {
        grid-template-columns:
            1fr
            1fr;

        max-width:
            calc(100% - 48px);
    }

    .premium-membership-featured-fix {
        grid-column:
            1 / -1;

        order: -1;

        min-height: 460px;
    }

    .premium-memberships
    :is(.membership-card, .membership-plan)
    :not(.premium-membership-featured-fix) {
        transform: none;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .premium-crew,
    .premium-memberships {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }

    .premium-crew::after,
    .premium-memberships::after {
        width: 420px;
        height: 190px;
    }

    .premium-memberships
    :is(
        .membership-grid,
        .membership-plans,
        .membership-cards
    ) {
        grid-template-columns:
            1fr;

        max-width:
            calc(100% - 28px);
    }

    .premium-membership-featured-fix {
        grid-column: auto;

        min-height: 0;
    }

    .premium-memberships
    :is(.membership-card, .membership-plan)
    :not(.premium-membership-featured-fix) {
        min-height: 0;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIP MOCKUP MATCH V2
   Uses real SVG water artwork + actual vehicle photography.
   ========================================================= */

.membership-premium {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
        clamp(6.5rem, 8vw, 9rem)
        0
        clamp(7.5rem, 9vw, 10rem);

    background:
        #eef8fd
        url("../images/membership-water-bg.svg")
        center center / cover
        no-repeat;
}

.membership-premium__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            calc(100% - 64px),
            1420px
        );

    margin-inline: auto;
}


/* =========================================================
   INTRO
   ========================================================= */

.membership-premium__intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(310px, 0.55fr);

    align-items: end;

    gap:
        clamp(4rem, 8vw, 9rem);

    margin-bottom:
        clamp(3.75rem, 6vw, 6rem);
}

.membership-premium__heading {
    max-width: 830px;
}

.membership-premium__heading h2 {
    margin-top: 1.1rem;

    color: #07111e;

    font-size:
        clamp(4rem, 5.9vw, 6.7rem);

    line-height: 0.9;

    letter-spacing: -0.06em;
}

.membership-premium__heading h2 span {
    display: block;

    color: #0d568e;
}

.membership-premium__intro-copy {
    max-width: 430px;

    margin:
        0
        0
        0.6rem;

    color: #182a3a;

    font-size:
        clamp(1rem, 1.15vw, 1.14rem);

    font-weight: 500;

    line-height: 1.65;
}


/* =========================================================
   PLAN LAYOUT
   ========================================================= */

.membership-premium__plans {
    display: grid;

    grid-template-columns:
        minmax(270px, 0.82fr)
        minmax(500px, 1.36fr)
        minmax(270px, 0.82fr);

    align-items: end;

    gap:
        clamp(1.4rem, 2vw, 2.25rem);

    max-width: 1360px;

    margin-inline: auto;
}


/* =========================================================
   ALL PLANS
   ========================================================= */

.membership-premium .membership-plan {
    position: relative;

    overflow: hidden;

    border-radius: 30px;
}

.membership-premium .membership-plan__eyebrow {
    margin: 0;

    color: #07518c;

    font-size: 0.72rem;
    font-weight: 950;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.membership-premium .membership-plan h3 {
    margin:
        1rem
        0
        0;

    color: #07111e;

    font-size:
        clamp(2.3rem, 2.7vw, 3rem);

    font-weight: 950;

    line-height: 0.96;

    letter-spacing: -0.045em;
}

.membership-premium .membership-plan__description {
    margin:
        1.4rem
        0
        0;

    color: #536779;

    font-size: 0.97rem;
    font-weight: 500;

    line-height: 1.6;
}

.membership-premium .membership-plan__features {
    display: grid;

    gap: 0;

    margin:
        1.8rem
        0
        0;

    padding: 0;

    list-style: none;
}

.membership-premium .membership-plan__features li {
    display: flex;

    align-items: center;

    gap: 0.85rem;

    min-height: 50px;

    border-bottom:
        1px solid rgba(14, 55, 82, 0.13);

    color: #102232;

    font-size: 0.9rem;
    font-weight: 750;

    line-height: 1.35;
}

.membership-premium .membership-plan__check {
    flex:
        0
        0
        28px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background: #c9ecfb;

    color: #07518c;

    font-size: 0.82rem;
    font-weight: 950;
}


/* =========================================================
   SUPPORT PLANS
   ========================================================= */

.membership-premium .membership-plan--support {
    min-height: 510px;

    padding:
        clamp(2.4rem, 3vw, 3.2rem);

    border:
        1px solid rgba(24, 72, 101, 0.12);

    background:
        rgba(255, 255, 255, 0.88);

    box-shadow:
        0 28px 70px rgba(48, 91, 117, 0.09);

    backdrop-filter:
        blur(12px);
}

.membership-plan__text-link {
    position: absolute;

    left:
        clamp(2.4rem, 3vw, 3.2rem);

    bottom: 2.4rem;

    display: inline-flex;

    align-items: center;

    gap: 0.7rem;

    color: #07518c;

    font-size: 0.8rem;
    font-weight: 950;

    letter-spacing: 0.04em;
    text-decoration: none;

    text-transform: uppercase;
}


/* =========================================================
   FEATURED PLAN
   ========================================================= */

.membership-premium .membership-plan--featured {
    min-height: 585px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(190px, 0.92fr);

    background:
        #061d30;

    border:
        1px solid rgba(119, 201, 243, 0.24);

    box-shadow:
        0 36px 80px rgba(14, 57, 85, 0.20);
}

.membership-plan__featured-copy {
    position: relative;
    z-index: 3;

    padding:
        clamp(2.8rem, 3.5vw, 3.6rem)
        1rem
        clamp(2.8rem, 3.5vw, 3.6rem)
        clamp(2.8rem, 3.5vw, 3.6rem);

    background:
        linear-gradient(
            90deg,
            rgba(6, 29, 48, 1) 0%,
            rgba(6, 29, 48, 0.98) 72%,
            rgba(6, 29, 48, 0) 100%
        );
}

.membership-premium
.membership-plan--featured
.membership-plan__eyebrow {
    color: #ffd447;
}

.membership-premium
.membership-plan--featured h3 {
    color: #ffffff;
}

.membership-premium
.membership-plan--featured
.membership-plan__description {
    color: rgba(255, 255, 255, 0.78);
}

.membership-premium
.membership-plan--featured
.membership-plan__features {
    max-width: 390px;
}

.membership-premium
.membership-plan--featured
.membership-plan__features li {
    border-color:
        rgba(255, 255, 255, 0.16);

    color:
        rgba(255, 255, 255, 0.95);
}

.membership-premium
.membership-plan--featured
.membership-plan__check {
    background: #ffd447;
    color: #07111e;
}

.membership-plan__featured-image {
    position: absolute;

    z-index: 1;

    top: 0;
    right: 0;
    bottom: 0;

    width: 48%;

    background:
        linear-gradient(
            90deg,
            #061d30 0%,
            rgba(6, 29, 48, 0.62) 26%,
            rgba(6, 29, 48, 0.08) 60%,
            transparent 100%
        ),
        url("../images/premium-service-membership.webp")
        66% center / cover
        no-repeat;
}

.membership-plan__popular {
    position: absolute;

    z-index: 5;

    top: 2rem;
    right: 2rem;

    display: inline-flex;

    align-items: center;

    gap: 0.45rem;

    min-height: 36px;

    padding:
        0.55rem
        1rem;

    border-radius: 999px;

    background: #ffd447;

    color: #07111e;

    font-size: 0.68rem;
    font-weight: 950;

    letter-spacing: 0.055em;

    text-transform: uppercase;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.14);
}

.membership-plan__popular > span {
    font-size: 0.9rem;
}

.membership-plan__button {
    position: absolute;

    z-index: 5;

    left:
        clamp(2.8rem, 3.5vw, 3.6rem);

    bottom:
        clamp(2.8rem, 3.5vw, 3.6rem);

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 1rem;

    min-width: 250px;
    min-height: 54px;

    padding:
        0.9rem
        1.7rem;

    border-radius: 999px;

    background: #ffd447;

    color: #07111e;

    font-size: 0.82rem;
    font-weight: 950;

    letter-spacing: 0.035em;

    text-decoration: none;

    text-transform: uppercase;

    box-shadow:
        0 18px 36px rgba(255, 212, 71, 0.16);
}


/* =========================================================
   DESKTOP HOVER POLISH
   ========================================================= */

@media (hover: hover) {

    .membership-plan__text-link,
    .membership-plan__button {
        transition:
            transform 160ms ease,
            opacity 160ms ease,
            box-shadow 160ms ease;
    }

    .membership-plan__text-link:hover {
        transform:
            translateX(4px);
    }

    .membership-plan__button:hover {
        transform:
            translateY(-2px);

        box-shadow:
            0 22px 42px rgba(255, 212, 71, 0.23);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .membership-premium__intro {
        grid-template-columns: 1fr;

        gap: 2rem;
    }

    .membership-premium__intro-copy {
        max-width: 600px;
    }

    .membership-premium__plans {
        grid-template-columns:
            1fr
            1fr;
    }

    .membership-premium .membership-plan--featured {
        grid-column:
            1 / -1;

        min-height: 540px;

        order: -1;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .membership-premium {
        padding:
            5rem
            0;
    }

    .membership-premium__inner {
        width:
            min(
                calc(100% - 28px),
                1420px
            );
    }

    .membership-premium__heading h2 {
        font-size:
            clamp(3.3rem, 14vw, 4.7rem);
    }

    .membership-premium__plans {
        grid-template-columns:
            1fr;
    }

    .membership-premium .membership-plan--support,
    .membership-premium .membership-plan--featured {
        min-height: auto;
    }

    .membership-premium .membership-plan--support {
        padding-bottom: 6.2rem;
    }

    .membership-premium .membership-plan--featured {
        display: block;

        padding-bottom: 7rem;
    }

    .membership-plan__featured-copy {
        padding:
            2.4rem
            1.5rem;
    }

    .membership-plan__featured-image {
        opacity: 0.28;

        width: 100%;
    }

    .membership-plan__popular {
        top: 1.4rem;
        right: 1.4rem;
    }

    .membership-plan__button {
        left: 1.5rem;
        right: 1.5rem;
        bottom: 1.5rem;

        width: auto;
    }

    .membership-plan__text-link {
        left: 2.4rem;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - CREW TO MEMBERSHIP WATER HANDOFF

   Smooth visual transition from Crew into Membership.
   Adds a CSS-only upper-left water sweep without touching
   the membership cards or their approved hierarchy.
   ========================================================= */


/* =========================================================
   SECTION-TO-SECTION WATER HANDOFF

   This soft wave rises slightly into the previous section,
   visually connecting Kevin's water/bubble atmosphere to
   the Membership section below.
   ========================================================= */

.membership-premium {
    position: relative;

    overflow: hidden;

    margin-top: -1px;
}


/* Broad soft incoming water sheet */
.membership-premium::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: -92px;
    left: -8%;

    width: 116%;
    height: 190px;

    border-radius:
        50% 50% 0 0 /
        100% 100% 0 0;

    background:
        linear-gradient(
            180deg,
            rgba(236, 248, 253, 0) 0%,
            rgba(226, 244, 252, 0.44) 34%,
            rgba(218, 240, 251, 0.82) 69%,
            rgba(238, 248, 253, 0.98) 100%
        );

    box-shadow:
        inset 0 22px 40px rgba(255,255,255,0.42),
        0 -1px 0 rgba(105,185,228,0.10);

    transform:
        rotate(-1.4deg);

    pointer-events: none;
}


/* Thin edge/ripple riding the transition */
.membership-premium::after {
    content: "";

    position: absolute;
    z-index: 1;

    top: 8px;
    left: -12%;

    width: 124%;
    height: 122px;

    border-top:
        2px solid rgba(78, 171, 221, 0.18);

    border-radius:
        50%;

    transform:
        rotate(-1.7deg);

    pointer-events: none;
}


/* =========================================================
   MEMBERSHIP UPPER-LEFT WATER ART

   Two large curved ripple lines plus a soft watery glow.
   This is deliberately abstract and CSS-reproducible.
   ========================================================= */

.membership-premium__inner {
    position: relative;
}


/* Large upper-left water sweep */
.membership-premium__inner::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: -112px;
    left: -250px;

    width: 720px;
    height: 330px;

    border-radius: 50%;

    border:
        2px solid rgba(73, 168, 219, 0.19);

    box-shadow:
        0 0 0 36px rgba(99, 187, 232, 0.028),
        0 0 0 78px rgba(99, 187, 232, 0.018),
        inset 0 -32px 70px rgba(117, 203, 244, 0.07);

    background:
        radial-gradient(
            ellipse at 58% 68%,
            rgba(255,255,255,0.52) 0%,
            rgba(163,219,246,0.13) 42%,
            rgba(96,185,231,0.04) 62%,
            transparent 72%
        );

    transform:
        rotate(-13deg);

    pointer-events: none;
}


/* Small bubble grouping around the upper-left sweep */
.membership-premium__inner::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: 58px;
    left: 28px;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    border:
        1px solid rgba(73, 168, 219, 0.30);

    background:
        radial-gradient(
            circle at 31% 26%,
            rgba(255,255,255,0.98) 0 6%,
            rgba(255,255,255,0.48) 9%,
            rgba(168,222,247,0.22) 38%,
            rgba(103,191,235,0.08) 67%,
            transparent 73%
        );

    box-shadow:
        76px -42px 0 -12px rgba(173, 224, 248, 0.20),
        138px 26px 0 -16px rgba(142, 211, 244, 0.18);

    pointer-events: none;
}


/* Real membership content always remains above decoration */
.membership-premium__inner > * {
    position: relative;
    z-index: 2;
}


/* =========================================================
   SUBTLE TOP-LEFT GLOW

   Keeps the wave from looking like a random outline floating
   behind the heading.
   ========================================================= */

.membership-premium__heading {
    position: relative;
}

.membership-premium__heading::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: -70px;
    left: -110px;

    width: 500px;
    height: 270px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(114, 199, 241, 0.10) 0%,
            rgba(154, 219, 248, 0.055) 43%,
            transparent 72%
        );

    filter:
        blur(4px);

    pointer-events: none;
}


/* =========================================================
   LARGE / ULTRAWIDE

   Let the graphic breathe without allowing it to invade
   the membership headline.
   ========================================================= */

@media (min-width: 1700px) {

    .membership-premium__inner::before {
        left: -300px;

        width: 820px;
        height: 360px;
    }

    .membership-premium__inner::after {
        left: -2px;
    }
}


/* =========================================================
   TABLET

   Pull the artwork outward so it remains atmospheric rather
   than crossing through text.
   ========================================================= */

@media (max-width: 1100px) {

    .membership-premium::before {
        top: -62px;

        height: 145px;
    }

    .membership-premium::after {
        top: 10px;
    }

    .membership-premium__inner::before {
        top: -92px;
        left: -300px;

        width: 640px;
        height: 280px;

        opacity: 0.72;
    }

    .membership-premium__inner::after {
        top: 34px;
        left: 4px;

        opacity: 0.72;
    }
}


/* =========================================================
   MOBILE

   Simplify rather than letting decorative artwork compete
   with a much smaller headline.
   ========================================================= */

@media (max-width: 700px) {

    .membership-premium::before {
        top: -42px;
        left: -18%;

        width: 136%;
        height: 110px;

        opacity: 0.78;
    }

    .membership-premium::after {
        top: 4px;

        opacity: 0.65;
    }

    .membership-premium__inner::before {
        top: -62px;
        left: -310px;

        width: 500px;
        height: 225px;

        opacity: 0.46;
    }

    .membership-premium__inner::after {
        top: 22px;
        left: -4px;

        width: 32px;
        height: 32px;

        opacity: 0.55;

        box-shadow:
            58px -30px 0 -11px rgba(173,224,248,0.17);
    }

    .membership-premium__heading::before {
        top: -40px;
        left: -90px;

        width: 330px;
        height: 190px;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIP TWO LINE HEADING
   ========================================================= */

@media (min-width: 1101px) {

    .membership-premium__intro {
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(310px, 0.55fr);

        gap:
            clamp(3rem, 6vw, 7rem);
    }

    .membership-premium__heading {
        max-width: none;
    }

    .membership-premium__heading h2 {
        width: max-content;
        max-width: none;

        font-size:
            clamp(4rem, 4.8vw, 5.75rem);

        line-height: 0.92;

        white-space: nowrap;
    }

    .membership-premium__heading h2 span {
        display: block;

        white-space: nowrap;
    }

    .membership-premium__intro-copy {
        align-self: end;

        margin-bottom: 0.7rem;
    }
}


/* Keep natural wrapping on smaller screens */

@media (max-width: 1100px) {

    .membership-premium__heading h2,
    .membership-premium__heading h2 span {
        width: auto;
        max-width: 100%;

        white-space: normal;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - PROTECTION EDITORIAL REDESIGN

   Paint-reflection / ceramic-gloss visual language.
   No plain white PowerPoint background.
   ========================================================= */

.protection-editorial {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
        clamp(7rem, 9vw, 10rem)
        0;

    background:
        radial-gradient(
            circle at 83% 16%,
            rgba(114, 199, 241, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 11% 82%,
            rgba(92, 178, 223, 0.10),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            #f9fcfe 0%,
            #edf7fc 52%,
            #f8fcfe 100%
        );
}


/* =========================================================
   LARGE CERAMIC / PAINT REFLECTION ARCS
   ========================================================= */

.protection-editorial::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: -260px;
    right: -260px;

    width: 900px;
    height: 900px;

    border-radius: 50%;

    border:
        2px solid rgba(73, 164, 215, 0.16);

    box-shadow:
        0 0 0 55px rgba(87, 177, 225, 0.025),
        0 0 0 120px rgba(87, 177, 225, 0.016),
        inset 0 -60px 110px rgba(112, 201, 243, 0.05);

    pointer-events: none;
}

.protection-editorial::after {
    content: "";

    position: absolute;
    z-index: 0;

    left: -290px;
    bottom: -370px;

    width: 840px;
    height: 620px;

    border-radius: 50%;

    border:
        2px solid rgba(72, 166, 217, 0.16);

    box-shadow:
        0 0 0 42px rgba(87, 177, 225, 0.022),
        0 0 0 94px rgba(87, 177, 225, 0.015);

    transform:
        rotate(-10deg);

    pointer-events: none;
}


/* =========================================================
   SOFT GLOSS SWEEP
   ========================================================= */

.protection-editorial__gloss {
    position: absolute;
    z-index: 0;

    left: -12%;
    top: 42%;

    width: 128%;
    height: 250px;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,0.48) 24%,
            rgba(144, 211, 244, 0.14) 50%,
            rgba(255,255,255,0.48) 74%,
            transparent 100%
        );

    filter:
        blur(16px);

    transform:
        rotate(-5deg);

    pointer-events: none;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.protection-editorial__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            calc(100% - 64px),
            1420px
        );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(440px, 0.9fr)
        minmax(560px, 1.1fr);

    align-items: center;

    gap:
        clamp(4rem, 7vw, 8rem);
}


/* =========================================================
   COPY
   ========================================================= */

.protection-editorial__content {
    max-width: 610px;
}

.protection-editorial__content h2 {
    margin-top: 1.25rem;

    color: #07111e;

    font-size:
        clamp(4.1rem, 5.2vw, 6rem);

    line-height: 0.92;

    letter-spacing:
        -0.055em;
}

.protection-editorial__content h2 span {
    display: block;

    color: #0d568e;
}

.protection-editorial__lead {
    max-width: 590px;

    margin:
        2rem
        0
        0;

    color: #31495c;

    font-size:
        clamp(1rem, 1.08vw, 1.08rem);

    font-weight: 500;

    line-height: 1.72;
}


/* =========================================================
   EDITORIAL STEPS
   ========================================================= */

.protection-editorial__steps {
    margin-top:
        clamp(2.5rem, 4vw, 3.5rem);

    border-top:
        1px solid rgba(18, 57, 83, 0.18);
}

.protection-step {
    display: grid;

    grid-template-columns:
        64px
        minmax(0, 1fr);

    gap: 1.1rem;

    align-items: center;

    min-height: 92px;

    padding:
        1.25rem
        0;

    border-bottom:
        1px solid rgba(18, 57, 83, 0.16);
}

.protection-step__number {
    color: #0d568e;

    font-size: 1.15rem;
    font-weight: 950;

    letter-spacing: -0.02em;
}

.protection-step h3 {
    margin: 0;

    color: #07111e;

    font-size: 1rem;
    font-weight: 900;

    line-height: 1.3;
}

.protection-step p {
    margin:
        0.3rem
        0
        0;

    color: #4b6070;

    font-size: 0.9rem;
    font-weight: 500;

    line-height: 1.48;
}

.protection-editorial__cta {
    margin-top: 2rem;
}


/* =========================================================
   PHOTOGRAPHY
   ========================================================= */

.protection-editorial__media {
    position: relative;

    min-height:
        clamp(580px, 45vw, 720px);

    overflow: hidden;

    border-radius: 34px;

    box-shadow:
        0 36px 90px rgba(37, 83, 111, 0.16);
}

.protection-editorial__media img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;
}


/* subtle reflective sheen across image */
.protection-editorial__shine {
    position: absolute;
    z-index: 2;

    top: -25%;
    left: -35%;

    width: 90%;
    height: 155%;

    background:
        linear-gradient(
            115deg,
            transparent 28%,
            rgba(255,255,255,0.03) 38%,
            rgba(255,255,255,0.26) 50%,
            rgba(255,255,255,0.04) 62%,
            transparent 72%
        );

    transform:
        rotate(5deg);

    pointer-events: none;
}


/* =========================================================
   GLOSS BADGE
   ========================================================= */

.protection-editorial__badge {
    position: absolute;
    z-index: 4;

    right: 1.8rem;
    bottom: 1.8rem;

    min-width: 190px;

    padding:
        1rem
        1.15rem;

    border:
        1px solid rgba(21, 61, 88, 0.09);

    border-radius: 16px;

    background:
        rgba(255,255,255,0.92);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 16px 34px rgba(0,0,0,0.10);
}

.protection-editorial__badge small {
    display: block;

    color: #526779;

    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}

.protection-editorial__badge strong {
    display: block;

    margin-top: 0.3rem;

    color: #07111e;

    font-size: 1rem;
    font-weight: 950;
}


/* =========================================================
   ULTRAWIDE
   ========================================================= */

@media (min-width: 1700px) {

    .protection-editorial__inner {
        max-width: 1500px;
    }

    .protection-editorial__content h2 {
        font-size: 5.8rem;
    }

    .protection-editorial__media {
        min-height: 720px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .protection-editorial__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .protection-editorial__content {
        max-width: 760px;
    }

    .protection-editorial__media {
        min-height: 620px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .protection-editorial {
        padding:
            5rem
            0;
    }

    .protection-editorial__inner {
        width:
            min(
                calc(100% - 28px),
                1420px
            );

        gap: 3rem;
    }

    .protection-editorial__content h2 {
        font-size:
            clamp(3.2rem, 14vw, 4.5rem);
    }

    .protection-step {
        grid-template-columns:
            48px
            minmax(0, 1fr);
    }

    .protection-editorial__media {
        min-height: 460px;

        border-radius: 24px;
    }

    .protection-editorial__badge {
        right: 1rem;
        bottom: 1rem;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - PROTECTION FULL BLEED SHOWCASE

   Flipped companion to the Recovery section:
   dark editorial panel left, full-height photography right.
   ========================================================= */

.protection-showcase {
    position: relative;
    isolation: isolate;

    display: grid;

    grid-template-columns:
        minmax(520px, 43%)
        minmax(0, 57%);

    min-height:
        clamp(720px, 48vw, 860px);

    overflow: hidden;

    background: #061c2e;
}


/* =========================================================
   DARK CONTENT PANEL
   ========================================================= */

.protection-showcase__content {
    position: relative;

    display: flex;
    align-items: center;

    min-height:
        clamp(720px, 48vw, 860px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(53, 145, 201, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 80% 86%,
            rgba(40, 122, 174, 0.13),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #061725 0%,
            #08263d 56%,
            #0b3553 100%
        );

    color: #ffffff;
}


/* subtle polished-paint arcs */
.protection-showcase__content::before {
    content: "";

    position: absolute;

    width: 680px;
    height: 680px;

    left: -390px;
    bottom: -430px;

    border-radius: 50%;

    border:
        1px solid rgba(112, 202, 244, 0.17);

    box-shadow:
        0 0 0 44px rgba(112, 202, 244, 0.025),
        0 0 0 92px rgba(112, 202, 244, 0.016);

    pointer-events: none;
}

.protection-showcase__content::after {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    top: -330px;
    right: -290px;

    border-radius: 50%;

    border:
        1px solid rgba(112, 202, 244, 0.12);

    box-shadow:
        0 0 0 38px rgba(112, 202, 244, 0.018);

    pointer-events: none;
}


/* diagonal gloss reflection */
.protection-showcase__gloss-lines {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            118deg,
            transparent 0%,
            transparent 37%,
            rgba(255,255,255,0.018) 38%,
            rgba(255,255,255,0.055) 43%,
            rgba(255,255,255,0.012) 48%,
            transparent 49%,
            transparent 100%
        );
}


/* =========================================================
   CONTENT INNER
   ========================================================= */

.protection-showcase__content-inner {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 650px;

    margin-left: auto;

    padding:
        clamp(4.5rem, 6vw, 6.5rem)
        clamp(3.5rem, 5vw, 5.5rem)
        clamp(4.5rem, 6vw, 6.5rem)
        max(
            48px,
            calc((100vw - 1480px) / 2 + 48px)
        );
}

.protection-showcase .section-label {
    color: var(--yellow);
}

.protection-showcase__content h2 {
    margin-top: 1.25rem;

    max-width: 620px;

    color: #ffffff;

    font-size:
        clamp(3.9rem, 4.7vw, 5.5rem);

    line-height: 0.91;

    letter-spacing: -0.055em;
}

.protection-showcase__content h2 span {
    display: block;

    color: #7fc4ef;
}


/* =========================================================
   LEAD COPY
   ========================================================= */

.protection-showcase__lead {
    max-width: 570px;

    margin:
        1.7rem
        0
        0;

    color:
        rgba(255,255,255,0.84);

    font-size:
        clamp(1rem, 1.05vw, 1.08rem);

    font-weight: 500;

    line-height: 1.7;
}


/* =========================================================
   PROCESS
   ========================================================= */

.protection-showcase__steps {
    margin-top:
        clamp(2.5rem, 3.5vw, 3.5rem);

    border-top:
        1px solid rgba(255,255,255,0.18);
}

.protection-showcase__step {
    display: grid;

    grid-template-columns:
        62px
        minmax(0, 1fr);

    align-items: center;

    gap: 1rem;

    min-height: 94px;

    padding:
        1.15rem
        0;

    border-bottom:
        1px solid rgba(255,255,255,0.15);
}

.protection-showcase__number {
    color: #7fc4ef;

    font-size: 1.1rem;
    font-weight: 950;
}

.protection-showcase__step h3 {
    margin: 0;

    color: #ffffff;

    font-size: 1rem;
    font-weight: 900;

    line-height: 1.3;
}

.protection-showcase__step p {
    margin:
        0.3rem
        0
        0;

    color:
        rgba(255,255,255,0.72);

    font-size: 0.9rem;
    font-weight: 500;

    line-height: 1.48;
}


/* =========================================================
   CTA
   ========================================================= */

.protection-showcase__cta {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 0.9rem;

    min-height: 52px;

    margin-top: 2rem;

    padding:
        0.9rem
        1.6rem;

    border-radius: 999px;

    background: var(--yellow);

    color: #07111e;

    font-size: 0.8rem;
    font-weight: 950;

    letter-spacing: 0.035em;

    text-decoration: none;

    text-transform: uppercase;

    box-shadow:
        0 18px 38px rgba(255, 212, 71, 0.14);
}

.protection-showcase__cta:hover,
.protection-showcase__cta:focus-visible {
    background: #ffe16c;
    color: #07111e;

    transform: translateY(-1px);
}


/* =========================================================
   FULL HEIGHT PHOTOGRAPHY
   ========================================================= */

.protection-showcase__media {
    position: relative;

    min-height:
        clamp(720px, 48vw, 860px);

    overflow: hidden;

    background: #122a3b;
}

.protection-showcase__media img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;
}


/* slight photographic depth at panel seam */
.protection-showcase__media::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(4, 19, 31, 0.24) 0%,
            rgba(4, 19, 31, 0.05) 11%,
            transparent 25%
        );

    pointer-events: none;
}


/* ceramic-style reflection across paint */
.protection-showcase__media-sheen {
    position: absolute;
    z-index: 3;

    top: -22%;
    left: -42%;

    width: 90%;
    height: 160%;

    background:
        linear-gradient(
            118deg,
            transparent 26%,
            rgba(255,255,255,0.02) 36%,
            rgba(255,255,255,0.22) 49%,
            rgba(255,255,255,0.03) 61%,
            transparent 72%
        );

    transform: rotate(6deg);

    pointer-events: none;
}


/* =========================================================
   GLOSS BADGE
   ========================================================= */

.protection-showcase__badge {
    position: absolute;
    z-index: 5;

    right:
        clamp(1.5rem, 3vw, 3rem);

    bottom:
        clamp(1.5rem, 3vw, 3rem);

    min-width: 200px;

    padding:
        1rem
        1.2rem;

    border:
        1px solid rgba(16, 52, 76, 0.08);

    border-radius: 16px;

    background:
        rgba(255,255,255,0.93);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 18px 42px rgba(0,0,0,0.12);
}

.protection-showcase__badge small {
    display: block;

    color: #526779;

    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}

.protection-showcase__badge strong {
    display: block;

    margin-top: 0.3rem;

    color: #07111e;

    font-size: 1.02rem;
    font-weight: 950;
}


/* =========================================================
   WIDE DESKTOP
   ========================================================= */

@media (min-width: 1500px) {

    .protection-showcase {
        grid-template-columns:
            minmax(560px, 42%)
            minmax(0, 58%);
    }

    .protection-showcase__content h2 {
        font-size: 5.25rem;
    }
}


/* =========================================================
   ULTRAWIDE
   Keep panel useful rather than crushing copy.
   ========================================================= */

@media (min-width: 1800px) {

    .protection-showcase {
        grid-template-columns:
            minmax(620px, 40%)
            minmax(0, 60%);
    }

    .protection-showcase__content-inner {
        max-width: 690px;

        padding-left: 5rem;
        padding-right: 4.5rem;
    }

    .protection-showcase__content h2 {
        font-size: 5.4rem;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .protection-showcase {
        grid-template-columns: 1fr;

        min-height: 0;
    }

    .protection-showcase__content,
    .protection-showcase__media {
        min-height: 620px;
    }

    .protection-showcase__content-inner {
        max-width: 760px;

        margin-inline: auto;

        padding:
            4.5rem
            max(32px, 6vw);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .protection-showcase__content {
        min-height: 0;
    }

    .protection-showcase__content-inner {
        padding:
            4rem
            1.5rem;
    }

    .protection-showcase__content h2 {
        font-size:
            clamp(3.2rem, 14vw, 4.4rem);
    }

    .protection-showcase__step {
        grid-template-columns:
            48px
            minmax(0, 1fr);
    }

    .protection-showcase__media {
        min-height: 500px;
    }

    .protection-showcase__badge {
        right: 1rem;
        bottom: 1rem;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - PROTECTION STEP TYPOGRAPHY POLISH
   ========================================================= */

.protection-showcase__step {
    align-items: start;

    padding:
        1.35rem
        0;
}

.protection-showcase__number {
    padding-top: 0.1rem;

    color: #7fc4ef;

    font-size: 1rem;
    font-weight: 800;

    line-height: 1.4;
}

.protection-showcase__step h3 {
    margin: 0;

    color: #ffffff;

    font-size: 0.96rem;
    font-weight: 750;

    line-height: 1.4;

    letter-spacing: 0;
}

.protection-showcase__step p {
    margin:
        0.48rem
        0
        0;

    color:
        rgba(255,255,255,0.78);

    font-size: 0.91rem;
    font-weight: 450;

    line-height: 1.58;
}

/* =========================================================
   WASH & BEHOLD PREMIUM - FLEET COVERAGE POLISH

   Dispatch / service-area visual language.
   Photography and existing section architecture preserved.
   ========================================================= */

.fleet-coverage {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 83% 18%,
            rgba(63, 151, 205, 0.12),
            transparent 26%
        ),
        radial-gradient(
            circle at 18% 83%,
            rgba(48, 132, 187, 0.09),
            transparent 28%
        ),
        #061a2a;
}


/* =========================================================
   SERVICE AREA / DISPATCH GRAPHICS

   Large route arcs instead of repeating the water bubbles.
   ========================================================= */

.fleet-coverage::before {
    content: "";

    position: absolute;
    z-index: 0;

    width: 1050px;
    height: 620px;

    top: -355px;
    right: -350px;

    border-radius: 50%;

    border:
        1px solid rgba(114, 201, 243, 0.17);

    box-shadow:
        0 0 0 54px rgba(114, 201, 243, 0.023),
        0 0 0 118px rgba(114, 201, 243, 0.014);

    transform:
        rotate(-12deg);

    pointer-events: none;
}


.fleet-coverage::after {
    content: "";

    position: absolute;
    z-index: 0;

    width: 880px;
    height: 540px;

    left: -410px;
    bottom: -350px;

    border-radius: 50%;

    border:
        1px solid rgba(114, 201, 243, 0.14);

    box-shadow:
        0 0 0 42px rgba(114, 201, 243, 0.019),
        0 0 0 92px rgba(114, 201, 243, 0.012);

    transform:
        rotate(14deg);

    pointer-events: none;
}


/* Actual section content remains above route graphics */

.fleet-coverage > * {
    position: relative;
    z-index: 2;
}


/* =========================================================
   SMALL DISPATCH / LOCATION DOTS

   Uses layered radial gradients on the section itself.
   ========================================================= */

.fleet-coverage {
    background-image:
        radial-gradient(
            circle at 88% 30%,
            rgba(255, 212, 71, 0.76) 0 3px,
            rgba(255, 212, 71, 0.16) 4px 10px,
            transparent 11px
        ),
        radial-gradient(
            circle at 75% 72%,
            rgba(113, 201, 243, 0.70) 0 3px,
            rgba(113, 201, 243, 0.12) 4px 9px,
            transparent 10px
        ),
        radial-gradient(
            circle at 18% 26%,
            rgba(113, 201, 243, 0.56) 0 3px,
            rgba(113, 201, 243, 0.10) 4px 9px,
            transparent 10px
        ),
        radial-gradient(
            circle at 83% 18%,
            rgba(63, 151, 205, 0.12),
            transparent 26%
        ),
        radial-gradient(
            circle at 18% 83%,
            rgba(48, 132, 187, 0.09),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #061826 0%,
            #071d2e 48%,
            #082338 100%
        );
}


/* =========================================================
   HEADLINE

   Two intentional lines:
   white first line, blue second line.
   ========================================================= */

.fleet-coverage h2 {
    max-width: none;

    margin-top: 1.2rem;

    line-height: 0.93;

    letter-spacing: -0.06em;
}

.fleet-coverage__headline-line {
    display: block;

    color: #ffffff;
}

.fleet-coverage__headline-line--blue {
    color: #78bee9;
}


/* Desktop gets the cleaner two-line composition */

@media (min-width: 1200px) {

    .fleet-coverage h2 {
        font-size:
            clamp(2.9rem, 3vw, 3.75rem);
    }

    .fleet-coverage__headline-line {
        white-space: nowrap;
    }
}


/* =========================================================
   SUPPORTING COPY READABILITY

   This also catches description text if existing markup
   uses p, small, or dd elements.
   ========================================================= */

.fleet-coverage p:not(.section-label),
.fleet-coverage small,
.fleet-coverage dd {
    color:
        rgba(255, 255, 255, 0.78);

    opacity: 1;
}


/* Main descriptive paragraph gets slightly more presence */

.fleet-coverage > div p:not(.section-label) {
    line-height: 1.65;
}


/* Keep eyebrow yellow */

.fleet-coverage .section-label {
    color: var(--yellow);

    opacity: 1;
}


/* =========================================================
   FEATURE / BENEFIT ROWS

   Strengthen subordinate text without making it compete
   with each row title.
   ========================================================= */

.fleet-coverage
:is(
    li,
    dl > div,
    .feature,
    .fleet-feature,
    .coverage-feature,
    .service-area-feature
)
:is(p, small, dd) {
    color:
        rgba(255, 255, 255, 0.76);

    font-size: 0.86rem;
    font-weight: 500;

    line-height: 1.48;

    opacity: 1;
}


/* =========================================================
   TABLET

   Let headline return to natural wrapping.
   ========================================================= */

@media (max-width: 1199px) {

    .fleet-coverage__headline-line {
        white-space: normal;
    }

    .fleet-coverage::before {
        width: 720px;
        height: 460px;

        top: -290px;
        right: -330px;
    }

    .fleet-coverage::after {
        width: 620px;
        height: 420px;

        left: -340px;
        bottom: -300px;
    }
}


/* =========================================================
   MOBILE

   Graphics become quieter so they do not compete with copy.
   ========================================================= */

@media (max-width: 700px) {

    .fleet-coverage::before,
    .fleet-coverage::after {
        opacity: 0.55;
    }

    .fleet-coverage h2 {
        font-size:
            clamp(3rem, 13vw, 4.25rem);
    }

    .fleet-coverage p:not(.section-label),
    .fleet-coverage small,
    .fleet-coverage dd {
        font-size: 0.94rem;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - FLEET HEADLINE COLOR FIX
   ========================================================= */

.fleet-coverage__headline-line:not(.fleet-coverage__headline-line--blue) {
    color: #ffffff !important;
}

.fleet-coverage__headline-line--blue {
    color: #78bee9 !important;
}

/* =========================================================
   WASH & BEHOLD PREMIUM - FLEET MAP DOT POSITION FIX

   Keep dispatch dots in decorative background space,
   not inside readable content rows.
   ========================================================= */

.fleet-coverage {
    background-image:
        radial-gradient(
            circle at 92% 22%,
            rgba(255, 212, 71, 0.76) 0 3px,
            rgba(255, 212, 71, 0.16) 4px 10px,
            transparent 11px
        ),
        radial-gradient(
            circle at 64% 88%,
            rgba(113, 201, 243, 0.70) 0 3px,
            rgba(113, 201, 243, 0.12) 4px 9px,
            transparent 10px
        ),
        radial-gradient(
            circle at 9% 18%,
            rgba(113, 201, 243, 0.56) 0 3px,
            rgba(113, 201, 243, 0.10) 4px 9px,
            transparent 10px
        ),
        radial-gradient(
            circle at 83% 18%,
            rgba(63, 151, 205, 0.12),
            transparent 26%
        ),
        radial-gradient(
            circle at 18% 83%,
            rgba(48, 132, 187, 0.09),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #061826 0%,
            #071d2e 48%,
            #082338 100%
        );
}

/* =========================================================
   WASH & BEHOLD PREMIUM - FLEET TEXT READABILITY PASS
   ========================================================= */


/* Main section description */

.fleet-coverage > div p:not(.section-label),
.fleet-coverage > section p:not(.section-label) {
    color: rgba(255, 255, 255, 0.88);

    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.65;

    opacity: 1;
}


/* Feature row titles */

.fleet-coverage
:is(
    li,
    dl > div,
    .feature,
    .fleet-feature,
    .coverage-feature,
    .service-area-feature
)
:is(
    h3,
    h4,
    strong,
    dt
) {
    color: #ffffff;

    font-size: 1rem;
    font-weight: 800;
    line-height: 1.4;
}


/* Feature row descriptions */

.fleet-coverage
:is(
    li,
    dl > div,
    .feature,
    .fleet-feature,
    .coverage-feature,
    .service-area-feature
)
:is(
    p,
    small,
    dd
) {
    color: rgba(255, 255, 255, 0.84);

    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.55;

    opacity: 1;
}


/* Catch the existing Fleet markup even if the rows
   do not use one of the class names above. */

.fleet-coverage p {
    opacity: 1;
}

.fleet-coverage p:not(.section-label) {
}


/* Give each information row slightly more breathing room */

.fleet-coverage
:is(
    li,
    dl > div,
    .feature,
    .fleet-feature,
    .coverage-feature,
    .service-area-feature
) {
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .fleet-coverage p:not(.section-label) {
        font-size: 1rem;
        line-height: 1.6;
    }

    .fleet-coverage
    :is(
        li,
        dl > div,
        .feature,
        .fleet-feature,
        .coverage-feature,
        .service-area-feature
    )
    :is(
        p,
        small,
        dd
    ) {
        font-size: 0.98rem;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - FLEET EXPLICIT READABILITY FIX
   Explicit classes, no guessed selectors.
   ========================================================= */

.fleet-coverage__intro-copy {
    color: rgba(255, 255, 255, 0.92) !important;

    font-size: 1.08rem !important;
    font-weight: 500 !important;
    line-height: 1.68 !important;

    opacity: 1 !important;
}

.fleet-coverage__detail-copy {
    color: rgba(255, 255, 255, 0.82) !important;

    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;

    opacity: 1 !important;

    margin-top: 0.38rem !important;
}


/* Give each row a little more breathing room */

.fleet-coverage__detail-copy {
    padding-bottom: 0.18rem;
}


/* Mobile remains readable */

@media (max-width: 700px) {

    .fleet-coverage__intro-copy {
        font-size: 1rem !important;
    }

    .fleet-coverage__detail-copy {
        font-size: 0.98rem !important;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - GLOBAL READABILITY STANDARD

   Real reading copy should never look like fine print.
   Decorative labels and badges remain intentionally small.
   ========================================================= */


/* =========================================================
   PRIMARY BODY COPY INSIDE HOMEPAGE SECTIONS
   ========================================================= */

main section p:not(
    .section-label,
    [class*="eyebrow"],
    [class*="label"],
    [class*="badge"],
    [class*="status"]
) {
    font-size:
        clamp(1rem, 0.20vw + 0.96rem, 1.08rem);

    line-height: 1.65;

    opacity: 1;
}


/* =========================================================
   FEATURE / BENEFIT / PROCESS DESCRIPTIONS
   ========================================================= */

main section
:is(
    li,
    dd,
    .feature p,
    .feature small,
    [class*="feature"] p,
    [class*="feature"] small,
    [class*="step"] p,
    [class*="fact"] dd,
    [class*="detail"] p,
    [class*="detail"] small
) {
    font-size:
        clamp(0.98rem, 0.16vw + 0.95rem, 1.04rem);

    line-height: 1.55;

    opacity: 1;
}


/* =========================================================
   FLEET / SERVICE AREA
   ========================================================= */

.fleet-coverage__intro-copy {
    font-size: 1.08rem !important;
    line-height: 1.68 !important;

    color:
        rgba(255, 255, 255, 0.92) !important;

    opacity: 1 !important;
}

.fleet-coverage__detail-copy {
    font-size: 1rem !important;
    line-height: 1.58 !important;

    color:
        rgba(255, 255, 255, 0.84) !important;

    opacity: 1 !important;
}


/* =========================================================
   PROTECTION PROCESS
   ========================================================= */

.protection-showcase__step p {
    font-size: 1rem;

    line-height: 1.58;

    color:
        rgba(255, 255, 255, 0.80);
}

.protection-showcase__step h3 {
    font-size: 1rem;

    line-height: 1.4;
}


/* =========================================================
   RECOVERY FACTS + STORY COPY
   ========================================================= */

.premium-recovery__intro > p:not(.section-label) {
    font-size:
        clamp(1rem, 0.18vw + 0.97rem, 1.08rem);

    line-height: 1.68;
}

.premium-recovery__facts dd {
    font-size: 1rem;

    line-height: 1.45;
}

.premium-recovery__quote footer {
    font-size: 0.82rem;

    line-height: 1.45;
}


/* =========================================================
   CREW / COMPANY STORY
   ========================================================= */

.premium-crew__body-copy {
    font-size: 1.04rem;

    line-height: 1.68;

    color: #34485a !important;
}

.premium-crew__facts dt,
.premium-crew__facts dd {
    font-size: 0.94rem;

    line-height: 1.45;
}


/* =========================================================
   MEMBERSHIPS
   ========================================================= */

.membership-premium .membership-plan__description {
    font-size: 1rem;

    line-height: 1.58;
}

.membership-premium .membership-plan__features li {
    font-size: 0.98rem;

    line-height: 1.45;
}

.membership-premium__intro-copy {
    font-size:
        clamp(1rem, 0.20vw + 0.97rem, 1.08rem);

    line-height: 1.65;
}


/* =========================================================
   SERVICE EDITORIAL BANDS
   ========================================================= */

.premium-services p:not(
    .section-label,
    [class*="eyebrow"]
),
.premium-services li {
    font-size:
        clamp(0.98rem, 0.16vw + 0.95rem, 1.05rem);

    line-height: 1.58;

    opacity: 1;
}


/* =========================================================
   RESULTS / SOCIAL PROOF / FAQ / BOOKING
   ========================================================= */

.results p:not(.section-label),
.reviews p:not(.section-label),
.faq p:not(.section-label),
.booking p:not(.section-label),
#results p:not(.section-label),
#reviews p:not(.section-label),
#faq p:not(.section-label),
#book p:not(.section-label) {
    font-size:
        clamp(1rem, 0.18vw + 0.96rem, 1.06rem);

    line-height: 1.62;

    opacity: 1;
}


/* =========================================================
   DARK-SECTIONS CONTRAST FLOOR
   ========================================================= */

.protection-showcase p:not(.section-label),
.fleet-coverage p:not(.section-label),
.premium-recovery p:not(.section-label) {
    opacity: 1;
}


/* =========================================================
   DO NOT ENLARGE DECORATIVE MICROCOPY
   ========================================================= */

main section
:is(
    .section-label,
    [class*="eyebrow"],
    [class*="badge"] small,
    [class*="status"],
    [class*="stamp"] span
) {
    line-height: 1.35;
}


/* =========================================================
   MOBILE

   Mobile body copy should never shrink below comfortable
   reading size just because the viewport is smaller.
   ========================================================= */

@media (max-width: 700px) {

    main section p:not(
        .section-label,
        [class*="eyebrow"],
        [class*="label"],
        [class*="badge"],
        [class*="status"]
    ) {
        font-size: 1rem;

        line-height: 1.62;
    }

    main section
    :is(
        li,
        dd,
        [class*="feature"] p,
        [class*="step"] p,
        [class*="detail"] p
    ) {
        font-size: 0.98rem;

        line-height: 1.55;
    }

    .premium-crew__facts dt,
    .premium-crew__facts dd {
        font-size: 0.96rem;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIP FEATURED HERO TREATMENT

   Turns "The Never Again" into a full-bleed photographic
   hero card with readable copy layered over the image.
   Side memberships remain untouched.
   ========================================================= */


/* ---------------------------------------------------------
   FEATURED CARD SHELL
   --------------------------------------------------------- */

.membership-premium .membership-plan--featured {
    position: relative;

    display: block;

    min-height: 585px;

    overflow: hidden;

    background: #061d30;

    border:
        1px solid rgba(119, 201, 243, 0.26);

    border-radius: 30px;

    box-shadow:
        0 36px 80px rgba(14, 57, 85, 0.22);
}


/* ---------------------------------------------------------
   FULL-BLEED PHOTO
   --------------------------------------------------------- */

.membership-premium
.membership-plan--featured
.membership-plan__featured-image {
    position: absolute;

    z-index: 1;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 1;

    background:
        url("../images/premium-service-membership.webp")
        62% center / cover
        no-repeat;
}


/* ---------------------------------------------------------
   DARK HERO GRADIENT

   Strong on the left where the copy lives.
   Fades away so the vehicle/photo remains visible.
   --------------------------------------------------------- */

.membership-premium .membership-plan--featured::before {
    content: "";

    position: absolute;

    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 23, 38, 0.99) 0%,
            rgba(4, 23, 38, 0.96) 29%,
            rgba(4, 23, 38, 0.82) 43%,
            rgba(4, 23, 38, 0.46) 58%,
            rgba(4, 23, 38, 0.10) 76%,
            rgba(4, 23, 38, 0.02) 100%
        );

    pointer-events: none;
}


/* subtle bottom depth */
.membership-premium .membership-plan--featured::after {
    content: "";

    position: absolute;

    z-index: 2;

    left: 0;
    right: 0;
    bottom: 0;

    height: 38%;

    background:
        linear-gradient(
            0deg,
            rgba(3, 18, 30, 0.54) 0%,
            transparent 100%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   COPY OVER PHOTO
   --------------------------------------------------------- */

.membership-premium
.membership-plan--featured
.membership-plan__featured-copy {
    position: relative;

    z-index: 4;

    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 57%;
    min-height: 585px;

    padding:
        3.4rem
        1.5rem
        6.6rem
        3.4rem;

    background: none;
}


/* eyebrow */

.membership-premium
.membership-plan--featured
.membership-plan__eyebrow {
    color: #ffd447;

    margin: 0 0 1.1rem;

    font-size: 0.75rem;
    font-weight: 950;

    letter-spacing: 0.07em;
}


/* headline */

.membership-premium
.membership-plan--featured h3 {
    max-width: 330px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(2.8rem, 3.2vw, 3.7rem);

    font-weight: 950;

    line-height: 0.95;

    letter-spacing: -0.045em;
}


/* description */

.membership-premium
.membership-plan--featured
.membership-plan__description {
    max-width: 350px;

    margin-top: 1.4rem;

    color:
        rgba(255, 255, 255, 0.88);

    font-size: 1rem;

    font-weight: 500;

    line-height: 1.58;
}


/* ---------------------------------------------------------
   BENEFITS
   --------------------------------------------------------- */

.membership-premium
.membership-plan--featured
.membership-plan__features {
    width: 100%;
    max-width: 360px;

    margin-top: 1.5rem;
}

.membership-premium
.membership-plan--featured
.membership-plan__features li {
    min-height: 48px;

    color:
        rgba(255, 255, 255, 0.96);

    border-color:
        rgba(255, 255, 255, 0.22);

    font-size: 0.98rem;

    font-weight: 750;

    line-height: 1.4;
}

.membership-premium
.membership-plan--featured
.membership-plan__check {
    background: #ffd447;

    color: #07111e;
}


/* ---------------------------------------------------------
   MOST POPULAR BADGE
   --------------------------------------------------------- */

.membership-premium
.membership-plan--featured
.membership-plan__popular {
    z-index: 6;

    top: 1.7rem;
    right: 1.7rem;

    min-height: 36px;

    padding:
        0.55rem
        1rem;

    background: #ffd447;

    color: #07111e;

    border-radius: 999px;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */

.membership-premium
.membership-plan--featured
.membership-plan__button {
    z-index: 6;

    left: 3.4rem;
    right: auto;
    bottom: 2.4rem;

    width: 340px;
    max-width:
        calc(57% - 4.9rem);

    min-width: 0;
    min-height: 54px;

    background: #ffd447;

    color: #07111e;

    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 950;

    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.22);
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .membership-premium
    .membership-plan--featured {
        min-height: 560px;
    }

    .membership-premium
    .membership-plan--featured
    .membership-plan__featured-copy {
        width: 62%;
        min-height: 560px;

        padding:
            3rem
            1.5rem
            6.4rem
            3rem;
    }

    .membership-premium
    .membership-plan--featured
    .membership-plan__featured-image {
        background-position: 64% center;
    }

    .membership-premium
    .membership-plan--featured
    .membership-plan__button {
        left: 3rem;

        max-width:
            calc(62% - 4.5rem);
    }
}


/* ---------------------------------------------------------
   MOBILE

   Still behaves like a photographic hero, but increases the
   dark overlay so text never fights with the photo.
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .membership-premium
    .membership-plan--featured {
        min-height: 620px;
    }

    .membership-premium
    .membership-plan--featured
    .membership-plan__featured-image {
        background-position: 64% center;
    }

    .membership-premium
    .membership-plan--featured::before {
        background:
            linear-gradient(
                90deg,
                rgba(4, 23, 38, 0.98) 0%,
                rgba(4, 23, 38, 0.92) 55%,
                rgba(4, 23, 38, 0.50) 100%
            );
    }

    .membership-premium
    .membership-plan--featured
    .membership-plan__featured-copy {
        width: 100%;
        min-height: 620px;

        justify-content: center;

        padding:
            4.5rem
            1.5rem
            7rem;
    }

    .membership-premium
    .membership-plan--featured h3 {
        max-width: 250px;

        font-size:
            clamp(2.8rem, 13vw, 3.8rem);
    }

    .membership-premium
    .membership-plan--featured
    .membership-plan__description {
        max-width: 280px;
    }

    .membership-premium
    .membership-plan--featured
    .membership-plan__features {
        max-width: 290px;
    }

    .membership-premium
    .membership-plan--featured
    .membership-plan__button {
        left: 1.5rem;
        right: 1.5rem;
        bottom: 1.5rem;

        width: auto;
        max-width: none;
    }

    .membership-premium
    .membership-plan--featured
    .membership-plan__popular {
        top: 1.3rem;
        right: 1.3rem;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - FEATURED MEMBERSHIP HERO CLEANUP
   ========================================================= */


/* Push the useful part of the photo farther right */

.membership-premium
.membership-plan--featured
.membership-plan__featured-image {
    background-position: 70% center !important;
}


/* Stronger clean reading zone on the left */

.membership-premium
.membership-plan--featured::before {
    background:
        linear-gradient(
            90deg,
            rgba(4, 23, 38, 1) 0%,
            rgba(4, 23, 38, 0.98) 31%,
            rgba(4, 23, 38, 0.90) 44%,
            rgba(4, 23, 38, 0.63) 57%,
            rgba(4, 23, 38, 0.24) 71%,
            rgba(4, 23, 38, 0.04) 100%
        ) !important;
}


/* Copy column */

.membership-premium
.membership-plan--featured
.membership-plan__featured-copy {
    width: 60%;

    min-height: 585px;

    justify-content: center;

    padding:
        3.2rem
        1.4rem
        3.2rem
        3.4rem;
}


/* Slightly tighten the hero title */

.membership-premium
.membership-plan--featured h3 {
    max-width: 320px;

    font-size:
        clamp(2.8rem, 3vw, 3.5rem);

    line-height: 0.96;
}


/* Benefits get room to breathe */

.membership-premium
.membership-plan--featured
.membership-plan__features {
    max-width: 355px;

    margin-top: 1.45rem;
}

.membership-premium
.membership-plan--featured
.membership-plan__features li {
    min-height: 54px;

    padding:
        0.55rem
        0;

    gap: 0.9rem;

    font-size: 0.98rem;
    line-height: 1.38;
}


/* =========================================================
   FIX THE BROKEN CTA

   Put it back into normal document flow instead of allowing
   old absolute-position rules to crush it into a circle.
   ========================================================= */

.membership-premium
.membership-plan--featured
.membership-plan__button {
    position: static !important;

    display: inline-flex;

    width: 100% !important;
    max-width: 330px !important;
    min-width: 0 !important;
    min-height: 54px;

    margin:
        1.35rem
        0
        0 !important;

    padding:
        0.9rem
        1.5rem;

    align-items: center;
    justify-content: center;

    gap: 0.9rem;

    flex-shrink: 0;

    border-radius: 999px;

    background: #ffd447;

    color: #07111e;

    white-space: nowrap;

    font-size: 0.82rem;
    font-weight: 950;

    line-height: 1;

    text-decoration: none;

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.24);
}


/* Keep badge clear of the copy */

.membership-premium
.membership-plan--featured
.membership-plan__popular {
    top: 1.6rem;
    right: 1.6rem;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .membership-premium
    .membership-plan--featured
    .membership-plan__featured-copy {
        width: 64%;

        padding:
            3rem
            1.5rem
            3rem
            3rem;
    }

    .membership-premium
    .membership-plan--featured
    .membership-plan__featured-image {
        background-position: 72% center !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .membership-premium
    .membership-plan--featured
    .membership-plan__featured-copy {
        width: 100%;

        min-height: 620px;

        padding:
            4.6rem
            1.5rem
            2rem;
    }

    .membership-premium
    .membership-plan--featured
    .membership-plan__featured-image {
        background-position: 68% center !important;
    }

    .membership-premium
    .membership-plan--featured
    .membership-plan__button {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - FEATURED MEMBERSHIP PHOTO REVEAL TUNE
   ========================================================= */

@media (min-width: 701px) {

    /* Give the image more room by slightly narrowing the copy side */

    .membership-premium
    .membership-plan--featured
    .membership-plan__featured-copy {
        width: 54% !important;
        padding-right: 1.15rem !important;
    }

    /* Keep the text block from sprawling too wide */

    .membership-premium
    .membership-plan--featured h3 {
        max-width: 290px !important;
    }

    .membership-premium
    .membership-plan--featured
    .membership-plan__features {
        max-width: 315px !important;
    }

    /* If the featured image is a background-image container */

    .membership-premium
    .membership-plan--featured
    .membership-plan__featured-image {
        background-position: 84% center !important;
        background-size: cover !important;
    }

    /* If the featured image is an actual img tag */

    .membership-premium
    .membership-plan--featured
    .membership-plan__featured-image img {
        width: 100%;
        height: 100%;
        object-fit: cover !important;
        object-position: 84% center !important;
    }
}


/* Slightly softer version for medium screens so the text does not get cramped */

@media (min-width: 701px) and (max-width: 1100px) {

    .membership-premium
    .membership-plan--featured
    .membership-plan__featured-copy {
        width: 57% !important;
    }

    .membership-premium
    .membership-plan--featured
    .membership-plan__featured-image {
        background-position: 80% center !important;
    }

    .membership-premium
    .membership-plan--featured
    .membership-plan__featured-image img {
        object-position: 80% center !important;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - FLEET READABILITY FINAL TUNE
   ========================================================= */


/* Main explanatory paragraph */

.fleet-coverage__intro-copy {
    max-width: 680px;

    color: rgba(255, 255, 255, 0.94) !important;

    font-size: 1.12rem !important;
    font-weight: 500 !important;
    line-height: 1.72 !important;

    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    opacity: 1 !important;
}


/* Exact three feature titles */

.fleet-coverage__detail-title {
    margin: 0;

    color: #ffffff !important;

    font-size: 1.08rem !important;
    font-weight: 750 !important;
    line-height: 1.38 !important;

    letter-spacing: -0.01em;
}


/* Exact three feature descriptions */

.fleet-coverage__detail-copy {
    margin-top: 0.42rem !important;

    color: rgba(255, 255, 255, 0.88) !important;

    font-size: 1.04rem !important;
    font-weight: 500 !important;
    line-height: 1.58 !important;

    opacity: 1 !important;
}


/* More breathing room between the title/description pairs */

.fleet-coverage__detail-title + .fleet-coverage__detail-copy {
    margin-bottom: 0.55rem !important;
}


/* Remove the stray decorative location dots.
   The service-area route arcs remain. */

.fleet-coverage {
    background-image:
        radial-gradient(
            circle at 83% 18%,
            rgba(63, 151, 205, 0.12),
            transparent 26%
        ),
        radial-gradient(
            circle at 18% 83%,
            rgba(48, 132, 187, 0.09),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #061826 0%,
            #071d2e 48%,
            #082338 100%
        ) !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .fleet-coverage__intro-copy {
        font-size: 1.05rem !important;
        line-height: 1.65 !important;
    }

    .fleet-coverage__detail-title {
        font-size: 1.05rem !important;
    }

    .fleet-coverage__detail-copy {
        font-size: 1rem !important;
        line-height: 1.58 !important;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - FLEET PHOTO INTEGRATION
   Makes the fleet photo feel built into the section instead
   of pasted onto the background.
   ========================================================= */

.fleet-coverage__media-shell {
    position: relative;
    isolation: isolate;

    overflow: visible;

    transform:
        translateX(-1.5rem)
        scale(1.035);

    filter:
        drop-shadow(
            0 28px 55px
            rgba(0, 0, 0, 0.20)
        );
}


/* ---------------------------------------------------------
   AMBIENT BLUE GLOW
   --------------------------------------------------------- */

.fleet-coverage__media-shell::before {
    content: "";

    position: absolute;
    z-index: -2;

    inset: 6% -5% -7% 4%;

    border-radius: 34px;

    background:
        radial-gradient(
            ellipse at 55% 55%,
            rgba(63, 165, 222, 0.24) 0%,
            rgba(34, 119, 173, 0.12) 43%,
            rgba(15, 72, 109, 0.04) 66%,
            transparent 78%
        );

    filter:
        blur(28px);

    pointer-events: none;
}


/* ---------------------------------------------------------
   ROUTE / COVERAGE LINE ACCENT
   --------------------------------------------------------- */

.fleet-coverage__media-shell::after {
    content: "MOBILE FLEET";

    position: absolute;
    z-index: 5;

    left: 1.25rem;
    bottom: 1.25rem;

    display: inline-flex;
    align-items: center;

    min-height: 36px;

    padding:
        0.55rem
        0.95rem;

    border-radius: 999px;

    background:
        rgba(255, 212, 71, 0.96);

    color:
        #07111e;

    font-size: 0.68rem;
    font-weight: 950;

    letter-spacing: 0.075em;

    text-transform: uppercase;

    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, 0.18);

    pointer-events: none;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.fleet-coverage__photo {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    height: auto;

    border-radius: 28px;

    box-shadow:
        inset 0 0 0 1px
        rgba(133, 207, 245, 0.12);

    filter:
        saturate(1.04)
        contrast(1.02);
}


/* ---------------------------------------------------------
   DARK EDGE BLEND
   Uses mask so the image feels attached to the dark section
   instead of floating like a PowerPoint card.
   --------------------------------------------------------- */

@supports (
    -webkit-mask-image:
    linear-gradient(#000, #000)
) {

    .fleet-coverage__photo {
        -webkit-mask-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,0.92) 0%,
                #000 5%,
                #000 95%,
                rgba(0,0,0,0.93) 100%
            );

        mask-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,0.92) 0%,
                #000 5%,
                #000 95%,
                rgba(0,0,0,0.93) 100%
            );
    }
}


/* ---------------------------------------------------------
   EXTRA CURVED LINEWORK BEHIND PHOTO
   --------------------------------------------------------- */

.fleet-coverage__media-shell {
    background:
        radial-gradient(
            ellipse at 14% 94%,
            transparent 0 56%,
            rgba(105, 194, 239, 0.17) 56.2% 56.6%,
            transparent 56.8% 100%
        ),
        radial-gradient(
            ellipse at 98% 10%,
            transparent 0 68%,
            rgba(105, 194, 239, 0.14) 68.2% 68.5%,
            transparent 68.7% 100%
        );
}


/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

@media (min-width: 1200px) {

    .fleet-coverage__media-shell {
        margin-left: -1rem;
        margin-right: 1rem;
    }
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .fleet-coverage__media-shell {
        transform:
            none;

        margin:
            0 auto;

        max-width:
            900px;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .fleet-coverage__media-shell {
        transform:
            none;

        filter:
            drop-shadow(
                0 18px 38px
                rgba(0, 0, 0, 0.16)
            );
    }

    .fleet-coverage__photo {
        border-radius: 20px;
    }

    .fleet-coverage__media-shell::after {
        left: 0.85rem;
        bottom: 0.85rem;

        min-height: 32px;

        font-size: 0.62rem;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - FLEET PHOTO FULL BLEED FIX

   Make the actual photograph fill its media shell.
   Removes the visible empty wrapper edge and clipped badge.
   ========================================================= */


/* ---------------------------------------------------------
   MEDIA SHELL
   --------------------------------------------------------- */

.fleet-coverage__media-shell {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 0;

    overflow: hidden;

    transform: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    border-radius: 28px;

    background: #08263d;

    box-shadow:
        0 30px 65px rgba(0, 0, 0, 0.22),
        0 0 55px rgba(67, 166, 219, 0.10);

    filter: none !important;
}


/* ---------------------------------------------------------
   ACTUAL IMAGE

   The important fix:
   no more height:auto leaving part of the shell exposed.
   --------------------------------------------------------- */

.fleet-coverage__photo {
    position: relative;

    z-index: 2;

    display: block;

    width: 100% !important;
    height: 100% !important;

    min-width: 100%;
    min-height: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: inherit;

    margin: 0 !important;

    transform: scale(1.015);

    transform-origin: center;

    filter:
        saturate(1.04)
        contrast(1.02);
}


/* If an old rule is sizing the picture from intrinsic dimensions,
   this forces the wrapper itself to follow our intended ratio. */

.fleet-coverage__media-shell {
    aspect-ratio: 4 / 3;
}


/* ---------------------------------------------------------
   AMBIENT TREATMENT

   Keep the integration effect inside the actual image edges
   instead of creating a second visible rectangle behind it.
   --------------------------------------------------------- */

.fleet-coverage__media-shell::before {
    content: "";

    position: absolute;

    z-index: 3;

    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            rgba(5, 25, 40, 0.12) 0%,
            transparent 13%,
            transparent 87%,
            rgba(5, 25, 40, 0.08) 100%
        ),
        linear-gradient(
            0deg,
            rgba(5, 25, 40, 0.12) 0%,
            transparent 18%,
            transparent 100%
        );

    box-shadow:
        inset 0 0 0 1px rgba(137, 211, 247, 0.12);

    pointer-events: none;
}


/* ---------------------------------------------------------
   MOBILE FLEET BADGE

   Keep it completely inside the photograph.
   --------------------------------------------------------- */

.fleet-coverage__media-shell::after {
    content: "MOBILE FLEET";

    position: absolute;

    z-index: 5;

    left: 1.35rem;
    bottom: 1.35rem;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding:
        0.55rem
        1rem;

    border-radius: 999px;

    background: #ffd447;

    color: #07111e;

    font-size: 0.68rem;
    font-weight: 950;

    line-height: 1;

    letter-spacing: 0.075em;

    white-space: nowrap;
    text-transform: uppercase;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.20);

    pointer-events: none;
}


/* ---------------------------------------------------------
   REMOVE OLD MASK EDGE SHRINKING

   The new internal vignette handles edge blending without
   visually reducing the picture.
   --------------------------------------------------------- */

@supports (
    -webkit-mask-image:
    linear-gradient(#000, #000)
) {

    .fleet-coverage__photo {
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}


/* ---------------------------------------------------------
   DESKTOP

   Let the Fleet image carry a little more visual weight.
   --------------------------------------------------------- */

@media (min-width: 1200px) {

    .fleet-coverage__media-shell {
        width: 104%;

        max-width: none;

        margin-left: -2% !important;
    }
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .fleet-coverage__media-shell {
        width: 100%;

        margin-inline: auto !important;

        aspect-ratio: 16 / 10;
    }

    .fleet-coverage__photo {
        aspect-ratio: 16 / 10;

        transform: scale(1.01);
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .fleet-coverage__media-shell {
        width: 100%;

        aspect-ratio: 4 / 3;

        border-radius: 20px;
    }

    .fleet-coverage__photo {
        aspect-ratio: 4 / 3;

        border-radius: inherit;

        transform: scale(1.01);
    }

    .fleet-coverage__media-shell::after {
        left: 0.9rem;
        bottom: 0.9rem;

        min-height: 32px;

        padding:
            0.5rem
            0.8rem;

        font-size: 0.62rem;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - FLEET EDITORIAL PHOTO WINDOW

   Changes the photo from a rounded "card" into an editorial
   image window that fades into the Fleet section.
   ========================================================= */


/* ---------------------------------------------------------
   MEDIA SHELL

   No visible card background, no frame, no boxed shadow.
   Extra bottom room is reserved for the tiny editorial label.
   --------------------------------------------------------- */

.fleet-coverage__media-shell {
    position: relative;

    isolation: isolate;

    width: 106% !important;
    height: auto !important;

    aspect-ratio: auto !important;

    margin:
        0
        0
        2.8rem
        -3% !important;

    overflow: visible !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    filter: none !important;

    transform: none !important;
}


/* ---------------------------------------------------------
   ROUTE ARC BEHIND PHOTO

   This is intentionally larger than the picture so the line
   continues into the surrounding section instead of stopping
   at the photo edge.
   --------------------------------------------------------- */

.fleet-coverage__media-shell::before {
    content: "";

    position: absolute;

    z-index: 0;

    width: 760px;
    height: 430px;

    right: -135px;
    bottom: -105px;

    border:
        1px solid rgba(111, 199, 241, 0.20);

    border-radius: 50%;

    background: transparent;

    box-shadow:
        0 0 0 42px rgba(111, 199, 241, 0.018),
        0 0 0 88px rgba(111, 199, 241, 0.010);

    transform:
        rotate(-9deg);

    pointer-events: none;
}


/* ---------------------------------------------------------
   PHOTO

   Left edge remains solid.
   Right edge angles and dissolves into the navy background.
   --------------------------------------------------------- */

.fleet-coverage__photo {
    position: relative;

    z-index: 2;

    display: block;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    aspect-ratio: auto !important;

    margin: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius:
        26px
        0
        0
        26px !important;

    clip-path:
        polygon(
            0 0,
            93% 0,
            100% 50%,
            93% 100%,
            0 100%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            #000 0%,
            #000 78%,
            rgba(0,0,0,0.98) 84%,
            rgba(0,0,0,0.72) 91%,
            rgba(0,0,0,0.25) 97%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            #000 0%,
            #000 78%,
            rgba(0,0,0,0.98) 84%,
            rgba(0,0,0,0.72) 91%,
            rgba(0,0,0,0.25) 97%,
            transparent 100%
        );

    transform: none !important;

    box-shadow: none !important;

    filter:
        saturate(1.03)
        contrast(1.02);
}


/* ---------------------------------------------------------
   REMOVE OLD PHOTO-CARD EFFECTS
   --------------------------------------------------------- */

.fleet-coverage__media-shell {
    filter: none !important;
}

.fleet-coverage__photo {
    box-shadow: none !important;
}


/* ---------------------------------------------------------
   SMALL EDITORIAL LABEL

   No yellow pill. This sits UNDER the image and behaves like
   part of the section typography.
   --------------------------------------------------------- */

.fleet-coverage__media-shell::after {
    content: "MOBILE FLEET";

    position: absolute;

    z-index: 4;

    left: 1.25rem;
    bottom: -2.2rem;

    display: inline-flex;

    align-items: center;

    min-height: auto;

    padding:
        0
        0
        0
        2.25rem;

    border-radius: 0;

    background:
        linear-gradient(
            #ffd447,
            #ffd447
        )
        left center / 24px 2px
        no-repeat;

    color:
        rgba(255,255,255,0.82);

    font-size: 0.68rem;
    font-weight: 900;

    line-height: 1;

    letter-spacing: 0.10em;

    text-transform: uppercase;

    box-shadow: none;

    white-space: nowrap;

    pointer-events: none;
}


/* ---------------------------------------------------------
   DESKTOP

   Let the photo feel slightly oversized without becoming
   full bleed.
   --------------------------------------------------------- */

@media (min-width: 1200px) {

    .fleet-coverage__media-shell {
        width: 108% !important;

        margin-left: -4% !important;
    }
}


/* ---------------------------------------------------------
   TABLET

   Reduce the angled/faded edge so the crop stays useful.
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .fleet-coverage__media-shell {
        width: 100% !important;

        margin:
            0
            0
            2.8rem
            0 !important;
    }

    .fleet-coverage__photo {
        clip-path:
            polygon(
                0 0,
                95% 0,
                100% 50%,
                95% 100%,
                0 100%
            );

        -webkit-mask-image:
            linear-gradient(
                90deg,
                #000 0%,
                #000 84%,
                rgba(0,0,0,0.78) 94%,
                transparent 100%
            );

        mask-image:
            linear-gradient(
                90deg,
                #000 0%,
                #000 84%,
                rgba(0,0,0,0.78) 94%,
                transparent 100%
            );
    }
}


/* ---------------------------------------------------------
   MOBILE

   Keep a subtle editorial edge but do not sacrifice too much
   useful photography on narrow screens.
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .fleet-coverage__media-shell {
        margin-bottom: 2.4rem !important;
    }

    .fleet-coverage__photo {
        border-radius:
            20px
            0
            0
            20px !important;

        clip-path:
            polygon(
                0 0,
                97% 0,
                100% 50%,
                97% 100%,
                0 100%
            );

        -webkit-mask-image:
            linear-gradient(
                90deg,
                #000 0%,
                #000 89%,
                rgba(0,0,0,0.82) 95%,
                transparent 100%
            );

        mask-image:
            linear-gradient(
                90deg,
                #000 0%,
                #000 89%,
                rgba(0,0,0,0.82) 95%,
                transparent 100%
            );
    }

    .fleet-coverage__media-shell::before {
        opacity: 0.55;
    }

    .fleet-coverage__media-shell::after {
        left: 0.5rem;
        bottom: -1.85rem;

        padding-left: 2rem;

        font-size: 0.62rem;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - FLEET WATER SPLASH PHOTO

   Rounded fleet photography with graphic CSS water splash
   artwork behind it. No caption bar. No cutout edge.
   ========================================================= */


/* =========================================================
   MEDIA SHELL
   ========================================================= */

.fleet-coverage__media-shell {
    position: relative !important;
    isolation: isolate;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: auto !important;

    margin: 0 !important;

    overflow: visible !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    filter: none !important;

    transform: none !important;
}


/* =========================================================
   LARGE LOWER-LEFT SPLASH

   Multiple overlapping elliptical water shapes create a
   graphic splash behind the photograph.
   ========================================================= */

.fleet-coverage__media-shell::before {
    content: "";

    position: absolute;

    z-index: 0;

    left: -115px;
    bottom: -95px;

    width: 430px;
    height: 310px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at 48% 55%,
            rgba(104, 198, 241, 0.18) 0%,
            rgba(104, 198, 241, 0.12) 24%,
            rgba(104, 198, 241, 0.035) 52%,
            transparent 69%
        ),

        radial-gradient(
            ellipse at 75% 26%,
            transparent 0 52%,
            rgba(113, 203, 244, 0.28) 53% 54%,
            transparent 55% 100%
        ),

        radial-gradient(
            ellipse at 38% 74%,
            transparent 0 61%,
            rgba(69, 161, 213, 0.22) 62% 63%,
            transparent 64% 100%
        );

    border:
        1px solid rgba(112, 202, 244, 0.13);

    box-shadow:
        38px -118px 0 -181px rgba(114, 204, 246, 0.78),
        92px -150px 0 -188px rgba(114, 204, 246, 0.52),
        153px -126px 0 -190px rgba(114, 204, 246, 0.64),
        202px -77px 0 -187px rgba(114, 204, 246, 0.46),
        238px -20px 0 -192px rgba(114, 204, 246, 0.68),
        173px 38px 0 -188px rgba(114, 204, 246, 0.44),
        82px 71px 0 -190px rgba(114, 204, 246, 0.56);

    transform:
        rotate(-13deg);

    pointer-events: none;
}


/* =========================================================
   UPPER-RIGHT SPLASH + DROPLETS
   ========================================================= */

.fleet-coverage__media-shell::after {
    content: "";

    position: absolute;

    z-index: 0;

    top: -66px;
    right: -82px;

    width: 260px;
    height: 210px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at 36% 58%,
            rgba(103, 195, 239, 0.14) 0%,
            rgba(103, 195, 239, 0.06) 43%,
            transparent 67%
        ),

        radial-gradient(
            ellipse at 52% 60%,
            transparent 0 61%,
            rgba(111, 201, 242, 0.25) 62% 63%,
            transparent 64% 100%
        );

    border:
        1px solid rgba(111, 201, 242, 0.11);

    box-shadow:
        -46px 8px 0 -113px rgba(116, 205, 245, 0.74),
        -83px 50px 0 -116px rgba(116, 205, 245, 0.50),
        -96px 94px 0 -119px rgba(116, 205, 245, 0.65),
        -34px 122px 0 -118px rgba(116, 205, 245, 0.42),
        44px 96px 0 -116px rgba(116, 205, 245, 0.55),
        71px 28px 0 -120px rgba(116, 205, 245, 0.68);

    transform:
        rotate(18deg);

    pointer-events: none;
}


/* =========================================================
   PHOTO

   Back to a clean, simple rounded rectangle.
   ========================================================= */

.fleet-coverage__photo {
    position: relative;

    z-index: 2;

    display: block;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    aspect-ratio: auto !important;

    margin: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: 28px !important;

    clip-path: none !important;

    -webkit-mask-image: none !important;
    mask-image: none !important;

    transform: none !important;

    background: transparent !important;

    box-shadow:
        0 28px 58px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(118, 202, 243, 0.12);

    filter:
        saturate(1.03)
        contrast(1.02);
}


/* =========================================================
   SOFT WATER GLOW BEHIND THE ENTIRE PHOTO

   This keeps the splash from looking like disconnected
   circles floating around the image.
   ========================================================= */

.fleet-coverage__media-shell {
    background:
        radial-gradient(
            ellipse at 15% 86%,
            rgba(76, 177, 228, 0.14) 0%,
            rgba(76, 177, 228, 0.06) 32%,
            transparent 62%
        ),

        radial-gradient(
            ellipse at 94% 11%,
            rgba(92, 191, 237, 0.11) 0%,
            rgba(92, 191, 237, 0.045) 35%,
            transparent 61%
        ) !important;
}


/* =========================================================
   DESKTOP

   Let a little splash escape beyond the normal image area.
   ========================================================= */

@media (min-width: 1200px) {

    .fleet-coverage__media-shell {
        width: 102% !important;

        margin-left: -1% !important;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .fleet-coverage__media-shell {
        width: 100% !important;

        margin: 0 !important;
    }

    .fleet-coverage__media-shell::before {
        left: -90px;
        bottom: -80px;

        width: 350px;
        height: 270px;

        opacity: 0.8;
    }

    .fleet-coverage__media-shell::after {
        top: -50px;
        right: -55px;

        opacity: 0.78;
    }
}


/* =========================================================
   MOBILE

   Keep the splash visible but quieter.
   ========================================================= */

@media (max-width: 700px) {

    .fleet-coverage__photo {
        border-radius: 20px !important;
    }

    .fleet-coverage__media-shell::before {
        left: -70px;
        bottom: -62px;

        width: 270px;
        height: 210px;

        opacity: 0.58;
    }

    .fleet-coverage__media-shell::after {
        top: -40px;
        right: -45px;

        width: 190px;
        height: 150px;

        opacity: 0.55;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - FLEET SPLASH INTEGRATION CORRECTION

   Fixes stretched media wrapper and makes the CSS water
   artwork actually visible around the photograph.
   ========================================================= */


/* =========================================================
   SHRINK-WRAP MEDIA TO THE ACTUAL PHOTO

   This kills the giant blue footer that appeared because
   the grid item was stretching to the text column height.
   ========================================================= */

.fleet-coverage__media-shell {
    position: relative !important;

    display: block !important;

    align-self: center !important;

    width: 100% !important;
    height: fit-content !important;
    min-height: 0 !important;

    aspect-ratio: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    filter: none !important;

    transform: none !important;

    isolation: isolate;
}


/* =========================================================
   PHOTO

   Clean rounded rectangle only.
   ========================================================= */

.fleet-coverage__photo {
    position: relative !important;

    z-index: 3;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    aspect-ratio: auto !important;

    margin: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: 28px !important;

    clip-path: none !important;

    -webkit-mask-image: none !important;
    mask-image: none !important;

    transform: none !important;

    background: transparent !important;

    box-shadow:
        0 30px 62px rgba(0, 0, 0, 0.20),
        0 0 0 1px rgba(119, 203, 244, 0.13) !important;

    filter:
        saturate(1.03)
        contrast(1.02) !important;
}


/* =========================================================
   WATER SPLASH CANVAS

   This sits BEHIND the photograph and extends beyond it.
   Multiple radial gradients form droplets, rings and splash
   shapes without putting anything over the photograph.
   ========================================================= */

.fleet-coverage__media-shell::before {
    content: "" !important;

    position: absolute !important;

    z-index: 1 !important;

    top: -78px !important;
    right: -78px !important;
    bottom: -92px !important;
    left: -92px !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    min-height: 0 !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:

        /* lower-left droplets */
        radial-gradient(
            circle at 4% 77%,
            rgba(116, 205, 246, 0.72) 0 5px,
            rgba(116, 205, 246, 0.18) 6px 12px,
            transparent 13px
        ),

        radial-gradient(
            circle at 10% 91%,
            rgba(116, 205, 246, 0.58) 0 8px,
            rgba(116, 205, 246, 0.14) 9px 16px,
            transparent 17px
        ),

        radial-gradient(
            circle at 18% 96%,
            rgba(116, 205, 246, 0.44) 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 1% 64%,
            transparent 0 10px,
            rgba(116, 205, 246, 0.42) 11px 12px,
            transparent 13px
        ),


        /* upper-right droplets */
        radial-gradient(
            circle at 94% 8%,
            rgba(116, 205, 246, 0.68) 0 6px,
            rgba(116, 205, 246, 0.15) 7px 13px,
            transparent 14px
        ),

        radial-gradient(
            circle at 100% 18%,
            transparent 0 13px,
            rgba(116, 205, 246, 0.40) 14px 15px,
            transparent 16px
        ),

        radial-gradient(
            circle at 91% 1%,
            rgba(116, 205, 246, 0.46) 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 98% 31%,
            rgba(116, 205, 246, 0.48) 0 7px,
            rgba(116, 205, 246, 0.10) 8px 15px,
            transparent 16px
        ),


        /* lower-left splash body */
        radial-gradient(
            ellipse 190px 78px at 11% 84%,
            transparent 0 61%,
            rgba(91, 187, 233, 0.35) 62% 64%,
            transparent 65%
        ),

        radial-gradient(
            ellipse 145px 54px at 17% 90%,
            transparent 0 61%,
            rgba(115, 205, 246, 0.24) 62% 64%,
            transparent 65%
        ),


        /* upper-right splash body */
        radial-gradient(
            ellipse 165px 68px at 91% 14%,
            transparent 0 62%,
            rgba(115, 205, 246, 0.32) 63% 65%,
            transparent 66%
        ),

        radial-gradient(
            ellipse 115px 48px at 97% 23%,
            transparent 0 61%,
            rgba(83, 177, 225, 0.22) 62% 64%,
            transparent 65%
        );

    box-shadow: none !important;

    filter:
        drop-shadow(
            0 12px 25px
            rgba(59, 165, 219, 0.08)
        );

    transform: none !important;

    pointer-events: none;
}


/* =========================================================
   LARGE SWEEPING SPLASH ARC

   Replaces the old Mobile Fleet caption pseudo-element.
   ========================================================= */

.fleet-coverage__media-shell::after {
    content: "" !important;

    position: absolute !important;

    z-index: 0 !important;

    left: -75px !important;
    bottom: -78px !important;

    display: block !important;

    width: 570px !important;
    height: 250px !important;

    min-height: 0 !important;

    padding: 0 !important;

    border:
        2px solid rgba(99, 194, 239, 0.24) !important;

    border-radius: 50% !important;

    background: transparent !important;

    color: transparent !important;

    box-shadow:
        0 0 0 22px rgba(99, 194, 239, 0.018),
        0 0 0 48px rgba(99, 194, 239, 0.010) !important;

    clip-path:
        inset(0 0 52% 0);

    transform:
        rotate(-9deg) !important;

    pointer-events: none;
}


/* =========================================================
   DESKTOP

   Allow splash room while keeping photo non-full-bleed.
   ========================================================= */

@media (min-width: 1200px) {

    .fleet-coverage__media-shell {
        width: 100% !important;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .fleet-coverage__media-shell::before {
        top: -55px !important;
        right: -50px !important;
        bottom: -65px !important;
        left: -55px !important;

        opacity: 0.82;
    }

    .fleet-coverage__media-shell::after {
        left: -50px !important;
        bottom: -55px !important;

        width: 470px !important;
        height: 210px !important;

        opacity: 0.8;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .fleet-coverage__photo {
        border-radius: 20px !important;
    }

    .fleet-coverage__media-shell::before {
        top: -38px !important;
        right: -32px !important;
        bottom: -45px !important;
        left: -35px !important;

        opacity: 0.60;
    }

    .fleet-coverage__media-shell::after {
        left: -35px !important;
        bottom: -38px !important;

        width: 340px !important;
        height: 160px !important;

        opacity: 0.58;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - FLEET OUTER FRAME REMOVAL

   The old parent image container was still stretching below
   the photograph. Remove that frame completely and let the
   splash artwork live around the actual photo.
   ========================================================= */


/* =========================================================
   NORMALIZE THE ORIGINAL IMAGE PARENT

   Modern Chromium supports :has(), so this targets ONLY
   whichever existing element directly contains our Fleet
   media shell.
   ========================================================= */

.fleet-coverage :has(> .fleet-coverage__media-shell) {
    position: relative !important;

    align-self: center !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    filter: none !important;
}


/* =========================================================
   INNER MEDIA SHELL

   Shrink-wrap the photograph. No background can appear below.
   ========================================================= */

.fleet-coverage__media-shell {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    aspect-ratio: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    filter: none !important;

    transform: none !important;
}


/* =========================================================
   PHOTO

   Actual photograph defines the height.
   ========================================================= */

.fleet-coverage__photo {
    position: relative !important;

    z-index: 3;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    aspect-ratio: auto !important;

    margin: 0 !important;

    border-radius: 28px !important;

    clip-path: none !important;

    -webkit-mask-image: none !important;
    mask-image: none !important;

    transform: none !important;

    background: transparent !important;

    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(122, 205, 244, 0.12) !important;
}


/* =========================================================
   SPLASH FIELD

   Visible outside the image now that the old outer frame is
   gone.
   ========================================================= */

.fleet-coverage__media-shell::before {
    content: "" !important;

    position: absolute !important;

    z-index: 1 !important;

    top: -82px !important;
    right: -88px !important;
    bottom: -84px !important;
    left: -92px !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    background:

        /* TOP RIGHT */
        radial-gradient(
            circle at 92% 7%,
            rgba(129, 214, 250, 0.82) 0 5px,
            rgba(129, 214, 250, 0.20) 6px 13px,
            transparent 14px
        ),

        radial-gradient(
            circle at 98% 17%,
            transparent 0 11px,
            rgba(114, 204, 247, 0.55) 12px 14px,
            transparent 15px
        ),

        radial-gradient(
            circle at 88% 1%,
            rgba(113, 205, 247, 0.62) 0 3px,
            transparent 4px
        ),

        radial-gradient(
            circle at 99% 30%,
            rgba(112, 202, 244, 0.52) 0 6px,
            rgba(112, 202, 244, 0.12) 7px 14px,
            transparent 15px
        ),

        radial-gradient(
            ellipse 180px 72px at 92% 13%,
            transparent 0 60%,
            rgba(101, 195, 239, 0.35) 61% 63%,
            transparent 64%
        ),


        /* LOWER LEFT */
        radial-gradient(
            circle at 3% 76%,
            rgba(125, 211, 250, 0.78) 0 6px,
            rgba(125, 211, 250, 0.18) 7px 14px,
            transparent 15px
        ),

        radial-gradient(
            circle at 8% 90%,
            rgba(117, 205, 246, 0.62) 0 8px,
            rgba(117, 205, 246, 0.14) 9px 17px,
            transparent 18px
        ),

        radial-gradient(
            circle at 17% 97%,
            rgba(117, 205, 246, 0.52) 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 1% 61%,
            transparent 0 11px,
            rgba(117, 205, 246, 0.48) 12px 14px,
            transparent 15px
        ),

        radial-gradient(
            ellipse 210px 82px at 11% 84%,
            transparent 0 59%,
            rgba(95, 190, 236, 0.39) 60% 63%,
            transparent 64%
        ),

        radial-gradient(
            ellipse 150px 55px at 18% 92%,
            transparent 0 60%,
            rgba(117, 205, 246, 0.26) 61% 64%,
            transparent 65%
        );

    border: 0 !important;

    box-shadow: none !important;

    transform: none !important;

    pointer-events: none;
}


/* =========================================================
   LARGE LOWER-LEFT SPLASH ARC
   ========================================================= */

.fleet-coverage__media-shell::after {
    content: "" !important;

    position: absolute !important;

    z-index: 0 !important;

    left: -72px !important;
    bottom: -76px !important;

    display: block !important;

    width: 560px !important;
    height: 245px !important;

    padding: 0 !important;

    border:
        2px solid rgba(103, 198, 241, 0.27) !important;

    border-radius: 50% !important;

    background: transparent !important;

    box-shadow:
        0 0 0 24px rgba(103, 198, 241, 0.018),
        0 0 0 51px rgba(103, 198, 241, 0.009) !important;

    clip-path:
        inset(0 0 51% 0);

    transform:
        rotate(-9deg) !important;

    pointer-events: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .fleet-coverage__media-shell::before {
        top: -58px !important;
        right: -55px !important;
        bottom: -60px !important;
        left: -58px !important;

        opacity: 0.78;
    }

    .fleet-coverage__media-shell::after {
        left: -48px !important;
        bottom: -52px !important;

        width: 450px !important;
        height: 205px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .fleet-coverage__photo {
        border-radius: 20px !important;
    }

    .fleet-coverage__media-shell::before {
        top: -38px !important;
        right: -34px !important;
        bottom: -40px !important;
        left: -38px !important;

        opacity: 0.56;
    }

    .fleet-coverage__media-shell::after {
        left: -30px !important;
        bottom: -34px !important;

        width: 320px !important;
        height: 150px !important;

        opacity: 0.55;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - REAL CSS WATER SPLASH

   Actual CSS shapes:
   liquid core + elongated splash arms + droplets + highlights.
   No rings. No caption bar. No coffee stains.
   ========================================================= */


/* =========================================================
   CLEAN PHOTO PRESENTATION
   ========================================================= */

.fleet-coverage :has(> .fleet-coverage__media-shell) {
    overflow: visible !important;

    height: auto !important;
    min-height: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}

.fleet-coverage__media-shell {
    position: relative !important;

    isolation: isolate;

    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    transform: none !important;
}


/* Kill every previous pseudo-element splash experiment */

.fleet-coverage__media-shell::before,
.fleet-coverage__media-shell::after {
    content: none !important;
    display: none !important;
}


/* Actual photograph */

.fleet-coverage__photo {
    position: relative !important;

    z-index: 5;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;

    border-radius: 28px !important;

    clip-path: none !important;

    -webkit-mask-image: none !important;
    mask-image: none !important;

    transform: none !important;

    box-shadow:
        0 30px 68px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(126, 208, 247, 0.12) !important;

    filter:
        saturate(1.03)
        contrast(1.02) !important;
}


/* =========================================================
   SHARED SPLASH SYSTEM
   ========================================================= */

.fleet-splash {
    position: absolute;

    z-index: 2;

    pointer-events: none;

    overflow: visible;
}


/* Main liquid blob */

.fleet-splash__core {
    position: absolute;

    width: 170px;
    height: 110px;

    border-radius:
        58% 42% 55% 45%
        /
        46% 55% 45% 54%;

    background:
        radial-gradient(
            ellipse at 28% 20%,
            rgba(255,255,255,0.78) 0 5%,
            rgba(255,255,255,0.15) 6%,
            transparent 19%
        ),
        linear-gradient(
            145deg,
            #7bdcff 0%,
            #26b9ef 35%,
            #0789d5 70%,
            #0368b8 100%
        );

    box-shadow:
        inset -10px -12px 20px rgba(0, 71, 149, 0.25),
        inset 8px 8px 15px rgba(255,255,255,0.14),
        0 14px 26px rgba(0, 110, 185, 0.16);
}


/* =========================================================
   SPLASH ARMS

   Long liquid fingers instead of circles.
   ========================================================= */

.fleet-splash__arm {
    position: absolute;

    display: block;

    width: 42px;
    height: 118px;

    border-radius:
        70% 70% 50% 50%
        /
        82% 82% 24% 24%;

    transform-origin:
        50% 92%;

    background:
        radial-gradient(
            ellipse at 33% 15%,
            rgba(255,255,255,0.78) 0 7%,
            rgba(255,255,255,0.12) 8%,
            transparent 22%
        ),
        linear-gradient(
            180deg,
            #7de0ff 0%,
            #25b8ee 42%,
            #087bc7 100%
        );

    box-shadow:
        inset -6px -8px 11px rgba(0, 68, 145, 0.22);

    clip-path:
        polygon(
            49% 0,
            69% 8%,
            82% 26%,
            78% 48%,
            68% 68%,
            81% 100%,
            22% 100%,
            34% 69%,
            23% 48%,
            25% 26%,
            34% 9%
        );
}


/* =========================================================
   DROPLETS
   ========================================================= */

.fleet-splash__drop {
    position: absolute;

    display: block;

    width: 23px;
    height: 31px;

    border-radius:
        70% 55% 72% 42%
        /
        72% 48% 76% 40%;

    background:
        radial-gradient(
            circle at 32% 25%,
            rgba(255,255,255,0.94) 0 10%,
            rgba(255,255,255,0.22) 11%,
            transparent 29%
        ),
        linear-gradient(
            145deg,
            #78ddff 0%,
            #1db3ee 48%,
            #0877c7 100%
        );

    box-shadow:
        inset -4px -5px 8px rgba(0, 68, 145, 0.20);

    transform:
        rotate(32deg);
}


/* =========================================================
   TOP RIGHT SPLASH
   ========================================================= */

.fleet-splash--top-right {
    top: -60px;
    right: -64px;

    width: 290px;
    height: 275px;
}

.fleet-splash--top-right .fleet-splash__core {
    left: 58px;
    top: 92px;

    width: 150px;
    height: 105px;

    transform:
        rotate(17deg);
}


/* upward arm */

.fleet-splash--top-right
.fleet-splash__arm--1 {
    left: 94px;
    top: 4px;

    width: 38px;
    height: 132px;

    transform:
        rotate(13deg);
}


/* upper-right arm */

.fleet-splash--top-right
.fleet-splash__arm--2 {
    left: 151px;
    top: 23px;

    width: 43px;
    height: 123px;

    transform:
        rotate(43deg);
}


/* right-side arm */

.fleet-splash--top-right
.fleet-splash__arm--3 {
    left: 187px;
    top: 78px;

    width: 40px;
    height: 110px;

    transform:
        rotate(77deg);
}


/* downward teardrop */

.fleet-splash--top-right
.fleet-splash__arm--4 {
    left: 174px;
    top: 120px;

    width: 37px;
    height: 105px;

    transform:
        rotate(129deg);
}


/* droplets */

.fleet-splash--top-right
.fleet-splash__drop--1 {
    left: 77px;
    top: 4px;

    width: 18px;
    height: 26px;
}

.fleet-splash--top-right
.fleet-splash__drop--2 {
    left: 187px;
    top: 1px;

    width: 22px;
    height: 30px;

    transform:
        rotate(58deg);
}

.fleet-splash--top-right
.fleet-splash__drop--3 {
    left: 238px;
    top: 74px;

    width: 17px;
    height: 24px;

    transform:
        rotate(82deg);
}

.fleet-splash--top-right
.fleet-splash__drop--4 {
    left: 253px;
    top: 135px;

    width: 13px;
    height: 18px;

    transform:
        rotate(105deg);
}

.fleet-splash--top-right
.fleet-splash__drop--5 {
    left: 217px;
    top: 190px;

    width: 21px;
    height: 28px;

    transform:
        rotate(145deg);
}


/* =========================================================
   BOTTOM LEFT SPLASH
   ========================================================= */

.fleet-splash--bottom-left {
    left: -65px;
    bottom: -83px;

    width: 330px;
    height: 275px;
}

.fleet-splash--bottom-left .fleet-splash__core {
    left: 86px;
    top: 73px;

    width: 176px;
    height: 119px;

    transform:
        rotate(-12deg);
}


/* left arm */

.fleet-splash--bottom-left
.fleet-splash__arm--1 {
    left: 27px;
    top: 88px;

    width: 45px;
    height: 126px;

    transform:
        rotate(-78deg);
}


/* lower-left arm */

.fleet-splash--bottom-left
.fleet-splash__arm--2 {
    left: 59px;
    top: 134px;

    width: 43px;
    height: 125px;

    transform:
        rotate(-137deg);
}


/* straight-down arm */

.fleet-splash--bottom-left
.fleet-splash__arm--3 {
    left: 132px;
    top: 135px;

    width: 39px;
    height: 121px;

    transform:
        rotate(177deg);
}


/* lower-right arm */

.fleet-splash--bottom-left
.fleet-splash__arm--4 {
    left: 194px;
    top: 123px;

    width: 43px;
    height: 118px;

    transform:
        rotate(139deg);
}


/* rightward arm */

.fleet-splash--bottom-left
.fleet-splash__arm--5 {
    left: 218px;
    top: 75px;

    width: 40px;
    height: 115px;

    transform:
        rotate(91deg);
}


/* droplets */

.fleet-splash--bottom-left
.fleet-splash__drop--1 {
    left: 11px;
    top: 76px;

    transform:
        rotate(-54deg);
}

.fleet-splash--bottom-left
.fleet-splash__drop--2 {
    left: 24px;
    top: 193px;

    width: 18px;
    height: 26px;

    transform:
        rotate(-132deg);
}

.fleet-splash--bottom-left
.fleet-splash__drop--3 {
    left: 92px;
    top: 245px;

    width: 17px;
    height: 24px;

    transform:
        rotate(177deg);
}

.fleet-splash--bottom-left
.fleet-splash__drop--4 {
    left: 179px;
    top: 238px;

    width: 20px;
    height: 28px;

    transform:
        rotate(151deg);
}

.fleet-splash--bottom-left
.fleet-splash__drop--5 {
    left: 265px;
    top: 178px;

    width: 16px;
    height: 22px;

    transform:
        rotate(111deg);
}

.fleet-splash--bottom-left
.fleet-splash__drop--6 {
    left: 280px;
    top: 100px;

    width: 13px;
    height: 18px;

    transform:
        rotate(72deg);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .fleet-splash--top-right {
        transform:
            scale(0.78);

        transform-origin:
            bottom left;

        right: -48px;
        top: -48px;
    }

    .fleet-splash--bottom-left {
        transform:
            scale(0.78);

        transform-origin:
            top right;

        left: -48px;
        bottom: -62px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .fleet-coverage__photo {
        border-radius: 20px !important;
    }

    .fleet-splash--top-right {
        transform:
            scale(0.54);

        right: -74px;
        top: -67px;
    }

    .fleet-splash--bottom-left {
        transform:
            scale(0.54);

        left: -74px;
        bottom: -75px;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - REAL PNG FLEET SPLASH

   Real transparent splash artwork behind the fleet photo.
   Replaces all generated CSS splash shapes.
   ========================================================= */


/* ---------------------------------------------------------
   CLEAN MEDIA WRAPPER
   --------------------------------------------------------- */

.fleet-coverage :has(> .fleet-coverage__media-shell) {
    position: relative !important;

    align-self: center !important;

    height: auto !important;
    min-height: 0 !important;

    overflow: visible !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


.fleet-coverage__media-shell {
    position: relative !important;

    isolation: isolate;

    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    transform: none !important;
}


/* ---------------------------------------------------------
   LARGE LOWER-LEFT WATER SPLASH
   --------------------------------------------------------- */

.fleet-coverage__media-shell::before {
    content: "" !important;

    position: absolute !important;

    z-index: 1 !important;

    width: 470px !important;
    height: 470px !important;

    left: -155px !important;
    bottom: -170px !important;

    display: block !important;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat !important;

    opacity: 0.84;

    transform:
        rotate(-18deg) !important;

    filter:
        drop-shadow(
            0 14px 28px
            rgba(0, 115, 190, 0.18)
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   SMALLER UPPER-RIGHT WATER SPLASH
   --------------------------------------------------------- */

.fleet-coverage__media-shell::after {
    content: "" !important;

    position: absolute !important;

    z-index: 1 !important;

    width: 330px !important;
    height: 330px !important;

    top: -128px !important;
    right: -120px !important;

    display: block !important;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat !important;

    opacity: 0.78;

    transform:
        rotate(112deg) !important;

    filter:
        drop-shadow(
            0 12px 24px
            rgba(0, 115, 190, 0.15)
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   PHOTO ABOVE THE SPLASHES
   --------------------------------------------------------- */

.fleet-coverage__photo {
    position: relative !important;

    z-index: 3 !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;

    border-radius: 28px !important;

    clip-path: none !important;

    -webkit-mask-image: none !important;
    mask-image: none !important;

    transform: none !important;

    background: transparent !important;

    box-shadow:
        0 30px 64px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(126, 208, 247, 0.12) !important;

    filter:
        saturate(1.03)
        contrast(1.02) !important;
}


/* ---------------------------------------------------------
   DISABLE OLD MANUAL SPLASH ELEMENTS IF ANY SURVIVE
   --------------------------------------------------------- */

.fleet-splash {
    display: none !important;
}


/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

@media (min-width: 1200px) {

    .fleet-coverage__media-shell {
        width: 100% !important;
    }
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .fleet-coverage__media-shell::before {
        width: 370px !important;
        height: 370px !important;

        left: -115px !important;
        bottom: -135px !important;
    }

    .fleet-coverage__media-shell::after {
        width: 270px !important;
        height: 270px !important;

        top: -98px !important;
        right: -90px !important;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .fleet-coverage__photo {
        border-radius: 20px !important;
    }

    .fleet-coverage__media-shell::before {
        width: 245px !important;
        height: 245px !important;

        left: -85px !important;
        bottom: -94px !important;

        opacity: 0.68;
    }

    .fleet-coverage__media-shell::after {
        width: 190px !important;
        height: 190px !important;

        top: -70px !important;
        right: -70px !important;

        opacity: 0.62;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - PNG SPLASH POSITION TUNE

   Keep most of the splash hidden behind the photograph.
   Only the energetic outer lobes and droplets should show.
   ========================================================= */


/* =========================================================
   LOWER-LEFT SPLASH

   Larger, but pushed UNDER the photograph instead of sitting
   beside it.
   ========================================================= */

.fleet-coverage__media-shell::before {
    width: 520px !important;
    height: 520px !important;

    left: -78px !important;
    bottom: -205px !important;

    opacity: 0.82 !important;

    transform:
        rotate(-14deg) !important;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat !important;

    filter:
        drop-shadow(
            0 14px 28px
            rgba(0, 115, 190, 0.16)
        ) !important;
}


/* =========================================================
   UPPER-RIGHT SPLASH

   Tuck the center behind the photo so only the upper/right
   water fingers escape around the corner.
   ========================================================= */

.fleet-coverage__media-shell::after {
    width: 390px !important;
    height: 390px !important;

    top: -118px !important;
    right: -72px !important;

    opacity: 0.76 !important;

    transform:
        rotate(104deg) !important;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat !important;

    filter:
        drop-shadow(
            0 12px 24px
            rgba(0, 115, 190, 0.14)
        ) !important;
}


/* =========================================================
   PHOTO

   Explicitly keep it above both splash layers.
   ========================================================= */

.fleet-coverage__photo {
    position: relative !important;
    z-index: 5 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .fleet-coverage__media-shell::before {
        width: 410px !important;
        height: 410px !important;

        left: -62px !important;
        bottom: -165px !important;
    }

    .fleet-coverage__media-shell::after {
        width: 305px !important;
        height: 305px !important;

        top: -91px !important;
        right: -55px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .fleet-coverage__media-shell::before {
        width: 270px !important;
        height: 270px !important;

        left: -43px !important;
        bottom: -105px !important;

        opacity: 0.66 !important;
    }

    .fleet-coverage__media-shell::after {
        width: 210px !important;
        height: 210px !important;

        top: -63px !important;
        right: -39px !important;

        opacity: 0.60 !important;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - UPPER SPLASH CLIPPING FIX

   Bottom-left splash remains behind the photograph.
   Upper splash sits above the photo edge so individual
   droplets are not chopped in half.
   ========================================================= */

/* Lower splash stays behind */
.fleet-coverage__media-shell::before {
    z-index: 1 !important;
}

/* Photograph */
.fleet-coverage__photo {
    position: relative !important;
    z-index: 5 !important;
}

/* Upper splash comes above the photograph */
.fleet-coverage__media-shell::after {
    z-index: 6 !important;

    overflow: visible !important;

    clip-path: none !important;

    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* =========================================================
   WASH & BEHOLD PREMIUM - PNG SPLASH FINAL LAYER TUNE

   Both splash graphics stay BEHIND the photograph.
   Only the outer water lobes and droplets remain visible.
   ========================================================= */


/* Photograph stays above all splash artwork */

.fleet-coverage__photo {
    position: relative !important;
    z-index: 5 !important;
}


/* =========================================================
   TOP-LEFT SPLASH

   Pull most of the body underneath the photograph.
   Shift slightly outward so exposed droplets remain whole.
   ========================================================= */

.fleet-coverage__media-shell::after {
    z-index: 1 !important;

    width: 390px !important;
    height: 390px !important;

    top: -150px !important;
    left: -96px !important;
    right: auto !important;
    bottom: auto !important;

    opacity: 0.80 !important;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat !important;

    transform:
        rotate(-10deg) !important;

    clip-path: none !important;

    -webkit-mask-image: none !important;
    mask-image: none !important;

    overflow: visible !important;

    filter:
        drop-shadow(
            0 12px 24px
            rgba(0, 115, 190, 0.14)
        ) !important;
}


/* =========================================================
   LOWER-LEFT SPLASH

   Larger and deeper underneath the photo.
   ========================================================= */

.fleet-coverage__media-shell::before {
    z-index: 1 !important;

    width: 500px !important;
    height: 500px !important;

    left: -145px !important;
    bottom: -205px !important;
    top: auto !important;
    right: auto !important;

    opacity: 0.76 !important;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat !important;

    transform:
        rotate(-19deg) !important;

    clip-path: none !important;

    -webkit-mask-image: none !important;
    mask-image: none !important;

    overflow: visible !important;

    filter:
        drop-shadow(
            0 14px 28px
            rgba(0, 115, 190, 0.15)
        ) !important;
}


/* Make absolutely sure nothing clips the splashes */

.fleet-coverage__media-shell,
.fleet-coverage :has(> .fleet-coverage__media-shell) {
    overflow: visible !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .fleet-coverage__media-shell::after {
        width: 310px !important;
        height: 310px !important;

        top: -118px !important;
        left: -74px !important;
    }

    .fleet-coverage__media-shell::before {
        width: 390px !important;
        height: 390px !important;

        left: -108px !important;
        bottom: -160px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .fleet-coverage__media-shell::after {
        width: 205px !important;
        height: 205px !important;

        top: -80px !important;
        left: -48px !important;

        opacity: 0.62 !important;
    }

    .fleet-coverage__media-shell::before {
        width: 260px !important;
        height: 260px !important;

        left: -70px !important;
        bottom: -105px !important;

        opacity: 0.58 !important;
    }
}

/* =========================================================
   WASH & BEHOLD PREMIUM - SPLASH OPACITY SOFTENER

   Makes the decorative splash more subtle so it supports
   the photo instead of competing with it.
   ========================================================= */

.fleet-coverage__media-shell::after {
    opacity: 0.46 !important;
}

.fleet-coverage__media-shell::before {
    opacity: 0.40 !important;
}

@media (max-width: 1100px) {
    .fleet-coverage__media-shell::after {
        opacity: 0.40 !important;
    }

    .fleet-coverage__media-shell::before {
        opacity: 0.35 !important;
    }
}

@media (max-width: 700px) {
    .fleet-coverage__media-shell::after {
        opacity: 0.34 !important;
    }

    .fleet-coverage__media-shell::before {
        opacity: 0.30 !important;
    }
}


/* =========================================================
   WASH & BEHOLD PREMIUM - SPLASH OPACITY SOFTENER V2
   ========================================================= */

.fleet-coverage__media-shell::after {
    opacity: 0.46 !important;
}

.fleet-coverage__media-shell::before {
    opacity: 0.40 !important;
}

@media (max-width: 1100px) {
    .fleet-coverage__media-shell::after {
        opacity: 0.40 !important;
    }

    .fleet-coverage__media-shell::before {
        opacity: 0.35 !important;
    }
}

@media (max-width: 700px) {
    .fleet-coverage__media-shell::after {
        opacity: 0.34 !important;
    }

    .fleet-coverage__media-shell::before {
        opacity: 0.30 !important;
    }
}


/* =========================================================
   WASH & BEHOLD PREMIUM - REMOVE LEFT FLEET ROUTE ARC

   Removes only the old section-level ellipse behind the
   Fleet photo. The real PNG water splashes stay untouched.
   ========================================================= */

.fleet-coverage::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   WASH & BEHOLD PREMIUM - CLEAN PNG SPLASH PSEUDO ELEMENTS

   Removes leftover circle/ring styling from the old CSS
   splash experiment without moving or changing the PNGs.
   ========================================================= */

.fleet-coverage__media-shell::before,
.fleet-coverage__media-shell::after {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}


/* =========================================================
   WASH & BEHOLD PREMIUM - FLEET PHOTO DEPTH SHADOW

   Gives the fleet photograph more physical separation from
   the dark section and the decorative water splashes.
   ========================================================= */

.fleet-coverage__photo {
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.24),
        0 34px 72px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(126, 208, 247, 0.13) !important;
}


/* =========================================================
   WASH & BEHOLD PREMIUM - TESTIMONIALS VISUAL PASS

   Light watery section treatment, dimensional review cards,
   stronger attribution copy, and tighter transition into
   the estimator section.
   ========================================================= */


/* =========================================================
   SECTION BACKGROUND
   ========================================================= */

.premium-reviews {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
        clamp(5rem, 7vw, 7rem)
        0
        clamp(3.75rem, 5vw, 5rem) !important;

    background:
        radial-gradient(
            circle at 11% 18%,
            rgba(113, 201, 243, 0.13),
            transparent 27%
        ),
        radial-gradient(
            circle at 91% 72%,
            rgba(13, 59, 102, 0.07),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f9fcfe 0%,
            #eef7fc 58%,
            #ffffff 100%
        ) !important;
}


/* =========================================================
   VERY SUBTLE WATER GRAPHICS

   Same splash language as Fleet, but intentionally quiet.
   ========================================================= */

.premium-reviews::before,
.premium-reviews::after {
    content: "";

    position: absolute;
    z-index: 0;

    display: block;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat;

    pointer-events: none;
}

.premium-reviews::before {
    width: 390px;
    height: 390px;

    left: -190px;
    top: 145px;

    opacity: 0.055;

    transform:
        rotate(24deg);
}

.premium-reviews::after {
    width: 340px;
    height: 340px;

    right: -165px;
    bottom: 35px;

    opacity: 0.045;

    transform:
        rotate(-38deg);
}

.premium-reviews > .section-shell {
    position: relative;
    z-index: 2;
}


/* =========================================================
   HEADER
   ========================================================= */

.premium-reviews__header {
    align-items: center !important;
}

.premium-reviews__header > p {
    max-width: 390px;

    padding-bottom: 0 !important;

    color: #24394c !important;

    font-size:
        clamp(1rem, 0.25vw + 0.96rem, 1.08rem) !important;

    font-weight: 500;
    line-height: 1.65 !important;
}


/* =========================================================
   REVIEW GRID
   ========================================================= */

.premium-reviews__grid {
    margin-top:
        clamp(3rem, 4.5vw, 4.25rem) !important;

    gap:
        clamp(1.2rem, 2vw, 1.75rem) !important;

    align-items: stretch;
}


/* =========================================================
   REVIEW CARDS
   ========================================================= */

.premium-review {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: 350px !important;

    padding:
        clamp(2.15rem, 2.8vw, 2.8rem) !important;

    border:
        1px solid rgba(13, 59, 102, 0.12) !important;

    background:
        rgba(255, 255, 255, 0.88) !important;

    box-shadow:
        0 12px 28px rgba(13, 43, 67, 0.07),
        0 28px 58px rgba(13, 43, 67, 0.07);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}


/* Oversized editorial quotation mark */

.premium-review::before {
    content: "“";

    position: absolute;
    z-index: 0;

    right: 1.35rem;
    top: -1.25rem;

    color:
        rgba(13, 59, 102, 0.065);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(7rem, 9vw, 10rem);

    font-weight: 700;
    line-height: 1;

    pointer-events: none;
}

.premium-review > * {
    position: relative;
    z-index: 2;
}


/* =========================================================
   FEATURED REVIEW
   ========================================================= */

.premium-review--featured {
    transform:
        translateY(-14px);

    border-color:
        rgba(13, 59, 102, 0.17) !important;

    background:
        linear-gradient(
            145deg,
            rgba(221, 238, 248, 0.96),
            rgba(239, 248, 253, 0.94)
        ) !important;

    box-shadow:
        0 16px 32px rgba(13, 43, 67, 0.10),
        0 34px 68px rgba(13, 43, 67, 0.10);
}

.premium-review--featured::after {
    content: "";

    position: absolute;
    z-index: 1;

    width: 180px;
    height: 180px;

    right: -95px;
    bottom: -100px;

    border-radius: 50%;

    background:
        rgba(113, 201, 243, 0.10);

    pointer-events: none;
}


/* =========================================================
   STAR RATING
   ========================================================= */

.premium-review__stars {
    font-size: 1.05rem !important;
    letter-spacing: 0.14em !important;
}


/* =========================================================
   REVIEW COPY
   ========================================================= */

.premium-review blockquote {
    margin-top:
        clamp(1.7rem, 2.3vw, 2.1rem) !important;

    font-size:
        clamp(1.25rem, 1.45vw, 1.48rem) !important;

    line-height: 1.43 !important;
}


/* =========================================================
   ATTRIBUTION

   No more microscopic customer names / services.
   ========================================================= */

.premium-review footer {
    padding-top: 1.6rem !important;
}

.premium-review footer strong {
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
}

.premium-review footer span {
    margin-top: 0.32rem !important;

    color: #53697c !important;

    font-size: 0.86rem !important;
    font-weight: 500;
    line-height: 1.4 !important;
}


/* =========================================================
   DESKTOP HOVER

   Very small movement. No floating-card circus.
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .premium-review:not(.premium-review--featured):hover {
        transform:
            translateY(-5px);

        box-shadow:
            0 16px 34px rgba(13, 43, 67, 0.09),
            0 34px 64px rgba(13, 43, 67, 0.08);
    }

    .premium-review--featured:hover {
        transform:
            translateY(-18px);
    }
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .premium-review--featured {
        transform: none;
    }

    .premium-reviews::before {
        width: 270px;
        height: 270px;

        left: -150px;
    }

    .premium-reviews::after {
        width: 240px;
        height: 240px;

        right: -135px;
    }
}

@media (max-width: 700px) {

    .premium-reviews {
        padding:
            4.5rem
            0
            3.5rem !important;
    }

    .premium-review {
        min-height: 0 !important;
    }

    .premium-review footer strong {
        font-size: 0.96rem !important;
    }

    .premium-review footer span {
        font-size: 0.85rem !important;
    }

    .premium-review::before {
        font-size: 7rem;
    }
}


/* =========================================================
   WASH & BEHOLD PREMIUM - FINAL CTA NO CARD REDESIGN

   BANNED PATTERN REMOVED:
   no floating rounded CTA container
   no generic AI landing-page card
   ========================================================= */


/* =========================================================
   FULL SECTION TREATMENT
   ========================================================= */

.premium-final-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
        clamp(4.5rem, 7vw, 7rem)
        0 !important;

    background:
        linear-gradient(
            180deg,
            #eef7fc 0%,
            #f7fbfd 46%,
            #ffffff 100%
        ) !important;

    border-top:
        1px solid rgba(13, 59, 102, 0.09);
}


/* Broad water sweep behind the section */

.premium-final-cta::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: -8%;
    right: -8%;
    bottom: -190px;

    height: 360px;

    border-radius: 50% 50% 0 0;

    background:
        linear-gradient(
            180deg,
            rgba(113, 201, 243, 0.00) 0%,
            rgba(113, 201, 243, 0.08) 55%,
            rgba(113, 201, 243, 0.13) 100%
        );

    transform:
        rotate(-2deg);

    pointer-events: none;
}


/* Thin secondary sweep */

.premium-final-cta::after {
    content: "";

    position: absolute;
    z-index: 0;

    left: -10%;
    bottom: -125px;

    width: 72%;
    height: 240px;

    border-top:
        1px solid rgba(53, 145, 201, 0.18);

    border-radius: 50%;

    transform:
        rotate(3deg);

    pointer-events: none;
}


/* =========================================================
   REMOVE THE CARD
   ========================================================= */

.premium-final-cta__panel {
    position: relative;
    z-index: 2;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, 0.65fr) !important;

    align-items: center !important;

    gap:
        clamp(3.5rem, 6vw, 7rem) !important;

    padding:
        clamp(3.5rem, 5vw, 5rem)
        0 !important;

    border-radius: 0 !important;

    border-top:
        1px solid rgba(13, 59, 102, 0.16);

    border-bottom:
        1px solid rgba(13, 59, 102, 0.16);

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/* =========================================================
   HEADLINE SIDE
   ========================================================= */

.premium-final-cta__panel h2 {
    max-width: 880px !important;

    margin-top: 1.35rem !important;

    font-size:
        clamp(3.2rem, 5vw, 5.6rem) !important;

    line-height: 0.94 !important;

    letter-spacing: -0.055em !important;
}

.premium-final-cta__panel h2 span {
    display: block;

    color: var(--blue);
}


/* =========================================================
   ACTION SIDE
   ========================================================= */

.premium-final-cta__action {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 220px;

    padding-left:
        clamp(2rem, 4vw, 4.5rem);

    border-left:
        1px solid rgba(13, 59, 102, 0.16);
}

.premium-final-cta__action p {
    max-width: 390px;

    margin:
        0
        0
        1.8rem !important;

    color:
        #24394c !important;

    font-size:
        clamp(1.02rem, 0.22vw + 0.98rem, 1.1rem) !important;

    font-weight: 500;

    line-height: 1.65 !important;
}


/* Keep button intentional, not oversized */

.premium-final-cta__action .button,
.premium-final-cta__action .btn,
.premium-final-cta__action a {
    align-self: flex-start;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1020px) {

    .premium-final-cta__panel {
        grid-template-columns: 1fr !important;

        gap: 2.75rem !important;
    }

    .premium-final-cta__action {
        min-height: 0;

        padding:
            2.25rem
            0
            0 !important;

        border-left: 0;

        border-top:
            1px solid rgba(13, 59, 102, 0.14);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .premium-final-cta {
        padding:
            4rem
            0 !important;
    }

    .premium-final-cta__panel {
        padding:
            2.75rem
            0 !important;
    }

    .premium-final-cta__panel h2 {
        font-size:
            clamp(2.8rem, 13vw, 4.25rem) !important;
    }

    .premium-final-cta__action p {
        font-size:
            1rem !important;
    }
}


/* =========================================================
   WASH & BEHOLD PREMIUM - FINAL CTA ESTIMATOR ROADMAP

   Tightens the open CTA section and gives the right column
   useful estimator context without introducing another card.
   ========================================================= */


/* ---------------------------------------------------------
   TIGHTER SECTION HEIGHT
   --------------------------------------------------------- */

.premium-final-cta {
    padding:
        clamp(3.75rem, 5.5vw, 5.5rem)
        0 !important;
}

.premium-final-cta__panel {
    padding:
        clamp(3rem, 4vw, 4.25rem)
        0 !important;
}


/* ---------------------------------------------------------
   BRING THE WATER SWEEP INTO THE COMPOSITION
   --------------------------------------------------------- */

.premium-final-cta::before {
    bottom: -115px !important;
    height: 330px !important;
}

.premium-final-cta::after {
    bottom: -65px !important;
}


/* ---------------------------------------------------------
   RIGHT COLUMN
   --------------------------------------------------------- */

.premium-final-cta__action {
    min-height: 0 !important;

    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.premium-final-cta__action p {
    margin-bottom: 1.5rem !important;
}


/* ---------------------------------------------------------
   ESTIMATOR ROADMAP

   Open information layout. No box around it.
   --------------------------------------------------------- */

.premium-final-cta__steps {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        0.9rem
        1.35rem;

    max-width: 390px;

    margin:
        0
        0
        1.85rem;
}

.premium-final-cta__steps span {
    display: flex;
    align-items: center;

    gap: 0.7rem;

    color: #172d40;

    font-size:
        clamp(0.94rem, 0.12vw + 0.92rem, 1rem);

    font-weight: 750;
    line-height: 1.35;
}


/* Number markers */

.premium-final-cta__steps b {
    flex:
        0
        0
        32px;

    width: 32px;
    height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        var(--blue);

    color:
        #ffffff;

    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;

    letter-spacing: 0.04em;

    box-shadow:
        0 5px 12px
        rgba(13, 59, 102, 0.12);
}


/* Subtle route connection between the idea and the CTA */

.premium-final-cta__steps {
    position: relative;

    padding-top: 1.15rem;

    border-top:
        1px solid
        rgba(13, 59, 102, 0.13);
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1020px) {

    .premium-final-cta__action {
        padding-top: 2rem !important;
        padding-bottom: 0 !important;
    }

    .premium-final-cta__steps {
        max-width: 520px;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .premium-final-cta {
        padding:
            3.5rem
            0 !important;
    }

    .premium-final-cta__panel {
        padding:
            2.5rem
            0 !important;
    }
}

@media (max-width: 480px) {

    .premium-final-cta__steps {
        grid-template-columns: 1fr;

        gap: 0.75rem;
    }
}


/* =========================================================
   WASH & BEHOLD PREMIUM - FOOTER FINAL POLISH
   ========================================================= */

.site-footer::before {
    height: 3px !important;

    background:
        linear-gradient(
            90deg,
            var(--yellow) 0 18%,
            var(--blue-bright) 18% 100%
        ) !important;
}

.site-footer__logo--image {
    display: block !important;
    width: fit-content;
    line-height: 0;
}

.site-footer__logo-image {
    display: block;

    width:
        clamp(230px, 18vw, 300px);

    max-width: 100%;
    height: auto;
}

.site-footer__logo--image > span,
.site-footer__logo--image > small {
    display: none !important;
}

.site-footer__tagline {
    margin-top: 1.35rem !important;

    font-size: 1.12rem !important;
    font-weight: 800;
    line-height: 1.45;
}

.site-footer__copy {
    max-width: 410px !important;

    color:
        rgba(255, 255, 255, 0.78) !important;

    font-size: 1rem !important;
    font-weight: 500;
    line-height: 1.7 !important;
}

.site-footer__heading {
    font-size: 0.78rem !important;
    letter-spacing: 0.12em !important;
}

.site-footer__group nav {
    gap: 0.82rem !important;
}

.site-footer__group a {
    color:
        rgba(255, 255, 255, 0.87) !important;

    font-size: 0.98rem !important;
    font-weight: 650;
    line-height: 1.45;
}

.site-footer__group a:hover {
    color: #ffffff !important;
}

.site-footer__contact .site-footer__phone {
    font-size: 1.42rem !important;
}

.site-footer__contact p:not(.site-footer__heading) {
    color:
        rgba(255, 255, 255, 0.82) !important;

    font-size: 0.96rem !important;
    line-height: 1.6 !important;
}

.site-footer__fine-print {
    color:
        rgba(255, 255, 255, 0.69) !important;

    font-size: 0.94rem !important;
}

.site-footer__bottom {
    margin-top:
        clamp(3rem, 5vw, 4.75rem) !important;
}

.site-footer__bottom p {
    color:
        rgba(255, 255, 255, 0.68) !important;

    font-size: 0.84rem !important;
    font-weight: 600;
    line-height: 1.5;
}

@media (max-width: 600px) {

    .site-footer__logo-image {
        width: 255px;
    }

    .site-footer__copy {
        font-size: 0.98rem !important;
    }

    .site-footer__group a {
        font-size: 0.96rem !important;
    }

    .site-footer__bottom p {
        font-size: 0.82rem !important;
    }
}


/* =========================================================
   WASH & BEHOLD PREMIUM - FOOTER LAST READABILITY TUNE
   ========================================================= */


/* Give the real logo a little more presence and help the
   embedded PREMIUM DETAILING line survive the dark footer. */

.site-footer__logo-image {
    width:
        clamp(250px, 19vw, 320px) !important;

    filter:
        brightness(1.12)
        contrast(1.05) !important;
}


/* Bottom legal row should be subtle, not microscopic. */

.site-footer__bottom p {
    color:
        rgba(255, 255, 255, 0.76) !important;

    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}


/* Keep the divider visible enough to define the bottom row. */

.site-footer__bottom {
    border-top:
        1px solid rgba(255, 255, 255, 0.18) !important;
}


@media (max-width: 600px) {

    .site-footer__logo-image {
        width: 265px !important;
    }

    .site-footer__bottom p {
        font-size: 0.86rem !important;
    }
}


/* ==========================================================================
   WASH & BEHOLD PREMIUM - MOBILE AUDIT 01

   1. Keep mobile navigation available while scrolling.
   2. Strengthen service-image reading zones on small screens.
   ========================================================================== */


/* ==========================================================================
   STICKY MOBILE HEADER
   ========================================================================== */

@media (max-width: 600px) {

    .site-header {
        position: sticky;
        top: 0;

        z-index: 9999;
    }

    .navigation-bar {
        background:
            rgba(255, 255, 255, 0.985);

        box-shadow:
            0 8px 24px
            rgba(5, 25, 40, 0.10);

        -webkit-backdrop-filter:
            blur(16px);

        backdrop-filter:
            blur(16px);
    }

    html {
        scroll-padding-top: 90px;
    }
}


/* ==========================================================================
   MOBILE SERVICE IMAGE CONTRAST

   The photography remains visible, but the lower reading zone now rises
   higher behind the heading, paragraph, feature list, and CTA.
   ========================================================================== */

@media (max-width: 700px) {

    .service-showcase:not(.service-showcase--reverse)
    .service-showcase__content::before,
    .service-showcase--reverse
    .service-showcase__content::before {
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 88% !important;
    }


    /* ---------------------------------------------------------
       DARK SERVICE ROWS
       White copy over photography.
       --------------------------------------------------------- */

    .service-showcase:not(.service-showcase--reverse)
    .service-showcase__content::before {
        background:
            linear-gradient(
                0deg,
                rgba(5, 20, 33, 1) 0%,
                rgba(5, 20, 33, 0.99) 54%,
                rgba(5, 20, 33, 0.94) 72%,
                rgba(5, 20, 33, 0.76) 84%,
                rgba(5, 20, 33, 0.38) 94%,
                transparent 100%
            ) !important;
    }


    /* ---------------------------------------------------------
       LIGHT SERVICE ROWS
       Dark copy over photography.

       This specifically fixes Paint Correction and Memberships
       where the dark headline was crossing dark parts of the image.
       --------------------------------------------------------- */

    .service-showcase--reverse
    .service-showcase__content::before {
        background:
            linear-gradient(
                0deg,
                rgba(244, 250, 254, 1) 0%,
                rgba(244, 250, 254, 0.995) 54%,
                rgba(241, 249, 253, 0.97) 72%,
                rgba(235, 247, 253, 0.86) 84%,
                rgba(235, 247, 253, 0.48) 94%,
                transparent 100%
            ) !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SERVICES PAGE HERO V1
   ========================================================================== */

.page-services .desktop-navigation a[href="services.php"] {
    color: var(--blue);
}


/* ==========================================================================
   HERO SHELL
   ========================================================================== */

.services-page-hero {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    min-height:
        clamp(700px, 76vh, 850px);

    background:
        radial-gradient(
            circle at 84% 12%,
            rgba(75, 164, 216, 0.18),
            transparent 27%
        ),
        radial-gradient(
            circle at 8% 88%,
            rgba(55, 135, 186, 0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #061725 0%,
            #071d2e 48%,
            #09273d 100%
        );

    color: #ffffff;
}


/* ==========================================================================
   POLISHED-PAINT BACKGROUND DETAIL
   ========================================================================== */

.services-page-hero::before {
    content: "";

    position: absolute;
    z-index: 0;

    width: 900px;
    height: 900px;

    top: -560px;
    right: -250px;

    border:
        1px solid rgba(124, 205, 245, 0.16);

    border-radius: 50%;

    box-shadow:
        0 0 0 60px rgba(124, 205, 245, 0.018),
        0 0 0 128px rgba(124, 205, 245, 0.010);

    pointer-events: none;
}

.services-page-hero::after {
    content: "SERVICES";

    position: absolute;
    z-index: 0;

    left:
        max(
            22px,
            calc((100vw - 1480px) / 2 + 20px)
        );

    bottom: -0.12em;

    color:
        rgba(255, 255, 255, 0.025);

    font-size:
        clamp(8rem, 15vw, 15rem);

    font-weight: 950;
    line-height: 0.75;

    letter-spacing: -0.08em;

    pointer-events: none;
    user-select: none;
}


/* diagonal paint reflection */

.services-page-hero__gloss {
    position: absolute;
    z-index: 0;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.services-page-hero__gloss::before {
    content: "";

    position: absolute;

    width: 46%;
    height: 180%;

    top: -42%;
    left: 38%;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(255, 255, 255, 0.014) 35%,
            rgba(255, 255, 255, 0.055) 49%,
            rgba(255, 255, 255, 0.012) 61%,
            transparent 76%
        );

    transform:
        rotate(7deg);
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

.services-page-hero__inner {
    position: relative;
    z-index: 2;

    min-height:
        clamp(700px, 76vh, 850px);

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(430px, 0.75fr);

    align-items: center;

    gap:
        clamp(5rem, 9vw, 10rem);

    padding:
        clamp(5rem, 8vw, 8rem)
        0;
}


/* ==========================================================================
   LEFT COPY
   ========================================================================== */

.services-page-hero .section-label {
    color:
        rgba(255, 255, 255, 0.76);
}

.services-page-hero .section-label::before {
    background:
        var(--yellow);
}

.services-page-hero__copy {
    max-width: 790px;
}

.services-page-hero__copy h1 {
    max-width: 780px;

    margin-top: 1.35rem;

    color: #ffffff;

    font-size:
        clamp(4rem, 5.8vw, 6.7rem);

    line-height: 0.91;

    letter-spacing:
        -0.06em;
}

.services-page-hero__copy h1 span {
    display: block;

    margin-top: 0.13em;

    color:
        #84c4ed;
}

.services-page-hero__lead {
    max-width: 650px;

    margin-top: 1.8rem;

    color:
        rgba(255, 255, 255, 0.80);

    font-size:
        clamp(1.02rem, 1.18vw, 1.16rem);

    font-weight: 500;

    line-height: 1.72;
}


/* ==========================================================================
   ACTIONS
   ========================================================================== */

.services-page-hero__actions {
    margin-top: 2rem;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        1rem
        1.6rem;
}

.services-page-hero__text-link {
    display: inline-flex;
    align-items: center;

    gap: 0.7rem;

    color:
        rgba(255, 255, 255, 0.90);

    font-size: 0.84rem;
    font-weight: 900;

    letter-spacing: 0.025em;

    text-decoration: none;
    text-transform: uppercase;
}

.services-page-hero__text-link span {
    color:
        var(--yellow);

    font-size: 1.2rem;

    transition:
        transform 180ms ease;
}

.services-page-hero__text-link:hover span {
    transform:
        translateX(4px);
}

.services-page-hero__note {
    margin-top: 1.9rem;

    color:
        rgba(255, 255, 255, 0.52);

    font-size: 0.76rem;
    font-weight: 700;

    line-height: 1.5;
}


/* ==========================================================================
   SERVICE INDEX
   ========================================================================== */

.services-page-hero__index {
    width: 100%;

    border-top:
        1px solid rgba(255, 255, 255, 0.34);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.18);
}

.services-page-hero__index-head {
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.14);
}

.services-page-hero__index-head span {
    color:
        var(--yellow);

    font-size: 0.66rem;
    font-weight: 900;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}

.services-page-hero__index-head strong {
    color:
        rgba(255, 255, 255, 0.50);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ==========================================================================
   SERVICE ROWS
   ========================================================================== */

.services-page-hero__service {
    min-height: 112px;

    display: grid;

    grid-template-columns:
        56px
        minmax(0, 1fr);

    align-items: center;

    gap: 1rem;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.14);
}

.services-page-hero__number {
    align-self: start;

    padding-top: 1.85rem;

    color:
        #78bce7;

    font-size: 0.76rem;
    font-weight: 900;

    letter-spacing: 0.06em;
}

.services-page-hero__service h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(1.45rem, 1.7vw, 1.8rem);

    font-weight: 900;

    line-height: 1.1;

    letter-spacing:
        -0.025em;
}

.services-page-hero__service p {
    margin-top: 0.42rem;

    max-width: 390px;

    color:
        rgba(255, 255, 255, 0.61);

    font-size: 0.9rem;
    font-weight: 500;

    line-height: 1.5;
}


/* ==========================================================================
   INDEX FOOTER
   ========================================================================== */

.services-page-hero__footer {
    min-height: 86px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;
}

.services-page-hero__footer span {
    color:
        rgba(255, 255, 255, 0.46);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.services-page-hero__footer strong {
    max-width: 275px;

    color:
        rgba(255, 255, 255, 0.88);

    font-size: 0.82rem;
    font-weight: 800;

    line-height: 1.45;

    text-align: right;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1080px) {

    .services-page-hero__inner {
        grid-template-columns: 1fr;

        gap: 4rem;

        padding:
            5rem
            0;
    }

    .services-page-hero__copy {
        max-width: 800px;
    }

    .services-page-hero__index {
        max-width: 760px;
    }
}


/* ==========================================================================
   MOBILE FOUNDATION
   Final mobile QA comes later.
   ========================================================================== */

@media (max-width: 700px) {

    .services-page-hero__inner {
        padding:
            4.5rem
            0;
    }

    .services-page-hero__copy h1 {
        font-size:
            clamp(3.4rem, 14vw, 4.8rem);
    }

    .services-page-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .services-page-hero__actions .button {
        width: 100%;
    }

    .services-page-hero__text-link {
        min-height: 48px;

        justify-content: center;
    }

    .services-page-hero__service {
        grid-template-columns:
            42px
            minmax(0, 1fr);
    }

    .services-page-hero__footer {
        align-items: flex-start;
        flex-direction: column;

        padding:
            1.4rem
            0;
    }

    .services-page-hero__footer strong {
        max-width: none;

        text-align: left;
    }

    .services-page-hero::after {
        font-size:
            8rem;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SERVICES HERO READABILITY POLISH
   ========================================================================== */

.services-page-hero__service p {
    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        0.96rem;

    line-height:
        1.55;
}

.services-page-hero__note {
    color:
        rgba(255, 255, 255, 0.66);
}

.services-page-hero__index-head strong {
    color:
        rgba(255, 255, 255, 0.60);
}

.services-page-hero__footer span {
    color:
        rgba(255, 255, 255, 0.60);

    font-size:
        0.72rem;
}


/* ==========================================================================
   WASH & BEHOLD PREMIUM - SERVICES HERO SMALL LABEL READABILITY
   ========================================================================== */

.services-page-hero__index-head,
.services-page-hero__footer {
    color:
        rgba(255, 255, 255, 0.82);
}

.services-page-hero__index-head > *,
.services-page-hero__index-head strong,
.services-page-hero__index-head span,
.services-page-hero__index-head p {
    color:
        rgba(255, 255, 255, 0.82);

    font-size:
        0.82rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}

.services-page-hero__footer > :first-child,
.services-page-hero__footer strong,
.services-page-hero__footer small {
    color:
        rgba(255, 255, 255, 0.70);

    font-size:
        0.76rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}

.services-page-hero__footer > :last-child,
.services-page-hero__footer span,
.services-page-hero__footer p,
.services-page-hero__footer a {
    color:
        rgba(255, 255, 255, 0.92);

    font-size:
        0.94rem;

    font-weight:
        700;

    line-height:
        1.45;
}


/* ==========================================================================
   WASH & BEHOLD PREMIUM - SERVICES HERO DETAILING BACKGROUND

   Remove generic circles.
   Replace with subtle spray, wash motion, droplets, and gloss.
   ========================================================================== */


/* ==========================================================================
   BASE
   ========================================================================== */

.services-page-hero {
    background:
        radial-gradient(
            ellipse at 88% 18%,
            rgba(79, 176, 226, 0.13) 0%,
            rgba(39, 119, 166, 0.07) 28%,
            transparent 58%
        ),
        radial-gradient(
            ellipse at 18% 92%,
            rgba(53, 146, 198, 0.08) 0%,
            transparent 46%
        ),
        linear-gradient(
            135deg,
            #061725 0%,
            #071d2e 48%,
            #09273d 100%
        ) !important;
}


/* ==========================================================================
   TOP-RIGHT SPRAY / MIST

   Reuses the real transparent splash asset at very low opacity.
   No border circles. No SaaS wallpaper.
   ========================================================================== */

.services-page-hero::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: -190px;
    right: -170px;

    width: 760px;
    height: 620px;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat;

    box-shadow: none !important;

    opacity: 0.13;

    filter:
        saturate(0.72)
        brightness(1.18)
        blur(0.35px);

    transform:
        rotate(-18deg)
        scale(1.12);

    pointer-events: none;
}


/* ==========================================================================
   KEEP LARGE SERVICES WORD
   ========================================================================== */

.services-page-hero::after {
    z-index: 0;
}


/* ==========================================================================
   GLOSS / POLISHED-PANEL REFLECTION
   ========================================================================== */

.services-page-hero__gloss::before {
    width: 42%;
    height: 190%;

    top: -46%;
    left: 34%;

    background:
        linear-gradient(
            112deg,
            transparent 0%,
            rgba(255,255,255,0.012) 30%,
            rgba(255,255,255,0.045) 44%,
            rgba(156,218,248,0.055) 50%,
            rgba(255,255,255,0.018) 58%,
            transparent 74%
        );

    transform:
        rotate(6deg);
}


/* ==========================================================================
   LOWER WATER SWEEP
   ========================================================================== */

.services-page-hero__gloss::after {
    content: "";

    position: absolute;

    left: -180px;
    bottom: -250px;

    width: 720px;
    height: 430px;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat;

    opacity: 0.075;

    filter:
        saturate(0.68)
        brightness(1.12);

    transform:
        rotate(154deg)
        scale(1.08);

    pointer-events: none;
}


/* ==========================================================================
   SMALL DROPLET ACCENTS

   Three restrained droplets only.
   ========================================================================== */

.services-page-hero__inner::before {
    content: "";

    position: absolute;

    top: 13%;
    right: 7%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        rgba(132, 205, 242, 0.62);

    box-shadow:
        42px 28px 0 -1px rgba(132, 205, 242, 0.34),
        72px -18px 0 1px rgba(255, 212, 71, 0.38);

    opacity: 0.65;

    pointer-events: none;
}


/* ==========================================================================
   REMOVE ANY REMAINING CIRCLE-LIKE SHADOW ARTIFACTS
   ========================================================================== */

.services-page-hero::before {
    outline: 0 !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1080px) {

    .services-page-hero::before {
        width: 620px;
        height: 500px;

        top: -150px;
        right: -190px;

        opacity: 0.10;
    }

    .services-page-hero__gloss::after {
        width: 560px;
        height: 340px;

        left: -180px;
        bottom: -210px;

        opacity: 0.06;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .services-page-hero::before {
        width: 430px;
        height: 360px;

        top: -90px;
        right: -170px;

        opacity: 0.08;
    }

    .services-page-hero__gloss::after {
        width: 390px;
        height: 250px;

        left: -150px;
        bottom: -150px;

        opacity: 0.05;
    }

    .services-page-hero__inner::before {
        opacity: 0.42;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SERVICES HERO BUBBLE ACCENTS
   One or two subtle bubbles behind "Different messes."
   ========================================================================== */

.services-page-hero__inner {
    position: relative;
}

.services-page-hero__inner::after {
    content: "";
    position: absolute;
    left: 1.5%;
    top: 13%;
    width: 260px;
    height: 220px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.34;
    background:
        radial-gradient(
            circle at 30% 48%,
            rgba(210, 240, 255, 0.10) 0 42px,
            rgba(126, 201, 237, 0.18) 43px,
            rgba(255, 255, 255, 0.18) 47px,
            rgba(126, 201, 237, 0.08) 52px,
            transparent 56px
        ),
        radial-gradient(
            circle at 71% 24%,
            rgba(210, 240, 255, 0.08) 0 22px,
            rgba(126, 201, 237, 0.16) 23px,
            rgba(255, 255, 255, 0.15) 26px,
            rgba(126, 201, 237, 0.07) 30px,
            transparent 34px
        ),
        radial-gradient(
            circle at 27% 39%,
            rgba(255,255,255,0.24) 0 5px,
            transparent 6px
        ),
        radial-gradient(
            circle at 67% 18%,
            rgba(255,255,255,0.18) 0 3px,
            transparent 4px
        );
    filter: blur(0.15px);
}

.services-page-hero__copy,
.services-page-hero__menu,
.services-page-hero__actions,
.services-page-hero__footer {
    position: relative;
    z-index: 1;
}

@media (max-width: 1080px) {
    .services-page-hero__inner::after {
        left: 2%;
        top: 14%;
        width: 220px;
        height: 190px;
        opacity: 0.28;
    }
}

@media (max-width: 700px) {
    .services-page-hero__inner::after {
        left: 4%;
        top: 10%;
        width: 160px;
        height: 140px;
        opacity: 0.20;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SERVICES DIAGNOSTIC SECTION
   ========================================================================== */

.services-diagnostic {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    padding:
        clamp(7rem, 9vw, 10rem)
        0;

    background:
        linear-gradient(
            118deg,
            #f9fcfe 0%,
            #eef7fc 48%,
            #e5f3fa 100%
        );

    color:
        var(--ink);
}


/* ==========================================================================
   WET-SURFACE BACKGROUND

   Long irregular streaks instead of generic circles.
   ========================================================================== */

.services-diagnostic::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: -25%;
    right: 5%;

    width: 34%;
    height: 150%;

    opacity: 0.52;

    background:
        linear-gradient(
            101deg,
            transparent 0 18%,
            rgba(80, 168, 215, 0.045) 18.5% 19%,
            transparent 19.5% 39%,
            rgba(63, 157, 207, 0.07) 39.4% 40%,
            transparent 40.5% 66%,
            rgba(255,255,255,0.58) 66.3% 67%,
            transparent 67.4% 100%
        );

    transform:
        rotate(7deg);

    pointer-events: none;
}

.services-diagnostic::after {
    content: "";

    position: absolute;
    z-index: 0;

    left: -8%;
    bottom: -35%;

    width: 70%;
    height: 62%;

    opacity: 0.65;

    background:
        linear-gradient(
            8deg,
            transparent 0%,
            rgba(104, 191, 232, 0.06) 32%,
            rgba(255,255,255,0.48) 49%,
            rgba(81, 172, 218, 0.08) 53%,
            transparent 72%
        );

    transform:
        rotate(-4deg);

    pointer-events: none;
}


/* ==========================================================================
   ADDITIONAL WATER DETAIL
   ========================================================================== */

.services-diagnostic__water {
    position: absolute;
    z-index: 0;

    inset: 0;

    pointer-events: none;
}

.services-diagnostic__water::before {
    content: "";

    position: absolute;

    width: 9px;
    height: 9px;

    top: 17%;
    right: 13%;

    border-radius: 50%;

    background:
        rgba(71, 165, 216, 0.22);

    box-shadow:
        34px 42px 0 -2px rgba(71, 165, 216, 0.18),
        -24px 78px 0 1px rgba(255,255,255,0.72),
        61px 114px 0 -3px rgba(71, 165, 216, 0.20);
}


/* ==========================================================================
   GRID
   ========================================================================== */

.services-diagnostic__grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(360px, 0.78fr)
        minmax(620px, 1.22fr);

    align-items: start;

    gap:
        clamp(5rem, 9vw, 10rem);
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.services-diagnostic__intro {
    max-width: 570px;

    padding-top: 0.6rem;
}

.services-diagnostic__intro h2 {
    margin-top: 1.2rem;

    color:
        var(--navy);

    font-size:
        clamp(3.8rem, 5vw, 5.8rem);

    line-height: 0.92;

    letter-spacing:
        -0.06em;
}

.services-diagnostic__intro h2 span {
    display: block;

    margin-top: 0.12em;

    color:
        var(--blue);
}

.services-diagnostic__lead {
    max-width: 540px;

    margin-top: 1.8rem;

    color:
        #334b5d;

    font-size:
        clamp(1rem, 1.1vw, 1.12rem);

    font-weight: 500;

    line-height: 1.7;
}

.services-diagnostic__aside {
    max-width: 500px;

    margin-top: 2rem;

    padding-left: 1.1rem;

    border-left:
        3px solid var(--yellow);

    color:
        #617586;

    font-size: 0.88rem;
    font-weight: 650;

    line-height: 1.6;
}


/* ==========================================================================
   LIST
   ========================================================================== */

.services-diagnostic__list {
    border-top:
        2px solid rgba(7, 32, 50, 0.18);
}


/* ==========================================================================
   ROW
   ========================================================================== */

.services-diagnostic__item {
    min-height: 132px;

    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr)
        150px;

    align-items: center;

    gap:
        1.3rem;

    padding:
        1.5rem
        0;

    border-bottom:
        1px solid rgba(7, 32, 50, 0.14);
}

.services-diagnostic__number {
    align-self: start;

    padding-top: 0.35rem;

    color:
        var(--blue);

    font-size: 0.77rem;
    font-weight: 950;

    letter-spacing: 0.06em;
}

.services-diagnostic__item-main h3 {
    margin: 0;

    color:
        var(--navy);

    font-size:
        clamp(1.65rem, 2vw, 2.15rem);

    font-weight: 950;

    line-height: 1.05;

    letter-spacing:
        -0.035em;
}

.services-diagnostic__item-main p {
    max-width: 520px;

    margin-top: 0.55rem;

    color:
        #4d6373;

    font-size: 0.98rem;
    font-weight: 500;

    line-height: 1.58;
}


/* ==========================================================================
   RIGHT-SIDE QUESTION
   ========================================================================== */

.services-diagnostic__tag {
    justify-self: end;

    color:
        #607789;

    font-size: 0.69rem;
    font-weight: 900;

    line-height: 1.35;

    letter-spacing: 0.07em;

    text-align: right;
    text-transform: uppercase;
}


/* ==========================================================================
   RESULT LINE
   ========================================================================== */

.services-diagnostic__result {
    min-height: 92px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        2px solid rgba(7, 32, 50, 0.18);
}

.services-diagnostic__result span {
    color:
        #607789;

    font-size: 0.73rem;
    font-weight: 850;

    letter-spacing: 0.065em;

    text-transform: uppercase;
}

.services-diagnostic__result strong {
    color:
        var(--navy);

    font-size: 1rem;
    font-weight: 950;

    text-align: right;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1080px) {

    .services-diagnostic__grid {
        grid-template-columns:
            1fr;

        gap: 4rem;
    }

    .services-diagnostic__intro {
        max-width: 720px;
    }

    .services-diagnostic__list {
        max-width: 850px;
    }
}


/* ==========================================================================
   MOBILE FOUNDATION
   ========================================================================== */

@media (max-width: 700px) {

    .services-diagnostic {
        padding:
            5rem
            0;
    }

    .services-diagnostic__intro h2 {
        font-size:
            clamp(3.2rem, 13vw, 4.5rem);
    }

    .services-diagnostic__item {
        grid-template-columns:
            40px
            minmax(0, 1fr);

        gap: 1rem;
    }

    .services-diagnostic__tag {
        grid-column:
            2;

        justify-self: start;

        margin-top: -0.4rem;

        text-align: left;
    }

    .services-diagnostic__result {
        align-items: flex-start;
        flex-direction: column;

        gap: 0.45rem;

        padding:
            1.4rem
            0;
    }

    .services-diagnostic__result strong {
        text-align: left;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SERVICES DIAGNOSTIC READABILITY
   ========================================================================== */

.services-diagnostic__tag {
    color:
        #3f6178;

    font-size:
        0.76rem;

    font-weight:
        900;

    line-height:
        1.4;

    letter-spacing:
        0.065em;
}

.services-diagnostic__result span {
    color:
        #496779;

    font-size:
        0.78rem;

    font-weight:
        900;

    letter-spacing:
        0.06em;
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SERVICES DIAGNOSTIC TRIPLE AUDIT
   ========================================================================== */


/* ==========================================================================
   DETAIL READABILITY
   ========================================================================== */

.services-diagnostic__tag {
    color:
        #35566d !important;

    font-size:
        0.80rem !important;

    font-weight:
        900 !important;

    line-height:
        1.4 !important;

    letter-spacing:
        0.055em !important;
}

.services-diagnostic__result span {
    color:
        #3f6176 !important;

    font-size:
        0.80rem !important;

    font-weight:
        900 !important;

    letter-spacing:
        0.055em !important;
}

.services-diagnostic__aside {
    color:
        #425e72 !important;

    font-size:
        0.94rem !important;

    font-weight:
        650 !important;

    line-height:
        1.62 !important;
}


/* ==========================================================================
   REMOVE STRAY DOTS

   They looked accidental rather than like deliberate water.
   ========================================================================== */

.services-diagnostic__water::before {
    content:
        none !important;

    display:
        none !important;
}


/* ==========================================================================
   WET PANEL REFLECTION

   Keep the movement, but remove the ruler-straight light-beam look.
   ========================================================================== */

.services-diagnostic::before {
    top:
        -20% !important;

    right:
        8% !important;

    width:
        31% !important;

    height:
        145% !important;

    opacity:
        0.36 !important;

    background:
        linear-gradient(
            104deg,
            transparent 0%,
            transparent 24%,
            rgba(76, 164, 211, 0.035) 25%,
            rgba(255, 255, 255, 0.32) 27%,
            rgba(87, 178, 223, 0.045) 30%,
            transparent 34%,
            transparent 55%,
            rgba(75, 164, 212, 0.04) 58%,
            rgba(255, 255, 255, 0.25) 60%,
            transparent 64%,
            transparent 100%
        ) !important;

    filter:
        blur(3px);

    transform:
        rotate(5deg) !important;
}


/* ==========================================================================
   REAL WATER / FOAM TEXTURE

   Very faint. Background atmosphere only.
   ========================================================================== */

.services-diagnostic::after {
    content: "";

    position: absolute;
    z-index: 0;

    right: -150px !important;
    bottom: -160px !important;
    left: auto !important;

    width: 720px !important;
    height: 500px !important;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat !important;

    opacity:
        0.065 !important;

    filter:
        saturate(0.65)
        brightness(1.08)
        blur(0.4px);

    transform:
        rotate(18deg)
        scale(1.05) !important;

    pointer-events: none;
}


/* ==========================================================================
   KEEP CONTENT ABOVE ALL DECORATION
   ========================================================================== */

.services-diagnostic__grid {
    position:
        relative;

    z-index:
        2;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1080px) {

    .services-diagnostic::after {
        right:
            -220px !important;

        bottom:
            -150px !important;

        width:
            620px !important;

        height:
            430px !important;

        opacity:
            0.055 !important;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .services-diagnostic::before {
        opacity:
            0.24 !important;
    }

    .services-diagnostic::after {
        right:
            -180px !important;

        bottom:
            -90px !important;

        width:
            440px !important;

        height:
            300px !important;

        opacity:
            0.045 !important;
    }

    .services-diagnostic__tag,
    .services-diagnostic__result span {
        font-size:
            0.76rem !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SERVICES DIAGNOSTIC FINAL TIGHTEN
   ========================================================================== */


/* Reduce unnecessary empty space below the content */

.services-diagnostic {
    padding:
        clamp(6.5rem, 8vw, 8.5rem)
        0
        clamp(4.5rem, 5.5vw, 6rem) !important;
}


/* Keep the four right-side questions visually consistent */

@media (min-width: 1081px) {

    .services-diagnostic__tag {
        min-width: 165px;

        white-space: nowrap;
    }
}


/* Keep the water accent attached to the content zone */

.services-diagnostic::after {
    right: -110px !important;
    bottom: -105px !important;

    width: 660px !important;
    height: 455px !important;

    opacity: 0.07 !important;
}


/* Tablet and mobile may wrap naturally */

@media (max-width: 1080px) {

    .services-diagnostic__tag {
        min-width: 0;

        white-space: normal;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - DIAGNOSTIC REAL BUBBLES

   Uses the real transparent bubble artwork.
   Each accent crops a different bubble from the same source asset.
   ========================================================================== */


/* ==========================================================================
   INTRO LAYERING
   ========================================================================== */

.services-diagnostic__intro {
    position: relative;
    isolation: isolate;
}

.services-diagnostic__intro > :not(.services-diagnostic__bubbles) {
    position: relative;
    z-index: 2;
}


/* ==========================================================================
   BUBBLE FIELD
   ========================================================================== */

.services-diagnostic__bubbles {
    position: absolute;
    z-index: 1;

    inset:
        -75px
        -35px
        -70px
        -90px;

    overflow: hidden;

    pointer-events: none;
}

.services-diagnostic__bubble {
    position: absolute;

    display: block;

    background-image:
        url("../images/services-bubble-cluster.webp");

    background-repeat:
        no-repeat;

    opacity: 0.34;

    filter:
        saturate(0.78)
        brightness(1.05);

    pointer-events: none;
}


/* ==========================================================================
   LARGE BUBBLE

   Sits partly behind "We quote".
   ========================================================================== */

.services-diagnostic__bubble--one {
    width: 205px;
    height: 205px;

    top: 64px;
    left: 245px;

    border-radius: 50%;

    background-size:
        690px
        690px;

    background-position:
        -150px
        -135px;

    transform:
        rotate(-8deg);

    opacity:
        0.26;
}


/* ==========================================================================
   SMALL UPPER BUBBLE

   Separate accent above the headline.
   ========================================================================== */

.services-diagnostic__bubble--two {
    width: 92px;
    height: 92px;

    top: -4px;
    left: 78px;

    border-radius: 50%;

    background-size:
        610px
        610px;

    background-position:
        -12px
        -272px;

    transform:
        rotate(11deg);

    opacity:
        0.38;
}


/* ==========================================================================
   LOWER BUBBLE

   Sits near the transition between headline and body copy.
   ========================================================================== */

.services-diagnostic__bubble--three {
    width: 118px;
    height: 118px;

    top: 338px;
    left: 365px;

    border-radius: 50%;

    background-size:
        650px
        650px;

    background-position:
        -94px
        -416px;

    transform:
        rotate(-12deg);

    opacity:
        0.30;
}


/* ==========================================================================
   SOFTEN THEM INTO THE SECTION

   The bubbles should feel behind the typography, not pasted on top.
   ========================================================================== */

.services-diagnostic__bubble::after {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    background:
        radial-gradient(
            circle at center,
            transparent 48%,
            rgba(239, 248, 253, 0.08) 70%,
            rgba(239, 248, 253, 0.22) 100%
        );
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1080px) {

    .services-diagnostic__bubbles {
        inset:
            -55px
            -20px
            -50px
            -55px;
    }

    .services-diagnostic__bubble--one {
        width: 175px;
        height: 175px;

        top: 72px;
        left: 265px;
    }

    .services-diagnostic__bubble--two {
        width: 76px;
        height: 76px;

        left: 60px;
    }

    .services-diagnostic__bubble--three {
        width: 100px;
        height: 100px;

        top: 320px;
        left: 390px;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .services-diagnostic__bubbles {
        inset:
            -35px
            -12px
            -35px
            -28px;
    }

    .services-diagnostic__bubble--one {
        width: 125px;
        height: 125px;

        top: 88px;
        left: 56%;

        opacity:
            0.18;
    }

    .services-diagnostic__bubble--two {
        width: 58px;
        height: 58px;

        top: 8px;
        left: 8%;

        opacity:
            0.24;
    }

    .services-diagnostic__bubble--three {
        width: 72px;
        height: 72px;

        top: 300px;
        left: 72%;

        opacity:
            0.18;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SERVICES FULL DETAIL
   ========================================================================== */

.services-full-detail {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    padding:
        clamp(7rem, 9vw, 10rem)
        0;

    background:
        radial-gradient(
            ellipse at 82% 28%,
            rgba(45, 132, 188, 0.18),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #051522 0%,
            #071d2e 50%,
            #092a43 100%
        );

    color: #ffffff;
}


/* ==========================================================================
   BACKGROUND WATER / GLOSS
   ========================================================================== */

.services-full-detail::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: -12%;
    bottom: -18%;

    width: 62%;
    height: 58%;

    background:
        linear-gradient(
            9deg,
            transparent 0%,
            rgba(88, 178, 226, 0.04) 31%,
            rgba(255, 255, 255, 0.07) 47%,
            rgba(102, 190, 233, 0.045) 55%,
            transparent 74%
        );

    filter:
        blur(2px);

    transform:
        rotate(-7deg);

    pointer-events: none;
}

.services-full-detail__wash {
    position: absolute;
    z-index: 0;

    inset: 0;

    pointer-events: none;
}

.services-full-detail__wash::before {
    content: "";

    position: absolute;

    top: 8%;
    right: 4%;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        rgba(123, 202, 241, 0.42);

    box-shadow:
        38px 34px 0 -2px rgba(123, 202, 241, 0.20),
        -28px 92px 0 1px rgba(255,255,255,0.16),
        68px 145px 0 -2px rgba(123, 202, 241, 0.16);
}


/* ==========================================================================
   GRID
   ========================================================================== */

.services-full-detail__grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(420px, 0.78fr)
        minmax(620px, 1.22fr);

    align-items: center;

    gap:
        clamp(5rem, 8vw, 9rem);
}


/* ==========================================================================
   CONTENT
   ========================================================================== */

.services-full-detail__content {
    position: relative;

    max-width: 610px;
}

.services-full-detail__number {
    position: absolute;

    top: -2.75rem;
    right: 0;

    color:
        transparent;

    font-size:
        clamp(5rem, 7vw, 7.5rem);

    font-weight: 950;
    line-height: 1;

    -webkit-text-stroke:
        1px rgba(116, 198, 239, 0.28);

    user-select: none;
}

.services-full-detail .section-label {
    color:
        rgba(255,255,255,0.72);
}

.services-full-detail .section-label::before {
    background:
        var(--yellow);
}

.services-full-detail__content h2 {
    position: relative;

    margin-top: 1.2rem;

    color:
        #ffffff;

    font-size:
        clamp(3.8rem, 5vw, 5.7rem);

    line-height:
        0.92;

    letter-spacing:
        -0.06em;
}

.services-full-detail__content h2 span {
    display: block;

    margin-top: 0.12em;

    color:
        #7fc2ec;
}

.services-full-detail__lead {
    max-width: 570px;

    margin-top: 1.7rem;

    color:
        rgba(255,255,255,0.78);

    font-size:
        clamp(1rem, 1.12vw, 1.12rem);

    font-weight: 500;

    line-height:
        1.68;
}


/* ==========================================================================
   INCLUDED
   ========================================================================== */

.services-full-detail__included {
    margin-top:
        2.3rem;

    padding-top:
        1.5rem;

    border-top:
        1px solid rgba(255,255,255,0.16);
}

.services-full-detail__included-label {
    color:
        var(--yellow);

    font-size:
        0.7rem;

    font-weight:
        900;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}

.services-full-detail__included ul {
    margin:
        1.25rem
        0
        0;

    padding: 0;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        0.9rem
        1.8rem;

    list-style: none;
}

.services-full-detail__included li {
    position: relative;

    padding-left:
        1.65rem;

    color:
        rgba(255,255,255,0.88);

    font-size:
        0.92rem;

    font-weight:
        750;

    line-height:
        1.45;
}

.services-full-detail__included li::before {
    content:
        "✓";

    position: absolute;

    top: 0;
    left: 0;

    width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    border-radius:
        50%;

    background:
        var(--yellow);

    color:
        #071827;

    font-size:
        0.64rem;

    font-weight:
        950;
}


/* ==========================================================================
   BOTTOM DETAIL
   ========================================================================== */

.services-full-detail__bottom {
    margin-top:
        2.3rem;

    padding-top:
        1.4rem;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap:
        2rem;

    border-top:
        1px solid rgba(255,255,255,0.16);
}

.services-full-detail__bottom > div {
    max-width:
        350px;
}

.services-full-detail__bottom span {
    display: block;

    color:
        rgba(255,255,255,0.48);

    font-size:
        0.66rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.services-full-detail__bottom strong {
    display: block;

    margin-top:
        0.35rem;

    color:
        rgba(255,255,255,0.86);

    font-size:
        0.84rem;

    font-weight:
        750;

    line-height:
        1.5;
}

.services-full-detail__link {
    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    color:
        #ffffff;

    font-size:
        0.76rem;

    font-weight:
        900;

    letter-spacing:
        0.04em;

    text-decoration:
        none;

    text-transform:
        uppercase;
}

.services-full-detail__link > span {
    color:
        var(--yellow);

    font-size:
        1.2rem;

    transition:
        transform 180ms ease;
}

.services-full-detail__link:hover > span {
    transform:
        translateX(4px);
}


/* ==========================================================================
   VISUAL COMPOSITION
   ========================================================================== */

.services-full-detail__visual {
    position: relative;

    min-height:
        670px;
}

.services-full-detail__exterior {
    position: absolute;

    inset:
        0
        0
        70px
        70px;

    margin: 0;

    overflow: hidden;

    border-radius:
        26px;

    box-shadow:
        0 28px 70px rgba(0,0,0,0.34);
}

.services-full-detail__exterior img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform 650ms ease;
}

.services-full-detail__visual:hover
.services-full-detail__exterior img {
    transform:
        scale(1.018);
}

.services-full-detail__exterior::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(4,17,28,0.20),
            transparent 42%
        );

    pointer-events: none;
}


/* ==========================================================================
   INTERIOR INSET
   ========================================================================== */

.services-full-detail__interior {
    position: absolute;
    z-index: 3;

    left: 0;
    bottom: 0;

    width:
        min(43%, 350px);

    aspect-ratio:
        1.22 / 1;

    margin: 0;

    overflow: hidden;

    border:
        7px solid #071827;

    border-radius:
        20px;

    box-shadow:
        0 24px 55px rgba(0,0,0,0.38);
}

.services-full-detail__interior img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit:
        cover;

    object-position:
        center;
}


/* ==========================================================================
   IMAGE LABELS
   ========================================================================== */

.services-full-detail__exterior figcaption,
.services-full-detail__interior figcaption {
    position: absolute;
    z-index: 4;

    left: 1rem;
    bottom: 1rem;

    padding:
        0.5rem
        0.7rem;

    background:
        rgba(5,21,34,0.76);

    color:
        rgba(255,255,255,0.88);

    font-size:
        0.64rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    backdrop-filter:
        blur(8px);
}


/* ==========================================================================
   STATUS TAB
   ========================================================================== */

.services-full-detail__status {
    position: absolute;
    z-index: 4;

    top: 2rem;
    right: -1rem;

    min-width:
        165px;

    padding:
        0.85rem
        1rem;

    background:
        var(--yellow);

    color:
        #071827;

    box-shadow:
        0 16px 34px rgba(0,0,0,0.18);
}

.services-full-detail__status span {
    display: block;

    color:
        rgba(7,24,39,0.62);

    font-size:
        0.6rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.services-full-detail__status strong {
    display: block;

    margin-top:
        0.2rem;

    font-size:
        1rem;

    font-weight:
        950;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .services-full-detail__grid {
        grid-template-columns:
            1fr;

        gap:
            4.5rem;
    }

    .services-full-detail__content {
        max-width:
            720px;
    }

    .services-full-detail__visual {
        min-height:
            640px;
    }
}


/* ==========================================================================
   MOBILE FOUNDATION
   ========================================================================== */

@media (max-width: 700px) {

    .services-full-detail {
        padding:
            5rem
            0;
    }

    .services-full-detail__content h2 {
        font-size:
            clamp(3.2rem, 13vw, 4.5rem);
    }

    .services-full-detail__number {
        top:
            -1.3rem;

        font-size:
            5rem;
    }

    .services-full-detail__included ul {
        grid-template-columns:
            1fr;
    }

    .services-full-detail__bottom {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .services-full-detail__visual {
        min-height:
            500px;
    }

    .services-full-detail__exterior {
        inset:
            0
            0
            55px
            30px;

        border-radius:
            18px;
    }

    .services-full-detail__interior {
        width:
            48%;

        border-width:
            5px;

        border-radius:
            14px;
    }

    .services-full-detail__status {
        top:
            1rem;

        right:
            0;

        min-width:
            145px;
    }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .services-full-detail__visual:hover
    .services-full-detail__exterior img {
        transform:
            none;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - FULL DETAIL FINAL POLISH
   ========================================================================== */


/* ==========================================================================
   EXTERIOR IMAGE LABEL

   Move it away from the interior inset so the two image labels
   read as separate pieces of information.
   ========================================================================== */

.services-full-detail__exterior figcaption {
    left: auto !important;
    right: 1rem !important;
    bottom: 1rem !important;
}


/* ==========================================================================
   BEST FOR AREA
   ========================================================================== */

.services-full-detail__bottom > div > span {
    color:
        rgba(255, 255, 255, 0.64) !important;

    font-size:
        0.72rem !important;

    font-weight:
        900 !important;

    letter-spacing:
        0.075em !important;
}

.services-full-detail__bottom > div > strong {
    color:
        rgba(255, 255, 255, 0.92) !important;

    font-size:
        0.94rem !important;

    font-weight:
        750 !important;

    line-height:
        1.55 !important;
}


/* ==========================================================================
   BOTTOM CTA
   ========================================================================== */

.services-full-detail__link {
    color:
        #ffffff !important;

    font-size:
        0.84rem !important;

    font-weight:
        900 !important;

    letter-spacing:
        0.035em !important;
}

.services-full-detail__link > span {
    font-size:
        1.3rem !important;
}


/* ==========================================================================
   GIVE THE BOTTOM ROW A LITTLE MORE BREATHING ROOM
   ========================================================================== */

.services-full-detail__bottom {
    padding-top:
        1.6rem !important;

    gap:
        2.4rem !important;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .services-full-detail__bottom > div > strong {
        font-size:
            0.92rem !important;
    }

    .services-full-detail__link {
        font-size:
            0.82rem !important;
    }

    .services-full-detail__exterior figcaption {
        right:
            0.8rem !important;

        bottom:
            0.8rem !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - FULL DETAIL RANDOM BUBBLES
   ========================================================================== */


/* ==========================================================================
   REMOVE OLD PAINT-SPLATTER DOTS
   ========================================================================== */

.services-full-detail__wash::before,
.services-full-detail__wash::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================================
   BUBBLE FIELD
   ========================================================================== */

.services-full-detail__wash {
    position: absolute;
    z-index: 1;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.services-full-detail__bubble {
    position: absolute;

    display: block;

    border-radius: 50%;

    background-image:
        url("../images/services-bubble-cluster.webp");

    background-repeat:
        no-repeat;

    filter:
        saturate(0.72)
        brightness(0.82)
        contrast(1.06);

    opacity: 0.24;

    pointer-events: none;
}


/* ==========================================================================
   BUBBLE 1
   Upper middle, above the image composition
   ========================================================================== */

.services-full-detail__bubble--one {
    width: 118px;
    height: 118px;

    top: 6%;
    left: 44%;

    background-size:
        620px
        620px;

    background-position:
        -122px
        -118px;

    transform:
        rotate(-8deg);

    opacity:
        0.22;
}


/* ==========================================================================
   BUBBLE 2
   Small upper-right accent
   ========================================================================== */

.services-full-detail__bubble--two {
    width: 64px;
    height: 64px;

    top: 12%;
    right: 3.5%;

    background-size:
        540px
        540px;

    background-position:
        -32px
        -244px;

    transform:
        rotate(11deg);

    opacity:
        0.25;
}


/* ==========================================================================
   BUBBLE 3
   Low accent beside the interior image
   ========================================================================== */

.services-full-detail__bubble--three {
    width: 78px;
    height: 78px;

    left: 40%;
    bottom: 8%;

    background-size:
        570px
        570px;

    background-position:
        -84px
        -366px;

    transform:
        rotate(-14deg);

    opacity:
        0.23;
}


/* ==========================================================================
   BUBBLE 4
   Large partial bubble entering from bottom-right
   ========================================================================== */

.services-full-detail__bubble--four {
    width: 250px;
    height: 250px;

    right: -125px;
    bottom: -115px;

    background-size:
        760px
        760px;

    background-position:
        -178px
        -158px;

    transform:
        rotate(17deg);

    opacity:
        0.18;
}


/* ==========================================================================
   KEEP REAL CONTENT ABOVE BUBBLES
   ========================================================================== */

.services-full-detail__grid {
    position: relative;
    z-index: 2;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .services-full-detail__bubble--one {
        top: 4%;
        left: 68%;
    }

    .services-full-detail__bubble--two {
        top: 10%;
        right: 5%;
    }

    .services-full-detail__bubble--three {
        left: 8%;
        bottom: 4%;
    }

    .services-full-detail__bubble--four {
        right: -135px;
        bottom: -120px;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .services-full-detail__bubble--one {
        width: 78px;
        height: 78px;

        top: 3%;
        left: 70%;

        opacity:
            0.16;
    }

    .services-full-detail__bubble--two {
        width: 44px;
        height: 44px;

        top: 8%;
        right: 4%;

        opacity:
            0.17;
    }

    .services-full-detail__bubble--three {
        width: 58px;
        height: 58px;

        left: 4%;
        bottom: 18%;

        opacity:
            0.16;
    }

    .services-full-detail__bubble--four {
        width: 170px;
        height: 170px;

        right: -95px;
        bottom: -70px;

        opacity:
            0.13;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - FULL DETAIL REAL BUBBLE FIX

   Uses complete individual transparent bubble PNGs.
   No CSS cropping.
   No fake circles.
   ========================================================================== */


/* ==========================================================================
   KILL PREVIOUS BUBBLE CROPPING
   ========================================================================== */

.services-full-detail__bubble {
    border-radius: 0 !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center !important;

    background-size:
        contain !important;

    filter:
        saturate(0.92)
        brightness(1.08)
        contrast(1.02) !important;

    pointer-events:
        none !important;
}


/* ==========================================================================
   BUBBLE 1
   Medium bubble floating above the visual composition.
   ========================================================================== */

.services-full-detail__bubble--one {
    width: 106px !important;
    height: 104px !important;

    top: 5.5% !important;
    left: 41% !important;

    right: auto !important;
    bottom: auto !important;

    background-image:
        url("../images/services-bubble-medium.webp") !important;

    transform:
        rotate(-7deg) !important;

    opacity:
        0.38 !important;
}


/* ==========================================================================
   BUBBLE 2
   Small bubble near upper-right.
   ========================================================================== */

.services-full-detail__bubble--two {
    width: 55px !important;
    height: 53px !important;

    top: 11% !important;
    right: 3.5% !important;

    left: auto !important;
    bottom: auto !important;

    background-image:
        url("../images/services-bubble-small.webp") !important;

    transform:
        rotate(9deg) !important;

    opacity:
        0.42 !important;
}


/* ==========================================================================
   BUBBLE 3
   Small low bubble between copy and imagery.
   ========================================================================== */

.services-full-detail__bubble--three {
    width: 68px !important;
    height: 66px !important;

    left: 38% !important;
    bottom: 7% !important;

    top: auto !important;
    right: auto !important;

    background-image:
        url("../images/services-bubble-small.webp") !important;

    transform:
        rotate(-12deg) !important;

    opacity:
        0.34 !important;
}


/* ==========================================================================
   BUBBLE 4
   One larger partial bubble entering naturally from lower-right.
   Still a complete bubble image, simply positioned partly off-screen.
   ========================================================================== */

.services-full-detail__bubble--four {
    width: 190px !important;
    height: 186px !important;

    right: -92px !important;
    bottom: -76px !important;

    top: auto !important;
    left: auto !important;

    background-image:
        url("../images/services-bubble-medium.webp") !important;

    transform:
        rotate(13deg) !important;

    opacity:
        0.25 !important;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .services-full-detail__bubble--one {
        width:
            76px !important;

        height:
            74px !important;

        top:
            3% !important;

        left:
            67% !important;

        opacity:
            0.28 !important;
    }

    .services-full-detail__bubble--two {
        width:
            42px !important;

        height:
            40px !important;

        opacity:
            0.30 !important;
    }

    .services-full-detail__bubble--three {
        width:
            50px !important;

        height:
            48px !important;

        left:
            5% !important;

        bottom:
            16% !important;

        opacity:
            0.25 !important;
    }

    .services-full-detail__bubble--four {
        width:
            130px !important;

        height:
            128px !important;

        right:
            -70px !important;

        bottom:
            -48px !important;

        opacity:
            0.18 !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SERVICES INTERIOR RESET
   ========================================================================== */

.services-interior-reset {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
        clamp(7rem, 9vw, 10rem)
        0;

    background:
        linear-gradient(
            118deg,
            #fbfdfe 0%,
            #eef7fc 48%,
            #e2f1f9 100%
        );

    color: var(--ink);
}


/* ==========================================================================
   BACKGROUND
   ========================================================================== */

.services-interior-reset__background {
    position: absolute;
    z-index: 0;

    inset: 0;

    pointer-events: none;
}

.services-interior-reset__background::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.48;

    background:
        repeating-linear-gradient(
            128deg,
            transparent 0 34px,
            rgba(29, 103, 149, 0.035) 34px 35px,
            transparent 35px 70px
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,0.55) 22%,
            rgba(0,0,0,0.22) 54%,
            transparent 82%
        );
}

.services-interior-reset__background::after {
    content: "";

    position: absolute;

    right: -110px;
    bottom: -100px;

    width: 310px;
    height: 305px;

    background:
        url("../images/services-bubble-medium.webp")
        center / contain
        no-repeat;

    opacity: 0.09;

    transform:
        rotate(14deg);

    pointer-events: none;
}


/* ==========================================================================
   GRID
   ========================================================================== */

.services-interior-reset__grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(620px, 1.12fr)
        minmax(420px, 0.88fr);

    align-items: center;

    gap:
        clamp(5rem, 8vw, 9rem);
}


/* ==========================================================================
   VISUAL
   ========================================================================== */

.services-interior-reset__visual {
    position: relative;
}

.services-interior-reset__comparison {
    position: relative;

    min-height: 650px;

    display: grid;

    grid-template-columns:
        0.44fr
        0.56fr;

    overflow: hidden;

    border-radius: 26px;

    background: #d9e7ef;

    box-shadow:
        0 30px 70px rgba(39, 88, 119, 0.20);
}

.services-interior-reset__before,
.services-interior-reset__after {
    position: relative;

    min-width: 0;

    margin: 0;

    overflow: hidden;
}

.services-interior-reset__before img,
.services-interior-reset__after img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* ==========================================================================
   LABELS
   ========================================================================== */

.services-interior-reset__before figcaption,
.services-interior-reset__after figcaption {
    position: absolute;
    z-index: 3;

    bottom: 1.2rem;

    padding:
        0.55rem
        0.78rem;

    background:
        rgba(5, 24, 39, 0.80);

    color: #ffffff;

    font-size: 0.66rem;
    font-weight: 900;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    backdrop-filter: blur(8px);
}

.services-interior-reset__before figcaption {
    left: 1.2rem;
}

.services-interior-reset__after figcaption {
    right: 1.2rem;
}


/* ==========================================================================
   COMPARISON DIVIDER
   ========================================================================== */

.services-interior-reset__divider {
    position: absolute;
    z-index: 4;

    top: 0;
    bottom: 0;
    left: 44%;

    width: 2px;

    background:
        rgba(255,255,255,0.88);

    transform:
        translateX(-50%);

    pointer-events: none;
}

.services-interior-reset__divider span {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 42px;
    height: 42px;

    border:
        4px solid rgba(255,255,255,0.94);

    border-radius: 50%;

    background:
        var(--yellow);

    box-shadow:
        0 9px 24px rgba(7,36,57,0.18);

    transform:
        translate(-50%, -50%);
}

.services-interior-reset__divider span::before,
.services-interior-reset__divider span::after {
    content: "";

    position: absolute;

    top: 50%;

    width: 8px;
    height: 8px;

    border-top:
        2px solid var(--navy);

    border-right:
        2px solid var(--navy);
}

.services-interior-reset__divider span::before {
    left: 8px;

    transform:
        translateY(-50%)
        rotate(-135deg);
}

.services-interior-reset__divider span::after {
    right: 8px;

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* ==========================================================================
   RESULT NOTE
   ========================================================================== */

.services-interior-reset__result-note {
    position: absolute;
    z-index: 5;

    right: -1.25rem;
    bottom: 2.2rem;

    min-width: 220px;

    padding:
        0.9rem
        1.1rem;

    background:
        var(--yellow);

    color:
        var(--navy);

    box-shadow:
        0 16px 32px rgba(37, 83, 111, 0.18);
}

.services-interior-reset__result-note span {
    display: block;

    color:
        rgba(7,24,39,0.60);

    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.services-interior-reset__result-note strong {
    display: block;

    margin-top: 0.2rem;

    font-size: 0.96rem;
    font-weight: 950;
}


/* ==========================================================================
   CONTENT
   ========================================================================== */

.services-interior-reset__content {
    position: relative;

    max-width: 590px;
}

.services-interior-reset__number {
    position: absolute;

    top: -2.6rem;
    right: 0;

    color: transparent;

    font-size:
        clamp(5rem, 7vw, 7.4rem);

    font-weight: 950;
    line-height: 1;

    -webkit-text-stroke:
        1px rgba(20, 94, 143, 0.20);

    user-select: none;
}

.services-interior-reset__content h2 {
    position: relative;

    margin-top: 1.2rem;

    color:
        var(--navy);

    font-size:
        clamp(3.7rem, 4.8vw, 5.5rem);

    line-height: 0.93;

    letter-spacing: -0.06em;
}

.services-interior-reset__content h2 span {
    display: block;

    margin-top: 0.12em;

    color:
        var(--blue);
}

.services-interior-reset__lead {
    max-width: 550px;

    margin-top: 1.7rem;

    color:
        #40596b;

    font-size:
        clamp(1rem, 1.08vw, 1.1rem);

    font-weight: 500;

    line-height: 1.68;
}


/* ==========================================================================
   INCLUDED
   ========================================================================== */

.services-interior-reset__included {
    margin-top: 2.2rem;

    padding-top: 1.5rem;

    border-top:
        1px solid rgba(7, 36, 57, 0.16);
}

.services-interior-reset__included-label {
    color:
        var(--blue);

    font-size: 0.7rem;
    font-weight: 900;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}

.services-interior-reset__included ul {
    margin:
        1.2rem
        0
        0;

    padding: 0;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        0.9rem
        1.8rem;

    list-style: none;
}

.services-interior-reset__included li {
    position: relative;

    padding-left: 1.65rem;

    color:
        var(--ink);

    font-size: 0.92rem;
    font-weight: 780;

    line-height: 1.45;
}

.services-interior-reset__included li::before {
    content: "✓";

    position: absolute;

    top: 0;
    left: 0;

    width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        var(--yellow);

    color:
        var(--navy);

    font-size: 0.64rem;
    font-weight: 950;
}


/* ==========================================================================
   ASIDE
   ========================================================================== */

.services-interior-reset__aside {
    margin-top: 2rem;

    padding-left: 1rem;

    border-left:
        3px solid var(--yellow);

    color:
        #4e6879;

    font-size: 0.9rem;
    font-weight: 700;

    line-height: 1.58;
}


/* ==========================================================================
   BOTTOM
   ========================================================================== */

.services-interior-reset__bottom {
    margin-top: 2rem;

    padding-top: 1.5rem;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid rgba(7, 36, 57, 0.16);
}

.services-interior-reset__bottom > div {
    max-width: 340px;
}

.services-interior-reset__bottom span {
    display: block;

    color:
        #5c7688;

    font-size: 0.7rem;
    font-weight: 900;

    letter-spacing: 0.075em;

    text-transform: uppercase;
}

.services-interior-reset__bottom strong {
    display: block;

    margin-top: 0.32rem;

    color:
        var(--navy);

    font-size: 0.9rem;
    font-weight: 780;

    line-height: 1.5;
}

.services-interior-reset__link {
    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    color:
        var(--navy);

    font-size: 0.80rem;
    font-weight: 900;

    letter-spacing: 0.035em;

    text-decoration: none;
    text-transform: uppercase;
}

.services-interior-reset__link > span {
    color:
        var(--blue);

    font-size: 1.25rem;

    transition:
        transform 180ms ease;
}

.services-interior-reset__link:hover > span {
    transform:
        translateX(4px);
}


/* ==========================================================================
   REAL BUBBLE ACCENT
   ========================================================================== */

.services-interior-reset__content::before {
    content: "";

    position: absolute;

    width: 68px;
    height: 68px;

    top: -4.2rem;
    left: -3rem;

    background:
        url("../images/services-bubble-small.webp")
        center / contain
        no-repeat;

    opacity: 0.20;

    transform:
        rotate(-9deg);

    pointer-events: none;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .services-interior-reset__grid {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }

    .services-interior-reset__visual {
        max-width: 900px;
    }

    .services-interior-reset__content {
        max-width: 720px;
    }
}


/* ==========================================================================
   MOBILE FOUNDATION
   ========================================================================== */

@media (max-width: 700px) {

    .services-interior-reset {
        padding:
            5rem
            0;
    }

    .services-interior-reset__comparison {
        min-height: 540px;

        grid-template-columns: 1fr;

        border-radius: 18px;
    }

    .services-interior-reset__before,
    .services-interior-reset__after {
        min-height: 270px;
    }

    .services-interior-reset__divider {
        top: 50%;
        right: 0;
        bottom: auto;
        left: 0;

        width: 100%;
        height: 2px;

        transform:
            translateY(-50%);
    }

    .services-interior-reset__result-note {
        right: 0;
        bottom: -1.3rem;

        min-width: 190px;
    }

    .services-interior-reset__content {
        padding-top: 1.5rem;
    }

    .services-interior-reset__content h2 {
        font-size:
            clamp(3.1rem, 13vw, 4.4rem);
    }

    .services-interior-reset__included ul {
        grid-template-columns: 1fr;
    }

    .services-interior-reset__bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .services-interior-reset__content::before {
        width: 52px;
        height: 52px;

        top: -2rem;
        left: auto;
        right: 0;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - INTERIOR RESET LOCKED VISUAL V2
   ========================================================================== */

.services-interior-v2 {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height:
        clamp(790px, 57vw, 960px);

    padding:
        clamp(7rem, 8vw, 9rem)
        0;

    background:
        radial-gradient(
            ellipse at 82% 38%,
            rgba(45, 139, 197, 0.16),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #051522 0%,
            #071d2e 50%,
            #092a43 100%
        );

    color: #ffffff;
}


/* ==========================================================================
   BACKGROUND LIGHT
   ========================================================================== */

.services-interior-v2::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: 28%;
    bottom: -42%;

    width: 34%;
    height: 110%;

    background:
        linear-gradient(
            102deg,
            transparent 20%,
            rgba(79, 173, 223, 0.035) 44%,
            rgba(255,255,255,0.055) 50%,
            rgba(78, 172, 221, 0.025) 57%,
            transparent 74%
        );

    transform:
        rotate(-8deg);

    pointer-events: none;
}


/* ==========================================================================
   GRID
   ========================================================================== */

.services-interior-v2__grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(430px, 0.78fr)
        minmax(650px, 1.22fr);

    align-items: center;

    gap:
        clamp(5rem, 8vw, 9rem);
}


/* ==========================================================================
   COPY
   ========================================================================== */

.services-interior-v2__content {
    position: relative;

    max-width: 610px;
}

.services-interior-v2 .section-label {
    color:
        rgba(255,255,255,0.76);
}

.services-interior-v2 .section-label::before {
    background:
        var(--yellow);
}

.services-interior-v2__number {
    position: absolute;

    top: -3.4rem;
    right: 0;

    color: transparent;

    font-size:
        clamp(5.4rem, 7vw, 7.8rem);

    font-weight: 950;
    line-height: 1;

    -webkit-text-stroke:
        1px rgba(106, 195, 238, 0.25);

    user-select: none;
}

.services-interior-v2__content h2 {
    position: relative;

    margin-top: 1.3rem;

    color: #ffffff;

    font-size:
        clamp(4rem, 5.4vw, 6rem);

    line-height: 0.91;

    letter-spacing:
        -0.06em;
}

.services-interior-v2__content h2 span {
    color:
        #7fc5ee;
}

.services-interior-v2__lead {
    max-width: 570px;

    margin-top: 2rem;

    color:
        rgba(255,255,255,0.82);

    font-size:
        clamp(1rem, 1.1vw, 1.12rem);

    font-weight: 500;

    line-height: 1.68;
}


/* ==========================================================================
   INCLUDED
   ========================================================================== */

.services-interior-v2__included {
    margin-top: 2.2rem;

    padding-top: 1.6rem;

    border-top:
        1px solid rgba(255,255,255,0.17);
}

.services-interior-v2__included-label {
    color:
        var(--yellow);

    font-size: 0.72rem;
    font-weight: 900;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}

.services-interior-v2__included ul {
    margin:
        1.25rem
        0
        0;

    padding: 0;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        0.9rem
        1.8rem;

    list-style: none;
}

.services-interior-v2__included li {
    position: relative;

    padding-left: 1.65rem;

    color:
        rgba(255,255,255,0.91);

    font-size: 0.92rem;
    font-weight: 760;

    line-height: 1.5;
}

.services-interior-v2__included li::before {
    content: "✓";

    position: absolute;

    top: 0.04rem;
    left: 0;

    width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        var(--yellow);

    color:
        #071827;

    font-size: 0.63rem;
    font-weight: 950;
}


/* ==========================================================================
   BOTTOM
   ========================================================================== */

.services-interior-v2__bottom {
    margin-top: 2.3rem;

    padding-top: 1.5rem;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 2.2rem;

    border-top:
        1px solid rgba(255,255,255,0.17);
}

.services-interior-v2__bottom > div {
    max-width: 330px;
}

.services-interior-v2__bottom > div > span {
    display: block;

    color:
        rgba(255,255,255,0.62);

    font-size: 0.7rem;
    font-weight: 900;

    letter-spacing: 0.075em;

    text-transform: uppercase;
}

.services-interior-v2__bottom strong {
    display: block;

    margin-top: 0.35rem;

    color:
        rgba(255,255,255,0.93);

    font-size: 0.9rem;
    font-weight: 760;

    line-height: 1.5;
}

.services-interior-v2__link {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;

    gap: 0.65rem;

    color: #ffffff;

    font-size: 0.82rem;
    font-weight: 900;

    letter-spacing: 0.035em;

    text-decoration: none;
    text-transform: uppercase;
}

.services-interior-v2__link > span {
    color:
        var(--yellow);

    font-size: 1.28rem;

    transition:
        transform 180ms ease;
}

.services-interior-v2__link:hover > span {
    transform:
        translateX(4px);
}


/* ==========================================================================
   VISUAL
   ========================================================================== */

.services-interior-v2__visual {
    position: relative;

    min-height: 650px;
}

.services-interior-v2__main-photo {
    position: absolute;

    inset:
        0
        0
        70px
        70px;

    margin: 0;

    overflow: hidden;

    border-radius: 26px;

    box-shadow:
        0 28px 70px rgba(0,0,0,0.33);
}

.services-interior-v2__main-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}

.services-interior-v2__main-photo::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(4,17,28,0.18),
            transparent 42%
        );

    pointer-events: none;
}


/* ==========================================================================
   MAIN LABEL
   ========================================================================== */

.services-interior-v2__main-photo figcaption {
    position: absolute;
    z-index: 3;

    right: 1rem;
    bottom: 1rem;

    padding:
        0.5rem
        0.72rem;

    background:
        rgba(5,21,34,0.80);

    color: #ffffff;

    font-size: 0.64rem;
    font-weight: 900;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    backdrop-filter:
        blur(8px);
}


/* ==========================================================================
   FLOORS + MATS INSET
   ========================================================================== */

.services-interior-v2__inset {
    position: absolute;
    z-index: 4;

    left: 0;
    bottom: 0;

    width:
        min(42%, 350px);

    aspect-ratio:
        1.22 / 1;

    margin: 0;

    overflow: hidden;

    border:
        7px solid #071827;

    border-radius: 20px;

    box-shadow:
        0 24px 55px rgba(0,0,0,0.38);

    background:
        #071827;
}

.services-interior-v2__inset img {
    width: 175%;
    height: 175%;

    display: block;

    object-fit: cover;

    object-position:
        76% 78%;

    transform:
        translate(-31%, -29%);
}

.services-interior-v2__inset figcaption {
    position: absolute;
    z-index: 4;

    left: 1rem;
    bottom: 1rem;

    padding:
        0.5rem
        0.72rem;

    background:
        rgba(5,21,34,0.82);

    color: #ffffff;

    font-size: 0.64rem;
    font-weight: 900;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    backdrop-filter:
        blur(8px);
}


/* ==========================================================================
   YELLOW STATUS
   ========================================================================== */

.services-interior-v2__status {
    position: absolute;
    z-index: 5;

    top: 2rem;
    right: -1rem;

    min-width: 175px;

    padding:
        0.85rem
        1rem;

    background:
        var(--yellow);

    color:
        #071827;

    box-shadow:
        0 16px 34px rgba(0,0,0,0.18);
}

.services-interior-v2__status span {
    display: block;

    color:
        rgba(7,24,39,0.64);

    font-size: 0.61rem;
    font-weight: 900;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.services-interior-v2__status strong {
    display: block;

    margin-top: 0.2rem;

    font-size: 1rem;
    font-weight: 950;
}


/* ==========================================================================
   REAL SOAP BUBBLES
   ========================================================================== */

.services-interior-v2__atmosphere {
    position: absolute;
    z-index: 1;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.services-interior-v2__bubble {
    position: absolute;

    display: block;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    pointer-events: none;
}


/* top center */

.services-interior-v2__bubble--one {
    width: 96px;
    height: 96px;

    top: 5.5%;
    left: 44%;

    background-image:
        url("../images/services-bubble-medium.webp");

    opacity: 0.42;

    transform:
        rotate(-8deg);
}


/* top right */

.services-interior-v2__bubble--two {
    width: 54px;
    height: 54px;

    top: 11%;
    right: 3%;

    background-image:
        url("../images/services-bubble-small.webp");

    opacity: 0.44;

    transform:
        rotate(10deg);
}


/* bottom left */

.services-interior-v2__bubble--three {
    width: 62px;
    height: 62px;

    left: 1.5%;
    bottom: 7%;

    background-image:
        url("../images/services-bubble-small.webp");

    opacity: 0.36;

    transform:
        rotate(-12deg);
}


/* oversized partial bottom right */

.services-interior-v2__bubble--four {
    width: 225px;
    height: 225px;

    right: -112px;
    bottom: -94px;

    background-image:
        url("../images/services-bubble-medium.webp");

    opacity: 0.24;

    transform:
        rotate(15deg);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .services-interior-v2__grid {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }

    .services-interior-v2__content {
        max-width: 720px;
    }

    .services-interior-v2__visual {
        min-height: 640px;
    }
}


/* ==========================================================================
   MOBILE FOUNDATION
   ========================================================================== */

@media (max-width: 700px) {

    .services-interior-v2 {
        min-height: 0;

        padding:
            5rem
            0;
    }

    .services-interior-v2__content h2 {
        font-size:
            clamp(3.2rem, 13vw, 4.5rem);
    }

    .services-interior-v2__number {
        top: -1.4rem;

        font-size: 5rem;
    }

    .services-interior-v2__included ul {
        grid-template-columns: 1fr;
    }

    .services-interior-v2__bottom {
        align-items: flex-start;

        flex-direction: column;
    }

    .services-interior-v2__visual {
        min-height: 500px;
    }

    .services-interior-v2__main-photo {
        inset:
            0
            0
            55px
            30px;

        border-radius: 18px;
    }

    .services-interior-v2__inset {
        width: 48%;

        border-width: 5px;

        border-radius: 14px;
    }

    .services-interior-v2__status {
        top: 1rem;
        right: 0;

        min-width: 150px;
    }

    .services-interior-v2__bubble--one {
        width: 70px;
        height: 70px;

        top: 2%;
        left: 68%;
    }

    .services-interior-v2__bubble--two {
        width: 40px;
        height: 40px;
    }

    .services-interior-v2__bubble--three {
        width: 48px;
        height: 48px;
    }

    .services-interior-v2__bubble--four {
        width: 145px;
        height: 145px;

        right: -75px;
        bottom: -55px;

        opacity: 0.16;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - INTERIOR RESET VISUAL AUDIT 01
   ========================================================================== */


/* ==========================================================================
   FLOORS + MATS INSET

   Remove the broken oversized crop that exposed empty background.
   Focus the existing interior photo on the lower passenger footwell.
   ========================================================================== */

.services-interior-v2__inset img {
    width:
        100% !important;

    height:
        100% !important;

    object-fit:
        cover !important;

    object-position:
        86% 88% !important;

    transform:
        scale(1.32) !important;

    transform-origin:
        86% 90% !important;
}


/* ==========================================================================
   KEEP THE INSET COMPLETELY FILLED
   ========================================================================== */

.services-interior-v2__inset {
    background:
        #071827 !important;
}


/* ==========================================================================
   SLIGHTLY STRENGTHEN CHECKLIST RHYTHM
   ========================================================================== */

.services-interior-v2__included ul {
    grid-auto-flow:
        row;
}

.services-interior-v2__included li {
    min-height:
        1.5rem;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .services-interior-v2__inset img {
        object-position:
            86% 88% !important;

        transform:
            scale(1.26) !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PAINT CORRECTION LAB V2
   ========================================================================== */

.paint-lab {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
        clamp(7rem, 9vw, 10rem)
        0;

    background:
        linear-gradient(
            118deg,
            #fbfdfe 0%,
            #f0f7fb 46%,
            #e5f1f7 100%
        );

    color:
        var(--ink);
}


/* ==========================================================================
   POLISHED-SURFACE BACKGROUND
   ========================================================================== */

.paint-lab::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: -38%;
    left: 18%;

    width: 24%;
    height: 180%;

    background:
        linear-gradient(
            103deg,
            transparent 0%,
            rgba(255,255,255,0.12) 38%,
            rgba(255,255,255,0.82) 48%,
            rgba(83,170,215,0.08) 54%,
            transparent 68%
        );

    filter:
        blur(4px);

    transform:
        rotate(8deg);

    pointer-events: none;
}

.paint-lab::after {
    content: "PAINT";

    position: absolute;
    z-index: 0;

    right:
        max(
            18px,
            calc((100vw - 1480px) / 2)
        );

    bottom: -0.08em;

    color:
        rgba(12, 73, 111, 0.025);

    font-size:
        clamp(8rem, 15vw, 15rem);

    font-weight: 950;
    line-height: 0.74;

    letter-spacing:
        -0.07em;

    pointer-events: none;
    user-select: none;
}

.paint-lab__gloss {
    position: absolute;
    z-index: 0;

    inset: 0;

    pointer-events: none;
}

.paint-lab__gloss::before {
    content: "";

    position: absolute;

    right: 8%;
    top: 11%;

    width: 260px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(26, 111, 162, 0.24),
            transparent
        );

    box-shadow:
        0 92px 0 rgba(26,111,162,0.08),
        0 184px 0 rgba(26,111,162,0.05);
}


/* ==========================================================================
   INNER
   ========================================================================== */

.paint-lab__inner {
    position: relative;
    z-index: 2;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.paint-lab__header {
    display: grid;

    grid-template-columns:
        minmax(440px, 0.88fr)
        minmax(430px, 0.72fr);

    justify-content: space-between;

    gap:
        clamp(5rem, 10vw, 11rem);

    align-items: end;

    margin-bottom:
        clamp(3rem, 5vw, 5rem);
}

.paint-lab__title {
    position: relative;

    max-width: 700px;
}

.paint-lab__number {
    position: absolute;

    top: -3.5rem;
    right: 4%;

    color: transparent;

    font-size:
        clamp(5rem, 7vw, 7.7rem);

    font-weight: 950;
    line-height: 1;

    -webkit-text-stroke:
        1px rgba(16, 88, 134, 0.19);

    user-select: none;
}

.paint-lab__title h2 {
    margin-top: 1.2rem;

    color:
        var(--navy);

    font-size:
        clamp(4.3rem, 5.8vw, 6.5rem);

    line-height: 0.9;

    letter-spacing:
        -0.065em;
}

.paint-lab__title h2 span {
    display: block;

    margin-top: 0.12em;

    color:
        var(--blue);
}

.paint-lab__intro {
    max-width: 560px;
}

.paint-lab__intro > p:first-child {
    color:
        #3f5869;

    font-size:
        clamp(1rem, 1.1vw, 1.12rem);

    font-weight: 500;

    line-height: 1.72;
}

.paint-lab__aside {
    margin-top: 1.7rem;

    padding-left: 1rem;

    border-left:
        3px solid var(--yellow);

    color:
        #4d6879;

    font-size: 0.9rem;
    font-weight: 720;

    line-height: 1.58;
}


/* ==========================================================================
   INSPECTION STRIP
   ========================================================================== */

.paint-lab__inspection {
    position: relative;

    margin:
        0
        calc(50% - 50vw);

    width: 100vw;

    min-height:
        clamp(390px, 32vw, 560px);

    overflow: hidden;

    background:
        #071827;
}

.paint-lab__photo {
    position: absolute;

    inset: 0;

    margin: 0;
}

.paint-lab__photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    filter:
        contrast(1.04)
        saturate(0.94);
}

.paint-lab__photo::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 22, 35, 0.56) 0%,
            rgba(5, 22, 35, 0.12) 32%,
            rgba(5, 22, 35, 0.04) 70%,
            rgba(5, 22, 35, 0.30) 100%
        );

    pointer-events: none;
}

.paint-lab__photo figcaption {
    position: absolute;
    z-index: 3;

    left:
        max(
            24px,
            calc((100vw - 1480px) / 2 + 24px)
        );

    bottom: 1.5rem;

    padding:
        0.55rem
        0.78rem;

    background:
        rgba(5,24,39,0.78);

    color: #ffffff;

    font-size: 0.66rem;
    font-weight: 900;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    backdrop-filter:
        blur(8px);
}


/* ==========================================================================
   INSPECTION READOUT
   ========================================================================== */

.paint-lab__readout {
    position: absolute;
    z-index: 4;

    top: 2rem;

    right:
        max(
            24px,
            calc((100vw - 1480px) / 2 + 24px)
        );

    max-width: 410px;

    padding:
        1rem
        1.2rem;

    border-top:
        3px solid var(--yellow);

    background:
        rgba(5, 24, 39, 0.78);

    backdrop-filter:
        blur(12px);
}

.paint-lab__readout span {
    display: block;

    color:
        rgba(255,255,255,0.62);

    font-size: 0.63rem;
    font-weight: 900;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}

.paint-lab__readout strong {
    display: block;

    margin-top: 0.38rem;

    color: #ffffff;

    font-size:
        clamp(0.9rem, 1vw, 1.02rem);

    font-weight: 850;

    line-height: 1.45;
}


/* ==========================================================================
   PROCESS
   ========================================================================== */

.paint-lab__process {
    padding-top:
        clamp(4rem, 6vw, 6rem);
}

.paint-lab__process-head {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 2rem;

    padding-bottom: 1.2rem;

    border-bottom:
        2px solid rgba(7, 36, 57, 0.16);
}

.paint-lab__process-head p {
    color:
        var(--navy);

    font-size:
        clamp(1.55rem, 2vw, 2rem);

    font-weight: 950;

    letter-spacing:
        -0.03em;
}

.paint-lab__process-head span {
    color:
        #60798a;

    font-size: 0.72rem;
    font-weight: 900;

    letter-spacing: 0.065em;

    text-transform: uppercase;
}

.paint-lab__steps {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-bottom:
        2px solid rgba(7, 36, 57, 0.16);
}

.paint-lab__step {
    position: relative;

    min-height: 240px;

    padding:
        1.8rem
        2rem
        2rem
        0;
}

.paint-lab__step + .paint-lab__step {
    padding-left: 2rem;

    border-left:
        1px solid rgba(7, 36, 57, 0.14);
}

.paint-lab__step-number {
    color:
        var(--blue);

    font-size: 0.72rem;
    font-weight: 950;

    letter-spacing: 0.06em;
}

.paint-lab__step h3 {
    margin-top: 1.1rem;

    color:
        var(--navy);

    font-size:
        clamp(1.7rem, 2vw, 2.15rem);

    font-weight: 950;

    letter-spacing:
        -0.035em;
}

.paint-lab__step p {
    margin-top: 0.7rem;

    color:
        #4d6677;

    font-size: 0.94rem;
    font-weight: 520;

    line-height: 1.58;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.paint-lab__footer {
    margin-top:
        2.3rem;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 3rem;
}

.paint-lab__footer > div {
    max-width: 560px;
}

.paint-lab__footer > div > span {
    display: block;

    color:
        #60798a;

    font-size: 0.7rem;
    font-weight: 900;

    letter-spacing: 0.075em;

    text-transform: uppercase;
}

.paint-lab__footer strong {
    display: block;

    margin-top: 0.35rem;

    color:
        var(--navy);

    font-size: 0.94rem;
    font-weight: 780;

    line-height: 1.5;
}

.paint-lab__link {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;

    gap: 0.65rem;

    color:
        var(--navy);

    font-size: 0.82rem;
    font-weight: 900;

    letter-spacing: 0.035em;

    text-decoration: none;
    text-transform: uppercase;
}

.paint-lab__link > span {
    color:
        var(--blue);

    font-size: 1.28rem;

    transition:
        transform 180ms ease;
}

.paint-lab__link:hover > span {
    transform:
        translateX(4px);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .paint-lab__header {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .paint-lab__intro {
        max-width: 720px;
    }

    .paint-lab__steps {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .paint-lab__step {
        border-bottom:
            1px solid rgba(7,36,57,0.14);
    }

    .paint-lab__step:nth-child(3) {
        padding-left: 0;

        border-left: 0;
    }
}


/* ==========================================================================
   MOBILE FOUNDATION
   ========================================================================== */

@media (max-width: 700px) {

    .paint-lab {
        padding:
            5rem
            0;
    }

    .paint-lab__title h2 {
        font-size:
            clamp(3.3rem, 14vw, 4.8rem);
    }

    .paint-lab__inspection {
        min-height: 420px;
    }

    .paint-lab__readout {
        top: 1rem;
        right: 1rem;
        left: 1rem;

        max-width: none;
    }

    .paint-lab__process-head {
        align-items: flex-start;
        flex-direction: column;

        gap: 0.5rem;
    }

    .paint-lab__steps {
        grid-template-columns: 1fr;
    }

    .paint-lab__step,
    .paint-lab__step + .paint-lab__step,
    .paint-lab__step:nth-child(3) {
        min-height: 0;

        padding:
            1.5rem
            0;

        border-left: 0;

        border-bottom:
            1px solid rgba(7,36,57,0.14);
    }

    .paint-lab__footer {
        align-items: flex-start;
        flex-direction: column;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - INTERIOR RESET EDITORIAL V3

   Deliberately different architecture from Full Detail.
   ========================================================================== */

.interior-editorial {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
        clamp(7rem, 9vw, 9.5rem)
        0
        clamp(5.5rem, 7vw, 7rem);

    background:
        linear-gradient(
            118deg,
            #fbfdfe 0%,
            #eff7fb 48%,
            #e5f2f8 100%
        );

    color:
        var(--ink);
}


/* ==========================================================================
   SUBTLE CABIN / UPHOLSTERY TEXTURE
   ========================================================================== */

.interior-editorial__texture {
    position: absolute;
    z-index: 0;

    inset: 0;

    pointer-events: none;
}

.interior-editorial__texture::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: 0.45;

    background:
        repeating-linear-gradient(
            132deg,
            transparent 0 42px,
            rgba(26, 108, 159, 0.035) 42px 43px,
            transparent 43px 84px
        );

    mask-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.40),
            rgba(0,0,0,0.12) 45%,
            transparent 82%
        );
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.interior-editorial__header {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(460px, 0.95fr)
        minmax(420px, 0.65fr);

    align-items: end;

    justify-content: space-between;

    gap:
        clamp(5rem, 10vw, 11rem);

    margin-bottom:
        clamp(3.5rem, 5vw, 5rem);
}

.interior-editorial__title {
    position: relative;

    max-width: 760px;
}

.interior-editorial__number {
    position: absolute;

    top: -3.5rem;
    right: 5%;

    color: transparent;

    font-size:
        clamp(5rem, 7vw, 7.5rem);

    font-weight: 950;
    line-height: 1;

    -webkit-text-stroke:
        1px rgba(17, 91, 137, 0.20);

    user-select: none;
}

.interior-editorial__title h2 {
    margin-top: 1.2rem;

    color:
        var(--navy);

    font-size:
        clamp(4.2rem, 5.8vw, 6.5rem);

    line-height: 0.90;

    letter-spacing:
        -0.065em;
}

.interior-editorial__title h2 span {
    display: block;

    margin-top: 0.12em;

    color:
        var(--blue);
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.interior-editorial__intro {
    max-width: 540px;

    padding-bottom: 0.3rem;
}

.interior-editorial__intro p {
    color:
        #40596a;

    font-size:
        clamp(1rem, 1.1vw, 1.12rem);

    font-weight: 500;

    line-height: 1.72;
}

.interior-editorial__intro strong {
    display: block;

    margin-top: 1.6rem;

    padding-top: 1.2rem;

    border-top:
        1px solid rgba(7,36,57,0.15);

    color:
        var(--navy);

    font-size: 0.9rem;
    font-weight: 850;

    line-height: 1.5;
}


/* ==========================================================================
   FULL-WIDTH PANORAMIC PHOTO
   ========================================================================== */

.interior-editorial__photo-band {
    position: relative;
    z-index: 2;

    width: 100%;

    height:
        clamp(430px, 37vw, 610px);

    overflow: hidden;

    background:
        #dce8ee;
}

.interior-editorial__photo-band img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        center 56%;
}

.interior-editorial__photo-band::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(5,24,39,0.42) 0%,
            rgba(5,24,39,0.08) 26%,
            transparent 50%
        );

    pointer-events: none;
}


/* ==========================================================================
   PHOTO LABEL
   ========================================================================== */

.interior-editorial__photo-label {
    position: absolute;
    z-index: 4;

    left:
        max(
            28px,
            calc((100vw - 1480px) / 2 + 28px)
        );

    bottom: 2rem;

    display: flex;
    align-items: center;

    gap: 1.1rem;

    padding:
        0.9rem
        1.1rem;

    background:
        rgba(5,24,39,0.82);

    backdrop-filter:
        blur(10px);
}

.interior-editorial__photo-label span {
    color:
        var(--yellow);

    font-size: 0.64rem;
    font-weight: 900;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}

.interior-editorial__photo-label strong {
    color:
        #ffffff;

    font-size: 0.92rem;
    font-weight: 850;
}


/* ==========================================================================
   THREE INTERIOR ZONES
   ========================================================================== */

.interior-editorial__zones {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-bottom:
        2px solid rgba(7,36,57,0.16);
}

.interior-editorial__zone {
    min-height: 260px;

    padding:
        2.4rem
        2.7rem
        2.7rem
        0;
}

.interior-editorial__zone + .interior-editorial__zone {
    padding-left:
        2.7rem;

    border-left:
        1px solid rgba(7,36,57,0.14);
}

.interior-editorial__zone > span {
    color:
        var(--blue);

    font-size: 0.72rem;
    font-weight: 950;

    letter-spacing: 0.06em;
}

.interior-editorial__zone h3 {
    margin-top: 1rem;

    color:
        var(--navy);

    font-size:
        clamp(1.8rem, 2.2vw, 2.4rem);

    font-weight: 950;

    line-height: 1.05;

    letter-spacing:
        -0.035em;
}

.interior-editorial__zone p {
    margin-top: 0.8rem;

    max-width: 380px;

    color:
        #4d6677;

    font-size: 0.96rem;
    font-weight: 520;

    line-height: 1.62;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.interior-editorial__footer {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(300px, 0.7fr)
        minmax(520px, 1.3fr);

    align-items: center;

    gap:
        clamp(4rem, 8vw, 8rem);

    padding-top:
        2.2rem;
}

.interior-editorial__footer > p {
    max-width: 410px;

    padding-left: 1rem;

    border-left:
        3px solid var(--yellow);

    color:
        #496477;

    font-size: 0.9rem;
    font-weight: 720;

    line-height: 1.58;
}

.interior-editorial__footer-action {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 2rem;
}

.interior-editorial__footer-action > span {
    max-width: 430px;

    color:
        #5a7485;

    font-size: 0.76rem;
    font-weight: 850;

    line-height: 1.5;
}

.interior-editorial__footer-action a {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;

    gap: 0.65rem;

    color:
        var(--navy);

    font-size: 0.82rem;
    font-weight: 900;

    letter-spacing: 0.035em;

    text-decoration: none;
    text-transform: uppercase;
}

.interior-editorial__footer-action a strong {
    color:
        var(--blue);

    font-size: 1.3rem;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .interior-editorial__header {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .interior-editorial__intro {
        max-width: 720px;
    }

    .interior-editorial__zones {
        grid-template-columns: 1fr;
    }

    .interior-editorial__zone,
    .interior-editorial__zone + .interior-editorial__zone {
        min-height: 0;

        padding:
            2rem
            0;

        border-left: 0;

        border-bottom:
            1px solid rgba(7,36,57,0.14);
    }

    .interior-editorial__footer {
        grid-template-columns: 1fr;

        gap: 2rem;
    }
}


/* ==========================================================================
   MOBILE FOUNDATION
   ========================================================================== */

@media (max-width: 700px) {

    .interior-editorial {
        padding:
            5rem
            0;
    }

    .interior-editorial__title h2 {
        font-size:
            clamp(3.3rem, 14vw, 4.7rem);
    }

    .interior-editorial__photo-band {
        height: 420px;
    }

    .interior-editorial__photo-label {
        right: 1rem;
        left: 1rem;
        bottom: 1rem;

        align-items: flex-start;
        flex-direction: column;

        gap: 0.35rem;
    }

    .interior-editorial__footer-action {
        align-items: flex-start;
        flex-direction: column;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - INTERIOR EDITORIAL FOOTER READABILITY
   ========================================================================== */

.interior-editorial__footer-action > span {
    color:
        #486477 !important;

    font-size:
        0.86rem !important;

    font-weight:
        800 !important;

    line-height:
        1.55 !important;
}

.interior-editorial__footer-action a {
    font-size:
        0.88rem !important;

    font-weight:
        900 !important;

    letter-spacing:
        0.025em !important;
}

.interior-editorial__footer-action a strong {
    font-size:
        1.35rem !important;
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - INTERIOR EDITORIAL WATER ACCENTS

   Real soap bubbles + restrained water splash.
   No generic circles.
   ========================================================================== */


/* ==========================================================================
   WATER LAYER
   ========================================================================== */

.interior-editorial__texture {
    z-index: 1;
    overflow: hidden;
}


/* ==========================================================================
   REAL BUBBLES
   ========================================================================== */

.interior-editorial__bubble {
    position: absolute;

    display: block;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    pointer-events: none;
}


/* Small bubble near upper-left atmosphere */

.interior-editorial__bubble--one {
    width: 66px;
    height: 66px;

    top: 5.5%;
    left: 3.5%;

    background-image:
        url("../images/services-bubble-small.webp");

    opacity: 0.26;

    transform:
        rotate(-10deg);
}


/* Medium bubble floating in open upper-right space */

.interior-editorial__bubble--two {
    width: 92px;
    height: 92px;

    top: 8%;
    right: 5%;

    background-image:
        url("../images/services-bubble-medium.webp");

    opacity: 0.22;

    transform:
        rotate(8deg);
}


/* Partial bubble entering from lower-left */

.interior-editorial__bubble--three {
    width: 150px;
    height: 150px;

    left: -72px;
    bottom: 5%;

    background-image:
        url("../images/services-bubble-medium.webp");

    opacity: 0.16;

    transform:
        rotate(-16deg);
}


/* ==========================================================================
   REAL WATER SPLASH

   Sits behind lower-right content.
   Low opacity so it reads as atmosphere, not clip art.
   ========================================================================== */

.interior-editorial__texture::after {
    content: "";

    position: absolute;

    right: -110px;
    bottom: -85px;

    width: 560px;
    height: 390px;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat;

    opacity: 0.055;

    filter:
        saturate(0.68)
        brightness(1.08);

    transform:
        rotate(16deg);

    pointer-events: none;
}


/* ==========================================================================
   KEEP CONTENT ABOVE WATER ART
   ========================================================================== */

.interior-editorial__header,
.interior-editorial__photo-band,
.interior-editorial__zones,
.interior-editorial__footer {
    position: relative;
    z-index: 2;
}


/* ==========================================================================
   FOOTER READABILITY
   ========================================================================== */

.interior-editorial__footer-action > span {
    color:
        #486477 !important;

    font-size:
        0.86rem !important;

    font-weight:
        800 !important;

    line-height:
        1.55 !important;
}

.interior-editorial__footer-action a {
    font-size:
        0.88rem !important;

    font-weight:
        900 !important;

    letter-spacing:
        0.025em !important;
}

.interior-editorial__footer-action a strong {
    font-size:
        1.35rem !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .interior-editorial__bubble--one {
        top: 4%;
        left: 2%;
    }

    .interior-editorial__bubble--two {
        width: 76px;
        height: 76px;

        right: 3%;
    }

    .interior-editorial__texture::after {
        width: 470px;
        height: 330px;

        right: -130px;

        opacity: 0.045;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .interior-editorial__bubble--one {
        width: 48px;
        height: 48px;

        top: 2%;
        left: 3%;

        opacity: 0.20;
    }

    .interior-editorial__bubble--two {
        width: 58px;
        height: 58px;

        top: 6%;
        right: 2%;

        opacity: 0.18;
    }

    .interior-editorial__bubble--three {
        width: 105px;
        height: 105px;

        left: -55px;
        bottom: 3%;

        opacity: 0.12;
    }

    .interior-editorial__texture::after {
        width: 340px;
        height: 240px;

        right: -120px;
        bottom: -45px;

        opacity: 0.035;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - INTERIOR ZONE COPY READABILITY
   ========================================================================== */

.interior-editorial__zone p {
    color:
        #203d50 !important;

    font-weight:
        560 !important;
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - INTERIOR BEST FOR READABILITY FINAL
   ========================================================================== */

.interior-editorial__footer-action > span {
    color:
        #173c53 !important;

    font-size:
        0.96rem !important;

    font-weight:
        800 !important;

    line-height:
        1.55 !important;

    max-width:
        500px !important;
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - INTERIOR JOKE BLACK
   ========================================================================== */

.interior-editorial__footer > p {
    color:
        #071827 !important;

    font-weight:
        800 !important;
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - INTERIOR STICKY PARALLAX REVEAL

   The section scrolls.
   The cabin image stays visually anchored.
   Different areas of the interior reveal through the viewport.
   ========================================================================== */


/* ==========================================================================
   SCROLL STAGE
   ========================================================================== */

.interior-editorial__photo-stage {
    position: relative;
    z-index: 2;

    width: 100%;

    height:
        clamp(920px, 112vh, 1180px);

    background:
        #dce8ee;
}


/* ==========================================================================
   STICKY VIEWPORT
   ========================================================================== */

.interior-editorial__photo-sticky {
    position: sticky;

    top: 0;

    width: 100%;

    height: 100vh;

    min-height: 620px;

    overflow: hidden;

    background:
        #dce8ee;
}


/* ==========================================================================
   INTERIOR IMAGE

   Oversized slightly so scrolling feels like looking through
   a stationary window into the cabin rather than moving a banner.
   ========================================================================== */

.interior-editorial__photo-sticky > img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 112%;

    display: block;

    object-fit: cover;

    object-position:
        center 54%;

    transform:
        scale(1.035);

    transform-origin:
        center center;
}


/* ==========================================================================
   SUBTLE CINEMATIC SHADE

   Keeps the existing label readable without darkening the photograph.
   ========================================================================== */

.interior-editorial__photo-sticky::after {
    content: "";

    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(5,24,39,0.36) 0%,
            rgba(5,24,39,0.08) 21%,
            transparent 46%
        );

    pointer-events: none;
}


/* ==========================================================================
   EXISTING PHOTO LABEL
   ========================================================================== */

.interior-editorial__photo-sticky
.interior-editorial__photo-label {
    z-index: 3;
}


/* ==========================================================================
   MAKE SURE THE OLD PHOTO BAND RULES CANNOT INTERFERE
   ========================================================================== */

.interior-editorial__photo-band {
    display: none !important;
}


/* ==========================================================================
   DESKTOP VIEWPORT TUNING

   Header height leaves a little breathing room if the browser viewport
   is shorter than a large desktop monitor.
   ========================================================================== */

@media (min-width: 1101px) and (max-height: 820px) {

    .interior-editorial__photo-sticky {
        height:
            calc(100vh - 24px);

        min-height:
            560px;
    }

    .interior-editorial__photo-stage {
        height:
            clamp(820px, 108vh, 1030px);
    }
}


/* ==========================================================================
   TABLET

   Still sticky, but the journey is shorter.
   ========================================================================== */

@media (min-width: 701px) and (max-width: 1100px) {

    .interior-editorial__photo-stage {
        height:
            clamp(760px, 102vh, 960px);
    }

    .interior-editorial__photo-sticky {
        height:
            82vh;

        min-height:
            560px;
    }

    .interior-editorial__photo-sticky > img {
        height:
            108%;

        object-position:
            center 55%;

        transform:
            scale(1.025);
    }
}


/* ==========================================================================
   MOBILE

   Deliberately static.
   Avoids mobile-browser sticky/fixed viewport nonsense while keeping
   the exact same visual composition.
   ========================================================================== */

@media (max-width: 700px) {

    .interior-editorial__photo-stage {
        height:
            430px;
    }

    .interior-editorial__photo-sticky {
        position:
            relative;

        top:
            auto;

        height:
            430px;

        min-height:
            0;
    }

    .interior-editorial__photo-sticky > img {
        height:
            100%;

        object-position:
            center 56%;

        transform:
            none;
    }
}


/* ==========================================================================
   REDUCED MOTION / ACCESSIBILITY

   Sticky itself contains no animated motion, but users requesting
   reduced motion get the simpler presentation anyway.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .interior-editorial__photo-stage {
        height:
            auto;
    }

    .interior-editorial__photo-sticky {
        position:
            relative;

        top:
            auto;

        height:
            clamp(430px, 37vw, 610px);

        min-height:
            0;
    }

    .interior-editorial__photo-sticky > img {
        height:
            100%;

        transform:
            none;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - INTERIOR FIXED BACKGROUND REVEAL

   Correct implementation:
   normal section height
   fixed photograph behind the scrolling page
   ========================================================================== */


/* ==========================================================================
   RESTORE NORMAL PHOTO HEIGHT

   Undo the oversized sticky-scroll stage.
   ========================================================================== */

.interior-editorial__photo-stage {
    position: relative !important;

    width: 100% !important;

    height:
        clamp(430px, 37vw, 610px) !important;

    min-height: 0 !important;

    overflow: hidden !important;

    background:
        #dce8ee !important;
}


/* ==========================================================================
   TURN THE EXISTING WRAPPER INTO THE REVEAL WINDOW
   ========================================================================== */

.interior-editorial__photo-sticky {
    position: relative !important;

    top: auto !important;

    width: 100% !important;

    height: 100% !important;

    min-height: 0 !important;

    overflow: hidden !important;

    background-image:
        linear-gradient(
            0deg,
            rgba(5,24,39,0.28) 0%,
            rgba(5,24,39,0.05) 23%,
            transparent 48%
        ),
        url("../images/sunlit-luxury-suv-interior.webp") !important;

    background-repeat:
        no-repeat !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-attachment:
        scroll,
        fixed !important;
}


/* ==========================================================================
   HIDE THE ORIGINAL INLINE PHOTO VISUALLY

   It stays in the markup for accessibility.
   The background version now creates the scroll effect.
   ========================================================================== */

.interior-editorial__photo-sticky > img {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* ==========================================================================
   REMOVE THE OLD STICKY OVERLAY

   The gradient is already built into the new background layers.
   ========================================================================== */

.interior-editorial__photo-sticky::after {
    content: none !important;

    display: none !important;
}


/* ==========================================================================
   KEEP EXISTING LABEL ABOVE THE IMAGE
   ========================================================================== */

.interior-editorial__photo-sticky
.interior-editorial__photo-label {
    position: absolute !important;

    z-index: 4 !important;
}


/* ==========================================================================
   TABLET

   Keep the reveal, but use a slightly tighter crop.
   ========================================================================== */

@media (min-width: 701px) and (max-width: 1100px) {

    .interior-editorial__photo-stage {
        height:
            clamp(430px, 55vw, 560px) !important;
    }

    .interior-editorial__photo-sticky {
        background-size:
            auto 100vh !important;

        background-position:
            center center !important;
    }
}


/* ==========================================================================
   MOBILE

   Fixed backgrounds are unreliable on many mobile browsers.
   Mobile gets the same image with normal scrolling.
   ========================================================================== */

@media (max-width: 700px) {

    .interior-editorial__photo-stage {
        height:
            420px !important;
    }

    .interior-editorial__photo-sticky {
        background-attachment:
            scroll,
            scroll !important;

        background-size:
            cover !important;

        background-position:
            center 56% !important;
    }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .interior-editorial__photo-sticky {
        background-attachment:
            scroll,
            scroll !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PAINT CORRECTION TECH LAB V4
   ========================================================================== */

.paint-tech {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
        clamp(7rem, 9vw, 9.5rem)
        0
        clamp(5.5rem, 7vw, 7rem);

    background:
        linear-gradient(
            118deg,
            #fbfdfe 0%,
            #edf7fc 48%,
            #e3f1f8 100%
        );

    color:
        var(--ink);
}


/* ==========================================================================
   GLOSS / WATER ATMOSPHERE
   ========================================================================== */

.paint-tech__atmosphere {
    position: absolute;
    z-index: 0;

    inset: 0;

    pointer-events: none;
}

.paint-tech__atmosphere::before {
    content: "";

    position: absolute;

    top: -28%;
    left: 12%;

    width: 28%;
    height: 150%;

    background:
        linear-gradient(
            103deg,
            transparent 0%,
            transparent 28%,
            rgba(255,255,255,0.58) 40%,
            rgba(92,181,226,0.065) 46%,
            transparent 56%
        );

    filter:
        blur(4px);

    transform:
        rotate(7deg);
}

.paint-tech__atmosphere::after {
    content: "";

    position: absolute;

    right: -120px;
    bottom: -100px;

    width: 540px;
    height: 380px;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat;

    opacity: 0.045;

    filter:
        saturate(0.65)
        brightness(1.08);

    transform:
        rotate(15deg);
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.paint-tech__intro {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(480px, 0.95fr)
        minmax(420px, 0.65fr);

    align-items: end;

    justify-content: space-between;

    gap:
        clamp(5rem, 10vw, 11rem);

    margin-bottom:
        clamp(3.5rem, 5vw, 5rem);
}

.paint-tech__headline {
    position: relative;

    max-width: 760px;
}

.paint-tech__number {
    position: absolute;

    top: -3.4rem;
    right: 3%;

    color: transparent;

    font-size:
        clamp(5rem, 7vw, 7.6rem);

    font-weight: 950;
    line-height: 1;

    -webkit-text-stroke:
        1px rgba(18, 91, 138, 0.20);

    user-select: none;
}

.paint-tech__headline h2 {
    margin-top: 1.2rem;

    color:
        var(--navy);

    font-size:
        clamp(4.2rem, 5.8vw, 6.5rem);

    line-height: 0.9;

    letter-spacing:
        -0.065em;
}

.paint-tech__headline h2 span {
    display: block;

    margin-top: 0.12em;

    color:
        var(--blue);
}

.paint-tech__intro-copy {
    max-width: 550px;
}

.paint-tech__intro-copy p {
    color:
        #203d50;

    font-size:
        clamp(1rem, 1.1vw, 1.12rem);

    font-weight: 540;

    line-height: 1.72;
}

.paint-tech__intro-copy strong {
    display: block;

    margin-top: 1.6rem;

    padding-top: 1.2rem;

    border-top:
        1px solid rgba(7,36,57,0.16);

    color:
        #071827;

    font-size: 0.9rem;
    font-weight: 850;

    line-height: 1.5;
}


/* ==========================================================================
   FULL-WIDTH PAINT STRIP
   ========================================================================== */

.paint-tech__visual {
    position: relative;
    z-index: 2;

    width: 100%;

    height:
        clamp(400px, 34vw, 570px);

    overflow: hidden;

    background:
        #071827;
}

.paint-tech__visual > img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    filter:
        contrast(1.04)
        saturate(0.96);
}

.paint-tech__visual-shade {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5,24,39,0.55) 0%,
            rgba(5,24,39,0.10) 34%,
            rgba(5,24,39,0.02) 68%,
            rgba(5,24,39,0.30) 100%
        );

    pointer-events: none;
}


/* ==========================================================================
   INSPECTION READOUT
   ========================================================================== */

.paint-tech__readout {
    position: absolute;
    z-index: 3;

    right: 0;
    bottom: 0;
    left: 0;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    background:
        rgba(5,24,39,0.84);

    backdrop-filter:
        blur(10px);
}

.paint-tech__readout > div {
    padding:
        1.2rem
        1.5rem;
}

.paint-tech__readout > div + div {
    border-left:
        1px solid rgba(255,255,255,0.16);
}

.paint-tech__readout span {
    display: block;

    color:
        var(--yellow);

    font-size: 0.64rem;
    font-weight: 900;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.paint-tech__readout strong {
    display: block;

    margin-top: 0.35rem;

    color:
        #ffffff;

    font-size:
        0.92rem;

    font-weight: 820;

    line-height: 1.45;
}


/* ==========================================================================
   PROCESS
   ========================================================================== */

.paint-tech__process {
    position: relative;
    z-index: 2;

    padding-top:
        clamp(4rem, 6vw, 6rem);
}

.paint-tech__process-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 2rem;

    padding-bottom: 1.2rem;

    border-bottom:
        2px solid rgba(7,36,57,0.16);
}

.paint-tech__process-heading p {
    color:
        var(--navy);

    font-size:
        clamp(1.65rem, 2vw, 2.1rem);

    font-weight: 950;

    letter-spacing:
        -0.03em;
}

.paint-tech__process-heading span {
    color:
        #3f5d70;

    font-size: 0.78rem;
    font-weight: 850;

    letter-spacing: 0.045em;

    text-transform: uppercase;
}


/* ==========================================================================
   STEPS
   ========================================================================== */

.paint-tech__steps {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-bottom:
        2px solid rgba(7,36,57,0.16);
}

.paint-tech__step {
    min-height: 245px;

    padding:
        2rem
        2rem
        2.2rem
        0;
}

.paint-tech__step + .paint-tech__step {
    padding-left:
        2rem;

    border-left:
        1px solid rgba(7,36,57,0.14);
}

.paint-tech__step > span {
    color:
        var(--blue);

    font-size: 0.72rem;
    font-weight: 950;

    letter-spacing: 0.06em;
}

.paint-tech__step h3 {
    margin-top: 1rem;

    color:
        var(--navy);

    font-size:
        clamp(1.8rem, 2.15vw, 2.35rem);

    font-weight: 950;

    letter-spacing:
        -0.035em;
}

.paint-tech__step p {
    margin-top: 0.75rem;

    color:
        #203d50;

    font-size: 0.95rem;
    font-weight: 540;

    line-height: 1.6;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.paint-tech__footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 3rem;

    padding-top: 2.2rem;
}

.paint-tech__footer p {
    max-width: 600px;

    color:
        #173c53;

    font-size: 0.94rem;
    font-weight: 760;

    line-height: 1.55;
}

.paint-tech__footer p > span {
    display: block;

    margin-bottom: 0.3rem;

    color:
        #071827;

    font-size: 0.7rem;
    font-weight: 900;

    letter-spacing: 0.075em;

    text-transform: uppercase;
}

.paint-tech__link {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;

    gap: 0.65rem;

    color:
        var(--navy);

    font-size: 0.88rem;
    font-weight: 900;

    letter-spacing: 0.025em;

    text-decoration: none;
    text-transform: uppercase;
}

.paint-tech__link strong {
    color:
        var(--blue);

    font-size: 1.35rem;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .paint-tech__intro {
        grid-template-columns:
            1fr;

        gap:
            3rem;
    }

    .paint-tech__intro-copy {
        max-width:
            720px;
    }

    .paint-tech__steps {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .paint-tech__step:nth-child(3) {
        padding-left:
            0;

        border-left:
            0;
    }

    .paint-tech__step {
        border-bottom:
            1px solid rgba(7,36,57,0.14);
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .paint-tech {
        padding:
            5rem
            0;
    }

    .paint-tech__headline h2 {
        font-size:
            clamp(3.3rem, 14vw, 4.7rem);
    }

    .paint-tech__visual {
        height:
            430px;
    }

    .paint-tech__readout {
        grid-template-columns:
            1fr;
    }

    .paint-tech__readout > div + div {
        border-top:
            1px solid rgba(255,255,255,0.16);

        border-left:
            0;
    }

    .paint-tech__process-heading {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            0.5rem;
    }

    .paint-tech__steps {
        grid-template-columns:
            1fr;
    }

    .paint-tech__step,
    .paint-tech__step + .paint-tech__step,
    .paint-tech__step:nth-child(3) {
        min-height:
            0;

        padding:
            1.6rem
            0;

        border-left:
            0;

        border-bottom:
            1px solid rgba(7,36,57,0.14);
    }

    .paint-tech__footer {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .paint-tech__atmosphere::after {
        width:
            340px;

        height:
            240px;

        right:
            -120px;

        opacity:
            0.03;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PAINT CORRECTION INSPECTION BAY
   ========================================================================== */

.paint-bay {
    position: relative;
    isolation: isolate;

    min-height:
        clamp(820px, 58vw, 980px);

    overflow: hidden;

    background:
        #041522;

    color:
        #ffffff;
}


/* ==========================================================================
   FULL-BLEED MACHINE POLISHING PHOTOGRAPHY
   ========================================================================== */

.paint-bay__image {
    position: absolute;
    z-index: 0;

    inset: 0;
}

.paint-bay__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit:
        cover;

    object-position:
        center;

    filter:
        contrast(1.06)
        saturate(0.92)
        brightness(0.78);
}


/* ==========================================================================
   CINEMATIC IMAGE CONTROL

   Left stays dark enough for headline.
   Right stays dark enough for technical process.
   Center keeps visible polishing action.
   ========================================================================== */

.paint-bay__image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3,17,28,0.96) 0%,
            rgba(3,17,28,0.83) 22%,
            rgba(3,17,28,0.23) 47%,
            rgba(3,17,28,0.28) 65%,
            rgba(3,17,28,0.88) 88%,
            rgba(3,17,28,0.96) 100%
        ),
        linear-gradient(
            0deg,
            rgba(2,13,22,0.62) 0%,
            transparent 30%,
            transparent 72%,
            rgba(2,13,22,0.30) 100%
        );

    pointer-events: none;
}


/* ==========================================================================
   INSPECTION-LIGHT REFLECTIONS

   Paint-correction identity comes from controlled gloss/light,
   not bubbles.
   ========================================================================== */

.paint-bay__reflection {
    position: absolute;
    z-index: 1;

    inset: 0;

    pointer-events: none;
}

.paint-bay__reflection::before {
    content: "";

    position: absolute;

    top: -24%;
    left: 41%;

    width: 7px;
    height: 155%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,255,255,0.08) 16%,
            rgba(122,207,248,0.38) 48%,
            rgba(255,255,255,0.10) 72%,
            transparent
        );

    box-shadow:
        34px 0 40px rgba(102,196,241,0.16);

    filter:
        blur(1px);

    transform:
        rotate(14deg);
}

.paint-bay__reflection::after {
    content: "";

    position: absolute;

    top: 17%;
    left: 37%;

    width: 34%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(138,216,251,0.12),
            rgba(255,255,255,0.46),
            rgba(138,216,251,0.10),
            transparent
        );

    box-shadow:
        0 170px 0 rgba(255,255,255,0.06),
        0 340px 0 rgba(122,207,248,0.045);

    transform:
        rotate(-4deg);
}


/* ==========================================================================
   MAIN THREE-PART LAYOUT
   ========================================================================== */

.paint-bay__layout {
    position: relative;
    z-index: 2;

    min-height:
        clamp(820px, 58vw, 980px);

    display: grid;

    grid-template-columns:
        72px
        minmax(380px, 0.72fr)
        minmax(360px, 0.58fr);

    align-items:
        center;

    gap:
        clamp(2.5rem, 5vw, 6rem);

    padding-top:
        clamp(5rem, 7vw, 7rem);

    padding-bottom:
        clamp(8rem, 10vw, 10rem);
}


/* ==========================================================================
   VERTICAL SERVICE RAIL
   ========================================================================== */

.paint-bay__rail {
    align-self: stretch;

    display: flex;
    align-items: center;
    flex-direction: column;

    padding:
        1.5rem
        0;

    border-right:
        1px solid rgba(255,255,255,0.16);
}

.paint-bay__rail-number {
    color:
        #7dc8f0;

    font-size:
        1.05rem;

    font-weight:
        950;

    letter-spacing:
        0.08em;
}

.paint-bay__rail-line {
    flex:
        1 1 auto;

    width:
        1px;

    min-height:
        90px;

    margin:
        1.4rem
        0;

    background:
        linear-gradient(
            180deg,
            var(--yellow),
            rgba(255,255,255,0.16)
        );
}

.paint-bay__rail-label {
    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

    color:
        rgba(255,255,255,0.72);

    font-size:
        0.67rem;

    font-weight:
        900;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


/* ==========================================================================
   MAIN COPY
   ========================================================================== */

.paint-bay__copy {
    max-width:
        590px;
}

.paint-bay__eyebrow {
    color:
        var(--yellow);

    font-size:
        0.7rem;

    font-weight:
        900;

    letter-spacing:
        0.105em;

    text-transform:
        uppercase;
}

.paint-bay__copy h2 {
    margin-top:
        1.25rem;

    color:
        #ffffff;

    font-size:
        clamp(4.1rem, 5.6vw, 6.3rem);

    font-weight:
        950;

    line-height:
        0.89;

    letter-spacing:
        -0.065em;
}

.paint-bay__copy h2 span {
    display:
        block;

    margin-top:
        0.12em;

    color:
        #7cc7ef;
}

.paint-bay__lead {
    max-width:
        540px;

    margin-top:
        1.9rem;

    color:
        rgba(255,255,255,0.88);

    font-size:
        clamp(1rem, 1.08vw, 1.1rem);

    font-weight:
        520;

    line-height:
        1.72;
}


/* ==========================================================================
   TECHNICAL NOTE
   ========================================================================== */

.paint-bay__note {
    margin-top:
        2.2rem;

    padding:
        1.15rem
        0
        1.15rem
        1.1rem;

    border-left:
        3px solid var(--yellow);

    border-top:
        1px solid rgba(255,255,255,0.12);

    border-bottom:
        1px solid rgba(255,255,255,0.12);
}

.paint-bay__note span {
    display:
        block;

    color:
        rgba(255,255,255,0.58);

    font-size:
        0.63rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.paint-bay__note strong {
    display:
        block;

    margin-top:
        0.35rem;

    color:
        #ffffff;

    font-size:
        1rem;

    font-weight:
        850;
}


/* ==========================================================================
   RIGHT-SIDE PROCESS RAIL
   ========================================================================== */

.paint-bay__process {
    position: relative;

    width:
        100%;

    max-width:
        470px;

    margin-left:
        auto;

    padding:
        1.6rem
        0
        1.1rem
        2rem;

    background:
        linear-gradient(
            90deg,
            rgba(4,21,34,0.18),
            rgba(4,21,34,0.74)
        );

    backdrop-filter:
        blur(5px);
}

.paint-bay__process-head {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    padding-bottom:
        1rem;

    border-bottom:
        1px solid rgba(255,255,255,0.16);
}

.paint-bay__process-head span {
    color:
        var(--yellow);

    font-size:
        0.64rem;

    font-weight:
        900;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}

.paint-bay__process-head strong {
    color:
        rgba(255,255,255,0.62);

    font-size:
        0.64rem;

    font-weight:
        900;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


/* ==========================================================================
   VERTICAL PROCESS LINE
   ========================================================================== */

.paint-bay__process-line {
    position:
        absolute;

    top:
        5rem;

    bottom:
        2rem;

    left:
        2.35rem;

    width:
        1px;

    background:
        linear-gradient(
            180deg,
            rgba(255,207,54,0.76),
            rgba(124,199,239,0.48),
            rgba(255,255,255,0.14)
        );
}


/* ==========================================================================
   PROCESS STAGES
   ========================================================================== */

.paint-bay__stage {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        34px
        46px
        minmax(0,1fr);

    gap:
        0.8rem;

    padding:
        1.25rem
        0;

    border-bottom:
        1px solid rgba(255,255,255,0.12);
}

.paint-bay__stage-dot {
    position:
        relative;

    z-index:
        2;

    align-self:
        start;

    width:
        10px;

    height:
        10px;

    margin-top:
        0.38rem;

    margin-left:
        0.05rem;

    border:
        2px solid rgba(255,255,255,0.82);

    border-radius:
        50%;

    background:
        #0a3049;

    box-shadow:
        0 0 0 4px rgba(8,47,72,0.72);
}

.paint-bay__stage-number {
    color:
        #79c6ef;

    font-size:
        0.72rem;

    font-weight:
        950;

    letter-spacing:
        0.05em;
}

.paint-bay__stage h3 {
    color:
        #ffffff;

    font-size:
        1.3rem;

    font-weight:
        950;

    line-height:
        1.1;

    letter-spacing:
        -0.025em;
}

.paint-bay__stage p {
    margin-top:
        0.45rem;

    color:
        rgba(255,255,255,0.74);

    font-size:
        0.84rem;

    font-weight:
        520;

    line-height:
        1.52;
}


/* ==========================================================================
   BOTTOM INFORMATION STRIP
   ========================================================================== */

.paint-bay__footer {
    position:
        absolute;

    z-index:
        4;

    right:
        0;

    bottom:
        0;

    left:
        0;

    background:
        rgba(3,17,28,0.94);

    border-top:
        1px solid rgba(255,255,255,0.15);

    backdrop-filter:
        blur(10px);
}

.paint-bay__footer-inner {
    display:
        grid;

    grid-template-columns:
        minmax(280px, 1fr)
        minmax(280px, 1fr)
        auto;

    align-items:
        center;

    gap:
        clamp(2rem, 5vw, 5rem);

    min-height:
        112px;
}

.paint-bay__best span,
.paint-bay__result span {
    display:
        block;

    color:
        var(--yellow);

    font-size:
        0.62rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.paint-bay__best strong,
.paint-bay__result strong {
    display:
        block;

    margin-top:
        0.35rem;

    color:
        rgba(255,255,255,0.90);

    font-size:
        0.84rem;

    font-weight:
        760;

    line-height:
        1.48;
}


/* ==========================================================================
   CTA
   ========================================================================== */

.paint-bay__cta {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    color:
        #ffffff;

    font-size:
        0.82rem;

    font-weight:
        900;

    letter-spacing:
        0.03em;

    text-decoration:
        none;

    text-transform:
        uppercase;
}

.paint-bay__cta > span {
    color:
        var(--yellow);

    font-size:
        1.35rem;

    transition:
        transform 180ms ease;
}

.paint-bay__cta:hover > span {
    transform:
        translateX(4px);
}


/* ==========================================================================
   ULTRAWIDE
   ========================================================================== */

@media (min-width: 1700px) {

    .paint-bay__layout {
        grid-template-columns:
            78px
            minmax(430px, 0.76fr)
            minmax(390px, 0.54fr);
    }

    .paint-bay__process {
        max-width:
            500px;
    }
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .paint-bay {
        min-height:
            1080px;
    }

    .paint-bay__layout {
        min-height:
            1080px;

        grid-template-columns:
            56px
            minmax(0,1fr);

        align-content:
            center;

        gap:
            2.5rem;

        padding-bottom:
            9rem;
    }

    .paint-bay__copy {
        max-width:
            670px;
    }

    .paint-bay__process {
        grid-column:
            2;

        max-width:
            670px;

        margin:
            1rem
            0
            0;
    }

    .paint-bay__footer-inner {
        grid-template-columns:
            repeat(2, minmax(0,1fr));

        padding:
            1.4rem
            0;
    }

    .paint-bay__cta {
        grid-column:
            1 / -1;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .paint-bay {
        min-height:
            0;

        padding-bottom:
            0;
    }

    .paint-bay__image {
        position:
            absolute;
    }

    .paint-bay__image img {
        object-position:
            58% center;
    }

    .paint-bay__layout {
        min-height:
            0;

        grid-template-columns:
            1fr;

        gap:
            3rem;

        padding-top:
            5rem;

        padding-bottom:
            4rem;
    }

    .paint-bay__rail {
        align-self:
            auto;

        align-items:
            center;

        flex-direction:
            row;

        gap:
            0.85rem;

        padding:
            0
            0
            1rem;

        border-right:
            0;

        border-bottom:
            1px solid rgba(255,255,255,0.16);
    }

    .paint-bay__rail-line {
        flex:
            1 1 auto;

        width:
            auto;

        min-height:
            1px;

        height:
            1px;

        margin:
            0;

        background:
            linear-gradient(
                90deg,
                var(--yellow),
                rgba(255,255,255,0.14)
            );
    }

    .paint-bay__rail-label {
        writing-mode:
            initial;

        transform:
            none;
    }

    .paint-bay__copy h2 {
        font-size:
            clamp(3.3rem, 14vw, 4.8rem);
    }

    .paint-bay__process {
        max-width:
            none;

        padding-left:
            1.3rem;

        background:
            rgba(4,21,34,0.76);
    }

    .paint-bay__process-line {
        left:
            1.65rem;
    }

    .paint-bay__footer {
        position:
            relative;
    }

    .paint-bay__footer-inner {
        grid-template-columns:
            1fr;

        gap:
            1.4rem;

        padding:
            1.8rem
            0;
    }

    .paint-bay__cta {
        grid-column:
            auto;
    }

    .paint-bay__reflection::before {
        left:
            65%;
    }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .paint-bay__cta > span {
        transition:
            none;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PAINT BAY FOOTER READABILITY
   ========================================================================== */


/* Small labels */

.paint-bay__best span,
.paint-bay__result span {
    font-size:
        0.70rem !important;

    letter-spacing:
        0.075em !important;
}


/* Main footer copy */

.paint-bay__best strong,
.paint-bay__result strong {
    color:
        #ffffff !important;

    font-size:
        0.94rem !important;

    font-weight:
        780 !important;

    line-height:
        1.5 !important;
}


/* CTA */

.paint-bay__cta {
    font-size:
        0.92rem !important;

    font-weight:
        900 !important;

    letter-spacing:
        0.02em !important;
}

.paint-bay__cta > span {
    font-size:
        1.45rem !important;
}


/* Keep the existing footer proportions */

.paint-bay__footer-inner {
    min-height:
        112px !important;
}


/* Mobile */

@media (max-width: 700px) {

    .paint-bay__best strong,
    .paint-bay__result strong {
        font-size:
            0.92rem !important;
    }

    .paint-bay__cta {
        font-size:
            0.88rem !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PAINT BAY PROCESS TYPOGRAPHY
   ========================================================================== */


/* Titles lead the hierarchy */

.paint-bay__stage h3 {
    color:
        #ffffff !important;

    font-weight:
        950 !important;
}


/* Descriptions support the titles instead of competing with them */

.paint-bay__stage p {
    color:
        rgba(255,255,255,0.76) !important;

    font-weight:
        430 !important;

    line-height:
        1.58 !important;
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PAINT BAY FOOTER HIERARCHY FINAL
   ========================================================================== */


/* BEST FOR / RESULT are the labels, so they lead */

.paint-bay__best span,
.paint-bay__result span {
    color:
        var(--yellow) !important;

    font-size:
        0.72rem !important;

    font-weight:
        950 !important;

    letter-spacing:
        0.075em !important;
}


/* Supporting descriptions should not look like headings */

.paint-bay__best strong,
.paint-bay__result strong {
    color:
        rgba(255,255,255,0.88) !important;

    font-size:
        0.92rem !important;

    font-weight:
        540 !important;

    line-height:
        1.52 !important;
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PAINT BAY LEAD READABILITY
   ========================================================================== */

.paint-bay__lead {
    position:
        relative;

    margin-left:
        -0.85rem;

    padding:
        0.8rem
        1.4rem
        0.8rem
        0.85rem;

    max-width:
        570px;

    background:
        linear-gradient(
            90deg,
            rgba(17, 23, 29, 0.62) 0%,
            rgba(17, 23, 29, 0.48) 68%,
            rgba(17, 23, 29, 0.10) 92%,
            transparent 100%
        );

    color:
        #ffffff !important;

    backdrop-filter:
        blur(2px);
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MAINTENANCE RHYTHM
   ========================================================================== */

.maintenance-rhythm {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
        clamp(7rem, 9vw, 9.5rem)
        0
        0;

    background:
        linear-gradient(
            120deg,
            #fbfdfe 0%,
            #eef7fc 50%,
            #e4f2f9 100%
        );

    color:
        var(--ink);
}


/* ==========================================================================
   WATER IDENTITY
   ========================================================================== */

.maintenance-rhythm__water {
    position: absolute;
    z-index: 0;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.maintenance-rhythm__water::after {
    content: "";

    position: absolute;

    right: -140px;
    top: -90px;

    width: 520px;
    height: 360px;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat;

    opacity:
        0.045;

    filter:
        saturate(0.72)
        brightness(1.08);

    transform:
        rotate(-18deg);
}

.maintenance-rhythm__bubble {
    position: absolute;

    display: block;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.maintenance-rhythm__bubble--one {
    width: 68px;
    height: 68px;

    top: 5%;
    left: 4%;

    background-image:
        url("../images/services-bubble-small.webp");

    opacity:
        0.22;

    transform:
        rotate(-9deg);
}

.maintenance-rhythm__bubble--two {
    width: 92px;
    height: 92px;

    top: 12%;
    right: 5%;

    background-image:
        url("../images/services-bubble-medium.webp");

    opacity:
        0.18;

    transform:
        rotate(12deg);
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.maintenance-rhythm__header {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(470px, 0.95fr)
        minmax(420px, 0.65fr);

    align-items: end;

    gap:
        clamp(5rem, 10vw, 11rem);

    padding-bottom:
        clamp(4rem, 6vw, 6rem);
}

.maintenance-rhythm__headline {
    position: relative;

    max-width:
        730px;
}

.maintenance-rhythm__number {
    position: absolute;

    top: -3.3rem;
    right: 4%;

    color: transparent;

    font-size:
        clamp(5rem, 7vw, 7.6rem);

    font-weight:
        950;

    line-height:
        1;

    -webkit-text-stroke:
        1px rgba(18,91,138,0.19);

    user-select:
        none;
}

.maintenance-rhythm__headline h2 {
    margin-top:
        1.2rem;

    color:
        var(--navy);

    font-size:
        clamp(4.3rem, 5.8vw, 6.5rem);

    font-weight:
        950;

    line-height:
        0.90;

    letter-spacing:
        -0.065em;
}

.maintenance-rhythm__headline h2 span {
    display:
        block;

    color:
        var(--blue);
}

.maintenance-rhythm__intro {
    max-width:
        550px;
}

.maintenance-rhythm__intro p {
    color:
        #203d50;

    font-size:
        clamp(1rem, 1.1vw, 1.12rem);

    font-weight:
        540;

    line-height:
        1.72;
}

.maintenance-rhythm__intro strong {
    display: block;

    margin-top:
        1.6rem;

    padding-top:
        1.2rem;

    border-top:
        1px solid rgba(7,36,57,0.16);

    color:
        #071827;

    font-size:
        0.94rem;

    font-weight:
        850;

    line-height:
        1.5;
}


/* ==========================================================================
   FOUR-PANEL RHYTHM SCALE
   ========================================================================== */

.maintenance-rhythm__scale {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    width:
        100%;
}


/* ==========================================================================
   PANELS
   ========================================================================== */

.maintenance-rhythm__level {
    position: relative;

    min-height:
        430px;

    display: flex;

    flex-direction:
        column;

    padding:
        clamp(2rem, 3vw, 3rem);

    border-top:
        1px solid rgba(7,36,57,0.16);

    border-right:
        1px solid rgba(7,36,57,0.14);

    color:
        #071827;
}

.maintenance-rhythm__level:last-child {
    border-right:
        0;
}


/* ==========================================================================
   PANEL COLORS
   ========================================================================== */

.maintenance-rhythm__level--frequent {
    background:
        #dff1fb;
}

.maintenance-rhythm__level--monthly {
    background:
        #c9e8f8;
}

.maintenance-rhythm__level--seasonal {
    background:
        #f5e8ad;
}

.maintenance-rhythm__level--chaos {
    background:
        #071827;

    color:
        #ffffff;
}


/* ==========================================================================
   PANEL COPY
   ========================================================================== */

.maintenance-rhythm__frequency {
    color:
        var(--blue);

    font-size:
        0.7rem;

    font-weight:
        950;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.maintenance-rhythm__level--chaos
.maintenance-rhythm__frequency {
    color:
        var(--yellow);
}

.maintenance-rhythm__level > strong {
    max-width:
        330px;

    margin:
        auto
        0
        1.4rem;

    color:
        inherit;

    font-size:
        clamp(2rem, 2.8vw, 3.2rem);

    font-weight:
        950;

    line-height:
        0.95;

    letter-spacing:
        -0.05em;
}

.maintenance-rhythm__level > p {
    max-width:
        320px;

    color:
        #234357;

    font-size:
        0.94rem;

    font-weight:
        540;

    line-height:
        1.6;
}

.maintenance-rhythm__level--chaos > p {
    color:
        rgba(255,255,255,0.82);
}

.maintenance-rhythm__meter {
    display: block;

    margin-top:
        2rem;

    padding-top:
        0.9rem;

    border-top:
        1px solid rgba(7,36,57,0.15);

    color:
        #315468;

    font-size:
        0.65rem;

    font-weight:
        900;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}

.maintenance-rhythm__level--chaos
.maintenance-rhythm__meter {
    border-color:
        rgba(255,255,255,0.15);

    color:
        rgba(255,255,255,0.62);
}


/* ==========================================================================
   BENEFITS
   ========================================================================== */

.maintenance-rhythm__footer {
    position: relative;
    z-index: 2;

    padding-top:
        clamp(3rem, 5vw, 4.5rem);

    padding-bottom:
        clamp(4.5rem, 6vw, 6rem);
}

.maintenance-rhythm__benefits {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    border-top:
        1px solid rgba(7,36,57,0.16);

    border-bottom:
        1px solid rgba(7,36,57,0.16);
}

.maintenance-rhythm__benefits > div {
    min-height:
        112px;

    display: flex;

    align-items:
        center;

    gap:
        1rem;

    padding:
        1.3rem
        1.5rem;
}

.maintenance-rhythm__benefits > div + div {
    border-left:
        1px solid rgba(7,36,57,0.14);
}

.maintenance-rhythm__benefits span {
    color:
        var(--blue);

    font-size:
        0.72rem;

    font-weight:
        950;
}

.maintenance-rhythm__benefits strong {
    color:
        var(--navy);

    font-size:
        0.9rem;

    font-weight:
        820;
}


/* ==========================================================================
   FOOTER LINE
   ========================================================================== */

.maintenance-rhythm__footer-line {
    display: flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        3rem;

    padding-top:
        2.2rem;
}

.maintenance-rhythm__footer-line p {
    color:
        #173c53;

    font-size:
        0.94rem;

    font-weight:
        560;

    line-height:
        1.5;
}

.maintenance-rhythm__footer-line p strong {
    color:
        #071827;

    font-weight:
        850;
}


/* ==========================================================================
   CTA
   ========================================================================== */

.maintenance-rhythm__cta {
    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    color:
        var(--navy);

    font-size:
        0.88rem;

    font-weight:
        900;

    letter-spacing:
        0.025em;

    text-decoration:
        none;

    text-transform:
        uppercase;
}

.maintenance-rhythm__cta > span {
    color:
        var(--blue);

    font-size:
        1.35rem;

    transition:
        transform 180ms ease;
}

.maintenance-rhythm__cta:hover > span {
    transform:
        translateX(4px);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .maintenance-rhythm__header {
        grid-template-columns:
            1fr;

        gap:
            3rem;
    }

    .maintenance-rhythm__intro {
        max-width:
            720px;
    }

    .maintenance-rhythm__scale {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .maintenance-rhythm__level {
        min-height:
            380px;
    }

    .maintenance-rhythm__benefits {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .maintenance-rhythm__benefits > div:nth-child(3) {
        border-left:
            0;

        border-top:
            1px solid rgba(7,36,57,0.14);
    }

    .maintenance-rhythm__benefits > div:nth-child(4) {
        border-top:
            1px solid rgba(7,36,57,0.14);
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .maintenance-rhythm {
        padding-top:
            5rem;
    }

    .maintenance-rhythm__headline h2 {
        font-size:
            clamp(3.3rem, 14vw, 4.8rem);
    }

    .maintenance-rhythm__scale {
        grid-template-columns:
            1fr;
    }

    .maintenance-rhythm__level {
        min-height:
            330px;

        border-right:
            0;

        border-bottom:
            1px solid rgba(7,36,57,0.14);
    }

    .maintenance-rhythm__benefits {
        grid-template-columns:
            1fr;
    }

    .maintenance-rhythm__benefits > div,
    .maintenance-rhythm__benefits > div + div,
    .maintenance-rhythm__benefits > div:nth-child(3),
    .maintenance-rhythm__benefits > div:nth-child(4) {
        border-left:
            0;

        border-top:
            1px solid rgba(7,36,57,0.14);
    }

    .maintenance-rhythm__footer-line {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .maintenance-rhythm__bubble--one {
        width:
            48px;

        height:
            48px;
    }

    .maintenance-rhythm__bubble--two {
        width:
            58px;

        height:
            58px;
    }

    .maintenance-rhythm__water::after {
        width:
            330px;

        height:
            230px;

        right:
            -120px;

        opacity:
            0.03;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MAINTENANCE ULTRAWIDE WIDTH FIX

   Keep the four cadence panels readable on wide monitors instead of
   stretching the content from one side of the room to the other.
   ========================================================================== */

.maintenance-rhythm__scale {
    width:
        min(
            calc(100% - 64px),
            1480px
        ) !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;
}


/* Give the centered block a clean visual boundary */

.maintenance-rhythm__level:first-child {
    border-left:
        1px solid rgba(7,36,57,0.14);
}

.maintenance-rhythm__level:last-child {
    border-right:
        1px solid rgba(7,36,57,0.14);
}


/* ==========================================================================
   TABLET / MOBILE

   Let the cadence layout use the available screen width again.
   ========================================================================== */

@media (max-width: 1100px) {

    .maintenance-rhythm__scale {
        width:
            100% !important;
    }

    .maintenance-rhythm__level:first-child {
        border-left:
            0;
    }

    .maintenance-rhythm__level:last-child {
        border-right:
            0;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MAINTENANCE WATER STREAM ACCENTS

   Water now travels through the section instead of appearing once
   in the upper-right corner and disappearing.
   ========================================================================== */


/* ==========================================================================
   STREAM BASE
   ========================================================================== */

.maintenance-rhythm__stream {
    position: absolute;

    display: block;

    background-position:
        center;

    background-repeat:
        no-repeat;

    background-size:
        contain;

    pointer-events:
        none;

    user-select:
        none;
}


/* ==========================================================================
   UPPER WATER RIBBON

   Carries the visual transition across the headline / 04 area.
   ========================================================================== */

.maintenance-rhythm__stream--top {
    top:
        2%;

    left:
        50%;

    width:
        clamp(900px, 76vw, 1500px);

    height:
        clamp(210px, 18vw, 320px);

    background-image:
        url("../images/maintenance-water-stream-top.webp");

    opacity:
        0.075;

    transform:
        translateX(-50%)
        rotate(-3deg);
}


/* ==========================================================================
   SECOND WATER RIBBON

   Continues the motion toward the cadence panels.
   ========================================================================== */

.maintenance-rhythm__stream--mid {
    top:
        22%;

    right:
        -4%;

    width:
        clamp(800px, 66vw, 1320px);

    height:
        clamp(190px, 16vw, 280px);

    background-image:
        url("../images/maintenance-water-stream-mid.webp");

    opacity:
        0.055;

    transform:
        rotate(5deg);
}


/* ==========================================================================
   LOWER CURVE

   Water language returns below the cadence panels instead of simply
   disappearing after the header.
   ========================================================================== */

.maintenance-rhythm__stream--curl {
    left:
        -5%;

    bottom:
        -2%;

    width:
        clamp(390px, 31vw, 650px);

    height:
        clamp(210px, 22vw, 360px);

    background-image:
        url("../images/maintenance-water-curl.webp");

    opacity:
        0.050;

    transform:
        rotate(-8deg);
}


/* ==========================================================================
   EXISTING TOP-RIGHT SPLASH

   Keep it, but make it part of the system instead of the entire system.
   ========================================================================== */

.maintenance-rhythm__water::after {
    right:
        -95px !important;

    top:
        -55px !important;

    width:
        430px !important;

    height:
        300px !important;

    opacity:
        0.035 !important;
}


/* ==========================================================================
   EXISTING BUBBLES

   Move them so they bridge the space between water elements.
   ========================================================================== */

.maintenance-rhythm__bubble--one {
    top:
        4% !important;

    left:
        2.5% !important;

    opacity:
        0.20 !important;
}

.maintenance-rhythm__bubble--two {
    top:
        17% !important;

    right:
        11% !important;

    opacity:
        0.15 !important;
}


/* ==========================================================================
   KEEP ALL CONTENT ABOVE THE WATER ART
   ========================================================================== */

.maintenance-rhythm__header,
.maintenance-rhythm__scale,
.maintenance-rhythm__footer {
    position:
        relative;

    z-index:
        2;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .maintenance-rhythm__stream--top {
        width:
            1100px;

        opacity:
            0.060;
    }

    .maintenance-rhythm__stream--mid {
        width:
            900px;

        right:
            -20%;
    }

    .maintenance-rhythm__stream--curl {
        width:
            460px;

        left:
            -15%;
    }
}


/* ==========================================================================
   MOBILE

   Keep only enough water language to preserve the identity.
   ========================================================================== */

@media (max-width: 700px) {

    .maintenance-rhythm__stream--top {
        top:
            1%;

        width:
            760px;

        height:
            190px;

        opacity:
            0.045;
    }

    .maintenance-rhythm__stream--mid {
        top:
            19%;

        right:
            -65%;

        width:
            720px;

        opacity:
            0.035;
    }

    .maintenance-rhythm__stream--curl {
        width:
            330px;

        height:
            190px;

        left:
            -35%;

        bottom:
            0;

        opacity:
            0.035;
    }

    .maintenance-rhythm__water::after {
        width:
            290px !important;

        height:
            210px !important;

        right:
            -110px !important;

        opacity:
            0.025 !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SERVICES FINAL ROUTER
   ========================================================================== */

.service-router {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        linear-gradient(
            125deg,
            #041522 0%,
            #06283d 55%,
            #083653 100%
        );

    color:
        #ffffff;
}


/* ==========================================================================
   WATER ATMOSPHERE
   ========================================================================== */

.service-router__water {
    position: absolute;
    z-index: 0;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.service-router__stream {
    position: absolute;

    top: -12%;
    left: 30%;

    width:
        clamp(900px, 78vw, 1500px);

    height:
        clamp(260px, 22vw, 390px);

    background:
        url("../images/maintenance-water-stream-top.webp")
        center / contain
        no-repeat;

    opacity:
        0.07;

    transform:
        rotate(-4deg);
}

.service-router__bubble {
    position: absolute;

    display: block;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.service-router__bubble--one {
    width: 72px;
    height: 72px;

    top: 14%;
    right: 5%;

    background-image:
        url("../images/services-bubble-medium.webp");

    opacity:
        0.18;
}

.service-router__bubble--two {
    width: 44px;
    height: 44px;

    bottom: 18%;
    left: 4%;

    background-image:
        url("../images/services-bubble-small.webp");

    opacity:
        0.16;
}


/* ==========================================================================
   MAIN LAYOUT
   ========================================================================== */

.service-router__inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(430px, 0.85fr)
        minmax(500px, 1fr);

    align-items: center;

    gap:
        clamp(5rem, 9vw, 10rem);

    padding-top:
        clamp(7rem, 9vw, 9rem);

    padding-bottom:
        clamp(6rem, 8vw, 8rem);
}


/* ==========================================================================
   COPY
   ========================================================================== */

.service-router__copy {
    max-width:
        650px;
}

.service-router__eyebrow {
    color:
        var(--yellow);

    font-size:
        0.7rem;

    font-weight:
        900;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}

.service-router__copy h2 {
    margin-top:
        1rem;

    color:
        #ffffff;

    font-size:
        clamp(4.3rem, 5.8vw, 6.5rem);

    font-weight:
        950;

    line-height:
        0.90;

    letter-spacing:
        -0.065em;
}

.service-router__copy h2 span {
    display:
        block;

    color:
        #7cc7ef;
}

.service-router__lead {
    max-width:
        570px;

    margin-top:
        1.8rem;

    color:
        rgba(255,255,255,0.84);

    font-size:
        1rem;

    font-weight:
        500;

    line-height:
        1.68;
}

.service-router__aside {
    margin-top:
        2rem;

    padding-left:
        1rem;

    border-left:
        3px solid var(--yellow);

    color:
        #ffffff;

    font-size:
        0.92rem;

    font-weight:
        800;
}


/* ==========================================================================
   ROUTING FLOW
   ========================================================================== */

.service-router__flow {
    border-top:
        1px solid rgba(255,255,255,0.18);

    border-bottom:
        1px solid rgba(255,255,255,0.18);
}

.service-router__flow-head {
    display: flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        58px;

    border-bottom:
        1px solid rgba(255,255,255,0.14);
}

.service-router__flow-head span {
    color:
        var(--yellow);

    font-size:
        0.65rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.service-router__flow-head strong {
    color:
        rgba(255,255,255,0.58);

    font-size:
        0.65rem;

    font-weight:
        900;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


/* ==========================================================================
   ROUTING STEPS
   ========================================================================== */

.service-router__step {
    display: grid;

    grid-template-columns:
        46px
        180px
        minmax(0,1fr);

    align-items: center;

    gap:
        1rem;

    min-height:
        92px;

    border-bottom:
        1px solid rgba(255,255,255,0.12);
}

.service-router__step:last-child {
    border-bottom:
        0;
}

.service-router__step > span {
    color:
        #79c6ef;

    font-size:
        0.72rem;

    font-weight:
        950;
}

.service-router__step > strong {
    color:
        #ffffff;

    font-size:
        1.2rem;

    font-weight:
        900;
}

.service-router__step > p {
    color:
        rgba(255,255,255,0.70);

    font-size:
        0.88rem;

    font-weight:
        480;

    line-height:
        1.5;
}

.service-router__step--result {
    background:
        rgba(124,199,239,0.06);
}


/* ==========================================================================
   ACTION BAR
   ========================================================================== */

.service-router__actions {
    position: relative;
    z-index: 2;

    border-top:
        1px solid rgba(255,255,255,0.15);

    background:
        rgba(2,14,23,0.72);
}

.service-router__actions-inner {
    min-height:
        120px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        3rem;
}

.service-router__actions-inner > p {
    color:
        rgba(255,255,255,0.72);

    font-size:
        0.96rem;

    font-weight:
        520;
}

.service-router__actions-inner > p strong {
    color:
        #ffffff;

    font-weight:
        850;
}


/* ==========================================================================
   ACTIONS
   ========================================================================== */

.service-router__buttons {
    display: flex;

    align-items: center;

    gap:
        2rem;
}

.service-router__text-link {
    display: inline-flex;

    align-items: center;

    gap:
        0.65rem;

    color:
        #ffffff;

    font-size:
        0.86rem;

    font-weight:
        900;

    text-decoration:
        none;

    text-transform:
        uppercase;
}

.service-router__text-link > span {
    color:
        var(--yellow);

    font-size:
        1.3rem;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .service-router__inner {
        grid-template-columns:
            1fr;

        gap:
            4rem;
    }

    .service-router__flow {
        max-width:
            760px;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .service-router__inner {
        padding-top:
            5rem;

        padding-bottom:
            4rem;
    }

    .service-router__copy h2 {
        font-size:
            clamp(3.3rem, 14vw, 4.8rem);
    }

    .service-router__step {
        grid-template-columns:
            38px
            1fr;

        gap:
            0.5rem
            1rem;

        padding:
            1rem
            0;
    }

    .service-router__step > p {
        grid-column:
            2;

        padding-bottom:
            0.3rem;
    }

    .service-router__actions-inner {
        align-items:
            flex-start;

        flex-direction:
            column;

        padding-top:
            1.6rem;

        padding-bottom:
            1.6rem;
    }

    .service-router__buttons {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1.25rem;
    }

    .service-router__stream {
        left:
            5%;

        width:
            850px;

        opacity:
            0.045;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - ROUTER STREAM CLEAN CROP

   Hide the stray lower fragment from the source water artwork while
   preserving the main ribbon across the top of the section.
   ========================================================================== */

.service-router__stream {
    top:
        -12% !important;

    left:
        30% !important;

    width:
        clamp(900px, 78vw, 1500px) !important;

    height:
        clamp(180px, 13vw, 235px) !important;

    background-image:
        url("../images/maintenance-water-stream-top.webp") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center top !important;

    background-size:
        auto clamp(300px, 22vw, 390px) !important;

    opacity:
        0.07 !important;

    transform:
        rotate(-4deg) !important;
}


/* Mobile still gets a restrained crop */

@media (max-width: 700px) {

    .service-router__stream {
        left:
            5% !important;

        width:
            850px !important;

        height:
            150px !important;

        background-size:
            auto 300px !important;

        opacity:
            0.045 !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - ROUTER STREAM ASSET CLEANUP FINAL

   Full ribbon restored.
   Stray fragment was removed from the PNG itself.
   ========================================================================== */

.service-router__stream {
    top:
        -12% !important;

    left:
        30% !important;

    width:
        clamp(900px, 78vw, 1500px) !important;

    height:
        clamp(260px, 22vw, 390px) !important;

    background-image:
        url("../images/maintenance-water-stream-top.webp") !important;

    background-position:
        center !important;

    background-repeat:
        no-repeat !important;

    background-size:
        contain !important;

    opacity:
        0.07 !important;

    transform:
        rotate(-4deg) !important;
}


@media (max-width: 700px) {

    .service-router__stream {
        left:
            5% !important;

        width:
            850px !important;

        height:
            clamp(260px, 22vw, 390px) !important;

        background-size:
            contain !important;

        opacity:
            0.045 !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION PAGE HERO
   ========================================================================== */

.protection-page {
    background:
        #eef7fc;
}


/* ==========================================================================
   HERO SHELL
   ========================================================================== */

.protection-hero {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 57%)
        minmax(520px, 43%);

    min-height:
        clamp(760px, 53vw, 940px);

    overflow: hidden;

    background:
        #071827;
}


/* ==========================================================================
   PHOTOGRAPHY
   ========================================================================== */

.protection-hero__media {
    position: relative;

    min-height:
        clamp(760px, 53vw, 940px);

    overflow: hidden;

    background:
        #061725;
}

.protection-hero__media > img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        center center;

    filter:
        contrast(1.05)
        saturate(0.96);
}


/* ==========================================================================
   IMAGE SHADING

   Keeps the photo dramatic without turning it into a black rectangle.
   ========================================================================== */

.protection-hero__media-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3,17,28,0.05) 0%,
            rgba(3,17,28,0.03) 55%,
            rgba(3,17,28,0.44) 100%
        ),
        linear-gradient(
            0deg,
            rgba(3,17,28,0.68) 0%,
            transparent 34%
        );

    pointer-events:
        none;
}


/* ==========================================================================
   IMAGE CAPTION
   ========================================================================== */

.protection-hero__media-caption {
    position: absolute;

    left:
        clamp(2rem, 5vw, 6rem);

    bottom:
        clamp(2rem, 4vw, 4.5rem);

    max-width:
        390px;

    padding:
        1rem
        1.15rem;

    border-left:
        3px solid var(--yellow);

    background:
        rgba(3,17,28,0.72);

    backdrop-filter:
        blur(8px);
}

.protection-hero__media-caption span {
    display: block;

    color:
        var(--yellow);

    font-size:
        0.63rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.protection-hero__media-caption strong {
    display: block;

    margin-top:
        0.35rem;

    color:
        #ffffff;

    font-size:
        0.92rem;

    font-weight:
        760;

    line-height:
        1.45;
}


/* ==========================================================================
   CONTENT PANEL
   ========================================================================== */

.protection-hero__content {
    position: relative;

    display: flex;

    align-items: center;

    min-height:
        clamp(760px, 53vw, 940px);

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #fbfdfe 0%,
            #eef7fc 56%,
            #dfeff7 100%
        );
}


/* ==========================================================================
   POLISHED PAINT REFLECTION LANGUAGE

   No generic circles.
   ========================================================================== */

.protection-hero__reflection {
    position: absolute;

    inset: 0;

    pointer-events: none;
}

.protection-hero__reflection::before {
    content: "";

    position: absolute;

    top: -14%;
    left: 52%;

    width: 4px;
    height: 135%;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(73,164,215,0.08) 16%,
            rgba(255,255,255,0.86) 46%,
            rgba(91,181,226,0.14) 62%,
            transparent 100%
        );

    box-shadow:
        24px 0 40px rgba(71,165,216,0.10);

    filter:
        blur(1px);

    transform:
        rotate(13deg);
}

.protection-hero__reflection::after {
    content: "";

    position: absolute;

    top: 20%;
    right: -12%;

    width: 86%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(74,163,212,0.15),
            rgba(255,255,255,0.92),
            rgba(74,163,212,0.10),
            transparent
        );

    box-shadow:
        0 190px 0 rgba(78,164,214,0.07),
        0 380px 0 rgba(78,164,214,0.05);

    transform:
        rotate(-7deg);
}


/* ==========================================================================
   CONTENT
   ========================================================================== */

.protection-hero__content-inner {
    position: relative;
    z-index: 2;

    width:
        min(
            calc(100% - 80px),
            680px
        );

    margin:
        0 auto;

    padding:
        5rem 0;
}

.protection-hero__eyebrow {
    color:
        var(--blue);

    font-size:
        0.7rem;

    font-weight:
        950;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


/* ==========================================================================
   HEADLINE
   ========================================================================== */

.protection-hero h1 {
    margin-top:
        1.1rem;

    color:
        var(--navy);

    font-size:
        clamp(4rem, 4.8vw, 5.8rem);

    font-weight:
        950;

    line-height:
        0.89;

    letter-spacing:
        -0.065em;
}

.protection-hero h1 > span {
    display: block;

    color:
        var(--blue);
}

.protection-hero h1 > strong {
    display: block;

    margin-top:
        0.22em;

    color:
        var(--navy);

    font: inherit;
}


/* ==========================================================================
   LEAD
   ========================================================================== */

.protection-hero__lead {
    max-width:
        560px;

    margin-top:
        1.9rem;

    color:
        #203d50;

    font-size:
        clamp(1rem, 1.05vw, 1.08rem);

    font-weight:
        530;

    line-height:
        1.68;
}


/* ==========================================================================
   THREE-STAGE SEQUENCE
   ========================================================================== */

.protection-hero__sequence {
    margin-top:
        2.2rem;

    border-top:
        1px solid rgba(7,36,57,0.16);

    border-bottom:
        1px solid rgba(7,36,57,0.16);
}

.protection-hero__sequence > div {
    display: grid;

    grid-template-columns:
        44px
        100px
        minmax(0,1fr);

    align-items: center;

    gap:
        1rem;

    min-height:
        84px;

    border-bottom:
        1px solid rgba(7,36,57,0.12);
}

.protection-hero__sequence > div:last-child {
    border-bottom:
        0;
}

.protection-hero__sequence span {
    color:
        var(--blue);

    font-size:
        0.7rem;

    font-weight:
        950;
}

.protection-hero__sequence strong {
    color:
        var(--navy);

    font-size:
        1rem;

    font-weight:
        900;
}

.protection-hero__sequence p {
    color:
        #3c596b;

    font-size:
        0.84rem;

    font-weight:
        500;

    line-height:
        1.5;
}


/* ==========================================================================
   ACTIONS
   ========================================================================== */

.protection-hero__actions {
    display: flex;

    align-items: center;

    gap:
        1.8rem;

    margin-top:
        2.2rem;
}

.protection-hero__text-link {
    display: inline-flex;

    align-items: center;

    gap:
        0.55rem;

    color:
        var(--navy);

    font-size:
        0.84rem;

    font-weight:
        900;

    text-decoration:
        none;

    text-transform:
        uppercase;
}

.protection-hero__text-link span {
    color:
        var(--blue);

    font-size:
        1.2rem;
}


/* ==========================================================================
   FINE PRINT
   ========================================================================== */

.protection-hero__fine {
    margin-top:
        1.8rem;

    color:
        #314f62;

    font-size:
        0.79rem;

    font-weight:
        680;

    line-height:
        1.5;
}


/* ==========================================================================
   ULTRAWIDE
   ========================================================================== */

@media (min-width: 1800px) {

    .protection-hero {
        grid-template-columns:
            minmax(0, 60%)
            minmax(560px, 40%);
    }

    .protection-hero__content-inner {
        width:
            min(
                calc(100% - 100px),
                700px
            );
    }
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .protection-hero {
        grid-template-columns:
            1fr;
    }

    .protection-hero__media {
        min-height:
            620px;
    }

    .protection-hero__content {
        min-height:
            0;
    }

    .protection-hero__content-inner {
        width:
            min(
                calc(100% - 64px),
                760px
            );

        padding:
            5.5rem 0;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .protection-hero__media {
        min-height:
            500px;
    }

    .protection-hero__media-caption {
        left:
            1.25rem;

        right:
            1.25rem;

        bottom:
            1.25rem;
    }

    .protection-hero__content-inner {
        width:
            min(
                calc(100% - 32px),
                680px
            );

        padding:
            4.5rem 0;
    }

    .protection-hero h1 {
        font-size:
            clamp(3.25rem, 14vw, 4.7rem);
    }

    .protection-hero__sequence > div {
        grid-template-columns:
            38px
            90px
            minmax(0,1fr);
    }

    .protection-hero__actions {
        align-items:
            flex-start;

        flex-direction:
            column;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION CINEMATIC HERO
   ========================================================================== */

.protection-cinema {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height:
        clamp(760px, 52vw, 940px);

    background:
        #03111c;

    color:
        #ffffff;
}


/* ==========================================================================
   FULL-BLEED PHOTOGRAPHY
   ========================================================================== */

.protection-cinema__media {
    position: absolute;
    z-index: 0;

    inset: 0;
}

.protection-cinema__media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit:
        cover;

    object-position:
        52% center;

    filter:
        contrast(1.05)
        saturate(0.96)
        brightness(0.90);
}


/* ==========================================================================
   CINEMATIC READABILITY

   Dark where the copy lives.
   Photo remains much more open on the right.
   ========================================================================== */

.protection-cinema__shade {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2,14,23,0.94) 0%,
            rgba(2,14,23,0.85) 26%,
            rgba(2,14,23,0.48) 48%,
            rgba(2,14,23,0.10) 72%,
            rgba(2,14,23,0.12) 100%
        ),
        linear-gradient(
            0deg,
            rgba(2,14,23,0.78) 0%,
            transparent 34%,
            rgba(2,14,23,0.14) 100%
        );

    pointer-events:
        none;
}


/* ==========================================================================
   PAINT GLOSS STREAKS
   ========================================================================== */

.protection-cinema__gloss {
    position: absolute;
    z-index: 2;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.protection-cinema__gloss::before {
    content: "";

    position: absolute;

    top: -24%;
    left: 61%;

    width: 5px;
    height: 145%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,255,255,0.06),
            rgba(147,220,255,0.28),
            rgba(255,255,255,0.08),
            transparent
        );

    box-shadow:
        34px 0 58px rgba(114,202,244,0.14);

    transform:
        rotate(16deg);
}

.protection-cinema__gloss::after {
    content: "";

    position: absolute;

    top: 19%;
    right: -9%;

    width: 55%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(123,207,248,0.11),
            rgba(255,255,255,0.42),
            rgba(123,207,248,0.10),
            transparent
        );

    transform:
        rotate(-5deg);
}


/* ==========================================================================
   HERO CONTENT
   ========================================================================== */

.protection-cinema__inner {
    position: relative;
    z-index: 3;

    min-height:
        clamp(760px, 52vw, 940px);

    display: flex;

    align-items: center;

    padding-top:
        clamp(5rem, 7vw, 7rem);

    padding-bottom:
        clamp(9rem, 11vw, 11rem);
}

.protection-cinema__copy {
    width:
        min(650px, 48vw);
}

.protection-cinema__eyebrow {
    color:
        var(--yellow);

    font-size:
        0.7rem;

    font-weight:
        950;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


/* ==========================================================================
   HERO HEADLINE
   ========================================================================== */

.protection-cinema h1 {
    margin-top:
        1.1rem;

    color:
        #ffffff;

    font-size:
        clamp(4.4rem, 6vw, 7rem);

    font-weight:
        950;

    line-height:
        0.88;

    letter-spacing:
        -0.065em;
}

.protection-cinema h1 span {
    display: block;

    color:
        #7bc7ef;
}

.protection-cinema h1 strong {
    display: block;

    margin-top:
        0.20em;

    color:
        #ffffff;

    font: inherit;
}


/* ==========================================================================
   COPY
   ========================================================================== */

.protection-cinema__lead {
    max-width:
        580px;

    margin-top:
        1.8rem;

    color:
        rgba(255,255,255,0.86);

    font-size:
        clamp(1rem, 1.05vw, 1.08rem);

    font-weight:
        480;

    line-height:
        1.7;
}


/* ==========================================================================
   ACTIONS
   ========================================================================== */

.protection-cinema__actions {
    display: flex;

    align-items: center;

    gap:
        2rem;

    margin-top:
        2rem;
}

.protection-cinema__text-link {
    display: inline-flex;

    align-items: center;

    gap:
        0.6rem;

    color:
        #ffffff;

    font-size:
        0.84rem;

    font-weight:
        900;

    text-decoration:
        none;

    text-transform:
        uppercase;
}

.protection-cinema__text-link span {
    color:
        var(--yellow);

    font-size:
        1.25rem;
}


/* ==========================================================================
   SMALL HUMOR LINE
   ========================================================================== */

.protection-cinema__fine {
    margin-top:
        1.75rem;

    padding-left:
        1rem;

    border-left:
        3px solid var(--yellow);

    color:
        rgba(255,255,255,0.78);

    font-size:
        0.82rem;

    font-weight:
        650;

    line-height:
        1.5;
}


/* ==========================================================================
   TECHNICAL RAIL
   ========================================================================== */

.protection-cinema__rail {
    position: absolute;
    z-index: 4;

    right: 0;
    bottom: 0;
    left: 0;

    background:
        rgba(2,14,23,0.88);

    border-top:
        1px solid rgba(255,255,255,0.16);

    backdrop-filter:
        blur(10px);
}

.protection-cinema__rail-inner {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr))
        minmax(280px, 1.25fr);
}

.protection-cinema__rail-inner > div {
    min-height:
        112px;

    display: grid;

    grid-template-columns:
        34px
        90px
        minmax(0,1fr);

    align-items: center;

    gap:
        0.7rem;

    padding:
        1.25rem
        1.5rem;

    border-right:
        1px solid rgba(255,255,255,0.12);
}

.protection-cinema__rail-inner > div:last-child {
    border-right:
        0;
}

.protection-cinema__rail-inner span {
    color:
        #7bc7ef;

    font-size:
        0.67rem;

    font-weight:
        950;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;
}

.protection-cinema__rail-inner strong {
    color:
        #ffffff;

    font-size:
        0.9rem;

    font-weight:
        900;
}

.protection-cinema__rail-inner p {
    color:
        rgba(255,255,255,0.64);

    font-size:
        0.76rem;

    font-weight:
        470;

    line-height:
        1.4;
}

.protection-cinema__rail-result {
    grid-template-columns:
        90px
        minmax(0,1fr) !important;

    background:
        rgba(124,199,239,0.07);
}

.protection-cinema__rail-result strong {
    font-size:
        0.88rem;
}


/* ==========================================================================
   ULTRAWIDE

   Content remains capped.
   Only the photograph gets wider.
   ========================================================================== */

@media (min-width: 1700px) {

    .protection-cinema__copy {
        width:
            650px;
    }

    .protection-cinema__media img {
        object-position:
            center center;
    }
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .protection-cinema__copy {
        width:
            min(620px, 72vw);
    }

    .protection-cinema__rail {
        position:
            relative;
    }

    .protection-cinema__rail-inner {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .protection-cinema__inner {
        padding-bottom:
            6rem;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .protection-cinema {
        min-height:
            780px;
    }

    .protection-cinema__media img {
        object-position:
            60% center;
    }

    .protection-cinema__shade {
        background:
            linear-gradient(
                90deg,
                rgba(2,14,23,0.94) 0%,
                rgba(2,14,23,0.80) 72%,
                rgba(2,14,23,0.46) 100%
            ),
            linear-gradient(
                0deg,
                rgba(2,14,23,0.76),
                transparent 55%
            );
    }

    .protection-cinema__copy {
        width:
            min(100%, 560px);
    }

    .protection-cinema h1 {
        font-size:
            clamp(3.4rem, 14vw, 4.8rem);
    }

    .protection-cinema__actions {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1.25rem;
    }

    .protection-cinema__rail-inner {
        grid-template-columns:
            1fr;
    }

    .protection-cinema__rail-inner > div {
        border-right:
            0;

        border-bottom:
            1px solid rgba(255,255,255,0.12);
    }

    .protection-cinema__rail-inner > div:last-child {
        border-bottom:
            0;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SERVICES SPLASH IMPACT

   Water graphics hit the screen instead of gently fading in.
   Uses the independent CSS scale property so existing rotate/translate
   transforms remain completely untouched.
   ========================================================================== */

@keyframes wb-services-splash-impact {

    0% {
        scale: 0.08;
    }

    42% {
        scale: 1.16;
    }

    62% {
        scale: 0.94;
    }

    78% {
        scale: 1.055;
    }

    100% {
        scale: 1;
    }
}


/* Real splash / water graphic elements */

.wb-services-splash-impact {
    transform-origin:
        center center;

    animation-name:
        wb-services-splash-impact;

    animation-duration:
        680ms;

    animation-delay:
        var(--wb-splash-delay, 0ms);

    animation-timing-function:
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );

    animation-fill-mode:
        backwards;

    animation-iteration-count:
        1;

    will-change:
        scale;
}


/* Splash artwork living in ::before */

.wb-services-splash-impact-before::before {
    transform-origin:
        center center;

    animation-name:
        wb-services-splash-impact;

    animation-duration:
        680ms;

    animation-delay:
        var(--wb-splash-before-delay, 0ms);

    animation-timing-function:
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );

    animation-fill-mode:
        backwards;

    animation-iteration-count:
        1;

    will-change:
        scale;
}


/* Splash artwork living in ::after */

.wb-services-splash-impact-after::after {
    transform-origin:
        center center;

    animation-name:
        wb-services-splash-impact;

    animation-duration:
        680ms;

    animation-delay:
        var(--wb-splash-after-delay, 0ms);

    animation-timing-function:
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );

    animation-fill-mode:
        backwards;

    animation-iteration-count:
        1;

    will-change:
        scale;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .wb-services-splash-impact,
    .wb-services-splash-impact-before::before,
    .wb-services-splash-impact-after::after {
        animation:
            none !important;

        scale:
            1 !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SERVICES SPLASH IMPACT NO BOUNCE

   Splash starts essentially at a single point,
   expands directly to final size, and stays there.
   No overshoot. No recoil. No bounce.
   ========================================================================== */

@keyframes wb-services-splash-impact {

    0% {
        scale: 0.002;
    }

    100% {
        scale: 1;
    }
}


/* Real splash elements */

.wb-services-splash-impact {
    animation-duration:
        520ms !important;

    animation-timing-function:
        cubic-bezier(
            0.10,
            0.82,
            0.20,
            1
        ) !important;

    animation-fill-mode:
        backwards !important;

    animation-iteration-count:
        1 !important;
}


/* ::before splash artwork */

.wb-services-splash-impact-before::before {
    animation-duration:
        520ms !important;

    animation-timing-function:
        cubic-bezier(
            0.10,
            0.82,
            0.20,
            1
        ) !important;

    animation-fill-mode:
        backwards !important;

    animation-iteration-count:
        1 !important;
}


/* ::after splash artwork */

.wb-services-splash-impact-after::after {
    animation-duration:
        520ms !important;

    animation-timing-function:
        cubic-bezier(
            0.10,
            0.82,
            0.20,
            1
        ) !important;

    animation-fill-mode:
        backwards !important;

    animation-iteration-count:
        1 !important;
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION HERO RAIL READABILITY
   ========================================================================== */

.protection-cinema__rail-inner strong {
    color:
        #ffffff !important;

    font-size:
        0.96rem !important;

    font-weight:
        850 !important;
}


.protection-cinema__rail-inner p {
    color:
        rgba(255,255,255,0.80) !important;

    font-size:
        0.84rem !important;

    font-weight:
        500 !important;

    line-height:
        1.45 !important;
}


.protection-cinema__rail-inner span {
    color:
        #89d2f6 !important;

    font-size:
        0.70rem !important;

    font-weight:
        900 !important;
}


.protection-cinema__rail-result strong {
    color:
        #ffffff !important;

    font-size:
        0.94rem !important;

    font-weight:
        820 !important;
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION CORRECT VS PROTECT
   ========================================================================== */


/* ==========================================================================
   SECTION
   ========================================================================== */

.finish-logic {
    position:
        relative;

    overflow:
        hidden;

    background:
        #eef7fc;

    color:
        #071827;
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.finish-logic__intro {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(360px, 0.9fr);

    gap:
        clamp(4rem, 9vw, 10rem);

    align-items:
        end;

    padding-top:
        clamp(6rem, 8vw, 9rem);

    padding-bottom:
        clamp(4rem, 6vw, 6rem);
}


.finish-logic__eyebrow {
    color:
        #135f96;

    font-size:
        0.70rem;

    font-weight:
        950;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.finish-logic__heading h2 {
    margin-top:
        0.9rem;

    color:
        #071827;

    font-size:
        clamp(4.5rem, 6vw, 7rem);

    font-weight:
        950;

    line-height:
        0.88;

    letter-spacing:
        -0.065em;
}


.finish-logic__heading h2 span {
    display:
        block;

    color:
        #1766a0;
}


.finish-logic__intro-copy {
    max-width:
        560px;

    padding-bottom:
        0.55rem;
}


.finish-logic__intro-copy p {
    color:
        #17384d;

    font-size:
        1rem;

    font-weight:
        520;

    line-height:
        1.7;
}


.finish-logic__intro-copy strong {
    display:
        block;

    margin-top:
        1.5rem;

    padding-top:
        1.35rem;

    border-top:
        1px solid rgba(7,24,39,0.18);

    color:
        #071827;

    font-size:
        0.9rem;

    font-weight:
        850;
}


/* ==========================================================================
   SPLIT PROCESS
   ========================================================================== */

.finish-logic__split {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


/* ==========================================================================
   SHARED PHASE
   ========================================================================== */

.finish-phase {
    position:
        relative;

    overflow:
        hidden;

    min-height:
        690px;
}


.finish-phase__inner {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(100% - 7rem),
            710px
        );

    margin:
        0 auto;

    padding:
        clamp(5rem, 7vw, 7rem)
        0;
}


.finish-phase__number {
    position:
        absolute;

    top:
        1rem;

    right:
        0;

    font-size:
        clamp(8rem, 15vw, 15rem);

    font-weight:
        950;

    line-height:
        1;

    letter-spacing:
        -0.08em;

    pointer-events:
        none;
}


.finish-phase__label {
    position:
        relative;

    z-index:
        2;

    font-size:
        0.70rem;

    font-weight:
        950;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.finish-phase h3 {
    position:
        relative;

    z-index:
        2;

    max-width:
        590px;

    margin-top:
        1rem;

    font-size:
        clamp(4rem, 5vw, 6rem);

    font-weight:
        950;

    line-height:
        0.88;

    letter-spacing:
        -0.06em;
}


.finish-phase h3 span {
    display:
        block;
}


.finish-phase__lead {
    position:
        relative;

    z-index:
        2;

    max-width:
        560px;

    margin-top:
        1.7rem;

    font-size:
        0.98rem;

    font-weight:
        500;

    line-height:
        1.7;
}


/* ==========================================================================
   LIST
   ========================================================================== */

.finish-phase__list {
    position:
        relative;

    z-index:
        2;

    margin-top:
        2.7rem;

    border-top:
        1px solid currentColor;
}


.finish-phase__list > div {
    display:
        grid;

    grid-template-columns:
        42px
        1fr;

    align-items:
        center;

    min-height:
        62px;

    border-bottom:
        1px solid currentColor;

    font-size:
        0.90rem;

    font-weight:
        720;
}


.finish-phase__list span {
    font-size:
        0.65rem;

    font-weight:
        950;
}


/* ==========================================================================
   RESULT
   ========================================================================== */

.finish-phase__result {
    position:
        relative;

    z-index:
        2;

    margin-top:
        2rem;

    font-size:
        0.78rem;

    font-weight:
        800;

    letter-spacing:
        0.03em;

    text-transform:
        uppercase;
}


.finish-phase__result strong {
    margin-left:
        0.35rem;

    font-weight:
        900;
}


/* ==========================================================================
   CORRECTION SIDE
   ========================================================================== */

.finish-phase--correct {
    background:
        linear-gradient(
            145deg,
            #061522 0%,
            #09273b 100%
        );

    color:
        #ffffff;
}


.finish-phase--correct::before {
    content:
        "";

    position:
        absolute;

    top:
        -25%;

    right:
        -15%;

    width:
        75%;

    height:
        155%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(111,205,249,0.06),
            rgba(255,255,255,0.12),
            rgba(111,205,249,0.05),
            transparent
        );

    transform:
        rotate(18deg);

    pointer-events:
        none;
}


.finish-phase--correct .finish-phase__number {
    color:
        rgba(124,199,239,0.08);
}


.finish-phase--correct .finish-phase__label {
    color:
        #ffd447;
}


.finish-phase--correct h3 span {
    color:
        #79c7ef;
}


.finish-phase--correct .finish-phase__lead {
    color:
        rgba(255,255,255,0.78);
}


.finish-phase--correct .finish-phase__list {
    border-color:
        rgba(255,255,255,0.18);
}


.finish-phase--correct .finish-phase__list > div {
    border-color:
        rgba(255,255,255,0.14);

    color:
        rgba(255,255,255,0.92);
}


.finish-phase--correct .finish-phase__list span {
    color:
        #79c7ef;
}


.finish-phase--correct .finish-phase__result {
    color:
        rgba(255,255,255,0.58);
}


.finish-phase--correct .finish-phase__result strong {
    color:
        #ffffff;
}


/* ==========================================================================
   PROTECTION SIDE
   ========================================================================== */

.finish-phase--protect {
    background:
        linear-gradient(
            145deg,
            #d9eef9 0%,
            #f6fbfe 100%
        );

    color:
        #071827;
}


.finish-phase--protect::before {
    content:
        "";

    position:
        absolute;

    top:
        -20%;

    left:
        22%;

    width:
        3px;

    height:
        145%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,255,255,0.85),
            rgba(68,160,211,0.12),
            rgba(255,255,255,0.80),
            transparent
        );

    box-shadow:
        38px 0 70px rgba(78,169,218,0.12);

    transform:
        rotate(14deg);

    pointer-events:
        none;
}


.finish-phase--protect .finish-phase__number {
    color:
        rgba(17,99,155,0.08);
}


.finish-phase--protect .finish-phase__label {
    color:
        #0f5f99;
}


.finish-phase--protect h3 {
    color:
        #071827;
}


.finish-phase--protect h3 span {
    color:
        #1766a0;
}


.finish-phase--protect .finish-phase__lead {
    color:
        #28495d;
}


.finish-phase--protect .finish-phase__list {
    border-color:
        rgba(7,24,39,0.18);
}


.finish-phase--protect .finish-phase__list > div {
    border-color:
        rgba(7,24,39,0.14);

    color:
        #102f43;
}


.finish-phase--protect .finish-phase__list span {
    color:
        #1766a0;
}


.finish-phase--protect .finish-phase__result {
    color:
        #587184;
}


.finish-phase--protect .finish-phase__result strong {
    color:
        #071827;
}


/* ==========================================================================
   CENTER DIVIDE
   ========================================================================== */

.finish-logic__split {
    position:
        relative;
}


.finish-logic__split::after {
    content:
        "";

    position:
        absolute;

    z-index:
        5;

    top:
        0;

    bottom:
        0;

    left:
        50%;

    width:
        1px;

    background:
        rgba(255,255,255,0.18);

    pointer-events:
        none;
}


/* ==========================================================================
   REALITY CHECK
   ========================================================================== */

.finish-logic__reality {
    border-top:
        1px solid rgba(7,24,39,0.12);

    border-bottom:
        1px solid rgba(7,24,39,0.12);

    background:
        #ffffff;
}


.finish-logic__reality-inner {
    display:
        grid;

    grid-template-columns:
        minmax(300px, 0.8fr)
        minmax(0, 1.2fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items:
        center;

    min-height:
        150px;
}


.finish-logic__reality span {
    display:
        block;

    color:
        #1766a0;

    font-size:
        0.66rem;

    font-weight:
        950;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.finish-logic__reality strong {
    display:
        block;

    margin-top:
        0.4rem;

    color:
        #071827;

    font-size:
        1.15rem;

    font-weight:
        900;
}


.finish-logic__reality p {
    color:
        #29495d;

    font-size:
        0.90rem;

    font-weight:
        530;

    line-height:
        1.6;
}


/* ==========================================================================
   ULTRAWIDE

   Keep actual reading width controlled.
   ========================================================================== */

@media (min-width: 1800px) {

    .finish-phase__inner {
        width:
            min(
                calc(100% - 9rem),
                720px
            );
    }
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .finish-logic__intro {
        grid-template-columns:
            1fr;

        gap:
            2.5rem;
    }


    .finish-logic__split {
        grid-template-columns:
            1fr;
    }


    .finish-logic__split::after {
        display:
            none;
    }


    .finish-phase {
        min-height:
            0;
    }


    .finish-phase__inner {
        width:
            min(
                calc(100% - 64px),
                760px
            );
    }


    .finish-logic__reality-inner {
        grid-template-columns:
            1fr;

        gap:
            1.5rem;

        padding-top:
            2.4rem;

        padding-bottom:
            2.4rem;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .finish-logic__intro {
        padding-top:
            4.5rem;

        padding-bottom:
            3.5rem;
    }


    .finish-logic__heading h2 {
        font-size:
            clamp(3.4rem, 14vw, 4.8rem);
    }


    .finish-phase__inner {
        width:
            min(
                calc(100% - 32px),
                680px
            );

        padding:
            4.5rem
            0;
    }


    .finish-phase h3 {
        font-size:
            clamp(3.3rem, 13vw, 4.6rem);
    }


    .finish-phase__number {
        font-size:
            8rem;
    }


    .finish-phase__result strong {
        display:
            block;

        margin:
            0.35rem
            0
            0;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - CORRECTION HEADING CONTRAST FIX
   ========================================================================== */

.finish-phase--correct h3 {
    color:
        #ffffff !important;
}

.finish-phase--correct h3 span {
    color:
        #79c7ef !important;
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SECTION 02 INTRO HEADING SCALE
   ========================================================================== */

.finish-logic__heading h2 {
    font-size:
        clamp(3.8rem, 5vw, 5.8rem) !important;

    line-height:
        0.90 !important;
}


@media (max-width: 700px) {

    .finish-logic__heading h2 {
        font-size:
            clamp(3rem, 12vw, 4.2rem) !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SECTION 02 HEADLINE LINE GAP

   Give "One finish." enough breathing room below "Two jobs."
   without changing the headline size.
   ========================================================================== */

.finish-logic__heading h2 span {
    margin-top:
        0.10em !important;
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION SECTION 02 GRAPHICS

   Correction side:
   inspection-light / polished-paint reflection language.

   Protection side:
   restrained hydrophobic bead artwork using the real bubble PNGs.

   No layout changes.
   ========================================================================== */


/* ==========================================================================
   DARK CORRECTION SIDE
   ========================================================================== */

.finish-phase--correct::after {
    content:
        "";

    position:
        absolute;

    z-index:
        1;

    top:
        -12%;

    left:
        4%;

    width:
        105%;

    height:
        120%;

    pointer-events:
        none;

    background:

        linear-gradient(
            104deg,
            transparent 0%,
            transparent 26%,
            rgba(122, 208, 249, 0.05) 27%,
            rgba(255,255,255,0.20) 27.5%,
            rgba(122, 208, 249, 0.05) 28%,
            transparent 29%,
            transparent 100%
        ),

        linear-gradient(
            98deg,
            transparent 0%,
            transparent 53%,
            rgba(255,255,255,0.08) 53.4%,
            rgba(120,205,246,0.18) 53.8%,
            rgba(255,255,255,0.07) 54.2%,
            transparent 54.6%,
            transparent 100%
        ),

        linear-gradient(
            110deg,
            transparent 0%,
            transparent 76%,
            rgba(104,196,240,0.08) 76.4%,
            rgba(255,255,255,0.16) 76.8%,
            transparent 77.4%,
            transparent 100%
        );

    opacity:
        0.72;

    transform:
        rotate(-2deg);
}


/* Soft inspection glow behind the 01 */

.finish-phase--correct .finish-phase__number {
    text-shadow:
        0 0 50px rgba(106,199,243,0.10);
}


/* ==========================================================================
   LIGHT PROTECTION SIDE

   Real iridescent bead artwork.
   ========================================================================== */

.finish-phase--protect {
    isolation:
        isolate;
}


.finish-phase--protect::after {
    content:
        "";

    position:
        absolute;

    z-index:
        1;

    top:
        7%;

    right:
        4%;

    width:
        92px;

    height:
        92px;

    pointer-events:
        none;

    background:
        url("../images/services-bubble-medium.webp")
        center / contain
        no-repeat;

    opacity:
        0.28;

    transform:
        rotate(8deg);

    filter:
        saturate(0.82)
        brightness(1.05);
}


/* ==========================================================================
   SMALL HYDROPHOBIC BEAD CLUSTER

   Uses multiple background layers so this remains decorative
   and does not require new markup.
   ========================================================================== */

.finish-phase--protect .finish-phase__inner::before {
    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    right:
        -1.5rem;

    bottom:
        4.5rem;

    width:
        230px;

    height:
        190px;

    pointer-events:
        none;

    background-image:
        url("../images/services-bubble-small.webp"),
        url("../images/services-bubble-small.webp"),
        url("../images/services-bubble-medium.webp"),
        url("../images/services-bubble-small.webp");

    background-repeat:
        no-repeat;

    background-size:
        34px 34px,
        22px 22px,
        56px 56px,
        27px 27px;

    background-position:
        6% 76%,
        42% 22%,
        72% 58%,
        94% 12%;

    opacity:
        0.16;

    transform:
        rotate(-7deg);
}


/* ==========================================================================
   CENTER GLOSS ARC

   Gives the split one continuous paint-surface gesture.
   ========================================================================== */

.finish-logic__split::before {
    content:
        "";

    position:
        absolute;

    z-index:
        4;

    top:
        12%;

    left:
        50%;

    width:
        clamp(320px, 28vw, 520px);

    height:
        clamp(520px, 46vw, 760px);

    pointer-events:
        none;

    border:
        2px solid
        rgba(126, 207, 246, 0.12);

    border-left:
        0;

    border-bottom:
        0;

    border-radius:
        0 100% 0 0;

    transform:
        translateX(-48%)
        rotate(12deg);

    opacity:
        0.72;

    filter:
        drop-shadow(
            0 0 22px
            rgba(112,201,243,0.08)
        );
}


/* ==========================================================================
   KEEP CONTENT ABOVE GRAPHICS
   ========================================================================== */

.finish-phase__inner {
    position:
        relative;

    z-index:
        3;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .finish-logic__split::before {
        display:
            none;
    }

    .finish-phase--protect::after {
        width:
            72px;

        height:
            72px;

        right:
            5%;

        opacity:
            0.22;
    }

    .finish-phase--protect
    .finish-phase__inner::before {
        right:
            0;

        opacity:
            0.13;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .finish-phase--correct::after {
        opacity:
            0.48;
    }

    .finish-phase--protect::after {
        width:
            54px;

        height:
            54px;

        opacity:
            0.18;
    }

    .finish-phase--protect
    .finish-phase__inner::before {
        width:
            170px;

        height:
            150px;

        opacity:
            0.10;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION SECTION 02 GRAPHICS CLEANUP

   Remove ruler-like reflection lines.
   Replace with curved paint reflections and organic water graphics.
   ========================================================================== */


/* ==========================================================================
   REMOVE THE CENTER CURVE EXPERIMENT
   ========================================================================== */

.finish-logic__split::before {
    content:
        none !important;

    display:
        none !important;
}


/* ==========================================================================
   CORRECTION SIDE

   Broad curved clear-coat reflection.
   No straight streaks.
   ========================================================================== */

.finish-phase--correct::before {
    content:
        "" !important;

    position:
        absolute !important;

    z-index:
        1 !important;

    top:
        -210px !important;

    right:
        -590px !important;

    width:
        920px !important;

    height:
        980px !important;

    border:
        2px solid
        rgba(125, 205, 245, 0.14) !important;

    border-radius:
        50% !important;

    background:
        none !important;

    box-shadow:
        0 0 70px rgba(94, 190, 237, 0.08),
        inset 0 0 75px rgba(255,255,255,0.025) !important;

    transform:
        rotate(-12deg) !important;

    opacity:
        1 !important;

    pointer-events:
        none !important;
}


.finish-phase--correct::after {
    content:
        "" !important;

    position:
        absolute !important;

    z-index:
        1 !important;

    left:
        -250px !important;

    bottom:
        -340px !important;

    width:
        720px !important;

    height:
        620px !important;

    background:
        radial-gradient(
            ellipse at 52% 48%,
            rgba(102, 197, 241, 0.13) 0%,
            rgba(102, 197, 241, 0.07) 28%,
            rgba(255,255,255,0.025) 47%,
            transparent 70%
        ) !important;

    filter:
        blur(10px) !important;

    transform:
        rotate(-14deg) !important;

    opacity:
        0.9 !important;

    pointer-events:
        none !important;
}


/* ==========================================================================
   PROTECTION SIDE

   Replace the diagonal line with a soft ceramic sheen.
   ========================================================================== */

.finish-phase--protect::before {
    content:
        "" !important;

    position:
        absolute !important;

    z-index:
        1 !important;

    top:
        -280px !important;

    left:
        -470px !important;

    width:
        850px !important;

    height:
        850px !important;

    border:
        2px solid
        rgba(61, 157, 211, 0.09) !important;

    border-radius:
        50% !important;

    background:
        none !important;

    box-shadow:
        0 0 85px rgba(83, 175, 224, 0.06) !important;

    transform:
        none !important;

    pointer-events:
        none !important;
}


/* Existing large bead stays, just tune it */

.finish-phase--protect::after {
    top:
        7% !important;

    right:
        4% !important;

    width:
        78px !important;

    height:
        78px !important;

    opacity:
        0.24 !important;

    transform:
        rotate(8deg) !important;
}


/* ==========================================================================
   ORGANIC WATER RIBBON

   Actual existing water artwork.
   ========================================================================== */

.finish-phase--protect
.finish-phase__inner::after {
    content:
        "";

    position:
        absolute;

    z-index:
        0;

    right:
        -170px;

    bottom:
        -45px;

    width:
        650px;

    height:
        270px;

    background:
        url("../images/maintenance-water-stream-top.webp")
        center / contain
        no-repeat;

    opacity:
        0.075;

    transform:
        rotate(-8deg);

    pointer-events:
        none;
}


/* ==========================================================================
   BEAD CLUSTER TUNE
   ========================================================================== */

.finish-phase--protect
.finish-phase__inner::before {
    right:
        -0.5rem !important;

    bottom:
        5.5rem !important;

    opacity:
        0.13 !important;
}


/* ==========================================================================
   CONTENT ABOVE ALL DECORATION
   ========================================================================== */

.finish-phase__inner > * {
    position:
        relative;

    z-index:
        2;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .finish-phase--correct::before {
        right:
            -650px !important;
    }

    .finish-phase--protect
    .finish-phase__inner::after {
        right:
            -220px;

        width:
            560px;

        opacity:
            0.06;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .finish-phase--correct::before {
        width:
            650px !important;

        height:
            700px !important;

        right:
            -500px !important;

        opacity:
            0.75 !important;
    }

    .finish-phase--correct::after {
        opacity:
            0.60 !important;
    }

    .finish-phase--protect::before {
        width:
            600px !important;

        height:
            600px !important;

        left:
            -470px !important;
    }

    .finish-phase--protect
    .finish-phase__inner::after {
        width:
            430px;

        height:
            190px;

        right:
            -180px;

        opacity:
            0.05;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION SECTION 01-02 UNIFIED FLOW

   Make 01 and 02 feel like one connected composition:
   - remove hard split feeling
   - fade from blue into white
   - run water ribbon across both sides
   ========================================================================== */


/* ==========================================================================
   ONE SHARED BACKGROUND ACROSS BOTH HALVES
   ========================================================================== */

.finish-logic__split {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            #02111f 0%,
            #07223a 18%,
            #0d3655 33%,
            #1b4a6c 43%,
            #6d8faa 49%,
            #c8d9e6 54%,
            #dfe9f1 63%,
            #e8f0f5 100%
        ) !important;
}


/* subtle atmospheric glow so the merge feels smoother */
.finish-logic__split::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 44% 52%,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0.08) 12%,
            rgba(255,255,255,0.03) 22%,
            transparent 38%
        ),
        linear-gradient(
            90deg,
            rgba(3,16,29,0.06) 0%,
            transparent 30%,
            rgba(255,255,255,0.10) 49%,
            transparent 68%
        );
}


/* ==========================================================================
   REMOVE THE "TWO SEPARATE CARDS" FEEL
   ========================================================================== */

.finish-phase--correct,
.finish-phase--protect {
    position: relative;
    background: transparent !important;
    overflow: hidden;
}

.finish-phase--correct {
    border-right: none !important;
}

.finish-phase--correct .finish-phase__inner,
.finish-phase--protect .finish-phase__inner {
    position: relative;
    z-index: 2;
}


/* ==========================================================================
   LEFT SIDE READABILITY OVER THE DARK AREA
   ========================================================================== */

.finish-phase--correct .finish-phase__inner::before {
    content: "";
    position: absolute;
    inset: -4rem -2rem -4rem -2rem;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(2,12,22,0.72) 0%,
            rgba(4,20,35,0.54) 36%,
            rgba(7,31,53,0.24) 58%,
            rgba(11,43,70,0.00) 82%
        );
}

.finish-phase--correct .finish-phase__inner > * {
    position: relative;
    z-index: 2;
}


/* ==========================================================================
   WATER RIBBON CONNECTING 01 TO 02
   ========================================================================== */

.finish-logic__split::before {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;

    left: 33%;
    top: 6%;

    width: 58%;
    height: 36%;

    background:
        url("../images/maintenance-water-stream-top.webp")
        center / contain
        no-repeat;

    opacity: 0.11;
    transform: rotate(-4deg);
    filter: blur(0.2px);
}


/* second softer ribbon lower down so the two sides feel tied together */
.finish-phase--protect .finish-phase__inner::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;

    left: -28%;
    bottom: 8%;

    width: 78%;
    height: 20%;

    background:
        url("../images/maintenance-water-stream-top.webp")
        center / contain
        no-repeat;

    opacity: 0.055;
    transform: rotate(8deg) scaleX(-1);
}


/* ==========================================================================
   TONE DOWN THE OLD EXPERIMENTAL STUFF SO IT DOESN'T FIGHT THE NEW LOOK
   ========================================================================== */

.finish-phase--correct::before {
    opacity: 0.32 !important;
    right: -640px !important;
}

.finish-phase--correct::after {
    opacity: 0.32 !important;
}

.finish-phase--protect::before {
    opacity: 0.18 !important;
}

.finish-phase--protect::after {
    opacity: 0.18 !important;
}


/* ==========================================================================
   KEEP THE LARGE GHOST NUMBERS, BUT DON’T LET THEM SCREAM
   ========================================================================== */

.finish-phase__number {
    opacity: 0.10 !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {
    .finish-logic__split {
        background:
            linear-gradient(
                180deg,
                #03111d 0%,
                #0c3554 42%,
                #bfd3e1 54%,
                #e8f0f5 100%
            ) !important;
    }

    .finish-logic__split::before {
        left: 18%;
        top: 39%;
        width: 78%;
        height: 16%;
        opacity: 0.08;
        transform: rotate(-2deg);
    }

    .finish-phase--protect .finish-phase__inner::after {
        left: 16%;
        bottom: 4%;
        width: 55%;
        height: 14%;
        opacity: 0.045;
    }

    .finish-phase--correct .finish-phase__inner::before {
        inset: -3rem -2rem 0 -2rem;
        background:
            linear-gradient(
                180deg,
                rgba(2,12,22,0.58) 0%,
                rgba(4,20,35,0.42) 38%,
                rgba(7,31,53,0.14) 68%,
                transparent 100%
            );
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {
    .finish-logic__split::before,
    .finish-phase--protect .finish-phase__inner::after {
        display: none;
    }

    .finish-phase--correct .finish-phase__inner::before {
        inset: -2rem -1rem 0 -1rem;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION SECTION 02 CLEAN UNIFIED DESIGN

   One composition.
   One real water graphic.
   No CSS science fair.
   ========================================================================== */


/* ==========================================================================
   CLEAN SHARED BACKGROUND
   ========================================================================== */

.finish-logic__split {
    position: relative !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            90deg,
            #031521 0%,
            #062238 25%,
            #0d3858 39%,
            #426c89 47%,
            #8eacbf 53%,
            #cbdce7 59%,
            #e4edf3 68%,
            #edf4f8 100%
        ) !important;
}


/* ==========================================================================
   REMOVE ALL PREVIOUS EXPERIMENTAL GRAPHICS
   ========================================================================== */

.finish-logic__split::after,
.finish-phase--correct::before,
.finish-phase--correct::after,
.finish-phase--protect::before,
.finish-phase--protect::after,
.finish-phase--correct .finish-phase__inner::before,
.finish-phase--protect .finish-phase__inner::before,
.finish-phase--protect .finish-phase__inner::after {
    content:
        none !important;

    display:
        none !important;
}


/* ==========================================================================
   REAL WATER RIBBON

   This is the actual artwork crossing both halves.
   ========================================================================== */

.finish-logic__split::before {
    content:
        "" !important;

    display:
        block !important;

    position:
        absolute !important;

    z-index:
        1 !important;

    left:
        27% !important;

    top:
        17% !important;

    width:
        66% !important;

    height:
        34% !important;

    pointer-events:
        none !important;

    background:
        url("../images/maintenance-water-stream-top.webp")
        center / contain
        no-repeat !important;

    opacity:
        0.16 !important;

    transform:
        rotate(-5deg) !important;

    filter:
        none !important;
}


/* ==========================================================================
   MAKE BOTH HALVES TRANSPARENT

   They now live on one shared background instead of two cards.
   ========================================================================== */

.finish-phase--correct,
.finish-phase--protect {
    background:
        transparent !important;

    border:
        0 !important;
}


/* ==========================================================================
   LEFT-SIDE READABILITY

   Very soft dark reinforcement only behind text.
   No visible box.
   ========================================================================== */

.finish-phase--correct {
    background:
        linear-gradient(
            90deg,
            rgba(2,14,24,0.28) 0%,
            rgba(2,14,24,0.12) 62%,
            transparent 100%
        ) !important;
}


/* ==========================================================================
   CONTENT ABOVE WATER ART
   ========================================================================== */

.finish-phase__inner {
    position:
        relative !important;

    z-index:
        3 !important;
}


/* ==========================================================================
   GHOST NUMBERS

   Keep them visible enough to feel intentional.
   ========================================================================== */

.finish-phase--correct .finish-phase__number {
    color:
        rgba(126,199,239,0.11) !important;

    opacity:
        1 !important;
}


.finish-phase--protect .finish-phase__number {
    color:
        rgba(17,99,155,0.09) !important;

    opacity:
        1 !important;
}


/* ==========================================================================
   SUBTLE BEADS ON THE PROTECTION SIDE

   Real bubble artwork. No fake circles.
   ========================================================================== */

.finish-phase--protect .finish-phase__inner {
    background-image:
        url("../images/services-bubble-small.webp"),
        url("../images/services-bubble-medium.webp"),
        url("../images/services-bubble-small.webp");

    background-repeat:
        no-repeat;

    background-size:
        26px 26px,
        52px 52px,
        20px 20px;

    background-position:
        94% 72%,
        88% 83%,
        76% 91%;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .finish-logic__split {
        background:
            linear-gradient(
                180deg,
                #031521 0%,
                #0d3858 43%,
                #9db7c8 51%,
                #dfeaf1 58%,
                #edf4f8 100%
            ) !important;
    }


    .finish-logic__split::before {
        left:
            8% !important;

        top:
            42% !important;

        width:
            86% !important;

        height:
            18% !important;

        opacity:
            0.12 !important;

        transform:
            rotate(-2deg) !important;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .finish-logic__split::before {
        top:
            43% !important;

        height:
            15% !important;

        opacity:
            0.09 !important;
    }


    .finish-phase--protect .finish-phase__inner {
        background-size:
            20px 20px,
            38px 38px,
            16px 16px;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION SECTION 02 FINAL FLOW TUNE
   ========================================================================== */


/* ==========================================================================
   BROADER, SOFTER DARK-TO-LIGHT TRANSITION

   Spread the crossover so there is no obvious vertical fade stripe.
   ========================================================================== */

.finish-logic__split {
    background:
        linear-gradient(
            90deg,
            #031521 0%,
            #062238 22%,
            #0b3150 34%,
            #1c4b6b 42%,
            #446f8c 49%,
            #7899ae 55%,
            #a9c0cf 61%,
            #ccdde7 68%,
            #e1ebf1 76%,
            #edf4f8 100%
        ) !important;
}


/* ==========================================================================
   WATER RIBBON

   Move it below the headline zone so it connects the composition
   without crossing through the main typography.
   ========================================================================== */

.finish-logic__split::before {
    left:
        24% !important;

    top:
        31% !important;

    width:
        70% !important;

    height:
        31% !important;

    opacity:
        0.115 !important;

    transform:
        rotate(-3deg) !important;
}


/* ==========================================================================
   KEEP THE LEFT SIDE DARK ENOUGH FOR COPY

   Very subtle reinforcement only.
   ========================================================================== */

.finish-phase--correct {
    background:
        linear-gradient(
            90deg,
            rgba(1,12,21,0.20) 0%,
            rgba(2,16,28,0.10) 54%,
            transparent 88%
        ) !important;
}


/* ==========================================================================
   SLIGHTLY SOFTEN THE 02 GHOST NUMBER

   It should support the right side without becoming another headline.
   ========================================================================== */

.finish-phase--protect .finish-phase__number {
    color:
        rgba(17,99,155,0.075) !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .finish-logic__split::before {
        top:
            45% !important;

        left:
            8% !important;

        width:
            86% !important;

        height:
            15% !important;

        opacity:
            0.09 !important;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .finish-logic__split::before {
        opacity:
            0.07 !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION WATER RIBBON FINAL POSITION
   ========================================================================== */

/*
   Keep the unified gradient exactly as-is.

   Move the ribbon out of the headline zone and let it connect
   the two halves through the quieter middle/lower area.
*/

.finish-logic__split::before {
    left:
        22% !important;

    top:
        48% !important;

    width:
        74% !important;

    height:
        25% !important;

    opacity:
        0.085 !important;

    transform:
        rotate(-2deg) !important;

    background-position:
        center center !important;
}


/* Keep all text clearly above the artwork */

.finish-phase__inner {
    position:
        relative !important;

    z-index:
        3 !important;
}


/* Tablet */

@media (max-width: 1100px) {

    .finish-logic__split::before {
        top:
            47% !important;

        left:
            5% !important;

        width:
            90% !important;

        height:
            17% !important;

        opacity:
            0.075 !important;
    }
}


/* Mobile */

@media (max-width: 700px) {

    .finish-logic__split::before {
        top:
            48% !important;

        opacity:
            0.06 !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION TRANSITION SMOOTHING FINAL
   ========================================================================== */

/*
   Smooth the dark-to-light join so the remaining faint vertical bands
   disappear. Keep the ribbon, bubbles, content, and layout intact.
*/

.finish-logic__split {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
}

.finish-logic__split::after {
    content: "" !important;
    position: absolute !important;
    inset: -8% 26% -8% 24% !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background:
        linear-gradient(
            90deg,
            rgba(0, 31, 56, 0.00) 0%,
            rgba(7, 54, 92, 0.18) 18%,
            rgba(28, 82, 125, 0.26) 34%,
            rgba(72, 119, 157, 0.18) 48%,
            rgba(173, 197, 215, 0.14) 62%,
            rgba(222, 231, 238, 0.08) 76%,
            rgba(240, 245, 249, 0.00) 100%
        ) !important;
    filter: blur(30px) !important;
    opacity: 1 !important;
}

/* Keep the water ribbon above the smoothing layer */

.finish-logic__split::before {
    z-index: 2 !important;
}

/* Keep the actual content above both decorative layers */

.finish-phase,
.finish-phase__inner {
    position: relative !important;
    z-index: 3 !important;
}

/* Tablet */

@media (max-width: 1100px) {
    .finish-logic__split::after {
        inset: -6% 18% -6% 18% !important;
        filter: blur(24px) !important;
    }
}

/* Mobile */

@media (max-width: 700px) {
    .finish-logic__split::after {
        inset: -4% 8% -4% 8% !important;
        filter: blur(18px) !important;
        opacity: 0.8 !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION SURFACE BEHAVIOR
   ========================================================================== */

.surface-behavior {
    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            #03111d 0%,
            #062237 52%,
            #0b304a 100%
        );

    color:
        #ffffff;
}


/* ==========================================================================
   REAL WATER RIBBON
   ========================================================================== */

.surface-behavior__water {
    position:
        absolute;

    z-index:
        0;

    top:
        -4%;

    right:
        -8%;

    width:
        74%;

    height:
        42%;

    background:
        url("../images/maintenance-water-stream-top.webp")
        center / contain
        no-repeat;

    opacity:
        0.13;

    transform:
        rotate(-6deg);

    pointer-events:
        none;
}


/* ==========================================================================
   REAL WATER BEADS
   ========================================================================== */

.surface-behavior__beads {
    position:
        absolute;

    z-index:
        0;

    right:
        3%;

    bottom:
        7%;

    width:
        320px;

    height:
        320px;

    background-image:
        url("../images/services-bubble-small.webp"),
        url("../images/services-bubble-medium.webp"),
        url("../images/services-bubble-small.webp"),
        url("../images/services-bubble-small.webp");

    background-repeat:
        no-repeat;

    background-size:
        30px 30px,
        72px 72px,
        22px 22px,
        42px 42px;

    background-position:
        8% 74%,
        56% 38%,
        82% 80%,
        92% 18%;

    opacity:
        0.26;

    pointer-events:
        none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

.surface-behavior__inner {
    position:
        relative;

    z-index:
        2;

    padding-top:
        clamp(6rem, 8vw, 9rem);

    padding-bottom:
        clamp(5rem, 7vw, 7rem);
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.surface-behavior__intro {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(340px, 0.85fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items:
        end;

    padding-bottom:
        clamp(4rem, 6vw, 6rem);
}


.surface-behavior__eyebrow {
    color:
        #ffd447;

    font-size:
        0.7rem;

    font-weight:
        950;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.surface-behavior h2 {
    margin-top:
        1rem;

    color:
        #ffffff;

    font-size:
        clamp(4.3rem, 6vw, 6.8rem);

    font-weight:
        950;

    line-height:
        0.89;

    letter-spacing:
        -0.06em;
}


.surface-behavior h2 span {
    display:
        block;

    margin-top:
        0.08em;

    color:
        #7bc7ef;
}


.surface-behavior__intro-copy {
    max-width:
        560px;

    padding-bottom:
        0.45rem;
}


.surface-behavior__intro-copy p {
    color:
        rgba(255,255,255,0.82);

    font-size:
        1rem;

    font-weight:
        500;

    line-height:
        1.7;
}


.surface-behavior__intro-copy strong {
    display:
        block;

    margin-top:
        1.35rem;

    padding-top:
        1.25rem;

    border-top:
        1px solid rgba(255,255,255,0.18);

    color:
        #ffffff;

    font-size:
        0.92rem;

    font-weight:
        850;
}


/* ==========================================================================
   ROW SYSTEM
   ========================================================================== */

.surface-behavior__rows {
    border-top:
        1px solid rgba(255,255,255,0.18);
}


.surface-behavior__rows article {
    display:
        grid;

    grid-template-columns:
        60px
        minmax(220px, 0.65fr)
        minmax(320px, 1fr)
        minmax(180px, 0.55fr);

    gap:
        clamp(1.5rem, 3vw, 3.5rem);

    align-items:
        center;

    min-height:
        118px;

    border-bottom:
        1px solid rgba(255,255,255,0.16);
}


.surface-behavior__number {
    color:
        #7bc7ef;

    font-size:
        0.68rem;

    font-weight:
        950;
}


.surface-behavior__rows h3 {
    color:
        #ffffff;

    font-size:
        clamp(1.35rem, 1.6vw, 1.7rem);

    font-weight:
        900;

    letter-spacing:
        -0.025em;
}


.surface-behavior__rows p {
    color:
        rgba(255,255,255,0.72);

    font-size:
        0.91rem;

    font-weight:
        480;

    line-height:
        1.55;
}


.surface-behavior__rows strong {
    color:
        #ffd447;

    font-size:
        0.76rem;

    font-weight:
        850;

    line-height:
        1.45;

    text-align:
        right;
}


/* ==========================================================================
   FOOTER LINE
   ========================================================================== */

.surface-behavior__footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        3rem;

    padding-top:
        2.3rem;
}


.surface-behavior__footer p {
    color:
        rgba(255,255,255,0.72);

    font-size:
        0.88rem;

    font-weight:
        520;
}


.surface-behavior__footer strong {
    color:
        #ffffff;

    font-weight:
        850;
}


.surface-behavior__link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

    flex:
        0 0 auto;

    color:
        #ffffff;

    font-size:
        0.82rem;

    font-weight:
        900;

    text-decoration:
        none;

    text-transform:
        uppercase;
}


.surface-behavior__link span {
    color:
        #ffd447;

    font-size:
        1.15rem;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .surface-behavior__intro {
        grid-template-columns:
            1fr;

        gap:
            2.5rem;
    }


    .surface-behavior__rows article {
        grid-template-columns:
            44px
            minmax(180px, 0.75fr)
            minmax(0, 1.25fr);

        padding:
            1.5rem 0;
    }


    .surface-behavior__rows strong {
        grid-column:
            2 / -1;

        text-align:
            left;
    }


    .surface-behavior__water {
        width:
            92%;

        right:
            -20%;

        opacity:
            0.10;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .surface-behavior__inner {
        padding-top:
            4.5rem;

        padding-bottom:
            4.5rem;
    }


    .surface-behavior h2 {
        font-size:
            clamp(3.2rem, 14vw, 4.5rem);
    }


    .surface-behavior__rows article {
        grid-template-columns:
            36px
            1fr;

        gap:
            0.7rem 1rem;

        padding:
            1.5rem 0;
    }


    .surface-behavior__rows p,
    .surface-behavior__rows strong {
        grid-column:
            2;
    }


    .surface-behavior__footer {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .surface-behavior__water {
        top:
            -2%;

        right:
            -35%;

        width:
            130%;

        opacity:
            0.08;
    }


    .surface-behavior__beads {
        right:
            -90px;

        bottom:
            3%;

        opacity:
            0.18;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION ULTRAWIDE CONTENT PULL

   Pull 01 and 02 slightly toward the center on very wide displays.
   Background, ribbon, bubbles, and gradient remain untouched.
   ========================================================================== */

@media (min-width: 1800px) {

    .finish-phase--correct .finish-phase__inner {
        left:
            clamp(40px, 3vw, 72px);
    }

    .finish-phase--protect .finish-phase__inner {
        right:
            clamp(40px, 3vw, 72px);
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION ULTRAWIDE FINAL COMPOSITION

   HERO:
   Give the headline more horizontal room so ultrawide does not force
   unnecessary word stacking.

   SECTION 02:
   Pull 01 and 02 further toward one another while leaving the full-width
   gradient, water ribbon, bubbles, and artwork untouched.

   SECTION 03:
   Completely untouched.
   ========================================================================== */


@media (min-width: 1800px) {


    /* ======================================================================
       HERO
       ====================================================================== */

    .protection-cinema__copy {
        width:
            min(820px, 48vw) !important;

        max-width:
            820px !important;
    }


    .protection-cinema h1 {
        max-width:
            820px !important;

        font-size:
            clamp(4.8rem, 5.25vw, 6.5rem) !important;

        line-height:
            0.90 !important;
    }


    .protection-cinema__lead {
        max-width:
            650px !important;
    }


    /*
       Keep the copy in the normal readable site area.
       Extra monitor width belongs to the photography.
    */

    .protection-cinema__inner {
        justify-content:
            flex-start;
    }



    /* ======================================================================
       SECTION 02

       Previous ultrawide pull was too conservative.
       Bring both content groups substantially closer to center.
       ====================================================================== */

    .finish-phase--correct .finish-phase__inner {
        left:
            clamp(95px, 5.5vw, 125px) !important;
    }


    .finish-phase--protect .finish-phase__inner {
        right:
            clamp(95px, 5.5vw, 125px) !important;
    }


    /*
       Preserve comfortable reading width.
       Do not stretch either text block just because the monitor is enormous.
    */

    .finish-phase__inner {
        width:
            min(
                calc(100% - 8rem),
                680px
            ) !important;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION WIDESCREEN CENTERING

   Regular widescreen only.
   Move the two content groups together slightly to the right.

   Background, water ribbon, bubbles, typography, and section width
   remain completely untouched.
   ========================================================================== */

@media (min-width: 1280px) and (max-width: 1799px) {

    .finish-phase--correct .finish-phase__inner,
    .finish-phase--protect .finish-phase__inner {
        left:
            clamp(34px, 3vw, 52px) !important;

        right:
            auto !important;
    }
}


/* ==========================================================================
   KEEP THE EXISTING ULTRAWIDE TREATMENT SEPARATE
   ========================================================================== */

@media (min-width: 1800px) {

    .finish-phase--correct .finish-phase__inner {
        left:
            clamp(95px, 5.5vw, 125px) !important;

        right:
            auto !important;
    }

    .finish-phase--protect .finish-phase__inner {
        left:
            auto !important;

        right:
            clamp(95px, 5.5vw, 125px) !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION SECTION 02 CENTER ANCHOR FINAL

   Do not depend on guessed widescreen / ultrawide breakpoints.

   Both readable blocks stay near the center seam while the full-width
   gradient and water artwork are allowed to use the entire viewport.
   ========================================================================== */

@media (min-width: 1101px) {

    /* Cancel all previous left/right nudging experiments */

    .finish-phase--correct .finish-phase__inner,
    .finish-phase--protect .finish-phase__inner {
        left:
            auto !important;

        right:
            auto !important;

        width:
            min(
                calc(100% - 3rem),
                620px
            ) !important;
    }


    /* 01 anchors toward the center from the left half */

    .finish-phase--correct .finish-phase__inner {
        margin-left:
            auto !important;

        margin-right:
            clamp(
                1.5rem,
                2.2vw,
                3rem
            ) !important;
    }


    /* 02 anchors toward the center from the right half */

    .finish-phase--protect .finish-phase__inner {
        margin-left:
            clamp(
                1.5rem,
                2.2vw,
                3rem
            ) !important;

        margin-right:
            auto !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION RESPONSIVE POSITIONING BY ASPECT

   NORMAL WIDESCREEN:
   Move the entire 01 + 02 composition to the right.

   ULTRAWIDE:
   Keep the composition centered, but spread 01 and 02 farther apart.

   This replaces the previous breakpoint guessing.
   ========================================================================== */


/* ==========================================================================
   RESET OLD POSITION EXPERIMENTS
   ========================================================================== */

@media (min-width: 1101px) {

    .finish-phase--correct .finish-phase__inner,
    .finish-phase--protect .finish-phase__inner {
        left:
            auto !important;

        right:
            auto !important;

        translate:
            0 0;

        width:
            min(
                calc(100% - 3rem),
                620px
            ) !important;
    }


    .finish-phase--correct .finish-phase__inner {
        margin-left:
            auto !important;

        margin-right:
            2rem !important;
    }


    .finish-phase--protect .finish-phase__inner {
        margin-left:
            2rem !important;

        margin-right:
            auto !important;
    }
}


/* ==========================================================================
   NORMAL WIDESCREEN

   16:9-ish monitors:
   shift BOTH groups right as one composition.
   ========================================================================== */

@media
    (min-width: 1101px)
    and (max-aspect-ratio: 2.05/1) {

    .finish-phase--correct .finish-phase__inner,
    .finish-phase--protect .finish-phase__inner {
        translate:
            clamp(55px, 4vw, 78px) 0 !important;
    }
}


/* ==========================================================================
   ULTRAWIDE

   Wider than roughly 21:10:
   left group moves outward left,
   right group moves outward right.
   ========================================================================== */

@media
    (min-width: 1101px)
    and (min-aspect-ratio: 2.06/1) {

    .finish-phase--correct .finish-phase__inner {
        translate:
            clamp(-125px, -5vw, -80px) 0 !important;
    }


    .finish-phase--protect .finish-phase__inner {
        translate:
            clamp(80px, 5vw, 125px) 0 !important;
    }
}


/* ==========================================================================
   TABLET / MOBILE

   No special horizontal positioning.
   ========================================================================== */

@media (max-width: 1100px) {

    .finish-phase--correct .finish-phase__inner,
    .finish-phase--protect .finish-phase__inner {
        translate:
            0 0 !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION PREP PROCESS
   ========================================================================== */

.protection-process {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f8fcfe 0%,
            #edf6fb 55%,
            #e1eef5 100%
        );

    color:
        #061725;
}


/* ==========================================================================
   REAL WATER ARTWORK
   ========================================================================== */

.protection-process__water {
    position: absolute;
    z-index: 0;

    top: -90px;
    left: -7%;

    width: 72%;
    height: 360px;

    background:
        url("../images/maintenance-water-stream-top.webp")
        center / contain
        no-repeat;

    opacity: 0.085;

    transform:
        rotate(5deg);

    pointer-events: none;
}


.protection-process__beads {
    position: absolute;
    z-index: 0;

    right: 4%;
    bottom: 7%;

    width: 260px;
    height: 260px;

    background-image:
        url("../images/services-bubble-small.webp"),
        url("../images/services-bubble-medium.webp"),
        url("../images/services-bubble-small.webp");

    background-repeat:
        no-repeat;

    background-size:
        24px 24px,
        60px 60px,
        32px 32px;

    background-position:
        12% 74%,
        65% 40%,
        94% 82%;

    opacity: 0.19;

    pointer-events: none;
}


/* ==========================================================================
   CAPPED COMPOSITION

   Deliberately narrower than the full site shell so widescreen and
   ultrawide keep the same readable relationship.
   ========================================================================== */

.protection-process__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            calc(100% - 64px),
            1320px
        );

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(380px, 0.82fr)
        minmax(540px, 1.18fr);

    gap:
        clamp(5rem, 8vw, 9rem);

    padding-top:
        clamp(7rem, 9vw, 10rem);

    padding-bottom:
        clamp(6rem, 8vw, 8rem);
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.protection-process__intro {
    align-self:
        start;

    position:
        sticky;

    top:
        8rem;
}


.protection-process__eyebrow {
    color:
        #14669f;

    font-size:
        0.7rem;

    font-weight:
        950;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.protection-process h2 {
    margin-top:
        1rem;

    color:
        #061725;

    font-size:
        clamp(3.9rem, 4.7vw, 5.8rem);

    font-weight:
        950;

    line-height:
        0.90;

    letter-spacing:
        -0.06em;
}


.protection-process h2 span {
    display:
        block;

    color:
        #176aa5;
}


.protection-process h2 strong {
    display:
        block;

    margin-top:
        0.28em;

    color:
        #061725;

    font:
        inherit;

    font-size:
        0.56em;

    line-height:
        1.02;

    letter-spacing:
        -0.04em;
}


.protection-process__lead {
    max-width:
        500px;

    margin-top:
        1.9rem;

    color:
        #29495d;

    font-size:
        1rem;

    font-weight:
        500;

    line-height:
        1.7;
}


/* ==========================================================================
   PROCESS RAIL
   ========================================================================== */

.protection-process__steps {
    border-top:
        1px solid rgba(6,23,37,0.18);
}


.protection-process__steps article {
    display:
        grid;

    grid-template-columns:
        74px
        minmax(0,1fr);

    gap:
        1.5rem;

    padding:
        2.3rem
        0;

    border-bottom:
        1px solid rgba(6,23,37,0.16);
}


.protection-process__number {
    color:
        #7abfe8;

    font-size:
        1rem;

    font-weight:
        950;

    line-height:
        1.4;
}


.protection-process__label {
    color:
        #14669f;

    font-size:
        0.67rem !important;

    font-weight:
        950 !important;

    letter-spacing:
        0.08em;

    line-height:
        1.2 !important;

    text-transform:
        uppercase;
}


.protection-process__steps h3 {
    margin-top:
        0.45rem;

    color:
        #061725;

    font-size:
        clamp(1.55rem, 1.8vw, 2rem);

    font-weight:
        900;

    line-height:
        1.15;

    letter-spacing:
        -0.03em;
}


.protection-process__steps article p:last-child {
    max-width:
        620px;

    margin-top:
        0.75rem;

    color:
        #3c5a6d;

    font-size:
        0.92rem;

    font-weight:
        500;

    line-height:
        1.6;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.protection-process__footer {
    grid-column:
        1 / -1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        3rem;

    margin-top:
        1rem;

    padding-top:
        2rem;

    border-top:
        1px solid rgba(6,23,37,0.18);
}


.protection-process__footer p {
    color:
        #203f53;

    font-size:
        0.9rem;

    font-weight:
        750;
}


.protection-process__footer a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.6rem;

    flex:
        0 0 auto;

    color:
        #061725;

    font-size:
        0.82rem;

    font-weight:
        900;

    text-decoration:
        none;

    text-transform:
        uppercase;
}


.protection-process__footer a span {
    color:
        #176aa5;

    font-size:
        1.2rem;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .protection-process__inner {
        grid-template-columns:
            1fr;

        gap:
            4rem;

        width:
            min(
                calc(100% - 48px),
                820px
            );
    }


    .protection-process__intro {
        position:
            relative;

        top:
            auto;
    }


    .protection-process__water {
        width:
            105%;

        left:
            -25%;

        opacity:
            0.07;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .protection-process__inner {
        width:
            min(
                calc(100% - 32px),
                680px
            );

        padding-top:
            5rem;

        padding-bottom:
            5rem;
    }


    .protection-process h2 {
        font-size:
            clamp(3.2rem, 13vw, 4.5rem);
    }


    .protection-process__steps article {
        grid-template-columns:
            46px
            minmax(0,1fr);

        gap:
            1rem;

        padding:
            1.8rem
            0;
    }


    .protection-process__footer {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .protection-process__water {
        top:
            -50px;

        width:
            135%;

        opacity:
            0.055;
    }


    .protection-process__beads {
        right:
            -80px;

        opacity:
            0.14;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION PROCESS HEADLINE WRAP

   Keep "The coating is" together so the intro does not leave
   "is" stranded on its own line.
   ========================================================================== */

.protection-process h2 {
    max-width:
        560px !important;
}


/*
   The first text run stays together naturally at desktop widths.
   "step four." remains its own blue line.
*/

@media (min-width: 1101px) {

    .protection-process h2 {
        font-size:
            clamp(3.7rem, 4.35vw, 5.35rem) !important;

        line-height:
            0.92 !important;
    }
}


/* Preserve natural responsive wrapping on smaller screens */

@media (max-width: 1100px) {

    .protection-process h2 {
        max-width:
            100% !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION COVERAGE LEVELS
   ========================================================================== */

.coverage-levels {
    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            #03111d 0%,
            #06243a 52%,
            #0b3553 100%
        );

    color:
        #ffffff;
}


/* ==========================================================================
   REAL WATER ART
   ========================================================================== */

.coverage-levels__water {
    position:
        absolute;

    z-index:
        0;

    top:
        -80px;

    right:
        -8%;

    width:
        72%;

    height:
        360px;

    background:
        url("../images/maintenance-water-stream-top.webp")
        center / contain
        no-repeat;

    opacity:
        0.12;

    transform:
        rotate(-4deg);

    pointer-events:
        none;
}


.coverage-levels__beads {
    position:
        absolute;

    z-index:
        0;

    left:
        3%;

    bottom:
        5%;

    width:
        280px;

    height:
        280px;

    background-image:
        url("../images/services-bubble-small.webp"),
        url("../images/services-bubble-medium.webp"),
        url("../images/services-bubble-small.webp");

    background-repeat:
        no-repeat;

    background-size:
        28px 28px,
        66px 66px,
        20px 20px;

    background-position:
        8% 74%,
        58% 36%,
        92% 83%;

    opacity:
        0.21;

    pointer-events:
        none;
}


/* ==========================================================================
   CENTERED COMPOSITION
   ========================================================================== */

.coverage-levels__inner {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(100% - 64px),
            1320px
        );

    margin:
        0 auto;

    padding-top:
        clamp(7rem, 9vw, 9rem);

    padding-bottom:
        clamp(6rem, 8vw, 8rem);
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.coverage-levels__intro {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(340px, 0.95fr);

    gap:
        clamp(4rem, 8vw, 8rem);

    align-items:
        end;

    padding-bottom:
        clamp(4rem, 6vw, 5.5rem);
}


.coverage-levels__eyebrow {
    color:
        #ffd447;

    font-size:
        0.7rem;

    font-weight:
        950;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.coverage-levels h2 {
    margin-top:
        1rem;

    max-width:
        720px;

    color:
        #ffffff;

    font-size:
        clamp(4rem, 5vw, 6rem);

    font-weight:
        950;

    line-height:
        0.90;

    letter-spacing:
        -0.06em;
}


.coverage-levels h2 span {
    display:
        block;

    margin-top:
        0.08em;

    color:
        #7bc8f0;
}


.coverage-levels__intro-copy {
    max-width:
        540px;
}


.coverage-levels__intro-copy p {
    color:
        rgba(255,255,255,0.82);

    font-size:
        1rem;

    font-weight:
        500;

    line-height:
        1.7;
}


.coverage-levels__intro-copy strong {
    display:
        block;

    margin-top:
        1.4rem;

    padding-top:
        1.25rem;

    border-top:
        1px solid rgba(255,255,255,0.18);

    color:
        #ffffff;

    font-size:
        0.9rem;

    font-weight:
        850;
}


/* ==========================================================================
   COVERAGE ROWS
   ========================================================================== */

.coverage-levels__rows {
    border-top:
        1px solid rgba(255,255,255,0.20);
}


.coverage-levels__rows article {
    display:
        grid;

    grid-template-columns:
        60px
        minmax(260px, 0.8fr)
        minmax(360px, 1fr)
        minmax(220px, 0.65fr);

    gap:
        clamp(1.5rem, 3vw, 3.5rem);

    align-items:
        center;

    min-height:
        155px;

    border-bottom:
        1px solid rgba(255,255,255,0.17);
}


.coverage-levels__number {
    color:
        #7bc8f0;

    font-size:
        0.72rem;

    font-weight:
        950;
}


.coverage-levels__name > p {
    color:
        #ffd447;

    font-size:
        0.66rem !important;

    font-weight:
        950 !important;

    letter-spacing:
        0.08em;

    line-height:
        1.2 !important;

    text-transform:
        uppercase;
}


.coverage-levels__name h3 {
    margin-top:
        0.45rem;

    color:
        #ffffff;

    font-size:
        clamp(1.55rem, 1.8vw, 1.95rem);

    font-weight:
        900;

    line-height:
        1.1;

    letter-spacing:
        -0.03em;
}


.coverage-levels__description p {
    color:
        rgba(255,255,255,0.74);

    font-size:
        0.92rem;

    font-weight:
        500;

    line-height:
        1.6;
}


.coverage-levels__fit {
    text-align:
        right;
}


.coverage-levels__fit span {
    display:
        block;

    color:
        #7bc8f0;

    font-size:
        0.63rem;

    font-weight:
        950;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.coverage-levels__fit strong {
    display:
        block;

    margin-top:
        0.45rem;

    color:
        #ffffff;

    font-size:
        0.84rem;

    font-weight:
        800;

    line-height:
        1.45;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.coverage-levels__footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        3rem;

    padding-top:
        2.3rem;
}


.coverage-levels__footer p {
    color:
        rgba(255,255,255,0.72);

    font-size:
        0.9rem;

    font-weight:
        500;
}


.coverage-levels__footer strong {
    color:
        #ffffff;

    font-weight:
        850;
}


.coverage-levels__footer a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.6rem;

    flex:
        0 0 auto;

    color:
        #ffffff;

    font-size:
        0.82rem;

    font-weight:
        900;

    text-decoration:
        none;

    text-transform:
        uppercase;
}


.coverage-levels__footer a span {
    color:
        #ffd447;

    font-size:
        1.2rem;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .coverage-levels__inner {
        width:
            min(
                calc(100% - 48px),
                820px
            );
    }


    .coverage-levels__intro {
        grid-template-columns:
            1fr;

        gap:
            2.5rem;
    }


    .coverage-levels__rows article {
        grid-template-columns:
            44px
            minmax(200px, 0.8fr)
            minmax(0, 1.2fr);

        padding:
            1.8rem 0;
    }


    .coverage-levels__fit {
        grid-column:
            2 / -1;

        text-align:
            left;
    }


    .coverage-levels__water {
        width:
            105%;

        right:
            -30%;

        opacity:
            0.09;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .coverage-levels__inner {
        width:
            min(
                calc(100% - 32px),
                680px
            );

        padding-top:
            5rem;

        padding-bottom:
            5rem;
    }


    .coverage-levels h2 {
        font-size:
            clamp(3.2rem, 13vw, 4.5rem);
    }


    .coverage-levels__rows article {
        grid-template-columns:
            36px
            1fr;

        gap:
            0.7rem 1rem;

        padding:
            1.7rem 0;
    }


    .coverage-levels__description,
    .coverage-levels__fit {
        grid-column:
            2;
    }


    .coverage-levels__footer {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .coverage-levels__water {
        top:
            -40px;

        width:
            140%;

        opacity:
            0.06;
    }


    .coverage-levels__beads {
        left:
            -90px;

        opacity:
            0.14;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION AFTERCARE
   ========================================================================== */

.protection-aftercare {
    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            #f8fcfe 0%,
            #eaf5fb 54%,
            #dcecf5 100%
        );

    color:
        #061725;
}


/* ==========================================================================
   WATER ART
   ========================================================================== */

.protection-aftercare__water {
    position:
        absolute;

    z-index:
        0;

    top:
        16%;

    left:
        33%;

    width:
        72%;

    height:
        340px;

    background:
        url("../images/maintenance-water-stream-top.webp")
        center / contain
        no-repeat;

    opacity:
        0.085;

    transform:
        rotate(-7deg);

    pointer-events:
        none;
}


.protection-aftercare__beads {
    position:
        absolute;

    z-index:
        0;

    right:
        4%;

    bottom:
        8%;

    width:
        260px;

    height:
        260px;

    background-image:
        url("../images/services-bubble-small.webp"),
        url("../images/services-bubble-medium.webp"),
        url("../images/services-bubble-small.webp");

    background-repeat:
        no-repeat;

    background-size:
        24px 24px,
        58px 58px,
        30px 30px;

    background-position:
        12% 80%,
        62% 38%,
        92% 76%;

    opacity:
        0.18;

    pointer-events:
        none;
}


/* ==========================================================================
   CENTERED COMPOSITION
   ========================================================================== */

.protection-aftercare__inner {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(100% - 64px),
            1320px
        );

    margin:
        0 auto;

    padding-top:
        clamp(7rem, 9vw, 9rem);

    padding-bottom:
        clamp(6rem, 8vw, 8rem);
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.protection-aftercare__intro {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(340px, 0.92fr);

    gap:
        clamp(4rem, 8vw, 8rem);

    align-items:
        end;

    padding-bottom:
        clamp(4.5rem, 6vw, 6rem);
}


.protection-aftercare__eyebrow {
    color:
        #14669f;

    font-size:
        0.7rem;

    font-weight:
        950;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.protection-aftercare h2 {
    margin-top:
        1rem;

    max-width:
        760px;

    color:
        #061725;

    font-size:
        clamp(4rem, 5vw, 6rem);

    font-weight:
        950;

    line-height:
        0.90;

    letter-spacing:
        -0.06em;
}


.protection-aftercare h2 span {
    display:
        block;

    margin-top:
        0.08em;

    color:
        #176aa5;
}


.protection-aftercare__intro-copy {
    max-width:
        540px;
}


.protection-aftercare__intro-copy p {
    color:
        #29495d;

    font-size:
        1rem;

    font-weight:
        500;

    line-height:
        1.7;
}


.protection-aftercare__intro-copy strong {
    display:
        block;

    margin-top:
        1.4rem;

    padding-top:
        1.25rem;

    border-top:
        1px solid rgba(6,23,37,0.17);

    color:
        #061725;

    font-size:
        0.9rem;

    font-weight:
        850;
}


/* ==========================================================================
   AFTERCARE RHYTHM
   ========================================================================== */

.protection-aftercare__rhythm {
    border-top:
        1px solid rgba(6,23,37,0.18);
}


.protection-aftercare__rhythm article {
    display:
        grid;

    grid-template-columns:
        58px
        minmax(260px, 0.75fr)
        minmax(360px, 1.15fr)
        minmax(190px, 0.6fr);

    gap:
        clamp(1.5rem, 3vw, 3.5rem);

    align-items:
        center;

    min-height:
        150px;

    border-bottom:
        1px solid rgba(6,23,37,0.16);
}


.protection-aftercare__number {
    color:
        #64b4e3;

    font-size:
        0.72rem;

    font-weight:
        950;
}


.protection-aftercare__rhythm h3 {
    color:
        #061725;

    font-size:
        clamp(2.7rem, 3vw, 3.6rem);

    font-weight:
        950;

    line-height:
        0.95;

    letter-spacing:
        -0.05em;
}


.protection-aftercare__rhythm p {
    color:
        #36566a;

    font-size:
        0.93rem;

    font-weight:
        500;

    line-height:
        1.62;
}


.protection-aftercare__rhythm strong {
    color:
        #176aa5;

    font-size:
        0.80rem;

    font-weight:
        850;

    line-height:
        1.45;

    text-align:
        right;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.protection-aftercare__footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        3rem;

    padding-top:
        2.4rem;
}


.protection-aftercare__footer > div > span {
    display:
        block;

    color:
        #176aa5;

    font-size:
        0.64rem;

    font-weight:
        950;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.protection-aftercare__footer > div > strong {
    display:
        block;

    margin-top:
        0.45rem;

    color:
        #061725;

    font-size:
        0.95rem;

    font-weight:
        850;
}


.protection-aftercare__footer a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.6rem;

    flex:
        0 0 auto;

    color:
        #061725;

    font-size:
        0.82rem;

    font-weight:
        900;

    text-decoration:
        none;

    text-transform:
        uppercase;
}


.protection-aftercare__footer a span {
    color:
        #176aa5;

    font-size:
        1.2rem;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .protection-aftercare__inner {
        width:
            min(
                calc(100% - 48px),
                820px
            );
    }


    .protection-aftercare__intro {
        grid-template-columns:
            1fr;

        gap:
            2.5rem;
    }


    .protection-aftercare__rhythm article {
        grid-template-columns:
            44px
            minmax(190px, 0.8fr)
            minmax(0, 1.2fr);

        padding:
            1.8rem 0;
    }


    .protection-aftercare__rhythm strong {
        grid-column:
            2 / -1;

        text-align:
            left;
    }


    .protection-aftercare__water {
        left:
            10%;

        width:
            110%;

        opacity:
            0.065;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .protection-aftercare__inner {
        width:
            min(
                calc(100% - 32px),
                680px
            );

        padding-top:
            5rem;

        padding-bottom:
            5rem;
    }


    .protection-aftercare h2 {
        font-size:
            clamp(3.2rem, 13vw, 4.5rem);
    }


    .protection-aftercare__rhythm article {
        grid-template-columns:
            36px
            1fr;

        gap:
            0.7rem 1rem;

        padding:
            1.8rem 0;
    }


    .protection-aftercare__rhythm p,
    .protection-aftercare__rhythm strong {
        grid-column:
            2;
    }


    .protection-aftercare__footer {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .protection-aftercare__water {
        left:
            -18%;

        top:
            18%;

        width:
            145%;

        opacity:
            0.05;
    }


    .protection-aftercare__beads {
        right:
            -80px;

        opacity:
            0.13;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - AFTERCARE PAYOFF READABILITY
   ========================================================================== */

.protection-aftercare__rhythm strong {
    color:
        #176aa5 !important;

    font-size:
        0.9rem !important;

    font-weight:
        900 !important;

    line-height:
        1.4 !important;

    opacity:
        1 !important;
}


/* Tablet and smaller */

@media (max-width: 1100px) {

    .protection-aftercare__rhythm strong {
        font-size:
            0.88rem !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION DECISION
   ========================================================================== */

.protection-decision {
    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            #041522 0%,
            #07263c 52%,
            #0b3551 100%
        );

    color:
        #ffffff;
}


/* ==========================================================================
   REAL WATER ART
   ========================================================================== */

.protection-decision__water {
    position:
        absolute;

    z-index:
        0;

    left:
        -8%;

    bottom:
        -70px;

    width:
        82%;

    height:
        330px;

    background:
        url("../images/maintenance-water-stream-top.webp")
        center / contain
        no-repeat;

    opacity:
        0.11;

    transform:
        rotate(5deg);

    pointer-events:
        none;
}


.protection-decision__beads {
    position:
        absolute;

    z-index:
        0;

    right:
        4%;

    top:
        12%;

    width:
        250px;

    height:
        270px;

    background-image:
        url("../images/services-bubble-medium.webp"),
        url("../images/services-bubble-small.webp"),
        url("../images/services-bubble-small.webp");

    background-repeat:
        no-repeat;

    background-size:
        64px 64px,
        24px 24px,
        34px 34px;

    background-position:
        72% 20%,
        10% 64%,
        90% 84%;

    opacity:
        0.22;

    pointer-events:
        none;
}


/* ==========================================================================
   CENTERED COMPOSITION
   ========================================================================== */

.protection-decision__inner {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(100% - 64px),
            1320px
        );

    margin:
        0 auto;

    padding-top:
        clamp(7rem, 9vw, 9rem);

    padding-bottom:
        clamp(6rem, 8vw, 8rem);
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.protection-decision__intro {
    max-width:
        930px;

    margin:
        0 auto;

    text-align:
        center;
}


.protection-decision__eyebrow {
    color:
        #ffd447;

    font-size:
        0.7rem;

    font-weight:
        950;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.protection-decision h2 {
    margin-top:
        1rem;

    color:
        #ffffff;

    font-size:
        clamp(4.2rem, 5.4vw, 6.3rem);

    font-weight:
        950;

    line-height:
        0.91;

    letter-spacing:
        -0.06em;
}


.protection-decision h2 span {
    display:
        block;

    margin-top:
        0.10em;

    color:
        #7bc8f0;
}


.protection-decision__lead {
    max-width:
        650px;

    margin:
        2rem
        auto
        0;

    color:
        rgba(255,255,255,0.78);

    font-size:
        1rem;

    font-weight:
        500;

    line-height:
        1.7;
}


/* ==========================================================================
   FIT STATEMENTS
   ========================================================================== */

.protection-decision__fits {
    margin-top:
        clamp(5rem, 7vw, 7rem);

    border-top:
        1px solid rgba(255,255,255,0.18);
}


.protection-decision__fits article {
    display:
        grid;

    grid-template-columns:
        60px
        minmax(330px, 0.85fr)
        minmax(420px, 1.15fr);

    gap:
        clamp(1.5rem, 4vw, 4.5rem);

    align-items:
        center;

    min-height:
        145px;

    border-bottom:
        1px solid rgba(255,255,255,0.16);
}


.protection-decision__fits article > span {
    color:
        #7bc8f0;

    font-size:
        0.72rem;

    font-weight:
        950;
}


.protection-decision__fits h3 {
    color:
        #ffffff;

    font-size:
        clamp(1.8rem, 2.2vw, 2.4rem);

    font-weight:
        900;

    line-height:
        1.08;

    letter-spacing:
        -0.035em;
}


.protection-decision__fits p {
    max-width:
        620px;

    color:
        rgba(255,255,255,0.72);

    font-size:
        0.94rem;

    font-weight:
        500;

    line-height:
        1.62;
}


/* ==========================================================================
   FINAL ACTION

   Open editorial treatment.
   No giant rounded CTA card.
   ========================================================================== */

.protection-decision__action {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        clamp(3rem, 7vw, 7rem);

    align-items:
        end;

    margin-top:
        clamp(4.5rem, 6vw, 6rem);

    padding-top:
        2.5rem;

    border-top:
        1px solid rgba(255,255,255,0.20);
}


.protection-decision__action > div:first-child {
    max-width:
        720px;
}


.protection-decision__action > div:first-child > span {
    color:
        #ffd447;

    font-size:
        0.67rem;

    font-weight:
        950;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.protection-decision__action h3 {
    margin-top:
        0.55rem;

    color:
        #ffffff;

    font-size:
        clamp(2rem, 2.8vw, 3.1rem);

    font-weight:
        900;

    line-height:
        1.05;

    letter-spacing:
        -0.04em;
}


.protection-decision__action p {
    margin-top:
        0.8rem;

    color:
        rgba(255,255,255,0.68);

    font-size:
        0.9rem;

    font-weight:
        500;

    line-height:
        1.55;
}


/* ==========================================================================
   ACTIONS
   ========================================================================== */

.protection-decision__actions {
    display:
        flex;

    align-items:
        center;

    gap:
        1.5rem;
}


.protection-decision__primary {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    padding:
        0 1.7rem;

    border-radius:
        999px;

    background:
        #ffd447;

    color:
        #061725;

    font-size:
        0.78rem;

    font-weight:
        950;

    text-decoration:
        none;

    text-transform:
        uppercase;
}


.protection-decision__secondary {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

    color:
        #ffffff;

    font-size:
        0.8rem;

    font-weight:
        900;

    text-decoration:
        none;

    text-transform:
        uppercase;
}


.protection-decision__secondary span {
    color:
        #ffd447;

    font-size:
        1.2rem;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .protection-decision__inner {
        width:
            min(
                calc(100% - 48px),
                820px
            );
    }


    .protection-decision__fits article {
        grid-template-columns:
            44px
            minmax(220px, 0.9fr)
            minmax(0, 1.1fr);

        padding:
            1.8rem 0;
    }


    .protection-decision__action {
        grid-template-columns:
            1fr;

        align-items:
            start;
    }


    .protection-decision__water {
        width:
            110%;

        left:
            -28%;

        opacity:
            0.08;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .protection-decision__inner {
        width:
            min(
                calc(100% - 32px),
                680px
            );

        padding-top:
            5rem;

        padding-bottom:
            5rem;
    }


    .protection-decision h2 {
        font-size:
            clamp(3.2rem, 13vw, 4.6rem);
    }


    .protection-decision__intro {
        text-align:
            left;
    }


    .protection-decision__lead {
        margin-left:
            0;

        margin-right:
            0;
    }


    .protection-decision__fits article {
        grid-template-columns:
            36px
            1fr;

        gap:
            0.7rem 1rem;

        padding:
            1.8rem 0;
    }


    .protection-decision__fits p {
        grid-column:
            2;
    }


    .protection-decision__actions {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .protection-decision__water {
        width:
            145%;

        left:
            -45%;

        opacity:
            0.055;
    }


    .protection-decision__beads {
        right:
            -80px;

        opacity:
            0.14;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - DECISION HEADLINE ORPHAN FIX
   ========================================================================== */

@media (min-width: 1101px) {

    .protection-decision__intro {
        max-width:
            1080px !important;
    }

    .protection-decision h2 span {
        white-space:
            nowrap !important;

        font-size:
            0.92em !important;
    }
}


/* Keep natural wrapping on smaller screens */

@media (max-width: 1100px) {

    .protection-decision h2 span {
        white-space:
            normal !important;

        font-size:
            1em !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION HERO INTENTIONAL LINE BREAKS
   ========================================================================== */

.protection-cinema__title-line {
    display:
        block;

    width:
        max-content;

    max-width:
        100%;

    white-space:
        nowrap;
}


.protection-cinema__title-line--shine,
.protection-cinema__title-line--protection,
.protection-cinema__title-line--point {
    color:
        #ffffff;
}


.protection-cinema__title-line--blue {
    color:
        #79c8f1;
}


/*
   Small visual separation between the first statement
   and "Protection is the point."
*/

.protection-cinema__title-line--protection {
    margin-top:
        0.16em;
}


/* ==========================================================================
   SMALL SCREENS

   Let the browser wrap normally when four locked desktop lines
   would become too wide.
   ========================================================================== */

@media (max-width: 700px) {

    .protection-cinema__title-line {
        width:
            auto;

        white-space:
            normal;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - PROTECTION HERO LINE COLORS FINAL
   ========================================================================== */

.protection-cinema h1
.protection-cinema__title-line--shine {
    color:
        #ffffff !important;
}

.protection-cinema h1
.protection-cinema__title-line--blue {
    color:
        #79c8f1 !important;
}

.protection-cinema h1
.protection-cinema__title-line--protection {
    color:
        #ffffff !important;
}

.protection-cinema h1
.protection-cinema__title-line--point {
    color:
        #ffffff !important;
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SERVICES HERO INTENTIONAL LINE BREAKS
   ========================================================================== */

.services-hero__title-line {
    display:
        block;

    width:
        max-content;

    max-width:
        100%;

    white-space:
        nowrap;
}


.services-hero__title-line--messes {
    color:
        #ffffff !important;
}


.services-hero__title-line--blue {
    color:
        #79c8f1 !important;
}


.services-hero__title-line--blue:first-of-type {
    margin-top:
        0.14em;
}


/* ==========================================================================
   SMALL SCREENS

   Release the locked desktop lines when the viewport actually needs it.
   ========================================================================== */

@media (max-width: 700px) {

    .services-hero__title-line {
        width:
            auto;

        white-space:
            normal;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS PAGE HERO
   ========================================================================== */

.membership-page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: calc(100vh - 110px);

    display: flex;
    align-items: center;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 84% 18%,
            rgba(79, 180, 231, 0.16),
            transparent 25%
        ),
        linear-gradient(
            115deg,
            #031928 0%,
            #08283d 54%,
            #0b334c 100%
        );
}


.membership-page-hero::after {
    content: "";

    position: absolute;
    z-index: 0;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

    pointer-events: none;
}


.membership-page-hero__water {
    position: absolute;
    z-index: 1;

    top: -4%;
    right: -7%;

    width: min(62vw, 1180px);
    height: 42%;

    background:
        url("../images/maintenance-water-stream-top.webp")
        center / contain
        no-repeat;

    opacity: 0.26;

    pointer-events: none;
}


.membership-page-hero__bubble {
    position: absolute;
    z-index: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 34% 30%,
            rgba(255,255,255,0.52),
            rgba(117,207,244,0.16) 32%,
            rgba(99,172,222,0.06) 66%,
            transparent 72%
        );

    border:
        1px solid
        rgba(144, 215, 246, 0.22);

    box-shadow:
        inset 0 0 22px
        rgba(159, 226, 255, 0.14);

    pointer-events: none;
}


.membership-page-hero__bubble--one {
    width: 54px;
    height: 54px;

    right: 7%;
    top: 27%;
}


.membership-page-hero__bubble--two {
    width: 24px;
    height: 24px;

    right: 13%;
    bottom: 16%;
}


.membership-page-hero__inner {
    position: relative;
    z-index: 2;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(420px, 0.92fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;

    padding-top:
        clamp(5rem, 8vw, 8rem);

    padding-bottom:
        clamp(5rem, 8vw, 8rem);
}


.membership-page-hero__copy {
    max-width: 760px;
}


.membership-page-hero .section-label {
    margin-bottom: 1.35rem;

    color: #ffd13f;
}


.membership-page-hero h1 {
    margin: 0;

    font-size:
        clamp(4.7rem, 6.4vw, 8.2rem);

    line-height: 0.87;

    letter-spacing: -0.065em;

    font-weight: 900;
}


.membership-page-hero__title-white,
.membership-page-hero__title-blue {
    display: block;
}


.membership-page-hero__title-white {
    color: #ffffff;
}


.membership-page-hero__title-blue {
    margin-top: 0.1em;

    color: #75c9f3;
}


.membership-page-hero__lead {
    max-width: 650px;

    margin:
        clamp(2rem, 3vw, 2.8rem)
        0
        0;

    font-size:
        clamp(1.05rem, 1.25vw, 1.28rem);

    line-height: 1.6;

    color:
        rgba(255,255,255,0.88);
}


.membership-page-hero__actions {
    display: flex;
    align-items: center;
    gap: 2rem;

    margin-top: 2.3rem;
}


.membership-page-hero__text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;

    color: #ffffff;

    font-size: 0.9rem;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
}


.membership-page-hero__text-link span {
    color: #ffd13f;

    font-size: 1.4rem;

    transition:
        transform 180ms ease;
}


.membership-page-hero__text-link:hover span {
    transform:
        translateX(4px);
}


.membership-page-hero__note {
    margin-top: 2.3rem;

    padding-left: 1rem;

    border-left:
        3px solid #ffd13f;

    color:
        rgba(255,255,255,0.72);

    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
}


.membership-page-hero__route {
    width: 100%;

    border-top:
        1px solid
        rgba(255,255,255,0.24);
}


.membership-page-hero__route-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;

    min-height: 68px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.18);

    font-size: 0.76rem;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.055em;
}


.membership-page-hero__route-heading span {
    color: #ffd13f;
}


.membership-page-hero__route-heading strong {
    color:
        rgba(255,255,255,0.72);
}


.membership-page-hero__step {
    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr);

    gap: 1.35rem;

    padding:
        clamp(1.45rem, 2vw, 2rem)
        0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.16);
}


.membership-page-hero__step-number {
    padding-top: 0.25rem;

    color: #75c9f3;

    font-size: 0.82rem;
    font-weight: 900;
}


.membership-page-hero__step h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(1.35rem, 1.65vw, 1.85rem);

    line-height: 1.08;

    letter-spacing: -0.035em;
}


.membership-page-hero__step p {
    max-width: 500px;

    margin:
        0.55rem
        0
        0;

    color:
        rgba(255,255,255,0.7);

    font-size:
        clamp(0.95rem, 1vw, 1.05rem);

    line-height: 1.5;
}


/* ==========================================================================
   WIDE / ULTRAWIDE
   ========================================================================== */

@media (min-width: 1700px) {

    .membership-page-hero__inner {
        grid-template-columns:
            minmax(0, 720px)
            minmax(440px, 590px);

        justify-content: space-between;
    }
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1050px) {

    .membership-page-hero {
        min-height: auto;
    }


    .membership-page-hero__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    .membership-page-hero__copy {
        max-width: 800px;
    }


    .membership-page-hero__route {
        max-width: 760px;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .membership-page-hero__inner {
        gap: 3.25rem;

        padding-top: 4rem;
        padding-bottom: 4rem;
    }


    .membership-page-hero h1 {
        font-size:
            clamp(3.5rem, 16vw, 5.2rem);
    }


    .membership-page-hero__actions {
        align-items: flex-start;
        flex-direction: column;

        gap: 1.25rem;
    }


    .membership-page-hero__water {
        width: 120%;
        right: -35%;

        opacity: 0.18;
    }


    .membership-page-hero__step {
        grid-template-columns:
            34px
            minmax(0, 1fr);
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS HERO CONTAINMENT FIX
   ========================================================================== */


/* ----------------------------------------------------------
   Restore the same centered page containment used elsewhere.
   The earlier width:100% rule overrode .site-shell.
   ---------------------------------------------------------- */

.membership-page-hero__inner {
    width:
        min(
            calc(100% - 64px),
            1420px
        );

    margin-inline: auto;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(430px, 0.88fr);

    gap:
        clamp(
            3.5rem,
            6vw,
            6.5rem
        );
}


/* ----------------------------------------------------------
   Keep the headline powerful without swallowing the column.
   ---------------------------------------------------------- */

.membership-page-hero h1 {
    max-width: 760px;

    font-size:
        clamp(
            4.25rem,
            5.7vw,
            7rem
        );

    line-height: 0.9;
}


/* ----------------------------------------------------------
   Give the left supporting copy a cleaner reading measure.
   ---------------------------------------------------------- */

.membership-page-hero__lead {
    max-width: 610px;
}


.membership-page-hero__note {
    max-width: 620px;
}


/* ----------------------------------------------------------
   Keep the route comfortably inside its side of the layout.
   ---------------------------------------------------------- */

.membership-page-hero__route {
    max-width: 570px;

    justify-self: end;
}


/* ----------------------------------------------------------
   Wide desktop
   ---------------------------------------------------------- */

@media (min-width: 1500px) {

    .membership-page-hero__inner {
        grid-template-columns:
            minmax(0, 760px)
            minmax(440px, 560px);

        justify-content: space-between;

        gap: 5rem;
    }
}


/* ----------------------------------------------------------
   Medium desktop
   ---------------------------------------------------------- */

@media (max-width: 1280px) {

    .membership-page-hero__inner {
        width:
            min(
                calc(100% - 48px),
                1180px
            );

        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(390px, 0.92fr);

        gap: 3rem;
    }


    .membership-page-hero h1 {
        font-size:
            clamp(
                4rem,
                5.4vw,
                5.8rem
            );
    }
}


/* ----------------------------------------------------------
   Tablet
   ---------------------------------------------------------- */

@media (max-width: 1050px) {

    .membership-page-hero__inner {
        width:
            min(
                calc(100% - 40px),
                900px
            );

        grid-template-columns: 1fr;

        gap: 4rem;
    }


    .membership-page-hero__route {
        width: 100%;
        max-width: 760px;

        justify-self: start;
    }
}


/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .membership-page-hero__inner {
        width:
            calc(100% - 32px);
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS HERO TWO LINE TITLE
   ========================================================================== */

@media (min-width: 1051px) {

    .membership-page-hero__copy {
        max-width: 790px;
    }

    .membership-page-hero h1 {
        max-width: none;

        font-size:
            clamp(
                3.9rem,
                4.6vw,
                5.8rem
            );

        line-height: 0.92;
    }

    .membership-page-hero__title-white,
    .membership-page-hero__title-blue {
        width: max-content;
        max-width: none;

        white-space: nowrap;
    }

    .membership-page-hero__title-blue {
        margin-top: 0.14em;
    }

    .membership-page-hero__water {
        opacity: 0.22;
    }
}


/* Return to natural wrapping below desktop */

@media (max-width: 1050px) {

    .membership-page-hero__title-white,
    .membership-page-hero__title-blue {
        width: auto;
        max-width: 100%;

        white-space: normal;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS HERO TITLE COLLISION FIX
   ========================================================================== */


/* ----------------------------------------------------------
   Desktop

   Keep the intentional two-line headline, but size it for
   the actual left column so it never intrudes into the
   maintenance loop.
   ---------------------------------------------------------- */

@media (min-width: 1051px) {

    .membership-page-hero h1 {
        max-width: 690px;

        font-size:
            clamp(
                3.15rem,
                3.7vw,
                4.7rem
            );

        line-height: 0.93;
    }


    .membership-page-hero__title-white,
    .membership-page-hero__title-blue {
        width: auto;
        max-width: 100%;

        white-space: nowrap;
    }


    .membership-page-hero__copy {
        min-width: 0;
        max-width: 700px;
    }


    .membership-page-hero__route {
        position: relative;
        z-index: 2;
    }
}


/* ----------------------------------------------------------
   Larger desktops can carry a little more scale.
   ---------------------------------------------------------- */

@media (min-width: 1500px) {

    .membership-page-hero h1 {
        max-width: 760px;

        font-size:
            clamp(
                3.8rem,
                4.15vw,
                5.25rem
            );
    }


    .membership-page-hero__copy {
        max-width: 780px;
    }
}


/* ----------------------------------------------------------
   Tablet and mobile keep natural wrapping.
   ---------------------------------------------------------- */

@media (max-width: 1050px) {

    .membership-page-hero__title-white,
    .membership-page-hero__title-blue {
        white-space: normal;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS HERO FINAL TITLE FIT
   ========================================================================== */

/*
   Final desktop title sizing.

   Important:
   This deliberately overrides the earlier 1500px desktop rule
   that was making the headline grow back into the maintenance loop.
*/

@media (min-width: 1051px) {

    .membership-page-hero__copy {
        min-width: 0;
        max-width: 690px;
    }

    .membership-page-hero h1 {
        width: auto;
        max-width: 690px;

        font-size:
            clamp(
                3.25rem,
                3vw,
                4.1rem
            ) !important;

        line-height: 0.94;
    }

    .membership-page-hero__title-white,
    .membership-page-hero__title-blue {
        display: block;

        width: max-content;
        max-width: none;

        white-space: nowrap;
    }

    .membership-page-hero__title-blue {
        margin-top: 0.16em;
    }

    .membership-page-hero__route {
        position: relative;
        z-index: 3;

        min-width: 0;
    }
}


/*
   Explicitly prevent ultrawide from enlarging the heading again.
*/

@media (min-width: 1500px) {

    .membership-page-hero h1 {
        font-size:
            clamp(
                3.45rem,
                3vw,
                4.1rem
            ) !important;
    }

    .membership-page-hero__copy {
        max-width: 690px;
    }
}


/*
   Natural wrapping resumes below desktop.
*/

@media (max-width: 1050px) {

    .membership-page-hero__title-white,
    .membership-page-hero__title-blue {
        width: auto;
        max-width: 100%;

        white-space: normal;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS HERO RECOMPOSE
   ========================================================================== */

/*
   Desktop goal:
   - less vertical real estate
   - headline becomes the hero
   - maintenance loop becomes a supporting floating element
   - stronger asymmetry
   - Section 02 enters the viewport sooner
*/

@media (min-width: 1051px) {

    .membership-page-hero {
        position: relative;
        min-height: 620px;
        padding-top: 2.75rem;
        padding-bottom: 2.75rem;
        overflow: hidden;
    }

    .membership-page-hero__inner {
        position: relative;
        display: block !important;

        width:
            min(
                calc(100% - 64px),
                1420px
            );

        min-height: 560px;

        margin-inline: auto;

        grid-template-columns: none !important;
        gap: 0 !important;
    }

    /* ======================================================
       HERO COPY
       ====================================================== */

    .membership-page-hero__copy {
        position: relative;
        z-index: 4;

        width: min(64%, 760px);
        max-width: 760px;

        padding-top: 2.25rem;
        padding-bottom: 3rem;
    }

    .membership-page-hero h1 {
        width: auto;
        max-width: 740px;

        font-size:
            clamp(
                3.6rem,
                4.15vw,
                5.15rem
            ) !important;

        line-height: 0.92;

        margin-bottom: 1.6rem;
    }

    .membership-page-hero__title-white,
    .membership-page-hero__title-blue {
        display: block;
        width: max-content;
        max-width: none;
        white-space: nowrap;
    }

    .membership-page-hero__title-blue {
        margin-top: 0.14em;
    }

    .membership-page-hero__lead {
        max-width: 570px;
    }

    .membership-page-hero__note {
        max-width: 590px;
    }

    /* ======================================================
       MAINTENANCE LOOP
       Supporting visual instead of equal column.
       ====================================================== */

    .membership-page-hero__route {
        position: absolute;

        right: 0;
        bottom: 2.5rem;

        width:
            clamp(
                390px,
                31vw,
                470px
            );

        max-width: 470px;

        z-index: 3;

        transform: scale(0.92);
        transform-origin: bottom right;

        overflow: visible;
    }

    /* ======================================================
       WATER MOVEMENT
       Allow it to spread beyond the maintenance graphic
       so it feels more like hero atmosphere.
       ====================================================== */

    .membership-page-hero__water {
        opacity: 0.14;

        transform:
            translate(
                2rem,
                1rem
            )
            scale(1.14);

        transform-origin: center;
        pointer-events: none;
    }
}


/* ==========================================================
   WIDE DESKTOP
   Keep the composition dramatic without growing taller.
   ========================================================== */

@media (min-width: 1500px) {

    .membership-page-hero {
        min-height: 640px;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .membership-page-hero__inner {
        min-height: 575px;
    }

    .membership-page-hero__copy {
        width: min(66%, 800px);
        max-width: 800px;
    }

    .membership-page-hero h1 {
        max-width: 780px;

        font-size:
            clamp(
                4rem,
                4.05vw,
                5.35rem
            ) !important;
    }

    .membership-page-hero__route {
        width: 470px;
        max-width: 470px;

        right: 0;
        bottom: 2.25rem;

        transform: scale(0.94);
    }
}


/* ==========================================================
   SHORTER DESKTOP VIEWPORTS
   Do not let the hero eat the screen.
   ========================================================== */

@media
    (min-width: 1051px)
    and (max-height: 820px) {

    .membership-page-hero {
        min-height: 560px;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .membership-page-hero__inner {
        min-height: 510px;
    }

    .membership-page-hero__copy {
        padding-top: 1.4rem;
        padding-bottom: 2rem;
    }

    .membership-page-hero h1 {
        font-size:
            clamp(
                3.25rem,
                3.7vw,
                4.6rem
            ) !important;
    }

    .membership-page-hero__route {
        bottom: 1.25rem;

        transform: scale(0.86);
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS CUSTOMER PHOTO HERO
   ==========================================================================

   Use the real customer interaction as the hero story.

   Desktop deliberately uses the complete vertical height of the
   900 x 700 photograph instead of background-size: cover across
   the entire screen. This preserves the detailer, customer,
   clipboard, vehicle, and mobile detailing setup.

   ========================================================================== */


/* ==========================================================
   DESKTOP PHOTO HERO
   ========================================================== */

@media (min-width: 1051px) {

    .membership-page-hero {
        position: relative;

        min-height: 620px;

        padding: 0 !important;

        overflow: hidden;

        background-color:
            #061d30 !important;

        background-image:
            linear-gradient(
                90deg,
                rgba(4, 23, 38, 1) 0%,
                rgba(4, 23, 38, 1) 34%,
                rgba(4, 23, 38, 0.98) 43%,
                rgba(4, 23, 38, 0.86) 51%,
                rgba(4, 23, 38, 0.58) 60%,
                rgba(4, 23, 38, 0.18) 73%,
                rgba(4, 23, 38, 0.04) 100%
            ),
            url("../images/premium-service-membership.webp") !important;

        background-position:
            center center,
            right center !important;

        background-size:
            100% 100%,
            auto 100% !important;

        background-repeat:
            no-repeat,
            no-repeat !important;
    }


    /* ------------------------------------------------------
       Main content container
       ------------------------------------------------------ */

    .membership-page-hero__inner {
        position: relative;
        z-index: 3;

        display: flex !important;

        align-items: center;

        width:
            min(
                calc(100% - 64px),
                1420px
            );

        min-height: 620px;

        margin-inline: auto;

        grid-template-columns: none !important;
        gap: 0 !important;
    }


    /* ------------------------------------------------------
       Copy becomes the single hero focal point
       ------------------------------------------------------ */

    .membership-page-hero__copy {
        position: relative;
        z-index: 4;

        width:
            min(
                58%,
                790px
            ) !important;

        max-width:
            790px !important;

        padding:
            3.2rem
            0 !important;
    }


    .membership-page-hero h1 {
        width: auto !important;

        max-width:
            780px !important;

        margin-bottom:
            1.5rem;

        font-size:
            clamp(
                3.5rem,
                3.75vw,
                4.35rem
            ) !important;

        line-height:
            0.93 !important;

        text-shadow:
            0
            4px
            24px
            rgba(0, 0, 0, 0.22);
    }


    .membership-page-hero__title-white,
    .membership-page-hero__title-blue {
        display: block;

        width: max-content;

        max-width: none;

        white-space: nowrap;
    }


    .membership-page-hero__title-blue {
        margin-top:
            0.14em;
    }


    .membership-page-hero__lead {
        max-width:
            570px !important;

        color:
            rgba(255, 255, 255, 0.92) !important;

        text-shadow:
            0
            2px
            18px
            rgba(0, 0, 0, 0.24);
    }


    .membership-page-hero__note {
        max-width:
            600px !important;

        color:
            rgba(255, 255, 255, 0.88) !important;

        text-shadow:
            0
            2px
            16px
            rgba(0, 0, 0, 0.22);
    }


    /* ------------------------------------------------------
       The photograph replaces the infographic as the visual.
       ------------------------------------------------------ */

    .membership-page-hero__route {
        display:
            none !important;
    }


    .membership-page-hero__water {
        display:
            none !important;
    }
}


/* ==========================================================
   LARGE DESKTOP

   Do not let ultrawide screens turn this back into a giant
   section. The photo grows with height, not arbitrary width.
   ========================================================== */

@media (min-width: 1500px) {

    .membership-page-hero,
    .membership-page-hero__inner {
        min-height:
            640px;
    }


    .membership-page-hero__copy {
        width:
            min(
                60%,
                810px
            ) !important;

        max-width:
            810px !important;
    }


    .membership-page-hero h1 {
        max-width:
            800px !important;

        font-size:
            clamp(
                3.8rem,
                3.75vw,
                4.55rem
            ) !important;
    }
}


/* ==========================================================
   SHORT DESKTOP VIEWPORTS

   Keep the hero from stealing the whole screen.
   ========================================================== */

@media
    (min-width: 1051px)
    and (max-height: 820px) {

    .membership-page-hero,
    .membership-page-hero__inner {
        min-height:
            560px;
    }


    .membership-page-hero__copy {
        padding:
            2.25rem
            0 !important;
    }


    .membership-page-hero h1 {
        font-size:
            clamp(
                3.15rem,
                3.45vw,
                4rem
            ) !important;
    }
}


/* ==========================================================
   TABLET

   At tablet width the photo can become a normal cover image,
   but the stronger overlay keeps the copy readable.
   ========================================================== */

@media
    (min-width: 701px)
    and (max-width: 1050px) {

    .membership-page-hero {
        position: relative;

        min-height:
            590px;

        padding:
            0 !important;

        overflow:
            hidden;

        background-color:
            #061d30 !important;

        background-image:
            linear-gradient(
                90deg,
                rgba(4, 23, 38, 0.98) 0%,
                rgba(4, 23, 38, 0.94) 35%,
                rgba(4, 23, 38, 0.78) 57%,
                rgba(4, 23, 38, 0.38) 100%
            ),
            url("../images/premium-service-membership.webp") !important;

        background-position:
            center,
            64% center !important;

        background-size:
            cover,
            cover !important;

        background-repeat:
            no-repeat !important;
    }


    .membership-page-hero__inner {
        display:
            flex !important;

        align-items:
            center;

        width:
            min(
                calc(100% - 40px),
                900px
            ) !important;

        min-height:
            590px;

        margin-inline:
            auto;

        grid-template-columns:
            none !important;

        gap:
            0 !important;
    }


    .membership-page-hero__copy {
        width:
            min(
                76%,
                640px
            ) !important;

        max-width:
            640px !important;

        padding:
            3rem
            0 !important;
    }


    .membership-page-hero__route,
    .membership-page-hero__water {
        display:
            none !important;
    }


    .membership-page-hero__lead,
    .membership-page-hero__note {
        color:
            rgba(255, 255, 255, 0.92) !important;
    }
}


/* ==========================================================
   MOBILE

   Focus the crop around the two people. Stronger dark wash
   prevents the copy from fighting with the photograph.
   ========================================================== */

@media (max-width: 700px) {

    .membership-page-hero {
        position:
            relative;

        min-height:
            640px;

        padding:
            0 !important;

        overflow:
            hidden;

        background-color:
            #061d30 !important;

        background-image:
            linear-gradient(
                90deg,
                rgba(4, 23, 38, 0.92) 0%,
                rgba(4, 23, 38, 0.84) 52%,
                rgba(4, 23, 38, 0.62) 100%
            ),
            linear-gradient(
                0deg,
                rgba(4, 23, 38, 0.58) 0%,
                rgba(4, 23, 38, 0.05) 48%,
                rgba(4, 23, 38, 0.18) 100%
            ),
            url("../images/premium-service-membership.webp") !important;

        background-position:
            center,
            center,
            52% center !important;

        background-size:
            cover,
            cover,
            cover !important;

        background-repeat:
            no-repeat !important;
    }


    .membership-page-hero__inner {
        display:
            flex !important;

        align-items:
            center;

        width:
            calc(100% - 32px) !important;

        min-height:
            640px;

        margin-inline:
            auto;

        grid-template-columns:
            none !important;

        gap:
            0 !important;
    }


    .membership-page-hero__copy {
        width:
            100% !important;

        max-width:
            100% !important;

        padding:
            3.5rem
            0
            3rem !important;
    }


    .membership-page-hero h1 {
        max-width:
            100% !important;

        font-size:
            clamp(
                2.75rem,
                13vw,
                3.65rem
            ) !important;

        line-height:
            0.94 !important;
    }


    .membership-page-hero__title-white,
    .membership-page-hero__title-blue {
        width:
            auto !important;

        max-width:
            100% !important;

        white-space:
            normal !important;
    }


    .membership-page-hero__route,
    .membership-page-hero__water {
        display:
            none !important;
    }


    .membership-page-hero__lead,
    .membership-page-hero__note {
        color:
            rgba(255, 255, 255, 0.94) !important;

        text-shadow:
            0
            2px
            16px
            rgba(0, 0, 0, 0.32);
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS PHOTO HERO HEIGHT LOCK V2
   ========================================================================== */

/*
   Desktop only.
   Keep the current photo, crop, gradient, typography, and CTAs.
   Just stop the hero from eating the entire viewport.
*/

@media (min-width: 1051px) {

    .membership-page-hero {
        height:
            clamp(
                560px,
                63vh,
                600px
            ) !important;

        min-height:
            560px !important;

        max-height:
            600px !important;
    }

    .membership-page-hero__inner {
        height:
            100% !important;

        min-height:
            0 !important;
    }

    .membership-page-hero__copy {
        padding-top:
            2rem !important;

        padding-bottom:
            2rem !important;
    }
}


/*
   Ultrawide screens do not get permission to become
   a billboard again.
*/

@media (min-width: 1500px) {

    .membership-page-hero {
        height:
            clamp(
                570px,
                62vh,
                600px
            ) !important;

        min-height:
            570px !important;

        max-height:
            600px !important;
    }
}


/*
   Short desktop screens get an even tighter treatment.
*/

@media
    (min-width: 1051px)
    and (max-height: 820px) {

    .membership-page-hero {
        height:
            550px !important;

        min-height:
            550px !important;

        max-height:
            550px !important;
    }

    .membership-page-hero__copy {
        padding-top:
            1.5rem !important;

        padding-bottom:
            1.5rem !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS FULL PHOTO HERO RESTORE V3
   ========================================================================== */

@media (min-width: 1051px) {

    .membership-page-hero {
        position: relative;

        height: auto !important;

        min-height:
            clamp(
                650px,
                72vh,
                760px
            ) !important;

        max-height: none !important;

        padding: 0 !important;

        overflow: hidden;

        background-color:
            #061d30 !important;

        background-image:
            linear-gradient(
                90deg,
                rgba(4, 23, 38, 0.98) 0%,
                rgba(4, 23, 38, 0.96) 24%,
                rgba(4, 23, 38, 0.90) 37%,
                rgba(4, 23, 38, 0.72) 50%,
                rgba(4, 23, 38, 0.42) 63%,
                rgba(4, 23, 38, 0.16) 78%,
                rgba(4, 23, 38, 0.04) 100%
            ),
            linear-gradient(
                0deg,
                rgba(4, 23, 38, 0.26) 0%,
                rgba(4, 23, 38, 0.02) 48%,
                rgba(4, 23, 38, 0.08) 100%
            ),
            url("../images/premium-service-membership.webp") !important;

        background-position:
            center,
            center,
            center center !important;

        background-size:
            cover,
            cover,
            cover !important;

        background-repeat:
            no-repeat,
            no-repeat,
            no-repeat !important;
    }


    .membership-page-hero__inner {
        position: relative;
        z-index: 3;

        display: flex !important;
        align-items: center;

        width:
            min(
                calc(100% - 64px),
                1420px
            ) !important;

        min-height:
            clamp(
                650px,
                72vh,
                760px
            ) !important;

        height: auto !important;

        margin-inline: auto;

        grid-template-columns: none !important;
        gap: 0 !important;
    }


    .membership-page-hero__copy {
        position: relative;
        z-index: 4;

        width:
            min(
                57%,
                790px
            ) !important;

        max-width:
            790px !important;

        padding:
            4rem
            0 !important;
    }


    .membership-page-hero h1 {
        width: auto !important;

        max-width:
            790px !important;

        margin-bottom:
            1.5rem;

        font-size:
            clamp(
                3.6rem,
                3.8vw,
                4.6rem
            ) !important;

        line-height:
            0.93 !important;

        text-shadow:
            0
            4px
            26px
            rgba(0, 0, 0, 0.30);
    }


    .membership-page-hero__title-white,
    .membership-page-hero__title-blue {
        display: block;

        width: max-content;
        max-width: none;

        white-space: nowrap;
    }


    .membership-page-hero__title-blue {
        margin-top:
            0.14em;
    }


    .membership-page-hero__lead {
        max-width:
            570px !important;

        color:
            rgba(255, 255, 255, 0.94) !important;

        text-shadow:
            0
            2px
            18px
            rgba(0, 0, 0, 0.30);
    }


    .membership-page-hero__note {
        max-width:
            600px !important;

        color:
            rgba(255, 255, 255, 0.90) !important;

        text-shadow:
            0
            2px
            16px
            rgba(0, 0, 0, 0.28);
    }


    .membership-page-hero__route,
    .membership-page-hero__water {
        display:
            none !important;
    }
}


/* ==========================================================
   LARGE DESKTOP / ULTRAWIDE
   ========================================================== */

@media (min-width: 1500px) {

    .membership-page-hero,
    .membership-page-hero__inner {
        min-height:
            clamp(
                680px,
                72vh,
                780px
            ) !important;
    }


    .membership-page-hero__copy {
        width:
            min(
                58%,
                820px
            ) !important;

        max-width:
            820px !important;
    }


    .membership-page-hero h1 {
        font-size:
            clamp(
                3.9rem,
                3.7vw,
                4.8rem
            ) !important;
    }
}


/* ==========================================================
   SHORT DESKTOP VIEWPORTS
   ========================================================== */

@media
    (min-width: 1051px)
    and (max-height: 820px) {

    .membership-page-hero,
    .membership-page-hero__inner {
        min-height:
            620px !important;
    }


    .membership-page-hero__copy {
        padding-top:
            3rem !important;

        padding-bottom:
            3rem !important;
    }


    .membership-page-hero h1 {
        font-size:
            clamp(
                3.35rem,
                3.5vw,
                4.2rem
            ) !important;
    }
}


/* ==========================================================
   TABLET
   ========================================================== */

@media
    (min-width: 701px)
    and (max-width: 1050px) {

    .membership-page-hero {
        min-height:
            640px !important;

        padding:
            0 !important;

        background-color:
            #061d30 !important;

        background-image:
            linear-gradient(
                90deg,
                rgba(4, 23, 38, 0.97) 0%,
                rgba(4, 23, 38, 0.91) 35%,
                rgba(4, 23, 38, 0.72) 58%,
                rgba(4, 23, 38, 0.30) 100%
            ),
            url("../images/premium-service-membership.webp") !important;

        background-position:
            center,
            58% center !important;

        background-size:
            cover,
            cover !important;

        background-repeat:
            no-repeat,
            no-repeat !important;
    }


    .membership-page-hero__inner {
        display:
            flex !important;

        align-items:
            center;

        min-height:
            640px !important;

        width:
            min(
                calc(100% - 40px),
                900px
            ) !important;

        margin-inline:
            auto;

        grid-template-columns:
            none !important;
    }


    .membership-page-hero__copy {
        width:
            min(
                76%,
                640px
            ) !important;

        max-width:
            640px !important;

        padding:
            3.5rem
            0 !important;
    }


    .membership-page-hero__route,
    .membership-page-hero__water {
        display:
            none !important;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .membership-page-hero {
        min-height:
            680px !important;

        padding:
            0 !important;

        background-color:
            #061d30 !important;

        background-image:
            linear-gradient(
                90deg,
                rgba(4, 23, 38, 0.92) 0%,
                rgba(4, 23, 38, 0.82) 54%,
                rgba(4, 23, 38, 0.58) 100%
            ),
            linear-gradient(
                0deg,
                rgba(4, 23, 38, 0.60) 0%,
                rgba(4, 23, 38, 0.08) 52%,
                rgba(4, 23, 38, 0.18) 100%
            ),
            url("../images/premium-service-membership.webp") !important;

        background-position:
            center,
            center,
            52% center !important;

        background-size:
            cover,
            cover,
            cover !important;

        background-repeat:
            no-repeat,
            no-repeat,
            no-repeat !important;
    }


    .membership-page-hero__inner {
        display:
            flex !important;

        align-items:
            center;

        width:
            calc(100% - 32px) !important;

        min-height:
            680px !important;

        margin-inline:
            auto;

        grid-template-columns:
            none !important;
    }


    .membership-page-hero__copy {
        width:
            100% !important;

        max-width:
            100% !important;

        padding:
            4rem
            0
            3.5rem !important;
    }


    .membership-page-hero h1 {
        max-width:
            100% !important;

        font-size:
            clamp(
                2.75rem,
                13vw,
                3.65rem
            ) !important;

        line-height:
            0.94 !important;
    }


    .membership-page-hero__title-white,
    .membership-page-hero__title-blue {
        width:
            auto !important;

        max-width:
            100% !important;

        white-space:
            normal !important;
    }


    .membership-page-hero__route,
    .membership-page-hero__water {
        display:
            none !important;
    }


    .membership-page-hero__lead,
    .membership-page-hero__note {
        color:
            rgba(255, 255, 255, 0.94) !important;

        text-shadow:
            0
            2px
            16px
            rgba(0, 0, 0, 0.34);
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS SECTION 02 PLAN LINEUP
   ========================================================================== */

.membership-lineup {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
        clamp(6rem, 8vw, 8rem)
        0;

    background:
        linear-gradient(
            180deg,
            #f4fbff 0%,
            #eaf6fc 100%
        );

    color: #071827;
}


.membership-lineup__water {
    position: absolute;
    z-index: 0;

    top: -130px;
    right: -140px;

    width: 760px;
    height: 360px;

    opacity: 0.11;

    background:
        url("../images/membership-water-bg.svg")
        center / contain
        no-repeat;

    pointer-events: none;
}


.membership-lineup__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            calc(100% - 64px),
            1420px
        );

    margin-inline: auto;
}


/* ==========================================================
   INTRO
   ========================================================== */

.membership-lineup__intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(320px, 0.62fr);

    gap:
        clamp(4rem, 8vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(3.5rem, 5vw, 5rem);
}


.membership-lineup__intro h2 {
    max-width: 820px;

    margin:
        1rem
        0
        0;

    font-size:
        clamp(
            3.7rem,
            5.1vw,
            6rem
        );

    line-height: 0.91;

    letter-spacing: -0.06em;
}


.membership-lineup__intro h2 span {
    display: block;

    color: #1371ae;
}


.membership-lineup__intro-copy {
    max-width: 470px;
}


.membership-lineup__intro-copy p {
    margin: 0;

    color: #263e50;

    font-size:
        clamp(
            1rem,
            1.08vw,
            1.1rem
        );

    line-height: 1.65;
}


.membership-lineup__intro-copy strong {
    display: block;

    margin-top: 1.4rem;
    padding-top: 1.2rem;

    border-top:
        1px solid
        rgba(7, 57, 88, 0.18);

    color: #071827;

    font-size: 0.9rem;
    line-height: 1.5;
}


/* ==========================================================
   PLAN ROWS
   ========================================================== */

.membership-lineup__plans {
    border-top:
        1px solid
        rgba(7, 57, 88, 0.20);
}


.membership-lineup__plan {
    position: relative;

    display: grid;

    grid-template-columns:
        56px
        minmax(260px, 0.9fr)
        minmax(300px, 1fr)
        minmax(200px, 0.55fr);

    gap:
        clamp(
            1.5rem,
            3vw,
            3.5rem
        );

    align-items: center;

    min-height: 210px;

    padding:
        2.4rem
        0;

    border-bottom:
        1px solid
        rgba(7, 57, 88, 0.20);
}


.membership-lineup__number {
    align-self: start;

    padding-top: 0.35rem;

    color: #1898d6;

    font-size: 0.82rem;
    font-weight: 950;
}


.membership-lineup__eyebrow {
    margin:
        0
        0
        0.65rem;

    color: #075b96;

    font-size: 0.72rem;
    font-weight: 950;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.membership-lineup__plan-main h3 {
    margin: 0;

    font-size:
        clamp(
            2rem,
            2.4vw,
            2.75rem
        );

    line-height: 0.98;

    letter-spacing: -0.045em;
}


.membership-lineup__plan-main > p:last-child {
    max-width: 430px;

    margin:
        0.9rem
        0
        0;

    color: #3a5365;

    font-size: 1rem;
    line-height: 1.55;
}


.membership-lineup__features {
    margin: 0;
    padding: 0;

    list-style: none;
}


.membership-lineup__features li {
    position: relative;

    min-height: 42px;

    padding:
        0.65rem
        0
        0.65rem
        1.5rem;

    border-bottom:
        1px solid
        rgba(7, 57, 88, 0.11);

    color: #173247;

    font-size: 0.95rem;
    font-weight: 700;

    line-height: 1.4;
}


.membership-lineup__features li:last-child {
    border-bottom: 0;
}


.membership-lineup__features li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 0.65rem;

    color: #1595d1;

    font-weight: 950;
}


.membership-lineup__fit {
    text-align: right;
}


.membership-lineup__fit span {
    display: block;

    margin-bottom: 0.45rem;

    color: #1371ae;

    font-size: 0.68rem;
    font-weight: 950;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.membership-lineup__fit strong {
    display: block;

    margin-left: auto;

    max-width: 235px;

    color: #071827;

    font-size: 0.92rem;
    line-height: 1.4;
}


/* ==========================================================
   FEATURED PLAN
   ========================================================== */

.membership-lineup__plan--featured {
    margin-inline:
        -2rem;

    padding:
        2.8rem
        2rem;

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(94, 198, 244, 0.20),
            transparent 27%
        ),
        linear-gradient(
            115deg,
            #061d30 0%,
            #0b3652 100%
        );

    border-bottom: 0;

    color: #ffffff;
}


.membership-lineup__plan--featured
.membership-lineup__number {
    color: #75cef5;
}


.membership-lineup__plan--featured
.membership-lineup__eyebrow {
    color: #ffd447;
}


.membership-lineup__plan--featured
.membership-lineup__plan-main h3 {
    color: #ffffff;
}


.membership-lineup__plan--featured
.membership-lineup__plan-main > p:last-child {
    color:
        rgba(255, 255, 255, 0.78);
}


.membership-lineup__plan--featured
.membership-lineup__features li {
    color:
        rgba(255, 255, 255, 0.92);

    border-color:
        rgba(255, 255, 255, 0.14);
}


.membership-lineup__plan--featured
.membership-lineup__features li::before {
    color: #ffd447;
}


.membership-lineup__plan--featured
.membership-lineup__fit span {
    color: #75cef5;
}


.membership-lineup__plan--featured
.membership-lineup__fit strong {
    color: #ffffff;
}


.membership-lineup__popular {
    position: absolute;

    top: 1.1rem;
    right: 2rem;

    padding:
        0.5rem
        0.85rem;

    border-radius: 999px;

    background: #ffd447;

    color: #071827;

    font-size: 0.68rem;
    font-weight: 950;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.membership-lineup__footer {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 3rem;

    padding-top:
        2.5rem;
}


.membership-lineup__footer p {
    margin: 0;

    color: #294356;

    font-size: 1rem;
}


.membership-lineup__footer p strong {
    color: #071827;
}


.membership-lineup__actions {
    display: flex;
    align-items: center;

    gap: 1.5rem;

    flex-shrink: 0;
}


.membership-lineup__text-link {
    display: inline-flex;

    align-items: center;

    gap: 0.6rem;

    color: #071827;

    font-size: 0.78rem;
    font-weight: 950;

    text-decoration: none;
    text-transform: uppercase;
}


.membership-lineup__text-link span {
    color: #1371ae;

    font-size: 1.35rem;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .membership-lineup__inner {
        width:
            min(
                calc(100% - 40px),
                900px
            );
    }


    .membership-lineup__intro {
        grid-template-columns: 1fr;

        gap: 2rem;
    }


    .membership-lineup__plan {
        grid-template-columns:
            44px
            minmax(0, 1fr)
            minmax(250px, 0.8fr);

        gap: 1.5rem;
    }


    .membership-lineup__fit {
        grid-column:
            2 / -1;

        text-align: left;
    }


    .membership-lineup__fit strong {
        margin-left: 0;
    }


    .membership-lineup__plan--featured {
        margin-inline:
            -1rem;

        padding-inline:
            1rem;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .membership-lineup {
        padding:
            4.5rem
            0;
    }


    .membership-lineup__inner {
        width:
            calc(100% - 32px);
    }


    .membership-lineup__intro h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.2rem
            );
    }


    .membership-lineup__plan {
        grid-template-columns:
            32px
            minmax(0, 1fr);

        gap:
            1rem;

        padding:
            2.3rem
            0;
    }


    .membership-lineup__features,
    .membership-lineup__fit {
        grid-column:
            2;
    }


    .membership-lineup__plan--featured {
        margin-inline:
            -16px;

        padding:
            3.5rem
            16px
            2.5rem;
    }


    .membership-lineup__popular {
        top: 1rem;
        right: 1rem;
    }


    .membership-lineup__footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 1.5rem;
    }


    .membership-lineup__actions {
        align-items: flex-start;
        flex-direction: column;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS SECTION 02 BACKGROUND GRAPHICS
   ==========================================================================

   Decorative only.
   No layout changes.
   No plan structure changes.
   No typography changes.
   No spacing changes.

   ========================================================================== */


/* ==========================================================
   SECTION ATMOSPHERE
   ========================================================== */

.membership-lineup {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}


/* ----------------------------------------------------------
   Transition coming out of the dark photographic hero
   ---------------------------------------------------------- */

.membership-lineup::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: 0;
    left: 0;
    right: 0;

    height: 180px;

    background:
        linear-gradient(
            180deg,
            rgba(4, 23, 38, 0.10) 0%,
            rgba(36, 112, 157, 0.045) 34%,
            rgba(234, 246, 252, 0) 100%
        );

    pointer-events: none;
}


/* ----------------------------------------------------------
   Secondary water sweep lower in the section
   ---------------------------------------------------------- */

.membership-lineup::after {
    content: "";

    position: absolute;
    z-index: 0;

    left: -160px;
    bottom: -110px;

    width: 760px;
    height: 360px;

    opacity: 0.09;

    background:
        url("../images/membership-water-bg.svg")
        center / contain
        no-repeat;

    transform:
        rotate(7deg);

    pointer-events: none;
}


/* ==========================================================
   EXISTING WATER ARTWORK

   This div already exists in memberships.php.
   Reuse it instead of adding more markup.
   ========================================================== */

.membership-lineup__water {
    position: absolute;
    z-index: 0;

    top: -80px;
    right: -120px;

    width: 820px;
    height: 390px;

    opacity: 0.11;

    background:
        url("../images/membership-water-bg.svg")
        center / contain
        no-repeat;

    transform:
        rotate(-5deg);

    pointer-events: none;
}


/* ==========================================================
   SUBTLE GLOSS FIELD BEHIND INTRO

   Uses only a pseudo element on the existing inner wrapper.
   ========================================================== */

.membership-lineup__inner {
    position: relative;
    z-index: 2;
}


.membership-lineup__inner::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: -110px;
    left: 30%;

    width: 620px;
    height: 300px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.78) 0%,
            rgba(169, 221, 247, 0.12) 38%,
            rgba(102, 187, 229, 0.035) 62%,
            transparent 76%
        );

    pointer-events: none;
}


/* ==========================================================
   EDGE BUBBLES

   Decorative only.
   ========================================================== */

.membership-lineup__intro::after {
    content: "";

    position: absolute;

    top: 40px;
    right: -24px;

    width: 74px;
    height: 74px;

    border:
        1px solid
        rgba(73, 167, 217, 0.16);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(255, 255, 255, 0.72),
            rgba(159, 222, 249, 0.14) 35%,
            rgba(63, 149, 199, 0.04) 64%,
            transparent 70%
        );

    box-shadow:
        -52px 84px 0 -27px rgba(139, 211, 244, 0.11),
        34px 128px 0 -22px rgba(94, 185, 229, 0.08);

    pointer-events: none;
}


/* ==========================================================
   FEATURED NEVER AGAIN WATER TREATMENT
   ========================================================== */

.membership-lineup__plan--featured {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}


/* real water artwork behind featured row */

.membership-lineup__plan--featured::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: -105px;
    right: -55px;

    width: 660px;
    height: 310px;

    opacity: 0.15;

    background:
        url("../images/membership-water-bg.svg")
        center / contain
        no-repeat;

    transform:
        rotate(-4deg);

    pointer-events: none;
}


/* controlled gloss instead of another obvious graphic */

.membership-lineup__plan--featured::after {
    content: "";

    position: absolute;
    z-index: -1;

    top: -130px;
    right: 5%;

    width: 540px;
    height: 360px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(116, 207, 247, 0.16) 0%,
            rgba(71, 166, 215, 0.07) 38%,
            transparent 70%
        );

    pointer-events: none;
}


/* ==========================================================
   SMALL LOWER BUBBLE GROUP

   Anchored to footer so it stays decorative and does not
   interfere with the plan rows.
   ========================================================== */

.membership-lineup__footer {
    position: relative;
}


.membership-lineup__footer::before {
    content: "";

    position: absolute;

    right: 22%;
    top: -20px;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    border:
        1px solid
        rgba(80, 176, 224, 0.13);

    background:
        radial-gradient(
            circle at 34% 30%,
            rgba(255, 255, 255, 0.76),
            rgba(129, 207, 242, 0.13) 38%,
            transparent 70%
        );

    box-shadow:
        54px 26px 0 -15px rgba(116, 202, 240, 0.08),
        86px -18px 0 -19px rgba(116, 202, 240, 0.10);

    pointer-events: none;
}


/* ==========================================================
   TABLET

   Reduce graphics rather than rearranging anything.
   ========================================================== */

@media (max-width: 1050px) {

    .membership-lineup__water {
        width: 620px;
        height: 300px;

        right: -220px;

        opacity: 0.085;
    }


    .membership-lineup::after {
        width: 560px;
        height: 270px;

        left: -220px;

        opacity: 0.065;
    }


    .membership-lineup__plan--featured::before {
        width: 520px;
        height: 250px;

        opacity: 0.11;
    }
}


/* ==========================================================
   MOBILE

   Keep decoration restrained so readability wins.
   ========================================================== */

@media (max-width: 700px) {

    .membership-lineup::before {
        height: 120px;
    }


    .membership-lineup__water {
        width: 420px;
        height: 210px;

        top: -45px;
        right: -210px;

        opacity: 0.065;
    }


    .membership-lineup::after {
        width: 380px;
        height: 190px;

        left: -190px;
        bottom: -40px;

        opacity: 0.05;
    }


    .membership-lineup__inner::before {
        display: none;
    }


    .membership-lineup__intro::after {
        width: 46px;
        height: 46px;

        right: -18px;

        opacity: 0.65;
    }


    .membership-lineup__plan--featured::before {
        width: 400px;
        height: 190px;

        top: -45px;
        right: -170px;

        opacity: 0.08;
    }


    .membership-lineup__plan--featured::after {
        opacity: 0.65;
    }


    .membership-lineup__footer::before {
        display: none;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS SECTION 02 GRAPHICS CLEANUP
   ========================================================================== */


/* ----------------------------------------------------------
   Kill the accidental-looking translucent panel.
   ---------------------------------------------------------- */

.membership-lineup__plan--featured::after {
    content: "";

    position: absolute;
    z-index: -1;

    inset: auto;

    top: -55px;
    right: -40px;

    width: 560px;
    height: 260px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(98, 196, 239, 0.17) 0%,
            rgba(52, 151, 205, 0.07) 42%,
            transparent 72%
        );

    transform: none;

    pointer-events: none;
}


/* ----------------------------------------------------------
   Use actual water artwork across the featured membership.
   ---------------------------------------------------------- */

.membership-lineup__plan--featured::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: -78px;
    right: -25px;

    width: 720px;
    height: 320px;

    opacity: 0.18;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat;

    transform:
        rotate(-4deg);

    pointer-events: none;
}


/* ----------------------------------------------------------
   Add a little sheen through the center of the row.
   No hard edges.
   ---------------------------------------------------------- */

.membership-lineup__plan--featured {
    background:
        radial-gradient(
            ellipse at 76% 30%,
            rgba(88, 188, 236, 0.12) 0%,
            rgba(34, 121, 169, 0.05) 35%,
            transparent 62%
        ),
        linear-gradient(
            115deg,
            #061d30 0%,
            #0b3652 100%
        ) !important;
}


/* ----------------------------------------------------------
   Keep water behind actual content.
   ---------------------------------------------------------- */

.membership-lineup__plan--featured
> * {
    position: relative;
    z-index: 2;
}


/* ----------------------------------------------------------
   Tablet
   ---------------------------------------------------------- */

@media (max-width: 1050px) {

    .membership-lineup__plan--featured::before {
        width: 560px;
        height: 250px;

        right: -150px;

        opacity: 0.14;
    }

}


/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .membership-lineup__plan--featured::before {
        width: 420px;
        height: 190px;

        top: -30px;
        right: -190px;

        opacity: 0.10;
    }

    .membership-lineup__plan--featured::after {
        width: 360px;
        height: 190px;

        top: -30px;
        right: -130px;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SECTION 02 FEATURED GRID REPAIR
   ========================================================================== */

/*
   The graphics pass accidentally converted the absolutely positioned
   MOST POPULAR badge into a grid item.

   Restore that badge to absolute positioning so the original four-column
   featured-plan layout returns exactly as it was.
*/

.membership-lineup__plan--featured
.membership-lineup__popular {
    position: absolute !important;

    top: 1.1rem !important;
    right: 2rem !important;

    left: auto !important;
    bottom: auto !important;

    z-index: 5 !important;
}


/*
   Keep the real content above the decorative water treatment
   without interfering with the badge positioning.
*/

.membership-lineup__plan--featured
> .membership-lineup__number,

.membership-lineup__plan--featured
> .membership-lineup__plan-main,

.membership-lineup__plan--featured
> .membership-lineup__features,

.membership-lineup__plan--featured
> .membership-lineup__fit {
    position: relative;
    z-index: 2;
}


/*
   Reassert the original featured-row grid.
*/

.membership-lineup__plan--featured {
    grid-template-columns:
        56px
        minmax(260px, 0.9fr)
        minmax(300px, 1fr)
        minmax(200px, 0.55fr) !important;

    min-height: 210px !important;

    align-items: center !important;
}


/* Tablet */

@media (max-width: 1050px) {

    .membership-lineup__plan--featured {
        grid-template-columns:
            44px
            minmax(0, 1fr)
            minmax(250px, 0.8fr) !important;
    }

}


/* Mobile */

@media (max-width: 700px) {

    .membership-lineup__plan--featured {
        grid-template-columns:
            32px
            minmax(0, 1fr) !important;

        min-height: 0 !important;
    }

    .membership-lineup__plan--featured
    .membership-lineup__popular {
        top: 1rem !important;
        right: 1rem !important;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SECTION 02 WATER FINAL POLISH
   ========================================================================== */

.membership-lineup__plan--featured::before {
    right: -70px !important;

    opacity:
        0.115 !important;
}


/* Tablet */

@media (max-width: 1050px) {

    .membership-lineup__plan--featured::before {
        right: -175px !important;

        opacity:
            0.095 !important;
    }
}


/* Mobile */

@media (max-width: 700px) {

    .membership-lineup__plan--featured::before {
        right: -205px !important;

        opacity:
            0.07 !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS SECTION 03 CADENCE
   ========================================================================== */

.membership-cadence {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
        clamp(6.5rem, 8vw, 8.5rem)
        0;

    background:
        linear-gradient(
            180deg,
            #eef8fd 0%,
            #e6f3fa 100%
        );

    color: #071827;
}


/* ==========================================================
   BACKGROUND ATMOSPHERE
   ========================================================== */

.membership-cadence::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: -120px;
    right: -150px;

    width: 760px;
    height: 340px;

    opacity: 0.085;

    background:
        url("../images/membership-water-bg.svg")
        center / contain
        no-repeat;

    transform:
        rotate(-5deg);

    pointer-events: none;
}


.membership-cadence::after {
    content: "";

    position: absolute;
    z-index: 0;

    left: -220px;
    bottom: -140px;

    width: 640px;
    height: 300px;

    opacity: 0.065;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat;

    transform:
        rotate(7deg);

    pointer-events: none;
}


.membership-cadence__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            calc(100% - 64px),
            1420px
        );

    margin-inline: auto;
}


/* ==========================================================
   INTRO
   ========================================================== */

.membership-cadence__intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(320px, 0.62fr);

    gap:
        clamp(4rem, 8vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(4rem, 6vw, 5.5rem);
}


.membership-cadence__intro h2 {
    max-width: 820px;

    margin:
        1rem
        0
        0;

    font-size:
        clamp(
            4rem,
            5.4vw,
            6.2rem
        );

    line-height: 0.9;

    letter-spacing: -0.06em;
}


.membership-cadence__intro h2 span {
    display: block;

    color: #1472ae;
}


.membership-cadence__intro-copy {
    max-width: 470px;
}


.membership-cadence__intro-copy p {
    margin:
        0
        0
        1rem;

    color: #284355;

    font-size:
        clamp(
            1rem,
            1.08vw,
            1.1rem
        );

    line-height: 1.62;
}


.membership-cadence__intro-copy strong {
    display: block;

    margin-top: 1.35rem;
    padding-top: 1.2rem;

    border-top:
        1px solid
        rgba(7, 57, 88, 0.18);

    color: #071827;

    font-size: 0.92rem;
    line-height: 1.5;
}


/* ==========================================================
   TIMELINE
   ========================================================== */

.membership-cadence__timeline {
    border-top:
        1px solid
        rgba(7, 57, 88, 0.20);
}


.membership-cadence__step {
    display: grid;

    grid-template-columns:
        64px
        minmax(300px, 1fr)
        minmax(240px, 0.5fr);

    gap:
        clamp(
            2rem,
            4vw,
            4.5rem
        );

    align-items: center;

    min-height: 200px;

    padding:
        2.6rem
        0;

    border-bottom:
        1px solid
        rgba(7, 57, 88, 0.20);
}


.membership-cadence__number {
    align-self: start;

    padding-top: 0.35rem;

    color: #1496d2;

    font-size: 0.86rem;
    font-weight: 950;
}


.membership-cadence__eyebrow {
    margin:
        0
        0
        0.7rem;

    color: #075b96;

    font-size: 0.72rem;
    font-weight: 950;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.membership-cadence__step-copy h3 {
    margin: 0;

    color: #071827;

    font-size:
        clamp(
            2rem,
            2.6vw,
            3rem
        );

    line-height: 0.98;

    letter-spacing: -0.045em;
}


.membership-cadence__step-copy > p:last-child {
    max-width: 720px;

    margin:
        0.9rem
        0
        0;

    color: #375266;

    font-size: 1rem;
    line-height: 1.58;
}


/* ==========================================================
   ASIDE
   ========================================================== */

.membership-cadence__aside {
    text-align: right;
}


.membership-cadence__aside span {
    display: block;

    margin-bottom: 0.5rem;

    color: #1472ae;

    font-size: 0.68rem;
    font-weight: 950;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.membership-cadence__aside strong {
    display: block;

    margin-left: auto;

    max-width: 260px;

    color: #071827;

    font-size: 0.96rem;
    line-height: 1.42;
}


/* ==========================================================
   FEATURE RHYTHM
   ========================================================== */

.membership-cadence__step:nth-child(even) {
    position: relative;
}


.membership-cadence__step:nth-child(even)::before {
    content: "";

    position: absolute;
    z-index: -1;

    left: -2rem;
    right: -2rem;
    top: 0;
    bottom: 0;

    background:
        linear-gradient(
            90deg,
            rgba(18, 117, 174, 0.035),
            rgba(255, 255, 255, 0.24),
            rgba(18, 117, 174, 0.025)
        );

    pointer-events: none;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.membership-cadence__footer {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 3rem;

    padding-top:
        2.6rem;
}


.membership-cadence__footer p {
    margin: 0;

    color: #294356;

    font-size: 1rem;
}


.membership-cadence__footer p strong {
    color: #071827;
}


.membership-cadence__link {
    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    color: #071827;

    font-size: 0.78rem;
    font-weight: 950;

    text-decoration: none;
    text-transform: uppercase;
}


.membership-cadence__link span {
    color: #1472ae;

    font-size: 1.35rem;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .membership-cadence__inner {
        width:
            min(
                calc(100% - 40px),
                900px
            );
    }


    .membership-cadence__intro {
        grid-template-columns: 1fr;

        gap: 2rem;
    }


    .membership-cadence__step {
        grid-template-columns:
            48px
            minmax(0, 1fr);

        gap: 1.5rem;
    }


    .membership-cadence__aside {
        grid-column:
            2;

        text-align: left;
    }


    .membership-cadence__aside strong {
        margin-left: 0;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .membership-cadence {
        padding:
            4.5rem
            0;
    }


    .membership-cadence__inner {
        width:
            calc(100% - 32px);
    }


    .membership-cadence__intro h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    .membership-cadence__step {
        grid-template-columns:
            32px
            minmax(0, 1fr);

        min-height: 0;

        padding:
            2.3rem
            0;
    }


    .membership-cadence__aside {
        grid-column:
            2;
    }


    .membership-cadence__step:nth-child(even)::before {
        left: -16px;
        right: -16px;
    }


    .membership-cadence__footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 1.5rem;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS SECTION 03 FINAL POLISH
   ========================================================================== */


/* ----------------------------------------------------------
   Restore breathing room at the top of the section.
   ---------------------------------------------------------- */

.membership-cadence {
    padding-top:
        clamp(
            7.5rem,
            9vw,
            9.5rem
        ) !important;
}


/* ----------------------------------------------------------
   Make sure the intro cannot get visually clipped.
   ---------------------------------------------------------- */

.membership-cadence__intro {
    position: relative;

    padding-top:
        0.75rem;
}


/* ----------------------------------------------------------
   Soften alternating rows.
   Replace hard rectangular emphasis with a wash.
   ---------------------------------------------------------- */

.membership-cadence__step:nth-child(even)::before {
    left:
        -1rem !important;

    right:
        -1rem !important;

    top:
        12% !important;

    bottom:
        12% !important;

    background:
        linear-gradient(
            90deg,
            rgba(18, 117, 174, 0.018) 0%,
            rgba(90, 175, 220, 0.055) 42%,
            rgba(255, 255, 255, 0.20) 68%,
            rgba(18, 117, 174, 0.012) 100%
        ) !important;

    border-radius:
        0 !important;

    filter:
        blur(0.2px);
}


/* ----------------------------------------------------------
   Add a faint gloss sweep behind the middle of the timeline.
   Decorative only.
   ---------------------------------------------------------- */

.membership-cadence__timeline {
    position: relative;
}


.membership-cadence__timeline::after {
    content: "";

    position: absolute;
    z-index: -1;

    top: 22%;
    right: 8%;

    width: 520px;
    height: 260px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.56) 0%,
            rgba(144, 213, 246, 0.07) 38%,
            transparent 72%
        );

    pointer-events: none;
}


/* ----------------------------------------------------------
   Tablet
   ---------------------------------------------------------- */

@media (max-width: 1050px) {

    .membership-cadence {
        padding-top:
            6.5rem !important;
    }

}


/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .membership-cadence {
        padding-top:
            5rem !important;
    }

    .membership-cadence__step:nth-child(even)::before {
        left:
            -8px !important;

        right:
            -8px !important;

        top:
            8% !important;

        bottom:
            8% !important;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS SECTION 03 DARK TRANSITION
   ========================================================================== */


/* ==========================================================
   SECTION RESET
   Give Section 03 an actual visual identity.
   ========================================================== */

.membership-cadence {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    margin-top: 0 !important;

    padding-top:
        clamp(
            6.5rem,
            7vw,
            8rem
        ) !important;

    padding-bottom:
        clamp(
            6.5rem,
            8vw,
            9rem
        ) !important;

    background:
        linear-gradient(
            180deg,
            #051b2c 0%,
            #082b45 52%,
            #0a3552 100%
        ) !important;

    color:
        #ffffff !important;
}


/* ==========================================================
   HARD SECTION BREAK

   Thin accent line at the top so there is no question
   that a new section has started.
   ========================================================== */

.membership-cadence::before {
    content: "";

    position: absolute;
    z-index: 1;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            #ffd447 0%,
            #ffd447 18%,
            #72c9f3 18%,
            #72c9f3 100%
        );

    opacity: 1;

    pointer-events: none;
}


/* ==========================================================
   WATER TRANSITION

   Real artwork entering from above so the section does not
   begin as a flat navy rectangle.
   ========================================================== */

.membership-cadence::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: -150px;
    right: -80px;

    width: 900px;
    height: 420px;

    opacity: 0.16;

    background:
        url("../images/membership-water-bg.svg")
        center / contain
        no-repeat;

    transform:
        rotate(-4deg);

    pointer-events: none;
}


/* ==========================================================
   CONTENT STACK
   ========================================================== */

.membership-cadence__inner {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   INTRO
   ========================================================== */

.membership-cadence .section-label {
    color:
        #ffd447 !important;
}


.membership-cadence__intro h2 {
    color:
        #ffffff !important;
}


.membership-cadence__intro h2 span {
    color:
        #74cdf5 !important;
}


.membership-cadence__intro-copy p {
    color:
        rgba(255, 255, 255, 0.82) !important;
}


.membership-cadence__intro-copy strong {
    color:
        #ffffff !important;

    border-top-color:
        rgba(255, 255, 255, 0.17) !important;
}


/* ==========================================================
   TIMELINE
   ========================================================== */

.membership-cadence__timeline {
    border-top-color:
        rgba(255, 255, 255, 0.18) !important;
}


.membership-cadence__step {
    border-bottom-color:
        rgba(255, 255, 255, 0.16) !important;
}


.membership-cadence__number {
    color:
        #73cdf5 !important;
}


.membership-cadence__eyebrow {
    color:
        #ffd447 !important;
}


.membership-cadence__step-copy h3 {
    color:
        #ffffff !important;
}


.membership-cadence__step-copy > p:last-child {
    color:
        rgba(255, 255, 255, 0.76) !important;
}


/* ==========================================================
   RIGHT-SIDE NOTES
   ========================================================== */

.membership-cadence__aside span {
    color:
        #73cdf5 !important;
}


.membership-cadence__aside strong {
    color:
        #ffffff !important;
}


/* ==========================================================
   ALTERNATING ROWS

   Keep the rhythm, but make it atmospheric rather than
   rectangular highlighted rows.
   ========================================================== */

.membership-cadence__step:nth-child(even)::before {
    left:
        -2rem !important;

    right:
        -2rem !important;

    top:
        8% !important;

    bottom:
        8% !important;

    background:
        linear-gradient(
            90deg,
            rgba(102, 202, 246, 0.025) 0%,
            rgba(102, 202, 246, 0.07) 42%,
            rgba(255, 255, 255, 0.025) 70%,
            transparent 100%
        ) !important;

    border-radius:
        0 !important;
}


/* ==========================================================
   SUBTLE GLOSS THROUGH TIMELINE
   ========================================================== */

.membership-cadence__timeline::after {
    content: "";

    position: absolute;
    z-index: -1;

    top: 18%;
    right: 4%;

    width: 620px;
    height: 320px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(102, 202, 246, 0.09) 0%,
            rgba(70, 158, 207, 0.035) 42%,
            transparent 72%
        );

    pointer-events: none;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.membership-cadence__footer {
    border-top:
        1px solid
        rgba(255, 255, 255, 0.16);
}


.membership-cadence__footer p {
    color:
        rgba(255, 255, 255, 0.76) !important;
}


.membership-cadence__footer p strong {
    color:
        #ffffff !important;
}


.membership-cadence__link {
    color:
        #ffffff !important;
}


.membership-cadence__link span {
    color:
        #ffd447 !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .membership-cadence {
        padding-top:
            6rem !important;
    }

    .membership-cadence::after {
        width:
            680px;

        height:
            320px;

        right:
            -220px;

        opacity:
            0.12;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .membership-cadence {
        padding-top:
            4.75rem !important;

        padding-bottom:
            5rem !important;
    }

    .membership-cadence::before {
        height:
            3px;
    }

    .membership-cadence::after {
        width:
            440px;

        height:
            220px;

        top:
            -70px;

        right:
            -230px;

        opacity:
            0.08;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS SECTION 03 WATER FIX
   ========================================================================== */


/* ==========================================================
   KILL THE MYSTERY TOP-LEFT SHAPE
   ========================================================== */

.membership-cadence__inner::before,
.membership-cadence__intro::before {
    content: none !important;
    display: none !important;
}


/* ==========================================================
   KEEP TOP ACCENT LINE CLEAN
   ========================================================== */

.membership-cadence::before {
    content: "";

    position: absolute;
    z-index: 4;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #ffd447 0%,
            #ffd447 16%,
            #72c9f3 16%,
            #72c9f3 100%
        ) !important;

    opacity: 1 !important;

    transform: none !important;

    clip-path: none !important;

    pointer-events: none;
}


/* ==========================================================
   LARGE WATER SWEEP
   TOP RIGHT
   ========================================================== */

.membership-cadence::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: -105px;
    right: -80px;

    width: 900px;
    height: 390px;

    opacity: 0.20 !important;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat !important;

    transform:
        rotate(-4deg) !important;

    pointer-events: none;
}


/* ==========================================================
   SECOND WATER SWEEP
   LOWER LEFT
   ========================================================== */

.membership-cadence__inner::after {
    content: "";

    position: absolute;
    z-index: -1;

    left: -210px;
    bottom: 5%;

    width: 700px;
    height: 300px;

    opacity: 0.085;

    background:
        url("../images/membership-water-bg.svg")
        center / contain
        no-repeat;

    transform:
        rotate(8deg);

    pointer-events: none;
}


/* ==========================================================
   INTRO BUBBLE CLUSTER
   ========================================================== */

.membership-cadence__intro {
    position: relative;
}


.membership-cadence__intro::after {
    content: "";

    position: absolute;
    z-index: 1;

    top: 30px;
    right: -10px;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    border:
        1px solid
        rgba(116, 205, 246, 0.20);

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255, 255, 255, 0.56),
            rgba(110, 205, 246, 0.14) 35%,
            rgba(70, 155, 205, 0.05) 62%,
            transparent 72%
        );

    box-shadow:
        -74px 84px 0 -29px rgba(111, 201, 242, 0.13),
        34px 114px 0 -23px rgba(111, 201, 242, 0.11),
        -22px 158px 0 -30px rgba(111, 201, 242, 0.09);

    pointer-events: none;
}


/* ==========================================================
   TIMELINE WATER GLOW
   ========================================================== */

.membership-cadence__timeline {
    position: relative;
    isolation: isolate;
}


.membership-cadence__timeline::after {
    content: "";

    position: absolute;
    z-index: -1;

    top: 18%;
    right: 5%;

    width: 640px;
    height: 320px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(94, 197, 242, 0.11) 0%,
            rgba(57, 151, 204, 0.045) 40%,
            transparent 72%
        );

    pointer-events: none;
}


/* ==========================================================
   LOWER BUBBLE CLUSTER
   ========================================================== */

.membership-cadence__footer {
    position: relative;
}


.membership-cadence__footer::before {
    content: "";

    position: absolute;

    left: 18%;
    top: -34px;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    border:
        1px solid
        rgba(112, 205, 246, 0.18);

    background:
        radial-gradient(
            circle at 34% 28%,
            rgba(255, 255, 255, 0.55),
            rgba(112, 205, 246, 0.12) 38%,
            transparent 70%
        );

    box-shadow:
        58px 28px 0 -16px rgba(112, 205, 246, 0.11),
        92px -12px 0 -20px rgba(112, 205, 246, 0.09);

    pointer-events: none;
}


/* ==========================================================
   KEEP ALL REAL CONTENT ABOVE GRAPHICS
   ========================================================== */

.membership-cadence__intro,
.membership-cadence__timeline,
.membership-cadence__footer {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .membership-cadence::after {
        width: 680px;
        height: 300px;

        right: -220px;

        opacity: 0.15 !important;
    }


    .membership-cadence__inner::after {
        width: 520px;
        height: 230px;

        left: -220px;

        opacity: 0.065;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .membership-cadence::after {
        width: 440px;
        height: 200px;

        top: -45px;
        right: -220px;

        opacity: 0.10 !important;
    }


    .membership-cadence__inner::after {
        width: 380px;
        height: 180px;

        left: -200px;
        bottom: 2%;

        opacity: 0.045;
    }


    .membership-cadence__intro::after {
        width: 46px;
        height: 46px;

        right: -12px;

        opacity: 0.72;
    }


    .membership-cadence__footer::before {
        display: none;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SECTION 03 TRANSPARENT WATER REPAIR
   ========================================================================== */


/* ==========================================================
   REMOVE RECTANGULAR SVG CANVAS
   ========================================================== */

.membership-cadence__inner::after {
    content: "";

    position: absolute;
    z-index: -1;

    left: -120px;
    bottom: 2%;

    width: 620px;
    height: 280px;

    opacity: 0.12 !important;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat !important;

    transform:
        rotate(5deg) !important;

    pointer-events: none;
}


/* ==========================================================
   SOFTEN LOWER BUBBLES
   ========================================================== */

.membership-cadence__footer::before {
    opacity: 0.72;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .membership-cadence__inner::after {
        left: -180px;

        width: 500px;
        height: 230px;

        opacity: 0.09 !important;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .membership-cadence__inner::after {
        left: -190px;
        bottom: 1%;

        width: 360px;
        height: 170px;

        opacity: 0.06 !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS SECTION 04 ADVANTAGES
   ========================================================================== */


/* ==========================================================
   SECTION RESET
   ========================================================== */

.membership-advantages {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
        clamp(7rem, 8vw, 9rem)
        0
        clamp(7rem, 8vw, 9rem);

    background:
        linear-gradient(
            180deg,
            #f5fbfe 0%,
            #edf8fd 46%,
            #e6f3fa 100%
        );

    color: #071827;
}


/* ==========================================================
   TRANSITION FROM DARK SECTION 03
   ========================================================== */

.membership-advantages::before {
    content: "";

    position: absolute;
    z-index: 1;

    top: 0;
    left: 0;
    right: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #ffd447 0%,
            #ffd447 17%,
            #72c9f3 17%,
            #72c9f3 100%
        );

    pointer-events: none;
}


/* ==========================================================
   LARGE WATER ART
   ========================================================== */

.membership-advantages::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: -105px;
    right: -95px;

    width: 900px;
    height: 400px;

    opacity: 0.10;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat;

    transform:
        rotate(-5deg);

    pointer-events: none;
}


.membership-advantages__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            calc(100% - 64px),
            1420px
        );

    margin-inline: auto;
}


/* ==========================================================
   INTRO
   ========================================================== */

.membership-advantages__intro {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(320px, 0.58fr);

    gap:
        clamp(4rem, 8vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(4rem, 6vw, 5.5rem);
}


.membership-advantages__intro h2 {
    max-width: 900px;

    margin:
        1rem
        0
        0;

    font-size:
        clamp(
            4rem,
            5.5vw,
            6.25rem
        );

    line-height: 0.9;

    letter-spacing: -0.06em;
}


.membership-advantages__intro h2 span {
    display: block;

    color: #1472ae;
}


.membership-advantages__intro-copy {
    max-width: 470px;
}


.membership-advantages__intro-copy p {
    margin: 0;

    color: #284355;

    font-size:
        clamp(
            1rem,
            1.08vw,
            1.1rem
        );

    line-height: 1.62;
}


.membership-advantages__intro-copy strong {
    display: block;

    margin-top: 1.4rem;
    padding-top: 1.2rem;

    border-top:
        1px solid
        rgba(7, 57, 88, 0.18);

    color: #071827;

    font-size: 0.92rem;
    line-height: 1.5;
}


/* ==========================================================
   INTRO BUBBLES
   ========================================================== */

.membership-advantages__intro::after {
    content: "";

    position: absolute;

    top: 2.5rem;
    right: -1.25rem;

    width: 66px;
    height: 66px;

    border:
        1px solid
        rgba(75, 170, 219, 0.16);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 34% 28%,
            rgba(255, 255, 255, 0.74),
            rgba(137, 215, 248, 0.14) 38%,
            transparent 70%
        );

    box-shadow:
        -58px 88px 0 -24px rgba(105, 197, 238, 0.10),
        36px 120px 0 -22px rgba(105, 197, 238, 0.08);

    pointer-events: none;
}


/* ==========================================================
   ADVANTAGE LIST
   ========================================================== */

.membership-advantages__list {
    position: relative;

    border-top:
        1px solid
        rgba(7, 57, 88, 0.20);
}


.membership-advantages__item {
    position: relative;

    display: grid;

    grid-template-columns:
        58px
        minmax(275px, 0.8fr)
        minmax(340px, 1fr)
        minmax(200px, 0.48fr);

    gap:
        clamp(
            1.75rem,
            3.5vw,
            4rem
        );

    align-items: center;

    min-height: 190px;

    padding:
        2.5rem
        0;

    border-bottom:
        1px solid
        rgba(7, 57, 88, 0.19);
}


/* ==========================================================
   NUMBERS
   ========================================================== */

.membership-advantages__number {
    align-self: start;

    padding-top: 0.4rem;

    color: #1595d1;

    font-size: 0.86rem;
    font-weight: 950;
}


/* ==========================================================
   TITLE COLUMN
   ========================================================== */

.membership-advantages__eyebrow {
    margin:
        0
        0
        0.7rem;

    color: #075b96;

    font-size: 0.72rem;
    font-weight: 950;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.membership-advantages__title h3 {
    margin: 0;

    color: #071827;

    font-size:
        clamp(
            2rem,
            2.45vw,
            2.8rem
        );

    line-height: 0.98;

    letter-spacing: -0.045em;
}


/* ==========================================================
   BODY COLUMN
   ========================================================== */

.membership-advantages__copy p {
    max-width: 620px;

    margin: 0;

    color: #365165;

    font-size: 1rem;
    line-height: 1.58;
}


/* ==========================================================
   ASIDE COLUMN
   ========================================================== */

.membership-advantages__aside {
    text-align: right;
}


.membership-advantages__aside span {
    display: block;

    margin-bottom: 0.45rem;

    color: #1472ae;

    font-size: 0.68rem;
    font-weight: 950;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.membership-advantages__aside strong {
    display: block;

    margin-left: auto;

    max-width: 245px;

    color: #071827;

    font-size: 0.94rem;
    line-height: 1.4;
}


/* ==========================================================
   WATER RHYTHM

   Not boxes. Just faint atmosphere passing through the rows.
   ========================================================== */

.membership-advantages__item:nth-child(2)::before,
.membership-advantages__item:nth-child(4)::before {
    content: "";

    position: absolute;
    z-index: -1;

    left: -1.5rem;
    right: -1.5rem;

    top: 10%;
    bottom: 10%;

    background:
        linear-gradient(
            90deg,
            rgba(28, 128, 184, 0.018) 0%,
            rgba(93, 186, 229, 0.055) 46%,
            rgba(255, 255, 255, 0.18) 72%,
            transparent 100%
        );

    pointer-events: none;
}


/* ==========================================================
   FEATURE WATER SPLASH THROUGH MIDDLE ROW
   ========================================================== */

.membership-advantages__item:nth-child(3)::after {
    content: "";

    position: absolute;
    z-index: -1;

    right: -80px;
    top: -42px;

    width: 520px;
    height: 220px;

    opacity: 0.075;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat;

    transform:
        rotate(-4deg);

    pointer-events: none;
}


/* ==========================================================
   LOWER WATER SWEEP
   ========================================================== */

.membership-advantages__list::after {
    content: "";

    position: absolute;
    z-index: -1;

    left: -220px;
    bottom: -105px;

    width: 650px;
    height: 270px;

    opacity: 0.055;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat;

    transform:
        rotate(8deg);

    pointer-events: none;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.membership-advantages__footer {
    position: relative;

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 3rem;

    padding-top:
        2.75rem;
}


.membership-advantages__footer p {
    margin: 0;

    color: #294356;

    font-size: 1rem;
}


.membership-advantages__footer p strong {
    color: #071827;
}


.membership-advantages__link {
    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    color: #071827;

    font-size: 0.78rem;
    font-weight: 950;

    text-decoration: none;
    text-transform: uppercase;
}


.membership-advantages__link span {
    color: #1472ae;

    font-size: 1.35rem;
}


/* ==========================================================
   LOWER BUBBLES
   ========================================================== */

.membership-advantages__footer::before {
    content: "";

    position: absolute;

    right: 23%;
    top: -30px;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    border:
        1px solid
        rgba(80, 176, 224, 0.14);

    background:
        radial-gradient(
            circle at 34% 29%,
            rgba(255, 255, 255, 0.75),
            rgba(129, 207, 242, 0.13) 38%,
            transparent 70%
        );

    box-shadow:
        55px 25px 0 -16px rgba(116, 202, 240, 0.09),
        87px -17px 0 -20px rgba(116, 202, 240, 0.08);

    pointer-events: none;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .membership-advantages__inner {
        width:
            min(
                calc(100% - 40px),
                900px
            );
    }


    .membership-advantages__intro {
        grid-template-columns: 1fr;

        gap: 2rem;
    }


    .membership-advantages__item {
        grid-template-columns:
            46px
            minmax(0, 1fr)
            minmax(250px, 0.78fr);

        gap: 1.5rem;
    }


    .membership-advantages__copy {
        grid-column:
            2;
    }


    .membership-advantages__aside {
        grid-column:
            3;

        grid-row:
            1 / span 2;
    }


    .membership-advantages::after {
        width: 650px;
        height: 300px;

        right: -240px;

        opacity: 0.075;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .membership-advantages {
        padding:
            5rem
            0;
    }


    .membership-advantages__inner {
        width:
            calc(100% - 32px);
    }


    .membership-advantages__intro h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.35rem
            );
    }


    .membership-advantages__item {
        grid-template-columns:
            32px
            minmax(0, 1fr);

        min-height: 0;

        padding:
            2.35rem
            0;
    }


    .membership-advantages__copy,
    .membership-advantages__aside {
        grid-column:
            2;

        grid-row:
            auto;

        text-align: left;
    }


    .membership-advantages__aside strong {
        margin-left: 0;
    }


    .membership-advantages__item:nth-child(2)::before,
    .membership-advantages__item:nth-child(4)::before {
        left: -8px;
        right: -8px;
    }


    .membership-advantages__item:nth-child(3)::after {
        width: 350px;
        height: 160px;

        right: -190px;

        opacity: 0.05;
    }


    .membership-advantages__footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 1.5rem;
    }


    .membership-advantages__footer::before {
        display: none;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIP MEMBER MODE POSTER
   ========================================================================== */


/* ==========================================================
   SECTION
   ========================================================== */

.membership-member-mode {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height:
        900px;

    padding:
        clamp(7rem, 8vw, 9rem)
        0
        clamp(7rem, 8vw, 9rem);

    background:
        linear-gradient(
            135deg,
            #f7fcff 0%,
            #eaf6fc 52%,
            #dceef8 100%
        );

    color:
        #071827;
}


/* ==========================================================
   TRANSITION FROM SECTION 03
   ========================================================== */

.membership-member-mode::before {
    content: "";

    position: absolute;
    z-index: 5;

    top: 0;
    left: 0;
    right: 0;

    height:
        5px;

    background:
        linear-gradient(
            90deg,
            #ffd447 0%,
            #ffd447 18%,
            #72c9f3 18%,
            #72c9f3 100%
        );

    pointer-events: none;
}


/* ==========================================================
   DIAGONAL WATER MOVEMENT
   ========================================================== */

.membership-member-mode::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: 4%;
    right: -220px;

    width:
        980px;

    height:
        500px;

    opacity:
        0.095;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat;

    transform:
        rotate(-17deg);

    pointer-events: none;
}


/* ==========================================================
   BACKGROUND WORD
   ========================================================== */

.membership-member-mode__word {
    position: absolute;
    z-index: 0;

    left:
        clamp(
            -1rem,
            1vw,
            2rem
        );

    bottom:
        -0.13em;

    color:
        rgba(6, 45, 71, 0.045);

    font-size:
        clamp(
            9rem,
            19vw,
            22rem
        );

    font-weight:
        950;

    line-height:
        0.72;

    letter-spacing:
        -0.08em;

    white-space:
        nowrap;

    pointer-events:
        none;

    user-select:
        none;
}


/* ==========================================================
   MAIN COMPOSITION
   ========================================================== */

.membership-member-mode__inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(390px, 0.82fr)
        minmax(560px, 1.18fr);

    gap:
        clamp(
            5rem,
            9vw,
            10rem
        );

    width:
        min(
            calc(100% - 64px),
            1420px
        );

    margin-inline:
        auto;

    align-items:
        start;
}


/* ==========================================================
   LEFT STATEMENT
   ========================================================== */

.membership-member-mode__statement {
    position: relative;

    padding-top:
        1rem;
}


.membership-member-mode__statement .section-label {
    margin-bottom:
        1.3rem;
}


.membership-member-mode__statement h2 {
    max-width:
        650px;

    margin:
        0;

    color:
        #071827;

    font-size:
        clamp(
            4.6rem,
            6vw,
            7rem
        );

    line-height:
        0.86;

    letter-spacing:
        -0.065em;
}


.membership-member-mode__statement h2 span {
    display: block;

    margin-top:
        0.08em;

    color:
        #1477b7;
}


.membership-member-mode__lead {
    max-width:
        510px;

    margin:
        2.3rem
        0
        0;

    color:
        #29475b;

    font-size:
        1.1rem;

    line-height:
        1.65;
}


.membership-member-mode__note {
    max-width:
        500px;

    margin:
        1.5rem
        0
        0;

    padding-top:
        1.4rem;

    border-top:
        1px solid
        rgba(7, 57, 88, 0.18);

    color:
        #071827;

    font-size:
        0.98rem;

    font-weight:
        750;

    line-height:
        1.55;
}


.membership-member-mode__link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    margin-top:
        2rem;

    color:
        #071827;

    font-size:
        0.78rem;

    font-weight:
        950;

    text-decoration:
        none;

    text-transform:
        uppercase;
}


.membership-member-mode__link span {
    color:
        #1477b7;

    font-size:
        1.4rem;
}


/* ==========================================================
   RIGHT BENEFIT LADDER
   ========================================================== */

.membership-member-mode__benefits {
    position: relative;

    display: flex;

    flex-direction: column;

    padding-top:
        1.5rem;
}


/* vertical guide */

.membership-member-mode__benefits::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left:
        18px;

    width:
        1px;

    background:
        linear-gradient(
            180deg,
            rgba(20, 119, 183, 0.05),
            rgba(20, 119, 183, 0.30) 15%,
            rgba(20, 119, 183, 0.18) 82%,
            rgba(20, 119, 183, 0.03)
        );
}


/* ==========================================================
   BENEFIT BASE
   ========================================================== */

.membership-member-mode__benefit {
    position: relative;

    width:
        min(
            100%,
            650px
        );

    padding:
        1.9rem
        0
        2rem
        4.5rem;

    border-bottom:
        1px solid
        rgba(7, 57, 88, 0.18);
}


/* ladder dot */

.membership-member-mode__benefit::before {
    content: "";

    position: absolute;

    left:
        11px;

    top:
        2.4rem;

    width:
        15px;

    height:
        15px;

    border:
        3px solid
        #eaf6fc;

    border-radius:
        50%;

    background:
        #1477b7;

    box-shadow:
        0
        0
        0
        1px
        rgba(20, 119, 183, 0.28);
}


/* ==========================================================
   STAGGERED PLACEMENT
   ========================================================== */

.membership-member-mode__benefit--one {
    margin-left:
        0;
}


.membership-member-mode__benefit--two {
    margin-left:
        8%;
}


.membership-member-mode__benefit--three {
    margin-left:
        2%;
}


.membership-member-mode__benefit--four {
    margin-left:
        12%;
}


.membership-member-mode__benefit--five {
    margin-left:
        5%;
}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

.membership-member-mode__eyebrow {
    margin:
        0
        0
        0.45rem;

    color:
        #1477b7;

    font-size:
        0.7rem;

    font-weight:
        950;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.membership-member-mode__benefit h3 {
    margin:
        0;

    color:
        #071827;

    font-size:
        clamp(
            2rem,
            2.8vw,
            3.25rem
        );

    line-height:
        0.95;

    letter-spacing:
        -0.05em;
}


.membership-member-mode__benefit > p:not(
    .membership-member-mode__eyebrow
) {
    max-width:
        540px;

    margin:
        0.85rem
        0
        0;

    color:
        #3a5669;

    font-size:
        0.98rem;

    line-height:
        1.55;
}


.membership-member-mode__benefit strong {
    display:
        block;

    margin-top:
        0.85rem;

    color:
        #071827;

    font-size:
        0.82rem;

    font-weight:
        900;
}


/* ==========================================================
   BENEFIT ACCENT COLORS
   ========================================================== */

.membership-member-mode__benefit--two::before,
.membership-member-mode__benefit--four::before {
    background:
        #ffd447;
}


.membership-member-mode__benefit--two
.membership-member-mode__eyebrow,

.membership-member-mode__benefit--four
.membership-member-mode__eyebrow {
    color:
        #a86e00;
}


/* ==========================================================
   SOFT WATER STREAK ACROSS LADDER
   ========================================================== */

.membership-member-mode__benefits::after {
    content: "";

    position: absolute;
    z-index: -1;

    top:
        36%;

    right:
        -170px;

    width:
        620px;

    height:
        260px;

    opacity:
        0.065;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat;

    transform:
        rotate(11deg);

    pointer-events:
        none;
}


/* ==========================================================
   BUBBLES
   ========================================================== */

.membership-member-mode__statement::after {
    content: "";

    position: absolute;

    right:
        4%;

    bottom:
        -110px;

    width:
        60px;

    height:
        60px;

    border:
        1px solid
        rgba(72, 168, 218, 0.16);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(255, 255, 255, 0.75),
            rgba(126, 210, 246, 0.13) 38%,
            transparent 70%
        );

    box-shadow:
        55px 44px 0 -20px rgba(105, 196, 238, 0.10),
        -38px 73px 0 -23px rgba(105, 196, 238, 0.09);

    pointer-events:
        none;
}


/* ==========================================================
   DESKTOP SHORT HEIGHT
   ========================================================== */

@media
    (min-width: 1051px)
    and (max-height: 850px) {

    .membership-member-mode {
        min-height:
            760px;

        padding-top:
            5.5rem;

        padding-bottom:
            5.5rem;
    }


    .membership-member-mode__statement h2 {
        font-size:
            clamp(
                4rem,
                5vw,
                5.8rem
            );
    }


    .membership-member-mode__benefit {
        padding-top:
            1.4rem;

        padding-bottom:
            1.5rem;
    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .membership-member-mode {
        min-height:
            0;
    }


    .membership-member-mode__inner {
        grid-template-columns:
            1fr;

        gap:
            4rem;

        width:
            min(
                calc(100% - 40px),
                900px
            );
    }


    .membership-member-mode__statement {
        max-width:
            720px;
    }


    .membership-member-mode__benefits {
        max-width:
            760px;

        margin-left:
            auto;
    }


    .membership-member-mode__benefit--one,
    .membership-member-mode__benefit--two,
    .membership-member-mode__benefit--three,
    .membership-member-mode__benefit--four,
    .membership-member-mode__benefit--five {
        margin-left:
            0;
    }


    .membership-member-mode__word {
        font-size:
            16vw;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .membership-member-mode {
        padding:
            5rem
            0;
    }


    .membership-member-mode__inner {
        width:
            calc(100% - 32px);

        gap:
            3rem;
    }


    .membership-member-mode__statement h2 {
        font-size:
            clamp(
                3.5rem,
                15vw,
                4.8rem
            );
    }


    .membership-member-mode__benefit {
        padding-left:
            3.25rem;
    }


    .membership-member-mode__benefits::before {
        left:
            13px;
    }


    .membership-member-mode__benefit::before {
        left:
            6px;
    }


    .membership-member-mode__word {
        bottom:
            0;

        font-size:
            19vw;
    }


    .membership-member-mode::after {
        width:
            520px;

        height:
            260px;

        right:
            -280px;

        opacity:
            0.06;
    }


    .membership-member-mode__statement::after {
        display:
            none;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBER MODE HEADLINE TWO LINE LOCK
   ========================================================================== */

@media (min-width: 1051px) {

    /*
       Give the statement enough room for:
       The car stays
       on our radar.
    */

    .membership-member-mode__inner {
        grid-template-columns:
            minmax(540px, 0.95fr)
            minmax(560px, 1.05fr) !important;

        gap:
            clamp(
                3.5rem,
                6vw,
                7rem
            ) !important;
    }


    .membership-member-mode__statement {
        max-width:
            620px;
    }


    .membership-member-mode__statement h2 {
        width:
            max-content;

        max-width:
            620px !important;

        font-size:
            clamp(
                4rem,
                4.8vw,
                5.8rem
            ) !important;

        line-height:
            0.9 !important;
    }


    /*
       The blue phrase is already a block.
       Keep the entire phrase together.
    */

    .membership-member-mode__statement h2 span {
        display:
            block;

        width:
            max-content;

        white-space:
            nowrap;
    }

}


/* ==========================================================
   TABLET AND MOBILE

   Allow natural wrapping again when screen width actually
   requires it.
   ========================================================== */

@media (max-width: 1050px) {

    .membership-member-mode__statement h2 {
        width:
            auto;
    }


    .membership-member-mode__statement h2 span {
        width:
            auto;

        white-space:
            normal;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBER MODE HEADLINE WEIGHT BOOST
   ========================================================================== */

@media (min-width: 1051px) {

    .membership-member-mode__statement {
        max-width:
            680px !important;
    }


    .membership-member-mode__statement h2 {
        max-width:
            680px !important;

        font-size:
            clamp(
                4.8rem,
                5.6vw,
                6.7rem
            ) !important;

        line-height:
            0.86 !important;

        letter-spacing:
            -0.07em !important;
    }


    .membership-member-mode__statement h2 span {
        margin-top:
            0.05em !important;
    }

}


/* Slightly restrained on shorter desktop screens */

@media
    (min-width: 1051px)
    and (max-height: 850px) {

    .membership-member-mode__statement h2 {
        font-size:
            clamp(
                4.4rem,
                5.1vw,
                6.1rem
            ) !important;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBER MODE BACKGROUND WORD FINAL POLISH
   ========================================================================== */

.membership-member-mode__word {
    left:
        clamp(
            1rem,
            3vw,
            4rem
        ) !important;

    bottom:
        0.02em !important;

    font-size:
        clamp(
            7.5rem,
            14vw,
            16rem
        ) !important;

    line-height:
        0.78 !important;

    letter-spacing:
        -0.07em !important;

    color:
        rgba(6, 45, 71, 0.038) !important;
}


/* Tablet */

@media (max-width: 1050px) {

    .membership-member-mode__word {
        left:
            1rem !important;

        bottom:
            0.04em !important;

        font-size:
            14vw !important;
    }
}


/* Mobile */

@media (max-width: 700px) {

    .membership-member-mode__word {
        left:
            0.5rem !important;

        bottom:
            0.1em !important;

        font-size:
            17vw !important;
    }
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBER MODE STICKY STATEMENT
   ========================================================================== */

/*
   Keep the Section 04 statement visible while the benefit ladder
   scrolls beside it.

   Sticky is intentionally desktop-only.
*/

@media (min-width: 1051px) {

    .membership-member-mode__inner {
        align-items:
            start !important;
    }


    .membership-member-mode__statement {
        position:
            sticky !important;

        top:
            clamp(
                2.5rem,
                9vh,
                6rem
            );

        align-self:
            start;

        height:
            max-content;

        z-index:
            3;
    }

}


/* ==========================================================
   TABLET + MOBILE
   Return to normal document flow.
   ========================================================== */

@media (max-width: 1050px) {

    .membership-member-mode__statement {
        position:
            relative !important;

        top:
            auto !important;

        height:
            auto;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBER MODE STICKY REPAIR V2
   ========================================================================== */

/*
   overflow:hidden prevents sticky descendants from anchoring
   to the viewport.

   overflow:clip keeps decorative artwork contained without
   creating the scroll container that breaks sticky.
*/

.membership-member-mode {
    overflow:
        clip !important;
}


@media (min-width: 1051px) {

    .membership-member-mode__inner {
        align-items:
            start !important;
    }


    .membership-member-mode__statement {
        position:
            sticky !important;

        top:
            7.5rem !important;

        align-self:
            start !important;

        height:
            fit-content !important;

        z-index:
            4 !important;
    }

}


/* ==========================================================
   TABLET + MOBILE
   ========================================================== */

@media (max-width: 1050px) {

    .membership-member-mode {
        overflow:
            hidden !important;
    }


    .membership-member-mode__statement {
        position:
            relative !important;

        top:
            auto !important;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS SECTION 05 COMPARE
   ========================================================================== */

.membership-compare {
    position: relative;
    isolation: isolate;
    overflow: clip;

    padding:
        clamp(6.5rem, 8vw, 8.5rem)
        0
        clamp(6.5rem, 8vw, 8.5rem);

    background:
        linear-gradient(
            180deg,
            #f7fbfe 0%,
            #edf7fc 100%
        );

    color:
        #071827;
}


/* ==========================================================
   TOP TRANSITION
   ========================================================== */

.membership-compare::before {
    content: "";

    position: absolute;
    z-index: 3;

    top: 0;
    left: 0;
    right: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #ffd447 0%,
            #ffd447 18%,
            #72c9f3 18%,
            #72c9f3 100%
        );

    pointer-events: none;
}


/* ==========================================================
   MAIN CONTAINER
   ========================================================== */

.membership-compare__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            calc(100% - 64px),
            1420px
        );

    margin-inline: auto;
}


/* ==========================================================
   INTRO
   ========================================================== */

.membership-compare__intro {
    max-width: 1050px;

    margin-bottom:
        clamp(4rem, 6vw, 5rem);
}


.membership-compare__intro h2 {
    max-width: 1050px;

    margin:
        1rem
        0
        0;

    font-size:
        clamp(
            4rem,
            5.6vw,
            6.3rem
        );

    line-height: 0.9;

    letter-spacing: -0.06em;
}


.membership-compare__intro h2 span {
    display: block;

    color: #1474b4;
}


.membership-compare__intro > p:last-child {
    max-width: 720px;

    margin:
        1.6rem
        0
        0;

    color: #365166;

    font-size: 1.05rem;
    line-height: 1.62;
}


/* ==========================================================
   SPLIT TRACKS
   ========================================================== */

.membership-compare__tracks {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        90px
        minmax(0, 1fr);

    align-items: stretch;

    min-height: 620px;
}


/* ==========================================================
   LEFT / MAINTAIN SIDE
   ========================================================== */

.membership-compare__track--maintain {
    position: relative;

    padding:
        3.5rem
        clamp(2.5rem, 4vw, 4rem);

    background:
        linear-gradient(
            145deg,
            #061d30 0%,
            #0a3653 100%
        );

    color: #ffffff;
}


.membership-compare__track--maintain::before {
    content: "";

    position: absolute;

    top: -70px;
    left: -100px;

    width: 480px;
    height: 220px;

    opacity: 0.13;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat;

    transform: rotate(7deg);

    pointer-events: none;
}


/* ==========================================================
   RIGHT / RECOVER SIDE
   ========================================================== */

.membership-compare__track--recover {
    position: relative;

    padding:
        3.5rem
        clamp(2.5rem, 4vw, 4rem);

    background:
        linear-gradient(
            145deg,
            #e4f2f9 0%,
            #cfe7f3 100%
        );

    color: #071827;
}


.membership-compare__track--recover::before {
    content: "";

    position: absolute;

    right: -100px;
    bottom: -70px;

    width: 460px;
    height: 220px;

    opacity: 0.08;

    background:
        url("../images/fleet-water-splash.webp")
        center / contain
        no-repeat;

    transform: rotate(-9deg);

    pointer-events: none;
}


/* ==========================================================
   TRACK LABELS + HEADINGS
   ========================================================== */

.membership-compare__track-label {
    position: relative;
    z-index: 2;

    margin-bottom: 0.9rem;

    font-size: 0.72rem;
    font-weight: 950;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.membership-compare__track--maintain
.membership-compare__track-label {
    color: #ffd447;
}


.membership-compare__track--recover
.membership-compare__track-label {
    color: #126aa4;
}


.membership-compare__track h3 {
    position: relative;
    z-index: 2;

    margin: 0;

    font-size:
        clamp(
            3rem,
            3.7vw,
            4.5rem
        );

    line-height: 0.92;

    letter-spacing: -0.055em;
}


.membership-compare__track--maintain h3 {
    color: #ffffff;
}


.membership-compare__track--recover h3 {
    color: #071827;
}


.membership-compare__track-lead {
    position: relative;
    z-index: 2;

    max-width: 500px;

    margin:
        1rem
        0
        2.5rem;

    font-size: 1rem;
    line-height: 1.58;
}


.membership-compare__track--maintain
.membership-compare__track-lead {
    color: rgba(255, 255, 255, 0.78);
}


.membership-compare__track--recover
.membership-compare__track-lead {
    color: #365166;
}


/* ==========================================================
   STEPS
   ========================================================== */

.membership-compare__sequence {
    position: relative;
    z-index: 2;
}


.membership-compare__step {
    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr);

    gap: 1rem;

    padding:
        1.45rem
        0;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.15);
}


.membership-compare__track--recover
.membership-compare__step {
    border-top-color:
        rgba(7, 57, 88, 0.18);
}


.membership-compare__step > span {
    color: #72cdf5;

    font-size: 0.76rem;
    font-weight: 950;
}


.membership-compare__track--recover
.membership-compare__step > span {
    color: #1474b4;
}


.membership-compare__step strong {
    display: block;

    font-size: 1.05rem;
}


.membership-compare__step p {
    margin:
        0.35rem
        0
        0;

    font-size: 0.94rem;
    line-height: 1.45;
}


.membership-compare__track--maintain
.membership-compare__step p {
    color: rgba(255, 255, 255, 0.72);
}


.membership-compare__track--recover
.membership-compare__step p {
    color: #415d70;
}


/* ==========================================================
   RESULT
   ========================================================== */

.membership-compare__result {
    position: relative;
    z-index: 2;

    margin-top: 2rem;
    padding-top: 1.6rem;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.18);
}


.membership-compare__track--recover
.membership-compare__result {
    border-top-color:
        rgba(7, 57, 88, 0.18);
}


.membership-compare__result span {
    display: block;

    margin-bottom: 0.45rem;

    font-size: 0.68rem;
    font-weight: 950;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.membership-compare__track--maintain
.membership-compare__result span {
    color: #72cdf5;
}


.membership-compare__track--recover
.membership-compare__result span {
    color: #1474b4;
}


.membership-compare__result strong {
    display: block;

    font-size:
        clamp(
            1.3rem,
            1.7vw,
            1.7rem
        );

    line-height: 1.25;
}


/* ==========================================================
   CENTER OR DIVIDER
   ========================================================== */

.membership-compare__divider {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            180deg,
            #f4f9fc 0%,
            #e8f3f9 100%
        );
}


.membership-compare__divider::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(13, 89, 134, 0.22) 15%,
            rgba(13, 89, 134, 0.22) 85%,
            transparent 100%
        );
}


.membership-compare__divider span {
    position: relative;
    z-index: 2;

    display: grid;

    width: 54px;
    height: 54px;

    place-items: center;

    border:
        1px solid
        rgba(13, 89, 134, 0.20);

    border-radius: 50%;

    background: #f4f9fc;

    color: #0d5986;

    font-size: 0.7rem;
    font-weight: 950;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.membership-compare__footer {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 3rem;

    padding-top: 2.75rem;
}


.membership-compare__footer p {
    margin: 0;

    color: #294356;
}


.membership-compare__footer p strong {
    color: #071827;
}


.membership-compare__link {
    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    color: #071827;

    font-size: 0.78rem;
    font-weight: 950;

    text-decoration: none;
    text-transform: uppercase;
}


.membership-compare__link span {
    color: #1474b4;

    font-size: 1.35rem;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .membership-compare__inner {
        width:
            min(
                calc(100% - 40px),
                900px
            );
    }


    .membership-compare__tracks {
        grid-template-columns:
            1fr;

        min-height: 0;
    }


    .membership-compare__divider {
        min-height: 80px;
    }


    .membership-compare__divider::before {
        top: 50%;
        bottom: auto;
        left: 0;
        right: 0;

        width: auto;
        height: 1px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .membership-compare {
        padding:
            5rem
            0;
    }


    .membership-compare__inner {
        width:
            calc(100% - 32px);
    }


    .membership-compare__intro h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    .membership-compare__track--maintain,
    .membership-compare__track--recover {
        padding:
            2.5rem
            1.5rem;
    }


    .membership-compare__footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 1.5rem;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS SECTION 05 EDGE SOFTEN
   ========================================================================== */


/* ==========================================================
   LET BOTH TRACKS FEEL BUILT INTO THE SECTION
   ========================================================== */

.membership-compare__track--maintain {
    margin-left:
        -1.5rem;

    padding-left:
        calc(
            clamp(2.5rem, 4vw, 4rem)
            + 1.5rem
        );

    background:
        linear-gradient(
            145deg,
            rgba(6, 29, 48, 1) 0%,
            rgba(10, 54, 83, 0.98) 72%,
            rgba(10, 54, 83, 0.90) 100%
        ) !important;
}


.membership-compare__track--recover {
    margin-right:
        -1.5rem;

    padding-right:
        calc(
            clamp(2.5rem, 4vw, 4rem)
            + 1.5rem
        );

    background:
        linear-gradient(
            145deg,
            rgba(228, 242, 249, 0.96) 0%,
            rgba(207, 231, 243, 0.90) 74%,
            rgba(207, 231, 243, 0.72) 100%
        ) !important;
}


/* ==========================================================
   SOFT OUTER FADES
   ========================================================== */

.membership-compare__track--maintain::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    right: -35px;

    width: 95px;

    background:
        linear-gradient(
            90deg,
            rgba(10, 54, 83, 0.84) 0%,
            rgba(10, 54, 83, 0.38) 48%,
            rgba(10, 54, 83, 0) 100%
        );

    pointer-events: none;
}


.membership-compare__track--recover::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: -35px;

    width: 95px;

    background:
        linear-gradient(
            90deg,
            rgba(207, 231, 243, 0) 0%,
            rgba(207, 231, 243, 0.36) 50%,
            rgba(207, 231, 243, 0.84) 100%
        );

    pointer-events: none;
}


/* ==========================================================
   KEEP CONTENT ABOVE THE SOFTENING LAYERS
   ========================================================== */

.membership-compare__track--maintain
> *,

.membership-compare__track--recover
> * {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   TABLET + MOBILE
   ========================================================== */

@media (max-width: 1050px) {

    .membership-compare__track--maintain,
    .membership-compare__track--recover {
        margin-left:
            0;

        margin-right:
            0;
    }


    .membership-compare__track--maintain {
        padding-left:
            clamp(2.5rem, 4vw, 4rem);
    }


    .membership-compare__track--recover {
        padding-right:
            clamp(2.5rem, 4vw, 4rem);
    }


    .membership-compare__track--maintain::after,
    .membership-compare__track--recover::after {
        display:
            none;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SECTION 05 REMOVE EDGE BANDS
   ========================================================================== */

.membership-compare__track--maintain::after,
.membership-compare__track--recover::after {
    content: none !important;
    display: none !important;
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIP COMPARE RANDOM BUBBLES
   ========================================================================== */

.membership-compare__track--maintain,
.membership-compare__track--recover {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.membership-compare__track--maintain > *,
.membership-compare__track--recover > * {
    position: relative;
    z-index: 1;
}

.membership-compare__track--maintain::after,
.membership-compare__track--recover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-repeat: no-repeat;
}

.membership-compare__track--maintain::after {
    background-image:
        radial-gradient(circle at 78% 18%, rgba(197, 232, 255, 0.34) 0 10px, rgba(197, 232, 255, 0.16) 10px 17px, rgba(197, 232, 255, 0) 17px 24px),
        radial-gradient(circle at 70% 26%, rgba(197, 232, 255, 0.26) 0 7px, rgba(197, 232, 255, 0.12) 7px 12px, rgba(197, 232, 255, 0) 12px 18px),
        radial-gradient(circle at 84% 34%, rgba(197, 232, 255, 0.20) 0 5px, rgba(197, 232, 255, 0.10) 5px 9px, rgba(197, 232, 255, 0) 9px 14px),
        radial-gradient(circle at 62% 80%, rgba(197, 232, 255, 0.22) 0 8px, rgba(197, 232, 255, 0.10) 8px 14px, rgba(197, 232, 255, 0) 14px 20px),
        radial-gradient(circle at 74% 88%, rgba(197, 232, 255, 0.15) 0 5px, rgba(197, 232, 255, 0.08) 5px 9px, rgba(197, 232, 255, 0) 9px 14px);
}

.membership-compare__track--recover::after {
    background-image:
        radial-gradient(circle at 18% 20%, rgba(170, 216, 244, 0.20) 0 9px, rgba(170, 216, 244, 0.10) 9px 15px, rgba(170, 216, 244, 0) 15px 21px),
        radial-gradient(circle at 26% 28%, rgba(170, 216, 244, 0.14) 0 6px, rgba(170, 216, 244, 0.08) 6px 10px, rgba(170, 216, 244, 0) 10px 15px),
        radial-gradient(circle at 88% 16%, rgba(170, 216, 244, 0.16) 0 7px, rgba(170, 216, 244, 0.08) 7px 12px, rgba(170, 216, 244, 0) 12px 18px),
        radial-gradient(circle at 14% 78%, rgba(170, 216, 244, 0.12) 0 5px, rgba(170, 216, 244, 0.06) 5px 9px, rgba(170, 216, 244, 0) 9px 14px),
        radial-gradient(circle at 24% 86%, rgba(170, 216, 244, 0.18) 0 8px, rgba(170, 216, 244, 0.08) 8px 13px, rgba(170, 216, 244, 0) 13px 19px);
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIP COMPARE BUBBLES V2
   ========================================================================== */

.membership-compare__track--maintain::after {
    background-image:
        radial-gradient(circle at 78% 18%, rgba(201, 236, 255, 0.62) 0 13px, rgba(126, 202, 244, 0.30) 13px 21px, rgba(126, 202, 244, 0.08) 21px 25px, transparent 26px),
        radial-gradient(circle at 68% 29%, rgba(201, 236, 255, 0.48) 0 9px, rgba(126, 202, 244, 0.24) 9px 15px, transparent 16px),
        radial-gradient(circle at 87% 37%, rgba(201, 236, 255, 0.44) 0 7px, rgba(126, 202, 244, 0.20) 7px 12px, transparent 13px),
        radial-gradient(circle at 59% 76%, rgba(201, 236, 255, 0.42) 0 11px, rgba(126, 202, 244, 0.22) 11px 17px, transparent 18px),
        radial-gradient(circle at 76% 87%, rgba(201, 236, 255, 0.36) 0 7px, rgba(126, 202, 244, 0.18) 7px 12px, transparent 13px),
        radial-gradient(circle at 89% 70%, rgba(201, 236, 255, 0.30) 0 5px, rgba(126, 202, 244, 0.14) 5px 9px, transparent 10px);
}


.membership-compare__track--recover::after {
    background-image:
        radial-gradient(circle at 15% 20%, rgba(111, 191, 233, 0.38) 0 12px, rgba(77, 160, 210, 0.18) 12px 19px, transparent 20px),
        radial-gradient(circle at 28% 31%, rgba(111, 191, 233, 0.32) 0 8px, rgba(77, 160, 210, 0.15) 8px 13px, transparent 14px),
        radial-gradient(circle at 86% 18%, rgba(111, 191, 233, 0.34) 0 10px, rgba(77, 160, 210, 0.16) 10px 16px, transparent 17px),
        radial-gradient(circle at 12% 72%, rgba(111, 191, 233, 0.28) 0 7px, rgba(77, 160, 210, 0.13) 7px 11px, transparent 12px),
        radial-gradient(circle at 26% 86%, rgba(111, 191, 233, 0.30) 0 10px, rgba(77, 160, 210, 0.14) 10px 15px, transparent 16px),
        radial-gradient(circle at 74% 61%, rgba(111, 191, 233, 0.24) 0 6px, rgba(77, 160, 210, 0.11) 6px 10px, transparent 11px);
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIP COMPARE REAL BUBBLES V3
   ========================================================================== */

/*
   Earlier cleanup disabled these pseudo-elements.
   Turn them back on and use them strictly for bubble atmosphere.
*/

.membership-compare__track--maintain::after,
.membership-compare__track--recover::after {
    content: "" !important;

    display: block !important;

    position: absolute !important;

    inset: 0 !important;

    z-index: 0 !important;

    pointer-events: none !important;

    width: auto !important;
    height: auto !important;

    opacity: 1 !important;

    transform: none !important;
}


/* ==========================================================
   DARK MEMBERSHIP SIDE
   ========================================================== */

.membership-compare__track--maintain::after {
    background-image:

        radial-gradient(
            circle at 78% 16%,
            rgba(221, 244, 255, 0.62) 0 10px,
            rgba(114, 198, 241, 0.34) 11px 18px,
            rgba(114, 198, 241, 0.08) 19px 22px,
            transparent 23px
        ),

        radial-gradient(
            circle at 69% 28%,
            rgba(221, 244, 255, 0.52) 0 7px,
            rgba(114, 198, 241, 0.27) 8px 13px,
            transparent 14px
        ),

        radial-gradient(
            circle at 88% 36%,
            rgba(221, 244, 255, 0.44) 0 5px,
            rgba(114, 198, 241, 0.22) 6px 10px,
            transparent 11px
        ),

        radial-gradient(
            circle at 65% 69%,
            rgba(221, 244, 255, 0.48) 0 9px,
            rgba(114, 198, 241, 0.24) 10px 15px,
            transparent 16px
        ),

        radial-gradient(
            circle at 82% 79%,
            rgba(221, 244, 255, 0.38) 0 6px,
            rgba(114, 198, 241, 0.19) 7px 11px,
            transparent 12px
        ),

        radial-gradient(
            circle at 73% 91%,
            rgba(221, 244, 255, 0.30) 0 4px,
            rgba(114, 198, 241, 0.15) 5px 8px,
            transparent 9px
        ) !important;
}


/* ==========================================================
   LIGHT RECOVERY SIDE
   ========================================================== */

.membership-compare__track--recover::after {
    background-image:

        radial-gradient(
            circle at 18% 17%,
            rgba(58, 157, 211, 0.34) 0 11px,
            rgba(58, 157, 211, 0.16) 12px 18px,
            transparent 19px
        ),

        radial-gradient(
            circle at 29% 29%,
            rgba(58, 157, 211, 0.27) 0 7px,
            rgba(58, 157, 211, 0.13) 8px 12px,
            transparent 13px
        ),

        radial-gradient(
            circle at 84% 18%,
            rgba(58, 157, 211, 0.30) 0 9px,
            rgba(58, 157, 211, 0.14) 10px 15px,
            transparent 16px
        ),

        radial-gradient(
            circle at 12% 61%,
            rgba(58, 157, 211, 0.24) 0 6px,
            rgba(58, 157, 211, 0.11) 7px 10px,
            transparent 11px
        ),

        radial-gradient(
            circle at 23% 79%,
            rgba(58, 157, 211, 0.28) 0 8px,
            rgba(58, 157, 211, 0.13) 9px 14px,
            transparent 15px
        ),

        radial-gradient(
            circle at 72% 64%,
            rgba(58, 157, 211, 0.22) 0 5px,
            rgba(58, 157, 211, 0.10) 6px 9px,
            transparent 10px
        ) !important;
}


/* ==========================================================
   KEEP CONTENT ABOVE BUBBLES
   ========================================================== */

.membership-compare__track--maintain > *,
.membership-compare__track--recover > * {
    position: relative;
    z-index: 2;
}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS SECTION 06 FAQ
   ========================================================================== */


/* ==========================================================
   SECTION
   ========================================================== */

.membership-faq {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
        clamp(6.5rem, 8vw, 8.5rem)
        0
        clamp(6.5rem, 8vw, 8.5rem);

    background:
        linear-gradient(
            135deg,
            #061b2c 0%,
            #082f4a 52%,
            #0b3b59 100%
        );

    color:
        #ffffff;
}


/* ==========================================================
   SECTION TRANSITION
   ========================================================== */

.membership-faq::before {
    content: "";

    position: absolute;
    z-index: 4;

    top: 0;
    left: 0;
    right: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #ffd447 0%,
            #ffd447 18%,
            #72c9f3 18%,
            #72c9f3 100%
        );

    pointer-events: none;
}


/* ==========================================================
   REAL WATER ART
   ========================================================== */

.membership-faq::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: -120px;
    right: -100px;

    width: 900px;
    height: 380px;

    opacity: 0.11;

    background:
        url("../images/maintenance-water-stream-top.webp")
        center / contain
        no-repeat;

    transform:
        rotate(-4deg);

    pointer-events: none;
}


/* ==========================================================
   MAIN WRAPPER
   ========================================================== */

.membership-faq__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            calc(100% - 64px),
            1420px
        );

    margin-inline: auto;
}


/* ==========================================================
   INTRO
   ========================================================== */

.membership-faq__intro {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.55fr);

    gap:
        clamp(4rem, 8vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(4rem, 6vw, 5rem);
}


.membership-faq .section-label {
    color:
        #ffd447 !important;
}


.membership-faq__intro h2 {
    max-width: 980px;

    margin:
        1rem
        0
        0;

    color: #ffffff;

    font-size:
        clamp(
            4rem,
            5.4vw,
            6.2rem
        );

    line-height: 0.9;

    letter-spacing: -0.06em;
}


.membership-faq__intro h2 span {
    display: block;

    color:
        #71cdf5;
}


.membership-faq__lead {
    max-width: 470px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.82);

    font-size:
        1.05rem;

    line-height:
        1.65;
}


.membership-faq__note {
    max-width: 470px;

    margin:
        1.4rem
        0
        0;

    padding-top:
        1.25rem;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.18);

    color:
        #ffffff;

    font-size:
        0.92rem;

    font-weight:
        800;

    line-height:
        1.55;
}


/* ==========================================================
   INTRO BUBBLE CLUSTER
   ========================================================== */

.membership-faq__intro::after {
    content: "";

    position: absolute;

    right: -2rem;
    top: -4rem;

    width: 180px;
    height: 180px;

    opacity: 0.16;

    background:
        url("../images/services-bubble-cluster.webp")
        center / contain
        no-repeat;

    pointer-events: none;
}


/* ==========================================================
   ACCORDION
   ========================================================== */

.membership-faq__accordion {
    position: relative;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.20);
}


/* soft water glow behind rows */

.membership-faq__accordion::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 18%;
    left: 12%;

    width: 760px;
    height: 360px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(91, 194, 239, 0.10) 0%,
            rgba(54, 147, 200, 0.035) 44%,
            transparent 72%
        );

    pointer-events: none;
}


/* ==========================================================
   FAQ ITEM
   ========================================================== */

.membership-faq__item {
    position: relative;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.18);
}


.membership-faq__item.is-open {
    background:
        linear-gradient(
            90deg,
            rgba(106, 205, 247, 0.055),
            rgba(255, 255, 255, 0.018) 68%,
            transparent
        );
}


/* ==========================================================
   QUESTION BUTTON
   ========================================================== */

.membership-faq__question {
    display: grid;

    grid-template-columns:
        72px
        minmax(0, 1fr)
        56px;

    gap:
        1.5rem;

    align-items:
        center;

    width:
        100%;

    margin:
        0;

    padding:
        2rem
        0;

    border:
        0;

    background:
        transparent;

    color:
        #ffffff;

    font:
        inherit;

    text-align:
        left;

    cursor:
        pointer;
}


.membership-faq__number {
    color:
        #71cdf5;

    font-size:
        0.76rem;

    font-weight:
        950;
}


.membership-faq__question-text {
    font-size:
        clamp(
            1.75rem,
            2.5vw,
            3rem
        );

    font-weight:
        900;

    line-height:
        1.05;

    letter-spacing:
        -0.035em;
}


/* ==========================================================
   PLUS / X CONTROL
   ========================================================== */

.membership-faq__icon {
    display: grid;

    width: 44px;
    height: 44px;

    place-items: center;

    justify-self:
        end;

    border:
        1px solid
        rgba(113, 205, 245, 0.36);

    border-radius:
        50%;

    color:
        #71cdf5;

    font-size:
        1.55rem;

    font-weight:
        400;

    line-height:
        1;

    transition:
        transform 220ms ease,
        background-color 220ms ease,
        color 220ms ease;
}


.membership-faq__item.is-open
.membership-faq__icon {
    transform:
        rotate(45deg);

    background:
        #ffd447;

    border-color:
        #ffd447;

    color:
        #071827;
}


/* ==========================================================
   ANSWERS
   ========================================================== */

.membership-faq__answer[hidden] {
    display:
        none !important;
}


.membership-faq__answer {
    padding:
        0
        56px
        2.3rem
        96px;
}


.membership-faq__answer-inner {
    max-width:
        780px;
}


.membership-faq__answer p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.75);

    font-size:
        1rem;

    line-height:
        1.7;
}


/* ==========================================================
   HOVER
   ========================================================== */

@media (hover: hover) {

    .membership-faq__question:hover
    .membership-faq__question-text {
        color:
            #71cdf5;
    }


    .membership-faq__question:hover
    .membership-faq__icon {
        border-color:
            rgba(255, 212, 71, 0.65);
    }

}


/* ==========================================================
   LOWER WATER ART
   ========================================================== */

.membership-faq__accordion::after {
    content: "";

    position: absolute;
    z-index: -1;

    right: -130px;
    bottom: -60px;

    width: 380px;
    height: 260px;

    opacity:
        0.11;

    background:
        url("../images/services-bubble-cluster.webp")
        center / contain
        no-repeat;

    transform:
        rotate(14deg);

    pointer-events: none;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.membership-faq__footer {
    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        3rem;

    padding-top:
        2.75rem;
}


.membership-faq__footer p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.73);

    font-size:
        1rem;
}


.membership-faq__footer p strong {
    color:
        #ffffff;
}


.membership-faq__link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    color:
        #ffffff;

    font-size:
        0.78rem;

    font-weight:
        950;

    text-decoration:
        none;

    text-transform:
        uppercase;
}


.membership-faq__link span {
    color:
        #ffd447;

    font-size:
        1.35rem;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .membership-faq__inner {
        width:
            min(
                calc(100% - 40px),
                900px
            );
    }


    .membership-faq__intro {
        grid-template-columns:
            1fr;

        gap:
            2rem;
    }


    .membership-faq::after {
        width:
            650px;

        height:
            300px;

        right:
            -250px;

        opacity:
            0.08;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .membership-faq {
        padding:
            5rem
            0;
    }


    .membership-faq__inner {
        width:
            calc(100% - 32px);
    }


    .membership-faq__intro h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    .membership-faq__question {
        grid-template-columns:
            32px
            minmax(0, 1fr)
            42px;

        gap:
            0.8rem;

        padding:
            1.6rem
            0;
    }


    .membership-faq__question-text {
        font-size:
            1.55rem;
    }


    .membership-faq__icon {
        width:
            36px;

        height:
            36px;
    }


    .membership-faq__answer {
        padding:
            0
            0
            1.8rem
            40px;
    }


    .membership-faq__intro::after {
        display:
            none;
    }


    .membership-faq__footer {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1.5rem;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIP FAQ INTRO COMPOSITION FIX
   ========================================================================== */

.membership-faq__intro {
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(340px, 0.55fr) !important;

    align-items:
        start !important;

    gap:
        clamp(
            3.5rem,
            7vw,
            7rem
        ) !important;

    margin-bottom:
        clamp(
            3rem,
            4.5vw,
            4rem
        ) !important;
}


.membership-faq__intro > div:first-child {
    max-width:
        900px;
}


.membership-faq__intro h2 {
    max-width:
        900px !important;

    font-size:
        clamp(
            4.4rem,
            5.8vw,
            6.6rem
        ) !important;

    line-height:
        0.88 !important;
}


.membership-faq__intro h2 span {
    display:
        block;

    margin-top:
        0.05em;
}


.membership-faq__lead,
.membership-faq__note {
    max-width:
        460px;
}


.membership-faq__intro > *:last-child {
    align-self:
        end;
}


/* keep the water artwork on the right side of the intro */

.membership-faq__intro::after {
    right:
        -1rem !important;

    top:
        -2.5rem !important;

    width:
        160px !important;

    height:
        160px !important;

    opacity:
        0.14 !important;
}


/* tablet */

@media (max-width: 1050px) {

    .membership-faq__intro {
        grid-template-columns:
            1fr !important;

        gap:
            2rem !important;
    }


    .membership-faq__intro h2 {
        max-width:
            760px !important;
    }


    .membership-faq__lead,
    .membership-faq__note {
        max-width:
            620px;
    }

}


/* mobile */

@media (max-width: 700px) {

    .membership-faq__intro h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            ) !important;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - FAQ INTRO GRID AREA REPAIR
   ========================================================================== */

.membership-faq__intro {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(340px, 0.55fr) !important;

    grid-template-areas:
        "label copy"
        "title copy" !important;

    column-gap:
        clamp(
            4rem,
            8vw,
            8rem
        ) !important;

    row-gap:
        1rem !important;

    align-items:
        start !important;

    margin-bottom:
        clamp(
            3rem,
            4vw,
            4rem
        ) !important;
}


/* label stays above headline */

.membership-faq__intro > .section-label {
    grid-area:
        label !important;

    align-self:
        end !important;

    margin:
        0 !important;
}


/* headline gets the full left column */

.membership-faq__intro > h2 {
    grid-area:
        title !important;

    width:
        100% !important;

    max-width:
        900px !important;

    margin:
        0 !important;

    font-size:
        clamp(
            4.5rem,
            6vw,
            6.8rem
        ) !important;

    line-height:
        0.88 !important;
}


/* keep blue phrase together naturally */

.membership-faq__intro > h2 span {
    display:
        block !important;

    margin-top:
        0.04em !important;
}


/* right-side copy stack */

.membership-faq__lead {
    grid-area:
        copy !important;

    align-self:
        start !important;

    max-width:
        470px !important;

    margin:
        2.8rem
        0
        0 !important;
}


.membership-faq__note {
    grid-area:
        copy !important;

    align-self:
        end !important;

    max-width:
        470px !important;

    margin:
        0
        0
        0 !important;

    transform:
        translateY(10.5rem);
}


/* pull accordion upward now that the intro is compact */

.membership-faq__accordion {
    margin-top:
        1rem !important;
}


/* tablet */

@media (max-width: 1050px) {

    .membership-faq__intro {
        grid-template-columns:
            1fr !important;

        grid-template-areas:
            "label"
            "title"
            "copy" !important;

        gap:
            1rem !important;
    }


    .membership-faq__lead,
    .membership-faq__note {
        grid-area:
            auto !important;

        max-width:
            650px !important;

        margin-top:
            1rem !important;

        transform:
            none !important;
    }

}


/* mobile */

@media (max-width: 700px) {

    .membership-faq__intro > h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            ) !important;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - FAQ INTRO FINAL ALIGNMENT
   ========================================================================== */

@media (min-width: 1051px) {

    .membership-faq__intro {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1.38fr)
            minmax(320px, 0.62fr) !important;

        grid-template-rows:
            auto
            auto
            auto !important;

        column-gap:
            clamp(
                4rem,
                7vw,
                7rem
            ) !important;

        row-gap:
            1rem !important;

        align-items:
            start !important;
    }


    .membership-faq__intro > .section-label {
        grid-column:
            1 !important;

        grid-row:
            1 !important;
    }


    .membership-faq__intro > h2 {
        grid-column:
            1 !important;

        grid-row:
            2 / span 2 !important;

        width:
            100% !important;

        max-width:
            860px !important;

        font-size:
            clamp(
                4.3rem,
                5.25vw,
                6rem
            ) !important;

        line-height:
            0.88 !important;
    }


    .membership-faq__intro > h2 span {
        display:
            block !important;

        white-space:
            nowrap;

        margin-top:
            0.05em !important;
    }


    .membership-faq__lead {
        grid-column:
            2 !important;

        grid-row:
            2 !important;

        align-self:
            start !important;

        margin:
            0 !important;

        max-width:
            430px !important;
    }


    .membership-faq__note {
        grid-column:
            2 !important;

        grid-row:
            3 !important;

        align-self:
            start !important;

        margin:
            1.25rem
            0
            0 !important;

        padding-top:
            1.25rem !important;

        max-width:
            430px !important;

        transform:
            none !important;
    }


    .membership-faq__accordion {
        margin-top:
            0 !important;
    }

}


/* ==========================================================
   TABLET + MOBILE
   ========================================================== */

@media (max-width: 1050px) {

    .membership-faq__intro > h2 span {
        white-space:
            normal;
    }


    .membership-faq__note {
        transform:
            none !important;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - FAQ BLUE HEADLINE SINGLE LINE
   ========================================================================== */

@media (min-width: 1051px) {

    .membership-faq__intro {
        grid-template-columns:
            minmax(0, 1.48fr)
            minmax(320px, 0.52fr) !important;
    }


    .membership-faq__intro > h2 {
        max-width:
            980px !important;

        font-size:
            clamp(
                4.15rem,
                5vw,
                5.8rem
            ) !important;
    }


    .membership-faq__intro > h2 span {
        display:
            block !important;

        width:
            max-content;

        white-space:
            nowrap !important;
    }

}


/* Tablet and mobile can wrap naturally */

@media (max-width: 1050px) {

    .membership-faq__intro > h2 span {
        width:
            auto;

        white-space:
            normal !important;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - MEMBERSHIPS SECTION 07 ESTIMATE HANDOFF
   ========================================================================== */

.membership-estimate {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
        clamp(6.5rem, 8vw, 8.5rem)
        0
        clamp(6.5rem, 8vw, 8.5rem);

    background:
        linear-gradient(
            135deg,
            #f7fcff 0%,
            #eaf6fc 55%,
            #dceef8 100%
        );

    color: #071827;
}


/* top transition */

.membership-estimate::before {
    content: "";

    position: absolute;
    z-index: 4;

    top: 0;
    left: 0;
    right: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #ffd447 0%,
            #ffd447 18%,
            #72c9f3 18%,
            #72c9f3 100%
        );

    pointer-events: none;
}


/* water atmosphere */

.membership-estimate::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: -90px;
    right: -90px;

    width: 820px;
    height: 360px;

    opacity: 0.11;

    background:
        url("../images/maintenance-water-stream-top.webp")
        center / contain
        no-repeat;

    transform:
        rotate(-4deg);

    pointer-events: none;
}


.membership-estimate__inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(460px, 0.82fr);

    gap:
        clamp(5rem, 9vw, 10rem);

    width:
        min(
            calc(100% - 64px),
            1420px
        );

    margin-inline: auto;

    align-items: start;
}


/* left copy */

.membership-estimate__copy {
    position: relative;
}


.membership-estimate__copy h2 {
    max-width: 860px;

    margin:
        1rem
        0
        0;

    font-size:
        clamp(
            4.3rem,
            5.6vw,
            6.4rem
        );

    line-height: 0.9;

    letter-spacing: -0.06em;
}


.membership-estimate__copy h2 span {
    display: block;

    margin-top: 0.05em;

    color: #1474b4;
}


.membership-estimate__lead {
    max-width: 620px;

    margin:
        2rem
        0
        0;

    color: #365166;

    font-size: 1.05rem;

    line-height: 1.62;
}


.membership-estimate__note {
    max-width: 600px;

    margin:
        1.5rem
        0
        0;

    padding-top:
        1.25rem;

    border-top:
        1px solid
        rgba(7, 57, 88, 0.18);

    color: #294356;

    font-size: 0.98rem;
}


.membership-estimate__note strong {
    color: #071827;
}


/* route */

.membership-estimate__route {
    position: relative;

    padding-top: 0.5rem;
}


.membership-estimate__route::before {
    content: "";

    position: absolute;

    left: 20px;

    top: 76px;
    bottom: 112px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            rgba(20, 116, 180, 0.08),
            rgba(20, 116, 180, 0.32) 18%,
            rgba(20, 116, 180, 0.24) 82%,
            rgba(20, 116, 180, 0.06)
        );

    pointer-events: none;
}


.membership-estimate__route-heading {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 2rem;

    padding-bottom: 1.2rem;

    border-bottom:
        1px solid
        rgba(7, 57, 88, 0.18);
}


.membership-estimate__route-heading span {
    color: #1474b4;

    font-size: 0.72rem;

    font-weight: 950;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.membership-estimate__route-heading strong {
    color: #071827;

    font-size: 0.72rem;

    font-weight: 950;

    text-transform: uppercase;
}


/* steps */

.membership-estimate__step {
    position: relative;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr);

    gap: 1.15rem;

    align-items: start;

    padding:
        1.7rem
        0;

    border-bottom:
        1px solid
        rgba(7, 57, 88, 0.16);
}


.membership-estimate__number {
    position: relative;
    z-index: 2;

    display: grid;

    width: 42px;
    height: 42px;

    place-items: center;

    border:
        1px solid
        rgba(20, 116, 180, 0.24);

    border-radius: 50%;

    background: #edf8fd;

    color: #1474b4;

    font-size: 0.72rem;

    font-weight: 950;
}


.membership-estimate__eyebrow {
    display: block;

    margin-bottom: 0.4rem;

    color: #1474b4;

    font-size: 0.68rem;

    font-weight: 950;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.membership-estimate__step strong {
    display: block;

    color: #071827;

    font-size:
        clamp(
            1.4rem,
            1.7vw,
            1.8rem
        );

    line-height: 1.2;
}


/* actions */

.membership-estimate__actions {
    display: flex;

    align-items: center;

    gap: 1.75rem;

    padding-top: 2rem;
}


.membership-estimate__text-link {
    display: inline-flex;

    align-items: center;

    gap: 0.6rem;

    color: #071827;

    font-size: 0.78rem;

    font-weight: 950;

    text-decoration: none;

    text-transform: uppercase;
}


.membership-estimate__text-link span {
    color: #1474b4;

    font-size: 1.3rem;
}


/* bubble atmosphere */

.membership-estimate__copy::after {
    content: "";

    position: absolute;

    left: 4%;
    bottom: -150px;

    width: 180px;
    height: 180px;

    opacity: 0.13;

    background:
        url("../images/services-bubble-cluster.webp")
        center / contain
        no-repeat;

    pointer-events: none;
}


.membership-estimate__route::after {
    content: "";

    position: absolute;

    right: -100px;
    bottom: -80px;

    width: 170px;
    height: 170px;

    opacity: 0.12;

    background:
        url("../images/services-bubble-cluster.webp")
        center / contain
        no-repeat;

    transform:
        rotate(12deg);

    pointer-events: none;
}


/* tablet */

@media (max-width: 1050px) {

    .membership-estimate__inner {
        grid-template-columns: 1fr;

        gap: 4rem;

        width:
            min(
                calc(100% - 40px),
                900px
            );
    }


    .membership-estimate__route {
        max-width: 760px;

        margin-left: auto;
    }

}


/* mobile */

@media (max-width: 700px) {

    .membership-estimate {
        padding:
            5rem
            0;
    }


    .membership-estimate__inner {
        width:
            calc(100% - 32px);
    }


    .membership-estimate__copy h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    .membership-estimate__actions {
        align-items: flex-start;

        flex-direction: column;

        gap: 1.25rem;
    }


    .membership-estimate__copy::after,
    .membership-estimate__route::after {
        display: none;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SECTION 07 HEADLINE TWO LINE LOCK
   ========================================================================== */

@media (min-width: 1051px) {

    .membership-estimate__inner {
        grid-template-columns:
            minmax(620px, 1.15fr)
            minmax(460px, 0.85fr) !important;

        gap:
            clamp(
                4rem,
                7vw,
                7rem
            ) !important;
    }


    .membership-estimate__copy {
        max-width:
            760px;
    }


    .membership-estimate__copy h2 {
        width:
            max-content;

        max-width:
            760px !important;

        font-size:
            clamp(
                4rem,
                5vw,
                5.8rem
            ) !important;

        line-height:
            0.88 !important;
    }


    .membership-estimate__copy h2 span {
        display:
            block !important;

        width:
            max-content;

        white-space:
            nowrap !important;

        margin-top:
            0.04em !important;
    }

}


/* ==========================================================
   TABLET + MOBILE
   Let the headline wrap naturally when necessary.
   ========================================================== */

@media (max-width: 1050px) {

    .membership-estimate__copy h2 {
        width:
            auto;
    }


    .membership-estimate__copy h2 span {
        width:
            auto;

        white-space:
            normal !important;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - ESTIMATE HEADLINE TWO LINE REPAIR
   ========================================================================== */

@media (min-width: 1051px) {

    .membership-estimate__inner {
        grid-template-columns:
            minmax(0, 1.18fr)
            minmax(500px, 0.82fr) !important;

        gap:
            clamp(
                3.5rem,
                5vw,
                5.5rem
            ) !important;
    }


    .membership-estimate__copy {
        min-width:
            0;
    }


    .membership-estimate__copy h2 {
        width:
            max-content;

        max-width:
            none !important;

        font-size:
            clamp(
                3.85rem,
                4.35vw,
                5rem
            ) !important;

        line-height:
            0.9 !important;

        letter-spacing:
            -0.06em !important;

        white-space:
            nowrap;
    }


    .membership-estimate__copy h2 span {
        display:
            block !important;

        width:
            max-content;

        white-space:
            nowrap !important;

        margin-top:
            0.05em !important;
    }

}


/* ==========================================================
   TABLET + MOBILE
   Let the headline wrap naturally again.
   ========================================================== */

@media (max-width: 1050px) {

    .membership-estimate__copy h2 {
        width:
            auto;

        white-space:
            normal;
    }


    .membership-estimate__copy h2 span {
        width:
            auto;

        white-space:
            normal !important;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SECTION 07 HEADLINE OVERFLOW REPAIR
   ========================================================================== */

@media (min-width: 1051px) {

    .membership-estimate__inner {
        grid-template-columns:
            minmax(0, 1.18fr)
            minmax(460px, 0.82fr) !important;

        gap:
            clamp(
                4rem,
                6vw,
                6rem
            ) !important;
    }


    .membership-estimate__copy {
        min-width:
            0 !important;

        max-width:
            none !important;
    }


    .membership-estimate__copy h2 {
        width:
            100% !important;

        max-width:
            820px !important;

        font-size:
            clamp(
                3.65rem,
                4.15vw,
                4.9rem
            ) !important;

        line-height:
            0.89 !important;
    }


    .membership-estimate__copy h2 span {
        display:
            block !important;

        width:
            auto !important;

        white-space:
            nowrap !important;
    }

}


/* Let smaller screens wrap normally */

@media (max-width: 1050px) {

    .membership-estimate__copy h2 span {
        white-space:
            normal !important;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SECTION 07 TRUE HEADLINE CONTAINMENT
   ========================================================================== */

@media (min-width: 1051px) {

    .membership-estimate__inner {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(500px, 0.92fr) !important;

        gap:
            clamp(
                4.5rem,
                6vw,
                6rem
            ) !important;
    }


    .membership-estimate__copy {
        min-width:
            0 !important;

        overflow:
            visible;
    }


    .membership-estimate__copy h2 {
        width:
            100% !important;

        max-width:
            760px !important;

        font-size:
            clamp(
                3.7rem,
                3.85vw,
                4.45rem
            ) !important;

        line-height:
            0.9 !important;

        letter-spacing:
            -0.06em !important;
    }


    .membership-estimate__copy h2 span {
        display:
            block !important;

        width:
            100% !important;

        max-width:
            760px !important;

        white-space:
            nowrap !important;
    }


    .membership-estimate__route {
        position:
            relative;

        z-index:
            3;
    }

}


/* ==========================================================
   TABLET + MOBILE
   ========================================================== */

@media (max-width: 1050px) {

    .membership-estimate__copy h2 span {
        width:
            auto !important;

        max-width:
            none !important;

        white-space:
            normal !important;
    }

}



/* ==========================================================================
   WASH & BEHOLD PREMIUM - SECTION 07 FINAL HEADLINE FIT
   ========================================================================== */

@media (min-width: 1051px) {

    .membership-estimate__inner {
        grid-template-columns:
            minmax(0, 1.14fr)
            minmax(500px, 0.86fr) !important;

        gap:
            clamp(
                4rem,
                5vw,
                5rem
            ) !important;
    }


    .membership-estimate__copy {
        min-width:
            0 !important;
    }


    .membership-estimate__copy h2 {
        width:
            100% !important;

        max-width:
            820px !important;

        font-size:
            clamp(
                3.85rem,
                4.15vw,
                4.8rem
            ) !important;

        line-height:
            0.9 !important;
    }


    /*
       Keep the first line big.
       Make the blue line just small enough to fit.
    */

    .membership-estimate__copy h2 span {
        display:
            block !important;

        width:
            100% !important;

        max-width:
            820px !important;

        white-space:
            nowrap !important;

        font-size:
            0.82em !important;

        line-height:
            0.96 !important;

        letter-spacing:
            -0.055em !important;
    }


    /*
       Absolutely prevent the title from sitting above
       the estimate route if anything gets close.
    */

    .membership-estimate__copy {
        position:
            relative;

        z-index:
            1;
    }


    .membership-estimate__route {
        position:
            relative;

        z-index:
            3;

        background:
            transparent;
    }

}


/* ==========================================================
   TABLET + MOBILE
   ========================================================== */

@media (max-width: 1050px) {

    .membership-estimate__copy h2 span {
        width:
            auto !important;

        max-width:
            none !important;

        white-space:
            normal !important;

        font-size:
            1em !important;
    }

}


/* =========================================================
   WASH & BEHOLD RESULTS HERO V1 2026-09-29
   ========================================================= */

.results-page-hero {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    padding:
        clamp(6rem, 8vw, 8.5rem)
        0
        clamp(5.5rem, 7vw, 7.5rem);

    background:
        linear-gradient(
            118deg,
            #06131f 0%,
            #081c2d 48%,
            #0d2a40 100%
        );

    color:
        #ffffff;
}


.results-page-hero__water {
    position: absolute;
    z-index: 0;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.results-page-hero__bubble {
    position: absolute;

    display: block;

    width: auto;
    height: auto;
}


.results-page-hero__bubble--cluster {
    top: -110px;
    right: -90px;

    width:
        clamp(280px, 24vw, 430px);

    opacity: 0.42;

    transform:
        rotate(-12deg);
}


.results-page-hero__bubble--medium {
    right: 40%;
    bottom: -80px;

    width:
        clamp(130px, 10vw, 190px);

    opacity: 0.24;

    transform:
        rotate(14deg);
}


.results-page-hero__bubble--small {
    top: 24%;
    left: -38px;

    width:
        clamp(80px, 6vw, 112px);

    opacity: 0.20;
}


.results-page-hero__layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(390px, 0.72fr)
        minmax(620px, 1.28fr);

    align-items: center;

    gap:
        clamp(3.5rem, 6vw, 7rem);
}


.results-page-hero__content {
    max-width: 610px;
}


.results-page-hero .section-label {
    color:
        rgba(255, 255, 255, 0.76);
}


.results-page-hero .section-label::before {
    background:
        var(--yellow);
}


.results-page-hero__content h1 {
    max-width: 610px;

    margin:
        1.35rem
        0
        0;

    color:
        #ffffff;

    font-size:
        clamp(4rem, 5.7vw, 6.7rem);

    line-height: 0.9;

    letter-spacing:
        -0.055em;

    text-wrap: balance;
}


.results-page-hero__content h1 span {
    display: block;

    color:
        #6dbcf0;
}


.results-page-hero__lead {
    max-width: 570px;

    margin:
        2rem
        0
        0;

    color:
        rgba(255, 255, 255, 0.74);

    font-size:
        clamp(1rem, 1.12vw, 1.12rem);

    font-weight: 500;

    line-height: 1.72;
}


.results-page-hero__ledger {
    margin-top:
        clamp(2.5rem, 4vw, 3.3rem);

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-top:
        1px solid rgba(255, 255, 255, 0.16);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.16);
}


.results-page-hero__ledger > div {
    min-width: 0;

    padding:
        1.15rem
        1rem;

    border-right:
        1px solid rgba(255, 255, 255, 0.13);
}


.results-page-hero__ledger > div:first-child {
    padding-left: 0;
}


.results-page-hero__ledger > div:last-child {
    padding-right: 0;

    border-right: 0;
}


.results-page-hero__ledger span,
.results-page-hero__ledger strong {
    display: block;
}


.results-page-hero__ledger span {
    color:
        #f3ca48;

    font-size: 0.64rem;
    font-weight: 900;

    letter-spacing: 0.09em;
}


.results-page-hero__ledger strong {
    margin-top: 0.35rem;

    color:
        rgba(255, 255, 255, 0.88);

    font-size: 0.78rem;
    font-weight: 800;

    line-height: 1.35;
}


.results-page-hero__actions {
    margin-top: 2rem;

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap:
        1rem
        1.4rem;
}


.results-page-hero__text-link {
    display: inline-flex;
    align-items: center;

    gap: 0.55rem;

    color:
        rgba(255, 255, 255, 0.86);

    font-size: 0.84rem;
    font-weight: 850;

    text-decoration: none;
}


.results-page-hero__text-link span {
    color:
        var(--yellow);

    font-size: 1.1rem;
}


.results-page-hero__proof {
    min-width: 0;

    margin: 0;
}


.results-page-hero__image-frame {
    position: relative;

    overflow: hidden;

    aspect-ratio:
        16 / 11;

    border:
        1px solid rgba(255, 255, 255, 0.17);

    border-radius: 22px;

    background:
        #102638;

    box-shadow:
        0 38px 90px rgba(0, 0, 0, 0.36);
}


.results-page-hero__image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


.results-page-hero__image-frame::after {
    content: "";

    position: absolute;
    z-index: 1;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4, 15, 26, 0.08) 0%,
            transparent 30%,
            transparent 68%,
            rgba(4, 15, 26, 0.28) 100%
        );

    pointer-events: none;
}


.results-page-hero__label {
    position: absolute;
    z-index: 4;

    top: 1.2rem;

    padding:
        0.56rem
        0.76rem;

    border:
        1px solid rgba(255, 255, 255, 0.17);

    border-radius: 7px;

    background:
        rgba(4, 17, 29, 0.84);

    color:
        #ffffff;

    backdrop-filter:
        blur(9px);

    font-size: 0.64rem;
    font-weight: 900;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.results-page-hero__label--before {
    left: 1.2rem;
}


.results-page-hero__label--after {
    right: 1.2rem;
}


.results-page-hero__split {
    position: absolute;
    z-index: 5;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 2px;

    transform:
        translateX(-50%);

    background:
        rgba(255, 255, 255, 0.92);

    pointer-events: none;
}


.results-page-hero__split > span {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    transform:
        translate(-50%, -50%);

    border:
        3px solid #ffffff;

    border-radius: 50%;

    background:
        var(--yellow);

    color:
        #07111e;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.24);

    font-size: 1.15rem;
    font-weight: 950;
}


.results-page-hero__caption {
    margin-top: 1.15rem;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: end;

    gap: 1.5rem;
}


.results-page-hero__caption span {
    display: block;

    color:
        #6dbcf0;

    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.results-page-hero__caption strong {
    display: block;

    margin-top: 0.38rem;

    color:
        #ffffff;

    font-size:
        clamp(1.15rem, 1.35vw, 1.4rem);

    font-weight: 900;

    line-height: 1.2;
}


.results-page-hero__caption p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.50);

    font-size: 0.72rem;
    font-weight: 650;

    white-space: nowrap;
}


@media (max-width: 1180px) {

    .results-page-hero__layout {
        grid-template-columns:
            minmax(330px, 0.76fr)
            minmax(520px, 1.24fr);

        gap: 3rem;
    }

    .results-page-hero__content h1 {
        font-size:
            clamp(3.7rem, 5.2vw, 5.5rem);
    }

}


@media (max-width: 980px) {

    .results-page-hero {
        padding:
            5rem
            0;
    }

    .results-page-hero__layout {
        grid-template-columns: 1fr;

        gap: 3.5rem;
    }

    .results-page-hero__content {
        max-width: 760px;
    }

    .results-page-hero__content h1 {
        max-width: 760px;

        font-size:
            clamp(4rem, 9vw, 6rem);
    }

    .results-page-hero__lead {
        max-width: 680px;
    }

}


@media (max-width: 680px) {

    .results-page-hero {
        padding:
            4.25rem
            0
            4.5rem;
    }

    .results-page-hero__bubble--cluster {
        top: -45px;
        right: -90px;

        width: 250px;
    }

    .results-page-hero__bubble--medium {
        right: -34px;
        bottom: 25%;

        width: 118px;
    }

    .results-page-hero__bubble--small {
        display: none;
    }

    .results-page-hero__content h1 {
        font-size:
            clamp(3.35rem, 15vw, 4.8rem);

        line-height: 0.91;
    }

    .results-page-hero__lead {
        font-size: 0.98rem;
    }

    .results-page-hero__ledger {
        grid-template-columns: 1fr;
    }

    .results-page-hero__ledger > div,
    .results-page-hero__ledger > div:first-child,
    .results-page-hero__ledger > div:last-child {
        padding:
            0.9rem
            0;

        border-right: 0;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.12);
    }

    .results-page-hero__ledger > div:last-child {
        border-bottom: 0;
    }

    .results-page-hero__actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .results-page-hero__image-frame {
        aspect-ratio:
            4 / 3;

        border-radius: 16px;
    }

    .results-page-hero__label {
        top: 0.75rem;

        padding:
            0.48rem
            0.62rem;

        font-size: 0.57rem;
    }

    .results-page-hero__label--before {
        left: 0.75rem;
    }

    .results-page-hero__label--after {
        right: 0.75rem;
    }

    .results-page-hero__split > span {
        width: 44px;
        height: 44px;

        font-size: 1rem;
    }

    .results-page-hero__caption {
        grid-template-columns: 1fr;

        align-items: start;

        gap: 0.6rem;
    }

    .results-page-hero__caption p {
        white-space: normal;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS HERO SCREENSHOT POLISH V1 2026-09-29

   Screenshot-based corrections only.
   No animation.
   No Section 02.
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP COMPOSITION
   Give the headline enough width without demoting the proof.
   --------------------------------------------------------- */

.results-page-hero__layout {
    grid-template-columns:
        minmax(450px, 0.78fr)
        minmax(0, 1.22fr);

    gap:
        clamp(3rem, 4.5vw, 5.5rem);
}


/* ---------------------------------------------------------
   HEADLINE
   Reduce the skyscraper effect visible in the screenshot.
   --------------------------------------------------------- */

.results-page-hero__content {
    max-width: 650px;
}


.results-page-hero__content h1 {
    max-width: 650px;

    font-size:
        clamp(3.7rem, 5vw, 5.8rem);

    line-height: 0.92;
}


/* ---------------------------------------------------------
   PROOF POSITION
   Pull the evidence slightly higher in the composition.
   --------------------------------------------------------- */

.results-page-hero__proof {
    margin-top: -1.25rem;
}


/* ---------------------------------------------------------
   LEDGER READABILITY
   --------------------------------------------------------- */

.results-page-hero__ledger span {
    font-size: 0.68rem;
}


.results-page-hero__ledger strong {
    font-size: 0.84rem;

    line-height: 1.4;
}


/* ---------------------------------------------------------
   PROOF CAPTION READABILITY
   --------------------------------------------------------- */

.results-page-hero__caption span {
    color:
        #80c8f5;

    font-size: 0.67rem;
}


.results-page-hero__caption strong {
    font-size:
        clamp(1.18rem, 1.4vw, 1.46rem);
}


.results-page-hero__caption p {
    color:
        rgba(255, 255, 255, 0.72);

    font-size: 0.76rem;
}


/* ---------------------------------------------------------
   BUBBLE RESTRAINT
   Real assets remain, but they return to atmosphere duty.
   --------------------------------------------------------- */

.results-page-hero__bubble--cluster {
    top: -72px;
    right: -54px;

    width:
        clamp(210px, 18vw, 320px);

    opacity: 0.28;
}


.results-page-hero__bubble--medium {
    right: 42%;
    bottom: -68px;

    width:
        clamp(110px, 8vw, 150px);

    opacity: 0.16;
}


.results-page-hero__bubble--small {
    top: 27%;
    left: -26px;

    width:
        clamp(58px, 4.5vw, 78px);

    opacity: 0.14;
}


/* ---------------------------------------------------------
   TABLET
   Remove the desktop proof lift once the columns stack.
   --------------------------------------------------------- */

@media (max-width: 980px) {

    .results-page-hero__layout {
        grid-template-columns: 1fr;
    }

    .results-page-hero__proof {
        margin-top: 0;
    }

    .results-page-hero__content h1 {
        max-width: 760px;
    }

}


/* ---------------------------------------------------------
   MOBILE
   Keep atmosphere restrained on the smaller canvas.
   --------------------------------------------------------- */

@media (max-width: 680px) {

    .results-page-hero__bubble--cluster {
        top: -34px;
        right: -66px;

        width: 190px;

        opacity: 0.22;
    }

    .results-page-hero__bubble--medium {
        right: -28px;
        bottom: 24%;

        width: 92px;

        opacity: 0.13;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS STATIC COMPARISON V1 2026-09-29

   One composite before / after image.
   No fake slider interaction.
   ========================================================= */

.results-page-hero__split {
    display: none !important;
}


.results-page-hero__image-frame {
    cursor: default;
}


/* Keep labels clearly attached to each half */

.results-page-hero__label--before {
    left: 1.1rem;
}


.results-page-hero__label--after {
    right: 1.1rem;
}


/* Slightly stronger labels now that they are informational,
   not slider controls */

.results-page-hero__label {
    padding:
        0.6rem
        0.8rem;

    background:
        rgba(4, 17, 29, 0.88);

    border:
        1px solid rgba(255, 255, 255, 0.22);

    color:
        #ffffff;

    font-size: 0.66rem;

    letter-spacing: 0.1em;
}


/* Proof caption now needs to read as supporting evidence */

.results-page-hero__caption p {
    color:
        rgba(255, 255, 255, 0.70);
}


@media (max-width: 680px) {

    .results-page-hero__label {
        padding:
            0.48rem
            0.62rem;

        font-size: 0.58rem;
    }

    .results-page-hero__label--before {
        left: 0.75rem;
    }

    .results-page-hero__label--after {
        right: 0.75rem;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS REAL COMPARISON V1 2026-09-29
   ========================================================= */

.results-compare {
    width: 100%;
}


.results-compare__stage {
    position: relative;

    width: 100%;

    aspect-ratio:
        16 / 11;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 22px;

    background:
        #102638;

    box-shadow:
        0 38px 90px rgba(0, 0, 0, 0.36);
}


.results-compare__image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center 48%;

    user-select: none;

    pointer-events: none;
}


.results-compare__image--before {
    z-index: 1;
}


.results-compare__image--after {
    z-index: 2;

    clip-path:
        inset(
            0
            0
            0
            var(--results-compare-position)
        );
}


.results-compare__stage::after {
    content: "";

    position: absolute;
    z-index: 3;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4, 15, 26, 0.08) 0%,
            transparent 28%,
            transparent 72%,
            rgba(4, 15, 26, 0.20) 100%
        );

    pointer-events: none;
}


.results-compare__label {
    position: absolute;
    z-index: 6;

    top: 1.1rem;

    padding:
        0.58rem
        0.78rem;

    border:
        1px solid rgba(255, 255, 255, 0.22);

    border-radius: 7px;

    background:
        rgba(4, 17, 29, 0.88);

    color:
        #ffffff;

    backdrop-filter:
        blur(9px);

    font-size: 0.65rem;
    font-weight: 900;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    pointer-events: none;
}


.results-compare__label--before {
    left: 1.1rem;
}


.results-compare__label--after {
    right: 1.1rem;
}


.results-compare__divider {
    position: absolute;
    z-index: 7;

    top: 0;
    bottom: 0;

    left:
        var(--results-compare-position);

    width: 2px;

    transform:
        translateX(-50%);

    background:
        rgba(255, 255, 255, 0.95);

    pointer-events: none;
}


.results-compare__handle {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    transform:
        translate(-50%, -50%);

    border:
        3px solid #ffffff;

    border-radius: 50%;

    background:
        var(--yellow);

    color:
        #07111e;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.26);
}


.results-compare__handle > span {
    display: block;

    font-size: 1.1rem;
    font-weight: 950;

    line-height: 1;
}


.results-compare__range {
    position: absolute;
    z-index: 8;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;

    opacity: 0;

    cursor: ew-resize;
}


.results-compare__range:focus-visible + * {
    outline: none;
}


.results-compare:focus-within .results-compare__handle {
    box-shadow:
        0 0 0 4px rgba(255, 210, 64, 0.24),
        0 12px 28px rgba(0, 0, 0, 0.26);
}


.results-page-hero__caption p {
    color:
        rgba(255, 255, 255, 0.72);
}


@media (max-width: 680px) {

    .results-compare__stage {
        aspect-ratio:
            4 / 3;

        border-radius: 16px;
    }

    .results-compare__label {
        top: 0.75rem;

        padding:
            0.48rem
            0.62rem;

        font-size: 0.57rem;
    }

    .results-compare__label--before {
        left: 0.75rem;
    }

    .results-compare__label--after {
        right: 0.75rem;
    }

    .results-compare__handle {
        width: 44px;
        height: 44px;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS HERO BUBBLE RESTRAINT V1 2026-09-29

   Keep the real bubble atmosphere, remove distractions.
   ========================================================= */

.results-page-hero__bubble--small {
    display: none !important;
}


.results-page-hero__bubble--medium {
    display: none !important;
}


.results-page-hero__bubble--cluster {
    top: -88px;
    right: -70px;

    width:
        clamp(200px, 16vw, 285px);

    opacity: 0.22;
}


@media (max-width: 680px) {

    .results-page-hero__bubble--cluster {
        top: -50px;
        right: -72px;

        width: 190px;

        opacity: 0.18;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS OWNER NOTE V1 2026-09-29
   ========================================================= */

.results-page-hero__owner-note {
    max-width: 520px;

    margin:
        0.55rem
        0
        0;

    color:
        rgba(255, 255, 255, 0.62);

    font-size: 0.76rem;
    font-weight: 550;

    line-height: 1.5;
}


@media (max-width: 680px) {

    .results-page-hero__owner-note {
        max-width: 100%;

        font-size: 0.74rem;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS CAPTION OVERLAP FIX V1 2026-09-29
   ========================================================= */

.results-page-hero__caption {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    grid-template-areas:
        "title service"
        "owner owner";

    align-items: end;

    column-gap: 2rem;
    row-gap: 0.65rem;
}


.results-page-hero__caption-title {
    grid-area: title;

    min-width: 0;
}


.results-page-hero__service-note {
    grid-area: service;

    margin: 0;

    align-self: end;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 0.76rem;
    font-weight: 650;

    line-height: 1.4;

    white-space: nowrap;
}


.results-page-hero__owner-note {
    grid-area: owner;

    width: 100%;
    max-width: 760px;

    margin:
        0.1rem
        0
        0;

    color:
        rgba(255, 255, 255, 0.66);

    font-size: 0.77rem;
    font-weight: 550;

    line-height: 1.5;
}


@media (max-width: 760px) {

    .results-page-hero__caption {
        grid-template-columns: 1fr;

        grid-template-areas:
            "title"
            "service"
            "owner";

        align-items: start;

        gap: 0.55rem;
    }

    .results-page-hero__service-note {
        white-space: normal;
    }

    .results-page-hero__owner-note {
        max-width: 100%;

        font-size: 0.74rem;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS HERO PUSH V1 2026-09-29

   Less supporting structure.
   More headline + proof dominance.
   ========================================================= */

.results-page-hero {
    min-height:
        clamp(
            700px,
            calc(100vh - 125px),
            880px
        );

    padding:
        clamp(4.5rem, 6vw, 6.25rem)
        0
        clamp(4rem, 5vw, 5.5rem);
}


/* ---------------------------------------------------------
   HERO GRID
   Proof gets more of the canvas.
   --------------------------------------------------------- */

.results-page-hero__layout {
    grid-template-columns:
        minmax(410px, 0.68fr)
        minmax(0, 1.32fr);

    gap:
        clamp(2.75rem, 4vw, 4.75rem);

    align-items: center;
}


/* ---------------------------------------------------------
   HERO COPY
   --------------------------------------------------------- */

.results-page-hero__content {
    max-width: 650px;
}


.results-page-hero__content h1 {
    max-width: 650px;

    margin-top: 1.25rem;

    font-size:
        clamp(4rem, 5.25vw, 6.15rem);

    line-height: 0.91;
}


.results-page-hero__lead {
    max-width: 555px;

    margin-top: 1.65rem;

    line-height: 1.68;
}


/* Ledger is intentionally gone.
   Give the CTA breathing room instead. */

.results-page-hero__actions {
    margin-top:
        clamp(2rem, 3vw, 2.75rem);
}


/* ---------------------------------------------------------
   PROOF
   Pull the evidence higher and make it feel like the hero.
   --------------------------------------------------------- */

.results-page-hero__proof {
    margin-top: -2.25rem;
}


.results-compare__stage {
    border-radius: 20px;

    box-shadow:
        0 42px 100px rgba(0, 0, 0, 0.38);
}


/* ---------------------------------------------------------
   COMPACT CASE CAPTION
   Supporting evidence, not another section.
   --------------------------------------------------------- */

.results-page-hero__caption {
    margin-top: 0.85rem;

    column-gap: 1.5rem;
    row-gap: 0.35rem;
}


.results-page-hero__caption span {
    font-size: 0.62rem;
}


.results-page-hero__caption strong {
    margin-top: 0.28rem;

    font-size:
        clamp(1.05rem, 1.15vw, 1.24rem);
}


.results-page-hero__service-note {
    color:
        rgba(255, 255, 255, 0.58);

    font-size: 0.68rem;
}


.results-page-hero__owner-note {
    max-width: 720px;

    margin-top: 0;

    color:
        rgba(255, 255, 255, 0.60);

    font-size: 0.71rem;

    line-height: 1.42;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 980px) {

    .results-page-hero {
        min-height: 0;

        padding:
            4.5rem
            0;
    }

    .results-page-hero__layout {
        grid-template-columns: 1fr;

        gap: 3.25rem;
    }

    .results-page-hero__proof {
        margin-top: 0;
    }

    .results-page-hero__content {
        max-width: 760px;
    }

    .results-page-hero__content h1 {
        max-width: 760px;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 680px) {

    .results-page-hero {
        padding:
            3.75rem
            0
            4.25rem;
    }

    .results-page-hero__content h1 {
        font-size:
            clamp(3.3rem, 15vw, 4.7rem);
    }

    .results-page-hero__actions {
        margin-top: 1.8rem;
    }

    .results-page-hero__caption {
        margin-top: 0.8rem;
    }

    .results-page-hero__owner-note {
        font-size: 0.7rem;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS HERO HEADLINE BALANCE V1 2026-09-29

   Preserve proof dominance while giving the hero headline
   enough horizontal room to stop stacking excessively.
   ========================================================= */

.results-page-hero__layout {
    grid-template-columns:
        minmax(500px, 0.76fr)
        minmax(0, 1.24fr);

    gap:
        clamp(2.75rem, 4vw, 4.75rem);
}


.results-page-hero__content {
    max-width: 680px;
}


.results-page-hero__content h1 {
    max-width: 680px;

    font-size:
        clamp(3.8rem, 4.7vw, 5.7rem);

    line-height: 0.92;
}


/* Keep the proof visually dominant */

.results-page-hero__proof {
    min-width: 0;
}


/* Intermediate desktop width */

@media (max-width: 1180px) {

    .results-page-hero__layout {
        grid-template-columns:
            minmax(360px, 0.76fr)
            minmax(0, 1.24fr);

        gap: 2.75rem;
    }

    .results-page-hero__content h1 {
        font-size:
            clamp(3.5rem, 5vw, 5rem);
    }

}


/* Existing stacked tablet layout stays intact */

@media (max-width: 980px) {

    .results-page-hero__layout {
        grid-template-columns: 1fr;
    }

    .results-page-hero__content,
    .results-page-hero__content h1 {
        max-width: 760px;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS PROOF STANDARD V1 2026-09-29
   ========================================================= */

.results-standard {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    padding:
        clamp(6.5rem, 8vw, 9rem)
        0;

    background:
        linear-gradient(
            180deg,
            #f5f9fc 0%,
            #eaf2f7 100%
        );

    color:
        #071421;
}


/* ---------------------------------------------------------
   SUBTLE AUTOMOTIVE RULE
   --------------------------------------------------------- */

.results-standard::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: 0;
    right: 0;
    left: 0;

    height: 1px;

    background:
        rgba(18, 56, 82, 0.12);

    pointer-events: none;
}


.results-standard::after {
    content: "PROOF";

    position: absolute;
    z-index: 0;

    right: -0.03em;
    bottom: -0.18em;

    color:
        rgba(10, 53, 83, 0.035);

    font-size:
        clamp(9rem, 21vw, 24rem);

    font-weight: 950;

    line-height: 0.8;

    letter-spacing:
        -0.08em;

    pointer-events: none;

    user-select: none;
}


/* ---------------------------------------------------------
   LAYOUT
   --------------------------------------------------------- */

.results-standard__layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(440px, 0.92fr)
        minmax(460px, 1.08fr);

    align-items: start;

    gap:
        clamp(5rem, 8vw, 9rem);
}


/* ---------------------------------------------------------
   COPY
   --------------------------------------------------------- */

.results-standard__content {
    max-width: 690px;
}


.results-standard .section-label {
    color:
        #24506e;
}


.results-standard .section-label::before {
    background:
        var(--yellow);
}


.results-standard__content h2 {
    max-width: 680px;

    margin:
        1.25rem
        0
        0;

    color:
        #071421;

    font-size:
        clamp(4rem, 5vw, 5.8rem);

    font-weight: 950;

    line-height: 0.92;

    letter-spacing:
        -0.055em;

    text-wrap: balance;
}


.results-standard__content h2 span {
    display: block;

    color:
        #0d5d96;
}


.results-standard__lead {
    max-width: 610px;

    margin:
        1.9rem
        0
        0;

    color:
        #40596b;

    font-size:
        clamp(1rem, 1.1vw, 1.1rem);

    font-weight: 500;

    line-height: 1.72;
}


/* ---------------------------------------------------------
   RULES
   --------------------------------------------------------- */

.results-standard__rules {
    margin-top:
        clamp(2.75rem, 4vw, 3.75rem);

    border-top:
        1px solid rgba(20, 60, 85, 0.18);
}


.results-standard__rule {
    display: grid;

    grid-template-columns:
        62px
        minmax(0, 1fr);

    align-items: start;

    gap: 1.15rem;

    padding:
        1.4rem
        0;

    border-bottom:
        1px solid rgba(20, 60, 85, 0.16);
}


.results-standard__number {
    padding-top: 0.12rem;

    color:
        #0d5d96;

    font-size: 0.84rem;
    font-weight: 950;

    letter-spacing: 0.06em;
}


.results-standard__rule h3 {
    margin: 0;

    color:
        #071421;

    font-size:
        clamp(1.05rem, 1.2vw, 1.22rem);

    font-weight: 900;

    line-height: 1.25;
}


.results-standard__rule p {
    max-width: 520px;

    margin:
        0.4rem
        0
        0;

    color:
        #536b7b;

    font-size: 0.88rem;
    font-weight: 500;

    line-height: 1.55;
}


/* ---------------------------------------------------------
   DOCUMENTATION SHEET
   --------------------------------------------------------- */

.results-standard__sheet {
    position: relative;

    min-height:
        clamp(510px, 40vw, 640px);

    padding:
        clamp(2rem, 3vw, 3rem);

    border:
        1px solid rgba(15, 55, 82, 0.20);

    background:
        rgba(255, 255, 255, 0.72);

    box-shadow:
        0 28px 75px rgba(37, 74, 97, 0.10);

    backdrop-filter:
        blur(8px);
}


.results-standard__sheet::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 23px;

    width: 1px;

    background:
        rgba(13, 93, 150, 0.12);

    pointer-events: none;
}


.results-standard__sheet-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 2rem;

    padding-bottom:
        1.3rem;

    border-bottom:
        2px solid #0c314c;
}


.results-standard__sheet-head span {
    color:
        #667b89;

    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.results-standard__sheet-head strong {
    flex: 0 0 auto;

    color:
        #0c314c;

    font-size: 0.72rem;
    font-weight: 950;

    letter-spacing: 0.08em;
}


/* ---------------------------------------------------------
   SHEET LEDGER
   --------------------------------------------------------- */

.results-standard__ledger {
    margin:
        1.3rem
        0
        0;
}


.results-standard__ledger > div {
    display: grid;

    grid-template-columns:
        minmax(120px, 0.72fr)
        minmax(0, 1.28fr);

    align-items: center;

    min-height: 72px;

    border-bottom:
        1px solid rgba(23, 63, 89, 0.14);
}


.results-standard__ledger dt,
.results-standard__ledger dd {
    margin: 0;
}


.results-standard__ledger dt {
    color:
        #758894;

    font-size: 0.67rem;
    font-weight: 850;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.results-standard__ledger dd {
    color:
        #10293a;

    font-size:
        clamp(1rem, 1.2vw, 1.18rem);

    font-weight: 900;

    text-align: right;
}


/* ---------------------------------------------------------
   STAMP
   --------------------------------------------------------- */

.results-standard__stamp {
    width: fit-content;

    margin-top:
        clamp(2.2rem, 4vw, 3.4rem);

    padding:
        0.82rem
        1rem;

    border:
        3px solid #0d5d96;

    color:
        #0d5d96;

    font-size:
        clamp(1.2rem, 2vw, 1.8rem);

    font-weight: 950;

    line-height: 1;

    letter-spacing:
        -0.03em;

    text-transform: uppercase;

    transform:
        rotate(-2deg);
}


.results-standard__sheet-note {
    max-width: 440px;

    margin:
        1.35rem
        0
        0;

    color:
        #3f5869;

    font-size: 0.88rem;
    font-weight: 650;

    line-height: 1.55;
}


/* ---------------------------------------------------------
   REGISTRATION MARKS
   --------------------------------------------------------- */

.results-standard__registration {
    position: absolute;

    right: 1.35rem;
    bottom: 1.25rem;
    left: 1.35rem;

    display: flex;
    justify-content: space-between;

    color:
        rgba(13, 64, 96, 0.32);

    font-size: 0.56rem;
    font-weight: 900;

    letter-spacing: 0.08em;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1050px) {

    .results-standard__layout {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .results-standard__content {
        max-width: 760px;
    }

    .results-standard__content h2 {
        max-width: 760px;
    }

    .results-standard__sheet {
        max-width: 820px;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 680px) {

    .results-standard {
        padding:
            5rem
            0;
    }

    .results-standard__content h2 {
        font-size:
            clamp(3.2rem, 14vw, 4.4rem);
    }

    .results-standard__rule {
        grid-template-columns:
            46px
            minmax(0, 1fr);

        gap: 0.9rem;
    }

    .results-standard__sheet {
        min-height: 500px;

        padding:
            1.5rem;
    }

    .results-standard__sheet-head {
        align-items: flex-start;
        flex-direction: column;

        gap: 0.5rem;
    }

    .results-standard__ledger > div {
        grid-template-columns:
            minmax(90px, 0.65fr)
            minmax(0, 1.35fr);
    }

    .results-standard__ledger dd {
        font-size: 0.95rem;
    }

    .results-standard__registration {
        right: 1rem;
        left: 1rem;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS PROOF STANDARD REFINEMENT V2 2026-09-29

   QA targets:
   01 composition
   02 typography
   03 graphics and small-detail polish
   ========================================================= */


/* =========================================================
   SECTION BALANCE
   ========================================================= */

.results-standard {
    padding:
        clamp(5.2rem, 6.5vw, 7rem)
        0
        clamp(5.5rem, 7vw, 7.5rem);

    background:
        linear-gradient(
            180deg,
            #f7fafc 0%,
            #edf4f8 56%,
            #e8f1f6 100%
        );
}


/* Kill the oversized chopped typography from V1 */

.results-standard::after {
    display: none !important;
}


/* =========================================================
   REAL BACKGROUND GRAPHICS
   ========================================================= */

.results-standard__graphics {
    position: absolute;
    z-index: 0;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.results-standard__water-graphic {
    position: absolute;

    right: -8%;
    bottom: -12%;

    width:
        clamp(520px, 48vw, 900px);

    height: auto;

    display: block;

    opacity: 0.12;

    transform:
        rotate(-4deg);

    filter:
        saturate(0.8);
}


.results-standard__bubble-graphic {
    position: absolute;

    top: -85px;
    right: 3%;

    width:
        clamp(180px, 15vw, 280px);

    height: auto;

    display: block;

    opacity: 0.13;

    transform:
        rotate(10deg);
}


/* =========================================================
   LAYOUT BALANCE
   ========================================================= */

.results-standard__layout {
    grid-template-columns:
        minmax(460px, 0.92fr)
        minmax(500px, 1.08fr);

    gap:
        clamp(4rem, 6vw, 7rem);

    align-items: stretch;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.results-standard__content {
    max-width: 690px;

    padding-top: 0.35rem;
}


.results-standard__content h2 {
    font-size:
        clamp(3.75rem, 4.65vw, 5.4rem);

    line-height: 0.93;
}


.results-standard__lead {
    max-width: 600px;

    margin-top: 1.6rem;

    color:
        #3c5668;
}


/* =========================================================
   RULES
   ========================================================= */

.results-standard__rules {
    margin-top:
        clamp(2.35rem, 3.5vw, 3rem);
}


.results-standard__rule {
    grid-template-columns:
        58px
        minmax(0, 1fr);

    min-height: 104px;

    padding:
        1.2rem
        0;

    align-items: center;
}


.results-standard__number {
    font-size: 0.9rem;

    color:
        #0c5d96;
}


.results-standard__rule h3 {
    font-size:
        clamp(1.08rem, 1.15vw, 1.22rem);
}


.results-standard__rule p {
    margin-top: 0.34rem;

    color:
        #4e6778;

    font-size: 0.9rem;

    line-height: 1.52;
}


/* =========================================================
   DOCUMENTATION SHEET
   Make it feel intentional and substantial.
   ========================================================= */

.results-standard__sheet {
    min-height: 100%;

    padding:
        clamp(2.25rem, 3vw, 3rem)
        clamp(2.2rem, 3vw, 3rem)
        clamp(2.6rem, 3.5vw, 3.4rem);

    background:
        rgba(255, 255, 255, 0.84);

    border:
        1px solid rgba(17, 58, 85, 0.18);

    box-shadow:
        0 30px 80px rgba(35, 74, 99, 0.13);

    backdrop-filter:
        blur(10px);
}


/* Slightly stronger document margin rule */

.results-standard__sheet::before {
    left: 20px;

    background:
        rgba(13, 93, 150, 0.18);
}


/* =========================================================
   SHEET HEADER TYPOGRAPHY
   ========================================================= */

.results-standard__sheet-head {
    padding-bottom: 1.45rem;
}


.results-standard__sheet-head span {
    font-size: 0.69rem;

    letter-spacing: 0.1em;
}


.results-standard__sheet-head strong {
    font-size: 0.77rem;
}


/* =========================================================
   SHEET LEDGER TYPOGRAPHY
   ========================================================= */

.results-standard__ledger {
    margin-top: 1.2rem;
}


.results-standard__ledger > div {
    min-height: 78px;
}


.results-standard__ledger dt {
    font-size: 0.72rem;

    color:
        #5f7584;
}


.results-standard__ledger dd {
    font-size:
        clamp(1.02rem, 1.15vw, 1.17rem);

    color:
        #0c2436;
}


/* =========================================================
   STAMP
   ========================================================= */

.results-standard__stamp {
    margin-top:
        clamp(2rem, 3vw, 2.7rem);

    padding:
        0.76rem
        0.92rem;

    font-size:
        clamp(1.25rem, 1.7vw, 1.65rem);

    border-width: 2px;

    transform:
        rotate(-1.5deg);
}


.results-standard__sheet-note {
    max-width: 470px;

    margin-top: 1.15rem;

    color:
        #354f61;

    font-size: 0.9rem;

    line-height: 1.5;
}


/* =========================================================
   REGISTRATION MARKS
   Make them deliberate instead of microscopic.
   ========================================================= */

.results-standard__registration {
    right: 1.5rem;
    bottom: 1.15rem;
    left: 1.5rem;

    color:
        rgba(13, 64, 96, 0.42);

    font-size: 0.64rem;

    letter-spacing: 0.06em;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .results-standard__layout {
        grid-template-columns: 1fr;

        gap: 3.75rem;
    }

    .results-standard__sheet {
        min-height: 560px;
    }

    .results-standard__water-graphic {
        right: -18%;
        bottom: -8%;

        width:
            clamp(500px, 76vw, 780px);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .results-standard {
        padding:
            4.5rem
            0
            5rem;
    }

    .results-standard__content h2 {
        font-size:
            clamp(3.1rem, 13vw, 4.25rem);
    }

    .results-standard__rule {
        grid-template-columns:
            44px
            minmax(0, 1fr);

        min-height: 0;

        padding:
            1.1rem
            0;
    }

    .results-standard__sheet {
        min-height: 520px;

        padding:
            1.6rem
            1.45rem
            2.8rem;
    }

    .results-standard__sheet-head span {
        font-size: 0.64rem;
    }

    .results-standard__sheet-head strong {
        font-size: 0.7rem;
    }

    .results-standard__ledger > div {
        min-height: 70px;
    }

    .results-standard__ledger dt {
        font-size: 0.66rem;
    }

    .results-standard__ledger dd {
        font-size: 0.94rem;
    }

    .results-standard__registration {
        right: 1rem;
        left: 1rem;

        font-size: 0.6rem;
    }

    .results-standard__water-graphic {
        right: -45%;
        bottom: -3%;

        width: 620px;

        opacity: 0.09;
    }

    .results-standard__bubble-graphic {
        top: -40px;
        right: -50px;

        width: 175px;

        opacity: 0.1;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS PROOF STANDARD DETAIL PASS V3 2026-09-29

   QA:
   01 composition
   02 typography
   03 graphics and fine details
   ========================================================= */


/* =========================================================
   SECTION RHYTHM
   ========================================================= */

.results-standard {
    padding:
        clamp(4.75rem, 6vw, 6.4rem)
        0
        clamp(5.5rem, 7vw, 7rem);
}


/* =========================================================
   DOCUMENT SHEET
   Use the available height intentionally.
   ========================================================= */

.results-standard__sheet {
    display: flex;
    flex-direction: column;

    min-height: 100%;

    padding-bottom:
        clamp(4.8rem, 5vw, 5.5rem);
}


/* Faint internal documentation watermark */

.results-standard__sheet::after {
    content: "VERIFIED";

    position: absolute;
    z-index: 0;

    top: 66%;
    left: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-4deg);

    color:
        rgba(13, 93, 150, 0.035);

    font-size:
        clamp(4.5rem, 6vw, 7rem);

    font-weight: 950;

    line-height: 1;

    letter-spacing:
        0.08em;

    white-space: nowrap;

    pointer-events: none;

    user-select: none;
}


/* Push the physical stamp into the lower document zone */

.results-standard__stamp {
    position: relative;
    z-index: 2;

    margin-top: auto;
}


.results-standard__sheet-note {
    position: relative;
    z-index: 2;

    margin-bottom: 0.5rem;
}


/* =========================================================
   DOCUMENT TYPOGRAPHY
   ========================================================= */

.results-standard__sheet-head span {
    font-size: 0.72rem;
}


.results-standard__sheet-head strong {
    font-size: 0.8rem;
}


.results-standard__ledger dt {
    font-size: 0.75rem;
}


.results-standard__registration {
    z-index: 2;

    bottom: 1.35rem;

    color:
        rgba(13, 64, 96, 0.48);

    font-size: 0.68rem;
}


/* =========================================================
   REAL WATER GRAPHIC
   Pull it back into the composition so it actually reads.
   ========================================================= */

.results-standard__water-graphic {
    right: -2%;
    bottom: -15%;

    width:
        clamp(650px, 57vw, 1040px);

    opacity: 0.15;

    transform:
        rotate(-3deg);
}


/* =========================================================
   REAL BUBBLE GRAPHIC
   Frame the upper-right corner instead of disappearing.
   ========================================================= */

.results-standard__bubble-graphic {
    top: -42px;
    right: 1.5%;

    width:
        clamp(210px, 17vw, 300px);

    opacity: 0.16;

    transform:
        rotate(8deg);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .results-standard__sheet {
        min-height: 660px;
    }

    .results-standard__water-graphic {
        right: -15%;
        bottom: -10%;

        width:
            clamp(600px, 82vw, 900px);
    }

    .results-standard__bubble-graphic {
        right: -2%;

        width: 230px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .results-standard {
        padding:
            4.25rem
            0
            5rem;
    }

    .results-standard__sheet {
        min-height: 570px;

        padding-bottom: 4.5rem;
    }

    .results-standard__sheet::after {
        top: 68%;

        font-size:
            clamp(3.3rem, 16vw, 4.6rem);

        opacity: 0.8;
    }

    .results-standard__sheet-head span {
        font-size: 0.66rem;
    }

    .results-standard__sheet-head strong {
        font-size: 0.72rem;
    }

    .results-standard__ledger dt {
        font-size: 0.68rem;
    }

    .results-standard__registration {
        bottom: 1.1rem;

        font-size: 0.62rem;
    }

    .results-standard__water-graphic {
        right: -44%;
        bottom: -5%;

        width: 650px;

        opacity: 0.11;
    }

    .results-standard__bubble-graphic {
        top: -35px;
        right: -55px;

        width: 180px;

        opacity: 0.12;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS PROOF STANDARD FINAL DETAIL V4 2026-09-29

   01 rule-number alignment
   02 water graphic containment
   ========================================================= */


/* =========================================================
   RULE NUMBER ALIGNMENT
   Numbers should align with headings, not float mid-row.
   ========================================================= */

.results-standard__rule {
    align-items: start;
}


.results-standard__number {
    padding-top: 0.12rem;

    align-self: start;
}


/* =========================================================
   WATER GRAPHIC CONTAINMENT
   Keep the water around the documentation sheet.
   ========================================================= */

.results-standard__water-graphic {
    right: -8%;
    bottom: -23%;

    width:
        clamp(580px, 48vw, 860px);

    opacity: 0.13;

    transform:
        rotate(-2deg);
}


/* Keep bubbles exactly where they are */

.results-standard__bubble-graphic {
    opacity: 0.16;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .results-standard__water-graphic {
        right: -20%;
        bottom: -18%;

        width:
            clamp(540px, 78vw, 760px);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .results-standard__water-graphic {
        right: -52%;
        bottom: -10%;

        width: 580px;

        opacity: 0.10;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS CASE FILES V1 2026-09-29
   ========================================================= */

.results-casefiles {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    padding:
        clamp(6.5rem, 8vw, 9rem)
        0;

    background:
        linear-gradient(
            150deg,
            #06131f 0%,
            #081c2d 52%,
            #0b263b 100%
        );

    color:
        #ffffff;
}


/* =========================================================
   ATMOSPHERE
   ========================================================= */

.results-casefiles__atmosphere {
    position: absolute;
    z-index: 0;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.results-casefiles__bubble {
    position: absolute;

    top: 8%;
    left: -42px;

    width:
        clamp(100px, 8vw, 150px);

    height: auto;

    opacity: 0.16;
}


.results-casefiles__water {
    position: absolute;

    right: -14%;
    bottom: -13%;

    width:
        clamp(620px, 53vw, 1000px);

    height: auto;

    opacity: 0.10;

    transform:
        rotate(-4deg);
}


/* =========================================================
   INNER
   ========================================================= */

.results-casefiles__inner {
    position: relative;
    z-index: 2;
}


/* =========================================================
   HEADER
   ========================================================= */

.results-casefiles__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.85fr);

    align-items: end;

    gap:
        clamp(3rem, 7vw, 8rem);

    padding-bottom:
        clamp(4rem, 6vw, 6rem);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.15);
}


.results-casefiles .section-label {
    color:
        rgba(255, 255, 255, 0.74);
}


.results-casefiles .section-label::before {
    background:
        var(--yellow);
}


.results-casefiles__header h2 {
    max-width: 760px;

    margin:
        1.25rem
        0
        0;

    color:
        #ffffff;

    font-size:
        clamp(4rem, 5vw, 5.8rem);

    font-weight: 950;

    line-height: 0.92;

    letter-spacing:
        -0.055em;
}


.results-casefiles__header h2 span {
    display: block;

    color:
        #69baf0;
}


.results-casefiles__intro {
    max-width: 520px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.68);

    font-size:
        clamp(1rem, 1.08vw, 1.08rem);

    font-weight: 500;

    line-height: 1.7;
}


/* =========================================================
   CASE LIST
   ========================================================= */

.results-casefiles__list {
    display: grid;
}


/* =========================================================
   INDIVIDUAL CASE
   ========================================================= */

.results-case {
    display: grid;

    grid-template-columns:
        minmax(520px, 1.2fr)
        minmax(360px, 0.8fr);

    align-items: center;

    gap:
        clamp(4rem, 7vw, 8rem);

    padding:
        clamp(5rem, 7vw, 7rem)
        0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.14);
}


.results-case:last-child {
    border-bottom: 0;

    padding-bottom: 0;
}


.results-case--reverse {
    grid-template-columns:
        minmax(360px, 0.8fr)
        minmax(520px, 1.2fr);
}


.results-case--reverse .results-case__media {
    order: 2;
}


.results-case--reverse .results-case__content {
    order: 1;
}


/* =========================================================
   CASE MEDIA
   ========================================================= */

.results-case__media {
    position: relative;

    min-height:
        clamp(420px, 36vw, 580px);

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #102b40,
            #081c2b
        );

    box-shadow:
        0 34px 84px rgba(0, 0, 0, 0.30);
}


.results-case__placeholder {
    position: absolute;
    z-index: 0;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    color:
        rgba(255, 255, 255, 0.08);

    font-size:
        clamp(4rem, 9vw, 8rem);

    font-weight: 950;

    letter-spacing:
        -0.06em;

    white-space: nowrap;
}


.results-case__media img {
    position: absolute;
    z-index: 1;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   CASE COPY
   ========================================================= */

.results-case__content {
    max-width: 520px;
}


.results-case__meta {
    display: flex;
    flex-wrap: wrap;

    gap:
        0.5rem
        1rem;

    color:
        #72c2f3;

    font-size: 0.65rem;
    font-weight: 900;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.results-case__meta span + span::before {
    content: "/";

    margin-right: 1rem;

    color:
        rgba(255, 255, 255, 0.24);
}


.results-case__content h3 {
    max-width: 500px;

    margin:
        1.05rem
        0
        0;

    color:
        #ffffff;

    font-size:
        clamp(2.6rem, 3.5vw, 4.2rem);

    font-weight: 950;

    line-height: 0.95;

    letter-spacing:
        -0.045em;
}


.results-case__content > p {
    max-width: 490px;

    margin:
        1.5rem
        0
        0;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 0.98rem;
    font-weight: 500;

    line-height: 1.68;
}


/* =========================================================
   CASE FACTS
   ========================================================= */

.results-case__facts {
    margin:
        2.25rem
        0
        0;

    border-top:
        1px solid rgba(255, 255, 255, 0.15);
}


.results-case__facts > div {
    display: grid;

    grid-template-columns:
        110px
        minmax(0, 1fr);

    gap: 1rem;

    align-items: center;

    min-height: 66px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.12);
}


.results-case__facts dt,
.results-case__facts dd {
    margin: 0;
}


.results-case__facts dt {
    color:
        rgba(255, 255, 255, 0.42);

    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.results-case__facts dd {
    color:
        rgba(255, 255, 255, 0.88);

    font-size: 0.84rem;
    font-weight: 800;

    line-height: 1.35;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .results-casefiles__header {
        grid-template-columns: 1fr;

        gap: 2rem;
    }

    .results-casefiles__intro {
        max-width: 680px;
    }

    .results-case,
    .results-case--reverse {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .results-case--reverse .results-case__media,
    .results-case--reverse .results-case__content {
        order: initial;
    }

    .results-case__content {
        max-width: 720px;
    }

    .results-case__media {
        min-height: 540px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .results-casefiles {
        padding:
            5rem
            0;
    }

    .results-casefiles__header {
        padding-bottom: 3.5rem;
    }

    .results-casefiles__header h2 {
        font-size:
            clamp(3.2rem, 14vw, 4.4rem);
    }

    .results-case {
        padding:
            4rem
            0;

        gap: 2.4rem;
    }

    .results-case__media {
        min-height: 390px;

        border-radius: 16px;
    }

    .results-case__content h3 {
        font-size:
            clamp(2.6rem, 11vw, 3.6rem);
    }

    .results-case__facts > div {
        grid-template-columns:
            90px
            minmax(0, 1fr);
    }

    .results-casefiles__water {
        right: -55%;
        bottom: -4%;

        width: 620px;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS CASE FILES GRAPHICS FINAL V3 2026-09-29

   Graphics only.
   Composition and typography remain untouched.
   ========================================================= */


/* =========================================================
   FORCE-HIDE THE HEADER BUBBLE ASSET

   Target the real image source directly because the generic
   class rule did not fully remove the rendered asset.
   ========================================================= */

.results-casefiles__atmosphere img[src*="services-bubble-medium.webp"] {
    display: none !important;
}


/* =========================================================
   WATER GRAPHIC

   Keep it as lower-right atmosphere only.
   Do not let it sit behind Case 047 copy or fact rows.
   ========================================================= */

.results-casefiles__water {
    right: -24% !important;
    bottom: -24% !important;

    width:
        clamp(500px, 40vw, 760px) !important;

    opacity: 0.045 !important;

    transform:
        rotate(-3deg) !important;
}


/* =========================================================
   KEEP CASE 047 TEXT AREA CLEAN
   ========================================================= */

.results-case:last-child .results-case__content {
    position: relative;
    z-index: 3;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .results-casefiles__water {
        right: -34% !important;
        bottom: -18% !important;

        width:
            clamp(500px, 72vw, 700px) !important;

        opacity: 0.04 !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .results-casefiles__water {
        right: -72% !important;
        bottom: -7% !important;

        width: 520px !important;

        opacity: 0.035 !important;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS ANATOMY V1 2026-09-29
   ========================================================= */

.results-anatomy {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    padding:
        clamp(6.5rem, 8vw, 9rem)
        0;

    background:
        linear-gradient(
            180deg,
            #f8fbfd 0%,
            #edf4f8 100%
        );

    color:
        #071421;
}


/* =========================================================
   REAL GRAPHIC ATMOSPHERE
   ========================================================= */

.results-anatomy__graphics {
    position: absolute;
    z-index: 0;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.results-anatomy__bubble {
    position: absolute;

    display: block;

    width: auto;
    height: auto;
}


.results-anatomy__bubble--one {
    top: 8%;
    right: 5%;

    width:
        clamp(70px, 6vw, 105px);

    opacity: 0.13;
}


.results-anatomy__bubble--two {
    left: -45px;
    bottom: 9%;

    width:
        clamp(115px, 9vw, 160px);

    opacity: 0.10;
}


/* =========================================================
   INNER
   ========================================================= */

.results-anatomy__inner {
    position: relative;
    z-index: 2;
}


/* =========================================================
   HEADER
   ========================================================= */

.results-anatomy__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.85fr);

    align-items: end;

    gap:
        clamp(3rem, 7vw, 8rem);

    padding-bottom:
        clamp(4rem, 6vw, 5.5rem);
}


.results-anatomy .section-label {
    color:
        #24506e;
}


.results-anatomy .section-label::before {
    background:
        var(--yellow);
}


.results-anatomy__header h2 {
    max-width: 780px;

    margin:
        1.2rem
        0
        0;

    color:
        #071421;

    font-size:
        clamp(4rem, 5vw, 5.8rem);

    font-weight: 950;

    line-height: 0.92;

    letter-spacing:
        -0.055em;
}


.results-anatomy__header h2 span {
    display: block;

    color:
        #0d5d96;
}


.results-anatomy__intro {
    max-width: 540px;

    margin: 0;

    color:
        #445e70;

    font-size:
        clamp(1rem, 1.08vw, 1.08rem);

    font-weight: 500;

    line-height: 1.72;
}


/* =========================================================
   ROWS
   ========================================================= */

.results-anatomy__rows {
    border-top:
        1px solid rgba(17, 57, 82, 0.18);
}


.results-anatomy__row {
    display: grid;

    grid-template-columns:
        70px
        minmax(280px, 0.95fr)
        80px
        minmax(360px, 1.05fr);

    align-items: center;

    gap:
        clamp(1.5rem, 3vw, 3rem);

    min-height:
        clamp(180px, 16vw, 230px);

    padding:
        2rem
        0;

    border-bottom:
        1px solid rgba(17, 57, 82, 0.16);
}


/* =========================================================
   INDEX
   ========================================================= */

.results-anatomy__index {
    color:
        #0d5d96;

    font-size: 0.85rem;
    font-weight: 950;

    letter-spacing: 0.06em;
}


/* =========================================================
   PROBLEM
   ========================================================= */

.results-anatomy__problem > span,
.results-anatomy__result > span {
    display: block;

    color:
        #617987;

    font-size: 0.66rem;
    font-weight: 900;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.results-anatomy__problem h3 {
    max-width: 420px;

    margin:
        0.45rem
        0
        0;

    color:
        #071421;

    font-size:
        clamp(1.8rem, 2.4vw, 2.8rem);

    font-weight: 950;

    line-height: 1;

    letter-spacing:
        -0.035em;
}


/* =========================================================
   ARROW
   ========================================================= */

.results-anatomy__arrow {
    display: grid;

    place-items: center;
}


.results-anatomy__arrow span {
    color:
        #e7b91e;

    font-size:
        clamp(1.8rem, 2.4vw, 2.5rem);

    font-weight: 900;
}


/* =========================================================
   RESULT
   ========================================================= */

.results-anatomy__result strong {
    display: block;

    margin-top: 0.4rem;

    color:
        #0d5d96;

    font-size:
        clamp(1.35rem, 1.8vw, 1.9rem);

    font-weight: 950;

    line-height: 1.1;

    letter-spacing:
        -0.025em;
}


.results-anatomy__result p {
    max-width: 500px;

    margin:
        0.55rem
        0
        0;

    color:
        #506979;

    font-size: 0.9rem;
    font-weight: 500;

    line-height: 1.58;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .results-anatomy__header {
        grid-template-columns: 1fr;

        gap: 2rem;
    }

    .results-anatomy__intro {
        max-width: 680px;
    }

    .results-anatomy__row {
        grid-template-columns:
            50px
            minmax(0, 1fr)
            55px
            minmax(0, 1fr);

        gap: 1.5rem;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .results-anatomy {
        padding:
            5rem
            0;
    }

    .results-anatomy__header {
        padding-bottom: 3.5rem;
    }

    .results-anatomy__header h2 {
        font-size:
            clamp(3.2rem, 14vw, 4.4rem);
    }

    .results-anatomy__row {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        grid-template-areas:
            "index problem"
            ". arrow"
            ". result";

        align-items: start;

        gap:
            1rem
            0.9rem;

        padding:
            2rem
            0;
    }

    .results-anatomy__index {
        grid-area: index;

        padding-top: 0.3rem;
    }

    .results-anatomy__problem {
        grid-area: problem;
    }

    .results-anatomy__arrow {
        grid-area: arrow;

        justify-content: start;
    }

    .results-anatomy__arrow span {
        transform:
            rotate(90deg);

        transform-origin: center;
    }

    .results-anatomy__result {
        grid-area: result;
    }

    .results-anatomy__bubble--one {
        top: 5%;
        right: -25px;

        width: 85px;
    }

    .results-anatomy__bubble--two {
        left: -40px;
        bottom: 5%;

        width: 110px;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS ANATOMY GRAPHICS QA V2 2026-09-29

   Graphics only.
   Composition and typography remain untouched.
   ========================================================= */


/* Remove the chopped lower-left bubble */

.results-anatomy__bubble--two {
    display: none !important;
}


/* Make the remaining bubble feel intentional */

.results-anatomy__bubble--one {
    top: 3.5%;
    right: 3.5%;

    width:
        clamp(82px, 6.5vw, 118px);

    opacity: 0.16;
}


/* Tablet */

@media (max-width: 1050px) {

    .results-anatomy__bubble--one {
        top: 2.5%;
        right: 2%;

        width: 95px;
    }

}


/* Mobile */

@media (max-width: 680px) {

    .results-anatomy__bubble--one {
        top: 2%;
        right: -18px;

        width: 82px;

        opacity: 0.12;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS ANATOMY GRAPHICS REAL V3 2026-09-29

   Real project assets only.
   Composition and typography remain untouched.
   ========================================================= */


/* =========================================================
   GRAPHICS LAYER
   ========================================================= */

.results-anatomy__graphics {
    position: absolute;
    z-index: 0;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


/* =========================================================
   UPPER-RIGHT BUBBLE CLUSTER
   ========================================================= */

.results-anatomy__bubble--cluster {
    position: absolute;

    top: 3%;
    right: 2.5%;

    display: block !important;

    width:
        clamp(190px, 15vw, 285px);

    height: auto;

    opacity: 0.22;

    transform:
        rotate(8deg);
}


/* =========================================================
   LOWER-LEFT SMALL BUBBLE
   Fully inside the canvas.
   ========================================================= */

.results-anatomy__bubble--small {
    position: absolute;

    left: 2.5%;
    bottom: 8%;

    display: block !important;

    width:
        clamp(70px, 5vw, 95px);

    height: auto;

    opacity: 0.18;
}


/* =========================================================
   LOWER-RIGHT WATER STREAMS
   ========================================================= */

.results-anatomy__water-streams {
    position: absolute;

    right: -4%;
    bottom: -7%;

    display: block;

    width:
        clamp(560px, 46vw, 880px);

    height: auto;

    opacity: 0.16;

    transform:
        rotate(-3deg);

    filter:
        saturate(0.85);
}


/* =========================================================
   KEEP CONTENT ABOVE THE GRAPHICS
   ========================================================= */

.results-anatomy__inner {
    position: relative;
    z-index: 2;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .results-anatomy__bubble--cluster {
        top: 2%;
        right: -2%;

        width: 220px;

        opacity: 0.18;
    }

    .results-anatomy__bubble--small {
        left: 2%;
        bottom: 6%;

        width: 75px;

        opacity: 0.15;
    }

    .results-anatomy__water-streams {
        right: -18%;
        bottom: -5%;

        width:
            clamp(520px, 74vw, 760px);

        opacity: 0.13;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .results-anatomy__bubble--cluster {
        top: 1.5%;
        right: -55px;

        width: 175px;

        opacity: 0.14;
    }

    .results-anatomy__bubble--small {
        left: 8px;
        bottom: 4%;

        width: 58px;

        opacity: 0.12;
    }

    .results-anatomy__water-streams {
        right: -52%;
        bottom: -2%;

        width: 560px;

        opacity: 0.09;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS ANATOMY GRAPHICS REFINEMENT V4 2026-09-29

   Graphics only.
   Composition and typography remain untouched.
   ========================================================= */


/* Remove the extra lower-left bubble */

.results-anatomy__bubble--small {
    display: none !important;
}


/* Keep one intentional upper-right bubble cluster */

.results-anatomy__bubble--cluster {
    top: 2.25%;
    right: 2.5%;

    width:
        clamp(175px, 13vw, 245px);

    opacity: 0.20;

    transform:
        rotate(7deg);
}


/* Replace repeated lower-right water treatment with one curl */

.results-anatomy__water-streams {
    right: -6%;
    bottom: -8%;

    width:
        clamp(420px, 34vw, 620px);

    opacity: 0.15;

    transform:
        rotate(-6deg);

    filter:
        saturate(0.86);
}


/* Keep content clearly above graphics */

.results-anatomy__inner {
    position: relative;
    z-index: 2;
}


/* Tablet */

@media (max-width: 1050px) {

    .results-anatomy__bubble--cluster {
        top: 1.8%;
        right: -1%;

        width: 205px;

        opacity: 0.17;
    }

    .results-anatomy__water-streams {
        right: -18%;
        bottom: -6%;

        width:
            clamp(420px, 55vw, 600px);

        opacity: 0.12;
    }

}


/* Mobile */

@media (max-width: 680px) {

    .results-anatomy__bubble--cluster {
        top: 1.2%;
        right: -48px;

        width: 160px;

        opacity: 0.13;
    }

    .results-anatomy__water-streams {
        right: -42%;
        bottom: -2%;

        width: 420px;

        opacity: 0.08;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS ANATOMY WATER FINAL V5 2026-09-29

   Graphics only.
   One visible water curl.
   No repetition.
   ========================================================= */

.results-anatomy__water-streams {
    right: -1%;

    bottom: -2.5%;

    width:
        clamp(460px, 37vw, 675px);

    opacity: 0.14;

    transform:
        rotate(-5deg);

    filter:
        saturate(0.86);

    pointer-events: none;
}


/* Keep the approved upper-right bubble treatment */

.results-anatomy__bubble--cluster {
    top: 2.25%;
    right: 2.5%;

    width:
        clamp(175px, 13vw, 245px);

    opacity: 0.20;
}


/* No secondary bubble */

.results-anatomy__bubble--small {
    display: none !important;
}


@media (max-width: 1050px) {

    .results-anatomy__water-streams {
        right: -10%;
        bottom: -2%;

        width:
            clamp(430px, 58vw, 620px);

        opacity: 0.11;
    }

}


@media (max-width: 680px) {

    .results-anatomy__water-streams {
        right: -30%;
        bottom: -1%;

        width: 420px;

        opacity: 0.08;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS ANATOMY NUMBER SPLASH V6 2026-09-29

   Graphics only.
   Composition and typography remain untouched.
   ========================================================= */


/* Keep the approved upper-right bubble treatment */

.results-anatomy__bubble--cluster {
    top: 2.25%;
    right: 2.5%;

    width:
        clamp(175px, 13vw, 245px);

    opacity: 0.20;

    transform:
        rotate(7deg);
}


/* No secondary lower-left bubble */

.results-anatomy__bubble--small {
    display: none !important;
}


/* Retire the lower-right water treatment */

.results-anatomy__water-streams {
    display: none !important;
}


/* Shared splash behind the number rail */

.results-anatomy__number-splash {
    position: absolute;
    z-index: 0;

    left: -1.25%;
    top: 31%;

    display: block;

    width:
        clamp(165px, 13vw, 245px);

    height: auto;

    opacity: 0.15;

    transform:
        rotate(-8deg);

    pointer-events: none;

    filter:
        saturate(0.88);
}


/* Keep content above graphics */

.results-anatomy__inner {
    position: relative;
    z-index: 2;
}


/* Tablet */

@media (max-width: 1050px) {

    .results-anatomy__number-splash {
        left: -3.5%;
        top: 34%;

        width: 180px;

        opacity: 0.13;
    }

}


/* Mobile */

@media (max-width: 680px) {

    .results-anatomy__number-splash {
        left: -26px;
        top: 37%;

        width: 120px;

        opacity: 0.10;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS ANATOMY BACKGROUND ECHO V7 2026-09-29

   Graphics only.
   Composition and typography remain untouched.
   ========================================================= */


/* =========================================================
   SECTION FOUNDATIONS
   ========================================================= */

.results-anatomy {
    position: relative;
    isolation: isolate;
}


.results-anatomy__graphics {
    z-index: 1;
}


.results-anatomy__inner {
    position: relative;
    z-index: 2;
}


/* =========================================================
   GIANT BACKGROUND ECHO
   ========================================================= */

.results-anatomy::before {
    content: "DETAILS";

    position: absolute;
    z-index: 0;

    right: -1.5%;
    bottom: 6%;

    color:
        rgba(7, 20, 33, 0.045);

    font-size:
        clamp(11rem, 22vw, 21rem);

    font-weight: 950;

    line-height: 0.85;

    letter-spacing:
        -0.065em;

    white-space: nowrap;

    pointer-events: none;
}


/* =========================================================
   REAL WATER ACCENT
   Replaces the weak chopped leftover at the upper left.
   ========================================================= */

.results-anatomy::after {
    content: "";

    position: absolute;
    z-index: 0;

    left: -3.5%;
    top: 27%;

    width:
        clamp(260px, 24vw, 430px);

    height:
        clamp(120px, 10vw, 190px);

    background-image:
        url("../images/maintenance-water-stream-top.webp");

    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    opacity: 0.10;

    transform:
        rotate(-7deg);

    pointer-events: none;
}


/* =========================================================
   KEEP THE EXISTING BUBBLE TREATMENT CLEAN
   ========================================================= */

.results-anatomy__bubble--cluster {
    top: 2.25%;
    right: 2.5%;

    width:
        clamp(175px, 13vw, 245px);

    opacity: 0.20;

    transform:
        rotate(7deg);
}


.results-anatomy__bubble--small {
    display: none !important;
}


.results-anatomy__water-streams,
.results-anatomy__number-splash {
    display: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .results-anatomy::before {
        right: -4%;
        bottom: 8%;

        font-size:
            clamp(8rem, 20vw, 15rem);

        color:
            rgba(7, 20, 33, 0.038);
    }

    .results-anatomy::after {
        left: -8%;
        top: 29%;

        width: 290px;
        height: 150px;

        opacity: 0.08;
    }

    .results-anatomy__bubble--cluster {
        top: 1.8%;
        right: -1%;

        width: 205px;

        opacity: 0.17;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .results-anatomy::before {
        right: -10%;
        bottom: 9%;

        font-size: 7rem;

        color:
            rgba(7, 20, 33, 0.032);
    }

    .results-anatomy::after {
        left: -20%;
        top: 30%;

        width: 190px;
        height: 95px;

        opacity: 0.06;
    }

    .results-anatomy__bubble--cluster {
        top: 1.2%;
        right: -48px;

        width: 160px;

        opacity: 0.13;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS ANATOMY BACKGROUND FINAL V8 2026-09-29

   Graphics only.
   Composition and typography remain untouched.
   ========================================================= */


/* =========================================================
   EDITORIAL BACKGROUND WORD

   Keep the idea, reduce the shouting.
   ========================================================= */

.results-anatomy::before {
    content: "DETAILS";

    position: absolute;
    z-index: 0;

    right: 1.5%;
    bottom: -1%;

    color:
        rgba(7, 20, 33, 0.026);

    font-size:
        clamp(8rem, 15vw, 14rem);

    font-weight: 950;

    line-height: 0.8;

    letter-spacing:
        -0.06em;

    white-space: nowrap;

    pointer-events: none;

    user-select: none;
}


/* =========================================================
   REAL SPLASH BEHIND NUMBER RAIL

   One shared accent.
   Not four repeated stickers.
   ========================================================= */

.results-anatomy::after {
    content: "";

    position: absolute;
    z-index: 0;

    left: 0.5%;
    top: 43%;

    width:
        clamp(175px, 13vw, 235px);

    aspect-ratio:
        1 / 1;

    height: auto;

    background-image:
        url("../images/fleet-water-splash.webp");

    background-repeat:
        no-repeat;

    background-position:
        center;

    background-size:
        contain;

    opacity: 0.045;

    transform:
        rotate(-12deg);

    filter:
        saturate(0.72);

    pointer-events: none;
}


/* =========================================================
   APPROVED BUBBLE CLUSTER
   ========================================================= */

.results-anatomy__bubble--cluster {
    top: 2.25%;
    right: 2.5%;

    width:
        clamp(175px, 13vw, 245px);

    opacity: 0.19;

    transform:
        rotate(7deg);
}


/* Retire every other competing water treatment */

.results-anatomy__bubble--small,
.results-anatomy__water-streams,
.results-anatomy__number-splash {
    display: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .results-anatomy::before {
        right: -1%;
        bottom: 0;

        font-size:
            clamp(7rem, 16vw, 11rem);

        color:
            rgba(7, 20, 33, 0.022);
    }

    .results-anatomy::after {
        left: -1.5%;
        top: 44%;

        width: 180px;

        opacity: 0.04;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .results-anatomy::before {
        right: -5%;
        bottom: 1%;

        font-size: 5.5rem;

        color:
            rgba(7, 20, 33, 0.02);
    }

    .results-anatomy::after {
        left: -34px;
        top: 46%;

        width: 125px;

        opacity: 0.035;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS ANATOMY SPLASH RAIL FINAL V9 2026-09-29

   Graphics only.
   ========================================================= */


/* Retire the background word completely */

.results-anatomy::before {
    display: none !important;
}


/* One shared splash for the number rail */

.results-anatomy::after {
    left: -2%;
    top: 36%;

    width:
        clamp(225px, 17vw, 315px);

    aspect-ratio:
        1 / 1;

    height: auto;

    background-image:
        url("../images/fleet-water-splash.webp");

    background-repeat:
        no-repeat;

    background-position:
        center;

    background-size:
        contain;

    opacity: 0.055;

    transform:
        rotate(-14deg);

    filter:
        saturate(0.72);

    pointer-events: none;
}


/* Keep the approved upper-right bubble cluster */

.results-anatomy__bubble--cluster {
    top: 2.25%;
    right: 2.5%;

    width:
        clamp(175px, 13vw, 245px);

    opacity: 0.19;
}


/* Prevent old graphic layers from returning */

.results-anatomy__bubble--small,
.results-anatomy__water-streams,
.results-anatomy__number-splash {
    display: none !important;
}


@media (max-width: 1050px) {

    .results-anatomy::after {
        left: -4%;
        top: 38%;

        width: 230px;

        opacity: 0.045;
    }

}


@media (max-width: 680px) {

    .results-anatomy::after {
        left: -42px;
        top: 40%;

        width: 150px;

        opacity: 0.035;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS PARKING LOT TEST V1 2026-09-29
   ========================================================= */

.results-parking-test {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    padding:
        clamp(6.5rem, 8vw, 9rem)
        0;

    background:
        linear-gradient(
            145deg,
            #06131f 0%,
            #081b2c 54%,
            #0a2438 100%
        );

    color:
        #ffffff;
}


/* =========================================================
   GRAPHICS
   ========================================================= */

.results-parking-test__graphics {
    position: absolute;
    z-index: 0;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.results-parking-test__water {
    position: absolute;

    display: block;

    width: auto;
    height: auto;
}


.results-parking-test__water--top {
    top: -8%;
    right: -8%;

    width:
        clamp(500px, 42vw, 760px);

    opacity: 0.11;

    transform:
        rotate(4deg);
}


.results-parking-test__water--curl {
    left: -9%;
    bottom: -19%;

    width:
        clamp(520px, 45vw, 820px);

    opacity: 0.08;

    transform:
        rotate(8deg);
}


.results-parking-test__bubble {
    position: absolute;

    right: 6%;
    bottom: 12%;

    width:
        clamp(72px, 5vw, 98px);

    height: auto;

    opacity: 0.16;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.results-parking-test__layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(430px, 0.88fr)
        minmax(560px, 1.12fr);

    align-items: start;

    gap:
        clamp(4.5rem, 8vw, 9rem);
}


/* =========================================================
   LEFT STATEMENT
   ========================================================= */

.results-parking-test__statement {
    position: sticky;
    top: 4rem;

    max-width: 650px;
}


.results-parking-test .section-label {
    color:
        rgba(255, 255, 255, 0.72);
}


.results-parking-test .section-label::before {
    background:
        var(--yellow);
}


.results-parking-test__statement h2 {
    max-width: 640px;

    margin:
        1.2rem
        0
        0;

    color:
        #ffffff;

    font-size:
        clamp(4rem, 5vw, 5.8rem);

    font-weight: 950;

    line-height: 0.92;

    letter-spacing:
        -0.055em;
}


.results-parking-test__statement h2 span {
    display: block;

    color:
        #69baf0;
}


.results-parking-test__lead {
    max-width: 560px;

    margin:
        1.8rem
        0
        0;

    color:
        rgba(255, 255, 255, 0.68);

    font-size:
        clamp(1rem, 1.08vw, 1.08rem);

    font-weight: 500;

    line-height: 1.72;
}


/* =========================================================
   EDITORIAL NOTE
   ========================================================= */

.results-parking-test__note {
    margin-top:
        clamp(2.75rem, 4vw, 3.5rem);

    padding-top: 1.25rem;

    border-top:
        1px solid rgba(255, 255, 255, 0.16);
}


.results-parking-test__note span,
.results-parking-test__note strong {
    display: block;
}


.results-parking-test__note span {
    color:
        rgba(255, 255, 255, 0.42);

    font-size: 0.63rem;
    font-weight: 900;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.results-parking-test__note strong {
    max-width: 440px;

    margin-top: 0.45rem;

    color:
        rgba(255, 255, 255, 0.90);

    font-size:
        clamp(1.25rem, 1.5vw, 1.55rem);

    font-weight: 900;

    line-height: 1.25;
}


/* =========================================================
   CHECKS
   ========================================================= */

.results-parking-test__checks {
    border-top:
        1px solid rgba(255, 255, 255, 0.16);
}


.results-parking-check {
    display: grid;

    grid-template-columns:
        54px
        minmax(0, 1fr)
        88px;

    align-items: start;

    gap:
        1.4rem;

    min-height:
        clamp(210px, 18vw, 260px);

    padding:
        clamp(2rem, 3vw, 2.8rem)
        0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.13);
}


.results-parking-check__index {
    padding-top: 0.18rem;

    color:
        #74c4f3;

    font-size: 0.78rem;
    font-weight: 950;

    letter-spacing: 0.06em;
}


.results-parking-check__copy > p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.44);

    font-size: 0.64rem;
    font-weight: 900;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.results-parking-check__copy h3 {
    max-width: 520px;

    margin:
        0.5rem
        0
        0;

    color:
        #ffffff;

    font-size:
        clamp(2rem, 2.6vw, 3.1rem);

    font-weight: 950;

    line-height: 0.98;

    letter-spacing:
        -0.04em;
}


.results-parking-check__copy > span {
    display: block;

    max-width: 510px;

    margin-top: 0.9rem;

    color:
        rgba(255, 255, 255, 0.62);

    font-size: 0.9rem;
    font-weight: 500;

    line-height: 1.58;
}


/* =========================================================
   CHECK MARK
   ========================================================= */

.results-parking-check__mark {
    justify-self: end;

    margin-top: 0.1rem;

    padding:
        0.45rem
        0.55rem;

    border:
        1px solid rgba(105, 186, 240, 0.40);

    color:
        #69baf0;

    font-size: 0.56rem;
    font-weight: 950;

    letter-spacing: 0.09em;

    transform:
        rotate(-3deg);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .results-parking-test__layout {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .results-parking-test__statement {
        position: static;

        max-width: 760px;
    }

    .results-parking-test__statement h2 {
        max-width: 760px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .results-parking-test {
        padding:
            5rem
            0;
    }

    .results-parking-test__statement h2 {
        font-size:
            clamp(3.2rem, 14vw, 4.4rem);
    }

    .results-parking-check {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        grid-template-areas:
            "index copy"
            ". mark";

        min-height: 0;

        gap:
            1rem
            0.9rem;

        padding:
            2rem
            0;
    }

    .results-parking-check__index {
        grid-area: index;
    }

    .results-parking-check__copy {
        grid-area: copy;
    }

    .results-parking-check__mark {
        grid-area: mark;

        justify-self: start;

        margin-top: 0.25rem;
    }

    .results-parking-test__water--top {
        top: -3%;
        right: -42%;

        width: 520px;

        opacity: 0.08;
    }

    .results-parking-test__water--curl {
        left: -55%;
        bottom: -5%;

        width: 520px;

        opacity: 0.06;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS PARKING LOT QA V2 2026-09-29

   Typography and graphics polish only.
   Layout remains untouched.
   ========================================================= */


/* =========================================================
   RIGHT-SIDE MICROTYPE
   ========================================================= */

.results-parking-check__copy > p {
    color:
        rgba(255, 255, 255, 0.58);

    font-size: 0.69rem;
}


.results-parking-check__copy > span {
    color:
        rgba(255, 255, 255, 0.70);

    font-size: 0.94rem;

    line-height: 1.58;
}


/* =========================================================
   CHECK STAMPS
   ========================================================= */

.results-parking-check__mark {
    padding:
        0.5rem
        0.62rem;

    border-color:
        rgba(105, 186, 240, 0.55);

    color:
        #7bc9f5;

    font-size: 0.61rem;

    letter-spacing: 0.085em;
}


/* =========================================================
   UPPER-RIGHT WATER

   Keep one deliberate sweep instead of a cropped ring.
   ========================================================= */

.results-parking-test__water--top {
    top: -5%;
    right: -16%;

    width:
        clamp(420px, 35vw, 620px);

    opacity: 0.075;

    transform:
        rotate(5deg);
}


/* =========================================================
   LOWER-LEFT WATER

   Retire the fragmented second treatment.
   ========================================================= */

.results-parking-test__water--curl {
    display: none !important;
}


/* =========================================================
   KEEP THE APPROVED LOWER-RIGHT BUBBLE
   ========================================================= */

.results-parking-test__bubble {
    right: 6%;
    bottom: 12%;

    width:
        clamp(72px, 5vw, 98px);

    opacity: 0.16;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .results-parking-test__water--top {
        top: -3%;
        right: -24%;

        width: 520px;

        opacity: 0.065;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .results-parking-test__water--top {
        top: -2%;
        right: -48%;

        width: 460px;

        opacity: 0.055;
    }

    .results-parking-check__copy > p {
        font-size: 0.66rem;
    }

    .results-parking-check__copy > span {
        font-size: 0.9rem;
    }

    .results-parking-check__mark {
        font-size: 0.58rem;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS HANDOFF V1 2026-09-29
   ========================================================= */

.results-handoff {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    padding:
        clamp(6.5rem, 8vw, 9rem)
        0;

    background:
        linear-gradient(
            180deg,
            #f8fbfd 0%,
            #edf4f8 100%
        );

    color:
        #071421;
}


/* =========================================================
   GRAPHICS
   ========================================================= */

.results-handoff__graphics {
    position: absolute;
    z-index: 0;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.results-handoff__splash {
    position: absolute;

    right: -4%;
    top: 16%;

    width:
        clamp(400px, 35vw, 620px);

    height: auto;

    opacity: 0.045;

    transform:
        rotate(7deg);

    filter:
        saturate(0.72);
}


.results-handoff__bubble {
    position: absolute;

    left: 4%;
    bottom: 8%;

    width:
        clamp(90px, 7vw, 125px);

    height: auto;

    opacity: 0.14;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.results-handoff__layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(430px, 0.88fr)
        minmax(560px, 1.12fr);

    align-items: start;

    gap:
        clamp(4.5rem, 8vw, 9rem);
}


/* =========================================================
   LEFT STATEMENT
   ========================================================= */

.results-handoff__statement {
    position: sticky;
    top: 4rem;

    max-width: 650px;
}


.results-handoff .section-label {
    color:
        #24506e;
}


.results-handoff .section-label::before {
    background:
        var(--yellow);
}


.results-handoff__statement h2 {
    max-width: 650px;

    margin:
        1.2rem
        0
        0;

    color:
        #071421;

    font-size:
        clamp(4rem, 5vw, 5.8rem);

    font-weight: 950;

    line-height: 0.92;

    letter-spacing:
        -0.055em;
}


.results-handoff__statement h2 span {
    display: block;

    color:
        #0d5d96;
}


.results-handoff__lead {
    max-width: 560px;

    margin:
        1.8rem
        0
        0;

    color:
        #445e70;

    font-size:
        clamp(1rem, 1.08vw, 1.08rem);

    font-weight: 500;

    line-height: 1.72;
}


/* =========================================================
   FINE PRINT
   ========================================================= */

.results-handoff__fine-print {
    margin-top:
        clamp(2.75rem, 4vw, 3.5rem);

    padding-top: 1.25rem;

    border-top:
        1px solid rgba(17, 57, 82, 0.18);
}


.results-handoff__fine-print span,
.results-handoff__fine-print strong {
    display: block;
}


.results-handoff__fine-print span {
    color:
        #6b818f;

    font-size: 0.64rem;
    font-weight: 900;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.results-handoff__fine-print strong {
    margin-top: 0.45rem;

    color:
        #0d5d96;

    font-size:
        clamp(1.25rem, 1.5vw, 1.55rem);

    font-weight: 950;

    line-height: 1.2;
}


/* =========================================================
   REACTIONS
   ========================================================= */

.results-handoff__reactions {
    border-top:
        1px solid rgba(17, 57, 82, 0.18);
}


.results-reaction {
    display: grid;

    grid-template-columns:
        150px
        minmax(0, 1fr);

    gap:
        clamp(2rem, 4vw, 4rem);

    padding:
        clamp(2.4rem, 4vw, 3.5rem)
        0;

    border-bottom:
        1px solid rgba(17, 57, 82, 0.16);
}


/* =========================================================
   REACTION META
   ========================================================= */

.results-reaction__meta {
    padding-top: 0.15rem;
}


.results-reaction__meta span {
    display: block;

    color:
        #0d5d96;

    font-size: 0.78rem;
    font-weight: 950;

    letter-spacing: 0.06em;
}


.results-reaction__meta p {
    margin:
        0.4rem
        0
        0;

    color:
        #607887;

    font-size: 0.65rem;
    font-weight: 900;

    line-height: 1.4;

    letter-spacing: 0.075em;

    text-transform: uppercase;
}


/* =========================================================
   REACTION BODY
   ========================================================= */

.results-reaction__label {
    display: block;

    color:
        #6e8492;

    font-size: 0.64rem;
    font-weight: 900;

    letter-spacing: 0.085em;

    text-transform: uppercase;
}


.results-reaction__body h3 {
    max-width: 580px;

    margin:
        0.5rem
        0
        0;

    color:
        #071421;

    font-size:
        clamp(2.5rem, 3vw, 3.6rem);

    font-weight: 950;

    line-height: 0.98;

    letter-spacing:
        -0.04em;
}


.results-reaction__body > p {
    max-width: 560px;

    margin:
        1rem
        0
        0;

    color:
        #506979;

    font-size: 0.92rem;
    font-weight: 500;

    line-height: 1.62;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .results-handoff__layout {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .results-handoff__statement {
        position: static;

        max-width: 760px;
    }

    .results-handoff__statement h2 {
        max-width: 760px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .results-handoff {
        padding:
            5rem
            0;
    }

    .results-handoff__statement h2 {
        font-size:
            clamp(3.2rem, 14vw, 4.4rem);
    }

    .results-reaction {
        grid-template-columns: 1fr;

        gap: 1rem;

        padding:
            2.2rem
            0;
    }

    .results-reaction__meta {
        display: flex;

        align-items: baseline;

        gap: 1rem;
    }

    .results-reaction__meta p {
        margin: 0;
    }

    .results-handoff__splash {
        top: 20%;
        right: -42%;

        width: 500px;

        opacity: 0.035;
    }

    .results-handoff__bubble {
        left: -22px;
        bottom: 5%;

        width: 80px;

        opacity: 0.10;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS HANDOFF GRAPHICS QA V2 2026-09-30

   Graphics only.
   Composition and typography remain untouched.
   ========================================================= */


/* =========================================================
   SPLASH

   Turn the large central illustration into a restrained
   right-edge atmosphere graphic.
   ========================================================= */

.results-handoff__splash {
    top: 20%;
    right: -12%;

    width:
        clamp(320px, 27vw, 470px);

    opacity: 0.038;

    transform:
        rotate(13deg);

    filter:
        saturate(0.68);

    pointer-events: none;
}


/* =========================================================
   LOWER-LEFT BUBBLE

   Approved. Keep it visible and restrained.
   ========================================================= */

.results-handoff__bubble {
    left: 3.5%;
    bottom: 7%;

    width:
        clamp(82px, 6vw, 110px);

    opacity: 0.14;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .results-handoff__splash {
        top: 28%;
        right: -22%;

        width: 390px;

        opacity: 0.032;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .results-handoff__splash {
        top: 34%;
        right: -54%;

        width: 340px;

        opacity: 0.025;
    }

    .results-handoff__bubble {
        left: -18px;
        bottom: 4%;

        width: 72px;

        opacity: 0.10;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS HANDOFF ORPHAN FIX V3 2026-09-30

   Keep "And everybody" together without forcing the entire
   headline onto one line.
   ========================================================= */

.results-handoff__statement h2
.results-handoff__keep-together {
    display: inline-block;

    white-space: nowrap;
}


/* Preserve the blue headline treatment */

.results-handoff__statement h2 > span {
    color:
        #0d5d96;
}


/* Mobile may wrap normally if space becomes genuinely tight */

@media (max-width: 480px) {

    .results-handoff__statement h2
    .results-handoff__keep-together {
        white-space: normal;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS HANDOFF HEADLINE SPACING FIX V4 2026-09-30

   Give the black and blue headline blocks breathing room.
   Typography only.
   ========================================================= */

.results-handoff__statement h2 {
    line-height: 0.96;
}

.results-handoff__statement h2 > span {
    display: block;
}

.results-handoff__statement h2 > span + span {
    margin-top: 0.07em;
}

.results-handoff__statement h2
.results-handoff__keep-together {
    display: inline-block;
    white-space: nowrap;
}

@media (max-width: 680px) {

    .results-handoff__statement h2 {
        line-height: 0.98;
    }

    .results-handoff__statement h2 > span + span {
        margin-top: 0.05em;
    }

}

@media (max-width: 480px) {

    .results-handoff__statement h2
    .results-handoff__keep-together {
        white-space: normal;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS HANDOFF HEADLINE SPACING FIX V5 2026-09-30

   Give the blue punchline a real visual break from the
   black headline block.
   ========================================================= */

.results-handoff__statement h2 {
    line-height: 0.98;
}


.results-handoff__statement h2 > span {
    display: block;

    margin-top: 0.20em;

    line-height: 0.96;
}


.results-handoff__statement h2
.results-handoff__keep-together {
    display: inline-block;

    white-space: nowrap;
}


@media (max-width: 680px) {

    .results-handoff__statement h2 > span {
        margin-top: 0.16em;
    }

}


@media (max-width: 480px) {

    .results-handoff__statement h2
    .results-handoff__keep-together {
        white-space: normal;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS CASE FILES - DESKTOP DENSITY PASS 2026-09-30
   Tighten case rows to restore the compact editorial rhythm.
   ========================================================= */

@media (min-width: 1051px) {

    .results-case {
        gap:
            clamp(2.75rem, 5vw, 5.5rem);

        padding:
            clamp(2rem, 2.8vw, 3rem)
            0;
    }

    .results-case__media {
        min-height:
            clamp(270px, 20vw, 320px);
    }

    .results-case__content {
        max-width: 560px;
    }

    .results-case__content h3 {
        max-width: 560px;

        font-size:
            clamp(2.35rem, 2.9vw, 3.25rem);

        line-height: 0.96;
    }

    .results-case__content > p {
        margin-top: 1.1rem;
    }

    .results-case__facts {
        margin-top: 1.5rem;
    }

}

/* =========================================================
   WASH & BEHOLD RESULTS PARKING LOT HEADLINE PASS 2026-09-30
   Final desktop headline sizing for cleaner editorial wrapping.
   ========================================================= */

@media (min-width: 1051px) {

    .results-parking-test__statement h2 {
        font-size:
            clamp(3.45rem, 4vw, 4.6rem);

        line-height: 0.94;
    }

}

/* =========================================================
   WASH & BEHOLD PARKING LOT HEADLINE LOCK 2026-09-30
   Keeps the opening headline phrase together on desktop.
   ========================================================= */

@media (min-width: 1051px) {

    .results-parking-test__statement h2
    .results-parking-test__headline-lock {
        display: block;

        color: #ffffff;

        font-size: 0.88em;

        line-height: inherit;

        white-space: nowrap;
    }

}


@media (max-width: 1050px) {

    .results-parking-test__statement h2
    .results-parking-test__headline-lock {
        display: block;

        color: #ffffff;

        white-space: normal;
    }

}

/* =========================================================
   WASH & BEHOLD OUR CREW FULL-BLEED HERO V4 2026-09-30
   ========================================================= */

.crew-page-hero {
    position: relative;
    isolation: isolate;

    min-height:
        clamp(700px, 78vh, 900px);

    display: flex;
    align-items: stretch;

    overflow: hidden;

    background:
        #071827;

    color:
        #ffffff;
}


/* =========================================================
   FULL-BLEED PHOTOGRAPH
   ========================================================= */

.crew-page-hero__media {
    position: absolute;
    z-index: 0;
    inset: 0;
}


.crew-page-hero__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 47%;
}


/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.crew-page-hero__overlay {
    position: absolute;
    z-index: 1;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(4, 15, 25, 0.97) 0%,
            rgba(4, 16, 27, 0.95) 16%,
            rgba(4, 17, 29, 0.89) 29%,
            rgba(5, 19, 32, 0.66) 38%,
            rgba(5, 20, 33, 0.30) 49%,
            rgba(5, 20, 33, 0.10) 62%,
            rgba(5, 20, 33, 0.02) 100%
        ),
        linear-gradient(
            0deg,
            rgba(4, 15, 25, 0.40) 0%,
            rgba(4, 15, 25, 0.05) 42%,
            rgba(4, 15, 25, 0.03) 100%
        );
}


/* =========================================================
   HERO LAYOUT
   ========================================================= */

.crew-page-hero__inner {
    position: relative;
    z-index: 2;

    min-height:
        clamp(700px, 78vh, 900px);

    display: grid;

    grid-template-columns:
        minmax(0, 620px)
        minmax(0, 1fr);

    align-items: center;

    gap:
        clamp(3rem, 6vw, 7rem);

    padding:
        clamp(5rem, 7vw, 7rem)
        0
        clamp(4rem, 6vw, 5.5rem);
}


/* =========================================================
   COPY
   ========================================================= */

.crew-page-hero__content {
    width: 100%;
    max-width: 620px;

    transform:
        translateY(-24px);
}


.crew-page-hero .section-label {
    color:
        rgba(255, 255, 255, 0.82);
}


.crew-page-hero .section-label::before {
    background:
        var(--yellow);
}


.crew-page-hero__content h1 {
    max-width: 620px;

    margin:
        1.35rem
        0
        0;

    color:
        #ffffff;

    font-size:
        clamp(4rem, 5vw, 5rem);

    font-weight: 950;

    line-height: 0.91;

    letter-spacing:
        -0.055em;
}


.crew-page-hero__content h1 span {
    display: block;

    color:
        #72c2f3;
}


.crew-page-hero__lead {
    max-width: 555px;

    margin:
        2rem
        0
        0;

    color:
        rgba(255, 255, 255, 0.82);

    font-size:
        clamp(1rem, 1.05vw, 1.1rem);

    font-weight: 500;

    line-height: 1.72;
}


/* =========================================================
   CAPACITY NOTE
   ========================================================= */

.crew-page-hero__footer-note {
    width:
        min(100%, 500px);

    margin-top:
        clamp(2.5rem, 3.5vw, 3.5rem);

    padding-top: 1.2rem;

    border-top:
        1px solid rgba(255, 255, 255, 0.28);
}


.crew-page-hero__footer-note span {
    display: block;

    color:
        rgba(255, 255, 255, 0.58);

    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.crew-page-hero__footer-note strong {
    display: block;

    margin-top: 0.35rem;

    color:
        var(--yellow);

    font-size:
        clamp(1.15rem, 1.4vw, 1.42rem);

    font-weight: 950;

    line-height: 1.2;
}


/* =========================================================
   FIELD NOTE
   Removed from visual composition.
   ========================================================= */

.crew-page-hero__field-note {
    display: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .crew-page-hero,
    .crew-page-hero__inner {
        min-height:
            clamp(720px, 82vh, 880px);
    }

    .crew-page-hero__inner {
        grid-template-columns: 1fr;

        align-content: center;
    }

    .crew-page-hero__content {
        max-width: 620px;

        transform: none;
    }

    .crew-page-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(4, 15, 25, 0.92) 0%,
                rgba(4, 17, 28, 0.78) 44%,
                rgba(5, 20, 33, 0.24) 76%,
                rgba(5, 20, 33, 0.08) 100%
            ),
            linear-gradient(
                0deg,
                rgba(4, 15, 25, 0.42) 0%,
                transparent 58%
            );
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .crew-page-hero,
    .crew-page-hero__inner {
        min-height:
            clamp(690px, 86vh, 820px);
    }

    .crew-page-hero__media img {
        object-position: 57% center;
    }

    .crew-page-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(4, 15, 25, 0.91) 0%,
                rgba(4, 17, 28, 0.72) 58%,
                rgba(5, 20, 33, 0.30) 100%
            ),
            linear-gradient(
                0deg,
                rgba(4, 15, 25, 0.56) 0%,
                rgba(4, 15, 25, 0.08) 68%
            );
    }

    .crew-page-hero__inner {
        align-content: end;

        padding:
            4.5rem
            0
            3.4rem;
    }

    .crew-page-hero__content h1 {
        max-width: 520px;

        font-size:
            clamp(3.3rem, 14vw, 4.5rem);
    }

    .crew-page-hero__lead {
        max-width: 520px;

        font-size: 0.98rem;

        line-height: 1.65;
    }

    .crew-page-hero__footer-note {
        margin-top: 2.3rem;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .crew-page-hero__content h1 {
        font-size:
            clamp(3rem, 15vw, 4rem);
    }

}

/* =========================================================
   WASH & BEHOLD CREW OPERATIONS V2 2026-09-30
   ========================================================= */

.crew-operations {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    padding:
        clamp(6.5rem, 9vw, 9rem)
        0;

    border-bottom:
        1px solid var(--border);

    background:
        linear-gradient(
            135deg,
            rgba(245, 248, 250, 0.96) 0%,
            rgba(237, 242, 245, 0.94) 100%
        );
}

.crew-operations::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: -90px;
    right: -65px;

    width:
        clamp(260px, 24vw, 430px);

    aspect-ratio: 1;

    background:
        url("../images/services-bubble-cluster.webp")
        center / contain
        no-repeat;

    opacity: 0.18;

    transform:
        rotate(-10deg);

    pointer-events: none;
}

.crew-operations::after {
    content: "";

    position: absolute;
    z-index: -1;

    bottom: -45px;
    left: 2%;

    width:
        clamp(80px, 8vw, 130px);

    aspect-ratio: 1;

    background:
        url("../images/services-bubble-small.webp")
        center / contain
        no-repeat;

    opacity: 0.14;

    transform:
        rotate(16deg);

    pointer-events: none;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.crew-operations__layout {
    display: grid;

    grid-template-columns:
        minmax(340px, 0.78fr)
        minmax(560px, 1.22fr);

    align-items: start;

    gap:
        clamp(4.5rem, 8vw, 9rem);
}


/* =========================================================
   INTRO
   ========================================================= */

.crew-operations__intro {
    max-width: 590px;
}


.crew-operations__intro h2 {
    max-width: 600px;

    margin-top: 1.35rem;

    font-size:
        clamp(3.5rem, 4.6vw, 5.3rem);

    line-height: 0.92;

    letter-spacing:
        -0.05em;
}


.crew-operations__intro h2 span {
    display: block;

    color:
        var(--blue);
}


.crew-operations__lead {
    max-width: 560px;

    margin-top: 1.9rem;

    color:
        var(--ink);

    font-size:
        clamp(1.05rem, 1.25vw, 1.2rem);

    font-weight: 800;

    line-height: 1.6;
}


.crew-operations__copy {
    max-width: 560px;

    margin-top: 1.15rem;

    color:
        #596b7c;

    font-size: 0.98rem;

    line-height: 1.75;
}


/* =========================================================
   STANDARD NOTE
   ========================================================= */

.crew-operations__standard {
    max-width: 520px;

    margin-top:
        clamp(2.8rem, 4vw, 4rem);

    padding:
        1.4rem
        0
        0;

    border-top:
        2px solid var(--ink);
}


.crew-operations__standard span {
    display: block;

    color:
        var(--blue);

    font-size: 0.63rem;
    font-weight: 950;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.crew-operations__standard strong {
    display: block;

    margin-top: 0.4rem;

    color:
        var(--ink);

    font-size:
        clamp(1.25rem, 1.6vw, 1.55rem);

    font-weight: 950;

    line-height: 1.25;
}


/* =========================================================
   ROLE LEDGER
   ========================================================= */

.crew-operations__roles {
    border-top:
        3px solid var(--ink);
}


.crew-operations__role {
    min-height: 150px;

    display: grid;

    grid-template-columns:
        76px
        minmax(0, 1fr);

    align-items: center;

    gap:
        clamp(1.5rem, 3vw, 3rem);

    padding:
        1.8rem
        0;

    border-bottom:
        1px solid rgba(11, 20, 32, 0.14);
}


.crew-operations__number {
    align-self: start;

    padding-top: 0.25rem;

    color:
        var(--blue);

    font-size:
        clamp(1.2rem, 1.5vw, 1.45rem);

    font-weight: 950;

    line-height: 1;
}


.crew-operations__role-copy {
    min-width: 0;

    display: grid;

    grid-template-columns:
        minmax(190px, 0.72fr)
        minmax(220px, 1.28fr);

    align-items: center;

    column-gap:
        clamp(2rem, 4vw, 4rem);
}


.crew-operations__role-copy p {
    grid-column: 1;

    margin: 0 0 0.45rem;

    color:
        #708294;

    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.crew-operations__role-copy h3 {
    grid-column: 1;

    color:
        var(--ink);

    font-size:
        clamp(1.6rem, 2.1vw, 2.2rem);

    line-height: 1;

    letter-spacing:
        -0.04em;
}


.crew-operations__role-copy span {
    grid-column: 2;
    grid-row: 1 / span 2;

    max-width: 420px;

    color:
        #586a7b;

    font-size: 0.9rem;

    line-height: 1.65;
}


/* =========================================================
   HOVER DETAIL
   ========================================================= */

@media (hover: hover) {

    .crew-operations__role {
        transition:
            padding-left var(--transition),
            background-color var(--transition);
    }

    .crew-operations__role:hover {
        padding-left: 1rem;

        background:
            rgba(255, 255, 255, 0.58);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .crew-operations__layout {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }

    .crew-operations__intro {
        max-width: 720px;
    }

    .crew-operations__intro h2 {
        max-width: 720px;
    }

    .crew-operations__lead,
    .crew-operations__copy {
        max-width: 650px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .crew-operations {
        padding:
            5rem
            0;
    }

    .crew-operations__layout {
        gap: 3.5rem;
    }

    .crew-operations__intro h2 {
        font-size:
            clamp(3rem, 12vw, 4rem);
    }

    .crew-operations__role {
        min-height: 0;

        grid-template-columns:
            46px
            minmax(0, 1fr);

        align-items: start;

        gap: 1rem;

        padding:
            1.65rem
            0;
    }

    .crew-operations__role-copy {
        display: block;
    }

    .crew-operations__role-copy p {
        margin-bottom: 0.35rem;
    }

    .crew-operations__role-copy h3 {
        font-size:
            clamp(1.6rem, 8vw, 2rem);
    }

    .crew-operations__role-copy span {
        display: block;

        margin-top: 0.75rem;

        max-width: 100%;
    }

}

/* =========================================================
   WASH & BEHOLD CREW WORKFLOW V1 2026-09-30
   ========================================================= */

.crew-workflow {
    position: relative;
    isolation: isolate;

    min-height:
        clamp(760px, 82vh, 940px);

    overflow: hidden;

    padding:
        clamp(6.5rem, 9vw, 9rem)
        0;

    background:
        var(--navy);

    color:
        var(--white);
}


/* =========================================================
   FULL BLEED BACKGROUND IMAGE
   ========================================================= */

.crew-workflow__media {
    position: absolute;
    z-index: -3;
    inset: 0;
}


.crew-workflow__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    transform:
        scale(1.015);
}


/* =========================================================
   IMAGE TREATMENT
   ========================================================= */

.crew-workflow__overlay {
    position: absolute;
    z-index: -2;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(5, 17, 29, 0.96) 0%,
            rgba(5, 18, 30, 0.93) 30%,
            rgba(6, 22, 36, 0.88) 52%,
            rgba(6, 24, 39, 0.83) 72%,
            rgba(6, 24, 39, 0.78) 100%
        ),
        linear-gradient(
            0deg,
            rgba(3, 13, 22, 0.56) 0%,
            rgba(3, 13, 22, 0.12) 50%,
            rgba(3, 13, 22, 0.28) 100%
        );
}


.crew-workflow::after {
    content: "";

    position: absolute;
    z-index: -1;

    top: 0;
    right: 0;
    bottom: 0;

    width: 54%;

    background:
        linear-gradient(
            135deg,
            rgba(23, 108, 168, 0.08),
            rgba(7, 24, 39, 0.06)
        );

    border-left:
        1px solid rgba(255, 255, 255, 0.08);

    pointer-events: none;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.crew-workflow__layout {
    display: grid;

    grid-template-columns:
        minmax(360px, 0.78fr)
        minmax(580px, 1.22fr);

    align-items: center;

    gap:
        clamp(4.5rem, 8vw, 9rem);
}


/* =========================================================
   INTRO
   ========================================================= */

.crew-workflow__intro {
    max-width: 590px;
}


.crew-workflow .section-label {
    color:
        rgba(255, 255, 255, 0.78);
}


.crew-workflow .section-label::before {
    background:
        var(--yellow);
}


.crew-workflow__intro h2 {
    max-width: 600px;

    margin-top: 1.35rem;

    color:
        var(--white);

    font-size:
        clamp(3.6rem, 4.8vw, 5.5rem);

    line-height: 0.91;

    letter-spacing:
        -0.052em;
}


.crew-workflow__intro h2 span {
    display: block;

    color:
        #72c2f3;
}


.crew-workflow__intro > p:not(.section-label) {
    max-width: 550px;

    margin-top: 1.9rem;

    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        clamp(1rem, 1.18vw, 1.12rem);

    line-height: 1.72;
}


/* =========================================================
   WORKFLOW STEPS
   ========================================================= */

.crew-workflow__steps {
    border-top:
        2px solid rgba(255, 255, 255, 0.72);
}


.crew-workflow__step {
    min-height: 150px;

    display: grid;

    grid-template-columns:
        72px
        minmax(0, 1fr);

    align-items: center;

    gap:
        clamp(1.5rem, 3vw, 2.8rem);

    padding:
        1.85rem
        0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.18);
}


.crew-workflow__number {
    align-self: start;

    padding-top: 0.2rem;

    color:
        var(--yellow);

    font-size:
        clamp(1.15rem, 1.5vw, 1.4rem);

    font-weight: 950;

    line-height: 1;
}


.crew-workflow__step > div {
    display: grid;

    grid-template-columns:
        minmax(240px, 0.92fr)
        minmax(260px, 1.08fr);

    align-items: center;

    column-gap:
        clamp(2rem, 4vw, 4rem);
}


.crew-workflow__step p {
    grid-column: 1;

    margin-bottom: 0.45rem;

    color:
        #72c2f3;

    font-size: 0.62rem;
    font-weight: 950;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.crew-workflow__step h3 {
    grid-column: 1;

    max-width: 340px;

    color:
        var(--white);

    font-size:
        clamp(1.45rem, 1.9vw, 2rem);

    line-height: 1.05;

    letter-spacing:
        -0.035em;
}


.crew-workflow__step div > span {
    grid-column: 2;
    grid-row: 1 / span 2;

    max-width: 420px;

    color:
        rgba(255, 255, 255, 0.66);

    font-size: 0.88rem;

    line-height: 1.66;
}


/* =========================================================
   SUBTLE ROW INTERACTION
   ========================================================= */

@media (hover: hover) {

    .crew-workflow__step {
        transition:
            padding-left var(--transition),
            background-color var(--transition);
    }

    .crew-workflow__step:hover {
        padding-left: 1rem;

        background:
            rgba(255, 255, 255, 0.045);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .crew-workflow {
        min-height: auto;
    }

    .crew-workflow__layout {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }

    .crew-workflow__intro {
        max-width: 720px;
    }

    .crew-workflow__intro h2 {
        max-width: 720px;
    }

    .crew-workflow__intro > p:not(.section-label) {
        max-width: 640px;
    }

    .crew-workflow::after {
        display: none;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .crew-workflow {
        padding:
            5rem
            0;
    }

    .crew-workflow__media img {
        object-position: 62% center;
    }

    .crew-workflow__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5, 17, 29, 0.95) 0%,
                rgba(5, 18, 30, 0.90) 58%,
                rgba(6, 24, 39, 0.82) 100%
            ),
            linear-gradient(
                0deg,
                rgba(3, 13, 22, 0.62) 0%,
                rgba(3, 13, 22, 0.18) 60%,
                rgba(3, 13, 22, 0.34) 100%
            );
    }

    .crew-workflow__layout {
        gap: 3.5rem;
    }

    .crew-workflow__intro h2 {
        font-size:
            clamp(3rem, 12vw, 4rem);
    }

    .crew-workflow__step {
        min-height: 0;

        grid-template-columns:
            44px
            minmax(0, 1fr);

        align-items: start;

        gap: 1rem;

        padding:
            1.6rem
            0;
    }

    .crew-workflow__step > div {
        display: block;
    }

    .crew-workflow__step h3 {
        max-width: 100%;

        font-size:
            clamp(1.45rem, 7vw, 1.9rem);
    }

    .crew-workflow__step div > span {
        display: block;

        margin-top: 0.8rem;

        max-width: 100%;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .crew-workflow__intro h2 {
        font-size:
            clamp(2.8rem, 13vw, 3.7rem);
    }

}

/* =========================================================
   WASH & BEHOLD CREW RIGS V2 2026-09-30
   ========================================================= */

.crew-rigs {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    padding:
        clamp(6.5rem, 9vw, 9rem)
        0;

    border-bottom:
        1px solid var(--border);

    background:
        linear-gradient(
            135deg,
            rgba(248, 251, 253, 0.98) 0%,
            rgba(236, 244, 249, 0.96) 48%,
            rgba(245, 249, 252, 0.98) 100%
        );
}


/* =========================================================
   BACKGROUND TREATMENT
   ========================================================= */

.crew-rigs::before {
    content: "";

    position: absolute;
    z-index: -2;

    top: -115px;
    left: -80px;

    width:
        clamp(280px, 24vw, 430px);

    aspect-ratio: 1;

    background:
        url("../images/services-bubble-cluster.webp")
        center / contain
        no-repeat;

    opacity: 0.13;

    transform:
        rotate(12deg);

    pointer-events: none;
}


.crew-rigs::after {
    content: "";

    position: absolute;
    z-index: -2;

    right: 4%;
    bottom: -48px;

    width:
        clamp(90px, 7vw, 130px);

    aspect-ratio: 1;

    background:
        url("../images/services-bubble-small.webp")
        center / contain
        no-repeat;

    opacity: 0.13;

    transform:
        rotate(-18deg);

    pointer-events: none;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.crew-rigs__layout {
    display: grid;

    grid-template-columns:
        minmax(540px, 1.08fr)
        minmax(420px, 0.92fr);

    align-items: center;

    gap:
        clamp(4.5rem, 8vw, 9rem);
}


/* =========================================================
   RIG IMAGE
   ========================================================= */

.crew-rigs__visual {
    position: relative;

    min-height:
        clamp(620px, 50vw, 760px);

    overflow: hidden;

    border-radius:
        var(--radius-lg);

    background:
        var(--steel-200);

    box-shadow:
        0 28px 80px rgba(4, 20, 33, 0.14);
}


.crew-rigs__visual::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            0deg,
            rgba(5, 18, 30, 0.56) 0%,
            rgba(5, 18, 30, 0.10) 32%,
            transparent 60%
        );
}


.crew-rigs__visual > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
}


.crew-rigs__visual figcaption {
    position: absolute;
    z-index: 2;

    right: 2rem;
    bottom: 2rem;
    left: 2rem;

    padding-top: 1rem;

    border-top:
        1px solid rgba(255, 255, 255, 0.48);
}


.crew-rigs__visual figcaption span {
    display: block;

    color:
        var(--yellow);

    font-size: 0.62rem;
    font-weight: 950;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.crew-rigs__visual figcaption strong {
    display: block;

    margin-top: 0.35rem;

    color:
        var(--white);

    font-size:
        clamp(1.35rem, 2vw, 1.8rem);

    font-weight: 950;

    line-height: 1.15;
}


/* =========================================================
   CONTENT
   ========================================================= */

.crew-rigs__content {
    max-width: 610px;
}


.crew-rigs__content h2 {
    max-width: 610px;

    margin-top: 1.35rem;

    font-size:
        clamp(3.6rem, 4.8vw, 5.4rem);

    line-height: 0.92;

    letter-spacing:
        -0.052em;
}


.crew-rigs__content h2 span {
    display: block;

    color:
        var(--blue);

    font-size: 0.82em;

    letter-spacing:
        -0.055em;

    white-space: nowrap;
}


.crew-rigs__lead {
    max-width: 570px;

    margin-top: 1.8rem;

    color:
        var(--ink);

    font-size:
        clamp(1.05rem, 1.25vw, 1.18rem);

    font-weight: 800;

    line-height: 1.62;
}


/* =========================================================
   RIG FACTS
   ========================================================= */

.crew-rigs__facts {
    margin-top:
        clamp(2.6rem, 4vw, 3.8rem);

    border-top:
        2px solid var(--ink);
}


.crew-rigs__facts article {
    min-height: 130px;

    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr);

    align-items: start;

    gap: 1.2rem;

    padding:
        1.6rem
        0;

    border-bottom:
        1px solid rgba(11, 20, 32, 0.14);
}


.crew-rigs__facts article > span {
    padding-top: 0.15rem;

    color:
        var(--blue);

    font-size: 0.86rem;
    font-weight: 950;

    line-height: 1;
}


.crew-rigs__facts h3 {
    color:
        var(--ink);

    font-size:
        clamp(1.45rem, 1.8vw, 1.9rem);

    line-height: 1.05;

    letter-spacing:
        -0.035em;
}


.crew-rigs__facts p {
    max-width: 500px;

    margin-top: 0.65rem;

    color:
        #586a7b;

    font-size: 0.9rem;

    line-height: 1.68;
}


/* =========================================================
   CLOSING NOTE
   ========================================================= */

.crew-rigs__closing {
    max-width: 540px;

    margin-top:
        clamp(2.6rem, 4vw, 3.7rem);

    padding-top: 1.3rem;

    border-top:
        1px solid rgba(11, 20, 32, 0.28);
}


.crew-rigs__closing span {
    display: block;

    color:
        var(--blue);

    font-size: 0.62rem;
    font-weight: 950;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.crew-rigs__closing strong {
    display: block;

    margin-top: 0.4rem;

    color:
        var(--ink);

    font-size:
        clamp(1.2rem, 1.55vw, 1.5rem);

    font-weight: 950;

    line-height: 1.28;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .crew-rigs__layout {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .crew-rigs__visual {
        min-height:
            clamp(520px, 68vw, 700px);
    }

    .crew-rigs__content {
        max-width: 720px;
    }

    .crew-rigs__content h2 {
        max-width: 720px;
    }

    .crew-rigs__lead {
        max-width: 650px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .crew-rigs {
        padding:
            5rem
            0;
    }

    .crew-rigs__layout {
        gap: 3.4rem;
    }

    .crew-rigs__visual {
        min-height:
            clamp(430px, 115vw, 560px);

        border-radius:
            var(--radius-md);
    }

    .crew-rigs__visual > img {
        object-position: 57% center;
    }

    .crew-rigs__visual figcaption {
        right: 1.3rem;
        bottom: 1.3rem;
        left: 1.3rem;
    }

    .crew-rigs__content h2 {
        font-size:
            clamp(3rem, 12vw, 4rem);
    }

    .crew-rigs__content h2 span {
        font-size: inherit;

        white-space: normal;
    }

    .crew-rigs__facts article {
        min-height: 0;

        grid-template-columns:
            40px
            minmax(0, 1fr);

        gap: 0.9rem;

        padding:
            1.45rem
            0;
    }

    .crew-rigs::before {
        top: -70px;
        left: -90px;

        width: 240px;

        opacity: 0.10;
    }

    .crew-rigs::after {
        right: -15px;
        bottom: 10px;

        width: 80px;

        opacity: 0.10;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .crew-rigs__content h2 {
        font-size:
            clamp(2.8rem, 13vw, 3.7rem);
    }

}

/* =========================================================
   WASH & BEHOLD CREW QUALITY CONTROL V1 2026-09-30
   ========================================================= */

.crew-quality {
    position: relative;
    isolation: isolate;

    min-height:
        clamp(760px, 82vh, 940px);

    overflow: hidden;

    padding:
        clamp(6.5rem, 9vw, 9rem)
        0;

    background:
        var(--navy);

    color:
        var(--white);
}


/* =========================================================
   FULL BLEED BACKGROUND IMAGE
   ========================================================= */

.crew-quality__media {
    position: absolute;
    z-index: -3;
    inset: 0;
}


.crew-quality__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    transform:
        scale(1.02);
}


/* =========================================================
   IMAGE TREATMENT
   ========================================================= */

.crew-quality__overlay {
    position: absolute;
    z-index: -2;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(4, 15, 25, 0.96) 0%,
            rgba(4, 16, 27, 0.93) 28%,
            rgba(5, 19, 31, 0.82) 48%,
            rgba(6, 22, 36, 0.72) 68%,
            rgba(6, 24, 39, 0.64) 100%
        ),
        linear-gradient(
            0deg,
            rgba(3, 13, 22, 0.58) 0%,
            rgba(3, 13, 22, 0.10) 52%,
            rgba(3, 13, 22, 0.24) 100%
        );
}


.crew-quality::after {
    content: "";

    position: absolute;
    z-index: -1;

    top: 0;
    right: 0;
    bottom: 0;

    width: 55%;

    border-left:
        1px solid rgba(255, 255, 255, 0.08);

    background:
        linear-gradient(
            135deg,
            rgba(23, 108, 168, 0.08),
            rgba(7, 24, 39, 0.04)
        );

    pointer-events: none;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.crew-quality__layout {
    display: grid;

    grid-template-columns:
        minmax(360px, 0.78fr)
        minmax(580px, 1.22fr);

    align-items: center;

    gap:
        clamp(4.5rem, 8vw, 9rem);
}


/* =========================================================
   INTRO
   ========================================================= */

.crew-quality__intro {
    max-width: 590px;
}


.crew-quality .section-label {
    color:
        rgba(255, 255, 255, 0.78);
}


.crew-quality .section-label::before {
    background:
        var(--yellow);
}


.crew-quality__intro h2 {
    max-width: 610px;

    margin-top: 1.35rem;

    color:
        var(--white);

    font-size:
        clamp(3.6rem, 4.8vw, 5.4rem);

    line-height: 0.92;

    letter-spacing:
        -0.052em;
}


.crew-quality__intro h2 span {
    display: block;

    color:
        #72c2f3;
}


.crew-quality__lead {
    max-width: 550px;

    margin-top: 1.85rem;

    color:
        rgba(255, 255, 255, 0.90);

    font-size:
        clamp(1.05rem, 1.2vw, 1.18rem);

    font-weight: 800;

    line-height: 1.62;
}


.crew-quality__copy {
    max-width: 550px;

    margin-top: 1.05rem;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 0.97rem;

    line-height: 1.72;
}


/* =========================================================
   STANDARD STATEMENT
   ========================================================= */

.crew-quality__statement {
    max-width: 530px;

    margin-top:
        clamp(2.8rem, 4vw, 4rem);

    padding-top: 1.3rem;

    border-top:
        1px solid rgba(255, 255, 255, 0.30);
}


.crew-quality__statement span {
    display: block;

    color:
        var(--yellow);

    font-size: 0.62rem;
    font-weight: 950;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.crew-quality__statement strong {
    display: block;

    margin-top: 0.45rem;

    color:
        var(--white);

    font-size:
        clamp(1.25rem, 1.65vw, 1.58rem);

    font-weight: 950;

    line-height: 1.28;
}


/* =========================================================
   QUALITY CHECKS
   ========================================================= */

.crew-quality__checks {
    border-top:
        2px solid rgba(255, 255, 255, 0.74);
}


.crew-quality__check {
    min-height: 180px;

    display: grid;

    grid-template-columns:
        72px
        minmax(0, 1fr);

    align-items: center;

    gap:
        clamp(1.5rem, 3vw, 2.8rem);

    padding:
        2rem
        0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.18);
}


.crew-quality__number {
    align-self: start;

    padding-top: 0.25rem;

    color:
        var(--yellow);

    font-size:
        clamp(1.15rem, 1.5vw, 1.4rem);

    font-weight: 950;

    line-height: 1;
}


.crew-quality__check-copy {
    display: grid;

    grid-template-columns:
        minmax(230px, 0.9fr)
        minmax(270px, 1.1fr);

    align-items: center;

    column-gap:
        clamp(2rem, 4vw, 4rem);
}


.crew-quality__check-copy p {
    grid-column: 1;

    margin-bottom: 0.45rem;

    color:
        #72c2f3;

    font-size: 0.62rem;
    font-weight: 950;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.crew-quality__check-copy h3 {
    grid-column: 1;

    max-width: 350px;

    color:
        var(--white);

    font-size:
        clamp(1.55rem, 2vw, 2.05rem);

    line-height: 1.04;

    letter-spacing:
        -0.035em;
}


.crew-quality__check-copy > span {
    grid-column: 2;
    grid-row: 1 / span 2;

    max-width: 430px;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 0.9rem;

    line-height: 1.68;
}


/* =========================================================
   SUBTLE ROW INTERACTION
   ========================================================= */

@media (hover: hover) {

    .crew-quality__check {
        transition:
            padding-left var(--transition),
            background-color var(--transition);
    }

    .crew-quality__check:hover {
        padding-left: 1rem;

        background:
            rgba(255, 255, 255, 0.045);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .crew-quality {
        min-height: auto;
    }

    .crew-quality__layout {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }

    .crew-quality__intro {
        max-width: 720px;
    }

    .crew-quality__intro h2 {
        max-width: 720px;
    }

    .crew-quality__lead,
    .crew-quality__copy {
        max-width: 640px;
    }

    .crew-quality::after {
        display: none;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .crew-quality {
        padding:
            5rem
            0;
    }

    .crew-quality__media img {
        object-position: 58% center;
    }

    .crew-quality__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(4, 15, 25, 0.95) 0%,
                rgba(4, 16, 27, 0.90) 52%,
                rgba(5, 20, 33, 0.76) 100%
            ),
            linear-gradient(
                0deg,
                rgba(3, 13, 22, 0.64) 0%,
                rgba(3, 13, 22, 0.18) 62%,
                rgba(3, 13, 22, 0.32) 100%
            );
    }

    .crew-quality__layout {
        gap: 3.5rem;
    }

    .crew-quality__intro h2 {
        font-size:
            clamp(3rem, 12vw, 4rem);
    }

    .crew-quality__check {
        min-height: 0;

        grid-template-columns:
            44px
            minmax(0, 1fr);

        align-items: start;

        gap: 1rem;

        padding:
            1.6rem
            0;
    }

    .crew-quality__check-copy {
        display: block;
    }

    .crew-quality__check-copy h3 {
        max-width: 100%;

        font-size:
            clamp(1.5rem, 7vw, 1.95rem);
    }

    .crew-quality__check-copy > span {
        display: block;

        margin-top: 0.8rem;

        max-width: 100%;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .crew-quality__intro h2 {
        font-size:
            clamp(2.8rem, 13vw, 3.7rem);
    }

}


/* =========================================================
   CREW FINAL CTA
   ========================================================= */

.crew-final-cta {
    position: relative;
    min-height: clamp(560px, 72vh, 780px);

    display: flex;
    overflow: hidden;

    background: #071827;
    color: #ffffff;
}


.crew-final-cta__media {
    position: absolute;
    inset: 0;
}


.crew-final-cta__media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center 58%;
}


.crew-final-cta__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 24, 39, 0.96) 0%,
            rgba(7, 24, 39, 0.90) 30%,
            rgba(7, 24, 39, 0.67) 54%,
            rgba(7, 24, 39, 0.30) 78%,
            rgba(7, 24, 39, 0.18) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7, 24, 39, 0.58) 0%,
            transparent 45%,
            rgba(7, 24, 39, 0.16) 100%
        );
}


.crew-final-cta__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: inherit;

    display: flex;
    align-items: center;

    padding-top: clamp(5rem, 9vw, 8rem);
    padding-bottom: clamp(5rem, 9vw, 8rem);
}


.crew-final-cta__content {
    width: min(680px, 100%);
}


.crew-final-cta .section-label {
    color: #ffffff;
}


.crew-final-cta__content h2 {
    margin-top: 1.1rem;

    max-width: 680px;

    color: #ffffff;

    font-size: clamp(3.4rem, 6.7vw, 7rem);
    line-height: 0.91;
    letter-spacing: -0.055em;
}


.crew-final-cta__content h2 span {
    display: block;
    color: #69bdf4;
}


.crew-final-cta__lead {
    max-width: 590px;
    margin-top: 1.8rem;

    color: rgba(255, 255, 255, 0.86);

    font-size: clamp(1rem, 1.35vw, 1.18rem);
    line-height: 1.7;
}


.crew-final-cta__action {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;

    margin-top: 2rem;
}


.crew-final-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;
    padding: 0.85rem 1.5rem;

    border: 1px solid #ffd13b;
    border-radius: 999px;

    background: #ffd13b;
    color: #071827;

    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    text-decoration: none;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}


.crew-final-cta__button:hover {
    border-color: #ffffff;
    background: #ffffff;
    color: #071827;

    transform: translateY(-2px);
}


.crew-final-cta__button:focus-visible {
    outline: 3px solid #69bdf4;
    outline-offset: 4px;
}


.crew-final-cta__action > span {
    color: rgba(255, 255, 255, 0.76);

    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}


.crew-final-cta__note {
    margin-top: 1.8rem;

    color: rgba(255, 255, 255, 0.56);

    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.5;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


@media (max-width: 900px) {

    .crew-final-cta {
        min-height: 650px;
    }


    .crew-final-cta__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(7, 24, 39, 0.96) 0%,
                rgba(7, 24, 39, 0.86) 48%,
                rgba(7, 24, 39, 0.52) 100%
            ),
            linear-gradient(
                0deg,
                rgba(7, 24, 39, 0.62) 0%,
                transparent 55%
            );
    }

}


@media (max-width: 640px) {

    .crew-final-cta {
        min-height: 680px;
    }


    .crew-final-cta__media img {
        object-position: 63% center;
    }


    .crew-final-cta__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(7, 24, 39, 0.50) 0%,
                rgba(7, 24, 39, 0.78) 42%,
                rgba(7, 24, 39, 0.98) 100%
            );
    }


    .crew-final-cta__inner {
        align-items: flex-end;

        padding-top: 4.5rem;
        padding-bottom: 4rem;
    }


    .crew-final-cta__content h2 {
        margin-top: 0.9rem;

        font-size: clamp(2.8rem, 13vw, 4.7rem);
        line-height: 0.92;
    }


    .crew-final-cta__lead {
        margin-top: 1.35rem;

        font-size: 0.98rem;
        line-height: 1.65;
    }


    .crew-final-cta__action {
        align-items: flex-start;
        flex-direction: column;

        margin-top: 1.7rem;
    }


    .crew-final-cta__button {
        min-height: 52px;
        padding-inline: 1.35rem;
    }


    .crew-final-cta__note {
        margin-top: 1.45rem;

        font-size: 0.61rem;
    }

}



/* =========================================================
   CREW FINAL CTA BOUNDARY FIX
   Full-bleed image stays full width.
   CTA content respects the site's normal content boundary.
   ========================================================= */

.crew-final-cta__inner {
    width: min(
        calc(100% - 64px),
        var(--site-width)
    );

    margin-inline: auto;
}


@media (max-width: 700px) {

    .crew-final-cta__inner {
        width: min(
            calc(100% - 40px),
            var(--site-width)
        );
    }

}


/* =========================================================
   BOOKING PAGE
   ========================================================= */

/* BOOKING PAGE STYLES START */

.booking-page {
    position: relative;
    min-height: 820px;

    overflow: hidden;

    background: var(--navy);
    isolation: isolate;
}

.booking-page__media {
    position: absolute;
    inset: 0;
    z-index: -3;

    overflow: hidden;
}

.booking-page__media img {
    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;
    object-position: center center;
}

.booking-page__overlay {
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(4, 16, 28, 0.96) 0%,
            rgba(4, 16, 28, 0.88) 32%,
            rgba(4, 16, 28, 0.60) 58%,
            rgba(4, 16, 28, 0.48) 100%
        );
}

.booking-page__layout {
    min-height: 820px;

    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(480px, 0.85fr);

    align-items: center;

    gap: clamp(3rem, 6vw, 7rem);

    padding-top: 92px;
    padding-bottom: 92px;
}

.booking-page__intro {
    max-width: 650px;
}

.booking-page__intro .section-label {
    margin-bottom: 1.4rem;

    color: var(--white);
}

.booking-page__intro h1 {
    max-width: 650px;

    margin: 0;

    color: var(--white);

    font-size: clamp(
        4rem,
        6.5vw,
        7.4rem
    );

    line-height: 0.9;
}

.booking-page__intro h1 span {
    display: block;

    color: var(--blue);
}

.booking-page__lead {
    max-width: 590px;

    margin-top: 2rem;

    color: rgba(255, 255, 255, 0.88);

    font-size: 1.08rem;
    line-height: 1.7;
}

.booking-page__phone {
    display: flex;
    align-items: center;
    gap: 0.9rem;

    margin-top: 2.2rem;
}

.booking-page__phone small {
    color: rgba(255, 255, 255, 0.68);

    font-size: 0.72rem;
    font-weight: 900;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.booking-page__phone a {
    color: var(--white);

    font-size: 1.05rem;
    font-weight: 900;

    transition:
        color var(--transition-fast);
}

.booking-page__phone a:hover {
    color: var(--yellow);
}


/* ---------------------------------------------------------
   REQUEST CARD
   --------------------------------------------------------- */

.service-ticket {
    width: 100%;
    max-width: 620px;

    justify-self: end;

    padding: clamp(1.6rem, 3vw, 2.4rem);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(239, 246, 250, 0.96)
        );

    border-top: 5px solid var(--yellow);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.30),
        0 8px 24px rgba(0, 0, 0, 0.16);
}

.service-ticket__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;

    padding-bottom: 1.4rem;

    border-bottom: 1px solid rgba(7, 24, 39, 0.16);
}

.service-ticket__top span,
.service-ticket__number small {
    display: block;

    color: var(--navy-3);

    font-size: 0.68rem;
    font-weight: 900;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.service-ticket__top strong {
    display: block;

    margin-top: 0.3rem;

    color: var(--ink);

    font-size: 1.35rem;
    font-weight: 900;
}

.service-ticket__number {
    text-align: right;
}

.service-ticket__number strong {
    display: block;

    margin-top: 0.3rem;

    color: var(--blue);

    font-size: 0.9rem;
    font-weight: 900;
}


/* ---------------------------------------------------------
   FORM
   --------------------------------------------------------- */

.booking-form {
    display: grid;
    gap: 1rem;

    margin-top: 1.5rem;
}

.booking-form label {
    display: grid;
    gap: 0.45rem;
}

.booking-form label > span {
    color: var(--ink);

    font-size: 0.72rem;
    font-weight: 900;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1rem;
}

.booking-form input,
.booking-form select,
.booking-form textarea {
    width: 100%;
    min-height: 52px;

    padding: 0.8rem 0.95rem;

    border: 1px solid rgba(7, 24, 39, 0.22);
    border-radius: 2px;

    background: rgba(255, 255, 255, 0.96);
    color: var(--ink);

    font-size: 0.95rem;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
}

.booking-form input:hover,
.booking-form select:hover,
.booking-form textarea:hover {
    border-color: rgba(7, 24, 39, 0.42);
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
    border-color: var(--blue);

    background: var(--white);

    box-shadow:
        0 0 0 3px rgba(74, 169, 230, 0.16);

    outline: none;
}

.booking-form select {
    appearance: auto;

    cursor: pointer;
}

.booking-form .button {
    width: 100%;

    margin-top: 0.35rem;
}

.booking-form__note {
    color: var(--navy-3);

    font-size: 0.78rem;
    line-height: 1.55;

    text-align: center;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .booking-page {
        min-height: auto;
    }

    .booking-page__media {
        position: absolute;
        inset: 0;
    }

    .booking-page__media img {
        object-position: 58% center;
    }

    .booking-page__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(4, 16, 28, 0.90) 0%,
                rgba(4, 16, 28, 0.78) 45%,
                rgba(4, 16, 28, 0.94) 100%
            );
    }

    .booking-page__layout {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 3rem;

        padding-top: 72px;
        padding-bottom: 72px;
    }

    .booking-page__intro {
        max-width: 720px;
    }

    .booking-page__intro h1 {
        font-size: clamp(
            3.5rem,
            11vw,
            5.8rem
        );
    }

    .service-ticket {
        max-width: none;

        justify-self: stretch;
    }
}


@media (max-width: 600px) {

    .booking-page__layout {
        width: min(
            calc(100% - 32px),
            var(--site-width)
        );

        padding-top: 56px;
        padding-bottom: 56px;
    }

    .booking-page__intro h1 {
        font-size: clamp(
            3rem,
            14vw,
            4.5rem
        );
    }

    .booking-page__lead {
        margin-top: 1.5rem;

        font-size: 1rem;
    }

    .booking-page__phone {
        align-items: flex-start;
        flex-direction: column;

        gap: 0.35rem;
    }

    .service-ticket {
        padding: 1.25rem;
    }

    .service-ticket__top {
        flex-direction: column;

        gap: 1rem;
    }

    .service-ticket__number {
        text-align: left;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .booking-form {
        gap: 0.9rem;
    }

}


/* BOOKING PAGE STYLES END */

/* ==========================================================================
   WASH & BEHOLD PREMIUM - MOBILE SPLIT COMPOSITION FINAL

   Desktop keeps the unified dark-to-light composition.

   Mobile stacks the two phases vertically, so each phase gets its own
   visual environment. Do not squeeze the desktop gradient into a phone.

   Real water artwork remains present on both phases.
   ========================================================================== */

@media (max-width: 700px) {

    /* ---------------------------------------------------------
       RESET THE SHARED DESKTOP BACKGROUND
       --------------------------------------------------------- */

    .finish-logic__split {
        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        background:
            transparent !important;

        overflow:
            hidden !important;

        isolation:
            isolate !important;
    }


    /* Remove the desktop crossover and smoothing layers */

    .finish-logic__split::before,
    .finish-logic__split::after {
        content:
            none !important;

        display:
            none !important;
    }


    /* ---------------------------------------------------------
       CORRECTION
       --------------------------------------------------------- */

    .finish-phase--correct {
        min-height:
            0 !important;

        background:
            linear-gradient(
                180deg,
                rgba(4, 18, 30, 0.97) 0%,
                rgba(7, 31, 49, 0.94) 100%
            ),
            url("../images/maintenance-water-stream-top.webp")
            center 78% /
            135% auto
            no-repeat !important;

        color:
            #ffffff !important;

        border:
            0 !important;
    }


    /* Keep the correction text readable without creating a card */

    .finish-phase--correct .finish-phase__inner {
        width:
            min(
                calc(100% - 32px),
                680px
            ) !important;

        padding:
            4.25rem
            0
            4.75rem !important;

        background:
            transparent !important;
    }


    /* The old mobile readability veil stays subtle */

    .finish-phase--correct
    .finish-phase__inner::before {
        inset:
            -2rem
            -1rem
            -2rem
            -1rem !important;

        background:
            linear-gradient(
                180deg,
                rgba(2, 12, 22, 0.32) 0%,
                rgba(4, 20, 35, 0.16) 62%,
                transparent 100%
            ) !important;
    }


    /* ---------------------------------------------------------
       PROTECTION
       --------------------------------------------------------- */

    .finish-phase--protect {
        min-height:
            0 !important;

        background:
            linear-gradient(
                180deg,
                rgba(222, 239, 248, 0.97) 0%,
                rgba(247, 251, 253, 0.95) 100%
            ),
            url("../images/maintenance-water-stream-top.webp")
            center 20% /
            135% auto
            no-repeat !important;

        color:
            #071827 !important;

        border:
            0 !important;
    }


    .finish-phase--protect .finish-phase__inner {
        width:
            min(
                calc(100% - 32px),
                680px
            ) !important;

        padding:
            4.25rem
            0
            4.75rem !important;

        background-image:
            url("../images/services-bubble-small.webp"),
            url("../images/services-bubble-medium.webp"),
            url("../images/services-bubble-small.webp") !important;

        background-repeat:
            no-repeat !important;

        background-size:
            20px 20px,
            42px 42px,
            16px 16px !important;

        background-position:
            92% 68%,
            82% 84%,
            70% 93% !important;
    }


    /* ---------------------------------------------------------
       TYPOGRAPHY
       --------------------------------------------------------- */

    .finish-phase h3 {
        font-size:
            clamp(
                3.25rem,
                13vw,
                4.6rem
            ) !important;

        line-height:
            0.88 !important;
    }


    .finish-phase__lead {
        max-width:
            620px !important;

        font-size:
            0.98rem !important;

        line-height:
            1.68 !important;
    }


    .finish-phase__list {
        margin-top:
            2.4rem !important;
    }


    .finish-phase__list > div {
        min-height:
            60px !important;

        grid-template-columns:
            40px
            minmax(0, 1fr) !important;

        font-size:
            0.88rem !important;
    }


    .finish-phase__result {
        margin-top:
            1.8rem !important;

        line-height:
            1.45 !important;
    }


    .finish-phase__result strong {
        display:
            block !important;

        margin:
            0.35rem
            0
            0 !important;
    }


    /* ---------------------------------------------------------
       PROTECTION CONTRAST
       --------------------------------------------------------- */

    .finish-phase--protect .finish-phase__number {
        color:
            rgba(
                17,
                99,
                155,
                0.075
            ) !important;
    }


    .finish-phase--protect .finish-phase__label {
        color:
            #0f5f99 !important;
    }


    .finish-phase--protect h3 {
        color:
            #071827 !important;
    }


    .finish-phase--protect h3 span {
        color:
            #1766a0 !important;
    }


    .finish-phase--protect .finish-phase__lead {
        color:
            #28495d !important;
    }


    .finish-phase--protect .finish-phase__list {
        border-color:
            rgba(7, 24, 39, 0.18) !important;
    }


    .finish-phase--protect .finish-phase__list > div {
        border-color:
            rgba(7, 24, 39, 0.14) !important;

        color:
            #102f43 !important;
    }


    .finish-phase--protect .finish-phase__list span {
        color:
            #1766a0 !important;
    }


    .finish-phase--protect .finish-phase__result {
        color:
            #587184 !important;
    }


    .finish-phase--protect .finish-phase__result strong {
        color:
            #071827 !important;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

    .finish-phase--correct .finish-phase__inner,
    .finish-phase--protect .finish-phase__inner {
        width:
            min(
                calc(100% - 28px),
                680px
            ) !important;

        padding-top:
            3.75rem !important;

        padding-bottom:
            4.25rem !important;
    }


    .finish-phase h3 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.15rem
            ) !important;
    }

}