/* ===== local.css ===== */
/* cs-navigation */
@media only screen and (min-width:0rem){body.dark-mode #cs-navigation #dark-mode-toggle .cs-sun{opacity:1;transform:translate(-50%,-50%)}body.dark-mode #cs-navigation #dark-mode-toggle .cs-moon{opacity:0;transform:translate(-50%,-150%);fill:#fff}#cs-navigation #dark-mode-toggle{z-index:1000;position:absolute;top:0rem;right:1rem;display:block;border:none;background:transparent;height:3rem;width:3rem;overflow:hidden;padding:0;transition:top 0.3s,right 0.3s}#cs-navigation #dark-mode-toggle img,#cs-navigation #dark-mode-toggle svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:1.25rem;width:1.25rem;pointer-events:none}#cs-navigation #dark-mode-toggle .cs-moon{z-index:2;transition:transform 0.3s,opacity 0.3s}#cs-navigation #dark-mode-toggle .cs-sun{z-index:1;opacity:0;transform:translate(-50%,100%);transition:transform 0.3s,opacity 0.3s}body.dark-mode #cs-navigation .cs-drop-ul{background-color:var(--dark)}body.dark-mode #cs-navigation .cs-li-link.cs-drop-link:hover{background-color:var(--medium)}body.dark-mode #cs-navigation .cs-drop-icon{filter:grayscale(1) brightness(1000%)}}@media only screen and (min-width:40.625rem) and (max-width:74.96875rem){#cs-navigation #dark-mode-toggle{order:3;position:relative;top:auto;right:auto}#cs-navigation .cs-location{display:flex;flex-direction:row;justify-content:flex-end}#cs-navigation .cs-top-bar{display:flex;justify-content:space-between;align-items:center;padding-bottom:0.75rem}#cs-navigation .cs-logo{order:1;margin-right:auto}#cs-navigation .cs-item{position:relative}#cs-navigation .cs-item:nth-of-type(2):after{display:none}#cs-navigation .cs-item:after{position:relative;content:"";opacity:1;display:block;margin:0 1rem;background:#cfd0d1;height:100%;width:1px}#cs-navigation .cs-top-social{visibility:visible;opacity:1;display:flex;justify-content:center;align-items:center;height:2rem;transition:opacity 0.3s,visibility 0.3s,height 0.3s;gap:0.5rem}#cs-navigation .cs-social-link{display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#f7f7f7;height:2rem;width:2rem;text-decoration:none}#cs-navigation .cs-social-icon{display:block;height:auto;width:0.75rem}#cs-navigation .cs-bottom-bar{gap:1rem}#cs-navigation .cs-li-link{font-size:1.5rem}#cs-navigation .cs-nav-button{order:2;position:relative;transform-style:preserve-3d;perspective:200px;display:flex;justify-content:flex-start;align-items:center;margin-right:2rem;text-decoration:none;gap:1rem}#cs-navigation .cs-nav-button .cs-wrapper{z-index:1;position:relative;display:flex;justify-content:center;align-items:center;height:2.5rem;width:2.5rem;transition:transform 0.6s;flex:none}#cs-navigation .cs-nav-button .cs-wrapper:before{z-index:-1;position:absolute;top:0;left:0;content:"";display:block;background-color:#f3f3f3;height:100%;width:100%}#cs-navigation .cs-nav-button .cs-icon{display:block;height:auto;width:1.5rem;transition:transform 0.3s}#cs-navigation .cs-nav-button .cs-info{display:flex;flex-direction:column;align-items:flex-start}#cs-navigation .cs-nav-button .cs-header{display:block;margin:0;font-size:0.875rem;line-height:1.5em;color:#585b5d}#cs-navigation .cs-nav-button .cs-link-content{display:block;margin:0;font-size:1rem;line-height:1.5em;font-weight:700;color:var(--headerColor)}#cs-navigation .cs-nav-button:hover .cs-wrapper{transform:rotateY(180deg)}#cs-navigation .cs-nav{order:4}}@media only screen and (min-width:1024px){body.dark-mode #cs-navigation{background-color:var(--dark)}body.dark-mode #cs-navigation .cs-top-bar:before{opacity:0.1}body.dark-mode #cs-navigation .cs-social-link{background-color:rgba(255,255,255,0.2)}body.dark-mode #cs-navigation .cs-logo,body.dark-mode #cs-navigation .cs-contact-wrapper{border-color:rgba(255,255,255,0.1)}body.dark-mode #cs-navigation .cs-picture{background-color:var(--accent)}body.dark-mode #cs-navigation .cs-item:after{opacity:0.1}body.dark-mode #cs-navigation .cs-wrapper:before{opacity:0.1}body.dark-mode #cs-navigation .cs-button-icon,body.dark-mode #cs-navigation .cs-social-icon{opacity:1;filter:grayscale(1) brightness(1000%)}body.dark-mode #cs-navigation .cs-link,body.dark-mode #cs-navigation .cs-header,body.dark-mode #cs-navigation .cs-li-link,body.dark-mode #cs-navigation .cs-item,body.dark-mode #cs-navigation .cs-link-content{color:var(--bodyTextColorWhite)}body.dark-mode #cs-navigation .cs-li-link:before{background-color:var(--primaryLight)}body.dark-mode #cs-navigation .cs-button-border{color:#fff;border-color:#fff}body.dark-mode #cs-navigation .cs-button-border:hover{border-color:var(--primary)}body.dark-mode #cs-navigation .cs-icon{filter:grayscale(1) brightness(1000%)}}@media only screen and (min-width:75rem){#cs-navigation #dark-mode-toggle{position:relative;bottom:auto;right:auto;transform:none;margin:0}#cs-navigation #dark-mode-toggle:hover{cursor:pointer}#cs-navigation{z-index:10000;position:fixed;display:flex;background-color:#fff;width:100%;box-sizing:border-box;padding:0;transition:height 0.3s,background-color 0.3s;box-shadow:rgba(149,157,165,0.2) 0px 8px 24px}#cs-navigation .cs-bottom-bar{justify-content:flex-start;padding:0;display:flex;justify-content:flex-end;align-items:center;width:100%;box-sizing:border-box;gap:2rem}#cs-navigation .cs-remove{display:flex}#cs-navigation .cs-toggle{display:none}#cs-navigation .cs-nav{order:2;order:-1}#cs-navigation .cs-ul{display:flex;justify-content:flex-start;align-items:center;margin:0;width:100%;padding:0;gap:clamp(1.25rem,2.6vw,2.25rem)}#cs-navigation .cs-li{padding:clamp(1.5rem,2.1vw,1.75rem)0;list-style:none;flex:none}#cs-navigation .cs-li:last-of-type{margin-left:auto;padding:0}#cs-navigation .cs-li-link{position:relative;display:block;margin:0;text-decoration:none;text-transform:uppercase;font-size:1rem;line-height:1.5em;color:var(--headerColor);transition:color 0.3s;display:flex;align-items:center}#cs-navigation .cs-li-link.cs-active,#cs-navigation .cs-li-link:hover{color:var(--primary)}#cs-navigation .cs-nav-button{display:none}#cs-navigation .cs-dropdown{position:relative}#cs-navigation .cs-dropdown:hover{cursor:pointer}#cs-navigation .cs-dropdown:hover .cs-drop-ul{visibility:visible;opacity:1;transform:scaleY(1)}#cs-navigation .cs-dropdown:hover .cs-drop-li{opacity:1;transform:translateY(0)}#cs-navigation .cs-drop-icon{display:inline-block;height:auto;width:1.5rem}#cs-navigation .cs-drop-ul{z-index:-100;position:absolute;top:100%;visibility:hidden;opacity:0;transform:scaleY(0);border-bottom:5px solid var(--primary);margin:0;background-color:#fff;min-width:12.5rem;overflow:hidden;padding:0;transition:transform 0.3s,visibility 0.3s,opacity 0.3s;box-shadow:rgba(149,157,165,0.2) 0px 10px 16px;transform-origin:top}#cs-navigation .cs-drop-li{opacity:0;transform:translateY(-10/16rem);display:block;height:auto;width:100%;list-style:none;text-decoration:none;font-size:1rem;color:var(--bodyTextColor);transition:opacity 0.6s,transform 0.6s}#cs-navigation .cs-drop-li:nth-of-type(2){transition-delay:0.15s}#cs-navigation .cs-drop-li:nth-of-type(3){transition-delay:0.3s}#cs-navigation .cs-drop-li:nth-of-type(4){transition-delay:0.45s}#cs-navigation .cs-drop-li:nth-of-type(5){transition-delay:0.6s}#cs-navigation .cs-drop-li:nth-of-type(6){transition-delay:0.75s}#cs-navigation .cs-li-link.cs-drop-link{display:block;box-sizing:border-box;padding:0.75rem;white-space:nowrap;text-decoration:none;font-size:1rem;line-height:1.5em;color:var(--bodyTextColor);transition:color 0.3s,background-color 0.3s}#cs-navigation .cs-li-link.cs-drop-link:hover{background-color:var(--primary);color:var(--bodyTextColorWhite)}#cs-navigation .cs-li-link.cs-drop-link:before{display:none}#cs-navigation .cs-logo{z-index:100;display:flex;justify-content:center;align-items:center;background-color:#141615;height:var(--headerHeight);max-width:21.25rem;width:20%;box-sizing:border-box;padding:1rem;transition:height 0.3s}#cs-navigation .cs-logo img{max-height:7.5rem;height:auto;max-width:16.25rem;width:80%;box-sizing:border-box;-o-object-fit:contain;object-fit:contain;transition:max-height 0.3s,opacity 0.3s,transform 0.6s}#cs-navigation .cs-logo-wrapper{z-index:1;position:relative;transform-style:preserve-3d;perspective:700px;display:flex;justify-content:center;align-items:center;height:auto;width:auto}#cs-navigation .cs-default{backface-visibility:hidden}#cs-navigation .cs-dark{z-index:-1;position:absolute;top:0;left:50%;backface-visibility:hidden;opacity:0;transform:rotateX(180deg) translateX(-50%)}#cs-navigation .cs-mobile{display:none}#cs-navigation .cs-top-bar{position:relative;display:flex;justify-content:space-between;align-items:center;margin:0;height:3.5rem;width:100%;padding:0;transition:height 0.3s,opacity 0.3s,transform 0.3s}#cs-navigation .cs-top-bar:before{z-index:-2;position:absolute;bottom:0;left:-2.5rem;right:-2.5rem;content:"";opacity:1;display:block;background:#e7e7e8;height:1px;transition:width 0.3s}#cs-navigation .cs-top-social{visibility:visible;opacity:1;display:flex;justify-content:center;align-items:center;height:2rem;transition:opacity 0.3s,visibility 0.3s,height 0.3s;gap:0.5rem}#cs-navigation .cs-social-link{display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#f7f7f7;height:2rem;width:2rem;text-decoration:none;transition:background-color 0.3s}#cs-navigation .cs-social-link:hover{background-color:var(--primary)}#cs-navigation .cs-social-icon{display:block;height:auto;width:0.75rem}#cs-navigation .cs-location{display:flex;flex-direction:row}#cs-navigation .cs-item{position:relative;display:flex;justify-content:flex-start;align-items:center;margin:0;list-style:none;flex:none;gap:0.25rem}#cs-navigation .cs-item:last-of-type:after{display:none}#cs-navigation .cs-item:hover .cs-picture{transform:scale(1.1)}#cs-navigation .cs-item:after{position:relative;content:"";opacity:1;display:block;margin:0 1.5rem;background:#eff1f0;height:100%;width:1px}#cs-navigation .cs-link{display:block;margin:0;text-decoration:none;font-size:0.875rem;line-height:1.5em;color:var(--bodyTextColor);transition:color 0.3s;text-align:inherit}#cs-navigation .cs-link:hover{text-decoration:underline}#cs-navigation .cs-middle{height:var(--headerHeight);width:100%;padding:0 2.5rem 0 2.5rem;transition:height 0.3s}#cs-navigation .cs-desktop-button{order:2;position:relative;transform-style:preserve-3d;perspective:200px;display:flex;justify-content:flex-start;align-items:center;text-decoration:none;gap:1rem}#cs-navigation .cs-desktop-button:hover .cs-wrapper{transform:rotateY(360deg)}#cs-navigation .cs-wrapper{z-index:1;position:relative;display:flex;justify-content:center;align-items:center;height:3.5rem;width:3.5rem;transition:transform 0.6s;flex:none}#cs-navigation .cs-wrapper:before{z-index:-1;position:absolute;top:0;left:0;content:"";display:block;background-color:#f3f3f3;height:100%;width:100%}#cs-navigation .cs-button-icon{display:block;height:auto;width:1.25rem;transition:transform 0.3s}#cs-navigation .cs-info{display:flex;flex-direction:column;align-items:flex-start}#cs-navigation .cs-header{display:block;margin:0;font-size:0.875rem;line-height:1.5em;color:#585b5d}#cs-navigation .cs-link-content{display:block;margin:0;font-size:1rem;line-height:1.5em;font-weight:700;color:var(--headerColor)}#cs-navigation .cs-nav-button,#cs-navigation .cs-button-border{display:none}#cs-navigation .cs-contact-wrapper{display:flex;justify-content:center;align-items:center;border-left:1px solid #e7e7e8;height:var(--headerHeight);max-width:18.375rem;width:18%;transition:height 0.3s;flex:none}#cs-navigation.scroll .cs-top-bar{opacity:0;height:0;overflow:hidden}#cs-navigation.scroll .cs-top-bar:before{width:0}#cs-navigation.scroll .cs-middle{height:5rem}#cs-navigation.scroll .cs-logo,#cs-navigation.scroll .cs-contact-wrapper{height:5rem}#cs-navigation.scroll .cs-logo img{max-height:5rem}#cs-navigation.scroll .cs-toggle{margin-top:0}}@media only screen and (min-width:93.75rem){#cs-navigation .cs-nav{margin-right:auto}#cs-navigation .cs-button-border{position:relative;display:flex;justify-content:center;align-items:center;border:1px solid var(--headerColor);padding:0 1.75rem;text-decoration:none;text-transform:uppercase;font-size:1rem;line-height:2.875rem;font-weight:bold;color:var(--headerColor);transition:color 0.3s,border-color 0.3s;gap:0.625rem}#cs-navigation .cs-button-border .cs-icon{width:1.25rem;transition:filter 0.3s}#cs-navigation .cs-button-border:before{z-index:-1;position:absolute;top:0;left:0;content:"";opacity:1;display:block;background:var(--primary);height:100%;width:0%;transition:width 0.3s}#cs-navigation .cs-button-border:hover{color:#fff;border-color:var(--primary)}#cs-navigation .cs-button-border:hover .cs-icon{filter:invert(1) brightness(1000%)}#cs-navigation .cs-button-border:hover:before{width:100%}}@media only screen and (max-width:1299.5px){body.dark-mode #cs-navigation{background-color:var(--dark)}body.dark-mode #cs-navigation .cs-social-link{background-color:rgba(255,255,255,0.2)}body.dark-mode #cs-navigation .cs-social-icon{opacity:1;filter:grayscale(1) brightness(1000%)}body.dark-mode #cs-navigation .cs-top-bar:before{opacity:0.1}body.dark-mode #cs-navigation .cs-item{color:#fff}body.dark-mode #cs-navigation .cs-icon,body.dark-mode #cs-navigation .cs-button-icon{filter:grayscale(1) brightness(1000%)}body.dark-mode #cs-navigation .cs-link,body.dark-mode #cs-navigation .cs-header,body.dark-mode #cs-navigation .cs-link-content{color:var(--bodyTextColorWhite)}body.dark-mode #cs-navigation .cs-toggle{background-color:var(--primary)}body.dark-mode #cs-navigation .cs-line{color:#1a1a1a}body.dark-mode #cs-navigation .cs-wrapper:before{opacity:0.1}body.dark-mode #cs-navigation .cs-ul-wrapper{background-color:var(--dark)}body.dark-mode #cs-navigation .cs-ul-wrapper:before{position:absolute;top:0;left:0;content:"";opacity:0.2;display:block;background:#000;height:100%;width:100%}body.dark-mode #cs-navigation .cs-li-link{color:var(--bodyTextColorWhite)}body.dark-mode #cs-navigation .cs-li-link.cs-active{color:var(--primary)}body.dark-mode #cs-navigation.cs-active .cs-picture{background-color:var(--primaryLight)}}@media only screen and (max-width:74.96875rem){#cs-navigation{z-index:100;position:fixed;background-color:#fff;width:100%;box-sizing:border-box;padding:0.75rem 1rem 0 1rem;transition:transform 0.3s;box-shadow:rgba(149,157,165,0.2) 0px 8px 24px}#cs-navigation .cs-location{z-index:-3;position:relative;margin:0;padding:0;color:var(--bodyTextColorWhite);transition:height 0.3s,padding-bottom 0.3s,opacity 0.3s}#cs-navigation .cs-top-social{display:none}#cs-navigation .cs-top-bar{z-index:1;position:relative;padding-bottom:0.75rem}#cs-navigation .cs-top-bar:before{z-index:-2;position:absolute;bottom:0;left:50%;content:"";opacity:1;transform:translateX(-50%);display:block;background:#eff1f0;height:1px;width:100vw;transition:opacity 0.3s}#cs-navigation .cs-bottom-bar{display:flex;justify-content:space-between;align-items:center;height:auto;padding:1.25rem 0}#cs-navigation .cs-logo{display:block;height:2.5rem;width:auto}#cs-navigation .cs-logo img{height:100%;width:auto}#cs-navigation .cs-logo-wrapper{z-index:1;position:relative;transform-style:preserve-3d;perspective:700px;height:100%;width:auto}#cs-navigation .cs-default{backface-visibility:hidden;transition:opacity 0.3s,transform 0.6s}#cs-navigation .cs-dark{z-index:-1;position:absolute;top:0;left:0;backface-visibility:hidden;opacity:0;transform:rotateX(180deg);transition:opacity 0.3s,transform 0.6s}#cs-navigation .cs-desktop{display:none}#cs-navigation .cs-item{display:flex;justify-content:center;align-items:center;margin:0;list-style:none;font-size:1rem;line-height:1.5rem;color:inherit;color:#585b5d;gap:0.25rem}#cs-navigation .cs-remove{display:none}#cs-navigation .cs-icon{display:block;height:auto;width:1.25rem}#cs-navigation .cs-header{display:none}#cs-navigation .cs-link{display:block;margin:0;text-decoration:none;font-size:0.875rem;line-height:1.5em;color:var(--bodyTextColor);transition:color 0.3s;text-align:inherit}#cs-navigation .cs-toggle{display:flex;justify-content:center;align-items:center;border:none;margin:0;background-color:#f3f3f3;height:3rem;width:3rem}#cs-navigation .cs-active .cs-line1{top:50%;transform:translate(-50%,-50%) rotate(225deg)}#cs-navigation .cs-active .cs-line2{top:50%;transform:translate(-50%,-50%) translateY(0) rotate(-225deg);transform-origin:center}#cs-navigation .cs-active .cs-line3{bottom:100%;opacity:0}#cs-navigation .cs-box{position:relative;height:0.75rem;width:1.25rem}#cs-navigation .cs-line{position:absolute;left:50%;transform:translateX(-50%);border-radius:2px;background-color:#585b5d;height:2px;width:100%}#cs-navigation .cs-line1{top:0;transition:transform 0.5s,top 0.3s,left 0.3s;animation-duration:0.7s;animation-timing-function:ease;animation-direction:normal;animation-fill-mode:forwards;transform-origin:center}#cs-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-direction:normal;animation-fill-mode:forwards}#cs-navigation .cs-line3{bottom:0;left:0;transform:none;width:0.75rem;transition:bottom 0.3s,opacity 0.3s}#cs-navigation .cs-contact-wrapper,#cs-navigation .cs-tablet,#cs-navigation .cs-button-border{display:none}#cs-navigation.cs-active .cs-link{color:var(--bodyTextColorWhite)}#cs-navigation.cs-active .cs-ul-wrapper{opacity:1;transform:scaleY(1);transition-delay:0.1s}#cs-navigation.cs-active .cs-li{opacity:1;transform:translateY(0)}#cs-navigation.scroll{transform:translateY(-3rem)}#cs-navigation.scroll #dark-mode-toggle{top:4.25rem;right:4.875rem}#cs-navigation .cs-ul-wrapper{z-index:-1;position:absolute;top:100%;left:0;opacity:0;transform:scaleY(0);background-color:#fff;width:100%;overflow:hidden;transition:transform 0.4s,opacity 0.3s;box-shadow:inset rgba(0,0,0,0.2) 0px 8px 24px;transform-origin:top}#cs-navigation .cs-ul{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;margin:0;max-height:65vh;height:auto;width:100%;overflow:scroll;padding:3rem 0 3rem 0;gap:1.25rem}#cs-navigation .cs-li{opacity:0;transform:translateY(-4.375rem);margin-right:0;list-style:none;transition:transform 0.6s,opacity 0.9s;display:block;width:100%;text-align:center}#cs-navigation .cs-li:nth-of-type(1){transition-delay:0.05s}#cs-navigation .cs-li:nth-of-type(2){transition-delay:0.1s}#cs-navigation .cs-li:nth-of-type(3){transition-delay:0.15s}#cs-navigation .cs-li:nth-of-type(4){transition-delay:0.2s}#cs-navigation .cs-li:nth-of-type(5){transition-delay:0.25s}#cs-navigation .cs-li:nth-of-type(6){transition-delay:0.3s}#cs-navigation .cs-li:nth-of-type(7){transition-delay:0.35s}#cs-navigation .cs-li:nth-of-type(8){transition-delay:0.4s}#cs-navigation .cs-li:nth-of-type(9){transition-delay:0.45s}#cs-navigation .cs-li-link{position:relative;display:inline-block;margin:0;text-decoration:none;text-transform:uppercase;font-size:clamp(1rem,2.5vw,1.5rem);line-height:1.2em;color:var(--headerColor)}#cs-navigation .cs-li-link.cs-active{color:var(--primary)}#cs-navigation .cs-dropdown{position:relative;color:var(--bodyTextColorWhite)}#cs-navigation .cs-dropdown .cs-li-link{position:relative;transition:opacity 0.3s}#cs-navigation .cs-dropdown.cs-active .cs-drop-ul{visibility:visible;opacity:1;margin:0.75rem auto 0 auto;height:auto;padding:1.25rem 0}#cs-navigation .cs-dropdown.cs-active .cs-drop-link{opacity:1}#cs-navigation .cs-drop-icon{position:absolute;top:50%;right:-1.25rem;transform:translateY(-50%);height:auto;width:1.5rem}#cs-navigation .cs-drop-ul{visibility:hidden;opacity:0;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;margin:0 auto;background-color:var(--primary);height:0;width:70%;overflow:hidden;padding:0;transition:padding 0.3s,margin 0.3s,height 0.3s,opacity 0.3s,visibility 0.3s;gap:0.75rem}#cs-navigation .cs-drop-li{list-style:none}#cs-navigation .cs-li-link.cs-drop-link{text-transform:uppercase;font-size:clamp(0.875rem,2vw,1.25rem);color:#fff}}

/* hero-2275 */
@media only screen and (min-width:0rem){#hero-2275{z-index:10;position:relative;background-color:#f8f8f8;overflow:hidden;padding:clamp(9rem,30.95vw,18.75rem) 1rem clamp(7.5rem,14vw,10.9375rem)}#hero-2275 .cs-container{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:auto;max-width:80rem;width:100%;gap:5.5rem}#hero-2275 .cs-content{z-index:10;position:relative;display:flex;flex-direction:column;align-items:flex-start;max-width:39.375rem;width:100%;text-align:left}#hero-2275 .cs-title{position:relative;margin:0 0 1rem;width:100%;text-transform:uppercase;font-size:clamp(2.4375rem,6.4vw,3.8125rem);line-height:1.2em;font-weight:900;color:var(--bodyTextColorWhite)}#hero-2275 .cs-text{opacity:0.8;margin:0 0 clamp(1.75rem,4vw,2.5rem);max-width:43.75rem;width:100%;font-size:clamp(1rem,2.5vw,1.25rem);line-height:1.5em;color:var(--bodyTextColorWhite)}#hero-2275 .cs-image-group{position:absolute;top:0;left:0;display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}#hero-2275 .cs-background{z-index:1;position:relative;height:100%;width:100%}#hero-2275 .cs-background img{z-index:-1;position:absolute;top:0;left:0;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}#hero-2275 .cs-background1:before{position:absolute;top:0;left:0;content:"";opacity:0.72;display:block;background:#000;height:100%;width:100%}#hero-2275 .cs-background2{display:none;flex:none}#hero-2275 .cs-background2 img{object-position:50% center}body.dark-mode #hero-2275{background-color:rgba(0,0,0,0.2)}}@media only screen and (min-width:48rem){#hero-2275{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5.625rem}#hero-2275 .cs-container{flex-direction:row;justify-content:flex-start;align-items:flex-start}#hero-2275 .cs-content{align-items:flex-start;width:53%;text-align:left}#hero-2275 .cs-picture{position:absolute;bottom:-4.0625rem;right:-1.875rem;width:56%}#hero-2275 .cs-image-group{flex-direction:row}#hero-2275 .cs-background2{border-left:2px solid #ffc219;max-height:100%;height:100%;width:25vw}}@media only screen and (min-width:81.25rem){#hero-2275 .cs-background1{position:absolute;top:0;right:50%;margin-right:-21.5625rem;width:75vw}#hero-2275 .cs-background2{position:absolute;top:0;bottom:8.5rem;left:50%;display:block;margin-left:21.3125rem;height:auto;width:40.8125vw}}

/* Hservices-2275 */
@media only screen and (min-width:0rem){#Hservices-2275{z-index:20;position:relative;background-color:#f8f8f8;width:100%;padding:var(--sectionPadding);padding-bottom:0}#Hservices-2275 .cs-container{z-index:1;position:relative;margin:auto;max-width:80rem}#Hservices-2275 .cs-card-group{display:grid;grid-template-columns:repeat(12,1fr);margin:0;max-width:80rem;width:100%;padding:0;row-gap:2rem}#Hservices-2275 .cs-item{z-index:1;position:relative;width:100%;box-sizing:border-box;list-style:none;transition:background-color 0.3s,border-color 0.3s;text-align:left;grid-column:span 12}#Hservices-2275 .cs-item:last-of-type{background-color:#fefaf6}#Hservices-2275 .cs-item:last-of-type .cs-link{box-sizing:border-box;padding:clamp(2rem,4vw,5rem)0}#Hservices-2275 .cs-item:last-of-type .cs-icon{margin-bottom:1.5rem;width:4rem}#Hservices-2275 .cs-item:last-of-type .cs-h3{font-size:1.5625rem}#Hservices-2275 .cs-item:last-of-type .cs-item-text{margin-bottom:2rem}#Hservices-2275 .cs-number{margin:0;font-size:4.5rem;line-height:1.2em;font-weight:700;color:var(--headerColor)}#Hservices-2275 .cs-fake-link{display:inline-flex;justify-content:center;align-items:center;border-bottom:1px solid var(--primary);margin:0;padding:0 0 0.25rem 0;text-transform:uppercase;font-size:1rem;line-height:1.2em;font-weight:700;color:var(--primary);gap:0.75rem}#Hservices-2275 .cs-item-background{margin-top:1.75rem;margin-bottom:-2rem}#Hservices-2275 .cs-item-picture{z-index:1;position:relative;display:block;height:100vw;width:100%}#Hservices-2275 .cs-item-picture img{z-index:-1;position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:100vw;-o-object-fit:cover;object-fit:cover}#Hservices-2275 .cs-background{z-index:-1;position:absolute;top:0;left:50%;transform:translateX(-50%);display:block;height:100%;width:100vw}#Hservices-2275 .cs-background img{position:absolute;top:0;left:0;opacity:0.08;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}#Hservices-2275 .cs-background:before{z-index:-1;position:absolute;top:0;left:0;content:"";opacity:1;display:block;background:#fff;height:100%;width:100%}#Hservices-2275 .cs-link{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-decoration:none}#Hservices-2275 .cs-icon{margin:0 0 1.25rem 0;height:auto;width:2.5rem}#Hservices-2275 .cs-h3{margin:0 0 0.5rem 0;font-size:1.25rem;line-height:1.2em;font-weight:700;color:var(--headerColor);transition:color 0.3s;text-align:inherit}#Hservices-2275 .cs-item-text{margin:0;font-size:clamp(0.875rem,1.5vw,1rem);line-height:1.5em;color:var(--bodyTextColor);transition:color 0.3s,opacity 0.3s;text-align:inherit}body.dark-mode #Hservices-2275{background-color:rgba(0,0,0,0.2)}body.dark-mode #Hservices-2275 .cs-h3,body.dark-mode #Hservices-2275 .cs-item-text,body.dark-mode #Hservices-2275 .cs-number,body.dark-mode #Hservices-2275 .cs-fake-link{color:var(--bodyTextColorWhite)}body.dark-mode #Hservices-2275 .cs-item-text,body.dark-mode #Hservices-2275 .cs-fake-link{opacity:0.8}body.dark-mode #Hservices-2275 .cs-fake-link{border-color:var(--bodyTextColorWhite)}body.dark-mode #Hservices-2275 .cs-fake-link .cs-arrow{filter:grayscale(1) brightness(1000%)}body.dark-mode #Hservices-2275 .cs-item:last-of-type{background-color:var(--medium)}}@media only screen and (min-width:48rem){#Hservices-2275{padding:var(--sectionPadding)}#Hservices-2275 .cs-card-group{width:44%}#Hservices-2275 .cs-item:last-of-type{position:absolute;bottom:calc(clamp(3.75rem,7.82vw,6.25rem)*-1);right:1rem;width:49%}#Hservices-2275 .cs-item:last-of-type .cs-link{padding:clamp(2rem,6vw,5rem) clamp(1rem,6vw,5rem)}#Hservices-2275 .cs-item-background{position:absolute;top:calc(clamp(16.25rem,25vw,18.75rem)*-1);right:-1rem;margin:0;height:30.5rem;width:45%}#Hservices-2275 .cs-item-picture{height:100%}#Hservices-2275 .cs-item-picture img{left:0;transform:none;width:100%}#Hservices-2275 .cs-background{left:0;transform:none;width:100%}}@media only screen and (min-width:64rem){#Hservices-2275 .cs-item:last-of-type{top:auto;width:47vw}#Hservices-2275 .cs-item-background{width:40%}}@media only screen and (min-width:81.25rem){#Hservices-2275{padding:0}#Hservices-2275 .cs-card-group{width:53.75rem;padding:3.75rem 0;-moz-column-gap:1.25rem;column-gap:1.25rem}#Hservices-2275 .cs-item{grid-column:span 4}#Hservices-2275 .cs-item:last-of-type{top:auto;bottom:0;right:0;width:25rem}#Hservices-2275 .cs-item-background{display:none}}

/* services-2287 */
@media only screen and (min-width:0rem){#services-2287{position:relative;background-color:#fffcf3;overflow:hidden;padding:var(--sectionPadding)}#services-2287 .cs-container{display:flex;flex-direction:column;align-items:center;margin:auto;max-width:80rem;width:100%;gap:clamp(3rem,6vw,4rem)}#services-2287 .cs-content{display:flex;flex-direction:column;align-items:center;width:100%;text-align:center}#services-2287 .cs-title{max-width:24ch}#services-2287 .cs-card-group{display:grid;grid-template-columns:repeat(12,1fr);margin:0;width:100%;padding:0;gap:1.25rem}#services-2287 .cs-item{z-index:1;position:relative;border-bottom:1px solid #e7e7e8;margin:0;width:100%;box-sizing:border-box;padding:clamp(2rem,6vw,3.75rem) clamp(1rem,5vw,3rem);list-style:none;transition:background-color 0.3s;text-align:center;grid-column:span 12;grid-row:span 1}#services-2287 .cs-item:last-child{border-bottom:none}#services-2287 .cs-link{display:flex;flex-direction:column;justify-content:center;align-items:center;text-decoration:none}#services-2287 .cs-icon-wrapper{position:relative;display:flex;justify-content:center;align-items:center;margin:0 0 1.5rem 0;background-color:#fdf5ec;height:5.5rem;width:5.5rem}#services-2287 .cs-icon{height:auto;width:2.5rem}#services-2287 .cs-h3{margin:0 0 0.75rem 0;font-size:clamp(1.25rem,2.5vw,1.5625rem);line-height:1.2em;font-weight:bold;color:var(--headerColor);text-align:inherit}#services-2287 .cs-item-text{margin:0;max-width:28.125rem;padding:0;line-height:1.5em;color:var(--bodyTextColor)}#services-2287 .cs-floater{position:absolute;bottom:0;height:auto;width:clamp(7.1875rem,14vw,16.5rem);-o-object-fit:contain;object-fit:contain}#services-2287 .cs-floater-left{left:calc(clamp(7.1875rem,14vw,16.5rem)*-0.7)}#services-2287 .cs-floater-right{right:calc(clamp(7.1875rem,14vw,16.5rem)*-0.7)}body.dark-mode #services-2287{background-color:rgba(0,0,0,0.2)}body.dark-mode #services-2287 .cs-h3,body.dark-mode #services-2287 .cs-item-text{color:var(--bodyTextColorWhite)}body.dark-mode #services-2287 .cs-item-text{opacity:0.8}body.dark-mode #services-2287 .cs-item:hover{background-color:var(--medium)}body.dark-mode #services-2287 .cs-icon-wrapper{background-color:var(--medium)}}@media only screen and (min-width:48rem){#services-2287 .cs-card-group{gap:0}#services-2287 .cs-item{position:relative;display:flex;justify-content:center;align-items:center;border-right:1px solid #e7e7e8;padding-top:0;grid-column:span 4}#services-2287 .cs-item:hover{background-color:#fdf5ec;padding:clamp(2rem,6vw,3.75rem) clamp(1rem,5vw,3rem)}#services-2287 .cs-item:hover .cs-link{transform:translateY(0)}#services-2287 .cs-item:hover .cs-item-text{visibility:visible;opacity:1;height:auto}#services-2287 .cs-item:hover .cs-icon-wrapper{transform:scale(0);display:none}#services-2287 .cs-item:nth-of-type(5),#services-2287 .cs-item:nth-of-type(8){z-index:100;position:relative}#services-2287 .cs-item:nth-of-type(5)::before,#services-2287 .cs-item:nth-of-type(8)::before{z-index:99;position:absolute;top:-0.41666667rem;left:-0.41666667rem;content:"";background-color:var(--secondary);height:0.75rem;width:0.75rem}#services-2287 .cs-item:nth-of-type(5)::after,#services-2287 .cs-item:nth-of-type(8)::after{z-index:99;position:absolute;top:-0.41666667rem;right:-0.41666667rem;content:"";background-color:var(--secondary);height:0.75rem;width:0.75rem}#services-2287 .cs-item:nth-of-type(4),#services-2287 .cs-item:nth-of-type(5),#services-2287 .cs-item:nth-of-type(6){border-bottom:none}#services-2287 .cs-item:nth-of-type(3),#services-2287 .cs-item:nth-of-type(6){border-right:none}#services-2287 .cs-item:nth-of-type(7),#services-2287 .cs-item:nth-of-type(8),#services-2287 .cs-item:nth-of-type(9){border-top:1px solid #e7e7e8;border-bottom:0}#services-2287 .cs-item:nth-of-type(9){border-right:none}#services-2287 .cs-link{transform:translateY(6rem);transition:transform 0.3s}#services-2287 .cs-icon-wrapper{max-height:6.25rem;overflow:hidden;transition:transform 0.3s}#services-2287 .cs-item-text{visibility:hidden;opacity:0;height:6rem;transition:opacity 0.3s,visibility 0.3s}}@media only screen and (min-width:106.25rem){#services-2287 .cs-floater-right{right:50%;margin-right:-63.75rem}#services-2287 .cs-floater-left{left:50%;margin-left:-63.75rem}}

/* why-choose */
@media only screen and (min-width:0rem){#why-choose{position:relative;padding:var(--sectionPadding)}#why-choose .cs-container{display:flex;flex-direction:column;align-items:center;margin:auto;max-width:44rem;width:100%;gap:3rem}#why-choose .cs-content{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:clamp(3rem,6vw,4rem);width:100%;text-align:left}#why-choose .cs-title{margin:0}#why-choose .cs-content-picture{display:block;height:20.5rem;width:100%}#why-choose .cs-content-picture img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}#why-choose .cs-ul{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;margin:2rem 0;max-width:39.375rem;width:100%;padding:0}#why-choose .cs-li{display:flex;justify-content:flex-start;align-items:flex-start;border-bottom:1px solid #e7e7e8;margin:0 0 1.5rem;padding:0 0 1.5rem;list-style:none;gap:1.25rem}#why-choose .cs-li:last-of-type{border:none;margin:0;padding:0}#why-choose .cs-icon{display:block;height:auto;width:3rem}#why-choose .cs-h3{margin:0 0 0.5rem 0;font-size:1.25rem;line-height:1.2em;font-weight:700;color:var(--headerColor);text-align:left}#why-choose .cs-li-text{margin:0;font-size:1rem;line-height:1.5em;color:var(--bodyTextColor);text-align:left}#why-choose .cs-picture{display:block;height:22.5rem;width:100%}#why-choose .cs-picture img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}body.dark-mode #why-choose .cs-title,body.dark-mode #why-choose .cs-item-p,body.dark-mode #why-choose .cs-h3,body.dark-mode #why-choose .cs-li-text{color:var(--bodyTextColorWhite)}body.dark-mode #why-choose .cs-text,body.dark-mode #why-choose .cs-item-p,body.dark-mode #why-choose .cs-li-text{opacity:0.8}body.dark-mode #why-choose .cs-faq-item{background-color:var(--medium)}body.dark-mode #why-choose .cs-faq-item:hover::after,body.dark-mode #why-choose .cs-faq-item.active::after{opacity:0.6}body.dark-mode #why-choose .cs-faq-item.active .cs-button{background-color:var(--medium);color:var(--bodyTextColorWhite)}body.dark-mode #why-choose .cs-faq-item.active .cs-button:before,body.dark-mode #why-choose .cs-faq-item.active .cs-button:after{background-color:var(--bodyTextColorWhite)}body.dark-mode #why-choose .cs-button{background-color:var(--medium);color:var(--bodyTextColorWhite);border-color:var(--accent)}body.dark-mode #why-choose .cs-button:before,body.dark-mode #why-choose .cs-button:after{opacity:0.8;background-color:var(--bodyTextColorWhite)}}@media only screen and (min-width:48rem){#why-choose .cs-content-group{display:grid;grid-template-columns:auto auto;padding-right:1.25rem;-moz-column-gap:clamp(2rem,3vw,3rem);column-gap:clamp(2rem,3vw,3rem)}#why-choose .cs-content{grid-column:span 2}#why-choose .cs-content-picture{height:100%;width:clamp(17.75rem,34vw,28.625rem);grid-column:span 1}#why-choose .cs-ul{margin-top:0}}@media only screen and (min-width:64rem){#why-choose .cs-container{flex-direction:row;align-items:stretch;max-width:90rem}#why-choose .cs-picture{height:auto;width:clamp(13.8125rem,21vw,25.8125rem);flex:1 0 auto}}

/* sbs-2288 */
@media only screen and (min-width:0rem){#sbs-2288{z-index:1;position:relative;background-color:#fefaf6;overflow:hidden;padding:var(--sectionPadding)}#sbs-2288 .cs-container{display:flex;flex-direction:column;align-items:center;margin:auto;max-width:36.5rem;width:100%;gap:clamp(3rem,6vw,4rem)}#sbs-2288 .cs-ul-group{display:flex;flex-direction:column;align-items:center;max-width:52.9375rem;width:100%;gap:clamp(2rem,4vw,3rem)}#sbs-2288 .cs-ul{display:grid;grid-template-columns:repeat(12,1fr);margin:0;width:100%;padding:0;list-style:none;-moz-column-gap:0.75rem;column-gap:0.75rem;row-gap:0.5rem}#sbs-2288 .cs-li{position:relative;display:flex;justify-content:flex-start;align-items:flex-start;background-color:#fdf5ec;padding:clamp(1rem,2vw,1.5rem);font-size:clamp(0.875rem,1.25vw,1rem);line-height:1.5em;color:var(--bodyTextColor);grid-column:span 12;gap:0.75rem;flex:1}#sbs-2288 .cs-li::before{content:"";transform:rotate(45deg);display:block;margin-top:0.375rem;background-color:var(--secondary);height:0.5rem;width:0.5rem;flex:none}#sbs-2288 .cs-content{display:flex;flex-direction:column;align-items:flex-start;max-width:36.625rem;width:100%;text-align:left}#sbs-2288 .cs-title{max-width:30ch}#sbs-2288 .cs-text{margin-bottom:2rem}#sbs-2288 .cs-images{z-index:1;position:relative;height:47.375em;width:41em;font-size:min(2.21vw,.88rem)}#sbs-2288 .cs-picture{position:absolute;display:block}#sbs-2288 .cs-picture img{position:absolute;top:0;left:0;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}#sbs-2288 .cs-picture1{top:0;left:0;height:25.375em;width:30.5em}#sbs-2288 .cs-picture2{bottom:0;right:0;border:12px solid #fff;height:30em;width:35.25em}body.dark-mode #sbs-2288{background-color:rgba(0,0,0,0.2)}body.dark-mode #sbs-2288 .cs-li{background-color:var(--medium);color:var(--bodyTextColorWhite)}body.dark-mode #sbs-2288 .cs-picture{border-color:var(--medium)}}@media only screen and (min-width:48rem){#sbs-2288 .cs-li{grid-column:span 4}#sbs-2288 .cs-images{height:27.625em;width:38.9375em;font-size:min(1.85vw,.94rem)}#sbs-2288 .cs-picture1{height:12.6875em;width:23.875em}#sbs-2288 .cs-picture2{height:18.9375em;width:26.0625em}}@media only screen and (min-width:64rem){#sbs-2288 .cs-container{flex-direction:row;align-items:stretch;max-width:80rem}#sbs-2288 .cs-content{max-width:23.125rem;width:36vw;padding-bottom:8.875rem}#sbs-2288 .cs-ul-group{width:100%}#sbs-2288 .cs-images{min-height:25.75rem;height:100%;width:100%;font-size:inherit}#sbs-2288 .cs-picture1{bottom:14.9375rem;height:auto;width:61.1316212%}#sbs-2288 .cs-picture2{top:7.5rem;height:auto;width:66.934189%}}@media only screen and (min-width:81.25rem){#sbs-2288 .cs-content{padding-right:3.25rem}#sbs-2288 .cs-picture1{bottom:3.75rem;width:32.625rem}#sbs-2288 .cs-picture2{top:3.75rem;width:24.4375rem}}

/* sbsr-2289 */
@media only screen and (min-width:0rem){#sbsr-2289{overflow:hidden;padding:var(--sectionPadding)}#sbsr-2289 .cs-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;margin:auto;max-width:36.5rem;width:100%;gap:3rem}#sbsr-2289 .cs-content{z-index:10;position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left}#sbsr-2289 .cs-text{margin-bottom:1rem}#sbsr-2289 .cs-text:last-of-type{margin-bottom:2rem}#sbsr-2289 .cs-features{border-left:0.25rem solid var(--secondary);margin:0 0 2rem;background-color:#f7faf6;width:100%;padding:clamp(1.5rem,4vw,2rem)}#sbsr-2289 .cs-h3{margin:0 0 0.75rem;font-size:1rem;line-height:1.5em;font-weight:700;color:var(--headerColor)}#sbsr-2289 .cs-ul{display:flex;flex-direction:column;margin:0;padding:0;font-size:0.75rem;gap:0.75rem}#sbsr-2289 .cs-li{position:relative;padding-left:clamp(1.25rem,3vw,1.5rem);list-style:none;font-size:1rem;line-height:1.5em;color:var(--bodyTextColor)}#sbsr-2289 .cs-li::before{position:absolute;top:0;left:0;content:"";transform:rotate(45deg);display:block;margin-top:0.5rem;background-color:var(--secondary);height:0.5rem;width:0.5rem}#sbsr-2289 .cs-image-group{order:-1;z-index:1;position:relative;display:block;max-height:39.125rem;height:126vw;width:100%}#sbsr-2289 .cs-picture{position:absolute;top:0;bottom:5.9375rem;left:0;display:block;width:100%}#sbsr-2289 .cs-picture img{position:absolute;top:0;left:0;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}#sbsr-2289 .cs-box{z-index:10;position:absolute;bottom:0;right:50%;transform:translate(50%);display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-start;background-color:#fefaf6;max-width:28.125rem;width:91%;box-sizing:border-box;padding:clamp(1.5rem,3vw,2rem);text-align:left;-moz-column-gap:1.5rem;column-gap:1.5rem;row-gap:0.5rem}#sbsr-2289 .cs-number{margin:0;text-transform:uppercase;font-size:clamp(1.9375rem,4vw,3.0625rem);line-height:1.2em;font-weight:700;color:var(--secondary)}#sbsr-2289 .cs-heading{margin:0 0 0.5rem;font-size:1.25rem;line-height:1.2em;font-weight:700;color:var(--headerColor)}#sbsr-2289 .cs-desc{font-size:1rem;line-height:1.5em;color:var(--bodyTextColor)}#sbsr-2289 .cs-graphic{z-index:-1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:auto;width:150%}body.dark-mode #sbsr-2289 .cs-features,body.dark-mode #sbsr-2289 .cs-box{background-color:var(--medium)}body.dark-mode #sbsr-2289 .cs-li,body.dark-mode #sbsr-2289 .cs-h3,body.dark-mode #sbsr-2289 .cs-heading,body.dark-mode #sbsr-2289 .cs-desc{color:var(--bodyTextColorWhite)}}@media only screen and (min-width:48rem){#sbsr-2289 .cs-box{flex-direction:row;align-items:center}}@media only screen and (min-width:64rem){#sbsr-2289 .cs-container{flex-direction:row;align-items:stretch;max-width:80rem;gap:1.25rem}#sbsr-2289 .cs-content{padding-right:3.25rem;padding-bottom:6.75rem}#sbsr-2289 .cs-image-group{order:initial;max-height:100%;min-height:40.125rem;height:auto}#sbsr-2289 .cs-picture{bottom:4rem}}

/* gallery */
@media only screen and (min-width:0rem){#gallery{z-index:1;position:relative;background-color:#f7faf6;overflow:hidden;padding:var(--sectionPadding)}#gallery .cs-container{z-index:1;position:relative;display:flex;flex-direction:column;align-items:flex-start;margin:auto;max-width:80rem;width:100%}#gallery .cs-content{display:contents;width:100%}#gallery .cs-title{margin:0 0 3rem}#gallery .cs-button-group{order:2;display:flex;margin:2rem auto 0;-moz-column-gap:clamp(1.25rem,3.4vw,2.5rem);column-gap:clamp(1.25rem,3.4vw,2.5rem);row-gap:1rem}#gallery .cs-button{border:none;background-color:#f3f3f3;padding:1rem;transition:background-color 0.3s}#gallery .cs-button:hover{background-color:var(--primary);cursor:pointer}#gallery .cs-button:hover .cs-arrow{filter:invert(1) brightness(1000%)}#gallery .cs-arrow{display:block;height:1.25rem;width:1.25rem}#gallery .cs-gallery-wrapper{z-index:1;position:relative;width:100%}#gallery .cs-gallery{position:relative;transform-style:preserve-3d;perspective:700px;display:grid;grid-template-columns:repeat(12,1fr);margin:0;width:100%;padding:0;transition:transform 0.7s,opacity 0.3s,visibility 0.5s,top 0.3s,left 0.3s;gap:clamp(1rem,1.5vw,1.25rem);transform-origin:left top}#gallery .cs-gallery.cs-hidden{position:absolute;top:0;left:0;visibility:hidden;opacity:0;transform:scaleY(0) scaleX(0);pointer-events:none}#gallery .cs-gallery.cs-hidden .cs-image{opacity:0;transform:translateY(2.1875rem) rotateX(90deg)}#gallery .cs-image{position:relative;opacity:1;transform:translateY(0rem) rotateX(0);display:block;min-height:clamp(20rem,35vw,32.75rem);overflow:hidden;transition:opacity 0.6s,transform 0.6s;grid-column:span 12}#gallery .cs-image:nth-of-type(1){transition-delay:0.1s}#gallery .cs-image:nth-of-type(2){transition-delay:0.2s}#gallery .cs-image:nth-of-type(3){transition-delay:0.3s}#gallery .cs-picture{position:absolute;top:0;left:0;background-color:#000;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}#gallery .cs-picture img{position:absolute;top:0;left:0;height:100%;width:100%;-o-object-fit:cover;object-fit:cover;transition:transform 0.65s,opacity 0.3s}#gallery .cs-info{z-index:10;position:absolute;bottom:0;left:0;display:flex;flex-direction:column;align-items:flex-start;width:90%;gap:0.5rem}#gallery .cs-tag{background-color:var(--secondary);padding:0.5rem 1.25rem;text-transform:uppercase;font-size:clamp(0.8125rem,2vw,1rem);font-weight:700;color:var(--headerColor)}#gallery .cs-project{background-color:#fff;padding:0.75rem 1rem;text-transform:uppercase;font-size:1.25rem;font-weight:700;color:var(--headerColor)}#gallery .cs-stats{display:grid;grid-template-columns:repeat(2,1fr);margin:clamp(3rem,9vw,7.5rem) auto 0;max-width:80rem;-moz-column-gap:clamp(1rem,3vw,1.5rem);column-gap:clamp(1rem,3vw,1.5rem);row-gap:2rem}#gallery .cs-stat{display:flex;flex-direction:column;font-family:var(--headerFont);-moz-column-gap:1.25rem;column-gap:1.25rem;row-gap:0.5rem}#gallery .cs-number{font-size:var(--headerFontSize);line-height:1.2em;font-weight:700;color:var(--primary)}#gallery .cs-desc{font-size:1.25rem;line-height:1.2em;font-weight:700;color:var(--headerColor)}body.dark-mode #gallery{background-color:rgba(0,0,0,0.2)}body.dark-mode #gallery .cs-title,body.dark-mode #gallery .cs-button,body.dark-mode #gallery .cs-desc{color:var(--bodyTextColorWhite)}body.dark-mode #gallery .cs-button-group{border-color:rgba(255,255,255,0.2)}body.dark-mode #gallery .cs-button{background-color:var(--medium)}body.dark-mode #gallery .cs-button:hover{background-color:var(--primary)}body.dark-mode #gallery .cs-arrow{filter:invert(1) brightness(1000%)}}@media only screen and (min-width:48rem){#gallery .cs-container{gap:clamp(3rem,6vw,4rem)}#gallery .cs-content{display:flex;flex-direction:row;justify-content:space-between;text-align:left;gap:1.5rem}#gallery .cs-title{margin:0}#gallery .cs-button-group{margin:0}#gallery .cs-image{grid-column:span 4}#gallery .cs-stats{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:64rem){#gallery .cs-content{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:4rem}#gallery .cs-image:hover .cs-tag,#gallery .cs-image:hover .cs-project{opacity:1;transform:translateX(0)}#gallery .cs-image:hover .cs-picture img{opacity:0.2;transform:scale(1.3)}#gallery .cs-tag{opacity:0;transform:translateX(-100%);transition:transform 0.3s ease-in-out,opacity 0.3s}#gallery .cs-project{opacity:0;transform:translateX(-100%);transition:transform 0.4s ease-out,opacity 0.3s;transition-delay:0.1s}}@media only screen and (min-width:81.25rem){#gallery .cs-stat{flex-direction:row;align-items:center}}

/* reviews-2290 */
@media only screen and (min-width:0rem){#reviews-2290{z-index:1;position:relative;overflow:hidden;padding:var(--sectionPadding);text-align:center}#reviews-2290 .cs-container{display:flex;flex-direction:column;align-items:center;margin:auto;max-width:51.5rem;width:100%;gap:clamp(3rem,6vw,4rem)}#reviews-2290 .cs-content{display:flex;flex-direction:column;align-items:center;width:100%;text-align:center}#reviews-2290 .cs-title{margin:0}#reviews-2290 .cs-card-group{display:grid;grid-template-columns:repeat(12,1fr);margin:0;width:100%;padding:0;gap:clamp(0.5rem,2vw,1.25rem)}#reviews-2290 .cs-item{z-index:1;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background-color:#f7faf6;box-sizing:border-box;padding:clamp(1rem,2vw,2rem);list-style:none;transition:transform 0.3s;text-align:left;grid-column:span 12;gap:clamp(1rem,3vw,1.5rem)}#reviews-2290 .cs-item::before{z-index:-1;position:absolute;top:0;left:0;content:"";opacity:0.05;display:block;background:var(--secondary);height:100%;width:100%;pointer-events:none}#reviews-2290 .cs-item::after{z-index:1;position:absolute;bottom:0;left:0;content:"";background:var(--primary);height:0.25rem;width:0;transition:width 0.3s}#reviews-2290 .cs-item:hover{transform:translateY(-0.5rem)}#reviews-2290 .cs-item:hover::after{width:100%}#reviews-2290 .cs-quote{display:block;height:auto;width:2.5rem}#reviews-2290 .cs-header{border-bottom:1px solid #e7e7e8;margin:0;padding-bottom:clamp(1rem,3vw,1.5rem);font-size:1.25rem;line-height:1.2em;font-weight:700;color:var(--headerColor)}#reviews-2290 .cs-item-text{margin:0;font-size:1rem;line-height:1.5em;color:var(--bodyTextColor)}#reviews-2290 .cs-flex-group{display:flex;justify-content:flex-start;align-items:center;margin-top:auto;gap:clamp(0.8rem,1.5vw,1rem)}#reviews-2290 .cs-profile{position:relative;display:block;margin:0;height:3.75rem;width:3.75rem;box-sizing:border-box}#reviews-2290 .cs-profile img{position:absolute;top:0;left:0;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}#reviews-2290 .cs-name{display:block;margin:0;font-size:1rem;line-height:1.5em;font-weight:700;color:var(--headerColor)}#reviews-2290 .cs-job{display:block;margin:0;font-size:1rem;line-height:1.5em;font-weight:400;color:var(--bodyTextColor)}body.dark-mode #reviews-2290 .cs-header,body.dark-mode #reviews-2290 .cs-item-text,body.dark-mode #reviews-2290 .cs-name,body.dark-mode #reviews-2290 .cs-job{color:var(--bodyTextColorWhite)}body.dark-mode #reviews-2290 .cs-item-text,body.dark-mode #reviews-2290 .cs-job{opacity:0.8}body.dark-mode #reviews-2290 .cs-item{background-color:var(--medium)}}@media only screen and (min-width:48rem){#reviews-2290 .cs-item{grid-column:span 6}}@media only screen and (min-width:81.25rem){#reviews-2290 .cs-container{max-width:80rem}}

/* faq-2294 */
@media only screen and (min-width:0rem){#faq-2294{position:relative;background-color:#fefaf6;padding:var(--sectionPadding)}#faq-2294 .cs-container{display:flex;flex-direction:column;align-items:center;margin:auto;max-width:67.5rem;width:100%;gap:clamp(2rem,4vw,4rem)}#faq-2294 .cs-content{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:clamp(3rem,6vw,4rem);width:100%;text-align:left}#faq-2294 .cs-title{margin:0}#faq-2294 .cs-faq-picture{display:block;height:clamp(22.5rem,54vw,25rem);width:100%}#faq-2294 .cs-faq-picture img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}#faq-2294 .cs-faq{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:2rem 0 0;width:100%;padding:0;gap:0.75rem}#faq-2294 .cs-faq-item{position:relative;background-color:#f7f7f7;width:100%;overflow:hidden;list-style:none;transition:border 0.3s}#faq-2294 .cs-faq-item::after{position:absolute;bottom:0;left:0;content:"";background-color:var(--secondary);height:0.25rem;width:0;transition:width 0.3s ease}#faq-2294 .cs-faq-item:hover::after{width:100%}#faq-2294 .cs-faq-item.active{background-color:#fdf5ec}#faq-2294 .cs-faq-item.active .cs-button{border:none;background-color:#fdf5ec}#faq-2294 .cs-faq-item.active .cs-button::before,#faq-2294 .cs-faq-item.active .cs-button::after{transform:rotate(0deg)}#faq-2294 .cs-faq-item.active .cs-item-p{opacity:1;height:auto;padding:0 2.5rem 1.25rem 1.25rem}#faq-2294 .cs-faq-item.active::after{width:100%}#faq-2294 .cs-button{position:relative;display:block;border:1px solid #f3f3f3;background-color:#fff;width:100%;padding:clamp(1.25rem,2vw,1.5rem);font-size:1rem;line-height:1.2em;font-weight:700;color:var(--headerColor);transition:background-color 0.3s,color 0.3s;text-align:left}#faq-2294 .cs-button:hover{cursor:pointer}#faq-2294 .cs-button:before{position:absolute;top:50%;right:1.3125rem;content:"";opacity:1;transform:rotate(270deg);display:block;border-radius:0.125rem;background-color:#a0a1a3;height:0.125rem;width:0.75rem;transition:transform 0.3s;transform-origin:center center}#faq-2294 .cs-button:after{position:absolute;top:50%;right:1.3125rem;content:"";opacity:1;transform:rotate(180deg);display:block;border-radius:0.125rem;background-color:#a0a1a3;height:0.125rem;width:0.75rem;transition:transform 0.3s;transform-origin:center center}#faq-2294 .cs-button-text{display:block;width:80%;font-family:var(--headerFont)}#faq-2294 .cs-item-p{opacity:0;margin:0;height:0;overflow:hidden;padding:0;font-family:var(--bodyFont);font-size:1rem;line-height:1.5em;color:var(--bodyTextColor);transition:opacity 0.3s,padding-bottom 0.3s}#faq-2294 .cs-picture-group{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;width:100%;padding:1rem;padding-top:6.25rem}#faq-2294 .cs-picture-group::before{z-index:1;position:absolute;top:0;left:0;content:"";background:linear-gradient(180deg,rgba(20,22,21,0) 22.78%,#141615 69.37%),50%/cover no-repeat;height:100%;width:100%}#faq-2294 .cs-picture{z-index:0;position:absolute;top:0;left:0;display:block;height:100%;width:100%}#faq-2294 .cs-picture img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}#faq-2294 .cs-h3{z-index:2;position:relative;margin:0 0 0.5rem;font-size:1.5625rem;line-height:1.2em;font-weight:700;color:var(--bodyTextColorWhite)}#faq-2294 .cs-text{z-index:2;position:relative;margin-bottom:2rem;color:var(--bodyTextColorWhite)}body.dark-mode #faq-2294{background-color:rgba(0,0,0,0.2)}body.dark-mode #faq-2294 .cs-button{background-color:var(--medium);color:var(--bodyTextColorWhite);border-color:var(--accent)}body.dark-mode #faq-2294 .cs-faq-item.active{background-color:var(--medium)}body.dark-mode #faq-2294 .cs-faq-item.active .cs-button{background-color:var(--medium)}body.dark-mode #faq-2294 .cs-item-p{color:var(--bodyTextColorWhite)}}@media only screen and (min-width:48rem){#faq-2294 .cs-faq-group{display:grid;grid-template-columns:auto auto;-moz-column-gap:clamp(2rem,5vw,3rem);column-gap:clamp(2rem,5vw,3rem)}#faq-2294 .cs-content{grid-column:span 2}#faq-2294 .cs-faq-picture{height:100%;grid-column:span 1}#faq-2294 .cs-faq{margin:0;grid-column:span 1}#faq-2294 .cs-picture-group{min-height:26rem;padding:2.5rem}}@media only screen and (min-width:81.25rem){#faq-2294 .cs-container{flex-direction:row;align-items:flex-start;max-width:90rem}#faq-2294 .cs-faq{justify-content:flex-start}#faq-2294 .cs-faq-picture{height:27.5rem}#faq-2294 .cs-picture-group{min-height:36.625rem;width:25.8125rem;flex:1 0 auto}}

/* cta-2298 — moved to root.css: this section appears on every page, but
   local.css only loads on the English homepage. Do not re-add rules here. */


/* cs-footer-2298 */
@media only screen and (min-width:0rem){#cs-footer-2298{background-color:#141615;overflow:hidden;padding:var(--sectionPadding);padding-bottom:2.5rem}#cs-footer-2298 .cs-container{margin:auto;max-width:80rem;width:100%}#cs-footer-2298 .cs-top{display:flex;flex-direction:column;align-items:flex-start;gap:2rem}#cs-footer-2298 .cs-logo-group{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}#cs-footer-2298 .cs-logo{height:auto;max-width:16.25rem;width:70%}#cs-footer-2298 .cs-text{opacity:0.8;color:#e7e7e8}#cs-footer-2298 .cs-ul-group{order:3;display:flex;flex-flow:wrap row;gap:2rem}#cs-footer-2298 .cs-ul{display:flex;flex-direction:column;margin:0;padding:0;row-gap:0.5rem}#cs-footer-2298 .cs-li{margin:0;list-style:none;font-size:1rem;line-height:1.5em}#cs-footer-2298 .cs-header{display:block;margin:0 0 1rem;font-size:1.25rem;line-height:1.2em;font-weight:700;color:var(--bodyTextColorWhite);grid-column:span 2}#cs-footer-2298 .cs-header .cs-link{opacity:1}#cs-footer-2298 .cs-link,#cs-footer-2298 .cs-copyright{opacity:0.8;text-decoration:none;color:#e7e7e8;transition:color 0.3s}#cs-footer-2298 .cs-link:hover{color:var(--primaryLight)}#cs-footer-2298 .cs-bottom{z-index:1;position:relative;display:flex;flex-direction:column;align-items:center;margin-top:2rem;padding-top:1.5rem;gap:0.5rem}#cs-footer-2298 .cs-bottom:before{position:absolute;top:0;left:0;content:"";opacity:1;display:block;background:#2d2f2e;height:1px;width:100%}#cs-footer-2298 .cs-flex{display:flex;justify-content:center;align-items:center;gap:1.25rem}#cs-footer-2298 .cs-divider{opacity:0.8;display:block;background-color:var(--bodyTextColorWhite);height:0.8125rem;width:1px}}@media only screen and (min-width:600px){#cs-footer-2298 .cs-top{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}#cs-footer-2298 .cs-logo-group{order:1;grid-column:span 8}#cs-footer-2298 .cs-ul-group{grid-column:span 8}#cs-footer-2298 .cs-ul{order:3;position:relative;margin-right:auto;padding-top:2rem}#cs-footer-2298 .cs-li{max-width:11.1875rem}#cs-footer-2298 .cs-subscribe-group{order:2;justify-content:center;grid-column:span 6}#cs-footer-2298 .cs-bottom{flex-direction:row;justify-content:space-between}}@media only screen and (min-width:64rem){#cs-footer-2298 .cs-bottom{margin-top:4rem}}@media only screen and (min-width:75rem){#cs-footer-2298{padding-top:5rem}#cs-footer-2298 .cs-top{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:2rem}#cs-footer-2298 .cs-logo-group{max-width:27.0625rem;width:30%;padding-right:2rem;flex:none}#cs-footer-2298 .cs-ul-group{order:2;justify-content:flex-end;width:100%;gap:3.75rem}#cs-footer-2298 .cs-ul{margin:0}}
/* ===== contact.css ===== */
/* banner-2285-2 */
@media only screen and (min-width:0rem){:is(#banner-2285, #banner-2285-2, #banner-2285-3, #banner-2285-4){z-index:1;position:relative;background-color:black;overflow:hidden;padding:var(--sectionPadding);padding-top:clamp(11.875rem,25vw,17.5rem);padding-bottom:0rem}:is(#banner-2285, #banner-2285-2, #banner-2285-3, #banner-2285-4) .cs-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;margin:auto;max-width:80rem;width:100%;text-align:center}:is(#banner-2285, #banner-2285-2, #banner-2285-3, #banner-2285-4) .cs-int-title{position:relative;margin:0 0 1rem;text-transform:uppercase;font-family:var(--headerFont);font-size:clamp(2.4375rem,6.4vw,3.8125rem);line-height:1.2em;font-weight:700;color:var(--bodyTextColorWhite);text-align:inherit}:is(#banner-2285, #banner-2285-2, #banner-2285-3, #banner-2285-4) .cs-text{margin-bottom:clamp(3.75rem,7vw,7.5rem);max-width:43.75rem;color:var(--bodyTextColorWhite);text-align:left}:is(#banner-2285, #banner-2285-2, #banner-2285-3, #banner-2285-4) .cs-breadcrumbs{z-index:1;position:relative;display:flex;justify-content:center;align-items:center;padding:clamp(1rem,3vw,1.5rem)0}:is(#banner-2285, #banner-2285-2, #banner-2285-3, #banner-2285-4) .cs-breadcrumbs:before{z-index:-1;position:absolute;top:0;left:50%;content:"";opacity:0.12;transform:translateX(-50%);display:block;background-color:#fff;height:100%;width:200vw}:is(#banner-2285, #banner-2285-2, #banner-2285-3, #banner-2285-4) .cs-breadcrumbs:after{z-index:-1;position:absolute;top:0;left:50%;content:"";transform:translateX(-50%);display:block;height:100%;width:200vw;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}:is(#banner-2285, #banner-2285-2, #banner-2285-3, #banner-2285-4) .cs-link{position:relative;display:flex;justify-content:center;align-items:center;text-decoration:none;text-transform:uppercase;font-size:1rem;line-height:1.2em;color:var(--bodyTextColorWhite)}:is(#banner-2285, #banner-2285-2, #banner-2285-3, #banner-2285-4) .cs-link:last-of-type{}:is(#banner-2285, #banner-2285-2, #banner-2285-3, #banner-2285-4) .cs-link:last-of-type::after{display:none}:is(#banner-2285, #banner-2285-2, #banner-2285-3, #banner-2285-4) .cs-link:after{position:relative;content:"";display:block;margin:0 1rem;background-color:#88898b;height:1.5rem;width:0.0625rem}:is(#banner-2285, #banner-2285-2, #banner-2285-3, #banner-2285-4) .cs-link.cs-active{color:var(--primaryLight)}:is(#banner-2285, #banner-2285-2, #banner-2285-3, #banner-2285-4) .cs-background{z-index:-1;position:absolute;top:0;left:0;display:block;height:100%;width:100%}:is(#banner-2285, #banner-2285-2, #banner-2285-3, #banner-2285-4) .cs-background img{z-index:-1;position:absolute;top:0;left:0;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}:is(#banner-2285, #banner-2285-2, #banner-2285-3, #banner-2285-4) .cs-background:before{z-index:1;position:absolute;top:0;left:0;content:"";opacity:0.72;display:block;background:#000;height:100%;width:100%}}

/* contact-1392 — homepage contact block. Replaced contact-2320 on 2026-07-30
   (ported from the Stitch 1392 bundle, re-pitched onto this site's tokens).

   Only the two homepages set `preloadCSS: "/css/contact.css"`, and this section
   only exists on those two pages — so everything here, including the footer
   compensation at the bottom, is already page-scoped by the stylesheet itself
   and needs no :has() body guard.

   The old section's map has deliberately NOT been carried over: it was still
   the Clarkes export's map of Andover, Hampshire while its alt text claimed
   Arlington, Texas. */

@media only screen and (min-width: 0rem) {
  #contact-1392 {
    /* Breathing room under the Hours block before the footer seam. */
    --ww-pad-bottom: clamp(2rem, 4vw, 3.5rem);
    /* How far the card drops past the section's content box. What actually
       lands ON the footer is this minus --ww-pad-bottom, so the two are read
       together — raising the padding alone eats into the overlap. The old
       mobile floor (1.875rem) was SMALLER than --ww-pad-bottom's 2rem, so the
       card cleared the seam by -2px and the overhang read as a plain stack.
       The floor now has to stay comfortably above --ww-pad-bottom's own floor
       or mobile silently loses the effect again. Overhang works out to ~4rem
       on phones and ~6.5rem at full width. */
    --ww-card-drop: clamp(6rem, 10vw, 10rem);

    z-index: 10;
    position: relative;
    padding: var(--sectionPadding);
    padding-bottom: var(--ww-pad-bottom);
    /* No background on purpose. #financing directly above (the Acorn panel plus
       the carried-brands strip) sets none either, so both sections sit on the
       page canvas and the seam between them disappears. Setting any colour here
       — the old --lightGrey, or #faq-2294's #fefaf6 — bands against it, because
       the FAQ is two sections up, not one. The form still reads as a card off
       its own border and shadow. */
  }

  #contact-1392 .cs-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: clamp(2rem, 3vw, 3rem);
    width: 100%;
    max-width: 36.5rem;
    margin: auto;
  }

  #contact-1392 .cs-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    text-align: left;
  }

  #contact-1392 .cs-title { max-width: 23ch; }
  #contact-1392 .cs-text { margin-bottom: 2rem; }

  /* ---- contact list ---------------------------------------------------- */

  #contact-1392 .cs-ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: left;
  }

  #contact-1392 .cs-li {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.25rem;
    list-style: none;
  }

  #contact-1392 .cs-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    width: 3.75rem;
    height: 3.75rem;
    margin: 0;
    border: 1px solid #bababa;
    border-radius: 50%;
    transition: transform .3s, background-color .3s, border-color .3s, box-shadow .3s;
  }

  /* The <img> is a transparent 1x1 data URI used purely as a paint surface: the
     real glyph arrives as a mask-image (inline, per icon) and background-color
     shows through it. --pb-icon-tint is defined in root.css's dark-mode block,
     which is what re-tints every masked icon on the site at once. */
  #contact-1392 .cs-icon {
    display: block;
    width: 1.5rem;
    height: auto;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--pb-icon-tint, var(--primary));
  }

  #contact-1392 .cs-flex-group { min-width: 0; }

  #contact-1392 .cs-header {
    display: block;
    margin-bottom: .5rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--headerColor);
  }

  #contact-1392 .cs-link {
    display: block;
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    color: var(--bodyTextColor);
  }

  /* Scoped to a.cs-link on purpose — Working Hours is a static span wearing the
     same class, and it must not pick up the hover affordance. */
  #contact-1392 a.cs-link:hover { color: var(--primary); text-decoration: underline; }

  #contact-1392 .cs-li:hover .cs-icon-wrapper {
    transform: scale(1.05);
    border-color: transparent;
    background-color: #fff;
    box-shadow: 0 .5rem 1.5rem rgba(149, 157, 165, .2);
  }

  /* ---- form ------------------------------------------------------------ */

  #contact-1392 .cs-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    width: 100%;
    max-width: 39.375rem;
    padding: clamp(1.5rem, 5.18vw, 3rem) clamp(1rem, 4vw, 3rem);
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    box-shadow: 0 .5rem 1.5rem rgba(17, 24, 39, .06);
    /* Hangs the card over the footer seam; the footer buys the room back at the
       bottom of this file. */
    margin-bottom: calc(var(--ww-card-drop) * -1);
  }

  #contact-1392 .cs-h3 {
    width: 100%;
    margin: 0 0 .25rem;
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.2em;
    color: var(--headerColor);
  }

  #contact-1392 .cs-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: .25rem;
    width: 100%;
  }

  #contact-1392 .cs-input {
    width: 100%;
    height: 3.5rem;
    padding: 0 1.5rem;
    box-sizing: border-box;
    font-size: 1rem;
    font-family: inherit;
    color: var(--headerColor);
    background-color: #f8f8f8;
    border: none;
    border-radius: .5rem;
  }

  #contact-1392 .cs-input::placeholder { color: #7d799c; opacity: .6; }
  #contact-1392 .cs-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

  #contact-1392 .cs-textarea {
    min-height: 7.5rem;
    padding-top: 1.5rem;
    margin-bottom: .75rem;
  }

  /* Native select chrome is replaced with an inline SVG chevron so the arrow can
     be recoloured for dark mode (a raster arrow cannot be). */
  #contact-1392 .cs-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 3.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23585b5d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 1.5rem) center;
    background-size: 1rem;
    cursor: pointer;
  }

  /* Turnstile and the submit button share one row, widget left and button
     right. They only fit side by side once the card is wide enough for
     Turnstile's fixed 300px plus the button — roughly a 1200px viewport, since
     the card is 46% of the container from 64rem. Below that the row simply
     wraps and the button drops underneath, which is the stack this had before.
     Nothing here forces it: flex-wrap does the deciding at every width. */
  #contact-1392 .cs-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    width: 100%;
  }

  /* The min-height reserves the widget's own 65px so the button doesn't jump
     when the iframe finishes loading — the rest of the card is render-blocking
     CSS precisely to avoid that. Turnstile renders at a fixed 300px, so the
     box is sized by its content rather than stretched. */
  #contact-1392 .cs-turnstile {
    flex: 0 0 auto;
    /* Turnstile's iframe is a fixed 300x65. Stating both here reserves the box
       before the iframe arrives, so the button neither drops down the card nor
       slides sideways when it does. max-width keeps the reservation from
       sticking out of a card narrower than the widget. */
    width: 300px;
    max-width: 100%;
    min-height: 65px;
  }

  #contact-1392 .cs-submit {
    justify-content: center;
    width: 100%;
    min-width: 12.5rem;
    border: none;

    /* Matches .cs-button-solid's line-height, which is what actually sets the
       button's height (no vertical padding, no border). Holding the same value
       here is what makes the collapsed state a true circle rather than an
       almost-circle. */
    --ww-submit-size: clamp(2.875rem, 5.5vw, 3.5rem);

    overflow: hidden;      /* clips the label as the box narrows */
    white-space: nowrap;   /* ...so it slides out instead of re-wrapping */
    /* .cs-button-solid already declares a transition; restate its colour pair
       here or this longhand would drop them. */
    transition:
      width .38s cubic-bezier(.4, 0, .2, 1),
      min-width .38s cubic-bezier(.4, 0, .2, 1),
      padding .38s cubic-bezier(.4, 0, .2, 1),
      border-radius .38s cubic-bezier(.4, 0, .2, 1),
      color .2s ease,
      background-color .3s;
  }
  #contact-1392 .cs-submit:hover { cursor: pointer; }
  #contact-1392 .cs-submit:disabled { opacity: .6; cursor: default; }

  /* ---- submit morph: pill -> spinner -> tick ----------------------------
     Driven by data-ww-morph, set by contact-form.js. Nothing here needs extra
     markup: ::before is already spoken for (it is the hover wipe in root.css),
     so ::after does double duty as the spinner ring and then the tick.

     "pinned" is a one-frame step that freezes the rendered width in
     --ww-submit-w before the collapse starts. Going straight from `width:100%`
     (mobile) or `width:auto` (desktop) to a length is not a reliable
     interpolation, so JS measures the box first and the transition runs
     length -> length. */
  #contact-1392 .cs-submit[data-ww-morph] {
    width: var(--ww-submit-w, 100%);
    opacity: 1;            /* outranks :disabled's .6 while morphing */
    pointer-events: none;
  }
  #contact-1392 .cs-submit[data-ww-morph]::before {
    width: 0;              /* park the hover wipe */
    transition: none;
  }

  #contact-1392 .cs-submit[data-ww-morph="loading"],
  #contact-1392 .cs-submit[data-ww-morph="success"] {
    width: var(--ww-submit-size);
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    color: transparent;    /* fades the label out; the text node stays for AT */
    /* Only correct while the button is width:100% — the box then shrinks about
       its own centre and the puck lands where the label already was. From 48rem
       the button is width:auto and this is overridden; see the note there. */
    margin-inline: auto;
    flex: 0 0 auto;
  }

  #contact-1392 .cs-submit[data-ww-morph="loading"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.25rem;
    height: 1.25rem;
    margin: -.625rem 0 0 -.625rem;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ww-submit-spin .7s linear infinite;
  }

  #contact-1392 .cs-submit[data-ww-morph="success"] {
    background-color: #1a8754;
    animation: ww-submit-pop .34s cubic-bezier(.2, .9, .3, 1.4);
  }
  /* Tick drawn as two borders on a rotated box, so it scales crisply and needs
     no SVG payload. */
  #contact-1392 .cs-submit[data-ww-morph="success"]::after {
    content: "";
    position: absolute;
    top: 47%;
    left: 50%;
    width: .4rem;
    height: .8rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform-origin: center;
    animation: ww-submit-tick .3s cubic-bezier(.2, .9, .3, 1.4) both;
  }

  /* Honeypot. Off-screen rather than display:none so bots still fill it in. */
  #contact-1392 .cs-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* States painted by contact-form.js after an async POST to /api/form. */
  #contact-1392 .cs-form-success {
    width: 100%;
    padding: clamp(1.5rem, 4vw, 2.5rem) 1rem;
    text-align: center;
  }
  #contact-1392 .cs-form-success h3 {
    margin: 0 0 .5rem;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2em;
    color: var(--primary);
  }
  #contact-1392 .cs-form-success p { margin: 0; line-height: 1.5em; color: var(--bodyTextColor); }
  #contact-1392 .cs-form-error {
    width: 100%;
    margin: .5rem 0 0;
    font-size: .875rem;
    line-height: 1.4em;
    text-align: center;
    color: #c0392b;
  }
}

