/**
 * FULFA UI Elements & Component Styles
 * B2B Fulfillment / Logistics Theme Styling
 *
 * Implements high-end, clean industrial design system for warehouse operations.
 */

/* -------------------------------------------------------------
 * 1. Hero Section (Left-aligned, Non-generic Layout)
 * ------------------------------------------------------------- */
/* HERO - tighten top spacing */
.fulfa-page > .fulfa-section:first-child {
	padding-top: clamp(1.5rem, 3vw, 3rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.fulfa-page > .fulfa-section:first-child .fulfa-hero {
	padding-top: 0;
	padding-bottom: 0;
}

.fulfa-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fulfa-space-xl);
	align-items: center;
}

/* HERO - better desktop balance */
@media (min-width: 1024px) {
	.fulfa-hero {
		grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
		gap: clamp(3rem, 6vw, 5rem);
	}
}

.fulfa-hero-content {
	max-width: 620px;
}

.fulfa-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--fulfa-space-xs);
	background-color: rgba(45, 106, 79, 0.08);
	color: var(--fulfa-color-secondary);
	padding: 6px 14px;
	border-radius: var(--fulfa-border-radius);
	border: 1px solid rgba(45, 106, 79, 0.15);
	margin-bottom: var(--fulfa-space-md);
}

.fulfa-hero-title {
	color: var(--fulfa-color-dark);
	margin-bottom: var(--fulfa-space-md);
}

.fulfa-hero-desc {
	color: var(--fulfa-color-text);
	margin-bottom: var(--fulfa-space-lg);
}

/* Button variants matching customizer rules but with logistics accents */
.fulfa-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fulfa-space-sm);
}

.fulfa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border-radius: var(--fulfa-border-radius);
	transition: var(--fulfa-transition);
	cursor: pointer;
	text-decoration: none;
}

.fulfa-btn-primary {
	background-color: var(--fulfa-color-primary);
	color: var(--fulfa-color-bg-white) !important;
	border: 1px solid var(--fulfa-color-primary);
}

.fulfa-btn-primary:hover {
	background-color: var(--fulfa-color-secondary);
	border-color: var(--fulfa-color-secondary);
	transform: translateY(-2px);
}

.fulfa-btn-secondary {
	background-color: transparent;
	color: var(--fulfa-color-primary) !important;
	border: 1px solid var(--fulfa-color-primary);
}

.fulfa-btn-secondary:hover {
	background-color: var(--fulfa-color-bg-light);
	transform: translateY(-2px);
}

/* Hero graphic - industrial workflow mockup */
/* HERO IMAGE - remove card style */
.fulfa-hero-graphic {
	border: 0;
	background: transparent;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	justify-self: stretch;
	width: 100%;
}

/* HERO IMAGE - make image larger and cleaner */
.fulfa-hero-graphic .fulfa-image {
	width: 100%;
	max-width: 620px;
	height: auto;
	display: block;
	margin-left: auto;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
}

/* Optional: keep image visually stronger on desktop */
@media (min-width: 1024px) {
	.fulfa-hero-graphic .fulfa-image {
		aspect-ratio: 16 / 10;
		height: auto;
		object-fit: cover;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.fulfa-page > .fulfa-section:first-child {
		padding-top: 2rem;
	}

	.fulfa-hero-graphic .fulfa-image {
		max-width: 100%;
		margin-left: 0;
	}
}

/* -------------------------------------------------------------
 * 2. Asymmetric Metrics / Stats Grid
 * ------------------------------------------------------------- */
.fulfa-metrics {
	margin-top: calc(var(--fulfa-space-xl) * -1);
	position: relative;
	z-index: 10;
}

.fulfa-metrics-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fulfa-space-md);
}

@media (min-width: 768px) {
	.fulfa-metrics-grid {
		grid-template-columns: 1.5fr 1fr 1fr; /* Asymmetric grid layout */
	}
}

