.ccta-outer {
	position: relative; /* only load-bearing when overlap="yes" — see .ccta-wrapper--overlap below */
}

/* ============ ROW 1: parallax hero + two columns ============ */
.ccta-section {
	position: relative;
	/* NOTE: no overflow:hidden here anymore — moved onto .ccta-bg-layer below
	   so it clips only the background image, and cards/columns are free to
	   overflow the section's edges (needed for card_overlap and the wave). */
	padding: 40px 0 130px;
	min-height: var(--ccta-min-height, 0);
	background-color: #1a1a1a;
	isolation: isolate;
}

/* Everything that needs clipping (the oversized, parallax-shifted photo)
   lives in its own layer, scoped tightly so nothing else on the section
   gets caught by the same overflow:hidden. */
.ccta-bg-layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}
.ccta-bg {
	position: absolute;
	inset: -10% 0; /* extra vertical bleed so parallax movement never reveals an edge */
	background-size: cover;
	background-position: center;
	will-change: transform;
}
.ccta-overlay {
	position: absolute;
	inset: 0;
	background: var(--ccta-overlay, rgba(10, 10, 15, 0.72));
	z-index: 1;
}

/* Boxed content row inside Row 1 — holds the two columns.
   Height comes for free from flexbox (auto-sizes to the taller column)
   UNLESS overlap="yes" pulls it out of the section entirely. */
.ccta-row1-wrapper {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 32px;
	width: 100%;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

.ccta-wrapper--theme,
.ccta-wrapper--custom { max-width: var(--ccta-container-width, 1200px); }
.ccta-wrapper--full   { max-width: none; }

.ccta-valign-top      { align-items: flex-start; }
.ccta-valign-center   { align-items: center; }
.ccta-valign-bottom   { align-items: flex-end; }
.ccta-valign-stretch  { align-items: stretch; }

.ccta-col-card {
	/* flex: 0 0 var(--ccta-card-width, 33%);
	max-width: var(--ccta-card-width, 33%); */
}
.ccta-col-content {
	flex: 1 1 auto;
	min-width: 0; /* prevents flex overflow if content column gets long text/media */
	color: #fff;
}

/* Card overlapping the top edge of Row 1 by a small amount — e.g. -30px.
   Safe now that .ccta-section no longer clips (overflow:hidden moved to
   .ccta-bg-layer), so this is just a plain negative margin, no DOM
   restructuring needed the way the big page-level overlap feature required. */
.ccta-col-card.ccta-card-overlap {
	margin-top: var(--ccta-card-overlap-offset, -30px);
}

/* Overlap mode: same negative-margin technique as before, now applied to
   the whole two-column wrapper instead of a single card. */
.ccta-wrapper--overlap {
	margin-top: var(--ccta-overlap-offset, -100px);
}

@media (max-width: 782px) {
	.ccta-row1-wrapper { flex-direction: column; }
	.ccta-col-card { flex-basis: auto; max-width: none; width: 100%; }
}

/* ============ THE CARD ============ */
.ccta-card {
	position: relative;
	width: 100%;
	background: var(--ccta-accent, #540093);
	color: #fff;
	padding: 40px 32px;
	border-radius: 5px;
	text-align: center;
	box-shadow: 0 0 50px rgba(2, 2, 2, 0.06);
}

.ccta-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 22px;
	border: 2px solid #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ccta-icon svg { width: 26px; height: 26px; }

.ccta-title {
	margin: 0 0 18px;
	font-size: 2.1rem;
	font-weight: 800;
	letter-spacing: 0.3px;
	color: #fff !important; /* beats theme h2 rules that otherwise win over inherited color */
}

.ccta-divider {
	width: 46px;
	height: 3px;
	background: #fff;
	margin: 0 auto 30px;
	opacity: 0.85;
}

.ccta-address {
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0 0 22px;
	opacity: 0.95;
	color: #fff !important;
}

.ccta-phone,
.ccta-email { font-size: 1.05rem; margin: 0 0 14px; color: #fff !important; }
.ccta-email:last-child { margin-bottom: 0; }

.ccta-phone a,
.ccta-email a { color: #fff !important; text-decoration: none; }
.ccta-phone a:hover,
.ccta-email a:hover { text-decoration: underline; }

/* Continuous float — intentional, not a bug. Defaults on via bounce="yes". */
.ccta-bounce {
	animation: ccta-float 4s ease-in-out infinite;
}
@keyframes ccta-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
	.ccta-bounce { animation: none; }
}

@media (max-width: 600px) {
	.ccta-card { padding: 36px 24px; }
	.ccta-title { font-size: 1.7rem; }
	.ccta-address, .ccta-phone, .ccta-email { font-size: 0.95rem; }
}

/* ============ ROW 2: standalone wave divider ============ */
/* Pulled up by its own height to overlap the last stretch of Row 1's dark
   background — the SVG is white, so it needs the dark section behind it to
   actually be visible. This "borrows" space from Row 1 rather than adding
   height after it (height + negative margin-top = 0 net contribution), so
   nothing downstream shifts. Not absolutely positioned, so it can never be
   clipped by anything. */
.ccta-wave-row {
	position: relative;
	line-height: 0;
	z-index: 3;
	height: var(--ccta-wave-height, 130px);
	margin-top: calc(-1 * var(--ccta-wave-height, 130px));
}
.ccta-wave-row svg { display: block; width: 100%; height: 100%; }