/* ---- submit morph keyframes -------------------------------------------- */
/* Top level rather than inside the min-width:0rem block: @keyframes defined in
   a media query only exist while it matches, and these are referenced from
   every breakpoint. */

@keyframes ww-submit-spin {
  to { transform: rotate(360deg); }
}

@keyframes ww-submit-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* `both` fill on the ::after rule is what leaves the tick sitting at its final
   transform; there is deliberately no resting `transform` declaration for the
   animation to fight with. The reduced-motion block below has to hand-write
   that end state, since it turns the animation off. */
@keyframes ww-submit-tick {
  from { transform: translate(-50%, -55%) rotate(45deg) scale(.2); opacity: 0; }
  to   { transform: translate(-50%, -55%) rotate(45deg) scale(1);  opacity: 1; }
}

/* contact-form.js keeps the old text swap ("Sending…" / "Sent") for anyone on
   reduce, so the morph states never get set and there is nothing to animate
   here. This only catches a preference flipped mid-submit. */
@media (prefers-reduced-motion: reduce) {
  #contact-1392 .cs-submit { transition: none; }
  #contact-1392 .cs-submit[data-ww-morph="loading"]::after,
  #contact-1392 .cs-submit[data-ww-morph="success"],
  #contact-1392 .cs-submit[data-ww-morph="success"]::after {
    animation: none;
  }
  #contact-1392 .cs-submit[data-ww-morph="success"]::after {
    transform: translate(-50%, -55%) rotate(45deg);
    opacity: 1;
  }
}

