/**
 * Miljöfirman — layout and components that theme.json cannot express.
 *
 * theme.json owns the design tokens (colour, type scale, spacing, buttons).
 * This file owns the shapes that are specific to the design: the oval
 * hero photo, the USP band, the overlay project cards, the quote banner and
 * the footer grid.
 *
 * Naming: mf-<block>__<element>, matching the classNames set in
 * patterns/startsida.php and the template parts.
 */

:root {
	--mf-content: 1080px;
	--mf-header: 1160px;
	--mf-gutter: clamp(1.25rem, 5vw, 4.5rem);
	--mf-header-gutter: clamp(1.25rem, 3vw, 2.5rem);
	--mf-radius: 18px;
	--mf-radius-sm: 15px;

	--mf-primary: var(--wp--preset--color--primary, #14411c);
	--mf-accent: var(--wp--preset--color--accent, #2c6d28);
	--mf-forest: var(--wp--preset--color--forest, #1a3e1f);
	--mf-surface: var(--wp--preset--color--surface, #f7f7f4);
	--mf-line: var(--wp--preset--color--line, #e2e2da);
	--mf-muted: var(--wp--preset--color--contrast-2, #5a625c);
	--mf-lime: #74b22f;
}

/* Type: every font-size and font-family below is a theme.json preset. */

/* Playfair's ampersand is a decorative "Et" that stands out in "Mark &
   vatten" and "Byggnader & återbruk". The serif takes the & from Inter, as
   everywhere else on the site. Here rather than in theme.json, which would
   give the Playfair faces this family's name. Set on body so it wins over
   the preset defined on :root. */
@font-face {
	font-family: "Miljofirman Et";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/Inter-latin.woff2") format("woff2");
	unicode-range: U+0026;
}

body {
	--wp--preset--font-family--serif: "Miljofirman Et", "Playfair Display", Georgia, "Times New Roman", serif;
}

/* Every decorative mark is a masked pseudo-element: SVG in post content is
   stripped by KSES on save, and an inline SVG inside a core/html block only
   renders in a style-less sandbox iframe in the editor. */
.mf-usp__item::before,
.mf-quote__banner::after,
.mf-hero__img::after,
.mf-card::before,
.mf-arrowlink a::after,
.wp-block-button.is-style-pil .wp-block-button__link::after,
.wp-block-button.is-style-kontur-pil .wp-block-button__link::after,
.wp-block-button.is-style-lov .wp-block-button__link::before {
	content: "";
	display: inline-block;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	flex: none;
}

/* -------------------------------------------------------------------------
   Base
   ---------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.screen-reader-text:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Full-bleed sections clip the hero circle at the viewport edge. */
.mf-hero,
.mf-usp,
.mf-projects,
.mf-quote,
.mf-cta,
.mf-footer {
	overflow-x: clip;
}

/* The sections below are turned into flex/grid by this file, so the
   margin-based block gap core adds for flow layouts has to go. */
.wp-site-blocks > * + *,
.mf-main > .wp-block-post-content > * + *,
.mf-hero__grid > * + *,
.mf-usp__grid > * + *,
.mf-usp__item > * + *,
.mf-cards > * + *,
.mf-card > * + *,
.mf-quote__banner > * + *,
.mf-cta__band > * + *,
.mf-footer__cols > * + * {
	margin-block-start: 0;
}

/* Section shells: full-bleed background, centred content. */
.mf-hero__grid,
.mf-usp__grid,
.mf-projects__inner,
.mf-quote__banner,
.mf-cta__band,
.mf-footer__inner {
	max-width: var(--mf-content);
	margin-inline: auto;
	box-sizing: border-box;
}

.mf-hero,
.mf-usp,
.mf-projects,
.mf-quote,
.mf-cta,
.mf-footer {
	padding-inline: var(--mf-gutter);
}

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */

/* Sticky, and offset by the admin bar when one is present so the bar never
   covers the navigation. */
.mf-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: var(--mf-surface);
}

.mf-header {
	padding-inline: var(--mf-header-gutter);
}

.mf-header__bar {
	max-width: var(--mf-header);
	margin-inline: auto;
	min-height: 106px;
	gap: 1.5rem;
}

.mf-brand {
	gap: 0.85rem;
	flex-wrap: nowrap;
}

/* The logo is painted over the site title link, so the link keeps
   "Miljöfirman" as its accessible name and stays editable in the editor. */
.mf-brand .wp-block-site-title {
	margin: 0;
	min-width: 0;
	line-height: 0;
}

.mf-brand .wp-block-site-title a {
	display: block;
	width: clamp(200px, 22vw, 280px);
	max-width: 100%;
	aspect-ratio: 11340 / 1417;
	background: url("../images/miljofirman-logo.svg") no-repeat left center / contain;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
	color: transparent;
}

.mf-header__end {
	gap: clamp(1.5rem, 3vw, 2.75rem);
	flex-wrap: nowrap;
}

.mf-nav .wp-block-navigation__container {
	gap: clamp(1.25rem, 2.4vw, 2.5rem);
}

/* The current page is underlined like the current language, in dark green
   text. Hover only adds a faint line and keeps the text colour, so it never
   looks like the current page. The line is always there, transparent at
   rest, so its colour can fade in. */
.mf-nav .wp-block-navigation-item__content {
	padding: 0.35rem 0;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
	transition: text-decoration-color 0.18s ease, color 0.18s ease;
}

.mf-nav .wp-block-navigation-item__content:hover {
	text-decoration-color: color-mix(in srgb, var(--mf-primary) 22%, transparent);
}

.mf-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--mf-primary);
	text-decoration-color: var(--mf-primary);
}

.mf-header__cta .wp-block-button__link {
	padding-block: 0.9rem;
	padding-inline: 1.5rem;
	white-space: nowrap;
}

/* Language switcher (inc/i18n.php): "SV | EN", the current one underlined. */
.mf-lang ul {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mf-lang li + li {
	border-left: 1px solid var(--mf-line);
}

.mf-lang a {
	display: block;
	padding: 0.35rem 0.55rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
	color: var(--mf-muted);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
	transition: text-decoration-color 0.18s ease, color 0.18s ease;
}

.mf-lang a:hover {
	text-decoration-color: color-mix(in srgb, var(--mf-primary) 22%, transparent);
}

.mf-lang a[aria-current="true"] {
	color: var(--mf-primary);
	text-decoration-color: var(--mf-primary);
}

/* The nav block is right-aligned in the bar; the overlay wants its links
   centred instead. */
.mf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: center;
	align-items: center;
	padding-block: 2.5rem;
}

.mf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.6rem;
	align-items: center;
}

.mf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
}

/* Core collapses the navigation into the overlay below 600px. The header
   holds a wide wordmark and a CTA, so it needs the overlay earlier. */
@media (max-width: 899px) {
	.mf-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.mf-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	/* Keep the switcher beside the logo side of the menu button. */
	.mf-lang {
		order: -1;
	}
}

@media (max-width: 781px) {
	.mf-header__bar {
		min-height: 78px;
		gap: 1rem;
	}

	.mf-brand {
		gap: 0.6rem;
		min-width: 0;
	}

	.mf-brand .wp-block-site-title a {
		width: 200px;
	}

	.mf-header__end {
		gap: 1rem;
	}

	/* A 44 × 44 target around the same 24 px icon; the negative margin keeps
	   the icon where it was. */
	.mf-nav .wp-block-navigation__responsive-container-open {
		box-sizing: content-box;
		padding: 10px;
		margin: -10px;
	}
}

/* Specific enough to beat core's .wp-block-buttons.is-layout-flex. */
@media (max-width: 600px) {
	.mf-header__end .wp-block-buttons.mf-header__cta {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Buttons and arrow links
   ---------------------------------------------------------------------- */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.wp-block-button.is-style-pil .wp-block-button__link::after,
.wp-block-button.is-style-kontur-pil .wp-block-button__link::after {
	width: 1.05em;
	height: 1.05em;
	-webkit-mask-image: var(--mf-icon-arrow-right);
	mask-image: var(--mf-icon-arrow-right);
	margin-left: 0.35rem;
	transition: transform 0.18s ease;
}

.wp-block-button.is-style-pil .wp-block-button__link:hover::after,
.wp-block-button.is-style-kontur-pil .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

.wp-block-button.is-style-lov .wp-block-button__link::before {
	width: 1.05em;
	height: 1.05em;
	-webkit-mask-image: var(--mf-icon-leaf);
	mask-image: var(--mf-icon-leaf);
}

/* Core's outline style keeps the label colour; the design wants dark green
   text on a transparent fill with a hairline border. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-kontur-pil > .wp-block-button__link {
	background: transparent;
	color: var(--mf-primary);
	border: 1px solid rgba(20, 65, 28, 0.22);
	padding-block: 1.05rem;
	padding-inline: 1.85rem;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-kontur-pil > .wp-block-button__link:hover {
	background: transparent;
	color: var(--mf-accent);
	border-color: var(--mf-accent);
}

.mf-arrowlink {
	margin: 0;
	font-weight: 500;
}

.mf-arrowlink a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--mf-primary);
	text-decoration: none;
}

.mf-arrowlink a::after {
	width: 1.1em;
	height: 1.1em;
	-webkit-mask-image: var(--mf-icon-arrow-right);
	mask-image: var(--mf-icon-arrow-right);
	transition: transform 0.18s ease;
}

.mf-arrowlink a:hover {
	color: var(--mf-accent);
	text-decoration: none;
}

.mf-arrowlink a:hover::after {
	transform: translateX(3px);
}

/* Eyebrow paragraph above the hero heading. */
.is-style-ogonbryn {
	margin: 0 0 1.6rem;
	color: var(--mf-accent);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
}

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

.mf-hero {
	position: relative;
	padding-block: 2.5rem 3rem;
}

.mf-hero__grid {
	display: grid;
	gap: 1.5rem;
}

.mf-hero__text > * {
	margin-block: 0;
}

.mf-hero__title {
	margin-bottom: 1.6rem;
	line-height: 1.03;
	letter-spacing: -0.022em;
}

.mf-hero__sub {
	margin-bottom: 1.55rem;
	font-size: var(--wp--preset--font-size--subheading);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.012em;
}

.mf-hero__lead {
	max-width: 30rem;
	margin-bottom: 2.4rem;
	color: #39413b;
	line-height: 1.78;
}

.mf-hero__lead:has(+ .mf-hero__lead) {
	margin-bottom: 1rem;
}

.mf-hero__actions {
	gap: 1.1rem;
}

.mf-hero__media {
	position: relative;
	margin: 0;
}

/* Below 900px the photo is a plain, wide rectangle across the content
   width with the site's small radius. From 900px it outgrows the hero on
   three sides and is cut by an ellipse, so only its left curve shows, as in
   the design. */
.mf-hero__img {
	position: relative;
	margin: 0;
}

.mf-hero__img img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--mf-radius-sm);
}

/* Scroll cue on the ellipse's lower-left edge, desktop only (see the 900px
   query below); on a phone it is plain that the page scrolls. */
.mf-hero__img::after {
	display: none;
	position: absolute;
	left: 10%;
	top: 80%;
	width: clamp(52px, 5.5vw, 76px);
	aspect-ratio: 1;
	translate: -50% -50%;
	border-radius: 50%;
	background-color: var(--mf-accent);
	background-image: var(--mf-icon-arrow-down-light);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 42%;
	box-shadow: 0 8px 24px rgba(20, 65, 28, 0.28);
	-webkit-mask-image: none;
	mask-image: none;
}

@media (min-width: 900px) {
	.mf-hero {
		padding-block: 0;
		overflow: clip;
	}

	.mf-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(1.5rem, 3vw, 3rem);
		min-height: clamp(34rem, 48vw, 46rem);
	}

	.mf-hero__text {
		align-self: center;
		padding-block: 3rem;
	}

	/* Reach the viewport edge: past the gutter, or past half the space
	   beside the content column once the viewport is wider than that. */
	.mf-hero__media {
		margin-right: calc(-1 * max(var(--mf-gutter), (100vw - var(--mf-content)) / 2));
	}

	/* The photo fills the column and is cut by an ellipse larger than it,
	   centred a little above the middle, so only the left curve shows while
	   the whole motif stays in view. */
	.mf-hero__img {
		position: absolute;
		inset: 0;
	}

	.mf-hero__img img {
		height: 100%;
		aspect-ratio: auto;
		border-radius: 0;
		clip-path: ellipse(87% 70% at 87% 45%);
	}

	/* 80% down is half the vertical radius below the centre, where the
	   curve is 87% × (1 - cos 30°) ≈ 11.7% in from the left. */
	.mf-hero__img::after {
		display: inline-block;
		left: 11.7%;
	}
}

