/* ============================================================
   Pienaro Eiendom: Kortstokken, the contact form as a stack of cards (js/kortstokk.js; the XS component Sverre chose
   02.11.2026, «jeg vil nå at du skal lage et slikt kontaktskjema for alle kundene vi har laget nettside til», here from the
   Bygglund site). The four questions lie on top of each other; answering lifts the top card away; each answered card leaves
   a chip above the stack. The last card is name, phone and address, and it turns into the receipt when sent.
   Every colour, font and size comes from css/tokens.css through the --hs-* tokens: white cards on the deep navy of the
   contact section, tiles in kalk, navy for what is chosen. Without JavaScript the cards stand one under the other.
   ============================================================ */

:root {
  --hs-kort: var(--hvit);
  --hs-kort-kant: var(--linje);
  --hs-kort-skygge: 0 1px 2px var(--linje), 0 26px 50px -30px var(--skygge-dyp);
  --hs-kort-pad: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
  --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-slor: var(--marine-dyp);
  --hs-flis: var(--kalk);
  --hs-flis-hover: var(--hvit);
  --hs-flis-kant: var(--linje-sterk);
  --hs-flis-kant-hover: var(--marine);
  --hs-flis-skygge: 0 1px 2px var(--linje), 0 14px 28px -18px var(--skygge);
  --hs-valgt: var(--marine);
  --hs-valgt-tekst: var(--tekst-lys);
  --hs-tekst: var(--tekst);
  --hs-demp: var(--tekst-dempet);
  --hs-spor: var(--linje);
  --hs-fyll: var(--marine);
  --hs-glans: var(--strek-lys);       /* the light that runs along the fill when it grows */
  --hs-felt: var(--kalk);
  --hs-felt-h: 52px;
  --hs-felt-kant-hover: var(--marine);
  --hs-fokus: var(--fokus);
  --hs-feil: var(--feil);
  --hs-knapp: var(--marine);
  --hs-knapp-hover: var(--marine-2);
  --hs-knapp-tekst: var(--tekst-lys);
  --hs-send: var(--marine);
  --hs-send-hover: var(--marine-2);
  --hs-send-tekst: var(--hvit);
  --hs-radius: var(--radius);
  --hs-brikke-radius: 999px;                   /* the chips are pills, as the form's job choices were */
  --hs-font: var(--font);
  --hs-str-sporsmal: var(--str-h3);
  --hs-vekt-sporsmal: var(--vekt-tekst);
  --hs-str-liten: 0.9rem;
  --hs-str-tekst: var(--str-tekst);
  --hs-ease: var(--mykt);
  --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 and chips */
  /* the partners under the stack: small and still, the logos in the page's own ink on the section's sky */
  --hs-om-linje: var(--linje-lys);
    }

/* ---- the form: no card of its own, the cards are the questions ---- */
.hs {
  position: relative;
  min-width: 0;
  margin: 0;
  color: var(--hs-tekst);
  font-family: var(--hs-font);
  container-type: inline-size;
}

/* ---- on top: which card, the line, and the chips of the answered cards (JavaScript only) ---- */
.hs-topp {
  display: none;
}
/* Send stands only once kortstokk.js has taken the form (.hs-klar): without the script the form would post to the placeholder
   address and the visitor would lose what was typed (code review 03.11.2026). With several text fields there is no implicit
   send with Enter either; the noscript note gives the phone and the e-mail instead */
.hs:not(.hs-klar) .hs-send {
  display: none;
}
.hs-klar .hs-topp {
  display: block;
  margin: 0 0 0.75rem;
}
.hs-status {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 0.55rem;
  color: var(--hs-demp);
  font-size: var(--hs-str-liten);
  font-weight: 500;
  line-height: 1.3;
}
.hs-kort-tekst {
  flex: none;
  color: var(--hs-tekst);
  font-variant-numeric: tabular-nums;
}
.hs-hint {
  text-align: right;
}
.hs-bar {
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--hs-spor);
}
.hs-bar-fyll {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: var(--hs-fyll);
  transform: scaleX(0.04);
  transform-origin: 0 50%;
  transition: transform 0.75s var(--hs-ease);
}
/* a short light runs along the fill each time it grows */
.hs-bar-fyll::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, var(--hs-glans), transparent);
  opacity: 0;
  transform: translateX(-110%);
}
.hs-bar-fyll.er-glans::after {
  animation: hs-glans 1s var(--hs-ease) 0.2s;
}
@keyframes hs-glans {
  0% { opacity: 1; transform: translateX(-110%); }
  100% { opacity: 0; transform: translateX(340%); }
}

