/* ==========================================================================
   Kopparrak El – koncept 4
   Statisk sajt. En familj (Archivo), radie 0, hårda kanter, inga gradienter.
   Endast transform och opacity animeras.

   Rutnät: 4 kolumner på mobil, 8 från 768 px, 12 från 1024 px.
   Innehållet börjar i kolumn 3. Ledningen ligger i rännan mellan kolumn 2
   och 3, och sektionsnumret i kolumn 1–2.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --papper: #FFFFFF;
  --blak: #0B0B0B;
  --gul: #FFE100;
  --kobolt: #1D3BE8;
  --signal: #FF5A1F;
  --grafit: #3A3A3A;
  --dampad: #5C5C5C;
  --etikett: #2A2A2A;
  --mork-yta: #181818;
  --mork-dampad: #A3A3A3;

  --fokus: var(--blak);
  --trad: var(--kobolt);

  --marg: 16px;
  --ranna: 16px;
  --max: 1440px;
  --luft: 56px;
  --kol: 4;

  --streck: 3px;

  /*
   * Rutnätet mäts i cqw mot .ram, så kolumnbredden alltid stämmer.
   * --wire-ram är ledningens mittlinje räknat från .ram:s innerkant (där en
   * absolut positionerad ledning har sitt noll).
   * --wire-in är samma linje räknat från innehållets vänsterkant.
   * --kant är linjen räknat från ett block som börjar i kolumn 3.
   */
  --kolw: calc((100cqw - (var(--kol) - 1) * var(--ranna)) / var(--kol));
  /* ledningens mitt, räknat från .ram:s ytterkant */
  --wire-ram: 16px;
  /* strömbrytarens mitt, räknat från hero-textens vänsterkant */
  --hero-wire: 0px;
  /* ledningens vänsterkant. Absolut positionering räknas mot paddingrutan,
     alltså mot samma kant som strömbrytaren, oavsett textens indrag. */
  --hero-line: calc(var(--hero-wire) - var(--streck) / 2);
  /* textens indrag i heron, så att den aldrig nuddar linjen */
  --hero-indent: 28px;
  --hero-pad: 32px;
  /* ledningens mitt räknat från ett block som börjar i kolumn 3 (mobil: samma kant) */
  --kant: calc(16px - var(--marg) + 1.5px);

  --kurva: cubic-bezier(0.22, 1, 0.36, 1);
  --steg: steps(6, end);
  --t-hover: 200ms;
  --t-tryck: 120ms;
  --t-byte: 280ms;
  --t-in: 500ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--papper);
  color: var(--blak);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 400;
  font-synthesis: none;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
svg { display: block; flex: none; }
p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 700; }
a { color: var(--kobolt); }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }

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

/* ---------- banderoll och hopplänk ---------- */

.konceptband {
  margin: 0;
  max-width: none;
  display: block;
  background: var(--blak);
  color: var(--gul);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  padding: 10px var(--marg);
}

.hoppa {
  position: absolute;
  left: 8px;
  top: -120px;
  z-index: 90;
  background: var(--gul);
  color: var(--blak);
  padding: 12px 20px;
  font-weight: 700;
  border: 3px solid var(--blak);
  text-decoration: none;
}
.hoppa:focus { top: 8px; }

/* ---------- ram och innehållsrutnät ---------- */

.ram {
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--marg);
  container-type: inline-size;
}

.innehall {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--ranna);
  align-items: start;
}
.innehall > * { min-width: 0; }

/* På mobil får ledningen en egen ränna i vänstermarginalen. */
.innehall:not(.hero-ram) { padding-left: var(--hero-indent); }

/* ---------- ledningen ---------- */

.ledning {
  position: absolute;
  left: calc(var(--wire-ram) - var(--streck) / 2);
  top: 0;
  bottom: 0;
  width: var(--streck);
  z-index: 1;
  pointer-events: none;
}
.seg {
  position: absolute;
  display: block;
  background: var(--trad);
}
.seg-v {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: top center;
}

.nod {
  display: block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--blak);
  background: var(--signal);
}

.sektion--kobolt, .sektion--svart, .tagline, .sidfot, .kontakt { --trad: var(--gul); }
.sektion--kobolt .nod,
.sektion--svart .nod,
.tagline .nod,
.kontakt .nod,
.lamprad .nod { border-color: var(--gul); }

/* ---------- etikett och demoknapp ---------- */

.etikett-exempel {
  display: inline-block;
  margin: 0;
  padding: 2px 8px;
  border: 1px solid var(--etikett);
  border-radius: 0;
  background: var(--etikett);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  vertical-align: 0.12em;
  white-space: nowrap;
}

/*
 * Skuggan är ett hårt, förskjutet block utan blur, ritat med box-shadow.
 * Den ritas utanför elementet och kan därför aldrig hamna ovanpå texten.
 * Färgen sätts per yta: svart på ljusa ytor, vit på svart.
 */
.demo-knapp {
  display: inline-block;
  position: relative;
  background: var(--blak);
  color: var(--gul);
  border: 2px solid var(--blak);
  padding: 14px 22px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: default;
  box-shadow: 6px 6px 0 var(--skugga, var(--blak));
}
.demo-knapp--liten { padding: 9px 14px; font-size: 0.875rem; }
.demo-knapp--stor { padding: 14px 18px; font-size: 1.375rem; line-height: 1.14; }

/* ---------- sidhuvud ---------- */

.sidhuvud {
  background: var(--papper);
  border-bottom: 2px solid var(--blak);
  position: relative;
  z-index: 40;
}
.sidhuvud-inre {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding-block: 10px;
}
.namn {
  font-weight: 700;
  font-stretch: 125%;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--blak);
  text-decoration: none;
  white-space: nowrap;
  margin-right: auto;
}
.namn:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }

.huvudnav { display: none; }
.huvudnav ul { display: flex; gap: 20px; }
.huvudnav a {
  color: var(--blak);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  padding-block: 9px;
  position: relative;
}
.huvudnav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 3px;
  height: 3px;
  background: var(--kobolt);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-hover) var(--kurva);
}
.huvudnav a:hover::after,
.huvudnav a:focus-visible::after { transform: scaleX(1); }
.sidhuvud-inre > .demo-knapp { display: none; }

