/* Buchard Jørgensen – Fermata.
   Tokens come from theme.json; this file turns them into components.
   Dials: variance 0.35, density 0.3, motion 0.15. */

:root {
	--bj-bg: var(--wp--preset--color--bg, #FFFFFF);
	--bj-surface: var(--wp--preset--color--surface, #F6FAFB);
	--bj-ink: var(--wp--preset--color--ink, #1B1D26);
	--bj-accent: var(--wp--preset--color--accent, #0F6680);
	--bj-accent-soft: var(--wp--preset--color--accent-soft, #DCEEF3);
	--bj-highlight: var(--wp--preset--color--highlight, #F28C6B);
	--bj-highlight-ink: var(--wp--preset--color--highlight-ink, #8A3D1E);
	--bj-highlight-soft: var(--wp--preset--color--highlight-soft, #FFFBF8);
	--bj-muted: var(--wp--preset--color--muted, #3C4A52);
	--bj-quiet: var(--wp--preset--color--quiet, #4A5D66);
	--bj-line: var(--wp--preset--color--line, #DCE6EA);
	--bj-rule: #D5E2E7;
	--bj-numeral: #8FB2BE;
	--bj-accent-dark: #0A4A5E;

	--bj-r-sm: 10px;
	--bj-r-md: 18px;
	--bj-r-lg: 28px;
	--bj-r-pill: 999px;

	--bj-gutter: 64px;
	--bj-section: 100px;
	--bj-measure: 34em;

	--bj-font-head: var(--wp--preset--font-family--heading, "Instrument Serif", Georgia, serif);
	--bj-font-body: var(--wp--preset--font-family--body, Manrope, system-ui, sans-serif);
}

@media (max-width: 781px) {
	:root {
		--bj-gutter: 20px;
		--bj-section: 56px;
	}
}

/* Neutralise inherited defaults at zero specificity so component rules always win. */
:where(.bj-section, .bj-band, .bj-cta) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) {
	margin: 0;
}
:where(.bj-section, .bj-band, .bj-cta) :where(blockquote) {
	border: 0;
	padding: 0;
}

/* ---------- Layout ---------- */

.bj-section {
	padding: var(--bj-section) var(--bj-gutter);
	background: var(--bj-bg);
}
.bj-section--tint { background: var(--bj-surface); }
.bj-section--flush-top { padding-top: 0; }
.bj-section--flush-bottom { padding-bottom: 0; }

.bj-wrap {
	max-width: 1180px;
	margin-inline: auto;
}

.bj-measure { max-width: var(--bj-measure); }

.bj-split {
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
	align-items: flex-start;
}
.bj-split__main { flex: 999 1 460px; min-width: 0; }
.bj-split__side { flex: 1 1 320px; min-width: 0; }

.bj-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(var(--bj-cols, 3), minmax(0, 1fr));
}
.bj-grid--2 { --bj-cols: 2; }
.bj-grid--4 { --bj-cols: 4; }

@media (max-width: 1024px) {
	.bj-grid { --bj-cols: 2; }
}
@media (max-width: 680px) {
	.bj-grid { --bj-cols: 1; }
}

/* ---------- Type ---------- */

.bj-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bj-accent);
	margin-bottom: 18px;
}

.bj-h1 {
	font-family: var(--bj-font-head);
	font-weight: 400;
	font-size: clamp(38px, 5vw, 64px);
	line-height: 1.08;
	letter-spacing: -0.01em;
}
.bj-h2 {
	font-family: var(--bj-font-head);
	font-weight: 400;
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.15;
}
.bj-h3 {
	font-family: var(--bj-font-head);
	font-weight: 400;
	font-size: clamp(24px, 2vw, 30px);
	line-height: 1.2;
}
.bj-h1 em, .bj-h2 em, .bj-h3 em {
	font-style: italic;
	color: var(--bj-accent);
	line-height: 1.14;
}

.bj-lead {
	font-size: 19px;
	line-height: 1.65;
	color: var(--bj-muted);
	max-width: var(--bj-measure);
}
.bj-body {
	font-size: 17px;
	line-height: 1.8;
	color: var(--bj-muted);
	max-width: var(--bj-measure);
}
.bj-small {
	font-size: 15px;
	line-height: 1.7;
	color: var(--bj-quiet);
}

/* ---------- Buttons ---------- */

.bj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 30px;
	border-radius: var(--bj-r-pill);
	border: 1.5px solid transparent;
	font-family: var(--bj-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	background: var(--bj-accent);
	color: #FFFFFF;
}
.bj-btn:hover, .bj-btn:focus-visible { background: var(--bj-accent-dark); color: #FFFFFF; }

.bj-btn--ghost {
	background: transparent;
	border-color: var(--bj-accent);
	color: var(--bj-accent);
}
.bj-btn--ghost:hover, .bj-btn--ghost:focus-visible {
	background: var(--bj-accent-soft);
	color: var(--bj-accent-dark);
}

.bj-btn--coral { background: var(--bj-highlight); color: #4A1C08; }
.bj-btn--coral:hover, .bj-btn--coral:focus-visible { background: #E07A58; color: #4A1C08; }

.bj-btn--block { width: 100%; }

.bj-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 24px;
	align-items: center;
}

.bj-link-arrow {
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--bj-highlight);
	padding-bottom: 3px;
	color: var(--bj-accent);
}
.bj-link-arrow:hover { color: var(--bj-accent-dark); }

/* ---------- Hero ---------- */

.bj-hero { padding-block: 92px 80px; }
.bj-hero__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
	align-items: center;
}
.bj-hero__text { flex: 999 1 480px; min-width: 0; }
.bj-hero__art { flex: 1 1 340px; min-width: 0; display: flex; justify-content: center; }

.bj-arch {
	position: relative;
	width: 100%;
	max-width: 380px;
}
.bj-arch__shape {
	width: 100%;
	height: 440px;
	border-radius: 50% 50% var(--bj-r-md) var(--bj-r-md);
	background: var(--bj-accent-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.bj-arch__shape img { width: 100%; height: 100%; object-fit: cover; }

.bj-note {
	position: absolute;
	left: -36px;
	bottom: 34px;
	max-width: 290px;
	background: #FFFFFF;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(15, 102, 128, 0.16);
	padding: 18px 20px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.6;
	color: var(--bj-muted);
}
.bj-note__dot {
	width: 10px;
	height: 10px;
	border-radius: var(--bj-r-pill);
	background: var(--bj-highlight);
	flex: 0 0 auto;
	margin-top: 6px;
}

@media (max-width: 781px) {
	.bj-hero { padding-block: 36px 40px; }
	.bj-arch__shape { height: 300px; border-radius: 50% 50% var(--bj-r-md) var(--bj-r-md); }
	.bj-note { position: static; max-width: none; margin-top: 16px; box-shadow: none; border: 1px solid var(--bj-line); }
}

/* ---------- Strip ---------- */

.bj-strip {
	background: var(--bj-accent);
	color: #FFFFFF;
	padding: 18px var(--bj-gutter);
}
.bj-strip__inner {
	max-width: 1180px;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.bj-strip__sep { color: #F9BFA9; }

/* ---------- Cards ---------- */

.bj-card {
	border: 1px solid var(--bj-line);
	border-radius: var(--bj-r-md);
	padding: 32px 28px;
	background: var(--bj-bg);
	display: block;
	text-decoration: none;
	color: inherit;
}
a.bj-card:hover { border-color: var(--bj-accent); }
.bj-card--tint { background: var(--bj-surface); border-color: transparent; }
.bj-card--ink { background: var(--bj-ink); border-color: transparent; color: #FFFFFF; }
.bj-card--ink .bj-body, .bj-card--ink .bj-small { color: #DCE3E6; }
.bj-card--warm { background: var(--bj-highlight-soft); border-color: #F3DACE; }
.bj-card__title { font-size: 20px; font-weight: 700; margin-bottom: 10px; }

.bj-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bj-accent);
	background: var(--bj-accent-soft);
	border-radius: var(--bj-r-pill);
	padding: 6px 12px;
}
.bj-tag--warm { color: var(--bj-highlight-ink); background: #FCE4DA; }
.bj-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Editorial rows ---------- */

.bj-rows { display: flex; flex-direction: column; }
.bj-row {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	padding: 38px 0;
	border-top: 1px solid var(--bj-rule);
}
.bj-row:last-child { border-bottom: 1px solid var(--bj-rule); }
.bj-row--warm { background: var(--bj-highlight-soft); }
.bj-row__num {
	flex: 0 0 72px;
	font-family: var(--bj-font-head);
	font-size: 30px;
	color: var(--bj-numeral);
	line-height: 1.2;
}
.bj-row__num--warm { color: var(--bj-highlight); }
.bj-row__body { flex: 1 1 260px; min-width: 0; }
.bj-row__aside { flex: 0 1 210px; }

/* ---------- Numbered steps ---------- */

.bj-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(var(--bj-cols, 4), minmax(0, 1fr));
}
@media (max-width: 1024px) { .bj-steps { --bj-cols: 2; } }
@media (max-width: 680px) { .bj-steps { --bj-cols: 1; } }

.bj-step {
	background: var(--bj-bg);
	border-radius: var(--bj-r-md);
	padding: 32px 26px;
}
.bj-section--tint .bj-step { background: var(--bj-bg); }
.bj-step__n {
	width: 44px;
	height: 44px;
	border-radius: var(--bj-r-pill);
	background: var(--bj-accent-soft);
	color: var(--bj-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 20px;
}
.bj-step__n--warm { background: #FCE4DA; color: var(--bj-highlight-ink); }

/* ---------- Bands ---------- */

.bj-band {
	background: var(--bj-accent);
	color: #FFFFFF;
	padding: var(--bj-section) var(--bj-gutter);
}
.bj-band--ink { background: var(--bj-ink); }
.bj-band__inner { max-width: 900px; margin-inline: auto; text-align: center; }
.bj-band .bj-h2, .bj-band .bj-h3 { color: #FFFFFF; }
.bj-band .bj-body, .bj-band .bj-lead { color: #D5EAF0; max-width: 42em; margin-inline: auto; }
.bj-band em { color: #F9BFA9; }
.bj-band__credit {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #BFE0E9;
}

.bj-quote {
	font-family: var(--bj-font-head);
	font-weight: 400;
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.3;
}

/* ---------- Alert row ---------- */

.bj-alert {
	background: var(--bj-ink);
	color: #FFFFFF;
	padding: 22px var(--bj-gutter);
}
.bj-alert__inner {
	max-width: 1180px;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
	font-size: 17px;
	font-weight: 600;
}
.bj-alert a { color: #F9BFA9; text-decoration: none; border-bottom: 2px solid var(--bj-highlight); padding-bottom: 2px; }

/* ---------- People ---------- */

.bj-person { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.bj-portrait {
	flex: 0 0 150px;
	height: 190px;
	border-radius: 50% 50% 14px 14px;
	background: var(--bj-accent-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--bj-muted);
	padding: 10px;
	overflow: hidden;
}
.bj-portrait img { width: 100%; height: 100%; object-fit: cover; }
.bj-portrait--lg { flex-basis: 300px; height: 380px; border-radius: 50% 50% 18px 18px; }
.bj-person__body { flex: 1 1 200px; min-width: 0; }
.bj-person__role { font-size: 14px; font-weight: 600; color: var(--bj-accent); margin-bottom: 14px; }

/* ---------- Fact box ---------- */

.bj-facts {
	background: var(--bj-accent-soft);
	border-radius: 22px;
	padding: 36px 32px;
}
.bj-facts dl { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.bj-facts dt { font-size: 14px; font-weight: 700; color: #2D3C44; margin-bottom: 4px; }
.bj-facts dd {
	margin: 0;
	font-family: var(--bj-font-head);
	font-size: 25px;
	line-height: 1.2;
	color: var(--bj-accent);
}

/* ---------- FAQ ---------- */

.bj-faq { display: grid; gap: 44px 56px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 781px) { .bj-faq { grid-template-columns: 1fr; gap: 26px; } }
.bj-faq h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; font-family: var(--bj-font-body); }

/* ---------- CTA block ---------- */

.bj-cta {
	background: var(--bj-accent-soft);
	border-radius: var(--bj-r-lg);
	padding: 64px 56px;
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: center;
	justify-content: space-between;
}
.bj-cta__text { flex: 1 1 420px; min-width: 0; }
.bj-cta__text .bj-body { color: #2D3C44; }
.bj-cta__actions { flex: 0 1 300px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 781px) { .bj-cta { padding: 32px 22px; gap: 24px; } }

/* ---------- Forms ---------- */

.bj-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.bj-field label { font-size: 14px; font-weight: 700; color: var(--bj-ink); }
.bj-field input,
.bj-field select,
.bj-field textarea {
	min-height: 48px;
	border: 1px solid #C9D7DC;
	border-radius: var(--bj-r-sm);
	padding: 12px 14px;
	font-family: var(--bj-font-body);
	font-size: 16px;
	color: var(--bj-ink);
	background: #FFFFFF;
	width: 100%;
	box-sizing: border-box;
}
.bj-field textarea { resize: vertical; }
.bj-field input:focus-visible,
.bj-field select:focus-visible,
.bj-field textarea:focus-visible {
	outline: 2px solid var(--bj-accent);
	outline-offset: 1px;
}

/* ---------- Mobile call bar ---------- */

.bj-callbar { display: none; }
@media (max-width: 781px) {
	.bj-callbar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 20;
		gap: 10px;
		padding: 12px 16px;
		background: #FFFFFF;
		border-top: 1px solid var(--bj-line);
	}
	.bj-callbar .bj-btn { flex: 1 1 0; min-width: 0; min-height: 50px; padding-inline: 16px; }
}

/* ---------- Mark ---------- */

.bj-mark { display: block; }
.bj-mark--center { margin-inline: auto; }

/* ---------- Motion (dial 0.15: state feedback only) ---------- */

.bj-btn, a.bj-card { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
@media (prefers-reduced-motion: reduce) {
	.bj-btn, a.bj-card { transition: none; }
}
/* ---------- Hero chips ---------- */

.bj-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.bj-chip {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 20px;
	border-radius: var(--bj-r-pill);
	border: 1.5px solid #B9D1DA;
	background: #FFFFFF;
	color: var(--bj-accent);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}
.bj-chip:hover { background: var(--bj-accent-soft); border-color: var(--bj-accent); }
@media (max-width: 781px) {
	.bj-chips { flex-direction: column; }
	.bj-chip { justify-content: space-between; min-height: 52px; border-radius: 12px; }
}
/* ---------- Parent-theme layout reset ----------
   Twenty Twenty-Five wraps page content in a constrained <main> with a top
   margin and global side padding. Our sections are full-bleed and carry their
   own gutter, so we hand the width back to them wherever they are used. The
   reset is scoped with :has() so ordinary pages keep the parent's layout. */

main:has(> .bj-section),
main:has(> .bj-strip),
main:has(> .bj-band) {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}

main:has(> .bj-section) > :where(.bj-section, .bj-strip, .bj-band, .bj-alert, .bj-callbar),
main:has(> .bj-strip) > :where(.bj-section, .bj-strip, .bj-band, .bj-alert, .bj-callbar),
main:has(> .bj-band) > :where(.bj-section, .bj-strip, .bj-band, .bj-alert, .bj-callbar) {
	max-width: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

/* The block editor applies the same constrained layout to our section groups;
   their inner .bj-wrap already handles centring. */
.bj-section > .wp-block-group,
.bj-section > .bj-wrap {
	max-width: 1180px;
	margin-inline: auto;
}

/* Columns inside the hero must not inherit the editor's own gap maths. */
.bj-hero__grid { gap: 64px; align-items: center; }
.bj-hero__grid > .wp-block-column { min-width: 0; }
@media (max-width: 781px) {
	.bj-hero__grid { gap: 32px; }
}
@media (max-width: 781px) {
	body { padding-bottom: 76px; }
	.bj-callbar { box-shadow: 0 -6px 20px rgba(15, 102, 128, 0.10); }
}

/* ---------- Situation bar ----------
   Sits directly under the hero and carries the problem-led entry, so the hero
   itself stays at five elements. Replaces the decorative keyword strip. */

.bj-chipbar {
	background: var(--bj-surface);
	border-block: 1px solid var(--bj-line);
	padding: 28px var(--bj-gutter);
}
.bj-chipbar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	align-items: center;
}
.bj-chipbar__label {
	font-size: 15px;
	font-weight: 700;
	color: var(--bj-ink);
	flex: 0 0 auto;
	margin: 0;
}
@media (max-width: 781px) {
	.bj-chipbar { padding-block: 24px; }
	.bj-chipbar__inner { flex-direction: column; align-items: stretch; gap: 14px; }
}
/* ---------- Why us: hairline + large numeral, not cards ---------- */

.bj-why { border-top: 1px solid #C9DBE1; padding-top: 24px; }
.bj-why__n {
	display: block;
	font-family: var(--bj-font-head);
	font-size: 34px;
	line-height: 1.1;
	color: var(--bj-numeral);
	margin-bottom: 10px;
}
.bj-why__t {
	font-family: var(--bj-font-body);
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 10px;
}

/* ---------- Audience: hairline list, deliberately not a card grid ---------- */

.bj-audience__head {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: flex-end;
	justify-content: space-between;
	border-top: 1px solid var(--bj-rule);
	padding-top: 56px;
	margin-bottom: 44px;
}
.bj-audience__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 28px 24px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bj-audience__list li { border-top: 1px solid var(--bj-line); padding-top: 20px; }
.bj-audience__list h3 {
	font-family: var(--bj-font-body);
	font-size: 18px;
	font-weight: 700;
	color: var(--bj-accent);
	margin-bottom: 8px;
}
.bj-audience__list p { font-size: 15px; line-height: 1.7; color: var(--bj-muted); }
@media (max-width: 1024px) { .bj-audience__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .bj-audience__list { grid-template-columns: 1fr; } }
/* ---------- Tag sizing fix ----------
   .bj-tags is itself a flex container, so tags must not shrink or their label
   wraps and the pill collapses into a circle. */

.bj-tags > .bj-tag { flex: 0 0 auto; white-space: nowrap; }
/* Without this the tags stretch to the row's full height and the pill turns
   into an oval. The cross-axis default is stretch, not start. */
.bj-tags { align-items: flex-start; align-content: flex-start; }

/* The warm row's tint should read as a band, not stop at the text column. */
.bj-row--warm { padding-inline: 24px; margin-inline: -24px; border-radius: var(--bj-r-sm); }
/* ---------- Service legs ---------- */

.bj-legs { display: flex; flex-direction: column; gap: 24px; }
.bj-leg {
	background: var(--bj-surface);
	border-radius: var(--bj-r-lg);
	padding: 56px 52px;
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
}
.bj-leg--ink { background: var(--bj-ink); color: #FFFFFF; }
.bj-leg--ink .bj-h3 { color: #FFFFFF; }
.bj-leg--ink .bj-small, .bj-leg--ink .bj-leg__list p { color: var(--wp--preset--color--on-dark-body, #DCE3E6); }
.bj-leg--ink .bj-leg__list h3 { color: #F9BFA9; }
.bj-leg__head { flex: 1 1 320px; min-width: 0; }
.bj-leg__head .bj-row__num { display: block; margin-bottom: 10px; }
.bj-leg__head .bj-h3 { margin-bottom: 16px; }
.bj-leg__head .bj-small { margin-bottom: 26px; }
.bj-leg__list {
	flex: 999 1 460px;
	min-width: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}
.bj-leg__list h3 {
	font-family: var(--bj-font-body);
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 7px;
}
.bj-leg__list p { font-size: 15px; line-height: 1.7; color: var(--bj-muted); }
@media (max-width: 781px) {
	.bj-leg { padding: 32px 24px; gap: 28px; }
	.bj-leg__list { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- Contact page ---------- */

.bj-contact { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; }
.bj-contact__info { flex: 1 1 360px; min-width: 0; }
.bj-contact__form { flex: 999 1 420px; min-width: 0; background: var(--bj-surface); border-radius: 24px; padding: 44px 40px; }
.bj-contact__label { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bj-quiet); margin-bottom: 6px; }
.bj-contact__big { font-family: var(--bj-font-head); font-size: 36px; line-height: 1.1; color: var(--bj-accent); }
.bj-contact__block { margin-bottom: 28px; }
@media (max-width: 781px) { .bj-contact__form { padding: 28px 22px; } }
/* ---------- Contact form ---------- */

.bj-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bj-field__opt { font-weight: 400; color: var(--bj-quiet); }
.bj-form .bj-btn { margin-top: 6px; }
.bj-formnote {
	border-radius: var(--bj-r-sm);
	padding: 16px 18px;
	margin-bottom: 24px;
	font-size: 16px;
	line-height: 1.6;
}
.bj-formnote--ok { background: var(--bj-accent-soft); color: #14323D; }
.bj-formnote--err { background: #FCE4DA; color: #7A3417; }
/* ---------- Header ---------- */

.bj-header {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 24px;
	align-items: center;
	justify-content: space-between;
	padding: 14px var(--bj-gutter);
	border-bottom: 1px solid #E8EEF0;
	background: var(--bj-bg);
}
.bj-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--bj-ink);
}
.bj-brand span {
	font-family: var(--bj-font-head);
	font-size: 23px;
	letter-spacing: 0.01em;
	line-height: 1.1;
}
.bj-brand--light, .bj-brand--light span { color: #FFFFFF; }

.bj-header__nav {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}
.bj-header .wp-block-navigation { gap: 28px; }
.bj-header .wp-block-navigation a {
	font-family: var(--bj-font-body);
	font-size: 15px;
	font-weight: 500;
	color: var(--bj-ink);
	text-decoration: none;
}
.bj-header .wp-block-navigation a:hover { color: var(--bj-accent); }
.bj-header .wp-block-navigation__responsive-container.is-menu-open a { color: var(--bj-ink); font-size: 20px; }

.bj-btn--sm { min-height: 44px; padding: 0 22px; font-size: 15px; }

@media (max-width: 781px) {
	.bj-header { padding: 14px 20px; }
	.bj-brand span { font-size: 18px; }
	.bj-header__nav { gap: 12px; }
	.bj-btn--sm { padding: 0 16px; }
}

/* ---------- Footer ---------- */

.bj-footer {
	background: var(--bj-ink);
	color: #FFFFFF;
	padding: 72px var(--bj-gutter) 36px;
}
.bj-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
	justify-content: space-between;
}
.bj-footer__brand { flex: 1 1 280px; min-width: 0; }
.bj-footer__tag { margin-top: 14px; font-size: 15px; color: #B9C2C7; }
.bj-footer__nav {
	flex: 999 1 520px;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}
.bj-footer__nav h2 {
	font-family: var(--bj-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #9FD0DE;
	margin-bottom: 14px;
}
.bj-footer__nav ul { list-style: none; margin: 0; padding: 0; }
.bj-footer__nav li { font-size: 15px; line-height: 2; color: #DCE3E6; }
.bj-footer__nav a { color: #DCE3E6; text-decoration: none; }
.bj-footer__nav a:hover { color: #FFFFFF; text-decoration: underline; }
.bj-footer__base {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	justify-content: space-between;
	border-top: 1px solid #2E323C;
	margin-top: 48px;
	padding-top: 24px;
	font-size: 14px;
	color: #B9C2C7;
}
.bj-footer__base a { color: #DCE3E6; }
@media (max-width: 781px) {
	.bj-footer { padding: 48px 20px 28px; }
	.bj-footer__nav { grid-template-columns: 1fr; gap: 28px; }
}
/* ---------- Empty state ---------- */

.bj-empty {
	border: 1px dashed #B9D1DA;
	border-radius: var(--bj-r-lg);
	background: var(--bj-surface);
	padding: 72px 56px;
	text-align: center;
}
.bj-empty .bj-mark { margin-inline: auto; }
@media (max-width: 781px) { .bj-empty { padding: 44px 22px; } }

/* ---------- Long-form prose ---------- */

.bj-toc { background: var(--bj-surface); border-radius: var(--bj-r-md); padding: 32px 28px; }
.bj-toc ol { margin: 0; padding-left: 20px; }
.bj-toc li { font-size: 15px; line-height: 2; }
.bj-toc a { color: var(--bj-accent); text-decoration: none; }
.bj-toc a:hover { text-decoration: underline; }

.bj-prose h2 { margin-top: 44px; }
.bj-prose h2:first-child { margin-top: 0; }
.bj-prose .bj-body { max-width: 36em; }
.bj-list { margin: 0 0 18px; padding-left: 22px; font-size: 17px; line-height: 1.9; color: var(--bj-muted); max-width: 36em; }
.bj-list li { margin-bottom: 6px; }

.bj-callout {
	background: var(--bj-accent-soft);
	border-radius: var(--bj-r-md);
	padding: 26px 24px;
	margin-bottom: 36px;
}
.bj-callout p { font-size: 17px; line-height: 1.9; color: var(--bj-ink); margin: 0; }
.bj-callout--quiet { background: var(--bj-surface); }

.bj-tablewrap { overflow-x: auto; margin-bottom: 36px; }
.bj-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 16px; }
.bj-table th[scope="col"] {
	background: var(--bj-accent);
	color: #FFFFFF;
	text-align: left;
	padding: 14px 18px;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.bj-table th[scope="row"] { text-align: left; font-weight: 600; padding: 16px 18px; }
.bj-table td { padding: 16px 18px; color: var(--bj-muted); }
.bj-table tbody tr { border-bottom: 1px solid #E2EBEE; }
.bj-table tbody tr:nth-child(even) { background: var(--bj-surface); }

/* ---------- Selvtjek ---------- */

.bj-quiz { background: #FFFFFF; border-radius: var(--bj-r-lg); padding: 56px 48px; }
.bj-quiz__meta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bj-quiz__count { font-size: 14px; font-weight: 600; color: var(--bj-quiet); }
.bj-quiz__bar { height: 6px; border-radius: var(--bj-r-pill); background: #E2EBEE; margin-bottom: 36px; }
.bj-quiz__fill { height: 6px; border-radius: var(--bj-r-pill); background: var(--bj-accent); }
.bj-quiz__options {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 32px;
}
@media (max-width: 900px) { .bj-quiz__options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .bj-quiz__options { grid-template-columns: 1fr; } }
.bj-quiz__opt {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	min-height: 78px;
	padding: 14px 16px;
	border: 1.5px solid #C9D7DC;
	border-radius: 14px;
	background: #FFFFFF;
	color: var(--bj-ink);
	font-family: var(--bj-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
}
.bj-quiz__opt:hover, .bj-quiz__opt:focus-visible { border-color: var(--bj-accent); background: var(--bj-accent-soft); }
.bj-quiz__back { min-height: 44px; border: 0; background: none; color: var(--bj-quiet); font-family: var(--bj-font-body); font-size: 15px; font-weight: 600; cursor: pointer; padding: 0; }
.bj-quiz__score { font-family: var(--bj-font-head); font-size: 56px; line-height: 1; }
.bj-weak { border-left: 3px solid var(--bj-highlight); padding: 4px 0 4px 22px; }
@media (max-width: 781px) { .bj-quiz { padding: 32px 22px; } }
/* Headings we move focus to programmatically should not draw a focus ring;
   the move is for screen readers, not a keyboard stop. */
.bj-quiz [tabindex="-1"]:focus, .bj-band [tabindex="-1"]:focus { outline: none; }
.bj-quiz h3 + .bj-small { margin-top: 10px; }

/* ---------- Photography ----------
   Wide photographs use the large radius; the arch stays reserved for
   single portraits, where a dome crop works. */

.bj-photo { margin: 0; border-radius: var(--bj-r-lg); overflow: hidden; background: var(--bj-accent-soft); }
.bj-photo img { display: block; width: 100%; height: auto; }
.bj-photo figcaption { font-size: 14px; line-height: 1.6; color: var(--bj-quiet); padding: 14px 4px 0; }

/* ---------- Anchor navigation ----------
   Smooth scrolling is navigation feedback, not decoration: it shows the reader
   that the page moved rather than swapped. It is the one motion on the site,
   and it collapses to an instant jump for anyone who asks for reduced motion. */

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* A section landed on from a link should not butt against the viewport edge. */
.bj-section[id], .bj-band[id], .bj-chipbar[id], [id].bj-wrap { scroll-margin-top: 32px; }
/* ---------- Sticky header ----------
   The sticky element has to be the template-part wrapper, not .bj-header:
   the wrapper is a sibling of <main> inside .wp-site-blocks, so it has the
   whole page to travel. Made sticky on .bj-header alone it would be trapped
   in a box its own height and never move. */

:root { --bj-header-h: 95px; }
@media (max-width: 781px) { :root { --bj-header-h: 72px; } }

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--bj-bg);
}

/* The admin bar is fixed only on wide screens; below that it scrolls away. */
@media screen and (min-width: 783px) {
	body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
}

/* Anchors must clear the header, or the heading lands behind it. */
.bj-section[id], .bj-band[id], .bj-chipbar[id], [id].bj-wrap {
	scroll-margin-top: var(--bj-header-h);
}
/* ---------- One action per intent on phones ----------
   The fixed bottom bar already carries Ring nu and Skriv, so the header CTA
   would be the same intent twice. Dropping it also keeps the header on one
   line at 375px, where brand + burger + button otherwise wrap. */

@media (max-width: 781px) {
	.bj-header .bj-btn--sm { display: none; }
	.bj-header { flex-wrap: nowrap; }
	.bj-brand { min-width: 0; }
	.bj-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}