:root{
	--ink:#11152b;
	--paper:#f7f5ef;
	--white:#fff;
	--muted:#666b7e;
	--indigo:#29245f;
	--teal:#1f8b8a;
	--sun:#f0a33a;
	--line:rgba(17,21,43,.13);
	--radius:1.4rem;
	--shadow:0 24px 70px rgba(28,29,65,.12);
	--max:1180px;
	}
*{box-sizing:border-box}
html{
	scroll-behavior:smooth;
	scroll-padding-top:6rem
	}
body{
	margin:0;
	color:var(--ink);
	background:var(--paper);
	font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
	line-height:1.65
	}
a{
	color:inherit
	}
img{
	max-width:100%;
	height:auto
	}
.wrap{
	width:min(calc(100% - 2.5rem),var(--max));
	margin-inline:auto
	}
.skip{
	position:absolute;
	left:-999px;
	top:1rem;
	z-index:99;
	background:var(--white);
	padding:.8rem 1rem;
	border-radius:.5rem
	}
.skip:focus{
	left:1rem
	}
.site-header{
	position:fixed;
	inset:0 0 auto;
	z-index:40;
	background:rgba(247,245,239,.88);
	backdrop-filter:blur(18px);
	border-bottom:1px solid transparent
	}
.site-header.scrolled{
	border-color:var(--line)
	}
.nav{
	min-height:5rem;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1.5rem
	}
.brand{
	display:flex;
	align-items:center;
	gap:.75rem;
	text-decoration:none;
	font-weight:850;
	letter-spacing:.04em
	}
.brand-mark{
	display:grid;
	place-items:center;
	width:2.5rem;
	aspect-ratio:1;
	border-radius:50%;
	background:conic-gradient(from 35deg,var(--sun),var(--teal),var(--indigo),var(--sun));
	color:#fff;font-size:.76rem;
	box-shadow:inset 0 0 0 5px rgba(255,255,255,.26)
	}
.menu{
	display:flex;
	align-items:center;
	gap:1.55rem;
	}
.menu a{
	text-decoration:none;
	font-size:.88rem;
	font-weight:700
	}
.menu a:hover,.menu a:focus-visible{
	color:var(--teal)}.lang{border:1px solid var(--line);
		border-radius:999px;
		padding:.4rem .7rem
	}
.menu-toggle{
	display:none;
	border:0;
	background:transparent;
	font:inherit;
	font-weight:800;
	padding:.6rem
	}
.hero{
	position:relative;
	min-height:92vh;
	display:grid;
	align-items:center;
	padding:9rem 0 6rem;
	overflow:hidden;
	background:var(--ink);
	color:#fff
	}
.hero:before{
	content:"";position:absolute;
	width:48rem;
	aspect-ratio:1;
	border:1px solid rgba(255,255,255,.1);
	border-radius:50%;
	right:-13rem;
	top:-15rem;
	box-shadow:0 0 0 6rem rgba(255,255,255,.025),0 0 0 12rem rgba(255,255,255,.018)
	}
.hero:after{
	content:"";
	position:absolute;
	inset:auto 0 0;
	height:36%;
	background:linear-gradient(165deg,transparent 38%,rgba(31,139,138,.15) 39%,rgba(41,36,95,.8) 72%);
	clip-path:polygon(0 46%,18% 21%,38% 55%,57% 18%,75% 52%,100% 8%,100% 100%,0 100%)
	}
.hero-grid{
	position:relative;
	z-index:2;
	display:grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.72fr);
	gap:5rem;
	align-items:center;
	}
.eyebrow{
	display:flex;
	align-items:center;
	gap:.7rem;
	margin:0 0 1.25rem;
	color:#b5dedd;
	font-size:.76rem;
	font-weight:850;
	letter-spacing:.16em;
	text-transform:uppercase
	}
.eyebrow:before{
	content:"";
	width:2.7rem;
	height:2px;
	background:var(--sun)
	}
h1{
	font-size:clamp(3.1rem,7.2vw,6.7rem);
	line-height:.96;
	letter-spacing:-.055em;
	margin:0;
	max-width:10ch
	}
