/* =========================================
   KAJA DESIGNS - SERVICES.CSS
   Services page-specific sections
========================================= */

/* =========================================
   SERVICES PAGE
========================================= */

.services-intro{
	padding:180px 0 80px;
}

.services-intro-premium{
	position:relative;
	padding:165px 0 80px;
	overflow:hidden;
}

.services-intro-premium::before{
	content:"";
	position:absolute;
	top:90px;
	left:-160px;
	width:520px;
	height:520px;
	border-radius:50%;
	background:radial-gradient(circle, rgba(157,92,255,.16), transparent 68%);
	pointer-events:none;
}

.services-intro-inner{
	position:relative;
	z-index:2;

	display:grid;
	grid-template-columns:minmax(0, 1fr) 420px;
	gap:72px;
	align-items:center;
	padding-top:20px;
	padding-bottom:80px;
	border-bottom:1px solid var(--line);
}

.services-intro-grid{
	display:grid;
	grid-template-columns:1.15fr .85fr;
	gap:90px;
	align-items:end;
	padding-bottom:70px;
	border-bottom:1px solid var(--line);
}

.services-intro h1{
	max-width:700px;
	font-size:clamp(4rem, 5.2vw, 6rem);
	font-weight:300;
	line-height:.95;
	letter-spacing:-.07em;
}

.services-intro p:not(.section-label){
	max-width:660px;
	color:var(--muted-strong);
	font-size:1.18rem;
	line-height:1.85;
}

.services-intro-copy{
	align-self:end;
	margin-bottom:40px;
	max-width:420px;
	min-width:0;
	overflow:hidden;
	padding-left:40px;
	border-left:1px solid rgba(255,255,255,.08);
}

.services-intro-copy span{
	display:block;
	margin-bottom:28px;

	color:rgba(183,133,255,.62);
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.2em;
	text-transform:uppercase;
}

.services-intro-copy p{
	color:var(--muted-strong);
	font-size:1.18rem;
	line-height:1.85;
}

.services-showcase{
	padding:0 0 140px;
}

.services-showcase-grid{
	display:grid;
	grid-template-columns:1.18fr .82fr .82fr;
	gap:24px;
}

.service-feature-card{
	position:relative;
	overflow:hidden;
	min-height:340px;
	padding:36px;

	border:1px solid var(--line);
	border-radius:var(--card-radius);

	background:
		radial-gradient(circle at 82% 0%, rgba(157,92,255,.11), transparent 44%),
		linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.012));

	transition:
		transform var(--ease),
		border-color var(--ease),
		box-shadow var(--ease),
		background var(--ease);
}

.service-feature-card::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:1px;
	z-index:3;
	background:linear-gradient(90deg, rgba(157,92,255,.42), transparent);
}

.service-feature-card:hover{
	transform:translateY(-6px);
	border-color:rgba(157,92,255,.32);
	box-shadow:var(--card-shadow);
	background:
		radial-gradient(circle at 82% 0%, rgba(157,92,255,.18), transparent 48%),
		var(--card-bg-hover);
}

.service-feature-main{
	grid-row:span 2;
	min-height:720px;
	padding:52px;
	background:
		radial-gradient(circle at 85% 8%, rgba(157,92,255,.18), transparent 42%),
		radial-gradient(circle at 0% 100%, rgba(157,92,255,.08), transparent 46%),
		linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.012));
}

.service-card-content{
	position:relative;
	z-index:2;
}

.service-feature-card h2,
.service-feature-card h3{
	position:relative;
	z-index:2;
	margin-top:32px;
	margin-bottom:22px;
	font-weight:300;
	line-height:1;
	letter-spacing:-.055em;
}

.service-feature-card h2{
	max-width:560px;
	font-size:clamp(3.2rem, 4.4vw, 5.6rem);
}

.service-feature-card h3{
	font-size:clamp(2.15rem, 2.7vw, 3.1rem);
}

.service-feature-card p:not(.section-label){
	position:relative;
	z-index:2;
	color:rgba(255,255,255,.64);
	font-size:1.02rem;
	line-height:1.8;
}

.service-feature-main p:not(.section-label){
	max-width:650px;
	font-size:1.12rem;
}

.service-feature-card ul{
	position:relative;
	z-index:2;
	display:grid;
	gap:16px;

	margin-top:54px;
	padding-top:36px;
	border-top:1px solid rgba(255,255,255,.08);

	list-style:none;
}

.service-feature-card li{
	color:rgba(255,255,255,.76);
	font-size:1rem;
	line-height:1.65;
}

.service-feature-card li::before{
	content:"✓";
	margin-right:12px;
	color:var(--purple-light);
}

.service-link{
	position:relative;
	z-index:2;

	display:inline-flex;
	align-items:center;
	gap:14px;

	margin-top:46px;
	padding-bottom:8px;

	color:#fff;
	text-decoration:none;
	font-size:.82rem;
	font-weight:600;
	letter-spacing:.1em;
	text-transform:uppercase;
}

.service-link::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1px;
	background:linear-gradient(90deg, rgba(183,133,255,.8), transparent);
	transform-origin:left;
	transform:scaleX(.7);
	transition:transform var(--ease);
}

.service-link:hover::after{
	transform:scaleX(1);
}

.service-link span{
	transition:transform var(--ease);
}

.service-link:hover span{
	transform:translateX(5px);
}

.service-ghost-icon{
	position:absolute;
	right:-20px;
	bottom:-20px;
	z-index:1;

	width:260px;
	height:260px;

	fill:none;
	stroke:var(--purple-light);
	stroke-width:1.15;
	stroke-linecap:round;
	stroke-linejoin:round;

	opacity:.04;
	transform:rotate(-6deg);

	transition:
		opacity var(--ease),
		transform var(--ease);
}