.fulfa-metric-card {
	background-color: var(--fulfa-color-bg-white);
	border: var(--fulfa-solid-border);
	padding: var(--fulfa-space-lg);
	border-radius: var(--fulfa-border-radius);
	transition: var(--fulfa-transition);
}

.fulfa-metric-card:hover {
	border-color: var(--fulfa-color-secondary);
}

.fulfa-metric-card.accented {
	background-color: var(--fulfa-color-primary);
	color: var(--fulfa-color-bg-white);
	border-color: var(--fulfa-color-primary);
}

.fulfa-metric-card.accented h3,
.fulfa-metric-card.accented p {
	color: var(--fulfa-color-bg-white);
}

.fulfa-metric-number {
	margin-bottom: var(--fulfa-space-xs);
	display: block;
}

.fulfa-metric-label {
	margin-bottom: var(--fulfa-space-sm);
	color: var(--fulfa-color-accent);
}

.fulfa-metric-desc {
	color: var(--fulfa-color-text);
	margin: 0;
}

.fulfa-metric-card.accented .fulfa-metric-desc {
	opacity: 0.85;
}

/* -------------------------------------------------------------
 * 3. Structured Services (Non-equal Card Layouts)
 * ------------------------------------------------------------- */
.fulfa-services-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fulfa-space-lg);
}

@media (min-width: 1024px) {
	.fulfa-services-grid {
		grid-template-columns: 1.4fr 1fr 1fr; /* Asymmetric balance */
	}
}

.fulfa-service-card {
	display: flex;
	flex-direction: column;
	justify-content: justify;
	background-color: var(--fulfa-color-bg-white);
	border: var(--fulfa-solid-border);
	padding: var(--fulfa-space-lg);
	border-radius: var(--fulfa-border-radius);
	transition: var(--fulfa-transition);
}

.fulfa-service-card:hover {
	transform: translateY(-4px);
	border-color: var(--fulfa-color-primary);
	box-shadow: 0 8px 24px rgba(27, 77, 62, 0.05);
}

/* Large Lead Service Card */
.fulfa-service-card-lead {
	background-color: var(--fulfa-color-bg-light);
	border-left: 4px solid var(--fulfa-color-primary);
}

.fulfa-service-icon {
	width: 48px;
	height: 48px;
	background-color: rgba(27, 77, 62, 0.05);
	color: var(--fulfa-color-primary);
	border-radius: var(--fulfa-border-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--fulfa-space-md);
}

.fulfa-service-card-lead .fulfa-service-icon {
	background-color: var(--fulfa-color-primary);
	color: var(--fulfa-color-bg-white);
}

.fulfa-service-title {
	margin-bottom: var(--fulfa-space-xs);
	color: var(--fulfa-color-dark);
}

.fulfa-service-text {
	color: var(--fulfa-color-text);
	margin-bottom: var(--fulfa-space-md);
}

.fulfa-service-link {
	color: var(--fulfa-color-primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
}

.fulfa-service-link::after {
	content: '→';
	transition: var(--fulfa-transition);
}

.fulfa-service-link:hover::after {
	transform: translateX(4px);
}

/* -------------------------------------------------------------
 * 4. Structured Step-by-Step Logistics Process
 * ------------------------------------------------------------- */
.fulfa-process-container {
	display: flex;
	flex-direction: column;
	position: relative;
}

.fulfa-process-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fulfa-space-md);
	padding: var(--fulfa-space-lg) 0;
	border-bottom: var(--fulfa-solid-border);
}

.fulfa-process-row:first-child {
	border-top: var(--fulfa-solid-border);
}

@media (min-width: 768px) {
	.fulfa-process-row {
		grid-template-columns: 80px 1.2fr 2fr 1fr;
		align-items: center;
		gap: var(--fulfa-space-lg);
	}
}

.fulfa-process-number {
	color: rgba(27, 77, 62, 0.15);
}

.fulfa-process-row:hover .fulfa-process-number {
	color: var(--fulfa-color-primary);
	transition: var(--fulfa-transition);
}

