:root {
  color-scheme: light;

  --papper: #F6F3EC;
  --papper-2: #EDE8DE;
  --black: #17140F;
  --black-2: #5C564B;
  --linje: #DED7C9;
  --linje-stark: #17140F;
  --falu: #A33A26;
  --falu-djup: #7D2B1A;
  --varning: #A33A26;

  --grotesk: 'Familjen Grotesk', 'Segoe UI', system-ui, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  --bredd: 1440px;
  --kant: 28px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 104px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papper);
  color: var(--black);
  font: 400 19px/1.62 var(--serif);
  font-synthesis-weight: none;
}

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

:focus-visible { outline: 2.5px solid var(--falu); outline-offset: 3px; }

.hoppa { position: absolute; left: -999px; top: 10px; background: var(--black); color: var(--papper); padding: 10px 16px; z-index: 60; font: 500 16px var(--grotesk); }
.hoppa:focus { left: 10px; }

.inre { max-width: var(--bredd); margin: 0 auto; padding: 0 var(--kant); }

h1, h2, h3, h4 { font-family: var(--grotesk); font-weight: 600; margin: 0; letter-spacing: -.025em; overflow-wrap: break-word; }
h1 { font-size: clamp(42px, 6.6vw, 78px); line-height: .98; letter-spacing: -.035em; max-width: 15ch; }
h2 { font-size: clamp(28px, 3.7vw, 46px); line-height: 1.02; letter-spacing: -.03em; }
h3 { font-size: 22px; line-height: 1.2; }
p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

.ingress { font-size: clamp(20px, 2.1vw, 25px); line-height: 1.48; max-width: 34ch; color: var(--black); }
.bi { color: var(--black-2); }