/* -------------------------------------------------------------------------
   USP band
   ---------------------------------------------------------------------- */

.mf-usp {
	background: var(--mf-surface);
	padding-block: clamp(1.75rem, 4vw, 2.4rem) clamp(2rem, 5vw, 3rem);
}

.mf-usp__grid {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
}

.mf-usp__item {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	padding-block: 1rem;
}

.mf-usp__item::before {
	width: 50px;
	height: 50px;
	color: var(--mf-primary);
}

.mf-usp__item--leaf::before {
	-webkit-mask-image: var(--mf-icon-usp-leaf);
	mask-image: var(--mf-icon-usp-leaf);
}

.mf-usp__item--people::before {
	-webkit-mask-image: var(--mf-icon-usp-people);
	mask-image: var(--mf-icon-usp-people);
}

.mf-usp__item--shield::before {
	-webkit-mask-image: var(--mf-icon-usp-shield);
	mask-image: var(--mf-icon-usp-shield);
}

.mf-usp__body > * {
	margin-block: 0;
}

.mf-usp__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
	letter-spacing: -0.008em;
	line-height: 1.3;
	margin-bottom: 0.85rem;
	color: var(--wp--preset--color--contrast, #14181a);
}

.mf-usp__body p {
	color: var(--mf-muted);
	line-height: 1.85;
}