.mobilnav { position: relative; }
.mobilnav > summary {
  list-style: none;
  cursor: pointer;
  border: 2px solid var(--blak);
  padding: 10px 14px;
  font-size: 0.875rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.mobilnav > summary::-webkit-details-marker { display: none; }
.mobilnav > summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--t-hover) var(--kurva);
}
.mobilnav[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.mobilnav nav {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(78vw, 300px);
  background: var(--papper);
  border: 2px solid var(--blak);
  padding: 6px;
  z-index: 50;
}
.mobilnav ul { display: grid; gap: 2px; }
.mobilnav a {
  display: block;
  padding: 13px 12px;
  color: var(--blak);
  text-decoration: none;
  font-weight: 600;
  min-height: 44px;
}
.mobilnav a:hover { background: var(--gul); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { position: relative; background: var(--papper); }

.hero-ram { padding-block: 0; padding-top: 20px; }
.hero-ram.innehall { padding-block: 0; padding-top: 20px; }
.hero-ram.innehall { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* gult fält i kolumn 1–8 på dator, hela bredden på mobil */
.hero-falt {
  grid-column: 1 / -1;
  grid-row: 1;
  background: var(--gul);
  margin-inline: calc(-1 * var(--marg));
  margin-top: -20px;
  align-self: stretch;
  transform-origin: left center;
  z-index: 0;
}

.hero-tekst {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  padding-bottom: 32px;
}

.tagg {
  margin: 0 0 12px;
  color: var(--grafit);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero h1 {
  font-size: 3.5rem;
  line-height: 0.92;
  font-stretch: 100%;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 13ch;
}

/* viftan: höjd för strömbrytaren, som sitter exakt på ledningens x */
.vifta {
  position: relative;
  height: 58px;
  flex: none;
}
.strombrytare {
  position: absolute;
  left: var(--hero-wire);
  top: 4px;
  transform: translateX(-50%);
  width: 24px;
  height: 50px;
  background: var(--papper);
  border: 2px solid var(--blak);
  display: block;
  z-index: 3;
}
.strombrytare .vippa {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 4px;
  height: 22px;
  background: var(--blak);
  display: block;
  transform-origin: center 17px;
}
.strombrytare::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 31px;
  width: 10px; height: 10px;
  margin-left: -5px;
  border: 2px solid var(--blak);
  background: var(--signal);
}

/*
 * Ledningen i heron börjar i strömbrytarens underkant, där .hero-rest tar vid,
 * och går rakt ned till det gula fältets underkant.
 */
.hero-rest { position: relative; }

.hero .ledning {
  left: var(--hero-line);
  top: 0;
  bottom: calc(-1 * var(--hero-pad));
  z-index: 2;
}

.hero-rest > p:last-child { margin-bottom: 0; }

.hero-tekst > .tagg,
.hero-tekst > h1,
.hero-tekst > .hero-rest { padding-left: var(--hero-indent); }

.ingress {
  font-size: 1.125rem;
  line-height: 1.5;
  max-width: 40ch;
  margin: 0 0 24px;
}
.hero-cta { margin: 0 0 18px; }
.hero-lank { margin: 0 0 22px; }
.pil-lank {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blak);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  min-height: 44px;
}
.pil-lank .ikon { transition: transform var(--t-hover) var(--kurva); }
.pil-lank:hover .ikon { transform: translateY(5px); }

.fortroende {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.exempel-info {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--grafit);
  max-width: 44ch;
}

.hero-media {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  position: relative;
  z-index: 1;
  margin-top: 0;
  margin-inline: calc(-1 * var(--marg));
}
.hero-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-top: 2px solid var(--blak);
}

/* ==========================================================================
   Kinetiskt band
   ========================================================================== */

.band {
  position: relative;
  background: var(--gul);
  border-top: 2px solid var(--blak);
  border-bottom: 2px solid var(--blak);
  z-index: 3;
}
.band-ram { overflow: hidden; }
.band-ram { position: relative; }
.band-spar { display: flex; width: max-content; }
.band-text {
  font-size: 3rem;
  font-weight: 700;
  font-stretch: 125%;
  line-height: 0.95;
  letter-spacing: -0.025em;
  padding: 16px 0;
  white-space: nowrap;
  color: var(--blak);
}
.ledning--band {
  top: 0;
  bottom: 0;
  z-index: 2;
}

/* ==========================================================================
   Sektioner
   ========================================================================== */

.sektion { position: relative; z-index: 2; }
.sektion > .ram { padding-block: var(--luft); }
.sektion--vit { background: var(--papper); }
.sektion--kobolt { background: var(--kobolt); color: #FFFFFF; --fokus: var(--gul); }
/*
 * På gula ytor används alltid det riktiga koboltvärdet, aldrig --kobolt, som i
 * mörkt läge är gult. Annars blir siffran och linjen gul på gul.
 */
.sektion--gul {
  background: #FFE100;
  color: #0B0B0B;
  --trad: #1D3BE8;
}
.sektion--gul .nummer,
.sektion--gul .av-h,
.sektion--gul .av-v,
.sektion--gul .av-h2 { color: #1D3BE8; background-color: #1D3BE8; }
.sektion--gul .nummer { background-color: transparent; }
.sektion--gul .nod { border-color: #0B0B0B; }
.sektion--svart { background: var(--blak); color: #FFFFFF; --fokus: var(--gul); }
.sektion--kobolt a { color: var(--gul); }

/* innehållet börjar i kolumn 3, numret står i kolumn 1–2 */
.sektionshuvud {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  margin-bottom: 32px;
}
.tjanstgrid,
.jobb,
.stegomrade,
.casegrid,
.citatgrid,
.fragor,
.tagline-text,
.kontaktblock {
  grid-column: 1 / -1;
}

.sektionsrubrik {
  position: relative;
  font-size: 1.75rem;
  line-height: 1.06;
  font-stretch: 125%;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.rubriktext { display: block; }

/* numret: egen kolumnplats på mobil, absolut i kolumn 1–2 från 768 px */
.nummer {
  position: relative;
  display: block;
  width: max-content;
  font-size: 1.25rem;
  font-weight: 700;
  font-stretch: 125%;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
  color: var(--kobolt);
}
.sektion--kobolt .nummer,
.sektion--svart .nummer { color: var(--gul); }

/*
 * Sifferhjulet: .rulle är den fasta klipprutan och .rulle-spar är bandet som
 * flyttas. Transformen ligger alltså på det inre elementet, aldrig på den
 * klippande rutan, så att det synliga talet alltid är det undre.
 * Utan JS, och med reducerad rörelse, står bandet redan på plats.
 */
.rulle {
  display: block;
  height: 0.9em;
  overflow: hidden;
}
.rulle-spar {
  display: block;
  height: 1.8em;
  transform: translateY(-0.9em);
}
.rulle-spar > span { display: block; height: 0.9em; }

/* svängen från ledningen in mot numret ritas bara där det finns plats */
.avstick { display: none; }

.sektionsingress {
  font-size: 1.0625rem;
  line-height: 1.5;
  max-width: 44ch;
  margin: 0;
}

/* ---------- tjänster ---------- */

.tjanstgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
/* Under 360 px ryms inte två kort: de blev 88 px breda och texten flödade
   över. Ett kort per rad i stället. overflow-wrap:anywhere bryter långa ord
   utan att vi behöver lita på att webbläsaren har en svensk ordlista. */
@media (max-width: 359.98px) {
  .tjanstgrid { grid-template-columns: 1fr; }
}
.tjanstgrid h3 {
  overflow-wrap: anywhere;
}
.kort {
  position: relative;
  background: var(--papper);
  border: 2px solid var(--blak);
  color: var(--blak);
  overflow: hidden;
}
.kort::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gul);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform var(--t-hover) var(--kurva);
  z-index: 0;
}
.kort:hover::before,
.kort:focus-within::before { transform: scaleY(1); }
.kort-inre {
  position: relative;
  z-index: 1;
  padding: 18px 16px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 4px 10px;
}
.kortnummer {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: var(--grafit);
}
.kortikon { color: var(--blak); }
.kort h3 {
  grid-column: 1 / -1;
  font-size: 1.125rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 6px 0 2px;
  overflow-wrap: anywhere;
}
/* Vid 768 px är kortet 120 px brett och "Uttag och strömbrytare" flödade
   över kanten. Låt rubriken bryta mellan orden i stället. */
@media (min-width: 360px) and (max-width: 767.98px) {
  .kort h3 { font-size: 1rem; overflow-wrap: break-word; }
}
.kort p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  max-width: 42ch;
}

/* ---------- bred bild ---------- */

.bredbild-fack { position: relative; background: var(--papper); z-index: 2; --trad: var(--blak); }
.bredbild-fack .ram { padding-block: 0; }
.bredbild {
  position: relative;
  grid-column: 1 / -1;
  margin: 0 0 0 calc(-1 * var(--marg));
  border-top: 2px solid var(--blak);
  border-bottom: 2px solid var(--blak);
}
.bredbild img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ---------- jobbväljaren ---------- */

.jobb { display: grid; gap: 20px; }

.jobb-val {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.jobb-markering {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  background: var(--gul);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.js-klar .jobb-val.ar-mark .jobb-markering {
  opacity: 1;
  transition: transform var(--t-byte) var(--kurva);
}
.js-klar .jobb-val.ar-mark .jobb-platta:has(input:checked) {
  background: transparent;
  color: var(--blak);
  border-color: var(--blak);
}

.jobb-platta {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 92px;
  padding: 14px;
  border: 2px solid #FFFFFF;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  z-index: 1;
}
.jobb-platta--bred { grid-column: 1 / -1; min-height: 64px; align-items: center; }
.jobb-namn { display: block; }
.jobb-ikon { opacity: 0.95; }
.jobb-platta input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}
/* ringen ritas på etiketten nedan, aldrig på den dolda rutan */
.jobb-platta input:focus-visible { outline: none; }
.jobb-platta:has(input:checked) {
  background: var(--gul);
  color: var(--blak);
  border-color: var(--gul);
}
.jobb-platta:hover { border-color: var(--gul); }
.jobb-platta:has(input:checked):hover { border-color: var(--blak); }
.jobb-platta:has(input:focus-visible) { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.jobb-platta:has(input:checked):has(input:focus-visible) { outline-color: #FFFFFF; }

.jobb-paneler { border: 2px solid #FFFFFF; padding: 20px 18px; }
.jobb-panel h3 {
  font-size: 1.375rem;
  line-height: 1.1;
  color: var(--gul);
  margin: 0 0 18px;
}
.jobb-panel h4 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0 0 8px;
}
.jobb-kolumner { display: grid; gap: 18px; margin-bottom: 18px; }
.jobb-kolumner ul { display: grid; gap: 7px; }
.jobb-kolumner li {
  position: relative;
  padding-left: 20px;
  color: #FFFFFF;
  font-size: 0.9375rem;
  line-height: 1.45;
  max-width: 42ch;
}
.jobb-kolumner li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 9px;
  height: 3px;
  background: var(--gul);
}
.jobb-tid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  border-top: 2px solid #FFFFFF;
  padding-top: 14px;
  margin: 0 0 12px;
  color: #FFFFFF;
  font-size: 0.9375rem;
  max-width: none;
}
.tid-etikett { font-weight: 600; }
.tid {
  display: inline-block;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--gul);
  font-variant-numeric: tabular-nums;
}
.jobb-nasta {
  margin: 0;
  color: #FFFFFF;
  font-size: 0.9375rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: none;
}
/* gul yta med svart text i båda lägena, enligt planen */
.jobb-nasta .demo-knapp {
  background: var(--gul);
  color: #0B0B0B;
  border-color: #0B0B0B;
  --skugga: #0B0B0B;
}

/* Utan :has visas alla paneler staplade, med :has bara den valda. */
.jobb-panel { display: block; }
.jobb-panel + .jobb-panel { margin-top: 24px; padding-top: 24px; border-top: 2px solid #FFFFFF; }
@supports selector(:has(*)) {
  .jobb-panel { display: none; }
  .jobb-panel + .jobb-panel { margin-top: 0; padding-top: 0; border-top: 0; }
  .jobb:has(input[value="uttag"]:checked) .jobb-panel[data-jobb="uttag"],
  .jobb:has(input[value="belysning"]:checked) .jobb-panel[data-jobb="belysning"],
  .jobb:has(input[value="laddbox"]:checked) .jobb-panel[data-jobb="laddbox"],
  .jobb:has(input[value="elcentral"]:checked) .jobb-panel[data-jobb="elcentral"],
  .jobb:has(input[value="felsokning"]:checked) .jobb-panel[data-jobb="felsokning"] { display: block; }
}

/* ---------- så går det till ---------- */

.stegomrade { position: relative; padding-top: 26px; }
.steg { display: grid; gap: 24px; position: relative; }
.steg::before {
  content: "";
  position: absolute;
  left: var(--kant);
  right: 0;
  top: -26px;
  height: var(--streck);
  background: var(--trad);
}
.steg-post { position: relative; }
.steg-post::before {
  content: "";
  position: absolute;
  left: var(--kant);
  top: -32px;
  width: 13px;
  height: 13px;
  margin-left: -5px;
  margin-top: -6.5px;
  border: 2px solid var(--blak);
  background: var(--signal);
  z-index: 2;
}
.stegnummer {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grafit);
}
.steg h3 { font-size: 1.375rem; line-height: 1.14; margin: 0 0 6px; letter-spacing: -0.01em; }
.steg p:last-child { margin: 0; font-size: 0.9375rem; max-width: 34ch; }

/* ---------- utförda jobb ---------- */

.casegrid { display: grid; gap: 16px; }
.case {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--blak);
}
.case-bild {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.case-text {
  padding: 18px 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case--gul .case-text { background: var(--gul); color: var(--blak); }
.case--kobolt .case-text { background: var(--kobolt); color: #FFFFFF; }
.case-text h3 { font-size: 1.25rem; line-height: 1.12; margin: 0; }
.case-text p { margin: 0; font-size: 0.9375rem; line-height: 1.45; }
.case-siffra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: auto !important;
  padding-top: 8px;
}
.case--kobolt .etikett-exempel { background: #FFFFFF; border-color: #FFFFFF; color: var(--blak); }

/* ---------- tagline ---------- */

.tagline {
  position: relative;
  background: var(--blak);
  color: #FFFFFF;
  --fokus: var(--gul);
  z-index: 2;
}
.tagline > .ram { padding-block: 64px; }
.tagline-text {
  position: relative;
  z-index: 2;
  font-size: 2.5rem;
  line-height: 0.96;
  font-stretch: 125%;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 15ch;
}
.tagline .ord { display: inline-block; }
/* orden bryts bara mellan hela ord, aldrig så att en punkt blir ensam */
.tagline-text { text-wrap: balance; }
.tagline-punkt { white-space: nowrap; }
.markerad { position: relative; display: inline-block; }
.markerad::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: 0.06em;
  height: 0.09em;
  background: var(--signal);
  transform-origin: left center;
  z-index: -1;
}

/* ---------- omdömen ---------- */

.citatgrid { display: grid; gap: 24px; }
.citat {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--blak);
  padding-top: 16px;
}
.citat blockquote { margin: 0 0 14px; }
.citat blockquote p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.005em;
  max-width: 32ch;
}
.citat blockquote .etikett-exempel { margin-right: 6px; }
.avsandare {
  margin: auto 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--grafit);
}

/* ---------- frågor ---------- */

.fragor { border-top: 2px solid var(--blak); }
.fraga { border-bottom: 2px solid var(--blak); }
.fraga summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  min-height: 56px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.fraga summary::-webkit-details-marker { display: none; }
.fraga summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.plus {
  position: relative;
  flex: none;
  width: 18px; height: 18px;
  transition: transform var(--t-hover) var(--kurva);
}
.plus::before,
.plus::after { content: ""; position: absolute; background: var(--blak); }
.plus::before { left: 0; right: 0; top: 8px; height: 2px; }
.plus::after { top: 0; bottom: 0; left: 8px; width: 2px; }
.fraga[open] .plus { transform: rotate(45deg); }
.fraga p {
  margin: 0;
  padding: 0 0 20px;
  font-size: 1rem;
  max-width: 58ch;
  color: var(--grafit);
}

/* ==========================================================================
   Kontakt: ledningen slutar i lampan
   ========================================================================== */

.kontakt {
  --fokus: var(--gul);
  --trad: var(--gul);
  --lamphojd: 124px;
}

.kontakt-topp {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  padding-left: var(--hero-indent);
}

/*
 * Ledningen ligger i .kontakt-topp, som är det block som slutar exakt där
 * lampraden börjar. Därför räknas x från kontakt-toppens egen vänsterkant.
 */
.kontakt .ledning {
  left: calc(var(--wire-ram) - var(--marg) - var(--hero-indent) - var(--streck) / 2);
  top: calc(-1 * var(--luft));
  bottom: -24px;
}

@media (min-width: 768px) {
}

.lamprad {
  position: relative;
  grid-column: 1 / -1;
  height: var(--lamphojd);
  margin-top: 24px;
  margin-left: calc(-1 * var(--hero-indent));
  z-index: 2;
}
.lamprad .seg-arm {
  position: absolute;
  left: 0;
  top: 0;
  width: 88px;
  height: var(--streck);
  background: var(--trad);
  transform-origin: left center;
  display: block;
}
.lamprad .nod {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  margin-left: -4.5px;
  margin-top: -4.5px;
}

/* lampan: sladd, sockel och en glödlampa som tänds när ledningen nått fram */
.lampa {
  position: absolute;
  left: 88px;
  top: 0;
  width: 64px;
  height: 116px;
  margin-left: -32px;
  display: block;
}
.lampa-sladd {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--streck);
  height: 26px;
  margin-left: calc(var(--streck) / -2);
  background: var(--trad);
  display: block;
  transform-origin: top center;
}
.lampa-sockel {
  position: absolute;
  left: 50%;
  top: 26px;
  width: 26px;
  height: 18px;
  margin-left: -13px;
  background: #0B0B0B;
  border: 2px solid #FFFFFF;
  display: block;
  transform-origin: top center;
  overflow: hidden;
}
/* två gängvarv i sockeln, ritade som hårlinjer */
.lampa-sockel::before,
.lampa-sockel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #FFFFFF;
}
.lampa-sockel::before { top: 4px; }
.lampa-sockel::after { top: 10px; }

