/* ==========================================================================
   Akutelektrikern.se — Shared styles v1
   Mörk marinblå + gul accent. Akut el-positionering.
   Återanvänder beprövade strukturmönster från akutrörmokare.se (sticky CTA,
   formulär, dropdowns) men med eget mörkt designspråk enligt mockups.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Mörk bas */
  --navy:        #0e2238;   /* djupaste bakgrund (hero, footer) */
  --navy-2:      #12283f;   /* sektionsbakgrund mörk */
  --navy-3:      #1a3d6e;   /* mellanblå (kort, accenter) */
  --navy-line:   #24405f;   /* kantlinjer på mörkt */

  /* Gul accent (el) */
  --yellow:      #f5b800;
  --yellow-2:    #ffc928;   /* ljusare hover */
  --yellow-deep: #e0a500;
  --amber-text:  #8a6300;   /* gul/guld TEXT på ljus bakgrund – WCAG AA (5.4:1 på vit) */

  /* Ljusa sektioner */
  --paper:       #ffffff;
  --paper-2:     #f7f8fa;   /* ljusgrå sektion */
  --paper-3:     #eef1f5;

  /* Text */
  --ink:         #0e1b2a;   /* mörk text på ljust */
  --ink-2:       #2e3f52;   /* brödtext */
  --ink-3:       #55657a;   /* sekundär */
  --on-dark:     #ffffff;   /* text på mörkt */
  --on-dark-2:   rgba(255,255,255,0.78);
  --on-dark-3:   rgba(255,255,255,0.55);

  --border:      #e2e6ec;
  --warn:        #d94535;
  --ok:          #1f9d57;

  --serif: 'Fraunces', 'Instrument Serif', Georgia, serif;
  --sans:  'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;

  --shadow-card: 0 10px 30px rgba(14,34,56,0.10);
  --shadow-pop:  0 18px 44px rgba(14,34,56,0.22);
  --r:   14px;
  --r-sm: 9px;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ───────────────────────── NAVBAR ───────────────────────── */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 68px;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background 0.3s, box-shadow 0.3s;
}
#navbar.scrolled { background: #0a1a2c; box-shadow: 0 2px 16px rgba(0,0,0,0.35); }
.nav-wrap {
  max-width: 1140px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem;
  padding: 0 2rem;
}

/* Logo: blixt + ordmärke */
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.nav-logo-mark {
  width: 38px; height: 38px; flex-shrink: 0;
  background: linear-gradient(150deg, var(--yellow) 0%, var(--yellow-deep) 100%);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(245,184,0,0.35);
}
.nav-logo-mark svg { display: block; }
.nav-logo-name {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.18rem;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.nav-logo-name b { color: var(--yellow); font-weight: 800; }
.nav-logo-sub {
  display: block;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  margin-top: 3px;
}

/* Nav links */
.nav-menu { display: flex; align-items: center; gap: 1.9rem; margin-left: auto; }
.nav-menu > a {
  font-size: 0.9rem; font-weight: 500;
  color: #fff; text-decoration: none;
  opacity: 0.82; transition: opacity 0.2s;
  white-space: nowrap; padding: 0.5rem 0;
}
.nav-menu > a:hover { opacity: 1; }

/* Dropdown */
.nav-drop { position: relative; }
.nav-drop-trigger {
  font-size: 0.9rem; font-weight: 500;
  color: #fff; opacity: 0.82;
  background: none; border: none; font-family: inherit; cursor: pointer;
  white-space: nowrap; padding: 0.5rem 0;
  display: inline-flex; align-items: center; gap: 0.35rem;
  transition: opacity 0.2s;
}
.nav-drop-trigger:hover, .nav-drop-trigger:focus { opacity: 1; outline: none; }
.nav-drop-trigger::after {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px); opacity: 0.7;
  transition: transform 0.2s; margin-left: 2px;
}
.nav-drop[data-open="true"] .nav-drop-trigger::after { transform: rotate(-135deg) translate(-2px,-2px); }
.nav-drop-panel {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-pop); padding: 0.5rem; min-width: 250px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 50;
}
.nav-drop-panel::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; background: transparent; }
@media (hover: hover) {
  .nav-drop:hover .nav-drop-panel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
}
.nav-drop[data-open="true"] .nav-drop-panel,
.nav-drop:focus-within .nav-drop-panel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-drop-panel a {
  display: block; padding: 0.6rem 0.9rem; font-size: 0.88rem; color: var(--ink);
  text-decoration: none; border-radius: 7px; transition: background 0.15s, color 0.15s;
}
.nav-drop-panel a:hover, .nav-drop-panel a:focus { background: var(--paper-2); color: var(--navy-3); outline: none; }
.nav-drop-panel-title {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-3); padding: 0.65rem 0.9rem 0.3rem; font-weight: 700;
}
.nav-drop-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }

/* Nav phone button (gult — alltid synligt) */
.nav-phone {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
  background: var(--yellow); color: var(--navy);
  font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em;
  padding: 0.6rem 1.15rem; border-radius: 9px; text-decoration: none;
  box-shadow: 0 4px 14px rgba(245,184,0,0.3);
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}
.nav-phone:hover { background: var(--yellow-2); transform: translateY(-1px); }
.nav-phone svg { flex-shrink: 0; }
.nav-phone .nav-phone-sub { display: none; }

/* Mobile menu btn */
.nav-mobile-btn { display: none; background: none; border: none; color: #fff; cursor: pointer; padding: 0.5rem; opacity: 0.85; }
.nav-mobile-btn:hover { opacity: 1; }
.nav-mobile-btn svg { display: block; }

@media (max-width: 940px) {
  .nav-menu { display: none; }
  .nav-mobile-btn { display: flex; }
  .nav-wrap { padding: 0 1.1rem; }
  #navbar.menu-open .nav-menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; top: 68px; left: 0; right: 0;
    background: #0a1a2c; padding: 0.5rem 1.5rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    max-height: calc(100vh - 68px); overflow-y: auto;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  }
  #navbar.menu-open .nav-menu > a {
    padding: 0.85rem 0; border-bottom: 1px solid rgba(255,255,255,0.07); opacity: 0.95;
  }
  #navbar.menu-open .nav-drop { border-bottom: 1px solid rgba(255,255,255,0.07); }
  #navbar.menu-open .nav-drop-trigger { padding: 0.85rem 0; width: 100%; justify-content: space-between; }
  #navbar.menu-open .nav-drop-panel {
    position: static; transform: none; opacity: 1; pointer-events: auto;
    box-shadow: none; border: none; background: transparent; min-width: 0;
    padding: 0 0 0.6rem 0.5rem;
  }
  #navbar.menu-open .nav-drop-panel a { color: var(--on-dark-2); padding: 0.5rem 0.4rem; }
  #navbar.menu-open .nav-drop-panel a:hover { background: rgba(255,255,255,0.06); color: #fff; }
  #navbar.menu-open .nav-drop-panel-title { color: var(--on-dark-3); }
  #navbar.menu-open .nav-drop-panel-grid { grid-template-columns: 1fr; }
  .nav-phone .nav-phone-label { display: none; }
}
@media (max-width: 420px) {
  .nav-phone { padding: 0.55rem 0.8rem; font-size: 0.88rem; }
  .nav-logo-name { font-size: 1.05rem; }
}

/* ───────────────────────── HERO ───────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background: var(--navy);
  padding: 9rem 2rem 4rem;
}
.hero::before {
  /* subtil elektrisk glöd uppe till höger */
  content: ''; position: absolute; top: -10%; right: -5%;
  width: 60%; height: 80%;
  background: radial-gradient(ellipse at center, rgba(245,184,0,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.hero-inner { max-width: 1140px; margin: 0 auto; position: relative; z-index: 2; }

.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center;
}
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; gap: 2rem; } }

.badge-row { display: flex; gap: 0.6rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.42rem 0.95rem; border-radius: 2rem;
}
.badge-akut { background: var(--warn); color: #fff; }
.badge-akut .badge-bolt { width: 11px; height: 11px; }
.badge-calm { background: rgba(255,255,255,0.08); color: var(--on-dark-2); border: 1px solid rgba(255,255,255,0.14); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: bdot 1.4s ease-in-out infinite; }
.badge-calm .badge-dot { animation: none; opacity: 0.8; }
@keyframes bdot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  line-height: 1.04; letter-spacing: -0.02em;
  color: #fff; margin-bottom: 1.25rem;
}
.hero h1 .accent { color: var(--yellow); }
.hero-lead {
  font-size: 1.1rem; color: var(--on-dark-2);
  max-width: 30rem; line-height: 1.65; margin-bottom: 1.9rem; font-weight: 400;
}

/* USP-rad (4 punkter med ikon) */
.hero-usps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem;
  margin-bottom: 2rem; max-width: 34rem;
}
@media (max-width: 560px) { .hero-usps { grid-template-columns: repeat(2,1fr); gap: 1rem 0.9rem; } }
.hero-usp { display: flex; flex-direction: column; gap: 0.45rem; }
.hero-usp-ico { color: var(--yellow); }
.hero-usp-t { font-size: 0.82rem; font-weight: 700; color: #fff; line-height: 1.3; }
.hero-usp-d { font-size: 0.74rem; color: var(--on-dark-3); line-height: 1.4; }

/* Säkerhetsrad i hero (112) */
.hero-safety {
  display: flex; align-items: flex-start; gap: 0.6rem;
  background: rgba(217,69,53,0.12); border: 1px solid rgba(217,69,53,0.35);
  border-radius: var(--r-sm); padding: 0.7rem 0.95rem; margin-bottom: 1.75rem;
  font-size: 0.85rem; line-height: 1.45; color: #ffd9d3; max-width: 34rem;
}
.hero-safety svg { color: #ff8a7a; flex-shrink: 0; margin-top: 1px; }
.hero-safety strong { color: #fff; font-weight: 700; }

/* ── Hero CTA: primär knapp (form-first) + trygghetsrad ── */
.cta-stack { display: flex; flex-direction: column; gap: 0.9rem; max-width: 34rem; }
.cta-primary {
  display: flex; align-items: center; gap: 0.9rem; text-decoration: none;
  background: var(--yellow); border-radius: var(--r); padding: 1.05rem 1.4rem;
  box-shadow: 0 10px 30px rgba(245,184,0,0.30);
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.cta-primary:hover { transform: translateY(-2px); background: var(--yellow-2); box-shadow: 0 14px 38px rgba(245,184,0,0.42); }
.cta-primary-ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 11px; background: rgba(14,34,56,0.12); display: flex; align-items: center; justify-content: center; color: var(--navy); }
.cta-primary-text { flex: 1; }
.cta-primary-t { display: block; font-size: 1.15rem; font-weight: 800; color: var(--navy); line-height: 1.15; letter-spacing: -0.01em; }
.cta-primary-d { display: block; font-size: 0.82rem; font-weight: 600; color: rgba(14,34,56,0.72); margin-top: 0.2rem; }
.cta-primary-arrow { color: var(--navy); flex-shrink: 0; }
.cta-reassure { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--on-dark-2); }
.cta-reassure svg { color: var(--yellow); flex-shrink: 0; }

/* ── Hero inline form-card (huvudkonvertering ovanför viklinjen) ── */
.hero-form-card {
  background: #fff; border-radius: var(--r); box-shadow: var(--shadow-pop);
  padding: 1.5rem; border: 1px solid rgba(255,255,255,0.6);
}
.hero-form-head { margin-bottom: 1.1rem; }
.hero-form-badge {
  display: inline-flex; align-items: center; gap: 0.4rem; background: var(--warn); color: #fff;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.3rem 0.75rem; border-radius: 1rem; margin-bottom: 0.75rem;
}
.hero-form-title { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 0.35rem; }
.hero-form-sub { font-size: 0.86rem; color: var(--ink-3); line-height: 1.45; }
#hform { display: flex; flex-direction: column; gap: 0.7rem; }
.hfg { display: flex; flex-direction: column; gap: 0.3rem; }
.hfg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.hfg label { font-size: 0.76rem; font-weight: 700; color: var(--ink-2); }
.hfg-opt { font-weight: 400; color: var(--ink-3); }
.hfg input, .hfg select {
  font-family: var(--sans); font-size: 0.98rem; color: var(--ink);
  background: var(--paper-2); border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: 0.7rem 0.85rem; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; outline: none; width: 100%;
  -webkit-appearance: none;
}
.hfg input::placeholder { color: var(--ink-3); opacity: 0.9; }
.hfg input:focus, .hfg select:focus { border-color: var(--yellow-deep); background: #fff; box-shadow: 0 0 0 3px rgba(245,184,0,0.18); }
.hero-form-btn {
  margin-top: 0.25rem; background: var(--navy); color: #fff; font-family: var(--sans);
  font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em;
  border: none; border-radius: var(--r-sm); padding: 0.95rem 1.5rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  transition: background 0.2s, transform 0.15s;
}
.hero-form-btn:hover { background: #163150; transform: translateY(-1px); }
.hero-form-btn svg { flex-shrink: 0; }
.hero-form-trust { display: flex; justify-content: center; margin-top: 0.1rem; }
.hero-form-trust span { display: flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; color: var(--ink-3); }
.hero-form-trust svg { color: var(--ok); }
#hform-ok {
  display: none; background: rgba(31,157,87,0.1); border: 1px solid rgba(31,157,87,0.35);
  border-radius: var(--r-sm); padding: 0.9rem 1rem; font-size: 0.9rem; color: #1f7d47; line-height: 1.5; margin-top: 0.3rem;
}

/* Hero höger: bild + problemlista-kort */
.hero-visual { position: relative; }
.hero-photo {
  width: 100%; aspect-ratio: 4 / 3.4; border-radius: var(--r);
  background:
    linear-gradient(160deg, rgba(14,34,56,0.0) 30%, rgba(14,34,56,0.55) 100%),
    radial-gradient(circle at 70% 30%, rgba(245,184,0,0.18), transparent 55%),
    var(--navy-2);
  border: 1px solid var(--navy-line);
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: 1.25rem;
}
.hero-photo-note {
  font-size: 0.72rem; color: var(--on-dark-3); display: flex; align-items: center; gap: 0.4rem;
}
.hero-photo-bolt {
  position: absolute; top: 18%; left: 50%; transform: translateX(-50%);
  opacity: 0.16; color: var(--yellow);
}
.hero-problem-card {
  position: absolute; bottom: -10px; right: -10px;
  background: #fff; border-radius: var(--r); box-shadow: var(--shadow-pop);
  padding: 1.1rem 1.25rem; max-width: 18rem;
}
@media (max-width: 920px) {
  .hero-problem-card { position: static; max-width: none; margin-top: 1rem; }
  .hero-photo { aspect-ratio: 16 / 9; }
}
.hero-problem-title { font-size: 0.82rem; font-weight: 700; color: var(--ink); margin-bottom: 0.7rem; }
.hero-problem-list { display: flex; flex-direction: column; gap: 0.5rem; }
.hero-problem-item { display: flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; color: var(--ink-2); }
.hero-problem-item svg { color: var(--yellow-deep); flex-shrink: 0; }

/* ───────────────────────── TRUST STRIP ───────────────────────── */
.trust-strip { background: var(--paper-2); border-bottom: 1px solid var(--border); }
.trust-strip.is-dark { background: var(--navy-2); border-bottom: 1px solid var(--navy-line); }
.trust-strip-wrap {
  max-width: 1140px; margin: 0 auto; padding: 1.5rem 2rem;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem;
}
.trust-strip.cols-4 .trust-strip-wrap { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .trust-strip-wrap { grid-template-columns: repeat(2,1fr); gap: 1.25rem; } }
.trust-strip-item { display: flex; align-items: center; gap: 0.7rem; }
.trust-strip-ico {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,184,0,0.14); color: var(--yellow-deep);
}
.trust-strip.is-dark .trust-strip-ico { background: rgba(245,184,0,0.16); color: var(--yellow); }
.trust-strip-text { font-size: 0.8rem; line-height: 1.35; color: var(--ink-3); }
.trust-strip-text strong { display: block; font-size: 0.86rem; font-weight: 700; color: var(--ink); margin-bottom: 1px; }
.trust-strip.is-dark .trust-strip-text { color: var(--on-dark-3); }
.trust-strip.is-dark .trust-strip-text strong { color: #fff; }

/* ───────────────────────── SECTIONS ───────────────────────── */
section { padding: 5rem 2rem; }
.wrap { max-width: 1140px; margin: 0 auto; }
.wrap-narrow { max-width: 760px; margin: 0 auto; }

.s-tag {
  font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--amber-text); font-weight: 700; margin-bottom: 0.85rem;
}
.s-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.85rem, 4vw, 2.9rem); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--ink); margin-bottom: 1rem;
}
.s-title .accent { color: var(--amber-text); }
.s-lead { font-size: 1.02rem; color: var(--ink-2); max-width: 40rem; line-height: 1.7; }

