Components

Table

The Table content element renders inside .content-table, styled by tables.css.

Table

Plan	Type	Status
Acme 401(k)	DC	Active
Beta DB	Defined benefit	Review

<div class="content-table"><table><thead><tr><th>Plan</th><th>Type</th><th>Status</th></tr></thead><tbody><tr><td>Acme 401(k)</td><td>DC</td><td>Active</td></tr><tr><td>Beta DB</td><td>Defined benefit</td><td>Review</td></tr></tbody></table></div>

Components

Code

The Code element renders inside .content-code with syntax styling from code.css.

Code element

function greet(name) {
    return `Hello, ${name}`;
}

<div class="content-code"><pre><code>function greet(name) {
    return `Hello, ${name}`;
}</code></pre></div>

Components

Forms

Real forms are Contao form elements; forms.css styles the widgets. The markup below mirrors a Contao text widget + submit.

Form fields

<div class="formbody"><div class="widget widget-text"><label for="sg-name">Name</label><input type="text" id="sg-name" class="text" placeholder="Your name"></div><div class="widget widget-text"><label for="sg-email">Email</label><input type="email" id="sg-email" class="text" placeholder="you@example.com"></div><div class="widget widget-submit"><button type="submit">Send</button></div></div>

Components

Bar charts

True-scale bar charts from bar-compare.css. Bar sizes are set per-bar as an inline style (width:N% for horizontal, --h:N% for the column chart); the winning row/segment/column uses the prime→ink gradient or a solid navy. Bars grow in on scroll and degrade to static. A shared .chart-title captions any of them.

Scenario comparison

class="bar-compare" — one .bc-row per scenario (label + value over a proportional bar); mark the winner .bc-row--hi.

Safe harbor 401(k) only$24,500

+ cross-tested profit sharing$72,000

+ cash balance combo (age dependent)≈ $500,000

Bars are drawn to true scale. The combo design is roughly twenty times the safe-harbor-only figure.

<div class="bar-compare"><div class="bc-row"><div class="bc-head"><span class="bc-label">Safe harbor 401(k) only</span><span class="bc-val">$24,500</span></div><div class="bc-track"><span class="bc-fill bc-fill--g1" style="width:8%"></span></div></div><div class="bc-row"><div class="bc-head"><span class="bc-label">+ cross-tested profit sharing</span><span class="bc-val">$72,000</span></div><div class="bc-track"><span class="bc-fill bc-fill--g2" style="width:20%"></span></div></div><div class="bc-row bc-row--hi"><div class="bc-head"><span class="bc-label">+ cash balance combo (age dependent)</span><span class="bc-val">&asymp; $500,000</span></div><div class="bc-track"><span class="bc-fill bc-fill--hi" style="width:100%"></span></div></div><p class="bc-note">Bars are drawn to true scale. The combo design is roughly twenty times the safe-harbor-only figure.</p></div>

Contribution stack

class="bar-stack" — one rail of .bs-seg segments with a swatch .bs-legend below.

401(k) deferral $24,500Profit sharing $47,500Cash balance $428,000

A well-built combo plan can turn a $72,000 annual contribution into roughly $500,000. All tax-advantaged, all defensible.

<div class="bar-stack"><div class="bs-track"><span class="bs-seg bs-seg--g1" style="width:7%"></span><span class="bs-seg bs-seg--g2" style="width:14%"></span><span class="bs-seg bs-seg--hi" style="width:79%"></span></div><div class="bs-legend"><span class="bs-key"><i class="bs-dot bs-dot--g1"></i>401(k) deferral <b>$24,500</b></span><span class="bs-key"><i class="bs-dot bs-dot--g2"></i>Profit sharing <b>$47,500</b></span><span class="bs-key"><i class="bs-dot bs-dot--hi"></i>Cash balance <b>$428,000</b></span></div><p class="bs-note">A well-built combo plan can turn a $72,000 annual contribution into roughly $500,000. All tax-advantaged, all defensible.</p></div>

Column chart

class="bar-col" — a .bc-plot of .bcx columns (value over bar, category under); grey bars, navy highlight column.

Maximum tax-deductible defined benefit contribution by age

$220kAge 45

$300kAge 50

$375kAge 55

$550kAge 62

$500kAge 65

$650kAge 70

Per-bar height is an inline style="--h:N%" (% of the plot track); the highlight column carries .bcx--hi.