.lampa-kupa {
  position: absolute;
  left: 50%;
  top: 44px;
  width: 46px;
  height: 52px;
  margin-left: -23px;
  border: 2px solid #FFFFFF;
  border-radius: 50% 50% 42% 42% / 56% 56% 44% 44%;
  display: block;
  transform-origin: top center;
  overflow: hidden;
}
/* glödlampans fyllning: en platt gul yta som tonas in, ingen glöd */
.lampa-kupa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gul);
  opacity: 1;
}
.lampa-glod {
  position: absolute;
  left: 50%;
  top: 16px;
  width: 14px;
  height: 20px;
  margin-left: -7px;
  border-top: 2px solid #0B0B0B;
  border-left: 2px solid #0B0B0B;
  border-right: 2px solid #0B0B0B;
  display: block;
  z-index: 2;
  opacity: 0;
}

.kontaktblock { display: grid; gap: 28px; padding-left: var(--hero-indent); }

.kontakt-etikett {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gul);
}
.kontakt-vanster > p { margin: 0 0 16px; }
.kontakt-ring { margin-bottom: 26px !important; line-height: 1; }
.kontakt-omrade { margin-bottom: 6px !important; }
.kontakt-demo {
  font-size: 0.8125rem;
  color: var(--mork-dampad);
  max-width: 38ch;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}
