/**
 * Marqent components: header, homepage sections, shortcode output, form and footer.
 * Class names map to the CSS Classes set on Elementor elements (Advanced tab).
 */

/* ======================================================================
   Shared
   ====================================================================== */

.mq-section .elementor-widget-text-editor p:last-child,
.mq-footer .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.mq-section h2.elementor-heading-title {
	max-width: 820px;
}

.mq-intro {
	max-width: 600px;
}

.elementor-widget-shortcode .elementor-shortcode {
	width: 100%;
}

.mq-narrow {
	max-width: 720px;
	width: 100%;
	margin-inline: auto;
}

/* Buttons rendered by shortcodes / forms (Elementor buttons use the kit button style). */
/* a.mq-btn beats the kit's ".elementor-kit-N a" link colour. */
a.mq-btn,
.mq-btn,
.mq-cf7 input[type="submit"].mq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--mq-radius-sm);
	background: var(--mq-primary);
	color: var(--mq-white);
	font: 700 15px/1.2 var(--mq-font-body);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s var(--mq-ease), transform 0.2s var(--mq-ease), box-shadow 0.2s var(--mq-ease);
}

a.mq-btn:hover,
a.mq-btn:focus-visible,
.mq-btn:hover,
.mq-btn:focus-visible {
	background: var(--mq-primary-dark);
	color: var(--mq-white);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(59, 13, 122, 0.28);
}

.mq-btn--block {
	width: 100%;
}

.elementor .mq-btn-el .elementor-button {
	transition: background-color 0.2s var(--mq-ease), color 0.2s var(--mq-ease), transform 0.2s var(--mq-ease), box-shadow 0.2s var(--mq-ease);
}

.elementor .mq-btn-el .elementor-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(59, 13, 122, 0.28);
}

.elementor .mq-btn-ghost .elementor-button {
	background: var(--mq-white);
	color: var(--mq-navy);
	box-shadow: inset 0 0 0 1px var(--mq-border);
}

.elementor .mq-btn-ghost .elementor-button:hover,
.elementor .mq-btn-ghost .elementor-button:focus-visible {
	background: var(--mq-lavender);
	color: var(--mq-navy);
	box-shadow: inset 0 0 0 1px #d9cdeb;
}

.elementor .mq-btn-white .elementor-button {
	background: var(--mq-white);
	color: var(--mq-primary);
}

.elementor .mq-btn-white .elementor-button:hover,
.elementor .mq-btn-white .elementor-button:focus-visible {
	background: #f1eafb;
	color: var(--mq-primary-dark);
	box-shadow: 0 8px 24px rgba(22, 5, 48, 0.25);
}

/* Arrow links ("Learn more →"). */
.mq-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mq-primary);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.mq-arrow-link--light,
.mq-dark .mq-arrow-link {
	color: var(--mq-white);
}

.mq-arrow-link--light:hover,
.mq-dark .mq-arrow-link:hover {
	color: #f3ecfc;
}

/* Icon tile used on service cards. */
.mq-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #f1eafb;
	color: var(--mq-primary);
	transition: background-color 0.3s var(--mq-ease), color 0.3s var(--mq-ease);
}

.mq-service:hover .mq-icon {
	background: var(--mq-primary);
	color: var(--mq-white);
}

/* ======================================================================
   Header + navigation
   ====================================================================== */

#masthead {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid var(--mq-border);
	backdrop-filter: saturate(180%) blur(8px);
	transition: box-shadow 0.3s var(--mq-ease);
}

.admin-bar #masthead {
	top: var(--wp-admin--admin-bar--height, 32px);
}

#masthead.is-scrolled {
	box-shadow: 0 6px 24px rgba(29, 8, 65, 0.06);
}

.mq-header {
	position: relative;
}

.mq-header .mq-header__logo img {
	display: block;
}

.mq-header .mq-header__nav {
	flex: 1 1 auto;
	position: static;
}

.mq-header .mq-header__nav > .elementor-widget-container {
	position: static;
}

