/* Malemoro – forsiden (NO + EN). */
.hero { display: flex; align-items: center; gap: 48px; padding: 56px var(--gutter) 40px; }
.hero-text { display: flex; flex-direction: column; gap: 24px; flex: 1 1 auto; max-width: 600px; }
.hero h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.08; }
.hero .lead { font-size: clamp(17px, 1.6vw, 19px); }
.hero-art { flex: 0 1 440px; margin-left: auto; }
.hero-art svg { display: block; width: 100%; height: auto; }

.facts { padding: 40px var(--gutter) 64px; }
.fact { display: flex; flex-direction: column; align-items: center; gap: 12px; background: #fff; border-radius: 24px; padding: 32px 24px; text-align: center; }
.fact svg { width: 40px; height: 40px; }
.fact .t { font-family: var(--title); font-size: 24px; font-weight: 600; color: var(--pink-ink); }
.fact .t.orange { color: var(--orange-dark); }
.fact p { font-size: 15px; line-height: 1.55; color: var(--muted); }

.how { padding: 48px var(--gutter) 64px; display: flex; flex-direction: column; gap: 40px; }
.how .grid-3 { gap: 40px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.step .n { width: 56px; height: 56px; border-radius: 999px; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--title); font-size: 26px; font-weight: 600; }
.step .n.pink { background: var(--rose); }
.step h3 { font-size: 21px; }
.step p { font-size: 15px; line-height: 1.6; color: var(--muted); }

.teaser { padding: 40px var(--gutter) 56px; display: flex; flex-direction: column; gap: 32px; }
.teaser-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.teaser-head a { font-size: 16px; font-weight: 800; padding: 10px 0; }
.teaser .art-frame svg { max-width: 220px; }

.cta { padding: 24px var(--gutter) 64px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.cta p { font-size: 17px; color: var(--muted); max-width: 520px; }
.cta .row { justify-content: center; }

@media (max-width: 900px) {
  .hero { flex-direction: column; align-items: stretch; gap: 28px; padding-top: 32px; }
  .hero-art { flex: none; width: 100%; max-width: 340px; margin: 0 auto; }
  .facts { padding: 28px var(--gutter) 44px; }
  .facts .grid-3 { gap: 16px; }
  .how { padding: 40px var(--gutter) 48px; gap: 28px; }
  .how .grid-3 { gap: 32px; }
  .teaser .art-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 560px) {
  .hero .row .btn { flex: 1 1 100%; }
  .hero-art { max-width: 280px; }
  .fact { padding: 24px 20px; }
  .teaser { padding: 32px var(--gutter) 44px; gap: 24px; }
  .teaser .art-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .teaser .art-frame svg { max-width: 260px; }
  .cta { padding: 16px var(--gutter) 48px; }
  .cta .row { width: 100%; }
  .cta .row .btn { flex: 1 1 100%; }
}
/* Forsiden: tre bilder på rad, ett og ett på mobil. */
.teaser .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .teaser .photo-grid { grid-template-columns: 1fr; } }