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

/* ============================================================
   PONCA CONTENT INTRO
   Class prefix: ponca-ci
   ============================================================ */

.ponca-ci {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	background-color: var(--ponca-ci-section-bg, #FFFDF6);
	padding-top: var(--ponca-ci-pad-y, 128px);
	padding-bottom: var(--ponca-ci-pad-y, 128px);
	padding-left: var(--ponca-ci-pad-x, 48px);
	padding-right: var(--ponca-ci-pad-x, 48px);
}

.ponca-ci *,
.ponca-ci *::before,
.ponca-ci *::after {
	box-sizing: border-box;
}

.ponca-ci__container {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	max-width: var(--ponca-ci-container-max, 1600px);
	gap: var(--ponca-ci-container-gap, 60px);
}

/* ---- Row / columns ---- */
.ponca-ci__row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
	gap: var(--ponca-ci-row-gap, 135px);
	justify-content: var(--ponca-ci-row-justify, space-between);
	align-items: var(--ponca-ci-row-align, flex-start);
}

.ponca-ci__row--reverse {
	flex-direction: row-reverse;
}

.ponca-ci__left {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 0;
	min-width: 0;
	max-width: var(--ponca-ci-left-max, 714px);
	gap: var(--ponca-ci-left-gap, 50px);
}

.ponca-ci__primary-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--ponca-ci-primary-gap, 30px);
}

.ponca-ci__secondary-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--ponca-ci-secondary-gap, 24px);
}

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

.ponca-ci__eyebrow,
.ponca-ci__headline,
.ponca-ci__description,
.ponca-ci__subheading,
.ponca-ci__secondary-description {
	margin: 0;
	width: 100%;
}

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

/* ---- Headline ---- */
.ponca-ci__headline {
	font-family: var(--ponca-ci-headline-font-family, 'Cormorant Garamond', serif);
	font-size: var(--ponca-ci-headline-font-size, 56px);
	line-height: var(--ponca-ci-headline-line-height, 62px);
	font-weight: var(--ponca-ci-headline-font-weight, 300);
	letter-spacing: var(--ponca-ci-headline-letter-spacing, -0.56px);
}

.ponca-ci__headline-top,
.ponca-ci__headline-bottom,
.ponca-ci__headline-sep {
	display: inline;
}

