Skip to content
SloplessTry the picker

Base style · contemporary · balanced

Organic Earth

Clay, sand and moss tones on a grainy paper ground, soft serif headlines with a humanist sans, arched and pebble-shaped images and loose, staggered layouts that feel hand-placed.

Moods
organic, warm, calm, friendly
Suits
food, wellness, hospitality, crafts, health, local-business
Type
Fraunces + Karla

Principles

  • Shape images like things found outdoors: arches, circles and pebbles with large radii, never hard rectangles
  • Stagger placement: neighbouring images and blocks never share a top edge or a size
  • Use only earth colours (clay, ochre, sand, moss, bark, river blue): one main `accent` and one second `accent2`, as tokens.json sets them
  • Set headlines in a soft serif at regular weight, body in a humanist sans; italics for warmth, not for emphasis spam
  • Lay a fine paper grain over backgrounds and fills; nothing looks digitally flat

Hard rules

  • No pure white, pure black, neon or blue-grey; no colour outside the earth palette.
  • No hard rectangles, hard shadows, thick borders or square buttons.
  • No three equal cards in a row and no icon grids; features are loose two-column flows led by blob marks.
  • No geometric or grotesk display faces; no all-caps headlines; no tracking-wide labels.
  • No gradients and no glass; texture comes from grain and photography, not from gradients.
  • No dense data tables; prices and times sit inline with names.

Full page preview with sample copy, rendered from the same tokens and layout the agent receives.

For coding agents

Rules and live patterns

Every pattern Organic Earth owns, drawn by the same renderer as the picker with the style's default tokens and sample copy. Each has an anchor (#<pattern id>). A design's own DESIGN.md and tokens.json stay the source of truth; this page shows what the patterns look like.

Do

  • Use the palette's warm ground: `bg` (sand/oat) for pages, `surface` for soft pebbles and bands, `surfaceAlt` for one band per page, `accent` for the CTA band and primary buttons, `accent2` for blob marks, rings and half-circles. In these rules "clay" means `accent`, "moss" means `accent2` and "sage" means `surfaceAlt`, whatever hue the chosen palette gives them; tokens.json is the source of truth.
  • Shape every image by its `frame`: `arch` = semicircular top on a rectangle; `circle` = full circle; `rounded` = the radius token (28 px). An image with no `frame` in layout.json (heroes from the hero library) is `rounded`. Never show a square-cornered photo.
  • Stagger images: neighbours differ in shape, aspect ratio and vertical alignment (`alignSelf` start / center / end in layout.json).
  • Draw `blob` shapes as soft, irregular organic outlines (SVG path, not an ellipse), filled with a palette role, no stroke.
  • Set headlines in the heading serif at weight 400 with tight leading; use the body face's italic for eyebrows, captions and dates.
  • Set body copy in the humanist sans at 18 px, line-height 1.6, max 60 characters per line.
  • Lay a paper grain over `bg` and every filled surface: an SVG fractal-noise texture at 5–8% opacity, `mix-blend-mode: multiply` (screen in dark mode).
  • Make buttons pill-shaped (radius 999 px): primary = `accent` fill with `onAccent` text; secondary = transparent with a 1 px border and text in one colour: `heading` on `bg`, `surface` and `surfaceAlt`, `onAccent` on an `accent` fill (the CTA band); underline = text with a 1 px wavy or straight underline.
  • Move slowly: fades and 12 px rises at 420 ms with the motion easing; images may drift 20–40 px on scroll (parallax) unless `prefers-reduced-motion` is set.
  • At 375 px, keep the arch and circle shapes and stack each section in layout.json order: this style's own sections put the text first, while a hero that leads with its image (including heroes from the hero library) keeps the image first. Keep every image layout.json does not hide on phone (`mobile: hide`).

