/* About / How We Work — content flows as text and pillars are edited. */
.page--about { height: auto; }

.wash { position: absolute; left: 0; top: 446px; width: 1440px; height: 856px; overflow: hidden; mix-blend-mode: luminosity; pointer-events: none; }
.wash img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.wash::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 80%, #fff 100%); }

/* Hero banner */
.banner { position: relative; width: 1440px; min-height: 448px; padding: 172px 112px 108px 76px; display: grid; grid-template-columns: 548px 493px; column-gap: 211px; align-items: center; overflow: hidden; background: var(--navy); color: var(--white); }
.banner__lines { position: absolute; width: 720px; height: 1616px; pointer-events: none; }
.banner__lines--r { left: 720px; top: -564px; }
.banner__lines--l { left: 0; top: -604px; }
.banner__title { position: relative; font-size: 56px; line-height: 1; font-weight: 500; text-transform: capitalize; overflow-wrap: anywhere; }
.banner__sub { position: relative; font-size: 24px; line-height: 28px; color: var(--steel); white-space: pre-line; overflow-wrap: anywhere; }
.banner__corner { position: absolute; width: 44px; height: 44px; pointer-events: none; }
.banner__corner--tl { left: 0; top: 0; transform: rotate(90deg); }
.banner__corner--tr { right: 0; top: 0; transform: rotate(180deg); }
.banner__corner--bl { left: 0; bottom: 0; }
.banner__corner--br { right: 0; bottom: 0; transform: rotate(-90deg); }
.banner__rule { position: absolute; background: var(--white); pointer-events: none; }
.banner__rule--top { left: 44px; top: 4px; width: 1352px; height: 1px; }
.banner__rule--bottom { left: 44px; bottom: 4px; width: 1352px; height: 1px; }
.banner__rule--left { left: 4px; top: 0; width: 1px; height: 100%; }
.banner__rule--right { right: 4px; top: 0; width: 1px; height: 100%; }
.banner__notch { position: absolute; left: 692px; width: 56px; height: 4px; background: var(--white); pointer-events: none; }
.banner__notch--top { top: 0; }
.banner__notch--bottom { bottom: 0; }

/* Pillars */
.how { position: relative; padding: 186px 76px 76px; }
.ghost-title { font-size: 180px; line-height: 1; text-transform: capitalize; text-align: center; overflow-wrap: anywhere; color: transparent; opacity: .12; background: var(--ghost-gradient-gray); -webkit-background-clip: text; background-clip: text; }
.how__intro { position: relative; max-width: 1264px; margin: -48px auto 0; font-size: 24px; line-height: 1; text-align: center; color: var(--black); white-space: pre-line; overflow-wrap: anywhere; }
.how__pillars { display: grid; grid-template-columns: repeat(var(--pillar-columns, 4), minmax(0, 1fr)); row-gap: 32px; margin-top: 32px; }
.pillar-step { min-width: 0; min-height: 248px; padding: 36px 24px 24px; text-align: center; color: var(--black); overflow-wrap: anywhere; }
.pillar-step + .pillar-step { border-left: 1px dashed rgba(0,0,0,.32); }
.pillar-step:nth-child(4n + 1) { border-left: 0; }
.pillar-step__pill { display: inline-block; max-width: 100%; padding: 16px 24px; border-radius: 88px; background: var(--white); font-size: 20px; line-height: 20px; font-weight: 500; text-transform: uppercase; }
.pillar-step__title { margin: 32px 0 4px; font-size: 18px; line-height: 24px; font-weight: 500; text-transform: uppercase; }
.pillar-step__desc { font-size: 12px; line-height: 16px; opacity: .7; white-space: pre-line; }

/* Consultation */
.contact__form { position: relative; padding: 328px 0 48px; }
.contact__bird { position: absolute; left: 0; top: 0; width: 1440px; height: 1361px; mix-blend-mode: luminosity; pointer-events: none; }
.avatars { position: relative; width: 288px; height: 84px; margin: 0 auto; }
.avatars img { position: absolute; top: -3.5px; width: 91px; height: 91px; }
.contact__pitch { position: relative; width: 712px; margin: 32px auto 64px; font-size: 32px; line-height: 1; font-weight: 500; text-align: center; color: rgba(0,0,0,.44); overflow-wrap: anywhere; }
.contact__pitch strong { font-weight: inherit; color: var(--black); }
.page--about .footer { position: relative; bottom: auto; height: 658px; }

@media (max-width: 899px) {
  .wash { top: 372px; width: 402px; height: 996px; }
  .banner { width: 402px; min-height: 372px; padding: 196px 32px 64px; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .banner__frame { position: absolute; left: 0; top: 0; width: 402px; height: 100%; pointer-events: none; }
  .banner__notch { left: 167px; width: 68px; height: 8px; }
  .banner__tagline { position: absolute; left: 0; top: 104px; width: 100%; font-size: 12px; line-height: 16px; text-align: center; text-transform: capitalize; white-space: nowrap; }
  .banner__title { font-size: 24px; }
  .banner__sub { font-size: 14px; line-height: 16px; }

  .how { padding: 76px 24px 72px; }
  .ghost-title { font-size: 48px; text-transform: uppercase; }
  .how__intro { margin-top: -8px; font-size: 14px; line-height: 16px; white-space: normal; }
  .how__pillars { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pillar-step { min-height: 0; padding: 0 0 20px; }
  .pillar-step + .pillar-step { padding-top: 0; border-left: 0; }
  /* Figma: 56px centred dash between steps */
  .pillar-step + .pillar-step::before { content: ""; display: block; width: 56px; height: 1px; margin: 0 auto 32px; background: repeating-linear-gradient(to right, rgba(0,0,0,.16) 0 4px, transparent 4px 8px); }
  .pillar-step__pill { padding: 12px 24px; font-size: 16px; }
  .pillar-step__title { margin: 16px 0 8px; font-size: 20px; }
  .pillar-step__desc { font-size: 14px; line-height: 20px; }

  .contact__form { padding: 124px 0 128px; }
  .contact__bird { width: 402px; height: 381px; }
  .avatars { width: 176px; height: 56px; }
  .avatars img { top: -2px; width: 60px; height: 60px; }
  .contact__pitch { width: 354px; margin: 24px auto 32px; font-size: 14px; line-height: 16px; }
  .page--about .footer-m { position: relative; left: auto; bottom: auto; margin: 0 auto; }
}

/* Design: footer at 2542 */
.page--about .contact__form { margin-bottom: -14px; }