/*
 * DSOP theme — main stylesheet
 *
 * Tokens følger DESIGN.md v1.1.0 (Living Atlas). Implementasjonsdetaljer
 * for komponenter er på vei — denne fila etablerer designsystem-grunnlaget.
 *
 * Live Atlas-prototype: https://tilbud.nettsmed.no/dsop/mockup-atlas.html
 */

/* ============ TOKENS (DESIGN.md v1.1.0) ============ */
:root {
  /* Colors — primary */
  --dsop-primary: #005587;
  --dsop-primary-deep: #003D6B;
  --dsop-cyan: #5BC0C9;
  --dsop-teal-accessible: #0E7A82;
  --dsop-teal-mid: #53A0AB;
  --dsop-ink: #0A2540;
  --dsop-muted: #4B6079;
  --dsop-surface: #FFFFFF;

  /* Colors — extended */
  --dsop-mist-pale: #E8F5FC;
  --dsop-mist: #CEEAF7;
  --dsop-mist-deep: #BCE1E5;
  --dsop-border: #D6E4F0;

  /* Status */
  --dsop-status-live-text: #15803D;
  --dsop-status-live-bg: #F0FDF4;
  --dsop-status-pilot-text: #92400E;
  --dsop-status-pilot-bg: #FEF3C7;
  --dsop-status-planlagt-text: #1E40AF;
  --dsop-status-planlagt-bg: #DBEAFE;

  /* Typography */
  --dsop-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --dsop-font-mono-family: 'JetBrains Mono', 'Fira Code', monospace;
  --dsop-font-display: clamp(3rem, 6.5vw, 5.5rem);
  --dsop-font-h1: clamp(2.25rem, 4.5vw, 3rem);
  --dsop-font-h2: clamp(1.875rem, 3.5vw, 2.25rem);
  --dsop-font-h3: 1.5rem;
  --dsop-font-h4: 1.1875rem;
  --dsop-font-subheading: 1.25rem;
  --dsop-font-body-lg: 1.125rem;
  --dsop-font-body: 1.0625rem;
  --dsop-font-body-sm: 0.875rem;
  --dsop-font-label: 0.75rem;
  --dsop-font-mono: 0.875rem;

  /* Spacing */
  --dsop-space-xs: 0.5rem;
  --dsop-space-sm: 1rem;
  --dsop-space-md: 1.5rem;
  --dsop-space-lg: 2rem;
  --dsop-space-xl: 3rem;
  --dsop-space-2xl: 4.5rem;
  --dsop-space-3xl: 7.5rem;
  --dsop-space-4xl: 10rem;

  /* Shapes */
  --dsop-rounded-sm: 8px;
  --dsop-rounded-md: 16px;
  --dsop-rounded-lg: 28px;
  --dsop-rounded-pill: 999px;
  --dsop-rounded-tile: 24px;
  --dsop-rounded-frame: 28px;

  /* Elevation */
  --dsop-shadow-card: 0 2px 12px rgba(0, 85, 135, 0.08);
  --dsop-shadow-card-hover: 0 12px 32px rgba(0, 85, 135, 0.16);
  --dsop-shadow-elevated: 0 8px 36px rgba(0, 85, 135, 0.20);
  --dsop-shadow-pill: 0 12px 28px -8px rgba(0, 85, 135, 0.25);
  --dsop-shadow-illu: 0 30px 60px -20px rgba(0, 85, 135, 0.25),
                     0 18px 36px -18px rgba(10, 37, 64, 0.30);
  --dsop-shadow-tile-hover: 0 20px 40px -16px rgba(0, 85, 135, 0.20);

  /* Gradients */
  --dsop-gradient-heading: linear-gradient(135deg, var(--dsop-primary) 0%, var(--dsop-teal-accessible) 100%);
  --dsop-gradient-tile-illu: linear-gradient(135deg, var(--dsop-mist-pale) 0%, var(--dsop-mist) 100%);
}

/* ============ RESET + BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--dsop-font-family);
  font-size: var(--dsop-font-body);
  line-height: 1.65;
  color: var(--dsop-ink);
  background: var(--dsop-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

img, svg, picture { max-width: 100%; display: block; }

a {
  color: var(--dsop-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--dsop-cyan);
  text-decoration-thickness: 1.5px;
  transition: color 240ms ease-in-out, text-decoration-color 240ms ease-in-out;
}
a:hover { color: var(--dsop-teal-accessible); text-decoration-color: var(--dsop-primary); }
a:focus-visible { outline: 3px solid var(--dsop-cyan); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: inherit; color: var(--dsop-ink); margin: 0 0 var(--dsop-space-md); font-weight: 800; }
h1 { font-size: var(--dsop-font-h1); line-height: 1.1; letter-spacing: -1.2px; }
h2 { font-size: var(--dsop-font-h2); line-height: 1.15; letter-spacing: -0.8px; }
h3 { font-size: var(--dsop-font-h3); line-height: 1.3; letter-spacing: -0.4px; font-weight: 700; }
h4 { font-size: var(--dsop-font-h4); line-height: 1.35; letter-spacing: -0.2px; font-weight: 700; }
p  { margin: 0 0 var(--dsop-space-md); }

/* ============ LAYOUT ============ */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--dsop-space-xl); }
@media (max-width: 768px) { .wrap { padding: 0 var(--dsop-space-md); } }

