:root{
  --services-dark:#090d19;
  --services-purple:#6265fe;
  --services-lila:#b6bbff;
  --services-blue:#cfe7ff;
  --services-yellow:#fffd98;
  --services-hover:#eff0ff;
  --services-line:#dfdfdf;
  --services-grey:#4b5563;
  --services-container:1245px;
  --services-gradient:conic-gradient(from 24deg at 50% 50%,#0d1527 0deg,#090d19 42deg,#4950d6 108deg,#6265fe 148deg,#fffd98 222deg,#cfe7ff 280deg,#58779b 324deg,#162235 360deg);
}
.services-page{background:#fff;color:var(--services-dark)}
.services-page *{box-sizing:border-box}
.services-container{width:min(var(--services-container),calc(100% - 48px));margin-inline:auto}
.services-intro{padding:86px 0 62px}
.services-kicker{margin:0;color:var(--services-purple);font:500 16px/1.5 "Afacad Flux",sans-serif;text-transform:uppercase;letter-spacing:.01em}
.services-intro h1{max-width:940px;margin:38px 0 0;font:500 clamp(42px,4.2vw,60px)/1.12 Montserrat,sans-serif;letter-spacing:-.045em}
.services-intro h1 strong{color:var(--services-purple);font-weight:700}
.services-intro__lead{max-width:930px;margin:46px 0 0;font:500 24px/1.45 Montserrat,sans-serif}
.services-hero-media{height:376px;overflow:hidden;background:#a87955}
.services-hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.services-list{padding:56px 0 72px}
.services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.services-card{position:relative;min-height:242px;padding:32px;border:1px solid var(--services-line);border-radius:10px;background:#fff;color:var(--services-dark);text-decoration:none;transition:background .22s ease,box-shadow .22s ease,border-color .22s ease}
.services-card:hover,.services-card:focus-visible{border:1px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--services-gradient) border-box;box-shadow:0 8px 20px rgba(9,13,25,.08);outline:none}
.services-card h2{max-width:490px;margin:0;padding-right:66px;font:600 30px/1.35 Montserrat,sans-serif;letter-spacing:-.035em;cursor:text;user-select:text}
.services-card p{margin:26px 58px 0 0;font:400 20px/1.5 "Afacad Flux",sans-serif;cursor:text;user-select:text}
.services-card__arrow{position:absolute;top:32px;right:32px;width:39px;height:39px;border-radius:8px;display:grid;place-items:center;background:var(--services-dark);color:var(--services-lila);transform:rotate(0);transform-origin:center;transition:transform .48s cubic-bezier(.22,.8,.32,1),background-color .24s ease}
.services-card:hover .services-card__arrow,.services-card:focus-visible .services-card__arrow{background:var(--services-purple);transform:rotate(90deg)}
.services-card__arrow svg{width:17px;height:17px;overflow:visible}

.services-area{padding:80px 0 92px;background:var(--services-hover)}
.services-area h2{margin:0;max-width:980px;font:500 clamp(38px,4vw,58px)/1.1 Montserrat,sans-serif;letter-spacing:-.045em}
.services-area h2 strong{color:var(--services-purple);font-weight:700}
.services-area__lead{max-width:910px;margin:34px 0 0;font:400 24px/1.48 "Afacad Flux",sans-serif;color:var(--services-dark)}
.services-area__lead strong{font-weight:600}
.services-area__layout{display:grid;grid-template-columns:304px minmax(0,1fr);gap:72px;align-items:start;margin-top:42px}
.services-towns{display:grid;grid-template-columns:max-content max-content;gap:30px 28px;align-content:start;padding-top:20px}
.services-town{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px;border:1.5px solid var(--services-purple);border-radius:11px;background:transparent;color:var(--services-dark);font:400 18px/1 "Afacad Flux",sans-serif;text-transform:uppercase;letter-spacing:0;cursor:pointer;transition:background-color .22s ease,border-radius .22s ease,border-color .22s ease}
.services-town--wide{min-width:178px}
.services-town--regular{min-width:104px}
.services-town--mid{min-width:136px}
.services-town--small{min-width:64px}
.services-town:hover,.services-town:focus-visible,.services-town.is-active{background:#fff;border-radius:0;box-shadow:none;outline:none}
.services-map{position:relative;width:100%;max-width:1030px;justify-self:end;cursor:default}
.services-map__frame{position:relative;width:100%;aspect-ratio:1434/976;isolation:isolate}
.services-map__base,.services-map__highlight{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.services-map__base{z-index:2;pointer-events:none}
.services-map__highlight{z-index:1;opacity:0;pointer-events:none;filter:drop-shadow(0 8px 10px rgba(9,13,25,.18));transition:opacity .22s ease}
.services-map__highlight.is-active{opacity:1}
.services-cta{padding:86px 0 90px;background:var(--services-dark);color:#fff;text-align:center}
.services-cta .services-kicker{text-transform:none;color:var(--services-lila)}
.services-cta h2{margin:30px 0 0;font:500 clamp(38px,3.6vw,50px)/1.25 Montserrat,sans-serif;letter-spacing:-.035em}
.services-cta h2 strong{color:var(--services-yellow);font-weight:600}
.services-cta p{max-width:720px;margin:28px auto 0;font:400 24px/1.45 "Afacad Flux",sans-serif}
.services-actions{display:flex;justify-content:center;gap:34px;margin-top:56px}
.services-page .home-footer{padding-top:64px}

@media(max-width:1080px){
  .services-area__layout{grid-template-columns:1fr;gap:42px}
  .services-map{justify-self:center;max-width:900px}
  .services-towns{padding-top:0;justify-content:flex-start}
}
@media(max-width:980px){
  .services-intro{padding-top:65px}
  .services-intro__lead{font-size:21px}
  .services-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  .services-container{width:min(100% - 32px,var(--services-container))}
  .services-intro{padding:48px 0 42px}
  .services-intro h1{margin-top:24px;font-size:42px}
  .services-intro__lead{margin-top:28px;font-size:19px;line-height:1.45}
  .services-hero-media{height:280px}
  .services-list{padding:32px 0 50px}
  .services-card{min-height:auto;padding:25px}
  .services-card h2{font-size:25px;padding-right:50px}
  .services-card p{margin:20px 0 0;font-size:18px}
  .services-card__arrow{top:24px;right:24px}
  .services-area{padding:54px 0 58px}
  .services-area h2{font-size:40px}
  .services-area__lead{margin-top:24px;font-size:20px}
  .services-area__layout{gap:34px;margin-top:32px}
  .services-towns{grid-template-columns:max-content max-content;gap:14px 14px;justify-content:start}
  .services-town{min-height:42px;padding-inline:14px;font-size:15px;border-radius:10px}
  .services-town--wide{min-width:0}
  .services-town--regular{min-width:0}
  .services-town--mid{min-width:0}
  .services-town--small{min-width:0}
  .services-cta{padding:68px 0}
  .services-cta p{font-size:20px}
  .services-actions{flex-direction:column;align-items:center;gap:14px;margin-top:38px}
}
