/* ============================================
   KOMMUNE - Shared kommune-landing styling
   Scoped under .kommune-page
   Per-kommune accent: inline style="--k-accent: ...;"
   ============================================ */

@font-face {
  font-family: 'Glacial Indifference';
  src: url('/assets/fonts/GlacialIndifference-Regular.woff2') format('woff2'),
       url('/assets/fonts/GlacialIndifference-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Glacial Indifference';
  src: url('/assets/fonts/GlacialIndifference-Bold.woff2') format('woff2'),
       url('/assets/fonts/GlacialIndifference-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.kommune-page {
  --k-content-max: 1180px;
  --k-content-wide: 1400px;
  --k-content-narrow: 760px;
  --k-section-padding: clamp(90px, 11vh, 160px);
  --k-card-radius: 14px;
  --k-card-radius-lg: 22px;

  --k-accent: var(--color-gold, #c4918a);
  --k-accent-soft: var(--surface-story, #F1EBE3);
  --k-surface: var(--surface-explore, #FBF9F6);
  --k-surface-strong: var(--surface-strong, #0a1628);
  --k-surface-utility: var(--surface-utility, #243D4F);

  --font-body: 'Glacial Indifference', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;

  --color-dark-panel: var(--k-surface-utility);
  --color-cream: var(--surface-story, #F1EBE3);
  overflow-x: hidden;
  overflow-x: clip;
}
.kommune-page main { overflow-x: hidden; overflow-x: clip; }

.kommune-page .site-footer { border-top: 1px solid rgba(250, 248, 245, 0.1); margin-top: 0; }
.kommune-page .footer-column h4 { color: var(--k-accent); }

/* Tone down Freysta logo in header so Lister brand dominates */
.kommune-page .header-logo {
  opacity: 0.5;
  width: 34px;
  height: 34px;
  transition: opacity var(--duration-normal, 300ms) var(--ease-out-expo);
}
.kommune-page .header-logo-link:hover .header-logo,
.kommune-page .header-logo-link:focus-visible .header-logo { opacity: 0.9; }

/* ---- Shared typography ---- */
.k-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--k-accent);
  margin: 0 0 var(--space-md);
}
.k-eyebrow--light { color: rgba(255, 255, 255, 0.75); }
.k-eyebrow--soft { color: var(--color-text-secondary, #4a4a4a); }

.k-section-title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0;
}
.k-section-title em { font-style: italic; font-weight: 400; color: var(--k-accent); }
.k-section-title--light { color: #fff; }
.k-section-title--light em { color: var(--k-accent); }

.k-section-intro {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--color-text-secondary);
  max-width: 640px;
  margin: clamp(18px, 3vh, 28px) 0 0;
}
.k-section-intro--light { color: rgba(250, 248, 245, 0.82); }

.k-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-normal, 300ms) var(--ease-out-expo),
              background var(--duration-normal, 300ms) var(--ease-out-expo);
}
.k-btn--primary { background: var(--k-accent); color: var(--k-surface-strong); }
.k-btn--primary:hover,
.k-btn--primary:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.k-btn--ghost {
  background: transparent;
  color: #faf8f5;
  border-color: rgba(250, 248, 245, 0.4);
}
.k-btn--ghost:hover,
.k-btn--ghost:focus-visible {
  background: rgba(250, 248, 245, 0.12);
  border-color: rgba(250, 248, 245, 0.72);
}
.k-btn--dark { background: var(--k-surface-strong); color: #faf8f5; }
.k-btn--dark:hover,
.k-btn--dark:focus-visible {
  background: #162438;
  transform: translateY(-1px);
}

/* =========================================================
   1. HERO
   ========================================================= */
.k-hero {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #faf8f5;
  isolation: isolate;
}
.k-hero__media { position: absolute; inset: 0; z-index: -2; }
.k-hero__media video,
.k-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.k-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 22, 40, 0.22) 0%, rgba(10, 22, 40, 0.12) 42%, rgba(10, 22, 40, 0.78) 100%),
    radial-gradient(ellipse at 80% 25%, var(--k-hero-tint, rgba(196, 145, 138, 0.12)), transparent 55%);
}
.k-hero__brand {
  position: absolute;
  top: clamp(28px, 5vh, 56px);
  left: clamp(20px, 4vw, 56px);
  z-index: 2;
  display: block;
  text-decoration: none;
}
.k-hero__brand img {
  width: clamp(140px, 16vw, 220px);
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.45));
  transition: transform var(--duration-normal, 300ms) var(--ease-out-expo);
}
.k-hero__brand:hover img,
.k-hero__brand:focus-visible img { transform: translateY(-2px); }

.k-hero__breadcrumb {
  position: absolute;
  top: clamp(42px, 6vh, 74px);
  right: clamp(20px, 4vw, 56px);
  z-index: 2;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.78);
}
.k-hero__breadcrumb a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast, 150ms);
}
.k-hero__breadcrumb a:hover { border-bottom-color: currentColor; }
.k-hero__breadcrumb a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast, 150ms);
}
.k-hero__breadcrumb a:hover { border-bottom-color: currentColor; }
.k-hero__content {
  position: relative;
  padding: clamp(36px, 8vh, 96px) clamp(20px, 5vw, 56px) clamp(80px, 12vh, 140px);
  max-width: var(--k-content-wide);
  width: 100%;
  margin: 0 auto;
}
.k-hero__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--k-accent);
  margin-bottom: clamp(16px, 3vh, 26px);
}
.k-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2rem + 6vw, 8rem);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(18px, 3vh, 28px);
  max-width: 920px;
}
.k-hero__title em { font-style: italic; font-weight: 400; color: var(--k-accent); }
.k-hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 0.8rem + 1.1vw, 1.7rem);
  line-height: 1.35;
  color: rgba(250, 248, 245, 0.88);
  max-width: 620px;
  margin: 0;
}

