/* ---------------------------------------------------------------------------
   Archivo, self-hosted.

   One file, not six. Google serves this family as a VARIABLE font (verified:
   the woff2 carries fvar/gvar/avar/STAT), and the files it returns for weights
   300, 400 and 500 are byte-identical — so a single face covering the 300-500
   range replaces all three.

   latin only, no latin-ext: every Danish character the site needs is at or below
   U+00FF (æ U+00E6, ø U+00F8, å U+00E5), so latin-ext would be 32 KB nobody reads.
   Anything outside the range falls back to the stack, which is correct.

   Self-hosted because the Google Fonts <link> was a render-blocking request to a
   third-party origin — a connection the page cannot start until the HTML lands.
   --------------------------------------------------------------------------- */

@font-face {
	font-family: Archivo;
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url("../fonts/archivo-variable-latin.woff2") format("woff2-variations");
	unicode-range:
		u+0000-00ff, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2122,
		u+2212, u+fffd;
}

/* ELO Byg — design tokens.
   CONTRAST LAW (enforced, not advisory):
   · hairline #C9D2D0 is 1.38:1 — a DIVIDER. It never bounds a control (WCAG 1.4.11 needs 3:1).
     Controls use 2px petrol. The one exception is a disabled control.
   · mint #01FF95 is 1.19:1 on off-white. On a light ground it exists only as a marker rule >=4px
     or as the fill of the primary button. Never text, never 1px, never an active state.
   · active states and underlines on light are 2px petrol.
   · list markers are petrol on light, mint on petrol.
   No error colour is added: an error is petrol inverted, plus a glyph, plus the word "Fejl:". */
:root {
	--offwhite: #f1f3f2;
	--surface: #e3e8e6;
	--petrol: #002e33;
	--muted: #4a6a6e;
	--hairline: #c9d2d0;
	--muted-dark: #7fa6a8;
	--mint: #01ff95;
	--divider-dark: #0a4a50;
	--error: #8f2c24;
	--fs-display: clamp(40px, 5.2vw, 72px);
	--fs-h2: clamp(24px, 3.2vw, 40px);
	--fs-h3: 24px;
	--fs-body: 16px;
	--fs-meta: 13px;
	--gutter: clamp(24px, 5vw, 80px);
	--gap: clamp(24px, 2.4vw, 32px);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--offwhite);
	color: var(--petrol);
	font-family: Archivo, "Helvetica Neue", Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size: var(--fs-body);
	line-height: 28px;
}

img {
	max-width: 100%;
	display: block;
}

p {
	margin: 0;
}

h1,
h2,
h3 {
	margin: 0;
	font-weight: 400;
	letter-spacing: -0.02em;
	text-wrap: pretty;
}

h1 {
	font-size: var(--fs-display);
	letter-spacing: -0.03em;
	line-height: 1.05;
}

h2 {
	font-size: var(--fs-h2);
	line-height: 1.2;
}

h3 {
	font-size: var(--fs-h3);
	line-height: 32px;
	letter-spacing: -0.01em;
}

/* A card heading inside a cell grid is an h2 when nothing above it in the page
   would make it an h3 - the heading level is the page outline's business, not the
   type scale's. It reads at h3 size either way. */
.cells h2 {
	font-size: var(--fs-h3);
	line-height: 32px;
	letter-spacing: -0.01em;
}

a {
	color: var(--petrol);
	text-decoration: none;
}

:focus-visible {
	outline: 2px solid var(--petrol);
	outline-offset: 2px;
}

label:focus-within {
	outline: 2px solid var(--petrol);
	outline-offset: 2px;
}

.band--petrol :focus-visible {
	outline-color: var(--mint);
}

.skip {
	position: absolute;
	left: -9999px;
}

.skip:focus {
	position: static;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 24px;
	background: var(--mint);
	color: var(--petrol);
}

.wrap {
	max-width: 1440px;
	margin: 0 auto;
	padding-inline: var(--gutter);
}

.band {
	padding-block: clamp(64px, 8vw, 112px);
}

.band--petrol {
	background: var(--petrol);
	color: var(--offwhite);
}

