/* ============================================================
   ATG BYGG AS, stilark

   Formen er hentet fra Gurigard: mørk hero, søkefeltet i et lyst
   kort oppa. Fargene er logoens egne, ikke Gurigards gull.

   Rette hjorner overalt bortsett fra det man tar på. Serif bare på
   beløpet.

   Systemfonter. Ingen avhengigheter.
   ============================================================ */

:root {
  --kull: #17150f;
  --kull-lys: #221f18;
  --papir: #f7f4ef;
  --papir-dyp: #efe9df;

  --oransje: #f27b08;        /* logoens tak */
  --oransje-lys: #f79a3e;    /* på mørk bunn */
  --oransje-tekst: #a85400;  /* på lys bunn, for kontrast */

  --tekst: #26221d;
  --tekst-dus: #6a635a;
  --lys-tekst: #f3efe9;
  --lys-tekst-dus: #b3aca2;

  --linje: rgba(38, 34, 29, .13);
  --lys-linje: rgba(243, 239, 233, .15);

  --serif: "Iowan Old Style", "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --radius: 0;            /* flater, tabeller, bokser. vi bygger rette vinkler */
  --radius-mykt: 3px;     /* bare det man tar på: felt og knapper */
  --sperre: .18em;
  --skygge: 0 18px 50px -18px rgba(23, 21, 15, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--papir);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.ramme { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }

/* ---------- typografi ---------- */

h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; }

/* Overskriftene er sans, som logoen. Serifen står bare på selve
   beløpet, det folk skal huske. Hero-overskriften var serif og
   kursiv til 15.9.2026; eieren ville ha vanlig skrift. */
h1 {
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  letter-spacing: -.025em;
  color: #fff;
}
h2 { font-weight: 800; letter-spacing: -.025em; font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-weight: 700; letter-spacing: -.015em; font-size: 1.2rem; }
h1 em { font-style: normal; color: var(--oransje-lys); }

p { margin: 0 0 1em; }

.overlinje {
  display: block;   /* brukes både som <p> og som <span> i kortene */
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: var(--sperre);
  text-transform: uppercase;
  color: var(--tekst-dus);
  margin: 0 0 1rem;
}
.tall { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.venter { color: var(--tekst-dus); }

/* ---------- toppstripe ----------
   Ligger oppa heroen, gjennomsiktig til man scroller. */

.arkhode {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
}
.arkhode__inn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
}
.merke { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
/* Logoen er merket alene på gjennomsiktig bunn, med lyse bokstaver
   og oransje tak. Den står derfor bare mot mørk bakgrunn: toppstripa
   over heroen, og bunnen. Forholdet er 901:770.
   Ingen border-radius - det er ikke lenger en firkant. */
.merke__logo { width: 56px; height: 48px; flex: none; }
.merke__navn {
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: 1.1rem;
  color: #fff;
  line-height: 1.1;
}
.merke__navn span {
  display: block;
  margin-top: .3rem;
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: var(--sperre);
  text-transform: uppercase;
  color: var(--lys-tekst-dus);
}

.arkhode__tlf {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  transition: background .15s ease, border-color .15s ease;
}
.arkhode__tlf:hover { background: var(--oransje); border-color: var(--oransje); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: clamp(660px, 96vh, 920px);
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background: var(--kull);
}

.hero__bilde {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Motivet har verktøyet til høyre og tomt felt til venstre. På brede
     skjermer viser vi hele, på smale holder vi oss i det mørke feltet
     så teksten har noe å stå på. */
  object-position: 60% center;
}

/* Lyset kommer fra en kilde nede til venstre, som en arbeidslampe
   satt på gulvet. Ikke en glod som svever i lufta. */
.hero__bunn {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42% 34% at 6% 104%, rgba(242, 123, 8, .26) 0%, rgba(242, 123, 8, .06) 45%, transparent 72%),
    linear-gradient(178deg, #1c1912 0%, #17150f 48%, #0e0c08 100%);
}
/* Stenderverk. 60px = 60 cm senteravstand, tykkere strek hver
   fjerde stender slik det tegnes. Bare loddrett - det er det du
   ser i en åpen vegg. */
.hero__bunn::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .11) 1px, transparent 1px);
  background-size: 60px 100%, 240px 100%;
  mask-image: linear-gradient(to bottom, #000 0 58%, transparent 96%);
}

.hero__slor {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to right, rgba(14, 12, 8, .82) 0%, rgba(14, 12, 8, .45) 42%, rgba(14, 12, 8, .1) 72%, transparent 100%),
    linear-gradient(to top, rgba(14, 12, 8, .75) 0%, rgba(14, 12, 8, 0) 40%);
}

/* NB: ikke sett width her. Elementet har ogsa klassen .ramme, og
   en width-regel senere i fila overstyrer den og klasker innholdet
   mot venstre kant. */
.hero__innhold { position: relative; z-index: 3; padding-block: 9rem 8rem; }
.hero .overlinje { color: var(--oransje-lys); }
.hero h1 { max-width: 15ch; }

.hero__ingress {
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  color: rgba(255, 255, 255, .88);
  max-width: 46ch;
  margin-block: 1.3rem 0;
}

/* ---------- sokekortet, som flyter oppa heroen ---------- */

