/*
 Theme Name:   ReVision
 Description:  Unicon Child Theme for ReVision
 Author:       Insight Designs
 Author URI:   https://insightdesigns.com
 Template:     unicon
 Version:      1.4
 Text Domain:  drf
*/

/* Enque Fonts */

@font-face {
    font-family: "Sherika-Regular";
    src: url("/wp-content/uploads/2025/12/Sherika-Regular.woff2") format("woff2"),
         url("/wp-content/uploads/2025/12/Sherika-Regular.woff") format("woff");
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Source-Serif";
    src: url("/wp-content/uploads/2025/12/SourceSerifVariable-Italic.woff2") format("woff2"),
         url("/wp-content/uploads/2025/12/SourceSerifVariable-Italic.woff") format("woff");
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Ratch-Regular";
    src: url("/wp-content/uploads/2025/12/Ratch-Regular.woff2") format("woff2"),
         url("/wp-content/uploads/2025/12/Ratch-Regular.woff") format("woff");
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "HostGrotesk";
    src: url("/wp-content/uploads/2025/12/HostGrotesk.woff2") format("woff2"),
         url("/wp-content/uploads/2025/12/HostGrotesk.woff") format("woff");
    font-style: normal;
    font-display: swap;
}

/* Colors */
:root {
  --color-revisionred: #722413;
  --color-charcole: #0B0706;
  --color-linen: #F8F6F3;
  --color-sea: #C5CFC9;
  --color-sky: #A5B6BE;
  --color-mohagany: #mohagany;
  --color-forest: #68624B;
  --color-brass: #A8906D;
}

/* Gobal Styles */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body .color-light, body .color-light p {
    color: var(--color-linen);
}

body section.vc_section {
    padding-top: 0px !important;
}

body {
    font-family: 'HostGrotesk', helvetica, sans-serif !important;
    font-weight: 300 !important;
}

body #page-wrap a:not(.button) {
    color: var(--color-revisionred);
    text-decoration: underline;
    text-underline-offset: 2px;
}

body #page-wrap .color-light a:not(.button) {
    color: var(--color-linen);
}

body .margin-bottom-20 {
    margin-bottom: 20px;
}

body h1, body h2 {
    font-family: 'Sherika-Regular', helvetica, sans-serif !important;
    font-weight: 400 !important;
    position:relative;
    line-height:1;
    @media (max-width:1050px) {
        font-size: 35px;
    }
    @media (max-width:930px) {
        font-size: 30px;
    }
}



body h3, body h4, body h5 {
    font-family: 'Ratch-Regular', helvetica, sans-serif !important;
    font-weight: 400 !important;
    text-transform: upppercase;
}
body {
    .color-light h1, .color-light h2, .color-light h3,
    .color-light h4, .color-light h5, .color-light h6 {
        color: var(--color-linen);
    }
}
body .revision {
    font-size: 1.1rem;
    font-family: 'Sherika-Regular' !important;
    line-height: 1.2;
    font-weight: 600 !important;
    letter-spacing: 1px;
}

.m-bot-20 {margin-bottom: 20px !important;}

body:not(.home) .insight {
    display: none;
}

/* Side Nav */
.site-wrapper.wrapall {
    position: relative;
    overflow: hidden;
}

#mobile-navigation-btn-custom {
    float: right;
    font-size: 24px;
    line-height: 100px;
    margin-top: 0px;
    color: #cccccc;
    color: var(--color-revisionred);
    margin-right: 25px;
    border-left: 2px solid var(--color-revisionred);
    padding-left: 25px;
}

.wp-child-theme-revision #mobile-navigation {
    display: block !important;
    position: fixed;
    top: 0px !important;
    height: 100vh;
    right: -400px;
    width: 400px;
    transition: right 0.2s ease-in-out;
    overflow-y:auto;
    z-index: 10000;
}

#mobile-navigation #mobile-nav button.desktop-toggleBtn {
    transition: none;
}

#mobile-navigation #mobile-nav li.menu-item-has-children:has(> a:hover) > a,
#mobile-navigation #mobile-nav li.menu-item-has-children:has(> a:hover) > button.desktop-toggleBtn,
#mobile-navigation #mobile-nav li.menu-item-has-children:has(> button.desktop-toggleBtn:hover) > a,
#mobile-navigation #mobile-nav li.menu-item-has-children:has(> button.desktop-toggleBtn:hover) > button.desktop-toggleBtn {
    background: var(--color-revisionred);
    transition: none;
}

#mobile-navigation #mobile-nav button.desktop-toggleBtn {
    width: 40px;
    padding: 12px 0px 12px 24px;
    border-bottom: 1px solid #333333;
}
#mobile-navigation #mobile-nav li.menu-item-has-children a.no-after {
    width: calc(100% - 80px);
}

.wp-child-theme-revision #mobile-navigation {
    .container {
        height: 100%;
        padding-top: 15px;
        box-sizing: border-box;
    }
    a {
        font-size: 1.1em;
        text-transform: uppercase;
        color: var(--color-linen) !important;
        padding-inline: 20px !important;
        &:hover {
            background-color: var(--color-revisionred);
        }
    }
    .container ul li ul {
        margin: 0 30px 0 30px !important;
    }
    .container ul li ul a:before {
        content: "+";
        margin-right: 10px;
        font-weight: 100;
        font-size: 1.3rem;
        line-height: 1.3rem;
    }
    #sidebar-nav-widgets {
        flex: 1;
        display: flex;
        align-items: flex-end;
    }
    #sidebar-nav-widgets a {
        position: relative;
        display: block;
        margin-left: 40px;
        font-size: .85rem;
        background: transparent;
        text-transform: unset;
        &:hover {
            color:var(--color-linen);
            text-decoration: underline;
            text-underline-offset: 3px;
        }
    }
    
    #sidebar-nav-widgets span.img-wrap {
        margin-left: -40px;
        position: absolute;
        top: 0px;
    }
}

.wp-child-theme-revision #mobile-navigation.open {
    right: 0;
}

#mobile-nav-close {
    position: absolute;
    top: 35px;
    right: 20px;
    font-family: 'Ratch-Regular';
    font-size: 30px !important;
    color: var(--color-linen);
    text-decoration: none;
    z-index: 10001;
    padding: 10px;
    line-height: 1;
    width: 25px !important;
    display: flex;
    margin: 0px !important;
    padding: 0px !important;
    align-items: center;
    justify-content: center;
    transform: rotate(0deg);
    transition: all .5s;
}

a#mobile-nav-close:hover {
    color: var(--color-revisionred) !important;
    background-color: transparent !important;
    transform: rotate(180deg);
    font-size: 40px !important;
}

.admin-bar.wp-child-theme-revision #mobile-navigation {
    top: 109px;
    height: 100vh;
    overflow-y: auto;
}

#mobile-navigation .container {
    max-width: 100%;
}

#mobile-navigation .container .sixteen.columns {
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
    padding: 0 20px;
    height: 100%;
    display: flex;
    flex-direction: column
}

.menu-main-navigation-container {
    max-width: 100%;
}

/* Regular Button Style */
.button.regular-button {
    position: relative;
    border: 1px solid var(--color-linen) !important;
    font-family: 'Ratch-Regular', sans-serif !important;
    font-size: 1rem !important;
    color: #ffffff !important;
    letter-spacing: 1px !important;
    padding: 12px 20px 11px 20px !important;
}
.button.regular-button:hover {
    background: var(--color-linen) !important;
    color: var(--color-charcole) !important;
}

/* button on white */
a.button.regular-button.on-white {
    border-color: var(--color-charcole) !important;
    color: var(--color-charcole) !important;
    &:hover {
        background-color: var(--color-charcole) !important;
        color: var(--color-linen) !important;
    }
}

/* Special Button Style */
.button.special-button {
    position:relative;
    border: 0px !important;
    font-family: 'Ratch-Regular', sans-serif !important;
    font-size: 1rem !important;
    color: #ffffff !important;
    letter-spacing: 2px !important;
    padding: 11px 20px 9px 20px !important;
    opacity: 0;
    animation: buttonFadeUp 0.9s ease-out 2s forwards !important;
}
.button.special-button:hover {
    background: none !important;
}
.button.special-button:before {
    content: ' ';
    border: 1px solid #ffffff;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0,0);
    transition: all .5s;
}
.button.special-button:hover:before {
   transform: translate(-5px,-5px);
}
.button.special-button:after {
    content: ' ';
    border: 1px solid #ffffff;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0,0);
    transition: all .5s;
}
.button.special-button:hover:after {
   transform: translate(5px,5px);
}

/* special button on white */
.button.special-button.on-white {
    color: var(--color-charcole) !important;
}
.button.special-button.on-white:before {
    border: 2px solid var(--color-charcole) !important;
}
.button.special-button.on-white:after {
    border: 2px solid var(--color-charcole) !important;
}
.button.cta-second {
    display: block;
    width: fit-content;
    margin: auto;
    margin-top: 25px;
}

/* special brass cta button */
a.button.color-1.large.special-button-brass {
    background-color: var(--color-brass);
    border: 2px solid var(--color-brass);
    color: var(--color-charcole);
    text-align: center;
    font-family: 'Source-Serif';
    max-width: 200px;
    margin: auto;
}

a.button.color-1.large.special-button-brass:hover {
        background: var(--color-linen);
        color: var(--color-charcole) !important;
}

/* Header Styles */
#header {
    .logo img {
        height: 45px;
        width: auto;
    }
}

#mobile-header {
    box-shadow: none;
    border-bottom: 2px solid var(--color-brass);
    position:fixed !important;
    height: 100px;
    & .container {
    width: 100%;
        & .sixteen.columns {
            width: 100%;
            margin-left: unset;
            margin-right: unset;
        }
    }
    .logo img {
        height: 58px;
        width: auto;
        @media (max-width: 479px) {
            height: auto;
            width: 200px;
            max-width: 200px;
            height: unset !important;
            margin-top: 7px;
        }
    }
    & .logo {
        margin-left: 38px;
    }
    a.lets-begin-btn {
        position: absolute;
        right: 140px;
        top: 40px;
        color: var(--color-revisionred);
        font-family: 'Source-Serif', serif !important;
        font-style: normal;
        font-size: 1.4rem;
        line-height: 1.5rem;
        font-weight: 600 !important;
        opacity: 1;
        transform: translateX(-20px);
        /* animation: getStarted 0.6s ease-out .5 forwards; */
        cursor: pointer;
        letter-spacing: 1px;
    }
    a.lets-begin-btn:hover {
        color: var(--color-charcole);
    }
    #mobile-navigation-btn-custom {
        color: var(--color-revisionred);
        margin-right: 40px;
        border-left: 2px solid var(--color-brass);
        padding-left: 40px;
        i.fa.fa-bars {
            width: 25px;
        }
    }

    #mobile-navigation-btn-custom:hover {
        color: var(--color-charcole);
    }
    #mobile-navigation-btn-custom .fa-bars::before {
        font-size: 25px;
    }
    #mobile-navigation-btn-custom.open .fa-bars::before {
            display:none;
    }
    #mobile-navigation-btn-custom.open .fa-bars::after {
            content: '\58';
            font-family: 'Ratch-Regular';
            font-weight: 900;
    }

    a#mobile-nav-close:hover {
        color: var(--color-revisionred) !important;
        background-color: transparent;
    }


}

/* Header animation  
@keyframes getStarted {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1 !important;
        transform: translateX(0);
    }
}*/

/* Media Queries for Header and Nav */
@media (max-width: 600px) {
    .wp-child-theme-revision #mobile-navigation {
        #sidebar-nav-widgets {
            margin-bottom: 40px;
        }
    }
}

