/* navigation */
@media only screen and (min-width:0rem){body.dark-mode #navigation #dark-mode-toggle .cs-sun{transform:translate(-50%,-50%);opacity:1}body.dark-mode #navigation #dark-mode-toggle .cs-moon{transform:translate(-50%,-150%);opacity:0}#navigation #dark-mode-toggle{width:3rem;height:3rem;padding:0;background:transparent;border:none;overflow:hidden;display:block;order:2;position:relative;z-index:1000;transition:transform 0.3s}#navigation #dark-mode-toggle img,#navigation #dark-mode-toggle svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1.25rem;height:1.25rem;pointer-events:none}#navigation #dark-mode-toggle .cs-moon{z-index:2;transition:transform 0.3s,opacity 0.3s;fill:#1a1a1a}#navigation #dark-mode-toggle .cs-sun{z-index:1;transform:translate(-50%,100%);opacity:0;transition:transform 0.3s,opacity 0.3s}}@media only screen and (min-width:48rem){#navigation #dark-mode-toggle{margin-left:1rem;position:relative;bottom:auto;right:auto;order:3}}@media only screen and (min-width:64rem){#navigation #dark-mode-toggle{position:relative;transform:none;bottom:auto;right:auto;margin:0}#navigation #dark-mode-toggle:hover{cursor:pointer}}@media only screen and (max-width:63.9375rem){body.scroll #navigation{transform:translateY(calc(-3.5rem - 2 * clamp(1rem,2.5vw,1.25rem)))}body.scroll #navigation #dark-mode-toggle{transform:translateY(calc(4.25rem + clamp(1rem,2.5vw,1.25rem))) translateX(-3.5rem)}body.scroll #navigation #dark-mode-toggle .cs-moon{fill:#fff}body.scroll #navigation .cs-logo{transform:translateY(calc(4.25rem + clamp(1rem,2.5vw,1.25rem))) translateX(3.1rem)}body.scroll #navigation .cs-wrapper{width:2.5rem;height:2.5rem}body.scroll #navigation .cs-info{transform:translateX(-3rem);opacity:0;visibility:hidden}body.scroll #navigation .cs-light{display:none}body.scroll #navigation .cs-dark{display:block!important}#navigation{width:100%;box-sizing:border-box;background-color:#fff;box-shadow:rgba(149,157,165,0.2) 0px 8px 24px;position:fixed;z-index:10000;transition:transform 0.3s}#navigation.cs-active .cs-ul-wrapper{opacity:1;transform:scaleY(1)}#navigation.cs-active .cs-li{transform:translateY(0);opacity:1}#navigation .cs-top-bar{width:100%;display:flex;justify-content:center;align-items:center}#navigation .cs-top-container{width:100%;padding:clamp(1rem,2.5vw,1.25rem) 1rem;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:1rem}#navigation .cs-contact-group{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:2.5rem;order:2}#navigation .cs-contact-link{display:none}#navigation .cs-container{width:100%;padding:clamp(1rem,2.5vw,1.25rem) 1rem;box-sizing:border-box;background-color:var(--secondary);display:flex;justify-content:space-between;align-items:center;position:relative}#navigation .cs-logo{width:auto;height:3.5rem;margin:0 auto 0 0;padding:0;box-sizing:border-box;display:flex;justify-content:center;align-items:center;order:1;z-index:10;transition:transform 0.3s}#navigation .cs-logo img{width:auto;height:100%}#navigation .cs-nav{order:2}#navigation .cs-toggle{width:clamp(3rem,7.2vw,3.5rem);height:clamp(3rem,7.2vw,3.5rem);margin:0 0 0 auto;background-color:#fff;border:none;display:flex;justify-content:center;align-items:center;transition:transform 0.6s}#navigation .cs-toggle.cs-active{transform:rotate(180deg)}#navigation .cs-active .cs-line1{top:50%;transform:translate(-50%,-50%) rotate(225deg)}#navigation .cs-active .cs-line2{top:50%;transform-origin:center;transform:translate(-50%,-50%) translateY(0) rotate(-225deg)}#navigation .cs-active .cs-line3{bottom:100%;opacity:0}#navigation .cs-box{width:clamp(1.5rem,2vw,1.75rem);height:1rem;position:relative}#navigation .cs-line{width:100%;height:2px;border-radius:2px;background-color:var(--primary);position:absolute;left:50%;transform:translateX(-50%)}#navigation .cs-line1{top:0;transform-origin:center;transition:transform 0.5s,top 0.3s,left 0.3s;animation-duration:0.7s;animation-timing-function:ease;animation-fill-mode:forwards;animation-direction:normal}#navigation .cs-line2{top:50%;transform:translateX(-50%) translateY(-50%);transition:top 0.3s,left 0.3s,transform 0.5s;animation-duration:0.7s;animation-timing-function:ease;animation-fill-mode:forwards;animation-direction:normal}#navigation .cs-line3{bottom:0;transition:bottom 0.3s,opacity 0.3s}#navigation .cs-ul-wrapper{width:100%;height:100vh;padding-bottom:3rem;opacity:0;background-color:#fff;box-shadow:inset rgba(0,0,0,0.2) 0px 8px 24px;overflow:hidden;position:absolute;top:100%;left:0;z-index:-1;transform:scaleY(0);transform-origin:top;transition:transform 0.4s,opacity 0.3s}#navigation .cs-ul{margin:0;padding:3rem 0 0 0;width:100%;height:auto;max-height:65vh;overflow:scroll;display:flex;justify-content:flex-start;flex-direction:column;align-items:center;gap:1.25rem}#navigation .cs-li{list-style:none;margin-right:0;transform:translateY(-4.375rem);opacity:0;transition:transform 0.6s,opacity 0.9s}#navigation .cs-li:nth-of-type(1){transition-delay:0.05s}#navigation .cs-li:nth-of-type(2){transition-delay:0.1s}#navigation .cs-li:nth-of-type(3){transition-delay:0.15s}#navigation .cs-li:nth-of-type(4){transition-delay:0.2s}#navigation .cs-li:nth-of-type(5){transition-delay:0.25s}#navigation .cs-li:nth-of-type(6){transition-delay:0.3s}#navigation .cs-li:nth-of-type(7){transition-delay:0.35s}#navigation .cs-li:nth-of-type(8){transition-delay:0.4s}#navigation .cs-li:nth-of-type(9){transition-delay:0.45s}#navigation .cs-li-link{font-family:var(--bodyFont);font-size:clamp(1.5rem,4vw,2.25rem);line-height:1.2em;text-decoration:none;margin:0;color:var(--headerColor);display:inline-block;position:relative}#navigation .cs-li-link:before{content:"";width:100%;height:1px;background:currentColor;opacity:1;position:absolute;display:none;bottom:-0.125rem;left:0}#navigation .cs-li-link.cs-active:before{display:block}#navigation .cs-button-solid{margin:0;display:none}#navigation .cs-call{text-decoration:none;display:flex;justify-content:flex-start;align-items:center;gap:1rem;position:relative}#navigation .cs-call .cs-wrapper{width:3.5rem;height:3.5rem;background-color:var(--primary);display:flex;justify-content:center;align-items:center;flex:none;transition:transform 0.3s,width 0.3s,height 0.3s}#navigation .cs-call .cs-icon{--pb-icon-tint:var(--bodyTextColorWhite);width:1.5rem;height:auto;display:block;transition:transform 0.3s}#navigation .cs-call .cs-info{display:flex;flex-direction:column;align-items:flex-start;transition:transform 0.3s,opacity 0.3s,visibility 0.3s}#navigation .cs-call .cs-header{font-size:0.875rem;line-height:1.2em;font-weight:400;margin:0;color:var(--bodyTextColorWhite);display:block}#navigation .cs-call .cs-link-content{font-family:var(--headerFont);font-size:1.5rem;line-height:1.2em;margin:0;color:var(--bodyTextColorWhite);display:block}}@media only screen and (min-width:48rem){#navigation .cs-button-solid{display:flex}}@media only screen and (max-width:63.9375rem){body.dark-mode #navigation{background-color:var(--dark)}body.dark-mode #navigation .cs-ul-wrapper{background-color:var(--dark)}body.dark-mode #navigation .cs-dark{display:block!important}body.dark-mode #navigation .cs-li-link{color:var(--bodyTextColorWhite)}body.dark-mode #navigation .cs-container{background-color:rgba(0,0,0,0.5)}}@media only screen and (max-width:63.9375rem){#navigation .cs-li{text-align:center;width:100%;display:block}#navigation .cs-dropdown{position:relative;color:var(--bodyTextColorWhite)}#navigation .cs-dropdown.cs-active .cs-drop-ul{height:auto;opacity:1;visibility:visible;margin:0.75rem auto 0 auto;padding:1.25rem 0}#navigation .cs-dropdown.cs-active .cs-drop-link{opacity:1;color:var(--bodyTextColorWhite)}#navigation .cs-dropdown .cs-li-link{position:relative;transition:opacity 0.3s}#navigation .cs-drop-icon{width:0.9375rem;height:auto;position:absolute;top:50%;right:-1.25rem;transform:translateY(-50%)}#navigation .cs-drop-ul{width:80%;height:0;margin:0;padding:0;background-color:var(--primary);overflow:hidden;opacity:0;visibility:hidden;display:flex;justify-content:flex-start;flex-direction:column;align-items:center;gap:0.75rem;transition:padding 0.3s,margin 0.3s,height 0.3s,opacity 0.3s,visibility 0.3s}#navigation .cs-drop-li{list-style:none}#navigation .cs-li-link.cs-drop-link{font-size:clamp(1.25rem,2vw,2rem);color:#fff}}@media only screen and (min-width:64rem){#navigation .cs-dropdown{position:relative}#navigation .cs-dropdown:hover{cursor:pointer}#navigation .cs-dropdown:hover .cs-drop-ul{transform:scaleY(1);opacity:1;visibility:visible}#navigation .cs-dropdown:hover .cs-drop-li{opacity:1;transform:translateY(0)}#navigation .cs-drop-icon{width:0.9375rem;height:auto;display:inline-block}#navigation .cs-drop-ul{min-width:12.5rem;margin:0;padding:0;background-color:#fff;overflow:hidden;opacity:0;visibility:hidden;box-shadow:rgba(149,157,165,0.2) 0px 10px 16px;border-bottom:5px solid var(--primary);position:absolute;top:100%;z-index:-100;transform:scaleY(0);transform-origin:top;transition:transform 0.3s,visibility 0.3s,opacity 0.3s}#navigation .cs-drop-li{list-style:none;font-size:1rem;text-decoration:none;opacity:0;width:100%;height:auto;display:block;transform:translateY(-0.625rem);transition:opacity 0.6s,transform 0.6s}#navigation .cs-drop-li:nth-of-type(1){transition-delay:0.05s}#navigation .cs-drop-li:nth-of-type(2){transition-delay:0.1s}#navigation .cs-drop-li:nth-of-type(3){transition-delay:0.15s}#navigation .cs-drop-li:nth-of-type(4){transition-delay:0.2s}#navigation .cs-drop-li:nth-of-type(5){transition-delay:0.25s}#navigation .cs-drop-li:nth-of-type(6){transition-delay:0.3s}#navigation .cs-drop-li:nth-of-type(7){transition-delay:0.35s}#navigation .cs-drop-li:nth-of-type(8){transition-delay:0.4s}#navigation .cs-drop-li:nth-of-type(9){transition-delay:0.45s}#navigation .cs-drop-li:nth-of-type(10){transition-delay:0.5s}#navigation .cs-drop-li:nth-of-type(11){transition-delay:0.55s}#navigation .cs-drop-li:nth-of-type(12){transition-delay:0.6s}#navigation .cs-drop-li:nth-of-type(13){transition-delay:0.65s}#navigation .cs-li-link.cs-drop-link{font-size:1.25rem;white-space:nowrap;line-height:1.5em;text-transform:capitalize;text-decoration:none;width:100%;padding:0.75rem;box-sizing:border-box;color:var(--headerColor);display:block;transition:color 0.3s,background-color 0.3s}#navigation .cs-li-link.cs-drop-link:hover{color:var(--primary);background-color:#f7f7f7}#navigation .cs-li-link.cs-drop-link:before{display:none}}@media only screen and (min-width:64rem){body.dark-mode #navigation .cs-drop-ul{background-color:var(--dark)}body.dark-mode #navigation .cs-li-link.cs-drop-link{color:var(--bodyTextColorWhite)}body.dark-mode #navigation .cs-li-link.cs-drop-link:hover{color:var(--primaryOnDark);background-color:rgba(255,255,255,0.2)}body.dark-mode #navigation .cs-li-link.cs-drop-link.cs-active{color:var(--primaryOnDark)}body.dark-mode #navigation .cs-li-link.cs-drop-link:before{display:none}}@media only screen and (min-width:64rem){body.scroll #navigation{transform:translateY(-7rem)}body.scroll #navigation #dark-mode-toggle{transform:translateY(6.5rem)}body.scroll #navigation #dark-mode-toggle .cs-moon{fill:#fff}body.scroll #navigation .cs-logo{transform:translateY(6.5rem)}body.scroll #navigation .cs-light{display:none}body.scroll #navigation .cs-dark{display:block!important}body.scroll #navigation .cs-ul-wrapper{transform:translateX(15.75rem)}body.scroll #navigation .cs-button-solid{transform:translateY(6.5rem) translateX(0.5rem)}body.scroll #navigation .cs-button-solid:hover{transform:translateY(6.5rem) translateX(0.5rem) scale(1.06) rotate(-1deg)}body.scroll #navigation .cs-call{pointer-events:none;visibility:hidden;opacity:0;transform:translateX(8rem)}#navigation{width:100%;padding:0;box-sizing:border-box;background-color:#fff;box-shadow:rgba(149,157,165,0.2) 0px 8px 24px;position:fixed;z-index:10000;transition:transform 0.3s}#navigation .cs-top-bar{width:100%;display:flex;justify-content:center;align-items:center}#navigation .cs-top-container{width:100%;max-width:80rem;padding:1rem;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:1.5rem}#navigation .cs-contact-group{display:flex;justify-content:flex-end;align-items:center;gap:1.5rem}#navigation .cs-contact-link{text-decoration:none;padding-right:1.875rem;display:flex;justify-content:flex-start;align-items:center;gap:1rem;position:relative;perspective:200px;transform-style:preserve-3d}#navigation .cs-contact-link:nth-of-type(2){display:none}#navigation .cs-contact-link:hover .cs-wrapper{transform:rotateY(180deg)}#navigation .cs-wrapper{width:3.5rem;height:3.5rem;display:flex;justify-content:center;align-items:center;flex:none;position:relative;z-index:1;transition:transform 0.6s}#navigation .cs-wrapper:before{content:"";width:100%;height:100%;background-color:#f7f7f7;border-radius:6.25rem;position:absolute;display:block;top:0;left:0;z-index:-1}#navigation .cs-icon{width:1.5rem;height:auto;display:block;transition:transform 0.3s}#navigation .cs-info{display:flex;flex-direction:column;align-items:flex-start;gap:0.25rem}#navigation .cs-header{font-family:var(--bodyTextColor);line-height:1.2em;margin:0;color:var(--headerColor);display:block}#navigation .cs-link-content{font-size:0.875rem;line-height:1.2em;font-weight:400;margin:0;color:var(--bodyTextColor);display:block}#navigation .cs-bottom-bar{width:100%;background-color:var(--secondary);display:flex;justify-content:center;align-items:center}#navigation .cs-container{width:100%;max-width:80rem;margin:auto;padding:0 1rem;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;position:relative}#navigation .cs-toggle{display:none}#navigation .cs-logo{width:7rem;max-width:none;height:5rem;margin:0 auto 0 0;padding:0;display:flex;justify-content:center;align-items:center;z-index:100;transition:transform 0.3s}#navigation .cs-logo img{width:100%;height:100%;object-fit:contain}#navigation .cs-ul-wrapper{transition:transform 0.3s}#navigation .cs-ul{width:100%;margin:0;padding:0;display:flex;justify-content:flex-start;align-items:center;gap:2.25rem}#navigation .cs-li{list-style:none;padding:2.25rem 0;flex:none}#navigation .cs-li-link{font-family:var(--bodyFont);font-weight:400;text-transform:uppercase;line-height:1.5em;text-decoration:none;margin:0;color:var(--bodyTextColorWhite);display:block;position:relative;transition:color 0.3s}#navigation .cs-li-link:hover{color:var(--primaryOnDark)}#navigation .cs-li-link.cs-active{font-weight:700;color:var(--primaryOnDark)}#navigation .cs-li-link.cs-drop-link.cs-active{color:var(--primary)}#navigation .cs-call{text-decoration:none;display:flex;justify-content:flex-start;align-items:center;gap:1rem;position:relative;perspective:200px;transform-style:preserve-3d;transition:transform 0.3s,opacity 0.3s,visibility 0.3s}#navigation .cs-call:hover:hover .cs-wrapper{transform:rotateY(180deg)}#navigation .cs-call .cs-wrapper{width:3.5rem;height:3.5rem;display:flex;justify-content:center;align-items:center;flex:none;transition:transform 0.6s}#navigation .cs-call .cs-wrapper:before{background-color:var(--primary)}#navigation .cs-call .cs-icon{--pb-icon-tint:var(--bodyTextColorWhite);width:1.5rem;height:auto;display:block;transition:transform 0.3s}#navigation .cs-call .cs-info{display:flex;flex-direction:column;align-items:flex-start}#navigation .cs-call .cs-header{font-family:var(--bodyFont);font-size:0.875rem;line-height:1.2em;font-weight:400;margin:0;color:var(--bodyTextColorWhite);display:block}#navigation .cs-call .cs-link-content{font-family:var(--headerFont);font-size:1.25rem;line-height:1.2em;margin:0;color:var(--bodyTextColorWhite);display:block}}@media only screen and (min-width:75rem){body.scroll #navigation .cs-ul-wrapper{transform:translateX(23.75rem)}#navigation .cs-contact-link:nth-of-type(2){display:flex}}@media only screen and (min-width:100rem){#navigation .cs-donate{display:flex;margin-left:auto}#navigation .cs-nav-button{margin:0}}@media only screen and (min-width:64rem){body.dark-mode #navigation{background-color:var(--dark)}body.dark-mode #navigation .cs-header,body.dark-mode #navigation .cs-link-content{color:var(--bodyTextColorWhite)}body.dark-mode #navigation .cs-dark{display:block!important}body.dark-mode #navigation .cs-call .cs-header{opacity:0.8}body.dark-mode #navigation .cs-call .cs-link-content{opacity:1}body.dark-mode #navigation .cs-link-content{opacity:0.8}body.dark-mode #navigation .cs-bottom-bar{background-color:rgba(0,0,0,0.4)}body.dark-mode #navigation .cs-link-icon{filter:grayscale(1) brightness(1000%)}}

/* hero */

/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1623 {
    /* 200px - 300px top, leaving room for the fixed navigation */
    /* 160px - 240px bottom */
    padding: clamp(12.5rem, 25.95vw, 18.75rem) 1rem clamp(10rem, 15vw, 15rem);
    /* keeps the corner brackets from causing an overflow */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #hero-1623 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3rem;
  }
  #hero-1623 .cs-content {
    --cornerWidth: 8.75rem;
    --cornerHeight: 8.75rem;
    width: 100%;
    max-width: 53.125rem;
    /* 48px - 80px top & bottom */
    /* 16px - 48px left & right */
    padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 5vw, 3rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #hero-1623 .cs-content:before {
    /* top left corner */
    content: '';
    width: 35vw;
    max-width: var(--cornerWidth);
    height: 35vw;
    max-height: var(--cornerHeight);
    border: 2px solid #fff;
    border-right: none;
    border-bottom: none;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #hero-1623 .cs-content:after {
    /* top right corner */
    content: '';
    width: 35vw;
    max-width: var(--cornerWidth);
    height: 35vw;
    max-height: var(--cornerHeight);
    border: 2px solid #fff;
    border-left: none;
    border-bottom: none;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    z-index: -1;
  }
  #hero-1623 .cs-corners {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #hero-1623 .cs-corners:before {
    /* bottom left corner */
    content: '';
    width: 35vw;
    max-width: var(--cornerWidth);
    height: 35vw;
    max-height: var(--cornerHeight);
    border: 2px solid #fff;
    border-right: none;
    border-top: none;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
  #hero-1623 .cs-corners:after {
    /* bottom right corner */
    content: '';
    width: 35vw;
    max-width: var(--cornerWidth);
    height: 35vw;
    max-height: var(--cornerHeight);
    border: 2px solid #fff;
    border-left: none;
    border-top: none;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    right: 0;
    z-index: -1;
  }
  #hero-1623 .cs-topper {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.5vw, 1rem);
    line-height: 1.2em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    /* brand red is ~2.5:1 on the navy overlay */
    color: var(--bodyTextColorWhite);
    display: block;
    position: relative;
  }
  #hero-1623 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    max-width: 51.8125rem;
    margin: 0 0 1rem 0;
    color: #fff;
    position: relative;
  }
  #hero-1623 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    /* 464px - 622px */
    max-width: clamp(29rem, 60vw, 38.785rem);
    margin: 0 auto 2rem;
    color: #fff;
  }
  #hero-1623 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-1623 .cs-background:before {
    /* brand navy overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--secondary);
    opacity: 0.75;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
  }
  #hero-1623 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Large Desktop - Parallax Effect - 1600px */
