/* =========================================================
 * Tech Resolve — Custom Website Development FAQ
 * ======================================================= */

.tr-custom-faq {
	position: relative;
	overflow: hidden;

	padding:
		clamp(115px, 11vw, 185px)
		var(--tr-gutter);

	color:
		#fff;

	background:
		linear-gradient(
			145deg,
			#040b08,
			#07140f 55%,
			#06100d
		);
}


/* =========================================================
 * Background
 * ======================================================= */

.tr-custom-faq__background,
.tr-custom-faq__grid,
.tr-custom-faq__glow {
	position: absolute;

	pointer-events: none;
}


.tr-custom-faq__background {
	inset: 0;
}


.tr-custom-faq__grid {
	inset: 0;

	opacity: .12;

	background-image:
		linear-gradient(
			rgba(255, 255, 255, .03) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255, 255, 255, .03) 1px,
			transparent 1px
		);

	background-size:
		70px 70px;
}


.tr-custom-faq__glow {
	top: -320px;
	right: -260px;

	width: 800px;
	height: 800px;

	background:
		radial-gradient(
			circle,
			rgba(25, 224, 120, .08),
			transparent 68%
		);
}


/* =========================================================
 * Shell
 * ======================================================= */

.tr-custom-faq__shell {
	position: relative;
	z-index: 2;

	width:
		min(100%, var(--tr-container));

	margin:
		0 auto;
}


/* =========================================================
 * Intro
 * ======================================================= */

.tr-custom-faq__intro {
	display: grid;

	grid-template-columns:
		minmax(0, 1.05fr)
		minmax(320px, .65fr);

	align-items: end;

	gap:
		clamp(50px, 8vw, 120px);

	margin-bottom:
		clamp(65px, 8vw, 100px);
}


.tr-custom-faq__eyebrow {
	display: block;

	margin-bottom: 18px;

	color:
		var(--tr-green);

	font-size: 9px;
	font-weight: 800;
	letter-spacing: .15em;
}


.tr-custom-faq__intro h2 {
	max-width: 870px;

	margin: 0;

	color:
		#fff;

	font-size:
		clamp(44px, 5.15vw, 74px);

	font-weight: 800;
	line-height: .99;
	letter-spacing: -.055em;
}


.tr-custom-faq__intro > p {
	max-width: 520px;

	margin: 0;

	color:
		rgba(255, 255, 255, .46);

	font-size: 14px;
	line-height: 1.82;
}


/* =========================================================
 * Layout
 * ======================================================= */

.tr-custom-faq__layout {
	display: grid;

	grid-template-columns:
		145px
		minmax(0, 1fr);

	gap:
		clamp(32px, 5vw, 70px);
}


/* =========================================================
 * Rail
 * ======================================================= */

.tr-custom-faq__rail {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;

	padding-top: 5px;
}


.tr-custom-faq__rail > div {
	display: grid;
	gap: 6px;
}


.tr-custom-faq__rail span {
	color:
		rgba(255, 255, 255, .17);

	font-size: 6px;
	font-weight: 800;
	letter-spacing: .1em;
}


.tr-custom-faq__rail strong {
	color:
		rgba(255, 255, 255, .47);

	font-size: 7px;
	font-weight: 850;
	letter-spacing: .08em;
}


.tr-custom-faq__rail > div:first-child strong {
	color:
		var(--tr-green);

	font-size: 23px;
	letter-spacing: -.03em;
}


.tr-custom-faq__rail i {
	display: block;

	width: 1px;
	height: 54px;

	margin-left: 3px;

	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, .04),
			rgba(25, 224, 120, .3),
			rgba(255, 255, 255, .04)
		);
}


/* =========================================================
 * Questions
 * ======================================================= */

.tr-custom-faq__questions {
	border-top:
		1px solid rgba(255, 255, 255, .09);
}


/* =========================================================
 * Item
 * ======================================================= */

.tr-custom-faq__item {
	border-bottom:
		1px solid rgba(255, 255, 255, .08);
}


/* =========================================================
 * Trigger
 * ======================================================= */

.tr-custom-faq .tr-custom-faq__trigger,
.tr-custom-faq .tr-custom-faq__trigger:hover,
.tr-custom-faq .tr-custom-faq__trigger:focus {
	display: grid;

	grid-template-columns:
		70px
		minmax(0, 1fr)
		42px;

	align-items: center;

	gap: 22px;

	width: 100%;
	min-height: 112px;

	margin: 0;
	padding:
		22px 0;

	color:
		#fff !important;

	background:
		transparent !important;

	border:
		0 !important;

	border-radius:
		0 !important;

	box-shadow:
		none !important;

	font: inherit;

	text-align: left;

	cursor: pointer;
}


.tr-custom-faq .tr-custom-faq__trigger:focus-visible {
	outline:
		1px solid rgba(25, 224, 120, .5);

	outline-offset:
		5px;
}


/* =========================================================
 * Number
 * ======================================================= */

.tr-custom-faq__number {
	color:
		rgba(255, 255, 255, .18);

	font-size: 7px;
	font-weight: 850;
	letter-spacing: .09em;

	transition:
		color 180ms ease;
}


.tr-custom-faq__trigger[aria-expanded="true"] .tr-custom-faq__number {
	color:
		var(--tr-green);
}


/* =========================================================
 * Question
 * ======================================================= */

.tr-custom-faq__question {
	max-width: 940px;

	color:
		rgba(255, 255, 255, .75);

	font-size:
		clamp(19px, 2vw, 28px);

	font-weight: 750;
	line-height: 1.2;
	letter-spacing: -.025em;

	transition:
		color 180ms ease;
}


