/* =========================================================
   SANTA CRUZ PAINTING
   FUTURISTIC RESIDENTIAL PAINTING HEADER
========================================================= */

:root {

    --scp-navy: #18243a;
    --scp-deep: #0b1321;
    --scp-deeper: #060b13;

    --scp-gold: #d0a054;
    --scp-gold-light: #f0cd86;

    --scp-copper: #b57a52;

    --scp-cream: #f2f2ec;
    --scp-white: #ffffff;

    --scp-text: #182133;
    --scp-muted: #6e7684;

    --scp-ease: cubic-bezier(.22, 1, .36, 1);

}


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    background:
        var(--scp-cream);

    color:
        var(--scp-text);

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 14px;

}

body.scp-lock {
    overflow: hidden;
}

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

button,
input,
select,
textarea {

    font-family:
        inherit;

    font-size: 14px;

}

.scp-container {

    width:
        min(94%, 1440px);

    margin:
        0 auto;

}


/* =========================================================
   GLOBAL MINIMUM FONT
========================================================= */

.scp-header *,
.scp-offcanvas *,
.scp-app-nav *,
.scp-service-sheet * {

    font-size:
        max(14px, 1em);

}


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

.scp-header {

    position: sticky;

    top: 0;

    z-index: 10000;

    isolation: isolate;

}

.scp-header.is-scrolled {

    filter:
        drop-shadow(
            0 15px 25px
            rgba(5, 11, 20, .13)
        );

}


/* =========================================================
   TOPBAR
========================================================= */

.scp-topbar {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #060c16 0%,
            #111d30 48%,
            #07101c 100%
        );

    color:
        #ffffff;

    border-bottom:
        1px solid
        rgba(208, 160, 84, .18);

}

.scp-topbar::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            110deg,
            transparent 25%,
            rgba(208, 160, 84, .07) 45%,
            transparent 65%
        );

    transform:
        translateX(-100%);

    animation:
        scpTopLight
        9s linear infinite;

}

@keyframes scpTopLight {

    0% {
        transform:
            translateX(-100%);
    }

    45%,
    100% {
        transform:
            translateX(100%);
    }

}

.scp-topbar-inner {

    position: relative;

    z-index: 2;

    min-height:
        34px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        25px;

}

.scp-topbar-left,
.scp-topbar-right {

    display: flex;

    align-items: center;

    gap:
        20px;

}

.scp-topbar-right a,
.scp-location,
.scp-live {

    display: flex;

    align-items: center;

    gap:
        8px;

    color:
        rgba(255, 255, 255, .78);

    font-size:
        14px;

    line-height:
        1;

}

.scp-topbar i {

    color:
        var(--scp-gold);

}

.scp-topbar-right a {

    transition:
        color .3s ease;

}

.scp-topbar-right a:hover {

    color:
        var(--scp-gold-light);

}

.scp-live {

    font-weight:
        700;

}

.scp-live-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--scp-gold);

    box-shadow:
        0 0 0 5px
        rgba(208, 160, 84, .12);

    animation:
        scpPulse
        2s infinite;

}

@keyframes scpPulse {

    50% {

        box-shadow:
            0 0 0 9px
            rgba(208, 160, 84, 0);

    }

}

.scp-top-separator {

    width:
        1px;

    height:
        14px;

    background:
        rgba(255, 255, 255, .14);

}


/* =========================================================
   MAINBAR
========================================================= */

.scp-mainbar {

    position: relative;

    background:
        rgba(246, 246, 241, .94);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);

    border-bottom:
        1px solid
        rgba(15, 25, 40, .08);

}

.scp-mainbar-inner {

    position: relative;

    min-height:
        76px;

    display: grid;

    grid-template-columns:
        135px
        180px
        1fr
        auto;

    align-items: center;

    gap:
        18px;

}


/* =========================================================
   LOGO
========================================================= */

.scp-brand {

    position: relative;

    width:
        118px;

    height:
        94px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-top:
        7px;

    z-index:
        5;

}

.scp-logo-shell {

    position:
        relative;

    z-index:
        3;

    width:
        108px;

    height:
        91px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        3px;

    overflow:
        hidden;

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #e9e9e2
        );

    border:
        1px solid
        rgba(208, 160, 84, .25);

    box-shadow:
        0 14px 32px
        rgba(8, 15, 26, .16);

    transition:
        transform .45s
        var(--scp-ease),
        box-shadow .45s
        var(--scp-ease);

}

.scp-logo {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    border-radius:
        20px;

}

.scp-brand-orbit {

    position:
        absolute;

    inset:
        -3px;

    z-index:
        1;

    border-radius:
        27px;

    background:
        conic-gradient(
            transparent 0deg,
            var(--scp-gold) 65deg,
            transparent 115deg,
            transparent 190deg,
            var(--scp-copper) 250deg,
            transparent 320deg
        );

    animation:
        scpOrbit
        8s linear infinite;

}

.scp-brand-orbit::before {

    content: "";

    position:
        absolute;

    inset:
        2px;

    border-radius:
        25px;

    background:
        var(--scp-cream);

}

@keyframes scpOrbit {

    to {
        transform:
            rotate(360deg);
    }

}

.scp-brand-glow {

    position:
        absolute;

    bottom:
        -2px;

    left:
        50%;

    width:
        90px;

    height:
        30px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(208, 160, 84, .36),
            transparent 70%
        );

    filter:
        blur(8px);

}

.scp-brand:hover
.scp-logo-shell {

    transform:
        translateY(-4px)
        scale(1.025);

    box-shadow:
        0 20px 42px
        rgba(8, 15, 26, .2);

}


/* =========================================================
   RESIDENTIAL TAG
========================================================= */

.scp-brand-tag {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding-left:
        12px;

}

.scp-brand-tag::before {

    content: "";

    position:
        absolute;

    left:
        0;

    width:
        2px;

    height:
        38px;

    border-radius:
        5px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--scp-gold),
            transparent
        );

}

.scp-brand-tag-icon {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            var(--scp-deep),
            #1d2b43
        );

    color:
        var(--scp-gold-light);

    box-shadow:
        inset 0 0 18px
        rgba(208, 160, 84, .05);

}

.scp-brand-tag strong {

    display:
        block;

    color:
        var(--scp-deep);

    font-size:
        14px;

    line-height:
        1.2;

}

.scp-brand-tag small {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--scp-muted);

    font-size:
        14px;

    white-space:
        nowrap;

}


/* =========================================================
   DESKTOP NAV
========================================================= */

.scp-desktop-nav {

    height:
        76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        3px;

}

.scp-nav-link {

    position:
        relative;

    height:
        76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 15px;

    border:
        0;

    background:
        transparent;

    color:
        var(--scp-navy);

    font-size:
        14px;

    font-weight:
        700;

    cursor:
        pointer;

    white-space:
        nowrap;

    transition:
        color .3s ease;

}

.scp-nav-link::before {

    content: "";

    position:
        absolute;

    left:
        15px;

    right:
        15px;

    bottom:
        16px;

    height:
        3px;

    border-radius:
        70% 20% 80% 30%;

    background:
        linear-gradient(
            90deg,
            var(--scp-gold),
            var(--scp-copper)
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform .4s
        var(--scp-ease);

}

.scp-nav-link:hover,
.scp-nav-link.active {

    color:
        #99623e;

}

.scp-nav-link:hover::before,
.scp-nav-link.active::before {

    transform:
        scaleX(1);

}

.scp-services-trigger i {

    font-size:
        14px;

    transition:
        transform .35s
        var(--scp-ease);

}


/* =========================================================
   SERVICES DESKTOP
   HOVER + CLICK + KEYBOARD
========================================================= */

.scp-services {

    position:
        relative;

    height:
        76px;

    display:
        flex;

    align-items:
        center;

}


/*
   IMPORTANT:
   EL DROPDOWN SE ABRE SOLO CON HOVER.
*/

.scp-services:hover
.scp-services-dropdown,

.scp-services:focus-within
.scp-services-dropdown,

.scp-services.open
.scp-services-dropdown {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translate(-50%, 0)
        scale(1);

}


/* ROTATE ARROW */

.scp-services:hover
.scp-services-trigger i,

.scp-services:focus-within
.scp-services-trigger i,

.scp-services.open
.scp-services-trigger i {

    transform:
        rotate(180deg);

}


/* =========================================================
   SERVICES DROPDOWN
========================================================= */

.scp-services-dropdown {

    position:
        absolute;

    top:
        calc(100% - 5px);

    left:
        50%;

    width:
        500px;

    padding:
        15px;

    border-radius:
        24px;

    background:
        rgba(255, 255, 255, .98);

    border:
        1px solid
        rgba(15, 24, 38, .08);

    box-shadow:
        0 28px 80px
        rgba(7, 13, 23, .20);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translate(-50%, 14px)
        scale(.97);

    transform-origin:
        top center;

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .4s
        var(--scp-ease);

}


/* INVISIBLE BRIDGE FOR HOVER */

.scp-services-dropdown::before {

    content: "";

    position:
        absolute;

    top:
        -15px;

    left:
        0;

    width:
        100%;

    height:
        20px;

}


/* FUTURISTIC LIGHT */

.scp-services-dropdown::after {

    content: "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    border-radius:
        24px;

    background:

        radial-gradient(
            circle at 15% 0%,
            rgba(208, 160, 84, .12),
            transparent 28%
        ),

        radial-gradient(
            circle at 100% 100%,
            rgba(24, 36, 58, .08),
            transparent 35%
        );

}


/* =========================================================
   DROPDOWN HEADER
========================================================= */

.scp-dropdown-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        7px 8px 14px;

    border-bottom:
        1px solid
        rgba(18, 28, 44, .08);

}

.scp-dropdown-label {

    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--scp-copper);

    font-size:
        14px;

    font-weight:
        700;

}

.scp-dropdown-top h3 {

    margin:
        0;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        25px;

    line-height:
        1.1;

    color:
        var(--scp-deep);

}


/* =========================================================
   PAINT COLORS
========================================================= */

.scp-paint-chip {

    display:
        flex;

    align-items:
        center;

}

.scp-paint-chip span {

    width:
        24px;

    height:
        24px;

    margin-left:
        -5px;

    border-radius:
        50%;

    border:
        3px solid
        #fff;

    box-shadow:
        0 4px 10px
        rgba(0, 0, 0, .1);

    animation:
        scpChipFloat
        3s ease-in-out infinite;

}

.scp-paint-chip span:nth-child(1) {

    background:
        var(--scp-navy);

}

.scp-paint-chip span:nth-child(2) {

    background:
        var(--scp-gold);

    animation-delay:
        .2s;

}

.scp-paint-chip span:nth-child(3) {

    background:
        var(--scp-copper);

    animation-delay:
        .4s;

}

@keyframes scpChipFloat {

    50% {

        transform:
            translateY(-3px);

    }

}


/* =========================================================
   SERVICE CARDS
========================================================= */

.scp-services-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        7px;

    padding-top:
        10px;

}

.scp-service-card {

    position:
        relative;

    min-height:
        82px;

    display:
        grid;

    grid-template-columns:
        43px
        1fr
        auto;

    align-items:
        center;

    gap:
        10px;

    padding:
        11px;

    overflow:
        hidden;

    border-radius:
        16px;

    background:
        rgba(245, 245, 240, .74);

    border:
        1px solid
        rgba(20, 30, 44, .06);

    transition:
        transform .35s
        var(--scp-ease),
        background .35s ease,
        box-shadow .35s ease;

}

.scp-service-card:hover {

    transform:
        translateY(-3px);

    background:
        #ffffff;

    box-shadow:
        0 12px 26px
        rgba(10, 18, 30, .09);

}

.scp-service-number {

    position:
        absolute;

    right:
        9px;

    top:
        5px;

    color:
        rgba(17, 28, 45, .09);

    font-weight:
        800;

    font-size:
        17px;

}

.scp-service-icon {

    width:
        43px;

    height:
        43px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        13px;

    background:
        var(--scp-deep);

    color:
        var(--scp-gold-light);

    transition:
        transform .4s
        var(--scp-ease);

}

.scp-service-card:hover
.scp-service-icon {

    transform:
        rotate(-7deg)
        scale(1.05);

}

.scp-service-copy strong {

    display:
        block;

    color:
        var(--scp-deep);

    font-size:
        14px;

    line-height:
        1.25;

}

.scp-service-copy small {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--scp-muted);

    font-size:
        14px;

    line-height:
        1.3;

}

.scp-service-go {

    color:
        var(--scp-gold);

    transition:
        transform .3s ease;

}

.scp-service-card:hover
.scp-service-go {

    transform:
        translateX(3px);

}











/* =========================================================
   DROPDOWN FOOTER
========================================================= */

.scp-dropdown-footer {

    margin-top:
        9px;

    padding:
        11px 10px 1px;

    border-top:
        1px solid
        rgba(20, 30, 44, .07);

    color:
        var(--scp-muted);

}

.scp-dropdown-footer span {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    font-size:
        14px;

}

.scp-dropdown-footer i {

    color:
        var(--scp-gold);

}


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

.scp-header-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        9px;

}

.scp-call-btn {

    width:
        44px;

    height:
        44px;

    flex:
        0 0 44px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        14px;

    color:
        var(--scp-gold-light);

    background:
        linear-gradient(
            145deg,
            var(--scp-deep),
            #1d2a41
        );

    border:
        1px solid
        rgba(208, 160, 84, .2);

    box-shadow:
        0 8px 20px
        rgba(11, 19, 33, .15);

    transition:
        transform .35s
        var(--scp-ease);

}

.scp-call-btn:hover {

    transform:
        translateY(-3px)
        rotate(-6deg);

}

.scp-estimate-btn {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        44px;

    padding:
        0 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    border-radius:
        14px;

    color:
        #ffffff;

    background:
        linear-gradient(
            120deg,
            var(--scp-deep),
            #1c2a42
        );

    border:
        1px solid
        rgba(208, 160, 84, .3);

    font-size:
        14px;

    font-weight:
        700;

    box-shadow:
        0 10px 24px
        rgba(10, 18, 31, .14);

    transition:
        transform .35s
        var(--scp-ease);

}

.scp-estimate-btn::before {

    content: "";

    position:
        absolute;

    top:
        -80%;

    left:
        -60px;

    width:
        38px;

    height:
        250%;

    transform:
        rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .28),
            transparent
        );

    transition:
        left .7s
        var(--scp-ease);

}

.scp-estimate-btn:hover {

    transform:
        translateY(-3px);

}

.scp-estimate-btn:hover::before {

    left:
        120%;

}

.scp-estimate-btn i {

    color:
        var(--scp-gold-light);

}


/* =========================================================
   PAINT / FUTURISTIC STRIP
========================================================= */

.scp-spectrum {

    position:
        absolute;

    left:
        0;

    bottom:
        -7px;

    width:
        100%;

    height:
        8px;

    pointer-events:
        none;

}

.scp-spectrum-line {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            90deg,
            transparent 0%,
            var(--scp-navy) 12%,
            var(--scp-gold) 35%,
            var(--scp-copper) 58%,
            var(--scp-navy) 80%,
            transparent 100%
        );

    clip-path:
        polygon(
            0 25%,
            12% 35%,
            18% 5%,
            29% 45%,
            42% 12%,
            54% 48%,
            66% 10%,
            78% 40%,
            90% 8%,
            100% 30%,
            100% 100%,
            0 100%
        );

}

.scp-spectrum-line::after {

    content: "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.75),
            transparent
        );

    transform:
        translateX(-100%);

    animation:
        scpPaintSweep
        6s linear infinite;

}

@keyframes scpPaintSweep {

    50%,
    100% {

        transform:
            translateX(100%);

    }

}


/* PAINT DROPS */

.scp-spectrum-liquid span {

    position:
        absolute;

    top:
        3px;

    width:
        5px;

    border-radius:
        0 0 10px 10px;

}

.scp-spectrum-liquid span:nth-child(1) {

    left:
        22%;

    height:
        13px;

    background:
        var(--scp-gold);

    animation:
        scpDrop 3.6s ease-in-out infinite;

}

.scp-spectrum-liquid span:nth-child(2) {

    left:
        58%;

    height:
        9px;

    background:
        var(--scp-copper);

    animation:
        scpDrop 4s .8s ease-in-out infinite;

}

.scp-spectrum-liquid span:nth-child(3) {

    left:
        81%;

    height:
        12px;

    background:
        var(--scp-navy);

    animation:
        scpDrop 3.8s 1.5s ease-in-out infinite;

}

@keyframes scpDrop {

    0%,
    100% {

        transform:
            scaleY(.4);

        opacity:
            .5;

    }

    50% {

        transform:
            scaleY(1);

        opacity:
            1;

    }

}


/* =========================================================
   MOBILE TRIGGER
========================================================= */

.scp-mobile-trigger {

    display:
        none;

    width:
        44px;

    height:
        44px;

    border:
        0;

    border-radius:
        14px;

    background:
        var(--scp-deep);

    cursor:
        pointer;

    box-shadow:
        0 8px 20px
        rgba(11, 19, 33, .18);

}

.scp-mobile-trigger span {

    display:
        block;

    width:
        20px;

    height:
        2px;

    margin:
        4px auto;

    border-radius:
        5px;

    background:
        var(--scp-gold-light);

    transition:
        width .3s ease;

}

.scp-mobile-trigger span:nth-child(2) {

    width:
        13px;

}

.scp-mobile-trigger:hover
span:nth-child(2) {

    width:
        20px;

}


/* =========================================================
   OVERLAY
========================================================= */

.scp-overlay,
.scp-sheet-overlay {

    position:
        fixed;

    inset:
        0;

    opacity:
        0;

    visibility:
        hidden;

    background:
        rgba(4, 8, 14, .68);

    backdrop-filter:
        blur(7px);

    transition:
        opacity .3s ease,
        visibility .3s ease;

}

.scp-overlay {

    z-index:
        20000;

}

.scp-sheet-overlay {

    z-index:
        30000;

}

.scp-overlay.open,
.scp-sheet-overlay.open {

    opacity:
        1;

    visibility:
        visible;

}


/* =========================================================
   OFFCANVAS
========================================================= */

.scp-offcanvas {

    position:
        fixed;

    top:
        0;

    right:
        0;

    z-index:
        21000;

    width:
        min(90%, 405px);

    height:
        100dvh;

    overflow-y:
        auto;

    color:
        #ffffff;

    background:

        radial-gradient(
            circle at 75% 10%,
            rgba(208, 160, 84, .14),
            transparent 28%
        ),

        linear-gradient(
            160deg,
            #172238,
            #070d17 75%
        );

    transform:
        translateX(105%);

    transition:
        transform .5s
        var(--scp-ease);

    box-shadow:
        -25px 0 60px
        rgba(0, 0, 0, .28);

}

.scp-offcanvas.open {

    transform:
        translateX(0);

}


/* =========================================================
   OFFCANVAS TOP
========================================================= */

.scp-offcanvas-top {

    min-height:
        125px;

    display:
        flex;

    align-items:
        center;

    padding:
        18px;

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

}

.scp-offcanvas-logo img {

    width:
        95px;

    height:
        95px;

    object-fit:
        contain;

    padding:
        3px;

    border-radius:
        20px;

    background:
        var(--scp-cream);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.22);

}

.scp-close {

    position:
        absolute;

    top:
        18px;

    right:
        18px;

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        50%;

    background:
        rgba(255,255,255,.05);

    color:
        #ffffff;

    cursor:
        pointer;

}


/* =========================================================
   MOBILE INTRO
========================================================= */

.scp-mobile-intro {

    padding:
        20px 20px 13px;

}

.scp-mobile-intro > span {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--scp-gold);

    font-size:
        14px;

    font-weight:
        700;

}

.scp-mobile-intro > strong {

    display:
        block;

    font-family:
        "Playfair Display",
        serif;

    color:
        #ffffff;

    font-size:
        27px;

    line-height:
        1.1;

}

.scp-mobile-intro p {

    margin:
        9px 0 0;

    color:
        rgba(255,255,255,.58);

    font-size:
        14px;

    line-height:
        1.6;

}


/* =========================================================
   MOBILE CONTACT
========================================================= */

.scp-mobile-contact {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        8px;

    padding:
        10px 18px 12px;

}

.scp-mobile-contact > a,
.scp-mobile-contact > div {

    min-height:
        72px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        10px;

    border-radius:
        15px;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid
        rgba(255,255,255,.06);

}

.scp-mobile-contact-icon {

    width:
        35px;

    height:
        35px;

    flex:
        0 0 35px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        11px;

    background:
        rgba(208,160,84,.1);

    color:
        var(--scp-gold);

}

.scp-mobile-contact small {

    display:
        block;

    color:
        rgba(255,255,255,.5);

    font-size:
        14px;

}

.scp-mobile-contact strong {

    display:
        block;

    color:
        #ffffff;

    margin-top:
        2px;

    font-size:
        14px;

}


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

.scp-mobile-nav {

    padding:
        5px 18px;

}

.scp-mobile-nav > a,
.scp-mobile-services > button {

    width:
        100%;

    min-height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 7px;

    border:
        0;

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

    background:
        transparent;

    color:
        rgba(255,255,255,.9);

    font-size:
        17px;

    font-weight:
        600;

    cursor:
        pointer;

}

.scp-mobile-nav > a i,
.scp-mobile-services > button i {

    color:
        var(--scp-gold);

    font-size:
        14px;

}

.scp-mobile-services > button i {

    transition:
        transform .4s
        var(--scp-ease);

}

.scp-mobile-services.open
> button i {

    transform:
        rotate(180deg);

}


/* =========================================================
   MOBILE SERVICES ACCORDION
========================================================= */

.scp-mobile-service-list {

    max-height:
        0;

    overflow:
        hidden;

    opacity:
        0;

    transition:
        max-height .5s
        var(--scp-ease),
        opacity .35s ease,
        padding .35s ease;

}

.scp-mobile-services.open
.scp-mobile-service-list {

    max-height:
        390px;

    opacity:
        1;

    padding:
        8px 0;

}

.scp-mobile-service-list a {

    min-height:
        47px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        7px 13px;

    border-radius:
        11px;

    color:
        rgba(255,255,255,.66);

    font-size:
        14px;

    transition:
        background .3s ease,
        color .3s ease;

}

.scp-mobile-service-list a:hover {

    color:
        #ffffff;

    background:
        rgba(255,255,255,.05);

}

.scp-mobile-service-list a i {

    width:
        24px;

    color:
        var(--scp-gold);

}


/* =========================================================
   MOBILE CTA
========================================================= */

.scp-mobile-cta {

    padding:
        20px 18px 110px;

}

.scp-mobile-cta a {

    min-height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            var(--scp-gold-light),
            var(--scp-gold),
            var(--scp-copper)
        );

    color:
        var(--scp-deep);

    font-size:
        14px;

    font-weight:
        800;

}


/* =========================================================
   APP NAV
========================================================= */

.scp-app-nav {

    display:
        none;

}


/* =========================================================
   SERVICE SHEET
========================================================= */

.scp-service-sheet {

    position:
        fixed;

    left:
        50%;

    bottom:
        0;

    z-index:
        31000;

    width:
        min(100%, 560px);

    padding:
        8px 16px 96px;

    border-radius:
        28px 28px 0 0;

    background:

        radial-gradient(
            circle at 85% 10%,
            rgba(208,160,84,.13),
            transparent 28%
        ),

        linear-gradient(
            160deg,
            #ffffff,
            #efefe9
        );

    box-shadow:
        0 -30px 80px
        rgba(0,0,0,.25);

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

    transition:
        transform .5s
        var(--scp-ease);

}

.scp-service-sheet.open {

    transform:
        translate(-50%, 0);

}

.scp-sheet-handle {

    width:
        46px;

    height:
        5px;

    margin:
        4px auto 16px;

    border-radius:
        20px;

    background:
        rgba(20,30,45,.14);

}

.scp-sheet-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        0 4px 14px;

}

.scp-sheet-head span {

    color:
        var(--scp-copper);

    font-size:
        14px;

    font-weight:
        700;

}

.scp-sheet-head h2 {

    margin:
        3px 0 0;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        26px;

    color:
        var(--scp-deep);

}

.scp-sheet-head button {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border:
        0;

    border-radius:
        50%;

    background:
        var(--scp-deep);

    color:
        #ffffff;

    cursor:
        pointer;

}

.scp-sheet-grid {

    display:
        grid;

    gap:
        7px;

}

.scp-sheet-grid > a {

    min-height:
        67px;

    display:
        grid;

    grid-template-columns:
        46px
        1fr
        auto;

    align-items:
        center;

    gap:
        11px;

    padding:
        9px 12px;

    border-radius:
        16px;

    background:
        rgba(255,255,255,.78);

    border:
        1px solid
        rgba(20,30,45,.07);

}

.scp-sheet-icon {

    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        13px;

    background:
        var(--scp-deep);

    color:
        var(--scp-gold-light);

}

.scp-sheet-grid strong {

    display:
        block;

    color:
        var(--scp-deep);

    font-size:
        14px;

}

.scp-sheet-grid small {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--scp-muted);

    font-size:
        14px;

}

.scp-sheet-grid > a >
i:last-child {

    color:
        var(--scp-gold);

    font-size:
        14px;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1250px) {

    .scp-mainbar-inner {

        grid-template-columns:
            125px
            1fr
            auto;

    }

    .scp-brand-tag {

        display:
            none;

    }

    .scp-nav-link {

        padding:
            0 11px;

    }

    .scp-services-dropdown {

        width:
            470px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    body {

        padding-bottom:
            82px;

    }


    /* TOPBAR */

    .scp-topbar-inner {

        min-height:
            32px;

    }

    .scp-topbar-right {

        display:
            none;

    }

    .scp-topbar-left {

        width:
            100%;

        justify-content:
            center;

    }

    .scp-top-separator {

        display:
            none;

    }


    /* MAINBAR */

    .scp-mainbar-inner {

        min-height:
            67px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

    }

    .scp-desktop-nav,
    .scp-header-actions,
    .scp-brand-tag {

        display:
            none;

    }


    /* LOGO */

    .scp-brand {

        width:
            92px;

        height:
            78px;

        margin-top:
            5px;

    }

    .scp-logo-shell {

        width:
            85px;

        height:
            74px;

        border-radius:
            18px;

    }

    .scp-brand-orbit {

        border-radius:
            21px;

    }

    .scp-brand-orbit::before {

        border-radius:
            19px;

    }


    /* TRIGGER */

    .scp-mobile-trigger {

        display:
            block;

    }


    /* APP NAV */

    .scp-app-nav {

        position:
            fixed;

        left:
            50%;

        bottom:
            8px;

        z-index:
            25000;

        width:
            calc(100% - 16px);

        max-width:
            540px;

        min-height:
            66px;

        display:
            grid;

        grid-template-columns:
            1fr 1fr 1.08fr 1fr 1fr;

        align-items:
            center;

        padding:
            5px;

        transform:
            translateX(-50%);

        border-radius:
            23px;

        background:
            rgba(7, 13, 23, .96);

        border:
            1px solid
            rgba(255,255,255,.08);

        backdrop-filter:
            blur(22px);

        box-shadow:
            0 18px 45px
            rgba(0,0,0,.3);

    }

    .scp-app-item {

        min-height:
            54px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            3px;

        border:
            0;

        border-radius:
            16px;

        background:
            transparent;

        color:
            rgba(255,255,255,.58);

        font-size:
            14px;

        cursor:
            pointer;

    }

    .scp-app-item span {

        font-size:
            14px;

        line-height:
            1;

    }

    .scp-app-item i {

        font-size:
            15px;

    }

    .scp-app-item.active,
    .scp-app-item:hover {

        color:
            var(--scp-gold-light);

        background:
            rgba(255,255,255,.05);

    }


    /* CENTER CALL */

    .scp-app-call {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

    }

    .scp-app-call span {

        width:
            60px;

        height:
            60px;

        margin-top:
            -27px;

        display:
            grid;

        place-items:
            center;

        border-radius:
            50%;

        background:
            linear-gradient(
                145deg,
                var(--scp-gold-light),
                var(--scp-gold),
                var(--scp-copper)
            );

        color:
            var(--scp-deep);

        border:
            5px solid
            var(--scp-deep);

        box-shadow:
            0 10px 28px
            rgba(208,160,84,.32);

        animation:
            scpPhoneFloat
            3s ease-in-out infinite;

    }

    @keyframes scpPhoneFloat {

        50% {

            transform:
                translateY(-4px);

        }

    }

    .scp-app-call i {

        font-size:
            18px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

    .scp-container {

        width:
            calc(100% - 22px);

    }

    .scp-location {

        display:
            none;

    }

    .scp-mobile-contact {

        grid-template-columns:
            1fr;

    }

    .scp-app-item span {

        font-size:
            14px;

    }

}


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

.scp-nav-link:focus-visible,
.scp-estimate-btn:focus-visible,
.scp-call-btn:focus-visible,
.scp-mobile-trigger:focus-visible,
.scp-close:focus-visible,
.scp-app-item:focus-visible {

    outline:
        3px solid
        var(--scp-gold);

    outline-offset:
        3px;

}


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

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

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}

/* =========================================================
   SANTA CRUZ PAINTING
   ABOUT US
========================================================= */

:root {

    --sca-navy: #18243a;
    --sca-dark: #0b1321;
    --sca-deep: #060b13;

    --sca-gold: #d0a054;
    --sca-gold-light: #f1cf8a;

    --sca-copper: #b57a52;

    --sca-cream: #f2f2ec;
    --sca-light: #f8f8f5;
    --sca-white: #ffffff;

    --sca-text: #182133;
    --sca-muted: #68717f;

    --sca-ease:
        cubic-bezier(.22, 1, .36, 1);

}


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

.sca-about {

    position: relative;

    padding:
        125px 0 115px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 8% 20%,
            rgba(208, 160, 84, .09),
            transparent 25%
        ),

        radial-gradient(
            circle at 92% 75%,
            rgba(24, 36, 58, .055),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #ffffff,
            #f5f5f0 55%,
            #eeeeE8
        );

    isolation: isolate;

}


.sca-container {

    position: relative;

    z-index: 3;

    width:
        min(92%, 1420px);

    margin:
        0 auto;

}


/* =========================================================
   BACKGROUND
========================================================= */

.sca-background {

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

}


.sca-bg-circle {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(181, 122, 82, .12);

}


.sca-bg-circle-1 {

    width: 520px;
    height: 520px;

    left: -300px;
    bottom: -260px;

}


.sca-bg-circle-1::before {

    content: "";

    position: absolute;

    inset: 80px;

    border-radius: inherit;

    border:
        1px solid
        rgba(208, 160, 84, .13);

}


.sca-bg-circle-2 {

    width: 390px;
    height: 390px;

    right: -210px;
    top: -170px;

}


.sca-bg-line {

    position: absolute;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(208, 160, 84, .30),
            transparent
        );

}


.sca-bg-line-1 {

    width: 400px;

    right: 3%;
    top: 25%;

    transform:
        rotate(-24deg);

}


.sca-bg-line-2 {

    width: 330px;

    left: 2%;
    bottom: 27%;

    transform:
        rotate(21deg);

}


/* =========================================================
   TOP GRID
========================================================= */

.sca-top {

    display: grid;

    grid-template-columns:
        minmax(460px, .95fr)
        minmax(500px, 1fr);

    align-items: center;

    gap:
        clamp(60px, 7vw, 115px);

}


/* =========================================================
   VISUAL
========================================================= */

.sca-visual {

    position: relative;

    min-height: 590px;

    perspective: 1200px;

}


/* =========================================================
   MAIN IMAGE STAGE
========================================================= */

.sca-image-stage {

    position: absolute;

    top: 15px;
    left: 0;

    width: 79%;
    height: 520px;

    z-index: 3;

    filter:
        drop-shadow(
            0 28px 38px
            rgba(9, 16, 27, .16)
        );

    transition:
        transform .25s ease-out;

}


.sca-image-frame {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #07101d00;
        clip-path:
        polygon(
            4% 0,
            96% 0,
            100% 6%,
            98% 94%,
            92% 100%,
            5% 98%,
            0 91%,
            2% 7%
        );
        }


.sca-image-frame::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background:

        linear-gradient(
            180deg,
            transparent 55%,
            rgba(6, 11, 19, .30)
        ),

        linear-gradient(
            90deg,
            rgba(11, 19, 33, .12),
            transparent 35%
        );

    pointer-events: none;

}


.sca-image-frame img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.035);

    transition:
        transform 1.2s
        var(--sca-ease);

}


.sca-visual:hover
.sca-main-image img {

    transform:
        scale(1.085);

}


/* =========================================================
   PAINT BORDER
========================================================= */

.sca-paint-edge {

    position: absolute;

    z-index: 5;

    left: -7px;
    bottom: 37px;

    width: 10px;
    height: 74%;

}


.sca-paint-edge::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius:
        10px 5px 7px 4px;

    background:
        linear-gradient(
            to bottom,
            var(--sca-gold-light),
            var(--sca-gold),
            var(--sca-copper)
        );

}


.sca-paint-edge span {

    position: absolute;

    left: 3px;

    width: 6px;

    border-radius:
        0 0 10px 10px;

}


.sca-paint-edge span:nth-child(1) {

    bottom: -14px;

    height: 23px;

    background:
        var(--sca-gold);

    animation:
        scaPaintDrop 3.8s
        ease-in-out infinite;

}


.sca-paint-edge span:nth-child(2) {

    left: -3px;
    bottom: 40%;

    height: 16px;

    background:
        var(--sca-copper);

    animation:
        scaPaintDrop 4.4s .7s
        ease-in-out infinite;

}


.sca-paint-edge span:nth-child(3) {

    left: 7px;
    top: -10px;

    height: 18px;

    background:
        var(--sca-gold-light);

    animation:
        scaPaintDrop 4s 1.1s
        ease-in-out infinite;

}


@keyframes scaPaintDrop {

    0%,
    100% {

        transform:
            scaleY(.45);

    }

    50% {

        transform:
            scaleY(1);

    }

}


/* =========================================================
   SCANNER
========================================================= */

.sca-image-scanner {

    position: absolute;

    z-index: 7;

    top: 5%;
    bottom: 5%;

    left: 10%;

    width: 2px;

    opacity: 0;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--sca-gold-light),
            #ffffff,
            var(--sca-copper),
            transparent
        );

    box-shadow:
        0 0 20px
        rgba(241, 207, 138, .85);

}


.sca-visual.sca-visible
.sca-image-scanner {

    animation:
        scaScan 5.5s
        1.4s ease-in-out infinite;

}


@keyframes scaScan {

    0% {

        left: 7%;
        opacity: 0;

    }

    12% {

        opacity: .75;

    }

    55% {

        left: 92%;
        opacity: .55;

    }

    70%,
    100% {

        left: 92%;
        opacity: 0;

    }

}


/* =========================================================
   SECOND IMAGE
========================================================= */

.sca-secondary-image {

    position: absolute;

    z-index: 8;

    right: 0;
    bottom: 12px;

    width: 42%;
    height: 245px;

    overflow: hidden;

    border-radius:
        27px;

    background:
        var(--sca-dark);

    border:
        5px solid
        var(--sca-light);

    box-shadow:
        0 24px 50px
        rgba(7, 14, 25, .20);

    transition:
        transform .25s ease-out;

}


.sca-secondary-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s
        var(--sca-ease);

}


.sca-secondary-image:hover img {

    transform:
        scale(1.08);

}


.sca-secondary-tag {

    position: absolute;

    left: 11px;
    bottom: 11px;

    min-height: 37px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        0 12px;

    border-radius: 100px;

    color:
        #ffffff;

    background:
        rgba(7, 14, 25, .72);

    backdrop-filter:
        blur(12px);

    border:
        1px solid
        rgba(255,255,255,.12);

    font-size: 14px;

    font-weight: 700;

}


.sca-secondary-tag i {

    color:
        var(--sca-gold-light);

}


/* =========================================================
   EXPERIENCE
========================================================= */

.sca-experience-card {

    position: absolute;

    z-index: 12;

    top: 50px;
    right: -5px;

    min-width: 155px;

    padding:
        14px 16px;

    border-radius: 20px;

    background:
        rgba(255,255,255,.92);

    backdrop-filter:
        blur(17px);

    border:
        1px solid
        rgba(20, 30, 45, .08);

    box-shadow:
        0 18px 45px
        rgba(8, 15, 26, .13);

}


.sca-exp-number {

    display: flex;

    align-items: flex-start;

    color:
        var(--sca-dark);

    font-family:
        "Playfair Display",
        serif;

    line-height: 1;

}


.sca-exp-number span {

    font-size: 46px;

    font-weight: 700;

}


.sca-exp-number sup {

    margin:
        5px 0 0 2px;

    color:
        var(--sca-gold);

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 20px;

    font-weight: 800;

}


.sca-exp-copy {

    margin-top: 5px;

}


.sca-exp-copy strong,
.sca-exp-copy span {

    display: block;

    font-size: 14px;

}


.sca-exp-copy strong {

    color:
        var(--sca-text);

}


.sca-exp-copy span {

    color:
        var(--sca-muted);

}


/* =========================================================
   COLOR CARD
========================================================= */

.sca-color-card {

    position: absolute;

    z-index: 13;

    left: 32px;
    bottom: 18px;

    min-width: 245px;

    display: grid;

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

    align-items: center;

    gap: 10px;

    padding:
        10px 12px;

    border-radius: 17px;

    color: #ffffff;

    background:
        rgba(8, 15, 26, .85);

    backdrop-filter:
        blur(18px);

    border:
        1px solid
        rgba(255,255,255,.12);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.18);

}


.sca-color-icon {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color:
        var(--sca-dark);

    background:
        linear-gradient(
            145deg,
            var(--sca-gold-light),
            var(--sca-gold),
            var(--sca-copper)
        );

}


.sca-color-copy small,
.sca-color-copy strong {display: block;font-size: 10px;}


.sca-color-copy small {

    color:
        rgba(255,255,255,.52);

}


.sca-color-copy strong {

    margin-top: 1px;

}


.sca-swatches {

    display: flex;

}


.sca-swatches span {

    width: 20px;
    height: 20px;

    margin-left: -6px;

    border-radius: 50%;

    border:
        2px solid var(--sca-dark);

}


.sca-swatches span:nth-child(1) {

    background:
        var(--sca-navy);

}


.sca-swatches span:nth-child(2) {

    background:
        var(--sca-gold);

}


.sca-swatches span:nth-child(3) {

    background:
        var(--sca-copper);

}


/* =========================================================
   VISUAL NUMBER
========================================================= */

.sca-visual-number {

    position: absolute;

    z-index: 1;

    top: -40px;
    left: -14px;

    color:
        rgba(11, 19, 33, .035);

    font-family:
        "Playfair Display",
        serif;

    font-size: 180px;

    font-weight: 700;

    line-height: 1;

}


/* =========================================================
   CONTENT
========================================================= */

.sca-content {

    position: relative;

}


/* =========================================================
   EYEBROW
========================================================= */

.sca-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 19px;

    color:
        var(--sca-copper);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .055em;

    text-transform: uppercase;

}


.sca-eyebrow-icon {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color:
        var(--sca-gold-light);

    background:
        var(--sca-dark);

}


/* =========================================================
   TITLE
========================================================= */

.sca-title {

    max-width: 650px;

    margin:
        0 0 25px;

    color:
        var(--sca-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(43px, 4.3vw, 66px);

    font-weight: 700;

    line-height: 1.02;

    letter-spacing: -.035em;

}


.sca-title span {

    position: relative;

    display: block;

    margin-top: 4px;

    color:
        var(--sca-copper);

}


.sca-title span::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 78%;
    height: 7px;

    opacity: .7;

    background:
        linear-gradient(
            90deg,
            var(--sca-gold),
            var(--sca-copper),
            transparent
        );

    clip-path:
        polygon(
            0 38%,
            17% 10%,
            35% 44%,
            54% 15%,
            75% 43%,
            100% 20%,
            97% 75%,
            74% 60%,
            56% 88%,
            34% 62%,
            16% 84%,
            0 65%
        );

}


/* =========================================================
   DESCRIPTION
========================================================= */

.sca-description {

    max-width:
        660px;

}


.sca-description p {

    margin:
        0 0 15px;

    color:
        var(--sca-muted);

    font-size:
        16px;

    line-height:
        1.75;

}


.sca-description strong {

    color:
        var(--sca-dark);

}


/* =========================================================
   STATEMENT
========================================================= */

.sca-statement {

    position: relative;

    display: grid;

    grid-template-columns:
        46px 1fr;

    align-items: center;

    gap: 13px;

    margin:
        27px 0 26px;

    padding:
        15px 17px;

    overflow: hidden;

    border-radius:
        18px;

    background:
        linear-gradient(
            115deg,
            rgba(11, 19, 33, .96),
            rgba(24, 36, 58, .94)
        );

    color: #ffffff;

    box-shadow:
        0 16px 37px
        rgba(8, 15, 26, .13);

}


.sca-statement::after {

    content: "";

    position: absolute;

    top: -60px;
    right: -20px;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    border:
        1px solid
        rgba(208,160,84,.17);

}


.sca-statement-mark {

    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    border-radius:
        13px;

    background:
        rgba(208,160,84,.11);

    color:
        var(--sca-gold-light);

}


.sca-statement span {


    color:
        var(--sca-gold);

    font-size: 14px;

}


.sca-statement strong {

    display: block;

    max-width: 500px;

    margin-top: 3px;

    font-size: 15px;

    line-height: 1.45;

}


/* =========================================================
   STATS
========================================================= */

.sca-stats {

    display: grid;

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

    gap: 8px;

    margin-bottom: 28px;

}


.sca-stat {

    min-height: 70px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        10px;

    border-radius: 15px;

    background:
        rgba(255,255,255,.68);

    border:
        1px solid
        rgba(15, 25, 40, .07);

    transition:
        transform .35s var(--sca-ease),
        box-shadow .35s ease,
        background .35s ease;

}


.sca-stat:hover {

    transform:
        translateY(-4px);

    background:
        #ffffff;

    box-shadow:
        0 12px 25px
        rgba(8,15,25,.07);

}


.sca-stat-icon {

    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        rgba(208,160,84,.12);

    color:
        var(--sca-copper);

}


.sca-stat strong,
.sca-stat span {


    font-size: 14px;

}


.sca-stat strong {

    color:
        var(--sca-dark);

}


.sca-stat div > span {

    margin-top: 2px;

    color:
        var(--sca-muted);

}


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

.sca-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

}


.sca-primary-btn {

    position: relative;

    min-height: 55px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    overflow: hidden;

    padding:
        0 23px;

    border-radius: 16px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--sca-dark),
            var(--sca-navy)
        );

    border:
        1px solid
        rgba(208,160,84,.25);

    box-shadow:
        0 14px 30px
        rgba(8,15,26,.15);

    font-size: 14px;

    font-weight: 800;

    transition:
        transform .4s var(--sca-ease),
        box-shadow .4s ease;

}


.sca-primary-btn::before {

    content: "";

    position: absolute;

    top: -70%;
    left: -70px;

    width: 40px;
    height: 240%;

    transform:
        rotate(24deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.27),
            transparent
        );

    transition:
        left .7s var(--sca-ease);

}


.sca-primary-btn:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 40px
        rgba(8,15,26,.21);

}


.sca-primary-btn:hover::before {

    left: 120%;

}


.sca-primary-btn i {

    color:
        var(--sca-gold-light);

}


.sca-call-link {

    min-height: 55px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        5px 9px 5px 5px;

    border-radius: 16px;

    background:
        rgba(255,255,255,.55);

    border:
        1px solid
        rgba(15,25,40,.08);

    transition:
        transform .35s var(--sca-ease),
        background .35s ease;

}


.sca-call-link:hover {

    transform:
        translateY(-3px);

    background:
        #ffffff;

}


.sca-call-icon {

    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background:
        rgba(208,160,84,.13);

    color:
        var(--sca-copper);

}


.sca-call-link small,
.sca-call-link strong {

    display: block;

    font-size: 14px;

}


.sca-call-link small {

    color:
        var(--sca-muted);

}


.sca-call-link strong {

    margin-top: 1px;

    color:
        var(--sca-dark);

}


/* =========================================================
   VALUES
========================================================= */

.sca-values {

    position: relative;

    display: grid;

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

    gap: 13px;

    margin-top: 90px;

}


/* =========================================================
   VALUE CARD
========================================================= */

.sca-value-card {

    position: relative;

    min-height: 260px;

    overflow: hidden;

    padding:
        27px 25px 25px;

    border-radius: 24px;

    background:
        rgba(255,255,255,.67);

    border:
        1px solid
        rgba(15,25,40,.075);

    backdrop-filter:
        blur(15px);

    transition:
        transform .45s var(--sca-ease),
        box-shadow .45s ease,
        background .45s ease;

}


.sca-value-card:hover {

    transform:
        translateY(-8px);

    background:
        #ffffff;

    box-shadow:
        0 24px 50px
        rgba(7,14,25,.10);

}


.sca-value-number {

    position: absolute;

    top: 8px;
    right: 16px;

    color:
        rgba(11,19,33,.055);

    font-family:
        "Playfair Display",
        serif;

    font-size: 70px;

    font-weight: 700;

    line-height: 1;

}


.sca-value-icon {

    position: relative;

    z-index: 2;

    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    margin-bottom: 24px;

    border-radius: 15px;

    color:
        var(--sca-gold-light);

    background:
        linear-gradient(
            145deg,
            var(--sca-dark),
            #1c2b44
        );

    box-shadow:
        0 12px 25px
        rgba(8,15,26,.14);

    transition:
        transform .4s var(--sca-ease);

}


.sca-value-card:hover
.sca-value-icon {

    transform:
        rotate(-7deg)
        scale(1.06);

}


.sca-value-content > span {

    display: block;

    margin-bottom: 3px;

    color:
        var(--sca-copper);

    font-size: 14px;

    font-weight: 700;

}


.sca-value-content h3 {

    margin:
        0 0 10px;

    color:
        var(--sca-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 27px;

}


.sca-value-content p {

    margin: 0;

    color:
        var(--sca-muted);

    font-size: 14px;

    line-height: 1.65;

}


.sca-value-line {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--sca-gold),
            var(--sca-copper),
            var(--sca-navy)
        );

    transform:
        scaleX(.18);

    transform-origin:
        left;

    transition:
        transform .55s var(--sca-ease);

}


.sca-value-card:hover
.sca-value-line {

    transform:
        scaleX(1);

}


/* =========================================================
   BOTTOM PAINT
========================================================= */

.sca-bottom-stroke {

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 100%;

    height: 28px;

    pointer-events: none;

}


.sca-bottom-stroke svg {

    display: block;

    width: 100%;
    height: 100%;

}


.sca-bottom-stroke path {

    fill:
        var(--sca-dark);

}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.sca-reveal {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .9s ease,
        transform .9s var(--sca-ease);

}


.sca-reveal.sca-visible {

    opacity: 1;

    transform:
        translateY(0);

}


.sca-value-card:nth-child(2) {

    transition-delay:
        .12s;

}


.sca-value-card:nth-child(3) {

    transition-delay:
        .24s;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1180px) {

    .sca-top {

        grid-template-columns:
            minmax(400px, .9fr)
            1fr;

        gap: 55px;

    }


    .sca-brand-tag {

        display: none;

    }


    .sca-experience-card {

        right: -15px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .sca-about {

        padding:
            95px 0 90px;

    }


    .sca-top {

        grid-template-columns:
            1fr;

        gap: 65px;

    }


    .sca-visual {

        width: min(100%, 720px);

        min-height: 590px;

        margin: 0 auto;

    }


    .sca-content {

        width: min(100%, 760px);

        margin: 0 auto;

    }


    .sca-title {

        max-width: 700px;

    }


    .sca-values {

        grid-template-columns:
            1fr 1fr;

        margin-top: 70px;

    }


    .sca-value-card:last-child {

        grid-column:
            1 / -1;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .sca-about {

        padding:
            75px 0 75px;

    }


    .sca-container {

        width:
            calc(100% - 30px);

    }


    /* VISUAL */

    .sca-visual {

        min-height:
            490px;

    }


    .sca-image-stage {

        width:
            88%;

        height:
            400px;

    }


    .sca-secondary-image {

        width:
            47%;

        height:
            185px;

        right: 0;

        bottom: 5px;

        border-width:
            4px;

        border-radius:
            20px;

    }


    .sca-experience-card {

        top:
            30px;

        right:
            -3px;

        min-width:
            125px;

        padding:
            11px 12px;

        border-radius:
            16px;

    }


    .sca-exp-number span {

        font-size:
            36px;

    }


    .sca-color-card {

        left:
            10px;

        bottom:
            13px;

        min-width:
            0;

        width:
            60%;

        grid-template-columns:
            37px 1fr;

    }


    .sca-color-icon {

        width:
            37px;

        height:
            37px;

    }


    .sca-swatches {

        display:
            none;

    }


    .sca-visual-number {

        font-size:
            125px;

    }


    /* CONTENT */

    .sca-title {

        font-size:
            clamp(38px, 11vw, 51px);

    }


    .sca-description p {

        font-size:
            14px;

        line-height:
            1.7;

    }


    .sca-statement {

        grid-template-columns:
            42px 1fr;

        padding:
            13px;

    }


    .sca-statement-mark {

        width:
            42px;

        height:
            42px;

    }


    /* STATS */

    .sca-stats {

        grid-template-columns:
            1fr;

    }


    .sca-stat {

        min-height:
            64px;

    }


    /* ACTIONS */

    .sca-actions {

        display:
            grid;

        grid-template-columns:
            1fr;

    }


    .sca-primary-btn,
    .sca-call-link {

        width: 100%;

    }


    /* VALUES */

    .sca-values {

        grid-template-columns:
            1fr;

        margin-top:
            60px;

    }


    .sca-value-card,
    .sca-value-card:last-child {

        grid-column:
            auto;

        min-height:
            auto;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .sca-visual {

        min-height:
            445px;

    }


    .sca-image-stage {

        width:
            91%;

        height:
            355px;

    }


    .sca-secondary-image {

        width:
            49%;

        height:
            165px;

    }


    .sca-experience-card {

        top:
            18px;

    }


    .sca-color-card {width: 50%;}

}


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

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

    .sca-about *,
    .sca-about *::before,
    .sca-about *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}




/* =========================================================
   SANTA CRUZ PAINTING
   3D PAINT STUDIO SERVICES
   FULL CSS
========================================================= */

:root {

    --scs-dark: #070d17;
    --scs-dark-2: #0d1726;
    --scs-navy: #18243a;

    --scs-gold: #d0a054;
    --scs-gold-light: #f1cf8a;

    --scs-copper: #b57a52;

    --scs-white: #ffffff;
    --scs-cream: #f2f2ec;

    --scs-ease:
        cubic-bezier(.2, .85, .25, 1);

}


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

.scs-services {

    position: relative;

    width: 100%;
    max-width: 100%;

    overflow: hidden;
    overflow-x: clip;

    padding:
        110px 0 90px;

    color:
        #ffffff;

    background:
        var(--scs-dark);

    isolation: isolate;

}


.scs-services *,
.scs-services *::before,
.scs-services *::after {

    box-sizing:
        border-box;

}


.scs-services a {

    color: inherit;

    text-decoration: none;

}


.scs-services button {

    font-family: inherit;

}


/* =========================================================
   MINIMUM FONT SIZE
========================================================= */

.scs-services p,
.scs-services a,
.scs-services button,
.scs-services span,
.scs-services small {

    font-size:
        max(14px, 1em);

}


/* =========================================================
   CONTAINER
========================================================= */

.scs-container {

    position: relative;

    z-index: 5;

    width:
        min(92%, 1450px);

    max-width: 100%;

    min-width: 0;

    margin:
        0 auto;

}


/* =========================================================
   DYNAMIC BACKGROUND
========================================================= */

.scs-dynamic-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

}


/* =========================================================
   DYNAMIC BACKGROUND IMAGE
========================================================= */

.scs-bg-image {

    position: absolute;

    inset: -50px;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    filter:
        blur(35px)
        saturate(.75);

    opacity: .17;

    transform:
        scale(1.08);

    transition:
        background-image .25s ease,
        opacity .25s ease;

    will-change:
        opacity;

}


/* =========================================================
   BACKGROUND OVERLAY
========================================================= */

.scs-bg-overlay {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 50% 45%,
            rgba(208,160,84,.11),
            transparent 30%
        ),

        radial-gradient(
            circle at 12% 24%,
            rgba(181,122,82,.08),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            rgba(7,13,23,.84),
            rgba(8,16,28,.94) 48%,
            rgba(5,10,18,.97)
        );

}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.scs-bg-grid {

    position: absolute;

    inset: 0;

    opacity: .055;

    background-image:

        linear-gradient(
            rgba(255,255,255,.13) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.13) 1px,
            transparent 1px
        );

    background-size:
        65px 65px;

    mask-image:
        radial-gradient(
            ellipse at center,
            #000,
            transparent 75%
        );

}


/* =========================================================
   ORBITS
========================================================= */

.scs-orbit {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(208,160,84,.09);

}


.scs-orbit-a {

    width: 700px;
    height: 700px;

    left: 50%;
    top: 51%;

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

}


.scs-orbit-a::before {

    content: "";

    position: absolute;

    inset: 90px;

    border-radius: inherit;

    border:
        1px dashed
        rgba(208,160,84,.08);

    animation:
        scsOrbitRotate
        20s linear infinite;

}


.scs-orbit-a::after {

    content: "";

    position: absolute;

    inset: 180px;

    border-radius: inherit;

    border:
        1px solid
        rgba(181,122,82,.07);

}


@keyframes scsOrbitRotate {

    to {

        transform:
            rotate(360deg);

    }

}


.scs-orbit-b {

    width: 350px;
    height: 350px;

    right: -180px;
    top: 40px;

}


/* =========================================================
   PAINT BLOBS
========================================================= */

.scs-paint-blob {

    position: absolute;

    border-radius:
        49% 51% 38% 62% /
        46% 35% 65% 54%;

}


.scs-paint-blob-a {

    width: 450px;
    height: 450px;

    left: -280px;
    top: 20%;

    background:

        radial-gradient(
            circle,
            rgba(208,160,84,.15),
            rgba(181,122,82,.03) 60%,
            transparent 72%
        );

    animation:
        scsBlobA
        9s ease-in-out infinite;

}


.scs-paint-blob-b {

    width: 380px;
    height: 380px;

    right: -230px;
    bottom: 4%;

    background:

        radial-gradient(
            circle,
            rgba(181,122,82,.12),
            transparent 72%
        );

    animation:
        scsBlobB
        10s ease-in-out infinite;

}


@keyframes scsBlobA {

    50% {

        transform:
            translate(40px, 30px)
            rotate(16deg)
            scale(1.1);

    }

}


@keyframes scsBlobB {

    50% {

        transform:
            translate(-35px, -20px)
            rotate(-17deg)
            scale(.94);

    }

}


/* =========================================================
   HEADING
========================================================= */

.scs-heading-row {

    display: grid;

    grid-template-columns:
        1.15fr
        .85fr;

    align-items: end;

    gap:
        70px;

    margin-bottom:
        55px;

}


.scs-heading-copy,
.scs-heading-description {

    min-width: 0;

}


/* =========================================================
   EYEBROW
========================================================= */

.scs-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom:
        14px;

    color:
        var(--scs-gold-light);

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing:
        .08em;

}


.scs-eyebrow-icon {

    width: 35px;
    height: 35px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color:
        var(--scs-dark);

    background:

        linear-gradient(
            145deg,
            var(--scs-gold-light),
            var(--scs-gold)
        );

    box-shadow:
        0 10px 24px
        rgba(208,160,84,.15);

}


/* =========================================================
   SECTION TITLE
========================================================= */

.scs-heading-copy h2 {

    max-width: 770px;

    margin: 0;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(43px, 4.3vw, 68px);

    line-height:
        1;

    letter-spacing:
        -.04em;

}


.scs-heading-copy h2 span {

    display: block;

    color:
        var(--scs-gold-light);

}


/* =========================================================
   DESCRIPTION
========================================================= */

.scs-heading-description {

    max-width: 500px;

    justify-self: end;

}


.scs-heading-description p {

    margin:
        0 0 17px;

    color:
        rgba(255,255,255,.62);

    font-size: 15px;

    line-height:
        1.7;

}


/* =========================================================
   HEADING LINE
========================================================= */

.scs-heading-line {

    display: flex;

    align-items: center;

    gap: 12px;

    color:
        rgba(255,255,255,.43);

}


.scs-heading-line > span {

    flex: 1;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            var(--scs-gold),
            transparent
        );

}


.scs-heading-line strong {

    font-size: 14px;

    white-space: nowrap;

}


/* =========================================================
   CAROUSEL SHELL
========================================================= */

.scs-carousel-shell {

    position: relative;

    width: 100%;

    max-width: 100%;

    min-height: 520px;

    perspective:
        1500px;

}


/* =========================================================
   STAGE
========================================================= */

.scs-stage {

    position: relative;

    width: 100%;

    height: 500px;

    max-width: 100%;

    margin:
        0 auto;

    overflow: visible;

    transform-style:
        preserve-3d;

    touch-action:
        pan-y;

    user-select: none;

}


/* =========================================================
   CARDS
========================================================= */

.scs-card {

    position: absolute;

    top: 0;
    left: 50%;

    width:
        min(610px, 46vw);

    height: 480px;

    max-width:
        calc(100vw - 40px);

    min-width: 0;

    overflow: hidden;

    border-radius:
        30px;

    border:
        1px solid
        rgba(255,255,255,.14);

    background:
        #101927;

    box-shadow:
        0 35px 80px
        rgba(0,0,0,.28);

    transform-style:
        preserve-3d;

    transform:

        translateX(
            calc(
                -50% +
                var(--scs-x, 0px)
            )
        )

        translateZ(
            var(--scs-z, 0px)
        )

        rotateY(
            var(--scs-rotate, 0deg)
        )

        scale(
            var(--scs-scale, 1)
        );

    opacity:
        var(--scs-opacity, 1);

    z-index:
        var(--scs-layer, 5);

    pointer-events:
        var(--scs-pointer, auto);

    transition:
        transform .42s
        var(--scs-ease),

        opacity .26s ease,

        filter .32s ease;

    will-change:
        transform,
        opacity;

}


/* =========================================================
   ACTIVE CARD
========================================================= */

.scs-card.is-active {

    border-color:
        rgba(241,207,138,.34);

    box-shadow:

        0 45px 100px
        rgba(0,0,0,.37),

        0 0 0 1px
        rgba(208,160,84,.08),

        0 0 60px
        rgba(208,160,84,.07);

}


/* =========================================================
   IMAGE
========================================================= */

.scs-card-image {

    position: absolute;

    inset: 0;

}


.scs-card-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transform:
        scale(1.02);

    transition:
        transform .55s
        var(--scs-ease);

    will-change:
        transform;

}


.scs-card.is-active:hover
.scs-card-image img {

    transform:
        scale(1.055);

}


/* =========================================================
   CARD OVERLAY
========================================================= */

.scs-card-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            180deg,
            rgba(5,10,18,.10) 0%,
            rgba(5,10,18,.18) 30%,
            rgba(5,10,18,.75) 70%,
            rgba(5,10,18,.98) 100%
        ),

        linear-gradient(
            90deg,
            rgba(7,13,23,.25),
            transparent 70%
        );

}


/* =========================================================
   CARD GRID
========================================================= */

.scs-card-grid {

    position: absolute;

    inset: 0;

    z-index: 2;

    opacity: .08;

    background-image:

        linear-gradient(
            rgba(255,255,255,.16) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.16) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

    mask-image:

        linear-gradient(
            to bottom,
            #000,
            transparent 60%
        );

}


/* =========================================================
   CARD NUMBER
========================================================= */

.scs-card-number {

    position: absolute;

    z-index: 6;

    top: 20px;

    right: 22px;

    color:
        rgba(255,255,255,.22);

    font-family:
        "Playfair Display",
        serif;

    font-size: 48px;

    line-height: 1;

}


/* =========================================================
   CARD ICON
========================================================= */

.scs-card-icon {

    position: absolute;

    z-index: 7;

    top: 23px;

    left: 23px;

    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    color:
        var(--scs-dark);

    background:

        linear-gradient(
            145deg,
            var(--scs-gold-light),
            var(--scs-gold),
            var(--scs-copper)
        );

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.18);

    transition:
        transform .28s
        var(--scs-ease);

}


.scs-card.is-active:hover
.scs-card-icon {

    transform:
        rotate(-7deg)
        scale(1.06);

}


/* =========================================================
   CARD CONTENT
========================================================= */

.scs-card-content {

    position: absolute;

    z-index: 8;

    left: 27px;

    right: 27px;

    bottom: 25px;

    min-width: 0;

}


/* =========================================================
   CATEGORY
========================================================= */

.scs-card-category {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom:
        8px;

    color:
        var(--scs-gold-light);

    font-size: 14px;

    font-weight: 700;

}


.scs-card-category span {

    width: 28px;

    height: 2px;

    background:
        var(--scs-gold);

}


/* =========================================================
   CARD TITLE
========================================================= */

.scs-card-content h3 {

    margin:
        0 0 9px;

    color:
        #ffffff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(29px, 2.6vw, 39px);

    line-height:
        1;

    letter-spacing:
        -.025em;

}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.scs-card-content p {

    max-width:
        510px;

    margin:
        0 0 15px;

    color:
        rgba(255,255,255,.68);

    font-size: 14px;

    line-height:
        1.55;

}


/* =========================================================
   FEATURES
========================================================= */

.scs-card-features {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-bottom:
        17px;

}


.scs-card-features span {

    padding:
        6px 10px;

    border-radius:
        100px;

    color:
        rgba(255,255,255,.76);

    background:
        rgba(255,255,255,.07);

    border:
        1px solid
        rgba(255,255,255,.08);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

    font-size: 14px;

}


/* =========================================================
   CARD LINK
========================================================= */

.scs-card-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    min-height: 45px;

    padding:
        0 16px;

    border-radius:
        13px;

    color:
        var(--scs-dark);

    background:

        linear-gradient(
            135deg,
            var(--scs-gold-light),
            var(--scs-gold)
        );

    font-size: 14px;

    font-weight: 800;

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.15);

    transition:
        transform .22s
        var(--scs-ease);

}


.scs-card-link:hover {

    transform:
        translateY(-3px);

}


.scs-card-link i {

    transition:
        transform .2s ease;

}


.scs-card-link:hover i {

    transform:
        translateX(4px);

}


/* =========================================================
   PAINT CORNER
========================================================= */

.scs-card-paint {

    position: absolute;

    z-index: 7;

    right: 0;

    top: 120px;

    width: 7px;

    height: 115px;

    background:

        linear-gradient(
            to bottom,
            transparent,
            var(--scs-gold-light),
            var(--scs-gold),
            var(--scs-copper),
            transparent
        );

}


.scs-card-paint span {

    position: absolute;

    right: 0;

    width: 5px;

    border-radius:
        0 0 8px 8px;

}


.scs-card-paint span:nth-child(1) {

    top: 25px;

    height: 15px;

    background:
        var(--scs-gold);

}


.scs-card-paint span:nth-child(2) {

    top: 62px;

    height: 23px;

    background:
        var(--scs-copper);

}


.scs-card-paint span:nth-child(3) {

    top: 92px;

    height: 11px;

    background:
        var(--scs-gold-light);

}


/* =========================================================
   SIDE LABELS
========================================================= */

.scs-side-label {

    position: absolute;

    z-index: 20;

    top: 50%;

    display: flex;

    align-items: center;

    gap: 9px;

    color:
        rgba(255,255,255,.22);

    font-size: 14px;

    text-transform: uppercase;

    letter-spacing:
        .14em;

    writing-mode:
        vertical-rl;

}


.scs-side-label i {

    width: 1px;

    height: 38px;

    background:

        linear-gradient(
            transparent,
            var(--scs-gold),
            transparent
        );

}


.scs-side-label-left {

    left: -15px;

    transform:
        translateY(-50%)
        rotate(180deg);

}


.scs-side-label-right {

    right: -15px;

    transform:
        translateY(-50%);

}


/* =========================================================
   CONTROLS
========================================================= */

.scs-controls {

    position: relative;

    z-index: 20;

    display: grid;

    grid-template-columns:
        100px
        1fr
        auto;

    align-items: center;

    gap: 25px;

    margin-top:
        25px;

}


/* =========================================================
   COUNTER
========================================================= */

.scs-counter {

    display: flex;

    align-items: center;

    gap: 7px;

}


.scs-counter strong {

    color:
        var(--scs-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size: 23px;

}


.scs-counter > span {

    width: 30px;

    height: 1px;

    background:
        rgba(255,255,255,.25);

}


.scs-counter small {

    color:
        rgba(255,255,255,.38);

    font-size: 14px;

}


/* =========================================================
   SELECTOR
========================================================= */

.scs-selector {

    display: flex;

    justify-content: center;

    gap: 5px;

    min-width: 0;

}


.scs-selector-btn {

    min-height: 43px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        0 13px;

    border:
        1px solid transparent;

    border-radius:
        100px;

    color:
        rgba(255,255,255,.48);

    background:
        transparent;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease;

}


.scs-selector-btn span {

    color:
        rgba(208,160,84,.50);

    font-size: 14px;

}


.scs-selector-btn.active {

    color:
        #ffffff;

    background:
        rgba(255,255,255,.06);

    border-color:
        rgba(255,255,255,.08);

}


.scs-selector-btn.active span {

    color:
        var(--scs-gold-light);

}


/* =========================================================
   ARROWS
========================================================= */

.scs-arrows {

    display: flex;

    gap: 7px;

}


.scs-arrows button {

    width: 45px;

    height: 45px;

    display: grid;

    place-items: center;

    padding: 0;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        13px;

    color:
        #ffffff;

    background:
        rgba(255,255,255,.04);

    cursor: pointer;

    transition:
        transform .22s
        var(--scs-ease),

        color .18s ease,

        background .18s ease;

}


.scs-arrows button:hover {

    transform:
        translateY(-3px);

    color:
        var(--scs-dark);

    background:
        var(--scs-gold-light);

}


/* =========================================================
   PROGRESS
========================================================= */

.scs-progress {

    position: relative;

    height: 2px;

    margin-top:
        21px;

    overflow: hidden;

    background:
        rgba(255,255,255,.07);

}


.scs-progress span {

    display: block;

    width: 25%;

    height: 100%;

    background:

        linear-gradient(
            90deg,
            var(--scs-gold-light),
            var(--scs-gold),
            var(--scs-copper)
        );

    transition:
        transform .35s
        var(--scs-ease);

}


/* =========================================================
   RESPONSIVE 1100
========================================================= */

@media (max-width: 1100px) {

    .scs-heading-row {

        gap:
            40px;

    }


    .scs-card {

        width:
            min(560px, 58vw);

    }


    .scs-side-label {

        display: none;

    }

}


/* =========================================================
   RESPONSIVE 850
========================================================= */

@media (max-width: 850px) {

    .scs-services {

        padding:
            85px 0 75px;

    }


    .scs-heading-row {

        grid-template-columns:
            1fr;

        gap:
            20px;

        margin-bottom:
            40px;

    }


    .scs-heading-description {

        max-width:
            680px;

        justify-self:
            start;

    }


    .scs-card {

        width:
            min(520px, 67vw);

    }


    .scs-controls {

        grid-template-columns:
            auto
            1fr
            auto;

    }


    .scs-selector-btn {

        padding:
            0 9px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .scs-services {

        padding:
            70px 0 70px;

    }


    .scs-container {

        width:
            calc(100% - 28px);

        max-width:
            calc(100% - 28px);

    }


    /* =====================================================
       HEADING
    ====================================================== */

    .scs-heading-copy h2 {

        font-size:
            clamp(38px, 11vw, 49px);

    }


    .scs-heading-description p {

        font-size:
            14px;

        line-height:
            1.6;

    }


    /* =====================================================
       STAGE
    ====================================================== */

    .scs-carousel-shell {

        min-height:
            500px;

    }


    .scs-stage {

        height:
            470px;

    }


    /* =====================================================
       MOBILE CARD
    ====================================================== */

    .scs-card {

        width:
            calc(100vw - 58px);

        max-width:
            calc(100vw - 58px);

        height:
            450px;

        border-radius:
            24px;

        transition:
            transform .34s
            cubic-bezier(.2,.85,.25,1),

            opacity .22s ease;

    }


    .scs-card-image img {

        transition:
            transform .38s
            var(--scs-ease);

    }


    .scs-card-number {

        top:
            18px;

        right:
            18px;

        font-size:
            39px;

    }


    .scs-card-icon {

        top:
            17px;

        left:
            17px;

        width:
            45px;

        height:
            45px;

    }


    .scs-card-content {

        left:
            19px;

        right:
            19px;

        bottom:
            20px;

    }


    .scs-card-content h3 {

        font-size:
            31px;

    }


    .scs-card-content p {

        font-size:
            14px;

        line-height:
            1.5;

    }


    .scs-card-features {

        margin-bottom:
            14px;

    }


    /* =====================================================
       CONTROLS
    ====================================================== */

    .scs-controls {

        display: grid;

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

        gap:
            12px;

        margin-top:
            17px;

    }


    .scs-counter {

        display: none;

    }


    .scs-selector {

        justify-content:
            flex-start;

        overflow-x:
            auto;

        max-width:
            100%;

        min-width:
            0;

        padding-bottom:
            4px;

        scrollbar-width:
            none;

    }


    .scs-selector::-webkit-scrollbar {

        display: none;

    }


    .scs-selector-btn {

        flex:
            0 0 auto;

        min-height:
            40px;

        padding:
            0 11px;

    }


    .scs-arrows {

        flex:
            0 0 auto;

    }


    .scs-arrows button {

        width:
            42px;

        height:
            42px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .scs-card {

        width:
            calc(100vw - 42px);

        max-width:
            calc(100vw - 42px);

    }


    .scs-heading-copy h2 {

        font-size:
            37px;

    }


    .scs-card-content h3 {

        font-size:
            28px;

    }


    .scs-card-features span:nth-child(3) {

        display: none;

    }

}


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

.scs-services a:focus-visible,
.scs-services button:focus-visible {

    outline:
        3px solid
        var(--scs-gold-light);

    outline-offset:
        3px;

}


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

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

    .scs-services *,
    .scs-services *::before,
    .scs-services *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}


/* =========================================================
   SANTA CRUZ PAINTING
   WHY CHOOSE US
========================================================= */

:root {

    --scwhy-dark: #07101d;
    --scwhy-navy: #18243a;

    --scwhy-gold: #d0a054;
    --scwhy-gold-light: #f0ce87;
    --scwhy-copper: #b57a52;

    --scwhy-white: #ffffff;

    --scwhy-text: #182133;
    --scwhy-muted: #747c88;

    --scwhy-ease:
        cubic-bezier(.22,1,.36,1);

}


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

.scwhy-section {

    position: relative;

    width: 100%;
    max-width: 100%;

    overflow: hidden;

    padding:
        115px 0;

    background:

        radial-gradient(
            circle at 10% 10%,
            rgba(208,160,84,.13),
            transparent 28%
        ),

        radial-gradient(
            circle at 90% 90%,
            rgba(181,122,82,.11),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #08111e 0%,
            #0b1524 45%,
            #101d30 100%
        );

    isolation: isolate;

}


.scwhy-section *,
.scwhy-section *::before,
.scwhy-section *::after {

    box-sizing: border-box;

}


/* =========================================================
   BACKGROUND
========================================================= */

.scwhy-background {

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

}


.scwhy-grid {

    position: absolute;

    inset: 0;

    opacity: .18;

    background-image:

        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

}


.scwhy-orb {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(208,160,84,.14);

}


.scwhy-orb-one {

    width: 480px;
    height: 480px;

    top: -300px;
    right: -170px;

}


.scwhy-orb-two {

    width: 370px;
    height: 370px;

    left: -230px;
    bottom: -190px;

}


.scwhy-paint-line {

    position: absolute;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(208,160,84,.40),
            transparent
        );

}


.scwhy-line-one {

    width: 44%;

    right: 0;
    top: 35%;

    transform:
        rotate(-8deg);

}


.scwhy-line-two {

    width: 35%;

    left: 0;
    bottom: 24%;

    transform:
        rotate(7deg);

}


/* =========================================================
   CONTAINER
========================================================= */

.scwhy-container {

    position: relative;

    z-index: 5;

    width:
        min(94%,1450px);

    margin:
        0 auto;

}


/* =========================================================
   HEADING
========================================================= */

.scwhy-heading {

    display: grid;

    grid-template-columns:
        minmax(0,1.2fr)
        minmax(0,.8fr);

    align-items: end;

    gap: 70px;

    margin-bottom:
        48px;

}


.scwhy-heading-left,
.scwhy-heading-copy {

    min-width: 0;

}


.scwhy-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom:
        13px;

    color:
        var(--scwhy-gold-light);

    font-size: 14px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing:
        .07em;

}


.scwhy-eyebrow > span {

    width: 36px;
    height: 36px;

    flex:
        0 0 36px;

    display: grid;

    place-items: center;

    border-radius:
        11px;

    color:
        var(--scwhy-dark);

    background:

        linear-gradient(
            145deg,
            var(--scwhy-gold-light),
            var(--scwhy-gold)
        );

}


.scwhy-heading h2 {

    max-width:
        820px;

    margin: 0;

    color:
        #ffffff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(45px,4.7vw,72px);

    line-height:
        .98;

    letter-spacing:
        -.045em;

}


.scwhy-heading h2 span {

    display: block;

    color:
        var(--scwhy-gold-light);

}


.scwhy-heading-copy {

    max-width:
        500px;

    justify-self:
        end;

}


.scwhy-heading-copy p {

    margin: 0;

    color:
        rgba(255,255,255,.58);

    font-size: 15px;

    line-height:
        1.75;

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.scwhy-layout {

    display: grid;

    grid-template-columns:
        minmax(420px,.83fr)
        minmax(0,1.17fr);

    gap: 18px;

}


/* =========================================================
   FEATURE PANEL
========================================================= */

.scwhy-feature {

    position: relative;

    min-height:
        650px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding:
        24px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        29px;

    background:

        radial-gradient(
            circle at 50% 48%,
            rgba(208,160,84,.12),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.08),

        0 35px 70px
        rgba(0,0,0,.18);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    transform-style:
        preserve-3d;

}


.scwhy-feature-glow {

    position: absolute;

    width: 320px;
    height: 320px;

    left: 50%;
    top: 48%;

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

    border-radius: 50%;

    background:
        rgba(208,160,84,.11);

    filter:
        blur(70px);

    pointer-events: none;

}


/* =========================================================
   FEATURE TOP
========================================================= */

.scwhy-feature-top {

    position: relative;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.scwhy-status {

    display: flex;

    align-items: center;

    gap: 9px;

    color:
        rgba(255,255,255,.68);

    font-size: 14px;

    font-weight: 700;

}


.scwhy-status-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--scwhy-gold);

    box-shadow:
        0 0 0 6px
        rgba(208,160,84,.10);

}


.scwhy-feature-number {

    color:
        rgba(255,255,255,.18);

    font-family:
        "Playfair Display",
        serif;

    font-size: 23px;

}


/* =========================================================
   VISUAL
========================================================= */

.scwhy-visual {

    position: relative;

    z-index: 4;

    width: 100%;

    height: 390px;

    display: grid;

    place-items: center;

}


/* =========================================================
   RINGS
========================================================= */

.scwhy-rings {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 330px;
    height: 330px;

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

}


.scwhy-ring {

    position: absolute;

    border-radius: 50%;

}


.scwhy-ring-one {

    inset: 0;

    border:
        1px solid
        rgba(208,160,84,.27);

    animation:
        scwhyRotate
        18s linear infinite;

}


.scwhy-ring-one::before,
.scwhy-ring-one::after {

    content: "";

    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        var(--scwhy-gold);

    box-shadow:
        0 0 18px
        rgba(208,160,84,.70);

}


.scwhy-ring-one::before {

    left: 24px;
    top: 57px;

}


.scwhy-ring-one::after {

    right: 24px;
    bottom: 57px;

}


.scwhy-ring-two {

    inset: 35px;

    border:
        1px dashed
        rgba(255,255,255,.14);

    animation:
        scwhyRotateReverse
        14s linear infinite;

}


.scwhy-ring-three {

    inset: 72px;

    border:
        1px solid
        rgba(208,160,84,.16);

}


@keyframes scwhyRotate {

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes scwhyRotateReverse {

    to {

        transform:
            rotate(-360deg);

    }

}


/* =========================================================
   CORE
========================================================= */

.scwhy-core {

    position: relative;

    z-index: 5;

    width: 185px;
    height: 185px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius: 50%;

    text-align: center;

    background:

        radial-gradient(
            circle at 40% 25%,
            rgba(255,255,255,.11),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            #17243a,
            #0c1625
        );

    box-shadow:

        0 25px 55px
        rgba(0,0,0,.30),

        inset 0 1px 0
        rgba(255,255,255,.08);

}


.scwhy-core-icon {

    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    margin-bottom:
        9px;

    border-radius:
        13px;

    color:
        var(--scwhy-dark);

    background:

        linear-gradient(
            145deg,
            var(--scwhy-gold-light),
            var(--scwhy-gold)
        );

}


.scwhy-core strong {

    color:
        #fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        24px;

    line-height:
        1;

}


.scwhy-core em {

    display: block;

    color:
        var(--scwhy-gold-light);

    font-style: normal;

}


.scwhy-core small {

    max-width:
        130px;

    margin-top:
        8px;

    color:
        rgba(255,255,255,.42);

    font-size: 14px;

    line-height:
        1.35;

}


/* =========================================================
   FLOATING POINTS
========================================================= */

.scwhy-point {

    position: absolute;

    z-index: 8;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        7px 10px 7px 7px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        13px;

    color:
        #fff;

    background:
        rgba(7,16,29,.78);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    box-shadow:
        0 13px 30px
        rgba(0,0,0,.18);

}


.scwhy-point > span {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius:
        10px;

    color:
        var(--scwhy-gold-light);

    background:
        rgba(208,160,84,.10);

}


.scwhy-point small,
.scwhy-point strong {

    display: block;

    font-size: 14px;

}


.scwhy-point small {

    color:
        rgba(255,255,255,.42);

}


.scwhy-point-one {

    top: 37px;
    left: 12px;

}


.scwhy-point-two {

    top: 138px;
    right: 1px;

}


.scwhy-point-three {

    left: 23px;
    bottom: 25px;

}


/* =========================================================
   FEATURE BOTTOM
========================================================= */

.scwhy-feature-bottom {

    position: relative;

    z-index: 10;

    display: grid;

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

    align-items: center;

    gap: 18px;

    padding-top:
        20px;

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

}


.scwhy-experience {

    display: flex;

    align-items: center;

    gap: 10px;

}


.scwhy-experience > strong {

    color:
        var(--scwhy-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        47px;

    line-height: 1;

}


.scwhy-experience span {

    color:
        rgba(255,255,255,.62);

    font-size: 14px;

    line-height:
        1.35;

}


.scwhy-experience b {

    color:
        var(--scwhy-gold);

}


.scwhy-mini-separator {

    width: 1px;
    height: 38px;

    background:
        rgba(255,255,255,.10);

}


.scwhy-small-feature {

    display: flex;

    align-items: center;

    gap: 10px;

}


.scwhy-small-feature > i {

    color:
        var(--scwhy-gold);

    font-size: 21px;

}


.scwhy-small-feature span,
.scwhy-small-feature strong {

    display: block;

    font-size: 14px;

}


.scwhy-small-feature span {

    color:
        rgba(255,255,255,.46);

}


.scwhy-small-feature strong {

    color:
        #fff;

}


/* =========================================================
   REASONS
========================================================= */

.scwhy-reasons {

    display: grid;

    gap: 8px;

}


.scwhy-reason {

    position: relative;

    min-width: 0;

    display: grid;

    grid-template-columns:
        45px 56px minmax(0,1fr) 40px;

    align-items: center;

    gap: 15px;

    min-height:
        122px;

    padding:
        16px 18px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius:
        20px;

    background:
        rgba(255,255,255,.035);

    cursor: default;

    transition:

        transform .32s
        var(--scwhy-ease),

        background .32s ease,

        border-color .32s ease,

        box-shadow .32s ease;

}


.scwhy-reason::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    background:

        linear-gradient(
            var(--scwhy-gold-light),
            var(--scwhy-copper)
        );

    transform:
        scaleY(0);

    transform-origin:
        center;

    transition:
        transform .3s
        var(--scwhy-ease);

}


.scwhy-reason:hover,
.scwhy-reason.active {

    transform:
        translateX(-7px);

    border-color:
        rgba(208,160,84,.23);

    background:
        rgba(255,255,255,.065);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.13);

}


.scwhy-reason:hover::before,
.scwhy-reason.active::before {

    transform:
        scaleY(1);

}


.scwhy-reason-index {

    color:
        rgba(255,255,255,.20);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        19px;

}


.scwhy-reason-icon {

    width: 54px;
    height: 54px;

    display: grid;

    place-items: center;

    border-radius:
        15px;

    color:
        var(--scwhy-gold);

    background:
        rgba(208,160,84,.09);

    border:
        1px solid
        rgba(208,160,84,.11);

    transition:
        color .3s ease,
        background .3s ease;

}


.scwhy-reason.active
.scwhy-reason-icon,
.scwhy-reason:hover
.scwhy-reason-icon {

    color:
        var(--scwhy-dark);

    background:

        linear-gradient(
            145deg,
            var(--scwhy-gold-light),
            var(--scwhy-gold)
        );

}


.scwhy-reason-copy {

    min-width: 0;

}


.scwhy-reason-copy small {

    display: block;

    margin-bottom:
        2px;

    color:
        var(--scwhy-gold);

    font-size: 14px;

}


.scwhy-reason-copy h3 {

    margin:
        0 0 5px;

    color:
        #fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        21px;

}


.scwhy-reason-copy p {

    max-width:
        580px;

    margin: 0;

    color:
        rgba(255,255,255,.48);

    font-size: 14px;

    line-height:
        1.55;

}


.scwhy-reason-arrow {

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius:
        50%;

    color:
        rgba(255,255,255,.25);

    border:
        1px solid
        rgba(255,255,255,.07);

    transition:
        color .25s ease,
        transform .25s ease,
        border-color .25s ease;

}


.scwhy-reason:hover
.scwhy-reason-arrow,
.scwhy-reason.active
.scwhy-reason-arrow {

    color:
        var(--scwhy-gold-light);

    border-color:
        rgba(208,160,84,.20);

    transform:
        translateX(3px);

}


/* =========================================================
   TRUST BAR
========================================================= */

.scwhy-trustbar {

    display: grid;

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

    align-items: center;

    gap: 18px;

    margin-top:
        18px;

    padding:
        18px 22px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius:
        19px;

    background:
        rgba(255,255,255,.03);

}


.scwhy-trust-item {

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

}


.scwhy-trust-item > span {

    width: 40px;
    height: 40px;

    flex:
        0 0 40px;

    display: grid;

    place-items: center;

    border-radius:
        12px;

    color:
        var(--scwhy-gold);

    background:
        rgba(208,160,84,.08);

}


.scwhy-trust-item small,
.scwhy-trust-item strong {

    display: block;

    font-size: 14px;

}


.scwhy-trust-item small {

    color:
        rgba(255,255,255,.38);

}


.scwhy-trust-item strong {

    color:
        #fff;

}


.scwhy-trust-line {

    width: 1px;
    height: 36px;

    background:
        rgba(255,255,255,.08);

}


/* =========================================================
   REVEAL
========================================================= */

.scwhy-reveal {

    opacity: 0;

    transform:
        translateY(24px);

    transition:

        opacity .7s ease,

        transform .7s
        var(--scwhy-ease);

}


.scwhy-reveal.is-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .scwhy-layout {

        grid-template-columns:
            1fr;

    }


    .scwhy-feature {

        min-height:
            600px;

    }


    .scwhy-trustbar {

        grid-template-columns:
            1fr 1fr;

        gap: 12px;

    }


    .scwhy-trust-line {

        display: none;

    }


    .scwhy-trust-item {

        justify-content:
            flex-start;

        padding: 7px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .scwhy-section {

        padding:
            75px 0;

    }


    .scwhy-container {

        width:
            calc(100% - 24px);

    }


    .scwhy-heading {

        grid-template-columns:
            1fr;

        gap: 17px;

        margin-bottom:
            30px;

    }


    .scwhy-heading-copy {

        max-width:
            100%;

        justify-self:
            start;

    }


    .scwhy-heading h2 {

        font-size:
            clamp(39px,11vw,50px);

    }


    .scwhy-feature {

        min-height:
            520px;

        padding:
            16px;

        border-radius:
            22px;

    }


    .scwhy-visual {

        height:
            330px;

    }


    .scwhy-rings {

        width:
            275px;

        height:
            275px;

    }


    .scwhy-core {

        width:
            155px;

        height:
            155px;

    }


    .scwhy-point {

        transform:
            scale(.90);

    }


    .scwhy-point-one {

        left: -5px;

    }


    .scwhy-point-two {

        right: -11px;

    }


    .scwhy-point-three {

        left: 0;

    }


    .scwhy-feature-bottom {

        gap: 10px;

    }


    .scwhy-experience > strong {

        font-size:
            39px;

    }


    /* REASONS */

    .scwhy-reason {

        grid-template-columns:
            44px minmax(0,1fr) 36px;

        gap: 11px;

        padding:
            15px;

        min-height: 0;

    }


    .scwhy-reason-index {

        display: none;

    }


    .scwhy-reason-icon {

        width: 44px;
        height: 44px;

    }


    .scwhy-reason-copy h3 {

        font-size:
            19px;

    }


    .scwhy-reason:hover,
    .scwhy-reason.active {

        transform:
            none;

    }


    .scwhy-trustbar {

        grid-template-columns:
            1fr 1fr;

        padding:
            12px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .scwhy-feature {

        min-height:
            490px;

    }


    .scwhy-feature-number {

        display: none;

    }


    .scwhy-rings {

        width:
            235px;

        height:
            235px;

    }


    .scwhy-core {

        width:
            145px;

        height:
            145px;

    }


    .scwhy-point {

        padding:
            6px;

    }


    .scwhy-point > div {

        display: none;

    }


    .scwhy-point > span {

        width: 36px;
        height: 36px;

    }


    .scwhy-point-one {

        left: 17px;

    }


    .scwhy-point-two {

        right: 15px;

    }


    .scwhy-point-three {

        left: 27px;

    }


    .scwhy-feature-bottom {

        grid-template-columns:
            1fr;

    }


    .scwhy-mini-separator {

        display: none;

    }


    .scwhy-small-feature {

        padding-top:
            9px;

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

    }


    .scwhy-trustbar {

        grid-template-columns:
            1fr;

    }

}


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

.scwhy-section button:focus-visible,
.scwhy-section a:focus-visible {

    outline:
        3px solid
        var(--scwhy-gold);

    outline-offset:
        3px;

}


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

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

    .scwhy-section *,
    .scwhy-section *::before,
    .scwhy-section *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}

/* =========================================================
   SANTA CRUZ PAINTING
   RESPONSIVE PROJECT SHOWCASE
========================================================= */

:root {

    --scpjt-dark: #07101d;
    --scpjt-navy: #18243a;

    --scpjt-gold: #d0a054;
    --scpjt-gold-light: #f0ce87;
    --scpjt-copper: #b57a52;

    --scpjt-white: #ffffff;
    --scpjt-cream: #f5f3ed;

    --scpjt-text: #172034;
    --scpjt-muted: #737b86;

    --scpjt-ease:
        cubic-bezier(.22,1,.36,1);

}


/* =========================================================
   CRITICAL ANTI-OVERFLOW
========================================================= */

html,
body {

    width: 100%;
    max-width: 100%;

    overflow-x: clip;

}


.scpjt-section,
.scpjt-container,
.scpjt-heading,
.scpjt-showcase,
.scpjt-stage,
.scpjt-stage-image-wrap,
.scpjt-control-panel,
.scpjt-filmstrip-wrap,
.scpjt-filmstrip {

    min-width: 0;

    max-width: 100%;

}


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

.scpjt-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        110px 0;

    background:

        radial-gradient(
            circle at 7% 17%,
            rgba(208,160,84,.13),
            transparent 28%
        ),

        radial-gradient(
            circle at 92% 83%,
            rgba(24,36,58,.08),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #faf9f5,
            #efeee8
        );

    isolation: isolate;

}


.scpjt-section *,
.scpjt-section *::before,
.scpjt-section *::after {

    box-sizing: border-box;

    min-width: 0;

}


.scpjt-section button {

    font-family: inherit;

}


.scpjt-section a {

    text-decoration: none;

}


/* =========================================================
   BACKGROUND
========================================================= */

.scpjt-background {

    position: absolute;

    inset: 0;

    overflow: hidden;

    z-index: 0;

    pointer-events: none;

}


.scpjt-grid {

    position: absolute;

    inset: 0;

    opacity: .30;

    background-image:

        linear-gradient(
            rgba(24,36,58,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(24,36,58,.035) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

}


.scpjt-orb {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(181,122,82,.11);

}


.scpjt-orb-one {

    width: 500px;
    height: 500px;

    top: -290px;
    right: -230px;

}


.scpjt-orb-two {

    width: 380px;
    height: 380px;

    bottom: -210px;
    left: -220px;

}


.scpjt-background-image {

    position: absolute;

    width: min(520px,70vw);
    height: min(520px,70vw);

    right: 5%;
    top: 34%;

    border-radius: 50%;

    background-image:
        url("https://santacruzpaintingllc.com/assets/img/gallery/snrpaintingdesignandpavers%20%281%29.jpeg");

    background-size: cover;

    background-position: center;

    filter:
        blur(100px);

    opacity: .07;

    transform:
        scale(1.05);

    transition:
        background-image .45s ease;

}


/* =========================================================
   CONTAINER
========================================================= */

.scpjt-container {

    position: relative;

    z-index: 5;

    width:
        min(calc(100% - 40px),1480px);

    margin:
        0 auto;

}


/* =========================================================
   HEADING
========================================================= */

.scpjt-heading {

    display: grid;

    grid-template-columns:
        minmax(0,1.18fr)
        minmax(0,.82fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 45px;

}


.scpjt-heading-left,
.scpjt-heading-right {

    min-width: 0;

}


.scpjt-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 13px;

    color:
        var(--scpjt-copper);

    font-size: 14px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .07em;

}


.scpjt-eyebrow > span {

    width: 36px;
    height: 36px;

    flex:
        0 0 36px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color:
        var(--scpjt-dark);

    background:

        linear-gradient(
            145deg,
            var(--scpjt-gold-light),
            var(--scpjt-gold)
        );

}


.scpjt-heading h2 {

    max-width: 820px;

    margin: 0;

    overflow-wrap: anywhere;

    color:
        var(--scpjt-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(44px,4.7vw,72px);

    line-height: .98;

    letter-spacing: -.045em;

}


.scpjt-heading h2 span {

    display: block;

    color:
        var(--scpjt-copper);

}


.scpjt-heading-right {

    max-width: 500px;

    justify-self: end;

}


.scpjt-heading-right p {

    margin:
        0 0 18px;

    color:
        var(--scpjt-muted);

    font-size: 15px;

    line-height: 1.7;

}


.scpjt-view-all {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    max-width: 100%;

    color:
        var(--scpjt-dark);

    font-size: 14px;

    font-weight: 800;

}


.scpjt-view-all > span {

    width: 38px;
    height: 38px;

    flex:
        0 0 38px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #fff;

    background:
        var(--scpjt-navy);

    transition:
        transform .25s
        var(--scpjt-ease);

}


.scpjt-view-all:hover > span {

    transform:
        translateX(4px);

}


/* =========================================================
   SHOWCASE
========================================================= */

.scpjt-showcase {

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(220px,245px);

    gap: 14px;

    overflow: hidden;

}


/* =========================================================
   MAIN STAGE
========================================================= */

.scpjt-stage {

    width: 100%;

    overflow: hidden;

}


.scpjt-stage-image-wrap {

    position: relative;

    width: 100%;

    height:
        clamp(540px,58vw,690px);

    max-height: 690px;

    overflow: hidden;

    border-radius: 29px;

    background:
        #d9d7d0;

    box-shadow:
        0 35px 75px
        rgba(15,25,39,.15);

}


.scpjt-stage-image {

    position: absolute;

    inset: 0;

    display: block;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    object-fit: cover;

    object-position: center;

    transition:

        opacity .26s ease,
        transform .65s
        var(--scpjt-ease);

}


.scpjt-stage-image.is-changing {

    opacity: .18;

    transform:
        scale(1.025);

}


/* =========================================================
   OVERLAY
========================================================= */

.scpjt-stage-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(7,16,29,.23) 0%,
            transparent 32%,
            transparent 48%,
            rgba(7,16,29,.84) 100%
        );

    pointer-events: none;

}


.scpjt-stage-light {

    position: absolute;

    left: -30%;
    top: -50%;

    width: 28%;
    height: 200%;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.16),
            transparent
        );

    transform:
        rotate(18deg);

    opacity: .5;

    animation:
        scpjtLight 8s
        ease-in-out infinite;

    pointer-events: none;

}


@keyframes scpjtLight {

    0%,
    70% {

        left: -35%;

    }

    100% {

        left: 120%;

    }

}


/* =========================================================
   TOP
========================================================= */

.scpjt-stage-top {

    position: absolute;

    z-index: 5;

    left: 18px;
    right: 18px;
    top: 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}


.scpjt-project-type {

    min-width: 0;
    max-width:
        calc(100% - 60px);

    min-height: 38px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(255,255,255,.25);

    border-radius: 100px;

    color: #fff;

    background:
        rgba(7,16,29,.43);

    backdrop-filter:
        blur(11px);

    font-size: 14px;

    font-weight: 700;

}


.scpjt-project-type > span {

    width: 7px;
    height: 7px;

    flex:
        0 0 7px;

    border-radius: 50%;

    background:
        var(--scpjt-gold-light);

    box-shadow:
        0 0 0 5px
        rgba(208,160,84,.12);

}


.scpjt-expand {

    width: 43px;
    height: 43px;

    flex:
        0 0 43px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.22);

    border-radius: 13px;

    color: #fff;

    background:
        rgba(7,16,29,.43);

    backdrop-filter:
        blur(12px);

    font-size: 15px;

    cursor: pointer;

}


/* =========================================================
   NUMBER
========================================================= */

.scpjt-project-number {

    position: absolute;

    z-index: 5;

    right: 22px;
    top: 88px;

    display: flex;

    align-items: baseline;

    color: #fff;

    pointer-events: none;

}


.scpjt-project-number > span {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(62px,7vw,105px);

    line-height: .8;

    letter-spacing: -.06em;

    opacity: .22;

}


.scpjt-project-number small {

    margin-left: 6px;

    color:
        rgba(255,255,255,.52);

    font-size: 14px;

}


/* =========================================================
   BOTTOM CONTENT
========================================================= */

.scpjt-stage-bottom {

    position: absolute;

    z-index: 5;

    left: 22px;
    right: 22px;
    bottom: 22px;

    display: grid;

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

    align-items: end;

    gap: 35px;

}


.scpjt-project-copy {

    min-width: 0;

    max-width: 670px;

}


.scpjt-project-copy small {

    display: block;

    margin-bottom: 4px;

    color:
        var(--scpjt-gold-light);

    font-size: 14px;

    font-weight: 700;

}


.scpjt-project-copy h3 {

    max-width: 100%;

    margin:
        0 0 7px;

    overflow-wrap: anywhere;

    color: #fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(29px,3vw,45px);

    line-height: 1;

}


.scpjt-project-copy p {

    max-width: 610px;

    margin: 0;

    overflow-wrap: anywhere;

    color:
        rgba(255,255,255,.66);

    font-size: 14px;

    line-height: 1.55;

}


/* =========================================================
   META
========================================================= */

.scpjt-project-meta {

    min-width: 0;

    display: grid;

    gap: 6px;

}


.scpjt-project-meta span {

    min-height: 36px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        0 10px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius: 10px;

    color:
        rgba(255,255,255,.68);

    background:
        rgba(7,16,29,.38);

    font-size: 14px;

    white-space: nowrap;

    backdrop-filter:
        blur(10px);

}


.scpjt-project-meta i {

    color:
        var(--scpjt-gold-light);

}


/* =========================================================
   CONTROL PANEL
========================================================= */

.scpjt-control-panel {

    width: 100%;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    padding: 19px;

    border:
        1px solid
        rgba(7,16,29,.08);

    border-radius: 27px;

    background:
        rgba(255,255,255,.74);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 24px 55px
        rgba(15,25,39,.08);

}


.scpjt-control-heading small,
.scpjt-control-heading strong {

    display: block;

}


.scpjt-control-heading small {

    color:
        var(--scpjt-copper);

    font-size: 14px;

}


.scpjt-control-heading strong {

    margin-top: 2px;

    color:
        var(--scpjt-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 20px;

}


/* =========================================================
   INDEX
========================================================= */

.scpjt-index-block {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 27px;

}


.scpjt-index-block > span {

    flex:
        0 0 auto;

    color:
        var(--scpjt-copper);

    font-family:
        "Playfair Display",
        serif;

    font-size: 58px;

    line-height: 1;

}


.scpjt-index-block small,
.scpjt-index-block strong {

    display: block;

    font-size: 14px;

}


.scpjt-index-block small {

    color:
        var(--scpjt-muted);

}


.scpjt-index-block strong {

    color:
        var(--scpjt-dark);

}


/* =========================================================
   DIVIDER
========================================================= */

.scpjt-divider {

    height: 1px;

    margin:
        23px 0;

    background:

        linear-gradient(
            90deg,
            rgba(7,16,29,.10),
            transparent
        );

}


/* =========================================================
   STANDARD
========================================================= */

.scpjt-project-standard {

    display: grid;

    gap: 15px;

}


.scpjt-project-standard > div {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 9px;

}


.scpjt-project-standard > div > span {

    width: 35px;
    height: 35px;

    flex:
        0 0 35px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color:
        var(--scpjt-copper);

    background:
        rgba(208,160,84,.10);

}


.scpjt-project-standard small,
.scpjt-project-standard strong {

    display: block;

    font-size: 14px;

}


.scpjt-project-standard small {

    color:
        var(--scpjt-muted);

}


.scpjt-project-standard strong {

    color:
        var(--scpjt-dark);

}


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

.scpjt-navigation {

    width: 100%;

    display: grid;

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

    gap: 7px;

    margin-top: auto;

    padding-top: 30px;

}


.scpjt-navigation button {

    min-width: 0;

    height: 52px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(7,16,29,.08);

    border-radius: 14px;

    color:
        var(--scpjt-dark);

    background: #fff;

    font-size: 15px;

    cursor: pointer;

    transition:

        transform .22s
        var(--scpjt-ease),

        background .22s ease,

        color .22s ease;

}


.scpjt-navigation button:hover {

    transform:
        translateY(-3px);

    color: #fff;

    background:
        var(--scpjt-navy);

}


/* =========================================================
   PROGRESS
========================================================= */

.scpjt-progress {

    width: 100%;

    margin-top: 15px;

}


.scpjt-progress-label {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}


.scpjt-progress-label span,
.scpjt-progress-label strong {

    font-size: 14px;

}


.scpjt-progress-label span {

    color:
        var(--scpjt-muted);

}


.scpjt-progress-label strong {

    flex:
        0 0 auto;

    color:
        var(--scpjt-dark);

}


.scpjt-progress-track {

    position: relative;

    width: 100%;
    height: 4px;

    overflow: hidden;

    margin-top: 9px;

    border-radius: 100px;

    background:
        rgba(7,16,29,.08);

}


.scpjt-progress-track > span {

    position: absolute;

    left: 0;
    top: 0;

    width: 12.5%;
    max-width: 100%;

    height: 100%;

    border-radius: inherit;

    background:

        linear-gradient(
            90deg,
            var(--scpjt-gold),
            var(--scpjt-copper)
        );

    transition:
        width .38s
        var(--scpjt-ease);

}


/* =========================================================
   FILMSTRIP WRAPPER
========================================================= */

.scpjt-filmstrip-wrap {

    position: relative;

    width: 100%;

    overflow: hidden;

    margin-top: 14px;

}


/* =========================================================
   FILMSTRIP
========================================================= */

.scpjt-filmstrip {

    position: relative;

    display: flex;

    gap: 8px;

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding:
        2px 1px 9px;

    scroll-behavior: smooth;

    scroll-snap-type:
        x proximity;

    overscroll-behavior-x:
        contain;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-width: none;

}


.scpjt-filmstrip::-webkit-scrollbar {

    display: none;

}


/* =========================================================
   THUMB
========================================================= */

.scpjt-thumb {

    position: relative;

    flex:
        0 0 154px;

    width: 154px;
    max-width: 154px;

    height: 105px;

    overflow: hidden;

    padding: 0;

    border:
        2px solid transparent;

    border-radius: 15px;

    background:
        #d8d7d2;

    cursor: pointer;

    scroll-snap-align:
        center;

    transition:

        transform .25s
        var(--scpjt-ease),

        border-color .25s ease,

        box-shadow .25s ease;

}


.scpjt-thumb:hover {

    transform:
        translateY(-4px);

}


.scpjt-thumb.active {

    border-color:
        var(--scpjt-copper);

    box-shadow:
        0 10px 25px
        rgba(15,25,39,.13);

}


.scpjt-thumb img {

    position: absolute;

    inset: 0;

    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;

    object-fit: cover;

    transition:
        transform .35s
        var(--scpjt-ease);

}


.scpjt-thumb:hover img {

    transform:
        scale(1.06);

}


.scpjt-thumb::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            transparent,
            rgba(7,16,29,.48)
        );

    pointer-events: none;

}


.scpjt-thumb-number {

    position: absolute;

    z-index: 3;

    left: 8px;
    bottom: 7px;

    color: #fff;

    font-size: 14px;

    font-weight: 800;

}


/* =========================================================
   MOBILE ACTION
========================================================= */

.scpjt-mobile-action {

    display: none;

}


/* =========================================================
   LIGHTBOX
========================================================= */

.scpjt-lightbox {

    position: fixed;

    z-index: 999999;

    inset: 0;

    width: 100vw;
    max-width: 100vw;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.scpjt-lightbox.is-open {

    opacity: 1;

    visibility: visible;

}


.scpjt-lightbox-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(3,7,13,.95);

    backdrop-filter:
        blur(14px);

}


/* =========================================================
   LIGHTBOX TOP
========================================================= */

.scpjt-lightbox-top {

    position: relative;

    z-index: 5;

    min-height: 80px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        14px 22px;

    color: #fff;

}


.scpjt-lightbox-top > div {

    min-width: 0;

}


.scpjt-lightbox-top small,
.scpjt-lightbox-top strong {

    display: block;

    font-size: 14px;

}


.scpjt-lightbox-top strong {

    overflow-wrap: anywhere;

}


.scpjt-lightbox-top small {

    color:
        var(--scpjt-gold-light);

}


.scpjt-lightbox-top button {

    width: 48px;
    height: 48px;

    flex:
        0 0 48px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius: 50%;

    color: #fff;

    background:
        rgba(255,255,255,.06);

    font-size: 18px;

    cursor: pointer;

}


/* =========================================================
   LIGHTBOX STAGE
========================================================= */

.scpjt-lightbox-stage {

    position: relative;

    z-index: 5;

    width: 100%;

    min-height: 0;

    flex: 1;

    display: grid;

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

    align-items: center;

    gap: 15px;

    padding:
        10px 20px;

    overflow: hidden;

}


.scpjt-lightbox-image-wrap {

    min-width: 0;

    width: 100%;

    height:
        calc(100vh - 165px);

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}


.scpjt-lightbox-image-wrap img {

    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain;

    border-radius: 12px;

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.40);

}


/* =========================================================
   LIGHTBOX NAV
========================================================= */

.scpjt-lightbox-nav {

    width: 55px;
    height: 55px;

    display: grid;

    place-items: center;

    justify-self: center;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 50%;

    color: #fff;

    background:
        rgba(255,255,255,.06);

    cursor: pointer;

}


.scpjt-lightbox-nav:hover {

    color:
        var(--scpjt-dark);

    background:
        var(--scpjt-gold-light);

}


/* =========================================================
   LIGHTBOX BOTTOM
========================================================= */

.scpjt-lightbox-bottom {

    position: relative;

    z-index: 5;

    min-height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    padding:
        0 15px;

    color: #fff;

}


.scpjt-lightbox-bottom span {

    flex:
        0 0 auto;

    color:
        var(--scpjt-gold-light);

    font-size: 14px;

    font-weight: 800;

}


.scpjt-lightbox-bottom small {

    color:
        rgba(255,255,255,.40);

    font-size: 14px;

}


/* =========================================================
   REVEAL
========================================================= */

.scpjt-reveal {

    opacity: 0;

    transform:
        translateY(24px);

    transition:

        opacity .7s ease,
        transform .7s
        var(--scpjt-ease);

}


.scpjt-reveal.is-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   <= 1050
========================================================= */

@media (max-width: 1050px) {

    .scpjt-showcase {

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

        overflow: visible;

    }


    .scpjt-control-panel {

        display: grid;

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

        align-items: center;

        gap: 18px;

    }


    .scpjt-index-block {

        margin: 0;

    }


    .scpjt-divider,
    .scpjt-project-standard {

        display: none;

    }


    .scpjt-navigation {

        grid-template-columns:
            50px 50px;

        width: auto;

        margin: 0;

        padding: 0;

    }


    .scpjt-navigation button {

        width: 50px;
        height: 50px;

    }


    .scpjt-progress {

        grid-column:
            1 / -1;

        margin-top: 0;

    }

}


/* =========================================================
   <= 800
========================================================= */

@media (max-width: 800px) {

    .scpjt-heading {

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

        gap: 18px;

    }


    .scpjt-heading-right {

        max-width: 650px;

        justify-self: start;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    html,
    body {

        overflow-x: hidden;

    }


    .scpjt-section {

        padding:
            75px 0 92px;

    }


    .scpjt-container {

        width:
            calc(100% - 24px);

        max-width:
            calc(100% - 24px);

    }


    .scpjt-heading {

        gap: 17px;

        margin-bottom: 30px;

    }


    .scpjt-heading h2 {

        font-size:
            clamp(39px,11vw,50px);

    }


    .scpjt-heading-right {

        width: 100%;

    }


    .scpjt-view-all {

        display: none;

    }


    /* =====================================================
       STAGE
    ====================================================== */

    .scpjt-stage-image-wrap {

        width: 100%;

        height: min(560px,145vw);

        min-height: 460px;

        border-radius: 22px;

    }


    .scpjt-stage-top {

        left: 12px;
        right: 12px;
        top: 12px;

    }


    .scpjt-project-type {

        max-width:
            calc(100% - 55px);

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

    }


    .scpjt-project-number {

        right: 15px;
        top: 78px;

    }


    .scpjt-project-number > span {

        font-size: 64px;

    }


    .scpjt-stage-bottom {

        left: 14px;
        right: 14px;
        bottom: 14px;

        display: block;

    }


    .scpjt-project-copy {

        width: 100%;
        max-width: 100%;

    }


    .scpjt-project-copy h3 {

        font-size:
            clamp(27px,8vw,32px);

    }


    .scpjt-project-copy p {

        width: 100%;
        max-width: 100%;

        font-size: 14px;

    }


    .scpjt-project-meta {

        display: flex;

        flex-wrap: wrap;

        width: 100%;

        margin-top: 13px;

    }


    .scpjt-project-meta span {

        max-width: 100%;

        white-space: normal;

    }


    /* =====================================================
       CONTROL
    ====================================================== */

    .scpjt-control-panel {

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

        gap: 10px;

        width: 100%;

        padding: 14px;

        border-radius: 19px;

    }


    .scpjt-control-heading {

        display: none;

    }


    .scpjt-index-block {

        min-width: 0;

    }


    .scpjt-index-block > span {

        font-size: 43px;

    }


    .scpjt-navigation {

        grid-template-columns:
            46px 46px;

    }


    .scpjt-navigation button {

        width: 46px;
        height: 46px;

    }


    /* =====================================================
       FILMSTRIP
    ====================================================== */

    .scpjt-filmstrip-wrap {

        width: 100%;

        overflow: hidden;

    }


    .scpjt-filmstrip {

        width: 100%;

        max-width: 100%;

    }


    .scpjt-thumb {

        flex:
            0 0 125px;

        width: 125px;
        max-width: 125px;

        height: 88px;

    }


    .scpjt-mobile-action {

        display: block;

        width: 100%;

        margin-top: 15px;

    }


    .scpjt-mobile-action a {

        width: 100%;

        min-height: 50px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 10px;

        border-radius: 14px;

        color: #fff;

        background:
            var(--scpjt-navy);

        font-size: 14px;

        font-weight: 800;

    }


    /* =====================================================
       LIGHTBOX
    ====================================================== */

    .scpjt-lightbox-stage {

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

        width: 100%;

        padding:
            8px 12px 74px;

    }


    .scpjt-lightbox-image-wrap {

        width: 100%;

        height:
            calc(100dvh - 195px);

    }


    .scpjt-lightbox-image-wrap img {

        max-width: 100% !important;

    }


    .scpjt-lightbox-nav {

        position: absolute;

        bottom: 10px;

        width: 48px;
        height: 48px;

    }


    .scpjt-lightbox-prev {

        left:
            calc(50% - 58px);

    }


    .scpjt-lightbox-next {

        right:
            calc(50% - 58px);

    }


    .scpjt-lightbox-bottom {

        position: absolute;

        left: 0;
        right: 0;
        bottom: 73px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .scpjt-section-header h2 {

        font-size: 37px;

    }


    .scpjt-stage-image-wrap {

        height: 510px;

        min-height: 510px;

    }


    .scpjt-project-copy p {

        display: -webkit-box;

        overflow: hidden;

        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;

    }


    .scpjt-control-panel {

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

    }


    .scpjt-index-block div {

        display: none;

    }


    .scpjt-progress {

        grid-column:
            1 / -1;

    }


    .scpjt-thumb {

        flex-basis: 108px;

        width: 108px;
        max-width: 108px;

        height: 80px;

    }


    .scpjt-lightbox-top {

        padding:
            12px;

    }


    .scpjt-lightbox-bottom small {

        display: none;

    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 350px) {

    .scpjt-container {

        width:
            calc(100% - 18px);

        max-width:
            calc(100% - 18px);

    }


    .scpjt-stage-image-wrap {

        height: 480px;

        min-height: 480px;

    }


    .scpjt-navigation {

        grid-template-columns:
            42px 42px;

    }


    .scpjt-navigation button {

        width: 42px;
        height: 42px;

    }

}


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

.scpjt-section button:focus-visible,
.scpjt-section a:focus-visible {

    outline:
        3px solid
        var(--scpjt-gold);

    outline-offset: 3px;

}


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

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

    .scpjt-section *,
    .scpjt-section *::before,
    .scpjt-section *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}


/* =========================================================
   SANTA CRUZ PAINTING
   ABOUT US PAGE
========================================================= */

:root {

    --sca-dark: #07101d;
    --sca-dark-2: #0b1524;
    --sca-navy: #18243a;

    --sca-gold: #d0a054;
    --sca-gold-light: #f0cd86;
    --sca-copper: #b57a52;

    --sca-cream: #f4f2ec;
    --sca-white: #ffffff;

    --sca-text: #182133;
    --sca-muted: #707885;

    --sca-ease:
        cubic-bezier(.22,1,.36,1);

}


/* =========================================================
   GLOBAL PAGE PROTECTION
========================================================= */

html,
body {

    width: 100%;
    max-width: 100%;

    overflow-x: clip;

}


.sca-section,
.sca-breadcrumb,
.sca-mission,
.sca-final-cta {

    width: 100%;
    max-width: 100%;

}


.sca-section *,
.sca-breadcrumb *,
.sca-mission *,
.sca-final-cta *,
.sca-section *::before,
.sca-section *::after,
.sca-breadcrumb *::before,
.sca-breadcrumb *::after {

    box-sizing: border-box;

}


.sca-section a,
.sca-breadcrumb a,
.sca-final-cta a {

    text-decoration: none;

}


.sca-container {

    position: relative;

    z-index: 5;

    width:
        min(calc(100% - 40px), 1450px);

    min-width: 0;

    margin:
        0 auto;

}


/* =========================================================
   COMMON SECTION
========================================================= */

.sca-section {

    position: relative;

    padding:
        105px 0;

    overflow: hidden;

}


/* =========================================================
   COMMON EYEBROW
========================================================= */

.sca-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 13px;

    color:
        var(--sca-copper);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .07em;

    text-transform: uppercase;

}


.sca-eyebrow > span {

    width: 36px;
    height: 36px;

    flex:
        0 0 36px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color:
        var(--sca-dark);

    background:
        linear-gradient(
            145deg,
            var(--sca-gold-light),
            var(--sca-gold)
        );

}


.sca-eyebrow-light {

    color:
        var(--sca-gold-light);

}


/* =========================================================
   BREADCRUMB
========================================================= */

.sca-breadcrumb {

    position: relative;

    min-height: 460px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: #fff;

    background:
        var(--sca-dark);

    isolation: isolate;

}


.sca-breadcrumb-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        url("https://santacruzpaintingllc.com/assets/img/service/Painting%20Services.webp");

    background-size: cover;

    background-position: center;

    transform: scale(1.03);

}


.sca-breadcrumb-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(5,11,20,.97) 0%,
            rgba(7,16,29,.90) 42%,
            rgba(7,16,29,.66) 72%,
            rgba(7,16,29,.42) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,.18),
            rgba(0,0,0,.30)
        );

}


.sca-breadcrumb-lines {

    position: absolute;

    z-index: 2;

    inset: 0;

    pointer-events: none;

}


.sca-breadcrumb-lines span {

    position: absolute;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(208,160,84,.45),
            transparent
        );

}


.sca-breadcrumb-lines span:nth-child(1) {

    width: 48%;

    right: -7%;

    top: 28%;

    transform:
        rotate(-9deg);

}


.sca-breadcrumb-lines span:nth-child(2) {

    width: 36%;

    right: 8%;

    top: 59%;

    transform:
        rotate(7deg);

}


.sca-breadcrumb-lines span:nth-child(3) {

    width: 25%;

    left: -4%;

    bottom: 14%;

    transform:
        rotate(-4deg);

}


.sca-breadcrumb-inner {

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(260px,.38fr);

    align-items: end;

    gap: 70px;

    padding:
        105px 0 75px;

}


.sca-breadcrumb-copy {

    min-width: 0;

}


.sca-breadcrumb-eyebrow {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 16px;

    color:
        var(--sca-gold-light);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .07em;

    text-transform: uppercase;

}


.sca-breadcrumb-eyebrow > span {

    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color:
        var(--sca-dark);

    background:
        linear-gradient(
            145deg,
            var(--sca-gold-light),
            var(--sca-gold)
        );

}


.sca-breadcrumb h1 {

    max-width: 790px;

    margin:
        0 0 18px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(58px,7vw,104px);

    line-height: .87;

    letter-spacing: -.055em;

}


.sca-breadcrumb h1 em {

    display: block;

    color:
        var(--sca-gold-light);

    font-style: normal;

}


.sca-breadcrumb-copy > p {

    max-width: 660px;

    margin:
        0 0 25px;

    color:
        rgba(255,255,255,.62);

    font-size: 15px;

    line-height: 1.7;

}


.sca-breadcrumb-nav {

    display: inline-flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    min-height: 42px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 100px;

    background:
        rgba(255,255,255,.05);

    backdrop-filter:
        blur(12px);

}


.sca-breadcrumb-nav a,
.sca-breadcrumb-nav span,
.sca-breadcrumb-nav i {

    font-size: 14px;

}


.sca-breadcrumb-nav a {

    color: #fff;

}


.sca-breadcrumb-nav i {

    color:
        var(--sca-gold);

}


.sca-breadcrumb-nav span {

    color:
        rgba(255,255,255,.48);

}


/* =========================================================
   BREADCRUMB SIDE
========================================================= */

.sca-breadcrumb-side {

    display: grid;

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

    gap: 20px;

    padding-bottom: 5px;

}


.sca-breadcrumb-side-line {

    width: 1px;

    min-height: 100px;

    background:
        linear-gradient(
            transparent,
            var(--sca-gold),
            transparent
        );

}


.sca-breadcrumb-side small,
.sca-breadcrumb-side strong {

    display: block;

}


.sca-breadcrumb-side small {

    margin-bottom: 8px;

    color:
        var(--sca-gold-light);

    font-size: 14px;

}


.sca-breadcrumb-side strong {

    color:
        rgba(255,255,255,.76);

    font-family:
        "Playfair Display",
        serif;

    font-size: 23px;

    line-height: 1.25;

}


/* =========================================================
   WHO WE ARE
========================================================= */

.sca-who {

    background:

        radial-gradient(
            circle at 5% 10%,
            rgba(208,160,84,.12),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #fbfaf6,
            #f1f0ea
        );

}


.sca-who-grid {

    display: grid;

    grid-template-columns:
        minmax(0,.95fr)
        minmax(0,1.05fr);

    align-items: center;

    gap:
        clamp(55px,7vw,105px);

}


/* =========================================================
   WHO VISUAL
========================================================= */

.sca-who-visual {

    position: relative;

    min-width: 0;

    min-height: 635px;

}


.sca-image-main {

    position: absolute;

    left: 0;
    top: 0;

    width: 82%;
    height: 530px;

    overflow: hidden;

    border-radius:
        28px;

    box-shadow:
        0 35px 75px
        rgba(7,16,29,.16);

}


.sca-image-main img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


.sca-image-frame {

    position: absolute;

    inset: 14px;

    border:
        1px solid
        rgba(255,255,255,.28);

    border-radius:
        20px;

    pointer-events: none;

}


.sca-image-secondary {

    position: absolute;

    z-index: 4;

    right: 0;
    bottom: 0;

    width: 48%;
    height: 310px;

    overflow: hidden;

    border:
        8px solid
        #f5f3ed;

    border-radius:
        22px;

    box-shadow:
        0 24px 50px
        rgba(7,16,29,.16);

}


.sca-image-secondary img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


/* =========================================================
   EXPERIENCE
========================================================= */

.sca-experience-card {

    position: absolute;

    z-index: 8;

    left: -20px;
    bottom: 45px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        15px 18px;

    border-radius:
        17px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            var(--sca-dark),
            var(--sca-navy)
        );

    box-shadow:
        0 20px 45px
        rgba(7,16,29,.23);

}


.sca-experience-card > strong {

    color:
        var(--sca-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        49px;

    line-height: 1;

}


.sca-experience-card > span {

    color:
        rgba(255,255,255,.66);

    font-size: 14px;

    line-height: 1.25;

}


.sca-experience-card b {

    color:
        var(--sca-gold);

}


/* =========================================================
   QUALITY BADGE
========================================================= */

.sca-quality-badge {

    position: absolute;

    z-index: 9;

    right: 15px;
    top: 38px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        8px 12px 8px 8px;

    border:
        1px solid
        rgba(255,255,255,.60);

    border-radius: 15px;

    background:
        rgba(255,255,255,.91);

    box-shadow:
        0 15px 35px
        rgba(7,16,29,.12);

    backdrop-filter:
        blur(12px);

}


.sca-quality-badge > span {

    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color:
        var(--sca-gold-light);

    background:
        var(--sca-navy);

}


.sca-quality-badge small,
.sca-quality-badge strong {

    display: block;

    font-size: 14px;

}


.sca-quality-badge small {

    color:
        var(--sca-muted);

}


.sca-quality-badge strong {

    color:
        var(--sca-dark);

}


/* =========================================================
   WHO CONTENT
========================================================= */

.sca-who-content {

    min-width: 0;

}


.sca-who-content h2,
.sca-standard-heading h2,
.sca-story-intro h2,
.sca-services-header h2,
.sca-business-heading h2 {

    margin: 0;

    color:
        var(--sca-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(43px,4.6vw,69px);

    line-height: .98;

    letter-spacing: -.045em;

}


.sca-who-content h2 span,
.sca-story-intro h2 span,
.sca-services-header h2 span,
.sca-business-heading h2 span {

    display: block;

    color:
        var(--sca-copper);

}


.sca-who-content > p {

    max-width: 700px;

    color:
        var(--sca-muted);

    font-size: 15px;

    line-height: 1.75;

}


.sca-who-content .sca-lead {

    margin-top: 25px;

    color:
        var(--sca-text);

    font-size: 17px;

    font-weight: 600;

}


/* =========================================================
   SIGNATURE LINE
========================================================= */

.sca-signature-line {

    display: grid;

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

    align-items: start;

    gap: 13px;

    margin:
        27px 0;

}


.sca-signature-line > span {

    height: 2px;

    margin-top: 11px;

    background:
        linear-gradient(
            90deg,
            var(--sca-copper),
            var(--sca-gold-light)
        );

}


.sca-signature-line p {

    margin: 0;

    color:
        var(--sca-text);

    font-family:
        "Playfair Display",
        serif;

    font-size: 20px;

    line-height: 1.45;

}


/* =========================================================
   WHO FEATURES
========================================================= */

.sca-who-features {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-bottom: 27px;

}


.sca-who-features > div {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        12px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.68);

}


.sca-who-features > div > span {

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color:
        var(--sca-copper);

    background:
        rgba(208,160,84,.11);

}


.sca-who-features small,
.sca-who-features strong {

    display: block;

    font-size: 14px;

}


.sca-who-features small {

    color:
        var(--sca-muted);

}


.sca-who-features strong {

    color:
        var(--sca-dark);

}


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

.sca-who-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}


.sca-btn-primary,
.sca-btn-secondary {

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        0 18px;

    border-radius: 13px;

    font-size: 14px;

    font-weight: 800;

}


.sca-btn-primary {

    color:
        var(--sca-dark);

    background:
        linear-gradient(
            145deg,
            var(--sca-gold-light),
            var(--sca-gold)
        );

}


.sca-btn-primary > span {

    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        rgba(255,255,255,.32);

}


.sca-btn-secondary {

    color:
        var(--sca-dark);

    border:
        1px solid
        rgba(7,16,29,.11);

    background: #fff;

}


/* =========================================================
   STANDARD SECTION
========================================================= */

.sca-standard {

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #07101d,
            #0c1727 55%,
            #112038
        );

    isolation: isolate;

}


.sca-standard-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

}


.sca-standard-grid {

    position: absolute;

    inset: 0;

    opacity: .18;

    background-image:

        linear-gradient(
            rgba(255,255,255,.03) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.03) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

}


.sca-standard-orb {

    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    top: -260px;

    border-radius: 50%;

    border:
        1px solid
        rgba(208,160,84,.15);

}


.sca-standard-heading {

    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(0,.85fr);

    align-items: end;

    gap: 60px;

    margin-bottom: 44px;

}


.sca-standard-heading h2 {

    color: #fff;

}


.sca-standard-heading h2 span {

    display: block;

    color:
        var(--sca-gold-light);

}


.sca-standard-heading > p {

    max-width: 500px;

    justify-self: end;

    margin: 0;

    color:
        rgba(255,255,255,.52);

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   STANDARD CARDS
========================================================= */

.sca-standard-grid-cards {

    display: grid;

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

    gap: 12px;

}


.sca-standard-card {

    position: relative;

    min-width: 0;

    min-height: 370px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    padding: 25px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius: 22px;

    background:
        rgba(255,255,255,.035);

    transition:

        transform .35s
        var(--sca-ease),

        background .35s ease,

        border-color .35s ease;

}


.sca-standard-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(208,160,84,.24);

    background:
        rgba(255,255,255,.065);

}


.sca-standard-number {

    position: absolute;

    right: 20px;
    top: 13px;

    color:
        rgba(255,255,255,.07);

    font-family:
        "Playfair Display",
        serif;

    font-size: 75px;

    line-height: 1;

}


.sca-standard-icon {

    position: relative;

    z-index: 2;

    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    margin-bottom: 34px;

    border-radius: 16px;

    color:
        var(--sca-dark);

    background:
        linear-gradient(
            145deg,
            var(--sca-gold-light),
            var(--sca-gold)
        );

}


.sca-standard-card > small {

    color:
        var(--sca-gold);

    font-size: 14px;

}


.sca-standard-card h3 {

    margin:
        4px 0 11px;

    font-family:
        "Playfair Display",
        serif;

    font-size: 30px;

}


.sca-standard-card p {

    margin: 0;

    color:
        rgba(255,255,255,.50);

    font-size: 14px;

    line-height: 1.65;

}


.sca-standard-bottom {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: auto;

    padding-top: 25px;

    color:
        rgba(255,255,255,.66);

    font-size: 14px;

    font-weight: 700;

}


.sca-standard-bottom > span {

    width: 28px;
    height: 2px;

    background:
        var(--sca-gold);

}


/* =========================================================
   STORY
========================================================= */

.sca-story {

    background:
        #f7f6f1;

}


.sca-story-grid {

    display: grid;

    grid-template-columns:
        minmax(0,.86fr)
        minmax(0,1.14fr);

    gap:
        clamp(50px,7vw,105px);

}


.sca-story-intro {

    position: sticky;

    top: 120px;

    align-self: start;

}


.sca-story-intro > p {

    max-width: 520px;

    margin-top: 23px;

    color:
        var(--sca-muted);

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   QUOTE
========================================================= */

.sca-story-quote {

    display: grid;

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

    gap: 13px;

    margin-top: 30px;

    padding:
        18px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 17px;

    background: #fff;

}


.sca-story-quote > span {

    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    color:
        var(--sca-copper);

    background:
        rgba(208,160,84,.11);

}


.sca-story-quote p {

    margin: 0;

    color:
        var(--sca-text);

    font-family:
        "Playfair Display",
        serif;

    font-size: 18px;

    line-height: 1.45;

}


/* =========================================================
   PROCESS
========================================================= */

.sca-story-process {

    display: grid;

}


.sca-process-item {

    display: grid;

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

    gap: 22px;

    min-height: 175px;

}


.sca-process-line {

    position: relative;

    display: flex;

    justify-content: center;

}


.sca-process-line::after {

    content: "";

    position: absolute;

    z-index: 0;

    left: 50%;
    top: 57px;
    bottom: 0;

    width: 1px;

    background:
        linear-gradient(
            var(--sca-gold),
            rgba(181,122,82,.08)
        );

}


.sca-process-item:last-child
.sca-process-line::after {

    display: none;

}


.sca-process-line span {

    position: relative;

    z-index: 2;

    width: 54px;
    height: 54px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        var(--sca-dark);

    background:
        linear-gradient(
            145deg,
            var(--sca-gold-light),
            var(--sca-gold)
        );

    font-family:
        "Playfair Display",
        serif;

    font-size: 17px;

    box-shadow:
        0 10px 25px
        rgba(208,160,84,.18);

}


.sca-process-content {

    padding:
        3px 0 35px;

}


.sca-process-content small {

    color:
        var(--sca-copper);

    font-size: 14px;

}


.sca-process-content h3 {

    margin:
        2px 0 7px;

    color:
        var(--sca-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        27px;

}


.sca-process-content p {

    max-width: 620px;

    margin: 0;

    color:
        var(--sca-muted);

    font-size: 14px;

    line-height: 1.65;

}


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

.sca-services {

    background:
        linear-gradient(
            135deg,
            #fff,
            #f3f1eb
        );

}


.sca-services-header {

    display: grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(0,.85fr);

    align-items: end;

    gap: 60px;

    margin-bottom: 42px;

}


.sca-services-header > p {

    max-width: 500px;

    justify-self: end;

    margin: 0;

    color:
        var(--sca-muted);

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   SERVICE ROW
========================================================= */

.sca-services-list {

    border-top:
        1px solid
        rgba(7,16,29,.10);

}


.sca-service-row {

    position: relative;

    display: grid;

    grid-template-columns:
        58px 58px minmax(0,1fr) 50px;

    align-items: center;

    gap: 18px;

    min-height: 116px;

    padding:
        10px 4px;

    border-bottom:
        1px solid
        rgba(7,16,29,.10);

    color:
        var(--sca-dark);

    transition:
        padding .3s var(--sca-ease),
        background .3s ease;

}


.sca-service-row:hover {

    padding-left: 16px;
    padding-right: 16px;

    background:
        rgba(208,160,84,.055);

}


.sca-service-index {

    color:
        rgba(7,16,29,.25);

    font-family:
        "Playfair Display",
        serif;

    font-size: 18px;

}


.sca-service-icon {

    width: 54px;
    height: 54px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    color:
        var(--sca-copper);

    background:
        rgba(208,160,84,.10);

    transition:
        background .25s ease,
        color .25s ease;

}


.sca-service-row:hover
.sca-service-icon {

    color:
        var(--sca-dark);

    background:
        var(--sca-gold-light);

}


.sca-service-row small,
.sca-service-row strong {

    display: block;

}


.sca-service-row small {

    color:
        var(--sca-muted);

    font-size: 14px;

}


.sca-service-row strong {

    margin-top: 2px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        26px;

}


.sca-service-arrow {

    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(7,16,29,.10);

    border-radius: 50%;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;

}


.sca-service-row:hover
.sca-service-arrow {

    transform:
        translateX(4px);

    color: #fff;

    background:
        var(--sca-navy);

}


/* =========================================================
   MISSION
========================================================= */

.sca-mission {

    position: relative;

    overflow: hidden;

    padding:
        105px 0;

    color: #fff;

    background:
        var(--sca-dark);

}


.sca-mission-background {

    position: absolute;

    inset: 0;

    opacity: .24;

    background-image:
        url("https://santacruzpaintingllc.com/assets/img/service/Painting%20Services.webp");

    background-size: cover;

    background-position: center;

}


.sca-mission::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            rgba(7,16,29,.98),
            rgba(7,16,29,.86)
        );

}


.sca-mission-card {

    position: relative;

    z-index: 4;

    display: grid;

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

    gap: 55px;

    align-items: center;

    padding:
        45px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 28px;

    background:
        rgba(255,255,255,.045);

    backdrop-filter:
        blur(13px);

}


.sca-mission-number {

    padding-right: 35px;

    border-right:
        1px solid
        rgba(255,255,255,.10);

}


.sca-mission-number span,
.sca-mission-number strong {

    display: block;

}


.sca-mission-number span {

    color:
        rgba(255,255,255,.38);

    font-size: 14px;

    text-transform: uppercase;

    letter-spacing: .08em;

}


.sca-mission-number strong {

    color:
        var(--sca-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size: 53px;

}


.sca-mission-content {

    position: relative;

    min-width: 0;

}


.sca-mission-icon {

    position: absolute;

    right: 0;
    top: -15px;

    color:
        rgba(208,160,84,.11);

    font-size: 95px;

}


.sca-mission-content h2 {

    position: relative;

    z-index: 2;

    max-width: 800px;

    margin:
        0 0 16px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(38px,4vw,61px);

    line-height: 1;

    letter-spacing: -.04em;

}


.sca-mission-content h2 span {

    color:
        var(--sca-gold-light);

}


.sca-mission-content p {

    position: relative;

    z-index: 2;

    max-width: 690px;

    margin: 0;

    color:
        rgba(255,255,255,.55);

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   BUSINESS
========================================================= */

.sca-business {

    background:
        #f7f6f2;

}


.sca-business-heading {

    max-width: 800px;

    margin-bottom: 40px;

}


.sca-business-grid {

    display: grid;

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

    gap: 10px;

}


.sca-business-card {

    min-width: 0;

    min-height: 245px;

    padding: 21px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 19px;

    background: #fff;

    transition:
        transform .3s var(--sca-ease),
        box-shadow .3s ease;

}


.sca-business-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 18px 42px
        rgba(7,16,29,.08);

}


.sca-business-card > span {

    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    margin-bottom: 29px;

    border-radius: 14px;

    color:
        var(--sca-copper);

    background:
        rgba(208,160,84,.10);

}


.sca-business-card > small {

    display: block;

    color:
        var(--sca-muted);

    font-size: 14px;

}


.sca-business-card > strong {

    display: block;

    margin-top: 3px;

    color:
        var(--sca-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 23px;

}


.sca-business-card > p {

    margin:
        10px 0 0;

    color:
        var(--sca-muted);

    font-size: 14px;

    line-height: 1.55;

}


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

.sca-final-cta {

    position: relative;

    overflow: hidden;

    padding:
        85px 0;

    background:
        linear-gradient(
            135deg,
            var(--sca-gold-light),
            var(--sca-gold)
        );

}


.sca-final-shape {

    position: absolute;

    width: 550px;
    height: 550px;

    right: -210px;
    top: -230px;

    border:
        1px solid
        rgba(7,16,29,.10);

    border-radius: 50%;

}


.sca-final-shape::after {

    content: "";

    position: absolute;

    inset: 65px;

    border:
        1px solid
        rgba(7,16,29,.08);

    border-radius: 50%;

}


.sca-final-inner {

    display: grid;

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

    align-items: center;

    gap: 50px;

}


.sca-final-inner small {

    display: block;

    margin-bottom: 7px;

    color:
        rgba(7,16,29,.60);

    font-size: 14px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .07em;

}


.sca-final-inner h2 {

    max-width: 780px;

    margin: 0;

    color:
        var(--sca-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(38px,4vw,61px);

    line-height: 1;

    letter-spacing: -.04em;

}


.sca-final-inner h2 span {

    display: block;

}


.sca-final-inner p {

    max-width: 680px;

    margin:
        15px 0 0;

    color:
        rgba(7,16,29,.68);

    font-size: 15px;

    line-height: 1.65;

}


/* =========================================================
   FINAL ACTIONS
========================================================= */

.sca-final-actions {

    display: flex;

    flex-direction: column;

    gap: 8px;

    min-width: 220px;

}


.sca-final-primary,
.sca-final-secondary {

    min-height: 53px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        0 17px;

    border-radius: 13px;

    font-size: 14px;

    font-weight: 800;

}


.sca-final-primary {

    color: #fff;

    background:
        var(--sca-dark);

}


.sca-final-primary > span {

    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        rgba(255,255,255,.09);

}


.sca-final-secondary {

    color:
        var(--sca-dark);

    border:
        1px solid
        rgba(7,16,29,.14);

    background:
        rgba(255,255,255,.20);

}


/* =========================================================
   REVEAL
========================================================= */

.sca-reveal {

    opacity: 0;

    transform:
        translateY(26px);

    transition:
        opacity .75s ease,
        transform .75s
        var(--sca-ease);

}


.sca-reveal.sca-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   RESPONSIVE 1100
========================================================= */

@media (max-width: 1100px) {

    .sca-who-grid {

        gap: 55px;

    }


    .sca-business-grid {

        grid-template-columns:
            1fr 1fr;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .sca-breadcrumb-inner {

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

        gap: 35px;

    }


    .sca-breadcrumb-side {

        max-width: 420px;

    }


    .sca-who-grid,
    .sca-story-grid {

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

    }


    .sca-who-visual {

        width: min(100%,720px);

        margin:
            0 auto;

    }


    .sca-story-intro {

        position: relative;

        top: auto;

    }


    .sca-standard-heading,
    .sca-services-header {

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

        gap: 20px;

    }


    .sca-standard-heading > p,
    .sca-services-header > p {

        max-width: 690px;

        justify-self: start;

    }


    .sca-standard-grid-cards {

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

    }


    .sca-standard-card {

        min-height: 300px;

    }


    .sca-mission-card {

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

        gap: 25px;

    }


    .sca-mission-number {

        padding:
            0 0 20px;

        border-right: 0;

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

    }


    .sca-final-inner {

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

        gap: 30px;

    }


    .sca-final-actions {

        flex-direction: row;

        min-width: 0;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    html,
    body {

        overflow-x: hidden;

    }


    .sca-container {

        width:
            calc(100% - 24px);

        max-width:
            calc(100% - 24px);

    }


    .sca-section {

        padding:
            75px 0;

    }


    /* BREADCRUMB */

    .sca-breadcrumb {

        min-height: 455px;

    }


    .sca-breadcrumb-inner {

        padding:
            90px 0 55px;

    }


    .sca-breadcrumb h1 {

        font-size:
            clamp(55px,17vw,80px);

    }


    .sca-breadcrumb-copy > p {

        font-size: 14px;

    }


    .sca-breadcrumb-side {

        display: none;

    }


    /* WHO */

    .sca-who-visual {

        min-height: 515px;

    }


    .sca-image-main {

        width: 88%;

        height: 415px;

    }


    .sca-image-secondary {

        width: 47%;
        height: 225px;

        border-width: 6px;

    }


    .sca-experience-card {

        left: 7px;
        bottom: 18px;

    }


    .sca-experience-card > strong {

        font-size: 40px;

    }


    .sca-quality-badge {

        right: 4px;
        top: 25px;

    }


    .sca-who-content h2,
    .sca-standard-heading h2,
    .sca-story-intro h2,
    .sca-services-header h2,
    .sca-business-heading h2 {

        font-size:
            clamp(38px,11vw,49px);

    }


    .sca-who-content .sca-lead {

        font-size: 16px;

    }


    .sca-who-features {

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

    }


    .sca-who-actions {

        flex-direction: column;

    }


    .sca-btn-primary,
    .sca-btn-secondary {

        width: 100%;

    }


    /* PROCESS */

    .sca-process-item {

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

        gap: 15px;

    }


    .sca-process-line span {

        width: 46px;
        height: 46px;

    }


    .sca-process-line::after {

        top: 49px;

    }


    .sca-process-content h3 {

        font-size: 23px;

    }


    /* SERVICES */

    .sca-service-row {

        grid-template-columns:
            45px 47px minmax(0,1fr) 40px;

        gap: 9px;

        min-height: 105px;

    }


    .sca-service-icon {

        width: 45px;
        height: 45px;

    }


    .sca-service-row strong {

        font-size: 20px;

    }


    .sca-service-arrow {

        width: 38px;
        height: 38px;

    }


    /* MISSION */

    .sca-mission {

        padding:
            75px 0;

    }


    .sca-mission-card {

        padding: 24px;

        border-radius: 21px;

    }


    .sca-mission-number strong {

        font-size: 41px;

    }


    .sca-mission-content h2 {

        font-size:
            clamp(34px,10vw,46px);

    }


    /* BUSINESS */

    .sca-business-grid {

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

    }


    .sca-business-card {

        min-height: 220px;

        padding: 16px;

    }


    /* FINAL */

    .sca-final-cta {

        padding:
            70px 0 95px;

    }


    .sca-final-actions {

        flex-direction: column;

        width: 100%;

    }


    .sca-final-primary,
    .sca-final-secondary {

        width: 100%;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .sca-breadcrumb-nav {

        width: 100%;

        justify-content: center;

    }


    .sca-who-visual {

        min-height: 470px;

    }


    .sca-image-main {

        width: 94%;

        height: 375px;

    }


    .sca-image-secondary {

        width: 50%;
        height: 185px;

    }


    .sca-quality-badge {

        max-width: 190px;

    }


    .sca-quality-badge small {

        display: none;

    }


    .sca-experience-card {

        padding:
            11px 13px;

    }


    .sca-business-grid {

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

    }


    .sca-business-card {

        min-height: 0;

    }


    .sca-service-row {

        grid-template-columns:
            38px 45px minmax(0,1fr);

    }


    .sca-service-index {

        font-size: 14px;

    }


    .sca-service-arrow {

        display: none;

    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 350px) {

    .sca-container {

        width:
            calc(100% - 18px);

        max-width:
            calc(100% - 18px);

    }


    .sca-image-secondary {

        display: none;

    }


    .sca-image-main {

        width: 100%;

    }


    .sca-who-visual {

        min-height: 435px;

    }

}


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

.sca-section a:focus-visible,
.sca-breadcrumb a:focus-visible,
.sca-final-cta a:focus-visible {

    outline:
        3px solid
        var(--sca-gold);

    outline-offset: 3px;

}


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

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

    .sca-reveal {

        opacity: 1 !important;

        transform:
            none !important;

        transition:
            none !important;

    }

}








/* =========================================================
   SANTA CRUZ PAINTING
   PAINTING SERVICES

   UNIQUE PREFIX: scpaint-
========================================================= */

:root {

    --scpaint-dark: #07101d;
    --scpaint-dark-2: #0b1524;
    --scpaint-navy: #18243a;

    --scpaint-gold: #d0a054;
    --scpaint-gold-light: #f0cd86;
    --scpaint-copper: #b57a52;

    --scpaint-white: #ffffff;
    --scpaint-cream: #f4f2ec;

    --scpaint-text: #182133;
    --scpaint-muted: #707885;

    --scpaint-border:
        rgba(7,16,29,.08);

    /*
       JS recalculates this automatically
       according to the actual header height.
    */
    --scpaint-sticky-top: 110px;

    --scpaint-ease:
        cubic-bezier(.22,1,.36,1);

}


/* =========================================================
   GLOBAL PROTECTION
========================================================= */

html,
body {

    width: 100%;
    max-width: 100%;

    overflow-x: clip;

}


.scpaint-hero,
.scpaint-page,
.scpaint-container,
.scpaint-layout,
.scpaint-sidebar,
.scpaint-content,
.scpaint-content-section {

    min-width: 0;
    max-width: 100%;

}


.scpaint-hero *,
.scpaint-page *,
.scpaint-hero *::before,
.scpaint-hero *::after,
.scpaint-page *::before,
.scpaint-page *::after {

    box-sizing: border-box;

}


.scpaint-hero a,
.scpaint-page a {

    text-decoration: none;

}


.scpaint-page button {

    font-family: inherit;

}


/* =========================================================
   CONTAINER
========================================================= */

.scpaint-container {

    position: relative;

    z-index: 5;

    width:
        min(calc(100% - 40px),1450px);

    margin: 0 auto;

}


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

.scpaint-hero {

    position: relative;

    width: 100%;

    min-height: 580px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: #fff;

    background:
        var(--scpaint-dark);

    isolation: isolate;

}


.scpaint-hero-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        url("https://santacruzpaintingllc.com/assets/img/service/Painting%20Services.webp");

    background-size: cover;

    background-position: center;

    transform:
        scale(1.035);

}


.scpaint-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(4,10,18,.98) 0%,
            rgba(7,16,29,.94) 39%,
            rgba(7,16,29,.72) 70%,
            rgba(7,16,29,.38) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,.04),
            rgba(0,0,0,.34)
        );

}


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

.scpaint-hero-decoration {

    position: absolute;

    z-index: 2;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

}


.scpaint-hero-decoration span {

    position: absolute;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(208,160,84,.48),
            transparent
        );

}


.scpaint-hero-decoration span:nth-child(1) {

    width: 48%;

    right: -7%;
    top: 26%;

    transform:
        rotate(-8deg);

}


.scpaint-hero-decoration span:nth-child(2) {

    width: 36%;

    right: 7%;
    top: 61%;

    transform:
        rotate(7deg);

}


.scpaint-hero-decoration span:nth-child(3) {

    width: 27%;

    left: -5%;
    bottom: 15%;

    transform:
        rotate(-5deg);

}


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

.scpaint-hero-inner {

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(250px,.35fr);

    align-items: end;

    gap: 75px;

    padding:
        115px 0 75px;

}


/* =========================================================
   EYEBROW
========================================================= */

.scpaint-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 13px;

    color:
        var(--scpaint-copper);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .07em;

    text-transform: uppercase;

}


.scpaint-eyebrow > span {

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color:
        var(--scpaint-dark);

    background:

        linear-gradient(
            145deg,
            var(--scpaint-gold-light),
            var(--scpaint-gold)
        );

}


.scpaint-eyebrow-light {

    color:
        var(--scpaint-gold-light);

}


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

.scpaint-hero h1 {

    max-width: 950px;

    margin:
        0 0 20px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(57px,7vw,104px);

    line-height: .88;

    letter-spacing: -.055em;

}


.scpaint-hero h1 em {

    display: block;

    color:
        var(--scpaint-gold-light);

    font-style: normal;

}


.scpaint-hero-content > p {

    max-width: 720px;

    margin:
        0 0 26px;

    color:
        rgba(255,255,255,.64);

    font-size: 15px;

    line-height: 1.72;

}


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

.scpaint-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 24px;

}


.scpaint-btn-primary,
.scpaint-btn-secondary {

    min-height: 53px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        0 18px;

    border-radius: 13px;

    font-size: 14px;

    font-weight: 800;

}


.scpaint-btn-primary {

    color:
        var(--scpaint-dark);

    background:

        linear-gradient(
            145deg,
            var(--scpaint-gold-light),
            var(--scpaint-gold)
        );

}


.scpaint-btn-primary > span {

    width: 31px;
    height: 31px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        rgba(255,255,255,.30);

}


.scpaint-btn-secondary {

    color: #fff;

    border:
        1px solid
        rgba(255,255,255,.15);

    background:
        rgba(255,255,255,.06);

    backdrop-filter:
        blur(10px);

}


/* =========================================================
   BREADCRUMB
========================================================= */

.scpaint-breadcrumb {

    display: inline-flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    min-height: 42px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 100px;

    background:
        rgba(255,255,255,.055);

    backdrop-filter:
        blur(12px);

}


.scpaint-breadcrumb a,
.scpaint-breadcrumb span,
.scpaint-breadcrumb i {

    font-size: 14px;

}


.scpaint-breadcrumb a {

    color: #fff;

}


.scpaint-breadcrumb span {

    color:
        rgba(255,255,255,.48);

}


.scpaint-breadcrumb i {

    color:
        var(--scpaint-gold);

}


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

.scpaint-hero-side {

    display: grid;

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

    gap: 20px;

}


.scpaint-hero-side-line {

    min-height: 180px;

    background:

        linear-gradient(
            transparent,
            var(--scpaint-gold),
            transparent
        );

}


.scpaint-hero-side small {

    display: block;

    margin-bottom: 8px;

    color:
        var(--scpaint-gold-light);

    font-size: 14px;

}


.scpaint-hero-side strong {

    display: block;

    color:
        rgba(255,255,255,.78);

    font-family:
        "Playfair Display",
        serif;

    font-size: 26px;

    line-height: 1.2;

}


.scpaint-hero-side-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 18px;

}


.scpaint-hero-side-meta span {

    min-height: 34px;

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
        0 9px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 100px;

    color:
        rgba(255,255,255,.55);

    background:
        rgba(255,255,255,.04);

    font-size: 14px;

}


.scpaint-hero-side-meta i {

    color:
        var(--scpaint-gold-light);

}


/* =========================================================
   PAGE

   IMPORTANT:
   Do not use overflow:hidden here because it can prevent
   sticky positioning in some browsers.
========================================================= */

.scpaint-page {

    position: relative;

    width: 100%;

    /*
       Sticky sidebar requires its ancestors
       to remain vertically visible.
    */
    overflow: visible;

    padding:
        100px 0 110px;

    background:

        radial-gradient(
            circle at 6% 15%,
            rgba(208,160,84,.10),
            transparent 25%
        ),

        linear-gradient(
            135deg,
            #fbfaf6,
            #f2f1eb
        );

    isolation: isolate;

}


/* =========================================================
   PAGE BACKGROUND
========================================================= */

.scpaint-page-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

}


.scpaint-bg-grid {

    position: absolute;

    inset: 0;

    opacity: .22;

    background-image:

        linear-gradient(
            rgba(24,36,58,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(24,36,58,.035) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

}


.scpaint-bg-orb {

    position: absolute;

    border:
        1px solid
        rgba(181,122,82,.10);

    border-radius: 50%;

}


.scpaint-bg-orb-one {

    width: 500px;
    height: 500px;

    right: -300px;
    top: 300px;

}


.scpaint-bg-orb-two {

    width: 360px;
    height: 360px;

    left: -220px;
    bottom: 12%;

}


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

.scpaint-layout {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(250px,305px)
        minmax(0,1fr);

    /*
       Do not force the sidebar column to have
       the same content alignment as the main content.
    */
    align-items: start;

    gap:
        clamp(35px,5vw,75px);

}


/* =========================================================
   SIDEBAR
   DESKTOP STICKY BEHAVIOR

   Sticky belongs HERE, not on sidebar-inner.
========================================================= */

.scpaint-sidebar {

    position: sticky;

    top:
        var(--scpaint-sticky-top);

    align-self: start;

    width: 100%;

    z-index: 25;

}


/* =========================================================
   SIDEBAR INNER
========================================================= */

.scpaint-sidebar-inner {

    position: relative;

    width: 100%;

    /*
       If sidebar content becomes taller than the viewport,
       only the sidebar itself scrolls.
    */
    max-height:
        calc(
            100dvh -
            var(--scpaint-sticky-top) -
            18px
        );

    overflow-x: hidden;
    overflow-y: auto;

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

    border-radius: 22px;

    background:
        rgba(255,255,255,.92);

    box-shadow:
        0 20px 45px
        rgba(7,16,29,.07);

    backdrop-filter:
        blur(16px);

    scrollbar-width: thin;

    scrollbar-color:
        rgba(181,122,82,.38)
        transparent;

}


/* CHROME / EDGE / SAFARI */

.scpaint-sidebar-inner::-webkit-scrollbar {

    width: 5px;

}


.scpaint-sidebar-inner::-webkit-scrollbar-track {

    background:
        transparent;

}


.scpaint-sidebar-inner::-webkit-scrollbar-thumb {

    border-radius: 100px;

    background:
        rgba(181,122,82,.35);

}


/* =========================================================
   MOBILE TOGGLE HIDDEN ON DESKTOP
========================================================= */

.scpaint-sidebar-toggle {

    display: none;

}


/* =========================================================
   SIDEBAR SERVICE
========================================================= */

.scpaint-sidebar-service {

    display: grid;

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

    align-items: center;

    gap: 10px;

    padding: 16px;

    color: #fff;

    background:

        linear-gradient(
            135deg,
            var(--scpaint-dark),
            var(--scpaint-navy)
        );

}


.scpaint-sidebar-service > span {

    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    color:
        var(--scpaint-dark);

    background:
        var(--scpaint-gold-light);

}


.scpaint-sidebar-service small,
.scpaint-sidebar-service strong {

    display: block;

}


.scpaint-sidebar-service small {

    color:
        rgba(255,255,255,.50);

    font-size: 14px;

}


.scpaint-sidebar-service strong {

    color: #fff;

    font-size: 15px;

}


/* =========================================================
   SIDEBAR BLOCK
========================================================= */

.scpaint-sidebar-block {

    padding:
        17px 14px;

    border-bottom:
        1px solid
        rgba(7,16,29,.07);

}


.scpaint-sidebar-label {

    display: block;

    margin:
        0 5px 10px;

    color:
        var(--scpaint-muted);

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .05em;

}


/* =========================================================
   PAGE NAV
========================================================= */

.scpaint-page-nav {

    display: grid;

    gap: 4px;

}


.scpaint-nav-link {

    position: relative;

    min-height: 45px;

    display: grid;

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

    align-items: center;

    gap: 8px;

    padding:
        0 10px;

    border-radius: 11px;

    color:
        var(--scpaint-muted);

    font-size: 14px;

    font-weight: 700;

    transition:

        color .22s ease,
        background .22s ease,
        transform .22s
        var(--scpaint-ease);

}


.scpaint-nav-link > span {

    color:
        rgba(181,122,82,.58);

    font-family:
        "Playfair Display",
        serif;

    font-size: 14px;

}


.scpaint-nav-link:hover {

    color:
        var(--scpaint-dark);

    background:
        rgba(208,160,84,.075);

}


.scpaint-nav-link.active {

    color:
        var(--scpaint-dark);

    background:
        rgba(208,160,84,.12);

    transform:
        translateX(4px);

}


.scpaint-nav-link.active::after {

    content: "";

    position: absolute;

    right: 8px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--scpaint-copper);

}


/* =========================================================
   OTHER SERVICES
========================================================= */

.scpaint-other-services {

    display: grid;

    gap: 5px;

}


.scpaint-other-services > a {

    min-height: 46px;

    display: grid;

    grid-template-columns:
        32px minmax(0,1fr) 18px;

    align-items: center;

    gap: 8px;

    padding:
        0 8px;

    border-radius: 10px;

    color:
        var(--scpaint-text);

    font-size: 14px;

    transition:

        background .22s ease,
        transform .22s
        var(--scpaint-ease);

}


.scpaint-other-services > a:hover {

    transform:
        translateX(3px);

    background:
        rgba(7,16,29,.035);

}


.scpaint-other-services > a > i:first-child {

    color:
        var(--scpaint-copper);

}


.scpaint-other-services > a > i:last-child {

    color:
        rgba(7,16,29,.30);

    font-size: 12px;

}


/* =========================================================
   SIDEBAR CTA
========================================================= */

.scpaint-sidebar-cta {

    padding: 18px;

    color: #fff;

    background:

        linear-gradient(
            145deg,
            var(--scpaint-dark),
            #101e32
        );

}


.scpaint-sidebar-cta-icon {

    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    margin-bottom: 16px;

    border-radius: 12px;

    color:
        var(--scpaint-dark);

    background:
        var(--scpaint-gold-light);

}


.scpaint-sidebar-cta small,
.scpaint-sidebar-cta strong {

    display: block;

}


.scpaint-sidebar-cta small {

    color:
        var(--scpaint-gold);

    font-size: 14px;

}


.scpaint-sidebar-cta strong {

    margin:
        4px 0 15px;

    font-family:
        "Playfair Display",
        serif;

    font-size: 22px;

    line-height: 1.15;

}


.scpaint-sidebar-cta a {

    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    padding:
        0 11px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 10px;

    color: #fff;

    background:
        rgba(255,255,255,.05);

    font-size: 14px;

    font-weight: 700;

}


/* =========================================================
   CONTENT
========================================================= */

.scpaint-content {

    display: grid;

    gap: 26px;

}


/* =========================================================
   CONTENT SECTION
========================================================= */

.scpaint-content-section {

    scroll-margin-top:
        calc(
            var(--scpaint-sticky-top) +
            15px
        );

    padding:
        clamp(28px,4vw,48px);

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

    border-radius: 25px;

    background:
        rgba(255,255,255,.82);

    box-shadow:
        0 20px 50px
        rgba(7,16,29,.055);

}


/* =========================================================
   HEADINGS
========================================================= */

.scpaint-section-heading {

    max-width: 850px;

    margin-bottom: 24px;

}


.scpaint-section-heading h2,
.scpaint-split-heading h2,
.scpaint-preparation h2,
.scpaint-why h2,
.scpaint-service-area h2,
.scpaint-final h2 {

    margin: 0;

    color:
        var(--scpaint-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(39px,4vw,61px);

    line-height: .98;

    letter-spacing: -.04em;

}


.scpaint-section-heading h2 span,
.scpaint-split-heading h2 span,
.scpaint-preparation h2 span,
.scpaint-service-area h2 span {

    display: block;

    color:
        var(--scpaint-copper);

}


/* =========================================================
   TEXT
========================================================= */

.scpaint-content-section > p,
.scpaint-preparation > p,
.scpaint-service-area p {

    max-width: 900px;

    color:
        var(--scpaint-muted);

    font-size: 15px;

    line-height: 1.76;

}


.scpaint-content-section > p + p {

    margin-top: 15px;

}


.scpaint-lead {

    color:
        var(--scpaint-text) !important;

    font-size: 17px !important;

    font-weight: 600;

}


/* =========================================================
   FEATURE STRIP
========================================================= */

.scpaint-feature-strip {

    display: grid;

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

    gap: 8px;

    margin-top: 30px;

}


.scpaint-feature-strip > div {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 12px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 14px;

    background:
        #f8f7f2;

}


.scpaint-feature-strip > div > span {

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color:
        var(--scpaint-copper);

    background:
        rgba(208,160,84,.11);

}


.scpaint-feature-strip small,
.scpaint-feature-strip strong {

    display: block;

    font-size: 14px;

}


.scpaint-feature-strip small {

    color:
        var(--scpaint-muted);

}


.scpaint-feature-strip strong {

    color:
        var(--scpaint-dark);

}


/* =========================================================
   FEATURE IMAGE
========================================================= */

.scpaint-feature-image {

    position: relative;

    width: 100%;

    height:
        clamp(390px,48vw,620px);

    overflow: hidden;

    margin: 0;

    border-radius: 25px;

    background:
        #d9d7d0;

    box-shadow:
        0 24px 55px
        rgba(7,16,29,.10);

}


.scpaint-feature-image > img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s
        var(--scpaint-ease);

}


.scpaint-feature-image:hover > img {

    transform:
        scale(1.035);

}


.scpaint-feature-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            transparent 55%,
            rgba(7,16,29,.78)
        );

}


.scpaint-feature-image figcaption {

    position: absolute;

    z-index: 4;

    left: 20px;
    right: 20px;
    bottom: 20px;

    display: flex;

    align-items: center;

    gap: 11px;

    color: #fff;

}


.scpaint-feature-image figcaption > span {

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    color:
        var(--scpaint-dark);

    background:
        var(--scpaint-gold-light);

}


.scpaint-feature-image small,
.scpaint-feature-image strong {

    display: block;

}


.scpaint-feature-image small {

    color:
        var(--scpaint-gold-light);

    font-size: 14px;

}


.scpaint-feature-image strong {

    margin-top: 2px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(19px,2vw,27px);

}


/* =========================================================
   SPLIT HEADING
========================================================= */

.scpaint-split-heading {

    display: grid;

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

    align-items: start;

    gap: 18px;

    margin-bottom: 22px;

}


.scpaint-section-number {

    color:
        var(--scpaint-copper);

    font-family:
        "Playfair Display",
        serif;

    font-size: 53px;

    line-height: .9;

}


.scpaint-split-heading small {

    display: block;

    margin-bottom: 6px;

    color:
        var(--scpaint-copper);

    font-size: 14px;

    font-weight: 700;

}


/* =========================================================
   DETAIL GRID
========================================================= */

.scpaint-detail-grid {

    display: grid;

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

    gap: 9px;

    margin-top: 28px;

}


.scpaint-detail-grid article {

    padding: 20px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 17px;

    background:
        #f8f7f3;

    transition:

        transform .3s
        var(--scpaint-ease),

        box-shadow .3s ease;

}


.scpaint-detail-grid article:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 30px
        rgba(7,16,29,.06);

}


.scpaint-detail-grid article > span {

    width: 45px;
    height: 45px;

    display: grid;

    place-items: center;

    margin-bottom: 19px;

    border-radius: 13px;

    color:
        var(--scpaint-copper);

    background:
        rgba(208,160,84,.11);

}


.scpaint-detail-grid h3 {

    margin:
        0 0 7px;

    color:
        var(--scpaint-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 23px;

}


.scpaint-detail-grid p {

    margin: 0;

    color:
        var(--scpaint-muted);

    font-size: 14px;

    line-height: 1.6;

}


/* =========================================================
   IMAGE CARD
========================================================= */

.scpaint-image-card {

    position: relative;

    height: 440px;

    overflow: hidden;

    border-radius: 25px;

    background:
        var(--scpaint-dark);

}


.scpaint-image-card > img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


.scpaint-image-card-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(7,16,29,.87),
            rgba(7,16,29,.20)
        );

}


.scpaint-image-card-content {

    position: absolute;

    z-index: 3;

    left: 28px;
    bottom: 28px;

    max-width: 550px;

    color: #fff;

}


.scpaint-image-card-content small {

    display: block;

    margin-bottom: 6px;

    color:
        var(--scpaint-gold-light);

    font-size: 14px;

}


.scpaint-image-card-content strong {

    display: block;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(31px,3.4vw,50px);

    line-height: 1;

}


/* =========================================================
   CHECK LIST
========================================================= */

.scpaint-check-list {

    display: grid;

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

    gap: 8px;

    margin-top: 27px;

}


.scpaint-check-list > div {

    min-height: 57px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        9px 12px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 13px;

    color:
        var(--scpaint-text);

    background:
        #f8f7f3;

    font-size: 14px;

    font-weight: 700;

}


.scpaint-check-list > div > span {

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color:
        var(--scpaint-copper);

    background:
        rgba(208,160,84,.11);

}


/* =========================================================
   PREPARATION
========================================================= */

.scpaint-preparation {

    scroll-margin-top:
        calc(
            var(--scpaint-sticky-top) +
            15px
        );

    overflow: hidden;

    padding:
        clamp(30px,4vw,48px);

    border-radius: 25px;

    color: #fff;

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(208,160,84,.14),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            var(--scpaint-dark),
            #101e32
        );

}


.scpaint-preparation-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 25px;

}


.scpaint-preparation-top small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--scpaint-gold);

    font-size: 14px;

}


.scpaint-preparation h2 {

    color: #fff;

}


.scpaint-preparation h2 span {

    color:
        var(--scpaint-gold-light);

}


.scpaint-preparation-top > span {

    width: 62px;
    height: 62px;

    flex: 0 0 62px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    color:
        var(--scpaint-dark);

    background:
        var(--scpaint-gold-light);

    font-size: 20px;

}


.scpaint-preparation > p {

    color:
        rgba(255,255,255,.55);

}


/* =========================================================
   PREPARATION GRID
========================================================= */

.scpaint-preparation-grid {

    display: grid;

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

    gap: 7px;

    margin-top: 28px;

}


.scpaint-preparation-grid > div {

    min-width: 0;

    padding: 16px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 15px;

    background:
        rgba(255,255,255,.035);

}


.scpaint-preparation-grid strong {

    display: block;

    color:
        var(--scpaint-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size: 25px;

}


.scpaint-preparation-grid span {

    display: block;

    margin-top: 7px;

    color:
        rgba(255,255,255,.65);

    font-size: 14px;

}


/* =========================================================
   PROCESS
========================================================= */

.scpaint-process {

    display: grid;

    margin-top: 30px;

}


.scpaint-process-item {

    display: grid;

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

    gap: 20px;

    min-height: 150px;

}


.scpaint-process-marker {

    position: relative;

    display: flex;

    justify-content: center;

}


.scpaint-process-marker::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 57px;
    bottom: 0;

    width: 1px;

    background:

        linear-gradient(
            var(--scpaint-gold),
            rgba(181,122,82,.08)
        );

}


.scpaint-process-item:last-child
.scpaint-process-marker::after {

    display: none;

}


.scpaint-process-marker > span {

    position: relative;

    z-index: 2;

    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        var(--scpaint-dark);

    background:

        linear-gradient(
            145deg,
            var(--scpaint-gold-light),
            var(--scpaint-gold)
        );

    font-family:
        "Playfair Display",
        serif;

    font-size: 16px;

}


.scpaint-process-item > div:last-child {

    padding:
        2px 0 30px;

}


.scpaint-process-item small {

    color:
        var(--scpaint-copper);

    font-size: 14px;

}


.scpaint-process-item h3 {

    margin:
        3px 0 7px;

    color:
        var(--scpaint-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 25px;

}


.scpaint-process-item p {

    max-width: 720px;

    margin: 0;

    color:
        var(--scpaint-muted);

    font-size: 14px;

    line-height: 1.65;

}


/* =========================================================
   WHY CHOOSE
========================================================= */

.scpaint-why {

    scroll-margin-top:
        calc(
            var(--scpaint-sticky-top) +
            15px
        );

    overflow: hidden;

    padding:
        clamp(30px,4vw,48px);

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 25px;

    background: #fff;

}


.scpaint-why-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 28px;

}


.scpaint-why-heading small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--scpaint-copper);

    font-size: 14px;

}


.scpaint-why h2 span {

    display: block;

    color:
        var(--scpaint-copper);

}


.scpaint-why-heading > span {

    width: 61px;
    height: 61px;

    flex: 0 0 61px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    color:
        var(--scpaint-dark);

    background:
        var(--scpaint-gold-light);

    font-size: 20px;

}


/* =========================================================
   WHY GRID
========================================================= */

.scpaint-why-grid {

    display: grid;

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

    gap: 8px;

}


.scpaint-why-grid article {

    padding: 20px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 16px;

    background:
        #f8f7f3;

}


.scpaint-why-grid article > span {

    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    margin-bottom: 18px;

    border-radius: 12px;

    color:
        var(--scpaint-copper);

    background:
        rgba(208,160,84,.11);

}


.scpaint-why-grid strong {

    display: block;

    color:
        var(--scpaint-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 21px;

}


.scpaint-why-grid p {

    margin:
        7px 0 0;

    color:
        var(--scpaint-muted);

    font-size: 14px;

    line-height: 1.58;

}


/* =========================================================
   SERVICE AREA
========================================================= */

.scpaint-service-area {

    display: grid;

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

    align-items: center;

    gap: 35px;

    padding:
        clamp(30px,4vw,45px);

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 25px;

    background:

        linear-gradient(
            135deg,
            #fff,
            #f2f0e9
        );

}


.scpaint-service-area-content > small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--scpaint-copper);

    font-size: 14px;

}


.scpaint-city-list {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 18px;

}


.scpaint-city-list span {

    min-height: 37px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        0 10px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 100px;

    color:
        var(--scpaint-text);

    background: #fff;

    font-size: 14px;

}


.scpaint-city-list i {

    color:
        var(--scpaint-copper);

}


/* =========================================================
   SERVICE RADIUS
========================================================= */

.scpaint-service-area-radius {

    width: 165px;
    height: 165px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border:
        1px solid
        rgba(181,122,82,.18);

    border-radius: 50%;

    color: #fff;

    background:

        linear-gradient(
            145deg,
            var(--scpaint-dark),
            var(--scpaint-navy)
        );

    box-shadow:
        0 18px 40px
        rgba(7,16,29,.14);

}


.scpaint-service-area-radius strong {

    color:
        var(--scpaint-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size: 50px;

    line-height: 1;

}


.scpaint-service-area-radius span {

    color:
        rgba(255,255,255,.55);

    font-size: 14px;

    line-height: 1.15;

}


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

.scpaint-final {

    display: grid;

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

    align-items: center;

    gap: 45px;

    overflow: hidden;

    padding:
        clamp(31px,4vw,48px);

    border-radius: 25px;

    color:
        var(--scpaint-dark);

    background:

        linear-gradient(
            135deg,
            var(--scpaint-gold-light),
            var(--scpaint-gold)
        );

}


.scpaint-final small {

    display: block;

    margin-bottom: 6px;

    color:
        rgba(7,16,29,.58);

    font-size: 14px;

    font-weight: 700;

}


.scpaint-final h2 span {

    display: block;

}


.scpaint-final p {

    max-width: 700px;

    margin:
        14px 0 0;

    color:
        rgba(7,16,29,.68);

    font-size: 15px;

    line-height: 1.65;

}


.scpaint-final-actions {

    display: grid;

    gap: 8px;

    min-width: 225px;

}


.scpaint-final-primary,
.scpaint-final-phone {

    min-height: 51px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        0 16px;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 800;

}


.scpaint-final-primary {

    color: #fff;

    background:
        var(--scpaint-dark);

}


.scpaint-final-phone {

    color:
        var(--scpaint-dark);

    border:
        1px solid
        rgba(7,16,29,.13);

    background:
        rgba(255,255,255,.23);

}


/* =========================================================
   REVEAL
========================================================= */

.scpaint-reveal {

    opacity: 0;

    transform:
        translateY(24px);

    transition:

        opacity .7s ease,
        transform .7s
        var(--scpaint-ease);

}


.scpaint-reveal.scpaint-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 1050px) and (min-width: 901px) {

    .scpaint-layout {

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

        gap: 27px;

    }


    .scpaint-feature-strip {

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

    }


    .scpaint-preparation-grid {

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

    }


    .scpaint-sidebar-block {

        padding:
            15px 11px;

    }


    .scpaint-sidebar-cta {

        padding: 15px;

    }

}


/* =========================================================
   MOBILE / TABLET

   IMPORTANT:
   STICKY IS COMPLETELY DISABLED HERE.
========================================================= */

@media (max-width: 900px) {

    .scpaint-hero-inner {

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

        gap: 30px;

    }


    .scpaint-hero-side {

        display: none;

    }


    .scpaint-layout {

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

        gap: 24px;

    }


    /* =====================================================
       DISABLE DESKTOP STICKY
    ====================================================== */

    .scpaint-sidebar {

        position: relative !important;

        top: auto !important;

        left: auto !important;

        right: auto !important;

        bottom: auto !important;

        align-self: auto;

        z-index: 40;

        width: 100%;

    }


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

    .scpaint-sidebar-toggle {

        width: 100%;

        min-height: 56px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 15px;

        padding:
            0 16px;

        border:
            1px solid
            rgba(7,16,29,.08);

        border-radius: 15px;

        color: #fff;

        background:

            linear-gradient(
                135deg,
                var(--scpaint-dark),
                var(--scpaint-navy)
            );

        box-shadow:
            0 12px 28px
            rgba(7,16,29,.10);

        font-size: 14px;

        font-weight: 800;

        cursor: pointer;

    }


    .scpaint-sidebar-toggle > span {

        display: flex;

        align-items: center;

        gap: 9px;

    }


    .scpaint-sidebar-toggle > i {

        transition:
            transform .25s ease;

    }


    .scpaint-sidebar.is-open
    .scpaint-sidebar-toggle > i {

        transform:
            rotate(180deg);

    }


    /* =====================================================
       MOBILE COLLAPSIBLE SIDEBAR
    ====================================================== */

    .scpaint-sidebar-inner {

        position: relative;

        top: auto;

        width: 100%;

        /*
           Remove desktop viewport limit.
        */
        max-height: 0;

        overflow: hidden;

        margin-top: 7px;

        opacity: 0;

        transform:
            translateY(-7px);

        border-radius: 18px;

        transition:

            max-height .45s
            var(--scpaint-ease),

            opacity .25s ease,

            transform .35s
            var(--scpaint-ease);

    }


    .scpaint-sidebar.is-open
    .scpaint-sidebar-inner {

        max-height: 1300px;

        overflow-y: auto;

        opacity: 1;

        transform:
            translateY(0);

    }


    .scpaint-sidebar-service {

        display: none;

    }


    .scpaint-content-section,
    .scpaint-preparation,
    .scpaint-why {

        scroll-margin-top: 85px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    html,
    body {

        overflow-x: hidden;

    }


    .scpaint-container {

        width:
            calc(100% - 24px);

        max-width:
            calc(100% - 24px);

    }


    /* HERO */

    .scpaint-hero {

        min-height: 600px;

    }


    .scpaint-hero-inner {

        padding:
            95px 0 55px;

    }


    .scpaint-hero h1 {

        font-size:
            clamp(52px,16vw,76px);

    }


    .scpaint-hero-content > p {

        font-size: 14px;

    }


    .scpaint-hero-actions {

        flex-direction: column;

    }


    .scpaint-btn-primary,
    .scpaint-btn-secondary {

        width: 100%;

    }


    .scpaint-breadcrumb {

        width: 100%;

        justify-content: center;

    }


    /* PAGE */

    .scpaint-page {

        padding:
            70px 0 95px;

    }


    .scpaint-content {

        gap: 17px;

    }


    .scpaint-content-section {

        padding:
            24px 18px;

        border-radius: 20px;

    }


    .scpaint-section-heading h2,
    .scpaint-split-heading h2,
    .scpaint-preparation h2,
    .scpaint-why h2,
    .scpaint-service-area h2,
    .scpaint-final h2 {

        font-size:
            clamp(35px,10.5vw,47px);

    }


    .scpaint-content-section > p,
    .scpaint-preparation > p,
    .scpaint-service-area p,
    .scpaint-final p {

        font-size: 14px;

    }


    .scpaint-lead {

        font-size:
            16px !important;

    }


    /* FEATURE IMAGE */

    .scpaint-feature-image {

        height: 390px;

        border-radius: 20px;

    }


    .scpaint-feature-image figcaption {

        left: 13px;
        right: 13px;
        bottom: 13px;

    }


    /* SPLIT */

    .scpaint-split-heading {

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

        gap: 8px;

    }


    .scpaint-section-number {

        font-size: 38px;

    }


    /* DETAILS */

    .scpaint-detail-grid {

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

    }


    .scpaint-image-card {

        height: 390px;

        border-radius: 20px;

    }


    .scpaint-image-card-content {

        left: 18px;
        right: 18px;
        bottom: 18px;

    }


    /* CHECKLIST */

    .scpaint-check-list {

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

    }


    /* PREPARATION */

    .scpaint-preparation {

        padding:
            25px 18px;

        border-radius: 20px;

    }


    .scpaint-preparation-top > span {

        width: 50px;
        height: 50px;

        flex-basis: 50px;

    }


    .scpaint-preparation-grid {

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

    }


    /* PROCESS */

    .scpaint-process-item {

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

        gap: 13px;

    }


    .scpaint-process-marker > span {

        width: 44px;
        height: 44px;

    }


    .scpaint-process-marker::after {

        top: 48px;

    }


    /* WHY */

    .scpaint-why {

        padding:
            25px 18px;

        border-radius: 20px;

    }


    .scpaint-why-grid {

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

    }


    .scpaint-why-heading > span {

        width: 50px;
        height: 50px;

        flex-basis: 50px;

    }


    /* AREA */

    .scpaint-service-area {

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

        padding:
            25px 18px;

        border-radius: 20px;

    }


    .scpaint-service-area-radius {

        width: 140px;
        height: 140px;

        margin:
            0 auto;

    }


    /* FINAL */

    .scpaint-final {

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

        gap: 26px;

        padding:
            26px 18px;

        border-radius: 20px;

    }


    .scpaint-final-actions {

        width: 100%;

        min-width: 0;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .scpaint-preparation-grid {

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

    }


    .scpaint-preparation-top,
    .scpaint-why-heading {

        display: block;

    }


    .scpaint-preparation-top > span,
    .scpaint-why-heading > span {

        margin-top: 18px;

    }


    .scpaint-feature-image {

        height: 340px;

    }


    .scpaint-image-card {

        height: 350px;

    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 350px) {

    .scpaint-container {

        width:
            calc(100% - 18px);

        max-width:
            calc(100% - 18px);

    }


    .scpaint-content-section,
    .scpaint-preparation,
    .scpaint-why,
    .scpaint-service-area,
    .scpaint-final {

        padding:
            21px 14px;

    }

}


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

.scpaint-page a:focus-visible,
.scpaint-page button:focus-visible,
.scpaint-hero a:focus-visible {

    outline:
        3px solid
        var(--scpaint-gold);

    outline-offset: 3px;

}


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

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

    .scpaint-reveal {

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;

    }

}


/* =========================================================
   SANTA CRUZ PAINTING
   FLOORING SERVICES

   UNIQUE PREFIX: scfloor-
========================================================= */

:root {

    --scfloor-dark: #07101d;
    --scfloor-dark-2: #0b1524;
    --scfloor-navy: #18243a;

    --scfloor-gold: #d0a054;
    --scfloor-gold-light: #f0cd86;
    --scfloor-copper: #b57a52;

    --scfloor-white: #ffffff;
    --scfloor-cream: #f4f2ec;

    --scfloor-text: #182133;
    --scfloor-muted: #707885;

    --scfloor-border:
        rgba(7,16,29,.08);

    --scfloor-sticky-top: 110px;

    --scfloor-ease:
        cubic-bezier(.22,1,.36,1);

}


/* =========================================================
   GLOBAL PROTECTION
========================================================= */

html,
body {

    width: 100%;
    max-width: 100%;

    overflow-x: clip;

}


.scfloor-hero,
.scfloor-page,
.scfloor-container,
.scfloor-layout,
.scfloor-sidebar,
.scfloor-content {

    min-width: 0;

    max-width: 100%;

}


.scfloor-hero *,
.scfloor-page *,
.scfloor-hero *::before,
.scfloor-hero *::after,
.scfloor-page *::before,
.scfloor-page *::after {

    box-sizing: border-box;

}


.scfloor-hero a,
.scfloor-page a {

    text-decoration: none;

}


.scfloor-page button {

    font-family: inherit;

}


/* =========================================================
   CONTAINER
========================================================= */

.scfloor-container {

    position: relative;

    z-index: 5;

    width:
        min(calc(100% - 40px),1450px);

    margin: 0 auto;

}


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

.scfloor-hero {

    position: relative;

    width: 100%;

    min-height: 580px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: #fff;

    background:
        var(--scfloor-dark);

    isolation: isolate;

}


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

.scfloor-hero-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        url("https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=2000&q=90");

    background-size: cover;

    background-position: center;

    transform:
        scale(1.035);

}


.scfloor-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(4,10,18,.98) 0%,
            rgba(7,16,29,.94) 39%,
            rgba(7,16,29,.73) 70%,
            rgba(7,16,29,.40) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,.03),
            rgba(0,0,0,.35)
        );

}


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

.scfloor-hero-decoration {

    position: absolute;

    z-index: 2;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

}


.scfloor-hero-decoration span {

    position: absolute;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(208,160,84,.48),
            transparent
        );

}


.scfloor-hero-decoration span:nth-child(1) {

    width: 48%;

    right: -7%;
    top: 26%;

    transform:
        rotate(-8deg);

}


.scfloor-hero-decoration span:nth-child(2) {

    width: 36%;

    right: 7%;
    top: 61%;

    transform:
        rotate(7deg);

}


.scfloor-hero-decoration span:nth-child(3) {

    width: 27%;

    left: -5%;
    bottom: 15%;

    transform:
        rotate(-5deg);

}


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

.scfloor-hero-inner {

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(250px,.35fr);

    align-items: end;

    gap: 75px;

    padding:
        115px 0 75px;

}


/* =========================================================
   EYEBROW
========================================================= */

.scfloor-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 13px;

    color:
        var(--scfloor-copper);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .07em;

    text-transform: uppercase;

}


.scfloor-eyebrow > span {

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color:
        var(--scfloor-dark);

    background:

        linear-gradient(
            145deg,
            var(--scfloor-gold-light),
            var(--scfloor-gold)
        );

}


.scfloor-eyebrow-light {

    color:
        var(--scfloor-gold-light);

}


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

.scfloor-hero h1 {

    max-width: 950px;

    margin:
        0 0 20px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(57px,7vw,104px);

    line-height: .88;

    letter-spacing: -.055em;

}


.scfloor-hero h1 em {

    display: block;

    color:
        var(--scfloor-gold-light);

    font-style: normal;

}


.scfloor-hero-content > p {

    max-width: 720px;

    margin:
        0 0 26px;

    color:
        rgba(255,255,255,.64);

    font-size: 15px;

    line-height: 1.72;

}


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

.scfloor-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 24px;

}


.scfloor-btn-primary,
.scfloor-btn-secondary {

    min-height: 53px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        0 18px;

    border-radius: 13px;

    font-size: 14px;

    font-weight: 800;

}


.scfloor-btn-primary {

    color:
        var(--scfloor-dark);

    background:

        linear-gradient(
            145deg,
            var(--scfloor-gold-light),
            var(--scfloor-gold)
        );

}


.scfloor-btn-primary > span {

    width: 31px;
    height: 31px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        rgba(255,255,255,.30);

}


.scfloor-btn-secondary {

    color: #fff;

    border:
        1px solid
        rgba(255,255,255,.15);

    background:
        rgba(255,255,255,.06);

    backdrop-filter:
        blur(10px);

}


/* =========================================================
   BREADCRUMB
========================================================= */

.scfloor-breadcrumb {

    display: inline-flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    min-height: 42px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 100px;

    background:
        rgba(255,255,255,.055);

    backdrop-filter:
        blur(12px);

}


.scfloor-breadcrumb a,
.scfloor-breadcrumb span,
.scfloor-breadcrumb i {

    font-size: 14px;

}


.scfloor-breadcrumb a {

    color: #fff;

}


.scfloor-breadcrumb span {

    color:
        rgba(255,255,255,.48);

}


.scfloor-breadcrumb i {

    color:
        var(--scfloor-gold);

}


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

.scfloor-hero-side {

    display: grid;

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

    gap: 20px;

}


.scfloor-hero-side-line {

    min-height: 180px;

    background:

        linear-gradient(
            transparent,
            var(--scfloor-gold),
            transparent
        );

}


.scfloor-hero-side small {

    display: block;

    margin-bottom: 8px;

    color:
        var(--scfloor-gold-light);

    font-size: 14px;

}


.scfloor-hero-side strong {

    display: block;

    color:
        rgba(255,255,255,.78);

    font-family:
        "Playfair Display",
        serif;

    font-size: 26px;

    line-height: 1.2;

}


.scfloor-hero-side-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 18px;

}


.scfloor-hero-side-meta span {

    min-height: 34px;

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
        0 9px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 100px;

    color:
        rgba(255,255,255,.55);

    background:
        rgba(255,255,255,.04);

    font-size: 14px;

}


.scfloor-hero-side-meta i {

    color:
        var(--scfloor-gold-light);

}


/* =========================================================
   PAGE

   overflow vertical stays visible so sticky can work.
========================================================= */

.scfloor-page {

    position: relative;

    width: 100%;

    overflow: visible;

    padding:
        100px 0 110px;

    background:

        radial-gradient(
            circle at 6% 15%,
            rgba(208,160,84,.10),
            transparent 25%
        ),

        linear-gradient(
            135deg,
            #fbfaf6,
            #f2f1eb
        );

    isolation: isolate;

}


/* =========================================================
   BACKGROUND
========================================================= */

.scfloor-page-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

}


.scfloor-bg-grid {

    position: absolute;

    inset: 0;

    opacity: .22;

    background-image:

        linear-gradient(
            rgba(24,36,58,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(24,36,58,.035) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

}


.scfloor-bg-orb {

    position: absolute;

    border:
        1px solid
        rgba(181,122,82,.10);

    border-radius: 50%;

}


.scfloor-bg-orb-one {

    width: 500px;
    height: 500px;

    right: -300px;
    top: 300px;

}


.scfloor-bg-orb-two {

    width: 360px;
    height: 360px;

    left: -220px;
    bottom: 12%;

}


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

.scfloor-layout {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(250px,305px)
        minmax(0,1fr);

    align-items: start;

    gap:
        clamp(35px,5vw,75px);

}


/* =========================================================
   DESKTOP STICKY SIDEBAR
========================================================= */

.scfloor-sidebar {

    position: sticky;

    top:
        var(--scfloor-sticky-top);

    align-self: start;

    width: 100%;

    z-index: 25;

}


/* =========================================================
   SIDEBAR INNER
========================================================= */

.scfloor-sidebar-inner {

    position: relative;

    width: 100%;

    max-height:
        calc(
            100dvh -
            var(--scfloor-sticky-top) -
            18px
        );

    overflow-x: hidden;
    overflow-y: auto;

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

    border-radius: 22px;

    background:
        rgba(255,255,255,.92);

    box-shadow:
        0 20px 45px
        rgba(7,16,29,.07);

    backdrop-filter:
        blur(16px);

    scrollbar-width: thin;

    scrollbar-color:
        rgba(181,122,82,.38)
        transparent;

}


.scfloor-sidebar-inner::-webkit-scrollbar {

    width: 5px;

}


.scfloor-sidebar-inner::-webkit-scrollbar-track {

    background: transparent;

}


.scfloor-sidebar-inner::-webkit-scrollbar-thumb {

    border-radius: 100px;

    background:
        rgba(181,122,82,.35);

}


.scfloor-sidebar-toggle {

    display: none;

}


/* =========================================================
   CURRENT SERVICE
========================================================= */

.scfloor-sidebar-service {

    display: grid;

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

    align-items: center;

    gap: 10px;

    padding: 16px;

    color: #fff;

    background:

        linear-gradient(
            135deg,
            var(--scfloor-dark),
            var(--scfloor-navy)
        );

}


.scfloor-sidebar-service > span {

    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    color:
        var(--scfloor-dark);

    background:
        var(--scfloor-gold-light);

}


.scfloor-sidebar-service small,
.scfloor-sidebar-service strong {

    display: block;

}


.scfloor-sidebar-service small {

    color:
        rgba(255,255,255,.50);

    font-size: 14px;

}


.scfloor-sidebar-service strong {

    color: #fff;

    font-size: 15px;

}


/* =========================================================
   SIDEBAR BLOCK
========================================================= */

.scfloor-sidebar-block {

    padding:
        17px 14px;

    border-bottom:
        1px solid
        rgba(7,16,29,.07);

}


.scfloor-sidebar-label {

    display: block;

    margin:
        0 5px 10px;

    color:
        var(--scfloor-muted);

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .05em;

}


/* =========================================================
   PAGE NAVIGATION
========================================================= */

.scfloor-page-nav {

    display: grid;

    gap: 4px;

}


.scfloor-nav-link {

    position: relative;

    min-height: 45px;

    display: grid;

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

    align-items: center;

    gap: 8px;

    padding:
        0 10px;

    border-radius: 11px;

    color:
        var(--scfloor-muted);

    font-size: 14px;

    font-weight: 700;

    transition:

        color .22s ease,
        background .22s ease,
        transform .22s
        var(--scfloor-ease);

}


.scfloor-nav-link > span {

    color:
        rgba(181,122,82,.58);

    font-family:
        "Playfair Display",
        serif;

    font-size: 14px;

}


.scfloor-nav-link:hover {

    color:
        var(--scfloor-dark);

    background:
        rgba(208,160,84,.075);

}


.scfloor-nav-link.active {

    color:
        var(--scfloor-dark);

    background:
        rgba(208,160,84,.12);

    transform:
        translateX(4px);

}


.scfloor-nav-link.active::after {

    content: "";

    position: absolute;

    right: 8px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--scfloor-copper);

}


/* =========================================================
   OTHER SERVICES
========================================================= */

.scfloor-other-services {

    display: grid;

    gap: 5px;

}


.scfloor-other-services > a {

    min-height: 46px;

    display: grid;

    grid-template-columns:
        32px minmax(0,1fr) 18px;

    align-items: center;

    gap: 8px;

    padding:
        0 8px;

    border-radius: 10px;

    color:
        var(--scfloor-text);

    font-size: 14px;

    transition:

        background .22s ease,
        transform .22s
        var(--scfloor-ease);

}


.scfloor-other-services > a:hover {

    transform:
        translateX(3px);

    background:
        rgba(7,16,29,.035);

}


.scfloor-other-services > a > i:first-child {

    color:
        var(--scfloor-copper);

}


.scfloor-other-services > a > i:last-child {

    color:
        rgba(7,16,29,.30);

    font-size: 12px;

}


/* =========================================================
   SIDEBAR CTA
========================================================= */

.scfloor-sidebar-cta {

    padding: 18px;

    color: #fff;

    background:

        linear-gradient(
            145deg,
            var(--scfloor-dark),
            #101e32
        );

}


.scfloor-sidebar-cta-icon {

    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    margin-bottom: 16px;

    border-radius: 12px;

    color:
        var(--scfloor-dark);

    background:
        var(--scfloor-gold-light);

}


.scfloor-sidebar-cta small,
.scfloor-sidebar-cta strong {

    display: block;

}


.scfloor-sidebar-cta small {

    color:
        var(--scfloor-gold);

    font-size: 14px;

}


.scfloor-sidebar-cta strong {

    margin:
        4px 0 15px;

    font-family:
        "Playfair Display",
        serif;

    font-size: 22px;

    line-height: 1.15;

}


.scfloor-sidebar-cta a {

    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    padding:
        0 11px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 10px;

    color: #fff;

    background:
        rgba(255,255,255,.05);

    font-size: 14px;

    font-weight: 700;

}


/* =========================================================
   CONTENT
========================================================= */

.scfloor-content {

    display: grid;

    gap: 26px;

}


/* =========================================================
   CONTENT SECTION
========================================================= */

.scfloor-content-section {

    scroll-margin-top:
        calc(
            var(--scfloor-sticky-top) +
            15px
        );

    padding:
        clamp(28px,4vw,48px);

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

    border-radius: 25px;

    background:
        rgba(255,255,255,.82);

    box-shadow:
        0 20px 50px
        rgba(7,16,29,.055);

}


/* =========================================================
   HEADINGS
========================================================= */

.scfloor-section-heading {

    max-width: 850px;

    margin-bottom: 24px;

}


.scfloor-section-heading h2,
.scfloor-split-heading h2,
.scfloor-preparation h2,
.scfloor-design-section h2,
.scfloor-why h2,
.scfloor-service-area h2,
.scfloor-final h2 {

    margin: 0;

    color:
        var(--scfloor-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(39px,4vw,61px);

    line-height: .98;

    letter-spacing: -.04em;

}


.scfloor-section-heading h2 span,
.scfloor-split-heading h2 span,
.scfloor-preparation h2 span,
.scfloor-design-section h2 span,
.scfloor-service-area h2 span {

    display: block;

    color:
        var(--scfloor-copper);

}


/* =========================================================
   TEXT
========================================================= */

.scfloor-content-section > p,
.scfloor-preparation > p,
.scfloor-design-section p,
.scfloor-service-area p {

    max-width: 900px;

    color:
        var(--scfloor-muted);

    font-size: 15px;

    line-height: 1.76;

}


.scfloor-content-section > p + p,
.scfloor-preparation > p + p {

    margin-top: 15px;

}


.scfloor-lead {

    color:
        var(--scfloor-text) !important;

    font-size:
        17px !important;

    font-weight: 600;

}


/* =========================================================
   FEATURE STRIP
========================================================= */

.scfloor-feature-strip {

    display: grid;

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

    gap: 8px;

    margin-top: 30px;

}


.scfloor-feature-strip > div {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 12px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 14px;

    background:
        #f8f7f2;

}


.scfloor-feature-strip > div > span {

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color:
        var(--scfloor-copper);

    background:
        rgba(208,160,84,.11);

}


.scfloor-feature-strip small,
.scfloor-feature-strip strong {

    display: block;

    font-size: 14px;

}


.scfloor-feature-strip small {

    color:
        var(--scfloor-muted);

}


.scfloor-feature-strip strong {

    color:
        var(--scfloor-dark);

}


/* =========================================================
   FEATURE IMAGE
========================================================= */

.scfloor-feature-image {

    position: relative;

    width: 100%;

    height:
        clamp(390px,48vw,620px);

    overflow: hidden;

    margin: 0;

    border-radius: 25px;

    background:
        #d9d7d0;

    box-shadow:
        0 24px 55px
        rgba(7,16,29,.10);

}


.scfloor-feature-image > img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s
        var(--scfloor-ease);

}


.scfloor-feature-image:hover > img {

    transform:
        scale(1.035);

}


.scfloor-feature-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            transparent 55%,
            rgba(7,16,29,.78)
        );

}


.scfloor-feature-image figcaption {

    position: absolute;

    z-index: 4;

    left: 20px;
    right: 20px;
    bottom: 20px;

    display: flex;

    align-items: center;

    gap: 11px;

    color: #fff;

}


.scfloor-feature-image figcaption > span {

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    color:
        var(--scfloor-dark);

    background:
        var(--scfloor-gold-light);

}


.scfloor-feature-image small,
.scfloor-feature-image strong {

    display: block;

}


.scfloor-feature-image small {

    color:
        var(--scfloor-gold-light);

    font-size: 14px;

}


.scfloor-feature-image strong {

    margin-top: 2px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(19px,2vw,27px);

}


/* =========================================================
   SPLIT HEADING
========================================================= */

.scfloor-split-heading {

    display: grid;

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

    align-items: start;

    gap: 18px;

    margin-bottom: 22px;

}


.scfloor-section-number {

    color:
        var(--scfloor-copper);

    font-family:
        "Playfair Display",
        serif;

    font-size: 53px;

    line-height: .9;

}


.scfloor-split-heading small {

    display: block;

    margin-bottom: 6px;

    color:
        var(--scfloor-copper);

    font-size: 14px;

    font-weight: 700;

}


/* =========================================================
   DETAIL GRID
========================================================= */

.scfloor-detail-grid {

    display: grid;

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

    gap: 9px;

    margin-top: 28px;

}


.scfloor-detail-grid article {

    padding: 20px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 17px;

    background:
        #f8f7f3;

    transition:

        transform .3s
        var(--scfloor-ease),

        box-shadow .3s ease;

}


.scfloor-detail-grid article:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 30px
        rgba(7,16,29,.06);

}


.scfloor-detail-grid article > span {

    width: 45px;
    height: 45px;

    display: grid;

    place-items: center;

    margin-bottom: 19px;

    border-radius: 13px;

    color:
        var(--scfloor-copper);

    background:
        rgba(208,160,84,.11);

}


.scfloor-detail-grid h3 {

    margin:
        0 0 7px;

    color:
        var(--scfloor-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 23px;

}


.scfloor-detail-grid p {

    margin: 0;

    color:
        var(--scfloor-muted);

    font-size: 14px;

    line-height: 1.6;

}


/* =========================================================
   IMAGE CARD
========================================================= */

.scfloor-image-card {

    position: relative;

    height: 440px;

    overflow: hidden;

    border-radius: 25px;

    background:
        var(--scfloor-dark);

}


.scfloor-image-card > img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


.scfloor-image-card-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(7,16,29,.89),
            rgba(7,16,29,.18)
        );

}


.scfloor-image-card-content {

    position: absolute;

    z-index: 3;

    left: 28px;
    bottom: 28px;

    max-width: 560px;

    color: #fff;

}


.scfloor-image-card-content small {

    display: block;

    margin-bottom: 6px;

    color:
        var(--scfloor-gold-light);

    font-size: 14px;

}


.scfloor-image-card-content strong {

    display: block;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(31px,3.4vw,50px);

    line-height: 1;

}


/* =========================================================
   PREPARATION
========================================================= */

.scfloor-preparation {

    scroll-margin-top:
        calc(
            var(--scfloor-sticky-top) +
            15px
        );

    overflow: hidden;

    padding:
        clamp(30px,4vw,48px);

    border-radius: 25px;

    color: #fff;

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(208,160,84,.14),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            var(--scfloor-dark),
            #101e32
        );

}


.scfloor-preparation-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 25px;

}


.scfloor-preparation-top small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--scfloor-gold);

    font-size: 14px;

}


.scfloor-preparation h2 {

    color: #fff;

}


.scfloor-preparation h2 span {

    color:
        var(--scfloor-gold-light);

}


.scfloor-preparation-top > span {

    width: 62px;
    height: 62px;

    flex: 0 0 62px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    color:
        var(--scfloor-dark);

    background:
        var(--scfloor-gold-light);

    font-size: 20px;

}


.scfloor-preparation > p {

    color:
        rgba(255,255,255,.55);

}


/* =========================================================
   PREPARATION GRID
========================================================= */

.scfloor-preparation-grid {

    display: grid;

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

    gap: 7px;

    margin-top: 28px;

}


.scfloor-preparation-grid > div {

    padding: 16px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 15px;

    background:
        rgba(255,255,255,.035);

}


.scfloor-preparation-grid strong {

    display: block;

    color:
        var(--scfloor-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size: 25px;

}


.scfloor-preparation-grid span {

    display: block;

    margin-top: 7px;

    color:
        rgba(255,255,255,.65);

    font-size: 14px;

}


/* =========================================================
   CHECK LIST
========================================================= */

.scfloor-check-list {

    display: grid;

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

    gap: 8px;

    margin-top: 27px;

}


.scfloor-check-list > div {

    min-height: 57px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        9px 12px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 13px;

    color:
        var(--scfloor-text);

    background:
        #f8f7f3;

    font-size: 14px;

    font-weight: 700;

}


.scfloor-check-list > div > span {

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color:
        var(--scfloor-copper);

    background:
        rgba(208,160,84,.11);

}


/* =========================================================
   DESIGN SECTION
========================================================= */

.scfloor-design-section {

    overflow: hidden;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(320px,.72fr);

    gap: 45px;

    padding:
        clamp(30px,4vw,48px);

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 25px;

    background:

        linear-gradient(
            135deg,
            #ffffff,
            #f2f0e9
        );

}


.scfloor-design-copy > small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--scfloor-copper);

    font-size: 14px;

}


.scfloor-design-points {

    display: grid;

    gap: 8px;

}


.scfloor-design-points > div {

    display: grid;

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

    gap: 11px;

    padding: 14px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 15px;

    background:
        rgba(255,255,255,.72);

}


.scfloor-design-points > div > span {

    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color:
        var(--scfloor-copper);

    background:
        rgba(208,160,84,.11);

}


.scfloor-design-points strong {

    color:
        var(--scfloor-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 19px;

}


.scfloor-design-points p {

    margin:
        4px 0 0;

    font-size: 14px;

    line-height: 1.5;

}


/* =========================================================
   PROCESS
========================================================= */

.scfloor-process {

    display: grid;

    margin-top: 30px;

}


.scfloor-process-item {

    display: grid;

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

    gap: 20px;

    min-height: 150px;

}


.scfloor-process-marker {

    position: relative;

    display: flex;

    justify-content: center;

}


.scfloor-process-marker::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 57px;
    bottom: 0;

    width: 1px;

    background:

        linear-gradient(
            var(--scfloor-gold),
            rgba(181,122,82,.08)
        );

}


.scfloor-process-item:last-child
.scfloor-process-marker::after {

    display: none;

}


.scfloor-process-marker > span {

    position: relative;

    z-index: 2;

    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        var(--scfloor-dark);

    background:

        linear-gradient(
            145deg,
            var(--scfloor-gold-light),
            var(--scfloor-gold)
        );

    font-family:
        "Playfair Display",
        serif;

    font-size: 16px;

}


.scfloor-process-item > div:last-child {

    padding:
        2px 0 30px;

}


.scfloor-process-item small {

    color:
        var(--scfloor-copper);

    font-size: 14px;

}


.scfloor-process-item h3 {

    margin:
        3px 0 7px;

    color:
        var(--scfloor-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 25px;

}


.scfloor-process-item p {

    max-width: 720px;

    margin: 0;

    color:
        var(--scfloor-muted);

    font-size: 14px;

    line-height: 1.65;

}


/* =========================================================
   WHY CHOOSE
========================================================= */

.scfloor-why {

    scroll-margin-top:
        calc(
            var(--scfloor-sticky-top) +
            15px
        );

    overflow: hidden;

    padding:
        clamp(30px,4vw,48px);

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 25px;

    background: #fff;

}


.scfloor-why-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 28px;

}


.scfloor-why-heading small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--scfloor-copper);

    font-size: 14px;

}


.scfloor-why h2 span {

    display: block;

    color:
        var(--scfloor-copper);

}


.scfloor-why-heading > span {

    width: 61px;
    height: 61px;

    flex: 0 0 61px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    color:
        var(--scfloor-dark);

    background:
        var(--scfloor-gold-light);

    font-size: 20px;

}


.scfloor-why-grid {

    display: grid;

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

    gap: 8px;

}


.scfloor-why-grid article {

    padding: 20px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 16px;

    background:
        #f8f7f3;

}


.scfloor-why-grid article > span {

    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    margin-bottom: 18px;

    border-radius: 12px;

    color:
        var(--scfloor-copper);

    background:
        rgba(208,160,84,.11);

}


.scfloor-why-grid strong {

    display: block;

    color:
        var(--scfloor-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 21px;

}


.scfloor-why-grid p {

    margin:
        7px 0 0;

    color:
        var(--scfloor-muted);

    font-size: 14px;

    line-height: 1.58;

}


/* =========================================================
   SERVICE AREA
========================================================= */

.scfloor-service-area {

    display: grid;

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

    align-items: center;

    gap: 35px;

    padding:
        clamp(30px,4vw,45px);

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 25px;

    background:

        linear-gradient(
            135deg,
            #fff,
            #f2f0e9
        );

}


.scfloor-service-area-content > small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--scfloor-copper);

    font-size: 14px;

}


.scfloor-city-list {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 18px;

}


.scfloor-city-list span {

    min-height: 37px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        0 10px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 100px;

    color:
        var(--scfloor-text);

    background: #fff;

    font-size: 14px;

}


.scfloor-city-list i {

    color:
        var(--scfloor-copper);

}


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

.scfloor-service-area-radius {

    width: 165px;
    height: 165px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border:
        1px solid
        rgba(181,122,82,.18);

    border-radius: 50%;

    color: #fff;

    background:

        linear-gradient(
            145deg,
            var(--scfloor-dark),
            var(--scfloor-navy)
        );

    box-shadow:
        0 18px 40px
        rgba(7,16,29,.14);

}


.scfloor-service-area-radius strong {

    color:
        var(--scfloor-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size: 50px;

    line-height: 1;

}


.scfloor-service-area-radius span {

    color:
        rgba(255,255,255,.55);

    font-size: 14px;

    line-height: 1.15;

}


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

.scfloor-final {

    display: grid;

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

    align-items: center;

    gap: 45px;

    overflow: hidden;

    padding:
        clamp(31px,4vw,48px);

    border-radius: 25px;

    color:
        var(--scfloor-dark);

    background:

        linear-gradient(
            135deg,
            var(--scfloor-gold-light),
            var(--scfloor-gold)
        );

}


.scfloor-final small {

    display: block;

    margin-bottom: 6px;

    color:
        rgba(7,16,29,.58);

    font-size: 14px;

    font-weight: 700;

}


.scfloor-final h2 span {

    display: block;

}


.scfloor-final p {

    max-width: 700px;

    margin:
        14px 0 0;

    color:
        rgba(7,16,29,.68);

    font-size: 15px;

    line-height: 1.65;

}


.scfloor-final-actions {

    display: grid;

    gap: 8px;

    min-width: 225px;

}


.scfloor-final-primary,
.scfloor-final-phone {

    min-height: 51px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        0 16px;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 800;

}


.scfloor-final-primary {

    color: #fff;

    background:
        var(--scfloor-dark);

}


.scfloor-final-phone {

    color:
        var(--scfloor-dark);

    border:
        1px solid
        rgba(7,16,29,.13);

    background:
        rgba(255,255,255,.23);

}


/* =========================================================
   REVEAL
========================================================= */

.scfloor-reveal {

    opacity: 0;

    transform:
        translateY(24px);

    transition:

        opacity .7s ease,
        transform .7s
        var(--scfloor-ease);

}


.scfloor-reveal.scfloor-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   SMALL DESKTOP / TABLET LANDSCAPE
========================================================= */

@media (max-width: 1050px) and (min-width: 901px) {

    .scfloor-layout {

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

        gap: 27px;

    }


    .scfloor-feature-strip {

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

    }


    .scfloor-preparation-grid {

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

    }


    .scfloor-design-section {

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

    }

}


/* =========================================================
   TABLET / MOBILE
   DISABLE STICKY
========================================================= */

@media (max-width: 900px) {

    .scfloor-hero-inner {

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

        gap: 30px;

    }


    .scfloor-hero-side {

        display: none;

    }


    .scfloor-layout {

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

        gap: 24px;

    }


    /* =====================================================
       DISABLE STICKY
    ====================================================== */

    .scfloor-sidebar {

        position: relative !important;

        top: auto !important;

        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        width: 100%;

        align-self: auto;

        z-index: 40;

    }


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

    .scfloor-sidebar-toggle {

        width: 100%;

        min-height: 56px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 15px;

        padding:
            0 16px;

        border:
            1px solid
            rgba(7,16,29,.08);

        border-radius: 15px;

        color: #fff;

        background:

            linear-gradient(
                135deg,
                var(--scfloor-dark),
                var(--scfloor-navy)
            );

        box-shadow:
            0 12px 28px
            rgba(7,16,29,.10);

        font-size: 14px;

        font-weight: 800;

        cursor: pointer;

    }


    .scfloor-sidebar-toggle > span {

        display: flex;

        align-items: center;

        gap: 9px;

    }


    .scfloor-sidebar-toggle > i {

        transition:
            transform .25s ease;

    }


    .scfloor-sidebar.is-open
    .scfloor-sidebar-toggle > i {

        transform:
            rotate(180deg);

    }


    /* =====================================================
       MOBILE SIDEBAR CONTENT
    ====================================================== */

    .scfloor-sidebar-inner {

        position: relative;

        top: auto;

        width: 100%;

        max-height: 0;

        overflow: hidden;

        margin-top: 7px;

        opacity: 0;

        transform:
            translateY(-7px);

        border-radius: 18px;

        transition:

            max-height .45s
            var(--scfloor-ease),

            opacity .25s ease,

            transform .35s
            var(--scfloor-ease);

    }


    .scfloor-sidebar.is-open
    .scfloor-sidebar-inner {

        max-height: 1300px;

        overflow-y: auto;

        opacity: 1;

        transform:
            translateY(0);

    }


    .scfloor-sidebar-service {

        display: none;

    }


    .scfloor-content-section,
    .scfloor-preparation,
    .scfloor-why {

        scroll-margin-top: 85px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    html,
    body {

        overflow-x: hidden;

    }


    .scfloor-container {

        width:
            calc(100% - 24px);

        max-width:
            calc(100% - 24px);

    }


    /* HERO */

    .scfloor-hero {

        min-height: 600px;

    }


    .scfloor-hero-inner {

        padding:
            95px 0 55px;

    }


    .scfloor-hero h1 {

        font-size:
            clamp(52px,16vw,76px);

    }


    .scfloor-hero-content > p {

        font-size: 14px;

    }


    .scfloor-hero-actions {

        flex-direction: column;

    }


    .scfloor-btn-primary,
    .scfloor-btn-secondary {

        width: 100%;

    }


    .scfloor-breadcrumb {

        width: 100%;

        justify-content: center;

    }


    /* PAGE */

    .scfloor-page {

        padding:
            70px 0 95px;

    }


    .scfloor-content {

        gap: 17px;

    }


    .scfloor-content-section {

        padding:
            24px 18px;

        border-radius: 20px;

    }


    .scfloor-section-heading h2,
    .scfloor-split-heading h2,
    .scfloor-preparation h2,
    .scfloor-design-section h2,
    .scfloor-why h2,
    .scfloor-service-area h2,
    .scfloor-final h2 {

        font-size:
            clamp(35px,10.5vw,47px);

    }


    .scfloor-content-section > p,
    .scfloor-preparation > p,
    .scfloor-design-section p,
    .scfloor-service-area p,
    .scfloor-final p {

        font-size: 14px;

    }


    .scfloor-lead {

        font-size:
            16px !important;

    }


    /* FEATURE IMAGE */

    .scfloor-feature-image {

        height: 390px;

        border-radius: 20px;

    }


    .scfloor-feature-image figcaption {

        left: 13px;
        right: 13px;
        bottom: 13px;

    }


    /* SPLIT */

    .scfloor-split-heading {

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

        gap: 8px;

    }


    .scfloor-section-number {

        font-size: 38px;

    }


    /* DETAIL GRID */

    .scfloor-detail-grid {

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

    }


    /* IMAGE CARD */

    .scfloor-image-card {

        height: 390px;

        border-radius: 20px;

    }


    .scfloor-image-card-content {

        left: 18px;
        right: 18px;
        bottom: 18px;

    }


    /* PREPARATION */

    .scfloor-preparation {

        padding:
            25px 18px;

        border-radius: 20px;

    }


    .scfloor-preparation-top > span {

        width: 50px;
        height: 50px;

        flex-basis: 50px;

    }


    .scfloor-preparation-grid {

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

    }


    /* CHECK LIST */

    .scfloor-check-list {

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

    }


    /* DESIGN */

    .scfloor-design-section {

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

        gap: 25px;

        padding:
            25px 18px;

        border-radius: 20px;

    }


    /* PROCESS */

    .scfloor-process-item {

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

        gap: 13px;

    }


    .scfloor-process-marker > span {

        width: 44px;
        height: 44px;

    }


    .scfloor-process-marker::after {

        top: 48px;

    }


    /* WHY */

    .scfloor-why {

        padding:
            25px 18px;

        border-radius: 20px;

    }


    .scfloor-why-grid {

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

    }


    .scfloor-why-heading > span {

        width: 50px;
        height: 50px;

        flex-basis: 50px;

    }


    /* AREA */

    .scfloor-service-area {

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

        padding:
            25px 18px;

        border-radius: 20px;

    }


    .scfloor-service-area-radius {

        width: 140px;
        height: 140px;

        margin:
            0 auto;

    }


    /* FINAL CTA */

    .scfloor-final {

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

        gap: 26px;

        padding:
            26px 18px;

        border-radius: 20px;

    }


    .scfloor-final-actions {

        width: 100%;

        min-width: 0;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .scfloor-preparation-grid {

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

    }


    .scfloor-preparation-top,
    .scfloor-why-heading {

        display: block;

    }


    .scfloor-preparation-top > span,
    .scfloor-why-heading > span {

        margin-top: 18px;

    }


    .scfloor-feature-image {

        height: 340px;

    }


    .scfloor-image-card {

        height: 350px;

    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 350px) {

    .scfloor-container {

        width:
            calc(100% - 18px);

        max-width:
            calc(100% - 18px);

    }


    .scfloor-content-section,
    .scfloor-preparation,
    .scfloor-design-section,
    .scfloor-why,
    .scfloor-service-area,
    .scfloor-final {

        padding:
            21px 14px;

    }

}


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

.scfloor-page a:focus-visible,
.scfloor-page button:focus-visible,
.scfloor-hero a:focus-visible {

    outline:
        3px solid
        var(--scfloor-gold);

    outline-offset: 3px;

}


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

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

    .scfloor-reveal {

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;

    }

}

/* =========================================================
   SANTA CRUZ PAINTING
   DRYWALL & TEXTURE SERVICES

   UNIQUE PREFIX: scdry-
========================================================= */

:root {

    --scdry-dark: #07101d;
    --scdry-dark-2: #0b1524;
    --scdry-navy: #18243a;

    --scdry-gold: #d0a054;
    --scdry-gold-light: #f0cd86;
    --scdry-copper: #b57a52;

    --scdry-white: #ffffff;
    --scdry-cream: #f4f2ec;

    --scdry-text: #182133;
    --scdry-muted: #707885;

    --scdry-border: rgba(7,16,29,.08);

    --scdry-sticky-top: 110px;

    --scdry-ease:
        cubic-bezier(.22,1,.36,1);

}


/* =========================================================
   GLOBAL PROTECTION
========================================================= */

html,
body {

    width: 100%;
    max-width: 100%;

    overflow-x: clip;

}


.scdry-hero,
.scdry-page,
.scdry-container,
.scdry-layout,
.scdry-sidebar,
.scdry-content {

    min-width: 0;
    max-width: 100%;

}


.scdry-hero *,
.scdry-page *,
.scdry-hero *::before,
.scdry-hero *::after,
.scdry-page *::before,
.scdry-page *::after {

    box-sizing: border-box;

}


.scdry-hero a,
.scdry-page a {

    text-decoration: none;

}


.scdry-page button {

    font-family: inherit;

}


/* =========================================================
   CONTAINER
========================================================= */

.scdry-container {

    position: relative;

    z-index: 5;

    width:
        min(calc(100% - 40px),1450px);

    margin: 0 auto;

}


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

.scdry-hero {

    position: relative;

    width: 100%;

    min-height: 580px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: #fff;

    background:
        var(--scdry-dark);

    isolation: isolate;

}


.scdry-hero-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        url("https://santacruzpaintingllc.com/assets/img/service/Drywall%20Texture%20Services.png");

    background-size: cover;

    background-position: center;

    transform: scale(1.035);

}


.scdry-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(4,10,18,.98) 0%,
            rgba(7,16,29,.94) 39%,
            rgba(7,16,29,.74) 70%,
            rgba(7,16,29,.42) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,.04),
            rgba(0,0,0,.35)
        );

}


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

.scdry-hero-decoration {

    position: absolute;

    z-index: 2;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

}


.scdry-hero-decoration span {

    position: absolute;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(208,160,84,.48),
            transparent
        );

}


.scdry-hero-decoration span:nth-child(1) {

    width: 48%;

    right: -7%;
    top: 26%;

    transform: rotate(-8deg);

}


.scdry-hero-decoration span:nth-child(2) {

    width: 36%;

    right: 7%;
    top: 61%;

    transform: rotate(7deg);

}


.scdry-hero-decoration span:nth-child(3) {

    width: 27%;

    left: -5%;
    bottom: 15%;

    transform: rotate(-5deg);

}


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

.scdry-hero-inner {

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(250px,.35fr);

    align-items: end;

    gap: 75px;

    padding:
        115px 0 75px;

}


/* =========================================================
   EYEBROW
========================================================= */

.scdry-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 13px;

    color:
        var(--scdry-copper);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .07em;

    text-transform: uppercase;

}


.scdry-eyebrow > span {

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color:
        var(--scdry-dark);

    background:

        linear-gradient(
            145deg,
            var(--scdry-gold-light),
            var(--scdry-gold)
        );

}


.scdry-eyebrow-light {

    color:
        var(--scdry-gold-light);

}


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

.scdry-hero h1 {

    max-width: 950px;

    margin:
        0 0 20px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(57px,7vw,104px);

    line-height: .88;

    letter-spacing: -.055em;

}


.scdry-hero h1 em {

    display: block;

    color:
        var(--scdry-gold-light);

    font-style: normal;

}


.scdry-hero-content > p {

    max-width: 720px;

    margin:
        0 0 26px;

    color:
        rgba(255,255,255,.64);

    font-size: 15px;

    line-height: 1.72;

}


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

.scdry-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 24px;

}


.scdry-btn-primary,
.scdry-btn-secondary {

    min-height: 53px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        0 18px;

    border-radius: 13px;

    font-size: 14px;

    font-weight: 800;

}


.scdry-btn-primary {

    color:
        var(--scdry-dark);

    background:

        linear-gradient(
            145deg,
            var(--scdry-gold-light),
            var(--scdry-gold)
        );

}


.scdry-btn-primary > span {

    width: 31px;
    height: 31px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        rgba(255,255,255,.30);

}


.scdry-btn-secondary {

    color: #fff;

    border:
        1px solid
        rgba(255,255,255,.15);

    background:
        rgba(255,255,255,.06);

    backdrop-filter: blur(10px);

}


/* =========================================================
   BREADCRUMB
========================================================= */

.scdry-breadcrumb {

    display: inline-flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    min-height: 42px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 100px;

    background:
        rgba(255,255,255,.055);

    backdrop-filter: blur(12px);

}


.scdry-breadcrumb a,
.scdry-breadcrumb span,
.scdry-breadcrumb i {

    font-size: 14px;

}


.scdry-breadcrumb a {

    color: #fff;

}


.scdry-breadcrumb span {

    color:
        rgba(255,255,255,.48);

}


.scdry-breadcrumb i {

    color:
        var(--scdry-gold);

}


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

.scdry-hero-side {

    display: grid;

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

    gap: 20px;

}


.scdry-hero-side-line {

    min-height: 180px;

    background:

        linear-gradient(
            transparent,
            var(--scdry-gold),
            transparent
        );

}


.scdry-hero-side small {

    display: block;

    margin-bottom: 8px;

    color:
        var(--scdry-gold-light);

    font-size: 14px;

}


.scdry-hero-side strong {

    display: block;

    color:
        rgba(255,255,255,.78);

    font-family:
        "Playfair Display",
        serif;

    font-size: 26px;

    line-height: 1.2;

}


.scdry-hero-side-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 18px;

}


.scdry-hero-side-meta span {

    min-height: 34px;

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
        0 9px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 100px;

    color:
        rgba(255,255,255,.55);

    background:
        rgba(255,255,255,.04);

    font-size: 14px;

}


.scdry-hero-side-meta i {

    color:
        var(--scdry-gold-light);

}


/* =========================================================
   PAGE
========================================================= */

.scdry-page {

    position: relative;

    width: 100%;

    /*
       IMPORTANT:
       vertical overflow remains visible
       so position:sticky works.
    */
    overflow: visible;

    padding:
        100px 0 110px;

    background:

        radial-gradient(
            circle at 6% 15%,
            rgba(208,160,84,.10),
            transparent 25%
        ),

        linear-gradient(
            135deg,
            #fbfaf6,
            #f2f1eb
        );

    isolation: isolate;

}


/* =========================================================
   PAGE BACKGROUND
========================================================= */

.scdry-page-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

}


.scdry-bg-grid {

    position: absolute;

    inset: 0;

    opacity: .22;

    background-image:

        linear-gradient(
            rgba(24,36,58,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(24,36,58,.035) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

}


.scdry-bg-orb {

    position: absolute;

    border:
        1px solid
        rgba(181,122,82,.10);

    border-radius: 50%;

}


.scdry-bg-orb-one {

    width: 500px;
    height: 500px;

    right: -300px;
    top: 300px;

}


.scdry-bg-orb-two {

    width: 360px;
    height: 360px;

    left: -220px;
    bottom: 12%;

}


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

.scdry-layout {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(250px,305px)
        minmax(0,1fr);

    align-items: start;

    gap:
        clamp(35px,5vw,75px);

}


/* =========================================================
   DESKTOP STICKY SIDEBAR
========================================================= */

.scdry-sidebar {

    position: sticky;

    top:
        var(--scdry-sticky-top);

    align-self: start;

    width: 100%;

    z-index: 25;

}


/* =========================================================
   SIDEBAR INNER
========================================================= */

.scdry-sidebar-inner {

    position: relative;

    width: 100%;

    max-height:
        calc(
            100dvh -
            var(--scdry-sticky-top) -
            18px
        );

    overflow-x: hidden;
    overflow-y: auto;

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

    border-radius: 22px;

    background:
        rgba(255,255,255,.92);

    box-shadow:
        0 20px 45px
        rgba(7,16,29,.07);

    backdrop-filter:
        blur(16px);

    scrollbar-width: thin;

    scrollbar-color:
        rgba(181,122,82,.38)
        transparent;

}


.scdry-sidebar-inner::-webkit-scrollbar {

    width: 5px;

}


.scdry-sidebar-inner::-webkit-scrollbar-track {

    background: transparent;

}


.scdry-sidebar-inner::-webkit-scrollbar-thumb {

    border-radius: 100px;

    background:
        rgba(181,122,82,.35);

}


.scdry-sidebar-toggle {

    display: none;

}


/* =========================================================
   CURRENT SERVICE
========================================================= */

.scdry-sidebar-service {

    display: grid;

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

    align-items: center;

    gap: 10px;

    padding: 16px;

    color: #fff;

    background:

        linear-gradient(
            135deg,
            var(--scdry-dark),
            var(--scdry-navy)
        );

}


.scdry-sidebar-service > span {

    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    color:
        var(--scdry-dark);

    background:
        var(--scdry-gold-light);

}


.scdry-sidebar-service small,
.scdry-sidebar-service strong {

    display: block;

}


.scdry-sidebar-service small {

    color:
        rgba(255,255,255,.50);

    font-size: 14px;

}


.scdry-sidebar-service strong {

    color: #fff;

    font-size: 15px;

}


/* =========================================================
   SIDEBAR BLOCK
========================================================= */

.scdry-sidebar-block {

    padding:
        17px 14px;

    border-bottom:
        1px solid
        rgba(7,16,29,.07);

}


.scdry-sidebar-label {

    display: block;

    margin:
        0 5px 10px;

    color:
        var(--scdry-muted);

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .05em;

}


/* =========================================================
   PAGE NAV
========================================================= */

.scdry-page-nav {

    display: grid;

    gap: 4px;

}


.scdry-nav-link {

    position: relative;

    min-height: 45px;

    display: grid;

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

    align-items: center;

    gap: 8px;

    padding:
        0 10px;

    border-radius: 11px;

    color:
        var(--scdry-muted);

    font-size: 14px;

    font-weight: 700;

    transition:

        color .22s ease,
        background .22s ease,
        transform .22s
        var(--scdry-ease);

}


.scdry-nav-link > span {

    color:
        rgba(181,122,82,.58);

    font-family:
        "Playfair Display",
        serif;

    font-size: 14px;

}


.scdry-nav-link:hover {

    color:
        var(--scdry-dark);

    background:
        rgba(208,160,84,.075);

}


.scdry-nav-link.active {

    color:
        var(--scdry-dark);

    background:
        rgba(208,160,84,.12);

    transform:
        translateX(4px);

}


.scdry-nav-link.active::after {

    content: "";

    position: absolute;

    right: 8px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--scdry-copper);

}


/* =========================================================
   OTHER SERVICES
========================================================= */

.scdry-other-services {

    display: grid;

    gap: 5px;

}


.scdry-other-services > a {

    min-height: 46px;

    display: grid;

    grid-template-columns:
        32px minmax(0,1fr) 18px;

    align-items: center;

    gap: 8px;

    padding:
        0 8px;

    border-radius: 10px;

    color:
        var(--scdry-text);

    font-size: 14px;

    transition:

        background .22s ease,
        transform .22s
        var(--scdry-ease);

}


.scdry-other-services > a:hover {

    transform:
        translateX(3px);

    background:
        rgba(7,16,29,.035);

}


.scdry-other-services > a > i:first-child {

    color:
        var(--scdry-copper);

}


.scdry-other-services > a > i:last-child {

    color:
        rgba(7,16,29,.30);

    font-size: 12px;

}


/* =========================================================
   SIDEBAR CTA
========================================================= */

.scdry-sidebar-cta {

    padding: 18px;

    color: #fff;

    background:

        linear-gradient(
            145deg,
            var(--scdry-dark),
            #101e32
        );

}


.scdry-sidebar-cta-icon {

    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    margin-bottom: 16px;

    border-radius: 12px;

    color:
        var(--scdry-dark);

    background:
        var(--scdry-gold-light);

}


.scdry-sidebar-cta small,
.scdry-sidebar-cta strong {

    display: block;

}


.scdry-sidebar-cta small {

    color:
        var(--scdry-gold);

    font-size: 14px;

}


.scdry-sidebar-cta strong {

    margin:
        4px 0 15px;

    font-family:
        "Playfair Display",
        serif;

    font-size: 22px;

    line-height: 1.15;

}


.scdry-sidebar-cta a {

    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    padding:
        0 11px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 10px;

    color: #fff;

    background:
        rgba(255,255,255,.05);

    font-size: 14px;

    font-weight: 700;

}


/* =========================================================
   CONTENT
========================================================= */

.scdry-content {

    display: grid;

    gap: 26px;

}


.scdry-content-section {

    scroll-margin-top:
        calc(
            var(--scdry-sticky-top) +
            15px
        );

    padding:
        clamp(28px,4vw,48px);

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

    border-radius: 25px;

    background:
        rgba(255,255,255,.82);

    box-shadow:
        0 20px 50px
        rgba(7,16,29,.055);

}


/* =========================================================
   HEADINGS
========================================================= */

.scdry-section-heading {

    max-width: 850px;

    margin-bottom: 24px;

}


.scdry-section-heading h2,
.scdry-split-heading h2,
.scdry-preparation h2,
.scdry-finish-section h2,
.scdry-why h2,
.scdry-service-area h2,
.scdry-final h2 {

    margin: 0;

    color:
        var(--scdry-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(39px,4vw,61px);

    line-height: .98;

    letter-spacing: -.04em;

}


.scdry-section-heading h2 span,
.scdry-split-heading h2 span,
.scdry-preparation h2 span,
.scdry-finish-section h2 span,
.scdry-service-area h2 span {

    display: block;

    color:
        var(--scdry-copper);

}


/* =========================================================
   TEXT
========================================================= */

.scdry-content-section > p,
.scdry-preparation > p,
.scdry-finish-section p,
.scdry-service-area p {

    max-width: 900px;

    color:
        var(--scdry-muted);

    font-size: 15px;

    line-height: 1.76;

}


.scdry-content-section > p + p,
.scdry-preparation > p + p {

    margin-top: 15px;

}


.scdry-lead {

    color:
        var(--scdry-text) !important;

    font-size:
        17px !important;

    font-weight: 600;

}


/* =========================================================
   FEATURE STRIP
========================================================= */

.scdry-feature-strip {

    display: grid;

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

    gap: 8px;

    margin-top: 30px;

}


.scdry-feature-strip > div {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 12px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 14px;

    background:
        #f8f7f2;

}


.scdry-feature-strip > div > span {

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color:
        var(--scdry-copper);

    background:
        rgba(208,160,84,.11);

}


.scdry-feature-strip small,
.scdry-feature-strip strong {

    display: block;

    font-size: 14px;

}


.scdry-feature-strip small {

    color:
        var(--scdry-muted);

}


.scdry-feature-strip strong {

    color:
        var(--scdry-dark);

}


/* =========================================================
   FEATURE IMAGE
========================================================= */

.scdry-feature-image {

    position: relative;

    width: 100%;

    height:
        clamp(390px,48vw,620px);

    overflow: hidden;

    margin: 0;

    border-radius: 25px;

    background:
        #d9d7d0;

    box-shadow:
        0 24px 55px
        rgba(7,16,29,.10);

}


.scdry-feature-image > img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s
        var(--scdry-ease);

}


.scdry-feature-image:hover > img {

    transform:
        scale(1.035);

}


.scdry-feature-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            transparent 55%,
            rgba(7,16,29,.78)
        );

}


.scdry-feature-image figcaption {

    position: absolute;

    z-index: 4;

    left: 20px;
    right: 20px;
    bottom: 20px;

    display: flex;

    align-items: center;

    gap: 11px;

    color: #fff;

}


.scdry-feature-image figcaption > span {

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    color:
        var(--scdry-dark);

    background:
        var(--scdry-gold-light);

}


.scdry-feature-image small,
.scdry-feature-image strong {

    display: block;

}


.scdry-feature-image small {

    color:
        var(--scdry-gold-light);

    font-size: 14px;

}


.scdry-feature-image strong {

    margin-top: 2px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(19px,2vw,27px);

}


/* =========================================================
   SPLIT HEADING
========================================================= */

.scdry-split-heading {

    display: grid;

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

    align-items: start;

    gap: 18px;

    margin-bottom: 22px;

}


.scdry-section-number {

    color:
        var(--scdry-copper);

    font-family:
        "Playfair Display",
        serif;

    font-size: 53px;

    line-height: .9;

}


.scdry-split-heading small {

    display: block;

    margin-bottom: 6px;

    color:
        var(--scdry-copper);

    font-size: 14px;

    font-weight: 700;

}


/* =========================================================
   DETAIL GRID
========================================================= */

.scdry-detail-grid {

    display: grid;

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

    gap: 9px;

    margin-top: 28px;

}


.scdry-detail-grid article {

    padding: 20px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 17px;

    background:
        #f8f7f3;

    transition:

        transform .3s
        var(--scdry-ease),

        box-shadow .3s ease;

}


.scdry-detail-grid article:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 30px
        rgba(7,16,29,.06);

}


.scdry-detail-grid article > span {

    width: 45px;
    height: 45px;

    display: grid;

    place-items: center;

    margin-bottom: 19px;

    border-radius: 13px;

    color:
        var(--scdry-copper);

    background:
        rgba(208,160,84,.11);

}


.scdry-detail-grid h3 {

    margin:
        0 0 7px;

    color:
        var(--scdry-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 23px;

}


.scdry-detail-grid p {

    margin: 0;

    color:
        var(--scdry-muted);

    font-size: 14px;

    line-height: 1.6;

}


/* =========================================================
   IMAGE CARD
========================================================= */

.scdry-image-card {

    position: relative;

    height: 440px;

    overflow: hidden;

    border-radius: 25px;

    background:
        var(--scdry-dark);

}


.scdry-image-card > img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.scdry-image-card-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(7,16,29,.90),
            rgba(7,16,29,.18)
        );

}


.scdry-image-card-content {

    position: absolute;

    z-index: 3;

    left: 28px;
    bottom: 28px;

    max-width: 600px;

    color: #fff;

}


.scdry-image-card-content small {

    display: block;

    margin-bottom: 6px;

    color:
        var(--scdry-gold-light);

    font-size: 14px;

}


.scdry-image-card-content strong {

    display: block;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(31px,3.4vw,50px);

    line-height: 1;

}


/* =========================================================
   TEXTURE GRID
========================================================= */

.scdry-texture-grid {

    display: grid;

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

    gap: 8px;

    margin-top: 28px;

}


.scdry-texture-grid > div {

    display: grid;

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

    gap: 11px;

    padding: 17px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 16px;

    background:
        #f8f7f3;

}


.scdry-texture-grid > div > span {

    width: 45px;
    height: 45px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color:
        var(--scdry-copper);

    background:
        rgba(208,160,84,.11);

}


.scdry-texture-grid strong {

    display: block;

    color:
        var(--scdry-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 20px;

}


.scdry-texture-grid p {

    margin:
        4px 0 0;

    color:
        var(--scdry-muted);

    font-size: 14px;

    line-height: 1.5;

}


/* =========================================================
   PREPARATION
========================================================= */

.scdry-preparation {

    scroll-margin-top:
        calc(
            var(--scdry-sticky-top) +
            15px
        );

    overflow: hidden;

    padding:
        clamp(30px,4vw,48px);

    border-radius: 25px;

    color: #fff;

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(208,160,84,.14),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            var(--scdry-dark),
            #101e32
        );

}


.scdry-preparation-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 25px;

}


.scdry-preparation-top small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--scdry-gold);

    font-size: 14px;

}


.scdry-preparation h2 {

    color: #fff;

}


.scdry-preparation h2 span {

    color:
        var(--scdry-gold-light);

}


.scdry-preparation-top > span {

    width: 62px;
    height: 62px;

    flex: 0 0 62px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    color:
        var(--scdry-dark);

    background:
        var(--scdry-gold-light);

    font-size: 20px;

}


.scdry-preparation > p {

    color:
        rgba(255,255,255,.55);

}


/* =========================================================
   PREPARATION GRID
========================================================= */

.scdry-preparation-grid {

    display: grid;

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

    gap: 7px;

    margin-top: 28px;

}


.scdry-preparation-grid > div {

    padding: 16px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 15px;

    background:
        rgba(255,255,255,.035);

}


.scdry-preparation-grid strong {

    display: block;

    color:
        var(--scdry-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size: 25px;

}


.scdry-preparation-grid span {

    display: block;

    margin-top: 7px;

    color:
        rgba(255,255,255,.65);

    font-size: 14px;

}


/* =========================================================
   FINISH SECTION
========================================================= */

.scdry-finish-section {

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(320px,.72fr);

    gap: 45px;

    padding:
        clamp(30px,4vw,48px);

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 25px;

    background:

        linear-gradient(
            135deg,
            #ffffff,
            #f2f0e9
        );

}


.scdry-finish-copy > small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--scdry-copper);

    font-size: 14px;

}


.scdry-finish-points {

    display: grid;

    gap: 8px;

}


.scdry-finish-points > div {

    display: grid;

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

    gap: 11px;

    padding: 14px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 15px;

    background:
        rgba(255,255,255,.75);

}


.scdry-finish-points > div > span {

    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color:
        var(--scdry-copper);

    background:
        rgba(208,160,84,.11);

}


.scdry-finish-points strong {

    display: block;

    color:
        var(--scdry-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 19px;

}


.scdry-finish-points p {

    margin:
        4px 0 0;

    font-size: 14px;

    line-height: 1.5;

}


/* =========================================================
   PROCESS
========================================================= */

.scdry-process {

    display: grid;

    margin-top: 30px;

}


.scdry-process-item {

    display: grid;

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

    gap: 20px;

    min-height: 150px;

}


.scdry-process-marker {

    position: relative;

    display: flex;

    justify-content: center;

}


.scdry-process-marker::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 57px;
    bottom: 0;

    width: 1px;

    background:

        linear-gradient(
            var(--scdry-gold),
            rgba(181,122,82,.08)
        );

}


.scdry-process-item:last-child
.scdry-process-marker::after {

    display: none;

}


.scdry-process-marker > span {

    position: relative;

    z-index: 2;

    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        var(--scdry-dark);

    background:

        linear-gradient(
            145deg,
            var(--scdry-gold-light),
            var(--scdry-gold)
        );

    font-family:
        "Playfair Display",
        serif;

    font-size: 16px;

}


.scdry-process-item > div:last-child {

    padding:
        2px 0 30px;

}


.scdry-process-item small {

    color:
        var(--scdry-copper);

    font-size: 14px;

}


.scdry-process-item h3 {

    margin:
        3px 0 7px;

    color:
        var(--scdry-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 25px;

}


.scdry-process-item p {

    max-width: 720px;

    margin: 0;

    color:
        var(--scdry-muted);

    font-size: 14px;

    line-height: 1.65;

}


/* =========================================================
   WHY CHOOSE
========================================================= */

.scdry-why {

    scroll-margin-top:
        calc(
            var(--scdry-sticky-top) +
            15px
        );

    padding:
        clamp(30px,4vw,48px);

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 25px;

    background: #fff;

}


.scdry-why-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 28px;

}


.scdry-why-heading small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--scdry-copper);

    font-size: 14px;

}


.scdry-why h2 span {

    display: block;

    color:
        var(--scdry-copper);

}


.scdry-why-heading > span {

    width: 61px;
    height: 61px;

    flex: 0 0 61px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    color:
        var(--scdry-dark);

    background:
        var(--scdry-gold-light);

    font-size: 20px;

}


.scdry-why-grid {

    display: grid;

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

    gap: 8px;

}


.scdry-why-grid article {

    padding: 20px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 16px;

    background:
        #f8f7f3;

}


.scdry-why-grid article > span {

    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    margin-bottom: 18px;

    border-radius: 12px;

    color:
        var(--scdry-copper);

    background:
        rgba(208,160,84,.11);

}


.scdry-why-grid strong {

    display: block;

    color:
        var(--scdry-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 21px;

}


.scdry-why-grid p {

    margin:
        7px 0 0;

    color:
        var(--scdry-muted);

    font-size: 14px;

    line-height: 1.58;

}


/* =========================================================
   SERVICE AREA
========================================================= */

.scdry-service-area {

    display: grid;

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

    align-items: center;

    gap: 35px;

    padding:
        clamp(30px,4vw,45px);

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 25px;

    background:

        linear-gradient(
            135deg,
            #fff,
            #f2f0e9
        );

}


.scdry-service-area-content > small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--scdry-copper);

    font-size: 14px;

}


.scdry-city-list {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 18px;

}


.scdry-city-list span {

    min-height: 37px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        0 10px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 100px;

    color:
        var(--scdry-text);

    background: #fff;

    font-size: 14px;

}


.scdry-city-list i {

    color:
        var(--scdry-copper);

}


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

.scdry-service-area-radius {

    width: 165px;
    height: 165px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border:
        1px solid
        rgba(181,122,82,.18);

    border-radius: 50%;

    color: #fff;

    background:

        linear-gradient(
            145deg,
            var(--scdry-dark),
            var(--scdry-navy)
        );

    box-shadow:
        0 18px 40px
        rgba(7,16,29,.14);

}


.scdry-service-area-radius strong {

    color:
        var(--scdry-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size: 50px;

    line-height: 1;

}


.scdry-service-area-radius span {

    color:
        rgba(255,255,255,.55);

    font-size: 14px;

    line-height: 1.15;

}


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

.scdry-final {

    display: grid;

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

    align-items: center;

    gap: 45px;

    padding:
        clamp(31px,4vw,48px);

    border-radius: 25px;

    color:
        var(--scdry-dark);

    background:

        linear-gradient(
            135deg,
            var(--scdry-gold-light),
            var(--scdry-gold)
        );

}


.scdry-final small {

    display: block;

    margin-bottom: 6px;

    color:
        rgba(7,16,29,.58);

    font-size: 14px;

    font-weight: 700;

}


.scdry-final h2 span {

    display: block;

}


.scdry-final p {

    max-width: 700px;

    margin:
        14px 0 0;

    color:
        rgba(7,16,29,.68);

    font-size: 15px;

    line-height: 1.65;

}


.scdry-final-actions {

    display: grid;

    gap: 8px;

    min-width: 225px;

}


.scdry-final-primary,
.scdry-final-phone {

    min-height: 51px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        0 16px;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 800;

}


.scdry-final-primary {

    color: #fff;

    background:
        var(--scdry-dark);

}


.scdry-final-phone {

    color:
        var(--scdry-dark);

    border:
        1px solid
        rgba(7,16,29,.13);

    background:
        rgba(255,255,255,.23);

}


/* =========================================================
   REVEAL
========================================================= */

.scdry-reveal {

    opacity: 0;

    transform:
        translateY(24px);

    transition:

        opacity .7s ease,
        transform .7s
        var(--scdry-ease);

}


.scdry-reveal.scdry-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   SMALL DESKTOP
========================================================= */

@media (max-width: 1050px) and (min-width: 901px) {

    .scdry-layout {

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

        gap: 27px;

    }


    .scdry-feature-strip {

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

    }


    .scdry-preparation-grid {

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

    }


    .scdry-finish-section {

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

    }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 900px) {

    .scdry-hero-inner {

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

        gap: 30px;

    }


    .scdry-hero-side {

        display: none;

    }


    .scdry-layout {

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

        gap: 24px;

    }


    /* DISABLE STICKY */

    .scdry-sidebar {

        position: relative !important;

        top: auto !important;

        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        width: 100%;

        align-self: auto;

        z-index: 40;

    }


    /* MOBILE TOGGLE */

    .scdry-sidebar-toggle {

        width: 100%;

        min-height: 56px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 15px;

        padding:
            0 16px;

        border:
            1px solid
            rgba(7,16,29,.08);

        border-radius: 15px;

        color: #fff;

        background:

            linear-gradient(
                135deg,
                var(--scdry-dark),
                var(--scdry-navy)
            );

        box-shadow:
            0 12px 28px
            rgba(7,16,29,.10);

        font-size: 14px;

        font-weight: 800;

        cursor: pointer;

    }


    .scdry-sidebar-toggle > span {

        display: flex;

        align-items: center;

        gap: 9px;

    }


    .scdry-sidebar-toggle > i {

        transition:
            transform .25s ease;

    }


    .scdry-sidebar.is-open
    .scdry-sidebar-toggle > i {

        transform:
            rotate(180deg);

    }


    /* COLLAPSIBLE */

    .scdry-sidebar-inner {

        position: relative;

        top: auto;

        width: 100%;

        max-height: 0;

        overflow: hidden;

        margin-top: 7px;

        opacity: 0;

        transform:
            translateY(-7px);

        border-radius: 18px;

        transition:

            max-height .45s
            var(--scdry-ease),

            opacity .25s ease,

            transform .35s
            var(--scdry-ease);

    }


    .scdry-sidebar.is-open
    .scdry-sidebar-inner {

        max-height: 1300px;

        overflow-y: auto;

        opacity: 1;

        transform:
            translateY(0);

    }


    .scdry-sidebar-service {

        display: none;

    }


    .scdry-content-section,
    .scdry-preparation,
    .scdry-why {

        scroll-margin-top: 85px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    html,
    body {

        overflow-x: hidden;

    }


    .scdry-container {

        width:
            calc(100% - 24px);

        max-width:
            calc(100% - 24px);

    }


    .scdry-hero {

        min-height: 600px;

    }


    .scdry-hero-inner {

        padding:
            95px 0 55px;

    }


    .scdry-hero h1 {

        font-size:
            clamp(52px,16vw,76px);

    }


    .scdry-hero-content > p {

        font-size: 14px;

    }


    .scdry-hero-actions {

        flex-direction: column;

    }


    .scdry-btn-primary,
    .scdry-btn-secondary {

        width: 100%;

    }


    .scdry-breadcrumb {

        width: 100%;

        justify-content: center;

    }


    .scdry-page {

        padding:
            70px 0 95px;

    }


    .scdry-content {

        gap: 17px;

    }


    .scdry-content-section {

        padding:
            24px 18px;

        border-radius: 20px;

    }


    .scdry-section-heading h2,
    .scdry-split-heading h2,
    .scdry-preparation h2,
    .scdry-finish-section h2,
    .scdry-why h2,
    .scdry-service-area h2,
    .scdry-final h2 {

        font-size:
            clamp(35px,10.5vw,47px);

    }


    .scdry-content-section > p,
    .scdry-preparation > p,
    .scdry-finish-section p,
    .scdry-service-area p,
    .scdry-final p {

        font-size: 14px;

    }


    .scdry-lead {

        font-size:
            16px !important;

    }


    /* FEATURE IMAGE */

    .scdry-feature-image {

        height: 390px;

        border-radius: 20px;

    }


    .scdry-feature-image figcaption {

        left: 13px;
        right: 13px;
        bottom: 13px;

    }


    /* SPLIT */

    .scdry-split-heading {

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

        gap: 8px;

    }


    .scdry-section-number {

        font-size: 38px;

    }


    /* GRIDS */

    .scdry-detail-grid,
    .scdry-texture-grid {

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

    }


    /* IMAGE CARD */

    .scdry-image-card {

        height: 390px;

        border-radius: 20px;

    }


    .scdry-image-card-content {

        left: 18px;
        right: 18px;
        bottom: 18px;

    }


    /* PREP */

    .scdry-preparation {

        padding:
            25px 18px;

        border-radius: 20px;

    }


    .scdry-preparation-top > span {

        width: 50px;
        height: 50px;

        flex-basis: 50px;

    }


    .scdry-preparation-grid {

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

    }


    /* FINISH */

    .scdry-finish-section {

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

        gap: 25px;

        padding:
            25px 18px;

        border-radius: 20px;

    }


    /* PROCESS */

    .scdry-process-item {

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

        gap: 13px;

    }


    .scdry-process-marker > span {

        width: 44px;
        height: 44px;

    }


    .scdry-process-marker::after {

        top: 48px;

    }


    /* WHY */

    .scdry-why {

        padding:
            25px 18px;

        border-radius: 20px;

    }


    .scdry-why-grid {

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

    }


    .scdry-why-heading > span {

        width: 50px;
        height: 50px;

        flex-basis: 50px;

    }


    /* SERVICE AREA */

    .scdry-service-area {

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

        padding:
            25px 18px;

        border-radius: 20px;

    }


    .scdry-service-area-radius {

        width: 140px;
        height: 140px;

        margin:
            0 auto;

    }


    /* FINAL */

    .scdry-final {

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

        gap: 26px;

        padding:
            26px 18px;

        border-radius: 20px;

    }


    .scdry-final-actions {

        width: 100%;

        min-width: 0;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .scdry-preparation-grid {

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

    }


    .scdry-preparation-top,
    .scdry-why-heading {

        display: block;

    }


    .scdry-preparation-top > span,
    .scdry-why-heading > span {

        margin-top: 18px;

    }


    .scdry-feature-image {

        height: 340px;

    }


    .scdry-image-card {

        height: 350px;

    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 350px) {

    .scdry-container {

        width:
            calc(100% - 18px);

        max-width:
            calc(100% - 18px);

    }


    .scdry-content-section,
    .scdry-preparation,
    .scdry-finish-section,
    .scdry-why,
    .scdry-service-area,
    .scdry-final {

        padding:
            21px 14px;

    }

}


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

.scdry-page a:focus-visible,
.scdry-page button:focus-visible,
.scdry-hero a:focus-visible {

    outline:
        3px solid
        var(--scdry-gold);

    outline-offset: 3px;

}


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

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

    .scdry-reveal {

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;

    }

}

/* =========================================================
   SANTA CRUZ PAINTING
   CABINET REFINISHING

   UNIQUE PREFIX: sccab-
========================================================= */

:root {

    --sccab-dark: #07101d;
    --sccab-dark-2: #0b1524;
    --sccab-navy: #18243a;

    --sccab-gold: #d0a054;
    --sccab-gold-light: #f0cd86;
    --sccab-copper: #b57a52;

    --sccab-white: #ffffff;
    --sccab-cream: #f4f2ec;

    --sccab-text: #182133;
    --sccab-muted: #707885;

    --sccab-border:
        rgba(7,16,29,.08);

    --sccab-sticky-top: 110px;

    --sccab-ease:
        cubic-bezier(.22,1,.36,1);

}


/* =========================================================
   GLOBAL PROTECTION
========================================================= */

html,
body {

    width: 100%;
    max-width: 100%;

    overflow-x: clip;

}


.sccab-hero,
.sccab-page,
.sccab-container,
.sccab-layout,
.sccab-sidebar,
.sccab-content,
.sccab-content-section {

    min-width: 0;
    max-width: 100%;

}


.sccab-hero *,
.sccab-page *,
.sccab-hero *::before,
.sccab-hero *::after,
.sccab-page *::before,
.sccab-page *::after {

    box-sizing: border-box;

}


.sccab-hero a,
.sccab-page a {

    text-decoration: none;

}


.sccab-page button {

    font-family: inherit;

}


/* =========================================================
   CONTAINER
========================================================= */

.sccab-container {

    position: relative;

    z-index: 5;

    width:
        min(calc(100% - 40px),1450px);

    margin: 0 auto;

}


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

.sccab-hero {

    position: relative;

    width: 100%;

    min-height: 580px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: #fff;

    background:
        var(--sccab-dark);

    isolation: isolate;

}


.sccab-hero-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        url("https://santacruzpaintingllc.com/assets/img/service/Cabinet.jpg");

    background-size: cover;

    background-position: center;

    transform:
        scale(1.035);

}


.sccab-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(4,10,18,.98) 0%,
            rgba(7,16,29,.94) 39%,
            rgba(7,16,29,.71) 70%,
            rgba(7,16,29,.36) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,.03),
            rgba(0,0,0,.35)
        );

}


/* =========================================================
   DECORATION
========================================================= */

.sccab-hero-decoration {

    position: absolute;

    z-index: 2;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

}


.sccab-hero-decoration span {

    position: absolute;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(208,160,84,.48),
            transparent
        );

}


.sccab-hero-decoration span:nth-child(1) {

    width: 48%;

    right: -7%;
    top: 26%;

    transform:
        rotate(-8deg);

}


.sccab-hero-decoration span:nth-child(2) {

    width: 36%;

    right: 7%;
    top: 61%;

    transform:
        rotate(7deg);

}


.sccab-hero-decoration span:nth-child(3) {

    width: 27%;

    left: -5%;
    bottom: 15%;

    transform:
        rotate(-5deg);

}


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

.sccab-hero-inner {

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(250px,.35fr);

    align-items: end;

    gap: 75px;

    padding:
        115px 0 75px;

}


/* =========================================================
   EYEBROW
========================================================= */

.sccab-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 13px;

    color:
        var(--sccab-copper);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .07em;

    text-transform: uppercase;

}


.sccab-eyebrow > span {

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color:
        var(--sccab-dark);

    background:

        linear-gradient(
            145deg,
            var(--sccab-gold-light),
            var(--sccab-gold)
        );

}


.sccab-eyebrow-light {

    color:
        var(--sccab-gold-light);

}


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

.sccab-hero h1 {

    max-width: 980px;

    margin:
        0 0 20px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(57px,7vw,104px);

    line-height: .88;

    letter-spacing: -.055em;

}


.sccab-hero h1 em {

    display: block;

    color:
        var(--sccab-gold-light);

    font-style: normal;

}


.sccab-hero-content > p {

    max-width: 720px;

    margin:
        0 0 26px;

    color:
        rgba(255,255,255,.64);

    font-size: 15px;

    line-height: 1.72;

}


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

.sccab-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 24px;

}


.sccab-btn-primary,
.sccab-btn-secondary {

    min-height: 53px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        0 18px;

    border-radius: 13px;

    font-size: 14px;

    font-weight: 800;

}


.sccab-btn-primary {

    color:
        var(--sccab-dark);

    background:

        linear-gradient(
            145deg,
            var(--sccab-gold-light),
            var(--sccab-gold)
        );

}


.sccab-btn-primary > span {

    width: 31px;
    height: 31px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        rgba(255,255,255,.30);

}


.sccab-btn-secondary {

    color: #fff;

    border:
        1px solid
        rgba(255,255,255,.15);

    background:
        rgba(255,255,255,.06);

    backdrop-filter: blur(10px);

}


/* =========================================================
   BREADCRUMB
========================================================= */

.sccab-breadcrumb {

    display: inline-flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    min-height: 42px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 100px;

    background:
        rgba(255,255,255,.055);

    backdrop-filter: blur(12px);

}


.sccab-breadcrumb a,
.sccab-breadcrumb span,
.sccab-breadcrumb i {

    font-size: 14px;

}


.sccab-breadcrumb a {

    color: #fff;

}


.sccab-breadcrumb span {

    color:
        rgba(255,255,255,.48);

}


.sccab-breadcrumb i {

    color:
        var(--sccab-gold);

}


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

.sccab-hero-side {

    display: grid;

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

    gap: 20px;

}


.sccab-hero-side-line {

    min-height: 180px;

    background:

        linear-gradient(
            transparent,
            var(--sccab-gold),
            transparent
        );

}


.sccab-hero-side small {

    display: block;

    margin-bottom: 8px;

    color:
        var(--sccab-gold-light);

    font-size: 14px;

}


.sccab-hero-side strong {

    display: block;

    color:
        rgba(255,255,255,.78);

    font-family:
        "Playfair Display",
        serif;

    font-size: 26px;

    line-height: 1.2;

}


.sccab-hero-side-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 18px;

}


.sccab-hero-side-meta span {

    min-height: 34px;

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
        0 9px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 100px;

    color:
        rgba(255,255,255,.55);

    background:
        rgba(255,255,255,.04);

    font-size: 14px;

}


.sccab-hero-side-meta i {

    color:
        var(--sccab-gold-light);

}


/* =========================================================
   PAGE
========================================================= */

.sccab-page {

    position: relative;

    width: 100%;

    /*
       IMPORTANT FOR DESKTOP STICKY SIDEBAR
    */
    overflow: visible;

    padding:
        100px 0 110px;

    background:

        radial-gradient(
            circle at 6% 15%,
            rgba(208,160,84,.10),
            transparent 25%
        ),

        radial-gradient(
            circle at 95% 60%,
            rgba(181,122,82,.07),
            transparent 25%
        ),

        linear-gradient(
            135deg,
            #fbfaf6,
            #f2f1eb
        );

    isolation: isolate;

}


/* =========================================================
   PAGE BACKGROUND
========================================================= */

.sccab-page-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

}


.sccab-bg-grid {

    position: absolute;

    inset: 0;

    opacity: .22;

    background-image:

        linear-gradient(
            rgba(24,36,58,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(24,36,58,.035) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

}


.sccab-bg-orb {

    position: absolute;

    border:
        1px solid
        rgba(181,122,82,.10);

    border-radius: 50%;

}


.sccab-bg-orb-one {

    width: 500px;
    height: 500px;

    right: -300px;
    top: 300px;

}


.sccab-bg-orb-two {

    width: 360px;
    height: 360px;

    left: -220px;
    bottom: 12%;

}


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

.sccab-layout {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(250px,305px)
        minmax(0,1fr);

    align-items: start;

    gap:
        clamp(35px,5vw,75px);

}


/* =========================================================
   DESKTOP STICKY SIDEBAR
========================================================= */

.sccab-sidebar {

    position: sticky;

    top:
        var(--sccab-sticky-top);

    align-self: start;

    width: 100%;

    z-index: 25;

}


/* =========================================================
   SIDEBAR INNER
========================================================= */

.sccab-sidebar-inner {

    position: relative;

    width: 100%;

    max-height:
        calc(
            100dvh -
            var(--sccab-sticky-top) -
            18px
        );

    overflow-x: hidden;
    overflow-y: auto;

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

    border-radius: 22px;

    background:
        rgba(255,255,255,.92);

    box-shadow:
        0 20px 45px
        rgba(7,16,29,.07);

    backdrop-filter: blur(16px);

    scrollbar-width: thin;

    scrollbar-color:
        rgba(181,122,82,.38)
        transparent;

}


.sccab-sidebar-inner::-webkit-scrollbar {

    width: 5px;

}


.sccab-sidebar-inner::-webkit-scrollbar-track {

    background: transparent;

}


.sccab-sidebar-inner::-webkit-scrollbar-thumb {

    border-radius: 100px;

    background:
        rgba(181,122,82,.35);

}


.sccab-sidebar-toggle {

    display: none;

}


/* =========================================================
   CURRENT SERVICE
========================================================= */

.sccab-sidebar-service {

    display: grid;

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

    align-items: center;

    gap: 10px;

    padding: 16px;

    color: #fff;

    background:

        linear-gradient(
            135deg,
            var(--sccab-dark),
            var(--sccab-navy)
        );

}


.sccab-sidebar-service > span {

    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    color:
        var(--sccab-dark);

    background:
        var(--sccab-gold-light);

}


.sccab-sidebar-service small,
.sccab-sidebar-service strong {

    display: block;

}


.sccab-sidebar-service small {

    color:
        rgba(255,255,255,.50);

    font-size: 14px;

}


.sccab-sidebar-service strong {

    color: #fff;

    font-size: 15px;

}


/* =========================================================
   SIDEBAR BLOCK
========================================================= */

.sccab-sidebar-block {

    padding:
        17px 14px;

    border-bottom:
        1px solid
        rgba(7,16,29,.07);

}


.sccab-sidebar-label {

    display: block;

    margin:
        0 5px 10px;

    color:
        var(--sccab-muted);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .05em;

    text-transform: uppercase;

}


/* =========================================================
   PAGE NAV
========================================================= */

.sccab-page-nav {

    display: grid;

    gap: 4px;

}


.sccab-nav-link {

    position: relative;

    min-height: 45px;

    display: grid;

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

    align-items: center;

    gap: 8px;

    padding:
        0 10px;

    border-radius: 11px;

    color:
        var(--sccab-muted);

    font-size: 14px;

    font-weight: 700;

    transition:

        color .22s ease,
        background .22s ease,
        transform .22s
        var(--sccab-ease);

}


.sccab-nav-link > span {

    color:
        rgba(181,122,82,.58);

    font-family:
        "Playfair Display",
        serif;

    font-size: 14px;

}


.sccab-nav-link:hover {

    color:
        var(--sccab-dark);

    background:
        rgba(208,160,84,.075);

}


.sccab-nav-link.active {

    color:
        var(--sccab-dark);

    background:
        rgba(208,160,84,.12);

    transform:
        translateX(4px);

}


.sccab-nav-link.active::after {

    content: "";

    position: absolute;

    right: 8px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--sccab-copper);

}


/* =========================================================
   OTHER SERVICES
========================================================= */

.sccab-other-services {

    display: grid;

    gap: 5px;

}


.sccab-other-services > a {

    min-height: 46px;

    display: grid;

    grid-template-columns:
        32px minmax(0,1fr) 18px;

    align-items: center;

    gap: 8px;

    padding:
        0 8px;

    border-radius: 10px;

    color:
        var(--sccab-text);

    font-size: 14px;

    transition:

        background .22s ease,
        transform .22s
        var(--sccab-ease);

}


.sccab-other-services > a:hover {

    transform:
        translateX(3px);

    background:
        rgba(7,16,29,.035);

}


.sccab-other-services > a > i:first-child {

    color:
        var(--sccab-copper);

}


.sccab-other-services > a > i:last-child {

    color:
        rgba(7,16,29,.30);

    font-size: 12px;

}


/* =========================================================
   SIDEBAR CTA
========================================================= */

.sccab-sidebar-cta {

    padding: 18px;

    color: #fff;

    background:

        linear-gradient(
            145deg,
            var(--sccab-dark),
            #101e32
        );

}


.sccab-sidebar-cta-icon {

    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    margin-bottom: 16px;

    border-radius: 12px;

    color:
        var(--sccab-dark);

    background:
        var(--sccab-gold-light);

}


.sccab-sidebar-cta small,
.sccab-sidebar-cta strong {

    display: block;

}


.sccab-sidebar-cta small {

    color:
        var(--sccab-gold);

    font-size: 14px;

}


.sccab-sidebar-cta strong {

    margin:
        4px 0 15px;

    font-family:
        "Playfair Display",
        serif;

    font-size: 22px;

    line-height: 1.15;

}


.sccab-sidebar-cta a {

    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    padding:
        0 11px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 10px;

    color: #fff;

    background:
        rgba(255,255,255,.05);

    font-size: 14px;

    font-weight: 700;

}


/* =========================================================
   CONTENT
========================================================= */

.sccab-content {

    display: grid;

    gap: 26px;

}


.sccab-content-section {

    scroll-margin-top:
        calc(
            var(--sccab-sticky-top) +
            15px
        );

    padding:
        clamp(28px,4vw,48px);

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

    border-radius: 25px;

    background:
        rgba(255,255,255,.84);

    box-shadow:
        0 20px 50px
        rgba(7,16,29,.055);

}


/* =========================================================
   HEADINGS
========================================================= */

.sccab-section-heading {

    max-width: 880px;

    margin-bottom: 24px;

}


.sccab-section-heading h2,
.sccab-split-heading h2,
.sccab-preparation h2,
.sccab-value-section h2,
.sccab-why h2,
.sccab-service-area h2,
.sccab-final h2 {

    margin: 0;

    color:
        var(--sccab-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(39px,4vw,61px);

    line-height: .98;

    letter-spacing: -.04em;

}


.sccab-section-heading h2 span,
.sccab-split-heading h2 span,
.sccab-preparation h2 span,
.sccab-value-section h2 span,
.sccab-service-area h2 span {

    display: block;

    color:
        var(--sccab-copper);

}


/* =========================================================
   TEXT
========================================================= */

.sccab-content-section > p,
.sccab-preparation > p,
.sccab-value-section p,
.sccab-service-area p {

    max-width: 900px;

    color:
        var(--sccab-muted);

    font-size: 15px;

    line-height: 1.76;

}


.sccab-content-section > p + p,
.sccab-preparation > p + p {

    margin-top: 15px;

}


.sccab-lead {

    color:
        var(--sccab-text) !important;

    font-size:
        17px !important;

    font-weight: 600;

}


/* =========================================================
   FEATURE STRIP
========================================================= */

.sccab-feature-strip {

    display: grid;

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

    gap: 8px;

    margin-top: 30px;

}


.sccab-feature-strip > div {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 12px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 14px;

    background:
        #f8f7f2;

}


.sccab-feature-strip > div > span {

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color:
        var(--sccab-copper);

    background:
        rgba(208,160,84,.11);

}


.sccab-feature-strip small,
.sccab-feature-strip strong {

    display: block;

    font-size: 14px;

}


.sccab-feature-strip small {

    color:
        var(--sccab-muted);

}


.sccab-feature-strip strong {

    color:
        var(--sccab-dark);

}


/* =========================================================
   FEATURE IMAGE
========================================================= */

.sccab-feature-image {

    position: relative;

    width: 100%;

    height:
        clamp(390px,48vw,620px);

    overflow: hidden;

    margin: 0;

    border-radius: 25px;

    background:
        #d9d7d0;

    box-shadow:
        0 24px 55px
        rgba(7,16,29,.10);

}


.sccab-feature-image > img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s
        var(--sccab-ease);

}


.sccab-feature-image:hover > img {

    transform:
        scale(1.035);

}


.sccab-feature-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            transparent 52%,
            rgba(7,16,29,.80)
        );

}


.sccab-feature-image figcaption {

    position: absolute;

    z-index: 4;

    left: 20px;
    right: 20px;
    bottom: 20px;

    display: flex;

    align-items: center;

    gap: 11px;

    color: #fff;

}


.sccab-feature-image figcaption > span {

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    color:
        var(--sccab-dark);

    background:
        var(--sccab-gold-light);

}


.sccab-feature-image small,
.sccab-feature-image strong {

    display: block;

}


.sccab-feature-image small {

    color:
        var(--sccab-gold-light);

    font-size: 14px;

}


.sccab-feature-image strong {

    margin-top: 2px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(19px,2vw,27px);

}


/* =========================================================
   SPLIT HEADING
========================================================= */

.sccab-split-heading {

    display: grid;

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

    align-items: start;

    gap: 18px;

    margin-bottom: 22px;

}


.sccab-section-number {

    color:
        var(--sccab-copper);

    font-family:
        "Playfair Display",
        serif;

    font-size: 53px;

    line-height: .9;

}


.sccab-split-heading small {

    display: block;

    margin-bottom: 6px;

    color:
        var(--sccab-copper);

    font-size: 14px;

    font-weight: 700;

}


/* =========================================================
   DETAIL GRID
========================================================= */

.sccab-detail-grid {

    display: grid;

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

    gap: 9px;

    margin-top: 28px;

}


.sccab-detail-grid article {

    padding: 20px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 17px;

    background:
        #f8f7f3;

    transition:

        transform .3s
        var(--sccab-ease),

        box-shadow .3s ease;

}


.sccab-detail-grid article:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 30px
        rgba(7,16,29,.06);

}


.sccab-detail-grid article > span {

    width: 45px;
    height: 45px;

    display: grid;

    place-items: center;

    margin-bottom: 19px;

    border-radius: 13px;

    color:
        var(--sccab-copper);

    background:
        rgba(208,160,84,.11);

}


.sccab-detail-grid h3 {

    margin:
        0 0 7px;

    color:
        var(--sccab-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 23px;

}


.sccab-detail-grid p {

    margin: 0;

    color:
        var(--sccab-muted);

    font-size: 14px;

    line-height: 1.6;

}


/* =========================================================
   IMAGE CARD
========================================================= */

.sccab-image-card {

    position: relative;

    height: 440px;

    overflow: hidden;

    border-radius: 25px;

    background:
        var(--sccab-dark);

}


.sccab-image-card > img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


.sccab-image-card-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(7,16,29,.90),
            rgba(7,16,29,.18)
        );

}


.sccab-image-card-content {

    position: absolute;

    z-index: 3;

    left: 28px;
    right: 28px;
    bottom: 28px;

    max-width: 620px;

    color: #fff;

}


.sccab-image-card-content small {

    display: block;

    margin-bottom: 6px;

    color:
        var(--sccab-gold-light);

    font-size: 14px;

}


.sccab-image-card-content strong {

    display: block;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(31px,3.4vw,50px);

    line-height: 1;

}


/* =========================================================
   PREPARATION
========================================================= */

.sccab-preparation {

    scroll-margin-top:
        calc(
            var(--sccab-sticky-top) +
            15px
        );

    overflow: hidden;

    padding:
        clamp(30px,4vw,48px);

    border-radius: 25px;

    color: #fff;

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(208,160,84,.14),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            var(--sccab-dark),
            #101e32
        );

}


.sccab-preparation-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 25px;

}


.sccab-preparation-top small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--sccab-gold);

    font-size: 14px;

}


.sccab-preparation h2 {

    color: #fff;

}


.sccab-preparation h2 span {

    color:
        var(--sccab-gold-light);

}


.sccab-preparation-top > span {

    width: 62px;
    height: 62px;

    flex: 0 0 62px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    color:
        var(--sccab-dark);

    background:
        var(--sccab-gold-light);

    font-size: 20px;

}


.sccab-preparation > p {

    color:
        rgba(255,255,255,.56);

}


/* =========================================================
   PREPARATION GRID
========================================================= */

.sccab-preparation-grid {

    display: grid;

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

    gap: 7px;

    margin-top: 28px;

}


.sccab-preparation-grid > div {

    min-width: 0;

    padding: 16px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 15px;

    background:
        rgba(255,255,255,.035);

}


.sccab-preparation-grid strong {

    display: block;

    color:
        var(--sccab-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size: 25px;

}


.sccab-preparation-grid span {

    display: block;

    margin-top: 7px;

    color:
        rgba(255,255,255,.65);

    font-size: 14px;

}


/* =========================================================
   FINISH GRID
========================================================= */

.sccab-finish-grid {

    display: grid;

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

    gap: 8px;

    margin-top: 28px;

}


.sccab-finish-grid > div {

    min-width: 0;

    display: grid;

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

    gap: 11px;

    padding: 17px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 16px;

    background:
        #f8f7f3;

}


.sccab-finish-grid > div > span {

    width: 45px;
    height: 45px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color:
        var(--sccab-copper);

    background:
        rgba(208,160,84,.11);

}


.sccab-finish-grid strong {

    display: block;

    color:
        var(--sccab-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 20px;

}


.sccab-finish-grid p {

    margin:
        4px 0 0;

    color:
        var(--sccab-muted);

    font-size: 14px;

    line-height: 1.5;

}


/* =========================================================
   VALUE SECTION
========================================================= */

.sccab-value-section {

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(320px,.72fr);

    gap: 45px;

    padding:
        clamp(30px,4vw,48px);

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 25px;

    background:

        linear-gradient(
            135deg,
            #ffffff,
            #f2f0e9
        );

}


.sccab-value-copy > small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--sccab-copper);

    font-size: 14px;

}


.sccab-value-points {

    display: grid;

    gap: 8px;

}


.sccab-value-points > div {

    display: grid;

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

    gap: 11px;

    padding: 14px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 15px;

    background:
        rgba(255,255,255,.75);

}


.sccab-value-points > div > span {

    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color:
        var(--sccab-copper);

    background:
        rgba(208,160,84,.11);

}


.sccab-value-points strong {

    display: block;

    color:
        var(--sccab-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 19px;

}


.sccab-value-points p {

    margin:
        4px 0 0;

    font-size: 14px;

    line-height: 1.5;

}


/* =========================================================
   PROCESS
========================================================= */

.sccab-process {

    display: grid;

    margin-top: 30px;

}


.sccab-process-item {

    display: grid;

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

    gap: 20px;

    min-height: 150px;

}


.sccab-process-marker {

    position: relative;

    display: flex;

    justify-content: center;

}


.sccab-process-marker::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 57px;
    bottom: 0;

    width: 1px;

    background:

        linear-gradient(
            var(--sccab-gold),
            rgba(181,122,82,.08)
        );

}


.sccab-process-item:last-child
.sccab-process-marker::after {

    display: none;

}


.sccab-process-marker > span {

    position: relative;

    z-index: 2;

    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        var(--sccab-dark);

    background:

        linear-gradient(
            145deg,
            var(--sccab-gold-light),
            var(--sccab-gold)
        );

    font-family:
        "Playfair Display",
        serif;

    font-size: 16px;

}


.sccab-process-item > div:last-child {

    padding:
        2px 0 30px;

}


.sccab-process-item small {

    color:
        var(--sccab-copper);

    font-size: 14px;

}


.sccab-process-item h3 {

    margin:
        3px 0 7px;

    color:
        var(--sccab-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 25px;

}


.sccab-process-item p {

    max-width: 720px;

    margin: 0;

    color:
        var(--sccab-muted);

    font-size: 14px;

    line-height: 1.65;

}


/* =========================================================
   WHY CHOOSE
========================================================= */

.sccab-why {

    scroll-margin-top:
        calc(
            var(--sccab-sticky-top) +
            15px
        );

    overflow: hidden;

    padding:
        clamp(30px,4vw,48px);

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 25px;

    background: #fff;

}


.sccab-why-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 28px;

}


.sccab-why-heading small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--sccab-copper);

    font-size: 14px;

}


.sccab-why h2 span {

    display: block;

    color:
        var(--sccab-copper);

}


.sccab-why-heading > span {

    width: 61px;
    height: 61px;

    flex: 0 0 61px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    color:
        var(--sccab-dark);

    background:
        var(--sccab-gold-light);

    font-size: 20px;

}


.sccab-why-grid {

    display: grid;

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

    gap: 8px;

}


.sccab-why-grid article {

    padding: 20px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 16px;

    background:
        #f8f7f3;

}


.sccab-why-grid article > span {

    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    margin-bottom: 18px;

    border-radius: 12px;

    color:
        var(--sccab-copper);

    background:
        rgba(208,160,84,.11);

}


.sccab-why-grid strong {

    display: block;

    color:
        var(--sccab-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 21px;

}


.sccab-why-grid p {

    margin:
        7px 0 0;

    color:
        var(--sccab-muted);

    font-size: 14px;

    line-height: 1.58;

}


/* =========================================================
   SERVICE AREA
========================================================= */

.sccab-service-area {

    display: grid;

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

    align-items: center;

    gap: 35px;

    padding:
        clamp(30px,4vw,45px);

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 25px;

    background:

        linear-gradient(
            135deg,
            #fff,
            #f2f0e9
        );

}


.sccab-service-area-content > small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--sccab-copper);

    font-size: 14px;

}


.sccab-city-list {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 18px;

}


.sccab-city-list span {

    min-height: 37px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        0 10px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 100px;

    color:
        var(--sccab-text);

    background: #fff;

    font-size: 14px;

}


.sccab-city-list i {

    color:
        var(--sccab-copper);

}


/* =========================================================
   SERVICE RADIUS
========================================================= */

.sccab-service-area-radius {

    width: 165px;
    height: 165px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border:
        1px solid
        rgba(181,122,82,.18);

    border-radius: 50%;

    color: #fff;

    background:

        linear-gradient(
            145deg,
            var(--sccab-dark),
            var(--sccab-navy)
        );

    box-shadow:
        0 18px 40px
        rgba(7,16,29,.14);

}


.sccab-service-area-radius strong {

    color:
        var(--sccab-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size: 50px;

    line-height: 1;

}


.sccab-service-area-radius span {

    color:
        rgba(255,255,255,.55);

    font-size: 14px;

    line-height: 1.15;

}


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

.sccab-final {

    display: grid;

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

    align-items: center;

    gap: 45px;

    overflow: hidden;

    padding:
        clamp(31px,4vw,48px);

    border-radius: 25px;

    color:
        var(--sccab-dark);

    background:

        linear-gradient(
            135deg,
            var(--sccab-gold-light),
            var(--sccab-gold)
        );

}


.sccab-final small {

    display: block;

    margin-bottom: 6px;

    color:
        rgba(7,16,29,.58);

    font-size: 14px;

    font-weight: 700;

}


.sccab-final h2 span {

    display: block;

}


.sccab-final p {

    max-width: 700px;

    margin:
        14px 0 0;

    color:
        rgba(7,16,29,.68);

    font-size: 15px;

    line-height: 1.65;

}


.sccab-final-actions {

    display: grid;

    gap: 8px;

    min-width: 225px;

}


.sccab-final-primary,
.sccab-final-phone {

    min-height: 51px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        0 16px;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 800;

}


.sccab-final-primary {

    color: #fff;

    background:
        var(--sccab-dark);

}


.sccab-final-phone {

    color:
        var(--sccab-dark);

    border:
        1px solid
        rgba(7,16,29,.13);

    background:
        rgba(255,255,255,.23);

}


/* =========================================================
   REVEAL
========================================================= */

.sccab-reveal {

    opacity: 0;

    transform:
        translateY(24px);

    transition:

        opacity .7s ease,
        transform .7s
        var(--sccab-ease);

}


.sccab-reveal.sccab-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   SMALL DESKTOP
========================================================= */

@media (max-width: 1050px) and (min-width: 901px) {

    .sccab-layout {

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

        gap: 27px;

    }


    .sccab-feature-strip {

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

    }


    .sccab-preparation-grid {

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

    }


    .sccab-value-section {

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

    }

}


/* =========================================================
   TABLET / MOBILE

   DISABLE STICKY COMPLETELY
========================================================= */

@media (max-width: 900px) {

    .sccab-hero-inner {

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

        gap: 30px;

    }


    .sccab-hero-side {

        display: none;

    }


    .sccab-layout {

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

        gap: 24px;

    }


    /* SIDEBAR */

    .sccab-sidebar {

        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        width: 100%;

        align-self: auto;

        z-index: 40;

    }


    /* TOGGLE */

    .sccab-sidebar-toggle {

        width: 100%;

        min-height: 56px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 15px;

        padding:
            0 16px;

        border:
            1px solid
            rgba(7,16,29,.08);

        border-radius: 15px;

        color: #fff;

        background:

            linear-gradient(
                135deg,
                var(--sccab-dark),
                var(--sccab-navy)
            );

        box-shadow:
            0 12px 28px
            rgba(7,16,29,.10);

        font-size: 14px;

        font-weight: 800;

        cursor: pointer;

    }


    .sccab-sidebar-toggle > span {

        display: flex;

        align-items: center;

        gap: 9px;

    }


    .sccab-sidebar-toggle > i {

        transition:
            transform .25s ease;

    }


    .sccab-sidebar.is-open
    .sccab-sidebar-toggle > i {

        transform:
            rotate(180deg);

    }


    /* COLLAPSIBLE */

    .sccab-sidebar-inner {

        position: relative;

        top: auto;

        width: 100%;

        max-height: 0;

        overflow: hidden;

        margin-top: 7px;

        opacity: 0;

        transform:
            translateY(-7px);

        border-radius: 18px;

        transition:

            max-height .45s
            var(--sccab-ease),

            opacity .25s ease,

            transform .35s
            var(--sccab-ease);

    }


    .sccab-sidebar.is-open
    .sccab-sidebar-inner {

        max-height: 1300px;

        overflow-y: auto;

        opacity: 1;

        transform:
            translateY(0);

    }


    .sccab-sidebar-service {

        display: none;

    }


    .sccab-content-section,
    .sccab-preparation,
    .sccab-why {

        scroll-margin-top: 85px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    html,
    body {

        overflow-x: hidden;

    }


    .sccab-container {

        width:
            calc(100% - 24px);

        max-width:
            calc(100% - 24px);

    }


    /* HERO */

    .sccab-hero {

        min-height: 610px;

    }


    .sccab-hero-inner {

        padding:
            95px 0 55px;

    }


    .sccab-hero h1 {

        font-size:
            clamp(50px,15vw,74px);

    }


    .sccab-hero-content > p {

        font-size: 14px;

    }


    .sccab-hero-actions {

        flex-direction: column;

    }


    .sccab-btn-primary,
    .sccab-btn-secondary {

        width: 100%;

    }


    .sccab-breadcrumb {

        width: 100%;

        justify-content: center;

    }


    /* PAGE */

    .sccab-page {

        padding:
            70px 0 95px;

    }


    .sccab-content {

        gap: 17px;

    }


    .sccab-content-section {

        padding:
            24px 18px;

        border-radius: 20px;

    }


    .sccab-section-heading h2,
    .sccab-split-heading h2,
    .sccab-preparation h2,
    .sccab-value-section h2,
    .sccab-why h2,
    .sccab-service-area h2,
    .sccab-final h2 {

        font-size:
            clamp(35px,10.5vw,47px);

    }


    .sccab-content-section > p,
    .sccab-preparation > p,
    .sccab-value-section p,
    .sccab-service-area p,
    .sccab-final p {

        font-size: 14px;

    }


    .sccab-lead {

        font-size:
            16px !important;

    }


    /* FEATURE IMAGE */

    .sccab-feature-image {

        height: 390px;

        border-radius: 20px;

    }


    .sccab-feature-image figcaption {

        left: 13px;
        right: 13px;
        bottom: 13px;

    }


    /* SPLIT */

    .sccab-split-heading {

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

        gap: 8px;

    }


    .sccab-section-number {

        font-size: 38px;

    }


    /* DETAIL */

    .sccab-detail-grid {

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

    }


    /* IMAGE CARD */

    .sccab-image-card {

        height: 390px;

        border-radius: 20px;

    }


    .sccab-image-card-content {

        left: 18px;
        right: 18px;
        bottom: 18px;

    }


    /* PREPARATION */

    .sccab-preparation {

        padding:
            25px 18px;

        border-radius: 20px;

    }


    .sccab-preparation-top > span {

        width: 50px;
        height: 50px;

        flex-basis: 50px;

    }


    .sccab-preparation-grid {

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

    }


    /* FINISH */

    .sccab-finish-grid {

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

    }


    /* VALUE */

    .sccab-value-section {

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

        gap: 25px;

        padding:
            25px 18px;

        border-radius: 20px;

    }


    /* PROCESS */

    .sccab-process-item {

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

        gap: 13px;

    }


    .sccab-process-marker > span {

        width: 44px;
        height: 44px;

    }


    .sccab-process-marker::after {

        top: 48px;

    }


    /* WHY */

    .sccab-why {

        padding:
            25px 18px;

        border-radius: 20px;

    }


    .sccab-why-grid {

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

    }


    .sccab-why-heading > span {

        width: 50px;
        height: 50px;

        flex-basis: 50px;

    }


    /* AREA */

    .sccab-service-area {

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

        padding:
            25px 18px;

        border-radius: 20px;

    }


    .sccab-service-area-radius {

        width: 140px;
        height: 140px;

        margin:
            0 auto;

    }


    /* FINAL */

    .sccab-final {

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

        gap: 26px;

        padding:
            26px 18px;

        border-radius: 20px;

    }


    .sccab-final-actions {

        width: 100%;

        min-width: 0;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .sccab-preparation-grid {

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

    }


    .sccab-preparation-top,
    .sccab-why-heading {

        display: block;

    }


    .sccab-preparation-top > span,
    .sccab-why-heading > span {

        margin-top: 18px;

    }


    .sccab-feature-image {

        height: 340px;

    }


    .sccab-image-card {

        height: 350px;

    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 350px) {

    .sccab-container {

        width:
            calc(100% - 18px);

        max-width:
            calc(100% - 18px);

    }


    .sccab-content-section,
    .sccab-preparation,
    .sccab-value-section,
    .sccab-why,
    .sccab-service-area,
    .sccab-final {

        padding:
            21px 14px;

    }

}


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

.sccab-page a:focus-visible,
.sccab-page button:focus-visible,
.sccab-hero a:focus-visible {

    outline:
        3px solid
        var(--sccab-gold);

    outline-offset: 3px;

}


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

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

    .sccab-reveal {

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;

    }

}











/* =========================================================
   SANTA CRUZ PAINTING
   COMPACT FUTURISTIC PAINT FOOTER
========================================================= */

:root {

    --scpf-deep: #050a12;
    --scpf-dark: #09111d;
    --scpf-navy: #18243a;

    --scpf-gold: #d0a054;
    --scpf-gold-light: #f1cf8a;

    --scpf-copper: #b57a52;
    --scpf-copper-dark: #84543b;

    --scpf-cream: #f2f2ec;
    --scpf-white: #ffffff;

    --scpf-muted:
        rgba(255,255,255,.58);

    --scpf-ease:
        cubic-bezier(.22, 1, .36, 1);

}


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

.scpf-footer {

    position: relative;

    width: 100%;

    margin: 0;

    overflow: hidden;

    color:
        #ffffff;

    background:

        radial-gradient(
            circle at 12% 15%,
            rgba(208,160,84,.15),
            transparent 24%
        ),

        radial-gradient(
            circle at 82% 80%,
            rgba(181,122,82,.13),
            transparent 30%
        ),

        linear-gradient(
            125deg,
            #111c2d 0%,
            #080f1a 42%,
            #050a12 72%,
            #111a28 100%
        );

    font-family:
        "DM Sans",
        sans-serif;

    font-size:
        14px;

    isolation: isolate;

}


.scpf-footer *,
.scpf-footer *::before,
.scpf-footer *::after {

    box-sizing:
        border-box;

}


.scpf-footer a {

    color: inherit;

    text-decoration: none;

}


.scpf-footer button {

    font-family: inherit;

}


/* =========================================================
   MINIMUM FONT
========================================================= */

.scpf-footer p,
.scpf-footer a,
.scpf-footer span,
.scpf-footer small,
.scpf-footer strong,
.scpf-footer button {

    font-size:
        max(14px, 1em);

}


/* =========================================================
   CONTAINER
========================================================= */

.scpf-container {

    position: relative;

    z-index: 5;

    width:
        min(92%, 1420px);

    margin:
        0 auto;

}


/* =========================================================
   PAINT TOP
========================================================= */

.scpf-paint-top {

    position: absolute;

    z-index: 10;

    top: -35px;

    left: 0;

    width: 100%;
    height: 45px;

    pointer-events: none;

}


.scpf-paint-top svg {

    display: block;

    width: 100%;
    height: 45px;

}


.scpf-paint-fill {

    fill:
        #101a2a;

}


.scpf-paint-glow-line {

    fill: none;

    stroke:
        var(--scpf-gold);

    stroke-width:
        1.3;

    stroke-dasharray:
        14 14;

    opacity:
        .68;

    animation:
        scpfLineMove
        8s linear infinite;

}


@keyframes scpfLineMove {

    to {

        stroke-dashoffset:
            -250;

    }

}


/* =========================================================
   PAINT DRIPS
========================================================= */

.scpf-drip {

    position: absolute;

    top: 27px;

    width: 5px;

    border-radius:
        0 0 10px 10px;

    transform-origin:
        top center;

}


.scpf-drip-1 {

    left: 17%;

    height: 17px;

    background:
        var(--scpf-gold);

    animation:
        scpfDrip
        4s ease-in-out infinite;

}


.scpf-drip-2 {

    left: 39%;

    height: 10px;

    background:
        var(--scpf-copper);

    animation:
        scpfDrip
        4.3s .5s ease-in-out infinite;

}


.scpf-drip-3 {

    left: 68%;

    height: 14px;

    background:
        var(--scpf-gold-light);

    animation:
        scpfDrip
        4.6s 1s ease-in-out infinite;

}


.scpf-drip-4 {

    left: 86%;

    height: 9px;

    background:
        var(--scpf-copper);

    animation:
        scpfDrip
        4.1s 1.4s ease-in-out infinite;

}


@keyframes scpfDrip {

    0%,
    100% {

        transform:
            scaleY(.45);

        opacity:
            .55;

    }

    50% {

        transform:
            scaleY(1);

        opacity:
            1;

    }

}


/* =========================================================
   DYNAMIC BACKGROUND
========================================================= */

.scpf-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

}


/* =========================================================
   PAINT BLOBS
========================================================= */

.scpf-blob {

    position: absolute;

    border-radius:
        48% 52% 64% 36% /
        39% 45% 55% 61%;

    filter:
        blur(1px);

    opacity:
        .7;

}


.scpf-blob-1 {

    width: 350px;
    height: 350px;

    left: -190px;
    top: 40px;

    background:

        radial-gradient(
            circle at 60% 40%,
            rgba(208,160,84,.22),
            rgba(181,122,82,.05) 55%,
            transparent 70%
        );

    animation:
        scpfBlobOne
        13s ease-in-out infinite;

}


.scpf-blob-2 {

    width: 460px;
    height: 460px;

    right: -240px;
    top: 120px;

    background:

        radial-gradient(
            circle at 40% 50%,
            rgba(181,122,82,.18),
            rgba(24,36,58,.06) 55%,
            transparent 72%
        );

    animation:
        scpfBlobTwo
        15s ease-in-out infinite;

}


.scpf-blob-3 {

    width: 300px;
    height: 300px;

    left: 44%;
    bottom: -210px;

    background:

        radial-gradient(
            circle,
            rgba(208,160,84,.12),
            transparent 70%
        );

    animation:
        scpfBlobThree
        12s ease-in-out infinite;

}


@keyframes scpfBlobOne {

    50% {

        transform:
            translate(35px, 25px)
            rotate(18deg)
            scale(1.08);

    }

}


@keyframes scpfBlobTwo {

    50% {

        transform:
            translate(-35px, -22px)
            rotate(-14deg)
            scale(.94);

    }

}


@keyframes scpfBlobThree {

    50% {

        transform:
            translateY(-28px)
            scale(1.12);

    }

}


/* =========================================================
   ORBITS
========================================================= */

.scpf-orbit {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(208,160,84,.08);

}


.scpf-orbit-1 {

    width: 460px;
    height: 460px;

    right: -220px;
    top: -180px;

}


.scpf-orbit-1::before {

    content: "";

    position: absolute;

    inset: 60px;

    border-radius: inherit;

    border:
        1px solid
        rgba(208,160,84,.065);

}


.scpf-orbit-2 {

    width: 270px;
    height: 270px;

    left: 5%;
    bottom: -170px;

    border-color:
        rgba(181,122,82,.09);

}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.scpf-grid {

    position: absolute;

    inset: 0;

    opacity: .06;

    background-image:

        linear-gradient(
            rgba(255,255,255,.11) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.11) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 30%,
            #000 70%,
            transparent
        );

}


/* =========================================================
   LIGHT BEAM
========================================================= */

.scpf-light-beam {

    position: absolute;

    top: -200px;
    left: -150px;

    width: 100px;
    height: 900px;

    transform:
        rotate(27deg);

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(241,207,138,.08),
            transparent
        );

    animation:
        scpfBeam
        9s linear infinite;

}


@keyframes scpfBeam {

    0% {

        left:
            -180px;

    }

    45%,
    100% {

        left:
            120%;

    }

}


/* =========================================================
   COMPACT CTA
========================================================= */

.scpf-cta {

    position: relative;

    display: grid;

    grid-template-columns:
        1fr auto;

    align-items: center;

    gap: 35px;

    padding:
        25px 28px;

    margin-bottom:
        8px;

    overflow: hidden;

    border-radius:
        22px;

    background:

        linear-gradient(
            110deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

    border:
        1px solid
        rgba(255,255,255,.09);

    backdrop-filter:
        blur(17px);

    -webkit-backdrop-filter:
        blur(17px);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.04);

}


/* PAINT LINE IN CTA */

.scpf-cta::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background:

        linear-gradient(
            to bottom,
            var(--scpf-gold-light),
            var(--scpf-gold),
            var(--scpf-copper),
            transparent
        );

}


.scpf-cta-left {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 16px;

}


.scpf-cta-icon {

    width: 51px;
    height: 51px;

    flex:
        0 0 51px;

    display: grid;

    place-items: center;

    border-radius:
        15px;

    color:
        var(--scpf-deep);

    background:

        linear-gradient(
            145deg,
            var(--scpf-gold-light),
            var(--scpf-gold),
            var(--scpf-copper)
        );

    box-shadow:
        0 10px 26px
        rgba(208,160,84,.17);

}


.scpf-cta-label {

    display: block;

    margin-bottom: 3px;

    color:
        var(--scpf-gold-light);

    font-size: 14px;

    font-weight: 700;

}


.scpf-cta h2 {

    margin: 0;

    color:
        #ffffff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(25px, 2.3vw, 36px);

    line-height:
        1.08;

    letter-spacing:
        -.025em;

}


.scpf-cta h2 span {

    color:
        var(--scpf-gold-light);

}


/* =========================================================
   CTA ACTIONS
========================================================= */

.scpf-cta-actions {

    display: flex;

    align-items: center;

    gap: 8px;

}


.scpf-estimate-btn {

    position: relative;

    min-height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    overflow: hidden;

    padding:
        0 20px;

    border-radius:
        14px;

    color:
        var(--scpf-deep);

    background:

        linear-gradient(
            135deg,
            var(--scpf-gold-light),
            var(--scpf-gold),
            var(--scpf-copper)
        );

    font-weight: 800;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.15);

    transition:
        transform .35s var(--scpf-ease),
        box-shadow .35s ease;

}


.scpf-estimate-btn::before {

    content: "";

    position: absolute;

    top: -80%;
    left: -70px;

    width: 40px;
    height: 260%;

    transform:
        rotate(25deg);

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.65),
            transparent
        );

    transition:
        left .7s var(--scpf-ease);

}


.scpf-estimate-btn:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 36px
        rgba(208,160,84,.18);

}


.scpf-estimate-btn:hover::before {

    left: 120%;

}


/* =========================================================
   CALL
========================================================= */

.scpf-call-btn {

    min-height: 52px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        5px 11px 5px 6px;

    border-radius:
        14px;

    background:
        rgba(0,0,0,.15);

    border:
        1px solid
        rgba(255,255,255,.08);

    transition:
        transform .3s var(--scpf-ease),
        background .3s ease;

}


.scpf-call-btn:hover {

    transform:
        translateY(-3px);

    background:
        rgba(255,255,255,.06);

}


.scpf-call-icon {

    width: 40px;
    height: 40px;

    flex:
        0 0 40px;

    display: grid;

    place-items: center;

    border-radius:
        11px;

    color:
        var(--scpf-gold-light);

    background:
        rgba(208,160,84,.11);

}


.scpf-call-btn small {

    display: block;

    color:
        rgba(255,255,255,.45);

}


.scpf-call-btn strong {

    display: block;

    margin-top: 1px;

    color:
        #ffffff;

}


/* =========================================================
   MAIN GRID
========================================================= */

.scpf-main-grid {

    display: grid;

    grid-template-columns:
        1.2fr
        .7fr
        1fr
        1.25fr;

    gap:
        clamp(30px, 4vw, 60px);

    padding:
        38px 0 30px;

}


/* =========================================================
   COMPANY
========================================================= */

.scpf-company {

    max-width:
        330px;

}


.scpf-brand {

    position: relative;

    display: inline-flex;

    width: 105px;
    height: 100px;

    align-items: center;

    justify-content: center;

    margin-bottom: 14px;

}


.scpf-logo-frame {

    position: relative;

    z-index: 2;

    width: 94px;
    height: 94px;

    padding: 3px;

    overflow: hidden;

    border-radius:
        21px;

    background:
        var(--scpf-cream);

    border:
        1px solid
        rgba(208,160,84,.22);

    box-shadow:
        0 15px 30px
        rgba(0,0,0,.25);

    transition:
        transform .4s var(--scpf-ease);

}


.scpf-brand:hover
.scpf-logo-frame {

    transform:
        translateY(-4px)
        rotate(-1deg);

}


.scpf-logo-frame img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    border-radius:
        18px;

}


.scpf-logo-aura {

    position: absolute;

    z-index: 1;

    left: 50%;
    bottom: -3px;

    width: 90px;
    height: 30px;

    transform:
        translateX(-50%);

    background:

        radial-gradient(
            ellipse,
            rgba(208,160,84,.36),
            transparent 70%
        );

    filter:
        blur(9px);

}


.scpf-company > p {

    max-width:
        320px;

    margin:
        0 0 16px;

    color:
        var(--scpf-muted);

    font-size: 14px;

    line-height:
        1.65;

}


/* =========================================================
   SPECIALTY
========================================================= */

.scpf-specialty {

    width: fit-content;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        7px 10px 7px 7px;

    border-radius:
        13px;

    background:
        rgba(255,255,255,.035);

    border:
        1px solid
        rgba(255,255,255,.06);

}


.scpf-specialty > span {

    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius:
        10px;

    background:
        rgba(208,160,84,.11);

    color:
        var(--scpf-gold-light);

}


.scpf-specialty small {

    display: block;

    color:
        rgba(255,255,255,.40);

}


.scpf-specialty strong {

    display: block;

    margin-top: 1px;

    color:
        #ffffff;

}


/* =========================================================
   HEADINGS
========================================================= */

.scpf-heading {

    display: flex;

    align-items: center;

    gap: 9px;

    margin:
        9px 0 14px;

}


.scpf-heading > span {

    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    border-radius:
        9px;

    color:
        var(--scpf-gold);

    background:
        rgba(208,160,84,.08);

    border:
        1px solid
        rgba(208,160,84,.11);

    font-weight: 800;

}


.scpf-heading h3 {

    margin: 0;

    color:
        #ffffff;

    font-family:
        "Playfair Display",
        serif;

    font-size: 21px;

}


/* =========================================================
   LINKS
========================================================= */

.scpf-links {

    display: grid;

}


.scpf-links a {

    min-height:
        39px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 10px;

    padding:
        6px 0;

    color:
        rgba(255,255,255,.57);

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

    transition:
        color .3s ease,
        padding .35s var(--scpf-ease);

}


.scpf-links a i {

    color:
        var(--scpf-gold);

    opacity: 0;

    transform:
        translateX(-6px);

    transition:
        opacity .3s ease,
        transform .3s ease;

}


.scpf-links a:hover {

    padding-left:
        6px;

    color:
        var(--scpf-gold-light);

}


.scpf-links a:hover i {

    opacity: 1;

    transform:
        translateX(0);

}


/* =========================================================
   CONTACT
========================================================= */

.scpf-contact-list {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 7px;

}


.scpf-contact-item {

    min-width: 0;

    min-height:
        62px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        8px;

    border-radius:
        13px;

    background:
        rgba(255,255,255,.03);

    border:
        1px solid
        rgba(255,255,255,.045);

    transition:
        transform .3s var(--scpf-ease),
        background .3s ease;

}


a.scpf-contact-item:hover {

    transform:
        translateY(-3px);

    background:
        rgba(255,255,255,.055);

}


.scpf-contact-icon {

    width: 37px;
    height: 37px;

    flex:
        0 0 37px;

    display: grid;

    place-items: center;

    border-radius:
        10px;

    color:
        var(--scpf-gold-light);

    background:
        rgba(208,160,84,.10);

}


.scpf-contact-item > span:last-child {

    min-width: 0;

}


.scpf-contact-item small {

    display: block;

    color:
        rgba(255,255,255,.38);

}


.scpf-contact-item strong {

    display: block;

    margin-top: 1px;

    color:
        rgba(255,255,255,.84);

    line-height:
        1.35;

    overflow-wrap:
        anywhere;

}


/* =========================================================
   STATUS
========================================================= */

.scpf-status {

    display: flex !important;

    align-items: center;

    gap: 7px;

}


.scpf-status > i {

    width: 7px;
    height: 7px;

    flex:
        0 0 7px;

    border-radius: 50%;

    background:
        var(--scpf-gold);

    box-shadow:
        0 0 0 5px
        rgba(208,160,84,.09);

    animation:
        scpfStatus
        2.2s infinite;

}


@keyframes scpfStatus {

    50% {

        box-shadow:
            0 0 0 9px
            rgba(208,160,84,0);

    }

}


/* =========================================================
   SIGNATURE
========================================================= */

.scpf-signature {

    position: relative;

    min-height:
        88px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    overflow: hidden;

    padding:
        8px 0;

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

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

}


.scpf-signature-copy {

    position: relative;

    display: flex;

    align-items: baseline;

    gap: 13px;

    white-space: nowrap;

}


.scpf-signature-copy span,
.scpf-signature-copy strong {

    font-family:
        "Playfair Display",
        serif;

    line-height: 1;

}


.scpf-signature-copy span {

    color:
        rgba(255,255,255,.09);

    font-size:
        clamp(38px, 5vw, 66px);

}


.scpf-signature-copy strong {

    color:
        rgba(208,160,84,.16);

    font-size:
        clamp(42px, 5.6vw, 74px);

}


/* =========================================================
   PALETTE
========================================================= */

.scpf-palette {

    display: flex;

    align-items: center;

    padding-right:
        4px;

}


.scpf-palette span {

    width: 30px;
    height: 30px;

    margin-left:
        -6px;

    border-radius: 50%;

    border:
        3px solid
        #080f19;

    box-shadow:
        0 5px 14px
        rgba(0,0,0,.15);

    animation:
        scpfPaletteFloat
        3s ease-in-out infinite;

}


.scpf-palette span:nth-child(1) {

    background:
        #f2f2ec;

}


.scpf-palette span:nth-child(2) {

    background:
        var(--scpf-gold);

    animation-delay:
        .2s;

}


.scpf-palette span:nth-child(3) {

    background:
        var(--scpf-copper);

    animation-delay:
        .4s;

}


.scpf-palette span:nth-child(4) {

    background:
        var(--scpf-navy);

    animation-delay:
        .6s;

}


@keyframes scpfPaletteFloat {

    50% {

        transform:
            translateY(-4px);

    }

}


/* =========================================================
   BOTTOM
========================================================= */

.scpf-bottom {

    min-height:
        62px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 20px;

    padding:
        11px 0;

    color:
        rgba(255,255,255,.40);

}


.scpf-copyright {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 5px;

}


.scpf-copyright strong {

    color:
        rgba(255,255,255,.65);

}


.scpf-divider-dot {

    width: 4px;
    height: 4px;

    margin:
        0 3px;

    border-radius: 50%;

    background:
        var(--scpf-gold);

}


/* =========================================================
   CENTER MESSAGE
========================================================= */

.scpf-bottom-center {

    display: flex;

    align-items: center;

    gap: 7px;

}


.scpf-bottom-center i {

    color:
        var(--scpf-gold);

}


/* =========================================================
   LEGAL
========================================================= */

.scpf-legal {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 9px;

}


.scpf-legal a {

    color:
        rgba(255,255,255,.42);

    transition:
        color .3s ease;

}


.scpf-legal a:hover {

    color:
        var(--scpf-gold-light);

}


.scpf-legal > span {

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        var(--scpf-gold);

}


/* =========================================================
   BACK TOP
========================================================= */

.scpf-back-top {

    position: fixed;

    z-index: 12000;

    right: 20px;
    bottom: 22px;

    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    padding: 0;

    border:
        1px solid
        rgba(208,160,84,.25);

    border-radius:
        13px;

    color:
        var(--scpf-deep);

    background:

        linear-gradient(
            145deg,
            var(--scpf-gold-light),
            var(--scpf-gold)
        );

    box-shadow:
        0 13px 28px
        rgba(0,0,0,.22);

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(12px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .35s var(--scpf-ease);

}


.scpf-back-top.show {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

}


.scpf-back-top:hover {

    transform:
        translateY(-4px);

}


/* =========================================================
   RESPONSIVE 1200
========================================================= */

@media (max-width: 1200px) {

    .scpf-main-grid {

        grid-template-columns:
            1.1fr
            .8fr
            1fr;

    }


    .scpf-contact-column {

        grid-column:
            1 / -1;

    }


    .scpf-contact-list {

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

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .scpf-cta {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .scpf-cta-actions {

        width: 100%;

        justify-content:
            flex-start;

    }


    .scpf-main-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .scpf-company {

        max-width:
            none;

    }


    .scpf-contact-column {

        grid-column:
            1 / -1;

    }


    .scpf-contact-list {

        grid-template-columns:
            1fr 1fr;

    }


    .scpf-bottom {

        grid-template-columns:
            1fr;

        justify-items:
            center;

        text-align:
            center;

        gap:
            9px;

        padding:
            18px 0;

    }


    .scpf-copyright,
    .scpf-legal {

        justify-content:
            center;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .scpf-footer {

        /*
           Space for mobile app navigation
        */

        padding-bottom:
            88px;

    }


    .scpf-container {

        width:
            calc(100% - 28px);

    }


    /* CTA */

    .scpf-cta {

        padding:
            20px 17px;

        border-radius:
            18px;

    }


    .scpf-cta-left {

        align-items:
            flex-start;

    }


    .scpf-cta-icon {

        width: 43px;
        height: 43px;

        flex-basis:
            43px;

    }


    .scpf-cta h2 {

        font-size:
            27px;

    }


    .scpf-cta-actions {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 7px;

    }


    .scpf-estimate-btn,
    .scpf-call-btn {

        width: 100%;

        min-width: 0;

    }


    .scpf-estimate-btn {

        padding:
            0 10px;

    }


    .scpf-call-btn {

        overflow: hidden;

    }


    .scpf-call-btn > span:last-child {

        min-width: 0;

    }


    .scpf-call-btn small,
    .scpf-call-btn strong {

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

    }


    /* MAIN */

    .scpf-main-grid {

        grid-template-columns:
            1fr;

        gap:
            25px;

        padding:
            30px 0 25px;

    }


    .scpf-company {

        max-width:
            100%;

    }


    .scpf-contact-column {

        grid-column:
            auto;

    }


    .scpf-contact-list {

        grid-template-columns:
            1fr;

    }


    .scpf-contact-item {

        min-height:
            58px;

    }


    /* SIGNATURE */

    .scpf-signature {

        min-height:
            75px;

    }


    .scpf-signature-copy {

        gap:
            7px;

    }


    .scpf-signature-copy span {

        font-size:
            37px;

    }


    .scpf-signature-copy strong {

        font-size:
            42px;

    }


    .scpf-palette {

        display:
            none;

    }


    /* BOTTOM */

    .scpf-bottom-center {

        display:
            none;

    }


    /*
       Back to top above mobile app bar
    */

    .scpf-back-top {

        right:
            13px;

        bottom:
            96px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 450px) {

    .scpf-cta-actions {

        grid-template-columns:
            1fr;

    }


    .scpf-call-btn {

        justify-content:
            center;

    }


    .scpf-signature {

        min-height:
            68px;

    }


    .scpf-signature-copy {

        display: block;

    }


    .scpf-signature-copy span {

        display: block;

        font-size:
            29px;

    }


    .scpf-signature-copy strong {

        display: block;

        margin-top:
            -3px;

        font-size:
            38px;

    }

}


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

.scpf-footer a:focus-visible,
.scpf-footer button:focus-visible {

    outline:
        3px solid
        var(--scpf-gold-light);

    outline-offset:
        3px;

}


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

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

    .scpf-footer *,
    .scpf-footer *::before,
    .scpf-footer *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}

/* =========================================================
   SANTA CRUZ PAINTING
   PROFESSIONAL PROJECTS GALLERY
========================================================= */

:root {

    --scpg-dark: #07101d;
    --scpg-dark-2: #0b1524;
    --scpg-navy: #18243a;

    --scpg-gold: #d0a054;
    --scpg-gold-light: #f0cd86;
    --scpg-copper: #b57a52;

    --scpg-white: #ffffff;
    --scpg-cream: #f4f2ec;

    --scpg-text: #182133;
    --scpg-muted: #707885;

    --scpg-ease:
        cubic-bezier(.22,1,.36,1);

}


/* =========================================================
   OVERFLOW PROTECTION
========================================================= */

html,
body {

    width: 100%;
    max-width: 100%;

    overflow-x: clip;

}


.scpg-breadcrumb,
.scpg-gallery-section,
.scpg-container,
.scpg-gallery-header,
.scpg-filter-shell,
.scpg-grid,
.scpg-project {

    min-width: 0;

    max-width: 100%;

}


.scpg-breadcrumb *,
.scpg-gallery-section *,
.scpg-lightbox *,
.scpg-breadcrumb *::before,
.scpg-breadcrumb *::after,
.scpg-gallery-section *::before,
.scpg-gallery-section *::after {

    box-sizing: border-box;

}


.scpg-breadcrumb a,
.scpg-gallery-section a {

    text-decoration: none;

}


.scpg-gallery-section button,
.scpg-lightbox button {

    font-family: inherit;

}


/* =========================================================
   CONTAINER
========================================================= */

.scpg-container {

    position: relative;

    z-index: 5;

    width:
        min(calc(100% - 40px),1450px);

    margin: 0 auto;

}


/* =========================================================
   BREADCRUMB
========================================================= */

.scpg-breadcrumb {

    position: relative;

    min-height: 480px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: #fff;

    background:
        var(--scpg-dark);

    isolation: isolate;

}


.scpg-breadcrumb-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        url("https://santacruzpaintingllc.com/assets/img/service/Painting%20Services.webp");

    background-size: cover;

    background-position: center;

    transform: scale(1.04);

}


.scpg-breadcrumb-overlay {

    position: absolute;

    z-index: 1;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(4,10,18,.98) 0%,
            rgba(7,16,29,.93) 39%,
            rgba(7,16,29,.72) 68%,
            rgba(7,16,29,.38) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,.05),
            rgba(0,0,0,.30)
        );

}


/* =========================================================
   DECORATION
========================================================= */

.scpg-breadcrumb-decoration {

    position: absolute;

    z-index: 2;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

}


.scpg-breadcrumb-decoration span {

    position: absolute;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(208,160,84,.50),
            transparent
        );

}


.scpg-breadcrumb-decoration span:nth-child(1) {

    width: 48%;

    right: -6%;
    top: 29%;

    transform: rotate(-8deg);

}


.scpg-breadcrumb-decoration span:nth-child(2) {

    width: 37%;

    right: 7%;
    top: 62%;

    transform: rotate(6deg);

}


.scpg-breadcrumb-decoration span:nth-child(3) {

    width: 26%;

    left: -5%;
    bottom: 13%;

    transform: rotate(-5deg);

}


/* =========================================================
   BREADCRUMB INNER
========================================================= */

.scpg-breadcrumb-inner {

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(250px,.35fr);

    align-items: end;

    gap: 70px;

    padding:
        115px 0 75px;

}


/* =========================================================
   EYEBROW
========================================================= */

.scpg-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 13px;

    color:
        var(--scpg-copper);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .07em;

    text-transform: uppercase;

}


.scpg-eyebrow > span {

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color:
        var(--scpg-dark);

    background:

        linear-gradient(
            145deg,
            var(--scpg-gold-light),
            var(--scpg-gold)
        );

}


.scpg-eyebrow-light {

    color:
        var(--scpg-gold-light);

}


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

.scpg-breadcrumb h1 {

    max-width: 900px;

    margin:
        0 0 19px;

    color: #fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(58px,7vw,105px);

    line-height: .87;

    letter-spacing: -.055em;

}


.scpg-breadcrumb h1 em {

    display: block;

    color:
        var(--scpg-gold-light);

    font-style: normal;

}


.scpg-breadcrumb-copy > p {

    max-width: 680px;

    margin:
        0 0 25px;

    color:
        rgba(255,255,255,.62);

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   BREADCRUMB NAV
========================================================= */

.scpg-breadcrumb-nav {

    display: inline-flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    min-height: 42px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 100px;

    background:
        rgba(255,255,255,.055);

    backdrop-filter:
        blur(12px);

}


.scpg-breadcrumb-nav a,
.scpg-breadcrumb-nav span,
.scpg-breadcrumb-nav i {

    font-size: 14px;

}


.scpg-breadcrumb-nav a {

    color: #fff;

}


.scpg-breadcrumb-nav span {

    color:
        rgba(255,255,255,.48);

}


.scpg-breadcrumb-nav i {

    color:
        var(--scpg-gold);

}


/* =========================================================
   SIDE
========================================================= */

.scpg-breadcrumb-side {

    display: grid;

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

    gap: 20px;

}


.scpg-breadcrumb-side-line {

    min-height: 105px;

    background:

        linear-gradient(
            transparent,
            var(--scpg-gold),
            transparent
        );

}


.scpg-breadcrumb-side small,
.scpg-breadcrumb-side strong {

    display: block;

}


.scpg-breadcrumb-side small {

    margin-bottom: 8px;

    color:
        var(--scpg-gold-light);

    font-size: 14px;

}


.scpg-breadcrumb-side strong {

    color:
        rgba(255,255,255,.77);

    font-family:
        "Playfair Display",
        serif;

    font-size: 23px;

    line-height: 1.3;

}


/* =========================================================
   GALLERY SECTION
========================================================= */

.scpg-gallery-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        105px 0 115px;

    background:

        radial-gradient(
            circle at 8% 15%,
            rgba(208,160,84,.12),
            transparent 27%
        ),

        radial-gradient(
            circle at 92% 82%,
            rgba(24,36,58,.08),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #fbfaf6,
            #f1f0ea
        );

    isolation: isolate;

}


/* =========================================================
   BACKGROUND
========================================================= */

.scpg-gallery-bg {

    position: absolute;

    z-index: 0;

    inset: 0;

    pointer-events: none;

}


.scpg-grid-bg {

    position: absolute;

    inset: 0;

    opacity: .24;

    background-image:

        linear-gradient(
            rgba(24,36,58,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(24,36,58,.035) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

}


.scpg-orb {

    position: absolute;

    border:
        1px solid
        rgba(181,122,82,.12);

    border-radius: 50%;

}


.scpg-orb-one {

    width: 500px;
    height: 500px;

    right: -260px;
    top: 120px;

}


.scpg-orb-two {

    width: 360px;
    height: 360px;

    left: -230px;
    bottom: 8%;

}


/* =========================================================
   GALLERY HEADER
========================================================= */

.scpg-gallery-header {

    display: grid;

    grid-template-columns:
        minmax(0,1.2fr)
        minmax(0,.8fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 40px;

}


.scpg-gallery-heading,
.scpg-gallery-intro {

    min-width: 0;

}


.scpg-gallery-heading h2 {

    margin: 0;

    color:
        var(--scpg-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(45px,4.7vw,72px);

    line-height: .98;

    letter-spacing: -.045em;

}


.scpg-gallery-heading h2 span {

    display: block;

    color:
        var(--scpg-copper);

}


/* =========================================================
   GALLERY INTRO
========================================================= */

.scpg-gallery-intro {

    display: grid;

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

    align-items: end;

    gap: 25px;

}


.scpg-gallery-intro p {

    margin: 0;

    color:
        var(--scpg-muted);

    font-size: 15px;

    line-height: 1.7;

}


.scpg-gallery-count {

    display: flex;

    align-items: center;

    gap: 8px;

}


.scpg-gallery-count > span {

    color:
        var(--scpg-copper);

    font-family:
        "Playfair Display",
        serif;

    font-size: 50px;

    line-height: .85;

}


.scpg-gallery-count small {

    color:
        var(--scpg-muted);

    font-size: 14px;

    line-height: 1.15;

}


/* =========================================================
   FILTER SHELL
========================================================= */

.scpg-filter-shell {

    width: 100%;

    display: grid;

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

    align-items: center;

    gap: 24px;

    margin-bottom: 22px;

    padding: 12px;

    border:
        1px solid
        rgba(7,16,29,.08);

    border-radius: 20px;

    background:
        rgba(255,255,255,.78);

    backdrop-filter:
        blur(15px);

    box-shadow:
        0 12px 35px
        rgba(7,16,29,.05);

}


.scpg-filter-info {

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        0 10px;

}


.scpg-filter-info > span {

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color:
        var(--scpg-copper);

    background:
        rgba(208,160,84,.11);

}


.scpg-filter-info small,
.scpg-filter-info strong {

    display: block;

    font-size: 14px;

}


.scpg-filter-info small {

    color:
        var(--scpg-muted);

}


.scpg-filter-info strong {

    color:
        var(--scpg-dark);

}


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

.scpg-filters {

    min-width: 0;

    display: flex;

    justify-content: flex-end;

    gap: 6px;

    overflow-x: auto;

    overscroll-behavior-x: contain;

    scrollbar-width: none;

}


.scpg-filters::-webkit-scrollbar {

    display: none;

}


.scpg-filter {

    flex: 0 0 auto;

    min-height: 43px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(7,16,29,.08);

    border-radius: 100px;

    color:
        var(--scpg-muted);

    background: #fff;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:

        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .25s var(--scpg-ease);

}


.scpg-filter:hover {

    transform:
        translateY(-2px);

}


.scpg-filter > span {

    min-width: 24px;
    height: 24px;

    display: grid;

    place-items: center;

    padding: 0 5px;

    border-radius: 100px;

    color:
        var(--scpg-copper);

    background:
        rgba(208,160,84,.10);

    font-size: 14px;

}


.scpg-filter.active {

    color: #fff;

    background:
        var(--scpg-navy);

    border-color:
        var(--scpg-navy);

}


.scpg-filter.active > span {

    color:
        var(--scpg-dark);

    background:
        var(--scpg-gold-light);

}


/* =========================================================
   PROJECT GRID
========================================================= */

.scpg-grid {

    width: 100%;

    display: grid;

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

    grid-auto-flow: dense;

    grid-auto-rows: 235px;

    gap: 10px;

}


/* =========================================================
   PROJECT SIZES
========================================================= */

.scpg-project {

    grid-column:
        span 4;

    grid-row:
        span 2;

    min-width: 0;

    overflow: hidden;

    border-radius: 20px;

    background:
        #d9d7d0;

}


.scpg-project-large {

    grid-column:
        span 8;

}


.scpg-project-wide {

    grid-column:
        span 8;

}


.scpg-project-tall {

    grid-column:
        span 4;

    grid-row:
        span 3;

}


.scpg-project.scpg-hidden {

    display: none;

}


/* =========================================================
   PROJECT BUTTON
========================================================= */

.scpg-project-button {

    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    display: block;

    padding: 0;

    border: 0;

    border-radius: inherit;

    background:
        #d8d7d1;

    cursor: pointer;

    text-align: left;

}


/* =========================================================
   PROJECT IMAGE
========================================================= */

.scpg-project-button > img {

    position: absolute;

    inset: 0;

    display: block;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    object-fit: cover;

    object-position: center;

    transition:

        transform .7s
        var(--scpg-ease),

        filter .4s ease;

}


.scpg-project:hover
.scpg-project-button > img {

    transform:
        scale(1.055);

}


/* =========================================================
   GRADIENT
========================================================= */

.scpg-project-gradient {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(7,16,29,.22) 0%,
            transparent 38%,
            transparent 52%,
            rgba(7,16,29,.86) 100%
        );

    pointer-events: none;

}


/* =========================================================
   PROJECT TOP
========================================================= */

.scpg-project-top {

    position: absolute;

    z-index: 4;

    left: 13px;
    right: 13px;
    top: 13px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}


.scpg-project-category {

    max-width:
        calc(100% - 52px);

    min-height: 35px;

    display: flex;

    align-items: center;

    padding:
        0 11px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.20);

    border-radius: 100px;

    color: #fff;

    background:
        rgba(7,16,29,.45);

    backdrop-filter:
        blur(10px);

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 14px;

    font-weight: 700;

}


.scpg-project-open {

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.19);

    border-radius: 12px;

    color: #fff;

    background:
        rgba(7,16,29,.44);

    backdrop-filter:
        blur(10px);

    transition:

        color .25s ease,
        background .25s ease,
        transform .25s ease;

}


.scpg-project:hover
.scpg-project-open {

    transform:
        scale(1.06);

    color:
        var(--scpg-dark);

    background:
        var(--scpg-gold-light);

}


/* =========================================================
   PROJECT BOTTOM
========================================================= */

.scpg-project-bottom {

    position: absolute;

    z-index: 4;

    left: 15px;
    right: 15px;
    bottom: 15px;

    display: grid;

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

    align-items: end;

    gap: 12px;

    color: #fff;

}


.scpg-project-number {

    color:
        var(--scpg-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size: 38px;

    line-height: .9;

}


.scpg-project-bottom small {

    display: block;

    margin-bottom: 2px;

    color:
        rgba(255,255,255,.55);

    font-size: 14px;

}


.scpg-project-bottom h3 {

    margin: 0;

    overflow-wrap: anywhere;

    color: #fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(20px,2vw,28px);

    line-height: 1.05;

}


/* =========================================================
   GALLERY FOOTER
========================================================= */

.scpg-gallery-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-top: 24px;

    padding:
        18px 20px;

    border:
        1px solid
        rgba(7,16,29,.08);

    border-radius: 18px;

    background:
        rgba(255,255,255,.72);

}


.scpg-gallery-footer > div {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 10px;

}


.scpg-gallery-footer > div > span {

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color:
        var(--scpg-copper);

    background:
        rgba(208,160,84,.11);

}


.scpg-gallery-footer small,
.scpg-gallery-footer strong {

    display: block;

    font-size: 14px;

}


.scpg-gallery-footer small {

    color:
        var(--scpg-muted);

}


.scpg-gallery-footer strong {

    color:
        var(--scpg-dark);

}


.scpg-gallery-footer > a {

    min-height: 48px;

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        0 8px 0 16px;

    border-radius: 13px;

    color: #fff;

    background:
        var(--scpg-navy);

    font-size: 14px;

    font-weight: 800;

}


.scpg-gallery-footer > a > span {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    color:
        var(--scpg-dark);

    background:
        var(--scpg-gold-light);

}


/* =========================================================
   FILTER ANIMATION
========================================================= */

.scpg-project.scpg-filter-enter {

    animation:
        scpgProjectIn
        .46s
        var(--scpg-ease)
        both;

}


@keyframes scpgProjectIn {

    from {

        opacity: 0;

        transform:
            translateY(16px)
            scale(.985);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   LIGHTBOX
========================================================= */

.scpg-lightbox {

    position: fixed;

    z-index: 999999;

    inset: 0;

    width: 100vw;
    max-width: 100vw;

    height: 100vh;
    height: 100dvh;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    opacity: 0;

    visibility: hidden;

    transition:

        opacity .3s ease,
        visibility .3s ease;

}


.scpg-lightbox.is-open {

    opacity: 1;

    visibility: visible;

}


.scpg-lightbox-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(3,7,13,.96);

    backdrop-filter:
        blur(14px);

}


/* =========================================================
   LIGHTBOX TOP
========================================================= */

.scpg-lightbox-top {

    position: relative;

    z-index: 5;

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        12px 22px;

}


.scpg-lightbox-brand {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 10px;

}


.scpg-lightbox-brand > span {

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color:
        var(--scpg-dark);

    background:
        var(--scpg-gold-light);

}


.scpg-lightbox-brand small,
.scpg-lightbox-brand strong {

    display: block;

    font-size: 14px;

}


.scpg-lightbox-brand small {

    color:
        var(--scpg-gold-light);

}


.scpg-lightbox-brand strong {

    max-width: 500px;

    overflow: hidden;

    color: #fff;

    white-space: nowrap;

    text-overflow: ellipsis;

}


/* =========================================================
   LIGHTBOX CLOSE
========================================================= */

.scpg-lightbox-close {

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 50%;

    color: #fff;

    background:
        rgba(255,255,255,.06);

    font-size: 19px;

    cursor: pointer;

    transition:

        color .2s ease,
        background .2s ease,
        transform .2s ease;

}


.scpg-lightbox-close:hover {

    transform:
        rotate(5deg);

    color:
        var(--scpg-dark);

    background:
        var(--scpg-gold-light);

}


/* =========================================================
   LIGHTBOX VIEWER
========================================================= */

.scpg-lightbox-viewer {

    position: relative;

    z-index: 5;

    min-height: 0;

    width: 100%;

    flex: 1;

    display: grid;

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

    align-items: center;

    gap: 12px;

    padding:
        8px 20px;

}


.scpg-lightbox-image-area {

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}


.scpg-lightbox-image-area img {

    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain;

    border-radius: 12px;

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.40);

}


/* =========================================================
   LIGHTBOX NAV
========================================================= */

.scpg-lightbox-nav {

    width: 55px;
    height: 55px;

    display: grid;

    place-items: center;

    justify-self: center;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 50%;

    color: #fff;

    background:
        rgba(255,255,255,.06);

    font-size: 16px;

    cursor: pointer;

    transition:

        color .22s ease,
        background .22s ease,
        transform .22s ease;

}


.scpg-lightbox-nav:hover {

    transform:
        scale(1.05);

    color:
        var(--scpg-dark);

    background:
        var(--scpg-gold-light);

}


/* =========================================================
   LIGHTBOX BOTTOM
========================================================= */

.scpg-lightbox-bottom {

    position: relative;

    z-index: 5;

    min-height: 68px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        10px 22px;

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

}


.scpg-lightbox-bottom > div {

    display: flex;

    align-items: center;

    gap: 11px;

}


.scpg-lightbox-bottom small {

    color:
        var(--scpg-gold-light);

    font-size: 14px;

}


.scpg-lightbox-bottom strong {

    color: #fff;

    font-size: 14px;

}


.scpg-lightbox-bottom > span {

    color:
        rgba(255,255,255,.42);

    font-size: 14px;

}


/* =========================================================
   REVEAL
========================================================= */

.scpg-reveal {

    opacity: 0;

    transform:
        translateY(24px);

    transition:

        opacity .7s ease,
        transform .7s
        var(--scpg-ease);

}


.scpg-reveal.scpg-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .scpg-grid {

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

        grid-auto-rows:
            210px;

    }


    .scpg-project,
    .scpg-project-tall {

        grid-column:
            span 3;

        grid-row:
            span 2;

    }


    .scpg-project-large,
    .scpg-project-wide {

        grid-column:
            span 6;

        grid-row:
            span 2;

    }


    .scpg-filter-shell {

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

        gap: 10px;

    }


    .scpg-filters {

        justify-content:
            flex-start;

    }

}


/* =========================================================
   TABLET PORTRAIT
========================================================= */

@media (max-width: 850px) {

    .scpg-breadcrumb-inner {

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

    }


    .scpg-breadcrumb-side {

        display: none;

    }


    .scpg-gallery-header {

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

        gap: 18px;

    }


    .scpg-gallery-intro {

        max-width: 700px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    html,
    body {

        overflow-x: hidden;

    }


    .scpg-container {

        width:
            calc(100% - 24px);

        max-width:
            calc(100% - 24px);

    }


    /* BREADCRUMB */

    .scpg-breadcrumb {

        min-height: 455px;

    }


    .scpg-breadcrumb-inner {

        padding:
            90px 0 55px;

    }


    .scpg-breadcrumb h1 {

        font-size:
            clamp(55px,17vw,80px);

    }


    .scpg-breadcrumb-copy > p {

        font-size: 14px;

    }


    /* GALLERY */

    .scpg-gallery-section {

        padding:
            75px 0 95px;

    }


    .scpg-gallery-header {

        margin-bottom: 27px;

    }


    .scpg-gallery-heading h2 {

        font-size:
            clamp(39px,11vw,50px);

    }


    .scpg-gallery-intro {

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

        gap: 12px;

    }


    .scpg-gallery-intro p {

        font-size: 14px;

    }


    .scpg-gallery-count > span {

        font-size: 42px;

    }


    /* FILTER */

    .scpg-filter-shell {

        padding: 9px;

        border-radius: 16px;

    }


    .scpg-filter-info {

        padding:
            2px 5px;

    }


    .scpg-filters {

        width: 100%;

        max-width: 100%;

        justify-content:
            flex-start;

        overflow-x: auto;

        padding-bottom: 2px;

    }


    /* PROJECT GRID */

    .scpg-grid {

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

        grid-auto-rows:
            220px;

        gap: 8px;

    }


    .scpg-project,
    .scpg-project-large,
    .scpg-project-wide,
    .scpg-project-tall {

        grid-column:
            span 1;

        grid-row:
            span 1;

    }


    .scpg-project:nth-child(1),
    .scpg-project:nth-child(5),
    .scpg-project:nth-child(9) {

        grid-column:
            1 / -1;

        height: 330px;

    }


    .scpg-project {

        border-radius: 16px;

    }


    .scpg-project-bottom {

        left: 10px;
        right: 10px;
        bottom: 11px;

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

        gap: 2px;

    }


    .scpg-project-number {

        display: none;

    }


    .scpg-project-bottom h3 {

        font-size: 20px;

    }


    .scpg-project-top {

        left: 9px;
        right: 9px;
        top: 9px;

    }


    .scpg-project-open {

        width: 37px;
        height: 37px;

        flex-basis: 37px;

    }


    /* GALLERY FOOTER */

    .scpg-gallery-footer {

        align-items: stretch;

        flex-direction: column;

        padding: 15px;

    }


    .scpg-gallery-footer > a {

        width: 100%;

        justify-content:
            space-between;

    }


    /* LIGHTBOX */

    .scpg-lightbox-top {

        min-height: 70px;

        padding:
            10px 12px;

    }


    .scpg-lightbox-viewer {

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

        padding:
            8px 10px 78px;

    }


    .scpg-lightbox-nav {

        position: absolute;

        z-index: 20;

        bottom: 13px;

        width: 50px;
        height: 50px;

    }


    .scpg-lightbox-prev {

        left:
            calc(50% - 60px);

    }


    .scpg-lightbox-next {

        right:
            calc(50% - 60px);

    }


    .scpg-lightbox-bottom {

        position: absolute;

        z-index: 10;

        left: 0;
        right: 0;
        bottom: 69px;

        min-height: 48px;

        justify-content: center;

        border: 0;

    }


    .scpg-lightbox-bottom > span {

        display: none;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .scpg-gallery-intro {

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

    }


    .scpg-gallery-count {

        margin-top: 5px;

    }


    .scpg-grid {

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

        grid-auto-rows:
            330px;

    }


    .scpg-project,
    .scpg-project-large,
    .scpg-project-wide,
    .scpg-project-tall,
    .scpg-project:nth-child(1),
    .scpg-project:nth-child(5),
    .scpg-project:nth-child(9) {

        grid-column: 1;

        grid-row: auto;

        width: 100%;
        height: 330px;

    }


    .scpg-project-bottom h3 {

        font-size: 23px;

    }


    .scpg-breadcrumb-nav {

        width: 100%;

        justify-content: center;

    }


    .scpg-lightbox-brand > span {

        width: 38px;
        height: 38px;

        flex-basis: 38px;

    }


    .scpg-lightbox-close {

        width: 44px;
        height: 44px;

        flex-basis: 44px;

    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 350px) {

    .scpg-container {

        width:
            calc(100% - 18px);

        max-width:
            calc(100% - 18px);

    }


    .scpg-project,
    .scpg-project-large,
    .scpg-project-wide,
    .scpg-project-tall,
    .scpg-project:nth-child(1),
    .scpg-project:nth-child(5),
    .scpg-project:nth-child(9) {

        height: 300px;

    }

}


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

.scpg-gallery-section button:focus-visible,
.scpg-gallery-section a:focus-visible,
.scpg-breadcrumb a:focus-visible,
.scpg-lightbox button:focus-visible {

    outline:
        3px solid
        var(--scpg-gold);

    outline-offset: 3px;

}


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

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

    .scpg-reveal {

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;

    }


    .scpg-project,
    .scpg-project-button img {

        transition: none !important;

    }

}

/* =========================================================
   SANTA CRUZ PAINTING
   CONTACT PAGE
========================================================= */

:root {

    --scc-dark: #07101d;
    --scc-dark-2: #0b1524;
    --scc-navy: #18243a;

    --scc-gold: #d0a054;
    --scc-gold-light: #f0cd86;
    --scc-copper: #b57a52;

    --scc-white: #ffffff;
    --scc-cream: #f4f2ec;

    --scc-text: #182133;
    --scc-muted: #707885;

    --scc-success: #3d8062;
    --scc-error: #a84d4d;

    --scc-ease:
        cubic-bezier(.22,1,.36,1);

}


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

html,
body {

    width: 100%;
    max-width: 100%;

    overflow-x: clip;

}


.scc-breadcrumb,
.scc-contact,
.scc-process,
.scc-container,
.scc-contact-app,
.scc-form-panel,
.scc-contact-info {

    min-width: 0;

    max-width: 100%;

}


.scc-breadcrumb *,
.scc-contact *,
.scc-process *,
.scc-breadcrumb *::before,
.scc-breadcrumb *::after,
.scc-contact *::before,
.scc-contact *::after,
.scc-process *::before,
.scc-process *::after {

    box-sizing: border-box;

}


.scc-breadcrumb a,
.scc-contact a,
.scc-process a {

    text-decoration: none;

}


.scc-contact button,
.scc-contact input,
.scc-contact textarea,
.scc-contact select {

    font-family: inherit;

}


.scc-container {

    position: relative;

    z-index: 5;

    width:
        min(calc(100% - 40px),1450px);

    margin: 0 auto;

}


/* =========================================================
   COMMON EYEBROW
========================================================= */

.scc-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 13px;

    color:
        var(--scc-copper);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .07em;

    text-transform: uppercase;

}


.scc-eyebrow > span {

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color:
        var(--scc-dark);

    background:

        linear-gradient(
            145deg,
            var(--scc-gold-light),
            var(--scc-gold)
        );

}


.scc-eyebrow-light {

    color:
        var(--scc-gold-light);

}


/* =========================================================
   BREADCRUMB
========================================================= */

.scc-breadcrumb {

    position: relative;

    min-height: 480px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: #fff;

    background:
        var(--scc-dark);

    isolation: isolate;

}


.scc-breadcrumb-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        url("https://santacruzpaintingllc.com/assets/img/service/Painting%20Services.webp");

    background-size: cover;

    background-position: center;

    transform:
        scale(1.04);

}


.scc-breadcrumb-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(4,10,18,.98) 0%,
            rgba(7,16,29,.94) 40%,
            rgba(7,16,29,.72) 70%,
            rgba(7,16,29,.40) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,.05),
            rgba(0,0,0,.28)
        );

}


/* =========================================================
   BREADCRUMB LINES
========================================================= */

.scc-breadcrumb-lines {

    position: absolute;

    inset: 0;

    z-index: 2;

    overflow: hidden;

    pointer-events: none;

}


.scc-breadcrumb-lines span {

    position: absolute;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(208,160,84,.50),
            transparent
        );

}


.scc-breadcrumb-lines span:nth-child(1) {

    width: 49%;

    right: -8%;
    top: 28%;

    transform:
        rotate(-8deg);

}


.scc-breadcrumb-lines span:nth-child(2) {

    width: 37%;

    right: 8%;
    top: 62%;

    transform:
        rotate(7deg);

}


.scc-breadcrumb-lines span:nth-child(3) {

    width: 28%;

    left: -7%;
    bottom: 15%;

    transform:
        rotate(-6deg);

}


/* =========================================================
   BREADCRUMB INNER
========================================================= */

.scc-breadcrumb-inner {

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(260px,.36fr);

    align-items: end;

    gap: 70px;

    padding:
        115px 0 75px;

}


/* =========================================================
   BREADCRUMB TITLE
========================================================= */

.scc-breadcrumb h1 {

    max-width: 930px;

    margin:
        0 0 20px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(58px,7vw,105px);

    line-height: .87;

    letter-spacing: -.055em;

}


.scc-breadcrumb h1 em {

    display: block;

    color:
        var(--scc-gold-light);

    font-style: normal;

}


.scc-breadcrumb-copy > p {

    max-width: 680px;

    margin:
        0 0 25px;

    color:
        rgba(255,255,255,.62);

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   BREADCRUMB NAV
========================================================= */

.scc-breadcrumb-nav {

    display: inline-flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    min-height: 42px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 100px;

    background:
        rgba(255,255,255,.055);

    backdrop-filter: blur(12px);

}


.scc-breadcrumb-nav a,
.scc-breadcrumb-nav span,
.scc-breadcrumb-nav i {

    font-size: 14px;

}


.scc-breadcrumb-nav a {

    color: #fff;

}


.scc-breadcrumb-nav i {

    color:
        var(--scc-gold);

}


.scc-breadcrumb-nav span {

    color:
        rgba(255,255,255,.48);

}


/* =========================================================
   BREADCRUMB SIDE
========================================================= */

.scc-breadcrumb-side {

    display: grid;

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

    gap: 20px;

}


.scc-breadcrumb-side > span {

    min-height: 105px;

    background:

        linear-gradient(
            transparent,
            var(--scc-gold),
            transparent
        );

}


.scc-breadcrumb-side small,
.scc-breadcrumb-side strong {

    display: block;

}


.scc-breadcrumb-side small {

    margin-bottom: 8px;

    color:
        var(--scc-gold-light);

    font-size: 14px;

}


.scc-breadcrumb-side strong {

    color:
        rgba(255,255,255,.76);

    font-family:
        "Playfair Display",
        serif;

    font-size: 23px;

    line-height: 1.3;

}


/* =========================================================
   CONTACT SECTION
========================================================= */

.scc-contact {

    position: relative;

    overflow: hidden;

    padding:
        105px 0 110px;

    background:

        radial-gradient(
            circle at 7% 13%,
            rgba(208,160,84,.13),
            transparent 26%
        ),

        radial-gradient(
            circle at 94% 88%,
            rgba(24,36,58,.08),
            transparent 29%
        ),

        linear-gradient(
            135deg,
            #fbfaf6,
            #efeee9
        );

    isolation: isolate;

}


/* =========================================================
   BACKGROUND
========================================================= */

.scc-contact-background {

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

}


.scc-grid-bg {

    position: absolute;

    inset: 0;

    opacity: .23;

    background-image:

        linear-gradient(
            rgba(24,36,58,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(24,36,58,.035) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

}


.scc-orb {

    position: absolute;

    border:
        1px solid
        rgba(181,122,82,.12);

    border-radius: 50%;

}


.scc-orb-one {

    width: 510px;
    height: 510px;

    right: -290px;
    top: 80px;

}


.scc-orb-two {

    width: 370px;
    height: 370px;

    left: -230px;
    bottom: 0;

}


.scc-paint-glow {

    position: absolute;

    width: 400px;
    height: 400px;

    left: 46%;
    top: 42%;

    border-radius: 50%;

    background:
        rgba(208,160,84,.12);

    filter:
        blur(100px);

}


/* =========================================================
   CONTACT HEADING
========================================================= */

.scc-contact-heading {

    display: grid;

    grid-template-columns:
        minmax(0,1.18fr)
        minmax(0,.82fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 42px;

}


.scc-contact-heading h2,
.scc-process-heading h2 {

    max-width: 850px;

    margin: 0;

    color:
        var(--scc-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(44px,4.7vw,72px);

    line-height: .98;

    letter-spacing: -.045em;

}


.scc-contact-heading h2 span,
.scc-process-heading h2 span {

    display: block;

    color:
        var(--scc-copper);

}


.scc-contact-heading > p {

    max-width: 500px;

    justify-self: end;

    margin: 0;

    color:
        var(--scc-muted);

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   CONTACT APP
========================================================= */

.scc-contact-app {

    display: grid;

    grid-template-columns:
        minmax(360px,.72fr)
        minmax(0,1.28fr);

    border:
        1px solid
        rgba(7,16,29,.08);

    border-radius: 30px;

    overflow: hidden;

    background:
        rgba(255,255,255,.82);

    box-shadow:
        0 35px 80px
        rgba(7,16,29,.12);

}


/* =========================================================
   CONTACT INFO SIDE
========================================================= */

.scc-contact-info {

    position: relative;

    overflow: hidden;

    padding:
        32px;

    color: #fff;

    background:

        radial-gradient(
            circle at 10% 10%,
            rgba(208,160,84,.16),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            var(--scc-dark),
            #101e32
        );

}


.scc-contact-info::after {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -230px;
    bottom: -190px;

    border:
        1px solid
        rgba(208,160,84,.14);

    border-radius: 50%;

    pointer-events: none;

}


/* =========================================================
   INFO TOP
========================================================= */

.scc-info-top {

    position: relative;

    z-index: 2;

}


.scc-info-label {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height: 34px;

    padding:
        0 11px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 100px;

    color:
        rgba(255,255,255,.64);

    background:
        rgba(255,255,255,.045);

    font-size: 14px;

}


.scc-info-label i {

    color:
        var(--scc-gold);

    font-size: 7px;

    filter:
        drop-shadow(
            0 0 5px
            rgba(208,160,84,.70)
        );

}


.scc-info-top h3 {

    margin:
        24px 0 13px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(34px,3.3vw,50px);

    line-height: .98;

    letter-spacing: -.04em;

}


.scc-info-top h3 span {

    display: block;

    color:
        var(--scc-gold-light);

}


.scc-info-top > p {

    margin: 0;

    color:
        rgba(255,255,255,.52);

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   CONTACT METHODS
========================================================= */

.scc-contact-methods {

    position: relative;

    z-index: 2;

    display: grid;

    gap: 7px;

    margin-top: 30px;

}


.scc-contact-method {

    min-width: 0;

    display: grid;

    grid-template-columns:
        45px minmax(0,1fr) 24px;

    align-items: center;

    gap: 10px;

    min-height: 83px;

    padding:
        9px 10px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius: 15px;

    color: #fff;

    background:
        rgba(255,255,255,.035);

    transition:

        transform .25s
        var(--scc-ease),

        background .25s ease,

        border-color .25s ease;

}


a.scc-contact-method:hover {

    transform:
        translateX(5px);

    border-color:
        rgba(208,160,84,.20);

    background:
        rgba(255,255,255,.065);

}


.scc-method-icon {

    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color:
        var(--scc-gold-light);

    background:
        rgba(208,160,84,.10);

}


.scc-contact-method small,
.scc-contact-method strong,
.scc-contact-method p {

    display: block;

}


.scc-contact-method small {

    color:
        var(--scc-gold);

    font-size: 14px;

}


.scc-contact-method strong {

    margin-top: 1px;

    color: #fff;

    font-size: 14px;

}


.scc-contact-method p {

    max-width: 100%;

    margin:
        3px 0 0;

    overflow-wrap: anywhere;

    color:
        rgba(255,255,255,.43);

    font-size: 14px;

    line-height: 1.35;

}


.scc-contact-method > i {

    color:
        rgba(255,255,255,.25);

}


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

.scc-coverage {

    position: relative;

    z-index: 2;

    margin-top: 25px;

    padding-top: 22px;

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

}


.scc-coverage-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}


.scc-coverage-heading small,
.scc-coverage-heading strong {

    display: block;

}


.scc-coverage-heading small {

    color:
        rgba(255,255,255,.40);

    font-size: 14px;

}


.scc-coverage-heading strong {

    color: #fff;

    font-size: 15px;

}


.scc-coverage-heading > span {

    color:
        var(--scc-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size: 23px;

}


.scc-coverage-cities {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 13px;

}


.scc-coverage-cities span {

    min-height: 34px;

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
        0 9px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius: 100px;

    color:
        rgba(255,255,255,.58);

    background:
        rgba(255,255,255,.035);

    font-size: 14px;

}


.scc-coverage-cities i {

    color:
        var(--scc-gold);

}


/* =========================================================
   FORM PANEL
========================================================= */

.scc-form-panel {

    padding:
        32px;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(248,247,242,.96)
        );

}


/* =========================================================
   FORM HEADING
========================================================= */

.scc-form-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 22px;

    border-bottom:
        1px solid
        rgba(7,16,29,.07);

}


.scc-form-heading small {

    display: block;

    color:
        var(--scc-copper);

    font-size: 14px;

    font-weight: 700;

}


.scc-form-heading h3 {

    margin:
        3px 0 0;

    color:
        var(--scc-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(27px,2.8vw,38px);

    line-height: 1;

}


.scc-form-heading > span {

    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    color:
        var(--scc-dark);

    background:

        linear-gradient(
            145deg,
            var(--scc-gold-light),
            var(--scc-gold)
        );

}


/* =========================================================
   FORM
========================================================= */

.scc-form {

    position: relative;

    margin-top: 24px;

}


/* =========================================================
   HONEYPOT
========================================================= */

.scc-honeypot {

    position: absolute !important;

    left: -99999px !important;

    top: -99999px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;

}


/* =========================================================
   FORM GRID
========================================================= */

.scc-form-grid {

    display: grid;

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

    gap: 12px;

}


/* =========================================================
   FIELD
========================================================= */

.scc-field {

    min-width: 0;

    margin-bottom: 16px;

}


.scc-field > label,
.scc-label-row label {

    display: block;

    margin-bottom: 7px;

    color:
        var(--scc-dark);

    font-size: 14px;

    font-weight: 700;

}


.scc-label-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}


.scc-label-row > span {

    color:
        var(--scc-muted);

    font-size: 14px;

}


/* =========================================================
   INPUT WRAP
========================================================= */

.scc-input-wrap {

    position: relative;

    width: 100%;

    min-height: 56px;

    display: grid;

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

    align-items: center;

    border:
        1px solid
        rgba(7,16,29,.10);

    border-radius: 14px;

    background: #fff;

    transition:

        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s var(--scc-ease);

}


.scc-input-wrap:focus-within {

    border-color:
        rgba(181,122,82,.52);

    box-shadow:
        0 0 0 4px
        rgba(208,160,84,.08);

    transform:
        translateY(-1px);

}


.scc-input-wrap > span {

    width: 48px;
    height: 100%;

    display: grid;

    place-items: center;

    color:
        var(--scc-copper);

    border-right:
        1px solid
        rgba(7,16,29,.06);

}


/* =========================================================
   INPUTS
========================================================= */

.scc-input-wrap input,
.scc-input-wrap select {

    width: 100%;
    min-width: 0;

    height: 54px;

    padding:
        0 14px;

    border: 0;

    outline: 0;

    color:
        var(--scc-text);

    background:
        transparent;

    font-size: 14px;

}


.scc-input-wrap input::placeholder {

    color:
        #9a9fa7;

}


/* =========================================================
   SELECT
========================================================= */

.scc-select-wrap {

    grid-template-columns:
        48px minmax(0,1fr) 40px;

}


.scc-select-wrap select {

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

}


.scc-select-wrap > i {

    color:
        var(--scc-muted);

    pointer-events: none;

}


/* =========================================================
   TEXTAREA
========================================================= */

.scc-textarea-wrap {

    width: 100%;

    border:
        1px solid
        rgba(7,16,29,.10);

    border-radius: 14px;

    background: #fff;

    transition:

        border-color .25s ease,
        box-shadow .25s ease;

}


.scc-textarea-wrap:focus-within {

    border-color:
        rgba(181,122,82,.52);

    box-shadow:
        0 0 0 4px
        rgba(208,160,84,.08);

}


.scc-textarea-wrap textarea {

    display: block;

    width: 100%;
    min-width: 0;

    min-height: 155px;

    resize: vertical;

    padding:
        15px;

    border: 0;

    outline: 0;

    color:
        var(--scc-text);

    background:
        transparent;

    font-size: 14px;

    line-height: 1.6;

}


.scc-textarea-wrap textarea::placeholder {

    color:
        #9a9fa7;

}


/* =========================================================
   INVALID
========================================================= */

.scc-field.is-invalid
.scc-input-wrap,
.scc-field.is-invalid
.scc-textarea-wrap {

    border-color:
        rgba(168,77,77,.65);

    box-shadow:
        0 0 0 3px
        rgba(168,77,77,.07);

}


.scc-field-error {

    min-height: 18px;

    display: block;

    padding:
        3px 3px 0;

    color:
        var(--scc-error);

    font-size: 14px;

}


/* =========================================================
   STATUS
========================================================= */

.scc-form-status {

    display: none;

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

    align-items: center;

    gap: 10px;

    margin-bottom: 16px;

    padding:
        12px;

    border-radius: 14px;

}


.scc-form-status.is-visible {

    display: grid;

}


.scc-form-status.is-success {

    border:
        1px solid
        rgba(61,128,98,.18);

    color:
        #285e47;

    background:
        rgba(61,128,98,.08);

}


.scc-form-status.is-error {

    border:
        1px solid
        rgba(168,77,77,.18);

    color:
        #803b3b;

    background:
        rgba(168,77,77,.07);

}


.scc-status-icon {

    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        rgba(255,255,255,.70);

}


.scc-form-status strong,
.scc-form-status p {

    display: block;

    font-size: 14px;

}


.scc-form-status p {

    margin:
        2px 0 0;

    opacity: .78;

}


/* =========================================================
   SUBMIT AREA
========================================================= */

.scc-submit-area {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 7px;

}


.scc-form-note {

    max-width: 360px;

    display: flex;

    align-items: flex-start;

    gap: 8px;

    color:
        var(--scc-muted);

    font-size: 14px;

    line-height: 1.45;

}


.scc-form-note i {

    margin-top: 2px;

    color:
        var(--scc-copper);

}


/* =========================================================
   SUBMIT
========================================================= */

.scc-submit {

    min-width: 245px;

    min-height: 55px;

    display: grid;

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

    align-items: center;

    gap: 9px;

    padding:
        6px 6px 6px 17px;

    border: 0;

    border-radius: 14px;

    color: #fff;

    background:

        linear-gradient(
            135deg,
            var(--scc-dark),
            var(--scc-navy)
        );

    box-shadow:
        0 15px 30px
        rgba(7,16,29,.16);

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    transition:

        transform .25s
        var(--scc-ease),

        box-shadow .25s ease;

}


.scc-submit:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 19px 35px
        rgba(7,16,29,.21);

}


.scc-submit:disabled {

    cursor: not-allowed;

    opacity: .72;

    transform: none;

}


.scc-submit-icon {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color:
        var(--scc-dark);

    background:
        var(--scc-gold-light);

}


/* =========================================================
   SPINNER
========================================================= */

.scc-submit.is-loading
.scc-submit-icon i {

    display: none;

}


.scc-submit.is-loading
.scc-submit-icon::after {

    content: "";

    width: 16px;
    height: 16px;

    border:
        2px solid
        rgba(7,16,29,.22);

    border-top-color:
        var(--scc-dark);

    border-radius: 50%;

    animation:
        sccSpin .65s
        linear infinite;

}


@keyframes sccSpin {

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   PROCESS SECTION
========================================================= */

.scc-process {

    position: relative;

    overflow: hidden;

    padding:
        100px 0;

    background:
        #f7f6f2;

}


.scc-process-heading {

    max-width: 820px;

    margin-bottom: 40px;

}


.scc-process-grid {

    display: grid;

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

    gap: 10px;

}


/* =========================================================
   PROCESS CARDS
========================================================= */

.scc-process-card {

    position: relative;

    min-width: 0;

    min-height: 305px;

    overflow: hidden;

    padding: 22px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 20px;

    background: #fff;

    transition:

        transform .3s
        var(--scc-ease),

        box-shadow .3s ease;

}


.scc-process-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 20px 44px
        rgba(7,16,29,.08);

}


.scc-process-number {

    position: absolute;

    right: 18px;
    top: 10px;

    color:
        rgba(7,16,29,.055);

    font-family:
        "Playfair Display",
        serif;

    font-size: 75px;

    line-height: 1;

}


.scc-process-icon {

    position: relative;

    z-index: 2;

    width: 53px;
    height: 53px;

    display: grid;

    place-items: center;

    margin-bottom: 44px;

    border-radius: 15px;

    color:
        var(--scc-copper);

    background:
        rgba(208,160,84,.11);

}


.scc-process-card > small {

    display: block;

    color:
        var(--scc-copper);

    font-size: 14px;

}


.scc-process-card h3 {

    margin:
        4px 0 10px;

    color:
        var(--scc-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 25px;

    line-height: 1.1;

}


.scc-process-card p {

    margin: 0;

    color:
        var(--scc-muted);

    font-size: 14px;

    line-height: 1.6;

}


/* =========================================================
   REVEAL
========================================================= */

.scc-reveal {

    opacity: 0;

    transform:
        translateY(24px);

    transition:

        opacity .7s ease,
        transform .7s
        var(--scc-ease);

}


.scc-reveal.scc-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .scc-contact-app {

        grid-template-columns:
            minmax(320px,.85fr)
            minmax(0,1.15fr);

    }


    .scc-contact-info,
    .scc-form-panel {

        padding: 25px;

    }

}


/* =========================================================
   <= 900
========================================================= */

@media (max-width: 900px) {

    .scc-breadcrumb-inner {

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

    }


    .scc-breadcrumb-side {

        display: none;

    }


    .scc-contact-heading {

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

        gap: 18px;

    }


    .scc-contact-heading > p {

        max-width: 680px;

        justify-self: start;

    }


    .scc-contact-app {

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

    }


    .scc-process-grid {

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

    }


    .scc-process-card:last-child {

        grid-column:
            1 / -1;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    html,
    body {

        overflow-x: hidden;

    }


    .scc-container {

        width:
            calc(100% - 24px);

        max-width:
            calc(100% - 24px);

    }


    /* BREADCRUMB */

    .scc-breadcrumb {

        min-height: 455px;

    }


    .scc-breadcrumb-inner {

        padding:
            90px 0 55px;

    }


    .scc-breadcrumb h1 {

        font-size:
            clamp(55px,17vw,80px);

    }


    .scc-breadcrumb-copy > p {

        font-size: 14px;

    }


    .scc-breadcrumb-nav {

        max-width: 100%;

    }


    /* CONTACT */

    .scc-contact {

        padding:
            75px 0 90px;

    }


    .scc-contact-heading {

        margin-bottom: 28px;

    }


    .scc-contact-heading h2,
    .scc-process-heading h2 {

        font-size:
            clamp(39px,11vw,50px);

    }


    .scc-contact-app {

        border-radius: 22px;

    }


    .scc-contact-info {

        padding: 21px 17px;

    }


    .scc-form-panel {

        padding:
            24px 16px;

    }


    .scc-form-grid {

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

        gap: 0;

    }


    .scc-submit-area {

        align-items: stretch;

        flex-direction: column;

    }


    .scc-form-note {

        max-width: 100%;

    }


    .scc-submit {

        width: 100%;
        min-width: 0;

    }


    /* PROCESS */

    .scc-process {

        padding:
            75px 0 95px;

    }


    .scc-process-grid {

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

    }


    .scc-process-card,
    .scc-process-card:last-child {

        grid-column: auto;

        min-height: 270px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .scc-breadcrumb-nav {

        width: 100%;

        justify-content: center;

    }


    .scc-contact-method {

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

    }


    .scc-contact-method > i {

        display: none;

    }


    .scc-form-heading > span {

        width: 45px;
        height: 45px;

        flex-basis: 45px;

    }


    .scc-label-row {

        display: block;

    }


    .scc-label-row > span {

        display: none;

    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 350px) {

    .scc-container {

        width:
            calc(100% - 18px);

        max-width:
            calc(100% - 18px);

    }


    .scc-contact-info,
    .scc-form-panel {

        padding:
            18px 12px;

    }

}


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

.scc-contact input:focus-visible,
.scc-contact select:focus-visible,
.scc-contact textarea:focus-visible {

    outline: none;

}


.scc-contact button:focus-visible,
.scc-contact a:focus-visible,
.scc-breadcrumb a:focus-visible {

    outline:
        3px solid
        var(--scc-gold);

    outline-offset: 3px;

}


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

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

    .scc-reveal {

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;

    }


    .scc-contact *,
    .scc-process * {

        animation-duration:
            .01ms !important;

        transition-duration:
            .01ms !important;

    }

}

/* =========================================================
   SANTA CRUZ PAINTING
   INTERACTIVE CONTACT MAP
========================================================= */

:root {

    --sccmap-dark: #07101d;
    --sccmap-dark-2: #0b1524;
    --sccmap-navy: #18243a;

    --sccmap-gold: #d0a054;
    --sccmap-gold-light: #f0cd86;
    --sccmap-copper: #b57a52;

    --sccmap-white: #ffffff;
    --sccmap-cream: #f4f2ec;

    --sccmap-text: #182133;
    --sccmap-muted: #707885;

    --sccmap-ease:
        cubic-bezier(.22,1,.36,1);

}


/* =========================================================
   PAGE PROTECTION
========================================================= */

html,
body {

    width: 100%;
    max-width: 100%;

    overflow-x: clip;

}


.sccmap-section,
.sccmap-container,
.sccmap-heading,
.sccmap-app,
.sccmap-map-column,
.sccmap-map-shell,
.sccmap-panel {

    min-width: 0;

    max-width: 100%;

}


.sccmap-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        105px 0;

    background:

        radial-gradient(
            circle at 10% 12%,
            rgba(208,160,84,.11),
            transparent 27%
        ),

        radial-gradient(
            circle at 93% 85%,
            rgba(24,36,58,.08),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #f8f7f2,
            #efeee8
        );

    isolation: isolate;

}


.sccmap-section *,
.sccmap-section *::before,
.sccmap-section *::after {

    box-sizing: border-box;

}


.sccmap-section a {

    text-decoration: none;

}


.sccmap-section button {

    font-family: inherit;

}


/* =========================================================
   BACKGROUND
========================================================= */

.sccmap-background {

    position: absolute;

    z-index: 0;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

}


.sccmap-grid-bg {

    position: absolute;

    inset: 0;

    opacity: .22;

    background-image:

        linear-gradient(
            rgba(24,36,58,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(24,36,58,.035) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

}


.sccmap-orb {

    position: absolute;

    border:
        1px solid
        rgba(181,122,82,.12);

    border-radius: 50%;

}


.sccmap-orb-one {

    width: 530px;
    height: 530px;

    right: -300px;
    top: -220px;

}


.sccmap-orb-two {

    width: 370px;
    height: 370px;

    left: -240px;
    bottom: -190px;

}


/* =========================================================
   CONTAINER
========================================================= */

.sccmap-container {

    position: relative;

    z-index: 4;

    width:
        min(calc(100% - 40px),1450px);

    margin:
        0 auto;

}


/* =========================================================
   HEADING
========================================================= */

.sccmap-heading {

    display: grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(0,.85fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 40px;

}


.sccmap-heading-left,
.sccmap-heading-right {

    min-width: 0;

}


.sccmap-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 13px;

    color:
        var(--sccmap-copper);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .07em;

    text-transform: uppercase;

}


.sccmap-eyebrow > span {

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color:
        var(--sccmap-dark);

    background:

        linear-gradient(
            145deg,
            var(--sccmap-gold-light),
            var(--sccmap-gold)
        );

}


.sccmap-heading h2 {

    max-width: 850px;

    margin: 0;

    color:
        var(--sccmap-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(44px,4.7vw,72px);

    line-height: .98;

    letter-spacing: -.045em;

}


.sccmap-heading h2 span {

    display: block;

    color:
        var(--sccmap-copper);

}


.sccmap-heading-right {

    max-width: 510px;

    justify-self: end;

}


.sccmap-heading-right > p {

    margin:
        0 0 17px;

    color:
        var(--sccmap-muted);

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   RADIUS LABEL
========================================================= */

.sccmap-radius-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        8px 13px 8px 8px;

    border:
        1px solid
        rgba(7,16,29,.08);

    border-radius: 14px;

    background:
        rgba(255,255,255,.78);

}


.sccmap-radius-label > span {

    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color:
        var(--sccmap-copper);

    background:
        rgba(208,160,84,.12);

}


.sccmap-radius-label small,
.sccmap-radius-label strong {

    display: block;

    font-size: 14px;

}


.sccmap-radius-label small {

    color:
        var(--sccmap-muted);

}


.sccmap-radius-label strong {

    color:
        var(--sccmap-dark);

}


/* =========================================================
   APP
========================================================= */

.sccmap-app {

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,355px);

    gap: 12px;

}


/* =========================================================
   MAP SHELL
========================================================= */

.sccmap-map-shell {

    position: relative;

    width: 100%;

    height: 620px;
    min-height: 620px;

    overflow: hidden;

    border:
        1px solid
        rgba(7,16,29,.08);

    border-radius: 28px;

    background:
        #dfe3df;

    box-shadow:
        0 30px 65px
        rgba(7,16,29,.12);

    isolation: isolate;

}


/* =========================================================
   REAL LEAFLET MAP
========================================================= */

.sccmap-map,
.sccmap-map.leaflet-container {

    position: relative;

    z-index: 1;

    width: 100% !important;

    max-width: 100% !important;

    height: 620px !important;
    min-height: 620px !important;

    overflow: hidden;

    background:
        #dfe3df;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

}


/* =========================================================
   CRITICAL LEAFLET FIX

   This prevents global img styles such as:
   img { width:100%; max-width:100%; }
   from destroying map tiles.
========================================================= */

.sccmap-map img {

    max-width: none !important;

    max-height: none !important;

}


.sccmap-map .leaflet-tile {

    width: 256px !important;
    height: 256px !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: fill !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

}


/* =========================================================
   LEAFLET PANE PROTECTION
========================================================= */

.sccmap-map .leaflet-map-pane,
.sccmap-map .leaflet-tile-pane,
.sccmap-map .leaflet-overlay-pane,
.sccmap-map .leaflet-marker-pane,
.sccmap-map .leaflet-shadow-pane,
.sccmap-map .leaflet-popup-pane {

    max-width: none !important;

}


/* =========================================================
   LEAFLET CONTROLS
========================================================= */

.sccmap-map .leaflet-control-zoom {

    overflow: hidden;

    border: 0 !important;

    border-radius: 13px;

    box-shadow:
        0 10px 25px
        rgba(7,16,29,.14);

}


.sccmap-map
.leaflet-control-zoom a {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border: 0 !important;

    color:
        var(--sccmap-dark);

    background:
        rgba(255,255,255,.95);

    font-size: 22px;

}


.sccmap-map
.leaflet-control-zoom a:hover {

    color:
        var(--sccmap-dark);

    background:
        var(--sccmap-gold-light);

}


.sccmap-map
.leaflet-control-attribution {

    max-width:
        calc(100% - 20px);

    padding:
        4px 7px;

    color:
        #646b73;

    background:
        rgba(255,255,255,.86);

    font-size: 11px;

}


/* =========================================================
   STATUS
========================================================= */

.sccmap-map-status {

    position: absolute;

    z-index: 500;

    left: 16px;
    top: 16px;

    display: flex;

    align-items: center;

    gap: 10px;

    max-width:
        calc(100% - 100px);

    padding:
        10px 14px;

    border:
        1px solid
        rgba(255,255,255,.62);

    border-radius: 14px;

    background:
        rgba(255,255,255,.93);

    box-shadow:
        0 12px 30px
        rgba(7,16,29,.11);

    backdrop-filter:
        blur(12px);

    pointer-events: none;

}


.sccmap-status-dot {

    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background:
        var(--sccmap-gold);

    box-shadow:
        0 0 0 6px
        rgba(208,160,84,.12);

}


.sccmap-map-status small,
.sccmap-map-status strong {

    display: block;

    font-size: 14px;

}


.sccmap-map-status small {

    color:
        var(--sccmap-muted);

}


.sccmap-map-status strong {

    overflow: hidden;

    color:
        var(--sccmap-dark);

    white-space: nowrap;

    text-overflow: ellipsis;

}


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

.sccmap-radius-badge {

    position: absolute;

    z-index: 500;

    left: 16px;
    bottom: 16px;

    min-height: 42px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(255,255,255,.62);

    border-radius: 100px;

    color:
        var(--sccmap-dark);

    background:
        rgba(255,255,255,.93);

    box-shadow:
        0 10px 28px
        rgba(7,16,29,.10);

    backdrop-filter:
        blur(12px);

    font-size: 14px;

    font-weight: 800;

    pointer-events: none;

}


.sccmap-radius-badge i {

    color:
        var(--sccmap-copper);

}


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

.sccmap-reset {

    position: absolute;

    z-index: 600;

    right: 16px;
    bottom: 16px;

    min-height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(7,16,29,.09);

    border-radius: 12px;

    color: #fff;

    background:
        var(--sccmap-navy);

    box-shadow:
        0 12px 25px
        rgba(7,16,29,.20);

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    transition:

        transform .25s
        var(--sccmap-ease),

        background .25s ease;

}


.sccmap-reset:hover {

    transform:
        translateY(-2px);

    background:
        var(--sccmap-dark);

}


/* =========================================================
   LOADING
========================================================= */

.sccmap-loading {

    position: absolute;

    z-index: 850;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    padding: 20px;

    color:
        var(--sccmap-dark);

    background:
        #e5e5e3;

    transition:

        opacity .3s ease,
        visibility .3s ease;

}


.sccmap-loading.is-hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


.sccmap-loading strong,
.sccmap-loading small {

    display: block;

}


.sccmap-loading strong {

    font-size: 15px;

}


.sccmap-loading small {

    margin-top: 2px;

    color:
        var(--sccmap-muted);

    font-size: 14px;

}


.sccmap-spinner {

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border:
        3px solid
        rgba(181,122,82,.18);

    border-top-color:
        var(--sccmap-copper);

    border-radius: 50%;

    animation:
        sccmapSpin .75s linear infinite;

}


@keyframes sccmapSpin {

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   ERROR
========================================================= */

.sccmap-error {

    position: absolute;

    z-index: 950;

    left: 50%;
    top: 50%;

    width:
        min(calc(100% - 30px),480px);

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

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

    align-items: start;

    gap: 12px;

    padding: 18px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 18px;

    color:
        var(--sccmap-dark);

    background:
        rgba(255,255,255,.96);

    box-shadow:
        0 25px 60px
        rgba(7,16,29,.18);

}


.sccmap-error:not([hidden]) {

    display: grid;

}


.sccmap-error[hidden] {

    display: none !important;

}


.sccmap-error > span {

    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    color:
        var(--sccmap-copper);

    background:
        rgba(208,160,84,.12);

}


.sccmap-error strong {

    display: block;

    font-size: 15px;

}


.sccmap-error p {

    margin:
        4px 0 11px;

    color:
        var(--sccmap-muted);

    font-size: 14px;

    line-height: 1.5;

}


.sccmap-error button {

    min-height: 40px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        0 12px;

    border: 0;

    border-radius: 10px;

    color: #fff;

    background:
        var(--sccmap-navy);

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

}


/* =========================================================
   PANEL
========================================================= */

.sccmap-panel {

    display: flex;

    flex-direction: column;

    padding: 20px;

    border:
        1px solid
        rgba(7,16,29,.08);

    border-radius: 27px;

    background:
        rgba(255,255,255,.84);

    box-shadow:
        0 24px 55px
        rgba(7,16,29,.07);

    backdrop-filter:
        blur(15px);

}


/* =========================================================
   PANEL HEADER
========================================================= */

.sccmap-panel-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-bottom: 16px;

    border-bottom:
        1px solid
        rgba(7,16,29,.07);

}


.sccmap-panel-header small {

    display: block;

    color:
        var(--sccmap-copper);

    font-size: 14px;

}


.sccmap-panel-header h3 {

    margin:
        3px 0 0;

    color:
        var(--sccmap-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 30px;

    line-height: 1;

}


.sccmap-panel-header > span {

    width: 49px;
    height: 49px;

    flex: 0 0 49px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    color:
        var(--sccmap-dark);

    background:

        linear-gradient(
            145deg,
            var(--sccmap-gold-light),
            var(--sccmap-gold)
        );

}


/* =========================================================
   INTRO
========================================================= */

.sccmap-panel-intro {

    margin:
        16px 2px;

    color:
        var(--sccmap-muted);

    font-size: 14px;

    line-height: 1.6;

}


/* =========================================================
   CITY BUTTON
========================================================= */

.sccmap-city {

    position: relative;

    width: 100%;

    min-height: 83px;

    display: grid;

    grid-template-columns:
        46px minmax(0,1fr) 38px;

    align-items: center;

    gap: 10px;

    margin-bottom: 7px;

    padding: 9px;

    overflow: hidden;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 15px;

    color:
        var(--sccmap-dark);

    background:
        rgba(255,255,255,.72);

    text-align: left;

    cursor: pointer;

    transition:

        transform .26s
        var(--sccmap-ease),

        border-color .26s ease,

        background .26s ease,

        box-shadow .26s ease;

}


.sccmap-city::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    background:

        linear-gradient(
            var(--sccmap-gold-light),
            var(--sccmap-copper)
        );

    transform:
        scaleY(0);

    transition:
        transform .25s
        var(--sccmap-ease);

}


.sccmap-city:hover,
.sccmap-city.active {

    transform:
        translateX(-4px);

    border-color:
        rgba(181,122,82,.25);

    background: #fff;

    box-shadow:
        0 12px 28px
        rgba(7,16,29,.07);

}


.sccmap-city:hover::before,
.sccmap-city.active::before {

    transform:
        scaleY(1);

}


/* =========================================================
   CITY ICON
========================================================= */

.sccmap-city-icon {

    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color:
        var(--sccmap-copper);

    background:
        rgba(208,160,84,.10);

}


.sccmap-city.active
.sccmap-city-icon {

    color:
        var(--sccmap-dark);

    background:
        var(--sccmap-gold-light);

}


/* =========================================================
   CITY COPY
========================================================= */

.sccmap-city-copy small,
.sccmap-city-copy strong,
.sccmap-city-copy em {

    display: block;

}


.sccmap-city-copy small {

    color:
        var(--sccmap-copper);

    font-size: 14px;

}


.sccmap-city-copy strong {

    margin-top: 1px;

    color:
        var(--sccmap-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 20px;

    line-height: 1;

}


.sccmap-city-copy em {

    margin-top: 3px;

    color:
        var(--sccmap-muted);

    font-size: 14px;

    font-style: normal;

}


/* =========================================================
   CITY ARROW
========================================================= */

.sccmap-city-arrow {

    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(7,16,29,.08);

    border-radius: 50%;

    color:
        var(--sccmap-muted);

    transition:

        color .25s ease,
        background .25s ease,
        transform .25s ease;

}


.sccmap-city:hover
.sccmap-city-arrow,
.sccmap-city.active
.sccmap-city-arrow {

    transform:
        translateX(2px);

    color: #fff;

    background:
        var(--sccmap-navy);

}


/* =========================================================
   PANEL FOOTER
========================================================= */

.sccmap-panel-footer {

    display: grid;

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

    gap: 9px;

    margin-top: auto;

    padding:
        17px 2px 13px;

}


.sccmap-panel-footer > span {

    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color:
        var(--sccmap-copper);

    background:
        rgba(208,160,84,.10);

}


.sccmap-panel-footer p {

    margin: 0;

    color:
        var(--sccmap-muted);

    font-size: 14px;

    line-height: 1.5;

}


/* =========================================================
   CALL
========================================================= */

.sccmap-call {

    min-height: 64px;

    display: grid;

    grid-template-columns:
        42px minmax(0,1fr) 24px;

    align-items: center;

    gap: 10px;

    padding:
        8px 12px 8px 8px;

    border-radius: 15px;

    color: #fff;

    background:

        linear-gradient(
            135deg,
            var(--sccmap-dark),
            var(--sccmap-navy)
        );

}


.sccmap-call > span {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color:
        var(--sccmap-dark);

    background:
        var(--sccmap-gold-light);

}


.sccmap-call small,
.sccmap-call strong {

    display: block;

    font-size: 14px;

}


.sccmap-call small {

    color:
        rgba(255,255,255,.50);

}


.sccmap-call strong {

    color: #fff;

}


.sccmap-call > i {

    color:
        var(--sccmap-gold-light);

}


/* =========================================================
   CUSTOM MARKER
========================================================= */

.sccmap-marker-wrapper {

    background:
        transparent !important;

    border: 0 !important;

}


.sccmap-marker {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border:
        4px solid #fff;

    border-radius:
        50% 50% 50% 8px;

    color:
        var(--sccmap-dark);

    background:

        linear-gradient(
            145deg,
            var(--sccmap-gold-light),
            var(--sccmap-gold)
        );

    box-shadow:
        0 8px 20px
        rgba(7,16,29,.27);

    transform:
        rotate(-45deg);

}


.sccmap-marker i {

    font-size: 15px;

    transform:
        rotate(45deg);

}


/* =========================================================
   POPUP
========================================================= */

.sccmap-map
.leaflet-popup-content-wrapper {

    overflow: hidden;

    padding: 0;

    border-radius: 15px;

    box-shadow:
        0 18px 45px
        rgba(7,16,29,.18);

}


.sccmap-map
.leaflet-popup-content {

    margin: 0;

}


.sccmap-popup {

    min-width: 185px;

    padding: 14px;

}


.sccmap-popup small,
.sccmap-popup strong,
.sccmap-popup span {

    display: block;

}


.sccmap-popup small {

    color:
        var(--sccmap-copper);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

}


.sccmap-popup strong {

    margin-top: 3px;

    color:
        var(--sccmap-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 20px;

}


.sccmap-popup span {

    margin-top: 4px;

    color:
        var(--sccmap-muted);

    font-size: 13px;

}


/* =========================================================
   BOTTOM INFO
========================================================= */

.sccmap-bottom {

    display: grid;

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

    align-items: center;

    gap: 15px;

    margin-top: 12px;

    padding:
        16px 19px;

    border:
        1px solid
        rgba(7,16,29,.07);

    border-radius: 18px;

    background:
        rgba(255,255,255,.68);

}


.sccmap-bottom-item {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

}


.sccmap-bottom-item > span {

    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color:
        var(--sccmap-copper);

    background:
        rgba(208,160,84,.11);

}


.sccmap-bottom-item small,
.sccmap-bottom-item strong {

    display: block;

    font-size: 14px;

}


.sccmap-bottom-item small {

    color:
        var(--sccmap-muted);

}


.sccmap-bottom-item strong {

    color:
        var(--sccmap-dark);

}


.sccmap-bottom-divider {

    width: 1px;
    height: 36px;

    background:
        rgba(7,16,29,.08);

}


/* =========================================================
   REVEAL
========================================================= */

.sccmap-reveal {

    opacity: 0;

    transform:
        translateY(22px);

    transition:

        opacity .7s ease,
        transform .7s
        var(--sccmap-ease);

}


.sccmap-reveal.sccmap-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .sccmap-map-shell,
    .sccmap-map,
    .sccmap-map.leaflet-container {

        height: 560px !important;
        min-height: 560px !important;

    }


    .sccmap-app {

        grid-template-columns:
            minmax(0,1fr)
            minmax(280px,325px);

    }


    .sccmap-bottom {

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

        gap: 9px;

    }


    .sccmap-bottom-divider {

        display: none;

    }


    .sccmap-bottom-item {

        justify-content:
            flex-start;

        padding: 5px;

    }

}


/* =========================================================
   STACKED
========================================================= */

@media (max-width: 900px) {

    .sccmap-heading {

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

        gap: 18px;

    }


    .sccmap-heading-right {

        max-width: 700px;

        justify-self: start;

    }


    .sccmap-app {

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

    }


    .sccmap-panel {

        display: grid;

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

        gap: 7px;

    }


    .sccmap-panel-header,
    .sccmap-panel-intro,
    .sccmap-panel-footer,
    .sccmap-call {

        grid-column:
            1 / -1;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    html,
    body {

        overflow-x: hidden;

    }


    .sccmap-section {

        padding:
            75px 0 95px;

    }


    .sccmap-container {

        width:
            calc(100% - 24px);

        max-width:
            calc(100% - 24px);

    }


    .sccmap-heading {

        margin-bottom:
            28px;

    }


    .sccmap-heading h2 {

        font-size:
            clamp(39px,11vw,50px);

    }


    .sccmap-heading-right > p {

        font-size: 14px;

    }


    /* MAP */

    .sccmap-map-shell,
    .sccmap-map,
    .sccmap-map.leaflet-container {

        height: 440px !important;
        min-height: 440px !important;

    }


    .sccmap-map-shell {

        border-radius: 21px;

    }


    .sccmap-map-status {

        left: 10px;
        top: 10px;

        max-width:
            calc(100% - 66px);

        padding:
            8px 10px;

    }


    .sccmap-radius-badge {

        left: 10px;
        bottom: 10px;

    }


    .sccmap-reset {

        right: 10px;
        bottom: 10px;

        width: 44px;

        padding: 0;

    }


    .sccmap-reset span {

        display: none;

    }


    .sccmap-map
    .leaflet-top.leaflet-left {

        top: 65px;

    }


    /* PANEL */

    .sccmap-panel {

        display: block;

        padding: 14px;

        border-radius: 20px;

    }


    .sccmap-city {

        min-height: 75px;

    }


    .sccmap-bottom {

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

        padding: 12px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .sccmap-map-shell,
    .sccmap-map,
    .sccmap-map.leaflet-container {

        height: 390px !important;
        min-height: 390px !important;

    }


    .sccmap-panel-header h3 {

        font-size: 26px;

    }


    .sccmap-radius-badge span {

        display: none;

    }


    .sccmap-radius-badge {

        width: 43px;

        padding: 0;

        justify-content: center;

    }


    .sccmap-bottom {

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

    }


    .sccmap-bottom-item {

        justify-content:
            flex-start;

    }


    .sccmap-error {

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

        padding: 14px;

    }


    .sccmap-error > span {

        width: 44px;
        height: 44px;

    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 350px) {

    .sccmap-container {

        width:
            calc(100% - 18px);

        max-width:
            calc(100% - 18px);

    }


    .sccmap-map-shell,
    .sccmap-map,
    .sccmap-map.leaflet-container {

        height: 360px !important;
        min-height: 360px !important;

    }

}


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

.sccmap-section button:focus-visible,
.sccmap-section a:focus-visible {

    outline:
        3px solid
        var(--sccmap-gold);

    outline-offset: 3px;

}


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

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

    .sccmap-reveal {

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;

    }


    .sccmap-spinner {

        animation: none;

    }

}

/* =========================================================
   SANTA CRUZ PAINTING
   FINAL SERVICES PERFORMANCE FIX
   MOBILE / TABLET / TOUCH
   ---------------------------------------------------------
   Desktop keeps the original 3D presentation.
   <= 991px and coarse-pointer devices use a true lightweight
   single-card mode. Inactive cards are removed from layout and
   compositing with display:none.
========================================================= */

/* ---------------------------------------------------------
   CLASS-BASED LITE MODE
   JS adds .scs-lite on <= 991px or coarse pointer.
--------------------------------------------------------- */

.scs-services.scs-lite {
    isolation: auto !important;
}

.scs-services.scs-lite .scs-bg-image,
.scs-services.scs-lite .scs-orbit,
.scs-services.scs-lite .scs-paint-blob {
    display: none !important;
    animation: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
}

.scs-services.scs-lite .scs-bg-grid {
    opacity: .025 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

.scs-services.scs-lite .scs-bg-overlay {
    background:
        radial-gradient(
            circle at 50% 28%,
            rgba(208,160,84,.07),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #07101b,
            #0b1524
        ) !important;
}

.scs-services.scs-lite .scs-carousel-shell {
    min-height: 0 !important;
    perspective: none !important;
}

.scs-services.scs-lite .scs-stage {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    perspective: none !important;
    transform: none !important;
    transform-style: flat !important;
    touch-action: pan-y !important;
    contain: layout style !important;
}

.scs-services.scs-lite .scs-card {
    display: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transform-style: flat !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    transition: none !important;
    will-change: auto !important;
    filter: none !important;
    contain: layout paint style !important;
}

.scs-services.scs-lite .scs-card.is-active {
    display: block !important;
    z-index: 2 !important;
}

.scs-services.scs-lite .scs-card:not(.is-active) {
    display: none !important;
}

.scs-services.scs-lite .scs-card-image,
.scs-services.scs-lite .scs-card-overlay,
.scs-services.scs-lite .scs-card-content,
.scs-services.scs-lite .scs-card-icon,
.scs-services.scs-lite .scs-card-number,
.scs-services.scs-lite .scs-card-paint {
    will-change: auto !important;
}

.scs-services.scs-lite .scs-card-image img,
.scs-services.scs-lite .scs-card.is-active:hover .scs-card-image img {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
    filter: none !important;
}

.scs-services.scs-lite .scs-card-grid,
.scs-services.scs-lite .scs-side-label {
    display: none !important;
}

.scs-services.scs-lite .scs-card-features span,
.scs-services.scs-lite .scs-selector-btn,
.scs-services.scs-lite .scs-card-link {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.scs-services.scs-lite .scs-card.is-active:hover .scs-card-icon,
.scs-services.scs-lite .scs-card-link:hover,
.scs-services.scs-lite .scs-arrows button:hover {
    transform: none !important;
}

/* ---------------------------------------------------------
   RESPONSIVE FALLBACK
   Applies before JavaScript has time to add .scs-lite.
--------------------------------------------------------- */

@media (max-width: 991px) {

    .scs-services {
        padding: 75px 0 78px !important;
        overflow-x: hidden !important;
    }

    .scs-services .scs-container {
        width: calc(100% - 28px) !important;
        max-width: calc(100% - 28px) !important;
        min-width: 0 !important;
    }

    .scs-services .scs-heading-row {
        grid-template-columns: minmax(0,1fr) !important;
        gap: 20px !important;
        margin-bottom: 38px !important;
    }

    .scs-services .scs-heading-description {
        max-width: 680px !important;
        justify-self: start !important;
    }

    .scs-services .scs-heading-copy h2 {
        font-size: clamp(39px,9vw,53px) !important;
    }

    .scs-services .scs-heading-description p {
        font-size: 14px !important;
    }

    .scs-services .scs-bg-image,
    .scs-services .scs-orbit,
    .scs-services .scs-paint-blob {
        display: none !important;
        animation: none !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    .scs-services .scs-bg-grid {
        opacity: .025 !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }

    .scs-services .scs-bg-overlay {
        background:
            radial-gradient(
                circle at 50% 28%,
                rgba(208,160,84,.07),
                transparent 30%
            ),
            linear-gradient(
                145deg,
                #07101b,
                #0b1524
            ) !important;
    }

    .scs-services .scs-carousel-shell {
        min-height: 0 !important;
        perspective: none !important;
    }

    .scs-services .scs-stage {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        perspective: none !important;
        transform: none !important;
        transform-style: flat !important;
        touch-action: pan-y !important;
        contain: layout style !important;
    }

    .scs-services .scs-card {
        display: none !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: clamp(420px,112vw,520px) !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        transform-style: flat !important;
        backface-visibility: visible !important;
        -webkit-backface-visibility: visible !important;
        transition: none !important;
        will-change: auto !important;
        filter: none !important;
        contain: layout paint style !important;
        border-radius: 22px !important;
        box-shadow: 0 16px 34px rgba(0,0,0,.20) !important;
    }

    .scs-services .scs-card.is-active {
        display: block !important;
        z-index: 2 !important;
    }

    .scs-services .scs-card:not(.is-active) {
        display: none !important;
    }

    .scs-services .scs-card-image img,
    .scs-services .scs-card.is-active:hover .scs-card-image img {
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
        filter: none !important;
    }

    .scs-services .scs-card-grid,
    .scs-services .scs-side-label {
        display: none !important;
    }

    .scs-services .scs-card-features span,
    .scs-services .scs-selector-btn,
    .scs-services .scs-card-link {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .scs-services .scs-card-number {
        top: 17px !important;
        right: 17px !important;
        font-size: 39px !important;
    }

    .scs-services .scs-card-icon {
        top: 17px !important;
        left: 17px !important;
        width: 46px !important;
        height: 46px !important;
    }

    .scs-services .scs-card-content {
        left: 20px !important;
        right: 20px !important;
        bottom: 20px !important;
    }

    .scs-services .scs-card-content h3 {
        font-size: clamp(28px,6vw,36px) !important;
    }

    .scs-services .scs-card-content p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .scs-services .scs-controls {
        grid-template-columns: minmax(0,1fr) auto !important;
        gap: 10px !important;
        margin-top: 17px !important;
    }

    .scs-services .scs-counter {
        display: none !important;
    }

    .scs-services .scs-selector {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 0 6px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
        scroll-behavior: smooth !important;
    }

    .scs-services .scs-selector::-webkit-scrollbar {
        display: none !important;
    }

    .scs-services .scs-selector-btn {
        flex: 0 0 auto !important;
        min-height: 41px !important;
        padding: 0 12px !important;
    }

    .scs-services .scs-arrows {
        flex: 0 0 auto !important;
    }

    .scs-services .scs-arrows button {
        width: 42px !important;
        height: 42px !important;
    }

    .scs-services .scs-progress {
        margin-top: 14px !important;
    }
}

/* ---------------------------------------------------------
   PHONE
--------------------------------------------------------- */

@media (max-width: 680px) {

    .scs-services {
        padding: 68px 0 74px !important;
    }

    .scs-services .scs-container {
        width: calc(100% - 22px) !important;
        max-width: calc(100% - 22px) !important;
    }

    .scs-services .scs-heading-row {
        margin-bottom: 30px !important;
    }

    .scs-services .scs-heading-copy h2 {
        font-size: clamp(37px,11vw,47px) !important;
    }

    .scs-services .scs-heading-line {
        gap: 9px !important;
    }

    .scs-services .scs-heading-line strong {
        white-space: normal !important;
    }

    .scs-services .scs-card {
        height: clamp(415px,118vw,485px) !important;
    }

    .scs-services .scs-card-content {
        left: 17px !important;
        right: 17px !important;
        bottom: 17px !important;
    }

    .scs-services .scs-card-content h3 {
        font-size: clamp(27px,8vw,32px) !important;
    }

    .scs-services .scs-card-features {
        gap: 5px !important;
        margin-bottom: 13px !important;
    }

    .scs-services .scs-card-features span {
        padding: 5px 8px !important;
        font-size: 14px !important;
    }

    .scs-services .scs-card-link {
        min-height: 44px !important;
    }
}

/* ---------------------------------------------------------
   SMALL PHONE
--------------------------------------------------------- */

@media (max-width: 430px) {

    .scs-services .scs-container {
        width: calc(100% - 18px) !important;
        max-width: calc(100% - 18px) !important;
    }

    .scs-services .scs-heading-copy h2 {
        font-size: 36px !important;
    }

    .scs-services .scs-card {
        height: 425px !important;
    }

    .scs-services .scs-card-content {
        left: 15px !important;
        right: 15px !important;
        bottom: 15px !important;
    }

    .scs-services .scs-card-content h3 {
        font-size: 27px !important;
    }

    .scs-services .scs-card-content p {
        display: -webkit-box !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
    }

    .scs-services .scs-card-features span:nth-child(3) {
        display: none !important;
    }
}

/* ---------------------------------------------------------
   VERY SMALL PHONE
--------------------------------------------------------- */

@media (max-width: 350px) {

    .scs-services .scs-card {
        height: 405px !important;
    }

    .scs-services .scs-card-content h3 {
        font-size: 25px !important;
    }
}

/* ---------------------------------------------------------
   TOUCH / COARSE POINTER FALLBACK
   Also protects large landscape phones and tablets.
--------------------------------------------------------- */

@media (pointer: coarse) {

    .scs-services .scs-bg-image,
    .scs-services .scs-orbit,
    .scs-services .scs-paint-blob {
        display: none !important;
        animation: none !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    .scs-services .scs-carousel-shell {
        perspective: none !important;
    }

    .scs-services .scs-stage {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        perspective: none !important;
        transform-style: flat !important;
        touch-action: pan-y !important;
    }

    .scs-services .scs-card {
        display: none !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
        backface-visibility: visible !important;
        -webkit-backface-visibility: visible !important;
    }

    .scs-services .scs-card.is-active {
        display: block !important;
    }

    .scs-services .scs-card:not(.is-active) {
        display: none !important;
    }

    .scs-services .scs-card-image img,
    .scs-services .scs-card.is-active:hover .scs-card-image img {
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    .scs-services .scs-card-grid,
    .scs-services .scs-side-label {
        display: none !important;
    }

    .scs-services .scs-card-features span,
    .scs-services .scs-selector-btn,
    .scs-services .scs-card-link {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

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

    .scs-services *,
    .scs-services *::before,
    .scs-services *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}