/* ============================================================
   Bygg & Håndverk Design: Kortstokken, the contact form as a stack of three cards (js/kontakt.js). The XS component Sverre
   approved on the Frekvens site 06.11.2026 («ok, skjemaet er fint»), taken from the Pienaro Eiendom site (css/kortstokk.css
   there, 08.11.2026) and fitted to this site: kalk cards on the kalk-2 section, deep petrol buttons, petrol for what is
   chosen, the pale wood (eik) only in the focus ring. Clean and plain (Sverre 18.10.2026: «Kontaktskjema bør være enklere,
   og mer ovresiktlig»): no gold, nothing spins. Only transform and opacity move.
   Every colour and font comes from css/tokens.css (and the --skjema-* tokens from production/kilde/kontakt/tokens-tillegg.css)
   through the --hs-* names below. Without JavaScript the three cards stand one under the other as one plain form.
   ============================================================ */

:root {
  --hs-font: var(--skrift);
  --hs-kort: var(--kalk);
  --hs-kort-kant: var(--linje);
  --hs-kort-skygge: 0 1px 2px var(--linje), 0 22px 44px -30px var(--skjema-skygge);
  --hs-slor: var(--petrol-dyp);            /* the shade over the cards lying under the top one */
  --hs-flis: var(--skjema-flate);
  --hs-flis-kant: var(--skjema-kant);
  --hs-hover-kant: var(--petrol);
  --hs-valgt: var(--petrol);
  --hs-valgt-tekst: var(--tekst-lys);
  --hs-felt: var(--skjema-flate);
  --hs-felt-kant: var(--skjema-kant);
  --hs-tekst: var(--tekst);
  --hs-demp: var(--tekst-dempet);
  --hs-spor: var(--linje);
  --hs-fyll: var(--petrol);
  --hs-feil: var(--skjema-feil);
  --hs-knapp: var(--petrol-dyp);
  --hs-knapp-hover: var(--petrol);
  --hs-knapp-tekst: var(--tekst-lys);
  /* the focus ring in pale wood, with a thin line of deep petrol outside it so it holds 3:1 on kalk too */
  --hs-fokus-ring: 0 0 0 2px var(--kalk), 0 0 0 5px var(--eik), 0 0 0 6px var(--petrol-dyp);
  --hs-radius: var(--skjema-radius);
  --hs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hs-loft: cubic-bezier(0.4, 0, 0.2, 1);       /* a card lifting away: quick and even */
  --hs-sprett: cubic-bezier(0.34, 1.56, 0.64, 1); /* a small overshoot for the ticks */

  --hs-kort-pad: clamp(1.25rem, 0.75rem + 2cqi, 1.75rem);
  --hs-trinn: 0.625rem;                    /* how much of each card below shows under the one above */
  --hs-krymp: 0.035;                       /* how much narrower each card below is */
  --hs-str-sporsmal: clamp(1.3rem, 1rem + 2cqi, 1.6rem);
  --hs-str-felt: 1.0625rem;                /* 17 px: a phone does not zoom into the field */
  --hs-str-tekst: 1.0625rem;
  --hs-str-etikett: 1.0625rem;
  --hs-str-liten: 0.9375rem;
  --hs-felt-h: 3.25rem;                    /* 52 px */
}
@media (min-width: 768px) {
  :root {
    --hs-str-felt: 1.125rem;               /* 18 px on a computer */
    --hs-str-tekst: 1.125rem;
  }
}

