@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/poppins-v20-latin-300.woff2') format('woff2')
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/poppins-v20-latin-regular.woff2') format('woff2')
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/poppins-v20-latin-500.woff2') format('woff2')
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/poppins-v20-latin-600.woff2') format('woff2')
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/poppins-v20-latin-700.woff2') format('woff2')
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/poppins-v20-latin-800.woff2') format('woff2')
}
:root {
    --gd-ink: #070b0d;
    --gd-dark: #11181c;
    --gd-dark-soft: #182126;
    --gd-blue: #78a9dc;
    --gd-blue-light: #a8c9e8;
    --gd-blue-dark: #447aab;
    --gd-copper: #b67c59;
    --gd-copper-light: #d4a07c;
    --gd-white: #ffffff;
    --gd-cream: #f4f1eb;
    --gd-light: #edf3f7;
    --gd-muted: #647179;
    --gd-line: rgba(255, 255, 255, .16);
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    overflow-x: hidden;
    font-family:
        Arial,
        Helvetica,
        sans-serif;
    background:
        var(--gd-ink);
}
a {
    text-decoration: none;
}
/* =========================================================
           HERO
        ========================================================= */
.gd-door-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    color: var(--gd-white);
    background:
        var(--gd-dark);
}
/* =========================================================
           FULL BACKGROUND PHOTO
        ========================================================= */
.gd-door-photo {
    position: absolute;
    inset: 0;
    z-index: -5;
    overflow: hidden;
}
.gd-door-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    animation:
        gdHeroZoom 14s ease-in-out infinite alternate;
}
@keyframes gdHeroZoom {
    from {
        transform:
            scale(1);
    }
    to {
        transform:
            scale(1.045);
    }
}
/* cinematic overlay */
.gd-door-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(5, 8, 10, .72) 0%,
            rgba(5, 8, 10, .40) 46%,
            rgba(5, 8, 10, .13) 78%,
            rgba(5, 8, 10, .24) 100%),
        linear-gradient(180deg,
            rgba(5, 8, 10, .24),
            rgba(5, 8, 10, .05) 46%,
            rgba(5, 8, 10, .52));
}
/* =========================================================
           GARAGE DOOR PANEL LINES
        ========================================================= */
.gd-door-lines {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.gd-door-lines span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background:
        rgba(255, 255, 255, .13);
}
.gd-door-lines span:nth-child(1) {
    top: 25%;
}
.gd-door-lines span:nth-child(2) {
    top: 50%;
}
.gd-door-lines span:nth-child(3) {
    top: 75%;
}
.gd-door-lines::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            transparent 0 24.95%,
            rgba(255, 255, 255, .06) 25% 25.05%,
            transparent 25.05% 49.95%,
            rgba(255, 255, 255, .06) 50% 50.05%,
            transparent 50.05% 74.95%,
            rgba(255, 255, 255, .06) 75% 75.05%,
            transparent 75.05%);
}
/* subtle texture */
.gd-door-lines::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .18;
    background:
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, .025) 0,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px,
            transparent 13px);
}
/* =========================================================
           NAVBAR
        ========================================================= */
.gd-topbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
    width: 100%;
    border-bottom:
        1px solid rgba(255, 255, 255, .17);
    background:
        rgba(7, 11, 13, .05);
    backdrop-filter:
        blur(5px);
    -webkit-backdrop-filter:
        blur(5px);
}
.gd-navbar {
    min-height: 82px;
    display: flex;
    align-items: center;
}
.gd-nav-row {
    width: 100%;
    display: grid;
    grid-template-columns:
        250px 1fr 180px;
    align-items: center;
    gap: 25px;
}
/* =========================================================
           LOGO
        ========================================================= */
.gd-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    color:
        var(--gd-white);
    font-size: 15px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.gd-logo-icon {
    position: relative;
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border:
        1px solid rgba(255, 255, 255, .45);
    overflow: hidden;
}
.gd-logo-icon::before {
    content: "";
    position: absolute;
    top: -14px;
    right: -14px;
    width: 28px;
    height: 28px;
    background:
        var(--gd-copper);
    transform:
        rotate(45deg);
}
.gd-logo-icon i {
    position: relative;
    z-index: 2;
    color:
        var(--gd-white);
    font-size: 14px;
}
.gd-logo-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.gd-logo-text strong {
    color:
        var(--gd-white);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
}
.gd-logo-text small {
    color:
        var(--gd-copper-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
}
/* =========================================================
           NAV MENU
        ========================================================= */
.gd-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 34px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.gd-menu>li {
    position: relative;
}
.gd-menu>li>a {
    position: relative;
    min-height: 82px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color:
        rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition:
        color .3s ease;
}
.gd-menu>li>a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 2px;
    background:
        var(--gd-copper);
    transition:
        width .3s ease;
}
.gd-menu>li:hover>a,
.gd-menu>li>a:focus {
    color:
        var(--gd-white);
}
.gd-menu>li:hover>a::after,
.gd-menu>li:focus-within>a::after {
    width: 100%;
}
/* =========================================================
           DROPDOWN
        ========================================================= */
.gd-dropdown {
    position: absolute;
    left: 50%;
    top: 100%;
    width: 255px;
    padding: 8px;
    margin: 0;
    list-style: none;
    background:
        var(--gd-cream);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, .23);
    opacity: 0;
    visibility: hidden;
    transform:
        translate(-50%, 12px);
    transition:
        .3s ease;
}
.gd-menu>li:hover>.gd-dropdown,
.gd-menu>li:focus-within>.gd-dropdown,
.gd-menu>li.is-submenu-open>.gd-dropdown {
    opacity: 1;
    visibility: visible;
    transform:
        translate(-50%, 0);
}
.gd-dropdown li+li {
    border-top:
        1px solid rgba(17, 24, 28, .08);
}
.gd-dropdown a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding:
        13px 12px;
    color:
        var(--gd-dark);
    font-size: 13px;
    font-weight: 800;
    transition:
        .25s ease;
}
.gd-dropdown a i {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color:
        var(--gd-white);
    background:
        var(--gd-copper);
    font-size: 12px;
}
.gd-dropdown a:hover {
    padding-left:
        18px;
    color:
        var(--gd-blue-dark);
    background:
        var(--gd-white);
}
/* =========================================================
           NAV CALL BUTTON
        ========================================================= */
.gd-nav-call {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding:
        12px 17px;
    border:
        1px solid rgba(255, 255, 255, .40);
    color:
        var(--gd-white);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    transition:
        .3s ease;
}
.gd-nav-call i {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    color:
        var(--gd-dark);
    background:
        var(--gd-copper-light);
    font-size: 12px;
}
.gd-nav-call:hover {
    color:
        var(--gd-white);
    border-color:
        var(--gd-copper);
    background:
        var(--gd-copper);
}
.gd-nav-call:hover i {
    background:
        var(--gd-white);
}
.gd-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border:
        1px solid rgba(255, 255, 255, .38);
    place-items: center;
    background:
        rgba(7, 11, 13, .24);
    cursor: pointer;
    transition:
        .3s ease;
}
.gd-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background:
        var(--gd-white);
    transition:
        transform .25s ease,
        opacity .25s ease;
}
.gd-menu-toggle.is-active {
    border-color:
        var(--gd-copper-light);
    background:
        var(--gd-copper);
}
.gd-menu-toggle.is-active span:nth-child(1) {
    transform:
        translateY(7px) rotate(45deg);
}
.gd-menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}
.gd-menu-toggle.is-active span:nth-child(3) {
    transform:
        translateY(-7px) rotate(-45deg);
}
/* =========================================================
           MAIN HERO BODY
        ========================================================= */
.gd-main {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding:
        130px 0 120px;
}
/* =========================================================
           REVEAL PANEL
        ========================================================= */
.gd-reveal-panel {
    position: relative;
    z-index: 8;
    width:
        min(760px, 62vw);
    padding:
        47px 52px 44px;
    color:
        var(--gd-dark);
    background:
        rgba(244, 241, 235, .96);
    box-shadow:
        0 35px 90px rgba(0, 0, 0, .23);
    animation:
        gdPanelIn .85s ease both;
}
@keyframes gdPanelIn {
    from {
        opacity: 0;
        transform:
            translateX(-50px);
    }
    to {
        opacity: 1;
        transform:
            translateX(0);
    }
}
/* blue left edge */
.gd-reveal-panel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    background:
        var(--gd-blue-dark);
}
/* copper connector */
.gd-reveal-panel::after {
    content: "";
    position: absolute;
    top: 43px;
    right: -125px;
    width: 125px;
    height: 1px;
    background:
        var(--gd-copper);
}
/* =========================================================
           KICKER
        ========================================================= */
.gd-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
    color:
        var(--gd-copper);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}
.gd-kicker::before {
    content: "";
    width: 31px;
    height: 2px;
    background:
        var(--gd-copper);
}
/* =========================================================
           HEADING
        ========================================================= */
.gd-reveal-panel h1 {
    margin: 0;
    max-width: 680px;
    color:
        var(--gd-dark);
    font-size:
        clamp(50px, 5.2vw, 79px);
    line-height: .84;
    font-weight: 900;
    letter-spacing:
        -4.8px;
    text-transform:
        uppercase;
}
.gd-reveal-panel h1 span {
    display: block;
    color:
        var(--gd-blue-dark);
}
/* =========================================================
           PANEL BOTTOM
        ========================================================= */
.gd-panel-bottom {
    display: grid;
    grid-template-columns:
        1fr;
    align-items: start;
    gap: 22px;
    margin-top: 27px;
}
.gd-reveal-panel p {
    max-width: 530px;
    margin: 0;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.78;
}
/* =========================================================
           MAIN BUTTON
        ========================================================= */
.gd-main-btn {
    position: relative;
    min-width: 155px;
    display: inline-flex;
    justify-self: start;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding:
        15px 17px;
    overflow: hidden;
    color:
        var(--gd-white);
    background:
        var(--gd-dark);
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition:
        .35s ease;
}
.gd-main-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        var(--gd-copper);
    transform:
        translateX(-102%);
    transition:
        transform .35s ease;
}
.gd-main-btn span,
.gd-main-btn i {
    position: relative;
    z-index: 2;
}
.gd-main-btn i {
    font-size: 13px;
    transition:
        transform .3s ease;
}
.gd-main-btn:hover {
    color:
        var(--gd-white);
}
.gd-main-btn:hover::before {
    transform:
        translateX(0);
}
.gd-main-btn:hover i {
    transform:
        translateX(5px);
}
/* =========================================================
           24 / 7
           FAR RIGHT
        ========================================================= */
.gd-hours {
    position: absolute;
    z-index: 10;
    top: 50%;
    right: 4.5%;
    transform:
        translateY(-43%);
    width: 210px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color:
        var(--gd-white);
}
.gd-hours-line {
    width: 48px;
    height: 2px;
    display: block;
    margin-bottom: 18px;
    background:
        var(--gd-copper);
    animation:
        gdHoursLine 1s .45s ease both;
    transform-origin:
        left;
}
@keyframes gdHoursLine {
    from {
        transform:
            scaleX(0);
    }
    to {
        transform:
            scaleX(1);
    }
}
.gd-hours-number {
    display: flex;
    align-items: flex-start;
}
.gd-hours-number strong {
    color:
        var(--gd-white);
    font-size:
        clamp(92px, 8.2vw, 138px);
    line-height:
        .70;
    font-weight: 900;
    letter-spacing:
        -10px;
    text-shadow:
        0 20px 45px rgba(0, 0, 0, .25);
}
.gd-hours-slash {
    margin:
        2px 0 0 10px;
    color:
        var(--gd-copper-light);
    font-size:
        28px;
    line-height: 1;
    font-weight: 900;
    letter-spacing:
        -1px;
}
.gd-hours-text {
    margin-top: 21px;
    display: flex;
    align-items: center;
    gap: 11px;
}
.gd-hours-icon {
    width: 37px;
    height: 37px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border:
        1px solid rgba(255, 255, 255, .35);
    color:
        var(--gd-copper-light);
    background:
        rgba(7, 11, 13, .20);
    font-size: 14px;
}
.gd-hours-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.gd-hours-copy small {
    color:
        rgba(255, 255, 255, .65);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}