.fulfa-process-heading {
	color: var(--fulfa-color-dark);
	margin: 0;
}

.fulfa-process-desc {
	color: var(--fulfa-color-text);
	margin: 0;
}

.fulfa-process-meta {
	color: var(--fulfa-color-accent);
}

/* -------------------------------------------------------------
 * 5. B2B CTA Section (Wide, Spaced, Prominent)
 * ------------------------------------------------------------- */
.fulfa-cta-block {
	background-color: var(--fulfa-color-primary);
	color: var(--fulfa-color-bg-white);
	padding: clamp(3rem, 6vw, 5rem);
	border-radius: var(--fulfa-border-radius);
	position: relative;
	overflow: hidden;
}

.fulfa-cta-content {
	max-width: 750px;
	position: relative;
	z-index: 2;
}

.fulfa-cta-title {
	color: var(--fulfa-color-bg-white);
	margin-bottom: var(--fulfa-space-md);
}

.fulfa-cta-desc {
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: var(--fulfa-space-lg);
}

.fulfa-cta-badge {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--fulfa-color-bg-white);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* -------------------------------------------------------------
 * 6. Utility & Semantic Classes (Replacing inline styles)
 * ------------------------------------------------------------- */
.fulfa-section-no-top {
	padding-top: 0;
}

.fulfa-section-head {
	margin-bottom: var(--fulfa-space-lg);
	max-width: 700px;
}

.fulfa-section-title {
	color: var(--fulfa-color-dark);
	margin-top: 0;
	margin-bottom: var(--fulfa-space-xs);
}

.fulfa-section-desc {
	color: var(--fulfa-color-text);
	margin-bottom: var(--fulfa-space-lg);
}

.fulfa-image {
	width: 100%;
	height: auto;
	display: block;
}

.fulfa-pain-card {
	border-top: 3px solid var(--fulfa-color-accent);
}

.fulfa-cta-btn-light {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--fulfa-color-bg-white) !important;
	border-color: rgba(255, 255, 255, 0.4);
}

.fulfa-cta-btn-light:hover {
	background-color: rgba(255, 255, 255, 0.2);
	border-color: var(--fulfa-color-bg-white);
	transform: translateY(-2px);
}

.fulfa-cta-btn-accent {
	background-color: var(--fulfa-color-bg-white);
	border-color: var(--fulfa-color-bg-white);
	color: var(--fulfa-color-primary) !important;
}

.fulfa-cta-btn-accent:hover {
	background-color: var(--fulfa-color-bg-light);
	border-color: var(--fulfa-color-bg-light);
	transform: translateY(-2px);
}

/* Card Header Reset to avoid inline styles */
.fulfa-service-card h3,
.fulfa-service-card h4,
.fulfa-grid-structured h3,
.fulfa-grid-structured h4 {
	margin-top: 0;
	color: var(--fulfa-color-dark);
}

/* Improve label and muted text contrast */
.fulfa-page .fulfa-metric-label {
	color: var(--fulfa-color-primary);
	opacity: 0.9;
}

.fulfa-page .fulfa-metric-card.accented .fulfa-metric-label {
	color: color-mix(in srgb, var(--fulfa-color-bg-white) 82%, transparent);
	opacity: 1;
}

.fulfa-page .fulfa-metric-desc,
.fulfa-page .fulfa-service-text,
.fulfa-page .fulfa-process-desc,
.fulfa-page .fulfa-section-desc {
	color: var(--fulfa-color-text);
	opacity: 0.88;
}

.fulfa-page .fulfa-process-number {
	color: color-mix(in srgb, var(--fulfa-color-primary) 20%, transparent);
	opacity: 1;
}

.fulfa-page .fulfa-process-row:hover .fulfa-process-number {
	color: var(--fulfa-color-primary);
}

.fulfa-page .fulfa-process-meta {
	color: var(--fulfa-color-primary);
	opacity: 0.75;
}

