/* FAQ Section — heading block beside an accordion.
   Colours, spacing and typography come from Style-tab controls. */

.faq-27573 {
	--faq-head: 32%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 80px;
	padding: 85px 0;
}

@media (max-width: 1024px) {
	.faq-27573 {
		padding: 56px 0;
	}
}

@media (max-width: 767px) {
	.faq-27573 {
		padding: 48px 0;
	}
}

.faq-27573 .faq-27573__intro {
	flex: 1 1 260px;
	min-width: 0;
}

.faq-27573 .faq-27573__list {
	flex: 1 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@media (min-width: 900px) {
	.faq-27573 .faq-27573__intro {
		flex: 0 0 var(--faq-head);
	}
}

.faq-27573 .faq-27573__heading {
	margin: 0;
	color: #1A1A1A;
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	line-height: 1.08;
	font-weight: 800;
	text-transform: uppercase;
}

.faq-27573 .faq-27573__subheading {
	margin: 16px 0 0;
}

/* --------------------------------------------------------------------- Rows */

.faq-27573 .faq-27573__item {
	background-color: #F0F0F0;
	border-radius: 4px;
	overflow: hidden;
}

/* The question tag is a heading wrapping the button, so the accessible name and
   the document outline both come from the markup rather than from script. */
.faq-27573 .faq-27573__question-wrap {
	margin: 0;
	font: inherit;
	color: inherit;
}

.faq-27573 .faq-27573__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 26px 32px 26px 44px;
	margin: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	appearance: none;
}

.faq-27573 .faq-27573__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

.faq-27573 .faq-27573__question {
	color: #2B2B2B;
	font-size: 1.15rem;
	line-height: 1.35;
}

.faq-27573 .faq-27573__icon {
	flex: 0 0 auto;
	display: inline-flex;
	width: 38px;
	height: 38px;
	color: #D8262F;
	transition: transform 200ms ease;
}

.faq-27573 .faq-27573__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* The circle is symmetric, so rotating the whole icon 45 degrees turns the
   plus into a close cross without a second asset. */
.faq-27573 .faq-27573__item.is-open .faq-27573__icon {
	transform: rotate(45deg);
}

.faq-27573 .faq-27573__panel[hidden] {
	display: none;
}

.faq-27573 .faq-27573__panel-inner {
	padding: 0 32px 26px 44px;
}

.faq-27573 .faq-27573__panel-inner>*:first-child {
	margin-top: 0;
}

.faq-27573 .faq-27573__panel-inner>*:last-child {
	margin-bottom: 0;
}

/* Height animation is driven by the handler setting --faq-h; the property is
   only honoured while the row is animating. */
.faq-27573 .faq-27573__panel.is-animating {
	overflow: hidden;
	height: var(--faq-h, auto);
	transition: height 240ms ease;
}

@media (prefers-reduced-motion: reduce) {

	.faq-27573 .faq-27573__icon,
	.faq-27573 .faq-27573__panel.is-animating {
		transition: none;
	}
}

@media (max-width: 767px) {
	.faq-27573 {
		gap: 32px;
	}

	.faq-27573 .faq-27573__trigger {
		padding: 20px 20px 20px 24px;
		gap: 16px;
	}

	.faq-27573 .faq-27573__panel-inner {
		padding: 0 20px 20px 24px;
	}

	/* A flex child defaults to its content width. Allow the question to use the
	   space beside the toggle and wrap instead of pushing the icon off-screen. */
	.faq-27573 .faq-27573__question {
		flex: 1 1 0;
		min-width: 0;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.faq-27573 .faq-27573__icon {
		width: 32px;
		height: 32px;
	}
}

/* --------------------------------------------------------------- Card layout */

/* The intro becomes a dark card with a button under the copy. It sticks while
   the question list scrolls past it; the offset clears the fixed site header. */

.faq-27573.faq-27573--card .faq-27573__intro {
	position: sticky;
	top: 120px;
	box-sizing: border-box;
	padding: 64px 40px 180px;
	background-color: #262729;
	color: var(--tw-color-white, #FFFFFF);
}

.faq-27573.faq-27573--card .faq-27573__heading {
	color: inherit;
	font-size: clamp(2rem, 3.4vw, 3.25rem);
	line-height: 1.02;
}

.faq-27573.faq-27573--card .faq-27573__subheading {
	color: inherit;
	max-width: 400px;
	font-size: 1.125rem;
	line-height: 1.4;
}

.faq-27573 .faq-27573__card-actions {
	margin-top: 56px;
}

.faq-27573 .faq-27573__card-button {
	text-align: left;
	line-height: 1.3;
}

.faq-27573.faq-27573--card .faq-27573__question {
	font-size: clamp(1.15rem, 1.8vw, 1.625rem);
	line-height: 1.2;
}

@media (max-width: 899px) {
	.faq-27573.faq-27573--card .faq-27573__intro {
		position: static;
	}
}

@media (max-width: 767px) {
	.faq-27573 .faq-27573__card-actions {
		margin-top: 32px;
	}
}