/* Application service: process design. Shared header, contact and footer live in site.css. */
.page-process-design {
  --service-width: min(55.73vw, 1070px);
  --sticky-header-height: 84px;
}

.service-container { width: var(--service-width); margin-inline: auto; }

.service-hero {
  position: relative;
  height: 620px;
  padding-top: 120px;
  overflow: hidden;
  color: #fff;
  background: #96aebc;
}

.service-hero-image,
.service-hero-shade {
  position: absolute;
  inset: 120px 0 0;
  width: 100%;
  height: 500px;
}

.service-hero-image { object-fit: cover; object-position: center 52%; }
.service-hero-shade { background: rgba(0, 0, 0, .3); }
.service-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: min(72.92vw, 1400px);
  height: 500px;
  padding-top: 162px;
}
.service-hero h1 { margin: 0 0 12px; font-size: 30px; font-weight: 700; }
.service-hero p { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.65; }

.service-subnav {
  position: sticky;
  z-index: 40;
  top: var(--sticky-header-height);
  height: 63px;
  color: rgba(255, 255, 255, .6);
  background: var(--green);
  box-shadow: 0 8px 22px rgba(16, 46, 21, .14);
}

.service-subnav-inner { display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; width: var(--service-width); height: 100%; margin: auto; }
.service-subnav a { position: relative; display: grid; place-items: center; font-size: 16px; transition: color .2s ease, background .2s ease; }
.service-subnav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.service-subnav a.active { color: #fff; font-weight: 700; }

.process-intro { padding: 76px 0 104px; }
.process-eyebrow { margin: 0 0 10px; color: var(--green); text-align: center; font-size: 17px; font-weight: 500; }
.process-intro h2 { margin: 0; text-align: center; font-size: 30px; line-height: 1.4; }
.process-summary { width: min(1400px, 73vw); margin: 14px 50% 72px; color: #333; text-align: center; font-size: 16px; line-height: 2.5; transform: translateX(-50%); }
.process-summary.reveal { transform: translate(-50%, 44px); }
.process-summary.reveal.in-view { transform: translate(-50%, 0); }

.process-stage { margin-top: 40px; }
.process-stage + .process-stage { margin-top: 62px; }
.process-stage > h3 { height: 64px; margin: 0 0 20px; display: grid; place-items: center; color: #fff; background: var(--green); font-size: 20px; font-weight: 700; }
.process-stage > h3 span { margin-right: 8px; }
.process-grid { display: grid; gap: 20px 24px; }
.process-grid-two { grid-template-columns: repeat(2, 1fr); }
.process-grid-three { grid-template-columns: repeat(3, 1fr); }
.process-grid article { position: relative; min-height: 122px; padding: 19px 28px 18px; border: 1px solid var(--green); background: #fff; text-align: center; }
.process-grid h4 { margin: 0 0 8px; color: var(--green); font-size: 20px; font-weight: 700; line-height: 1.4; }
.process-grid p { margin: 0 auto; color: #333; font-size: 16px; line-height: 1.56; }

.process-connectors article:not(:last-child)::after {
  content: "›";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -19px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 28px;
  color: var(--green);
  background: #fff;
  font-size: 25px;
  line-height: 1;
  transform: translateY(-50%);
}

.process-grid-two article:nth-child(2)::after,
.process-grid-three article:nth-child(3n)::after { display: none; }
.process-grid-final article:nth-child(4) { grid-column: 1 / 2; transform: translateX(calc(50% + 12px)); }
.process-grid-final article:nth-child(5) { grid-column: 2 / 3; transform: translateX(calc(50% + 12px)); }

.page-process-design .contact-grid { display: flex; }

@media (max-width: 1500px) {
  .page-process-design { --service-width: min(72vw, 1070px); }
  .service-hero { height: 592px; padding-top: 92px; }
  .service-hero-image, .service-hero-shade { inset-block-start: 92px; }
}

@media (max-width: 1199.98px) {
  .page-process-design { --service-width: min(88vw, 920px); }
  .process-summary { width: var(--service-width); line-height: 2.1; }
  .process-grid article { padding-inline: 20px; }
  .process-grid h4 { font-size: 18px; }
  .process-grid p { font-size: 14px; }
}

@media (max-width: 760px) {
  .page-process-design { --service-width: calc(100vw - 36px); --sticky-header-height: 72px; }
  .service-hero { height: 430px; padding-top: 72px; }
  .service-hero-image, .service-hero-shade { inset-block-start: 72px; height: 358px; }
  .service-hero-image { object-position: 65% center; }
  .service-hero-content { justify-content: center; width: var(--service-width); height: 358px; padding-top: 0; }
  .service-hero h1 { font-size: 27px; }
  .service-hero p { font-size: 16px; }
  .service-subnav { height: 58px; overflow-x: auto; overflow-y: hidden; }
  .service-subnav-inner { grid-template-columns: repeat(5, 112px); width: max-content; min-width: 100%; }
  .service-subnav a { font-size: 14px; }
  .process-intro { padding: 58px 0 70px; }
  .process-intro h2 { font-size: 25px; }
  .process-summary { margin-bottom: 52px; font-size: 14px; line-height: 2; }
  .process-stage, .process-stage + .process-stage { margin-top: 44px; }
  .process-stage > h3 { height: 56px; font-size: 18px; }
  .process-grid, .process-grid-two, .process-grid-three { grid-template-columns: 1fr; gap: 14px; }
  .process-grid article { min-height: 112px; display: grid; align-content: center; }
  .process-grid-two article:nth-child(2)::after,
  .process-grid-three article:nth-child(3n)::after,
  .process-connectors article:not(:last-child)::after { display: none; }
  .process-grid-final article:nth-child(4),
  .process-grid-final article:nth-child(5) { grid-column: auto; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .process-summary.reveal, .process-summary.reveal.in-view { transform: translateX(-50%); }
}