.sab-wcs {
    --sab-wcs-primary: #1C4332;
    --sab-wcs-deep: #08251C;
    --sab-wcs-accent: #C79A44;
    --sab-wcs-soft: #F5F0E6;
    --sab-wcs-bg: #F5F0E6;
    --sab-wcs-text: #31433B;
    --sab-wcs-white: #ffffff;
    --sab-wcs-radius: 34px;
    --sab-wcs-sticky-top: 24px;
    --sab-wcs-pin-top: 24px;
    --sab-wcs-pin-height: 720px;
    --sab-wcs-track-height: 3600px;
    --sab-wcs-card-gap: 180px;
    --sab-wcs-scroll-progress: 0;
    --sab-wcs-scene-y: 0px;
    position: relative;
    width: 100%;
    padding: 110px 0 90px;
    overflow: visible !important;
    isolation: isolate;
    color: var(--sab-wcs-text);
    font-family: "Inter", Arial, sans-serif;
    background:
        radial-gradient(circle at 9% 16%, color-mix(in srgb, var(--sab-wcs-accent) 16%, transparent), transparent 27%),
        radial-gradient(circle at 93% 8%, color-mix(in srgb, var(--sab-wcs-primary) 12%, transparent), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, var(--sab-wcs-bg) 100%);
}

.sab-wcs-full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

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

/* Elementor frequently adds overflow:hidden to the widget/container wrappers.
   Modern browsers fix this immediately, while the JS repeats the same fix for
   older layouts and live editor rerenders. */
.elementor-widget-container:has(> .sab-wcs),
.elementor-element:has(> .elementor-widget-container > .sab-wcs) {
    overflow: visible !important;
    overflow-y: visible !important;
}

.sab-wcs::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: radial-gradient(color-mix(in srgb, var(--sab-wcs-primary) 18%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: .24;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.sab-wcs-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    filter: blur(1px);
}

.sab-wcs-orb-one {
    width: 210px;
    height: 210px;
    left: 2%;
    top: 13%;
    background: color-mix(in srgb, var(--sab-wcs-accent) 11%, transparent);
}

.sab-wcs-orb-two {
    width: 430px;
    height: 430px;
    right: -180px;
    bottom: 6%;
    background: radial-gradient(circle, color-mix(in srgb, var(--sab-wcs-primary) 12%, transparent), transparent 68%);
}

.sab-wcs-container {
    width: min(1220px, calc(100% - 48px));
    margin: 0 auto;
    position: relative;
    z-index: 2;
    overflow: visible !important;
}

.sab-wcs-layout {
    display: grid;
    grid-template-columns: minmax(300px, .82fr) minmax(440px, 1.18fr);
    gap: clamp(46px, 7vw, 108px);
    align-items: center;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.sab-wcs-left,
.sab-wcs-right {
    min-width: 0;
    position: relative;
    overflow: visible !important;
}

.sab-wcs-left {
    align-self: stretch;
    min-height: 100%;
}

.sab-wcs-left-inner {
    position: sticky;
    top: var(--sab-wcs-sticky-top);
    z-index: 20;
    padding: 12px 0 0;
}

.sab-wcs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin-bottom: 20px;
    padding: 10px 15px;
    border: 1px solid color-mix(in srgb, var(--sab-wcs-primary) 14%, transparent);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    color: var(--sab-wcs-primary);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 12px 34px color-mix(in srgb, var(--sab-wcs-deep) 5%, transparent);
    backdrop-filter: blur(12px);
}

.sab-wcs-eyebrow::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sab-wcs-accent);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--sab-wcs-accent) 14%, transparent);
}

.sab-wcs-heading {
    max-width: 560px;
    margin: 0;
    color: var(--sab-wcs-primary);
    font-family: "Perpetua Titling MT", "Cormorant Garamond", "Times New Roman", serif;
    font-size: clamp(46px, 5.5vw, 82px);
    font-weight: 600;
    line-height: 1.01;
    letter-spacing: -.045em;
    text-transform: uppercase;
}

.sab-wcs-lead {
    max-width: 535px;
    margin: 28px 0 0;
    color: var(--sab-wcs-text);
    font-size: 17px;
    line-height: 1.78;
}

