/* Locality, designkoncept. One stylesheet; replaces site.css, v2.css and advisory.css.
   Compact mode (.is-compact, set in <head>, or .no-js) = pre-rendered city instead of WebGL. */

@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/familjen-400.woff2?v=0d43e3823d) format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/familjen-500.woff2?v=0c15b1a41b) format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/familjen-600.woff2?v=07a2f79c1c) format("woff2"); }
/* Newsreader (Production Type, SIL OFL 1.1, se fonts/newsreader-OFL.txt): variabel vikt och optisk storlek. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/newsreader-latin.woff2?v=6e4f2958c3) format("woff2-variations"), url(../fonts/newsreader-latin.woff2?v=6e4f2958c3) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/newsreader-latin-ext.woff2?v=45683de03d) format("woff2-variations"), url(../fonts/newsreader-latin-ext.woff2?v=45683de03d) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #eceeee;
  --paper-hi: #f6f7f7;
  --ink: #1c2331;
  --ink-2: #4b5567;
  --ink-3: #5e6778;
  --slate: #8d99ae;
  --slate-deep: #3d4a5f;
  --vacancy: #4a5a76;          /* kommande vakanser i utbudsvyn, samma som COL.hidden i city.js */
  --line: rgba(28, 35, 49, 0.16);
  --line-strong: rgba(28, 35, 49, 0.42);
  --field: #767f8d;            /* 3.8:1 against --paper-hi, 3.5:1 against --paper */
  --error: #9c3026;
  --focus: #1c2331;
  --night-text: #e7eaef;
  --night-2: #c1c8d3;
  --night-line: rgba(231, 234, 239, 0.18);

  --font: "Familjen Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --gutter: clamp(20px, 4.2vw, 64px);
  --col-gap: clamp(16px, 2vw, 28px);
  --nav-h: 76px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg, canvas, picture { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
p, figure, blockquote { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
.menu-open { overflow: hidden; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.btn:focus-visible { outline-offset: 4px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: var(--paper-hi); padding: 12px 16px; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1480px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------------------------------------------------------------- type */
.h2 {
  font-size: clamp(34px, 3.9vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: balance;
}
.h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.012em; font-weight: 600; }
.lead { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; letter-spacing: -0.005em; max-width: 34em; text-wrap: pretty; }
.fine { font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 13px 24px;
  border: 1px solid transparent; border-radius: 2px;
  font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; text-align: center;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.btn--ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--slate-deep); border-color: var(--slate-deep); }
.btn--paper { background: var(--paper-hi); color: var(--ink); }
.btn--paper:hover { background: #fff; }

.text-link, .hero__more, .hero__landlord, .situation__link, .team__phone, .person__email {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color 0.2s;
}
.text-link:hover, .hero__more:hover, .hero__landlord:hover, .situation__link:hover, .team__phone:hover, .person__email:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h);
  background: var(--paper); box-shadow: 0 1px 0 var(--line);
  transition: background-color 0.3s, box-shadow 0.3s;
}
/* No backdrop-filter here: it would become the containing block for the fixed mobile menu. */
.js:not(.is-compact) .nav:not(.is-solid) { background: transparent; box-shadow: none; }
.nav__inner { height: 100%; display: flex; align-items: center; gap: 36px; }
.nav__logo { display: flex; align-items: center; width: 124px; min-height: 44px; color: #000; flex: none; }
.nav__logo svg { width: 100%; height: auto; }
.nav__links { display: flex; gap: 26px; font-size: 15.5px; }
.nav__links a { position: relative; padding-block: 12px; text-decoration: none; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__end { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav__phone { font-size: 15.5px; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; padding-block: 12px; }
.nav__phone:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.nav__burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; flex: none; }
.nav__burger i { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform 0.3s var(--ease); }
.nav__burger i:nth-of-type(1) { top: 18px; }
.nav__burger i:nth-of-type(2) { top: 25px; }
.nav__burger[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:nth-of-type(2) { transform: translateY(-3.5px) rotate(-45deg); }
/* Utan JavaScript går menyn inte att öppna: knappen döljs, sidorna nås via sidfoten och länkarna på sidan. */
.no-js .nav__burger { display: none !important; }

.menu { position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; background: var(--paper); z-index: 49; overflow: auto; }
.menu__links { display: flex; flex-direction: column; padding-top: 16px; padding-bottom: 40px; }
.menu__links > a { display: flex; align-items: center; min-height: 64px; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; border-bottom: 1px solid var(--line); }
.menu__links > a:last-of-type { font-size: 20px; font-weight: 500; }
.menu__contact { display: flex; flex-direction: column; margin-top: 20px; font-size: 18px; }
.menu__contact a { display: flex; align-items: center; min-height: 44px; }

/* ---------------------------------------------------------------- stage: 3D mode */
.stage { position: relative; height: 240vh; height: 240svh; }
.stage__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--paper); }
.stage__poster, .stage__poster img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* I sidled på 72 %: där ligger 3D-kamerans mittpunkt, eftersom vyn är förskjuten 22 % åt höger (HERO.shift i
   site.js). Med den breda bilden (hero-scen, 12:5) får bilden då samma utsnitt som 3D-modellen i alla
   fönsterbredder upp till 12:5 (2 oktober 2026). */
.stage__poster img { object-fit: cover; object-position: 72% 50%; transition: opacity 0.6s; }
.stage.is-ready .stage__poster img { opacity: 0; }
.stage__canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease; }
.stage.is-ready .stage__canvas { opacity: 1; }
.stage.is-fallback .stage__canvas { display: none; }
/* Den sista bildrutan från 3D-modellen när startsidan kommer tillbaka ur bakåtcachen (site.js, releaseCity). */
.stage__still { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.stage__veil {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(236, 238, 238, 0.98) 0%, rgba(236, 238, 238, 0.93) 26%, rgba(236, 238, 238, 0.6) 44%, rgba(236, 238, 238, 0) 62%),
    linear-gradient(180deg, rgba(236, 238, 238, 0.7) 0%, rgba(236, 238, 238, 0) 18%);
}

.hero { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + clamp(32px, 9vh, 104px)); z-index: 3; }
.hero__title {
  max-width: 11.2em;
  font-size: clamp(46px, 5.4vw, 86px);
  line-height: 1.02;
  letter-spacing: -0.038em;
  font-weight: 600;
  text-wrap: balance;
}
.hero__lead { margin-top: clamp(20px, 3vh, 30px); max-width: 29em; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.5; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: clamp(22px, 3.4vh, 34px); }
.hero__more { font-size: 16px; }
.hero__landlord { margin-top: 10px; font-size: 15px; color: var(--ink-2); }

/* FÖRSLAG 2026-09-30 (efter Kreas startsida): tre skäl med bevis, två knappar, kostnaden och
   kundlogotyper i första skärmen. */
.hero__checks { display: grid; gap: 10px; max-width: 32em; margin-top: clamp(18px, 2.8vh, 28px); font-size: clamp(16.5px, 1.2vw, 18px); line-height: 1.42; }
.hero__checks li { position: relative; padding-left: 30px; }
.hero__checks li::before { content: ""; position: absolute; left: 3px; top: 0.34em; width: 13px; height: 7px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.hero__checks strong { font-weight: 600; }
.hero__checks span { color: var(--ink-2); }
.hero__checks span strong { color: var(--ink); }
.btn--line { background: rgba(247, 248, 248, 0.7); border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--paper-hi); }
/* Sök lokal (6 oktober 2026): lite tydligare än en vanlig kantknapp, utan att ta över från "Boka ett
   kort samtal": vit, en mjuk skugga och en pil som flyttar sig när man pekar på knappen. */
.hero__search { gap: 10px; background: #fff; box-shadow: 0 14px 26px -18px rgba(28, 35, 49, 0.55); transition: background-color 0.2s, box-shadow 0.2s; }
.hero__search::after { content: "→"; content: "→" / ""; transition: transform 0.2s var(--ease); }
.hero__search:hover { background: #fff; box-shadow: 0 16px 30px -16px rgba(28, 35, 49, 0.6); }
.hero__search:hover::after { transform: translateX(3px); }
.hero__cost { margin-top: 16px; font-size: 16px; color: var(--ink-2); }
.hero__cost a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.hero__proof { margin-top: clamp(22px, 3.4vh, 36px); }
.hero__proof p { font-size: 13px; color: var(--ink-3); }
.hero__proof ul { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 10px; }
.hero__proof img { display: block; width: auto; max-width: 112px; height: 24px; object-fit: contain; object-position: left center; filter: grayscale(1); mix-blend-mode: multiply; opacity: 0.8; }

.utbud { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; padding-top: var(--nav-h); pointer-events: none; }
.utbud__map { display: none; margin: 0; }
.utbud__img { display: block; }
.utbud__img img { width: 100%; height: 100%; object-fit: cover; }
.utbud__img--all { display: none; }
.stage.show-hidden .utbud__img--ad { display: none; }
.stage.show-hidden .utbud__img--all { display: block; }
.utbud__panel {
  position: relative;
  width: min(470px, 40vw);
  margin-left: var(--gutter);
  padding: 32px;
  background: var(--paper-hi);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(28, 35, 49, 0.35);
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.utbud.is-on .utbud__panel { opacity: 1; transform: none; pointer-events: auto; }
.utbud__title { font-size: clamp(28px, 2.3vw, 36px); }
.utbud__panel > p:not([class]) { margin-top: 14px; font-size: 16px; color: var(--ink-2); }
.seg { display: flex; margin-top: 22px; padding: 3px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); }
.seg__btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; border: 0; background: none; padding: 8px 12px; font-size: 15px; text-align: center; text-wrap: balance; cursor: pointer; color: var(--ink-2); transition: background-color 0.2s, color 0.2s; }
.seg__btn:not([aria-pressed="true"]):hover { background: var(--paper-hi); color: var(--ink); }
.seg__btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
/* Markeringen i "Lokaler vi känner till" (17 oktober 2026): som huvudet på en dold nål, med samma
   pulserande ring tills knappen har använts en gång (.has-shown, site.js). */
.seg__mark { position: relative; flex: none; width: 8px; height: 8px; background: var(--vacancy); }
.seg__mark::after { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 1.5px solid var(--vacancy); animation: ring 2.4s var(--ease) infinite; }
.seg__btn[aria-pressed="true"] .seg__mark { box-shadow: 0 0 0 2px var(--paper-hi); }
.seg__btn[aria-pressed="true"] .seg__mark::after, .stage.has-shown .seg__mark::after { display: none; }
.utbud__note { margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--ink-3); }

/* desktop without WebGL: the rendered map fills the stage behind the panel */
.stage.is-fallback .utbud__map { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity 0.5s; }
.stage.is-fallback .utbud__img, .stage.is-fallback .utbud__img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.stage.is-fallback .utbud.is-on .utbud__map { opacity: 1; }

.stage__meta { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 5; font-size: 13px; color: var(--ink-2); pointer-events: none; }
.stage__meta span { display: inline-block; background: rgba(236, 238, 238, 0.85); padding: 3px 8px; margin-left: -8px; }

/* Scrolla vidare (17 oktober 2026): längst ned i mitten medan utbudsvyn står still (.stage.is-more, site.js).
   Linjen i nederkanten fylls när man scrollar (--p, 0–1) och pilen rör sig lite nedåt. */
.stage__more {
  position: absolute; left: 50%; bottom: 18px; z-index: 5;
  display: flex; align-items: center; gap: 12px; padding: 11px 18px 12px;
  font-size: 14px; line-height: 1; color: var(--ink); cursor: pointer; user-select: none;
  background: rgba(246, 247, 247, 0.92); box-shadow: 0 0 0 1px var(--line), 0 12px 24px -16px rgba(28, 35, 49, 0.45);
  opacity: 0; transform: translate(-50%, 10px); pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), background-color 0.2s;
}
.stage.is-more .stage__more { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.stage__more:hover { background: #fff; }
.stage__more-arrow { width: 7px; height: 7px; margin-top: -4px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); animation: more-nudge 1.8s var(--ease) infinite; }
@keyframes more-nudge { 0%, 100% { translate: 0 -1px; } 50% { translate: 0 3px; } }
.stage__more-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform: scaleX(var(--p, 0)); transform-origin: left center; }

/* pins projected from the 3D model (supply view only) */
.pins { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; }
.pin { position: absolute; left: 0; top: 0; will-change: transform; transition: opacity 0.4s; }
.pin.is-off { opacity: 0; }
.pin__stem { position: absolute; left: 0; bottom: 0; width: 1px; height: 16px; background: var(--ink); }
.pin__head { position: absolute; left: -4px; bottom: 14px; width: 9px; height: 9px; background: var(--ink); }
.pin--hid .pin__head { background: var(--vacancy); box-shadow: 0 0 0 2px var(--paper-hi); }
.pin--hid .pin__stem { background: var(--slate-deep); }
.pin--hid .pin__head::after {
  content: ""; position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px; border: 1.5px solid var(--vacancy);
  animation: ring 2.4s var(--ease) infinite; animation-delay: var(--d, 0s);
}
@keyframes ring { 0% { transform: scale(0.6); opacity: 1; } 80%, 100% { transform: scale(1.9); opacity: 0; } }

/* Skenet när "Lokaler vi känner till" lägger till de dolda lokalerna (29 september 2026): ett
   kort ljus runt varje ny nål, i tur och ordning från vänster (--s, 28 ms isär). En vit kärna med en
   halo i vattnets slate syns både mot de ljusa husen och mot vattnet; stjärnglimten har en tunn skugga
   så att den syns mot vitt. På dator sitter skenet i nålen (.pin__glow, site.js), på de förrenderade
   bilderna över bilden (.utbud__glow, lägena från scripts/render-supply.mjs). */
