.services{--paper:#f5f6f9;--ink:#11171f;--muted:#606872;--accent:#5865f2;--ease:cubic-bezier(.22,1,.36,1);--service-duration:.66s;color-scheme:light;background:var(--paper);color:var(--ink);position:relative;padding:64px 0 64px}
.service-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:34px}
.services-title{font-size:clamp(36px,3.6vw,52px);font-weight:400;line-height:1.06;letter-spacing:-.05em;margin:0;text-wrap:balance}
.service-intro>p{font-size:16px;line-height:1.5;color:var(--muted);margin:0 0 4px;max-width:350px}
.has-service-scroll .services-stage{position:sticky;top:var(--service-stage-top,24px)}
.gallery{display:flex;gap:10px;height:clamp(530px,calc(100svh - 210px),650px)}
.service-card{position:relative;isolation:isolate;flex:0 0 112px;min-width:0;border-radius:18px;overflow:hidden;background:#0c1320 center 30% / cover;color:#fff;transition:flex-grow var(--service-duration) var(--ease)}
.service-card.is-active{flex-grow:1}
.service-card>img,.service-composition>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;pointer-events:none}
.service-card::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 30%,#070e1c55 66%,#070e1cf2 100%);pointer-events:none}
.service-composition{position:absolute;inset:0 auto 0 0;z-index:4;width:var(--service-content-width,520px);height:100%;background:#0c1320;opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;transition:opacity var(--service-duration) var(--ease),transform var(--service-duration) var(--ease),visibility var(--service-duration)}
.service-composition::after,body:not(.is-enhanced) .service-card::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 12%,#0c132045 28%,#0c1320ed 53%,#0c1320 76%);pointer-events:none}
.is-active .service-composition{opacity:1;visibility:visible;transform:none}
.service-select{position:absolute;inset:0;z-index:3;width:100%;padding:0;border:0;background:none;text-align:left;border-radius:inherit}
.service-select:focus-visible{z-index:5;outline:2px solid #a9b0ff;outline-offset:-5px}
.card-label{position:absolute;bottom:28px;left:10px;right:10px;font-size:14px;font-weight:400;white-space:nowrap;line-height:1.3;color:white;transition:opacity .2s .3s}
.is-active .card-label{opacity:0;transition-delay:0s}
.card-action{position:absolute;top:16px;right:14px;width:32px;height:32px;display:grid;place-items:center;border:1px solid #ffffff6b;border-radius:50%;color:white;background:#070d2229;transition:opacity .25s}
.card-action .icon{width:18px;height:18px}
.is-active .card-action{opacity:0}
.service-panel{position:absolute;z-index:4;bottom:0;left:0;width:100%;padding:30px;pointer-events:none}
.is-active .service-panel{pointer-events:auto}
.service-panel h3{font-size:30px;line-height:1.12;font-weight:400;letter-spacing:-.035em;margin:0 0 18px;text-wrap:pretty}
.service-panel p{font-size:16px;line-height:1.55;margin:0;color:#c4cbd6;text-wrap:pretty}
.service-panel ul{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.service-panel li{font-size:13px;line-height:1.4;padding:8px 10px;border:1px solid #ffffff24;border-radius:7px;background:#ffffff09;color:#e1e5ed}
@media(hover:hover){.service-select:hover .card-action{background:#ffffff25}}
@media(min-width:1101px) and (max-width:1280px){.service-card{flex-basis:108px}.service-panel{padding:26px}.service-panel h3{font-size:28px}.service-intro>p{max-width:290px}.service-intro>p br{display:none}}
@media(max-width:1100px){
  .services{padding:54px 0 40px}
  .services-stage.wrap{width:100%;max-width:none}
  .service-intro{display:block;margin:0 var(--gutter) 30px}
  .services-title{font-size:clamp(34px,5vw,46px);line-height:1.1;max-width:660px}
  .service-intro>p{font-size:16px;margin-top:20px;max-width:440px}.service-intro>p br{display:none}
  .gallery{gap:12px;height:auto;padding:0 var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .gallery::-webkit-scrollbar{display:none}
  .service-card,.service-card.is-active{flex:0 0 min(560px,calc(100vw - var(--gutter)*2 - 20px));display:flex;flex-direction:column;scroll-snap-align:start;scroll-snap-stop:always;transition:none}
  .service-composition,.is-active .service-composition{position:relative;inset:auto;flex:1;width:100%;height:auto;opacity:1;visibility:visible;transform:none;transition:none}
  .service-card>img,.service-composition>img{height:300px;object-position:center}
  .service-card::after,.service-composition::after{height:302px;bottom:auto;background:linear-gradient(180deg,transparent 45%,#0c132080 75%,#0c1320 100%)}
  .service-select{height:230px;bottom:auto}
  .card-label,.card-action{display:none}
  .service-panel,.is-active .service-panel{position:relative;width:auto;padding:0 24px 28px;margin-top:240px;pointer-events:auto}
  .service-panel h3{font-size:28px;margin-bottom:18px}.service-panel h3 br{display:none}
  .service-panel p{font-size:16px;line-height:1.55}
}
@media(max-width:420px){.service-panel h3{font-size:26px}.service-panel{padding-inline:22px}.service-panel ul{gap:7px}.service-panel li{font-size:12px;padding:8px}}
@media(max-width:760px){
  .service-intro{margin-bottom:24px}
  .services-title{font-size:30px;line-height:1.13}
  .service-intro>p{font-size:15px;margin-top:16px}
  .service-card>img,.service-composition>img{height:236px}
  .service-card::after,.service-composition::after{height:238px}
  .service-select{height:172px}
  .service-panel,.is-active .service-panel{margin-top:176px;padding:0 20px 24px}
  .service-panel h3{font-size:24px;line-height:1.15;margin-bottom:14px}
  .service-panel p{font-size:15px;line-height:1.55}
  .service-panel ul{gap:6px;margin-top:18px}
  .service-panel li{font-size:12px;padding:7px 8px}
}
@media(prefers-reduced-motion:reduce){.service-card,.service-composition,.card-label{transition:none;transform:none}}
body:not(.is-enhanced) .gallery{height:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
body:not(.is-enhanced) .service-card{display:flex;align-items:flex-end;min-height:620px}
body:not(.is-enhanced) .service-panel{position:relative;width:auto;opacity:1;visibility:visible;transform:none}
body:not(.is-enhanced) .service-select{display:none}