/* =========================================================================
   FLYTTSTÄDARNA I HANINGE — Designsystem
   Midnattsblå + champagneguld. Urklippta bildlager, parallax, mjuka masker.
   All rörelse respekterar prefers-reduced-motion längst ned i filen.
   ========================================================================= */

:root {
	/* --- Färg --- */
	--fs-midnatt: #06131C;
	--fs-djuphav: #0B2333;
	--fs-petrol: #14384B;
	--fs-petrol-ljus: #1D4E68;
	--fs-champagne: #C9A961;
	--fs-champagne-ljus: #E4CE96;
	--fs-champagne-mork: #A2833F;
	--fs-parlvit: #F6F2E9;
	--fs-parlvit-varm: #FBF8F2;
	--fs-dimma: #93A9B8;
	--fs-linje: rgba(6, 19, 28, .10);
	--fs-linje-ljus: rgba(246, 242, 233, .14);

	/* --- Rörelsetiming ---
	   Riktig rörelse accelererar inte linjärt. Kurvorna nedan härmar
	   fysiska förlopp: expo för "släppt objekt", spring för studs. */
	--ease-expo: cubic-bezier(.16, 1, .3, 1);
	--ease-quint: cubic-bezier(.22, 1, .36, 1);
	--ease-kvart: cubic-bezier(.76, 0, .24, 1);
	--ease-spring: cubic-bezier(.34, 1.4, .5, 1);
	--ease-mjuk: cubic-bezier(.4, 0, .2, 1);

	--dur-snabb: .28s;
	--dur-med: .55s;
	--dur-lang: .9s;
	--dur-filmisk: 1.4s;

	/* --- Form --- */
	--radie: 18px;
	--radie-liten: 10px;
	--radie-rund: 999px;
	--kant: 1px solid var(--fs-linje);

	/* --- Skugga --- */
	--skugga-mjuk: 0 1px 2px rgba(6, 19, 28, .06), 0 8px 24px -8px rgba(6, 19, 28, .14);
	--skugga-lyft: 0 2px 4px rgba(6, 19, 28, .08), 0 24px 48px -16px rgba(6, 19, 28, .28);
	--skugga-svav: 0 4px 8px rgba(6, 19, 28, .10), 0 48px 88px -24px rgba(6, 19, 28, .42);
	--skugga-guld: 0 8px 30px -8px rgba(201, 169, 97, .55);

	/* Skrivs av motion.js — 0 → 1 under sidans scroll */
	--scroll: 0;
}

/* =========================================================================
   1. Bas
   ========================================================================= */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }

::selection { background: var(--fs-champagne); color: var(--fs-midnatt); }

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--fs-champagne);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Mörka sektioner ärver ljus text automatiskt */
.fs-mork {
	background: var(--fs-midnatt);
	color: var(--fs-parlvit);
	--fs-linje: var(--fs-linje-ljus);
}
.fs-mork :is(h1, h2, h3, h4) { color: var(--fs-parlvit); }
.fs-mork p, .fs-mork li { color: rgba(246, 242, 233, .78); }

/* =========================================================================
   2. Typografi
   ========================================================================= */

.fs-ogonbryn {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fs-champagne-mork);
}
.fs-mork .fs-ogonbryn { color: var(--fs-champagne); }
.fs-ogonbryn::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: .7;
}

.fs-display {
	font-family: Platypi, Georgia, serif;
	font-size: clamp(2.375rem, 4.4vw, 4rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.03em;
	text-wrap: balance;
}

.fs-ingress {
	font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
	line-height: 1.65;
	max-width: 58ch;
	color: rgba(6, 19, 28, .72);
	text-wrap: pretty;
}
.fs-mork .fs-ingress { color: rgba(246, 242, 233, .76); }

/* Guldfärgat nyckelord i rubriker */
.fs-guld {
	background: linear-gradient(100deg, var(--fs-champagne) 0%, var(--fs-champagne-ljus) 42%, var(--fs-champagne) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-style: italic;
}

/* =========================================================================
   3. Knappar
   ========================================================================= */

.fs-knapp {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: 1.05rem 2.1rem;
	border: 0;
	border-radius: var(--radie-rund);
	font: 700 .9375rem/1 Manrope, sans-serif;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--dur-snabb) var(--ease-spring),
	            box-shadow var(--dur-med) var(--ease-expo);
}

.fs-knapp--primar {
	background: linear-gradient(135deg, var(--fs-champagne-ljus), var(--fs-champagne) 55%, var(--fs-champagne-mork));
	color: var(--fs-midnatt);
	box-shadow: var(--skugga-guld);
}

/* Ljusstråket som sveper över knappen vid hover */
.fs-knapp--primar::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 -60%;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: skewX(-18deg);
	transition: left var(--dur-lang) var(--ease-expo);
	z-index: -1;
}
.fs-knapp--primar:hover::after { left: 115%; }

.fs-knapp--spok {
	background: transparent;
	color: currentColor;
	box-shadow: inset 0 0 0 1px currentColor;
}
.fs-knapp--spok:hover { background: rgba(201, 169, 97, .12); }

.fs-knapp:hover { transform: translateY(-2px); }
.fs-knapp:active { transform: translateY(0) scale(.985); transition-duration: .08s; }

/* Telefonknapp med pulserande ring — drar blicken utan att skrika */
.fs-knapp--ring { position: relative; }
.fs-knapp--ring::before {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: inherit;
	border: 1px solid var(--fs-champagne);
	opacity: 0;
	animation: fs-puls 3.2s var(--ease-expo) infinite;
}
@keyframes fs-puls {
	0%   { transform: scale(.98); opacity: .8; }
	70%  { transform: scale(1.10); opacity: 0; }
	100% { transform: scale(1.10); opacity: 0; }
}

/* =========================================================================
   4. Sidhuvud — glasigt, krymper vid scroll
   ========================================================================= */

