/* =========================================================
   BIJJOU ADS — HOME PAGE
   Loaded only on the front page.
========================================================= */

/* ==================================================
   HOME HERO
================================================== */

.home-hero {
	position: relative;

	overflow: hidden;

	background:
		radial-gradient(
			circle at 76% 28%,
			rgba(214, 161, 63, 0.13),
			transparent 34%
		),
		#000000;

	color: #ffffff;
}


.home-hero::before {
	content: "";

	position: absolute;

	inset: 0;

	pointer-events: none;

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

	background-size:
		54px
		54px;

	mask-image:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.55),
			transparent 82%
		);

	-webkit-mask-image:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.55),
			transparent 82%
		);
}


/* ==================================================
   HERO CONTAINER
================================================== */

.hero-container {
	position: relative;

	z-index: 1;

	width:
		calc(100% - 64px);

	max-width:
		var(
			--container-width,
			1200px
		);

	min-height:
		calc(
			100svh -
			var(--header-height, 88px)
		);

	margin:
		0 auto;

	padding:
		72px
		0
		84px;

	display:
		grid;

	grid-template-columns:
		minmax(0, 1.02fr)
		minmax(420px, 0.98fr);

	align-items:
		center;

	gap:
		clamp(
			54px,
			6vw,
			96px
		);
}


/* ==================================================
   HERO COPY
================================================== */

.hero-copy {
	max-width:
		660px;
}


.hero-kicker {
	display:
		inline-flex;

	align-items:
		center;

	gap:
		9px;

	margin-bottom:
		24px;

	padding:
		8px
		12px;

	border:
		1px solid
		rgba(214, 161, 63, 0.28);

	border-radius:
		999px;

	background:
		rgba(214, 161, 63, 0.08);

	color:
		#e5bd6f;

	font-size:
		12px;

	font-weight:
		650;

	line-height:
		1;

	letter-spacing:
		0.04em;
}


.hero-kicker-dot {
	width:
		7px;

	height:
		7px;

	flex:
		0 0 7px;

	border-radius:
		50%;

	background:
		var(
			--bijjou-gold,
			#d6a13f
		);

	box-shadow:
		0 0 18px
		rgba(214, 161, 63, 0.55);
}


/* ==================================================
   HERO HEADING
================================================== */

.hero-title {
	max-width:
		650px;

	margin:
		0;

	color:
		#ffffff;

	font-size:
		clamp(
			52px,
			5.6vw,
			78px
		);

	font-weight:
		760;

	line-height:
		0.99;

	letter-spacing:
		-0.055em;

	text-wrap:
		balance;
}


.hero-title span {
	display:
		block;

	color:
		var(
			--bijjou-gold,
			#d6a13f
		);
}


.hero-description {
	max-width:
		590px;

	margin:
		27px
		0
		0;

	color:
		#aaa7a0;

	font-size:
		17px;

	line-height:
		1.75;
}


/* ==================================================
   HERO ACTIONS
================================================== */

.hero-actions {
	display:
		flex;

	align-items:
		center;

	flex-wrap:
		wrap;

	gap:
		12px;

	margin-top:
		34px;
}


.hero-button {
	min-height:
		50px;

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		9px;

	padding:
		0 22px;

	border-radius:
		9px;

	font-size:
		14px;

	font-weight:
		650;

	line-height:
		1;

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


/* Primary */

.hero-button-primary {
	border:
		1px solid
		var(
			--bijjou-gold,
			#d6a13f
		);

	background:
		var(
			--bijjou-gold,
			#d6a13f
		);

	color:
		#000000;
}


.hero-button-primary svg {
	width:
		18px;

	height:
		18px;

	flex-shrink:
		0;

	transition:
		transform 180ms ease;
}


.hero-button-primary:hover {
	background:
		var(
			--bijjou-gold-light,
			#e6bc67
		);

	border-color:
		var(
			--bijjou-gold-light,
			#e6bc67
		);

	color:
		#000000;

	transform:
		translateY(-1px);

	box-shadow:
		0 12px 32px
		rgba(214, 161, 63, 0.20);
}


.hero-button-primary:hover svg {
	transform:
		translateX(3px);
}


/* Secondary */

.hero-button-secondary {
	border:
		1px solid
		rgba(255, 255, 255, 0.16);

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

	color:
		#ffffff;
}


.hero-button-secondary:hover {
	border-color:
		rgba(214, 161, 63, 0.55);

	background:
		rgba(214, 161, 63, 0.07);

	color:
		var(
			--bijjou-gold-light,
			#e6bc67
		);

	transform:
		translateY(-1px);
}


/* ==================================================
   HERO PROOF
================================================== */

.hero-proof {
	display:
		flex;

	align-items:
		center;

	flex-wrap:
		wrap;

	gap:
		12px 22px;

	margin-top:
		30px;
}


.hero-proof-item {
	display:
		inline-flex;

	align-items:
		center;

	gap:
		8px;

	color:
		#8f8c86;

	font-size:
		12px;

	font-weight:
		520;
}


.hero-proof-icon {
	width:
		18px;

	height:
		18px;

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	flex:
		0 0 18px;

	border:
		1px solid
		rgba(214, 161, 63, 0.28);

	border-radius:
		50%;

	background:
		rgba(214, 161, 63, 0.08);

	color:
		var(
			--bijjou-gold-light,
			#e6bc67
		);

	font-size:
		10px;

	font-weight:
		700;
}


/* ==================================================
   HERO VISUAL
================================================== */

.hero-visual {
	position:
		relative;

	width:
		100%;

	min-height:
		510px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;
}


.hero-glow {
	position:
		absolute;

	border-radius:
		50%;

	pointer-events:
		none;

	filter:
		blur(10px);
}


.hero-glow-one {
	top:
		30px;

	right:
		-55px;

	width:
		280px;

	height:
		280px;

	background:
		rgba(214, 161, 63, 0.08);
}


.hero-glow-two {
	bottom:
		15px;

	left:
		-35px;

	width:
		220px;

	height:
		220px;

	background:
		rgba(214, 161, 63, 0.045);
}


/* ==================================================
   PERFORMANCE CARD
================================================== */

.hero-performance-card {
	position:
		relative;

	z-index:
		1;

	width:
		100%;

	max-width:
		520px;

	padding:
		26px;

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

	border-radius:
		22px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.055),
			rgba(255, 255, 255, 0.018)
		);

	box-shadow:
		0 30px 90px
		rgba(0, 0, 0, 0.42),
		inset 0 1px 0
		rgba(255, 255, 255, 0.035);

	backdrop-filter:
		blur(16px);

	-webkit-backdrop-filter:
		blur(16px);
}


.hero-performance-card::before {
	content:
		"";

	position:
		absolute;

	inset:
		0;

	border-radius:
		inherit;

	pointer-events:
		none;

	background:
		radial-gradient(
			circle at 82% 8%,
			rgba(214, 161, 63, 0.10),
			transparent 34%
		);
}


/* ==================================================
   CARD HEADER
================================================== */

.hero-card-header {
	position:
		relative;

	z-index:
		1;

	display:
		flex;

	align-items:
		flex-start;

	justify-content:
		space-between;

	gap:
		20px;
}


.hero-card-eyebrow {
	margin:
		0;

	color:
		var(
			--bijjou-gold,
			#d6a13f
		);

	font-size:
		10px;

	font-weight:
		700;

	line-height:
		1.3;

	letter-spacing:
		0.12em;
}


.hero-card-title {
	margin:
		7px
		0
		0;

	color:
		#ffffff;

	font-size:
		clamp(
			25px,
			2.5vw,
			34px
		);

	font-weight:
		700;

	line-height:
		1.08;

	letter-spacing:
		-0.035em;
}


/* Status */

.hero-card-status {
	display:
		inline-flex;

	align-items:
		center;

	gap:
		7px;

	flex-shrink:
		0;

	padding:
		7px
		10px;

	border:
		1px solid
		rgba(214, 161, 63, 0.20);

	border-radius:
		999px;

	background:
		rgba(214, 161, 63, 0.07);

	color:
		#d7c08f;

	font-size:
		10px;

	font-weight:
		650;

	line-height:
		1;
}


.hero-card-status-dot {
	width:
		6px;

	height:
		6px;

	border-radius:
		50%;

	background:
		var(
			--bijjou-gold,
			#d6a13f
		);

	box-shadow:
		0 0 12px
		rgba(214, 161, 63, 0.55);
}


