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

body.seo-page .seo-approach { height: 721px; margin-top: 120px; }
body.seo-page .seo-approach .seo-intro h2 { width: 1080px; margin-top: 23px; }
body.seo-page .seo-approach .seo-intro > p:not(.eyebrow) { width: 970px; margin-top: 12px; }
body.seo-page .seo-approach .seo-intro > p + p { width: 926px; margin-top: 2px; }
body.seo-page .seo-approach__grid { display: grid; grid-template-columns: repeat(4, 325px); justify-content: space-between; gap: 20px; margin-top: 72px; }
body.seo-page .seo-approach__grid article { display: flex; height: 343px; flex-direction: column; align-items: flex-start; padding: 24px; border: 1px solid rgba(0,0,0,.2); background-color: #fff; background-image: var(--noise); }
body.seo-page .seo-approach__grid span { display: grid; width: 50px; height: 50px; flex: none; place-items: center; background: var(--wine); }
body.seo-page .seo-approach__grid span img { width: 32px; height: 32px; object-fit: contain; }
body.seo-page .seo-approach__grid h3 { max-width: none; margin: 35px 0 0; font-size: 32px; font-weight: 500; line-height: 32px; }
body.seo-page .seo-approach__grid p { width: 277px; margin: 26px 0 0; color: rgba(0,0,0,.55); font-size: 18px; line-height: 26px; }
body.seo-page .seo-industries { height: 529px; margin-top: 120px; }
body.seo-page .seo-industries .seo-intro h2 { width: 580px; margin-top: 31px; }
body.seo-page .seo-industries .seo-intro > p:not(.eyebrow) { width: 720px; margin-top: 21px; }
body.seo-page .seo-industries__grid { display: grid; grid-template-columns: repeat(4, 325px); justify-content: space-between; gap: 20px; margin-top: 67px; }
body.seo-page .seo-industries__grid article { height: 197px; padding: 24px; border: 1px solid rgba(0,0,0,.2); background-color: #fff; background-image: var(--noise); }
body.seo-page .seo-industries__grid h3 { margin: 0; font-size: 32px; font-weight: 500; line-height: 32px; }
body.seo-page .seo-industries__grid p { width: 277px; margin: 20px 0 0; color: rgba(0,0,0,.55); font-size: 18px; line-height: 26px; }
.seo-page .seo-approach { height: 721px; margin-top: 120px; }
.seo-page .seo-approach .seo-intro h2 { width: 1080px; margin-top: 23px; }
.seo-page .seo-approach .seo-intro > p:not(.eyebrow) { width: 970px; margin-top: 12px; }
.seo-page .seo-approach .seo-intro > p + p { width: 926px; margin-top: 2px; }
.seo-page .seo-approach__grid { display: grid; grid-template-columns: repeat(4, 325px); justify-content: space-between; gap: 20px; margin-top: 72px; }
.seo-page .seo-approach__grid article { display: flex; height: 343px; flex-direction: column; align-items: flex-start; padding: 24px; border: 1px solid rgba(0,0,0,.2); background-color: #fff; background-image: var(--noise); }
.seo-page .seo-approach__grid span { display: grid; width: 50px; height: 50px; flex: none; place-items: center; background: var(--wine); }
.seo-page .seo-approach__grid span img { width: 32px; height: 32px; object-fit: contain; }
.seo-page .seo-approach__grid h3 { max-width: none; margin: 35px 0 0; font-size: 32px; font-weight: 500; line-height: 32px; }
.seo-page .seo-approach__grid p { width: 277px; margin: 26px 0 0; color: rgba(0,0,0,.55); font-size: 18px; line-height: 26px; }
.seo-page .seo-industries { height: 529px; margin-top: 120px; }
.seo-page .seo-industries .seo-intro h2 { width: 580px; margin-top: 31px; }
.seo-page .seo-industries .seo-intro > p:not(.eyebrow) { width: 720px; margin-top: 21px; }
.seo-page .seo-industries__grid { display: grid; grid-template-columns: repeat(4, 325px); justify-content: space-between; gap: 20px; margin-top: 67px; }
.seo-page .seo-industries__grid article { height: 197px; padding: 24px; border: 1px solid rgba(0,0,0,.2); background-color: #fff; background-image: var(--noise); }
.seo-page .seo-industries__grid h3 { margin: 0; font-size: 32px; font-weight: 500; line-height: 32px; }
.seo-page .seo-industries__grid p { width: 277px; margin: 20px 0 0; color: rgba(0,0,0,.55); font-size: 18px; line-height: 26px; }

/* ---- pillars ------------------------------------------------------------
 * Measured off the Branding frame at 1440: a band 875 tall holding a centred
 * intro at 100 from its top and three 440 x 337 cards ending 100 above its
 * foot. The illustration leads each card rather than labelling it, so it sits
 * centred at the top instead of in the wine tile the SEO variants use. */

.brand-pillars {
	/* A floor, not a ceiling: at the Branding frame's own copy this is the
	   band's height, but the email-marketing variant's three-line card copy
	   and second row run past it. A fixed height let the next section's
	   background paint over the overflow instead of the band growing to
	   hold it. */
	min-height: 875px;
	padding-top: 100px;
	padding-bottom: 100px;
	background-color: var(--band);
	background-image: var(--noise);
}

.brand-pillars .seo-intro { text-align: center; }

.brand-pillars .seo-intro h2 {
	max-width: 430px;
	margin: 32px auto 0;
	font-size: 46px;
	font-weight: 600;
	line-height: 50px;
	letter-spacing: -.025em;
}

.brand-pillars .seo-intro h2 em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
}

.brand-pillars .seo-intro > p:not(.eyebrow) {
	max-width: 870px;
	margin: 32px auto 0;
	color: rgba(0, 0, 0, .58);
	font-size: 16px;
	line-height: 24px;
}

.brand-pillars__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 440px));
	justify-content: space-between;
	gap: 20px;
	margin-top: 80px;
}