.service-feature-main:hover .service-ghost-icon{
	opacity:.09;
	transform:rotate(-3deg) scale(1.06);
}

/* =========================================
   SERVICES PROCESS
========================================= */

.services-process{
	padding:0 0 140px;
}

.services-process-header{
	max-width:850px;
	margin-bottom:50px;
}

.services-process-header h2{
	margin-bottom:26px;
	font-size:clamp(3rem, 4.5vw, 5.25rem);
}

.services-process-header p:not(.section-label){
	max-width:700px;
	color:var(--muted);
	font-size:1.12rem;
	line-height:1.85;
}

.services-process-grid{
	position:relative;
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:24px;
}

.process-item{
	position:relative;
	overflow:hidden;
	min-height:240px;
	padding:110px 34px 34px;

	border:1px solid var(--line);
	border-radius:var(--card-radius);

	background:
		radial-gradient(circle at 80% 0%, rgba(157,92,255,.08), transparent 42%),
		linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.012));

	transition:
		transform var(--ease),
		border-color var(--ease),
		box-shadow var(--ease),
		background var(--ease);
}

.process-item::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:1px;
	z-index:3;
	background:linear-gradient(
		90deg,
		rgba(157,92,255,.6),
		transparent
	);
}

.process-item:hover{
	transform:translateY(-6px);
	border-color:rgba(157,92,255,.28);
	box-shadow:var(--card-shadow);
	background:
		radial-gradient(circle at 80% 0%, rgba(157,92,255,.14), transparent 46%),
		var(--card-bg-hover);

	transform:translateY(-4px);
	border-color:rgba(157,92,255,.35);

	box-shadow:
		0 20px 50px rgba(0,0,0,.35),
		0 0 30px rgba(157,92,255,.08);
}

.process-item:hover span{
	color:rgba(157,92,255,.08);
	transition:color .4s ease;
}

.process-item span{
	position:absolute;
	top:22px;
	right:28px;
	z-index:1;

	color:rgba(255,255,255,.025);
	font-size:6rem;
	font-weight:300;
	line-height:1;
	letter-spacing:-.08em;
}

.process-item::after{
	position:absolute;
	top:42px;
	left:34px;
	z-index:5;

	width:12px;
	height:12px;
	margin:0;

	border-radius:999px;
	background:var(--purple-light);
	box-shadow:0 0 24px rgba(157,92,255,.55);
}

.process-item h3,
.process-item p{
	position:relative;
	z-index:2;
}

.process-item h3{
	margin-bottom:16px;
	font-size:1.9rem;
	font-weight:400;
	line-height:1.1;
	letter-spacing:-.035em;
}

.process-item p{
	color:rgba(255,255,255,.62);
	line-height:1.75;
}

/* =========================================
   SERVICES RESPONSIVE
========================================= */

@media(max-width:1200px){
	.services-process-grid{
		grid-template-columns:repeat(2, 1fr);
	}

	.services-process-grid::before{
		display:none;
	}

	.services-showcase-grid{
		grid-template-columns:1fr 1fr;
	}

	.service-feature-main{
		grid-column:span 2;
		min-height:520px;
	}
}

@media(max-width:1100px){
	.services-intro-inner{
		grid-template-columns:1fr;
		max-width:720px;
		gap:34px;
	}

	.services-intro-copy{
		max-width:620px;
		padding-left:0;
		border-left:0;
		padding-top:24px;
		border-top:1px solid rgba(255,255,255,.08);
	}

	.services-intro h1{
		max-width:550px;
		font-size:clamp(3.6rem, 8vw, 5.6rem);
		line-height:.95;
	}

	.services-intro-copy p{
		font-size:1.08rem;
		line-height:1.75;
	}

	.services-showcase-grid{
		grid-template-columns:1fr 1fr;
	}

	.service-feature-main{
		grid-column:span 2;
		grid-row:auto;
		min-height:560px;
	}
}

@media(max-width:800px){
	.services-showcase,
	.services-process{
		padding-bottom:90px;
	}

	.services-process-header{
		margin-bottom:52px;
	}

	.services-process-grid,
	.services-showcase-grid{
		grid-template-columns:1fr;
		gap:18px;
	}

	.services-intro{
		padding:150px 0 70px;
	}

	.services-intro-premium{
		padding:145px 0 70px;
	}

	.services-intro-inner{
		grid-template-columns:1fr;
		gap:36px;
		padding-bottom:56px;
	}

	.services-intro-grid{
		grid-template-columns:1fr;
		gap:30px;
		padding-bottom:50px;
	}

	.services-intro h1{
		max-width:100%;
		font-size:clamp(3.4rem, 15vw, 5rem);
		line-height:.95;
	}

	.services-intro p:not(.section-label){
		font-size:1.05rem;
	}

	.services-intro-copy{
		max-width:100%;
		margin-bottom:0;
		padding-left:0;
		border-left:0;
		padding-top:28px;
		border-top:1px solid rgba(255,255,255,.08);
	}

	.services-intro-copy p{
		font-size:1.05rem;
		line-height:1.75;
	}

	.service-feature-main{
		grid-column:span 1;
		min-height:520px;
		padding:34px;
	}

	.service-feature-card{
		min-height:300px;
		padding:30px;
	}

	.service-feature-card h2{
		font-size:clamp(3rem, 13vw, 4.8rem);
	}

	.service-ghost-icon{
		width:220px;
		height:220px;
		right:-50px;
		bottom:-40px;
	}

	.process-item{
		min-height:260px;
		padding:96px 30px 32px;
	}

	.process-item::after{
		top:36px;
		left:30px;
	}

	.process-item span{
		font-size:5rem;
		top:22px;
		right:24px;
	}
}