/* ---- floating label ---------------------------------------------------- */
/* Pure CSS. Gated on :has() so browsers without it fall back to the plain
   stacked label the .cs-label flex column already produces — nothing breaks. */
@supports selector(:has(> input)) {
  #contact-1392 .cs-label:has(> .cs-label-text) { position: relative; }

  #contact-1392 .cs-label-text {
    position: absolute;
    left: 1.5rem;            /* matches .cs-input padding-left */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    padding: 0;
    border-radius: .25rem;
    background-color: transparent;
    font-size: 1rem;
    line-height: 1;
    color: #7d799c;
    opacity: .6;
    pointer-events: none;    /* clicks fall through to the input */
    transition: top 180ms ease, left 180ms ease, font-size 180ms ease,
                color 180ms ease, opacity 180ms ease, padding 180ms ease,
                background-color 180ms ease;
  }

  /* Textareas start top-aligned rather than vertically centred. */
  #contact-1392 .cs-label:has(> textarea) > .cs-label-text { top: 1.5rem; transform: none; }

  /* The overlay replaces the native placeholder, which would otherwise double up. */
  #contact-1392 .cs-label:has(> .cs-label-text) > .cs-input::placeholder { color: transparent; }

  /* Floated: focused, or holding content. A <select> always has a selected
     option, so :placeholder-shown can never describe it — its label is pinned
     floated and the disabled first option carries the prompt instead. */
  #contact-1392 .cs-label:has(> input:focus) > .cs-label-text,
  #contact-1392 .cs-label:has(> input:not(:placeholder-shown)) > .cs-label-text,
  #contact-1392 .cs-label:has(> textarea:focus) > .cs-label-text,
  #contact-1392 .cs-label:has(> textarea:not(:placeholder-shown)) > .cs-label-text,
  #contact-1392 .cs-label-select > .cs-label-text {
    top: 0;
    left: .75rem;
    transform: translateY(-50%);
    padding: 0 .375rem;
    background-color: #fff;  /* must match the FORM's background */
    font-size: .78rem;
    color: var(--primary);
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    #contact-1392 .cs-label-text { transition-duration: 0s !important; }
  }
}

