/*
 * Nybyggeren, hovedstiler.
 * Design: mockupen fra oktober 2026 (lys grunn, svart tekst, rød aksent, Schibsted Grotesk).
 */

/* ---------- Grunnverdier ---------- */

:root {
	--grunn: #F3F2EE;
	--hvit: #FFFFFF;
	--blekk: #17191B;
	--tekst-2: #45484C;
	--dempet: #5C5F63;
	--linje: #D5D2CA;
	--linje-lys: #E2E0DA;
	--aksent: #B3312A;
	--aksent-mork: #962620;
	--aksent-lys: #F2A39C;
	--skygge: 0 10px 30px rgba(23, 25, 27, 0.12);
	--striper: repeating-linear-gradient(135deg, #DEDBD3 0 14px, #E4E1DA 14px 28px);

	/* Myk glød i knappens egen farge. Hovedknapper bare. */
	--glod-aksent: 0 1px 2px rgba(150, 38, 32, 0.22), 0 6px 16px -4px rgba(179, 49, 42, 0.42);
	--glod-aksent-hover: 0 2px 4px rgba(150, 38, 32, 0.2), 0 12px 26px -6px rgba(179, 49, 42, 0.5);
	--glod-mork: 0 1px 2px rgba(23, 25, 27, 0.2), 0 6px 16px -4px rgba(23, 25, 27, 0.36);
	--glod-mork-hover: 0 2px 4px rgba(23, 25, 27, 0.18), 0 12px 26px -6px rgba(23, 25, 27, 0.44);

	--r-stor: 28px;
	--r-kort: 24px;
	--r-mid: 20px;
	--r-liten: 14px;

	--maks: 1320px;
	--kant: 32px;
	--luft: 120px;

	--font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (max-width: 760px) {
	:root {
		--kant: 16px;
		--luft: 72px;
		--r-stor: 20px;
		--r-kort: 18px;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

body {
	margin: 0;
	background: var(--grunn);
	color: var(--blekk);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
}

a:hover {
	color: var(--aksent);
}

:focus-visible {
	outline: 3px solid var(--aksent);
	outline-offset: 3px;
	border-radius: 4px;
}

h1,
h2,
h3 {
	margin: 0;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.08;
}

p {
	margin: 0;
}

[id] {
	scroll-margin-top: 24px;
}

.skjult {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.hopp {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	background: var(--blekk);
	color: var(--hvit);
	padding: 12px 18px;
	border-radius: 999px;
	text-decoration: none;
}

.hopp:focus {
	top: 16px;
	color: var(--hvit);
}

.ramme {
	max-width: var(--maks);
	margin-inline: auto;
	padding-inline: var(--kant);
}

.seksjon {
	padding-top: var(--luft);
}

.seksjon--siste {
	padding-bottom: var(--luft);
}

.seksjon__hode {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 40px;
}

.seksjon__hode h2,
.beliggenhet h2,
.henning h2 {
	font-size: clamp(30px, 3.6vw, 52px);
	margin-top: 10px;
}

.seksjon__liten {
	font-size: clamp(24px, 2.6vw, 34px);
	margin-bottom: 24px;
}

.etikett {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--aksent);
}

.etikett--lys {
	color: var(--aksent-lys);
}

/* ---------- Knapper ---------- */

.knapperad {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.knapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 22px;
	border-radius: 999px;
	border: 1.5px solid transparent;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.2s ease, transform 0.2s ease;
}

.knapp--liten {
	min-height: 44px;
	padding: 10px 18px;
	font-size: 15px;
}

.knapp--bred {
	width: 100%;
}

/* Hovedknapper: farge, glød og et lite løft ved hover. Sekundærknapper er flate. */
.knapp--aksent {
	background: var(--aksent);
	color: var(--hvit);
	box-shadow: var(--glod-aksent);
}

.knapp--mork {
	background: var(--blekk);
	color: var(--hvit);
	box-shadow: var(--glod-mork);
}

/* Hover bare med mus. På berøringsskjerm blir hover hengende igjen etter et trykk. */
@media (hover: hover) {
	.knapp--aksent:hover {
		background: var(--aksent-mork);
		color: var(--hvit);
		box-shadow: var(--glod-aksent-hover);
		transform: translateY(-1.5px);
	}

	.knapp--mork:hover {
		background: #000;
		color: var(--hvit);
		box-shadow: var(--glod-mork-hover);
		transform: translateY(-1.5px);
	}

	.knapp--omriss:hover {
		background: var(--blekk);
		color: var(--hvit);
	}

	.knapp--omriss-lys:hover {
		background: var(--hvit);
		color: var(--blekk);
	}
}

/* Knappen trykkes litt inn mens man holder den, så trykket merkes med en gang. */
.knapp:active {
	transform: scale(0.97);
	transition-duration: 0.05s;
}

.knapp--aksent:active {
	box-shadow: var(--glod-aksent);
}

.knapp--mork:active {
	box-shadow: var(--glod-mork);
}

@media (prefers-reduced-motion: reduce) {
	.knapp:hover,
	.knapp:active {
		transform: none;
	}
}

.knapp--omriss {
	border-color: var(--blekk);
	color: var(--blekk);
}

.knapp--omriss-lys {
	border-color: var(--hvit);
	color: var(--hvit);
}

/* ---------- Toppen ---------- */

.topp__indre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-block: 24px;
}

.topp__logo {
	display: block;
	line-height: 0;
	flex: none;
}

.topp__logo img {
	height: 58px;
	width: auto;
}

.topp__navn {
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}

.topp__meny {
	display: flex;
	align-items: center;
	gap: 28px;
}

.topp__meny ul {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight: 500;
}

.topp__meny ul a {
	text-decoration: none;
	padding-block: 10px;
}

/* Boligfelt i menyen: nedtrekk på PC */
.meny__felt {
	position: relative;
}

.meny__knapp {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.meny__knapp svg {
	transition: transform 0.2s;
}

.meny__felt--apen .meny__knapp svg {
	transform: rotate(180deg);
}

.topp__meny .meny__under {
	display: none;
	position: absolute;
	top: 100%;
	left: -16px;
	z-index: 20;
	min-width: 220px;
	flex-direction: column;
	gap: 0;
	padding: 8px;
	background: var(--hvit);
	border-radius: var(--r-mid);
	box-shadow: var(--skygge);
}

.topp__meny .meny__felt--apen .meny__under {
	display: flex;
}

.topp__meny .meny__under a {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
}

.topp__meny .meny__under a:hover,
.topp__meny .meny__under a[aria-current="page"] {
	background: var(--grunn);
}

.topp__meny .meny__under--felt li:last-child {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid var(--linje-lys);
}

.topp__menyknapp {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 999px;
	background: var(--hvit);
	color: var(--blekk);
	cursor: pointer;
}

.topp__menyikon--lukk {
	display: none;
}

@media (max-width: 900px) {
	.topp__indre {
		flex-wrap: wrap;
		padding-block: 16px;
	}

	.topp__logo img {
		height: 46px;
	}

	.topp__menyknapp {
		display: inline-flex;
	}

	.topp__meny {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		background: var(--hvit);
		border-radius: var(--r-mid);
		padding: 12px 16px 16px;
	}

	.topp__meny ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		font-size: 18px;
	}

	.topp__meny ul a {
		display: block;
		padding: 12px 4px;
		border-bottom: 1px solid var(--linje-lys);
	}

	.topp--apen .topp__meny {
		display: flex;
	}

	/* På mobil står feltene rett under «Boligfelt», uten nedtrekk. */
	.meny__knapp {
		width: 100%;
		padding: 12px 4px;
		border-bottom: 1px solid var(--linje-lys);
		pointer-events: none;
	}

	.meny__knapp svg {
		display: none;
	}

	.topp__meny .meny__under {
		display: flex;
		position: static;
		min-width: 0;
		padding: 0 0 0 16px;
		background: none;
		box-shadow: none;
		border-radius: 0;
		font-size: 17px;
	}

	.topp__meny .meny__under a {
		border-radius: 0;
		padding: 10px 4px;
	}

	.topp__meny .meny__under a:hover {
		background: none;
	}

	.topp__meny .meny__under--felt li:last-child {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.topp--apen .topp__menyikon--apne {
		display: none;
	}

	.topp--apen .topp__menyikon--lukk {
		display: inline;
	}
}

/* ---------- Hero på forsiden ---------- */

.hero {
	padding-top: 32px;
}

.hero__topp {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 64px;
	align-items: flex-end;
	justify-content: space-between;
}

.hero h1 {
	flex: 2 1 560px;
	max-width: 900px;
	font-size: clamp(40px, 5.6vw, 84px);
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.hero__ingress {
	flex: 1 1 300px;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-bottom: 10px;
}

.hero__ingress p {
	font-size: 18px;
	color: var(--tekst-2);
}

.hero__bilde {
	position: relative;
	margin-top: 40px;
}

.hero__bilde > img {
	width: 100%;
	height: clamp(320px, 46vw, 640px);
	object-fit: cover;
	border-radius: var(--r-stor);
	background: var(--linje-lys);
}

.hero__kort {
	position: absolute;
	right: 24px;
	bottom: 24px;
	max-width: 320px;
	background: var(--hvit);
	border-radius: var(--r-mid);
	padding: 20px 24px;
	box-shadow: var(--skygge);
}

.hero__kortstatus {
	font-size: 13px;
	font-weight: 500;
	color: var(--dempet);
}

.hero__kortnavn {
	font-size: 20px;
	font-weight: 600;
	margin-top: 4px;
}

.hero__korttekst {
	font-size: 15px;
	color: var(--tekst-2);
	margin-top: 6px;
	line-height: 1.45;
}

.hero__kort a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-size: 15px;
	font-weight: 600;
	padding-block: 6px;
}

.hero__bilde--uten .hero__kort {
	position: static;
	max-width: 420px;
	box-shadow: none;
}

@media (max-width: 600px) {
	.hero__kort {
		position: static;
		max-width: none;
		margin-top: 12px;
		box-shadow: none;
	}
}

/* ---------- Statusmerker ---------- */

.merke {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid transparent;
}

.merke--salg {
	background: var(--blekk);
	color: var(--hvit);
}

.merke--utvikling {
	background: var(--hvit);
	color: var(--blekk);
	border-color: var(--blekk);
}

.merke--siste {
	background: var(--aksent);
	color: var(--hvit);
}

.merke--solgt {
	background: var(--linje-lys);
	color: var(--tekst-2);
}

/* ---------- Feltkort ---------- */

.filter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	background: var(--hvit);
	padding: 6px;
	border-radius: 999px;
}

.filter__knapp {
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	min-height: 44px;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--blekk);
	cursor: pointer;
}

.filter__knapp[aria-pressed="true"] {
	background: var(--blekk);
	color: var(--hvit);
}

.feltgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 24px;
}

.feltkort[hidden] {
	display: none;
}

.feltkort__lenke {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--hvit);
	border-radius: var(--r-kort);
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow 0.2s, transform 0.2s;
}

