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

.digital-hero { height: 1009px; }
.digital-hero__copy { padding: 80px 80px 0; }
.digital-hero__copy h1 { width: 720px; margin: 31px 0 0; font-size: 80px; font-weight: 600; line-height: 80px; letter-spacing: -.055em; }
.digital-hero__copy h1 em { display: block; font-family: var(--font-serif); font-weight: 400; }
.digital-hero__copy > p:last-child { width: 720px; margin: 21px 0 0; color: rgba(0,0,0,.58); font-size: 18px; line-height: 28px; }
.digital-hero__visual { height: 461px; margin-top: 80px; padding-inline: 80px 86px; }
.digital-hero__visual img { width: 100%; height: 100%; object-fit: contain; object-position: left top; }
.hero { display: flex; flex-direction: column; margin-top: -92px; padding: 172px 0 0; overflow: hidden; background-color: var(--paper); background-image: var(--noise); }
.hero__dots { position: absolute; z-index: 0; top: 38.46px; left: 0; width: 100%; height: 329.63px; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(249,246,246,0)); -webkit-mask-image: url("../../assets/img/hero-dots.png"); mask-image: url("../../assets/img/hero-dots.png"); -webkit-mask-size: 586px 329.63px; mask-size: 586px 329.63px; -webkit-mask-position: 0 -38.46px; mask-position: 0 -38.46px; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; }
.hero__grid { position: absolute; z-index: 0; display: block; pointer-events: none; }
.hero__grid { top: 96px; left: 50%; width: 1440px; transform: translateX(-50%); }
.hero__grid img { width: 100%; height: auto; }
.hero__content { position: relative; z-index: 3; text-align: center; }
.hero__title { margin: 19px auto 0; font-family: var(--font-display); font-size: clamp(58px, 5.55vw, 80px); font-weight: 600; line-height: 1; text-transform: capitalize; }
.hero__title span, .hero__title em { display: block; }
.hero__title em { font-family: var(--font-serif); font-weight: 400; }
.hero__copy { max-width: 730px; margin: 12px auto 0; color: rgba(0,0,0,.6); font-size: 18px; line-height: 26px; }
.hero__actions { display: flex; justify-content: center; gap: 24px; margin-top: 57px; }
.hero .hero__visual { position: relative; z-index: 2; margin-top: 24px; padding-inline: 151px; }
.hero .hero__visual img { display: block; width: 100%; height: auto; }
/* The updated homepage has an art-directed team composition at each breakpoint. */
.hero.hero--team .hero__visual { width: 100%; max-width: var(--page-max); margin: 64px auto 0; padding: 0; }
.hero.hero--team .hero__visual picture { display: block; }
.hero.hero--team .hero__visual img { width: 100%; height: auto; aspect-ratio: 1440 / 525; object-fit: contain; }
body.digital-marketing-page .digital-hero__copy { padding-inline: 80px; }
body.digital-marketing-page .digital-hero__visual { position: absolute; top: 428px; right: 0; left: 0; margin-top: 0; padding-inline: 80px 86px; }
.digital-marketing-page .digital-hero__copy { padding-inline: 80px; }
.digital-marketing-page .digital-hero__visual { position: absolute; top: 428px; right: 0; left: 0; margin-top: 0; padding-inline: 80px 86px; }
.hero__visual img { display: block; width: 100%; height: auto; }
.hero__grid, .hero__curves { position: absolute; z-index: 0; display: block; pointer-events: none; }
.hero__grid img, .hero__curves img { width: 100%; height: auto; }
.service-rail { position: relative; z-index: 4; flex: none; padding: 36px 0 204px; background: transparent; }

/* ---- split hero ---------------------------------------------------------
 * Measured off the Branding frame at 1440: the copy column runs from the 80px
 * gutter to 762, the photograph is 564 x 611 against the right gutter, and the
 * section ends 763px below the header. */

.branding-hero {
	position: relative;
	min-height: 763px;
	overflow: hidden;
	background-color: var(--paper);
	background-image: var(--noise);
}

.branding-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	width: min(100%, var(--page-max));
	grid-template-columns: minmax(0, 682px) minmax(0, 564px);
	justify-content: space-between;
	margin-inline: auto;
	/* The copy stands 40 inside the left rule; the photograph runs to the right
	   one. Both are the frame's, and the 74 between the columns falls out of it. */
	padding: 80px var(--page-gutter) 0 calc(var(--page-gutter) * 2);
}