.mq-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.mq-nav__panel {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.mq-nav__list {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.mq-nav__list a {
	position: relative;
	display: block;
	padding: 8px 0;
	color: var(--mq-navy);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.mq-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: var(--mq-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--mq-ease);
}

.mq-nav__list a:hover,
.mq-nav__list .current-menu-item > a {
	color: var(--mq-primary);
}

.mq-nav__list a:hover::after,
.mq-nav__list .current-menu-item > a::after {
	transform: scaleX(1);
}

.mq-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	border: 1px solid var(--mq-border);
	border-radius: var(--mq-radius-sm);
	background: var(--mq-white);
	color: var(--mq-navy);
	cursor: pointer;
}

.mq-nav__toggle:hover,
.mq-nav__toggle:focus {
	background: var(--mq-lavender);
	color: var(--mq-navy);
}

.mq-nav__bars,
.mq-nav__bars::before,
.mq-nav__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.3s var(--mq-ease), opacity 0.2s;
}

.mq-nav__bars {
	position: relative;
}

.mq-nav__bars::before,
.mq-nav__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.mq-nav__bars::before {
	top: -6px;
}

.mq-nav__bars::after {
	top: 6px;
}

.mq-nav.is-open .mq-nav__bars {
	background: transparent;
}

.mq-nav.is-open .mq-nav__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.mq-nav.is-open .mq-nav__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1024px) {
	.mq-nav__toggle {
		display: inline-flex;
	}

	.mq-nav__panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 12px 24px 24px;
		background: var(--mq-white);
		border-bottom: 1px solid var(--mq-border);
		box-shadow: 0 16px 32px rgba(29, 8, 65, 0.08);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.25s var(--mq-ease), transform 0.25s var(--mq-ease), visibility 0.25s;
	}

	.mq-nav.is-open .mq-nav__panel {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.mq-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
	}

	.mq-nav__list a {
		padding: 14px 0;
		border-bottom: 1px solid var(--mq-border);
		font-size: 16px;
	}

	.mq-nav__list a::after {
		display: none;
	}

	.mq-nav__cta {
		width: 100%;
		padding-block: 14px;
	}
}

/* ======================================================================
   Hero
   ====================================================================== */

.mq-badge .elementor-heading-title {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid var(--mq-border);
	border-radius: 999px;
	font-size: 13px;
}

.mq-hero__copy .elementor-widget-text-editor {
	max-width: 520px;
}

.mq-btn-row {
	padding-top: 8px;
}

/* Bar chart card (hero) */
.mq-chart,
.mq-report {
	margin: 0;
	padding: 24px 24px 28px;
	border-radius: 16px;
	background: var(--mq-navy);
	color: var(--mq-white);
	box-shadow: 0 24px 60px rgba(29, 8, 65, 0.18);
}

/* Hello styles figcaption as grey italic captions; these are UI labels. */
.mq-chart figcaption,
.mq-report figcaption,
.mq-quote figcaption {
	margin: 0;
	font-style: normal;
	text-align: left;
}

