/* =========================================================
 * Tech Resolve — About Story
 * Editorial Narrative
 * ======================================================= */

.tr-about-story {
	position: relative;

	padding:
		clamp(110px, 11vw, 190px)
		var(--tr-gutter);

	color: #102018;

	background:
		linear-gradient(
			180deg,
			#f7f7f4 0%,
			#ffffff 58%,
			#f5f7f4 100%
		);
}


.tr-about-story__shell {
	width: min(100%, var(--tr-container));
	margin: 0 auto;
}


/* =========================================================
 * Index
 * ======================================================= */

.tr-about-story__index {
	display: grid;
	grid-template-columns:
		auto
		minmax(40px, 1fr)
		auto;
	align-items: center;
	gap: 15px;

	margin-bottom:
		clamp(55px, 7vw, 100px);
}


.tr-about-story__index span {
	color: #08b95d;

	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
}


.tr-about-story__index i {
	height: 1px;

	background:
		linear-gradient(
			to right,
			#16cf70,
			#dce4df
		);
}


.tr-about-story__index strong {
	color: #8d9892;

	font-size: 8px;
	letter-spacing: 0.13em;
}


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

.tr-about-story__layout {
	display: grid;
	grid-template-columns:
		minmax(0, 1.05fr)
		minmax(360px, 0.95fr);
	gap: clamp(60px, 10vw, 160px);
}


.tr-about-story__eyebrow {
	display: block;

	margin-bottom: 20px;

	color: #08b95d;

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


.tr-about-story__heading h2 {
	max-width: 820px;
	margin: 0;

	color: #0a1711;

	font-size: clamp(44px, 5.4vw, 78px);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.055em;
}


.tr-about-story__body {
	padding-top: 33px;

	border-top:
		1px solid #dbe3df;
}


.tr-about-story__body p {
	margin:
		0
		0
		24px;

	color: #64716a;

	font-size: 15px;
	line-height: 1.85;
}


.tr-about-story__body p:first-child {
	color: #26362e;

	font-size: 17px;
}


/* =========================================================
 * Belief
 * ======================================================= */

.tr-about-story__belief {
	position: relative;
	overflow: hidden;

	margin-top:
		clamp(75px, 8vw, 120px);
	padding:
		clamp(38px, 5vw, 70px);

	background:
		#07120e;

	border-radius: 24px;
}


.tr-about-story__belief::before {
	content: "";

	position: absolute;
	top: -140px;
	right: -100px;

	width: 420px;
	height: 420px;

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

	pointer-events: none;
}


.tr-about-story__belief-meta {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;
	gap: 11px;
}


.tr-about-story__belief-meta > span {
	width: 7px;
	height: 7px;

	background: #19e078;

	border-radius: 50%;

	box-shadow:
		0 0 0 6px rgba(25, 224, 120, 0.07);
}


.tr-about-story__belief-meta strong {
	color: #19e078;

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


.tr-about-story__belief h3 {
	position: relative;
	z-index: 2;

	max-width: 1000px;
	margin: 25px 0 0;

	color: #fff;

	font-size: clamp(48px, 7vw, 104px);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.065em;
}


/* =========================================================
 * Signal
 * ======================================================= */

.tr-about-story__belief-signal {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: flex-end;
	gap: 5px;

	height: 46px;
	margin-top: 38px;
}


.tr-about-story__belief-signal span {
	display: block;

	width: 4px;

	background:
		linear-gradient(
			to top,
			#19e078,
			#14d7e8
		);

	border-radius: 999px;
}


.tr-about-story__belief-signal span:nth-child(1) {
	height: 11px;
}


.tr-about-story__belief-signal span:nth-child(2) {
	height: 23px;
}


.tr-about-story__belief-signal span:nth-child(3) {
	height: 37px;
}


.tr-about-story__belief-signal span:nth-child(4) {
	height: 28px;
}


.tr-about-story__belief-signal span:nth-child(5) {
	height: 45px;
}


/* =========================================================
 * Points
 * ======================================================= */

.tr-about-story__points {
	display: grid;
	grid-template-columns:
		repeat(3, minmax(0, 1fr));
	gap: 12px;

	margin-top: 16px;
}


.tr-about-story__point {
	min-height: 210px;
	padding: 23px;

	background: #fff;

	border:
		1px solid #dfe5e1;

	border-radius: 15px;

	transition:
		transform 180ms var(--tr-ease),
		border-color 180ms ease;
}


.tr-about-story__point:hover {
	border-color:
		rgba(8, 185, 93, 0.33);

	transform:
		translateY(-4px);
}


.tr-about-story__point-top {
	display: flex;
	align-items: center;
	gap: 11px;
}


.tr-about-story__point-top span {
	color: #08b95d;

	font-size: 9px;
	font-weight: 800;
}


.tr-about-story__point-top i {
	flex: 1;

	height: 1px;

	background: #e0e6e2;
}


.tr-about-story__point h3 {
	margin: 34px 0 0;

	color: #111e17;

	font-size: 21px;
	line-height: 1.1;
}


.tr-about-story__point p {
	margin: 15px 0 0;

	color: #707c75;

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


/* =========================================================
 * Responsive Base
 * ======================================================= */

@media (max-width: 980px) {

	.tr-about-story__layout {
		grid-template-columns: 1fr;
	}


	.tr-about-story__points {
		grid-template-columns: 1fr;
	}

}