/* Aneby Bostäder – shared styles for every page

   Font sizes are in rem so the visitor's browser text-size setting works
   (1rem = 16px by default). Spacing stays in px.

   Breakpoints, widest first:
   ≥1440  hero shows the second (left) blossom branch in the side margin
   ≤1100  stat boxes become rows; Hyresgästinfo sidebar narrows to 240px
   ≤1024  four-column grids become two; compact row-style shortcut cards
   ≤960   the main menu collapses behind the Meny button
   ≤900   home hero one column, its photos 16:9; Hyresgästinfo sidebar moves
          under the article
   ≤760   phone layout (16px gutter, one-column splits)
   ≤519   remaining grids go to one column; photo people cards go sideways
   ≤479   smallest hero branch */

@font-face {
	font-family: "Figtree";
	src: url("/fonts/figtree-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-display: swap;
}

@font-face {
	font-family: "Marcellus";
	src: url("/fonts/marcellus-latin.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

:root {
	--ink: #2b2622;
	--ink-hover: #4a413a;
	--text: #3b342f;
	--muted: #65594f;
	--link: #7a6551;
	--taupe: #ae967e;
	--sand: #f4efe9;
	--paper: #fbf9f6;
	--line: #e6ddd3;
	--footer: #3b342f;
	--footer-text: #efe9e3;
	--footer-muted: #c9bdb1;
	--on-dark-muted: #d9cbbd;

	/* Focus ring colour. Every dark surface sets it to white (see "Dark
	   surfaces" below); add any new dark block there too. */
	--focus: var(--ink);

	--serif: "Marcellus", Georgia, "Times New Roman", serif;
	--sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

	--max: 1200px;
	--gutter: 24px;

	/* Corner radii: small parts, cards, large panels/photos, pills */
	--r-sm: 16px;
	--r-md: 24px;
	--r-lg: 28px;
	--r-pill: 999px;

	--shadow: 0 12px 32px rgba(59, 52, 47, 0.08);
	--shadow-lift: 0 16px 40px rgba(59, 52, 47, 0.12);

	/* Icons drawn with CSS masks, so they take the text colour */
	--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");
	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2622' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* Base */

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

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 1.0625rem/1.6 var(--sans);
	-webkit-font-smoothing: antialiased;
	/* Long words and e-mail addresses wrap instead of spilling out of their
	   box when the visitor has enlarged the text */
	overflow-wrap: break-word;
}

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

a {
	color: var(--link);
}

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

/* Phone numbers never break across lines */
a[href^="tel:"] {
	white-space: nowrap;
}

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

/* Jump-link targets stop a little below the top edge */
[id] {
	scroll-margin-top: 24px;
}

h1,
h2,
h3 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.15;
	color: var(--ink);
	text-wrap: balance;
	overflow-wrap: break-word;
}

/* Children of flex columns with align-items: flex-start are as wide as their
   longest word; cap them so overflow-wrap can break the word instead */
h1,
h2,
h3,
.footer-col > *,
.help-card > *,
.info-card > * {
	max-width: 100%;
}

/* Long Swedish compounds: put a soft hyphen at the joint
   (Tillgänglighets­redogörelse) so they break there on phones. Automatic
   hyphenation picks poor points ("redogörel-se"), so it is not used;
   overflow-wrap above is the fallback. */
h1 {
	font-size: clamp(2.25rem, 3vw + 1rem, 3.75rem);
	line-height: 1.08;
	/* balance splits the homepage h1 after "till"; pretty (with   in
	   the copy) keeps "Välkommen till oss –" together */
	text-wrap: pretty;
}

/* 30px up to about 900px wide, then grows to 44px at 1440 */
h2 {
	font-size: clamp(1.875rem, 2.64vw + 0.375rem, 2.75rem);
}

p {
	margin: 0;
}

p,
li,
dd,
.lead {
	text-wrap: pretty;
}

/* Utilities */

.container {
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Hidden on screen, still read by screen readers */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 10;
	padding: 12px 20px;
	border-radius: var(--r-pill);
	background: var(--ink);
	color: #fff;
	font-weight: 600;
}

.skip-link:focus {
	top: 16px;
	color: #fff;
}

/* Links to another organisation's site get a small ↗ after the text. Pair it
   with hidden text that names the site, for example
   <span class="visually-hidden"> (öppnas på Din Hyresvärds webbplats)</span> */
.external::after {
	content: "";
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-left: 0.3em;
	vertical-align: -0.02em;
	background-color: currentColor;
	-webkit-mask: var(--icon-external) no-repeat center / contain;
	mask: var(--icon-external) no-repeat center / contain;
}

.eyebrow {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--link);
}

.lead {
	max-width: 34em;
	font-size: 1.1875rem;
}

/* Keeps short phrases together, e.g. <span class="nowrap">kl. 10–12</span>
   (browsers otherwise break after the dash) */
.nowrap {
	white-space: nowrap;
}

/* A long compound in a heading of several words: it moves to a line of its
   own first, and breaks at its soft hyphen only when it is wider than the
   line (enlarged text, small phones). Without it the browser fills the line
   with half the word ("GDPR och person-").
   GDPR och <span class="compound">person&shy;uppgifter</span> */
.compound {
	display: inline-block;
	max-width: 100%;
}

.fine-print {
	font-size: 0.9375rem;
	color: var(--muted);
}

/* Photos whose subject sits on the right (druvan.jpg has a pale wall strip
   on the left that the 4:3 crop then cuts away) */
.img-focus-right {
	object-position: 100% 50%;
}

/* Buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 24px;
	border-radius: var(--r-pill);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}

.btn svg {
	flex: none;
}

.btn.external::after {
	margin-left: 0;
}

.btn--dark {
	background: var(--ink);
	color: #fff;
}

.btn--dark:hover {
	background: var(--ink-hover);
	color: #fff;
}

.btn--light {
	background: #fff;
	color: var(--ink);
}

.btn--light:hover {
	background: var(--sand);
	color: var(--ink);
}

.btn--outline {
	border: 1.5px solid var(--ink);
	color: var(--ink);
}

.btn--outline:hover {
	background: var(--sand);
	color: var(--ink);
}

.btn--ghost-light {
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	color: #fff;
}

.btn--ghost-light:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* Header */

.site-header {
	background: #fff;
	border-bottom: 1px solid var(--line);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
	padding-block: 12px;
}

.logo {
	flex: none;
}

/* logo-144.png is the 2× file for this 72px height */
.logo img {
	width: auto;
	height: 72px;
}

.menu-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 18px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-pill);
	background: #fff;
	color: var(--ink);
	font: 600 1rem var(--sans);
	cursor: pointer;
}

