/* ExportForge component foundations. Content and page composition are added later. */

.ef-container {
	--ef-container-local-max-width: var(--ef-container-max-width);
	--ef-container-local-gutter: var(--ef-container-gutter-mobile);

	inline-size: min(calc(100% - (var(--ef-container-local-gutter) * 2)), var(--ef-container-local-max-width));
	margin-inline: auto;
}

.ef-container--content {
	--ef-container-local-max-width: var(--ef-container-content-width);
}

.ef-container--full {
	--ef-container-local-max-width: var(--ef-container-full-width);
}

.ef-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ef-grid-minimum-column)), 1fr));
	gap: var(--ef-grid-gap);
}

.ef-grid--2,
.ef-grid--3,
.ef-grid--4 {
	grid-template-columns: minmax(0, 1fr);
}

.ef-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--ef-button-height);
	padding-inline: var(--ef-button-padding-inline);
	gap: var(--ef-button-gap);
	border: var(--ef-button-border-width) solid var(--ef-button-base-border);
	border-radius: var(--ef-button-radius);
	font-family: var(--ef-button-font-family);
	font-size: var(--ef-button-font-size);
	font-weight: var(--ef-button-font-weight);
	line-height: var(--ef-button-line-height);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition-property: color, background-color, border-color, box-shadow, opacity;
	transition-duration: var(--ef-button-transition-duration);
	transition-timing-function: var(--ef-button-transition-easing);
}

.ef-button--primary {
	color: var(--ef-button-primary-foreground);
	background: var(--ef-button-primary-background);
	border-color: var(--ef-button-primary-border);
}

.ef-button--primary:hover {
	background: var(--ef-button-primary-hover);
	border-color: var(--ef-button-primary-hover);
}

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

.ef-button--secondary,
.ef-button--outline {
	color: var(--ef-button-secondary-foreground);
	background: var(--ef-button-secondary-background);
	border-color: var(--ef-button-secondary-border);
}

.ef-button--secondary:hover,
.ef-button--secondary:active,
.ef-button--outline:hover,
.ef-button--outline:active {
	background: var(--ef-button-secondary-hover);
	border-color: var(--ef-button-secondary-hover);
}

.ef-button--text {
	color: var(--ef-button-text-foreground);
	background: var(--ef-button-text-background);
	border-color: var(--ef-button-text-border);
}

.ef-button--text:hover,
.ef-button--text:active {
	background: var(--ef-button-text-hover);
}

.ef-button:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 var(--ef-button-focus-offset) var(--ef-button-focus-offset-color),
		0 0 0 calc(var(--ef-button-focus-offset) + var(--ef-button-focus-width)) var(--ef-button-focus-color);
}

.ef-button:disabled,
.ef-button[aria-disabled="true"] {
	opacity: var(--ef-button-disabled-opacity);
	cursor: not-allowed;
	pointer-events: none;
}

.ef-button[aria-busy="true"] {
	opacity: var(--ef-semantic-control-loading-opacity);
	cursor: progress;
}

.ef-card,
.ef-product-card,
.ef-certificate-card,
.ef-faq-item {
	color: var(--ef-local-card-foreground);
	background: var(--ef-local-card-background);
	border: var(--ef-local-card-border-width) solid var(--ef-local-card-border);
	border-radius: var(--ef-local-card-radius);
	box-shadow: var(--ef-local-card-shadow);
}

.ef-card {
	--ef-local-card-background: var(--ef-card-background);
	--ef-local-card-foreground: var(--ef-card-foreground);
	--ef-local-card-border: var(--ef-card-border);
	--ef-local-card-border-width: var(--ef-card-border-width);
	--ef-local-card-radius: var(--ef-card-radius);
	--ef-local-card-shadow: var(--ef-card-shadow);

	display: grid;
	gap: var(--ef-card-gap);
	padding: var(--ef-card-padding);
	transition-property: transform, box-shadow, border-color;
	transition-duration: var(--ef-card-transition-duration);
	transition-timing-function: var(--ef-card-transition-easing);
}

.ef-card:hover {
	transform: translateY(var(--ef-card-hover-translate));
	box-shadow: var(--ef-card-shadow-hover);
}