.gd-hours-copy strong {
    color:
        var(--gd-white);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
/* =========================================================
           BOTTOM SERVICE RAIL
        ========================================================= */
.gd-service-rail {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 20;
    width: 100%;
    border-top:
        1px solid rgba(255, 255, 255, .20);
    background:
        rgba(5, 8, 10, .42);
    backdrop-filter:
        blur(11px);
    -webkit-backdrop-filter:
        blur(11px);
}
.gd-service-row {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr) 76px;
}
.gd-service-item {
    position: relative;
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding:
        0 22px;
    border-right:
        1px solid rgba(255, 255, 255, .17);
    color:
        var(--gd-white);
    overflow: hidden;
    transition:
        .3s ease;
}
.gd-service-item::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background:
        rgba(255, 255, 255, .08);
    transition:
        height .3s ease;
}
.gd-service-item:hover::before {
    height: 100%;
}
.gd-service-icon {
    position: relative;
    z-index: 2;
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border:
        1px solid rgba(255, 255, 255, .27);
    color:
        var(--gd-copper-light);
    font-size: 15px;
    transition:
        .3s ease;
}
.gd-service-item:hover .gd-service-icon {
    color:
        var(--gd-dark);
    border-color:
        var(--gd-copper-light);
    background:
        var(--gd-copper-light);
    transform:
        rotate(-6deg);
}
.gd-service-data {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.gd-service-data strong {
    color:
        var(--gd-copper-light);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.3px;
}
.gd-service-data span {
    color:
        var(--gd-white);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.gd-service-arrow {
    display: grid;
    place-items: center;
    color:
        var(--gd-white);
    font-size: 17px;
    transition:
        .3s ease;
}
.gd-service-arrow:hover {
    color:
        var(--gd-copper-light);
    transform:
        translateX(5px);
}
/* =========================================================
           TABLET
        ========================================================= */
@media (max-width: 1199.98px) {
    .gd-nav-row {
        grid-template-columns:
            220px 1fr 150px;
    }
    .gd-menu {
        gap: 23px;
    }
    .gd-hours {
        right: 2.5%;
        width: 165px;
    }
    .gd-hours-number strong {
        font-size: 90px;
        letter-spacing: -7px;
    }
    .gd-hours-slash {
        font-size: 21px;
    }
    .gd-reveal-panel {
        width:
            min(690px, 66vw);
    }
}
/* =========================================================
           MOBILE / TABLET NAV
        ========================================================= */
@media (max-width: 991.98px) {
    .gd-topbar {
        position: absolute;
        z-index: 1000;
        overflow: visible;
    }
    .gd-navbar {
        min-height: 72px;
    }
    .gd-nav-row {
        display: flex;
        justify-content:
            space-between;
        position: relative;
    }
    .gd-menu-toggle {
        display: grid;
        gap: 5px;
        order: 2;
        margin-left: auto;
        flex-shrink: 0;
        position: relative;
        z-index: 1002;
    }
    .gd-menu {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        z-index: 1001;
        max-height:
            calc(100vh - 105px);
        overflow-y: auto;
        padding:
            12px;
        align-items: stretch;
        gap: 0;
        flex-direction: column;
        background:
            rgba(244, 241, 235, .98);
        box-shadow:
            0 24px 55px rgba(0, 0, 0, .36);
    }
    .gd-menu.is-open {
        display: flex !important;
    }
    .gd-menu>li+li {
        border-top:
            1px solid rgba(17, 24, 28, .09);
    }
    .gd-menu>li>a {
        min-height: 0;
        width: 100%;
        padding:
            13px 10px;
        justify-content:
            space-between;
        color:
            var(--gd-dark);
        font-size: 13px;
    }
    .gd-menu>li>a::after,
    .gd-menu>li:hover>a::after,
    .gd-menu>li:focus-within>a::after {
        display: none;
        width: 0;
    }
    .gd-menu>li:hover>a,
    .gd-menu>li>a:focus {
        color:
            var(--gd-dark);
    }
    .gd-menu .gd-dropdown {
        display: none;
        position: static;
        width: 100%;
        padding:
            0 0 8px;
        opacity: 1;
        visibility: visible;
        transform:
            none;
        background:
            transparent;
        box-shadow:
            none;
    }
    .gd-menu>li:hover>.gd-dropdown,
    .gd-menu>li:focus-within>.gd-dropdown {
        display: none;
    }
    .gd-menu>li.is-submenu-open>.gd-dropdown {
        display: block !important;
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none !important;
    }
    .gd-menu>li.is-submenu-open>.gd-submenu-toggle i {
        transform:
            rotate(180deg);
    }
    .gd-dropdown a {
        padding:
            10px 12px;
        font-size: 12px;
    }
    .gd-dropdown a:hover {
        padding-left:
            12px;
        color:
            var(--gd-dark);
        background:
            transparent;
    }
    .gd-nav-call {
        display: none;
    }
    .gd-main {
        align-items: flex-end;
        padding:
            130px 0 145px;
    }
    .gd-reveal-panel {
        width: 86%;
        padding:
            40px 40px 38px;
    }
    .gd-reveal-panel h1 {
        font-size:
            clamp(48px, 8vw, 68px);
    }
    .gd-reveal-panel::after {
        width: 80px;
        right: -80px;
    }
    .gd-panel-bottom {
        grid-template-columns:
            1fr;
    }
    .gd-main-btn {
        width: fit-content;
    }
    .gd-hours {
        top: 115px;
        right: 25px;
        width: auto;
        transform: none;
    }
    .gd-hours-line {
        margin-bottom: 12px;
    }
    .gd-hours-number strong {
        font-size: 65px;
        letter-spacing: -5px;
    }
    .gd-hours-slash {
        margin-left: 6px;
        font-size: 18px;
    }
    .gd-hours-text {
        margin-top: 13px;
    }
    .gd-service-row {
        grid-template-columns:
            repeat(3, 1fr);
    }
    .gd-service-arrow {
        display: none;
    }
}
/* =========================================================
           MOBILE
        ========================================================= */
@media (max-width: 575.98px) {
    .gd-door-hero {
        min-height: 820px;
    }
    .gd-navbar {
        min-height: 68px;
    }
    .gd-logo {
        gap: 9px;
    }
    .gd-logo-icon {
        width: 34px;
        height: 34px;
    }
    .gd-logo-text strong {
        font-size: 12px;
    }
    .gd-logo-text small {
        font-size: 8px;
    }
    .gd-menu-toggle {
        width: 40px;
        height: 40px;
    }
    .gd-main {
        min-height: 820px;
        padding:
            125px 0 180px;
    }
    .gd-reveal-panel {
        width: 94%;
        margin:
            0 auto;
        padding:
            29px 24px 28px;
    }
    .gd-reveal-panel::after {
        display: none;
    }
    .gd-kicker {
        margin-bottom: 14px;
        font-size: 9px;
        letter-spacing: 1.5px;
    }
    .gd-kicker::before {
        width: 22px;
    }
    .gd-reveal-panel h1 {
        font-size: 43px;
        line-height: .87;
        letter-spacing: -3px;
    }
    .gd-reveal-panel p {
        font-size: 14px;
        line-height: 1.7;
    }
    .gd-panel-bottom {
        margin-top: 21px;
        gap: 19px;
    }
    .gd-main-btn {
        width: 100%;
    }
    /* 24/7 on mobile */
    .gd-hours {
        top: 88px;
        right: 14px;
    }
    .gd-hours-line {
        width: 29px;
        margin-bottom: 8px;
    }
    .gd-hours-number strong {
        font-size: 47px;
        letter-spacing: -4px;
    }
    .gd-hours-slash {
        margin:
            2px 0 0 5px;
        font-size: 14px;
    }
    .gd-hours-text {
        display: none;
    }
    /* bottom rail */
    .gd-service-row {
        grid-template-columns:
            repeat(3, 1fr);
    }
    .gd-service-item {
        min-height: 104px;
        padding:
            13px 5px;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        text-align: center;
    }
    .gd-service-icon {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .gd-service-data {
        align-items: center;
        gap: 4px;
    }
    .gd-service-data strong {
        font-size: 9px;
    }
    .gd-service-data span {
        font-size: 9px;
        line-height: 1.4;
    }
}
/* =========================================================
   WHY CHOOSE US - BLUEPRINT STYLE
========================================================= */
.gd-why-blueprint {
    position: relative;
    padding:
        115px 0;
    overflow: hidden;
    background:
        #edf3f7;
}
/* blueprint texture */
.gd-why-blueprint::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(68, 122, 171, .045) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(68, 122, 171, .045) 1px,
            transparent 1px);
    background-size:
        44px 44px;
}
/* copper architectural line */
.gd-why-blueprint::after {
    content: "";
    position: absolute;
    right: 0;
    top: 115px;
    width: 15%;
    height: 2px;
    background:
        var(--gd-copper);
}
/* =========================================================
   HEADER
========================================================= */
.gd-why-head {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 80px;
    align-items: end;
    margin-bottom: 55px;
}
.gd-why-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color:
        var(--gd-copper);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.gd-why-label::before {
    content: "";
    width: 33px;
    height: 2px;
    background:
        var(--gd-copper);
}
.gd-why-head h2 {
    max-width: 800px;
    margin: 0;
    color:
        var(--gd-dark);
    font-size:
        clamp(52px, 6vw, 86px);
    line-height: .86;
    font-weight: 900;
    letter-spacing:
        -5px;
    text-transform: uppercase;
}
.gd-why-head h2 span {
    display: block;
    color:
        var(--gd-blue-dark);
}
.gd-why-head-right {
    display: grid;
    grid-template-columns:
        70px 1fr;
    gap: 22px;
    align-items: start;
}
.gd-head-number {
    color:
        rgba(17, 24, 28, .16);
    font-size: 52px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -4px;
}
.gd-why-head-right p {
    margin: 0;
    padding-top: 5px;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.8;
}
/* =========================================================
   TECHNICAL RAIL
========================================================= */
.gd-blueprint-rail {
    position: relative;
    z-index: 2;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:
        0 24px;
    border-top:
        1px solid rgba(17, 24, 28, .16);
    border-bottom:
        1px solid rgba(17, 24, 28, .16);
}
.gd-blueprint-rail span {
    color:
        var(--gd-dark);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}
.gd-blueprint-rail i {
    flex: 1;
    height: 1px;
    margin:
        0 24px;
    background:
        linear-gradient(90deg,
            rgba(17, 24, 28, .10),
            var(--gd-copper),
            rgba(17, 24, 28, .10));
}
/* =========================================================
   WHY ROW
========================================================= */
.gd-blueprint-row {
    position: relative;
    z-index: 2;
    margin-top: 28px;
    border-top:
        1px solid rgba(17, 24, 28, .13);
    border-bottom:
        1px solid rgba(17, 24, 28, .13);
}
/* =========================================================
   ITEM
========================================================= */
.gd-blueprint-item {
    position: relative;
    min-height: 440px;
    padding:
        50px 38px 40px;
    overflow: hidden;
    border-right:
        1px solid rgba(17, 24, 28, .13);
    transition:
        background .4s ease;
}
.gd-blueprint-row>div:last-child .gd-blueprint-item {
    border-right: 0;
}
.gd-blueprint-item:hover {
    background:
        rgba(255, 255, 255, .60);
}
/* giant number */
.gd-blueprint-big {
    position: absolute;
    right: 16px;
    top: 5px;
    color:
        rgba(68, 122, 171, .07);
    font-size: 145px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -12px;
    pointer-events: none;
    transition:
        .4s ease;
}
.gd-blueprint-item:hover .gd-blueprint-big {
    color:
        rgba(182, 124, 89, .11);
    transform:
        translateY(-7px);
}
/* icon */
.gd-blueprint-icon {
    position: relative;
    z-index: 2;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: 52px;
    border:
        1px solid rgba(17, 24, 28, .20);
    color:
        var(--gd-blue-dark);
    font-size: 14px;
}
.gd-blueprint-icon::before {
    content: "";
    position: absolute;
    left: -1px;
    bottom: -1px;
    width: 14px;
    height: 14px;
    border-left:
        3px solid var(--gd-copper);
    border-bottom:
        3px solid var(--gd-copper);
}
.gd-blueprint-item:hover .gd-blueprint-icon {
    color:
        var(--gd-white);
    border-color:
        var(--gd-blue-dark);
    background:
        var(--gd-blue-dark);
}
/* content */
.gd-blueprint-content {
    position: relative;
    z-index: 2;
}
.gd-blueprint-small {
    display: block;
    margin-bottom: 11px;
    color:
        var(--gd-copper);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.gd-blueprint-content h3 {
    max-width: 310px;
    margin:
        0 0 16px;
    color:
        var(--gd-dark);
    font-size: 23px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -1px;
    text-transform: uppercase;
}
.gd-blueprint-content p {
    max-width: 310px;
    margin: 0;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.75;
}
/* corner shape */
.gd-corner-mark {
    position: absolute;
    right: 22px;
    bottom: 22px;
    width: 30px;
    height: 30px;
    border-right:
        1px solid var(--gd-copper);
    border-bottom:
        1px solid var(--gd-copper);
}
/* =========================================================
   STATS STRIP
========================================================= */
.gd-stats-strip {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        1fr 1fr 1fr 1.25fr;
    margin-top: 28px;
    background:
        var(--gd-dark);
}
/* =========================================================
   STAT BLOCK
========================================================= */
.gd-stat-block {
    position: relative;
    min-height: 155px;
    padding:
        27px 30px;
    border-right:
        1px solid rgba(255, 255, 255, .12);
    overflow: hidden;
}
.gd-stat-index {
    position: absolute;
    right: 15px;
    top: 13px;
    color:
        rgba(255, 255, 255, .22);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}
.gd-stat-number {
    color:
        var(--gd-white);
    font-size: 57px;
    line-height: .85;
    font-weight: 900;
    letter-spacing: -5px;
}
.gd-stat-number span {
    color:
        var(--gd-copper-light);
    font-size: 18px;
    letter-spacing: -1px;
}
.gd-stat-block p {
    margin:
        15px 0 0;
    color:
        rgba(255, 255, 255, .57);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* =========================================================
   FINAL STAT BLOCK
========================================================= */
.gd-stat-block-end {
    display: flex;
    align-items: center;
    gap: 19px;
    border-right: 0;
    background:
        var(--gd-blue-dark);
}
.gd-stat-arrow {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color:
        var(--gd-white);
    border:
        1px solid rgba(255, 255, 255, .40);
    transition:
        .3s ease;
}
.gd-stat-block-end:hover .gd-stat-arrow {
    color:
        var(--gd-dark);
    background:
        var(--gd-copper-light);
    border-color:
        var(--gd-copper-light);
    transform:
        translateX(5px);
}
.gd-stat-block-end>div:last-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.gd-stat-block-end span {
    color:
        rgba(255, 255, 255, .63);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.gd-stat-block-end strong {
    color:
        var(--gd-white);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .5px;
    text-transform: uppercase;
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .gd-why-blueprint {
        padding:
            85px 0;
    }
    .gd-why-head {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .gd-why-head-right {
        max-width: 600px;
    }
    .gd-blueprint-item {
        min-height: auto;
        border-right: 0;
        border-bottom:
            1px solid rgba(17, 24, 28, .13);
    }
    .gd-blueprint-row>div:last-child .gd-blueprint-item {
        border-bottom: 0;
    }
    .gd-stats-strip {
        grid-template-columns:
            repeat(2, 1fr);
    }
    .gd-stat-block:nth-child(2) {
        border-right: 0;
    }
    .gd-stat-block {
        border-bottom:
            1px solid rgba(255, 255, 255, .12);
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    .gd-why-blueprint {
        padding:
            60px 0;
    }
    .gd-why-head {
        margin-bottom:
            35px;
    }
    .gd-why-head h2 {
        font-size: 42px;
        letter-spacing: -3px;
    }
    .gd-why-head-right {
        grid-template-columns:
            50px 1fr;
        gap: 15px;
    }
    .gd-head-number {
        font-size: 40px;
    }
    .gd-why-head-right p {
        font-size: 14px;
    }
    .gd-blueprint-rail {
        padding:
            0 10px;
    }
    .gd-blueprint-rail span {
        font-size: 8px;
        letter-spacing: 1px;
    }
    .gd-blueprint-rail i {
        margin:
            0 8px;
    }
    .gd-blueprint-item {
        min-height: 370px;
        padding:
            38px 23px 32px;
    }
    .gd-blueprint-big {
        font-size: 105px;
    }
    .gd-blueprint-icon {
        margin-bottom: 40px;
    }
    .gd-blueprint-content h3 {
        font-size: 20px;
    }
    .gd-blueprint-content p {
        font-size: 14px;
    }
    .gd-stats-strip {
        grid-template-columns:
            repeat(2, 1fr);
    }
    .gd-stat-block {
        min-height: 135px;
        padding:
            23px 18px;
    }
    .gd-stat-number {
        font-size: 46px;
    }
    .gd-stat-block-end {
        gap: 12px;
    }
    .gd-stat-arrow {
        width: 38px;
        height: 38px;
    }
}
/* =========================================================
   SYSTEM SECTION
========================================================= */
.gd-system-section {
    position: relative;
    overflow: hidden;
    background:
        #090e12;
    color:
        var(--gd-white);
}
/* texture */
.gd-system-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .45;
    background:
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, .018) 0,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px,
            transparent 15px);
}
/* =========================================================
   LEFT
========================================================= */
.gd-system-content {
    position: relative;
    min-height: 760px;
    padding:
        95px 8vw 170px 10vw;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            rgba(18, 28, 35, .98),
            rgba(7, 11, 14, .98));
}
/* vertical technical line */
.gd-system-content::before {
    content: "";
    position: absolute;
    left: 6.5%;
    top: 16%;
    width: 1px;
    height: 56%;
    background:
        rgba(120, 169, 220, .22);
}
/* copper marker */
.gd-system-content::after {
    content: "";
    position: absolute;
    left: 6.2%;
    top: 42%;
    width: 10px;
    height: 46px;
    border-top:
        2px solid var(--gd-copper);
    border-bottom:
        2px solid var(--gd-copper);
}
/* =========================================================
   TOP LINE
========================================================= */
.gd-system-topline {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}
.gd-system-topline span {
    color:
        var(--gd-copper-light);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.gd-system-topline i {
    display: block;
    width: 150px;
    height: 4px;
    background:
        repeating-linear-gradient(135deg,
            var(--gd-copper) 0 5px,
            transparent 5px 9px);
}
/* =========================================================
   HEADING
========================================================= */
.gd-system-content h2 {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin:
        0 0 28px;
    color:
        rgba(255, 255, 255, .86);
    font-size:
        clamp(42px, 4vw, 64px);
    line-height:
        .95;
    font-weight: 800;
    letter-spacing:
        -3px;
    text-transform:
        uppercase;
}
.gd-system-content h2 strong {
    display: block;
    margin-top: 4px;
    color:
        var(--gd-white);
    font-size:
        clamp(68px, 7.6vw, 128px);
    line-height:
        .82;
    letter-spacing:
        -7px;
}
.gd-system-content h2 span {
    display: block;
    margin-top: 12px;
    color:
        var(--gd-copper);
    font-size:
        clamp(20px, 2vw, 31px);
    line-height: 1;
    letter-spacing:
        5px;
}
/* =========================================================
   INTRO
========================================================= */
.gd-system-intro {
    position: relative;
    z-index: 2;
    max-width: 670px;
    margin:
        0 0 36px;
    color:
        rgba(255, 255, 255, .74);
    font-size: 15px;
    line-height: 1.75;
}
/* =========================================================
   DETAIL PANEL
========================================================= */
.gd-system-detail {
    position: relative;
    z-index: 3;
    max-width: 700px;
    display: grid;
    grid-template-columns:
        58px 1fr;
    gap: 24px;
    padding:
        27px 30px;
    border:
        1px solid rgba(120, 169, 220, .42);
    background:
        linear-gradient(135deg,
            rgba(68, 122, 171, .16),
            rgba(255, 255, 255, .025));
    clip-path:
        polygon(5% 0,
            100% 0,
            94% 100%,
            0 100%);
}
.gd-system-detail::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background:
        var(--gd-blue);
}
.gd-system-detail-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    color:
        var(--gd-copper-light);
    border:
        1px solid rgba(255, 255, 255, .16);
    font-size: 21px;
}
.gd-system-detail p {
    margin: 0;
    color:
        rgba(255, 255, 255, .76);
    font-size: 14px;
    line-height: 1.72;
}
/* =========================================================
   TECH SCALE
========================================================= */
.gd-system-scale {
    position: absolute;
    left: 6.5%;
    top: 27%;
    display: flex;
    flex-direction: column;
    gap: 62px;
}
.gd-system-scale div {
    position: relative;
    padding-left: 20px;
}
.gd-system-scale div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 11px;
    height: 1px;
    background:
        var(--gd-copper);
}
.gd-system-scale span {
    color:
        rgba(255, 255, 255, .25);
    font-size: 12px;
    font-weight: 900;
}
/* =========================================================
   IMAGE SIDE
========================================================= */
.gd-system-image {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    background:
        var(--gd-dark);
}
.gd-system-image::before {
    content: "";
    position: absolute;
    z-index: 4;
    left: -95px;
    top: 0;
    width: 190px;
    height: 100%;
    background:
        #090e12;
    transform:
        skewX(-14deg);
    transform-origin:
        top;
}
.gd-system-image img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position:
        center;
    transition:
        transform 1.2s ease;
}
.gd-system-section:hover .gd-system-image img {
    transform:
        scale(1.035);
}
.gd-system-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(90deg,
            rgba(9, 14, 18, .52),
            rgba(9, 14, 18, .04) 55%),
        linear-gradient(180deg,
            rgba(9, 14, 18, .08),
            rgba(9, 14, 18, .16) 60%,
            rgba(9, 14, 18, .56));
}
/* =========================================================
   BLUEPRINT BOX
========================================================= */
.gd-system-blueprint {
    position: absolute;
    z-index: 6;
    right: 5%;
    bottom: 105px;
    width: 250px;
    padding:
        22px 23px;
    border:
        1px solid rgba(212, 160, 124, .50);
    background:
        rgba(10, 14, 17, .74);
    backdrop-filter:
        blur(10px);
    -webkit-backdrop-filter:
        blur(10px);
}
.gd-blueprint-label {
    display: block;
    margin-bottom: 18px;
    color:
        var(--gd-copper-light);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
/* fake garage door blueprint */
.gd-blueprint-door {
    position: relative;
    height: 115px;
    padding: 11px;
    border:
        1px solid var(--gd-copper);
}
.gd-blueprint-door::before,
.gd-blueprint-door::after {
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background:
        rgba(212, 160, 124, .35);
}
.gd-blueprint-door::before {
    left: 33%;
}
.gd-blueprint-door::after {
    right: 33%;
}
.gd-blueprint-door span {
    display: block;
    height: 25%;
    border-bottom:
        1px solid rgba(212, 160, 124, .38);
}
.gd-blueprint-door span:last-child {
    border-bottom: 0;
}
.gd-system-blueprint small {
    display: block;
    margin-top: 12px;
    color:
        rgba(255, 255, 255, .48);
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* =========================================================
   IMAGE LABEL
========================================================= */
.gd-system-image-label {
    position: absolute;
    z-index: 6;
    right: 5%;
    bottom: 38px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.gd-system-image-label span,
.gd-system-image-label strong {
    text-transform: uppercase;
}
.gd-system-image-label span {
    color:
        var(--gd-copper-light);
    font-size: 10px;
    letter-spacing: 1.5px;
}
.gd-system-image-label strong {
    color:
        var(--gd-white);
    font-size: 11px;
    letter-spacing: 1.2px;
}
/* =========================================================
   SERVICES RAIL
========================================================= */
.gd-system-services {
    position: relative;
    z-index: 15;
    margin-top: -105px;
    background:
        transparent;
}
.gd-system-services .container {
    position: relative;
}
.gd-system-services .row {
    border:
        1px solid rgba(255, 255, 255, .22);
    background:
        rgba(10, 15, 19, .94);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, .28);
}
.gd-system-service {
    position: relative;
    min-height: 112px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding:
        22px 20px;
    border-right:
        1px solid rgba(255, 255, 255, .13);
    overflow: hidden;
    transition:
        .35s ease;
}
.gd-system-service::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background:
        rgba(120, 169, 220, .10);
    transition:
        .35s ease;
}
.gd-system-service:hover::before {
    height: 100%;
}
.gd-system-service-icon {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color:
        var(--gd-copper-light);
    border:
        1px solid rgba(255, 255, 255, .20);
    font-size: 15px;
}
.gd-system-service>div:last-child {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.gd-system-service strong {
    color:
        var(--gd-white);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.gd-system-service span {
    color:
        rgba(255, 255, 255, .52);
    font-size: 10px;
    line-height: 1.4;
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .gd-system-content {
        min-height: auto;
        padding:
            80px 7% 80px;
    }
    .gd-system-content::before,
    .gd-system-content::after,
    .gd-system-scale {
        display: none;
    }
    .gd-system-content h2 strong {
        font-size:
            clamp(65px, 12vw, 105px);
    }
    .gd-system-image {
        min-height: 600px;
    }
    .gd-system-image::before {
        display: none;
    }
    .gd-system-services {
        margin-top: 0;
    }
    .gd-system-service {
        border-bottom:
            1px solid rgba(255, 255, 255, .12);
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    .gd-system-content {
        padding:
            60px 23px 55px;
    }
    .gd-system-topline {
        gap: 12px;
    }
    .gd-system-topline span {
        font-size: 9px;
        letter-spacing: 1.4px;
    }
    .gd-system-topline i {
        width: 70px;
    }
    .gd-system-content h2 {
        font-size: 33px;
        letter-spacing: -2px;
    }
    .gd-system-content h2 strong {
        font-size: 58px;
        letter-spacing: -4px;
    }
    .gd-system-content h2 span {
        font-size: 16px;
        line-height: 1.1;
        letter-spacing: 2px;
    }
    .gd-system-intro {
        font-size: 13px;
    }
    .gd-system-detail {
        grid-template-columns: 1fr;
        gap: 15px;
        padding:
            22px 20px;
        clip-path:
            polygon(5% 0,
                100% 0,
                95% 100%,
                0 100%);
    }
    .gd-system-detail p {
        font-size: 14px;
    }
    .gd-system-image {
        min-height: 500px;
    }
    .gd-system-blueprint {
        width: 210px;
        right: 18px;
        bottom: 80px;
    }
    .gd-system-service {
        min-height: 105px;
        padding:
            18px 14px;
    }
    .gd-system-service-icon {
        width: 39px;
        height: 39px;
    }
}
/* =========================================================
   WESTFIELD SYSTEM V4
========================================================= */
.wgd-system-v4 {
    position: relative;
    overflow: hidden;
    background:
        var(--gd-light);
}
/* =========================================================
   TEXTURE
========================================================= */
.wgd-v4-texture {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .7;
    background:
        repeating-linear-gradient(90deg,
            rgba(68, 122, 171, .035) 0,
            rgba(68, 122, 171, .035) 1px,
            transparent 1px,
            transparent 70px),
        repeating-linear-gradient(0deg,
            rgba(68, 122, 171, .028) 0,
            rgba(68, 122, 171, .028) 1px,
            transparent 1px,
            transparent 70px);
}
/* =========================================================
   GENERIC BAND
========================================================= */
.wgd-v4-band {
    position: relative;
    z-index: 2;
}
/* =========================================================
   TOP BAND
========================================================= */
.wgd-v4-band-top {
    min-height: 360px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding:
        85px 7vw 65px;
    background:
        var(--gd-cream);
}
.wgd-v4-band-top::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 28%;
    height: 6px;
    background:
        var(--gd-copper);
}
/* =========================================================
   KICKER
========================================================= */
.wgd-v4-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.wgd-v4-kicker span {
    color:
        var(--gd-copper);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.wgd-v4-kicker i {
    width: 60px;
    height: 1px;
    background:
        rgba(17, 24, 28, .24);
}
.wgd-v4-kicker small {
    color:
        var(--gd-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
/* =========================================================
   HEADING
========================================================= */
.wgd-v4-top-content h2 {
    margin: 0;
    color:
        var(--gd-dark);
    font-size:
        clamp(46px, 5.3vw, 84px);
    line-height: .88;
    font-weight: 900;
    letter-spacing: -5px;
    text-transform: uppercase;
}
.wgd-v4-top-content h2 strong {
    display: block;
    color:
        var(--gd-blue-dark);
    font-size:
        clamp(63px, 7vw, 110px);
    line-height: .82;
    letter-spacing: -7px;
}
.wgd-v4-top-content h2 span {
    display: block;
    margin-top: 10px;
    color:
        var(--gd-copper);
    font-size:
        clamp(19px, 2vw, 31px);
    letter-spacing: 4px;
}
/* =========================================================
   NUMBER
========================================================= */
.wgd-v4-top-number {
    color:
        rgba(17, 24, 28, .07);
    font-size:
        clamp(130px, 15vw, 250px);
    line-height: .65;
    font-weight: 900;
    letter-spacing: -15px;
}
/* =========================================================
   PHOTO BAND
========================================================= */
.wgd-v4-photo-band {
    position: relative;
    z-index: 3;
    height: 540px;
    margin:
        0 5vw;
    transform:
        translateY(0);
    overflow: visible;
}
/* =========================================================
   PHOTO
========================================================= */
.wgd-v4-photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        var(--gd-dark);
    clip-path:
        polygon(0 0,
            93% 0,
            100% 18%,
            100% 100%,
            7% 100%,
            0 82%);
    box-shadow:
        0 35px 90px rgba(17, 24, 28, .18);
}
.wgd-v4-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1.4s ease;
}
.wgd-system-v4:hover .wgd-v4-photo img {
    transform:
        scale(1.04);
}
.wgd-v4-photo-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(7, 11, 13, .16),
            rgba(7, 11, 13, .03) 55%,
            rgba(7, 11, 13, .40)),
        linear-gradient(180deg,
            transparent 45%,
            rgba(7, 11, 13, .62));
}
/* horizontal door lines */
.wgd-v4-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(transparent 24.9%,
            rgba(255, 255, 255, .10) 25%,
            transparent 25.1%,
            transparent 49.9%,
            rgba(255, 255, 255, .10) 50%,
            transparent 50.1%,
            transparent 74.9%,
            rgba(255, 255, 255, .10) 75%,
            transparent 75.1%);
}
/* =========================================================
   SYSTEM TAG
========================================================= */
.wgd-v4-system-tag {
    position: absolute;
    z-index: 6;
    left: 6%;
    bottom: -40px;
    min-width: 330px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding:
        20px 24px;
    background:
        var(--gd-dark);
    box-shadow:
        0 18px 45px rgba(17, 24, 28, .22);
}
.wgd-v4-system-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color:
        var(--gd-white);
    background:
        var(--gd-copper);
}
.wgd-v4-system-tag div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.wgd-v4-system-tag small {
    color:
        var(--gd-copper-light);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.wgd-v4-system-tag strong {
    color:
        var(--gd-white);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* =========================================================
   SIDE LABEL
========================================================= */
.wgd-v4-side-label {
    position: absolute;
    z-index: 6;
    right: -25px;
    top: 50%;
    display: flex;
    align-items: center;
    gap: 10px;
    transform:
        rotate(90deg) translateX(50%);
    transform-origin:
        right center;
}
.wgd-v4-side-label span,
.wgd-v4-side-label strong {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.wgd-v4-side-label span {
    color:
        var(--gd-copper);
}
.wgd-v4-side-label strong {
    color:
        var(--gd-dark);
}
.wgd-v4-side-label i {
    width: 50px;
    height: 1px;
    background:
        var(--gd-copper);
}
/* =========================================================
   BOTTOM CONTENT BAND
========================================================= */
.wgd-v4-band-bottom {
    padding:
        105px 7vw 85px;
    background:
        var(--gd-white);
}
.wgd-v4-copy-grid {
    display: grid;
    grid-template-columns:
        1fr 1fr;
    gap: 0;
    max-width: 1300px;
    margin: auto;
    border-top:
        1px solid rgba(17, 24, 28, .12);
    border-bottom:
        1px solid rgba(17, 24, 28, .12);
}
/* =========================================================
   COPY
========================================================= */
.wgd-v4-copy-main,
.wgd-v4-copy-detail {
    position: relative;
    padding:
        32px 40px 32px 55px;
}
.wgd-v4-copy-main {
    border-right:
        1px solid rgba(17, 24, 28, .12);
}
.wgd-v4-copy-no {
    position: absolute;
    left: 0;
    top: 32px;
    color:
        var(--gd-copper);
    font-size: 12px;
    font-weight: 900;
}
.wgd-v4-copy-main p,
.wgd-v4-copy-detail p {
    margin: 0;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.85;
}
/* =========================================================
   SERVICE TRACK
========================================================= */
.wgd-v4-track {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns:
        1.4fr repeat(5, 1fr);
    min-height: 120px;
    background:
        var(--gd-dark);
}
/* =========================================================
   TRACK LABEL
========================================================= */
.wgd-v4-track-label {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding:
        20px 30px;
    background:
        var(--gd-blue-dark);
}
.wgd-v4-track-label small {
    margin-bottom: 5px;
    color:
        rgba(255, 255, 255, .56);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.wgd-v4-track-label strong {
    color:
        var(--gd-white);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* =========================================================
   TRACK ITEM
========================================================= */
.wgd-v4-track-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    border-right:
        1px solid rgba(255, 255, 255, .11);
    overflow: hidden;
    transition:
        .35s ease;
}
.wgd-v4-track-item::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background:
        var(--gd-copper);
    transform:
        scaleX(0);
    transform-origin:
        left;
    transition:
        .35s ease;
}
.wgd-v4-track-item:hover::before {
    transform:
        scaleX(1);
}
.wgd-v4-track-item span {
    position: absolute;
    top: 10px;
    right: 12px;
    color:
        rgba(255, 255, 255, .18);
    font-size: 9px;
    font-weight: 900;
}
.wgd-v4-track-item i {
    color:
        var(--gd-copper-light);
    font-size: 18px;
    transition:
        .3s ease;
}
.wgd-v4-track-item strong {
    color:
        var(--gd-white);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.wgd-v4-track-item:hover i {
    transform:
        translateY(-4px);
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .wgd-v4-band-top {
        padding:
            75px 6vw 55px;
    }
    .wgd-v4-top-number {
        display: none;
    }
    .wgd-v4-photo-band {
        height: 480px;
        margin:
            0 25px;
    }
    .wgd-v4-side-label {
        display: none;
    }
    .wgd-v4-copy-grid {
        grid-template-columns: 1fr;
    }
    .wgd-v4-copy-main {
        border-right: 0;
        border-bottom:
            1px solid rgba(17, 24, 28, .12);
    }
    .wgd-v4-track {
        grid-template-columns:
            repeat(3, 1fr);
    }
    .wgd-v4-track-label {
        grid-column:
            span 3;
        min-height: 90px;
    }
    .wgd-v4-track-item {
        min-height: 105px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    .wgd-v4-band-top {
        min-height: auto;
        padding:
            60px 22px 45px;
    }
    .wgd-v4-kicker {
        flex-wrap: wrap;
    }
    .wgd-v4-kicker small {
        width: 100%;
    }
    .wgd-v4-top-content h2 {
        font-size: 39px;
        letter-spacing: -3px;
    }
    .wgd-v4-top-content h2 strong {
        font-size: 55px;
        letter-spacing: -4px;
    }
    .wgd-v4-top-content h2 span {
        font-size: 15px;
        letter-spacing: 1.6px;
    }
    .wgd-v4-photo-band {
        height: 440px;
        margin:
            0 12px;
    }
    .wgd-v4-photo {
        clip-path:
            polygon(0 0,
                94% 0,
                100% 8%,
                100% 100%,
                6% 100%,
                0 92%);
    }
    .wgd-v4-system-tag {
        left: 16px;
        right: 16px;
        bottom: -35px;
        min-width: 0;
    }
    .wgd-v4-band-bottom {
        padding:
            85px 22px 55px;
    }
    .wgd-v4-copy-main,
    .wgd-v4-copy-detail {
        padding:
            28px 0 28px 35px;
    }
    .wgd-v4-copy-main p,
    .wgd-v4-copy-detail p {
        font-size: 14px;
    }
    .wgd-v4-track {
        grid-template-columns:
            repeat(2, 1fr);
    }
    .wgd-v4-track-label {
        grid-column:
            span 2;
    }
    .wgd-v4-track-item {
        min-height: 95px;
    }
}
/* =========================================================
   BEFORE & AFTER V2
========================================================= */
.wgd-ba2 {
    position: relative;
    overflow: hidden;
    padding-top: 110px;
    background:
        var(--gd-cream);
}
/* =========================================================
   TECHNICAL BACKGROUND
========================================================= */
.wgd-ba2::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(68, 122, 171, .035) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(68, 122, 171, .035) 1px,
            transparent 1px);
    background-size:
        55px 55px;
}
.wgd-ba2::after {
    content: "";
    position: absolute;
    top: 0;
    left: 7%;
    width: 130px;
    height: 4px;
    background:
        var(--gd-copper);
}
/* huge background typography */
.wgd-ba2-bg-word {
    position: absolute;
    top: 35px;
    right: -20px;
    color:
        rgba(68, 122, 171, .035);
    font-size:
        clamp(130px, 17vw, 300px);
    line-height: .8;
    font-weight: 900;
    letter-spacing: -18px;
    pointer-events: none;
}
/* =========================================================
   HEADER
========================================================= */
.wgd-ba2-heading {
    position: relative;
    z-index: 3;
    margin-bottom: 55px;
}
.wgd-ba2-kicker {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}
.wgd-ba2-kicker>span {
    color:
        var(--gd-copper);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2.3px;
    text-transform: uppercase;
}
.wgd-ba2-kicker>i {
    display: block;
    width: 55px;
    height: 1px;
    background:
        rgba(17, 24, 28, .25);
}
.wgd-ba2-kicker>small {
    color:
        var(--gd-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
/* heading */
.wgd-ba2-heading h2 {
    max-width: 920px;
    margin: 0;
    color:
        var(--gd-dark);
    font-size:
        clamp(46px, 5vw, 76px);
    line-height: .88;
    font-weight: 900;
    letter-spacing: -5px;
    text-transform: uppercase;
}
.wgd-ba2-heading h2 strong {
    display: block;
    color:
        var(--gd-blue-dark);
    font-size:
        clamp(62px, 6.7vw, 104px);
    line-height: .83;
    letter-spacing: -7px;
}
.wgd-ba2-heading h2>span {
    display: block;
    margin-top: 12px;
    color:
        var(--gd-copper);
    font-size:
        clamp(18px, 2vw, 29px);
    line-height: 1;
    letter-spacing: 4px;
}
/* =========================================================
   HEADER NOTE
========================================================= */
.wgd-ba2-heading-note {
    display: grid;
    grid-template-columns:
        55px 1fr;
    gap: 20px;
    align-items: start;
    padding-top: 20px;
    border-top:
        1px solid rgba(17, 24, 28, .15);
}
.wgd-ba2-heading-note>span {
    color:
        var(--copper-light);
    font-size: 36px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -3px;
}
.wgd-ba2-heading-note p {
    margin: 0;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.75;
}
/* =========================================================
   VISUAL COMPARISON
========================================================= */
.wgd-ba2-visual {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns:
        34% 8% 58%;
    align-items: center;
    width: 100%;
    padding:
        0 4vw;
}
/* =========================================================
   BEFORE SIDE
========================================================= */
.wgd-ba2-before-side {
    position: relative;
    padding:
        35px 0 35px 3vw;
}
.wgd-ba2-before-caption {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 16px;
}
.wgd-ba2-before-caption>span {
    color:
        var(--gd-copper);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}
.wgd-ba2-before-caption strong {
    color:
        var(--gd-dark);
    font-size: 16px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.5px;
    text-align: right;
    text-transform: uppercase;
}
.wgd-ba2-before-caption strong em {
    display: block;
    margin-top: 4px;
    color:
        var(--gd-blue-dark);
    font-size: 12px;
    font-style: normal;
    letter-spacing: 2px;
}
/* =========================================================
   BEFORE PHOTO
========================================================= */
.wgd-ba2-before-photo {
    position: relative;
    height: 440px;
    overflow: hidden;
    background:
        var(--gd-dark);
    box-shadow:
        0 25px 55px rgba(17, 24, 28, .14);
}
.wgd-ba2-before-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter:
        saturate(.65) brightness(.83) contrast(.95);
    transition:
        transform 1s ease,
        filter .5s ease;
}
.wgd-ba2-before-photo:hover img {
    transform:
        scale(1.035);
    filter:
        saturate(.8) brightness(.9);
}
.wgd-ba2-before-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(7, 11, 13, .05),
            rgba(7, 11, 13, .07) 50%,
            rgba(7, 11, 13, .60));
}
/* sectional door lines */
.wgd-ba2-before-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(transparent 24.9%,
            rgba(255, 255, 255, .09) 25%,
            transparent 25.1%,
            transparent 49.9%,
            rgba(255, 255, 255, .09) 50%,
            transparent 50.1%,
            transparent 74.9%,
            rgba(255, 255, 255, .09) 75%,
            transparent 75.1%);
}
/* =========================================================
   TECH CORNERS
========================================================= */
.wgd-ba2-corner {
    position: absolute;
    z-index: 5;
    width: 38px;
    height: 38px;
}
.wgd-ba2-corner.corner-tl {
    top: 16px;
    left: 16px;
    border-top:
        2px solid var(--gd-copper);
    border-left:
        2px solid var(--gd-copper);
}
.wgd-ba2-corner.corner-br {
    right: 16px;
    bottom: 16px;
    border-right:
        2px solid var(--gd-copper);
    border-bottom:
        2px solid var(--gd-copper);
}
/* =========================================================
   CONDITION MARKER
========================================================= */
.wgd-ba2-condition {
    position: absolute;
    z-index: 6;
    left: 25px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding:
        13px 16px;
    background:
        rgba(7, 11, 13, .73);
    backdrop-filter:
        blur(8px);
}
.wgd-ba2-condition-dot {
    width: 9px;
    height: 9px;
    border:
        2px solid var(--gd-copper-light);
    border-radius: 50%;
    box-shadow:
        0 0 0 5px rgba(182, 124, 89, .12);
}
.wgd-ba2-condition div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.wgd-ba2-condition small {
    color:
        var(--gd-copper-light);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.wgd-ba2-condition strong {
    color:
        var(--gd-white);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* =========================================================
   BEFORE INSPECTION FOOTER
========================================================= */
.wgd-ba2-inspection {
    position: relative;
    display: grid;
    grid-template-columns:
        42px 1fr auto;
    gap: 13px;
    align-items: center;
    min-height: 75px;
    padding:
        12px 17px;
    background:
        var(--gd-dark);
}
.wgd-ba2-inspection>span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color:
        var(--gd-copper-light);
    border:
        1px solid rgba(255, 255, 255, .18);
}
.wgd-ba2-inspection div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.wgd-ba2-inspection small {
    color:
        rgba(255, 255, 255, .42);
    font-size: 8px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
.wgd-ba2-inspection strong {
    color:
        var(--gd-white);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.wgd-ba2-inspection>b {
    color:
        rgba(255, 255, 255, .12);
    font-size: 27px;
    font-weight: 900;
}
/* =========================================================
   TRANSFORMATION TRACK
========================================================= */
.wgd-ba2-transform {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.wgd-ba2-transform-line {
    width: 1px;
    height: 120px;
    background:
        linear-gradient(transparent,
            var(--gd-copper),
            transparent);
}
.wgd-ba2-transform-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.wgd-ba2-transform-center small,
.wgd-ba2-transform-center strong {
    writing-mode:
        vertical-rl;
    color:
        var(--gd-muted);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.wgd-ba2-transform-center span {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    color:
        var(--gd-white);
    background:
        var(--gd-copper);
    box-shadow:
        0 12px 30px rgba(17, 24, 28, .18);
}
.wgd-ba2-transform-center i {
    transition:
        transform .35s ease;
}
.wgd-ba2-visual:hover .wgd-ba2-transform-center i {
    transform:
        translateX(5px);
}
/* =========================================================
   AFTER SIDE
========================================================= */
.wgd-ba2-after-side {
    position: relative;
}
.wgd-ba2-after-photo {
    position: relative;
    height: 650px;
    overflow: hidden;
    background:
        var(--gd-dark);
    box-shadow:
        0 35px 80px rgba(17, 24, 28, .20);
}
/* blue top accent */
.wgd-ba2-after-photo::before {
    content: "";
    position: absolute;
    z-index: 6;
    top: 0;
    left: 0;
    width: 32%;
    height: 5px;
    background:
        var(--gd-blue);
}
.wgd-ba2-after-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1.2s ease;
}
.wgd-ba2-after-photo:hover img {
    transform:
        scale(1.035);
}
.wgd-ba2-after-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(7, 11, 13, .08),
            transparent 48%,
            rgba(7, 11, 13, .18)),
        linear-gradient(180deg,
            transparent 42%,
            rgba(7, 11, 13, .58));
}
/* sectional lines */
.wgd-ba2-after-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(transparent 24.9%,
            rgba(255, 255, 255, .10) 25%,
            transparent 25.1%,
            transparent 49.9%,
            rgba(255, 255, 255, .10) 50%,
            transparent 50.1%,
            transparent 74.9%,
            rgba(255, 255, 255, .10) 75%,
            transparent 75.1%);
}
/* =========================================================
   AFTER LABEL
========================================================= */
.wgd-ba2-after-label {
    position: absolute;
    z-index: 7;
    top: 30px;
    left: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding:
        14px 18px;
    border:
        1px solid rgba(255, 255, 255, .25);
    background:
        rgba(7, 11, 13, .62);
    backdrop-filter:
        blur(8px);
}
.wgd-ba2-after-label>span {
    color:
        var(--gd-copper-light);
    font-size: 14px;
    font-weight: 900;
}
.wgd-ba2-after-label div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.wgd-ba2-after-label small {
    color:
        var(--gd-copper-light);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.wgd-ba2-after-label strong {
    color:
        var(--gd-white);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* =========================================================
   BIG AFTER
========================================================= */
.wgd-ba2-after-word {
    position: absolute;
    z-index: 3;
    left: 28px;
    bottom: 22px;
    color:
        rgba(255, 255, 255, .12);
    font-size:
        clamp(80px, 10vw, 170px);
    line-height: .72;
    font-weight: 900;
    letter-spacing: -9px;
    pointer-events: none;
}
/* =========================================================
   RESULT LABEL
========================================================= */
.wgd-ba2-result {
    position: absolute;
    z-index: 7;
    right: 30px;
    bottom: 30px;
    width: 200px;
    padding:
        20px 20px 20px 23px;
    border-left:
        1px solid rgba(255, 255, 255, .35);
    background:
        rgba(7, 11, 13, .66);
    backdrop-filter:
        blur(9px);
}
.wgd-ba2-result>span {
    display: block;
    width: 35px;
    height: 3px;
    margin-bottom: 14px;
    background:
        var(--gd-copper);
}
.wgd-ba2-result small {
    display: block;
    margin-bottom: 7px;
    color:
        var(--gd-copper-light);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}
.wgd-ba2-result strong {
    color:
        var(--gd-white);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
}
/* =========================================================
   BOTTOM TRACK
========================================================= */
.wgd-ba2-bottom {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns:
        1.3fr 1fr 70px 1fr 70px 1fr;
    align-items: stretch;
    margin-top: 55px;
    background:
        var(--gd-dark);
}
/* intro */
.wgd-ba2-bottom-intro {
    min-height: 120px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding:
        22px 4vw;
    background:
        var(--gd-blue-dark);
}
.wgd-ba2-bottom-intro span {
    margin-bottom: 6px;
    color:
        rgba(255, 255, 255, .58);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.wgd-ba2-bottom-intro strong {
    color:
        var(--gd-white);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* =========================================================
   BOTTOM ITEM
========================================================= */
.wgd-ba2-bottom-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding:
        20px 15px;
}
.wgd-ba2-bottom-item>span {
    position: absolute;
    top: 10px;
    right: 12px;
    color:
        rgba(255, 255, 255, .17);
    font-size: 9px;
    font-weight: 900;
}
.wgd-ba2-bottom-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color:
        var(--gd-copper-light);
    border:
        1px solid rgba(255, 255, 255, .18);
    transition:
        .3s ease;
}
.wgd-ba2-bottom-item:hover .wgd-ba2-bottom-icon {
    color:
        var(--gd-white);
    border-color:
        var(--gd-copper);
    background:
        var(--gd-copper);
    transform:
        translateY(-3px);
}
.wgd-ba2-bottom-item>div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wgd-ba2-bottom-item small {
    color:
        rgba(255, 255, 255, .40);
    font-size: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.wgd-ba2-bottom-item strong {
    color:
        var(--gd-white);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* connectors */
.wgd-ba2-bottom-connector {
    display: flex;
    align-items: center;
}
.wgd-ba2-bottom-connector span {
    position: relative;
    width: 100%;
    height: 1px;
    background:
        rgba(255, 255, 255, .16);
}
.wgd-ba2-bottom-connector span::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background:
        var(--gd-copper);
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .wgd-ba2 {
        padding-top: 80px;
    }
    .wgd-ba2-visual {
        grid-template-columns:
            43% 8% 49%;
        padding:
            0 20px;
    }
    .wgd-ba2-before-side {
        padding-left: 0;
    }
    .wgd-ba2-before-photo {
        height: 400px;
    }
    .wgd-ba2-after-photo {
        height: 560px;
    }
    .wgd-ba2-bottom {
        grid-template-columns:
            repeat(3, 1fr);
    }
    .wgd-ba2-bottom-intro {
        grid-column:
            1 / -1;
        min-height: 90px;
    }
    .wgd-ba2-bottom-connector {
        display: none;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    .wgd-ba2 {
        padding-top: 60px;
    }
    .wgd-ba2-heading {
        margin-bottom: 35px;
    }
    .wgd-ba2-kicker {
        flex-wrap: wrap;
    }
    .wgd-ba2-kicker small {
        width: 100%;
    }
    .wgd-ba2-heading h2 {
        font-size: 37px;
        letter-spacing: -3px;
    }
    .wgd-ba2-heading h2 strong {
        font-size: 52px;
        letter-spacing: -4px;
    }
    .wgd-ba2-heading h2>span {
        font-size: 15px;
        letter-spacing: 1.5px;
    }
    /* stack photos */
    .wgd-ba2-visual {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding:
            0 15px;
    }
    .wgd-ba2-before-side,
    .wgd-ba2-after-side {
        width: 100%;
    }
    .wgd-ba2-before-photo {
        height: 380px;
    }
    .wgd-ba2-after-photo {
        height: 480px;
    }
    /* transition becomes horizontal */
    .wgd-ba2-transform {
        width: 100%;
        height: 90px;
        flex-direction: row;
    }
    .wgd-ba2-transform-line {
        width: 100%;
        height: 1px;
        background:
            linear-gradient(90deg,
                transparent,
                var(--gd-copper),
                transparent);
    }
    .wgd-ba2-transform-center {
        flex-direction: row;
    }
    .wgd-ba2-transform-center small,
    .wgd-ba2-transform-center strong {
        display: none;
    }
    .wgd-ba2-transform-center span {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
        transform:
            rotate(90deg);
    }
    .wgd-ba2-after-label {
        top: 18px;
        left: 18px;
    }
    .wgd-ba2-result {
        right: 18px;
        bottom: 18px;
        width: 175px;
    }
    .wgd-ba2-after-word {
        left: 15px;
        font-size: 75px;
        letter-spacing: -5px;
    }
    .wgd-ba2-bottom {
        grid-template-columns:
            1fr;
        margin-top: 35px;
    }
    .wgd-ba2-bottom-intro {
        grid-column: auto;
    }
    .wgd-ba2-bottom-item {
        min-height: 90px;
        justify-content: flex-start;
        padding:
            18px 25px;
        border-bottom:
            1px solid rgba(255, 255, 255, .10);
    }
}
/* =========================================================
   COMPLETE SYSTEM - EDITORIAL MECHANICAL
========================================================= */
.wgd-mech {
    position: relative;
    overflow: hidden;
    padding-top: 110px;
    background:
        var(--gd-cream);
}
/* subtle technical grid */
.wgd-mech::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .65;
    background:
        linear-gradient(
            rgba(68,122,171,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(68,122,171,.025) 1px,
            transparent 1px
        );
    background-size:
        58px 58px;
}
/* copper top detail */
.wgd-mech::after {
    content: "";
    position: absolute;
    top: 0;
    left: 7%;
    width: 110px;
    height: 4px;
    background:
        var(--gd-copper);
}
/* =========================================================
   BACKGROUND NUMBER
========================================================= */
.wgd-mech-bg-number {
    position: absolute;
    top: 30px;
    right: 3%;
    color:
        rgba(68,122,171,.035);
    font-size:
        clamp(170px,20vw,350px);
    line-height: .7;
    font-weight: 900;
    letter-spacing: -25px;
    pointer-events: none;
}
/* =========================================================
   HEADER
========================================================= */
.wgd-mech-head {
    position: relative;
    z-index: 3;
    margin-bottom: 55px;
}
/* kicker */
.wgd-mech-kicker {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
}
.wgd-mech-kicker span {
    color:
        var(--gd-copper);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}
.wgd-mech-kicker i {
    width: 60px;
    height: 1px;
    background:
        rgba(17,24,28,.20);
}
.wgd-mech-kicker small {
    color:
        var(--gd-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}
/* =========================================================
   TITLE
========================================================= */
.wgd-mech-head h2 {
    margin: 0;
    color:
        var(--gd-dark);
    font-size:
        clamp(50px,5.4vw,82px);
    line-height: .86;
    font-weight: 900;
    letter-spacing: -5px;
    text-transform: uppercase;
}
.wgd-mech-head h2 > span {
    color:
        var(--gd-blue-dark);
}
.wgd-mech-head h2 strong {
    display: block;
    margin-top: 9px;
    color:
        var(--gd-copper);
    font-size:
        clamp(33px,3.8vw,57px);
    line-height: 1;
    letter-spacing: -2px;
}
/* =========================================================
   HEADER NOTE
========================================================= */
.wgd-mech-head-note {
    display: grid;
    grid-template-columns:
        55px 1fr;
    gap: 20px;
    padding-top: 20px;
    border-top:
        1px solid rgba(17,24,28,.13);
}
.wgd-mech-head-no {
    color:
        var(--gd-blue);
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -3px;
}
.wgd-mech-head-note p {
    margin: 0;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.8;
}
/* =========================================================
   MAIN PHOTO
========================================================= */
.wgd-mech-photo {
    position: relative;
    z-index: 3;
    height: 610px;
    overflow: hidden;
    background:
        var(--gd-dark);
    box-shadow:
        0 35px 80px rgba(17,24,28,.14);
}
/* asymmetrical copper corner */
.wgd-mech-photo::before {
    content: "";
    position: absolute;
    z-index: 8;
    top: 0;
    left: 0;
    width: 170px;
    height: 5px;
    background:
        var(--gd-copper);
}
.wgd-mech-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1.3s ease;
}
.wgd-mech-photo:hover img {
    transform:
        scale(1.025);
}
/* =========================================================
   PHOTO SHADE
========================================================= */
.wgd-mech-photo-shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(
            90deg,
            rgba(7,11,13,.52),
            rgba(7,11,13,.10) 37%,
            transparent 65%
        ),
        linear-gradient(
            180deg,
            rgba(7,11,13,.05),
            transparent 55%,
            rgba(7,11,13,.40)
        );
}
/* =========================================================
   GARAGE DOOR PANEL LINES
========================================================= */
.wgd-mech-door-lines {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.wgd-mech-door-lines span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background:
        rgba(255,255,255,.08);
}
.wgd-mech-door-lines span:nth-child(1) {
    top: 25%;
}
.wgd-mech-door-lines span:nth-child(2) {
    top: 50%;
}
.wgd-mech-door-lines span:nth-child(3) {
    top: 75%;
}
/* =========================================================
   PHOTO CODE
========================================================= */
.wgd-mech-photo-code {
    position: absolute;
    z-index: 7;
    top: 25px;
    left: 28px;
    color:
        rgba(255,255,255,.58);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.wgd-mech-photo-code strong {
    margin-left: 12px;
    color:
        var(--gd-copper-light);
}
/* =========================================================
   PHOTO CARD
========================================================= */
.wgd-mech-photo-card {
    position: absolute;
    z-index: 7;
    left: 30px;
    bottom: 30px;
    width: 330px;
    display: grid;
    grid-template-columns:
        58px 1fr;
    gap: 18px;
    align-items: center;
    padding:
        20px;
    background:
        rgba(7,11,13,.76);
    border-left:
        3px solid var(--gd-copper);
    backdrop-filter:
        blur(9px);
}
.wgd-mech-photo-icon {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    color:
        var(--gd-blue-light);
    border:
        1px solid rgba(168,201,232,.32);
    font-size: 19px;
}
.wgd-mech-photo-card div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.wgd-mech-photo-card small {
    color:
        var(--gd-copper-light);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.wgd-mech-photo-card strong {
    color:
        var(--gd-white);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
}
/* =========================================================
   PHOTO MARKERS
========================================================= */
.wgd-mech-marker {
    position: absolute;
    z-index: 8;
    display: flex;
    align-items: center;
}
.wgd-mech-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border:
        2px solid var(--gd-copper-light);
    border-radius: 50%;
    background:
        var(--gd-dark);
}
.wgd-mech-marker > i {
    width: 55px;
    height: 1px;
    background:
        var(--gd-copper);
}
.wgd-mech-marker > div {
    padding:
        9px 12px;
    background:
        rgba(7,11,13,.68);
    backdrop-filter:
        blur(7px);
}
.wgd-mech-marker small {
    display: block;
    margin-bottom: 3px;
    color:
        var(--gd-blue-light);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.wgd-mech-marker strong {
    color:
        var(--gd-white);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
}
/* marker positions */
.marker-one {
    top: 12%;
    right: 8%;
}
.marker-two {
 top: 52%;
  left: 27%;
}
.marker-three {
  right: 53%;
  bottom: 81%;
}
/* =========================================================
   COPY UNDER IMAGE
========================================================= */
.wgd-mech-copy {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        170px .7fr 1.3fr;
    background:
        var(--gd-white);
    border:
        1px solid rgba(17,24,28,.10);
    border-top: 0;
}
/* index */
.wgd-mech-copy-index {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
        28px;
    background:
        var(--gd-dark);
}
.wgd-mech-copy-index > span {
    color:
        var(--gd-blue-light);
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
}
.wgd-mech-copy-index > i {
    width: 35px;
    height: 2px;
    margin:
        12px 0;
    background:
        var(--gd-copper);
}
.wgd-mech-copy-index small {
    color:
        rgba(255,255,255,.58);
    font-size: 9px;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
/* copy blocks */
.wgd-mech-copy-text,
.wgd-mech-copy-main {
    display: flex;
    align-items: center;
    padding:
        30px 35px;
}
.wgd-mech-copy-text {
    border-right:
        1px solid rgba(17,24,28,.10);
}
.wgd-mech-copy p {
    margin: 0;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.8;
}
/* =========================================================
   PARTS RAIL
========================================================= */
.wgd-mech-parts {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns:
        1.5fr repeat(8,1fr);
    max-width: 1500px;
    margin:
        65px auto 0;
    background:
        var(--gd-light);
    border-top:
        1px solid rgba(17,24,28,.10);
    border-bottom:
        1px solid rgba(17,24,28,.10);
}
/* =========================================================
   PARTS TITLE
========================================================= */
.wgd-mech-parts-title {
    min-height: 125px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding:
        20px 30px;
    background:
        var(--gd-dark);
}
.wgd-mech-parts-title span {
    margin-bottom: 7px;
    color:
        var(--gd-copper-light);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}
.wgd-mech-parts-title strong {
    color:
        var(--gd-white);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 900;
    text-transform: uppercase;
}
/* =========================================================
   PART
========================================================= */
.wgd-mech-part {
    position: relative;
    min-height: 125px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    border-right:
        1px solid rgba(17,24,28,.08);
    transition:
        .3s ease;
}
.wgd-mech-part > span {
    position: absolute;
    top: 9px;
    right: 10px;
    color:
        var(--gd-blue-dark);
    opacity: .45;
    font-size: 9px;
    font-weight: 900;
}
.wgd-mech-part i {
    color:
        var(--gd-copper);
    font-size: 20px;
    transition:
        .3s ease;
}
.wgd-mech-part strong {
    color:
        var(--gd-dark);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.wgd-mech-part:hover {
    background:
        var(--gd-white);
}
.wgd-mech-part:hover i {
    color:
        var(--gd-blue-dark);
    transform:
        translateY(-4px);
}
/* =========================================================
   SIGNATURE
========================================================= */
.wgd-mech-signature {
    position: relative;
    z-index: 5;
    min-height: 115px;
    display: grid;
    grid-template-columns:
        1fr 180px 1fr;
    align-items: center;
    margin-top: 55px;
    background:
        var(--gd-dark);
    border-top:
        1px solid rgba(255,255,255,.10);
}
/* =========================================================
   SIGNATURE TEXT
========================================================= */
.wgd-mech-sign-left,
.wgd-mech-sign-right {
    display: flex;
    align-items: center;
    gap: 25px;
}
.wgd-mech-sign-left {
    justify-content: flex-end;
    padding-right: 65px;
}
.wgd-mech-sign-right {
    padding-left: 65px;
}
.wgd-mech-sign-left > span,
.wgd-mech-sign-right > span {
    width: 80px;
    height: 1px;
    background:
        rgba(168,201,232,.35);
}
.wgd-mech-signature p {
    margin: 0;
    color:
        rgba(255,255,255,.48);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.wgd-mech-signature p strong {
    display: block;
    color:
        var(--gd-white);
}
/* =========================================================
   W BADGE
========================================================= */
.wgd-mech-w {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 180px;
    height: 145px;
    transform:
        translateX(-50%);
    display: grid;
    place-items: center;
    background:
        var(--gd-copper);
    clip-path:
        polygon(
            17% 0,
            83% 0,
            100% 27%,
            88% 100%,
            12% 100%,
            0 27%
        );
}
.wgd-mech-w-inner {
    width:
        calc(100% - 5px);
    height:
        calc(100% - 5px);
    display: grid;
    place-items: center;
    background:
        var(--gd-dark);
    clip-path:
        polygon(
            17% 0,
            83% 0,
            100% 27%,
            88% 100%,
            12% 100%,
            0 27%
        );
}
.wgd-mech-w-inner span {
    position: relative;
    color:
        var(--gd-white);
    font-family:
        Georgia,
        serif;
    font-size: 72px;
    line-height: 1;
    font-weight: 900;
    font-style: italic;
}
.wgd-mech-w-inner span::after {
    content: "W";
    position: absolute;
    left: 8px;
    top: 4px;
    color:
        var(--gd-blue-light);
    opacity: .55;
    z-index: -1;
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .wgd-mech {
        padding-top: 80px;
    }
    .wgd-mech-photo {
        height: 540px;
    }
    .wgd-mech-copy {
        grid-template-columns:
            130px 1fr;
    }
    .wgd-mech-copy-main {
        grid-column:
            1 / -1;
        border-top:
            1px solid rgba(17,24,28,.10);
    }
    .wgd-mech-parts {
        grid-template-columns:
            repeat(4,1fr);
    }
    .wgd-mech-parts-title {
        grid-column:
            1 / -1;
        min-height: 90px;
    }
    .wgd-mech-sign-left > span,
    .wgd-mech-sign-right > span {
        display: none;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    .wgd-mech {
        padding-top: 55px;
    }
    .wgd-mech-kicker {
        flex-wrap: wrap;
    }
    .wgd-mech-kicker small {
        width: 100%;
    }
    .wgd-mech-head h2 {
        font-size: 39px;
        letter-spacing: -3px;
    }
    .wgd-mech-head h2 strong {
        font-size: 28px;
        letter-spacing: -1px;
    }
    .wgd-mech-photo {
        height: 480px;
    }
    .wgd-mech-photo-card {
        left: 15px;
        right: 15px;
        bottom: 15px;
        width: auto;
    }
    .wgd-mech-marker {
        transform:
            scale(.85);
        transform-origin: right;
    }
    .marker-one {
        top: 16%;
        right: 4%;
    }
    .marker-two {
        top: 40%;
        left: auto;
        right: 4%;
    }
    .marker-three {
        right: 4%;
        bottom: 30%;
    }
    .wgd-mech-copy {
        display: block;
    }
    .wgd-mech-copy-index {
        min-height: 100px;
    }
    .wgd-mech-copy-text,
    .wgd-mech-copy-main {
        padding:
            25px 22px;
    }
    .wgd-mech-copy-text {
        border-right: 0;
        border-bottom:
            1px solid rgba(17,24,28,.10);
    }
    .wgd-mech-parts {
        grid-template-columns:
            repeat(2,1fr);
        margin-top: 40px;
    }
    .wgd-mech-part {
        min-height: 100px;
    }
    .wgd-mech-signature {
        min-height: 170px;
        grid-template-columns:
            1fr 130px 1fr;
    }
    .wgd-mech-sign-left {
        padding:
            20px 18px 20px 10px;
        text-align: left;
    }
    .wgd-mech-sign-right {
        padding:
            20px 10px 20px 18px;
    }
    .wgd-mech-w {
        width: 130px;
        height: 125px;
    }
    .wgd-mech-w-inner span {
        font-size: 55px;
    }
}
/* =========================================================
   OFFER SECTION - SERVICE TICKET STYLE
========================================================= */
.wgd-ticket-offers {
    position: relative;
    overflow: hidden;
    padding:
        110px 0 95px;
    background:
        var(--gd-cream);
}
/* subtle blueprint */
.wgd-ticket-offers::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            rgba(68,122,171,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(68,122,171,.025) 1px,
            transparent 1px
        );
    background-size:
        58px 58px;
}
/* copper top line */
.wgd-ticket-offers::after {
    content: "";
    position: absolute;
    top: 0;
    left: 6%;
    width: 120px;
    height: 4px;
    background:
        var(--gd-copper);
}
/* =========================================================
   BACKGROUND WORD
========================================================= */
.wgd-ticket-bg {
    position: absolute;
    top: 30px;
    right: -15px;
    color:
        rgba(68,122,171,.035);
    font-size:
        clamp(130px,17vw,280px);
    line-height: .75;
    font-weight: 900;
    letter-spacing: -15px;
    pointer-events: none;
}
/* =========================================================
   HEADER
========================================================= */
.wgd-ticket-head {
    position: relative;
    z-index: 3;
    margin-bottom: 55px;
}
/* kicker */
.wgd-ticket-kicker {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}
.wgd-ticket-kicker span {
    color:
        var(--gd-copper);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}
.wgd-ticket-kicker i {
    width: 55px;
    height: 1px;
    background:
        rgba(17,24,28,.22);
}
.wgd-ticket-kicker small {
    color:
        var(--gd-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
/* heading */
.wgd-ticket-head h2 {
    margin: 0;
    color:
        var(--gd-dark);
    font-size:
        clamp(52px,6vw,90px);
    line-height: .84;
    font-weight: 900;
    letter-spacing: -6px;
    text-transform: uppercase;
}
.wgd-ticket-head h2 strong {
    display: block;
    margin-top: 10px;
    color:
        var(--gd-copper);
    font-size:
        clamp(31px,3.6vw,53px);
    line-height: 1;
    letter-spacing: -2px;
}
/* =========================================================
   HEADER NOTE
========================================================= */
.wgd-ticket-head-note {
    display: grid;
    grid-template-columns:
        55px 1fr;
    gap: 20px;
    padding-top: 20px;
    border-top:
        1px solid rgba(17,24,28,.13);
}
.wgd-ticket-head-note > span {
    color:
        var(--gd-blue-dark);
    font-size: 32px;
    line-height: 1;
    font-weight: 900;
}
.wgd-ticket-head-note p {
    margin: 0;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.75;
}
/* =========================================================
   MAIN BOARD
========================================================= */
.wgd-ticket-board {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns:
        95px repeat(4,1fr);
    min-height: 410px;
    background:
        var(--gd-white);
    border:
        1px solid rgba(17,24,28,.12);
    box-shadow:
        0 35px 75px rgba(17,24,28,.10);
}
/* =========================================================
   LEFT SPINE
========================================================= */
.wgd-ticket-spine {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding:
        20px 10px;
    color:
        var(--gd-white);
    background:
        var(--gd-dark);
}
.wgd-ticket-spine > span {
    color:
        var(--gd-copper-light);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    writing-mode:
        vertical-rl;
}
.wgd-ticket-spine > i {
    width: 1px;
    height: 65px;
    background:
        var(--gd-copper);
}
.wgd-ticket-spine strong {
    color:
        var(--gd-white);
    font-size: 10px;
    line-height: 1.5;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    writing-mode:
        vertical-rl;
}
.wgd-ticket-spine small {
    color:
        rgba(255,255,255,.35);
    font-size: 8px;
    letter-spacing: 1.4px;
    writing-mode:
        vertical-rl;
}
/* =========================================================
   OFFER ITEM
========================================================= */
.wgd-ticket-item {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding:
        45px 30px;
    border-right:
        1px dashed rgba(17,24,28,.17);
    transition:
        transform .35s ease,
        background .35s ease;
}
/* ticket circles */
.wgd-ticket-item::before,
.wgd-ticket-item::after {
    content: "";
    position: absolute;
    right: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background:
        var(--gd-cream);
    z-index: 5;
}
.wgd-ticket-item::before {
    top: -10px;
}
.wgd-ticket-item::after {
    bottom: -10px;
}
/* hover line */
.wgd-ticket-item > .wgd-ticket-no::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background:
        var(--gd-copper);
    transition:
        width .35s ease;
}
.wgd-ticket-item:hover {
    background:
        var(--gd-light);
}
.wgd-ticket-item:hover
.wgd-ticket-no::after {
    width: 100%;
}
/* =========================================================
   OFFER NUMBER
========================================================= */
.wgd-ticket-no {
    position: absolute;
    top: 18px;
    left: 20px;
    color:
        var(--gd-blue-dark);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}
/* =========================================================
   VALUE
========================================================= */
.wgd-ticket-value {
    display: flex;
    align-items: flex-start;
    color:
        var(--gd-dark);
    font-size:
        clamp(56px,5vw,78px);
    line-height: .8;
    font-weight: 900;
    letter-spacing: -6px;
}
.wgd-ticket-value sup {
    margin:
        4px 4px 0 0;
    color:
        var(--gd-copper);
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
}
.wgd-ticket-value small {
    align-self: flex-end;
    margin:
        0 0 3px 9px;
    color:
        var(--gd-blue-dark);
    font-size: 10px;
    letter-spacing: 2px;
}
/* =========================================================
   COPY
========================================================= */
.wgd-ticket-copy {
    margin-top: 27px;
}
.wgd-ticket-copy > span {
    display: block;
    margin-bottom: 8px;
    color:
        var(--gd-copper);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}
.wgd-ticket-copy h3 {
    margin:
        0 0 13px;
    color:
        var(--gd-dark);
    font-size: 18px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -.6px;
    text-transform: uppercase;
}
.wgd-ticket-copy h3 strong {
    display: block;
    margin-top: 4px;
    color:
        #447aab;
}
.wgd-ticket-copy p {
    max-width: 210px;
    margin: 0;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.65;
}
/* =========================================================
   ICON
========================================================= */
.wgd-ticket-icon {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    color:
        var(--gd-copper);
    border:
        1px solid rgba(17,24,28,.12);
    font-size: 16px;
    transition:
        .3s ease;
}
.wgd-ticket-item:hover
.wgd-ticket-icon {
    color:
        var(--gd-white);
    border-color:
        var(--gd-dark);
    background:
        var(--gd-dark);
    transform:
        translateY(-4px);
}
/* =========================================================
   CENTER W SEAL
========================================================= */
.wgd-ticket-seal {
    position: absolute;
    z-index: 10;
    left: calc(50px + 50%);
    top: 112%;
    transform:
        translate(-50%,-50%);
    width: 92px;
    height: 92px;
    padding: 5px;
    border-radius: 50%;
    background:
        var(--gd-copper);
    box-shadow:
        0 15px 35px rgba(17,24,28,.18);
}
.wgd-ticket-seal-ring {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border:
        1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    background:
        var(--gd-dark);
}
.wgd-ticket-seal small {
    color:
        var(--gd-copper-light);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.wgd-ticket-seal strong {
    margin:
        -2px 0;
    color:
        var(--gd-white);
    font-family:
        Georgia,
        serif;
    font-size: 37px;
    line-height: 1;
    font-style: italic;
}
.wgd-ticket-seal span {
    color:
        var(--gd-blue-light);
    font-size: 6px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* =========================================================
   BOTTOM BAR
========================================================= */
.wgd-ticket-bottom {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        auto 1fr auto;
    gap: 35px;
    align-items: center;
    min-height: 95px;
    padding:
        18px 30px;
    background:
        var(--gd-dark);
}
/* bottom code */
.wgd-ticket-bottom-code {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.wgd-ticket-bottom-code span {
    color:
        var(--gd-copper-light);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
}
.wgd-ticket-bottom-code strong {
    color:
        var(--gd-white);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
/* line */
.wgd-ticket-bottom-line {
    display: flex;
    align-items: center;
}
.wgd-ticket-bottom-line span {
    flex: 1;
    height: 1px;
    background:
        rgba(255,255,255,.14);
}
.wgd-ticket-bottom-line i {
    width: 7px;
    height: 7px;
    margin:
        0 8px;
    border-radius: 50%;
    background:
        var(--gd-copper);
}
/* =========================================================
   BUTTON
========================================================= */
.wgd-ticket-btn {
    min-height: 47px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding:
        0 22px;
    color:
        var(--gd-dark);
    background:
        var(--gd-copper-light);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        .3s ease;
}
.wgd-ticket-btn i {
    transition:
        transform .3s ease;
}
.wgd-ticket-btn:hover {
    color:
        var(--gd-white);
    background:
        var(--gd-blue-dark);
}
.wgd-ticket-btn:hover i {
    transform:
        translateX(5px);
}
/* =========================================================
   TERMS
========================================================= */
.wgd-ticket-terms {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding:
        18px 20px 0;
    color:
        var(--gd-muted);
    font-size: 9px;
    line-height: 1.6;
    text-align: center;
}
.wgd-ticket-terms span {
    color:
        var(--gd-copper);
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 1199.98px) {
    .wgd-ticket-board {
        grid-template-columns:
            80px repeat(2,1fr);
    }
    .wgd-ticket-spine {
        grid-row:
            1 / 3;
    }
    .wgd-ticket-item {
        min-height: 350px;
        border-bottom:
            1px dashed rgba(17,24,28,.17);
    }
    .wgd-ticket-seal {
        display: none;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .wgd-ticket-offers {
        padding:
            65px 0 60px;
    }
    .wgd-ticket-head {
        margin-bottom: 35px;
    }
    .wgd-ticket-kicker {
        flex-wrap: wrap;
    }
    .wgd-ticket-kicker small {
        width: 100%;
    }
    .wgd-ticket-head h2 {
        font-size: 43px;
        letter-spacing: -3px;
    }
    .wgd-ticket-head h2 strong {
        font-size: 25px;
        letter-spacing: -1px;
    }
    .wgd-ticket-board {
        display: block;
    }
    .wgd-ticket-spine {
        min-height: 75px;
        flex-direction: row;
        gap: 14px;
    }
    .wgd-ticket-spine > span,
    .wgd-ticket-spine strong,
    .wgd-ticket-spine small {
        writing-mode:
            initial;
    }
    .wgd-ticket-spine > i {
        width: 45px;
        height: 1px;
    }
    .wgd-ticket-item {
        min-height: 300px;
        padding:
            45px 25px;
        border-right: 0;
        border-bottom:
            1px dashed rgba(17,24,28,.18);
    }
    .wgd-ticket-item::before,
    .wgd-ticket-item::after {
        display: none;
    }
    .wgd-ticket-value {
        font-size: 68px;
    }
    .wgd-ticket-bottom {
        grid-template-columns:
            1fr;
        gap: 20px;
        padding:
            25px;
    }
    .wgd-ticket-bottom-line {
        display: none;
    }
    .wgd-ticket-btn {
        width: 100%;
    }
}
/* =========================================================
   WARNING SIGNS V2
========================================================= */
.wgd-behavior-v2 {
    position: relative;
    overflow: hidden;
    padding-top: 110px;
    background:
        var(--gd-cream);
}
/* subtle grid */
.wgd-behavior-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            rgba(68,122,171,.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(68,122,171,.03) 1px,
            transparent 1px
        );
    background-size:
        60px 60px;
}
/* =========================================================
   HEADER
========================================================= */
.wgd-v2-head {
    position: relative;
    z-index: 4;
    margin-bottom: 55px;
}
.wgd-v2-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color:
        var(--gd-muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.wgd-v2-kicker span {
    color:
        var(--gd-blue-dark);
}
.wgd-v2-kicker i {
    width: 55px;
    height: 1px;
    background:
        var(--gd-copper);
}
/* heading */
.wgd-v2-head h2 {
    margin: 0;
    max-width: 900px;
    color:
        var(--gd-dark);
    font-size:
        clamp(48px,5.3vw,82px);
    line-height: .86;
    font-weight: 900;
    letter-spacing: -5px;
    text-transform: uppercase;
}
.wgd-v2-head h2 strong {
    display: block;
    margin-top: 8px;
    color:
        var(--gd-copper);
    font-size: .68em;
    letter-spacing: -2px;
}
.wgd-v2-head h2 em {
    color:
        var(--gd-blue-dark);
    font-style: normal;
}
/* =========================================================
   HEADER SIDE
========================================================= */
.wgd-v2-head-side {
    padding:
        20px 0 0 24px;
    border-left:
        2px solid var(--gd-blue);
}
.wgd-v2-head-side > span {
    display: block;
    margin-bottom: 10px;
    color:
        var(--gd-blue-dark);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.7px;
}
.wgd-v2-head-side p {
    margin: 0;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.75;
}
/* =========================================================
   FULL WIDTH STAGE
========================================================= */
.wgd-v2-stage {
    position: relative;
    z-index: 4;
    width: 100%;
    min-height: 760px;
    overflow: hidden;
    background:
        var(--gd-dark);
}
/* =========================================================
   PHOTO
========================================================= */
.wgd-v2-photo {
    position: absolute;
    inset: 0;
}
.wgd-v2-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1.4s ease;
}
.wgd-v2-stage:hover
.wgd-v2-photo img {
    transform:
        scale(1.025);
}
/* overlay */
.wgd-v2-photo-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(7,11,13,.65) 0%,
            rgba(7,11,13,.28) 36%,
            rgba(7,11,13,.06) 65%
        ),
        linear-gradient(
            180deg,
            rgba(7,11,13,.07),
            transparent 45%,
            rgba(7,11,13,.72)
        );
}
/* =========================================================
   FLOATING PANEL
========================================================= */
.wgd-v2-content-panel {
    position: absolute;
    z-index: 7;
    top: 70px;
    left: 6vw;
    width: min(480px,38vw);
    padding:
        42px 40px;
    background:
        rgba(244,241,235,.94);
    border-top:
        4px solid var(--gd-copper);
    box-shadow:
        0 30px 70px rgba(0,0,0,.22);
    backdrop-filter:
        blur(12px);
}
/* subtle blue edge */
.wgd-v2-content-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 90px;
    background:
        var(--gd-blue);
}
/* number */
.wgd-v2-panel-number {
    margin-bottom: 20px;
    color:
        var(--gd-blue-dark);
    font-size: 32px;
    line-height: 1;
    font-weight: 900;
}
.wgd-v2-panel-kicker {
    margin-bottom: 18px;
    color:
        var(--gd-copper);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.wgd-v2-content-panel p {
    margin: 0;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.85;
}
.wgd-v2-panel-line {
    display: block;
    width: 50px;
    height: 2px;
    margin:
        25px 0;
    background:
        var(--gd-blue-dark);
}
.wgd-v2-panel-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
}
.wgd-v2-panel-bottom span {
    width: 35px;
    height: 1px;
    background:
        var(--gd-copper);
}
.wgd-v2-panel-bottom small {
    color:
        var(--gd-dark);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
/* =========================================================
   LARGE PHOTO TITLE
========================================================= */
.wgd-v2-photo-title {
    position: absolute;
    z-index: 6;
    right: 5vw;
    top: 90px;
    max-width: 460px;
    text-align: right;
}
.wgd-v2-photo-title small {
    display: block;
    margin-bottom: 10px;
    color:
        var(--gd-blue-light);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.wgd-v2-photo-title strong {
    color:
        var(--gd-white);
    font-size:
        clamp(27px,3vw,47px);
    line-height: .98;
    font-weight: 900;
    text-transform: uppercase;
}
.wgd-v2-photo-title strong span {
    display: block;
    color:
        var(--gd-copper-light);
}
/* =========================================================
   WARNING RAIL
========================================================= */
.wgd-v2-warning-rail {
    position: absolute;
    z-index: 8;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns:
        repeat(4,1fr);
    min-height: 150px;
    background:
        rgba(7,11,13,.88);
    backdrop-filter:
        blur(12px);
    border-top:
        1px solid rgba(168,201,232,.20);
}
/* item */
.wgd-v2-warning {
    position: relative;
    display: grid;
    grid-template-columns:
        25px 44px 1fr;
    gap: 12px;
    align-items: center;
    padding:
        25px 28px;
    border-right:
        1px solid rgba(255,255,255,.08);
    transition:
        .35s ease;
}
.wgd-v2-warning::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background:
        var(--gd-blue);
    transition:
        .35s ease;
}
.wgd-v2-warning:hover {
    background:
        rgba(120,169,220,.08);
}
.wgd-v2-warning:hover::after {
    width: 100%;
}
/* number */
.wgd-v2-warning > span {
    color:
        var(--gd-blue-light);
    opacity: .65;
    font-size: 9px;
    font-weight: 900;
}
/* icon */
.wgd-v2-warning > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color:
        var(--gd-copper-light);
    border:
        1px solid rgba(182,124,89,.45);
    font-size: 14px;
}
/* text */
.wgd-v2-warning div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.wgd-v2-warning strong {
    color:
        var(--gd-white);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.wgd-v2-warning small {
    color:
        rgba(255,255,255,.44);
    font-size: 8px;
    line-height: 1.45;
}
/* =========================================================
   DAILY OPERATION
========================================================= */
.wgd-v2-daily {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns:
        150px .8fr 1.2fr;
    width: 100%;
    background:
        var(--gd-white);
    border-top:
        1px solid rgba(17,24,28,.08);
}
/* =========================================================
   DAILY INDEX
========================================================= */
.wgd-v2-daily-index {
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background:
        var(--gd-dark);
}
.wgd-v2-daily-index span {
    color:
        var(--gd-blue-light);
    font-size: 42px;
    font-weight: 900;
}
.wgd-v2-daily-index i {
    width: 1px;
    height: 65px;
    margin:
        16px 0;
    background:
        var(--gd-copper);
}
.wgd-v2-daily-index small {
    color:
        rgba(255,255,255,.45);
    font-size: 8px;
    line-height: 1.6;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-align: center;
    text-transform: uppercase;
}
/* =========================================================
   DAILY TITLE
========================================================= */
.wgd-v2-daily-title {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding:
        50px;
    background:
        var(--gd-light);
    border-right:
        1px solid rgba(17,24,28,.10);
}
.wgd-v2-daily-title > span {
    margin-bottom: 15px;
    color:
        var(--gd-blue-dark);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}
.wgd-v2-daily-title h3 {
    margin: 0;
    color:
        var(--gd-dark);
    font-size:
        clamp(32px,3.2vw,50px);
    line-height: .92;
    font-weight: 900;
    letter-spacing: -3px;
    text-transform: uppercase;
}
.wgd-v2-daily-title h3 strong {
    display: block;
    margin-top: 8px;
    color:
        var(--gd-copper);
}
/* =========================================================
   DAILY COPY
========================================================= */
.wgd-v2-daily-copy {
    display: grid;
    grid-template-columns:
        repeat(2,1fr);
    align-items: stretch;
}
.wgd-v2-daily-copy > div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding:
        45px 40px;
}
.wgd-v2-daily-copy > div + div {
    border-left:
        1px solid rgba(17,24,28,.09);
}
.wgd-v2-daily-copy span {
    margin-bottom: 16px;
    color:
        var(--gd-blue-dark);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.wgd-v2-daily-copy p {
    margin: 0;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.85;
}
/* =========================================================
   BOTTOM TRACK
========================================================= */
.wgd-v2-track {
    position: relative;
    z-index: 6;
    display: grid;
    grid-template-columns:
        250px repeat(6,1fr);
    width: 100%;
    min-height: 115px;
    background:
        var(--gd-dark);
}
/* brand */
.wgd-v2-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    padding:
        20px 28px;
    background:
        var(--gd-dark-soft);
}
.wgd-v2-brand > span {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    color:
        var(--gd-white);
    border:
        1px solid var(--gd-blue);
    font-family:
        Georgia,
        serif;
    font-size: 29px;
    font-weight: 900;
    font-style: italic;
}
.wgd-v2-brand div {
    color:
        rgba(255,255,255,.42);
    font-size: 8px;
    line-height: 1.5;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.wgd-v2-brand strong {
    display: block;
    color:
        var(--gd-copper-light);
}
/* track items */
.wgd-v2-track-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 9px;
    border-left:
        1px solid rgba(255,255,255,.07);
    transition:
        .3s ease;
}
.wgd-v2-track-item small {
    position: absolute;
    top: 10px;
    right: 12px;
    color:
        rgba(168,201,232,.32);
    font-size: 7px;
    font-weight: 900;
}
.wgd-v2-track-item i {
    color:
        var(--gd-copper-light);
    font-size: 18px;
    transition:
        .3s ease;
}
.wgd-v2-track-item strong {
    color:
        var(--gd-white);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.wgd-v2-track-item:hover {
    background:
        rgba(120,169,220,.08);
}
.wgd-v2-track-item:hover i {
    color:
        var(--gd-blue-light);
    transform:
        translateY(-3px);
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1199.98px) {
    .wgd-v2-content-panel {
        width: 460px;
    }
    .wgd-v2-warning {
        padding:
            22px 18px;
    }
    .wgd-v2-track {
        grid-template-columns:
            220px repeat(6,125px);
        overflow-x:
            auto;
    }
}
@media (max-width: 991.98px) {
    .wgd-behavior-v2 {
        padding-top: 80px;
    }
    .wgd-v2-stage {
        min-height: 950px;
    }
    .wgd-v2-content-panel {
        top: 50px;
        left: 6%;
        width: 52%;
    }
    .wgd-v2-photo-title {
        right: 5%;
        top: 70px;
        width: 34%;
    }
    .wgd-v2-warning-rail {
        grid-template-columns:
            repeat(2,1fr);
    }
    .wgd-v2-daily {
        grid-template-columns:
            130px 1fr;
    }
    .wgd-v2-daily-copy {
        grid-column:
            1 / -1;
    }
}
@media (max-width: 575.98px) {
    .wgd-behavior-v2 {
        padding-top: 55px;
    }
    .wgd-v2-head {
        margin-bottom: 35px;
    }
    .wgd-v2-head h2 {
        font-size: 39px;
        letter-spacing: -3px;
    }
    .wgd-v2-head h2 strong {
        font-size: 28px;
        letter-spacing: -1px;
    }
    .wgd-v2-stage {
        min-height: 1180px;
    }
    .wgd-v2-content-panel {
        top: 25px;
        left: 20px;
        right: 20px;
        width: auto;
        padding:
            30px 24px;
    }
    .wgd-v2-photo-title {
        top: 515px;
        left: 22px;
        right: 22px;
        width: auto;
        text-align: left;
    }
    .wgd-v2-photo-title strong {
        font-size: 28px;
    }
    .wgd-v2-warning-rail {
        grid-template-columns:
            1fr;
        min-height: auto;
    }
    .wgd-v2-warning {
        min-height: 100px;
    }
    .wgd-v2-daily {
        display: block;
    }
    .wgd-v2-daily-index {
        min-height: 115px;
        flex-direction: row;
        gap: 18px;
    }
    .wgd-v2-daily-index i {
        width: 55px;
        height: 1px;
        margin: 0;
    }
    .wgd-v2-daily-title {
        padding:
            40px 24px;
    }
    .wgd-v2-daily-title h3 {
        font-size: 34px;
        letter-spacing: -2px;
    }
    .wgd-v2-daily-copy {
        grid-template-columns:
            1fr;
    }
    .wgd-v2-daily-copy > div {
        padding:
            30px 24px;
    }
    .wgd-v2-daily-copy > div + div {
        border-left: 0;
        border-top:
            1px solid rgba(17,24,28,.09);
    }
    .wgd-v2-track {
        grid-template-columns:
            190px repeat(6,105px);
    }
}
/* =========================================================
   MORE THAN LOOKS - SYSTEM SELECTION
========================================================= */
.wgd-select-system {
    position: relative;
    overflow: hidden;
    padding:
        110px 0 0;
    background:
        var(--gd-cream);
}
/* subtle architectural grid */
.wgd-select-system::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            rgba(68,122,171,.028) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(68,122,171,.028) 1px,
            transparent 1px
        );
    background-size:
        60px 60px;
}
/* copper top marker */
.wgd-select-system::after {
    content: "";
    position: absolute;
    top: 0;
    left: 7%;
    width: 115px;
    height: 4px;
    background:
        var(--gd-copper);
}
/* =========================================================
   HEADER
========================================================= */
.wgd-select-head {
    position: relative;
    z-index: 4;
    margin-bottom:
        55px;
}
.wgd-select-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom:
        18px;
    color:
        var(--gd-muted);
    font-size:
        9px;
    font-weight:
        900;
    letter-spacing:
        2px;
    text-transform:
        uppercase;
}
.wgd-select-kicker span {
    color:
        var(--gd-blue-dark);
}
.wgd-select-kicker i {
    width:
        55px;
    height:
        1px;
    background:
        var(--gd-copper);
}
/* =========================================================
   HEADING
========================================================= */
.wgd-select-head h2 {
    margin: 0;
    max-width:
        900px;
    color:
        var(--gd-dark);
    font-size:
        clamp(48px,5.3vw,82px);
    line-height:
        .86;
    font-weight:
        900;
    letter-spacing:
        -5px;
    text-transform:
        uppercase;
}
.wgd-select-head h2 strong {
    display:
        block;
    margin-top:
        8px;
    color:
        var(--gd-copper);
    font-size:
        .67em;
    line-height:
        1;
    letter-spacing:
        -2px;
}
.wgd-select-head h2 em {
    color:
        var(--gd-blue-dark);
    font-style:
        normal;
}
/* =========================================================
   HEAD NOTE
========================================================= */
.wgd-select-head-note {
    padding:
        20px 0 0 24px;
    border-left:
        2px solid var(--gd-blue);
}
.wgd-select-head-note span {
    display:
        block;
    margin-bottom:
        10px;
    color:
        var(--gd-blue-dark);
    font-size:
        8px;
    font-weight:
        900;
    letter-spacing:
        1.7px;
}
.wgd-select-head-note p {
    margin:
        0;
    color:
        var(--gd-muted);
    font-size:
        14px;
    line-height:
        1.75;
}
/* =========================================================
   MAIN BOARD
========================================================= */
.wgd-select-board {
    position:
        relative;
    z-index:
        4;
    display:
        grid;
    grid-template-columns:
        1fr 1.12fr .95fr;
    min-height:
        690px;
    background:
        var(--gd-white);
    border:
        1px solid rgba(17,24,28,.10);
    box-shadow:
        0 40px 85px rgba(17,24,28,.10);
}
/* =========================================================
   LEFT COPY
========================================================= */
.wgd-select-copy {
    position:
        relative;
    display:
        flex;
    justify-content:
        center;
    flex-direction:
        column;
    padding:
        55px 45px;
    background:
        var(--gd-dark);
}
.wgd-select-copy::after {
    content: "";
    position:
        absolute;
    right:
        -35px;
    top:
        50%;
    width:
        36px;
    height:
        76px;
    transform:
        translateY(-50%);
    background:
        var(--gd-dark);
    clip-path:
        polygon(0 0,100% 50%,0 100%);
    z-index:
        5;
}
.wgd-select-copy-number {
    margin-bottom:
        18px;
    color:
        var(--gd-blue-light);
    font-size:
        38px;
    line-height:
        1;
    font-weight:
        900;
}
.wgd-select-copy-label {
    margin-bottom:
        20px;
    color:
        var(--gd-copper-light);
    font-size:
        9px;
    font-weight:
        900;
    letter-spacing:
        1.8px;
    text-transform:
        uppercase;
}
.wgd-select-copy p {
    margin:
        0;
    color:
        rgba(255,255,255,.63);
    font-size:
        14px;
    line-height:
        1.9;
}
/* rule */
.wgd-select-rule {
    display:
        flex;
    align-items:
        center;
    gap:
        9px;
    margin:
        28px 0;
}
.wgd-select-rule span {
    width:
        55px;
    height:
        2px;
    background:
        var(--gd-copper);
}
.wgd-select-rule i {
    width:
        6px;
    height:
        6px;
    background:
        var(--gd-blue);
    transform:
        rotate(45deg);
}
/* copy footer */
.wgd-select-copy-footer {
    display:
        flex;
    align-items:
        center;
    gap:
        13px;
    margin-top:
        32px;
    color:
        rgba(255,255,255,.40);
    font-size:
        8px;
    font-weight:
        900;
    letter-spacing:
        1px;
    text-transform:
        uppercase;
}
.wgd-select-copy-footer > span {
    width:
        35px;
    height:
        1px;
    background:
        var(--gd-copper);
}
.wgd-select-copy-footer strong {
    display:
        block;
    color:
        var(--gd-white);
}
/* =========================================================
   CENTER DOOR AREA
========================================================= */
.wgd-select-door-zone {
    position:
        relative;
    overflow:
        hidden;
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    min-width:
        0;
    background:
        linear-gradient(
            180deg,
            #f4f7f9,
            #e8eef2
        );
}
/* subtle cross grid */
.wgd-select-door-zone::before {
    content: "";
    position:
        absolute;
    inset:
        0;
    background:
        linear-gradient(
            rgba(68,122,171,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(68,122,171,.055) 1px,
            transparent 1px
        );
    background-size:
        38px 38px;
}
/* large circle */
.wgd-select-door-zone::after {
    content: "";
    position:
        absolute;
    width:
        470px;
    height:
        470px;
    border:
        1px solid rgba(68,122,171,.14);
    border-radius:
        50%;
}
/* code */
.wgd-select-door-code {
    position:
        absolute;
    z-index:
        5;
    top:
        24px;
    right:
        25px;
    color:
        var(--gd-blue-dark);
    font-size:
        8px;
    font-weight:
        900;
    letter-spacing:
        1.7px;
}
/* =========================================================
   DOOR WRAPPER
========================================================= */
.wgd-select-door-wrap {
    position:
        relative;
    z-index:
        4;
    width:
        340px;
    height:
        440px;
}
/* =========================================================
   DOOR
========================================================= */
.wgd-select-door {
    position:
        absolute;
    left:
        50%;
    bottom:
        25px;
    width:
        270px;
    height:
        315px;
    transform:
        translateX(-50%);
    display:
        grid;
    grid-template-rows:
        repeat(4,1fr);
    background:
        var(--gd-white);
    border:
        5px solid var(--gd-dark);
    box-shadow:
        0 18px 40px rgba(17,24,28,.13);
}
/* door panels */
.wgd-door-panel {
    position:
        relative;
    border-bottom:
        2px solid rgba(17,24,28,.20);
}
.wgd-door-panel::before,
.wgd-door-panel::after {
    content: "";
    position:
        absolute;
    top:
        50%;
    width:
        38%;
    height:
        38%;
    transform:
        translateY(-50%);
    border:
        1px solid rgba(17,24,28,.12);
}
.wgd-door-panel::before {
    left:
        8%;
}
.wgd-door-panel::after {
    right:
        8%;
}
/* =========================================================
   HINGES
========================================================= */
.wgd-door-hinge {
    position:
        absolute;
    left:
        50%;
    width:
        19px;
    height:
        10px;
    transform:
        translateX(-50%);
    background:
        var(--gd-copper);
}
.hinge-a {
    top: 24%;
}
.hinge-b {
    top: 49%;
}
.hinge-c {
    top: 74%;
}
/* =========================================================
   TRACKS
========================================================= */
.wgd-select-track {
    position:
        absolute;
    bottom:
        25px;
    width:
        6px;
    height:
        330px;
    background:
        var(--gd-dark-soft);
}
.track-left {
    left:
        16px;
}
.track-right {
    right:
        16px;
}
.wgd-select-track::before {
    content: "";
    position:
        absolute;
    top:
        0;
    width:
        67px;
    height:
        6px;
    background:
        var(--gd-dark-soft);
}
.track-left::before {
    left:
        0;
}
.track-right::before {
    right:
        0;
}
/* =========================================================
   SHAFT / SPRINGS
========================================================= */
.wgd-select-shaft {
    position:
        absolute;
    top:
        80px;
    left:
        15px;
    width:
        calc(100% - 30px);
    height:
        4px;
    background:
        var(--gd-dark);
}
.wgd-select-spring {
    position:
        absolute;
    top:
        69px;
    width:
        90px;
    height:
        26px;
    border:
        4px solid var(--gd-dark);
    border-radius:
        20px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 6px,
            rgba(182,124,89,.55) 6px 8px
        );
}
.spring-left {
    left:
        55px;
}
.spring-right {
    right:
        55px;
}
/* drums */
.wgd-select-drum {
    position:
        absolute;
    top:
        68px;
    width:
        28px;
    height:
        28px;
    border-radius:
        50%;
    background:
        var(--gd-blue-dark);
    border:
        5px solid var(--gd-dark);
}
.drum-left {
    left:
        18px;
}
.drum-right {
    right:
        18px;
}
/* =========================================================
   OPENER
========================================================= */
.wgd-select-opener {
    position:
        absolute;
    top:
        5px;
    left:
        50%;
    width:
        90px;
    height:
        50px;
    transform:
        translateX(-50%);
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    gap:
        6px;
    color:
        var(--gd-white);
    background:
        var(--gd-dark);
    border-bottom:
        3px solid var(--gd-copper);
}
.wgd-select-opener span {
    color:
        var(--gd-blue-light);
    font-family:
        Georgia,
        serif;
    font-size:
        22px;
    font-style:
        italic;
}
.wgd-select-opener small {
    font-size:
        8px;
    font-weight:
        900;
    letter-spacing:
        1px;
    text-transform:
        uppercase;
}
/* opener rail */
.wgd-select-opener-rail {
    position:
        absolute;
    top:
        52px;
    left:
        50%;
    width:
        3px;
    height:
        45px;
    transform:
        translateX(-50%);
    background:
        var(--gd-dark);
}
/* =========================================================
   DOOR CAPTION
========================================================= */
.wgd-select-door-caption {
    position:
        absolute;
    z-index:
        6;
    left:
        50%;
    bottom:
        18px;
    transform:
        translateX(-50%);
    width:
        80%;
    padding:
        13px 15px;
    text-align:
        center;
    background:
        rgba(255,255,255,.88);
    border-top:
        2px solid var(--gd-copper);
}
.wgd-select-door-caption span {
    display:
        block;
    margin-bottom:
        4px;
    color:
        var(--gd-blue-dark);
    font-size:
        7px;
    font-weight:
        900;
    letter-spacing:
        1.3px;
    text-transform:
        uppercase;
}
.wgd-select-door-caption strong {
    color:
        var(--gd-dark);
    font-size:
        9px;
    font-weight:
        900;
    letter-spacing:
        .7px;
    text-transform:
        uppercase;
}
/* =========================================================
   RIGHT OPTIONS
========================================================= */
.wgd-select-options {
    display:
        flex;
    flex-direction:
        column;
    background:
        var(--gd-white);
}
/* title */
.wgd-select-options-title {
    padding:
        28px 25px;
    background:
        var(--gd-light);
    border-bottom:
        1px solid rgba(17,24,28,.09);
}
.wgd-select-options-title span {
    display:
        block;
    margin-bottom:
        5px;
    color:
        var(--gd-blue-dark);
    font-size:
        8px;
    font-weight:
        900;
    letter-spacing:
        1.4px;
    text-transform:
        uppercase;
}
.wgd-select-options-title strong {
    color:
        var(--gd-dark);
    font-size:
        15px;
    font-weight:
        900;
    text-transform:
        uppercase;
}
/* =========================================================
   OPTION
========================================================= */
.wgd-select-option {
    position:
        relative;
    flex:
        1;
    display:
        grid;
    grid-template-columns:
        22px 42px 1fr;
    gap:
        13px;
    align-items:
        center;
    padding:
        15px 22px;
    border-bottom:
        1px solid rgba(17,24,28,.08);
    transition:
        .3s ease;
}
.wgd-select-option:hover {
    padding-left:
        27px;
    background:
        var(--gd-light);
}
.wgd-select-option > span {
    color:
        var(--gd-blue-dark);
    opacity:
        .50;
    font-size:
        8px;
    font-weight:
        900;
}
.wgd-select-option-icon {
    width:
        39px;
    height:
        39px;
    display:
        grid;
    place-items:
        center;
    color:
        var(--gd-copper);
    border:
        1px solid rgba(182,124,89,.35);
    font-size:
        15px;
    transition:
        .3s ease;
}
.wgd-select-option:hover
.wgd-select-option-icon {
    color:
        var(--gd-white);
    border-color:
        var(--gd-blue-dark);
    background:
        var(--gd-blue-dark);
}
.wgd-select-option div:last-child {
    display:
        flex;
    flex-direction:
        column;
    gap:
        4px;
}
.wgd-select-option strong {
    color:
        var(--gd-dark);
    font-size:
        10px;
    font-weight:
        900;
    letter-spacing:
        .7px;
    text-transform:
        uppercase;
}
.wgd-select-option small {
    color:
        var(--gd-muted);
    font-size:
        8px;
    line-height:
        1.4;
}
/* =========================================================
   LOWER TRACK BAR
========================================================= */
.wgd-select-trackbar {
    position:
        relative;
    z-index:
        5;
    display:
        grid;
    grid-template-columns:
        245px repeat(5,1fr) 1.3fr;
    min-height:
        115px;
    margin-top:
        65px;
    background:
        var(--gd-dark);
}
/* =========================================================
   BRAND
========================================================= */
.wgd-select-brand {
    display:
        flex;
    align-items:
        center;
    gap:
        16px;
    padding:
        20px 28px;
    background:
        var(--gd-dark-soft);
}
.wgd-select-brand > span {
    width:
        54px;
    height:
        54px;
    display:
        grid;
    place-items:
        center;
    color:
        var(--gd-white);
    border:
        1px solid var(--gd-copper);
    font-family:
        Georgia,
        serif;
    font-size:
        29px;
    font-style:
        italic;
}
.wgd-select-brand div {
    color:
        rgba(255,255,255,.42);
    font-size:
        8px;
    line-height:
        1.5;
    font-weight:
        900;
    letter-spacing:
        1px;
    text-transform:
        uppercase;
}
.wgd-select-brand strong {
    display:
        block;
    color:
        var(--gd-copper-light);
}
/* =========================================================
   TRACK ITEM
========================================================= */
.wgd-select-track-item {
    position:
        relative;
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    flex-direction:
        column;
    gap:
        10px;
    border-left:
        1px solid rgba(255,255,255,.07);
}
.wgd-select-track-item small {
    color:
        rgba(168,201,232,.45);
    font-size:
        7px;
    font-weight:
        900;
}
.wgd-select-track-item strong {
    color:
        var(--gd-white);
    font-size:
        9px;
    font-weight:
        900;
    letter-spacing:
        1px;
    text-transform:
        uppercase;
}
.wgd-select-track-item > span {
    width:
        38px;
    height:
        2px;
    background:
        var(--gd-copper);
}
/* =========================================================
   RESULT
========================================================= */
.wgd-select-track-result {
    display:
        flex;
    justify-content:
        center;
    flex-direction:
        column;
    padding:
        20px 30px;
    background:
        linear-gradient(
            135deg,
            rgba(68,122,171,.18),
            rgba(182,124,89,.10)
        );
    border-left:
        1px solid rgba(255,255,255,.08);
}
.wgd-select-track-result small {
    margin-bottom:
        5px;
    color:
        var(--gd-blue-light);
    font-size:
        8px;
    font-weight:
        900;
    letter-spacing:
        1.7px;
    text-transform:
        uppercase;
}
.wgd-select-track-result strong {
    color:
        var(--gd-white);
    font-size:
        14px;
    font-weight:
        900;
    text-transform:
        uppercase;
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 1199.98px) {
    .wgd-select-board {
        grid-template-columns:
            1fr 1fr;
    }
    .wgd-select-options {
        grid-column:
            1 / -1;
        display:
            grid;
        grid-template-columns:
            repeat(2,1fr);
    }
    .wgd-select-options-title {
        grid-column:
            1 / -1;
    }
    .wgd-select-trackbar {
        grid-template-columns:
            210px repeat(5,120px) 180px;
        overflow-x:
            auto;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .wgd-select-system {
        padding-top:
            80px;
    }
    .wgd-select-board {
        grid-template-columns:
            1fr;
    }
    .wgd-select-copy {
        min-height:
            420px;
    }
    .wgd-select-copy::after {
        display:
            none;
    }
    .wgd-select-door-zone {
        min-height:
            600px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    .wgd-select-system {
        padding-top:
            55px;
    }
    .wgd-select-head {
        margin-bottom:
            35px;
    }
    .wgd-select-head h2 {
        font-size:
            39px;
        letter-spacing:
            -3px;
    }
    .wgd-select-head h2 strong {
        font-size:
            27px;
        letter-spacing:
            -1px;
    }
    .wgd-select-copy {
        min-height:
            auto;
        padding:
            42px 24px;
    }
    .wgd-select-door-zone {
        min-height:
            570px;
    }
    .wgd-select-door-wrap {
        transform:
            scale(.87);
    }
    .wgd-select-options {
        display:
            block;
    }
    .wgd-select-option {
        min-height:
            85px;
        padding:
            17px 20px;
    }
    .wgd-select-trackbar {
        grid-template-columns:
            180px repeat(5,105px) 160px;
        margin-top:
            40px;
    }
}
/* =========================================================
   MORE THAN LOOKS - SYSTEM SELECTION
========================================================= */
.wgd-select-system {
    position: relative;
    overflow: hidden;
    padding:
        110px 0 0;
    background:
        var(--gd-cream);
}
/* subtle architectural grid */
.wgd-select-system::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            rgba(68,122,171,.028) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(68,122,171,.028) 1px,
            transparent 1px
        );
    background-size:
        60px 60px;
}
/* copper top marker */
.wgd-select-system::after {
    content: "";
    position: absolute;
    top: 0;
    left: 7%;
    width: 115px;
    height: 4px;
    background:
        var(--gd-copper);
}
/* =========================================================
   HEADER
========================================================= */
.wgd-select-head {
    position: relative;
    z-index: 4;
    margin-bottom:
        55px;
}
.wgd-select-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom:
        18px;
    color:
        var(--gd-muted);
    font-size:
        9px;
    font-weight:
        900;
    letter-spacing:
        2px;
    text-transform:
        uppercase;
}
.wgd-select-kicker span {
    color:
        var(--gd-blue-dark);
}
.wgd-select-kicker i {
    width:
        55px;
    height:
        1px;
    background:
        var(--gd-copper);
}
/* =========================================================
   HEADING
========================================================= */
.wgd-select-head h2 {
    margin: 0;
    max-width:
        900px;
    color:
        var(--gd-dark);
    font-size:
        clamp(48px,5.3vw,82px);
    line-height:
        .86;
    font-weight:
        900;
    letter-spacing:
        -5px;
    text-transform:
        uppercase;
}
.wgd-select-head h2 strong {
    display:
        block;
    margin-top:
        8px;
    color:
        var(--gd-copper);
    font-size:
        .67em;
    line-height:
        1;
    letter-spacing:
        -2px;
}
.wgd-select-head h2 em {
    color:
        var(--gd-blue-dark);
    font-style:
        normal;
}
/* =========================================================
   HEAD NOTE
========================================================= */
.wgd-select-head-note {
    padding:
        20px 0 0 24px;
    border-left:
        2px solid var(--gd-blue);
}
.wgd-select-head-note span {
    display:
        block;
    margin-bottom:
        10px;
    color:
        var(--gd-blue-dark);
    font-size:
        8px;
    font-weight:
        900;
    letter-spacing:
        1.7px;
}
.wgd-select-head-note p {
    margin:
        0;
    color:
        var(--gd-muted);
    font-size:
        14px;
    line-height:
        1.75;
}
/* =========================================================
   MAIN BOARD
========================================================= */
.wgd-select-board {
    position:
        relative;
    z-index:
        4;
    display:
        grid;
    grid-template-columns:
        1fr 1.12fr .95fr;
    min-height:
        690px;
    background:
        var(--gd-white);
    border:
        1px solid rgba(17,24,28,.10);
    box-shadow:
        0 40px 85px rgba(17,24,28,.10);
}
/* =========================================================
   LEFT COPY
========================================================= */
.wgd-select-copy {
    position:
        relative;
    display:
        flex;
    justify-content:
        center;
    flex-direction:
        column;
    padding:
        55px 45px;
    background:
        var(--gd-dark);
}
.wgd-select-copy::after {
    content: "";
    position:
        absolute;
    right:
        -35px;
    top:
        50%;
    width:
        36px;
    height:
        76px;
    transform:
        translateY(-50%);
    background:
        var(--gd-dark);
    clip-path:
        polygon(0 0,100% 50%,0 100%);
    z-index:
        5;
}
.wgd-select-copy-number {
    margin-bottom:
        18px;
    color:
        var(--gd-blue-light);
    font-size:
        38px;
    line-height:
        1;
    font-weight:
        900;
}
.wgd-select-copy-label {
    margin-bottom:
        20px;
    color:
        var(--gd-copper-light);
    font-size:
        9px;
    font-weight:
        900;
    letter-spacing:
        1.8px;
    text-transform:
        uppercase;
}
.wgd-select-copy p {
    margin:
        0;
    color:
        rgba(255,255,255,.63);
    font-size:
        14px;
    line-height:
        1.9;
}
/* rule */
.wgd-select-rule {
    display:
        flex;
    align-items:
        center;
    gap:
        9px;
    margin:
        28px 0;
}
.wgd-select-rule span {
    width:
        55px;
    height:
        2px;
    background:
        var(--gd-copper);
}
.wgd-select-rule i {
    width:
        6px;
    height:
        6px;
    background:
        var(--gd-blue);
    transform:
        rotate(45deg);
}
/* copy footer */
.wgd-select-copy-footer {
    display:
        flex;
    align-items:
        center;
    gap:
        13px;
    margin-top:
        32px;
    color:
        rgba(255,255,255,.40);
    font-size:
        8px;
    font-weight:
        900;
    letter-spacing:
        1px;
    text-transform:
        uppercase;
}
.wgd-select-copy-footer > span {
    width:
        35px;
    height:
        1px;
    background:
        var(--gd-copper);
}
.wgd-select-copy-footer strong {
    display:
        block;
    color:
        var(--gd-white);
}
/* =========================================================
   CENTER DOOR AREA
========================================================= */
.wgd-select-door-zone {
    position:
        relative;
    overflow:
        hidden;
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    min-width:
        0;
    background:
        linear-gradient(
            180deg,
            #f4f7f9,
            #e8eef2
        );
}
/* subtle cross grid */
.wgd-select-door-zone::before {
    content: "";
    position:
        absolute;
    inset:
        0;
    background:
        linear-gradient(
            rgba(68,122,171,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(68,122,171,.055) 1px,
            transparent 1px
        );
    background-size:
        38px 38px;
}
/* large circle */
.wgd-select-door-zone::after {
    content: "";
    position:
        absolute;
    width:
        470px;
    height:
        470px;
    border:
        1px solid rgba(68,122,171,.14);
    border-radius:
        50%;
}
/* code */
.wgd-select-door-code {
    position:
        absolute;
    z-index:
        5;
    top:
        24px;
    right:
        25px;
    color:
        var(--gd-blue-dark);
    font-size:
        8px;
    font-weight:
        900;
    letter-spacing:
        1.7px;
}
/* =========================================================
   DOOR WRAPPER
========================================================= */
.wgd-select-door-wrap {
    position:
        relative;
    z-index:
        4;
    width:
        340px;
    height:
        440px;
}
/* =========================================================
   DOOR
========================================================= */
.wgd-select-door {
    position:
        absolute;
    left:
        50%;
    bottom:
        25px;
    width:
        270px;
    height:
        315px;
    transform:
        translateX(-50%);
    display:
        grid;
    grid-template-rows:
        repeat(4,1fr);
    background:
        var(--gd-white);
    border:
        5px solid var(--gd-dark);
    box-shadow:
        0 18px 40px rgba(17,24,28,.13);
}
/* door panels */
.wgd-door-panel {
    position:
        relative;
    border-bottom:
        2px solid rgba(17,24,28,.20);
}
.wgd-door-panel::before,
.wgd-door-panel::after {
    content: "";
    position:
        absolute;
    top:
        50%;
    width:
        38%;
    height:
        38%;
    transform:
        translateY(-50%);
    border:
        1px solid rgba(17,24,28,.12);
}
.wgd-door-panel::before {
    left:
        8%;
}
.wgd-door-panel::after {
    right:
        8%;
}
/* =========================================================
   HINGES
========================================================= */
.wgd-door-hinge {
    position:
        absolute;
    left:
        50%;
    width:
        19px;
    height:
        10px;
    transform:
        translateX(-50%);
    background:
        var(--gd-copper);
}
.hinge-a {
    top: 24%;
}
.hinge-b {
    top: 49%;
}
.hinge-c {
    top: 74%;
}
/* =========================================================
   TRACKS
========================================================= */
.wgd-select-track {
    position:
        absolute;
    bottom:
        25px;
    width:
        6px;
    height:
        330px;
    background:
        var(--gd-dark-soft);
}
.track-left {
    left:
        16px;
}
.track-right {
    right:
        16px;
}
.wgd-select-track::before {
    content: "";
    position:
        absolute;
    top:
        0;
    width:
        67px;
    height:
        6px;
    background:
        var(--gd-dark-soft);
}
.track-left::before {
    left:
        0;
}
.track-right::before {
    right:
        0;
}
/* =========================================================
   SHAFT / SPRINGS
========================================================= */
.wgd-select-shaft {
    position:
        absolute;
    top:
        80px;
    left:
        15px;
    width:
        calc(100% - 30px);
    height:
        4px;
    background:
        var(--gd-dark);
}
.wgd-select-spring {
    position:
        absolute;
    top:
        69px;
    width:
        90px;
    height:
        26px;
    border:
        4px solid var(--gd-dark);
    border-radius:
        20px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 6px,
            rgba(182,124,89,.55) 6px 8px
        );
}
.spring-left {
    left:
        55px;
}
.spring-right {
    right:
        55px;
}
/* drums */
.wgd-select-drum {
    position:
        absolute;
    top:
        68px;
    width:
        28px;
    height:
        28px;
    border-radius:
        50%;
    background:
        var(--gd-blue-dark);
    border:
        5px solid var(--gd-dark);
}
.drum-left {
    left:
        18px;
}
.drum-right {
    right:
        18px;
}
/* =========================================================
   OPENER
========================================================= */
.wgd-select-opener {
    position:
        absolute;
    top:
        5px;
    left:
        50%;
    width:
        90px;
    height:
        50px;
    transform:
        translateX(-50%);
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    gap:
        6px;
    color:
        var(--gd-white);
    background:
        var(--gd-dark);
    border-bottom:
        3px solid var(--gd-copper);
}
.wgd-select-opener span {
    color:
        var(--gd-blue-light);
    font-family:
        Georgia,
        serif;
    font-size:
        22px;
    font-style:
        italic;
}
.wgd-select-opener small {
    font-size:
        8px;
    font-weight:
        900;
    letter-spacing:
        1px;
    text-transform:
        uppercase;
}
/* opener rail */
.wgd-select-opener-rail {
    position:
        absolute;
    top:
        52px;
    left:
        50%;
    width:
        3px;
    height:
        45px;
    transform:
        translateX(-50%);
    background:
        var(--gd-dark);
}
/* =========================================================
   DOOR CAPTION
========================================================= */
.wgd-select-door-caption {
    position:
        absolute;
    z-index:
        6;
    left:
        50%;
    bottom:
        18px;
    transform:
        translateX(-50%);
    width:
        80%;
    padding:
        13px 15px;
    text-align:
        center;
    background:
        rgba(255,255,255,.88);
    border-top:
        2px solid var(--gd-copper);
}
.wgd-select-door-caption span {
    display:
        block;
    margin-bottom:
        4px;
    color:
        var(--gd-blue-dark);
    font-size:
        7px;
    font-weight:
        900;
    letter-spacing:
        1.3px;
    text-transform:
        uppercase;
}
.wgd-select-door-caption strong {
    color:
        var(--gd-dark);
    font-size:
        9px;
    font-weight:
        900;
    letter-spacing:
        .7px;
    text-transform:
        uppercase;
}
/* =========================================================
   RIGHT OPTIONS
========================================================= */
.wgd-select-options {
    display:
        flex;
    flex-direction:
        column;
    background:
        var(--gd-white);
}
/* title */
.wgd-select-options-title {
    padding:
        28px 25px;
    background:
        var(--gd-light);
    border-bottom:
        1px solid rgba(17,24,28,.09);
}
.wgd-select-options-title span {
    display:
        block;
    margin-bottom:
        5px;
    color:
        var(--gd-blue-dark);
    font-size:
        8px;
    font-weight:
        900;
    letter-spacing:
        1.4px;
    text-transform:
        uppercase;
}
.wgd-select-options-title strong {
    color:
        var(--gd-dark);
    font-size:
        15px;
    font-weight:
        900;
    text-transform:
        uppercase;
}
/* =========================================================
   OPTION
========================================================= */
.wgd-select-option {
    position:
        relative;
    flex:
        1;
    display:
        grid;
    grid-template-columns:
        22px 42px 1fr;
    gap:
        13px;
    align-items:
        center;
    padding:
        15px 22px;
    border-bottom:
        1px solid rgba(17,24,28,.08);
    transition:
        .3s ease;
}
.wgd-select-option:hover {
    padding-left:
        27px;
    background:
        var(--gd-light);
}
.wgd-select-option > span {
    color:
        var(--gd-blue-dark);
    opacity:
        .50;
    font-size:
        8px;
    font-weight:
        900;
}
.wgd-select-option-icon {
    width:
        39px;
    height:
        39px;
    display:
        grid;
    place-items:
        center;
    color:
        var(--gd-copper);
    border:
        1px solid rgba(182,124,89,.35);
    font-size:
        15px;
    transition:
        .3s ease;
}
.wgd-select-option:hover
.wgd-select-option-icon {
    color:
        var(--gd-white);
    border-color:
        var(--gd-blue-dark);
    background:
        var(--gd-blue-dark);
}
.wgd-select-option div:last-child {
    display:
        flex;
    flex-direction:
        column;
    gap:
        4px;
}
.wgd-select-option strong {
    color:
        var(--gd-dark);
    font-size:
        10px;
    font-weight:
        900;
    letter-spacing:
        .7px;
    text-transform:
        uppercase;
}
.wgd-select-option small {
    color:
        var(--gd-muted);
    font-size:
        8px;
    line-height:
        1.4;
}
/* =========================================================
   LOWER TRACK BAR
========================================================= */
.wgd-select-trackbar {
    position:
        relative;
    z-index:
        5;
    display:
        grid;
    grid-template-columns:
        245px repeat(5,1fr) 1.3fr;
    min-height:
        115px;
    margin-top:
        65px;
    background:
        var(--gd-dark);
}
/* =========================================================
   BRAND
========================================================= */
.wgd-select-brand {
    display:
        flex;
    align-items:
        center;
    gap:
        16px;
    padding:
        20px 28px;
    background:
        var(--gd-dark-soft);
}
.wgd-select-brand > span {
    width:
        54px;
    height:
        54px;
    display:
        grid;
    place-items:
        center;
    color:
        var(--gd-white);
    border:
        1px solid var(--gd-copper);
    font-family:
        Georgia,
        serif;
    font-size:
        29px;
    font-style:
        italic;
}
.wgd-select-brand div {
    color:
        rgba(255,255,255,.42);
    font-size:
        8px;
    line-height:
        1.5;
    font-weight:
        900;
    letter-spacing:
        1px;
    text-transform:
        uppercase;
}
.wgd-select-brand strong {
    display:
        block;
    color:
        var(--gd-copper-light);
}
/* =========================================================
   TRACK ITEM
========================================================= */
.wgd-select-track-item {
    position:
        relative;
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    flex-direction:
        column;
    gap:
        10px;
    border-left:
        1px solid rgba(255,255,255,.07);
}
.wgd-select-track-item small {
    color:
        rgba(168,201,232,.45);
    font-size:
        7px;
    font-weight:
        900;
}
.wgd-select-track-item strong {
    color:
        var(--gd-white);
    font-size:
        9px;
    font-weight:
        900;
    letter-spacing:
        1px;
    text-transform:
        uppercase;
}
.wgd-select-track-item > span {
    width:
        38px;
    height:
        2px;
    background:
        var(--gd-copper);
}
/* =========================================================
   RESULT
========================================================= */
.wgd-select-track-result {
    display:
        flex;
    justify-content:
        center;
    flex-direction:
        column;
    padding:
        20px 30px;
    background:
        linear-gradient(
            135deg,
            rgba(68,122,171,.18),
            rgba(182,124,89,.10)
        );
    border-left:
        1px solid rgba(255,255,255,.08);
}
.wgd-select-track-result small {
    margin-bottom:
        5px;
    color:
        var(--gd-blue-light);
    font-size:
        8px;
    font-weight:
        900;
    letter-spacing:
        1.7px;
    text-transform:
        uppercase;
}
.wgd-select-track-result strong {
    color:
        var(--gd-white);
    font-size:
        14px;
    font-weight:
        900;
    text-transform:
        uppercase;
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 1199.98px) {
    .wgd-select-board {
        grid-template-columns:
            1fr 1fr;
    }
    .wgd-select-options {
        grid-column:
            1 / -1;
        display:
            grid;
        grid-template-columns:
            repeat(2,1fr);
    }
    .wgd-select-options-title {
        grid-column:
            1 / -1;
    }
    .wgd-select-trackbar {
        grid-template-columns:
            210px repeat(5,120px) 180px;
        overflow-x:
            auto;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .wgd-select-system {
        padding-top:
            80px;
    }
    .wgd-select-board {
        grid-template-columns:
            1fr;
    }
    .wgd-select-copy {
        min-height:
            420px;
    }
    .wgd-select-copy::after {
        display:
            none;
    }
    .wgd-select-door-zone {
        min-height:
            600px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    .wgd-select-system {
        padding-top:
            55px;
    }
    .wgd-select-head {
        margin-bottom:
            35px;
    }
    .wgd-select-head h2 {
        font-size:
            39px;
        letter-spacing:
            -3px;
    }
    .wgd-select-head h2 strong {
        font-size:
            27px;
        letter-spacing:
            -1px;
    }
    .wgd-select-copy {
        min-height:
            auto;
        padding:
            42px 24px;
    }
    .wgd-select-door-zone {
        min-height:
            570px;
    }
    .wgd-select-door-wrap {
        transform:
            scale(.87);
    }
    .wgd-select-options {
        display:
            block;
    }
    .wgd-select-option {
        min-height:
            85px;
        padding:
            17px 20px;
    }
    .wgd-select-trackbar {
        grid-template-columns:
            180px repeat(5,105px) 160px;
        margin-top:
            40px;
    }
}
/* =========================================================
   GALLERY STYLE 02
========================================================= */
.wgd-gallery-v2 {
    position: relative;
    overflow: hidden;
    padding-top: 110px;
    background:
        var(--gd-cream);
}
/* technical texture */
.wgd-gallery-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            rgba(68,122,171,.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(68,122,171,.03) 1px,
            transparent 1px
        );
    background-size:
        60px 60px;
}
/* top marker */
.wgd-gallery-v2::after {
    content: "";
    position: absolute;
    top: 0;
    left: 7%;
    width: 120px;
    height: 4px;
    background:
        var(--gd-copper);
}
/* =========================================================
   HEADER
========================================================= */
.wgd-gallery-v2-head {
    position: relative;
    z-index: 4;
    margin-bottom: 55px;
}
.wgd-gallery-v2-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color:
        var(--gd-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.wgd-gallery-v2-kicker span {
    color:
        var(--gd-blue-dark);
}
.wgd-gallery-v2-kicker i {
    width: 55px;
    height: 1px;
    background:
        var(--gd-copper);
}
/* =========================================================
   TITLE
========================================================= */
.wgd-gallery-v2-head h2 {
    margin: 0;
    max-width: 900px;
    color:
        var(--gd-dark);
    font-size:
        clamp(48px,5.4vw,84px);
    line-height: .86;
    font-weight: 900;
    letter-spacing: -5px;
    text-transform: uppercase;
}
.wgd-gallery-v2-head h2 strong {
    display: block;
    margin-top: 8px;
    color:
        var(--gd-copper);
    font-size: .68em;
    line-height: 1;
    letter-spacing: -2px;
}
.wgd-gallery-v2-head h2 em {
    color:
        var(--gd-blue-dark);
    font-style: normal;
}
/* =========================================================
   NOTE
========================================================= */
.wgd-gallery-v2-note {
    padding:
        20px 0 0 25px;
    border-left:
        2px solid var(--gd-blue);
}
.wgd-gallery-v2-note span {
    display: block;
    margin-bottom: 10px;
    color:
        var(--gd-blue-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.6px;
}
.wgd-gallery-v2-note p {
    margin: 0;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.8;
}
/* =========================================================
   SHOWCASE
========================================================= */
.wgd-gallery-v2-showcase {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns:
        18% 52% 30%;
    grid-template-rows:
        1fr 1fr;
    width: 100%;
    height: 720px;
    gap: 3px;
    background:
        var(--gd-dark);
}
/* =========================================================
   COMMON IMAGE
========================================================= */
.wgd-gallery-v2-showcase figure,
.wgd-gallery-v2-rail figure {
    position: relative;
    overflow: hidden;
    margin: 0;
}
.wgd-gallery-v2-showcase img,
.wgd-gallery-v2-rail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1s ease;
}
.wgd-gallery-v2-showcase figure:hover img,
.wgd-gallery-v2-rail figure:hover img {
    transform:
        scale(1.055);
}
/* =========================================================
   LEFT VERTICAL
========================================================= */
.wgd-gallery-v2-side {
    grid-column:
        1 / 2;
    grid-row:
        1 / 3;
}
/* =========================================================
   MAIN
========================================================= */
.wgd-gallery-v2-main {
    grid-column:
        2 / 3;
    grid-row:
        1 / 3;
}
/* =========================================================
   RIGHT
========================================================= */
.wgd-gallery-v2-top {
    grid-column:
        3 / 4;
    grid-row:
        1 / 2;
}
.wgd-gallery-v2-bottom {
    grid-column:
        3 / 4;
    grid-row:
        2 / 3;
}
/* =========================================================
   SHADE
========================================================= */
.wgd-gallery-v2-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 25%,
            rgba(7,11,13,.78)
        );
}
.wgd-gallery-v2-main-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(7,11,13,.62),
            rgba(7,11,13,.13) 58%,
            transparent
        ),
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(7,11,13,.68)
        );
}
/* =========================================================
   SIDE CAPTIONS
========================================================= */
.wgd-gallery-v2-side figcaption,
.wgd-gallery-v2-mini figcaption {
    position: absolute;
    z-index: 3;
    left: 22px;
    right: 22px;
    bottom: 24px;
    display: flex;
    align-items: flex-end;
    gap: 15px;
}
.wgd-gallery-v2-side figcaption > span,
.wgd-gallery-v2-mini figcaption > span {
    color:
        var(--gd-blue-light);
    font-size: 14px;
    font-weight: 900;
}
.wgd-gallery-v2-side small,
.wgd-gallery-v2-mini small {
    display: block;
    margin-bottom: 4px;
    color:
        var(--gd-copper-light);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.wgd-gallery-v2-side strong,
.wgd-gallery-v2-mini strong {
    color:
        var(--gd-white);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 900;
    text-transform: uppercase;
}
/* =========================================================
   MAIN CODE
========================================================= */
.wgd-gallery-v2-main-code {
    position: absolute;
    z-index: 4;
    top: 25px;
    left: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    color:
        rgba(255,255,255,.66);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.7px;
}
.wgd-gallery-v2-main-code span {
    color:
        var(--gd-blue-light);
}
.wgd-gallery-v2-main-code i {
    width: 40px;
    height: 1px;
    background:
        var(--gd-copper);
}
/* =========================================================
   MAIN CAPTION
========================================================= */
.wgd-gallery-v2-main-caption {
    position: absolute;
    z-index: 4;
    left: 40px;
    bottom: 42px;
    max-width: 480px;
}
.wgd-gallery-v2-main-caption > span {
    display: block;
    margin-bottom: 12px;
    color:
        var(--gd-blue-light);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.wgd-gallery-v2-main-caption h3 {
    margin: 0 0 18px;
    color:
        var(--gd-white);
    font-size:
        clamp(42px,4.2vw,66px);
    line-height: .9;
    font-weight: 900;
    letter-spacing: -3px;
    text-transform: uppercase;
}
.wgd-gallery-v2-main-caption h3 strong {
    display: block;
    color:
        var(--gd-copper-light);
}
.wgd-gallery-v2-main-caption p {
    margin: 0;
    max-width: 430px;
    color:
        rgba(255,255,255,.72);
    font-size: 14px;
    line-height: 1.75;
}
/* =========================================================
   HUGE NUMBER
========================================================= */
.wgd-gallery-v2-main-number {
    position: absolute;
    z-index: 2;
    right: 25px;
    bottom: -15px;
    color:
        rgba(168,201,232,.13);
    font-size:
        160px;
    line-height: 1;
    font-weight: 900;
}
/* =========================================================
   LOWER RAIL
========================================================= */
.wgd-gallery-v2-rail {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns:
        1fr 300px 1fr;
    height: 230px;
    background:
        var(--gd-dark);
    border-top:
        3px solid var(--gd-dark);
}
/* =========================================================
   RAIL OVERLAY
========================================================= */
.wgd-gallery-v2-rail-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(7,11,13,.10),
            rgba(7,11,13,.65)
        );
}
/* rail caption */
.wgd-gallery-v2-rail figcaption {
    position: absolute;
    z-index: 3;
    left: 28px;
    bottom: 25px;
}
.wgd-gallery-v2-rail figcaption span {
    display: block;
    margin-bottom: 5px;
    color:
        var(--gd-blue-light);
    font-size: 13px;
    font-weight: 900;
}
.wgd-gallery-v2-rail figcaption strong {
    color:
        var(--gd-white);
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
}
/* =========================================================
   BRAND CENTER
========================================================= */
.wgd-gallery-v2-brand {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    background:
        var(--gd-dark-soft);
    text-align: center;
}
.wgd-gallery-v2-brand::before {
    content: "";
    position: absolute;
    inset: 18px;
    border:
        1px solid rgba(120,169,220,.18);
}
.wgd-gallery-v2-brand > span {
    position: relative;
    z-index: 2;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    color:
        var(--gd-white);
    border:
        1px solid var(--gd-copper);
    font-family:
        Georgia,
        serif;
    font-size: 32px;
    font-style: italic;
}
.wgd-gallery-v2-brand div {
    position: relative;
    z-index: 2;
}
.wgd-gallery-v2-brand small {
    display: block;
    margin-bottom: 4px;
    color:
        var(--gd-blue-light);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.wgd-gallery-v2-brand strong {
    color:
        var(--gd-copper-light);
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .wgd-gallery-v2 {
        padding-top: 80px;
    }
    .wgd-gallery-v2-showcase {
        grid-template-columns:
            32% 68%;
        grid-template-rows:
            380px 300px 300px;
        height: auto;
    }
    .wgd-gallery-v2-side {
        grid-column:
            1 / 2;
        grid-row:
            1 / 2;
    }
    .wgd-gallery-v2-main {
        grid-column:
            2 / 3;
        grid-row:
            1 / 3;
    }
    .wgd-gallery-v2-top {
        grid-column:
            1 / 2;
        grid-row:
            2 / 3;
    }
    .wgd-gallery-v2-bottom {
        grid-column:
            1 / 3;
        grid-row:
            3 / 4;
    }
    .wgd-gallery-v2-rail {
        grid-template-columns:
            1fr 220px 1fr;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    .wgd-gallery-v2 {
        padding-top: 55px;
    }
    .wgd-gallery-v2-head {
        margin-bottom: 35px;
    }
    .wgd-gallery-v2-head h2 {
        font-size: 39px;
        letter-spacing: -3px;
    }
    .wgd-gallery-v2-head h2 strong {
        font-size: 28px;
        letter-spacing: -1px;
    }
    .wgd-gallery-v2-showcase {
        display: block;
    }
    .wgd-gallery-v2-showcase figure {
        height: 360px;
        border-bottom:
            3px solid var(--gd-dark);
    }
    .wgd-gallery-v2-main {
        height: 540px !important;
    }
    .wgd-gallery-v2-main-caption {
        left: 24px;
        right: 24px;
        bottom: 30px;
    }
    .wgd-gallery-v2-main-caption h3 {
        font-size: 40px;
    }
    .wgd-gallery-v2-main-number {
        font-size: 110px;
    }
    .wgd-gallery-v2-rail {
        display: block;
        height: auto;
    }
    .wgd-gallery-v2-rail figure {
        height: 320px;
    }
    .wgd-gallery-v2-brand {
        min-height: 230px;
    }
}
/* =========================================================
   SIMPLE PROPERTY SECTION
========================================================= */
.wgd-property-simple {
    position: relative;
    overflow: hidden;
    padding: 110px 0 0;
    background:
        var(--gd-cream);
}
/* subtle blueprint texture */
.wgd-property-simple::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            rgba(68,122,171,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(68,122,171,.025) 1px,
            transparent 1px
        );
    background-size: 60px 60px;
}
/* top copper accent */
.wgd-property-simple::after {
    content: "";
    position: absolute;
    top: 0;
    left: 7%;
    width: 110px;
    height: 4px;
    background:
        var(--gd-copper);
}
/* =========================================================
   KICKER
========================================================= */
.wgd-property-simple-kicker {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color:
        var(--gd-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.wgd-property-simple-kicker span {
    color:
        var(--gd-blue-dark);
}
.wgd-property-simple-kicker i {
    width: 55px;
    height: 2px;
    background:
        var(--gd-copper);
}
/* =========================================================
   TITLE
========================================================= */
.wgd-property-simple h2 {
    position: relative;
    z-index: 2;
    margin: 0;
    color:
        var(--gd-dark);
    font-size:
        clamp(48px,5vw,78px);
    line-height: .88;
    font-weight: 900;
    letter-spacing: -4px;
    text-transform: uppercase;
}
.wgd-property-simple h2 strong {
    display: block;
    margin-top: 8px;
    color:
        var(--gd-copper);
    font-size: .68em;
    line-height: 1;
    letter-spacing: -2px;
}
.wgd-property-simple h2 em {
    display: block;
    color:
        var(--gd-blue-dark);
    font-style: normal;
}
/* =========================================================
   CENTER SPINE
========================================================= */
.wgd-property-spine {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    min-height: 430px;
}
.wgd-spine-top,
.wgd-spine-bottom {
    flex: 1;
    width: 2px;
}
.wgd-spine-top {
    background:
        var(--gd-blue);
}
.wgd-spine-bottom {
    background:
        var(--gd-copper);
}
.wgd-spine-mark {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 12px 0;
    color:
        var(--gd-dark);
    background:
        var(--gd-white);
    border:
        1px solid var(--gd-copper);
    font-family:
        Georgia, serif;
    font-size: 28px;
    font-style: italic;
    box-shadow:
        0 15px 35px rgba(17,24,28,.08);
}
/* =========================================================
   COPY
========================================================= */
.wgd-property-simple-copy {
    position: relative;
    z-index: 2;
    padding:
        8px 0 0 25px;
}
.wgd-property-copy-code {
    display: block;
    margin-bottom: 20px;
    color:
        var(--gd-blue-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.wgd-property-simple-copy p {
    margin: 0;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.9;
}
.wgd-property-simple-line {
    width: 85px;
    height: 2px;
    margin: 28px 0;
    background:
        linear-gradient(
            90deg,
            var(--gd-blue),
            var(--gd-copper)
        );
}
/* =========================================================
   BOTTOM STRIP
========================================================= */
.wgd-property-simple-strip {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns:
        1.4fr repeat(6,1fr);
    min-height: 125px;
    margin-top: 80px;
    background:
        var(--gd-dark);
}
/* =========================================================
   STRIP TITLE
========================================================= */
.wgd-property-strip-title {
    display: flex;
    align-items: center;
    gap: 18px;
    padding:
        25px 32px;
    background:
        var(--gd-dark-soft);
}
.wgd-property-strip-title > span {
    color:
        var(--gd-blue-light);
    font-size: 24px;
    font-weight: 900;
}
.wgd-property-strip-title strong {
    color:
        var(--gd-white);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 900;
    text-transform: uppercase;
}
.wgd-property-strip-title em {
    display: block;
    color:
        var(--gd-copper-light);
    font-style: normal;
}
/* =========================================================
   STRIP ITEM
========================================================= */
.wgd-property-strip-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    border-left:
        1px solid rgba(255,255,255,.08);
    transition:
        .3s ease;
}
.wgd-property-strip-item span {
    color:
        var(--gd-blue-light);
    font-size: 12px;
    font-weight: 900;
}
.wgd-property-strip-item strong {
    color:
        var(--gd-white);
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}
.wgd-property-strip-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    transform:
        translateX(-50%);
    background:
        var(--gd-copper);
    transition:
        width .3s ease;
}
.wgd-property-strip-item:hover {
    background:
        rgba(120,169,220,.06);
}
.wgd-property-strip-item:hover::after {
    width: 55%;
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .wgd-property-simple {
        padding-top: 80px;
    }
    .wgd-property-simple-copy {
        padding:
            10px 0 0;
    }
    .wgd-property-simple-strip {
        grid-template-columns:
            220px repeat(6,135px);
        overflow-x: auto;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    .wgd-property-simple {
        padding-top: 60px;
    }
    .wgd-property-simple h2 {
        font-size: 40px;
        letter-spacing: -3px;
    }
    .wgd-property-simple h2 strong {
        font-size: 29px;
        letter-spacing: -1px;
    }
    .wgd-property-simple-copy {
        margin-top: 10px;
    }
    .wgd-property-simple-strip {
        grid-template-columns:
            180px repeat(6,125px);
        margin-top: 55px;
    }
    .wgd-property-strip-title {
        padding:
            22px 20px;
    }
}
/* =========================================================
   MECHANICAL REALITY
========================================================= */
.wgd-mechanical-reality {
    position: relative;
    overflow: hidden;
    padding-top: 110px;
    background:
        var(--gd-cream);
}
/* subtle grid */
.wgd-mechanical-reality::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            rgba(68,122,171,.028) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(68,122,171,.028) 1px,
            transparent 1px
        );
    background-size:
        60px 60px;
}
/* =========================================================
   HEADER
========================================================= */
.wgd-mechanical-head {
    position: relative;
    z-index: 4;
    margin-bottom: 70px;
}
.wgd-mechanical-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color:
        var(--gd-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.wgd-mechanical-kicker span {
    color:
        var(--gd-blue-dark);
}
.wgd-mechanical-kicker i {
    width: 55px;
    height: 2px;
    background:
        var(--gd-copper);
}
/* =========================================================
   TITLE
========================================================= */
.wgd-mechanical-head h2 {
    margin: 0;
    max-width: 950px;
    color:
        var(--gd-dark);
    font-size:
        clamp(48px,5.4vw,84px);
    line-height: .87;
    font-weight: 900;
    letter-spacing: -5px;
    text-transform: uppercase;
}
.wgd-mechanical-head h2 strong {
    display: block;
    margin-top: 8px;
    color:
        var(--gd-copper);
    font-size: .67em;
    line-height: 1;
    letter-spacing: -2px;
}
.wgd-mechanical-head h2 em {
    color:
        var(--gd-blue-dark);
    font-style: normal;
}
/* =========================================================
   NOTE
========================================================= */
.wgd-mechanical-note {
    padding:
        20px 0 0 25px;
    border-left:
        3px solid var(--gd-blue);
}
.wgd-mechanical-note span {
    display: block;
    margin-bottom: 12px;
    color:
        var(--gd-blue-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.wgd-mechanical-note p {
    margin: 0;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.8;
}
/* =========================================================
   BOARD
========================================================= */
.wgd-mechanical-board {
    position: relative;
    z-index: 4;
    padding:
        60px 0 80px;
    background:
        var(--gd-white);
    border-top:
        1px solid rgba(17,24,28,.08);
}
/* =========================================================
   SHAFT
========================================================= */
.wgd-mechanical-shaft {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    transform:
        translateY(-50%);
}
.wgd-shaft-line {
    flex: 1;
    height: 4px;
    background:
        linear-gradient(
            90deg,
            var(--gd-blue-dark),
            var(--gd-copper)
        );
}
.wgd-shaft-center {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    margin:
        0 18px;
    color:
        var(--gd-dark);
    background:
        var(--gd-cream);
    border:
        2px solid var(--gd-copper);
    font-family:
        Georgia, serif;
    font-size: 30px;
    font-style: italic;
    box-shadow:
        0 15px 35px rgba(17,24,28,.10);
}
.wgd-shaft-end {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background:
        var(--gd-dark);
}
.wgd-shaft-end.left {
    border-radius:
        0 50% 50% 0;
}
.wgd-shaft-end.right {
    border-radius:
        50% 0 0 50%;
}
/* =========================================================
   GRID
========================================================= */
.wgd-mechanical-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        repeat(5,1fr);
    grid-template-rows:
        280px 280px;
    column-gap: 22px;
}
/* =========================================================
   ITEM
========================================================= */
.wgd-mechanical-item {
    position: relative;
    padding:
        24px 20px;
    transition:
        .35s ease;
}
/* vertical connector */
.wgd-mechanical-item::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    height: 58px;
    transform:
        translateX(-50%);
    background:
        rgba(68,122,171,.28);
}
.item-top {
    align-self: start;
    border-top:
        3px solid var(--gd-copper);
}
.item-top::before {
    bottom: -58px;
}
.item-bottom {
    align-self: end;
    border-bottom:
        3px solid var(--gd-blue-dark);
}
.item-bottom::before {
    top: -58px;
}
/* =========================================================
   POINT
========================================================= */
.wgd-mechanical-point {
    position: absolute;
    left: 50%;
    width: 13px;
    height: 13px;
    transform:
        translateX(-50%) rotate(45deg);
    background:
        var(--gd-blue-dark);
    border:
        3px solid var(--gd-white);
    box-shadow:
        0 0 0 1px rgba(68,122,171,.24);
}
.item-top
.wgd-mechanical-point {
    bottom: -66px;
}
.item-bottom
.wgd-mechanical-point {
    top: -66px;
}
/* =========================================================
   ITEM NUMBER
========================================================= */
.wgd-mechanical-number {
    display: block;
    margin-bottom: 15px;
    color:
        var(--gd-blue-dark);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
}
/* =========================================================
   ITEM TITLE
========================================================= */
.wgd-mechanical-item h3 {
    margin:
        0 0 12px;
    color:
        var(--gd-dark);
    font-size:
        clamp(22px,2vw,30px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -1.3px;
    text-transform: uppercase;
}
.wgd-mechanical-item p {
    margin: 0;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.75;
}
/* hover */
.wgd-mechanical-item:hover {
    background:
        var(--gd-light);
    transform:
        translateY(-5px);
}
.item-bottom:hover {
    transform:
        translateY(5px);
}
/* 09 spans center-ish */
.wgd-mechanical-item:nth-child(9) {
    grid-column:
        5 / 6;
    grid-row:
        1 / 2;
}
/* =========================================================
   BOTTOM
========================================================= */
.wgd-mechanical-bottom {
    position: relative;
    z-index: 5;
    padding:
        38px 0;
    background:
        var(--gd-dark);
}
/* =========================================================
   BOTTOM TITLE
========================================================= */
.wgd-mechanical-bottom-title > span {
    display: block;
    margin-bottom: 8px;
    color:
        var(--gd-blue-light);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
.wgd-mechanical-bottom-title strong {
    color:
        var(--gd-white);
    font-size: 18px;
    line-height: 1.15;
    font-weight: 900;
    text-transform: uppercase;
}
.wgd-mechanical-bottom-title em {
    display: block;
    color:
        var(--gd-copper-light);
    font-style: normal;
}
/* =========================================================
   COMPONENTS
========================================================= */
.wgd-mechanical-components {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
.wgd-mechanical-components span {
    position: relative;
    padding:
        9px 15px;
    color:
        rgba(255,255,255,.72);
    font-size: 14px;
    font-weight: 800;
    border:
        1px solid rgba(255,255,255,.10);
    transition:
        .3s ease;
}
.wgd-mechanical-components span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -5px;
    width: 8px;
    height: 8px;
    transform:
        translateY(-50%) rotate(45deg);
    background:
        var(--gd-copper);
}
.wgd-mechanical-components span:hover {
    color:
        var(--gd-white);
    border-color:
        rgba(120,169,220,.35);
    background:
        rgba(120,169,220,.06);
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .wgd-mechanical-reality {
        padding-top: 80px;
    }
    .wgd-mechanical-board {
        padding:
            55px 0;
    }
    .wgd-mechanical-shaft {
        display: none;
    }
    .wgd-mechanical-grid {
        grid-template-columns:
            repeat(2,1fr);
        grid-template-rows:
            auto;
        gap: 20px;
    }
    .wgd-mechanical-item,
    .item-top,
    .item-bottom {
        align-self: stretch;
        padding:
            28px 24px;
        border:
            1px solid rgba(17,24,28,.08);
        border-top:
            3px solid var(--gd-copper);
    }
    .wgd-mechanical-item::before,
    .wgd-mechanical-point {
        display: none;
    }
    .wgd-mechanical-item:nth-child(9) {
        grid-column: auto;
        grid-row: auto;
    }
    .item-top:hover,
    .item-bottom:hover {
        transform:
            translateY(-4px);
    }
    .wgd-mechanical-components {
        justify-content: flex-start;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    .wgd-mechanical-reality {
        padding-top: 60px;
    }
    .wgd-mechanical-head {
        margin-bottom: 40px;
    }
    .wgd-mechanical-head h2 {
        font-size: 40px;
        letter-spacing: -3px;
    }
    .wgd-mechanical-head h2 strong {
        font-size: 29px;
        letter-spacing: -1px;
    }
    .wgd-mechanical-grid {
        grid-template-columns:
            1fr;
    }
    .wgd-mechanical-item {
        padding:
            25px 20px;
    }
    .wgd-mechanical-item h3 {
        font-size: 24px;
    }
    .wgd-mechanical-components span {
        font-size: 13px;
    }
}
/* =========================================================
   SIMPLE MECHANICAL SECTION
========================================================= */
.wgd-mechanical-clean {
    position: relative;
    overflow: hidden;
    padding-top: 105px;
    background:
        var(--gd-cream);
}
/* subtle background lines */
.wgd-mechanical-clean::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            rgba(68,122,171,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(68,122,171,.025) 1px,
            transparent 1px
        );
    background-size:
        60px 60px;
}
/* =========================================================
   HEADER
========================================================= */
.wgd-mechanical-clean-head {
    position: relative;
    z-index: 2;
    margin-bottom: 60px;
}
.wgd-mechanical-clean-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color:
        var(--gd-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.wgd-mechanical-clean-kicker span {
    color:
        var(--gd-blue-dark);
}
.wgd-mechanical-clean-kicker i {
    width: 55px;
    height: 2px;
    background:
        var(--gd-copper);
}
/* =========================================================
   TITLE
========================================================= */
.wgd-mechanical-clean h2 {
    margin: 0;
    max-width: 950px;
    color:
        var(--gd-dark);
    font-size:
        clamp(48px,5.3vw,82px);
    line-height: .88;
    font-weight: 900;
    letter-spacing: -5px;
    text-transform: uppercase;
}
.wgd-mechanical-clean h2 strong {
    display: block;
    margin-top: 8px;
    color:
        var(--gd-copper);
    font-size: .68em;
    line-height: 1;
    letter-spacing: -2px;
}
.wgd-mechanical-clean h2 em {
    color:
        var(--gd-blue-dark);
    font-style: normal;
}
/* =========================================================
   INTRO
========================================================= */
.wgd-mechanical-clean-intro {
    margin: 0;
    padding-left: 24px;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.85;
    border-left:
        2px solid var(--gd-blue);
}
/* =========================================================
   LIST
========================================================= */
.wgd-mechanical-clean-list {
    position: relative;
    z-index: 3;
    margin-bottom: 80px;
    background:
        rgba(255,255,255,.75);
    border-top:
        1px solid rgba(17,24,28,.10);
}
/* =========================================================
   ROW
========================================================= */
.wgd-mechanical-clean-row {
    position: relative;
    display: grid;
    grid-template-columns:
        60px 220px 1fr 1.8fr;
    align-items: center;
    gap: 22px;
    min-height: 96px;
    padding:
        22px 25px;
    border-bottom:
        1px solid rgba(17,24,28,.09);
    transition:
        background .3s ease;
}
.wgd-mechanical-clean-row:hover {
    background:
        var(--gd-white);
}
/* =========================================================
   NUMBER
========================================================= */
.wgd-mechanical-clean-row > span {
    color:
        var(--gd-blue-dark);
    font-size: 13px;
    font-weight: 900;
}
/* =========================================================
   TITLE
========================================================= */
.wgd-mechanical-clean-row h3 {
    margin: 0;
    color:
        var(--gd-dark);
    font-size: 20px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -.8px;
    text-transform: uppercase;
}
/* =========================================================
   CONNECTOR LINE
========================================================= */
.wgd-mechanical-clean-row > i {
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    background:
        rgba(17,24,28,.14);
}
.wgd-mechanical-clean-row > i::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    transform:
        translateY(-50%) rotate(45deg);
    background:
        var(--gd-copper);
}
.wgd-mechanical-clean-row > i::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    transform:
        translateY(-50%) rotate(45deg);
    background:
        var(--gd-blue);
}
/* =========================================================
   TEXT
========================================================= */
.wgd-mechanical-clean-row p {
    margin: 0;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.75;
}
/* =========================================================
   FINAL POINT
========================================================= */
.wgd-mechanical-clean-final {
    position: relative;
    z-index: 4;
    padding:
        48px 0;
    background:
        var(--gd-dark);
}
.wgd-mechanical-clean-final::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 28%;
    height: 3px;
    background:
        var(--gd-blue);
}
.wgd-mechanical-clean-final::after {
    content: "";
    position: absolute;
    top: 0;
    left: 28%;
    width: 10%;
    height: 3px;
    background:
        var(--gd-copper);
}
/* =========================================================
   FINAL NUMBER
========================================================= */
.wgd-mechanical-clean-final-num {
    color:
        rgba(168,201,232,.20);
    font-size:
        clamp(65px,6vw,100px);
    line-height: .8;
    font-weight: 900;
}
/* =========================================================
   FINAL TITLE
========================================================= */
.wgd-mechanical-clean-final h3 {
    margin: 0;
    color:
        var(--gd-white);
    font-size:
        clamp(30px,3vw,46px);
    line-height: .95;
    font-weight: 900;
    letter-spacing: -2px;
    text-transform: uppercase;
}
.wgd-mechanical-clean-final h3 strong {
    display: block;
    color:
        var(--gd-copper-light);
}
/* =========================================================
   FINAL TEXT
========================================================= */
.wgd-mechanical-clean-final p {
    margin: 0;
    max-width: 620px;
    color:
        rgba(255,255,255,.72);
    font-size: 14px;
    line-height: 1.85;
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .wgd-mechanical-clean {
        padding-top: 80px;
    }
    .wgd-mechanical-clean-row {
        grid-template-columns:
            50px 190px 1fr;
    }
    .wgd-mechanical-clean-row > i {
        display: none;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    .wgd-mechanical-clean {
        padding-top: 60px;
    }
    .wgd-mechanical-clean-head {
        margin-bottom: 40px;
    }
    .wgd-mechanical-clean h2 {
        font-size: 40px;
        letter-spacing: -3px;
    }
    .wgd-mechanical-clean h2 strong {
        font-size: 29px;
        letter-spacing: -1px;
    }
    .wgd-mechanical-clean-row {
        grid-template-columns:
            38px 1fr;
        gap:
            7px 12px;
        min-height: auto;
        padding:
            22px 14px;
    }
    .wgd-mechanical-clean-row h3 {
        font-size: 18px;
    }
    .wgd-mechanical-clean-row p {
        grid-column:
            2 / 3;
    }
    .wgd-mechanical-clean-final {
        padding:
            42px 0;
    }
    .wgd-mechanical-clean-final-num {
        margin-bottom: 15px;
    }
}
.wgd-brands {
    position: relative;
    overflow: hidden;
    padding-top: 100px;
    background:
        var(--gd-cream);
}
/* subtle texture */
.wgd-brands::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            rgba(68,122,171,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(68,122,171,.025) 1px,
            transparent 1px
        );
    background-size:
        60px 60px;
}
/* =========================================================
   HEADER
========================================================= */
.wgd-brands-head {
    position: relative;
    z-index: 2;
    margin-bottom: 60px;
}
.wgd-brands-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color:
        var(--gd-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.wgd-brands-kicker span {
    color:
        var(--gd-blue-dark);
}
.wgd-brands-kicker i {
    width: 55px;
    height: 2px;
    background:
        var(--gd-copper);
}
.wgd-brands h2 {
    margin: 0;
    color:
        var(--gd-dark);
    font-size:
        clamp(48px,5vw,78px);
    line-height: .88;
    font-weight: 900;
    letter-spacing: -4px;
    text-transform: uppercase;
}
.wgd-brands h2 strong {
    display: block;
    color:
        var(--gd-copper);
    font-size: .72em;
    letter-spacing: -2px;
}
.wgd-brands h2 em {
    color:
        var(--gd-blue-dark);
    font-style: normal;
}
.wgd-brands-head p {
    margin: 0;
    padding-left: 24px;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.85;
    border-left:
        2px solid var(--gd-blue);
}
/* =========================================================
   BRAND STRIP
========================================================= */
.wgd-brands-strip {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        repeat(11, minmax(170px,1fr));
    width: 100%;
    overflow-x: auto;
    background:
        var(--gd-white);
    border-top:
        1px solid rgba(17,24,28,.08);
    border-bottom:
        1px solid rgba(17,24,28,.08);
    scrollbar-width: none;
}
.wgd-brands-strip::-webkit-scrollbar {
    display: none;
}
/* =========================================================
   BRAND ITEM
========================================================= */
.wgd-brand-item {
    position: relative;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    padding: 25px;
    border-right:
        1px solid rgba(17,24,28,.08);
    transition:
        .35s ease;
}
.wgd-brand-item span {
    color:
        var(--gd-blue-dark);
    font-size: 12px;
    font-weight: 900;
    opacity: .55;
}
.wgd-brand-item strong {
    color:
        var(--gd-dark);
    font-size: 19px;
    line-height: 1.1;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    transition:
        .35s ease;
}
/* bottom accent */
.wgd-brand-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    transform:
        translateX(-50%);
    background:
        var(--gd-copper);
    transition:
        width .35s ease;
}
/* hover */
.wgd-brand-item:hover {
    background:
        var(--gd-light);
}
.wgd-brand-item:hover strong {
    color:
        var(--gd-blue-dark);
    transform:
        translateY(-3px);
}
.wgd-brand-item:hover::after {
    width: 52%;
}
/* =========================================================
   BOTTOM
========================================================= */
.wgd-brands-bottom {
    position: relative;
    z-index: 4;
    padding:
        26px 0;
    background:
        var(--gd-dark);
}
.wgd-brands-bottom-inner {
    display: flex;
    align-items: center;
    gap: 18px;
}
.wgd-brands-mark {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    color:
        var(--gd-white);
    border:
        1px solid var(--gd-copper);
    font-family:
        Georgia, serif;
    font-size: 23px;
    font-style: italic;
}
.wgd-brands-bottom-inner > span {
    color:
        rgba(255,255,255,.68);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .wgd-brands {
        padding-top: 80px;
    }
    .wgd-brands-head {
        margin-bottom: 45px;
    }
    .wgd-brands-head p {
        padding-left: 0;
        padding-top: 18px;
        border-left: 0;
        border-top:
            2px solid var(--gd-blue);
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    .wgd-brands {
        padding-top: 60px;
    }
    .wgd-brands h2 {
        font-size: 40px;
        letter-spacing: -3px;
    }
    .wgd-brands h2 strong {
        font-size: 30px;
        letter-spacing: -1px;
    }
    .wgd-brands-strip {
        grid-template-columns:
            repeat(11, 145px);
    }
    .wgd-brand-item {
        min-height: 125px;
        padding:
            20px 14px;
    }
    .wgd-brand-item strong {
        font-size: 16px;
    }
    .wgd-brands-bottom-inner {
        align-items: flex-start;
    }
}
/* =========================================================
   FAQ WITH BACKGROUND IMAGE
========================================================= */
.wgd-faq-image {
    position: relative;
    min-height: 900px;
    overflow: hidden;
    padding:
        105px 0 0;
    background:
        var(--gd-dark);
}
/* =========================================================
   BACKGROUND
========================================================= */
.wgd-faq-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform:
        scale(1.02);
    transition:
        transform 8s ease;
}
.wgd-faq-image:hover
.wgd-faq-bg {
    transform:
        scale(1.07);
}
/* =========================================================
   OVERLAY
========================================================= */
.wgd-faq-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(5,7,8,.96) 0%,
            rgba(5,7,8,.90) 34%,
            rgba(5,7,8,.70) 68%,
            rgba(5,7,8,.56) 100%
        ),
        linear-gradient(
            180deg,
            rgba(5,7,8,.20),
            rgba(5,7,8,.78)
        );
}
/* subtle blue lighting */
.wgd-faq-image::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -190px;
    right: 7%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background:
        rgba(120,169,220,.12);
    filter:
        blur(110px);
    pointer-events: none;
}
/* copper accent */
.wgd-faq-image::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    left: 7%;
    width: 125px;
    height: 4px;
    background:
        var(--gd-copper);
}
/* =========================================================
   HEADER
========================================================= */
.wgd-faq-header {
    position: relative;
    z-index: 5;
    margin-bottom: 70px;
}
/* =========================================================
   KICKER
========================================================= */
.wgd-faq-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color:
        rgba(255,255,255,.65);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.wgd-faq-kicker span {
    color:
        var(--gd-blue-light);
}
.wgd-faq-kicker i {
    width: 55px;
    height: 2px;
    background:
        var(--gd-copper);
}
/* =========================================================
   TITLE
========================================================= */
.wgd-faq-header h2 {
    max-width: 850px;
    margin: 0;
    color:
        var(--gd-white);
    font-size:
        clamp(48px,5.2vw,80px);
    line-height: .88;
    font-weight: 900;
    letter-spacing: -4px;
    text-transform: uppercase;
}
.wgd-faq-header h2 strong {
    display: block;
    margin-top: 7px;
    color:
        var(--gd-copper-light);
    font-size: .72em;
    line-height: 1;
    letter-spacing: -2px;
}
.wgd-faq-header h2 em {
    color:
        var(--gd-blue-light);
    font-style: normal;
}
/* =========================================================
   SIDE NOTE
========================================================= */
.wgd-faq-side-note {
    max-width: 420px;
    margin-left: auto;
    padding:
        20px 0 4px 25px;
    border-left:
        2px solid var(--gd-blue);
}
.wgd-faq-side-note span {
    display: block;
    margin-bottom: 11px;
    color:
        var(--gd-blue-light);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.wgd-faq-side-note p {
    margin: 0;
    color:
        rgba(255,255,255,.72);
    font-size: 14px;
    line-height: 1.8;
}
/* =========================================================
   FAQ LIST
========================================================= */
.wgd-faq-list {
    position: relative;
    z-index: 5;
    width: 78%;
    margin-left: auto;
    background:
        rgba(7,11,13,.58);
    backdrop-filter:
        blur(13px);
    -webkit-backdrop-filter:
        blur(13px);
    border-top:
        1px solid rgba(255,255,255,.15);
}
/* =========================================================
   FAQ ROW
========================================================= */
.wgd-faq-row {
    position: relative;
    display: grid;
    grid-template-columns:
        90px 1fr 35px;
    align-items: start;
    gap: 25px;
    padding:
        31px 30px;
    border-bottom:
        1px solid rgba(255,255,255,.12);
    transition:
        background .35s ease,
        padding .35s ease;
}
/* hover left blue edge */
.wgd-faq-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    transform:
        translateY(-50%);
    background:
        var(--gd-blue);
    transition:
        height .35s ease;
}
.wgd-faq-row:hover {
    padding-left:
        40px;
    background:
        rgba(255,255,255,.055);
}
.wgd-faq-row:hover::before {
    height:
        calc(100% - 30px);
}
/* =========================================================
   NUMBER
========================================================= */
.wgd-faq-number {
    color:
        var(--gd-copper-light);
    font-size:
        28px;
    line-height: 1;
    font-weight: 900;
}
/* =========================================================
   QUESTION
========================================================= */
.wgd-faq-content h3 {
    max-width: 820px;
    margin:
        0 0 13px;
    color:
        var(--gd-white);
    font-size:
        clamp(21px,2vw,28px);
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -.9px;
}
/* =========================================================
   ANSWER
========================================================= */
.wgd-faq-content p {
    max-width: 850px;
    margin: 0;
    color:
        rgba(255,255,255,.68);
    font-size: 14px;
    line-height: 1.8;
}
/* =========================================================
   MARKER
========================================================= */
.wgd-faq-marker {
    position: relative;
    width: 28px;
    height: 28px;
    margin-top: 2px;
    border:
        1px solid rgba(168,201,232,.45);
    transform:
        rotate(45deg);
    transition:
        .35s ease;
}
.wgd-faq-marker::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    transform:
        translate(-50%,-50%);
    background:
        var(--gd-blue);
}
.wgd-faq-row:hover
.wgd-faq-marker {
    border-color:
        var(--gd-copper);
    transform:
        rotate(135deg);
}
/* =========================================================
   BOTTOM BAR
========================================================= */
.wgd-faq-bottom {
    position: relative;
    z-index: 6;
    margin-top: 70px;
    padding:
        27px 0;
    background:
        rgba(5,7,8,.94);
    border-top:
        1px solid rgba(255,255,255,.10);
}
/* =========================================================
   BOTTOM INNER
========================================================= */
.wgd-faq-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}
/* =========================================================
   BRAND
========================================================= */
.wgd-faq-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}
.wgd-faq-brand > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color:
        var(--gd-white);
    border:
        1px solid var(--gd-copper);
    font-family:
        Georgia, serif;
    font-size: 23px;
    font-style: italic;
}
.wgd-faq-brand div {
    color:
        rgba(255,255,255,.55);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 800;
    text-transform: uppercase;
}
.wgd-faq-brand strong {
    display: block;
    color:
        var(--gd-white);
}
/* =========================================================
   BOTTOM ITEMS
========================================================= */
.wgd-faq-bottom-items {
    display: flex;
    align-items: center;
    gap: 15px;
}
.wgd-faq-bottom-items span {
    color:
        rgba(255,255,255,.66);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}
.wgd-faq-bottom-items i {
    width: 25px;
    height: 1px;
    background:
        var(--gd-blue);
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .wgd-faq-image {
        padding-top:
            80px;
    }
    .wgd-faq-side-note {
        max-width: 100%;
        margin-left: 0;
    }
    .wgd-faq-list {
        width: 100%;
    }
    .wgd-faq-row {
        grid-template-columns:
            65px 1fr 30px;
    }
    .wgd-faq-bottom-inner {
        align-items: flex-start;
        flex-direction: column;
    }
    .wgd-faq-bottom-items {
        flex-wrap: wrap;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    .wgd-faq-image {
        padding-top:
            60px;
    }
    .wgd-faq-header {
        margin-bottom:
            40px;
    }
    .wgd-faq-header h2 {
        font-size:
            40px;
        letter-spacing:
            -3px;
    }
    .wgd-faq-header h2 strong {
        font-size:
            29px;
        letter-spacing:
            -1px;
    }
    .wgd-faq-row {
        grid-template-columns:
            42px 1fr;
        gap:
            10px 12px;
        padding:
            25px 18px;
    }
    .wgd-faq-number {
        font-size:
            20px;
    }
    .wgd-faq-content h3 {
        font-size:
            19px;
    }
    .wgd-faq-content p {
        font-size:
            14px;
    }
    .wgd-faq-marker {
        display:
            none;
    }
    .wgd-faq-row:hover {
        padding-left:
            23px;
    }
    .wgd-faq-bottom {
        margin-top:
            45px;
    }
    .wgd-faq-bottom-items i {
        display:
            none;
    }
}
/* =========================================================
   LIGHT CTA
========================================================= */
.wgd-light-cta {
    position: relative;
    overflow: hidden;
    padding:
        105px 0 0;
    background:
        var(--gd-cream);
}
/* =========================================================
   SUBTLE TECHNICAL BACKGROUND
========================================================= */
.wgd-light-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            rgba(68,122,171,.028) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(68,122,171,.028) 1px,
            transparent 1px
        );
    background-size:
        60px 60px;
}
/* small copper line */
.wgd-light-cta::after {
    content: "";
    position: absolute;
    top: 0;
    left: 7%;
    width: 120px;
    height: 4px;
    background:
        var(--gd-copper);
}
/* =========================================================
   WRAP
========================================================= */
.wgd-light-cta-wrap {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        minmax(0,1.25fr)
        minmax(350px,.75fr);
    gap: 90px;
    align-items: center;
    padding-bottom: 90px;
}
/* =========================================================
   KICKER
========================================================= */
.wgd-light-cta-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color:
        var(--gd-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.wgd-light-cta-kicker > span {
    color:
        var(--gd-blue-dark);
}
.wgd-light-cta-kicker i {
    width: 52px;
    height: 2px;
    background:
        var(--gd-copper);
}
/* =========================================================
   HEADING
========================================================= */
.wgd-light-cta h2 {
    max-width: 760px;
    margin: 0;
    color:
        var(--gd-dark);
    font-size:
        clamp(50px,5.5vw,84px);
    line-height: .87;
    font-weight: 900;
    letter-spacing: -5px;
    text-transform: uppercase;
}
.wgd-light-cta h2 strong {
    display: block;
    margin-top: 9px;
    color:
        var(--gd-copper);
    font-size: .68em;
    line-height: 1;
    letter-spacing: -2px;
}
.wgd-light-cta h2 em {
    color:
        var(--gd-blue-dark);
    font-style: normal;
}
/* =========================================================
   PARAGRAPH
========================================================= */
.wgd-light-cta-content p {
    max-width: 660px;
    margin:
        28px 0 0;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.85;
}
/* =========================================================
   ACTION SIDE
========================================================= */
.wgd-light-cta-action {
    position: relative;
    padding:
        18px 0 18px 38px;
    border-left:
        1px solid rgba(17,24,28,.14);
}
/* tiny blue marker */
.wgd-light-cta-action::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 18px;
    width: 3px;
    height: 72px;
    background:
        var(--gd-blue);
}
/* =========================================================
   CODE
========================================================= */
.wgd-light-cta-code {
    display: block;
    margin-bottom: 24px;
    color:
        var(--gd-blue-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
/* =========================================================
   DECORATIVE RULE
========================================================= */
.wgd-light-cta-rule {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 390px;
    margin-bottom: 28px;
}
.wgd-light-cta-rule > span {
    flex: 1;
    height: 1px;
    background:
        rgba(17,24,28,.18);
}
.wgd-light-cta-rule i {
    width: 10px;
    height: 10px;
    margin-left: -1px;
    background:
        var(--gd-copper);
    transform:
        rotate(45deg);
}
/* =========================================================
   LABEL
========================================================= */
.wgd-light-cta-label {
    display: block;
    margin-bottom: 10px;
    color:
        var(--gd-muted);
    font-size: 13px;
    font-weight: 800;
}
/* =========================================================
   PHONE
========================================================= */
.wgd-light-cta-phone {
    display: inline-block;
    margin-bottom: 30px;
    color:
        var(--gd-dark);
    font-size:
        clamp(29px,3vw,42px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -2px;
    text-decoration: none;
    transition:
        color .3s ease;
}
.wgd-light-cta-phone:hover {
    color:
        var(--gd-blue-dark);
}
/* =========================================================
   BUTTONS
========================================================= */
.wgd-light-cta-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
/* main */
.wgd-light-cta-main {
    display: inline-flex;
    align-items: center;
    gap: 30px;
    min-height: 56px;
    padding:
        0 8px 0 22px;
    color:
        var(--gd-white);
    background:
        var(--gd-dark);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .7px;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        .35s ease;
}
.wgd-light-cta-main > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color:
        var(--gd-white);
    background:
        var(--gd-copper);
    font-size: 20px;
    transition:
        .35s ease;
}
.wgd-light-cta-main:hover {
    color:
        var(--gd-white);
    background:
        var(--gd-blue-dark);
}
.wgd-light-cta-main:hover > span {
    transform:
        translateX(3px);
}
/* call */
.wgd-light-cta-call {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding:
        0 22px;
    color:
        var(--gd-dark);
    background:
        transparent;
    border:
        1px solid rgba(17,24,28,.22);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .7px;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        .3s ease;
}
.wgd-light-cta-call:hover {
    color:
        var(--gd-blue-dark);
    border-color:
        var(--gd-blue);
    background:
        rgba(120,169,220,.08);
}
/* =========================================================
   BOTTOM RAIL
========================================================= */
.wgd-light-cta-bottom {
    position: relative;
    z-index: 4;
    border-top:
        1px solid rgba(17,24,28,.10);
    background:
        rgba(255,255,255,.58);
}
.wgd-light-cta-bottom-inner {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}
/* =========================================================
   BRAND
========================================================= */
.wgd-light-cta-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.wgd-light-cta-brand > span {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    color:
        var(--gd-dark);
    background:
        var(--gd-white);
    border:
        1px solid var(--gd-copper);
    font-family:
        Georgia, serif;
    font-size: 23px;
    font-style: italic;
}
.wgd-light-cta-brand strong {
    color:
        var(--gd-dark);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}
/* =========================================================
   SERVICE LINE
========================================================= */
.wgd-light-cta-services {
    display: flex;
    align-items: center;
    gap: 14px;
}
.wgd-light-cta-services span {
    color:
        var(--gd-muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}
.wgd-light-cta-services i {
    width: 5px;
    height: 5px;
    background:
        var(--gd-blue);
    transform:
        rotate(45deg);
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .wgd-light-cta {
        padding-top:
            80px;
    }
    .wgd-light-cta-wrap {
        grid-template-columns:
            1fr;
        gap: 50px;
        padding-bottom:
            65px;
    }
    .wgd-light-cta-action {
        padding:
            30px 0 0;
        border-left: 0;
        border-top:
            1px solid rgba(17,24,28,.14);
    }
    .wgd-light-cta-action::before {
        top: -2px;
        left: 0;
        width: 80px;
        height: 3px;
    }
    .wgd-light-cta-bottom-inner {
        padding:
            25px 0;
        align-items: flex-start;
        flex-direction: column;
    }
    .wgd-light-cta-services {
        flex-wrap: wrap;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    .wgd-light-cta {
        padding-top:
            60px;
    }
    .wgd-light-cta h2 {
        font-size:
            40px;
        letter-spacing:
            -3px;
    }
    .wgd-light-cta h2 strong {
        font-size:
            29px;
        letter-spacing:
            -1px;
    }
    .wgd-light-cta-wrap {
        gap:
            40px;
        padding-bottom:
            50px;
    }
    .wgd-light-cta-phone {
        font-size:
            29px;
        letter-spacing:
            -1px;
    }
    .wgd-light-cta-buttons {
        align-items:
            stretch;
        flex-direction:
            column;
    }
    .wgd-light-cta-main,
    .wgd-light-cta-call {
        width:
            100%;
    }
    .wgd-light-cta-main {
        justify-content:
            space-between;
    }
    .wgd-light-cta-services {
        gap:
            10px;
    }
    .wgd-light-cta-services span {
        font-size:
            12px;
    }
}
/* =========================================================
   CONTACT V2
========================================================= */
.wgd-contact-v2 {
  position: relative;
  overflow: hidden;
  padding-top: 105px;
  background:
    var(--gd-cream);
}
.wgd-contact-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      rgba(68,122,171,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(68,122,171,.025) 1px,
      transparent 1px
    );
  background-size:
    58px 58px;
}
/* =========================================================
   HEADER
========================================================= */
.wgd-contact-v2-head {
  position: relative;
  z-index: 3;
  margin-bottom: 60px;
}
.wgd-contact-v2-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color:
    var(--gd-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}
.wgd-contact-v2-kicker span {
  color:
    var(--gd-blue-dark);
}
.wgd-contact-v2-kicker i {
  width: 55px;
  height: 2px;
  background:
    var(--gd-copper);
}
.wgd-contact-v2 h2 {
  max-width: 800px;
  margin: 0;
  color:
    var(--gd-dark);
  font-size:
    clamp(48px,5.2vw,80px);
  line-height: .88;
  font-weight: 900;
  letter-spacing: -4px;
  text-transform: uppercase;
}
.wgd-contact-v2 h2 strong {
  display: block;
  margin-top: 8px;
  color:
    var(--gd-copper);
  font-size: .7em;
  line-height: 1;
}
.wgd-contact-v2 h2 em {
  color:
    var(--gd-blue-dark);
  font-style: normal;
}
.wgd-contact-v2-head p {
  margin: 0;
  padding-left: 24px;
  color:
    var(--gd-muted);
  font-size: 14px;
  line-height: 1.85;
  border-left:
    2px solid var(--gd-blue);
}
/* =========================================================
   DATA
========================================================= */
.wgd-contact-v2-data {
  position: relative;
  height: 100%;
  padding:
    42px 35px;
  color:
    var(--gd-white);
  background:
    var(--gd-dark);
  border-top:
    4px solid var(--gd-blue);
}
.wgd-contact-v2-data-code {
  display: block;
  margin-bottom: 12px;
  color:
    var(--gd-blue-light);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.4px;
}
.wgd-contact-v2-data h3 {
  margin:
    0 0 35px;
  color:
    var(--gd-white);
  font-size:
    38px;
  line-height: .95;
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: uppercase;
}
.wgd-contact-v2-data h3 strong {
  display: block;
  color:
    var(--gd-copper-light);
}
/* =========================================================
   INFO ROW
========================================================= */
.wgd-contact-v2-info {
  display: grid;
  grid-template-columns:
    38px 1fr;
  gap: 15px;
  padding:
    21px 0;
  border-top:
    1px solid rgba(255,255,255,.10);
}
.wgd-contact-v2-info-num {
  color:
    var(--gd-blue-light);
  font-size: 12px;
  font-weight: 900;
}
.wgd-contact-v2-info span {
  display: block;
  margin-bottom: 5px;
  color:
    rgba(255,255,255,.48);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.wgd-contact-v2-info a,
.wgd-contact-v2-info strong {
  color:
    var(--gd-white);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.wgd-contact-v2-info a:hover {
  color:
    var(--gd-copper-light);
}
/* =========================================================
   ZIP
========================================================= */
.wgd-contact-v2-zip {
  margin-top: 12px;
  padding-top: 25px;
  border-top:
    1px solid rgba(255,255,255,.10);
}
.wgd-contact-v2-zip span {
  display: block;
  margin-bottom: 8px;
  color:
    var(--gd-copper-light);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.3px;
}
.wgd-contact-v2-zip strong {
  color:
    var(--gd-white);
  font-size: 15px;
  font-weight: 900;
}
/* =========================================================
   FORM BOX
========================================================= */
.wgd-contact-v2-formbox {
  height: 100%;
  padding:
    42px;
  background:
    var(--gd-white);
  border:
    1px solid rgba(17,24,28,.08);
}
/* =========================================================
   FORM HEAD
========================================================= */
.wgd-contact-v2-formhead {
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-bottom:
    1px solid rgba(17,24,28,.10);
}
.wgd-contact-v2-formhead > span {
  display: block;
  margin-bottom: 10px;
  color:
    var(--gd-blue-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.4px;
}
.wgd-contact-v2-formhead h3 {
  margin: 0;
  color:
    var(--gd-dark);
  font-size:
    clamp(30px,3vw,44px);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: uppercase;
}
.wgd-contact-v2-formhead h3 strong {
  display: block;
  color:
    var(--gd-copper);
}
/* =========================================================
   FORM GRID
========================================================= */
.wgd-fcf-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.cc-fcf-grid {
  display: grid;
  grid-template-columns:
    repeat(2,1fr);
  gap: 14px;
}
.cc-fcf-field {
  position: relative;
}
.cc-fcf-field-wide {
  grid-column:
    1 / -1;
}
.cc-fcf-field > i,
.cc-fcf-textarea-wrap > i {
  position: absolute;
  z-index: 2;
  left: 17px;
  top: 50%;
  transform:
    translateY(-50%);
  color:
    var(--gd-copper);
  font-size: 14px;
  pointer-events: none;
}
/* =========================================================
   INPUTS
========================================================= */
.cc-fcf-field input,
.cc-fcf-date select,
.cc-fcf-date input,
.cc-fcf-schedule-block > select {
  width: 100%;
  min-height: 57px;
  padding:
    12px 15px;
  color:
    var(--gd-dark);
  background:
    var(--gd-cream);
  border:
    1px solid rgba(17,24,28,.10);
  border-radius: 0;
  outline: 0;
  font-size: 14px;
  transition:
    .3s ease;
}
.cc-fcf-field input {
  padding-left:
    45px;
}
.cc-fcf-field input:focus,
.cc-fcf-date select:focus,
.cc-fcf-date input:focus,
.cc-fcf-schedule-block > select:focus,
.cc-fcf-textarea-wrap textarea:focus {
  background:
    var(--gd-white);
  border-color:
    var(--gd-blue);
  box-shadow:
    inset 3px 0 0 var(--gd-copper);
}
/* =========================================================
   TEXTAREA
========================================================= */
.cc-fcf-textarea-wrap {
  position: relative;
  margin-top: 14px;
}
.cc-fcf-textarea-wrap > i {
  top: 22px;
  transform: none;
}
.cc-fcf-textarea-wrap textarea {
  width: 100%;
  min-height: 130px;
  padding:
    17px 17px 17px 46px;
  color:
    var(--gd-dark);
  background:
    var(--gd-cream);
  border:
    1px solid rgba(17,24,28,.10);
  border-radius: 0;
  outline: 0;
  resize: vertical;
  font-size: 14px;
  line-height: 1.7;
}
/* =========================================================
   SCHEDULE
========================================================= */
.cc-fcf-schedule {
  display: grid;
  grid-template-columns:
    1.5fr .7fr;
  gap: 20px;
  margin-top: 25px;
  padding-top: 25px;
  border-top:
    1px solid rgba(17,24,28,.10);
}
.cc-fcf-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color:
    var(--gd-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.cc-fcf-label i {
  color:
    var(--gd-blue-dark);
}
.cc-fcf-date {
  display: grid;
  grid-template-columns:
    1.5fr .65fr .8fr;
  gap: 8px;
}
/* =========================================================
   BUTTON
========================================================= */
.cc-fcf-submit {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 25px;
  padding:
    8px 9px 8px 24px;
  color:
    var(--gd-white);
  background:
    var(--gd-dark);
  border: 0;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    .35s ease;
}
.cc-fcf-submit > i {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  color:
    var(--gd-white);
  background:
    var(--gd-copper);
  transition:
    .35s ease;
}
.cc-fcf-submit:hover {
  background:
    var(--gd-blue-dark);
}
.cc-fcf-submit:hover > i {
  transform:
    translateX(3px);
}
/* =========================================================
   MAP
========================================================= */
.wgd-contact-v2-map {
  position: relative;
  width: 100%;
  height: 500px;
  margin-top: 75px;
  overflow: hidden;
  background:
    var(--gd-light);
}
.wgd-contact-v2-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter:
    grayscale(.32)
    contrast(.95);
}
/* =========================================================
   MAP TAG
========================================================= */
.wgd-contact-v2-map-tag {
  position: absolute;
  left: 7%;
  bottom: 40px;
  padding:
    24px 28px;
  min-width: 260px;
  color:
    var(--gd-white);
  background:
    rgba(17,24,28,.94);
  border-left:
    4px solid var(--gd-blue);
}
.wgd-contact-v2-map-tag > span {
  display: block;
  margin-bottom: 7px;
  color:
    var(--gd-blue-light);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.3px;
}
.wgd-contact-v2-map-tag strong {
  display: block;
  color:
    var(--gd-white);
  font-size: 29px;
  line-height: .95;
  font-weight: 900;
  text-transform: uppercase;
}
.wgd-contact-v2-map-tag em {
  display: block;
  color:
    var(--gd-copper-light);
  font-style: normal;
}
.wgd-contact-v2-map-tag b {
  display: block;
  margin-top: 13px;
  color:
    rgba(255,255,255,.64);
  font-size: 13px;
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
  .wgd-contact-v2 {
    padding-top:
      80px;
  }
  .wgd-contact-v2-formbox {
    padding:
      36px 28px;
  }
  .cc-fcf-schedule {
    grid-template-columns:
      1fr;
  }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
  .wgd-contact-v2 {
    padding-top:
      60px;
  }
  .wgd-contact-v2 h2 {
    font-size:
      40px;
    letter-spacing:
      -3px;
  }
  .wgd-contact-v2 h2 strong {
    font-size:
      29px;
  }
  .wgd-contact-v2-data {
    padding:
      32px 22px;
  }
  .wgd-contact-v2-formbox {
    padding:
      30px 18px;
  }
  .cc-fcf-grid {
    grid-template-columns:
      1fr;
  }
  .cc-fcf-field-wide {
    grid-column:
      auto;
  }
  .cc-fcf-date {
    grid-template-columns:
      1fr;
  }
  .wgd-contact-v2-map {
    height:
      370px;
    margin-top:
      55px;
  }
  .wgd-contact-v2-map-tag {
    left:
      18px;
    right:
      18px;
    bottom:
      18px;
    min-width:
      0;
  }
}
/* =========================================================
   FOOTER
========================================================= */
.wgd-footer {
    position: relative;
    overflow: hidden;
    background:
        var(--gd-dark);
}
/* =========================================================
   TOP
========================================================= */
.wgd-footer-top {
    position: relative;
    padding:
        90px 0 75px;
    background:
        var(--gd-cream);
}
/* technical background */
.wgd-footer-top::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            rgba(68,122,171,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(68,122,171,.025) 1px,
            transparent 1px
        );
    background-size:
        60px 60px;
}
/* copper top line */
.wgd-footer-top::after {
    content: "";
    position: absolute;
    top: 0;
    left: 7%;
    width: 130px;
    height: 4px;
    background:
        var(--gd-copper);
}
/* =========================================================
   BRAND
========================================================= */
.wgd-footer-brand {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 22px;
}
.wgd-footer-mark {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color:
        var(--gd-dark);
    background:
        var(--gd-white);
    border:
        1px solid var(--gd-copper);
    font-family:
        Georgia, serif;
    font-size: 29px;
    font-style: italic;
}
.wgd-footer-brand-copy > span {
    display: block;
    margin-bottom: 3px;
    color:
        var(--gd-blue-dark);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}
.wgd-footer-brand-copy h2 {
    margin:
        0 0 20px;
    color:
        var(--gd-dark);
    font-size:
        clamp(35px,4vw,55px);
    line-height: .95;
    font-weight: 900;
    letter-spacing: -3px;
    text-transform: uppercase;
}
.wgd-footer-brand-copy p {
    max-width: 500px;
    margin: 0;
    color:
        var(--gd-muted);
    font-size: 14px;
    line-height: 1.85;
}
.wgd-footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}
.wgd-footer-social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color:
        var(--gd-white);
    background:
        var(--gd-blue-dark);
    border:
        1px solid var(--gd-copper);
    font-size: 15px;
    text-decoration: none;
    transition:
        color .3s ease,
        background .3s ease,
        transform .3s ease;
}
.wgd-footer-social a:hover {
    color:
        var(--gd-dark);
    background:
        var(--gd-copper);
    transform:
        translateY(-3px);
}
/* =========================================================
   FOOTER COLUMNS
========================================================= */
.wgd-footer-col,
.wgd-footer-location {
    position: relative;
    z-index: 2;
}
.wgd-footer-location {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}
.wgd-footer-location .wgd-footer-title,
.wgd-footer-location strong,
.wgd-footer-location em {
    flex: 0 0 100%;
}
.wgd-footer-title {
    display: block;
    margin-bottom: 22px;
    color:
        var(--gd-copper);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.wgd-footer-col a {
    position: relative;
    display: block;
    width: fit-content;
    margin-bottom: 11px;
    color:
        var(--gd-dark);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
    text-decoration: none;
    transition:
        color .3s ease,
        transform .3s ease;
}
.wgd-footer-services {
    display: flex;
    flex-wrap: wrap;
    column-gap: 22px;
}
.wgd-footer-services .wgd-footer-title {
    flex: 0 0 100%;
}
.wgd-footer-services a {
    flex: 0 0 calc(50% - 11px);
    width: auto;
}
@media (max-width: 575.98px) {
    .wgd-footer-services a {
        flex-basis: 100%;
    }
}.wgd-footer-col a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 1px;
    background:
        var(--gd-blue-dark);
    transition:
        width .3s ease;
}
.wgd-footer-col a:hover {
    color:
        var(--gd-blue-dark);
    transform:
        translateX(3px);
}
.wgd-footer-col a:hover::before {
    width: 100%;
}
/* =========================================================
   LOCATION
========================================================= */
.wgd-footer-location strong {
    display: block;
    color:
        var(--gd-dark);
    font-size: 29px;
    line-height: .95;
    font-weight: 900;
    letter-spacing: -1px;
    text-transform: uppercase;
}
.wgd-footer-location em {
    display: block;
    margin-top: 3px;
    color:
        var(--gd-blue-dark);
    font-size: 22px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}
.wgd-footer-zip {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding:
        8px 11px;
    color:
        var(--gd-dark);
    background:
        rgba(120,169,220,.10);
    border-left:
        3px solid var(--gd-copper);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .8px;
}
/* =========================================================
   CONTACT STRIP
========================================================= */
.wgd-footer-contact {
    position: relative;
    background:
        var(--gd-dark-soft);
    border-top:
        1px solid rgba(255,255,255,.08);
    border-bottom:
        1px solid rgba(255,255,255,.08);
}
.wgd-footer-contact-inner {
    display: grid;
    grid-template-columns:
        repeat(4,1fr);
}
/* =========================================================
   CONTACT ITEM
========================================================= */
.wgd-footer-contact-item {
    position: relative;
    min-height: 125px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding:
        25px 30px;
    border-right:
        1px solid rgba(255,255,255,.08);
    transition:
        background .3s ease;
}
.wgd-footer-contact-item:last-child {
    border-right: 0;
}
.wgd-footer-contact-item::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background:
        var(--gd-blue);
    transition:
        width .35s ease;
}
.wgd-footer-contact-item:hover {
    background:
        rgba(255,255,255,.025);
}
.wgd-footer-contact-item:hover::before {
    width: 100%;
}
.wgd-footer-contact-item > span {
    display: block;
    margin-bottom: 8px;
    color:
        var(--gd-blue-light);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.2px;
}
.wgd-footer-contact-item a,
.wgd-footer-contact-item strong {
    color:
        var(--gd-white);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 900;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.wgd-footer-contact-item a {
    transition:
        color .3s ease;
}
.wgd-footer-contact-item a:hover {
    color:
        var(--gd-copper-light);
}
/* =========================================================
   BOTTOM
========================================================= */
.wgd-footer-bottom {
    background:
        var(--gd-ink);
}
.wgd-footer-bottom-inner {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}
.wgd-footer-bottom p {
    margin: 0;
    color:
        rgba(255,255,255,.48);
    font-size: 13px;
    line-height: 1.6;
}
/* =========================================================
   BOTTOM LINKS
========================================================= */
.wgd-footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 14px;
}
.wgd-footer-bottom-links a {
    color:
        rgba(255,255,255,.58);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        color .3s ease;
}
.wgd-footer-bottom-links a:hover {
    color:
        var(--gd-blue-light);
}
.wgd-footer-bottom-links span {
    width: 5px;
    height: 5px;
    background:
        var(--gd-copper);
    transform:
        rotate(45deg);
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .wgd-footer-top {
        padding:
            70px 0 60px;
    }
    .wgd-footer-contact-inner {
        grid-template-columns:
            repeat(2,1fr);
    }
    .wgd-footer-contact-item {
        border-bottom:
            1px solid rgba(255,255,255,.08);
    }
    .wgd-footer-bottom-inner {
        padding:
            24px 0;
        align-items:
            flex-start;
        flex-direction:
            column;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    .wgd-footer-top {
        padding:
            55px 0 45px;
    }
    .wgd-footer-brand {
        flex-direction:
            column;
    }
    .wgd-footer-brand-copy h2 {
        font-size:
            37px;
        letter-spacing:
            -2px;
    }
    .wgd-footer-contact-inner {
        grid-template-columns:
            1fr;
    }
    .wgd-footer-contact-item {
        min-height:
            105px;
        padding:
            22px 18px;
        border-right:
            0;
    }
    .wgd-footer-bottom-links {
        align-items:
            flex-start;
        flex-wrap:
            wrap;
    }
}

/* =========================================================
   ABOUT
========================================================= */

.wgd-about {

    position: relative;

    overflow: hidden;

    background:
        var(--gd-cream);

}


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

.wgd-about-image {

    position: relative;

    width: 100%;
    height: 560px;

    overflow: hidden;

    background:
        var(--gd-dark);

}


.wgd-about-image img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1.2s ease;

}


.wgd-about:hover
.wgd-about-image img {

    transform:
        scale(1.025);

}


/* overlay */

.wgd-about-image-overlay {

    position: absolute;
    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(7,11,13,.72) 0%,
            rgba(7,11,13,.22) 46%,
            rgba(7,11,13,.10) 100%
        ),

        linear-gradient(
            0deg,
            rgba(7,11,13,.42) 0%,
            transparent 50%
        );

}


/* subtle sectional-door lines */

.wgd-about-image::before {

    content: "";

    position: absolute;
    z-index: 2;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            to bottom,
            transparent 24.8%,
            rgba(255,255,255,.12) 25%,
            transparent 25.2%,
            transparent 49.8%,
            rgba(255,255,255,.10) 50%,
            transparent 50.2%,
            transparent 74.8%,
            rgba(255,255,255,.10) 75%,
            transparent 75.2%
        );

}


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