.section { padding: var(--dsop-space-3xl) 0; }

/* ============ A11Y ============ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--dsop-primary);
  color: #fff;
  padding: var(--dsop-space-sm) var(--dsop-space-md);
  text-decoration: none;
  font-weight: 700;
  border-radius: var(--dsop-rounded-sm);
  z-index: 100;
}
.skip-link:focus {
  left: var(--dsop-space-sm);
  top: var(--dsop-space-sm);
}

:focus-visible {
  outline: 3px solid var(--dsop-cyan);
  outline-offset: 2px;
}

/* ============ HEADER ============ */
.site-header {
  position: sticky;
  top: 0;
  background: var(--dsop-surface);
  border-bottom: 1px solid var(--dsop-border);
  z-index: 50;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--dsop-space-sm) 0;
  gap: var(--dsop-space-lg);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--dsop-space-sm);
  text-decoration: none;
  color: var(--dsop-primary);
  font-weight: 800;
}
.brand__symbol { display: inline-flex; flex-shrink: 0; }
.brand__text { font-size: 1.125rem; line-height: 1; letter-spacing: -0.5px; }
.brand__text small {
  display: block;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 1.6px;
  color: var(--dsop-muted);
  text-transform: uppercase;
  margin-top: 4px;
}

.site-nav__list { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--dsop-space-lg); }
.site-nav__list a {
  color: var(--dsop-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--dsop-font-body-sm);
  padding: var(--dsop-space-xs) 0;
  border-bottom: 2px solid transparent;
  transition: border-color 200ms ease-out, color 200ms ease-out;
}
.site-nav__list a:hover { color: var(--dsop-primary); border-bottom-color: var(--dsop-cyan); }

@media (max-width: 768px) {
  .site-nav__list { display: none; }
}

/* ============ FOOTER ============ */
.site-footer {
  background: var(--dsop-ink);
  color: #fff;
  padding: var(--dsop-space-2xl) 0 var(--dsop-space-lg);
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  pointer-events: none;
}
.site-footer__inner { position: relative; z-index: 1; }

.site-footer a { color: #fff; text-decoration-color: var(--dsop-cyan); }
.site-footer a:hover { color: var(--dsop-mist); }
.site-footer__desc { color: rgba(255,255,255,0.7); font-size: var(--dsop-font-body-sm); line-height: 1.6; max-width: 22rem; }

.site-footer__partners {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem 1.5rem;
  align-items: center;
  margin-top: var(--dsop-space-xl);
  padding-top: var(--dsop-space-lg);
  border-top: 1px solid rgba(255,255,255,0.15);
}
.partner-mono {
  font-family: var(--dsop-font-family);
  font-weight: 700;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.3px;
  padding: 0.5rem 0.875rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--dsop-rounded-pill);
  transition: all 200ms;
}
.partner-mono:hover { color: var(--dsop-cyan); border-color: var(--dsop-cyan); background: rgba(91, 192, 201, 0.1); }

.site-footer__legal {
  margin-top: var(--dsop-space-lg);
  padding-top: var(--dsop-space-md);
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.55);
}

/* ============ COUNTER-STRIP (mørk seksjon mellom hero og atlas) ============ */
/* Spec: DESIGN.md v1.1.0 › components › counter-strip
   Referanse: mockup-atlas.html (linje 235-258) */
.counter-strip {
  background: var(--dsop-ink);
  color: #fff;
  padding: var(--dsop-space-2xl) 0;
  position: relative;
  overflow: hidden;
}
.counter-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(91, 192, 201, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 85, 135, 0.40) 0%, transparent 50%);
  pointer-events: none;
}
.counter-strip > .wrap { position: relative; z-index: 1; }

.counter-strip__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 0.7fr));
  gap: var(--dsop-space-xl);
  align-items: end;
}
@media (max-width: 900px) {
  .counter-strip__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--dsop-space-lg);
  }
}

.counter__num {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  color: #fff;
  letter-spacing: -1.5px;
}
.counter__label {
  font-size: var(--dsop-font-label);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.875rem;
  max-width: 12rem;
  line-height: 1.4;
}

.counter--hero { grid-column: 1; }
.counter--hero .counter__num {
  font-size: clamp(5rem, 10vw, 8rem);
  line-height: 0.9;
  letter-spacing: -4.5px;
  color: var(--dsop-cyan);
}
.counter--hero .counter__num small {
  font-size: 0.28em;
  color: rgba(255, 255, 255, 0.7);
  margin-left: var(--dsop-space-xs);
  letter-spacing: 0;
  font-weight: 800;
}
.counter--hero .counter__label {
  color: rgba(255, 255, 255, 0.75);
  max-width: 28rem;
  font-size: var(--dsop-font-body-sm);
  letter-spacing: 0.4px;
  text-transform: none;
  font-weight: 400;
  line-height: 1.5;
}