.menu-toggle:hover {
	background: var(--sand);
}

/* The button shows "Meny" with a ☰ icon when closed and "Stäng" with an ✕
   when open. Hidden spans drop out of the accessible name, so the name
   follows what is on screen. */
.menu-toggle[aria-expanded="true"] .menu-toggle__open,
.menu-toggle:not([aria-expanded="true"]) .menu-toggle__close {
	display: none;
}

/* Desktop width math at the 961px switch point: logo 68 + gap 24 + five
   links (about 470 with 12px padding, the current one bold) + Mina sidor
   about 120 + Sök bostad about 138 + gaps about 20 ≈ 840px, inside the
   913px the container leaves. */
.site-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
}

.site-nav__list {
	display: flex;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--r-pill);
	color: var(--ink);
	font-weight: 500;
	font-size: 1rem;
	text-decoration: none;
	white-space: nowrap;
}

.site-nav__link:hover {
	background: var(--sand);
	color: var(--ink);
}

/* Current page or section: bold text and a bar under it, so it never looks
   like the hover pill. tools/sync_layout.py sets aria-current. */
.site-nav__link[aria-current] {
	font-weight: 700;
}

.site-nav__link[aria-current]::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 5px;
	height: 3px;
	border-radius: 2px;
	background: var(--ink);
}

/* Quieter link to the tenant portal, set apart by a thin divider */
.site-nav__mina-sidor {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-left: 6px;
	padding: 0 12px 0 16px;
	border-left: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.site-nav__mina-sidor:hover {
	color: var(--ink);
	text-decoration: underline;
}

.site-nav__cta {
	margin-left: 4px;
}

/* Only in the open phone menu */
.site-nav__akut {
	display: none;
}

/* Taupe hero bands with the blossom branches from the maintenance page.
   Only the right branch shows by default; the left one lives in the side
   margin, which is wide enough for it from 1440px (see the min-width:
   1440px block). */

.hero {
	background: url("/img/tree-right.png") no-repeat right top / auto 320px, var(--taupe);
}

.hero .container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
	align-items: center;
	padding-block: 72px 136px;
}

.hero__text {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

/* Ink on taupe: the brown eyebrow colour is too faint there */
.hero .eyebrow,
.hero .lead,
.page-hero .eyebrow {
	color: var(--ink);
}

/* The brown link colour is too faint on taupe; use ink and keep the underline */
.hero a:not(.btn),
.page-hero a:not(.btn) {
	color: var(--ink);
}

/* Homepage slideshow (js/site.js). The photos are stacked in one frame, 4:3
   and 16:9 from 900px down, which keeps its size whether or not the photos
   have loaded. A change is a cross-fade: the incoming photo lies on top and
   fades in over the outgoing one, which stays fully visible underneath
   (.is-leaving) until the fade is over, so the taupe never shows through
   halfway. aria-hidden decides which photo shows, so the screen and screen
   readers always agree. Without JavaScript only the first photo exists, and
   with reduced motion the fade becomes a cut (see the prefers-reduced-motion
   block). Print leaves the slideshow out, like the other photos. */

.hero__slideshow {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-lg);
	box-shadow: 0 24px 48px rgba(43, 38, 34, 0.22);
}

/* Safari 14 and older (old iPads) have no aspect-ratio. Nothing in the frame
   is in the flow, so it would collapse and the photos vanish. A padding in %
   counts from the width: 75% gives 4:3, 56.25% gives 16:9. */
@supports not (aspect-ratio: 4 / 3) {
	.hero__slideshow {
		height: 0;
		padding-top: 75%;
	}

	@media (max-width: 900px) {
		.hero__slideshow {
			padding-top: 56.25%;
		}
	}
}

