.card__service {
	--cut-w: 7.5rem;
	--cut-h: 11.3rem;
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 4rem 3rem;
	color: var(--color-charcoal-dark); }

.card__service--light { background: var(--color-gray); }
.card__service--green { background: var(--color-green); }
.card__service--dark { background: var(--color-charcoal); color: var(--color-white); }

.card__service:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: var(--cut-w);
	height: var(--cut-h);
	background: var(--color-charcoal-dark);
	clip-path: polygon(0 100%, 100% 100%, 100% 0); }

.card__service .eyebrow { margin-bottom: 1rem; }
.card__service .eyebrow span + span { margin-left: 1.2rem; padding-left: 1.2rem; border-left: 1px solid var(--color-charcoal-dark-tint); }
.card__service--dark .eyebrow span + span { border-color: rgba(255, 255, 255, .2); }

.card__service h3 { font-family: var(--font-mixta); font-size: 3.8rem; line-height: 1.15; margin-bottom: 4rem; padding-right: var(--cut-w); }
.card__service h4 { font-family: var(--font-titillium); font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.6rem; }

.card__service__intro { font-size: 2.2rem; line-height: 1.4; margin-bottom: 3.6rem; }

.card__service ul { list-style: none; margin: 0 0 3rem; padding: 0; font-size: 1.6rem; }
.card__service ul li { position: relative; margin: 0 0 .8rem; padding-left: 3.2rem; }
.card__service ul li:before {
	content: '';
	position: absolute;
	left: 0;
	top: .6rem;
	width: 1.5rem;
	height: .9rem;
	background: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.4375 6.4375L5.625 2.625L7.8125 0.5L15.3125 8L13.8125 9.5L-3.93403e-07 9.5L-2.59536e-07 6.4375L9.4375 6.4375Z' fill='%23202325'/%3E%3C/svg%3E%0A") no-repeat / contain; }
.card__service--dark ul li:before,
.card__service--dark .btn:after { filter: invert(1); }

.card__service .btn,
.card__service .btn:hover,
.card__service .btn:visited { color: inherit; border-color: currentColor; }
.card__service__cta { margin: auto 0 0; }

/* Min */
.card__service__min { --cut-w: 6rem; --cut-h: 5.6rem; padding: 3rem; }
.card__service__min h3 { margin-bottom: 3rem; }
.card__service__min .card__service__intro { font-size: 1.8rem; margin-bottom: 2.4rem; }
.card__service__min ul { font-size: 1.4rem; }

/* Expanded */
.card__service__expanded { --cut-w: 6rem; --cut-h: 5.6rem; padding: 3rem; }
.card__service__expanded .card__service__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 3rem; margin-bottom: 4rem; }
.card__service__expanded .card__service__head h3 { margin-bottom: 0; padding-right: 0; }
.card__service__expanded .card__service__head .card__service__cta { margin: 0; padding-right: calc(var(--cut-w) * .4); }
.card__service__expanded .card__service__body { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-bottom: 4rem; }
.card__service__expanded .card__service__intro { margin-bottom: 2rem; }
.card__service__desc { font-size: 1.4rem; line-height: 1.5; margin: 0; }
.card__service__image img { display: block; width: 100%; height: auto; }
.card__service__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding-top: 3rem; border-top: 1px solid var(--color-charcoal-dark-tint-light); margin-bottom: 1rem; }
.card__service__lists ul { font-size: 1.4rem; }
.card__service__questions li { padding-left: 0; }
.card__service__questions li:before { display: none; }
.card__service__signoff { font-weight: 700; }
.card__service__price { display: flex; justify-content: space-between; align-items: center; gap: 3rem; padding: 2.4rem 3rem; background: var(--color-charcoal-dark-tint-light); }
.card__service__amount { font-size: 2rem; font-weight: 700; margin: 0; }
.card__service__small { font-size: 1.2rem; margin: .4rem 0 0; }
.card__service__price .card__service__cta { margin: 0; }

@media (max-width: 700px) {
	.card__service__expanded .card__service__head,
	.card__service__expanded .card__service__price { flex-direction: column; align-items: flex-start; }
	.card__service__expanded .card__service__body,
	.card__service__lists { grid-template-columns: 1fr; }
}