/* ============ ATLAS-SECTION (tjeneste-grid-wrapper på front-page) ============ */
/* Seksjon som holder de 15 tjeneste-tiles (atlas-tile) på forsiden.
   Header bruker kicker-pill (JetBrains Mono) + h2 med gradient-em + lede.
   Brukt av: front-page.php (#tjenester) */
.atlas { background: var(--dsop-surface); }

.atlas__head {
  max-width: 48rem;
  margin: 0 auto var(--dsop-space-2xl);
  text-align: center;
}

.atlas__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--dsop-font-mono-family);
  font-size: var(--dsop-font-label);
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--dsop-primary);
  background: var(--dsop-mist-pale);
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-pill);
  padding: 0.375rem 0.875rem;
  margin-bottom: var(--dsop-space-md);
}

.atlas__head h2 {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: var(--dsop-font-h2);
  line-height: 1.1;
  letter-spacing: -1.2px;
  margin: 0 0 var(--dsop-space-md);
}
.atlas__head h2 em {
  font-style: normal;
  background: var(--dsop-gradient-heading);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.atlas__lede {
  color: var(--dsop-muted);
  font-size: var(--dsop-font-body-lg);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 38rem;
}

.atlas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--dsop-space-lg);
}

/* ============ ATLAS-TILE (tjeneste-kort i grid) ============ */
/* Spec: DESIGN.md v1.1.0 › components › atlas-tile
   Referanse: mockup-atlas.html (linje 281-322)
   Brukt av: template-parts/atlas-tile.php */
.atlas-tile {
  position: relative;
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-tile);
  padding: var(--dsop-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--dsop-space-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.atlas-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--dsop-mist-pale) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 240ms;
  pointer-events: none;
}
.atlas-tile:hover {
  transform: translateY(-6px);
  border-color: var(--dsop-primary);
  box-shadow: var(--dsop-shadow-tile-hover);
  text-decoration: none;
  color: inherit;
}
.atlas-tile:hover::before { opacity: 1; }
.atlas-tile:focus-visible {
  outline: 3px solid var(--dsop-cyan);
  outline-offset: 3px;
}

.atlas-tile__illu {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--dsop-gradient-tile-illu);
  border-radius: var(--dsop-rounded-md);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.atlas-tile__illu object {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.atlas-tile__num {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-family: var(--dsop-font-mono-family);
  font-size: 0.625rem;
  color: var(--dsop-primary-deep);
  background: rgba(255, 255, 255, 0.85);
  padding: 0.25rem 0.5rem;
  border-radius: var(--dsop-rounded-sm);
  font-weight: 600;
  letter-spacing: 0.4px;
}

.atlas-tile__badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--dsop-font-family);
  font-size: 0.625rem;
  font-weight: 800;
  padding: 0.3rem 0.625rem;
  border-radius: var(--dsop-rounded-pill);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
}
.atlas-tile__badge-icon { font-size: 0.75rem; line-height: 1; }
.atlas-tile__badge--live {
  background: var(--dsop-status-live-bg);
  color: var(--dsop-status-live-text);
}
.atlas-tile__badge--pilot {
  background: var(--dsop-status-pilot-bg);
  color: var(--dsop-status-pilot-text);
}
.atlas-tile__badge--planlagt {
  background: var(--dsop-status-planlagt-bg);
  color: var(--dsop-status-planlagt-text);
}

.atlas-tile__body {
  position: relative;
  z-index: 1;
}
.atlas-tile__title {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.6px;
  color: var(--dsop-ink);
  margin: 0 0 var(--dsop-space-xs);
}
.atlas-tile__lede {
  font-size: var(--dsop-font-body-sm);
  line-height: 1.55;
  color: var(--dsop-muted);
  margin: 0;
}
.atlas-tile__stat {
  display: flex;
  gap: 1.25rem;
  margin-top: var(--dsop-space-sm);
  padding-top: var(--dsop-space-sm);
  border-top: 1px solid var(--dsop-border);
  font-size: var(--dsop-font-label);
  color: var(--dsop-muted);
  letter-spacing: 0.3px;
}
.atlas-tile__stat-item {
  display: inline-flex;
  flex-direction: column;
  gap: 0.125rem;
}
.atlas-tile__stat strong {
  display: block;
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: 1rem;
  color: var(--dsop-ink);
  letter-spacing: -0.3px;
  margin-top: 0.125rem;
}

/* ============ BUTTONS (delte CTA-stiler) ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--dsop-space-xs);
  padding: 1rem 1.625rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: var(--dsop-rounded-pill);
  cursor: pointer;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: background 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out, transform 200ms ease-out;
}
.btn:focus-visible { outline: 3px solid var(--dsop-cyan); outline-offset: 3px; }
.btn--primary { background: var(--dsop-ink); color: #fff; }
.btn--primary::after { content: '\2193'; margin-left: 0.125rem; }
.btn--primary:hover { background: var(--dsop-primary); color: #fff; }
.btn--ghost {
  background: var(--dsop-surface);
  color: var(--dsop-ink);
  border-color: var(--dsop-border);
}
.btn--ghost:hover {
  background: var(--dsop-ink);
  color: #fff;
  border-color: var(--dsop-ink);
}

/* ============ HERO — blueprint-grid + asymmetrisk illu ============ */
/* Spec: DESIGN.md v1.1.0 › components › hero
   Referanse: mockup-atlas.html (linje 60-157, 415-446) */