.mq-chart__head {
	display: flex;
	color: var(--mq-white);
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.mq-chart__title {
	font: 700 15px/1.3 var(--mq-font-heading);
}

.mq-chart__tag {
	font-size: 12px;
	color: #d4c6ea;
}

.mq-bars {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	height: 110px;
	margin: 24px 0 22px;
}

.mq-bars__bar {
	flex: 1;
	height: var(--h);
	border-radius: 4px 4px 0 0;
	background: var(--mq-periwinkle);
	transform-origin: bottom;
}

.mq-bars__bar.is-peak {
	background: linear-gradient(180deg, #ecffc0 0%, var(--mq-violet) 100%);
}

.mq-chart__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 0;
}

.mq-chart__stat {
	display: flex;
	flex-direction: column-reverse;
	gap: 4px;
}

.mq-chart__stat dd {
	margin: 0;
	font: 800 30px/1 var(--mq-font-heading);
	letter-spacing: -0.02em;
}

.mq-chart__stat dt {
	font-size: 13px;
	font-weight: 400;
	color: #d4c6ea;
}

/* Client logos: one row of boxed logos. marqent.js turns it into a slow, seamless marquee
   (same geometry before and after, so no layout shift); without JS or with reduced motion
   the row simply scrolls sideways. Add/remove logos as Image widgets in Elementor. */
.mq-logos {
	--mq-logo-w: 220px;
	--mq-logo-gap: 16px;
}

.mq-logos.e-con {
	flex-wrap: nowrap;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.mq-logos.e-con::-webkit-scrollbar {
	display: none;
}

.mq-logos .mq-logo {
	flex: 0 0 var(--mq-logo-w);
	width: var(--mq-logo-w);
	max-width: none;
	margin-right: var(--mq-logo-gap);
	scroll-snap-align: start;
}

.mq-logo,
.mq-logo > .elementor-widget-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mq-logo {
	height: 76px;
	padding: 10px 16px;
	border: 1px solid var(--mq-border);
	border-radius: var(--mq-radius-sm);
	background: var(--mq-white);
	transition: border-color 0.3s var(--mq-ease), box-shadow 0.3s var(--mq-ease);
}

.mq-logo img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 46px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.72;
	transition: filter 0.3s var(--mq-ease), opacity 0.3s var(--mq-ease);
}

.mq-logo:hover {
	border-color: #d9cdeb;
	box-shadow: var(--mq-shadow);
}

.mq-logo:hover img {
	filter: none;
	opacity: 1;
}

/* Marquee mode (JS): the track holds the logos twice; moving it by half loops seamlessly. */
.mq-logos.is-marquee {
	display: block;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.mq-logos__track {
	display: flex;
	width: max-content;
	animation: mq-marquee var(--mq-marquee-time, 45s) linear infinite;
}

.mq-logos.is-marquee:hover .mq-logos__track,
.mq-logos.is-marquee:focus-within .mq-logos__track {
	animation-play-state: paused;
}

@keyframes mq-marquee {
	to {
		transform: translateX(-50%);
	}
}

/* Elementor editor: show every logo wrapped so they're easy to edit. */
.elementor-editor-active .mq-logos.e-con {
	flex-wrap: wrap;
	overflow: visible;
}

@media (max-width: 1024px) {
	.mq-logos {
		--mq-logo-w: 180px;
	}
}

@media (max-width: 767px) {
	.mq-logos {
		--mq-logo-w: 150px;
		--mq-logo-gap: 12px;
	}

	.mq-logo {
		height: 64px;
		padding: 8px 12px;
	}

	.mq-logo img {
		max-height: 38px;
	}
}

/* ======================================================================
   Who we work with (nested tabs)
   ====================================================================== */

.elementor-widget-n-tabs.mq-tabs .e-n-tabs-heading {
	gap: 10px;
	margin-bottom: 16px;
}

/* Colours, borders and radius are set in the widget's Style tab; this only adds spacing and motion. */
.elementor-widget-n-tabs.mq-tabs .e-n-tab-title {
	padding: 10px 18px;
	transition: background-color 0.2s var(--mq-ease), color 0.2s var(--mq-ease), border-color 0.2s var(--mq-ease);
}

.mq-audience {
	animation: mq-fade-in 0.4s var(--mq-ease);
}

@keyframes mq-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ======================================================================
   Cards: services, process, how it works
   ====================================================================== */

.mq-service .mq-link-wrap {
	margin-top: auto;
	padding-top: 4px;
}

.mq-service .mq-service__title {
	margin-top: 6px;
}

.mq-step__num .elementor-heading-title {
	font-size: 34px;
	letter-spacing: -0.02em;
}

.mq-step,
.mq-how {
	min-height: 100%;
}

/* ======================================================================
   Free audit CTA
   ====================================================================== */

.mq-cta .mq-cta__title .elementor-heading-title {
	font-size: clamp(26px, 3vw, 34px);
}

.mq-cta .mq-cta__text {
	opacity: 0.88;
}

.mq-cta .mq-btn-white {
	flex-shrink: 0;
}

/* ======================================================================
   Case studies (dark)
   ====================================================================== */

.mq-cases {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 24px 0 12px;
}

.mq-case {
	display: flex;
	flex-direction: column;
	padding: 28px 28px 32px;
	border-radius: 16px;
	background: var(--mq-navy-2);
	transition: transform 0.35s var(--mq-ease), background-color 0.35s var(--mq-ease);
}

.mq-case:hover {
	transform: translateY(-4px);
	background: #36106a;
}

.mq-case__cat {
	margin: 0 0 6px;
	color: #d9fd8a;
	font-size: 14px;
	font-weight: 700;
}

.mq-case__stat {
	margin: 0 0 18px;
	color: var(--mq-white);
	font: 800 clamp(48px, 6vw, 64px)/1 var(--mq-font-heading);
	letter-spacing: -0.03em;
}

.mq-case .mq-case__title {
	margin: 0 0 10px;
	color: var(--mq-white);
	font-size: clamp(19px, 2vw, 22px);
	line-height: 1.25;
}

.mq-case__summary {
	margin: 0 0 18px;
	color: #d4c6ea;
	font-size: 15px;
	line-height: 1.6;
}

.mq-case__link {
	margin-top: auto;
	color: var(--mq-white);
}

/* ======================================================================
   Reporting mock-up
   ====================================================================== */

.mq-report__kpis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.mq-report__kpi {
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--mq-navy-2);
}

.mq-report__kpi span {
	display: block;
	font-size: 12px;
	color: #d4c6ea;
}

.mq-report__kpi strong {
	display: block;
	margin-top: 2px;
	font: 700 18px/1.2 var(--mq-font-heading);
	color: var(--mq-white);
}

.mq-report .mq-bars {
	height: 90px;
	margin: 28px 0 12px;
}

.mq-report__caption {
	font-size: 12px;
	color: #d4c6ea;
}

/* ======================================================================
   Testimonials + insights
   ====================================================================== */

.mq-quotes,
.mq-posts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 24px;
}

