.services-page{overflow:hidden}
.services-page h1,.services-page h2{font-family:var(--display-font),Arial,sans-serif;font-weight:760;text-transform:uppercase;letter-spacing:-.025em}
.services-page h1 em,.services-page h2 em{font-style:normal;color:var(--azure)}
.services-page section[id]{scroll-margin-top:96px}

.services-hero{display:grid;grid-template-columns:minmax(0,52%) minmax(0,48%);min-height:min(790px,calc(100svh - 110px));background:#fff}
.services-hero__copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;padding:clamp(60px,6vw,110px) clamp(32px,5vw,100px) clamp(70px,6vw,110px) var(--page-gutter)}
.services-hero__copy .eyebrow{color:#278fca}
.services-hero h1{max-width:100%;margin:clamp(55px,7vw,105px) 0 42px;font-size:clamp(86px,9vw,170px);line-height:.82}
.services-hero__copy>p:not(.eyebrow){max-width:610px;margin:0;font-size:clamp(20px,1.7vw,27px);line-height:1.46}
.services-hero__media{position:relative;min-height:600px;overflow:hidden;background:var(--glass)}
.services-hero__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:57% center;transform:scale(1.09);transition:transform 1.6s cubic-bezier(.19,1,.22,1)}
.services-hero__media.is-visible>img{transform:scale(1)}
.services-hero__frame{--tilt-x:0deg;--tilt-y:0deg;position:absolute;inset:10% 12%;z-index:1;transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transform-style:preserve-3d;transition:transform .55s cubic-bezier(.19,1,.22,1);pointer-events:none}
.services-hero__frame::before{content:"";position:absolute;inset:0;border:3px solid #fff;box-shadow:0 0 0 1px rgba(32,46,69,.17)}
.services-hero__sash{position:absolute;top:0;bottom:0;width:50%;border:2px solid rgba(255,255,255,.88);transform-origin:0 50%;transition:transform 1.25s .2s cubic-bezier(.19,1,.22,1)}
.services-hero__sash--left{left:0;transform-origin:left center}
.services-hero__sash--right{right:0;transform-origin:right center}
.services-hero__media.is-visible .services-hero__sash--left{transform:perspective(850px) rotateY(-14deg)}
.services-hero__media.is-visible .services-hero__sash--right{transform:perspective(850px) rotateY(14deg)}
.services-hero__frame i{position:absolute;top:46%;left:49%;width:4px;height:10%;background:#fff;box-shadow:8px 0 0 #fff}
.services-hero__caption{position:absolute;bottom:0;right:0;z-index:2;background:var(--azure);color:#fff;padding:17px 23px;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}

.services-link{display:inline-grid;grid-template-columns:auto 58px;align-items:center;gap:26px;margin-top:44px;padding-left:23px;min-height:58px;border:1px solid currentColor;font-size:14px;font-weight:750;transition:transform .3s,box-shadow .3s,background .3s,color .3s}
.services-link>span{display:grid;place-items:center;min-height:58px;border-left:1px solid currentColor;font-size:25px;font-weight:400;transition:transform .3s}
.services-link:hover,.services-link:focus-visible{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--azure);background:var(--azure);color:#fff}
.services-link:hover>span,.services-link:focus-visible>span{transform:translate(3px,-3px)}
.service-feature--aluminium .services-link:hover,.service-feature--outdoor .services-link:hover,.services-guide .services-link:hover{background:#fff;color:var(--navy);box-shadow:8px 8px 0 rgba(255,255,255,.35)}

.services-jump{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--azure);color:#fff;border-top:1px solid rgba(255,255,255,.7)}
.services-jump a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:27px var(--page-gutter);min-height:90px;border-right:1px solid rgba(255,255,255,.42);font-size:15px;font-weight:750;transition:background .3s,color .3s}
.services-jump a:last-child{border-right:0}.services-jump a:hover,.services-jump a:focus-visible{background:#fff;color:var(--navy)}
.services-jump a span{font-size:23px;font-weight:400;transition:transform .3s}.services-jump a:hover span{transform:translate(3px,3px)}

.services-intro{position:relative;isolation:isolate;min-height:720px;padding:clamp(115px,11vw,190px) var(--page-gutter) clamp(130px,12vw,210px);background:#fff;overflow:hidden}
.services-intro>.eyebrow,.services-intro>h2,.services-intro>p:last-child{position:relative;z-index:1}
.services-intro h2{max-width:1000px;margin:55px 0 48px;font-size:clamp(105px,11.5vw,215px);line-height:.79}
.services-intro>p:last-child{max-width:780px;margin:0 0 0 auto;font-size:clamp(21px,2vw,31px);line-height:1.46}
.services-intro__drawing{position:absolute;right:-7%;top:8%;width:43%;height:84%;opacity:.15;color:var(--azure);pointer-events:none;transform:perspective(900px) rotateY(-30deg);transition:transform 1.6s cubic-bezier(.19,1,.22,1)}
.services-intro:has(.is-visible) .services-intro__drawing{transform:perspective(900px) rotateY(0)}
.services-intro__drawing::before{content:"";position:absolute;inset:0;border:3px solid currentColor;box-shadow:inset 0 0 0 16px #fff,inset 0 0 0 19px currentColor}
.services-intro__drawing::after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:3px solid currentColor}
.services-intro__drawing span:first-child{position:absolute;top:50%;left:0;right:0;border-top:3px solid currentColor}
.services-intro__drawing span:last-child{position:absolute;top:46%;left:48%;height:11%;border-left:6px solid currentColor}

.service-feature{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:720px}
.service-feature__copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;padding:clamp(70px,7vw,135px) clamp(48px,6vw,120px) clamp(80px,7vw,135px) var(--page-gutter)}
.service-feature__copy .eyebrow{color:inherit;opacity:.75}
.service-feature h2{max-width:770px;margin:50px 0 42px;font-size:clamp(89px,8.4vw,165px);line-height:.84}
.service-feature__copy>p:not(.eyebrow){max-width:610px;margin:0 0 23px;font-size:clamp(18px,1.5vw,24px);line-height:1.55}
.service-feature__copy .services-link{margin-top:33px}
.service-feature__media{position:relative;min-width:0;min-height:620px;margin:0;overflow:hidden;background:var(--glass)}
.service-feature__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.55s cubic-bezier(.19,1,.22,1)}
.service-feature__media.is-visible img{transform:scale(1)}
.service-feature__frame{position:absolute;inset:8%;z-index:1;border:2px solid rgba(255,255,255,.95);pointer-events:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s .22s cubic-bezier(.19,1,.22,1)}
.service-feature__media.is-visible .service-feature__frame{clip-path:inset(0)}
.service-feature__frame::before{content:"";position:absolute;top:0;bottom:0;left:52%;border-left:2px solid #fff}
.service-feature__frame::after{content:"";position:absolute;left:49%;top:46%;height:10%;border-left:5px solid #fff}
.service-feature__media figcaption{position:absolute;z-index:2;right:0;bottom:0;max-width:85%;padding:17px 24px;background:#fff;color:var(--navy);font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.07em}
.service-feature--aluminium{background:var(--navy);color:#fff}.service-feature--aluminium h2 em{color:var(--azure)}
.service-feature--pvc{background:var(--glass)}.service-feature--pvc .service-feature__copy{padding-left:clamp(48px,6vw,120px);padding-right:var(--page-gutter)}
.service-feature--pvc .service-feature__media figcaption{right:auto;left:0;background:var(--azure);color:#fff}
.service-feature--outdoor{background:var(--azure);color:#fff}.service-feature--outdoor h2 em{color:var(--navy)}
.service-feature--outdoor .service-feature__media img{object-position:46% center}

.services-process{display:grid;grid-template-columns:48% 52%;min-height:720px;background:#fff}
.services-process__media{position:relative;min-height:600px;overflow:hidden;background:var(--glass)}
.services-process__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.5s cubic-bezier(.19,1,.22,1)}
.services-process__media.is-visible img{transform:scale(1)}
.services-process__frame{position:absolute;inset:9%;border:2px solid #fff;box-shadow:0 0 0 12px rgba(255,255,255,.13);pointer-events:none}
.services-process__copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(80px,8vw,145px) var(--page-gutter) clamp(80px,8vw,145px) clamp(50px,7vw,135px)}
.services-process__copy .eyebrow{color:#278fca}.services-process h2{margin:48px 0 40px;font-size:clamp(86px,8.6vw,165px);line-height:.83}
.services-process__copy>p:not(.eyebrow){max-width:600px;margin:0;font-size:clamp(19px,1.6vw,25px);line-height:1.55}

.services-guide{position:relative;isolation:isolate;min-height:730px;display:flex;align-items:center;padding:clamp(100px,10vw,175px) var(--page-gutter);overflow:hidden;background:var(--navy);color:#fff}
.services-guide__copy{position:relative;z-index:1;max-width:850px}.services-guide h2{margin:46px 0 37px;font-size:clamp(98px,11vw,210px);line-height:.8}
.services-guide__copy>p:not(.eyebrow){max-width:610px;margin:0;font-size:clamp(19px,1.6vw,26px);line-height:1.5}
.services-guide__drawing{position:absolute;right:-5%;top:11%;width:53%;height:78%;color:var(--azure);opacity:.45;pointer-events:none;transform:perspective(1200px) rotateY(-22deg);transition:transform 1.5s cubic-bezier(.19,1,.22,1)}
.services-guide:has(.is-visible) .services-guide__drawing{transform:perspective(1200px) rotateY(0)}
.services-guide__drawing::before{content:"";position:absolute;inset:0;border:3px solid currentColor;box-shadow:inset 0 0 0 16px var(--navy),inset 0 0 0 19px currentColor}
.services-guide__drawing::after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:3px solid currentColor}
.services-guide__drawing span:first-child{position:absolute;left:0;right:0;top:50%;border-top:3px solid currentColor}.services-guide__drawing span:last-child{position:absolute;left:50%;top:45%;height:12%;border-left:6px solid currentColor}.services-guide__drawing i{position:absolute;inset:10%;border:2px solid currentColor}

.js .services-page [data-reveal="copy"]{opacity:0;transform:translateY(44px);transition:opacity .8s ease,transform 1s cubic-bezier(.19,1,.22,1)}
.js .services-page [data-reveal="copy"].is-visible{opacity:1;transform:translateY(0)}
.js .services-page [data-reveal="visual"]{opacity:0;clip-path:inset(9% 0 0 0);transition:opacity .9s ease,clip-path 1.1s cubic-bezier(.19,1,.22,1)}
.js .services-page [data-reveal="visual"].is-visible{opacity:1;clip-path:inset(0)}

@media(max-width:1000px){.services-hero h1{font-size:clamp(83px,9vw,125px)}.service-feature h2,.services-process h2{font-size:clamp(83px,9vw,125px)}.service-feature__copy>p:not(.eyebrow){font-size:19px}.services-jump a{padding-inline:24px}}
@media(max-width:760px){
  .services-hero,.service-feature,.services-process{display:flex;flex-direction:column;min-height:0}
  .services-hero__copy{min-height:570px;padding:55px 22px 75px}.services-hero h1{margin:95px 0 34px;font-size:clamp(82px,17vw,130px)}.services-hero__copy>p:not(.eyebrow){font-size:20px}
  .services-hero__media{min-height:440px;height:440px}.services-hero__frame{inset:8% 11%}
  .services-jump{grid-template-columns:1fr}.services-jump a{min-height:68px;padding:19px 22px;border-right:0;border-bottom:1px solid rgba(255,255,255,.42)}
  .services-intro{min-height:0;padding:105px 22px 125px}.services-intro h2{font-size:clamp(92px,17vw,145px);margin:45px 0 48px}.services-intro>p:last-child{font-size:20px}.services-intro__drawing{width:90%;right:-45%;top:17%;opacity:.11}
  .service-feature__copy,.service-feature--pvc .service-feature__copy{padding:100px 22px 105px}.service-feature h2{font-size:clamp(82px,16vw,128px);margin:43px 0 38px}.service-feature__copy>p:not(.eyebrow){font-size:18px}
  .service-feature__media{width:100%;min-height:450px;height:450px}.service-feature--pvc .service-feature__media{order:2}.service-feature--pvc .service-feature__copy{order:1}
  .services-process__media{min-height:430px;height:430px}.services-process__copy{padding:100px 22px 110px}.services-process h2{font-size:clamp(82px,16vw,125px)}.services-process__copy>p:not(.eyebrow){font-size:19px}
  .services-guide{min-height:690px;padding:110px 22px 120px}.services-guide h2{font-size:clamp(86px,17vw,140px)}.services-guide__drawing{width:100%;right:-52%;opacity:.25}
}
@media(max-width:430px){.services-hero h1{font-size:clamp(74px,17vw,92px)}.services-hero__copy{min-height:550px}.services-hero__media{min-height:340px;height:340px}.services-intro h2,.service-feature h2,.services-process h2,.services-guide h2{font-size:clamp(74px,17vw,100px)}.service-feature__media,.services-process__media{height:340px;min-height:340px}.services-link{font-size:12px;grid-template-columns:auto 52px;gap:15px;padding-left:15px}.services-link>span{min-height:54px}.services-guide{min-height:610px}}
@media(prefers-reduced-motion:reduce){.js .services-page [data-reveal="copy"],.js .services-page [data-reveal="visual"]{opacity:1;transform:none;clip-path:none;transition:none}.services-hero__media img,.service-feature__media img,.services-process__media img{transform:none!important;transition:none}.services-hero__frame,.services-hero__sash,.services-intro__drawing,.service-feature__frame,.services-guide__drawing{transform:none!important;transition:none}.service-feature__frame{clip-path:none}}