@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
  --navy: #152238;
  --navy-soft: #2b3a52;
  --terracotta: #c6693d;
  --terracotta-text: #a85530;
  --dis: #f4f3f6;
  --line: #e7eaf0;
  --gray: #3a3a3a;
  --gray-mid: #6b6b63;
  --white: #ffffff;
}

html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

/* Author display-rules (t.ex. .fk-form-grid { display:flex }) annars
   vinner över webbläsarens default [hidden]{display:none} — utan detta
   syns "dolda" element med sådana klasser ändå. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: 'Public Sans', Helvetica, Arial, sans-serif;
  background: var(--white);
  color: var(--gray);
  font-size: 16px;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: 'Lora', Georgia, serif;
  color: var(--navy);
  font-weight: 600;
  margin: 0;
}

a {
  color: inherit;
}

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

.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 42px;
}

.kicker {
  display: block;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta-text);
  margin-bottom: 14px;
}

/* Buttons */
.fk-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 8px;
  font-family: 'Public Sans', sans-serif;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.fk-btn--primary {
  background: var(--navy);
  color: #fff;
}

.fk-btn--primary:hover {
  background: var(--navy-soft);
}

.fk-btn--white {
  background: #fff;
  color: var(--navy);
}

.fk-btn--white:hover {
  background: #eceef4;
}

.fk-btn--outline-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid #4c5a76;
}

.fk-btn--outline-light:hover {
  border-color: #fff;
}

.fk-btn--outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--line);
}

.fk-btn--outline:hover {
  border-color: var(--navy);
}

.fk-link {
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  text-decoration: underline;
}

.fk-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 1000;
  background: var(--navy);
  color: #fff;
  padding: 14px 24px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: top 0.15s ease;
}

.fk-skip-link:focus {
  top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fk-form-required-note {
  font-size: 13px;
  color: var(--gray-mid);
  margin: -8px 0 0;
}

.fk-legal-content h2 {
  font-size: 20px;
  margin-top: 40px;
  margin-bottom: 12px;
}

.fk-legal-content p {
  font-size: 16px;
  color: var(--gray);
  line-height: 1.65;
  margin: 0 0 12px;
}

.fk-legal-content .fk-checklist li {
  color: var(--gray);
}

.fk-kommun-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 5px;
  margin-bottom: 15px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #f39e29;
}

.fk-kommun-step {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f39e29;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.fk-kommun-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 280px;
  font-family: 'Public Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--navy);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23152238' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 18px center;
  background-size: 20px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  padding: 18px 52px 18px 24px;
  cursor: pointer;
}

.fk-kommun-select:hover {
  background-color: #eceef4;
}

.fk-kommun-message {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  max-width: 320px;
}

.fk-kommun-select:focus {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@keyframes fk-kommun-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7), 0 8px 24px rgba(0, 0, 0, 0.28);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(255, 255, 255, 0), 0 8px 24px rgba(0, 0, 0, 0.28);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 8px 24px rgba(0, 0, 0, 0.28);
  }
}

.fk-kommun-select.fk-pulse {
  animation: fk-kommun-pulse 2.2s ease-out 1s 3;
}

@media (prefers-reduced-motion: reduce) {
  .fk-kommun-select.fk-pulse {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* Header — 100% bredd (som på dropbox.com), inget centrerat max-bredd-block */
.fk-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  min-height: 86.4px;
  padding: 0 48px 0 40px;
}

.fk-nav-links {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.fk-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.fk-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.fk-hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.fk-hamburger.is-open span:nth-child(2) {
  opacity: 0;
}

.fk-hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.fk-header--bordered {
  border-bottom: 1px solid #cccccc;
}

.fk-logo img {
  height: 43.2px;
  width: auto;
  display: block;
}

.fk-header nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.fk-header nav a:not(.fk-btn) {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  padding: 8px 0;
  margin: -8px 0;
}

.fk-header nav a:not(.fk-btn):hover {
  color: var(--terracotta-text);
}

.fk-header nav a.is-active {
  color: var(--terracotta-text);
}

.fk-sep {
  color: var(--line);
  font-size: 16px;
}

.fk-nav-dropdown {
  position: relative;
}

.fk-nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  background: none;
  border: none;
  padding: 8px 0;
  margin: -8px 0;
  cursor: pointer;
}

.fk-nav-dropdown-toggle:hover,
.fk-nav-dropdown.is-open .fk-nav-dropdown-toggle {
  color: var(--terracotta-text);
}

.fk-nav-dropdown-caret {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform 0.15s ease, margin-top 0.15s ease;
}

.fk-nav-dropdown.is-open .fk-nav-dropdown-caret {
  transform: rotate(-135deg);
  margin-top: 2px;
}

.fk-nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 14px;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 32px -16px rgba(21, 34, 56, 0.25);
  padding: 20px;
  z-index: 20;
}