.band--petrol h1,
.band--petrol h2,
.band--petrol h3 {
	color: var(--offwhite);
}

.band--petrol p {
	color: var(--muted-dark);
}

.band--surface {
	background: var(--surface);
}

.muted {
	color: var(--muted);
}

.meta {
	font-size: var(--fs-meta);
	line-height: 20px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.band--petrol .meta {
	color: var(--mint);
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: var(--fs-meta);
	line-height: 20px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--petrol);
}

.band--petrol .eyebrow {
	color: var(--mint);
}

.eyebrow::before {
	content: "";
	width: 40px;
	height: 4px;
	background: var(--mint);
	flex: 0 0 auto;
}

@media (width <= 420px) {
	.eyebrow {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

.grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

@media (width <= 900px) {
	.grid {
		grid-template-columns: 1fr;
	}

	.grid > * {
		grid-column: 1/-1 !important;
		padding-top: 0 !important;
	}
}

/* buttons — 56px for primary and form controls, 48px for everything else */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 32px;
	font-size: var(--fs-body);
	border-radius: 0;
	border: 2px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
}

.btn--sm {
	min-height: 48px;
	padding: 0 24px;
}

.btn--mint {
	background: var(--mint);
	color: var(--petrol);
}

.btn--mint:hover {
	background: #00e085;
}

.btn--ghost {
	border-color: var(--petrol);
	color: var(--petrol);
	background: none;
}

.band--petrol .btn--ghost {
	border-color: var(--muted-dark);
	color: var(--offwhite);
}

.btn--ghost:hover {
	background: var(--petrol);
	color: var(--offwhite);
}

.band--petrol .btn--ghost:hover {
	background: var(--offwhite);
	color: var(--petrol);
}

.btn--wide {
	width: 100%;
}

.link {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	border-bottom: 2px solid var(--petrol);
}

.band--petrol .link {
	border-bottom-color: var(--mint);
	color: var(--offwhite);
}

/* header */
.hdr {
	border-bottom: 1px solid var(--hairline);
	background: var(--offwhite);
	position: sticky;
	top: 0;
	z-index: 20;
}

.hdr__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 88px;
}

.logo {
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.nav {
	display: flex;
	align-items: center;
	gap: 32px;
}

.nav a {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	color: var(--muted);
}

.nav a[aria-current="page"] {
	color: var(--petrol);
	border-bottom: 2px solid var(--petrol);
}

.hdr__right {
	display: flex;
	align-items: center;
	gap: 24px;
}

/* language switcher: both languages visible, current is not a link */
.lang {
	display: flex;
	align-items: center;
}

/* Direct children only: the spans INSIDE each item (.full, .code, .skip) matched
   too, so every item got the padding twice - 72px instead of the design's 48 - and
   on a phone that squeezed "ELO Byg" onto two lines. */
.lang > a,
.lang > span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	padding: 0 12px;
	font-size: var(--fs-meta);
	letter-spacing: 0.16em;
	color: var(--muted);
}

.lang [aria-current] {
	color: var(--petrol);
	border-bottom: 2px solid var(--petrol);
}

.lang i {
	width: 1px;
	height: 16px;
	background: var(--hairline);
	margin: 0 8px;
	display: block;
}

.lang .full {
	display: inline;
}

.lang .code {
	display: none;
}

.menu {
	display: none;
}

