@charset "UTF-8";
/* CSS Document */

:root {
    --violet: #5B21B6;
    --orange: #FF5500;

    --navy: #202124;
    --navy-2: #2B2D30;

    --light: #F7F7F5;
    --white: #FFFFFF;

    --text: #303238;
    --muted: #6B7075;
    --line: #DFE1E4;

    --orange-dark: #D94700;

    --max: 1180px;
}
*{
	box-sizing:border-box
}
html{
	scroll-behavior:smooth
}
body{
	margin:0;
	font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
	color:var(--text);
	line-height:1.65
}
a{
	text-decoration:none;
	color:inherit
}
.container{
	width:min(92%,var(--max));
	margin:auto
}
header{
	position:sticky;
	top:0;
	z-index:10;
	background:rgba(32, 33, 36, .97);
	border-bottom:1px solid rgba(255,255,255,.08)
}
.nav{
	min-height:72px;
	display:flex;
	align-items:center;
	justify-content:space-between
}
.brand{
	color:#fff;
	font-weight:800;
	letter-spacing:-.02em
}
.brand span,h1 span,.eyebrow,.service-number,small{
	color:var(--violet)
}
.nav-links{
	display:flex;
	gap:24px;
	list-style:none;
	margin:0;
	padding:0
}
.nav-links a{
	color:#dce1e5;
	font-size:.88rem;
	font-weight:650
}
.nav-links a:hover{
	color:var(--orange)
}
.nav-cta{
	border:1px solid var(--orange);
	padding:9px 14px;
	border-radius:4px
}
.hero {
    background:
        linear-gradient(
            105deg,
            rgba(32,33,36,.98) 0%,
            rgba(75,40,109,.92) 55%,
            rgba(75,40,109,.72) 100%
        );
    color: var(--white);
}
.hero-grid{
	display:grid;
	grid-template-columns:1.1fr .9fr;
	gap:65px;
	align-items:center;
	padding:90px 0
}
.eyebrow{
	font-size:.78rem;
	font-weight:800;
	letter-spacing:.15em;
	text-transform:uppercase;
	margin-bottom:16px;
	color: var(--orange)
}
h1{
	font-size:clamp(3.2rem,6vw,5.7rem);
	line-height:.97;
	letter-spacing:-.055em;
	margin:0
}
.hero-title{
	font-size:1.35rem;
	line-height:1.35;
	color:#e7ebee;
	margin:25px 0 16px;
	max-width:700px
}
.hero-copy{
	color:#bdc6cd;
	max-width:680px
}
.actions{
	display:flex;
	gap:13px;
	flex-wrap:wrap;
	margin-top:30px
}
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:47px;
	padding:0 20px;
	border-radius:4px;
	font-weight:750;
	font-size:.9rem
}
.primary{
	background:var(--orange);
	color:#fff
}
.outline{
	border:1px solid rgba(255,255,255,.35);
	color:#fff
}
.placeholder,.photo{
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:30px
}
.placeholder{
	min-height:470px;
	border:1px dashed rgba(255,255,255,.35);
	background:rgba(255,255,255,.04);
	color:#aeb8c0;
	border-radius:5px
}
.placeholder strong,.photo strong{
	display:block;
	color:var(--orange);
	text-transform:uppercase;
	font-size:.76rem;
	letter-spacing:.1em;
	margin-bottom:8px
}

section{
	padding:90px 0
}
.light{
	background:var(--light)
}
.dark{
	background:var(--navy);
	color:#fff
}
.heading{
	max-width:760px;
	margin-bottom:45px
}
.heading h2{
	margin:0 0 14px;
	color:var(--navy);
	font-size:clamp(2rem,4vw,3.15rem);
	line-height:1.05;
	letter-spacing:-.04em
}
.dark h2{
	color:#fff
}
.lead{
	font-size:1.08rem;
	color:var(--muted)
}
.dark .lead{
	color:#bdc6cd
}
.profile-grid{
	display:grid;
	grid-template-columns:.85fr 1.15fr;
	gap:60px;
	align-items:center
}
.photo{
	min-height:560px;
	background:#e9ecee;
	border:1px dashed #b8c0c6;
	color:#68737c
}
.roles{
	margin-top:28px;
	border-top:1px solid var(--line)
}
.role{
	display:grid;
	grid-template-columns:175px 1fr;
	gap:20px;
	padding:15px 0;
	border-bottom:1px solid var(--line)
}
.role span{
	color:var(--muted)
}
.grid3{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px
}
.card{
	background:#fff;
	border:1px solid var(--line);
	padding:29px;
	min-height:220px
}
.card:hover{
	box-shadow:0 14px 35px rgba(16,24,32,.08);
	transform:translateY(-3px)
}
.card{
	transition:.2s
}
.card h3{
	margin:14px 0 9px;
	color:var(--navy);
	font-size:1.17rem
}
.card p{
	margin:0;
	color:var(--muted);
	font-size:.94rem
}
.grid4{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:22px
}
.diff{
	border-top:3px solid var(--violet);
	padding-top:18px
}
.diff h3{
	margin:0 0 7px
}
.diff p{
	margin:0;
	color:#bdc6cd;
	font-size:.92rem
}
.projects{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:24px
}
.project{
	border:1px solid var(--line);
	background:#fff
}
.project-img{
	min-height:260px;
	background:#eceff1;
	border-bottom:1px solid var(--line);
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	color:#6d777f;
	padding:25px
}
.project-body{
	padding:26px
}
.project-body h3{
	margin:0 0 8px;
	color:var(--navy)
}
.project-body p{
	margin:0;
	color:var(--muted);
	font-size:.94rem
}
.stats{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:25px
}
.stat{
	border-top:1px solid rgba(255,255,255,.2);
	padding-top:18px
}
.stat strong{
	display:block;
	color:var(--orange);
	font-size:2.7rem;
	line-height:1;
	margin-bottom:10px
}
.stat span{
	color:#c2cbd1;
	font-size:.9rem
}
.contact{
	background:var(--violet);
	color:#fff
}
.contact-grid{
	display:grid;
	grid-template-columns:1fr .9fr;
	gap:60px;
	align-items:center
}
.contact h2{
	color:#fff
}
.contact p{
	color:rgba(255,255,255,.88);
	max-width:680px
}
.contact-links{
	display:grid;
	gap:11px
}
.contact-link{
	padding:14px 16px;
	background:rgba(0,0,0,.13);
	border:1px solid rgba(255,255,255,.2);
	font-weight:650
}
.contact-link:hover{
	background:rgba(0,0,0,.2)
}
footer{
	background:#111214;
	color:#89949d;
	padding:28px 0;
	font-size:.82rem
}
.footer{
	display:flex;
	justify-content:space-between;
	gap:20px;
	flex-wrap:wrap
}
.footer b{
	color:#fff
}
.footer b span{
	color:var(--orange)
}

@media(max-width:900px){
	
	.nav-links{
		display:none
	}
	.hero-grid,.profile-grid,.contact-grid{
		grid-template-columns:1fr
	}
	.grid4,.stats{
		grid-template-columns:repeat(2,1fr)
	}
	.grid3{
		grid-template-columns:repeat(2,1fr)
	}
	.placeholder,.photo{min-height:380px}
}
@media(max-width:620px){
	
	section{
		padding:65px 0
	}
	.grid3,.grid4,.stats,.projects{
		grid-template-columns:1fr
	}
	h1{
		font-size:3.1rem
	}
	.role {
		grid-template-columns:1fr;gap:4px
	}
}