/* Flyttlasset · A2 editorial-spine, ljus service-tappning
   Benvit #f8f6f1 · bläck #23211c · flytt-orange #d96c2c · dämpad grå metadata
   Spectral (display serif) + Karla (brödtext och etiketter)
   Signatur: FLYTTRESAN, lodrät orange spine med checkbox-noder som bockas i vid scroll.

   Kontrastnoter (mätt mot #f8f6f1):
   #d96c2c ger 3,17:1 och används bara till ytor, linjer och ikoner.
   Text i orange använder #a24f18 (5,30:1). Metadata-grå är #6b6760 (5,21:1),
   en mörkare variant av kortets #7a766e som landar på 4,19:1 och inte klarar AA.
   Fylld knapp: bläcktext på #d96c2c ger 4,70:1. */

:root {
  --ben: #f8f6f1;
  --ben-2: #f2efe8;
  --papper: #fffdf8;
  --blck: #23211c;
  --ink-2: #3a372f;
  --orange: #d96c2c;
  --orange-ink: #a24f18;
  --mute: #6b6760;
  --linje: #23211c1f;
  --linje-stark: #23211c3d;

  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans: "Karla", "Helvetica Neue", Arial, sans-serif;

  --ram-max: 1180px;
  --pad: clamp(20px, 4.5vw, 64px);
  --sek: clamp(56px, 7.5vw, 108px);
  --topp-h: 66px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  background: var(--ben);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
h1, h2, h3, p, dt, dd, li, blockquote { overflow-wrap: break-word; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--blck);
  letter-spacing: -0.015em;
}

h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
  line-height: 1.1;
  text-wrap: balance;
}

.ram {
  max-width: var(--ram-max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

[id] { scroll-margin-top: 84px; }

::selection { background: rgba(217, 108, 44, 0.24); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--orange-ink);
  outline-offset: 3px;
}

.skip { position: absolute; left: -9999px; top: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; }
.skip:focus {
  left: 12px; top: 12px; z-index: 100;
  background: var(--blck); color: var(--ben);
  border-radius: 2px;
  font-weight: 500;
}

/* ---------- Genomgående ---------- */

.ogonbryn {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

.brod {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-2);
  max-width: 62ch;
  text-wrap: pretty;
}

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.005em;
  padding: 14px 26px;
  min-height: 50px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.knapp-fylld { background: var(--orange); color: var(--blck); }
.knapp-fylld:hover { background: var(--blck); color: var(--ben); }

.knapp-linje { border-color: var(--linje-stark); color: var(--blck); }
.knapp-linje:hover { background: var(--blck); color: var(--ben); border-color: var(--blck); }

/* ---------- Packlapp ---------- */

.lapp { display: block; }

.lapp svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1px 1px rgba(35, 33, 28, .09)) drop-shadow(0 10px 18px rgba(35, 33, 28, .06));
}

.lapp-papper { fill: var(--papper); stroke: rgba(35, 33, 28, .3); stroke-width: 1.6; }
.lapp-hal { fill: var(--ben); stroke: rgba(35, 33, 28, .3); stroke-width: 1.4; }
.lapp-ruta { fill: none; stroke: var(--blck); stroke-width: 1.8; }
.lapp-bock { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.lapp-text {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.9px;
  fill: var(--blck);
}

/* ---------- Header ---------- */

.topp {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ben);
  border-bottom: 1px solid var(--linje);
}

.topp-inre {
  max-width: var(--ram-max);
  margin-inline: auto;
  padding-inline: var(--pad);
  height: var(--topp-h);
  display: flex;
  align-items: center;
  gap: 18px;
}

.marke {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--blck);
}

.marke-ruta { width: 21px; height: 21px; flex: none; overflow: visible; }
.marke-ruta rect { fill: none; stroke: var(--blck); stroke-width: 1.8; }
.marke-bock { fill: none; stroke: var(--orange); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

.meny { margin-left: auto; display: flex; align-items: center; }
.meny ul { display: flex; align-items: center; gap: clamp(16px, 2.1vw, 30px); }

.meny ul a {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--ink-2);
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

.meny ul a:hover { color: var(--blck); border-bottom-color: var(--orange); }
.meny-tel { display: none; }

.topp-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--blck);
  margin-left: clamp(18px, 2.4vw, 32px);
  border-bottom: 1px solid var(--orange);
}

