/* =========================================================
SERVICES PAGE
========================================================= */
.services-page{
background:#fff;
color:#171717;
overflow:hidden;
}


/* SERVICES SECTION SPACING */
.services-intro,
.services-process,
.services-solutions,
.services-capabilities,
.services-material-strip,
.services-cta{
padding:var(--dvs-section-padding) 0;
}

.services-hero{
background:#171717;
color:#fff;
padding:100px 0 90px;
}


.services-hero-grid{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
gap:90px;
align-items:center;
}
.services-hero-copy{
max-width:720px;
}
.services-eyebrow,.services-section-label{
display:flex;
align-items:center;
gap:13px;
color:#ee791f;
font-size:10px;
font-weight:700;
letter-spacing:2.5px;
text-transform:uppercase;
margin:0 0 22px;
}
.services-eyebrow span{
display:block;
width:48px;
height:2px;
background:#ee791f;
flex-shrink:0;
}
.services-hero h1{
font-family:"Manrope",sans-serif;
font-size:clamp(52px,5vw,86px);
font-weight:800;
line-height:.98;
letter-spacing:-.065em;
margin:0 0 32px;
}
.services-hero h1 em{
display:block;
color:#ee791f;
font-style:normal;
}
.services-hero-text{
max-width:650px;
color:rgba(255,255,255,.64);
font-size:17px;
line-height:1.85;
margin:0;
}
.services-hero-actions{
display:flex;
align-items:center;
gap:28px;
margin-top:40px;
}
.services-primary-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
padding:17px 25px;
background:#ee791f;
color:#fff;
font-size:11px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
text-decoration:none;
transition:.3s ease;
border-radius: 8px;
}
.services-primary-btn:hover{
background:#fff;
color:#171717;
transform:translateY(-3px);
}
.services-text-btn{
display:inline-flex;
align-items:center;
gap:9px;
color:#fff;
font-size:11px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
text-decoration:none;
transition:.3s ease;
}
.services-text-btn i{
color:#ee791f;
transition:.3s ease;
}
.services-text-btn:hover{
color:#ee791f;
}
.services-text-btn:hover i{
transform:translate(3px,-3px);
}
.services-hero-visual{
position:relative;
width:100%;
}
.services-hero-image{
position:relative;
width:100%;
height:540px;
background:#282828;
overflow:hidden;
}
.services-hero-image img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transition:transform .8s cubic-bezier(.2,.65,.3,1);
}
.services-hero-image::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(0,0,0,.28),rgba(0,0,0,.03) 65%,rgba(0,0,0,.12));
pointer-events:none;
}
.services-hero-visual:hover .services-hero-image img{
transform:scale(1.035);
}
.services-floating-card{
position:absolute;
left:-35px;
bottom:35px;
width:245px;
padding:24px;
background:#fff;
color:#171717;
box-shadow:0 25px 50px rgba(0,0,0,.3);
z-index:3;
}
.services-floating-card span{
display:block;
color:#ee791f;
font-size:9px;
font-weight:700;
letter-spacing:2px;
margin-bottom:10px;
}
.services-floating-card strong{
display:block;
font-family:"Manrope",sans-serif;
font-size:18px;
line-height:1.2;
}
.services-floating-card i{
position:absolute;
right:20px;
bottom:20px;
color:#ee791f;
}
/* =========================================================
INTRO
========================================================= */