/* the chips: one row that never wraps, so the stack under it stands still; on a narrow screen it scrolls sideways */
.hs-brikker {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  min-height: calc(2.5rem + 6px);
  margin: 0.5rem -3px 0;
  padding: 3px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}
.hs-brikker::-webkit-scrollbar {
  display: none;
}
.hs-brikker:empty::before {
  content: attr(data-tom);
  color: var(--hs-demp);
  font-size: var(--hs-str-liten);
  line-height: 1.3;
}
.hs-brikker > li {
  flex: none;
}
.hs-brikke {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  margin: 0;
  padding: 0.35rem 0.95rem 0.35rem 0.7rem;
  border: 1px solid var(--hs-flis-kant);
  border-radius: var(--hs-brikke-radius);
  background: var(--hs-flis);
  color: var(--hs-tekst);
  font: 500 0.94rem/1.2 var(--hs-font);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s var(--hs-ease), background-color 0.2s var(--hs-ease), color 0.2s var(--hs-ease);
}
.hs-brikke svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .hs-brikke:hover {
    border-color: var(--hs-flis-kant-hover);
  }
}
.hs-brikke:focus-visible {
  outline: 2px solid var(--hs-fokus);
  outline-offset: 1px;
}
/* the chip of the card that is back on top */
.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.5s var(--hs-sprett) 0.14s both;
}
@keyframes hs-pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}
.hs-er-sendt .hs-brikker {
  display: none;
}

/* ---- the cards ---- */
.hs-stabel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.hs-steg {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  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 all are as tall as the tallest question and the stack never changes height
   between the questions; 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 {
  --d: 0;
  grid-area: 1 / 1;
  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.035);
  pointer-events: none;
  transition: opacity 0.45s var(--hs-ease);
}
.hs-stille .hs-steg,
.hs-stille .hs-steg::after {
  transition: none !important;
}
/* an answered card 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;
}
/* the last card (name, phone and address) is the tallest. While it lies under the questions it takes the height of the
   stack and does not set it, so the questions have no empty room at the foot; on top it grows to its own height, while
   the block under the form folds away. In a grid, an absolute child's box is its grid area; the end lines are named,
   because an «auto» end would reach the stack's padding edge and the card would stick out under the others */
.hs-klar .hs-steg[data-hs-kontakt]:not(.er-topp) {
  grid-area: 1 / 1 / 2 / 2;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* its edge under the stack is blank paper, like the questions' edges: cut through the middle, its fields would show */
.hs-klar .hs-steg[data-hs-kontakt]:not(.er-topp) > * {
  visibility: hidden;
}
/* sent: the lifted cards leave the grid, so the stack is as tall as the receipt and no taller; no edges under it */
.hs-er-sendt .hs-steg:not([data-hs-kontakt]) {
  display: none;
}
.hs-klar.hs-er-sendt .hs-stabel {
  padding-bottom: 0;
}
/* sent: the last card settles once and turns into the receipt */
.hs-er-sendt .hs-steg[data-hs-kontakt] > :not(.hs-ferdig) {
  display: none;
}
.hs-er-sendt .hs-steg[data-hs-kontakt] {
  animation: hs-sett 0.6s var(--hs-ease);
}
@keyframes hs-sett {
  0% { transform: translateY(6px) scale(0.985); }
  100% { transform: none; }
}

/* ---- inside a card ---- */
.hs-sporsmal {
  margin: 0 0 1rem;
  color: var(--hs-tekst);
  font-size: var(--hs-str-sporsmal);
  font-weight: var(--hs-vekt-sporsmal);
  line-height: 1.22;
  letter-spacing: -0.015em;
}
.hs-sporsmal:focus {
  outline: none;
}
/* back and next at the foot of every card; the row keeps its height when empty, so the cards keep theirs */
.hs-kort-fot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem 1rem;
  min-height: 3.25rem;
  margin-top: auto;
  padding-top: 1.25rem;
  box-sizing: content-box;
}
.hs-kort-fot [hidden] {
  display: none;
}
.hs:not(.hs-klar) .hs-kort-fot:not(:has(.hs-send)) {
  display: none;
}
.hs-kort-notis {
  margin: 0 auto 0 0;
  color: var(--hs-demp);
  font-size: var(--hs-str-liten);
  font-weight: 500;
  line-height: 1.3;
}