@media (min-width: 782px) {
	.mf-usp__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mf-usp__item {
		padding-block: 0;
		padding-right: 1rem;
	}

	.mf-usp__item + .mf-usp__item {
		border-left: 1px solid var(--mf-line);
		padding-left: 2rem;
	}
}

/* -------------------------------------------------------------------------
   Projects
   ---------------------------------------------------------------------- */

.mf-projects {
	padding-block: 2.25rem 2.25rem;
	scroll-margin-top: 7.5rem;
}

.mf-projects__head {
	gap: 1rem 2rem;
	margin-bottom: 1.75rem;
}

.mf-projects__head h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.mf-projects__query {
	margin: 0;
}

.mf-cards {
	display: grid;
	gap: 1.7rem;
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.mf-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.mf-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.mf-card {
	position: relative;
	aspect-ratio: 286 / 230;
	min-height: 240px;
	border-radius: var(--mf-radius-sm);
	overflow: hidden;
	background: #101a12;
	isolation: isolate;
}

/* One card per row: wider, so lower, or each project takes a whole screen. */
@media (max-width: 699px) {
	.mf-card {
		aspect-ratio: 3 / 2;
		min-height: 200px;
	}
}

.mf-card__media,
.mf-card__media img {
	position: absolute;
	inset: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

.mf-card__media img {
	object-fit: cover;
	transition: transform 0.5s ease;
}

.mf-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(8, 16, 10, 0.94) 0%,
		rgba(8, 16, 10, 0.86) 26%,
		rgba(8, 16, 10, 0.6) 52%,
		rgba(8, 16, 10, 0.05) 78%,
		rgba(8, 16, 10, 0) 100%
	);
	pointer-events: none;
}