.tr-custom-faq__trigger:hover .tr-custom-faq__question,
.tr-custom-faq__trigger[aria-expanded="true"] .tr-custom-faq__question {
	color:
		#fff;
}


/* =========================================================
 * Icon
 * ======================================================= */

.tr-custom-faq__icon {
	position: relative;

	display: grid;
	place-items: center;

	width: 38px;
	height: 38px;

	border:
		1px solid rgba(255, 255, 255, .09);

	border-radius:
		50%;

	transition:
		border-color 180ms ease,
		background 180ms ease;
}


.tr-custom-faq__icon i {
	position: absolute;

	width: 13px;
	height: 1px;

	background:
		rgba(255, 255, 255, .5);

	transition:
		transform 220ms var(--tr-ease),
		background 180ms ease;
}


.tr-custom-faq__icon i:last-child {
	transform:
		rotate(90deg);
}


.tr-custom-faq__trigger[aria-expanded="true"] .tr-custom-faq__icon {
	background:
		var(--tr-green);

	border-color:
		var(--tr-green);
}


.tr-custom-faq__trigger[aria-expanded="true"] .tr-custom-faq__icon i {
	background:
		#06100d;
}


.tr-custom-faq__trigger[aria-expanded="true"] .tr-custom-faq__icon i:last-child {
	transform:
		rotate(0deg);
}


/* =========================================================
 * Panel
 * ======================================================= */

.tr-custom-faq__panel {
	display: grid;
	grid-template-rows:
		0fr;

	opacity: 0;

	transition:
		grid-template-rows 260ms var(--tr-ease),
		opacity 180ms ease;
}


.tr-custom-faq__panel > div {
	overflow: hidden;
}


.tr-custom-faq__item.is-open .tr-custom-faq__panel {
	grid-template-rows:
		1fr;

	opacity: 1;
}


.tr-custom-faq__panel p {
	max-width: 850px;

	margin:
		0
		0
		34px
		92px;

	color:
		rgba(255, 255, 255, .43);

	font-size: 11px;
	line-height: 1.8;
}


/* =========================================================
 * Closing Note
 * ======================================================= */

.tr-custom-faq__note {
	display: grid;

	grid-template-columns:
		155px
		minmax(0, 1fr)
		120px;

	align-items: center;

	gap:
		clamp(28px, 5vw, 65px);

	margin-top:
		clamp(70px, 8vw, 105px);

	padding:
		clamp(32px, 4vw, 48px);

	color:
		#07120e;

	background:
		var(--tr-green);

	border-radius:
		20px;
}


.tr-custom-faq__note > span {
	color:
		rgba(6, 16, 13, .47);

	font-size: 7px;
	font-weight: 900;
	letter-spacing: .11em;
}


.tr-custom-faq__note h3 {
	max-width: 860px;

	margin: 0;

	color:
		#06100d;

	font-size:
		clamp(25px, 3vw, 40px);

	font-weight: 850;
	line-height: 1.06;
	letter-spacing: -.04em;
}


/* =========================================================
 * Note Mark
 * ======================================================= */

.tr-custom-faq__note-mark {
	display: grid;

	grid-template-columns:
		auto
		1fr
		auto;

	align-items: center;

	gap: 8px;
}


.tr-custom-faq__note-mark span,
.tr-custom-faq__note-mark strong {
	display: grid;
	place-items: center;

	width: 38px;
	height: 38px;

	border:
		1px solid rgba(6, 16, 13, .18);

	border-radius:
		50%;

	font-size: 6px;
	font-weight: 900;
}


.tr-custom-faq__note-mark strong {
	color:
		var(--tr-green);

	background:
		#06100d;

	border-color:
		#06100d;

	font-size: 14px;
}


.tr-custom-faq__note-mark i {
	height: 1px;

	background:
		rgba(6, 16, 13, .2);
}


/* =========================================================
 * Tablet
 * ======================================================= */

@media (max-width: 900px) {

	.tr-custom-faq__layout {
		grid-template-columns: 1fr;
	}


	.tr-custom-faq__rail {
		display: none;
	}

}


/* =========================================================
 * Mobile
 * ======================================================= */

@media (max-width: 720px) {

	.tr-custom-faq {
		padding:
			90px
			16px;
	}


	.tr-custom-faq__intro {
		grid-template-columns: 1fr;
		gap: 28px;

		margin-bottom: 52px;
	}


	.tr-custom-faq__intro h2 {
		font-size:
			clamp(40px, 11vw, 58px);
	}


	.tr-custom-faq .tr-custom-faq__trigger,
	.tr-custom-faq .tr-custom-faq__trigger:hover,
	.tr-custom-faq .tr-custom-faq__trigger:focus {
		grid-template-columns:
			42px
			minmax(0, 1fr)
			36px;

		gap: 12px;

		min-height: 94px;

		padding:
			18px 0;
	}


	.tr-custom-faq__question {
		font-size:
			18px;
	}


	.tr-custom-faq__icon {
		width: 34px;
		height: 34px;
	}


	.tr-custom-faq__panel p {
		margin:
			0
			0
			28px
			54px;

		font-size: 10px;
	}


	.tr-custom-faq__note {
		grid-template-columns: 1fr;

		gap: 18px;

		padding:
			28px 22px;
	}


	.tr-custom-faq__note-mark {
		max-width: 120px;
	}

}