.wgd-about-image .container {

    position: relative;

    height: 100%;

}


.wgd-about-image-label {

    position: absolute;
    z-index: 4;

    left: 12px;
    bottom: 45px;

    max-width: 520px;

    padding:
        25px 30px;

    color:
        var(--gd-white);

    background:
        rgba(17,24,28,.88);

    border-left:
        4px solid var(--gd-blue);

    backdrop-filter:
        blur(8px);

}


.wgd-about-image-label > span {

    display: block;

    margin-bottom: 9px;

    color:
        var(--gd-blue-light);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1.6px;

}


.wgd-about-image-label strong {

    display: block;

    color:
        var(--gd-white);

    font-size:
        clamp(28px,3.5vw,46px);

    line-height: .95;

    font-weight: 900;

    letter-spacing: -2px;

    text-transform: uppercase;

}


.wgd-about-image-label em {

    display: block;

    margin-top: 10px;

    color:
        var(--gd-copper-light);

    font-size: 13px;

    font-style: normal;

    font-weight: 800;

}


/* =========================================================
   BODY
========================================================= */

.wgd-about-body {

    position: relative;

    padding:
        95px 0 0;

}


/* background grid */

.wgd-about-body::before {

    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            rgba(68,122,171,.026) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(68,122,171,.026) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

}


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

