/* feature-grid breakpoints, loaded after the shared ones. */

@media (max-width: 1100px) {
  body.seo-page .seo-approach { height: 1061px; margin-top: 80px; }
  body.seo-page .seo-approach .seo-intro { width: 334px; padding: 0; }
  body.seo-page .seo-approach .seo-intro h2 { width: 334px; }
  body.seo-page .seo-approach .seo-intro > p:not(.eyebrow), body.seo-page .seo-approach .seo-intro > p + p { width: 334px; }
  body.seo-page .seo-approach__grid { grid-template-columns: repeat(2, minmax(0, 183px)); justify-content: center; gap: 16px; margin-top: 45px; padding: 0; }
  body.seo-page .seo-approach__grid article { height: 318px; padding: 20px; }
  body.seo-page .seo-approach__grid span { width: 42px; height: 42px; }
  body.seo-page .seo-approach__grid span img { width: 26px; height: 26px; }
  body.seo-page .seo-approach__grid h3 { margin-top: 30px; font-size: 21px; line-height: 20px; }
  body.seo-page .seo-approach__grid p { width: 143px; margin-top: 18px; font-size: 14px; line-height: 20px; }
  body.seo-page .seo-industries { height: 615px; margin-top: 80px; }
  body.seo-page .seo-industries .seo-intro { width: 362px; padding: 0; }
  body.seo-page .seo-industries .seo-intro h2 { width: 330px; }
  body.seo-page .seo-industries .seo-intro > p:not(.eyebrow) { width: 362px; }
  body.seo-page .seo-industries__grid { grid-template-columns: repeat(2, minmax(0, 183px)); justify-content: center; gap: 16px; margin-top: 27px; padding: 0; }
  body.seo-page .seo-industries__grid article { height: 178px; padding: 16px; }
  body.seo-page .seo-industries__grid h3 { font-size: 21px; line-height: 22px; }
  body.seo-page .seo-industries__grid p { width: auto; margin-top: 20px; font-size: 14px; line-height: 20px; }
}

@media (max-width: 900px) {
	/* One pillar a row, each sized to its own copy. */
	body.branding-page .brand-pillars { height: auto; margin-top: 0; padding: 60px 24px; }
	body.branding-page .brand-pillars__grid { margin-top: 40px; }
	.brand-pillars .seo-intro h2 { max-width: none; margin-top: 24px; font-size: 32px; line-height: 34px; }
	.brand-pillars .seo-intro > p:not(.eyebrow) { margin-top: 20px; }
	.brand-pillars__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
	.brand-pillars__grid article { min-height: 0; }
	.brand-pillars__grid span { height: 130px; }
	.brand-pillars__grid span img { max-height: 130px; }
	.brand-pillars__grid h3 { margin-top: 24px; }
}

@media (max-width: 390px) {
	.brand-pillars { padding-inline: 16px; }
}

@media (max-width: 900px) {
	/* The phone frame sets the four approach cards two to a row, 183 wide, on
	   the 16px gutter. */
	body.social-media-marketing-page .social-approach { height: auto; margin-top: 80px; }
	body.social-media-marketing-page .social-approach .seo-intro { width: 382px; max-width: 100%; margin-inline: auto; padding: 0; }
	body.social-media-marketing-page .social-approach .seo-intro h2 { width: auto; margin-top: 32px; font-size: 32px; line-height: 32px; }
	body.social-media-marketing-page .social-approach__grid { grid-template-columns: repeat(2, minmax(0, 183px)); justify-content: center; gap: 16px; margin-top: 29px; padding-inline: 16px; }
	/* The frame draws 266; our copy runs a line longer at this measure, so the
	   card takes 266 as a floor rather than a ceiling and never clips it. */
	body.social-media-marketing-page .social-approach__grid article { height: auto; min-height: 266px; padding: 16px; }
	body.social-media-marketing-page .social-approach__grid span { height: 78px; margin-top: 0; }
	body.social-media-marketing-page .social-approach__grid span img { max-height: 78px; }
	body.social-media-marketing-page .social-approach__grid h3 { margin-top: 22px; font-size: 20px; line-height: 20px; }
	body.social-media-marketing-page .social-approach__grid p { width: auto; margin-top: 14px; font-size: 14px; line-height: 22px; }
}

@media (max-width: 413px) {
  /* Keep the 414px composition while allowing smaller phones and longer copy. */
  body.seo-page .seo-approach, body.seo-page .seo-industries { height: auto; }
  body.seo-page .seo-approach .seo-intro, body.seo-page .seo-industries .seo-intro { max-width: calc(100% - 32px); }
  body.seo-page .seo-intro h2, body.seo-page .seo-intro > p { max-width: 100%; }
  body.seo-page .seo-approach__grid article { height: auto; min-height: 318px; }
  body.seo-page .seo-industries__grid article { height: auto; min-height: 178px; }
  body.seo-page .seo-approach__grid p { width: 100%; }
  body.seo-page .seo-approach__grid article, body.seo-page .seo-industries__grid article,
  body.social-media-marketing-page .social-approach__grid article { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 413px) {
  body.seo-page .seo-industries .seo-intro > p:not(.eyebrow) { max-width: 100%; }
}