/* CTA contrast fix */
.fulfa-page .fulfa-cta-block,
.fulfa-page .fulfa-cta-block * {
	border-color: color-mix(in srgb, var(--fulfa-color-bg-white) 24%, transparent);
}

.fulfa-page .fulfa-cta-title {
	color: var(--fulfa-color-bg-white) !important;
}

.fulfa-page .fulfa-cta-desc {
	color: color-mix(in srgb, var(--fulfa-color-bg-white) 88%, transparent);
}

.fulfa-page .fulfa-cta-badge {
	background-color: color-mix(in srgb, var(--fulfa-color-bg-white) 12%, transparent);
	color: var(--fulfa-color-bg-white);
	border-color: color-mix(in srgb, var(--fulfa-color-bg-white) 28%, transparent);
}

.fulfa-page .fulfa-cta-btn-light {
	background-color: transparent;
	color: var(--fulfa-color-bg-white) !important;
	border-color: color-mix(in srgb, var(--fulfa-color-bg-white) 55%, transparent);
}

.fulfa-page .fulfa-cta-btn-light:hover {
	background-color: color-mix(in srgb, var(--fulfa-color-bg-white) 12%, transparent);
	border-color: var(--fulfa-color-bg-white);
}

.fulfa-page .fulfa-cta-btn-accent {
	background-color: var(--fulfa-color-bg-white);
	border-color: var(--fulfa-color-bg-white);
	color: var(--fulfa-color-primary) !important;
}

.fulfa-page .fulfa-cta-btn-accent:hover {
	background-color: var(--fulfa-color-bg-light);
	border-color: var(--fulfa-color-bg-light);
	color: var(--fulfa-color-primary) !important;
}

/* -------------------------------------------------------------
 * 7. New Landing Page Section Classes (Homepage V2)
 * ------------------------------------------------------------- */
.fulfa-quote-banner {
	background-color: var(--fulfa-color-primary);
	color: var(--fulfa-color-bg-white);
	padding: clamp(3rem, 6vw, 4.5rem) var(--fulfa-space-md);
	border-radius: var(--fulfa-border-radius);
	text-align: center;
	margin-top: var(--fulfa-space-xl);
}

.fulfa-quote-banner .fulfa-quote-title {
	margin-bottom: var(--fulfa-space-sm);
	color: var(--fulfa-color-bg-white) !important;
}

.fulfa-quote-banner .fulfa-quote-desc {
	max-width: 800px;
	margin: 0 auto;
	color: color-mix(in srgb, var(--fulfa-color-bg-white) 88%, transparent);
}

.fulfa-benefit-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fulfa-space-md);
}

@media (min-width: 768px) {
	.fulfa-benefit-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.fulfa-benefit-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.fulfa-benefit-card {
	background-color: var(--fulfa-color-bg-white);
	border: var(--fulfa-solid-border);
	padding: var(--fulfa-space-md);
	border-radius: var(--fulfa-border-radius);
	transition: var(--fulfa-transition);
}

.fulfa-benefit-card:hover {
	border-color: var(--fulfa-color-primary);
	transform: translateY(-2px);
}

.fulfa-benefit-card h4 {
	margin-top: 0;
	margin-bottom: var(--fulfa-space-xs);
	color: var(--fulfa-color-dark);
}

.fulfa-benefit-card p {
	color: var(--fulfa-color-text);
	margin: 0;
}

.fulfa-flow-block {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fulfa-space-lg);
	align-items: center;
}

@media (min-width: 1024px) {
	.fulfa-flow-block {
		grid-template-columns: 1fr 1.2fr;
	}
}

.fulfa-flow-image {
	width: 100%;
	height: auto;
	border-radius: var(--fulfa-border-radius);
	border: var(--fulfa-solid-border);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
	display: block;
}

.fulfa-target-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--fulfa-space-sm);
}

@media (min-width: 768px) {
	.fulfa-target-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.fulfa-target-list {
		grid-template-columns: repeat(6, 1fr);
	}
}

