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

/* ============================================================
   Ponca Heritage Statement — frontend styles
   ============================================================ */

.ponca-hs {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	isolation: isolate;
	background: var(--phs-bg, #FFFDF6);
	margin: var(--phs-margin-top, 0px) 0 var(--phs-margin-bottom, 0px);
}
.ponca-hs *,
.ponca-hs *::before,
.ponca-hs *::after {
	box-sizing: border-box;
}

/* ---- Container ---- */
.ponca-hs__container {
	max-width: var(--phs-container-max-width, 1360px);
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: var(--phs-container-align, center);
	gap: var(--phs-container-gap, 96px);
	position: relative;
	z-index: 1;
}

/* ---- Left column ---- */
.ponca-hs__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 0 0 auto;
	width: var(--phs-left-width, 574.53px);
	max-width: var(--phs-left-width, 574.53px);
	gap: var(--phs-left-gap, 48px);
}

/* ---- Blockquote group ---- */
.ponca-hs__blockquote {
	position: relative;
	width: 100%;
	isolation: isolate;
}

.ponca-hs__quote-mark {
	position: absolute;
	pointer-events: none;
	user-select: none;
	z-index: 0;
	left: var(--phs-quote-mark-left, -90px);
	top: var(--phs-quote-mark-top, -72px);
	color: var(--phs-quote-mark-color, #B8784E);
	opacity: var(--phs-quote-mark-opacity, 0.15);
	font-family: var(--phs-quote-mark-font-family, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--phs-quote-mark-font-size, 179.2px);
	line-height: var(--phs-quote-mark-line-height, 179px);
	font-weight: var(--phs-quote-mark-font-weight, 300);
	font-style: var(--phs-quote-mark-font-style, normal);
	letter-spacing: var(--phs-quote-mark-letter-spacing, normal);
	text-transform: var(--phs-quote-mark-text-transform, none);
}

.ponca-hs__quote {
	position: relative;
	z-index: 1;
	margin: 0;
	width: 100%;
	color: var(--phs-quote-color, #1A1C1B);
	font-family: var(--phs-quote-font-family, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--phs-quote-font-size, 45px);
	line-height: var(--phs-quote-line-height, 63px);
	font-weight: var(--phs-quote-font-weight, 300);
	font-style: var(--phs-quote-font-style, normal);
	letter-spacing: var(--phs-quote-letter-spacing, normal);
	text-transform: var(--phs-quote-text-transform, none);
}

.ponca-hs__quote strong {
	color: var(--phs-quote-hl-color, #A78607);
	font-style: var(--phs-quote-hl-style, italic);
	font-weight: var(--phs-quote-hl-weight, 400);
}

/* ---- Attribution ---- */
.ponca-hs__attribution {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	gap: var(--phs-attribution-gap, 16px);
}

.ponca-hs__attr-divider {
	flex: 0 0 auto;
	display: block;
	width: var(--phs-attr-divider-width, 60px);
	height: var(--phs-attr-divider-height, 1px);
	background: var(--phs-attr-divider-color, #A78607);
}

.ponca-hs__attr-text {
	margin: 0;
	color: var(--phs-attr-text-color, #474747);
	font-family: var(--phs-attr-text-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--phs-attr-text-font-size, 14px);
	line-height: var(--phs-attr-text-line-height, 24px);
	font-weight: var(--phs-attr-text-font-weight, 500);
	font-style: var(--phs-attr-text-font-style, normal);
	letter-spacing: var(--phs-attr-text-letter-spacing, 1.728px);
	text-transform: var(--phs-attr-text-text-transform, uppercase);
}

/* ---- Right column ---- */
.ponca-hs__right {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: 1 1 0;
	width: var(--phs-right-width, 689.47px);
	max-width: var(--phs-right-width, 689.47px);
	padding-top: var(--phs-right-top-offset, 9px);
	gap: var(--phs-right-gap, 44px);
}

/* ---- Card ---- */
.ponca-hs__card {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
	overflow: hidden;
	background: var(--phs-card-bg, #FDFDFD);
	border: var(--phs-card-border-width, 1px) solid var(--phs-card-border-color, rgba(0,0,0,0.04));
	box-shadow: var(--phs-card-shadow, 0px 12px 40px rgba(13,15,14,0.12), 0px 4px 12px rgba(13,15,14,0.06));
	border-radius: var(--phs-card-radius, 16px);
	min-height: var(--phs-card-min-height, 190px);
	transition: transform .2s ease, box-shadow .2s ease;
}
.ponca-hs__card:hover {
	transform: translateY(-2px);
}

/* ---- Badge ---- */
.ponca-hs__badge {
	flex: 0 0 var(--phs-badge-width, 120px);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--phs-badge-bg, #0D0F0E);
	color: var(--phs-badge-color, #DEB209);
	font-family: var(--phs-badge-font-family, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--phs-badge-font-size, 40px);
	line-height: var(--phs-badge-line-height, 68px);
	font-weight: var(--phs-badge-font-weight, 300);
	font-style: var(--phs-badge-font-style, italic);
	letter-spacing: var(--phs-badge-letter-spacing, 0.8px);
	text-transform: var(--phs-badge-text-transform, none);
}

/* ---- Card content ---- */
.ponca-hs__card-content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: var(--phs-card-content-padding, 28px);
	gap: var(--phs-card-inner-gap, 12px);
}

.ponca-hs__card-title {
	margin: 0;
	width: 100%;
	color: var(--phs-card-title-color, #1A1C1B);
	font-family: var(--phs-card-title-font-family, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--phs-card-title-font-size, 30px);
	line-height: var(--phs-card-title-line-height, 37px);
	font-weight: var(--phs-card-title-font-weight, 500);
	font-style: var(--phs-card-title-font-style, normal);
	letter-spacing: var(--phs-card-title-letter-spacing, -0.288px);
	text-transform: var(--phs-card-title-text-transform, none);
}

.ponca-hs__card-body {
	margin: 0;
	color: var(--phs-card-body-color, #474747);
	max-width: var(--phs-card-body-max-width, 443.23px);
	font-family: var(--phs-card-body-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--phs-card-body-font-size, 14px);
	line-height: var(--phs-card-body-line-height, 23px);
	font-weight: var(--phs-card-body-font-weight, 400);
	font-style: var(--phs-card-body-font-style, normal);
	letter-spacing: var(--phs-card-body-letter-spacing, normal);
	text-transform: var(--phs-card-body-text-transform, none);
}

/* ---- Card link ---- */
.ponca-hs__card-link {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	text-decoration: none;
	gap: var(--phs-card-link-gap, 8px);
	color: var(--phs-card-link-color, #A78607);
	font-family: var(--phs-card-link-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--phs-card-link-font-size, 14px);
	line-height: var(--phs-card-link-line-height, 24px);
	font-weight: var(--phs-card-link-font-weight, 600);
	font-style: var(--phs-card-link-font-style, normal);
	letter-spacing: var(--phs-card-link-letter-spacing, normal);
	text-transform: var(--phs-card-link-text-transform, none);
	transition: color .15s ease;
}
.ponca-hs__card-link:hover,
.ponca-hs__card-link:focus-visible {
	color: var(--phs-link-hover, #8B6E05) !important;
}
.ponca-hs__card-link:hover .ponca-hs__card-link-arrow {
	transform: translateX(2px);
	display: inline-block;
	transition: transform .2s ease;
}
.ponca-hs__card-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 2px;
}

/* ---- Buttons row ---- */
.ponca-hs__buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	width: 100%;
	gap: var(--phs-buttons-gap, 18px);
	margin-top: var(--phs-buttons-margin-top, 8px);
}

/* ---- Shared button ---- */
.ponca-hs__btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	font-family: var(--phs-btn-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--phs-btn-font-size, 13px);
	line-height: var(--phs-btn-line-height, 22px);
	font-weight: var(--phs-btn-font-weight, 600);
	font-style: var(--phs-btn-font-style, normal);
	letter-spacing: var(--phs-btn-letter-spacing, 1.92px);
	text-transform: var(--phs-btn-text-transform, uppercase);
}

/* ---- Primary button ---- */
.ponca-hs__btn--primary {
	gap: var(--phs-btn1-gap, 12px);
	padding: var(--phs-btn1-padding, 15px 32px);
	background: var(--phs-btn1-bg, #691103);
	color: var(--phs-btn1-color, #FFF8F6);
	border: var(--phs-btn1-border-width, 1px) solid var(--phs-btn1-border-color, #691103);
	border-radius: var(--phs-btn1-radius, 4px);
}
.ponca-hs__btn--primary:hover,
.ponca-hs__btn--primary:focus-visible {
	background: var(--phs-btn1-hover-bg, #4F0C02) !important;
	color: var(--phs-btn1-hover-fg, #FFF8F6) !important;
	border-color: var(--phs-btn1-hover-bg, #4F0C02) !important;
}
.ponca-hs__btn--primary:hover .ponca-hs__btn-arrow {
	transform: translateX(2px);
	display: inline-block;
	transition: transform .2s ease;
}

/* ---- Secondary button ---- */
.ponca-hs__btn--secondary {
	gap: var(--phs-btn2-gap, 12px);
	padding: var(--phs-btn2-padding, 15px 32px);
	background: var(--phs-btn2-bg, transparent);
	color: var(--phs-btn2-color, #0D0F0E);
	border: var(--phs-btn2-border-width, 1px) solid var(--phs-btn2-border-color, #0D0F0E);
	border-radius: var(--phs-btn2-radius, 4px);
}
.ponca-hs__btn--secondary:hover,
.ponca-hs__btn--secondary:focus-visible {
	background: var(--phs-btn2-hover-bg, #0D0F0E) !important;
	color: var(--phs-btn2-hover-fg, #FFFFFF) !important;
}
.ponca-hs__btn--secondary:hover .ponca-hs__btn-arrow {
	transform: translateX(2px);
	display: inline-block;
	transition: transform .2s ease;
}

.ponca-hs__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* ============================================================
   Corner ornament
   ============================================================ */
.ponca-hs__corner-ornament {
	position: absolute;
	pointer-events: none;
	z-index: 1;
	width: var(--phs-corner-width, 400px);
	height: var(--phs-corner-height, 400px);
	right: var(--phs-corner-right, 0px);
	top: var(--phs-corner-top, 0px);
	opacity: var(--phs-corner-opacity, 0.5);
	background-image: var(--phs-corner-image);
	background-repeat: repeat;
	background-size: 60px 60px;
}

/* ============================================================
   Full-viewport-width footer pattern, flush bottom
   ============================================================ */

.ponca-hs.has-footer-pattern {
	overflow-x: clip;
}

.ponca-hs__footer-pattern {
	display: block;
	margin: 0;
	pointer-events: none;
	user-select: none;
	height: var(--phs-footer-height, 83px);
	margin-top: var(--phs-footer-margin-top, 0px);
	padding: 0 var(--phs-footer-padding-x, 0px);
	background-color: var(--phs-footer-bg, transparent);
	background-image: var(--phs-footer-image);
	background-repeat: var(--phs-footer-repeat, repeat-x);
	background-size: var(--phs-footer-size, auto 100%);
	background-position: var(--phs-footer-position, center bottom);
	opacity: var(--phs-footer-opacity, 1);
	position: var(--phs-footer-pos, absolute);
	left: var(--phs-footer-left, 0);
	bottom: var(--phs-footer-bottom, 0);
}

.ponca-hs__footer-pattern.is-full-width {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ============================================================
   Responsive
   ============================================================ */


@media (max-width: 1100px) {

	.ponca-hs__container {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 64px !important;
	}
	.ponca-hs__left,
	.ponca-hs__right {
		width: 100% !important;
		max-width: 100% !important;
	}
	.ponca-hs__quote {
		font-size: clamp(32px, 4vw, 45px) !important;
		line-height: 1.4 !important;
	}
}

@media (max-width: 700px) {

	.ponca-hs__container {
		gap: 48px !important;
	}
	.ponca-hs__quote-mark {
		font-size: 100px !important;
		left: -21px !important;
		top: -64px !important;
	}
	.ponca-hs__quote {
		font-size: 28px !important;
		line-height: 40px !important;
	}
	.ponca-hs__card {
		flex-direction: column !important;
	}
	.ponca-hs__badge {
		width: 100% !important;
		min-height: 80px !important;
		padding: 16px !important;
	}
	.ponca-hs__buttons {
		flex-direction: column !important;
	}
	.ponca-hs__btn {
		width: 100% !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ponca-hs *,
	.ponca-hs *::before,
	.ponca-hs *::after {
		transition: none !important;
		transform: none !important;
	}
}