/* ---- the tiles: an icon and the words in a row; on the 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;
  padding: 0;
  border: 0;
}
@container (min-width: 32rem) {
  .hs-fliser-ikon,
  .hs-fliser-sted {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* the places' radio group is only a group for assistive technology: its tiles stand in the grid, and the field for another
   place, outside the group, takes the free place after them */
.hs-fliser-gruppe {
  display: contents;
}
/* two columns: an odd last tile takes the whole row */
@container (max-width: 31.99rem) {
  .hs-fliser > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
.hs-flis {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* the real radio covers the whole tile, invisible, so 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;          /* the side padding */
  --hs-ikon-str: 1.6rem;    /* the icon, and the tick that takes its place */
  --hs-hake-str: 1.4rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  height: 100%;
  min-height: 3.6rem;
  padding: 0.6rem var(--hs-px);
  border: 1px solid var(--hs-flis-kant);
  border-radius: var(--hs-radius);
  background: var(--hs-flis);
  color: var(--hs-tekst);
  transition: background-color 0.22s var(--hs-ease), border-color 0.22s var(--hs-ease), color 0.22s var(--hs-ease),
    transform 0.3s var(--hs-ease), box-shadow 0.3s var(--hs-ease);
}
@media (hover: hover) {
  .hs-flis:hover .hs-flis-inner {
    border-color: var(--hs-flis-kant-hover);
    background: var(--hs-flis-hover);
    box-shadow: var(--hs-flis-skygge);
    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);
  box-shadow: var(--hs-flis-skygge);
}
.hs-flis input:focus-visible + .hs-flis-inner {
  outline: 2px solid var(--hs-fokus);
  outline-offset: 2px;
}
.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);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hs-flis input:checked + .hs-flis-inner .hs-ikon {
  opacity: 0;
  transform: scale(0.5);
}
.hs-flis-tekst {
  min-width: 0;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.22;
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
}
/* the tick that pops in where the icon was */
.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%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hs-flis input:checked + .hs-flis-inner .hs-hake {
  opacity: 1;
  transform: none;
  transition-delay: 0.05s;
}
.hs-fliser-sted .hs-flis-inner {
  --hs-ikon-str: 1.35rem;
}
.hs-fliser-sted .hs-ikon svg {
  stroke-width: 1.6;
}
/* a phone: lower tiles and a smaller tick, so the whole question fits on the screen */
@container (max-width: 29.99rem) {
  .hs-fliser {
    gap: 0.45rem;
  }
  .hs-flis-inner {
    --hs-px: 0.65rem;
    --hs-ikon-str: 1.45rem;
    --hs-hake-str: 1.25rem;
    gap: 0.55rem;
    min-height: 3.3rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .hs-fliser-sted .hs-flis-inner {
    --hs-ikon-str: 1.3rem;
  }
}
/* «Totalrehabilitering» has a second soft hyphen only where the tile is too narrow for «rehabilitering» (a phone under
   about 380 px): with both everywhere, a computer would break it «Totalrehabili-tering» */
.hs-smal {
  display: none;
}
@container (max-width: 21rem) {
  .hs-bred {
    display: none;
  }
  .hs-smal {
    display: inline;
  }
}
/* a narrow phone (375 px and less): a little less round the words, so «rehabilitering» and «groundwork» break only where
   the soft hyphens in them allow */
@container (max-width: 22.5rem) {
  .hs-flis-inner {
    --hs-px: 0.55rem;
    --hs-ikon-str: 1.3rem;
    --hs-hake-str: 1.15rem;
    gap: 0.45rem;
  }
  .hs-flis-tekst {
    font-size: 0.92rem;
  }
}

/* the time card: four taller tiles two by two, the icon above the words */
.hs-fliser-tid .hs-flis-inner {
  --hs-px: 0.9rem;
  --hs-py: 0.85rem;
  --hs-ikon-str: 1.85rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: 5.5rem;
  padding: var(--hs-py) var(--hs-px) 0.8rem;
}
.hs-fliser-tid .hs-hake {
  top: calc(var(--hs-py) + (var(--hs-ikon-str) - var(--hs-hake-str)) / 2);
}

/* «Et annet sted»: the field under the tiles */
.hs-annet {
  display: grid;
  gap: 0.45rem;
  margin: 0.9rem 0 0;
}
.hs-klar .hs-annet {
  display: none;
}
.hs-klar .hs-annet.er-apen {
  display: grid;
  animation: hs-inn 0.4s var(--hs-ease) both;
}
@keyframes hs-inn {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}
/* the field stands among the tiles: on the free place after «Et annet sted», so the card does not grow
   (on a phone, with two tiles a row, it takes a row of its own); without the script it is a full row with its label */
.hs-fliser .hs-annet {
  margin: 0;
  grid-column: 1 / -1;
}
.hs-klar .hs-fliser .hs-annet {
  grid-column: auto;
}
.hs-klar .hs-fliser .hs-annet .hs-etikett {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hs-klar .hs-fliser .hs-annet .hs-inndata {
  height: 100%;
  min-height: 3.6rem;
  padding: 0.6rem 0.85rem;
}
@container (max-width: 31.99rem) {
  .hs-klar .hs-fliser .hs-annet {
    grid-column: 1 / -1;
  }
  .hs-klar .hs-fliser .hs-annet .hs-inndata {
    min-height: 3.3rem;
  }
}

/* ---- the fields: name, phone and address, in the form's own look (white, the strong line, the blue focus ring) ---- */
.hs-felter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
@container (min-width: 30rem) {
  .hs-felter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.hs-felt {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}
.hs-felt label,
.hs-etikett {
  color: var(--hs-tekst);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.3;
}
.hs-inn {
  position: relative;
  display: block;
}
.hs-inndata {
  display: block;
  width: 100%;
  min-height: var(--hs-felt-h);
  margin: 0;
  padding: 0.8rem 2.75rem 0.8rem 0.95rem;
  border: 1px solid var(--hs-flis-kant);
  border-radius: var(--hs-radius);
  background: var(--hs-felt);
  color: var(--hs-tekst);
  font: inherit;
  font-size: 1.0625rem;           /* 17 px: phones do not zoom into the field */
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s var(--hs-ease);
}
.hs-inndata:hover {
  border-color: var(--hs-felt-kant-hover);
}
.hs-inndata:focus-visible {
  outline: 2px solid var(--hs-fokus);
  outline-offset: 1px;
  border-color: var(--hs-fokus);
}
.hs-inndata[aria-invalid="true"] {
  border-color: var(--hs-feil);
}
/* the small tick inside 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;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.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;
}
.hs-feiltekst[hidden] {
  display: none;
}
/* the address takes the whole row under name and phone */
.hs-felt-hel {
  grid-column: 1 / -1;
}

/* «Fortell mer eller legg ved bilder»: closed until asked for. Inside, the site's own fields (.felt in sider.css): the
   description, the photos (js/skjema-bilder.js), the e-mail and «Hvor fant du oss?» */
.hs-mer {
  margin: 1.1rem 0 0;
  border-top: 1px solid var(--hs-spor);
}
.hs-mer summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.75rem 0 0;
  color: var(--hs-tekst);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.hs-mer summary::-webkit-details-marker {
  display: none;
}
.hs-mer summary:focus-visible {
  outline: 2px solid var(--hs-fokus);
  outline-offset: 2px;
}
.hs-mer-pluss {
  position: relative;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--hs-flis-kant);
  border-radius: 50%;
}
.hs-mer-pluss::before,
.hs-mer-pluss::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.6rem;
  height: 1.5px;
  margin: -0.75px 0 0 -0.3rem;
  background: currentColor;
  transition: transform 0.3s var(--hs-ease);
}
.hs-mer-pluss::after {
  transform: rotate(90deg);
}
.hs-mer[open] .hs-mer-pluss::after {
  transform: rotate(0deg);
}
.hs-valgfritt {
  color: var(--hs-demp);
  font-weight: 400;
}
.hs-mer-innhold {
  display: grid;
  gap: 1.1rem;
  padding: 0.9rem 0 0.25rem;
}
.hs-mer[open] .hs-mer-innhold {
  animation: hs-inn 0.4s var(--hs-ease) both;
}
.hs-mer .felt textarea {
  min-height: 6.5rem;
}
/* the fields under «Fortell mer» keep the old form's rules (sider.css .felt) but take the cards' own field colour (03.11.2026) */
.hs-mer .felt input,
.hs-mer .felt textarea,
.hs-mer .felt select,
.hs-mer .felt .bilder-knapp {
  background-color: var(--hs-felt);
}

/* ---- back, next and send ---- */
.hs-personvern {
  margin: 1rem 0 0;
  color: var(--hs-demp);
  font-size: var(--hs-str-liten);
  line-height: 1.45;
}
.hs-personvern a {
  color: var(--hs-tekst);
  text-decoration: underline;
  text-decoration-color: var(--hs-flis-kant);
  text-underline-offset: 0.2em;
}
.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;
  background: none;
  color: var(--hs-demp);
  font: 500 1rem/1.2 var(--hs-font);
  cursor: pointer;
  transition: color 0.2s var(--hs-ease);
}
.hs-tilbake svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--hs-ease);
}
.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 var(--hs-fokus);
  outline-offset: 3px;
}
/* the buttons in the site's own shape (.knapp in main.css): 48 px, square corners, weight 500 */
.hs-knapp {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  margin: 0;
  padding: 0.85rem 1.5rem;
  overflow: hidden;
  border: 1px solid var(--hs-knapp);
  border-radius: var(--hs-radius);
  background: var(--hs-knapp);
  color: var(--hs-knapp-tekst);
  font: 500 1rem/1.2 var(--hs-font);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.25s var(--hs-ease), border-color 0.25s var(--hs-ease), transform 0.2s var(--hs-ease);
}
.hs-knapp svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--hs-ease);
}
.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 {
  border-color: var(--hs-send);
  background: var(--hs-send);
  color: var(--hs-send-tekst);
}
.hs-send:hover {
  border-color: var(--hs-send-hover);
  background: var(--hs-send-hover);
}
/* «Neste» comes in once the step has an answer */
.hs-neste:not([hidden]) {
  animation: hs-inn 0.35s var(--hs-ease) both;
}
/* the send button nods once the three fields are filled in right */
.hs-send.er-klar {
  animation: hs-nikk 0.6s var(--hs-sprett);
}
@keyframes hs-nikk {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.hs-send.er-klar svg {
  animation: hs-pil 0.7s var(--hs-ease) 0.1s;
}
@keyframes hs-pil {
  0%, 100% { transform: none; }
  45% { transform: translateX(5px); }
}
.hs-send[aria-busy="true"] {
  pointer-events: none;
}
.hs-send[aria-busy="true"] svg {
  animation: hs-snurr 0.8s linear infinite;
}
@keyframes hs-snurr {
  to { transform: rotate(360deg); }
}
.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); }
}
/* the message under the button: the form is not connected yet, or a send that failed; the phone and e-mail are links */
.hs-melding {
  margin: 0.85rem 0 0;
  color: var(--hs-feil);
  font-size: var(--hs-str-tekst);   /* body text: 17 px on a phone, 18 px on a computer */
  line-height: 1.5;
}
.hs-melding:empty {
  display: none;
}
.hs-melding:focus {
  outline: none;
}
.hs-melding a {
  color: inherit;
  font-weight: 500;
  white-space: nowrap;
}
@container (max-width: 29.99rem) {
  .hs-kort-fot:has(.hs-send) .hs-send {
    flex: 1 1 auto;
  }
}