.fs-header {
	position: sticky;
	top: 0;
	z-index: 90;
	transition: background var(--dur-med) var(--ease-mjuk),
	            box-shadow var(--dur-med) var(--ease-mjuk),
	            backdrop-filter var(--dur-med) var(--ease-mjuk);
}
.fs-header__topp {
	display: flex;
	justify-content: center;
	gap: 2rem;
	padding: .55rem 1rem;
	background: var(--fs-djuphav);
	color: rgba(246, 242, 233, .82);
	font-size: .8125rem;
	letter-spacing: .01em;
}
.fs-header__topp a { color: inherit; text-decoration: none; }
.fs-header__topp a:hover { color: var(--fs-champagne-ljus); }

.fs-header__rad {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	max-width: 1240px;
	margin-inline: auto;
	padding: 1.15rem clamp(1.25rem, 5vw, 3rem);
	transition: padding var(--dur-med) var(--ease-expo);
}
.fs-header.ar-fast .fs-header__rad { padding-block: .7rem; }
.fs-header.ar-fast {
	background: rgba(6, 19, 28, .82);
	backdrop-filter: blur(18px) saturate(1.4);
	box-shadow: 0 1px 0 var(--fs-linje-ljus), 0 18px 40px -24px rgba(0, 0, 0, .8);
}

.fs-nav { display: flex; align-items: center; gap: .3rem; }
.fs-nav a {
	position: relative;
	padding: .6rem .9rem;
	font-size: .9375rem;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	border-radius: var(--radie-liten);
	transition: color var(--dur-snabb) var(--ease-mjuk);
}
/* Understrykning som växer ut från mitten */
.fs-nav a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: .35rem;
	width: 0;
	height: 1.5px;
	background: var(--fs-champagne);
	transform: translateX(-50%);
	transition: width var(--dur-med) var(--ease-expo);
}
.fs-nav a:hover::after,
.fs-nav a[aria-current="page"]::after { width: calc(100% - 1.8rem); }

/* --- Megameny --- */
.fs-mega { position: relative; }
.fs-mega__panel {
	position: absolute;
	top: calc(100% + .75rem);
	left: 50%;
	width: min(880px, 92vw);
	padding: 2rem;
	background: var(--fs-parlvit-varm);
	color: var(--fs-midnatt);
	border-radius: var(--radie);
	box-shadow: var(--skugga-svav);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -10px) scale(.985);
	transition: opacity var(--dur-med) var(--ease-expo),
	            transform var(--dur-med) var(--ease-expo),
	            visibility 0s linear var(--dur-med);
}
.fs-mega:hover .fs-mega__panel,
.fs-mega:focus-within .fs-mega__panel {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0) scale(1);
	transition-delay: 0s;
}
.fs-mega__rubrik {
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fs-champagne-mork);
	margin-bottom: .85rem;
}
.fs-mega__lank {
	display: block;
	padding: .5rem .65rem;
	margin-inline: -.65rem;
	border-radius: var(--radie-liten);
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--fs-midnatt);
	transition: background var(--dur-snabb) var(--ease-mjuk),
	            transform var(--dur-snabb) var(--ease-expo);
}
.fs-mega__lank:hover { background: rgba(201, 169, 97, .14); transform: translateX(4px); }
.fs-mega__lank span { display: block; font-size: .8125rem; font-weight: 400; color: rgba(6, 19, 28, .55); }

/* --- Logotyp --- */
.fs-logga { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; }
/* Märket är redan en inramad form. Att lägga det i ytterligare en ruta
   blir en ram runt en ram — märket får stå fritt i stället. */
.fs-logga__markning {
	display: grid;
	place-items: center;
	color: var(--fs-parlvit);
	transition: transform var(--dur-med) var(--ease-spring);
}
.fs-footer .fs-logga__markning { color: var(--fs-parlvit); }
.fs-logga:hover .fs-logga__markning { transform: scale(1.06); }
.fs-logga__text { display: grid; line-height: 1.05; }
.fs-logga__text strong {
	font-family: Platypi, Georgia, serif;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -.02em;
}
.fs-logga__text em {
	font-style: normal;
	font-size: .6875rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .62;
}

/* --- Handlingar i sidhuvudet --- */
.fs-header__handling { display: flex; align-items: center; gap: 1rem; }
.fs-header__tel {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .9375rem;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}
.fs-header__tel:hover { color: var(--fs-champagne-ljus); }