.sokekort {
  position: relative;
  z-index: 5;
  margin-top: -5.5rem;
  margin-bottom: 4rem;
  background: var(--papir);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  padding: clamp(1.4rem, 3.5vw, 2.2rem);
  max-width: 780px;
}
.sokekort h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-bottom: .8rem; }

.sok__rad { display: flex; gap: .6rem; }
.sok__felt {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 1.02rem;
  padding: .85rem 1rem;
}
.sok__felt::placeholder { color: var(--tekst-dus); }
.sok__felt:focus { outline: 2px solid var(--oransje); outline-offset: 1px; border-color: transparent; }
.sok__felt::-webkit-search-cancel-button { -webkit-appearance: none; }

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.4rem;
  border: 1px solid var(--kull);
  border-radius: var(--radius);
  background: var(--kull);
  color: var(--papir);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.knapp:hover { background: var(--oransje); border-color: var(--oransje); color: #fff; }
.knapp--apen { background: transparent; color: var(--tekst); border-color: var(--linje); }
.knapp--apen:hover { background: var(--kull); color: var(--papir); border-color: var(--kull); }
.knapp--lys { background: var(--oransje); border-color: var(--oransje); color: #fff; }
.knapp--lys:hover { background: #fff; border-color: #fff; color: var(--kull); }

.handlinger { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

.sok__forslag { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
/* Minst 44 piksler høye. De sto på .38rem padding og ble rundt 30
   piksler, og det er for lite for en tommel. Det traff nettopp de to
   nyeste tingene på sida: tilleggsjobbene under prisen og valgene i
   forespørselen. */
.forslag {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  border: 1px solid var(--linje);
  border-radius: 999px;
  background: #fff;
  color: var(--tekst-dus);
  font: inherit;
  font-size: .88rem;
  padding: .5rem 1.1rem;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.forslag:hover { border-color: var(--oransje); color: var(--oransje-tekst); background: #fff; }

/* Overkategorien som er åpen, og jobbene som folder seg ut under den.
   Pila viser at knappen åpner noe, og ikke går rett til en pris. */
/* Kategoriene sto i samme duse grå som alt annet av småknapper, og
   forsvant mot papirbakgrunnen. Full tekstfarge, men samme tykkelse og
   størrelse som før: det er fargen som gjør dem lesbare. */
.kategori { color: var(--tekst); }
.kategori::after {
  content: "";
  width: .4em; height: .4em;
  margin-left: .55em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);
  transition: transform .15s ease;
}
.kategori[aria-expanded="true"] {
  border-color: var(--oransje);
  background: var(--oransje);
  color: #fff;
  font-weight: 600;
}
.kategori[aria-expanded="true"]::after { transform: translateY(.1em) rotate(-135deg); }
.kategori__jobber {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin: .1rem 0 .5rem;
  padding: .2rem 0 .2rem .9rem;
  border-left: 3px solid var(--oransje);
}

.sok__hjelp { margin: 1rem 0 0; font-size: .86rem; color: var(--tekst-dus); }

/* ---------- «skal noe mer gjøres samtidig?» ----------
   Står under prisen, med en strek over, fordi det er et nytt spørsmål
   og ikke en del av tallet. */
.sammen {
  margin-top: 1.8rem;
  border-top: 1px solid var(--linje);
  padding-top: 1.2rem;
}
.sammen__tekst { font-weight: 600; margin: 0 0 .7rem; }
.sammen__valg { display: flex; flex-wrap: wrap; gap: .45rem; }
.sammen__under { margin: .8rem 0 0; font-size: .86rem; color: var(--tekst-dus); }

/* ---------- seksjoner ---------- */

.del { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.del__hode { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.del__hode p { color: var(--tekst-dus); margin-bottom: 0; }

.del--mork {
  background: var(--kull);
  color: var(--lys-tekst);
}
.del--mork h2 { color: #fff; }
.del--mork .overlinje { color: var(--oransje-lys); }
.del--mork .del__hode p { color: var(--lys-tekst-dus); }

.del--papir { background: var(--papir-dyp); }

/* ---------- overslaget ---------- */

.svar { max-width: 900px; }
.svar__hva { color: var(--tekst-dus); max-width: 60ch; }

.svar__rad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
  background: var(--papir);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  padding: clamp(1.4rem, 3vw, 2rem);
  margin-top: 1.6rem;
}
.del--papir .svar__rad { background: #fff; }

.svar__sporsmal { display: block; font-weight: 600; margin-bottom: .7rem; }

.mengde { display: flex; border: 1px solid var(--linje); border-radius: var(--radius); overflow: hidden; max-width: 15rem; background: #fff; }
.mengde__felt {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 600;
  padding: .6rem .8rem;
  -moz-appearance: textfield;
}
.mengde__felt:focus { outline: 2px solid var(--oransje); outline-offset: -2px; }
.mengde__enhet {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 .9rem;
  border-left: 1px solid var(--linje);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tekst-dus);
}

.mengde__skyv {
  -webkit-appearance: none; appearance: none;
  width: 100%; max-width: 15rem;
  margin-top: 1.1rem;
  background: none; height: 1.4rem; cursor: pointer;
}
.mengde__skyv::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: var(--linje); }
.mengde__skyv::-moz-range-track { height: 3px; border-radius: 3px; background: var(--linje); }
.mengde__skyv::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px; margin-top: -9px;
  border-radius: 50%; background: var(--oransje);
  border: 3px solid var(--papir); box-shadow: 0 1px 5px rgba(0,0,0,.25);
}
.mengde__skyv::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%; background: var(--oransje);
  border: 3px solid var(--papir); box-shadow: 0 1px 5px rgba(0,0,0,.25);
}
.mengde__skyv:focus-visible { outline: 2px solid var(--oransje); outline-offset: 4px; }

.svar__pris { padding-bottom: 1.1rem; border-bottom: 1px solid var(--linje); }
.svar__prisetikett { display: block; margin-bottom: .25rem; }
/* Beløpet og forbeholdet staar paa samme linje med vilje. Sto
   "kun arbeid" som etikett OVER tallet, ble det lest som en
   overskrift og ikke som en del av summen. Her kan det ikke leses
   fra hverandre. */
.svar__belop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .7rem;
  margin: 0;
}
/* .svar__belop strong, ikke .svar__pris strong: den gamle regelen tok
   ALT som var uthevet i prisblokka, og da arvet den uthevede linja i
   overslagsvarselet serifen og 3,6 rem. Den ble stoerre enn prisen. */
.svar__belop strong {
  font-family: var(--serif);   /* beløpet skal leses som beløp */
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
}
.svar__merkelapp {
  padding: .22em .6em;
  border: 1px solid var(--oransje-tekst);
  border-radius: var(--radius-mykt, 3px);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oransje-tekst);
  white-space: nowrap;
}
.svar__spenn { display: block; margin-top: .6rem; font-size: .93rem; color: var(--tekst-dus); }

.svar__tid { margin: 1.1rem 0 0; }
.svar__tid > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: .3rem 1.2rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--linje);
}
.svar__tid dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tekst-dus);
  padding-top: .25rem;
}
.svar__tid dd { margin: 0; font-size: .93rem; }