/* top and left rather than inset, which Safari 14.0 and older lack */
.hero__slide {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	/* Keep in step with FADE_MS in js/site.js */
	transition: opacity 1.2s ease-in-out;
}

.hero__slide[aria-hidden="true"] {
	z-index: 0;
	opacity: 0;
}

.hero__slide.is-leaving {
	opacity: 1;
}

/* Crop of each photo. The photos are about 3:2, so the 4:3 frame cuts off
   the sides (the x value counts) and the 16:9 frame the top and bottom (the
   y value counts). A photo without a class here is centred. */
.hero__slide--gult-hus {
	object-position: 80% 50%; /* the whole house, between tree trunk and flagpole */
}

.hero__slide--radhus-hostbjorkar {
	object-position: 80% 50%; /* less of the blurred birch on the left */
}

.hero__slide--innergard {
	object-position: 25% 20%; /* more of the house; less shaded paving at 16:9 */
}

.hero__slide--tegelhus-kvallssol {
	object-position: 100% 40%; /* leaves out the grey neighbouring house */
}

.hero__slide--gronska-back {
	object-position: 100% 0%; /* more of the houses; less dark stream at 16:9 */
}

/* Pause/play button (WCAG 2.2.2), round and 44px, bottom right on the photo.
   The white icon on ink at 75% keeps at least 5.9:1 even over white sky; the
   faint white edge outlines the disc on dark photos and shows as a ring in
   Windows high-contrast mode. The focus ring is white with ink on both
   sides, so it shows on light and dark photos alike. site.js removes
   hidden. */
.hero__toggle {
	--focus: #fff;
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--r-pill);
	background: rgba(43, 38, 34, 0.75);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s;
}

.hero__toggle[hidden] {
	display: none;
}

.hero__toggle:hover {
	background: var(--ink);
}

/* Outline 2–5px out, ink shadow 0–7px out: ink, white, ink */
.hero__toggle:focus-visible {
	outline-offset: 2px;
	border-radius: var(--r-pill);
	box-shadow: 0 0 0 7px var(--ink);
}

/* The icon shows what a press does: pause while playing, play while paused */
.hero__toggle-play,
.hero__toggle.is-paused .hero__toggle-pause {
	display: none;
}

.hero__toggle.is-paused .hero__toggle-play {
	display: block;
}

.page-hero {
	background: url("/img/tree-right.png") no-repeat right top / auto 250px, var(--taupe);
}

.page-hero .container {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	padding-block: 40px 56px;
}

.page-hero .lead {
	max-width: 40em;
}

/* "Fler ämnen i Hyresgästinfo" jump to the subnav, shown when the subnav
   sits under the article (≤900px) */
.page-hero__more {
	display: none;
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	column-gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.breadcrumbs li {
	display: flex;
	align-items: center;
}

/* The second value is the alt text, so screen readers skip the slash */
.breadcrumbs li + li::before {
	content: "/";
	content: "/" / "";
	margin-right: 8px;
}

.breadcrumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--ink);
	text-decoration: none;
}

.breadcrumbs a:hover {
	text-decoration: underline;
}

.breadcrumbs [aria-current] {
	font-weight: 600;
}

.jump-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}

.jump-links a,
.page-hero__more {
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.85);
	color: var(--ink);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.jump-links a {
	display: inline-flex;
}

.jump-links a:hover,
.page-hero__more:hover {
	background: #fff;
	color: var(--ink);
}

/* Akut fel note: a light card that reads on taupe, sand or paper */

.akut {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 36rem;
	padding: 20px 24px;
	border-radius: var(--r-sm);
	background: var(--paper);
	color: var(--ink);
	font-size: 1rem;
	line-height: 1.5;
	box-shadow: 0 8px 24px rgba(43, 38, 34, 0.1);
}

.akut__title {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-weight: 700;
	font-size: 1.0625rem;
}

.akut__title svg {
	flex: none;
	margin-top: 1px;
}

/* Indented to line up with the title text: 22px icon + 12px gap */
.akut__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0 0 0 34px;
	list-style: none;
}

.akut a {
	color: var(--ink);
	font-weight: 700;
}

.akut__phone {
	font-size: 1.125rem;
}

/* Homepage shortcuts overlap the bottom of the hero */

.shortcuts {
	position: relative;
	margin-top: -72px;
}

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

.card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

a.card:hover {
	border-color: var(--taupe);
	box-shadow: 0 8px 24px rgba(59, 52, 47, 0.08);
	color: var(--ink);
}

.shortcut {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	box-shadow: var(--shadow);
}

a.shortcut:hover {
	box-shadow: var(--shadow-lift);
}

.shortcut__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--r-sm);
	background: var(--sand);
	color: var(--muted);
}

.shortcut__title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

.shortcut__text {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--muted);
}

/* Driftinformation box with the sms-service.dk widget */

.status {
	margin-top: 16px;
	padding: 24px 28px;
	border-radius: var(--r-md);
	background: var(--sand);
}

.status__head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.status__title {
	display: flex;
	gap: 12px;
	align-items: center;
	font: 700 1.0625rem var(--sans);
}

.status__head a {
	font-weight: 600;
}

/* Transparent, so the sand box shows while the widget loads */
.status iframe,
.embed iframe {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
}