@media (max-width: 650px) {
    body #mobile-header a.lets-begin-btn {
        display:none;
    }
}

@media only screen and (max-width: 479px) {
    #mobile-navigation .container .sixteen.columns  {
        width: 100%;
    }
    #mobile-navigation .container  {
        width: 100%;
    }
}

@media (max-width: 424px) {
    #mobile-navigation .container ul li ul {
        margin: 0 0px 0 0px !important;
    }
}

/* Home Page Styles */

body #Home-Hero {
    top: 100px;
    padding: 40px;
    background: linear-gradient(to bottom, #ffffff 50%, #68624b 50%);
    padding-top: 35px !important;

    & #Hero-Image {
        aspect-ratio: 16 / 9;
        max-height: 799px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    & #Hero-Image:after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--color-charcole);
        top: 0;
        left: 0;
        opacity: 1;
        animation: overlayFade 4s linear 1s forwards;
        visibility: visible;
    }

    /* & #Hero-Image:before {
        content: '';
        position: absolute;
        top: -25px;
        right: -16px;
        height: 500px;
        width: 500px;
        background-image: url(/wp-content/uploads/2025/12/ReVision-charcoal-graphic-element-2-scaled.png);
        background-size: 100%;
        opacity: .5;
    } */

    & .hero-content {
        margin-top: -40px;
    }

    & #Hero-Icon img {
        width: 80px;
        height: auto;
        opacity: 0;
        transform: translateY(-20px);
        animation: iconFadeDown 0.9s ease-out 0.3s forwards;
    }

    & .hero-headline {
        margin-bottom: 0px;
    }

    & .hero-headline h1 {
        font-family: 'Ratch-Regular';
        text-transform: uppercase;
        font-size: 18px;
        letter-spacing: 1px;
        text-shadow: 0 0 25px BLACK;
    }

    & .hero-subheadline p {
        font-family: 'Sherika-Regular', sans-serif !important;
        font-size: 3rem;
        text-shadow: 0 0 25px BLACK;
        line-height: 1;
        margin-block: 1rem 2rem !important;
    }

    & .hero-subheadline p em {
        font-size: 1.5rem !important;
    }

    & .hero-subheadline p em {
        font-family: 'Source-Serif', serif !important;
        font-size: 1.1em !important
    }

    .button.special-button {
        text-shadow: 0 0 20px black;
        font-size: 1rem !important;
    }
}

/* MEDIA QUERIES for #Home-Hero */

@media (max-width: 1110px) {
    body #Home-Hero {
        & .hero-subheadline p {
            font-size: 2.7rem;
        }
    }
}

@media (max-width: 1000px) {
    body #Home-Hero {
        & .hero-subheadline p {
            font-size: 2.4rem;
        }
    }
}

@media only screen and (max-width: 915px) {
    body #Home-Hero {
        & #Hero-Image {
            aspect-ratio: 1.2;
        }
        & .hero-subheadline p {
            font-size: 2.2rem;
            line-height: 1;
            margin-top: 20px;

            & .line-break {
                display: block;
            }
        }

        & .hero-subheadline p em {
            font-size: 2.5rem !important;
        }

        & #Hero-Icon {
            margin-bottom: 20px;
        }
    }
}

@media (min-width: 801px) {
    body #Home-Hero {
        .break-on-large {
            display: block;
        }
    }
}

@media (max-width: 767px) {
    .wp-child-theme-revision #mobile-navigation {
        width: 100%;
        right: -100%;
    }
}

@media (max-width: 650px) {
    body #Home-Hero {
        & #Hero-Image {
            aspect-ratio: .8;
            padding: 40px;
        }

        & .hero-subheadline p {
            font-size: 1.8rem;
        }

        & .hero-subheadline p em {
            font-size: 2.2rem !important;
        }
    }
}

@media (max-width: 585px) {
    body #Home-Hero {
        & #Hero-Image {
            padding: 20px;
        }

        & .hero-subheadline p {
            font-size: 1.9rem;
            padding: 5px;
        }

        & .hero-subheadline p em {
            font-size: 2rem !important;
        }
    }
    body #Home-Hero {
        & #Hero-Icon img {
            width: 60px;
        }
    }
}

@media (max-width: 480px) {
    body #Home-Hero {
        padding-inline: 20px;

        & #Hero-Image {
            padding: 20px;
        }

        & .hero-headline h1 {
            font-size: 16px;
        }

        & .hero-subheadline p {
            font-size: 1.6rem;
        }

        & .hero-subheadline p em {
            font-size: 1.8rem !important;
        }
    }
}

@media (max-width: 390px) {
    body #Home-Hero {
        & .hero-subheadline p {
            font-size: 1.3rem;
        }
    }
}

/* Style for #Design-Studio */
body #Design-Studio {
    & .button.special-button {
        font-size: 1.4rem !important;
        line-height: 1.4rem !important;
        padding: 12px 20px 11px 22px !important;
    }
    & img {
        aspect-ratio: 1.25;
        object-fit: cover;
    }
    & .studio-text {
        padding-left: 30px !important;
    }
    & .studio-text:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 2px;
        height: 200%;
        background: var(--color-linen);
        transform: translateY(-50%);
    }
    .studio-text:after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: 0px;
        width: 250%;
        height: 2px;
        background: var(--color-linen);
    }
    .studio-text h2 {
        margin-bottom: 45px;
        line-height: 1;
        font-family: 'Sherika-Regular', sans-serif !important;
        
    }
    .studio-text h2:before {
        content: '';
        position: absolute;
        bottom: -20px;
        left: -30px;
        width: 100%;
        height: 2px;
        background: var(--color-linen);
    }
    a.regular-button {
        width: 150px;
        line-height: 1.1 !important;
    }
    .studio-image .wpb_text_column {
        position: absolute;
        bottom: 40px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 55%);
        color: var(--color-linen);
        padding: 20px;
        text-align: center;
        width: calc(100% - 40px);
        display:none;
    }
    .studio-image .wpb_wrapper {
        position: relative;
        overflow: hidden;
    }
}

/* MEDIA QUERIES for #Design-Studio */

@media (max-width: 1280px) {
    body #Design-Studio {
        & .col.span_12 {
            width: 1100px;
        }
        & .vc_col-sm-5 {
            width: 50%;
        }
        & img {
            aspect-ratio: 1.1;
        }
    }
}
@media (max-width: 1040px) {
    body #Design-Studio {
        & img {
            aspect-ratio: .85;
        }
    }
    body #Design-Studio {
        .break-on-small {
            display: block;
        }
    }
}
@media (min-width: 1040px) {
    body #Design-Studio {
        .break-on-large {
            display: block;
        }
    }
}
@media (max-width: 1040px) {
    body #Design-Studio {
        & .wpb_row.section {
            padding-top: 80px !important;
        }
        & .col.span_12 {
            width: 860px;
        }
        & .button.special-button {
            font-size: 1.2rem !important;
            line-height: 1.3rem !important;
            padding: 9px 10px 6px 14px !important;
        }
        & img {
            aspect-ratio: 0.68;
        }
    }
}

@media (min-width:768px) and (max-width: 959px) {
    .studio-text .vc_row.wpb_row {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 959px) {
    body #Design-Studio {
        & .button.special-button {
            padding: 9px 22px 6px 24px !important;
        }
        & img {
            aspect-ratio: 0.53;
        }
    }
}

@media (max-width: 767px) {
    body #Design-Studio {
        .col.span_12 {
            max-width: 600px;
        }
        .vc_row.wpb_row.vc_inner.vc_row-fluid {
            display: flex;
        }
        .studio-text:after {
            bottom: 0px;
        }
        img {
            aspect-ratio: 1.5;
        }
        .studio-text:before {
            top: 120%;
            height: 300%;
        }
        .vc_responsive .wpb_row .vc_col-sm-6 {
            padding-left: 30px;
        }
        .wpb_row.section {
            padding-bottom: 60px !important;
        }
        .studio-text .vc_row.wpb_row {
            flex-direction: unset;
        }
    }
}
@media screen and (min-width:500px) and (max-width: 767px) {
        span.break-on-large {
            text-wrap: nowrap !important;
        }
 }

@media (max-width: 650px) {
    body #Design-Studio {
        & .col.span_12 {
            max-width: 460px;
        }
    }
}

@media (max-width: 550px) {
    body #Design-Studio {
        & .wpb_row.section {
            padding-top: 40px !important;
        }
    }
}

@media (max-width: 539px) {
    body #Design-Studio {
        & .col.span_12 {
            max-width: calc(100% - 40px);
        }
    }
}
@media (max-width: 510px) {
    body #Design-Studio {
        .studio-text .vc_row.wpb_row {
            flex-direction: column;
            gap: 10px;
            .vc_col-sm-6:first-child {
                margin-bottom: 20px;
            }
        }
        a.regular-button {
            width: 315px;
        }
    }
}
@media screen and (max-width: 420px) {
    body #Design-Studio {
        .studio-text h2 {
            font-size: 35px;
        }
        .vc_row.wpb_row.vc_inner.vc_row-fluid .vc_col-sm-6 {
            text-align: center;
        }
        a.regular-button {
            width: unset;
        }
    }
}
@media screen and (max-width: 390px) {
    body #Design-Studio {
        h2 {
            font-size:30px;
            letter-spacing: .5px;
        }
    }
}
/* OUR WORK Styles */
body #Our-Work {
    &.linen-wood-bg {
        background-image: url(/wp-content/uploads/2025/12/wood-texture-2b.svg);
        background-size: 60%;
    }
    & > .wpb_row {
        overflow: visible;
    }
    .work-title-block>.wpb_wrapper {
        text-align: center;
    }
    & h2 {
        margin-bottom: 20px !important;
        display: inline-block;
        font-family: 'Sherika-Regular', sans-serif !important;
    }
    & h2:before {
        content: '';
        bottom: -15px;
        left: 0px;
        width: 220%;
        height: 2px;
        background: var(--color-charcole);
        position: absolute;
    }
    /* & .work-title-block:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        transform-origin: right;
        top: -160px;
        right: 0px;
        background-color: var(--color-charcole);
        visibility: visible !important;
        transform: rotate(-90deg);
        overflow: visible !important;
    } */

    & #Work-Columns {
        padding-left: 40px;
        padding-right: 40px;
    }

    & .col.span_12 {
        display: flex;
        gap: 40px;
    }

    & .work-col > .wpb_wrapper {
        position: relative;
        overflow: hidden;
    }

    & .work-col .wpb_single_image {
        margin-bottom: 0px;
    }

    & .work-col img {
        aspect-ratio: 9 / 13;
        object-fit: cover;
    }

    & .work-col .wpb_text_column {
        position: absolute;
        bottom: -150px;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.7) 55%
        );
        padding: 0 20px 20px 20px;
        color: var(--color-linen);
        transition: bottom 0.5s;
    }

    & .wpb_wrapper:hover {
        cursor: pointer;
    }

    & .work-col > .wpb_wrapper:hover .wpb_text_column {
        bottom: -10px !important;
    }

    & h3 {
        color: var(--color-linen);
        line-height: 1;
        text-align: center;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0px;
        text-transform: uppercase;
        font-size: 1.3rem;
        letter-spacing: 1px;
        padding-bottom: 10px;
    }

    & .work-col p {
        color: var(--color-linen);
        line-height: 1.2;
        text-align: center;
        height: 130px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        letter-spacing: 0.5px;

        a.regular-button {
            font-size: .8rem !important;
            padding: 10px 18px 9px 18px !important;
            margin: auto;
            border-width: 1px !important;
        }
    }
}

/* -------- MEDIA QUERIES for OUR WORK -------- */

@media (max-width: 767px) {
    body #Our-Work {
        & .our-work-title .col.span_12 {
            max-width: calc(100% - 40px) !important;
        }
    }
}