.kontakt .demo-knapp {
  background: var(--gul);
  color: var(--blak);
  border-color: var(--gul);
  --skugga: #FFFFFF;
}
.kontakt .kontakt-ring .demo-knapp--stor { font-size: clamp(1.5rem, 7vw, 2.25rem); }

/* demoformulär */
.demoformular {
  background: var(--mork-yta);
  border: 2px solid #FFFFFF;
  padding: 20px 18px 24px;
  color: #FFFFFF;
  position: relative;
  z-index: 2;
}
.formular-demo {
  display: inline-block;
  margin: 0 0 14px;
  background: var(--gul);
  color: var(--blak);
  padding: 4px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.demoformular h3 { font-size: 1.375rem; line-height: 1.1; margin: 0 0 18px; }
.falt { margin-bottom: 14px; }
.falt label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.falt input,
.falt textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--blak);
  background: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 0;
  padding: 11px 12px;
  min-height: 48px;
}
.falt textarea { resize: vertical; min-height: 104px; }
.falt input::placeholder,
.falt textarea::placeholder { color: var(--dampad); opacity: 1; }
.falt input:focus-visible,
.falt textarea:focus-visible { outline: 3px solid var(--gul); outline-offset: 3px; }
.formular-knapp { margin: 0; }
.knapp-demo {
  font: inherit;
  font-weight: 700;
  background: var(--gul);
  color: var(--blak);
  border: 2px solid var(--gul);
  border-radius: 0;
  padding: 13px 22px;
  min-height: 48px;
  cursor: pointer;
  transition: transform var(--t-tryck) var(--kurva);
}
.knapp-demo:active { transform: translate(3px, 3px); }
.knapp-demo:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.formular-status {
  margin: 14px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--mork-dampad);
  max-width: 42ch;
}

