.clickt-pillars {
	background: var(--clickt-cream-100);
	padding: var(--clickt-pad-y-m) 0 60px;
	font-family: var(--clickt-font-body);
}
.clickt-pillars__inner { max-width: var(--clickt-maxw-grid); margin: 0 auto; padding: 0 var(--clickt-pad-x); }
.clickt-pillars__head { text-align: center; margin-bottom: 96px; }
.clickt-pillars__eyebrow {
	font-size: var(--clickt-fs-eyebrow);
	letter-spacing: var(--clickt-ls-caps-eyebrow);
	text-transform: uppercase;
	color: var(--clickt-gold-700);
}
.clickt-pillars__heading {
	font-family: var(--clickt-font-display);
	font-weight: 300;
	font-size: var(--clickt-fs-h2);
	margin: 20px 0 0;
	color: var(--clickt-navy-700);
	letter-spacing: var(--clickt-ls-display-soft);
}
.clickt-pillars__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
	margin-bottom: 120px;
}
.clickt-pillars__row.is-reverse .clickt-pillars__img-cell { order: 2; }
.clickt-pillars__row.is-reverse .clickt-pillars__text-cell { order: 1; }
.clickt-pillars__img-cell { position: relative; }
.clickt-pillars__frame {
	position: absolute;
	inset: 20px 20px -20px -20px;
	border: 1px solid var(--clickt-gold-500);
	pointer-events: none;
}
.clickt-pillars__row.is-reverse .clickt-pillars__frame {
	inset: 20px -20px -20px 20px;
}
.clickt-pillars__img {
	position: relative;
	width: 100%;
	height: 460px;
	object-fit: cover;
	display: block;
}
/* Elementor's `.elementor img { height: auto }` outranks the plain class, which let
   each About photo size to its own aspect ratio. The Services menu reuses these
   classes with its own sizing, so it is left out. */
.clickt-pillars__img-cell > .clickt-pillars__img:not(.clickt-svcmenu__img) { height: 460px; }
.clickt-pillars__num {
	font-family: var(--clickt-font-mono);
	font-size: var(--clickt-fs-caption);
	letter-spacing: var(--clickt-ls-caps);
	color: var(--clickt-gold-700);
}
.clickt-pillars__title {
	font-family: var(--clickt-font-display);
	font-weight: 400;
	font-size: var(--clickt-fs-h3);
	margin: 14px 0 24px;
	color: var(--clickt-navy-700);
	letter-spacing: var(--clickt-ls-display-softer);
}
.clickt-pillars__rule { width: 40px; height: 1px; background: var(--clickt-gold-500); margin-bottom: 24px; }
.clickt-pillars__body {
	margin: 0;
	font-size: var(--clickt-fs-body-l);
	line-height: var(--clickt-lh-body-loose);
	color: var(--clickt-body-78);
	font-weight: 300;
	max-width: 480px;
}
@media (max-width: 1024px) {
	.clickt-pillars__row { grid-template-columns: 1fr; gap: 40px; margin-bottom: 80px; }
	.clickt-pillars__row.is-reverse .clickt-pillars__img-cell,
	.clickt-pillars__row.is-reverse .clickt-pillars__text-cell { order: initial; }
	.clickt-pillars__img { height: 320px; }
	.clickt-pillars__img-cell > .clickt-pillars__img:not(.clickt-svcmenu__img) { height: 320px; }
}