/* ==========================================================================
   PAGE BLOCKS — the CSS bridge between the approved design and native
   Elementor widget markup.
   ==========================================================================
   HOW THIS WORKS
   Every section on the homepage is a real Elementor container holding real
   Elementor widgets. Each one carries a class in its "CSS Classes" field
   (Advanced tab) — `ab-card`, `ab-case`, `ab-quote`, and so on. This file
   turns those classes into the design.

   The split is deliberate:
     · Elementor owns STRUCTURE — what's in what, the order, the columns.
       Edit that in the visual editor.
     · This file owns the DESIGN SYSTEM — spacing rhythm, colour, card
       treatment, hover states. Change it here once, it changes everywhere.

   So don't set colours/padding on individual widgets in Elementor unless you
   genuinely want that one widget to differ — you'll be fighting this file.
   ========================================================================== */

/* ==========================================================================
   LAYOUT PRIMITIVES
   ==========================================================================
   An Elementor container set to "Boxed" renders an extra `.e-con-inner`
   wrapper and puts the children inside it; set to "Full" it does not. Every
   layout rule below therefore targets both the element and its inner wrapper,
   so a class behaves identically whichever width mode the container is on.
   ========================================================================== */

.ab-root .ab-stack,
.ab-root .ab-stack>.e-con-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}

.ab-root .ab-stack--tight,
.ab-root .ab-stack--tight>.e-con-inner {
	gap: 14px;
}

.ab-root .ab-stack--loose,
.ab-root .ab-stack--loose>.e-con-inner {
	gap: 32px;
}

.ab-root .ab-stack--center,
.ab-root .ab-stack--center>.e-con-inner {
	align-items: center;
}

.ab-root .ab-row,
.ab-root .ab-row>.e-con-inner {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.ab-root .ab-row--between,
.ab-root .ab-row--between>.e-con-inner {
	justify-content: space-between;
	align-items: flex-end;
}

.ab-root .ab-row--center,
.ab-root .ab-row--center>.e-con-inner {
	justify-content: center;
}

.ab-root .ab-row--top,
.ab-root .ab-row--top>.e-con-inner {
	align-items: flex-start;
}

/* card grids */
.ab-root .ab-grid-3,
.ab-root .ab-grid-3>.e-con-inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
	width: 100%;
}