/* ==================================================
   HERO CHART
================================================== */

.hero-chart-wrap {
	position:
		relative;

	z-index:
		1;

	margin-top:
		34px;

	padding:
		19px
		18px
		13px;

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

	border-radius:
		16px;

	background:
		rgba(0, 0, 0, 0.28);
}


.hero-chart-labels {
	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	gap:
		16px;

	margin-bottom:
		11px;

	color:
		#77746e;

	font-size:
		9px;

	font-weight:
		600;

	letter-spacing:
		0.025em;
}


.hero-chart {
	display:
		block;

	width:
		100%;

	height:
		190px;

	overflow:
		visible;
}


.hero-chart-grid {
	fill:
		none;

	stroke:
		rgba(255, 255, 255, 0.055);

	stroke-width:
		1;

	vector-effect:
		non-scaling-stroke;
}


.hero-chart-area {
	fill:
		url(#bijjouHeroArea);
}


.hero-chart-line {
	fill:
		none;

	stroke:
		var(
			--bijjou-gold,
			#d6a13f
		);

	stroke-width:
		3;

	stroke-linecap:
		round;

	stroke-linejoin:
		round;

	vector-effect:
		non-scaling-stroke;

	filter:
		drop-shadow(
			0 0 9px
			rgba(214, 161, 63, 0.28)
		);
}


.hero-chart-point {
	fill:
		var(
			--bijjou-gold-light,
			#e6bc67
		);

	stroke:
		#000000;

	stroke-width:
		3;

	vector-effect:
		non-scaling-stroke;
}


/* ==================================================
   HERO SYSTEM GRID
================================================== */

.hero-system-grid {
	position:
		relative;

	z-index:
		1;

	display:
		grid;

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

	gap:
		8px;

	margin-top:
		12px;
}


.hero-system-item {
	min-width:
		0;

	padding:
		13px
		11px;

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

	border-radius:
		12px;

	background:
		rgba(255, 255, 255, 0.025);
}


.hero-system-number {
	display:
		block;

	color:
		var(
			--bijjou-gold,
			#d6a13f
		);

	font-size:
		9px;

	font-weight:
		700;

	line-height:
		1;

	letter-spacing:
		0.08em;
}


.hero-system-name {
	display:
		block;

	margin-top:
		7px;

	overflow:
		hidden;

	color:
		#d5d2cc;

	font-size:
		11px;

	font-weight:
		600;

	line-height:
		1.2;

	text-overflow:
		ellipsis;

	white-space:
		nowrap;
}


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

@media (max-width: 1080px) {

	.hero-container {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(380px, 0.9fr);

		gap:
			48px;
	}


	.hero-title {
		font-size:
			clamp(
				48px,
				5.4vw,
				66px
			);
	}

}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {

	.hero-container {
		width:
			calc(100% - 40px);

		min-height:
			auto;

		padding:
			66px
			0
			76px;

		grid-template-columns:
			1fr;

		gap:
			58px;
	}


	.hero-copy {
		max-width:
			700px;
	}


	.hero-title {
		max-width:
			700px;

		font-size:
			clamp(
				48px,
				8vw,
				68px
			);
	}


	.hero-visual {
		min-height:
			0;

		justify-content:
			flex-start;
	}


	.hero-performance-card {
		max-width:
			620px;
	}

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

	.hero-container {
		width:
			calc(100% - 32px);

		padding:
			52px
			0
			62px;

		gap:
			46px;
	}


	.hero-kicker {
		margin-bottom:
			20px;

		font-size:
			11px;
	}


	.hero-title {
		font-size:
			clamp(
				42px,
				13vw,
				56px
			);

		line-height:
			1.01;

		letter-spacing:
			-0.048em;
	}


	.hero-description {
		margin-top:
			22px;

		font-size:
			16px;

		line-height:
			1.68;
	}


	.hero-actions {
		align-items:
			stretch;

		flex-direction:
			column;

		margin-top:
			29px;
	}


	.hero-button {
		width:
			100%;
	}


	.hero-proof {
		align-items:
			flex-start;

		flex-direction:
			column;

		gap:
			10px;

		margin-top:
			26px;
	}


	.hero-performance-card {
		padding:
			18px;

		border-radius:
			18px;
	}


	.hero-card-header {
		align-items:
			flex-start;

		flex-direction:
			column;

		gap:
			14px;
	}


	.hero-card-title {
		font-size:
			27px;
	}


	.hero-chart-wrap {
		margin-top:
			24px;

		padding:
			15px
			13px
			10px;
	}


	.hero-chart {
		height:
			150px;
	}


	.hero-system-grid {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

	.hero-button,
	.hero-button-primary svg {
		transition:
			none;
	}

}

/* ==================================================
   WHY BIJJOU ADS
================================================== */

.why-bijjou {
	position: relative;

	overflow: hidden;

	background: #f8f6f1;

	color: #171612;
}


/* Subtle background detail */

.why-bijjou::before {
	content: "";

	position: absolute;

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

	width: 520px;
	height: 520px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(214, 161, 63, 0.09) 0%,
			rgba(214, 161, 63, 0) 70%
		);

	pointer-events: none;
}


/* ==================================================
   CONTAINER
================================================== */

.why-bijjou-container {
	position: relative;

	z-index: 1;

	width: calc(100% - 64px);

	max-width:
		var(
			--container-width,
			1200px
		);

	margin: 0 auto;

	padding:
		112px
		0
		120px;
}


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

.why-bijjou-intro {
	display: grid;

	grid-template-columns:
		minmax(180px, 0.36fr)
		minmax(0, 1.64fr);

	gap:
		64px;

	align-items:
		start;

	padding-bottom:
		76px;

	border-bottom:
		1px solid
		rgba(23, 22, 18, 0.12);
}


/* Label */

.why-bijjou-label {
	display: flex;

	align-items: center;

	gap: 11px;

	padding-top: 11px;

	color: #8d6825;

	font-size: 15px;

	font-weight: 750;

	line-height: 1;

	letter-spacing: 0.12em;

	white-space: nowrap;
}


.why-bijjou-label-line {
	display: block;

	width: 28px;
	height: 1px;

	background: #d6a13f;
}


/* ==================================================
   HEADING
================================================== */

.why-bijjou-title {
	max-width: 880px;

	margin: 0;

	color: #171612;

	font-size:
		clamp(
			42px,
			4.7vw,
			66px
		);

	font-weight: 730;

	line-height: 1.06;

	letter-spacing: -0.052em;

	text-wrap: balance;
}


.why-bijjou-title span {
	color: #b68129;
}


/* ==================================================
   CONTENT
================================================== */

.why-bijjou-content {
	display: grid;

	grid-template-columns:
		minmax(280px, 0.72fr)
		minmax(0, 1.28fr);

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

	padding-top:
		76px;
}


/* ==================================================
   DESCRIPTION
================================================== */

.why-bijjou-description {
	max-width: 430px;
}


.why-bijjou-description p {
	margin: 0;

	color: #625f58;

	font-size: 16px;

	line-height: 1.82;
}


.why-bijjou-description p + p {
	margin-top: 24px;
}


/* ==================================================
   PRINCIPLES
================================================== */

.why-bijjou-principles {
	margin: 0;

	padding: 0;

	list-style: none;

	border-top:
		1px solid
		rgba(23, 22, 18, 0.12);
}


.why-principle {
	position: relative;

	display: grid;

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

	gap:
		22px;

	align-items:
		start;

	margin: 0;

	padding:
		30px
		0;

	border-bottom:
		1px solid
		rgba(23, 22, 18, 0.12);
}


/* Number */

.why-principle-number {
	padding-top: 4px;

	color: #b68129;

	font-size: 11px;

	font-weight: 750;

	line-height: 1;

	letter-spacing: 0.08em;
}


/* Content */

.why-principle-content h3 {
	margin: 0;

	color: #171612;

	font-size:
		clamp(
			21px,
			2vw,
			27px
		);

	font-weight: 680;

	line-height: 1.15;

	letter-spacing: -0.035em;
}


.why-principle-content p {
	max-width: 550px;

	margin:
		11px
		0
		0;

	color: #767169;

	font-size: 14px;

	line-height: 1.7;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {

	.why-bijjou-container {
		width:
			calc(100% - 40px);

		padding:
			88px
			0
			94px;
	}


	.why-bijjou-intro {
		grid-template-columns:
			1fr;

		gap:
			30px;

		padding-bottom:
			56px;
	}


	.why-bijjou-label {
		padding-top: 0;
	}


	.why-bijjou-title {
		max-width: 760px;
	}


	.why-bijjou-content {
		grid-template-columns:
			1fr;

		gap:
			52px;

		padding-top:
			56px;
	}


	.why-bijjou-description {
		max-width: 650px;
	}

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

	.why-bijjou-container {
		width:
			calc(100% - 32px);

		padding:
			72px
			0
			76px;
	}


	.why-bijjou-intro {
		gap:
			24px;

		padding-bottom:
			44px;
	}


	.why-bijjou-title {
		font-size:
			clamp(
				38px,
				11vw,
				48px
			);

		line-height: 1.08;

		letter-spacing: -0.045em;
	}


	.why-bijjou-content {
		gap:
			42px;

		padding-top:
			44px;
	}


	.why-bijjou-description p {
		font-size: 15px;

		line-height: 1.75;
	}


	.why-principle {
		grid-template-columns:
			38px
			minmax(0, 1fr);

		gap:
			14px;

		padding:
			26px
			0;
	}


	.why-principle-content h3 {
		font-size: 21px;
	}

}

/* ==================================================
   HOME SERVICES
================================================== */

.home-services {
	position: relative;
	overflow: hidden;

	background: #000000;
	color: #ffffff;
}


.home-services::before {
	content: "";

	position: absolute;

	top: -250px;
	left: 50%;

	width: 760px;
	height: 500px;

	transform: translateX(-50%);

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(214, 161, 63, 0.10) 0%,
			rgba(214, 161, 63, 0) 70%
		);

	pointer-events: none;
}


/* ==================================================
   SERVICES CONTAINER
================================================== */

.services-container {
	position: relative;
	z-index: 1;

	width: calc(100% - 64px);
	max-width: var(--container-width, 1200px);

	margin: 0 auto;

	padding: 112px 0 120px;
}


/* ==================================================
   SERVICES HEADER
================================================== */

.services-header {
	display: grid;

	grid-template-columns:
		minmax(0, 1.35fr)
		minmax(280px, 0.65fr);

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

	align-items: end;

	padding-bottom: 64px;
}


.services-heading-wrap {
	max-width: 760px;
}


/* Label */

.services-label {
	display: flex;
	align-items: center;

	gap: 11px;

	margin-bottom: 27px;

	color: #d6a13f;

	font-size: 15px;
	font-weight: 750;

	line-height: 1;

	letter-spacing: 0.12em;
}


.services-label-line {
	width: 28px;
	height: 1px;

	flex-shrink: 0;

	background: #d6a13f;
}


/* ==================================================
   SERVICES TITLE
================================================== */

.services-title {
	margin: 0;

	color: #ffffff;

	font-size: clamp(
		44px,
		4.8vw,
		66px
	);

	font-weight: 730;

	line-height: 1.04;

	letter-spacing: -0.052em;

	text-wrap: balance;
}


.services-title span {
	display: block;

	color: #d6a13f;
}


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

.services-intro {
	max-width: 410px;
}


.services-intro p {
	margin: 0;

	color: #9c9992;

	font-size: 15px;

	line-height: 1.78;
}


.services-all-link {
	display: inline-flex;
	align-items: center;

	gap: 9px;

	margin-top: 25px;

	color: #ffffff;

	font-size: 13px;
	font-weight: 650;

	line-height: 1;

	transition: color 180ms ease;
}


.services-all-link svg {
	width: 17px;
	height: 17px;

	flex-shrink: 0;

	transition: transform 180ms ease;
}


.services-all-link:hover {
	color: #d6a13f;
}


.services-all-link:hover svg {
	transform: translateX(3px);
}


/* ==================================================
   SERVICES LIST
================================================== */

.services-grid {
	display: block;

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


/* ==================================================
   SERVICE ROW
================================================== */

.service-card {
	position: relative;

	display: grid;

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

	gap: 34px;

	align-items: center;

	min-height: 0;

	margin: 0;

	padding: 38px 4px;

	overflow: hidden;

	background: transparent;

	border: 0;

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

	transition:
		padding 220ms ease,
		border-color 220ms ease;
}


.service-card::before {
	content: "";

	position: absolute;

	inset: 0;

	opacity: 0;

	background:
		linear-gradient(
			90deg,
			rgba(214, 161, 63, 0.07),
			rgba(214, 161, 63, 0.015),
			transparent 78%
		);

	pointer-events: none;

	transition: opacity 220ms ease;
}


.service-card:hover {
	padding-left: 16px;
	padding-right: 16px;

	border-color:
		rgba(214, 161, 63, 0.30);
}


.service-card:hover::before {
	opacity: 1;
}


/* ==================================================
   SERVICE NUMBER + ICON
================================================== */

.service-card-top {
	position: relative;
	z-index: 1;

	display: flex;
	align-items: center;

	gap: 18px;
}


.service-number {
	color: #d6a13f;

	font-size: 11px;
	font-weight: 750;

	line-height: 1;

	letter-spacing: 0.10em;
}


.service-icon {
	width: 40px;
	height: 40px;

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

	flex: 0 0 40px;

	border:
		1px solid
		rgba(214, 161, 63, 0.28);

	border-radius: 50%;

	background: transparent;

	color: #d6a13f;

	transition:
		background-color 220ms ease,
		border-color 220ms ease,
		color 220ms ease,
		transform 220ms ease;
}


.service-icon svg {
	width: 18px;
	height: 18px;

	fill: none;

	stroke: currentColor;

	stroke-width: 1.6;

	stroke-linecap: round;
	stroke-linejoin: round;
}


.service-card:hover .service-icon {
	border-color: #d6a13f;

	background: #d6a13f;

	color: #000000;

	transform: rotate(4deg);
}


/* ==================================================
   SERVICE CONTENT
================================================== */

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

	display: grid;

	grid-template-columns:
		minmax(220px, 0.82fr)
		minmax(280px, 1.18fr);

	gap: 50px;

	align-items: center;

	margin: 0;
}


.service-card-content h3 {
	max-width: 330px;

	margin: 0;

	color: #ffffff;

	font-size: clamp(
		22px,
		2.2vw,
		30px
	);

	font-weight: 650;

	line-height: 1.12;

	letter-spacing: -0.035em;

	transition: color 180ms ease;
}


.service-card:hover
.service-card-content h3 {
	color: #d6a13f;
}


.service-card-content p {
	max-width: 470px;

	margin: 0;

	color: #8f8c86;

	font-size: 14px;

	line-height: 1.75;
}


/* ==================================================
   SERVICE LINK
================================================== */

.service-card-link {
	position: relative;
	z-index: 1;

	display: flex;
	align-items: center;
	justify-content: flex-end;

	gap: 12px;

	margin: 0;
	padding: 0;

	color: #8f8c86;

	font-size: 12px;
	font-weight: 650;

	line-height: 1;

	white-space: nowrap;

	transition: color 180ms ease;
}


.service-link-arrow {
	width: 38px;
	height: 38px;

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

	flex: 0 0 38px;

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

	border-radius: 50%;

	color: #ffffff;

	font-size: 15px;

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


.service-card:hover
.service-card-link {
	color: #d6a13f;
}


.service-card:hover
.service-link-arrow {
	border-color: #d6a13f;

	background: #d6a13f;

	color: #000000;

	transform:
		translate(
			3px,
			-3px
		);
}


/* ==================================================
   SERVICES TABLET
================================================== */

@media (max-width: 1000px) {

	.services-header {
		grid-template-columns: 1fr;

		gap: 36px;
	}


	.services-intro {
		max-width: 620px;
	}


	.service-card {
		grid-template-columns:
			90px
			minmax(0, 1fr)
			55px;

		gap: 24px;
	}


	.service-card-content {
		grid-template-columns: 1fr;

		gap: 12px;
	}


	.service-card-content p {
		max-width: 560px;
	}


	.service-card-link span:first-child {
		display: none;
	}

}


/* ==================================================
   SERVICES SMALL TABLET
================================================== */

@media (max-width: 900px) {

	.services-container {
		width: calc(100% - 40px);

		padding:
			88px
			0
			94px;
	}


	.services-header {
		padding-bottom: 52px;
	}

}


/* ==================================================
   SERVICES MOBILE
================================================== */

@media (max-width: 650px) {

	.services-container {
		width: calc(100% - 32px);

		padding:
			72px
			0
			76px;
	}


	.services-header {
		gap: 30px;

		padding-bottom: 44px;
	}


	.services-label {
		margin-bottom: 22px;

		font-size: 13px;
	}


	.services-title {
		font-size: clamp(
			38px,
			11vw,
			48px
		);

		line-height: 1.07;

		letter-spacing: -0.045em;
	}


	.service-card {
		grid-template-columns:
			minmax(0, 1fr)
			auto;

		gap:
			22px
			16px;

		padding:
			28px
			0;
	}


	.service-card:hover {
		padding-left: 0;
		padding-right: 0;
	}


	.service-card-top {
		grid-column:
			1 / 2;

		gap: 14px;
	}


	.service-card-content {
		grid-column:
			1 / -1;

		display: block;
	}


	.service-card-content h3 {
		font-size: 23px;
	}


	.service-card-content p {
		margin-top: 12px;

		font-size: 14px;

		line-height: 1.7;
	}


	.service-card-link {
		grid-column:
			2 / 3;

		grid-row:
			1 / 2;

		align-self: center;
	}


	.service-card-link span:first-child {
		display: none;
	}


	.service-link-arrow {
		width: 36px;
		height: 36px;

		flex-basis: 36px;
	}

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

	.service-card,
	.service-card::before,
	.service-icon,
	.service-card-link,
	.service-link-arrow,
	.services-all-link svg {
		transition: none;
	}

}

/* ==================================================
   HOW WE WORK
================================================== */

.how-we-work {
	position: relative;

	overflow: hidden;

	background: #f8f6f1;

	color: #171612;
}


/* ==================================================
   SUBTLE BACKGROUND DETAIL
================================================== */

.how-we-work::before {
	content: "";

	position: absolute;

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

	width: 560px;
	height: 560px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(214, 161, 63, 0.09) 0%,
			rgba(214, 161, 63, 0) 70%
		);

	pointer-events: none;
}


/* ==================================================
   CONTAINER
================================================== */

.how-we-work-container {
	position: relative;

	z-index: 1;

	width: calc(100% - 64px);

	max-width:
		var(
			--container-width,
			1200px
		);

	margin: 0 auto;

	padding:
		112px
		0
		120px;
}


/* ==================================================
   HEADER
================================================== */

.how-we-work-header {
	display: grid;

	grid-template-columns:
		minmax(0, 1.35fr)
		minmax(280px, 0.65fr);

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

	align-items: end;

	padding-bottom: 72px;
}


/* ==================================================
   LABEL
================================================== */

.how-we-work-label {
	display: flex;

	align-items: center;

	gap: 11px;

	margin-bottom: 27px;

	color: #8d6825;

	font-size: 15px;

	font-weight: 750;

	line-height: 1;

	letter-spacing: 0.12em;
}


.how-we-work-label-line {
	width: 28px;
	height: 1px;

	flex-shrink: 0;

	background: #d6a13f;
}


/* ==================================================
   TITLE
================================================== */

.how-we-work-title {
	max-width: 780px;

	margin: 0;

	color: #171612;

	font-size:
		clamp(
			44px,
			4.8vw,
			66px
		);

	font-weight: 730;

	line-height: 1.04;

	letter-spacing: -0.052em;

	text-wrap: balance;
}


.how-we-work-title span {
	display: block;

	color: #b68129;
}


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

.how-we-work-intro {
	max-width: 410px;
}


.how-we-work-intro p {
	margin: 0;

	color: #69655d;

	font-size: 15px;

	line-height: 1.8;
}


/* ==================================================
   PROCESS LIST
================================================== */

.process-list {
	position: relative;

	display: grid;

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

	gap: 0;

	margin: 0;

	padding: 0;

	list-style: none;

	border-top:
		1px solid
		rgba(23, 22, 18, 0.14);
}


/* Connecting line */

.process-list::before {
	content: "";

	position: absolute;

	top: 74px;
	left: 0;
	right: 0;

	height: 1px;

	background:
		rgba(23, 22, 18, 0.14);

	pointer-events: none;
}


/* ==================================================
   PROCESS STEP
================================================== */

.process-step {
	position: relative;

	min-width: 0;

	padding:
		38px
		34px
		42px
		0;

	border-right:
		1px solid
		rgba(23, 22, 18, 0.10);
}


.process-step:not(:first-child) {
	padding-left: 34px;
}


.process-step:last-child {
	padding-right: 0;

	border-right: 0;
}


/* ==================================================
   STEP TOP
================================================== */

.process-step-top {
	position: relative;

	z-index: 2;

	min-height: 50px;

	display: flex;

	align-items: flex-start;

	justify-content: space-between;

	gap: 20px;
}


/* Number */

.process-number {
	color: #a77524;

	font-size: 11px;

	font-weight: 750;

	line-height: 1;

	letter-spacing: 0.10em;
}


/* Timeline marker */

.process-marker {
	position: absolute;

	top: 32px;
	left: 0;

	width: 13px;
	height: 13px;

	border:
		3px solid
		#f8f6f1;

	border-radius: 50%;

	background: #d6a13f;

	box-shadow:
		0 0 0 1px
		rgba(214, 161, 63, 0.48);

	transition:
		transform 200ms ease,
		box-shadow 200ms ease;
}


.process-step:hover
.process-marker {
	transform: scale(1.18);

	box-shadow:
		0 0 0 5px
		rgba(214, 161, 63, 0.10);
}


/* ==================================================
   STEP CONTENT
================================================== */

.process-content {
	margin-top: 34px;
}


.process-content h3 {
	margin: 0;

	color: #171612;

	font-size:
		clamp(
			23px,
			2.1vw,
			29px
		);

	font-weight: 680;

	line-height: 1.1;

	letter-spacing: -0.035em;

	transition:
		color 180ms ease;
}


.process-step:hover
.process-content h3 {
	color: #a77524;
}


.process-content p {
	margin:
		16px
		0
		0;

	color: #716d65;

	font-size: 14px;

	line-height: 1.75;
}


/* ==================================================
   PROCESS FOOTER
================================================== */

.process-footer {
	margin-top: 52px;

	padding-top: 30px;

	border-top:
		1px solid
		rgba(23, 22, 18, 0.12);
}


.process-footer p {
	max-width: 800px;

	margin: 0;

	color: #817c73;

	font-size: 14px;

	line-height: 1.7;
}


.process-footer p > span {
	color: #2c2a25;

	font-weight: 600;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1000px) {

	.how-we-work-header {
		grid-template-columns: 1fr;

		gap: 36px;
	}


	.how-we-work-intro {
		max-width: 620px;
	}


	.process-list {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);

		border-top: 0;
	}


	.process-list::before {
		display: none;
	}


	.process-step,
	.process-step:not(:first-child),
	.process-step:last-child {
		padding:
			34px
			28px;

		border:
			1px solid
			rgba(23, 22, 18, 0.11);

		border-right: 0;

		border-bottom: 0;
	}


	.process-step:nth-child(2n) {
		border-right:
			1px solid
			rgba(23, 22, 18, 0.11);
	}


	.process-step:nth-last-child(-n + 2) {
		border-bottom:
			1px solid
			rgba(23, 22, 18, 0.11);
	}


	.process-marker {
		position: static;

		width: 12px;
		height: 12px;

		border-width: 2px;
	}


	.process-step-top {
		align-items: center;

		min-height: 0;
	}


	.process-content {
		margin-top: 38px;
	}

}


