/*
 * Lucidity v4 modules.
 *
 * Every rule is scoped under .lc-v4, which each module renders on its own
 * wrapper. Nothing here is global, so the existing pages and posts are
 * unaffected, and none of the conflicting orange values already defined in
 * the7-css/css-vars.css or custom-css-js/*.css are touched.
 */

/* ---------------------------------------------------------------- tokens */

.lc-v4 {
	--lc-primary: #f36e40;
	--lc-secondary: #f5316b;
	--lc-accent: #f7941e;

	--lc-dark: #072e3f;
	--lc-dark-soft: #244757;
	--lc-text: #63666a;
	--lc-muted: #8e8f91;
	--lc-border: #d0d3db;
	--lc-white: #fff;

	--lc-bg-1: #d9d9d9;
	--lc-bg-2: #f8f8f8;
	--lc-bg-3: #f0f8fc;

	/* Section band colours from the comps. */
	--lc-bg-light: #f7f7f7;
	--lc-bg-offwhite: #f9f9f9;

	--lc-grad-1: linear-gradient(135deg, #f7941e 0%, #f5316b 100%);
	--lc-grad-2: linear-gradient(135deg, #244757 0%, #072e3f 100%);
	--lc-grad-3: linear-gradient(135deg, #f7941e 0%, #f36e40 100%);

	--lc-radius: 8px;

	--lc-space-4: 4px;
	--lc-space-8: 8px;
	--lc-space-16: 16px;
	--lc-space-24: 24px;
	--lc-space-32: 32px;
	--lc-space-40: 40px;
	--lc-space-80: 80px;
	--lc-space-96: 96px;
	--lc-space-120: 120px;

	--lc-font: "Roboto", Helvetica, Arial, Verdana, sans-serif;

	font-family: var(--lc-font);
	color: var(--lc-text);
	box-sizing: border-box;
}

.lc-v4 *,
.lc-v4 *::before,
.lc-v4 *::after {
	box-sizing: inherit;
}

/* The theme styles every list inside .content with bullets (.content ul
 * { list-style: disc }). Module lists carry their own markers, so this rule
 * out-specifies the theme for all of them. */
.lc-v4 .lc-cta__bullets,
.lc-v4 .lc-services__list,
.lc-v4 .lc-share__list,
.lc-v4 .lc-toc__list,
.lc-v4 .lc-related__list,
.lc-v4 .lc-grid__filters,
.lc-v4 .lc-checklist__list,
.lc-v4 .lc-faq__list,
.lc-v4 .lc-cta__bullets li,
.lc-v4 .lc-services__list li,
.lc-v4 .lc-share__list li,
.lc-v4 .lc-toc__list li,
.lc-v4 .lc-related__list li,
.lc-v4 .lc-grid__filters li,
.lc-v4 .lc-checklist__list li {
	list-style: none;
}

/* Spacing above 40px collapses on mobile, per the style guide. */
@media (max-width: 767px) {
	.lc-v4 {
		--lc-space-40: 36px;
		--lc-space-80: 36px;
		--lc-space-96: 32px;
		--lc-space-120: 32px;
	}
}

/* --------------------------------------------------------------- buttons */

.lc-v4 .lc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lc-space-8);
	padding: 16px 32px;
	border: 0;
	border-radius: var(--lc-radius);
	font-family: var(--lc-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

/* Gradient 1 from the style guide: orange to pink. This is the button
 * treatment used throughout the comps. */
.lc-v4 .lc-btn--gradient {
	background: var(--lc-grad-1);
	color: var(--lc-white);
}

/* Gradient 3: orange to coral, kept as an alternative. */
.lc-v4 .lc-btn--gradient_warm {
	background: var(--lc-grad-3);
	color: var(--lc-white);
}

.lc-v4 .lc-btn--primary {
	background: var(--lc-primary);
	color: var(--lc-white);
}

.lc-v4 .lc-btn--accent {
	background: var(--lc-accent);
	color: var(--lc-white);
}

.lc-v4 .lc-btn--dark {
	background: var(--lc-dark);
	color: var(--lc-white);
}

.lc-v4 .lc-btn--outline {
	background: transparent;
	box-shadow: inset 0 0 0 2px currentColor;
	color: var(--lc-primary);
}

.lc-v4 .lc-btn:hover,
.lc-v4 .lc-btn:focus {
	color: var(--lc-white);
	filter: brightness(1.08);
	text-decoration: none;
}

.lc-v4 .lc-btn--outline:hover,
.lc-v4 .lc-btn--outline:focus {
	background: var(--lc-primary);
	color: var(--lc-white);
}

.lc-v4 .lc-btn:focus-visible {
	outline: 3px solid var(--lc-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------- CTA */

.lc-v4.lc-cta {
	position: relative;
	overflow: hidden;
	border-radius: var(--lc-radius);
	margin: var(--lc-space-40) 0;
}

.lc-cta__bg {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	z-index: 0;
}

.lc-cta__inner {
	position: relative;
	z-index: 1;
	padding: var(--lc-space-32);
}

.lc-cta--align-center .lc-cta__inner {
	text-align: center;
}

.lc-cta--align-center .lc-cta__bullets {
	text-align: left;
}

.lc-cta__eyebrow {
	margin: 0 0 var(--lc-space-8);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lc-cta__heading {
	margin: 0 0 var(--lc-space-16);
	font-size: var(--lc-cta-heading, 26px);
	font-weight: 600;
	line-height: 1.2;
}

.lc-cta__body {
	margin: 0 0 var(--lc-space-24);
	font-size: 16px;
	line-height: 1.6;
}

.lc-cta__body p {
	margin: 0 0 var(--lc-space-8);
}

.lc-cta__body p:last-child {
	margin-bottom: 0;
}

.lc-cta__bullets {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lc-space-16);
	margin: 0 0 var(--lc-space-24);
	padding: 0;
	list-style: none;
}

.lc-cta__bullet {
	position: relative;
	padding-left: var(--lc-space-24);
	font-size: 16px;
	line-height: 1.5;
}

.lc-cta__bullet::before {
	content: "";
	position: absolute;
	top: 0.5em;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lc-accent);
}

.lc-cta__actions {
	margin: 0;
}

.lc-cta__caption {
	margin: var(--lc-space-16) 0 0;
	font-size: 14px;
	opacity: 0.75;
}

/*
 * Optional accent bar across the bottom edge. Sits above the background image
 * and overlay, and its thickness comes from --lc-cta-border on the wrapper.
 */
.lc-cta[class*="lc-cta--border-"]::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	height: var(--lc-cta-border, 4px);
}

.lc-cta--border-gradient::after {
	background: var(--lc-grad-1);
}

.lc-cta--border-gradient_orange::after {
	background: var(--lc-grad-3);
}

.lc-cta--border-primary::after {
	background: var(--lc-primary);
}

.lc-cta--border-accent::after {
	background: var(--lc-accent);
}

.lc-cta--border-secondary::after {
	background: var(--lc-secondary);
}

/* CTA dark variants ---------------------------------------------------- */

.lc-cta--dark_image,
.lc-cta--dark_flat,
.lc-cta--feature {
	background-color: var(--lc-dark);
	color: var(--lc-white);
}

.lc-cta--dark_image .lc-cta__heading,
.lc-cta--dark_flat .lc-cta__heading,
.lc-cta--feature .lc-cta__heading {
	color: var(--lc-white);
}

.lc-cta--dark_image .lc-cta__eyebrow,
.lc-cta--feature .lc-cta__eyebrow {
	color: var(--lc-accent);
}

.lc-cta--dark_flat .lc-cta__eyebrow {
	color: var(--lc-white);
}

/*
 * Overlay is heaviest on the text side and fades toward the photo, matching
 * the comps. On mobile it flattens to a solid wash so text stays legible.
 */
.lc-cta--has-image .lc-cta__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--lc-dark) 0%, rgba(7, 46, 63, 0.92) 45%, rgba(7, 46, 63, 0.55) 100%);
}