.feltkort__lenke:hover {
	color: inherit;
}

@media (hover: hover) {
	.feltkort__lenke:hover {
		box-shadow: var(--skygge);
		transform: translateY(-2px);
	}
}

.feltkort__lenke:active {
	transform: scale(0.98);
	transition-duration: 0.05s;
}

.feltkort__bilde {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--striper);
}

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

.feltkort__bilde .merke {
	position: absolute;
	top: 16px;
	left: 16px;
}

.feltkort__tekst {
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
	padding: 24px;
}

.feltkort__navn {
	font-size: 26px;
	letter-spacing: -0.02em;
}

.feltkort__ingress {
	margin-top: -6px;
	color: var(--tekst-2);
	font-size: 16px;
	line-height: 1.5;
}

.feltkort__fakta {
	border-top: 1px solid var(--linje-lys);
	padding-top: 16px;
	font-size: 15px;
	font-weight: 600;
}

.feltkort__mer {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--grunn);
	padding: 14px 18px;
	border-radius: var(--r-liten);
	font-weight: 600;
	font-size: 15px;
}

.feltkort__lenke:hover .feltkort__mer {
	color: var(--aksent);
}

/* ---------- Beliggenhet og kart ---------- */

.beliggenhet {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: center;
	background: var(--hvit);
	border-radius: var(--r-stor);
	padding: clamp(20px, 4vw, 56px);
}