.hero {
  position: relative;
  padding: var(--dsop-space-4xl) 0 var(--dsop-space-3xl);
  background: var(--dsop-mist-pale);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0, 85, 135, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 135, 0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 70% 50%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, black 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0, 85, 135, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 135, 0.025) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: radial-gradient(ellipse at 70% 50%, black 0%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, black 0%, transparent 60%);
  pointer-events: none;
}

.hero__layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: var(--dsop-space-2xl);
  align-items: center;
}
@media (max-width: 900px) {
  .hero { padding: var(--dsop-space-3xl) 0 var(--dsop-space-2xl); }
  .hero__layout { grid-template-columns: 1fr; gap: var(--dsop-space-xl); }
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--dsop-space-xs) var(--dsop-space-sm);
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-pill);
  font-family: var(--dsop-font-mono-family);
  font-size: var(--dsop-font-label);
  font-weight: 500;
  color: var(--dsop-primary);
  letter-spacing: 0.5px;
  margin-bottom: var(--dsop-space-lg);
}
.hero__kicker::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dsop-cyan);
  box-shadow: 0 0 0 4px rgba(91, 192, 201, 0.2);
  animation: dsop-pulse 2s infinite ease-out;
}
@keyframes dsop-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(91, 192, 201, 0.2); }
  50%      { box-shadow: 0 0 0 8px rgba(91, 192, 201, 0); }
}

.hero__title {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: var(--dsop-font-display);
  line-height: 1;
  letter-spacing: -2.5px;
  color: var(--dsop-ink);
  margin: 0 0 var(--dsop-space-md);
  max-width: 16ch;
}
.hero__title em {
  font-style: normal;
  background: var(--dsop-gradient-heading);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.hero__lede {
  font-size: var(--dsop-font-h4);
  line-height: 1.6;
  color: var(--dsop-muted);
  max-width: 32rem;
  margin-bottom: var(--dsop-space-xl);
}

.hero__ctas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Høyreside — illustrasjon som hovedstemme, subtle float */
.hero__illu { position: relative; }
.hero__illu-frame {
  position: relative;
  aspect-ratio: 16 / 12;
  background: var(--dsop-surface);
  border-radius: var(--dsop-rounded-frame);
  box-shadow: var(--dsop-shadow-illu);
  overflow: hidden;
  animation: dsop-float 8s ease-in-out infinite;
}
@keyframes dsop-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.hero__illu-frame object,
.hero__illu-frame img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.hero__illu-frame img { object-fit: cover; }

/* Floating data-pills */
.data-pill {
  position: absolute;
  background: var(--dsop-surface);
  border-radius: 14px;
  padding: 0.875rem 1.125rem;
  box-shadow: var(--dsop-shadow-pill);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--dsop-font-family);
  font-size: 0.8125rem;
  animation: dsop-float-pill 6s ease-in-out infinite;
}
@keyframes dsop-float-pill {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.data-pill__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--dsop-mist-pale);
  display: grid;
  place-items: center;
  color: var(--dsop-primary);
  font-weight: 800;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.data-pill__icon--cyan { background: var(--dsop-cyan); color: var(--dsop-ink); }
.data-pill strong {
  display: block;
  font-weight: 800;
  color: var(--dsop-ink);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: -0.4px;
}
.data-pill em {
  font-style: normal;
  color: var(--dsop-muted);
  font-size: 0.6875rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}

.data-pill--top    { top: -1.25rem;   left: -2rem;  animation-delay: 0s; }
.data-pill--right  { right: -3rem;    top: 30%;     animation-delay: 2s; }
.data-pill--bottom { bottom: -1.5rem; left: 25%;    animation-delay: 4s; }

@media (max-width: 900px) {
  .data-pill--top    { left: 0; }
  .data-pill--right  { right: 0; }
  .data-pill--bottom { left: 0; }
}

/* Respekter prefers-reduced-motion — slå av subtle float-animasjoner */
@media (prefers-reduced-motion: reduce) {
  .hero__illu-frame,
  .data-pill,
  .hero__kicker::before {
    animation: none !important;
  }
}

/* ============ PEOPLE-BAND (Om DSOP-narrativ-divider) ============ */
/* Spec: DESIGN.md v1.1.0 › components › people-band-section
   Referanse: mockup-atlas.html (linje 159-205, 471-484)
   Side 2-illustrasjonen (folkemengden som danner DSOP-bokstavene) til
   høyre, tekst-blokk venstre. Brukes som narrativ-divider mellom
   counter-strip og atlas-grid, og som åpner på Om DSOP-siden. */