.services-intro-grid{
display:grid;
grid-template-columns:180px minmax(0,900px);
gap:80px;
}
.services-section-number{
font-family:"Manrope",sans-serif;
font-size:110px;
line-height:.8;
font-weight:800;
letter-spacing:-.08em;
color:rgba(238,121,31,.13);
}
.services-intro-content{
max-width:900px;
}
.services-intro-content h2,.services-heading-row h2,.services-solutions-heading h2,.services-capabilities-heading h2,.services-material-strip h2,.services-cta h2{
font-family:"Manrope",sans-serif;
font-weight:800;
line-height:1.04;
letter-spacing:-.055em;
}
.services-intro-content h2{
font-size:clamp(42px,4.5vw,66px);
margin:0 0 35px;
}
.services-intro-content h2 span,.services-heading-row h2 span,.services-solutions-heading h2 span,.services-capabilities-heading h2 span,.services-material-strip h2 span,.services-cta h2 span{
color:#ee791f;
}
.services-intro-content p{
max-width:800px;
color:#626b73;
font-size:16px;
line-height:1.9;
margin:0 0 22px;
}
.services-intro-content p:last-child{
margin-bottom:0;
}
/* =========================================================
PROCESS
========================================================= */
.services-process{
background:#f5f5f3;
}
.services-heading-row{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:60px;
margin-bottom:55px;
}
.services-heading-row h2{
font-size:clamp(42px,4.5vw,64px);
margin:0;
}
.services-heading-row>p{
max-width:430px;
color:#687078;
font-size:14px;
line-height:1.8;
margin:0 0 5px;
}
.services-process-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
background:#d8d8d5;
border:1px solid #d8d8d5;
}
.services-process-card{
position:relative;
min-height:360px;
padding:35px 30px;
background:#f5f5f3;
transition:.35s;
}
.services-process-card:hover{
background:#171717;
color:#fff;
transform:translateY(-5px);
}
.services-process-number{
display:block;
color:#ee791f;
font-family:"Manrope",sans-serif;
font-size:12px;
font-weight:800;
margin-bottom:45px;
}
.services-process-icon{
display:flex;
align-items:center;
justify-content:center;
width:54px;
height:54px;
margin-bottom:35px;
border:1px solid rgba(238,121,31,.35);
color:#ee791f;
font-size:18px;
}
.services-process-card h3{
font-family:"Manrope",sans-serif;
font-size:25px;
margin:0 0 15px;
}
.services-process-card p{
color:#687078;
font-size:13px;
line-height:1.75;
margin:0;
}
.services-process-card:hover p{
color:rgba(255,255,255,.58);
}
/* =========================================================
SOLUTIONS
========================================================= */