.beliggenhet__tekst {
	flex: 1 1 320px;
	max-width: 440px;
}

.beliggenhet h2 {
	font-size: clamp(28px, 3.2vw, 44px);
}

.kartliste {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.kartliste__punkt {
	position: relative;
	padding-left: 26px;
}

.kartliste__punkt::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 12px;
	height: 12px;
	border-radius: 999px;
	background: var(--blekk);
}

.kartliste__punkt--utvikling::before {
	background: var(--aksent);
}

.kartliste__punkt--siste::before,
.kartliste__punkt--solgt::before {
	background: #8A8D91;
}

.kartliste__punkt a {
	display: block;
	font-weight: 600;
	text-decoration: none;
}

.kartliste__punkt span {
	display: block;
	color: var(--tekst-2);
	font-size: 15px;
	margin-top: 2px;
}

.kart {
	position: relative;
	z-index: 0;
	min-height: 380px;
	border-radius: var(--r-mid);
	background: #ECEAE4;
	overflow: hidden;
}

.beliggenhet__kart {
	flex: 2 1 420px;
	min-height: 440px;
}

.kart--felt {
	margin-top: 16px;
	min-height: 320px;
}

.kartnal {
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	border: 3px solid var(--hvit);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	background: var(--blekk);
}

.kartnal--utvikling {
	background: var(--aksent);
}

.kartnal--siste,
.kartnal--solgt {
	background: #8A8D91;
}

.kart .leaflet-tooltip {
	font-family: var(--font);
	font-weight: 600;
	font-size: 14px;
	border-radius: 8px;
	padding: 4px 10px;
}

.kart .leaflet-control-attribution {
	font-size: 11px;
}

/* ---------- Om oss ---------- */

.om {
	display: flex;
	flex-wrap: wrap;
	gap: 48px 80px;
}

.om__sitat {
	margin: 0;
	flex: 3 1 520px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.om__sitat blockquote {
	margin: 0;
	font-size: clamp(28px, 3.3vw, 50px);
	line-height: 1.14;
	letter-spacing: -0.025em;
	font-weight: 500;
}

.om__sitat figcaption {
	display: flex;
	align-items: center;
	gap: 16px;
}

.om__sitat figcaption img {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	object-fit: cover;
	object-position: 50% 30%;
}

.om__sitat figcaption strong {
	display: block;
	font-size: 17px;
}

.om__sitat figcaption span {
	color: var(--dempet);
	font-size: 15px;
}

.om__punkter {
	flex: 2 1 320px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.om__punkter > div {
	border-top: 1px solid var(--linje);
	padding-top: 18px;
}

.om__punkter h3 {
	font-size: 18px;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.om__punkter p {
	margin-top: 6px;
	color: var(--tekst-2);
}

/* ---------- Historien om Romsåsen ---------- */

.historie__ingress {
	max-width: 46ch;
	color: var(--tekst-2);
	font-size: 18px;
}

.historie {
	display: grid;
	/* Alltid tre i bredden eller én under hverandre, så ingen havner alene på en ny rad. */
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 760px) {
	.historie {
		grid-template-columns: 1fr;
	}
}

.historie__bilde {
	aspect-ratio: 3 / 2;
	margin-bottom: 20px;
	border-radius: var(--r-kort);
	overflow: hidden;
	background: var(--striper);
}

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

.historie__steg h3 {
	margin-top: 8px;
	font-size: 22px;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

.historie__steg h3 + p {
	margin-top: 8px;
	color: var(--tekst-2);
}

.historie__slutt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--linje);
	font-size: 18px;
}

.historie__slutt a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}

/* ---------- Plassholder for portrett ---------- */

/* Vises til nytt portrett av Henning er valgt i Tilpass. */
.portrett-plass {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--striper);
	color: var(--tekst-2);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	letter-spacing: 0.01em;
}