/* --- Mobilmeny --- */
.fs-meny-knapp {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px; height: 44px;
	padding: 0 10px;
	background: transparent;
	border: 1px solid var(--fs-linje-ljus);
	border-radius: 11px;
	cursor: pointer;
}
.fs-meny-knapp span {
	display: block;
	height: 1.5px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--dur-med) var(--ease-expo), opacity var(--dur-snabb) var(--ease-mjuk);
}
.fs-meny-knapp[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.fs-meny-knapp[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.fs-meny-knapp[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Ligger dold som utgångsläge — annars vinner display:grid över [hidden]
   och menyn ligger utfälld på desktop. */
.fs-mobilmeny { display: none; }
@media (max-width: 1080px) {
	.fs-mobilmeny:not([hidden]) { display: grid; }
}
.fs-mobilmeny {
	padding: .5rem clamp(1.25rem, 5vw, 3rem) 1.5rem;
	background: rgba(6,19,28,.97);
	backdrop-filter: blur(16px);
	border-top: 1px solid var(--fs-linje-ljus);
}
.fs-mobilmeny a {
	padding: .85rem 0;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--fs-parlvit);
	text-decoration: none;
	border-bottom: 1px solid var(--fs-linje-ljus);
}
.fs-mobilmeny a:last-child { border-bottom: 0; }

@media (max-width: 1080px) {
	.fs-doljs-mobil { display: none !important; }
	.fs-meny-knapp { display: flex; }
}

/* --- Sidfotens detaljer --- */
.fs-footer__inre { max-width: 1240px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
.fs-footer__cta { margin-top: -3.5rem; }
.fs-footer__ctarubrik {
	font-family: Platypi, Georgia, serif;
	font-size: clamp(1.75rem, 3.6vw, 2.75rem);
	line-height: 1.08;
	letter-spacing: -.025em;
	margin: .6rem 0 1rem;
	max-width: 20ch;
	color: var(--fs-parlvit);
}
.fs-footer__ctaknappar { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.75rem; }
.fs-footer__brod { font-size: .9375rem; margin: 1.1rem 0; max-width: 34ch; }
.fs-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; font-size: .9375rem; }
.fs-footer__botten {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.5rem 2.5rem;
	border-top: 1px solid var(--fs-linje-ljus);
	font-size: .8125rem;
	opacity: .7;
}

/* =========================================================================
   5. Hero med urklippta lager (förgrund / mellanplan / bakgrund)
   ========================================================================= */

.fs-hero {
	position: relative;
	min-height: min(100svh, 900px);
	display: grid;
	align-items: center;
	overflow: clip;
	background: var(--fs-midnatt);
	color: var(--fs-parlvit);
	isolation: isolate;
}

.fs-lager {
	position: absolute;
	inset: 0;
	pointer-events: none;
	will-change: transform;
}
.fs-lager img, .fs-lager picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Djupled: bakgrunden rör sig minst, förgrunden mest.
   data-djup läses av motion.js; värdena här är fallback/skala. */
.fs-lager--bak    { z-index: 1; filter: saturate(.85) brightness(.62) blur(1.5px); transform: scale(1.14); }
.fs-lager--mellan { z-index: 2; filter: saturate(.95) brightness(.85); transform: scale(1.06); }
/* Förgrunden får bara ta högerkanten. Fyller den hela ytan blir motivet
   jättelikt och äter upp rubriken. */
.fs-lager--fram {
	z-index: 4;
	left: auto;
	right: clamp(0px, 2vw, 40px);
	width: min(44%, 560px);
}
.fs-lager--fram img { object-fit: contain; object-position: bottom right; }

/* Ljusdis mellan lagren — den skapar upplevd luft, och samtidigt den
   kontrast som gör rubriken läsbar oavsett vad som ligger bakom. */
.fs-lager--dis {
	z-index: 3;
	background:
		radial-gradient(120% 70% at 78% 78%, rgba(201, 169, 97, .20), transparent 60%),
		linear-gradient(96deg, rgba(6, 19, 28, .94) 0%, rgba(6, 19, 28, .82) 30%, rgba(6, 19, 28, .42) 55%, rgba(6, 19, 28, .12) 75%),
		linear-gradient(180deg, rgba(6, 19, 28, .35) 0%, rgba(6, 19, 28, .30) 55%, var(--fs-midnatt) 100%);
}

/* Långsam filmisk inzoomning som aldrig riktigt tar slut */
.fs-ken-burns {
	animation: fs-ken 26s var(--ease-mjuk) infinite alternate;
}
@keyframes fs-ken {
	from { transform: scale(1.06) translate3d(0, 0, 0); }
	to   { transform: scale(1.16) translate3d(-1.6%, -1.2%, 0); }
}

.fs-hero__innehall {
	position: relative;
	z-index: 5;
	max-width: 1240px;
	margin-inline: auto;
	width: 100%;
	padding: clamp(4rem, 9vh, 6.5rem) clamp(1.25rem, 5vw, 3rem) clamp(3.5rem, 8vh, 5.5rem);
}
.fs-hero__text { max-width: 38rem; }

/* Rubrikrader som stiger upp bakom en mask, en efter en */
.fs-rad { display: block; overflow: hidden; }
.fs-rad > span { display: block; }
.fs-js .fs-rad > span {
	transform: translateY(110%);
	animation: fs-stig var(--dur-filmisk) var(--ease-expo) forwards;
}
.fs-rad:nth-child(1) > span { animation-delay: .10s; }
.fs-rad:nth-child(2) > span { animation-delay: .22s; }
.fs-rad:nth-child(3) > span { animation-delay: .34s; }
@keyframes fs-stig { to { transform: translateY(0); } }

/* =========================================================================
   6. Scrollavslöjanden och bildrörelse
   ========================================================================= */

/* Två vägar till samma effekt.
   1. Moderna motorer driver animationen direkt från scrollpositionen. Ingen
      observer, inget skript — alltså inget som kan fallera och lämna sidan tom.
   2. Där det saknas tar JS-vägen över, med .fs-js som säkerhetsspärr.
   Saknas båda visas innehållet oanimerat, vilket alltid är rätt utfall. */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		[data-avsloja] {
			animation: fs-avsloja-upp linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 58%;
		}
		[data-avsloja="vanster"] { animation-name: fs-avsloja-vanster; }
		[data-avsloja="hoger"]   { animation-name: fs-avsloja-hoger; }
		[data-avsloja="skala"]   { animation-name: fs-avsloja-skala; }
	}
}

@keyframes fs-avsloja-upp     { from { opacity: 0; transform: translateY(28px); } }
@keyframes fs-avsloja-vanster { from { opacity: 0; transform: translateX(-36px); } }
@keyframes fs-avsloja-hoger   { from { opacity: 0; transform: translateX(36px); } }
@keyframes fs-avsloja-skala   { from { opacity: 0; transform: scale(.94); } }

@supports not (animation-timeline: view()) {
	.fs-js [data-avsloja] {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity var(--dur-lang) var(--ease-expo),
		            transform var(--dur-lang) var(--ease-expo);
		transition-delay: var(--fordroj, 0s);
	}
	.fs-js [data-avsloja].ar-synlig { opacity: 1; transform: none; }

	.fs-js [data-avsloja="vanster"] { transform: translateX(-36px); }
	.fs-js [data-avsloja="hoger"]   { transform: translateX(36px); }
	.fs-js [data-avsloja="skala"]   { transform: scale(.94); }
}