.pin__glow, .utbud__glow { position: absolute; width: 88px; height: 88px; margin: -44px 0 0 -44px; pointer-events: none; }
.utbud__glow { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.pin__glow { left: 0.5px; top: -18.5px; }
.pin__glow::before, .pin__glow::after, .utbud__glow::before, .utbud__glow::after { content: ""; position: absolute; inset: 0; opacity: 0; }
.pin__glow::before, .utbud__glow::before {
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 5%, rgba(255, 255, 255, 0.85) 11%, rgba(141, 153, 174, 0.5) 24%, rgba(141, 153, 174, 0.16) 44%, rgba(141, 153, 174, 0) 68%);
}
.pin__glow::after, .utbud__glow::after {
  inset: 10px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 50%, rgba(255, 255, 255, 0) 100%) center / 100% 1.5px no-repeat,
    linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #fff 50%, rgba(255, 255, 255, 0) 100%) center / 1.5px 100% no-repeat;
  filter: drop-shadow(0 0 1.5px rgba(28, 35, 49, 0.55));
}
.pin.is-shine { transition-duration: 0.15s; }
.pin.is-shine .pin__glow::before, .stage.is-shining .utbud__glow::before { animation: shine-halo 0.62s cubic-bezier(0.16, 0.84, 0.3, 1) var(--s, 0ms) both; }
.pin.is-shine .pin__glow::after, .stage.is-shining .utbud__glow::after { animation: shine-glint 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--s, 0ms) + 40ms) both; }
@keyframes shine-halo { 0% { opacity: 0; transform: scale(0.25); } 22% { opacity: 1; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes shine-glint { 0% { opacity: 0; transform: scale(0.1) rotate(-30deg); } 35% { opacity: 1; transform: scale(1) rotate(0deg); } 100% { opacity: 0; transform: scale(0.3) rotate(45deg); } }
.utbud__glows { position: absolute; inset: 0; z-index: 1; display: none; pointer-events: none; }
.is-compact .utbud__map { position: relative; }
.is-compact .utbud__glows { display: block; }

/* ---------------------------------------------------------------- stage: compact mode (static city) */
:is(.is-compact, .no-js) .stage { height: auto; --hero-h: max(660px, 94svh); }
:is(.is-compact, .no-js) .stage__sticky { position: relative; height: auto; overflow: hidden; }
:is(.is-compact, .no-js) .stage__canvas, :is(.is-compact, .no-js) .stage__still, :is(.is-compact, .no-js) .pins, :is(.is-compact, .no-js) .stage__more { display: none; }
:is(.is-compact, .no-js) .stage__poster, :is(.is-compact, .no-js) .stage__poster img { height: var(--hero-h); }
:is(.is-compact, .no-js) .stage__poster img { opacity: 1 !important; object-position: 55% bottom; }
:is(.is-compact, .no-js) .stage__veil {
  bottom: auto; height: var(--hero-h);
  background: linear-gradient(180deg, rgba(236, 238, 238, 0.98) 0%, rgba(236, 238, 238, 0.94) 44%, rgba(236, 238, 238, 0.78) 60%, rgba(236, 238, 238, 0) 76%, rgba(236, 238, 238, 0) 86%, #eceeee 100%);
}
:is(.is-compact, .no-js) .hero { position: relative; top: auto; min-height: var(--hero-h); padding-top: calc(var(--nav-h) + clamp(28px, 6vh, 64px)); padding-bottom: 40px; }
/* De små länkarna under knappen (30 september 2026): slöjan ovan följer skärmens höjd, så på en
   kort mobilskärm (Safari med verktygsfälten) tonar den ut just där länkarna står. Därför ett eget lager
   i papperstonen som hänger på "För fastighetsägare": det täcker från strax ovanför knappen till en bit
   under länken och tonar sedan ut, hur texten än bryts. Stadsbilden syns under länkarna. */
:is(.is-compact, .no-js) .hero__landlord { position: relative; color: var(--ink); }
:is(.is-compact, .no-js) .hero__proof { position: relative; }
:is(.is-compact, .no-js) .hero__proof::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -260px; bottom: -56px; left: calc(-1 * var(--gutter)); width: 100vw;
  background: linear-gradient(180deg, rgba(236, 238, 238, 0) 0, rgba(236, 238, 238, 0.94) 72px, rgba(236, 238, 238, 0.94) calc(100% - 56px), rgba(236, 238, 238, 0) 100%);
}
:is(.is-compact, .no-js) .hero__landlord::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -170px; bottom: -64px; left: calc(-1 * var(--gutter)); width: 100vw;
  background: linear-gradient(180deg, rgba(236, 238, 238, 0) 0, rgba(236, 238, 238, 0.92) 64px, rgba(236, 238, 238, 0.92) calc(100% - 64px), rgba(236, 238, 238, 0) 100%);
}
:is(.is-compact, .no-js) .utbud {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 var(--col-gap); align-items: center;
  padding: clamp(56px, 7vw, 96px) var(--gutter) 24px; pointer-events: auto; background: var(--paper);
}
:is(.is-compact, .no-js) .utbud__map { display: block; box-shadow: 0 0 0 1px var(--line); aspect-ratio: 1200 / 1040; overflow: hidden; background: var(--paper-hi); }
:is(.is-compact, .no-js) .utbud__img, :is(.is-compact, .no-js) .utbud__img img { height: 100%; }
:is(.is-compact, .no-js) .utbud__panel { width: auto; margin: 0; padding: 0 0 0 clamp(0px, 2vw, 24px); background: none; box-shadow: none; opacity: 1; transform: none; pointer-events: auto; }
:is(.is-compact, .no-js) .stage__meta { position: static; padding-bottom: 8px; }
:is(.is-compact, .no-js) .stage__meta span { background: none; padding: 0; margin: 0; }
.no-js .seg { display: none; }

/* compact landscape (short desktop, reduced motion, tablet on its side): text left, city right */
@media (orientation: landscape) and (min-width: 861px) {
  :is(.is-compact, .no-js) .stage { --hero-h: max(640px, 100svh); }
  :is(.is-compact, .no-js) .stage__poster img { object-position: 70% center; }
  :is(.is-compact, .no-js) .stage__veil {
    background:
      linear-gradient(90deg, rgba(236, 238, 238, 0.98) 0%, rgba(236, 238, 238, 0.93) 30%, rgba(236, 238, 238, 0.55) 48%, rgba(236, 238, 238, 0) 64%),
      linear-gradient(180deg, rgba(236, 238, 238, 0.6) 0%, rgba(236, 238, 238, 0) 18%, rgba(236, 238, 238, 0) 84%, #eceeee 100%);
  }
  :is(.is-compact, .no-js) .hero { padding-top: calc(var(--nav-h) + clamp(32px, 9vh, 96px)); }
  :is(.is-compact, .no-js) .hero__landlord::before, :is(.is-compact, .no-js) .hero__proof::before { display: none; }
}

/* ---------------------------------------------------------------- clients */
.clients-strip { background: var(--paper-hi); border-block: 1px solid var(--line); padding-block: 36px 40px; }
.clients-strip__label { font-size: 14px; color: var(--ink-3); }
.client-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 32px; margin-top: 20px; }
.client-logos li { display: flex; align-items: center; justify-content: center; min-height: 52px; min-width: 0; }
.client-logos img { width: 100%; max-width: 148px; height: 40px; object-fit: contain; filter: grayscale(1); mix-blend-mode: multiply; opacity: 0.85; }

/* ---------------------------------------------------------------- sections */
.section { padding-block: clamp(72px, 9vw, 136px); }
.section-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 24px 8vw; align-items: end; }
.section-head .h2 { max-width: 15em; }