Don't

  • No pure white, pure black, neon or blue-grey; no colour outside the earth palette.
  • No hard rectangles, hard shadows, thick borders or square buttons.
  • No three equal cards in a row and no icon grids; features are loose two-column flows led by blob marks.
  • No geometric or grotesk display faces; no all-caps headlines; no tracking-wide labels.
  • No gradients and no glass; texture comes from grain and photography, not from gradients.
  • No dense data tables; prices and times sit inline with names.
  • No stock "leaf" icons or emoji; organic shapes are drawn blobs, arches and circles.
  • No perfectly aligned image rows (equal tops and sizes).

Heroes (4)

Arch window

hero.organic-arch-window · hero

Rule
A tall arch-framed photo on 1–5 with a moss blob peeking from behind its foot; the soft-serif headline, lead and actions sit mid-height on 7–12.
Slots
heroImage, eyebrow, headline, subhead, cta, cta2, meta
Grid
arch 1-5 · blob 4-6 · text 7-12
Notes
The blob overlaps the arch's lower-right edge by one column. The arch is a full semicircle top on a rectangle, radius = half its width.

Columns 1–5: a 3:4 photo in an arch frame spanning two rows. A moss blob (lg) sits on 4–6 in the second row, bottom-aligned, peeking out from behind the arch's lower-right edge (hidden on phone). Columns 7–12, vertically centred: italic muted eyebrow, headline at step 6 weight 400 (max ~14 ch), lead (max 42 ch), a row with a pill primary button and an underline button, and a small muted meta line.

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Booking projects from June 2026

Desktop

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Booking projects from June 2026

Phone, 390 px

Pebble cluster

hero.organic-pebble-cluster · hero

Rule
Headline block bottom-left on 1–6; three images of different shapes (circle, arch, pebble) cluster loosely on 7–12 at different heights, with a small clay blob among them.
Slots
eyebrow, headline, subhead, cta, gallery1, gallery2, gallery3
Grid
text 1-6 · circle 8-12 · arch 7-9 · pebble 10-12 · blob 11-12
Notes
No two images share a top edge. At phone width show the circle and the arch side by side (2 columns) under the text and hide the pebble if space is short.

Text block bottom-aligned on 1–6 across three rows: italic eyebrow, headline at step 6 weight 400, lead, primary button. Images cluster on 7–12 at different heights: a circle photo on 8–12 (row 1), an arch photo on 7–9 (rows 2–3), a rounded 4:5 illustration on 10–12 (row 2, bottom-aligned), and a small clay blob on 11–12 (row 3). Phone: text first, then the circle, the arch and the rounded illustration one under another; the blob hides.

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project
Desktop

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project
Phone, 390 px

Field notes

hero.organic-field-notes · hero

Rule
A wide soft-serif headline runs across the grid; below it three loose columns: the lead on 1–5, a round illustration on 6–8, and a short list of field notes on 9–12.
Slots
headline, subhead, image, facts[3..4], cta
Grid
headline 1-12 · lead 1-5 · image 6-8 · notes 9-12

A headline across the grid at step 7 weight 400 (max ~20 ch). Below it, three loose columns aligned differently: the lead and primary button on 1–5 (top), a circle illustration on 6–8 (centred), and 3–4 field notes on 9–12 (bottom) — each a semibold label (600) over a muted line, separated by hairlines.

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Desktop

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Phone, 390 px

Sun over hill

hero.organic-sun-hill · hero

Rule
A clay half-sun rises on 7–11 behind the headline block on 1–7; a wide rounded landscape image follows, then the subhead on 1–6 and the action on 9–12.
Slots
eyebrow, headline, heroImage, subhead, cta
Grid
sun 7-11 · headline 1-7 · landscape 1-12 · subhead 1-6 · action 9-12
Notes
The half-circle's flat edge sits on the image's top edge, like a sun on the horizon.

