.primary-bg { background-color: #ebd8ca; }
.secondary-bg { background-color: #f5f4f2; }

:root {
    --color-brand-1__skin-dark: #e7b4a2;
    --color-brand-1__skin-light: #f2d1c5;
    --color-brand-2__green: #dad6cb;
    --color-brand-2__magenta: #bc7f9a;
    --color-brand-3__gold: #c18522;
    --color-gray__base: #ad9a88;
    --color-gray-1__darkest: #13100d;
    --color-gray-2__darker: #342c24;
    --color-gray-3__dark: #655545;
    --color-gray-4__light: #b8a898;
    --color-gray-5__lighter: #ded7cf;
    --color-gray-6__lightest: #f9f8f7;
    --color-black: #000;
}


/* ************************ */
/* INDEX  */
/* ************************ */

.table-feature {
	align-self: flex-start;
}

.table-row {
	display: flex;
	padding-bottom: .1rem;
	margin-bottom: .75rem;
	border-bottom: 1px solid goldenrod;
}
.cell-key,
.cell-value {
	flex: 6;
}
.cell-value {
	text-align: end;
}

/* ************************ */
/* SERVICES  */
/* ************************ */

.service-group {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-gap: 1rem;
	justify-content: center;
	width: 100%;
	margin: .5em auto .5em;
}

.service-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	background-color: #c6c4af77;
	padding: 1rem;
}

.service-item h4 { font-size: 1.15em; }

.service-item-list {
	text-align: left;
}

.service-item-action {
	color: inherit;
	border: none;
	background: none;
}

.service-item-action:focus {
	outline: none;
}

.call-out-box {
	padding: 1rem;
	background-color: #8f8681;
	color: #fff !important;
}

.site-footer {
    color: var(--color-gray-4__light);
    padding: 1rem 0;
    text-align: center;
    font-size: 0.9rem;
}
.footer-section > .page-row {
	border-top: 3px solid #efe1de;
	padding-top: 1.5em;
}
.social-icons {
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 3px solid #efe1de;
	padding-bottom: 1.5em;
	margin-bottom: 1.5em;
	column-gap: 1em;
}
.social-icon__img {
	height: 2rem;
	width: 2rem;
	fill: #c6c4af;
}

@media screen and (min-width: 40em) { 

	.service-group { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (min-width: 66em) { 

	.service-group { margin: 3em auto 3em;}
	.call-out-box {
		padding: 2rem;
	}
	.col-5 {grid-template-columns: repeat(5, 1fr);}
	.col-3 {grid-template-columns: repeat(3, 1fr);}
	.site-footer {
        padding: 2rem 0;
        font-size: 1rem;
    }
}
@media (pointer: fine) {
	.social-icon:hover .social-icon__img {
		fill: var(--color-black);
	}
}