.ef-card:focus-within {
	outline: none;
	box-shadow:
		0 0 0 var(--ef-card-focus-offset) var(--ef-card-focus-offset-color),
		0 0 0 calc(var(--ef-card-focus-offset) + var(--ef-card-focus-width)) var(--ef-card-focus-color);
}

.ef-card--subtle {
	--ef-local-card-background: var(--ef-semantic-color-surface-alt);
	--ef-local-card-shadow: var(--ef-semantic-shadow-none);
}

.ef-breadcrumb {
	color: var(--ef-breadcrumb-foreground);
	font-size: var(--ef-breadcrumb-font-size);
}

.ef-breadcrumb__list,
.ef-breadcrumb__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ef-breadcrumb__list {
	gap: var(--ef-breadcrumb-gap);
	padding: 0;
	margin: 0;
	list-style: none;
}

.ef-breadcrumb__item {
	gap: var(--ef-breadcrumb-item-gap);
}

.ef-breadcrumb a {
	color: var(--ef-breadcrumb-link);
}

.ef-breadcrumb__separator {
	color: var(--ef-breadcrumb-separator);
}

.ef-breadcrumb a:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 var(--ef-breadcrumb-focus-offset) var(--ef-breadcrumb-focus-offset-color),
		0 0 0 calc(var(--ef-breadcrumb-focus-offset) + var(--ef-breadcrumb-focus-width)) var(--ef-breadcrumb-focus-color);
}

.ef-notice {
	display: flex;
	gap: var(--ef-notice-gap);
	padding: var(--ef-notice-padding);
	border: var(--ef-notice-border-width) solid var(--ef-notice-info-border);
	border-radius: var(--ef-notice-radius);
}

.ef-notice--info {
	color: var(--ef-notice-info-foreground);
	background: var(--ef-notice-info-background);
	border-color: var(--ef-notice-info-border);
}

.ef-notice--warning {
	color: var(--ef-notice-warning-foreground);
	background: var(--ef-notice-warning-background);
	border-color: var(--ef-notice-warning-border);
}

.ef-notice--unavailable {
	color: var(--ef-notice-unavailable-foreground);
	background: var(--ef-notice-unavailable-background);
	border-color: var(--ef-notice-unavailable-border);
}

.ef-empty-state {
	display: grid;
	gap: var(--ef-empty-state-gap);
	padding: var(--ef-empty-state-padding);
	color: var(--ef-empty-state-foreground);
	background: var(--ef-empty-state-background);
	border: var(--ef-empty-state-border-width) solid var(--ef-empty-state-border);
	border-radius: var(--ef-empty-state-radius);
}

.ef-empty-state__title,
.ef-empty-state__message {
	margin: 0;
}

.ef-empty-state__title {
	font-weight: var(--ef-empty-state-title-weight);
}

.ef-product-card {
	--ef-local-card-background: var(--ef-product-card-background);
	--ef-local-card-foreground: var(--ef-product-card-foreground);
	--ef-local-card-border: var(--ef-product-card-border);
	--ef-local-card-border-width: var(--ef-product-card-border-width);
	--ef-local-card-radius: var(--ef-product-card-radius);
	--ef-local-card-shadow: var(--ef-product-card-shadow);

	display: grid;
	overflow: hidden;
	transition-property: transform, box-shadow, border-color;
	transition-duration: var(--ef-product-card-transition-duration);
	transition-timing-function: var(--ef-product-card-transition-easing);
}

.ef-product-card:hover {
	transform: translateY(var(--ef-product-card-hover-translate));
	box-shadow: var(--ef-product-card-shadow-hover);
}

.ef-product-card:focus-within {
	outline: none;
	box-shadow:
		0 0 0 var(--ef-product-card-focus-offset) var(--ef-product-card-focus-offset-color),
		0 0 0 calc(var(--ef-product-card-focus-offset) + var(--ef-product-card-focus-width)) var(--ef-product-card-focus-color);
}

.ef-product-card__media {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--ef-product-card-parameter-background);
}