@media (width <= 1100px) {
	.hdr__in {
		min-height: 72px;
	}

	.nav {
		display: none;
	}

	.hdr__cta {
		display: none;
	}

	.menu {
		display: block;
	}

	.lang .full {
		display: none;
	}

	.lang .code {
		display: inline;
	}

	.menu summary {
		list-style: none;
		width: 48px;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.menu summary::-webkit-details-marker {
		display: none;
	}

	/*
	 * The whole dropdown leaves the flow as ONE panel. Positioning only .nav left
	 * the CTA in flow, and <details> sizes to its widest in-flow child: the element
	 * grew to 144px and the page scrolled 4px sideways at 375px while the menu was
	 * open. '.menu[open] .nav .btn' below never matched either - the button was a
	 * sibling of .nav, not a descendant - so its margin had never applied.
	 *
	 * .menu itself must stay position: static. .hdr is position: sticky, which makes
	 * IT the containing block, so left/right: 0 spans the header. Making .menu
	 * relative re-anchors the panel to the 48px summary and the dropdown collapses
	 * to icon width.
	 */
	.menu[open] .menu__panel {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--offwhite);
		border-bottom: 1px solid var(--hairline);
		padding: 8px var(--gutter) 24px;
	}

	.menu__panel .nav {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.menu[open] .menu__panel .nav a {
		min-height: 56px;
		border-bottom: 1px solid var(--hairline);
	}

	.menu[open] .menu__panel > .btn {
		margin-top: 16px;
	}
}

/* the logo stays on one line down to the narrowest phones */
@media (width <= 400px) {
	.hdr__in,
	.hdr__right {
		gap: 16px;
	}
}

@media (width <= 340px) {
	.logo {
		font-size: 20px;
		letter-spacing: 0.04em;
	}

	.hdr__in,
	.hdr__right {
		gap: 12px;
	}

	.lang > a,
	.lang > span {
		min-width: 44px;
	}

	.lang i {
		margin: 0 4px;
	}
}

/* hero */
.hero__img {
	aspect-ratio: 1440/640;
	background: var(--surface);
	overflow: hidden;
}

.hero__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__panel {
	background: var(--petrol);
	color: var(--offwhite);
	padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 64px);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.hero__panel h1 {
	color: var(--offwhite);
}

.hero__panel p {
	color: var(--muted-dark);
	max-width: 56ch;
}

@media (width >= 1100px) {
	.hero__panel {
		margin: -200px 0 0 160px;
		width: min(720px, 60vw);
		position: relative;
		z-index: 1;
	}
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 8px;
}

.pagehero {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: clamp(48px, 7vw, 96px) 40px;
}

.pagehero p {
	max-width: 56ch;
}

/* trade cards — equal height, CTA on one baseline */
.trades {
	display: grid;
	gap: clamp(48px, 6vw, 96px) var(--gap);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
}

@media (width <= 760px) {
	.trades {
		grid-template-columns: 1fr;
	}
}

.tcard {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
}

.tcard__lead,
.tcard__thumb {
	aspect-ratio: 3/2;
	background: var(--surface);
	overflow: hidden;
}

.tcard__lead img,
.tcard__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tcard__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.tcard__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: 24px;
	flex-grow: 1;
}

.tcard__body .btn {
	margin-top: auto;
}