@media only screen and (min-width: 100rem) {
  #hero-1623 {
    /* same file the picture below resolves to, so it is only downloaded once */
    background-image: url("/images/hero-bright-living-room-1920w.jpeg");
    background-image: image-set(url("/images/hero-bright-living-room-1920w.avif") type("image/avif"), url("/images/hero-bright-living-room-1920w.webp") type("image/webp"), url("/images/hero-bright-living-room-1920w.jpeg") type("image/jpeg"));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  #hero-1623 .cs-background img {
    display: none;
  }
}

/*-- -------------------------- -->
<---       Services Strip       -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1623 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
    z-index: 15;
  }
  #services-1623 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
    background-color: #fff;
    box-sizing: border-box;
    grid-column: span 12;
    transition: background-color 0.3s, border-color 0.3s;
  }
  #services-1623 .cs-item:last-of-type {
    border-bottom: none;
  }
  #services-1623 .cs-link {
    text-decoration: none;
    /* 32px - 60px top & bottom */
    /* 16px - 40px left & right */
    padding: clamp(2rem, 5.3vw, 3.75rem) clamp(1rem, 2.74vw, 2.5rem);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }
  #services-1623 .cs-icon {
    /* 32px - 40px */
    width: auto;
    height: clamp(2rem, 4vw, 2.5rem);
    /* 20px - 40px */
    margin: 0 0 clamp(1.25rem, 3vw, 2.5rem) 0;
    transition: filter 0.3s;
  }
  #services-1623 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    /* 8px - 16px */
    margin: 0 0 clamp(0.5rem, 2vw, 1rem) 0;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #services-1623 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s, opacity 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1623 .cs-item {
    grid-column: span 6;
  }
  #services-1623 .cs-item:nth-of-type(3) {
    border-bottom: none;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1623 .cs-item {
    border-bottom: 0;
    border-right: 1px solid #e8e8e8;
    grid-column: span 3;
  }
  #services-1623 .cs-item:hover {
    background-color: var(--secondary);
    border-color: var(--secondary);
  }
  #services-1623 .cs-item:hover .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }
  #services-1623 .cs-item:hover .cs-h3,
  #services-1623 .cs-item:hover .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  #services-1623 .cs-item:hover .cs-item-text {
    opacity: 0.8;
  }
  #services-1623 .cs-item:last-of-type {
    border: none;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-1623 .cs-item {
    background-color: var(--medium);
    border-color: rgba(255, 255, 255, 0.1);
  }
  body.dark-mode #services-1623 .cs-item:hover {
    background-color: var(--secondary);
    border-color: var(--secondary);
  }
  body.dark-mode #services-1623 .cs-h3,
  body.dark-mode #services-1623 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-1623 .cs-item-text {
    opacity: 0.8;
  }
  body.dark-mode #services-1623 .cs-icon {
    /* brand red is ~2.5:1 on the dark cards */
    filter: grayscale(1) brightness(1000%);
  }
}

