/* ============================================================
   Euphoria Bygg: forside.css
   The front page below the hero. Who we are first; the services as
   a list where the one you have scrolled to lights up with its own
   photograph; three jobs as cards that slide up over each other;
   what customers say; how it works beside one before and after; the
   map as a full-screen scene where a ring from Brøttum lights the
   towns; the contact with Jarek's card. About opens with Jarek's own
   sentence, large, coloured in word by word. Section grounds alternate:
   hero kalk-2, projects kalk, services mjøsa, about dis, reviews
   kalk-2, how we work kalk, areas svartbeis with a blue lake, contact
   dis (the --flate-* tokens).
   Motion is set by forside.js (transform and opacity only); without
   it every section stands finished.
   ============================================================ */

/* ---------- photographs uncovered by the scroll (forside.js) ---------- */

.om-bilde {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--kalk-2);
}

.pb-maske {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pb-indre {
  position: absolute;
  inset: -7% 0;
}

.pb-indre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- about: the people first ---------- */

.om {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  grid-template-areas:
    "utsagn utsagn"
    "tekst  bilde"
    "bunn   bilde";
  align-items: start;
  column-gap: clamp(36px, 6vw, 110px);
  row-gap: clamp(28px, 3vw, 44px);
  max-width: calc(var(--maks) + 2 * var(--side));
  margin-inline: auto;
  background: var(--flate-om);
  box-shadow: 0 0 0 100vmax var(--flate-om);
  clip-path: inset(0 -100vmax);
}

.om > * {
  max-width: none;
  margin: 0;
}

/* Jarek's sentence, large; the scroll colours it in word by word (forside.js) */
.om-utsagn {
  grid-area: utsagn;
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  justify-items: start;
  padding-bottom: clamp(36px, 5vw, 80px);
}

.utsagn {
  margin: 0;
}

.utsagn p {
  max-width: 24em;
  font-size: var(--tittel-utsagn);
  font-weight: var(--vekt-tittel);
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-wrap: balance;
  color: var(--tekst-mjosa);
}

html.js-anim .utsagn .ord {
  opacity: 0.16;
}

.utsagn-hvem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  color: var(--tekst-2);
}

.utsagn-hvem::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--furu-dyp);
}

.utsagn-hvem strong {
  font-weight: var(--vekt-sterk);
  color: var(--tekst);
}

.om-tekst {
  grid-area: tekst;
  display: grid;
  gap: 22px;
  justify-items: start;
}

.om-tekst h2 {
  font-size: clamp(36px, 4.3vw, 66px);
}

.om-ingress {
  max-width: 33em;
  font-size: var(--ingress);
  line-height: 1.5;
  color: var(--tekst-2);
}

.om-bilde {
  grid-area: bilde;
  align-self: center;
  aspect-ratio: 4 / 5;
  max-height: calc(100svh - var(--meny-h) - 48px);
}

.om-bunn {
  grid-area: bunn;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px 40px;
  padding-top: 24px;
  border-top: 1px solid var(--linje-mork);
}

.om-fakta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(28px, 4vw, 60px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.om-fakta strong {
  display: block;
  font-size: clamp(34px, 3.6vw, 58px);
  font-weight: var(--vekt-tittel);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.om-fakta span {
  font-size: var(--liten);
  color: var(--tekst-2);
}

/* ---------- services: four groups side by side, one large photograph each ---------- */
/* Sverre 27.10.2026 about the list with one photograph that changed as you scrolled: «for lite bilde og for mange
   alternativer på en side som bytter hele tiden». Four choices, all in one row on a computer as on Tid Bolig; the
   photographs are uncovered one after another as the row comes in, and nothing changes by itself after that. */

.tjenester {
  background: var(--flate-tjenester);
  color: var(--tekst-lys);
}

.tjenester .overlinje {
  color: var(--tekst-lys-2);
}

.tjenester .overlinje::before {
  background: var(--furu);
}

.tj-ingress {
  display: grid;
  gap: 18px;
  justify-items: start;
  max-width: 440px;
}

.tj-ingress p {
  font-size: var(--ingress);
  line-height: 1.5;
  color: var(--tekst-lys-2);
}

.tj-grupper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 48px) var(--gap);
}