.fulfa-target-item {
	background-color: var(--fulfa-color-bg-white);
	border: var(--fulfa-solid-border);
	padding: var(--fulfa-space-sm) var(--fulfa-space-md);
	border-radius: var(--fulfa-border-radius);
	text-align: center;
	color: var(--fulfa-color-primary);
	transition: var(--fulfa-transition);
}

.fulfa-target-item:hover {
	background-color: var(--fulfa-color-bg-light);
	border-color: var(--fulfa-color-primary);
}

.fulfa-split-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fulfa-space-lg);
}

@media (min-width: 1024px) {
	.fulfa-split-card {
		grid-template-columns: 1fr 1fr;
	}
}

.fulfa-split-card-item {
	background-color: var(--fulfa-color-bg-white);
	border: var(--fulfa-solid-border);
	padding: var(--fulfa-space-lg);
	border-radius: var(--fulfa-border-radius);
	transition: var(--fulfa-transition);
}

.fulfa-split-card-item:hover {
	border-color: var(--fulfa-color-primary);
}

.fulfa-split-card-number {
	color: color-mix(in srgb, var(--fulfa-color-primary) 32%, transparent);
	margin-bottom: var(--fulfa-space-sm);
}

.fulfa-split-card-title {
	color: var(--fulfa-color-dark);
	margin-top: 0;
	margin-bottom: var(--fulfa-space-sm);
}

.fulfa-split-card-desc {
	color: var(--fulfa-color-text);
	margin: 0;
}

.fulfa-warehouse-block {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fulfa-space-lg);
	align-items: center;
}

@media (min-width: 1024px) {
	.fulfa-warehouse-block {
		grid-template-columns: 1fr 1.1fr;
	}
}

.fulfa-warehouse-text {
	padding-right: var(--fulfa-space-md);
}

.fulfa-warehouse-image {
	width: 100%;
	height: auto;
	border-radius: var(--fulfa-border-radius);
	border: var(--fulfa-solid-border);
	display: block;
}

.fulfa-services-detail {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fulfa-space-md);
}

@media (min-width: 768px) {
	.fulfa-services-detail {
		grid-template-columns: repeat(2, 1fr);
	}
}

.fulfa-service-detail-card {
	background-color: var(--fulfa-color-bg-white);
	border: var(--fulfa-solid-border);
	padding: var(--fulfa-space-lg);
	border-radius: var(--fulfa-border-radius);
	transition: var(--fulfa-transition);
}

.fulfa-service-detail-card:hover {
	border-color: var(--fulfa-color-primary);
	transform: translateY(-2px);
}

.fulfa-service-detail-title {
	color: var(--fulfa-color-dark);
	margin-top: 0;
	margin-bottom: var(--fulfa-space-xs);
}

.fulfa-service-detail-desc {
	color: var(--fulfa-color-text);
	margin: 0;
}

/* Arrow Flow Process (Homepage V2) */
.fulfa-page .fulfa-arrow-process {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem 1.25rem;
}

.fulfa-page .fulfa-arrow-step {
	position: relative;
}

.fulfa-page .fulfa-arrow-step-inner {
	height: 100%;
	padding: 1rem;
	border: 1px solid var(--fulfa-color-border);
	background: var(--fulfa-color-bg-white);
	border-radius: var(--fulfa-border-radius);
	transition: var(--fulfa-transition);
}

.fulfa-page .fulfa-arrow-step-inner:hover {
	border-color: var(--fulfa-color-primary);
}

.fulfa-page .fulfa-arrow-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.35rem 0.6rem;
	margin-bottom: 0.75rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--fulfa-color-primary) 10%, white);
	color: var(--fulfa-color-primary);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
}

.fulfa-page .fulfa-arrow-step-title {
	color: var(--fulfa-color-dark);
	margin-bottom: 0.5rem;
}

.fulfa-page .fulfa-arrow-step-text {
	color: var(--fulfa-color-text);
	opacity: 0.88;
}