/* ---- wider viewports --------------------------------------------------- */

@media only screen and (min-width: 48rem) {
  #contact-1392 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    max-width: 80rem;
  }
  #contact-1392 .cs-content { width: 47%; flex: none; }
  #contact-1392 .cs-half { width: 48%; }
  #contact-1392 .cs-submit { width: auto; }

  /* Cancel the morph's auto margins. The button is alone on its flex line, so
     .cs-form's space-between parks it at the left edge — but auto margins make
     a flex item eat the free space either side, and at width:auto there is
     free space from the first frame. The puck was jumping to the middle of the
     card and collapsing there. Zero margins keep the left edge planted and the
     box closes in on it. */
  #contact-1392 .cs-submit[data-ww-morph] { margin-inline: 0; }
}

@media only screen and (min-width: 64rem) {
  #contact-1392 .cs-form { width: 46%; max-width: 36.125rem; }
}

/* The width at which Turnstile and the button actually fit on one line.
   The sum is fixed and unforgiving: Turnstile renders at exactly 300px, the
   gap is 12, and the button measures 184 (the label sets uppercase, so it is
   wider than it reads in the markup) — 496px of content. At 46% of a container
   that stops growing at 80rem, the card offered 479px and the row wrapped no
   matter how wide the monitor got. 48% is what closes that gap, and it lands
   the card at 614px inside a 1280px container, leaving a 64px gutter beside
   the contact column instead of 90px.

   82rem, not 80: .cs-container hits its max-width once the viewport clears
   80rem + the 1rem section padding either side, so from 82rem every number
   above is constant and the fit is decided rather than nearly decided. Below
   it, .cs-actions just wraps and the button sits under the widget as before.

   The 12.5rem floor on .cs-submit is 46px of dead width in that sum. It lifts
   only here, where the button has company — alone on its own row it is still
   what gives the button its presence. */
