/* ==========================================================================
   Cards - the Fresh Ground card family, transcribed.

   Extracted verbatim from main.min.css:
     .blog-card-root__image-con  height 17.5rem, width 100%
     .blog-card-root__body       height calc(100% - 17.5rem), padding 1.25rem
     .blog-card-root             background var(--dark-bg) | --light -> #fff
     .link-card-root__title-con  background rgba(0,0,0,.5), padding 1.25rem
     .icon-text-card-root__icon  border-radius 50%, max-width 11.25rem, width 80%
     .lottie-card-root__svg      max-width 6.25rem, centred, margin-bottom .625rem
     .lottie-card-root__title    font-size 2rem, weight 700, margin-top 1.25rem
     .image-card-root__body      margin-top 1.25rem
     .point-card-root__bubble    border-radius 50%, width 80%, margin 0 auto 2.5rem
     .testimonial-card-root__person-title  .875rem / 1rem
     .card-tile                  flex row, overflow hidden
     .card-tile--title           #fff, 24px, max-width 400px

   Cards carry no border, no radius and no shadow - the band behind them does
   the separating. That restraint is the point; do not add chrome.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Blog card - image over body, dark or light
   -------------------------------------------------------------------------- */

.mx-blog-card {
	background-color: var(--mx-dark-bg);
	color: #fff;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
}

.mx-blog-card--light {
	background-color: #fff;
	color: var(--mx-text-body);
}

.mx-blog-card__media {
	height: var(--mx-card-media-h);
	overflow: hidden;
	width: 100%;
}

.mx-blog-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--mx-easing);
	width: 100%;
}

@media (hover: hover) {
	.mx-blog-card:hover .mx-blog-card__media img {
		transform: scale(1.045);
	}
}

.mx-blog-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: calc(100% - var(--mx-card-media-h));
	padding: var(--mx-card-pad);
}

.mx-blog-card__title {
	color: inherit;
	font-size: var(--mx-h3);
	margin-bottom: .625rem;
}

.mx-blog-card__excerpt {
	font-size: var(--mx-text-small);
	line-height: 1.45;
	margin-bottom: 1.25rem;
}

.mx-blog-card__cta {
	margin-top: auto;
}

.mx-blog-card__meta {
	font-size: var(--mx-text-xsmall);
	letter-spacing: .06em;
	margin-bottom: .5rem;
	opacity: .75;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Link card - image with the title in a translucent overlay strip
   -------------------------------------------------------------------------- */

.mx-link-card {
	background-color: var(--mx-white-bg);
	color: var(--mx-text-body);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	position: relative;
	text-decoration: none;
}

.mx-link-card--dark {
	background-color: var(--mx-dark-bg);
	color: #fff;
}

.mx-link-card__media {
	height: var(--mx-card-media-h);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.mx-link-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--mx-easing);
	width: 100%;
}

@media (hover: hover) {
	.mx-link-card:hover .mx-link-card__media img {
		transform: scale(1.045);
	}
}

.mx-link-card__title-con {
	background-color: var(--mx-overlay);
	bottom: 0;
	left: 0;
	padding: var(--mx-card-pad);
	position: absolute;
	right: 0;
	z-index: 2;
}

.mx-link-card__title {
	color: #fff;
	font-size: var(--mx-h3);
	margin: 0;
}

.mx-link-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--mx-card-pad);
}

.mx-link-card__text {
	font-size: var(--mx-text-small);
	line-height: 1.45;
	margin-bottom: 1.25rem;
}

.mx-link-card__cta {
	margin-top: auto;
}

/* --------------------------------------------------------------------------
   Icon-text card - circular icon over centred copy
   -------------------------------------------------------------------------- */

.mx-icon-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-align: center;
	text-decoration: none;
}

.mx-icon-card__icon {
	border-radius: 50%;
	margin: 0 auto 1.25rem;
	max-width: var(--mx-icon-bubble);
	overflow: hidden;
	position: relative;
	width: 80%;
}

