/* Services: a product studio composition with five visual service chapters. */
body.ref-services{background:#fff;color:#1a1a1a}.ref-services .ref-main{overflow:hidden}.ref-services .ref-page-hero{min-height:clamp(610px,76vh,800px);display:flex;align-items:center;padding:105px 0 50px;background:#fff}.ref-services .ref-page-hero .ref-shell{width:min(1150px,calc(100% - 80px))}.ref-services .ref-page-hero h1{margin:54px 0 0;font-size:clamp(100px,15.5vw,220px);font-weight:500;letter-spacing:-.12em;line-height:.72}.ref-services .ref-page-hero__bottom{margin-top:55px;padding-top:21px;border-top:1px solid #dedede}.ref-services .ref-page-hero__bottom p{max-width:390px;font-size:16px;letter-spacing:-.02em}.ref-services .ref-page-hero__bottom span{font:10px "DM Mono",monospace;color:#777;letter-spacing:.08em}
.services-signal{padding:135px 0 145px;background:#f1f1ed}.services-signal .ref-shell{width:min(1150px,calc(100% - 80px))}.services-signal__meta{display:flex;justify-content:space-between;padding-bottom:22px;border-bottom:1px solid #cbcbc6;color:#6e6e6a;font:10px "DM Mono",monospace;letter-spacing:.08em}.services-signal__grid{display:grid;grid-template-columns:1.35fr .58fr;gap:8vw;align-items:end;padding-top:54px}.services-signal h2{margin:0;font-size:clamp(52px,7.2vw,108px);font-weight:500;line-height:.84;letter-spacing:-.085em}.services-signal h2 em{font-style:normal;color:#ff4b23}.services-signal__aside{display:grid;gap:30px}.services-signal__aside p{margin:0;color:#686866;font-size:16px;line-height:1.55}.services-signal__mark{position:relative;width:113px;height:113px;border:1px solid #202020;border-radius:50%;transition:transform .8s cubic-bezier(.22,1,.36,1)}.services-signal__mark:before,.services-signal__mark:after{position:absolute;content:"";inset:20px;border:1px solid #a5a5a1;border-radius:50%}.services-signal__mark:after{inset:40px;border:0;background:#ff4b23}.services-signal__mark b{position:absolute;z-index:2;top:40px;left:44px;font-weight:400;font-size:22px}.services-signal__mark i{position:absolute;z-index:1;top:55px;left:-18px;width:148px;height:1px;background:#202020;transform:rotate(-35deg)}.services-signal:hover .services-signal__mark{transform:rotate(35deg) scale(1.05)}
.ref-services .ref-service-stack{border-top:1px solid #dedede}.ref-services .ref-service-band{position:relative;display:grid;grid-template-columns:82px minmax(0,1fr) minmax(330px,.88fr);gap:clamp(28px,5vw,82px);align-items:center;min-height:600px;padding:72px max(6vw,calc((100vw - 1150px)/2));border-bottom:1px solid #dedede;background:#fff;transition:background .55s ease}.ref-services .ref-service-band:nth-child(even){background:#f8f8f6}.ref-services .ref-service-band:before{position:absolute;right:3vw;bottom:20px;z-index:0;color:#f0f0ed;font-size:clamp(160px,24vw,370px);font-weight:500;line-height:.6;letter-spacing:-.11em;content:attr(data-number)}.ref-services .ref-service-band:hover{background:#ffda26}.ref-services .ref-service-band:nth-child(2):hover{background:#ccd9a0}.ref-services .ref-service-band:nth-child(3):hover{background:#ffd0bd}.ref-services .ref-service-band:nth-child(4):hover{background:#d9d8f1}.ref-services .ref-service-band:nth-child(5):hover{background:#f3d4db}.ref-services .ref-band-index{align-self:start;padding-top:9px;color:#777;font-size:10px}.ref-services .ref-service-copy,.ref-services .ref-service-art{position:relative;z-index:1}.ref-services .ref-service-copy h2{margin:0;font-size:clamp(42px,5.1vw,76px);font-weight:500;line-height:.89;letter-spacing:-.075em}.ref-services .ref-service-copy h2 span{color:#ff4b23}.ref-services .ref-service-copy p{max-width:425px;margin:28px 0 0;color:#666;font-size:16px;line-height:1.5}.ref-services .ref-service-tags{margin-top:29px;gap:8px}.ref-services .ref-service-tags span{padding:9px 12px;border-color:#c9c9c4;border-radius:2px;background:#ffffff70;font:10px "DM Mono",monospace;letter-spacing:.01em}.ref-services .ref-service-art{min-height:365px;border:1px solid #18181822;border-radius:5px;box-shadow:14px 14px 0 #1a1a1a;transform-origin:center}.ref-services .ref-service-band:hover .ref-service-art{transform:translate(-7px,-7px) rotate(-1.1deg)}.ref-services .ref-service-art--site{background:#ff4b23}.ref-services .ref-service-art--backend{background:#1b1b1b}.ref-services .ref-service-art--admin{background:#ccd9a0}.ref-services .ref-service-art--data{background:#d9d8f1}.ref-services .ref-service-art--ux{background:#f3d4db}.ref-services .ref-wireframe,.ref-services .ref-code-card{border-radius:0}.ref-services .ref-admin-window{border-radius:3px}.ref-services .ref-data-ring{border-color:#1b1b1b}.ref-services .ref-ux-shape{border-radius:3px}
.ref-services .ref-process{padding:145px 0;background:#1a1a1a;color:#fff}.ref-services .ref-process .ref-shell,.ref-services .ref-faq .ref-shell{width:min(1150px,calc(100% - 80px))}.ref-services .ref-process__heading{display:grid;grid-template-columns:1.35fr .55fr;gap:8vw;align-items:end}.ref-services .ref-process__heading h2{margin:0;color:#fff;font-size:clamp(51px,7vw,105px);font-weight:500;line-height:.85;letter-spacing:-.085em}.ref-services .ref-process__heading h2 span{color:#ff4b23}.ref-services .ref-process__heading p{width:auto;margin:0;color:#b6b6b4;font-size:16px;line-height:1.5}.ref-services .ref-process-grid{margin-top:76px;border-top:1px solid #4a4a48}.ref-services .ref-process-step{min-height:285px;padding:22px 22px 26px;border-color:#4a4a48}.ref-services .ref-process-step:nth-child(3){border-left:1px solid #4a4a48}.ref-services .ref-process-step span{color:#a7a7a4;font:10px "DM Mono",monospace}.ref-services .ref-process-step i{height:115px;color:#ff4b23;font-style:normal;font-size:38px}.ref-services .ref-process-step h3{font-size:29px;font-weight:500;letter-spacing:-.05em}.ref-services .ref-process-step p{font-size:14px;line-height:1.5;color:#a7a7a4}.ref-services .ref-process-step:hover{background:#262626}.ref-services .ref-process-step:hover i{color:#ffda26}
.ref-services .ref-faq{padding:145px 0;background:#fff}.ref-services .ref-faq__title{margin:0 0 60px;font-size:clamp(52px,7vw,106px);font-weight:500;line-height:.84;letter-spacing:-.085em}.ref-services .ref-faq-list{border-top:1px solid #ddd}.ref-services .ref-faq-row{grid-template-columns:10% 45% 1fr 30px;gap:20px;padding:28px 0;border-color:#ddd}.ref-services .ref-faq-row span{font:10px "DM Mono",monospace;color:#777}.ref-services .ref-faq-row h3{font-size:24px;font-weight:500;letter-spacing:-.045em}.ref-services .ref-faq-row p{max-width:350px;color:#777;font-size:15px;line-height:1.5}.ref-services .ref-faq-row b{display:grid;width:37px;height:37px;border:1px solid #ccc;border-radius:50%;place-items:center;color:#ff4b23;font-weight:400;transition:transform .45s,background .45s}.ref-services .ref-faq-row:hover b{background:#ff4b23;color:#fff;transform:rotate(45deg)}
.ref-services .ref-contact{margin:20px;border-radius:32px;background:#ff4b23;color:#191919}.ref-services .ref-contact .ref-shell{width:auto;max-width:none;padding:49px clamp(32px,6vw,88px) 54px}.ref-services .ref-contact__topline{padding-top:0;padding-bottom:31px;border-bottom:1px solid #1a1a1a45;color:#1a1a1a}.ref-services .ref-contact h2{margin-top:74px;color:#1a1a1a;font-size:clamp(67px,10vw,148px);font-weight:500;line-height:.81;letter-spacing:-.09em}.ref-services .ref-contact h2 em{color:#fff}.ref-services .ref-contact__body{margin-top:62px;padding-top:28px;border-top:1px solid #1a1a1a45}.ref-services .ref-contact__body p{color:#34221e;font-size:17px}.ref-services .ref-contact__email{padding:15px 20px 15px 25px;border:0;border-radius:12px;background:#1a1a1a;color:#fff;font-size:17px}.ref-services .ref-contact__email span{display:grid;width:31px;height:31px;border-radius:50%;place-items:center;background:#ffda26;color:#1a1a1a}.ref-services .ref-contact__email:hover{transform:translateY(-4px);background:#2b2b2b}
@media(max-width:800px){.ref-services .ref-page-hero .ref-shell,.services-signal .ref-shell,.ref-services .ref-process .ref-shell,.ref-services .ref-faq .ref-shell{width:min(100% - 40px,1150px)}.ref-services .ref-service-band{grid-template-columns:48px minmax(0,1fr);gap:16px;padding:55px 28px;min-height:0}.ref-services .ref-service-art{grid-column:2;min-height:310px;margin-top:20px}.ref-services .ref-service-band:before{font-size:190px}.services-signal{padding:95px 0}.services-signal__grid,.ref-services .ref-process__heading{grid-template-columns:1fr;gap:35px}.services-signal__aside{grid-template-columns:113px 1fr;align-items:center}.ref-services .ref-process{padding:95px 0}.ref-services .ref-faq{padding:95px 0}.ref-services .ref-faq-row{grid-template-columns:42px 1fr 26px}.ref-services .ref-faq-row p{grid-column:2;max-width:420px}.ref-services .ref-faq-row b{grid-column:3;grid-row:1}.ref-services .ref-contact{margin:10px;border-radius:22px}.ref-services .ref-contact .ref-shell{padding:30px 22px 32px}}
@media(max-width:520px){.ref-services .ref-page-hero{min-height:590px}.ref-services .ref-page-hero h1{font-size:23vw}.ref-services .ref-page-hero__bottom p{font-size:13px}.services-signal{padding:75px 0}.services-signal__meta{font-size:8px}.services-signal__grid{padding-top:36px}.services-signal h2{font-size:14vw}.services-signal__aside{grid-template-columns:1fr;gap:24px}.services-signal__aside p{font-size:14px}.services-signal__mark{width:75px;height:75px}.services-signal__mark:before{inset:13px}.services-signal__mark:after{inset:29px}.services-signal__mark b{top:26px;left:29px}.services-signal__mark i{top:36px;left:-12px;width:98px}.ref-services .ref-service-band{grid-template-columns:1fr;gap:0;padding:45px 20px}.ref-services .ref-band-index{padding-bottom:30px}.ref-services .ref-service-art{grid-column:auto;min-height:240px;margin-top:22px;box-shadow:8px 8px 0 #1a1a1a}.ref-services .ref-service-copy h2{font-size:13vw}.ref-services .ref-service-copy p{margin-top:18px;font-size:14px}.ref-services .ref-service-tags{margin-top:20px}.ref-services .ref-service-tags span{font-size:8px}.ref-services .ref-process{padding:76px 0}.ref-services .ref-process__heading h2,.ref-services .ref-faq__title{font-size:14vw}.ref-services .ref-process-grid{grid-template-columns:1fr 1fr;margin-top:45px}.ref-services .ref-process-step{min-height:215px;padding:14px}.ref-services .ref-process-step:nth-child(3){border-left:1px solid #4a4a48}.ref-services .ref-process-step i{height:70px;font-size:26px}.ref-services .ref-process-step h3{font-size:19px}.ref-services .ref-process-step p{font-size:10px}.ref-services .ref-faq{padding:75px 0}.ref-services .ref-faq__title{margin-bottom:38px}.ref-services .ref-faq-row{gap:12px;padding:20px 0}.ref-services .ref-faq-row h3{font-size:16px}.ref-services .ref-faq-row p{font-size:12px}.ref-services .ref-contact h2{margin-top:54px;font-size:16vw}.ref-services .ref-contact__body{display:block;margin-top:45px}.ref-services .ref-contact__body p{margin-top:18px;font-size:14px}.ref-services .ref-contact__email{font-size:14px;justify-content:space-between;width:100%}}
@media(prefers-reduced-motion:reduce){.services-signal:hover .services-signal__mark,.ref-services .ref-service-band:hover .ref-service-art,.ref-services .ref-faq-row:hover b,.ref-services .ref-contact__email:hover{transform:none}}

.ref-services .ref-service-band:nth-child(1):before{content:"01"}.ref-services .ref-service-band:nth-child(2):before{content:"02"}.ref-services .ref-service-band:nth-child(3):before{content:"03"}.ref-services .ref-service-band:nth-child(4):before{content:"04"}.ref-services .ref-service-band:nth-child(5):before{content:"05"}