How do we remove the Browser blue focus on TAB line once we have restyled our focus states?

Design help General
1

Focus state is important for WCAG 2.4.7 accessibility.
I have created my own states for links within the design style of the website, but when I TAB through the page, the browser blue focus line is still visible. This destroys my beautiful design!

From http://www.outlinenone.com/ I tried putting:

:focus {
outline: 0;
}

into the Project Settings > Custom Code > Head code, but this just put the code as text at the top of the page.

Clearly I need to keep the TAB focus, but I want it styled my way.
I’m using Chrome, if that makes any difference.

Here is my site Read-Only: https://preview.webflow.com/preview/experiencecommunity?utm_medium=preview_link&utm_source=designer&utm_content=experiencecommunity&preview=bcc8f92f8ceae471cb5d25629b14d403&pageId=5da8a928c2248f235b6d3df7&mode=preview

2

SOLVED
I needed to add the style tags!

/* remember to define focus styles! */ :focus { outline: 0; }