/* =====================================================
          ABOUT HERO
       ===================================================== */

.ht-about-hero {

	position: relative;

	min-height: 520px;

	display: flex;

	align-items: center;

	overflow: hidden;

	background:
		linear-gradient(120deg,
			var(--primary-dark) 0%,
			#223f68 55%,
			var(--primary-light) 100%);

	color: #fff;
}

.ht-about-hero::before {

	content: "";

	position: absolute;

	width: 500px;
	height: 500px;

	right: -170px;
	top: -220px;

	border-radius: 50%;

	background:
		rgba(255, 205, 57, 0.12);
}

.ht-about-hero::after {

	content: "";

	position: absolute;

	width: 320px;
	height: 320px;

	left: -170px;
	bottom: -190px;

	border-radius: 50%;

	border:
		1px solid rgba(255, 255, 255, 0.12);
}

.ht-about-hero-content {

	position: relative;

	z-index: 2;

	width: 100%;

	max-width: 1180px;

	margin: auto;

	padding: 110px 20px;
}

.ht-about-eyebrow {

	display: inline-flex;

	align-items: center;

	gap: 9px;

	margin-bottom: 18px;

	color: var(--gold);

	font-size: 13px;

	font-weight: 600;

	letter-spacing: 1.8px;

	text-transform: uppercase;
}

.ht-about-eyebrow::before {

	content: "";

	width: 30px;
	height: 2px;

	background: var(--gold);
}

.ht-about-hero h1 {

	max-width: 800px;

	margin: 0 0 20px;

	font-family:
		'Playfair Display',
		serif;

	font-size:
		clamp(42px, 6vw, 72px);

	line-height: 1.08;

	font-weight: 700;
}

.ht-about-hero h1 span {
	color: var(--gold);
}

.ht-about-hero-description {

	max-width: 720px;

	margin: 0;

	color:
		rgba(255, 255, 255, 0.82);

	font-size: 17px;

	line-height: 1.9;
}

.ht-about-hero-tags {

	display: flex;

	flex-wrap: wrap;

	gap: 10px;

	margin-top: 30px;
}

.ht-about-hero-tag {

	padding: 8px 15px;

	border:
		1px solid rgba(255, 255, 255, 0.18);

	border-radius: 30px;

	background:
		rgba(255, 255, 255, 0.07);

	color: rgba(255, 255, 255, 0.9);

	font-size: 12px;

	font-weight: 500;
}

/* =====================================================
          INTRO
       ===================================================== */

.ht-about-section {

	padding: 90px 20px;
}

.ht-about-container {

	max-width: 1180px;

	margin: auto;
}

.ht-about-intro {

	display: grid;

	grid-template-columns:
		minmax(0, 0.9fr) minmax(0, 1.1fr);

	gap: 70px;

	align-items: center;
}

.ht-about-label {

	display: inline-block;

	margin-bottom: 12px;

	color: var(--primary-light);

	font-size: 12px;

	font-weight: 700;

	letter-spacing: 1.5px;

	text-transform: uppercase;
}

.ht-about-heading {

	margin: 0 0 20px;

	font-family:
		'Playfair Display',
		serif;

	color: var(--primary-dark);

	font-size:
		clamp(32px, 4vw, 48px);

	line-height: 1.2;
}

.ht-about-heading span {
	color: var(--gold);
}

.ht-about-text {

	margin: 0 0 17px;

	color: var(--text-muted);

	font-size: 14px;

	line-height: 1.9;
}

