@layer layout {
	/* =============================================================================
   4. HEADER / NAVIGATION (BEM: kpl-header)
   ============================================================================= */

	/* Base transition for backdrop-filter (GB inline CSS covers background-color/box-shadow) */
	#header {
		/* Safe-area: фон хедера покриває iOS статус-бар (viewport-fit=cover) */
		padding-top: env(safe-area-inset-top, 0);
		transition:
			background-color 0.5s var(--ease-out),
			backdrop-filter 0.5s var(--ease-out),
			box-shadow 0.5s var(--ease-out);
	}

	/* =============================================================================
   4b. MOBILE MENU — KP OVERRIDES (mobile-menu/ module integration)
   ============================================================================= */

	/*
 * Override mobile-menu.css .gbp-navigation base styles.
 * KP header has its own background/layout via GB inline CSS.
 */
	#header.gbp-navigation {
		height: auto;
		padding: 0;
		/* Safe-area override: відновлюємо відступ для iOS статус-бару */
		padding-top: env(safe-area-inset-top, 0);
		background: linear-gradient(
			135deg,
			var(--navy) 0%,
			var(--navy-mid) 40%,
			#1c3366 70%,
			var(--navy) 100%
		);
		border-bottom: none;
		/* stylelint-disable-next-line property-no-vendor-prefix -- Safari fallback */
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	[data-theme='dark'] #header.gbp-navigation {
		background: var(--navy);
	}

	/* Scrolled state — dark background with blur (toggled by JS).
   Стоїть після #header.gbp-navigation (однакова специфічність),
   щоб виграти каскад і не бути перекритим transparent. */
	#header.kpl-header--scrolled {
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
	}

	/* CSS-страховка: темний хедер на всіх не-домашніх сторінках.
   Специфічність (1,1,1) > gbp-navigation (1,1,0) — перекриває навіть без JS. */
	body.kpl-dark-header #header {
		background: rgba(var(--navy-rgb), 0.97);
		backdrop-filter: blur(20px);
		/* stylelint-disable-next-line property-no-vendor-prefix -- Safari fallback */
		-webkit-backdrop-filter: blur(20px);
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
	}

	/* Prevent mobile-menu.css body padding-top (KP layout handles header spacing) */
	@media (width <= 1024px) {
		body {
			padding-top: 0;
		}
	}

	/* Nav links: gold text on KP dark header (desktop) */
	#header .gbp-navigation__menu .gb-text.gbp-navigation__link {
		color: var(--gold);
		font-size: 0.88rem;
		font-weight: 500;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		padding: 0.55rem 1.1rem;
		border-radius: 6px;
	}

	#header
		.gbp-navigation__menu
		.gb-text.gbp-navigation__link:is(:hover, :focus-visible) {
		color: var(--gold-light);
		background-color: rgba(255, 255, 255, 0.08);
	}

	/* Nav links: gold text on dark gradient overlay (mobile menu open) */
	#header
		.gbp-navigation__menu.gbp-navigation__menu--open
		.gb-text.gbp-navigation__link {
		color: var(--gold);
		font-size: 1rem;
		letter-spacing: normal;
		text-transform: none;
		padding: 0.85rem 0;
	}

	#header
		.gbp-navigation__menu.gbp-navigation__menu--open
		.gb-text.gbp-navigation__link:is(:hover, :focus-visible) {
		color: var(--gold-light);
		background-color: transparent;
	}

	/* Hamburger lines: white on dark header */
	.gbp-navigation__mobile-toggle .gbp-navigation__hamburger-line {
		background: #ffffff;
	}

	/* =============================================================================
   5. HERO SECTION
   ============================================================================= */
	.kpl-hero {
		min-height: 100vh;
		position: relative;
		background: var(--navy);
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.kpl-hero__bg {
		position: absolute;
		inset: 0;
		background: linear-gradient(
			135deg,
			var(--navy) 0%,
			var(--navy-mid) 40%,
			#1c3366 70%,
			var(--navy) 100%
		);
	}

	.kpl-hero__bg::before {
		content: '';
		position: absolute;
		inset: 0;
		background:
			radial-gradient(
				ellipse at 80% 50%,
				rgba(var(--gold-rgb), 0.08) 0%,
				transparent 60%
			),
			radial-gradient(
				ellipse at 20% 80%,
				rgba(var(--green-light-rgb), 0.05) 0%,
				transparent 50%
			);
	}

	.kpl-hero__pattern {
		position: absolute;
		inset: 0;
		opacity: 0.03;
		background-image:
			repeating-linear-gradient(
				0deg,
				transparent,
				transparent 60px,
				rgba(255, 255, 255, 0.5) 60px,
				rgba(255, 255, 255, 0.5) 61px
			),
			repeating-linear-gradient(
				90deg,
				transparent,
				transparent 60px,
				rgba(255, 255, 255, 0.5) 60px,
				rgba(255, 255, 255, 0.5) 61px
			);
	}

	.kpl-hero__glow {
		position: absolute;
		top: -20%;
		right: -10%;
		width: 700px;
		height: 700px;
		background: radial-gradient(
			circle,
			rgba(var(--gold-rgb), 0.08) 0%,
			transparent 70%
		);
		border-radius: 50%;
		filter: blur(40px);
		animation: glowPulse 8s ease-in-out infinite;
	}

	/* Second glow for depth */
	.kpl-hero__bg::after {
		content: '';
		position: absolute;
		bottom: -15%;
		left: -5%;
		width: 500px;
		height: 500px;
		background: radial-gradient(
			circle,
			rgba(38, 123, 77, 0.05) 0%,
			transparent 70%
		);
		border-radius: 50%;
		filter: blur(50px);
		animation: glowPulse 10s ease-in-out infinite reverse;
	}

	.kpl-hero__content {
		position: relative;
		z-index: 2;
		max-width: 1340px;
		margin: 0 auto;
		padding: 8rem 2rem 6rem;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 4rem;
		align-items: center;
	}

	/* Hero Badge */
	.kpl-hero__badge {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		background: rgba(var(--gold-rgb), 0.12);
		border: 1px solid rgba(var(--gold-rgb), 0.25);
		padding: 0.4rem 1rem;
		border-radius: 100px;
		color: var(--gold-light);
		font-size: 0.8rem;
		font-weight: 500;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		margin-bottom: 1.8rem;
		animation: fadeInUp 0.8s var(--ease-out) 0.2s both;
		backdrop-filter: blur(8px);
	}

	.kpl-hero__badge::before {
		content: '';
		width: 7px;
		height: 7px;
		background: var(--gold);
		border-radius: 50%;
		animation: badgePulse 2s ease infinite;
		box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.5);
	}

	@keyframes badgePulse {
		0%,
		100% {
			opacity: 1;
			box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.5);
		}
		50% {
			opacity: 0.5;
			box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.3);
		}
	}

	/* Hero Headings */
	.kpl-hero h1 {
		font-family: var(--font-display);
		font-size: clamp(2.8rem, 5vw, 4.2rem);
		font-weight: 600;
		line-height: 1.12;
		color: var(--white);
		margin-bottom: 1.5rem;
		animation: fadeInUp 0.8s var(--ease-out) 0.4s both;
	}

	.kpl-hero h1 em {
		font-style: italic;
		color: var(--gold);
		position: relative;
	}

	.kpl-hero h1 em::after {
		content: '';
		position: absolute;
		bottom: 2px;
		left: 0;
		right: 0;
		height: 3px;
		background: linear-gradient(90deg, var(--gold), var(--gold-light));
		opacity: 0.4;
		border-radius: 2px;
	}

	.kpl-hero__desc {
		font-size: 1.1rem;
		color: rgba(255, 255, 255, 0.65);
		line-height: 1.7;
		margin-bottom: 2.5rem;
		max-width: 520px;
		animation: fadeInUp 0.8s var(--ease-out) 0.6s both;
	}

	/* Hero Actions */
	.kpl-hero__actions {
		display: flex;
		gap: 1rem;
		flex-wrap: wrap;
		animation: fadeInUp 0.8s var(--ease-out) 0.8s both;
	}

	/* Hero Stats */
	.kpl-hero__right {
		position: relative;
		animation: fadeInUp 0.8s var(--ease-out) 0.6s both;
	}

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

	.kpl-hero__stat {
		background: rgba(255, 255, 255, 0.04);
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 16px;
		padding: 1.8rem 1.5rem;
		backdrop-filter: blur(10px);
		transition:
			background-color 0.4s var(--ease-out),
			border-color 0.4s var(--ease-out),
			transform 0.4s var(--ease-out);
	}

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

	.kpl-hero__stat:hover .kpl-hero__stat-icon {
		transform: scale(1.1) rotate(-3deg);
	}

	.kpl-hero__stat:nth-child(2n) {
		transform: translateY(1.5rem);
	}

	.kpl-hero__stat:nth-child(2n):hover {
		transform: translateY(calc(1.5rem - 4px));
	}

	.kpl-hero__stat-icon {
		width: 44px;
		height: 44px;
		border-radius: 10px;
		background: rgba(var(--gold-rgb), 0.12);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 1rem;
		color: var(--gold);
		transition: transform 0.4s var(--ease-spring);
	}

	.kpl-hero__stat-number {
		font-family: var(--font-display);
		font-size: 2.4rem;
		font-weight: 700;
		color: var(--white);
		line-height: 1;
		transition: text-shadow 0.4s var(--ease-out);
	}

	.kpl-hero__stat:hover .kpl-hero__stat-number {
		text-shadow: 0 0 20px var(--gold-30);
	}

	.kpl-hero__stat-label {
		font-size: 0.85rem;
		color: rgba(255, 255, 255, 0.75);
		margin-top: 0.3rem;
	}

	/* =============================================================================
   7. SECTIONS COMMON (BEM: kpl-section)
   ============================================================================= */
	.kpl-section {
		padding: 6rem 2rem;
		max-width: 1340px;
		margin: 0 auto;
		content-visibility: auto;
		contain-intrinsic-size: auto 600px;
	}

	.kpl-section--dark {
		background: var(--navy);
		max-width: 100%;
		padding: 6rem 2rem;
		content-visibility: auto;
		contain-intrinsic-size: auto 600px;
	}

	.kpl-section--dark .kpl-section__inner {
		max-width: 1340px;
		margin: 0 auto;
	}

	.kpl-section__header {
		margin-bottom: 3.5rem;
	}

	.kpl-section__label {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		font-size: 0.78rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: var(--gold-dark);
		margin-bottom: 0.8rem;
	}

	.kpl-section__label::before {
		content: '';
		width: 32px;
		height: 2px;
		background: linear-gradient(90deg, var(--gold), var(--gold-light));
		border-radius: 2px;
	}

	.kpl-section__title {
		font-family: var(--font-display);
		font-size: clamp(2rem, 3.5vw, 2.8rem);
		font-weight: 600;
		color: var(--text-dark);
		line-height: 1.2;
	}

	.kpl-section--dark .kpl-section__title {
		color: var(--white);
	}

	.kpl-section--dark .kpl-section__label {
		color: var(--gold-light);
	}

	.kpl-section__subtitle {
		font-size: 1.05rem;
		color: var(--text-mid);
		margin-top: 0.8rem;
		max-width: 600px;
		line-height: 1.7;
	}

	.kpl-section--dark .kpl-section__subtitle {
		color: rgba(255, 255, 255, 0.55);
	}

	/* =============================================================================
   20. FOOTER (BEM: kpl-footer)
   ============================================================================= */
	.kpl-footer,
	footer {
		background: var(--navy);
		padding: 4rem 2rem 2rem;
		border-top: none;
		position: relative;
	}

	.kpl-footer::before,
	footer::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: min(80%, 800px);
		height: 1px;
		background: linear-gradient(
			90deg,
			transparent,
			var(--gold-30) 30%,
			rgba(var(--gold-rgb), 0.5) 50%,
			var(--gold-30) 70%,
			transparent
		);
	}

	.kpl-footer__inner {
		max-width: 1340px;
		margin: 0 auto;
	}

	.kpl-footer__top {
		display: grid;
		grid-template-columns: 2fr 1fr 1fr 1fr;
		gap: 3rem;
		margin-bottom: 3rem;
	}

	.kpl-footer__brand p {
		font-size: 0.88rem;
		color: rgba(255, 255, 255, 0.6);
		line-height: 1.7;
		margin-top: 1rem;
		max-width: 300px;
	}

	.kpl-footer__col h4,
	.kpl-footer__col h2 {
		font-family: var(--font-display);
		font-size: 1.1rem;
		color: var(--white);
		margin-bottom: 1rem;
	}

	.kpl-footer__col a {
		display: block;
		color: rgba(255, 255, 255, 0.6);
		text-decoration: none;
		font-size: 0.88rem;
		padding: 0.3rem 0;
		transition: color 0.3s ease;
		cursor: pointer;
	}

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

	.kpl-footer__bottom {
		border-top: 1px solid rgba(255, 255, 255, 0.06);
		padding-top: 1.5rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.kpl-footer__bottom p {
		font-size: 0.8rem;
		color: rgba(255, 255, 255, 0.55);
	}

	.kpl-footer__social {
		display: flex;
		gap: 0.8rem;
	}

	.kpl-footer__social a {
		width: 36px;
		height: 36px;
		border-radius: 8px;
		border: 1px solid rgba(255, 255, 255, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgba(255, 255, 255, 0.6);
		text-decoration: none;
		transition:
			border-color 0.3s ease,
			color 0.3s ease,
			background-color 0.3s ease,
			transform 0.3s var(--ease-out);
		font-size: 0.85rem;
	}

	.kpl-footer__social a:hover,
	.kpl-footer__social a:focus-visible {
		border-color: var(--gold);
		color: var(--gold);
		background: rgba(var(--gold-rgb), 0.12);
		transform: translateY(-2px);
	}

	/* =============================================================================
   21. FLOATING CTA (BEM: kpl-floating-cta)
   ============================================================================= */
	.kpl-floating-cta {
		position: fixed;
		bottom: 2rem;
		right: 2rem;
		z-index: var(--z-floating-cta);
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: var(--green);
		color: var(--white);
		border: none;
		cursor: pointer;
		box-shadow: 0 6px 24px rgba(var(--green-light-rgb), 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		transition:
			transform 0.3s var(--ease-out),
			box-shadow 0.3s var(--ease-out);
		font-size: 1.3rem;
		text-decoration: none;
	}

	.kpl-floating-cta::before {
		content: '';
		position: absolute;
		inset: -4px;
		border-radius: 50%;
		background: rgba(var(--green-light-rgb), 0.25);
		animation: floatingCtaPulse 2.5s ease-in-out infinite;
		z-index: -1;
	}

	.kpl-floating-cta:hover,
	.kpl-floating-cta:focus-visible {
		transform: scale(1.1);
		box-shadow: 0 8px 30px rgba(var(--green-light-rgb), 0.5);
	}

	@keyframes floatingCtaPulse {
		0%,
		100% {
			transform: scale(1);
			opacity: 0.6;
		}
		50% {
			transform: scale(1.35);
			opacity: 0;
		}
	}

	/* =============================================================================
   22. ANIMATIONS
   ============================================================================= */
	@keyframes glowPulse {
		0%,
		100% {
			opacity: 0.6;
			transform: scale(1);
		}
		50% {
			opacity: 1;
			transform: scale(1.1);
		}
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(30px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Scroll Reveal (BEM: kpl-reveal) */
	.kpl-reveal {
		opacity: 0;
		transform: translateY(40px);
		transition:
			opacity 0.8s var(--ease-out),
			transform 0.8s var(--ease-out);
	}

	.kpl-reveal.visible {
		opacity: 1;
		transform: translateY(0);
	}

	/* Reveal variants — direction-aware */
	.kpl-reveal--left {
		opacity: 0;
		transform: translateX(-40px);
		transition:
			opacity 0.8s var(--ease-out),
			transform 0.8s var(--ease-out);
	}

	.kpl-reveal--left.visible {
		opacity: 1;
		transform: translateX(0);
	}

	.kpl-reveal--right {
		opacity: 0;
		transform: translateX(40px);
		transition:
			opacity 0.8s var(--ease-out),
			transform 0.8s var(--ease-out);
	}

	.kpl-reveal--right.visible {
		opacity: 1;
		transform: translateX(0);
	}

	.kpl-reveal--scale {
		opacity: 0;
		transform: scale(0.92);
		transition:
			opacity 0.8s var(--ease-out),
			transform 0.8s var(--ease-out);
	}

	.kpl-reveal--scale.visible {
		opacity: 1;
		transform: scale(1);
	}

	/* Staggered children — applied via JS */
	.kpl-stagger-item {
		opacity: 0;
		transform: translateY(30px);
		transition:
			opacity 0.6s var(--ease-out),
			transform 0.6s var(--ease-out);
	}

	.kpl-stagger-item.visible {
		opacity: 1;
		transform: translateY(0);
	}

	/* Section gold separator line (BEM: kpl-section__separator) */
	.kpl-section__separator {
		width: 60px;
		height: 2px;
		background: linear-gradient(90deg, var(--gold), var(--gold-light));
		border: none;
		border-radius: 2px;
		margin: 0 auto 3.5rem;
		opacity: 0.6;
	}

	/* =============================================================================
   24. RESPONSIVE BREAKPOINTS
   ============================================================================= */

	/* Tablet landscape */
	@media (max-width: 1024px) {
		.kpl-hero__content {
			grid-template-columns: 1fr;
			gap: 3rem;
		}

		.kpl-hero__right {
			max-width: 500px;
		}

		.kpl-services__grid {
			grid-template-columns: repeat(2, 1fr);
		}

		.kpl-whyus__grid {
			grid-template-columns: 1fr;
		}

		.kpl-about__intro {
			grid-template-columns: 1fr;
		}

		.kpl-services-detail {
			grid-template-columns: 1fr;
		}

		.kpl-process {
			grid-template-columns: repeat(3, 1fr);
		}

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

		.kpl-team__grid {
			grid-template-columns: repeat(2, 1fr);
		}

		.kpl-contacts__layout {
			grid-template-columns: 1fr;
		}

		.kpl-footer__top {
			grid-template-columns: repeat(2, 1fr);
			gap: 2rem;
		}

		.kpl-values__grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	/* Tablet portrait / Mobile */
	@media (max-width: 768px) {
		.kpl-services__grid {
			grid-template-columns: 1fr;
		}

		.kpl-testimonials__wrapper {
			grid-template-columns: 1fr;
		}

		.kpl-hero__stats {
			grid-template-columns: repeat(2, 1fr);
		}

		.kpl-hero__stat:nth-child(2),
		.kpl-hero__stat:nth-child(4) {
			transform: none;
		}

		.kpl-hero__stat:nth-child(2):hover,
		.kpl-hero__stat:nth-child(4):hover {
			transform: translateY(-4px);
		}

		.kpl-form__row {
			grid-template-columns: 1fr;
		}

		.kpl-process {
			grid-template-columns: repeat(2, 1fr);
		}

		.kpl-team__grid {
			grid-template-columns: 1fr;
		}

		/* Services detail: stack cards vertically, center content on mobile */
		.kpl-services-detail > div {
			flex-direction: column;
			align-items: center;
			text-align: center;
		}

		/* Content wrapper stretches full width; tags row centered */
		.kpl-services-detail > div > div:last-child {
			align-self: stretch;
		}

		.kpl-services-detail > div > div:last-child > div {
			justify-content: center;
		}

		.kpl-footer__top {
			grid-template-columns: 1fr;
		}

		.kpl-footer__bottom {
			flex-direction: column;
			gap: 1rem;
			text-align: center;
		}

		.kpl-values__grid {
			grid-template-columns: 1fr;
		}

		.kpl-cta {
			padding: 3rem 1.5rem;
			margin: 2rem 1rem;
		}
	}

	/* =============================================================================
   ACCESSIBILITY — REDUCED MOTION & FOCUS STYLES
   ============================================================================= */

	/**
 * Respect user preference for reduced motion.
 * Disables all transitions and animations for users who prefer reduced motion.
 */
	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}

		header.scrolled {
			backdrop-filter: none;
		}

		.kpl-hero__glow {
			display: none;
		}

		.kpl-hero__stat {
			backdrop-filter: none;
		}
	}

	/**
 * Focus-visible styles for keyboard navigation accessibility.
 * Only shows focus ring when navigating with keyboard, not on mouse click.
 */
	:focus-visible {
		outline: 2px solid var(--gold, #c9a84c);
		outline-offset: 2px;
	}

	:focus:not(:focus-visible) {
		outline: none;
	}

	/* =============================================================================
   SMALL MOBILE (max-width: 480px)
   ============================================================================= */
	@media (max-width: 480px) {
		.kpl-hero h1 {
			font-size: clamp(1.8rem, 6vw, 2.8rem);
		}

		.kpl-hero__stats {
			gap: 1rem;
		}

		.kpl-hero__stat {
			padding: 1.2rem;
		}

		.kpl-section__title {
			font-size: clamp(1.5rem, 5vw, 2rem);
		}
	}

	/* =============================================================================
   GENERATEBLOCKS FULL-WIDTH SECTIONS — overflow fix
   Prevents GB sections from exceeding viewport width on mobile.
   ============================================================================= */
	.adv-theme section[class*='gb-element-'] {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* =============================================================================
   KPL INTERACTIONS — B1 (scroll progress + nav underline)
   Driven by /js/kpl-interactions.js. All hooks degrade gracefully
   if JS is disabled (bar stays scaleX(0), underline uses :hover only).
   ============================================================================= */

	/* Scroll progress bar — sits directly below the fixed header. */
	.kpl-scroll-progress {
		position: fixed;
		top: 0;
		left: 0;
		height: 2px;
		width: 100%;
		background: linear-gradient(
			90deg,
			var(--gold) 0%,
			var(--gold-light) 50%,
			var(--gold) 100%
		);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.1s linear;
		z-index: calc(var(--z-header) + 1);
		pointer-events: none;
		will-change: transform;
	}

	/* Animated gold underline for navigation links. */
	#header .gbp-navigation__menu .kpl-nav-link {
		position: relative;
	}

	#header .gbp-navigation__menu .kpl-nav-link::after {
		content: '';
		position: absolute;
		left: 1.1rem;
		right: 1.1rem;
		bottom: 0.35rem;
		height: 1.5px;
		background: var(--gold);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.35s var(--ease-out);
		pointer-events: none;
	}

	#header
		.gbp-navigation__menu
		.kpl-nav-link:is(:hover, :focus-visible)::after,
	#header .gbp-navigation__menu .kpl-nav-link--active::after {
		transform: scaleX(1);
	}

	/* In the open mobile overlay the underline reads noisy — hide it there. */
	#header
		.gbp-navigation__menu.gbp-navigation__menu--open
		.kpl-nav-link::after {
		display: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.kpl-scroll-progress {
			display: none;
		}
		#header .gbp-navigation__menu .kpl-nav-link::after {
			transition: none;
		}
	}
} /* end @layer layout */