/* Den aapne posten. Dette er den viktigste linja i hele svarkortet:
   skjermbildet viser "hvor mange vinduer" til venstre og en sum til
   hoyre, og da leses summen som hele regnestykket. En linje MED etikett
   og UTEN tall gjor det synlig at overslaget ikke er komplett - det
   klarer ikke en setning i smaatt aa gjore. */
.svar__apen {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: .8rem 0 0;
  padding-top: .7rem;
  border-top: 1px dashed var(--linje);
  font-size: .93rem;
}
.svar__apen-post { font-weight: 600; }
.svar__apen-verdi {
  color: var(--oransje-tekst);
  font-style: italic;
  text-align: right;
}

/* Setningen som skiller et overslag fra et tilbud. Den laa foer inne
   i en lukket <details> og ble aldri lest, deretter som gra smaaskrift
   under summen. Ingen av delene var tydelig nok.

   Naa er den en oransje merknad med egen ramme, rett under tallet.
   Oransje brukes sparsomt ellers paa sida nettopp for at det skal bety
   noe naar den dukker opp, og dette er stedet det betyr mest: en kunde
   som tror at tallet er hans pris, blir skuffet naar tilbudet kommer,
   og da har vi mistet ham foer vi har snakket med ham. */
.svar__ikke-tilbud {
  margin: .9rem 0 0;
  padding: .85rem 1rem;
  border-left: 3px solid var(--oransje);
  background: rgba(242, 123, 8, .08);
  font-size: .95rem;
  line-height: 1.5;
  color: inherit;
  max-width: 34em;
}
.svar__ikke-tilbud strong {
  display: block;
  margin-bottom: .2rem;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0;
  line-height: inherit;
  color: var(--oransje-tekst);
}

/* Fylt, ikke bare ramme som «kun arbeid». Denne ene skal fanges i
   sidesynet i samme oeyeblikk som tallet leses. */
.svar__merkelapp--varsel {
  background: var(--oransje);
  border-color: var(--oransje);
  color: #fff;
}

/* Kildene. Smaa, men synlige og klikkbare. Gjemte vi dem bak en
   <details>, matte kunden fortsatt ta oss paa ordet, og da er det
   ingen vits i aa bruke andres tall i det hele tatt. */
.svar__kilder {
  margin: 1.1rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--linje);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--tekst-dus);
  max-width: 34em;
}
.svar__kilder a { color: inherit; }

/* Hva tallet dekker. Dette maa staa i selve prisblokka, ikke som en
   fotnote under: leseren stopper ved det store tallet, og et forbehold
   lenger nede blir ikke lest. Vindusbytte er verst - der er tallet bare
   monteringa, og vinduene kan koste mer enn arbeidet. */
.svar__dekker {
  margin: .55rem 0 0;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--tekst-dus);
  max-width: 34em;
}
.svar__dekker-merke {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oransje-tekst);
  margin-right: .4em;
}

/* Andre fag står rett under det tallet dekker, med litt luft, fordi
   det svarer på det neste spørsmålet kunden får: «må jeg skaffe
   rørlegger selv?». Det er en opplysning, ikke noe han skal velge. */
.svar__fag { margin-top: .8rem; }

.svar__tillegg {
  margin: 1.2rem 0 0;
  padding: .7rem 1rem;
  border-left: 3px solid var(--tekst-dus);
  background: var(--papir-dyp);
  font-size: .91rem;
  color: var(--tekst-dus);
}
.del--papir .svar__tillegg { background: var(--papir); }