/* ---- sent: the last card is the receipt, a tick and the thanks over everything that was sent ---- */
.hs-ferdig {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
  text-align: left;
}
.hs-ferdig > :not(.hs-ferdig-merke):not(.hs-ferdig-tittel) {
  grid-column: 1 / -1;
}
.hs-ferdig[hidden] {
  display: none;
}
.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;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 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; }
}
/* one ring that spreads out from the circle */
.hs-ferdig-merke::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--hs-valgt);
  border-radius: 50%;
  opacity: 0;
  animation: hs-bolge 0.9s var(--hs-ease) 0.45s;
}
@keyframes hs-bolge {
  from { opacity: 0.45; transform: scale(1); }
  to { opacity: 0; transform: scale(1.7); }
}
.hs-ferdig-tittel {
  margin: 0;
  color: var(--hs-tekst);
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
  font-weight: var(--hs-vekt-sporsmal);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
  animation: hs-inn 0.45s var(--hs-ease) 0.25s both;
}
/* everything that was sent, line by line */
.hs-kvittering {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem 1.25rem;
  margin: 1.1rem 0 0;
  padding: 0.95rem 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.06s);
}
.hs-kvittering.hs-stille-liste > * {
  animation: none;
}
.hs-ferdig-tekst {
  margin: 1rem 0 0;
  color: var(--hs-demp);
  font-size: var(--hs-str-tekst);
  line-height: 1.5;
}
.hs-ferdig-tekst a {
  color: var(--hs-tekst);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--hs-flis-kant);
  text-underline-offset: 0.2em;
}