.people-band {
  background: var(--dsop-surface);
  padding: var(--dsop-space-2xl) 0 var(--dsop-space-xl);
  position: relative;
}
.people-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--dsop-space-2xl);
  align-items: center;
}
.people-band__text-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--dsop-space-xs);
  font-family: var(--dsop-font-mono-family);
  font-size: var(--dsop-font-label);
  color: var(--dsop-teal-accessible);
  padding: 0.375rem 0.875rem;
  background: var(--dsop-mist-pale);
  border-radius: var(--dsop-rounded-pill);
  margin-bottom: 1.25rem;
  font-weight: 500;
}
.people-band__title {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--dsop-ink);
  margin: 0 0 var(--dsop-space-sm);
}
.people-band__title em {
  font-style: normal;
  background: var(--dsop-gradient-heading);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.people-band__lede {
  font-size: var(--dsop-font-body);
  line-height: 1.65;
  color: var(--dsop-muted);
  max-width: 32rem;
  margin: 0;
}
.people-band__illu {
  background: linear-gradient(135deg, var(--dsop-mist-pale) 0%, var(--dsop-mist) 100%);
  border-radius: var(--dsop-rounded-tile);
  padding: var(--dsop-space-lg);
  box-shadow: 0 20px 50px -20px rgba(0, 85, 135, 0.18);
  overflow: hidden;
}
.people-band__illu object {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

@media (max-width: 900px) {
  .people-band {
    padding: var(--dsop-space-xl) 0 var(--dsop-space-lg);
  }
  .people-band__grid {
    grid-template-columns: 1fr;
    gap: var(--dsop-space-lg);
  }
}

/* ============ SECTION HEADER (delt mellom template-parts) ============ */
/* Felles header-block for seksjoner med kicker + h2 + lede. Pakker
   inn lede-paragrafen så vi slipper å duplisere CSS per template-part. */
.section-header {
  max-width: 48rem;
  margin: 0 auto var(--dsop-space-xl);
  text-align: center;
}
.section-header h2 { margin-bottom: var(--dsop-space-md); }
.section-header__lede {
  color: var(--dsop-muted);
  font-size: var(--dsop-font-body-lg);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 38rem;
}

/* Kicker — label-caps over h2/h1 (DESIGN.md v1.1.0 §Typography). */
.kicker {
  display: inline-block;
  font-size: var(--dsop-font-label);
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--dsop-muted);
  margin: 0 0 var(--dsop-space-sm);
  padding-left: 0.75rem;
  border-left: 2px solid var(--dsop-primary);
  line-height: 1.4;
}

/* ============ PARTNER STRIPE (template-parts/partner-stripe.php) ============ */
/* Spec: DESIGN.md v1.1.0 › §Layout (Partner-logo-stripe) + §Do's and Don'ts
   pkt 6: monokromiser logoer (grayscale + opacity 0.55), hover/fokus løfter
   til full farge. Per KOM-feedback 14.6.2026. Footer-varianten av
   .partner-mono ligger i FOOTER-blokken (mørk bg) og påvirkes ikke — denne
   regelen scopes via .partner-stripe-parent. */
.section--partner-stripe { padding: var(--dsop-space-2xl) 0; }

.partner-stripe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--dsop-space-md) var(--dsop-space-xl);
}
.partner-stripe__item { margin: 0; padding: 0; }

.partner-stripe .partner-mono {
  display: inline-block;
  font-family: var(--dsop-font-family);
  font-weight: 700;
  font-size: var(--dsop-font-body-sm);
  color: var(--dsop-ink);
  letter-spacing: 0.3px;
  padding: var(--dsop-space-xs) var(--dsop-space-sm);
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-pill);
  background: var(--dsop-surface);
  text-decoration: none;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 240ms ease, filter 240ms ease, color 240ms ease,
              border-color 240ms ease, background-color 240ms ease,
              transform 240ms ease;
}
.partner-stripe a.partner-mono:hover,
.partner-stripe a.partner-mono:focus-visible,
.partner-stripe span.partner-mono:hover {
  filter: grayscale(0);
  opacity: 1;
  color: var(--dsop-primary);
  border-color: var(--dsop-primary);
  background: var(--dsop-mist-pale);
  transform: translateY(-1px);
}
.partner-stripe a.partner-mono:focus-visible {
  outline: 3px solid var(--dsop-cyan);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .partner-stripe { gap: var(--dsop-space-sm) var(--dsop-space-md); }
}

/* ============ TEMPLATE PART: sdg-strip ============ */
/* Bærekraft-seksjonen — strip med 7 FN-bærekraftsmål DSOP bidrar til
   (3, 8, 9, 10, 13, 16, 17). Tile bruker offisiell FN SDG-SVG som bilde —
   fargen og ikonet bæres av SVG-en selv. Caption-strip under er sighted-only
   (alt-tekst ligger på <img>) og gir num + navn for kjapp orientering.
   Bruker delt .kicker-klasse fra base — duplikat-CSS unngås.
   Referanse: mockup-atlas.html (linje 324-344, 562-578) */
.baerekraft {
  padding: var(--dsop-space-2xl) 0;
  background: linear-gradient(180deg, var(--dsop-mist-pale) 0%, var(--dsop-surface) 100%);
}
.baerekraft__head {
  max-width: 60rem;
  margin: 0 0 var(--dsop-space-xl);
}
.baerekraft__title {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: var(--dsop-font-h2);
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--dsop-ink);
  margin: 0 0 var(--dsop-space-sm);
  max-width: 36rem;
}
.baerekraft__lede {
  color: var(--dsop-muted);
  font-size: var(--dsop-font-body);
  line-height: 1.65;
  max-width: 38rem;
  margin: 0;
}
.baerekraft__lede p { margin: 0; }
.baerekraft__lede p + p { margin-top: var(--dsop-space-sm); }