/* The copy starts lower than the photograph beside it. */
.branding-hero__copy { padding-top: 89px; }

.branding-hero__copy .eyebrow { margin: 0; }

.branding-hero__copy h1 {
	margin: 34px 0 0;
	font-family: var(--font-display);
	font-size: 80px;
	font-weight: 600;
	line-height: 67px;
	letter-spacing: -.04em;
}

.branding-hero__copy h1 em {
	display: block;
	font-family: var(--font-serif);
	font-weight: 400;
}

/* The eyebrow is a `p` too, so this has to say which one it means -- without
   the exclusion it repaints the pill and takes its coral away. */
.branding-hero__copy > p:not(.eyebrow) {
	max-width: 682px;
	margin: 32px 0 0;
	color: rgba(0, 0, 0, .58);
	font-size: 16px;
	line-height: 21.33px;
}

.branding-hero__actions {
	display: flex;
	gap: 24px;
	margin-top: 64px;
}

.branding-hero__actions .button--primary { width: 236px; }
.branding-hero__actions .button--secondary { width: 185px; }

.branding-hero__visual {
	width: 564px;
	max-width: 100%;
	height: 611px;
}

.branding-hero__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center top;
}

@media (min-width: 901px) {
	/* The SEO frame draws the same hero smaller: a 596 copy column beside a 655
	   report panel, both starting higher, and two buttons of one width. */
	body.seo-page .branding-hero { min-height: 719px; }
	body.seo-page .branding-hero__inner { grid-template-columns: minmax(0, 601px) minmax(0, 655px); padding-top: 60px; }
	body.seo-page .branding-hero__copy { padding-top: 95px; }
	body.seo-page .branding-hero__copy h1 { max-width: 596px; margin-top: 30px; }
	body.seo-page .branding-hero__copy h1 em { display: block; }
	body.seo-page .branding-hero__copy > p:not(.eyebrow) { max-width: 601px; margin-top: 32px; line-height: 20px; }
	body.seo-page .branding-hero__actions { margin-top: 64px; gap: 28px; }
	body.seo-page .branding-hero__actions .button--primary { width: 185px; }
	body.seo-page .branding-hero__visual { width: 655px; max-width: 100%; height: 579px; }

	/* The digital marketing frame's split hero: a wider copy column, the phones
	   set in from the right rule rather than against it. */
	body.digital-marketing-page .branding-hero { min-height: 620px; }
	body.digital-marketing-page .branding-hero__inner { grid-template-columns: minmax(0, 711px) minmax(0, 454px); padding: 50px 124px 0 80px; }
	body.digital-marketing-page .branding-hero__copy { padding-top: 57px; }
	body.digital-marketing-page .branding-hero__copy h1 { max-width: 711px; }
	body.digital-marketing-page .branding-hero__copy h1 em { display: block; }
	body.digital-marketing-page .branding-hero__copy > p:not(.eyebrow) { max-width: 627px; margin-top: 32px; line-height: 19px; }
	body.digital-marketing-page .branding-hero__actions { margin-top: 64px; gap: 28px; }
	body.digital-marketing-page .branding-hero__actions .button--primary { width: 185px; }
	body.digital-marketing-page .branding-hero__visual { width: 454px; max-width: 100%; height: 520px; }

	/* The website frame: a 711 copy column beside a 477 browser window, both 80
	   inside the rules, and the section closing where the ticker starts. */
	body.web-development-page .branding-hero { min-height: 548px; }
	body.web-development-page .branding-hero__inner { grid-template-columns: minmax(0, 711px) minmax(0, 477px); padding: 80px calc(var(--page-gutter) * 2) 0; }
	body.web-development-page .branding-hero__copy { padding-top: 0; }
	body.web-development-page .branding-hero__copy h1 { max-width: 711px; }
	body.web-development-page .branding-hero__copy h1 em { display: inline; line-height: 67px; }
	body.web-development-page .branding-hero__copy > p:not(.eyebrow) { max-width: 711px; margin-top: 32px; line-height: 19px; }
	body.web-development-page .branding-hero__actions { align-items: center; margin-top: 64px; gap: 24px; }
	body.web-development-page .branding-hero__actions .button--primary { width: 185px; }
	body.web-development-page .branding-hero__visual { width: 477px; max-width: 100%; height: 462px; margin-top: 5px; }
}