/* ---------- sidfot ---------- */

.sidfot {
  background: var(--blak);
  color: #FFFFFF;
  --fokus: var(--gul);
  position: relative;
  z-index: 2;
}
.sidfot .konceptband {
  border-top: 2px solid #3A3A3A;
  border-bottom: 2px solid #3A3A3A;
}
.sidfot-inre { padding-block: 32px 40px; gap: 6px; }
.sidfot-inre p {
  margin: 0;
  font-size: 1rem;
  color: var(--mork-dampad);
  max-width: 54ch;
}
.sidfot-namn {
  font-weight: 700;
  font-stretch: 125%;
  font-size: 1.5rem !important;
  color: #FFFFFF !important;
  letter-spacing: -0.01em;
}
.sidfot-inre a { color: var(--gul); font-weight: 700; }
.sidfot-copy { font-size: 0.8125rem !important; }

/* ==========================================================================
   Rörelse: snäpp
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /*
   * H1 ritas färdig i första målningen och animeras aldrig. Taggraden och
   * ingressen glider bara i sidled (translateY), utan opacity, så att den
   * största texten är läsbar och räknas som LCP direkt. Opacity-entrén
   * används bara på element under rubriken.
   */
  .hero-falt { animation: falt-in 500ms var(--kurva) both; }
  .tagg { animation: glid-upp 300ms var(--kurva) 60ms both; }
  .ingress { animation: glid-upp 300ms var(--kurva) 120ms both; }
  .hero-cta { animation: in-upp 300ms var(--kurva) 180ms both; }
  .hero-lank { animation: in-upp 300ms var(--kurva) 240ms both; }
  .fortroende { animation: in-upp 300ms var(--kurva) 300ms both; }
  .exempel-info { animation: in-upp 300ms var(--kurva) 300ms both; }
  .hero-media { animation: in-ton 400ms var(--kurva) 120ms both; }
  .strombrytare .vippa { animation: vippa 400ms var(--kurva) 300ms both; }
}
@keyframes falt-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes in-upp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes glid-upp { from { transform: translateY(12px); } to { transform: translateY(0); } }
@keyframes in-ton { from { opacity: 0; } to { opacity: 1; } }
@keyframes vippa { from { transform: scaleY(0.15); } to { transform: scaleY(1); } }

/* Ledningen är färdigdragen i grundtillståndet. Bara html.js-klar utan
   reducerad rörelse nollar den och ritar upp, så inget kan gömmas permanent. */