.sdg-grid {
  list-style: none;
  padding: 0;
  margin: var(--dsop-space-lg) 0 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--dsop-space-sm);
}
@media (max-width: 768px) {
  .sdg-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .sdg-grid { grid-template-columns: repeat(3, 1fr); }
}

.sdg-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  box-shadow: var(--dsop-shadow-card);
  transition: transform 220ms ease-out, box-shadow 220ms ease-out;
}
.sdg-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--dsop-shadow-card-hover);
}
.sdg-tile__icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Caption-strip — sighted-only quick-read av nummer + navn.
   aria-hidden i markup, så skjermlesere får ren alt-tekst fra <img> i stedet.
   Mørk ink-overlay 78% gir ~10:1 mot hvit tekst (over AAA). */
.sdg-tile__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  background: rgba(10, 37, 64, 0.78);
  color: #fff;
  pointer-events: none;
}
.sdg-tile__num {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: -0.6px;
}
.sdg-tile__name {
  font-size: 0.5625rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  .sdg-tile,
  .sdg-tile:hover { transform: none; transition: none; }
}

/* ============ ATLAS GRID (delt mellom front-page og archive-tjeneste) ============ */
/* Spec: DESIGN.md v1.1.0 › components › atlas-tile
   Referanse: mockup-atlas.html (linje 277-280)
   3-kolonners grid på desktop, 2 på tablet, 1 på mobil. */
.atlas__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dsop-space-lg);
}
@media (max-width: 1024px) {
  .atlas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .atlas__grid { grid-template-columns: 1fr; }
}

/* ============ ARCHIVE: TJENESTE-LISTING ============ */
/* Brukt av: archive-tjeneste.php
   Lettere hero enn front-page (mindre seremoni) + statisk filter-bar
   (JS-filter implementeres senere). */
.archive-hero {
  background: var(--dsop-mist-pale);
  padding: var(--dsop-space-2xl) 0 var(--dsop-space-xl);
  border-bottom: 1px solid var(--dsop-border);
  position: relative;
  overflow: hidden;
}
.archive-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 85, 135, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 135, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 80% 50%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 80% 50%, black 0%, transparent 70%);
  pointer-events: none;
}
.archive-hero > .wrap { position: relative; z-index: 1; }

.archive-hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -1.6px;
  max-width: 22ch;
  margin: 0 0 var(--dsop-space-md);
}
.archive-hero .lede {
  font-size: var(--dsop-font-h4);
  line-height: 1.55;
  color: var(--dsop-muted);
  max-width: 38rem;
  margin: 0;
}

/* Filter-bar — statisk markup nå, JS senere.
   aria-pressed brukes for toggle-state; .is-active speiler aria-pressed=true. */
.archive-filters {
  background: var(--dsop-surface);
  border-bottom: 1px solid var(--dsop-border);
  padding: var(--dsop-space-md) 0;
  position: sticky;
  top: 64px;
  z-index: 40;
}
.archive-filters__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--dsop-space-xs) var(--dsop-space-sm);
  align-items: center;
}
.archive-filters__divider {
  width: 1px;
  height: 1.25rem;
  background: var(--dsop-border);
  margin: 0 var(--dsop-space-xs);
  flex-shrink: 0;
}
.archive-filters__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: inherit;
  font-weight: 600;
  font-size: var(--dsop-font-body-sm);
  color: var(--dsop-ink);
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-pill);
  padding: 0.5rem 0.875rem;
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: background 200ms ease-out, color 200ms ease-out,
              border-color 200ms ease-out, transform 200ms ease-out;
}
.archive-filters__btn:hover {
  border-color: var(--dsop-primary);
  color: var(--dsop-primary);
  background: var(--dsop-mist-pale);
}
.archive-filters__btn:focus-visible {
  outline: 3px solid var(--dsop-cyan);
  outline-offset: 2px;
}
.archive-filters__btn[aria-pressed="true"],
.archive-filters__btn.is-active {
  background: var(--dsop-ink);
  color: #fff;
  border-color: var(--dsop-ink);
}
.archive-filters__btn[aria-pressed="true"]:hover,
.archive-filters__btn.is-active:hover {
  background: var(--dsop-primary);
  border-color: var(--dsop-primary);
  color: #fff;
}
.archive-filters__btn--tax {
  font-family: var(--dsop-font-mono-family);
  font-size: 0.8125rem;
  letter-spacing: 0.3px;
}

.archive-empty {
  text-align: center;
  color: var(--dsop-muted);
  font-size: var(--dsop-font-body-lg);
  padding: var(--dsop-space-2xl) 0;
}

@media (max-width: 768px) {
  .archive-filters { position: static; padding: var(--dsop-space-sm) 0; }
  .archive-hero { padding: var(--dsop-space-xl) 0 var(--dsop-space-lg); }
}