/* ==================================================
   SMALL TABLET
================================================== */

@media (max-width: 900px) {

	.how-we-work-container {
		width:
			calc(100% - 40px);

		padding:
			88px
			0
			94px;
	}


	.how-we-work-header {
		padding-bottom: 56px;
	}

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

	.how-we-work-container {
		width:
			calc(100% - 32px);

		padding:
			72px
			0
			76px;
	}


	.how-we-work-header {
		gap: 30px;

		padding-bottom: 44px;
	}


	.how-we-work-label {
		margin-bottom: 22px;

		font-size: 13px;
	}


	.how-we-work-title {
		font-size:
			clamp(
				38px,
				11vw,
				48px
			);

		line-height: 1.07;

		letter-spacing: -0.045em;
	}


	.process-list {
		display: block;

		border-top:
			1px solid
			rgba(23, 22, 18, 0.12);
	}


	.process-step,
	.process-step:not(:first-child),
	.process-step:last-child,
	.process-step:nth-child(2n),
	.process-step:nth-last-child(-n + 2) {
		padding:
			28px
			0;

		border: 0;

		border-bottom:
			1px solid
			rgba(23, 22, 18, 0.12);
	}


	.process-step-top {
		justify-content: flex-start;

		gap: 14px;
	}


	.process-marker {
		width: 10px;
		height: 10px;
	}


	.process-content {
		margin-top: 20px;
	}


	.process-content h3 {
		font-size: 23px;
	}


	.process-content p {
		max-width: 520px;

		margin-top: 11px;
	}


	.process-footer {
		margin-top: 38px;
	}

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

	.process-marker,
	.process-content h3 {
		transition: none;
	}

}