@media only screen and (min-width: 82rem) {
  #contact-1392 .cs-form { width: 48%; max-width: 38.5rem; }
  #contact-1392 .cs-actions .cs-submit { min-width: 0; }
}

/* ---- dark mode --------------------------------------------------------- */
/* One step above the canvas so the block reads as a panel, matching the logo
   block and the old contact strip; the card sits one step above that again. */

/* No dark-mode background either, for the same reason as light: #financing
   above sets none, so this section stays on the canvas and the seam holds in
   both themes. The card keeps its panel reading from --medium below. */
body.dark-mode #contact-1392 .cs-header { color: var(--bodyTextColorWhite); }
/* .cs-h3 needs saying explicitly: the global `body.dark-mode h3` rule is only
   (0,1,1) and loses to this block's own id-scoped `#contact-1392 .cs-h3`, which
   left the form heading painted near-black on the dark card. */
body.dark-mode #contact-1392 .cs-h3 { color: var(--bodyTextColorWhite); }
body.dark-mode #contact-1392 .cs-link { color: var(--onDarkMuted); }
body.dark-mode #contact-1392 a.cs-link:hover { color: var(--onDarkAccent); }
body.dark-mode #contact-1392 .cs-icon-wrapper { border-color: var(--darkHairline); }
body.dark-mode #contact-1392 .cs-li:hover .cs-icon-wrapper {
  background-color: var(--raised);
  border-color: transparent;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .32);
}

body.dark-mode #contact-1392 .cs-form {
  background-color: var(--medium);
  border-color: var(--darkHairline);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .32);
}
body.dark-mode #contact-1392 .cs-input {
  background-color: var(--raised);
  color: var(--bodyTextColorWhite);
}
body.dark-mode #contact-1392 .cs-input::placeholder { color: rgba(231, 238, 246, .45); }
body.dark-mode #contact-1392 .cs-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9bfd4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* The global `body.dark-mode h3` rule would otherwise repaint the success
   heading white; --primary (#1463bc) is too dark to sit on the card anyway, so
   both success and error states move onto the on-dark pair. */
body.dark-mode #contact-1392 .cs-form-success h3 { color: var(--onDarkAccent); }
body.dark-mode #contact-1392 .cs-form-success p { color: var(--onDarkMuted); }
body.dark-mode #contact-1392 .cs-form-error { color: #ff9d92; }

@supports selector(:has(> input)) {
  body.dark-mode #contact-1392 .cs-label-text { color: var(--onDarkMuted); opacity: 1; }

  body.dark-mode #contact-1392 .cs-label:has(> input:focus) > .cs-label-text,
  body.dark-mode #contact-1392 .cs-label:has(> input:not(:placeholder-shown)) > .cs-label-text,
  body.dark-mode #contact-1392 .cs-label:has(> textarea:focus) > .cs-label-text,
  body.dark-mode #contact-1392 .cs-label:has(> textarea:not(:placeholder-shown)) > .cs-label-text,
  body.dark-mode #contact-1392 .cs-label-select > .cs-label-text {
    background-color: var(--medium);   /* must match the dark FORM background */
    color: var(--onDarkAccent);
  }
}

/* ---- footer compensation ----------------------------------------------- */
/* .cs-form hangs over the seam via its negative bottom margin, so the footer
   has to buy that room back or the card lands on its content. critical.css and
   local.css both set padding-top:5rem at one id of specificity — this wins on
   source order, because contact.css is linked after both. */
#cs-footer-2298 {
  position: relative;
  z-index: 1;
  padding-top: clamp(9rem, 13vw, 12rem);
}

