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

.process-section .rail-ticks { top: 396px; }
.process-section { position: relative; min-height: 730px; padding-top: 125px; border-block: 1px solid rgba(0,0,0,.1); background-color: var(--paper); background-image: var(--noise); }
.process-cells { position: absolute; z-index: 0; top: 0; bottom: 0; left: var(--rail-left); right: var(--rail-right); pointer-events: none; }
.process-cells i { position: absolute; display: block; }
.process-cells__top, .process-cells__bottom { left: 0; right: 0; height: 80px; background: repeating-linear-gradient(to right, transparent 0 79px, rgba(0,0,0,.1) 79px 80px); }
.process-cells__top { top: 0; border-bottom: 1px solid rgba(0,0,0,.1); }
.process-cells__bottom { top: 320px; border-top: 1px solid rgba(0,0,0,.1); }
.process-cells__left, .process-cells__right { top: 80px; width: 80px; height: 240px; background: repeating-linear-gradient(to bottom, transparent 0 79px, rgba(0,0,0,.1) 79px 80px); }
.process-cells__left { left: 0; border-right: 1px solid rgba(0,0,0,.1); }
.process-cells__right { right: 0; border-left: 1px solid rgba(0,0,0,.1); }
.process-section .section-intro h2 { margin-top: 54px; }
.process-section .section-intro > p:last-of-type:not(.eyebrow):not(.eyebrow) { margin-top: 12px; color: rgba(0,0,0,.6); font-size: 18px; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 89px; }
.process-card { position: relative; height: 328px; padding: 31px 20px 28px 39.5px; border-top: 1px solid rgba(0,0,0,.1); border-left: 1px solid rgba(0,0,0,.1); background: rgba(255,255,255,.05); backdrop-filter: blur(10px); overflow: hidden; }
.process-card__number { display: block; color: var(--wine); font-size: 80px; font-weight: 600; line-height: 80px; text-transform: capitalize; }
.process-card h3 { max-width: 210px; margin: 35px 0 0; font-size: 32px; font-weight: 500; line-height: 32px; text-transform: capitalize; }
.process-card p { max-width: 260px; margin: 26px 0 0; color: rgba(0,0,0,.6); font-size: 18px; line-height: 26px; }
.process-card__shapes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.process-card__shapes i { position: absolute; display: block; background: var(--coral); }
.process-card--1 .process-card__shapes i:nth-child(1) { left: 307px; top: -1px; width: 32.13px; height: 32.13px; }
.process-card--2 .process-card__shapes i:nth-child(1) { left: 268px; top: -27px; width: 48px; height: 48px; }
.process-card--2 .process-card__shapes i:nth-child(2) { left: 316.26px; top: 21.26px; width: 31px; height: 31px; }
.process-card--3 .process-card__shapes i { transform: rotate(38.77deg); }
.process-card--3 .process-card__shapes i:nth-child(1) { left: 270.74px; top: -34.26px; width: 48px; height: 48px; }
.process-card--3 .process-card__shapes i:nth-child(2) { left: 285.3px; top: 29.77px; width: 31px; height: 31px; }
.process-card--3 .process-card__shapes i:nth-child(3) { left: 328.88px; top: 25.02px; width: 31px; height: 31px; }
.process-card--4 .process-card__shapes i:nth-child(1) { left: 251px; top: -20px; width: 48px; height: 48px; }
.process-card--4 .process-card__shapes i:nth-child(2) { left: 299px; top: 28px; width: 31px; height: 31px; }
.process-card--4 .process-card__shapes i:nth-child(3) { left: 330px; top: 59px; width: 20px; height: 20px; }
.process-card--4 .process-card__shapes i:nth-child(4) { left: 330px; top: -3px; width: 31px; height: 31px; }
body.email-marketing-page .process-section { margin-top: 0; }
.email-marketing-page .process-section { margin-top: 0; }

/* The digital marketing frame stands this 120 clear of the results above it. */
body.digital-marketing-page .process-section { margin-top: 120px; }

/* This page breaks a shared intro before its italic tail; the frame sets this
   heading on one line, the same as every other page carrying it. */
body.web-development-page .process-section .section-intro h2 em { display: inline; }

@media (min-width: 901px) {
	/* The Social Media frame stands the four steps 120 clear of the results above
	   them, and sets this heading on one line as the home page does. */
	body.social-media-marketing-page .process-section { margin-top: 120px; }
	body.social-media-marketing-page .process-section .section-intro h2 { margin-top: 19px; }
	body.social-media-marketing-page .process-section .section-intro > p:last-of-type:not(.eyebrow):not(.eyebrow) { margin-top: 18px; }
	body.social-media-marketing-page .process-section .section-intro h2 em { display: inline; }
	body.social-media-marketing-page .process-grid { margin-top: 118px; }
}