@media (max-width: 478px) {
    body #Our-Work {
        & .our-work-title h2 {
            font-size: 2.25rem;
            line-height: 1.1;
        }

        & .our-work-title h2:before {
            width: 100%;
        }
        & h3 {
            font-size: 1.1rem;
        }
    }
}

/* Media queries for  #Work-Columns */

@media (min-width: 731px) and (max-width: 1100px) {
    body #Our-Work #Work-Columns {
        .col.span_12 {
            display: grid;
            gap: 40px;
            grid-template-columns: repeat(6, 1fr);
        }

        .col.span_12 > .work-col:nth-child(1),
        .col.span_12 > .work-col:nth-child(2),
        .col.span_12 > .work-col:nth-child(n + 3) {
            grid-column: span 3; /* 50% each */
            width: 100%;
        }

        & .work-col img {
            aspect-ratio: 3 / 4;
        }
    }
}

@media (max-width: 730px) {
    body #Our-Work #Work-Columns {

        .col.span_12 {
            flex-wrap: nowrap;       /* optional, since each item is full-width */
            flex-direction: column;  /* stack vertically */
        }

        .col.span_12 > .work-col {
            flex: 0 0 100%;
            max-width: 100%;
        }

        & .work-col img {
            aspect-ratio: 4 / 3;
            object-fit: cover;
            width: 100%;
        }

        & .work-col .wpb_text_column {
            position: relative;
            bottom: 0px !important;
            background: var(--color-charcole);
        }

        & .work-col p {
            align-items: center;
            font-size: 18px;
            height: 80px;
            gap: 10px;
        }

        & .work-col .wpb_text_column,
        & & .work-col > .wpb_wrapper:hover .wpb_text_column {
            bottom: 0px;
        }

        & .work-col h3 {
            font-size: 2rem;
            height: unset;
            padding-block: 20px;
        }

        & .button.primary-button {
            font-size: 2rem;
            margin-top: 10px;
        }
    }
}

@media (max-width: 478px) {
    body #Our-Work #Work-Columns {
        & h3 {
            font-size: 1.6rem;
        }
    }
}
@media (max-width: 390px) {
    body #Our-Work {
      h2 {font-size:30px;}
    }
}


#Locations {
    /* img {
        max-width: 260px;
    } */ 
    .location-text:before {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        width: 2px;
        height: 200%;
        background: var(--color-linen);
        transform: translateY(-50%);
    }
    h2 {
        font-family: 'Sherika-Regular', sans-serif !important;
    }
    h2:before {
        content: '';
        position: absolute;
        bottom: -20px;
        left: 0px;
        width: calc(100% + 20px);
        height: 2px;
        background: var(--color-linen);
    }
    ul.locations-list {
        list-style: disc;
        font-size: 1.1rem;
        column-count:3;
    }
    
    ul.locations-list li::marker {
        color: var (--color-sea);
    }
}

/* Mobile Styles for Locations Sections  */
@media (max-width: 959px) {
    #Locations .vc_col-sm-3 {
        display: none;
    }
}

@media (max-width: 767px) {
    #Locations {
        .location-text:before {
            top: 60%;
            height: 300%;
            transform: translateY(-60%);
        }
    }
}

@media (max-width: 550px) {
    section#Featured-Projects {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .featured_project_header {
        width: 100% !important;
        left: 0 !important;
        box-sizing: border-box !important;
        padding: 15px !important;
    }
    section#Our-Work-Filterer {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .projects_list_wrapper.vc_col-sm-4 {
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 500px) {
    #Locations {
        img {
            max-width: 200px;
        }
        .vc_col-sm-3 {
            padding-top: 5px;
            padding-bottom: 5px;
        }
        ul.locations-list {
            column-count: 2;
        }
    }
}


/* Style for The Team */

body #The-Team {
    &.linen-wood-bg {
        background-image: url(/wp-content/uploads/2025/12/wood-texture-2b.svg);
        background-size: 60%;
        margin-top: 0px !important;
    }
    & .button.special-button {
        font-size: 1.4rem !important;
        line-height: 1.4rem !important;
        padding: 12px 20px 11px 22px !important;
    }
    & img {
        position:relative;
    }
    & .team-text {
        padding-left: 30px !important;
    }
    .team-text em {
        font-family: 'Source-Serif', serif !important;
        font-size: 1.1em !important;
        text-wrap:nowrap;
    }
    .team-text h2 {
        margin-bottom: 45px;
        line-height: 1;
        font-family: 'Sherika-Regular', sans-serif !important;
        
    }
    a.regular-button.on-white {
        width: 150px;
        border-color: var(--color-charcole) !important;
        color: var(--color-charcole) !important;
        &:hover {
            background-color: var(--color-charcole) !important;
            color: var(--color-linen) !important;
        }
    }
    
    .team-image .wpb_text_column {
        position: absolute;
        bottom: 40px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 55%);
        color: var(--color-linen);
        padding: 20px;
        text-align: center;
        width: calc(100% - 40px);
        display:none;
    }
    .team-image .wpb_wrapper {
        position: relative;
        overflow: hidden;
    }
}

/* MEDIA QUERIES for The Team 

@media (max-width: 1280px) {
    body #The-Team {
        & img {
            position:relative;
        }
    }
}
@media (max-width: 1199px) {
    body #The-Team {

        .team-text:before {
            top: -100%;
            height: 500%;
        }
        .vc_col-sm-6 {
            width: 100%;
        }
        img {
            margin-bottom: 20px;
        }
    }
}
@media (max-width: 1040px) {
    body #The-Team {
        & img {
            position:relative;
        }
    }
    body #The-Team {
        .break-on-small {
            display: block;
        }
    }
}
@media (min-width: 1040px) {
    body #The-Team {
        .break-on-large {
            display: block;
        }
    }
}
@media (max-width: 1040px) {
    body #The-Team {
        & .wpb_row.section {
            padding-top: 80px !important;
        }
        & .col.span_12 {
            width: 860px;
        }
        & .button.special-button {
            font-size: 1.2rem !important;
            line-height: 1.3rem !important;
            padding: 9px 10px 6px 14px !important;
        }
        & img {
            position:relative;
        }
    }
}

@media (min-width:768px) and (max-width: 959px) {
    .team-text .vc_row.wpb_row {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 959px) {
    body #The-Team {
        & .button.special-button {
            padding: 9px 22px 6px 24px !important;
        }
        & img {
            position:relative;
        }
    }
}

@media (max-width: 767px) {
    body #The-Team {
        .col.span_12 {
            max-width: 600px;
        }
        .vc_row.wpb_row.vc_inner.vc_row-fluid {
            display: flex;
        }
        .team-text:after {
            bottom: 0px;
        }
        img {
            position:relative;
        }
        .team-text:before {
            top: 120%;
            height: 300%;
        }
        .vc_responsive .wpb_row .vc_col-sm-6 {
            padding-left: 30px;
        }
        .wpb_row.section {
            padding-bottom: 60px !important;
        }
        .team-text .vc_row.wpb_row {
            flex-direction: unset;
        }
    }
}

@media (max-width: 650px) {
    body #The-Team {
        & .col.span_12 {
            max-width: 460px;
        }
    }
}

@media (max-width: 539px) {
    body #The-Team {
        & .col.span_12 {
            max-width: calc(100% - 40px);
        }
    }
}
@media (max-width: 510px) {
    body #The-Team {
        .team-text .vc_row.wpb_row {
            flex-direction: column;
            gap: 10px;
            .vc_col-sm-6:first-child {
                margin-bottom: 20px;
            }
        }
        a.regular-button {
            width: 315px;
        }
    }
}
@media (max-width: 420px) {
    body #The-Team {
        .team-text h2 {
            font-size: 35px;
        }
        .vc_row.wpb_row.vc_inner.vc_row-fluid .vc_col-sm-6 {
            text-align: center;
        }
        a.regular-button {
            width: unset;
        }
    }
}
@media (max-width: 390px) {
    body #The-Team {
        h2 {
            font-size:30px;
            letter-spacing: .5px;
        }
    }
}
*/
/* Spaces Styles */
body {
    .bg-white {
        background-color: var(--color-linen);
    }
    .sketch-image figure {
        padding: 0 30px;
    }
    #Makes-A-Great h3 {
        font-size: 24px;
    }
    .great-element>.wpb_wrapper {
        display: grid;
        grid-template-columns: 180px 1fr;
        column-gap: 20px;
        align-items: start;
    }
    #What-Makes-A-Great h3 {
        font-size: 22px !important;
        font-weight: 700 !important;
        height: 100%;
        display: flex;
        text-align: right;
        align-items: center;
        justify-content: flex-end ;
        padding-right: 20px;
        border-right: 2px solid var(--color-charcole);
    }
    .iconbox{
        img.iconimg {
                max-width: 90px;
        }
        h3 {
            font-size: 22px !important;
            font-weight: 700 !important;
            margin: 10px 0 10px !important;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .right-for-you .download-toggle .toggle .toggle-title {
        background-color: var(--color-brass);
        border: 2px solid var(--color-brass);
        color: var(--color-charcole);
        text-align: center;
        font-family: 'Source-Serif';
        max-width: 200px;
        margin: auto;
    }
    .right-for-you .download-toggle .toggle .toggle-title:hover {
        background: var(--color-linen);
        color: var(--color-charcole);
    }
    .right-for-you .download-toggle .toggle .toggle-title.active {
        background: var(--color-linen);
        color: var(--color-charcole);
    }
    .right-for-you .download-toggle .toggle .toggle-inner {
        background: transparent;
        border: var(--color-linen);
        color: var(--color-linen);
        box-shadow: none;
    }
}

@media screen and (max-width:960px) {
    body #Service-Top {
        padding-top: 50px !important;
    }
}

@media screen and (max-width:767px) {
    body .iconbox h3 {
        min-height: unset !important;
    }
    body .great-element>.wpb_wrapper {
        display: block !important;
    }
    body #What-Makes-A-Great h3 {
        justify-content: flex-start !important;
        padding-right: unset! important;;
        border-right: 0px !important;;
    }
}

@media screen and (max-width: 767px) {
    body #What-Makes-A-Great .col.span_12.color-dark.left {
        max-width: calc(100% - 80px);
    }
}

/* END Spaces Styles */

/* GET STARTED Styles */
#Get-Started {
    outline: 1px solid var(--color-linen);
    outline-offset: -20px;
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* background: url(/wp-content/uploads/2025/12/Get-Started-full-bg.svg); */
        background-size: 5000px;
        overflow: visible;
        background-position: center center;
        opacity: .1;
    }
    /* & a.button.color-1.large.primary-button {
        font-size: 40px !important;
        padding: 20px 30px 20px 30px !important;
        background: var(--color-revisionred);
        &:hover {
            background: var(--color-revisionred) !important;
        }
    }
    & .button.primary-button:hover:before {
        transform: translate(-10px,-10px);
        box-shadow: 20px 20px 0 var(--color-revisionred);
        background: var(--color-revisionred);
        z-index: -1;
    }
    & .button.primary-button:hover:after {
        transform: translate(10px,10px);
    } */
}

/* Mobile Styles for Get Started */
@media (max-width: 500px) {
    #Get-Started {
        .wpb_row.vc_row-fluid.standard-section.section.section-no-parallax.stretch {
            padding-top: 72px!important;
            padding-bottom: 72px !important;
        }
        &:before {
            background-size: 2790px;
        }
        a.button.color-1.large.special-button {
            animation:none;
        }
    }
}
/* Home Page Animations */
@keyframes overlayFade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.65;
    }
}
@keyframes iconFadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes buttonFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media only screen and (min-width:1500px) {
    body #Home-Hero {
        & #Hero-Image {
            width: 100%;
            height: 799px;
        }
    }
}

