@layer components {
	/* =============================================================================
   6. BUTTONS (BEM: kpl-btn)
   ============================================================================= */
	.kpl-btn--primary,
	.btn-primary {
		background: var(--green);
		color: var(--white);
		border: none;
		padding: 1rem 2rem;
		border-radius: 8px;
		font-family: var(--font-body);
		font-size: 0.95rem;
		font-weight: 600;
		cursor: pointer;
		transition:
			background-color 0.3s var(--ease-out),
			transform 0.3s var(--ease-out),
			box-shadow 0.3s var(--ease-out);
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		text-decoration: none;
	}

	.kpl-btn--primary:hover,
	.kpl-btn--primary:focus-visible,
	.btn-primary:hover,
	.btn-primary:focus-visible {
		background: var(--green-light);
		transform: translateY(-3px);
		box-shadow:
			0 4px 12px rgba(var(--green-light-rgb), 0.2),
			0 12px 28px rgba(var(--green-light-rgb), 0.35);
	}

	.kpl-btn--primary:active,
	.btn-primary:active {
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(var(--green-light-rgb), 0.25);
	}

	.kpl-btn--secondary,
	.btn-secondary {
		background: transparent;
		color: var(--gold);
		border: 1.5px solid rgba(var(--gold-rgb), 0.5);
		padding: 1rem 2rem;
		border-radius: 8px;
		font-family: var(--font-body);
		font-size: 0.95rem;
		font-weight: 600;
		cursor: pointer;
		transition:
			border-color 0.3s var(--ease-out),
			background-color 0.3s var(--ease-out);
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		text-decoration: none;
	}

	.kpl-btn--secondary:hover,
	.kpl-btn--secondary:focus-visible,
	.btn-secondary:hover,
	.btn-secondary:focus-visible {
		border-color: var(--gold);
		background: rgba(var(--gold-rgb), 0.1);
		transform: translateY(-2px);
		box-shadow: 0 6px 20px var(--gold-15);
	}

	.kpl-btn--secondary:active,
	.btn-secondary:active {
		transform: translateY(0);
	}

	/* =============================================================================
   8. SERVICES PREVIEW (Home)
   ============================================================================= */
	.kpl-services__grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1.2rem;
	}

	.kpl-service-card {
		background: var(--white);
		border: 1px solid var(--border-light);
		border-radius: 16px;
		padding: 2rem 1.5rem;
		transition:
			transform 0.4s var(--ease-out),
			box-shadow 0.4s var(--ease-out),
			border-color 0.4s var(--ease-out);
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.kpl-service-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		background: var(--gold);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.4s var(--ease-out);
	}

	.kpl-service-card:hover::before {
		transform: scaleX(1);
	}

	.kpl-service-card:hover {
		transform: translateY(-8px);
		box-shadow:
			0 8px 16px rgba(0, 0, 0, 0.04),
			0 20px 50px var(--border-medium),
			0 0 0 1px var(--gold-15);
		border-color: rgba(var(--gold-rgb), 0.25);
	}

	.kpl-service-card__icon {
		width: 52px;
		height: 52px;
		border-radius: 12px;
		background: linear-gradient(
			135deg,
			rgba(var(--navy-rgb), 0.06),
			rgba(var(--navy-rgb), 0.02)
		);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 1.2rem;
		color: var(--navy);
		font-size: 1.4rem;
		transition:
			background 0.4s var(--ease-out),
			color 0.4s var(--ease-out),
			transform 0.4s var(--ease-out);
	}

	.kpl-service-card:hover .kpl-service-card__icon,
	.kpl-service-card:focus-within .kpl-service-card__icon {
		background: linear-gradient(135deg, var(--navy), var(--navy-mid));
		color: var(--gold);
		transform: scale(1.08);
	}

	.kpl-service-card h3 {
		font-family: var(--font-display);
		font-size: 1.25rem;
		font-weight: 600;
		margin-bottom: 0.6rem;
		color: var(--navy);
	}

	.kpl-service-card p {
		font-size: 0.88rem;
		color: var(--text-mid);
		line-height: 1.6;
	}

	.kpl-service-card__link {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		color: var(--gold-dark);
		font-size: 0.85rem;
		font-weight: 600;
		margin-top: 1rem;
		text-decoration: none;
		transition: gap 0.3s ease;
	}

	.kpl-service-card__link:hover,
	.kpl-service-card__link:focus-visible {
		gap: 0.8rem;
		color: var(--gold);
	}

	.kpl-service-card__link::after {
		content: '';
		display: inline-block;
		width: 0;
		height: 1.5px;
		background: var(--gold);
		transition: width 0.3s var(--ease-out);
		vertical-align: middle;
	}

	.kpl-service-card:hover .kpl-service-card__link::after {
		width: 16px;
	}

	/* =============================================================================
   9. WHY US
   ============================================================================= */
	.kpl-whyus__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}

	.kpl-whyus__card {
		padding: 2.5rem 2rem;
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.04);
		border: 1px solid rgba(255, 255, 255, 0.06);
		transition:
			background-color 0.4s var(--ease-out),
			border-color 0.4s var(--ease-out),
			transform 0.4s var(--ease-out);
	}

	.kpl-whyus__card:hover {
		background: rgba(255, 255, 255, 0.08);
		border-color: var(--gold-20);
		transform: translateY(-6px);
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
	}

	.kpl-whyus__card:hover .kpl-whyus__num {
		color: var(--gold);
	}

	.kpl-whyus__num {
		font-family: var(--font-display);
		font-size: 3rem;
		font-weight: 700;
		color: rgba(var(--gold-rgb), 0.55);
		line-height: 1;
		margin-bottom: 1rem;
		transition: color 0.4s var(--ease-out);
	}

	.kpl-whyus__card h3 {
		font-family: var(--font-display);
		font-size: 1.3rem;
		font-weight: 600;
		color: var(--white);
		margin-bottom: 0.7rem;
	}

	.kpl-whyus__card p {
		font-size: 0.9rem;
		color: rgba(255, 255, 255, 0.5);
		line-height: 1.7;
	}

	/* =============================================================================
   10. TESTIMONIALS
   ============================================================================= */
	.kpl-testimonials__wrapper {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}

	.kpl-testimonial {
		background: var(--white);
		border: 1px solid var(--border-light);
		border-radius: 16px;
		padding: 2.2rem;
		position: relative;
		transition:
			transform 0.4s var(--ease-out),
			box-shadow 0.4s var(--ease-out),
			border-color 0.4s var(--ease-out);
	}

	.kpl-testimonial:hover {
		transform: translateY(-4px);
		box-shadow:
			0 8px 16px rgba(0, 0, 0, 0.03),
			0 16px 40px var(--border-light);
		border-color: var(--gold-15);
	}

	.kpl-testimonial__quote {
		font-family: var(--font-display);
		font-size: 4rem;
		color: var(--gold);
		opacity: 0.2;
		line-height: 1;
		position: absolute;
		top: 1rem;
		right: 1.5rem;
	}

	.kpl-testimonial p {
		font-size: 0.95rem;
		color: var(--text-mid);
		line-height: 1.7;
		margin-bottom: 1.5rem;
		font-style: italic;
	}

	.kpl-testimonial__author {
		display: flex;
		align-items: center;
		gap: 0.8rem;
	}

	.kpl-testimonial__avatar {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: linear-gradient(135deg, var(--navy), var(--navy-light));
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--gold);
		font-family: var(--font-display);
		font-size: 1.1rem;
		font-weight: 600;
	}

	.kpl-testimonial__name {
		font-weight: 600;
		font-size: 0.9rem;
		color: var(--text-dark);
	}

	.kpl-testimonial__role {
		font-size: 0.8rem;
		color: var(--text-light);
	}

	/* =============================================================================
   11. CTA SECTION
   ============================================================================= */
	.kpl-cta {
		background: linear-gradient(
			135deg,
			var(--navy) 0%,
			var(--navy-mid) 100%
		);
		border-radius: 24px;
		padding: 4rem;
		margin-block: 4rem;
		margin-inline: auto;
		max-width: 1340px;
		text-align: center;
		position: relative;
		overflow: hidden;
		border: 1px solid rgba(var(--gold-rgb), 0.1);
	}

	.kpl-cta::before {
		content: '';
		position: absolute;
		inset: 0;
		background: radial-gradient(
			ellipse at 50% 0%,
			rgba(var(--gold-rgb), 0.1) 0%,
			transparent 60%
		);
	}

	@supports (background: conic-gradient(from 0deg, red, blue)) {
		.kpl-cta::after {
			content: '';
			position: absolute;
			top: -50%;
			left: -50%;
			width: 200%;
			height: 200%;
			background: conic-gradient(
				from 0deg,
				transparent 0%,
				rgba(var(--gold-rgb), 0.04) 10%,
				transparent 20%
			);
			animation: ctaShimmer 12s linear infinite;
			pointer-events: none;
		}
	}

	@keyframes ctaShimmer {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}

	.kpl-cta h2 {
		font-family: var(--font-display);
		font-size: clamp(1.8rem, 3vw, 2.5rem);
		color: var(--white);
		font-weight: 600;
		margin-bottom: 1rem;
		position: relative;
	}

	.kpl-cta p {
		color: rgba(255, 255, 255, 0.6);
		font-size: 1.05rem;
		margin-bottom: 2rem;
		position: relative;
	}

	.kpl-cta .kpl-btn--primary,
	.kpl-cta .btn-primary {
		position: relative;
		font-size: 1rem;
		padding: 1.1rem 2.5rem;
	}

	/* =============================================================================
   12. PAGE HERO (Services / About / Blog / Contacts)
   ============================================================================= */
	.kpl-page-hero {
		background: var(--navy);
		padding: 10rem 2rem 5rem;
		position: relative;
		overflow: hidden;
	}

	.kpl-page-hero::before {
		content: '';
		position: absolute;
		inset: 0;
		background: radial-gradient(
			ellipse at 70% 30%,
			rgba(var(--gold-rgb), 0.08) 0%,
			transparent 60%
		);
	}

	.kpl-page-hero::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 1px;
		background: linear-gradient(
			90deg,
			transparent,
			var(--gold-20) 50%,
			transparent
		);
	}

	.kpl-page-hero__inner {
		max-width: 1340px;
		margin: 0 auto;
		position: relative;
		z-index: 2;
	}

	.kpl-page-hero h1 {
		font-family: var(--font-display);
		font-size: clamp(2.5rem, 4.5vw, 3.5rem);
		color: var(--white);
		font-weight: 600;
		margin-bottom: 1rem;
	}

	.kpl-page-hero p {
		font-size: 1.1rem;
		color: rgba(255, 255, 255, 0.55);
		max-width: 600px;
		line-height: 1.7;
	}

	/* =============================================================================
   13. SERVICES DETAILED (Services Page)
   ============================================================================= */
	.kpl-services-detail {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}

	.kpl-service-detail__card {
		background: var(--white);
		border: 1px solid var(--border-light);
		border-radius: 20px;
		padding: 2.5rem;
		display: flex;
		gap: 1.5rem;
		align-items: flex-start;
		transition:
			transform 0.4s var(--ease-out),
			box-shadow 0.4s var(--ease-out),
			border-color 0.4s var(--ease-out);
		cursor: pointer;
	}

	.kpl-service-detail__card:hover {
		transform: translateY(-4px);
		box-shadow: 0 20px 50px var(--border-light);
		border-color: var(--gold-20);
	}

	.kpl-service-detail__icon {
		flex-shrink: 0;
		width: 64px;
		height: 64px;
		border-radius: 16px;
		background: linear-gradient(135deg, var(--navy), var(--navy-mid));
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--gold);
		font-size: 1.5rem;
	}

	.kpl-service-detail__content h3 {
		font-family: var(--font-display);
		font-size: 1.35rem;
		font-weight: 600;
		color: var(--navy);
		margin-bottom: 0.6rem;
	}

	.kpl-service-detail__content p {
		font-size: 0.9rem;
		color: var(--text-mid);
		line-height: 1.7;
		margin-bottom: 1rem;
	}

	.kpl-service-detail__tags {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.kpl-service-detail__tag {
		font-size: 0.75rem;
		padding: 0.25rem 0.7rem;
		background: rgba(var(--navy-rgb), 0.05);
		color: var(--navy);
		border-radius: 100px;
		font-weight: 500;
	}

	/* =============================================================================
   14. PROCESS STEPS
   ============================================================================= */
	.kpl-process {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 0;
		position: relative;
	}

	.kpl-process::before {
		content: '';
		position: absolute;
		top: 35px;
		left: 10%;
		right: 10%;
		height: 2px;
		background: rgba(255, 255, 255, 0.1);
	}

	.kpl-process__step {
		text-align: center;
		position: relative;
		padding: 0 1rem;
	}

	.kpl-process__num {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		background: rgba(var(--gold-rgb), 0.1);
		border: 2px solid var(--gold-30);
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 1.2rem;
		font-family: var(--font-display);
		font-size: 1.5rem;
		font-weight: 700;
		color: var(--gold);
		position: relative;
		z-index: 2;
	}

	.kpl-process__step h4 {
		font-family: var(--font-display);
		font-size: 1.1rem;
		color: var(--white);
		margin-bottom: 0.4rem;
	}

	.kpl-process__step p {
		font-size: 0.82rem;
		color: rgba(255, 255, 255, 0.45);
		line-height: 1.6;
	}

	/* =============================================================================
   15. ABOUT PAGE
   ============================================================================= */
	.kpl-about__intro {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 4rem;
		align-items: center;
	}

	.kpl-about__image {
		border-radius: 20px;
		overflow: hidden;
		background: linear-gradient(135deg, var(--navy), var(--navy-mid));
		aspect-ratio: 4/3;
		position: relative;
	}

	.kpl-about__pattern {
		position: absolute;
		inset: 0;
		background: repeating-linear-gradient(
			45deg,
			transparent,
			transparent 20px,
			rgba(var(--gold-rgb), 0.03) 20px,
			rgba(var(--gold-rgb), 0.03) 21px
		);
	}

	.kpl-about__image-content {
		position: absolute;
		inset: 2rem;
		border: 1px solid var(--gold-20);
		border-radius: 12px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: var(--white);
	}

	.kpl-about__image-content .big-year {
		font-family: var(--font-display);
		font-size: 5rem;
		font-weight: 700;
		color: var(--gold);
		opacity: 0.8;
	}

	.kpl-about__image-content span {
		font-size: 0.9rem;
		color: rgba(255, 255, 255, 0.5);
		text-transform: uppercase;
		letter-spacing: 0.1em;
	}

	.kpl-about__text h2 {
		font-family: var(--font-display);
		font-size: 2.2rem;
		font-weight: 600;
		margin-bottom: 1.2rem;
		color: var(--navy);
	}

	.kpl-about__text p {
		font-size: 1rem;
		color: var(--text-mid);
		line-height: 1.8;
		margin-bottom: 1rem;
	}

	/* =============================================================================
   16. VALUES
   ============================================================================= */
	.kpl-values__grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5rem;
	}

	.kpl-values__card {
		text-align: center;
		padding: 2rem 1.2rem;
		background: rgba(255, 255, 255, 0.04);
		border: 1px solid rgba(255, 255, 255, 0.06);
		border-radius: 16px;
		transition:
			background-color 0.3s var(--ease-out),
			transform 0.3s var(--ease-out);
	}

	.kpl-values__card:hover {
		background: rgba(255, 255, 255, 0.08);
		transform: translateY(-6px);
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
		border-color: var(--gold-15);
	}

	.kpl-values__card:hover .kpl-values__icon {
		transform: scale(1.15);
	}

	.kpl-values__icon {
		font-size: 2rem;
		margin-bottom: 1rem;
		transition: transform 0.4s var(--ease-spring);
	}

	.kpl-values__card h3 {
		font-family: var(--font-display);
		font-size: 1.2rem;
		color: var(--white);
		margin-bottom: 0.5rem;
	}

	.kpl-values__card p {
		font-size: 0.85rem;
		color: rgba(255, 255, 255, 0.45);
		line-height: 1.6;
	}

	/* =============================================================================
   17. TEAM
   ============================================================================= */
	.kpl-team__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}

	.kpl-team__card {
		background: var(--white);
		border: 1px solid var(--border-light);
		border-radius: 20px;
		overflow: hidden;
		transition:
			transform 0.4s var(--ease-out),
			box-shadow 0.4s var(--ease-out);
	}

	.kpl-team__card:hover {
		transform: translateY(-8px);
		box-shadow:
			0 8px 16px rgba(0, 0, 0, 0.04),
			0 24px 56px rgba(0, 0, 0, 0.1);
	}

	.kpl-team__card:hover .kpl-team__badge {
		background: var(--gold-light);
		transform: translateY(-2px);
	}

	.kpl-team__photo {
		height: 280px;
		background: linear-gradient(135deg, var(--navy), var(--navy-light));
		position: relative;
		overflow: hidden;
	}

	.kpl-team__initials {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--font-display);
		font-size: 4rem;
		font-weight: 700;
		color: var(--gold-15);
	}

	.kpl-team__badge {
		position: absolute;
		bottom: 1rem;
		right: 1rem;
		background: var(--gold);
		color: var(--navy);
		padding: 0.3rem 0.8rem;
		border-radius: 100px;
		font-size: 0.75rem;
		font-weight: 600;
		transition:
			background-color 0.3s var(--ease-out),
			transform 0.3s var(--ease-out);
	}

	.kpl-team__info {
		padding: 1.5rem;
	}

	.kpl-team__info h3 {
		font-family: var(--font-display);
		font-size: 1.3rem;
		font-weight: 600;
		color: var(--navy);
		margin-bottom: 0.2rem;
	}

	.kpl-team__info .kpl-team__role {
		font-size: 0.85rem;
		color: var(--gold-dark);
		font-weight: 500;
		margin-bottom: 0.8rem;
	}

	.kpl-team__info p {
		font-size: 0.88rem;
		color: var(--text-mid);
		line-height: 1.6;
	}

	.kpl-team__tags {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		margin-top: 1rem;
	}

	/* =============================================================================
   18. BLOG PAGE
   ============================================================================= */
	/* Legacy .blog-filters/.blog-filter/.blog-grid/.blog-card removed — replaced by .kpl-blog-* BEM classes */

	/* Legacy .blog-read-more/.blog-featured removed — replaced by .kpl-blog-featured BEM classes */

	/* WP pagination (paginate_links type=list) */
	.page-numbers {
		list-style: none;
		display: flex;
		gap: 0.5rem;
		flex-wrap: wrap;
		padding-left: 0;
		margin-top: 2rem;
	}

	.page-numbers a,
	.page-numbers span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 38px;
		height: 38px;
		padding: 0 12px;
		border-radius: 10px;
		border: 1px solid var(--border-medium);
		background: var(--white);
		color: var(--text-mid);
		text-decoration: none;
		transition:
			background-color 0.3s ease,
			color 0.3s ease,
			border-color 0.3s ease;
	}

	.page-numbers a:hover {
		background: var(--navy);
		color: var(--white);
		border-color: var(--navy);
	}

	.page-numbers .current {
		background: var(--navy);
		color: var(--white);
		border-color: var(--navy);
	}

	/* =============================================================================
   19. CONTACTS PAGE
   ============================================================================= */
	.kpl-contacts__layout {
		display: grid;
		grid-template-columns: 1fr 1.3fr;
		gap: 3rem;
	}

	.kpl-contacts__cards {
		display: flex;
		flex-direction: column;
		gap: 1.2rem;
	}

	.kpl-contacts__card {
		background: var(--white);
		border: 1px solid var(--border-light);
		border-radius: 16px;
		padding: 1.5rem;
		display: flex;
		gap: 1rem;
		align-items: flex-start;
		transition:
			border-color 0.3s var(--ease-out),
			box-shadow 0.3s var(--ease-out),
			transform 0.3s var(--ease-out);
	}

	.kpl-contacts__card:hover {
		border-color: var(--gold-20);
		box-shadow:
			0 4px 12px rgba(0, 0, 0, 0.03),
			0 12px 32px var(--border-light);
		transform: translateY(-2px);
	}

	.kpl-contacts__card:hover .kpl-contacts__icon {
		transform: scale(1.05);
	}

	.kpl-contacts__icon {
		width: 48px;
		height: 48px;
		border-radius: 12px;
		background: linear-gradient(135deg, var(--navy), var(--navy-mid));
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--gold);
		flex-shrink: 0;
		transition: transform 0.3s var(--ease-spring);
	}

	.kpl-contacts__content h4 {
		font-size: 0.9rem;
		font-weight: 600;
		color: var(--navy);
		margin-bottom: 0.3rem;
	}

	.kpl-contacts__content p {
		font-size: 0.88rem;
		color: var(--text-mid);
		line-height: 1.6;
	}

	.kpl-contacts__content a {
		color: var(--gold-dark);
		text-decoration: none;
		font-weight: 500;
		transition: color 0.3s ease;
	}

	.kpl-contacts__content a:hover,
	.kpl-contacts__content a:focus-visible {
		color: var(--gold);
	}

	/* Contact Form */
	.kpl-contacts__form {
		background: var(--white);
		border: 1px solid var(--border-light);
		border-radius: 20px;
		padding: 2.5rem;
	}

	.kpl-contacts__form h3 {
		font-family: var(--font-display);
		font-size: 1.5rem;
		font-weight: 600;
		color: var(--navy);
		margin-bottom: 1.5rem;
	}

	.kpl-form__row {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
		margin-bottom: 1rem;
	}

	.kpl-form__group {
		margin-bottom: 1rem;
	}

	.kpl-form__group label {
		display: block;
		font-size: 0.82rem;
		font-weight: 600;
		color: var(--text-dark);
		margin-bottom: 0.4rem;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	.kpl-form__group input,
	.kpl-form__group select,
	.kpl-form__group textarea {
		width: 100%;
		padding: 0.85rem 1rem;
		border: 1.5px solid rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		font-family: var(--font-body);
		font-size: 0.92rem;
		color: var(--text-dark);
		background: var(--cream);
		transition:
			border-color 0.3s ease,
			box-shadow 0.3s ease;
		outline: none;
	}

	.kpl-form__group input:focus-visible,
	.kpl-form__group select:focus-visible,
	.kpl-form__group textarea:focus-visible {
		border-color: var(--gold);
		box-shadow: 0 0 0 4px rgba(var(--gold-rgb), 0.08);
		background: var(--white);
		outline: 2px solid var(--gold);
		outline-offset: 0;
	}

	.kpl-form__group textarea {
		min-height: 120px;
		resize: vertical;
	}

	.kpl-form__submit {
		width: 100%;
		padding: 1rem;
		background: var(--navy);
		color: var(--white);
		border: none;
		border-radius: 10px;
		font-family: var(--font-body);
		font-size: 0.95rem;
		font-weight: 600;
		cursor: pointer;
		transition:
			background-color 0.3s var(--ease-out),
			transform 0.3s var(--ease-out),
			box-shadow 0.3s var(--ease-out);
	}

	.kpl-form__submit:hover,
	.kpl-form__submit:focus-visible {
		background: var(--navy-mid);
		transform: translateY(-2px);
		box-shadow: 0 8px 25px rgba(var(--navy-rgb), 0.25);
	}

	.kpl-form__submit:disabled {
		opacity: 0.65;
		cursor: not-allowed;
		transform: none;
		box-shadow: none;
	}

	/* Form Messages */
	.kpl-form__message {
		display: none;
		padding: 1rem 1.2rem;
		border-radius: 10px;
		font-size: 0.92rem;
		font-weight: 500;
		line-height: 1.5;
		margin-top: 0.5rem;
	}

	.kpl-form__message.success {
		display: block;
		background: rgba(var(--green-light-rgb), 0.1);
		border: 1px solid rgba(var(--green-light-rgb), 0.3);
		color: var(--green);
	}

	.kpl-form__message.error {
		display: block;
		background: rgba(196, 69, 54, 0.08);
		border: 1px solid rgba(196, 69, 54, 0.25);
		color: var(--red-accent);
	}

	/* Contact Map */
	.kpl-contacts__map {
		border-radius: 20px;
		overflow: hidden;
		height: 300px;
		margin-top: 2rem;
		background: linear-gradient(135deg, var(--navy), var(--navy-mid));
		position: relative;
	}

	.kpl-contacts__map-placeholder {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: rgba(255, 255, 255, 0.3);
	}

	.kpl-contacts__map-placeholder svg {
		width: 48px;
		height: 48px;
		margin-bottom: 0.5rem;
	}

	.kpl-contacts__map-placeholder span {
		font-size: 0.85rem;
	}

	/* =============================================================================
   FAQ ACCORDION (kpl-faq)
   Requires JS faq-accordion.js which converts `hidden` → maxHeight + aria-hidden.
   max-height transition is the primary animation — value must exceed tallest answer.
   ============================================================================= */
	[data-faq-answer] {
		overflow: hidden;
		max-height: 0;
		transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	}

	[data-faq-answer][aria-hidden='false'] {
		/* JS sets exact scrollHeight — selector used only as no-JS fallback sentinel */
	}

	[data-faq-toggle] {
		cursor: pointer;
	}

	[data-faq-toggle][aria-expanded='true'] .kpl-faq__icon {
		transform: rotate(180deg);
	}

	.kpl-faq__icon {
		transition: transform 0.25s var(--ease-out, ease);
		display: inline-block;
		flex-shrink: 0;
	}

	@media (prefers-reduced-motion: reduce) {
		[data-faq-answer] {
			transition: none;
		}

		.kpl-faq__icon {
			transition: none;
		}
	}

	/* =============================================================================
   TAP MICRO-ANIMATION (cross-platform touch feedback, iOS-compatible)
   ============================================================================= */
	.kpl-tap-active {
		transform: scale(0.94) !important;
		transition: transform 0.08s ease-out !important;
	}

	@media (prefers-reduced-motion: reduce) {
		.kpl-tap-active {
			transform: none !important;
			transition: none !important;
		}

		.kpl-service-card:hover,
		.kpl-service-detail__card:hover,
		.kpl-testimonial:hover,
		.kpl-whyus__card:hover,
		.kpl-values__card:hover,
		.kpl-team__card:hover,
		.kpl-contacts__card:hover {
			transform: none;
		}
	}

	/* =============================================================================
   KPL INTERACTIONS — B1.2 Magnetic CTA + B2 Service cards tilt
   Driven by /js/kpl-interactions.js. CSS variables are mutated by JS;
   CSS owns the layered transform composition and reduced-motion safety.
   ============================================================================= */

	/* Magnetic CTA — composes with GB :hover translateY(-2px). */
	.kpl-magnetic {
		--kpl-mag-x: 0px;
		--kpl-mag-y: 0px;

		transform: translate3d(var(--kpl-mag-x), var(--kpl-mag-y), 0);
		transition:
			transform 0.2s var(--ease-out),
			box-shadow 0.3s var(--ease-out);
		will-change: transform;
	}

	/* Service cards tilt — uses perspective-aware transform with lift. */
	.kpl-tilt {
		--kpl-tilt-rx: 0deg;
		--kpl-tilt-ry: 0deg;
		--kpl-tilt-lift: 0px;

		transform: perspective(900px) rotateX(var(--kpl-tilt-rx))
			rotateY(var(--kpl-tilt-ry)) translate3d(0, var(--kpl-tilt-lift), 0);
		transform-style: preserve-3d;
		transition:
			transform 0.25s var(--ease-out),
			box-shadow 0.3s var(--ease-out),
			border-color 0.3s var(--ease-out);
		will-change: transform;
	}

	/* Deeper shadow while tilted to reinforce Z-axis hint. */
	.kpl-tilt:is(:hover, :focus-within) {
		box-shadow:
			0 16px 48px rgba(0, 0, 0, 0.1),
			0 4px 12px var(--gold-15);
	}

	@media (prefers-reduced-motion: reduce) {
		.kpl-magnetic,
		.kpl-tilt {
			transform: none;
			transition: none;
		}
	}

	/* Coarse pointers (touch) — keep original GB translateY hover, no tilt. */
	@media (pointer: coarse) {
		.kpl-tilt {
			transform: none;
		}
	}
} /* end @layer components */