<p class="chart-title">Maximum tax-deductible defined benefit contribution by age</p><div class="bar-col"><div class="bc-plot"><div class="bcx" style="--h:30%"><span class="bcx-col"><b class="bcx-val">$220k</b><span class="bcx-bar"></span></span><span class="bcx-lab">Age 45</span></div><div class="bcx" style="--h:42%"><span class="bcx-col"><b class="bcx-val">$300k</b><span class="bcx-bar"></span></span><span class="bcx-lab">Age 50</span></div><div class="bcx" style="--h:52%"><span class="bcx-col"><b class="bcx-val">$375k</b><span class="bcx-bar"></span></span><span class="bcx-lab">Age 55</span></div><div class="bcx" style="--h:76%"><span class="bcx-col"><b class="bcx-val">$550k</b><span class="bcx-bar"></span></span><span class="bcx-lab">Age 62</span></div><div class="bcx" style="--h:69%"><span class="bcx-col"><b class="bcx-val">$500k</b><span class="bcx-bar"></span></span><span class="bcx-lab">Age 65</span></div><div class="bcx bcx--hi" style="--h:90%"><span class="bcx-col"><b class="bcx-val">$650k</b><span class="bcx-bar"></span></span><span class="bcx-lab">Age 70</span></div></div></div><p class="bar-col-note">Per-bar height is an inline <code>style="--h:N%"</code> (% of the plot track); the highlight column carries <code>.bcx--hi</code>.</p>

Components

Metric row

A strip of headline metrics from stats.css: a hairline across the top of the row, vertical dividers between cells, a display-face number and a small caption. Build as an element_group row stats with col-* text children (h3 number + p caption). Auto-inverts on a dark band.

Three stats

class="row stats" with col-1-3 children (h3 + p).

No audit failures.

Across every plan we administer.

2–5 days.

Average turnaround, depending on plan size.

100% paid out.

Terminated participants; we pursue lost balances so no legacy liability remains.

<div class="row stats"><div class="col-1-3"><h3>No audit failures.</h3><p>Across every plan we administer.</p></div><div class="col-1-3"><h3>2&ndash;5 days.</h3><p>Average turnaround, depending on plan size.</p></div><div class="col-1-3"><h3>100% paid out.</h3><p>Terminated participants; we pursue lost balances so no legacy liability remains.</p></div></div>

Components

Milestone & values rows

Two content modifiers on the metric row, both using .stats--split: instead of a per-cell border (which is as tall as its own cell, so it goes ragged when the cells hold different amounts of copy) each cell draws ONE fixed-height rule, centred in the gutter. .stats--milestones is a dated history strip — grey Literata label, last cell goes brand-navy, and no top rule of its own so it can hang under a hero’s bottom framing rule. .stats--values is a statement row — Literata 500 title over a slightly larger body. Dividers disappear at the same widths the columns stop sitting side by side.

Milestones

class="row stats stats--split stats--milestones" with col-20 children (h3 label + p).

2014

Dan moves inside a TPA to learn the business from the ground up.

2016

Founded from scratch, on a bet that depth and service could coexist.

~100 clients

Built to roughly a hundred clients before infrastructure became the constraint.

Merger

Added staff and systems without letting the standard slip.

Today

Plans administered nationwide, for advisors who want a partner.

<div class="row stats stats--split stats--milestones"><div class="col-20"><h3>2014</h3><p>Dan moves inside a TPA to learn the business from the ground up.</p></div><div class="col-20"><h3>2016</h3><p>Founded from scratch, on a bet that depth and service could coexist.</p></div><div class="col-20"><h3>~100 clients</h3><p>Built to roughly a hundred clients before infrastructure became the constraint.</p></div><div class="col-20"><h3>Merger</h3><p>Added staff and systems without letting the standard slip.</p></div><div class="col-20"><h3>Today</h3><p>Plans administered nationwide, for advisors who want a partner.</p></div></div>

Values

class="row stats stats--split stats--values" with col-1-4 children (h3 + p).

Answer fast, solve fully.

Two rings, one owner of the problem.

Do the hard designs.

Others pass because it’s harder. We’ve never minded hard work.

Tell the truth.

Including “you’d be better served elsewhere,” when it’s true.

Think in decades.

We build plans, and relationships, meant to last.