/* ---- the form ---- */
.hs {
  position: relative;
  min-width: 0;
  margin: 0;
  color: var(--hs-tekst);
  font-family: var(--hs-font);
  font-size: var(--hs-str-tekst);
  line-height: 1.5;
  container-type: inline-size;
}
.hs *,
.hs *::before,
.hs *::after {
  box-sizing: border-box;
}
.hs [hidden] {
  display: none !important;
}
.hs svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- on top: which card, the answers given so far, the line (JavaScript only) ---- */
.hs-topp {
  display: none;
}
.hs-klar .hs-topp {
  display: block;
  margin: 0 0 0.75rem;
}
.hs-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: calc(2.75rem + 6px);
  margin: 0 0 0.45rem;
}
.hs-kort-tekst {
  flex: none;
  color: var(--hs-tekst);
  font-size: var(--hs-str-liten);
  font-weight: 500;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
/* the answers: one row that never wraps, on the right; on a narrow screen it scrolls sideways */
.hs-brikker {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  margin: 0 -3px 0 0;
  padding: 3px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}
.hs-brikker::-webkit-scrollbar {
  display: none;
}
.hs-brikker > li {
  flex: none;
}
.hs-brikker > li:first-child {
  margin-left: auto;   /* on the right while there is room; an auto margin falls to 0 when the row is full, so it still scrolls */
}
.hs-brikke {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.35rem 0.95rem 0.35rem 0.75rem;
  border: 1px solid var(--hs-flis-kant);
  border-radius: 999px;
  background: var(--hs-flis);
  color: var(--hs-tekst);
  font: 500 var(--hs-str-liten)/1.2 var(--hs-font);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hs-brikke svg {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  stroke-width: 1.6;
}
@media (hover: hover) {
  .hs-brikke:hover {
    border-color: var(--hs-hover-kant);
  }
}
.hs-brikke:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--hs-fokus-ring);
}
.hs-brikke.er-aktiv {
  border-color: var(--hs-valgt);
  background: var(--hs-valgt);
  color: var(--hs-valgt-tekst);
}
.hs-brikke-ny {
  animation: hs-pop 0.45s var(--hs-sprett) 0.12s both;
}
@keyframes hs-pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}
.hs-er-sendt .hs-brikker {
  display: none;
}
.hs-bar {
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--hs-spor);
}
.hs-bar-fyll {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--hs-fyll);
  transform: scaleX(0.04);
  transform-origin: 0 50%;
  transition: transform 0.7s var(--hs-ease);
}

/* ---- the cards ---- */
.hs-stabel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.hs-steg,
.hs-ferdig {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-inline-size: 0;   /* a fieldset is as wide as its content by default */
  margin: 0;
  padding: var(--hs-kort-pad);
  border: 1px solid var(--hs-kort-kant);
  border-radius: var(--hs-radius);
  background: var(--hs-kort);
  box-shadow: var(--hs-kort-skygge);
}
/* the stack: every card in the same cell, so the stack keeps its height between the cards; room below for the edges of the
   three cards under the top one */
.hs-klar .hs-stabel {
  position: relative;
  gap: 0;
  padding-bottom: calc(3 * var(--hs-trinn));
}
.hs-klar .hs-steg,
.hs-klar .hs-ferdig {
  grid-area: 1 / 1;
}
.hs-klar .hs-steg {
  --d: 0;
  z-index: calc(10 - var(--d));
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--d) * var(--hs-trinn))) scale(calc(1 - var(--d) * var(--hs-krymp)));
  transition: transform 0.55s var(--hs-ease) calc(var(--d) * 45ms + 110ms), opacity 0.35s var(--hs-ease), visibility 0s;
}
/* each card below is a little deeper */
.hs-klar .hs-steg::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--hs-slor);
  opacity: calc(var(--d) * 0.04);
  pointer-events: none;
  transition: opacity 0.45s var(--hs-ease);
}
.hs-stille .hs-steg,
.hs-stille .hs-steg::after,
.hs-stille .hs-bar-fyll {
  transition: none !important;
}
/* a card that is done lifts up and away; brought back, it comes down from the same place */
.hs-klar .hs-steg.er-ute {
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-1.75rem) rotate(-1.2deg);
  transition: transform 0.4s var(--hs-loft), opacity 0.22s cubic-bezier(0, 0, 0.2, 1), visibility 0s 0.4s;
}
/* sent: the thanks takes the stack alone */
.hs-er-sendt .hs-steg {
  display: none;
}
.hs-klar.hs-er-sendt .hs-stabel {
  padding-bottom: 0;
}
.hs-er-sendt .hs-ferdig {
  animation: hs-sett 0.6s var(--hs-ease);
}
@keyframes hs-sett {
  from { transform: translateY(6px) scale(0.985); }
  to { transform: none; }
}

/* the field under the place tiles (open only while «Et annet sted» is chosen), and the optional part of the last card */
.hs-annet {
  margin-top: 0.75rem;
}
.hs-annet[hidden] {
  display: none;
}
.hs-mer {
  margin-top: 1rem;
  border-top: 1px solid var(--hs-kort-kant);
}
.hs-mer summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0;
  color: var(--hs-tekst);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.hs-mer summary::-webkit-details-marker {
  display: none;
}
.hs-mer summary::before {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s var(--hs-ease);
}
.hs-mer[open] summary::before {
  transform: rotate(45deg);
}
.hs-mer .hs-valgfritt {
  font-weight: 400;
}
.hs-mer > .hs-felter {
  margin-top: 0;
  padding-bottom: 0.25rem;
}

