/* Lövgren & Ny – utkast. Formriktning från kinsyn.com (se FORM.md): rubriker i versaler,
   grått och svart på sval gråblå bakgrund. Enkelt och avskalat. Allt styrs av variablerna nedan.
   Typsnitt sedan 2026-11-11: Archivo i bred version för rubriker, Fira Mono för ingresser, Fira Sans för
   brödtext och Fira Mono även för etiketter, meny, knappar och siffror. (2026-11-09–10: DM Mono och DM Sans.) */

/* Typsnitten ligger på sajten själv sedan 2026-11-12 (snabbare, och inga anrop till Google från besökarna).
   Bara det latinska teckenutbudet (å, ä, ö ingår) och bara de snitt som används. Licens: SIL Open Font License. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("typsnitt/archivo-latin.woff2") format("woff2"); }
@font-face { font-family: "Fira Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("typsnitt/fira-mono-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("typsnitt/fira-sans-400-latin.woff2") format("woff2"); }

:root {
  --svart: #222222;
  --gra: #817f7c;
  --gra-mork: #55524f;
  --grablaa: #c0c8d0;
  --ljus: #e4e8ec;
  --yta: #eef0ef;
  --vit: #f6f7f6;
  --linje: rgba(34, 34, 34, .16);
  --vitt: #ffffff;
  --rod: #d8291c;

  --typ: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;   /* brödtext, Johanna 2026-11-11 */
  --ingress-kod: var(--mono);            /* ingresser, Fira Mono, Johanna 2026-11-11 */
  --rubrik: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Fira Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* ingresser, etiketter, meny, knappar, siffror; Fira Mono sedan 2026-11-11 */

  /* Hierarki: rubrik (Archivo bred, versaler) > ingress (Fira Mono, svart) > brödtext (Fira Sans, mörkgrå)
     > små texter och etiketter (Fira Mono). Varje steg skiljer sig i storlek och färg eller typsnitt. */
  --t-display: clamp(32px, 3.6vw, 60px); /* rubriken i starten */
  --t-h2: clamp(26px, 3vw, 40px);        /* avsnittsrubriker */
  --t-h3: clamp(22px, 2.1vw, 30px);      /* rubriker inom avsnitt: korten, Mätning och index, personerna */
  --t-h4: clamp(21px, 1.8vw, 25px);      /* små rubriker i Archivo normal bredd: utfall, nivåer */
  --t-ingress-start: clamp(16px, 1.2vw, 18px);   /* ingressen i starten, mindre sedan 2026-11-11 (förut 17–20 px) */
  --t-ingress: clamp(17px, 1.3vw, 19px);
  --sparr-ingress: -.5px;                /* spärren i ingresserna, Fira Mono, Johanna 2026-11-11 (−0,7 px med DM Mono) */
  --t-brod: 17px;
  --t-brod-liten: 16px;

  --matt: 1200px;
  --kant: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--yta);
  color: var(--svart);
  font-family: var(--typ);
  font-size: var(--t-brod);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Rubriker: Archivo, bred och fet, i versaler */
h1, h2, h3, h4 { margin: 0; color: var(--svart); }
h1, h2, .topp__namn, .fot__namn, .underrubrik, .kort__rubrik, .person h3, .matning__rubrik, .omrade__namn {
  font-family: var(--rubrik); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -.015em;
}
h2 { font-size: var(--t-h2); line-height: 1.04; text-wrap: balance; }
h3, h4 { font-weight: 600; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

.etikett { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gra); }
.underrubrik { font-weight: 700; font-size: 15px; letter-spacing: .06em; margin: 0 0 12px; }