/* ============ SINGLE-TJENESTE — hero + seksjoner ============ */
/* Spec: DESIGN.md v1.1.0 — detalj-side for én tjeneste-CPT.
   Lokal hero (ikke get_template_part for hero-blueprint), seksjons-
   alternering surface ↔ mist-pale, gevinst-grid 2-kolonner, partner-grid
   auto-fill, lenke-liste med type-badge. Brukt av: single-tjeneste.php */

.tjeneste-hero {
  position: relative;
  background: var(--dsop-mist-pale);
  padding: var(--dsop-space-2xl) 0 var(--dsop-space-3xl);
  overflow: hidden;
}
.tjeneste-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0, 85, 135, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 135, 0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 80% 50%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 80% 50%, black 0%, transparent 70%);
  pointer-events: none;
}
.tjeneste-hero > .wrap { position: relative; z-index: 1; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--dsop-space-xs);
  font-family: var(--dsop-font-mono-family);
  font-size: var(--dsop-font-label);
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--dsop-primary);
  text-decoration: none;
  padding: var(--dsop-space-xs) var(--dsop-space-sm);
  border: 1px solid var(--dsop-border);
  background: var(--dsop-surface);
  border-radius: var(--dsop-rounded-pill);
  margin-bottom: var(--dsop-space-xl);
  transition: color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.back-link:hover {
  color: var(--dsop-primary-deep);
  border-color: var(--dsop-primary);
  transform: translateX(-2px);
  text-decoration: none;
}

.tjeneste-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--dsop-space-2xl);
  align-items: center;
}
@media (max-width: 900px) {
  .tjeneste-hero { padding: var(--dsop-space-xl) 0 var(--dsop-space-2xl); }
  .tjeneste-hero__layout { grid-template-columns: 1fr; gap: var(--dsop-space-xl); }
}

.tjeneste-hero__title {
  font-size: var(--dsop-font-h1);
  line-height: 1.1;
  letter-spacing: -1.2px;
  margin: 0 0 var(--dsop-space-md);
  max-width: 18ch;
}
.tjeneste-hero__lede {
  font-size: var(--dsop-font-subheading);
  line-height: 1.5;
  color: var(--dsop-muted);
  max-width: 32rem;
  margin: 0 0 var(--dsop-space-lg);
}

.tjeneste-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dsop-space-md);
  margin-top: var(--dsop-space-md);
}

/* Status-badge — speiler atlas-tile__badge-farger, men brukbar utenfor tile */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--dsop-font-family);
  font-size: var(--dsop-font-label);
  font-weight: 800;
  padding: 0.375rem 0.75rem;
  border-radius: var(--dsop-rounded-pill);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
}
.status-badge__icon { font-size: 0.875rem; line-height: 1; }
.status-badge--live {
  background: var(--dsop-status-live-bg);
  color: var(--dsop-status-live-text);
}
.status-badge--pilot {
  background: var(--dsop-status-pilot-bg);
  color: var(--dsop-status-pilot-text);
}
.status-badge--planlagt {
  background: var(--dsop-status-planlagt-bg);
  color: var(--dsop-status-planlagt-text);
}

/* Gevinst-counter — inline tall i hero-meta */
.gevinst-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: var(--dsop-space-xs) var(--dsop-space-sm);
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-pill);
  box-shadow: var(--dsop-shadow-card);
}
.gevinst-counter__num {
  font-family: var(--dsop-font-family);
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--dsop-primary);
  letter-spacing: -0.4px;
  line-height: 1;
}
.gevinst-counter__unit {
  font-family: var(--dsop-font-family);
  font-weight: 700;
  font-size: var(--dsop-font-body-sm);
  color: var(--dsop-primary);
  letter-spacing: 0.2px;
}
.gevinst-counter__label {
  font-size: var(--dsop-font-label);
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--dsop-muted);
  margin-left: var(--dsop-space-xs);
  padding-left: var(--dsop-space-xs);
  border-left: 1px solid var(--dsop-border);
}

/* Hero-illustrasjon — frame matcher .hero__illu-frame, men uten float-anim
   (detalj-side bør være rolig, ikke konkurrere med forsiden). */