/* services */
.services { background: var(--paper); }
.situations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(40px, 5vw, 64px); }
/* Situationerna som kort (30 september 2026): egen yta och ram som mörknar vid hovring, så att det syns att hela kortet är en länk. */
.situation { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 26px 24px 28px; background: var(--paper-hi); border: 1px solid var(--line); transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); }
.situation:hover { border-color: var(--line-strong); background: #fff; }
.situation h3 { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 500; text-wrap: balance; }
.situation p { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
/* Hela kortet är klickbart genom länken i rubriken (Services.astro, korten från en tidigare ombyggnadsgren). */
.situation h3 a { display: block; min-height: 24px; text-decoration: none; }
.situation h3 a::after { content: ""; position: absolute; inset: 0; }
.situation h3 a::before { content: "→"; float: right; margin-left: 12px; font-family: var(--font); font-size: 0.8em; color: var(--ink-3); transition: transform 0.3s var(--ease), color 0.3s; }
.situation:hover h3 a::before { transform: translateX(4px); color: var(--ink); }
.situation:focus-within { outline: 2px solid var(--focus, var(--ink)); outline-offset: 4px; }
.situation h3 a:focus-visible { outline: none; }

/* kärnlöftet: kunden slipper gå igenom hundratals lokaler själv (Grovjobbet.astro) */
/* Spalterna är lika breda och skiljelinjen står mitt i mellanrummet, så att texten har lika långt till
   linjen på båda sidor (samma mönster i .trust__facts). */
.promise__points { --col-gap: clamp(40px, 4.4vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: clamp(36px, 4.5vw, 56px); border-top: 1px solid var(--ink); }
.promise__point { position: relative; min-width: 0; padding: 26px 0 6px; }
.promise__point + .promise__point::before { content: ""; position: absolute; inset-block: 0; left: calc(var(--col-gap) / -2); border-left: 1px solid var(--line); }
.promise__point h3 { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 500; }
.promise__point p { margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 30em; }
/* Det mest särskiljande skälet stort, i ett mörkt band över hela bredden med staden i kvällsljus
   (scripts/render-kunskap.mjs; himlen i bilden är --ink). Bryter den ljusa ytan mellan heron och
   tjänsterna (30 september 2026). */
.promise { padding-bottom: 0; }
.promise__claim {
  --focus: #eceeee; position: relative; isolation: isolate; display: flex; align-items: center;
  min-height: min(46vw, 760px); margin-top: clamp(72px, 9vw, 136px); background: var(--ink); color: var(--night-text); overflow: hidden;
}
.promise__city { position: absolute; inset: 0; z-index: -1; }
.promise__city img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 100%; }
.promise__city::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, rgba(28, 35, 49, 0.9) 28%, rgba(28, 35, 49, 0) 60%); }
.promise__claim-inner { display: flex; flex-direction: column; align-items: flex-start; padding-block: clamp(80px, 10vw, 150px); }
.promise__claim-label { font-size: 15px; font-weight: 500; color: var(--night-2); }
.promise__claim-text { margin-top: 16px; font-family: var(--font-display); font-size: clamp(38px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -0.02em; max-width: 11em; text-wrap: balance; color: #fff; }
.promise__claim-text span { display: block; margin-top: 22px; max-width: 26em; font-family: var(--font); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; letter-spacing: -0.005em; color: var(--night-2); text-wrap: pretty; }
.promise__claim .btn { margin-top: 36px; }

/* Vem betalar oss? Omfattningen stort till vänster, resten bredvid (30 september 2026). */
.payment { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px 6vw; margin-top: clamp(64px, 8vw, 112px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--ink); }
.payment__title { font-size: 15px; font-weight: 500; color: var(--ink-3); }
.payment__statement { margin-top: 14px; font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; letter-spacing: -0.015em; max-width: 14em; text-wrap: balance; }
.payment__text { display: grid; align-content: start; gap: 14px; max-width: 40em; padding-top: 34px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.payment__text p:first-child { color: var(--ink); font-size: 19px; line-height: 1.5; }

/* team */
.team { background: var(--paper-hi); }
.person { min-width: 0; }
.person img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; filter: saturate(0.8); background: var(--paper); }
.person__name { margin-top: 16px; font-size: 24px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 500; }
.person__role { margin-top: 2px; font-size: 15px; color: var(--ink-3); }
.person__email { font-size: 15.5px; margin-top: 2px; overflow-wrap: anywhere; }

/* Vi som jobbar på Locality: partnerna med porträtt till vänster, rubriken och medarbetarna utan porträtt i
   ytan till höger, så att alla fyra namnen står på samma rad (30 september 2026, Team.astro). */
.team__layout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: 0 var(--col-gap); }
.team__title { grid-column: 3 / 5; grid-row: 1; max-width: 10em; }
.team__photos { grid-column: 1 / 3; grid-row: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
.team__others { grid-column: 3 / 5; grid-row: 2; align-self: end; display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
.team__photos li, .team__others li { display: grid; align-content: end; gap: 4px; }
.team__photos picture { margin-bottom: 14px; }
.team__name { font-family: var(--font-display); font-size: clamp(21px, 1.7vw, 25px); line-height: 1.2; letter-spacing: -0.012em; }
.team__role { font-size: 15px; color: var(--ink-3); }
@media (max-width: 860px) {
  .team__layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .team__title, .team__photos, .team__others { grid-column: 1; grid-row: auto; }
  .team__photos { margin-top: 32px; }
  .team__others { margin-top: 28px; }
}
/* 320 px (kvalitetsgranskningen 1 oktober 2026, F10): två "Marknadskartläggare" bredvid varandra gav
   sidan cirka 5 px horisontell scroll. Under 375 px står medarbetarna under varandra. */
@media (max-width: 374px) {
  .team__others { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
}

/* Om oss: medarbetare utan profilbild (29 september 2026). */
.pg-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--col-gap); margin-top: 32px; border-top: 1px solid var(--line); }
.pg-team li { display: grid; gap: 2px; padding: 16px 0; }
.pg-team__name { font-family: var(--font-display); font-size: 21px; line-height: 1.2; }
.pg-team__role { font-size: 15px; color: var(--ink-3); }
@media (max-width: 560px) { .pg-team { grid-template-columns: 1fr; } }

/* process */
.process { background: var(--paper); }
.process__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: clamp(40px, 5vw, 72px); }
.process__plan { grid-column: 1 / span 7; }
.plan-sticky { position: sticky; top: calc(var(--nav-h) + 36px); }
.steps { grid-column: 9 / -1; padding-top: 6vh; }
.step { position: relative; min-height: 46vh; padding-left: 52px; }
.step:last-child { min-height: 30vh; }
/* Stegen som inte är aktiva tonas med färg i stället för opacitet (v2 hade 0.36), så att texten
   håller kontrasten 4.5:1 (--ink-3 mot --paper är 4.9:1). */
.step > .h3, .step > p { transition: color 0.5s; }
.js .step:not(.is-active) > .h3, .js .step:not(.is-active) > p { color: var(--ink-3); }
/* Numret från data-step-item, inte en CSS-räknare: på mobil är de andra stegen dolda
   (display: none) och räknas inte, så steget som syns fick alltid 1. */
.step::before {
  content: attr(data-step-item); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; display: grid; place-items: center;
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px var(--ink); background: var(--paper);
}
.step.is-active::before { background: var(--ink); color: #fff; }
.step p { margin-top: 10px; max-width: 30em; font-size: 17px; color: var(--ink-2); }
.no-js .step { min-height: 0; padding-bottom: 32px; }

.plan { width: 100%; height: auto; color: var(--ink); overflow: visible; font-family: var(--font); }
.plan text { fill: var(--ink); font-size: 14px; }
.plan pattern circle { fill: rgba(28, 35, 49, 0.18); }
.pl { opacity: 0; transition: opacity 0.6s var(--ease); }
.pl--bubbles circle { fill: rgba(141, 153, 174, 0.16); stroke: var(--slate-deep); stroke-width: 1.2; stroke-dasharray: 4 5; }
.pl--bubbles .sub { fill: var(--ink-2); font-size: 12.5px; }
.pl__people circle { fill: var(--slate-deep); stroke: none; }
.pl--shell .wall-outer { fill: rgba(255, 255, 255, 0.6); stroke: var(--ink); stroke-width: 7; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); }
.pl--shell .win rect { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 1.1; }
.pl--shell .knock { fill: var(--paper-hi); }
.plan .plan__note { font-size: 13px; fill: var(--ink-3); }
.door { fill: none; stroke: var(--ink); stroke-width: 1.1; }
.pl--rooms path:not(.door):not(.walk) { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease); }
.walk { fill: none; stroke: var(--slate-deep); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; animation: walk 1.4s linear infinite; transition: opacity 0.4s; }
@keyframes walk { to { stroke-dashoffset: -18; } }
.pl--dims path { fill: none; stroke: var(--ink); stroke-width: 1; }
.pl--dims text { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pl--dims .area text { font-size: 12.5px; fill: var(--ink-2); }
.pl--furn rect, .pl--furn circle { fill: none; stroke: var(--ink); stroke-width: 1.1; }
.pl--furn .desks rect { fill: rgba(255, 255, 255, 0.8); }
.plan__north path { fill: var(--ink); }
.plan__north text, .plan__scale text { font-size: 12px; fill: var(--ink-2); }
.plan__scale path { fill: none; stroke: var(--ink); stroke-width: 1; }

.plan[data-step="1"] .pl--bubbles, .plan[data-step="2"] .pl--bubbles { opacity: 1; }
.plan:not([data-step="1"]) .pl--shell { opacity: 1; }
.plan:not([data-step="1"]) .pl--shell .wall-outer { stroke-dashoffset: 0; }
.plan:is([data-step="3"], [data-step="4"], [data-step="5"]) .pl--rooms { opacity: 1; }
.plan:is([data-step="3"], [data-step="4"], [data-step="5"]) .pl--rooms path { stroke-dashoffset: 0; }
.plan:is([data-step="4"], [data-step="5"]) .walk { opacity: 0; }
.plan:is([data-step="4"], [data-step="5"]) .pl--dims { opacity: 1; }
.plan[data-step="5"] .pl--furn { opacity: 1; }
/* Steg 5: yttermåtten tonas ned bakom möblerna. Måttens text döljs i stället för att tonas till 0,35, som
   gav cirka 2:1 i kontrast (kvalitetsgranskningen 1 oktober 2026, F16); de står fullt synliga i steg 4. */
.plan[data-step="5"] .pl--dims > path { opacity: 0.35; }
.plan[data-step="5"] .pl--dims > text { opacity: 0; }

.process-controls { display: none; gap: 8px; margin-top: 16px; }
.process-controls button {
  flex: 1; min-width: 0; min-height: 48px; padding: 6px 2px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.process-controls button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* references */
.references { background: var(--paper-hi); border-top: 1px solid var(--line); }
.references__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.references__side { grid-column: 1 / span 4; }
.references__note { margin-top: 14px; font-size: 16px; color: var(--ink-2); }
.voices { margin-top: 32px; border-top: 1px solid var(--line); }
.voices button {
  width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer;
  font-size: 17px; color: var(--ink-2);
}
.voices button span { margin-left: auto; font-size: 14px; color: var(--ink-3); }
.voices button[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.voices button[aria-selected="true"]::after { content: ""; width: 9px; height: 9px; flex: none; background: var(--slate-deep); }
.voices button:hover { color: var(--ink); }
.no-js .voices { display: none; }
.js [data-js-hidden] { display: none; }
.quotes { grid-column: 6 / -1; }
.quote { padding-top: 4px; }
.quote + .quote { margin-top: 48px; }
.js .quote + .quote { margin-top: 0; }
.quote:focus-visible { outline-offset: 8px; }
.quote p {
  font-size: clamp(24px, 2.5vw, 38px); line-height: 1.24; letter-spacing: -0.02em; font-weight: 500;
  text-indent: -0.42em; text-wrap: pretty; transition: opacity 0.3s;
}
.quotes.is-swapping .quote p, .quotes.is-swapping figcaption { opacity: 0; }
.quote figcaption { margin-top: 26px; display: flex; flex-direction: column; font-size: 16px; transition: opacity 0.3s; }
.quote figcaption span:first-child { font-weight: 600; }
.quote figcaption span:last-child { color: var(--ink-3); }

/* landlords */
.landlords { --focus: #eceeee; background: var(--ink); color: var(--night-text); }
.landlords__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.landlords__head { grid-column: 1 / span 5; }
.audience { font-size: 15px; color: var(--night-2); margin-bottom: 14px; }
.landlords .lead { margin-top: 22px; color: var(--night-text); }
.landlords__head .btn { margin-top: 32px; }
.landlords__services { grid-column: 7 / -1; border-top: 1px solid var(--night-line); }
.landlords__services > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); padding: 26px 0 28px; border-bottom: 1px solid var(--night-line); }
.landlords__services dt { color: #fff; }
.landlords__services dd { font-size: 16px; color: var(--night-2); }
.landlords__partners { grid-column: 1 / -1; margin-top: clamp(56px, 7vw, 96px); padding-top: 26px; border-top: 1px solid var(--night-line); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; max-width: 60em; }
.landlords__partners span { color: var(--night-2); }

/* contact */
.contact { background: var(--paper-hi); border-top: 1px solid var(--line); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 7vw; }
.contact__intro .h2 { font-size: clamp(38px, 4.3vw, 64px); }
.contact__intro .h2:focus { outline: none; }
.contact__intro .lead { margin-top: 24px; max-width: 27em; }
.contact__promises { display: grid; gap: 10px; margin-top: 26px; font-size: 16px; }
.contact__promises li { position: relative; padding-left: 22px; }
.contact__promises li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--slate-deep); }
.contact__direct { display: flex; flex-direction: column; align-items: flex-start; margin-top: 40px; }
.contact__direct p { font-size: 15px; color: var(--ink-2); }
.contact__direct a { display: inline-flex; align-items: center; min-height: 44px; font-size: 21px; text-decoration: none; font-variant-numeric: tabular-nums; }
.contact__direct a:last-child { font-size: 17px; }
.contact__direct a:hover { text-decoration: underline; text-underline-offset: 0.22em; }

.brief { min-width: 0; }
.intent { display: flex; gap: 4px; margin: 0 0 28px; padding: 4px; border: 1px solid var(--field); }
.intent label { position: relative; flex: 1; cursor: pointer; }
.intent input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.intent span { display: grid; place-items: center; min-height: 46px; padding: 8px; font-size: 15px; line-height: 1.3; text-align: center; }
.intent input:checked + span { background: var(--ink); color: #fff; }
.intent input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.brief__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.areas { min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
.areas legend { margin-bottom: 8px; padding: 0; }
.areas__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media (min-width: 700px) { .areas__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; } }
.areas__opt { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; line-height: 1.3; cursor: pointer; }
.areas__opt input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.areas__opt input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; min-width: 0; }
.field__label { font-size: 15px; line-height: 1.4; }
.field__label small { margin-left: 6px; font-size: 13px; color: var(--ink-3); }
.field input, .field select, .field textarea {
  width: 100%; max-width: 100%; min-height: 52px; padding: 12px;
  border: 1px solid var(--field); border-radius: 0; background: #fff; color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.4;
  -webkit-appearance: none; appearance: none;
}
.field select {
  padding-right: 40px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%231c2331' stroke-width='1.5'/%3E%3C/svg%3E") right 15px center / 12px auto no-repeat;
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field__error { font-size: 14px; color: var(--error); }
.brief__more { margin: 0 0 24px; border-bottom: 1px solid var(--line); }
.brief__more summary { display: flex; align-items: center; gap: 8px; min-height: 48px; font-size: 15px; cursor: pointer; }
.brief__more summary::before { content: ""; width: 0; height: 0; border-left: 6px solid var(--ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform 0.2s; }
.brief__more[open] summary::before { transform: rotate(90deg); }
.brief__more summary::-webkit-details-marker { display: none; }
.brief__more summary span { font-size: 13px; color: var(--ink-3); }
.brief__more[open] summary { margin-bottom: 12px; }
.brief__submit { width: 100%; min-height: 56px; }
.brief__result { margin-top: 24px; padding: 24px; background: var(--paper); border-left: 3px solid var(--ink); }
.brief__result:focus { outline: none; }
/* Beskedet är ett stycke, inte en rubrik (SEO-22); samma utseende som förut. */
.brief__result .brief__result-title { margin-top: 0; font-size: 26px; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; }
.brief__result p { margin-top: 12px; font-size: 16px; }
.brief__result .btn { width: 100%; margin-top: 20px; }
.text-btn { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0; border: 0; background: none; font-size: 15px; text-decoration: underline; text-underline-offset: 0.22em; cursor: pointer; }
.brief.has-result .brief__submit { display: none; }
.brief.is-sending .brief__submit { cursor: progress; background: var(--slate-deep); border-color: var(--slate-deep); }
/* Honeypot: hidden from people and assistive technology; bots that fill it are discarded by the server. */
.brief__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* Tre lägen (1 oktober 2026): skickad, inte skickad och okänd status, i kontaktformuläret och Sök lokal.
   data-when kan ha flera lägen. */
:is(.brief__result, .sl-done):not([data-state="sent"]) [data-when~="sent"],
:is(.brief__result, .sl-done):not([data-state="failed"]) [data-when~="failed"]:not([data-when~="unknown"]),
:is(.brief__result, .sl-done):not([data-state="unknown"]) [data-when~="unknown"]:not([data-when~="failed"]),
:is(.brief__result, .sl-done):not([data-state="failed"]):not([data-state="unknown"]) [data-when~="failed"][data-when~="unknown"] { display: none; }
/* Lokalen som förfrågan gäller (F01): bara när besökaren kommer från en lokalsida. */
.brief__listing { margin: 0 0 24px; padding: 14px 16px 6px; background: var(--paper); border-left: 3px solid var(--ink); }
.brief__listing p { font-size: 16px; line-height: 1.5; }
.brief__listing .text-btn { margin-top: 0; }
.pg-form .brief__listing { background: var(--paper-hi); }
.brief__direct { display: flex; flex-wrap: wrap; column-gap: 20px; }
.brief__direct a { display: inline-flex; align-items: center; min-height: 44px; font-variant-numeric: tabular-nums; text-decoration: underline; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong); }
.brief__direct a:hover { text-decoration-color: currentColor; }

/* footer */
.foot { background: var(--paper); border-top: 1px solid var(--line); padding-top: clamp(56px, 7vw, 96px); padding-bottom: 28px; }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px var(--col-gap); font-size: 15.5px; }
.foot__h { margin-bottom: 6px; font-size: 14px; color: var(--ink-3); }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 0.22em; }
/* Block med padding i stället för inline-flex: en länk som bryts över två rader behåller pilen
   efter sista ordet. 24 px rad + 2 × 4 px = 32 px klickyta (44 px under 860 px). */
.foot__cols li a { display: block; width: fit-content; padding-block: 4px; }
.foot__logo { width: 100%; height: auto; margin-top: clamp(56px, 8vw, 120px); color: #000; }
.foot__legal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 32px; margin-top: 24px; font-size: 13.5px; color: var(--ink-3); }
.foot__legal p:first-child { margin-right: auto; }
.foot__legal a { display: inline-flex; align-items: center; min-height: 32px; }

