/* service-cards — merged from the static build's app.css, source order preserved. */

body.seo-page .seo-services { height: 1447px; margin-top: 120px; padding-top: 100px; }
body.seo-page .seo-services .seo-intro h2 { width: 580px; margin-top: 30px; }
body.seo-page .seo-services .seo-intro > p:not(.eyebrow) { width: 640px; margin-top: 14px; }
body.seo-page .seo-service-rail { width: 100%; margin-top: 72px; overflow: hidden; }
body.seo-page .seo-service-grid { display: grid; width: 1360px; margin: 0 auto; grid-template-columns: repeat(3, 440px); gap: 20px; }
body.seo-page .seo-service-card { display: flex; height: 397px; flex-direction: column; align-items: flex-start; padding: 32px 24px; background: var(--wine); color: #fff; }
body.seo-page .seo-service-card > span { display: grid; width: 50px; height: 50px; flex: none; place-items: center; border-radius: 50%; background: #fff; }
body.seo-page .seo-service-card > span img { width: 32px; height: 32px; object-fit: contain; }
body.seo-page .seo-service-card h3 { margin: 27px 0 0; font-size: 32px; font-weight: 500; line-height: 32px; }
body.seo-page .seo-service-card p { width: 392px; margin: 12px 0 0; color: rgba(255,255,255,.62); font-size: 18px; line-height: 26px; }
body.seo-page .seo-service-card div { display: flex; width: 300px; flex-wrap: wrap; gap: 6px; margin-top: 32px; }
body.seo-page .seo-service-card small { display: inline-flex; height: 35px; align-items: center; padding: 0 15px; border: 0; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: 14px; line-height: 17px; }
body.seo-page .seo-services__cta { display: flex; width: 272px; min-width: 272px; margin: 55px auto 0; }
.seo-page .seo-services { height: 1447px; margin-top: 120px; padding-top: 100px; }
.seo-page .seo-services .seo-intro h2 { width: 580px; margin-top: 30px; }
.seo-page .seo-services .seo-intro > p:not(.eyebrow) { width: 640px; margin-top: 14px; }
.seo-page .seo-service-rail { width: 100%; margin-top: 72px; overflow: hidden; }
.seo-page .seo-service-grid { display: grid; width: 1360px; margin: 0 auto; grid-template-columns: repeat(3, 440px); gap: 20px; }
.seo-page .seo-service-card { display: flex; height: 397px; flex-direction: column; align-items: flex-start; padding: 32px 24px; background: var(--wine); color: #fff; }
.seo-page .seo-service-card > span { display: grid; width: 50px; height: 50px; flex: none; place-items: center; border-radius: 50%; background: #fff; }
.seo-page .seo-service-card > span img { width: 32px; height: 32px; object-fit: contain; }
.seo-page .seo-service-card h3 { margin: 27px 0 0; font-size: 32px; font-weight: 500; line-height: 32px; }
.seo-page .seo-service-card p { width: 392px; margin: 12px 0 0; color: rgba(255,255,255,.62); font-size: 18px; line-height: 26px; }
.seo-page .seo-service-card div { display: flex; width: 300px; flex-wrap: wrap; gap: 6px; margin-top: 32px; }
.seo-page .seo-service-card small { display: inline-flex; height: 35px; align-items: center; padding: 0 15px; border: 0; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: 14px; line-height: 17px; }
.seo-page .seo-services__cta { display: flex; width: 272px; min-width: 272px; margin: 55px auto 0; }

/* ---- white cards --------------------------------------------------------
 * The same card turned over: white ground, dark type, and the icon disc and
 * tags carrying the coral rather than standing out of the wine. */

.seo-services.seo-services--light .seo-service-card {
	background: #fff;
	color: var(--ink);
}

.seo-services.seo-services--light .seo-service-card > span {
	background: rgba(232, 71, 59, .08);
}

.seo-services.seo-services--light .seo-service-card p {
	color: rgba(0, 0, 0, .58);
}

.seo-services.seo-services--light .seo-service-card small {
	background: rgba(232, 71, 59, .08);
	color: var(--coral);
}

/* Carousel cards cover the section rails as they pass across them. */
.seo-services .seo-service-rail { position: relative; z-index: 3; }