.sec-dark { background: var(--navy); }
.sec-dark .s-title, .is-dark .s-title { color: #fff; }
.sec-dark .s-title .accent, .is-dark .s-title .accent { color: var(--yellow); }
.sec-dark .s-lead, .is-dark .s-lead { color: var(--on-dark-2); }
.sec-dark .s-tag, .is-dark .s-tag { color: var(--yellow); }
.sec-paper2 { background: var(--paper-2); }

/* Reveal */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.rv.on { opacity: 1; transform: none; }
.d1 { transition-delay: 0.08s; } .d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; } .d4 { transition-delay: 0.32s; }
.d5 { transition-delay: 0.40s; }

/* ── Problem-kort grid ("Vi hjälper dig med…") ── */
.prob-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-top: 3rem;
}
@media (max-width: 1000px) { .prob-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px)  { .prob-grid { grid-template-columns: repeat(2,1fr); gap: 0.75rem; } }
.prob-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 1.4rem 1rem; text-align: center; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.prob-card:hover { border-color: var(--yellow); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.prob-card-ico { color: var(--navy-3); }
.prob-card:hover .prob-card-ico { color: var(--yellow-deep); }
.prob-card-t { font-size: 0.84rem; font-weight: 600; color: var(--ink); line-height: 1.35; }

/* ── Steg (Tre steg till hjälp) ── */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; position: relative; }
@media (max-width: 760px) { .steps3 { grid-template-columns: 1fr; gap: 1.5rem; } }
.step3 { text-align: center; display: flex; flex-direction: column; align-items: center; }
.step3-ico-wrap { position: relative; margin-bottom: 1.1rem; }
.step3-ico {
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--paper-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--navy);
}
.sec-dark .step3-ico { background: rgba(255,255,255,0.04); border-color: var(--navy-line); color: #fff; }
.step3-num {
  position: absolute; top: -6px; right: -6px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--yellow); color: var(--navy);
  font-size: 0.9rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--navy);
}
.sec-paper2 .step3-num, body .step3-num { border-color: #fff; }
.sec-dark .step3-num { border-color: var(--navy); }
.step3-t { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--ink); margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.sec-dark .step3-t { color: #fff; }
.step3-d { font-size: 0.9rem; color: var(--ink-3); line-height: 1.6; max-width: 17rem; }
.sec-dark .step3-d { color: var(--on-dark-3); }

/* ───────────────────────── FORM ───────────────────────── */
.form-sec { background: var(--paper); }
.form-sec.is-dark { background: var(--navy); }
.form-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; align-items: start; margin-top: 3rem; }
@media (max-width: 860px) { .form-layout { grid-template-columns: 1fr; gap: 2.25rem; } }

/* Vänster: ring-direkt + löften */
.form-call-block {
  background: var(--navy); border-radius: var(--r); padding: 1.5rem; margin-bottom: 1.75rem;
}
.form-sec.is-dark .form-call-block { background: var(--navy-2); border: 1px solid var(--navy-line); }
.form-call-block-title { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--yellow); font-weight: 700; margin-bottom: 0.9rem; }
.form-usp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.form-usp-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: var(--on-dark-2); line-height: 1.4; }
.form-usp-list svg { color: var(--yellow); flex-shrink: 0; margin-top: 2px; }
.form-call-phone {
  display: flex; align-items: center; gap: 0.8rem; text-decoration: none;
  background: var(--yellow); border-radius: var(--r-sm); padding: 0.85rem 1.1rem;
  transition: background 0.2s, transform 0.15s;
}
.form-call-phone:hover { background: var(--yellow-2); transform: translateY(-1px); }
.form-call-phone-ico { width: 34px; height: 34px; border-radius: 8px; background: rgba(14,34,56,0.12); display: flex; align-items: center; justify-content: center; color: var(--navy); flex-shrink: 0; }
.form-call-phone-num { font-size: clamp(1.25rem, 6vw, 1.45rem); font-weight: 800; color: var(--navy); line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.form-call-phone-sub { font-size: 0.74rem; font-weight: 600; color: rgba(14,34,56,0.7); margin-top: 0.3rem; display: block; }

.form-side-lbl { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 700; margin-bottom: 1.25rem; }
.form-sec.is-dark .form-side-lbl { color: var(--on-dark-3); }
.promise-list { display: flex; flex-direction: column; gap: 1.15rem; }
.promise { display: flex; gap: 0.8rem; align-items: flex-start; }
.promise-dot { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: rgba(245,184,0,0.16); color: var(--yellow-deep); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.promise p { font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; }
.form-sec.is-dark .promise p { color: var(--on-dark-2); }
.promise p strong { color: var(--ink); font-weight: 700; }
.form-sec.is-dark .promise p strong { color: #fff; }

/* Formulärkort */
.form-card {
  background: var(--navy); border-radius: var(--r); padding: 1.75rem;
  box-shadow: var(--shadow-pop);
}
.form-card-head { text-align: center; margin-bottom: 1.4rem; }
.form-card-tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--warn); color: #fff; font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 0.3rem 0.8rem; border-radius: 1rem;
  margin-bottom: 0.9rem;
}
.form-card-num { font-size: clamp(1.7rem,4vw,2.2rem); font-weight: 800; color: var(--yellow); line-height: 1; font-variant-numeric: tabular-nums; }
.form-card-title { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.01em; color: #fff; }
.form-card-sub { font-size: 0.85rem; color: var(--on-dark-2); margin-top: 0.45rem; }
.form-card-divider { display: flex; align-items: center; gap: 0.85rem; color: var(--on-dark-3); margin: 1.3rem 0; }
.form-card-divider::before, .form-card-divider::after { content: ''; height: 1px; flex: 1; background: rgba(255,255,255,0.13); }
.form-card-divider span { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }

form { display: flex; flex-direction: column; gap: 0.85rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }
.fg { display: flex; flex-direction: column; gap: 0.35rem; }
.fg label { font-size: 0.78rem; font-weight: 600; color: var(--on-dark-2); }
.fg-opt { font-weight: 400; color: var(--on-dark-3); }
.fg input, .fg select, .fg textarea {
  font-family: var(--sans); font-size: 0.95rem; color: #fff;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-sm); padding: 0.7rem 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; outline: none; width: 100%;
  -webkit-appearance: none;
}
.fg input::placeholder, .fg textarea::placeholder { color: rgba(255,255,255,0.55); }
.fg select { color: #fff; }
.fg select option { color: #111; }
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: var(--yellow); background: rgba(255,255,255,0.09); box-shadow: 0 0 0 3px rgba(245,184,0,0.16);
}
.fg textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.email-err { display: none; font-size: 0.8rem; color: #ffb3aa; margin-top: -0.3rem; }

.fg-consent { flex-direction: row; align-items: flex-start; gap: 0.55rem; margin-top: 0.15rem; }
.fg-consent input { width: auto; margin-top: 0.25rem; accent-color: var(--yellow); }
.fg-consent label { font-size: 0.76rem; font-weight: 400; color: var(--on-dark-3); line-height: 1.45; }
.fg-consent a { color: var(--yellow); }

.form-sub {
  background: var(--yellow); color: var(--navy); font-family: var(--sans);
  font-size: 1rem; font-weight: 800; padding: 0.95rem 2rem; letter-spacing: -0.01em;
  border-radius: var(--r-sm); border: none; cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.4rem;
}
.form-sub:hover { background: var(--yellow-2); transform: translateY(-1px); }
.form-microcopy { font-size: 0.76rem; color: var(--on-dark-3); text-align: center; margin-top: 0.1rem; }
.form-trust-row { display: flex; justify-content: center; gap: 1.25rem; margin-top: 0.5rem; flex-wrap: wrap; }
.form-trust-row span { display: flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; color: var(--on-dark-3); }
.form-trust-row svg { color: var(--yellow); }
.form-response {
  display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem;
  color: var(--on-dark-2); margin-top: 0.25rem;
}
.legal-note { font-size: 0.74rem; color: var(--on-dark-3); line-height: 1.5; margin-top: 0.2rem; }
#form-ok {
  display: none; background: rgba(31,157,87,0.14); border: 1px solid rgba(31,157,87,0.4);
  border-radius: var(--r-sm); padding: 1rem 1.1rem; font-size: 0.9rem; color: #7fe0a8;
  margin-top: 0.5rem; line-height: 1.55;
}

/* ───────────────────────── PRICING ───────────────────────── */
.price-bar {
  margin-top: 3rem; background: #fff; border: 1px solid var(--border); border-radius: var(--r);
  padding: 2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
@media (max-width: 720px) { .price-bar { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; } }
.price-item { text-align: center; }
.price-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 700; margin-bottom: 0.4rem; }
.price-val { font-family: var(--serif); font-size: 1.75rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1; margin-bottom: 0.3rem; }
.price-note { font-size: 0.78rem; color: var(--ink-3); }
.price-foot { font-size: 0.78rem; color: var(--ink-3); margin-top: 0.85rem; font-style: italic; }

/* ───────────────────────── CITIES ───────────────────────── */
.city-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 3rem; }
@media (max-width: 960px) { .city-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .city-grid { grid-template-columns: 1fr; } }
.city-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 1.4rem; transition: border-color 0.25s, transform 0.25s; text-decoration: none; display: block;
}
.city-card.is-live { border-color: rgba(245,184,0,0.5); }
a.city-card:hover { border-color: var(--yellow); transform: translateY(-2px); }
.city-name { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.city-badge {
  display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 700;
  color: var(--amber-text); background: rgba(245,184,0,0.15); padding: 0.2rem 0.6rem; border-radius: 1rem; margin-bottom: 0.6rem;
}
.city-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.city-text { font-size: 0.85rem; color: var(--ink-2); line-height: 1.55; }
.city-link-row { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.85rem; font-size: 0.82rem; font-weight: 700; color: var(--amber-text); }

/* ───────────────────────── SEO LINK HUB ───────────────────────── */
.links-sec { background: var(--paper-2); }
.links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 2.5rem; }
@media (max-width: 760px) { .links-grid { grid-template-columns: 1fr; gap: 1.75rem; } }
.links-col-h { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 700; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.links-col a { display: block; font-size: 0.9rem; color: var(--ink-2); text-decoration: none; padding: 0.4rem 0; transition: color 0.15s, padding-left 0.15s; }
.links-col a:hover { color: var(--amber-text); padding-left: 4px; }

/* ───────────────────────── ARTICLE (guider/stadssidor) ───────────────────────── */
.article { line-height: 1.8; }
.article > * + * { margin-top: 1.1rem; }
.article h2 { font-family: var(--serif); font-weight: 600; font-size: 1.7rem; letter-spacing: -0.01em; color: var(--ink); margin-top: 2.5rem; margin-bottom: 0.25rem; line-height: 1.2; }
.article h3 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-top: 1.75rem; }
.article p { color: var(--ink-2); font-size: 1.0rem; }
.article ul, .article ol { padding-left: 1.3rem; color: var(--ink-2); }
.article li { margin-bottom: 0.55rem; }
.article strong { color: var(--ink); font-weight: 700; }
.article a { color: var(--amber-text); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.article a:hover { color: #6b4d00; }
.article .lead { font-size: 1.12rem; color: var(--ink); line-height: 1.7; }

/* Faktaruta / varning */
.callout {
  border-radius: var(--r); padding: 1.1rem 1.25rem; margin: 1.5rem 0;
  display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.92rem; line-height: 1.6;
}
.callout svg { flex-shrink: 0; margin-top: 2px; }
.callout-warn { background: rgba(217,69,53,0.07); border: 1px solid rgba(217,69,53,0.25); color: #8a2820; }
.callout-warn svg { color: var(--warn); }
.callout-info { background: rgba(26,61,110,0.06); border: 1px solid rgba(26,61,110,0.18); color: var(--navy-3); }
.callout-info svg { color: var(--navy-3); }
.callout-tip { background: rgba(245,184,0,0.09); border: 1px solid rgba(245,184,0,0.32); color: #7a5e00; }
.callout-tip svg { color: var(--yellow-deep); }
.callout strong { font-weight: 700; }

/* Guide table of contents */
.guide-toc {
  background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--r);
  padding: 1.25rem 1.5rem; margin-bottom: 2.5rem;
}
.guide-toc-title { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 700; margin-bottom: 0.75rem; }
.guide-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.guide-toc li { margin: 0; }
.guide-toc a { color: var(--ink-2); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: color 0.15s, padding-left 0.15s; display: inline-block; }
.guide-toc a:hover { color: var(--amber-text); padding-left: 3px; }

/* Quick answer-box högst upp på guider */
.quick-answer {
  background: var(--navy); color: #fff; border-radius: var(--r); padding: 1.4rem 1.6rem;
}
.quick-answer-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--yellow); font-weight: 700; margin-bottom: 0.6rem; }
.quick-answer p { font-size: 1.0rem; line-height: 1.65; color: var(--on-dark-2); }
.quick-answer p strong { color: #fff; }

/* Hero-sub (undersidor) */
.hero-sub { padding: 8.5rem 2rem 3rem; }
.hero-sub .hero-inner { max-width: 860px; }
.hero-sub h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 1rem; }
.hero-sub .hero-lead { max-width: 42rem; margin-bottom: 1.6rem; }
.hero-phone-inline {
  display: inline-flex; align-items: center; gap: 0.8rem; text-decoration: none;
  background: var(--yellow); border-radius: var(--r); padding: 0.85rem 1.3rem 0.8rem;
  box-shadow: 0 8px 24px rgba(245,184,0,0.28); transition: transform 0.15s, background 0.2s;
  margin-bottom: 1.5rem;
}
.hero-phone-inline:hover { transform: translateY(-2px); background: var(--yellow-2); }
.hero-phone-inline-ico { width: 34px; height: 34px; border-radius: 8px; background: rgba(14,34,56,0.12); display: flex; align-items: center; justify-content: center; color: var(--navy); flex-shrink: 0; }
.hero-phone-inline-num { font-size: 1.5rem; font-weight: 800; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.hero-phone-inline-sub { font-size: 0.74rem; font-weight: 600; color: rgba(14,34,56,0.7); margin-top: 0.2rem; }

/* Sub-page callback CTA (ersätter dött nummer) */
.hero-cta {
  display: inline-flex; align-items: center; gap: 0.85rem; text-decoration: none;
  background: var(--yellow); border-radius: var(--r); padding: 0.95rem 1.4rem;
  box-shadow: 0 8px 24px rgba(245,184,0,0.28); transition: transform 0.15s, background 0.2s, box-shadow 0.2s;
  margin-bottom: 1.5rem; max-width: 30rem;
}
.hero-cta:hover { transform: translateY(-2px); background: var(--yellow-2); box-shadow: 0 12px 32px rgba(245,184,0,0.4); }
.hero-cta-ico { width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; background: rgba(14,34,56,0.12); display: flex; align-items: center; justify-content: center; color: var(--navy); }
.hero-cta-text { flex: 1; }
.hero-cta-t { display: block; font-size: 1.1rem; font-weight: 800; color: var(--navy); line-height: 1.15; letter-spacing: -0.01em; }
.hero-cta-d { display: block; font-size: 0.8rem; font-weight: 600; color: rgba(14,34,56,0.72); margin-top: 0.18rem; }
.hero-cta-arrow { color: var(--navy); flex-shrink: 0; }

.trust-row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.5rem; }
.trust-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--on-dark-3); }
.trust-item svg { color: var(--yellow); }
.trust-sep { color: rgba(255,255,255,0.25); }