/* Generic box for an embedded form, such as the SMS sign-up */
.embed {
	padding: 24px;
	border-radius: var(--r-md);
	background: var(--sand);
}

/* Sections */

.section {
	padding-top: 96px;
}

.section--last {
	padding-bottom: 112px;
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 32px;
}

.section-head p {
	margin-top: 8px;
	color: var(--muted);
}

.section-head a {
	font-weight: 600;
}

/* Body of a standalone inner page (not Hyresgästinfo): its direct children
   are spaced 72px apart. Use as <div class="container page-content">. */
.page-content {
	display: flex;
	flex-direction: column;
	gap: 72px;
	padding-block: 56px 112px;
}

.page-content > .prose {
	max-width: 50rem;
}

/* Section headings on inner pages are the same size as the article h2
   (.prose h2), so Kontakt's "Akut fel", "Medarbetare" and "Fakturaadress"
   match */
.page-content .section-head h2 {
	font-size: clamp(1.625rem, 1.25rem + 1vw, 2rem);
	line-height: 1.2;
}

/* Area cards (homepage) */

.area-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.area-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.area-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.area-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	padding: 20px 24px 24px;
}

.area-card__name {
	font-family: var(--serif);
	font-size: 1.5rem;
	line-height: 1.25;
}

.area-card__text {
	font-size: 0.9375rem;
	color: var(--muted);
	text-wrap: pretty;
}

/* Shared last row, so cards without a description still end the same way */
.area-card__more {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	margin-top: auto;
	padding-top: 14px;
	color: var(--link);
	font-size: 0.9375rem;
	font-weight: 600;
}

a.area-card:hover .area-card__more {
	color: var(--ink);
	text-decoration: underline;
}

/* Photo + text side by side */

.split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
	align-items: center;
}

.split__image {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--r-lg);
}

/* Studio photo on white: multiply turns the white into the page colour, so
   the people stand on the page instead of in a faint white box */
.split__image--cutout {
	border-radius: 0;
	mix-blend-mode: multiply;
}

.split__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}

.split__text > p:not(.eyebrow) {
	color: var(--text);
	line-height: 1.7;
}

/* Key figures. The label comes first in the markup (dt before dd) but shows
   under the value. */
.stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	margin: 0;
}

.stats div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	min-width: 0;
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: #fff;
}

/* "ISO 14001" is about 4.6em wide; at 28px that is 129px, inside the 136px
   a box has at 1440 */
.stats dd {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(1.5rem, 2vw, 1.75rem);
	line-height: 1.3;
	white-space: nowrap;
}

.stats dt {
	font-size: 0.9375rem;
	color: var(--muted);
	overflow-wrap: anywhere;
}

/* Key-value list, e.g. opening hours or addresses */
.facts {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 6px 24px;
	margin: 0;
}

.facts dt {
	font-weight: 600;
	color: var(--ink);
}

.facts dd {
	margin: 0;
}

/* Link tiles (homepage "Bra att veta", Hyresgästinfo landing) */

.tile-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 64px;
	height: 100%;
	padding: 12px 24px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: #fff;
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.tile:hover {
	background: var(--sand);
	color: var(--ink);
}

.tile svg {
	flex: none;
	color: var(--link);
}

/* Optional description under the tile title. min-width: 0 lets it shrink
   below its longest word (which then wraps), so the arrow stays inside the
   tile when the visitor has enlarged the text. */
.tile__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding-block: 6px;
}

.tile__text {
	color: var(--muted);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.45;
}

/* Tiles with a description need more width than the fixed 4/2/1 columns
   give them (at 1100 the text ran about 20 characters a line). Columns of at
   least 260px instead (4 × 260 + 3 × 12 gap = 1076px of container): 4 from
   1124px wide (279px each at 1280), 3 from 852, 2 from 564, then 1. The :has()
   makes it more specific than the column counts in the media queries below,
   so it applies at every width; tiles without a description keep 4/2/1. */
.tile-grid:has(.tile__text) {
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

/* Generic white card grid, e.g. people on Kontakt */

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

.person {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
}

.person__photo {
	width: 96px;
	height: 96px;
	margin-bottom: 14px;
	border-radius: var(--r-pill);
	background: var(--sand);
	object-fit: cover;
	/* The photos have a white studio background; a thin ring shows the
	   circle on the white card. A shadow, so the layout doesn't change. */
	box-shadow: 0 0 0 1px var(--line);
}

.person__name {
	font-family: var(--serif);
	font-size: 1.375rem;
	line-height: 1.25;
	color: var(--ink);
}

.person__role {
	color: var(--muted);
	font-size: 0.9375rem;
}

.person__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: 10px;
}

.person__contact a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	overflow-wrap: anywhere;
}

/* Sand info boxes in a grid (opening hours, addresses), and the sidebar
   help card on Hyresgästinfo pages */

.info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.help-card,
.info-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 24px;
	border-radius: var(--r-md);
	background: var(--sand);
}

.help-card h2,
.info-card h2,
.info-card h3 {
	font-size: 1.375rem;
}

.help-card p,
.info-card p {
	font-size: 0.9375rem;
	color: var(--text);
}