/* The padding above has to stay as large as it is — it is what keeps the card
   off the footer's content — but it left the logo block sitting low with a lot
   of dead air over it. This lifts ONLY the logo group up into that dead air.
   The negative top margin is cancelled by an identical positive bottom margin,
   so the element's margin box is exactly the height it was: nothing after it
   shifts. That equality is the whole trick and the two values must stay in
   sync — they are one token so they cannot drift apart.

   Holds in all three .cs-top layouts: the mobile flex column (next item is
   pushed back down by the bottom margin), the 600px grid (the row keeps its
   height because the margin box is unchanged, so later rows stay put) and the
   75rem flex row (the line's cross size reads the same unchanged margin box).
   Above 75rem the logo sits in the left column while the card overhangs on the
   right, so the lift cannot collide with it there; below that it still leaves
   ~2rem of clearance under the card at every width. */
#cs-footer-2298 .cs-logo-group {
  --ww-logo-lift: clamp(3rem, 4vw, 3.5rem);
  margin-top: calc(var(--ww-logo-lift) * -1);
  margin-bottom: var(--ww-logo-lift);
}

/* #contact-1392's z-index is sealed inside #main and cannot lift the card over
   a footer that outranks #main itself — the card rendered fully but painted
   underneath. Raising #main is what actually settles the seam; the section's
   own z-index only orders it against its siblings inside main. 2 keeps it clear
   of the footer while staying far below #cs-navigation's 10000.

   (The stacking context that originally caused this came from a
   view-transition-name on #main. root.css no longer sets one, but this rule
   still does the layering work, so it stays.) */
#main {
  position: relative;
  z-index: 2;
}

/* faq-2294-2 */
@media only screen and (min-width:0rem){:is(#faq-2294, #faq-2294-2){position:relative;background-color:#fefaf6;padding:var(--sectionPadding)}:is(#faq-2294, #faq-2294-2) .cs-container{display:flex;flex-direction:column;align-items:center;margin:auto;max-width:67.5rem;width:100%;gap:clamp(2rem,4vw,4rem)}:is(#faq-2294, #faq-2294-2) .cs-content{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:clamp(3rem,6vw,4rem);width:100%;text-align:left}:is(#faq-2294, #faq-2294-2) .cs-title{margin:0}:is(#faq-2294, #faq-2294-2) .cs-faq-picture{display:block;height:clamp(22.5rem,54vw,25rem);width:100%}:is(#faq-2294, #faq-2294-2) .cs-faq-picture img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}:is(#faq-2294, #faq-2294-2) .cs-faq{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:2rem 0 0;width:100%;padding:0;gap:0.75rem}:is(#faq-2294, #faq-2294-2) .cs-faq-item{position:relative;background-color:#f7f7f7;width:100%;overflow:hidden;list-style:none;transition:border 0.3s}:is(#faq-2294, #faq-2294-2) .cs-faq-item::after{position:absolute;bottom:0;left:0;content:"";background-color:var(--secondary);height:0.25rem;width:0;transition:width 0.3s ease}:is(#faq-2294, #faq-2294-2) .cs-faq-item:hover::after{width:100%}:is(#faq-2294, #faq-2294-2) .cs-faq-item.active{background-color:#fdf5ec}:is(#faq-2294, #faq-2294-2) .cs-faq-item.active .cs-button{border:none;background-color:#fdf5ec}:is(#faq-2294, #faq-2294-2) .cs-faq-item.active .cs-button::before,:is(#faq-2294, #faq-2294-2) .cs-faq-item.active .cs-button::after{transform:rotate(0deg)}:is(#faq-2294, #faq-2294-2) .cs-faq-item.active .cs-item-p{opacity:1;height:auto;padding:0 2.5rem 1.25rem 1.25rem}:is(#faq-2294, #faq-2294-2) .cs-faq-item.active::after{width:100%}:is(#faq-2294, #faq-2294-2) .cs-button{position:relative;display:block;border:1px solid #f3f3f3;background-color:#fff;width:100%;padding:clamp(1.25rem,2vw,1.5rem);font-size:1rem;line-height:1.2em;font-weight:700;color:var(--headerColor);transition:background-color 0.3s,color 0.3s;text-align:left}:is(#faq-2294, #faq-2294-2) .cs-button:hover{cursor:pointer}:is(#faq-2294, #faq-2294-2) .cs-button:before{position:absolute;top:50%;right:1.3125rem;content:"";opacity:1;transform:rotate(270deg);display:block;border-radius:0.125rem;background-color:#a0a1a3;height:0.125rem;width:0.75rem;transition:transform 0.3s;transform-origin:center center}:is(#faq-2294, #faq-2294-2) .cs-button:after{position:absolute;top:50%;right:1.3125rem;content:"";opacity:1;transform:rotate(180deg);display:block;border-radius:0.125rem;background-color:#a0a1a3;height:0.125rem;width:0.75rem;transition:transform 0.3s;transform-origin:center center}:is(#faq-2294, #faq-2294-2) .cs-button-text{display:block;width:80%;font-family:var(--headerFont)}:is(#faq-2294, #faq-2294-2) .cs-item-p{opacity:0;margin:0;height:0;overflow:hidden;padding:0;font-family:var(--bodyFont);font-size:1rem;line-height:1.5em;color:var(--bodyTextColor);transition:opacity 0.3s,padding-bottom 0.3s}:is(#faq-2294, #faq-2294-2) .cs-picture-group{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;width:100%;padding:1rem;padding-top:6.25rem}:is(#faq-2294, #faq-2294-2) .cs-picture-group::before{z-index:1;position:absolute;top:0;left:0;content:"";background:linear-gradient(180deg,rgba(20,22,21,0) 22.78%,#141615 69.37%),50%/cover no-repeat;height:100%;width:100%}:is(#faq-2294, #faq-2294-2) .cs-picture{z-index:0;position:absolute;top:0;left:0;display:block;height:100%;width:100%}:is(#faq-2294, #faq-2294-2) .cs-picture img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}:is(#faq-2294, #faq-2294-2) .cs-h3{z-index:2;position:relative;margin:0 0 0.5rem;font-size:1.5625rem;line-height:1.2em;font-weight:700;color:var(--bodyTextColorWhite)}:is(#faq-2294, #faq-2294-2) .cs-text{z-index:2;position:relative;margin-bottom:2rem;color:var(--bodyTextColorWhite)}body.dark-mode :is(#faq-2294, #faq-2294-2){background-color:rgba(0,0,0,0.2)}body.dark-mode :is(#faq-2294, #faq-2294-2) .cs-button{background-color:var(--medium);color:var(--bodyTextColorWhite);border-color:var(--accent)}body.dark-mode :is(#faq-2294, #faq-2294-2) .cs-faq-item.active{background-color:var(--medium)}body.dark-mode :is(#faq-2294, #faq-2294-2) .cs-faq-item.active .cs-button{background-color:var(--medium)}body.dark-mode :is(#faq-2294, #faq-2294-2) .cs-item-p{color:var(--bodyTextColorWhite)}}@media only screen and (min-width:48rem){:is(#faq-2294, #faq-2294-2) .cs-faq-group{display:grid;grid-template-columns:auto auto;-moz-column-gap:clamp(2rem,5vw,3rem);column-gap:clamp(2rem,5vw,3rem)}:is(#faq-2294, #faq-2294-2) .cs-content{grid-column:span 2}:is(#faq-2294, #faq-2294-2) .cs-faq-picture{height:100%;grid-column:span 1}:is(#faq-2294, #faq-2294-2) .cs-faq{margin:0;grid-column:span 1}:is(#faq-2294, #faq-2294-2) .cs-picture-group{min-height:26rem;padding:2.5rem}}@media only screen and (min-width:81.25rem){:is(#faq-2294, #faq-2294-2) .cs-container{flex-direction:row;align-items:flex-start;max-width:90rem}:is(#faq-2294, #faq-2294-2) .cs-faq{justify-content:flex-start}:is(#faq-2294, #faq-2294-2) .cs-faq-picture{height:27.5rem}:is(#faq-2294, #faq-2294-2) .cs-picture-group{min-height:36.625rem;width:25.8125rem;flex:1 0 auto}}
/* ===== before-after.css ===== */
/* =============================================================
   Before / After job photos
   -------------------------------------------------------------
   Two presentations of the same real customer photos:

   .ww-ba            drag-to-reveal slider. Used for the pairs
                     that were shot from the same spot, where a
                     wipe actually lines up.
   .ww-ba--split     side-by-side pair. Used where the before and
                     after were shot from different angles, so a
                     wipe would just look like a mistake.

   The slider's interaction is a real <input type="range"> laid
   over the frame, so keyboard and screen readers work without any
   JS of our own. JS mirrors the value onto the --ww-ba-pos custom
   property and, once it has run, moves pointer dragging onto the
   frame (.ww-ba--drag below — see before-after.js for why). If it
   never runs, the frame sits at the 50% authored in the markup and
   both photos still read.
   ============================================================= */

.ww-ba {
  --ww-ba-pos: 50%;
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- frame ---------- */

.ww-ba-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--lightGrey, #f5f5f5);
  isolation: isolate;
}

.ww-ba--wide .ww-ba-frame {
  aspect-ratio: 4 / 3;
}

.ww-ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* The photos are phone snaps off a job site — a hair of extra contrast
     keeps the new frames from washing out next to bright Texas sky. */
  filter: saturate(1.03);
}

/* The "before" sits on top of the "after" and is clipped back to the
   divider. Clipping (rather than sizing a wrapper) means both images stay
   exactly the same size, so the two halves always register with each other. */
.ww-ba-img--before {
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--ww-ba-pos)) 0 0);
}

/* ---------- labels ---------- */

.ww-ba-badge {
  position: absolute;
  z-index: 3;
  top: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 0.25rem;
  font-family: var(--headerFont, "Barlow", Arial, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  pointer-events: none;
  backdrop-filter: blur(4px);
  transition: opacity 0.25s ease;
}

.ww-ba-badge--before {
  left: 0.75rem;
  background: rgba(11, 31, 51, 0.82);
  color: #fff;
}

.ww-ba-badge--after {
  right: 0.75rem;
  background: var(--primary, #044c94);
  color: #fff;
}

/* Once the divider is pushed most of the way to one side, the photo that has
   been wiped away is gone but its label would still be sitting there naming
   nothing. Fade whichever label no longer has a photo under it. */
.ww-ba[data-ww-ba-edge="start"] .ww-ba-badge--before,
.ww-ba[data-ww-ba-edge="end"] .ww-ba-badge--after {
  opacity: 0;
}

/* ---------- divider + grip ---------- */

.ww-ba-divider {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--ww-ba-pos);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 31, 51, 0.25);
  pointer-events: none;
}

.ww-ba-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(11, 31, 51, 0.35);
  display: grid;
  place-items: center;
  transition: scale 0.15s ease;
}

/* Two chevrons pointing outward, drawn from borders so there is no extra
   asset to load and they tint with the brand colour. */
.ww-ba-grip::before,
.ww-ba-grip::after {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border: solid var(--primary, #044c94);
  border-width: 2px 2px 0 0;
}

.ww-ba-grip::before {
  rotate: -135deg;
  margin-right: 0.85rem;
}

.ww-ba-grip::after {
  rotate: 45deg;
  margin-left: 0.85rem;
}

/* ---------- the control itself ---------- */

.ww-ba-range {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  cursor: ew-resize;
  appearance: none;
  -webkit-appearance: none;
  /* Let a vertical swipe scroll the page; keep horizontal drags for the wipe. */
  touch-action: pan-y;
}

/* The thumb is deliberately hairline-thin and invisible. The visible grip is
   .ww-ba-grip, which is positioned from the same percentage. A wide thumb
   would inset its own travel by half its width at each end, so the grip would
   drift away from the pointer near the edges. */
.ww-ba-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 2px;
  height: 100%;
  background: transparent;
  border: none;
  cursor: ew-resize;
}

.ww-ba-range::-moz-range-thumb {
  width: 2px;
  height: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: ew-resize;
}

.ww-ba-range::-moz-range-track {
  background: transparent;
  border: none;
}