.ef-product-card__body {
	display: grid;
	gap: var(--ef-product-card-gap);
	padding: var(--ef-product-card-padding);
}

.ef-product-card__parameters {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ef-space-small);
	padding: var(--ef-space-component);
	margin: 0;
	background: var(--ef-product-card-parameter-background);
}

.ef-product-card__parameter-label {
	color: var(--ef-product-card-parameter-label);
	font-size: var(--ef-font-caption-size);
}

.ef-certificate-card {
	--ef-local-card-background: var(--ef-certificate-card-background);
	--ef-local-card-foreground: var(--ef-certificate-card-foreground);
	--ef-local-card-border: var(--ef-certificate-card-border);
	--ef-local-card-border-width: var(--ef-certificate-card-border-width);
	--ef-local-card-radius: var(--ef-certificate-card-radius);
	--ef-local-card-shadow: var(--ef-certificate-card-shadow);

	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--ef-space-component);
	padding: var(--ef-certificate-card-padding);
}

.ef-certificate-card__icon {
	inline-size: var(--ef-semantic-control-icon-size);
	block-size: var(--ef-semantic-control-icon-size);
	color: var(--ef-certificate-card-icon-color);
}

.ef-certificate-card:focus-within {
	outline: none;
	box-shadow:
		0 0 0 var(--ef-certificate-card-focus-offset) var(--ef-certificate-card-focus-offset-color),
		0 0 0 calc(var(--ef-certificate-card-focus-offset) + var(--ef-certificate-card-focus-width)) var(--ef-certificate-card-focus-color);
}

.ef-faq-item {
	--ef-local-card-background: var(--ef-faq-item-background);
	--ef-local-card-foreground: var(--ef-faq-item-foreground);
	--ef-local-card-border: var(--ef-faq-item-border);
	--ef-local-card-border-width: var(--ef-faq-item-border-width);
	--ef-local-card-radius: var(--ef-faq-item-radius);
	--ef-local-card-shadow: var(--ef-semantic-shadow-none);

	overflow: clip;
}

.ef-faq-item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-block-size: var(--ef-faq-item-summary-height);
	padding: var(--ef-faq-item-padding);
	gap: var(--ef-faq-item-gap);
	cursor: pointer;
	list-style: none;
	transition: background-color var(--ef-faq-item-transition-duration) var(--ef-faq-item-transition-easing);
}

.ef-faq-item > summary::-webkit-details-marker {
	display: none;
}

.ef-faq-item > summary:focus-visible {
	outline: none;
	box-shadow:
		inset 0 0 0 var(--ef-faq-item-focus-offset) var(--ef-faq-item-focus-offset-color),
		inset 0 0 0 calc(var(--ef-faq-item-focus-offset) + var(--ef-faq-item-focus-width)) var(--ef-faq-item-focus-color);
}

.ef-faq-item__icon {
	flex: 0 0 auto;
	color: var(--ef-faq-item-icon-color);
}

.ef-faq-item__answer {
	padding: 0 var(--ef-faq-item-padding) var(--ef-faq-item-padding);
	color: var(--ef-faq-item-muted);
}

.ef-faq-list {
	display: grid;
	gap: var(--ef-space-component);
}

.ef-inquiry-form {
	display: grid;
	gap: var(--ef-inquiry-form-field-gap);
	padding: var(--ef-space-medium);
	color: var(--ef-inquiry-form-foreground);
	background: var(--ef-inquiry-form-background);
	border-radius: var(--ef-radius-card);
}

.ef-inquiry-form fieldset {
	display: grid;
	grid-column: 1 / -1;
	gap: var(--ef-inquiry-form-field-gap);
	padding: 0;
	margin: 0;
	border: 0;
}

.ef-inquiry-form__status {
	grid-column: 1 / -1;
	margin: 0;
}

.ef-inquiry-form__field {
	display: grid;
	gap: var(--ef-space-small);
}

.ef-inquiry-form label {
	color: var(--ef-inquiry-form-label);
	font-weight: var(--ef-semantic-typography-weight-medium);
}