.hamburgare {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  margin-right: -10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.hamburgare span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--blck);
  transition: transform .22s ease, opacity .18s ease;
}

@media (max-width: 899px) {
  .topp-tel { display: none; }
  .hamburgare { display: flex; }

  .meny {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--topp-h);
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--ben);
    border-bottom: 1px solid var(--linje-stark);
    padding: 4px var(--pad) 26px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    max-height: calc(100dvh - var(--topp-h));
    overflow-y: auto;
  }

  .meny ul { flex-direction: column; align-items: stretch; gap: 0; }

  .meny ul a {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 12px 0;
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--blck);
    border-bottom: 1px solid var(--linje);
  }

  .meny-tel {
    display: flex;
    align-items: center;
    min-height: 50px;
    margin-top: 18px;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 1rem;
    color: var(--blck);
  }

  .meny-tel::before {
    content: "";
    width: 9px;
    height: 9px;
    margin-right: 10px;
    background: var(--orange);
    border-radius: 1px;
  }

  body.meny-oppen { overflow-y: hidden; }
  body.meny-oppen .meny { opacity: 1; visibility: visible; transform: none; }
  body.meny-oppen .hamburgare span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.meny-oppen .hamburgare span:nth-child(2) { opacity: 0; }
  body.meny-oppen .hamburgare span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ---------- Masthead ---------- */

.mast { padding-block: clamp(20px, 3vw, 36px) var(--sek); }

.mast-kolofon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 14px;
  border-top: 2px solid var(--blck);
  padding-top: 12px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

.mast-kolofon span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 14px;
  vertical-align: 0.28em;
  background: currentColor;
}

.mast-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: clamp(28px, 4.6vw, 56px);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--blck);
}

.mast-meta li { display: inline-flex; align-items: center; }

.mast-meta li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 16px;
  background: var(--orange);
  border-radius: 1px;
}

.mast-rubrik {
  margin-top: clamp(14px, 2vw, 22px);
  font-size: clamp(2.15rem, 6.5vw, 4.9rem);
  line-height: 1.04;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

.mast-rubrik em { font-style: italic; font-weight: 400; }

.br-lg { display: none; }
@media (min-width: 760px) { .br-lg { display: inline; } }

.mast-fot {
  display: grid;
  gap: clamp(30px, 4.4vw, 76px);
  margin-top: clamp(32px, 4.6vw, 60px);
  padding-top: clamp(26px, 3.2vw, 42px);
  border-top: 1px solid var(--linje);
}

@media (min-width: 900px) {
  .mast-fot { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.ingress {
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.72;
  color: var(--ink-2);
  max-width: 46ch;
  text-wrap: pretty;
}

.mast-text .knapp { margin-top: clamp(22px, 2.6vw, 30px); }

.mast-under {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--mute);
}

.mast-under a { color: var(--blck); border-bottom: 1px solid var(--orange); }

.mast-fakta dl { display: grid; }
.mast-fakta dl > div { padding: 12px 0; border-top: 1px solid var(--linje); }

.mast-fakta dt {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}

.mast-fakta dd {
  margin-top: 3px;
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--blck);
}

.lapp-mast {
  width: clamp(140px, 20vw, 172px);
  margin-top: clamp(26px, 3vw, 36px);
  transform: rotate(-5.5deg);
  transform-origin: left center;
}

@media (min-width: 900px) {
  .lapp-mast { margin-left: auto; transform-origin: right center; }
}

/* Pa breda skarmar hanger packlappen i hero-hornet till hoger om rubriken */
@media (min-width: 1000px) {
  .mast .ram { position: relative; }

  .lapp-mast {
    position: absolute;
    right: var(--pad);
    top: clamp(158px, 15.5vw, 236px);
    z-index: 1;
    width: clamp(152px, 13vw, 178px);
    margin: 0;
    transform: rotate(-7deg);
    transform-origin: center;
  }
}

/* ---------- Lead ---------- */

.om { padding-block: var(--sek); }

.om-ram {
  display: grid;
  gap: clamp(30px, 4vw, 64px);
  border-top: 1px solid var(--linje);
  padding-top: clamp(24px, 3.2vw, 40px);
}

@media (min-width: 900px) {
  .om-ram { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
}

.lead {
  margin-top: clamp(16px, 2vw, 24px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.5vw, 1.7rem);
  line-height: 1.52;
  letter-spacing: -0.008em;
  color: var(--blck);
  max-width: 30ch;
  text-wrap: pretty;
}

.om-bild img { width: 100%; height: auto; border-radius: 2px; }

.om-bild figcaption,
.resa-bild figcaption,
.tips-bild figcaption {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--mute);
  max-width: 40ch;
}

/* ---------- Bildband ---------- */

.resa-bild { margin-top: clamp(44px, 5.5vw, 76px); }
.tips-bild { margin-top: clamp(30px, 3.6vw, 48px); }

/* height: auto kravs, annars blir bada matten definita av HTML-attributen
   och aspect-ratio slutar galla. Bilden strackts da ut utan att det syns i koden. */
.resa-bild img,
.tips-bild img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 2px;
}