.wgd-about-copy {

    position: relative;
    z-index: 2;

}


.wgd-about-kicker {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

    color:
        var(--gd-muted);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}


.wgd-about-kicker span {

    color:
        var(--gd-blue-dark);

}


.wgd-about-kicker i {

    width: 54px;
    height: 2px;

    background:
        var(--gd-copper);

}


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

.wgd-about h2 {

    max-width: 850px;

    margin:
        0 0 35px;

    color:
        var(--gd-dark);

    font-size:
        clamp(50px,5.3vw,82px);

    line-height: .88;

    font-weight: 900;

    letter-spacing: -4px;

    text-transform: uppercase;

}


.wgd-about h2 strong {

    display: block;

    margin-top: 8px;

    color:
        var(--gd-copper);

    font-size: .68em;

    line-height: 1;

    letter-spacing: -2px;

}


.wgd-about h2 em {

    color:
        var(--gd-blue-dark);

    font-style: normal;

}


/* =========================================================
   TEXT
========================================================= */

.wgd-about-text {

    max-width: 790px;

    display: grid;

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

    gap: 35px;

}


.wgd-about-text p {

    margin: 0;

    color:
        var(--gd-muted);

    font-size: 14px;

    line-height: 1.85;

}


.wgd-about-text p:first-child {

    padding-left: 18px;

    border-left:
        2px solid var(--gd-blue);

}