.ef-inquiry-form input,
.ef-inquiry-form select,
.ef-inquiry-form textarea {
	inline-size: 100%;
	min-block-size: var(--ef-inquiry-form-input-height);
	padding-inline: var(--ef-inquiry-form-input-padding-inline);
	color: var(--ef-inquiry-form-foreground);
	background: var(--ef-inquiry-form-background);
	border: var(--ef-inquiry-form-border-width) solid var(--ef-inquiry-form-border);
	border-radius: var(--ef-inquiry-form-input-radius);
	font: inherit;
	transition-property: border-color, box-shadow;
	transition-duration: var(--ef-inquiry-form-transition-duration);
	transition-timing-function: var(--ef-inquiry-form-transition-easing);
}

.ef-inquiry-form textarea {
	min-block-size: calc(var(--ef-inquiry-form-input-height) * 3);
	padding-block: var(--ef-space-component);
	resize: vertical;
}

.ef-inquiry-form input::placeholder,
.ef-inquiry-form textarea::placeholder {
	color: var(--ef-inquiry-form-placeholder);
}

.ef-inquiry-form input:focus-visible,
.ef-inquiry-form select:focus-visible,
.ef-inquiry-form textarea:focus-visible {
	outline: none;
	border-color: var(--ef-inquiry-form-focus-border);
	box-shadow:
		0 0 0 var(--ef-inquiry-form-focus-offset) var(--ef-inquiry-form-focus-offset-color),
		0 0 0 calc(var(--ef-inquiry-form-focus-offset) + var(--ef-inquiry-form-focus-width)) var(--ef-inquiry-form-focus-border);
}

.ef-inquiry-form [aria-invalid="true"] {
	border-color: var(--ef-inquiry-form-error);
}

.ef-inquiry-form__error {
	color: var(--ef-inquiry-form-error);
	font-size: var(--ef-font-caption-size);
}

.ef-hero {
	display: grid;
	align-items: center;
	min-block-size: min(760px, 85vh);
	padding-block: var(--ef-hero-padding-block-mobile);
	color: var(--ef-hero-foreground);
	background: var(--ef-hero-background);
}

.ef-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, var(--ef-hero-content-width));
	gap: var(--ef-hero-grid-gap);
}

.ef-hero h1 {
	max-inline-size: 14ch;
	margin: 0;
	font-family: var(--ef-font-heading);
	font-size: var(--ef-hero-title-size);
	line-height: var(--ef-hero-title-line-height);
	letter-spacing: var(--ef-hero-title-tracking);
}

.ef-hero__eyebrow {
	color: var(--ef-hero-accent);
	font-size: var(--ef-font-caption-size);
	font-weight: var(--ef-semantic-typography-weight-bold);
	letter-spacing: var(--ef-semantic-typography-tracking-wide);
	text-transform: uppercase;
}

.ef-hero__summary {
	color: var(--ef-hero-muted);
	font-size: var(--ef-semantic-typography-size-body-large);
}

.ef-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ef-space-component);
}

.ef-evidence-label {
	display: inline-flex;
	align-items: center;
	gap: var(--ef-semantic-space-compact-gap);
	color: var(--ef-color-success);
	font-size: var(--ef-font-caption-size);
	font-weight: var(--ef-semantic-typography-weight-bold);
}

.ef-evidence-label__marker {
	inline-size: 0.5rem;
	block-size: 0.5rem;
	background: currentColor;
	border-radius: 50%;
}

.ef-card__meta {
	display: flex;
	justify-content: space-between;
}

.ef-capability-card h3,
.ef-certificate-card h3,
.ef-application-card h3,
.ef-market-summary h3,
.ef-case-card h3 {
	margin: 0;
	font-family: var(--ef-font-heading);
}

.ef-case-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ef-space-small);
	color: var(--ef-color-muted);
	font-size: var(--ef-font-caption-size);
}

.ef-case-card__client {
	font-weight: var(--ef-semantic-typography-weight-bold);
}

.ef-fact-list {
	display: grid;
	gap: var(--ef-space-small);
	margin: 0;
}

.ef-fact-list > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--ef-space-component);
	padding-block-start: var(--ef-space-small);
	border-block-start: 1px solid var(--ef-color-border);
}