.resa-bild img { object-position: 50% 12%; }
.tips-bild img { object-position: 50% 70%; }

.steg-bild {
  margin-top: clamp(20px, 3vw, 28px);
  max-width: 300px;
}

.steg-bild img { width: 100%; height: auto; border-radius: 2px; }

/* ---------- SIGNATUR · Flyttresan ---------- */

.resa { padding-block: var(--sek); }

.resa-topp {
  border-top: 1px solid var(--linje);
  padding-top: clamp(24px, 3.2vw, 40px);
}

.resa-topp h2 { margin-top: 10px; }
.resa-ingress { margin-top: 14px; max-width: 52ch; }

.resa-spar {
  position: relative;
  margin-top: clamp(40px, 5vw, 72px);
}

.spine {
  position: absolute;
  left: 14px;
  top: 0;
  width: 2px;
  height: var(--spine-h, 100%);
  background: var(--linje-stark);
}

.spine i {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: calc(var(--fill, 0) * 100%);
  background: var(--orange);
}

.steg {
  position: relative;
  display: grid;
  padding-left: 58px;
  padding-bottom: clamp(36px, 5vw, 52px);
}

.steg:last-child { padding-bottom: 0; }

.nod {
  position: absolute;
  left: 0;
  top: 1px;
  width: 30px;
  height: 30px;
  flex: none;
}

.nod svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.nod-ruta {
  fill: var(--ben);
  stroke: var(--orange);
  stroke-width: 2.2;
  stroke-dasharray: 118;
  stroke-dashoffset: 118;
  transition: stroke-dashoffset .55s ease, fill .45s ease .55s;
}

.nod-bock {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset .42s ease .4s;
}

.nod::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 2.4px;
  box-shadow: inset 0 0 0 1.6px rgba(35, 33, 28, .2);
  transition: box-shadow .35s ease .35s;
}

.steg.klar .nod::before { box-shadow: inset 0 0 0 1.6px rgba(35, 33, 28, 0); }
.steg.klar .nod-ruta { stroke-dashoffset: 0; fill: rgba(217, 108, 44, .1); }
.steg.klar .nod-bock { stroke-dashoffset: 0; }

.steg-nr {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
}