/* Bild som avslöjas bakom en mask som glider undan */
.fs-mask {
	position: relative;
	overflow: hidden;
	border-radius: var(--radie);
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.fs-mask::after {
			content: "";
			position: absolute;
			inset: 0;
			background: var(--fs-midnatt);
			transform-origin: right;
			animation: fs-mask-undan linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 62%;
		}
		.fs-mask img {
			animation: fs-mask-zoom linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 85%;
		}
	}
}
@keyframes fs-mask-undan { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes fs-mask-zoom  { from { transform: scale(1.18); } to { transform: none; } }

@supports not (animation-timeline: view()) {
	.fs-js .fs-mask::after {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--fs-midnatt);
		transform-origin: right;
		transition: transform var(--dur-filmisk) var(--ease-kvart);
	}
}
.fs-js .fs-mask.ar-synlig::after { transform: scaleX(0); }
.fs-mask img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: none;
	transition: transform 1.8s var(--ease-expo);
}
.fs-js .fs-mask img { transform: scale(1.18); }
.fs-js .fs-mask.ar-synlig img { transform: scale(1); }

/* Långsam panorering över en bild vid scroll (sätts av motion.js) */
.fs-panorera img { will-change: transform; }

/* Lutning som följer musen — bara på pekdon med hover */
@media (hover: hover) and (pointer: fine) {
	.fs-lutning {
		transform: perspective(1200px)
		           rotateX(calc(var(--luta-y, 0) * -3.2deg))
		           rotateY(calc(var(--luta-x, 0) * 3.2deg));
		transition: transform .5s var(--ease-expo);
		transform-style: preserve-3d;
	}
	.fs-lutning__djup { transform: translateZ(38px); }
}

/* =========================================================================
   7. Sektionsövergångar
   ========================================================================= */

/* Mjuk toning mellan ljus och mörk sektion — ingen hård kant */
.fs-overgang {
	position: relative;
	height: clamp(64px, 9vw, 130px);
	margin-block: -1px;
}
.fs-overgang--till-mork { background: linear-gradient(180deg, var(--fs-parlvit), var(--fs-midnatt)); }
.fs-overgang--till-ljus { background: linear-gradient(180deg, var(--fs-midnatt), var(--fs-parlvit)); }

/* Diagonalt snitt */
.fs-snitt-topp { clip-path: polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%); }
.fs-snitt-botten { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%); }

/* Sektion som tonar in underifrån vid scroll */
.fs-sektion {
	padding-block: clamp(4.5rem, 9vw, 8.5rem);
	position: relative;
}

/* =========================================================================
   8. Kort, statistik, märken
   ========================================================================= */

.fs-rutnat {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.fs-kort {
	position: relative;
	padding: 2rem;
	background: #fff;
	border: var(--kant);
	border-radius: var(--radie);
	overflow: hidden;
	transition: transform var(--dur-med) var(--ease-expo),
	            box-shadow var(--dur-med) var(--ease-expo),
	            border-color var(--dur-med) var(--ease-mjuk);
}
.fs-mork .fs-kort { background: rgba(246, 242, 233, .04); border-color: var(--fs-linje-ljus); }
.fs-kort:hover {
	transform: translateY(-6px);
	box-shadow: var(--skugga-lyft);
	border-color: rgba(201, 169, 97, .5);
}
/* Guldskimmer som följer muspekaren över kortet */
.fs-kort::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(340px circle at var(--mus-x, 50%) var(--mus-y, 0%), rgba(201, 169, 97, .16), transparent 62%);
	opacity: 0;
	transition: opacity var(--dur-med) var(--ease-mjuk);
	pointer-events: none;
}
.fs-kort:hover::before { opacity: 1; }

.fs-kort__ikon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 1.25rem;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(201, 169, 97, .22), rgba(201, 169, 97, .06));
	color: var(--fs-champagne-mork);
}
.fs-mork .fs-kort__ikon { color: var(--fs-champagne); }

.fs-statistik { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem); }
.fs-statistik__tal {
	font-family: Platypi, Georgia, serif;
	font-size: clamp(2.25rem, 4.5vw, 3.25rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--fs-champagne);
	font-variant-numeric: tabular-nums;
}
.fs-statistik__etikett { font-size: .875rem; opacity: .72; margin-top: .4rem; }

.fs-marke {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .95rem;
	border-radius: var(--radie-rund);
	background: rgba(201, 169, 97, .14);
	border: 1px solid rgba(201, 169, 97, .34);
	font-size: .8125rem;
	font-weight: 700;
	color: var(--fs-champagne-mork);
}
.fs-mork .fs-marke { color: var(--fs-champagne-ljus); }

/* =========================================================================
   9. Priskalkylator
   ========================================================================= */

.fs-kalk {
	display: grid;
	gap: 2rem;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	background: linear-gradient(165deg, var(--fs-djuphav), var(--fs-midnatt));
	border: 1px solid var(--fs-linje-ljus);
	border-radius: calc(var(--radie) + 6px);
	color: var(--fs-parlvit);
	box-shadow: var(--skugga-svav);
}
@media (min-width: 860px) { .fs-kalk { grid-template-columns: 1.15fr .85fr; align-items: center; } }

.fs-kalk__reglage { width: 100%; appearance: none; height: 4px; border-radius: 999px; background: rgba(246, 242, 233, .18); outline: none; }
.fs-kalk__reglage::-webkit-slider-thumb {
	appearance: none;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--fs-champagne-ljus), var(--fs-champagne));
	border: 3px solid var(--fs-midnatt);
	box-shadow: var(--skugga-guld);
	cursor: grab;
	transition: transform var(--dur-snabb) var(--ease-spring);
}
.fs-kalk__reglage::-webkit-slider-thumb:active { transform: scale(1.18); cursor: grabbing; }
.fs-kalk__reglage::-moz-range-thumb {
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--fs-champagne); border: 3px solid var(--fs-midnatt);
	box-shadow: var(--skugga-guld); cursor: grab;
}

.fs-kalk__pris {
	font-family: Platypi, Georgia, serif;
	font-size: clamp(2.5rem, 6vw, 3.75rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--fs-champagne);
	font-variant-numeric: tabular-nums;
	/* Siffran byts med en mikroanimation så ögat hänger med */
	transition: transform .18s var(--ease-spring);
}
.fs-kalk__pris.ar-uppdaterad { transform: scale(1.045); }