.ef-fact-list dt {
	color: var(--ef-color-muted);
}

.ef-fact-list dd {
	margin: 0;
	font-weight: var(--ef-semantic-typography-weight-bold);
	text-align: end;
}

.ef-factory-gallery {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: var(--ef-space-grid-gap);
}

.ef-factory-media {
	margin: 0;
	overflow: hidden;
	background: var(--ef-color-surface);
	border: 1px solid var(--ef-color-border);
	border-radius: var(--ef-radius-card);
}

.ef-factory-media__image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ef-factory-media figcaption {
	display: grid;
	gap: var(--ef-space-small);
	padding: var(--ef-space-component);
}

.ef-public-knowledge {
	padding-block: var(--ef-space-section-mobile);
	border-block-start: 1px solid var(--ef-color-border);
}

.ef-public-knowledge__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ef-space-small);
	margin-block-end: var(--ef-space-large);
}

.ef-public-knowledge__eyebrow,
.ef-public-knowledge__entity {
	margin: 0;
	color: var(--ef-color-muted);
	font-size: var(--ef-font-caption-size);
}

.ef-public-knowledge__eyebrow {
	font-weight: var(--ef-semantic-typography-weight-bold);
	letter-spacing: var(--ef-semantic-typography-tracking-wide);
	text-transform: uppercase;
}

.ef-public-knowledge__header h2 {
	max-inline-size: 18ch;
	margin: 0;
	font-family: var(--ef-font-heading);
}

.ef-public-knowledge__facts {
	margin: 0;
	border-block-end: 1px solid var(--ef-color-border);
}

.ef-public-knowledge__fact {
	display: grid;
	grid-template-columns: minmax(8rem, 0.7fr) minmax(0, 1.3fr);
	gap: var(--ef-space-small) var(--ef-space-component);
	padding-block: var(--ef-space-component);
	border-block-start: 1px solid var(--ef-color-border);
}

.ef-public-knowledge__fact dt {
	color: var(--ef-color-muted);
	font-size: var(--ef-font-caption-size);
}

.ef-public-knowledge__fact dd {
	margin: 0;
}

.ef-public-knowledge__value {
	font-weight: var(--ef-semantic-typography-weight-bold);
}

.ef-public-knowledge__status {
	display: flex;
	flex-wrap: wrap;
	grid-column: 2;
	gap: var(--ef-space-small) var(--ef-space-component);
	color: var(--ef-color-muted);
	font-size: var(--ef-font-caption-size);
}

@media (min-width: 48rem) {
	.ef-grid--2,
	.ef-grid--3,
	.ef-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ef-card-grid--proof,
	.ef-card-grid--certificates,
	.ef-card-grid--applications,
	.ef-card-grid--markets,
	.ef-card-grid--cases,
	.ef-factory-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 60rem) {
	.ef-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ef-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ef-container {
		--ef-container-local-gutter: var(--ef-container-gutter-desktop);
	}

	.ef-public-knowledge {
		padding-block: var(--ef-space-section);
	}

	.ef-hero {
		padding-block: var(--ef-hero-padding-block);
	}

	.ef-inquiry-form--columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ef-inquiry-form--columns fieldset {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ef-inquiry-form__field--wide {
		grid-column: 1 / -1;
	}
}

.ef-manufacturing-section h2 {
	margin-block-start: 0;
	font-family: var(--ef-font-heading);
}

.ef-public-knowledge-group__statements,
.ef-manufacturing-context-grid,
.ef-factory-gallery,
.ef-capability-grid,
.ef-capability-conditions {
	display: grid;
	gap: var(--ef-space-grid-gap);
}

.ef-capability-group + .ef-capability-group {
	margin-block-start: var(--ef-space-section);
}

.ef-capability-card__value {
	font-weight: var(--ef-semantic-typography-weight-medium);
}

.ef-capability-card__condition {
	color: var(--ef-color-muted);
}

.ef-process-steps,
.ef-process-conditions {
	display: grid;
	gap: var(--ef-space-grid-gap);
}

.ef-process-steps {
	padding-inline-start: var(--ef-space-large);
}

.ef-process-step {
	padding: var(--ef-space-component);
	border: 1px solid var(--ef-color-border);
	border-radius: var(--ef-radius-card);
}

.ef-process-step__condition {
	color: var(--ef-color-muted);
}

.ef-quality-stages,
.ef-quality-methods,
.ef-quality-status-list {
	display: grid;
	gap: var(--ef-space-grid-gap);
}

.ef-oem-odm-definitions,
.ef-oem-odm-model__statements,
.ef-oem-odm-inputs {
	display: grid;
	gap: var(--ef-space-grid-gap);
}

.ef-historical-market-list,
.ef-historical-market-activity__items,
.ef-export-regions,
.ef-export-status-list {
	display: grid;
	gap: var(--ef-space-grid-gap);
}

.ef-market-summary__period {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ef-space-component);
}