A clay half-circle (xl) rises on 7–11, its flat edge resting on the top edge of the landscape image below. The headline block (italic eyebrow + step 6 headline) sits bottom-aligned on 1–7 in the same row. Row 2: a 21:9 rounded landscape illustration across 1–12. Row 3: the lead on 1–6 and the primary button on 9–12.

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project
Desktop

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project
Phone, 390 px

Navigation (2)

Content blocks (13)

Seed rows

features.organic-seed-rows · features

Rule
Intro on 1–5; features flow in two loose columns on 6–12, each led by a small organic blob mark in the second accent.
Slots
sectionLabel, title, body, features[3..6]
Grid
intro 1-5 · features 6-12

Columns 1–5: italic eyebrow, h2 at step 4 weight 400, a short paragraph. Columns 6–12: 3–6 features in two loose columns, each led by a small moss blob mark (sm), then an h3 (weight 400, like every serif heading) and a muted paragraph (max 40 ch).

What you get

What we do

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Positioning

Find the one sentence your best customers already believe.

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

Websites

Fast, editable sites built on the CMS your team already knows.

Sales enablement

Decks, one-pagers and demos your reps actually use.

Desktop

What you get

What we do

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Positioning

Find the one sentence your best customers already believe.

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

Websites

Fast, editable sites built on the CMS your team already knows.

Sales enablement

Decks, one-pagers and demos your reps actually use.

Phone, 390 px

Story beside an arch

content.organic-story-arch · content

Rule
The story (label, h2, lead, body, link) on 1–6; a tall arch photo on 8–12; a small clay circle sits in the gap at 7.
Slots
sectionLabel, title, body, body2, cta, image
Grid
story 1-6 · seed 7-7 · arch 8-12

Columns 1–6, vertically centred: italic eyebrow, h2 (step 4), lead, body (max 58 ch) and an underline link. A small clay circle sits alone in column 7, bottom-aligned (hidden on phone). Columns 8–12: a tall 3:4 arch photo.

About

How we think

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

We hand over everything — source files, a living brand system and a website your team can edit without calling us.

Start a project
Desktop

About

How we think

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

We hand over everything — source files, a living brand system and a website your team can edit without calling us.

Start a project
Phone, 390 px

Pebble row

gallery.organic-pebble-row · gallery

Rule
Three images in three different shapes and heights across the grid: an arch on 1–4 (top), a circle on 5–8 (middle), a pebble on 9–12 (bottom), with a caption under the circle.
Slots
title, gallery1, gallery2, gallery3, caption
Grid
title 1-8 · arch 1-4 · circle 5-8 · caption 5-8 · pebble 9-12

Title (h2) on 1–8. Then three images with three shapes and three heights: an arch 3:4 on 1–4 aligned to the top, a circle on 5–8 vertically centred with an italic muted caption centred under it, and a rounded 4:5 on 9–12 aligned to the bottom. Never the same shape twice in one row.

Selected work

Corvid Robotics — identity

Desktop

Selected work

Corvid Robotics — identity

Phone, 390 px

Blob quote

testimonial.organic-blob-quote · testimonial

Rule
A round portrait sits on a large sage blob on 1–4; the quote in the soft serif on 6–12 with the name and role underneath.
Slots
image, quote, author, role
Grid
blob 1-5 · portrait 2-4 · quote 6-12

