:root{
	--ink:#232733;
	--ink-soft:#5a6172;
	--paper:#ffffff;
	--mist:#f4f6fa;
	--line:#e6e9f0;
	--magenta:#b54a9f;
	--blue:#29abe2;
	--green:#3cb878;
	--deepgreen:#00885a;
	--orange:#f26522;
	--yellow:#f0b23a;
	--red:#e8392e;
	--navy:#1f3f94;
	--disp:'Baloo 2','Arial Rounded MT Bold',ui-rounded,system-ui,sans-serif;
	--body:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
	--rad:18px;
	--max:1140px;
}
*{
	margin:0;
	padding:0;
	box-sizing:border-box
}
html{
	scroll-behavior:smooth
}
body{
	font-family:var(--body);
	color:var(--ink);
	background:var(--paper);
	line-height:1.6;
	font-size:17px
}
img{
	max-width:100%;
	display:block
}
a{
	color:inherit
}
.wrap{
	max-width:var(--max);
	margin:0 auto;
	padding:0 24px
}
h1,h2,h3{
	font-family:var(--disp);
	line-height:1.12;
	font-weight:800;
	letter-spacing:-.01em
}
.eyebrow{
	display:inline-flex;
	align-items:center;
	gap:10px;
	font-weight:600;
	font-size:13px;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--ink-soft)
}
.eyebrow .chips{
	display:inline-flex
}
.eyebrow .chips i{
	width:14px;
	height:14px;
	border-radius:4px;
	display:inline-block;
	mix-blend-mode:multiply
}
.eyebrow .chips i+i{
	margin-left:-6px
}
:focus-visible{
	outline:3px solid var(--blue);
	outline-offset:3px;
	border-radius:6px
}
/* header */
header{
	position:sticky;
	top:0;
	z-index:50;
	background:rgba(255,255,255,.92);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--line)
}
.nav{
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:72px
}
.nav .logo img{
	height:34px;
	width:auto
}
.nav ul{
	display:flex;
	gap:28px;
	list-style:none
}
.nav ul a{
	text-decoration:none;
	font-weight:500;
	font-size:15.5px;
	color:var(--ink-soft);
	transition:color .15s
}
.nav ul a:hover{
	color:var(--ink)
}
.btn{
	display:inline-block;
	font-family:var(--disp);
	font-weight:700;
	font-size:16px;
	text-decoration:none;
	padding:12px 26px;
	border-radius:999px;
	transition:transform .15s,box-shadow .15s
}
.btn:hover{
	transform:translateY(-2px)
}
.btn-ink{
	background:var(--ink);
	color:#fff;
	box-shadow:0 6px 18px rgba(35,39,51,.25)
}
.btn-ghost{
	border:2px solid var(--line);
	color:var(--ink)
}
.btn-ghost:hover{
	border-color:var(--ink)
}
@media(max-width:760px){
	.nav ul{
		display:none
}
}
/* hero */
.hero{
	position:relative;
	padding:88px 0 72px;
	overflow:hidden
}
.ribbons{
	position:absolute;
	inset:0;
	pointer-events:none
}
.ribbons i{
	position:absolute;
	border-radius:26px;
	mix-blend-mode:multiply;
	opacity:.85
}
.r1{
	width:340px;
	height:64px;
	background:var(--blue);
	opacity:.28!important;
	transform:rotate(-14deg);
	top:52px;
	right:6%
}
.r2{
	width:230px;
	height:64px;
	background:var(--green);
	opacity:.30!important;
	transform:rotate(9deg);
	top:110px;
	right:16%
}
.r3{
	width:150px;
	height:150px;
	border-radius:50%!important;
	background:var(--yellow);
	opacity:.32!important;
	top:200px;
	right:4%
}
.r4{
	width:110px;
	height:110px;
	background:var(--magenta);
	opacity:.22!important;
	transform:rotate(18deg);
	top:16px;
	right:30%
}
.r5{
	width:70px;
	height:70px;
	background:var(--red);
	opacity:.25!important;
	border-radius:16px;
	top:250px;
	right:24%;
	transform:rotate(-8deg)
}
.hero h1{
	font-size:clamp(38px,6vw,66px);
	max-width:13ch;
	margin:18px 0 20px
}
.hero h1 .u{
	position:relative;
	white-space:nowrap
}
.hero h1 .u b{
	position:relative;
	z-index:1;
	font-weight:inherit
}
.hero h1 .u::before,.hero h1 .u::after{
	content:"";
	position:absolute;
	left:-2%;
	right:-2%;
	height:.34em;
	bottom:.02em;
	border-radius:8px;
	mix-blend-mode:multiply
}
.hero h1 .u::before{
	background:var(--blue);
	opacity:.55;
	transform:rotate(-1.2deg)
}
.hero h1 .u::after{
	background:var(--green);
	opacity:.55;
	transform:rotate(.9deg) translateX(4%)
}
.hero p.lede{
	font-size:20px;
	color:var(--ink-soft);
	max-width:56ch;
	margin-bottom:34px
}
.hero .cta{
	display:flex;
	gap:14px;
	flex-wrap:wrap
}
.stats{
	display:flex;
	gap:0;
	flex-wrap:wrap;
	margin-top:56px;
	border-top:1px solid var(--line)
}
.stats div{
	padding:20px 34px 4px 0;
	margin-right:34px
}
.stats b{
	font-family:var(--disp);
	font-weight:800;
	font-size:30px;
	display:block;
	line-height:1.1
}
.stats span{
	font-size:14px;
	color:var(--ink-soft);
	font-weight:500
}
.stats .c1 b{
	color:var(--orange)
}
.stats .c2 b{
	color:var(--blue)
}
.stats .c3 b{
	color:var(--green)
}
.stats .c4 b{
	color:var(--magenta)
}
/* sections */
section{
	padding:84px 0
}
.sec-head{
	max-width:640px;
	margin-bottom:44px
}
.sec-head h2{
	font-size:clamp(30px,4vw,42px);
	margin:14px 0 12px
}
.sec-head p{
	color:var(--ink-soft);
	font-size:18px
}
/* services */
#services{
	background:var(--mist)
}
.cards{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:22px
}
@media(max-width:860px){
	.cards{
		grid-template-columns:1fr
}
}
.card{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--rad);
	padding:30px 28px 28px;
	position:relative;
	overflow:hidden;
	transition:transform .18s,box-shadow .18s
}
.card:hover{
	transform:translateY(-4px);
	box-shadow:0 14px 34px rgba(35,39,51,.10)
}
.card::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:7px
}
.card.blue::before{
	background:var(--blue)
}
.card.orange::before{
	background:var(--orange)
}
.card.green::before{
	background:var(--green)
}
.card .badge{
	width:52px;
	height:52px;
	border-radius:14px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:18px
}
.card.blue .badge{
	background:#e3f4fc
}
.card.orange .badge{
	background:#fdeade
}
.card.green .badge{
	background:#e4f5ec
}
.card h3{
	font-size:23px;
	margin-bottom:10px
}
.card p{
	color:var(--ink-soft);
	font-size:16px
}
.card ul{
	list-style:none;
	margin-top:16px
}
.card li{
	font-size:15px;
	font-weight:500;
	padding:7px 0;
	border-top:1px dashed var(--line);
	display:flex;
	gap:9px;
	align-items:center
}
.card li::before{
	content:"";
	width:8px;
	height:8px;
	border-radius:3px;
	flex:0 0 auto
}
.card.blue li::before{
	background:var(--blue)
}
.card.orange li::before{
	background:var(--orange)
}
.card.green li::before{
	background:var(--green)
}
/* map */
#locations .mapbox{
	background:linear-gradient(180deg,#fbfcfe,#f2f5fa);
	border:1px solid var(--line);
	border-radius:24px;
	padding:28px 18px 10px;
	overflow:hidden
}
#locations svg{
	width:100%;
	height:auto;
	display:block
}
.dotgrid{
	fill:#c7d0dd
}
.arc{
	fill:none;
	stroke-width:2.4;
	stroke-dasharray:2 7;
	stroke-linecap:round;
	opacity:.7
}
.halo{
	transform-origin:center;
	animation:pulse 2.6s ease-out infinite
}
@keyframes pulse{
	0%{
		opacity:.55;
		r:6px
}
	70%{
		opacity:0;
		r:22px
}
	100%{
		opacity:0;
		r:22px
}
}
.pin-label{
	font-family:var(--body);
	font-weight:600;
	font-size:15px;
	fill:var(--ink)
}
.pin-sub{
	font-family:var(--body);
	font-weight:500;
	font-size:11.5px;
	fill:var(--ink-soft);
	letter-spacing:.06em;
	text-transform:uppercase
}
.pin-label,.pin-sub{
	paint-order:stroke;
	stroke:#fff;
	stroke-width:4px;
	stroke-linejoin:round
}
@media (prefers-reduced-motion:reduce){
	.halo{
		animation:none;
		opacity:.3
}
}
.loc-cards{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:18px;
	margin-top:26px
}
@media(max-width:960px){
	.loc-cards{
		grid-template-columns:repeat(2,1fr)
}
}
@media(max-width:560px){
	.loc-cards{
		grid-template-columns:1fr
}
}
.loc{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--rad);
	padding:22px 22px 18px;
	border-top-width:6px
}
.loc.orange{
	border-top-color:var(--orange)
}
.loc.green{
	border-top-color:var(--green)
}
.loc.magenta{
	border-top-color:var(--magenta)
}
.loc.blue{
	border-top-color:var(--blue)
}
.loc h3{
	font-size:19px;
	display:flex;
	align-items:center;
	gap:9px
}
.loc h3 svg{
	width:24px;
	height:17px;
	border-radius:3px;
	box-shadow:0 0 0 1px rgba(0,0,0,.08)
}
.loc .role{
	font-size:14.5px;
	color:var(--ink-soft);
	margin:6px 0 14px;
	min-height:2.6em
}
.loc .clock{
	font-family:var(--disp);
	font-weight:700;
	font-size:24px;
	letter-spacing:.01em
}
.loc .tz{
	font-size:12px;
	color:var(--ink-soft);
	font-weight:600;
	letter-spacing:.1em;
	text-transform:uppercase
}
/* why */
#why{
	background:var(--mist)
}
.tiles{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:22px
}
@media(max-width:760px){
	.tiles{
		grid-template-columns:1fr
}
}
.tile{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--rad);
	padding:28px;
	display:flex;
	gap:18px;
	align-items:flex-start
}
.tile .dot2{
	flex:0 0 auto;
	width:46px;
	height:46px;
	position:relative;
	margin-top:3px
}
.tile .dot2 i{
	position:absolute;
	width:32px;
	height:32px;
	border-radius:10px;
	mix-blend-mode:multiply;
	opacity:.8
}
.tile .dot2 i:first-child{
	top:0;
	left:0
}
.tile .dot2 i:last-child{
	bottom:0;
	right:0
}
.tile h3{
	font-size:20px;
	margin-bottom:6px
}
.tile p{
	color:var(--ink-soft);
	font-size:15.5px
}
/* cta */
#contact .band{
	position:relative;
	background:var(--ink);
	border-radius:28px;
	padding:64px 40px;
	text-align:center;
	overflow:hidden
}
#contact .band h2{
	color:#fff;
	font-size:clamp(30px,4.5vw,46px);
	margin-bottom:12px
}
#contact .band p{
	color:#c3c8d4;
	font-size:18px;
	max-width:52ch;
	margin:0 auto 30px
}
#contact .band .blob{
	position:absolute;
	border-radius:50%;
	filter:blur(2px);
	opacity:.85
}
.b1{
	width:190px;
	height:190px;
	background:var(--magenta);
	top:-70px;
	left:-50px;
	opacity:.55!important
}
.b2{
	width:150px;
	height:150px;
	background:var(--blue);
	bottom:-60px;
	left:12%;
	opacity:.5!important
}
.b3{
	width:220px;
	height:220px;
	background:var(--orange);
	top:-90px;
	right:-60px;
	opacity:.5!important
}
.b4{
	width:120px;
	height:120px;
	background:var(--green);
	bottom:-50px;
	right:14%;
	opacity:.55!important
}
.btn-pop{
	background:#fff;
	color:var(--ink)
}
#contact .mail{
	margin-top:18px;
	color:#8d93a5;
	font-size:15px
}
#contact .mail a{
	color:#fff;
	font-weight:600;
	text-decoration:none;
	border-bottom:2px solid var(--yellow)
}
/* footer */
footer{
	padding:44px 0 56px;
	border-top:1px solid var(--line)
}
.foot{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	flex-wrap:wrap
}
.foot img{
	height:26px
}
.foot p{
	color:var(--ink-soft);
	font-size:14.5px
}
.foot .cities{
	display:flex;
	gap:8px;
	align-items:center;
	font-weight:500;
	font-size:14.5px;
	color:var(--ink-soft);
	flex-wrap:wrap
}
.foot .cities i{
	width:9px;
	height:9px;
	border-radius:3px;
	display:inline-block
}