/* =========================================================
   PRINCIPLES
========================================================= */

.wgd-about-principles {

    position: relative;
    z-index: 2;

    border-top:
        1px solid rgba(17,24,28,.12);

}


.wgd-about-principle {

    position: relative;

    display: grid;

    grid-template-columns:
        52px 1fr;

    gap: 20px;

    padding:
        26px 0;

    border-bottom:
        1px solid rgba(17,24,28,.12);

    transition:
        padding-left .3s ease;

}


.wgd-about-principle::before {

    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 2px;

    background:
        var(--gd-copper);

    transition:
        width .35s ease;

}


.wgd-about-principle:hover {

    padding-left:
        8px;

}


.wgd-about-principle:hover::before {

    width:
        100%;

}


.wgd-about-principle > span {

    color:
        var(--gd-blue-dark);

    font-size: 12px;

    font-weight: 900;

}


.wgd-about-principle small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--gd-copper);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1.3px;

}


.wgd-about-principle h3 {

    margin:
        0 0 10px;

    color:
        var(--gd-dark);

    font-size:
        clamp(22px,2vw,30px);

    line-height: 1;

    font-weight: 900;

    letter-spacing: -1px;

    text-transform: uppercase;

}


.wgd-about-principle p {

    margin: 0;

    color:
        var(--gd-muted);

    font-size: 14px;

    line-height: 1.75;

}