.index {
	display: grid;
	gap: clamp(40px, 5vw, 64px) var(--gap);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (width <= 1100px) {
	.index {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width <= 640px) {
	.index {
		grid-template-columns: 1fr;
	}
}

.icard {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.icard__img {
	aspect-ratio: 3/2;
	background: var(--surface);
	overflow: hidden;
}

.icard__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rows {
	display: flex;
	flex-direction: column;
}

.rows > div {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 0;
	border-top: 1px solid var(--hairline);
}

.band--petrol .rows > div {
	border-top-color: var(--divider-dark);
}

.rows i {
	width: 8px;
	height: 8px;
	background: var(--petrol);
	flex: 0 0 auto;
	display: block;
	margin-top: 10px;
}

.band--petrol .rows i {
	background: var(--mint);
}

.band--petrol .rows p {
	color: var(--offwhite);
}

.cards {
	display: grid;
	gap: clamp(40px, 5vw, 64px) var(--gap);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (width <= 1000px) {
	.cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width <= 640px) {
	.cards {
		grid-template-columns: 1fr;
	}
}

.card {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/*
 * A project without a photo drops its .card__img box rather than printing a solid
 * grey rectangle (page-templates/projekter.php). Right for the box, wrong for the
 * row: the text then started at the TOP of its grid cell while every neighbour's
 * text sat BELOW a photo, so one card floated out of line.
 *
 * The push has to be scoped to exactly those cards. Applying justify-content to
 * .card itself looks like the same fix and is worse: grid stretches every card in a
 * row to the tallest, so flex-end would move the extra space to the TOP of the
 * PHOTO cards too and knock every photo in the row out of alignment - trading one
 * misaligned card for a misaligned row.
 */
.card:not(:has(.card__img)) {
	justify-content: flex-end;
}

.card__img {
	aspect-ratio: 3/2;
	background: var(--surface);
	overflow: hidden;
}

.card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Every string on this page came out of a field, so every string can be one
 * unbroken run - a pasted URL, a reference number, a 5000-character paste. The
 * grid tracks are already minmax(0, 1fr), which caps the TRACK; it does not cap
 * the ITEM. A grid or flex item defaults to min-width: auto, so the card grew
 * past its own track and took the document with it: one long "Sagens navn"
 * measured 53,603px of horizontal scroll at 1440 and 47,281px at 390.
 *
 * min-width: 0 lets the item shrink to its track; overflow-wrap: anywhere then
 * gives the text somewhere to break. Both halves are needed - either alone still
 * overflows. This is the same failure the phone number hit in .contact__num.
 */
.card,
.card > * {
	min-width: 0;
	overflow-wrap: anywhere;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.chip {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 24px;
	border: 2px solid var(--petrol);
	background: none;
	color: var(--petrol);
	font: inherit;
	cursor: pointer;

	/* The label is a taxonomy term the owner renames in wp-admin, so its length is
	   theirs, not ours. With nowrap and no shrink guard, renaming Tømrer to
	   "Tømrer- og snedkerarbejde samt tagkonstruktioner" made one chip 402px wide
	   inside a 390px screen and gave /projekter/ horizontal page scroll. Measured. */
	min-width: 0;
	overflow-wrap: anywhere;
}

.chip[aria-pressed="true"] {
	background: var(--petrol);
	color: var(--offwhite);
}

.cells {
	display: grid;
	gap: 1px;
	background: var(--divider-dark);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (width <= 1000px) {
	.cells {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width <= 600px) {
	.cells {
		grid-template-columns: 1fr;
	}
}

.cells > div {
	background: var(--petrol);
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* forms */
.form {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 736px;
}

.two {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: end;
}

@media (width <= 640px) {
	.two {
		grid-template-columns: 1fr;
	}
}

.field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.field label {
	font-size: var(--fs-meta);
	line-height: 20px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.field .hint {
	font-size: var(--fs-meta);
	line-height: 20px;
	color: var(--muted);
}

.field input,
.field select,
.field textarea {
	min-height: 56px;
	padding: 16px;
	border: 2px solid var(--petrol);
	background: var(--offwhite);
	color: var(--petrol);
	font: inherit;
	border-radius: 0;
	width: 100%;
}

.field input::placeholder,
.field textarea::placeholder {
	color: var(--muted);
}

.field textarea {
	min-height: 144px;
	resize: vertical;
	line-height: 28px;
}

.field select {
	appearance: none;
	padding-right: 48px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23002E33' stroke-width='1.5'><path d='M5 9l7 7 7-7'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.chk {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 48px;
	padding: 12px 0;
	cursor: pointer;
}

.chk input {
	position: absolute;
	left: 0;
	top: 12px;
	width: 24px;
	height: 24px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.chk span.box {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	border: 2px solid var(--petrol);
	background: var(--offwhite);
	display: flex;
	align-items: center;
	justify-content: center;
}

.chk input:checked + span.box {
	background: var(--mint);
}

.chk input:checked + span.box::after {
	content: "";
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--petrol);
	border-bottom: 2px solid var(--petrol);
	transform: rotate(-45deg);
	margin-top: -3px;
}

.chk .t {
	font-size: var(--fs-meta);
	line-height: 20px;
	color: var(--muted);
}

.chk .t a {
	border-bottom: 1px solid var(--petrol);
	color: var(--petrol);
}

.cert {
	background: var(--surface);
	border-top: 4px solid var(--mint);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cert__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 32px;
	padding-top: 8px;
}

@media (width <= 640px) {
	.cert__grid {
		grid-template-columns: 1fr;
	}
}

.cert .chk .t {
	font-size: var(--fs-body);
	line-height: 28px;
	color: var(--petrol);
}

/* upload — the button is the primary affordance; drag is an enhancement */
.up {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.up__label {
	font-size: var(--fs-meta);
	line-height: 20px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.up__hint {
	font-size: var(--fs-meta);
	line-height: 20px;
	color: var(--muted);
}

.up__zone {
	max-width: 640px;
	min-height: 176px;
	border: 2px dashed var(--muted);
	background: var(--offwhite);
	padding: 24px;

	/* Hidden by default; the hover/fine-pointer query below shows it, because a
	   drag-and-drop target is useless on a touch device. */
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	text-align: center;
}

.up__zone.over {
	border: 2px solid var(--petrol);
	background: var(--surface);
}

.up__pick {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 2px solid var(--petrol);
	color: var(--petrol);
	cursor: pointer;
}

.up__pick input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.up__taps {
	display: flex;
	gap: 16px;
	max-width: 640px;
}

.up__taps .up__pick {
	flex: 1 1 0;
	min-height: 56px;
}

@media (width <= 640px) {
	.up__taps {
		flex-direction: column;
	}
}

@media (hover: hover) and (pointer: fine) {
	.up__zone {
		display: flex;
	}

	.up__taps {
		display: none;
	}
}

.up__list {
	display: flex;
	flex-direction: column;
	max-width: 640px;
}

.up__row {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 80px;
	padding: 16px 0;
	border-top: 1px solid var(--hairline);
}

.up__row:first-child {
	border-top: 0;
}

.up__ext {
	width: 64px;
	height: 64px;
	background: var(--surface);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-meta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	flex: 0 0 auto;
}

/* The other half of the pair: a filename with no spaces has nowhere to break. */
.up__name {
	flex-grow: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow-wrap: anywhere;
}

.up__name b {
	font-weight: 400;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.up__name span {
	font-size: var(--fs-meta);
	line-height: 20px;
	color: var(--muted);
}

.up__rm {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	cursor: pointer;
	flex: 0 0 auto;
}

.up__bar {
	height: 8px;
	background: var(--surface);
	width: 100%;
}

.up__bar > i {
	display: block;
	height: 8px;
	background: var(--petrol);
}

.up__err {
	background: var(--petrol);
	color: var(--offwhite);
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 64px;
	max-width: 640px;
}

.up__err b {
	font-weight: 500;
}

.up__err .up__rm svg {
	stroke: var(--offwhite);
}

.up__thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	max-width: 640px;
}

@media (width <= 900px) {
	.up__thumbs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (width <= 560px) {
	.up__thumbs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.thumb {
	display: flex;
	flex-direction: column;
}

.thumb__box {
	position: relative;
	aspect-ratio: 3/2;
	background: var(--surface);
	overflow: hidden;
}

.thumb__box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.thumb__rm {
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 8px;
	background: none;
	border: 0;
	cursor: pointer;
}

.thumb__rm span {
	width: 24px;
	height: 24px;
	background: var(--petrol);
	display: flex;
	align-items: center;
	justify-content: center;
}

.thumb__ok {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 24px;
	height: 24px;
	background: var(--petrol);
	display: flex;
	align-items: center;
	justify-content: center;
}

.count {
	font-size: var(--fs-meta);
	line-height: 20px;
	color: var(--muted);
}

.errbox {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border-left: 4px solid var(--petrol);
	padding: 8px 0 8px 16px;
}

.note {
	background: var(--surface);
	padding: 32px;
}

/* vacancy rows */
.jobs {
	display: flex;
	flex-direction: column;
}

.job {
	display: grid;
	grid-template-columns: 3fr 2fr 1.4fr auto;
	gap: 32px;
	align-items: center;
	padding: 32px 0;
	border-top: 1px solid var(--hairline);
}

@media (width <= 1000px) {
	.job {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.job .btn {
		width: 100%;
	}
}

.job--open {
	background: var(--surface);
	border-bottom: 1px solid var(--hairline);
	padding: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

@media (width <= 1000px) {
	.job--open {
		flex-direction: column;
		align-items: stretch;
	}
}

/* contact */
.contact__row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px 0;
	border-top: 1px solid var(--hairline);
}

/*
 * The phone number is free text at heading size in a half-width column. It used
 * to carry white-space: nowrap, so anything longer than a number - "Ring til
 * Jens paa 12 34 56 78 (kun akut)" - could not break, and pushed the whole page
 * sideways on a phone. It wraps now; overflow-wrap catches a single unbroken run
 * of digits too. An unbreakable number belongs to the value, not to the layout:
 * join its groups with a non-breaking space at the source.
 */
.contact__num {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	min-height: 56px;
	font-size: var(--fs-h3);
	border-bottom: 2px solid var(--petrol);
	align-self: flex-start;
	white-space: normal;
	overflow-wrap: anywhere;
}

.receipt {
	display: flex;
	flex-direction: column;
	max-width: 520px;
}

.receipt > div {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--divider-dark);
}

.receipt .k {
	font-size: var(--fs-meta);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mint);
	min-width: 120px;
}

/* footer */
.ftr {
	background: var(--petrol);
	color: var(--offwhite);
	padding-block: clamp(64px, 7vw, 96px) 48px;
}

.ftr a {
	color: var(--offwhite);
	display: inline-flex;
	align-items: center;
	min-height: 48px;
}

.ftr p {
	color: var(--muted-dark);
}

.ftr__cols {
	display: grid;
	gap: 40px var(--gap);
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	padding-bottom: 64px;
	border-bottom: 1px solid var(--divider-dark);
}

@media (width <= 1000px) {
	.ftr__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width <= 600px) {
	.ftr__cols {
		grid-template-columns: 1fr;
	}
}

.ftr__col {
	display: flex;
	flex-direction: column;
}

.ftr__base {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	justify-content: space-between;
	padding-top: 32px;
}

.ftr__base a,
.ftr__base p {
	font-size: var(--fs-meta);
	color: var(--muted-dark);
}

/* sticky call bar — phones only */
.callbar {
	display: none;
}

@media (width <= 760px) {
	.callbar {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 64px;
		background: var(--petrol);
		border-top: 1px solid var(--muted-dark);
		color: var(--mint);
		z-index: 30;
		padding-bottom: env(safe-area-inset-bottom);
	}

	body {
		padding-bottom: 64px;
	}
}

.banner {
	background: var(--petrol);
	color: var(--mint);
	font-size: var(--fs-meta);
	line-height: 20px;
	letter-spacing: 0.06em;
	text-align: center;
	padding: 12px var(--gutter);
}

/* ---------------------------------------------------------------------------
   Theme layout classes.

   The static preview carried these as inline style="" attributes. They live here
   instead so Stylelint can see them and so an editor cannot inherit a one-off
   inline rule. Values are unchanged from the preview.
   --------------------------------------------------------------------------- */

.hero {
	position: relative;
}

.nav__list {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

.band__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 48px;
}

.band__headings {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.grid--center {
	align-items: center;
}

.grid--end {
	align-items: end;
}

.grid__half {
	grid-column: span 6;
}

.grid__main {
	display: flex;
	flex-direction: column;
	grid-column: span 7;
	gap: 24px;
}

.grid__aside {
	display: flex;
	flex-direction: column;
	grid-column: 8 / span 5;
	gap: 24px;
}

.grid__actions {
	display: flex;
	flex-direction: column;
	grid-column: 9 / span 4;
	gap: 16px;
}

.measure {
	max-width: 48ch;
}

.measure-wide {
	max-width: 56ch;
}

.measure-page {
	max-width: 72ch;
}

.btn--start {
	align-self: flex-start;
}

.ftr__col--brand {
	gap: 16px;
}

.ftr__blurb {
	max-width: 34ch;
}

.ftr__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	align-items: center;
}

/* The consent control is a <button> because Complianz listens for one; it has to
   read as the link beside it. */
.ftr__consent {
	padding: 0;
	font: inherit;
	font-size: var(--fs-meta);
	color: var(--muted-dark);
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

.ftr__consent:hover,
.ftr__consent:focus-visible {
	color: var(--ink);
}

.certs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.certs li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.contact__direct {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	margin-top: 32px;
}

/* thank-you page: stacked, as in the design's Kvittering artboards */
.thanks .measure-page {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.thanks__icon {
	display: inline-flex;
	color: var(--mint);
}

@media (width <= 900px) {
	.band__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.grid__half,
	.grid__main,
	.grid__aside,
	.grid__actions {
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------------------------------------
   Layout utilities for the fully ported page templates.

   Each one stands in for an inline style the signed-off design carried. Values
   are taken from that design verbatim, not invented - the comment on each rule
   gives the declaration it replaces and how often it appeared.
   --------------------------------------------------------------------------- */

/* padding-top:0 */
.band--flush {
	padding-block-start: 0;
}

/* padding-top:16px */
.band--tight {
	padding-block-start: 16px;
}

/* padding-top:24px */
.band--tight-top {
	padding-block-start: 24px;
}

/* display:flex;flex-direction:column;gap:24px */
.band__stack {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* display:flex;flex-direction:column;gap:48px */
.band__stack--loose {
	gap: 48px;
}

/* grid-template-columns:repeat(3,minmax(0,1fr)) */
.cells--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* the trade filter row that wraps .chips */
.filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
}

/* align-items:start */
.grid--start {
	align-items: start;
}

/* grid-column:span 5;display:flex;flex-direction:column;gap:24px */

/*
 * .grid__lead and .grid__detail are grid items holding field text - the featured
 * project's heading, body and fact rows. The track is minmax(0, 1fr), which caps
 * the TRACK and not the ITEM, so both need min-width: 0 for the same reason .card
 * does. See the note above .card.
 */
.grid__lead {
	display: flex;
	flex-direction: column;
	grid-column: span 5;
	min-width: 0;
	gap: 24px;
	overflow-wrap: anywhere;
}

/* grid-column:7/span 6;display:flex;flex-direction:column;gap:24px */
.grid__body {
	display: flex;
	flex-direction: column;
	grid-column: 7 / span 6;
	gap: 24px;
}

/* grid-column:7/span 6 */
.grid__detail {
	grid-column: 7 / span 6;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* max-width:62ch */
.measure-long {
	max-width: 62ch;
}

/* margin-top:24px */
.note--spaced {
	margin-top: 24px;
}

/* display:flex;flex-direction:column;gap:16px */
.stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* gap:4px */
.stack--tight {
	gap: 4px;
}

/* gap:8px */
.stack--sm {
	gap: 8px;
}

/* gap:32px */
.stack--lg {
	gap: 32px;
}

@media (width <= 900px) {
	.grid__lead,
	.grid__body,
	.grid__detail {
		grid-column: 1 / -1;
	}

	.cells--3 {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   The hidden attribute must actually hide.

   The browser's own [hidden] { display: none } lives in the user-agent origin, and
   ANY author rule beats it - so .card { display: flex } silently won, and the trade
   filter on Projekter set element.hidden on cards that then stayed on screen. The
   filter looked implemented, was tested by reading the JavaScript, and did nothing.

   !important because the point is to beat every author display rule, including ones
   nobody has written yet.
   --------------------------------------------------------------------------- */

[hidden] {
	display: none !important;
}

/*
 * "Sent" and "not sent" must not look the same.
 *
 * A successful submit leaves for /tak/, so a response message that STAYS on the
 * page is always something having gone wrong - a validation error, or the network
 * failing mid-submit. Both arrived in the site's ordinary petrol, identical to the
 * "we already have your message" notice the back-button guard shows, which is a
 * confirmation. Nothing but the words told the two apart, and the words are the
 * part a worried visitor skims.
 *
 * Measured with the submit request pointed at a dead port: "Noget gik galt, da
 * beskeden skulle sendes." rendered in rgb(0, 46, 51), the same colour as every
 * heading on the page.
 */
.forminator-response-message.forminator-show {
	/* Forminator ships this element with no border at all, so a width on its own
	   computes to 0px - the style has to come with it. */
	border-left: 4px solid;
	padding-left: 12px;
}

.forminator-response-message.forminator-show:not(.forminator-success) {
	color: var(--error);
	border-color: var(--error);
}

.forminator-response-message.forminator-show.forminator-success {
	border-color: var(--mint);
}