.mobile-cta { display: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .nav__inner { gap: 24px; }
  .nav__links { gap: 20px; font-size: 15px; }
  .nav__phone { display: none; }
  .situations { grid-template-columns: 1fr 1fr; }
  .landlords__head { grid-column: 1 / span 6; }
  .landlords__services { grid-column: 1 / -1; margin-top: 48px; }
  .utbud__panel { width: min(440px, 46vw); }
}

@media (max-width: 860px) {
  .promise__points { grid-template-columns: 1fr; }
  .promise__point { padding: 20px 0 6px; }
  .promise__point + .promise__point { border-top: 1px solid var(--line); }
  .promise__point + .promise__point::before { content: none; }
  .promise__city::after { background: linear-gradient(90deg, var(--ink) 0%, rgba(28, 35, 49, 0.9) 40%, rgba(28, 35, 49, 0.2) 80%); }
  .payment__text { padding-top: 0; }
  :root { --nav-h: 68px; --gutter: 24px; }
  body { font-size: 16.5px; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .nav__logo { width: 104px; }
  .nav__end { gap: 6px; }

  .hero__title { font-size: clamp(38px, 9.4vw, 60px); max-width: 12em; line-height: 1.04; }
  .hero__lead { font-size: 18px; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 10px; }

  :is(.is-compact, .no-js) .utbud { grid-template-columns: 1fr; }
  :is(.is-compact, .no-js) .utbud__map { margin-bottom: 28px; }
  :is(.is-compact, .no-js) .utbud__panel { padding: 0; }

  .section-head { grid-template-columns: 1fr; }
  .client-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; }
  .payment { grid-template-columns: 1fr; }

  .process__body { display: block; }
  .plan-sticky { position: static; }
  .steps { margin-top: 28px; padding-top: 0; }
  .step, .step:last-child { min-height: 0; padding-bottom: 8px; }
  .js .step:not(.is-active) { display: none; }
  .js .process-controls { display: flex; }

  .references__side, .quotes { grid-column: 1 / -1; }
  .quotes { margin-top: 32px; }
  .voices button { font-size: 16px; }

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

  .contact__grid { grid-template-columns: 1fr; }

  .foot { padding-bottom: 104px; }
  /* Två lika breda kolumner: Sidor till höger, bolaget, Kontakt och Registrering staplade till
     vänster. minmax(0, 1fr) så att "Fastighetsmäklarinspektionens" inte gör vänsterkolumnen bredare. */
  .foot__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "company pages" "contact pages" "reg pages";
    grid-template-rows: auto auto 1fr;
  }
  .foot__company { grid-area: company; }
  .foot__contact { grid-area: contact; }
  .foot__pages { grid-area: pages; }
  .foot__reg { grid-area: reg; }
  .foot__cols li a { padding-block: 10px; }
  .foot__legal a { min-height: 44px; }

  .mobile-cta:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; align-items: center; gap: 12px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--paper-hi); box-shadow: 0 -1px 0 var(--line);
  }
  .mobile-cta .btn { flex: 1; min-height: 48px; font-size: 15.5px; padding-inline: 14px; }
  .mobile-cta__phone { display: inline-flex; align-items: center; min-height: 48px; padding-right: 6px; font-size: 15.5px; text-decoration: underline; text-underline-offset: 0.22em; }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; }
  .h2 { font-size: clamp(30px, 8.4vw, 40px); }
  .hero__title { font-size: clamp(34px, 9.6vw, 46px); }
  .hero__lead { font-size: 17px; }
  .hero__actions .btn { width: 100%; }
  .hero__checks { font-size: 16px; gap: 8px; }
  .hero__proof ul { flex-wrap: nowrap; gap: 16px; }
  .hero__proof img { height: 20px; max-width: 86px; }
  .client-logos { grid-template-columns: 1fr 1fr; gap: 18px 32px; }
  .client-logos img { height: 36px; }
  .situations { grid-template-columns: 1fr; gap: 10px; }
  .situation { padding: 20px 20px 22px; }
  .payment__text p:first-child { font-size: 18px; }
  /* Texten först och staden under, beskuren till den högra delen av bilden. */
  .promise__claim { flex-direction: column; align-items: stretch; min-height: 0; }
  .promise__city { position: relative; inset: auto; order: 1; aspect-ratio: 4 / 3; margin-top: -10vw; }
  .promise__city img { object-position: 80% 100%; }
  .promise__city::after { background: linear-gradient(180deg, var(--ink) 0%, rgba(28, 35, 49, 0) 40%); }
  .promise__claim-inner { padding-block: 64px 0; }
  .promise__claim .btn { align-self: stretch; }
  .person__name { font-size: 20px; }
  .person__role { font-size: 14px; }
  .person__email { font-size: 14px; }
  .quote p { font-size: 25px; }
  .landlords__services > div { grid-template-columns: 1fr; gap: 6px; }
  .brief__pair { grid-template-columns: 1fr; }
  .intent span { font-size: 14.5px; }
  /* Registrering får hela bredden: länktexten ryms inte i en halv kolumn. */
  .foot__cols {
    gap: 24px 16px;
    grid-template-areas: "company pages" "contact pages" "reg reg";
    grid-template-rows: auto 1fr auto;
  }
  .foot__legal { display: block; }
  .foot__legal p + p { margin-top: 4px; }
}

@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .hero__title { font-size: 32px; }
  .mobile-cta .btn { font-size: 14.5px; padding-inline: 10px; }
  .mobile-cta__phone { font-size: 14.5px; }
}

/* ---------------------------------------------------------------- preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pin__glow, .utbud__glows { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .btn, .intent span, .seg__btn, .process-controls button { border: 1px solid ButtonText; }
  .intent input:checked + span, .seg__btn[aria-pressed="true"], .process-controls button[aria-pressed="true"] { outline: 3px solid Highlight; }
  .stage__poster img, .stage__canvas { opacity: 0.2 !important; }
  .contact__promises li::before { background: CanvasText; }
}
@media print {
  .nav, .mobile-cta, .stage__canvas, .pins, .stage__more, .process-controls, .voices { display: none !important; }
  .stage { height: auto; }
  .stage__sticky { position: relative; height: auto; }
  .hero, .utbud { position: relative; top: auto; opacity: 1 !important; transform: none !important; padding-block: 32px; }
  .utbud__panel { opacity: 1; transform: none; width: 100%; box-shadow: none; }
  .stage__poster, .stage__veil { display: none; }
  .step { min-height: 0; display: block !important; }
  .step > .h3, .step > p { color: var(--ink) !important; }
  .plan-sticky { position: static; }
  .quote[hidden] { display: block !important; }
  .landlords { background: none; color: var(--ink); }
  .promise__claim { min-height: 0; background: none; color: var(--ink); }
  .promise__city { display: none; }
  .promise__claim-text, .promise__claim-text span, .promise__claim-label { color: var(--ink); }
  .landlords__services dt, .landlords__services dd, .landlords__partners span, .audience { color: var(--ink); }
}

/* ================================================================ Undersidor (M1)
   Mallen för innehållssidorna (src/layouts/ContentPage.astro) och undersidornas sidhuvud och
   sidfot. Bara befintliga tokens: ingen ny accentfärg, inga versaler, ingen backdrop-filter.
   Brödtexten hålls runt 65–75 tecken per rad. */

/* sidhuvud och sidfot på undersidorna */
.nav__links a[aria-current]::after { transform: scaleX(1); }
.menu__links--pages > a:last-of-type { font-size: 30px; font-weight: 600; }
.menu__links--pages > a.menu__minor { font-size: 20px; font-weight: 500; }
.foot__org { margin-top: 8px; }
.foot__org span { white-space: nowrap; }

/* ramen */
.pg { display: block; padding-top: var(--nav-h); }
.pg-draft {
  padding: 12px var(--gutter); background: var(--paper-hi); border-bottom: 2px dashed var(--error);
  color: var(--error); font-size: 15px; font-weight: 600; text-align: center;
}
.pg__wrap { padding-top: clamp(20px, 4vw, 48px); padding-bottom: clamp(64px, 8vw, 112px); }
.pg__head { max-width: 60rem; }
.pg__title {
  margin-top: clamp(8px, 1.6vw, 20px); max-width: 17em;
  font-size: clamp(36px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600;
  text-wrap: balance;
}
.pg__body { max-width: 40rem; margin-top: clamp(28px, 4vw, 48px); }

/* 1. brödsmulor */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; font-size: 14.5px; color: var(--ink-3); }
.crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs li + li::before { content: "/"; content: "/" / ""; margin-right: 8px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong); }
.crumbs a:hover { text-decoration-color: currentColor; }

/* 3. kort svar */
.answer { padding: clamp(20px, 3vw, 30px); background: var(--paper-hi); border-left: 3px solid var(--ink); }
.answer__label { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ink-2); }
.answer__text { margin-top: 0; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.5; letter-spacing: -0.005em; text-wrap: pretty; }

/* avsnitt och brödtext */
.pg-section, .prose h2 { margin-top: clamp(44px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--line); }
.pg-h2, .prose h2 { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -0.022em; font-weight: 500; text-wrap: balance; }
.pg-section > .pg-h2 + * { margin-top: 16px; }
.pg-section__body > :first-child { margin-top: 0; }
.pg-text, .prose p, .prose li { font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.pg-text, .prose p, .prose li, .faq dd, .pg-steps p, .pg-list p, .pg-cta__text { max-width: 31em; }
.prose:empty { display: none; }
.pg__body > .prose { margin-top: 28px; }
.prose > * + * { margin-top: 16px; }
.prose > h2 + * { margin-top: 16px; }
.prose h3 { margin-top: 28px; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; }
.prose ul { padding-left: 1.3em; list-style: disc; }
.prose ol { padding-left: 1.5em; list-style: decimal; }
.prose li + li { margin-top: 6px; }
.prose strong { font-weight: 600; }
.prose a, .pg-text a, .faq a, .pg-facts a, .answer a, .pg-list__title a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong);
  transition: text-decoration-color 0.2s;
}
.prose a:hover, .pg-text a:hover, .faq a:hover, .pg-facts a:hover, .answer a:hover, .pg-list__title a:hover { text-decoration-color: currentColor; }

/* hubbens barnsidor */
.pg-list li { padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.pg-list li:first-child { padding-top: 4px; }
.pg-list__title { font-size: clamp(20px, 1.6vw, 23px); line-height: 1.25; letter-spacing: -0.015em; font-weight: 500; }
/* Klickytan minst 24 px (WCAG 2.5.8). */
.pg-list__title a { display: inline-block; min-height: 24px; }
.pg-list__draft { font-size: 15px; color: var(--error); }
.pg-list p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* 6. vem betalar? */
.pg-cost p { font-size: 19px; line-height: 1.5; }

/* 7. steg */
.pg-steps { counter-reset: pgs; }
.pg-steps li { position: relative; counter-increment: pgs; padding: 2px 0 20px 48px; }
.pg-steps li::before {
  content: counter(pgs); position: absolute; left: 0; top: 0; width: 32px; height: 32px; display: grid; place-items: center;
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--ink);
}
.pg-steps__name { font-size: 19px; line-height: 1.35; letter-spacing: -0.01em; font-weight: 600; }
.pg-steps p { margin-top: 6px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }

/* 8. vanliga frågor: alltid synliga */
.faq > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.faq > div:first-child { padding-top: 2px; }
.faq > div:last-child, .pg-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.faq dt { font-size: 18.5px; line-height: 1.35; letter-spacing: -0.01em; font-weight: 600; }
.faq dd { margin-top: 6px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }

/* 11. relaterade sidor */
.related ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
.related li { border-bottom: 1px solid var(--line); min-width: 0; }
.related a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 0; font-size: 17px; line-height: 1.35; text-decoration: none; }
.related a::after { content: "→"; content: "→" / ""; flex: none; color: var(--ink-3); transition: transform 0.2s var(--ease); }
.related a:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.related a:hover::after { transform: translateX(3px); }

/* 12. CTA */
.pg-cta { margin-top: clamp(48px, 6vw, 80px); padding: clamp(24px, 4vw, 40px); background: var(--paper-hi); box-shadow: 0 0 0 1px var(--line); }
.pg-cta__title { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; text-wrap: balance; }
.pg-cta__text { margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.pg-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 24px; }
.pg-cta__direct { display: flex; flex-wrap: wrap; column-gap: 20px; }
.pg-cta__direct a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-variant-numeric: tabular-nums; text-decoration: underline; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong); }
.pg-cta__direct a:hover { text-decoration-color: currentColor; }

/* 13. maskinläsbara versioner */
.pg-machine { margin-top: 28px; font-size: 14px; color: var(--ink-3); }
.pg-machine a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong); }

