/* Key Features — full-bleed image with a dark gradient panel.
   The panel is a separate layer rather than a background on the content box so
   the fade can extend past the text without dragging the text width with it. */

.kf-27559 {
	--kf-panel: #1A1A1A;
	--kf-solid: 14%;
	--kf-fade: 55%;
	--kf-content: 42%;
	--tw-it-accent: #D8262F;
	--tw-it-ring-size: 38px;
	--tw-it-ring-width: 1.5px;
	--tw-it-icon-size: 17px;
	--tw-it-gap: 14px;
	position: relative;
	display: flex;
	align-items: center;
	min-height: 760px;
	overflow: hidden;
	isolation: isolate;
}

.kf-27559 .kf-27559__bg,
.kf-27559 .kf-27559__panel {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.kf-27559 .kf-27559__bg {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: -2;
}

/* The gradient itself lives in the shared tw-gradient-overlay partial; this
   only maps this component's Style-tab variables onto the partial's contract,
   so the existing panel colour / solid / fade controls keep working unchanged. */
.kf-27559 .kf-27559__panel {
	z-index: -1;
	--tw-go-angle: 90deg;
	--tw-go-color: var(--kf-panel);
	--tw-go-solid: var(--kf-solid);
	--tw-go-fade: var(--kf-fade);
}

.kf-27559 .kf-27559__container {
	width: 100%;
	max-width: 1340px;
	margin: 0 auto;
	box-sizing: border-box;
}

.kf-27559 .kf-27559__content {
	position: relative;
	width: 100%;
	max-width: var(--kf-content);
	padding: 60px 40px 60px 64px;
}

.kf-27559 .kf-27559__heading {
	margin: 0 0 44px;
	color: var(--tw-color-white, #FFFFFF);
	font-size: var(--tw-h2-size, clamp(28px, 3.4vw, 42px));
	line-height: 1.05;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.kf-27559 .kf-27559__items {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	row-gap: 34px;
	column-gap: 48px;
}

@media (max-width: 767px) {
	.kf-27559 .kf-27559__items {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

.kf-27559 .kf-27559__item {
	min-width: 0;
}

/* The description aligns to the panel's left edge rather than indenting under
   the title, matching the reference layout. */
.kf-27559 .kf-27559__desc {
	margin: 10px 0 0;
	color: var(--tw-color-white, #FFFFFF);
}

.kf-27559 .tw-icon-text__label {
	font-weight: 700;
}

@media (max-width: 1024px) {
	.kf-27559 {
		--kf-content: 62%;
		--kf-fade: 78%;
		--kf-solid: 20%;
	}
}

@media (max-width: 767px) {
	.kf-27559 {
		--kf-content: 100%;
		--kf-solid: 100%;
		--kf-fade: 100%;
		min-height: 0;
	}

	.kf-27559 .kf-27559__content {
		max-width: 100%;
		padding: 44px 24px;
	}
}

/* --------------------------------------------------------------- Subheading */

.kf-27559 .kf-27559__subheading {
	margin: -20px 0 40px;
	color: var(--tw-color-white, #FFFFFF);
}

/* ------------------------------------------------------ Inline feature rows */

/* The stacked layout puts the description on its own line at the panel edge.
   Inline runs title and description together as one paragraph indented beside
   the icon, so the second line aligns with the title rather than the ring. */
.kf-27559 .kf-27559__item--inline .kf-27559__title {
	display: inline;
	font-weight: 700;
}

.kf-27559 .kf-27559__item--inline .kf-27559__body {
	min-width: 0;
	color: var(--tw-color-white, #FFFFFF);
}

.kf-27559 .kf-27559__item--inline .kf-27559__desc-inline {
	display: inline;
}

/* ------------------------------------------------------------------ Actions */

.kf-27559 .kf-27559__actions {
	display: flex;
	flex-wrap: wrap;
	margin-top: 48px;
}

/* Button appearance comes from the shared sitewide tfw-btn system (see
   site-mu-plugins/tfw-buttons.css); this class is layout-only. */
.kf-27559 .kf-27559__button {
	display: inline-flex;
}


/* ------------------------------------------------------------- Split Layout */

.kf-27559--split {
	display: block;
	min-height: auto;
	background-color: var(--kf-panel);
	padding: 90px 0;
}

.kf-27559.kf-27559--split .kf-27559__container {
	width: 100%;
	max-width: 1340px;
	margin: 0 auto;
	padding: 0 48px;
	box-sizing: border-box;
}

.kf-27559.kf-27559--split .kf-27559__split-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	column-gap: 80px;
	row-gap: 48px;
	align-items: start;
}

.kf-27559.kf-27559--split .kf-27559__col-text,
.kf-27559.kf-27559--split .kf-27559__col-features {
	min-width: 0;
}

.kf-27559.kf-27559--split .kf-27559__heading {
	margin: 0 0 32px;
	line-height: 1.15;
}

.kf-27559 .kf-27559__body-copy {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--tw-body-size, 16px);
	line-height: 1.65;
}

.kf-27559 .kf-27559__body-copy p {
	margin: 0 0 20px;
	color: inherit;
	line-height: inherit;
}

.kf-27559 .kf-27559__body-copy p:last-child {
	margin-bottom: 0;
}

.kf-27559.kf-27559--split .kf-27559__desc {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--tw-body-size, 15px);
	line-height: 1.55;
}

.kf-27559.kf-27559--split .kf-27559__actions {
	margin-top: 36px;
}

/* ------------------------------------------------ Features Header / Intro */

.kf-27559 .kf-27559__features-header {
	margin-bottom: 30px;
}

.kf-27559 .kf-27559__features-title {
	margin: 0 0 16px;
	color: var(--tw-color-white, #FFFFFF);
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
}

.kf-27559 .kf-27559__features-intro {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--tw-body-size, 15px);
	line-height: 1.6;
}

.kf-27559 .kf-27559__features-intro p {
	margin: 0 0 16px;
	color: inherit;
	line-height: inherit;
}

.kf-27559 .kf-27559__features-intro p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.kf-27559--split {
		padding: 70px 0;
	}

	.kf-27559.kf-27559--split .kf-27559__container {
		padding: 0 32px;
	}

	.kf-27559.kf-27559--split .kf-27559__split-grid {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 48px;
	}
}

@media (max-width: 767px) {
	.kf-27559--split {
		padding: 50px 0;
	}

	.kf-27559.kf-27559--split .kf-27559__container {
		padding: 0 20px;
	}

	.kf-27559.kf-27559--split .kf-27559__heading {
		margin-bottom: 24px;
	}
}