.fk-header nav .fk-nav-dropdown-menu a {
  display: block;
  padding: 9px 12px 9px 22px;
  margin: 0;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}

.fk-header nav .fk-nav-dropdown-menu a:hover {
  background: var(--dis);
  color: var(--terracotta-text);
}

.fk-header nav .fk-nav-dropdown-menu a.is-active {
  color: var(--terracotta-text);
}

.fk-nav-dropdown.is-open .fk-nav-dropdown-menu {
  display: block;
}

.fk-textsize-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fk-textsize-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  font-family: 'Public Sans', sans-serif;
  border-radius: 6px;
  padding: 3px 9px;
  line-height: 1.4;
  font-size: 13px;
  cursor: pointer;
}

.fk-textsize-btn--lg {
  font-size: 15px;
}

.fk-textsize-btn--xl {
  font-size: 17px;
}

.fk-textsize-btn:hover {
  border-color: var(--navy);
}

.fk-textsize-btn[aria-pressed="true"] {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* Hero — 100% bredd, två fulla paneler (ca 1/3 text, 2/3 media) som dropbox.com */
.fk-hero {
  display: flex;
  background: var(--navy);
  overflow: hidden;
}

.fk-hero-text-panel {
  flex: 0 0 34%;
  padding: 70px 48px;
  background: var(--navy-soft);
}

.fk-hero-media-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.fk-hero h1 {
  color: #fff;
  font-size: 40px;
  line-height: 1.15;
  margin-top: 0;
}

.fk-hero p {
  font-size: 17px;
  color: #c7cede;
  margin-top: 20px;
  line-height: 1.6;
}

.fk-hero .actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 20px;
  margin-top: 42px;
}

.fk-video {
  position: relative;
  width: min(100%, 853px); /* 853px bredd ≈ 480px höjd vid 16:9 — sätter tak så filmen inte fyller ut hela rutan på breda skärmar, som på dropbox.com */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1c1c1c;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35);
}

.fk-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Mörkblå ton (35%) så filmen smälter in mot navy-bakgrunden */
.fk-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(21, 34, 56, 0.35);
  pointer-events: none;
}

/* Diskret men synlig pausknapp — krävs enligt WCAG 2.2.2 för rörligt innehåll som autospelas längre än 5s */
.fk-video-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 34, 56, 0.55);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  z-index: 2;
}

.fk-video-toggle:hover {
  background: rgba(21, 34, 56, 0.8);
}

.fk-video-toggle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Grått block — 100% bredd, som dropbox.com */
.fk-toolblock {
  background: var(--dis);
  padding: 109px 0;
  margin-top: 10px;
  text-align: center;
}

.fk-toolblock h2 {
  font-size: 28px;
}

.fk-toolblock p {
  font-size: 17px;
  color: var(--gray-mid);
  margin: 16px auto 0;
  max-width: 640px;
}

/* Section intro */
.fk-section {
  padding: 80px 0;
}

.fk-section--tight {
  padding: 56px 0;
}

.fk-section-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  text-align: left;
  margin: 0 0 78px;
}

.fk-section-intro-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}

.fk-section-intro h2 {
  font-size: 32px;
  margin-top: 12px;
}

.fk-section-intro p {
  font-size: 17px;
  color: var(--gray-mid);
  margin-top: 16px;
}

/* Tjänstepaketets fyra delar — kopierat från nadio.se/tjanstepaketet (zigzag text+bild) */
.fk-module-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--dis);
  border-radius: 16px;
  overflow: hidden;
}

.fk-module-row + .fk-module-row {
  margin-top: 64px;
}

.fk-module-text {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fk-module-row h3 {
  font-size: 28px;
  margin-bottom: 12px;
}

.fk-module-desc {
  font-size: 16px;
  color: #42474d;
  line-height: 1.6;
}

.fk-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
  padding-left: 0;
  list-style: none;
}

.fk-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--gray);
}

.fk-check {
  color: var(--terracotta);
  font-weight: 800;
  flex-shrink: 0;
}

.fk-module-media img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
}

/* Closing CTA */
.fk-closing {
  background: var(--navy);
  padding: 90px 0;
  text-align: center;
}

.fk-closing h2 {
  color: #fff;
  font-size: 34px;
  max-width: 600px;
  margin: 0 auto;
}