/* avsnitt från config: personer, företagsuppgifter, kontaktuppgifter */
.pg-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--col-gap); margin-top: 24px; }
.pg-people .person__email { display: flex; width: fit-content; }
.pg-facts { margin-top: 20px; border-top: 1px solid var(--line); }
.pg-text + .pg-facts { margin-top: 20px; }
.pg-facts > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 2px 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pg-facts dt { font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.pg-facts dd { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
/* Klickytan minst 24 px (WCAG 2.5.8) utan att raden blir högre. */
.pg-facts dd a, .facts__list dd a { display: inline-block; padding-block: 4px; margin-block: -4px; }

@media (max-width: 860px) {
  .pg ~ .foot { padding-bottom: 28px; }
  .related ul { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pg__title { font-size: clamp(32px, 8.6vw, 40px); }
  .pg-text, .prose p, .prose li, .faq dd, .pg-steps p { font-size: 16.5px; }
  .pg-cost p { font-size: 18px; }
  .pg-cta__actions .btn { width: 100%; }
  .pg-facts > div { grid-template-columns: 1fr; }
  .pg-people { gap: 28px 14px; }
}
@media print {
  .pg-cta, .pg-machine { display: none !important; }
}

/* ================================================================ Startsidan (M2)
   "Locality i korthet": startsidans del av sidkontraktet (kort svar, fakta, relaterade sidor,
   ansvarig och datum) i samma formspråk som referenserna. Bara befintliga tokens. */
.facts { padding-block: clamp(64px, 8vw, 120px); background: var(--paper); }
.facts__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.facts__head { grid-column: 1 / span 4; }
.facts__body { grid-column: 6 / -1; min-width: 0; }
.facts__answer { max-width: 36em; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; letter-spacing: -0.005em; text-wrap: pretty; }
.facts__list { margin-top: 32px; border-top: 1px solid var(--line); }
.facts__list > div { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 2px 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts__list dt { font-size: 14px; line-height: 1.7; color: var(--ink-3); }
.facts__list dd { font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.facts__list a, .facts__meta a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong);
  transition: text-decoration-color 0.2s;
}
.facts__list a:hover, .facts__meta a:hover { text-decoration-color: currentColor; }
.facts__related { margin-top: 32px; }
.facts__h { font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--ink-3); }
.facts__related ul { display: flex; flex-wrap: wrap; column-gap: 28px; margin-top: 2px; }
.facts__related a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 17px; text-decoration: none; }
.facts__related a::after { content: "→"; content: "→" / ""; color: var(--ink-3); transition: transform 0.2s var(--ease); }
.facts__related a:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.facts__related a:hover::after { transform: translateX(3px); }
.facts__meta { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 24px; margin-top: 16px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.facts__meta a { display: inline-block; padding-block: 11px; }
@media (max-width: 860px) {
  .facts__head, .facts__body { grid-column: 1 / -1; }
  .facts__body { margin-top: 24px; }
}
@media (max-width: 560px) {
  .facts__answer { font-size: 17.5px; }
  .facts__list > div { grid-template-columns: 1fr; }
  .facts__meta { display: block; }
  .facts__meta > span { display: block; }
}

/* M3 ovriga ======================================================
   Kundcitat och logotyper (/referenser/, /om-oss/), faktabladet (/for-ai-agenter/), kod och
   citat i brödtexten. Bara befintliga tokens. Citaten är vanlig text, inga flikar. */
.prose code {
  padding: 0.08em 0.3em; background: var(--paper-hi); box-shadow: 0 0 0 1px var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86em; overflow-wrap: anywhere;
}
.prose blockquote { padding-left: 18px; border-left: 3px solid var(--line-strong); }
.prose blockquote p { color: var(--ink-2); }
.pg-quotes { margin-top: 24px; }
.pg-quote { padding: 22px 0 24px; border-top: 1px solid var(--line); }
.pg-quote:last-child { padding-bottom: 0; }
.pg-quote p {
  max-width: 31em; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.45; letter-spacing: -0.01em; font-weight: 500;
  text-indent: -0.4em; text-wrap: pretty;
}
.pg-quote figcaption { display: flex; flex-direction: column; margin-top: 12px; font-size: 16px; line-height: 1.45; }
.pg-quote__name { font-weight: 600; }
.pg-quote__role { color: var(--ink-3); }
.pg-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.pg-logos__more { margin-top: 20px; }
@media (max-width: 560px) {
  .pg-logos { grid-template-columns: 1fr 1fr; }
  .pg-quote p { font-size: 18px; }
}

/* M3 omraden
   Sidfotens rad "Kontor i Stockholm" (src/components/Footer.astro): länkarna till /kontor/ och
   områdessidorna, under kolumnerna. Samma text och klickytor som kolumnernas länkar. */
.foot__areas { margin-top: 28px; font-size: 15.5px; }
.foot__areas ul { display: flex; flex-wrap: wrap; column-gap: 24px; }
.foot__areas a { display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 860px) {
  .foot__areas a { min-height: 44px; }
}
@media (max-width: 560px) {
  .foot__areas { margin-top: 24px; }
  .foot__areas ul { column-gap: 20px; }
}

/* M3 kontakt
   /kontakt/ och /sok-lokal/: formulären i sidmallen och felrutan efter en misslyckad formulärpost utan
   JavaScript (?fel=1#formularfel, visas med :target eller av site.js). Sök lokal har ett eget avsnitt
   nedan (1 oktober 2026). Bara befintliga tokens. */
.pg-form .brief { margin-top: 28px; }
.pg-form .brief__result { background: var(--paper-hi); }
.form-fel { display: none; margin-top: 24px; padding: 18px 20px; background: var(--paper-hi); border-left: 3px solid var(--error); }
.form-fel:target, .form-fel.is-shown { display: block; }
.form-fel:focus { outline: none; }
.form-fel:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.form-fel__title { display: block; font-size: 19px; line-height: 1.35; font-weight: 600; }
.form-fel__text { display: block; margin-top: 8px; max-width: 31em; font-size: 16px; line-height: 1.55; }
.form-fel a { display: inline-block; padding-block: 4px; margin-block: -4px; text-decoration: underline; text-underline-offset: 0.22em; }
/* Sök lokal (1 oktober 2026): src/components/SokLokalForm.astro och
   src/client/sok-lokal.js. Utan JavaScript står alla frågor under varandra. Med JavaScript (.is-flow)
   är det ett kort med en fråga i taget, förloppet överst, bokstäver att trycka (.has-keys, bara med
   mus och tangentbord) och animationer. Kortet har samma storlek genom hela flödet: frågorna ligger i
   samma rutnätscell, de som inte visas är genomskinliga och ligger under (.is-off), och frågan står mitt i kortet. Valen fylls med en svepande färg (.sl-box::before) och bocken
   ritas med stroke-dashoffset; båda fungerar utan JavaScript. Bara befintliga tokens. */
/* Kortet direkt under ingressen (6 oktober 2026: formuläret högre upp): rubriken bara för skärmläsare,
   ingen linje och ingen extra luft före avsnittet. Felrutorna står ovanför kortet. */
.pg__wrap:has(> .pg__body > .pg-search:first-child) { padding-top: 0; }
.pg__body > .pg-search:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pg-search .form-fel { margin: 0 0 24px; }
.sl { position: relative; min-width: 0; }
.sl.is-flow {
  padding: clamp(22px, 4vw, 44px) clamp(20px, 4vw, 44px) clamp(18px, 3vw, 30px);
  background: var(--paper-hi);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -44px rgba(28, 35, 49, 0.45);
}
.sl:not(.is-flow) .sl-step + .sl-step { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.sl-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.sl.is-flow .sl__stage { display: grid; }
/* Varje fråga fyller hela rutan och står mitt i den. Den aktiva ligger överst och tar emot klicken;
   inget som ärvs (inert, visibility, pointer-events) ändras när frågan byts. */
.sl.is-flow .sl-step { grid-area: 1 / 1; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; }
.sl.is-flow .sl-step.is-off { z-index: 0; opacity: 0; }
.sl.is-flow .sl-step > .sl-link { align-self: flex-start; }

/* förloppet */
.sl__top { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(22px, 3vw, 34px); }
.sl__count { flex: none; min-width: 8.5em; font-size: 14px; line-height: 1.3; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sl__bar { position: relative; flex: 1; height: 2px; overflow: hidden; background: var(--line); }
.sl__bar span { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform 0.6s var(--ease); }

/* frågan */
.sl-q {
  display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 0;
  font-family: var(--font-display); font-weight: 400; font-optical-sizing: auto;
  font-size: clamp(25px, 2.5vw, 34px); line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance;
}
.sl-q:focus { outline: none; }
.sl-q__n {
  flex: none; display: inline-flex; align-items: center; gap: 5px; transform: translateY(-0.18em);
  font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.sl-q__n::after { content: "→"; content: "→" / ""; }
.sl-help { margin-top: 10px; max-width: 34em; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.sl-label { display: block; margin-top: 18px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.sl.is-flow .sl-size .sl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* textfälten: stor text på en linje, som strecket fylls när fältet har fokus */
.sl-input { position: relative; display: flex; align-items: baseline; gap: 12px; margin-top: 22px; border-bottom: 1px solid var(--field); }
.sl-input::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink);
  transform: scaleX(0); transform-origin: left center; transition: transform 0.45s var(--ease), background-color 0.2s;
}
.sl-input:focus-within::after { transform: scaleX(1); }
.sl-input input, .sl-input textarea {
  flex: 1; width: 100%; min-width: 0; padding: 8px 0 10px; border: 0; border-radius: 0; background: transparent;
  font-family: var(--font); font-size: clamp(22px, 2.1vw, 28px); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.sl-input textarea { min-height: 4.6em; resize: vertical; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; }
.sl-input--sm input { font-size: clamp(19px, 1.6vw, 22px); }
.sl-input input:focus, .sl-input textarea:focus { outline: none; }
.sl-input input::placeholder, .sl-input textarea::placeholder { color: var(--ink-3); opacity: 0.7; }
.sl-input:has([aria-invalid="true"]) { border-bottom-color: var(--error); }
.sl-input:has([aria-invalid="true"])::after { background: var(--error); }
.sl-unit { flex: none; font-size: 17px; color: var(--ink-3); white-space: nowrap; }
.sl-error { display: flex; gap: 8px; margin-top: 10px; max-width: 34em; font-size: 15px; line-height: 1.45; color: var(--error); }
.sl-error::before {
  content: "!"; content: "!" / ""; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px;
  border-radius: 50%; background: var(--error); color: #fff; font-size: 12px; font-weight: 600; line-height: 1;
}
.sl-link {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong);
  transition: text-decoration-color 0.2s, color 0.2s;
}
.sl-link:hover { color: var(--ink); text-decoration-color: currentColor; }
.sl-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0; border: 0; background: none; font-size: 15px; color: var(--ink-2); text-align: left; cursor: pointer; }
.sl-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.sl-pair .sl-input { margin-top: 4px; }

/* valen och områdena */
.sl-choices { display: grid; gap: 10px; max-width: 27rem; margin-top: 24px; }
.sl-areas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.sl-choice, .sl-area {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 10px 16px 10px 12px; cursor: pointer;
}
.sl-area { gap: 10px; min-height: 46px; padding: 6px 16px 6px 10px; }
.sl-choice input, .sl-area input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sl-box { position: absolute; inset: 0; z-index: -1; overflow: hidden; border: 1px solid var(--field); background: #fff; transition: border-color 0.2s; }
.sl-box::before {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  transform: scaleX(0); transform-origin: left center; transition: transform 0.42s var(--ease);
}
.sl-choice:hover .sl-box, .sl-area:hover .sl-box { border-color: var(--ink); }
.sl input:checked ~ .sl-box { border-color: var(--ink); }
.sl input:checked ~ .sl-box::before { transform: scaleX(1); }
.sl input:focus-visible ~ .sl-box { outline: 3px solid var(--focus); outline-offset: 2px; }
.sl-key {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid var(--line-strong); background: var(--paper-hi);
  font-size: 13px; font-weight: 600; line-height: 1; color: var(--ink-2);
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
/* Utan bokstäver (pekskärm, utan JavaScript) är rutan en vanlig markering: rund för ett val, fyrkantig för flera. */
.sl:not(.has-keys) .sl-key { width: 22px; height: 22px; font-size: 0; }
.sl:not(.has-keys) .sl-choice .sl-key { border-radius: 50%; }
.sl input:checked ~ .sl-key { border-color: #fff; background: #fff; color: var(--ink); }
.sl:not(.has-keys) input:checked ~ .sl-key { box-shadow: inset 0 0 0 5px var(--ink); }
.sl-choice__label, .sl-area__label { min-width: 0; transition: color 0.25s; }
.sl-choice__label { font-size: 18px; line-height: 1.3; }
.sl-area__label { font-size: 16px; line-height: 1.25; white-space: nowrap; }
.sl-area .sl-key { width: 24px; height: 24px; }
.sl:not(.has-keys) .sl-area .sl-key { width: 20px; height: 20px; }
.sl input:checked ~ .sl-choice__label, .sl input:checked ~ .sl-area__label { color: #fff; }
.sl-check { flex: none; width: 18px; height: 18px; margin-left: auto; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sl-check path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.32s 0.14s var(--ease); }
.sl input:checked ~ .sl-check path { stroke-dashoffset: 0; }
/* Platsen för en kommande karta över områdena (docs/sok-lokal-flode.md). */
.sl-map { margin-top: 22px; aspect-ratio: 4 / 3; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }

/* knapparna */
.sl__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 30px; }
.sl:not(.is-flow) .sl__next { width: 100%; min-height: 56px; }
.sl.is-flow .sl__next { min-width: 10em; transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.sl.is-flow .sl__next.is-skip { background: transparent; border-color: var(--ink); color: var(--ink); }
.sl.is-flow .sl__next.is-skip:hover { background: #fff; }
/* Pekskärmar behåller :hover efter ett tryck; knappen är samma i alla frågor och ska inte se nedtryckt ut. */
@media (hover: none) {
  .sl.is-flow .sl__next:hover { background: var(--ink); border-color: var(--ink); }
  .sl.is-flow .sl__next.is-skip:hover { background: transparent; }
}
.sl__back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: auto; padding: 0 2px;
  border: 0; background: none; font-size: 15px; color: var(--ink-2); cursor: pointer; transition: color 0.2s;
}
.sl__back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease); }
.sl__back:hover { color: var(--ink); }
.sl__back:hover svg { transform: translateX(-3px); }
.sl.is-sending .sl__next {
  cursor: progress; border-color: var(--slate-deep);
  background: linear-gradient(100deg, var(--ink) 0 35%, var(--slate-deep) 50%, var(--ink) 65% 100%) 0 0 / 260% 100%;
  animation: sl-sending 1.2s linear infinite;
}
@keyframes sl-sending { from { background-position: 100% 0; } to { background-position: -160% 0; } }

/* sammanfattningen */
.sl-review__list { margin-top: 16px; border-top: 1px solid var(--line); }
.sl-review__row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--line); }
.sl-review__row dt { font-size: 14px; line-height: 1.4; color: var(--ink-3); }
.sl-review__row dd { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
/* En rad per svar, så att sammanfattningen alltid har samma höjd. Hela svaret står i title. */
.sl-review__value { flex: 1; min-width: 0; overflow: hidden; font-size: 16px; line-height: 1.45; white-space: nowrap; text-overflow: ellipsis; }
.sl-review__value.is-empty { color: var(--ink-3); }
.sl-review__edit { flex: none; min-height: 32px; margin-top: 0; font-size: 14px; }

/* beskedet */
.sl.has-result { display: flex; flex-direction: column; justify-content: center; }
.sl-done:focus { outline: none; }
.sl-done__mark { width: 56px; height: 56px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sl-done__mark circle, .sl-done__mark path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.sl-done[data-state="sent"] .sl-done__mark circle { animation: sl-draw 0.8s 0.1s var(--ease) both; }
.sl-done[data-state="sent"] .sl-done__mark path { animation: sl-draw 0.45s 0.7s var(--ease) both; }
@keyframes sl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.sl-done .sl-done__title { margin-top: 18px; font-family: var(--font-display); font-weight: 400; font-optical-sizing: auto; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.015em; }
.sl-done:is([data-state="failed"], [data-state="unknown"]) .sl-done__title { margin-top: 0; }
/* Ingen övergång medan skriptet gör om formuläret till ett flöde (knappen blir "Hoppa över" utan att blekna). */
.sl.is-init, .sl.is-init * { transition: none !important; }
.sl-done p { margin-top: 12px; max-width: 32em; font-size: 17px; line-height: 1.55; }
.sl-done strong { font-weight: 600; overflow-wrap: anywhere; }
.sl-done__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sl-done .text-link { margin-top: 4px; }

@media (max-width: 560px) {
  .sl-pair { grid-template-columns: minmax(0, 1fr); }
  .sl-areas { gap: 6px; margin-top: 18px; }
  .sl-area { gap: 8px; min-height: 42px; padding: 4px 12px 4px 8px; }
  .sl-area__label { font-size: 15px; }
  .sl-review__row { grid-template-columns: 6.4em minmax(0, 1fr); gap: 10px; }
  .sl.is-flow .sl__next { flex: 1 1 100%; }
  .sl__back { margin-left: 0; }
  .sl-done__actions .btn { flex: 1 1 100%; }
}
@media (forced-colors: active) {
  .sl-box { border-color: ButtonText; }
  .sl input:checked ~ .sl-box::before { background: Highlight; }
  .sl input:checked ~ .sl-choice__label, .sl input:checked ~ .sl-area__label { color: HighlightText; }
  .sl-input input:focus-visible, .sl-input textarea:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  .sl__bar span { background: CanvasText; }
}
@media print {
  .sl__top, .sl__nav, .sl-map { display: none !important; }
}

/* M3 korslankar
   Diskreta länkar på startsidan till undersidorna: under kundcitatens not (/referenser/), under
   stegen (/sa-arbetar-vi/) och under knappen för fastighetsägare (/for-fastighetsagare/). Samma
   understrykning och klickyta som .text-link. Bara befintliga tokens. */
.section-more { display: flex; width: fit-content; font-size: 16px; color: var(--ink-2); }
.section-more:hover { color: var(--ink); }
.references__note + .section-more { margin-top: 4px; }
.process__more { grid-column: 9 / -1; margin-top: 8px; margin-left: 52px; }
.landlords__head .section-more { margin-top: 12px; color: inherit; text-decoration-color: var(--night-2); }
.landlords__head .section-more:hover { color: #fff; text-decoration-color: currentColor; }
@media (max-width: 860px) {
  .process__more { margin-top: 16px; }
}
@media print {
  .landlords__head .section-more { text-decoration-color: currentColor; }
}

/* M5 lediga lokaler
   /lediga-lokaler/: ett kort per lokal som i Locality Hub (första bilden stor, gatuadressen, ytan,
   kategorin och området); hela kortet är klickbart. Listan får hela bredden, resten av sidan 40rem.
   /lediga-lokaler/<slug>/ (src/layouts/ListingPage.astro): lokalvyn i Hubben i sajtens färger och
   typsnitt. Bildsnurra (tre i bredd på dator, en på mobil), planritningar på vitt, rubrikdelen med en
   ruta i --slate (kategorin i versaler, --ink på --slate: 5,5:1), läget med kartan (MapLibre och
   OpenFreeMap, src/client/lokalkarta.js), fakta, ansvarig mäklare och förstoringen (<dialog>). */
.pg[data-page-type="listings"]:not(.lst-page) .pg__body { max-width: none; }
.pg[data-page-type="listings"]:not(.lst-page) .pg__body > :not(.lst) { max-width: 40rem; }
.lst__all { margin-top: 28px; }
/* Klickytan minst 24 px (WCAG 2.5.8) utan att raden blir högre (1 oktober 2026). */
.lst__all a { display: inline-block; padding-block: 4px; margin-block: -4px; }
.lst-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(32px, 3.4vw, 48px) var(--col-gap); margin-top: 28px; }
.lst-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.lst-card__img { order: -1; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-hi); transition: opacity 0.2s; }
.lst-card__img--none {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 16px;
  padding: 18px 18px 20px; background: var(--slate); color: var(--ink); text-align: right;
}
/* Lokaltypen utan versaler och spärrning, som kundcasen och säljsidorna (30 september 2026). */
.lst-card__img--none span:first-child { font-size: 18px; font-weight: 500; }
.lst-card__img--none span:last-child { font-size: 15px; font-weight: 500; }
.lst-card:hover .lst-card__img { opacity: 0.9; }
.lst-card__title { margin-top: 14px; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
.lst-card__title a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: transparent; transition: text-decoration-color 0.2s;
}
.lst-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lst-card:hover .lst-card__title a { text-decoration-color: currentColor; }
@supports selector(:has(a)) {
  .lst-card__title a:focus-visible { outline: none; }
  .lst-card:has(.lst-card__title a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 6px; }
}
.lst-card__size { font-size: 19px; line-height: 1.35; font-weight: 500; color: var(--slate-deep); font-variant-numeric: tabular-nums; }
.lst-card__meta { margin-top: 4px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.lst-card__type { font-weight: 500; color: var(--ink); }

/* lokalsidan */
.lst-page__head { max-width: none; }
/* Lokalsidan är smalare än övriga sidor, som i Hubben, så att man ser helheten (2026-09-28). */
.lst-page__wrap { max-width: 1240px; }
.lst-gallery, .lst-plans { margin-top: clamp(8px, 1.4vw, 16px); }
.lst-gallery { position: relative; }
.lst-gallery__track { display: flex; gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.lst-gallery.is-enhanced .lst-gallery__track { scrollbar-width: none; }
.lst-gallery.is-enhanced .lst-gallery__track::-webkit-scrollbar { display: none; }
.lst-gallery__item { flex: 0 0 calc((100% - 8px) / 3); min-width: 0; scroll-snap-align: start; }
.lst-gallery[data-count="2"] .lst-gallery__item { flex-basis: calc((100% - 4px) / 2); }
.lst-gallery[data-count="1"] .lst-gallery__item { flex-basis: 100%; }
.lst-gallery__open { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-hi); cursor: zoom-in; }
.lst-gallery[data-count="2"] .lst-gallery__open { aspect-ratio: 3 / 2; }
.lst-gallery[data-count="1"] .lst-gallery__open { aspect-ratio: 5 / 2; }
.lst-gallery__open img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.lst-gallery__open:hover img { transform: scale(1.02); }
.lst-gallery__open:focus-visible { outline: none; }
.lst-gallery__open:focus-visible::after, .lst-plans__open:focus-visible::after {
  content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 6px var(--paper-hi);
}
.lst-gallery__arrow {
  position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(246, 247, 247, 0.94); color: var(--ink); cursor: pointer;
  box-shadow: 0 2px 10px rgba(28, 35, 49, 0.22); transition: transform 0.15s var(--ease), background 0.15s;
}
.lst-gallery__arrow:hover { background: #fff; transform: scale(1.06); }
.lst-gallery__arrow[aria-disabled="true"] { opacity: 0.4; cursor: default; transform: none; }
.lst-gallery__arrow:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lst-gallery__arrow--prev { left: 12px; }
.lst-gallery__arrow--next { right: 12px; }
.lst-gallery__count {
  position: absolute; right: 12px; bottom: 12px; padding: 3px 11px; border-radius: 999px; background: rgba(28, 35, 49, 0.8); color: #fff;
  font-size: 13.5px; line-height: 1.5; font-weight: 500; font-variant-numeric: tabular-nums; pointer-events: none;
}
.lst-plans { padding: clamp(14px, 2vw, 24px); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.lst-plans__list { display: flex; justify-content: center; }
.lst-plans[data-count="2"] .lst-plans__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 48px); align-items: start; }
.lst-plans__item { min-width: 0; width: 100%; }
.lst-plans__open { position: relative; display: block; cursor: zoom-in; }
.lst-plans__open:focus-visible { outline: none; }
/* Fast höjd och object-fit: rutan beror inte på bildens proportioner, som Hubben inte alltid anger (då gissar sidan 4:3).
   Annars flyttar sig allt under planritningen när bilden har laddats (layoutförskjutning, SEO-21). */
.lst-plans__open img { width: 100%; height: clamp(200px, 60vw, 320px); object-fit: contain; margin-inline: auto; }

.lst-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 28px clamp(40px, 7vw, 100px); margin-top: clamp(28px, 3.6vw, 48px); }
.lst-top__title { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.04; letter-spacing: -0.034em; font-weight: 600; text-wrap: balance; }
.lst-top__size { margin-top: 6px; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; color: var(--slate-deep); font-variant-numeric: tabular-nums; }
.lst-top__desc { max-width: 38em; margin-top: clamp(20px, 2.4vw, 28px); }
.lst-top__desc p { font-size: 18px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.lst-top__desc p + p { margin-top: 14px; }
.lst-box {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 28px;
  align-self: start; min-height: 200px; padding: 22px 22px 24px; background: var(--slate); color: var(--ink); text-align: right;
}
.lst-box__type { font-size: 22px; line-height: 1.15; font-weight: 500; }
.lst-box__place { font-size: 18px; line-height: 1.3; font-weight: 500; }

.lst-where .pg-text { max-width: none; }
.lst-map { position: relative; height: clamp(280px, 26vw, 380px); margin-top: 18px; overflow: hidden; background: var(--paper-hi); box-shadow: 0 0 0 1px var(--line); }
.lst-map .lst-map__canvas { position: absolute; inset: 0; }
.lst-map__credit {
  position: absolute; right: 0; bottom: 0; z-index: 2; max-width: 100%; padding: 2px 8px;
  background: rgba(246, 247, 247, 0.9); font-size: 13px; line-height: 1.6; color: var(--ink-2);
}
.lst-map__credit a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--line-strong); }
.lst-map__credit a:hover { color: var(--ink); text-decoration-color: currentColor; }
.lst-where__address { margin-top: 14px; }
.lst-where__address a { display: inline-block; padding-block: 4px; margin-block: -4px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong); }
.lst-where__address a:hover { text-decoration-color: currentColor; }

.lst-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 7vw, 100px); }
.lst-more > .pg-section { min-width: 0; }
.lst-facts { margin-top: 8px; border-top: 0; }
.lst-broker .owner__contact { margin-top: 20px; }
.lst-broker__text { max-width: 31em; margin-top: 20px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.lst-broker__actions { margin-top: 20px; }
.owner__contact { display: flex; flex-wrap: wrap; column-gap: 20px; margin-top: 4px; }
.owner__contact a {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-variant-numeric: tabular-nums;
  text-decoration: underline; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong); overflow-wrap: anywhere;
}
.owner__contact a:hover { text-decoration-color: currentColor; }

.lst-back { margin-top: clamp(44px, 5vw, 64px); }
.lst-back a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 17px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong);
}
.lst-back a:hover { text-decoration-color: currentColor; }
.lst-foot { margin-top: 20px; border-top: 1px solid var(--line); }
.lst-foot .related { margin-top: 12px; padding-top: 0; border-top: 0; }
.lst-foot .related .pg-h2 { font-size: 15px; line-height: 1.5; letter-spacing: 0; font-weight: 400; color: var(--ink-3); }
.lst-foot .related ul { display: flex; flex-wrap: wrap; column-gap: 28px; margin-top: 0; }
.lst-foot .related li { border: 0; }
.lst-foot .related a { min-height: 44px; padding: 0; font-size: 15.5px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong); }
.lst-foot .related a::after { content: none; }
.lst-foot .related a:hover { color: var(--ink); text-decoration-color: currentColor; }
.lst-foot .pg-machine { margin-top: 4px; }