@media only screen and (max-width:1200px) {
    
    body #Our-Work #Work-Columns .col.span_12 {
        gap: 20px;
    }
    body #Our-Work #Work-Columns {
        padding-left: 20px;
        padding-right: 20px;
    }
}
/* End GET STARTED */

/* General INTERAL PAGE Styles */
body.page-template-default:not(.home) {
    /* Right Oriented Line Elmements */
    :is(h1,h2,h3,h4,h5,h6).bottom-line-right {
        margin-bottom: 40px;
    }
    .color-light :is(h1,h2,h3,h4,h5,h6).bottom-line-right:before {
        content: '';
        position: absolute;
        bottom: -10px;
        background: var(--color-linen);
        height: 2px;
        right: -20px;
        width: calc(100% + 20px);
    }
    .color-dark :is(h1,h2,h3,h4,h5,h6).bottom-line-right:before {
        content: '';
        position: absolute;
        bottom: -10px;
        background: var(--color-charcole);
        height: 2px;
        right: -20px;
        width: calc(100% + 20px);
    }
    .color-light .vertical-border-right:before {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        width: 2px;
        height: 200%;
        background: var(--color-linen);
        transform: translateY(-50%);
    }
    .color-dark .vertical-border-right:before {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        width: 2px;
        height: 200%;
        background: var(--color-charcole);
        transform: translateY(-50%);
    }
    /* END RIGHT */
    /* Left Oriented Line Elements */
    :is(h1,h2,h3,h4,h5,h6).bottom-line-left {
        margin-bottom: 40px;
    }
    .color-light :is(h1,h2,h3,h4,h5,h6).bottom-line-left:before{
        content: '';
        position: absolute;
        bottom: -15px;
        left: -30px;
        width: calc(100% + 30px);
        height: 2px;
        background: var(--color-linen);
    }
    .color-dark :is(h1,h2,h3,h4,h5,h6).bottom-line-left:before{
        content: '';
        position: absolute;
        bottom: -15px;
        left: -30px;
        width: calc(100% + 30px);
        height: 2px;
        background: var(--color-charcole);
    }
    .color-light .vertical-border-left:before{
       content: '';
        position: absolute;
        top: 50%;
        left: -10px;
        width: 2px;
        height: 200%;
        background: var(--color-linen);
        transform: translateY(-50%);
    }
    .color-dark .vertical-border-left:before{
       content: '';
        position: absolute;
        top: 50%;
        left: -10px;
        width: 2px;
        height: 200%;
        background: var(--color-charcole);
        transform: translateY(-50%);
    }
    .vertical-border-left.longer:before {
        height: 400% !important;
    }
    /* END LEFT */
    #breadcrumbs, #breadcrumbs a {
        display: none;
    }
    #page-wrap {
        position: relative;
        top: 100px;
        margin-bottom: 100px !important;
    }
    h1 {
        line-height:1;
    }
    .bottom-line {
        margin-bottom: 40px;
    }
    h1.bottom-line:before {
        content: '';
        position: absolute;
        bottom: -15px;
        left: -30px;
        width: calc(100% + 30px);
        height: 2px;
        background: var(--color-linen); 
    }
    h1.bottom-line.dark-border:before {
        content: '';
        position: absolute;
        bottom: -15px;
        left: -30px;
        width: 200%;
        height: 2px;
        background: var(--color-charcole); 
    }
    h2 {
        font-size: 40px;
        font-family: 'Sherika-Regular', helvetica, sans-serif !important;
        letter-spacing: .5px;
    }
    h2.primary {
        font-size: 50px;
        font-family:'Sherika-Regular', helvetica, sans-serif !important;
        text-transform: capitalize;
        margin-bottom: 30px;
    }

    h3 {
        font-size: 20px;
        font-family: 'Ratch-Regular', Helvetica, sans-serif !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 20px;
    }

    h3.h2 {
        font-size: 28px;
        font-family: 'Ratch-Regular', Helvetica, sans-serif !important;
        text-transform: uppercase;
    }
    .button.primary-button {
        animation: buttonFadeUp 0.9s ease-out 0s forwards !important;
    }

    .content-with-vert-border {
        padding-left: 30px !important;
    }
    .content-with-vert-border:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 2px;
        height: 300%;
        background: var(--color-linen);
        transform: translateY(-50%);
    }
    .content-with-vert-border.border-dark:before {
        background: var(--color-charcole);
    }
    #page-wrap ul {
        list-style: disc outside;
    }
    #page-wrap ul li {
        margin-bottom: 7px;
        margin-left: 0px !important;
    }
    #page-wrap ::marker {
        color: var(--color-sea);
        font-size: 18px;
    }
    .portrait-img img {
        aspect-ratio: .77;
        object-fit: cover;
    }

    .landscape-img img {
        aspect-ratio: 2;
        object-fit: cover;
    }

    section.linen-wood-bg {
        background-image: url(/wp-content/uploads/2025/12/wood-texture-2b.svg);
        background-size: 60%;
    }

    section.padding-40 {
        padding: 40px;
    }

    .three-images .col.span_12 {
        display:flex;
        gap:40px;
    }

    .three-images img {
        object-fit: cover;
        aspect-ratio: .8;
    }

    .faq-revision {
        padding: 20px;
        border: 1px solid var(--color-linen);
        padding-left: 60px !important;
        i.vc_toggle_icon {
            position: absolute;
            left: 0;
            margin: 0 0 0 -40px !important;
        }
        i.vc_toggle_icon:before,
        i.vc_toggle_icon:after {
            border-color: var(--color-linen);
        }
        .vc_toggle_title:hover .vc_toggle_icon:before,
        .vc_toggle_title:hover .vc_toggle_icon:after {
            border-color: var(--color-linen) !important;
        }
        h4 {
            letter-spacing: 1px;
        }
    }
    /* .faq-revision.vc_toggle_active {
        background-color: var(--color-linen);
        h4, i, p, .color-light p {
            color: var(--color-charcole);
        }

    } */
    .faq-revision:hover {
        background: #f8f6f31a;
    }

    .single-horizonal-line-right:before {
        content: '';
        bottom: -10px;
        left: 0px;
        width: 540%;
        height: 2px;
        background: var(--color-linen);
        position: absolute;
    }
    .single-horizonal-line-right-dark:before {
        content: '';
        bottom: -10px;
        right: 0px;
        left: unset;
        width: 540%;
        height: 2px;
        background: var(--color-charcole);
        position: absolute;
    }

    .overflow-visible {
        overflow: visible;
    }

    /* #General, #Planning, #Design-Materials, Kitchen-Remodeling {
        scroll-margin-top: 200px;
    } */

}
@media (max-width:550px) {
    .page-top>.wpb_row {
        padding-top: 40px !important;
    }
}

/* MEDIA QUERIES for INTERAL PAGES */
@media (min-width:1200px) {
    body.page-template-default:not(.home) {
        #fulltitle .container {
            width: calc(100% -80px);
        }
        section.vc_section.margins-fullwidth {
            padding-inline:80px;
        }
    }
}
/*
@media (max-width:1199px) {
    body.page-template-default:not(.home) {
        .margins-fullwidth .col.span_12 {
            max-width: calc(100% - 80px) !important;
        }
    }
}
*/
@media (max-width: 959px) {
    body.page-template-default {
        .stack-at-960 > .col.span_12 > .wpb_column,
        .stack-at-960 > .col.span_12 > .vc_column_container {
            width: 100% !important;
            max-width: 100% !important;
            float: none !important;
            clear: both;
            margin-bottom: 40px !important;
        }
        .stack-at-960 .content-with-vert-border:before {
            height: 1000%;
        }
        .reverse-columns>.col.span_12 {
            display: flex;
            flex-direction: column-reverse;
        }
    }
}

@media (max-width: 767px) {
    body.page-template-default:not(.home) {
        .stack-at-768 > .col.span_12 > .wpb_column,
        .stack-at-768 > .col.span_12 > .vc_column_container {
            width: 100% !important;
            max-width: 100% !important;
            float: none !important;
            clear: both;
            margin-bottom: 40px !important;
        }
        .stack-at-768.three-images .col.span_12 {
            display: block;
        }
    }
}

@media (max-width: 550px) {
    body.page-template-default:not(.home) {
        .margins-fullwidth .col.span_12 {
            max-width: calc(100% - 40px) !important;
        }
        h1.bottom-line {
            font-size: 40px;
        }
        h2 {
            font-size: 25px;
        }
        h2.primary {
            font-size: 35px !important;
        }
    }
}

/* End INTERAL PAGE Styles */

/* Our Process PAGE Styles */
body #Process-Intro { 
    position:relative;
}

body #How-It-Works {
    img {
        object-fit: cover;
        aspect-ratio: 1.15;
    }
    h2:before {
        content: '';
        position: absolute;
        bottom: -10px;
        right: -20px;
        width: calc(100% + 20px);
        height: 2px;
    }
    .howitworks-text:before {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        width: 2px;
        height: 200%;
        transform: translateY(-50%);
    }
}

body #Process-The-Process {
    &>.wpb_row {
        overflow: visible;
    }
    
    h2:before {
        content: '';
        bottom: -10px;
        left: 0px;
        width: 150%;
        height: 2px;
        background: var(--color-charcole);
        position: absolute;
    }
}

body .process-phases {
    &:before {
        color: var(--color-forest);
    }
    h3.h2 {
        color: var(--color-forest);
        font-size: 34px !important;
        margin-bottom: 30px !important;
    }
    .phase-number {
        display: block;
        font-size: 1rem;
    }
    h4 {
        font-weight: 700 !important;
        letter-spacing: 1px;
        display: inline-block;
    }
    b {
        display: block;
    }
    em {
        color: var(--color-forest);
        font-style: normal;
        font-weight: 500;
    }
}

body #Process-Phase-1 {
    overflow: visible;
    &>.wpb_row {
        overflow: visible;
    }
    &:before {
        content: '1';
        position: absolute;
        width: 80px;
        height: 80px;
        left: 20%;
        top: -35px;
        background-color: transparent;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 45px;
    }
    &:after {
        content: '';
        position: absolute;
        width: 80px;
        height: 80px;
        border-left: 2px solid var(--color-charcole);
        left: 20%;
        top: -41px;
        border-bottom: 2px solid var(--color-charcole);
        transform: rotate(-45deg);
        background-color: var(--color-linen);
        z-index: 99;
        clip-path: polygon(4% 0, 100% 96%, 100% 100%, 0 100%, 0 0);
    }
}

body #Process-Phase-2 {
    overflow: visible;
    &>.wpb_row {
        overflow: visible;
    }
    &:before {
        content: '2';
        position: absolute;
        width: 80px;
        height: 80px;
        left: 50%;
        top: -35px;
        background-color: transparent;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 45px;
    }
    &:after {
        content: '';
        position: absolute;
        width: 80px;
        height: 80px;
        border-left: 2px solid var(--color-charcole);
        left: 50%;
        top: -41px;
        border-bottom: 2px solid var(--color-charcole);
        transform: rotate(-45deg);
        background-color: var(--color-linen);
        z-index: 99;
        clip-path: polygon(4% 0, 100% 96%, 100% 100%, 0 100%, 0 0);
    }
    .col.span_12:before {
        content: '';
        top: -62px;
        left: 0px;
        width: 100%;
        height: 2px;
        background: var(--color-charcole);
        position: absolute;
    }
}