.sab-wcs-mini-panel {
    max-width: 490px;
    margin-top: 34px;
    padding: 21px;
    border: 1px solid color-mix(in srgb, var(--sab-wcs-primary) 11%, transparent);
    border-radius: 22px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 22px 65px color-mix(in srgb, var(--sab-wcs-deep) 7%, transparent);
    backdrop-filter: blur(12px);
}

.sab-wcs-progress {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sab-wcs-primary) 11%, transparent);
}

.sab-wcs-progress > span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sab-wcs-primary), var(--sab-wcs-accent));
    transform: scaleX(var(--sab-wcs-scroll-progress));
    transform-origin: left center;
    transition: transform 70ms linear;
    will-change: transform;
}

.sab-wcs-support {
    margin: 14px 0 0;
    color: var(--sab-wcs-text);
    font-size: 14.5px;
    line-height: 1.65;
}

/* Static fallback: the cards remain readable even when JavaScript is blocked. */
.sab-wcs-stack {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
    padding: 0;
    overflow: visible !important;
}

.sab-wcs-card {
    position: relative;
    z-index: calc(10 + var(--sab-wcs-i, 0));
    width: 100%;
    min-height: 410px;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--sab-wcs-radius);
    background: transparent !important;
    box-shadow: none !important;
    isolation: isolate;
    overflow: visible !important;
}

/* V7.16 native fixed scene pinning.
   The complete scene uses browser-native position:fixed while active.
   JavaScript only switches before/pinned/after states; it no longer counter-
   translates the whole section on every scroll frame, removing visible shake. */