.mf-card:hover .mf-card__media img {
	transform: scale(1.04);
}

.mf-card__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 0 5.25rem 1.4rem 1.2rem;
}

.mf-card__body > * {
	margin-block: 0;
}

.mf-card__cat {
	color: #9fd46a;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
	margin-bottom: 0.5rem;
}

.mf-card__cat a {
	color: inherit;
	text-decoration: none;
}

.mf-card__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #fff;
	margin-bottom: 0.45rem;
}

.mf-card__title a {
	color: inherit;
	text-decoration: none;
}

/* Whole card is the click target. */
.mf-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.mf-card__ort {
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.88);
	line-height: 1.4;
}

.mf-card::before {
	position: absolute;
	right: 1.2rem;
	bottom: 1.2rem;
	z-index: 2;
	width: 42px;
	height: 42px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	background-color: transparent;
	background-image: var(--mf-icon-arrow-right-light);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 19px 19px;
	-webkit-mask-image: none;
	mask-image: none;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.mf-card:hover::before {
	background-color: rgba(255, 255, 255, 0.16);
	border-color: #fff;
}

/* -------------------------------------------------------------------------
   Quote banner
   ---------------------------------------------------------------------- */

.mf-quote {
	padding-block: 0;
}

.mf-quote__banner {
	position: relative;
	overflow: hidden;
	border-radius: var(--mf-radius);
	background: var(--mf-forest);
	color: #f1f5ef;
	padding: 2.8rem clamp(1.5rem, 5vw, 3.4rem) 2.4rem;
	display: flex;
	align-items: flex-start;
	gap: clamp(1.5rem, 4vw, 3.1rem);
}

/* Two-tone (pale disc, dark mark), so the mark is a background image drawn
   in the forest green rather than a mask. */
.mf-quote__banner::before {
	content: "";
	flex: none;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: #ebeee6 var(--mf-icon-quote-mark) no-repeat center / 44%;
}

.mf-quote__banner::after {
	position: absolute;
	right: 2.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 176px;
	aspect-ratio: 200 / 160;
	color: rgba(255, 255, 255, 0.16);
	pointer-events: none;
	-webkit-mask-image: var(--mf-icon-quote-branch);
	mask-image: var(--mf-icon-quote-branch);
}

.mf-quote__body {
	margin: 0;
	padding: 0;
	border: 0;
	max-width: 38rem;
}

.mf-quote__body p {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.68;
	color: #f1f5ef;
}

.mf-quote__body cite {
	display: block;
	margin-top: 1.15rem;
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 600;
	color: #c9d6c4;
}

/* The facts band on the front page reuses the banner, without the quote
   mark and the branch: one statement, its two numbers in the large serif,
   then a line of plain text. */
.mf-quote__banner.mf-fakta {
	display: block;
	padding-block: clamp(2.25rem, 4vw, 3rem);
}

.mf-quote__banner.mf-fakta::before,
.mf-quote__banner.mf-fakta::after {
	content: none;
}

.mf-fakta > * {
	max-width: 44rem;
	margin: 0;
}

.mf-fakta > .mf-fakta__pastaende {
	max-width: none;
	text-wrap: balance;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #d5e0d1;
}

/* Same face and size as the line; only weight and colour set them apart.
   Lining figures, so the 5 sits on the baseline like the letters. */
.mf-fakta__tal {
	font-weight: 700;
	font-variant-numeric: lining-nums;
	color: #fff;
}

/* On phones each sentence starts its own line, so the two figures line up
   on the left instead of one landing mid-line. */
@media (max-width: 599px) {
	.mf-fakta > .mf-fakta__pastaende {
		font-size: var(--wp--preset--font-size--large);
		line-height: 1.3;
	}

	.mf-fakta__mening {
		display: block;
	}
}

.mf-fakta > .mf-fakta__text {
	max-width: 38rem;
	margin-top: 1.1rem;
	line-height: 1.7;
	color: #c9d6c4;
}

@media (max-width: 600px) {
	.mf-quote__banner {
		flex-direction: column;
	}

	.mf-quote__banner::after {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   CTA band
   ---------------------------------------------------------------------- */

.mf-cta {
	padding-block: 1.7rem 0;
}

.mf-cta__band {
	background: var(--mf-surface);
	border-radius: var(--mf-radius);
	padding: 1.9rem clamp(1.5rem, 4.5vw, 3.5rem);
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	flex-wrap: wrap;
}

.mf-cta__title {
	flex: 1 1 22rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--subheading);
	line-height: 1.24;
}

.mf-cta__text {
	flex: 0 1 19rem;
	max-width: 19rem;
	margin: 0;
	color: var(--mf-muted);
	line-height: 1.75;
}

.mf-cta__actions {
	flex: none;
	margin-left: auto;
}

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

.mf-footer {
	padding-block: 2.5rem 2.75rem;
}

.mf-brand--small {
	gap: 0.6rem;
	margin-bottom: 0.9rem;
}

.mf-brand--small .wp-block-site-title a {
	width: 210px;
}

.mf-footer__cols {
	align-items: flex-start;
}

.mf-footer__tagline {
	max-width: 19rem;
	margin: 0;
	color: var(--mf-muted);
	line-height: 1.75;
}

.mf-footer__heading {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--wp--preset--color--contrast, #14181a);
	margin: 0 0 0.9rem;
}

.mf-footer__meta {
	margin: 0;
	color: var(--mf-muted);
	line-height: 2;
}

.mf-footer__meta a {
	color: var(--mf-muted);
}

.mf-footer__meta a:hover {
	color: var(--mf-accent);
}

.mf-footer__bottom {
	margin-top: 2.5rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--mf-line);
	gap: 1rem;
}

.mf-footer__bottom p {
	margin: 0;
	color: var(--mf-muted);
}

@media (max-width: 781px) {
	.mf-footer {
		padding-block: 2rem 2.25rem;
	}

	/* Beats the columns block's generated gap. */
	.mf-footer .mf-footer__cols {
		row-gap: 1.5rem;
	}

	.mf-footer__heading {
		margin-bottom: 0.4rem;
	}

	.mf-footer__meta {
		line-height: 1.8;
	}

	.mf-footer__bottom {
		margin-top: 1.75rem;
		padding-top: 1.1rem;
	}
}

/* -------------------------------------------------------------------------
   Inner pages, archives, single project
   ---------------------------------------------------------------------- */

.mf-page {
	padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem);
}