.fs-kalk__jamfor {
	font-size: .875rem;
	color: rgba(246, 242, 233, .55);
	text-decoration: line-through;
}

/* =========================================================================
   10. Formulär
   ========================================================================= */

.fs-form { display: grid; gap: 1.15rem; }
.fs-falt { position: relative; }
.fs-falt input, .fs-falt textarea, .fs-falt select {
	width: 100%;
	padding: 1.35rem 1.1rem .6rem;
	background: #fff;
	border: 1px solid var(--fs-linje);
	border-radius: var(--radie-liten);
	font: 400 1rem/1.5 Manrope, sans-serif;
	color: var(--fs-midnatt);
	transition: border-color var(--dur-snabb) var(--ease-mjuk),
	            box-shadow var(--dur-snabb) var(--ease-mjuk);
}
.fs-falt textarea { min-height: 120px; resize: vertical; }
.fs-falt input:focus, .fs-falt textarea:focus, .fs-falt select:focus {
	border-color: var(--fs-champagne);
	box-shadow: 0 0 0 4px rgba(201, 169, 97, .16);
	outline: none;
}
/* Flytande etikett — färre fält upplevs, högre ifyllnadsgrad */
.fs-falt label {
	position: absolute;
	left: 1.1rem;
	top: 1.05rem;
	font-size: 1rem;
	color: rgba(6, 19, 28, .5);
	pointer-events: none;
	transform-origin: left top;
	transition: transform var(--dur-snabb) var(--ease-expo),
	            color var(--dur-snabb) var(--ease-mjuk);
}
.fs-falt input:focus + label,
.fs-falt input:not(:placeholder-shown) + label,
.fs-falt textarea:focus + label,
.fs-falt textarea:not(:placeholder-shown) + label,
.fs-falt select:valid + label {
	transform: translateY(-.62rem) scale(.72);
	color: var(--fs-champagne-mork);
}

.fs-form__forlopp {
	height: 3px;
	border-radius: 999px;
	background: rgba(6, 19, 28, .08);
	overflow: hidden;
}
.fs-form__forlopp i {
	display: block;
	height: 100%;
	width: var(--klart, 0%);
	background: linear-gradient(90deg, var(--fs-champagne), var(--fs-champagne-ljus));
	transition: width var(--dur-med) var(--ease-expo);
}

.fs-form__trygg {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: .8125rem;
	color: rgba(6, 19, 28, .6);
}
.fs-mork .fs-form__trygg { color: rgba(246, 242, 233, .6); }

/* =========================================================================
   11. FAQ
   ========================================================================= */

.fs-faq details {
	border-bottom: var(--kant);
	padding: 1.35rem 0;
}
.fs-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	cursor: pointer;
	list-style: none;
	font-family: Platypi, Georgia, serif;
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: -.01em;
	transition: color var(--dur-snabb) var(--ease-mjuk);
}
.fs-faq summary::-webkit-details-marker { display: none; }
.fs-faq summary:hover { color: var(--fs-champagne-mork); }
.fs-faq summary::after {
	content: "";
	flex: none;
	width: 11px; height: 11px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-3px, -3px);
	transition: transform var(--dur-med) var(--ease-spring);
	opacity: .55;
}
.fs-faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.fs-faq details > div {
	padding-top: .9rem;
	max-width: 62ch;
	color: rgba(6, 19, 28, .72);
}
.fs-mork .fs-faq details > div { color: rgba(246, 242, 233, .72); }
/* Öppning animeras där webbläsaren stödjer det */
@supports (interpolate-size: allow-keywords) {
	.fs-faq details::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size var(--dur-med) var(--ease-expo), content-visibility var(--dur-med) allow-discrete;
	}
	.fs-faq details[open]::details-content { block-size: auto; }
}

/* =========================================================================
   12. Sidfot
   ========================================================================= */

.fs-footer { background: var(--fs-midnatt); color: rgba(246, 242, 233, .72); }
.fs-footer__cta {
	background: linear-gradient(150deg, var(--fs-petrol), var(--fs-djuphav) 70%);
	border-radius: var(--radie);
	padding: clamp(2rem, 5vw, 3.5rem);
	position: relative;
	overflow: hidden;
}
.fs-footer__cta::after {
	content: "";
	position: absolute;
	width: 480px; height: 480px;
	right: -120px; top: -180px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(201, 169, 97, .22), transparent 65%);
	pointer-events: none;
}
.fs-footer__rutnat {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	padding-block: clamp(3rem, 6vw, 4.5rem);
}
.fs-footer a { color: inherit; text-decoration: none; transition: color var(--dur-snabb) var(--ease-mjuk); }
.fs-footer a:hover { color: var(--fs-champagne-ljus); }
.fs-footer__rubrik {
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fs-champagne);
	margin-bottom: 1rem;
}

/* Klibbig mobilhandling — flyttstäd bokas ofta i mobilen, mitt i flyttkaoset */
.fs-mobilcta {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 95;
	display: none;
	gap: .6rem;
	padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
	background: rgba(6, 19, 28, .94);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--fs-linje-ljus);
	transform: translateY(110%);
	transition: transform var(--dur-med) var(--ease-expo);
}
.fs-mobilcta.ar-synlig { transform: none; }
.fs-mobilcta .fs-knapp { flex: 1; padding-inline: 1rem; font-size: .875rem; }
@media (max-width: 780px) { .fs-mobilcta { display: flex; } body { padding-bottom: 4.5rem; } }

/* =========================================================================
   12b. Layout och sidspecifika block
   ========================================================================= */

