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

body.seo-page .seo-expertise { height: 681px; margin-top: 120px; padding: 100px 0 0; }
body.seo-page .seo-expertise .web-section-intro h2 { width: 666px; margin: 24px auto 0; font-size: 60px; font-weight: 600; line-height: 60px; letter-spacing: normal; }
body.seo-page .seo-expertise .web-section-intro > p:last-child { margin-top: 12px; color: rgba(0,0,0,.6); font-size: 18px; line-height: 26px; }
body.seo-page .seo-expertise .expertise-grid { display: grid; width: 1278px; margin: 73px auto 0; padding: 0; grid-template-columns: repeat(3, 412.7px); gap: 20px; }
body.seo-page .seo-expertise .expertise-grid a { height: 84.8px; background: #fff; }
/* White unless the Style tab has been given a background to use. */
.web-expertise { min-height: 675px; margin-top: 122px; padding: 96px 0; border-block: 1px solid rgba(0,0,0,.1); }
.web-expertise:not([class*="is-bg-"]) { background: #fff; }
.web-expertise .web-section-intro h2 { max-width: 970px; }
.web-expertise .web-section-intro > p:last-child { max-width: 900px; margin-inline: auto; }
.expertise-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 80px; padding-inline: 80px; }
.expertise-grid a { display: flex; height: 85px; align-items: center; gap: 18px; padding: 20px 24px; border: 1px solid rgba(0,0,0,.1); background: #fff; transition: border-color var(--motion-base), transform var(--motion-base); }
.expertise-grid a:hover { border-color: rgba(72,12,8,.45); transform: translateY(-2px); }
.expertise-grid span { display: grid; width: 51px; height: 51px; flex: none; place-items: center; background: var(--wine); }
.expertise-grid span img { width: 24px; height: 24px; }
.expertise-grid strong { flex: 1; font-size: 18px; font-weight: 500; }
.expertise-grid i { display: grid; width: 32px; height: 32px; flex: none; place-items: center; border: 1px solid rgba(72,12,8,.16); border-radius: 50%; }
.expertise-grid i img { width: 11px; height: 9px; }
body.web-development-page .web-expertise .eyebrow { width: 160px; }
body.web-development-page .web-expertise h2 { width: 978px; }
body.web-development-page .web-expertise .web-section-intro > p:last-child { width: 946px; }
body.web-development-page .web-expertise { min-height: 0; margin: 0; padding: 100px 0 98px; border-block: 1px solid var(--wd-hair); background: #fff; }
body.web-development-page .expertise-grid { display: grid; width: min(100%, var(--wd-page)); margin: 72.7px auto 0; padding-inline: 81px; gap: 20px; grid-template-columns: repeat(3, 1fr); }
body.web-development-page .expertise-grid a { position: relative; display: block; height: 84.78px; padding: 0; border: 1px solid var(--wd-hair); background: #fff; }
body.web-development-page .expertise-grid span { position: absolute; top: 17.39px; left: 25.24px; display: grid; width: 50px; height: 50px; place-items: center; background: var(--wine); }
body.web-development-page .expertise-grid span img { width: 24px; height: 24px; }
body.web-development-page .expertise-grid strong { position: absolute; top: 50%; left: 93.57px; font-size: 18px; font-weight: 500; line-height: 26px; transform: translateY(-50%); }
body.web-development-page .expertise-grid i { position: absolute; top: 26.62px; left: 356.55px; display: grid; width: 31.55px; height: 31.55px; place-items: center; border: 1px solid rgba(72, 12, 8, .16); border-radius: 50%; }
body.web-development-page .expertise-grid i img { width: 10.84px; height: 8.87px; }
body.email-marketing-page .web-expertise { height: 681px; min-height: 681px; margin-top: 0; padding: 100px 0 0; }
body.email-marketing-page .web-expertise .web-section-intro h2 { width: 762px; max-width: none; margin: 24.1px auto 0; font-size: 60px; line-height: 60px; letter-spacing: normal; }
body.email-marketing-page .web-expertise .web-section-intro h2 em { display: block; font-family: var(--font-serif); font-weight: 400; font-style: italic; }
body.email-marketing-page .web-expertise .web-section-intro > p:last-child { width: 934px; max-width: none; margin: 17.5px auto 0; color: rgba(0,0,0,.6); font-size: 18px; line-height: 26px; }
body.email-marketing-page .expertise-grid { width: 1278px; margin: 72.4px auto 0; grid-template-columns: repeat(3,412.74px); justify-content: center; gap: 20px; padding-inline: 0; }
body.email-marketing-page .expertise-grid a { height: 84.78px; }
.seo-page .seo-expertise { height: 681px; margin-top: 120px; padding: 100px 0 0; }
.seo-page .seo-expertise .web-section-intro h2 { width: 666px; margin: 24px auto 0; font-size: 60px; font-weight: 600; line-height: 60px; letter-spacing: normal; }
.seo-page .seo-expertise .web-section-intro > p:last-child { margin-top: 12px; color: rgba(0,0,0,.6); font-size: 18px; line-height: 26px; }
.seo-page .seo-expertise .expertise-grid { display: grid; width: 1278px; margin: 73px auto 0; padding: 0; grid-template-columns: repeat(3, 412.7px); gap: 20px; }
.seo-page .seo-expertise .expertise-grid a { height: 84.8px; background: #fff; }
.web-development-page .web-expertise .eyebrow { width: 160px; }
.web-development-page .web-expertise h2 { width: 978px; }
.web-development-page .web-expertise .web-section-intro > p:last-child { width: 946px; }
.web-development-page .web-expertise { min-height: 0; margin: 0; padding: 100px 0 98px; border-block: 1px solid var(--wd-hair); background: #fff; }
.web-development-page .expertise-grid { display: grid; width: min(100%, var(--wd-page)); margin: 72.7px auto 0; padding-inline: 81px; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.web-development-page .expertise-grid a { position: relative; display: block; height: 84.78px; padding: 0; border: 1px solid var(--wd-hair); background: #fff; }
.web-development-page .expertise-grid span { position: absolute; top: 17.39px; left: 25.24px; display: grid; width: 50px; height: 50px; place-items: center; background: var(--wine); }
.web-development-page .expertise-grid span img { width: 24px; height: 24px; }
.web-development-page .expertise-grid strong { position: absolute; top: 50%; left: 93.57px; font-size: 18px; font-weight: 500; line-height: 26px; transform: translateY(-50%); }
.web-development-page .expertise-grid i { position: absolute; top: 26.62px; left: 356.55px; display: grid; width: 31.55px; height: 31.55px; place-items: center; border: 1px solid rgba(72, 12, 8, .16); border-radius: 50%; }
.web-development-page .expertise-grid i img { width: 10.84px; height: 8.87px; }
.email-marketing-page .web-expertise { height: 681px; min-height: 681px; margin-top: 0; padding: 100px 0 0; }
.email-marketing-page .web-expertise .web-section-intro h2 { width: 762px; max-width: none; margin: 24.1px auto 0; font-size: 60px; line-height: 60px; letter-spacing: normal; }
.email-marketing-page .web-expertise .web-section-intro h2 em { display: block; font-family: var(--font-serif); font-weight: 400; font-style: italic; }
.email-marketing-page .web-expertise .web-section-intro > p:last-child { width: 934px; max-width: none; margin: 17.5px auto 0; color: rgba(0,0,0,.6); font-size: 18px; line-height: 26px; }
.email-marketing-page .expertise-grid { width: 1278px; margin: 72.4px auto 0; grid-template-columns: repeat(3,412.74px); justify-content: center; gap: 20px; padding-inline: 0; }
.email-marketing-page .expertise-grid a { height: 84.78px; }

@media (min-width: 901px) {
	/* The Social Media frame draws the same white panel the email frame does, one
	   line shorter at 621, sitting straight on the foot of the process band. */
	body.social-media-marketing-page .web-expertise { height: 621px; min-height: 621px; margin-top: 0; padding: 100px 0 0; }
	body.social-media-marketing-page .web-expertise .web-section-intro h2 { width: 762px; max-width: none; margin: 20px auto 0; font-size: 60px; font-weight: 600; line-height: 60px; letter-spacing: normal; }
	/* One line here, italic tail and all, which is what the 762 column holds. */
	body.social-media-marketing-page .web-expertise .web-section-intro h2 em { display: inline; font-family: var(--font-serif); font-weight: 400; font-style: italic; }
	body.social-media-marketing-page .web-expertise .web-section-intro > p:last-child { width: 780px; max-width: none; margin: 22px auto 0; color: rgba(0,0,0,.6); font-size: 18px; line-height: 26px; }
	body.social-media-marketing-page .expertise-grid { width: 1278px; margin: 70px auto 0; grid-template-columns: repeat(3,412.74px); justify-content: center; gap: 20px; padding-inline: 0; }
	/* The tile is the website page's: its parts are placed off the frame rather
	   than flowed, which is what leaves "Website Design & Development" the room to
	   set on one line inside 412.74. */
	body.social-media-marketing-page .expertise-grid a { position: relative; display: block; height: 84.78px; padding: 0; }
	body.social-media-marketing-page .expertise-grid span { position: absolute; top: 17.39px; left: 25.24px; width: 50px; height: 50px; }
	body.social-media-marketing-page .expertise-grid strong { position: absolute; top: 50%; left: 93.57px; font-size: 18px; font-weight: 500; line-height: 26px; transform: translateY(-50%); }
	body.social-media-marketing-page .expertise-grid i { position: absolute; top: 26.62px; left: 356.55px; width: 31.55px; height: 31.55px; }
	body.social-media-marketing-page .expertise-grid i img { width: 10.84px; height: 8.87px; }
}

/* The Figma expertise surface is white paper with the shared texture overlay. */
body .web-expertise {
  background-color: #fff;
  background-image: var(--noise);
}
body .web-expertise.web-expertise { background-color: #fff; background-image: var(--noise); }