.fk-closing p {
  color: #c7cede;
  font-size: 17px;
  margin: 20px auto 0;
  max-width: 480px;
}

.fk-closing .actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 36px;
}

/* Sidfot — samma innehåll som nadio.se, men 100% bredd */
.fk-footer {
  background: var(--navy-soft);
  padding: 64px 0;
}

.fk-footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}

.fk-footer-brand img {
  height: 28px;
  width: auto;
  display: block;
}

.fk-footer-brand p {
  font-size: 14px;
  color: #c7cede;
  margin-top: 16px;
  max-width: 260px;
  line-height: 1.6;
}

.fk-footer h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8d99b5;
  margin-bottom: 14px;
}

.fk-footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fk-footer-links a {
  font-size: 15px;
  color: #c7cede;
  text-decoration: none;
  padding: 6px 0;
  margin: -6px 0;
}

.fk-footer-links a:hover {
  color: #fff;
}

.fk-social-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  margin: -6px 0;
}

.fk-social-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* FAQ */
.fk-faq-section {
  padding-top: 45px;
}

.fk-page-title {
  font-size: 36px;
  margin: 24px 0 40px;
}

.fk-faq-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 60px;
  align-items: start;
}

.fk-lead {
  font-size: 17px;
  color: var(--gray-mid);
  line-height: 1.6;
  margin: 8px 0 32px;
}

.fk-kommun-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin-top: 16px;
  padding-left: 0;
  list-style: none;
  font-size: 15px;
  color: var(--gray);
}

.fk-faq-list h2 {
  font-size: 20px;
  margin-bottom: 20px;
}

.fk-faq-item {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.fk-faq-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.fk-faq-item h3 {
  font-size: 17px;
  margin-bottom: 8px;
}

.fk-faq-item p {
  font-size: 15px;
  color: var(--gray-mid);
  line-height: 1.6;
}

.fk-contact-box {
  background: var(--dis);
  border-radius: 16px;
  padding: 32px;
}

.fk-contact-box h2,
.fk-aside h2 {
  font-size: 20px;
}

.fk-contact-box p,
.fk-aside p {
  font-size: 14.5px;
  color: var(--gray-mid);
  margin-top: 8px;
  line-height: 1.6;
}

.fk-form-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.fk-form-grid label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}

.fk-form-grid input,
.fk-form-grid textarea,
.fk-form-grid select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: 'Public Sans', sans-serif;
  font-size: 15px;
  color: var(--gray);
  box-shadow: 0 2px 4px rgba(21, 34, 56, 0.08);
  background: #fff;
}

.fk-form-grid textarea {
  min-height: 100px;
  resize: vertical;
}

.fk-honeypot {
  position: absolute;
  left: -5000px;
}

.fk-form-narrow {
  max-width: 720px;
}

.fk-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.fk-checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
}

.fk-checkbox-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex-shrink: 0;
  cursor: pointer;
}

.fk-checkbox-field label {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-mid);
  line-height: 1.6;
}

.fk-required {
  color: var(--terracotta);
}

.fk-form-hint {
  font-size: 13px;
  color: var(--gray-mid);
  margin: -10px 0 0;
}

.fk-form-status {
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 14.5px;
  line-height: 1.6;
  border-left: 4px solid var(--navy);
  background: var(--dis);
  color: var(--gray);
}

.fk-form-status--error {
  border-left-color: var(--terracotta);
}

.fk-form-status a {
  color: var(--navy);
  text-decoration: underline;
}

.fk-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.fk-progress {
  display: flex;
  gap: 8px;
  margin: 24px 0 8px;
}

.fk-progress__step {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
}

.fk-progress__step--done {
  background: var(--navy);
}

.fk-progress__step--active {
  background: var(--terracotta);
}

.fk-chapter-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray);
  margin-bottom: 32px;
}

.fk-chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}

.fk-invite-form {
  margin-bottom: 24px;
}

.fk-perspective-list {
  margin-top: 32px;
  border-top: 1px solid var(--line);
}

.fk-perspective-item {
  border-bottom: 1px solid var(--line);
}

.fk-perspective-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 32px 20px 0;
  position: relative;
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--navy);
}

.fk-perspective-item summary::-webkit-details-marker {
  display: none;
}

.fk-perspective-item summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 18px;
  font-size: 24px;
  color: var(--terracotta);
  line-height: 1;
}

.fk-perspective-item[open] summary::after {
  content: '\2212';
}

.fk-perspective-body {
  padding: 0 0 24px;
}

.fk-perspective-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  align-items: start;
}