.fs-inre { max-width: 1240px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
.fs-smal { max-width: 820px; }

.fs-tva-kolumner { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .fs-tva-kolumner { grid-template-columns: 1fr 1fr; } }

.fs-sektion__huvud { max-width: 62ch; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.fs-sektion__huvud h2 { margin: .7rem 0 1rem; }

/* --- Hero --- */
.fs-hero__knappar { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.fs-hero__signaler {
	display: flex; flex-wrap: wrap; gap: 1.5rem;
	list-style: none; padding: 0; margin: 2.25rem 0 0;
	font-size: .875rem; color: rgba(246,242,233,.62);
}
.fs-hero__signaler li { display: flex; align-items: center; gap: .5rem; }
.fs-hero__signaler li::before {
	content: ""; width: 5px; height: 5px; border-radius: 50%;
	background: var(--fs-champagne); flex: none;
}
/* Förgrundsmotivet får inte tränga in i texten på små skärmar */
@media (max-width: 900px) { .fs-lager--fram { display: none; } }

/* --- Statistik --- */
.fs-bevis { padding-block: clamp(3rem, 5vw, 4.5rem); }

/* --- Steg --- */
.fs-steg {
	display: grid; gap: 1.5rem; list-style: none; padding: 0; margin: 0;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	counter-reset: steg;
}
.fs-steg li { position: relative; padding-top: 1.5rem; border-top: 2px solid var(--fs-linje); }
.fs-js .fs-steg li::after {
	content: ""; position: absolute; inset: -2px auto auto 0;
	height: 2px; width: 0; background: var(--fs-champagne);
	transition: width var(--dur-filmisk) var(--ease-expo);
	transition-delay: var(--fordroj, 0s);
}
.fs-steg li.ar-synlig::after { width: 100%; }
.fs-steg__nr {
	font-family: Platypi, Georgia, serif;
	font-size: 1.75rem; font-weight: 600;
	color: var(--fs-champagne-mork); opacity: .55;
}
.fs-steg h3 { margin: .35rem 0 .5rem; }
.fs-steg p { font-size: .9375rem; color: rgba(6,19,28,.68); }

/* --- Områdesrutnät ---
   Chipsen stod länge med pärlvit text som utgångsläge, vilket bara fungerar
   i mörka sektioner. På ortssidorna ligger de i ljusa sektioner, och där blev
   de vita på pärlvitt — alltså osynliga. Ljus sektion är dessutom det
   vanligaste fallet, så det är nu utgångsläget och mörkt är undantaget. */
.fs-omraden { display: flex; flex-wrap: wrap; gap: .6rem; }
.fs-omraden a {
	padding: .7rem 1.15rem;
	background: rgba(6, 19, 28, .035);
	border: 1px solid rgba(6, 19, 28, .16);
	border-radius: var(--radie-rund);
	font-size: .9375rem;
	font-weight: 600;
	color: var(--fs-midnatt);
	text-decoration: none;
	transition: background var(--dur-snabb) var(--ease-mjuk),
	            border-color var(--dur-snabb) var(--ease-mjuk),
	            color var(--dur-snabb) var(--ease-mjuk),
	            transform var(--dur-snabb) var(--ease-spring);
}
.fs-omraden a:hover {
	background: rgba(201, 169, 97, .18);
	border-color: var(--fs-champagne-mork);
	color: var(--fs-midnatt);
	transform: translateY(-2px);
}
.fs-omraden__alla {
	background: rgba(201, 169, 97, .14);
	border-color: var(--fs-champagne-mork);
	color: var(--fs-champagne-mork);
}

/* Mörka sektioner vänder tillbaka till ljus text. */
.fs-mork .fs-omraden a,
.fs-sidhuvud .fs-omraden a {
	background: rgba(246, 242, 233, .05);
	border-color: var(--fs-linje-ljus);
	color: var(--fs-parlvit);
}
.fs-mork .fs-omraden a:hover,
.fs-sidhuvud .fs-omraden a:hover {
	background: rgba(201, 169, 97, .16);
	border-color: rgba(201, 169, 97, .6);
	color: var(--fs-parlvit);
}
.fs-mork .fs-omraden__alla,
.fs-sidhuvud .fs-omraden__alla {
	border-color: rgba(201, 169, 97, .55);
	color: var(--fs-champagne-ljus);
}

/* --- Kalkylatorns delar --- */
.fs-kalk__etikett { font-size: .875rem; color: rgba(246,242,233,.66); margin-bottom: .9rem; }
.fs-kalk__etikett strong { color: var(--fs-champagne); font-size: 1.125rem; }
.fs-kalk__skala { display: flex; justify-content: space-between; font-size: .75rem; opacity: .45; margin-top: .5rem; }
.fs-kalk__ingar {
	list-style: none; padding: 0; margin: 1.75rem 0 0;
	display: grid; gap: .5rem; font-size: .875rem; color: rgba(246,242,233,.72);
}
.fs-kalk__ingar li { display: flex; gap: .6rem; align-items: flex-start; }
.fs-kalk__ingar li::before { content: "✓"; color: var(--fs-champagne); font-weight: 700; flex: none; }
.fs-kalk__resultat { text-align: center; }
.fs-kalk__resultat .fs-knapp { margin-top: 1.5rem; width: 100%; }
.fs-kalk__not { font-size: .75rem; opacity: .55; margin-top: .9rem; max-width: 30ch; margin-inline: auto; }

/* --- Punktlista --- */
.fs-punktlista { list-style: none; padding: 0; margin: 1.75rem 0; display: grid; gap: .75rem; }
.fs-punktlista li { display: flex; gap: .75rem; align-items: flex-start; }
.fs-punktlista li::before {
	content: ""; flex: none; margin-top: .45rem;
	width: 14px; height: 8px;
	border-left: 2px solid var(--fs-champagne);
	border-bottom: 2px solid var(--fs-champagne);
	transform: rotate(-45deg);
}

/* --- Formulärets omgivning --- */
.fs-form--kort {
	padding: clamp(1.5rem, 3.5vw, 2.25rem);
	background: rgba(246,242,233,.05);
	border: 1px solid var(--fs-linje-ljus);
	border-radius: calc(var(--radie) + 4px);
}
.fs-falt--par { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.fs-honung { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fs-form__skicka { width: 100%; margin-top: .35rem; }
.fs-form__status { font-size: .875rem; margin: 0; min-height: 1.2em; }
.fs-form__status.ar-fel { color: #FFB4A2; }
.fs-form__status.ar-klar { color: var(--fs-champagne-ljus); }
.fs-form__trygg span { display: inline-flex; align-items: center; gap: .4rem; }
.fs-form__trygg span::before { content: "✓"; color: var(--fs-champagne); }
.fs-kontakt__direkt { margin-top: 2rem; font-size: .875rem; opacity: .7; }
.fs-kontakt__tel {
	font-family: Platypi, Georgia, serif;
	font-size: 1.625rem; font-weight: 600; letter-spacing: -.02em;
	color: var(--fs-champagne) !important; text-decoration: none;
}

/* =========================================================================
   13. Tillgänglighet: stäng av rörelse för den som bett om det
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	[data-avsloja] { opacity: 1 !important; transform: none !important; }
	.fs-mask::after { transform: scaleX(0); }
	.fs-mask img { transform: none; }
	.fs-rad > span { transform: none; }
	.fs-ken-burns { animation: none; }
	.fs-lutning { transform: none !important; }
}

/* Tackrutan som ersätter formuläret efter inskick */
.fs-form__tack { text-align: center; padding: 1.5rem 0; }
.fs-form__tack h3 { margin: .6rem 0 .8rem; color: var(--fs-parlvit); }
.fs-form__tack a { color: var(--fs-champagne-ljus); }

/* WordPress ger main ett toppmarginal som blottar body-bakgrunden som en
   ljus remsa ovanför hero. Sektionerna sätter sin egen bakgrund. */
main.wp-block-group { margin-block-start: 0; padding-block-start: 0; }
main.wp-block-group > .wp-block-html:first-child { margin-block-start: 0; }

/* Hero är mörk men saknar .fs-mork (den sätter en bakgrund vi inte vill ha
   ovanpå bildlagren). Textfärgerna måste därför pekas ut separat. */
.fs-hero .fs-ingress { color: rgba(246, 242, 233, .80); }
.fs-hero .fs-ogonbryn { color: var(--fs-champagne); }
.fs-hero :is(h1, h2, h3) { color: var(--fs-parlvit); }

/* =========================================================================
   14. Undersidor
   ========================================================================= */

/* Kompaktare sidhuvud än startsidans hero — undersidorna ska komma till
   saken snabbare, men behålla samma djup och färgvärld. */
.fs-sidhuvud {
	position: relative;
	overflow: clip;
	isolation: isolate;
	background: var(--fs-midnatt);
	color: var(--fs-parlvit);
	padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3rem, 6vw, 5rem);
}
.fs-sidhuvud .fs-lager--bak { filter: saturate(.8) brightness(.5) blur(2px); transform: scale(1.1); }
.fs-sidhuvud .fs-lager--dis {
	background:
		radial-gradient(110% 80% at 82% 30%, rgba(201,169,97,.16), transparent 62%),
		linear-gradient(96deg, rgba(6,19,28,.95) 0%, rgba(6,19,28,.80) 42%, rgba(6,19,28,.45) 78%),
		linear-gradient(180deg, rgba(6,19,28,.30), var(--fs-midnatt));
}
.fs-sidhuvud__innehall { position: relative; z-index: 5; }
.fs-sidhuvud__rubrik {
	font-family: Platypi, Georgia, serif;
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -.028em;
	margin: .7rem 0 1.1rem;
	max-width: 20ch;
	text-wrap: balance;
	color: var(--fs-parlvit);
}
.fs-sidhuvud .fs-ingress { color: rgba(246,242,233,.80); }
.fs-sidhuvud .fs-ogonbryn { color: var(--fs-champagne); }

/* --- Brödsmula --- */
.fs-brodsmula {
	background: var(--fs-djuphav);
	color: rgba(246,242,233,.62);
	font-size: .8125rem;
	padding-block: .7rem;
}
.fs-brodsmula a { color: inherit; text-decoration: none; }
.fs-brodsmula a:hover { color: var(--fs-champagne-ljus); text-decoration: underline; }
.fs-brodsmula [aria-current] { color: var(--fs-champagne); }

/* --- Listblock --- */
.fs-lista-block {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: var(--kant);
	border-radius: var(--radie);
	background: #fff;
	margin-bottom: 1.5rem;
}
.fs-mork .fs-lista-block { background: rgba(246,242,233,.04); }
.fs-lista-block h3 { margin: 0 0 1rem; }
.fs-lista-block .fs-punktlista { margin: 0; }

/* --- Områdesgrupper --- */
.fs-omradesgrupp + .fs-omradesgrupp { margin-top: 2.5rem; }
.fs-omradesgrupp h3 {
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fs-champagne-mork);
	margin-bottom: 1rem;
}

/* --- Klickbara kort --- */
.fs-kort--lank { display: block; text-decoration: none; color: inherit; }
.fs-kort--lank h3 { margin: 0 0 .5rem; }
.fs-kort--lank p { color: rgba(6,19,28,.68); }
.fs-kort__pil {
	display: inline-block;
	margin-top: 1rem;
	font-size: .875rem;
	font-weight: 700;
	color: var(--fs-champagne-mork);
	transition: transform var(--dur-med) var(--ease-expo);
}
.fs-kort--lank:hover .fs-kort__pil { transform: translateX(5px); }

/* Innehållsrytm på undersidor */
.fs-sektion h2 + p, .fs-sektion p + p { margin-top: 1rem; }
.fs-sektion p { max-width: 68ch; }

/* Ortsnamn vars sida ännu inte publicerats. Visas som text i brödinnehåll
   så att besökaren ser att vi arbetar där — men aldrig som en länk till
   en 404. I menyerna tas posten bort helt istället. */
.fs-kommande {
	color: inherit;
	opacity: .55;
	cursor: default;
}
.fs-omraden .fs-kommande {
	display: inline-block;
	padding: .7rem 1.15rem;
	border: 1px dashed rgba(6, 19, 28, .22);
	border-radius: var(--radie-rund);
	font-size: .9375rem;
	font-weight: 600;
	opacity: .7;
}
.fs-mork .fs-omraden .fs-kommande { border-color: var(--fs-linje-ljus); }

/* =========================================================================
   15. Före/efter-jämförelse
   Dragreglage som låter besökaren själv avslöja resultatet. Att få göra
   något — och se effekten direkt — håller kvar uppmärksamheten betydligt
   längre än en statisk bild, och gör värdet konkret i stället för påstått.
   ========================================================================= */

.fs-fe {
	margin: 0;
	--pos: 50%;
}

.fs-fe__ram {
	position: relative;
	overflow: hidden;
	border-radius: var(--radie);
	border: 1px solid var(--fs-linje);
	box-shadow: var(--skugga-lyft);
	cursor: ew-resize;
	touch-action: pan-y;          /* låter sidan scrolla vertikalt ändå */
	user-select: none;
	-webkit-user-select: none;
	aspect-ratio: 3 / 2;
	background: var(--fs-djuphav);
}

.fs-fe__bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
	-webkit-user-drag: none;
}

/* "Före" ligger ovanpå och beskärs till reglagets position. */
.fs-fe__fore {
	position: absolute;
	inset: 0;
	clip-path: inset(0 calc(100% - var(--pos)) 0 0);
	will-change: clip-path;
}

/* --- Etiketter --- */
.fs-fe__etikett {
	position: absolute;
	top: 1rem;
	z-index: 3;
	padding: .4rem .85rem;
	border-radius: var(--radie-rund);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
	pointer-events: none;
	transition: opacity var(--dur-med) var(--ease-mjuk);
}
.fs-fe__etikett--fore {
	left: 1rem;
	background: rgba(6, 19, 28, .72);
	color: rgba(246, 242, 233, .92);
}
.fs-fe__etikett--efter {
	right: 1rem;
	background: rgba(201, 169, 97, .92);
	color: var(--fs-midnatt);
}
/* Etiketten tonas ned när reglaget dras förbi den, så den aldrig
   ligger kvar över fel bildhalva. */
.fs-fe.ar-vid-kant-vanster .fs-fe__etikett--fore,
.fs-fe.ar-vid-kant-hoger .fs-fe__etikett--efter { opacity: 0; }

/* --- Handtaget --- */
.fs-fe__handtag {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	z-index: 4;
	width: 44px;
	margin-left: -22px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: ew-resize;
	display: grid;
	place-items: center;
}
/* Den lodräta linjen */
.fs-fe__handtag::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: linear-gradient(180deg,
		rgba(246, 242, 233, .5),
		var(--fs-champagne) 20%,
		var(--fs-champagne) 80%,
		rgba(246, 242, 233, .5));
	box-shadow: 0 0 18px rgba(201, 169, 97, .55);
}
/* Knoppen */
.fs-fe__knopp {
	position: relative;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--fs-champagne-ljus), var(--fs-champagne) 60%, var(--fs-champagne-mork));
	box-shadow: 0 2px 6px rgba(6, 19, 28, .35), 0 10px 28px -8px rgba(201, 169, 97, .8);
	color: var(--fs-midnatt);
	transition: transform var(--dur-snabb) var(--ease-spring);
}
.fs-fe__ram:hover .fs-fe__knopp { transform: scale(1.08); }
.fs-fe__handtag:active .fs-fe__knopp { transform: scale(.96); }
.fs-fe__handtag:focus-visible { outline: none; }
.fs-fe__handtag:focus-visible .fs-fe__knopp {
	outline: 3px solid var(--fs-parlvit);
	outline-offset: 3px;
}

