@layer components {
	/* Shared interaction primitives. */
	.fg-button {
		display: inline-flex;
		min-block-size: 3rem;
		align-items: center;
		justify-content: center;
		gap: var(--fg-space-3);
		padding: 0.75rem 1.125rem;
		border: var(--fg-border-width) solid transparent;
		border-radius: var(--fg-radius-md);
		font-size: var(--fg-font-size-sm);
		font-weight: var(--fg-font-weight-semibold);
		letter-spacing: -0.005em;
		line-height: 1;
		text-decoration: none;
		transition:
			background-color var(--fg-duration-fast) var(--fg-easing-standard),
			border-color var(--fg-duration-fast) var(--fg-easing-standard),
			color var(--fg-duration-fast) var(--fg-easing-standard);
	}

	.fg-button--compact {
		min-block-size: 2.75rem;
		padding-inline: 1rem;
	}

	.fg-button--primary {
		border-color: var(--fg-brand-primary);
		background: var(--fg-brand-primary);
		color: var(--fg-color-on-brand);
	}

	.fg-button--secondary {
		border-color: var(--fg-color-border-strong);
		background: transparent;
		color: var(--fg-color-text);
	}

	.fg-button__arrow,
	.fg-button [aria-hidden="true"]:last-child,
	.fg-text-action__arrow {
		display: inline-block;
		transition: transform var(--fg-duration-fast) var(--fg-easing-standard);
	}

	.fg-text-action {
		display: inline-flex;
		align-items: center;
		gap: var(--fg-space-2);
		padding-block: var(--fg-space-2);
		color: var(--fg-color-text);
		font-size: var(--fg-font-size-sm);
		font-weight: var(--fg-font-weight-medium);
		text-decoration-color: var(--fg-color-border-strong);
		text-decoration-line: underline;
		text-decoration-thickness: var(--fg-border-width);
		text-underline-offset: 0.35em;
		transition:
			color var(--fg-duration-fast) var(--fg-easing-standard),
			text-decoration-color var(--fg-duration-fast) var(--fg-easing-standard);
	}

	@media (hover: hover) and (pointer: fine) {
		.fg-button--primary:hover {
			border-color: var(--fg-brand-primary-hover);
			background: var(--fg-brand-primary-hover);
		}

		.fg-button--secondary:hover {
			border-color: var(--fg-color-text);
			background: var(--fg-color-interactive-tint);
		}

		.fg-button:hover .fg-button__arrow,
		.fg-button:hover [aria-hidden="true"]:last-child,
		.fg-text-action:hover .fg-text-action__arrow,
		.fg-text-action:hover [aria-hidden="true"]:last-child {
			transform: translateX(0.2rem);
		}

		.fg-text-action:hover {
			color: var(--fg-color-text);
			text-decoration-color: var(--fg-brand-primary);
		}
	}

	.fg-button--primary:active {
		border-color: var(--fg-brand-primary-active);
		background: var(--fg-brand-primary-active);
	}

	.fg-button--primary:focus-visible {
		outline-color: var(--fg-color-on-brand);
	}

	/* Desktop global navigation. */
	.site-navigation--desktop,
	.site-navigation--primary {
		display: none;
	}

	.site-navigation__list,
	.site-navigation__dropdown-menu,
	.mobile-navigation__list,
	.mobile-navigation__services,
	.footer-navigation__list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.site-navigation__list {
		display: flex;
		align-items: center;
		gap: clamp(1rem, 1vw + 0.35rem, 1.75rem);
	}

	.site-header__navigation {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
	}

	.site-navigation__item,
	.site-navigation__dropdown {
		position: relative;
	}

	.site-navigation__link,
	.site-navigation__dropdown-toggle {
		display: inline-flex;
		min-block-size: 2.75rem;
		align-items: center;
		gap: var(--fg-space-2);
		padding: var(--fg-space-2) var(--fg-space-1);
		border: 0;
		background: transparent;
		color: var(--fg-color-text-muted);
		font-size: var(--fg-font-size-sm);
		font-weight: var(--fg-font-weight-medium);
		line-height: 1;
		text-decoration: none;
		transition: color var(--fg-duration-fast) var(--fg-easing-standard);
	}

	.site-navigation__chevron {
		inline-size: 0.75rem;
		block-size: auto;
		transition: transform var(--fg-duration-fast) var(--fg-easing-standard);
	}

	.site-navigation__dropdown-toggle[aria-expanded="true"] {
		color: var(--fg-color-text);
	}

	.site-navigation__dropdown-toggle[aria-expanded="true"] .site-navigation__chevron {
		transform: rotate(180deg);
	}

	.site-navigation__link[aria-current="page"],
	.site-navigation__link[aria-current="true"] {
		color: var(--fg-color-text);
	}

	.site-navigation__dropdown-menu {
		position: absolute;
		inset-block-start: calc(100% + var(--fg-space-2));
		inset-inline-start: calc(var(--fg-space-4) * -1);
		z-index: var(--fg-z-dropdown);
		inline-size: 18.5rem;
		padding: var(--fg-space-2);
		border: var(--fg-border);
		border-radius: var(--fg-radius-md);
		background: var(--fg-color-surface-elevated);
		transform-origin: top left;
	}

	.site-navigation__dropdown-menu:not([hidden]) {
		animation: fg-dropdown-enter var(--fg-duration-standard) var(--fg-easing-enter) both;
	}

	.site-navigation__dropdown-link {
		position: relative;
		display: flex;
		min-block-size: 2.875rem;
		align-items: center;
		padding: 0.625rem 0.75rem 0.625rem 1rem;
		border-radius: var(--fg-radius-sm);
		color: var(--fg-color-text-muted);
		font-size: var(--fg-font-size-sm);
		font-weight: var(--fg-font-weight-medium);
		line-height: 1.3;
		text-decoration: none;
		transition:
			background-color var(--fg-duration-fast) var(--fg-easing-standard),
			color var(--fg-duration-fast) var(--fg-easing-standard);
	}

	.site-navigation__dropdown-link::before {
		position: absolute;
		inset-block: 0.75rem;
		inset-inline-start: 0;
		inline-size: var(--fg-border-width);
		background: var(--fg-brand-primary);
		content: "";
		transform: scaleY(0);
		transition: transform var(--fg-duration-fast) var(--fg-easing-standard);
	}

	.site-navigation__dropdown-link--all {
		justify-content: space-between;
		gap: var(--fg-space-3);
		margin-block-start: var(--fg-space-2);
		border-block-start: var(--fg-border);
		border-radius: 0 0 var(--fg-radius-sm) var(--fg-radius-sm);
	}

	@media (hover: hover) and (pointer: fine) {
		.site-navigation__link:hover,
		.site-navigation__dropdown-toggle:hover {
			color: var(--fg-color-text);
		}

		.site-navigation__dropdown-link:hover {
			background: var(--fg-color-interactive-tint);
			color: var(--fg-color-text);
		}

		.site-navigation__dropdown-link:hover::before {
			transform: scaleY(1);
		}
	}

	.site-navigation__dropdown-link:focus-visible::before {
		transform: scaleY(1);
	}

	.language-switcher {
		display: inline-flex;
		min-block-size: 2.75rem;
		align-items: center;
		gap: var(--fg-space-2);
		color: var(--fg-color-text-subtle);
		font-size: var(--fg-font-size-xs);
		font-weight: var(--fg-font-weight-semibold);
		letter-spacing: 0.06em;
		line-height: 1;
	}

	.language-switcher::before {
		inline-size: var(--fg-border-width);
		block-size: 1rem;
		margin-inline-end: var(--fg-space-2);
		background: var(--fg-color-border);
		content: "";
	}

	.language-switcher__option {
		position: relative;
		display: inline-flex;
		min-block-size: 2.75rem;
		align-items: center;
		padding: 0 var(--fg-space-1);
		border: 0;
		background: transparent;
		color: inherit;
		text-decoration: none;
	}

	.language-switcher__option[aria-current="true"],
	.language-switcher__option[aria-pressed="true"],
	.language-switcher__option.is-active {
		color: var(--fg-color-text);
	}

	.language-switcher__option[aria-current="true"]::after,
	.language-switcher__option[aria-pressed="true"]::after,
	.language-switcher__option.is-active::after {
		position: absolute;
		inset-block-end: 0.5rem;
		inset-inline: var(--fg-space-1);
		block-size: var(--fg-border-width);
		background: var(--fg-brand-primary);
		content: "";
	}

	.site-header__menu-toggle {
		display: inline-grid;
		inline-size: 3rem;
		block-size: 3rem;
		place-content: center;
		gap: 0.3rem;
		padding: 0;
		border: var(--fg-border-width) solid var(--fg-color-border);
		border-radius: var(--fg-radius-sm);
		background: transparent;
		color: var(--fg-color-text);
	}

	.site-header__menu-toggle-line,
	.site-header__menu-icon > span {
		display: block;
		inline-size: 1.125rem;
		block-size: var(--fg-border-width);
		background: currentColor;
		transition: transform var(--fg-duration-standard) var(--fg-easing-standard);
	}

	.site-header__menu-icon {
		display: grid;
		gap: 0.35rem;
	}

	/* Dedicated mobile navigation layer. */
	.mobile-navigation {
		position: fixed;
		inset: 0;
		z-index: var(--fg-z-overlay);
		isolation: isolate;
	}

	.mobile-navigation__backdrop {
		position: absolute;
		inset: 0;
		z-index: -2;
		background: var(--fg-color-backdrop);
	}

	.mobile-navigation__panel {
		position: absolute;
		inset: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--fg-color-menu-overlay);
	}

	.mobile-navigation:not([hidden]) .mobile-navigation__panel {
		animation: fg-mobile-menu-enter var(--fg-duration-slow) var(--fg-easing-enter) both;
	}

	.mobile-navigation__inner {
		display: flex;
		inline-size: min(calc(100% - (var(--fg-container-gutter) * 2)), var(--fg-container-main));
		min-block-size: 100%;
		margin-inline: auto;
		padding-block: var(--fg-space-4) var(--fg-space-7);
		flex-direction: column;
	}

	.mobile-navigation__header {
		display: flex;
		min-block-size: calc(var(--fg-header-height) - (var(--fg-space-4) * 2));
		align-items: center;
		justify-content: space-between;
		gap: var(--fg-space-4);
	}

	.mobile-navigation__close {
		position: relative;
		display: inline-grid;
		inline-size: 3rem;
		block-size: 3rem;
		place-items: center;
		padding: 0;
		border: var(--fg-border-width) solid var(--fg-color-border);
		border-radius: var(--fg-radius-sm);
		background: transparent;
		color: var(--fg-color-text);
	}

	.mobile-navigation__close::before,
	.mobile-navigation__close::after {
		position: absolute;
		inline-size: 1.125rem;
		block-size: var(--fg-border-width);
		background: currentColor;
		content: "";
	}

	.mobile-navigation__close::before {
		transform: rotate(45deg);
	}

	.mobile-navigation__close::after {
		transform: rotate(-45deg);
	}

	.mobile-navigation__content {
		display: flex;
		padding-block-start: clamp(2.5rem, 8vh, 5rem);
		flex: 1;
		flex-direction: column;
	}

	.mobile-navigation__list {
		border-block-start: var(--fg-border);
	}

	.mobile-navigation__list > li {
		border-block-end: var(--fg-border);
	}

	.mobile-navigation__primary-link,
	.mobile-navigation__link,
	.mobile-navigation__services-label {
		display: flex;
		min-block-size: 4rem;
		align-items: center;
		justify-content: space-between;
		padding-block: var(--fg-space-4);
		color: var(--fg-color-text);
		font-size: clamp(1.625rem, 1.35rem + 1.25vw, 2.25rem);
		font-weight: var(--fg-font-weight-medium);
		letter-spacing: var(--fg-letter-spacing-heading);
		line-height: var(--fg-line-height-tight);
		text-decoration: none;
	}

	.mobile-navigation__services-label {
		min-block-size: auto;
		padding-block-end: var(--fg-space-3);
		border: 0;
		background: transparent;
	}

	.mobile-navigation__services-list {
		margin: 0;
		padding: 0 0 var(--fg-space-4) var(--fg-space-5);
		list-style: none;
	}

	.mobile-navigation__services-list a,
	.mobile-navigation__services-link {
		display: flex;
		min-block-size: 2.75rem;
		align-items: center;
		padding-block: var(--fg-space-2);
		color: var(--fg-color-text-muted);
		font-size: var(--fg-font-size-body);
		text-decoration: none;
	}

	.mobile-navigation__footer,
	.mobile-navigation__actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--fg-space-5);
		margin-block-start: auto;
		padding-block-start: clamp(2.25rem, 7vh, 4rem);
		flex-wrap: wrap;
	}

	.mobile-navigation .language-switcher::before {
		display: none;
	}

	.mobile-navigation .fg-button {
		min-inline-size: min(100%, 11.5rem);
	}

	@media (hover: hover) and (pointer: fine) {
		.mobile-navigation__primary-link:hover,
		.mobile-navigation__services-list a:hover,
		.mobile-navigation__link:hover,
		.mobile-navigation__services-link:hover {
			color: var(--fg-color-text);
		}
	}

	/* Footer: compact, structured and ready to extend. */
	.site-footer__inner {
		padding-block: var(--fg-space-8) var(--fg-space-5);
	}

	.site-footer__top {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--fg-space-7);
		padding-block-end: var(--fg-space-8);
	}

	.site-footer__brand {
		display: inline-flex;
		min-block-size: 2.75rem;
		align-items: center;
		align-self: start;
		justify-self: start;
		text-decoration: none;
	}

	.site-footer__logo-link {
		display: inline-flex;
		min-block-size: 2.75rem;
		align-items: center;
		text-decoration: none;
	}

	.site-footer__logo-viewport {
		display: block;
		inline-size: 10.5rem;
		aspect-ratio: 15 / 2;
		overflow: hidden;
	}

	.site-footer__logo {
		inline-size: 100%;
		block-size: 100%;
		max-inline-size: none;
		object-fit: cover;
		object-position: center;
	}

	.footer-navigation {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--fg-space-7) var(--fg-space-5);
	}

	.footer-navigation__group {
		min-inline-size: 0;
	}

	.footer-navigation__title {
		margin-block-end: var(--fg-space-3);
		color: var(--fg-color-text-muted);
		font-size: var(--fg-font-size-xs);
		font-weight: var(--fg-font-weight-semibold);
		letter-spacing: var(--fg-letter-spacing-meta);
		line-height: 1.2;
		text-transform: uppercase;
	}

	.footer-navigation__list {
		display: grid;
		gap: var(--fg-space-2);
	}

	.footer-navigation__link,
	.site-footer a:not(.fg-button):not(.site-footer__logo-link):not(.site-footer__brand) {
		color: var(--fg-color-text-muted);
		font-size: var(--fg-font-size-sm);
		text-decoration: none;
		transition: color var(--fg-duration-fast) var(--fg-easing-standard);
	}

	.site-footer__bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--fg-space-3) var(--fg-space-6);
		padding-block-start: var(--fg-space-5);
		border-block-start: var(--fg-border);
		flex-wrap: wrap;
	}

	.site-info {
		color: var(--fg-color-text-muted);
		font-size: var(--fg-font-size-sm);
	}

	.site-footer__legal {
		display: flex;
		gap: var(--fg-space-4);
		flex-wrap: wrap;
	}

	.site-footer__legal ul {
		display: flex;
		gap: var(--fg-space-4);
		margin: 0;
		padding: 0;
		flex-wrap: wrap;
		list-style: none;
	}

	.site-footer .language-switcher::before {
		display: none;
	}

	@media (hover: hover) and (pointer: fine) {
		.footer-navigation__link:hover,
		.site-footer a:not(.fg-button):not(.site-footer__logo-link):not(.site-footer__brand):hover {
			color: var(--fg-color-text);
		}
	}

	.flow-line {
		position: relative;
		inline-size: 100%;
		block-size: 4rem;
	}

	.flow-line__track {
		position: absolute;
		inset-block-start: 50%;
		inset-inline: 0;
		block-size: var(--fg-border-width);
		background: var(--fg-color-border-strong);
	}

	.flow-line__turn {
		position: absolute;
		inset-block-start: calc(50% - 0.75rem);
		inset-inline-start: 64%;
		inline-size: 1.5rem;
		block-size: 1.5rem;
		border-block-start: var(--fg-border-width) solid var(--fg-brand-primary);
		border-inline-end: var(--fg-border-width) solid var(--fg-brand-primary);
		transform: rotate(45deg);
	}

	.flow-line__node {
		position: absolute;
		inset-block-start: calc(50% - 0.1875rem);
		inset-inline-start: calc(64% + 0.5625rem);
		inline-size: 0.375rem;
		block-size: 0.375rem;
		border-radius: 50%;
		background: var(--fg-brand-secondary);
	}

	.flow-line__label {
		position: absolute;
		inset-block-start: calc(50% + var(--fg-space-3));
		inset-inline-end: 0;
		color: var(--fg-color-text-subtle);
		font-family: var(--fg-font-mono);
		font-size: var(--fg-font-size-xs);
		letter-spacing: 0.04em;
	}

	@media (min-width: 48rem) {
		.site-footer__inner {
			padding-block-start: var(--fg-space-9);
		}

		.site-footer__top {
			grid-template-columns: repeat(8, minmax(0, 1fr));
			gap: var(--fg-grid-gap);
		}

		.site-footer__brand {
			grid-column: span 3;
		}

		.footer-navigation {
			grid-column: span 5;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: var(--fg-grid-gap);
		}
	}

	@media (min-width: 64rem) {
		.site-navigation--desktop {
			display: flex;
			align-items: center;
			gap: clamp(1rem, 1.45vw, 1.5rem);
		}

		.site-navigation--primary {
			display: block;
		}

		.site-header__cta {
			min-block-size: 2.75rem;
			padding-inline: 1rem;
		}

		.site-header__menu-toggle,
		.mobile-navigation {
			display: none !important;
		}

		.site-footer__top {
			grid-template-columns: repeat(12, minmax(0, 1fr));
		}

		.site-footer__brand {
			grid-column: span 5;
		}

		.footer-navigation {
			grid-column: 7 / -1;
		}
	}


	@media (max-width: 29.99rem) {
		.site-footer__inner {
			padding-block-start: var(--fg-space-7);
		}

		.site-footer__top {
			gap: var(--fg-space-6);
			padding-block-end: var(--fg-space-7);
		}

		.footer-navigation {
			gap: var(--fg-space-6) var(--fg-space-4);
		}

		.site-footer__bottom {
			align-items: flex-start;
			flex-direction: column;
		}
	}
}

@keyframes fg-dropdown-enter {
	from {
		opacity: 0;
		transform: translateY(-0.375rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fg-mobile-menu-enter {
	from {
		opacity: 0;
		transform: translateX(1rem);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}