<div class="row stats stats--split stats--values"><div class="col-1-4"><h3>Answer fast, solve fully.</h3><p>Two rings, one owner of the problem.</p></div><div class="col-1-4"><h3>Do the hard designs.</h3><p>Others pass because it&rsquo;s harder. We&rsquo;ve never minded hard work.</p></div><div class="col-1-4"><h3>Tell the truth.</h3><p>Including &ldquo;you&rsquo;d be better served elsewhere,&rdquo; when it&rsquo;s true.</p></div><div class="col-1-4"><h3>Think in decades.</h3><p>We build plans, and relationships, meant to last.</p></div></div>

Components

Team grid

From team-grid.css. A row of people: a cropped portrait on a fixed aspect (so every card’s text starts on the same line whatever the source photo), then the name, role and bio — styled BY TAG, so a card carries no inner classes and cannot drift. .team-note fills a short row’s leftover columns with one dark statement and is sized to the portrait band, so its bottom edge lines up with the photos beside it. Build as row team-grid → col-1-3 team-card (an image element + a text), plus an optional col-* team-note text.

Two cards + a note

col-1-3 team-card (img + h3 + role p + bio p) and col-2-3 team-note.

Daniel Jock

Enrolled Actuary, President

An enrolled actuary for employers large and small, and the reason the phone gets answered in two rings.

Steven Ahn

Enrolled Actuary, Chief Operations Officer

Owns every process and procedure in the firm, and still takes client consultations.

Roughly 30 more of us.

<div class="row team-grid gap-24"><div class="col-1-3 team-card"><img src="/files/content/our-story/dan.jpg" alt="Daniel Jock"><h3>Daniel Jock</h3><p>Enrolled Actuary, President</p><p>An enrolled actuary for employers large and small, and the reason the phone gets answered in two rings.</p></div><div class="col-1-3 team-card"><img src="/files/content/our-story/Steve-Headshot.jpg" alt="Steven Ahn"><h3>Steven Ahn</h3><p>Enrolled Actuary, Chief Operations Officer</p><p>Owns every process and procedure in the firm, and still takes client consultations.</p></div><div class="col-2-3 team-note"><p>Roughly 30 more of us.</p></div></div>

Components

Callout cards

From callout.css. .callout is a dark navy feature card (eyebrow, oversized numeral, heading, body). .callout--outline is the light variant: white fill, 1px prime border, square corners — a quiet “deliverable” card that auto-stacks.

Outline cards

class="callout callout--outline" — stack two or more; they space themselves.

One summary.

The numbers, in plain English, once the work is done.

Five to ten signatures.

Spread across the year, each with a plain-English summary of what it does and why.

<div class="callout callout--outline"><h3>One summary.</h3><p>The numbers, in plain English, once the work is done.</p></div><div class="callout callout--outline"><h3>Five to ten signatures.</h3><p>Spread across the year, each with a plain-English summary of what it does and why.</p></div>

Dark feature card

class="callout" — eyebrow + .numeral + h3 + body on --prime-deep.

SECURE 2.0

2.0

The small-plan market is booming.

Incentives and state mandates are pulling owners toward new plans.

<div class="callout"><p class="eyebrow on-dark">SECURE 2.0</p><h2 class="numeral">2.0</h2><h3>The small-plan market is booming.</h3><p>Incentives and state mandates are pulling owners toward new plans.</p></div>

Components

Chips

Pill tags from chips.css: a wrapping .chips row of .chip spans. Neutral by default (navy label, lightens on a dark band). .chips--muted is the light capability variant — white fill, grey label, denser.

Chips

class="chips" with .chip children.

Cash balanceCombo designsCross-testedControlled groups

<div class="chips"><span class="chip">Cash balance</span><span class="chip">Combo designs</span><span class="chip">Cross-tested</span><span class="chip">Controlled groups</span></div>

Muted chips

class="chips chips--muted" — quieter, for a long capability list.

Census reconciliationADP/ACP testingForm 5500 preparationVesting calculationsAnd more…

<div class="chips chips--muted"><span class="chip">Census reconciliation</span><span class="chip">ADP/ACP testing</span><span class="chip">Form 5500 preparation</span><span class="chip">Vesting calculations</span><span class="chip">And more&hellip;</span></div>

Components

Process timeline

A numbered timeline from timeline.css: a connector line with .timeline__dot circles, each with a heading + short body. Folds to a left vertical spine on mobile and draws in on scroll (the j_reveal layout template). Build as an element_group timeline with text.timeline__step children.