@media (min-width: 1024px) {
	.fulfa-page .fulfa-arrow-step:not(:nth-child(4n))::after {
		content: "→";
		position: absolute;
		right: -0.85rem;
		top: 50%;
		transform: translateY(-50%);
		color: var(--fulfa-color-primary);
		font-size: 1.1rem;
		font-weight: 700;
	}
}

@media (max-width: 1023px) {
	.fulfa-page .fulfa-arrow-process {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.fulfa-page .fulfa-arrow-process {
		grid-template-columns: 1fr;
	}

	.fulfa-page .fulfa-arrow-step::after {
		content: "↓";
		display: block;
		text-align: center;
		margin-top: 0.5rem;
		color: var(--fulfa-color-primary);
		font-weight: 700;
	}

	.fulfa-page .fulfa-arrow-step:last-child::after {
		display: none;
	}
}

.fulfa-form-section {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fulfa-space-xl);
	align-items: flex-start;
}

@media (min-width: 1024px) {
	.fulfa-form-section {
		grid-template-columns: 1fr 1.1fr;
	}
}

.fulfa-form-content {
	padding-right: var(--fulfa-space-lg);
}

.fulfa-page .fulfa-form-placeholder {
	background: var(--fulfa-color-bg-white);
	border: 1px solid var(--fulfa-color-border);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.fulfa-page .fulfa-form-placeholder .fluentform,
.fulfa-page .fulfa-form-placeholder form {
	font-family: inherit;
	color: var(--fulfa-color-text);
}

.fulfa-page .fulfa-form-placeholder .ff-el-group {
	margin-bottom: 1rem;
}

.fulfa-page .fulfa-form-placeholder label,
.fulfa-page .fulfa-form-placeholder .ff-el-input--label label {
	font-family: inherit;
	color: inherit;
	font-weight: inherit;
}

.fulfa-page .fulfa-form-placeholder input,
.fulfa-page .fulfa-form-placeholder textarea,
.fulfa-page .fulfa-form-placeholder select,
.fulfa-page .fulfa-form-placeholder .ff-el-form-control {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	background-color: var(--theme-form-field-background-initial-color, transparent);
	border-color: var(--theme-form-field-border-initial-color, var(--fulfa-color-border));
	border-radius: var(--theme-form-field-border-radius, 0);
	box-shadow: none;
}

.fulfa-page .fulfa-form-placeholder input:focus,
.fulfa-page .fulfa-form-placeholder textarea:focus,
.fulfa-page .fulfa-form-placeholder select:focus,
.fulfa-page .fulfa-form-placeholder .ff-el-form-control:focus {
	border-color: var(--theme-form-field-border-focus-color, var(--fulfa-color-primary));
	box-shadow: none;
	outline: none;
}

.fulfa-page .fulfa-form-placeholder .ff-btn-submit,
.fulfa-page .fulfa-form-placeholder .ff_submit_btn_wrapper .ff-btn,
.fulfa-page .fulfa-form-placeholder button[type="submit"],
.fulfa-page .fulfa-form-placeholder input[type="submit"] {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	background-color: var(--theme-button-background-initial-color, var(--fulfa-color-primary));
	color: var(--theme-button-text-initial-color, var(--fulfa-color-bg-white));
	border-color: var(--theme-button-background-initial-color, var(--fulfa-color-primary));
	box-shadow: none;
}

.fulfa-page .fulfa-form-placeholder .ff-btn-submit:hover,
.fulfa-page .fulfa-form-placeholder .ff_submit_btn_wrapper .ff-btn:hover,
.fulfa-page .fulfa-form-placeholder button[type="submit"]:hover,
.fulfa-page .fulfa-form-placeholder input[type="submit"]:hover {
	background-color: var(--theme-button-background-hover-color, var(--fulfa-color-secondary));
	color: var(--theme-button-text-hover-color, var(--fulfa-color-bg-white));
	border-color: var(--theme-button-background-hover-color, var(--fulfa-color-secondary));
}

/* -------------------------------------------------------------
 * 8. Icon System (Clean B2B SVG Line Icons)
 * ------------------------------------------------------------- */
.fulfa-icon-box {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	background-color: color-mix(in srgb, var(--fulfa-color-primary) 8%, white);
	border: 1px solid var(--fulfa-color-border);
	color: var(--fulfa-color-primary);
	margin-bottom: var(--fulfa-space-sm);
	flex-shrink: 0;
}

.fulfa-icon-box.accented {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.25);
	color: var(--fulfa-color-bg-white);
}

