/* BOI Design System - Premise — generated from tokens.json */
:root, [data-theme="default"] {
  --boi-brand-blue: #0a0ae5; /* The one accent. CTAs, links, arrow bullets, solid blue cards and the accent clause inside a heading. One blue per view (charts excepted: series 1). Text on boi-off-white 9.0:1. Too dark on dark grounds (1.6:1 on boi-dark): switch to boi-blue-200 on web or boi-blue-200-deck in decks. */
  --boi-blue-200: #c5d7ff; /* Accent text and links on dark surfaces for web (10.9:1 on boi-dark). Also the fill of Placeholder's blue tone. */
  --boi-blue-200-deck: #aac1ff; /* Accent text, icons and eyebrows on dark surfaces in decks (8.8:1 on boi-dark); footer column labels on the web too. Tag fill under boi-dark-900 text. Chart series 4. */
  --boi-blue-700: #0e0e98; /* Pressed state of brand-blue buttons and the hover fill of the Color button. Chart series 3 (Deep). */
  --boi-dark: #0d1314; /* The dark surface: heroes, section dividers, footer, title and closing slides. Put boi-off-white text on it (14.7:1). */
  --boi-dark-900: #0d1314; /* Primary text and icons on light surfaces (17.6:1 on boi-off-white). Some source pages also use it as the dark ground for logos. */
  --boi-dark-700: #706d6d; /* Secondary text on light surfaces: captions, roles, meta (4.8:1 on boi-off-white, 4.6:1 on boi-off-white-f2). Not on dark grounds (3.1:1 on boi-dark). */
  --boi-dark-500: #d2d1d1; /* Hairline borders on light surfaces, 0.5 to 1px. Not a text color: 1.4:1 on boi-off-white. */
  --boi-dark-400: #e3e3e3; /* Subtle dividers and table rules; the neutral Placeholder fill. */
  --boi-off-white: #f9f7f7; /* The default light surface for pages, sections and content slides. Also text and the logo ink on boi-dark (14.7:1) and on boi-brand-blue (9.0:1). */
  --boi-off-white-f2: #f2f1f1; /* Secondary light surface: chips, tags, inactive filter pills, the Explore button. Primary text and icons on dark in the web kit (13.9:1 on boi-dark). */
  --boi-dark-mid: #445155; /* Chart series 5 (Dark mid) and the cool service-card fill. Readable as text on boi-off-white (7.7:1). */
  --boi-gray-warm: #b8bdbe; /* Chart series 6 (Warm gray) and the cool Placeholder fill. Not for text on light (1.8:1). */
  --boi-blue-electric: #415ef7; /* Start of the stepped blue bands (CTABlock) and the bright end of the blue bento cards. Chart series 2. Not the accent: brand blue is. */
  --boi-blue-100: #cddaff; /* Lightest step of the blue scale: a tint fill behind blue content. Not a text color. */
  --boi-surface-primary: var(--boi-off-white); /* Default page and slide background. */
  --boi-surface-secondary: var(--boi-off-white-f2); /* Secondary panels, chips and tags on a light page. */
  --boi-surface-dark: var(--boi-dark); /* Dark sections: hero, divider, footer, CTA. Text on it is boi-text-inverse. */
  --boi-text-primary: var(--boi-dark-900); /* Headings and body copy on boi-surface-primary and boi-surface-secondary (17.6:1). */
  --boi-text-secondary: var(--boi-dark-700); /* Captions and supporting copy on boi-surface-primary and boi-surface-secondary (4.8:1). */
  --boi-text-tertiary: var(--boi-dark-500); /* Kept exact from the source, but it fails as text: 1.4:1 on boi-surface-primary. Use it only for disabled or decorative marks, never for content. */
  --boi-text-emphasis: var(--boi-brand-blue); /* The accent clause in a heading and inline links on light surfaces (9.0:1). */
  --boi-text-inverse: var(--boi-off-white); /* Text on boi-surface-dark (14.7:1) and on boi-brand-blue fills (9.0:1). */
  --boi-border-default: var(--boi-dark-500); /* Card and input borders on light surfaces, 0.5 to 1px. At 1.4:1 it is a hairline, not a control edge: a field found only by its border needs more than this. */
  --boi-border-subtle: var(--boi-dark-400); /* Dividers, table rules and the baseline under charts. */
}
:root {
  --boi-space-1: 4px; /* 4px: the smallest gap, inside tags and between a glyph and its label. */
  --boi-space-2: 8px; /* 8px: gaps between filter pills and chips. */
  --boi-space-3: 12px; /* 12px: gap between buttons in a row and between input and button. */
  --boi-space-4: 16px; /* 16px: tight grid gaps (client logo wall) and input padding. */
  --boi-space-5: 24px; /* 24px: card grid gaps (insights, leadership, stats). */
  --boi-space-6: 32px; /* 32px: space between a block's parts, e.g. logo to copy in the footer. */
  --boi-space-7: 48px; /* 48px: horizontal section padding on the web and column gaps in link rows. */
  --boi-space-8: 64px; /* 64px: space between major rows inside a section. */
  --boi-space-9: 96px; /* 96px: gap between the two halves of a split row and vertical section padding. */
  --boi-space-10: 128px; /* 128px: the largest step, for the most generous section breaks. */
  --boi-bp-tablet: 1024px; /* Breakpoint: at 1024px and below the web headings step down. */
  --boi-bp-mobile: 767px; /* Breakpoint: at 767px and below the web headings step down again. */
  --boi-radius-none: 0; /* Flat by default: decks, panels and slide cards. */
  --boi-radius-sm: 4px; /* 4px: buttons, inputs, pills and tags. */
  --boi-radius-md: 8px; /* 8px: web cards, forms and callouts. */
  --boi-ease: cubic-bezier(0.4, 0, 0.2, 1); /* The only easing: every hover and color swap. No bounce, no overshoot. */
  --boi-duration: 0.2s; /* Default duration for web transitions. Decks use no slide transitions. */
  --font-boi-font-family: 'DM Sans', system-ui, sans-serif;
  --font-boi-font-h1: 400 72px/76px 'DM Sans', system-ui, sans-serif;
  --font-boi-font-h2: 400 52px/57px 'DM Sans', system-ui, sans-serif;
  --font-boi-font-h3: 400 38px/48px 'DM Sans', system-ui, sans-serif;
  --font-boi-font-h4: 400 32px/38px 'DM Sans', system-ui, sans-serif;
  --font-boi-font-big-body: 400 22px/28px 'DM Sans', system-ui, sans-serif;
  --font-boi-font-body: 400 18px/24px 'DM Sans', system-ui, sans-serif;
  --font-boi-font-small: 400 14px/1.2 'DM Sans', system-ui, sans-serif;
  --font-boi-font-menu: 500 14px/22px 'DM Sans', system-ui, sans-serif;
  --font-boi-deck-eyebrow: 500 16pt/1 'DM Sans', sans-serif;
  --font-boi-deck-body: 400 18pt/1.35 'DM Sans', sans-serif;
  --font-boi-deck-body-lg: 400 22pt/1.3 'DM Sans', sans-serif;
  --text-web-h1: 400 72px/76px var(--font-boi-font-family); /* Page headline. Same values as .boi-h1 and --boi-font-h1; steps down to 54px at boi-bp-tablet and 42px at boi-bp-mobile. */
  --text-web-h2: 400 52px/57px var(--font-boi-font-family); /* Section headline (.boi-h2). 40px at boi-bp-tablet, 32px at boi-bp-mobile. */
  --text-web-h3: 400 38px/48px var(--font-boi-font-family); /* Sub-section heading (.boi-h3). 30px at boi-bp-tablet, 24px at boi-bp-mobile. */
  --text-web-h4: 400 32px/38px var(--font-boi-font-family); /* Card title (.boi-h4). */
  --text-web-big-body: 400 22px/28px var(--font-boi-font-family); /* Lead paragraph (.boi-big-body). */
  --text-web-body: 400 18px/24px var(--font-boi-font-family); /* Default body copy (.boi-body). */
  --text-web-small: 400 14px/1.2 var(--font-boi-font-family); /* Captions and meta in boi-text-secondary (.boi-small). */
  --text-web-menu: 500 14px/22px var(--font-boi-font-family); /* Navigation, button labels and small UI labels: the one Medium use (.boi-menu). */
  --text-deck-display: 400 112px/0.8 var(--font-boi-font-family); /* 84pt cover and hero display (.boi-deck-display), its own tier above the headline. Sizes here are pt converted at 1pt = 1.3333px on the 1920x1080 canvas: author decks in pt. */
  --text-deck-headline: 400 72px/0.85 var(--font-boi-font-family); /* 54pt slide title (.boi-deck-headline). A full sentence with a point of view. */
  --text-deck-subhead-lg: 400 37.333px/1.12 var(--font-boi-font-family); /* 28pt sub-headline, the cap for card and section titles (--boi-deck-subhead-lg). */
  --text-deck-subhead: 400 32px/1.15 var(--font-boi-font-family); /* 24pt card and section titles (.boi-deck-subhead). */
  --text-deck-body-lg: 400 29.333px/1.3 var(--font-boi-font-family); /* 22pt statement and closing lines (.boi-deck-body-lg). */
  --text-deck-body: 400 24px/1.35 var(--font-boi-font-family); /* 18pt body: the floor for tables, lists and captions (.boi-deck-body). Nothing in a deck goes smaller. */
  --text-deck-eyebrow: 500 21.333px/1 var(--font-boi-font-family); /* 16pt eyebrow, label or tag (.boi-deck-eyebrow): uppercase, 0.06em tracking. The only tier below 18pt. */
}
.web-h1 {
  font-family: var(--font-boi-font-family);
  font-size: 72px;
  line-height: 76px;
  font-weight: 400;
  letter-spacing: 0;
}
.web-h2 {
  font-family: var(--font-boi-font-family);
  font-size: 52px;
  line-height: 57px;
  font-weight: 400;
  letter-spacing: 0;
}
.web-h3 {
  font-family: var(--font-boi-font-family);
  font-size: 38px;
  line-height: 48px;
  font-weight: 400;
  letter-spacing: 0;
}
.web-h4 {
  font-family: var(--font-boi-font-family);
  font-size: 32px;
  line-height: 38px;
  font-weight: 400;
  letter-spacing: 0;
}
.web-big-body {
  font-family: var(--font-boi-font-family);
  font-size: 22px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.web-body {
  font-family: var(--font-boi-font-family);
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.web-small {
  font-family: var(--font-boi-font-family);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
}
.web-menu {
  font-family: var(--font-boi-font-family);
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: 0;
}
.deck-display {
  font-family: var(--font-boi-font-family);
  font-size: 112px;
  line-height: 0.8;
  font-weight: 400;
  letter-spacing: 0;
}
.deck-headline {
  font-family: var(--font-boi-font-family);
  font-size: 72px;
  line-height: 0.85;
  font-weight: 400;
  letter-spacing: 0;
}
.deck-subhead-lg {
  font-family: var(--font-boi-font-family);
  font-size: 37.333px;
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: 0;
}
.deck-subhead {
  font-family: var(--font-boi-font-family);
  font-size: 32px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0;
}
.deck-body-lg {
  font-family: var(--font-boi-font-family);
  font-size: 29.333px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.deck-body {
  font-family: var(--font-boi-font-family);
  font-size: 24px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0;
}
.deck-eyebrow {
  font-family: var(--font-boi-font-family);
  font-size: 21.333px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.06em;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}