Three steps

class="timeline" with .timeline__step children (dot + h3 + p).

1

Introduce us.

A two-line email is plenty.

2

We assess.

A design review of the client's situation, with the numbers presented to you first if you prefer.

3

You deliver the win.

Or we present together. Your call, your client, your credit.

<div class="timeline"><div class="timeline__step"><span class="timeline__dot">1</span><h3>Introduce us.</h3><p>A two-line email is plenty.</p></div><div class="timeline__step"><span class="timeline__dot">2</span><h3>We assess.</h3><p>A design review of the client's situation, with the numbers presented to you first if you prefer.</p></div><div class="timeline__step"><span class="timeline__dot">3</span><h3>You deliver the win.</h3><p>Or we present together. Your call, your client, your credit.</p></div></div>

Components

Numbered editorial band

A numbered two-column editorial row (What We Do services, Resources categories): a grey .num-label (from num-label.css) + heading on the left, body + a navy .btn.alt on the right. Build as an element_group row gap-60 → col-2-5 (label + h2) and col-3-5 (body + button).

Numbered band

.num-label in a row gap-60 two-column layout.

01 · PLAN EXPLAINERS

Complex plans, explained on one page.

Seven one-page PDFs, each in the same 1-2-3 format: what it is, who it’s for, what it’s worth.

Browse the explainers →

<div class="row gap-60"><div class="col-2-5"><p class="num-label">01 &middot; PLAN EXPLAINERS</p><h2>Complex plans, explained on one page.</h2></div><div class="col-3-5"><p>Seven one-page PDFs, each in the same 1-2-3 format: what it is, who it&rsquo;s for, what it&rsquo;s worth.</p><p><a class="btn alt" href="#">Browse the explainers &rarr;</a></p></div></div>

Components

FAQ accordion

The editorial FAQ treatment from accordion.css: accordion--faq on a native Contao accordion element. The question is a display-face statement flush with the container edge, a rule runs the full width above every row and below the last, and the marker is a + / − drawn from two gradients rather than a caret. Contao takes each nested element’s sectionHeadline as the toggle text — not headline, which renders an empty button — and leaves the FIRST panel open unless closeSections is set. Live element, so view it on a real page: /faq.

See live

Build: an accordion element with cssID accordion--faq, whose children are the panels — each a text whose sectionHeadline is the question and whose body is the answer.

Components

Article cards & news

From article-cards.css — the ins-* family for Contao NEWS output, so its markup lives in Twig templates rather than a page spec (news_latest, news_latest_featured, news_full, nav_newscategories). .ins-grid goes on the news-list ELEMENT, not the cards, because a module renders one template per item; .layout_wrapper inside it is set to display:contents so the cards become the grid items. The filter pills’ “All” is the categories extension’s own reset item, and its active pill is a <strong>. Live on /insights and the reader.

Grid card

article.ins-card — 2px navy top rule, category eyebrow, display-face title, teaser, meta.

Plan Design

The five-minute cash balance conversation

What to say, in what order, when an owner asks why they should care.

28 Jan 2026 · 4 min read

Regulation & SECURE 2.0

State retirement mandates

A state-by-state view of where the deadline has already passed.

16 Oct 2025 · 4 min read

Practice Growth

How to spot a neglected plan

Four signals in a public filing that tell you a plan is underserved.

20 Nov 2025 · 4 min read

<div class="ins-grid"><article class="ins-card"><p class="ins-card__cat">Plan Design</p><h3 class="ins-card__title"><a href="#">The five-minute cash balance conversation</a></h3><div class="ins-card__teaser"><p>What to say, in what order, when an owner asks why they should care.</p></div><p class="ins-meta">28 Jan 2026 &middot; 4 min read</p></article><article class="ins-card"><p class="ins-card__cat">Regulation &amp; SECURE 2.0</p><h3 class="ins-card__title"><a href="#">State retirement mandates</a></h3><div class="ins-card__teaser"><p>A state-by-state view of where the deadline has already passed.</p></div><p class="ins-meta">16 Oct 2025 &middot; 4 min read</p></article><article class="ins-card"><p class="ins-card__cat">Practice Growth</p><h3 class="ins-card__title"><a href="#">How to spot a neglected plan</a></h3><div class="ins-card__teaser"><p>Four signals in a public filing that tell you a plan is underserved.</p></div><p class="ins-meta">20 Nov 2025 &middot; 4 min read</p></article></div>