.fulfa-icon {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	display: block;
}

/* Card level icon adjustments */
.fulfa-card-icon {
	margin-bottom: var(--fulfa-space-sm);
}

/* List inline icons */
.fulfa-list-icon {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--fulfa-color-primary);
	flex-shrink: 0;
}

/* Step / timeline indicators */
.fulfa-step-icon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--fulfa-color-primary) 8%, white);
	border: 1px solid var(--fulfa-color-border);
	color: var(--fulfa-color-primary);
	margin-bottom: var(--fulfa-space-xs);
	flex-shrink: 0;
}

.fulfa-step-icon {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	display: block;
}

/* Layout adjustments to accommodate icons */
.fulfa-target-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--fulfa-space-xs);
	padding: var(--fulfa-space-xs) var(--fulfa-space-md);
}

.fulfa-target-item .fulfa-list-icon {
	color: inherit;
}

.fulfa-form-detail-item {
	display: flex;
	align-items: flex-start;
	gap: var(--fulfa-space-sm);
	margin-bottom: var(--fulfa-space-md);
}

.fulfa-form-detail-item .fulfa-icon-box {
	margin-bottom: 0;
}

.fulfa-form-detail-text h4 {
	margin: 0 0 4px 0;
	color: var(--fulfa-color-dark);
}

.fulfa-form-detail-text p {
	margin: 0;
	color: var(--fulfa-color-text);
}

/* Decorative numbers only - keep text typography inherited from Blocksy */
.fulfa-page .fulfa-metric-number {
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 800;
	line-height: 1.05;
	white-space: nowrap;
	color: var(--fulfa-color-dark);
	margin: 0 0 var(--fulfa-space-xs);
}

.fulfa-page .fulfa-metric-card.accented .fulfa-metric-number {
	color: var(--fulfa-color-bg-white);
}

.fulfa-page .fulfa-split-number,
.fulfa-page .fulfa-process-number,
.fulfa-page .fulfa-timeline-number {
	font-size: clamp(2rem, 4vw, 3.25rem);
	font-weight: 800;
	line-height: 1;
	color: color-mix(in srgb, var(--fulfa-color-primary) 34%, transparent);
	margin: 0;
}

.fulfa-page .fulfa-process-row:hover .fulfa-process-number,
.fulfa-page .fulfa-timeline-item:hover .fulfa-timeline-number {
	color: var(--fulfa-color-primary);
}

.fulfa-page .fulfa-service-detail-card {
	position: relative;
}

.fulfa-page .fulfa-service-detail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--fulfa-space-sm);
}

.fulfa-page .fulfa-service-detail-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.65rem;
	border: 1px solid var(--fulfa-color-border);
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--fulfa-color-primary) 8%, white);
	color: var(--fulfa-color-primary);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

/* Fallback if number is the first standalone element inside service detail cards */
.fulfa-page .fulfa-service-detail-card > span:first-child,
.fulfa-page .fulfa-service-detail-card > div:first-child {
	color: var(--fulfa-color-primary);
}

@media (max-width: 767px) {
	.fulfa-page .fulfa-metric-number {
		font-size: clamp(1.6rem, 8vw, 2.2rem);
	}

	.fulfa-page .fulfa-split-number,
	.fulfa-page .fulfa-process-number,
	.fulfa-page .fulfa-timeline-number {
		font-size: clamp(1.75rem, 10vw, 2.5rem);
	}

	.fulfa-page .fulfa-service-detail-number {
		min-width: 2rem;
		height: 2rem;
		font-size: 0.95rem;
	}
}