body #Process-Phase-3 {
    overflow: visible;
    &>.wpb_row {
        overflow: visible;
    }
    &:before {
        content: '3';
        position: absolute;
        width: 80px;
        height: 80px;
        left: 20%;
        top: -35px;
        background-color: transparent;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 45px;
    }
    &:after {
        content: '';
        position: absolute;
        width: 80px;
        height: 80px;
        border-left: 2px solid var(--color-charcole);
        left: 20%;
        top: -41px;
        border-bottom: 2px solid var(--color-charcole);
        transform: rotate(-45deg);
        background-color: var(--color-linen);
        z-index: 99;
        clip-path: polygon(4% 0, 100% 96%, 100% 100%, 0 100%, 0 0);
    }
    .col.span_12:before {
        content: '';
        top: -62px;
        left: 0px;
        width: 100%;
        height: 2px;
        background: var(--color-charcole);
        position: absolute;
    }
}

body #Process-Phase-4 {
    overflow: visible;
    &>.wpb_row {
        overflow: visible;
    }
    &:before {
        content: '4';
        position: absolute;
        width: 80px;
        height: 80px;
        left: 50%;
        top: -35px;
        background-color: transparent;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 45px;
    }
    &:after {
        content: '';
        position: absolute;
        width: 80px;
        height: 80px;
        border-left: 2px solid var(--color-charcole);
        left: 50%;
        top: -41px;
        border-bottom: 2px solid var(--color-charcole);
        transform: rotate(-45deg);
        background-color: var(--color-linen);
        z-index: 99;
        clip-path: polygon(4% 0, 100% 96%, 100% 100%, 0 100%, 0 0);
    }
    .col.span_12:before {
        content: '';
        top: -62px;
        left: 0px;
        width: 100%;
        height: 2px;
        background: var(--color-charcole);
        position: absolute;
    }
}

body #Process-Phase-5 {
    overflow: visible;
    &>.wpb_row {
        overflow: visible;
    }
    &:before {
        content: '5';
        position: absolute;
        width: 80px;
        height: 80px;
        left: 20%;
        top: -35px;
        background-color: transparent;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 45px;
    }
    &:after {
        content: '';
        position: absolute;
        width: 80px;
        height: 80px;
        border-left: 2px solid var(--color-charcole);
        left: 20%;
        top: -42px;
        border-bottom: 2px solid var(--color-charcole);
        transform: rotate(-45deg);
        background-color: var(--color-linen);
        z-index: 99;
        clip-path: polygon(4% 0, 100% 96%, 100% 100%, 0 100%, 0 0);
    }
    .col.span_12:before {
        content: '';
        top: -62px;
        left: 0px;
        width: 100%;
        height: 2px;
        background: var(--color-charcole);
        position: absolute;
    }
}


@media (max-width: 1199px) {
    body #How-It-Works {
        img {
            aspect-ratio: .75;
            object-position: left;
        }
    }
}

/* @media (max-width: 1104px) {
    body #Process-Intro img {
        aspect-ratio: 1.15;
    }
}
@media (min-width:960px) and (max-width:1047px) {
    body #Process-Intro img {
        aspect-ratio: 1;
    }
} */
@media (max-width: 959px) {
    body #How-It-Works {
        img {
            aspect-ratio: unset;
        }
        .howitworks-text:before {
            height: 500%;
        }
    }
}

body .process-get-started h2 {
    max-width: 800px;
    margin: auto;
    text-transform: capitalize !important;
}


/* End Our Process PAGE Styles */

/* Our Work Page styles */
body {
    .featured-projects-title {
        overflow: visible;
    }
    .featured-title-block>.wpb_wrapper {
        text-align: center;
    }
    .featured-title-block h2 {
        display: inline-block;
    }
    .featured-title-block h2:before {
        content: '';
        bottom: -10px;
        left: 0px;
        width: 440%;
        height: 2px;
        background: var(--color-linen);
        position: absolute;
    }
    .search-projects-title {
        overflow: visible;
    }
    .search-title-block>.wpb_wrapper {
        text-align: center;
    }
    .search-title-block h2 {
        display: inline-block;
    }
    .search-title-block h2:before {
        content: '';
        bottom: -10px;
        right: 0px;
        width: 320%;
        height: 2px;
        background: var(--color-charcole);
        position: absolute;
    }
}



/* End Our Work styles */


/* Project Single styles */
body {
    position:relative;
    a.pp_previous:after {
        font-size: 70px;
        opacity: .8;
        background:none;
    }
    a:hover.pp_previous:after {
        font-size: 80px;
        opacity: 1;
        background:none;
    }
    a.pp_next:after {
        font-size: 70px;
        opacity: .8;
        background:none;
    }
    a:hover.pp_next:after {
        font-size: 80px;
        opacity: 1;
        background:none;
    }
    div.pp_default .pp_nav .currentTextHolder {
        font-size: 20px;
    }
}
/* End Project Single styles */

/* PrettyPhoto Mobile Arrow Fix */
@media (max-width: 767px) {
    /* Reposition arrows to far edges of viewport */
    a.pp_previous,
    a.pp_next {
        position: fixed !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 20002 !important;
        width: 50px !important;
        height: 80px !important;
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    a.pp_previous {
        left: 5px !important;
        right: auto !important;
    }

    a.pp_next {
        right: 5px !important;
        left: auto !important;
    }

    a.pp_previous:after,
    a.pp_next:after {
        font-size: 40px !important;
        opacity: 1 !important;
        color: #fff !important;
        text-shadow: none !important;
        background: none !important;
        top: 0 !important;
    }

    /* Fix bottom navigation centering */
    .pp_details {
        text-align: center !important;
    }

    .pp_nav {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;
        margin: 0 auto !important;
    }

    a.pp_close {
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}
/* End PrettyPhoto Mobile Arrow Fix */

/* Contact Page styles */
body #Contact-Text {
    .portrait-img img {
        aspect-ratio: 1.2;
        object-fit: cover;
    }
    .content-with-vert-border:before {
        height: 1000%;
    }
}
body #Contact-Form {
    #gform_1 {
        legend {
            font-size: 1.5rem;
            line-height: 1;
        }
        label.gfield_label.gform-field-label {
            font-size: 1.5rem;
        }
        label.gform-field-label.gform-field-label--type-sub {
            margin-bottom: 0px;
            font-size: 15px;
        }
        div#input_1_18 {
            display: flex;
            flex-direction: row;
        }
        input#gform_submit_button_1 {
            background: var(--color-charcole);
            color: var(--color-linen);
            text-transform: uppercase;
            font-size: 1.2rem;
            letter-spacing: 1px;
            font-family: 'Ratch-Regular', arial, sans-serif !important;
            padding: 10px 25px 13px;
            border: 2px solid var(--color-charcole);
        }
        input {
            font-size: 16px !important;
        }
        input#gform_submit_button_1:hover {
            background: transparent;
            color: var(--color-charcole);
            font-weight: 600;
        }
    }
}

@media only screen and (max-width: 767px) {
    body #Contact-Form{
        .wpb_row .span_12 {
            max-width: unset;
        }
    }
}

/* End Contact Page styles */

/* Team Page styles */
body { 
    .designteam-title-block>.wpb_wrapper {
        text-align: center;
    }
    .designteam-title-block h2 {
        display: inline-block;
    }
    .designteam-title-block h2:before {
        content: '';
        bottom: -10px;
        left: 0px;
        width: 440%;
        height: 2px;
        background: var(--color-charcole);
        position: absolute;
    }
    .cpt_cc_framework_featured_image {
        overflow: hidden;
    }
    a.cpt_cc_framework_image_link img {
        aspect-ratio: 3 / 4;
        object-fit: cover;
        transform: scale(1);
        transition: .5s;
    }
    a.cpt_cc_framework_image_link:hover img {
        transform: scale(1.025);
        transition: .5s;
    }
    .team_list_content {
        position: relative;
        text-align: center;
    }
    .team_list_content h3 {
        text-transform: Capitalize !important;
        font-size: 28px !important;
        padding-top: 10px;
        margin-bottom: 0px !important;
    }
    .team_list_content h3 a {
        text-decoration: none !important;
    }
    a.bio-link {
        position: relative;
        display: inline-block;
        border: 1px solid var(--color-charcole);
        text-decoration: none !important;
        padding: 5px 15px;
        text-transform: uppercase;
        margin-top: 15px;
        line-height: 1;
        font-size: 16px;
        letter-spacing: 0.5px;
    }
    a.bio-link:hover {
        background: var(--color-charcole);
        color: var(--color-linen) !important;
    }
}

body.single-team {
    #fulltitle {
        display:none;
    }
    #page-wrap #content {
        margin-top: 100px;
        background-image: url(/wp-content/uploads/2025/12/wood-texture-2b.svg);
        background-size: 60%;
        padding-left: 40px;
        padding-right: 40px;
    }
    .team_detail_wrapper {
        padding-top: 60px;
    }
    .team_detail_wrapper h1.bottom-line {
        display: inline-block;
    }
    h1.bottom-line:before {
        content: '';
        position: absolute;
        bottom: -8px;
        left: -40px;
        width: 600%;
        height: 2px;
        background: var(--color-charcole);
    }
    p.team_member_department {
        font-size: 24px;
        line-height:1.2;
        font-family: 'Ratch-Regular', Helvetica, sans-serif !important;
        text-transform: uppercase;
        letter-spacing: .5px;
    }
    p.team_fun_fact {
        background: var(--color-sea);
        color: var(--color-charcole);
        padding: 20px;
    }
    .nav_item a {
        text-decoration: none !important;
        position:relative;
        line-height:1;
    }
    .nav_label {display:none !important}
    .nav_item.nav_prev a:before {
        content: '';
        background: url(/wp-content/uploads/2025/12/previous-arrow.svg);
        position: absolute;
        top: 0;
        left: -25px;
        width: 15px;
        height: 25px;
        background-size: contain;
        background-repeat: no-repeat;
    }
        .nav_item.nav_next a:after {
        content: '';
        background: url(/wp-content/uploads/2025/12/next-arrow.svg);
        position: absolute;
        top: 0;
        right: -25px;
        width: 15px;
        height: 25px;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

@media (max-width: 1099px) {
    body.single-team .team_detail_wrapper h1.bottom-line {
        font-size: 45px;
    }

}

@media (max-width: 1015px) {
    body.single-team .team_detail_featured_image {
        max-width: 350px;
    }
    body.single-team .team_detail_wrapper h1.bottom-line {
        font-size: 40px;
    }
}
@media (max-width: 768px) {
    body.single-team {
        .team_detail_wrapper h1.bottom-line {
            display: block;
            clear: both;
        }
        h1.bottom-line:before {
            left: 0;
        }
    }

}

@media (max-width: 430px) {
    body.page-template-default:not(.home) #page-wrap ul li {
        margin-bottom: 7px;
        margin-left: 0px !important;
    }
    body.single-team .team_detail_featured_image {
        max-width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.single-team .team_detail_wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }
    body.single-team .team_fun_fact strong {
        padding-left: 0px;
        padding-right: 0px;
    }
    body.single-team .project_navigation {
        max-width: 90%;
    }
}

/* END Team Page styles */

/* Design Studio styles */

body {
    #DS-Hero {
        h1.bottom-line:before {
            width: calc(100% + 20px) !important;
        }
    }
    #Our-Work.makes-us-different .work-col {
        pointer-events: none;
    }
    #Our-Work.makes-us-different .work-col .wpb_text_column {
        position: relative;
        bottom: 0px;
        background: var(--color-revisionred);
        padding-top: 20px;
    }
    #Our-Work.makes-us-different .work-col > .wpb_wrapper:hover .wpb_text_column {
        bottom: 0px !important;
    }
    #Our-Work.makes-us-different .work-col p {
        height: 70px;
    }
    #Our-Work.makes-us-different .work-col img {
        aspect-ratio: 1;
    }
    #Step-Inside h2.primary.bottom-line:before {
        content: '';
        position: absolute;
        bottom: -15px;
        left: -30px;
        width: calc(100% + 30px);
        height: 2px;
        background: var(--color-linen);
    }
}