/* ───────────────────────── RELATED ───────────────────────── */
.related { background: var(--paper-2); }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; }
@media (max-width: 860px) { .related-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .related-grid { grid-template-columns: 1fr; } }
.related-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 1.2rem 1.25rem; text-decoration: none; transition: border-color 0.2s, transform 0.2s;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.related-card:hover { border-color: var(--yellow); transform: translateY(-2px); }
.related-card-title { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.related-card-arrow { color: var(--yellow-deep); flex-shrink: 0; }

/* ───────────────────────── FAQ ───────────────────────── */
.faq-list { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--ink);
  padding: 1.1rem 1.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-q::after { content: '+'; font-size: 1.4rem; font-weight: 400; color: var(--yellow-deep); flex-shrink: 0; transition: transform 0.2s; }
.faq-item[data-open="true"] .faq-q::after { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item[data-open="true"] .faq-a { max-height: 600px; }
.faq-a-inner { padding: 0 1.3rem 1.2rem; color: var(--ink-2); font-size: 0.95rem; line-height: 1.65; }

/* ───────────────────────── ABOUT ───────────────────────── */
.about-band { background: var(--paper-2); padding: 4rem 2rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.about-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; align-items: center; }
@media (max-width: 720px) { .about-inner { grid-template-columns: 1fr; gap: 1.25rem; } }
.about-h { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; }
.about-h .accent { color: var(--amber-text); }
.about-p { font-size: 0.92rem; color: var(--ink-2); line-height: 1.75; }
.about-disc { display: inline-flex; align-items: flex-start; gap: 0.5rem; background: rgba(245,184,0,0.09); border: 1px solid rgba(245,184,0,0.3); border-radius: var(--r-sm); padding: 0.75rem 1rem; font-size: 0.82rem; color: #7a5e00; margin-top: 1.1rem; line-height: 1.5; }
.about-disc svg { color: var(--yellow-deep); flex-shrink: 0; margin-top: 2px; }

/* ───────────────────────── FOOTER ───────────────────────── */
footer { background: #091625; padding: 3.5rem 2rem 2.5rem; }
.footer-wrap { max-width: 1140px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; gap: 1.75rem; } }
.footer-brand { max-width: 22rem; }
.footer-logo { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
.footer-logo-mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(150deg, var(--yellow), var(--yellow-deep)); display: flex; align-items: center; justify-content: center; }
.footer-logo-name { font-weight: 800; font-size: 1.1rem; color: #fff; letter-spacing: -0.02em; }
.footer-logo-name b { color: var(--yellow); }
.footer-brand-text { font-size: 0.85rem; color: var(--on-dark-3); line-height: 1.65; }
.footer-phone {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem;
  color: var(--yellow); font-weight: 800; font-size: 1.05rem; text-decoration: none;
}
.footer-col-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); font-weight: 700; margin-bottom: 1rem; }
.footer-col-links { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col-links a { color: var(--on-dark-2); text-decoration: none; font-size: 0.88rem; transition: color 0.2s; }
.footer-col-links a:hover { color: #fff; }
.footer-hr { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 2.5rem 0 1.5rem; }
.footer-bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; font-size: 0.8rem; color: var(--on-dark-3); }
.footer-bot a { color: var(--on-dark-2); text-decoration: none; }
.footer-bot a:hover { color: #fff; }
.footer-legal { max-width: 60rem; font-size: 0.74rem; color: rgba(255,255,255,0.6); line-height: 1.6; margin-top: 1rem; }

/* ───────────────────────── STICKY MOBIL CTA (bottom-bar) ───────────────────────── */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 180;
  display: none; gap: 0.6rem; padding: 0.6rem 0.75rem;
  background: rgba(9,22,37,0.97); backdrop-filter: blur(8px);
  border-top: 1px solid var(--navy-line);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}
.sticky-cta.visible { display: flex; }
.sticky-cta-phone {
  flex: 1.4; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--yellow); color: var(--navy); font-weight: 800; font-size: 0.92rem;
  text-decoration: none; border-radius: var(--r-sm); padding: 0.8rem 0.5rem;
}
.sticky-cta-form {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  background: rgba(255,255,255,0.1); color: #fff; font-weight: 700; font-size: 0.88rem;
  text-decoration: none; border-radius: var(--r-sm); padding: 0.8rem 0.5rem;
  border: 1px solid rgba(255,255,255,0.18);
}
@media (max-width: 720px) {
  body.has-sticky { padding-bottom: 72px; }
}
@media (min-width: 721px) {
  /* På desktop: sticky pill nere till höger (ring direkt) */
  .sticky-cta { left: auto; right: 1.5rem; bottom: 1.5rem; width: auto; border: none; background: none; box-shadow: none; padding: 0; backdrop-filter: none; }
  .sticky-cta.visible { display: flex; }
  .sticky-cta-form { display: none; }
  .sticky-cta-phone { box-shadow: var(--shadow-pop); padding: 0.9rem 1.4rem; font-size: 1rem; }
}

/* Utility */
.center { text-align: center; }
.mt-tag { margin-top: 0.4rem; }

/* ───────────────────────── MOBILANPASSNING ───────────────────────── */
@media (max-width: 920px) {
  /* Hero: mindre toppluft, stramare */
  .hero { padding: 6.5rem 1.25rem 3rem; }
  .hero h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  .hero-lead { font-size: 1rem; margin-bottom: 1.5rem; }
  .hero-grid { gap: 1.75rem; }

  /* Hero-formuläret syns direkt under copy på mobil – det är konverteringsvägen */
  .hero-form-card { padding: 1.25rem; }
  .hero-form-title { font-size: 1.3rem; }

  /* Sektioner: stramare sidopadding */
  section { padding: 3.5rem 1.25rem; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: 2rem; }
  .cta-primary-t { font-size: 1.05rem; }
  .hfg-row { grid-template-columns: 1fr; }
}

/* Production SEO templates v6 */
.skip-link{position:absolute;left:-9999px;top:0}.skip-link:focus{left:1rem;top:1rem;z-index:9999;background:#fff;padding:.75rem 1rem;color:#0e2238}.gen-wrap{width:min(1120px,calc(100% - 32px));margin-inline:auto}.gen-header{position:sticky;top:0;z-index:100;background:#0e2238;border-bottom:1px solid rgba(255,255,255,.12)}.gen-nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.gen-brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-size:1.08rem}.gen-bolt{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#f4c84a;color:#0e2238}.gen-nav nav{display:flex;align-items:center;gap:20px}.gen-nav nav a{color:#fff;text-decoration:none;font-weight:600}.gen-nav-cta,.gen-primary{background:#f4c84a!important;color:#0e2238!important;border-radius:10px;padding:12px 18px;text-decoration:none;font-weight:800}.gen-breadcrumb{display:flex;gap:8px;align-items:center;padding-block:18px;font-size:.9rem;flex-wrap:wrap}.gen-breadcrumb a{color:#38566f}.gen-hero{padding:64px 0 72px;background:linear-gradient(145deg,#0e2238,#173a57);color:#fff}.gen-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.65fr);gap:48px;align-items:center}.gen-eyebrow{text-transform:uppercase;letter-spacing:.09em;font-size:.78rem;font-weight:800;color:#bd8f12}.gen-hero .gen-eyebrow{color:#f4c84a}.gen-hero h1{font-size:clamp(2.25rem,5vw,4.4rem);line-height:1.02;max-width:840px;margin:.3em 0}.gen-lead{font-size:clamp(1.08rem,2vw,1.28rem);line-height:1.65;max-width:720px}.gen-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.gen-secondary{border:1px solid rgba(255,255,255,.5);color:#fff;padding:11px 17px;border-radius:10px;text-decoration:none;font-weight:700}.gen-disclaimer{font-size:.9rem;opacity:.82;max-width:700px}.gen-alert{background:#fff;color:#0e2238;padding:24px;border-radius:16px;border-top:5px solid #f4c84a;box-shadow:0 18px 45px rgba(0,0,0,.18)}.gen-alert strong{font-size:1.08rem}.gen-section{padding:72px 0}.gen-muted{background:#f2f6f8}.gen-content{max-width:800px}.gen-content h2,.gen-section h2{font-size:clamp(1.7rem,3vw,2.5rem);color:#0e2238;margin-top:0}.gen-content p,.gen-content li{font-size:1.03rem;line-height:1.75;color:#304a60}.gen-steps{display:grid;gap:14px;padding-left:1.4rem}.gen-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.gen-card-grid a{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid #d8e1e7;border-radius:12px;padding:18px;color:#0e2238;text-decoration:none;box-shadow:0 6px 20px rgba(14,34,56,.05)}.gen-card-grid a:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(14,34,56,.1)}.gen-card-grid span{font-weight:800}.gen-card-grid small{color:#587084}.gen-faq details{border-bottom:1px solid #d8e1e7;padding:16px 0}.gen-faq summary{cursor:pointer;font-weight:800;color:#0e2238}.gen-form-section{background:#0e2238;color:#fff;padding:76px 0}.gen-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}.gen-form-section h2{font-size:clamp(2rem,4vw,3.2rem);margin:.2em 0}.gen-checks{line-height:1.9}.gen-form{background:#fff;color:#0e2238;padding:24px;border-radius:16px;display:grid;gap:14px}.gen-form label{display:grid;gap:6px;font-weight:700}.gen-form input,.gen-form select,.gen-form textarea{font:inherit;border:1px solid #aebdc8;border-radius:8px;padding:12px;width:100%;background:#fff;color:#0e2238}.gen-form input:focus,.gen-form select:focus,.gen-form textarea:focus{outline:3px solid rgba(244,200,74,.45);border-color:#9b7410}.gen-consent{grid-template-columns:auto 1fr!important;align-items:start;font-weight:400!important;font-size:.9rem}.gen-consent input{width:20px;height:20px}.gen-form button{border:0;background:#f4c84a;color:#0e2238;padding:14px;border-radius:9px;font-weight:800;font-size:1rem;cursor:pointer}.gen-form-status{min-height:1.4em;margin:0}.gen-footer{background:#091827;color:#d7e1e8;padding:56px 0 90px}.gen-footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px}.gen-footer h2{font-size:1rem;color:#fff}.gen-footer a{display:block;color:#d7e1e8;text-decoration:none;margin:9px 0}.gen-legal{margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem}.gen-sticky{display:none}.is-submitting{opacity:.65;pointer-events:none}@media(max-width:800px){.gen-nav nav a:not(.gen-nav-cta){display:none}.gen-hero{padding:42px 0 52px}.gen-hero-grid,.gen-form-grid{grid-template-columns:1fr;gap:28px}.gen-card-grid{grid-template-columns:1fr 1fr}.gen-footer-grid{grid-template-columns:1fr 1fr}.gen-sticky{display:block;position:fixed;left:12px;right:12px;bottom:12px;z-index:120;background:#f4c84a;color:#0e2238;text-align:center;padding:15px;border-radius:12px;text-decoration:none;font-weight:900;box-shadow:0 8px 30px rgba(0,0,0,.25)}}@media(max-width:520px){.gen-card-grid,.gen-footer-grid{grid-template-columns:1fr}.gen-wrap{width:min(100% - 24px,1120px)}.gen-hero h1{font-size:2.35rem}.gen-section{padding:54px 0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* v8 revenue/CRO visual layer */
.hero-consent{display:flex;gap:.55rem;align-items:flex-start;margin:.8rem 0 .25rem;font-size:.72rem;line-height:1.35;color:var(--ink-3)}
.hero-consent input{margin-top:.15rem;accent-color:var(--yellow)}
.hero-consent a{text-decoration:underline}
.proof-hero{background:var(--navy);padding:0 2rem 5rem}
.proof-hero-image{max-width:1240px;margin:0 auto;position:relative;border-radius:22px;overflow:hidden;min-height:560px;box-shadow:0 30px 70px rgba(0,0,0,.32)}
.proof-hero-image>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proof-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,18,31,.93) 0%,rgba(6,18,31,.66) 43%,rgba(6,18,31,.08) 76%)}
.proof-hero-copy{position:relative;z-index:2;color:#fff;max-width:590px;padding:6.5rem 5rem}
.proof-kicker{display:inline-block;color:var(--yellow);font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;font-weight:800;margin-bottom:1rem}
.proof-hero-copy h2{font-family:var(--serif);font-size:clamp(2.2rem,4.2vw,4.2rem);line-height:1.03;letter-spacing:-.035em;margin-bottom:1.25rem}
.proof-hero-copy p{font-size:1.08rem;color:rgba(255,255,255,.82);max-width:520px;margin-bottom:1.8rem}
.proof-cta{display:inline-flex;background:var(--yellow);color:var(--navy);font-weight:800;padding:.9rem 1.3rem;border-radius:10px;text-decoration:none}
.real-work{padding:5.5rem 2rem;background:var(--paper-2)}
.real-work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.3rem}
.work-card{display:block;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;text-decoration:none;box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s}
.work-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-pop)}
.work-card img{width:100%;height:235px;object-fit:cover}
.work-card span{display:block;padding:1.15rem 1.25rem 1.35rem}
.work-card b{display:block;font-size:1.04rem;margin-bottom:.25rem}
.work-card small{display:block;color:var(--ink-3);font-size:.86rem}
@media(max-width:780px){.proof-hero{padding:0 1rem 3.5rem}.proof-hero-image{min-height:560px}.proof-hero-overlay{background:linear-gradient(0deg,rgba(6,18,31,.97) 0%,rgba(6,18,31,.62) 58%,rgba(6,18,31,.06) 100%)}.proof-hero-copy{padding:17rem 1.4rem 2rem}.real-work{padding:4rem 1rem}.real-work-grid{grid-template-columns:1fr}.work-card img{height:220px}}


