/* ==========================================================================
   Hemsidebygget — designsystemet bakom demosidorna.
   EN fil, delad av alla demos. Nischen byter bara --accent och typsnittsval.

   Varfor en delad fil: 2026-08-05 slog Cloudflares filtak i for att varje
   sajt bar med sig sin egen kopia av allt. En delad stilfil ar 1 fil i
   stallet for 1 per demo, och andrar man en detalj andras alla samtidigt.

   Regler som inte far andras tillbaka:
   - Inga externa typsnitt, ingen CDN. Sidan ska ladda direkt aven pa 3G och
     fungera nar Google Fonts ar blockerat. Systemtypsnitt ar snabbast och
     ser ratt ut i bade Windows, Mac och Android.
   - Allt maste fungera utan JavaScript. JS far forbattra, aldrig bara.
   - Kontrast minst 4,5:1 pa all brodtext. Matt, inte gissat.
   ========================================================================== */

:root {
  /* Nischen skriver over de har tre. Resten ar samma i alla demos. */
  --accent:        #1f4d3d;
  --accent-mork:   #16382c;
  --accent-ljus:   #eef4f1;

  --blek:          #faf9f7;
  --papper:        #ffffff;
  --blackk:        #14120f;
  /* Den morka ytan i kontaktblocket och sidfoten. Nastan svart som standard,
     men en nisch vars hero ar en fargplatta ska satta den till sin egen morka
     ton. Annars gar sidan fran marinbla till svart halvvags ner och ser ut
     som tva olika sajter. Sett i chromium pa ekonomidemon. */
  --mork-yta:      #14120f;
  --text:          #2b2823;
  --text-svag:     #6b655c;
  --linje:         #e6e1d8;

  --radie:         14px;
  --radie-liten:   8px;
  --skugga:        0 1px 2px rgba(20,18,15,.04), 0 8px 24px rgba(20,18,15,.06);
  --skugga-hog:    0 2px 4px rgba(20,18,15,.05), 0 18px 48px rgba(20,18,15,.12);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  --bredd: 1180px;
  --luft: clamp(64px, 9vw, 128px);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { color: var(--blackk); line-height: 1.1; letter-spacing: -.02em; margin: 0; }
h1 { font-size: clamp(38px, 6.4vw, 68px); font-weight: 700; letter-spacing: -.035em; }
h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; }
h3 { font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
p  { margin: 0 0 1.1em; }
a  { color: inherit; }

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

.omslag { width: 100%; max-width: var(--bredd); margin: 0 auto; padding: 0 24px; }
.sektion { padding: var(--luft) 0; }
.sektion--blek { background: var(--blek); }

/* Overrubrik: den lilla etiketten ovanfor varje rubrik. Ger sidan rytm och
   talar om vad avsnittet handlar om innan man last rubriken. */
.etikett {
  display: inline-block; margin: 0 0 18px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent);
}
.ingress { font-size: clamp(17px, 1.5vw, 19.5px); color: var(--text-svag); max-width: 58ch; }

/* --------------------------------------------------------------- demoraden
   Star hogst upp pa VARJE demo. Kunden ska inom en sekund forsta att sidan
   ar ett exempel byggt at dem, inte en riktig firmas sajt de rakat hamna pa.
   Sukhrob 2026-08-11: "kunden ska direkt forsta vad de tittar pa." */
.demorad {
  background: var(--blackk); color: #fff;
  font-size: 14.5px; line-height: 1.45;
  padding: 11px 0;
  position: relative; z-index: 60;
}
.demorad .omslag { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; }
.demorad b { font-weight: 650; }
.demorad span { color: rgba(255,255,255,.72); }
.demorad a {
  color: #fff; text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.34); border-radius: 999px;
  padding: 5px 15px; font-size: 13.5px; font-weight: 600;
  transition: background .18s ease, border-color .18s ease;
}
.demorad a:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }

/* ------------------------------------------------------------------ toppen */
.topp {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.topp.klistrad { border-bottom-color: var(--linje); box-shadow: 0 6px 24px rgba(20,18,15,.05); }
.topp .omslag { display: flex; align-items: center; gap: 28px; height: 74px; }

.logga { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.logga__marke {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 16px; letter-spacing: .02em;
}
.logga__namn { font-weight: 700; font-size: 18.5px; letter-spacing: -.02em; color: var(--blackk); }
.logga__ort { display: block; font-size: 12px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--text-svag); margin-top: 1px; }

.meny { display: flex; gap: 30px; align-items: center; }
.meny a { text-decoration: none; font-size: 15.5px; font-weight: 550; color: var(--text); position: relative; padding: 4px 0; }
.meny a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--accent); transition: right .22s ease;
}
.meny a:hover::after { right: 0; }

.tel { font-weight: 650; text-decoration: none; font-size: 15.5px; white-space: nowrap; }

/* --------------------------------------------------------------- knapparna */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 650; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease;
}
.knapp--fylld { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(20,18,15,.16); }
.knapp--fylld:hover { background: var(--accent-mork); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(20,18,15,.22); }
.knapp--linje { border-color: rgba(255,255,255,.5); color: #fff; }
.knapp--linje:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.knapp--mork { border-color: var(--linje); color: var(--blackk); background: #fff; }
.knapp--mork:hover { border-color: var(--blackk); transform: translateY(-1px); }
.knapp--stor { padding: 17px 34px; font-size: 17px; }
.knapp .pil { transition: transform .18s ease; }
.knapp:hover .pil { transform: translateX(3px); }

/* -------------------------------------------------------------------- hero */
.hero { position: relative; color: #fff; isolation: isolate; }
.hero__bild { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,9,7,.62) 0%, rgba(10,9,7,.34) 42%, rgba(10,9,7,.80) 100%),
    linear-gradient(96deg, rgba(10,9,7,.66) 0%, rgba(10,9,7,.12) 62%);
}
/* Bredden i PIXLAR, aldrig i ch. `ch` raknas mot elementets egen font-size,
   och den har rutan arver brodtextens 17px - inte rubrikens 68. 27ch blev
   darfor 247px breda och rubriken brot pa sex rader. Matt i webblasaren. */
.hero__inre { padding: clamp(88px, 13vw, 168px) 0 clamp(64px, 8vw, 104px); max-width: min(730px, 100%); }
.hero h1 { color: #fff; text-wrap: balance; }
.hero__under { font-size: clamp(17px, 1.7vw, 20px); color: rgba(255,255,255,.9); max-width: 46ch; margin: 22px 0 34px; }
.hero__knappar { display: flex; gap: 14px; flex-wrap: wrap; }

/* Faktaraden under heron. Konkreta uppgifter slar loften: den som letar
   hantverkare vill veta upptagningsomrade och om ROT gar att anvanda. */
.fakta { border-top: 1px solid rgba(255,255,255,.22); margin-top: clamp(40px, 6vw, 72px); }
.fakta__rad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px 32px; padding: 26px 0 0; }
.fakta__post { padding-bottom: 26px; }
.fakta__varde { font-size: 25px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.fakta__text { font-size: 13.5px; color: rgba(255,255,255,.72); margin-top: 2px; }

/* ---------------------------------------------------------------- rubrikrad */
.rubrikrad { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: 40px; align-items: end; margin-bottom: 52px; }
.rubrikrad h2 { text-wrap: balance; }

/* ----------------------------------------------------------------- tjanster */
.rutnat { display: grid; gap: 22px; }
.rutnat--3 { grid-template-columns: repeat(3, 1fr); }
.rutnat--2 { grid-template-columns: repeat(2, 1fr); }

.kort {
  background: var(--papper); border: 1px solid var(--linje); border-radius: var(--radie);
  padding: 30px 28px 32px;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.kort:hover { transform: translateY(-3px); box-shadow: var(--skugga-hog); border-color: transparent; }
.kort__ikon {
  width: 44px; height: 44px; border-radius: 11px; margin-bottom: 20px;
  background: var(--accent-ljus); color: var(--accent);
  display: grid; place-items: center;
}
.kort__ikon svg { width: 22px; height: 22px; }
.kort h3 { margin-bottom: 9px; }
.kort p { color: var(--text-svag); font-size: 15.5px; margin: 0; }

/* ------------------------------------------------------------------ galleri */
.galleri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.galleri__post { position: relative; border-radius: var(--radie); overflow: hidden; background: var(--blackk); }
.galleri__post:first-child { grid-column: span 2; grid-row: span 2; }
.galleri__post img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.galleri__post:first-child img { aspect-ratio: 8/7; }
.galleri__post:hover img { transform: scale(1.045); }
.galleri__text {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 24px 20px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(10,9,7,.78));
}
.galleri__text b { display: block; font-size: 17px; font-weight: 650; }
.galleri__text span { font-size: 14px; color: rgba(255,255,255,.78); }

/* --------------------------------------------------------------------- steg */
.steg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: n; }
.steg__post { counter-increment: n; position: relative; padding-top: 30px; }
.steg__post::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--accent);
}
.steg__post::after {
  content: ""; position: absolute; top: 8px; left: 34px; right: -14px; height: 1px; background: var(--linje);
}
.steg__post:last-child::after { display: none; }
.steg__post h3 { margin-bottom: 7px; font-size: 18px; }
.steg__post p { color: var(--text-svag); font-size: 15px; margin: 0; }