@media screen and (max-width: 730px) {
    #Our-Work.makes-us-different .work-col h3 {
        font-size: 1.5rem !important;
    }
    #Our-Work.makes-us-different .work-col .wpb_text_column {
        background: var(--color-revisionred) !important;
    }
}


/* END Design Studio styles */

/* Footer Styles */
#footer {
    overflow: hidden;
    position: relative;
    font-size: 16px;
    a:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    & .widget h3 {
        font-size: 24px !important;
        letter-spacing: .5px;
        position: relative;
    }

    & .footer-address {
        position: relative;
    }

    
    & .footer-address a {
        display: inline-block;
    }

    & .img-wrap {
        position: relative;
        top: 4px;
        display: inline-block;
        margin-right: 18px;
    }

    & .img-wrap:before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        width: 20px;
        height: 20px;
        border: 2px solid var(--color-sea);
        opacity: 0;
        transition: all .5s;
    }

    & .icon a:hover .img-wrap:before {
        top: -5px;
        left: -5px;
        opacity: 1;
    }

    & .img-wrap:after {
        content: '';
        position: absolute;
        top: -2px;
        right: -2px;
        width: 20px;
        height: 20px;
        border: 2px solid var(--color-sea);
        opacity: 0;
        transition: all .25s;
    }

    & .icon a:hover .img-wrap:after {
        top: 0px;
        right: -5px;
        opacity: 1;
    }
    #nav_menu-2 {
        margin-bottom: 0px !important;
    }
    & #nav_menu-2 ul {
        margin-top: 0px !important;
    }

    & #nav_menu-2 ul li {
        border-bottom: unset;
        padding: 0px 10px 20px 0;
        text-transform: uppercase;

        &:after {
            display: none;
        }

        a {
            margin-left: 25px;
            display: inline-block;
            @media (max-width: 767px) {
                margin-left:0px;
            }
         }
            :hover {
                color: var(--color-sea);
                text-decoration: underline;
                text-underline-offset: 4px;
            }
        a:hover {
            text-decoration: underline;
            text-underline-offset: 3px;
        }
    }

    & #media_image-2 {
        opacity: .8;
    }

    & .container .one-third.columns:last-child {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    & #custom_html-2 {
        width: 80%;
        margin: auto;
    }

    & .socials-wrapper {
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
    }

    & i.fab,
    & i.fa-brands,
    & i.fas {
        font-family: 'FontAwesome';
        font-style: unset;
        font-size: 20px;
        color: var(--color-brass);
        opacity: 1;
        transition: .25s ease-in-out;

        &:hover {
            opacity: .8;
            text-decoration: none;
            color: var(--color-linen);
        }
    }
    #custom_html-3 .textwidget.custom-html-widget {
        @media (min-width: 768px){
            text-align: right;
        }
    }
    #sb_instagram {
        padding-bottom: 0px !important;
    }
}
/* TESTIMONIALS PAGE STYLES */
#testimonials-first-section .vertical-border-left:before {
    height: 400%;
}
#testimonials-first-section .bottom-line-left:before {
    width: calc(100% + 30px);
}
#testimonials-section > .wpb_row {
    padding: 30px 0px;
}
#testimonials-section > .wpb_row > .col {
    display: flex;
    flex-wrap: wrap;
}
#testimonials-section .wpb_row .testimonial-wrap .testimonial {
    background: var(--color-linen);
    color: var(--color-charcole);
    box-shadow: unset;
    border: 2px solid var(--color-forest);
    border-radius: unset;
    padding-bottom: 25px;
}
#testimonials-section .wpb_row .testimonial-wrap {
    background-color: var(--color-linen);
}
#testimonials-section .wpb_row .testimonial-wrap .testimonial-author {
    border: 1px solid var(--color-forest);
    padding: 30px 24px;
    background: var(--color-forest);
    margin: unset;
    color: var(--color-linen);
}
#testimonials-section .wpb_row .testimonial-wrap .testimonial:before {
    border-top-color: var(--color-linen);
}
#testimonials-section .wpb_row .testimonial-wrap .testimonial:after {
    display: none;
}

#testimonials-section .wpb_row .testimonial-wrap .testimonial-author span {
    color: var(--color-linen);
    font-size: 0.875rem;
    font-style: italic;
    padding-top: 5px;
}
/* END TESTIMONIALS PAGE STYLES */

/* CAREERS PAGE STYLES */
#careers-first-section {
    & .vertical-border-left:before{
        height: 400%;
    }
    & h1.bottom-line-left:before {
        width: 200%;
    }
}
#Working-At h2.bottom-line.primary:before {
    content: '';
    position: absolute;
    bottom: -15px;
    left: -30px;
    width: calc(100% + 30px);
    height: 2px;
    background: var(--color-linen);
}
/* END CAREERS PAGE STYLES */

/* BLOG PAGE STYLES */
body {
    .vertical-blog-border-left {
        overflow:visible;
    }
    .vertical-blog-border-left:before{
        content: '' !important;
        position: absolute;
        top: 50%;
        left: -10px;
        width: 2px;
        height: 200% !important;
        background: var(--color-charcole);
        transform: translateY(-50%);
        visibility: visible !important;
    }

    .blog_list_wrapper.cpt_cc_framework_wrapper {
        border-bottom: 1px solid var(--color-charcole);
        padding-bottom: 40px;
    }

    .blog_list_content a {
        color: var(--color-revisionred) !important;
        text-decoration: none !important;
    }

    .blog_list_content a.read-more-link {
        font-weight: 500;
        text-wrap: nowrap;
    }
    .blog_list_featured_image.vc_col-sm-4 {
        padding-left: 0px !important;
    }
    .blog_list_content.vc_col-sm-8 {
        padding-right: 0px !important;
    }
    .blog_list_content h2 {
        margin-bottom: 10px;
        text-transform: unset !important;
        line-height: 1.1;
    }
    .blog_list_content h2 a:hover {
        text-decoration: underline !important;
    }
    span.blog_date {
        font-weight: 500;
        font-size: 1rem;
        letter-spacing: .5px;
        font-family: 'Ratch-Regular';
        text-transform: uppercase;
    }
}

@media screen and (max-width: 767px) {
    body {
        .blog_list_content {
            padding-left: 0px !important;
            padding-top: 20px;
        }
    }
}

/* Blog Singles Styles */

@media screen and (min-width: 1290px) {
    body {
        .blog_content .vc_col-sm-12 {
            padding-inline: 0px !important;
        }
    }
}
@media screen and (max-width: 768px) {
    body {
        .blog_detail_wrapper .blog_title {
            font-size: 2.0rem;
        }
    }
}

@media screen and (max-width: 479px) {
    body {
        .blog_detail_wrapper .blog_title {
            font-size: 1.8rem;
        }
    }
}

/* END BLOG PAGE STYLES */


/* FAQ Page Styles  */
body.page-template-default:not(.home) {
    #FAQ-Hero .wpb_row.stack-at-960 {
        margin-bottom: 0px;
    }
    .faq-revision.dark-lines {
        border-color: var(--color-charcole) !important;
        i.vc_toggle_icon:before, i.vc_toggle_icon:after {
            border-color: var(--color-charcole) !important;
        }
        i.vc_toggle_icon:after, i.vc_toggle_icon:after {
            border-color: var(--color-charcole) !important;
        }
    }
    .faq-revision.dark-lines {
        .vc_toggle_title:hover .vc_toggle_icon:before,
        .vc_toggle_title:hover .vc_toggle_icon:after {
            border-color: var(--color-charcole) !important;
        }
    }
}

/* CookieYest Styles */
.cky-modal button.cky-show-desc-btn {
    color: var(--color-revisionred)!important;
}
.cky-modal button.cky-show-desc-btn:hover {
    color: black!important;
}

/* -------- MEDIA QUERIES for Footer-------- */

@media (max-width: 1199px) {
    #footer {
        .container {
            display: flex;
        }

        .one-third.columns:first-child {
            width: 50%;
        }

        .one-third.columns:nth-child(2) {
            width: 25%;
        }

        .one-third.columns:last-child {
            width: 25%;
        }
    }
}

@media (max-width: 959px) {
    #footer {
        & .one-third:first-child #text-2:before {
            left: -10px;
        }

        & .widget h3:before {
            left: -20px;
        }
    }
}

@media (max-width: 767px) {
    #footer {
        .container {
            display: flex;
            flex-direction: column;
        }

        .one-third.columns:first-child {
            width: 100%;
        }

        .one-third.columns:nth-child(2) {
            width: 100%;
        }

        .one-third.columns:last-child {
            width: 100%;
        }

        & .one-third:first-child #text-2:before {
            top: -100px !important;
            left: -20px;
        }
    }
}

@media (min-width: 768px) {
    #footer {
        #nav_menu-2 h3:before {
            left: -70px !important;
        }
    }
}
#copyright {
    border-top: 1px solid var(--color-brass);
    .copyright-text {
        text-align: center;
        float: unset;
        font-size: .7rem;
        font-family: "HostGrotesk", arial, sans-serif;
        letter-spacing: 1px;
        color:#ffffff;
        max-width: 700px;
        margin:auto;
    }
    a {text-decoration: underline;}
    a:hover {opacity: 0.85;}
}






/* Ajxa Search Styles */
#ajaxsearchlite1 {
    padding-top: 20px;
}

#ajaxsearchliteres1 {
    z-index: 99999999;
}

#close-search-btn {
  position: absolute;
  top: 48%;
  right: -62px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
  z-index: 10;
}

.asl_w_container.asl_w_container_1 {
    width: 83%;
    margin-left: 18%;
}

.promagnifier {
    margin-top: 16px;
}

div.asl_m #ajaxsearchlite1 .probox .proinput {
    margin-top: -13px;
}

#ajaxsearchlite1 > div > div.proinput > form > input.orig {
    bottom: 31px
}

.proinput form {
    background: unset;
}


#mobile-navigation .container ul {
    margin: 118px 0 30px 0 !important;
}

/* Safari-only hack */
_::-webkit-full-page-media, _:future, :root #mobile-navigation .container ul {
    margin-top: 86px !important;
}

@media (max-width: 775px) {
    #mobile-navigation .container ul {
            margin: 70px 0 30px 0 !important;
    }
}



/* Experiment */
@media screen and (min-width:960px) {
    .always-full .col.span_12 {
        display: flex;
        align-items: stretch;
    }

    .always-full .image-column * {
        height: 100%;
    }
    .always-full .image-column img {
        object-fit:cover;
    }
}
/*
#DS-Hero .image-column img {
    border: 10px solid #722413;
    outline: 1px solid var(--color-linen);
    outline-offset: 10px;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
}

#DS-Hero .image-column .vc_single_image-wrapper:before {
    content: ' ';
    position: absolute;
    top: -15px;
    left: 3px;
    width: 30px;
    height: 30px;
    border-top: 1px solid var(--color-linen);
    border-bottom: 1px solid var(--color-linen);
    z-index: 9;
    background: #722413;
    transform: rotate(45deg);
}
#DS-Hero .image-column .vc_single_image-wrapper:after {
    content: ' ';
    position: absolute;
    bottom: -17px;
    right: 5px;
    width: 30px;
    height: 30px;
    border-top: 1px solid var(--color-linen);
    border-bottom: 1px solid var(--color-linen);
    z-index: 9;
    background: #722413;
    transform: rotate(45deg);
} */