.tjeneste-hero__illu { position: relative; }
.tjeneste-hero__illu-frame {
  position: relative;
  aspect-ratio: 16 / 12;
  background: var(--dsop-surface);
  border-radius: var(--dsop-rounded-frame);
  box-shadow: var(--dsop-shadow-illu);
  overflow: hidden;
}
.tjeneste-hero__illu-frame object {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ============ TJENESTE-SEKSJONER (alternering surface ↔ mist-pale) ============ */
.tjeneste-section {
  padding: var(--dsop-space-3xl) 0;
  background: var(--dsop-surface);
}
.tjeneste-section--mist {
  background: var(--dsop-mist-pale);
}
.tjeneste-section__inner { max-width: 1240px; }
.tjeneste-section h2 {
  margin-top: 0;
  margin-bottom: var(--dsop-space-lg);
  max-width: 28ch;
}

/* Editorial prose-bredde — maks 65 tegn per linje (DESIGN.md §Typography) */
.tjeneste-section__prose {
  max-width: 38rem;
  font-size: var(--dsop-font-body-lg);
  line-height: 1.7;
  color: var(--dsop-ink);
}
.tjeneste-section__prose p { margin: 0 0 var(--dsop-space-md); }
.tjeneste-section__prose p:last-child { margin-bottom: 0; }
.tjeneste-section__prose strong { font-weight: 700; color: var(--dsop-ink); }
.tjeneste-section__prose a {
  color: var(--dsop-primary);
  text-decoration-color: var(--dsop-cyan);
}
.tjeneste-section__prose ul,
.tjeneste-section__prose ol {
  margin: 0 0 var(--dsop-space-md);
  padding-left: var(--dsop-space-lg);
}
.tjeneste-section__prose li + li { margin-top: var(--dsop-space-xs); }

@media (max-width: 768px) {
  .tjeneste-section { padding: var(--dsop-space-2xl) 0; }
}

/* ============ GEVINSTER-GRID (målbare + samfunn) ============ */
.gevinster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--dsop-space-xl);
  margin-top: var(--dsop-space-md);
}
.gevinster-col__title {
  font-size: var(--dsop-font-h4);
  font-weight: 700;
  color: var(--dsop-primary);
  margin: 0 0 var(--dsop-space-md);
  padding-bottom: var(--dsop-space-sm);
  border-bottom: 1px solid var(--dsop-border);
}
.gevinster-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dsop-space-sm);
}
.gevinster-list li {
  position: relative;
  padding-left: var(--dsop-space-lg);
  font-size: var(--dsop-font-body);
  line-height: 1.6;
  color: var(--dsop-ink);
}
.gevinster-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.625rem;
  width: 10px;
  height: 10px;
  background: var(--dsop-cyan);
  border: 2px solid var(--dsop-primary);
  border-radius: 50%;
}

/* ============ FELLESKOMPONENT-LISTE (badges) ============ */
.felleskomp-list {
  list-style: none;
  margin: var(--dsop-space-md) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--dsop-space-sm);
}
.felleskomp-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--dsop-space-xs) var(--dsop-space-md);
  background: var(--dsop-mist);
  color: var(--dsop-primary-deep);
  border-radius: var(--dsop-rounded-pill);
  font-size: var(--dsop-font-label);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ============ PARTNER-GRID (relationship-feltet) ============ */
.partner-grid {
  list-style: none;
  margin: var(--dsop-space-md) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--dsop-space-md);
}
.partner-card {
  background: var(--dsop-surface);
  border: 1px solid var(--dsop-border);
  border-radius: var(--dsop-rounded-md);
  padding: var(--dsop-space-lg);
  box-shadow: var(--dsop-shadow-card);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 240ms ease,
              box-shadow 240ms ease;
}
.partner-card:hover {
  transform: translateY(-2px);
  border-color: var(--dsop-primary);
  box-shadow: var(--dsop-shadow-card-hover);
}
.partner-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.partner-card__link:hover { text-decoration: none; }
.partner-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--dsop-ink);
  margin: 0 0 var(--dsop-space-xs);
  letter-spacing: -0.3px;
}
.partner-card:hover .partner-card__title { color: var(--dsop-primary); }
.partner-card__lede {
  font-size: var(--dsop-font-body-sm);
  line-height: 1.55;
  color: var(--dsop-muted);
  margin: 0;
}

/* ============ RELATERTE-LENKE-LISTE ============ */
.lenke-liste {
  list-style: none;
  margin: var(--dsop-space-md) 0 0;
  padding: 0;
  max-width: 56rem;
  border-top: 1px solid var(--dsop-border);
}
.lenke-liste__item {
  border-bottom: 1px solid var(--dsop-border);
}
.lenke-liste__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--dsop-space-md);
  padding: var(--dsop-space-md) 0;
  text-decoration: none;
  color: var(--dsop-ink);
  transition: color 200ms ease, padding-left 200ms ease;
}
.lenke-liste__link:hover {
  color: var(--dsop-primary);
  padding-left: var(--dsop-space-sm);
  text-decoration: none;
}
.lenke-liste__type {
  font-family: var(--dsop-font-mono-family);
  font-size: var(--dsop-font-label);
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--dsop-teal-accessible);
  padding: 0.25rem 0.625rem;
  background: var(--dsop-mist-pale);
  border-radius: var(--dsop-rounded-sm);
  min-width: 6rem;
  text-align: center;
}
.lenke-liste__tittel {
  font-size: var(--dsop-font-body);
  font-weight: 600;
  line-height: 1.4;
}
.lenke-liste__arrow {
  font-size: 1.125rem;
  color: var(--dsop-primary);
  transition: transform 200ms ease;
}
.lenke-liste__link:hover .lenke-liste__arrow {
  transform: translateX(4px);
}

@media (max-width: 600px) {
  .lenke-liste__link {
    grid-template-columns: 1fr auto;
    gap: var(--dsop-space-xs) var(--dsop-space-sm);
  }
  .lenke-liste__type {
    grid-column: 1 / -1;
    justify-self: start;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-link,
  .partner-card,
  .partner-card:hover,
  .lenke-liste__link,
  .lenke-liste__link:hover,
  .lenke-liste__arrow,
  .lenke-liste__link:hover .lenke-liste__arrow {
    transform: none;
    transition: none;
  }
}