/* ==================================================
   WHAT TO EXPECT
================================================== */

.what-to-expect {
	position: relative;
	overflow: hidden;

	background: #000000;
	color: #ffffff;
}


.what-to-expect::before {
	content: "";

	position: absolute;

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

	width: 560px;
	height: 560px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(214, 161, 63, 0.10) 0%,
			rgba(214, 161, 63, 0) 70%
		);

	pointer-events: none;
}


/* ==================================================
   CONTAINER
================================================== */

.what-to-expect-container {
	position: relative;
	z-index: 1;

	width: calc(100% - 64px);

	max-width:
		var(
			--container-width,
			1200px
		);

	margin: 0 auto;

	padding:
		112px
		0
		120px;
}


/* ==================================================
   HEADER
================================================== */

.what-to-expect-header {
	display: grid;

	grid-template-columns:
		minmax(0, 1.35fr)
		minmax(280px, 0.65fr);

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

	align-items: end;

	padding-bottom: 70px;
}


.what-to-expect-heading {
	max-width: 800px;
}


/* ==================================================
   LABEL
================================================== */

.what-to-expect-label {
	display: flex;
	align-items: center;

	gap: 11px;

	margin-bottom: 27px;

	color: #d6a13f;

	font-size: 15px;
	font-weight: 750;

	line-height: 1;

	letter-spacing: 0.12em;
}