@media (prefers-reduced-motion: no-preference) {
  .js-klar .ledning .seg-v,
  .js-klar .lamprad .seg-arm { transform: scale(0); }

  .js-klar .ar-rit .ledning .seg-v,
  .js-klar .lamprad.ar-tand .seg-arm { transform: scale(1); }

  .js-klar .ledning .seg-v { transition: transform 500ms var(--kurva); }
  .js-klar .lamprad .seg-arm { transition: transform 160ms var(--kurva) 280ms; }

  .js-klar .lamprad .nod,
  .js-klar .lamprad .lampa-sladd,
  .js-klar .lamprad .lampa-sockel,
  .js-klar .lamprad .lampa-kupa {
    opacity: 0;
    transform: scaleY(0);
  }
  .js-klar .lamprad .nod { transform: scale(0.4); }
  .js-klar .lamprad.ar-tand .nod,
  .js-klar .lamprad.ar-tand .lampa-sladd,
  .js-klar .lamprad.ar-tand .lampa-sockel,
  .js-klar .lamprad.ar-tand .lampa-kupa {
    opacity: 1;
    transform: scale(1);
    transition: opacity 260ms var(--kurva), transform 300ms var(--kurva);
  }
  .js-klar .lampa-kupa::after { opacity: 0; transition: opacity 300ms var(--kurva) 120ms; }
  .js-klar .lamprad.ar-tand .lampa-kupa::after { opacity: 1; }
  .js-klar .lampa-glod { transition: opacity 300ms var(--kurva) 120ms; }
  .js-klar .lamprad.ar-tand .lampa-glod { opacity: 0; }

  .js-klar .steg-post::before {
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 200ms var(--kurva) 180ms, transform 200ms var(--kurva) 180ms;
  }
  .js-klar .ar-rit .steg-post::before { opacity: 1; transform: scale(1); }

  /*
   * Hjulet vilar alltid på det riktiga talet. Rullningen är en engångs-
   * animation som startar på föregående tal, så grundtillståndet kan aldrig
   * visa fel siffra innan sektionen har observerats.
   */
  .js-klar .ar-rullad .rulle-spar {
    animation: rulle-in 220ms var(--steg) both;
  }
  @keyframes rulle-in {
    from { transform: translateY(0); }
    to { transform: translateY(-0.9em); }
  }

  .js-klar .avstick .av-h,
  .js-klar .avstick .av-v,
  .js-klar .avstick .av-h2 {
    transform: scale(0);
    transition: transform 160ms var(--kurva) 320ms;
  }
  .js-klar .ar-rullad .avstick .av-h,
  .js-klar .ar-rullad .avstick .av-v,
  .js-klar .ar-rullad .avstick .av-h2 { transform: scale(1); }

  .js-klar .markerad::after { transform: scaleX(0); transition: transform 320ms var(--kurva) 140ms; }
  .js-klar .ar-rit .markerad::after { transform: scaleX(1); }
  .js-klar .tagline .ord {
    transition: transform 200ms var(--kurva);
    transition-delay: calc(var(--i, 0) * 40ms);
  }
  .js-klar .tagline.ar-ryck .ord { transform: translateX(0.09em); }

  .js-klar .jobb-panel.ar-byte { animation: panel-in var(--t-byte) var(--kurva) both; }
  .js-klar .jobb-panel.ar-byte .tid { animation: tid-in 300ms var(--steg) both; }
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tid-in {
  from { opacity: 0; transform: translateY(0.45em); }
  to { opacity: 1; transform: translateY(0); }
}

/* bandet rör sig bara när man skrollar */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .band-spar {
      animation: band-glid linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes band-glid {
  from { transform: translateX(0); }
  to { transform: translateX(-32%); }
}

/* lodräta segment följer skrollen där webbläsaren stöder det */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js-klar .ledning .seg-v {
      animation: rit-v linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 60%;
      transition: none;
    }
  }
}
@keyframes rit-v {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .js-klar .ledning .seg-v,
  .js-klar .lamprad .seg-arm,
  .js-klar .avstick .av-h,
  .js-klar .avstick .av-v,
  .js-klar .avstick .av-h2 { transform: none; }
  .js-klar .lamprad .nod,
  .js-klar .lamprad .lampa-sladd,
  .js-klar .lamprad .lampa-sockel,
  .js-klar .lamprad .lampa-kupa,
  .js-klar .steg-post::before { opacity: 1; transform: none; }
  .js-klar .markerad::after { transform: none; }
  .js-klar .rulle-spar { transform: translateY(-0.9em); }
  .js-klar .tagline .ord { transform: none; }
  .js-klar .lampa-kupa::after { opacity: 1; }
  .js-klar .lampa-glod { opacity: 0; }
  .band-spar { transform: none; }
  .tagg, .ingress, .hero-cta, .hero-lank, .fortroende, .exempel-info { animation: none !important; transform: none !important; }
}

/* ==========================================================================
   Brytpunkter
   ========================================================================== */

@media (min-width: 480px) {
  .tjanstgrid { gap: 14px; }
}

