/* Commercial Division hero slider (snippet "NGS Commercial hero slider" + cdh.js).
   Slide 1 is the page's own .v2-hero; the rest are .cdh-s sections. */
/* touch-action: a sideways swipe on the slider changes the slide instead of the browser treating it as Back */
.cdh{position:relative;background:#0a0a0a;color:#fff;overflow:hidden;touch-action:pan-y pinch-zoom;overscroll-behavior-x:contain}
.cdh-track{display:grid}
.cdh-slide{grid-area:1/1;min-width:0;display:flex;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s}
.cdh-slide.is-on{opacity:1;visibility:visible;z-index:1}
.cdh-slide>*{flex:1;min-width:0}
/* These two also apply before cdh.js has wrapped the hero, so the page does not jump when the slider appears
   (this stylesheet only loads on the Commercial Division page while the slider is on). */
.ngs-v2 .v2 .v2-hero{min-height:clamp(560px,72vh,720px)}
.ngs-v2 .v2 .v2-hero__in{padding-bottom:104px}

.ngs-v2 .cdh .cdh-s{position:relative;display:flex;flex-direction:column;min-height:clamp(560px,72vh,720px);margin:0;padding:0;background:#0a0a0a;color:#fff;overflow:hidden}
.cdh-bg{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:#111}
/* the theme sets img{height:auto}; without the !important the photo stops part-way down a tall phone slide */
.ngs-v2 .cdh .cdh-bg img{position:absolute;top:0;left:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;display:block;transition:opacity .45s ease}
.cdh-bg:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.68) 40%,rgba(0,0,0,.3) 78%),linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,0) 46%)}
.cdh-s--floor .cdh-bg img{transform:scale(1.06)}
/* windows slide: frame the photo so the black-framed bay window clears the headline */
.ngs-v2 .cdh .cdh-s--rest .cdh-bg img{object-position:50% 47%;transform:scale(1.3);transform-origin:0 45%}
.cdh-in{position:relative;z-index:2;flex:1;display:flex;align-items:flex-end;justify-content:space-between;gap:44px;padding-top:44px;padding-bottom:0;width:100%;order:1}
.cdh-card,.cdh-fan{align-self:center}
/* the two buttons: under the copy on wide screens, under the color strip on phones (same level on every slide) */
.cdh-cta{position:relative;z-index:3;width:100%;order:2}
.cdh-s--rest .cdh-cta{padding-bottom:104px}
/* the windows photo is dark already: a lighter veil so the building still shows */
.cdh-s--rest .cdh-bg:after{background:linear-gradient(90deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.4) 46%,rgba(0,0,0,.06) 82%),linear-gradient(0deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,0) 45%)}
.ngs-v2 .cdh .cdh-s--rest .cdh-bg img{filter:brightness(1.3) contrast(1.04)}
.cdh-copy{max-width:760px;min-width:0}
.ngs-v2 .cdh .cdh-h{color:#fff!important;max-width:16ch;font-size:clamp(32px,4.3vw,62px)}
/* the colored line: its box is exactly as wide as its words, so the color fill can never stop short of a letter */
.ngs-v2 .cdh .cdh-h em{display:block;width:-webkit-max-content;width:max-content;max-width:none;padding-right:.06em}
/* a hyphenated word never splits or runs off the slide: it stays on one line and cdh.js sizes the heading to fit */
.ngs-v2 .cdh .cdh-h em,.cdh-nb{white-space:nowrap}
.ngs-v2 .cdh .cdh-h .cdh-nb{font:inherit!important;color:inherit!important;letter-spacing:inherit;text-transform:inherit}
.cdh .v2-lede{max-width:44ch}

/* the picked color / door style, top right */
.cdh-card{flex:none;margin:0;width:clamp(220px,23vw,330px);background:#fff;padding:10px 10px 0;box-shadow:0 34px 70px -24px rgba(0,0,0,.85);transform:rotate(3deg)}
.cdh-card--wide{width:clamp(300px,29vw,420px);transform:rotate(2deg)}
.cdh-card__img{display:block;aspect-ratio:1/1;overflow:hidden;background:#e9e7e2}
.cdh-card--wide .cdh-card__img{aspect-ratio:4/3}
.ngs-v2 .cdh .cdh-card__img img{width:100%!important;height:100%!important;object-fit:cover;display:block;max-width:none!important;transition:opacity .3s ease}
.cdh-card figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:11px 2px 12px;color:#12181a}
.cdh-card figcaption b{font-family:var(--head,Archivo,sans-serif);font-stretch:125%;font-weight:900;font-size:clamp(14px,1.25vw,18px);line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
.cdh-card--wide figcaption b{min-height:2.1em}
.cdh-card figcaption small{flex:none;font-weight:800;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#007f86}

/* porcelain: five tiles leaning at 20 degrees */
.cdh-fan{position:relative;flex:none;width:clamp(380px,42vw,600px);display:flex;align-items:center;justify-content:center;padding:10px 0 44px}
.cdh-fan i{display:block;flex:none;width:19%;aspect-ratio:1/2;margin:0 -1.2%;background:#d9d6d0 center/cover no-repeat;border:2px solid rgba(255,255,255,.92);box-shadow:-20px 24px 44px -16px rgba(0,0,0,.85);transform:rotate(20deg);transition:opacity .3s ease}
.cdh-fan i:nth-child(1),.cdh-fan i:nth-child(5){z-index:1;filter:brightness(.78)}
.cdh-fan i:nth-child(2),.cdh-fan i:nth-child(4){z-index:2;filter:brightness(.9)}
.cdh-fan i.is-c{z-index:3;width:23%}
.cdh-fan__cap{position:absolute;z-index:4;left:50%;bottom:0;transform:translateX(-50%);margin:0;display:flex;align-items:baseline;gap:12px;color:#fff;white-space:nowrap;padding:7px 14px;border-radius:999px;background:rgba(0,0,0,.62)}
.cdh-fan__cap b{font-family:var(--head,Archivo,sans-serif);font-stretch:125%;font-weight:900;font-size:clamp(15px,1.4vw,20px);text-transform:uppercase;letter-spacing:.01em}
.cdh-fan__cap small{font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#9ff1f5}

/* the little slider of colors under the copy */
.cdh-pick{position:relative;z-index:3;display:flex;align-items:center;gap:8px;padding-top:22px;padding-bottom:84px;width:100%;order:3}
.cdh-thumbs{flex:0 1 auto;min-width:0;display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
.cdh-thumbs::-webkit-scrollbar{display:none}
.ngs-v2 .cdh .cdh-t{flex:none;width:56px;height:56px;margin:0!important;padding:0!important;min-height:0!important;line-height:0!important;border:2px solid rgba(255,255,255,.28)!important;border-radius:0!important;background:#1c2123!important;overflow:hidden;cursor:pointer;box-shadow:none!important;opacity:.82;transition:opacity .15s,border-color .15s,transform .15s}
.ngs-v2 .cdh .cdh-t--tall{width:42px;height:84px}
.ngs-v2 .cdh .cdh-t--wide{width:84px;height:56px}
.ngs-v2 .cdh .cdh-t img{width:100%!important;height:100%!important;object-fit:cover;display:block;max-width:none!important}
@media(hover:hover){.ngs-v2 .cdh .cdh-t:hover{opacity:1}}
.ngs-v2 .cdh .cdh-t.is-on{opacity:1;border-color:#fff!important;outline:2px solid #00b5bd;outline-offset:1px}
.ngs-v2 .cdh .cdh-t:focus-visible{outline:3px solid #7fe9ee;outline-offset:1px}
.ngs-v2 .cdh .cdh-pa,.ngs-v2 .cdh .cdh-ar,.ngs-v2 .cdh .cdh-pause{flex:none;width:46px;height:46px;margin:0!important;padding:0!important;min-height:0!important;line-height:1!important;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(255,255,255,.55)!important;border-radius:3px!important;background:rgba(0,0,0,.35)!important;color:#fff!important;cursor:pointer;box-shadow:none!important;transition:background .15s,color .15s}
.ngs-v2 .cdh .cdh-pa{width:38px;height:56px;border-color:rgba(255,255,255,.3)!important}
.cdh-pa--prev svg,.cdh-ar--prev svg{transform:rotate(180deg)}
@media(hover:hover){.ngs-v2 .cdh .cdh-pa:hover,.ngs-v2 .cdh .cdh-ar:hover,.ngs-v2 .cdh .cdh-pause:hover{background:#fff!important;color:#12181a!important}}
.ngs-v2 .cdh .cdh-pa:active,.ngs-v2 .cdh .cdh-ar:active,.ngs-v2 .cdh .cdh-pause:active{background:#fff!important;color:#12181a!important}
.cdh-ar svg,.cdh-pa svg,.cdh-pause svg{display:block;pointer-events:none}

.cdh-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0!important;padding:0!important}
.cdh-chips li{margin:0!important;padding:8px 14px;border:1.5px solid rgba(255,255,255,.7);border-radius:999px;background:rgba(0,0,0,.3);font-weight:800;font-size:14px;line-height:1.1;color:#fff}

/* slide controls */
.cdh-nav{position:absolute;z-index:5;left:0;right:0;bottom:18px;display:flex;align-items:center;gap:10px;margin:0 auto}
/* arrows and pause sit on the left, away from the chat button and its greeting in the bottom right corner */
.cdh-bars{flex:1;min-width:0;display:flex;gap:8px;margin-left:6px}
.ngs-v2 .cdh .cdh-bar{flex:1;min-width:0;height:46px;margin:0!important;padding:0 2px!important;min-height:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:7px;text-align:left;color:#fff!important;line-height:1!important}
.cdh-bar span{display:block;font-weight:800;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.62;transition:opacity .2s}
.cdh-bar i{display:block;height:4px;background:rgba(255,255,255,.28);position:relative;overflow:hidden}
.cdh-bar i:after{content:'';position:absolute;top:0;left:0;bottom:0;width:0;background:linear-gradient(90deg,#00b5bd,#0076bd)}
.cdh-bar.is-on span{opacity:1}
@media(hover:hover){.cdh-bar:hover span{opacity:1}}
.cdh-bar.is-done i:after{width:100%}
.cdh-bar.is-on i:after{width:100%;animation:cdhbar var(--cdh-dur,8s) linear both}
/* paused: the current slide's bar stays lit so it is clear which slide this is */
.cdh.is-paused .cdh-bar.is-on i:after{animation:none;width:100%}
.cdh.is-away .cdh-bar.is-on i:after{animation-play-state:paused}
@keyframes cdhbar{from{width:0}to{width:100%}}

/* short laptop windows: tighten everything so the slide controls stay on screen */
@media(min-width:641px) and (max-height:820px){
 .ngs-v2 .v2 .v2-hero,.ngs-v2 .cdh .cdh-s{min-height:clamp(470px,calc(100vh - 170px),720px)}
 .ngs-v2 .v2 .v2-hero{padding-top:24px;padding-bottom:0}
 .ngs-v2 .v2 .v2-hero__in{padding-top:34px;padding-bottom:92px}
 .cdh-in{padding-top:24px}
 .ngs-v2 .cdh .cdh-h{font-size:clamp(28px,3.5vw,48px)}
 .cdh-card{width:clamp(190px,18vw,250px)}
 .cdh-card--wide{width:clamp(250px,24vw,330px)}
 .cdh-fan{width:clamp(320px,34vw,470px)}
 .cdh .v2-btns{margin-top:18px}
 .cdh-pick{padding-top:14px;padding-bottom:74px}
 .cdh-s--rest .cdh-cta{padding-bottom:90px}
 .cdh-nav{bottom:12px}
}
@media(max-width:900px){
 .cdh-in{gap:24px}
 .cdh-card{width:clamp(180px,26vw,240px)}
 .cdh-card--wide{width:clamp(220px,34vw,320px)}
 .cdh-fan{width:clamp(300px,44vw,420px)}
}
@media(max-width:640px){
 /* tall enough for the tallest slide, but never taller than the phone's visible screen allows */
 .ngs-v2 .v2 .v2-hero,.ngs-v2 .cdh .cdh-s{min-height:clamp(560px,calc(100vh - 112px),660px)}
 @supports(height:100svh){.ngs-v2 .v2 .v2-hero,.ngs-v2 .cdh .cdh-s{min-height:clamp(560px,calc(100svh - 112px),660px)}}
 /* the colored line is a flat color on phones (no clipped gradient), so every letter always paints */
 .ngs-v2 .cdh .cdh-s .cdh-h em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#19b6c9;-webkit-text-fill-color:#19b6c9}
 .cdh-s--rest .cdh-bg:after{background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.66) 46%,rgba(0,0,0,.12) 100%)}
 .ngs-v2 .v2 .v2-hero{padding-bottom:0}
 .ngs-v2 .v2 .v2-hero__in{padding-bottom:74px}
 .cdh-in{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:0;padding-top:20px;padding-bottom:0}
 .cdh-card,.cdh-fan{align-self:auto}
 .cdh-pick{order:2;padding-top:16px;padding-bottom:0}
 .cdh-cta,.cdh-s--rest .cdh-cta{order:3;padding-bottom:74px}
 .cdh .v2-btns{margin-top:16px;flex-wrap:nowrap}
 .cdh .v2-btns .v2-btn{white-space:nowrap;min-width:0}
 .ngs-v2 .cdh .cdh-h{font-size:30px;max-width:none}
 .ngs-v2 .cdh .cdh-s--floor .cdh-h{font-size:min(27px,calc((100vw - 36px)/12.6))}
 .ngs-v2 .cdh .cdh-s--rest .cdh-bg img{object-position:50% 50%;transform:scale(1.5);transform-origin:50% 100%}
 .cdh .v2-lede{margin-top:12px}
 .cdh-card,.cdh-card--wide{position:absolute;top:16px;right:16px;width:128px;padding:6px 6px 0;transform:rotate(4deg)}
 .cdh-card--wide{width:156px}
 .cdh-card figcaption{padding:7px 1px 8px}
 .cdh-card figcaption b{font-size:11.5px}
 .cdh-card figcaption small{display:none}
 .cdh-fan{position:absolute;top:4px;right:-22px;width:292px;padding:0 0 26px}
 .cdh-fan__cap{gap:8px;left:auto;right:30px;transform:none;padding:5px 10px}
 .cdh-fan__cap b{font-size:13px}
 .cdh-fan__cap small{font-size:9.5px}
 .cdh-bg:after{background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.74) 42%,rgba(0,0,0,.34) 100%)}
 .cdh-pick{gap:6px}
 .ngs-v2 .cdh .cdh-t{width:50px;height:50px}
 .ngs-v2 .cdh .cdh-t--tall{width:33px;height:66px}
 .ngs-v2 .cdh .cdh-t--wide{width:76px;height:50px}
 .ngs-v2 .cdh .cdh-pa{display:none}
 .cdh-thumbs{margin:0 -16px;padding:4px 16px}
 .cdh-chips{margin-top:14px!important;gap:6px}
 .cdh-chips li{font-size:13px;padding:7px 11px}
 .cdh-nav{bottom:14px;gap:8px}
 .cdh-bar span{display:none}
 .ngs-v2 .cdh .cdh-ar,.ngs-v2 .cdh .cdh-pause{width:42px;height:42px}
 .ngs-v2 .cdh .cdh-bar{height:42px}
}
@media(max-width:374px){
 .cdh .v2-btns .v2-btn{font-size:12.5px;padding:14px 6px;letter-spacing:0}
 .cdh-fan{width:232px;right:-16px}
 .cdh-card--wide{width:126px}
 .cdh-card--wide figcaption b{font-size:10px}
 .cdh-nav{gap:6px}
 .cdh-bars{gap:4px}
}
@media(prefers-reduced-motion:reduce){
 .cdh-slide,.cdh-bg img,.cdh-card__img img,.cdh-fan i{transition:none}
 .cdh-bar.is-on i:after{animation:none}
 .cdh-thumbs{scroll-behavior:auto}
}