Filter pills

ul.ins-filters → .ins-filter; the active one is .is-active.

<ul class="ins-filters"><li class="ins-filters__item reset"><strong class="ins-filter is-active">All</strong></li><li class="ins-filters__item"><a class="ins-filter" href="#">Plan Design</a></li><li class="ins-filters__item"><a class="ins-filter" href="#">Regulation &amp; SECURE 2.0</a></li><li class="ins-filters__item"><a class="ins-filter" href="#">Practice Growth</a></li></ul>

Featured article

.ins-featured — copy column beside a dark pull-quote panel; the quote is the article’s subheadline.

Featured · Regulation & SECURE 2.0

Why 2026 is the best year in a decade to talk to business owners

Here’s the version of that conversation an advisor can actually use.

Read the article →

6 Feb 2026 · 4 min read

<div class="ins-featured"><div class="ins-featured__copy"><p class="ins-card__cat ins-card__cat--featured">Featured &middot; Regulation &amp; SECURE 2.0</p><h2 class="ins-featured__title"><a href="#">Why 2026 is the best year in a decade to talk to business owners</a></h2><div class="ins-featured__teaser"><p>Here&rsquo;s the version of that conversation an advisor can actually use.</p></div><p class="ins-featured__cta"><a class="btn alt" href="#">Read the article &nbsp;&rarr;</a></p><p class="ins-meta">6 Feb 2026 &middot; 4 min read</p></div><aside class="ins-featured__panel"><blockquote><p>&ldquo;SECURE 2.0 credits and state mandates have changed the math on new small-employer plans.&rdquo;</p></blockquote></aside></div>

Components

Other native elements

These ship styled but need their real element (and, for some, a JS asset) to render properly — view them live rather than as static markup.

See live