.tj-gruppe {
  display: grid;
  align-content: start;
  gap: 20px;
}

.tj-bilde {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  background: var(--mjosa-2);
}

.tj-bilde img {
  transition: transform 1.2s var(--ease-ut);
}

/* a pointer on the group brings its photograph a little closer; the scroll does the rest */
.tj-gruppe:hover .tj-bilde img {
  transform: scale(1.04);
}

.tj-tekst {
  display: grid;
  gap: 10px;
}

.tj-tekst h3 {
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: var(--vekt-tittel);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.tj-nr {
  font-size: var(--liten);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--furu);
}

.tj-lenker {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linje-lys-svak);
}

.tj-lenker a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding-block: 10px;
  border-bottom: 1px solid var(--linje-lys-svak);
  color: var(--tekst-lys-2);
  font-size: var(--brod);
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.3s ease;
}

.tj-lenker a:hover,
.tj-lenker a:focus-visible {
  color: var(--tekst-lys);
}

.tj-lenker .pil {
  flex: none;
  width: 18px;
  height: 18px;
  transition: transform 0.35s var(--ease-ut);
}

.tj-lenker a:hover .pil {
  transform: translateX(4px);
}

/* ---------- projects: cards that slide up over each other ---------- */

.prosjekter {
  background: var(--flate-prosjekter);
}

/* a plain block: in a grid each card could only stick inside its own row */
.prosjekt-stabel {
  display: block;
}

.prosjekt-kort + .prosjekt-kort {
  margin-top: clamp(24px, 4svh, 40px);
}

.prosjekt-kort {
  --kort-h: min(calc(100svh - var(--meny-h) - 48px), 780px);
  position: sticky;
  top: calc(var(--meny-h) + 22px + var(--i) * 14px);
  display: grid;
  grid-template-columns: min(56%, calc(var(--kort-h) * var(--ar))) minmax(0, 1fr);
  height: var(--kort-h);
  min-height: 460px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--kort-flate, var(--kort-3));
  color: var(--tekst-lys);
  transform-origin: 50% 0;
}

.prosjekt-kort:nth-child(3n + 1) { --kort-flate: var(--kort-1); }
.prosjekt-kort:nth-child(3n + 2) { --kort-flate: var(--kort-2); }

/* a card the next one has slid over grows darker (forside.js sets --dim) */
.prosjekt-kort::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kort-flate, var(--kort-3));
  opacity: var(--dim, 0);
  pointer-events: none;
}

.pk-bilde {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.pk-indre {
  position: absolute;
  inset: 0;
}

.pk-indre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pk-tekst {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 16px;
  padding: clamp(28px, 4vw, 64px);
}

.pk-nr {
  font-size: var(--liten);
  font-weight: var(--vekt-sterk);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--furu);
}

.pk-tekst h3 {
  font-size: clamp(32px, 3.6vw, 60px);
  font-weight: var(--vekt-tittel);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.pk-tekst p:not(.pk-nr) {
  max-width: 32em;
  color: var(--tekst-lys-2);
}

.pk-tekst .merker li {
  border-color: var(--linje-lys);
  color: var(--tekst-lys-2);
}

.pk-tekst .lenke-pil {
  margin-top: 4px;
  color: var(--tekst-lys);
}

/* ---------- reviews ---------- */

/* the average, large: the number first, the stars and the count beside it */
.vurderinger-seksjon .snitt {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
}

.snitt-tall {
  font-size: clamp(64px, 7.6vw, 124px);
  font-weight: var(--vekt-tittel);
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--tekst);
}

.snitt-resten {
  display: grid;
  gap: 6px;
  font-size: var(--liten);
  color: var(--tekst-2);
}

.vurderinger-seksjon {
  background: var(--flate-vurderinger);
  overflow: hidden;
}

.vurderinger-seksjon h2 {
  max-width: 16em;
}

.vurd-hvem {
  margin-top: 12px;
  color: var(--tekst-2);
}