.ht-about-highlight {

	position: relative;

	padding: 35px;

	border-radius: 22px;

	background:
		linear-gradient(145deg,
			#f8fafc,
			#ffffff);

	border:
		1px solid var(--border-light);

	box-shadow:
		0 15px 45px rgba(27, 54, 93, 0.08);
}

.ht-about-highlight::before {

	content: "";

	position: absolute;

	left: 0;
	top: 30px;
	bottom: 30px;

	width: 4px;

	border-radius: 5px;

	background: var(--gold);
}

.ht-about-highlight-icon {

	width: 55px;
	height: 55px;

	display: flex;

	align-items: center;
	justify-content: center;

	margin-bottom: 20px;

	border-radius: 15px;

	background:
		rgba(27, 54, 93, 0.08);

	color: var(--primary-dark);

	font-size: 22px;
}

.ht-about-highlight h3 {

	margin: 0 0 12px;

	color: var(--primary-dark);

	font-size: 21px;

	font-weight: 600;
}

.ht-about-highlight p {

	margin: 0;

	color: var(--text-muted);

	font-size: 14px;

	line-height: 1.85;
}

/* =====================================================
          VISION / MISSION
       ===================================================== */

.ht-about-dark {

	position: relative;

	overflow: hidden;

	padding: 90px 20px;

	background:
		linear-gradient(135deg,
			var(--primary-dark),
			var(--primary-light));
}

.ht-about-dark::before {

	content: "";

	position: absolute;

	width: 450px;
	height: 450px;

	right: -220px;
	top: -220px;

	border-radius: 50%;

	background:
		rgba(255, 205, 57, 0.08);
}

.ht-about-dark-container {

	position: relative;

	z-index: 1;

	max-width: 1180px;

	margin: auto;
}

.ht-about-dark-grid {

	display: grid;

	grid-template-columns:
		1fr 1fr;

	gap: 25px;
}

.ht-about-dark-card {

	padding: 40px;

	border:
		1px solid rgba(255, 255, 255, 0.12);

	border-radius: 20px;

	background:
		rgba(255, 255, 255, 0.06);

	backdrop-filter: blur(8px);
}

.ht-about-dark-icon {

	width: 52px;
	height: 52px;

	display: flex;

	align-items: center;
	justify-content: center;

	margin-bottom: 22px;

	border-radius: 14px;

	background: var(--gold);

	color: var(--primary-dark);

	font-size: 20px;
}

.ht-about-dark-card h2 {

	margin: 0 0 15px;

	color: #fff;

	font-family:
		'Playfair Display',
		serif;

	font-size: 29px;
}

.ht-about-dark-card h3 {

	margin: 0 0 15px;

	color: var(--gold);

	font-size: 16px;

	font-weight: 600;
}

.ht-about-dark-card p {

	margin: 0;

	color:
		rgba(255, 255, 255, 0.75);

	font-size: 14px;

	line-height: 1.9;
}

/* =====================================================
          WHAT WE DO
       ===================================================== */

.ht-about-section-header {

	max-width: 700px;

	margin: 0 auto 50px;

	text-align: center;
}

.ht-about-section-header .ht-about-label {
	margin-bottom: 10px;
}

.ht-about-section-header .ht-about-heading {
	margin-bottom: 14px;
}

.ht-about-section-header p {

	margin: 0;

	color: var(--text-muted);

	font-size: 14px;

	line-height: 1.8;
}

.ht-services-grid {

	display: grid;

	grid-template-columns:
		repeat(3, 1fr);

	gap: 20px;
}

.ht-service-card {

	position: relative;

	padding: 30px;

	min-height: 230px;

	border:
		1px solid var(--border-light);

	border-radius: 18px;

	background: #fff;

	box-shadow:
		0 8px 30px rgba(27, 54, 93, 0.05);

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}

.ht-service-card:hover {

	transform: translateY(-5px);

	border-color:
		rgba(255, 205, 57, 0.65);

	box-shadow:
		0 18px 40px rgba(27, 54, 93, 0.10);
}

.ht-service-number {

	position: absolute;

	right: 22px;
	top: 20px;

	color:
		rgba(27, 54, 93, 0.06);

	font-size: 42px;

	font-weight: 700;
}

.ht-service-icon {

	width: 50px;
	height: 50px;

	display: flex;

	align-items: center;
	justify-content: center;

	margin-bottom: 20px;

	border-radius: 14px;

	background:
		rgba(27, 54, 93, 0.07);

	color: var(--primary-dark);

	font-size: 19px;
}

.ht-service-card h3 {

	margin: 0 0 10px;

	color: var(--primary-dark);

	font-size: 17px;

	font-weight: 600;
}

.ht-service-card p {

	margin: 0;

	color: var(--text-muted);

	font-size: 13px;

	line-height: 1.8;
}

/* =====================================================
          VALUES
       ===================================================== */

.ht-values-section {

	background: var(--bg-light);

	border-top:
		1px solid var(--border-light);

	border-bottom:
		1px solid var(--border-light);
}

.ht-values-grid {

	display: grid;

	grid-template-columns:
		repeat(5, 1fr);

	gap: 15px;
}

.ht-value-card {

	padding: 28px 20px;

	text-align: center;

	background: #fff;

	border:
		1px solid var(--border-light);

	border-radius: 16px;
}

.ht-value-icon {

	width: 48px;
	height: 48px;

	display: flex;

	align-items: center;
	justify-content: center;

	margin: 0 auto 16px;

	border-radius: 50%;

	background:
		rgba(255, 205, 57, 0.18);

	color: var(--primary-dark);
}

.ht-value-card h3 {

	margin: 0 0 8px;

	color: var(--primary-dark);

	font-size: 16px;

	font-weight: 600;
}

.ht-value-card p {

	margin: 0;

	color: var(--text-muted);

	font-size: 12px;

	line-height: 1.7;
}

/* =====================================================
          NUMBERS
       ===================================================== */

.ht-numbers {

	padding: 90px 20px;

	background: #fff;
}

.ht-numbers-grid {

	display: grid;

	grid-template-columns:
		repeat(4, 1fr);

	gap: 18px;
}

.ht-number-card {

	padding: 35px 20px;

	text-align: center;

	border:
		1px solid var(--border-light);

	border-radius: 18px;

	background:
		linear-gradient(145deg,
			#ffffff,
			#f8fafc);
}

.ht-number {

	display: block;

	margin-bottom: 8px;

	color: var(--primary-dark);

	font-family:
		'Playfair Display',
		serif;

	font-size: 34px;

	font-weight: 700;
}

.ht-number-card:nth-child(3) .ht-number {
	color: var(--primary-light);
}

.ht-number-label {

	color: var(--text-muted);

	font-size: 12px;

	font-weight: 500;
}

.ht-numbers-note {

	max-width: 650px;

	margin: 35px auto 0;

	text-align: center;

	color: var(--text-muted);

	font-size: 13px;

	line-height: 1.8;
}

/* =====================================================
          WHY HOUSING TRIO
       ===================================================== */

.ht-why-section {

	padding: 90px 20px;

	background:
		linear-gradient(180deg,
			#f8fafc,
			#ffffff);
}

.ht-why-grid {

	display: grid;

	grid-template-columns:
		repeat(3, 1fr);

	gap: 20px;
}

.ht-why-card {

	display: flex;

	gap: 17px;

	padding: 25px;

	border:
		1px solid var(--border-light);

	border-radius: 16px;

	background: #fff;

	transition: var(--transition);
}

.ht-why-card:hover {

	transform: translateY(-3px);

	box-shadow:
		0 12px 30px rgba(27, 54, 93, 0.07);
}

.ht-why-icon {

	flex: 0 0 auto;

	width: 44px;
	height: 44px;

	display: flex;

	align-items: center;
	justify-content: center;

	border-radius: 12px;

	background:
		rgba(255, 205, 57, 0.18);

	color: var(--primary-dark);
}

.ht-why-card h3 {

	margin: 0 0 6px;

	color: var(--primary-dark);

	font-size: 15px;

	font-weight: 600;
}

.ht-why-card p {

	margin: 0;

	color: var(--text-muted);

	font-size: 12px;

	line-height: 1.75;
}

/* =====================================================
          PROMISE
       ===================================================== */

.ht-promise {

	position: relative;

	overflow: hidden;

	padding: 90px 20px;

	background: var(--primary-dark);

	color: #fff;

	text-align: center;
}

.ht-promise::before {

	content: "";

	position: absolute;

	width: 300px;
	height: 300px;

	left: -130px;
	top: -130px;

	border-radius: 50%;

	background:
		rgba(255, 205, 57, 0.08);
}

.ht-promise-content {

	position: relative;

	z-index: 1;

	max-width: 850px;

	margin: auto;
}

.ht-promise .ht-about-label {

	color: var(--gold);
}

.ht-promise h2 {

	margin: 0 0 20px;

	font-family:
		'Playfair Display',
		serif;

	font-size:
		clamp(32px, 5vw, 48px);
}

.ht-promise p {

	margin: 0 auto;

	max-width: 780px;

	color:
		rgba(255, 255, 255, 0.76);

	font-size: 14px;

	line-height: 2;
}

.ht-promise strong {
	color: #fff;
}

.ht-promise-tagline {

	margin-top: 30px;

	color: var(--gold);

	font-size: 14px;

	font-weight: 600;

	letter-spacing: 1px;
}

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

@media (max-width: 991px) {

	.ht-about-intro {

		grid-template-columns: 1fr;

		gap: 35px;
	}

	.ht-services-grid {

		grid-template-columns:
			repeat(2, 1fr);
	}

	.ht-values-grid {

		grid-template-columns:
			repeat(3, 1fr);
	}

	.ht-numbers-grid {

		grid-template-columns:
			repeat(2, 1fr);
	}

	.ht-why-grid {

		grid-template-columns:
			repeat(2, 1fr);
	}

}

@media (max-width: 767px) {

	.ht-about-hero {

		min-height: auto;
	}

	.ht-about-hero-content {

		padding:
			70px 20px 80px;
	}

	.ht-about-hero-description {

		font-size: 14px;
	}

	.ht-about-section,
	.ht-about-dark,
	.ht-numbers,
	.ht-why-section,
	.ht-promise {

		padding:
			65px 18px;
	}

	.ht-about-dark-grid {

		grid-template-columns: 1fr;
	}

	.ht-services-grid {

		grid-template-columns: 1fr;
	}

	.ht-values-grid {

		grid-template-columns:
			repeat(2, 1fr);
	}

	.ht-why-grid {

		grid-template-columns: 1fr;
	}

}

@media (max-width: 480px) {

	.ht-about-hero h1 {

		font-size: 42px;
	}

	.ht-about-hero-tags {

		gap: 7px;
	}

	.ht-about-hero-tag {

		font-size: 11px;

		padding:
			7px 11px;
	}

	.ht-about-highlight {

		padding: 28px 25px;
	}

	.ht-about-dark-card {

		padding: 28px 23px;
	}

	.ht-values-grid {

		grid-template-columns: 1fr 1fr;
	}

	.ht-number {

		font-size: 29px;
	}

}