A large sage blob on 1–5 with a round portrait on 2–4 sitting on top of it (the blob hides on phone). The quote on 6–12 in the upright heading serif at step 3, weight 400, tight leading (max 40 ch; not italic: not every pairing's serif ships one), then the name (label weight 600) and the muted role.

“They understood our product faster than our own sales team did.”

Hanna Lindqvist

CEO, Corvid Robotics

Desktop
“They understood our product faster than our own sales team did.”

Hanna Lindqvist

CEO, Corvid Robotics

Phone, 390 px

Ring counts

stats.organic-ring-counts · stats

Rule
A short title on 1–4; three or four counts on 5–12, each a small hand-drawn ring over the figure, with a small caption below.
Slots
title, stats[3..4]
Grid
title 1-4 · counts 5-12
Notes
Each ring is hand-drawn (hand: true): an uneven, slightly broken SVG stroke behind the figure, a little different on every count; figures in the heading serif.

On a `surface` band: a short h2 (step 3) on 1–4, then 3–4 counts in a row on 5–12 (stacked on phone), each a small hand-drawn ring (`hand: true`: an uneven stroke with a small break, a little different on every count; accent2, md) over a figure at step 4 in the heading serif, with a small muted caption under it.

Twelve years in numbers

140+

launches shipped

12

years independent

9 of 10

clients return

Desktop

Twelve years in numbers

140+

launches shipped

12

years independent

9 of 10

clients return

Phone, 390 px

Soil band

cta.organic-soil-band · cta

Rule
A full-bleed clay band: a moss half-sun rises from its lower-left on 1–3; headline, line and a secondary pill button (onAccent border and text) sit on 5–11.
Slots
headline, body, cta
Grid
sun 1-3 · text 5-11

A full-bleed clay (`accent`) band. A moss half-circle (xl) rises from the band's lower edge on 1–3 (hidden on phone). On 5–11: h2 at step 5 weight 400 in onAccent, a line of onAccent text, and a secondary pill button with an onAccent border and onAccent text (never `heading` on this band).

Have a hard thing to explain?

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Start a project
Desktop

Have a hard thing to explain?

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Start a project
Phone, 390 px

Soft pebbles

faq.organic-soft-pebbles · faq

Rule
Title on 1–4; each question on 5–12 sits in its own soft, borderless, rounded pebble of the surface colour.
Slots
sectionLabel, title, faqs[4..8]
Grid
title 1-4 · list 5-12

Columns 1–4: italic eyebrow and h2. Columns 5–12: 4–8 questions, each in its own borderless pebble (surface fill, radius token, grain) with the question (h4) and a muted answer. Small gaps between pebbles; no rules.

FAQ

Working together

How big are your projects?

Most run 8–16 weeks with a team of three to five people.

Do you work with startups?

Yes, from Series A onwards, when there's a product and paying customers.

Do you build the website too?

We design and build, then train your team to run it.

Where are you based?

Lisbon and London, working with clients across Europe and North America.

Can we hire you for a single deliverable?

Occasionally — a naming project or a sales deck. Ask us.

Desktop

FAQ

Working together

How big are your projects?

Most run 8–16 weeks with a team of three to five people.

Do you work with startups?

Yes, from Series A onwards, when there's a product and paying customers.

Do you build the website too?

We design and build, then train your team to run it.

Where are you based?

Lisbon and London, working with clients across Europe and North America.

Can we hire you for a single deliverable?

Occasionally — a naming project or a sales deck. Ask us.

Phone, 390 px

Map garden

contact.organic-map-garden · contact

Rule
A rounded map on 1–6; title, address, email, hours and a short form on 8–12.
Slots
image, title, address, email, hours, contact
Grid
map 1-6 · details 8-12

A rounded 4:3 map on 1–6 (muted earth-toned map style). Columns 8–12: h2, address, email, italic muted hours, then the form: fields with a 1 px bottom border in `border`, pill primary submit.

Start a conversation

Rua da Boavista 72, 1200-066 Lisboa

hello@northfold.com

Studio open Mon–Thu, 9:30–18:00

Name
Your name
Email
you@example.com
Message
Tell us a little about your project…
Send message
Desktop

Start a conversation

Rua da Boavista 72, 1200-066 Lisboa

hello@northfold.com

Studio open Mon–Thu, 9:30–18:00

Name
Your name
Email
you@example.com
Message
Tell us a little about your project…
Send message
Phone, 390 px

Circle portraits

team.organic-circle-portraits · team

Rule
People as round portraits, four per row, with the name in serif and the role in small italic, centred under each circle.
Slots
sectionLabel, title, team[4..8]
Grid
header 1-12 · people 1-12

Italic eyebrow and h2, then 4–8 round portraits four per row, each with the name (h4, weight 400) and an italic muted role centred underneath.

Team

The studio

Rita Carvalho

Founder, strategy

Owen Blake

Design director

Sana Qureshi

Lead developer

Mateus Lima

Copy and naming

Desktop

Team

The studio

Rita Carvalho

Founder, strategy

Owen Blake

Design director

Sana Qureshi

Lead developer

Mateus Lima

Copy and naming

Phone, 390 px

Journal entries

blog.organic-journal-entries · blog

Rule
Journal posts two per row: a rounded 3:2 image, a small italic date, a serif title and a short line.
Slots
sectionLabel, title, posts[2..6]
Grid
header 1-6 · posts 1-12

Italic eyebrow and h2 on 1–6, then 2–6 posts two per row: a rounded 3:2 image, an italic muted date, a serif h3 title (weight 400) and a muted line.

Journal

Field notes

Apr 3, 2026 · 8 min

Your homepage is a sales call nobody attends

What lost-deal interviews reveal about B2B websites.

Mar 1, 2026 · 5 min

The case against the brand book

Why guidelines belong in a website your team visits.

Jan 22, 2026 · 6 min

Naming a product in 2026

Trademarks, domains and the 400-name longlist.

Dec 9, 2025 · 4 min

Industrial brands deserve good type

Notes from rebranding a valve manufacturer.

Desktop

Journal

Field notes

Apr 3, 2026 · 8 min

Your homepage is a sales call nobody attends

What lost-deal interviews reveal about B2B websites.

Mar 1, 2026 · 5 min

The case against the brand book

Why guidelines belong in a website your team visits.

Jan 22, 2026 · 6 min

Naming a product in 2026

Trademarks, domains and the 400-name longlist.

Dec 9, 2025 · 4 min

Industrial brands deserve good type

Notes from rebranding a valve manufacturer.

Phone, 390 px

Ritual steps

list.organic-ritual-steps · list

Rule
Steps on the 3–10 measure: a large italic serif numeral in the accent beside each step's title and paragraph, no rules.
Slots
sectionLabel, title, items[3..5]
Grid
measure 3-10

On the 3–10 measure: italic eyebrow and h2, then 3–5 steps; each has a large upright serif numeral at step 5 in the link (clay) colour beside the step's h3 (weight 400) and muted paragraph, side by side on phone too. No rules, generous gaps.

Index

Services

01

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

02

Positioning workshop

A day with your leadership to agree on one story.

03

Identity design

Logo, type, colour, motion and a working toolkit.

04

Website

Strategy, copy, design and build in Webflow or Next.js.

Desktop

Index

Services

01

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

02

Positioning workshop

A day with your leadership to agree on one story.

03

Identity design

Logo, type, colour, motion and a working toolkit.

04

Website

Strategy, copy, design and build in Webflow or Next.js.

Phone, 390 px

Seasonal shares

pricing.organic-seasonal-shares · pricing

Rule
Two to four plans as soft borderless pebbles two per row, each opening with a blob mark, then name, price in serif, a line and a button.
Slots
sectionLabel, title, plans[2..4]
Grid
intro 1-5 · plans 6-12

Columns 1–5: italic eyebrow and h2. Columns 6–12: 2–4 plans two per row, each a borderless pebble (surface fill, grain) holding a moss blob mark, the plan name (h3), the price in the heading serif at step 5, a muted line and a primary pill button.

Pricing

Engagements

Sprint

€18k

Two-week positioning sprint with a written brand platform.

Choose Sprint

Rebrand

€85k

Positioning, identity and a launch toolkit over 12 weeks.

Most popular — choose

Partner

€14k/mo

A standing team for product launches and campaigns.

Choose Partner
Desktop

Pricing

Engagements

Sprint

€18k

Two-week positioning sprint with a written brand platform.

Choose Sprint

Rebrand

€85k

Positioning, identity and a launch toolkit over 12 weeks.

Most popular — choose

Partner

€14k/mo

A standing team for product launches and campaigns.

Choose Partner
Phone, 390 px

Footers (2)

Earth base

footer.organic-earth-base · footer

Rule
On a sage band: wordmark and line on 1–4, links 6–7, address and hours 8–9, an inline newsletter and legal on 10–12.
Slots
siteName, tagline, pages, address, hours, newsletter, legal
Grid
brand 1-4 · links 6-7 · visit 8-9 · signup 10-12

A full-bleed sage (`surfaceAlt`) band: wordmark and an italic line on 1–4, links stacked on 6–7, address and hours on 8–9, an inline newsletter form and the muted legal line on 10–12.

Northfold

Strategy and design for companies that make things

  • Services
  • Work
  • About
  • Contact

Rua da Boavista 72, 1200-066 Lisboa

Studio open Mon–Thu, 9:30–18:00

you@example.com
Subscribe

© 2026 Northfold. All rights reserved.

Desktop
Northfold

Strategy and design for companies that make things

  • Services
  • Work
  • About
  • Contact

Rua da Boavista 72, 1200-066 Lisboa

Studio open Mon–Thu, 9:30–18:00

Email
you@example.com
Subscribe

© 2026 Northfold. All rights reserved.

Phone, 390 px

Hill sign-off

footer.organic-hill-signoff · footer

Rule
A moss half-circle hill, then the wordmark, plain links and the legal line centred beneath it.
Slots
siteName, pages, legal
Grid
signoff 1-12

A moss half-circle (lg) like a small hill, then the wordmark, plain links and the muted legal line, all centred.

Northfold
  • Services
  • Work
  • About
  • Contact

© 2026 Northfold. All rights reserved.

Desktop
Northfold
  • Services
  • Work
  • About
  • Contact

© 2026 Northfold. All rights reserved.

Phone, 390 px

Hero library heroes that suit Organic Earth

Split, media lefthero.split-media-left · splitThe image fills columns 1–7 at full hero height; column 8 stays empty; a narrow copy column in 9–12 sits on the bottom edge and ends in a ruled facts list and one CTA.Split, offset stackhero.split-offset-stack · splitThree blocks step down the grid and overlap: the image in 5–12 (rows 1–2), a solid headline panel in 1–7 that covers the image's lower-left corner (rows 2–3), and a ruled subhead + link in 9–12 (row 3).Polaroid rowhero.collage-polaroid · collageCopy in 1–5; three instant-photo prints overlap in 6–12 on staggered rows: print one in 1–6 of that area, print two lower in 5–10 on top of it, print three high in 8–12. Each is a square photo on a surface-coloured card with a short handwritten-style caption.Editorial drop caphero.editorial-dropcap · editorialA narrow measure (columns 2–10) carries eyebrow, a headline, byline and rule; the opening paragraph runs 2–10 and starts with a four-line drop cap; a marginal note sits in 11–12.Full-bleed in a mat framehero.fullbleed-framed · full-bleedThe photo fills the viewport inside an even mat of page colour (one space step 3 on all sides); four labels sit in the mat's corners: eyebrow top-left, meta top-right, headline bottom-left, CTA bottom-right.Full-bleed photo with captionhero.fullbleed-photo-caption · full-bleedA photograph spans the full viewport width at 21:9; under it, a caption row like a museum plate: headline 1–7, caption and CTA 9–12. No text on the image.Statement, bottom-lefthero.minimal-statement-left · minimalA tall, quiet hero: a mono index top-left and meta top-right on one row, and a two-to-three-line statement as the h1 at step 5 sitting on the bottom-left (1–9), with one underline link under it.Split, media righthero.split-media-right · splitCopy in columns 1–6, vertically centred; the image fills columns 7–12 at the full hero height. A hairline and a muted meta line close the copy column.