/* ---------- areas: the map ---------- */

.omrader {
  background: var(--flate-omrader);
  color: var(--tekst-lys);
}

.omrader > * {
  max-width: var(--maks);
  margin-inline: auto;
}

.omrader-scene {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.omrader-tekst {
  order: -1;
}

.omrader .overlinje {
  color: var(--tekst-lys-2);
}

.omrader .overlinje::before {
  background: var(--furu);
}

.omrader-tekst h2 {
  margin-bottom: 20px;
}

/* the link to the areas page under the places (27.10.2026) */
.omrader-lenke {
  margin-top: 18px;
}

.omrader-tekst > p:not(.overlinje) {
  max-width: 34em;
  color: var(--tekst-lys-2);
}

.omrader .kart {
  width: 100%;
  max-width: 600px;
  border-radius: 3px;
}

/* on a computer the map fills the screen and holds still under the scroll while the ring goes out */
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
  .omrader {
    padding: 0;
  }

  .omrader > * {
    max-width: none;
  }

  .js-anim .omrader {
    height: 210svh;
  }

  .omrader-scene {
    position: sticky;
    top: 0;
    display: block;
    height: 100svh;
    min-height: 600px;
    overflow: hidden;
  }

  /* the land under the text darkens, so the words read and the towns stay clear */
  .omrader-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, var(--natt-sterk) 0%, var(--natt) 34%, var(--natt-svak) 54%);
    pointer-events: none;
  }

  .omrader .kart {
    position: absolute;
    inset: 0;
    max-width: none;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .omrader .kart-lag {
    --flytt: translate(-66%, -52%);
    inset: auto;
    left: 66%;
    top: 52%;
    width: max(100%, calc(100svh * 1.85));
    aspect-ratio: 3840 / 2076;
    transform-origin: var(--hxb) var(--hyb);
  }

  .omrader .sted {
    left: var(--xb);
    top: var(--yb);
  }

  .omrader .kart-ring {
    left: var(--hxb);
    top: var(--hyb);
  }

  .omrader .kart-kilde {
    right: var(--side);
    bottom: 16px;
  }

  .omrader-tekst {
    position: absolute;
    z-index: 2;
    left: max(var(--side), calc((100% - var(--maks)) / 2));
    top: calc(50% + var(--meny-h) / 2);
    width: min(38%, 500px);
    transform: translateY(-50%);
  }
}

/* ---------- contact: the card and the form ---------- */

.kontakt {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(36px, 6vw, 110px);
  max-width: calc(var(--maks) + 2 * var(--side));
  margin-inline: auto;
  background: var(--flate-kontakt);
  box-shadow: 0 0 0 100vmax var(--flate-kontakt);
  clip-path: inset(0 -100vmax);
}

.kontakt > * {
  max-width: none;
  margin: 0;
}

.kontakt-tekst {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.kontakt-tekst .overlinje {
  margin-bottom: 0;
}

.kontakt-tekst > p:not(.overlinje) {
  max-width: 30em;
  margin-bottom: 10px;
  color: var(--tekst-2);
}

.kontakt-tekst .visittkort {
  width: 100%;
}

/* ---------- smaller screens ---------- */

@media (max-width: 1023px) {
  .om {
    grid-template-columns: 1fr;
    grid-template-areas:
      "utsagn"
      "tekst"
      "bilde"
      "bunn";
  }

  .om-bilde {
    width: 100%;
    max-width: 560px;
    max-height: none;
  }

  .tj-grupper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kontakt {
    grid-template-columns: 1fr;
  }
}

/* the cards stack from tablet width; on a phone they follow each other */
@media (max-width: 767px) {
  .prosjekt-kort {
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .pk-bilde {
    aspect-ratio: max(var(--ar), 0.9);
  }
}

@media (max-width: 767px) {
  .tj-grupper {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .tj-gruppe {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }

  .tj-tekst {
    gap: 6px;
  }

  .tj-lenker a {
    min-height: 44px;
    padding-block: 8px;
  }
}

@media (max-width: 599px) {
  .om-fakta {
    gap: 14px 28px;
  }
}