@media (max-width: 980px) {

	.ab-root .ab-grid-3,
	.ab-root .ab-grid-3>.e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {

	.ab-root .ab-grid-3,
	.ab-root .ab-grid-3>.e-con-inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* asymmetric two-column splits, each matching the approved design */
.ab-root .ab-split,
.ab-root .ab-split>.e-con-inner {
	display: grid;
	gap: clamp(36px, 5vw, 72px);
	align-items: center;
	width: 100%;
}

.ab-root .ab-split--hero,
.ab-root .ab-split--hero>.e-con-inner {
	grid-template-columns: 1.15fr 0.85fr;
}

.ab-root .ab-split--video,
.ab-root .ab-split--video>.e-con-inner {
	grid-template-columns: 0.9fr 1.1fr;
}

.ab-root .ab-split--band,
.ab-root .ab-split--band>.e-con-inner {
	grid-template-columns: 1.1fr 0.9fr;
}

.ab-root .ab-split--faq,
.ab-root .ab-split--faq>.e-con-inner {
	grid-template-columns: 0.8fr 1.2fr;
	align-items: start;
	gap: clamp(32px, 5vw, 64px);
}

@media (max-width: 900px) {

	.ab-root .ab-split,
	.ab-root .ab-split>.e-con-inner {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.ab-root .ab-portrait {
		max-width: 400px;
	}
}

@media (max-width: 760px) {

	.ab-root .ab-row--between,
	.ab-root .ab-row--between>.e-con-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
}

/* ---------- section rhythm ---------- */
.ab-root .ab-section {
	padding-block: var(--ab-section);
}

.ab-root .ab-section--tight {
	padding-block: clamp(40px, 6vw, 72px);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.ab-root .ab-hero {
	padding-block: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 80px);
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.ab-root .ab-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(1000px 460px at 78% -6%, color-mix(in srgb, var(--ab-accent) 11%, transparent), transparent 62%);
}

/* Availability pill.
   The styling sits on the <p> (not the widget div) so the pill hugs its text
   instead of stretching the full column width. */
.ab-root .ab-hero-badge p {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin: 0;
	gap: 9px;
	padding: 7px 14px 7px 8px;
	border-radius: 999px;
	border: 1px solid var(--ab-line);
	background: #fff;
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--ab-ink-soft);
}

.ab-root .ab-hero-badge strong {
	background: var(--ab-ink);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 999px;
	margin-right: 4px;
}

/* social proof row under the hero buttons */
.ab-root .ab-hero-proof {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 26px;
	border-top: 1px solid var(--ab-line);
	width: 100%;
}

.ab-root .ab-hero-proof p {
	font-size: 0.9rem;
	color: var(--ab-ink-soft);
	margin: 0;
}

.ab-root .ab-hero-proof b {
	color: var(--ab-ink);
	font-weight: 700;
}

.ab-root .ab-avatars {
	display: flex;
	flex: 0 0 auto;
}

.ab-root .ab-avatars i {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid var(--ab-bg);
	margin-left: -11px;
	display: grid;
	place-items: center;
	font-style: normal;
	font-size: 0.72rem;
	font-weight: 700;
	color: #fff;
}

.ab-root .ab-avatars i:first-child {
	margin-left: 0;
}

/* portrait */
.ab-root .ab-portrait {
	position: relative;
}

.ab-root .ab-portrait .elementor-widget-image img {
	aspect-ratio: 4 / 5;
	width: 100%;
	object-fit: cover;
	border-radius: var(--ab-radius-lg);
	border: 1px solid var(--ab-line);
	background: linear-gradient(160deg, color-mix(in srgb, var(--ab-accent) 22%, #fff) 0%, var(--ab-bg-alt) 55%, var(--ab-bg-alt) 100%);
	display: block;
}

/* floating "7+ yrs" card */
.ab-root .ab-portrait-card {
	position: absolute;
	left: -40px;
	bottom: 40px;
	z-index: 2;
	width: auto;
	background: #fff;
	border: 1px solid var(--ab-line);
	border-radius: 14px;
	padding: 14px 18px;
	box-shadow: 0 20px 44px -22px rgba(0, 0, 0, .32);
}

.ab-root .ab-portrait-card b {
	display: block;
	font-size: 1.5rem;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--ab-ink);
}

.ab-hero-proof {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 26px;
	border-top: 1px solid var(--ab-line);
}

.ab-root .ab-portrait-card span {
	font-size: 0.76rem;
	color: var(--ab-ink-soft);
}

.ab-root .ab-portrait-card p {
	margin: 0;
}

@media (max-width: 767px) {
	.ab-root .ab-portrait-card {
		left: 0;
		bottom: 12px;
	}
}

/* ==========================================================================
   LOGO STRIP
   ========================================================================== */
.ab-root .ab-strip {
	border-block: 1px solid var(--ab-line);
	padding-block: 26px;
}

.ab-root .ab-strip-label .elementor-heading-title,
.ab-root .ab-strip-label p {
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ab-ink-soft);
	text-align: center;
	font-weight: 600;
	margin: 0;
}

.ab-root .ab-strip-logos ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(24px, 5vw, 58px);
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ab-root .ab-strip-logos li {
	font-weight: 700;
	font-size: clamp(0.95rem, 1.5vw, 1.15rem);
	letter-spacing: -0.02em;
	color: var(--ab-ink);
	opacity: 0.42;
	transition: opacity 0.2s ease;
}

.ab-root .ab-strip-logos li:hover {
	opacity: 0.9;
}

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */
.ab-root .ab-head {
	max-width: 720px;
}

.ab-root .ab-head--wide {
	max-width: 860px;
}

/* ==========================================================================
   SERVICE CARDS  (container.ab-card > icon + heading + text)
   ========================================================================== */
.ab-root .ab-card {
	background: var(--ab-card);
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-radius);
	padding: 28px;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
	position: relative;
	overflow: hidden;
	height: 100%;
}

.ab-root .ab-card:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--ab-accent) 45%, var(--ab-line));
	box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.3);
}

.ab-root .ab-card p {
	font-size: 0.95rem;
	color: var(--ab-ink-soft);
	margin: 0;
}

/* the tinted icon tile */
.ab-root .ab-ico .elementor-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--ab-accent) 12%, transparent);
	color: var(--ab-accent);
	font-size: 21px;
}

.ab-root .ab-ico .elementor-icon svg,
.ab-root .ab-ico .elementor-icon i {
	width: 21px;
	height: 21px;
	fill: currentColor;
	color: var(--ab-accent);
}

.ab-root .ab-ico .elementor-icon-wrapper {
	text-align: left;
}