.om__sitat figcaption .portrett-plass,
.interesse__henning .portrett-plass {
	width: 64px;
	height: 64px;
	flex: none;
	padding: 8px;
	border-radius: 999px;
}

/* Teksten under sitatet styler alle span, så plassholderen må ta tilbake sine egne verdier. */
.om__sitat figcaption .portrett-plass span {
	color: var(--tekst-2);
	font-size: 10px;
}

.henning__bilde .portrett-plass {
	position: absolute;
	inset: 0;
	font-size: 15px;
}

.henning__bilde .portrett-plass span {
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--hvit);
	color: var(--blekk);
}

/* ---------- Henning ---------- */

#kontakt {
	padding-bottom: var(--luft);
}

.henning :focus-visible {
	outline-color: var(--hvit);
}

.henning {
	display: flex;
	flex-wrap: wrap;
	background: var(--blekk);
	color: var(--hvit);
	border-radius: var(--r-stor);
	overflow: hidden;
}

.henning__bilde {
	position: relative;
	flex: 1 1 420px;
	min-height: 460px;
	background: #2A2C2F;
}

.henning__bilde img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

.henning__film {
	position: absolute;
	left: 20px;
	bottom: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 18px 8px 8px;
	border-radius: 999px;
	background: var(--hvit);
	color: var(--blekk);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(23, 25, 27, 0.18);
}

.henning__spill {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--blekk);
	color: var(--hvit);
}