.svar__drivere { margin-top: 1.3rem; font-size: .94rem; }
.svar__drivere summary {
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tekst-dus);
}
.svar__drivere summary:hover { color: var(--oransje-tekst); }
.svar__drivere ul { margin: .9rem 0 0; padding-left: 1.1rem; }
.svar__drivere li { margin-bottom: .4rem; }
.svar__forbehold { margin: 1rem 0 0; font-size: .9rem; color: var(--tekst-dus); }

/* ---------- overleveringen: hvem gjør jobben ---------- */

.overlevering {
  margin-top: 2.2rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--kull);
  color: var(--lys-tekst);
  border-radius: var(--radius);
}
.overlevering .overlinje { color: var(--oransje-lys); }
.overlevering__tekst { margin: 1.2rem 0 0; color: var(--lys-tekst-dus); font-size: .95rem; }
.overlevering .knapp--apen { color: #fff; border-color: rgba(255,255,255,.35); }
.overlevering .knapp--apen:hover { background: #fff; color: var(--kull); border-color: #fff; }

/* faktatabellen: det som kan slas opp */
.fakta { border: 1px solid var(--linje); border-radius: var(--radius); overflow: hidden; margin: 0; background: #fff; }
.fakta__rad { display: grid; grid-template-columns: 9rem 1fr; border-bottom: 1px solid var(--linje); }
.fakta__rad:last-child { border-bottom: 0; }
.fakta__n {
  padding: .7rem 1rem;
  border-right: 1px solid var(--linje);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tekst-dus);
  display: flex; align-items: center;
}
.fakta__v { padding: .7rem 1rem; margin: 0; font-size: .95rem; display: flex; align-items: center; }
.fakta__v a { text-decoration: none; border-bottom: 1px solid var(--linje); }

/* Lenken til Bronnoysund. Sjelden på handverkersider, og det er
   nettopp derfor den virker: et firma som ber deg sjekke det,
   regner med a besta sjekken. */
.sjekk { margin: 1.6rem 0 0; font-size: .95rem; }
.sjekk a {
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid var(--oransje);
  padding-bottom: 1px;
}
.sjekk a:hover { color: var(--oransje-tekst); }

/* ---------- avtalepunktene ---------- */

.avtale { list-style: none; margin: 0; padding: 0; counter-reset: a; display: grid; gap: 1rem; }
.avtale li {
  counter-increment: a;
  position: relative;
  padding: 1.2rem 1.4rem 1.2rem 4rem;
  background: var(--papir);
  border-radius: var(--radius);
  border: 1px solid var(--linje);
}
.del--mork .avtale li { background: var(--kull-lys); border-color: var(--lys-linje); }
.avtale li::before {
  content: counter(a, decimal-leading-zero);
  position: absolute;
  left: 1.4rem; top: 1.25rem;
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--lys-tekst-dus);
}
.avtale strong { display: block; margin-bottom: .2rem; }
.del--mork .avtale p, .del--mork .avtale li { color: var(--lys-tekst-dus); }
.del--mork .avtale strong { color: #fff; }

/* ---------- bunn ---------- */

.bunn { background: var(--kull); color: var(--lys-tekst-dus); padding: 3.5rem 0 6.5rem; font-size: .93rem; }
.bunn__rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; }
.bunn__logo { width: 96px; height: 82px; }
.bunn dl { margin: 0; }
.bunn dt {
  font-size: .68rem; font-weight: 700;
  letter-spacing: var(--sperre); text-transform: uppercase;
  color: var(--lys-tekst-dus);
  margin-bottom: .3rem;
}
.bunn dd { margin: 0 0 .9rem; color: var(--lys-tekst); }
.bunn a { text-decoration: none; border-bottom: 1px solid var(--lys-linje); }

/* ---------- mobil ---------- */

@media (max-width: 820px) {
  .hero { min-height: auto; }
  .hero__bilde { object-position: 22% center; }
  .hero__innhold { padding-block: 7rem 5.5rem; }
  .arkhode__tlf { display: none; }

  .sokekort { margin-top: -3rem; margin-bottom: 3rem; }
  .sok__rad { flex-direction: column; }
  .sok__felt { width: 100%; }

  .svar__rad { grid-template-columns: 1fr; }
  .mengde, .mengde__skyv { max-width: none; }
  .svar__tid > div { grid-template-columns: 6.5rem minmax(0, 1fr); }

  .fakta__rad { grid-template-columns: 7rem 1fr; }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- byggesoknad ----------
   Står inne i overslaget, mellom prisen og hvem som gjør jobben.
   Det tredje spørsmålet folk står fast på, og det ingen andre i
   dalen svarer på for du har ringt. */

.soknad {
  margin-top: 1.4rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  background: var(--papir);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
}
.del--papir .soknad { background: #fff; }

.soknad__hode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  margin-bottom: .9rem;
}
.soknad__hode .overlinje { margin: 0; }

.sok-status {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .35rem .8rem;
  border-radius: 999px;
  white-space: nowrap;
}

.soknad__kort { font-weight: 600; margin: 0 0 .7rem; }
.soknad__vilkar { margin: 0; padding-left: 1.1rem; font-size: .93rem; }
.soknad__vilkar li { margin-bottom: .35rem; }
.soknad__forbehold {
  margin: 1rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--linje);
  font-size: .87rem;
  color: var(--tekst-dus);
}

/* linja i sokekortet som sier hva vi faktisk tar */
.sokekort__hva { color: var(--tekst-dus); font-size: .95rem; margin: -.3rem 0 1.1rem; }


/* Rette hjorner, bortsett fra det fingeren treffer. */
.sok__felt, .knapp, .mengde, .mengde__felt { border-radius: var(--radius-mykt); }

/* Sokekortet er en lapp som ligger OPPA heroen. Bare den skal fly.
   Overslaget står i seksjonen sin og svever ikke. */
.sokekort { border-top: 3px solid var(--oransje); }
.svar__rad { box-shadow: none; border: 1px solid var(--linje); }

/* Soknadsboksen er en merknad i margen på en tegning, ikke et kort. */
.soknad {
  background: transparent;
  border: 0;
  border-left: 3px solid var(--kull);
  padding: .2rem 0 .2rem 1.3rem;
}
.del--papir .soknad { background: transparent; }

/* Statusmerket: bare det som krever handling får farge. Tegnet
   foran gjør det lesbart uten farge ogsa. */
.sok-status {
  border: 1px solid var(--linje);
  background: transparent;
  color: var(--tekst-dus);
  font-weight: 600;
}
.sok-status--nei::before     { content: "\2013\00a0"; }
.sok-status--kanskje::before { content: "?\00a0"; }

/* «Maa soekes» er fylt oransje, ikke bare en oransje ramme. Det er det
   ene svaret der kunden faktisk maa gjoere noe selv, og det skal ses
   fra andre enden av rommet. De to andre svarene er fortsatt noytrale:
   blir alt farget, betyr fargen ingenting. */
.sok-status--ja {
  border-color: var(--oransje);
  background: var(--oransje);
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  padding: .45rem 1rem;
}
.sok-status--ja::before { content: "!\00a0"; }

/* Sporsmaalet over boksen. Sto i dus graa smaaskrift og forsvant helt,
   enda det er det andre spoersmaalet alle stiller etter prisen. */
.soknad__tittel {
  font-size: .9rem;
  color: var(--oransje-tekst);
}

/* Kanten i margen foelger svaret: oransje naar det maa soekes. */
.soknad--ja { border-left-color: var(--oransje); }

/* En tabell er en tabell, ikke sju etikettstriper. */
.fakta__n, .svar__tid dt, .mengde__enhet {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: .88rem;
}

.overlevering__hode { margin: 0 0 .3rem; font-size: 1.05rem; color: #fff; }

/* ---------- byggesøknad-veiviseren ---------- */

.veiviser {
  border: 1px solid var(--linje);
  border-top: 3px solid var(--kull);
  background: var(--papir);
  padding: clamp(1.3rem, 3vw, 2rem);
  max-width: 720px;
}
.veiviser__sporsmal { font-size: 1.15rem; font-weight: 600; margin: 0 0 1.1rem; }
.veiviser__valg { display: flex; flex-wrap: wrap; gap: .5rem; }
.veiviser .forslag { text-align: left; }
.veiviser__nullstill {
  margin-top: 1.2rem;
  border: 0; background: none; padding: 0;
  color: var(--tekst-dus); font: inherit; font-size: .88rem;
  text-decoration: underline; cursor: pointer;
}
.veiviser__nullstill:hover { color: var(--oransje-tekst); }
.veiviser .sok-status { display: inline-block; margin-bottom: 1rem; }
.veiviser__svar { font-size: 1.05rem; margin: 0; max-width: 58ch; }
.veiviser__forbehold {
  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--linje);
  font-size: .88rem;
  color: var(--tekst-dus);
  max-width: 62ch;
}
.veiviser .handlinger { margin-top: 1.4rem; }

/* ---------- kontaktinfo nederst i overslaget ----------
   Ingen overskrift og ingen prosa. Vi gjør jobben uansett; det
   eneste som mangler er hvordan man når oss. */

.overlevering {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--lys-linje);
  padding: 0;
  margin-top: 2rem;
  border: 1px solid var(--lys-linje);
}
.overlevering__kontakt {
  flex: 1 1 12rem;
  background: var(--kull);
  padding: 1rem 1.2rem;
  text-decoration: none;
  transition: background .15s ease;
}
.overlevering__kontakt:hover { background: var(--kull-lys); }
.overlevering__kontakt span {
  display: block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: var(--sperre); text-transform: uppercase;
  color: var(--oransje-lys);
  margin-bottom: .25rem;
}
.overlevering__kontakt strong { font-size: 1.05rem; font-weight: 600; color: #fff; }

/* ---------- kontaktskjemaet ---------- */

.skjema {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  max-width: 720px;
}
/* display: grid slår ut hidden-attributtet, så skjemaet må få si fra
   selv at det er lukket. */
.skjema[hidden] { display: none; }
.skjema__felt--bred, .skjema__bunn, .skjema__status { grid-column: 1 / -1; }
.skjema__felt { display: block; }
.skjema__navn {
  display: block;
  font-size: .88rem; font-weight: 600;
  color: var(--lys-tekst);
  margin-bottom: .4rem;
}
.skjema__navn em { font-style: normal; font-weight: 400; color: var(--lys-tekst-dus); }

.skjema input, .skjema textarea {
  width: 100%;
  border: 1px solid var(--lys-linje);
  border-radius: var(--radius-mykt);
  background: #1c1e21;
  color: var(--lys-tekst);
  font: inherit;
  padding: .8rem .9rem;
  resize: vertical;
}
.skjema input::placeholder, .skjema textarea::placeholder { color: #6f6a63; }
.skjema input:focus, .skjema textarea:focus {
  outline: 2px solid var(--oransje);
  outline-offset: 1px;
  border-color: transparent;
}

/* Honningkrukka skal være usynlig for folk, men ikke display:none,
   for da fyller noen boter den ut likevel. */
.skjema__krukke {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.skjema__bunn { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.skjema__personvern {
  flex: 1 1 20rem;
  margin: 0;
  font-size: .84rem;
  color: var(--lys-tekst-dus);
}
.skjema__personvern a { border-bottom: 1px solid var(--oransje); text-decoration: none; }

.skjema__status { margin: 0; font-size: .92rem; }
.skjema__status.er-feil { color: #f2a08a; }
/* Det som staar igjen naar meldinga er sendt. Seksjonen er tom for
   alt annet, saa kvitteringa maa baere hoyden selv. */
.ferdig {
  max-width: 46em;
  margin: 0 auto;
  padding: 2.5rem 0;
  text-align: center;
}
.ferdig .skjema__kvittering {
  text-align: left;
  margin-bottom: 1.6rem;
}

.skjema__kvittering {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--oransje);
  background: var(--kull-lys);
  color: var(--lys-tekst);
}
.skjema__kvittering strong { display: block; color: #fff; margin-bottom: .3rem; }
.skjema__kvittering a { border-bottom: 1px solid var(--oransje); text-decoration: none; }

/* Halv kvittering: lagret, men ikke varslet. Stiplet kant i stedet
   for hel - det skal ikke se ut som en feil, for meldinga ER mottatt,
   men heller ikke som full seier. Fargen er den samme som basis, saa
   det maatte vaere kantstilen som baerer forskjellen. */
.skjema__kvittering.er-halv { border-left-style: dashed; }

.skjema__ellers {
  margin: 1.8rem 0 0;
  font-size: .93rem;
  color: var(--lys-tekst-dus);
}
.skjema__ellers a { border-bottom: 1px solid var(--oransje); text-decoration: none; }

/* Veivalget som står i stedet for skjemaet til kunden har valgt vei. */
.kontaktvalg { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
/* Den andre knappen står på mørk bunn, der den vanlige åpne knappen er
   svart på svart. */
.kontaktvalg .knapp--apen { color: #fff; border-color: rgba(255, 255, 255, .35); }
.kontaktvalg .knapp--apen:hover { background: #fff; color: var(--kull); border-color: #fff; }
.kontaktvalg[hidden] { display: none; }
.kontaktvalg__under {
  flex-basis: 100%;
  margin: .2rem 0 0;
  font-size: .9rem;
  color: var(--lys-tekst-dus);
  max-width: 42em;
}

@media (max-width: 820px) {
  .skjema { grid-template-columns: 1fr; }
}

/* ---------- undersider ---------- */

.arkhode--fast { position: static; background: var(--kull); }
.sidetekst { max-width: 62ch; }
.sidetekst h2 { margin-bottom: 1.2rem; }
.sidetekst h3 { margin: 2rem 0 .5rem; }
.sidetekst__tilbake { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--linje); }
.sidetekst a { text-decoration: none; border-bottom: 1px solid var(--oransje); }

/* ---------- fra overslag til melding ---------- */

.knapp--stor { padding: 1rem 1.6rem; font-size: 1.05rem; }
.overlevering { display: block; background: none; border: 0; padding: 0; }
.overlevering__under {
  margin: .8rem 0 0;
  font-size: .9rem;
  color: var(--lys-tekst-dus);
}
.overlevering__under a { border-bottom: 1px solid var(--oransje); text-decoration: none; }

/* Overleveringa står i overslaget, som ligger på lys bunn. */
.del--papir .overlevering__under { color: var(--tekst-dus); }

.foresporsel {
  margin-bottom: 1.8rem;
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--oransje);
  background: var(--kull-lys);
  max-width: 720px;
}
.foresporsel__hode {
  margin: 0 0 1.2rem;
  color: var(--lys-tekst-dus);
  font-size: .95rem;
}
.foresporsel__hode strong { color: #fff; font-weight: 600; }
.foresporsel__bort {
  border: 0; background: none; padding: 0;
  margin-left: .5rem;
  color: var(--lys-tekst-dus);
  font: inherit; font-size: .85rem;
  text-decoration: underline; cursor: pointer;
}
.foresporsel__bort:hover { color: #fff; }

.foresporsel__sp + .foresporsel__sp { margin-top: 1.1rem; }
.foresporsel__tekst {
  display: block;
  font-size: .92rem;
  color: var(--lys-tekst);
  margin-bottom: .5rem;
}
.foresporsel__valg { display: flex; flex-wrap: wrap; gap: .4rem; }
.foresporsel .forslag {
  background: transparent;
  border-color: var(--lys-linje);
  color: var(--lys-tekst-dus);
}
.foresporsel .forslag:hover { border-color: var(--oransje); color: #fff; background: transparent; }
/* Gjelder begge stedene man huker av: sporsmalene i forespørselen, og
   tilleggsjobbene under prisen. Valgt er oransje, ikke bare en tynnere
   ramme, for det skal synes på en telefon i sollys. */
.foresporsel .forslag.er-valgt,
.sammen .forslag.er-valgt {
  background: var(--oransje);
  border-color: var(--oransje);
  color: #fff;
  font-weight: 600;
}

/* Står i den mørke kontaktdelen, så teksten må være den lyse. */
.foresporsel__tillegg {
  margin: .6rem 0 0;
  font-size: .9rem;
  color: var(--lys-tekst-dus);
}

/* Svaralternativer med tegning: bildet over, teksten under. */
.forslag--figur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .7rem .8rem .6rem;
  border-radius: var(--radius-mykt);
  text-align: center;
  line-height: 1.3;
  flex: 1 1 10rem;
  max-width: 12rem;
  font-size: .85rem;
}
.figur { width: 56px; height: 35px; color: currentColor; }

/* ---------- meny ----------
   De tre strekene blir et kryss, og de tre valgene folder seg ut
   under knappen ett og ett. Samme kurve overalt, så det føles som én
   bevegelse og ikke tre. */

.menyknapp {
  --kurve: cubic-bezier(.2, .8, .2, 1);
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: var(--radius-mykt);
  /* Knappen kan havne oppå den lyseste delen av hero-bildet, så den
     trenger egen rygg for å ikke forsvinne i messingen. */
  background: rgba(12, 10, 7, .35);
  backdrop-filter: blur(5px);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.menyknapp:hover { background: var(--oransje); border-color: var(--oransje); }
.menyknapp[aria-expanded="true"] { background: var(--oransje); border-color: var(--oransje); }

.menyknapp__strek {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .35s var(--kurve), opacity .2s ease;
}
/* 7px er avstanden fra midten av en strek til midten av den neste. */
.menyknapp[aria-expanded="true"] .menyknapp__strek:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menyknapp[aria-expanded="true"] .menyknapp__strek:nth-child(2) { transform: scaleX(0); opacity: 0; }
.menyknapp[aria-expanded="true"] .menyknapp__strek:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.meny {
  --kurve: cubic-bezier(.2, .8, .2, 1);
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 20;
  width: min(19rem, calc(100vw - 2.5rem));
  background: var(--kull);
  border: 1px solid var(--lys-linje);
  border-top: 3px solid var(--oransje);
  box-shadow: var(--skygge);
  display: flex;
  flex-direction: column;
  /* Lukket: brettet opp mot knappen i hjørnet. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(.96);
  transform-origin: top right;
  transition: opacity .2s ease, transform .35s var(--kurve), visibility 0s linear .35s;
}
.meny.er-apen {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .2s ease, transform .35s var(--kurve), visibility 0s;
}

.meny__lenke {
  display: flex;
  flex-direction: column;
  padding: .95rem 1.2rem;
  text-decoration: none;
  color: var(--lys-tekst);
  border-bottom: 1px solid var(--lys-linje);
  /* Hver lenke starter som en strek: smal og gjennomsiktig, trukket
     inn mot høyre, og folder seg ut til full bredde. */
  opacity: 0;
  transform: translateX(14px);
  transition: background .15s ease, opacity .25s ease, transform .4s var(--kurve);
}
.meny__lenke:last-child { border-bottom: 0; }
.meny.er-apen .meny__lenke { opacity: 1; transform: none; }
.meny.er-apen .meny__lenke:nth-child(1) { transition-delay: 0s, .06s, .06s; }
.meny.er-apen .meny__lenke:nth-child(2) { transition-delay: 0s, .12s, .12s; }
.meny.er-apen .meny__lenke:nth-child(3) { transition-delay: 0s, .18s, .18s; }
.meny__innhold { display: flex; flex-direction: column; gap: .15rem; }

.meny__tittel { font-weight: 700; font-size: 1.02rem; }
.meny__under { font-size: .82rem; color: var(--lys-tekst-dus); }
a.meny__lenke:hover, a.meny__lenke:focus-visible { background: var(--kull-lys); }

/* Sperret valg: synlig, men dødt. Ingen peker, ingen tabstopp, ingen
   hover — ellers tror folk at det bare var et bomtrykk. */
.meny__lenke--sperret { cursor: default; color: var(--lys-tekst-dus); }
.meny__lenke--sperret .meny__tittel { color: var(--lys-tekst-dus); }
a.meny__lenke:hover .meny__tittel { color: var(--oransje-lys); }
.meny__lenke[aria-current="page"] { box-shadow: inset 3px 0 0 var(--oransje); }

/* Telefon og menyknapp står sammen til høyre på undersidene. */
.arkhode__hoyre { display: flex; align-items: center; gap: .6rem; }

@media (prefers-reduced-motion: reduce) {
  .menyknapp__strek, .meny, .meny__lenke { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* Menyen henger under knappen, så raden må være målestokken. */
.arkhode__inn { position: relative; }

/* ---------- om oss ---------- */

.om__ingress {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -.015em;
  max-width: 34ch;
  margin-bottom: 1.4rem;
}

/* Synlig hull. Sida er noindex til den er ferdig, og disse rammene
   skal være umulige å overse for den som skal fylle dem. */
.mangler {
  margin-top: 1.6rem;
  padding: .9rem 1.1rem;
  border: 1px dashed var(--linje);
  background: repeating-linear-gradient(-45deg,
    transparent 0 8px, rgba(38,34,29,.05) 8px 16px);
  font-size: .92rem;
  color: var(--tekst-dus);
}
.mangler strong { color: var(--oransje-tekst); }
.del--mork .sidetekst .avtale li { background: var(--kull-lys); }
.sidetekst h3 { margin-bottom: .8rem; }
.sidetekst .fakta { margin-top: 1.4rem; }

/* to personer side om side på Om oss */
.folk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.6rem 2.4rem;
  margin: 1.8rem 0;
  padding: 1.4rem 0;
  border-top: 1px solid var(--linje);
  border-bottom: 1px solid var(--linje);
}
.person__navn { margin: 0 0 .2rem; font-size: 1.15rem; }
.person__fag {
  margin: 0 0 .5rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: var(--sperre); text-transform: uppercase;
  color: var(--oransje-tekst);
}
/* Beskrivelsen under faget. Sto som p:last-child til kontaktlinja kom
   under den 17.9.2026, og mistet da bade storrelsen og fargen sin. */
.person p:last-child, .person__fag + p { margin: 0; font-size: .95rem; color: var(--tekst-dus); }
.person .venter { font-weight: 400; }

/* Navn, nummer og e-post under hver av oss. Tallet skal kunne trykkes
   på telefonen, derfor tel: og ikke bare tekst. */
.person__kontakt {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin: .7rem 0 0 !important;
  font-size: .95rem;
}
.person__kontakt a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--oransje); align-self: flex-start; }
.person__kontakt a:hover { color: var(--oransje-tekst); }
.om__omtaler { margin-top: 1.4rem; font-size: .92rem; color: var(--tekst-dus); }
.sidetekst h3 + p { margin-top: 0; }
.sidetekst .avtale { margin-top: 1.4rem; }

/* «Hvorfor velge oss»: en grunn per blokk, ikke en punktliste. */
.grunn { padding: 1.3rem 0; border-top: 1px solid var(--linje); }
.grunn:first-of-type { border-top: 0; padding-top: .4rem; }
.grunn h4 {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.015em;
}
.grunn p { margin: 0; color: var(--tekst-dus); }
.grunn a { text-decoration: none; border-bottom: 1px solid var(--oransje); }

.om__jus {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--lys-linje);
  font-size: .88rem;
  color: var(--lys-tekst-dus);
}

/* Regelstoffet star alene i sin egen morke stripe. Da trenger den
   verken seksjonens fulle luft eller streken over seg: streken skilte
   den fra noe som ikke er der lenger, og lufta gjorde at fem linjer
   tekst fikk en boks paa hoyde med en halv skjerm. */
.del--jus { padding: clamp(2rem, 4vw, 2.8rem) 0; }
.del--jus .om__jus {
  margin: 0;
  padding: 0;
  border-top: 0;
  font-size: .92rem;
  line-height: 1.65;
}

/* «Dette gjør ikke vi» */
.annet__fag { font-size: 1.05rem; margin: 0 0 1.2rem; }
.annet__fag strong { color: var(--oransje-tekst); }
.annet__under { margin: 1rem 0 0; font-size: .9rem; color: var(--tekst-dus); }


/* ---------- prosjekter ---------- */

.prosjekter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0 1rem;
}
.prosjekt { background: var(--papir); border: 1px solid var(--linje); display: flex; flex-direction: column; }
.prosjekt__apne { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.prosjekt__bilde {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--papir-dyp);
  overflow: hidden;
}
.prosjekt__bilde img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.prosjekt__apne:hover img { transform: scale(1.03); }
.prosjekt__antall {
  position: absolute; right: .7rem; bottom: .7rem;
  padding: .25rem .6rem;
  background: rgba(23, 21, 15, .75);
  color: #fff; font-size: .78rem; font-weight: 600;
}
.prosjekt__tekst { padding: 1.1rem 1.2rem 1.3rem; }
.prosjekt__tekst h3 { margin: .35rem 0 .45rem; }
.prosjekt__tekst p { margin: 0; color: var(--tekst-dus); font-size: .95rem; }
.prosjekt .overlinje { color: var(--oransje-tekst); }

/* Plassholderne viser formen på sida før bildene finnes. */
.prosjekt--plassholder .prosjekt__bilde {
  display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, var(--papir-dyp) 0 12px, #e8e1d5 12px 24px);
}
.prosjekt--plassholder .prosjekt__bilde span {
  font-size: .8rem; font-weight: 700; letter-spacing: var(--sperre);
  text-transform: uppercase; color: var(--tekst-dus);
}
.prosjekt--plassholder .prosjekt__tekst { opacity: .6; }

.prosjektvindu {
  width: min(900px, 100% - 2rem);
  max-height: 90vh;
  padding: 2rem 1.5rem;
  border: 0;
  border-top: 3px solid var(--oransje);
  background: var(--papir);
  color: var(--tekst);
}
.prosjektvindu::backdrop { background: rgba(23, 21, 15, .8); }
.prosjektvindu img { width: 100%; height: auto; display: block; margin-top: 1rem; }
.prosjektvindu__lukk {
  position: sticky; top: 0; float: right;
  width: 44px; height: 44px;
  border: 0; background: var(--kull); color: #fff;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}