.hopp { position: absolute; left: -9999px; top: 0; background: var(--svart); color: #fff; padding: 8px 12px; }
.hopp:focus { left: 12px; top: 12px; z-index: 50; }

/* Toppen */
.topp {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  /* Namnet och menyn håller sig inom samma bredd som innehållet (--matt) på breda skärmar */
  padding: 16px max(var(--kant), (100% - var(--matt)) / 2);
  background: rgba(228, 232, 236, .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linje);
}
.topp__namn { text-decoration: none; font-size: 22px; white-space: nowrap; }
.topp__meny { display: flex; gap: 26px; align-items: center; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.topp__meny a { text-decoration: none; color: var(--gra-mork); }
.topp__meny a:hover { color: var(--svart); }
.topp__kontakt { background: var(--svart); border: 1px solid var(--svart); padding: 8px 14px; color: #fff !important; text-decoration: none; white-space: nowrap; }
.topp__kontakt:hover { background: transparent; color: var(--svart) !important; }
@media (max-width: 760px) {
  .topp__meny a:not(.topp__kontakt) { display: none; }
  .topp { padding-block: 12px; }
  .topp { gap: 10px; }
  .topp__namn { font-size: 19px; }
  .topp__kontakt { font-size: 10.5px; padding: 7px 11px; }
}

/* Starten, efter Figma-ramen 2026-11-06: rubrik, ingress och namn till vänster, fotot av er två till höger
   och knappen i nedre högra hörnet. Fotot är frilagt (PNG med genomskinlig bakgrund); 24 % till höger om
   personerna är tomt, därav translateX. Bredden räknas så att personerna aldrig går in i texten. */
.hero {
  position: relative; overflow: hidden; min-height: max(760px, 100svh);
  display: grid; align-content: end;
  padding: 120px var(--kant) clamp(72px, 9vw, 132px);
  background: linear-gradient(var(--vitt) 0%, var(--grablaa) 100%);
}
.hero__inre { position: relative; z-index: 1; max-width: var(--matt); margin: 0 auto; width: 100%; }
.hero__rubrik {
  font-family: var(--rubrik); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -.015em;
  font-size: var(--t-display); line-height: 1.04; max-width: 13em;
  margin: 0 0 clamp(28px, 2.6vw, 36px); hyphens: manual;
}
.hero__ingress { max-width: 571px; margin: 0 0 24px; }
.hero__ingress:has(+ .hero__ingress) { margin-bottom: 14px; }
/* Områdena som etiketter under ingressen: rutnät med tunna linjer, nummer och pil. Vid hovring ritas linjen
   ut i rött, samma markering som områdena längre ner. Länkarna går ner till området och fäller ut det (sida.js). */
.hero__omraden {
  list-style: none; margin: 0 0 28px; padding: 0; max-width: 571px; counter-reset: omrade;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px;
}
.hero__omraden li { counter-increment: omrade; }
.hero__omraden a {
  position: relative; display: flex; align-items: baseline; gap: 10px; padding: 10px 0 11px;
  border-top: 1px solid rgba(0, 0, 0, .28); color: var(--svart); text-decoration: none;
  font-family: var(--mono); font-size: 12px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase;
}
.hero__omraden a::before { content: counter(omrade, decimal-leading-zero); color: var(--gra-mork); transition: color .25s ease; }
.hero__omraden a::after {
  content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--rod);
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.hero__pil { margin-left: auto; opacity: .45; transition: transform .25s ease, opacity .25s ease, color .25s ease; }
.hero__omraden a:hover::before, .hero__omraden a:focus-visible::before { color: var(--rod); }
.hero__omraden a:hover::after, .hero__omraden a:focus-visible::after { transform: scaleX(1); }
.hero__omraden a:hover .hero__pil, .hero__omraden a:focus-visible .hero__pil { opacity: 1; color: var(--rod); transform: translateY(3px); }
@media (max-width: 560px) { .hero__omraden { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .hero__omraden a::before, .hero__omraden a::after, .hero__pil { transition: none; }
}
.omrade { scroll-margin-top: 90px; }
.hero__foto {
  position: absolute; z-index: 0; bottom: 0; right: 28px; transform: translateX(24.05%);
  width: min(calc((100vw - 28px - max(var(--kant), (100vw - var(--matt)) / 2) - 611px) / .5142),
             calc((max(760px, 100svh) - 38px) * 1.4906));
  height: auto; max-width: none;
}
@media (max-width: 1099px) {
  .hero { min-height: 0; align-content: start; padding-bottom: 0; }
  .hero__foto {
    --fw: min(170%, 1000px);
    position: relative; right: auto; bottom: auto; transform: none;
    width: var(--fw); margin: 40px 0 0 calc(50% - var(--fw) * .5025);
  }
}

.knapp {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--typ); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: var(--svart); color: #fff; border: 1px solid var(--svart);
  padding: 15px 24px; border-radius: 0;
  transition: background .2s ease, color .2s ease;
}
.knapp:hover { background: transparent; color: var(--svart); }
.lank-pil { text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--svart); padding-bottom: 3px; }

/* Delar */
.del { padding: clamp(72px, 10vw, 136px) var(--kant); background: var(--vitt); }
.del--ljus { background: var(--ljus); }
.del__inre { max-width: var(--matt); margin: 0 auto; }
.del__inre--tva { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(40px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .del__inre--tva { grid-template-columns: 1fr; } }
.del__sida { position: sticky; top: 96px; }
@media (max-width: 860px) { .del__sida { position: static; } }
.del__sida .etikett { margin: 0 0 16px; }
.del__under { margin-top: 20px; max-width: 420px; color: var(--gra-mork); }
.del__text .underrubrik { margin-top: 36px; }

/* Fyra områden: egen vit sektion med stora rader åtskilda av linjer.
   Texten fälls ner vid hovring (mus), vid klick/tryck och när knappen får fokus från tangentbordet.
   Raden blir röd när den är aktiv; rött används sparsamt, bara som markering. */
.del--vit { background: var(--vitt); }
/* De tre etiketterna ovanför områdena togs bort 2026-11-09 (Johanna). Avsnittet före är också vitt,
   så avståndet ovanför listan hålls måttligt. */
#omraden { padding-top: clamp(24px, 4vw, 56px); }
.omraden { list-style: none; margin: 0 auto; padding: 0; max-width: var(--matt); border-top: 1px solid var(--svart); border-bottom: 1px solid var(--svart); }
.omrade + .omrade { border-top: 1px solid var(--svart); }
.omrade__rad { margin: 0; font: inherit; }
.omrade__knapp {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(18px, 2.2vw, 30px) 0 clamp(22px, 2.6vw, 36px);
}
.omrade__namn {
  min-width: 0; overflow-wrap: break-word; hyphens: auto;
  font-stretch: 100%; font-weight: 400; color: var(--svart); text-transform: none;
  font-size: clamp(34px, 5.6vw, 84px); line-height: 1.04; letter-spacing: -.025em;
  transition: color .25s ease;
}
.omrade__knapp:focus-visible { outline: 2px solid var(--svart); outline-offset: 6px; }
.omrade__tecken { display: flex; align-items: center; flex: none; }
.omrade__tecken i { position: relative; width: 22px; height: 22px; }
.omrade__tecken i::before, .omrade__tecken i::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--svart);
  transition: transform .35s ease, background-color .25s ease;
}
.omrade__tecken i::after { transform: rotate(90deg); }
.omrade__mer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s ease; }
.omrade__inre {
  overflow: hidden; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(48px, 7vw, 112px);
}
.omrade__rubrik {
  font-family: var(--mono); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--svart);
  max-width: 380px; margin: 4px 0 clamp(44px, 5vw, 64px);
}
.omrade__text { max-width: 600px; padding-bottom: clamp(44px, 5vw, 64px); }
.omrade__text p { font-size: var(--t-brod); line-height: 1.7; color: var(--gra-mork); }
.omrade__text p + p { margin-top: 1.1em; }
.omrade.oppen .omrade__mer, .omrade:has(.omrade__knapp:focus-visible) .omrade__mer { grid-template-rows: 1fr; }
.omrade.oppen .omrade__namn, .omrade:has(.omrade__knapp:focus-visible) .omrade__namn { color: var(--rod); }
.omrade.oppen .omrade__tecken i::before, .omrade.oppen .omrade__tecken i::after,
.omrade:has(.omrade__knapp:focus-visible) .omrade__tecken i::before, .omrade:has(.omrade__knapp:focus-visible) .omrade__tecken i::after { background: var(--rod); }
.omrade.oppen .omrade__tecken i::after, .omrade:has(.omrade__knapp:focus-visible) .omrade__tecken i::after { transform: rotate(0deg); }
@media (hover: hover) {
  .omrade:hover .omrade__mer { grid-template-rows: 1fr; }
  .omrade:hover .omrade__namn { color: var(--rod); }
  .omrade:hover .omrade__tecken i::before, .omrade:hover .omrade__tecken i::after { background: var(--rod); }
  .omrade:hover .omrade__tecken i::after { transform: rotate(0deg); }
}
@media (max-width: 760px) {
  .omrade__knapp { gap: 12px; }
  .omrade__namn { font-size: max(24px, 7.2vw); }
  .omrade__inre { grid-template-columns: 1fr; }
  .omrade__rubrik { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .omrade__mer, .omrade__namn, .omrade__tecken i::before, .omrade__tecken i::after { transition: none; }
}

.prick { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid var(--svart); flex: none; }
.prick--forsaljning { background: #222222; }
.prick--varumarke { background: #817f7c; }
.prick--kompetens { background: #c0c8d0; }
.prick--hr { background: #f6f7f6; }

/* Ekosystemet (bilden byggs av ekosystem.js) */
.ekosystem { margin-top: clamp(40px, 5vw, 64px); }
.lista-farger { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; padding: 0; margin: 0 0 12px; }
.lista-farger button {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
}
.lista-farger button:focus-visible { outline: 2px solid var(--svart); outline-offset: 4px; }
#bild { width: 100%; height: auto; display: block; overflow: visible; }
.form { transition: opacity .3s ease, transform .3s ease; transform-box: fill-box; transform-origin: center; }
.form text { font-family: var(--typ); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; pointer-events: none; }
.tonad .form:not(.aktiv) { opacity: .18; }
.form.aktiv { transform: scale(1.03); }
.flode { fill: none; stroke: var(--gra); stroke-width: 1.2; stroke-dasharray: 3 6; opacity: .7; }
.axel { font-family: var(--typ); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; fill: var(--gra); }
.mitt text { font-family: var(--rubrik); font-stretch: 125%; font-weight: 800; font-size: 19px; text-transform: uppercase; }
.mobil { display: none; }
@media (max-width: 680px) {
  #bild, .ekosystem .lista-farger { display: none; }
  .mobil { display: grid; gap: 22px; margin-top: 20px; }
  .mobil h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
  .mobil ul { margin: 0; padding-left: 22px; line-height: 1.6; }
}

/* Två kort */
/* Vad samverkan ger: sex utfall i ett luftigt rutnät utan rutor runt. Fyra små kvadrater per utfall
   visar vilka områden som samverkar (samma ordning som nyckeln: varumärke, försäljning, kompetens, HR).
   Vid hovring blir namnet och de aktiva kvadraterna röda. */
.utfall { max-width: var(--matt); margin: clamp(48px, 6vw, 88px) auto 0; }
.utfall__nyckel {
  list-style: none; margin: 0 0 clamp(28px, 3vw, 40px); padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gra-mork);
}
.utfall__nyckel li { display: inline-flex; align-items: center; gap: 10px; }
.utfall__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 5vw, 72px) clamp(28px, 3.4vw, 52px);
}
.utfall__post { border-top: 1px solid var(--svart); padding-top: 18px; display: flex; flex-direction: column; }
.utfall__topp { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(28px, 3vw, 44px); }
.utfall__nr { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--gra-mork); }
.utfall__rutor { display: inline-grid; grid-template-columns: repeat(4, 10px); gap: 3px; }
.utfall__rutor i { width: 10px; height: 10px; border: 1px solid var(--svart); background: transparent; transition: background-color .25s ease, border-color .25s ease; }
.utfall__rutor i.pa { background: var(--svart); }
.utfall__namn {
  font-family: var(--rubrik); font-stretch: 100%; font-weight: 400; letter-spacing: -.02em; text-transform: none;
  font-size: var(--t-h4); line-height: 1.15; margin: 0 0 12px; transition: color .25s ease;
}
.utfall__text { font-size: var(--t-brod-liten); line-height: 1.65; color: var(--gra-mork); margin: 0 0 20px; max-width: 34em; }
.utfall__omr { margin: auto 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gra); }
@media (hover: hover) {
  .utfall__post:hover .utfall__namn { color: var(--rod); }
  .utfall__post:hover .utfall__rutor i.pa { background: var(--rod); border-color: var(--rod); }
}
@media (max-width: 1000px) { .utfall__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .utfall__lista { grid-template-columns: 1fr; gap: 40px; }
  .utfall__topp { margin-bottom: 20px; }
}

/* Två former: kort med stor rubrik överst, en pixlad färgyta i mitten och texten i en panel som
   lägger sig över ytans nederkant. Grå yta för organisationen, röd för Halmstad Social. */
.tva { max-width: var(--matt); margin: clamp(40px, 5vw, 64px) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.kort { display: flex; flex-direction: column; background: var(--vitt); }
.kort__rubrik {
  margin: 0; padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 30px) clamp(26px, 2.8vw, 36px);
  /* Plats för två rader så att bilderna linjerar */
  font-size: var(--t-h3); line-height: 1.04; min-height: calc(2.08em + clamp(22px, 2.4vw, 30px) + clamp(26px, 2.8vw, 36px));
}
.kort__bild { position: relative; aspect-ratio: 13 / 10; }
.kort__mosaik { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kort__text {
  position: relative; flex: 1; background: var(--vitt);
  padding: clamp(20px, 2.2vw, 26px) clamp(22px, 2.4vw, 30px) clamp(24px, 2.6vw, 32px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start;
}
.kort__text p { font-size: var(--t-brod-liten); line-height: 1.6; color: var(--gra-mork); margin: 0; }
.kort__pil { width: 48px; height: auto; color: var(--svart); margin-bottom: 4px; align-self: end; }
.kort__bild--hs { background: #c2dbff; display: grid; place-items: center; }
.kort__logga { width: 72%; max-width: 424px; height: auto; }
@media (max-width: 760px) {
  .tva { grid-template-columns: 1fr; }
  .kort__text { grid-template-columns: 1fr; gap: 10px; }
  .kort__pil { width: 40px; justify-self: end; }
  .kort__rubrik { min-height: 0; }
}
.former-huvud { margin-top: clamp(48px, 6vw, 80px); }
.former-huvud + .tva { margin-top: 8px; }
.avslut { margin-top: clamp(40px, 5vw, 64px); }
.avslut__text { max-width: 760px; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; font-weight: 500; letter-spacing: -.01em; }

/* Bildplatser: byts mot riktiga bilder. Behåll proportionerna. */
.plats {
  margin: 0; position: relative; overflow: hidden;
  border: 1px dashed rgba(34, 34, 34, .35);
  background: linear-gradient(135deg, rgba(255, 255, 255, .35), rgba(129, 127, 124, .12));
  display: grid; place-items: center; text-align: center; padding: 20px;
}
.plats::before, .plats::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.plats::before { background: linear-gradient(to bottom right, transparent calc(50% - .5px), rgba(34, 34, 34, .14) 50%, transparent calc(50% + .5px)); }
.plats::after { background: linear-gradient(to top right, transparent calc(50% - .5px), rgba(34, 34, 34, .14) 50%, transparent calc(50% + .5px)); }
.plats figcaption { position: relative; z-index: 1; font-size: 12px; line-height: 1.5; color: var(--gra-mork); background: rgba(246, 247, 246, .9); padding: 10px 14px; max-width: 320px; }
.plats figcaption strong { display: block; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; margin-bottom: 4px; color: var(--svart); }
.plats--bred { aspect-ratio: 21 / 9; max-width: var(--matt); margin: clamp(40px, 5vw, 64px) auto 0; }
.plats--portratt { aspect-ratio: 4 / 5; max-width: 340px; margin-bottom: 24px; }
.plats--liten { aspect-ratio: 3 / 2; margin-top: 28px; }
.plats--foto { border: 0; padding: 0; }
.plats--foto::before, .plats--foto::after { display: none; }
.plats--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.plats--grafik { aspect-ratio: 1302 / 513; }

/* Skiss 2026-11-09: de fyra områdena i en oändlighetssymbol. Liggande på dator, stående på mobil.
   Etiketterna bryter linjen och länkar ner till områdena. Pricken visar i vilken ordning de följer varann. */
.oandlig { margin: clamp(48px, 6vw, 80px) auto 0; max-width: var(--matt); }
.slinga { display: block; width: 100%; height: auto; overflow: visible; }
.slinga--sta { display: none; max-width: 440px; margin: 0 auto; }
.slinga__linje { fill: none; stroke: var(--svart); stroke-width: 1.5; }
.slinga__prick { fill: var(--rod); }
.slinga text { text-anchor: middle; dominant-baseline: central; }
.slinga__sida { font-family: var(--rubrik); font-stretch: 125%; font-weight: 800; font-size: 30px; letter-spacing: -.015em; text-transform: uppercase; fill: var(--svart); }
.slinga a rect { fill: var(--ljus); }
.slinga a text { font-family: var(--mono); font-size: 17px; letter-spacing: .06em; text-transform: uppercase; fill: var(--svart); transition: fill .25s ease; }
.slinga a:hover text, .slinga a:focus-visible text { fill: var(--rod); }
.slinga__mitt rect { fill: var(--svart); }
.slinga__mitt text { font-family: var(--mono); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; fill: #fff; }
.slinga--sta .slinga__sida { font-size: 17px; }
.slinga--sta a text { font-size: 11.5px; }
.slinga--sta .slinga__mitt text { font-size: 11.5px; }
@media (max-width: 900px) {
  .slinga--ligg { display: none; }
  .slinga--sta { display: block; }
}
@media (prefers-reduced-motion: reduce) { .slinga__prick { display: none; } }

/* Om oss */
.personer { max-width: var(--matt); margin: clamp(48px, 6vw, 80px) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
@media (max-width: 760px) { .personer { grid-template-columns: 1fr; } .plats--portratt { max-width: 100%; } }
.person h3 { font-size: var(--t-h3); line-height: 1.04; margin-bottom: 8px; }
.person__roll { margin-bottom: 18px; }
.person p:not(.etikett) { font-size: var(--t-brod-liten); line-height: 1.65; color: var(--gra-mork); }
.citat { margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--svart); }
.citat p { font-size: var(--t-ingress) !important; line-height: 1.45; color: var(--svart) !important; font-weight: 500; letter-spacing: -.01em; }
.citat footer { margin-top: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gra); }

/* Formulär */
.formular { display: grid; gap: 18px; max-width: 560px; }
.falt { display: grid; gap: 6px; }
.falt label { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gra-mork); }
.falt input, .falt textarea {
  font: inherit; color: var(--svart);
  background: var(--vit); border: 1px solid var(--svart); border-radius: 0;
  padding: 12px 14px; width: 100%;
}
.falt input:focus, .falt textarea:focus { outline: 2px solid var(--svart); outline-offset: 2px; }
.falt textarea { resize: vertical; min-height: 110px; }
.honung { position: absolute; left: -9999px; }
.formular .knapp { justify-self: start; margin-top: 6px; }
.svar { font-size: 15px; }
.svar.fel { color: #8a3b2c; }

/* Foten */
.fot { padding: 48px var(--kant) 56px; background: var(--svart); color: var(--ljus); }
.fot__inre { max-width: var(--matt); margin: 0 auto; display: grid; gap: 8px; }
.fot__namn { font-size: 22px; color: #fff; margin: 0; }
.fot__rad { color: var(--grablaa); font-size: 15px; }
.fot__lankar { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 8px; color: var(--grablaa); }
.fot__lankar a { text-decoration: none; color: #fff; }

/* Mjuk inträdning */
[data-in] { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
[data-in].syns { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-in] { opacity: 1; transform: none; transition: none; } }

/* Ingress och brödtext. Ingressen är Fira Mono och svart, brödtexten Fira Sans och mörkgrå, så att
   ögat går rubrik, ingress, brödtext. Fira Mono bär också etiketter, små beskrivningar, meny och knappar. */
.hero__ingress, .stor { font-family: var(--mono); font-weight: 400; color: var(--svart); letter-spacing: var(--sparr-ingress); }
.hero__ingress { font-size: var(--t-ingress-start); line-height: 1.6; }
.hero__ingress--sans { font-family: var(--typ); letter-spacing: 0; }
.stor { font-size: var(--t-ingress); line-height: 1.6; margin-bottom: 1.2em; }
.del__text p:not(.stor):not(.etikett) { color: var(--gra-mork); line-height: 1.7; }
.etikett, .del__under, .plats figcaption, .citat footer, .falt label, .lista-farger button,
.topp__meny, .knapp, .lank-pil, .person__roll { font-family: var(--mono); }
.etikett, .citat footer, .falt label, .lista-farger button, .topp__meny, .knapp, .lank-pil, .plats figcaption strong { letter-spacing: .06em; font-weight: 400; }
.del__under { font-size: 15px; line-height: 1.7; }
.axel { font-family: var(--mono); letter-spacing: .12em; }
.form text { font-family: var(--mono); letter-spacing: .04em; font-weight: 400; }

/* Mobil, 2026-11-06: mindre luft mellan ingressen och fotot (fotots övre del är genomskinlig),
   nyckeln till utfallen en per rad och ekosystemtexten lite tätare. */
@media (max-width: 760px) {
  .hero { padding-top: 96px; }
  /* Rubriken i starten fyller hela bredden: den längsta raden, MARKNADEN, är 8,54 em bred i Archivo bred */
  .hero__rubrik { font-size: calc((100vw - 2 * var(--kant)) * .116); line-height: 1.06; max-width: none; }
  .hero__foto { margin-top: calc(28px - var(--fw) * .1); }
  .utfall__nyckel { flex-direction: column; gap: 10px; }
  /* Avsnittsrubrikerna får inte bli bredare än telefonen: ORGANISATIONENS är 12,6 em bred i Archivo bred */
  :root { --t-brod: 16px; --t-brod-liten: 15.5px; --t-h2: min(26px, calc((100vw - 2 * var(--kant)) * .079)); }
}
/* Små telefoner: logotypen och menyknappen ska få plats på samma rad */
@media (max-width: 360px) {
  .topp__namn { font-size: 15px; }
  .topp__kontakt { font-size: 10px; padding: 6px 8px; letter-spacing: .02em; }
}

/* Mätning och index, 2026-11-07. Ligger i "Så arbetar vi" efter korten. Tre nivåer som vita paneler
   (samma yta som korten) och indexet som en tabell med fem delar och fem mätpunkter: baslinjen vid
   start är ifylld, kvartalen tomma. Siffror visas inte; det är en beskrivning, inte ett utfall. */
.matning {
  max-width: var(--matt); margin: clamp(72px, 9vw, 128px) auto 0;
  padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--svart);
}
.matning__rubrik { font-size: var(--t-h3); line-height: 1.04; }
.nivaer {
  list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.niva { background: var(--vitt); padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; }
.niva__nr, .index__skala { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--gra-mork); }
.niva__namn, .index__rubrik {
  font-family: var(--rubrik); font-stretch: 100%; font-weight: 400; letter-spacing: -.02em; text-transform: none;
  font-size: var(--t-h4); line-height: 1.15; transition: color .25s ease;
}
.niva__namn { margin: clamp(24px, 3vw, 40px) 0 12px; }
.niva__fraga { font-size: var(--t-brod); line-height: 1.5; font-weight: 500; margin: 0 0 14px; }
.niva__exempel { margin: auto 0 0; font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--gra-mork); }

.index {
  margin-top: 24px; background: var(--vitt); padding: clamp(24px, 3vw, 44px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(40px, 6vw, 96px);
}
.index__rubrik { margin: 0 0 16px; }
.index__intro p { font-size: var(--t-brod-liten); line-height: 1.65; color: var(--gra-mork); }
.index__intro .index__princip { margin-top: 24px; font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--gra); }
.index__skala { display: flex; justify-content: space-between; align-items: end; margin: 0 0 12px; font-size: 11px; text-transform: uppercase; }
.index__punkter, .index__rutor { display: grid; grid-template-columns: 44px repeat(4, 30px); justify-items: center; }
.index__punkter b { font-weight: 400; }
.index__rader { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--svart); }
.index__rad {
  display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) auto; gap: 8px 24px; align-items: center;
  padding: 16px 0; border-top: 1px solid var(--svart);
}
.index__namn { font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--svart); transition: color .25s ease; }
.index__vad { font-size: 15px; line-height: 1.5; color: var(--gra-mork); }
.index__rutor i { width: 10px; height: 10px; border: 1px solid var(--svart); transition: background-color .25s ease, border-color .25s ease; }
.index__rutor i.pa { background: var(--svart); }
@media (hover: hover) {
  .niva:hover .niva__namn, .index__rad:hover .index__namn { color: var(--rod); }
  .index__rad:hover .index__rutor i.pa { background: var(--rod); border-color: var(--rod); }
}
@media (max-width: 900px) {
  .nivaer { grid-template-columns: 1fr; gap: 16px; }
  .niva__namn { margin-top: 20px; }
  .index { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .index__rad { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "namn rutor" "vad vad"; }
  .index__namn { grid-area: namn; } .index__rutor { grid-area: rutor; } .index__vad { grid-area: vad; }
  .index__punkter, .index__rutor { grid-template-columns: 44px repeat(4, 24px); }
}

/* Typsnitten, genomgång 2026-11-09. Ingress: inledande mening i DM Mono med spärr. Resten av texten: DM Sans.
   Korta rubriker i tabeller och kort: Archivo. Står sist så att reglerna gäller före de äldre ovan. */
.avslut__text { font-family: var(--mono); font-weight: 400; font-size: var(--t-ingress-start); line-height: 1.6; letter-spacing: var(--sparr-ingress); }
.omrade__rubrik { letter-spacing: var(--sparr-ingress); }
.del__under { font-size: var(--t-ingress); line-height: 1.6; color: var(--svart); letter-spacing: var(--sparr-ingress); }
.index__intro .index__princip { font-family: var(--typ); font-size: var(--t-brod-liten); line-height: 1.65; color: var(--gra-mork); }
.index__namn { font-family: var(--rubrik); font-stretch: 100%; font-weight: 400; }


/* Brödtexten, enhetlig 2026-11-09. DM Sans byter teckenavstånd efter storlek (optisk storlek), så den låses
   till textversionen. Två storlekar (--t-brod och --t-brod-liten), ett radavstånd, och text-wrap: pretty
   som undviker ensamma ord på sista raden. */
body { font-optical-sizing: auto; font-variation-settings: normal; }
p, li, dd { text-wrap: pretty; }
.del__text p:not(.stor):not(.etikett), .omrade__text p, .utfall__text, .kort__text p, .person p:not(.etikett),
.index__intro p, .index__intro .index__princip, .hero__ingress--sans { line-height: 1.65; }
.index__vad { font-size: var(--t-brod-liten); line-height: 1.65; }

/* LinkedIn lyft 2026-11-10 (Johanna): avsnittet ligger nu i samma vita del som "varför" och fortsätter
   det resonemanget, och varje område har ett stycke om LinkedIns roll. */
.del__inre--linkedin { margin-top: clamp(72px, 9vw, 128px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--linje); scroll-margin-top: 72px; }
.omrade__text p.omrade__linkedin { margin-top: 1.6em; padding-top: 1.2em; border-top: 1px solid var(--linje); }
.omrade__linkedin .etikett { display: block; margin-bottom: 8px; }

/* LinkedIn-avsnittet med egen layout 2026-11-10 (Johanna): rubriken över hela bredden, tre effekter i rad,
   bild och bakgrund längst ner. */
.li__rubrik { max-width: 980px; }
.li__ingress { max-width: 720px; margin-top: clamp(24px, 3vw, 36px); }
.li__mellan { margin: clamp(48px, 6vw, 80px) 0 0; }
.li__effekter { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); counter-reset: li; }
.li__effekter li { border-top: 1px solid var(--svart); padding-top: 18px; counter-increment: li; }
.li__vem { font-family: var(--rubrik); font-stretch: 100%; font-weight: 400; letter-spacing: -.02em; text-transform: none; font-size: var(--t-h4); line-height: 1.15; margin: 0 0 10px; }
.li__vem::before { content: counter(li, decimal-leading-zero); display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--gra-mork); margin-bottom: 14px; }
.li__effekter p { font-size: var(--t-brod); line-height: 1.65; color: var(--gra-mork); margin: 0; }
.li__fot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(40px, 6vw, 96px); align-items: start; margin-top: clamp(56px, 7vw, 96px); }
.li__fot .plats--liten { margin-top: 0; }
.li__text p { font-size: var(--t-brod); line-height: 1.65; color: var(--gra-mork); }
.li__text p + p { margin-top: 1.1em; }
@media (max-width: 860px) {
  .li__effekter { grid-template-columns: 1fr; gap: 28px; }
  .li__fot { grid-template-columns: 1fr; }
}