.lank-text, .lopt a, .drift a { color: var(--falu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lank-text:hover, .lopt a:hover { color: var(--falu-djup); }

.etikett { font: 500 15px/1.3 var(--grotesk); color: var(--black-2); letter-spacing: 0; }

.nav { display: flex; align-items: baseline; gap: 14px 30px; padding-top: 26px; padding-bottom: 26px; }
.logga { display: inline-flex; align-items: baseline; gap: 9px; text-decoration: none; font: 700 27px/1 var(--grotesk); letter-spacing: -.035em; }

.logga .marke, .sidfot-namn .marke { height: 1.18em; width: auto; flex: none; align-self: center; }
.marke-botten { fill: var(--papper); }
.marke-ring { stroke: var(--black); }
.marke-s { fill: var(--black); }
.marke-prick { fill: var(--falu); }
.meny { margin-left: auto; }
.nav ul { list-style: none; display: flex; align-items: baseline; gap: 26px; margin: 0; padding: 0; font: 500 17px var(--grotesk); }
.nav ul a { text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav ul a:hover { border-bottom-color: var(--black); }
.nav ul a[aria-current="page"] { border-bottom-color: var(--falu); }
.sprak { font: 500 16px var(--grotesk); color: var(--black-2); white-space: nowrap; }
.sprak a { color: var(--black-2); text-decoration: none; }
.sprak a:hover { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.sprak b { font-weight: 600; color: var(--black); }

.knappar { display: flex; flex-wrap: wrap; gap: 10px; }
.knapp {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 22px; border-radius: 3px;
  font: 600 17px var(--grotesk); letter-spacing: -.01em; text-decoration: none;
  border: 1.5px solid var(--black); background: transparent; color: var(--black);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.knapp:hover { background: var(--black); color: var(--papper); }
.knapp.fylld { background: var(--falu); border-color: var(--falu); color: #FFF9F2; }
.knapp.fylld:hover { background: var(--falu-djup); border-color: var(--falu-djup); }
@media (prefers-reduced-motion: reduce) { .knapp { transition: none; } }

.sektion { padding-top: 76px; }

.sektion + .sektion,
.sektion.linje,
.exempel-stor,
.sidfot-kolumner,
.sidfot-botten { position: relative; }

.sektion + .sektion::before,
.sektion.linje::before,
.exempel-stor::before,
.sidfot-kolumner::before,
.sidfot-botten::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--kant);
  right: var(--kant);
  border-top: 1px solid var(--linje);
}

.sektion + .sektion, .sektion.linje { margin-top: 76px; padding-top: 56px; }

.sektionshuvud { margin-bottom: 34px; }
.rubrik-deck { margin: 14px 0 0; color: var(--black-2); max-width: 56ch; font-size: 19px; }

.uppslag { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 28px 72px; align-items: start; }
.uppslag > .spalt > p { max-width: 62ch; }

.vy { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; --pos: 50%; }
.ram { position: absolute; top: 0; left: 0; width: var(--vw, 1280px); height: var(--vh, 800px); border: 0; transform: scale(var(--skala, .72)); transform-origin: 0 0; pointer-events: none; background: #fff; }
.efter-lager { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.handtag { position: absolute; top: 0; bottom: 0; left: var(--pos); pointer-events: none; }
.handtag::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--falu); }
.handtag span { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--falu); display: grid; place-items: center; }
.handtag svg { width: 22px; height: 22px; }
.vy:has(.reglage:focus-visible) .handtag span { outline: 2.5px solid var(--black); outline-offset: 3px; }
.skylt { position: absolute; top: 12px; font: 600 13px var(--grotesk); background: var(--black); color: var(--papper); padding: 4px 9px; border-radius: 2px; pointer-events: none; }
.skylt.vanster { left: 12px; }
.skylt.hoger { right: 12px; background: var(--falu); }
.reglage { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: pan-y; }

.exempel-lista { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 36px 28px; }
.exempel { display: block; text-decoration: none; grid-column: span 3; }
.exempel.stor { grid-column: span 6; }
.miniatyr { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--linje); background: #fff; }
.exempel.stor .miniatyr { aspect-ratio: 16 / 9; }
.exempel:hover .miniatyr { border-color: var(--black); }
.exempel h3 { margin: 16px 0 4px; font-size: 24px; }
.exempel.stor h3 { font-size: 30px; }
.exempel p { margin: 0; color: var(--black-2); font-size: 17px; max-width: 46ch; }
.exempel .las { display: inline-block; margin-top: 10px; font: 600 16px var(--grotesk); color: var(--falu); border-bottom: 1.5px solid var(--falu); }
.exempel:hover .las { color: var(--falu-djup); }

.merlank { display: inline-block; margin-top: 30px; font: 600 18px var(--grotesk); color: var(--black); text-decoration: none; border-bottom: 2px solid var(--falu); padding-bottom: 2px; }
.merlank:hover { color: var(--falu); }

.pristabell { width: 100%; border-collapse: collapse; text-align: left; }
.pristabell th, .pristabell td { padding: 18px 20px 18px 0; border-bottom: 1px solid var(--linje); vertical-align: baseline; }
.pristabell thead th { font: 500 15px var(--grotesk); color: var(--black-2); padding-top: 0; padding-bottom: 10px; border-bottom: 1.5px solid var(--linje-stark); }
.pristabell tbody th { font: 600 21px var(--grotesk); letter-spacing: -.02em; width: 24%; }
.pristabell .vad { color: var(--black-2); font-size: 17px; }
.pristabell .belopp { font: 600 23px var(--grotesk); letter-spacing: -.02em; white-space: nowrap; text-align: right; padding-right: 0; }
.pristabell .belopp small { display: block; font: 400 15px var(--serif); color: var(--black-2); }
.pristabell thead .belopp { font: 500 15px var(--grotesk); letter-spacing: 0; }

.drift { margin: 26px 0 0; padding: 24px 26px; background: var(--papper-2); font-size: 17.5px; }
.drift b { font-family: var(--grotesk); font-weight: 600; }
.drift-topp { margin: 0; max-width: 68ch; }
.driftnivaer { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; }
.driftnamn { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; }
.driftnamn b { font-size: 19px; letter-spacing: -.02em; }
.driftnamn span { font: 600 19px var(--grotesk); color: var(--falu); letter-spacing: -.025em; white-space: nowrap; }
.driftnivaer li > p:not(.driftnamn) { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--black-2); }
.drift .liten { display: block; margin-top: 20px; color: var(--black-2); font-size: 16px; }
@media (max-width: 640px) { .driftnivaer { grid-template-columns: 1fr; gap: 22px; } }

.ingar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 72px; }
.ingar li { padding: 18px 0; border-bottom: 1px solid var(--linje); }
.ingar li:first-child, .ingar li:nth-child(2) { border-top: 1px solid var(--linje); }
.ingar h3 { font-size: 19px; margin-bottom: 4px; }
.ingar p { margin: 0; color: var(--black-2); font-size: 17px; }

.gang { list-style: none; margin: 0; padding: 0; }
.gang li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 6px 72px; padding: 24px 0; border-top: 1px solid var(--linje); align-items: baseline; }
.gang li:last-child { border-bottom: 1px solid var(--linje); }
.gang .nar { font: 600 20px var(--grotesk); color: var(--falu); letter-spacing: -.02em; }
.gang h3 { font-size: 22px; margin-bottom: 4px; }
.gang p { margin: 0; color: var(--black-2); max-width: 62ch; }

