/* Start: bakgrundsprickar, rubrik och teamfoton */

.hero{
  /* Längsta raden ("Digitala verktyg") är ca 5.2em bred. Storleken är 80 % av det som skulle
     fylla halva skärmen, så att rubriken inte tar över; tre rader ryms alltid på höjden. */
  --fs-hero-top: clamp(32px, min(7.6vw, calc((100vh - 340px) / 3.3)), 136px);
  /* "Enkelt." följer rubriken överst, lite större (förr var den ungefär dubbelt så stor) */
  --fs-hero-bottom: calc(var(--fs-hero-top) * 1.4);
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
  background: var(--bg);
}

.flecks{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fleck-far{ position: absolute; border-radius: 50%; animation: float 8s ease-in-out infinite; }
.fleck-micro{ position: absolute; border-radius: 50%; animation: floatMicro 9s ease-in-out infinite; }
@keyframes float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}
@keyframes floatMicro{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-5px); }
}

.poster-headline{
  position: absolute;
  z-index: 3;
  font-family: var(--font-poster);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--orange);
  line-height: 0.88;
  letter-spacing: -0.01em;
}
.headline-top{
  top: 110px;
  left: 32px;
  font-size: var(--fs-hero-top);
  line-height: 1;
  max-width: 66%;
}
.headline-bottom{
  bottom: 34px;
  right: 32px;
  text-align: right;
  font-size: var(--fs-hero-bottom);
}
.headline-tag{
  position: absolute;
  z-index: 3;
  right: 34px;
  bottom: calc(var(--fs-hero-bottom) * 0.9 + 46px);
  max-width: 260px;
  text-align: right;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-soft);
  line-height: 1.5;
}
.headline-sub{
  position: absolute;
  z-index: 3;
  left: 34px;
  bottom: 96px;
  max-width: 320px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
}

.dot-blob{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
}
.dot-blob span{
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.team-photo{
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 16px rgba(34,30,27,0.2);
  transition: box-shadow .2s ease;
}
.team-photo:hover{ box-shadow: 0 10px 24px rgba(34,30,27,0.3); }