.
Looks exactly like the standalone eyebrow above a title; it may be wider than the title. */
.h1 .eyebrow, h1 .eyebrow { display: flex; width: max-content; max-width: calc(100vw - var(--gutter) * 2); font-size: .75rem; line-height: 1.55; letter-spacing: .07em; font-weight: 400; text-wrap: wrap; margin-bottom: 14px; }
/* Two columns: heading left, content right (same proportions as the FAQ). */
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.split__head .text-l, .split__head .muted { margin-top: 18px; max-width: 40ch; }
/* Running text for content pages: paragraphs, h3s and lists with sensible spacing. */
.copy { max-width: 68ch; min-width: 0; }
.copy > * + * { margin-top: 16px; }
.copy > .h3, .copy > .h4, .copy > .h5 { margin-top: 32px; }
.copy > :first-child { margin-top: 0; }
.copy p { color: var(--muted); }
.copy a { color: var(--ink); text-underline-offset: 3px; }
.copy strong { color: var(--text); font-weight: 500; }
/* List with small flame squares (like the "Wat je krijgt" list on home). */
.bullets { display: grid; gap: 10px; }
.bullets li { position: relative; padding-left: 20px; color: var(--muted); }
.bullets li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--flame); }
/* Numbered points with a short heading each ("Wat een aannemerswebsite moet doen").
01
…
…
*/
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0 clamp(24px, 3vw, 48px); border-top: 1px solid var(--line); }
.points li { padding: 24px 0 26px; border-bottom: 1px solid var(--line); }
.points__n { display: block; font-family: var(--mono); font-size: .8rem; color: var(--flame-ink); margin-bottom: 14px; }
.points p { margin-top: 8px; color: var(--muted); }
/* Five full-width points: one row of five on wide screens instead of 4 + 1 (points inside a .split keep two columns). */
@media (min-width: 1280px) { .container > .points:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Branch pages reuse .case__stage with a plain {{browser}} instead of the portfolio .scrollshot:
centre it in the column next to the three page thumbnails, so the phone overlaps it like in the hero. */
.case__home > .browser { margin-block: auto; }
/* "Concept" + "Fictief bedrijf" label row above a concept visual. */
.concept-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.concept-label .case__fict { margin: 0; }
/* Concept tag on a tinted section: the default flame-ink on --bg-2 is only 4.3:1, so use the darker ink on white (6.8:1). */
.section--tint .tag--concept { color: #a8300a; background: var(--white); border-color: rgba(168, 48, 10, 0.4); }
/* Link to the branch page under a portfolio case (rendered by case()). */
.case__branche { margin-top: 18px; }
/* "Ander vak?" row:
On the branch pages it sits inside the FAQ section's container, right after .faq__grid. */
.trades { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding-block: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trades__label { font-family: var(--mono); font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--faded); }
.trades ul { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.faq__grid + .trades { margin-top: clamp(48px, 6vw, 80px); }
/* A single link-arrow under a list or paragraph:
*/
.more-link { margin-top: clamp(20px, 2.4vw, 28px); }
/* Inline text links in muted running text: same look as .copy a and .faq__answer a. */
.service-main__blocks .muted a, .benefits__list p a, .howiwork__copy p a, .extra .muted a, .faq__more a { color: var(--ink); text-underline-offset: 3px; }
/* Source list under the cost guide (follows the .trades row). */
.sources-block { margin-top: clamp(40px, 5vw, 64px); }
/* Market price table on the cost guide. Wrap it: