/* ============================================================
   Tre seksjoner fra «Trygghet og sikkerhet»

   Siden hadde tre seksjoner paa rad som saa helt like ut: et rutenett
   med kort og et gult hakemerke, tre ganger. Innholdet var forskjellig
   — hva vi lover, hvordan det foregaar, hva vi trenger fra deg — men
   formen sa at det var det samme. Da leser man den foerste og hopper
   over de to neste.

   Hver fikk derfor sin egen form, og formen foelger innholdet:

   BENTO        Seks loefter av ulik tyngde. Det viktigste — sikring i
                hoeyden — faar den store flisen og det stoerste bildet.
   TIDSLINJE    En rekkefoelge. Linjen fylles mens man ruller, slik at
                man ser hvor langt i prosessen man har kommet.
   SJEKKLISTE   Noe leseren selv skal gjoere. Punktene hakes av, fordi
                det er det man gjoer med en sjekkliste.

   Alle bildene er ekte, fra LummeCos egne jobber, og alle som staar paa
   et tak har hjelm eller sele. Paa en side om sikkerhet kan det ikke
   vaere annerledes.

   Hjoernene foelger knappen i headeren (--radius-sm), og ingenting
   har skygge: nettstedet er flatt, ogsaa skjemaet og kalkulatoren.
   Sirklene — portrettene og nummerboblene — er runde med vilje.

   Bevegelsen er pynt, ikke innhold. Uten skript, eller med redusert
   bevegelse slaatt paa, staar alt ferdig fremme fra start.
   ============================================================ */


/* ---------------------------------------------------------------
   BENTO
   --------------------------------------------------------------- */
.bento-sek__topp { max-width: 720px; margin: 0 auto 44px; }

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(230px, auto);
  grid-auto-flow: row dense;
  gap: 16px;
}

.bento__flis {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  border-radius: var(--radius-sm, 3px);
  padding: 28px;
  min-height: 230px;
}
.bento__flis--stor  { grid-column: span 2; grid-row: span 2; }
.bento__flis--bred  { grid-column: span 2; }
.bento__flis--liten { grid-column: span 1; }

.bento__innhold {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
}

/* Fargene. Lys er den samme varme graatonen som resten av nettstedet
   bruker paa alternerende seksjoner. */
.bento__flis--lys  { background: #f5f3ee; color: var(--ink, #1f1f2e); }
.bento__flis--gul  { background: var(--brand, #ffd61f); color: var(--ink, #1f1f2e); }
.bento__flis--mork { background: var(--ink, #1f1f2e); color: #fff; }
.bento__flis--foto { background: var(--ink, #1f1f2e); color: #fff; }

/* Et stort, svakt tall i hjoernet paa tekstflisene. Det gjoer flatene
   til noe mer enn en farge, uten aa ta oppmerksomhet fra teksten. */
.bento__flis--gul::before,
.bento__flis--mork::before,
.bento__flis--lys::before {
  content: attr(data-nr);
  position: absolute;
  top: -22px;
  right: 14px;
  font-size: 150px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  opacity: .07;
  pointer-events: none;
  z-index: -1;
}
.bento__flis--mork::before { color: var(--brand, #ffd61f); opacity: .12; }

/* Fotoflisene: bildet fyller hele flisen, og en toning nederst gjoer
   teksten lesbar uten aa legge et graatt lokk over hele bildet. */
.bento__bilde {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.bento__flis--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(20, 20, 30, 0) 30%,
    rgba(20, 20, 30, .5) 60%,
    rgba(20, 20, 30, .9) 100%);
}
@media (hover: hover) {
  .bento__flis--foto:hover .bento__bilde { transform: scale(1.06); }
}
/* Et hoeyt bilde i en bred flis viser bare et belte over midten. Da kan
   redaktoeren flytte beltet opp eller ned i stedet for aa beskjaere
   bildet paa nytt. */
.bento__flis--fokus-topp .bento__bilde { object-position: 50% 18%; }
.bento__flis--fokus-bunn .bento__bilde { object-position: 50% 70%; }

.bento__nr {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  opacity: .5;
}
.bento__flis--foto .bento__nr,
.bento__flis--mork .bento__nr { color: var(--brand, #ffd61f); opacity: 1; }

.bento__tittel {
  margin: 0 0 8px;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.18;
  font-weight: 800;
  color: inherit;
}
.bento__flis--stor .bento__tittel { font-size: clamp(28px, 2.6vw, 38px); }

.bento__tekst {
  margin: 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.55;
  opacity: .85;
}
.bento__flis--stor .bento__tekst { font-size: 17px; }

/* Ansiktene: overlappende portretter oeverst i flisen. */
.bento__ansikter { display: flex; margin-bottom: auto; padding-bottom: 24px; }
.bento__ansikt {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--brand, #ffd61f);
  border: 3px solid #f5f3ee;
  margin-left: -14px;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.bento__ansikt:first-child { margin-left: 0; }
@media (hover: hover) {
  .bento__flis:hover .bento__ansikt { transform: translateY(-4px); }
  .bento__flis:hover .bento__ansikt:nth-child(2) { transition-delay: .04s; }
  .bento__flis:hover .bento__ansikt:nth-child(3) { transition-delay: .08s; }
  .bento__flis:hover .bento__ansikt:nth-child(4) { transition-delay: .12s; }
  .bento__flis:hover .bento__ansikt:nth-child(5) { transition-delay: .16s; }
}

/* Inngang: flisene stiger opp én etter én. */
.bento--anim .bento__flis {
  opacity: 0;
  transform: translateY(32px) scale(.985);
  transition:
    opacity .7s ease,
    transform .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.bento--anim.er-synlig .bento__flis { opacity: 1; transform: none; }

/* Venstrestilt paa mobil. Midtstilt tekst over flere linjer gir en
   ujevn kant paa begge sider, og flisene under starter uansett til
   venstre. Tidslinjen og sjekklisten er venstrestilt fra foer. */
@media (max-width: 767px) {
  .bento-sek__topp { margin-left: 0; margin-right: 0; text-align: left; }
  .bento-sek__topp .eyebrow--center { justify-content: flex-start; }
  .bento-sek__topp .section__title--center,
  .bento-sek__topp .section__lead--center { text-align: left; margin-left: 0; margin-right: 0; }
}

@media (max-width: 899px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); }
  .bento__flis--stor { grid-column: span 2; grid-row: span 1; min-height: 420px; }
}
@media (max-width: 559px) {
  .bento { grid-template-columns: 1fr; gap: 12px; }
  .bento__flis--stor,
  .bento__flis--bred,
  .bento__flis--liten { grid-column: auto; grid-row: auto; }
  .bento__flis { min-height: 0; padding: 24px; }
  .bento__flis--foto { min-height: 320px; }
  .bento__flis--stor { min-height: 420px; }
  .bento__flis--gul::before,
  .bento__flis--mork::before,
  .bento__flis--lys::before { font-size: 110px; }
}


/* ---------------------------------------------------------------
   TIDSLINJE MED FREMDRIFT
   --------------------------------------------------------------- */
.fremdrift {
  position: relative;
  overflow: hidden;
  background: var(--ink, #1f1f2e);
  color: #fff;
}
/* En svak gul gloed oeverst til hoeyre, saa den moerke flaten ikke
   blir flat. */
.fremdrift::before {
  content: "";
  position: absolute;
  top: -240px;
  right: -200px;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 31, .17), rgba(255, 214, 31, 0) 66%);
  pointer-events: none;
}

.fremdrift__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
/* Venstre kolonne blir staaende mens stegene ruller forbi. */
.fremdrift__intro { position: sticky; top: 110px; }

/* Temaets .hl setter teksten til moerk blekk-farge med en gul stripe
   under. Paa moerk bakgrunn forsvinner da ordene og bare stripen synes.
   Hvit tekst paa samme stripe, slik taksjekk-baandet allerede gjoer. */
.fremdrift .hl,
.sjekk__tekst .hl { color: #fff; }

.fremdrift .eyebrow { color: rgba(255, 255, 255, .7); }
.fremdrift .eyebrow__dot { background: var(--brand, #ffd61f); }
.fremdrift__tittel { color: #fff; }
.fremdrift__lead { color: rgba(255, 255, 255, .72); }

.fremdrift__foto {
  position: relative;
  margin: 32px 0 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm, 3px);
  overflow: hidden;
}
.fremdrift__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fremdrift__foto figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 8px 14px;
  border-radius: var(--radius-sm, 3px);
  background: rgba(20, 20, 30, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.fremdrift__liste { position: relative; }
.fremdrift__stegene { list-style: none; margin: 0; padding: 0; }

/* Sporet gaar gjennom midten av nummerboblene. */
.fremdrift__spor {
  position: absolute;
  left: 25px;
  top: 26px;
  bottom: 26px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
}
.fremdrift__fyll {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--fremdrift, 1) * 100%);
  border-radius: 2px;
  background: var(--brand, #ffd61f);
  box-shadow: 0 0 14px rgba(255, 214, 31, .6);
}

.fremdrift__steg {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 22px;
  padding-bottom: 46px;
}
.fremdrift__steg:last-child { padding-bottom: 0; }

.fremdrift__nr {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 800;
  background: var(--brand, #ffd61f);
  border: 2px solid var(--brand, #ffd61f);
  color: var(--ink, #1f1f2e);
  box-shadow: 0 0 0 7px rgba(255, 214, 31, .13);
  transition: background .45s ease, border-color .45s ease, color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}

.fremdrift__kropp h3 { margin: 12px 0 6px; font-size: 20px; line-height: 1.25; color: #fff; }
.fremdrift__kropp p  { margin: 0; line-height: 1.6; color: rgba(255, 255, 255, .66); }

/* Naar skriptet kjoerer: stegene er dempet til linjen naar dem. */
.fremdrift--levende .fremdrift__steg { opacity: .42; transition: opacity .5s ease; }
.fremdrift--levende .fremdrift__nr {
  background: var(--ink, #1f1f2e);
  border-color: rgba(255, 255, 255, .24);
  color: rgba(255, 255, 255, .72);
  box-shadow: none;
}
.fremdrift--levende .fremdrift__steg.er-naadd { opacity: 1; }
.fremdrift--levende .fremdrift__steg.er-naadd .fremdrift__nr {
  background: var(--brand, #ffd61f);
  border-color: var(--brand, #ffd61f);
  color: var(--ink, #1f1f2e);
  box-shadow: 0 0 0 7px rgba(255, 214, 31, .13);
  transform: scale(1.06);
}

@media (max-width: 899px) {
  .fremdrift__grid { grid-template-columns: 1fr; }
  .fremdrift__intro { position: static; }
  .fremdrift__foto { aspect-ratio: 16 / 10; }
}


/* ---------------------------------------------------------------
   SJEKKLISTE OVER BILDE
   --------------------------------------------------------------- */
.sjekk {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(80px, 10vw, 150px) 0;
  background: var(--ink, #1f1f2e);
  color: #fff;
}
.sjekk__bilde {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  will-change: transform;
}
/* Moerkest der teksten staar, lysest der kortet dekker bildet uansett. */
.sjekk__skygge {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(20, 20, 30, .9) 0%,
    rgba(20, 20, 30, .7) 40%,
    rgba(20, 20, 30, .25) 100%);
}

.sjekk__wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.sjekk .eyebrow { color: rgba(255, 255, 255, .78); }
.sjekk .eyebrow__dot { background: var(--brand, #ffd61f); }
.sjekk__tekst .section__title { color: #fff; }
.sjekk__tekst .section__lead  { color: rgba(255, 255, 255, .82); }

.sjekk__kort {
  padding: clamp(22px, 3vw, 38px);
  border-radius: var(--radius-sm, 3px);
  background: #fff;
  color: var(--ink, #1f1f2e);
}
.sjekk__liste { list-style: none; margin: 0; padding: 0; }
.sjekk__punkt {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line, #e3e3ec);
}
.sjekk__punkt:first-child { padding-top: 4px; }
.sjekk__punkt:last-child  { border-bottom: 0; padding-bottom: 4px; }
.sjekk__punkt b { display: block; margin-bottom: 3px; font-size: 17px; }
.sjekk__punkt p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted, #73738c); }

.sjekk__boks {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: var(--radius-sm, 3px);
  background: var(--brand, #ffd61f);
}
.sjekk__boks svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ink, #1f1f2e);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sjekk__note { margin: 16px 0 0; font-size: 13px; color: var(--muted, #73738c); }

/* Hakene: boksen fylles, og merket tegnes, ett punkt om gangen. */
.sjekk--anim .sjekk__boks {
  background: #f1f1f5;
  box-shadow: inset 0 0 0 2px var(--line, #d1d1e0);
  transition: background .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1);
  transition-delay: calc(var(--i, 0) * 170ms + 250ms);
}
.sjekk--anim .sjekk__boks path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset .45s ease;
  transition-delay: calc(var(--i, 0) * 170ms + 380ms);
}
.sjekk--anim .sjekk__punkt {
  opacity: .55;
  transition: opacity .4s ease;
  transition-delay: calc(var(--i, 0) * 170ms + 250ms);
}
.sjekk--anim.er-synlig .sjekk__boks { background: var(--brand, #ffd61f); box-shadow: none; transform: scale(1.08); }
.sjekk--anim.er-synlig .sjekk__boks path { stroke-dashoffset: 0; }
.sjekk--anim.er-synlig .sjekk__punkt { opacity: 1; }

.sjekk--uten-bilde .sjekk__skygge { display: none; }

@media (max-width: 899px) {
  .sjekk__wrap { grid-template-columns: 1fr; }
  .sjekk__skygge {
    background: linear-gradient(180deg,
      rgba(20, 20, 30, .88) 0%,
      rgba(20, 20, 30, .6) 55%,
      rgba(20, 20, 30, .45) 100%);
  }
}


/* ---------------------------------------------------------------
   Redusert bevegelse: ingen inngang, ingen parallakse, ingen zoom.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bento__bilde,
  .bento__ansikt,
  .fremdrift__nr,
  .fremdrift__steg { transition: none !important; }
  .bento__flis--foto:hover .bento__bilde { transform: none; }
  .sjekk__bilde { transform: none !important; }
}