.mf-page__head {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.mf-page__head h1 {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
}

/* The constrained layout centres every child with !important, which would
   push this narrower lead to the middle. Align it with the content's left
   edge instead. */
.mf-page__lead {
	margin: 1.1rem auto 0 0;
	margin-left: max(0px, (100% - var(--wp--style--global--content-size, 1080px)) / 2) !important;
	max-width: 34rem;
	color: var(--mf-muted);
	font-family: var(--wp--preset--font-family--serif);
	line-height: 1.5;
}

.mf-page .wp-block-post-content > * + * {
	margin-top: 1.4rem;
}

.mf-projekt__cat {
	margin: 0 0 0.8rem;
	color: var(--mf-accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mf-projekt__cat a {
	color: inherit;
	text-decoration: none;
}

.mf-projekt__ort {
	margin: 0.9rem 0 0;
	color: var(--mf-muted);
}

.mf-pagination {
	margin-top: clamp(2rem, 4vw, 3rem);
	gap: 0.75rem;
}

/* The project photos from the old site are 300 px wide, so a single project
   shows its photo at about that size. Remove the cap with the originals. */
.mf-projekt__media {
	max-width: 30rem;
}

/* Client lists on the Clients page: names in columns, nine at first and
   the rest behind "Visa alla". */
.mf-kundlista {
	columns: 3 13rem;
	column-gap: 2.5rem;
	padding-left: 1.1rem;
}

.mf-kundlista li {
	break-inside: avoid;
	margin-bottom: 0.2rem;
}

.mf-page .wp-block-post-content > .mf-visa {
	margin-top: 0.6rem;
}

.mf-visa summary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	color: var(--mf-primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	list-style: none;
}

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

.mf-visa summary::after {
	content: "";
	width: 0.8rem;
	height: 0.8rem;
	background-color: currentColor;
	-webkit-mask: var(--mf-icon-arrow-down) center / contain no-repeat;
	mask: var(--mf-icon-arrow-down) center / contain no-repeat;
	transition: transform 0.2s ease;
}

.mf-visa summary:hover {
	color: var(--mf-accent);
}

.mf-visa[open] summary::after {
	transform: rotate(180deg);
}

.mf-visa[open] .mf-visa__alla,
.mf-visa:not([open]) .mf-visa__farre {
	display: none;
}

.mf-visa > .mf-kundlista {
	margin-top: 0.9rem;
}

@media (max-width: 599px) {
	.mf-kundlista li {
		margin-bottom: 0;
	}

	.mf-page .wp-block-post-content > .mf-visa {
		margin-top: 0.4rem;
	}

	.mf-page .wp-block-post-content > .mf-visa + h2,
	.mf-page .wp-block-post-content > .mf-kundlista + h2 {
		margin-top: 1.1rem;
	}

	.mf-visa > .mf-kundlista {
		margin-top: 0.6rem;
	}
}

/* People on the Contact page. */
.mf-people {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 2.75rem 2rem;
	margin-block: 2.5rem 3rem;
}

/* Beats the 1.4rem block gap of the page content. */
.mf-page .wp-block-post-content > .mf-people {
	margin-top: 2.5rem;
}

.mf-people > *,
.mf-person > * {
	margin: 0;
}

.mf-person__photo {
	margin-bottom: 1.1rem;
}

.mf-person__photo img {
	width: 7.5rem;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: 50% 20%;
	border-radius: 50%;
}

.mf-person__name {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
	letter-spacing: -0.008em;
	color: var(--wp--preset--color--contrast, #14181a);
}

.mf-person__title {
	margin-top: 0.3rem;
	color: var(--mf-muted);
}

.mf-person__contact {
	margin-top: 0.8rem;
	line-height: 1.8;
}

/* The areas: set apart from the title, smaller, and each name kept whole so
   two areas break at the comma. */
.mf-person__tasks {
	margin-top: 1.15rem;
	color: var(--mf-muted);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.55;
	letter-spacing: 0.01em;
}

.mf-person__tasks span {
	white-space: nowrap;
}

/* With contact details, all five share a row on a wide screen. */
@media (min-width: 960px) {
	.mf-people:has(.mf-person__contact) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		column-gap: 1rem;
	}

	/* Five narrow columns: titles and mail addresses at the smaller size. */
	.mf-people .mf-person__title,
	.mf-people .mf-person__contact {
		font-size: var(--wp--preset--font-size--small);
		overflow-wrap: anywhere;
	}
}

/* The team on About us has no contact details, so all five fit on one row
   (two per row on phones). */
.mf-people:not(:has(.mf-person__contact)) {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
	gap: 2.25rem 1.5rem;
}

/* On phones both pages list the people: a small portrait on the left, name,
   title, contact and areas beside it. Same specificity as the rule above,
   and after it. */
@media (max-width: 599px) {
	.mf-page .mf-people {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
		margin-block: 1.75rem 2.25rem;
	}

	.mf-page .wp-block-post-content > .mf-people {
		margin-top: 1.75rem;
	}

	.mf-person {
		display: grid;
		grid-template-columns: 4.5rem minmax(0, 1fr);
		column-gap: 1rem;
		align-items: start;
	}

	.mf-person > :not(.mf-person__photo) {
		grid-column: 2;
	}

	.mf-person__photo {
		grid-column: 1;
		grid-row: 1 / span 4;
		margin-bottom: 0;
	}

	.mf-person__photo img {
		width: 4.5rem;
	}

	.mf-person__title {
		margin-top: 0.1rem;
		font-size: var(--wp--preset--font-size--small);
	}

	.mf-person__contact {
		margin-top: 0.4rem;
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.7;
	}

	.mf-person__tasks {
		margin-top: 0.5rem;
	}
}

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

/* The addresses on Contact belong together under one heading: close
   together when the columns stack. Beats the columns block's generated gap. */
@media (max-width: 781px) {
	.mf-page .wp-block-post-content > .wp-block-columns {
		row-gap: 1rem;
	}

	.mf-page .wp-block-post-content > .wp-block-columns h3 {
		margin-bottom: 0.5rem;
	}

	.mf-page .wp-block-post-content > .wp-block-columns h3 + p {
		margin-top: 0;
	}
}

/* Partners on the About us page: one card each, labelled with its area. */
.mf-partners {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: 1.25rem;
}

.mf-partner {
	padding: 1.4rem 1.5rem 1.5rem;
	border-radius: var(--mf-radius-sm);
	background: var(--mf-surface);
}

.mf-partners > *,
.mf-partner > * {
	margin: 0;
}

.mf-partner__area {
	margin-bottom: 0.55rem;
	color: var(--mf-accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mf-partner__name {
	margin-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
	letter-spacing: -0.008em;
	color: var(--wp--preset--color--contrast, #14181a);
}

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

/* Contact form (inc/contact-form.php). Left-aligned with the lead, like
   .mf-page__lead above. The field border is darker than --mf-line so the
   fields stay visible (3:1 against the page). */
.mf-form {
	--mf-field-border: color-mix(in srgb, var(--mf-muted) 75%, #fff);
	--mf-error: #a4262c;
	max-width: 46rem;
	margin-left: max(0px, (100% - var(--wp--style--global--content-size, 1080px)) / 2) !important;
	scroll-margin-top: 8rem;
}

/* Four groups: the contact details in a 2 × 2 grid, the topic, the
   description, and sending. The groups are further apart than the fields
   within them. */
.mf-form form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem 1.5rem;
}

.mf-form .mf-form__falt--arende {
	margin-top: 1rem;
}

.mf-form .mf-form__falt--beskrivning {
	margin-top: 0.5rem;
}

@media (min-width: 700px) {
	.mf-form form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mf-form__sammanfattning,
	.mf-form__falt--arende,
	.mf-form__falt--beskrivning,
	.mf-form__skicka {
		grid-column: 1 / -1;
	}
}

.mf-form__falt {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.mf-form__falt > label,
.mf-form__falt > legend {
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #14181a);
}

/* A legend ignores the fieldset's flex gap. */
.mf-form__falt > legend {
	margin-bottom: 0.75rem;
}

.mf-form input:not([type="radio"]),
.mf-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--mf-field-border);
	border-radius: 10px;
	background: var(--wp--preset--color--white, #fff);
	color: inherit;
	font: inherit;
	line-height: 1.5;
}

.mf-form textarea {
	min-height: 9rem;
	resize: vertical;
}

.mf-form input:not([type="radio"]):focus-visible,
.mf-form textarea:focus-visible {
	border-color: var(--mf-primary);
	outline: 2px solid var(--mf-accent);
	outline-offset: 1px;
}

.mf-form [aria-invalid="true"]:not([type="radio"]) {
	border-color: var(--mf-error);
}

.mf-form__valen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.75rem;
}

@media (max-width: 599px) {
	.mf-form__valen {
		flex-direction: column;
		gap: 0;
	}

	.mf-form__val {
		min-height: 2.75rem;
	}
}

.mf-form__val {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	cursor: pointer;
}

.mf-form__val input {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--mf-primary);
}

.mf-form__fel {
	margin: 0;
	color: var(--mf-error);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.mf-form__sammanfattning {
	padding: 1.1rem 1.35rem;
	border-left: 3px solid var(--mf-error);
	border-radius: 0 var(--mf-radius-sm) var(--mf-radius-sm) 0;
	background: var(--mf-surface);
}

.mf-form__sammanfattning > * {
	margin: 0;
}

.mf-form__sammanfattning p {
	font-weight: 600;
}

.mf-form__sammanfattning ul {
	margin-top: 0.4rem;
	padding-left: 1.1rem;
}

.mf-form__sammanfattning a {
	color: var(--mf-error);
	text-decoration: underline;
}

.mf-page .wp-block-post-content > .mf-form + * {
	margin-top: clamp(3rem, 6vw, 4.5rem);
}

/* Out of sight, out of the tab order (tabindex) and hidden from assistive
   technology (aria-hidden). Not display: none, which some bots look for. */
.mf-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mf-form__skicka {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: 0.75rem;
}

.mf-form__skicka .wp-block-buttons {
	margin: 0;
}

.mf-form button.wp-block-button__link {
	cursor: pointer;
}

.mf-form__info {
	flex: 1 1 18rem;
	margin: 0;
	color: var(--mf-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.mf-form--skickat {
	padding: 1.4rem 1.6rem;
	border-radius: var(--mf-radius-sm);
	background: var(--mf-surface);
}

.mf-form--skickat p {
	margin: 0;
}

/* Category filter on the project pages: the pills of the Services page,
   with the current choice filled. */
/* Doubled class to beat the margin reset on .mf-ingangar further down. */
.mf-ingangar.mf-filter {
	margin-top: 1.75rem;
}

.mf-filter a[aria-current] {
	background: var(--mf-primary);
	color: var(--wp--preset--color--white, #fff);
}

/* Services page: two area cards whose links open a section further down. */
.mf-omraden {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: 1.5rem;
	margin-block: 2.5rem 1rem;
}

.mf-omrade {
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: var(--mf-radius);
	background: var(--mf-surface);
}

.mf-omrade__title {
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--subheading);
}

.mf-ingangar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mf-ingangar li {
	margin: 0;
	padding: 0.4rem 0.95rem;
	border: 1px solid var(--mf-line);
	border-radius: 999px;
	background: var(--wp--preset--color--white, #fff);
	color: var(--mf-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

/* The link fills the whole pill. */
.mf-ingangar li:has(a) {
	padding: 0;
	border-color: color-mix(in srgb, var(--mf-primary) 30%, transparent);
}

.mf-ingangar a {
	display: block;
	padding: 0.4rem 0.95rem;
	border-radius: inherit;
	color: var(--mf-primary);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mf-ingangar a:hover,
.mf-ingangar a:focus-visible {
	background: var(--mf-primary);
	color: var(--wp--preset--color--white, #fff);
}

.mf-page .wp-block-post-content > .mf-fordjupning {
	margin-top: clamp(1.75rem, 5vw, 3.5rem);
}

.mf-fordjupning > * {
	margin: 0;
}

.mf-fordjupning__title {
	margin-bottom: 0.75rem;
	font-size: var(--wp--preset--font-size--x-large);
}

.mf-fordjupning > .mf-tjanst + .mf-fordjupning__title {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.mf-tjanst {
	border-bottom: 1px solid var(--mf-line);
	scroll-margin-top: 6rem;
}

.mf-tjanst summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.05rem;
	padding-right: 0.75rem;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
	list-style: none;
}

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

.mf-tjanst summary::after {
	content: "";
	width: 0.9rem;
	height: 0.9rem;
	flex: none;
	background-color: var(--mf-accent);
	-webkit-mask: var(--mf-icon-arrow-down) center / contain no-repeat;
	mask: var(--mf-icon-arrow-down) center / contain no-repeat;
	transition: transform 0.2s ease;
}

.mf-tjanst[open] summary::after {
	transform: rotate(180deg);
}

.mf-tjanst summary:hover {
	color: var(--mf-primary);
}

.mf-tjanst > :not(summary) {
	max-width: 46rem;
	margin: 0 0 1rem;
}

.mf-tjanst > :last-child {
	margin-bottom: 1.5rem;
}

/* -------------------------------------------------------------------------
   Editor parity
   ---------------------------------------------------------------------- */

.editor-styles-wrapper .mf-site-header {
	position: relative;
	top: auto;
}

.editor-styles-wrapper .mf-hero__media {
	margin-right: 0;
}

/* The editor wraps the image in its own resize handles, so keep the photo
   a plain ellipse in its column there. */
.editor-styles-wrapper .mf-hero__img {
	position: relative;
	inset: auto;
}

.editor-styles-wrapper .mf-hero__img img {
	height: auto;
	aspect-ratio: 5 / 4;
	border-radius: 50%;
	clip-path: none;
}

.editor-styles-wrapper .mf-hero__img::after {
	left: 10%;
}

.editor-styles-wrapper .mf-card {
	min-height: 220px;
}