.mq-quote {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 24px;
}

.mq-quote__text {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--mq-navy);
	font-size: 17px;
	line-height: 1.55;
}

.mq-quote__text p {
	margin: 0;
}

.mq-quote__who {
	margin-top: auto;
	padding: 10px 12px;
	border: 1px dashed #d9cdeb;
	border-radius: var(--mq-radius-sm);
	color: var(--mq-muted);
	font-size: 13px;
}

.mq-post {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
}

.mq-post__cat {
	margin: 0;
	color: var(--mq-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mq-post__title {
	margin: 0;
	font-size: 18px;
	line-height: 1.35;
}

.mq-post__summary {
	margin: 0 0 6px;
	color: var(--mq-muted);
	font-size: 15px;
}

.mq-post .mq-arrow-link {
	margin-top: auto;
}

/* ======================================================================
   FAQ (nested accordion)
   ====================================================================== */

.mq-faq .e-n-accordion-item {
	border-bottom: 1px solid var(--mq-border);
}

.mq-faq .e-n-accordion-item-title {
	justify-content: flex-start;
	padding: 18px 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.mq-faq .e-n-accordion-item-title-header {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mq-faq .e-n-accordion-item-title-header::before {
	content: "";
	flex-shrink: 0;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 7px solid var(--mq-navy);
	transition: transform 0.25s var(--mq-ease);
}

.mq-faq .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-header::before {
	transform: rotate(90deg);
}

.mq-faq .e-n-accordion-item-title-text {
	margin: 0;
	color: var(--mq-navy);
	font: 700 16px/1.4 var(--mq-font-body);
	letter-spacing: 0;
}

.mq-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text {
	color: var(--mq-primary);
}

.mq-faq .e-n-accordion-item > .e-con {
	padding: 0 0 18px 19px;
	border: 0;
}

/* ======================================================================
   Contact + Contact Form 7
   ====================================================================== */

.mq-form-card {
	border-radius: 16px;
	background: var(--mq-white);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.mq-cf7 .mq-form__field {
	margin: 0 0 14px;
}

.mq-cf7 label {
	display: block;
	margin-bottom: 6px;
	color: var(--mq-navy);
	font-size: 13px;
	font-weight: 700;
}

.mq-cf7 .wpcf7-form-control-wrap {
	display: block;
}

.mq-cf7 input[type="text"],
.mq-cf7 input[type="email"],
.mq-cf7 input[type="url"],
.mq-cf7 input[type="tel"],
.mq-cf7 select {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid #e0d6ee;
	border-radius: var(--mq-radius-sm);
	background-color: var(--mq-white);
	color: var(--mq-navy);
	font: 400 16px/1.2 var(--mq-font-body);
	transition: border-color 0.2s var(--mq-ease), box-shadow 0.2s var(--mq-ease);
}

.mq-cf7 select {
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%231d0841' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
	background-position: right 14px center;
	background-repeat: no-repeat;
}

.mq-cf7 input:focus,
.mq-cf7 select:focus {
	border-color: var(--mq-primary);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(59, 13, 122, 0.15);
}

.mq-cf7 .mq-form__submit {
	position: relative;
	margin: 6px 0 0;
}

/* Spinner sits inside the button area instead of adding height below it. */
.mq-cf7 .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 12px;
	margin: -12px 0 0;
}

.mq-cf7 .wpcf7-not-valid-tip {
	margin-top: 4px;
	font-size: 13px;
}

.mq-cf7 .wpcf7-response-output {
	margin: 14px 0 0 !important;
	padding: 10px 14px !important;
	border-radius: var(--mq-radius-sm);
	font-size: 14px;
}

/* ======================================================================
   Footer
   ====================================================================== */

.mq-footer .mq-footer__logo img {
	display: block;
}

.mq-inline-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mq-inline-menu a {
	color: #ebe4f4;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.mq-inline-menu a:hover {
	color: var(--mq-white);
}

.mq-footer__copy {
	font-size: 14px;
}

/* ======================================================================
   Motion (see assets/js/marqent.js). Only opacity/transform, so no layout shift.
   Classes are added by JS, so without JS everything is simply visible.
   ====================================================================== */

.mq-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s var(--mq-ease), transform 0.7s var(--mq-ease);
	transition-delay: var(--mq-delay, 0ms);
}

.mq-reveal.is-inview {
	opacity: 1;
	transform: none;
}

/* Cards keep their own hover transition once revealed. */
.mq-card.mq-reveal.is-inview,
.mq-case.mq-reveal.is-inview {
	transition: opacity 0.7s var(--mq-ease) var(--mq-delay, 0ms), transform 0.35s var(--mq-ease), box-shadow 0.35s var(--mq-ease), border-color 0.35s var(--mq-ease), background-color 0.35s var(--mq-ease);
}

/* Bars: hero grows on first paint (CSS only); others grow when scrolled into view. */
.mq-hero .mq-bars__bar {
	animation: mq-bar-grow 0.9s var(--mq-ease) both;
	animation-delay: calc(0.15s + var(--i) * 70ms);
}

.is-animatable .mq-bars__bar {
	transform: scaleY(0);
	transition: transform 0.9s var(--mq-ease);
	transition-delay: calc(var(--i) * 70ms);
}

.is-animatable.is-animated .mq-bars__bar {
	transform: scaleY(1);
}

@keyframes mq-bar-grow {
	from {
		transform: scaleY(0);
	}
	to {
		transform: scaleY(1);
	}
}

/* Hero copy: a short entrance on load (transform only, text is painted immediately for LCP). */
.mq-hero__copy > .elementor-element,
.mq-hero__visual {
	animation: mq-rise 0.8s var(--mq-ease) both;
}

.mq-hero__copy > .elementor-element:nth-child(2) { animation-delay: 0.05s; }
.mq-hero__copy > .elementor-element:nth-child(3) { animation-delay: 0.1s; }
.mq-hero__copy > .elementor-element:nth-child(4) { animation-delay: 0.15s; }
.mq-hero__copy > .elementor-element:nth-child(5) { animation-delay: 0.2s; }
.mq-hero__visual { animation-delay: 0.15s; }

@keyframes mq-rise {
	from {
		transform: translateY(16px);
	}
	to {
		transform: none;
	}
}

/* ======================================================================
   Theme templates (case study archive)
   ====================================================================== */

.mq-container {
	width: 100%;
	max-width: calc(var(--mq-container) + 48px);
	margin-inline: auto;
	padding-inline: 24px;
}

/* Hello caps .site-main at 1140px; the archive bands are full-bleed. */
body .site-main.mq-archive {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.mq-archive__hero {
	padding-block: 88px 96px;
	background: var(--mq-navy);
}

.mq-eyebrow--light {
	margin: 0 0 14px;
	color: #d9fd8a;
}

.mq-archive .mq-archive__title {
	max-width: 820px;
	margin: 0 0 14px;
	color: var(--mq-white);
	font-size: clamp(32px, 4.5vw, 52px);
	line-height: 1.1;
}

.mq-archive__intro {
	max-width: 600px;
	margin: 0 0 16px;
	color: #d4c6ea;
	font-size: 18px;
}

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

@media (max-width: 1024px) {
	.mq-quotes,
	.mq-posts {
		grid-template-columns: 1fr;
		max-width: 640px;
	}
}

@media (max-width: 767px) {
	.mq-cases {
		grid-template-columns: 1fr;
	}

	.mq-chart,
	.mq-report {
		padding: 20px;
	}

	.mq-chart__stat dd {
		font-size: 24px;
	}

	.mq-bars {
		gap: 6px;
		height: 96px;
	}

	.mq-report__kpis {
		grid-template-columns: 1fr;
	}

	.mq-btn-row .elementor-widget-button {
		flex: 1 1 auto;
	}

	.mq-btn-row .elementor-button {
		width: 100%;
	}
}