/* =========================================================
   BOTTOM RAIL
========================================================= */

.wgd-about-rail {

    position: relative;
    z-index: 3;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 35px;

    min-height: 100px;

    margin-top: 75px;

    padding:
        20px 28px;

    color:
        var(--gd-white);

    background:
        var(--gd-dark);

}


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

.wgd-about-rail-brand {

    display: flex;

    align-items: center;

    gap: 13px;

}


.wgd-about-rail-brand > span {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    color:
        var(--gd-white);

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

    font-family:
        Georgia, serif;

    font-size: 22px;

    font-style: italic;

}


.wgd-about-rail-brand strong {

    color:
        var(--gd-white);

    font-size: 12px;

    font-weight: 900;

    text-transform: uppercase;

}


/* =========================================================
   RAIL ITEMS
========================================================= */

.wgd-about-rail-items {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

}


.wgd-about-rail-items span {

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

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

}


.wgd-about-rail-items i {

    width: 5px;
    height: 5px;

    background:
        var(--gd-blue);

    transform:
        rotate(45deg);

}


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

.wgd-about-rail > a {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    color:
        var(--gd-white);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: .8px;

    text-decoration: none;

    text-transform: uppercase;

}


.wgd-about-rail > a b {

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    color:
        var(--gd-white);

    background:
        var(--gd-copper);

    font-size: 18px;

    transition:
        .3s ease;

}