.what-to-expect-label-line {
	width: 28px;
	height: 1px;

	flex-shrink: 0;

	background: #d6a13f;
}


/* ==================================================
   TITLE
================================================== */

.what-to-expect-title {
	margin: 0;

	color: #ffffff;

	font-size:
		clamp(
			44px,
			4.8vw,
			66px
		);

	font-weight: 730;

	line-height: 1.04;

	letter-spacing: -0.052em;

	text-wrap: balance;
}


.what-to-expect-title span {
	display: block;

	color: #d6a13f;
}


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

.what-to-expect-intro {
	max-width: 410px;
}


.what-to-expect-intro p {
	margin: 0;

	color: #9c9992;

	font-size: 15px;

	line-height: 1.8;
}


/* ==================================================
   EXPECTATION LIST
================================================== */

.expectation-list {
	border-top:
		1px solid
		rgba(255, 255, 255, 0.12);
}


/* ==================================================
   EXPECTATION ITEM
================================================== */

.expectation-item {
	position: relative;

	display: grid;

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

	gap: 32px;

	align-items: center;

	padding:
		34px
		4px;

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

	transition:
		padding 200ms ease,
		border-color 200ms ease;
}


.expectation-item::before {
	content: "";

	position: absolute;

	inset: 0;

	opacity: 0;

	background:
		linear-gradient(
			90deg,
			rgba(214, 161, 63, 0.06),
			transparent 75%
		);

	pointer-events: none;

	transition:
		opacity 200ms ease;
}


.expectation-item:hover {
	padding-left: 16px;
	padding-right: 16px;

	border-color:
		rgba(214, 161, 63, 0.30);
}


.expectation-item:hover::before {
	opacity: 1;
}


/* ==================================================
   NUMBER
================================================== */

.expectation-number {
	position: relative;
	z-index: 1;

	color: #d6a13f;

	font-size: 11px;
	font-weight: 750;

	line-height: 1;

	letter-spacing: 0.10em;
}


/* ==================================================
   CONTENT
================================================== */

.expectation-content {
	position: relative;
	z-index: 1;

	display: grid;

	grid-template-columns:
		minmax(240px, 0.75fr)
		minmax(280px, 1.25fr);

	gap: 50px;

	align-items: center;
}


.expectation-content h3 {
	margin: 0;

	color: #ffffff;

	font-size:
		clamp(
			23px,
			2.3vw,
			31px
		);

	font-weight: 660;

	line-height: 1.12;

	letter-spacing: -0.035em;

	transition:
		color 180ms ease;
}


.expectation-item:hover
.expectation-content h3 {
	color: #d6a13f;
}


.expectation-content p {
	max-width: 520px;

	margin: 0;

	color: #8f8c86;

	font-size: 14px;

	line-height: 1.75;
}


/* ==================================================
   FOOTER MESSAGE
================================================== */

.what-to-expect-footer {
	margin-top: 48px;

	padding-top: 28px;

	border-top:
		1px solid
		rgba(255, 255, 255, 0.10);
}


.what-to-expect-footer p {
	max-width: 820px;

	margin: 0;

	color: #77746e;

	font-size: 14px;

	line-height: 1.7;
}


.what-to-expect-footer p span {
	color: #d2cec6;

	font-weight: 600;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1000px) {

	.what-to-expect-header {
		grid-template-columns: 1fr;

		gap: 36px;
	}


	.what-to-expect-intro {
		max-width: 620px;
	}


	.expectation-content {
		grid-template-columns: 1fr;

		gap: 10px;
	}

}


/* ==================================================
   SMALL TABLET
================================================== */

@media (max-width: 900px) {

	.what-to-expect-container {
		width:
			calc(100% - 40px);

		padding:
			88px
			0
			94px;
	}


	.what-to-expect-header {
		padding-bottom: 54px;
	}

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

	.what-to-expect-container {
		width:
			calc(100% - 32px);

		padding:
			72px
			0
			76px;
	}


	.what-to-expect-header {
		gap: 30px;

		padding-bottom: 44px;
	}


	.what-to-expect-label {
		margin-bottom: 22px;

		font-size: 13px;
	}


	.what-to-expect-title {
		font-size:
			clamp(
				38px,
				11vw,
				48px
			);

		line-height: 1.07;

		letter-spacing: -0.045em;
	}


	.expectation-item {
		grid-template-columns:
			42px
			minmax(0, 1fr);

		gap: 14px;

		align-items: start;

		padding:
			28px
			0;
	}


	.expectation-item:hover {
		padding-left: 0;
		padding-right: 0;
	}


	.expectation-content {
		display: block;
	}


	.expectation-content h3 {
		font-size: 23px;
	}


	.expectation-content p {
		margin-top: 11px;

		font-size: 14px;
	}

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

	.expectation-item,
	.expectation-item::before,
	.expectation-content h3 {
		transition: none;
	}

}

/* ==================================================
   AI SEARCH / GEO
================================================== */

.ai-search-section {
	position: relative;

	overflow: hidden;

	background:
		linear-gradient(
			135deg,
			#ffffff 0%,
			#faf8f3 48%,
			#f4ecdb 100%
		);

	color: #171612;
}


/* Decorative glow */

.ai-search-section::before {
	content: "";

	position: absolute;

	top: -260px;
	right: -180px;

	width: 680px;
	height: 680px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(214, 161, 63, 0.18) 0%,
			rgba(214, 161, 63, 0) 68%
		);

	pointer-events: none;
}


/* ==================================================
   CONTAINER
================================================== */

.ai-search-container {
	position: relative;
	z-index: 1;

	width: calc(100% - 64px);

	max-width:
		var(
			--container-width,
			1200px
		);

	margin: 0 auto;

	padding:
		112px
		0
		120px;

	display: grid;

	grid-template-columns:
		minmax(0, 0.95fr)
		minmax(420px, 1.05fr);

	align-items: center;

	gap:
		clamp(
			60px,
			8vw,
			110px
		);
}


/* ==================================================
   CONTENT
================================================== */

.ai-search-content {
	max-width: 610px;
}


/* Label */

.ai-search-label {
	display: flex;
	align-items: center;

	gap: 11px;

	margin-bottom: 27px;

	color: #8d6825;

	font-size: 15px;
	font-weight: 750;

	line-height: 1;

	letter-spacing: 0.12em;
}