/* v10 contextual image layer */
.context-visual{padding:0 1.25rem 3.25rem;background:var(--paper,#f7f5f0)}
.context-visual .gen-wrap{max-width:1180px;margin:0 auto}
.context-visual figure{position:relative;margin:0;border-radius:18px;overflow:hidden;min-height:300px;background:#0e2238;box-shadow:0 18px 45px rgba(7,22,37,.16)}
.context-visual img{display:block;width:100%;height:clamp(300px,39vw,500px);object-fit:cover}
.context-visual figcaption{position:absolute;left:0;right:0;bottom:0;padding:4.5rem 1.6rem 1.45rem;color:#fff;background:linear-gradient(0deg,rgba(4,16,29,.92),rgba(4,16,29,0))}
.context-visual figcaption strong{display:block;font-size:1.15rem;margin-bottom:.25rem}
.context-visual figcaption span{font-size:.9rem;color:rgba(255,255,255,.84)}
@media(max-width:700px){.context-visual{padding:0 .85rem 2.5rem}.context-visual figure{border-radius:14px}.context-visual img{height:320px}.context-visual figcaption{padding:4rem 1.1rem 1.1rem}}

/* ---- v11 ---- */
.lokal-foto{margin:1.5rem 0 0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-card)}
.lokal-foto img{display:block;width:100%;height:auto}
.lokal-sek h3{margin-top:1.4rem}
.pris-sek{background:var(--navy);color:var(--on-dark)}
.pris-rubrik{color:var(--on-dark);margin-bottom:1.1rem}
.pris-rad{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--navy-line);border:1px solid var(--navy-line);border-radius:var(--r);overflow:hidden}
.pris-post{background:var(--navy);padding:1.05rem 1rem;display:flex;flex-direction:column;gap:.2rem}
.pris-etikett{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:#9fb4cc}
.pris-varde{font-family:var(--serif);font-size:1.72rem;line-height:1.1;color:var(--yellow)}
.pris-not{font-size:.78rem;color:#9fb4cc}
.pris-fot{margin-top:1rem;font-size:.86rem;color:#b9c9da;max-width:70ch}
@media(max-width:900px){.pris-rad{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pris-rad{grid-template-columns:1fr}}
.jour-bar{background:var(--yellow);color:#3a2a00;font-weight:600;font-size:.9rem}
.jour-bar-inner{max-width:1180px;margin:0 auto;padding:.5rem 1.25rem;display:flex;gap:.6rem;align-items:center;justify-content:center;flex-wrap:wrap}
.jour-bar a{color:#3a2a00;text-decoration:underline;text-underline-offset:2px;font-weight:700}
.tel-knapp{display:inline-flex;align-items:center;gap:.5rem;background:var(--yellow);color:#3a2a00;
  padding:.72rem 1.05rem;border-radius:var(--r-sm);font-weight:700;text-decoration:none;white-space:nowrap}
.tel-knapp:hover{background:var(--yellow-deep)}
.gen-sticky .tel-knapp{flex:1;justify-content:center}

/* ---- v11 tel ---- */
.gen-actions-tel{flex-wrap:wrap;gap:.6rem}
.gen-sticky-tva{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:.5rem;
  padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));background:rgba(14,34,56,.97);
  backdrop-filter:blur(6px);box-shadow:0 -6px 24px rgba(0,0,0,.25)}
.gen-sticky-tva .tel-knapp{flex:1.15;justify-content:center;min-height:48px}
.gen-sticky-form{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;
  border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.35);color:#fff;text-decoration:none;
  font-weight:600;font-size:.92rem}
@media(min-width:861px){.gen-sticky-tva{display:none}}
.gen-nav .tel-knapp{margin-right:.5rem}
@media(max-width:700px){.gen-nav .tel-knapp span,.gen-nav .tel-knapp{font-size:.86rem;padding:.6rem .8rem}}

.valfri{font-weight:400;color:#6b7a8c;font-size:.86em}

/* ---- v13 form ---- */
.form-steg{list-style:none;counter-reset:fs;margin:1.1rem 0 0;padding:0;display:grid;gap:.7rem}
.form-steg li{counter-increment:fs;position:relative;padding-left:2.1rem}
.form-steg li::before{content:counter(fs);position:absolute;left:0;top:.05rem;width:1.5rem;height:1.5rem;
 border-radius:50%;background:var(--yellow);color:#3a2a00;font-weight:700;font-size:.8rem;
 display:flex;align-items:center;justify-content:center}
.form-steg b{display:block;font-size:.95rem}
.form-steg span{display:block;font-size:.86rem;color:#5b6b7c;margin-top:.1rem}
.form-foto{margin:1.3rem 0 0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-card)}
.form-foto img{display:block;width:100%;height:auto}
.form-foto figcaption{font-size:.82rem;color:#5b6b7c;padding:.55rem .75rem;background:#f6f8fa}
.form-foto figcaption:empty{display:none}

/* ---- v16 bild ----------------------------------------------------------
   Kaellbilderna aer 3:2. Tidigare satte jag BADE aspect-ratio OCH max-height,
   vilket gav tva beskaerningar efter varandra: 16:9 tog 16 % av hoejden och
   max-height tog ytterligare 32 %. Sammanlagt 43 % - mer aen den 21:9 som
   kapade huvudena fran boerjan.
   Nu styrs storleken av BREDDEN. Aspect-ratio bestaemmer hoejden, ingen
   max-height finns kvar, och ingen bild beskaers tvaa gaanger.
   object-position foerskjuts uppaat saa att det som faller bort tas fran
   nederkanten daer det bara aer golv.
------------------------------------------------------------------------- */
.lokal-foto,.form-foto{margin-inline:auto}

.context-visual figure{min-height:0;max-width:820px;margin-inline:auto}
.context-visual figure img{
  aspect-ratio:16/9;object-fit:cover;object-position:center 30%;
  width:100%;height:auto;display:block}

.lokal-foto{max-width:760px}
.lokal-foto img{
  aspect-ratio:16/9;object-fit:cover;object-position:center 32%;
  width:100%;height:auto;display:block}

.form-foto{max-width:420px}
.form-foto img{
  aspect-ratio:3/2;object-fit:cover;object-position:center 40%;
  width:100%;height:auto;display:block}

.proof-hero-image{min-height:0;max-width:1100px}
.proof-hero-image>img{
  position:static;aspect-ratio:16/9;object-fit:cover;object-position:center 30%;
  width:100%;height:auto;display:block}

.work-card img{object-position:center 28%}

@media(max-width:760px){
  .context-visual figure img,.lokal-foto img,.proof-hero-image>img{
    aspect-ratio:3/2;object-position:center 35%}
  .form-foto img{aspect-ratio:3/2}
}

/* Trygghetsraden ska inte hoppa i hoejd naer texten radbryts */
.trust-strip-wrap{align-items:start}
.trust-strip-item{align-items:flex-start}
.trust-strip-text strong{min-height:2.4em;display:flex;align-items:flex-end}
@media(max-width:900px){.trust-strip-text strong{min-height:0;display:block}}

.gen-nav .tel-knapp+.gen-nav-cta{margin-left:.5rem}
.nav-phone{margin-right:.5rem}

/* ---- v18 logga ----
   'elektrikern' ska vara gul i loggan pa ALLA sidor, som pa klader och
   bilar i bilderna. Startsidan hade det redan - gen-sidorna saknade det. */
.gen-brand b{color:#f4c84a}
.gen-footer h2:first-of-type{color:#fff}

/* ---- v19 logga+overlay ----
   En och samma logga pa hela sajten: gul rundad kvadrat med mork blixt,
   ordmark med gul 'elektrikern' och tagline - identisk med startsidan. */
.gen-brand{gap:10px}
.gen-bolt{width:38px;height:38px;border-radius:10px;background:#f4c84a;display:grid;place-items:center;flex-shrink:0}
.gen-brand-text{display:flex;flex-direction:column;line-height:1.15}
.gen-brand-name{font-size:1.08rem;font-weight:700;color:#fff}
.gen-brand-name b{color:#f4c84a}
.gen-brand-sub{font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:#8fa3b8;font-weight:600;white-space:nowrap}
@media(max-width:1100px){.gen-brand-sub{display:none}}
/* Hero-fotot pa startsidan laag nastan svart under overlayen.
   Texten ligger UNDER bilden, inte pa den - overlayen behovs bara som
   mjuk fot. Fran .97/.62 till .45/.12. */
.proof-hero-overlay{background:linear-gradient(0deg,rgba(6,18,31,.45) 0%,rgba(6,18,31,.12) 45%,rgba(6,18,31,0) 100%) !important}

/* ---- v23 enhetlig ----
   Samma meny och samma formularknapp pa hela sajten. Hero-formularets
   knapp var morkbla - alla andra CTA ar gula. Gult vinner. */
.hero-form-btn{background:#f4c84a !important;color:#0e2238 !important}
.hero-form-btn:hover{background:#e0b53a !important}
/* jour-raden ska ligga ovanfor sticky-nav pa alla sidor */
.jour-bar{position:relative;z-index:130}

/* ---- v26 mobilnav ----
   Loggans tagline tryckte ut hamburgarknappen utanfor skarmen pa mobil
   (x=396 i 390px-vy). Taglinen doljs och ordmarket krymps under 700px. */
@media(max-width:700px){
  .nav-logo-sub{display:none}
  .nav-logo-name{font-size:1rem}
  .nav-logo-mark{width:32px;height:32px}
  .nav-wrap{gap:8px}
}

/* ---- v27 navkomp ----
   Naven ar fixed (68px). Gen-sidornas innehall borjar i dokumentets topp
   och hamnade BAKOM naven - brodsmulan gick inte att klicka. Forsta
   innehallselementet efter naven far nu marginal motsvarande navhojden. */
main#main > .gen-breadcrumb:first-child{padding-top:calc(68px + 18px)}
main#main > section:first-child{padding-top:calc(68px + 40px)}

/* ankare ska inte hamna under fixed nav */
#forfragan,[id]{scroll-margin-top:84px}

/* ---- v28 brodsmula ----
   Brodsmulraden lag som ett vitt band mellan mork nav och mork hero.
   Nu samma morkbla som naven, med full bredd via box-shadow-tricket,
   sa nav -> brodsmula -> hero blir en sammanhangande mork yta. */
.gen-breadcrumb{
  background:#0e2238;
  box-shadow:0 0 0 100vmax #0e2238;
  clip-path:inset(0 -100vmax);
  color:#8fa3b8}
.gen-breadcrumb a{color:#b9c9da}
.gen-breadcrumb a:hover{color:#f4c84a}
.gen-breadcrumb span{color:#68809a}

/* ---- v30 checkbox ----
   .fg input satte appearance:none + mork bakgrund pa ALLA inputs, aven
   samtyckesrutan. accent-color fungerar inte med appearance:none, och
   Safari ritar inga pseudo-element pa <input> - resultatet i Safari var
   en tom ruta utan bock som upplevdes som oklickbar.
   Native checkbox med accent-color fungerar i alla webblasare. */
.fg input[type=checkbox],.hfg input[type=checkbox],
.gen-form input[type=checkbox],.hero-consent input[type=checkbox]{
  appearance:auto;-webkit-appearance:checkbox;
  width:20px;height:20px;min-width:20px;padding:0;margin-top:2px;
  background:transparent;border:none;box-shadow:none;
  accent-color:#f4c84a;cursor:pointer;flex-shrink:0}
/* Hero-fotot pa startsidan upplevdes for stort - krymp och centrera */
.proof-hero-image{max-width:860px;margin-inline:auto}

/* ---- v31 bildhierarki ----
   Tydlig storleksordning: hero 860 > sektionsbild 820 > brodtextbild 660
   > formularbild 420. Brodtextbilden underordnas texten den illustrerar. */
.lokal-foto{max-width:660px}

/* ---- v32 gen-formular i samma designsprak som startsidans hero-formular ----
   Ljusgra fyllda falt, platshallare, badge och trustrad. Checkboxen ror vi
   inte: v30-regeln .gen-form input[type=checkbox] har hogre specificitet. */
.gen-form{padding:26px 26px 22px;border-radius:16px;gap:12px;
  box-shadow:0 24px 60px rgba(9,24,39,.35)}
.gen-form .gen-form-head{margin-bottom:2px}
.gen-form .hero-form-badge{margin-bottom:0}
.gen-form label{font-size:.78rem;font-weight:700;color:#3d5166;gap:5px;
  text-transform:uppercase;letter-spacing:.04em}
.gen-form label .valfri{font-weight:400;text-transform:none;letter-spacing:0;color:#7c8ea0}
.gen-form input,.gen-form select,.gen-form textarea{
  font-size:.98rem;color:#16283b;background:#f2f5f8;
  border:1.5px solid #d9e1e8;border-radius:10px;padding:.7rem .85rem;
  transition:border-color .2s,box-shadow .2s,background .2s}
.gen-form select{-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233d5166' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.3rem}
.gen-form input::placeholder,.gen-form textarea::placeholder{color:#8496a7;opacity:.95}
.gen-form input:focus,.gen-form select:focus,.gen-form textarea:focus{
  outline:none;border-color:#e0a90f;background:#fff;box-shadow:0 0 0 3px rgba(245,184,0,.18)}
.gen-form textarea{min-height:96px}
.gen-form .gen-consent{text-transform:none;letter-spacing:0;font-weight:400!important;
  font-size:.88rem;color:#3d5166}
.gen-form .gen-consent a{color:#0e2238}
.gen-form button{padding:.95rem 1.5rem;border-radius:10px;font-size:1.05rem;
  transition:transform .15s,filter .2s}
.gen-form button:hover{transform:translateY(-1px);filter:brightness(1.04)}
.gen-form-trust{display:flex;justify-content:center;margin:2px 0 0}
.gen-form-trust span{display:flex;align-items:center;gap:.35rem;font-size:.76rem;color:#5c7186}
.gen-form-trust svg{color:#2e8b57}

.gen-form .lbl-rad{display:flex;align-items:baseline;gap:6px}

/* ══ v34 ═══════════════════════════════════════════════════════════════════
   Fyra nya block: förtroende, exempelpriser, mottagningslöfte, ärendeknappar.
   Byggda på samma variabler som resten av sajten – inga nya färger.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Förtroendeblocket ─────────────────────────────────────────────────── */
.verifierbart-sec{background:var(--paper-2);padding:52px var(--gut,20px) 56px;
  border-top:1px solid var(--paper-3)}
.verifierbart{display:flex;flex-direction:column;gap:.95rem;
  max-width:var(--w,1120px);margin-inline:auto}
.verifierbart-rad{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:start}
.verifierbart-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--amber-text);padding-top:.16rem;overflow-wrap:anywhere}
.verifierbart-val{font-size:.87rem;line-height:1.6;color:var(--ink)}
@media(max-width:640px){
  .verifierbart-rad{grid-template-columns:1fr;gap:3px}
  .verifierbart-lbl{padding-top:0}
  .verifierbart-sec{padding:40px 16px 44px}
}

/* ── Exempelpriser ─────────────────────────────────────────────────────── */
.prisexempel-sec{background:var(--paper);padding:52px var(--gut,20px) 0}
.prisexempel{max-width:var(--w,1120px);margin-inline:auto;
  border:1px solid var(--paper-3);border-radius:14px;
  background:var(--paper);overflow:hidden}
.prisexempel-topp{padding:18px 20px 15px;border-bottom:1px solid var(--paper-3);
  background:var(--paper-2)}
.prisexempel-rubrik{margin:0 0 .45rem;font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--amber-text);font-weight:700}
.prisexempel-ingress{margin:0;font-size:.9rem;line-height:1.6;color:#41525f}
.prisexempel-ingress strong{color:var(--ink);font-weight:700}
.prisexempel-tabell{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.prisexempel-tabell th,.prisexempel-tabell td{padding:11px 20px;text-align:left;
  border-bottom:1px solid var(--paper-3);font-size:.9rem}
.prisexempel-tabell thead th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:#41525f;font-weight:700;background:var(--paper-2)}
.prisexempel-tabell tbody th{font-weight:600;color:var(--ink)}
.prisexempel-tabell td{color:var(--ink);white-space:nowrap}
.prisexempel-tabell tbody tr:last-child th,
.prisexempel-tabell tbody tr:last-child td{border-bottom:0}
.prisexempel-fot{margin:0;padding:14px 20px 16px;background:var(--paper-2);
  border-top:1px solid var(--paper-3);font-size:.83rem;line-height:1.6;color:#41525f}
@media(max-width:640px){
  .prisexempel-sec{padding:40px 16px 0}
  .prisexempel-tabell thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .prisexempel-tabell,.prisexempel-tabell tbody,.prisexempel-tabell tr,
  .prisexempel-tabell th,.prisexempel-tabell td{display:block;width:auto}
  .prisexempel-tabell tr{padding:12px 14px;border-bottom:1px solid var(--paper-3)}
  .prisexempel-tabell tr:last-child{border-bottom:0}
  .prisexempel-tabell tbody th{padding:0 0 7px;border:0;font-size:.9rem;font-weight:700}
  .prisexempel-tabell td{padding:2px 0;border:0;white-space:normal;
    display:flex;justify-content:space-between;gap:12px;font-size:.86rem}
  .prisexempel-tabell td::before{content:attr(data-lbl);color:#41525f;font-size:.8rem}
  .prisexempel-topp,.prisexempel-fot{padding-left:14px;padding-right:14px}
}

/* ── Mottagningslöftet ─────────────────────────────────────────────────── */
.mottag-lofte{position:relative;padding-left:17px;margin:0 0 1.1rem;
  font-size:.9rem;line-height:1.6;color:inherit;opacity:.92;max-width:56ch}
.mottag-lofte::before{content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;background:#4ade80}
.mottag-lofte b{font-weight:700;opacity:1}

/* ── Ärendeknappar ────────────────────────────────────────────────────── */
.arendeknappar{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 .85rem}
.arendeknapp{appearance:none;cursor:pointer;font:inherit;font-size:.82rem;
  font-weight:600;padding:9px 13px;min-height:38px;border-radius:9px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);
  color:inherit;transition:background .15s,border-color .15s}
.arendeknapp:hover{background:rgba(255,255,255,.14);border-color:var(--yellow)}
.arendeknapp[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);
  color:#231a04}
.arendeknapp:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
/* På ljus formulärbakgrund behövs mörkare kant och text */
.gen-form .arendeknapp,.form-sec .arendeknapp,.hero-form .arendeknapp{
  border-color:#cfd6de;background:#f4f6f9;color:var(--ink)}
.gen-form .arendeknapp:hover,.form-sec .arendeknapp:hover,.hero-form .arendeknapp:hover{
  background:#e9edf3;border-color:var(--yellow-deep)}

/* ── Samtyckestexten ──────────────────────────────────────────────────── */
.gen-consent-text{font-size:.78rem;line-height:1.55;color:#41525f;margin:.7rem 0 0}
.gen-consent-text a{color:var(--amber-text);text-decoration:underline}

/* ── Kontrastfix: brödsmulorna låg på 3.94:1, kravet är 4.5 ───────────── */
.breadcrumb,.breadcrumb a,.breadcrumb span,.crumbs,.crumbs a{color:#8ba3bd}

/* ── v34: navigationen på mobil ────────────────────────────────────────────
   .nav-phone slutade vid 375 px i en 360 px skärm och tryckte ut
   hamburgerknappen till 391–431 px. Menyn gick inte att nå alls på 42 sidor.
   Under 700 px räcker den sticky CTA:n längst ner – den gör samma sak.     */
/* Under 1150 px finns helt enkelt inte plats: logotyp + sex menyval + knapp
   blir bredare an skarmen. Sticky-CTA:n langst ner gor samma sak. */
@media(max-width:1150px){
  .nav-phone{display:none!important}
}
/* Hamburgern ska alltid rymmas och vara minst 44px att träffa */
.nav-mobile-btn{flex:0 0 auto;min-width:44px;min-height:44px}

/* Tryckytor: inline-länkar i småtext låg på 14–16 px höjd. 24 px är
   minimikravet, 44 rekommenderat. Padding ger höjd utan att flytta texten. */
.gen-consent-text a,.footer-legal a,.crumbs a{display:inline-block;padding:5px 0}

/* Sticky-CTA:ns etikett klipptes vid 768 px */
.sticky-cta a{min-width:0}
.sticky-cta a span,.sticky-cta-phone,.sticky-cta-form{min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* Ärendeknapparna tog sju rader på mobil. Ska rymmas på två. */
@media(max-width:640px){
  .arendeknappar{gap:6px}
  .arendeknapp{font-size:.78rem;padding:8px 10px;min-height:36px;flex:0 1 auto}
}

/* En generell knappregel gav dem display:block och 140–190 px bredd, så de
   staplades i fem rader. Tvingas till innehållsbredd. */
.arendeknappar .arendeknapp{display:inline-flex!important;align-items:center;
  width:auto!important;max-width:none;flex:0 0 auto}

/* Sajtens generella knappregel vinner på specificitet. Låser hela knappen. */
.arendeknappar > .arendeknapp{
  font-size:.8rem!important; line-height:1.2!important; font-weight:600!important;
  padding:9px 12px!important; min-height:38px!important; height:auto!important;
  letter-spacing:0!important; text-transform:none!important; border-radius:9px!important;
  box-shadow:none!important; transform:none!important;
}
@media(max-width:640px){
  .arendeknappar > .arendeknapp{font-size:.75rem!important;padding:8px 10px!important;min-height:34px!important}
}

/* Uppringningslöftet i heron – sajtens starkaste argument ska synas
   i första vyn, inte först vid formuläret. */
.hero-uppringning{position:relative;padding-left:17px;margin:1rem 0 0;max-width:46ch;
  font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.78)}
.hero-uppringning::before{content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;background:#4ade80}
.hero-uppringning b{color:#fff;font-weight:700}
@media(max-width:640px){.hero-uppringning{font-size:.84rem}}

/* ══ v39 · sex buggar som designgranskningen hittade ═══════════════════════ */

/* B · KRITISKT: .mottag-lofte ärvde body-färgen #0e1b2a och låg på .form-card
   med bakgrund var(--navy) #0e2238. Kontrast 1,07:1 — femminuterslöftet var
   i praktiken osynligt på 42 sidor. Det är sajtens enda differentiering. */
.form-card,.gen-form-section,.gen-form-card{color:#fff}
.form-card .mottag-lofte,.gen-form-section .mottag-lofte,
.hero .mottag-lofte,.gen-hero .mottag-lofte{color:rgba(255,255,255,.84)}
.form-card .mottag-lofte b,.gen-form-section .mottag-lofte b,
.hero .mottag-lofte b,.gen-hero .mottag-lofte b{color:#fff}
/* På ljus formulärbakgrund gäller motsatsen */
.gen-form .mottag-lofte,.prisexempel-sec .mottag-lofte{color:#41525f}
.gen-form .mottag-lofte b{color:var(--ink)}

/* D · etiketten spillde ut ur flexbarnet. text-overflow biter inte utan min-width:0 */
.sticky-cta a,.gen-sticky a{min-width:0;overflow:hidden}
.sticky-cta-phone,.sticky-cta-form,.gen-sticky .tel-knapp,.gen-sticky-form{
  flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* F · .gen-form-grid är 1fr 1fr med TRE barn: div, löftesrad, formulär.
   Rad två blev formulär + tom halva — 700×900 px blank yta på desktop. */
@media(min-width:861px){
  .gen-form-grid{display:grid;grid-template-columns:1fr 1fr;
    grid-template-areas:"info form" "lofte form";align-items:start;gap:32px}
  .gen-form-grid > :not(form):not(.mottag-lofte){grid-area:info}
  .gen-form-grid > .mottag-lofte{grid-area:lofte;align-self:start}
  .gen-form-grid > form{grid-area:form}
}

/* J · TVÅ gula fanns: #f5b800 i tokens och #f4c84a på tolv ställen i
   gen-blocket. Skillnaden syns som en gråare gul bredvid den rena. */
.gen-primary,.gen-sticky .tel-knapp,.tel-knapp,.gen-cta,
.gen-form button[type=submit],.nav-phone{background:var(--yellow)!important}
.gen-primary:hover,.tel-knapp:hover,.gen-cta:hover{background:var(--yellow-2)!important}

/* M · ärendeknapparna hade exakt färgformeln för disabled: #f4f6f9 på #cfd6de.
   Piller läser som val, rektangel läser som knapp. Valt = navy, inte gult —
   gult ägs av skicka-knappen och ska inte konkurrera. */
.arendeknappar > .arendeknapp{
  background:#fff!important; border:1.5px solid #b9c4d1!important;
  color:var(--ink)!important; border-radius:999px!important;
  min-height:44px!important; padding:11px 17px!important;
  font-size:.875rem!important; font-weight:600!important}
.arendeknappar > .arendeknapp:hover{
  border-color:var(--navy-3)!important; background:#fbfcfd!important}
.arendeknappar > .arendeknapp[aria-pressed="true"]{
  background:var(--navy)!important; border-color:var(--navy)!important; color:#fff!important}
@media(max-width:640px){
  .arendeknappar > .arendeknapp{font-size:.8125rem!important;padding:10px 14px!important}
}

/* L · prisblocket och förtroendeblocket låg i .wrap-narrow = 760 px i en
   1440 px skärm, medan alla sektioner ovanför är 1120. Två kolumnsystem
   på samma skärm syns direkt. */
.prisexempel-sec > .wrap-narrow,.verifierbart-sec > .wrap-narrow{
  max-width:1120px!important}
.prisexempel,.verifierbart{max-width:1120px}

/* Sticky-fältet ligger fast över innehållet. Utan botten-utrymme täcker det
   skicka-knappen på de sidor där formuläret slutar nära sidfoten. */
@media(max-width:860px){
  body{padding-bottom:88px}
  body.has-sticky{padding-bottom:96px}
}

/* ══ v40 · hopfällbara block ══════════════════════════════════════════════
   Texten ligger kvar i HTML och döljs med CSS — aldrig hämtad via JS.
   Google indexerar innehåll i <details> med full vikt, så hela SEO-värdet
   behålls medan sidan blir hälften så lång.                                */
.fq{border-bottom:1px solid #d8e1e7}
.fq > summary{
  cursor:pointer; list-style:none; padding:16px 34px 16px 0; position:relative;
  font-weight:600; font-size:1rem; line-height:1.4; color:var(--ink)}
.fq > summary::-webkit-details-marker{display:none}
.fq > summary::after{
  content:""; position:absolute; right:6px; top:calc(50% - 4px);
  width:9px; height:9px; border-right:2px solid var(--navy-3);
  border-bottom:2px solid var(--navy-3); transform:rotate(45deg);
  transition:transform .18s}
.fq[open] > summary::after{transform:rotate(-135deg)}
.fq > summary:hover{color:var(--navy-3)}
.fq > summary:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.fq-svar{padding:0 0 18px}
.fq-svar p{margin:0 0 .8rem;font-size:.95rem;line-height:1.6}
.fq-svar p:last-child{margin-bottom:0}

.fler-kort{margin-top:10px}
.fler-kort > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border:1.5px solid #b9c4d1; border-radius:999px;
  font-size:.875rem; font-weight:600; color:var(--ink); background:#fff}
.fler-kort > summary::-webkit-details-marker{display:none}
.fler-kort > summary::after{
  content:""; width:8px; height:8px; border-right:2px solid var(--navy-3);
  border-bottom:2px solid var(--navy-3); transform:rotate(45deg) translateY(-2px);
  transition:transform .18s}
.fler-kort[open] > summary::after{transform:rotate(-135deg) translateY(0)}
.fler-kort > summary:hover{border-color:var(--navy-3);background:#fbfcfd}
.fler-kort > summary:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.fler-kort .gen-card-grid{margin-top:12px}

/* Långa textsektioner: rubrik och ingress syns, fördjupningen fälls.
   All text ligger kvar i HTML — bara dold, aldrig hämtad via JS. */
.lokal-lang{margin-top:18px;border-top:1px solid #d8e1e7;padding-top:16px}
.lokal-lang > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;border:1.5px solid #b9c4d1;border-radius:999px;
  font-size:.875rem;font-weight:600;color:var(--ink);background:#fff}
.lokal-lang > summary::-webkit-details-marker{display:none}
.lokal-lang > summary::after{
  content:"";width:8px;height:8px;border-right:2px solid var(--navy-3);
  border-bottom:2px solid var(--navy-3);transform:rotate(45deg) translateY(-2px);
  transition:transform .18s}
.lokal-lang[open] > summary::after{transform:rotate(-135deg) translateY(0)}
.lokal-lang > summary:hover{border-color:var(--navy-3);background:#fbfcfd}
.lokal-lang > summary:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.lokal-lang-inne{padding-top:14px}

/* ══ v41 ══════════════════════════════════════════════════════════════════
   1 · EN handling i heron. Textlänk för navigation, knapp för konvertering. */
.gen-textlank{display:inline-flex;align-items:center;gap:6px;
  color:#cfe0f0;text-decoration:underline;text-underline-offset:4px;
  font-size:.9rem;font-weight:600;padding:10px 2px;min-height:44px}
.gen-textlank:hover{color:#fff}

/* 2 · Ett typsnitt för rubriker. gen-blocket satte aldrig font-family, så
   306 sidor fick Inter och 42 fick Fraunces på samma sajt. */
.gen-hero h1,.gen-hero h2,.gen-content h2,.gen-content h3,
.gen-section h2,.gen-form-section h2,.pris-rubrik,
.prisexempel-rubrik,.gen-faq h2,h1,h2{
  font-family:"Fraunces",Georgia,serif;
  letter-spacing:-.02em;line-height:1.1}
.gen-hero h1{line-height:1.06}
/* Etiketter och versaltext ska INTE ha serif */
.gen-eyebrow,.prisexempel-rubrik,.verifierbart-lbl,.pris-etikett,
.s-tag,.gen-kicker{font-family:"Inter",system-ui,sans-serif!important;
  letter-spacing:.1em}

/* 3 · Sektionsrytm i tre steg i stället för 52/54/56/72/76 om vartannat */
.gen-section{padding:48px 0}
.gen-form-section{padding:48px 0}
.prisexempel-sec{padding-top:48px}
.verifierbart-sec{padding:48px var(--gut,20px) 52px}
@media(max-width:640px){
  .gen-section{padding:34px 0}
  .gen-form-section{padding:34px 0}
  .prisexempel-sec{padding-top:34px}
  .verifierbart-sec{padding:34px 16px 38px}
}

/* Formulärets förspel fälls — fälten ska synas, inte instruktionerna */
.form-steg-fall{margin:14px 0 0}
.form-steg-fall > summary{cursor:pointer;list-style:none;display:inline-flex;
  align-items:center;gap:8px;padding:9px 15px;border:1.5px solid rgba(255,255,255,.34);
  border-radius:999px;font-size:.85rem;font-weight:600;color:#fff}
.form-steg-fall > summary::-webkit-details-marker{display:none}
.form-steg-fall > summary::after{content:"";width:7px;height:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.form-steg-fall[open] > summary::after{transform:rotate(-135deg)}
.form-steg-fall > summary:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}


/* ══ v42 · kontrastfel, med selektorer lästa ur DOM:en ════════════════════
   Förra försöket gissade klassnamn och träffade fel element — gul text på
   vit botten och navy på navy. De här är hämtade med getComputedStyle. */

/* 1 · Brödsmulorna: .gen-breadcrumn span, #68809a på navy = 3,94:1 */
.gen-breadcrumb,.gen-breadcrumb span,.gen-breadcrumb a{color:#a8bccd!important}
.gen-breadcrumb a:hover{color:#fff!important}

/* 2 · Samtyckeslänken. Formuläret ligger på VIT botten på 306 sidor och på
       navy på 42 — samma klass, två bakgrunder. Därför sätts färgen per
       förälder, inte generellt. */
.gen-form .gen-consent-text a{color:#8a6300!important}          /* vit botten */
.form-card .gen-consent-text a,
.form-sec.is-dark .gen-consent-text a{color:var(--yellow)!important}  /* mörk botten */
.gen-form .gen-consent-text{color:#41525f!important}
.form-card .gen-consent-text{color:rgba(255,255,255,.8)!important}

/* 3 · .gen-eyebrow #bd8f12 på vit = 2,96:1 */
.gen-eyebrow{color:#7a5c0a!important}
.pris-sek .gen-eyebrow,.form-card .gen-eyebrow,
.gen-form-section .gen-eyebrow{color:var(--yellow)!important}

/* 4 · .pris-rubrik blev navy på navy när h2-regeln satte serif men ärvde
       färgen. pris-sek har mörk bakgrund. */
.pris-sek .pris-rubrik,.pris-sek h2{color:#fff!important}
.pris-sek .pris-varde{color:var(--yellow)!important}
.pris-sek .pris-etikett,.pris-sek .pris-not,.pris-sek .pris-fot{color:rgba(255,255,255,.8)!important}

/* 5 · .hero-cta-d rgba(14,34,56,.72) på gult = 2,78:1. Alfan bort. */
.hero-cta-d,.hero-cta-text .hero-cta-d{color:#0e2238!important;opacity:1!important}

/* 6 · '112' vit på ljusröd rgba(217,69,53,.12) = 4,33:1 */


/* Tre sista, med selektorer lästa direkt ur DOM:en */
.form-steg-fall .form-steg li span,
ol.form-steg li span{color:#aebfd0!important}
.cta-primary .cta-primary-d,
span.cta-primary-d{color:#0e2238!important;opacity:1!important}
.hero-safety strong,.hero-safety span{color:#fff!important;font-weight:700}
.hero-safety{background:rgba(217,69,53,.28)!important}

/* .gen-alert är en VIT ruta på navy — texten ska vara mörk. Min förra regel
   gjorde den vit på vitt. Rättat, och 112-raden i heron får djupare botten. */
.gen-alert,.gen-alert strong,.gen-alert p,.gen-alert b{color:var(--ink)!important}
.hero-safety{background:rgba(154,38,26,.62)!important}
.hero-safety,.hero-safety span,.hero-safety strong{color:#fff!important}

/* .hero-form-card har VIT bakgrund. Min v39-regel gjorde löftet vitt där
   också — vitt på vitt. Färgen måste sättas per bakgrund, inte generellt. */
.hero-form-card .mottag-lofte{color:#41525f!important}
.hero-form-card .mottag-lofte b{color:var(--ink)!important}
.gen-form .mottag-lofte{color:#41525f!important}
.gen-form .mottag-lofte b{color:var(--ink)!important}

/* ══ v43 · felen QA-specialisterna hittade ════════════════════════════════ */

/* 5 · Felmeddelande i formuläret — fanns inte alls tidigare */
.form-fel{display:none;margin:0 0 .8rem;padding:11px 14px;border-radius:10px;
  background:rgba(217,69,53,.14);border:1px solid rgba(217,69,53,.5);
  color:#7a1c14;font-size:.88rem;font-weight:600}
.form-card .form-fel,.gen-form-section .form-fel{color:#ffd7d2;
  background:rgba(217,69,53,.24);border-color:rgba(255,120,105,.6)}
.gen-form-status.ar-fel{color:#7a1c14;font-weight:600}

/* 6 · Vald ärendeknapp fick samma färg som formulärkortets bakgrund och
       blev osynlig. Vald = gul ram med mörk fyllning som skiljer sig. */
.arendeknappar > .arendeknapp[aria-pressed="true"]{
  background:#1c3a5e!important;border-color:var(--yellow)!important;
  border-width:2px!important;color:#fff!important}
.gen-form .arendeknappar > .arendeknapp[aria-pressed="true"],
.hero-form-card .arendeknappar > .arendeknapp[aria-pressed="true"]{
  background:var(--navy)!important;border-color:var(--navy)!important;color:#fff!important}

/* 10 · .proof-hero-copy hade padding skriven för när bilden låg som
        absolut bakgrund. En senare regel gjorde den static — kvar blev luft. */
.proof-hero-copy{padding:2.5rem 3rem 3rem!important}
@media(max-width:780px){.proof-hero-copy{padding:1.75rem 1.25rem 2rem!important}}

/* 11 · Global reset nollade <ul>-indraget så punkterna klipptes bort */
.gen-checks,.gen-content ul,.article ul,.form-steg{padding-left:1.35em}
.gen-checks li,.gen-content ul li{list-style:disc}
.form-steg{list-style:decimal}

/* 15 · .rv{opacity:0} gjorde innehåll osynligt om skriptet inte hann köra */
.rv{opacity:1}
/* Doljs BARA nar skriptet hunnit satta html.js. Utan JS, eller om skriptet
   failar, ar innehallet synligt - det ar sa det maste vara. */
html.js .rv:not(.on){opacity:0;transition:opacity .4s}
@media(prefers-reduced-motion:reduce){html.js .rv:not(.on){opacity:1}}

/* 18 · .nav-phone försvann redan vid 1150 px */
@media(max-width:1150px){.nav-phone{display:none!important}}
/* Försök att visa .nav-phone vid 1024 px spillde över kanten. Under
   1150 px finns helt enkelt inte plats — sticky-fältet gör samma jobb. */

/* ══ v44 ══════════════════════════════════════════════════════════════════
   F · Skriptet togglar .visible men CSS hade bara en regel for .sticky-cta.
       .gen-sticky lag darfor kvar aven nar formularet syntes och tackte det. */
@media(max-width:860px){
  .gen-sticky{display:flex!important;
    transform:translateY(110%);transition:transform .22s ease-out;
    will-change:transform}
  .gen-sticky.visible{transform:translateY(0)}
  html:not(.js) .gen-sticky{transform:translateY(0)}
}

/* G · Kvittot syntes knappt. Nu ett tydligt block, och skicka-knappen
       doljs inte langre permanent - kunden maste kunna angra. */
.gen-form-status{display:block;margin:.8rem 0 0;padding:0;
  font-size:.92rem;line-height:1.5;min-height:1.4em}
.gen-form-status.ar-klar{padding:13px 15px;border-radius:10px;font-weight:600;
  background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.55);color:#0e2238}
.form-card > .gen-form-status.ar-klar,
.form-card form > .gen-form-status.ar-klar{
  background:rgba(74,222,128,.18);border-color:rgba(74,222,128,.6);color:#eafff1}
.gen-form-status.ar-fel{padding:13px 15px;border-radius:10px;font-weight:600;
  background:rgba(217,69,53,.14);border:1px solid rgba(217,69,53,.55);color:#7a1c14}
.form-card > .gen-form-status.ar-fel,
.form-card form > .gen-form-status.ar-fel{
  background:rgba(217,69,53,.26);border-color:rgba(255,120,105,.6);color:#ffd7d2}

/* ══ v45 · regressioner fran v44 ══════════════════════════════════════════
   Kvittot blev nastan vitt pa nastan vitt for att min morka regel vann pa
   specificitet. .gen-form ar VIT — dar galler mork text, alltid. */
.gen-form .gen-form-status.ar-klar,
.hero-form-card .gen-form-status.ar-klar{
  background:rgba(74,222,128,.16)!important;border:1px solid rgba(22,163,74,.55)!important;
  color:#0e2238!important}
.gen-form .gen-form-status.ar-fel,
.hero-form-card .gen-form-status.ar-fel{
  background:rgba(217,69,53,.12)!important;border:1px solid rgba(185,28,28,.55)!important;
  color:#7a1c14!important}

/* ══ v46 ══════════════════════════════════════════════════════════════════
   .gen-form-grid är 1fr 1fr från 801 px men fick sina grid-areas först vid
   861 px. I bandet 801–860 hamnade formuläret ensamt på rad två med en tom
   halva bredvid — precis buggen v39 skulle ha löst. Brytpunkten sänkt så
   den möter basregeln. */
@media(min-width:801px){
  .gen-form-grid{display:grid;grid-template-columns:1fr 1fr;
    grid-template-areas:"info form" "lofte form";align-items:start;gap:32px}
  .gen-form-grid > :not(form):not(.mottag-lofte){grid-area:info}
  .gen-form-grid > .mottag-lofte{grid-area:lofte;align-self:start}
  .gen-form-grid > form{grid-area:form}
}

/* Tvåkolumnsblock där vänsterkolumnen bara har en rubrik lämnade ~500 px
   tomt. Rubriken flyttas över kolumnerna i stället. */
@media(min-width:861px){
  .about-grid,.gen-about-grid{grid-template-columns:1fr!important}
  .about-grid > h2,.gen-about-grid > h2{margin-bottom:.6rem}
  .about-grid > *:not(h2),.gen-about-grid > *:not(h2){max-width:74ch}
}

/* ══ v48 ══════════════════════════════════════════════════════════════════
   1 · Sticky-fältet är 69–71 px. Bottenutrymmet var 96 px men innehåll
       längst ner täcktes ändå — sidfotens sista rader hamnade under.
       Rejäl marginal, och ankarhopp landar inte längre bakom fältet. */
@media(max-width:860px){
  body,body.has-sticky{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  [id]{scroll-margin-bottom:120px;scroll-margin-top:80px}
  footer,.gen-footer{padding-bottom:24px}
}
@media(min-width:861px) and (max-width:1150px){
  body.has-sticky{padding-bottom:96px}
}

/* 2 · Kontrast under WCAG AA, uppmätt:
       .gen-eyebrow #bd8f12 på #f7f8fa      3,7:1 → krav 4,5
       småtext på navy (--on-dark-3)        3,4–4,0:1
       FAQ-plustecknet --yellow-deep        2,3:1 → krav 3,0 för grafik    */
.gen-eyebrow,.verifierbart-lbl{color:#6b4f08}
.pris-sek .gen-eyebrow,.form-card .gen-eyebrow,
.gen-form-section .gen-eyebrow{color:var(--yellow)}
.form-microcopy,.hero-form-trust,.legal-note,.gen-form-trust,
.footer-legal,.form-steg-fall .form-steg li span{color:#b6c6d6}
.gen-form .form-microcopy,.gen-form .gen-form-trust,
.hero-form-card .form-microcopy,.hero-form-card .gen-form-trust{color:#41525f}
.faq-q::after,.fq > summary::after,.fler-kort > summary::after,
.lokal-lang > summary::after{border-color:#7a5c0a}
.form-card .fq > summary::after,.gen-form-section .fq > summary::after{border-color:var(--yellow)}
/* .faq-a klippte längre svar vid 600 px */
.faq-a{max-height:none}
[data-faq]:not([data-open="true"]) .faq-a{max-height:0;overflow:hidden}
/* Honeypot — måste vara osynlig för människor men nåbar för bottar. */
.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none}
/* Gult är handlingsfärg på mörk botten. Som länkfärg i brödtext på vitt ger
   #f5b800 1,79:1 – långt under kravet. Länkar i löptext får mörk variant. */
/* Rad 1377 sätter gult via .form-card .gen-consent-text a (0,2,1). Efter
   mallsammanslagningen ligger formuläret i .form-card men har VIT botten,
   så gult ger 1,79:1. Samma specificitet, senare i filen, vinner.        */
.gen-form .gen-consent-text a,.form-card .gen-consent-text a,
.form-sec .gen-consent-text a,.gen-form .gen-form-trust a{color:#6b4f08!important;text-decoration:underline}
.gen-form .gen-consent-text a:hover,.form-card .gen-consent-text a:hover{color:#4a3706!important}
.gen-form .gen-consent-text,.form-card .gen-consent-text{color:#41525f!important}
/* .form-sec.is-dark .gen-consent-text a är (0,3,1) och slår föregående rad.
   Formuläret har vit botten även i en mörk sektion, så länken måste vara mörk
   oavsett vilken sektion den ligger i. Mätt i webbläsaren, inte gissat.     */
.form-sec.is-dark .gen-form .gen-consent-text a,
.form-sec.is-dark .form-card .gen-consent-text a,
.is-dark .gen-form .gen-consent-text a{color:#6b4f08!important}
/* .trust-sep var rgba(255,255,255,.25) = 2,25:1. Separatorerna bär ingen
   information, men de renderas som text – höjd opacitet i stället för att
   dölja dem, så raden fortfarande går att läsa styckvis.                  */
.trust-sep{color:rgba(255,255,255,.62)!important}
.lbl-valfri{font-weight:400;opacity:.72;font-size:.86em}

/* ── Fynd från granskningen, mätta i webbläsaren ────────────────────── */

/* Platshållartext var #8496a7 på #f2f5f8 = 2,78:1. Under kravet, och den
   såg dessutom ut som ifyllt värde. Mörkare och tydligt sekundär.        */
.gen-form input::placeholder,.gen-form textarea::placeholder,
input::placeholder,textarea::placeholder{color:#5c6b7a!important;opacity:1;font-weight:400}

/* .gen-content h2 hade margin-top:0 och <p> saknade marginalregel helt —
   uppmätt 0 px mellan rubrik och stycke på 307 sidor. Texten blev en klump. */
.gen-content h2{margin:2.2rem 0 .6rem}
.gen-content h2:first-child{margin-top:0}
.gen-content h3{margin:1.6rem 0 .5rem}
.gen-content p{margin:0 0 1rem}
.gen-content ul,.gen-content ol{margin:0 0 1.15rem}
.gen-content > *:last-child{margin-bottom:0}

/* body.has-sticky lade 96 px ljus padding UNDER den mörka sidfoten, så varje
   sida slutade med en vit remsa. Utrymmet flyttas in i sidfoten i stället.  */
@media(max-width:860px){
  body,body.has-sticky{padding-bottom:0!important}
  footer,.gen-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
}

/* Formulärkortet låg i kort i sektion — trippel padding åt 96 av 390 px och
   sprängde chipraden vid 294 px. Ett lager padding räcker på mobil.        */
@media(max-width:520px){
  .form-card .gen-form,.form-sec .form-card{padding-left:0;padding-right:0}
  .form-card{padding-left:.9rem;padding-right:.9rem}
  .gen-form .arendeknapp{font-size:.82rem;padding:9px 11px}
}

/* ════════════════════════════════════════════════════════════════════
   DESIGNPUTS INFÖR LANSERING — v52
   Endast layout, typografi, avstånd och färgnyanser. Inget innehåll,
   ingen funktion. Allt ligger sist i filen och är scopat via förälder,
   eftersom filen innehåller två parallella designsystem.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1 · Kort i kort och dubblerad badge i heroformuläret ──────────
   .hero-form-card är ett vitt kort. Inuti låg .gen-form som ett ANDRA
   vitt kort med egen 60 px skugga — en grå gloria på vitt, och 50 px
   förlorad fältbredd. Badgen "Akut elhjälp" renderades två gånger
   inom samma vita yta, 332 px isär.                                  */
.hero-form-card > .gen-form{
  background:transparent;box-shadow:none;border:0;border-radius:0;padding:0}
.hero-form-card > .gen-form > .gen-form-head{display:none}
.form-sec.is-dark .form-card .gen-form > .gen-form-head{display:none}

/* ── 2 · <select> kapade sin egen text mitt i ordet ────────────────
   "Akut – fara, brandlukt eller strömlöst nu" kräver 356 px; fältet
   gav 206–300 px. Strängen ryms inte vid någon läsbar grad — men en
   avsiktlig ellips läser som val, inte som trasigt.                  */
@media(max-width:620px){
  .gen-form select{
    font-size:.88rem;padding-left:.7rem;padding-right:2rem;
    background-position:right .6rem center;text-overflow:ellipsis}
}

/* ── 3 · Vertikal rytm: åtta sektionspaddingar blev en ─────────────
   Uppmätt gap rubrik→brödtext varierade mellan 0 och 37 px på samma
   sida. Fyra steg i stället för nio godtyckliga värden. 34 px är det
   värde 307 sidor redan använde — de lösa sektionerna dras ihop till
   det, inte tvärtom.                                                 */
:root{--sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:34px}
@media(max-width:620px){
  section,.gen-section{padding-block:var(--sp-4)}
  .about-band{padding:var(--sp-4) 20px}
  .real-work{padding:var(--sp-4) 16px}
  .verifierbart-sec{padding-block:var(--sp-4)}
  /* .prisexempel-sec har padding-bottom:0 med flit — den möter nästa
     sektion utan skarv. Bara toppen normaliseras.                    */
  .prisexempel-sec{padding-top:var(--sp-4)}
  .gen-content h2,.gen-section h2,.article h2{margin-bottom:var(--sp-2)}
  h2+p,h2+.s-lead,h2+.gen-lead{margin-top:0}
  /* 18 px ligger nära de 17 som 307 sidor redan hade — det rättar
     0-px-fallen och 37-px-fallet utan att blåsa upp de goda.         */
  h2+div,h2+ul,h2+ol,h2+.gen-card-grid,h2+.real-work-grid,
  h2+.city-grid,h2+table{margin-top:18px}
}

/* ── 4 · Startsidan var 17 579 px = 21 mobilskärmar ────────────────
   Ingen rad innehåll tas bort — luften komprimeras och listorna
   läggs i två spalter. Uppmätt besparing: cirka 1 700 px.           */
@media(max-width:620px){
  .city-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .links-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1.1rem}

  .work-card img{height:170px}
  .hero{padding-top:72px;padding-bottom:32px}
  .gen-form{padding:18px 16px 16px}
}

/* ── 6 · Trust-strippen: 16,8 px olika spårbredd och ikoner ur linje
   repeat(2,1fr) är minmax(auto,1fr) — den längsta etiketten tvingade
   sitt spår att växa. Femte kortet spänner nu båda spåren i stället
   för att lämna ett tomt hörn.                                       */
@media(max-width:860px){
  .trust-strip-wrap{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.25rem 1rem;align-items:start}
  .trust-strip-item{align-items:flex-start}
  .trust-strip-ico{margin-top:2px}
  .trust-strip-item:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ── 7 · Prisblocken: noten hoppade 28 px när värdet bröt till två rader */
@media(max-width:720px){
  .price-bar{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1rem}
  .price-item{display:grid;grid-template-rows:auto 1fr auto}
  .price-label{min-height:2.4em;display:flex;align-items:flex-end;justify-content:center}
  .price-val{font-size:1.45rem;line-height:1.15}
  .price-note{align-self:end}
}
.prisexempel-tabell td{font-variant-numeric:tabular-nums}

/* ── 11 · Föräldralösa separatortecken vid radbrytning ─────────────
   .trust-row bröt så att rad 1 slutade med ett ensamt "·".          */
@media(max-width:620px){
  .trust-row{gap:.45rem 1.1rem}
  .trust-row .trust-sep,.nav-logo-sub .trust-sep{display:none}
}

/* ── DESKTOP ────────────────────────────────────────────────────────
   Scopat till min-width så mobilputsen ovan inte påverkas.           */

/* ── D1 · Ensam rubrik i en tom halva (32 sidor) ───────────────────
   .about-inner var 1fr 2fr med align-items:center. Vänsterkolumnen
   var 359 px bred och innehöll en 31 px hög rubrik — 360×190 px tomt.
   Den befintliga v46-regeln pekar på .about-grid, en klass som inte
   finns i någon HTML-fil. Den är död kod.                            */
@media(min-width:721px){
  .about-inner{grid-template-columns:1fr!important;gap:1rem!important;
    align-items:start!important}
  .about-inner > *:not(.about-h){max-width:72ch}
}

/* ── D2 · Fyra kort i tre spalter gav ett föräldralöst kort ────────
   750×390 px tom yta mitt på startsidan.                             */
@media(min-width:1000px){.real-work-grid{grid-template-columns:repeat(4,1fr)}
  .work-card img{height:190px}}
@media(min-width:781px) and (max-width:999px){.real-work-grid{grid-template-columns:repeat(2,1fr)}}

/* ── D3 · h1 hamnade under viklinjen 921–1150 px ───────────────────
   align-items:center mot en 1313 px hög formulärkolumn gav 243–300 px
   tom yta ovanför rubriken. Träffar iPad landskap.                   */
@media(min-width:921px){.hero-grid{align-items:start}}

/* ── D4 · Tomt band 861–920 px ─────────────────────────────────────
   Heron blev enkolumn vid 920, men texten behöll max-width 30–34rem,
   så en tredjedel av skärmen stod tom. Träffar iPad porträtt.        */
@media(min-width:721px) and (max-width:920px){
  .hero-lead,.hero-usps{max-width:none}}

/* ── D5 · 290 px hål i formulärsektionens vänsterkolumn (306 sidor) */
@media(min-width:801px){.gen-form-grid{grid-template-rows:auto 1fr}}
@media(min-width:861px){.gen-form-grid{grid-template-rows:auto 1fr}}

/* ── D6 · Radlängd: 152 tecken i prisnoten, 165 i prisfoten ────────
   Över 88 tecken tappar ögat raden.                                  */
.prisexempel-ingress,.prisexempel-fot,.footer-legal,.price-foot{max-width:88ch}

/* ── D7 · Formuläret var 704 px brett på artikelsidorna ────────────
   652 px breda fält för ett telefonnummer.                           */
@media(min-width:861px){
  .form-sec .form-card .gen-form{max-width:540px;margin-inline:auto}}

/* ── D8 · Sista resten av den gamla gulan #f4c84a ──────────────────
   v39 bytte bara background. Kanten och fokusringen låg kvar och
   syns 300 px från den rena gulan i heron.                           */
.gen-alert{border-top-color:var(--yellow)}
.gen-form input:focus,.gen-form select:focus,.gen-form textarea:focus{
  outline-color:rgba(245,184,0,.45)}

/* ── D9 · Fyra olika gula glöd på knappar som ska se lika ut ───────
   30 px oskärpa i gult under en gul yta läser som ljusspill, inte
   djup. En skugga i stället för fyra.                                */
.nav-logo-mark,.nav-phone,.hero-cta,.cta-primary{
  box-shadow:0 8px 24px rgba(245,184,0,.26)}
.cta-primary:hover,.hero-cta:hover{box-shadow:0 12px 32px rgba(245,184,0,.34)}

/* ── D10 · Sticky-fältet fanns i två utseenden ─────────────────────
   Olika bakgrund, höjd, skugga, kantlinje, z-index och blur.         */
.sticky-cta,.gen-sticky-tva,.gen-sticky{
  background:rgba(9,22,37,.97);border-top:1px solid rgba(255,255,255,.10);
  box-shadow:0 -4px 20px rgba(0,0,0,.3);backdrop-filter:blur(8px);z-index:180}

/* ── D11 · Sex h2-storlekar; artikelrubriken var 70 % mindre än
   marknadsrubriken ovanför. Hierarkin var inverterad.                */
@media(min-width:861px){
  .article h2{font-size:2rem}
  .s-title,.gen-form-section h2{font-size:clamp(1.9rem,2.6vw,2.25rem)}
  .gen-content h2,.gen-section h2{font-size:clamp(1.6rem,2.3vw,2rem)}
}

/* ════════════════════════════════════════════════════════════════════
   v53 — tre fynd från Oscars genomgång på riktig enhet
   ════════════════════════════════════════════════════════════════════ */

/* ── 1 · Formulärkolumnen låg 31 px lägre än vänsterpanelen ────────
   .form-card har 28 px toppadding, så den röda badgen började 31 px
   under vänsterpanelens överkant. Kortet är genomskinligt i den mörka
   sektionen — badgen kan ligga i kant. Vita fälten kommer samtidigt
   cirka 40 px högre upp.                                             */
@media(min-width:861px){
  .form-sec .form-card{padding-top:0}
  .form-sec .form-card-tag,.form-sec .form-card-head .hero-form-badge{margin-bottom:12px}
  .form-sec .form-card-sub{margin-top:4px}
  .form-sec .form-card-head{margin-bottom:16px}
}

/* ── 2 · "Så prissätter branschen" är en fylld ruta, inte löptext ──
   Min radlängdsregel i v52 krympte hela rutan till 743 px medan
   tabellen ovanför är 1 118. Rutan ska följa tabellen; det är texten
   inuti som ska ha kortare mått — löst med indrag, inte med bredd.   */
.prisexempel-fot{max-width:none;padding-right:clamp(1rem,18%,13rem)}
.footer-legal{max-width:none}

/* ── 3 · 12 px marginal mot skärmkanten var för tight på telefon ───
   Uppmätt på riktig enhet: all text låg 12 px från kanten. 20 px är
   det mått resten av sajten redan använder på bredare skärmar.       */
@media(max-width:520px){
  .gen-wrap,.gen-content,.gen-form-grid,.gen-faq{width:min(100% - 40px,1120px)}
}
/* Gutter sätts på EN nivå. Min första version lade 20 px på de inre
   wrapparna — men sektionerna hade redan 16–32 px, så de 31 sidor som
   kör originalmallen fick 40–61 px medan de 307 gen-sidorna fick 20.  */
@media(max-width:620px){
  .wrap,.wrap-narrow,.hero-inner,.footer-wrap{padding-left:0;padding-right:0}
  section,.hero,.form-sec,.prisexempel-sec,.verifierbart-sec,.real-work,
  .sec-paper2,.related,.links-sec,.about-band,footer{
    padding-left:20px;padding-right:20px}
}

/* ════════════════════════════════════════════════════════════════════
   v54 — Oscars fyra fynd
   ════════════════════════════════════════════════════════════════════ */

/* ── 1 · Gul glöd runt gula knappar blir dis, inte djup ────────────
   rgba(245,184,0,.26) 0 8px 24px mot marinblått läser som ett smutsigt
   halo runt kanten; mot vitt som en grå smet. En gul yta behöver ingen
   gul skugga — den syns ändå.                                        */
.nav-phone,.gen-nav-cta,.nav-cta,.hero-cta,.cta-primary,
.sticky-cta a,.gen-sticky .tel-knapp,.gen-sticky-tva .tel-knapp{
  box-shadow:0 1px 2px rgba(9,22,37,.28)!important}
.nav-phone:hover,.gen-nav-cta:hover,.hero-cta:hover,.cta-primary:hover{
  box-shadow:0 4px 12px rgba(9,22,37,.34)!important}
.nav-logo-mark{box-shadow:none!important}

/* ── 2 · Fem vänsterkanter i formulärsektionen ─────────────────────
   Uppmätt på ärendesidan: rubrik 340, kortets text 368, formuläret 450,
   badgen 636. Ingenting delade kant. Allt går nu på 340, vänsterställt
   som resten av sajten.                                              */
@media(min-width:861px){
  .form-sec .form-card{padding-left:0;padding-right:0}
  .form-sec .form-card-tag,.form-sec .form-card-head .hero-form-badge{
    margin-left:0;margin-right:auto}
  .form-sec .form-card-head{text-align:left}
  .form-sec .form-card-title,.form-sec .form-card-sub{text-align:left}
  .form-sec .mottag-lofte{margin-left:0}
  .form-sec .form-card .gen-form{margin-left:0;margin-right:0;max-width:560px}
}

/* ── 3 · Prisnoten ska gå ut lika långt som tabellen ───────────────
   Jag satte padding-right i v52 för att korta radlängden. Rutan blev
   full bredd men TEXTEN slutade 200 px in — och det är texten ögat
   läser. Noten följer nu tabellens kant hela vägen.                  */
.prisexempel-fot{max-width:none!important;padding-right:1.15rem!important}
.prisexempel-ingress{max-width:none}

/* ── 4 · Prissektionen och "Bakom sajten" låg vägg i vägg ──────────
   Uppmätt glapp: 0 px på samtliga sidtyper.                          */
.prisexempel-sec{padding-bottom:2.5rem}
.verifierbart-sec{margin-top:2.5rem;border-top:1px solid var(--border,#e2e6ec)}
@media(max-width:620px){
  .prisexempel-sec{padding-bottom:1.75rem}
  .verifierbart-sec{margin-top:1.75rem}
}

/* ════════════════════════════════════════════════════════════════════
   v57 — tre fynd från live-sajten
   ════════════════════════════════════════════════════════════════════ */

/* ── 1 · Sticky-fältet renderades som en mörk platta på desktop ────
   Uppmätt 861–1440 px: .sticky-cta var 179×57 px med bakgrund
   rgba(9,22,37,.97) nere till höger — inte en list utan en låda runt
   den gula knappen. Det är en mobil-CTA; på desktop finns knappen
   redan i navigationen.                                              */
/* Fältet ska finnas kvar på desktop — men som en fritt svävande knapp,
   inte som en mörk platta. Bakgrund, kant, blur och padding bort; kvar
   blir bara den gula knappen.                                         */
@media(min-width:861px){
  /* Rad 879 döljer .gen-sticky-tva över 861 px och basregeln på rad 811
     sätter .gen-sticky{display:none} — därför saknade 309 stadssidor
     knappen på desktop.

     Synligheten styrs av sidans eget skript:
        stickyCta.classList.toggle('visible', !heroVisible && !formVisible)
     Knappen ska alltså INTE synas i heron eller när formuläret är i vy.
     Den logiken behålls; bara utseendet ändras till ett fritt pillret.  */
  .sticky-cta,.gen-sticky,.gen-sticky-tva{
    display:flex!important;
    position:fixed;right:24px;left:auto;bottom:24px;width:auto;z-index:180;
    background:transparent!important;border:0!important;box-shadow:none!important;
    backdrop-filter:none!important;padding:0!important;
    opacity:0;transform:translateY(10px)!important;pointer-events:none;
    transition:opacity .22s ease,transform .22s ease}
  .sticky-cta.visible,.gen-sticky.visible,.gen-sticky-tva.visible{
    opacity:1;transform:none!important;pointer-events:auto}
  /* Utan JS syns den alltid — hellre synlig än borta. */
  html:not(.js) .sticky-cta,html:not(.js) .gen-sticky,html:not(.js) .gen-sticky-tva{
    opacity:1;transform:none!important;pointer-events:auto}
  .gen-sticky-tva .gen-sticky-form,.sticky-cta .sticky-cta-form{display:none!important}
  .sticky-cta > a,.gen-sticky > a,.gen-sticky-tva > a,
  .sticky-cta .tel-knapp,.gen-sticky .tel-knapp,.gen-sticky-tva .tel-knapp{
    flex:0 0 auto!important;
    box-shadow:0 6px 18px rgba(9,22,37,.28)!important;border-radius:999px;
    padding:.8rem 1.4rem;white-space:nowrap}
}


/* ── 3 · Formulärsektionen var 1 576 px hög ────────────────────────
   Sex fält staplade i en kolumn. Namn+telefon och ort+brådska hör
   ihop parvis och får plats bredvid varandra från 620 px.            */
@media(min-width:620px){
  .gen-form{display:grid;grid-template-columns:1fr 1fr;gap:0 .9rem}
  .gen-form > *{grid-column:1 / -1}
  .gen-form > label:nth-of-type(1),
  .gen-form > label:nth-of-type(2){grid-column:auto}
  .gen-form > label:nth-of-type(4),
  .gen-form > label:nth-of-type(5){grid-column:auto}
}
.gen-form label{margin-bottom:.65rem}
.gen-form .lbl-rad,.gen-form label > span:first-child{margin-bottom:.2rem}

/* Den enhetliga sidfoten har 18 stadslänkar. En per rad blir 1 366 px
   på mobil — tre spalter för de korta ortnamnen halverar det.        */
@media(max-width:620px){
  /* Sidfoten stapl​as i EN spalt på mobil — v52:s tvåspaltsregel gjorde
     att varumärkeskolumnen la sig ovanpå länkkolumnen. Bara stadslistan,
     som har korta ortnamn, får två spalter.                            */
  .footer-top{grid-template-columns:1fr!important;gap:1.6rem}
  .footer-brand{grid-column:1/-1}
  .footer-col-links{display:flex;flex-direction:column;gap:.55rem}
  .footer-top > div:nth-child(3) .footer-col-links{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem .8rem}
  footer{padding-top:2.2rem}
}

/* ── Hopfällbar mobilmeny ──────────────────────────────────────────
   Skriptet sätter data-open korrekt på varje .nav-drop, men regeln
   "#navbar.menu-open .nav-drop-panel{opacity:1;pointer-events:auto}"
   visade panelen ändå. Alla 42 undersidor låg därför utfällda —
   1 939 px bara i de tre grupperna. Nu styr data-open även på mobil. */
@media(max-width:940px){
  #navbar.menu-open .nav-drop:not([data-open="true"]) .nav-drop-panel{
    display:none!important}
  #navbar.menu-open .nav-drop[data-open="true"] .nav-drop-panel{
    display:block!important}
  /* Chevronen ska visa åt vilket håll det går */
  #navbar.menu-open .nav-drop-trigger::after{transition:transform .18s ease}
  /* Hela raden ska vara tryckbar, inte bara texten */
  #navbar.menu-open .nav-drop-trigger{min-height:48px}
}

/* ── Formulärsektionen på mobil ────────────────────────────────────
   v54 vänsterställde .form-sec — men bara i @media(min-width:861px).
   På mobil låg badgen centrerad på x=111 och korttiteln center-
   justerad, medan rubrik, ingress, löfte och formulär låg på x=20.
   Samma regler gäller nu på alla bredder.                           */
@media(max-width:860px){
  .form-sec .form-card{padding-left:0;padding-right:0}
  .form-sec .form-card-head{text-align:left}
  .form-sec .form-card-tag,.form-sec .form-card-head .hero-form-badge{
    margin-left:0;margin-right:auto;display:inline-flex}
  .form-sec .form-card-title,.form-sec .form-card-sub{text-align:left}
  .form-sec .mottag-lofte{margin-left:0}
}
/* Badgen är en etikett, inte en rubrik — den ska aldrig bli en bred
   platta. En sida hade en text som sprängde pillret på mobil.        */
.hero-form-badge,.form-card-tag{max-width:100%;white-space:normal}
/* Krympte texten till 10,88 px för att en enda sida hade en för lång
   badge. Texten är nu lika med de andra 339 sidorna, så graden kan gå
   tillbaka till läsbar. */
.hero-form-badge,.form-card-tag{font-size:.72rem;letter-spacing:.07em}

/* ── Formulärets innerpadding ──────────────────────────────────────
   v52 nollade .form-card .gen-form{padding-left/right} och kompenserade
   med padding på .form-card. v54 tog bort den kompensationen för att
   vänsterställa badgen — och då hamnade etiketterna på kortets kant.
   Uppmätt: padding 18px 0px 16px på 32 sidor, 0 px innermarginal.
   Kortet får fortsätta ligga i kant; formuläret får sin padding.     */
.form-sec .form-card > form.js-lead-form,
.form-sec .form-card > .gen-form,
.form-card > form.js-lead-form,
.hero-form-card > form.js-lead-form{
  padding-left:16px!important;padding-right:16px!important}
@media(min-width:861px){
  .form-sec .form-card > form.js-lead-form,
  .form-sec .form-card > .gen-form{
    padding-left:24px!important;padding-right:24px!important}
}

/* ── v67 · TELEFONEN SKA SYNAS (2026-08-06) ───────────────────────────────
   Akutsajtens hela poang ar att kunden kan ringa NU. Fore v67 ledde varenda
   knapp till formularet - aven i Goteborg dar vi har dygnetruntjour. Nu:
   stader MED partner och alla nationella sidor visar numret i navigationen,
   i heron och i det fasta bottenfaltet. Stader UTAN partner ror vi inte -
   dar ar "Bli uppringd" fortfarande enda arliga budskapet. */
.nav-phone-text{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-andra-ort{display:inline-flex;align-items:center;gap:6px;margin-top:.9rem;
  color:rgba(255,255,255,.78);font-size:.9rem;font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px;transition:color .15s,border-color .15s}
.hero-andra-ort:hover{color:#fff;border-color:rgba(255,255,255,.6)}
.gen-hero .hero-andra-ort{margin-top:.7rem}
@media(max-width:760px){.hero-andra-ort{font-size:.85rem;margin-top:.8rem}}

/* ── v68 · STADSVÄLJARE (2026-08-06) ──────────────────────────────────────
   v67 satte "Ring 076-686 03 46" i navigationen pa VARJE sida. En stockholmare
   last det som ett rikstackande journummer, ringde, och fick ingen hjalp -
   samtidigt som Glenn brande tid pa ett arende han inte kan ta. Numret star
   kvar oavkortat pa Goteborgs sidor, dar det ar sant. Pa nationella sidor
   oppnar knappen i stallet en stadsvaljare: Goteborg ringer man direkt,
   ovriga Sverige gar till formularet. Nar nasta stad signas laggs en rad till. */
.nav-phone .stadsval-chev{transition:transform .22s;opacity:.75}
.nav-phone[aria-expanded="true"] .stadsval-chev{transform:rotate(180deg)}
.stadsval[hidden]{display:none!important}
.stadsval{position:fixed;top:0;left:0;right:0;bottom:0;z-index:300;
  background:rgba(9,22,37,.55);display:flex;align-items:flex-start;justify-content:center;
  padding:5.5rem 1rem 1rem;animation:stadsvalIn .16s ease-out}
@keyframes stadsvalIn{from{opacity:0}to{opacity:1}}
.stadsval-inner{width:100%;max-width:460px;background:var(--navy);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.5);padding:1.1rem 1rem 1rem;
  display:flex;flex-direction:column;gap:.55rem}
.stadsval-titel{font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;font-weight:700;
  color:rgba(255,255,255,.6);margin:0 0 .2rem;padding:0 .25rem}
.stadsval-rad{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 15px;border-radius:11px;text-decoration:none;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);transition:background .15s,border-color .15s}
.stadsval-rad:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
.stadsval-rad--live{background:var(--yellow);border-color:var(--yellow)}
.stadsval-rad--live:hover{background:var(--yellow-2);border-color:var(--yellow-2)}
.stadsval-stad{display:flex;flex-direction:column;gap:2px;font-weight:800;font-size:1rem;color:#fff}
.stadsval-rad--live .stadsval-stad{color:var(--navy)}
.stadsval-tid{font-weight:600;font-size:.72rem;opacity:.72}
.stadsval-prick{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3fbf6a;
  margin-right:7px;vertical-align:middle}
.stadsval-prick--av{background:rgba(255,255,255,.4)}
.stadsval-num{font-size:1.05rem;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.stadsval-cta{font-size:.9rem;font-weight:700;color:#fff;white-space:nowrap;opacity:.9}
.stadsval-fot{font-size:.78rem;line-height:1.55;color:rgba(255,255,255,.66);margin:.35rem .25rem 0}
@media(max-width:1150px){.stadsval{padding-top:4.5rem}}
@media(max-width:520px){.stadsval-num{font-size:.98rem}.stadsval-stad{font-size:.94rem}}

/* ── v69 · NUMRET FÖRST, MEN ALDRIG EN LÖGN (2026-08-06) ──────────────────
   Tre fel i v67/v68 som den har versionen rattar:
   1. Navknappen visade bara siffrorna. En stockholmare last det som ett
      rikstackande journummer. Nu star staden alltid utskriven.
   2. De 289 sidorna for stader utan partner hade ingen vag alls till
      Goteborg. Trovardigheten i en akutsajt sitter i att numret finns -
      nu ser aven en stockholmare att vi har en riktig, oppen jour.
   3. Startsidans ringknapp lag under trust-remsan, alltsa under vikningen.
      Den ar flyttad upp direkt efter sakerhetsvarningen. */
.sticky-cta--tva{display:none;gap:8px}
.sticky-cta--tva.visible{display:flex}
.sticky-cta--tva .sticky-cta-form{display:flex!important;align-items:center;justify-content:center;
  flex:1 1 0;min-width:0;min-height:48px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.4);color:#fff;font-weight:700;font-size:.92rem;
  text-decoration:none;white-space:nowrap;background:transparent;transition:background .15s}
.sticky-cta--tva .sticky-cta-form:hover{background:rgba(255,255,255,.12)}
.sticky-cta--tva .sticky-cta-phone{flex:1.35 1 0}
.gen-sticky--tva-synlig .gen-sticky-form{display:flex!important;align-items:center;justify-content:center;
  gap:6px;flex:.85 1 0;min-width:0;min-height:48px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.4);color:#fff;font-weight:700;font-size:.9rem;
  text-decoration:none;white-space:nowrap;background:transparent;transition:background .15s}
.gen-sticky--tva-synlig .gen-sticky-form:hover{background:rgba(255,255,255,.12)}
.gen-sticky--tva-synlig .tel-knapp{flex:1.25 1 0}
.hero-gbg-lank{display:inline-flex;align-items:center;gap:7px;margin-top:.85rem;
  color:var(--yellow);font-size:.88rem;font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(245,184,0,.35);padding-bottom:2px;transition:border-color .15s}
.hero-gbg-lank:hover{border-color:var(--yellow)}
.hero-gbg-lank svg{flex-shrink:0}
@media(max-width:760px){.hero-gbg-lank{font-size:.83rem}
  .sticky-cta--tva .sticky-cta-phone{font-size:.86rem}
  .sticky-cta--tva .sticky-cta-form{font-size:.86rem}
  .gen-sticky--tva-synlig .gen-sticky-form{font-size:.84rem}}

/* v69b · 390 px: "Ring Göteborg · 076-686 03 46" bredvid "Bli uppringd" blev
   232 px text i ett 170 px brett flexbarn och kapades mitt i siffrorna.
   Staden ar det som maste synas - numret ringer man anda genom att trycka. */
@media(max-width:560px){
  .sticky-cta--tva .sticky-num,.gen-sticky--tva-synlig .sticky-num{display:none}
  .sticky-cta--tva,.gen-sticky--tva-synlig{padding-left:.7rem;padding-right:.7rem;gap:7px}
  .sticky-cta--tva .sticky-cta-phone,.gen-sticky--tva-synlig .tel-knapp{flex:1.15 1 0}
}

/* ── v70 · SCHEMA OCH SIDFOT (2026-08-06) ─────────────────────────────────
   Sidfoten hade en fardigstylad .footer-phone som pekade pa formularet -
   samma monster som .nav-phone. Nu ringer den, och staden star utskriven.
   Schemat sakande telephone helt: Google kunde inte visa en ringknapp i
   sokresultatet. Numret ligger nu i varje Organization med contactPoint,
   areaServed Goteborg och oppettider dygnet runt. */
.footer-jourtext{font-size:.78rem;line-height:1.55;color:rgba(255,255,255,.6);margin:.6rem 0 0;max-width:30rem}
.footer-jourtext a{color:var(--yellow);text-decoration:none;border-bottom:1px solid rgba(245,184,0,.35)}
.footer-jourtext a:hover{border-color:var(--yellow)}

/* ── v71 · SEKUNDÄRKNAPPEN VAR OSYNLIG PÅ LJUS BAKGRUND ───────────────────
   Pa mobil ar bottenfaltet ett morkt band och en genomskinlig knapp med vit
   kantlinje fungerar. Pa desktop ar samma faalt en flytande pill UTAN
   bakgrund - da blev vit text pa vit sida osynlig. Sekundarknappen far en
   egen solid yta i stallet for att lana bandets.
   Etiketten sa dessutom bara "Bli uppringd" bredvid "Ring Goteborg", vilket
   last som att man blir uppringd i Goteborg. Nu star orten forst. */
@media(min-width:721px){
  .sticky-cta--tva .sticky-cta-form{
    background:var(--navy)!important;color:#fff!important;
    border:1px solid rgba(255,255,255,.22)!important;
    box-shadow:var(--shadow-pop);padding:.9rem 1.2rem;font-size:.95rem;min-height:0}
  .sticky-cta--tva .sticky-cta-form:hover{background:#16324f!important}
}
@media(max-width:560px){.sticky-ort{display:none}}

/* ── v72 · TVÅ MÄTTA LÄCKOR (2026-08-06) ──────────────────────────────────
   1. Mobil: heroknappen lamnade skarmen vid ~400 px och bottenfaltet kom
      forst vid ~700. Trehundra pixlar utan nagon vag att ringa, mitt i det
      mest kopstarka skrollintervallet. Under 721 px doljs faltet nu bara
      nar formularet syns.
   2. Formularet kravde namn, telefon OCH ort. Namnet behovs inte for att
      ringa upp nagon - vi far det pa sekund tva av samtalet. Varje
      obligatoriskt falt kostar ifyllnad. */
@media(max-width:720px){
  .sticky-cta,.gen-sticky,.gen-sticky-tva{transition:opacity .18s,transform .18s}
}