/* förstoringen */
html.lbx-open { overflow: hidden; }
.lbx {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--ink); color: var(--night-text); overscroll-behavior: contain;
}
.lbx::backdrop { background: var(--ink); }
.lbx__frame { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; padding: 76px clamp(16px, 8vw, 112px) 24px; touch-action: pan-y pinch-zoom; }
.lbx__figure { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; max-height: 100%; }
.lbx__stage { display: flex; align-items: center; justify-content: center; min-height: 0; max-width: 100%; }
.lbx__img { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); object-fit: contain; background: var(--paper-hi); }
.lbx__caption { max-width: 48em; font-size: 15px; line-height: 1.5; color: var(--night-2); text-align: center; }
.lbx__count { margin-right: 10px; color: var(--night-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.lbx__count:empty { display: none; }
.lbx__btn {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--night-line); border-radius: 50%; background: rgba(236, 238, 238, 0.08); color: var(--night-text); cursor: pointer;
  transition: background 0.15s;
}
.lbx__btn:hover { background: rgba(236, 238, 238, 0.2); }
.lbx__btn:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.lbx__close { top: 16px; right: 16px; }
.lbx__nav { top: 50%; margin-top: -24px; }
.lbx__nav--prev { left: clamp(8px, 2.4vw, 32px); }
.lbx__nav--next { right: clamp(8px, 2.4vw, 32px); }

@media (max-width: 860px) {
  .lst-more { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .lst-gallery { margin-inline: calc(-1 * var(--gutter)); }
  .lst-gallery__item, .lst-gallery[data-count] .lst-gallery__item { flex-basis: 100%; }
  .lst-gallery__open, .lst-gallery[data-count] .lst-gallery__open { aspect-ratio: 4 / 3; }
  .lst-plans[data-count="2"] .lst-plans__list { grid-template-columns: 1fr; }
  .lst-plans__open img { height: clamp(200px, 60vw, 380px); }
  .lst-top { grid-template-columns: 1fr; }
  .lst-box { min-height: 150px; }
  .lbx__frame { padding: 72px 12px 88px; }
  .lbx__img { max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); }
  .lbx__nav { top: auto; bottom: 20px; margin-top: 0; }
  .lbx__nav--prev { left: 16px; }
  .lbx__nav--next { right: 16px; }
}
@media (max-width: 560px) {
  .lst-top__desc p { font-size: 17px; }
  .lst-broker__actions .btn { width: 100%; }
}
@media (forced-colors: active) {
  .lst-gallery__arrow, .lbx__btn { border: 1px solid ButtonText; }
  .lst-box { border: 1px solid CanvasText; }
}
@media print {
  .lst-gallery__arrow, .lst-gallery__count, .lst-map, .lbx { display: none !important; }
  .lst-gallery__track { flex-wrap: wrap; overflow: visible; }
  .lst-gallery__item { flex-basis: calc((100% - 8px) / 3) !important; }
  .lst-gallery__item:nth-child(n+4) { display: none; }
  .lst-box { background: none; border: 1px solid var(--ink); }
}

/* ---------------------------------------------------------------- kundcase */
/* Beslut 29 september 2026 ("ska inte se ut som Skatteverkets hemsida"). Korten
   (src/components/CaseCards.astro) på startsidan, /referenser/ och casesidorna, och casesidornas
   layout (src/layouts/CasePage.astro): stor rubrik, faktarad, bild ur 3D-modellen, numrerade
   avsnitt, tidslinje, citat i mörkt band och fler case. */
.cases { background: var(--paper); }
.cases__all { margin-top: 28px; }

.case-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--col-gap); margin-top: clamp(28px, 3.5vw, 48px); }
.case-cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--paper-hi); box-shadow: 0 0 0 1px var(--line); transition: box-shadow 0.2s; }
.case-card:hover { box-shadow: 0 0 0 1px var(--ink); }
.case-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper); }
.case-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.case-card:hover .case-card__media img { transform: scale(1.04); }
.case-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 22px 22px 24px; }
.case-card__logo { display: block; width: auto; max-width: 140px; height: 28px; object-fit: contain; object-position: left center; }
.case-card__company { font-size: 16px; font-weight: 600; line-height: 28px; }
.case-card__title { margin-top: 18px; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.15; letter-spacing: -0.022em; font-weight: 600; text-wrap: balance; }
.case-card__title a { display: inline-block; min-height: 24px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: transparent; transition: text-decoration-color 0.2s; }
.case-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.case-card:hover .case-card__title a { text-decoration-color: currentColor; }
.case-card__route { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.case-card__route::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--slate-deep); }
.case-card__more { margin-top: auto; padding-top: 24px; font-size: 15.5px; font-weight: 500; }
.case-card__more::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform 0.2s; }
.case-card:hover .case-card__more::after { transform: translateX(4px); }
@supports selector(:has(a)) {
  .case-card__title a:focus-visible { outline: none; }
  .case-card:has(.case-card__title a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
}

.case-hero { padding-top: clamp(12px, 3vw, 36px); }
/* Utan versaler och spärrning (30 september 2026: "ta bort versalstilen på kundcasen"). */
.case-hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(16px, 2.5vw, 32px); font-size: 15px; font-weight: 500; color: var(--ink-2); }
.case-hero__eyebrow > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.case-hero__eyebrow > span:first-child::before { content: ""; width: 9px; height: 9px; background: var(--ink); }
.case-hero__logo { display: block; width: auto; max-width: 170px; height: 34px; object-fit: contain; object-position: left center; }
.case-hero__company { font-size: 16px; color: var(--ink); }
.case-hero__title { margin-top: clamp(14px, 2vw, 24px); max-width: 13em; font-size: clamp(40px, 6.4vw, 96px); line-height: 0.98; letter-spacing: -0.04em; font-weight: 600; text-wrap: balance; }
.case-hero__lead { margin-top: clamp(20px, 2.4vw, 32px); max-width: 34em; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; letter-spacing: -0.008em; color: var(--ink-2); text-wrap: pretty; }
/* Lika breda spalter med skiljelinjen mitt i mellanrummet, som .promise__points. */
.case-facts { --col-gap: clamp(32px, 2.8vw, 40px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: clamp(32px, 4.5vw, 56px); border-top: 1px solid var(--ink); }
.case-facts__item { position: relative; min-width: 0; padding: 16px 0 4px; }
.case-facts__item + .case-facts__item::before { content: ""; position: absolute; inset-block: 0; left: calc(var(--col-gap) / -2); border-left: 1px solid var(--line); }
.case-facts dt { font-size: 14.5px; font-weight: 500; color: var(--ink-3); }
.case-facts dd { margin-top: 8px; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.18; letter-spacing: -0.02em; font-weight: 500; text-wrap: balance; }

.case-figure { margin-top: clamp(32px, 4.5vw, 64px); }
.case-figure img { display: block; width: 100%; height: auto; background: var(--paper-hi); box-shadow: 0 0 0 1px var(--line); }
.case-figure__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 14px; font-size: 14.5px; color: var(--ink-2); }
.case-figure__key { display: inline-flex; align-items: center; gap: 10px; }
.case-figure__key::before { content: ""; width: 12px; height: 12px; flex: none; box-sizing: border-box; }
.case-figure__key--new::before { background: var(--ink); }
.case-figure__key--old::before { border: 2px solid var(--vacancy); }
.case-figure__credit { margin-left: auto; color: var(--ink-3); }
/* Fotot under sidhuvudet på innehållssidorna (1 oktober 2026). */
.pg-figure { margin-top: clamp(28px, 4vw, 56px); }
/* Bildkällor: ett foto per rad, sidan först och fotograf, källa och licens under. */
.pg-credits { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.pg-credits li { padding-top: 16px; border-top: 1px solid var(--line); }
.pg-credits__page { font-weight: 500; }
.pg-credits__meta { margin-top: 4px; font-size: 14.5px; color: var(--ink-2); }

.case-body { margin-top: clamp(24px, 3vw, 40px); }
.case-prose { counter-reset: case-section; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.case-prose > * { grid-column: 6 / -1; min-width: 0; max-width: 40em; font-size: 18px; line-height: 1.6; }
.case-prose > h2 {
  grid-column: 1 / span 4; max-width: none;
  margin-top: clamp(40px, 5vw, 72px); padding-top: 18px; border-top: 1px solid var(--ink);
  font-size: clamp(24px, 2.3vw, 34px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; text-wrap: balance;
}
.case-prose > h2::before { counter-increment: case-section; content: counter(case-section, decimal-leading-zero); display: block; margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-3); }
.case-prose > * + :not(h2) { margin-top: 18px; }
.case-prose > h2 + * { margin-top: clamp(40px, 5vw, 72px); padding-top: 18px; border-top: 1px solid var(--line); }
.case-prose > h2:first-child, .case-prose > h2:first-child + * { margin-top: 0; }
.case-prose strong { font-weight: 600; }
.case-prose ul > li { position: relative; padding-left: 24px; }
.case-prose ul > li + li { margin-top: 8px; }
.case-prose ul > li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 8px; height: 8px; background: var(--slate-deep); }
.case-prose ol { counter-reset: case-step; }
.case-prose ol > li { position: relative; counter-increment: case-step; padding: 3px 0 26px 56px; }
.case-prose ol > li:last-child { padding-bottom: 0; }
.case-prose ol > li::before {
  content: counter(case-step); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.case-prose ol > li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 6px; width: 1px; background: var(--line-strong); }
.case-prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

.case-quote { margin-top: clamp(64px, 8vw, 120px); padding-block: clamp(64px, 8vw, 128px); background: var(--ink); color: var(--night-text); }
.case-quote figure { max-width: 60rem; }
.case-quote blockquote p { font-size: clamp(26px, 3.1vw, 46px); line-height: 1.18; letter-spacing: -0.025em; font-weight: 500; color: #fff; text-wrap: balance; }
.case-quote figcaption { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 32px; font-size: 16px; }
.case-quote__name { font-weight: 600; color: #fff; }
.case-quote__role { color: var(--night-2); }

.case-more { margin-top: clamp(64px, 8vw, 112px); }
.case-more__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-top: 18px; border-top: 1px solid var(--ink); }
.case-more__links { margin-top: 28px; font-size: 16px; color: var(--ink-2); }
.case-more__links a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.case-end { padding-bottom: clamp(64px, 8vw, 112px); }

@media (max-width: 860px) {
  .case-cards, .case-cards--two { grid-template-columns: 1fr; gap: 20px; }
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Två spalter: skiljelinjen bara före andra spalten, och linjen mellan raderna går över mellanrummet. */
  .case-facts__item { padding: 14px 0 16px; }
  .case-facts__item:nth-child(odd)::before { content: none; }
  .case-facts__item:nth-child(n + 3)::after { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid var(--line); }
  .case-facts__item:nth-child(n + 3):nth-child(odd)::after { right: calc(var(--col-gap) / -2); }
  .case-facts__item:nth-child(n + 3):nth-child(even)::after { left: calc(var(--col-gap) / -2); }
  .case-prose { display: block; }
  .case-prose > * { max-width: none; font-size: 17px; }
  .case-prose > h2 + *, .case-prose > h2:first-child + * { margin-top: 18px; padding-top: 0; border-top: 0; }
  .case-figure__credit { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .case-card__media img, .case-card__more::after { transition: none; }
  .case-card:hover .case-card__media img { transform: none; }
}
@media (forced-colors: active) {
  .case-hero__eyebrow > span:first-child::before, .case-card__route::before, .case-prose ul > li::before, .case-figure__key--new::before { background: CanvasText; }
  .case-prose ol > li::before { border: 1px solid CanvasText; }
}
/* Sista avsnittet (Resultatet) får större text: det är det läsaren letar efter. */
.case-prose > h2:last-of-type + p { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; }
@media (max-width: 860px) { .case-prose > h2:last-of-type + p { font-size: 20px; } }
/* Korten i en smal spalt (/referenser/): bilden till vänster, texten till höger. */
.case-cards--list { grid-template-columns: 1fr; gap: 20px; }
.case-cards--list .case-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.case-cards--list .case-card__media { aspect-ratio: auto; height: 100%; min-height: 190px; }
.case-cards--list .case-card__title { margin-top: 14px; font-size: clamp(21px, 1.7vw, 24px); }
@media (max-width: 560px) {
  .case-cards--list .case-card { grid-template-columns: 1fr; }
  .case-cards--list .case-card__media { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
}
/* CTA med partnernas porträtt utan namn (kundcasen, CtaBlock people). */
.pg-cta--people { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 48px); align-items: center; }
.pg-cta__people { display: flex; gap: 10px; }
.pg-cta__people img { display: block; width: clamp(88px, 9vw, 120px); height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; filter: saturate(0.8); background: var(--paper); }
.case-hero__time { margin-left: auto; font-weight: 400; color: var(--ink-3); }
@media (max-width: 560px) {
  .pg-cta--people { grid-template-columns: 1fr; }
  .case-hero__time { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------- display serif
   Rubriker, stora citat och kortrubriker i Newsreader. Brödtext, knappar, etiketter och formulär
   behåller Familjen Grotesk. Serifen tål mindre negativ spärrning och en lättare vikt än groteskens 500–600. */
.hero__title, .h2, .h3, .pg__title, .pg-h2, .prose h2, .pg-cta__title,
.situation h3, .promise__point h3, .person__name,
.quote p, .pg-quote p, .menu__links > a, .brief__result .brief__result-title,
.pg-list__title, .lst-top__title, .lst-card__title, .case-card__title,
.case-hero__title, .case-prose > h2, .case-quote blockquote p, .case-facts dd, .pg-hero__fact dd {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.012em;
  font-optical-sizing: auto;
}
.hero__title, .pg__title, .case-hero__title { letter-spacing: -0.02em; }
.case-prose > h2::before { font-family: var(--font); }

/* ================================================================ Undersidor som säljer (30 september 2026)
   "Vi är inte Wikipedia, vi är ett kommersiellt bolag som vill få affärer". Sidhuvudet som i
   kundcasen (ingress, knapp, faktarad), rubrik och text i två spalter på breda skärmar (.pg--wide),
   säljavsnitten numrerade (.pg-flow), ljust band för kundcitatet, mörkt band för CTA:n och detaljerna
   (Bra att veta, I korthet, vanliga frågor) efter CTA:n. Bara befintliga tokens. */

/* sidhuvudet (PageHero.astro) */
.pg-hero { padding-top: clamp(12px, 3vw, 36px); }
/* Utan versaler och spärrning, som kundcasen (30 september 2026). */
.pg-hero__eyebrow { display: flex; align-items: center; gap: 10px; margin-top: clamp(16px, 2.5vw, 32px); font-size: 15px; font-weight: 500; color: var(--ink-2); }
.pg-hero__eyebrow::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--ink); }
.pg-hero .pg__title { margin-top: clamp(14px, 2vw, 24px); }
.pg-hero--sales .pg__title { max-width: 13em; font-size: clamp(40px, 6vw, 88px); line-height: 0.98; }
.pg-hero__lead { margin-top: clamp(20px, 2.4vw, 32px); max-width: 34em; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; letter-spacing: -0.008em; text-wrap: pretty; }
.pg-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: clamp(24px, 3vw, 36px); }
.pg-hero__phone, .pg-offer__phone {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong);
}
.pg-hero__phone:hover, .pg-offer__phone:hover { color: var(--ink); text-decoration-color: currentColor; }
/* Lika breda spalter med skiljelinjen mitt i mellanrummet, som .promise__points. */
.pg-hero__facts { --col-gap: clamp(32px, 2.8vw, 40px); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--col-gap); margin-top: clamp(32px, 4.5vw, 56px); border-top: 1px solid var(--ink); }
.pg-hero__fact { position: relative; min-width: 0; padding: 16px 0 4px; }
.pg-hero__fact + .pg-hero__fact::before { content: ""; position: absolute; inset-block: 0; left: calc(var(--col-gap) / -2); border-left: 1px solid var(--line); }
.pg-hero__fact dt { font-size: 14.5px; font-weight: 500; color: var(--ink-3); }
.pg-hero__fact dd { margin-top: 8px; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.2; text-wrap: balance; }
.pg-hero__more { display: flex; width: fit-content; min-height: 0; margin-top: 8px; padding-block: 2px; font-family: var(--font); font-size: 15px; font-weight: 500; letter-spacing: 0; }