.services-solutions-heading{
margin-bottom:55px;
}
.services-solutions-heading h2{
font-size:clamp(44px,5vw,70px);
margin:0;
}
.services-solutions-grid{
display:grid;
grid-template-columns:1.35fr 1fr 1fr;
gap:20px;
}
.service-feature-card{
position:relative;
height:570px;
background:#222;
overflow:hidden;
border-radius: 20px;
}
.service-feature-large{
height:570px;
}
.service-feature-media{
position:absolute;
inset:0;
width:100%;
height:100%;
overflow:hidden;
background:#222;
}
.service-feature-media img{
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transition:transform .8s cubic-bezier(.2,.65,.3,1);
}
.service-feature-card:hover .service-feature-media img{
transform:scale(1.06);
}
.service-feature-overlay{
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.68) 38%,rgba(0,0,0,.25) 68%,rgba(0,0,0,.05) 100%);
z-index:1;
transition:.4s ease;
}
.service-feature-card:hover .service-feature-overlay{
background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.15) 75%,rgba(0,0,0,.03) 100%);
}
.service-feature-content{
position:absolute;
left:32px;
right:32px;
bottom:30px;
color:#fff;
z-index:2;
}
.service-feature-content>span{
display:block;
color:#ee791f;
font-size:9px;
font-weight:700;
letter-spacing:2px;
}
.service-feature-content h3{
font-family:"Manrope",sans-serif;
font-size:32px;
line-height:1.05;
letter-spacing:-.04em;
margin:12px 0 15px;
}
.service-feature-large .service-feature-content h3{
font-size:43px;
}
.service-feature-content p{
max-width:390px;
color:rgba(255,255,255,.68);
font-size:13px;
line-height:1.65;
margin:0 0 22px;
}
.service-feature-content a{
display:inline-flex;
align-items:center;
gap:9px;
color:#fff;
font-size:10px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
text-decoration:none;
transition:.3s ease;
}
.service-feature-content a i{
color:#ee791f;
transition:.3s;
}
.service-feature-content a:hover{
color:#ee791f;
}
.service-feature-content a:hover i{
transform:translateX(5px);
}
/* =========================================================
CAPABILITIES
========================================================= */
.services-capabilities{
background:#fff;
}
.services-capabilities-grid{
display:grid;
grid-template-columns:minmax(300px,.75fr) minmax(0,1.25fr);
gap:110px;
align-items:start;
}
.services-capabilities-heading{
position:sticky;
top:120px;
}
.services-capabilities-heading .services-section-label{
margin-bottom:25px;
}
.services-capabilities-heading h2{
font-size:clamp(46px,4.5vw,68px);
margin:0 0 30px;
}
.services-capabilities-heading>p:not(.services-section-label){
max-width:520px;
color:#687078;
font-size:15px;
line-height:1.85;
margin:0;
}
.services-capabilities-note{
display:flex;
align-items:center;
gap:15px;
margin-top:40px;
padding-top:25px;
border-top:1px solid #ddd;
}
.services-capabilities-note-icon{
display:flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border:1px solid #ddd;
color:#ee791f;
font-size:11px;
flex-shrink:0;
}
.services-capabilities-note p{
margin:0;
color:#687078;
font-size:11px;
line-height:1.6;
}
.services-capabilities-list{
border-top:1px solid #171717;
}
.services-capability{
border-bottom:1px solid #d9d9d6;
}
.services-capability-main{
display:grid;
grid-template-columns:55px minmax(0,1fr) 125px;
gap:25px;
align-items:center;
min-height:145px;
padding:0;
transition:.3s ease;
}
.services-capability:hover .services-capability-main{
padding-left:10px;
}
.services-capability-number{
color:#ee791f;
font-family:"Manrope",sans-serif;
font-size:11px;
font-weight:800;
align-self:start;
padding-top:29px;
}
.services-capability-content h3{
font-family:"Manrope",sans-serif;
font-size:26px;
font-weight:700;
letter-spacing:-.035em;
margin:0 0 8px;
}
.services-capability-content p{
color:#687078;
font-size:13px;
line-height:1.6;
margin:0;
}
.services-capability-toggle{
display:inline-flex;
align-items:center;
justify-content:flex-end;
gap:12px;
border:0;
background:transparent;
padding:10px 0;
color:#171717;
font-family:"Manrope",sans-serif;
font-size:9px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
cursor:pointer;
}
.services-capability-toggle i{
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border:1px solid #d5d5d2;
color:#ee791f;
font-size:10px;
transition:.35s ease;
}
.services-capability-toggle span{
transition:.3s ease;
}
.services-capability.active .services-capability-toggle i{
background:#ee791f;
border-color:#ee791f;
color:#fff;
transform:rotate(180deg);
}
.services-capability.active .services-capability-toggle span{
color:#ee791f;
}
.services-capability-more{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .45s ease;
}
.services-capability-more-inner{
min-height:0;
overflow:hidden;
padding-left:80px;
padding-right:125px;
opacity:0;
transition:opacity .3s ease,padding-bottom .45s ease;
}
.services-capability.active .services-capability-more{
grid-template-rows:1fr;
}
.services-capability.active .services-capability-more-inner{
padding-bottom:30px;
opacity:1;
}
.services-capability-more-inner p{
color:#687078;
font-size:13px;
line-height:1.8;
margin:0 0 20px;
}
.services-capability-more-inner a{
display:inline-flex;
align-items:center;
gap:9px;
color:#171717;
font-size:10px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
text-decoration:none;
transition:.3s ease;
}
.services-capability-more-inner a i{
color:#ee791f;
transition:.3s ease;
}
.services-capability-more-inner a:hover{
color:#ee791f;
}
.services-capability-more-inner a:hover i{
transform:translateX(5px);
}
/* =========================================================
MATERIAL STRIP
========================================================= */
.services-material-strip{
background:#f5f5f3;
}
.services-material-strip-inner{
display:grid;
grid-template-columns:1fr 1fr;
gap:100px;
align-items:center;
}
.services-material-strip h2{
font-size:clamp(42px,4.5vw,64px);
margin:0;
}
.services-material-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.services-material-tags span{
padding:14px 18px;
background:#fff;
border:1px solid #ddd;
color:#535b61;
font-size:11px;
font-weight:700;
transition:.3s;
border-radius: 8px;
}
.services-material-tags span:hover{
border-color:#ee791f;
color:#ee791f;
transform:translateY(-3px);
}
/* =========================================================
CTA
========================================================= */
.services-cta{
background:#171717;
color:#fff;
}
.services-cta-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:70px;
}
.services-cta h2{
font-size:clamp(46px,5vw,72px);
margin:0 0 25px;
}
.services-cta p:not(.services-section-label){
max-width:650px;
color:rgba(255,255,255,.6);
font-size:15px;
line-height:1.8;
margin:0;
}
.services-cta .services-primary-btn{
flex-shrink:0;
}
/* =========================================================
LARGE LAPTOP
========================================================= */
@media(max-width:1100px){
.services-hero-grid{
grid-template-columns:1fr 420px;
gap:50px;
}
.services-hero h1{
font-size:62px;
}
.services-solutions-grid{
grid-template-columns:1fr 1fr;
}
.service-feature-large{
grid-column:1/-1;
height:500px;
}
.service-feature-card{
height:450px;
}
.services-process-grid{
grid-template-columns:repeat(2,1fr);
}
.services-capabilities-grid{
grid-template-columns:300px minmax(0,1fr);
gap:60px;
}
.services-capabilities-heading h2{
font-size:50px;
}
.services-capability-main{
grid-template-columns:45px minmax(0,1fr) 110px;
gap:18px;
}
.services-capability-more-inner{
padding-left:63px;
padding-right:110px;
}
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:991px){
.services-hero{
padding:125px 0 90px;
}
.services-hero-grid{
grid-template-columns:1fr;
gap:60px;
}
.services-hero-visual{
max-width:650px;
width:100%;
}
.services-hero-image{
height:500px;
}
.services-floating-card{
left:25px;
}

.services-intro-grid{
grid-template-columns:90px 1fr;
gap:40px;
}
.services-section-number{
font-size:70px;
}
.services-heading-row{
align-items:flex-start;
flex-direction:column;
gap:25px;
}
.services-material-strip-inner{
gap:60px;
}
.services-cta-inner{
align-items:flex-start;
flex-direction:column;
}

.services-capabilities-grid{
grid-template-columns:1fr;
gap:55px;
}
.services-capabilities-heading{
position:static;
}
.services-capabilities-heading h2{
font-size:48px;
}
.services-capabilities-heading>p:not(.services-section-label){
max-width:700px;
}
.services-capabilities-list{
width:100%;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.services-hero{
padding:105px 0 70px;
}
.services-hero h1{
font-size:48px;
letter-spacing:-.045em;
}
.services-hero-text{
font-size:15px;
}
.services-hero-actions{
align-items:flex-start;
flex-direction:column;
gap:22px;
}
.services-hero-image{
height:380px;
}
.services-hero-image img{
object-position:center;
}
.services-floating-card{
left:15px;
bottom:15px;
}

.services-intro-grid{
grid-template-columns:1fr;
gap:25px;
}
.services-section-number{
font-size:55px;
}
.services-intro-content h2{
font-size:40px;
}
.services-intro-content p{
font-size:15px;
}

.services-process-grid{
grid-template-columns:1fr;
}
.services-process-card{
min-height:300px;
}

.services-solutions-grid{
grid-template-columns:1fr;
}
.service-feature-large{
grid-column:auto;
height:450px;
}
.service-feature-card{
height:420px;
}
.service-feature-large .service-feature-content h3{
font-size:34px;
}

.services-material-strip-inner{
grid-template-columns:1fr;
gap:50px;
}

.services-cta h2{
font-size:43px;
}

.services-capabilities-grid{
grid-template-columns:1fr;
gap:45px;
}
.services-capabilities-heading{
position:static;
}
.services-capabilities-heading h2{
font-size:42px;
letter-spacing:-.05em;
}
.services-capabilities-heading>p:not(.services-section-label){
font-size:14px;
}
.services-capability-main{
grid-template-columns:38px minmax(0,1fr) 40px;
gap:14px;
min-height:95px;
}
.services-capability-number{
font-size:10px;
padding-top:24px;
}
.services-capability-content h3{
font-size:17px;
}
.services-capability-content p{
font-size:10px;
line-height:1.5;
}
.services-capability-toggle{
padding:10px 0;
}
.services-capability-toggle span{
display:none;
}
.services-capability-toggle i{
width:38px;
height:38px;
}
.services-capability.active .services-capability-main{
padding-left:10px;
}
.services-capability-more-inner{
padding-left:52px;
padding-right:15px;
}
.services-capability.active .services-capability-more-inner{
padding-left:52px;
padding-right:15px;
padding-bottom:28px;
}
.services-capability-more-inner p{
font-size:12px;
line-height:1.75;
}
.services-capabilities-note{
margin-top:30px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:575px){
.services-hero{
padding-top:95px;
}
.services-hero h1{
font-size:42px;
}
.services-hero-image{
height:320px;
}
.services-floating-card{
width:220px;
padding:20px;
}
.services-heading-row h2,.services-solutions-heading h2,.services-capabilities-heading h2,.services-material-strip h2{
font-size:38px;
}
.service-feature-card,.service-feature-large{
height:380px;
}
.service-feature-content{
left:24px;
right:24px;
bottom:24px;
}
.service-feature-content h3{
font-size:27px;
}
.service-feature-large .service-feature-content h3{
font-size:31px;
}

.services-capabilities-heading h2{
font-size:38px;
}
.services-capabilities .services-section-label{
font-size:9px;
letter-spacing:2px;
}
.services-capability-main{
grid-template-columns:30px minmax(0,1fr) 38px;
gap:11px;
}
.services-capability-content h3{
font-size:15px;
}
.services-capability-content p{
font-size:9px;
}
.services-capability-toggle i{
width:34px;
height:34px;
font-size:9px;
}
.services-capability-more-inner{
padding-left:41px!important;
}
.services-capability.active .services-capability-more-inner{
padding-bottom:25px;
}
.services-capability-more-inner p{
font-size:11px;
}
}