.hero h1 em{
	font-style:normal;
	color:var(--sun)
	}
.lead{
	font-size:clamp(1.05rem,1.5vw,1.28rem);
	color:#ced0dc;
	max-width:58ch;
	margin:1.8rem 0 2.2rem
	}
.actions{
	display:flex;
	flex-wrap:wrap;
	gap:.8rem
	}
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:.55rem;
	text-decoration:none;
	padding:.86rem 1.2rem;
	border-radius:999px;
	font-weight:800;
	border:1px solid transparent
	}
.btn-primary{
	background:var(--sun);
	color:var(--ink)
	}
.btn-secondary{
	border-color:rgba(255,255,255,.3);
	color:#fff
	}
.orbit{
	position:relative;
	aspect-ratio:1;
	border-radius:50%;
	display:grid;
	place-items:center;
	border:1px solid rgba(255,255,255,.2);
	animation:float 6s ease-in-out infinite
	}
.orbit:before,.orbit:after{
	content:"";
	position:absolute;
	border-radius:50%;
	border:1px solid rgba(255,255,255,.15)
	}
.orbit:before{
	inset:12% -7%
	}
.orbit:after{
	inset:-7% 12%
	}
.orbit-core{
	width:58%;
	aspect-ratio:1;
	border-radius:50%;
	display:grid;
	place-items:center;
	text-align:center;
	background:radial-gradient(circle at 30% 25%,#3cabe0,var(--teal) 42%,var(--indigo) 78%);
	box-shadow:0 0 80px rgba(31,139,138,.36)
	}
.orbit strong{
	font-size:clamp(2.6rem,6vw,5rem);
	line-height:1
	}
.orbit span{
	display:block;
	font-size:.72rem;
	letter-spacing:.16em;
	text-transform:uppercase
	}
.scroll-note{
	position:absolute;
	z-index:3;
	bottom:1.6rem;
	left:50%;
	transform:translateX(-50%);
	font-size:.7rem;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:#b7bbc9
	}
.section{
	padding:clamp(5rem,9vw,8.5rem) 0
	}
.section-head{
	display:grid;
	grid-template-columns:.75fr 1.25fr;
	gap:3rem;
	margin-bottom:3.5rem
	}
.kicker{
	color:var(--teal);
	font-size:.77rem;
	font-weight:850;
	letter-spacing:.15em;
	text-transform:uppercase
}
.section h2{
	font-size:clamp(2.2rem,4.5vw,4.4rem);
	line-height:1.03;
	letter-spacing:-.045em;margin:.4rem 0
	}
.section-intro{
	font-size:1.14rem;
	color:var(--muted);
	max-width:58ch;
	margin:1rem 0 0
	}
.cards{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1rem
	}
.card{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:2rem;
	box-shadow:0 1px 0 rgba(255,255,255,.9) inset
	}
.card-num{
	display:block;
	color:var(--sun);
	font-weight:900;
	font-size:.75rem;
	letter-spacing:.12em
	}
.card h3{
	font-size:1.38rem;
	margin:2.5rem 0 .8rem
	}
.card p{
	color:var(--muted);
	margin:0
	}
.stats{
	background:var(--indigo);
	color:#fff
	}
.stats-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	}
.stat{
	padding:2rem 3rem;
	border-left:1px solid rgba(255,255,255,.16)
	}
.stat:first-child{
	border-left:0
	}
.stat strong{
	display:block;
	color:var(--sun);
	font-size:clamp(3rem,6vw,5rem);
	line-height:1;
	font-weight:850;
	letter-spacing:-.06em
	}
.stat span{
	display:block;
	margin-top:.7rem;
	color:#d6d5e5
	}
.project{
	background:#ebe8df
	}
.project-grid{
	display:grid;
	grid-template-columns:1fr 1.05fr;
	gap:clamp(2rem,6vw,6rem);
	align-items:center
	}