/* rubrik och text i två spalter */
@media (min-width: 861px) {
  .pg--wide .pg__body { max-width: none; }
  .pg--wide .pg-section { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: calc(var(--col-gap) * 2); margin-top: clamp(40px, 5vw, 72px); padding-top: 0; border-top: 0; }
  .pg--wide .pg-section > .pg-h2 { align-self: start; padding-top: 18px; border-top: 1px solid var(--ink); }
  .pg--wide .pg-section > .pg-section__body { min-width: 0; margin-top: 0; padding-top: 18px; border-top: 1px solid var(--line); }
  .pg--wide .pg-section > .sr + .pg-section__body { grid-column: 2; }
  .pg--wide .pg-section__body :is(p, li, dd) { max-width: 40em; }
  .pg--wide .pg-section__body .pg-text, .pg--wide .pg-section__body.prose > p, .pg--wide .pg-section__body.prose li { font-size: 18px; }
}
.pg--wide .prose ul { padding-left: 0; list-style: none; }
.pg--wide .prose ul > li { position: relative; padding-left: 24px; }
.pg--wide .prose ul > li + li { margin-top: 10px; }
.pg--wide .prose ul > li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 8px; height: 8px; background: var(--slate-deep); }

/* säljavsnitten: numrerade, och listor med fetstilt början som kort */
.pg-flow { counter-reset: pg-flow; }
.pg-flow > .pg-section > .pg-h2::before { counter-increment: pg-flow; content: counter(pg-flow, decimal-leading-zero); display: block; margin-bottom: 12px; font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-3); }
/* I två spalter börjar texten på samma rad som rubriken, under löpnumret (14 oktober 2026). */
@media (min-width: 861px) {
  .pg--wide .pg-flow > .pg-section:not(.pg-offer) > .pg-h2 + .pg-section__body { padding-top: 48px; }
}
.pg-flow--cards .prose ul:has(> li > strong:first-child) { display: grid; gap: 12px; }
.pg-flow--cards .prose ul > li:has(> strong:first-child) { margin-top: 0; padding: 20px 22px 22px; background: var(--paper-hi); box-shadow: 0 0 0 1px var(--line); }
.pg-flow--cards .prose ul > li:has(> strong:first-child)::before { display: none; }
.pg-flow--cards .prose ul > li > strong:first-child { display: block; margin-bottom: 6px; font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; }
@media (min-width: 700px) {
  .pg-flow--cards .prose ul:has(> li > strong:first-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
}
/* Ett kort vars rubrik är en länk (tjänsterna, områdena) är klickbart i sin helhet. */
/* Länken är inline, så att punkten efter rubriken står kvar på raden (kvalitetsgranskningen 1 oktober 2026,
   F11: som inline-block hamnade punkten ensam på nästa rad). padding-block ger länken minst 24 px höjd;
   hela kortet är klickbart via ::after. */
.pg-flow--cards .prose ul > li > strong:first-child > a:only-child { padding-block: 2px; text-decoration: none; }
.pg-flow--cards .prose ul > li > strong:first-child > a:only-child::after { content: ""; position: absolute; inset: 0; }
.pg-flow--cards .prose ul > li:has(> strong:first-child > a:only-child) { transition: box-shadow 0.2s; }
.pg-flow--cards .prose ul > li:has(> strong:first-child > a:only-child):hover { box-shadow: 0 0 0 1px var(--ink); }
.pg-flow--cards .prose ul > li:has(> strong:first-child > a:only-child)::after { content: "→"; content: "→" / ""; position: absolute; top: 20px; right: 22px; color: var(--ink-3); transition: transform 0.2s var(--ease); }
.pg-flow--cards .prose ul > li:has(> strong:first-child > a:only-child):hover::after { transform: translateX(3px); }
.pg-flow--cards .prose ul > li:has(> strong:first-child > a:only-child) > strong { padding-right: 28px; }
.pg-flow--cards .prose ul > li > :not(strong:first-child) a, .pg-flow--cards .prose ul > li > a { position: relative; z-index: 1; }
@supports selector(:has(a)) {
  .pg-flow--cards .prose ul > li > strong:first-child > a:only-child:focus-visible { outline: none; }
  .pg-flow--cards .prose ul > li:has(> strong:first-child > a:only-child:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
}
/* numrerade listor i säljavsnitten: en tidslinje, som i kundcasen */
.pg-flow .prose ol { padding-left: 0; list-style: none; counter-reset: pg-step; }
.pg-flow .prose ol > li { position: relative; counter-increment: pg-step; padding: 3px 0 26px 56px; }
.pg-flow .prose ol > li + li { margin-top: 0; }
.pg-flow .prose ol > li:last-child { padding-bottom: 0; }
.pg-flow .prose ol > li::before {
  content: counter(pg-step); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.pg-flow .prose ol > li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 6px; width: 1px; background: var(--line-strong); }

/* barnsidorna som kort (tjänster och områden) */
.pg-cards { display: grid; gap: 12px; }
.pg-cards li, .pg-cards li:first-child, .pg-cards li:last-child { position: relative; padding: 22px 22px 24px; border: 0; background: var(--paper-hi); box-shadow: 0 0 0 1px var(--line); transition: box-shadow 0.2s; }
.pg-cards li:hover { box-shadow: 0 0 0 1px var(--ink); }
.pg-cards .pg-list__title a { text-decoration: none; }
.pg-cards .pg-list__title a::after { content: ""; position: absolute; inset: 0; }
.pg-cards .pg-list__title a::before { content: "→"; content: "→" / ""; float: right; margin-left: 12px; font-family: var(--font); color: var(--ink-3); transition: transform 0.2s var(--ease); }
.pg-cards li:hover .pg-list__title a::before { transform: translateX(3px); }
@media (min-width: 700px) { .pg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); } }
@supports selector(:has(a)) {
  .pg-cards .pg-list__title a:focus-visible { outline: none; }
  .pg-cards li:has(.pg-list__title a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
}

/* steg som tidslinje (samma som kundcasens) */
.pg-steps li { padding: 3px 0 26px 56px; }
.pg-steps li:last-child { padding-bottom: 0; }
.pg-steps li::before { width: 34px; height: 34px; background: var(--ink); color: #fff; box-shadow: none; }
.pg-steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 6px; width: 1px; background: var(--line-strong); }

/* "Hur kan Locality hjälpa till?" på frågesidorna: ett erbjudande med knapp */
.pg-offer > .pg-section__body { padding: clamp(22px, 3vw, 34px); background: var(--paper-hi); box-shadow: 0 0 0 1px var(--line); }
@media (min-width: 861px) { .pg--wide .pg-offer > .pg-section__body { border-top: 0; padding-top: clamp(22px, 3vw, 34px); } }
.pg-offer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 22px; }
.prose > .pg-offer__actions { max-width: none; }