/* En diskret vinkning första gången reglaget syns — utan den uppfattar
   många besökare bilden som statisk och rör den aldrig. */
@media (prefers-reduced-motion: no-preference) {
	.fs-fe.ar-synlig .fs-fe__knopp { animation: fs-fe-vinka 2.4s var(--ease-expo) .5s 2; }
}
@keyframes fs-fe-vinka {
	0%, 100% { transform: translateX(0); }
	30%      { transform: translateX(-9px); }
	60%      { transform: translateX(9px); }
}

.fs-fe__text {
	margin-top: 1rem;
	font-size: .9375rem;
	line-height: 1.6;
	color: rgba(6, 19, 28, .72);
}
.fs-fe__text strong { color: var(--fs-midnatt); }
.fs-mork .fs-fe__text { color: rgba(246, 242, 233, .74); }
.fs-mork .fs-fe__text strong { color: var(--fs-parlvit); }
.fs-mork .fs-fe__ram { border-color: var(--fs-linje-ljus); }

/* --- Rutnät av jämförelser --- */
.fs-fe-rutnat {
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 2.75rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.fs-fe__notis {
	margin-top: 1.5rem;
	font-size: .8125rem;
	line-height: 1.6;
	color: rgba(6, 19, 28, .52);
	max-width: 70ch;
}
.fs-mork .fs-fe__notis { color: rgba(246, 242, 233, .5); }

/* Sidfoten är mörk oavsett om markupen hunnit få .fs-mork eller inte.
   Att binda färgen till behållaren i stället för till en klass i HTML gör
   att rättelsen slår igenom även för besökare som har en äldre version av
   sidan i webbläsarcachen — CSS-filen versionsmärks vid varje driftsättning,
   men den cachade HTML-sidan gör det inte. */
.fs-footer .fs-ingress { color: rgba(246, 242, 233, .76); }
.fs-footer .fs-ogonbryn { color: var(--fs-champagne); }
.fs-footer .fs-marke { color: var(--fs-champagne-ljus); }
.fs-footer :is(h2, h3, h4) { color: var(--fs-parlvit); }

/* Samma resonemang för undersidornas sidhuvud. */
.fs-sidhuvud .fs-ingress { color: rgba(246, 242, 233, .80); }
.fs-sidhuvud .fs-ogonbryn { color: var(--fs-champagne); }