.wgd-about-rail > a:hover b {

    background:
        var(--gd-blue-dark);

    transform:
        translateX(3px);

}


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

@media (max-width: 991.98px) {

    .wgd-about-image {

        height:
            480px;

    }


    .wgd-about-body {

        padding-top:
            75px;

    }


    .wgd-about-text {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .wgd-about-principles {

        margin-top:
            15px;

    }


    .wgd-about-rail {

        grid-template-columns:
            1fr;

        align-items:
            flex-start;

        gap:
            22px;

        padding:
            28px;

    }


    .wgd-about-rail-items {

        justify-content:
            flex-start;

        flex-wrap:
            wrap;

    }

}


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

@media (max-width: 575.98px) {

    .wgd-about-image {

        height:
            390px;

    }


    .wgd-about-image-label {

        left:
            18px;

        right:
            18px;

        bottom:
            18px;

        padding:
            20px;

    }


    .wgd-about-body {

        padding-top:
            60px;

    }


    .wgd-about h2 {

        font-size:
            40px;

        letter-spacing:
            -3px;

    }


    .wgd-about h2 strong {

        font-size:
            29px;

        letter-spacing:
            -1px;

    }


    .wgd-about-principle {

        grid-template-columns:
            38px 1fr;

        gap:
            12px;

    }


    .wgd-about-rail {

        margin-top:
            50px;

        padding:
            24px 20px;

    }


    .wgd-about-rail-brand {

        align-items:
            flex-start;

    }

}

/* =========================================================
   SERVICE FAQ
========================================================= */

.wgd-services-faq {

    position: relative;

    overflow: hidden;

    padding:
        105px 0;

    background:
        var(--gd-cream);

}


/* technical grid */

.wgd-services-faq::before {

    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            rgba(68,122,171,.026) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(68,122,171,.026) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

}


/* copper detail */

.wgd-services-faq::after {

    content: "";

    position: absolute;

    top: 0;
    left: 7%;

    width: 125px;
    height: 4px;

    background:
        var(--gd-copper);

}


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

.wgd-services-faq-head {

    position: relative;
    z-index: 2;

    margin-bottom:
        60px;

}


.wgd-services-faq-kicker {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    color:
        var(--gd-muted);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}


.wgd-services-faq-kicker span {

    color:
        var(--gd-blue-dark);

}


.wgd-services-faq-kicker i {

    width: 55px;
    height: 2px;

    background:
        var(--gd-copper);

}


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

.wgd-services-faq h2 {

    max-width: 820px;

    margin: 0;

    color:
        var(--gd-dark);

    font-size:
        clamp(48px,5.3vw,82px);

    line-height: .88;

    font-weight: 900;

    letter-spacing: -4px;

    text-transform: uppercase;

}


.wgd-services-faq h2 strong {

    display: block;

    margin-top: 8px;

    color:
        var(--gd-copper);

    font-size: .7em;

    line-height: 1;

    letter-spacing: -2px;

}


.wgd-services-faq h2 em {

    color:
        var(--gd-blue-dark);

    font-style: normal;

}


/* intro */

.wgd-services-faq-head p {

    margin: 0;

    padding-left: 24px;

    color:
        var(--gd-muted);

    font-size: 14px;

    line-height: 1.85;

    border-left:
        2px solid var(--gd-blue);

}


/* =========================================================
   FAQ ITEM
========================================================= */

.wgd-faq-item {

    position: relative;
    z-index: 2;

    margin: 0;

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

    border-top:
        1px solid rgba(17,24,28,.11);

    transition:
        background .3s ease;

}


.wgd-faq-item:last-of-type {

    border-bottom:
        1px solid rgba(17,24,28,.11);

}


.wgd-faq-item[open] {

    background:
        var(--gd-white);

}


/* =========================================================
   SUMMARY
========================================================= */

.wgd-faq-item summary {

    position: relative;

    display: grid;

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

    align-items: center;

    gap: 16px;

    min-height: 88px;

    padding:
        18px 20px;

    cursor: pointer;

    list-style: none;

}


.wgd-faq-item summary::-webkit-details-marker {

    display: none;

}


/* number */

.wgd-faq-num {

    color:
        var(--gd-blue-dark);

    font-size: 12px;

    font-weight: 900;

}


/* question */

.wgd-faq-item summary strong {

    color:
        var(--gd-dark);

    font-size: 15px;

    line-height: 1.45;

    font-weight: 900;

}


/* =========================================================
   PLUS
========================================================= */

.wgd-faq-item summary > i {

    position: relative;

    width: 30px;
    height: 30px;

    border:
        1px solid rgba(17,24,28,.15);

    transition:
        .3s ease;

}


.wgd-faq-item summary > i::before,
.wgd-faq-item summary > i::after {

    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    background:
        var(--gd-copper);

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

    transition:
        .3s ease;

}


.wgd-faq-item summary > i::before {

    width: 11px;
    height: 2px;

}


.wgd-faq-item summary > i::after {

    width: 2px;
    height: 11px;

}


.wgd-faq-item[open]
summary > i {

    background:
        var(--gd-blue-dark);

    border-color:
        var(--gd-blue-dark);

}


.wgd-faq-item[open]
summary > i::before {

    background:
        var(--gd-white);

}


.wgd-faq-item[open]
summary > i::after {

    opacity: 0;

    transform:
        translate(-50%,-50%)
        rotate(90deg);

}


/* =========================================================
   ANSWER
========================================================= */

.wgd-faq-answer {

    padding:
        0 55px 25px 78px;

}


.wgd-faq-answer p {

    margin: 0;

    color:
        var(--gd-muted);

    font-size: 14px;

    line-height: 1.8;

}


/* opened accent */

.wgd-faq-item[open]::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background:
        var(--gd-blue);

}


