@charset "UTF-8"; @font-face {
font-family: 'Acid Grotesk';
font-style: normal;
font-weight: 300;
src: url("https://static.workday.com/fonts/Acid_Grotesk/WOFF2/FFF-AcidGrotesk-Light.woff2") format("woff2"), url("https://static.workday.com/fonts/Acid_Grotesk/WOFF/FFF-AcidGrotesk-Light.woff") format("woff"), url("https://static.workday.com/fonts/Acid_Grotesk/OTF/FFF-AcidGrotesk-Light.otf") format("otf"), url("https://static.workday.com/fonts/Acid_Grotesk/TTF/FFF-AcidGrotesk-Light.ttf") format("ttf");
}
@font-face {
font-family: 'Acid Grotesk';
font-style: normal;
font-weight: 400;
src: url("https://static.workday.com/fonts/Acid_Grotesk/WOFF2/FFF-AcidGrotesk-Regular.woff2") format("woff2"), url("https://static.workday.com/fonts/Acid_Grotesk/WOFF/FFF-AcidGrotesk-Regular.woff") format("woff"), url("https://static.workday.com/fonts/Acid_Grotesk/OTF/FFF-AcidGrotesk-Regular.otf") format("otf"), url("https://static.workday.com/fonts/Acid_Grotesk/TTF/FFF-AcidGrotesk-Regular.ttf") format("ttf");
}
@font-face {
font-family: 'Acid Grotesk';
font-style: normal;
font-weight: 700;
src: url("https://static.workday.com/fonts/Acid_Grotesk/WOFF2/FFF-AcidGrotesk-Bold.woff2") format("woff2"), url("https://static.workday.com/fonts/Acid_Grotesk/WOFF/FFF-AcidGrotesk-Bold.woff") format("woff"), url("https://static.workday.com/fonts/Acid_Grotesk/OTF/FFF-AcidGrotesk-Bold.otf") format("otf"), url("https://static.workday.com/fonts/Acid_Grotesk/TTF/FFF-AcidGrotesk-Bold.ttf") format("ttf");
}
@font-face {
font-family: 'Acid Grotesk';
font-style: normal;
font-weight: 800;
src: url("https://static.workday.com/fonts/Acid_Grotesk/WOFF2/FFF-AcidGrotesk-ExtraBold.woff2") format("woff2"), url("https://static.workday.com/fonts/Acid_Grotesk/WOFF/FFF-AcidGrotesk-ExtraBold.woff") format("woff"), url("https://static.workday.com/fonts/Acid_Grotesk/OTF/FFF-AcidGrotesk-ExtraBold.otf") format("otf"), url("https://static.workday.com/fonts/Acid_Grotesk/TTF/FFF-AcidGrotesk-ExtraBold.ttf") format("ttf");
}
html {
box-sizing: border-box;
font-size: 16px;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
color-scheme: light dark;
}
*, html, body, button, p, h1, h2, h3, h4, h5, h6, .p, .h1, .h2, .h3, .h4, .h5, .h6, .body-0, .body-1, .body-2, .body-3, .body-4, .body-5, .body-6, .disclaimer, .quote, blockquote, a {
font-family: 'Acid Grotesk', Arial, Helvetica, sans-serif !important;
}
body, html {
background-color:#022043;
width:100%;
height:100%;
min-height: 100vh;
min-height: 100dvh;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0;
min-height: 100dvh;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
:where(h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, dd) {
margin: 0;
font-weight: inherit;
}
:where(ul, ol) {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: inherit;
text-decoration: none;
text-decoration-skip-ink: auto;
}
:where(img, svg, video, canvas, audio, iframe, embed, object, picture) {
display: block;
max-width: 100%;
}
img, picture, svg, video {
height: auto;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th, td {
padding: 0;
text-align: inherit;
font-weight: inherit;
}
:where(button, input, select, textarea) {
font: inherit;
color: inherit;
letter-spacing: inherit;
background-color: transparent;
border: none;
margin: 0;
}
input, select, textarea {
font-size: 16px;
}
input[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
select, input, textarea {
-webkit-appearance: none;
appearance: none;
border-radius: 0;
}
button, [type="button"], [type="submit"], [role="button"] {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
textarea {
resize: vertical;
}
::placeholder {
opacity: 1;
}
[hidden] {
display: none !important;
}
:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.visually-hidden {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
clip-path: inset(50%);
}
details > summary {
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
:root{
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--display-size: 5.5rem;
--display-line: 6rem;
--display-weight: 800;
--display-ls: -0.02em;
--display-mb: 2rem;
--t1-size: 3.5rem;  --t1-line: 4rem;   --t1-weight: 800; --t1-ls: -0.02em; --t1-mb: 1.5rem;
--t2-size: 3rem;    --t2-line: 3.5rem; --t2-weight: 800; --t2-ls: 0;       --t2-mb: 1.5rem;
--t3-size: 2.5rem;  --t3-line: 3rem;   --t3-weight: 800; --t3-ls: 0;       --t3-mb: 1.5rem;
--t4-size: 2rem;    --t4-line: 2.5rem; --t4-weight: 700; --t4-ls: 0;       --t4-mb: 1.5rem;
--t5-size: 1.5rem;  --t5-line: 2rem;   --t5-weight: 700; --t5-ls: 0;       --t5-mb: 1rem;
--t6-size: 1.25rem; --t6-line: 1.75rem;--t6-weight: 700; --t6-ls: 0;       --t6-mb: 1rem;
--b0-size: 1.5rem;  --b0-line: 2rem;   --b0-mb: 1.25rem;
--b1-size: 1.25rem; --b1-line: 1.75rem;--b1-mb: 1rem;
--b2-size: 1rem;    --b2-line: 1.5rem; --b2-mb: 1rem;
--b3-size: .875rem; --b3-line: 1.25rem;--b3-mb: 1rem;
--overline-size: .875rem;  --overline-line: 1.25rem; --overline-ls: .08em; --overline-mb: .5rem;
--stat-size: 3rem;         --stat-line: 3.5rem;      --stat-weight: 400;   --stat-mb: 0;
--nav-size: 1rem;          --nav-line: 1.5rem;
}
@media (max-width: 991.98px){
:root{
--display-size: 3rem;
--display-line: 3.5rem;
--display-ls: 0;
--display-mb: 1.5rem;
--t1-size: 3rem;   --t1-line: 3.5rem; --t1-ls: 0;
--t2-size: 2.5rem; --t2-line: 3rem;
--t3-size: 2rem;   --t3-line: 2.5rem;
--t4-size: 1.5rem; --t4-line: 2rem;
--t5-size: 1.25rem;--t5-line: 1.75rem; --t5-mb: 1.25rem;
--b0-size: 1.25rem; --b0-line: 1.75rem;
}
}
body{ font-family: var(--font-sans); color: #0022043; }
p, .p, a, .body-2, .body-2-regular, .disclaimer{
font-size: var(--b2-size);
line-height: var(--b2-line);
font-weight: 400;
letter-spacing: 0;
margin-bottom: var(--b2-mb);
}
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
button{
font-size: var(--b2-size);
line-height: var(--b2-line);
font-weight: 700;
letter-spacing: 0;
}
.display{
font-size: var(--display-size);
line-height: var(--display-line);
font-weight: var(--display-weight);
letter-spacing: var(--display-ls);
margin-bottom: var(--display-mb);
}
h1, .h1{
font-size: var(--t1-size);
line-height: var(--t1-line);
font-weight: var(--t1-weight);
letter-spacing: var(--t1-ls);
margin-bottom: var(--t1-mb);
}
h2, .h2{
font-size: var(--t2-size);
line-height: var(--t2-line);
font-weight: var(--t2-weight);
letter-spacing: var(--t2-ls);
margin-bottom: var(--t2-mb);
}
h3, .h3{
font-size: var(--t3-size);
line-height: var(--t3-line);
font-weight: var(--t3-weight);
letter-spacing: var(--t3-ls);
margin-bottom: var(--t3-mb);
}
h4, .h4{
font-size: var(--t4-size);
line-height: var(--t4-line);
font-weight: var(--t4-weight);
letter-spacing: var(--t4-ls);
margin-bottom: var(--t4-mb);
}
h5, .h5{
font-size: var(--t5-size);
line-height: var(--t5-line);
font-weight: var(--t5-weight);
letter-spacing: var(--t5-ls);
margin-bottom: var(--t5-mb);
}
h6, .h6{
font-size: var(--t6-size);
line-height: var(--t6-line);
font-weight: var(--t6-weight);
letter-spacing: var(--t6-ls);
margin-bottom: var(--t6-mb);
}
.statistic{
font-size: var(--stat-size);
line-height: var(--stat-line);
font-weight: var(--stat-weight);
margin-bottom: var(--stat-mb);
}
.overline{
font-size: var(--overline-size);
line-height: var(--overline-line);
font-weight: 700;
letter-spacing: var(--overline-ls);
text-transform: uppercase;
margin-bottom: var(--overline-mb);
}
.body-0, .body-0-regular{
font-size: var(--b0-size);
line-height: var(--b0-line);
font-weight: 400;
margin-bottom: var(--b0-mb);
}
.body-0-bold{ font-weight: 700; }
.body-1, .body-1-regular{
font-size: var(--b1-size);
line-height: var(--b1-line);
font-weight: 400;
margin-bottom: var(--b1-mb);
}
.body-1-bold{ font-weight: 700; }
.body-2-bold{ font-weight: 700; }
.body-3, .body-3-regular{
font-size: var(--b3-size);
line-height: var(--b3-line);
font-weight: 400;
margin-bottom: var(--b3-mb);
}
.body-3-bold{ font-weight: 700; }
.body-4, .body-5, .body-6{ font-size: var(--b3-size); line-height: var(--b3-line); }
.disclaimer{ font-size: var(--b3-size); line-height: var(--b3-line); opacity: .85; }
.nav-bold{    font-size: var(--nav-size); line-height: var(--nav-line); font-weight: 700; letter-spacing: 0; }
.nav-regular{ font-size: var(--nav-size); line-height: var(--nav-line); font-weight: 400; letter-spacing: 0; }
blockquote, .quote{
font-size: var(--b1-size);
line-height: var(--b1-line);
font-weight: 400;
margin: 0 0 var(--b1-mb);
padding-left: 1rem;
border-left: 4px solid rgba(0,0,0,.08);
font-style: italic;
}
:root {
--afterHours: #022043;
--ink: #0F2E66;
--ballpoint: #0057AE;
--waterCooler: #1C98E8;
--blueSky: #9FCFFF;
--paper: #ffffff;
--keyboard: #FCF8E8;
--highlighter: #FFF3A8;
--pencil: #FDE65E;
--lunchBreak: #FEC10B;
--tack: #6FC9D3;
--eraser: #FFC2FD;
--smoothie: #AB65D0;
--happyHour: #FD7E00;
--thumbtack: #FC5B05;
--laptop: #525D6A;
--staple: #7D8B99;
--desk: #B6C1CC;
--businessCard: #F1F3F6;
--greenApple400: #43C463;
--watermelon400: #12A67C;
--cinnamon500: #DE2E21;
--selectedDefault: rgba(0,0,0,.08);
--selectedBlueSky: var(--blueSky);
--overlayModal: rgba(0,0,0,.80);
--overlayTooltip: rgba(0,0,0,.85);
--strokeCards: var(--desk);
--strokeInputs: var(--staple);
--strokeFocus: var(--ballpoint);
--strokeError: var(--cinnamon500);
--typeDefault: var(--afterHours);
--typeHint: var(--staple);
--typeLink: var(--ballpoint);
--typeError: var(--cinnamon500);
--typeInverse: var(--paper);
--typeSubtle: var(--laptop);
}
.afterHours{ background: var(--afterHours); } .afterHours-text{ color: var(--afterHours); } .afterHours-border{ border-color: var(--afterHours); }
.ink{ background: var(--ink); } .ink-text{ color: var(--ink); } .ink-border{ border-color: var(--ink); }
.ballpoint{ background: var(--ballpoint); } .ballpoint-text{ color: var(--ballpoint); } .ballpoint-border{ border-color: var(--ballpoint); }
.waterCooler{ background: var(--waterCooler); } .waterCooler-text{ color: var(--waterCooler); } .waterCooler-border{ border-color: var(--waterCooler); }
.blueSky{ background: var(--blueSky); } .blueSky-text{ color: var(--blueSky); } .blueSky-border{ border-color: var(--blueSky); }
.paper{ background: var(--paper); } .paper-text{ color: var(--paper); } .paper-border{ border-color: var(--paper); }
.keyboard{ background: var(--keyboard); } .keyboard-text{ color: var(--keyboard); } .keyboard-border{ border-color: var(--keyboard); }
.highlighter{ background: var(--highlighter); } .highlighter-text{ color: var(--highlighter); } .highlighter-border{ border-color: var(--highlighter); }
.pencil{ background: var(--pencil); } .pencil-text{ color: var(--pencil); } .pencil-border{ border-color: var(--pencil); }
.lunchBreak{ background: var(--lunchBreak); } .lunchBreak-text{ color: var(--lunchBreak); } .lunchBreak-border{ border-color: var(--lunchBreak); }
.tack{ background: var(--tack); } .tack-text{ color: var(--tack); } .tack-border{ border-color: var(--tack); }
.eraser{ background: var(--eraser); } .eraser-text{ color: var(--eraser); } .eraser-border{ border-color: var(--eraser); }
.smoothie{ background: var(--smoothie); } .smoothie-text{ color: var(--smoothie); } .smoothie-border{ border-color: var(--smoothie); }
.happyHour{ background: var(--happyHour); } .happyHour-text{ color: var(--happyHour); } .happyHour-border{ border-color: var(--happyHour); }
.thumbtack{ background: var(--thumbtack); } .thumbtack-text{ color: var(--thumbtack); } .thumbtack-border{ border-color: var(--thumbtack); }
.laptop{ background: var(--laptop); } .laptop-text{ color: var(--laptop); } .laptop-border{ border-color: var(--laptop); }
.staple{ background: var(--staple); } .staple-text{ color: var(--staple); } .staple-border{ border-color: var(--staple); }
.desk{ background: var(--desk); } .desk-text{ color: var(--desk); } .desk-border{ border-color: var(--desk); }
.businessCard{ background: var(--businessCard); } .businessCard-text{ color: var(--businessCard); } .businessCard-border{ border-color: var(--businessCard); }
.selectedDefault{ background: var(--selectedDefault); }
.selectedBlueSky{ background: var(--selectedBlueSky); }
.overlayModal{ background: var(--overlayModal); }
.overlayTooltip{ background: var(--overlayTooltip); }
.status-success{ background: var(--greenApple400); }
.status-success-text{ color: var(--greenApple400); }
.status-warning{ background: var(--happyHour); }
.status-warning-text{ color: var(--happyHour); }
.status-error{ background: var(--cinnamon500); }
.status-error-text{ color: var(--cinnamon500); }
.type-default{ color: var(--typeDefault); }
.type-hint{ color: var(--typeHint); }
.type-link{ color: var(--typeLink); }
.type-error{ color: var(--typeError); }
.type-inverse{ color: var(--typeInverse); }
.type-subtle{ color: var(--typeSubtle); }
.stroke-cards{ border-color: var(--strokeCards); }
.stroke-inputs{ border-color: var(--strokeInputs); }
.stroke-focus{ border-color: var(--strokeFocus); }
.stroke-error{ border-color: var(--strokeError); }
.icon-standard{ color: var(--afterHours); }
.icon-active{ color: var(--ballpoint); }
.icon-success{ color: var(--watermelon400); }
.icon-error{ color: var(--cinnamon500); }
.icon-disabled{ color: var(--businessCard); }
.icon-inverse{ color: var(--paper); }
.btn-default{ background: var(--ballpoint); color: #fff; }
.btn-default:hover{ filter: brightness(0.95); }
.btn-active{ background: var(--afterHours); color: #fff; }
.shadow-card { box-shadow: 0 2px 12px rgba(0,0,0,0.12); }
.shadow-menu { box-shadow: 0 4px 8px  rgba(0,0,0,0.12); }
.shadow-none { box-shadow: none; }
.shadow-raise { box-shadow: 0 8px 24px rgba(0,0,0,0.16); }
.focus-ring {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--strokeFocus) 45%, white 55%);
}
:root{
--link: var(--ballpoint, #0057AE);
--link-dark: var(--afterHours, #022043);
}
a{
color: var(--link);
font-weight: 700;
font-size: 16px;
line-height: 24px;
text-decoration: underline;
text-decoration-color: currentColor;
text-underline-offset: 2px;
text-decoration-thickness: from-font;
text-decoration-skip-ink: auto;
-webkit-tap-highlight-color: transparent;
}
a:visited{
color: var(--link);
text-decoration-color: currentColor;
}
a:hover{
color: var(--link-dark);
text-decoration-color: currentColor;
cursor: pointer;
}
a:focus{
outline: none;
}
a:focus-visible{
outline: 3px solid var(--link);
outline-offset: 2px;
}
a:active{
color: var(--link-dark);
text-decoration-color: currentColor;
}
@media (forced-colors: active){
a:focus-visible{
outline: 2px solid CanvasText;
outline-offset: 2px;
}
}
:root{
--btn-primary: var(--ballpoint, #0057ae);
--btn-primary-dark: var(--afterHours, #022043);
--btn-text: #fff;
}
.btn{
-webkit-tap-highlight-color: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: 12px 20px;
border-radius: 24px;
border: 0;
font-size: 16px;
line-height: 24px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: background-color .15s ease;
}
.btn-primary{
background: var(--btn-primary);
color: var(--btn-text);
}
.btn-primary:hover{
background: var(--btn-primary-dark);
}
.btn-primary:active{
background: var(--btn-primary-dark);
}
.btn-primary:focus{ outline: none; }
.btn-primary:focus-visible{
outline: 3px solid var(--btn-primary);
outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"]{
opacity: .55;
cursor: not-allowed;
}
@media (forced-colors: active){
.btn-primary{ background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
.btn-primary:focus-visible{ outline: 2px solid CanvasText; outline-offset: 2px; }
}
:root{
--blue: var(--ballpoint, #0057ae);
--blue-dark: var(--afterHours, #022043);
--btn-text-on-dark: #fff;
}
.btn{
-webkit-tap-highlight-color: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: 12px 20px;
border-radius: 24px;
border: 2px solid transparent;
font-size: 16px;
line-height: 24px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-secondary{
background: #fff;
color: var(--blue-dark);
border-color: var(--blue-dark);
}
.btn-secondary:hover,
.btn-secondary:active{
background: var(--blue-dark);
color: var(--btn-text-on-dark);
border-color: var(--blue-dark);
}
.btn-secondary:focus{ outline: none; }
.btn-secondary:focus-visible{
background: var(--blue-dark);
color: var(--btn-text-on-dark);
border-color: #fff;
box-shadow: 0 0 0 3px var(--blue);
}
.btn:disabled,
.btn[aria-disabled="true"]{
opacity: .55;
cursor: not-allowed;
}
@media (forced-colors: active){
.btn-secondary{ background: ButtonFace; color: ButtonText; border-color: ButtonText; }
.btn-secondary:hover,
.btn-secondary:active{ background: ButtonText; color: ButtonFace; }
.btn-secondary:focus-visible{ box-shadow: none; outline: 2px solid CanvasText; outline-offset: 2px; }
}
:root{
--paper: #fff;
--header-height: 72px;
--container-max: 1408px;
--container-x: 32px;
--logo-blue: #0057AE;
--logo-orange: #FC5B05;
}
.site-header{
position: sticky;
top: 0;
z-index: 1000;
background: var(--paper);
height: var(--header-height);
width: 100%;
}
.header-container{
height: var(--header-height);
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-x);
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;
}
.header-logo{ display: inline-flex; align-items: center; }
.header-logo svg{
height: 32px;
width: auto;
display: block;
}
.workday-logo {
height: 48px!important;
width: auto!important;
}
.workday-logo .letter{ fill: var(--logo-blue)!important; }
.workday-logo .arch{ fill: var(--logo-orange)!important; }
@supports (padding: max(0px)) {
.header-container{
padding-left: max(var(--container-x), env(safe-area-inset-left));
padding-right: max(var(--container-x), env(safe-area-inset-right));
}
}
:root{
--afterHours: #022043;
--paper: #fff;
--logo-orange: #FC5B05;
--container-max: 1408px;
--container-x: 32px;
}
.site-footer{
background: var(--afterHours);
color: var(--paper);
width: 100%;
}
.footer-container{
max-width: var(--container-max);
margin: 0 auto;
padding: 32px var(--container-x) 40px;
display: grid;
row-gap: 24px;
}
.footer-logo{ display:inline-flex; align-items:center; }
.footer-logo svg{ height: 32px; width:auto; display:block; }
.workday-logo .letter{ fill: #ffffff!important; }
.workday-logo .arch{ fill: var(--logo-orange)!important; }
.footer-bottom{
display: grid;
row-gap: 16px;
}
.footer-legal,
.footer-copy{
font-size: .875rem;
line-height: 1.25rem;
}
.footer-legal{
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.badge{
width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px;
display: inline-block;
}
.site-footer a{
color: #fff;
font-weight: 400;
text-decoration: none;
}
.site-footer a:hover{ text-decoration: underline; }
.site-footer a:focus{ outline: none; }
.site-footer a:focus-visible{
outline: 2px solid #fff;
outline-offset: 2px;
}
.site-footer{ text-align: center; }
.footer-legal, .footer-copy{ justify-content: center; }
@media (min-width: 992px){
.footer-container{ padding-top: 40px; padding-bottom: 48px; }
.footer-bottom{
grid-template-columns: 1fr 1fr;
align-items: center;
}
.site-footer{ text-align: left; }
.footer-legal{ justify-content: flex-start; }
.footer-copy{ justify-self: end; }
}
@supports (padding: max(0px)){
.footer-container{
padding-left: max(var(--container-x), env(safe-area-inset-left));
padding-right: max(var(--container-x), env(safe-area-inset-right));
padding-bottom: max(40px, env(safe-area-inset-bottom));
}
}
:root{
--gutter-x: 32px;
--gutter-y: 0px;
}
.container{
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-x);
width:100%;
}
.row{
display: flex;
flex-wrap: wrap;
width: 100%;
margin-left:  calc(var(--gutter-x) / -2);
margin-right: calc(var(--gutter-x) / -2);
margin-top:    calc(var(--gutter-y) / -2);
margin-bottom: calc(var(--gutter-y) / -2);
}
.col{
min-width: 0;
flex: 1 0 0%;
padding-left:  calc(var(--gutter-x) / 2);
padding-right: calc(var(--gutter-x) / 2);
padding-top:    calc(var(--gutter-y) / 2);
padding-bottom: calc(var(--gutter-y) / 2);
flex-direction:column;
}
.align-vertical > .row{ flex: 1 1 100%; width: 100%; }
[class*="col-xs-"] { flex: 0 0 auto; }
.col-xs-1 { width: 8.333333%;  max-width: 8.333333%; }
.col-xs-2 { width: 16.666667%; max-width: 16.666667%; }
.col-xs-3 { width: 25%;        max-width: 25%; }
.col-xs-4 { width: 33.333333%; max-width: 33.333333%; }
.col-xs-5 { width: 41.666667%; max-width: 41.666667%; }
.col-xs-6 { width: 50%;        max-width: 50%; }
.col-xs-7 { width: 58.333333%; max-width: 58.333333%; }
.col-xs-8 { width: 66.666667%; max-width: 66.666667%; }
.col-xs-9 { width: 75%;        max-width: 75%; }
.col-xs-10{ width: 83.333333%; max-width: 83.333333%; }
.col-xs-11{ width: 91.666667%; max-width: 91.666667%; }
.col-xs-12{ width: 100%;       max-width: 100%; }
@media (min-width: 768px) {
[class*="col-sm-"] { flex: 0 0 auto; }
.col-sm-1 { width: 8.333333%;  max-width: 8.333333%; }
.col-sm-2 { width: 16.666667%; max-width: 16.666667%; }
.col-sm-3 { width: 25%;        max-width: 25%; }
.col-sm-4 { width: 33.333333%; max-width: 33.333333%; }
.col-sm-5 { width: 41.666667%; max-width: 41.666667%; }
.col-sm-6 { width: 50%;        max-width: 50%; }
.col-sm-7 { width: 58.333333%; max-width: 58.333333%; }
.col-sm-8 { width: 66.666667%; max-width: 66.666667%; }
.col-sm-9 { width: 75%;        max-width: 75%; }
.col-sm-10{ width: 83.333333%; max-width: 83.333333%; }
.col-sm-11{ width: 91.666667%; max-width: 91.666667%; }
.col-sm-12{ width: 100%;       max-width: 100%; }
}
@media (min-width: 992px) {
[class*="col-md-"] { flex: 0 0 auto; }
.col-md-1 { width: 8.333333%;  max-width: 8.333333%; }
.col-md-2 { width: 16.666667%; max-width: 16.666667%; }
.col-md-3 { width: 25%;        max-width: 25%; }
.col-md-4 { width: 33.333333%; max-width: 33.333333%; }
.col-md-5 { width: 41.666667%; max-width: 41.666667%; }
.col-md-6 { width: 50%;        max-width: 50%; }
.col-md-7 { width: 58.333333%; max-width: 58.333333%; }
.col-md-8 { width: 66.666667%; max-width: 66.666667%; }
.col-md-9 { width: 75%;        max-width: 75%; }
.col-md-10{ width: 83.333333%; max-width: 83.333333%; }
.col-md-11{ width: 91.666667%; max-width: 91.666667%; }
.col-md-12{ width: 100%;       max-width: 100%; }
}
@media (min-width: 1200px) {
[class*="col-lg-"] { flex: 0 0 auto; }
.col-lg-1 { width: 8.333333%;  max-width: 8.333333%; }
.col-lg-2 { width: 16.666667%; max-width: 16.666667%; }
.col-lg-3 { width: 25%;        max-width: 25%; }
.col-lg-4 { width: 33.333333%; max-width: 33.333333%; }
.col-lg-5 { width: 41.666667%; max-width: 41.666667%; }
.col-lg-6 { width: 50%;        max-width: 50%; }
.col-lg-7 { width: 58.333333%; max-width: 58.333333%; }
.col-lg-8 { width: 66.666667%; max-width: 66.666667%; }
.col-lg-9 { width: 75%;        max-width: 75%; }
.col-lg-10{ width: 83.333333%; max-width: 83.333333%; }
.col-lg-11{ width: 91.666667%; max-width: 91.666667%; }
.col-lg-12{ width: 100%;       max-width: 100%; }
}
@media (min-width: 1600px) {
[class*="col-xl-"] { flex: 0 0 auto; }
.col-xl-1 { width: 8.333333%;  max-width: 8.333333%; }
.col-xl-2 { width: 16.666667%; max-width: 16.666667%; }
.col-xl-3 { width: 25%;        max-width: 25%; }
.col-xl-4 { width: 33.333333%; max-width: 33.333333%; }
.col-xl-5 { width: 41.666667%; max-width: 41.666667%; }
.col-xl-6 { width: 50%;        max-width: 50%; }
.col-xl-7 { width: 58.333333%; max-width: 58.333333%; }
.col-xl-8 { width: 66.666667%; max-width: 66.666667%; }
.col-xl-9 { width: 75%;        max-width: 75%; }
.col-xl-10{ width: 83.333333%; max-width: 83.333333%; }
.col-xl-11{ width: 91.666667%; max-width: 91.666667%; }
.col-xl-12{ width: 100%;       max-width: 100%; }
}
.start { justify-content: flex-start; }
.center { justify-content: center; }
.end { justify-content: flex-end; }
.top { align-items: flex-start; }
.middle { align-items: center; }
.bottom { align-items: flex-end; }
@media (max-width: 767.98px) { .middle-xs { align-items: center; } }
@media (min-width: 768px) and (max-width: 991.98px) { .middle-sm { align-items: center; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .middle-md { align-items: center; } }
@media (min-width: 1200px) and (max-width: 1599.98px) { .middle-lg { align-items: center; } }
@media (min-width: 1600px) { .middle-xl { align-items: center; } }
.section{
width: 100%;
--section-bg: url('img-sidewalk-street-view-stock-performance-16x9.jpg');
--overlay: rgba(0,0,0,.6);
background-image:
linear-gradient(var(--overlay), var(--overlay)),
var(--section-bg);
background-size: cover;
background-position: left center;
background-repeat: no-repeat;
background-color:#0C51A1;
}
.col-bleed {
padding-right:0;
}
.bleeding-img img {
border-radius:8px;
}
.container{
max-width: 1408px;
margin-inline: auto;
padding:64px 32px;
flex-direction:column;
flex: 0 0 auto;
}
.container.hero{
padding:64px 0px 32px 32px;
}
.container.dark {
color:#ffffff!important;
}
.align-vertical {
display: flex;
align-items: center;
}
.align-vertical > .row{
flex: 1 1 100%;
width: 100%;
}
.card {
border-radius: 8px;
width: 100%;
height: auto;
text-align: left;
padding: 32px;
backdrop-filter: blur(32px);
}
.card p, .header-container a, .footer-bottom a {
margin-bottom: 0;
margin-top: 0;
}
.card.dark {
background: rgba(0,0,0,.24);;
}
html, body { height: 100%; }
body{
min-height: 100dvh;
display: flex;
flex-direction: column;
}
main{
flex: 1 0 auto;
display: flex;
min-height: 0;
flex-direction: column;
justify-content: space-between;
}
.section{
flex: 1 1 auto;
min-height: 0;
display: flex;
}
.site-footer{ margin-top: auto; }
.icon-card.row{
max-width: var(--container-max);
margin-inline: auto;
padding: 64px var(--container-x);
align-items: flex-start;
--gutter-x: 32px;
--gutter-y: 32px;
margin-left:-32px;
margin-right:-32px;
}
.icon-card.col{
display: flex;
flex-direction: column;
gap: 12px;
min-height: 100%;
}
.icon-card .icon{
width: 64px;
height: 64px;
object-fit: contain;
display: block;
color: var(--ballpoint);
margin-bottom: 8px;
}
.icon-card .icon svg,
.icon-card .icon svg *{ fill: currentColor; stroke: currentColor; }
.icon-card .body-2{
color: var(--typeDefault);
margin: 0;
}
.icon-card a{
display: inline-block;
margin-top: 16px;
}
.icon-card svg {
width:64px;
height:64px;
color: var(--ballpoint);
fill: var(--ballpoint);
}
.icon-card-container {
padding-bottom:0;
max-width:none;
width:100%;
padding-top:32px;
}
.section.white, .section.white{
background:#ffffff;
color: var(--typeDefault);
}
@media (min-width: 992px){
.icon-card.row{ --gutter-y: 0; }
}
@media (max-width: 992px){
.icon-card.row{ padding: 0 0 32px 0; }
.col-bleed {
padding-left:0;
}
}
/* Visually hide until focused */
.skip-link {
  position: absolute;
  top: .5rem;
  left: .5rem;
  transform: translateY(-150%);
  padding: .5rem .75rem;
  border: 2px solid currentColor;
  border-radius: .5rem;
  background: #fff;
  color: #000;
  z-index: 10000;
  text-decoration: none;
}

/* Show only for keyboard focus (modern) */
.skip-link:focus-visible {
  transform: translateY(0);
  outline: none; /* border acts as the visible focus */
}

/* Fallback for older browsers */
.skip-link:focus {
  transform: translateY(0);
} 

/* If you have a fixed/sticky header, avoid being covered when skipping */
#main {
  scroll-margin-top: 80px; /* adjust to your header height */
}

/* High-contrast / forced colors support */
@media (forced-colors: active) {
  .skip-link {
    forced-color-adjust: none;
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1472px){
.bleeding-img {
margin-right: -32px;
margin-bottom: -48px;
}
}
@media (max-width: 992px){
.header-logo {
margin:auto;
align-items: center;
}
.container.hero {
padding-bottom:32px;
padding-right:32px;
}
}
@media (max-width: 490px){
.dot {
	display: none;
}
}