@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400;1,500&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ============================================================
   PONCA AUDIO FEATURE — text column + dark listen-card + footer pattern
   Class prefix: ponca-af
   ============================================================ */

.ponca-af {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow-x: clip;
	background: var(--af-section-bg, #FFFFFF);
	padding-top: var(--af-section-pad-y, 0px);
	padding-bottom: var(--af-section-pad-y, 0px);
	padding-left: var(--af-section-pad-x, 160px);
	padding-right: var(--af-section-pad-x, 160px);
}
.ponca-af *, .ponca-af *::before, .ponca-af *::after { box-sizing: border-box; }

.ponca-af__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	max-width: var(--af-container-max-width, 1600px);
}

.ponca-af__columns {
	display: flex;
	flex-direction: row;
	width: 100%;
	box-sizing: border-box;
	gap: var(--af-columns-gap, 60px);
	align-items: var(--af-columns-align-items, center);
}

.ponca-af__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	box-sizing: border-box;
	flex: var(--af-left-flex, 676) 1 0;
	gap: var(--af-left-inner-gap, 24px);
}

.ponca-af__right {
	min-width: 0;
	box-sizing: border-box;
	flex: var(--af-right-flex, 768) 1 0;
}

.ponca-af__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--af-header-inner-gap, 14px);
}

.ponca-af__eyebrow,
.ponca-af__heading,
.ponca-af__description,
.ponca-af__card-eyebrow,
.ponca-af__card-description,
.ponca-af__item-title { margin: 0; }