@media (min-width: 768px) {
  :root {
    --marg: 32px;
    --ranna: 16px;
    --luft: 80px;
    --kol: 8;
    --wire-ram: calc(var(--marg) + 2 * var(--kolw) + 1.5 * var(--ranna));
    --hero-wire: calc(-0.5 * var(--ranna));
    --hero-line: calc(-0.5 * var(--ranna) - var(--streck) / 2);
    --hero-indent: 0px;
    --kant: calc(-0.5 * var(--ranna) - var(--streck) / 2);
  }
  .konceptband { padding-inline: var(--marg); }

  .innehall { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .sektionshuvud,
  .tjanstgrid,
  .jobb,
  .stegomrade,
  .casegrid,
  .citatgrid,
  .fragor,
  .tagline-text,
  .kontaktblock,
  .kontakt-topp,
  .lamprad { grid-column: 3 / -1; padding-left: 0; }
  .kontakt .ledning { left: calc(-0.5 * var(--ranna) - var(--streck) / 2); }

  .hero-ram { padding-top: 24px; }
  .hero-ram.innehall { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .hero-falt { grid-column: 1 / 9; margin-top: -24px; }
  .hero-tekst { grid-column: 3 / 9; padding-top: 32px; }
  .hero-media { grid-column: 3 / 9; }
  .hero h1 { font-size: 4.5rem; }

  .huvudnav { display: block; margin-right: 16px; }
  .mobilnav { display: none; }
  .sidhuvud-inre > .demo-knapp { display: inline-block; }

  .sektionsrubrik { font-size: 2.5rem; }

  /* numret flyttar ut i kolumn 1–2 och svängen kopplar ihop det med ledningen */
  .nummer {
    position: absolute;
    left: 0;
    top: 0.1em;
    transform: translateX(calc(-100% - var(--ranna) / 2 - var(--streck) / 2 - 10px));
    margin: 0;
    font-size: 2rem;
    text-align: right;
  }
  .avstick {
    display: block;
    position: absolute;
    right: calc(-1 * (var(--ranna) / 2 + var(--streck) / 2 + 10px));
    top: 0.55em;
    width: calc(var(--ranna) / 2 + var(--streck) / 2 + 10px);
    height: 1px;
  }
  .av-h {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: var(--streck);
    margin-top: -1.5px;
    background: var(--trad);
    transform-origin: right center;
    display: block;
  }
  .avstick .nod {
    position: absolute;
    right: -6px;
    top: -6px;
    width: 12px;
    height: 12px;
  }
  .av-v, .av-h2 { display: none; }

  .bredbild img { aspect-ratio: 12 / 5; }

  .tjanstgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .kort-inre { padding: 22px 20px 24px; }
  .kort h3 { font-size: 1.375rem; }

  .jobb-val { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jobb-platta--bred { grid-column: auto; min-height: 92px; }
  .jobb-kolumner { grid-template-columns: 1fr 1fr; gap: 20px; }
  .jobb-paneler { padding: 24px; }
  .jobb-panel h3 { font-size: 1.75rem; }

  .steg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .steg h3 { font-size: 1.5rem; }

  .casegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .case-text { padding: 18px 16px 20px; }
  .case-text h3 { font-size: 1.1875rem; }

  .tagline > .ram { padding-block: 96px; }
  .tagline-text { font-size: 4rem; max-width: 13ch; }

  .citatgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

  .kontaktblock { grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .lamprad { margin-left: 0; }
  .lamprad .seg-arm { left: var(--kant); width: 112px; }
  .lamprad .nod { left: var(--kant); }
  .lampa { left: calc(var(--kant) + 112px); }
  .band-text { font-size: 4.5rem; }
}
/* QA r2 V1: 768–879 px är korten för smala för 1.375rem, rubriken bröt mitt i ord. */
@media (min-width: 768px) and (max-width: 879.98px) {
  .kort h3 { font-size: 1.125rem; }
}


@media (min-width: 1024px) {
  :root {
    --marg: 48px;
    --ranna: 24px;
    --luft: 128px;
    --kol: 12;
  }

  .innehall { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  .sidhuvud-inre { min-height: 84px; }
  .namn { font-size: 1.375rem; }
  .huvudnav { margin-left: auto; margin-right: 32px; }
  .huvudnav ul { gap: 32px; }
  .huvudnav a { font-size: 0.9375rem; }

  /* hero: gult fält i kolumn 1–8, text i 3–8, bild i 9–12 */
  .hero-ram { padding-top: 56px; }
  .hero-ram.innehall { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hero-falt {
    grid-column: 1 / 9;
    grid-row: 1;
    margin-top: -56px;
    margin-right: calc(-1 * var(--ranna));
  }
  .hero-tekst {
    grid-column: 3 / 9;
    grid-row: 1;
    padding-top: 64px;
    padding-bottom: 72px;
    --hero-pad: 72px;
  }
  .hero-rest { flex: 1; }
  .hero-media {
    grid-column: 9 / 13;
    grid-row: 1;
    margin-top: 0;
    margin-inline: 0 calc(-1 * var(--marg));
    align-self: stretch;
    display: grid;
  }
  .hero-media picture,
  .hero-media img { height: 100%; }
  .hero-media img {
    aspect-ratio: auto;
    min-height: 640px;
    border-top: 0;
    border-left: 2px solid var(--blak);
  }

  .tagg { font-size: 0.875rem; margin-bottom: 20px; }
  .hero h1 {
    font-size: clamp(4rem, 7.2vw, 7.5rem);
    letter-spacing: -0.03em;
    max-width: 14ch;
  }
  .vifta { height: 76px; margin-top: 4px; }
  .strombrytare { width: 32px; height: 54px; }
  .strombrytare::after { top: 35px; }
  .strombrytare { top: 8px; }
  .ingress { font-size: 1.25rem; max-width: 34ch; }
  .fortroende { font-size: 1.125rem; }

  .sektionsrubrik { font-size: 4rem; margin-bottom: 20px; max-width: 22ch; }
  .nummer { font-size: 3.25rem; top: 0.02em; }
  .avstick { top: 0.62em; }
  .sektionsingress { font-size: 1.25rem; max-width: 40ch; }
  .sektionshuvud { margin-bottom: 56px; }

  .band-text { font-size: 7.5rem; padding: 22px 0; }

  .tjanstgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .kort-inre { padding: 26px 24px 28px; }
  .kort h3 { font-size: 1.625rem; }

  .jobb {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 32px;
    align-items: start;
  }
  .jobb-val { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .jobb-platta--bred { grid-column: 1 / -1; }
  .jobb-paneler { padding: 32px; min-height: 452px; }
  .jobb-panel h3 { font-size: 2rem; margin-bottom: 22px; }

  .steg { gap: 32px; }
  .steg h3 { font-size: 1.75rem; }
  .steg p:last-child { font-size: 1rem; }

  .casegrid { gap: 24px; }
  .case-text { padding: 24px 22px 26px; gap: 10px; }
  .case-text h3 { font-size: 1.5rem; }

  .tagline > .ram { padding-block: 128px; }
  .tagline-text { font-size: 7.5rem; max-width: 11ch; letter-spacing: -0.03em; }

  .citat { padding-top: 22px; }
  .citat blockquote p { font-size: 1.5rem; line-height: 1.3; max-width: 28ch; }
  .citatgrid { gap: 32px; }

  .fraga summary { padding: 22px 0; font-size: 1.25rem; }
  .fraga p { font-size: 1.0625rem; padding-bottom: 24px; }

  .kontaktblock {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 64px;
  }
  .kontakt .kontakt-ring .demo-knapp--stor { font-size: clamp(2.5rem, 4.6vw, 4rem); padding: 14px 22px; }
  .lamprad { height: 156px; }
  .lamprad .seg-arm { width: 176px; }
  .lampa { left: calc(var(--kant) + 176px); width: 84px; height: 148px; margin-left: -42px; }
  .lampa-sladd { height: 34px; }
  .lampa-sockel { top: 34px; width: 32px; height: 22px; margin-left: -16px; }
  .lampa-sockel::before { top: 5px; }
  .lampa-sockel::after { top: 12px; }
  .lampa-kupa { top: 56px; width: 62px; height: 70px; margin-left: -31px; }
  .lampa-glod { top: 22px; width: 18px; height: 26px; margin-left: -9px; }

  .demoformular { padding: 28px 28px 32px; }
  .demoformular h3 { font-size: 1.75rem; }

  .sidfot-inre {
    grid-template-columns: 1fr 1fr;
    gap: 4px 48px;
    padding-block: 48px 56px;
  }
  .sidfot-namn { grid-column: 1 / -1; }
  .sidfot-copy { grid-column: 1 / -1; }
}

/* Under 1024 px är två sidfotskolumner för smala: texten i den vänstra
   kolumnen rann in i den högra. Varje stycke får hela bredden. */
@media (max-width: 1023.98px) {
  .sidfot-inre > * { grid-column: 1 / -1; }
}

@media (max-width: 359px) {
  .hero h1 { font-size: 2.5rem; letter-spacing: -0.02em; }
  .sektionsrubrik { font-size: 1.5rem; }
  .tagline-text { font-size: 2rem; }
  .band-text { font-size: 2.5rem; }
  .demo-knapp--stor { font-size: 1.25rem; }
}

/* ==========================================================================
   Mörkt läge
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --papper: #181818;
    --blak: #FFFFFF;
    --kobolt: #FFE100;
    --grafit: #A3A3A3;
    --dampad: #A3A3A3;
    --etikett: #FFFFFF;
    --mork-yta: #101010;
    --mork-dampad: #A3A3A3;
    --fokus: #FFE100;
  }
  body { background: #181818; color: #FFFFFF; }
  .sidhuvud, .hero, .sektion--vit, .bredbild-fack { background: #181818; }
  .sektion--kobolt { background: #101010; }
  .sektion--svart, .tagline, .sidfot { background: #0B0B0B; }
  .sektion--gul { background: #FFE100; color: #0B0B0B; }
  .bredbild-fack { --trad: #FFFFFF; }

  .namn, .huvudnav a, .mobilnav a { color: #FFFFFF; }

  /* gula fält behåller svart text i båda lägena */
  .hero h1, .hero .tagg, .hero .ingress, .hero .fortroende,
  .hero .pil-lank, .hero .exempel-info { color: #0B0B0B; }
  .hero .exempel-info, .hero .tagg { color: #3A3A3A; }
  .hero .pil-lank { text-decoration-color: #0B0B0B; }
  .sektion--gul, .sektion--gul .sektionsingress,
  .sektion--gul .citat blockquote p, .sektion--gul .avsandare { color: #0B0B0B; }
  .band-text { color: #0B0B0B; }

  /* banderollen är svart med gul text i båda lägena */
  .konceptband, .sidhuvud .konceptband, .sidfot .konceptband {
    background: #0B0B0B;
    color: #FFE100;
  }

  /* vald platta: svart text på det gula markeringsblocket */
  .jobb-platta:has(input:checked),
  .js-klar .jobb-val.ar-mark .jobb-platta:has(input:checked) { color: #0B0B0B; }

  /* formulärets gula demoetikett har svart text även i mörkt läge */
  .formular-demo, .kontakt .formular-demo { background: #FFE100; color: #0B0B0B; }
  .knapp-demo, .kontakt .knapp-demo { background: #FFE100; color: #0B0B0B; border-color: #FFE100; }
  .etikett-exempel { background: #FFFFFF; color: #0B0B0B; }
  .strombrytare { background: #181818; border-color: #FFFFFF; }
  .strombrytare .vippa { background: #FFFFFF; }
  .strombrytare::after { border-color: #FFFFFF; }
  .mobilnav nav { background: #181818; }
  .mobilnav a:hover { background: #FFE100; color: #0B0B0B; }
  .huvudnav a::after { background: #FFE100; }
  a { color: #FFE100; }

  .demo-knapp {
    background: #FFE100;
    color: #0B0B0B;
    border-color: #FFE100;
    --skugga: #FFFFFF;
  }
  .kontakt .demo-knapp {
    background: #FFE100;
    color: #0B0B0B;
    border-color: #FFE100;
    --skugga: #FFFFFF;
  }
  .jobb-nasta .demo-knapp { --skugga: #0B0B0B; }

  .etikett-exempel { background: #FFFFFF; color: #0B0B0B; border-color: #FFFFFF; }
  .case--kobolt .etikett-exempel { background: #0B0B0B; color: #FFFFFF; border-color: #FFFFFF; }

  .kort { background: #181818; color: #FFFFFF; }
  .kortnummer { color: #A3A3A3; }
  .kortikon { color: #FFFFFF; }

  .case { background: #181818; }
  .case--gul .case-text { background: #FFE100; color: #0B0B0B; }
  .case--kobolt .case-text { background: #101010; color: #FFFFFF; }

  .citat, .fraga, .fragor { border-color: #FFFFFF; }
  .fraga p { color: #A3A3A3; }
  .plus::before, .plus::after { background: #FFFFFF; }
  .avsandare, .stegnummer { color: #A3A3A3; }
  .sektion--gul .avsandare, .sektion--gul .stegnummer { color: #3A3A3A; }

  .jobb-paneler, .jobb-platta { border-color: #FFE100; }
  .jobb-platta:has(input:checked) { background: #FFE100; color: #0B0B0B; }
  .falt input, .falt textarea { background: #FFFFFF; color: #0B0B0B; }
}

@media (forced-colors: active) {
  .etikett-exempel { border-color: CanvasText; }
  .kort, .case, .demoformular, .jobb-paneler, .jobb-platta, .fraga, .citat { border-color: CanvasText; }
  .seg, .seg-arm, .steg::before, .av-h, .lampa-sladd { background: CanvasText; }
  .nod, .steg-post::before { background: Highlight; border-color: CanvasText; }
}

/* ==========================================================================
   Enkla textsidor: integritet och 404
   ========================================================================== */

.textsida {
  position: relative;
  z-index: 2;
  max-width: 68ch;
  /* Egen grid-kolumn även under 768 px. Utan den blev cellen så smal som
     ledningens ränna och texten flödade över. */
  grid-column: 1 / -1;
}
.textsida h1 {
  font-size: 2rem;
  line-height: 1.05;
  font-stretch: 125%;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}
.textsida h2 {
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 32px 0 8px;
  letter-spacing: -0.01em;
}
.textsida p { font-size: 1.0625rem; max-width: 62ch; }
.textsida a { font-weight: 700; }
.felnummer {
  font-size: 4rem;
  font-weight: 700;
  font-stretch: 125%;
  line-height: 0.9;
  color: var(--kobolt);
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .textsida { grid-column: 3 / -1; }
  .textsida h1 { font-size: 3rem; }
  .textsida h2 { font-size: 1.5rem; }
}
@media (min-width: 1024px) {
  .textsida h1 { font-size: 4rem; }
  .textsida h2 { font-size: 1.75rem; margin-top: 40px; }
  .felnummer { font-size: 6rem; }
}
@media (prefers-color-scheme: dark) {
  .felnummer { color: #FFE100; }
}