/* detaljerna efter CTA:n */
.pg-end { padding-bottom: clamp(48px, 6vw, 88px); }
.pg-details { margin-top: 0; }
.pg-summary .answer { padding: clamp(20px, 3vw, 28px); }
.pg-summary .answer__text { font-size: 18px; line-height: 1.55; }

/* kundcitatet i ett ljust band */
.pg-quote-band { margin-top: 0; background: var(--paper-hi); color: var(--ink); border-block: 1px solid var(--line); }
.pg-quote-band blockquote p, .pg-quote-band .case-quote__name { color: var(--ink); }
.pg-quote-band .case-quote__role { color: var(--ink-2); }

/* CTA:n i ett mörkt band */
.pg-cta--band { margin-top: 0; padding: clamp(56px, 7vw, 104px) 0; background: var(--ink); color: var(--night-text); box-shadow: none; }
.pg-cta__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px var(--col-gap); align-items: end; }
.pg-cta--band .pg-cta__title { color: #fff; font-size: clamp(32px, 3.9vw, 58px); line-height: 1.05; }
.pg-cta--band .pg-cta__text { max-width: 30em; margin-top: 16px; font-size: clamp(17px, 1.4vw, 20px); color: var(--night-2); }
.pg-cta--band .pg-cta__actions { justify-content: flex-end; margin-top: 0; }
.pg-cta--band .pg-cta__direct a { color: var(--night-text); text-decoration-color: var(--night-line); }
.pg-cta--band .pg-cta__direct a:hover { color: #fff; text-decoration-color: currentColor; }
.pg-cta--band :focus-visible { outline-color: var(--paper); }

@media (max-width: 860px) {
  .pg-hero + .pg__wrap { padding-top: 0; }
  .pg-hero__facts { grid-auto-flow: row; grid-template-columns: 1fr; }
  .pg-hero__fact { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 14px 0; }
  .pg-hero__fact + .pg-hero__fact { border-top: 1px solid var(--line); }
  .pg-hero__fact + .pg-hero__fact::before { content: none; }
  .pg-hero__fact dd { margin-top: 0; font-size: 19px; }
  .pg-cta__inner { grid-template-columns: 1fr; align-items: start; }
  .pg-cta--band .pg-cta__actions { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .pg-hero--sales .pg__title { font-size: clamp(34px, 9.6vw, 44px); line-height: 1.02; }
  .pg-hero__lead { font-size: 18.5px; }
  .pg-hero__actions .btn, .pg-offer__actions .btn { width: 100%; }
  .pg-hero__fact { grid-template-columns: 1fr; }
  .pg-flow .prose ul > li:has(> strong:first-child) { padding: 18px 18px 20px; }
}
@media (forced-colors: active) {
  .pg-hero__eyebrow::before, .pg--wide .prose ul > li::before { background: CanvasText; }
  .pg-steps li::before, .pg-flow .prose ol > li::before { border: 1px solid CanvasText; }
  .pg-cta--band, .pg-cta--band .pg-cta__title { border: 1px solid CanvasText; }
}
@media print {
  .pg-hero__actions, .pg-offer__actions { display: none !important; }
  .pg-quote-band { border: 0; }
}

/* FÖRSLAG 2026-09-30: erfarenhet och registrering efter kartan (ClientsStrip.astro), i samma form som
   "Varför gå via Locality?": mörk linje överst, kolumner med tunna skiljelinjer, siffran i rubrikstilen. */
.trust { padding-block: clamp(44px, 5.4vw, 80px); }
.trust__facts { --col-gap: clamp(40px, 4.4vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); border-top: 1px solid var(--ink); }
.trust__facts li { position: relative; min-width: 0; padding: 26px 0 4px; }
.trust__facts li + li::before { content: ""; position: absolute; inset-block: 0; left: calc(var(--col-gap) / -2); border-left: 1px solid var(--line); }
.trust__figure { display: block; font-family: var(--font-display); font-size: clamp(34px, 3.3vw, 50px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 400; color: var(--ink); }
.trust__facts p { margin-top: 12px; max-width: 24em; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.trust__facts a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--line-strong, currentColor); }
@media (max-width: 860px) {
  .trust__facts { grid-template-columns: 1fr; }
  .trust__facts li { padding: 20px 0 20px; }
  .trust__facts li + li { border-top: 1px solid var(--line); }
  .trust__facts li + li::before { content: none; }
  .trust__figure { font-size: 34px; }
  .trust__facts p { margin-top: 8px; }
}