.ponca-af__eyebrow {
	color: var(--af-eyebrow-color, #DEB209);
	font-family: var(--af-eyebrow-font-family, 'DM Sans', sans-serif);
	font-size: var(--af-eyebrow-font-size, 13px);
	line-height: var(--af-eyebrow-line-height, 22px);
	font-weight: var(--af-eyebrow-font-weight, 600);
	font-style: var(--af-eyebrow-font-style, normal);
	letter-spacing: var(--af-eyebrow-letter-spacing, 3px);
	text-transform: var(--af-eyebrow-text-transform, uppercase);
}

.ponca-af__heading {
	font-family: var(--af-heading-font-family, 'Cormorant Garamond', serif);
	font-size: var(--af-heading-font-size, 56px);
	line-height: var(--af-heading-line-height, 62px);
	font-weight: var(--af-heading-font-weight, 300);
	letter-spacing: var(--af-heading-letter-spacing, -0.56px);
}

.ponca-af__heading-prefix {
	color: var(--af-prefix-color, #0D0F0E);
	font-style: var(--af-prefix-font-style, normal);
}
.ponca-af__heading-accent {
	color: var(--af-accent-color, #B28E07);
	font-style: var(--af-accent-font-style, italic);
}
.ponca-af__heading-suffix {
	color: var(--af-suffix-color, #0D0F0E);
	font-style: var(--af-suffix-font-style, normal);
}

.ponca-af__description {
	width: 100%;
	color: var(--af-desc-color, #474747);
	font-family: var(--af-desc-font-family, 'DM Sans', sans-serif);
	font-size: var(--af-desc-font-size, 18px);
	line-height: var(--af-desc-line-height, 30px);
	font-weight: var(--af-desc-font-weight, 400);
	font-style: var(--af-desc-font-style, normal);
}

.ponca-af__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	box-sizing: border-box;
	background: var(--af-card-bg, #0D0F0E);
	border: var(--af-card-border-width, 0px) solid var(--af-card-border-color, transparent);
	border-radius: var(--af-card-border-radius, 0px);
	padding: var(--af-card-pad-y, 40px) var(--af-card-pad-x, 40px);
	gap: var(--af-card-inner-gap, 24px);
}

.ponca-af__card-eyebrow {
	width: 100%;
	color: var(--af-card-eyebrow-color, #DEB209);
	font-family: var(--af-card-eyebrow-font-family, 'DM Sans', sans-serif);
	font-size: var(--af-card-eyebrow-font-size, 13px);
	line-height: var(--af-card-eyebrow-line-height, 22px);
	font-weight: var(--af-card-eyebrow-font-weight, 600);
	font-style: var(--af-card-eyebrow-font-style, normal);
	letter-spacing: var(--af-card-eyebrow-letter-spacing, 3px);
	text-transform: var(--af-card-eyebrow-text-transform, uppercase);
}

.ponca-af__card-description {
	width: 100%;
	color: var(--af-card-desc-color, #E2D7CA);
	font-family: var(--af-card-desc-font-family, 'DM Sans', sans-serif);
	font-size: var(--af-card-desc-font-size, 16px);
	line-height: var(--af-card-desc-line-height, 26px);
	font-weight: var(--af-card-desc-font-weight, 400);
	font-style: var(--af-card-desc-font-style, normal);
}

.ponca-af__items {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--af-items-gap, 16px);
	margin-top: var(--af-items-margin-top, 8px);
}

.ponca-af__item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
	text-decoration: none;
	background: var(--af-item-bg, rgba(255,255,255,0.02));
	border: var(--af-item-border-width, 1px) solid var(--af-item-border-color, rgba(222,178,9,0.18));
	border-radius: var(--af-item-border-radius, 2px);
	padding: var(--af-item-pad-y, 24px) var(--af-item-pad-x, 30px);
	min-height: var(--af-item-min-height, 110px);
	gap: var(--af-item-inner-gap, 26px);
	transition: background 200ms ease, border-color 200ms ease;
}

.ponca-af__item-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--af-item-icon-color, #DEB209);
}

.ponca-af__item-bottom {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	gap: 16px;
}

.ponca-af__item-title {
	color: var(--af-item-title-color, #E2D7CA);
	font-family: var(--af-item-title-font-family, 'Cormorant Garamond', serif);
	font-size: var(--af-item-title-font-size, 28px);
	line-height: var(--af-item-title-line-height, 32px);
	font-weight: var(--af-item-title-font-weight, 400);
	font-style: var(--af-item-title-font-style, normal);
	letter-spacing: var(--af-item-title-letter-spacing, 0px);
}

.ponca-af__item-cta {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	flex-shrink: 0;
	gap: var(--af-item-cta-arrow-gap, 8px);
	color: var(--af-item-cta-color, #DEB209);
	font-family: var(--af-item-cta-font-family, 'DM Sans', sans-serif);
	font-size: var(--af-item-cta-font-size, 13px);
	line-height: var(--af-item-cta-line-height, 22px);
	font-weight: var(--af-item-cta-font-weight, 600);
	font-style: var(--af-item-cta-font-style, normal);
	letter-spacing: var(--af-item-cta-letter-spacing, 3px);
	text-transform: var(--af-item-cta-text-transform, uppercase);
}

.ponca-af__footer-pattern {
	width: 100vw;
	position: absolute;
	left: 0;
	bottom: 0;
	/*right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;*/
	box-sizing: border-box;
	pointer-events: none;
	margin-top: var(--af-footer-margin-top, 0px);
	height: var(--af-footer-height, 90px);
	background-color: var(--af-footer-bg-color, transparent);
	background-image: var(--af-footer-bg-image);
	background-repeat: var(--af-footer-bg-repeat, repeat-x);
	background-position: var(--af-footer-bg-position, center bottom);
	background-size: var(--af-footer-bg-size, auto 100%);
	opacity: var(--af-footer-opacity, 0.35);
}

.ponca-af.is-reversed .ponca-af__columns { flex-direction: row-reverse; }

a.ponca-af__item { text-decoration: none; }
.ponca-af__item:hover {
	border-color: rgba(222, 178, 9, 0.45) !important;
}
a.ponca-af__item:hover .ponca-af__item-cta-arrow {
	transform: translateX(3px);
}
.ponca-af__item-cta-arrow { transition: transform 200ms ease; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1280px) {
	.ponca-af { padding-left: max(48px, 4vw) !important; padding-right: max(48px, 4vw) !important; }
	.ponca-af__heading { font-size: clamp(40px, 5vw, 56px) !important; line-height: 1.15 !important; }
	.ponca-af__item-title { font-size: clamp(22px, 2.2vw, 28px) !important; }
}

@media (max-width: 1024px) {
	.ponca-af { padding-left: 24px !important; padding-right: 24px !important; }
	.ponca-af__columns { flex-direction: column !important; align-items: flex-start !important; }
	.ponca-af.is-reversed .ponca-af__columns { flex-direction: column !important; }
	.ponca-af__right { width: 100%; }
}

@media (max-width: 768px) {
	.ponca-af__heading { font-size: 36px !important; line-height: 42px !important; }
	.ponca-af__item { padding: 20px !important; min-height: auto !important; gap: 18px !important; }
	.ponca-af__item-title { font-size: 22px !important; line-height: 28px !important; }
	.ponca-af__item-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
}

@media (max-width: 600px) {
	.ponca-af__heading { font-size: 32px !important; line-height: 38px !important; }
	.ponca-af__item-title { font-size: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.ponca-af__item, .ponca-af__item-cta-arrow { transition: none !important; }
}