.help-card .phone,
.info-card .phone {
	font-weight: 700;
	font-size: 1.125rem;
}

/* Områden page */

.area-list {
	display: flex;
	flex-direction: column;
	gap: 72px;
	padding-top: 72px;
}

.area--reverse .split__media {
	order: 2;
}

.area .split__image {
	aspect-ratio: 4 / 3;
}

.area .split__text > p:not(.eyebrow) {
	color: var(--text);
	font-size: 1.125rem;
}

/* Sand note with an icon. Put the text in a <p>, or several in a <div>. */
.note {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	width: 100%;
	padding: 20px 22px;
	border-radius: var(--r-sm);
	background: var(--sand);
	color: var(--text);
	font-size: 1rem;
	line-height: 1.6;
}

.note svg {
	flex: none;
	margin-top: 2px;
	color: var(--muted);
}

.note > div {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.note a {
	font-weight: 700;
}

/* Dark surfaces: full-width panel and the in-article callout. Both set the
   focus ring to white. */

.site-footer,
.dark-panel,
.dark-callout {
	--focus: #fff;
}

.dark-panel {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	align-items: center;
	justify-content: space-between;
	padding: 48px 56px;
	border-radius: var(--r-lg);
	background: var(--ink);
	color: var(--footer-text);
}

.dark-panel__text {
	display: flex;
	flex: 1 1 520px;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.dark-panel__text p:not(.eyebrow) {
	max-width: 40em;
}

.dark-panel h2 {
	color: #fff;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.dark-panel .eyebrow {
	color: var(--on-dark-muted);
}

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

.dark-panel .fine-print,
.dark-callout .fine-print {
	color: var(--on-dark-muted);
}

.dark-panel a:not(.btn),
.dark-callout a:not(.btn) {
	color: #fff;
}

.dark-callout {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	border-radius: var(--r-md);
	background: var(--ink);
	color: var(--footer-text);
}

.dark-callout h2 {
	color: #fff;
	font-size: 1.875rem;
}

.dark-callout .btn-row {
	margin-top: 4px;
}

/* Hyresgästinfo pages: article + sidebar (subnav and help card).
   The article comes first in the HTML, so keyboard and screen-reader order
   matches the phone layout, where the sidebar sits under the article. From
   901px grid placement moves the sidebar into the left column. */

.with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	padding-block: 56px 112px;
}

.sidebar {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.subnav {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
}

.subnav h2 {
	padding: 0 14px 8px;
	font: 700 0.8125rem var(--sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--link);
}

.subnav ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.subnav a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 4px 14px;
	border-radius: 12px;
	color: var(--ink);
	font-size: 1rem;
	line-height: 1.3;
	text-decoration: none;
}

.subnav a:hover {
	background: var(--sand);
}

.subnav a[aria-current] {
	background: var(--ink);
	color: #fff;
	font-weight: 600;
}

/* Running text. Sections inside are spaced 48px apart, and their children
   16px apart. */

.prose {
	display: flex;
	flex-direction: column;
	gap: 48px;
	min-width: 0;
	color: var(--text);
	line-height: 1.7;
}

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

/* 26px on phones, 32px from about 1024px */
.prose h2 {
	font-size: clamp(1.625rem, 1.25rem + 1vw, 2rem);
	line-height: 1.2;
}

.prose h3 {
	font: 700 1.125rem/1.4 var(--sans);
	color: var(--ink);
}

/* Sand info cards keep their serif title inside running text too, like
   .help-card and the info cards on Kontakt */
.prose .info-card h3 {
	font: 400 1.375rem/1.15 var(--serif);
}

.prose section > h3:not(:first-child) {
	margin-top: 8px;
}

/* About 70 characters per line */
.prose p,
.prose li {
	max-width: 38em;
}

.prose strong {
	color: var(--ink);
}

/* Plain lists (ones without a class) get bullets or numbers */
.prose :where(ul, ol):not([class]) {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding-left: 1.4em;
}

.prose :where(ul:not([class])) > li::marker {
	color: var(--taupe);
}

/* List with check marks, e.g. what to include in a fault report */
.checklist {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.checklist li {
	position: relative;
	padding-left: 36px;
}

.checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 24px;
	height: 24px;
	border-radius: var(--r-pill);
	background: var(--sand) var(--icon-check) no-repeat center / 16px;
}

/* Tables scroll sideways inside their frame on narrow screens. Give the
   wrapper tabindex="0", role="region" and an aria-label so keyboard users
   can scroll it. */
.table-wrap {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: #fff;
}

.table-wrap table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
	line-height: 1.5;
}

.table-wrap caption {
	padding: 14px 18px 12px;
	color: var(--ink);
	font-weight: 700;
	text-align: left;
}

