/* ════════════════════════════════════════════════════════════════ Connect Life Sciences: what Elementor has no control for. Colors come from Elementor's Site Settings globals through their CSS variables (--e-global-color-), so changing a global in Site Settings reaches these rules too. The fallbacks are the V5 values. ════════════════════════════════════════════════════════════════ */ /* anchors land below the sticky header instead of under it */ html { scroll-padding-top: 90px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } ::selection { background: var(--e-global-color-secondary, #177da6); color: #fff; } :focus-visible { outline: 2.5px solid var(--e-global-color-secondary, #177da6); outline-offset: 3px; } /* a text block's last paragraph adds no space under the widget */ .elementor-widget-text-editor p:last-child { margin-bottom: 0; } /* ── header ── The bar is 92% white; the blur keeps text that scrolls under it from fighting the menu. Elementor has a background control but no backdrop filter. */ .cls-header { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* The specialty markers in the Expertise dropdown: a small square in the specialty's colour. A menu item gets them through its CSS Classes field (Appearance > Menus > Screen Options > CSS Classes): "cls-mk cls-mk-bio", "cls-mk cls-mk-clin" or "cls-mk cls-mk-ai". */ .cls-mk > a::before { content: ''; display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 10px; border-radius: 2px; background: var(--cls-mk, var(--e-global-color-secondary, #177da6)); } /* the dropdown panel gets a little inner padding so each item's hover tint sits inside the rounded corners */ .cls-nav .elementor-nav-menu--main .sub-menu { padding: 6px; } .cls-nav .elementor-nav-menu--main .sub-menu a { border-radius: 7px; } /* Under the tablet breakpoint the menu is a hamburger. It moves to the far right, after Contact (Elementor's flex order is not responsive), and the auto margin pushes Contact and the hamburger together to the right. */ @media (max-width: 900px) { .cls-header .cls-nav { order: 3; } .cls-header .cls-header-cta { margin-left: auto; } /* The open hamburger panel spans the screen, so it starts exactly at the header's bottom edge and drops the desktop dropdown's corners. The menu's own gap setting is not responsive. 23px = 82px bar less the 36px toggle's bottom at 59px. Elementor writes that gap as !important at a specificity of five classes, so the doubled classes here make six. */ .cls-header.cls-header .cls-nav.cls-nav .elementor-nav-menu__container.elementor-nav-menu--dropdown { margin-top: 23px !important; border-radius: 0; border-left: 0; border-right: 0; } } @media (max-width: 767px) { /* 68px bar, toggle bottom at 52px */ .cls-header.cls-header .cls-nav.cls-nav .elementor-nav-menu__container.elementor-nav-menu--dropdown { margin-top: 16px !important; } } /* the footer blurb wraps at about 36 characters, as in V5 */ .cls-measure-36 { max-width: 36ch; } .cls-mk-bio { --cls-mk: var(--e-global-color-bio, #3fb5e0); } .cls-mk-clin { --cls-mk: var(--e-global-color-clin, #96d24f); } .cls-mk-ai { --cls-mk: var(--e-global-color-ai, #ff5d6e); } /* the same square in front of a heading (Expertise cards, job rows) */ .elementor-widget-heading.cls-mk .elementor-heading-title { display: flex; align-items: center; gap: 10px; } .elementor-widget-heading.cls-mk .elementor-heading-title::before { content: ''; flex: none; width: var(--cls-mk-size, 10px); height: var(--cls-mk-size, 10px); border-radius: 2px; background: var(--cls-mk); } /* ════════════════════════════════════════════════════════════════ Homepage components (step 2) ════════════════════════════════════════════════════════════════ */ /* Row tones. A navy row carries .cls-dark and the mid-blue row .cls-mid; they only swap the two accent colours the rules below draw with. Every text colour is set on the widget itself, from the Site Settings globals. */ .e-con { --cls-a: var(--e-global-color-secondary, #177da6); --cls-b: var(--e-global-color-accent, #567d20); } .cls-dark, .cls-dark .e-con { --cls-a: var(--e-global-color-ondblue, #5cc0e6); --cls-b: var(--e-global-color-ondgreen, #a8d46a); } .cls-mid, .cls-mid .e-con { --cls-a: var(--e-global-color-midblue, #7fd0ef); --cls-b: var(--e-global-color-ondgreen, #a8d46a); } /* section titles balance their lines (the handoff's long statements were leaving one-word last lines), and a .cls-br break only applies from 700px */ .elementor-widget-heading h2.elementor-heading-title, .elementor-widget-heading h1.elementor-heading-title { text-wrap: balance; } @media (max-width: 699px) { .cls-br { display: none; } } /* eyebrow: a short blue-to-green rule before the section label */ .cls-eyebrow .elementor-heading-title { display: flex; align-items: center; gap: 12px; } .cls-eyebrow .elementor-heading-title::before { content: ''; flex: none; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cls-a), var(--cls-b)); } /* the one accent phrase per heading, blue into green */ .cls-two-tone { background: linear-gradient(95deg, var(--cls-a) 0%, var(--cls-b) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* the hero h1 holds the keyword line and the headline together: the first reads as the eyebrow, the second as the display line */ .cls-hero-h1 .cls-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font-size: var(--e-global-typography-secondary-font-size, 12px); font-weight: var(--e-global-typography-secondary-font-weight, 600); letter-spacing: var(--e-global-typography-secondary-letter-spacing, 0.14em); line-height: 1.4; text-transform: uppercase; color: var(--cls-a); } .cls-hero-h1 .cls-kicker::before { content: ''; flex: none; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cls-a), var(--cls-b)); } .cls-hero-h1 .cls-hero-title { display: block; text-wrap: balance; } /* measures: a lede wraps at 56 characters, a section head at 760px */ .cls-lede p { max-width: 56ch; } .cls-lede-42 p { max-width: 42ch; } .cls-lede-58 p { max-width: 58ch; } .cls-job-summary .elementor-heading-title { max-width: 58ch; } .cls-lede-62 p { max-width: 62ch; } /* a link inside small body copy: CLS blue, semibold, underlined on hover */ .cls-textlink a { color: var(--e-global-color-secondary, #177da6); font-weight: 600; text-decoration: none; } .cls-textlink a:hover { text-decoration: underline; } .cls-lede strong, .cls-lede-62 strong { color: var(--e-global-color-primary, #0b1c2c); font-weight: 600; } .cls-dark .cls-lede strong, .cls-mid .cls-lede strong { color: #fff; } .cls-head { max-width: 760px; } .cls-head-820 { max-width: 820px; } .cls-hero-copy { max-width: 580px; } .cls-narrow { max-width: 820px; margin-inline: auto; } /* cards lift a little on hover */ .e-con.cls-card { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s; } .e-con.cls-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11, 28, 44, 0.1) !important; } /* Expertise: descriptions share a height so the three role lists start on one line (AI & Data runs to four lines, the others three) */ @media (min-width: 901px) { .cls-card-line { min-height: 6.4em; } } /* a button's trailing arrow nudges right on hover */ .elementor-button .elementor-button-icon { transition: transform 0.2s; } .elementor-button:hover .elementor-button-icon { transform: translateX(3px); } /* client results: the counter's "+" in the accent blue, numbers that do not jitter while they count */ .cls-count .elementor-counter-number-wrapper { font-variant-numeric: tabular-nums; } .cls-count .elementor-counter-number-suffix { color: var(--cls-a); } /* the testimonial: V5's pill-shaped active dot, dots on the left */ .cls-quote .swiper-pagination { position: static; margin-top: 18px; text-align: left; display: flex; gap: 8px; } .cls-quote .swiper-pagination-bullet { width: 7px; height: 7px; border-radius: 4px; margin: 0 !important; transition: width 0.3s, background 0.3s; } .cls-quote .swiper-pagination-bullet-active { width: 22px; } .cls-quote .elementor-testimonial { text-align: left; } /* when clients call us: the moments sit on one vertical rule, like events on a timeline. 32px = the row's 12px padding plus half the 40px node column. */ /* Drawn as a background, not a ::before: Elementor containers use their own ::before for background overlays, and Elementor resets a container's background-image, hence the !important. */ .e-con.cls-moments { background-image: linear-gradient(var(--e-global-color-line, rgba(11, 28, 44, 0.13)), var(--e-global-color-line, rgba(11, 28, 44, 0.13))) !important; background-size: 1.5px 100%; background-position: 31.25px 0; background-repeat: no-repeat; } .cls-moments .elementor-widget-icon { position: relative; z-index: 1; } /* The moment's text shrinks before the row wraps: from a zero basis it wraps its own lines beside the dot, and only the link (full width under 900px) drops to a line of its own. */ .e-con.cls-moment > .elementor-widget-text-editor { flex-basis: 0; min-width: 0; } .cls-moment:hover .elementor-button-icon { transform: translateX(4px); } @media (max-width: 900px) { .e-con.cls-moments { background-position: 25.25px 0; } } /* job rows: the arrow nudges right on hover */ .cls-job .cls-job-go .elementor-heading-title { transition: transform 0.25s, color 0.25s; } .cls-job:hover .cls-job-go .elementor-heading-title { transform: translateX(5px); color: var(--e-global-color-secondary, #177da6); } /* ════════════════════════════════════════════════════════════════ Job board (jobs Phase 2): the job row, the job page, the archives ════════════════════════════════════════════════════════════════ */ /* Job rows and job pages carry no specialty: the board is one list, and the specialties are go-to-market positioning (CLS, 2026-10-07). */ /* the open-positions count: a small green dot before it */ .cls-live .elementor-heading-title { display: flex; align-items: center; gap: 10px; } .cls-live .elementor-heading-title::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--e-global-color-ondgreen, #a8d46a); box-shadow: 0 0 0 4px rgba(168, 212, 106, 0.18); } /* The job description is Avionté's text, reduced by the sync to paragraphs, lists and a few headings. Its headings sit at body scale (the site's H2 is a 44px section title), lists get a blue marker, and the empty paragraphs a browser makes of Word's

nesting vanish. */ .cls-job-body p:empty { display: none; } .cls-job-body :is(h2, h3, h4) { margin: 1.7em 0 0.55em; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--e-global-color-primary, #0b1c2c); } .cls-job-body :is(h2, h3, h4):first-child { margin-top: 0; } .cls-job-body :is(ul, ol) { margin: 0 0 16px; padding-left: 1.3em; } .cls-job-body li { margin-bottom: 7px; padding-left: 4px; } .cls-job-body li::marker { color: var(--e-global-color-secondary, #177da6); } .cls-job-body strong { font-weight: 600; color: var(--e-global-color-primary, #0b1c2c); } .cls-job-body a { color: var(--e-global-color-secondary, #177da6); } /* ── the homepage Open Positions widget (cls-jobs) ── Its head is drawn by the widget, so it reads the Site Settings type styles through their variables: Eyebrow, Section Title, Lede, the same ones the other section heads use. The rows are the Job row and Filled row templates, styled in Elementor. */ .cls-pos-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; } .cls-pos-copy { flex: 0 1 68%; max-width: 760px; display: flex; flex-direction: column; gap: 16px; } .cls-pos-eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--e-global-typography-secondary-font-family, 'Inter'), sans-serif; font-size: var(--e-global-typography-secondary-font-size, 12px); font-weight: var(--e-global-typography-secondary-font-weight, 600); line-height: var(--e-global-typography-secondary-line-height, 1.4); letter-spacing: var(--e-global-typography-secondary-letter-spacing, 0.14em); text-transform: var(--e-global-typography-secondary-text-transform, uppercase); color: var(--e-global-color-secondary, #177da6); } .cls-pos-eyebrow::before { content: ''; flex: none; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cls-a), var(--cls-b)); } .cls-pos-title { margin: 0; text-wrap: balance; font-family: var(--e-global-typography-h2-font-family, 'Inter'), sans-serif; font-size: var(--e-global-typography-h2-font-size, 44px); font-weight: var(--e-global-typography-h2-font-weight, 600); line-height: var(--e-global-typography-h2-line-height, 1.1); letter-spacing: var(--e-global-typography-h2-letter-spacing, -0.02em); color: var(--e-global-color-primary, #0b1c2c); } .cls-pos-lede { margin: 0; max-width: 56ch; font-family: var(--e-global-typography-lede-font-family, 'Inter'), sans-serif; font-size: var(--e-global-typography-lede-font-size, 18px); font-weight: var(--e-global-typography-lede-font-weight, 400); line-height: var(--e-global-typography-lede-line-height, 1.6); color: var(--e-global-color-muted, #4f6478); } /* the outline button of a light row: CLS blue on white (the kit gives the size, type and corners; three classes beat the kit's green) */ .cls-pos .cls-pos-btn.elementor-button { display: inline-flex; align-items: center; gap: 9px; flex: none; background: #fff; color: var(--e-global-color-secondary, #177da6); border-color: var(--e-global-color-secondary, #177da6); } .cls-pos .cls-pos-btn.elementor-button:hover, .cls-pos .cls-pos-btn.elementor-button:focus-visible { background: #eaf3f7; color: var(--e-global-color-bioink, #0f6f96); border-color: var(--e-global-color-bioink, #0f6f96); } .cls-pos .cls-pos-btn .elementor-button-icon svg { width: 0.9em; height: 0.9em; fill: currentColor; } /* each group of rows opens with a hairline; each row closes with one */ .cls-pos-group { border-top: 1px solid var(--e-global-color-linesoft, rgba(11, 28, 44, 0.07)); } .cls-pos-sub { padding: 34px 8px 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--e-global-color-muted, #4f6478); } /* Recently filled: a section of its own under the open rows (CLS, 2026-10-14: a filled role must never read as open), and alone on the Open Positions page. A heading in Card Title Large, the line that says they are closed, then the Filled rows. */ .cls-pos-filled { margin-top: 64px; } .cls-pos-fhead { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .cls-pos-ftitle { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--e-global-typography-h3lg-font-family, 'Inter'), sans-serif; font-size: var(--e-global-typography-h3lg-font-size, 22px); font-weight: var(--e-global-typography-h3lg-font-weight, 600); line-height: var(--e-global-typography-h3lg-line-height, 1.2); letter-spacing: var(--e-global-typography-h3lg-letter-spacing, -0.02em); color: var(--e-global-color-primary, #0b1c2c); } /* the green of the Filled tag on each row */ .cls-pos-ftitle::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--e-global-color-accent, #567d20); } .cls-pos-fnote { margin: 0; max-width: 64ch; font-size: var(--e-global-typography-cardtext-font-size, 15px); line-height: var(--e-global-typography-cardtext-line-height, 1.6); color: var(--e-global-color-muted, #4f6478); } .cls-pos-placeholder { margin: 0; padding: 18px; border: 1px dashed var(--e-global-color-line, rgba(11, 28, 44, 0.13)); color: var(--e-global-color-muted, #4f6478); } @media (max-width: 900px) { .cls-pos-copy { flex-basis: 100%; } .cls-pos-head { margin-bottom: 24px; } .cls-pos-filled { margin-top: 48px; } } /* the Taxonomy Filter's pills keep one line each and wrap as a row */ .elementor-widget-taxonomy-filter .e-filter { flex-wrap: wrap; row-gap: 8px; } .elementor-widget-taxonomy-filter .e-filter-item { white-space: nowrap; } /* Insights cards match heights only while they sit side by side: the Loop Grid's equal-height setting is not responsive, and in one column it made every card as tall as the tallest. */ @media (max-width: 900px) { .elementor-widget-loop-grid .elementor-loop-container { grid-auto-rows: auto !important; } } /* Motion. Elementor's own entrance animations move an element by its full height or width; V5's reveals move 18px up or 10px across. These redefine the two keyframes the site uses, site-wide. Anyone who asks for less motion gets none, and nothing is ever left invisible. */ @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-10px, 0, 0); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .elementor-invisible { visibility: visible !important; } .animated { animation: none !important; } .e-con.cls-card, .elementor-button .elementor-button-icon { transition: none; } } /* ── Motion, round 2 (2026-10-06): rules that draw themselves in, and the content that follows them ── One motif: a rule draws across, then what sits under it arrives piece by piece. Strongest on Why Us (the four numbered points, .cls-reason, also the homepage's Human First steps) and Our Process (the four stages, .cls-stage); quieter everywhere else (eyebrow rules, section heads, the page heads and closing bands, .cls-stagger). The points and stages start when they are 18% up the screen, which cls-motion.js marks with .cls-in; their hidden states apply only under html.cls-motion, which the head snippet sets for visitors who have not asked for less motion and outside the Elementor editor. Section heads follow Elementor's own reveal (.elementor-invisible until scrolled in), like every other entrance on the site. Either way the page as written is the finished state: the editor, print, reduced motion and a blocked script all show it as it ends. */ /* the points' rule: a 56px blue-to-green lead over the row's own colour (navy on light rows, white on navy). Drawn as a background, not a border, so it can grow; Elementor resets a container's background-image, hence the !important (as .cls-moments). */ .e-con.cls-reason { --cls-rule: var(--e-global-color-primary, #0b1c2c); background-image: linear-gradient(90deg, var(--cls-a), var(--cls-b)), linear-gradient(var(--cls-rule), var(--cls-rule)) !important; background-repeat: no-repeat !important; background-position: 0 0, 0 0 !important; background-size: 56px 2px, 100% 2px; } .cls-dark .e-con.cls-reason { --cls-rule: rgba(255, 255, 255, 0.8); } /* pointing at a point runs its lead the full width */ .e-con.cls-reason.cls-reason:hover { background-size: 100% 2px, 100% 2px; transition-delay: 0s; } /* the process stages' hairline */ .e-con.cls-stage { background-image: linear-gradient(var(--e-global-color-line, rgba(11, 28, 44, 0.13)), var(--e-global-color-line, rgba(11, 28, 44, 0.13))) !important; background-repeat: no-repeat !important; background-position: 0 0 !important; background-size: 100% 1px; } /* points side by side start a beat apart */ .cls-reason:nth-child(2) { --cls-d: 0.12s; } .cls-reason:nth-child(3) { --cls-d: 0.24s; } .cls-reason:nth-child(4) { --cls-d: 0.36s; } @media (prefers-reduced-motion: no-preference) { /* the rules draw left to right */ .e-con.cls-reason { transition: background-size 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--cls-d, 0s); } .cls-motion .e-con.cls-reason:not(.cls-in) { background-size: 0 2px, 0 2px; } .e-con.cls-stage { transition: background-size 1.3s cubic-bezier(0.22, 1, 0.36, 1); } .cls-motion .e-con.cls-stage:not(.cls-in) { background-size: 0 1px; } /* then the content arrives, one piece after another */ .cls-reason > .elementor-element, .cls-stagger > .elementor-element { transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); } .cls-motion .cls-reason:not(.cls-in) > .elementor-element, .cls-motion .cls-stage:not(.cls-in) .cls-stagger > .elementor-element, .elementor-invisible.cls-stagger > .elementor-element, .elementor-invisible .cls-stagger > .elementor-element { opacity: 0; transform: translateY(12px); } .cls-reason > .elementor-element:nth-child(1) { transition-delay: calc(var(--cls-d, 0s) + 0.25s); } .cls-reason > .elementor-element:nth-child(2) { transition-delay: calc(var(--cls-d, 0s) + 0.38s); } .cls-reason > .elementor-element:nth-child(3) { transition-delay: calc(var(--cls-d, 0s) + 0.5s); } .cls-stagger > .elementor-element:nth-child(1) { transition-delay: 0.05s; } .cls-stagger > .elementor-element:nth-child(2) { transition-delay: 0.15s; } .cls-stagger > .elementor-element:nth-child(3) { transition-delay: 0.25s; } .cls-stagger > .elementor-element:nth-child(4) { transition-delay: 0.35s; } .cls-stagger > .elementor-element:nth-child(5) { transition-delay: 0.45s; } .cls-stagger > .elementor-element:nth-child(n+6) { transition-delay: 0.55s; } /* in a process stage the title and copy wait for the number */ .cls-stage .cls-stagger > .elementor-element:nth-child(1) { transition-delay: 0.4s; } .cls-stage .cls-stagger > .elementor-element:nth-child(2) { transition-delay: 0.52s; } /* the process numbers rise into place from behind a mask (clip, not hidden: hidden would make the box a scroll container and pin the scroll-driven colour below to it) */ .cls-stage-num { overflow: clip; } .cls-stage-num .elementor-heading-title { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; } .cls-motion .cls-stage:not(.cls-in) .cls-stage-num .elementor-heading-title { transform: translateY(105%); } /* every eyebrow's short rule draws in with its head */ .cls-eyebrow .elementor-heading-title::before { transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; } .elementor-invisible .cls-eyebrow .elementor-heading-title::before, .elementor-invisible.cls-eyebrow .elementor-heading-title::before { width: 0; } } /* The process numbers turn from grey to blue as the reader reaches them, tied to the scroll where the browser can (Chrome, Edge, Safari 26); elsewhere they are simply blue. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .cls-stage-num .elementor-heading-title { animation: cls-lit linear both; animation-timeline: view(); animation-range: entry 100% cover 50%; } } } @keyframes cls-lit { from { color: var(--e-global-color-dim, #7f92a3); } to { color: var(--e-global-color-secondary, #177da6); } } /* ════════════════════════════════════════════════════════════════ Insights posts: the article body (build/site/article.py) Posts are written in the block editor. These style its blocks at reading size, plus the few classes the imported articles carry (build/site/import_posts.py): .cls-lead, .cls-pull, .cls-qa, .cls-stanza, .cls-coda and the dots separator. Two classes on every rule: the kit's own p and h2 rules (one class) load after this file. ════════════════════════════════════════════════════════════════ */ .cls-article-body.elementor-widget-theme-post-content p { margin: 0 0 1.15em; } .cls-article-body.elementor-widget-theme-post-content :is(h2, h3) { margin: 1.9em 0 0.6em; font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--e-global-color-primary, #0b1c2c); } .cls-article-body.elementor-widget-theme-post-content h3 { font-size: 21px; } .cls-article-body.elementor-widget-theme-post-content a { color: var(--e-global-color-secondary, #177da6); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .cls-article-body.elementor-widget-theme-post-content a:hover { color: var(--e-global-color-bioink, #0f6f96); } .cls-article-body.elementor-widget-theme-post-content strong { font-weight: 600; color: var(--e-global-color-primary, #0b1c2c); } .cls-article-body.elementor-widget-theme-post-content :is(ul, ol) { margin: 0 0 1.15em; padding-left: 1.3em; } .cls-article-body.elementor-widget-theme-post-content li { margin-bottom: 8px; padding-left: 4px; } .cls-article-body.elementor-widget-theme-post-content li::marker { color: var(--e-global-color-secondary, #177da6); } /* the opening paragraph, a step larger */ .cls-article-body.elementor-widget-theme-post-content .cls-lead { font-size: 21px; line-height: 1.55; color: var(--e-global-color-primary, #0b1c2c); } /* a pull quote: the homepage testimonial's blue rule and type */ .cls-article-body.elementor-widget-theme-post-content .cls-pull { margin: 2em 0; padding: 4px 0 4px 28px; border: 0; border-left: 3px solid var(--e-global-color-secondary, #177da6); background: none; quotes: none; } .cls-article-body.elementor-widget-theme-post-content .cls-pull p { margin: 0; font-size: 23px; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: var(--e-global-color-primary, #0b1c2c); } .cls-article-body.elementor-widget-theme-post-content .cls-pull cite { display: block; margin-top: 12px; font-size: 12.5px; font-style: normal; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--e-global-color-muted, #4f6478); } /* Q&A: each turn in a tinted panel (grey asks, pale green answers), the speaker as a small label above in the matching colour */ .cls-article-body.elementor-widget-theme-post-content .cls-qa { margin: 0 0 12px; padding: 18px 22px; border-radius: 12px; } .cls-article-body.elementor-widget-theme-post-content .cls-qa-q { background: #f1f5f7; } .cls-article-body.elementor-widget-theme-post-content .cls-qa-a { background: #f1f6ea; } .cls-article-body.elementor-widget-theme-post-content .cls-qa > strong:first-child { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--e-global-color-secondary, #177da6); } .cls-article-body.elementor-widget-theme-post-content .cls-qa-a > strong:first-child { color: var(--e-global-color-clinink, #4a6c1b); } .cls-article-body.elementor-widget-theme-post-content .cls-qa-a + p:not(.cls-qa) { margin-top: 1.6em; } /* short lines set close, read as one verse; the closing lines in navy */ .cls-article-body.elementor-widget-theme-post-content .cls-stanza { margin-bottom: 8px; font-weight: 500; color: var(--e-global-color-primary, #0b1c2c); } .cls-article-body.elementor-widget-theme-post-content .cls-stanza + p:not(.cls-stanza) { margin-top: 24px; } .cls-article-body.elementor-widget-theme-post-content .cls-coda { margin-bottom: 4px; font-size: 21px; font-weight: 600; line-height: 1.4; color: var(--e-global-color-primary, #0b1c2c); } .cls-article-body.elementor-widget-theme-post-content p:not(.cls-coda) + .cls-coda { margin-top: 1.7em; } /* the section break: three dots, blue to green (the live article's divider). Drawn on ::before: WordPress's own block styles give the dots separator "background: none !important" and their own "···" glyphs. */ .cls-article-body.elementor-widget-theme-post-content hr.is-style-dots { height: auto; margin: 2.4em 0; border: 0 !important; background: none !important; text-align: left; overflow: visible; } .cls-article-body.elementor-widget-theme-post-content hr.is-style-dots::before { content: ''; display: block; width: 6px; height: 6px; margin: 0 auto; padding: 0; letter-spacing: 0; /* one dot, then two copies 19px apart: blue, blue-green, green */ transform: translateX(-19px); border-radius: 50%; background: var(--e-global-color-secondary, #177da6); box-shadow: 19px 0 0 #3d8a6a, 38px 0 0 var(--e-global-color-accent, #567d20); } /* the byline headshot */ .cls-avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } /* ════════════════════════════════════════════════════════════════ Case studies (build/site/case_study.py) The story is the post's own content: a Columns block of three (the challenge, the approach, the result), each headed by an h2 that reads as the site's eyebrow. Laid out here in full rather than leaning on WordPress's column styles, which stack at 782px and hold their breakpoints with !important; the site's tablet break is 900px. ════════════════════════════════════════════════════════════════ */ .cls-case-body.elementor-widget-theme-post-content .cls-case-story { display: flex; flex-wrap: nowrap !important; gap: 44px; margin: 0; } .cls-case-body.elementor-widget-theme-post-content .cls-case-story > .wp-block-column { flex: 1 1 0 !important; min-width: 0; } .cls-case-body.elementor-widget-theme-post-content .cls-case-story h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: var(--e-global-typography-secondary-font-size, 12px); font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--e-global-color-secondary, #177da6); } .cls-case-body.elementor-widget-theme-post-content .cls-case-story h2::before { content: ''; flex: none; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cls-a), var(--cls-b)); } .cls-case-body.elementor-widget-theme-post-content .cls-case-story :is(p, ul):last-child { margin-bottom: 0; } .cls-case-body.elementor-widget-theme-post-content .cls-case-story strong { color: var(--e-global-color-secondary, #177da6); } @media (max-width: 900px) { .cls-case-body.elementor-widget-theme-post-content .cls-case-story { flex-wrap: wrap !important; gap: 36px; } .cls-case-body.elementor-widget-theme-post-content .cls-case-story > .wp-block-column { flex: 1 1 100% !important; } } /* ════════════════════════════════════════════════════════════════ The team (build/site/team.py): illustrated portraits, the Leadership page's bios and contact line ════════════════════════════════════════════════════════════════ */ .cls-portrait img { aspect-ratio: 1; object-fit: cover; } .cls-bio p:last-child { margin-bottom: 0; } .cls-contact-line p { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 4px; } .cls-contact-line .cls-sep { margin: 0 10px; color: var(--e-global-color-dim, #7f92a3); } .cls-contact-line a { overflow-wrap: anywhere; } /* phones: the line wraps, so no separator is left leading a line */ @media (max-width: 600px) { .cls-contact-line p { column-gap: 18px; } .cls-contact-line .cls-sep { display: none; } } /* the takeaway and the closing line balance their lines, as h2s do site-wide */ .cls-balance .elementor-heading-title { text-wrap: balance; } /* two cards side by side: what the first number counts holds two lines, so a one-line label ("positions filled and counting") keeps its divider level with a two-line one */ @media (min-width: 901px) { .cls-case-counts .elementor-heading-title { min-height: 3em; } } /* the card's "Read the case study" follows the pointer, as the arrow links do */ .cls-case-card .cls-case-more .elementor-heading-title { transition: color 0.2s; } .cls-case-card:hover .cls-case-more .elementor-heading-title { color: var(--e-global-color-ondgreen, #a8d46a); } @media (max-width: 767px) { .cls-article-body.elementor-widget-theme-post-content .cls-lead { font-size: 19px; } .cls-article-body.elementor-widget-theme-post-content .cls-pull p { font-size: 20px; } .cls-article-body.elementor-widget-theme-post-content :is(h2, h3) { font-size: 23px; } .cls-article-body.elementor-widget-theme-post-content .cls-pull { padding-left: 18px; } } /* ════════════════════════════════════════════════════════════════ Custom widgets (step 3): the funnel, the jargon cloud, the helix. Each is drawn finished by its PHP; cls-widgets.js animates it. ════════════════════════════════════════════════════════════════ */ /* ── Hiring Funnel ── */ .cls-funnel { margin: 0; --lab: 112px; --gap: 16px; } .cls-funnel-row { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr) 52px; align-items: center; gap: var(--gap); } .cls-funnel-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-global-color-muted, #4f6478); } .cls-funnel-track { position: relative; display: block; height: 16px; border-radius: 3px; background: var(--e-global-color-linesoft, rgba(11, 28, 44, 0.07)); overflow: hidden; } /* each bar is drawn at its real share; it only collapses (.is-armed) when the funnel starts below the fold, then grows back as it comes in */ .cls-funnel-fill { position: absolute; inset: 0; border-radius: 3px; background: var(--e-global-color-primary, #0b1c2c); transform-origin: left; transform: scaleX(var(--share)); transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i) * 260ms + 120ms); } .cls-funnel-row.tone-base .cls-funnel-fill { background: #b7c5d1; } .cls-funnel-row.tone-blue .cls-funnel-fill { background: var(--e-global-color-secondary, #177da6); } .cls-funnel-row.tone-green .cls-funnel-fill { background: var(--e-global-color-accent, #567d20); } .cls-funnel.is-armed .cls-funnel-fill { transform: scaleX(0); } .cls-funnel.is-armed.is-on .cls-funnel-fill { transform: scaleX(var(--share)); } .cls-funnel-n { font-size: 14px; font-weight: 600; color: var(--e-global-color-text, #16293a); text-align: right; font-variant-numeric: tabular-nums; } /* the step between two bars: a stem down from the bar's start, the ratio large beside it */ .cls-funnel-step { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 2px; padding: 16px 0 16px calc(var(--lab) + var(--gap) + 20px); } .cls-funnel-stem { position: absolute; left: calc(var(--lab) + var(--gap)); top: 0; bottom: 0; width: 1.5px; background: var(--e-global-color-line, rgba(11, 28, 44, 0.13)); } .cls-funnel-ratio { font-size: clamp(34px, 3.6vw, 48px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--e-global-color-primary, #0b1c2c); font-variant-numeric: tabular-nums; } .cls-funnel-pct { color: var(--e-global-color-secondary, #177da6); } .cls-funnel-step.tone-green .cls-funnel-pct { color: var(--e-global-color-accent, #567d20); } .cls-funnel-step.tone-navy .cls-funnel-pct { color: var(--e-global-color-primary, #0b1c2c); } .cls-funnel-step-label { font-size: 15px; color: var(--e-global-color-muted, #4f6478); } /* upright: the theme sets figcaptions in italic */ .cls-funnel-cap { margin-top: 18px; font-size: 12.5px; font-style: normal; letter-spacing: 0.02em; color: var(--e-global-color-dim, #7f92a3); } @media (max-width: 900px) { .cls-funnel { --lab: 100px; --gap: 10px; } .cls-funnel-row { grid-template-columns: var(--lab) minmax(0, 1fr) 40px; } .cls-funnel-label { font-size: 11.5px; letter-spacing: 0.05em; } } @media (max-width: 400px) { .cls-funnel { --lab: 86px; --gap: 8px; } .cls-funnel-step { padding-left: calc(var(--lab) + var(--gap) + 14px); } .cls-funnel-step-label { font-size: 14px; overflow-wrap: anywhere; } } /* ── Jargon Cloud ── Finished by default: every word at its place (x/y, a percent of the field, to the word's centre), in its tier's size and colour. The script measures the field into --cw/--ch; the fallbacks are V5's desktop field. */ .cls-jargon { position: relative; height: 380px; overflow: hidden; --cw: 1112px; --ch: 380px; } .cls-jw { position: absolute; left: 0; top: 0; white-space: nowrap; line-height: 1.2; font-weight: 500; user-select: none; transform: translate(calc(var(--x) * var(--cw) / 100), calc(var(--y) * var(--ch) / 100)) translate(-50%, -50%); transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) var(--d2), opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--d1), color 0.9s ease; } .cls-jw.t1 { font-size: 38px; font-weight: 700; letter-spacing: -0.02em; color: var(--e-global-color-primary, #0b1c2c); } .cls-jw.t2 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: var(--e-global-color-text, #16293a); } .cls-jw.t3 { font-size: 16px; color: var(--e-global-color-muted, #4f6478); } /* armed: scattered noise, every word at one small size and colour, hidden */ .cls-jargon.is-armed .cls-jw { opacity: 0; color: var(--e-global-color-dim, #7f92a3); transform: translate(calc(var(--nx) * var(--cw) / 100), calc(var(--ny) * var(--ch) / 100)) translate(-50%, -50%) scale(var(--ns)); } .cls-jargon.is-armed.is-noise .cls-jw { opacity: 0.85; } .cls-jargon.no-anim .cls-jw { transition: none; } /* once landed, every word floats for good: x and y loop on their own periods, each starting half a period in (its centre), so nothing jumps */ .cls-jf-x, .cls-jf-y { display: inline-block; } .cls-jargon.is-floating .cls-jf-x { animation: cls-jf-x var(--tx) ease-in-out calc(var(--tx) * -0.5) infinite var(--ax); } .cls-jargon.is-floating .cls-jf-y { animation: cls-jf-y var(--ty) ease-in-out calc(var(--ty) * -0.5) infinite var(--ay); } @keyframes cls-jf-x { from { transform: translateX(calc(var(--fx) * var(--k, 1) * -1)); } to { transform: translateX(calc(var(--fx) * var(--k, 1))); } } @keyframes cls-jf-y { from { transform: translateY(calc(var(--fy) * var(--k, 1) * -1)); } to { transform: translateY(calc(var(--fy) * var(--k, 1))); } } /* under 1000px: a centred flow in the phone order, the float scaled down */ @media (max-width: 999px) { .cls-jargon { height: auto; overflow: visible; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 14px 20px; padding: 8px 0; max-width: 540px; margin-left: auto; margin-right: auto; --k: 0.4; } .cls-jw { position: relative; order: var(--o); transform: none; transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--d1n), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--d1n), color 0.9s ease; } .cls-jw.t1 { font-size: 30px; } .cls-jw.t2 { font-size: 19px; } .cls-jw.t3 { font-size: 15px; } .cls-jargon.is-armed .cls-jw { opacity: 0; transform: translateY(8px); } .cls-jargon.is-armed.is-noise .cls-jw { opacity: 1; transform: none; } } /* ── Helix ── The widget leaves the flow and runs the full height of its section, in the margin, behind the content (the section clips it). */ .elementor-element.elementor-widget-cls-helix { position: absolute !important; top: 0; bottom: 0; margin: 0 !important; width: clamp(104px, 10vw, 140px) !important; max-width: none !important; pointer-events: none; z-index: 0; } .elementor-widget-cls-helix.cls-helix--right { right: clamp(-44px, 1.2vw, 36px); left: auto; } .elementor-widget-cls-helix.cls-helix--left { left: clamp(-44px, 1.2vw, 36px); right: auto; } .cls-helix { position: absolute; inset: 0; display: flex; justify-content: center; opacity: 0.45; } .cls-helix svg { display: block; overflow: visible; } .cls-helix .front { stroke: rgba(11, 28, 44, 0.45); } .cls-helix .back { stroke: rgba(11, 28, 44, 0.17); } .cls-helix .r { stroke: rgba(11, 28, 44, 0.6); } .cls-helix .a1 { stroke: var(--e-global-color-secondary, #177da6); } .cls-helix .a2 { stroke: var(--e-global-color-accent, #567d20); } .cls-helix.tone-dark { opacity: 0.4; } .cls-helix.tone-dark .front { stroke: rgba(255, 255, 255, 0.6); } .cls-helix.tone-dark .back { stroke: rgba(255, 255, 255, 0.22); } .cls-helix.tone-dark .r { stroke: rgba(255, 255, 255, 0.85); } .cls-helix.tone-dark .a1 { stroke: var(--e-global-color-ondblue, #5cc0e6); } .cls-helix.tone-dark .a2 { stroke: var(--e-global-color-ondgreen, #a8d46a); } @media (max-width: 900px) { .elementor-element.elementor-widget-cls-helix { display: none; } } /* ── Hero video (the V5 video edition's treatment) ── Desktop: the widget leaves the flow and fills its section, behind the copy (the section clips it; the copy sits at z-index 1). The footage comes up out of the navy: faint behind the copy (which ends near 52% at 1440), full from about three quarters across. */ .elementor-element.elementor-widget-cls-hero-video { position: absolute !important; inset: 0; margin: 0 !important; width: auto !important; max-width: none !important; z-index: 0; } .cls-hero-stage { position: absolute; inset: 0; } .cls-hero-media { position: absolute; inset: 0; overflow: hidden; background: var(--e-global-color-primary, #0b1c2c); -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.2) 38%, rgba(0, 0, 0, 0.6) 58%, #000 74%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.2) 38%, rgba(0, 0, 0, 0.6) 58%, #000 74%); } /* the footage enters the site treated, never raw: pulled toward the palette */ .cls-hero-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.6) contrast(1.06) brightness(0.9); } /* a navy hold across the frame, and a darker floor so the bottom edge never glares */ .cls-hero-tint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(11, 28, 44, 0.55) 0%, rgba(11, 28, 44, 0) 34%), rgba(11, 28, 44, 0.26); } /* The pause button. Elementor's site-wide button style (Site Settings > Buttons: green fill, 8px corners, padding) reaches every