.ww-ba-range:focus-visible {
  outline: 3px solid var(--primary, #044c94);
  outline-offset: 3px;
}

/* ---------- pointer dragging (JS present) ----------
   before-after.js adds .ww-ba--drag and then drives the range from pointer
   events on the frame, because a 2px invisible thumb cannot be grabbed with a
   fingertip: on a touch screen the gesture lands on the track, the browser
   reads it as a tap, and no drag ever starts.

   The range stays in the DOM and stays focusable — pointer-events only affects
   hit testing, so Tab and the arrow keys are untouched — but it no longer
   competes for the gesture, and its own tap-to-jump can't fire alongside ours. */

.ww-ba--drag .ww-ba-frame {
  cursor: ew-resize;
  /* Vertical swipes still scroll the page; horizontal ones are the wipe. */
  touch-action: pan-y;
  /* A drag that starts on a photo shouldn't sweep a text selection with it. */
  user-select: none;
  -webkit-user-select: none;
}

.ww-ba--drag .ww-ba-range {
  pointer-events: none;
}

.ww-ba-frame:hover .ww-ba-grip,
.ww-ba-range:focus-visible ~ .ww-ba-divider .ww-ba-grip {
  scale: 1.08;
}

/* ---------- caption ---------- */

.ww-ba-caption {
  margin-top: 1rem;
}

.ww-ba-place {
  display: block;
  font-family: var(--headerFont, "Barlow", Arial, sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary, #044c94);
  margin-bottom: 0.25rem;
}

.ww-ba-name {
  display: block;
  font-family: var(--headerFont, "Barlow", Arial, sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--headerColor, #141615);
  margin-bottom: 0.5rem;
}

.ww-ba-desc {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--bodyTextColor, #585b5d);
}

/* ---------- split (different-angle) pairs ---------- */

.ww-ba--split .ww-ba-frame {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem;
  aspect-ratio: 8 / 3;
  overflow: visible;
  background: none;
}

.ww-ba--split .ww-ba-half {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--lightGrey, #f5f5f5);
}

.ww-ba--split .ww-ba-img {
  position: absolute;
  clip-path: none;
}

/* ---------- layout helpers ---------- */

.ww-ba-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}

@media only screen and (min-width: 48rem) {
  .ww-ba-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (min-width: 64rem) {
  .ww-ba-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* A split pair is a wide, single-column item wherever it lands in a grid. */
.ww-ba-grid .ww-ba--split {
  grid-column: 1 / -1;
}

/* Below 34rem a side-by-side pair is two ~140px photos — too small to show
   anything. Stack them and let each one have real height. */
@media only screen and (max-width: 33.9375rem) {
  .ww-ba--split .ww-ba-frame {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    aspect-ratio: auto;
  }

  .ww-ba--split .ww-ba-half {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- section chrome ---------- */

.ww-ba-section {
  padding: var(--sectionPadding);
}

.ww-ba-section .ww-ba-head {
  max-width: 46rem;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.ww-ba-section .ww-ba-head .cs-text {
  margin: 1rem auto 0;
}

.ww-ba-section .ww-ba-foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.ww-ba-hint {
  display: block;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--bodyTextColor, #585b5d);
}

/* ---------- dark mode ----------
   Reads the tokens set on body.dark-mode in root.css; no colours of its own. */

body.dark-mode .ww-ba-frame,
body.dark-mode .ww-ba--split .ww-ba-half {
  background: var(--medium);
}

body.dark-mode .ww-ba-name {
  color: var(--bodyTextColorWhite);
}

body.dark-mode .ww-ba-place {
  color: var(--onDarkAccent);
}

body.dark-mode .ww-ba-desc,
body.dark-mode .ww-ba-hint {
  color: var(--onDarkMuted);
}

body.dark-mode .ww-ba-grip::before,
body.dark-mode .ww-ba-grip::after {
  border-color: var(--dark);
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .ww-ba-grip,
  .ww-ba-badge {
    transition: none;
  }
}

/* ===== mobile-nav.css ===== */
/* ==========================================================================
   Mobile / tablet navigation — the "glass panes" takeover
   --------------------------------------------------------------------------
   Loaded AFTER critical.css on every page. The template's mobile menu was a
   white panel that scaleY'd down from under the header; everything below is a
   full-viewport replacement built on the brand's own subject matter: three
   frosted panes drop into their frame like sashes seating in a window, a glint
   travels across each one as it lands, then the links rise through the glass.

   Nothing here is a framework: the stagger is a CSS custom property (--i) set
   once by nav.js, the pane sequence is nth-child transition-delay, the light is
   a radial-gradient positioned by --ww-mx/--ww-my, and the swipe-to-dismiss is
   a translate driven by --ww-dx. All of it is transform/opacity only, so it
   composites on the GPU and stays smooth on a phone.

   Specificity notes — critical.css is minified and uses #cs-navigation .cs-x
   selectors, some with :nth-of-type (which outranks a bare class). Where a
   declaration has to beat one of those, the selector here carries an extra
   class (usually .cs-nav) so it wins on specificity rather than on load order
   alone. Load order is still the safety net: this file comes after critical.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop guards. The extra elements exist in the markup at every width, so
   they are switched off first and re-enabled inside the mobile media query.
   .ww-menu-body uses display:contents so at desktop widths the wrapper leaves
   no box behind at all and .cs-ul sits directly in .cs-ul-wrapper, exactly as
   the original template expects.
   -------------------------------------------------------------------------- */
.ww-menu-fx,
.ww-menu-foot {
  display: none;
}

.ww-menu-body {
  display: contents;
}

/* Keyboard parity for the desktop dropdown: the trigger is a <span> that
   nav.js makes focusable, so the panel has to open on focus as well as hover
   (the template only handled :hover). */
@media only screen and (min-width: 75rem) {
  #cs-navigation .cs-dropdown:focus-within .cs-drop-ul {
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
  }

  #cs-navigation .cs-dropdown:focus-within .cs-drop-li {
    opacity: 1;
    transform: translateY(0);
  }

  #cs-navigation .cs-li-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
  }
}

@media only screen and (max-width: 74.96875rem) {
  /* ------------------------------------------------------------------------
     Tokens. One easing curve does almost all the work: a long, decelerating
     "settle" that makes a pane feel like it has mass. The in-curve is its
     mirror, used when things leave.
     ------------------------------------------------------------------------ */
  #cs-navigation {
    --ww-settle: cubic-bezier(0.16, 1, 0.3, 1);
    /* Fallback surface for engines without backdrop-filter: near-opaque, since
       there is no blur to soften whatever sits behind it. */
    --ww-glass-1: rgba(11, 31, 51, 0.985);
    --ww-glass-2: rgba(4, 15, 27, 0.995);
    --ww-hairline: rgba(255, 255, 255, 0.08);
  }

  /* ------------------------------------------------------------------------
     Bar geometry. The logo was 2.5rem in a row padded 1.25rem top and bottom —
     5.5rem of bar for 2.5rem of brand, with the 3rem toggle setting the real
     floor. Trading the padding for logo height spends that slack on the mark
     instead: 4rem of logo inside 0.75rem padding is the same 5.5rem row, so
     the bar does not move and neither does anything measured off it (the
     badge hangs from the header's bottom edge, the panel starts below it).

     These live here rather than in root.css because critical.css AND local.css
     both ship their own `#cs-navigation .cs-bottom-bar` at equal specificity
     and both load after root.css — an override there loses on the homepage
     only, which is exactly the sort of bug that takes an hour to find.
     ------------------------------------------------------------------------ */
  #cs-navigation .cs-bottom-bar {
    padding: 0.75rem 0;
  }

  #cs-navigation .cs-logo.cs-mobile {
    height: 4rem;
  }

  /* ------------------------------------------------------------------------
     Scroll lock. Freezing <body> with position:fixed is the only approach that
     holds on iOS Safari; nav.js stores the offset in --ww-lock-y and restores
     the scroll position on close, so the page never jumps.
     ------------------------------------------------------------------------ */
  body.ww-locked {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }

  /* critical.css gives the mobile header `position:fixed` but never sets `top`,
     so it renders at its *static* position — fine while <body> starts at 0.
     The lock above puts <body> at position:fixed with top:-<scrollY>, which
     moves the body box up and takes the header's static position with it: open
     the menu 700px down the page and the bar (logo, close button and all) is
     laid out 700px above the viewport. Pinning top:0 for the duration of the
     lock detaches it from the body box. */
  body.ww-locked #cs-navigation {
    top: 0;
  }

  /* The scroll-to-top dial is fixed too — get it out of the takeover. */
  body.cs-open .pb-go-top-progress,
  body.ww-menu-closing .pb-go-top-progress {
    opacity: 0 !important;
    pointer-events: none;
  }

  /* ------------------------------------------------------------------------
     The header while the menu is open.

     #cs-navigation.scroll translateY(-3rem)s the whole header to tuck the info
     bar away. A transformed ancestor becomes the containing block for its
     fixed descendants, which would drag the panel 3rem off-screen with it — so
     the transform is neutralised for as long as the panel is on screen. The
     side effect is the nicer of the two: opening the menu slides the full
     header back into view, closing it tucks it away again. .ww-menu-closing
     holds the override through the exit animation so nothing shifts mid-flight.
     ------------------------------------------------------------------------ */
  body.cs-open #cs-navigation,
  body.ww-menu-closing #cs-navigation {
    transform: none !important;
  }

  /* Every rule below is keyed on cs-open AND ww-menu-closing. The panes
     retract upwards, so the strip behind the header is the last thing they
     uncover — reverting the bar to white the instant the menu is dismissed
     would flash a white slab across glass that is still on screen. The bar
     stays inverted for the whole exit and flips back once the panel is gone. */
  body.cs-open #cs-navigation,
  body.ww-menu-closing #cs-navigation {
    z-index: 9999;
    /* The panel supplies the surface now; the white bar would slice a strip
       across the top of it. */
    background-color: transparent;
    box-shadow: none;
  }

  /* Header chrome inverts onto the dark glass. */
  body.cs-open #cs-navigation .cs-item,
  body.cs-open #cs-navigation .cs-link,
  body.ww-menu-closing #cs-navigation .cs-item,
  body.ww-menu-closing #cs-navigation .cs-link {
    color: rgba(255, 255, 255, 0.72);
  }

  body.cs-open #cs-navigation .cs-icon,
  body.ww-menu-closing #cs-navigation .cs-icon {
    filter: grayscale(1) brightness(1000%);
    opacity: 0.7;
  }

  body.cs-open #cs-navigation .cs-top-bar:before,
  body.ww-menu-closing #cs-navigation .cs-top-bar:before {
    background: rgba(255, 255, 255, 0.14);
  }

  body.cs-open #cs-navigation #dark-mode-toggle .cs-moon,
  body.ww-menu-closing #cs-navigation #dark-mode-toggle .cs-moon {
    fill: #fff;
  }

  /* .scroll re-parks the theme toggle for the tucked-up header; with the
     transform neutralised it has to go back to its resting spot. */
  body.cs-open #cs-navigation.scroll #dark-mode-toggle,
  body.ww-menu-closing #cs-navigation.scroll #dark-mode-toggle {
    top: 0;
    right: 1rem;
  }

  /* The mobile bar carries a colour logo on white and a white one on navy
     (root.css). Open, the bar is always dark glass — force the white lockup. */
  body.cs-open #cs-navigation .cs-mobile .ww-logo-light,
  body.ww-menu-closing #cs-navigation .cs-mobile .ww-logo-light {
    display: none;
  }

  body.cs-open #cs-navigation .cs-mobile .ww-logo-dark,
  body.ww-menu-closing #cs-navigation .cs-mobile .ww-logo-dark {
    display: block;
  }

  /* The badge is its own solid chip now (root.css), so it no longer has to be
     re-tinted for the dark bar — only its shadow, which would disappear into
     the glass, gets a lift. */
  body.cs-open #cs-navigation .cs-mobile .ww-former-tag,
  body.ww-menu-closing #cs-navigation .cs-mobile .ww-former-tag {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.5);
  }

  /* ------------------------------------------------------------------------
     The toggle: three lines into an X, on a spring.

     critical.css ships this as "#cs-navigation .cs-active .cs-line1" — a
     descendant selector, and .cs-active lands on the header itself, so the
     template's X never actually fires. These rules replace it with the
     compound selector it wanted, and add the overshoot.
     ------------------------------------------------------------------------ */
  #cs-navigation .cs-toggle {
    position: relative;
    z-index: 20;
    border-radius: 0.25rem;
    background-color: #f3f3f3;
    transition: background-color 0.4s ease, box-shadow 0.4s ease, transform 0.6s var(--ww-settle);
  }

  #cs-navigation .cs-toggle:active {
    transform: scale(0.94);
  }

  /* Surface follows the panel's lifetime (so it does not turn pale grey while
     still sitting on glass); the X morph below follows .cs-active, so the
     icon starts animating back the moment the menu is dismissed. */
  body.cs-open #cs-navigation .cs-toggle,
  body.ww-menu-closing #cs-navigation .cs-toggle {
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  }

  #cs-navigation .cs-line {
    background-color: #585b5d;
    transition: background-color 0.4s ease, transform 0.55s var(--ww-settle), top 0.35s var(--ww-settle),
      opacity 0.25s ease, width 0.35s var(--ww-settle);
  }

  /* The export turns the closed toggle into a solid --primary chip in dark mode
     and pairs it with `body.dark-mode #cs-navigation .cs-line { color: #1a1a1a }`
     — but the lines are <span>s painted with background-color, so that rule sets
     a property nothing reads and they keep the #585b5d grey meant for the white
     light-mode bar. Grey on saturated blue is the muddy icon you see; white is
     what the chip wants, and it matches the white label on every other solid
     button. Same specificity as the export's rule — this sheet loading last is
     what settles it. */
  body.dark-mode #cs-navigation .cs-line {
    background-color: #fff;
  }

  body.cs-open #cs-navigation .cs-line,
  body.ww-menu-closing #cs-navigation .cs-line {
    background-color: #fff;
  }

  #cs-navigation.cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }

  #cs-navigation.cs-active .cs-line2 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-225deg);
  }

  #cs-navigation.cs-active .cs-line3 {
    bottom: 50%;
    width: 0;
    opacity: 0;
  }

  /* ------------------------------------------------------------------------
     The panel.

     z-index:-1 is deliberate and load-bearing: a negative-z child paints above
     its parent's own background but below every other child, so the panel
     covers the header's white bar while the logo, toggle and info bar stay on
     top of the glass. visibility is transitioned with a delay instead of being
     switched, which keeps the element in the a11y tree only while it is
     genuinely on screen and still lets the exit animation play out.
     ------------------------------------------------------------------------ */
  #cs-navigation .cs-ul-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.8s;
    /* Default position of the light; nav.js steers it with the pointer. */
    --ww-mx: 78%;
    --ww-my: 8%;
  }

  #cs-navigation .cs-ul-wrapper:before {
    display: none;
  }

  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  /* Dark mode already paints this navy; the panes own the surface now. */
  body.dark-mode #cs-navigation .cs-ul-wrapper {
    background-color: transparent;
  }

  body.dark-mode #cs-navigation .cs-ul-wrapper:before {
    display: none;
  }

  /* ------------------------------------------------------------------------
     Layer 1 — the panes.

     Three columns, each translated a hair past its own height so no sliver
     shows, dropping in sequence. --p is the column index: opening runs
     left-to-right off it, closing runs right-to-left off (2 - --p), which is
     what makes the exit read as a reversal rather than a rewind.

     backdrop-filter is what sells the glass: the page behind stays faintly
     legible and out of focus. The gradients sit at ~93-96% alpha so text
     contrast never depends on what happens to be scrolled behind them.
     ------------------------------------------------------------------------ */
  #cs-navigation .ww-menu-fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    pointer-events: none;
    transform: translate3d(calc(var(--ww-dx, 0px) * 0.35), 0, 0);
  }

  #cs-navigation .ww-pane {
    --p: 0;
    position: relative;
    flex: 1 1 0;
    overflow: hidden;
    background: linear-gradient(178deg, var(--ww-glass-1) 0%, var(--ww-glass-2) 100%);
    transform: translate3d(0, -101%, 0);
    transition: transform 0.72s var(--ww-settle);
    transition-delay: calc((2 - var(--p)) * 0.055s);
    will-change: transform;
  }

  /* With a real blur behind it the sash can afford to stay translucent — the
     page reads as depth, not as noise. The alpha still sits high enough that
     nothing scrolled behind can compete with the link text. */
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    #cs-navigation .ww-pane {
      -webkit-backdrop-filter: blur(30px) saturate(1.4);
      backdrop-filter: blur(30px) saturate(1.4);
      background: linear-gradient(178deg, rgba(12, 32, 53, 0.975) 0%, rgba(4, 16, 28, 0.99) 100%);
    }
  }

  #cs-navigation .ww-pane:nth-child(2) {
    --p: 1;
  }

  #cs-navigation .ww-pane:nth-child(3) {
    --p: 2;
  }

  /* The mullion between sashes — a hairline of caught light, not a border. */
  #cs-navigation .ww-pane + .ww-pane {
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.07), -2px 0 12px rgba(0, 0, 0, 0.28);
  }

  #cs-navigation.cs-active .ww-pane {
    transform: translate3d(0, 0, 0);
    transition-delay: calc(var(--p) * 0.065s);
  }

  /* The glint. A narrow diagonal highlight that crosses the sash just after it
     seats — the detail that reads as glass rather than as a coloured div. */
  #cs-navigation .ww-pane:after {
    content: "";
    position: absolute;
    top: -60%;
    left: -120%;
    height: 220%;
    width: 60%;
    background: linear-gradient(
      100deg,
      transparent 0%,
      rgba(255, 255, 255, 0.05) 42%,
      rgba(204, 228, 244, 0.16) 50%,
      rgba(255, 255, 255, 0.05) 58%,
      transparent 100%
    );
    transform: translate3d(0, 0, 0) rotate(8deg);
    opacity: 0;
  }

  #cs-navigation.cs-active .ww-pane:after {
    animation: ww-glint 1.15s var(--ww-settle) calc(var(--p) * 0.065s + 0.22s) both;
  }

  @keyframes ww-glint {
    0% {
      opacity: 0;
      transform: translate3d(0, 0, 0) rotate(8deg);
    }
    18% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translate3d(420%, 0, 0) rotate(8deg);
    }
  }

  /* ------------------------------------------------------------------------
     Layer 2 — the light. A soft brand-blue bloom that drifts on its own and
     tracks the pointer through --ww-mx/--ww-my. Painting it as a background
     gradient (rather than a blurred element) keeps it off the compositor's
     critical path while still feeling alive.
     ------------------------------------------------------------------------ */
  #cs-navigation .ww-menu-glow {
    position: absolute;
    inset: -20%;
    opacity: 0;
    background: radial-gradient(
        38% 30% at var(--ww-mx) var(--ww-my),
        rgba(100, 148, 204, 0.34) 0%,
        rgba(28, 92, 156, 0.16) 42%,
        transparent 72%
      ),
      radial-gradient(46% 34% at 12% 96%, rgba(4, 76, 148, 0.32) 0%, transparent 68%);
    transition: opacity 0.7s ease 0.18s;
    animation: ww-drift 22s ease-in-out infinite;
  }

  #cs-navigation.cs-active .ww-menu-glow {
    opacity: 1;
  }

  @keyframes ww-drift {
    0%,
    100% {
      transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
      transform: translate3d(-4%, 3%, 0) scale(1.08);
    }
  }

  /* ------------------------------------------------------------------------
     Layer 3 — the frame. Faint horizontal rails that, crossed with the pane
     seams, read as muntins in a large window. Fades in only once the sashes
     have landed.
     ------------------------------------------------------------------------ */
  #cs-navigation .ww-menu-grid {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.038) 0 1px,
      transparent 1px 5.5rem
    );
    -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
    mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
    transition: opacity 0.6s ease;
  }

  #cs-navigation.cs-active .ww-menu-grid {
    opacity: 1;
    transition-delay: 0.42s;
  }

  /* ------------------------------------------------------------------------
     Layer 4 — the content. This is also the scroll container and the element
     the swipe gesture moves, which is why the fx layer is a sibling rather
     than a parent: dragging the content never disturbs the glass behind it.
     --ww-nav-h is the measured header height, so the list always clears the
     logo no matter how the bar wraps.
     ------------------------------------------------------------------------ */
  #cs-navigation .ww-menu-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
    /* Fallback matches the bar's usual rendered height, so the list clears the
       logo even in the frame before nav.js measures it. */
    padding: calc(var(--ww-nav-h, 9rem) + 0.75rem) 1.5rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Vertical panning stays native; horizontal is ours to interpret. */
    touch-action: pan-y;
    transform: translate3d(var(--ww-dx, 0px), 0, 0) scale(var(--ww-scale, 1));
    transform-origin: 50% 40%;
    transition: transform 0.5s var(--ww-settle);
  }

  /* While a finger is down the panel must track it exactly — no easing. */
  #cs-navigation .ww-dragging .ww-menu-body,
  #cs-navigation .ww-dragging .ww-menu-fx {
    transition: none;
  }

  /* ------------------------------------------------------------------------
     The list.
     ------------------------------------------------------------------------ */
  #cs-navigation .cs-nav .cs-ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    counter-reset: ww-nav;
    max-height: none;
    height: auto;
    width: 100%;
    margin: 0 0 auto;
    padding: 0;
    overflow: visible;
    gap: 0;
    /* Gives the links somewhere to rotate through as they rise. */
    perspective: 900px;
  }

  #cs-navigation .cs-nav .cs-li {
    --i: 0;
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    text-align: left;
    list-style: none;
    counter-increment: ww-nav;
    border-bottom: 1px solid var(--ww-hairline);
    opacity: 0;
    transform: translate3d(0, 1.4rem, 0) rotateX(-38deg);
    transform-origin: 50% 0;
    filter: blur(7px);
    transition: opacity 0.4s ease, transform 0.55s var(--ww-settle), filter 0.45s ease;
    /* Closing: everything leaves at once, quickly. Opening re-delays below. */
    transition-delay: 0s;
  }

  #cs-navigation.cs-active .cs-nav .cs-li {
    opacity: 1;
    transform: none;
    filter: none;
    transition-delay: calc(var(--i) * 55ms + 300ms);
  }

  /* Hover / press wash — a brand-blue wipe from the leading edge, sitting
     behind the link's own text. */
  #cs-navigation .cs-nav .cs-li:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1.5rem;
    right: -1.5rem;
    background: linear-gradient(90deg, rgba(28, 92, 156, 0.42) 0%, rgba(28, 92, 156, 0) 78%);
    opacity: 0;
    transform: translate3d(-1.25rem, 0, 0);
    transition: opacity 0.35s ease, transform 0.45s var(--ww-settle);
    pointer-events: none;
  }

  #cs-navigation .cs-nav .cs-li:hover:before,
  #cs-navigation .cs-nav .cs-li:focus-within:before,
  #cs-navigation .cs-nav .cs-li:active:before {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* ------------------------------------------------------------------------
     The links. Big Barlow caps with a counter-generated index — the numbering
     is pure CSS, so adding or removing a nav item needs no markup bookkeeping.
     ------------------------------------------------------------------------ */
  #cs-navigation .cs-nav .cs-ul > .cs-li > .cs-li-link {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    margin: 0;
    padding: 0.85rem 0.25rem;
    font-family: var(--headerFont);
    font-size: clamp(1.375rem, 6.4vw, 2rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    transition: color 0.3s ease, transform 0.45s var(--ww-settle);
  }

  #cs-navigation .cs-nav .cs-ul > .cs-li > .cs-li-link:active {
    transform: translateX(0.35rem);
  }

  #cs-navigation .cs-nav .cs-ul > .cs-li > .cs-li-link:before {
    content: counter(ww-nav, decimal-leading-zero);
    flex: none;
    align-self: flex-start;
    margin-top: 0.5em;
    font-family: var(--bodyFont);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.16em;
    color: var(--secondary);
    opacity: 0.85;
    transition: color 0.3s ease, opacity 0.3s ease;
  }

  /* Chevron for the plain links; the dropdown supplies its own icon. */
  #cs-navigation .cs-nav .cs-li:not(.cs-dropdown) > .cs-li-link:after {
    content: "";
    flex: none;
    height: 0.5rem;
    width: 0.5rem;
    margin-left: auto;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.28;
    transition: transform 0.4s var(--ww-settle), opacity 0.3s ease;
  }

  #cs-navigation .cs-nav .cs-li:not(.cs-dropdown):hover > .cs-li-link:after,
  #cs-navigation .cs-nav .cs-li:not(.cs-dropdown):focus-within > .cs-li-link:after {
    opacity: 0.9;
    transform: rotate(45deg) translate3d(0.2rem, -0.2rem, 0);
  }

  /* Current page. The template turns this --primary, which is near-black on
     navy — invisible. It gets the light tint, a lit index, a standing accent
     bar and a faint wash instead, so "you are here" survives without relying
     on colour alone. The selector has to out-specify the base link rule above
     (1 id + 4 classes), hence the full child chain. */
  #cs-navigation .cs-nav .cs-ul > .cs-li > .cs-li-link.cs-active {
    /* Negative margin + equal padding + the width it gives back: the bar hangs
       into the container's gutter and the index numbers stay on the same
       optical line as every other row. */
    margin-left: -0.9rem;
    padding-left: 0.9rem;
    width: calc(100% + 0.9rem);
    background: linear-gradient(90deg, rgba(28, 92, 156, 0.3) 0%, transparent 62%);
    box-shadow: inset 3px 0 0 var(--secondary);
    color: var(--secondaryLight);
  }

  #cs-navigation .cs-nav .cs-ul > .cs-li > .cs-li-link.cs-active:before {
    color: var(--secondaryLight);
    opacity: 1;
    text-shadow: 0 0 0.75rem rgba(204, 228, 244, 0.8);
  }

  #cs-navigation .cs-nav .cs-li-link:focus-visible {
    outline: 2px solid var(--secondaryLight);
    outline-offset: 2px;
    border-radius: 0.125rem;
  }

  /* ------------------------------------------------------------------------
     The submenu. Height is animated in pixels by nav.js (measured from
     scrollHeight) so the accordion is exact at any width and any content
     length — the usual max-height guess would either clip or coast.
     No padding on the <ul>: with border-box a padded element cannot collapse
     to a true zero height, and the seam would show.
     ------------------------------------------------------------------------ */
  #cs-navigation .cs-nav .cs-dropdown > .cs-li-link {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }

  #cs-navigation .cs-nav .cs-drop-icon {
    position: static;
    flex: none;
    height: auto;
    width: 1.4rem;
    margin-left: auto;
    transform: none;
    opacity: 0.55;
    filter: brightness(0) invert(1);
    transition: transform 0.45s var(--ww-settle), opacity 0.3s ease;
  }

  #cs-navigation .cs-nav .cs-dropdown.cs-active .cs-drop-icon {
    transform: rotate(180deg);
    opacity: 1;
  }

  #cs-navigation .cs-nav .cs-drop-ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Collapsed is hidden, not merely zero-height: a clipped-but-visible list
       still takes tab stops, and tabbing into a submenu nobody opened is the
       kind of thing that only ever gets found by the person using a keyboard.
       The visibility flip is delayed to the end so it cannot cut the collapse
       animation short. */
    visibility: hidden;
    height: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    overflow: hidden;
    opacity: 0;
    gap: 0;
    transition: height 0.45s var(--ww-settle), opacity 0.3s ease, margin 0.45s var(--ww-settle),
      visibility 0s linear 0.45s;
  }

  #cs-navigation .cs-nav .cs-dropdown.cs-active .cs-drop-ul {
    visibility: visible;
    opacity: 1;
    height: 0; /* nav.js overwrites inline with the measured value */
    margin: 0 0 0.85rem;
    padding: 0;
    transition-delay: 0s;
  }

  #cs-navigation .cs-nav .cs-drop-li {
    position: relative;
    list-style: none;
    /* The rail: one continuous line down the left of the group, echoing the
       pane seams. */
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    margin-left: 2rem;
  }

  #cs-navigation .cs-nav .cs-li-link.cs-drop-link {
    display: block;
    padding: 0.6rem 0 0.6rem 1.1rem;
    font-family: var(--bodyFont);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-transform: none;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.25s ease, transform 0.35s var(--ww-settle);
  }

  #cs-navigation .cs-nav .cs-li-link.cs-drop-link:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -1px;
    height: 0;
    width: 2px;
    background: var(--secondary);
    transform: translateY(-50%);
    transition: height 0.35s var(--ww-settle);
  }

  #cs-navigation .cs-nav .cs-drop-li:hover .cs-drop-link,
  #cs-navigation .cs-nav .cs-drop-link:focus-visible {
    color: #fff;
    transform: translateX(0.2rem);
  }

  #cs-navigation .cs-nav .cs-drop-li:hover .cs-drop-link:before,
  #cs-navigation .cs-nav .cs-drop-link:focus-visible:before {
    height: 60%;
  }

  /* ------------------------------------------------------------------------
     The footer block — quote CTA, the contact details people actually open the
     menu for, and the brand tail. Rises after the links, on the same curve.
     ------------------------------------------------------------------------ */
  #cs-navigation .ww-menu-foot {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    /* No border of its own — the last link's border-bottom is already the
       seam between the list and this block. */
    margin-top: 1.75rem;
  }

  #cs-navigation .ww-menu-foot > * {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
    transition: opacity 0.4s ease, transform 0.55s var(--ww-settle);
  }

  #cs-navigation.cs-active .ww-menu-foot > * {
    opacity: 1;
    transform: none;
  }

  #cs-navigation.cs-active .ww-menu-foot > *:nth-child(1) {
    transition-delay: 0.56s;
  }

  #cs-navigation.cs-active .ww-menu-foot > *:nth-child(2) {
    transition-delay: 0.63s;
  }

  #cs-navigation.cs-active .ww-menu-foot > *:nth-child(3) {
    transition-delay: 0.7s;
  }

  /* CTA. Squared and uppercase to match .cs-button-solid elsewhere on the
     site, with a sheen that sweeps once on entry so the eye is drawn to it
     last — after the links have already been read. */
  #cs-navigation .ww-menu-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.25rem;
    border-radius: 0.25rem;
    background: linear-gradient(100deg, var(--primary) 0%, var(--accent) 100%);
    box-shadow: 0 0.75rem 1.75rem rgba(4, 76, 148, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font-family: var(--headerFont);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    /* This element IS .ww-menu-foot > *:nth-child(1), so it inherits the block's
       entry motion — and `transition` is a shorthand, so declaring one here
       (same specificity, later in the sheet) REPLACES that entry list rather
       than adding to it. Omitting the opacity leg is what made the CTA pop in
       at full strength the instant the menu opened while the contact tiles and
       brand tail below it faded up on the stagger: those are nth-child 2 and 3
       and set no transition of their own, so they kept the block's. The two
       entry legs have to be restated verbatim alongside the CTA's own
       box-shadow. */
    transition: opacity 0.4s ease, transform 0.55s var(--ww-settle), box-shadow 0.35s ease;
  }

  #cs-navigation .ww-menu-cta:active {
    transform: scale(0.985);
    box-shadow: 0 0.35rem 1rem rgba(4, 76, 148, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }

  #cs-navigation .ww-menu-cta:after {
    content: "";
    position: absolute;
    top: -50%;
    left: -80%;
    height: 200%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: rotate(8deg);
    opacity: 0;
  }

  #cs-navigation.cs-active .ww-menu-cta:after {
    animation: ww-sheen 1.1s ease-out 0.95s both;
  }

  @keyframes ww-sheen {
    0% {
      opacity: 0;
      transform: translate3d(0, 0, 0) rotate(8deg);
    }
    22% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translate3d(360%, 0, 0) rotate(8deg);
    }
  }

  #cs-navigation .ww-menu-cta svg {
    flex: none;
    height: 1rem;
    width: 1rem;
    transition: transform 0.4s var(--ww-settle);
  }

  #cs-navigation .ww-menu-cta:hover svg {
    transform: translateX(0.25rem);
  }

  /* Contact tiles. Call and Email, paired — the two things anyone opens a menu
     on a phone to find. Tap targets stay comfortably over the 44px minimum at
     every width. */
  #cs-navigation .ww-menu-contact {
    display: grid;
    /* auto tracks, not equal ones. The two tiles carry strings of different
       lengths — "tom@hginstall.com" measures a good 25% wider than the phone
       number — so splitting the row down the middle left the phone tile half
       empty while the email wrapped onto a second line. auto sizes each track
       to the text it actually holds and then stretches both by an equal share
       of whatever is left, which is what gets the address onto one line. */
    grid-template-columns: auto auto;
    gap: 0.5rem;
  }

  /* Below ~320px there is no font size that keeps two tiles on one row and
     stays readable, so they stack instead. */
  @media only screen and (max-width: 20rem) {
    #cs-navigation .ww-menu-contact {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  #cs-navigation .ww-contact-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.875rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.35s var(--ww-settle);
  }

  #cs-navigation a.ww-contact-row:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.99);
  }

  #cs-navigation .ww-contact-row svg {
    flex: none;
    height: 1rem;
    width: 1rem;
    color: var(--secondary);
  }

  #cs-navigation .ww-contact-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  #cs-navigation .ww-contact-label {
    font-family: var(--bodyFont);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
  }

  #cs-navigation .ww-contact-value {
    font-family: var(--bodyFont);
    /* Sized to fit rather than fixed. Measured in Roboto 500, the address is
       8.73× the font size wide and the number 6.97×; each tile spends a fixed
       48px on its icon, gap and padding, and the drawer spends 48px of its own
       on side padding. So both tiles clear one row while
       15.7F + 104 <= viewport, i.e. F <= (100vw - 152px) / 15.7. The middle
       term sits just under that line and reaches the 14px cap at 390px, which
       is where most phones already were. */
    font-size: clamp(0.625rem, calc(6vw - 9px), 0.875rem);
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
    /* The whole point: never break the address across two lines. */
    white-space: nowrap;
  }

  /* Brand tail. */
  #cs-navigation .ww-menu-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  #cs-navigation .ww-menu-tagline {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: var(--headerFont);
    font-size: 0.9375rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.02em;
    color: var(--secondaryLight);
  }

  #cs-navigation .ww-menu-tagline span {
    font-family: var(--bodyFont);
    font-size: 0.5625rem;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
  }

  #cs-navigation .ww-menu-social {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: 2.75rem;
    width: 2.75rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: background-color 0.3s ease, transform 0.4s var(--ww-settle);
  }

  #cs-navigation .ww-menu-social:hover,
  #cs-navigation .ww-menu-social:active {
    background: var(--primary);
    transform: translateY(-2px);
  }

  #cs-navigation .ww-menu-social svg {
    height: 1rem;
    width: 1rem;
  }

}