/* ---- inside a card ---- */
/* the legend floats, so it is not drawn on the fieldset's border but stands in the card like any other line */
.hs-sporsmal {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--hs-tekst);
  font-size: var(--hs-str-sporsmal);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.hs-sporsmal:focus {
  outline: none;
}
.hs-sporsmal + * {
  clear: both;
}
.hs-under {
  margin: 0.35rem 0 0;
  color: var(--hs-demp);
  font-size: 1rem;
  line-height: 1.4;
}

/* ---- the tiles: the icon and the words; on a chosen tile a tick takes the icon's place ---- */
.hs-fliser {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.85rem 0 0;
}
@container (min-width: 34rem) {
  .hs-fliser {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* «Noe annet» alone on the last row takes the whole row */
  .hs-fliser > :last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }
}
.hs-flis {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* the real checkbox covers the whole tile, invisible: a tap anywhere picks it, and the keyboard works as usual */
.hs-flis input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.hs-flis-inner {
  --hs-px: 0.8rem;
  --hs-ikon-str: 1.6rem;
  --hs-hake-str: 1.4rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  height: 100%;
  min-height: 3.4rem;
  padding: 0.45rem var(--hs-px);
  border: 1px solid var(--hs-flis-kant);
  border-radius: var(--hs-radius);
  background: var(--hs-flis);
  color: var(--hs-tekst);
  transition: transform 0.3s var(--hs-ease);
}
@media (hover: hover) {
  .hs-flis:hover .hs-flis-inner {
    border-color: var(--hs-hover-kant);
    transform: translateY(-2px);
  }
}
.hs-flis input:active + .hs-flis-inner {
  transform: scale(0.97);
  transition-duration: 0.1s;
}
.hs-flis input:checked + .hs-flis-inner {
  border-color: var(--hs-valgt);
  background: var(--hs-valgt);
  color: var(--hs-valgt-tekst);
}
.hs-flis input:focus-visible + .hs-flis-inner {
  box-shadow: var(--hs-fokus-ring);
}
.hs-ikon {
  display: block;
  flex: none;
  line-height: 0;
  transition: opacity 0.18s var(--hs-ease), transform 0.3s var(--hs-ease);
}
.hs-ikon svg {
  width: var(--hs-ikon-str);
  height: var(--hs-ikon-str);
  stroke-width: 1.5;
}
.hs-flis input:checked + .hs-flis-inner .hs-ikon {
  opacity: 0;
  transform: scale(0.5);
}
.hs-flis-tekst {
  min-width: 0;
  font-size: var(--hs-str-etikett);
  font-weight: 500;
  line-height: 1.25;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.hs-hake {
  position: absolute;
  top: calc(50% - var(--hs-hake-str) / 2);
  left: calc(var(--hs-px) + (var(--hs-ikon-str) - var(--hs-hake-str)) / 2);
  display: grid;
  place-items: center;
  width: var(--hs-hake-str);
  height: var(--hs-hake-str);
  border-radius: 50%;
  background: var(--hs-valgt-tekst);
  color: var(--hs-valgt);
  opacity: 0;
  transform: scale(0.3) rotate(-30deg);
  transition: opacity 0.18s var(--hs-ease), transform 0.5s var(--hs-sprett);
}
.hs-hake svg {
  width: 62%;
  height: 62%;
  stroke-width: 2.8;
}
.hs-flis input:checked + .hs-flis-inner .hs-hake {
  opacity: 1;
  transform: none;
  transition-delay: 0.05s;
}
/* a phone: the icon stands over the words, so «Rehabilitering» and «byggesøknad» get the tile's whole width and never break
   inside the word; the tick takes the icon's place as before (the time card on the Pienaro site has the same shape) */
@container (max-width: 29.99rem) {
  .hs-fliser {
    gap: 0.45rem;
  }
  .hs-flis-inner {
    --hs-px: 0.7rem;
    --hs-py: 0.5rem;
    --hs-ikon-str: 1.25rem;
    --hs-hake-str: 1.2rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.2rem;
    min-height: 3.4rem;
    padding: var(--hs-py) var(--hs-px);
  }
  .hs-flis-tekst {
    line-height: 1.2;
  }
  .hs-hake {
    top: calc(var(--hs-py) + (var(--hs-ikon-str) - var(--hs-hake-str)) / 2);
  }
}

/* ---- the fields ---- */
.hs-felter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 1rem 0 0;
}
@container (min-width: 30rem) {
  .hs-felter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hs-felt-hel {
    grid-column: 1 / -1;
  }
  /* the job card: the description wide, the place beside it, the photos under both */
  [data-hs-steg="om"] .hs-felter {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  [data-hs-steg="om"] .hs-felt-hel {
    grid-column: auto;
  }
  [data-hs-steg="om"] .hs-vedlegg {
    grid-column: 1 / -1;
  }
}
.hs-felt {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.hs-felt > label,
.hs-etikett {
  color: var(--hs-tekst);
  font-size: var(--hs-str-etikett);
  font-weight: 500;
  line-height: 1.3;
}
.hs-valgfritt {
  color: var(--hs-demp);
  font-weight: 400;
}
.hs-inn {
  position: relative;
  display: block;
}
.hs-inndata {
  display: block;
  width: 100%;
  min-height: var(--hs-felt-h);
  margin: 0;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--hs-felt-kant);
  border-radius: var(--hs-radius);
  background: var(--hs-felt);
  color: var(--hs-tekst);
  font-family: var(--hs-font);
  font-size: var(--hs-str-felt);
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}
.hs-inn .hs-inndata {
  padding-right: 2.75rem;   /* room for the tick */
}
.hs-tekstfelt {
  min-height: 6.5rem;
  resize: vertical;
}
.hs-inndata::placeholder {
  color: var(--hs-demp);
  opacity: 1;
}
@media (hover: hover) {
  .hs-inndata:hover {
    border-color: var(--hs-hover-kant);
  }
}
.hs-inndata:focus-visible {
  outline: 2px solid transparent;
  border-color: var(--hs-knapp);
  box-shadow: var(--hs-fokus-ring);
}
.hs-inndata[aria-invalid="true"] {
  border-color: var(--hs-feil);
  box-shadow: inset 0 0 0 1px var(--hs-feil);
}
.hs-inndata[aria-invalid="true"]:focus-visible {
  box-shadow: inset 0 0 0 1px var(--hs-feil), var(--hs-fokus-ring);
}
/* the small tick in a field once it is filled in right */
.hs-ok {
  position: absolute;
  top: 50%;
  right: 0.85rem;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: -0.7rem;
  border-radius: 50%;
  background: var(--hs-valgt);
  color: var(--hs-valgt-tekst);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.18s var(--hs-ease), transform 0.5s var(--hs-sprett);
  pointer-events: none;
}
.hs-ok svg {
  width: 0.85rem;
  height: 0.85rem;
  stroke-width: 2.8;
}
.hs-inn.er-ok .hs-ok {
  opacity: 1;
  transform: none;
}
.hs-feiltekst {
  margin: 0;
  color: var(--hs-feil);
  font-size: var(--hs-str-liten);
  font-weight: 500;
  line-height: 1.35;
}
/* the first card's error stands in its foot, left of «Neste», so the card does not grow */
.hs-kort-fot .hs-feiltekst {
  flex: 1 1 12rem;
  margin-right: auto;
}

/* ---- the photos: without JavaScript the browser's own file field; with it, a button and a row of small squares ---- */
.hs-vedlegg-rad {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.hs-fil {
  max-width: 100%;
  color: var(--hs-tekst);
  font-family: var(--hs-font);
  font-size: 1rem;
}
.hs:not(.hs-klar) .hs-fil-knapp {
  display: none;
}
.hs-klar .hs-fil {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}
.hs-fil-knapp {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--hs-felt-h);
  padding: 0 1.1rem;
  border: 1px solid var(--hs-felt-kant);
  border-radius: var(--hs-radius);
  background: var(--hs-felt);
  color: var(--hs-tekst);
  font: 500 var(--hs-str-etikett)/1.2 var(--hs-font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hs-fil-knapp svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 1.6;
}
@media (hover: hover) {
  .hs-fil-knapp:hover {
    border-color: var(--hs-hover-kant);
  }
}
.hs-fil:focus-visible + .hs-fil-knapp {
  border-color: var(--hs-knapp);
  box-shadow: var(--hs-fokus-ring);
}
.hs-filer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hs-filer li {
  position: relative;
  width: var(--hs-felt-h);
  height: var(--hs-felt-h);
}
.hs-filer img,
.hs-fil-tom {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--hs-felt-kant);
  border-radius: var(--hs-radius);
  background: var(--hs-felt);
  object-fit: cover;
}
.hs-fil-tom {
  display: grid;
  place-items: center;
  color: var(--hs-demp);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* the remove button: a small round mark at the corner, in a 44 px area you can hit with a thumb */
.hs-fil-fjern {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--hs-valgt-tekst);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hs-fil-fjern::before {
  content: "";
  grid-area: 1 / 1;
  width: 26px;
  height: 26px;
  border: 2px solid var(--hs-kort);
  border-radius: 50%;
  background: var(--hs-knapp);
}
.hs-fil-fjern svg {
  position: relative;
  grid-area: 1 / 1;
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}
.hs-fil-fjern:focus-visible {
  outline: 2px solid transparent;
}
.hs-fil-fjern:focus-visible::before {
  box-shadow: var(--hs-fokus-ring);
}
.hs-hjelp {
  margin: 0;
  color: var(--hs-demp);
  font-size: var(--hs-str-liten);
  line-height: 1.4;
}
.hs-hjelp-melding {
  color: var(--hs-tekst);
  font-weight: 500;
}

/* ---- back, next and send at the foot of a card ---- */
.hs-kort-fot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem 1rem;
  margin-top: auto;
  padding-top: 1rem;
}
.hs:not(.hs-klar) .hs-kort-fot-js {
  display: none;
}
.hs-tilbake {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  margin: 0 auto 0 0;
  padding: 0.5rem 0.25rem;
  border: 0;
  border-radius: var(--hs-radius);
  background: none;
  color: var(--hs-demp);
  font: 500 1rem/1.2 var(--hs-font);
  cursor: pointer;
}
.hs-tilbake svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke-width: 1.7;
  transition: transform 0.3s var(--hs-ease);
}
@media (hover: hover) {
  .hs-tilbake:hover {
    color: var(--hs-tekst);
  }
  .hs-tilbake:hover svg {
    transform: translateX(-3px);
  }
}
.hs-tilbake:focus-visible,
.hs-knapp:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--hs-fokus-ring);
}
.hs-knapp {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  margin: 0;
  padding: 0.8rem 1.5rem;
  border: 1px solid var(--hs-knapp);
  border-radius: var(--hs-radius);
  background: var(--hs-knapp);
  color: var(--hs-knapp-tekst);
  font: 500 var(--hs-str-etikett)/1.2 var(--hs-font);
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s var(--hs-ease);
}
.hs-knapp svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.7;
  transition: transform 0.3s var(--hs-ease);
}
@media (hover: hover) {
  .hs-knapp:hover {
    border-color: var(--hs-knapp-hover);
    background: var(--hs-knapp-hover);
  }
  .hs-knapp:hover svg {
    transform: translateX(3px);
  }
}
.hs-knapp:active {
  transform: scale(0.98);
}
.hs-send[aria-busy="true"] {
  pointer-events: none;
}
.hs-send[aria-busy="true"] svg {
  animation: hs-vent 1s var(--hs-ease) infinite;
}
@keyframes hs-vent {
  0%, 100% { opacity: 1; transform: none; }
  50% { opacity: 0.35; transform: translateX(4px); }
}
.hs-rist {
  animation: hs-rist 0.4s var(--hs-ease);
}
@keyframes hs-rist {
  0%, 100% { transform: none; }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
/* a phone: «Tilbake» and Send on one row, Send taking the rest of it; the chips without their icons, so two fit beside the
   card count */
@container (max-width: 29.99rem) {
  .hs-kort-fot {
    gap: 0.75rem 0.5rem;
  }
  .hs-send {
    flex: 1 1 auto;
    padding-inline: 1rem;
  }
  .hs-tilbake {
    padding-inline: 0.15rem;
  }
  .hs-brikke {
    padding-inline: 0.85rem;
  }
  .hs-brikke svg {
    display: none;
  }
}
/* the message under the button: the form is not connected yet, or a send that failed */
.hs-melding {
  margin: 0.85rem 0 0;
  color: var(--hs-feil);
  font-size: var(--hs-str-tekst);
  font-weight: 500;
  line-height: 1.5;
}
.hs-melding:empty {
  display: none;
}
.hs-melding:focus {
  outline: none;
}
.hs-melding a,
.hs-ring a {
  color: var(--hs-tekst);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--hs-flis-kant);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.hs-melding a {
  color: inherit;
}
.hs-melding a:focus-visible,
.hs-ring a:focus-visible {
  outline: 2px solid transparent;
  border-radius: 1px;
  box-shadow: var(--hs-fokus-ring);
}
.hs-ring {
  margin: 0.85rem 0 0;
  color: var(--hs-demp);
  font-size: var(--hs-str-tekst);
  line-height: 1.5;
}
.hs-kort-fot + .hs-ring {
  margin-top: 0.6rem;
}
/* a message on show already gives the phone number: the line under it steps aside, so the number stands once */
.hs-melding:not(:empty) + .hs-ring {
  display: none;
}

/* ---- sent: a tick, the thanks and what was sent ---- */
.hs-ferdig {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  align-content: start;
  column-gap: 1rem;
}
.hs-ferdig > :not(.hs-ferdig-merke):not(.hs-ferdig-tittel) {
  grid-column: 1 / -1;
}
.hs-ferdig:focus {
  outline: none;
}
.hs-ferdig-merke {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
}
.hs-ferdig-sirkel {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  background: var(--hs-valgt);
  color: var(--hs-valgt-tekst);
  animation: hs-sirkel 0.6s var(--hs-sprett) 0.15s both;
}
.hs-ferdig-sirkel svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke-width: 3;
}
/* the tick is drawn by a cover in the circle's colour that slides off it */
.hs-ferdig-dekke {
  position: absolute;
  inset: 0;
  background: var(--hs-valgt);
  animation: hs-dekke 0.5s var(--hs-ease) 0.5s both;
}
@keyframes hs-dekke {
  from { transform: translateX(-12%); }
  to { transform: translateX(100%); }
}
@keyframes hs-sirkel {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: none; }
}
.hs-ferdig-tittel {
  margin: 0;
  color: var(--hs-tekst);
  font-size: var(--hs-str-sporsmal);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
  animation: hs-inn 0.45s var(--hs-ease) 0.25s both;
}
@keyframes hs-inn {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}
.hs-kvittering {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem 1.25rem;
  margin: 1.1rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--hs-spor);
}
.hs-kvittering:empty {
  display: none;
}
.hs-kvittering dt {
  color: var(--hs-demp);
  font-size: var(--hs-str-liten);
  font-weight: 500;
  line-height: 1.6;
}
.hs-kvittering dd {
  margin: 0;
  color: var(--hs-tekst);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.hs-kvittering > * {
  animation: hs-inn 0.45s var(--hs-ease) both;
  animation-delay: calc(0.35s + var(--hs-i, 0) * 0.05s);
}
.hs-kvittering.hs-stille-liste > * {
  animation: none;
}

/* the trap for bots: never shown */
.hs-skjult {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* a phone: the edges of the cards below are a little thinner */
@container (max-width: 29.99rem) {
  .hs-stabel {
    --hs-trinn: 0.5rem;
  }
}

/* high contrast (Windows): the chosen tiles keep a mark, since the checkbox itself is invisible */
@media (forced-colors: active) {
  .hs-flis input:checked + .hs-flis-inner {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }
  .hs-flis input:focus-visible + .hs-flis-inner,
  .hs-inndata:focus-visible,
  .hs-knapp:focus-visible,
  .hs-tilbake:focus-visible,
  .hs-brikke:focus-visible,
  .hs-fil:focus-visible + .hs-fil-knapp {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

/* reduced motion: every change happens at once */
@media (prefers-reduced-motion: reduce) {
  .hs *,
  .hs *::before,
  .hs *::after {
    animation: none !important;
    transition: none !important;
  }
  .hs-flis:hover .hs-flis-inner,
  .hs-flis input:active + .hs-flis-inner,
  .hs-knapp:active,
  .hs-knapp:hover svg,
  .hs-tilbake:hover svg {
    transform: none;
  }
  .hs-ferdig-dekke {
    display: none;
  }
}