/* css/services.css — Red 'Our Services' section. */

/* =============================================================
   4c. SERVICES — red section, white text
   ============================================================= */
.services{padding:clamp(4rem,9vw,9rem) 5vw;background:var(--services-bg);color:#fff}
.sv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(2.5rem,6vw,5rem)}
.sv-head .l span{font-size:var(--h2-size)}
.sv-head .l sup{color:#fff}
.sv-head p{max-width:22rem;padding-bottom:1rem;opacity:.9}
.sv-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(1.5rem,3vw,3rem)}
.svc{position:relative;padding:1.8rem 0 clamp(2.5rem,4vw,3.5rem);border-top:1px solid rgba(255,255,255,.35)}
.svc::before{content:"";position:absolute;inset:-1px 0 auto;height:2px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.svc:hover::before{transform:scaleX(1)}
.svc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.svc-num{font-weight:500;opacity:.8}
.svc-icon{display:grid;place-items:center;width:3.4rem;height:3.4rem;border:1px solid rgba(255,255,255,.5);border-radius:50%;transition:background .35s,color .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
.svc-icon svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc:hover .svc-icon{background:#fff;color:var(--services-bg);transform:rotate(-8deg) scale(1.08)}
.svc h3{margin-bottom:.8rem;font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:800;line-height:1.05;letter-spacing:-.035em;transition:transform .4s}
.svc:hover h3{transform:translateX(.35rem)}
.svc p{max-width:30rem;opacity:.9}
@media(max-width:1024px){.sv-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.sv-grid{grid-template-columns:1fr}.sv-head{flex-direction:column;align-items:flex-start}.sv-head p{padding:0}}