.henning__tekst {
	flex: 1 1 420px;
	padding: clamp(28px, 4vw, 64px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 22px;
}

.henning h2 {
	font-size: clamp(28px, 3.2vw, 46px);
	margin: 0;
}

.henning__tekst > p:not(.etikett) {
	font-size: 18px;
	color: #C9CBCE;
}

.henning__tekst > .henning__epost {
	font-size: 16px;
	margin: 0;
}

.henning__epost a {
	color: var(--hvit);
}

@media (max-width: 600px) {
	.henning__bilde {
		min-height: 360px;
	}
}

/* ---------- Feltside ---------- */

.felthode {
	padding-top: 16px;
}

.smuler {
	font-size: 14px;
	color: var(--dempet);
	display: flex;
	gap: 8px;
}

.smuler a {
	color: var(--dempet);
}

.smuler [aria-current] {
	color: var(--blekk);
}

.felthode__topp {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px 64px;
	margin-top: 18px;
}

.felthode__topp > div {
	flex: 2 1 520px;
}

.felthode h1 {
	margin-top: 16px;
	font-size: clamp(48px, 7vw, 104px);
	line-height: 0.98;
	letter-spacing: -0.04em;
}

.felthode__ingress {
	flex: 1 1 320px;
	max-width: 440px;
	font-size: 19px;
	line-height: 1.5;
	color: var(--tekst-2);
	padding-bottom: 8px;
}

.felthode .feltgrid {
	margin-top: 48px;
}

.felthode__hopp {
	display: none;
	margin-top: 20px;
}

@media (max-width: 1000px) {
	.felthode__hopp {
		display: inline-flex;
	}
}

.felthode__bilde {
	margin-top: 36px;
}

.felthode__bilde img {
	width: 100%;
	height: clamp(300px, 48vw, 660px);
	object-fit: cover;
	border-radius: var(--r-stor);
	background: var(--linje-lys);
}

.fakta {
	margin: 24px 0 0;
	background: var(--hvit);
	border-radius: var(--r-mid);
	padding: 24px 28px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 20px 32px;
}

.fakta dt {
	font-size: 13px;
	color: var(--dempet);
}

.fakta dd {
	margin: 6px 0 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

/* «Dette står igjen» under faktastripen. Kortene hopper ned til mellomtittelen for hver boligtype. */
.igjen {
	margin-top: 40px;
}

.igjen h2 {
	margin-bottom: 14px;
}

.igjen__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 16px;
}

.igjen__kort {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	background: var(--hvit);
	border-radius: var(--r-mid);
	padding: 24px 28px;
	color: inherit;
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s;
}

a.igjen__kort:hover {
	color: inherit;
}

@media (hover: hover) {
	a.igjen__kort:hover {
		box-shadow: var(--skygge);
		transform: translateY(-2px);
	}
}

a.igjen__kort:active {
	transform: scale(0.98);
	transition-duration: 0.05s;
}

@media (prefers-reduced-motion: reduce) {
	.igjen__kort {
		transform: none !important;
	}
}

.igjen__navn {
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.igjen__tekst {
	color: var(--tekst-2);
}

.igjen__mer {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 10px;
	font-weight: 600;
	color: var(--aksent);
}

/* Bilder under hver boligtype i teksten ([gallery], se inc/boligfelt.php). */
.tekst .bildestripe {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 28px 0 40px;
}

.tekst .bildestripe img {
	border-radius: 0;
}

.tekst .media__bilde--plan {
	background: var(--hvit);
}

.tekst .media__bilde--plan img {
	object-fit: contain;
	padding: 8px;
}

@media (hover: hover) {
	.tekst .media__bilde--plan:hover img {
		transform: none;
	}
}

@media (max-width: 560px) {
	.tekst .bildestripe {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tekst .bildestripe > :first-child {
		grid-column: span 2;
	}
}

.feltkropp {
	display: flex;
	flex-wrap: wrap;
	gap: 48px 72px;
	align-items: flex-start;
	padding-top: 96px;
}

.feltkropp__hoved {
	flex: 999 1 560px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 72px;
}

.feltkropp--uten-skjema .feltkropp__hoved {
	max-width: 860px;
}

.blokk h2 {
	font-size: clamp(28px, 2.8vw, 38px);
	margin-bottom: 24px;
}

/* Tekst fra redigereren */

.tekst {
	max-width: 680px;
	font-size: 18px;
	line-height: 1.65;
	color: var(--tekst-2);
}

.tekst > * + * {
	margin-top: 1.1em;
}

.tekst h2 {
	color: var(--blekk);
	font-size: clamp(28px, 2.8vw, 38px);
	margin-top: 64px;
	margin-bottom: -4px;
}

.tekst h2:first-child {
	margin-top: 0;
}

.tekst h3 {
	color: var(--blekk);
	font-size: 22px;
	margin-top: 40px;
}

.tekst a {
	color: var(--blekk);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.tekst ul,
.tekst ol {
	padding-left: 1.2em;
}

.tekst blockquote,
.tekst .wp-block-quote {
	margin: 40px 0;
	padding: 0;
	border: 0;
	color: var(--blekk);
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.25;
	letter-spacing: -0.02em;
	font-weight: 500;
}

.tekst blockquote p::before {
	content: "«";
}

.tekst blockquote p::after {
	content: "»";
}

.tekst figure {
	margin: 40px 0;
}

.tekst img {
	border-radius: var(--r-mid);
}

.tekst figcaption {
	font-size: 14px;
	color: var(--dempet);
	margin-top: 10px;
}

.tekst .wp-block-embed iframe {
	width: 100%;
	border-radius: var(--r-mid);
}

/* Bilder og film */

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

.media > :first-child {
	grid-column: span 2;
}

.media__bilde {
	position: relative;
	display: block;
	border-radius: var(--r-mid);
	overflow: hidden;
	background: var(--linje-lys);
	aspect-ratio: 3 / 2;
}

.media > .media__bilde:first-child {
	aspect-ratio: 16 / 9;
}

.media__bilde img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

@media (hover: hover) {
	.media__bilde:hover img {
		transform: scale(1.03);
	}
}

.media__bildetekst {
	position: absolute;
	left: 12px;
	bottom: 12px;
	right: 12px;
	font-size: 14px;
	color: var(--hvit);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.media__film {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 22px;
	border: 0;
	border-radius: var(--r-mid);
	background: var(--blekk);
	color: var(--hvit);
	font: inherit;
	text-align: left;
	cursor: pointer;
	overflow: hidden;
}

.media__film--bilde {
	background-size: cover;
	background-position: center;
}

.media__film--bilde::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(23, 25, 27, 0.15) 0%, rgba(23, 25, 27, 0.75) 100%);
}

.media__film > span {
	position: relative;
}

.media__film:hover .media__spill {
	background: var(--aksent);
	color: var(--hvit);
}

.media__spill {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--hvit);
	color: var(--blekk);
	transition: background-color 0.15s, color 0.15s;
}

.media__filmtekst {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

.media__type {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: #C9CBCE;
	margin-bottom: 4px;
}

.media__film iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 560px) {
	.media {
		grid-template-columns: 1fr;
	}

	.media > :first-child {
		grid-column: auto;
	}
}

/* Bildevisning i stort format */

/* Visningen fyller skjermen. Den mørke bakgrunnen ligger på visningen selv, så den kan tones ut når man
   drar bildet ned for å lukke (--dekk settes av main.js). Fingeren styrer alt, nettleseren ruller ikke. */
.visning {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgb(15 16 17 / calc(0.92 * var(--dekk, 1)));
	overflow: hidden;
	touch-action: none;
}

.visning::backdrop {
	background: transparent;
}

/* Tre bilder side om side: forrige, gjeldende og neste. Sporet flyttes når man sveiper. */
.visning__spor {
	position: absolute;
	inset: 0;
}

.visning__bilde {
	position: absolute;
	inset: 0;
	max-width: min(1400px, 100%);
	max-height: 86vh;
	margin: auto;
	border-radius: 12px;
	user-select: none;
	-webkit-user-select: none;
}

.visning__bilde:first-child {
	left: calc(-100% - 24px);
	right: calc(100% + 24px);
}

.visning__bilde:last-child {
	left: calc(100% + 24px);
	right: calc(-100% - 24px);
}

.visning__bilde:not([src]) {
	display: none;
}

.visning__knapp {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 999px;
	background: var(--hvit);
	color: var(--blekk);
	font: inherit;
	font-size: 22px;
	cursor: pointer;
}

.visning__knapp[hidden] {
	display: none;
}

.visning__lukk {
	top: 16px;
	right: 16px;
}

.visning__forrige {
	left: 16px;
	top: calc(50% - 26px);
}

.visning__neste {
	right: 16px;
	top: calc(50% - 26px);
}

/* På berøringsskjerm sveiper man mellom bildene, og pilene ville dekket kantene av bildet. */
@media (hover: none) and (pointer: coarse) {
	.visning__forrige,
	.visning__neste {
		display: none;
	}
}

/* Fremdrift */

.tidslinje {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tidslinje__steg {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0 0 28px 36px;
}

.tidslinje__steg::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 999px;
	background: var(--grunn);
	border: 2px solid #8A8D91;
}

.tidslinje__steg::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 26px;
	bottom: 2px;
	width: 2px;
	background: var(--linje);
}

.tidslinje__steg:last-child::after {
	display: none;
}

.tidslinje__steg--ferdig::before {
	background: var(--blekk);
	border-color: var(--blekk);
}

.tidslinje__steg--pagar::before {
	background: var(--aksent);
	border-color: var(--aksent);
	box-shadow: 0 0 0 5px rgba(179, 49, 42, 0.18);
}

.tidslinje__etikett {
	font-size: 13px;
	font-weight: 600;
	color: var(--dempet);
}

.tidslinje__steg--pagar .tidslinje__etikett {
	color: var(--aksent);
}

.tidslinje__tittel {
	font-size: 19px;
	font-weight: 600;
	margin-top: 2px;
}

.tidslinje__tekst {
	font-size: 16px;
	color: var(--tekst-2);
	margin-top: 4px;
}

/* FINN: tekst i annonsekortene */

.finn__adresse {
	font-size: 13px;
	color: var(--dempet);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.finn__tittel {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}

.finn__meta {
	font-size: 15px;
	color: var(--tekst-2);
}

.finn__pris {
	font-size: 20px;
	font-weight: 700;
	padding-top: 4px;
}

.finn__se {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--aksent);
}

.finn__tom {
	color: var(--tekst-2);
	margin-bottom: 20px;
}

/* ---------- FINN-raden (forsiden og feltsiden) ---------- */

/* Raden går ut til kanten av skjermen, så neste kort titter frem og viser at man kan sveipe. */
.finnrad {
	list-style: none;
	margin: 0 calc(-1 * var(--kant));
	padding: 4px var(--kant) 20px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * 20px) / 3.4);
	gap: 20px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--kant);
	scrollbar-width: none;
}