/* =========================================================
   2. BOOMRADER - village grid
   ========================================================= */
.k-boomrader {
  padding: clamp(56px, 8vh, 104px) clamp(20px, 5vw, 56px) var(--k-section-padding);
  background: var(--k-surface);
  position: relative;
}
.k-boomrader__head {
  max-width: var(--k-content-max);
  margin: 0 auto clamp(40px, 6vh, 72px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(24px, 4vw, 56px);
}
.k-boomrader__head p { margin: 0; }
.k-boomrader__count {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 0.8rem + 0.8vw, 1.5rem);
  color: var(--k-accent);
  white-space: nowrap;
}

.k-housing-strip {
  max-width: var(--k-content-wide);
  margin: 0 auto clamp(28px, 4vh, 48px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.k-housing-card {
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--k-card-radius);
  background: #fff;
  border: 1px solid rgba(22, 45, 34, 0.09);
  box-shadow: 0 18px 44px -34px rgba(18, 34, 45, 0.38);
}
.k-housing-card__label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--k-accent);
}
.k-housing-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 0.95rem + 0.6vw, 1.55rem);
  font-weight: 400;
  line-height: 1.16;
  color: var(--k-surface-strong);
}
.k-housing-card p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.k-boomrader__grid {
  max-width: var(--k-content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.k-boomrade-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: var(--k-card-radius);
  text-decoration: none;
  color: #faf8f5;
  isolation: isolate;
  background: var(--k-surface-strong);
  aspect-ratio: 4 / 5;
  transition: transform var(--duration-slow, 500ms) var(--ease-out-expo),
              box-shadow var(--duration-slow, 500ms) var(--ease-out-expo);
}
a.k-boomrade-card:hover,
a.k-boomrade-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -18px rgba(10, 22, 40, 0.35);
}
.k-boomrade-card__media { position: absolute; inset: 0; z-index: -2; }
.k-boomrade-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slowest, 1200ms) var(--ease-out-expo);
}
a.k-boomrade-card:hover .k-boomrade-card__media img { transform: scale(1.04); }
.k-boomrade-card__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 22, 40, 0.3) 65%, rgba(10, 22, 40, 0.9) 100%);
}
.k-boomrade-card__content {
  position: relative;
  padding: clamp(20px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.k-boomrade-card__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 0.9rem + 1.4vw, 2.2rem);
  line-height: 1.05;
  margin: 0;
}
.k-boomrade-card__tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgba(250, 248, 245, 0.85);
  margin: 0;
}
.k-boomrade-card__status {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--k-accent);
  padding-bottom: 4px;
}
.k-boomrade-card--live .k-boomrade-card__status::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--k-accent);
  margin-right: 8px;
  transform: translateY(-1px);
}

/* =========================================================
   3. NATUR
   ========================================================= */
.k-natur {
  padding: var(--k-section-padding) clamp(20px, 5vw, 56px);
  background: var(--k-surface-strong);
  color: #faf8f5;
}
.k-natur__inner {
  max-width: var(--k-content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.5fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.k-natur__text { max-width: 460px; }
.k-natur__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--k-card-radius); }
.k-natur__media img,
.k-natur__media video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .k-housing-strip { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .k-natur__inner { grid-template-columns: 1fr; }
}

/* =========================================================
   4. LEVE (culture + daily life)
   ========================================================= */