.lc-cta--has-image.lc-cta--overlay-strong .lc-cta__bg::after {
	background: linear-gradient(90deg, var(--lc-dark) 0%, rgba(7, 46, 63, 0.97) 55%, rgba(7, 46, 63, 0.8) 100%);
}

.lc-cta--has-image.lc-cta--overlay-light .lc-cta__bg::after {
	background: linear-gradient(90deg, rgba(7, 46, 63, 0.95) 0%, rgba(7, 46, 63, 0.7) 45%, rgba(7, 46, 63, 0.3) 100%);
}

.lc-cta--has-image .lc-cta__inner {
	max-width: 68%;
}

.lc-cta--dark_flat .lc-cta__inner {
	padding: var(--lc-space-24);
}

.lc-cta--dark_image.lc-cta--no-image {
	--lc-cta-heading: 20px;
}

.lc-cta--dark_flat {
	--lc-cta-heading: 15px;
}

.lc-cta--dark_flat .lc-cta__heading {
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.lc-cta--dark_flat .lc-cta__body {
	margin-bottom: var(--lc-space-16);
	font-size: 15px;
}

.lc-cta--dark_flat .lc-btn,
.lc-cta--light .lc-btn {
	padding: 8px 16px;
	font-size: 16px;
}

.lc-cta--feature .lc-cta__inner {
	padding: var(--lc-space-40);
}

/* CTA light variant ---------------------------------------------------- */

.lc-cta--light {
	--lc-cta-heading: 20px;

	background-color: var(--lc-bg-2);
	color: var(--lc-text);
}

.lc-cta--light .lc-cta__heading {
	color: var(--lc-dark);
}

.lc-cta--light .lc-cta__eyebrow {
	color: var(--lc-primary);
}

.lc-cta--light .lc-cta__inner {
	padding: var(--lc-space-24);
}

/* ------------------------------------------------------------ inline CTA */

.lc-v4.lc-cta-inline {
	margin: var(--lc-space-24) 0;
	color: var(--lc-primary);
	font-size: 18px;
	line-height: 1.6;
}

.lc-v4 .lc-cta-inline__link {
	color: var(--lc-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lc-v4 .lc-cta-inline__link:hover,
.lc-v4 .lc-cta-inline__link:focus {
	color: var(--lc-secondary);
}

.lc-cta-inline__arrow {
	display: inline-block;
	margin-left: var(--lc-space-4);
	text-decoration: none;
	transition: transform 0.2s ease;
}

.lc-v4 .lc-cta-inline__link:hover .lc-cta-inline__arrow {
	transform: translateX(3px);
}

/* --------------------------------------------------------- numbered list */

.lc-v4.lc-numlist {
	margin: var(--lc-space-32) 0;
	padding: 0;
	list-style: none;
}

.lc-numlist__item {
	display: flex;
	gap: var(--lc-space-16);
	align-items: flex-start;
	padding: var(--lc-space-24);
	border-radius: var(--lc-radius);
	background: #f9f9f9;
}

.lc-numlist--card-bordered .lc-numlist__item {
	border: 1px solid var(--lc-border);
}

.lc-numlist--card-flat .lc-numlist__item {
	background: var(--lc-bg-2);
}

.lc-numlist--card-compact .lc-numlist__item {
	align-items: center;
	padding: var(--lc-space-16) var(--lc-space-24);
	background: var(--lc-bg-2);
}

.lc-numlist__item + .lc-numlist__item {
	margin-top: var(--lc-space-16);
}

.lc-numlist--card-compact .lc-numlist__item + .lc-numlist__item {
	margin-top: 12px;
}

.lc-numlist__number {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--lc-white);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.lc-numlist--num-gradient .lc-numlist__number {
	background: var(--lc-grad-1);
}

.lc-numlist--num-orange .lc-numlist__number {
	background: var(--lc-primary);
}

.lc-numlist--num-dark .lc-numlist__number {
	background: var(--lc-dark);
}

.lc-numlist__content {
	flex: 1 1 auto;
	min-width: 0;
}

.lc-numlist__heading {
	margin: 0 0 var(--lc-space-8);
	color: var(--lc-dark);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.lc-numlist__body,
.lc-numlist__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

.lc-numlist__lead {
	color: var(--lc-dark);
	font-weight: 700;
}

/* ------------------------------------------------------------------- FAQ */

.lc-v4.lc-faq {
	margin: var(--lc-space-40) 0;
}

.lc-faq__heading {
	margin: 0 0 var(--lc-space-16);
	color: var(--lc-dark);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
}

.lc-faq__intro {
	margin: 0 0 var(--lc-space-24);
	font-size: 18px;
	line-height: 1.6;
}

.lc-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lc-faq__item {
	border-radius: var(--lc-radius);
	background: var(--lc-bg-2);
}

.lc-faq__question {
	display: flex;
	gap: var(--lc-space-8);
	align-items: center;
	padding: var(--lc-space-16) var(--lc-space-24);
	color: var(--lc-dark);
	cursor: pointer;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
}

.lc-faq__question::-webkit-details-marker {
	display: none;
}

.lc-faq__question::marker {
	content: "";
}

.lc-faq__question:focus-visible {
	outline: 3px solid var(--lc-accent);
	outline-offset: -3px;
}

.lc-faq__number {
	flex: 0 0 auto;
}

.lc-faq__question-text {
	flex: 1 1 auto;
}

/* Plus sign built from two bars; the vertical bar rotates away when open. */
.lc-faq__toggle {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.lc-faq__toggle::before,
.lc-faq__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--lc-dark);
	transform: translateY(-50%);
	transition: transform 0.25s ease;
}

.lc-faq__toggle::after {
	transform: translateY(-50%) rotate(90deg);
}

.lc-faq__item[open] .lc-faq__toggle::after {
	transform: translateY(-50%) rotate(0deg);
}

.lc-faq__answer {
	padding: 0 var(--lc-space-24) var(--lc-space-24);
	font-size: 16px;
	line-height: 1.6;
}

.lc-faq__answer p {
	margin: 0 0 var(--lc-space-8);
}

.lc-faq__answer p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------- checklist */

.lc-v4.lc-checklist {
	margin: var(--lc-space-24) 0;
	padding: 0;
	list-style: none;
}

.lc-v4.lc-checklist__intro {
	margin: 0 0 var(--lc-space-8);
	font-size: 18px;
	line-height: 1.6;
}

.lc-checklist__item {
	display: flex;
	gap: var(--lc-space-16);
	align-items: flex-start;
	padding: var(--lc-space-8) 0;
}

.lc-checklist__icon {
	flex: 0 0 auto;
	width: 20px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.lc-checklist__icon::before {
	content: "\2713";
}

.lc-checklist--icon-primary .lc-checklist__icon {
	color: var(--lc-primary);
}

.lc-checklist--icon-accent .lc-checklist__icon {
	color: var(--lc-accent);
}

.lc-checklist--icon-dark .lc-checklist__icon {
	color: var(--lc-dark);
}

.lc-checklist__text {
	color: var(--lc-dark);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
}

/* ------------------------------------------------------------ pull quote */

.lc-v4.lc-pullquote {
	margin: var(--lc-space-32) 0;
	padding: var(--lc-space-24);
	border-left: 5px solid var(--lc-primary);
	border-radius: 0 var(--lc-radius) var(--lc-radius) 0;
	background: var(--lc-bg-2);
	quotes: none;
}

.lc-pullquote--accent-accent {
	border-left-color: var(--lc-accent);
}

.lc-pullquote--accent-secondary {
	border-left-color: var(--lc-secondary);
}

.lc-pullquote--accent-dark {
	border-left-color: var(--lc-dark);
}

.lc-pullquote__text {
	margin: 0;
	color: var(--lc-dark);
	font-size: 20px;
	font-style: italic;
	font-weight: 500;
	line-height: 1.5;
}

.lc-v4.lc-pullquote__follow-up {
	margin: var(--lc-space-16) 0 var(--lc-space-32);
	font-size: 18px;
	line-height: 1.6;
}

/* ------------------------------------------------------------------ note */

.lc-v4.lc-note {
	margin: var(--lc-space-24) 0;
	padding: var(--lc-space-24);
	border-radius: var(--lc-radius);
	background: #f9f9f9;
}

.lc-note__eyebrow {
	margin: 0 0 var(--lc-space-8);
	color: var(--lc-primary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lc-note--accent-accent .lc-note__eyebrow {
	color: var(--lc-accent);
}

.lc-note--accent-secondary .lc-note__eyebrow {
	color: var(--lc-secondary);
}

.lc-note__body {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
}

/* ----------------------------------------------------------- author card */

/* Sidebar cards in the comp sit on a soft grey-to-white gradient with a
 * diffuse shadow rather than a hard border. */
.lc-v4.lc-author,
.lc-v4.lc-services--card-bordered {
	--lc-sidebar-card-shadow: 0 6px 24px rgba(7, 46, 63, 0.08);
	border: 1px solid rgba(7, 46, 63, 0.04);
	border-radius: 12px;
	background: linear-gradient(180deg, #f5f6f7 0%, #fbfbfc 45%, var(--lc-white) 100%);
	box-shadow: var(--lc-sidebar-card-shadow);
}

.lc-v4.lc-author {
	padding: var(--lc-space-24);
}

.lc-author__label,
.lc-services__label {
	margin: 0 0 var(--lc-space-16);
	color: var(--lc-primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lc-author__identity {
	display: flex;
	gap: var(--lc-space-16);
	align-items: center;
}

.lc-author__avatar {
	display: block;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--lc-bg-1);
}

.lc-author__avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.lc-author__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.lc-author__name {
	color: var(--lc-dark);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.lc-author__title {
	color: var(--lc-muted);
	font-size: 14px;
	line-height: 1.4;
}

.lc-author__bio {
	margin: var(--lc-space-16) 0 0;
	font-size: 15px;
	line-height: 1.6;
}

.lc-author__links {
	margin: var(--lc-space-16) 0 0;
}

.lc-v4 .lc-author__linkedin,
.lc-v4 .lc-services__link {
	color: var(--lc-dark);
	font-weight: 600;
}

.lc-v4 .lc-author__linkedin:hover,
.lc-v4 .lc-services__link:hover {
	color: var(--lc-primary);
}

/* --------------------------------------------------------- service links */

.lc-v4.lc-services {
	padding: var(--lc-space-24);
	border-radius: var(--lc-radius);
}

.lc-services--card-bordered .lc-services__item + .lc-services__item {
	border-top-color: rgba(7, 46, 63, 0.1);
}

.lc-services__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-services__item + .lc-services__item {
	border-top: 1px solid var(--lc-border);
}

.lc-v4 .lc-services__link {
	display: flex;
	gap: var(--lc-space-8);
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	font-size: 16px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lc-services__arrow {
	flex: 0 0 auto;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.lc-v4 .lc-services__link:hover .lc-services__arrow {
	transform: translateX(3px);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 767px) {
	.lc-cta__inner,
	.lc-cta--feature .lc-cta__inner {
		padding: var(--lc-space-24);
	}

	.lc-cta--has-image .lc-cta__inner {
		max-width: 100%;
	}

	.lc-cta--has-image .lc-cta__bg::after {
		background: rgba(7, 46, 63, 0.9);
	}

	.lc-cta__heading {
		font-size: min(var(--lc-cta-heading, 26px), 22px);
	}

	.lc-cta__bullets {
		grid-template-columns: minmax(0, 1fr);
	}

	.lc-faq__heading {
		font-size: 24px;
	}

	.lc-faq__question {
		padding: var(--lc-space-16);
		font-size: 16px;
	}

	.lc-faq__answer {
		padding: 0 var(--lc-space-16) var(--lc-space-16);
	}

	.lc-numlist__item {
		padding: var(--lc-space-16);
	}

	.lc-numlist__heading {
		font-size: 18px;
	}

	.lc-v4.lc-cta-inline,
	.lc-checklist__text,
	.lc-note__body {
		font-size: 16px;
	}

	.lc-pullquote__text {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lc-v4 *,
	.lc-v4 *::before,
	.lc-v4 *::after {
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------- theme banner override */

/*
 * dt-the7-child/single.php prints .single-post-banner on every single post.
 * This hides it ONLY on posts that use lc_article_header, via a body class
 * added in inc/assets.php. Existing posts never match, so they keep theirs.
 */
body.lc-hide-theme-banner .single-post-banner {
	display: none;
}

/* The7 pads #main at the top; on v4 article posts the hero band should meet
 * the navigation instead. The body class is added by lc_hide_theme_banner. */
body.lc-hide-theme-banner #main {
	padding-top: 0;
}

/* --------------------------------------------------------- article header */

.lc-v4.lc-article-header {
	display: grid;
	align-items: start;
	column-gap: var(--lc-space-40);
	row-gap: 0;
	margin-bottom: var(--lc-space-40);
}

.lc-article-header--split.lc-article-header--has-image {
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--lc-header-media, 1.15fr));
}

.lc-article-header--centered {
	justify-items: center;
	text-align: center;
}

/*
 * The eyebrow and headline are direct grid children and always span every
 * column, so the title runs the full width of the header rather than being
 * squeezed into the text column beside the image.
 */
.lc-article-header__eyebrow,
.lc-v4 .lc-article-header__title,
.lc-article-header__utility {
	grid-column: 1 / -1;
}

/*
 * Meta and share run the full width under the title, so the image column
 * begins below them rather than alongside.
 */
.lc-article-header__utility {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lc-space-16) var(--lc-space-24);
	align-items: center;
	margin-bottom: var(--lc-space-32);
}

.lc-article-header__utility .lc-share,
.lc-article-header__utility .lc-article-header__meta {
	margin: 0;
}

.lc-article-header__eyebrow {
	margin: 0 0 var(--lc-space-16);
	color: var(--lc-primary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lc-v4 .lc-article-header__title {
	margin: 0 0 var(--lc-space-16);
	color: var(--lc-dark);
	font-size: clamp(32px, 4vw, 50px);
	font-weight: 600;
	line-height: 1.2;
}

.lc-article-header__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lc-space-16);
	margin: 0 0 var(--lc-space-16);
	color: var(--lc-muted);
	font-size: 14px;
}

.lc-article-header__intro {
	margin-top: 0;
	font-size: 18px;
	line-height: 1.6;
}

.lc-article-header__intro p {
	margin: 0 0 var(--lc-space-16);
}

.lc-article-header__intro p:last-child {
	margin-bottom: 0;
}

.lc-article-header__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lc-radius);
}

/*
 * Anything nested inside the header - typically a CTA - sits under the intro
 * in the text column. Margins are collapsed so a nested module's own vertical
 * spacing does not fight the header's.
 */
.lc-article-header__extra {
	margin-top: var(--lc-space-16);
}

.lc-article-header__extra > .lc-v4:first-child {
	margin-top: 0;
}

.lc-article-header__extra > .lc-v4:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------- share row */

.lc-v4.lc-share {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lc-space-16);
	align-items: center;
	margin: var(--lc-space-24) 0;
}

.lc-share__label {
	color: var(--lc-dark);
	font-weight: 600;
}

.lc-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lc-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-v4 .lc-share__link {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 6px 14px 6px 12px;
	border-radius: 999px;
	color: var(--lc-white);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: filter 0.2s ease;
}

.lc-v4 .lc-share__link:hover {
	color: var(--lc-white);
	filter: brightness(1.1);
}

.lc-v4 .lc-share__link--copy { background: var(--lc-primary); }
.lc-v4 .lc-share__link--email { background: var(--lc-accent); }
.lc-v4 .lc-share__link--linkedin { background: #097bb7; }
.lc-v4 .lc-share__link--facebook { background: #1d7cf2; }

.lc-share__icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.lc-share__link.is-copied {
	background: var(--lc-dark);
}

/* ---------------------------------------------------- table of contents */

.lc-v4.lc-toc {
	position: relative;
	overflow: hidden;
	margin: var(--lc-space-32) 0;
	padding: var(--lc-space-24) var(--lc-space-24) var(--lc-space-32);
	border-radius: var(--lc-radius);
	background: var(--lc-bg-2);
}

/* Dotted texture (or a custom image) behind the list; the grey stays as
 * the colour under it while the image loads. */
.lc-v4.lc-toc--image {
	background-image: var(--lc-toc-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Gradient rule along the bottom edge, per the comp. */
.lc-toc::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 4px;
	background: var(--lc-grad-1);
}

.lc-toc__heading {
	margin: 0 0 var(--lc-space-16);
	color: var(--lc-dark);
	font-size: 24px;
	font-weight: 700;
}

/* Numbered "1. Heading" entries, as in the comp. A CSS counter is used
 * instead of list-style so the number is bold and coloured like the link
 * and lines up regardless of the theme's list resets. */
.lc-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: lc-toc;
	color: var(--lc-dark);
}

.lc-toc__item {
	margin-bottom: var(--lc-space-8);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	counter-increment: lc-toc;
}

.lc-toc__item::before {
	content: counter(lc-toc) ". ";
	color: var(--lc-dark);
}

.lc-v4 .lc-toc__link {
	color: var(--lc-dark);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lc-v4 .lc-toc__link:hover {
	color: var(--lc-primary);
}

.lc-toc__empty {
	margin: 0;
	color: var(--lc-muted);
	font-size: 14px;
}

/* The JS removes this once it has built the list. */
.lc-toc__list:not(:empty) + .lc-toc__empty {
	display: none;
}

/* ----------------------------------------------------------- two column */

.lc-v4.lc-cols {
	display: grid;
	gap: var(--lc-cols-gap, 40px);
	max-width: var(--lc-cols-max, 1160px);
	margin-inline: auto;
	grid-template-columns: minmax(0, 1fr) var(--lc-cols-side, 320px);
}

.lc-cols--sidebar-left {
	grid-template-columns: var(--lc-cols-side, 320px) minmax(0, 1fr);
}

.lc-cols--sidebar-left .lc-col--main {
	order: 2;
}

.lc-cols--sidebar-left .lc-col--sidebar {
	order: 1;
}

.lc-col {
	min-width: 0;
}

.lc-col--sidebar {
	align-self: start;
}

.lc-col__inner {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-24);
}

/* Cards in the sidebar are spaced by the flex gap alone. Specificity
 * matches the modules' own margins (for example .lc-v4.lc-cta), so this
 * later rule wins and the spacing stays even. */
.lc-col--sidebar .lc-col__inner > * {
	margin-top: 0;
	margin-bottom: 0;
}

/*
 * Sticky sidebar.
 *
 * The script (initSticky in lucidity-v4.js) owns this on wide screens: it
 * adds .lc-cols--js to the wrapper, then pins .lc-col__inner with
 * position:fixed and moves it with the scroll so it stops above the footer.
 * CSS position:sticky is kept only as a no-JS fallback, and it only works
 * where no ancestor has overflow:hidden (The7 sets that on every .vc_row).
 */
.lc-cols--sticky:not(.lc-cols--js) .lc-col--sidebar {
	position: sticky;
	top: var(--lc-space-24);
}

.lc-cols--js .lc-col--sidebar.is-pinned .lc-col__inner {
	position: fixed;
	z-index: 20;
}

@media (max-width: 991px) {
	.lc-v4.lc-cols,
	.lc-cols--sidebar-left {
		grid-template-columns: minmax(0, 1fr);
	}

	.lc-cols--sidebar-left .lc-col--main,
	.lc-cols--sidebar-left .lc-col--sidebar {
		order: initial;
	}

	.lc-cols--sticky:not(.lc-cols--js) .lc-col--sidebar {
		position: static;
	}
}

/* -------------------------------------------------------- related posts */

.lc-v4.lc-related {
	margin: var(--lc-space-80) 0 var(--lc-space-40);
}

.lc-related__heading {
	margin: 0 0 var(--lc-space-24);
	color: var(--lc-dark);
	font-size: 26px;
	font-weight: 600;
}

.lc-related__list {
	display: grid;
	gap: var(--lc-space-32);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-v4 .lc-related__link {
	display: flex;
	gap: var(--lc-space-16);
	align-items: flex-start;
	color: inherit;
	text-decoration: none;
}

.lc-related__media {
	flex: 0 0 auto;
	width: 110px;
	overflow: hidden;
	border-radius: var(--lc-radius);
}

.lc-related__img {
	display: block;
	width: 110px;
	height: 80px;
	object-fit: cover;
}

.lc-related__img--empty {
	background: var(--lc-bg-1);
}

.lc-related__text {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-4);
	min-width: 0;
}

.lc-related__title {
	color: var(--lc-dark);
	font-size: 16px;
	line-height: 1.4;
}

.lc-v4 .lc-related__link:hover .lc-related__title {
	text-decoration: underline;
}

.lc-related__date {
	color: var(--lc-muted);
	font-size: 14px;
}

/* Large card variant. */
.lc-related--cards .lc-related__link {
	flex-direction: column;
}

.lc-related--cards .lc-related__media,
.lc-related--cards .lc-related__img {
	width: 100%;
}

.lc-related--cards .lc-related__img {
	height: 180px;
}

.lc-related--cards .lc-related__title {
	font-size: 18px;
	font-weight: 600;
}

/* ------------------------------------------------------------ blog grid */

.lc-v4.lc-grid {
	margin: var(--lc-space-40) 0;
}

.lc-grid__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lc-space-24);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--lc-space-32);
}

.lc-grid__heading {
	margin: 0;
	color: var(--lc-dark);
	font-size: 40px;
	font-weight: 600;
	line-height: 1.2;
}

.lc-grid__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lc-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-chip {
	padding: 8px 20px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--lc-dark);
	cursor: pointer;
	font-family: var(--lc-font);
	font-size: 16px;
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease;
}

.lc-chip:hover {
	color: var(--lc-primary);
}

.lc-chip.is-active {
	background: var(--lc-grad-3);
	color: var(--lc-white);
}

.lc-chip:focus-visible {
	outline: 3px solid var(--lc-accent);
	outline-offset: 2px;
}

.lc-grid__items {
	display: grid;
	gap: var(--lc-space-40);
	grid-template-columns: repeat(var(--lc-grid-cols, 3), minmax(0, 1fr));
}

.lc-grid__items.is-loading {
	opacity: 0.4;
	transition: opacity 0.2s ease;
}

.lc-grid__empty {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--lc-muted);
}

/* Card ------------------------------------------------------------------ */

.lc-card {
	display: flex;
	flex-direction: column;
	gap: var(--lc-space-16);
}

.lc-card__media {
	display: block;
	overflow: hidden;
	border-radius: var(--lc-radius);
	aspect-ratio: 400 / 254;
	background: var(--lc-bg-1);
}

.lc-card__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
}

.lc-card__img--empty {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--lc-bg-1);
}

.lc-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lc-space-8);
	align-items: center;
	font-size: 14px;
	line-height: 1.4;
}