.steg-nar {
  margin-top: 4px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

.steg-kropp h3 {
  margin-top: 8px;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.2;
  text-wrap: balance;
}

.steg-kropp .brod { margin-top: 10px; max-width: 44ch; }

@media (min-width: 900px) {
  .spine { left: 50%; transform: translateX(-1px); }

  .steg {
    grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
    padding-left: 0;
    padding-bottom: clamp(52px, 6vw, 82px);
  }

  .nod { position: relative; grid-column: 2; grid-row: 1; justify-self: center; margin-top: 1px; }

  .steg-v .steg-kropp { grid-column: 1; grid-row: 1; text-align: right; }
  .steg-v .steg-kropp .brod { margin-left: auto; }
  .steg-h .steg-kropp { grid-column: 3; grid-row: 1; }

  /* Bilden ligger i den tomma halvan mittemot texten, mot spinen.
     Bredden ar satt i px, inte via justify-self ensam: en shrink-to-fit-figur
     ger bilden 0x0 tills datan kommit, och da mater JS spinen for kort. */
  .steg-v .steg-bild {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    margin-top: 4px;
    width: 340px;
    max-width: 100%;
  }
}

/* ---------- Tjänster ---------- */

.tjanster { padding-block: var(--sek); }

.sek-topp {
  display: grid;
  gap: clamp(12px, 2vw, 28px);
  border-top: 1px solid var(--linje);
  padding-top: clamp(24px, 3.2vw, 40px);
}

@media (min-width: 900px) {
  .sek-topp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
}

.sek-topp h2 { margin-top: 10px; }
.sek-lead { max-width: 46ch; }

.rader { margin-top: clamp(26px, 3.4vw, 44px); }

.rad {
  display: grid;
  grid-template-columns: auto minmax(16px, 1fr) auto;
  align-items: end;
  column-gap: 14px;
  padding: clamp(17px, 2.1vw, 24px) 0;
  border-top: 1px solid var(--linje);
}

.rader .rad:last-child { border-bottom: 1px solid var(--linje); }

.rad-namn {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  line-height: 1.15;
  color: var(--blck);
  transition: color .2s ease;
}

.rad-led {
  height: 3px;
  margin-bottom: 0.4em;
  background-image: radial-gradient(circle, currentColor 1.4px, transparent 1.6px);
  background-size: 7px 3px;
  background-repeat: repeat-x;
  color: rgba(35, 33, 28, .32);
  transition: color .2s ease;
}

.rad-pris {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(0.8125rem, 1.3vw, 0.9375rem);
  letter-spacing: 0.01em;
  color: var(--orange-ink);
  white-space: nowrap;
  padding-bottom: 0.2em;
}

.rad-txt {
  grid-column: 1 / -1;
  margin-top: 7px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--mute);
  max-width: 54ch;
}

.rad:hover .rad-led { color: var(--orange); }
.rad:hover .rad-namn { color: var(--orange-ink); }

/* ---------- Prisexempel ---------- */

.pris { background: var(--ben-2); padding-block: var(--sek); }

.pris-ram { display: grid; gap: clamp(32px, 4.4vw, 72px); }

@media (min-width: 900px) {
  .pris-ram { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; }
}

.pris-text h2 { margin-top: 10px; }
.pris-text .brod { margin-top: 16px; }
.pris-not { color: var(--mute); font-size: 0.9375rem; }

.rakning-rubrik {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

.rakning { margin-top: 12px; }

.rakning > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-top: 1px solid var(--linje);
}

.rakning dt { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }

.rakning dd {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--blck);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rakning .rakning-delsumma { border-top-color: var(--linje-stark); }
.rakning .rakning-avdrag dd { color: var(--orange-ink); }
.rakning .rakning-summa { border-top: 2px solid var(--blck); margin-top: 4px; padding-top: 15px; }
.rakning .rakning-summa dt { font-family: var(--serif); font-size: 1.0625rem; color: var(--blck); }

.rakning .rakning-summa dd {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.8vw, 1.8rem);
  letter-spacing: -0.015em;
}

/* ---------- Packlapps-tips ---------- */

.tips { padding-block: var(--sek); }

.tips-grid {
  display: grid;
  gap: clamp(32px, 4vw, 54px);
  margin-top: clamp(34px, 4vw, 56px);
}

@media (min-width: 820px) {
  .tips-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tips-post { border-top: 1px solid var(--linje); padding-top: clamp(22px, 2.6vw, 30px); }

.lapp-tips { width: clamp(134px, 17vw, 164px); margin-bottom: clamp(18px, 2vw, 24px); }
.lapp-vrid-1 { transform: rotate(-3.2deg); }
.lapp-vrid-2 { transform: rotate(1.8deg); }
.lapp-vrid-3 { transform: rotate(-1.4deg); }

.tips-post h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.22; text-wrap: balance; }
.tips-post .brod { margin-top: 10px; }

/* ---------- Omdömen ---------- */

.ord { padding-block: var(--sek); }

.ord .ram { border-top: 1px solid var(--linje); padding-top: clamp(24px, 3.2vw, 40px); }

.ord-grid { display: grid; gap: clamp(32px, 4vw, 60px); margin-top: clamp(24px, 3vw, 38px); }

@media (min-width: 820px) {
  .ord-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ord-post blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.48;
  color: var(--blck);
  text-wrap: pretty;
}

.ord-post blockquote p::before { content: "\201D"; }
.ord-post blockquote p::after { content: "\201D"; }