/* "Learn more →" pseudo-link */
.ab-root .ab-card-link .elementor-button {
	padding: 0;
	background: none;
	color: var(--ab-accent);
	font-size: 0.88rem;
	font-weight: 600;
	box-shadow: none;
	gap: 7px;
}

.ab-root .ab-card-link .elementor-button:hover {
	transform: none;
	color: var(--ab-accent);
}

.ab-root .ab-card:hover .ab-card-link .elementor-button-icon {
	transform: translateX(4px);
}

.ab-root .ab-card-link .elementor-button-icon {
	transition: transform 0.2s ease;
}

/* ==========================================================================
   CASE STUDY CARDS
   ========================================================================== */
.ab-root .ab-case {
	background: var(--ab-card);
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-radius);
	overflow: hidden;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
	height: 100%;
	padding: 0;
	/* Explicit rather than inherited from Elementor's container default: the
	   card is a two-part column (fixed top, growing body) and the body's
	   flex:1 below depends on this being a column. */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
}

.ab-root .ab-case:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.3);
}

/* The metric/tag header.
   Scoped as `.ab-case .ab-case-top` (specificity 0,3,0) so it beats the
   generic `.ab-row--between` primitive the container also carries — that one
   bottom-aligns its children, but the design needs the tag pinned to the top
   next to the big number. */
.ab-root .ab-case .ab-case-top {
	padding: 26px;
	background: var(--ab-bg-alt);
	border-bottom: 1px solid var(--ab-line);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
}

/* Children size to their content instead of stretching across the row. */
.ab-root .ab-case .ab-case-top > .elementor-widget {
	width: auto;
	max-width: 100%;
}

.ab-root .ab-case .ab-case-top > .ab-tag {
	flex: 0 0 auto;
}

/* Styled on the widget element itself — Elementor 4's `e_optimized_markup`
   experiment removes the .elementor-widget-container wrapper entirely, so any
   rule targeting it never matches. See the guard at the bottom of this file. */
.ab-root .ab-case-metric {
	font-size: clamp(2rem, 3.4vw, 2.7rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--ab-ink);
}

.ab-root .ab-case-metric p {
	margin: 0;
}

.ab-root .ab-case-metric small {
	display: block;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--ab-ink-soft);
	margin-top: 8px;
	line-height: 1.4;
}

.ab-root .ab-tag {
	display: inline-block;
	width: fit-content;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1.4;
	padding: 6px 11px;
	border-radius: 999px;
	background: var(--ab-ink);
	color: #fff;
}

.ab-root .ab-tag p {
	margin: 0;
}

/* `flex:1` makes the body absorb the card's spare height, which is what lets
   the stats row below pin to the bottom. Without it the three cards in the row
   put their stats at three different heights, because the descriptions differ
   in length. Overrides the `ab-stack` primitive's gap/alignment. */
.ab-root .ab-case .ab-case-body {
	padding: 26px;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.ab-root .ab-case-body p {
	font-size: 0.95rem;
	color: var(--ab-ink-soft);
	margin: 0;
}

/* margin-top:auto sits on the widget (the flex child), not on its inner
   container — that's the element the card's spare height pushes down. */
.ab-root .ab-case .ab-case-stats {
	margin-top: auto;
	width: 100%;
	display: flex;
	gap: 22px;
	padding-top: 22px;
}

.ab-root .ab-case-stats p {
	margin: 0;
	flex: 0 0 auto;
}

.ab-root .ab-case-stats b {
	display: block;
	font-size: 1.15rem;
	letter-spacing: -0.02em;
	color: var(--ab-ink);
}

.ab-root .ab-case-stats span {
	font-size: 0.76rem;
	color: var(--ab-ink-soft);
}

/* ==========================================================================
   VIDEO / YOUTUBE
   ========================================================================== */
.ab-root .ab-video-frame {
	aspect-ratio: 16 / 10;
	border-radius: var(--ab-radius-lg);
	border: 1px solid var(--ab-line);
	background: linear-gradient(150deg, var(--ab-ink), color-mix(in srgb, var(--ab-accent) 55%, var(--ab-ink)));
	display: grid;
	place-items: center;
	position: relative;
	overflow: hidden;
}

.ab-root .ab-video-frame .elementor-widget-video,
.ab-root .ab-video-frame .elementor-wrapper {
	width: 100%;
	height: 100%;
}

.ab-root .ab-video-frame iframe {
	border-radius: var(--ab-radius-lg);
}

/* checklist under the video copy */
.ab-root .ab-video-list .elementor-icon-list-item {
	align-items: flex-start;
}

.ab-root .ab-video-list .elementor-icon-list-text {
	font-size: 0.96rem;
	color: var(--ab-ink-soft);
}

.ab-root .ab-video-list .elementor-icon-list-icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--ab-accent) 14%, transparent);
	display: grid;
	place-items: center;
	margin-top: 2px;
}