.fk-perspective-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
  display: block;
}

.fk-perspective-body p {
  font-size: 15.5px;
  color: var(--gray);
  line-height: 1.7;
  margin: 0 0 14px;
}

.fk-perspective-body p:last-child {
  margin-bottom: 0;
}

.fk-kartlaggning-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fk-kartlaggning-row {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.fk-kartlaggning-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.fk-kartlaggning-omrade {
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  margin-bottom: 10px;
}

.fk-kartlaggning-betyg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.fk-kartlaggning-betyg label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-mid);
  cursor: pointer;
}

.fk-kartlaggning-betyg input[type="radio"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.fk-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 32px;
}

.fk-steps-item {
  position: relative;
  padding-top: 8px;
}

.fk-steps-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--terracotta);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 16px;
}

.fk-steps-item h3 {
  font-size: 17px;
  color: var(--navy);
  margin: 0 0 8px;
}

.fk-steps-item p {
  font-size: 15px;
  color: var(--gray-mid);
  line-height: 1.6;
  margin: 0;
}

/* Responsive — hero-panelernas fördelning ändras i tre steg (kopierat från dropbox.com):
   ≥1440px: text 34% / media 66%, generöst utrymme
   901–1439px: text 50% / media 50%, jämnare balans
   ≤900px: staplat, full bredd var
   OBS: videorutans egen padding (48px) är INTE stegvis som fördelningen ovan —
   uppmätt på dropbox.com är den konstant 48px hela vägen ner till 480px, och
   växlar först under 480px till 24px. Det som förändras med bredden är hur stor
   ANDEL av rutan videon fyller (rutan krymper/växer, paddingen ligger still). */
@media (max-width: 1439px) {
  .fk-hero-text-panel {
    flex: 0 0 50%;
    padding: 56px 40px;
  }

  .fk-hero-media-panel {
    flex: 0 0 50%;
  }
}

@media (max-width: 700px) {
  .fk-form-row {
    grid-template-columns: 1fr;
  }

  .fk-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .fk-footer-brand {
    grid-column: 1 / -1;
  }

  .fk-section-intro {
    grid-template-columns: 1fr;
  }

  .fk-section-intro-img {
    order: 1;
  }

  .fk-module-row {
    grid-template-columns: 1fr;
  }

  .fk-perspective-layout {
    grid-template-columns: 1fr;
  }

  .fk-steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .fk-module-row > div {
    order: 0;
  }

  .fk-module-row > .fk-module-media {
    order: 1;
    aspect-ratio: 5 / 4;
  }

  .fk-module-media img {
    min-height: 0;
  }

  .fk-module-row + .fk-module-row {
    margin-top: 40px;
  }

  .fk-module-text {
    padding: 28px;
  }
}

@media (max-width: 900px) {
  .fk-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    padding: 24px 40px;
    border-top: 1px solid var(--line);
    box-shadow: 0 16px 24px -16px rgba(0, 0, 0, 0.2);
  }

  .fk-nav-links.is-open {
    display: flex;
  }

  .fk-nav-links .fk-sep {
    display: none;
  }

  .fk-nav-dropdown {
    width: 100%;
  }

  .fk-nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .fk-nav-dropdown-menu {
    display: none;
    position: static;
    margin-top: 8px;
    min-width: 0;
    border: none;
    box-shadow: none;
    padding: 0 0 0 16px;
  }

  .fk-nav-dropdown.is-open .fk-nav-dropdown-menu {
    display: block;
  }

  .fk-hamburger {
    display: flex;
  }

  .fk-faq-layout {
    grid-template-columns: 1fr;
  }

  .fk-hero {
    flex-direction: column;
  }

  .fk-hero-text-panel {
    flex: none;
    width: 100%;
    padding: 48px 32px 32px;
  }

  .fk-hero-media-panel {
    flex: none;
    width: 100%;
  }

  .fk-hero h1 {
    font-size: 32px;
  }

  .fk-header {
    padding: 0 32px 0 40px;
  }
}

@media (max-width: 600px) {
  .wrap {
    padding: 0 24px;
  }

  .fk-header {
    padding: 0 24px 0 40px;
  }

  .fk-hero-text-panel {
    padding: 40px 24px 24px;
  }
}

/* Kommunvalet i hero:n — full bredd med 16px sidomarginal under 768px */
@media (max-width: 768px) {
  .fk-hero-text-panel {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Videorutans padding — exakt tröskel uppmätt på dropbox.com (48px ända ner till 480px) */
@media (max-width: 480px) {
  .fk-hero-media-panel {
    padding: 24px;
  }
}