.ai-search-label-line {
	width: 28px;
	height: 1px;

	flex-shrink: 0;

	background: #d6a13f;
}


/* ==================================================
   TITLE
================================================== */

.ai-search-title {
	margin: 0;

	color: #171612;

	font-size:
		clamp(
			43px,
			4.6vw,
			64px
		);

	font-weight: 730;

	line-height: 1.04;

	letter-spacing: -0.052em;

	text-wrap: balance;
}


.ai-search-title span {
	display: block;

	color: #b68129;
}


/* ==================================================
   DESCRIPTION
================================================== */

.ai-search-description {
	max-width: 590px;

	margin:
		28px
		0
		0;

	color: #656159;

	font-size: 16px;

	line-height: 1.8;
}


/* ==================================================
   GEO EXPLANATION
================================================== */

.ai-search-name {
	display: grid;

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

	gap: 16px;

	align-items: start;

	margin-top: 28px;

	padding-top: 28px;

	border-top:
		1px solid
		rgba(23, 22, 18, 0.12);
}


.ai-search-name-badge {
	min-width: 52px;
	height: 28px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding:
		0
		10px;

	border-radius: 999px;

	background: #171612;

	color: #d6a13f;

	font-size: 11px;
	font-weight: 750;

	line-height: 1;

	letter-spacing: 0.08em;
}


.ai-search-name p {
	margin: 0;

	color: #777269;

	font-size: 13px;

	line-height: 1.65;
}


/* ==================================================
   CTA
================================================== */

.ai-search-cta {
	min-height: 48px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 9px;

	margin-top: 30px;

	padding:
		0
		20px;

	border-radius: 8px;

	background: #171612;

	color: #ffffff;

	font-size: 13px;
	font-weight: 650;

	line-height: 1;

	transition:
		background-color 180ms ease,
		color 180ms ease,
		transform 180ms ease,
		box-shadow 180ms ease;
}


.ai-search-cta svg {
	width: 17px;
	height: 17px;

	flex-shrink: 0;

	transition:
		transform 180ms ease;
}


.ai-search-cta:hover {
	background: #d6a13f;

	color: #000000;

	transform: translateY(-1px);

	box-shadow:
		0 12px 30px
		rgba(214, 161, 63, 0.18);
}


.ai-search-cta:hover svg {
	transform: translateX(3px);
}


/* ==================================================
   VISUAL
================================================== */

.ai-search-visual {
	position: relative;

	width: 100%;
}


/* ==================================================
   PANEL
================================================== */

.ai-search-panel {
	position: relative;

	width: 100%;

	padding: 26px;

	border:
		1px solid
		rgba(23, 22, 18, 0.10);

	border-radius: 22px;

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

	box-shadow:
		0 30px 80px
		rgba(23, 22, 18, 0.08);

	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}


/* ==================================================
   SEARCH PATH
================================================== */

.ai-path {
	padding: 21px;

	border:
		1px solid
		rgba(23, 22, 18, 0.09);

	border-radius: 15px;

	background:
		rgba(248, 246, 241, 0.70);
}


.ai-path-modern {
	border-color:
		rgba(214, 161, 63, 0.30);

	background:
		linear-gradient(
			135deg,
			rgba(214, 161, 63, 0.08),
			rgba(214, 161, 63, 0.025)
		);
}


/* ==================================================
   PATH HEADER
================================================== */

.ai-path-header {
	display: flex;
	align-items: center;

	gap: 10px;

	color: #69655d;

	font-size: 11px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.04em;
}


.ai-path-modern
.ai-path-header {
	color: #8d6825;
}


.ai-path-number {
	color: #b68129;

	font-size: 9px;
	font-weight: 750;

	letter-spacing: 0.08em;
}


/* ==================================================
   FLOW
================================================== */

.ai-path-flow {
	display: grid;

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

	gap: 9px;

	align-items: center;

	margin-top: 22px;
}


.ai-flow-node {
	min-height: 48px;

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

	padding:
		10px
		12px;

	border:
		1px solid
		rgba(23, 22, 18, 0.10);

	border-radius: 10px;

	background: #ffffff;

	color: #5f5b54;

	font-size: 11px;
	font-weight: 650;

	text-align: center;
}


.ai-flow-node-active {
	border-color:
		rgba(214, 161, 63, 0.35);

	background: #171612;

	color: #ffffff;
}


.ai-flow-arrow {
	color: #aaa59b;

	font-size: 14px;
}


.ai-flow-arrow-gold {
	color: #b68129;
}


/* ==================================================
   DIVIDER
================================================== */

.ai-search-divider {
	position: relative;

	margin:
		18px
		0;

	text-align: center;
}


.ai-search-divider::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 0;
	right: 0;

	height: 1px;

	background:
		rgba(23, 22, 18, 0.10);
}


.ai-search-divider span {
	position: relative;
	z-index: 1;

	display: inline-block;

	padding:
		0
		12px;

	background: #fdfcf9;

	color: #a77524;

	font-size: 8px;
	font-weight: 750;

	line-height: 1;

	letter-spacing: 0.12em;
}


/* ==================================================
   GEO PILLARS
================================================== */

.ai-search-pillars {
	display: grid;

	grid-template-columns: 1fr;

	gap: 10px;

	margin-top: 20px;
}


.ai-search-pillar {
	display: grid;

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

	gap: 14px;

	align-items: center;

	padding:
		14px
		15px;

	border:
		1px solid
		rgba(23, 22, 18, 0.08);

	border-radius: 12px;

	background:
		rgba(255, 255, 255, 0.72);
}


.ai-pillar-icon {
	width: 34px;
	height: 34px;

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

	border-radius: 9px;

	background:
		rgba(214, 161, 63, 0.11);

	color: #9b6d1f;

	font-size: 9px;
	font-weight: 750;

	line-height: 1;
}


.ai-search-pillar strong {
	display: block;

	color: #171612;

	font-size: 13px;
	font-weight: 680;

	line-height: 1.2;
}


.ai-search-pillar div > span {
	display: block;

	margin-top: 4px;

	color: #817c73;

	font-size: 11px;

	line-height: 1.45;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1000px) {

	.ai-search-container {
		grid-template-columns: 1fr;

		gap: 58px;
	}


	.ai-search-content {
		max-width: 760px;
	}


	.ai-search-visual {
		max-width: 720px;
	}

}


/* ==================================================
   SMALL TABLET
================================================== */

@media (max-width: 900px) {

	.ai-search-container {
		width:
			calc(100% - 40px);

		padding:
			88px
			0
			94px;
	}

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

	.ai-search-container {
		width:
			calc(100% - 32px);

		padding:
			72px
			0
			76px;

		gap: 44px;
	}


	.ai-search-label {
		margin-bottom: 22px;

		font-size: 13px;
	}


	.ai-search-title {
		font-size:
			clamp(
				38px,
				11vw,
				48px
			);

		line-height: 1.07;

		letter-spacing: -0.045em;
	}


	.ai-search-description {
		margin-top: 22px;

		font-size: 15px;

		line-height: 1.72;
	}


	.ai-search-name {
		grid-template-columns: 1fr;

		gap: 12px;
	}


	.ai-search-name-badge {
		justify-self: start;
	}


	.ai-search-cta {
		width: 100%;
	}


	.ai-search-panel {
		padding: 16px;

		border-radius: 18px;
	}


	.ai-path {
		padding: 16px;
	}


	.ai-path-flow {
		grid-template-columns: 1fr;

		gap: 8px;
	}


	.ai-flow-arrow {
		transform: rotate(90deg);

		text-align: center;
	}


	.ai-flow-node {
		min-height: 45px;
	}


	.ai-search-divider {
		margin:
			16px
			0;
	}

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

	.ai-search-cta,
	.ai-search-cta svg {
		transition: none;
	}

}

/* ==================================================
   HOME FAQ
================================================== */

.home-faq {
	position: relative;

	overflow: hidden;

	background: #000000;

	color: #ffffff;
}


/* Subtle gold atmosphere */

.home-faq::before {
	content: "";

	position: absolute;

	top: -300px;
	left: -260px;

	width: 680px;
	height: 680px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(214, 161, 63, 0.10) 0%,
			rgba(214, 161, 63, 0) 70%
		);

	pointer-events: none;
}