@media (min-width: 901px) {
	/* The Social Media frame's split hero: a 662 copy column beside the 350
	   profile window, which stops 157 short of the right rule rather than
	   running to it, and a section that closes where the ticker starts. */
	body.social-media-marketing-page .branding-hero { min-height: 652px; }
	body.social-media-marketing-page .branding-hero__inner { grid-template-columns: minmax(0, 662px) minmax(0, 350px); padding: 64px 157px 0 80px; }
	body.social-media-marketing-page .branding-hero__copy { padding-top: 16px; }
	body.social-media-marketing-page .branding-hero__copy .eyebrow { height: 32px; min-height: 32px; padding-inline: 21px; }
	body.social-media-marketing-page .branding-hero__copy h1 { max-width: 620px; margin-top: 15px; font-size: 80px; line-height: 80px; letter-spacing: normal; }
	/* The italic runs on from the upright text mid-line rather than starting
	   its own; the 620 column is what puts the break after "Brand". */
	body.social-media-marketing-page .branding-hero__copy h1 em { display: inline; }
	body.social-media-marketing-page .branding-hero__copy > p:not(.eyebrow) { max-width: 662px; margin-top: 15px; color: rgba(0,0,0,.6); font-size: 18px; line-height: 26px; }
	body.social-media-marketing-page .branding-hero__actions { margin-top: 58px; gap: 24px; }
	body.social-media-marketing-page .branding-hero__actions .button--primary,
	body.social-media-marketing-page .branding-hero__actions .button--secondary { width: 185px; }

	/* The window's chrome is furniture, not content: the image field holds the
	   profile screenshot on its own and the title bar above it is drawn here,
	   so the bar's hairline and radius stay crisp instead of being baked into
	   a raster. The three marks are the frame's own fills. */
	body.social-media-marketing-page .branding-hero__visual { position: relative; width: 350px; height: 588px; padding-top: 38px; }
	body.social-media-marketing-page .branding-hero__visual::before {
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
		left: 0;
		height: 38px;
		content: "";
		border: 1px solid rgba(0,0,0,.1);
		border-bottom: 0;
		border-radius: 13.6px 13.6px 0 0;
		background-color: #fff;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='9' viewBox='0 0 43 9'%3E%3Ccircle cx='4.24' cy='4.24' r='4.24' fill='%23CC5F54'/%3E%3Ccircle cx='21.21' cy='4.24' r='4.24' fill='%23D2A748'/%3E%3Ccircle cx='38.17' cy='4.24' r='4.24' fill='%2355AD4C'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: 14.9px center;
	}
	body.social-media-marketing-page .branding-hero__visual img { width: 350px; height: 550px; object-fit: cover; object-position: center top; }
}

@media (min-width: 901px) {
	/* The Email Marketing frame (211:13619): a 662 copy column and a 596x416 fan
	   of emails, both topping out at 172, so the copy's foot and the image's foot
	   land within 30 of each other. The italic runs on after "Email". */
	body.email-marketing-page .branding-hero { min-height: 576px; }
	body.email-marketing-page .branding-hero__inner { grid-template-columns: minmax(0, 662px) minmax(0, 596px); padding: 80px calc(var(--page-gutter) * 2) 0; }
	body.email-marketing-page .branding-hero__copy { padding-top: 0; }
	body.email-marketing-page .branding-hero__copy h1 { max-width: 635px; margin-top: 32px; }
	body.email-marketing-page .branding-hero__copy h1 em { display: inline; }
	body.email-marketing-page .branding-hero__copy > p:not(.eyebrow) { max-width: 630px; margin-top: 32px; line-height: 19px; }
	body.email-marketing-page .branding-hero__actions { margin-top: 64px; gap: 24px; }
	body.email-marketing-page .branding-hero__actions .button--primary { width: 223px; }
	body.email-marketing-page .branding-hero__visual { width: 596px; height: 416px; }
}

/* Share the homepage's original faint grid and paper texture across page heroes.
   Paint the entire section so stacked content cannot outgrow the artwork. */
.hero:not(.hero--team),
.branding-hero,
.digital-hero {
  background-color: var(--paper);
  background-image: var(--noise), url("../../assets/img/hero-artwork.png");
  background-size: auto, max(100%, 1440px) auto;
  background-position: 0 0, center top;
  background-repeat: repeat;
}
.branding-hero > .hero__grid, .hero:not(.hero--team) > .hero__grid { display: none; }