/* ---- the column: the form and the partners under it ---- */
.hs-kolonne {
  min-width: 0;
}

/* ---- the reviews under the stack (as on the Janis and Tid Bolig sites, 03.11.2026): one quiet list, a round initial in the
   slate accent, the name beside it and the text under, a fine line between. While the last card is on top, kortstokk.js sets
   .er-borte and the block folds away, so name, phone and address get the whole view. A grid container: minmax(0, 1fr) and
   min-width 0, or the page grows wider than the screen ---- */
.hs-omtaler {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr;
  min-width: 0;
  margin-top: 1.75rem;
  color: var(--hs-tekst);
  font-family: var(--hs-font);
  transition: grid-template-rows 0.5s var(--hs-ease), margin-top 0.5s var(--hs-ease), opacity 0.4s var(--hs-ease) 0.1s, visibility 0s;
}
.hs-om-innhold {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.hs-omtaler.er-borte {
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.5s var(--hs-ease) 0.05s, margin-top 0.5s var(--hs-ease) 0.05s, opacity 0.25s var(--hs-ease), visibility 0s 0.55s;
}
.hs-om-hode {
  margin: 0 0 0.25rem;
  color: var(--hs-demp);
  font-size: var(--str-merke);
  font-weight: var(--vekt-merke);
  letter-spacing: var(--sporing-merke);
  line-height: 1.4;
  text-transform: uppercase;
}
.hs-om-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* the initial on the left over two rows (name, label), the text under both in the second column */
.hs-om-kort {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: 0.85rem;
  padding: 1rem 0 1.05rem;
  border-top: 1px solid var(--hs-om-linje);
}
.hs-om-bokstav {
  display: grid;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--hs-valgt);
  color: var(--hs-valgt-tekst);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}
/* the three points under the form carry a line icon instead of an initial */
.hs-om-bokstav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hs-om-navn {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0;
  font-size: var(--hs-str-liten);
  font-weight: 500;
  line-height: 1.4;
}
.hs-om-type {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0.15rem 0 0;
  color: var(--hs-demp);
  font-size: var(--str-merke);
  font-weight: var(--vekt-merke);
  letter-spacing: var(--sporing-merke);
  line-height: 1.3;
  text-transform: uppercase;
}
.hs-om-sitat {
  grid-column: 2;
  grid-row: 3;
  margin: 0.6rem 0 0;
}
.hs-om-sitat p {
  margin: 0;
  font-size: var(--hs-str-tekst);
  line-height: 1.5;
}

/* the spam trap: 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;
  }
}

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