.k-leve {
  padding: var(--k-section-padding) clamp(20px, 5vw, 56px);
  background: var(--k-surface);
}
.k-leve__inner {
  max-width: var(--k-content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.k-leve__head { grid-column: span 12; max-width: 720px; margin-bottom: clamp(24px, 4vh, 48px); }
.k-leve__block { grid-column: span 6; }
.k-leve__block-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--k-card-radius);
  margin-bottom: 20px;
}
.k-leve__block-media img,
.k-leve__block-media video { width: 100%; height: 100%; object-fit: cover; }
.k-leve__block h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--k-surface-strong);
}
.k-leve__block p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0;
}
@media (max-width: 760px) { .k-leve__block { grid-column: span 12; } }

/* =========================================================
   5. JOBB (employers)
   ========================================================= */
.k-jobb {
  padding: var(--k-section-padding) clamp(20px, 5vw, 56px);
  background: var(--k-surface-utility);
  color: #faf8f5;
}
.k-jobb__inner { max-width: var(--k-content-max); margin: 0 auto; }
.k-jobb__head { max-width: 720px; margin-bottom: clamp(40px, 6vh, 72px); }
.k-jobb__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.k-employer-card {
  padding: clamp(24px, 3vw, 36px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--k-card-radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #faf8f5;
  text-decoration: none;
  transition: background var(--duration-normal, 300ms), border-color var(--duration-normal, 300ms);
}
.k-employer-card:hover,
.k-employer-card:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
.k-employer-card__sector {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--k-accent);
}
.k-employer-card__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 0.9rem + 0.7vw, 1.65rem);
  margin: 0;
}
.k-employer-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: rgba(250, 248, 245, 0.75);
  margin: 0;
}

/* =========================================================
   6. FOLK
   ========================================================= */
.k-folk {
  padding: var(--k-section-padding) clamp(20px, 5vw, 56px);
  background: var(--k-surface);
}
.k-folk__inner { max-width: var(--k-content-wide); margin: 0 auto; }
.k-folk__head { max-width: 720px; margin-bottom: clamp(40px, 6vh, 72px); }
.k-folk__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.k-folk-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--k-card-radius);
  background: var(--k-surface-strong);
  color: #faf8f5;
  isolation: isolate;
  aspect-ratio: 3 / 4;
}
.k-folk-card__media { position: absolute; inset: 0; z-index: -2; }
.k-folk-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slowest, 1200ms) var(--ease-out-expo);
}
.k-folk-card:hover .k-folk-card__media img { transform: scale(1.04); }
.k-folk-card__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 45%, rgba(10, 22, 40, 0.92) 100%);
}
.k-folk-card__body {
  position: relative;
  padding: clamp(20px, 2.5vw, 28px);
  display: flex; flex-direction: column; gap: 8px;
  height: 100%; justify-content: flex-end;
}
.k-folk-card__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 0.9rem + 0.7vw, 1.65rem);
  line-height: 1.1;
  margin: 0;
}
.k-folk-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgba(250, 248, 245, 0.85);
  margin: 4px 0 0;
}

/* =========================================================
   7. HISTORIER - StaticArticleSection overrides
   ========================================================= */
.kommune-static-articles { background: var(--k-surface-strong); }

/* =========================================================
   8. KART - single marker
   ========================================================= */
.k-map {
  padding: clamp(72px, 10vh, 128px) clamp(20px, 5vw, 56px);
  background: var(--k-surface-utility);
  color: #faf8f5;
}
.k-map__inner {
  max-width: var(--k-content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.k-map__text { max-width: 460px; }
.k-map__canvas {
  height: clamp(420px, 58vh, 600px);
  border-radius: var(--k-card-radius);
  overflow: hidden;
  background: var(--k-surface-strong);
  border: 1px solid rgba(250, 248, 245, 0.12);
  box-shadow: 0 28px 80px -40px rgba(0, 0, 0, 0.65);
}
.k-map__canvas .v-location__map { width: 100%; height: 100%; }
.k-map__canvas .v-location__pin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--k-accent);
  border: 2px solid #faf8f5;
  box-shadow: 0 0 0 6px rgba(196, 145, 138, 0.25);
}
@media (max-width: 900px) {
  .k-map__inner { grid-template-columns: 1fr; }
}

/* =========================================================
   9. FLYTT-GUIDER (legacy)
   ========================================================= */
.k-move-guides {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(500px, 60vh, 720px);
  overflow: hidden;
  color: #faf8f5;
  isolation: isolate;
}
.k-move-guides__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.k-move-guides__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.k-move-guides__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(10, 22, 40, 0.55) 0%,
    rgba(10, 22, 40, 0.65) 40%,
    rgba(10, 22, 40, 0.82) 100%
  );
}
.k-move-guides__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 760px;
  padding: clamp(56px, 8vh, 104px) clamp(24px, 5vw, 48px);
}
.k-move-guides__content .k-eyebrow {
  margin-bottom: clamp(14px, 2vh, 22px);
}
.k-move-guides__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #faf8f5;
  margin: 0 0 clamp(18px, 2.8vh, 28px);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}