.ab-root .ab-video-list .elementor-icon-list-icon svg,
.ab-root .ab-video-list .elementor-icon-list-icon i {
	width: 11px;
	height: 11px;
	font-size: 11px;
	fill: var(--ab-accent);
	color: var(--ab-accent);
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.ab-root .ab-quote {
	background: var(--ab-card);
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-radius);
	padding: 30px;
	height: 100%;
}

.ab-root .ab-quote p {
	font-size: 1rem;
	line-height: 1.62;
	color: var(--ab-ink);
	margin: 0;
}

.ab-root .ab-stars .elementor-star-rating {
	font-size: 15px;
	color: var(--ab-accent);
}

.ab-root .ab-stars .elementor-star-rating i.elementor-star-empty::before {
	color: var(--ab-line);
}

.ab-root .ab-quote-author {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 22px;
	border-top: 1px solid var(--ab-line);
	width: 100%;
	margin-top: auto;
}

.ab-root .ab-quote-author p {
	margin: 0;
}

.ab-root .ab-quote-author i {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	font-style: normal;
	font-weight: 700;
	font-size: 0.85rem;
}

.ab-root .ab-quote-author b {
	display: block;
	font-size: 0.92rem;
	color: var(--ab-ink);
}

.ab-root .ab-quote-author span {
	font-size: 0.8rem;
	color: var(--ab-ink-soft);
}

/* ==========================================================================
   DARK COMMUNITY BAND
   ========================================================================== */
.ab-root .ab-band {
	background: var(--ab-dark);
	color: var(--ab-dark-ink);
	position: relative;
	overflow: clip;
	isolation: isolate;
}

.ab-root .ab-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(760px 420px at 15% 0%, color-mix(in srgb, var(--ab-accent) 30%, transparent), transparent 65%);
}

.ab-root .ab-band .ab-h2,
.ab-root .ab-band .ab-h2 .elementor-heading-title {
	color: var(--ab-dark-ink);
}

.ab-root .ab-band .ab-eyebrow .elementor-heading-title {
	color: rgba(255, 255, 255, 0.6);
}

.ab-root .ab-band .ab-lead,
.ab-root .ab-band .ab-lead p {
	color: rgba(255, 255, 255, 0.66);
}

/* 2×2 stat grid with hairline dividers */
.ab-root .ab-band-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--ab-radius);
	overflow: hidden;
	padding: 0;
}

.ab-root .ab-band-stat {
	background: var(--ab-dark);
	padding: 26px;
	border-radius: 0;
}

.ab-root .ab-band-stat .elementor-counter-number-wrapper,
.ab-root .ab-band-stat b {
	display: block;
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	color: #fff;
}

.ab-root .ab-band-stat span,
.ab-root .ab-band-stat .elementor-counter-title {
	font-size: 0.83rem;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 8px;
	display: block;
	text-align: left;
	font-weight: 400;
}

.ab-root .ab-band-stat p {
	margin: 0;
}

/* ==========================================================================
   FAQ  (nested-accordion widget)
   ========================================================================== */
/* Drive Elementor's own custom properties rather than out-specifying its
   selectors. Its [open]-state rules run at specificity (0,5,2) — high enough
   that overriding them by hand means an arms race, and the icon `fill` in
   particular cannot be reached with `currentColor` because Elementor sets it
   directly on the <svg>.
   The selector below is (0,3,1): one element + three classes. That beats both
   the widget stylesheet (0,2,0) and the per-element rules Elementor writes
   into post-<id>.css (0,3,0), which is where its own defaults land. */
body.ab-root .ab-faq-list.elementor-widget-n-accordion {
	--n-accordion-padding: 22px 0;
	--n-accordion-border-width: 0;
	--n-accordion-border-radius: 0;
	--n-accordion-icon-gap: 0 20px;
	--n-accordion-title-justify-content: space-between;
	/* Elementor defaults this to -1, which renders the +/− to the LEFT of the
	   question. The design has it hard right. */
	--n-accordion-title-icon-order: 1;
	--n-accordion-title-font-size: clamp(1rem, 1.4vw, 1.1rem);
	--n-accordion-icon-size: 11px;
	--n-accordion-item-title-space-between: 0px;
	--n-accordion-item-title-distance-from-content: 0px;
	--n-accordion-title-normal-color: var(--ab-ink);
	--n-accordion-title-hover-color: var(--ab-accent);
	--n-accordion-title-active-color: var(--ab-ink);
	--n-accordion-icon-normal-color: var(--ab-ink);
	/* white, so the minus reads against the accent-filled circle when open */
	--n-accordion-icon-active-color: var(--ab-accent-ink);
}