/* Indexet utan kvartal och utan Synlighet 2026-11-10 (Johanna): uppdragen följer inte alltid ett år,
   och synligheten är svår att mäta. Raderna har bara namn och beskrivning. */
.index__rad { grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); }
@media (max-width: 560px) { .index__rad { grid-template-columns: 1fr; grid-template-areas: "namn" "vad"; gap: 4px; } }

/* Om oss, ny layout 2026-11-10 (Johanna): rubrik och kort intro över hela bredden, sedan två
   personkort med bild till vänster och lika mycket text till höger. Stycket om första samtalet är borttaget. */
.oss__rubrik { max-width: 980px; }
.oss__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(40px, 6vw, 96px); margin-top: clamp(24px, 3vw, 36px); align-items: start; }
.oss__intro p:not(.stor) { font-size: var(--t-brod); line-height: 1.65; color: var(--gra-mork); }
.oss .personer { max-width: none; margin-top: clamp(48px, 6vw, 80px); gap: 24px; }
.oss .person { background: var(--vitt); padding: clamp(20px, 2.2vw, 28px); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(20px, 2.4vw, 32px); align-items: stretch; }
.oss .plats--portratt { max-width: none; margin: 0; }
.oss .plats--foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person__text { display: flex; flex-direction: column; }
.person__idag { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--linje); }
.person__text > p:not(.etikett) { margin-bottom: 20px; }
@media (max-width: 1100px) { .oss .person { grid-template-columns: 1fr; } .oss .plats--portratt { max-width: 340px; } }
@media (max-width: 760px) { .oss__intro { grid-template-columns: 1fr; } .oss .plats--portratt { max-width: 100%; } }
.oss .person { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.oss .plats--portratt { width: 100%; height: auto; align-self: start; }
.oss .plats figcaption { max-width: calc(100% - 20px); }
.oss .person__text { align-self: stretch; }
.oss .person h3 { font-size: clamp(20px, 1.7vw, 24px); }
@media (max-width: 1100px) { .oss .person { grid-template-columns: 1fr; } }

/* Pilarna på korten i en svart kvadrat 2026-11-10 (Johanna). SVG:n centreras i kvadraten av viewBox. */
.kort__pil { width: 48px; height: 48px; padding: 0 11px; box-sizing: border-box; background: var(--svart); color: #fff; margin-bottom: 0; flex: none; }
@media (max-width: 760px) { .kort__pil { width: 40px; height: 40px; padding: 0 9px; } }
/* Etiketten ovanför de tre effekterna togs bort 2026-11-10; avståndet ligger nu på listan. */
.li__effekter { margin-top: clamp(48px, 6vw, 80px); }

/* Formuläret i mörk del som går över i sidfoten, 2026-11-10 (Johanna). Fälten är linjer i stället för
   rutor, namn och e-post står bredvid varandra, och knappen är vit. */
.del--mork { background: var(--svart); color: #fff; padding-bottom: clamp(56px, 7vw, 96px); }
.del--mork h2 { color: #fff; }
.del--mork .del__under { color: var(--grablaa); }
#kontakt .formular { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; max-width: none; }
#kontakt .falt--hel, #kontakt .formular .knapp, #kontakt .svar { grid-column: 1 / -1; }
#kontakt .falt { gap: 10px; }
#kontakt .falt label { color: var(--grablaa); }
#kontakt .falt input, #kontakt .falt textarea {
  color: #fff; background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .35);
  padding: 6px 0 12px; font-size: var(--t-brod); transition: border-color .2s ease;
}
#kontakt .falt textarea { min-height: 96px; }
#kontakt .falt input:hover, #kontakt .falt textarea:hover { border-bottom-color: rgba(255, 255, 255, .6); }
#kontakt .falt input:focus, #kontakt .falt textarea:focus { outline: none; border-bottom-color: #fff; }
#kontakt .falt input:focus-visible, #kontakt .falt textarea:focus-visible { outline: 1px solid rgba(255, 255, 255, .5); outline-offset: 6px; }
#kontakt .falt input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 1000px var(--svart) inset; caret-color: #fff; }
#kontakt .formular .knapp { background: #fff; color: var(--svart); border-color: #fff; margin-top: 8px; padding: 16px 28px; }
#kontakt .formular .knapp:hover { background: transparent; color: #fff; }
#kontakt .formular .knapp:disabled { opacity: .5; cursor: default; }
#kontakt .svar { color: #fff; }
#kontakt .svar.fel { color: #ff8a80; }
@media (max-width: 560px) { #kontakt .formular { grid-template-columns: 1fr; } }
.fot { padding-top: 40px; }
.fot__inre { border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 32px; }

/* LinkedIn-avsnittet: två stycken brödtext under ingressen om hur B2B har förändrats (2026-11-11) */
.li__brod { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 64px); max-width: 980px; margin-top: clamp(28px, 3vw, 40px); }
.li__brod p { font-size: var(--t-brod); line-height: 1.65; color: var(--gra-mork); margin: 0; }
@media (max-width: 860px) { .li__brod { grid-template-columns: 1fr; gap: 18px; } }


/* Typsnitt 2026-11-11 (Johanna): Fira Mono i ingresserna och underrubrikerna i funktionerna, Fira Sans som brödtext.
   Etiketter, meny, knappar och siffror är också Fira Mono. I starten är första meningen Fira Mono och andra Fira Sans. */
.hero__ingress, .stor, .avslut__text, .omrade__rubrik, .del__under {
  font-family: var(--ingress-kod);
}
.hero__ingress--sans { font-family: var(--typ); letter-spacing: 0; line-height: 1.65; }

/* Knapp i starten i stället för områdena, Johanna 2026-11-11 (efter Carolines förslag). Reglerna för .hero__omraden ligger kvar ifall listan kommer tillbaka. */
.hero__knapp { margin: 10px 0 28px; }
.hero__knapp { background: var(--rod); border-color: var(--rod); color: #fff; }   /* röd, Johanna 2026-11-13 (förut röd bara vid hovring) */
.hero__knapp:hover, .hero__knapp:focus-visible { background: var(--svart); border-color: var(--svart); color: #fff; }


/* Områdena, ombyggda 2026-11-11 (Johanna, efter Carolines indelning). Samma stora rader och plustecken som förut,
   men nummer och utmaningen syns direkt under namnet, så att man kan läsa av alla fyra utan att öppna dem.
   Texten fälls ut vid klick (inte vid hovring, som gjorde att listan hoppade); hovring färgar bara raden röd.
   Numren togs bort samma dag (Johanna); reglerna för .omrade__nr ligger kvar men används inte. */
.omrade__knapp {
  display: grid; grid-template-columns: clamp(44px, 5vw, 72px) minmax(0, 1fr) auto; align-items: start; column-gap: 0;
  padding: clamp(22px, 2.4vw, 34px) 0 clamp(24px, 2.6vw, 36px);
}
.omrade__nr {
  font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--gra);
  padding-top: clamp(8px, 1.1vw, 18px); transition: color .25s ease;
}
.omrade__huvud { display: block; min-width: 0; }
.omrade__namn { display: block; font-size: clamp(32px, 4.6vw, 68px); hyphens: manual; }
.omrade__rubrik {
  display: block; max-width: 46em; margin: clamp(10px, 1vw, 14px) 0 0;
  font-size: clamp(15px, 1.1vw, 16px); line-height: 1.55; color: var(--gra-mork);
}
.omrade__tecken { padding-top: clamp(8px, 1.4vw, 24px); padding-left: 20px; }
.omrade__inre { display: block; padding-left: clamp(44px, 5vw, 72px); }
.omrade__text { max-width: 680px; padding-bottom: clamp(36px, 4vw, 56px); }
.omrade.oppen .omrade__nr, .omrade:has(.omrade__knapp:focus-visible) .omrade__nr { color: var(--rod); }
@media (hover: hover) {
  .omrade:hover .omrade__nr { color: var(--rod); }
  /* Ingen utfällning vid hovring längre, bara färg */
  .omrade:not(.oppen):not(:has(.omrade__knapp:focus-visible)):hover .omrade__mer { grid-template-rows: 0fr; }
  .omrade:not(.oppen):not(:has(.omrade__knapp:focus-visible)):hover .omrade__tecken i::after { transform: rotate(90deg); }
}
@media (max-width: 760px) {
  .omrade__knapp { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .omrade__nr { grid-column: 1 / -1; padding-top: 0; }
  .omrade__namn { font-size: min(6.4vw, 30px); }
  .omrade__tecken { padding-top: 6px; }
  .omrade__inre { padding-left: 0; }
}
.omrade__knapp, .omrade__knapp:where(*) { grid-template-columns: minmax(0, 1fr) auto; }
.omrade__inre { padding-left: 0; }
/* Vem av oss som bidrar, Carolines rader (2026-11-11). Underrubrikerna under namnen togs bort samma dag. */
.omrade__text p.omrade__vem {
  margin-top: 1.6em; padding-top: 1.1em; border-top: 1px solid var(--linje);
  font-family: var(--mono); font-size: 14px; line-height: 1.6; letter-spacing: -.2px; color: var(--svart);
}

/* Program, förslag 2026-11-11 (Johanna): tre kort i samma form som korten under "Så arbetar vi". */
.tre { max-width: var(--matt); margin: clamp(40px, 5vw, 64px) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.kort__bild--bt { background: #e7f6f7; display: grid; place-content: center; justify-items: center; gap: 12px; }
.kort__avsandare { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #174a5b; }
.kort__logga--bt { width: 64%; max-width: 300px; }
.kort__mer { margin-top: 14px; }
.kort__mer summary {
  cursor: pointer; list-style: none; display: inline-block;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--svart);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.kort__mer summary::-webkit-details-marker { display: none; }
.kort__mer summary:hover { color: var(--rod); }
.kort__mer[open] summary { margin-bottom: 14px; }
.kort__mer p + p { margin-top: .9em; }
@media (max-width: 1020px) { .tre { grid-template-columns: 1fr; max-width: 640px; } .tre .kort__rubrik { min-height: 0; } }
/* Tre kort i bredd: mindre rubrik och lägre bildyta, så att "Teamutveckling" ryms och korten inte blir för höga */
.tre .kort__rubrik { font-size: clamp(20px, 1.75vw, 26px); hyphens: manual; }
.tre .kort__bild { aspect-ratio: 16 / 10; }
.tre .kort__rubrik { min-height: calc(3.12em + clamp(22px, 2.4vw, 30px) + clamp(26px, 2.8vw, 36px)); }
.tre .kort__text { grid-template-columns: 1fr; gap: 14px; }
.tre .kort__pil { justify-self: end; }
@media (max-width: 1020px) { .tre .kort__rubrik { min-height: 0; } }
.kort__logga--bt { width: clamp(170px, 20vw, 300px); max-width: none; }   /* fast bredd, eftersom rutnätet krymper till innehållet */
/* BiznizTools och Halmstad Social lika breda (Johanna 2026-11-11): samma 72 %, högst 424 px, som Halmstad Socials logga */
.kort__bild--bt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.kort__logga--bt { width: 72%; max-width: 424px; }
/* Menyn har fler val sedan 2026-11-11 (Tjänster, Program): orden bryts inte, och mellanrummet krymper på mellanbredder */
.topp__meny a { white-space: nowrap; }
@media (max-width: 1100px) { .topp__meny { gap: 16px; } }
@media (max-width: 960px) { .topp__meny a:not(.topp__kontakt) { display: none; } }

/* Korten under Tjänster och Program (2026-11-12, Johanna): pilen ersatt av en knapp till kontaktformuläret,
   eftersom det inte finns några undersidor än. Texten och knappen ligger i en kolumn. */
#tjanster .kort__text, #program .kort__text { grid-template-columns: 1fr; gap: 20px; }
.kort__cta {
  justify-self: start; align-self: end; margin-top: auto;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: var(--svart); border: 1px solid var(--svart); padding: 11px 16px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.kort__cta:hover, .kort__cta:focus-visible { background: var(--rod); border-color: var(--rod); color: #fff; }
#tjanster .kort__text, #program .kort__text { grid-template-rows: 1fr auto; }   /* knappen hamnar längst ner, så att korten linjerar */
.kort__bild--hs .kort__logga { width: 50%; max-width: 300px; }   /* Halmstad Socials logga mindre (Johanna 2026-11-12), den har två rader och såg större ut än BiznizTools */

/* Ingresserna ovanför Tjänster och Program (Johanna 2026-11-12): vänsterställd text vars längsta rad slutar i
   högermarginalen, i linje med korten. Bredden sätts av sida.js efter den längsta raden; på smala skärmar fullbredd. */
.stor--hoger { text-wrap: wrap; }
@media (min-width: 861px) { .stor--hoger { margin-left: auto; } }

/* Partnerloggor längst ner i kortet Framtidens kompetenser och AI (Johanna 2026-11-12) */
.kort__partners { border-top: 1px solid var(--linje); padding-top: 16px; }
.kort__partners-rubrik { margin: 0 0 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gra); }
.kort__partners-loggor { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.kort__partners-loggor a { display: block; opacity: .85; transition: opacity .2s ease; }
.kort__partners-loggor a:hover { opacity: 1; }
.kort__partners-loggor img { display: block; height: 22px; width: auto; }
#tjanster .kort__text:has(.kort__partners) { grid-template-rows: 1fr auto auto; }
.kort__partners-loggor img { height: 24px; }

/* Partnerraden med mer luft (Johanna 2026-11-12): avstånd till texten ovanför, etiketten till vänster och loggorna till höger */
.kort__partners {
  margin-top: 12px; padding-top: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap;
}
.kort__partners-rubrik { margin: 0; }
.kort__partners-loggor { justify-content: flex-end; }
#tjanster .kort__bild, #program .kort__bild { aspect-ratio: 3 / 2; }   /* lite lägre bildyta i korten (Johanna 2026-11-12), förut 13:10 */

/* Omslagsbilden i starten (Johanna 2026-11-12), ramen "Cover" i Figma (nod 133:23) exporterad med den grå rutan
   i blandningsläget Color, så att bilden är svartvit. På breda skärmar fyller den hela starten och texten ligger över
   väggen till vänster; på smalare skärmar ligger den under texten, beskuren kring personerna. */
.hero__foto--bild {
  position: absolute; inset: 0; right: auto; bottom: auto; transform: none;
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 72% 40%;
}
@media (max-width: 1099px) {
  .hero__foto--bild {
    position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3;
    width: calc(100% + 2 * var(--kant)); margin: 40px 0 0 calc(-1 * var(--kant));
    object-position: 80% 30%;
  }
}

/* Svart navigation, test 2026-11-12 (Johanna): svart botten, vitt namn, ljusgrå menyval som blir vita vid hovring,
   och knappen omvänd (vit med svart text) som blir röd vid hovring. */
.topp { background: var(--svart); border-bottom-color: var(--svart); -webkit-backdrop-filter: none; backdrop-filter: none; }
.topp__namn { color: #fff; }
.topp__meny a { color: #c9cdd1; }
.topp__meny a:hover { color: #fff; }
.topp__kontakt { background: #fff; border-color: #fff; color: var(--svart) !important; }
.topp__kontakt:hover { background: var(--rod); border-color: var(--rod); color: #fff !important; }

/* Starten, 2026-11-12 (Johanna): på breda skärmar står texten mitt i höjdled (fortfarande vänsterställd).
   På surfplatta och mobil ligger fotot kvar som bakgrund: väggen förlängs uppåt med samma ljusgrå ton, texten står
   på väggen och personerna nedanför. Fotots överkant tonas ut mot väggfärgen så att skarven inte syns. */
.hero:has(.hero__foto--bild) { align-content: center; padding-top: 112px; padding-bottom: 64px; }
@media (max-width: 1099px) {
  .hero:has(.hero__foto--bild) { background: #e4e4e4; align-content: start; padding-top: 112px; padding-bottom: 0; }
  .hero__foto--bild {
    position: relative; inset: auto; width: calc(100% + 2 * var(--kant)); max-width: none;
    height: clamp(440px, 100vw, 760px); aspect-ratio: auto; margin: -72px 0 0 calc(-1 * var(--kant));
    object-fit: cover; object-position: 100% 100%;   /* personerna hamnar mitt i bild */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%); mask-image: linear-gradient(to bottom, transparent 0%, #000 28%);
  }
}

/* Turnstile i kontaktformuläret (2026-11-12) */
#kontakt .cf-turnstile { grid-column: 1 / -1; min-height: 65px; }

/* Enhetlig stil, genomgång 2026-11-12. Samma knapp överallt (Fira Mono 13 px, samma luft), alla rubriker på
   samma nivå lika stora, och etiketterna 12 px i Fira Mono. Bara snitt som laddas används. */
.knapp, .kort__cta, #kontakt .formular .knapp {
  font-family: var(--mono); font-size: 13px; font-weight: 400; letter-spacing: .06em; line-height: 1.5;
  text-transform: uppercase; padding: 14px 24px; border-radius: 0;
}
.topp__kontakt { font-size: 12px; line-height: 1.5; padding: 8px 14px; }
.oss .person h3, .person h3 { font-size: var(--t-h3); }
#tjanster .kort__partners-rubrik, .kort__partners-rubrik {
  font-family: var(--mono); font-size: 12px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: var(--gra);
}
.omrade__tecken i { font-style: normal; }
/* Startbilden ligger i <picture> för WebP och flera storlekar; omslaget ska inte påverka layouten */
.hero picture { display: contents; }
/* Rubriker som bara är till för sökmotorer och skärmläsare */
.dold { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* LinkedInstrategi: LinkedIns officiella logga på ljust gråblå botten (Johanna 2026-11-13), samma uppbyggnad som
   Program-korten. LinkedIns riktlinjer: oförändrad logga, enfärgad ljus bakgrund, luft runt om minst en in-ruta. */
.kort__bild--li { background: #d9dee3; display: flex; align-items: center; justify-content: center; }
.kort__logga--li { display: block; width: 56%; max-width: 340px; height: auto; margin: 0; }

/* Ny form 2026-11-13 (Johanna, provad på testlänken): egen logotyp i menyn och sidfoten, rubrikerna H1–H3 i Alike
   med versaler i stället för Archivo bred, som inte passade till logotypen. Hela ingressen i starten i Fira Mono,
   områdesnamnen mindre och kortrubrikerna med jämna radlängder. */
@font-face { font-family: "Alike"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("typsnitt/alike-latin.woff2") format("woff2"); }
:root { --rubrik: "Alike", Georgia, serif; }
/* Logotypen: höjden följer den textstorlek namnet hade (22, 19 och 15 px) */
.topp__namn, .fot__namn { line-height: 0; }
.logga { display: block; height: 1em; width: auto; }
h1, h2, h3, .hero__rubrik, .kort__rubrik, .person h3, .omrade__namn, .matning__rubrik, .oss__rubrik {
  font-family: var(--rubrik); font-stretch: normal; font-weight: 400;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.12;
}
.omrade__rad { font: inherit; }
.omrade__namn { font-size: clamp(24px, 3.2vw, 46px); }   /* förut 32–68 px */
.kort__rubrik { text-wrap: balance; }                      /* så att "AI" inte hamnar ensamt */
.hero__ingress--sans { font-family: var(--mono); letter-spacing: var(--sparr-ingress); line-height: 1.6; }   /* förut Fira Sans */

/* Foto som kortbild (Framtidens kompetenser och AI, Johanna 2026-11-13), fyller ytan i 3:2 */
.kort__bild--foto { overflow: hidden; }
.kort__bild--foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Rubriken i starten bredare i mobilen (Johanna 2026-11-13): större, så att "MARKNADEN" fyller raden
   (förut 0,116 av textbredden, cirka 39 px vid 375 px skärm, nu cirka 49 px) */
@media (max-width: 600px) { .hero__rubrik { font-size: calc((100vw - 2 * var(--kant)) * .145); max-width: none; } }

/* Språkväxlaren i menyn, SV/EN (2026-11-13). Syns även i mobilen, där de andra menylänkarna är dolda. */
.topp__meny a.topp__sprak { display: inline; color: #fff; }
.topp__meny a.topp__sprak:hover { color: var(--rod); }
@media (max-width: 960px) { .topp { gap: 16px; } .topp__meny { gap: 14px; } }
/* Den engelska rubriken i starten i mobilen: lite mindre, så att den blir fyra rader (THE MARKET / HAS ALREADY / MOVED. / HAVE YOU?) */
@media (max-width: 600px) { html[lang="en"] .hero__rubrik { font-size: calc((100vw - 2 * var(--kant)) * .138); } }