/* hover */

.wgd-faq-item:hover {

    background:
        var(--gd-white);

}


/* =========================================================
   NOTE
========================================================= */

.wgd-faq-note {

    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        46px 1fr;

    align-items: center;

    gap: 15px;

    margin-top:
        25px;

    padding:
        22px;

    color:
        var(--gd-white);

    background:
        var(--gd-dark);

}


.wgd-faq-note > span {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    color:
        var(--gd-white);

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

    font-family:
        Georgia, serif;

    font-size: 22px;

    font-style: italic;

}


.wgd-faq-note small {

    display: block;

    margin-bottom: 3px;

    color:
        var(--gd-blue-light);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1px;

}


.wgd-faq-note strong {

    color:
        var(--gd-white);

    font-size: 14px;

    line-height: 1.5;

    font-weight: 900;

}


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

@media (max-width: 991.98px) {

    .wgd-services-faq {

        padding:
            80px 0;

    }


    .wgd-services-faq-head {

        margin-bottom:
            45px;

    }

}


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

@media (max-width: 575.98px) {

    .wgd-services-faq {

        padding:
            60px 0;

    }


    .wgd-services-faq h2 {

        font-size:
            40px;

        letter-spacing:
            -3px;

    }


    .wgd-services-faq h2 strong {

        font-size:
            29px;

        letter-spacing:
            -1px;

    }


    .wgd-faq-item summary {

        grid-template-columns:
            30px 1fr 30px;

        gap:
            10px;

        min-height:
            82px;

        padding:
            15px 10px;

    }


    .wgd-faq-item summary strong {

        font-size:
            14px;

    }


    .wgd-faq-answer {

        padding:
            0 15px 22px 50px;

    }


    .wgd-faq-note {

        grid-template-columns:
            40px 1fr;

        padding:
            18px 15px;

    }

}