.mx-icon-card__icon::before {
	content: "";
	display: block;
	padding-top: 100%;
}

.mx-icon-card__icon img,
.mx-icon-card__icon svg {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	transition: transform var(--mx-motion);
	width: 100%;
}

@media (hover: hover) {
	.mx-icon-card:hover .mx-icon-card__icon img {
		transform: scale(1.05);
	}
}

.mx-icon-card__title {
	font-size: var(--mx-h3);
	margin-bottom: .625rem;
}

.mx-icon-card__text {
	font-size: var(--mx-body);
	line-height: var(--mx-body-lh);
}

.mx-icon-card__cta {
	margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Lottie card - the pre-footer trio, present on every page
   -------------------------------------------------------------------------- */

.mx-lottie-card {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.mx-lottie-card__icon {
	margin: 0 auto .625rem;
	max-width: var(--mx-lottie-icon);
	position: relative;
	width: 100%;
}

.mx-lottie-card__icon svg,
.mx-lottie-card__icon img {
	display: block;
	height: auto;
	width: 100%;
}

.mx-lottie-card__title {
	font-family: var(--mx-font-heading);
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 0;
	margin-top: 1.25rem;
}

.mx-lottie-card__title--mb {
	margin-bottom: 1.875rem;
}

.mx-lottie-card__text {
	font-size: var(--mx-body);
	line-height: var(--mx-body-lh);
	margin-top: .625rem;
}

/* --------------------------------------------------------------------------
   Image card - plain image with copy beneath (campaign graphics)
   -------------------------------------------------------------------------- */

.mx-image-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.mx-image-card__media {
	overflow: hidden;
}

.mx-image-card__media img {
	display: block;
	height: auto;
	transition: transform .6s var(--mx-easing);
	width: 100%;
}

@media (hover: hover) {
	.mx-image-card:hover .mx-image-card__media img {
		transform: scale(1.03);
	}
}

.mx-image-card__body {
	margin-top: 1.25rem;
}

.mx-image-card__title {
	font-size: var(--mx-h4);
	margin-bottom: .375rem;
}

.mx-image-card__text {
	font-size: var(--mx-text-small);
	line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Text card - no media. Used for pricing tiers and result figures.
   -------------------------------------------------------------------------- */

.mx-text-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.mx-text-card__eyebrow {
	color: var(--mx-grey-01);
	font-size: var(--mx-text-xsmall);
	font-weight: 700;
	letter-spacing: .1em;
	margin-bottom: .75rem;
	text-transform: uppercase;
}

.mx-text-card__title {
	font-size: var(--mx-h3);
	margin-bottom: .625rem;
}

.mx-text-card__figure {
	font-family: var(--mx-font-heading);
	font-size: clamp(2rem, 4vw, 3rem);
	letter-spacing: var(--mx-heading-track);
	line-height: 1.05;
	margin-bottom: .5rem;
}

.mx-text-card__text {
	font-size: var(--mx-body);
	line-height: var(--mx-body-lh);
}

.mx-text-card__list {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.mx-text-card__list li {
	border-top: 1px solid var(--mx-hairline);
	font-size: var(--mx-text-small);
	line-height: 1.45;
	padding: .75rem 0;
}

.mx-text-card__cta {
	margin-top: auto;
	padding-top: 1.875rem;
}

/* --------------------------------------------------------------------------
   Text card stack - stacked rows separated by hairlines
   -------------------------------------------------------------------------- */

.mx-text-stack {
	display: flex;
	flex-direction: column;
}

.mx-text-stack__item {
	border-bottom: 1px solid var(--mx-hairline);
	padding: 1.875rem 0;
}

.mx-text-stack__item:first-child {
	padding-top: 0;
}

.mx-text-stack__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.mx-text-stack__title {
	font-size: var(--mx-h4);
	margin-bottom: .5rem;
}

/* --------------------------------------------------------------------------
   Testimonial card
   -------------------------------------------------------------------------- */

.mx-testimonial {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.mx-testimonial__quote {
	font-family: var(--mx-font-heading);
	font-size: var(--mx-h3);
	letter-spacing: var(--mx-heading-track);
	line-height: 1.3;
	margin-bottom: 1.875rem;
}

.mx-testimonial__person {
	align-items: center;
	display: flex;
	gap: .875rem;
	margin-top: auto;
}

.mx-testimonial__avatar {
	border-radius: 50%;
	flex-shrink: 0;
	height: 3.5rem;
	object-fit: cover;
	width: 3.5rem;
}

.mx-testimonial__person-name {
	font-size: var(--mx-body);
	font-weight: 700;
	line-height: 1.2;
}

.mx-testimonial__person-title {
	color: var(--mx-text-title);
	font-size: var(--mx-text-small);
	line-height: var(--mx-text-small-lh);
}

.mx-typography--light .mx-testimonial__person-title,
.mx-block--dark .mx-testimonial__person-title,
.mx-block--black .mx-testimonial__person-title {
	color: rgba(255, 255, 255, .8);
}

/* --------------------------------------------------------------------------
   Card tile - horizontal tile with an overlaid title
   -------------------------------------------------------------------------- */

.mx-card-tile {
	display: flex;
	flex-direction: row;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	z-index: 1;
}

.mx-card-tile__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--mx-card-pad);
	position: relative;
	z-index: 2;
}

.mx-card-tile__title {
	color: #fff;
	flex: 1 1 auto;
	font-size: 24px;
	margin: 0;
	max-width: 400px;
}

/* --------------------------------------------------------------------------
   Point card - circular bubble over copy
   -------------------------------------------------------------------------- */

.mx-point-card__bubble {
	border-radius: 50%;
	margin: 0 auto 2.5rem;
	overflow: hidden;
	position: relative;
	width: 80%;
}

.mx-point-card__bubble::before {
	content: "";
	display: block;
	padding-top: 100%;
}

.mx-point-card__bubble img {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
}

/* ==========================================================================
   Span-based card internals.

   Whole-card links wrap their contents in one <a>, which means the internals
   are spans rather than headings and divs. That is deliberate - it keeps the
   entire card clickable without nesting interactive elements, and it avoids
   emitting a heading for every card in a grid, which would wreck the document
   outline on a page with a dozen of them.

   The cost is that spans inherit neither the display mode nor the heading
   face, so both are restored here.
   ========================================================================== */

.mx-blog-card__media,
.mx-link-card__media,
.mx-image-card__media,
.mx-icon-card__icon,
.mx-blog-card__meta,
.mx-blog-card__excerpt,
.mx-link-card__text,
.mx-blog-card__cta,
.mx-link-card__cta,
.mx-icon-card__cta,
.mx-text-card__cta {
	display: block;
}

.mx-blog-card__body,
.mx-link-card__body {
	display: flex;
}

.mx-blog-card__title,
.mx-link-card__title,
.mx-icon-card__title,
.mx-image-card__title,
.mx-text-card__title,
.mx-text-stack__title,
.mx-card-tile__title {
	display: block;
	font-family: var(--mx-font-heading);
	font-weight: var(--mx-heading-weight);
	letter-spacing: var(--mx-heading-track);
	line-height: 1.2;
}

/* Whole-card links carry no underline; the title is the affordance. */
a.mx-blog-card,
a.mx-link-card,
a.mx-icon-card,
a.mx-image-card,
a.mx-text-card,
a.mx-card-tile {
	text-decoration: none;
}

a.mx-blog-card:focus-visible,
a.mx-link-card:focus-visible,
a.mx-icon-card:focus-visible,
a.mx-image-card:focus-visible,
a.mx-text-card:focus-visible,
a.mx-card-tile:focus-visible {
	box-shadow: var(--mx-focus-ring);
	outline: none;
}

.mx-block--dark a:focus-visible,
.mx-block--black a:focus-visible {
	box-shadow: var(--mx-focus-ring-dark);
}