.k-move-guides__title em {
  font-style: italic;
  color: var(--k-accent);
}
.k-move-guides__text {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.7;
  color: rgba(250, 248, 245, 0.82);
  margin: 0 0 clamp(32px, 4.5vh, 52px);
  max-width: 580px;
}
.k-move-guides__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
  width: 100%;
}
.k-move-guides__card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.8vw, 34px);
  border-radius: var(--k-card-radius);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  text-decoration: none;
  color: #faf8f5;
  text-align: left;
  transition: background 400ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 400ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.k-move-guides__card:hover,
.k-move-guides__card:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(196, 145, 138, 0.55);
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
}
.k-move-guides__card-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--k-accent);
  margin-bottom: clamp(10px, 1.6vh, 16px);
}
.k-move-guides__card-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.95rem + 0.9vw, 1.65rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #faf8f5;
  margin-bottom: clamp(10px, 1.6vh, 16px);
}
.k-move-guides__card-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: rgba(250, 248, 245, 0.72);
  margin-bottom: clamp(16px, 2.2vh, 24px);
  flex: 1;
}
.k-move-guides__card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--k-accent);
  transition: gap 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.k-move-guides__card:hover .k-move-guides__card-link,
.k-move-guides__card:focus-visible .k-move-guides__card-link {
  gap: 14px;
}

@media (max-width: 640px) {
  .k-move-guides__cards {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   10. FLYTT-CTA
   ========================================================= */
.k-cta {
  position: relative;
  padding: clamp(120px, 18vh, 200px) clamp(20px, 5vw, 56px);
  background: var(--k-surface-strong);
  color: #faf8f5;
  overflow: hidden;
  isolation: isolate;
}
.k-cta__bg { position: absolute; inset: 0; z-index: -2; }
.k-cta__bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75); }
.k-cta__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.85) 0%, rgba(10, 22, 40, 0.65) 40%, rgba(10, 22, 40, 0.94) 100%);
}
.k-cta__inner {
  max-width: var(--k-content-max);
  margin: 0 auto;
  text-align: center;
}
.k-cta__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 16px 0 20px;
}
.k-cta__title em { font-style: italic; color: var(--k-accent); }
.k-cta__lede {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto clamp(40px, 6vh, 56px);
  color: rgba(250, 248, 245, 0.82);
}
.k-cta__actions {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* =========================================================
   11. NESTE STEG
   ========================================================= */
.k-next {
  padding: clamp(88px, 13vh, 156px) clamp(20px, 5vw, 56px);
  background:
    linear-gradient(135deg, rgba(196, 145, 138, 0.18), transparent 45%),
    var(--k-surface-strong);
  color: #faf8f5;
}
.k-next__inner {
  max-width: var(--k-content-wide);
  margin: 0 auto;
}
.k-next__head {
  max-width: 760px;
  margin-bottom: clamp(36px, 5vh, 64px);
}
.k-next__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.k-next-card {
  min-height: 220px;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: var(--k-card-radius);
  border: 1px solid rgba(250, 248, 245, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: #faf8f5;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  transition: transform 420ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
              background 300ms ease,
              border-color 300ms ease,
              box-shadow 420ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.k-next-card:hover,
.k-next-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(196, 145, 138, 0.55);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 22px 50px -32px rgba(0, 0, 0, 0.65);
}
.k-next-card--primary {
  background: rgba(196, 145, 138, 0.18);
  border-color: rgba(196, 145, 138, 0.38);
}
.k-next-card__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--k-accent);
}
.k-next-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 0.9vw, 1.85rem);
  line-height: 1.12;
  font-weight: 400;
}
.k-next-card__text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: rgba(250, 248, 245, 0.76);
}

@media (max-width: 1100px) {
  .k-next__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .k-next__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Reveal animation
   ========================================================= */
.kommune-page [data-reveal] {
  opacity: 0;
  transition: opacity 900ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.kommune-page [data-reveal].revealed { opacity: 1; }
.kommune-page [data-reveal][data-reveal-delay="1"] { transition-delay: 120ms; }
.kommune-page [data-reveal][data-reveal-delay="2"] { transition-delay: 220ms; }
.kommune-page [data-reveal][data-reveal-delay="3"] { transition-delay: 320ms; }

.kommune-page .v-glance { background: var(--k-surface); }

@media (prefers-reduced-motion: reduce) {
  .kommune-page [data-reveal] { opacity: 1; transition: none; }
  .k-boomrade-card,
  .k-boomrade-card__media img,
  .k-folk-card__media img,
  .k-btn { transition: none !important; }
}