/* ==================================================
   CONTAINER
================================================== */

.home-faq-container {
	position: relative;
	z-index: 1;

	width: calc(100% - 64px);

	max-width:
		var(
			--container-width,
			1200px
		);

	margin: 0 auto;

	padding:
		112px
		0
		120px;
}


/* ==================================================
   HEADER
================================================== */

.home-faq-header {
	display: grid;

	grid-template-columns:
		minmax(0, 1.35fr)
		minmax(280px, 0.65fr);

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

	align-items: end;

	padding-bottom: 68px;
}


.home-faq-heading {
	max-width: 790px;
}


/* ==================================================
   LABEL
================================================== */

.home-faq-label {
	display: flex;
	align-items: center;

	gap: 11px;

	margin-bottom: 27px;

	color: #d6a13f;

	font-size: 15px;
	font-weight: 750;

	line-height: 1;

	letter-spacing: 0.12em;
}


.home-faq-label-line {
	width: 28px;
	height: 1px;

	flex-shrink: 0;

	background: #d6a13f;
}


/* ==================================================
   TITLE
================================================== */

.home-faq-title {
	margin: 0;

	color: #ffffff;

	font-size:
		clamp(
			44px,
			4.8vw,
			66px
		);

	font-weight: 730;

	line-height: 1.04;

	letter-spacing: -0.052em;

	text-wrap: balance;
}


.home-faq-title span {
	display: block;

	color: #d6a13f;
}


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

.home-faq-intro {
	max-width: 420px;
}


.home-faq-intro p {
	margin: 0;

	color: #94918a;

	font-size: 15px;

	line-height: 1.8;
}


/* ==================================================
   FAQ LIST
================================================== */

.home-faq-list {
	border-top:
		1px solid
		rgba(255, 255, 255, 0.13);
}


/* ==================================================
   FAQ ITEM
================================================== */

.home-faq-item {
	position: relative;

	border-bottom:
		1px solid
		rgba(255, 255, 255, 0.13);
}


/* Remove default marker */

.home-faq-question {
	position: relative;

	display: grid;

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

	gap: 24px;

	align-items: center;

	min-height: 108px;

	padding:
		28px
		4px;

	cursor: pointer;

	list-style: none;

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


.home-faq-question::-webkit-details-marker {
	display: none;
}


.home-faq-question::marker {
	display: none;
	content: "";
}


/* Hover background */

.home-faq-question::before {
	content: "";

	position: absolute;

	inset: 0;

	opacity: 0;

	background:
		linear-gradient(
			90deg,
			rgba(214, 161, 63, 0.065),
			rgba(214, 161, 63, 0) 78%
		);

	pointer-events: none;

	transition:
		opacity 180ms ease;
}


.home-faq-item:hover
.home-faq-question::before {
	opacity: 1;
}


/* ==================================================
   NUMBER
================================================== */

.home-faq-number {
	position: relative;
	z-index: 1;

	color: #d6a13f;

	font-size: 10px;
	font-weight: 750;

	line-height: 1;

	letter-spacing: 0.12em;
}


/* ==================================================
   QUESTION TEXT
================================================== */

.home-faq-question-text {
	position: relative;
	z-index: 1;

	max-width: 840px;

	color: #ffffff;

	font-size:
		clamp(
			20px,
			2vw,
			27px
		);

	font-weight: 620;

	line-height: 1.25;

	letter-spacing: -0.025em;

	transition:
		color 180ms ease;
}


.home-faq-item:hover
.home-faq-question-text,
.home-faq-item[open]
.home-faq-question-text {
	color: #d6a13f;
}


/* ==================================================
   PLUS / MINUS ICON
================================================== */

.home-faq-icon {
	position: relative;
	z-index: 1;

	width: 38px;
	height: 38px;

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

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

	border-radius: 50%;

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


.home-faq-icon::before,
.home-faq-icon::after {
	content: "";

	position: absolute;

	width: 12px;
	height: 1px;

	background: #ffffff;

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


.home-faq-icon::after {
	transform: rotate(90deg);
}


.home-faq-item:hover
.home-faq-icon {
	border-color:
		rgba(214, 161, 63, 0.55);
}


.home-faq-item[open]
.home-faq-icon {
	border-color: #d6a13f;

	background:
		rgba(214, 161, 63, 0.10);

	transform: rotate(180deg);
}


.home-faq-item[open]
.home-faq-icon::before,
.home-faq-item[open]
.home-faq-icon::after {
	background: #d6a13f;
}


.home-faq-item[open]
.home-faq-icon::after {
	transform: rotate(0deg);
}


/* ==================================================
   ANSWER
================================================== */

.home-faq-answer {
	padding:
		0
		72px
		32px
		96px;
}


.home-faq-answer-inner {
	max-width: 760px;
}


.home-faq-answer p {
	margin: 0;

	color: #96928a;

	font-size: 15px;

	line-height: 1.8;
}


/* ==================================================
   KEYBOARD ACCESSIBILITY
================================================== */

.home-faq-question:focus-visible {
	outline:
		2px solid
		#d6a13f;

	outline-offset: 4px;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1000px) {

	.home-faq-header {
		grid-template-columns: 1fr;

		gap: 34px;
	}


	.home-faq-intro {
		max-width: 620px;
	}


	.home-faq-question {
		grid-template-columns:
			58px
			minmax(0, 1fr)
			42px;

		gap: 18px;
	}


	.home-faq-answer {
		padding:
			0
			60px
			30px
			76px;
	}

}


/* ==================================================
   SMALL TABLET
================================================== */

@media (max-width: 900px) {

	.home-faq-container {
		width:
			calc(100% - 40px);

		padding:
			88px
			0
			94px;
	}


	.home-faq-header {
		padding-bottom: 52px;
	}

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

	.home-faq-container {
		width:
			calc(100% - 32px);

		padding:
			72px
			0
			76px;
	}


	.home-faq-header {
		gap: 28px;

		padding-bottom: 42px;
	}


	.home-faq-label {
		margin-bottom: 22px;

		font-size: 13px;
	}


	.home-faq-title {
		font-size:
			clamp(
				38px,
				11vw,
				48px
			);

		line-height: 1.07;

		letter-spacing: -0.045em;
	}


	.home-faq-question {
		grid-template-columns:
			34px
			minmax(0, 1fr)
			36px;

		gap: 10px;

		min-height: auto;

		padding:
			25px
			0;
	}


	.home-faq-question-text {
		font-size: 18px;

		line-height: 1.35;
	}


	.home-faq-icon {
		width: 34px;
		height: 34px;
	}


	.home-faq-answer {
		padding:
			0
			42px
			26px
			44px;
	}


	.home-faq-answer p {
		font-size: 14px;

		line-height: 1.75;
	}

}


/* ==================================================
   VERY SMALL MOBILE
================================================== */

@media (max-width: 420px) {

	.home-faq-question {
		grid-template-columns:
			28px
			minmax(0, 1fr)
			32px;
	}


	.home-faq-number {
		font-size: 9px;
	}


	.home-faq-question-text {
		font-size: 17px;
	}


	.home-faq-icon {
		width: 32px;
		height: 32px;
	}


	.home-faq-answer {
		padding:
			0
			36px
			24px
			38px;
	}

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

	.home-faq-question,
	.home-faq-question::before,
	.home-faq-question-text,
	.home-faq-icon,
	.home-faq-icon::before,
	.home-faq-icon::after {
		transition: none;
	}

}

/* ==================================================
   FINAL CTA
================================================== */

.final-cta {
	position: relative;
	overflow: hidden;

	background: #f8f6f1;
	color: #171612;
}


.final-cta::before {
	content: "";

	position: absolute;

	top: -260px;
	right: -180px;

	width: 640px;
	height: 640px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(214, 161, 63, 0.14) 0%,
			rgba(214, 161, 63, 0) 70%
		);

	pointer-events: none;
}


.final-cta::after {
	content: "";

	position: absolute;

	bottom: -220px;
	left: -180px;

	width: 520px;
	height: 520px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(214, 161, 63, 0.08) 0%,
			rgba(214, 161, 63, 0) 70%
		);

	pointer-events: none;
}


/* ==================================================
   CONTAINER
================================================== */

.final-cta-container {
	position: relative;
	z-index: 1;

	width: calc(100% - 64px);
	max-width: var(--container-width, 1200px);

	margin: 0 auto;

	padding:
		112px
		0
		120px;

	display: grid;

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

	grid-template-areas:
		"content card"
		"secondary card";

	column-gap:
		clamp(
			48px,
			7vw,
			96px
		);

	row-gap: 14px;

	align-items: start;
}


/* ==================================================
   MAIN CONTENT
================================================== */

.final-cta-content {
	grid-area: content;

	max-width: 670px;
}


.final-cta-label {
	display: flex;
	align-items: center;

	gap: 11px;

	margin-bottom: 27px;

	color: #8d6825;

	font-size: 15px;
	font-weight: 750;

	line-height: 1;

	letter-spacing: 0.12em;
}


.final-cta-label-line {
	width: 28px;
	height: 1px;

	flex-shrink: 0;

	background: #d6a13f;
}


/* ==================================================
   TITLE
================================================== */

.final-cta-title {
	margin: 0;

	color: #171612;

	font-size:
		clamp(
			46px,
			5vw,
			68px
		);

	font-weight: 730;

	line-height: 1.03;

	letter-spacing: -0.055em;

	text-wrap: balance;
}


.final-cta-title span {
	display: block;

	color: #b68129;
}


/* ==================================================
   DESCRIPTION
================================================== */

.final-cta-description {
	max-width: 610px;

	margin:
		28px
		0
		0;

	color: #666157;

	font-size: 16px;

	line-height: 1.82;
}


/* ==================================================
   POINTS
================================================== */

.final-cta-points {
	display: grid;

	grid-template-columns: 1fr;

	gap: 12px;

	margin:
		30px
		0
		0;

	padding: 0;

	list-style: none;
}


.final-cta-points li {
	display: flex;
	align-items: center;

	gap: 12px;

	color: #4f4a42;

	font-size: 14px;

	line-height: 1.6;
}


.final-cta-point-icon {
	width: 20px;
	height: 20px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 20px;

	border-radius: 50%;

	background:
		rgba(
			214,
			161,
			63,
			0.13
		);

	color: #a77524;

	font-size: 16px;

	line-height: 1;
}


/* ==================================================
   CTA BUTTONS
================================================== */

.final-cta-primary-action {
	margin-top: 34px;
}


.final-cta-secondary-action {
	grid-area: secondary;

	max-width: 670px;
}


.final-cta-button {
	min-height: 52px;

	display: inline-flex;
	align-items: center;
	justify-content: space-between;

	gap: 18px;

	min-width: 226px;

	padding:
		0
		22px;

	border-radius: 9px;

	font-size: 14px;
	font-weight: 650;

	line-height: 1;

	text-decoration: none;

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


.final-cta-button svg {
	width: 18px;
	height: 18px;

	flex-shrink: 0;

	transition:
		transform 180ms ease;
}


/* Primary */

.final-cta-button-primary {
	background: #171612;

	border:
		1px solid
		#171612;

	color: #ffffff;
}


.final-cta-button-primary:hover {
	background: #d6a13f;

	border-color: #d6a13f;

	color: #000000;

	transform: translateY(-1px);

	box-shadow:
		0 14px 34px
		rgba(214, 161, 63, 0.18);
}


/* Secondary */

.final-cta-button-secondary {
	background: #b68129;

	border:
		1px solid
		#b68129;

	color: #ffffff;
}


.final-cta-button-secondary:hover {
	background: #d6a13f;

	border-color: #d6a13f;

	color: #000000;

	transform: translateY(-1px);

	box-shadow:
		0 12px 30px
		rgba(214, 161, 63, 0.18);
}


.final-cta-button:hover svg {
	transform: translateX(3px);
}


/* ==================================================
   NEXT STEPS CARD
================================================== */

.final-cta-card {
	grid-area: card;

	position: relative;

	align-self: center;

	padding:
		28px
		28px
		26px;

	border:
		1px solid
		rgba(23, 22, 18, 0.10);

	border-radius: 22px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.92),
			rgba(255, 255, 255, 0.72)
		);

	box-shadow:
		0 26px 70px
		rgba(23, 22, 18, 0.08);
}


