.reference-logo>img{width:220px;height:auto;filter:none}.reference-logo .wordmark{display:none}.service-icon{width:54px;height:54px;object-fit:contain;margin:0 0 8px}.service::after{display:none}.service .decoration{opacity:1}
@media(max-width:760px){.reference-logo>img{width:190px}.service-icon{width:52px;height:52px}}

/* Company blue sampled from the supplied logo */
:root{--blue:#00a1ed;--blue2:#00a1ed}
.service strong,.service a,.service li:before,.values .kicker,.projects .kicker,.project-grid span{color:var(--blue)}
.contact-grid i{color:var(--blue)}

/* Use the reference imagery at its natural aspect instead of stretching it */
@media(min-width:1101px){.hero{height:395px}}
.hero{background:#0f161d;box-shadow:0 0 0 100vmax #0f161d;clip-path:inset(0 -100vmax)}
.hero-art img{width:min(100%,606px);height:auto;max-height:350px;object-fit:contain;-webkit-mask-image:radial-gradient(ellipse 92% 92% at 55% 50%,#000 66%,transparent 100%);mask-image:radial-gradient(ellipse 92% 92% at 55% 50%,#000 66%,transparent 100%);filter:saturate(1.03) contrast(1.03) drop-shadow(0 0 22px rgba(0,161,237,.15))}
.service .decoration{inset:0 auto 0 0;width:42%;height:100%;object-fit:cover;object-position:center;filter:contrast(1.04) saturate(1.03)}
.planning .decoration{left:auto;right:0;width:50%;object-position:center}

/* Service-card composition matched to the supplied reference */
@media(min-width:761px){
  .service{min-height:392px}
  .service .service-body{padding:83px 30px 32px 288px}
  .planning .service-body{padding:83px 190px 32px 120px}
  .service .service-icon{position:absolute;top:73px;left:178px;width:80px;height:80px;margin:0}
  .software .service-icon{top:65px;left:170px;width:96px;height:96px}
  .planning .service-icon{left:20px}
  .service .service-body>p{min-height:55px}
  .service h2{font-size:1.38rem}
  .service p{font-size:.78rem}
  .service ul{font-size:.75rem;gap:4px}
  .service a{font-size:.8rem}
  .service::after{display:block;z-index:1}
  .software::after{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.2) 23%,rgba(255,255,255,.84) 37%,#f8f9fa 48%,#f8f9fa 100%)}
  .planning::after{background:linear-gradient(90deg,#f8f9fa 0%,#f8f9fa 56%,rgba(255,255,255,.9) 70%,rgba(255,255,255,.15) 100%)}
}

@media(max-width:1100px){.hero-art{height:auto;margin-top:28px}.hero-art img{width:100%;max-height:none}}
@media(max-width:760px){
  .service{min-height:370px}
  .software .service-icon{width:64px;height:64px;margin:-6px 0 -6px -6px}
  .service .decoration{inset:0 auto auto 0;width:58%;height:165px;object-fit:cover;object-position:center}
  .planning .decoration{left:auto;right:0;width:58%}
  .service::after{display:block;z-index:1;background:linear-gradient(180deg,rgba(248,249,250,0) 0%,rgba(248,249,250,.84) 28%,#f8f9fa 43%,#f8f9fa 100%)}
}

/* Final spacing and colour alignment to the supplied company reference */
:root{--brand-dark:#0b1319}
html,body,.site,.header,footer{background:var(--brand-dark)}
.header{box-shadow:0 0 0 100vmax var(--brand-dark);clip-path:inset(0 -100vmax)}
.reference-logo>img{width:270px;mix-blend-mode:lighten}
.footer-company-logo{transform:none;opacity:.84}
.footer-company-logo>img{width:205px;height:auto;filter:none;mix-blend-mode:lighten}

@media(min-width:1101px){
  .hero{height:auto;min-height:395px;padding:30px 0 42px}
  .hero-copy{transform:none}
}

.hero{background:var(--brand-dark);box-shadow:0 0 0 100vmax var(--brand-dark)}
.hero-art img{width:min(100%,622px);height:auto;max-height:none;-webkit-mask-image:none;mask-image:none;filter:none}
@media(min-width:1101px){
  .hero-art img{width:min(100%,800px);transform:translate(-20px,10px)}
}
@media(min-width:1300px){
  .hero-art img{width:800px;max-width:none;height:424px;object-fit:contain}
}
.kicker::after{background:var(--blue)}
.secondary:hover{border-color:var(--blue);box-shadow:0 8px 24px rgba(0,161,237,.16)}
.round-icon.orange{background:var(--blue);box-shadow:0 8px 20px rgba(0,161,237,.24)}
.orange-text{color:var(--blue)!important}
.portrait{width:124px;height:124px;background:var(--blue)}
.person{grid-template-columns:124px 1fr;gap:18px}

.services-wrap{
  background:linear-gradient(180deg,#fff 0%,#fcfdfe 68%,#f8fafb 100%);
}
.values{
  background:#f1f3f4;
  box-shadow:0 0 0 100vmax #f1f3f4;
}
.values::before{
  display:none;
}
.projects{
  margin-top:-1px;
  background:linear-gradient(180deg,#e9edef 0%,#e4e9eb 100%);
}
.project-grid article{
  min-height:188px;
  padding:31px 27px;
}
.project-grid h3{margin:16px 0 11px}
.project-grid p{line-height:1.62}
.services-wrap,.values,.projects,.about,.contact{padding-top:54px;padding-bottom:54px}
.about{
  background:var(--brand-dark);
  box-shadow:0 0 0 100vmax var(--brand-dark);
}
.team::before{display:none}
.watermark{display:none}
.projects::before,.values::before,.services-wrap::after{background:linear-gradient(90deg,transparent,rgba(0,161,237,.8) 25%,rgba(0,161,237,.8) 75%,transparent)}
.contact::before,.services-wrap::before{background:radial-gradient(circle at 80% 20%,rgba(0,161,237,.12),transparent 24rem)}

@media(min-width:1280px){
  .about{grid-template-columns:.69fr 1.31fr;gap:18px}
  .team{gap:20px}
  .person{min-width:0}
  .person h3{font-size:1.06rem;letter-spacing:-.02em;white-space:nowrap}
}
@media(min-width:1101px) and (max-width:1279px){
  .about{grid-template-columns:1fr;gap:28px}
  .team{grid-template-columns:1fr 1fr;gap:24px}
  .person{min-width:0}
}

@media(max-width:760px){
  .header{clip-path:none;overflow:visible;box-shadow:none}
  .reference-logo>img{width:220px}
  .footer-company-logo>img{width:190px}
  .hero-art img{width:100%;max-height:none}
  .project-grid article{min-height:0;padding:27px 23px}
  .portrait{width:104px;height:104px}
  .person{grid-template-columns:104px 1fr;gap:15px}
}