/* ----------------------------------------------------------------- om-delen */
.delad { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 76px); align-items: center; }
.delad__bild { border-radius: var(--radie); overflow: hidden; box-shadow: var(--skugga-hog); }
.delad__bild img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.punktlista { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 13px; }
.punktlista li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.punktlista svg { width: 21px; height: 21px; flex: none; color: var(--accent); margin-top: 2px; }

/* ------------------------------------------------------------------ kontakt */
.kontakt { background: var(--mork-yta); color: #fff; }
.kontakt h2 { color: #fff; }
.kontakt .ingress { color: rgba(255,255,255,.74); }
.kontakt__rutnat { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(36px, 6vw, 72px); align-items: start; }
.uppgift { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.14); }
.uppgift:first-of-type { border-top: 0; }
.uppgift svg { width: 20px; height: 20px; color: rgba(255,255,255,.55); flex: none; margin-top: 3px; }
.uppgift b { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 3px; }
.uppgift a, .uppgift span { color: #fff; text-decoration: none; font-size: 17px; }

.blankett { background: #fff; border-radius: var(--radie); padding: clamp(26px, 3.4vw, 38px); color: var(--text); }
.blankett__rad { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.falt { display: block; margin-bottom: 16px; }
.falt span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; color: var(--blackk); }
.falt input, .falt textarea, .falt select {
  width: 100%; font: inherit; font-size: 16px; color: var(--text);
  padding: 13px 15px; border: 1.5px solid var(--linje); border-radius: var(--radie-liten);
  background: var(--blek); transition: border-color .16s ease, background .16s ease;
}
.falt input:focus, .falt textarea:focus, .falt select:focus { border-color: var(--accent); background: #fff; outline: none; }
.falt textarea { min-height: 108px; resize: vertical; }
.blankett .knapp { width: 100%; }
.blankett__not { font-size: 13.5px; color: var(--text-svag); margin: 14px 0 0; text-align: center; }

/* -------------------------------------------------------------------- foten */
.foten { background: var(--mork-yta); color: rgba(255,255,255,.62); font-size: 15px; border-top: 1px solid rgba(255,255,255,.1); }
.foten .omslag { padding-top: 44px; padding-bottom: 44px; }
.foten__rutnat { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.foten b { color: #fff; display: block; margin-bottom: 12px; font-size: 15px; }
.foten a { color: rgba(255,255,255,.62); text-decoration: none; }
.foten a:hover { color: #fff; }
.foten ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foten__streck { margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13.5px; }

/* ------------------------------------------------ delad hero, tjanstenischer
   Ett foto ar inte alltid ratt svar. For en redovisningsbyra sager en satt
   rubrik mer an en inkopt bild pa en miniraknare, och risken att sidan ser
   ut som en mall med stockfoto forsvinner. Den har heron ar text pa
   fargplatta med ETT foto som ankare bredvid. */
.hero2 { background: var(--accent-mork); color: #fff; }
.hero2__rutnat {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 64px); align-items: center;
  padding: clamp(52px, 7vw, 92px) 0;
}
.hero2 h1 { color: #fff; text-wrap: balance; }
.hero2__under { font-size: clamp(17px, 1.6vw, 19.5px); color: rgba(255,255,255,.78); max-width: 46ch; margin: 20px 0 30px; }
.hero2__knappar { display: flex; gap: 14px; flex-wrap: wrap; }
.hero2__punkter {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: flex; gap: 10px 24px; flex-wrap: wrap;
  font-size: 14.5px; color: rgba(255,255,255,.74);
}
.hero2__punkter li { display: flex; gap: 8px; align-items: center; }
.hero2__punkter svg { width: 17px; height: 17px; flex: none; opacity: .6; }
.hero2__bild { position: relative; border-radius: var(--radie); overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.34); }
.hero2__bild img { width: 100%; aspect-ratio: 5/4; object-fit: cover; }

/* Brickan pa bilden. Konkret uppgift, aldrig ett pastaende om kvalitet. */
.bricka {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  background: rgba(255,255,255,.95); border-radius: var(--radie-liten);
  padding: 14px 18px; color: var(--text);
}
.bricka b { display: block; font-size: 15.5px; color: var(--blackk); }
.bricka span { font-size: 13.5px; color: var(--text-svag); }

/* -------------------------------------------------------- monster pa morkt
   For nischer dar en bra hero-bild inte finns. IT- och konsultfoton ar den
   mest generiska kategori som gar att kopa, och en dalig stockbild kostar
   mer fortroende an ingen bild alls. Rutnatet plus en mjuk glod ger djup
   utan att pasta nagot om foretaget.

   Ligger som ::before sa att innehallet kan sta i normalflodet ovanpa. */
.monster { position: relative; isolation: isolate; overflow: hidden; }
.monster::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Rutnatet tonar ut nedat sa att det aldrig konkurrerar med texten. */
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
}
.monster::after {
  content: ""; position: absolute; z-index: -1;
  top: -30%; right: -10%; width: 70%; aspect-ratio: 1;
  /* Glodet blandas med VITT, inte bara med genomskinligt. En nisch vars
     accentfarg ligger nara sin egen morka yta (stadfirmans petrolgrona mot
     petrolsvart) fick annars ingen glod alls, och heron blev en platt
     fargyta. Med vitt i blandningen syns den i alla fem nischerna. */
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 55%, #fff 45%) 0%, transparent 68%);
  opacity: .3;
  pointer-events: none;
}

/* ------------------------------------------------------- erbjudandekortet
   Ett vitt kort pa den morka heron med EN konkret sak kunden kan gora nu.
   For en tjansteforsaljning ar nasta steg sjalva produkten: "vad hander om
   jag hor av mig?" ska besvaras innan man scrollat. */
.erbjud {
  background: #fff; color: var(--text);
  border-radius: var(--radie); padding: clamp(24px, 3vw, 32px);
  box-shadow: 0 30px 70px rgba(0,0,0,.34);
}
.erbjud h2 { font-size: 21px; letter-spacing: -.015em; }
.erbjud__lista { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 14px; counter-reset: e; }
.erbjud__lista li { counter-increment: e; display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; }
.erbjud__lista li::before {
  content: counter(e); flex: none;
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--accent-ljus); color: var(--accent);
  font-size: 13px; font-weight: 700; display: grid; place-items: center;
}
.erbjud .knapp { width: 100%; }
.erbjud__not { font-size: 13.5px; color: var(--text-svag); margin: 13px 0 0; text-align: center; }

/* ------------------------------------------------------------------- chips
   Sma etiketter. Konkreta ord om vad de arbetar med sager mer an en mening
   om "helhetslosningar". */
.chips { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.chips li {
  font-size: 13.5px; font-weight: 550; padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.86);
}
.chips--ljus li { border-color: var(--linje); color: var(--text-svag); }

/* ------------------------------------------------------------- uppdragsfall
   "Sa kan ett uppdrag se ut". ALDRIG utgivet for att vara en riktig kund,
   och aldrig med pahittade siffror pa resultat. Situationen och vad som
   levererades racker, och det ar det enda vi arligt kan pasta pa en demo. */
.fall { display: grid; gap: 2px; border-top: 1px solid var(--linje); }
.fall__post {
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(20px, 4vw, 56px);
  padding: 30px 0; border-bottom: 1px solid var(--linje);
}
.fall__lage { font-size: 18.5px; font-weight: 650; color: var(--blackk); letter-spacing: -.015em; }
.fall__marke { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--accent); margin-bottom: 9px; }
.fall__gjort { color: var(--text-svag); margin: 0; font-size: 15.5px; }
.fall__gjort b { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------ specifikation
   Etikett och varde i en rad, inuti ett kort. For nischer dar kunden valjer
   pa siffror: lastvikt, matt, behorighet, area. Ett paslag om "moderna
   fordon" sager ingenting, "8 ton, bakgavellyft, 7,2 m flak" avgor kopet. */
.spec { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--linje); display: grid; gap: 9px; }
.spec li { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.spec b { color: var(--blackk); font-weight: 600; text-align: right; }
.spec span { color: var(--text-svag); }

/* ---------------------------------------------------------------- faktakort
   Mork panel med konkreta uppgifter om foretaget. Alternativ till ett foto
   nar det inte finns nagon bild vard att visa, och starkare an en bild som
   inte sager nagot. */
.faktakort {
  background: var(--mork-yta); color: #fff;
  border-radius: var(--radie); padding: clamp(26px, 3.4vw, 36px);
}
.faktakort h3 { color: #fff; font-size: 19px; margin-bottom: 4px; }
.faktakort > p { color: rgba(255,255,255,.7); font-size: 15px; margin: 0 0 22px; }
.faktakort dl { margin: 0; display: grid; gap: 0; }
.faktakort div { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.14); }
.faktakort dt { color: rgba(255,255,255,.66); font-size: 15px; margin: 0; }
.faktakort dd { color: #fff; font-size: 15.5px; font-weight: 600; margin: 0; text-align: right; }

/* ------------------------------------------------------------------ priserna
   Ekonominischen leder med pris. Den vanligaste orsaken att ett smaforetag
   inte byter byra ar inte att de ar nojda, det ar att de inte vet vad ett
   byte kostar och inte vill fraga. Da ar en oppen prislista sjalva saljet. */
.prislista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.pris {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--linje); border-radius: var(--radie);
  padding: 30px 28px 32px;
}
.pris--vald { border-color: var(--accent); box-shadow: var(--skugga-hog); position: relative; }
.pris__flagga {
  position: absolute; top: -12px; left: 28px;
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 5px 13px;
}
.pris h3 { font-size: 18px; }
.pris__tal { display: flex; align-items: baseline; gap: 7px; margin: 15px 0 3px; }
.pris__tal b { font-size: clamp(34px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.03em; color: var(--blackk); }
.pris__tal span { font-size: 15px; color: var(--text-svag); }
.pris__vem { font-size: 15px; color: var(--text-svag); margin: 0 0 22px; }
.pris ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; font-size: 15.5px; }
.pris li { display: flex; gap: 10px; align-items: flex-start; }
.pris li svg { width: 19px; height: 19px; flex: none; color: var(--accent); margin-top: 3px; }
.pris .knapp { margin-top: auto; width: 100%; }
.prisnot { text-align: center; color: var(--text-svag); font-size: 15px; margin: 30px auto 0; max-width: 62ch; }

/* ---------------------------------------------------------------------- faq
   details/summary, inte JavaScript. Fungerar i alla webblasare, gar att
   soka i med webblasarens egen sokfunktion, och oppnas av skarmlasare. */
.faq { max-width: 840px; margin: 0 auto; }
.fraga { border-bottom: 1px solid var(--linje); }
.fraga summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 22px 46px 22px 0; font-size: 17.5px; font-weight: 600; color: var(--blackk);
}
.fraga summary::-webkit-details-marker { display: none; }
.fraga summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 10px; height: 10px; border-right: 2px solid var(--text-svag); border-bottom: 2px solid var(--text-svag);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.fraga[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.fraga p { color: var(--text-svag); margin: 0 0 22px; max-width: 72ch; }

/* ------------------------------------------------------------------- mobilen
   Byggd for att fungera, inte for att "vara responsiv". Kolumner blir en,
   heron blir kortare, och menyn blir en knapp som faktiskt gar att traffa
   med tummen (44px ar Apples egen minsta traffyta). */
.menyknapp { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--blackk); }
.menyknapp svg { width: 26px; height: 26px; margin: 0 auto; }

/* Menyn blir en knapp redan vid 1000 px, inte vid 640. Matt i webblasaren:
   med sex menyval, telefonnummer och en offertknapp tog raden slut vid
   820 px, knappen skots utanfor sidan och HELA sidan fick sidoskroll. Det
   gallde bada demosidorna. En surfplatta i staende lage ar 810 px. */
@media (max-width: 1000px) {
  .meny, .tel { display: none; }
  .menyknapp { display: block; }
  .logga__namn { white-space: nowrap; }
  .topp.oppen .meny {
    display: flex; flex-direction: column; gap: 0; align-items: stretch;
    position: absolute; top: 74px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--linje); padding: 8px 20px 18px;
    box-shadow: var(--skugga-hog);
  }
  .topp.oppen .meny a { padding: 13px 0; border-bottom: 1px solid var(--linje); font-size: 17px; }
  .topp.oppen .meny a:last-child { border-bottom: 0; }
}

@media (max-width: 900px) {
  .rutnat--3, .steg, .foten__rutnat { grid-template-columns: repeat(2, 1fr); }
  /* Prislistan har TRE kort. I tva kolumner blir det tredje ensamt kvar pa
     en egen rad, halvt sa brett som raden ovanfor och lagre an de andra.
     Det ser ut som ett fel, inte som en design. En smal kolumn i mitten ar
     bade lugnare och lattare att lasa pa en surfplatta. Matt vid 820 px. */
  .prislista { grid-template-columns: 1fr; max-width: 470px; margin-inline: auto; }

  /* Samma glapp uppstar i vilket trekolumnsrutnat som helst med ett UDDA
     antal kort: det sista blir halvbrett och ensamt. Har far det i stallet
     ta hela raden, sa ser det ut som ett val. Ett jamnt antal (sex kort,
     som i bygg- och ekonomidemon) traffas inte av regeln. */
  .rutnat--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hero2__rutnat { grid-template-columns: 1fr; gap: 34px; }
  .hero2__bild img { aspect-ratio: 16/10; }
  .fall__post { grid-template-columns: 1fr; gap: 12px; padding: 26px 0; }
  .steg__post::after { display: none; }
  .rubrikrad, .delad, .kontakt__rutnat { grid-template-columns: 1fr; gap: 28px; }
  .delad__bild { order: -1; }
  .fakta__rad { grid-template-columns: repeat(2, 1fr); }
  .galleri { grid-template-columns: repeat(2, 1fr); }
  .galleri__post:first-child { grid-column: span 2; grid-row: auto; }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .omslag { padding: 0 20px; }
  /* Offertknappen ligger kvar i toppen pa dator och surfplatta men INTE i
     telefonen: dar tryckte den ihop firmanamnet sa att det brot pa tva rader
     och lag under knappen. Matt i chromium pa 375 px. Heron har samma knapp i
     full bredd direkt under, sa ingen vag in forsvinner. */
  .topp .knapp--fylld { display: none; }
  .hero__inre { max-width: none; }
  .rutnat--3, .rutnat--2, .steg, .galleri, .foten__rutnat, .blankett__rad,
  .prislista { grid-template-columns: 1fr; }
  .hero2__knappar .knapp { width: 100%; }
  .galleri__post:first-child { grid-column: auto; }
  .hero__knappar .knapp { width: 100%; }
  .demorad .omslag { flex-direction: column; gap: 9px; }
}