.final-cta-card::before {
	content: "";

	position: absolute;

	inset: 0;

	border-radius: inherit;

	background:
		radial-gradient(
			circle at 100% 0%,
			rgba(214, 161, 63, 0.10),
			transparent 34%
		);

	pointer-events: none;
}


.final-cta-card-header {
	position: relative;
	z-index: 1;
}


.final-cta-card-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 28px;

	padding:
		0
		10px;

	border-radius: 999px;

	background: #171612;

	color: #d6a13f;

	font-size: 11px;
	font-weight: 750;

	line-height: 1;

	letter-spacing: 0.08em;
}


.final-cta-card-header h3 {
	margin:
		16px
		0
		0;

	color: #171612;

	font-size:
		clamp(
			28px,
			3vw,
			34px
		);

	font-weight: 690;

	line-height: 1.1;

	letter-spacing: -0.03em;
}


.final-cta-card-header p {
	margin:
		12px
		0
		0;

	color: #6b665d;

	font-size: 14px;

	line-height: 1.72;
}


/* ==================================================
   STEPS
================================================== */

.final-cta-steps {
	position: relative;
	z-index: 1;

	margin:
		28px
		0
		0;

	padding: 0;

	list-style: none;

	border-top:
		1px solid
		rgba(23, 22, 18, 0.10);
}


.final-cta-step {
	display: grid;

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

	gap: 14px;

	align-items: start;

	padding:
		18px
		0;

	border-bottom:
		1px solid
		rgba(23, 22, 18, 0.10);
}


.final-cta-step-number {
	width: 38px;
	height: 38px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	border-radius: 10px;

	background:
		rgba(214, 161, 63, 0.12);

	color: #a77524;

	font-size: 10px;
	font-weight: 750;

	line-height: 1;

	letter-spacing: 0.08em;
}


.final-cta-step-content strong {
	display: block;

	color: #171612;

	font-size: 14px;
	font-weight: 680;

	line-height: 1.3;
}


.final-cta-step-content p {
	margin:
		6px
		0
		0;

	color: #726d64;

	font-size: 13px;

	line-height: 1.62;
}


/* ==================================================
   NOTE
================================================== */

.final-cta-note {
	position: relative;
	z-index: 1;

	margin-top: 18px;

	color: #8a857c;

	font-size: 13px;

	line-height: 1.6;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1000px) {

	.final-cta-container {
		grid-template-columns: 1fr;

		grid-template-areas:
			"content"
			"card"
			"secondary";

		row-gap: 0;
	}


	.final-cta-content,
	.final-cta-card,
	.final-cta-secondary-action {
		max-width: 760px;
	}


	.final-cta-card {
		margin-top: 46px;
	}


	.final-cta-secondary-action {
		margin-top: 18px;
	}

}


/* ==================================================
   SMALL TABLET
================================================== */

@media (max-width: 900px) {

	.final-cta-container {
		width:
			calc(100% - 40px);

		padding:
			88px
			0
			94px;
	}

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

	.final-cta-container {
		width:
			calc(100% - 32px);

		padding:
			72px
			0
			76px;
	}


	.final-cta-label {
		margin-bottom: 22px;

		font-size: 13px;
	}


	.final-cta-title {
		font-size:
			clamp(
				38px,
				11vw,
				50px
			);

		line-height: 1.07;

		letter-spacing: -0.045em;
	}


	.final-cta-description {
		margin-top: 22px;

		font-size: 15px;

		line-height: 1.75;
	}


	.final-cta-points {
		margin-top: 24px;

		gap: 10px;
	}


	.final-cta-primary-action {
		margin-top: 28px;
	}


	.final-cta-button {
		width: 100%;

		min-width: 0;

		min-height: 52px;
	}


	.final-cta-card {
		margin-top: 34px;

		padding:
			20px
			18px
			18px;

		border-radius: 18px;
	}


	.final-cta-card-header h3 {
		font-size: 26px;
	}


	.final-cta-steps {
		margin-top: 22px;
	}


	.final-cta-step {
		grid-template-columns:
			40px
			minmax(0, 1fr);

		gap: 12px;
	}


	.final-cta-step-number {
		width: 32px;
		height: 32px;

		border-radius: 8px;

		font-size: 9px;
	}


	.final-cta-secondary-action {
		width: 100%;

		margin-top: 16px;
	}

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

	.final-cta-button,
	.final-cta-button svg {
		transition: none;
	}

}