.table-wrap th,
.table-wrap td {
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.table-wrap thead th {
	background: var(--sand);
	color: var(--ink);
	font-weight: 700;
}

.table-wrap tbody th {
	color: var(--ink);
	font-weight: 600;
}

.table-wrap tbody tr:last-child > * {
	border-bottom: 0;
}

/* Short two-column table (label and number): about as wide as its content,
   so each number sits near its label. 30rem = 480px. */
.table-wrap--narrow {
	max-width: 30rem;
}

/* Prices and other numbers: right-aligned, never split */
.table-wrap .num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Fold-out sections: <div class="accordion"><details><summary>Rubrik</summary>
   <div class="accordion__body">…</div></details>…</div>. Keep the summary
   plain text (no heading inside). */
.accordion {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.accordion details {
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: #fff;
}

.accordion summary {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	padding: 12px 20px;
	border-radius: var(--r-sm);
	color: var(--ink);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

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

.accordion summary::after {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: var(--icon-chevron) no-repeat center / contain;
	mask: var(--icon-chevron) no-repeat center / contain;
	transition: transform 0.15s;
}

.accordion summary:hover {
	background: var(--sand);
}

.accordion details[open] > summary {
	border-radius: var(--r-sm) var(--r-sm) 0 0;
}

.accordion details[open] > summary::after {
	transform: rotate(180deg);
}

.accordion__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 20px 20px;
}

/* Content blocks: due-date box, option cards, download link and numbered
   steps (first made for Hyra, now used across the tenant pages) */

.due {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
}

.due__badge {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 112px;
	height: 112px;
	border-radius: var(--r-md);
	background: var(--taupe);
	color: var(--ink);
	text-align: center;
}

.due__badge small {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.due__badge span {
	font-family: var(--serif);
	font-size: 1.375rem;
	line-height: 1.2;
}

.due p {
	flex: 1 1 300px;
	min-width: 0;
}

/* Option cards in a two-column grid */
.options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.option {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
	font-size: 1rem;
}

.option h3 {
	font: 700 1.125rem var(--sans);
}

/* Optional picture at the top of an option card. An icon is a square
   pictogram (64px, e.g. the waste-sorting labels on Trivselregler) and gets a
   little more room below it than the card's 6px gap. A photo fills the card
   width, also when the card is wider than the file. */
.option__icon {
	margin-bottom: 8px;
}

.option__photo {
	width: 100%;
	border-radius: var(--r-sm);
}

.options-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
}

.options-foot p {
	font-size: 0.9375rem;
	color: var(--muted);
}

/* Link to a file, with a download icon */
.download {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-weight: 600;
}

.download svg {
	flex: none;
}

/* Numbered steps */
.steps {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.steps li {
	display: flex;
	gap: 20px;
	counter-increment: step;
}

.steps li::before {
	content: counter(step);
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--r-pill);
	background: var(--sand);
	color: var(--ink);
	font-weight: 700;
	line-height: 1;
}

.steps h3 {
	font: 700 1.0625rem/1.6 var(--sans);
}

/* Footer */

.site-footer {
	background: var(--footer);
	color: var(--footer-text);
}

.site-footer .container {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding-block: 72px 32px;
}

.footer-cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
}

.footer-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.9375rem;
}

.footer-col h2 {
	font: 700 1.0625rem var(--sans);
	color: #fff;
}

.footer-col .footer-name {
	font-family: var(--serif);
	font-size: 1.625rem;
	line-height: 1.3;
	color: #fff;
}

.footer-col p {
	color: var(--footer-muted);
	line-height: 1.7;
}

.footer-col ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 36px-tall tap targets: easier to hit than the 24px text line, without
   spreading the link list out */
.footer-col > a,
.footer-col ul a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
}

.site-footer a {
	color: var(--footer-text);
	text-decoration: none;
}

.site-footer p a {
	text-decoration: underline;
}

.site-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.site-footer .phone {
	font-weight: 700;
	font-size: 1.125rem;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.875rem;
	color: var(--footer-muted);
}

/* 404 page */

.not-found {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 50rem;
}

/* ===== Responsive ===== */

/* Wide screens: the left branch sits in the empty side margin, bottom left
   of the hero. It must never be behind text, links or the shortcut cards
   (its white flowers make dark text hard to read), so it is scaled to the
   margin and its flower tips stop at the container's outer edge, a gutter
   (24px) short of the content:
     margin = (100% − 1200px) / 2, where 100% is the hero's width: the page
       without its scrollbar (100vw would count a Windows scrollbar)
     the flowers fill the left 303px of the 616 × 325px image, so
     image width = margin × 616 / 303
   It grows with the window, from about 130px tall at 1440 to its full
   320px (as tall as the right branch; 616 × 320 / 325 = 606.5px wide) at
   about 1800px. Below 1440 the margin only has room for a few loose
   flowers, so the branch is left out. */
@media (min-width: 1440px) {
	.hero {
		background:
			url("/img/tree-right.png") no-repeat right top / auto 320px,
			url("/img/tree-left.png") no-repeat left bottom / min(616px * 320 / 325, (50% - var(--max) / 2) * 616 / 303) auto,
			var(--taupe);
	}
}

@media (min-width: 901px) {
	.with-sidebar {
		grid-template-columns: 300px minmax(0, 1fr);
	}

	.with-sidebar > .sidebar {
		grid-column: 1;
		grid-row: 1;
	}

	.with-sidebar > :not(.sidebar) {
		grid-column: 2;
		grid-row: 1;
	}
}

/* 240px sidebar: less padding so "Tillgänglighetsredogörelse" (about 190px)
   fits on one line: 240 − 2 (border) − 2×12 − 2×10 = 194px */