.ord-post figcaption { display: flex; align-items: center; gap: 14px; margin-top: 20px; }

.ord-post figcaption img {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 2px;
  object-fit: cover;
}

.ord-post figcaption b {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--blck);
}

.ord-post figcaption i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mute);
}

/* ---------- Kontakt ---------- */

.kontakt { padding-block: var(--sek); }

.kontakt-ram {
  display: grid;
  gap: clamp(36px, 5vw, 78px);
  border-top: 1px solid var(--linje);
  padding-top: clamp(24px, 3.2vw, 40px);
}

@media (min-width: 900px) {
  .kontakt-ram { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: start; }
}

.brev h2 { margin-top: 10px; }
.brev .brod { margin-top: 16px; max-width: 42ch; }
.brev-lank { margin-top: 18px; }

.brev-lank a {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.9vw, 1.95rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--blck);
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
  transition: color .2s ease;
}

.brev-lank a:hover { color: var(--orange-ink); }

.brev-fakta { margin-top: clamp(26px, 3vw, 38px); }
.brev-fakta > div { border-top: 1px solid var(--linje); padding: 12px 0; }

.brev-fakta dt {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}

.brev-fakta dd { margin-top: 3px; font-family: var(--serif); font-size: 1.0625rem; color: var(--blck); }

.form { display: grid; gap: 0 clamp(20px, 3vw, 34px); }

@media (min-width: 620px) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.falt { display: flex; flex-direction: column; padding-bottom: 16px; }
.falt-bred { grid-column: 1 / -1; }

.falt label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 5px;
}

.falt input,
.falt select,
.falt textarea {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--blck);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linje-stark);
  border-radius: 0;
  padding: 12px 2px;
  min-height: 48px;
  width: 100%;
  transition: border-color .2s ease;
}

.falt select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2323211c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
  background-size: 12px 8px;
}

.falt textarea { min-height: 96px; resize: vertical; }
.falt input::placeholder, .falt textarea::placeholder { color: var(--mute); opacity: 1; }
.falt input:focus, .falt select:focus, .falt textarea:focus { border-bottom-color: var(--orange); }

.form .knapp { grid-column: 1 / -1; justify-self: start; margin-top: 12px; }

.form-not {
  grid-column: 1 / -1;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--mute);
}

/* ---------- Footer ---------- */

.fot { border-top: 2px solid var(--blck); padding-block: clamp(36px, 4.4vw, 58px) 24px; }

.fot-ram {
  display: grid;
  gap: clamp(22px, 3vw, 44px);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-2);
}

@media (min-width: 760px) {
  .fot-ram { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
}

.fot-marke {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--blck);
  margin-bottom: 6px;
}

.fot a { border-bottom: 1px solid var(--linje-stark); transition: color .2s ease, border-color .2s ease; }
.fot a:hover { color: var(--orange-ink); border-bottom-color: var(--orange); }

.fot-demo {
  margin-top: clamp(28px, 3.6vw, 46px);
  padding-top: 16px;
  border-top: 1px solid var(--linje);
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--mute);
}

/* ---------- Mobil-CTA ---------- */

.mobilcta { display: none; }

@media (max-width: 719px) {
  .mobilcta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    background: var(--ben);
    border-top: 1px solid var(--linje-stark);
  }

  .mobilcta .knapp { min-height: 48px; padding: 12px 8px; font-size: 0.9375rem; }
  body { padding-bottom: 78px; }
  body.meny-oppen .mobilcta { display: none; }
}

/* ---------- Modal ---------- */

body.modal-oppen { overflow-y: hidden; }
body.modal-oppen .mobilcta { display: none; }

.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-bak { position: absolute; inset: 0; background: rgba(35, 33, 28, .45); }

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 470px;
  background: var(--ben);
  border: 1px solid var(--linje-stark);
  border-radius: 3px;
  padding: clamp(26px, 4vw, 40px);
}

.modal-panel h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); }
.modal-panel .brod { margin-top: 12px; }
.modal-panel .knapp { margin-top: 24px; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .nod-ruta, .nod-bock { stroke-dashoffset: 0 !important; }
  .nod-ruta { fill: rgba(217, 108, 44, .1) !important; }
  .nod::before { box-shadow: none !important; }
  .spine i { height: 100% !important; }
}