/* brush-stroke button spacing: the stroke reaches ~20% past the button on each side */
@media only screen and (min-width:0rem){#hero-1623 .cs-button-solid{margin-top:0.75rem}#side-by-side .cs-button-solid,#side-by-side-2 .cs-button-solid,#sbs-1636 .cs-button-solid{margin:1rem 0 0.5rem 1.5rem}#hero-1623 .cs-button-solid:focus-visible,#sbs-1636 .cs-button-solid:focus-visible{/* Override: white focus ring on the navy backgrounds */outline-color:var(--bodyTextColorWhite)}}

/* Our Promise paint stroke (wide screens): one blended roller image for both themes */
@media only screen and (min-width:106.25rem){#side-by-side picture.paint-splash{height:auto;top:0;bottom:calc(17.75rem + 1.25rem - 0.5rem);right:auto;left:calc(50% + 41rem);z-index:0}#side-by-side picture.paint-splash img{width:auto;height:calc(100% * 2602 / 2430);display:block}#side-by-side .cs-image-group{position:relative;z-index:1}section#side-by-side:after{display:none}}

/* services */


/* side-by-side */
@media only screen and (min-width:0rem){#side-by-side{overflow:hidden}#side-by-side .cs-container{width:100%;max-width:80rem;margin:0 auto clamp(1rem,1.5vw,1.25rem);display:flex;flex-direction:column;align-items:center;gap:clamp(3rem,7vw,4rem);position:relative}#side-by-side .cs-content{text-align:left;width:100%;max-width:33.125rem;padding:var(--sectionPadding);padding-bottom:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start}#side-by-side .cs-text{margin:0 0 1rem}#side-by-side .cs-picture{width:100%;height:30rem;display:block;position:relative}#side-by-side .cs-picture img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}#side-by-side .cs-image-group{width:100%;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,1.5vw,1.25rem)}#side-by-side .cs-image{width:100%;height:clamp(10.625rem,32vw,17.75rem);display:block;overflow:hidden;grid-column:span 6;position:relative}#side-by-side .cs-image:nth-of-type(1){border-radius:0 1rem 1rem 0}#side-by-side .cs-image:nth-of-type(2){border-radius:1rem 0 0 1rem}#side-by-side .cs-image:nth-of-type(3),#side-by-side .cs-image:nth-of-type(4),#side-by-side .cs-image:nth-of-type(5){display:none}#side-by-side .cs-image img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}#side-by-side .paint-splash{display:none}#side-by-side .cs-ul{width:100%;margin:0 0 1.5rem 0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:0.75rem}#side-by-side .cs-li{font-size:1rem;line-height:1.5em;list-style:none;padding-left:clamp(1.25rem,3vw,1.5rem);color:var(--bodyTextColor);position:relative}#side-by-side .cs-li::before{content:"";width:0.5rem;height:0.5rem;margin-top:0.5rem;background-color:var(--primary);display:block;position:absolute;top:0;left:0;transform:rotate(45deg)}}@media only screen and (min-width:48rem){#side-by-side .cs-container{padding:var(--sectionPadding);padding-bottom:0;padding-left:0;box-sizing:border-box;flex-direction:row;justify-content:space-between;align-items:stretch}#side-by-side .cs-content{text-align:left;padding:var(--sectionPadding);padding-left:0;padding-right:0;align-items:flex-start;order:2}#side-by-side .cs-picture{border-radius:0 1rem 1rem 0;overflow:hidden;height:auto}#side-by-side .cs-image{grid-column:span 4}#side-by-side .cs-image:nth-of-type(2){border-radius:1rem}#side-by-side .cs-image:nth-of-type(3){display:block;border-radius:1rem 0 0 1rem}}@media only screen and (min-width:75rem){#side-by-side{padding:var(--sectionPadding);padding-bottom:clamp(1rem,2.4vw,1.25rem);padding-left:0;padding-right:0}#side-by-side .cs-container{padding-top:0}#side-by-side .cs-content{margin-left:auto;padding:3.25rem 0}#side-by-side .cs-picture{width:50vw;height:100%;margin:0 0.625rem 0 0;position:absolute;right:50%;top:0}#side-by-side .cs-image-group{grid-template-columns:repeat(5,1fr)}#side-by-side .cs-image{grid-column:span 1;border-radius:1rem}#side-by-side .cs-image:nth-of-type(3){border-radius:1rem}#side-by-side .cs-image:nth-of-type(5){border-radius:1rem 0 0 1rem}#side-by-side .cs-image:nth-of-type(4),#side-by-side .cs-image:nth-of-type(5){display:block}}@media only screen and (min-width:106.25rem){#side-by-side{position:relative;z-index:1}#side-by-side:before{content:"";width:10.375rem;height:100%;background:#f7f7f7;opacity:1;position:absolute;display:block;top:auto;bottom:1.25rem;left:0;z-index:-1}#side-by-side:after{content:"";width:10.375rem;height:100%;background:#f7f7f7;opacity:1;position:absolute;display:block;top:auto;bottom:1.25rem;right:0;z-index:-1}#side-by-side .paint-splash{height:97%;width:auto;display:block;position:absolute;right:6.25rem;bottom:1.25rem;z-index:-1}#side-by-side .paint-splash.cs-dark{display:none}}@media only screen and (min-width:0rem){body.dark-mode #side-by-side:before,body.dark-mode #side-by-side:after{background-color:#0e0e0e}body.dark-mode #side-by-side .cs-title,body.dark-mode #side-by-side .cs-text,body.dark-mode #side-by-side .cs-li{color:var(--bodyTextColorWhite)}body.dark-mode #side-by-side .cs-text{opacity:0.8}body.dark-mode #side-by-side .cs-light{display:none}body.dark-mode #side-by-side .cs-dark{display:block}}

/* side-by-side-2 */
@media only screen and (min-width:0rem){#side-by-side-2{padding:var(--sectionPadding);overflow-x:clip;position:relative}#side-by-side-2 .cs-container{width:100%;max-width:36.5rem;margin:auto;display:flex;flex-direction:column;align-items:center;gap:clamp(3rem,6vw,4rem)}#side-by-side-2 .cs-content{text-align:left;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(3rem,6vw,4rem)}#side-by-side-2 .cs-picture{width:100%;height:100vw;max-height:clamp(22.5rem,70vw,45rem);display:block;position:relative;z-index:1}#side-by-side-2 .cs-picture img{width:100%;height:100%;border-radius:1rem;object-fit:cover;position:absolute;top:0;left:0}#side-by-side-2 .cs-ul{width:100%;margin:1.5rem 0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:0.75rem}#side-by-side-2 .cs-li{font-size:1rem;line-height:1.5em;list-style:none;padding-left:clamp(1.25rem,3vw,1.5rem);color:var(--bodyTextColor);position:relative}#side-by-side-2 .cs-li::before{content:"";width:0.5rem;height:0.5rem;margin-top:0.5rem;background-color:var(--primary);display:block;position:absolute;top:0;left:0;transform:rotate(45deg)}#side-by-side-2 .cs-wave{width:220%;height:auto;display:block;position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);z-index:-1}#side-by-side-2 .cs-wave path{fill:var(--secondary)}}@media only screen and (min-width:48rem){#side-by-side-2 .cs-container{max-width:80rem;flex-direction:row;justify-content:space-between;align-items:stretch}#side-by-side-2 .cs-content{justify-content:stretch}#side-by-side-2 .cs-picture{min-height:clamp(33.75rem,40vw,46.25rem);height:100%;max-height:100%}#side-by-side-2 .cs-picture2{order:2;height:100%;min-height:33.75rem;max-height:100%}#side-by-side-2 .cs-wrapper1{padding-bottom:4rem}#side-by-side-2 .cs-wrapper2{padding-top:6.25rem}#side-by-side-2 .cs-wave{width:100%;left:0;bottom:-0.0625rem;transform:none}}@media only screen and (min-width:0rem){body.dark-mode #side-by-side-2 .cs-title,body.dark-mode #side-by-side-2 .cs-text,body.dark-mode #side-by-side-2 .cs-li{color:var(--bodyTextColorWhite)}body.dark-mode #side-by-side-2 .cs-text{opacity:0.8}body.dark-mode #side-by-side-2 .cs-wave path{fill:var(--secondaryDark)}}

/* About: sbs-1636, adapted from paintetcltd.co.uk. A navy band (the :before) with a paint-splash
   divider brushed into its top edge; the wide team photo hangs off the bottom of the navy into the
   light grey band that continues through Recent Projects. */
@media only screen and (min-width: 0rem) {
  #sbs-1636 {
    padding: var(--sectionPadding);
    /* 76px - 250px: room for the splash */
    padding-top: clamp(4.75rem, 9vw, 15.625rem);
    padding-bottom: 0;
    background-color: #f7f7f7;
    position: relative;
    z-index: 1;
  }
  #sbs-1636 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 9vw, 4rem);
    position: relative;
    z-index: 1;
  }
  #sbs-1636 .cs-content {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #sbs-1636 .cs-flex {
    max-width: 38rem;
  }
  #sbs-1636 .cs-topper {
    color: var(--bodyTextColorWhite);
  }
  #sbs-1636 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #sbs-1636 .cs-h3 {
    font-family: var(--headerFont);
    font-size: 1.25rem;
    line-height: 1.3em;
    font-weight: 700;
    text-transform: none;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColorWhite);
  }
  #sbs-1636 .cs-text {
    margin: 0 0 1rem 0;
    color: var(--bodyTextColorWhite);
    opacity: 0.9;
  }
  #sbs-1636 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-1636 .cs-picture {
    width: 100%;
    height: 90vw;
    /* 340px - 620px */
    max-height: clamp(21.25rem, 45vw, 38.75rem);
    border-radius: 1rem;
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
  }
  #sbs-1636 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  /* the splash: one SVG used as a mask so its colour can follow the section above in both themes */
  #sbs-1636 .cs-graphic-top {
    width: 100%;
    min-width: 80rem;
    aspect-ratio: 1920 / 161;
    background-color: #fff;
    -webkit-mask: url("/assets/images/paint-splash-divider.svg") center / 100% 100% no-repeat;
    mask: url("/assets/images/paint-splash-divider.svg") center / 100% 100% no-repeat;
    display: block;
    position: absolute;
    top: -1px;
    left: 50%;
    z-index: 0;
    transform: translateX(-50%);
    pointer-events: none;
  }
  #sbs-1636:before {
    content: "";
    width: 100%;
    /* ends 55% of the way down the photo at every width (photo height = min(90vw, clamp(...)) below) */
    height: auto;
    bottom: calc(min(90vw, clamp(21.25rem, 45vw, 38.75rem)) * 0.55);
    background: var(--secondary);
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
/* the button sits under the title in the left column on tablet+; on phones the left column dissolves
   (display: contents) so the button can drop below the copy instead of interrupting it */