@media (min-width: 1025px) {
    .sab-wcs.sab-wcs-js-ready {
        height: var(--sab-wcs-track-height, 3600px) !important;
        min-height: var(--sab-wcs-track-height, 3600px) !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .sab-wcs.sab-wcs-js-ready .sab-wcs-container {
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        display: flex;
        align-items: center;
        width: min(1220px, calc(100% - 48px));
        height: var(--sab-wcs-pin-height, calc(100vh - 24px));
        min-height: 0;
        margin: 0 !important;
        padding: clamp(18px, 3vh, 34px) 0;
        overflow: visible !important;
        transform: translate3d(-50%, 0, 0) !important;
        transform-origin: top center;
        backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
    }

    .sab-wcs.sab-wcs-js-ready[data-sab-pin-state="before"] .sab-wcs-container {
        position: absolute !important;
        top: 0 !important;
    }

    .sab-wcs.sab-wcs-js-ready[data-sab-pin-state="pinned"] .sab-wcs-container {
        position: fixed !important;
        top: var(--sab-wcs-fixed-top, 24px) !important;
        left: 50vw !important;
        z-index: 90;
        will-change: auto;
    }

    .sab-wcs.sab-wcs-js-ready[data-sab-pin-state="pinned"] {
        background-attachment: fixed;
    }

    .sab-wcs.sab-wcs-js-ready[data-sab-pin-state="pinned"]::before {
        position: fixed;
        inset: 0;
    }

    .sab-wcs.sab-wcs-js-ready[data-sab-pin-state="pinned"] .sab-wcs-orb-one {
        position: fixed;
        left: 2vw;
        top: 13vh;
    }

    .sab-wcs.sab-wcs-js-ready[data-sab-pin-state="pinned"] .sab-wcs-orb-two {
        position: fixed;
        right: -180px;
        bottom: 6vh;
    }

    .sab-wcs.sab-wcs-js-ready[data-sab-pin-state="after"] .sab-wcs-container {
        position: absolute !important;
        top: var(--sab-wcs-release-top, 3000px) !important;
    }

    .sab-wcs.sab-wcs-js-ready .sab-wcs-layout {
        align-items: center;
        width: 100% !important;
        max-height: 100%;
    }

    .sab-wcs.sab-wcs-js-ready .sab-wcs-left {
        align-self: center;
        min-height: 0;
    }

    .sab-wcs.sab-wcs-js-ready .sab-wcs-left-inner {
        position: relative;
        top: auto;
        padding-top: 0;
    }

    .sab-wcs.sab-wcs-js-ready .sab-wcs-right {
        height: var(--sab-wcs-stage-height, 430px);
        min-height: var(--sab-wcs-stage-height, 430px);
        align-self: center;
    }

    .sab-wcs.sab-wcs-js-ready .sab-wcs-stack {
        position: relative;
        top: auto;
        display: block;
        width: 100%;
        height: var(--sab-wcs-stage-height, 430px);
        min-height: var(--sab-wcs-stage-height, 430px);
        padding: 0;
        overflow: visible !important;
        isolation: isolate;
    }

    .sab-wcs.sab-wcs-js-ready .sab-wcs-card {
        position: absolute;
        inset: 0;
        width: 100%;
        min-height: var(--sab-wcs-stage-height, 430px);
        margin: 0 !important;
        opacity: var(--sab-wcs-card-opacity, 0);
        visibility: var(--sab-wcs-card-visibility, hidden);
        pointer-events: var(--sab-wcs-card-pointer, none);
        transform: translate3d(0, var(--sab-wcs-card-y, 115%), 0);
        transform-origin: top center;
        transition: transform 110ms cubic-bezier(.22,.61,.36,1), opacity 90ms linear, visibility 90ms linear;
        will-change: transform, opacity;
    }
}

.sab-wcs-card-inner {
    position: relative;
    min-height: inherit;
    padding: 40px;
    border: 1px solid color-mix(in srgb, var(--sab-wcs-primary) 13%, transparent);
    border-radius: var(--sab-wcs-radius);
    overflow: hidden;
    background:
        radial-gradient(circle at 84% 14%, color-mix(in srgb, var(--sab-wcs-accent) 10%, transparent), transparent 25%),
        linear-gradient(145deg, #ffffff 0%, #fbfbf7 100%);
    box-shadow: 0 28px 80px color-mix(in srgb, var(--sab-wcs-deep) 13%, transparent);
    transform: translateY(var(--sab-wcs-inner-y, 0px)) scale(var(--sab-wcs-card-scale, 1));
    transform-origin: top center;
    filter: brightness(var(--sab-wcs-card-brightness, 1));
    transition: transform 90ms linear, filter 90ms linear, box-shadow .25s ease;
    will-change: transform, filter;
}

.sab-wcs-card:hover .sab-wcs-card-inner {
    box-shadow: 0 34px 94px color-mix(in srgb, var(--sab-wcs-deep) 18%, transparent);
}

.sab-wcs-featured .sab-wcs-card-inner {
    background:
        radial-gradient(circle at 84% 14%, color-mix(in srgb, var(--sab-wcs-accent) 30%, transparent), transparent 27%),
        linear-gradient(145deg, var(--sab-wcs-primary), var(--sab-wcs-deep));
    border-color: rgba(255, 255, 255, .14);
}

.sab-wcs-card-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    left: var(--sab-wcs-glow-x, 50%);
    top: var(--sab-wcs-glow-y, 50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--sab-wcs-accent) 18%, transparent), transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.sab-wcs-card:hover .sab-wcs-card-glow {
    opacity: 1;
}

.sab-wcs-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 70px;
}

.sab-wcs-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 23px;
    color: var(--sab-wcs-white);
    background: linear-gradient(135deg, var(--sab-wcs-primary), var(--sab-wcs-accent));
    box-shadow: 0 18px 35px color-mix(in srgb, var(--sab-wcs-deep) 18%, transparent);
}

.sab-wcs-icon::after {
    content: "";
    position: absolute;
    inset: -9px;
    border: 1px dashed color-mix(in srgb, var(--sab-wcs-accent) 42%, transparent);
    border-radius: 29px;
}

.sab-wcs-icon svg,
.sab-wcs-icon i {
    width: 28px;
    height: 28px;
    font-size: 28px;
    fill: currentColor;
    color: currentColor;
    position: relative;
    z-index: 1;
}