@media (min-width: 901px) and (max-width: 1100px) {
	.with-sidebar {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 40px;
	}

	.subnav {
		padding: 12px;
	}

	.subnav h2 {
		padding-inline: 10px;
	}

	.subnav a {
		padding-inline: 10px;
	}
}

/* Stat boxes become compact rows (value, then label) so "ISO 14001" never
   spills out of a narrow box. At 768 "ISO 14001 miljöcertifiering" needs
   about 270px; the column is 336px. */
@media (max-width: 1100px) {
	.stats {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.stats div {
		flex-direction: row-reverse;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: baseline;
		column-gap: 12px;
		padding: 10px 18px;
	}
}

@media (max-width: 1024px) {
	.shortcut-grid,
	.area-grid,
	.tile-grid,
	.footer-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Compact row-style shortcut cards: icon on the left, title and text on
	   the right */
	.shortcut {
		display: grid;
		grid-template-columns: 52px minmax(0, 1fr);
		column-gap: 16px;
		row-gap: 2px;
		align-items: center;
		/* A card stretched to its row neighbour's height keeps title and
		   text together, centred, instead of sharing out the extra height */
		align-content: center;
		padding: 18px 20px;
	}

	.shortcut__icon {
		grid-row: span 2;
	}

	.shortcut__title {
		font-size: 1.125rem;
	}

	.shortcut__text {
		font-size: 0.9375rem;
	}
}

/* Smaller page-hero branch on tablets; it then reaches about 124px in from
   the right, and a 32em lead (608px) stays clear of it at 768 */
@media (min-width: 761px) and (max-width: 1024px) {
	.page-hero {
		background-size: auto 150px, auto;
	}

	.page-hero .lead {
		max-width: 32em;
	}
}

/* Collapsible menu. Below 961px the full menu no longer fits on one row
   (see the width math at .site-nav). Without JavaScript (no .js class) the
   menu simply stays open under the logo. */
@media (max-width: 960px) {
	.js .menu-toggle {
		display: inline-flex;
	}

	.site-nav {
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-bottom: 12px;
	}

	.js .site-nav {
		display: none;
	}

	.js .site-nav.is-open {
		display: flex;
	}

	.site-nav__list {
		flex-direction: column;
	}

	.site-nav__link {
		display: flex;
		min-height: 48px;
		padding: 0 16px 0 20px;
		border-radius: var(--r-sm);
		font-size: 1.0625rem;
	}

	/* Current item: sand background plus a bar on the left */
	.site-nav__link[aria-current] {
		background: var(--sand);
	}

	.site-nav__link[aria-current]::after {
		left: 6px;
		right: auto;
		top: 12px;
		bottom: 12px;
		width: 4px;
		height: auto;
	}

	.site-nav__mina-sidor {
		min-height: 48px;
		margin: 8px 0 0;
		padding: 8px 16px 0 20px;
		border-left: 0;
		border-top: 1px solid var(--line);
		color: var(--ink);
		font-size: 1.0625rem;
	}

	.site-nav__cta {
		margin: 12px 0 0;
	}

	.site-nav__akut {
		display: flex;
		gap: 12px;
		align-items: center;
		min-height: 52px;
		margin-top: 12px;
		padding: 10px 18px;
		border-radius: var(--r-sm);
		background: var(--sand);
		color: var(--ink);
		font-weight: 700;
		line-height: 1.35;
		text-decoration: none;
	}

	.site-nav__akut svg {
		flex: none;
	}

	/* The link is a tel: link, which never wraps (a[href^="tel:"]). Its text
	   is two lines on phones, so it wraps again here; the time and the
	   number are kept whole by .nowrap. */
	.site-nav__akut > span {
		white-space: normal;
	}

	.site-nav__akut:hover {
		color: var(--ink);
		text-decoration: underline;
	}
}

@media (max-width: 900px) {
	.hero .container {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero__slideshow {
		aspect-ratio: 16 / 9;
	}

	/* Hyresgästinfo: the subnav sits under the article, its groups flowed
	   into balanced columns (three at 768, one on phones) */
	.subnav {
		display: block;
		padding-bottom: 0;
		columns: 200px;
		column-gap: 24px;
	}

	.subnav__group {
		break-inside: avoid;
		padding-bottom: 20px;
	}

	.page-hero__more {
		display: inline-flex;
	}
}

/* Tablet portrait: one-column hero with a 120px branch above the text */
@media (min-width: 761px) and (max-width: 900px) {
	.hero {
		background: url("/img/tree-right.png") no-repeat right top / auto 120px, var(--taupe);
	}

	.hero .container {
		gap: 40px;
		padding-block: 112px 136px;
	}

	.hero .lead {
		max-width: 32em;
	}

	.hero h1 {
		font-size: 2.75rem;
	}
}

/* Phone */
@media (max-width: 760px) {
	:root {
		--gutter: 16px;
	}

	.logo img {
		height: 64px;
	}

	/* Small branch above the text so it never sits on the headline */
	.hero {
		background: url("/img/tree-right.png") no-repeat right top / auto 96px, var(--taupe);
	}

	.hero .container {
		gap: 32px;
		padding-block: 104px 112px;
	}

	.split {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.area--reverse .split__media {
		order: 0;
	}

	.page-hero {
		background: url("/img/tree-right.png") no-repeat right top / auto 72px, var(--taupe);
	}

	/* Keeps the breadcrumbs under the 72px branch */
	.page-hero .container {
		padding-top: 64px;
	}

	.section {
		padding-top: 72px;
	}

	.area-list {
		gap: 56px;
		padding-top: 48px;
	}

	.dark-panel {
		padding: 32px 24px;
	}

	.dark-callout {
		padding: 28px 24px;
	}

	.page-content {
		gap: 56px;
		padding-top: 40px;
	}

	.with-sidebar {
		padding-top: 40px;
	}
}

/* Large phones and small tablets: shortcut text runs under the icon row */
@media (min-width: 520px) and (max-width: 760px) {
	.shortcut {
		grid-template-columns: 44px minmax(0, 1fr);
		row-gap: 10px;
		padding: 16px 18px;
	}

	.shortcut__icon {
		grid-row: auto;
		width: 44px;
		height: 44px;
	}

	.shortcut__text {
		grid-column: 1 / -1;
	}
}

@media (max-width: 519px) {
	/* Buttons that wrap fill the row, so stacked buttons are equally wide */
	.btn-row > .btn {
		flex: 1 1 auto;
	}

	.shortcut-grid,
	.area-grid,
	.tile-grid,
	.footer-cols,
	.options {
		grid-template-columns: minmax(0, 1fr);
	}

	.footer-cols {
		gap: 32px;
	}

	.akut {
		padding: 18px 18px 20px;
	}

	.akut__list {
		padding-left: 0;
	}

	/* Less side padding in table cells, so the widest tables (Prislista,
	   Uthyrningspolicy, Trygghet) fit a 320px phone without scrolling */
	.table-wrap th,
	.table-wrap td,
	.table-wrap caption {
		padding-inline: 12px;
	}

	.facts {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	.facts dd + dt {
		margin-top: 8px;
	}

	/* Less padding round an embedded form, so the vendor form gets the
	   width (its "Ange mobilnummer" placeholder is cut off at 24px) */
	.embed {
		padding: 12px;
	}

	/* People cards with a photo (Kontakt): a 72px photo to the left of the
	   name, role and contact rows, so a card is about 190px tall instead of
	   300. Cards without a photo (the board on Om oss) stay stacked. */
	.person:has(> .person__photo) {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: 16px;
		align-content: start;
		padding: 20px;
	}

	.person:has(> .person__photo) > * {
		grid-column: 2;
	}

	.person:has(> .person__photo) > .person__photo {
		grid-column: 1;
		grid-row: 1 / span 3;
		width: 72px;
		height: 72px;
		margin-bottom: 0;
	}
}

/* Small phones: a 64px branch and less empty taupe above the text */
@media (max-width: 479px) {
	.hero {
		background: url("/img/tree-right.png") no-repeat right top / auto 64px, var(--taupe);
	}

	.hero .container {
		padding-top: 64px;
	}
}

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

/* Windows high-contrast mode: keep the CSS-drawn icons visible */
@media (forced-colors: active) {
	.external::after,
	.accordion summary::after {
		background-color: CanvasText;
		forced-color-adjust: none;
	}
}

/* ===== Print: black on white, no menus, phone numbers kept ===== */

@media print {
	*,
	*::before,
	*::after {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
	}

	body {
		font-size: 11pt;
	}

	.skip-link,
	.menu-toggle,
	.site-nav,
	.jump-links,
	.page-hero__more,
	.subnav,
	.status,
	.embed,
	.hero__slideshow,
	.area-card img,
	.split__media,
	.btn svg {
		display: none !important;
	}

	.site-header {
		border: 0;
	}

	.hero .container,
	.page-hero .container,
	.with-sidebar,
	.split,
	.site-footer .container {
		display: block;
		padding-block: 12pt;
	}

	.shortcuts {
		margin-top: 0;
	}

	.akut,
	.note,
	.dark-panel,
	.dark-callout,
	.help-card,
	.info-card,
	.card,
	.option,
	.due {
		border: 1px solid #000 !important;
		break-inside: avoid;
	}

	.btn {
		min-height: 0;
		padding: 0;
		border: 0;
		justify-content: flex-start;
		text-decoration: underline;
	}

	/* Show where links go when the label doesn't say it ("Mejla oss",
	   "Mina sidor") */
	main a[href^="http"]::after,
	.btn[href^="mailto:"]::after,
	.btn[href^="tel:"]::after {
		content: " (" attr(href) ")";
		font-weight: 400;
		-webkit-mask: none;
		mask: none;
		width: auto;
		height: auto;
	}

	.footer-cols {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12pt;
	}

	.footer-col nav,
	nav.footer-col {
		display: none;
	}

	/* The on-screen check mark is a background, which the reset above
	   removes. Print an empty square instead, so a checklist (Utflyttning:
	   "Checklista för flyttstädningen") can be ticked off by hand. */
	.checklist li::before {
		top: 0.35em;
		width: 14px;
		height: 14px;
		border: 1.5px solid #000;
		border-radius: 0;
	}

	h1,
	h2,
	h3 {
		break-after: avoid;
	}
}