/* --------------------------------------------------------------------------
   Tablet: more room, so the type grows and the contact tiles pair up.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 40.625rem) and (max-width: 74.96875rem) {
  #cs-navigation .ww-menu-body {
    max-width: 40rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  #cs-navigation .cs-nav .cs-ul > .cs-li > .cs-li-link {
    padding: 1rem 0.25rem;
  }

  /* critical.css re-parks the theme toggle for the tucked-up header with
     `.scroll #dark-mode-toggle{top:4.25rem;right:4.875rem}` under a blanket
     max-width:74.96875rem. Those are coordinates only on the phone bar, where
     the button is position:absolute inside the header. From 40.625rem the
     template makes it a relative flex item in the bottom row, and on a
     relative box the same offsets are a *nudge*: scrolling shoved the moon
     4.25rem down and 4.875rem left, out of the bar and onto the hero. There is
     nothing to re-park at this size — the flex row already moves with the
     header — so the offsets go back to auto. The open-menu re-park earlier in
     this file (top:0/right:1rem) is the same coordinates-vs-nudge story and
     gets the same treatment. */
  #cs-navigation.scroll #dark-mode-toggle,
  body.cs-open #cs-navigation.scroll #dark-mode-toggle,
  body.ww-menu-closing #cs-navigation.scroll #dark-mode-toggle {
    top: auto;
    right: auto;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion. The choreography is the point of this menu, so rather than
   half-disable it the whole thing collapses to a single honest cross-fade:
   panes already seated, links already in place, no drift, no glint, no sheen.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 74.96875rem) and (prefers-reduced-motion: reduce) {
  #cs-navigation .cs-ul-wrapper,
  #cs-navigation .ww-menu-fx,
  #cs-navigation .ww-menu-body,
  #cs-navigation .ww-pane,
  #cs-navigation .cs-nav .cs-li,
  #cs-navigation .ww-menu-foot > *,
  #cs-navigation .cs-line,
  #cs-navigation .ww-menu-glow,
  #cs-navigation .ww-menu-grid {
    transition-duration: 0.001s !important;
    transition-delay: 0s !important;
    animation: none !important;
  }

  #cs-navigation .ww-pane {
    transform: none;
  }

  #cs-navigation .cs-nav .cs-li {
    transform: none;
    filter: none;
  }

  #cs-navigation .cs-ul-wrapper {
    opacity: 0;
    transition: opacity 0.2s linear, visibility 0s linear 0.2s !important;
  }

  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
  }

  #cs-navigation .ww-menu-glow {
    animation: none !important;
  }
}

/* ==========================================================================
   Current-page state for the Windows / Doors submenu.

   The top-level links (Home, About Us, Gallery) have carried .cs-active since
   the export; the two dropdown children never did — there was no template
   condition and no style for one, so /windows/ and /doors/ were the only pages
   with nothing lit in the nav.

   Why the parent <li> gets ww-section-active and NOT .cs-active: in this nav
   .cs-active is already three different states depending on where it lands —
   menu-open on #cs-navigation, submenu-open on .cs-dropdown, current-page on a
   link. Marking the current section with .cs-active on the <li> would trip the
   `.cs-dropdown.cs-active .cs-drop-ul` rule and hang the submenu permanently
   open on mobile. A separate class keeps the two meanings apart.
   ========================================================================== */

/* ---- desktop: the hover panel ------------------------------------------ */
@media only screen and (min-width: 75rem) {
  /* Out-specifies the base `.cs-li-link.cs-drop-link` colour (1 id + 2
     classes) with 1 id + 4. Deliberately not the panel's hover treatment
     (solid --primary fill): hovering the current item should still read as a
     hover, so this is the quieter pair — brand colour, weight, and a bar on
     the leading edge. */
  #cs-navigation .cs-nav .cs-li-link.cs-drop-link.cs-active {
    color: var(--primary);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--primary);
  }

  /* --primary is the same near-black-on-navy problem the top-level active
     link has in dark mode, so it takes the same on-dark accent. root.css sets
     that at 1 id + 3 classes and would lose to the rule above; this restates
     it one class higher. */
  body.dark-mode #cs-navigation .cs-nav .cs-li-link.cs-drop-link.cs-active {
    color: var(--onDarkAccent);
    box-shadow: inset 3px 0 0 var(--onDarkAccent);
  }

  /* The closed panel gives no clue which section you are in, since the submenu
     is only visible on hover. This lights the trigger itself. */
  #cs-navigation .cs-nav .cs-dropdown.ww-section-active > .cs-li-link {
    color: var(--primary);
  }

  body.dark-mode #cs-navigation .cs-nav .cs-dropdown.ww-section-active > .cs-li-link {
    color: var(--onDarkAccent);
  }
}

/* ---- mobile: the glass panel ------------------------------------------- */
@media only screen and (max-width: 74.96875rem) {
  /* Matches the top-level current-page row, one step quieter: the same
     --secondaryLight text, and the accent bar that hover animates in is simply
     held lit instead of a second competing treatment. */
  #cs-navigation .cs-nav .cs-li-link.cs-drop-link.cs-active {
    color: var(--secondaryLight);
  }

  #cs-navigation .cs-nav .cs-li-link.cs-drop-link.cs-active:before {
    height: 60%;
  }

  /* Hover still has somewhere to go from the active state. */
  #cs-navigation .cs-nav .cs-drop-li:hover .cs-drop-link.cs-active,
  #cs-navigation .cs-nav .cs-drop-link.cs-active:focus-visible {
    color: #fff;
  }
}