Accordion — .content-accordion (Handorgel), from accordion.css.
Gallery — .content-gallery with column variants, from gallery.css.
Downloads — .content-download / .content-downloads.
Lightbox — Colorbox (#colorbox), from lightbox.css.
Pagination — list/news pagination, from pagination.css.

Components

Cards

One surface component: card + a surface + an optional notch and hairline. The copy is styled by tag, so the editor's plain rich text is all it needs.

Surfaces

card (white), card--soft, card--accent, card--prime, card--prime-deep. A site adds its own: .card--x { --surface: … }.

Card title

Copy that balances its lines, as a designer breaks it.

Explore →

Card title

Copy that balances its lines, as a designer breaks it.

Explore →

Card title

Copy that balances its lines, as a designer breaks it.

Explore →

[element_group · toolbox: row]
  [text · toolbox: col-1-3 · class: card outline notch-tr]
    <p>
    <i class="fa-light fa-gears card__icon">
    </i>
    </p>
    <h3>Card title</h3>
    <p>Copy that balances its lines, as a designer breaks it.</p>
    <p>
    <a class="link-arrow" href="#">Explore →</a>
    </p>
  [text · toolbox: col-1-3 · class: card card--soft notch-tr]
    <p>
    <i class="fa-light fa-gears card__icon">
    </i>
    </p>
    <h3>Card title</h3>
    <p>Copy that balances its lines, as a designer breaks it.</p>
    <p>
    <a class="link-arrow" href="#">Explore →</a>
    </p>
  [text · toolbox: col-1-3 · class: card card--prime-deep notch-tr]
    <p>
    <i class="fa-light fa-gears card__icon">
    </i>
    </p>
    <h3>Card title</h3>
    <p>Copy that balances its lines, as a designer breaks it.</p>
    <p>
    <a class="link-arrow" href="#">Explore →</a>
    </p>

Icon beside the copy

card card--row: the icon paragraph and a <div>. Under 380px wide the icon moves above the copy.

Row card

Icon left, copy right.

On a dark surface

The same markup.

[element_group · toolbox: row]
  [text · toolbox: col-1-2 · class: card card--row card--soft]
    <p>
    <i class="fa-light fa-shield-halved card__icon">
    </i>
    </p>
    <div>
    <h3>Row card</h3>
    <p>Icon left, copy right.</p>
    </div>
  [text · toolbox: col-1-2 · class: card card--row card--prime-deep]
    <p>
    <i class="fa-light fa-lock card__icon">
    </i>
    </p>
    <div>
    <h3>On a dark surface</h3>
    <p>The same markup.</p>
    </div>

Sizes

card--sm for tiles and steps, card--lg for a feature card's big title, card--text-sm for dense grids.

Small

Tile copy.

Large title

Feature copy.

Small text

Dense catalogue copy.

[element_group · toolbox: row]
  [text · toolbox: col-1-3 · class: card card--sm card--soft]
    <h3>Small</h3>
    <p>Tile copy.</p>
  [text · toolbox: col-1-3 · class: card card--lg card--soft]
    <h3>Large title</h3>
    <p>Feature copy.</p>
  [text · toolbox: col-1-3 · class: card card--text-sm card--soft]
    <h3>Small text</h3>
    <p>Dense catalogue copy.</p>

Pills

A paragraph pills of spans, e.g. under a card's copy.

With pills

Copy.

No account managersNo ticket queues

[text · class: card card--soft]
  <h3>With pills</h3>
  <p>Copy.</p>
  <p class="pills">
  <span>No account managers</span>
  <span>No ticket queues</span>
  </p>

Components

Notched corners

notch-tl · notch-tr · notch-bl · notch-br, sized by sm / (default) / lg. outline draws a hairline that follows the cut. On an image element the notch cuts the picture, not the caption. Read the corner from the design, never guess.

Corners and sizes

notch-tl sm

notch-tr

notch-bl lg

outline notch-br

[element_group · toolbox: row]
  [text · toolbox: col-1-4 · class: card card--soft notch-tl sm]
    <h3>notch-tl sm</h3>
  [text · toolbox: col-1-4 · class: card card--soft notch-tr]
    <h3>notch-tr</h3>
  [text · toolbox: col-1-4 · class: card card--soft notch-bl lg]
    <h3>notch-bl lg</h3>
  [text · toolbox: col-1-4 · class: card outline notch-br]
    <h3>outline notch-br</h3>

Components

Definition list

Title | copy rows with hairlines: an element group def-list holding one group def-row per row. The title column narrows with the screen; under 720px the rows stack. def-list--inner drops the outer rules, def-list--on-dark for a dark band.

Rows

We fit your workflow

We adapt to your systems and review standards.

Continuity by design

Trained backups behind every seat.

[element_group · class: def-list]
  [element_group · class: def-row]
    [text]
      <h3>We fit your workflow</h3>
    [text]
      <p>We adapt to your systems and review standards.</p>
  [element_group · class: def-row]
    [text]
      <h3>Continuity by design</h3>
    [text]
      <p>Trained backups behind every seat.</p>

Components

Steps

A numbered step: <p class="step__num">01</p>, a title and a line; the accent slash is drawn by CSS. As tiles (card card--sm step) or rows (step step--row).

Tiles

01

Step 1

What happens.

02

Step 2

What happens.

03

Step 3

What happens.

[element_group · toolbox: row]
  [text · toolbox: col-1-3 · class: card card--sm card--soft step notch-tr sm]
    <p class="step__num">01</p>
    <h3>Step 1</h3>
    <p>What happens.</p>
  [text · toolbox: col-1-3 · class: card card--sm card--soft step notch-tr sm]
    <p class="step__num">02</p>
    <h3>Step 2</h3>
    <p>What happens.</p>
  [text · toolbox: col-1-3 · class: card card--sm card--soft step notch-tr sm]
    <p class="step__num">03</p>
    <h3>Step 3</h3>
    <p>What happens.</p>

Rows

01

Discovery

A conversation about where the pressure is.

02

Meet your team

The people who'll do the work.

[text · class: step step--row]
  <p class="step__num">01</p>
  <h3>Discovery</h3>
  <p>A conversation about where the pressure is.</p>
[text · class: step step--row]
  <p class="step__num">02</p>
  <h3>Meet your team</h3>
  <p>The people who'll do the work.</p>

Components

CTA band

The closing band: an article cta-band band. Centred (cta-band--center, one text element) or split (a row of two col-1-2 groups). Colours: --grad-cta and --accent; height: --cta-min.

Centred

Ask us the hard questions.

A short conversation will tell you quickly whether we're a fit.

Start a conversation

[element_group · class: cta-band cta-band--center]
  [text]
    <h2>Ask us the hard questions.</h2>
    <p>A short conversation will tell you quickly whether we're a fit.</p>
    <p>
    <a class="btn" href="#">Start a conversation</a>
    </p>

Split

Why put off till tomorrow?

Tell us where the pressure is.

Start a conversation

[element_group · class: cta-band]
  [element_group · toolbox: row]
    [text · toolbox: col-1-2]
      <h2>Why put off till tomorrow?</h2>
    [text · toolbox: col-1-2]
      <p>Tell us where the pressure is.</p>
      <p>
      <a class="btn" href="#">Start a conversation</a>
      </p>

Components

Image ratios

A Theme Toolbox class on an image element crops the photo to a frame: ratio-1x1 · ratio-4x3 · ratio-3x2 · ratio-16x9 · ratio-21x9; --ratio-focus moves the crop (faces: 50% 20%). Every image uses the Webp Convert size; crops are CSS, never a cropping image size.

Class	Frame
ratio-1x1	square
ratio-4x3	4:3
ratio-3x2	3:2
ratio-16x9	16:9
ratio-21x9	panorama

Components

Light & split heroes

Two more hero types in hero.css, for a light header. Both clear a fixed, transparent header through --header-overlap (0 by default). The soft wash is hero-decor > hero-wash, coloured by --blob-a / --blob-b; its dials are --wash-strength, --wash-speed, --wash-y, --wash-core, --wash-travel.

Statement

Article hero hero--light band in the Hero section: the wash, an eyebrow, then a group hero__frame holding the statement. The H1 caps at --hero-frame-max (62%); a page sets its own off body.page-<alias>.

What we do

One statement, framed by two hairlines.

A supporting line under it.

[element_group · class: hero hero--light]
  [text · class: hero-decor]
    <div class="hero-wash">
    <i class="hw hw1">
    </i>
    <i class="hw hw2">
    </i>
    <i class="hw hw3">
    </i>
    <i class="hw hw4">
    </i>
    </div>
  [text · class: hero-eyebrow]
    <p class="eyebrow">What we do</p>
  [element_group · class: hero__frame]
    [text]
      <h1>One statement, framed by two hairlines.</h1>
      <p>A supporting line under it.</p>

Copy + stat rail

A hero__intro row instead of the frame: copy col-3-5 | a vertical hairline | hero-rail col-2-5. Stacks at 992px.

Copy on the left.

The column is the measure.

Talk to us

40+

years combined

0

audit failures

[element_group · class: hero hero--light]
  [element_group · toolbox: row · class: hero__intro]
    [text · toolbox: col-3-5]
      <h1>Copy on the left.</h1>
      <p>The column is the measure.</p>
      <p>
      <a class="btn alt" href="#">Talk to us</a>
      </p>
    [text · toolbox: col-2-5]
      <div class="hero-rail">
      <div class="stat">
      <span class="num">40+</span>
      <p>years combined</p>
      </div>
      <div class="stat">
      <span class="num">0</span>
      <p>audit failures</p>
      </div>
      </div>

Split

Article hero hero--split band: headline | rule | copy + buttons, then a hero__stats row framed top and bottom.

A headline with one word enlarged.

Supporting copy and the calls to action.

Start a conversation

200+

plans

15

states

98%

retention

1

point of contact

[element_group · class: hero hero--split]
  [element_group · toolbox: row · class: hero__intro]
    [text · toolbox: col-1-2]
      <h1>A headline with <em>one</em> word enlarged.</h1>
    [text · toolbox: col-1-2]
      <p>Supporting copy and the calls to action.</p>
      <p>
      <a class="btn" href="#">Start a conversation</a>
      </p>
  [element_group · toolbox: row · class: hero__stats]
    [text · toolbox: col-1-4]
      <h3>200+</h3>
      <p>plans</p>
    [text · toolbox: col-1-4]
      <h3>15</h3>
      <p>states</p>
    [text · toolbox: col-1-4]
      <h3>98%</h3>
      <p>retention</p>
    [text · toolbox: col-1-4]
      <h3>1</h3>
      <p>point of contact</p>

Components

Feature columns & the difference band

feature-cols: icon-led columns with hairline dividers and a rule under the row (inset to the copy, never past it). --headings drops the icon for a big title, --top / --btm add a rule above / below. On a dark band (bg-ink) the rules, icons and copy flip. difference is the shared dark "why us" band built from them, with decor decor-swirls.