:root{
  --services-dark:#031326;
  --services-dark-2:#082c48;
  --services-ink:#09213b;
  --services-cyan:#39deef;
  --services-muted:#6da7b7;
  --services-paper:#eef5f7;
}

.services-page{color:var(--services-ink);background:var(--services-paper)}
.services-page .portfolio-depth{opacity:.38}
.services-page .services-hero-grid{z-index:3}
.services-hero-copy>p:not(.eyebrow){max-width:610px}
.services-hero-actions{display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.services-hero-actions .text-link{color:#d9edf4}
.services-page .services-hero-actions .text-link:after{display:none!important}
.services-hero-actions .text-link-label{position:relative;margin-left:0!important;color:inherit!important}
.services-hero-actions .text-link-label:after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-7px;
  height:1px;
  background:var(--services-cyan);
  box-shadow:0 0 9px rgba(57,222,239,.72);
  transition:right .25s ease;
}
@media(hover:hover){.services-hero-actions .text-link:hover .text-link-label:after{right:0}}

.services-map{min-height:470px;padding:0;isolation:isolate}
.services-map:after{display:none}
.services-map:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(rgba(73,205,224,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(73,205,224,.045) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:linear-gradient(#000,transparent 96%);
  mask-image:linear-gradient(#000,transparent 96%);
}
.services-map-head,.services-map-foot{
  position:absolute;
  z-index:8;
  left:20px;
  right:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#81adba;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
}
.services-map-head{top:18px;padding-bottom:12px;border-bottom:1px solid rgba(91,224,239,.17)}
.services-map-head b{color:#7aeaf3;font:inherit}
.services-map-head i,.services-map-foot i{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--services-cyan);box-shadow:0 0 12px var(--services-cyan)}
.services-map-foot{bottom:17px;padding-top:12px;border-top:1px solid rgba(91,224,239,.17)}
.services-map-foot span{color:#63dce8}
.services-map-foot b{font:inherit}
.services-map-radar{
  position:absolute;
  left:50%;
  top:50%;
  width:318px;
  height:318px;
  border:1px solid rgba(73,219,237,.18);
  border-radius:50%;
  background:conic-gradient(from 215deg,transparent 0 68%,rgba(42,219,235,.11) 78%,transparent 88%);
  transform:translate(-50%,-50%);
  animation:services-scan 10s linear infinite;
}
.services-map-radar:before,.services-map-radar:after,.services-map-radar>i{content:"";position:absolute;border:1px solid rgba(73,219,237,.14);border-radius:50%}
.services-map-radar:before{inset:19%}
.services-map-radar:after{inset:38%}
.services-map-radar>i:nth-child(1){display:none}
.services-map-radar>i:nth-child(2){left:50%;top:7%;bottom:7%;width:1px;border:0;border-radius:0;background:rgba(73,219,237,.1)}
.services-map-radar>i:nth-child(3){left:7%;right:7%;top:50%;height:1px;border:0;border-radius:0;background:rgba(73,219,237,.1)}
.services-map-core{
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  display:grid;
  width:116px;
  height:116px;
  place-items:center;
  grid-template-rows:auto auto;
  align-content:center;
  row-gap:13px;
  border:1px solid rgba(97,228,240,.48);
  border-radius:50%;
  color:#dfffff;
  background:linear-gradient(145deg,#073653,#031d32);
  box-shadow:0 0 0 12px rgba(57,222,239,.035),0 0 28px rgba(57,222,239,.12);
  text-align:center;
  transform:translate(-50%,-50%);
}
.services-map-core b{font-size:39px;line-height:.8;transform:translateY(3px)}
.services-map-core small{margin-top:0;color:#82c1cc;font-size:8px;font-weight:800;line-height:1.35;letter-spacing:.1em}
.services-map-point{
  position:absolute;
  z-index:6;
  display:flex;
  width:228px;
  min-height:82px;
  align-items:center;
  gap:16px;
  padding:12px 16px;
  border:1px solid rgba(89,215,231,.26);
  border-radius:16px;
  color:#e6fcff;
  background:rgba(4,34,55,.9);
  box-shadow:0 15px 30px rgba(0,0,0,.22);
  text-decoration:none;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.services-map-point:after{content:"";position:absolute;width:34px;height:1px;background:linear-gradient(90deg,rgba(70,221,233,.56),transparent)}
.services-map-point img{
  width:57px;
  height:57px;
  object-fit:contain;
  opacity:.82;
  filter:drop-shadow(0 0 7px rgba(57,222,239,.12));
}
.services-map-point span{display:grid;gap:3px}
.services-map-point small{color:#55dce8;font-size:9px;font-weight:800;letter-spacing:.11em}
.services-map-point b{font-size:15px}
.services-map-analytics{left:18px;top:82px}
.services-map-development{right:18px;top:82px}
.services-map-ads{left:18px;bottom:80px}
.services-map-automation{right:18px;bottom:80px}
.services-map-ads img{transform:scale(.94)}
.services-map-automation img{transform:scale(1.08)}
.services-map-analytics:after,.services-map-ads:after{left:100%;top:50%}
.services-map-development:after,.services-map-automation:after{right:100%;top:50%;transform:rotate(180deg)}

.services-directions{padding:94px 0 112px;background:var(--services-paper)}
.services-directions-head{margin-bottom:48px}
.services-kicker{display:flex;align-items:center;gap:12px;margin:0 0 20px;color:#1694aa;font-size:11px;font-weight:800;letter-spacing:.16em}
.services-kicker>span{width:31px;height:1px;background:currentColor}
.services-directions-head>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.46fr);gap:70px;align-items:end}
.services-directions-head h2{margin:0;font-size:clamp(45px,5vw,70px);font-weight:500;line-height:1;letter-spacing:-.06em}
.services-directions-head h2 em{color:var(--services-muted);font-style:normal;font-weight:500}
.services-directions-head>div>p{margin:0 0 4px;padding-left:22px;border-left:2px solid var(--services-muted);color:#617987;font-size:15px;line-height:1.65}
.direction-list{display:grid;gap:26px}
.direction{
  display:grid;
  min-height:500px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  background:transparent;
}
.direction-visual-right .direction-main{order:2}
.direction-visual-right .direction-subservices{order:1}
.direction-main{
  --direction-art-size:240px;
  --direction-art-right:5%;
  --direction-art-top:8%;
  --direction-ring-y-adjust:0px;
  position:relative;
  display:flex;
  min-width:0;
  flex-direction:column;
  overflow:hidden;
  padding:32px 38px 38px;
  border:1px solid rgba(63,186,209,.26);
  border-radius:34px;
  color:#fff;
  background:radial-gradient(circle at 75% 28%,rgba(22,133,169,.36),transparent 34%),linear-gradient(150deg,#06243e,#031326 76%);
  box-shadow:0 24px 56px rgba(5,38,62,.16),inset 0 1px rgba(137,235,244,.08);
}
.direction-main:before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-radial-gradient(circle at calc(100% - var(--direction-art-right) - var(--direction-art-size)/2) calc(var(--direction-art-top) + var(--direction-art-size)/2 + var(--direction-ring-y-adjust)),transparent 0 55px,rgba(81,211,230,.045) 56px 57px);
  pointer-events:none;
}
.direction-main>*{position:relative;z-index:2}
.direction-number{color:#6dcbd8;font-size:11px;font-weight:800;letter-spacing:.12em}
.direction-art{position:absolute;z-index:1;right:var(--direction-art-right);top:var(--direction-art-top);display:grid;width:var(--direction-art-size);height:var(--direction-art-size);place-items:center}
.direction-art:before{
  content:"";
  position:absolute;
  inset:12%;
  border:1px solid rgba(80,225,237,.18);
  border-radius:50%;
  box-shadow:0 0 0 38px rgba(80,225,237,.025),0 0 0 76px rgba(80,225,237,.018);
}
.direction-art:after{
  content:"";
  position:absolute;
  inset:27%;
  z-index:1;
  border-radius:50%;
  background:conic-gradient(from 20deg,transparent 0 68%,rgba(94,232,242,.32) 80%,transparent 91%);
  -webkit-mask:radial-gradient(circle,transparent 0 69%,#000 70% 73%,transparent 74%);
  mask:radial-gradient(circle,transparent 0 69%,#000 70% 73%,transparent 74%);
  animation:direction-scan 8s linear infinite;
}
.direction-art img{position:relative;z-index:2;width:142px;height:142px;object-fit:contain;filter:drop-shadow(0 0 22px rgba(57,222,239,.25));animation:direction-pulse 5s ease-in-out infinite}
.direction-art-development img{width:153.36px;height:153.36px}
.direction-art-analytics img{top:-3px;width:183.04px;height:183.04px}
#analytics .direction-main{--direction-ring-y-adjust:-3px}
.direction-main-copy{margin-top:auto;max-width:460px}
.direction-main-copy h3{margin:0;font-size:clamp(38px,3.5vw,54px);font-weight:500;line-height:1;letter-spacing:-.055em}
.direction-main-copy h3 a{color:inherit;text-decoration:none;transition:color .22s ease,text-shadow .22s ease}
.direction-main-copy h3 em{color:var(--services-cyan);font-style:normal;font-weight:500}
.direction-main-copy p{max-width:480px;margin:20px 0 23px;color:#aac4ce;font-size:14px;line-height:1.65}
.direction-main-copy>a{display:inline-flex;align-items:center;gap:10px;color:#89edf4;font-size:12px;font-weight:800;text-decoration:none}
.direction-main-copy>a span{font-size:17px;transition:transform .2s ease}
.direction-subservices{display:grid;grid-template-rows:repeat(4,1fr);padding:27px 34px;border:1px solid #c6dce2;border-radius:34px;background:linear-gradient(145deg,#fff 0%,#f7fbfc 62%,#edf7f9 100%);box-shadow:0 20px 46px rgba(15,62,80,.09),inset 0 1px rgba(255,255,255,.9)}
.direction-subservices>a{
  position:relative;
  display:grid;
  min-width:0;
  grid-template-columns:42px minmax(0,1fr) 24px;
  gap:14px;
  align-items:center;
  border-bottom:1px solid #ccdee3;
  color:var(--services-ink);
  text-decoration:none;
  transition:padding .22s ease,color .22s ease,background .22s ease;
}
.direction-subservices>a:last-child{border-bottom:0}
.direction-subservices small{color:#2098ae;font-size:12px;font-weight:800;letter-spacing:.1em;transition:color .22s ease,text-shadow .22s ease}
.direction-subservices strong{font-size:clamp(17px,1.45vw,22px);font-weight:600;letter-spacing:-.02em}
.direction-subservices span{color:#1aa0b6;font-size:19px;transition:transform .22s ease}
.direction-art-analytics i,.direction-art-ads i,.direction-art-automation i{position:absolute;border:1px solid rgba(89,228,239,.3);border-radius:50%}
.direction-art-analytics i:nth-of-type(1){left:24px;top:68px;width:12px;height:12px}
.direction-art-analytics i:nth-of-type(2){right:20px;bottom:57px;width:20px;height:20px}
.direction-art-analytics i:nth-of-type(3){right:52px;top:30px;width:6px;height:6px}
.direction-art-ads i:nth-of-type(1),.direction-art-ads i:nth-of-type(2){display:none}
.direction-art-ads i:nth-of-type(3){right:19%;top:24%;width:8px;height:8px;background:#55e6ef;box-shadow:0 0 14px #55e6ef}
.direction-art-automation i{width:14px;height:14px;background:#082a45}
.direction-art-automation i:nth-of-type(1){left:14%;top:22%}
.direction-art-automation i:nth-of-type(2){right:12%;top:31%}
.direction-art-automation i:nth-of-type(3){left:20%;bottom:20%}
.direction-art-automation i:nth-of-type(4){right:20%;bottom:16%}

.services-request{padding:0 0 105px;background:var(--services-paper)}
.services-request-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:65px;
  align-items:center;
  padding:56px 62px;
  border:1px solid rgba(72,216,231,.28);
  border-radius:38px;
  color:#fff;
  background:radial-gradient(circle at 88% 20%,rgba(46,190,216,.18),transparent 32%),linear-gradient(145deg,#07182e,#062c49);
  box-shadow:0 28px 65px rgba(5,34,55,.16);
}
.services-kicker-dark{color:#72e3ed}
.services-request h2{margin:0;font-size:clamp(40px,4.7vw,65px);font-weight:500;line-height:1.02;letter-spacing:-.055em}
.services-request h2 em{color:var(--services-cyan);font-style:normal}
.services-request p:not(.services-kicker){max-width:650px;margin:22px 0 0;color:#abc5cf;font-size:15px;line-height:1.65}
.services-request .button{display:inline-flex;align-items:center;justify-content:center;gap:14px;white-space:nowrap}
.services-request .button svg{display:block;width:19px;height:19px;flex:0 0 19px}

@media(hover:hover){
  .services-map-point:hover{border-color:rgba(97,232,243,.62);box-shadow:0 18px 34px rgba(0,0,0,.28),0 0 22px rgba(57,222,239,.1);transform:translateY(-4px)}
  .direction-main-copy>a:hover span{transform:translate(3px,-3px)}
  .direction-main-copy h3 a:hover{color:#ecfeff;text-shadow:0 0 18px rgba(57,222,239,.12)}
}

/* Preserve the same row feedback on touch and keyboard, not only hover devices. */
.direction-subservices>a:is(:hover,:active,:focus-visible){padding-right:8px;padding-left:10px;color:#087f96;background:linear-gradient(90deg,rgba(190,237,243,.42),rgba(226,247,249,.18));box-shadow:inset 3px 0 #39bfd0}
.direction-subservices>a:is(:hover,:active,:focus-visible) small{color:#08a9c2;text-shadow:0 0 10px rgba(30,183,205,.25)}
.direction-subservices>a:is(:hover,:active,:focus-visible) span{color:#08a9c2;transform:translate(4px,-3px)}

@keyframes services-scan{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes direction-scan{to{transform:rotate(360deg)}}
@keyframes direction-pulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 18px rgba(57,222,239,.2))}50%{transform:scale(1.07);filter:drop-shadow(0 0 28px rgba(57,222,239,.34))}}

@media(max-width:1050px){
  .services-map{width:100%;max-width:720px;min-height:460px}
  .services-map-point{width:228px}
  .services-directions-head>div{grid-template-columns:1fr;gap:24px}
  .services-directions-head>div>p{max-width:650px}
  .direction{min-height:470px}
  .direction-main{--direction-art-size:200px}
  .direction-art img{width:118px;height:118px}
  .direction-art-analytics img{width:149.76px;height:149.76px}
  .direction-art-development img{width:127.44px;height:127.44px}
  .direction-main{padding:29px 30px 32px}
  .direction-subservices{padding:24px 28px}
  .services-request-card{padding:46px 44px}
}

@media(max-width:820px){
  .direction{grid-template-columns:1fr;gap:14px}
  .direction-visual-right .direction-main{order:1}
  .direction-visual-right .direction-subservices{order:2}
  .direction-main{min-height:480px}
  .direction-subservices{min-height:420px}
  .services-request-card{grid-template-columns:1fr;gap:32px}
  .services-request .button{justify-self:start}
}

@media(max-width:760px){
  .services-page .services-hero{
    background:radial-gradient(circle at 76% 72%,rgba(8,100,144,.42),transparent 34%),linear-gradient(155deg,#04182d,#020c1c 78%);
  }
  .services-hero-grid{width:min(100% - 28px,1180px)}
  .services-hero-actions{align-items:flex-start;flex-direction:column;gap:13px}
  .services-map{min-height:520px;border-radius:24px}
  .services-map-head,.services-map-foot{left:15px;right:15px;font-size:7px}
  .services-map-radar{width:250px;height:250px}
  .services-map-point{width:158px;min-height:62px;gap:10px;padding:8px 10px}
  .services-map-point img{width:34px;height:34px}
  .services-map-point small{font-size:7px}
  .services-map-point b{font-size:11px}
  .services-map-analytics{left:14px;top:82px}
  .services-map-development{right:14px;top:82px}
  .services-map-ads{left:14px;bottom:90px}
  .services-map-automation{right:14px;bottom:90px}
  .services-map-point:after{display:none}
  .services-map-core{width:78px;height:78px}
  .services-map-core b{font-size:24px}
  .services-map-core{row-gap:8px}
  .services-map-core b{transform:translateY(2px)}
  .services-map-core small{margin-top:0;font-size:6px;transform:none}
  .services-directions{padding:72px 0 82px}
  .services-directions-head{margin-bottom:32px}
  .services-directions-head h2{font-size:clamp(41px,12vw,54px)}
  .services-directions-head>div>p{font-size:14px}
  .direction-list{gap:18px}
  .direction-main{--direction-art-size:180px;--direction-art-right:1%;min-height:435px;padding:24px;border-radius:25px}
  .direction-art img{width:108px;height:108px}
  .direction-art-analytics img{width:137.28px;height:137.28px}
  .direction-art-development img{width:116.64px;height:116.64px}
  .direction-main-copy h3{font-size:41px}
  .direction-main-copy p{font-size:13px}
  .direction-number{font-size:10px;letter-spacing:.1em}
  .direction-subservices{min-height:390px;padding:18px 22px;border-radius:25px}
  .direction-subservices>a{grid-template-columns:34px minmax(0,1fr) 20px;gap:9px}
  .direction-subservices small{font-size:11px;letter-spacing:.08em}
  .direction-subservices strong{font-size:17px}
  .services-request{padding-bottom:76px}
  .services-request-card{width:min(100% - 28px,1180px);padding:34px 25px;border-radius:25px}
  .services-request h2{font-size:42px}
  .services-request .button{width:100%}
}

@media(max-width:390px){
  .services-map-point{width:134px}
  .services-map-point img{width:30px;height:30px}
  .services-map-point b{font-size:9px}
  .services-map-core{width:70px;height:70px}
}

@media(prefers-reduced-motion:reduce){
  .services-map-radar{animation:none!important}
  .direction-art:after,.direction-art img{animation:none!important}
  .services-map-point,.direction-main-copy>a span,.direction-subservices>a,.direction-subservices span{transition:none!important}
}

/* Local phone-portrait map captions; other orientations stay unchanged. */
@media(orientation:portrait) and (max-width:760px){
 .services-map-point b{font-size:12px}
 .services-map-head,.services-map-foot{font-size:8px}
}
@media(orientation:portrait) and (max-width:390px){
 .services-map-point b{font-size:10px}
}

/* Desktop: keep the long fades, with a small 4px break between opposing rails. */
@media (hover:hover) and (pointer:fine){
 .services-map{container-type:inline-size}
 .services-map-point{width:216px;min-height:78px;padding:10px 14px;gap:12px}
 .services-map-point:after{width:6px;width:max(0px,min(68px,calc(50cqw - 21px - 100%)))}
}

/* Landscape tablets: a little more room between the four map cards. */
@media(orientation:landscape) and (min-width:761px) and (max-width:1366px) and (min-height:601px) and (hover:none) and (pointer:coarse){
 .services-map{container-type:inline-size}
 .services-map-point{width:216px;max-width:calc(50% - 34px);min-height:78px;padding:10px 12px;gap:12px}
 /* Use a smaller centre break than desktop. Absolute pseudo-elements begin
  * 1px inside each card border; account for that when reserving the 2px gap. */
 .services-map-point:after{width:16px;width:max(0px,min(34px,calc(50cqw - 20px - 100%)));background:linear-gradient(90deg,rgba(70,221,233,.56),transparent)}
}

/* Services index: keep the ambient glow in the upper-right on portrait phones. */
@media (max-width:760px) and (orientation:portrait){
  .services-page .services-hero{
    background:radial-gradient(circle at 76% 30%,rgba(8,100,144,.72),transparent 38%),linear-gradient(155deg,#04182d,#020c1c 78%);
  }
}

/* Keep all direction artwork and concentric backgrounds above mobile headings. */
@media (max-width:760px) and (orientation:portrait){
 .direction-main{--direction-art-top:calc(8% - 7px)}
}