.ponca-ci__headline-top {
	color: var(--ponca-ci-headline-top-color, #0D0F0E);
	font-style: var(--ponca-ci-headline-top-font-style, italic);
}

.ponca-ci__headline-bottom {
	color: var(--ponca-ci-headline-bottom-color, #DEB209);
	font-style: var(--ponca-ci-headline-bottom-font-style, italic);
}

.ponca-ci__headline-sep {
	white-space: pre;
}

/* ---- Description ---- */
.ponca-ci__description {
	color: var(--ponca-ci-desc-color, #474747);
	font-family: var(--ponca-ci-desc-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-ci-desc-font-size, 18px);
	line-height: var(--ponca-ci-desc-line-height, 30px);
	font-weight: var(--ponca-ci-desc-font-weight, 400);
	font-style: var(--ponca-ci-desc-font-style, normal);
	letter-spacing: var(--ponca-ci-desc-letter-spacing, 0px);
}

/* ---- Subheading ---- */
.ponca-ci__subheading {
	color: var(--ponca-ci-subheading-color, #0D0F0E);
	font-family: var(--ponca-ci-subheading-font-family, 'Cormorant Garamond', serif);
	font-size: var(--ponca-ci-subheading-font-size, 30px);
	line-height: var(--ponca-ci-subheading-line-height, 36px);
	font-weight: var(--ponca-ci-subheading-font-weight, 600);
	font-style: var(--ponca-ci-subheading-font-style, normal);
	letter-spacing: var(--ponca-ci-subheading-letter-spacing, 0px);
	text-transform: var(--ponca-ci-subheading-text-transform, none);
}

/* ---- Secondary description ---- */
.ponca-ci__secondary-description {
	color: var(--ponca-ci-secondary-desc-color, #474747);
	font-family: var(--ponca-ci-secondary-desc-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-ci-secondary-desc-font-size, 18px);
	line-height: var(--ponca-ci-secondary-desc-line-height, 30px);
	font-weight: var(--ponca-ci-secondary-desc-font-weight, 400);
	font-style: var(--ponca-ci-secondary-desc-font-style, normal);
	letter-spacing: var(--ponca-ci-secondary-desc-letter-spacing, 0px);
}

/* ---- Right column ---- */
.ponca-ci__right {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
	max-width: var(--ponca-ci-right-max, 655px);
	gap: var(--ponca-ci-right-gap, 30px);
	align-items: var(--ponca-ci-right-align, flex-end);
}

/* ---- Image card ---- */
.ponca-ci__image-card {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background-color: var(--ponca-ci-image-card-bg, #FFFFFF);
	border: var(--ponca-ci-image-card-border, 1px solid #A7A7A7);
	border-radius: var(--ponca-ci-image-card-radius, 0px);
	max-width: var(--ponca-ci-image-card-max, 557px);
	min-height: var(--ponca-ci-image-card-min-h, 453px);
	padding: var(--ponca-ci-image-card-padding, 0px);
}

.ponca-ci__image {
	display: block;
	width: auto;
	height: auto;
	max-width: var(--ponca-ci-image-max-w, 455px);
	max-height: var(--ponca-ci-image-max-h, 375px);
	object-fit: var(--ponca-ci-image-fit, contain);
}

.ponca-ci__image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #A7A7A7;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	border: 1px dashed #A7A7A7;
	width: var(--ponca-ci-image-max-w, 455px);
	height: var(--ponca-ci-image-max-h, 375px);
}

/* ---- Social row ---- */
.ponca-ci__social-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--ponca-ci-social-row-gap, 10px);
	align-items: var(--ponca-ci-social-row-align, center);
}

.ponca-ci__social-label {
	margin: 0;
	color: var(--ponca-ci-social-label-color, #474747);
	font-family: var(--ponca-ci-social-label-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-ci-social-label-font-size, 18px);
	line-height: var(--ponca-ci-social-label-line-height, 30px);
	font-weight: var(--ponca-ci-social-label-font-weight, 400);
	font-style: var(--ponca-ci-social-label-font-style, normal);
	letter-spacing: var(--ponca-ci-social-label-letter-spacing, 0px);
}

.ponca-ci__social-icons {
	display: inline-flex;
	align-items: center;
	gap: var(--ponca-ci-social-icons-gap, 10px);
}

/* ---- Social icons ---- */
.ponca-ci__social-icon {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	width: var(--ponca-ci-social-icon-size, 24px);
	height: var(--ponca-ci-social-icon-size, 24px);
	transition: opacity 200ms ease, transform 200ms ease;
}

.ponca-ci__social-icon:hover {
	opacity: 0.85;
	transform: translateY(-1px);
}

.ponca-ci__social-icon:hover svg path,
.ponca-ci__social-icon:focus-visible svg path {
	fill: var(--ponca-ci-soc-icon-hover) !important;
}

.ponca-ci__social-icon svg {
	display: block;
}

/* ---- Download App button ---- */
.ponca-ci__button-wrap {
	display: flex;
	width: 100%;
	justify-content: var(--ponca-ci-btn-wrap-justify, flex-start);
	margin-top: var(--ponca-ci-btn-wrap-margin-top, 0px);
}
.ponca-ci__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
	background-color: var(--ponca-ci-btn-bg, #DEB209);
	color: var(--ponca-ci-btn-color, #1A1A1A);
	border: var(--ponca-ci-btn-border, 0px solid #DEB209);
	border-radius: var(--ponca-ci-btn-radius, 2px);
	padding: var(--ponca-ci-btn-padding, 18px 32px);
	font-family: var(--ponca-ci-btn-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-ci-btn-font-size, 17px);
	line-height: var(--ponca-ci-btn-line-height, 22px);
	font-weight: var(--ponca-ci-btn-font-weight, 500);
	font-style: var(--ponca-ci-btn-font-style, normal);
	letter-spacing: var(--ponca-ci-btn-letter-spacing, 0px);
	text-transform: var(--ponca-ci-btn-text-transform, none);
}
.ponca-ci__button:hover,
.ponca-ci__button:focus-visible {
	background-color: var(--ponca-ci-btn-hover-bg, #C79E08) !important;
	color: var(--ponca-ci-btn-hover-col, #1A1A1A) !important;
}

/* ---- App-store buttons (Google Play / App Store) ---- */
.ponca-ci__appbtns {
	display: flex;
	flex-direction: row;
	flex-wrap: var(--ponca-ci-appbtns-wrap, wrap);
	align-items: center;
	justify-content: var(--ponca-ci-appbtns-justify, flex-start);
	gap: var(--ponca-ci-appbtns-gap, 16px);
	margin-top: var(--ponca-ci-appbtns-margin-top, 0px);
	width: 100%;
}
.ponca-ci__appbtn {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--ponca-ci-appbtn-gap, 12px);
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	white-space: nowrap;
	background-color: var(--ponca-ci-appbtn-bg, #000000);
	color: var(--ponca-ci-appbtn-color, #FFFFFF);
	border: var(--ponca-ci-appbtn-border, 0px solid #000000);
	border-radius: var(--ponca-ci-appbtn-radius, 6px);
	padding: var(--ponca-ci-appbtn-padding, 14px 22px);
	font-family: var(--ponca-ci-appbtn-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-ci-appbtn-font-size, 17px);
	line-height: var(--ponca-ci-appbtn-line-height, 22px);
	font-weight: var(--ponca-ci-appbtn-font-weight, 500);
	letter-spacing: var(--ponca-ci-appbtn-letter-spacing, 0px);
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.ponca-ci__appbtn:hover,
.ponca-ci__appbtn:focus-visible {
	background-color: var(--ponca-ci-appbtn-hover-bg, #1A1A1A) !important;
	color: var(--ponca-ci-appbtn-hover-col, #FFFFFF) !important;
}
.ponca-ci__appbtn-icon { display: block; flex: 0 0 auto; }
.ponca-ci__appbtn-text { display: inline-block; }

/* ---- Footer ornament ---- */
.ponca-ci__footer-pattern {
	display: block;
	pointer-events: none;
	user-select: none;
	box-sizing: border-box;
	width: 100%;
	height: var(--ponca-ci-foot-h, 82px);
	margin-top: var(--ponca-ci-foot-margin-top, 0px);
	margin-bottom: var(--ponca-ci-foot-margin-bottom, 0);
	opacity: var(--ponca-ci-foot-opacity, 1);
	background-color: var(--ponca-ci-foot-bg, transparent);
	background-image: var(--ponca-ci-foot-image, none);
	background-repeat: var(--ponca-ci-foot-repeat, repeat-x);
	background-position: var(--ponca-ci-foot-position, center bottom);
	background-size: var(--ponca-ci-foot-size, auto 100%);
}

.ponca-ci__footer-pattern--full {
	position: absolute;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	left: 0;
	right: auto;
	bottom: 0;
}

@media (max-width: 1024px) {
	.ponca-ci__footer-pattern {
		height: calc(var(--ponca-ci-foot-h, 82px) * 0.85);
	}
}

@media (max-width: 720px) {
	.ponca-ci__footer-pattern {
		height: var(--ponca-ci-foot-h-mobile, 56px);
	}
}

/* ---- Alignment ---- */
.ponca-ci.alignwide .ponca-ci__container,
.ponca-ci.alignfull .ponca-ci__container {
	max-width: 1600px;
}
@media (max-width: 1280px) {
	/* .ponca-ci {
		padding-left: max(32px, 3vw) !important;
		padding-right: max(32px, 3vw) !important;
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	} */

	.ponca-ci__headline {
		font-size: clamp(36px, 4.2vw, 56px) !important;
		line-height: 1.15 !important;
	}
}

@media (max-width: 1024px) {
	.ponca-ci__row {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.ponca-ci__left,
	.ponca-ci__right {
		max-width: 100% !important;
		width: 100% !important;
	}

	.ponca-ci__right {
		align-items: flex-start !important;
	}

	.ponca-ci__image-card {
		min-height: 0 !important;
		padding: 24px !important;
		max-width: 100% !important;
	}

	.ponca-ci__image-card .ponca-ci__image,
	.ponca-ci__image-card .ponca-ci__image-placeholder {
		max-width: 100% !important;
		height: auto !important;
	}
}

@media (max-width: 768px) {

	.ponca-ci__headline {
		font-size: 32px !important;
		line-height: 38px !important;
	}

	.ponca-ci__appbtn { flex: 1 1 100%; justify-content: center; }

	.ponca-ci__subheading {
		font-size: 24px !important;
		line-height: 30px !important;
	}

	.ponca-ci__description,
	.ponca-ci__secondary-description,
	.ponca-ci__social-label {
		font-size: 16px !important;
		line-height: 26px !important;
	}

	.ponca-ci__image-card {
		min-height: 0 !important;
	}
}

@media (max-width: 420px) {
	.ponca-ci__headline {
		font-size: 28px !important;
		line-height: 34px !important;
	}

	.ponca-ci__subheading {
		font-size: 22px !important;
		line-height: 28px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ponca-ci__social-icon {
		transition: none !important;
		transform: none !important;
	}
}