.brand-pillars__grid article {
	display: flex;
	/* A floor, not a ceiling: the grid already stretches every card in a row to
	   the tallest, and copy that runs to a third line needs the room. */
	min-height: 337px;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px;
	border: 1px solid rgba(0, 0, 0, .08);
	background-color: #fff;
	background-image: linear-gradient(#fff, #f1f1f1), var(--noise);
}

/* The illustration is the card's lead, so it takes the full width and the
   title sits under it rather than beside it. */
.brand-pillars__grid span {
	display: grid;
	width: 100%;
	height: 150px;
	flex: none;
	place-items: center;
	margin-top: 8px;
}

.brand-pillars__grid span img {
	width: auto;
	max-width: 100%;
	max-height: 150px;
	object-fit: contain;
}

.brand-pillars__grid h3 {
	max-width: none;
	margin: 32px 0 0;
	font-size: 24px;
	font-weight: 500;
	line-height: 24px;
}

.brand-pillars__grid p {
	max-width: 392px;
	margin: 29px 0 0;
	color: rgba(0, 0, 0, .55);
	font-size: 16px;
	line-height: 24px;
}

/* The band sits 48 under the hero, and its cards 70 under the intro. */
body.branding-page .brand-pillars { margin-top: 48px; }
body.branding-page .brand-pillars__grid { margin-top: 70px; }

/* ---- social approach ----------------------------------------------------
 * Measured off the Social Media frame: a centred intro over illustrated cards
 * on the page paper. Like the pillars, the illustration leads the card rather
 * than labelling it, so it sits full-width at the top instead of in the wine
 * tile the SEO variants use. The look is stated once; the two frames' sizes
 * follow, desktop here and phone in responsive.css. */

.social-approach .seo-intro { text-align: center; }

.social-approach .seo-intro h2 {
	max-width: 100%;
	font-weight: 600;
	letter-spacing: normal;
}

/* The italic tail takes its own line, which is what the column and the break
   together produce. */
.social-approach .seo-intro h2 em {
	display: block;
	font-family: var(--font-serif);
	font-weight: 400;
	font-style: italic;
}

.social-approach__grid {
	display: grid;
	justify-content: space-between;
}

.social-approach__grid article {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border: 1px solid rgba(0, 0, 0, .1);
	background-color: #fff;
	background-image: var(--noise);
}

.social-approach__grid span {
	display: grid;
	width: 100%;
	flex: none;
	place-items: center;
}

.social-approach__grid span img {
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.social-approach__grid h3 { max-width: none; font-weight: 500; }

.social-approach__grid p { color: rgba(0, 0, 0, .5); }

@media (min-width: 901px) {
	/* The 1440 frame: four 325 x 411 cards in a 657 band, 120 under the ticker. */
	.social-approach { height: 657px; }
	.social-approach .seo-intro h2 { width: 523px; margin: 20px auto 0; font-size: 60px; line-height: 60px; }
	.social-approach__grid { grid-template-columns: repeat(4, minmax(0, 325px)); gap: 20px; margin-top: 76px; }
	.social-approach__grid article { height: 411px; padding: 24px; }
	.social-approach__grid span { height: 150px; margin-top: 16px; }
	.social-approach__grid span img { max-height: 150px; }
	.social-approach__grid h3 { margin: 48px 0 0; font-size: 32px; line-height: 32px; }
	.social-approach__grid p { width: 277px; margin: 19px 0 0; font-size: 18px; line-height: 26px; }

	body.social-media-marketing-page .social-approach { margin-top: 120px; }
}

/* Branding cards share the section texture without an extra gradient fill. */
body.branding-page .brand-pillars__grid article {
  background: transparent;
}