.ab-root .ab-faq-list .e-n-accordion {
	border-top: 1px solid var(--ab-line);
}

.ab-root .ab-faq-list .e-n-accordion-item {
	border-bottom: 1px solid var(--ab-line);
	background: transparent;
}

/* Elementor centres the row; the design top-aligns it so the circle stays
   level with the first line of a two-line question. */
.ab-root .ab-faq-list .e-n-accordion-item-title {
	align-items: flex-start;
	background: transparent;
	transition: color 0.16s ease;
}

.ab-root .ab-faq-list .e-n-accordion-item-title:hover {
	color: var(--ab-accent);
}

.ab-root .ab-faq-list .e-n-accordion-item-title-text {
	font-weight: 600;
	font-size: clamp(1rem, 1.4vw, 1.1rem);
	letter-spacing: -0.015em;
	line-height: 1.35;
	color: inherit;
	margin: 0;
}

/* the +/− circle */
.ab-root .ab-faq-list .e-n-accordion-item-title-icon {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--ab-line);
	display: grid;
	place-items: center;
	margin-top: 1px;
	transition: background 0.22s ease, border-color 0.22s ease;
}

.ab-root .ab-faq-list .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon {
	background: var(--ab-accent);
	border-color: var(--ab-accent);
}

/* Elementor puts a 1px #d5d8dc border on the answer panel via a :where()
   rule. Zero specificity, but it still paints a grey box round every open
   answer until something says otherwise. */
.ab-root .ab-faq-list .e-n-accordion-item > .e-con {
	padding: 0;
	border: 0;
	border-radius: 0;
}

.ab-root .ab-faq-list .e-n-accordion-item p {
	padding-bottom: 24px;
	color: var(--ab-ink-soft);
	font-size: 0.98rem;
	max-width: 66ch;
	margin: 0;
}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.ab-root .ab-cta {
	text-align: center;
}

.ab-root .ab-cta .ab-h2 {
	max-width: 16ch;
	margin-inline: auto;
}

.ab-root .ab-cta .ab-lead {
	max-width: 52ch;
	margin-inline: auto;
}

.ab-root .ab-cta .ab-eyebrow .elementor-heading-title {
	justify-content: center;
}

/* ==========================================================================
   EDITOR SAFETY
   ==========================================================================
   Absolute/negative-offset pieces are unclickable in the Elementor canvas
   unless we relax them while editing. */
.elementor-editor-active .ab-root .ab-portrait-card,
.elementor-editor-preview .ab-portrait-card {
	position: relative;
	left: 0;
	bottom: 0;
	margin-top: -40px;
}

/* ==========================================================================
   MARKUP GUARD — read this before adding new component CSS
   ==========================================================================
   Elementor 4 ships the `e_optimized_markup` experiment ON by default, which
   REMOVES the `.elementor-widget-container` div that older Elementor tutorials
   (and Elementor's own older docs) tell you to target. On this site the widget
   element — `.ab-case-metric`, `.ab-tag`, `.ab-hero-proof` — is the direct
   parent of the content, so style THAT.

   Rules written against `.elementor-widget-container` will silently match
   nothing. It fails quietly, which is what makes it easy to lose an hour to.

   If that experiment is ever switched off (Elementor → Settings → Features),
   the wrapper returns and would become an unstyled box between the widget and
   its content. `display:contents` makes it transparent to layout, so the rules
   above keep working either way.
   ========================================================================== */
.ab-root .ab-hero-badge > .elementor-widget-container,
.ab-root .ab-hero-proof > .elementor-widget-container,
.ab-root .ab-portrait-card > .elementor-widget-container,
.ab-root .ab-case-metric > .elementor-widget-container,
.ab-root .ab-tag > .elementor-widget-container,
.ab-root .ab-case-stats > .elementor-widget-container,
.ab-root .ab-quote-author > .elementor-widget-container,
.ab-root .ab-btn > .elementor-widget-container {
	display: contents;
}