/* Pricing Guide */
body {
    .pricing-row .col.span_12 {
        display: flex;
    }

    .pricing-status .wpb_wrapper,
    .minti_boxedholder {
        height: 100%;
    }

    .pricing-status .minti_boxedholder {
        background: var(--color-forest);
    }

     .custom-status {
        background-color: var(--color-charcole);
    }

    .custom-status h3 strong {
        display: block;
        font-size: 3rem;
        font-family: 'Sherika-Regular';
        line-height: 80px;
        font-weight: 600;
        height: 60px;
        padding: 20px 20px 0px 20px;
        letter-spacing: .2rem;
    }
    .custom-status h3 em {
        padding: 0 20px 30px;
        display: block;
        text-transform: CAPITALIZE;
        font-style: normal;
    }
    .pricing-status .status-bullets {
        padding: 0 40px 40px;
        font-size: 1.1rem;
    }
    .joined-pricing-grid{
        display: grid;
        grid-template-columns: 50% 50%;
    }
    .joined-pricing-grid h3:first-of-type {
        border-right: 2px solid var(--color-linen);
    }
    .joined-pricing-grid h3:last-of-type {
        border-left: 2px solid var(--color-linen);
    }
    .joined-pricing-grid h3 {
    margin-bottom: 0px !important;
    }
    .custom-status .joined-pricing-grid b {
        text-transform: uppercase;
        margin-block: 10px 0px;
        display: block;
    }
    #Bathroom .pricing-status .minti_boxedholder {
        background: var(--color-linen);
    }
    #Bathroom .pricing-status .minti_boxedholder p,
    #Bathroom .pricing-status .minti_boxedholder ul {
        color: var(--color-charcole);
    }

    .pg-form-toggle .toggle {
        text-align: center;
        border: 2px solid var(--color-charcole);
        text-transform: uppercase;
        color: var(--color-linen);
    }
    .pg-form-toggle .toggle .toggle-title {
        text-transform: uppercase;
        color: var(--color-linen);
        background-color: var(--color-charcole);
    }
    .pg-form-toggle .toggle:hover .toggle-title {
        color: var(--color-charcole);
        background-color: var(--color-linen);
    }
}


@media screen and (max-width: 959px) {
    body .kitchen-pricing.stack-at-960>.col.span_12 {
        display: flex;
        flex-direction: column;
    }
}


@media screen and (max-width: 600px) {
    body .joined-pricing-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
    }
    body .joined-pricing-grid h3:first-of-type {
        border-right: 0px;
        border-bottom: 2px solid var(--color-linen);
    }
    body .joined-pricing-grid h3:last-of-type {
        border-left: 0px;
    }
}



/* Recognition Page */

body #Recognition{
    .vc_gitem-post-data-source-post_title {
        display: none;
    }
    .vc_gitem-post-data-source-post_excerpt {
        color: var(--color-linen);
        font-weight: 400;
    }
    .vc_grid-item.vc_clearfix.vc_col-sm-4.vc_visible-item {
        padding:20px;
     }
}

body .work-col.recognition p {
    height: 60px !important;
    align-items: center !important;
}
body .work-col.recognition .wpb_text_column {
    bottom: -80px !important;
    width: calc(100% - 40px) !important;
}
body .work-col.recognition img {
        aspect-ratio: 9 / 12 !important;
}
body .work-col.recognition .top-left img.vc_single_image-img.attachment-full {
    object-position: top left;
}

body .recognition-h1:before {
    width: 200% !important;
    left: 0px !important;
}

@media screen and (max-width: 959px) {
    .MobileHideMe {
        display:none;
    }
}

@media screen and (max-width: 400px) {
    body .mobile-h1 {
        font-size: 40px;
    }
}

body #page-wrap span.source-serif {
    font-family: 'Source-Serif', serif !important;
    font-size: 1.1em !important;
}



/* ///////////////////////////////  

New Hompage Styles Feb 12, 2026 

/////////////////////////////// */


/* Get to Know Us */
#Get_To_Know_Us {
	padding-top: 40px !important;
}
#Get_To_Know_Us>.wpb_row {
    @media (min-width:768px){
	height: 500px;
    }
}
#Get_To_Know_Us .wpb_row .col.span_12 {
    margin-left: 40px;
    @media (min-width:1281px) {
        margin-left: auto;
        margin-right: auto;
    }
    
}

@media (max-width:767px){
    #Get_To_Know_Us img {
        height: 400px;
    }
}

#Get_To_Know_Us {
    .studio-image>.wpb_wrapper, .img-side-by-side, .img-side-by-side .wpb_wrapper, .img-side-by-side p {
        height: 100%;
    }
}

.img-side-by-side p img:first-of-type {
    width: 334px;
    object-fit: cover;
    @media (max-width:767px) {
        width:calc(100% - 40px);
        margin-bottom:40px;
    }
}
.img-side-by-side p img:last-of-type {
    @media (max-width:767px) {
        display:none;
    }
}
.img-side-by-side p {
    display: flex;
}

#Get_To_Know_Us p.short-bar {
    @media (max-width: 1100px) {
        display: none;
    }
}


/* Designs that Win Hearts */
#Designs_Win_Hearts .vc_item {
    display: flex;
    align-items: center;
}
.home-carousel .owl-stage {
    display: flex;
    align-items: center;
}
.home-carousel .owl-item a {
    justify-content: center;
    display: flex;
}
.home-carousel .imagebox {
    background: transparent;
    border: 0px;
    box-shadow: none;
	color: var(--color-charcole);
	font-size: 16px;
	text-transform: uppercase;
	font-family: 'Ratch-Regular';
	max-height: 400px;
    width: auto;
    text-align:center;
    overflow: visible;
}
.home-carousel .imagebox .imagebox-img {
    padding: 20px !important;
}
.home-carousel .imagebox a img:hover {
    outline: 1px solid var(--color-charcole);
	outline-offset: 10px;
}
.home-carousel .imagebox .imagebox-img img {
    margin-bottom: 0px !important;
		max-height: 400px;
    width: auto;
}
.home-carousel.owl-theme .owl-controls .owl-nav [class*=owl-] {
	position: relative;
}
.home-carousel.owl-theme .owl-controls .owl-nav .owl-prev, .home-carousel.owl-theme .owl-controls .owl-nav .owl-next {
    opacity: 1;
    background: none;
}
.home-carousel.owl-theme .owl-controls .owl-nav .owl-prev:after, .home-carousel.owl-theme .owl-controls .owl-nav .owl-next:after {
	color: var(--color-charcole);
}
.minti_carousel .wpb_content_element {
    margin-bottom: 0px;
}
.home-carousel.owl-theme .owl-controls {
    margin-top: 30px;
}
.home-carousel.owl-theme .owl-controls .owl-nav .owl-prev, .home-carousel.owl-theme .owl-controls .owl-nav .owl-next {
    left: unset;
    right: -15%;
}
.home-carousel.owl-theme .owl-controls .owl-nav .owl-prev:after {
    content: '';
    width: 150px;
    height: 20px;
    background: url(/wp-content/uploads/2026/02/carousel-arrow.svg);
    background-repeat: no-repeat;
	transform: rotate(180deg);
}
.home-carousel.owl-theme .owl-controls .owl-nav .owl-next:after {
    content: '';
    width: 150px;
    height: 20px;
    background: url(/wp-content/uploads/2026/02/carousel-arrow.svg);
    background-repeat: no-repeat;
}



/* Where We Work */

#Where_We_Work>.wpb_row,
#Where_We_Work>.wpb_row .vc_col-sm-6{
    @media (min-width:768px) {
	    height: 500px;
    }
}
#Where_We_Work>.wpb_row .vc_col-sm-6.image-column{
    @media (max-width:767px) {
	    height: 300px !important;
    }
}
#Where_We_Work .wpb_row .col.span_12 {
    margin-right: 40px;
    @media (max-width:767px) {
        display:flex;
        flex-direction:column;
        margin-right:unset;
        align-items: center;
    }
}
#Where_We_Work .vc_col-sm-6.fullheight-brass-line-right {
    border-right: 1px solid var(--color-brass);
}
#Where_We_Work  .fullheight-brass-line-right .col.span_12 {
    border-right: 0px;
}
.overlay-circle-lines:before {
	content: '';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	z-index: 9;
	background: url(/wp-content/uploads/2026/02/where-we-work-lines.png);
	background-position: center center;
    @media (max-width:767px) {
        background-size: 800px;
    }
}
#Where_We_Work {
    .image-column {
        .wpb_wrapper,
        .wpb_single_image,
        figure,
        .vc_single_image-wrapper,
        img {
            height: 100%;
        }
    }
}

#Where_We_Work .image-column img {
    @media (max-width:767px) {
        max-height: 300px;
        object-fit: cover;
    }
}


/* Home Quotes */
#Home_Quotes .wpb_wrapper p:first-of-type {
    font-family: 'Source-Serif';
}

#Home_Quotes .wpb_wrapper p:last-of-type {
    font-size: .9rem;
    letter-spacing: 1px;
}
#Home_Quotes .brass-divider {
    border-right: 1px solid var(--color-brass);
    @media (max-width:767px) {
        border-right: none !important;
        border-bottom: 1px solid var(--color-brass);
        padding-bottom: 40px;
    }
}
@media only screen and (min-width:768px) {
	#Home_Quotes .col.span_12 {
			display: flex;
	}
}

#Home_Slideshow .flexslider .slides img {
    max-height: 550px;
    object-fit: cover;/
}

/* Friendly People */

#The-Team>.wpb_row {
    @media (max-width:767px) {
        padding-bottom: 0px !important;
    }
}

#The-Team .col.span_12 {
    @media (max-width:767px) {
        display: flex;
        flex-direction: column-reverse;
    }
}
#The-Team .vc_col-sm-5 {
    @media (max-width:767px) {
        margin-bottom: 0px;
    }
}

.home-team-photo .vc_single_image-wrapper {
    @media (max-width:767px) {
        margin-bottom: 20px;
    }
}

.home-team-photo .vc_single_image-wrapper:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;
    background: url(/wp-content/uploads/2026/02/brass-circle-line.png);
    background-position: center center;
	background-position: top left;
    background-repeat: no-repeat;
    background-size: 250px;
    @media (max-width:479px) {
        content: none;
    }
}


/* Start A Conversation. */
#Start_A_Convo {
    @media (min-width:768px) {
        height: 248px;
    }
}
#Start_A_Convo:before {
    @media (min-width:767px) {
        content: '';
        height: 100%;
        width: 500px;
        position: absolute;
        background: url(/wp-content/uploads/2026/02/start-conversation-left-shapes.png);
        top: 0;
        left: 0;
        background-repeat: no-repeat;
    }
}
#Start_A_Convo:after {
    content: '';
    height: 100%;
    width: 248px;
    position: absolute;
    background: url(/wp-content/uploads/2026/02/start-conversation-right-shapes.png);
    top: 0;
    right: 0;
    background-repeat: no-repeat;
}

#Start_A_Convo .flex-row .col.span_12 { 
	display: flex;
}

#Start_A_Convo .vc_col-sm-5 {
  flex: 0 1 40%;
  min-width: 500px;
  @media (max-width:767px) {
    display: none;
  }
}

#Start_A_Convo .vc_col-sm-7 {
    flex: 1 1 60%;
}
@media (max-width: 767px) {
  #Start_A_Convo .flex-row .col.span_12 {
    flex-direction: column;
  }
   #Start_A_Convo .vc_col-sm-5,
   #Start_A_Convo .vc_col-sm-7 {
    min-width: 100%;
  }
}
@media (max-width:1199px) {
    #Start_A_Convo:after {
        display:none;
    }
}
@media (min-width: 768px) and (max-width: 959px) {
    #Start_A_Convo>.wpb_row {
        padding-top: 25px !important;
    }
}
/* New OUR WORK Styles Feb 24, 2026 */