.finnrad::-webkit-scrollbar {
	display: none;
}

.finnrad:focus-visible {
	outline-offset: -3px;
}

.finnrad > li {
	scroll-snap-align: start;
	display: flex;
}

.finnrad__kort {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--hvit);
	border-radius: var(--r-kort);
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow 0.2s, transform 0.2s;
}

.finnrad__kort:hover {
	color: inherit;
}

@media (hover: hover) {
	.finnrad__kort:hover {
		box-shadow: var(--skygge);
		transform: translateY(-2px);
	}
}

.finnrad__kort:active {
	transform: scale(0.98);
	transition-duration: 0.05s;
}

@media (prefers-reduced-motion: reduce) {
	.feltkort__lenke,
	.finnrad__kort {
		transform: none !important;
	}
}

.finnrad__bilde {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--striper);
}

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

.finnrad__felt {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--hvit);
	color: var(--blekk);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}

.finnrad__tekst {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	padding: 20px 22px 22px;
}

.finnrad__tekst .finn__se {
	margin-top: auto;
	padding-top: 10px;
}

.finnrad__piler {
	display: flex;
	gap: 10px;
}

.finnrad__piler[hidden] {
	display: none;
}

.finnrad__pil {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1.5px solid var(--blekk);
	border-radius: 999px;
	background: transparent;
	color: var(--blekk);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, opacity 0.15s;
}

.finnrad__pil:hover {
	background: var(--blekk);
	color: var(--hvit);
}

.finnrad__pil:disabled {
	opacity: 0.3;
	cursor: default;
	background: transparent;
	color: var(--blekk);
}

.finnrad__alle {
	margin-top: 8px;
}