.ef-public-knowledge-statement {
	padding: var(--ef-space-component);
	border: 1px solid var(--ef-color-border);
	border-radius: var(--ef-radius-card);
}

.ef-public-knowledge-statement h4,
.ef-public-knowledge-statement__value {
	margin-block-start: 0;
}

.ef-knowledge-status {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ef-space-small) var(--ef-space-component);
}

.ef-knowledge-status div {
	display: flex;
	gap: var(--ef-space-small);
}

.ef-knowledge-status dd {
	margin: 0;
}

.ef-manufacturing-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ef-space-component);
	padding: 0;
	list-style: none;
}

.ef-manufacturing-navigation a:focus-visible {
	outline: var(--ef-focus-ring-width) solid var(--ef-color-focus);
	outline-offset: var(--ef-focus-ring-offset);
}

.ef-manufacturing-limitations {
	padding-inline-start: var(--ef-space-large);
}

.ef-manufacturing-neutral-state[aria-live="polite"] {
	max-inline-size: 42rem;
	color: var(--ef-color-muted);
}

.ef-frontend-empty-experience,
.ef-frontend-admin-guidance {
	max-inline-size: 48rem;
	padding: var(--ef-space-large);
	border: 1px solid var(--ef-color-border);
	border-radius: var(--ef-radius-card);
	background: var(--ef-color-surface);
}

.ef-frontend-empty-experience h2,
.ef-frontend-admin-guidance h2 {
	margin-block-start: 0;
	font-family: var(--ef-font-heading);
}

.ef-frontend-empty-experience p,
.ef-frontend-admin-guidance p {
	color: var(--ef-color-muted);
}

.ef-frontend-admin-guidance {
	border-style: dashed;
}

.ef-frontend-admin-guidance__label {
	font-weight: var(--ef-semantic-typography-weight-medium);
}

.ef-frontend-admin-guidance .ef-button:focus-visible {
	outline: var(--ef-focus-ring-width) solid var(--ef-color-focus);
	outline-offset: var(--ef-focus-ring-offset);
}

.ef-homepage-experience {
	padding-block: var(--ef-space-section-mobile);
}

.ef-homepage-experience__inner {
	display: grid;
	gap: var(--ef-space-component);
}

.ef-homepage-experience__inner > :where(h1, h2, p) {
	margin-block: 0;
}

.ef-homepage-experience__description {
	max-inline-size: 46rem;
	color: var(--ef-color-muted);
}

.ef-homepage-experience__inputs {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ef-space-small);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ef-homepage-experience__inputs li {
	padding: var(--ef-space-component);
	border: 1px solid var(--ef-color-border);
	border-radius: var(--ef-radius-card);
	background: var(--ef-color-surface);
}

.ef-homepage-experience--hero {
	background: var(--ef-color-surface-alt);
}

@media (min-width: 48rem) {
	.ef-homepage-experience {
		padding-block: var(--ef-space-section);
	}

	.ef-homepage-experience__inputs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.ef-button,
	.ef-card,
	.ef-product-card,
	.ef-faq-item > summary,
	.ef-inquiry-form input,
	.ef-inquiry-form select,
	.ef-inquiry-form textarea {
		transition-duration: var(--ef-motion-reduced-duration);
	}

	.ef-card:hover,
	.ef-product-card:hover {
		transform: none;
	}
}