.map-card {
	  position: relative;
	  min-height: 34rem;
	  overflow: hidden;
	  border-radius: 2rem;

	  background-image:
		linear-gradient(
		  180deg,
		  rgba(17, 21, 43, 0.05) 30%,
		  rgba(17, 21, 43, 0.9) 100%
		),
		url("macedonia360.jpg");

	  background-position: center;
	  background-size: cover;
	  background-repeat: no-repeat;
	}

.map-card::before {
  display: none;
}

.map-card {
  display: block;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.map-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 80px rgba(28, 29, 65, 0.22);
}

.map-card:focus-visible {
  outline: 4px solid #f0a33a;
  outline-offset: 4px;
}

.map-label {
  position: absolute;
  z-index: 2;
  right: 2rem;
  bottom: 2rem;
  left: 2rem;
  color: #fff;
}

.map-label small {
  display: block;
  color: #b5dedd;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.map-label strong {
  display: block;
  margin-top: 0.3rem;
  font-size: 2rem;
}
.check-list{
	list-style:none;
	padding:0;
	margin:2rem 0
	}
.check-list li{
	padding:.75rem 0 .75rem 2rem;
	border-bottom:1px solid var(--line);
	position:relative
	}
.check-list li:before{
	content:"360°";
	position:absolute;
	left:0;
	color:var(--teal);
	font-size:.7rem;
	font-weight:900
	}
.contact{
	background:var(--ink);
	color:#fff
	}
.contact-grid{
	display:grid;
	grid-template-columns:1fr .72fr;
	gap:4rem;
	align-items:end
	}
.contact h2{
	max-width:10ch
}
.contact p{
	color:#c8cbd6
	}
.contact-box{
	padding:2rem;
	border:1px solid rgba(255,255,255,.18);
	border-radius:var(--radius);
	background:rgba(255,255,255,.04)
	}
.contact-box a{
	color:var(--sun);
	font-weight:850;
	text-underline-offset:.25rem
	}
.contact-note{
	font-size:.82rem;
	color:#9fa4b7!important
	}
.footer{
	background:#0a0d1a;
	color:#aeb2c0;
	padding:2rem 0
	}
.footer-row{
	display:flex;
	justify-content:space-between;
	gap:1rem;
	align-items:center;
	font-size:.82rem
	}
.footer a{
	color:#fff
}
.reveal{
	opacity:0;
	transform:translateY(20px);
	transition:.7s ease
	}
.reveal.visible{
	opacity:1;
	transform:none
	}

@keyframes float{
	50%{
		transform:translateY(-12px)
	}
}

@media(max-width:850px){
	.menu-toggle{display:block
	}
	.menu{
		position:absolute;
		top:100%;
		left:1.25rem;
		right:1.25rem;
		display:none;
		flex-direction:column;
		align-items:stretch;
		padding:1rem;
		background:var(--paper);
		border:1px solid var(--line);
		border-radius:1rem;
		box-shadow:var(--shadow)
	}
	.menu.open{
		display:flex
	}
	.hero-grid,.section-head,.project-grid,.contact-grid{
		grid-template-columns:1fr
	}
	.hero{
		min-height:auto
	}
	.orbit{
		max-width:26rem;
		margin:auto
	}
	.cards{
		grid-template-columns:1fr
	}
	.stats-grid{
		grid-template-columns:1fr
	}
	.stat{
		border-left:0;
		border-top:1px solid rgba(255,255,255,.16)
	}
	.stat:first-child{
		border-top:0}
	.section-head{gap:.5rem}
	.contact-grid{align-items:start}
}

@media(max-width:520px){
	.wrap{
		width:min(calc(100% - 1.5rem),var(--max))
	}
	.hero{padding-top:8rem}
	.orbit{max-width:18rem}
	.actions{flex-direction:column}
	.btn{width:100%}
	.footer-row{
		align-items:flex-start;
		flex-direction:column
	}
	.map-card{min-height:25rem}
}

@media(prefers-reduced-motion:reduce){
	html{
		scroll-behavior:auto}*,*:before,*:after{
			animation:none!important;
			transition:none!important}
	.reveal{opacity:1;transform:none}
}