/* På feltsiden står raden i tekstkolonnen og går ikke ut til kanten på PC. */
.finnrad__hode {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.finnrad__hode h2 {
	margin: 0;
}

.finnrad--felt {
	margin: 0 0 8px;
	padding: 4px 0 20px;
	scroll-padding-inline: 0;
	grid-auto-columns: calc((100% - 20px) / 2.2);
}

@media (max-width: 1000px) {
	.finnrad {
		grid-auto-columns: calc((100% - 20px) / 2.3);
	}
}

/* På mobil sveiper man. Pilene trengs ikke. */
@media (max-width: 760px) {
	.finnrad {
		grid-auto-columns: 80%;
		gap: 14px;
	}

	.finnrad--felt {
		margin-inline: calc(-1 * var(--kant));
		padding-inline: var(--kant);
		scroll-padding-inline: var(--kant);
	}

	.finnrad__piler {
		display: none !important;
	}
}

/* ---------- Siden /finn-no/ ---------- */

.finnside__gruppe {
	margin-top: 48px;
}

.finnside__hode {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.finnside__hode h2 {
	margin: 0;
}

.finnside__hode a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	white-space: nowrap;
}

.finngrid {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.finngrid > li {
	display: flex;
}

/* Beliggenhet på feltsiden */

.naerhet {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 12px;
}

.naerhet li {
	background: var(--hvit);
	border-radius: var(--r-liten);
	padding: 16px 18px;
	font-size: 16px;
}

/* Interesseskjema */

.interesse {
	position: sticky;
	top: 24px;
	flex: 1 1 340px;
	max-width: 440px;
	background: var(--hvit);
	border-radius: var(--r-kort);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

@media (max-width: 1000px) {
	.interesse {
		position: static;
		max-width: none;
	}
}

.interesse__henning {
	display: flex;
	align-items: center;
	gap: 14px;
}

.interesse__henning img {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	object-fit: cover;
	object-position: 50% 30%;
	flex: none;
}

.interesse__henning strong {
	display: block;
	font-size: 18px;
}

.interesse__henning a {
	display: block;
	color: var(--tekst-2);
	font-size: 15px;
	overflow-wrap: anywhere;
}

.interesse h2 {
	font-size: 24px;
	letter-spacing: -0.02em;
}

.interesse__ingress {
	margin-top: -10px;
	font-size: 15px;
	color: var(--tekst-2);
}

.interesse__skjema {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.interesse__skjema label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
}

.interesse__skjema input[type="text"],
.interesse__skjema input[type="tel"],
.interesse__skjema input[type="email"] {
	font: inherit;
	font-size: 16px;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid #C9C6BE;
	border-radius: 12px;
	background: var(--hvit);
	color: var(--blekk);
}

.interesse__skjema input:focus-visible {
	border-color: var(--blekk);
}

.interesse__skjema .interesse__samtykke {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--tekst-2);
}

.interesse__samtykke input {
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	flex: none;
	accent-color: var(--aksent);
}

.interesse__samtykke a {
	color: var(--blekk);
}

.interesse__hint {
	margin: -4px 0 0;
	font-size: 14px;
	color: var(--dempet);
}

.interesse__skjema .knapp {
	margin-top: 4px;
}

.interesse__skjema .knapp:disabled {
	opacity: 0.75;
	cursor: progress;
	transform: none;
}

/* Får fokus fra skriptet så skjermlesere leser den. Ingen ring, den er ikke noe å trykke på. */
.interesse__melding:focus {
	outline: none;
}

.interesse__melding {
	padding: 14px 16px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 500;
}

.interesse__melding--ok {
	background: #E7F0EA;
	color: #1D4A2C;
}

.interesse__melding--feil {
	background: #FBE9E7;
	color: #7A1E18;
}

.felle {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Andre felt */

.andre {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 20px;
}

.andre a {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--hvit);
	border-radius: var(--r-mid);
	padding: 14px;
	text-decoration: none;
}

.andre img {
	width: 120px;
	height: 90px;
	border-radius: 12px;
	object-fit: cover;
	flex: none;
}

.andre__status {
	display: block;
	font-size: 13px;
	color: var(--dempet);
}

.andre__navn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 20px;
	font-weight: 600;
}

/* Vanlige sider */

.side {
	padding-top: 48px;
	padding-bottom: var(--luft);
}

.side h1 {
	font-size: clamp(36px, 5vw, 64px);
	margin-bottom: 32px;
	max-width: 900px;
}

.side--404 .knapperad {
	margin-top: 28px;
}

.side--404 p {
	font-size: 18px;
	color: var(--tekst-2);
}

/* ---------- Casefilm (siden Naboen skal trives) ---------- */

/*
 * Mobil først. Uten skript og med redusert bevegelse står scenene under hverandre i sluttilstanden.
 * Med skript ligger de i samme rute og spilles av med assets/js/casefilm.js.
 * Fargene i SVG-ene settes med klassene cf-*, så de følger variablene.
 */

.casefilm-ramme {
	padding-top: 48px;
}

.casefilm {
	--cf-vei: #B9B5AB;
	display: flex;
	flex-direction: column;
	gap: 72px;
}

.casefilm__scene {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

.casefilm__tekst {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.casefilm__tittel {
	font-size: clamp(30px, 8.2vw, 64px);
	line-height: 1.04;
	letter-spacing: -0.035em;
}

.casefilm__tittel--stor {
	font-size: clamp(30px, 8.2vw, 104px);
}

.casefilm .maske {
	display: block;
	overflow: hidden;
	padding-bottom: 0.08em;
}

.casefilm .maske > span {
	display: block;
}

/* SVG */

.casefilm svg {
	display: block;
	width: 100%;
	height: auto;
}

.casefilm__plan {
	max-width: 520px;
}

.casefilm .merke {
	font-family: var(--font);
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.casefilm__plan .merke {
	font-size: 32px;
}

.casefilm__plan .merke--liten {
	font-size: 26px;
}

.cf-hvit {
	fill: var(--hvit);
}

.cf-blekk {
	fill: var(--blekk);
}

.cf-dempet {
	fill: var(--dempet);
}

.cf-aksent {
	fill: var(--aksent);
}

.cf-hus {
	fill: var(--blekk);
}

.cf-hus rect {
	transform-box: fill-box;
	transform-origin: center;
}

.cf-koter {
	fill: none;
	stroke: var(--linje);
	stroke-width: 2.5;
}

.cf-vei {
	fill: none;
	stroke: var(--cf-vei);
	stroke-width: 16;
	stroke-linecap: round;
}

.cf-tomter {
	fill: none;
	stroke: var(--blekk);
	stroke-width: 2;
}

/* Scene 2: Østre Rom */
.casefilm__bilde {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-stor);
	overflow: hidden;
	background: var(--striper);
}

.casefilm__bilde img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 38%;
}

.casefilm__kort {
	position: relative;
	margin: -56px 12px 0;
	padding: 20px 22px;
	background: var(--hvit);
	border-radius: var(--r-kort);
	box-shadow: 0 10px 30px rgba(23, 25, 27, 0.16);
}

.casefilm__smaa {
	margin-bottom: 6px;
	font-size: 14px;
	color: var(--dempet);
}

.casefilm__kort h3 {
	margin-bottom: 8px;
	font-size: 22px;
	letter-spacing: -0.02em;
}

.casefilm__kort p:last-child {
	color: var(--tekst-2);
	line-height: 1.45;
}

/* Scene 3: sitatet, samme stil som på forsiden */
.casefilm__sitat {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.casefilm__sitat blockquote {
	margin: 0;
	font-size: clamp(34px, 7.4vw, 80px);
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -0.025em;
}

.casefilm__ord {
	display: inline-block;
}

.casefilm__sitat figcaption {
	display: flex;
	align-items: center;
	gap: 16px;
}

.casefilm__sitat figcaption img,
.casefilm__sitat figcaption .portrett-plass {
	width: 64px;
	height: 64px;
	flex: none;
	border-radius: 999px;
	object-fit: cover;
	object-position: 50% 30%;
}

.casefilm__sitat figcaption .portrett-plass {
	padding: 8px;
}

.casefilm__sitat figcaption strong {
	display: block;
	font-size: 17px;
}

.casefilm__sitat figcaption > span {
	color: var(--dempet);
	font-size: 15px;
}

/* Scene 4 */
.casefilm__adresse {
	font-size: 20px;
	font-weight: 600;
}

.casefilm__strek {
	height: 4px;
	background: var(--aksent);
	transform-origin: left;
}

@media (min-width: 900px) {
	.casefilm-ramme {
		padding-top: 64px;
	}

	.casefilm {
		gap: 120px;
	}

	.casefilm__tekst {
		gap: 18px;
	}

	.casefilm__scene--plan {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
		align-items: center;
		align-content: center;
		gap: 64px;
	}

	.casefilm__scene--plan .casefilm__tittel {
		font-size: clamp(40px, 4.6vw, 64px);
	}

	.casefilm__plan {
		max-width: none;
	}

	.casefilm__scene--rom .casefilm__tittel {
		font-size: clamp(36px, 3.9vw, 56px);
	}

	.casefilm .merke {
		font-size: 26px;
	}

	.casefilm__plan .merke {
		font-size: 24px;
	}

	.casefilm__plan .merke--liten {
		font-size: 22px;
	}

	.casefilm__scene--rom {
		position: relative;
	}

	.casefilm__bilde {
		aspect-ratio: 16 / 7;
	}

	.casefilm__kort {
		position: absolute;
		right: 48px;
		bottom: 40px;
		width: min(440px, 40%);
		margin: 0;
		padding: 28px 32px;
	}

	.casefilm__kort h3 {
		font-size: 28px;
	}

	.casefilm__sitat {
		gap: 40px;
	}

	.casefilm__sitat figcaption {
		gap: 24px;
	}

	.casefilm__sitat figcaption img,
	.casefilm__sitat figcaption .portrett-plass {
		width: 96px;
		height: 96px;
	}

	.casefilm__sitat figcaption strong {
		font-size: 24px;
	}

	.casefilm__sitat figcaption > span {
		font-size: 20px;
	}

	.casefilm__adresse {
		font-size: 24px;
	}
}

/* Avspilling: scenene ligger oppå hverandre. Ruten blir like høy som den høyeste scenen. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.casefilm {
		display: grid;
		gap: 0;
	}

	.casefilm__scene {
		grid-area: 1 / 1;
		justify-content: center;
		opacity: 0;
	}

	.casefilm__scene--rom {
		justify-content: flex-start;
	}

	.casefilm__strek {
		transform: scaleX(0);
	}
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-width: 900px) {
	.casefilm {
		aspect-ratio: 16 / 9;
	}

	.casefilm__scene--rom .casefilm__bilde {
		flex: 1;
		min-height: 320px;
		aspect-ratio: auto;
	}
}

/* ---------- Avisartikler nederst på feltsiden ---------- */

.tekst .avisliste {
	list-style: none;
	padding: 0;
	margin: 28px 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: 20px;
}

.avisliste a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: inherit;
	text-decoration: none;
}

.avisliste img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: top;
	border-radius: var(--r-liten);
	border: 1px solid var(--linje);
	margin-bottom: 8px;
	transition: transform 0.2s ease;
}

.avisliste__kilde {
	font-size: 0.875rem;
	color: var(--dempet);
}

.avisliste__tittel {
	font-weight: 600;
}

/* PDF av avissiden under kortet, når kortet lenker til saken på nett */
.avisliste a.avisliste__pdf {
	display: inline-block;
	margin-top: 6px;
	font-size: 0.875rem;
	color: var(--dempet);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (hover: hover) {
	.avisliste a:hover img {
		transform: scale(1.02);
	}

	.avisliste a:hover .avisliste__tittel {
		text-decoration: underline;
	}
}

@media (prefers-reduced-motion: reduce) {
	.avisliste img {
		transition: none;
	}
}

/* ---------- Henning og Bente (siden Filosofien vår) ---------- */

.oss {
	display: flex;
	flex-wrap: wrap;
	background: var(--hvit);
	border-radius: var(--r-stor);
	overflow: hidden;
}

.oss__bilde {
	flex: 1 1 420px;
	aspect-ratio: 3 / 2;
	background: var(--striper);
}

.oss__bilde img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

.oss__tekst {
	flex: 1 1 360px;
	padding: clamp(28px, 4vw, 64px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}

.oss__tekst p:not(.etikett) {
	color: var(--tekst-2);
	max-width: 46ch;
}

/* ---------- Bunnen ---------- */

.bunn {
	border-top: 1px solid var(--linje);
}

.bunn__indre {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	padding-block: 36px 48px;
	font-size: 15px;
	color: var(--tekst-2);
}

.bunn__firma strong {
	color: var(--blekk);
}

.bunn__orgnr {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	color: var(--dempet);
}

.bunn__lenker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bunn__lenker a {
	display: inline-block;
	padding-block: 6px;
}