.inte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 72px; }
.inte li { padding: 20px 0; border-bottom: 1px solid var(--linje); }
.inte li:first-child, .inte li:nth-child(2) { border-top: 1px solid var(--linje); }
.inte h3 { font-size: 20px; margin-bottom: 5px; }
.inte p { margin: 0; color: var(--black-2); font-size: 17px; max-width: 54ch; }

.fragor { border-top: 1.5px solid var(--linje-stark); }
.fragor details { border-bottom: 1px solid var(--linje); }
.fragor summary { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 19px 0; font: 600 21px var(--grotesk); letter-spacing: -.02em; cursor: pointer; list-style: none; }
.fragor summary::-webkit-details-marker { display: none; }
.fragor summary::after { content: "+"; font: 400 24px/1 var(--grotesk); color: var(--falu); flex: none; }
.fragor details[open] summary::after { content: "–"; }
.fragor summary:hover { color: var(--falu); }
.fragor details p { margin: 0 0 20px; max-width: 64ch; color: var(--black-2); }

.om p { font-size: 20px; max-width: 56ch; }
.fakta { list-style: none; margin: 0; padding: 0; }
.fakta li { padding: 14px 0; border-bottom: 1px solid var(--linje); font-size: 17px; }
.fakta li:first-child { border-top: 1px solid var(--linje); }
.fakta b { display: block; font: 600 16px var(--grotesk); }
.fakta span { color: var(--black-2); }
.signatur { margin-top: 30px; font: 600 26px var(--grotesk); letter-spacing: -.03em; }
.signatur span { display: block; font: 400 16px var(--serif); color: var(--black-2); letter-spacing: 0; margin-top: 2px; }

.principer { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 72px; }
.principer li { padding: 22px 0; border-bottom: 1px solid var(--linje); }
.principer li:first-child, .principer li:nth-child(2) { border-top: 1px solid var(--linje); }
.principer h3 { font-size: 21px; margin-bottom: 5px; }
.principer p { margin: 0; color: var(--black-2); font-size: 17px; max-width: 54ch; }

.exempel-stor { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px 64px; align-items: center; padding-top: 56px; margin-top: 56px; }
.exempel-stor .exempel { grid-column: auto; }
.exempel-stor .miniatyr { aspect-ratio: 16 / 10; }
.exempel-stor h2 { font-size: clamp(28px, 3.4vw, 40px); }
.exempel-stor .bransch { font: 500 16px var(--grotesk); color: var(--falu); margin: 0 0 8px; }
.exempel-stor p { color: var(--black-2); margin: 14px 0 0; max-width: 46ch; }
.finesser { list-style: none; margin: 18px 0 0; padding: 0; font-size: 17px; }
.finesser li { padding: 9px 0; border-top: 1px solid var(--linje); color: var(--black-2); }
.exempel-stor .knappar { margin-top: 24px; }
.notis { margin: 48px 0 0; padding: 18px 22px; background: var(--papper-2); font-size: 17px; max-width: 72ch; color: var(--black-2); }