@media only screen and (max-width: 47.9375rem) {
  #sbs-1636 .cs-flex:first-of-type {
    display: contents;
  }
  #sbs-1636 .cs-content > .cs-flex > a,
  #sbs-1636 .cs-content > a {
    order: 1;
  }
}
@media only screen and (min-width: 48rem) {
  #sbs-1636 .cs-flex:first-of-type .cs-button-solid {
    margin-top: 2.25rem;
  }
  #sbs-1636 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2.5rem;
  }
  #sbs-1636 .cs-flex {
    width: 50%;
  }
  #sbs-1636 .cs-title {
    margin: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-1636 {
    /* same tone as #gallery-2 below: rgba(0,0,0,.2) over the #121212 page */
    background-color: #0e0e0e;
  }
  body.dark-mode #sbs-1636:before {
    background-color: var(--secondaryDark);
  }
  body.dark-mode #sbs-1636 .cs-graphic-top {
    background-color: var(--dark);
  }
}

/* why-choose-us */
@media only screen and (min-width:0rem){#why-choose-us{padding:var(--sectionPadding);position:relative;overflow:hidden;z-index:1}#why-choose-us .cs-container{width:100%;max-width:80rem;margin:auto;display:flex;flex-direction:column;align-items:center;gap:clamp(3rem,6vw,4rem);position:relative;z-index:1}#why-choose-us .cs-topper{width:auto}#why-choose-us .cs-content{text-align:left;width:100%;max-width:40.25rem;display:flex;flex-direction:column;align-items:flex-start}#why-choose-us .cs-title{margin:0;max-width:26ch}#why-choose-us .cs-flex{display:flex;flex-direction:column;gap:3rem}#why-choose-us .cs-box{background-color:var(--secondary);overflow:hidden;position:relative;z-index:1;border-radius:1rem}#why-choose-us .cs-box-content{margin:0;padding:clamp(2rem,2.5vw,2.5rem) clamp(1.5rem,3vw,2.5rem);box-sizing:border-box;opacity:1;visibility:visible;transform:translateY(0);transition:hidden 0.3s,opacity 0.3s,transform 0.7s}#why-choose-us .cs-box-content.cs-hidden{visibility:hidden;opacity:0;position:absolute;top:0;left:0;transform:translateY(3rem)}#why-choose-us .cs-box-icon{text-align:left;width:3.875rem;height:auto;margin:0 0 2rem;display:block}#why-choose-us .cs-h3{font-size:clamp(1.5625rem,2.5vw,1.9375rem);line-height:1.2em;text-align:inherit;margin:0 0 1rem;font-weight:bold;color:var(--bodyTextColorWhite)}#why-choose-us .cs-box-text{font-size:1rem;line-height:1.5em;text-align:inherit;margin:0;padding:0;color:var(--bodyTextColorWhite);opacity:0.8}#why-choose-us .cs-button-group{display:flex;flex-direction:column;gap:1.5rem}#why-choose-us .cs-button{text-align:left;width:100%;margin:0;padding:0 0 1.5rem;background-color:transparent;border:none;border-bottom:1px solid #E8E8E8;display:flex;justify-content:flex-start;align-items:center;gap:1rem}#why-choose-us .cs-button.cs-active .cs-icon-wrapper,#why-choose-us .cs-button:hover .cs-icon-wrapper{background-color:var(--primary)}#why-choose-us .cs-button.cs-active .cs-icon,#why-choose-us .cs-button:hover .cs-icon{filter:grayscale(1) brightness(1000%)}#why-choose-us .cs-button.cs-active .cs-arrow,#why-choose-us .cs-button:hover .cs-arrow{filter:none;opacity:1}#why-choose-us .cs-button:hover{cursor:pointer}#why-choose-us .cs-icon-wrapper{width:3.75rem;height:3.75rem;background-color:#f7f7f7;border-radius:50%;display:flex;justify-content:center;align-items:center;flex:none;transition:background-color 0.3s}#why-choose-us .cs-icon{width:2rem;height:auto;display:block}#why-choose-us .cs-button-text{font-family:var(--headerFont);font-size:1.5rem;font-weight:bold;text-align:inherit;line-height:1.2em;max-width:24ch;margin:0;padding:0;color:var(--headerColor)}#why-choose-us .cs-arrow{width:2rem;margin-left:auto;filter:grayscale(1) brightness(100%);opacity:0.2;height:auto;display:block}#why-choose-us .cs-image-group{width:100%;height:100vw;min-height:25rem;max-height:23.75rem;position:relative;z-index:1}#why-choose-us .cs-picture{width:100%;height:100%;object-fit:cover;display:block;position:absolute;top:0;left:0;z-index:1}#why-choose-us .cs-picture img{width:100%;height:100%;border-radius:1rem;object-fit:cover;display:block;position:absolute;top:0;left:0}#why-choose-us .cs-floater{width:clamp(4.5rem,10vw,10rem);height:clamp(4.5rem,10vw,10rem);border-radius:50%;display:flex;justify-content:center;align-items:center;position:absolute;bottom:1.5rem;right:1.5rem;z-index:10}#why-choose-us .cs-floater-icon{width:100%;height:auto;display:block}}@media only screen and (min-width:48rem){#why-choose-us{padding-top:0}#why-choose-us .cs-container{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:stretch}#why-choose-us .cs-flex{flex-direction:row;align-items:stretch}#why-choose-us .cs-box{width:50%;height:100%;display:flex;order:2}#why-choose-us .cs-box-content{height:100%;display:flex;flex-direction:column;justify-content:center}#why-choose-us .cs-button-group{width:50%}}@media only screen and (min-width:64rem){#why-choose-us:before{content:"";width:50vw;height:100%;margin-left:25rem;border-radius:0 0 0 1rem;background:#f7f7f7;opacity:1;position:absolute;display:block;top:0;left:50%}#why-choose-us .cs-content{width:53%;padding:3rem 0 0 0;box-sizing:border-box}#why-choose-us .cs-flex{width:74%;max-width:53rem;padding:0 0 3rem;box-sizing:border-box}#why-choose-us .cs-image-group{width:40vw;max-width:32.625rem;height:100%;max-height:100%;position:absolute;top:0;right:0;z-index:-1}}@media only screen and (min-width:0rem){body.dark-mode #why-choose-us:before{background-color:rgba(0,0,0,0.2)}body.dark-mode #why-choose-us .cs-title,body.dark-mode #why-choose-us .cs-button-text{color:var(--bodyTextColorWhite)}body.dark-mode #why-choose-us .cs-box{background-color:var(--dark)}body.dark-mode #why-choose-us .cs-box:before{content:"";width:100%;height:100%;background:#000;opacity:0.6;position:absolute;display:block;top:0;left:0}body.dark-mode #why-choose-us .cs-button{border-color:rgba(255,255,255,0.1)}body.dark-mode #why-choose-us .cs-arrow{filter:grayscale(1) brightness(300%);opacity:0.5}}

/* reviews */
@media only screen and (min-width:0rem){#reviews{padding:var(--sectionPadding);padding-top:0;position:relative;z-index:1}#reviews .cs-container{width:100%;max-width:90rem;margin:auto;display:flex;flex-direction:column;align-items:center;gap:clamp(3rem,6vw,4rem)}#reviews .cs-content{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center}#reviews .cs-title{max-width:30ch}#reviews .cs-card-group{padding:0;margin:0;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:clamp(1rem,2.5vw,1.15rem)}#reviews .cs-item{list-style:none;width:100%;max-width:39.375rem;border-radius:1rem;margin:0;padding:clamp(1.5rem,3.15vw,2rem) clamp(1rem,3.15vw,2.5rem);background-color:var(--primaryLight);box-sizing:border-box;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;position:relative}#reviews .cs-quote{width:2.5rem;height:auto;margin-bottom:2rem;display:block}#reviews .cs-review{font-size:clamp(0.875rem,2vw,1rem);line-height:1.5em;margin:0;margin-bottom:clamp(1.25rem,3vw,2.5rem);color:var(--bodyTextColor)}#reviews .cs-name{font-family:var(--headerFont);font-weight:bold;font-size:clamp(1.25rem,3vw,1.5625rem);line-height:1.2em;margin:0;margin-top:auto;color:var(--headerColor);display:block}#reviews .cs-job{font-size:clamp(0.875rem,1.6vw,1rem);line-height:1.5em;margin:0;color:var(--bodyTextColor);display:block}}@media only screen and (min-width:48rem){#reviews{padding-top:3.75rem}#reviews .cs-card-group{flex-direction:row;justify-content:center;align-items:stretch;flex-wrap:wrap}#reviews .cs-item{width:clamp(31.5%,30vw,32.3%)}}@media only screen and (min-width:0rem){body.dark-mode #reviews .cs-title,body.dark-mode #reviews .cs-text{color:var(--bodyTextColorWhite)}body.dark-mode #reviews .cs-item{background-color:rgba(0,0,0,0.4)}body.dark-mode #reviews .cs-review,body.dark-mode #reviews .cs-name{color:var(--bodyTextColorWhite)}body.dark-mode #reviews .cs-job{color:var(--bodyTextColorWhite);opacity:0.7}}

/* faq */
@media only screen and (min-width:0rem){#faq{padding:var(--sectionPadding);background-color:transparent;position:relative;z-index:0;overflow:hidden;overflow-x:clip;overflow-y:visible}/* logo watermark: straddles the reviews/FAQ boundary, half off the right edge. overflow-x:clip stops the sideways scroll while letting the top half reach into #reviews; z-index:-1 inside this stacking context keeps it above the gray but under the FAQ content */#faq .cs-watermark{width:clamp(20rem,55vw,50rem);height:auto;opacity:0.07;display:block;position:absolute;top:0;right:0;z-index:-1;transform:translate(35%,-50%) rotate(-20deg);pointer-events:none}#faq .cs-container{width:100%;max-width:36.5rem;margin:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(2.5rem,5vw,3rem)}#faq .cs-content{text-align:left;max-width:39.375rem}#faq .cs-title{max-width:20ch}#faq .cs-faq-group{padding:0;margin:0;display:flex;justify-content:center;align-items:center;flex-direction:column;align-self:center}#faq .cs-faq-item{list-style:none;width:100%;padding:1.25rem;padding-left:0;box-sizing:border-box;transition:border-bottom 0.3s;border-bottom:1px solid #e8e8e8}#faq .cs-faq-item.active{border-color:var(--primaryLight)}#faq .cs-faq-item.active .cs-button{color:var(--primary)}#faq .cs-faq-item.active .cs-button:before{background-color:var(--primaryLight);transform:rotate(315deg)}#faq .cs-faq-item.active .cs-button:after{background-color:var(--primaryLight);transform:rotate(-315deg)}#faq .cs-faq-item.active .cs-item-p{height:auto;padding-top:1rem;opacity:1}#faq .cs-button{font-size:clamp(1rem,2vw,1.25rem);line-height:1.2em;text-align:left;font-weight:bold;padding:0;border:none;background:transparent;color:var(--headerColor);display:block;width:100%;position:relative;transition:background-color 0.3s,color 0.3s}#faq .cs-button:hover{cursor:pointer}#faq .cs-button:before{content:"";width:0.5rem;height:0.125rem;background-color:var(--headerColor);opacity:1;border-radius:50%;position:absolute;display:block;top:45%;right:0.25rem;transform:rotate(45deg);transform-origin:left center;transition:transform 0.5s}#faq .cs-button:after{content:"";width:0.5rem;height:0.125rem;background-color:var(--headerColor);opacity:1;border-radius:50%;position:absolute;display:block;top:45%;right:0.0625rem;transform:rotate(-45deg);transform-origin:right center;transition:transform 0.5s}#faq .cs-button-text{width:90%;display:block}#faq .cs-item-p{font-size:clamp(0.875rem,1.5vw,1rem);line-height:1.5em;width:90%;max-width:33.8125rem;height:0;margin:0;padding:0;opacity:0;color:var(--bodyTextColor);overflow:hidden;transition:opacity 0.3s,padding-bottom 0.3s}#faq .cs-image-group{font-size:min(2.43vw,1em);width:37.375em;height:42.375em;display:block;position:relative}#faq .cs-picture{width:32.625em;height:38.0625em;top:0;left:0}#faq .cs-picture img{position:absolute;top:0;left:0;height:100%;width:100%;object-fit:cover;border-radius:1rem}}@media only screen and (min-width:64rem){#faq .cs-container{max-width:80rem;flex-direction:row;justify-content:space-between}#faq .cs-content{width:55%}#faq .cs-image-group{font-size:min(1.4vw,1em);height:auto;min-height:42.375rem}#faq .cs-picture{height:90%}}@media only screen and (min-width:0rem){body.dark-mode #faq{background-color:transparent}body.dark-mode #faq .cs-watermark{opacity:0.05}body.dark-mode #faq .cs-title,body.dark-mode #faq .cs-item-p,body.dark-mode #faq .cs-button-text{color:var(--bodyTextColorWhite)}body.dark-mode #faq .cs-item-p{opacity:0.8}body.dark-mode #faq .cs-faq-item{border-bottom:rgba(255,255,255,0.1)}body.dark-mode #faq .cs-faq-item.active{border-color:#fff}body.dark-mode #faq .cs-faq-item.active .cs-button{color:#fff}body.dark-mode #faq .cs-faq-item.active .cs-button:before,body.dark-mode #faq .cs-faq-item.active .cs-button:after{background-color:#fff}body.dark-mode #faq .cs-button{color:var(--bodyTextColorWhite)}body.dark-mode #faq .cs-button:before,body.dark-mode #faq .cs-button:after{background-color:var(--bodyTextColorWhite)}}


/* footer */


/* Template fidelity fixes */
/* Toggle anchor corrective: the base layer centers [id^="dark-mode-toggle"]
   with top:50%/translateY(-50%); these templates anchor it with `bottom` and
   never declare `top`, so the over-constrained box floated to header center.
   Scoped so the template-declared anchor wins; per-property so templates
   declaring their own top/transform are untouched. */
#navigation [id^="dark-mode-toggle"] {
  top: auto;
}

/*-- -------------------------- -->
<---      Project Gallery       -->
<--- -------------------------- -*/

/* Ported from the Wholesale Windows & Doors home gallery. */

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-2 {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  #gallery-2 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 1;
  }
  #gallery-2 .cs-content {
    width: 100%;
    display: contents;
  }
  #gallery-2 .cs-title {
    margin: 0 0 3rem;
  }
  #gallery-2 .cs-gallery-wrapper {
    width: 100%;
    position: relative;
    z-index: 1;
  }
  #gallery-2 .cs-gallery {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
    position: relative;
  }
  #gallery-2 .cs-image {
    /* 320px - 524px */
    min-height: clamp(20rem, 35vw, 32.75rem);
    display: block;
    grid-column: span 12;
    position: relative;
    overflow: hidden;
  }
  #gallery-2 .cs-picture {
    width: 100%;
    height: 100%;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
  }
  #gallery-2 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.65s, opacity 0.3s;
  }
  #gallery-2 .cs-info {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
  }
  #gallery-2 .cs-tag {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 2vw, 1rem);
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.5rem 1.25rem;
    background-color: var(--primary);
    color: #fff;
  }
  #gallery-2 .cs-project {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    padding: 0.75rem 1rem;
    background-color: #fff;
    color: var(--headerColor);
  }
  #gallery-2 .cs-stats {
    width: 100%;
    max-width: 80rem;
    /* 48px - 120px */
    margin: clamp(3rem, 9vw, 7.5rem) auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(1rem, 3vw, 1.5rem);
    row-gap: 2rem;
  }
  #gallery-2 .cs-stat {
    font-family: var(--headerFont);
    display: flex;
    flex-direction: column;
    column-gap: 1.25rem;
    row-gap: 0.5rem;
  }
  #gallery-2 .cs-number {
    font-size: var(--headerFontSize);
    line-height: 1.2em;
    font-weight: 700;
    white-space: nowrap;
    color: var(--primary);
  }
  #gallery-2 .cs-desc {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #gallery-2 .cs-container {
    gap: clamp(3rem, 6vw, 4rem);
  }
  #gallery-2 .cs-content {
    text-align: left;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1.5rem;
  }
  #gallery-2 .cs-title {
    margin: 0;
  }
  #gallery-2 .cs-image {
    grid-column: span 4;
  }
  #gallery-2 .cs-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #gallery-2 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 4rem;
  }
  /* labels slide in and the photo zooms back on hover */
  #gallery-2 .cs-tag {
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out, opacity 0.3s;
  }
  #gallery-2 .cs-project {
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.4s ease-out, opacity 0.3s;
    transition-delay: 0.1s;
  }
  #gallery-2 .cs-image:hover .cs-tag,
  #gallery-2 .cs-image:hover .cs-project,
  #gallery-2 .cs-image:focus-visible .cs-tag,
  #gallery-2 .cs-image:focus-visible .cs-project {
    opacity: 1;
    transform: translateX(0);
  }
  #gallery-2 .cs-image:hover .cs-picture img {
    opacity: 0.2;
    transform: scale(1.3);
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #gallery-2 .cs-stat {
    flex-direction: row;
    align-items: center;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #gallery-2 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #gallery-2 .cs-title,
  body.dark-mode #gallery-2 .cs-desc {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #gallery-2 .cs-number {
    color: var(--primaryOnDark);
  }
}
@media (prefers-reduced-motion: reduce) {
  #gallery-2 .cs-tag,
  #gallery-2 .cs-project,
  #gallery-2 .cs-picture img {
    transition: none;
  }
}
