/* Global critical CSS: only base tokens and typography */
:root {
    --primary: #f98412;
    --black: #000;
    --blue: #006e86;
    --grey: #ababab;
    --font-heading: "apercu-bold-pro-web";
    --font-body-bold: "LL Brown Bold Web";
    --font-body-regular: "LL Brown Regular Web";
    --font-body-apercu: "apercu-regular-pro";

}

html,
body {
    margin: 0;
    padding: 0;
    color: var(--black);
    font-family: var(--font-body-regular);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    margin: 0;
    color: inherit;
}

p {
    margin: 0;
}

a {
    color: inherit;
}

html.js .servicepage-ssr-hero {
    opacity: 0;
    transition: opacity 0.5s ease;
}

html.js .servicepage-ssr-hero.is-image-ready {
    opacity: 1;
}

html.js .main-nav,
html.js .servicepage-ssr-hero,
html.js .breadcrumbs-container,
html.js .footer {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .32s ease, transform .32s ease;
}

html.js.ui-ready .main-nav,
html.js.ui-ready .servicepage-ssr-hero,
html.js.ui-ready .breadcrumbs-container,
html.js.ui-ready .footer {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html.js .main-nav,
    html.js .servicepage-ssr-hero,
    html.js .breadcrumbs-container,
    html.js .footer {
        transition: none;
        transform: none;
    }
}