.sab-wcs-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.sab-wcs-badge {
    padding: 9px 14px;
    border: 1px solid color-mix(in srgb, var(--sab-wcs-primary) 13%, transparent);
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    color: var(--sab-wcs-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.sab-wcs-number {
    color: color-mix(in srgb, var(--sab-wcs-primary) 16%, transparent);
    font-size: 74px;
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.06em;
}

.sab-wcs-card-title {
    margin: 0;
    color: var(--sab-wcs-primary);
    font-size: clamp(28px, 2.25vw, 38px);
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -.04em;
}

.sab-wcs-card-desc {
    max-width: 610px;
    margin: 16px 0 0;
    color: var(--sab-wcs-text);
    font-size: 17px;
    line-height: 1.7;
}

.sab-wcs-card-line {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 32px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sab-wcs-primary), var(--sab-wcs-accent), color-mix(in srgb, var(--sab-wcs-accent) 15%, transparent));
    transform: scaleX(.32);
    transform-origin: left center;
    transition: transform .35s ease;
}

.sab-wcs-card:hover .sab-wcs-card-line {
    transform: scaleX(1);
}

.sab-wcs-featured .sab-wcs-badge {
    border-color: rgba(255, 255, 255, .17);
    background: rgba(255, 255, 255, .11);
    color: var(--sab-wcs-white);
}

.sab-wcs-featured .sab-wcs-number {
    color: rgba(255, 255, 255, .17);
}

.sab-wcs-featured .sab-wcs-card-title,
.sab-wcs-featured .sab-wcs-card-desc {
    color: var(--sab-wcs-white);
}

.sab-wcs-featured .sab-wcs-card-line {
    background: linear-gradient(90deg, rgba(255, 255, 255, .38), var(--sab-wcs-accent), rgba(255, 255, 255, .72));
}

@media (max-width: 1024px) {
    .sab-wcs {
        padding: 88px 0;
        overflow: hidden !important;
    }

    .sab-wcs-layout {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .sab-wcs-left-inner {
        position: relative;
        top: auto;
    }

    .sab-wcs.sab-wcs-js-ready {
        height: auto !important;
        min-height: 0 !important;
    }

    .sab-wcs.sab-wcs-js-ready .sab-wcs-container {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        display: block;
        height: auto !important;
        min-height: 0 !important;
        padding: 0;
        transform: none !important;
    }

    .sab-wcs.sab-wcs-js-ready .sab-wcs-right {
        height: auto !important;
        min-height: 0 !important;
    }

    .sab-wcs-stack,
    .sab-wcs.sab-wcs-js-ready .sab-wcs-stack {
        position: relative;
        top: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        height: auto !important;
        padding: 0;
        overflow: visible !important;
    }

    .sab-wcs-card,
    .sab-wcs.sab-wcs-js-ready .sab-wcs-card {
        position: relative;
        inset: auto;
        top: auto;
        min-height: 350px;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    .sab-wcs-card-inner {
        min-height: 350px;
        transform: none !important;
        filter: none !important;
    }

    .sab-wcs-card-top {
        margin-bottom: 46px;
    }
}

@media (max-width: 767px) {
    .sab-wcs {
        padding: 70px 0;
    }

    .sab-wcs-container {
        width: calc(100% - 30px);
    }

    .sab-wcs-heading {
        font-size: clamp(38px, 12vw, 52px);
    }

    .sab-wcs-lead {
        font-size: 15.5px;
    }

    .sab-wcs-stack {
        grid-template-columns: 1fr;
    }

    .sab-wcs-card,
    .sab-wcs-card-inner {
        min-height: auto;
    }

    .sab-wcs-card-inner {
        padding: 28px 22px;
        border-radius: min(var(--sab-wcs-radius), 24px);
    }

    .sab-wcs-card-top {
        margin-bottom: 38px;
    }

    .sab-wcs-icon {
        width: 60px;
        height: 60px;
        flex-basis: 60px;
        border-radius: 19px;
    }

    .sab-wcs-number {
        font-size: 52px;
    }

    .sab-wcs-card-title {
        font-size: 26px;
    }

    .sab-wcs-card-desc {
        font-size: 15.5px;
    }

    .sab-wcs-card-line {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sab-wcs-card-inner {
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .sab-wcs-progress > span {
        transition: none !important;
    }
}
