:root { /* chassis contract */ --cx-fg: #01172e; --cx-bg: #ffffff; --cx-accent: #3e94ff; --cx-line: #dbdfe2; --cx-font-body: 'Chivo', sans-serif; --cx-font-display: 'Chivo', sans-serif; /* Type in rem (audit F53): identical at the default 16px, and it follows a visitor who set a larger default font size, which px ignored. The vw term only moves within the rem bounds. */ --cx-body: clamp(1rem, 1.05vw, 1.125rem); --cx-h1: clamp(2.375rem, 6.4vw, 5.25rem); --cx-h2: clamp(1.75rem, 3.6vw, 3rem); --cx-h3: clamp(1.1875rem, 1.6vw, 1.5rem); --cx-gap: 24px; --cx-wrap: 1240px; --cx-measure: 32em; --sp-gutter: clamp(16px, 12px + 2.2vw, 64px); --sp-section-compact: clamp(32px, 20.11px + 3.0476vw, 64px); --sp-section-standard: clamp(48px, 30.17px + 4.5714vw, 96px); --sp-section-generous: clamp(64px, 40.23px + 6.0952vw, 128px); --sp-eyebrow: clamp(8px, 5.77px + 0.5714vw, 14px); --sp-head-intro: clamp(14px, 11.03px + 0.7619vw, 22px); --sp-intro-content: clamp(28px, 22.06px + 1.5238vw, 44px); --sp-para: clamp(14px, 12.51px + 0.381vw, 18px); --sp-text-buttons: clamp(22px, 19.03px + 0.7619vw, 30px); --sp-buttons: clamp(12px, 11.26px + 0.1905vw, 14px); --sp-card-gap: clamp(18px, 14.29px + 0.9524vw, 28px); --sp-card-inset: clamp(20px, 17.03px + 0.7619vw, 28px); --sp-columns: clamp(28px, 17.6px + 2.6667vw, 56px); --sp-caption: 10px; --sp-form-label: 7px; --sp-form-group: 22px; --cx-band: var(--sp-section-standard); --cx-radius: 8px; --cx-radius-media: 14px; --cx-head-h: 74px; --cx-bar-h: 64px; /* renderer */ --r-accent: #3e94ff; --r-on-accent: #0b0f17; --r-ground: #ffffff; --r-ink: #01172e; --r-inverse-bg: #01172e; --r-inverse-fg: #ffffff; --r-inverse-muted: #9ea7b0; --r-inverse-line: #25374b; --r-inverse-accent: #3e94ff; --r-inverse-accent-text: #3e94ff; --r-display: 'Chivo', sans-serif; --r-body: 'Chivo', sans-serif; --r-display-weight: 800; --r-display-tracking: -0.01em; --r-eyebrow: .8125rem; --r-micro: .75rem; --r-case-display: none; --r-case-label: uppercase; --r-bg: #ffffff; --r-surface: #f5f6f7; --r-fg: #01172e; --r-muted: #626f7d; --r-line: #dbdfe2; --r-accent: #3e94ff; --r-on-accent: #0b0f17; --r-accent-text: #2c6fc0; } [data-theme="light"] { --r-bg: #ffffff; --r-surface: #f5f6f7; --r-fg: #01172e; --r-muted: #626f7d; --r-line: #dbdfe2; --r-accent: #3e94ff; --r-on-accent: #0b0f17; --r-accent-text: #2c6fc0; } [data-theme="dark"] { --r-bg: #01172e; --r-surface: #0b2036; --r-fg: #ffffff; --r-muted: #9ea7b0; --r-line: #25374b; --r-accent: #3e94ff; --r-on-accent: #0b0f17; --r-accent-text: #3e94ff; } [data-theme="brand"] { --r-bg: #01172e; --r-surface: #0b2036; --r-fg: #ffffff; --r-muted: #9ea7b0; --r-line: #25374b; --r-accent: #3e94ff; --r-on-accent: #0b0f17; --r-accent-text: #3e94ff; } [data-theme="accent"] { --r-bg: #3e94ff; --r-surface: #3e94ff; --r-fg: #0b0f17; --r-muted: #0b0f17; --r-line: #0b0f17; --r-accent-text: #0b0f17; } @font-face { font-family: 'Chivo'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/assets/fonts/chivo/chivo-300-900.woff2') format('woff2'); } .r-cols-1, .r-cols-2, .r-cols-3, .r-cols-4 { display: grid; } @media (max-width: 719px) { .r-cols-1, .r-cols-2, .r-cols-3, .r-cols-4 { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 720px) { .r-cols-1 { grid-template-columns: minmax(0, 1fr); } .r-cols-2, .r-cols-3, .r-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Three or nine cards in two columns leave a hole beside the last one (audit F46: measured on both sites between 720 and 999px). On that tier the odd last card takes the whole row, which reads as a choice; the bare half-row never did. */ @media (min-width: 720px) and (max-width: 999px) { .r-cols-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (min-width: 1000px) { .r-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Four across, on ONE row. Four is a divisor like any other, and leaving it out of the list sent four steps into a two-by-two block that looked right and was not: a skin removes the right border from the LAST card because in a single row that edge is the section's own edge, and in two rows the last card sits at the right-hand end of the second row with its box left open. The idiom is the skin's to write; the row count is the renderer's to choose, and choosing two rows for four cards broke it. */ .r-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* No divisor: a flex row whose last line grows into whatever is left, so there is never bare ground under the cards. Wider cards on the last line read as deliberate; a hole never does. */ .r-cols-fill { display: flex; flex-wrap: wrap; } .r-cols-fill > * { flex: 1 1 320px; min-width: 0; } /* ---- shared components (renderer) ---- */ .r-section { padding-block: var(--cx-band); background: var(--r-bg); color: var(--r-fg); } /* Per-section density (spec section.density): the band is redefined on the section itself, so its own padding and anything inside that reads --cx-band move together. */ section[data-density="tight"] { --cx-band: var(--sp-section-compact); } section[data-density="open"] { --cx-band: var(--sp-section-generous); } /* One owner for the gap between two sections on the same ground (the owner's rule 3). Two full insets meet there with nothing to separate them, so the space reads as a hole rather than a pause: the second section starts at half its inset, and the seam is one and a half insets. A change of ground is its own separation and keeps both. Which joins share a ground is MEASURED after the skin is applied (studio/tools/seams.mjs marks them), because a skin paints its own grounds and the theme attribute cannot tell white from pale blue. */ .r-section[data-seam="joined"] { padding-top: calc(var(--cx-band) * .5); } /* A flush section means its own content reaches the band's edges, not that the band has no rhythm: with padding-block 0 the services ledger sat at half the vertical space of every other section on the site and the page read as a different document. The band keeps the site's rhythm; what is flush is the content inside it. */ .r-section--flush { padding-block: var(--cx-section-pad, clamp(52px, 7vw, 100px)); } .r-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 var(--sp-eyebrow, 12px); font-size: var(--r-eyebrow); font-weight: 700; letter-spacing: .22em; text-transform: var(--r-case-label, uppercase); color: var(--r-accent-text); max-width: none; } /* overflow hidden and flex none: skins draw the rule as an ::after, sometimes wider than the span, and it spilled over the first letters of the eyebrow on three builds. A pseudo now clips to the box. */ .r-eyebrow-rule { width: 28px; height: 2px; flex: none; overflow: hidden; background: var(--r-accent); } /* The head group, one owner per gap: eyebrow to heading (the eyebrow's margin), heading to introduction (the heading's margin), introduction to the section's content (the head's margin). */ .r-head { margin-bottom: var(--sp-intro-content, clamp(32px, 4vw, 48px)); } .r-head h2 { margin: 0 0 var(--sp-head-intro, .5em); } .r-head > p:last-child, .r-head > .r-lead:last-child { margin-bottom: 0; } .r-head h2 { font-family: var(--r-display); font-weight: var(--r-display-weight); letter-spacing: var(--r-display-tracking); line-height: 1.02; color: var(--r-fg); } .r-head--center { text-align: center; } .r-head--center .r-eyebrow { justify-content: center; } .r-head--center .r-eyebrow-rule { display: none; } .r-head--center p { margin-inline: auto; } .r-lead { font-size: 1.06em; color: var(--r-muted); } /* line-height is declared because the same class lands on an and on the form's