.lc-card__pill {
	padding: 3px 10px;
	border-radius: 4px;
	background: var(--lc-secondary);
	color: var(--lc-white);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lc-v4 .lc-card__terms a {
	color: var(--lc-primary);
	font-weight: 500;
	text-decoration: none;
}

.lc-v4 .lc-card__terms a:hover {
	text-decoration: underline;
}

.lc-card__sep {
	margin: 0 6px;
	color: var(--lc-primary);
}

.lc-card__date,
.lc-card__read {
	color: #22252a;
}

.lc-card__date::before,
.lc-card__read::before {
	margin-right: 6px;
	color: var(--lc-muted);
	content: "\00b7";
}

.lc-card__title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.lc-v4 .lc-card__title a {
	color: var(--lc-dark);
	text-decoration: none;
}

.lc-v4 .lc-card__title a:hover {
	text-decoration: underline;
}

.lc-card__excerpt {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

/* Pagination ------------------------------------------------------------ */

.lc-grid__pagination {
	display: flex;
	gap: var(--lc-space-16);
	align-items: center;
	justify-content: center;
	margin-top: var(--lc-space-40);
}

.lc-pager {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--lc-dark);
	border-radius: 50%;
	background: transparent;
	color: var(--lc-dark);
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	transition: background 0.2s ease, color 0.2s ease;
}

.lc-pager:hover:not(:disabled) {
	background: var(--lc-dark);
	color: var(--lc-white);
}

.lc-pager:disabled {
	border-color: var(--lc-border);
	color: var(--lc-border);
	cursor: default;
}

.lc-v4 .lc-grid__view-all {
	color: var(--lc-dark);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lc-grid__count {
	color: var(--lc-muted);
	font-size: 14px;
}

/* Layout variants (hub page top section) --------------------------------- */

/* Featured: one large card with the big title from the comp. */
.lc-grid--featured .lc-grid__items,
.lc-grid--list .lc-grid__items {
	grid-template-columns: minmax(0, 1fr);
}

.lc-grid--featured .lc-card__media {
	aspect-ratio: 760 / 500;
}

.lc-grid--featured .lc-card__title {
	font-size: 40px;
	line-height: 1.2;
}

/* List: thumbnail on the left, meta and title on the right. */
.lc-grid--list .lc-grid__items {
	gap: var(--lc-space-24);
}

.lc-grid--list .lc-card {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: var(--lc-space-4) var(--lc-space-16);
	align-items: start;
}

.lc-grid--list .lc-card__media {
	grid-row: 1 / 3;
	aspect-ratio: 150 / 100;
}

.lc-grid--list .lc-card__meta {
	gap: var(--lc-space-4) var(--lc-space-8);
	font-size: 13px;
}

.lc-grid--list .lc-card__pill {
	padding: 2px 8px;
	font-size: 11px;
}

.lc-grid--list .lc-card__title {
	font-size: 17px;
	line-height: 1.35;
}

.lc-grid--list .lc-card__excerpt {
	display: none;
}

@media (max-width: 991px) {
	.lc-grid__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lc-grid--featured .lc-grid__items,
	.lc-grid--list .lc-grid__items {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.lc-grid__items {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lc-space-32);
	}

	.lc-grid__heading {
		font-size: 26px;
	}

	.lc-grid--featured .lc-card__title {
		font-size: 26px;
	}

	.lc-grid--list .lc-card {
		grid-template-columns: 120px minmax(0, 1fr);
	}

	.lc-v4.lc-article-header,
	.lc-article-header--split.lc-article-header--has-image {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lc-space-24);
	}

	.lc-related__list {
		gap: var(--lc-space-24);
	}
}

/* ------------------------------------------------- section backgrounds */

/*
 * Brand background colours as utility classes.
 *
 * Deliberately NOT scoped under .lc-v4: these are meant to be typed into the
 * "Extra class name" box on a WPBakery row, which has no Lucidity class of its
 * own. They only ever apply where someone has explicitly added the class, so
 * nothing leaks onto existing pages.
 */
.lc-bg-light { background-color: #f7f7f9; }
.lc-bg-offwhite { background-color: #f9f9f9; }
.lc-bg-pale { background-color: #f0f8fc; }
.lc-bg-white { background-color: #fff; }

.lc-bg-dark {
	background-color: #072e3f;
	color: #fff;
}

.lc-bg-dark h1,
.lc-bg-dark h2,
.lc-bg-dark h3,
.lc-bg-dark h4,
.lc-bg-dark h5,
.lc-bg-dark h6 {
	color: #fff;
}

/* Article header band ---------------------------------------------------- */

.lc-article-header--bg-light { background-color: var(--lc-bg-light); }
.lc-article-header--bg-offwhite { background-color: var(--lc-bg-offwhite); }
.lc-article-header--bg-pale { background-color: var(--lc-bg-3); }
.lc-article-header--bg-white { background-color: var(--lc-white); }

.lc-article-header--bg-dark {
	background-color: var(--lc-dark);
	color: rgba(255, 255, 255, 0.85);
}

.lc-v4.lc-article-header--bg-dark .lc-article-header__title {
	color: var(--lc-white);
}

.lc-article-header--bg-dark .lc-article-header__eyebrow {
	color: var(--lc-accent);
}

/* Any band colour needs breathing room, otherwise the text sits on the edge. */
.lc-article-header[class*="lc-article-header--bg-"] {
	padding: var(--lc-space-40) 0;
}

/*
 * Full bleed: the colour runs edge to edge while the content stays aligned
 * with the column it sits in. 100vw includes the scrollbar, so the padding is
 * restored on the inside to keep the text where it was.
 */
.lc-article-header--full-bleed {
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	padding-right: calc(50vw - 50%);
	padding-left: calc(50vw - 50%);
	max-width: 100vw;
}

/* The band rule above out-specifies the full-bleed one, so the side padding
 * that keeps the text aligned with the column is restated here. */
.lc-article-header--full-bleed.lc-article-header[class*="lc-article-header--bg-"] {
	padding: var(--lc-space-40) calc(50vw - 50%);
}