/* Our Work */

#Winning-Craftsmanship {
    padding-inline: 40px;
    .source-serif {
        line-height: 0.85em !important;
        margin-left: 0px !important;
        font-size: 1.0rem !important;
	}
    .portrait-img img {
    aspect-ratio: unset;
        @media (max-width:767px) {
            aspect-ratio: 16 / 9;
            margin-bottom: 40px;
        }
    object-fit: cover;
        @media (min-width:767px) {
            max-height: 500px;
        }
    }
    .vc_col-sm-5 {
        height: 500px;
        padding: 40px 40px 0 40px !important;
        @media (min-width:768px) {
            border-left: 2px solid var(--color-brass);			
            background: url(/wp-content/uploads/2026/02/award-winning-shapes.png);
            background-size: 100%;
            position: relative;
            background-repeat: no-repeat;
            background-position: bottom left;
        }
        @media (max-width:767px) {
            padding-bottom: 40px !important;
        }
        @media (min-width:1515px) {
            background-size: 592px;
        }
    }
	.vc_col-sm-7 {
		padding-left: 0px !important;
		padding-right: 0px !important;
		@media (min-width:768px) {
		    border-right: 2px solid var(--color-brass);
		} 
	}
	 .col.span_12 {
		@media (max-width:550px) {
            max-width: 100% !important;
		}
    }
}

#Awards-Logos-Strip { 
	border-top: 2px solid var(--color-brass);
	border-bottom: 2px solid var(--color-brass);
	@media (min-width: 600px) {
		.vc_col-sm-12 .wpb_wrapper {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
	    }
        .wpb_single_image {
            margin-bottom: 0px;
        }
	}
	img {
		opacity: .95;
	}
}

#Featured-Projects {
	h2.featured_project_title {
		text-transform: CAPITALIZE !important;
	}
	.featured_project_container a.button.color-1.large.regular-button {
        text-transform: capitalize;
		font-family: 'Source-Serif' !important;
		font-weight: 500;
    }
}

#Our-Work-Filterer {
	h3.project_list_title  {
		text-transform: CAPITALIZE !important;
	}
	.project_content_container a.button.color-1.large.regular-button {
        text-transform: capitalize;
		font-family: 'Source-Serif' !important;
		font-weight: 500;
    }
}


/* general */

.max-row-1200>.col.span_12 {
    max-width: 1200px;
    margin: auto;
	  overflow: hidden;
}

.bottom-margin-20 {
    margin-bottom: 20px !important;
}

p.pre-header {
    margin-bottom: 10px;
    font-family: 'Ratch-Regular';
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1px;
}

p.short-bar {
  height: 60px;
  position: relative;
  display: block;
  border-left: 1px solid var(--color-brass);
	margin-left:15px;
}

.fullwidth-brass-line {
    border-top: 1px solid var(--color-brass);
}

.fullheight-brass-line .col.span_12 {
    border-left: 1px solid var(--color-brass);
}

.fullheight-brass-line-right .col.span_12 {
    border-right: 1px solid var(--color-brass);
}

.full-width-section .padding-all-40.wpb_column {
    padding-left: 40px !important;
    padding-top: 40px !important;
    padding-right: 40px !important;
    padding-bottom: 40px !important;
}

.regular-button.bg-brass {
    background: var(--color-brass) !important;
    border: var(--color-brass) !important;
    color: var(--color-charcole) !important;
    font-family: 'Source-Serif' !important;
	text-transform: Capitalize !important;
    font-weight: 400 !important;
    border: 1px solid var(--color-brass) !important;
    &:hover {
        background: transparent;  
    }
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.max-w600-col {
    max-width: 600px;
}

.no-max-width .standard-section .span_12 {
    max-width: unset;
}

p.short-bar {
    @media (max-width: 959px) {
        display: none;
    }
}

/* New SPACE/SERVICE Styles Feb 26, 2026 */

#Service-Top .col.span_12.color-dark.left {
	@media (max-width: 767px) {
    display: flex;
    flex-direction: column-reverse;
	}
}

#Service-Top .content-col {
    padding: 40px;
}

/* Makes A Great */
.space-makes-great img {
    object-fit: cover;
}

@media (min-width: 768px) {
    .space-makes-great .col.span_12 {
        display: flex;
        align-items: stretch;
    }
}

#Where_We_Work.space-makes-great > .wpb_row, #Where_We_Work.space-makes-great > .wpb_row .vc_col-sm-6 {
    @media (min-width: 1140px) {
        height: 600px;
    }
}

.space-accordion .vc_tta-panel-heading {
    border: none !important;
    border-bottom: 2px solid var(--color-brass) !important;
}

.space-accordion .vc_tta-panel-heading:hover {
    background-color: transparent !important;
}

.space-accordion h4 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.space-accordion a {
    text-decoration: none !important;
	padding-left: 0px !important;
}

.space-accordion .vc_tta-controls-icon-position-left .vc_tta-controls-icon{
	left: unset !important;
	right: 0px;
    @media (max-width:959px) {
        right: 0px;
    }
}

.space-accordion .vc_tta-panel-heading:hover .vc_tta-controls-icon::before, .space-accordion .vc_tta-panel-heading:hover .vc_tta-controls-icon::after {
    border-color: var(--color-brass) !important;
}

#Where_We_Work.space-makes-great .col.span_12 {
	justify-content: space-between;
}

#Where_We_Work.space-makes-great .vc_col-sm-6.fullheight-brass-line-right {
    border-left: 2px solid var(--color-brass);
	border-right: 0px;
	margin-left: 40px;
}

#Where_We_Work.space-makes-great .overlay-circle-lines:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    background: url(/wp-content/uploads/2026/02/What-Makes-A-Great-Lines.png);
    background-position: bottom right;
    background-repeat: no-repeat;
}

/* Space Projects Carousel */

.recent-spaces-carousel .imagebox .imagebox-img img {
    margin-bottom: 0px !important;
    max-height: unset;
}

a.space-projects-links {
	text-decoration: none !important;
    text-transform: uppercase;
    font-size: .9rem;
    letter-spacing: .5px;
    position: relative;
    padding-left: 30px;
	  color: var(--color-charcole) !important;
}
a.space-projects-links:hover {
	 text-decoration: underline !important;
}
a.space-projects-links:before {
    content: '';
    width: 7px;
    height: 7px;
    border-top: 1px solid var(--color-charcole);
    border-left: 1px solid var(--color-charcole);
    position: absolute;
    left: 10px;
    transform: rotate(-45deg);
    top: 6px;
}
a.space-projects-links:after {
    content: '';
    width: 15px;
    height: 1px;
    background-color: var(--color-charcole);
    position: absolute;
    left: 10px;
    top: 10px;
}


/* #Common_Considerations */

#Common_Considerations ul li {
    line-height: 1;
}

#Common_Considerations ul li::marker {
    color: var(--color-charcole) !important;
}

#Common_Considerations .vc_col-sm-2 {
    padding-inline: 0px;
}

#Common_Considerations a.button.color-1.large.special-button {
    color: var(--color-charcole) !important;
}

#Common_Considerations .button.special-button:before, #Common_Considerations .button.special-button:after {
	border-color: var(--color-charcole);
}

@media (max-width:767px) {
	#Common_Considerations .col.span_12 .wpb_column {
        margin-block: 0px;
        padding-block: 20px;
        padding-inline: 20px;
    }
}

#Common_Considerations {
    padding-bottom: 0px;
}

#Common_Considerations .wpb_row {
    border-left: 2px solid var(--color-brass) !important;
    border-right: 2px solid var(--color-brass) !important;
}

/* is a remodel right for you? */

.right-for-you .hs-form-frame {
    margin-top: -30px;
}

.right-for-you .hs-form-frame .hsfc-Step__Content>div {
    margin-bottom: 10px;
}

.right-for-you .hs-form-frame .hsfc-FieldLabel {
    margin-bottom: 5px !important;
}

.right-for-you .wpb_row {
    margin-top: 60px !important;
}

.right-for-you figure:before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    width: 100%;
    height: 100%;
    background: url(/wp-content/uploads/2026/02/brass-circle-line.png);
    background-repeat: no-repeat;
}

/*Common_Space_Questions */
#Common_Space_Questions a {
    color: var(--color-charcole) !important;
}

#Common_Space_Questions .vc_tta-color-grey.vc_tta-style-outline .vc_tta-controls-icon::after, #Common_Space_Questions .vc_tta-color-grey.vc_tta-style-outline .vc_tta-controls-icon::before {
	border-color:  var(--color-charcole);
}


/* Appliance Guide Page   */

#Appliance-Top img {
    object-fit: cover;
    aspect-ratio: 1.4;
    min-height: 400px;
}

 #Appliance-Catalog img {
    max-height: 450px;
    width: auto;
} 

#Appliance-Catalog .wpb_single_image {
    margin-bottom: 0px;
}

#Appliance_Guide_Top figure:before {
	content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    width: 100%;
    height: 100%;
    z-index: 9;
    background: url(/wp-content/uploads/2026/02/What-Makes-A-Great-Lines.png);
    background-position: bottom left;
    background-repeat: no-repeat;
}

@media (min-width:768px) {
	#Appliance-Catalog .vc_col-sm-6.content-col {
        border-left: 2px solid var(--color-brass) !important;
        padding-left: 40px;
        padding-top: 10px;
        padding-bottom: 10px;
	}
}

@media (max-width:767px) {
	#Appliance-Catalog .vc_col-sm-6.image-column {
		padding-block: 0px;
	}
}

@media (min-width:768px) and (max-width:959px) {
    #Appliance-Catalog .col.span_12 {
        flex-direction: row;
    }
}


/* Location pages */
/* Location Pages */

#More_About_Location .vc_col-sm-6.content-col p {
    text-align: left;
}

@media (min-width:768px) {
	#Popular_Design_Location img {
		max-width:700px;
	}
	#More_About_Location img {
        height: 700px;
        object-fit: cover;
	}
	#More_About_Location .vc_col-sm-6.content-col {
        border-right: 2px solid var(--color-brass) !important;
		height: 700px !important;
	}
}
@media (max-width:767px) {
	#More_About_Location .vc_col-sm-6.image-column {
		margin-bottom: 0px;
		margin-top: 40px;
	}
}

#More_About_Location figure:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 20px;
    width: 100%;
    height: 100%;
    z-index: 9;
    background: url(/wp-content/uploads/2026/02/What-Makes-A-Great-Lines.png);
    background-position: bottom right;
    background-repeat: no-repeat;
}

.locations-list a {
    text-decoration: none !important;
}

/* =========================================================================
   CLS (Cumulative Layout Shift) Prevention
   ========================================================================= */

/* Prevent VC from hiding sections while it recalculates their dimensions.
   VC adds vc_hidden (display:none) before measuring, then removes it after.
   Since our footer script already pre-positions sections at the correct size,
   VC's recalculation produces identical values — no need to hide. */
.vc_section.vc_hidden,
.vc_row.vc_hidden {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Use GPU-composited transforms instead of layout-triggering position offsets
   for scroll-triggered animations. position:relative + left/right causes the
   browser to recalculate layout; transform only triggers compositing. */
.animate[data-animation="fade-in-from-left"] {
    left: 0 !important;
    transform: translateX(-40px);
}

.animate[data-animation="fade-in-from-right"] {
    right: 0 !important;
    transform: translateX(40px);
}

.animate[data-animation="fade-in-from-bottom"] {
    bottom: 0 !important;
    transform: translateY(50px);
}

.animate[data-animation="fade-in-from-top"] {
    top: 0 !important;
    transform: translateY(-50px);
}