* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Inter", sans-serif; }
.services-section { min-height: 100vh; padding: 80px 24px; }
.container { max-width: 1280px; margin: 0 auto; }
.section-header { margin-bottom: 64px; }
.section-label { color: hsl(0, 0%, 45%); font-size: 14px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }
.section-title { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 600; line-height: 1.1; max-width: 600px; }
.section-title .muted { color: hsl(0,0%,45%); }
.content-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media(min-width:1024px){.content-grid{grid-template-columns:1fr 1fr; gap:80px;}}
.image-container { position: relative; aspect-ratio: 4/5; border-radius:16px; overflow:hidden; background-color:hsl(0,0%,96%); order:2; }
@media(min-width:1024px){.image-container{aspect-ratio:3/4; order:1;}}
.service-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transform:scale(1.08); transition:opacity .45s ease, transform .6s ease; z-index:1; }
.service-image.is-active{opacity:1; transform:scale(1);}
.image-overlay{position:absolute; inset:0; z-index:2; background:linear-gradient(to top, rgba(255,255,255,.45), transparent, transparent); pointer-events:none;}
.service-list{display:flex; flex-direction:column; order:1;}
@media(min-width:1024px){.service-list{order:2;}}
.service-box{position:relative; padding:24px; border-bottom:1px solid hsl(0,0%,90%); cursor:pointer; transition: background .25s ease;}
.service-box:hover{background-color:hsl(0,0%,96%);}
.service-box::before{content:""; position:absolute; left:0; top:0; height:100%; width:0; background-color:hsl(0,0%,8%); transition: width .35s ease;}
.service-box:hover::before{width:4px;}
.service-number{color:hsl(0,0%,45%); font-size:14px; font-weight:500; letter-spacing:.05em;}
.service-title{font-size:clamp(1.5rem,3vw,1.875rem); font-weight:600; color:hsl(0,0%,8%); margin-top:8px; transition: transform .25s ease;}
.service-box:hover .service-title{transform:translateX(8px);}
.service-description{color:hsl(0,0%,45%); font-size:14px; margin-top:8px; max-width:420px; line-height:1.6; opacity:0; max-height:0; overflow:hidden; transition:all .25s ease;}
.service-box:hover .service-description{opacity:1; max-height:80px;}
.arrow-indicator{position:absolute; right:24px; top:50%; transform:translateY(-50%); opacity:0; transition:opacity .25s ease;}
.service-box:hover .arrow-indicator{opacity:1;}
.arrow-indicator svg{width:24px; height:24px; color:hsl(0,0%,8%);}