.kontaktband { margin-top: 88px; background: var(--black); color: var(--papper); }
.kontaktband .inre { padding-top: 76px; padding-bottom: 76px; }
.kontaktband h2 { max-width: 16ch; }
.kontaktband p { color: #BDB6A8; margin: 20px 0 0; max-width: 46ch; }
.stor-lank { display: inline-block; margin-top: 26px; font: 600 clamp(26px, 4.2vw, 46px)/1.1 var(--grotesk); letter-spacing: -.035em; text-decoration: none; color: var(--papper); border-bottom: 2px solid var(--falu); overflow-wrap: anywhere; }
.stor-lank:hover { color: #F0A090; }

.sidfot { font-size: 17px; }
main + .sidfot { margin-top: 88px; }
.sidfot-kolumner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr); gap: 28px 56px; padding-top: 48px; padding-bottom: 36px; }
.sidfot-namn { display: inline-flex; align-items: baseline; gap: 9px; font: 700 24px var(--grotesk); letter-spacing: -.035em; text-decoration: none; }
.sidfot-kolumner p { margin: 10px 0 0; color: var(--black-2); max-width: 34ch; font-size: 17px; }
.sidfot h2 { font: 600 16px var(--grotesk); letter-spacing: 0; margin: 4px 0 12px; }
.sidfot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sidfot ul a { text-decoration: none; color: var(--black-2); overflow-wrap: anywhere; }
.sidfot ul a:hover { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.sidfot-botten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 16px; padding-bottom: 28px; font: 500 15px var(--grotesk); color: var(--black-2); }
.sidfot-botten a { color: inherit; }

.kontaktsida { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 72px; align-items: start; padding-top: 48px; }
.formular-rubrik { font-size: 24px; margin-bottom: 8px; }
.formular-hjalp { color: var(--black-2); max-width: 52ch; margin-bottom: 26px; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin: 0; }
.falt { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.falt.bred { grid-column: 1 / -1; }
.falt label { font: 600 16px var(--grotesk); }
.falt input, .falt textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--linje); border-radius: 3px; background: #FFFDF8; color: var(--black); font: 400 18px/1.5 var(--serif); }
.falt textarea { min-height: 156px; resize: vertical; }
.falt input:hover, .falt textarea:hover { border-color: var(--black-2); }
.falt input:focus-visible, .falt textarea:focus-visible { border-color: var(--falu); outline-offset: 1px; }
.falt input:user-invalid, .falt textarea:user-invalid { border-color: var(--varning); }
.honung { display: none; }
.formular-status { grid-column: 1 / -1; margin: 0; padding: 12px 16px; background: #F6E3DE; border-left: 3px solid var(--varning); font-size: 17px; }

.robotsparr { grid-column: 1 / -1; }
.robotsparr:empty { display: none; }
.formular-botten { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.formular button { cursor: pointer; }
.formular button[disabled] { opacity: .55; cursor: progress; }
.formular-not { margin: 0; font-size: 16px; color: var(--black-2); flex: 1 1 260px; max-width: 46ch; }
.epost-rad { margin: 0 0 22px; }
.epost-lank { font: 600 clamp(21px, 2.4vw, 27px) var(--grotesk); letter-spacing: -.03em; color: var(--falu); text-decoration: none; border-bottom: 2px solid var(--falu); overflow-wrap: anywhere; }
.epost-lank:hover { color: var(--falu-djup); border-color: var(--falu-djup); }
.tack { border-left: 3px solid var(--falu); background: var(--papper-2); padding: 24px 26px; }
.tack h2 { font-size: 26px; margin-bottom: 8px; }
.tack p { margin: 0; color: var(--black-2); }

.lopt { max-width: 66ch; padding-top: 20px; }
.lopt h2 { font-size: 26px; margin: 42px 0 10px; }
.lopt p, .lopt li { color: var(--black-2); }
.lopt ul { padding-left: 20px; }

.sidtopp { padding-top: 34px; }
.sidtopp .ingress { margin-top: 22px; }
.sidtopp .knappar { margin-top: 28px; }
.sidtopp + .sektion { padding-top: 64px; }

@media (max-width: 940px) {
  .uppslag, .kontaktsida, .exempel-stor { grid-template-columns: 1fr; }
  .exempel-stor { gap: 24px; }
  .ingar, .inte, .principer { grid-template-columns: 1fr; gap: 0; }
  .ingar li:nth-child(2), .inte li:nth-child(2), .principer li:nth-child(2) { border-top: 0; }
  .exempel-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exempel { grid-column: span 1; }
  .exempel.stor { grid-column: span 2; }
  .sidfot-kolumner { grid-template-columns: 1fr 1fr; }
  .sidfot-kolumner > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 400px) {
  .logga { font-size: 24px; }
}

@media (max-width: 640px) {
  body { font-size: 18px; }
  :root { --kant: 18px; }
  .sektion { padding-top: 56px; }
  .sektion + .sektion, .sektion.linje { margin-top: 56px; padding-top: 44px; }
  .gang li { grid-template-columns: 1fr; gap: 4px; }
  .pristabell thead { position: absolute; left: -9999px; }
  .pristabell tbody th, .pristabell td { display: block; padding: 0; border: 0; }
  .pristabell tbody tr { display: block; padding: 18px 0; border-bottom: 1px solid var(--linje); }
  .pristabell tbody tr:first-child { border-top: 1.5px solid var(--linje-stark); }
  .pristabell tbody th { width: auto; }
  .pristabell .belopp { text-align: left; margin: 2px 0 6px; }
  .pristabell .belopp small { display: inline; margin-left: 6px; }
  .formular { grid-template-columns: 1fr; }
  .exempel-lista { grid-template-columns: 1fr; }
  .exempel.stor { grid-column: span 1; }
  .kontaktband { margin-top: 64px; }
  .kontaktband .inre { padding-top: 56px; padding-bottom: 56px; }
  main + .sidfot { margin-top: 64px; }
  .sidfot-kolumner { grid-template-columns: 1fr; }
}

:root {
  --svart-djup: #14110D;
  --falu-mork-bg: #E2765C;
  --papper-dov: #B8B0A2;
  --papper-dovare: #8C8478;
  --linje-mork: rgba(246, 243, 236, .17);
}

.dold { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.nav-yta { position: sticky; top: 0; z-index: 40; background: var(--papper); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.nav-yta.skrollad { border-bottom-color: var(--linje); }
body:has(.hero-mork) .nav-yta.skrollad { border-bottom-color: var(--linje-mork); }
body:has(.hero-mork) .nav-yta { background: var(--svart-djup); }
body:has(.hero-mork) .nav { color: var(--papper); }
body:has(.hero-mork) .nav ul a:hover { border-bottom-color: var(--papper); }
body:has(.hero-mork) .nav ul a[aria-current="page"] { border-bottom-color: var(--falu-mork-bg); }
body:has(.hero-mork) .sprak, body:has(.hero-mork) .sprak a { color: var(--papper-dovare); }
body:has(.hero-mork) .sprak a:hover { color: var(--papper); }
body:has(.hero-mork) .sprak b { color: var(--papper); }
.nav-yta :focus-visible, .hero-mork :focus-visible, .taljband :focus-visible, .kontaktband :focus-visible { outline-color: var(--falu-mork-bg); }

.hero-mork {
  background: var(--svart-djup);

  background-image: radial-gradient(58% 52% at 80% 30%, rgba(226, 118, 92, .17), transparent 72%);
  color: var(--papper);
}

.hero-rutnat {
  display: grid;
  grid-template-columns: minmax(0, 13fr) minmax(0, 7fr);
  gap: 48px 64px;
  align-items: center;
  padding-top: 52px;
  padding-bottom: 56px;
}

.etikett-tal {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 22px;
  font: 500 15.5px/1.3 var(--grotesk);
  color: var(--papper-dov);
}
.etikett-tal::before {
  content: ""; width: 9px; height: 9px; flex: none; background: var(--falu-mork-bg);
}
.etikett-tal { color: var(--black-2); margin-bottom: 18px; }
.etikett-tal::before { background: var(--falu); }

.hero-text h1 { font-size: clamp(40px, 5.2vw, 92px); max-width: 15ch; }
.hero-text h1 em { font-style: normal; color: var(--falu-mork-bg); }
.ingress-mork { margin: 24px 0 0; font-size: clamp(19px, 1.45vw, 25px); line-height: 1.55; color: var(--papper-dov); max-width: 46ch; }
.hero-text .knappar { margin-top: 30px; }
.hero-not { margin: 20px 0 0; font-size: 16.5px; line-height: 1.5; color: var(--papper-dovare); max-width: 46ch; }

@media (min-width: 1200px) {
  .ingress-mork { margin-top: 30px; }
  .hero-text .knappar { margin-top: 40px; gap: 14px; }
  .hero-text .knapp { min-height: 60px; padding: 0 30px; font-size: 18.5px; }
  .hero-not { margin-top: 26px; font-size: 18px; }
}

.knapp.ljus { border-color: rgba(246, 243, 236, .5); color: var(--papper); }
.knapp.ljus:hover { background: var(--papper); border-color: var(--papper); color: var(--black); }

.telefon { margin: 0; justify-self: end; width: min(322px, 100%); }
.telefon-skal {
  position: relative;

  width: min(322px, 100%);
  margin-inline: auto;
  padding: 9px;
  background: #322C23;
  border-radius: 36px;
  box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(246, 243, 236, .13);
}
.telefon-horlur {
  position: absolute; top: 17px; left: 50%; transform: translateX(-50%);
  width: 52px; height: 5px; border-radius: 3px; background: #14110D; z-index: 3;
}
.telefon-vy { aspect-ratio: 9 / 18.5; border-radius: 28px; --pos: 100%; }
.telefon .handtag span { width: 38px; height: 38px; }
.telefon .handtag svg { width: 18px; height: 18px; }
.telefon .skylt { top: auto; bottom: 14px; font-size: 11.5px; padding: 4px 8px; }
.telefon .skylt.vanster { left: 10px; }
.telefon .skylt.hoger { right: 10px; }
.telefon figcaption { margin: 20px auto 0; max-width: 30ch; text-align: center; font: 500 15px/1.5 var(--grotesk); color: var(--papper-dovare); }

.loftesband { background: rgba(0, 0, 0, .3); }
.loften-mork {
  list-style: none; margin: 0 auto; padding-top: 30px; padding-bottom: 32px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 56px;
}
.loften-mork li { font-size: 16.5px; line-height: 1.55; color: var(--papper-dovare); }
.loften-mork b { display: block; margin-bottom: 4px; font: 600 17px var(--grotesk); color: var(--papper); letter-spacing: -.01em; }

.felkort { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 54px 64px; }
.felkort > li > h3 { margin: 22px 0 8px; font-size: 23px; }
.felkort > li > p { margin: 0; color: var(--black-2); font-size: 17.5px; max-width: 54ch; }
.felkort .atgard { margin-top: 10px; color: var(--falu); font: 500 17px/1.5 var(--grotesk); }

.bevis { border: 1px solid var(--linje-stark); background: #FFFDF8; aspect-ratio: 16 / 10; display: flex; flex-direction: column; overflow: hidden; }
.bevis-topp { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: var(--papper-2); border-bottom: 1px solid var(--linje); }
.bevis-topp i { width: 6px; height: 6px; border-radius: 50%; background: var(--linje); flex: none; }
.bevis-url { flex: 1; min-width: 0; margin-left: 4px; padding: 3px 9px; background: #FFFDF8; border: 1px solid var(--linje); border-radius: 3px; font: 500 11px var(--grotesk); color: var(--black-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bevis-url .rod { color: var(--varning); font-weight: 600; }
.bevis-url .rod::before { content: "\26A0  "; }
.bevis-yta { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px; padding: 20px 24px; }
.bevis-yta > b { margin-top: 3px; font: 600 16px var(--grotesk); color: var(--black); letter-spacing: -.015em; }
.bevis-brod { font-size: 13.5px; line-height: 1.45; color: var(--black-2); max-width: 34ch; }
.bevis-knapp { margin-top: 8px; padding: 6px 13px; border-radius: 3px; background: var(--falu); color: #FFF9F2; font: 600 12px var(--grotesk); }
.bevis-knapp.blek { background: transparent; border: 1px solid var(--linje); color: var(--black-2); }
.bevis-liten { margin-top: 2px; font: 400 11px "Courier New", monospace; color: var(--black-2); letter-spacing: .02em; }

.triangel { width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 28px solid var(--falu); position: relative; }
.triangel::after { content: "!"; position: absolute; left: -3px; top: 9px; font: 700 15px var(--grotesk); color: #FFF9F2; }

.trasig { flex: none; width: 34px; height: 40px; border: 2px solid var(--papper-dov); border-radius: 3px; position: relative; }
.trasig b { position: absolute; left: -7px; top: 17px; width: 46px; height: 2px; background: var(--papper-dov); transform: rotate(-38deg); }

.bevis-mobil { align-items: center; justify-content: center; background: var(--papper-2); position: relative; }
.minitelefon { width: 82px; height: 152px; border: 2px solid var(--black); border-radius: 9px; background: #FFFDF8; overflow: hidden; padding: 7px 0 0 5px; }
.krympt { width: 232%; display: flex; flex-direction: column; gap: 6px; }
.k-topp { height: 11px; background: var(--falu); opacity: .55; }
.k-kropp { display: flex; gap: 7px; }
.k-sido { flex: none; width: 30%; display: flex; flex-direction: column; gap: 3px; }
.k-sido i { height: 2px; background: var(--falu); opacity: .45; }
.k-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.k-text span { height: 2px; background: var(--linje); }
.k-text span.kort { width: 62%; }

.tumme { position: absolute; left: 50%; top: 46%; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--falu); background: rgba(163, 58, 38, .16); transform: translate(-62%, -24%); }

.bevis-google { align-items: stretch; justify-content: flex-start; gap: 0; padding: 18px 22px; }
.sokfalt { display: flex; align-items: center; gap: 8px; padding: 6px 11px; border: 1px solid var(--linje); border-radius: 20px; font: 400 12px var(--serif); color: var(--black-2); }
.lupp { width: 9px; height: 9px; border: 1.5px solid var(--papper-dov); border-radius: 50%; position: relative; flex: none; }
.lupp::after { content: ""; position: absolute; right: -4px; bottom: -3px; width: 5px; height: 1.5px; background: var(--papper-dov); transform: rotate(45deg); }
.traff { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.traff li { display: grid; gap: 4px; }
.t-titel { height: 5px; width: 54%; background: var(--black-2); opacity: .62; }
.t-titel.kort { width: 38%; }
.traffrad { margin: 9px 0 0; font: 400 10.5px var(--grotesk); color: var(--black-2); }
.t-rad { height: 3px; width: 84%; background: var(--linje); }
.ni-saknas { margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--linje); font: 500 13px var(--grotesk); color: var(--falu); }

.exempel.stor { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 44px; align-items: center; }
.exempel.stor .miniatyr { aspect-ratio: 16 / 10; }
.exempel.stor .exempel-text h3 { margin-top: 0; }
.exempel .miniatyr { transition: border-color .18s ease; }
.exempel:hover .miniatyr { border-color: var(--linje-stark); }
@media (prefers-reduced-motion: reduce) { .exempel .miniatyr { transition: none; } }

.taljband { margin-top: 88px; background: var(--svart-djup); color: var(--papper); }
.tal { list-style: none; margin: 0 auto; padding-top: 52px; padding-bottom: 52px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 44px; }
.tal b { display: block; font: 600 clamp(42px, 4.6vw, 58px)/1 var(--grotesk); letter-spacing: -.045em; color: var(--falu-mork-bg); }
.tal span { display: block; margin-top: 12px; font-size: 16.5px; line-height: 1.5; color: var(--papper-dov); }
.taljband + .sektion { margin-top: 84px; padding-top: 0; }

.vis-start { opacity: 0; transform: translateY(14px); }
.vis-start.syns { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1); }
@media (prefers-reduced-motion: reduce) { .vis-start { opacity: 1; transform: none; } }

@media (max-width: 940px) {
  .hero-rutnat { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
  .telefon { justify-self: center; }
  .hero-text h1 { max-width: 16ch; }
  .felkort { grid-template-columns: 1fr; gap: 44px; }

  .bevis { max-width: 470px; }
  .exempel.stor { grid-template-columns: 1fr; gap: 16px; }
  .tal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 44px; }
}

@media (max-width: 640px) {
  .loften-mork { grid-template-columns: 1fr; gap: 0; padding-bottom: 36px; }
  .loften-mork li { padding: 11px 0; }
  .tal { grid-template-columns: 1fr; gap: 0; padding-top: 40px; padding-bottom: 40px; }
  .tal li { padding: 20px 0; border-top: 1px solid var(--linje-mork); }
  .tal li:first-child { border-top: 0; padding-top: 0; }
  .tal b { font-size: 40px; }
  .tal span { margin-top: 6px; max-width: none; }
  .taljband { margin-top: 64px; }
  .taljband + .sektion { margin-top: 60px; }
}

@media (max-width: 640px) {
  body:has(.hero-mork) .nav { padding-top: 18px; padding-bottom: 18px; row-gap: 10px; }
  .hero-rutnat { padding-top: 26px; gap: 30px; }
  .hero-text h1 { font-size: 36px; max-width: none; }
  .ingress-mork { margin-top: 18px; font-size: 17.5px; line-height: 1.5; }
  .hero-text .knappar { margin-top: 22px; gap: 8px; flex-wrap: nowrap; }
  .hero-text .knapp { min-height: 46px; padding: 0 15px; font-size: 15.5px; white-space: nowrap; }
  .hero-not { margin-top: 16px; font-size: 15.5px; }
  .telefon-skal { width: min(268px, 100%); }
  .telefon figcaption { margin-top: 16px; font-size: 14px; }

  .bevis { aspect-ratio: auto; min-height: 220px; }
}

@media (max-width: 360px) {
  .hero-text .knappar { flex-wrap: wrap; }
}

.arlighet p { max-width: 62ch; }

.exempel { display: flex; flex-direction: column; }
.exempel .miniatyr { flex: none; }
.exempel .las { margin-top: auto; padding-top: 10px; align-self: flex-start; }

.felkort > li { display: flex; flex-direction: column; }
.felkort .atgard { margin-top: auto; padding-top: 10px; }

.menyknapp, .menystang, .meny-cta, .meny .sprak, .menyskugga { display: none; }

@media (max-width: 940px) {
  .nav { align-items: center; }
  .nav > .sprak { display: none; }
  .menyknapp {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 46px; height: 46px; margin-left: auto; padding: 0; flex: none;
    border: 1px solid var(--linje); border-radius: 3px; background: transparent; color: inherit; cursor: pointer;
  }
  .menyknapp span { display: block; width: 20px; height: 2px; border-radius: 1px; background: currentColor; }
  body:has(.hero-mork) .menyknapp { border-color: rgba(246, 243, 236, .28); }

  .meny {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
    width: min(88vw, 420px); margin: 0; padding: 96px 28px 36px;
    background: var(--svart-djup); color: var(--papper); border-left: 1px solid var(--linje-mork);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden;
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .32s;
  }
  .nav.oppen .meny { transform: none; visibility: visible; transition: transform .32s cubic-bezier(.2, .8, .2, 1); }

  .menyskugga {
    display: block; position: fixed; inset: 0; z-index: 49; background: rgba(10, 9, 7, .6);
    opacity: 0; visibility: hidden; transition: opacity .32s ease, visibility 0s linear .32s;
  }
  .nav.oppen .menyskugga { opacity: 1; visibility: visible; transition: opacity .32s ease; }
  html.meny-oppen { overflow: hidden; }

  .menystang {
    display: grid; place-items: center; position: absolute; top: 22px; right: 22px;
    width: 46px; height: 46px; padding: 0; border: 1px solid rgba(246, 243, 236, .28); border-radius: 3px;
    background: transparent; color: var(--papper); cursor: pointer;
  }
  .menystang svg { width: 20px; height: 20px; }

  .nav ul { flex-direction: column; align-items: stretch; gap: 0; font-size: 22px; }
  .nav ul li { border-bottom: 1px solid var(--linje-mork); }
  .nav ul .meny-kontakt { display: none; }
  .nav ul a { display: block; padding: 18px 0; border-bottom: 0; }
  .nav ul a:hover, .nav ul a[aria-current="page"] { color: var(--falu-mork-bg); }

  .meny-cta { display: flex; width: 100%; min-height: 58px; margin-top: 34px; font-size: 18px; }
  .meny .sprak { display: block; margin: 34px 0 0; padding-top: 28px; border-top: 1px solid var(--linje-mork); font-size: 18px; color: var(--papper-dovare); }
  .meny .sprak a { color: var(--papper-dovare); }
  .meny .sprak a:hover { color: var(--papper); }
  .meny .sprak b { color: var(--falu-mork-bg); }
  .meny :focus-visible { outline-color: var(--falu-mork-bg); }
}
@media (prefers-reduced-motion: reduce) {
  .meny, .nav.oppen .meny, .menyskugga, .nav.oppen .menyskugga { transition: none; }
}